github.com/anth0d/nomad@v0.0.0-20221214183521-ae3a0a2cad06/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      padding: 1rem 0;
    58      font-size: 0.9rem;
    59    }
    60  
    61    .palette {
    62      .title {
    63        font-size: 1.4rem;
    64        font-weight: $weight-bold;
    65        padding-bottom: 2px;
    66        padding-top: 10px;
    67      }
    68  
    69      .description {
    70        font-size: 0.8rem;
    71        padding-bottom: 5px;
    72      }
    73  
    74      .item {
    75        border: solid 1px $grey-blue;
    76        display: inline-block;
    77        margin: 0 5px 5px 0;
    78  
    79        .color {
    80          height: 90px;
    81          width: 160px;
    82        }
    83  
    84        .info {
    85          background-color: white;
    86          border-top: solid 1px $grey-blue;
    87          padding: 5px;
    88        }
    89  
    90        .hex {
    91          font-size: 12px;
    92          font-weight: $weight-bold;
    93          margin-bottom: 0;
    94        }
    95  
    96        .name {
    97          color: $ui-gray-500;
    98          font-size: 11px;
    99          margin-top: 0;
   100        }
   101      }
   102    }
   103  
   104    .typeface {
   105      .hero,
   106      .sample {
   107        font-family: inherit;
   108      }
   109  
   110      .hero {
   111        font-size: 140px;
   112        line-height: 1.05;
   113      }
   114  
   115      .sample {
   116        font-size: 15px;
   117        margin: 0;
   118      }
   119    }
   120  
   121    .multiples {
   122      display: flex;
   123      flex-wrap: wrap;
   124      align-items: center;
   125      justify-content: center;
   126  
   127      &.with-spacing {
   128        > * {
   129          margin-right: 1em;
   130          margin-bottom: 1em;
   131        }
   132      }
   133  
   134      &.is-left-aligned {
   135        justify-content: flex-start;
   136      }
   137    }
   138  
   139    .chart-container {
   140      width: 200px;
   141      padding: 15px;
   142      border: 1px solid $ui-gray-200;
   143      display: inline-block;
   144  
   145      &.is-small {
   146        width: 150px;
   147      }
   148  
   149      &.is-large {
   150        width: 250px;
   151      }
   152  
   153      &.is-xlarge {
   154        width: 300px;
   155      }
   156    }
   157  
   158    .tile-list {
   159      display: flex;
   160      flex-wrap: wrap;
   161  
   162      .icon-tile {
   163        width: 240px;
   164        padding: 10px;
   165        margin: 10px;
   166        border: 1px solid $grey-lighter;
   167        border-radius: $radius;
   168        svg {
   169          margin: auto;
   170          width: 30px;
   171          height: 30;
   172          fill: $grey;
   173          color: $grey;
   174        }
   175      }
   176    }
   177  
   178    .mock-hover-region {
   179      width: 200px;
   180      height: 100px;
   181      position: relative;
   182      border-radius: $radius;
   183      margin: 1em 0;
   184      padding: 1em;
   185      border: 1px solid $grey-blue;
   186      background: $white-ter;
   187      color: $grey;
   188      font-weight: $weight-bold;
   189    }
   190  
   191    .title:not(:first-child) {
   192      margin-top: 2em;
   193    }
   194  }