-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
_variant.create.function.scss
108 lines (90 loc) · 3.79 KB
/
_variant.create.function.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
// Sass.
@use 'sass:list';
// Modules.
@use '../map';
// Functions.
@use '../color/name/name.retrieve.function' as color-name-retrieve;
@use '../list/has/has.list.function' as list-has-list;
@use '../list/list.nth.function' as list-nth;
@use '../list/remove/remove.list.function' as list-remove-list;
@use '../list/remove/remove.value.function' as list-remove-value;
// Status: TODO:
// Category: Property variant
// The `variant.create()` creates a variant built from `$value`.
// @param `$value` A list or string type to create a variant.
// @param `$modifier`
// @param `$type`
// @returns The returned value is a variant of map type where (class: value).
@function create($value, $modifier: null, $type: null) {
$result: ();
@if type-of($value) == map {
@each $name, $side-variant in $value {
@if type-of($side-variant) == map {
@each $side, $variant in $side-variant {
@if not (type-of($variant) == map) {
$result: map.merge($result, (), $name, ($side: $variant));
}
}
} @else {
$result: map.merge($result, (), (), ($name: $side-variant));
}
}
} @else if not (type-of($value) == map) {
// @if list.separator($value) == space and list.has-list($value) {
// $value: selector.nest($value...);
// }
@each $value in if(list.separator($value) == comma, $value, ($value,)) {
$key: $value;
@if type-of($value) == list and list.length($value) > 0 {
// Remove !important.
$key: list-remove-value.value($key, !important);
// FEATURE: Color variant.
@if $type == color {
$color: color-name-retrieve.retrieve($key);
$key: map.get($color, no-property-name) or map.get($color, name);
} @else {
// FEATURE: Check key.
@if list.separator($key) == comma {
$key: list-nth.nth($key, 1);
} @else if list.separator($key) == space and list-has-list.has-list($key) {
$key: list-remove-list.list($key);
}
}
}
$result: map.merge($result, ($key: $value));
}
}
@return $result;
}
// Variant
// (class+property: property-value)
// ((class: property-name): property-value)
// (class+property-name: (class: property-value))
// ((class: property-name): (class: property-value))
// (class+property-name: (class+property-name: (class: property-value)))
// ((class: property-name): ((class+property-name: class+property-name): (class: property-value)))
// ((class: property-name): ((class+property-name: class+property-name): (class: (property-name: property-value))))
// Examples.
// string
// @debug create(right); // (right: right)
// space-separated list
// @debug create(padding top); // (padding top: padding top)
// comma-separated list
// @debug create((right, left)); // (right: right, left: left)
//
// @debug create((right ('+' 15), left)); // (right: right ("+" 15), left: left)
// @debug create((right ('+' 15) !important, left)); // (right: right ("+" 15) !important, left: left)
//
// @debug create((color, (primary dark, -30%), (secondary light, 60%)));
// @debug create((color, (primary dark 30, -30%), (secondary light 60, 60%)));
// TODO:
// @debug create((color, (ultra color dark, -30%), (mega color light, 60%)));
// @debug create((secondary (color, dark, light)));
// @debug create((secondary (color '!important', dark, light)));
// @debug create((secondary (color, (dark, -30%), (light, 60%))));
// @debug create((accent, (color, [(light, 30%), (dark, 50%)], dark, light)));
//
// @debug create((medium: 1px solid red, large: 2px solid blue)); // ((): ((): (medium: 1px solid red)))
// @debug create(((top, right): (medium: 1px solid red, large: 2px solid blue))); // ((): ((top, right): (medium: 1px solid red, large: 2px solid blue)))
//
// @debug create((((disabled, 15%), (disabled, 5%)), error));