update shared components

This commit is contained in:
Luke Pulverenti 2016-03-09 12:40:22 -05:00
parent fb269362ff
commit 71811cb9e3
221 changed files with 32936 additions and 101 deletions

View file

@ -0,0 +1,46 @@
/**
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@import "../variables";
@import "../mixins";
.mdl-shadow--2dp {
@include shadow-2dp();
}
.mdl-shadow--3dp {
@include shadow-3dp();
}
.mdl-shadow--4dp {
@include shadow-4dp();
}
.mdl-shadow--6dp {
@include shadow-6dp();
}
.mdl-shadow--8dp {
@include shadow-8dp();
}
.mdl-shadow--16dp {
@include shadow-16dp();
}
.mdl-shadow--24dp {
@include shadow-24dp();
}

View file

@ -0,0 +1,43 @@
/**
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.demo-page--shadow .demo-preview-block {
height: 100px;
}
.demo-shadow-card {
background-color: #fff;
border-radius: 2px;
display: block;
height: 72px;
margin-bottom: 20px;
margin-right: 32px;
padding: 10px;
text-align: center;
float: left;
color: #9E9E9E;
display: flex;
align-items: center;
justify-content: center;
transition-property: opacity, transform;
width: 72px;
}
@media screen and (max-width: 360px ) {
.demo-shadow-card {
width: 27px;
}
}

View file

@ -0,0 +1,8 @@
<div class="demo-preview-block demo-page--shadow">
<div class="demo-shadow-card mdl-shadow--2dp">2dp</div>
<div class="demo-shadow-card mdl-shadow--3dp">3dp</div>
<div class="demo-shadow-card mdl-shadow--4dp">4dp</div>
<div class="demo-shadow-card mdl-shadow--6dp">6dp</div>
<div class="demo-shadow-card mdl-shadow--8dp">8dp</div>
<div class="demo-shadow-card mdl-shadow--16dp">16dp</div>
</div>