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