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}
195