@guebbit/css-toolkit 1.3.2 → 1.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (144) hide show
  1. package/CHANGELOG.md +1 -0
  2. package/LICENSE +661 -661
  3. package/README.md +40 -6
  4. package/docs/.postcssrc.cjs +12 -12
  5. package/docs/.vitepress/cache/deps/_metadata.json +52 -0
  6. package/docs/.vitepress/cache/deps/chunk-GD2PZ323.js +9709 -0
  7. package/docs/.vitepress/cache/deps/chunk-GD2PZ323.js.map +7 -0
  8. package/docs/.vitepress/cache/deps/chunk-LW4I4DCF.js +12542 -0
  9. package/docs/.vitepress/cache/deps/chunk-LW4I4DCF.js.map +7 -0
  10. package/docs/.vitepress/cache/deps/package.json +3 -0
  11. package/docs/.vitepress/cache/deps/vitepress___@vue_devtools-api.js +4504 -0
  12. package/docs/.vitepress/cache/deps/vitepress___@vue_devtools-api.js.map +7 -0
  13. package/docs/.vitepress/cache/deps/vitepress___@vueuse_core.js +581 -0
  14. package/docs/.vitepress/cache/deps/vitepress___@vueuse_core.js.map +7 -0
  15. package/docs/.vitepress/cache/deps/vitepress___@vueuse_integrations_useFocusTrap.js +1145 -0
  16. package/docs/.vitepress/cache/deps/vitepress___@vueuse_integrations_useFocusTrap.js.map +7 -0
  17. package/docs/.vitepress/cache/deps/vitepress___mark__js_src_vanilla__js.js +1665 -0
  18. package/docs/.vitepress/cache/deps/vitepress___mark__js_src_vanilla__js.js.map +7 -0
  19. package/docs/.vitepress/cache/deps/vitepress___minisearch.js +1839 -0
  20. package/docs/.vitepress/cache/deps/vitepress___minisearch.js.map +7 -0
  21. package/docs/.vitepress/cache/deps/vue.js +343 -0
  22. package/docs/.vitepress/cache/deps/vue.js.map +7 -0
  23. package/docs/.vitepress/config.ts +97 -89
  24. package/docs/.vitepress/dist/404.html +3 -3
  25. package/docs/.vitepress/dist/assets/{app.CBPosL5d.js → app.jf3Qn9qL.js} +1 -1
  26. package/docs/.vitepress/dist/assets/chunks/@localSearchIndexroot.CbTBD5fF.js +1 -0
  27. package/docs/.vitepress/dist/assets/chunks/{VPLocalSearchBox.gSyUO2Y7.js → VPLocalSearchBox.B3CAY0xn.js} +1 -1
  28. package/docs/.vitepress/dist/assets/chunks/{theme.BeEqdqye.js → theme.rWQpqSL8.js} +2 -2
  29. package/docs/.vitepress/dist/assets/colors_bootstrap.md.AyoUVG26.js +188 -0
  30. package/docs/.vitepress/dist/assets/colors_bootstrap.md.AyoUVG26.lean.js +1 -0
  31. package/docs/.vitepress/dist/assets/colors_brands.md.D66byFIK.js +34 -0
  32. package/docs/.vitepress/dist/assets/colors_brands.md.D66byFIK.lean.js +1 -0
  33. package/docs/.vitepress/dist/assets/colors_customs.md.BOrXeoM5.js +53 -0
  34. package/docs/.vitepress/dist/assets/colors_customs.md.BOrXeoM5.lean.js +1 -0
  35. package/docs/.vitepress/dist/assets/functions_breakpoints.md.CELQkNwH.js +63 -0
  36. package/docs/.vitepress/dist/assets/functions_breakpoints.md.CELQkNwH.lean.js +1 -0
  37. package/docs/.vitepress/dist/assets/{functions_colors.md.BsOBqU9L.js → functions_colors.md.-D_m804_.js} +12 -4
  38. package/docs/.vitepress/dist/assets/functions_colors.md.-D_m804_.lean.js +1 -0
  39. package/docs/.vitepress/dist/assets/functions_helpers.md.ByBd49Zv.js +51 -0
  40. package/docs/.vitepress/dist/assets/functions_helpers.md.ByBd49Zv.lean.js +1 -0
  41. package/docs/.vitepress/dist/assets/functions_strings.md.BQe_bdya.js +38 -0
  42. package/docs/.vitepress/dist/assets/functions_strings.md.BQe_bdya.lean.js +1 -0
  43. package/docs/.vitepress/dist/assets/index.md.B50gUndk.js +10 -0
  44. package/docs/.vitepress/dist/assets/index.md.B50gUndk.lean.js +1 -0
  45. package/docs/.vitepress/dist/assets/mixins_build-aspect-ratio.md.ICFUpBeX.js +39 -0
  46. package/docs/.vitepress/dist/assets/mixins_build-aspect-ratio.md.ICFUpBeX.lean.js +1 -0
  47. package/docs/.vitepress/dist/assets/mixins_build-breakpoint.md.DKQMAk7p.js +100 -0
  48. package/docs/.vitepress/dist/assets/mixins_build-breakpoint.md.DKQMAk7p.lean.js +1 -0
  49. package/docs/.vitepress/dist/assets/mixins_build-compatibility.md.s8jk3C-J.js +85 -0
  50. package/docs/.vitepress/dist/assets/{mixins_build-compatibility.md.DvZg2OSO.lean.js → mixins_build-compatibility.md.s8jk3C-J.lean.js} +1 -1
  51. package/docs/.vitepress/dist/assets/{mixins_build-scrollbar.md.Bze7PgzU.js → mixins_build-scrollbar.md.hZriM4ET.js} +7 -2
  52. package/docs/.vitepress/dist/assets/mixins_create-colors.md.D6f2BMAy.js +204 -0
  53. package/docs/.vitepress/dist/assets/mixins_create-colors.md.D6f2BMAy.lean.js +1 -0
  54. package/docs/.vitepress/dist/assets/{mixins_create-helper-margin.md.DqwBKQ0G.js → mixins_create-helper-margin.md.CFz5if3z.js} +18 -18
  55. package/docs/.vitepress/dist/assets/mixins_create-helper-margin.md.CFz5if3z.lean.js +1 -0
  56. package/docs/.vitepress/dist/assets/mixins_create-helper-padding.md.Ct06sNMx.js +50 -0
  57. package/docs/.vitepress/dist/assets/mixins_create-helper-padding.md.Ct06sNMx.lean.js +1 -0
  58. package/docs/.vitepress/dist/assets/{mixins_create-instruction.md.BeAIoeQx.js → mixins_create-instruction.md.B0iVQyHl.js} +18 -4
  59. package/docs/.vitepress/dist/colors/bootstrap.html +194 -7
  60. package/docs/.vitepress/dist/colors/brands.html +40 -7
  61. package/docs/.vitepress/dist/colors/customs.html +59 -7
  62. package/docs/.vitepress/dist/functions/breakpoints.html +87 -0
  63. package/docs/.vitepress/dist/functions/colors.html +16 -8
  64. package/docs/.vitepress/dist/functions/helpers.html +57 -7
  65. package/docs/.vitepress/dist/functions/strings.html +44 -7
  66. package/docs/.vitepress/dist/hashmap.json +1 -1
  67. package/docs/.vitepress/dist/index.html +15 -6
  68. package/docs/.vitepress/dist/mixins/build-aspect-ratio.html +45 -7
  69. package/docs/.vitepress/dist/mixins/build-breakpoint.html +124 -0
  70. package/docs/.vitepress/dist/mixins/build-compatibility.html +59 -15
  71. package/docs/.vitepress/dist/mixins/build-scrollbar.html +13 -8
  72. package/docs/.vitepress/dist/mixins/create-colors.html +210 -7
  73. package/docs/.vitepress/dist/mixins/create-helper-margin.html +23 -23
  74. package/docs/.vitepress/dist/mixins/create-helper-padding.html +39 -34
  75. package/docs/.vitepress/dist/mixins/create-instruction.html +24 -10
  76. package/docs/.vitepress/theme/index.js +12 -12
  77. package/docs/colors/bootstrap.md +29 -1
  78. package/docs/colors/brands.md +8 -1
  79. package/docs/colors/customs.md +8 -1
  80. package/docs/functions/breakpoints.md +25 -0
  81. package/docs/functions/colors.md +71 -66
  82. package/docs/functions/helpers.md +15 -1
  83. package/docs/functions/strings.md +13 -1
  84. package/docs/index.md +1 -1
  85. package/docs/logo.svg +55 -55
  86. package/docs/logotype.svg +149 -149
  87. package/docs/mixins/build-aspect-ratio.md +16 -1
  88. package/docs/mixins/build-breakpoint.md +24 -0
  89. package/docs/mixins/build-compatibility.md +24 -23
  90. package/docs/mixins/build-scrollbar.md +21 -19
  91. package/docs/mixins/create-colors.md +16 -1
  92. package/docs/mixins/create-helper-margin.md +21 -25
  93. package/docs/mixins/create-helper-padding.md +21 -24
  94. package/docs/mixins/create-instruction.md +38 -33
  95. package/index.scss +1 -1
  96. package/package.json +72 -61
  97. package/src/colors/_bootstrap.scss +179 -180
  98. package/src/colors/_brands.scss +34 -20
  99. package/src/colors/_customs.scss +53 -53
  100. package/src/colors/_index.scss +212 -200
  101. package/src/functions/_breakpoints.scss +52 -0
  102. package/src/functions/_colors.scss +143 -135
  103. package/src/functions/_helpers.scss +51 -44
  104. package/src/functions/_strings.scss +38 -31
  105. package/src/index.scss +16 -14
  106. package/src/mixins/_build-aspect-ratio.scss +37 -37
  107. package/src/mixins/_build-breakpoint.scss +90 -0
  108. package/src/mixins/_build-compatibility.scss +83 -39
  109. package/src/mixins/_build-scrollbar.scss +37 -32
  110. package/src/mixins/_create-class.scss +29 -19
  111. package/src/mixins/_create-colors-vars.scss +31 -27
  112. package/src/mixins/_create-colors.scss +202 -155
  113. package/src/mixins/_create-helper-margin.scss +43 -39
  114. package/src/mixins/_create-helper-padding.scss +47 -40
  115. package/test/compile.test.js +211 -132
  116. package/test/lint.test.js +43 -48
  117. package/test/test.css +32 -0
  118. package/test/test.scss +239 -197
  119. package/vite.config.ts +26 -26
  120. package/CHANGELOG +0 -0
  121. package/docs/.vitepress/dist/assets/chunks/@localSearchIndexroot.C6BRpH9I.js +0 -1
  122. package/docs/.vitepress/dist/assets/colors_bootstrap.md.CFg-dNGF.js +0 -1
  123. package/docs/.vitepress/dist/assets/colors_bootstrap.md.CFg-dNGF.lean.js +0 -1
  124. package/docs/.vitepress/dist/assets/colors_brands.md.CUxoS0ml.js +0 -1
  125. package/docs/.vitepress/dist/assets/colors_brands.md.CUxoS0ml.lean.js +0 -1
  126. package/docs/.vitepress/dist/assets/colors_customs.md.CnHhl84q.js +0 -1
  127. package/docs/.vitepress/dist/assets/colors_customs.md.CnHhl84q.lean.js +0 -1
  128. package/docs/.vitepress/dist/assets/functions_colors.md.BsOBqU9L.lean.js +0 -1
  129. package/docs/.vitepress/dist/assets/functions_helpers.md.B3A_IOEL.js +0 -1
  130. package/docs/.vitepress/dist/assets/functions_helpers.md.B3A_IOEL.lean.js +0 -1
  131. package/docs/.vitepress/dist/assets/functions_strings.md.BdV8Kx9J.js +0 -1
  132. package/docs/.vitepress/dist/assets/functions_strings.md.BdV8Kx9J.lean.js +0 -1
  133. package/docs/.vitepress/dist/assets/index.md.Cn1TneoC.js +0 -1
  134. package/docs/.vitepress/dist/assets/index.md.Cn1TneoC.lean.js +0 -1
  135. package/docs/.vitepress/dist/assets/mixins_build-aspect-ratio.md.cD70Q1mW.js +0 -1
  136. package/docs/.vitepress/dist/assets/mixins_build-aspect-ratio.md.cD70Q1mW.lean.js +0 -1
  137. package/docs/.vitepress/dist/assets/mixins_build-compatibility.md.DvZg2OSO.js +0 -41
  138. package/docs/.vitepress/dist/assets/mixins_create-colors.md.Bi4iqAHf.js +0 -1
  139. package/docs/.vitepress/dist/assets/mixins_create-colors.md.Bi4iqAHf.lean.js +0 -1
  140. package/docs/.vitepress/dist/assets/mixins_create-helper-margin.md.DqwBKQ0G.lean.js +0 -1
  141. package/docs/.vitepress/dist/assets/mixins_create-helper-padding.md.Br9TOGl1.js +0 -45
  142. package/docs/.vitepress/dist/assets/mixins_create-helper-padding.md.Br9TOGl1.lean.js +0 -1
  143. /package/docs/.vitepress/dist/assets/{mixins_build-scrollbar.md.Bze7PgzU.lean.js → mixins_build-scrollbar.md.hZriM4ET.lean.js} +0 -0
  144. /package/docs/.vitepress/dist/assets/{mixins_create-instruction.md.BeAIoeQx.lean.js → mixins_create-instruction.md.B0iVQyHl.lean.js} +0 -0
