| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134 |
- @use 'sass:map';
- @use 'sass:math';
- @use 'sass:color';
- @use '../mixins/var' as *;
- $types: primary, success, warning, error, info;
- // Color
- $colors: () !default;
- $colors: map.deep-merge(
- (
- 'white': $uni-white,
- 'black': $uni-black,
- 'primary': (
- base: $uni-primary,
- ),
- 'success': (
- base: $uni-success,
- ),
- 'warning': (
- base: $uni-warning,
- ),
- 'error': (
- base: $uni-error,
- ),
- 'info': (
- base: $uni-info,
- ),
- ),
- $colors
- );
- $color-white: map.get($colors, 'white') !default;
- $color-black: map.get($colors, 'black') !default;
- // https://sass-lang.com/documentation/values/maps#immutability
- // mix colors with white/black to generate light/dark level
- @mixin set-color-mix-level($type, $number, $mode: 'light', $mix-color: $uni-white) {
- $colors: map.deep-merge(
- (
- #{$type}: (
- '#{$mode}-#{$number}':
- color.mix(
- $mix-color,
- map.get($colors, $type, 'base'),
- math.percentage(math.div($number, 10))
- ),
- )
- ),
- $colors
- ) !global;
- }
- // --uni-primary-light-1
- @each $type in $types {
- @for $i from 1 through 9 {
- @include set-color-mix-level($type, $i, 'light', $uni-white);
- }
- }
- // --uni-primary-dark-2
- @each $type in $types {
- @include set-color-mix-level($type, 2, 'dark', $uni-black);
- }
- // TextColor
- $text-color: () !default;
- $text-color: map.merge(
- (
- 'primary': $uni-text-color,
- 'regular': $uni-text-color-regular,
- 'secondary': $uni-text-color-grey,
- 'placeholder': $uni-text-color-placeholder,
- 'disabled': $uni-text-color-disable,
- ),
- $text-color
- );
- // FontSize
- $font-size: () !default;
- $font-size: map.merge(
- (
- 'sm': $uni-font-size-sm,
- 'base': $uni-font-size-base,
- 'lg': $uni-font-size-lg,
- ),
- $font-size
- );
- // Padding / Margin
- $padding-maring-direction: (
- '': '',
- 't': 'top',
- 'r': 'right',
- 'b': 'bottom',
- 'l': 'left',
- 'tb': (
- 't': 'top',
- 'b': 'bottom',
- ),
- 'lr': (
- 'l': 'left',
- 'r': 'right',
- ),
- );
- @mixin each-padding-margin-direction($abbr, $type, $dAbbr, $direction) {
- @each $number in $uni-padding-margin-size {
- @if ($number == 0) {
- } @else {
- .#{$abbr}#{$dAbbr}-#{$number} {
- @if (type-of($direction) == map) {
- @each $v, $d in $direction {
- #{$type}-#{$d}: #{$number}rpx;
- }
- } @else if($direction== '') {
- #{$type}: #{$number}rpx;
- } @else {
- #{$type}-#{$direction}: #{$number}rpx;
- }
- }
- }
- }
- }
- @mixin set-padding-margin-size-class() {
- @each $abbr, $type in ('m': 'margin', 'p': 'padding') {
- .no-#{$type} {
- #{$type}: 0 !important;
- }
- @each $dAbbr, $d in $padding-maring-direction {
- @include each-padding-margin-direction($abbr, $type, $dAbbr, $d);
- }
- }
- }
|