preview-head.html (3922B)
1 <!-- This Source Code Form is subject to the terms of the Mozilla Public 2 - License, v. 2.0. If a copy of the MPL was not distributed with this file, 3 - You can obtain one at http://mozilla.org/MPL/2.0/. --> 4 5 <link 6 rel="stylesheet" 7 href="chrome://global/skin/design-system/text-and-typography.css" 8 /> 9 <link 10 rel="stylesheet" 11 href="chrome://global/skin/design-system/tokens-brand.css" 12 /> 13 14 <style> 15 :root { 16 font-size: var(--font-size-root); 17 } 18 19 a { 20 color: var(--link-color) !important; 21 text-decoration: underline !important; 22 } 23 24 div:has(p, .toc-wrapper) { 25 width: unset !important; 26 min-width: 10rem !important; 27 } 28 29 .toc-wrapper { 30 margin-inline-end: 8px; 31 } 32 33 /* Override the default Storybook padding in favour of styles 34 provided by our WithCommonStyles wrapper */ 35 .sb-show-main.sb-main-padded { 36 padding: 0; 37 } 38 39 /* Ensure WithCommonStyles can grow to fit the page */ 40 html, 41 body, 42 #root, 43 #root-inner, 44 #storybook-root { 45 height: 100%; 46 } 47 48 /* Docs stories are being given unnecessary height, possibly because we 49 turned off certain controls */ 50 .docs-story div div { 51 height: unset; 52 } 53 54 /* Typography preview and design tokens table */ 55 table.sb-preview-design-tokens { 56 -moz-osx-font-smoothing: auto; 57 border-collapse: separate; 58 table-layout: fixed; 59 text-align: left; 60 width: 100%; 61 62 & h1.sb-preview-font-size-xxlarge { 63 font-size: var(--font-size-xxlarge); 64 } 65 } 66 67 td.sb-preview-chrome-typescale { 68 & .docs-story { 69 * { 70 font: message-box; 71 } 72 73 & h1 { 74 font-weight: var(--font-weight-semibold) !important; 75 } 76 } 77 78 &.sb-preview-chrome-menu .docs-story * { 79 font: menu; 80 } 81 } 82 83 h1.sb-preview-chrome-typescale { 84 font: message-box; 85 font-weight: var(--heading-font-weight) !important; 86 87 &.sb-preview-chrome-menu { 88 font: menu; 89 } 90 } 91 92 table .sb-preview-font-size-small { 93 font-size: var(--font-size-small); 94 } 95 96 .box { 97 display: flex; 98 flex-wrap: wrap; 99 gap: 12px; 100 101 &.width-max-content { 102 width: max-content; 103 } 104 105 &.relative { 106 position: relative; 107 } 108 &.absolute { 109 position: absolute; 110 } 111 112 &.justify-center { 113 justify-content: center; 114 } 115 116 &.align-center { 117 align-items: center; 118 } 119 120 &.align-end { 121 align-items: flex-end; 122 } 123 124 &.vertical { 125 flex-direction: column; 126 } 127 128 &.left { 129 left: 0; 130 } 131 132 &.right { 133 right: 0; 134 } 135 136 &.top { 137 top: 0; 138 } 139 140 & + h1, 141 & + h2, 142 & + h3 { 143 margin-top: 16px !important; 144 } 145 } 146 147 .post-it { 148 align-items: center; 149 background: 150 linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, 0.4) 0) 151 no-repeat 100% 0 / 1em 1em, 152 linear-gradient(-135deg, transparent 0.7em, var(--color-red-0) 0); 153 display: flex; 154 font-size: 14px !important; 155 height: 85px; 156 justify-content: center; 157 margin: 12px 0; 158 position: relative; 159 text-align: center; 160 width: 85px; 161 162 &.green { 163 background: 164 linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, 0.4) 0) 165 no-repeat 100% 0 / 1em 1em, 166 linear-gradient(-135deg, transparent 0.7em, var(--color-green-0) 0); 167 } 168 169 &.blue { 170 background: 171 linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, 0.4) 0) 172 no-repeat 100% 0 / 1em 1em, 173 linear-gradient(-135deg, transparent 0.7em, var(--color-blue-0) 0); 174 } 175 176 &.orange { 177 background: 178 linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, 0.4) 0) 179 no-repeat 100% 0 / 1em 1em, 180 linear-gradient(-135deg, transparent 0.7em, var(--color-yellow-0) 0); 181 } 182 183 &.big { 184 height: 160px; 185 width: 160px; 186 } 187 188 &.disabled { 189 opacity: 0.4; 190 } 191 } 192 193 .container-width-large { 194 min-width: 968px; 195 } 196 </style>