package/docs/.vitepress/dist/assets/mixins_build-aspect-ratio.md.ICFUpBeX.js ADDED
@@ -0,0 +1,39 @@
1
+ import{_ as i,c as a,o as n,ag as t}from"./chunks/framework.BZemHgQ6.js";const c=JSON.parse('{"title":"Build Aspect Ratio","description":"","frontmatter":{},"headers":[],"relativePath":"mixins/build-aspect-ratio.md","filePath":"mixins/build-aspect-ratio.md"}'),h={name:"mixins/build-aspect-ratio.md"};function l(p,s,k,e,r,E){return n(),a("div",null,s[0]||(s[0]=[t(`<h1 id="build-aspect-ratio" tabindex="-1">Build Aspect Ratio <a class="header-anchor" href="#build-aspect-ratio" aria-label="Permalink to &quot;Build Aspect Ratio&quot;">​</a></h1><p>Helpers to build responsive aspect-ratio containers and anchors.</p><h2 id="example" tabindex="-1">Example <a class="header-anchor" href="#example" aria-label="Permalink to &quot;Example&quot;">​</a></h2><div class="language-scss vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.card-media</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
2
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @include</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> build-aspect-ratio</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">56.25</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
3
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h2 id="source" tabindex="-1">Source <a class="header-anchor" href="#source" aria-label="Permalink to &quot;Source&quot;">​</a></h2><div class="language-scss vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@use</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;../functions/strings&quot;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> as</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> guebbit</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
4
+ <span class="line"></span>
5
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/**</span></span>
6
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> * Use in the parent\\container, to be coupled with {build-aspect-ratio-anchor}</span></span>
7
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> */</span></span>
8
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@mixin</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> build-aspect-ratio-container</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$ratio</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
9
+ <span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">relative</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
10
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // aspect-ratio: #{$height} / #{$width};</span></span>
11
+ <span class="line"></span>
12
+ <span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;"> &amp;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">::before</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
13
+ <span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;"> content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
14
+ <span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> display</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">block</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
15
+ <span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> padding-top</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">#{$ratio}</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
16
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
17
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
18
+ <span class="line"></span>
19
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/**</span></span>
20
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> * Use in the child that &quot;gives&quot; form to the parent that has the respective {build-aspect-ratio-container}</span></span>
21
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> */</span></span>
22
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@mixin</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> build-aspect-ratio-anchor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
23
+ <span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">absolute</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
24
+ <span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> top</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
25
+ <span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> left</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
26
+ <span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
27
+ <span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
28
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
29
+ <span class="line"></span>
30
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/**</span></span>
31
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> * aspect ratio shortcut</span></span>
32
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> */</span></span>
33
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@mixin</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> build-aspect-ratio</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$ratio</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
34
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @include</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> build-aspect-ratio-container</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$ratio</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
35
+ <span class="line"></span>
36
+ <span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;"> &amp;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &gt; </span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">*</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
37
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @include</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> build-aspect-ratio-anchor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
38
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
39
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div>`,6)]))}const g=i(h,[["render",l]]);export{c as __pageData,g as default};
package/docs/.vitepress/dist/assets/mixins_build-aspect-ratio.md.ICFUpBeX.lean.js ADDED
@@ -0,0 +1 @@
1
+ import{_ as i,c as a,o as n,ag as t}from"./chunks/framework.BZemHgQ6.js";const c=JSON.parse('{"title":"Build Aspect Ratio","description":"","frontmatter":{},"headers":[],"relativePath":"mixins/build-aspect-ratio.md","filePath":"mixins/build-aspect-ratio.md"}'),h={name:"mixins/build-aspect-ratio.md"};function l(p,s,k,e,r,E){return n(),a("div",null,s[0]||(s[0]=[t("",6)]))}const g=i(h,[["render",l]]);export{c as __pageData,g as default};
package/docs/.vitepress/dist/assets/mixins_build-breakpoint.md.DKQMAk7p.js ADDED
@@ -0,0 +1,100 @@
1
+ import{_ as i,c as a,o as n,ag as k}from"./chunks/framework.BZemHgQ6.js";const g=JSON.parse('{"title":"Build Breakpoint","description":"","frontmatter":{},"headers":[],"relativePath":"mixins/build-breakpoint.md","filePath":"mixins/build-breakpoint.md"}'),h={name:"mixins/build-breakpoint.md"};function p(l,s,t,e,E,r){return n(),a("div",null,s[0]||(s[0]=[k(`<h1 id="build-breakpoint" tabindex="-1">Build Breakpoint <a class="header-anchor" href="#build-breakpoint" aria-label="Permalink to &quot;Build Breakpoint&quot;">​</a></h1><p>Dynamic media query helpers for up/down/between responsive ranges.</p><h2 id="example" tabindex="-1">Example <a class="header-anchor" href="#example" aria-label="Permalink to &quot;Example&quot;">​</a></h2><div class="language-scss vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@use</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@guebbit/css-toolkit&quot;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> as</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> guebbit</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
2
+ <span class="line"></span>
3
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
4
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @include</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> guebbit</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">build-breakpoint-up</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;md&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
5
+ <span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> display</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">grid</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
6
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
7
+ <span class="line"></span>
8
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @include</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> guebbit</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">build-breakpoint</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;between&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;sm&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;lg&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
9
+ <span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> gap</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">24</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
10
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
11
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h2 id="code" tabindex="-1">Code <a class="header-anchor" href="#code" aria-label="Permalink to &quot;Code&quot;">​</a></h2><div class="language-scss vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@use</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;../functions/breakpoints&quot;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> as</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> breakpoint</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
12
+ <span class="line"></span>
13
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/**</span></span>
14
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> * Apply content for min width from named breakpoint.</span></span>
15
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> */</span></span>
16
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@mixin</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> build-breakpoint-up</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
17
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
18
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $breakpoints</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">breakpoint</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$breakpoints-default</span></span>
19
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
20
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $min</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">breakpoint</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">breakpoint-min</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$breakpoints</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
21
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @if</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> not</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $min</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
22
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
23
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@else </span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
24
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @media</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">min-width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$min</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
25
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
26
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
27
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
28
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
29
+ <span class="line"></span>
30
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/**</span></span>
31
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> * Apply content for max width from named breakpoint.</span></span>
32
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> */</span></span>
33
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@mixin</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> build-breakpoint-down</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
34
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
35
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $breakpoints</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">breakpoint</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$breakpoints-default</span></span>
36
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
37
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $max</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">breakpoint</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">breakpoint-max</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$breakpoints</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
38
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @if</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> not</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $max</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
39
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
40
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@else </span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
41
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @media</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">max-width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$max</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
42
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
43
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
44
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
45
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
46
+ <span class="line"></span>
47
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/**</span></span>
48
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> * Apply content between two named breakpoints.</span></span>
49
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> */</span></span>
50
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@mixin</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> build-breakpoint-between</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
51
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $lower</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
52
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $upper</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
53
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $breakpoints</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">breakpoint</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$breakpoints-default</span></span>
54
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
55
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $min</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">breakpoint</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">breakpoint-min</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$lower</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$breakpoints</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
56
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $max</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">breakpoint</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">breakpoint-max</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$upper</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$breakpoints</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
57
+ <span class="line"></span>
58
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @if</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $min</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> !=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> null </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">and</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $max</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> !=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> null {</span></span>
59
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @media</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">min-width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$min</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">and</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">max-width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$max</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
60
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
61
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
62
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@else if</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $min</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> !=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> null {</span></span>
63
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @include</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> build-breakpoint-up</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$lower</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$breakpoints</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
64
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
65
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
66
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@else if</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $max</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> !=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> null {</span></span>
67
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @include</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> build-breakpoint-down</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$upper</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$breakpoints</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
68
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
69
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
70
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@else </span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
71
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
72
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
73
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
74
+ <span class="line"></span>
75
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/**</span></span>
76
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> * Generic dynamic breakpoint helper by mode.</span></span>
77
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> * modes: up | down | between</span></span>
78
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> */</span></span>
79
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@mixin</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> build-breakpoint</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
80
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $mode</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
81
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $from</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
82
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $to</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: null,</span></span>
83
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $breakpoints</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">breakpoint</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$breakpoints-default</span></span>
84
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
85
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @if</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $mode</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ==</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;up&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
86
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @include</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> build-breakpoint-up</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$from</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$breakpoints</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
87
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
88
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
89
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@else if</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $mode</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ==</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;down&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
90
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @include</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> build-breakpoint-down</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$from</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$breakpoints</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
91
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
92
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
93
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@else if</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $mode</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ==</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;between&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
94
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @include</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> build-breakpoint-between</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$from</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$to</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$breakpoints</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
95
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
96
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
97
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@else </span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
98
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
99
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
100
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div>`,6)]))}const y=i(h,[["render",p]]);export{g as __pageData,y as default};
package/docs/.vitepress/dist/assets/mixins_build-breakpoint.md.DKQMAk7p.lean.js ADDED
@@ -0,0 +1 @@
1
+ import{_ as i,c as a,o as n,ag as k}from"./chunks/framework.BZemHgQ6.js";const g=JSON.parse('{"title":"Build Breakpoint","description":"","frontmatter":{},"headers":[],"relativePath":"mixins/build-breakpoint.md","filePath":"mixins/build-breakpoint.md"}'),h={name:"mixins/build-breakpoint.md"};function p(l,s,t,e,E,r){return n(),a("div",null,s[0]||(s[0]=[k("",6)]))}const y=i(h,[["render",p]]);export{g as __pageData,y as default};
package/docs/.vitepress/dist/assets/mixins_build-compatibility.md.s8jk3C-J.js ADDED
@@ -0,0 +1,85 @@
1
+ import{_ as i,c as a,o as n,ag as t}from"./chunks/framework.BZemHgQ6.js";const g=JSON.parse('{"title":"Build Compatibility","description":"","frontmatter":{},"headers":[],"relativePath":"mixins/build-compatibility.md","filePath":"mixins/build-compatibility.md"}'),l={name:"mixins/build-compatibility.md"};function h(k,s,p,e,E,r){return n(),a("div",null,s[0]||(s[0]=[t(`<h1 id="build-compatibility" tabindex="-1">Build Compatibility <a class="header-anchor" href="#build-compatibility" aria-label="Permalink to &quot;Build Compatibility&quot;">​</a></h1><h2 id="example" tabindex="-1">Example <a class="header-anchor" href="#example" aria-label="Permalink to &quot;Example&quot;">​</a></h2><p>Compatibility mode for browsers Firefox, Internet Explorer, Microsoft Edge, Opera, Safari, Chrome, grouped targets (<code>modern</code>, <code>webkit</code>, <code>legacy</code>) and aliases (<code>msie</code>, <code>internet-explorer</code>, <code>ms-edge</code>, <code>ff</code>)</p><div class="language-scss vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@include</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> guebbit-compatibility</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ie&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
2
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ...</span></span>
3
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h1 id="code" tabindex="-1">Code <a class="header-anchor" href="#code" aria-label="Permalink to &quot;Code&quot;">​</a></h1><div class="language-scss vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/**</span></span>
4
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">* Compatibility mode for browsers</span></span>
5
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">* @param string $browser: target browser</span></span>
6
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">* @content</span></span>
7
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">**/</span></span>
8
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@mixin</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> build-compatibility</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$browser</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
9
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // normalize aliases</span></span>
10
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $target</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$browser</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
11
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @if</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $browser</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ==</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;internet-explorer&quot;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> or</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $browser</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ==</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;msie&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
12
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $target</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ie&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
13
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
14
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @if</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $browser</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ==</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;ms-edge&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
15
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $target</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;edge&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
16
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
17
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @if</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $browser</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ==</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;ff&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
18
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $target</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;firefox&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
19
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
20
+ <span class="line"></span>
21
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // MODERN BROWSER GROUP (supports feature queries)</span></span>
22
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @if</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $target</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ==</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;modern&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
23
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @supports</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">display</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">grid</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">and</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">selector</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">is</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">*</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">))) {</span></span>
24
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
25
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
26
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
27
+ <span class="line"></span>
28
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // WEBKIT GROUP</span></span>
29
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @if</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $target</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ==</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;webkit&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
30
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @supports</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">-webkit-touch-callout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">none</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
31
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
32
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
33
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
34
+ <span class="line"></span>
35
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // LEGACY GROUP</span></span>
36
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @if</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $target</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ==</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;legacy&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
37
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @media</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> all</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> and</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">-ms-high-contrast</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">none</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">), (</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">-ms-high-contrast</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">active</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
38
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
39
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
40
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @supports</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">-ms-ime-align</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">auto</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
41
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
42
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
43
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
44
+ <span class="line"></span>
45
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // INTERNET EXPLORER</span></span>
46
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @if</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $target</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ==</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;ie&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
47
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @media</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> all</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> and</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">-ms-high-contrast</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">none</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">), (</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">-ms-high-contrast</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">active</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
48
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
49
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
50
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
51
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // MICROSOFT EDGE</span></span>
52
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @if</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $target</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ==</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;edge&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
53
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @supports</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">-ms-ime-align</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">auto</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
54
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
55
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
56
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
57
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // FIREFOX</span></span>
58
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @if</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $target</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ==</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;firefox&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
59
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @supports</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">-moz-appearance</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">none</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
60
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
61
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
62
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
63
+ <span class="line"></span>
64
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // OPERA</span></span>
65
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @if</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $target</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ==</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;opera&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
66
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @supports</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">-o-object-fit</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">fill</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
67
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
68
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
69
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
70
+ <span class="line"></span>
71
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // SAFARI</span></span>
72
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @if</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $target</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ==</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;safari&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
73
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @supports</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">-webkit-named-image</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">and</span></span>
74
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">not</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">-webkit-touch-callout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">none</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)) {</span></span>
75
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
76
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
77
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
78
+ <span class="line"></span>
79
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // CHROME (best-effort via webkit + not safari condition)</span></span>
80
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @if</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $target</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ==</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;chrome&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
81
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @supports</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">-webkit-appearance</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">none</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">and</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">font</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">-apple-system-body</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
82
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
83
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
84
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
85
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h2 id="scss-variables" tabindex="-1">SCSS variables <a class="header-anchor" href="#scss-variables" aria-label="Permalink to &quot;SCSS variables&quot;">​</a></h2><table tabindex="0"><thead><tr><th style="text-align:left;">Variable</th><th style="text-align:left;">Description</th><th style="text-align:left;">Accepted Values</th><th style="text-align:left;">Default</th></tr></thead><tbody><tr><td style="text-align:left;"><code>@content</code></td><td style="text-align:left;">CSS Style to apply</td><td style="text-align:left;"><code>content</code></td><td style="text-align:left;">\`\`</td></tr><tr><td style="text-align:left;"><code>$browser</code></td><td style="text-align:left;">browser name</td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;"><code>none</code></td></tr></tbody></table>`,8)]))}const y=i(l,[["render",h]]);export{g as __pageData,y as default};
package/docs/.vitepress/dist/assets/{mixins_build-compatibility.md.DvZg2OSO.lean.js → mixins_build-compatibility.md.s8jk3C-J.lean.js} RENAMED
@@ -1 +1 @@
1
- import{_ as i,c as a,o as n,ag as t}from"./chunks/framework.BZemHgQ6.js";const g=JSON.parse('{"title":"Build Compatibility","description":"","frontmatter":{},"headers":[],"relativePath":"mixins/build-compatibility.md","filePath":"mixins/build-compatibility.md"}'),l={name:"mixins/build-compatibility.md"};function h(p,s,e,k,E,r){return n(),a("div",null,s[0]||(s[0]=[t("",8)]))}const y=i(l,[["render",h]]);export{g as __pageData,y as default};
1
+ import{_ as i,c as a,o as n,ag as t}from"./chunks/framework.BZemHgQ6.js";const g=JSON.parse('{"title":"Build Compatibility","description":"","frontmatter":{},"headers":[],"relativePath":"mixins/build-compatibility.md","filePath":"mixins/build-compatibility.md"}'),l={name:"mixins/build-compatibility.md"};function h(k,s,p,e,E,r){return n(),a("div",null,s[0]||(s[0]=[t("",8)]))}const y=i(l,[["render",h]]);export{g as __pageData,y as default};
package/docs/.vitepress/dist/assets/{mixins_build-scrollbar.md.Bze7PgzU.js → mixins_build-scrollbar.md.hZriM4ET.js} RENAMED
@@ -1,10 +1,15 @@
1
- import{_ as i,c as a,o as l,ag as t}from"./chunks/framework.BZemHgQ6.js";const g=JSON.parse('{"title":"Scrollbar","description":"","frontmatter":{},"headers":[],"relativePath":"mixins/build-scrollbar.md","filePath":"mixins/build-scrollbar.md"}'),n={name:"mixins/build-scrollbar.md"};function h(e,s,k,p,r,d){return l(),a("div",null,s[0]||(s[0]=[t(`<h1 id="scrollbar" tabindex="-1">Scrollbar <a class="header-anchor" href="#scrollbar" aria-label="Permalink to &quot;Scrollbar&quot;">​</a></h1><h2 id="example" tabindex="-1">Example <a class="header-anchor" href="#example" aria-label="Permalink to &quot;Example&quot;">​</a></h2><p>Scrollbars of element</p><div class="language-scss vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> @include</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> build-scrollbar</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">4</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#fff</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#000</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><h2 id="code" tabindex="-1">Code <a class="header-anchor" href="#code" aria-label="Permalink to &quot;Code&quot;">​</a></h2><div class="language-scss vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/**</span></span>
1
+ import{_ as i,c as a,o as l,ag as t}from"./chunks/framework.BZemHgQ6.js";const g=JSON.parse('{"title":"Scrollbar","description":"","frontmatter":{},"headers":[],"relativePath":"mixins/build-scrollbar.md","filePath":"mixins/build-scrollbar.md"}'),n={name:"mixins/build-scrollbar.md"};function h(e,s,k,p,r,d){return l(),a("div",null,s[0]||(s[0]=[t(`<h1 id="scrollbar" tabindex="-1">Scrollbar <a class="header-anchor" href="#scrollbar" aria-label="Permalink to &quot;Scrollbar&quot;">​</a></h1><h2 id="example" tabindex="-1">Example <a class="header-anchor" href="#example" aria-label="Permalink to &quot;Example&quot;">​</a></h2><p>Scrollbars of element</p><div class="language-scss vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@include</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> build-scrollbar</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">4</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#fff</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#000</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><h2 id="code" tabindex="-1">Code <a class="header-anchor" href="#code" aria-label="Permalink to &quot;Code&quot;">​</a></h2><div class="language-scss vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/**</span></span>
2
2
  <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> * Builder - scrollbars of element</span></span>
3
3
  <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> * @param string $color</span></span>
4
4
  <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> * @param pixels $size</span></span>
5
5
  <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> * @param $background: if false, has default lighten 40%</span></span>
6
6
  <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> */</span></span>
7
- <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@mixin</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> build-scrollbar</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;4px&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;#fff&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$bg</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;auto&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$radius</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;10px&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
7
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@mixin</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> build-scrollbar</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
8
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;4px&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
9
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;#fff&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
10
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $bg</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;auto&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
11
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $radius</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;10px&quot;</span></span>
12
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
8
13
  <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $fallback-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#fff</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
9
14
  <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $fallback-bg</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">transparent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
10
15
  <span class="line"></span>