github.com/hernad/nomad@v1.6.112/ui/app/styles/storybook.scss (about)

     1  /**
     2   * Copyright (c) HashiCorp, Inc.
     3   * SPDX-License-Identifier: MPL-2.0
     4   */
     5  
     6  #storybook {
     7    .mock-content {
     8      display: flex;
     9      min-height: 250px;
    10      height: 100%;
    11  
    12      .mock-image,
    13      .mock-copy {
    14        min-height: 100%;
    15        width: 100%;
    16        margin: 1em;
    17      }
    18  
    19      .mock-image {
    20        background: linear-gradient(
    21            to top right,
    22            transparent 0%,
    23            transparent 49%,
    24            $grey-blue 49%,
    25            $grey-blue 51%,
    26            transparent 51%,
    27            transparent 100%
    28          ),
    29          linear-gradient(
    30            to bottom right,
    31            transparent 0%,
    32            transparent 49%,
    33            $grey-blue 49%,
    34            $grey-blue 51%,
    35            transparent 51%,
    36            transparent 100%
    37          );
    38      }
    39  
    40      .mock-copy {
    41        background: repeating-linear-gradient(
    42          to bottom,
    43          $grey-blue,
    44          $grey-blue 5px,
    45          transparent 5px,
    46          transparent 14px
    47        );
    48      }
    49  
    50      .mock-vague {
    51        background: lighten($grey-blue, 15%);
    52        width: 100%;
    53        height: 100%;
    54      }
    55    }
    56  
    57    .mock-spacing {
    58      padding: 2em;
    59    }
    60  
    61    .annotation {
    62      padding: 1rem 0;
    63      font-size: 0.9rem;
    64    }
    65  
    66    .palette {
    67      .title {
    68        font-size: 1.4rem;
    69        font-weight: $weight-bold;
    70        padding-bottom: 2px;
    71        padding-top: 10px;
    72      }
    73  
    74      .description {
    75        font-size: 0.8rem;
    76        padding-bottom: 5px;
    77      }
    78  
    79      .item {
    80        border: solid 1px $grey-blue;
    81        display: inline-block;
    82        margin: 0 5px 5px 0;
    83  
    84        .color {
    85          height: 90px;
    86          width: 160px;
    87        }
    88  
    89        .info {
    90          background-color: white;
    91          border-top: solid 1px $grey-blue;
    92          padding: 5px;
    93        }
    94  
    95        .hex {
    96          font-size: 12px;
    97          font-weight: $weight-bold;
    98          margin-bottom: 0;
    99        }
   100  
   101        .name {
   102          color: $ui-gray-500;
   103          font-size: 11px;
   104          margin-top: 0;
   105        }
   106      }
   107    }
   108  
   109    .typeface {
   110      .hero,
   111      .sample {
   112        font-family: inherit;
   113      }
   114  
   115      .hero {
   116        font-size: 140px;
   117        line-height: 1.05;
   118      }
   119  
   120      .sample {
   121        font-size: 15px;
   122        margin: 0;
   123      }
   124    }
   125  
   126    .multiples {
   127      display: flex;
   128      flex-wrap: wrap;
   129      align-items: center;
   130      justify-content: center;
   131  
   132      &.with-spacing {
   133        > * {
   134          margin-right: 1em;
   135          margin-bottom: 1em;
   136        }
   137      }
   138  
   139      &.is-left-aligned {
   140        justify-content: flex-start;
   141      }
   142    }
   143  
   144    .chart-container {
   145      width: 200px;
   146      padding: 15px;
   147      border: 1px solid $ui-gray-200;
   148      display: inline-block;
   149  
   150      &.is-small {
   151        width: 150px;
   152      }
   153  
   154      &.is-large {
   155        width: 250px;
   156      }
   157  
   158      &.is-xlarge {
   159        width: 300px;
   160      }
   161    }
   162  
   163    .tile-list {
   164      display: flex;
   165      flex-wrap: wrap;
   166  
   167      .icon-tile {
   168        width: 240px;
   169        padding: 10px;
   170        margin: 10px;
   171        border: 1px solid $grey-lighter;
   172        border-radius: $radius;
   173        svg {
   174          margin: auto;
   175          width: 30px;
   176          height: 30;
   177          fill: $grey;
   178          color: $grey;
   179        }
   180      }
   181    }
   182  
   183    .mock-hover-region {
   184      width: 200px;
   185      height: 100px;
   186      position: relative;
   187      border-radius: $radius;
   188      margin: 1em 0;
   189      padding: 1em;
   190      border: 1px solid $grey-blue;
   191      background: $white-ter;
   192      color: $grey;
   193      font-weight: $weight-bold;
   194    }
   195  
   196    .title:not(:first-child) {
   197      margin-top: 2em;
   198    }
   199  }