third_party/ot-br-posix/repo/third_party/mdl/repo/src/styleguide.scss

   1 /**
   2  * Copyright 2015 Google Inc. All Rights Reserved.
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  *      http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13  * See the License for the specific language governing permissions and
  14  * limitations under the License.
  15  */
  16
  17 @import "material-design-lite";
  18
  19 $padding: 24px;
  20
  21 body {
  22   margin: 0px;
  23 }
  24
  25 .styleguide-demo h1 {
  26   margin: ($padding * 2) $padding 0 $padding;
  27 }
  28
  29 .styleguide-demo h1:after {
  30   content: '';
  31
  32   display: block;
  33   width: 100%;
  34
  35   border-bottom: 1px solid rgba(0,0,0,0.5);
  36   margin-top: $padding;
  37 }
  38
  39 .styleguide-demo {
  40   opacity: 0;
  41
  42   transition: opacity 0.6s ease;
  43 }
  44
  45 .styleguide-masthead {
  46   height: 256px;
  47   background: unquote("rgb(#{nth($palette-grey, 10)})");
  48   padding: 115px 16px 0;
  49 }
  50
  51 .styleguide-container {
  52   position: relative;
  53   max-width: 960px;
  54   width: 100%;
  55 }
  56
  57 .styleguide-title {
  58   color: #fff;
  59   bottom: auto;
  60   position: relative;
  61   font-size: 56px;
  62   font-weight: 300;
  63   line-height: 1;
  64   letter-spacing: -0.02em;
  65
  66   &:after {
  67     border-bottom: 0px;
  68   }
  69
  70   span {
  71     font-weight: 300;
  72   }
  73 }
  74
  75 .mdl-styleguide .mdl-layout__drawer .mdl-navigation__link {
  76   padding: 10px 24px;
  77 }
  78
  79 .demosLoaded .styleguide-demo {
  80   opacity: 1;
  81 }
  82
  83 iframe {
  84   display: block;
  85
  86   width: 100%;
  87
  88   border: none;
  89 }
  90
  91 iframe.heightSet {
  92   overflow: hidden;
  93 }
  94
  95 .demo-wrapper {
  96   margin: $padding;
  97
  98   iframe {
  99     border: 1px solid rgba(0,0,0,0.5);
 100   }
 101 }