var.scss 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  1. @use 'sass:map';
  2. @use 'sass:math';
  3. @use 'sass:color';
  4. @use '../mixins/var' as *;
  5. $types: primary, success, warning, error, info;
  6. // Color
  7. $colors: () !default;
  8. $colors: map.deep-merge(
  9. (
  10. 'white': $uni-white,
  11. 'black': $uni-black,
  12. 'primary': (
  13. base: $uni-primary,
  14. ),
  15. 'success': (
  16. base: $uni-success,
  17. ),
  18. 'warning': (
  19. base: $uni-warning,
  20. ),
  21. 'error': (
  22. base: $uni-error,
  23. ),
  24. 'info': (
  25. base: $uni-info,
  26. ),
  27. ),
  28. $colors
  29. );
  30. $color-white: map.get($colors, 'white') !default;
  31. $color-black: map.get($colors, 'black') !default;
  32. // https://sass-lang.com/documentation/values/maps#immutability
  33. // mix colors with white/black to generate light/dark level
  34. @mixin set-color-mix-level($type, $number, $mode: 'light', $mix-color: $uni-white) {
  35. $colors: map.deep-merge(
  36. (
  37. #{$type}: (
  38. '#{$mode}-#{$number}':
  39. color.mix(
  40. $mix-color,
  41. map.get($colors, $type, 'base'),
  42. math.percentage(math.div($number, 10))
  43. ),
  44. )
  45. ),
  46. $colors
  47. ) !global;
  48. }
  49. // --uni-primary-light-1
  50. @each $type in $types {
  51. @for $i from 1 through 9 {
  52. @include set-color-mix-level($type, $i, 'light', $uni-white);
  53. }
  54. }
  55. // --uni-primary-dark-2
  56. @each $type in $types {
  57. @include set-color-mix-level($type, 2, 'dark', $uni-black);
  58. }
  59. // TextColor
  60. $text-color: () !default;
  61. $text-color: map.merge(
  62. (
  63. 'primary': $uni-text-color,
  64. 'regular': $uni-text-color-regular,
  65. 'secondary': $uni-text-color-grey,
  66. 'placeholder': $uni-text-color-placeholder,
  67. 'disabled': $uni-text-color-disable,
  68. ),
  69. $text-color
  70. );
  71. // FontSize
  72. $font-size: () !default;
  73. $font-size: map.merge(
  74. (
  75. 'sm': $uni-font-size-sm,
  76. 'base': $uni-font-size-base,
  77. 'lg': $uni-font-size-lg,
  78. ),
  79. $font-size
  80. );
  81. // Padding / Margin
  82. $padding-maring-direction: (
  83. '': '',
  84. 't': 'top',
  85. 'r': 'right',
  86. 'b': 'bottom',
  87. 'l': 'left',
  88. 'tb': (
  89. 't': 'top',
  90. 'b': 'bottom',
  91. ),
  92. 'lr': (
  93. 'l': 'left',
  94. 'r': 'right',
  95. ),
  96. );
  97. @mixin each-padding-margin-direction($abbr, $type, $dAbbr, $direction) {
  98. @each $number in $uni-padding-margin-size {
  99. @if ($number == 0) {
  100. } @else {
  101. .#{$abbr}#{$dAbbr}-#{$number} {
  102. @if (type-of($direction) == map) {
  103. @each $v, $d in $direction {
  104. #{$type}-#{$d}: #{$number}rpx;
  105. }
  106. } @else if($direction== '') {
  107. #{$type}: #{$number}rpx;
  108. } @else {
  109. #{$type}-#{$direction}: #{$number}rpx;
  110. }
  111. }
  112. }
  113. }
  114. }
  115. @mixin set-padding-margin-size-class() {
  116. @each $abbr, $type in ('m': 'margin', 'p': 'padding') {
  117. .no-#{$type} {
  118. #{$type}: 0 !important;
  119. }
  120. @each $dAbbr, $d in $padding-maring-direction {
  121. @include each-padding-margin-direction($abbr, $type, $dAbbr, $d);
  122. }
  123. }
  124. }