@nuvoui/core 1.1.4 → 1.1.5
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.
- package/dist/nuvoui.min.css +1 -0
- package/package.json +1 -1
- package/src/styles/base/_base.scss +17 -0
- package/src/styles/layouts/_container.scss +10 -19
- package/src/styles/layouts/_flex.scss +41 -16
- package/src/styles/layouts/_grid.scss +47 -66
- package/src/styles/mixins-map.scss +124 -68
- package/src/styles/utilities/_colors.scss +6 -6
- package/src/styles/utilities/_functions.scss +125 -0
- package/src/styles/utilities/_media-queries.scss +23 -7
- package/src/styles/utilities/_sizing.scss +10 -4
- package/src/styles/utilities/_variables.scss +8 -7
- package/dist/nuvoui.css +0 -1
package/package.json
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
/* Import variables */
|
|
4
4
|
@use '../utilities/variables' as *;
|
|
5
|
+
@use '../utilities/media-queries' as media;
|
|
5
6
|
|
|
6
7
|
:root {
|
|
7
8
|
--font-family-base: system-ui, -apple-system, "BlinkMacSystemFont", 'Segoe UI', "Roboto", "Oxygen", "Ubuntu", "Cantarell", sans-serif;
|
|
@@ -181,3 +182,19 @@ a {
|
|
|
181
182
|
border: 0 !important;
|
|
182
183
|
}
|
|
183
184
|
|
|
185
|
+
|
|
186
|
+
|
|
187
|
+
code {
|
|
188
|
+
font-family: 'Courier New', Courier, monospace;
|
|
189
|
+
background-color: #f8f8f8;
|
|
190
|
+
color: #d63384;
|
|
191
|
+
padding: 2px 6px;
|
|
192
|
+
border-radius: 3px;
|
|
193
|
+
box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
|
|
194
|
+
white-space: nowrap;
|
|
195
|
+
|
|
196
|
+
@include media.dark-mode {
|
|
197
|
+
background-color: #333;
|
|
198
|
+
color: #f8f8f2;
|
|
199
|
+
}
|
|
200
|
+
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
@use 'sass:map';
|
|
2
2
|
@use '../utilities/variables' as *;
|
|
3
3
|
|
|
4
|
-
//
|
|
4
|
+
// Base container styles
|
|
5
5
|
@mixin container-base {
|
|
6
6
|
width: 100%;
|
|
7
7
|
margin-left: auto;
|
|
@@ -10,39 +10,30 @@
|
|
|
10
10
|
padding-right: 1rem;
|
|
11
11
|
}
|
|
12
12
|
|
|
13
|
-
|
|
13
|
+
// Responsive container mixin
|
|
14
|
+
@mixin container($display: block) {
|
|
14
15
|
@include container-base;
|
|
15
16
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
17
|
+
display: $display;
|
|
18
|
+
|
|
19
|
+
@each $breakpoint, $width in $container-max-widths {
|
|
20
|
+
@media (min-width: map.get($breakpoints, $breakpoint)) {
|
|
21
|
+
max-width: $width;
|
|
21
22
|
}
|
|
22
23
|
}
|
|
23
24
|
}
|
|
24
25
|
|
|
25
|
-
@mixin container-flex {
|
|
26
|
-
display: flex;
|
|
27
|
-
@include container;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
@mixin container-grid {
|
|
31
|
-
display: grid;
|
|
32
|
-
@include container;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
26
|
// Container classes
|
|
36
27
|
.container {
|
|
37
28
|
@include container;
|
|
38
29
|
}
|
|
39
30
|
|
|
40
31
|
.container-flex {
|
|
41
|
-
@include container
|
|
32
|
+
@include container(flex);
|
|
42
33
|
}
|
|
43
34
|
|
|
44
35
|
.container-grid {
|
|
45
|
-
@include container
|
|
36
|
+
@include container(grid);
|
|
46
37
|
}
|
|
47
38
|
|
|
48
39
|
.container-fluid {
|
|
@@ -26,11 +26,20 @@
|
|
|
26
26
|
@mixin evenly {justify-content: space-evenly;}
|
|
27
27
|
|
|
28
28
|
// Cross Axis Alignment Mixins
|
|
29
|
-
@mixin
|
|
30
|
-
@mixin
|
|
31
|
-
@mixin
|
|
32
|
-
@mixin
|
|
33
|
-
@mixin
|
|
29
|
+
@mixin x-start {align-items: flex-start;}
|
|
30
|
+
@mixin x-end {align-items: flex-end;}
|
|
31
|
+
@mixin x-center {align-items: center;}
|
|
32
|
+
@mixin x-stretch {align-items: stretch;}
|
|
33
|
+
@mixin x-baseline {align-items: baseline;}
|
|
34
|
+
|
|
35
|
+
// Cross Axis Content Mixins
|
|
36
|
+
@mixin x-content-start { align-content: flex-start; }
|
|
37
|
+
@mixin x-content-end { align-content: flex-end; }
|
|
38
|
+
@mixin x-content-center { align-content: center; }
|
|
39
|
+
@mixin x-content-between { align-content: space-between; }
|
|
40
|
+
@mixin x-content-around { align-content: space-around; }
|
|
41
|
+
@mixin x-content-evenly { align-content: space-evenly; }
|
|
42
|
+
@mixin x-content-stretch { align-content: stretch; }
|
|
34
43
|
|
|
35
44
|
// Self Alignment Mixins
|
|
36
45
|
@mixin self-auto {align-self: auto;}
|
|
@@ -77,12 +86,20 @@
|
|
|
77
86
|
&.evenly { justify-content: space-evenly; }
|
|
78
87
|
|
|
79
88
|
// Align modifiers
|
|
80
|
-
&.
|
|
81
|
-
&.
|
|
82
|
-
&.
|
|
83
|
-
&.
|
|
84
|
-
&.
|
|
89
|
+
&.x-start { align-items: flex-start; }
|
|
90
|
+
&.x-end { align-items: flex-end; }
|
|
91
|
+
&.x-center { align-items: center; }
|
|
92
|
+
&.x-baseline { align-items: baseline; }
|
|
93
|
+
&.x-stretch { align-items: stretch; }
|
|
85
94
|
|
|
95
|
+
&.x-content-start { align-content: flex-start; }
|
|
96
|
+
&.x-content-end { align-content: flex-end; }
|
|
97
|
+
&.x-content-center { align-content: center; }
|
|
98
|
+
&.x-content-between { align-content: space-between; }
|
|
99
|
+
&.x-content-around { align-content: space-around; }
|
|
100
|
+
&.x-content-evenly { align-content: space-evenly; }
|
|
101
|
+
&.x-content-stretch { align-content: stretch; }
|
|
102
|
+
|
|
86
103
|
// Child flex items (using column count)
|
|
87
104
|
> .w-auto { @include f-w-auto }
|
|
88
105
|
> .w-full { @include f-w-full }
|
|
@@ -127,12 +144,20 @@
|
|
|
127
144
|
&.evenly\@#{$breakpoint} { justify-content: space-evenly; }
|
|
128
145
|
|
|
129
146
|
// Align
|
|
130
|
-
&.
|
|
131
|
-
&.
|
|
132
|
-
&.
|
|
133
|
-
&.
|
|
134
|
-
&.
|
|
135
|
-
|
|
147
|
+
&.x-start\@#{$breakpoint} { align-items: flex-start; }
|
|
148
|
+
&.x-end\@#{$breakpoint} { align-items: flex-end; }
|
|
149
|
+
&.x-center\@#{$breakpoint} { align-items: center; }
|
|
150
|
+
&.x-baseline\@#{$breakpoint} { align-items: baseline; }
|
|
151
|
+
&.x-stretch\@#{$breakpoint} { align-items: stretch; }
|
|
152
|
+
|
|
153
|
+
&.x-content-start\@#{$breakpoint} { align-content: flex-start; }
|
|
154
|
+
&.x-content-end\@#{$breakpoint} { align-content: flex-end; }
|
|
155
|
+
&.x-content-center\@#{$breakpoint} { align-content: center; }
|
|
156
|
+
&.x-content-between\@#{$breakpoint} { align-content: space-between; }
|
|
157
|
+
&.x-content-around\@#{$breakpoint} { align-content: space-around; }
|
|
158
|
+
&.x-content-evenly\@#{$breakpoint} { align-content: space-evenly; }
|
|
159
|
+
&.x-content-stretch\@#{$breakpoint} { align-content: stretch; }
|
|
160
|
+
|
|
136
161
|
// Width (using column count)
|
|
137
162
|
& > .w-auto\@#{$breakpoint} { @include f-w-auto; }
|
|
138
163
|
& > .w-full\@#{$breakpoint} { @include f-w-full; }
|
|
@@ -1,74 +1,47 @@
|
|
|
1
|
+
@use 'sass:math';
|
|
1
2
|
@use '../utilities/variables' as *;
|
|
2
3
|
|
|
3
4
|
// Grid Container Mixins
|
|
4
|
-
@mixin grid {
|
|
5
|
-
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
@mixin grid-inline {
|
|
9
|
-
display: inline-grid;
|
|
10
|
-
}
|
|
5
|
+
@mixin grid {display: grid;}
|
|
6
|
+
@mixin grid-inline {display: inline-grid;}
|
|
11
7
|
|
|
12
8
|
// Grid Template Mixins
|
|
13
|
-
@mixin
|
|
14
|
-
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
@mixin grid-rows($count) {
|
|
18
|
-
grid-template-rows: repeat($count, minmax(0, 1fr));
|
|
19
|
-
}
|
|
9
|
+
@mixin cols($count) {grid-template-columns: repeat($count, minmax(0, 1fr));}
|
|
10
|
+
@mixin rows($count) {grid-template-rows: repeat($count, minmax(0, 1fr));}
|
|
20
11
|
|
|
21
12
|
// Auto-fit/fill Mixins
|
|
22
|
-
@mixin grid-auto-fit($min-width)
|
|
23
|
-
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
@mixin grid-auto-fill($min-width) {
|
|
27
|
-
grid-template-columns: repeat(auto-fill, minmax($min-width, 1fr));
|
|
28
|
-
}
|
|
13
|
+
@mixin auto-fit($min-width) {grid-template-columns: repeat(auto-fit, minmax($min-width, 1fr));}
|
|
14
|
+
@mixin auto-fill($min-width) {grid-template-columns: repeat(auto-fill, minmax($min-width, 1fr));}
|
|
29
15
|
|
|
30
16
|
// Grid Flow Mixins
|
|
31
|
-
@mixin
|
|
32
|
-
@mixin
|
|
33
|
-
@mixin
|
|
17
|
+
@mixin flow-in-row { grid-auto-flow: row; }
|
|
18
|
+
@mixin flow-in-col { grid-auto-flow: column; }
|
|
19
|
+
@mixin flow-dense-items { grid-auto-flow: dense; }
|
|
34
20
|
|
|
35
21
|
// Grid Alignment Mixins
|
|
36
|
-
@mixin justify-items($value) {
|
|
37
|
-
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
@mixin align-items($value) {
|
|
41
|
-
align-items: $value;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
@mixin place-items($value) {
|
|
45
|
-
place-items: $value;
|
|
46
|
-
}
|
|
22
|
+
@mixin justify-items($value) {justify-items: $value;}
|
|
23
|
+
@mixin align-items($value) {align-items: $value;}
|
|
24
|
+
@mixin place-items($value) {place-items: $value;}
|
|
47
25
|
|
|
48
26
|
// Grid Item Placement Mixins
|
|
49
|
-
@mixin col
|
|
50
|
-
|
|
51
|
-
}
|
|
27
|
+
@mixin span-col($span) {grid-column: span $span / span $span;}
|
|
28
|
+
@mixin span-row($span) {grid-row: span $span / span $span;}
|
|
29
|
+
@mixin col-start($start) {grid-column-start: $start;}
|
|
30
|
+
@mixin col-end($end) {grid-column-end: $end;}
|
|
31
|
+
@mixin row-start($start) {grid-row-start: $start;}
|
|
32
|
+
@mixin row-end($end) {grid-row-end: $end;}
|
|
52
33
|
|
|
53
|
-
@mixin
|
|
54
|
-
grid-
|
|
34
|
+
@mixin grid-position($col, $row) {
|
|
35
|
+
grid-column: $col;
|
|
36
|
+
grid-row: $row;
|
|
55
37
|
}
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
grid-column-start: $start;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
@mixin col-end($end) {
|
|
62
|
-
grid-column-end: $end;
|
|
38
|
+
@mixin position-col($col) {
|
|
39
|
+
grid-column: $start;
|
|
63
40
|
}
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
grid-row-start: $start;
|
|
41
|
+
@mixin position-row($row) {
|
|
42
|
+
grid-row: $row;
|
|
67
43
|
}
|
|
68
44
|
|
|
69
|
-
@mixin row-end($end) {
|
|
70
|
-
grid-row-end: $end;
|
|
71
|
-
}
|
|
72
45
|
|
|
73
46
|
// Classes
|
|
74
47
|
.grid { @include grid; }
|
|
@@ -76,14 +49,14 @@
|
|
|
76
49
|
|
|
77
50
|
// Grid Template Classes
|
|
78
51
|
@for $i from 1 through $column-count {
|
|
79
|
-
.grid.cols-#{$i} { @include
|
|
80
|
-
.grid.rows-#{$i} { @include
|
|
52
|
+
.grid.cols-#{$i} { @include cols($i); }
|
|
53
|
+
.grid.rows-#{$i} { @include rows($i); }
|
|
81
54
|
|
|
82
55
|
// Responsive grid columns
|
|
83
56
|
@each $breakpoint, $width in $breakpoints {
|
|
84
57
|
@media (min-width: $width) {
|
|
85
|
-
.grid.cols-#{$i}
|
|
86
|
-
@include
|
|
58
|
+
.grid.cols-#{$i}\@#{$breakpoint} {
|
|
59
|
+
@include cols($i);
|
|
87
60
|
}
|
|
88
61
|
}
|
|
89
62
|
}
|
|
@@ -91,14 +64,22 @@
|
|
|
91
64
|
|
|
92
65
|
// Generate Column Span Classes with Responsive Variants
|
|
93
66
|
@for $i from 1 through $column-count {
|
|
94
|
-
.col
|
|
95
|
-
@include col
|
|
67
|
+
.span-col-#{$i} {
|
|
68
|
+
@include span-col($i);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.span-row-#{$i} {
|
|
72
|
+
@include span-row($i);
|
|
96
73
|
}
|
|
97
74
|
|
|
98
75
|
@each $breakpoint, $width in $breakpoints {
|
|
99
76
|
@media (min-width: $width) {
|
|
100
|
-
.col
|
|
101
|
-
@include col
|
|
77
|
+
.span-col-#{$i}\@#{$breakpoint} {
|
|
78
|
+
@include span-col($i);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.span-row-#{$i}\@#{$breakpoint} {
|
|
82
|
+
@include span-row($i);
|
|
102
83
|
}
|
|
103
84
|
}
|
|
104
85
|
}
|
|
@@ -107,14 +88,14 @@
|
|
|
107
88
|
|
|
108
89
|
// Auto-fit/fill Classes
|
|
109
90
|
@each $breakpoint, $width in $breakpoints {
|
|
110
|
-
.grid.auto-fit-#{$breakpoint} { @include
|
|
111
|
-
.grid.auto-fill-#{$breakpoint} { @include
|
|
91
|
+
.grid.auto-fit-#{$breakpoint} { @include auto-fit($width); }
|
|
92
|
+
.grid.auto-fill-#{$breakpoint} { @include auto-fill($width); }
|
|
112
93
|
}
|
|
113
94
|
|
|
114
95
|
// Flow Classes
|
|
115
|
-
.grid.flow-row { @include
|
|
116
|
-
.grid.flow-col { @include
|
|
117
|
-
.grid.flow-dense { @include
|
|
96
|
+
.grid.flow-row { @include flow-in-row; }
|
|
97
|
+
.grid.flow-col { @include flow-in-col; }
|
|
98
|
+
.grid.flow-dense { @include flow-dense-items; }
|
|
118
99
|
|
|
119
100
|
// Alignment Classes
|
|
120
101
|
$alignments: (
|
|
@@ -48,12 +48,6 @@
|
|
|
48
48
|
@include media-up($breakpoint) {
|
|
49
49
|
@if $mixin-str == 'container-base' {
|
|
50
50
|
@include container-base;
|
|
51
|
-
} @else if $mixin-str == 'container' {
|
|
52
|
-
@include container;
|
|
53
|
-
} @else if $mixin-str == 'container-flex' {
|
|
54
|
-
@include container-flex;
|
|
55
|
-
} @else if $mixin-str == 'container-grid' {
|
|
56
|
-
@include container-grid;
|
|
57
51
|
} @else if $mixin-str == 'flex' {
|
|
58
52
|
@include flex;
|
|
59
53
|
} @else if $mixin-str == 'flex-inline' {
|
|
@@ -84,16 +78,30 @@
|
|
|
84
78
|
@include around;
|
|
85
79
|
} @else if $mixin-str == 'evenly' {
|
|
86
80
|
@include evenly;
|
|
87
|
-
} @else if $mixin-str == '
|
|
88
|
-
@include
|
|
89
|
-
} @else if $mixin-str == '
|
|
90
|
-
@include
|
|
91
|
-
} @else if $mixin-str == '
|
|
92
|
-
@include
|
|
93
|
-
} @else if $mixin-str == '
|
|
94
|
-
@include
|
|
95
|
-
} @else if $mixin-str == '
|
|
96
|
-
@include
|
|
81
|
+
} @else if $mixin-str == 'x-start' {
|
|
82
|
+
@include x-start;
|
|
83
|
+
} @else if $mixin-str == 'x-end' {
|
|
84
|
+
@include x-end;
|
|
85
|
+
} @else if $mixin-str == 'x-center' {
|
|
86
|
+
@include x-center;
|
|
87
|
+
} @else if $mixin-str == 'x-stretch' {
|
|
88
|
+
@include x-stretch;
|
|
89
|
+
} @else if $mixin-str == 'x-baseline' {
|
|
90
|
+
@include x-baseline;
|
|
91
|
+
} @else if $mixin-str == 'x-content-start' {
|
|
92
|
+
@include x-content-start;
|
|
93
|
+
} @else if $mixin-str == 'x-content-end' {
|
|
94
|
+
@include x-content-end;
|
|
95
|
+
} @else if $mixin-str == 'x-content-center' {
|
|
96
|
+
@include x-content-center;
|
|
97
|
+
} @else if $mixin-str == 'x-content-between' {
|
|
98
|
+
@include x-content-between;
|
|
99
|
+
} @else if $mixin-str == 'x-content-around' {
|
|
100
|
+
@include x-content-around;
|
|
101
|
+
} @else if $mixin-str == 'x-content-evenly' {
|
|
102
|
+
@include x-content-evenly;
|
|
103
|
+
} @else if $mixin-str == 'x-content-stretch' {
|
|
104
|
+
@include x-content-stretch;
|
|
97
105
|
} @else if $mixin-str == 'self-auto' {
|
|
98
106
|
@include self-auto;
|
|
99
107
|
} @else if $mixin-str == 'self-start' {
|
|
@@ -122,12 +130,12 @@
|
|
|
122
130
|
@include grid;
|
|
123
131
|
} @else if $mixin-str == 'grid-inline' {
|
|
124
132
|
@include grid-inline;
|
|
125
|
-
} @else if $mixin-str == '
|
|
126
|
-
@include
|
|
127
|
-
} @else if $mixin-str == '
|
|
128
|
-
@include
|
|
129
|
-
} @else if $mixin-str == '
|
|
130
|
-
@include
|
|
133
|
+
} @else if $mixin-str == 'flow-in-row' {
|
|
134
|
+
@include flow-in-row;
|
|
135
|
+
} @else if $mixin-str == 'flow-in-col' {
|
|
136
|
+
@include flow-in-col;
|
|
137
|
+
} @else if $mixin-str == 'flow-dense-items' {
|
|
138
|
+
@include flow-dense-items;
|
|
131
139
|
} @else if $mixin-str == 'd-none' {
|
|
132
140
|
@include d-none;
|
|
133
141
|
} @else if $mixin-str == 'd-block' {
|
|
@@ -264,31 +272,36 @@
|
|
|
264
272
|
@include no-underline;
|
|
265
273
|
} @else if $mixin-str == 'truncate' {
|
|
266
274
|
@include truncate;
|
|
275
|
+
} @else if str.index($mixin-str, 'container(') == 1 {
|
|
276
|
+
$start: str.index($mixin-str, '(') + 1;
|
|
277
|
+
$end: str.length($mixin-str) - 1;
|
|
278
|
+
$value: str.slice($mixin-str, $start, $end);
|
|
279
|
+
@include container(str.unquote($value));
|
|
267
280
|
} @else if str.index($mixin-str, 'w-col(') == 1 {
|
|
268
281
|
$start: str.index($mixin-str, '(') + 1;
|
|
269
282
|
$end: str.length($mixin-str) - 1;
|
|
270
283
|
$value: str.slice($mixin-str, $start, $end);
|
|
271
284
|
@include w-col(str.unquote($value));
|
|
272
|
-
} @else if str.index($mixin-str, '
|
|
285
|
+
} @else if str.index($mixin-str, 'cols(') == 1 {
|
|
273
286
|
$start: str.index($mixin-str, '(') + 1;
|
|
274
287
|
$end: str.length($mixin-str) - 1;
|
|
275
288
|
$value: str.slice($mixin-str, $start, $end);
|
|
276
|
-
@include
|
|
277
|
-
} @else if str.index($mixin-str, '
|
|
289
|
+
@include cols(str.unquote($value));
|
|
290
|
+
} @else if str.index($mixin-str, 'rows(') == 1 {
|
|
278
291
|
$start: str.index($mixin-str, '(') + 1;
|
|
279
292
|
$end: str.length($mixin-str) - 1;
|
|
280
293
|
$value: str.slice($mixin-str, $start, $end);
|
|
281
|
-
@include
|
|
282
|
-
} @else if str.index($mixin-str, '
|
|
294
|
+
@include rows(str.unquote($value));
|
|
295
|
+
} @else if str.index($mixin-str, 'auto-fit(') == 1 {
|
|
283
296
|
$start: str.index($mixin-str, '(') + 1;
|
|
284
297
|
$end: str.length($mixin-str) - 1;
|
|
285
298
|
$value: str.slice($mixin-str, $start, $end);
|
|
286
|
-
@include
|
|
287
|
-
} @else if str.index($mixin-str, '
|
|
299
|
+
@include auto-fit(str.unquote($value));
|
|
300
|
+
} @else if str.index($mixin-str, 'auto-fill(') == 1 {
|
|
288
301
|
$start: str.index($mixin-str, '(') + 1;
|
|
289
302
|
$end: str.length($mixin-str) - 1;
|
|
290
303
|
$value: str.slice($mixin-str, $start, $end);
|
|
291
|
-
@include
|
|
304
|
+
@include auto-fill(str.unquote($value));
|
|
292
305
|
} @else if str.index($mixin-str, 'justify-items(') == 1 {
|
|
293
306
|
$start: str.index($mixin-str, '(') + 1;
|
|
294
307
|
$end: str.length($mixin-str) - 1;
|
|
@@ -304,16 +317,16 @@
|
|
|
304
317
|
$end: str.length($mixin-str) - 1;
|
|
305
318
|
$value: str.slice($mixin-str, $start, $end);
|
|
306
319
|
@include place-items(str.unquote($value));
|
|
307
|
-
} @else if str.index($mixin-str, 'col
|
|
320
|
+
} @else if str.index($mixin-str, 'span-col(') == 1 {
|
|
308
321
|
$start: str.index($mixin-str, '(') + 1;
|
|
309
322
|
$end: str.length($mixin-str) - 1;
|
|
310
323
|
$value: str.slice($mixin-str, $start, $end);
|
|
311
|
-
@include col
|
|
312
|
-
} @else if str.index($mixin-str, 'row
|
|
324
|
+
@include span-col(str.unquote($value));
|
|
325
|
+
} @else if str.index($mixin-str, 'span-row(') == 1 {
|
|
313
326
|
$start: str.index($mixin-str, '(') + 1;
|
|
314
327
|
$end: str.length($mixin-str) - 1;
|
|
315
328
|
$value: str.slice($mixin-str, $start, $end);
|
|
316
|
-
@include row
|
|
329
|
+
@include span-row(str.unquote($value));
|
|
317
330
|
} @else if str.index($mixin-str, 'col-start(') == 1 {
|
|
318
331
|
$start: str.index($mixin-str, '(') + 1;
|
|
319
332
|
$end: str.length($mixin-str) - 1;
|
|
@@ -334,6 +347,21 @@
|
|
|
334
347
|
$end: str.length($mixin-str) - 1;
|
|
335
348
|
$value: str.slice($mixin-str, $start, $end);
|
|
336
349
|
@include row-end(str.unquote($value));
|
|
350
|
+
} @else if str.index($mixin-str, 'grid-position(') == 1 {
|
|
351
|
+
$start: str.index($mixin-str, '(') + 1;
|
|
352
|
+
$end: str.length($mixin-str) - 1;
|
|
353
|
+
$value: str.slice($mixin-str, $start, $end);
|
|
354
|
+
@include grid-position(str.unquote($value));
|
|
355
|
+
} @else if str.index($mixin-str, 'position-col(') == 1 {
|
|
356
|
+
$start: str.index($mixin-str, '(') + 1;
|
|
357
|
+
$end: str.length($mixin-str) - 1;
|
|
358
|
+
$value: str.slice($mixin-str, $start, $end);
|
|
359
|
+
@include position-col(str.unquote($value));
|
|
360
|
+
} @else if str.index($mixin-str, 'position-row(') == 1 {
|
|
361
|
+
$start: str.index($mixin-str, '(') + 1;
|
|
362
|
+
$end: str.length($mixin-str) - 1;
|
|
363
|
+
$value: str.slice($mixin-str, $start, $end);
|
|
364
|
+
@include position-row(str.unquote($value));
|
|
337
365
|
} @else if str.index($mixin-str, 'generate-bounce-keyframes(') == 1 {
|
|
338
366
|
$start: str.index($mixin-str, '(') + 1;
|
|
339
367
|
$end: str.length($mixin-str) - 1;
|
|
@@ -604,12 +632,6 @@
|
|
|
604
632
|
} @else {
|
|
605
633
|
@if $mixin-str == 'container-base' {
|
|
606
634
|
@include container-base;
|
|
607
|
-
} @else if $mixin-str == 'container' {
|
|
608
|
-
@include container;
|
|
609
|
-
} @else if $mixin-str == 'container-flex' {
|
|
610
|
-
@include container-flex;
|
|
611
|
-
} @else if $mixin-str == 'container-grid' {
|
|
612
|
-
@include container-grid;
|
|
613
635
|
} @else if $mixin-str == 'flex' {
|
|
614
636
|
@include flex;
|
|
615
637
|
} @else if $mixin-str == 'flex-inline' {
|
|
@@ -640,16 +662,30 @@
|
|
|
640
662
|
@include around;
|
|
641
663
|
} @else if $mixin-str == 'evenly' {
|
|
642
664
|
@include evenly;
|
|
643
|
-
} @else if $mixin-str == '
|
|
644
|
-
@include
|
|
645
|
-
} @else if $mixin-str == '
|
|
646
|
-
@include
|
|
647
|
-
} @else if $mixin-str == '
|
|
648
|
-
@include
|
|
649
|
-
} @else if $mixin-str == '
|
|
650
|
-
@include
|
|
651
|
-
} @else if $mixin-str == '
|
|
652
|
-
@include
|
|
665
|
+
} @else if $mixin-str == 'x-start' {
|
|
666
|
+
@include x-start;
|
|
667
|
+
} @else if $mixin-str == 'x-end' {
|
|
668
|
+
@include x-end;
|
|
669
|
+
} @else if $mixin-str == 'x-center' {
|
|
670
|
+
@include x-center;
|
|
671
|
+
} @else if $mixin-str == 'x-stretch' {
|
|
672
|
+
@include x-stretch;
|
|
673
|
+
} @else if $mixin-str == 'x-baseline' {
|
|
674
|
+
@include x-baseline;
|
|
675
|
+
} @else if $mixin-str == 'x-content-start' {
|
|
676
|
+
@include x-content-start;
|
|
677
|
+
} @else if $mixin-str == 'x-content-end' {
|
|
678
|
+
@include x-content-end;
|
|
679
|
+
} @else if $mixin-str == 'x-content-center' {
|
|
680
|
+
@include x-content-center;
|
|
681
|
+
} @else if $mixin-str == 'x-content-between' {
|
|
682
|
+
@include x-content-between;
|
|
683
|
+
} @else if $mixin-str == 'x-content-around' {
|
|
684
|
+
@include x-content-around;
|
|
685
|
+
} @else if $mixin-str == 'x-content-evenly' {
|
|
686
|
+
@include x-content-evenly;
|
|
687
|
+
} @else if $mixin-str == 'x-content-stretch' {
|
|
688
|
+
@include x-content-stretch;
|
|
653
689
|
} @else if $mixin-str == 'self-auto' {
|
|
654
690
|
@include self-auto;
|
|
655
691
|
} @else if $mixin-str == 'self-start' {
|
|
@@ -678,12 +714,12 @@
|
|
|
678
714
|
@include grid;
|
|
679
715
|
} @else if $mixin-str == 'grid-inline' {
|
|
680
716
|
@include grid-inline;
|
|
681
|
-
} @else if $mixin-str == '
|
|
682
|
-
@include
|
|
683
|
-
} @else if $mixin-str == '
|
|
684
|
-
@include
|
|
685
|
-
} @else if $mixin-str == '
|
|
686
|
-
@include
|
|
717
|
+
} @else if $mixin-str == 'flow-in-row' {
|
|
718
|
+
@include flow-in-row;
|
|
719
|
+
} @else if $mixin-str == 'flow-in-col' {
|
|
720
|
+
@include flow-in-col;
|
|
721
|
+
} @else if $mixin-str == 'flow-dense-items' {
|
|
722
|
+
@include flow-dense-items;
|
|
687
723
|
} @else if $mixin-str == 'd-none' {
|
|
688
724
|
@include d-none;
|
|
689
725
|
} @else if $mixin-str == 'd-block' {
|
|
@@ -820,31 +856,36 @@
|
|
|
820
856
|
@include no-underline;
|
|
821
857
|
} @else if $mixin-str == 'truncate' {
|
|
822
858
|
@include truncate;
|
|
859
|
+
} @else if str.index($mixin-str, 'container(') == 1 {
|
|
860
|
+
$start: str.index($mixin-str, '(') + 1;
|
|
861
|
+
$end: str.length($mixin-str) - 1;
|
|
862
|
+
$value: str.slice($mixin-str, $start, $end);
|
|
863
|
+
@include container(str.unquote($value));
|
|
823
864
|
} @else if str.index($mixin-str, 'w-col(') == 1 {
|
|
824
865
|
$start: str.index($mixin-str, '(') + 1;
|
|
825
866
|
$end: str.length($mixin-str) - 1;
|
|
826
867
|
$value: str.slice($mixin-str, $start, $end);
|
|
827
868
|
@include w-col(str.unquote($value));
|
|
828
|
-
} @else if str.index($mixin-str, '
|
|
869
|
+
} @else if str.index($mixin-str, 'cols(') == 1 {
|
|
829
870
|
$start: str.index($mixin-str, '(') + 1;
|
|
830
871
|
$end: str.length($mixin-str) - 1;
|
|
831
872
|
$value: str.slice($mixin-str, $start, $end);
|
|
832
|
-
@include
|
|
833
|
-
} @else if str.index($mixin-str, '
|
|
873
|
+
@include cols(str.unquote($value));
|
|
874
|
+
} @else if str.index($mixin-str, 'rows(') == 1 {
|
|
834
875
|
$start: str.index($mixin-str, '(') + 1;
|
|
835
876
|
$end: str.length($mixin-str) - 1;
|
|
836
877
|
$value: str.slice($mixin-str, $start, $end);
|
|
837
|
-
@include
|
|
838
|
-
} @else if str.index($mixin-str, '
|
|
878
|
+
@include rows(str.unquote($value));
|
|
879
|
+
} @else if str.index($mixin-str, 'auto-fit(') == 1 {
|
|
839
880
|
$start: str.index($mixin-str, '(') + 1;
|
|
840
881
|
$end: str.length($mixin-str) - 1;
|
|
841
882
|
$value: str.slice($mixin-str, $start, $end);
|
|
842
|
-
@include
|
|
843
|
-
} @else if str.index($mixin-str, '
|
|
883
|
+
@include auto-fit(str.unquote($value));
|
|
884
|
+
} @else if str.index($mixin-str, 'auto-fill(') == 1 {
|
|
844
885
|
$start: str.index($mixin-str, '(') + 1;
|
|
845
886
|
$end: str.length($mixin-str) - 1;
|
|
846
887
|
$value: str.slice($mixin-str, $start, $end);
|
|
847
|
-
@include
|
|
888
|
+
@include auto-fill(str.unquote($value));
|
|
848
889
|
} @else if str.index($mixin-str, 'justify-items(') == 1 {
|
|
849
890
|
$start: str.index($mixin-str, '(') + 1;
|
|
850
891
|
$end: str.length($mixin-str) - 1;
|
|
@@ -860,16 +901,16 @@
|
|
|
860
901
|
$end: str.length($mixin-str) - 1;
|
|
861
902
|
$value: str.slice($mixin-str, $start, $end);
|
|
862
903
|
@include place-items(str.unquote($value));
|
|
863
|
-
} @else if str.index($mixin-str, 'col
|
|
904
|
+
} @else if str.index($mixin-str, 'span-col(') == 1 {
|
|
864
905
|
$start: str.index($mixin-str, '(') + 1;
|
|
865
906
|
$end: str.length($mixin-str) - 1;
|
|
866
907
|
$value: str.slice($mixin-str, $start, $end);
|
|
867
|
-
@include col
|
|
868
|
-
} @else if str.index($mixin-str, 'row
|
|
908
|
+
@include span-col(str.unquote($value));
|
|
909
|
+
} @else if str.index($mixin-str, 'span-row(') == 1 {
|
|
869
910
|
$start: str.index($mixin-str, '(') + 1;
|
|
870
911
|
$end: str.length($mixin-str) - 1;
|
|
871
912
|
$value: str.slice($mixin-str, $start, $end);
|
|
872
|
-
@include row
|
|
913
|
+
@include span-row(str.unquote($value));
|
|
873
914
|
} @else if str.index($mixin-str, 'col-start(') == 1 {
|
|
874
915
|
$start: str.index($mixin-str, '(') + 1;
|
|
875
916
|
$end: str.length($mixin-str) - 1;
|
|
@@ -890,6 +931,21 @@
|
|
|
890
931
|
$end: str.length($mixin-str) - 1;
|
|
891
932
|
$value: str.slice($mixin-str, $start, $end);
|
|
892
933
|
@include row-end(str.unquote($value));
|
|
934
|
+
} @else if str.index($mixin-str, 'grid-position(') == 1 {
|
|
935
|
+
$start: str.index($mixin-str, '(') + 1;
|
|
936
|
+
$end: str.length($mixin-str) - 1;
|
|
937
|
+
$value: str.slice($mixin-str, $start, $end);
|
|
938
|
+
@include grid-position(str.unquote($value));
|
|
939
|
+
} @else if str.index($mixin-str, 'position-col(') == 1 {
|
|
940
|
+
$start: str.index($mixin-str, '(') + 1;
|
|
941
|
+
$end: str.length($mixin-str) - 1;
|
|
942
|
+
$value: str.slice($mixin-str, $start, $end);
|
|
943
|
+
@include position-col(str.unquote($value));
|
|
944
|
+
} @else if str.index($mixin-str, 'position-row(') == 1 {
|
|
945
|
+
$start: str.index($mixin-str, '(') + 1;
|
|
946
|
+
$end: str.length($mixin-str) - 1;
|
|
947
|
+
$value: str.slice($mixin-str, $start, $end);
|
|
948
|
+
@include position-row(str.unquote($value));
|
|
893
949
|
} @else if str.index($mixin-str, 'generate-bounce-keyframes(') == 1 {
|
|
894
950
|
$start: str.index($mixin-str, '(') + 1;
|
|
895
951
|
$end: str.length($mixin-str) - 1;
|