_variables.scss 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327
  1. @use 'sass:math';
  2. @use 'sass:map';
  3. @use 'sass:meta';
  4. @use '../tools/functions' as *;
  5. $color-pack: true !default;
  6. $reset: true !default;
  7. $body-font-family: 'Roboto', sans-serif !default;
  8. $font-size-root: 1rem !default;
  9. $line-height-root: 1.5 !default;
  10. $border-color-root: rgba(var(--v-border-color), var(--v-border-opacity)) !default;
  11. $border-radius-root: 4px !default;
  12. $border-style-root: solid !default;
  13. $borders: () !default;
  14. $borders: map-deep-merge(
  15. (
  16. 0: 0,
  17. null: thin,
  18. sm: 1px,
  19. md: 2px,
  20. lg: 4px,
  21. xl: 8px
  22. ),
  23. $borders
  24. );
  25. @each $key, $border in $borders {
  26. $borders: map-deep-merge(
  27. $borders,
  28. ( $key: $border $border-style-root $border-color-root )
  29. )
  30. }
  31. $border-opacities: () !default;
  32. $border-opacities: map-deep-merge(
  33. (
  34. 0: 0,
  35. null: .12,
  36. 25: .25,
  37. 50: .50,
  38. 75: .75,
  39. 100: 1
  40. ),
  41. $border-opacities
  42. );
  43. $states: () !default;
  44. $states: map-deep-merge(
  45. (
  46. 'hover': var(--v-hover-opacity),
  47. 'focus': var(--v-focus-opacity),
  48. 'selected': var(--v-selected-opacity),
  49. 'activated': var(--v-activated-opacity),
  50. 'pressed': var(--v-pressed-opacity),
  51. 'dragged': var(--v-dragged-opacity)
  52. ),
  53. $states
  54. );
  55. $rounded: () !default;
  56. $rounded: map-deep-merge(
  57. (
  58. 0: 0,
  59. 'sm': $border-radius-root * .5,
  60. null: $border-radius-root,
  61. 'lg': $border-radius-root * 2,
  62. 'xl': $border-radius-root * 6,
  63. 'pill': 9999px,
  64. 'circle': 50%,
  65. 'shaped': $border-radius-root * 6 0
  66. ),
  67. $rounded
  68. );
  69. $spacer: 4px !default;
  70. $spacers-steps: 16 !default;
  71. $spacers: () !default;
  72. @if (meta.type-of($spacers) == list) {
  73. @for $i from 0 through $spacers-steps {
  74. $spacers: map.merge($spacers, ($i: $spacer * $i))
  75. }
  76. }
  77. $negative-spacers: () !default;
  78. @if (meta.type-of($negative-spacers) == list) {
  79. @for $i from 1 through $spacers-steps {
  80. $negative-spacers: map.merge($negative-spacers, ("n" + $i: -$spacer * $i))
  81. }
  82. }
  83. $grid-breakpoints: () !default;
  84. $grid-breakpoints: map-deep-merge(
  85. (
  86. 'xs': 0,
  87. 'sm': 600px,
  88. 'md': 960px,
  89. 'lg': 1280px,
  90. 'xl': 1920px,
  91. 'xxl': 2560px,
  92. ),
  93. $grid-breakpoints
  94. );
  95. $grid-gutter: $spacer * 6 !default;
  96. $form-grid-gutter: $spacer * 2 !default;
  97. $grid-columns: 12 !default;
  98. $container-padding-x: $spacer * 4 !default;
  99. $grid-gutters: () !default;
  100. $grid-gutters: map-deep-merge(
  101. (
  102. 'xs': math.div($grid-gutter, 12),
  103. 'sm': math.div($grid-gutter, 6),
  104. 'md': math.div($grid-gutter, 3),
  105. 'lg': math.div($grid-gutter * 2, 3),
  106. 'xl': $grid-gutter,
  107. ),
  108. $grid-gutters
  109. );
  110. $container-max-widths: () !default;
  111. $container-max-widths: map-deep-merge(
  112. (
  113. 'xs': null,
  114. 'sm': null,
  115. 'md': map.get($grid-breakpoints, 'md') * 0.9375,
  116. 'lg': map.get($grid-breakpoints, 'lg') * 0.9375,
  117. 'xl': map.get($grid-breakpoints, 'xl') * 0.9375,
  118. 'xxl': map.get($grid-breakpoints, 'xxl') * 0.9375,
  119. ),
  120. $container-max-widths
  121. );
  122. // Avoid using *-and-down where possible
  123. $display-breakpoints: () !default;
  124. $display-breakpoints: map-deep-merge(
  125. (
  126. 'print-only': 'only print',
  127. 'screen-only': 'only screen',
  128. 'xs': '(max-width: #{map.get($grid-breakpoints, 'sm') - 0.02})',
  129. 'sm': '(min-width: #{map.get($grid-breakpoints, 'sm')}) and (max-width: #{map.get($grid-breakpoints, 'md') - 0.02})',
  130. 'md': '(min-width: #{map.get($grid-breakpoints, 'md')}) and (max-width: #{map.get($grid-breakpoints, 'lg') - 0.02})',
  131. 'lg': '(min-width: #{map.get($grid-breakpoints, 'lg')}) and (max-width: #{map.get($grid-breakpoints, 'xl') - 0.02})',
  132. 'xl': '(min-width: #{map.get($grid-breakpoints, 'xl')}) and (max-width: #{map.get($grid-breakpoints, 'xxl') - 0.02})',
  133. 'xxl': '(min-width: #{map.get($grid-breakpoints, 'xxl')})',
  134. 'sm-and-up': '(min-width: #{map.get($grid-breakpoints, 'sm')})',
  135. 'md-and-up': '(min-width: #{map.get($grid-breakpoints, 'md')})',
  136. 'lg-and-up': '(min-width: #{map.get($grid-breakpoints, 'lg')})',
  137. 'xl-and-up': '(min-width: #{map.get($grid-breakpoints, 'xl')})',
  138. 'sm-and-down': '(max-width: #{map.get($grid-breakpoints, 'md') - 0.02})',
  139. 'md-and-down': '(max-width: #{map.get($grid-breakpoints, 'lg') - 0.02})',
  140. 'lg-and-down': '(max-width: #{map.get($grid-breakpoints, 'xl') - 0.02})',
  141. 'xl-and-down': '(max-width: #{map.get($grid-breakpoints, 'xxl') - 0.02})',
  142. ),
  143. $display-breakpoints
  144. );
  145. $font-weights: () !default;
  146. $font-weights: map-deep-merge(
  147. (
  148. 'thin': 100,
  149. 'light': 300,
  150. 'regular': 400,
  151. 'medium': 500,
  152. 'bold': 700,
  153. 'black': 900
  154. ),
  155. $font-weights
  156. );
  157. $heading-font-family: $body-font-family !default;
  158. $typography: () !default;
  159. $typography: map-deep-merge(
  160. (
  161. 'h1': (
  162. 'size': 6rem,
  163. 'weight': 300,
  164. 'line-height': 6rem,
  165. 'letter-spacing': -.015625em,
  166. 'font-family': $heading-font-family,
  167. 'text-transform': none
  168. ),
  169. 'h2': (
  170. 'size': 3.75rem,
  171. 'weight': 300,
  172. 'line-height': 3.75rem,
  173. 'letter-spacing': -.0083333333em,
  174. 'font-family': $heading-font-family,
  175. 'text-transform': none
  176. ),
  177. 'h3': (
  178. 'size': 3rem,
  179. 'weight': 400,
  180. 'line-height': 3.125rem,
  181. 'letter-spacing': normal,
  182. 'font-family': $heading-font-family,
  183. 'text-transform': none
  184. ),
  185. 'h4': (
  186. 'size': 2.125rem,
  187. 'weight': 400,
  188. 'line-height': 2.5rem,
  189. 'letter-spacing': .0073529412em,
  190. 'font-family': $heading-font-family,
  191. 'text-transform': none
  192. ),
  193. 'h5': (
  194. 'size': 1.5rem,
  195. 'weight': 400,
  196. 'line-height': 2rem,
  197. 'letter-spacing': normal,
  198. 'font-family': $heading-font-family,
  199. 'text-transform': none
  200. ),
  201. 'h6': (
  202. 'size': 1.25rem,
  203. 'weight': 500,
  204. 'line-height': 2rem,
  205. 'letter-spacing': .0125em,
  206. 'font-family': $heading-font-family,
  207. 'text-transform': none
  208. ),
  209. 'subtitle-1': (
  210. 'size': 1rem,
  211. 'weight': normal,
  212. 'line-height': 1.75rem,
  213. 'letter-spacing': .009375em,
  214. 'font-family': $body-font-family,
  215. 'text-transform': none
  216. ),
  217. 'subtitle-2': (
  218. 'size': .875rem,
  219. 'weight': 500,
  220. 'line-height': 1.375rem,
  221. 'letter-spacing': .0071428571em,
  222. 'font-family': $body-font-family,
  223. 'text-transform': none
  224. ),
  225. 'body-1': (
  226. 'size': 1rem,
  227. 'weight': 400,
  228. 'line-height': 1.5rem,
  229. 'letter-spacing': .03125em,
  230. 'font-family': $body-font-family,
  231. 'text-transform': none
  232. ),
  233. 'body-2': (
  234. 'size': .875rem,
  235. 'weight': 400,
  236. 'line-height': 1.25rem,
  237. 'letter-spacing': .0178571429em,
  238. 'font-family': $body-font-family,
  239. 'text-transform': none
  240. ),
  241. 'button': (
  242. 'size': .875rem,
  243. 'weight': 500,
  244. 'line-height': 2.25rem,
  245. 'letter-spacing': .0892857143em,
  246. 'font-family': $body-font-family,
  247. 'text-transform': uppercase
  248. ),
  249. 'caption': (
  250. 'size': .75rem,
  251. 'weight': 400,
  252. 'line-height': 1.25rem,
  253. 'letter-spacing': .0333333333em,
  254. 'font-family': $body-font-family,
  255. 'text-transform': none
  256. ),
  257. 'overline': (
  258. 'size': .75rem,
  259. 'weight': 500,
  260. 'line-height': 2rem,
  261. 'letter-spacing': .1666666667em,
  262. 'font-family': $body-font-family,
  263. 'text-transform': uppercase
  264. )
  265. ),
  266. $typography
  267. );
  268. $flat-typography: () !default;
  269. @each $type, $values in $typography {
  270. $flat-typography: map-deep-merge(
  271. $flat-typography,
  272. (#{$type}: map.values($values))
  273. );
  274. }
  275. // Mapping from transition to easings:
  276. // fast-out-slow-in -> standard
  277. // linear-out-slow-in -> decelerated
  278. // fast-out-linear-in -> accelerated
  279. // ease-in-out -> standard or accelerated depending on usage
  280. // fast-in-fast-out -> accelerated
  281. // swing -> standard
  282. $standard-easing: cubic-bezier(0.4, 0, 0.2, 1) !default;
  283. $decelerated-easing: cubic-bezier(0.0, 0, 0.2, 1) !default; // Entering
  284. $accelerated-easing: cubic-bezier(0.4, 0, 1, 1) !default; // Leaving
  285. // Elements
  286. $bootable-transition: 0.2s $decelerated-easing !default;
  287. $blockquote-font-size: 18px !default;
  288. $blockquote-font-weight: 300 !default;
  289. $sizes: (
  290. 'x-small',
  291. 'small',
  292. 'default',
  293. 'large',
  294. 'x-large'
  295. ) !default;
  296. $size-scale: $spacer * 2 !default;
  297. $size-scales: (
  298. 'x-small': -2,
  299. 'small': -1,
  300. 'default': 0,
  301. 'large': 1,
  302. 'x-large': 2
  303. ) !default;