_typo.scss 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487
  1. strong {
  2. font-weight: $font-weight-bold;
  3. }
  4. hr {
  5. margin: 3rem 0;
  6. border: 0;
  7. border-top: 1px solid $color-border-light;
  8. }
  9. a {
  10. color: $color-primary;
  11. text-decoration: none;
  12. &:hover {
  13. color: theme-darken($color-primary);
  14. text-decoration: none;
  15. }
  16. }
  17. %headers-common {
  18. display: block;
  19. font-weight: $font-weight-bold;
  20. color: var(--color-headings, #{$color-headers});
  21. margin-bottom: 0.5rem;
  22. line-height: 1.2;
  23. a {
  24. text-decoration: none;
  25. color: inherit;
  26. &:hover {
  27. text-decoration: underline;
  28. }
  29. }
  30. }
  31. .h0 {
  32. @extend %headers-common;
  33. font-size: $font-size-h1;
  34. line-height: $line-height-h1;
  35. font-weight: $font-weight-black;
  36. @include media-breakpoint-up(lg) {
  37. font-size: $font-size-h0;
  38. line-height: $line-height-h0;
  39. }
  40. }
  41. h1,
  42. .h1 {
  43. @extend %headers-common;
  44. font-size: $font-size-h1;
  45. line-height: $line-height-h1;
  46. }
  47. h2,
  48. .h2 {
  49. @extend %headers-common;
  50. font-size: $font-size-h2;
  51. line-height: $line-height-h2;
  52. }
  53. h3,
  54. .h3 {
  55. @extend %headers-common;
  56. font-size: $font-size-h3;
  57. line-height: $line-height-h3;
  58. margin-bottom: $gap-1;
  59. }
  60. h4,
  61. .h4 {
  62. @extend %headers-common;
  63. font-size: $font-size-h4;
  64. line-height: $line-height-h4;
  65. margin-bottom: $gap-1;
  66. }
  67. h5,
  68. .h5 {
  69. @extend %headers-common;
  70. font-size: $font-size-h5;
  71. line-height: $line-height-h5;
  72. margin-bottom: $gap-1;
  73. }
  74. h6,
  75. .h6 {
  76. @extend %headers-common;
  77. font-size: $font-size-h6;
  78. line-height: $line-height-h6;
  79. margin-bottom: $gap-1;
  80. }
  81. .h-subheader {
  82. font-size: $font-size-h7;
  83. line-height: $line-height-h7;
  84. margin-bottom: $gap-2;
  85. text-transform: uppercase;
  86. letter-spacing: $tracking-wide;
  87. color: $color-muted-light;
  88. font-weight: $font-weight-medium;
  89. }
  90. p,
  91. ol,
  92. ul,
  93. pre,
  94. table,
  95. .highlight,
  96. .callout,
  97. .tip {
  98. margin-bottom: $gap-4;
  99. }
  100. ol,
  101. ul {
  102. margin-left: 1rem;
  103. padding-left: 1rem;
  104. }
  105. img,
  106. picture {
  107. max-width: 100%;
  108. display: block;
  109. &[width][height] {
  110. height: auto;
  111. }
  112. &:not([height]) {
  113. height: auto;
  114. }
  115. }
  116. .img {
  117. border: 1px solid $color-border-light;
  118. border-radius: $border-radius;
  119. background: $color-white;
  120. }
  121. input,
  122. button,
  123. textarea,
  124. select {
  125. font: inherit;
  126. }
  127. img:not([alt]) {
  128. filter: blur(10px);
  129. }
  130. .text-truncate {
  131. @include text-truncate(100%);
  132. }
  133. .link-icon {
  134. display: inline-flex;
  135. color: inherit;
  136. text-decoration: none;
  137. @at-root a#{&} {
  138. &:hover {
  139. opacity: 0.8;
  140. }
  141. }
  142. svg {
  143. opacity: 0.5;
  144. vertical-align: bottom;
  145. margin-right: $gap-2;
  146. width: $line-height-base;
  147. height: $line-height-base;
  148. }
  149. }
  150. .link-text {
  151. color: $color-text;
  152. text-decoration: none;
  153. transition: 0.3s color;
  154. &:hover {
  155. text-decoration: none;
  156. color: $color-primary;
  157. }
  158. }
  159. .link-muted {
  160. color: $color-muted;
  161. text-decoration: none;
  162. transition: 0.3s color;
  163. &:hover,
  164. &.active {
  165. text-decoration: none;
  166. color: $color-text;
  167. }
  168. }
  169. .link-brand {
  170. color: $color-muted-light;
  171. text-decoration: none;
  172. transition: 0.3s color;
  173. &:hover {
  174. text-decoration: none;
  175. color: $color-text;
  176. }
  177. }
  178. .visually-hidden {
  179. clip: rect(0 0 0 0);
  180. clip-path: inset(50%);
  181. height: 1px;
  182. overflow: hidden;
  183. position: absolute;
  184. white-space: nowrap;
  185. width: 1px;
  186. }
  187. code {
  188. padding: 0.25em 0.25em;
  189. font-family: $font-family-monospace;
  190. font-size: 85%;
  191. background-color: rgba($color-muted-dark, 0.04);
  192. border-radius: $border-radius;
  193. border: 1px solid $color-border;
  194. color: $color-muted-dark;
  195. }
  196. pre,
  197. code {
  198. font-family: $font-family-monospace;
  199. }
  200. pre {
  201. white-space: pre-wrap;
  202. line-height: 1.7142857143;
  203. background: $color-highlight-bg;
  204. color: $color-white;
  205. border-radius: $border-radius;
  206. padding: $gap-3 $gap-4;
  207. font-size: 14px;
  208. word-break: break-word;
  209. tab-size: 2;
  210. overflow: auto;
  211. max-height: 25rem;
  212. @include scrollbar-dark;
  213. code {
  214. background: transparent;
  215. border-radius: 0;
  216. border: none;
  217. font-size: 1em;
  218. display: block;
  219. padding: 0;
  220. color: inherit;
  221. white-space: pre-wrap !important;
  222. }
  223. }
  224. $languages: (
  225. yml: "YAML",
  226. scss: "SCSS",
  227. css: "CSS",
  228. html: "HTML",
  229. js: "JavaScript",
  230. ts: "TypeScript",
  231. );
  232. %language {
  233. position: relative;
  234. pre.highlight:after {
  235. position: absolute;
  236. font-size: $font-size-h6;
  237. user-select: none;
  238. top: $gap-2;
  239. right: $gap-2;
  240. opacity: 0.5;
  241. }
  242. }
  243. @each $class, $name in $languages {
  244. .language-#{$class} {
  245. @extend %language;
  246. pre.highlight:after {
  247. content: "#{$name}";
  248. }
  249. }
  250. }
  251. figure {
  252. }
  253. figcaption {
  254. text-align: center;
  255. font-size: $font-size-h6;
  256. margin: $gap-2 0 0;
  257. color: $color-muted;
  258. }
  259. @keyframes animated-ellipsis-keyframes {
  260. 0% {
  261. transform: translateX(-100%);
  262. }
  263. }
  264. .animated-ellipsis {
  265. display: inline-block;
  266. overflow: hidden;
  267. vertical-align: bottom;
  268. &:after {
  269. display: inline-block;
  270. content: "...";
  271. animation: animated-ellipsis-keyframes 1.2s steps(4, jump-none) infinite;
  272. }
  273. }
  274. .steps {
  275. margin-left: 1rem;
  276. padding-left: 2rem;
  277. counter-reset: step;
  278. border-left: 1px solid $color-border;
  279. margin-bottom: 3rem;
  280. h3 {
  281. counter-increment: step;
  282. &:not(:first-child) {
  283. margin-top: 3rem !important;
  284. }
  285. &:before {
  286. content: counter(step);
  287. display: inline-block;
  288. position: absolute;
  289. margin-top: -2px;
  290. margin-left: calc(-2rem - 1rem);
  291. width: 2rem;
  292. height: 2rem;
  293. text-align: center;
  294. text-indent: -1px;
  295. color: $color-muted;
  296. border-radius: 100%;
  297. border: 4px solid $color-background;
  298. background: $color-gray;
  299. line-height: 1.5rem;
  300. font-size: $font-size-h6;
  301. font-weight: 400;
  302. }
  303. }
  304. }
  305. .tabs {
  306. padding: 0;
  307. margin: 0 0 1.5rem;
  308. border-bottom: 1px solid $color-border;
  309. font-size: $font-size-h6;
  310. }
  311. .tab {
  312. text-decoration: none;
  313. display: inline-block;
  314. line-height: 1;
  315. padding: $gap-2 0;
  316. margin-bottom: -1px;
  317. border-bottom: 2px solid transparent;
  318. color: $color-headers;
  319. cursor: pointer;
  320. &.active {
  321. color: $color-primary;
  322. border-bottom-color: $color-primary;
  323. }
  324. &:not(:first-child) {
  325. margin-left: 1.5rem;
  326. }
  327. }
  328. /*
  329. Callout
  330. */
  331. .callout {
  332. border: 1px solid rgba($color-primary, 0.3);
  333. border-radius: $border-radius;
  334. background: rgba($color-primary, 0.06);
  335. padding: $gap-3;
  336. > :last-child {
  337. margin-bottom: 0;
  338. }
  339. }
  340. .callout-title {
  341. @extend .h-subheader;
  342. color: $color-primary;
  343. }
  344. /**
  345. Tip
  346. */
  347. .tip {
  348. line-height: 1.5rem;
  349. .icon {
  350. width: 1.5rem;
  351. height: 1.5rem;
  352. margin-right: 0.5rem;
  353. vertical-align: bottom;
  354. }
  355. }
  356. /**
  357. Link
  358. */
  359. .link {
  360. .link-img {
  361. box-shadow: $shadow-card;
  362. transition: $transition-duration transform;
  363. }
  364. &:hover {
  365. .link-img {
  366. box-shadow: $shadow-card, $shadow-card-lg;
  367. transform: scale(1.05);
  368. }
  369. }
  370. }
  371. /**
  372. Options table
  373. */
  374. .options-table {
  375. display: grid;
  376. grid-template-columns: repeat(4, minmax(0, 1fr));
  377. border-radius: $border-radius;
  378. border: 1px solid $color-border;
  379. }
  380. .options-table-title {
  381. border-right: 1px solid $color-border;
  382. padding: 1rem;
  383. background: var(--bg-gray-light);
  384. ~.options-table-title {
  385. border-top: 1px solid $color-border;
  386. }
  387. h3 {
  388. margin: 0 !important;
  389. font-size: $font-size-h5;
  390. }
  391. p {
  392. color: $color-muted-light;
  393. font-size: $font-size-h6;
  394. }
  395. }
  396. .options-table-description {
  397. padding: 1rem;
  398. grid-column: span 3/span 3;
  399. ~.options-table-description {
  400. border-top: 1px solid $color-border;
  401. }
  402. }
  403. .codeblock {
  404. position: relative;
  405. left: 50%;
  406. max-width: 64rem;
  407. transform: translate(-50%);
  408. width: 100%;
  409. }
  410. .codeblock-copy {
  411. position: absolute;
  412. top: .5rem;
  413. right: .5rem;
  414. }