github.com/iqoqo/nomad@v0.11.3-0.20200911112621-d7021c74d101/ui/app/styles/storybook.scss (about)

     1  #storybook {
     2    .mock-content {
     3      display: flex;
     4      min-height: 250px;
     5      height: 100%;
     6  
     7      .mock-image,
     8      .mock-copy {
     9        min-height: 100%;
    10        width: 100%;
    11        margin: 1em;
    12      }
    13  
    14      .mock-image {
    15        background: linear-gradient(
    16            to top right,
    17            transparent 0%,
    18            transparent 49%,
    19            $grey-blue 49%,
    20            $grey-blue 51%,
    21            transparent 51%,
    22            transparent 100%
    23          ),
    24          linear-gradient(
    25            to bottom right,
    26            transparent 0%,
    27            transparent 49%,
    28            $grey-blue 49%,
    29            $grey-blue 51%,
    30            transparent 51%,
    31            transparent 100%
    32          );
    33      }
    34  
    35      .mock-copy {
    36        background: repeating-linear-gradient(
    37          to bottom,
    38          $grey-blue,
    39          $grey-blue 5px,
    40          transparent 5px,
    41          transparent 14px
    42        );
    43      }
    44  
    45      .mock-vague {
    46        background: lighten($grey-blue, 15%);
    47        width: 100%;
    48        height: 100%;
    49      }
    50    }
    51  
    52    .mock-spacing {
    53      padding: 2em;
    54    }
    55  
    56    .annotation {
    57      font-size: 0.9rem;
    58    }
    59  
    60    .palette {
    61      .title {
    62        font-size: 1.4rem;
    63        font-weight: $weight-bold;
    64        padding-bottom: 2px;
    65        padding-top: 10px;
    66      }
    67  
    68      .description {
    69        font-size: 0.8rem;
    70        padding-bottom: 5px;
    71      }
    72  
    73      .item {
    74        border: solid 1px $grey-blue;
    75        display: inline-block;
    76        margin: 0 5px 5px 0;
    77  
    78        .color {
    79          height: 90px;
    80          width: 160px;
    81        }
    82  
    83        .info {
    84          background-color: white;
    85          border-top: solid 1px $grey-blue;
    86          padding: 5px;
    87        }
    88  
    89        .hex {
    90          font-size: 12px;
    91          font-weight: $weight-bold;
    92          margin-bottom: 0;
    93        }
    94  
    95        .name {
    96          color: $ui-gray-500;
    97          font-size: 11px;
    98          margin-top: 0;
    99        }
   100      }
   101    }
   102  
   103    .typeface {
   104      .hero,
   105      .sample {
   106        font-family: inherit;
   107      }
   108  
   109      .hero {
   110        font-size: 140px;
   111        line-height: 1.05;
   112      }
   113  
   114      .sample {
   115        font-size: 15px;
   116        margin: 0;
   117      }
   118    }
   119  
   120    .multiples {
   121      display: flex;
   122      flex-wrap: wrap;
   123      align-items: center;
   124      justify-content: center;
   125    }
   126  
   127    .chart-container {
   128      width: 200px;
   129      padding: 15px;
   130      border: 1px solid $ui-gray-200;
   131      display: inline-block;
   132  
   133      &.is-small {
   134        width: 150px;
   135      }
   136  
   137      &.is-large {
   138        width: 250px;
   139      }
   140  
   141      &.is-xlarge {
   142        width: 300px;
   143      }
   144    }
   145  }