bsw/jbe@1309: /**
bsw/jbe@1309:  * Copyright 2015 Google Inc. All Rights Reserved.
bsw/jbe@1309:  *
bsw/jbe@1309:  * Licensed under the Apache License, Version 2.0 (the "License");
bsw/jbe@1309:  * you may not use this file except in compliance with the License.
bsw/jbe@1309:  * You may obtain a copy of the License at
bsw/jbe@1309:  *
bsw/jbe@1309:  *      http://www.apache.org/licenses/LICENSE-2.0
bsw/jbe@1309:  *
bsw/jbe@1309:  * Unless required by applicable law or agreed to in writing, software
bsw/jbe@1309:  * distributed under the License is distributed on an "AS IS" BASIS,
bsw/jbe@1309:  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
bsw/jbe@1309:  * See the License for the specific language governing permissions and
bsw/jbe@1309:  * limitations under the License.
bsw/jbe@1309:  */
bsw/jbe@1309: 
bsw/jbe@1309: @import "material-design-lite";
bsw/jbe@1309: 
bsw/jbe@1309: $padding: 24px;
bsw/jbe@1309: 
bsw/jbe@1309: body {
bsw/jbe@1309:   margin: 0px;
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: .styleguide-demo h1 {
bsw/jbe@1309:   margin: ($padding * 2) $padding 0 $padding;
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: .styleguide-demo h1:after {
bsw/jbe@1309:   content: '';
bsw/jbe@1309: 
bsw/jbe@1309:   display: block;
bsw/jbe@1309:   width: 100%;
bsw/jbe@1309: 
bsw/jbe@1309:   border-bottom: 1px solid rgba(0,0,0,0.5);
bsw/jbe@1309:   margin-top: $padding;
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: .styleguide-demo {
bsw/jbe@1309:   opacity: 0;
bsw/jbe@1309: 
bsw/jbe@1309:   transition: opacity 0.6s ease;
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: .styleguide-masthead {
bsw/jbe@1309:   height: 256px;
bsw/jbe@1309:   background: unquote("rgb(#{nth($palette-grey, 10)})");
bsw/jbe@1309:   padding: 115px 16px 0;
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: .styleguide-container {
bsw/jbe@1309:   position: relative;
bsw/jbe@1309:   max-width: 960px;
bsw/jbe@1309:   width: 100%;
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: .styleguide-title {
bsw/jbe@1309:   color: #fff;
bsw/jbe@1309:   bottom: auto;
bsw/jbe@1309:   position: relative;
bsw/jbe@1309:   font-size: 56px;
bsw/jbe@1309:   font-weight: 300;
bsw/jbe@1309:   line-height: 1;
bsw/jbe@1309:   letter-spacing: -0.02em;
bsw/jbe@1309: 
bsw/jbe@1309:   &:after {
bsw/jbe@1309:     border-bottom: 0px;
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   span {
bsw/jbe@1309:     font-weight: 300;
bsw/jbe@1309:   }
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: .mdl-styleguide .mdl-layout__drawer .mdl-navigation__link {
bsw/jbe@1309:   padding: 10px 24px;
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: .demosLoaded .styleguide-demo {
bsw/jbe@1309:   opacity: 1;
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: iframe {
bsw/jbe@1309:   display: block;
bsw/jbe@1309: 
bsw/jbe@1309:   width: 100%;
bsw/jbe@1309: 
bsw/jbe@1309:   border: none;
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: iframe.heightSet {
bsw/jbe@1309:   overflow: hidden;
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: .demo-wrapper {
bsw/jbe@1309:   margin: $padding;
bsw/jbe@1309: 
bsw/jbe@1309:   iframe {
bsw/jbe@1309:     border: 1px solid rgba(0,0,0,0.5);
bsw/jbe@1309:   }
bsw/jbe@1309: }