@nulllogic/scssleon 1.0.4 → 1.0.6

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.
@@ -1,356 +0,0 @@
1
- @use "config";
2
- @use 'sass:map';
3
-
4
- $config: nil !default;
5
- $theme: nil !default;
6
-
7
- // Utilities
8
- // @TODO add grid rules here later
9
-
10
- $utilities: () !default;
11
-
12
- $utilities: map.merge((
13
-
14
- "display" : (
15
- responsive: false,
16
- property: 'display',
17
- values: (
18
- block: block,
19
- inline-block: inline-block,
20
- inline: inline,
21
- flex: flex,
22
- inline-flex: inline-flex,
23
- table: table,
24
- inline-table: inline-table,
25
- table-caption: table-caption,
26
- table-cell: table-cell,
27
- table-column: table-column,
28
- table-column-group: table-column-group,
29
- table-footer-group: table-footer-group,
30
- table-header-group: table-header-group,
31
- table-row-group: table-row-group,
32
- table-row: table-row,
33
- flow-root: flow-root,
34
- grid: grid,
35
- inline-grid: inline-grid,
36
- contents: contents,
37
- list-item: list-item,
38
- hidden: hidden
39
- ),
40
- ),
41
-
42
- // Flex
43
- "flex": (
44
- responsive: false,
45
- property: "flex",
46
- values: (
47
- flex-initial: 0 1 auto,
48
- flex-1: 1 1 0%,
49
- flex-auto: 1 1 auto,
50
- flex-none: none
51
- ),
52
- ),
53
-
54
- "flex-direction" : (
55
- responsive: false,
56
- property: "flex-direction",
57
- values: (
58
- flex-row: row,
59
- flex-row-reverse: row-reverse,
60
- flex-col: column,
61
- flex-col-reverse: column-reverse
62
- ),
63
- ),
64
-
65
- "flex-grow" : (
66
- responsive: false,
67
- property: "flex-grow",
68
- values: (
69
- grow: 1,
70
- grow-0: 0
71
- )
72
- ),
73
-
74
- "flex-shrink" : (
75
- responsive: false,
76
- property: "flex-shrink",
77
- values : (
78
- shrink : 1,
79
- shrink-0 : 0
80
- )
81
- ),
82
-
83
- "flex-wrap" : (
84
- responsive: false,
85
- property: "flex-wrap",
86
- values : (
87
- flex-wrap : flex-wrap,
88
- flex-wrap-reverse: flex-wrap-reverse,
89
- flex-nowrap: flex-nowrap
90
- )
91
- ),
92
-
93
- "order" : (
94
- responsive: false,
95
- property: "order",
96
- values : (
97
- order-none: 0,
98
- order-first: -9999,
99
- order-1: 1,
100
- order-2: 2,
101
- order-3: 3,
102
- order-4: 4,
103
- order-5: 5,
104
- order-6: 6,
105
- order-last: 9999,
106
- )
107
- ),
108
-
109
- "align-items" : (
110
- responsive: false,
111
- property: "align-items",
112
- values: (
113
- align-items-start: flex-start,
114
- align-items-end: flex-end,
115
- align-items-center: center,
116
- align-items-baseline: baseline,
117
- align-items-stretch: stretch
118
- )
119
- ),
120
-
121
- "align-content" : (
122
- responsive: false,
123
- property: "align-content",
124
- values: (
125
- align-content-center: center,
126
- align-content-start: flex-start,
127
- align-content-end: flex-end,
128
- align-content-between: space-between,
129
- align-content-around: space-around,
130
- align-content-evenly: space-evenly
131
- ),
132
- ),
133
-
134
- "align-self" : (
135
- responsive: false,
136
- property: "align-self",
137
- values: (
138
- align-self-start : flex-start,
139
- align-self-end: flex-end,
140
- align-self-center: center,
141
- align-self-stretch: stretch,
142
- align-self-baseline: baseline
143
- )
144
- ),
145
-
146
- "justify-content": (
147
- responsive: false,
148
- property: "justify-content",
149
- values: (
150
- justify-content-start: flex-start,
151
- justify-content-end: flex-end,
152
- justify-content-center: center,
153
- justify-content-between: space-between,
154
- justify-content-around: space-around,
155
- justify-content-evenly: space-evenly,
156
- justify-content-stretch: stretch
157
- )
158
- ),
159
-
160
- "justify-items" : (
161
- responsive: false,
162
- property: "justify-items",
163
- values: (
164
- justify-items-start: start,
165
- justify-items-end: end,
166
- justify-items-center: center,
167
- justify-items-stretch: stretch
168
- )
169
- ),
170
-
171
- "justify-self" : (
172
- responsive: false,
173
- property: "justify-self",
174
- values: (
175
- justify-self-start: start,
176
- justify-self-end: end,
177
- justify-self-center: center,
178
- justify-self-stretch: stretch
179
- )
180
- ),
181
-
182
- "vertical-align" : (
183
- responsive: false,
184
- property: "vertical-align",
185
- values: (
186
- align-baseline: baseline,
187
- align-top: top,
188
- align-middle: middle,
189
- align-bottom: bottom,
190
- align-text-top: text-top,
191
- align-text-bottom: text-bottom,
192
- align-sub: sub,
193
- align-super: super
194
- )
195
- ),
196
-
197
- "float" : (
198
- responsive: false,
199
- property: "float",
200
- values: (
201
- float-left: left,
202
- float-right: right,
203
- float-none: none,
204
- )
205
- ),
206
-
207
- "overflow" : (
208
- responsive: false,
209
- property: "overflow",
210
- values: (
211
- overflow-auto: auto, //@TODO check later
212
- overflow-hidden: hidden,
213
- overflow-scroll: scroll,
214
- overflow-visible: visible
215
- )
216
- ),
217
-
218
- "position" : (
219
- responsive: false,
220
- property: "position",
221
- values: (
222
- static: static,
223
- fixed: fixed,
224
- absolute: absolute,
225
- relative : relative,
226
- sticky : sticky
227
- )
228
- ),
229
-
230
- // "width" : (
231
- //
232
- // ),
233
- //
234
- "max-width" : (
235
- responsive: false,
236
- property: "max-width",
237
- values: (
238
- max-w-full : 100%,
239
- max-w-none: none
240
- )
241
- ),
242
-
243
- "min-height" : (
244
- responsive: false,
245
- property: "min-height",
246
- values: (
247
- min-h-0: 0px,
248
- min-h-full: 100%,
249
- min-h-screen: 100vh
250
- )
251
- ),
252
-
253
- "text-align" : (
254
- responsive: false,
255
- property: "text-align",
256
- values: (
257
- "text-left": left,
258
- "text-right" : right,
259
- "text-center" : center
260
- )
261
- ),
262
- //
263
- // "word-wrap" : (
264
- //
265
- // ),
266
- //
267
- "white-space" : (
268
- responsive: false,
269
- property: "white-space",
270
- values: (
271
- white-space-normal : normal,
272
- white-space-nowrap: nowrap,
273
- white-space-brake-spaces: break-spaces
274
- )
275
- ),
276
-
277
- "user-select" : (
278
- responsive: false,
279
- property: "user-select",
280
- values: (
281
- select-none: none,
282
- select-text: text,
283
- select-all: all,
284
- select-auto: auto
285
- )
286
- ),
287
-
288
- "visibility" : (
289
- responsive: false,
290
- property: "visibility",
291
- values: (
292
- visible: visible,
293
- invisible: invisible,
294
- collapse: collapse,
295
- )
296
- ),
297
-
298
- "grid-rows" : (
299
- responsive: false,
300
- property: "grid-template-rows",
301
- values : (
302
- grid-rows-1 : repeat(1, minmax(0, 1fr)),
303
- grid-rows-2 : repeat(2, minmax(0, 1fr)),
304
- grid-rows-3 : repeat(3, minmax(0, 1fr)),
305
- grid-rows-4 : repeat(4, minmax(0, 1fr)),
306
- grid-rows-5 : repeat(5, minmax(0, 1fr)),
307
- grid-rows-6 : repeat(6, minmax(0, 1fr)),
308
- grid-rows-none : none
309
- )
310
- ),
311
-
312
- "grid-auto-flow" : (
313
- responsive: false,
314
- property: "grid-auto-flow",
315
- values: (
316
- grid-flow-row : row,
317
- grid-flow-col : column,
318
- grid-flow-dense : dense,
319
- grid-flow-row-dense : row dense,
320
- grid-flow-col-dense : column dense
321
- )
322
- ),
323
-
324
- "grid-auto-columns" : (
325
- responsive: false,
326
- property: "grid-auto-columns",
327
- values: (
328
- auto-cols-auto : auto,
329
- auto-cols-min : min-content,
330
- auto-cols-max : max-content,
331
- auto-cols-fr : minmax(0, 1fr)
332
- )
333
- ),
334
-
335
- "grid-auto-rows" : (
336
- responsive: false,
337
- property: "grid-auto-rows",
338
- values : (
339
- auto-rows-auto : auto,
340
- auto-rows-min : min-content,
341
- auto-rows-max: max-content,
342
- auto-rows-fr: minmax(0, 1fr)
343
- )
344
- ),
345
-
346
- "column-gap" : (
347
- responsive: false,
348
- property: "column-gap",
349
- values: (
350
- gap-x-1 : .25rem,
351
- gap-x-2 : .5rem,
352
- gap-x-3 : .75rem
353
- )
354
- )
355
-
356
- ), $utilities)
@@ -1,12 +0,0 @@
1
- @keyframes placeholder-glow {
2
- 50% {
3
- opacity: 0.5;
4
- }
5
- }
6
-
7
- @keyframes placeholder-wave {
8
- 100% {
9
- mask-position: -200% 0;
10
- -webkit-mask-position: -200% 0;
11
- }
12
- }
@@ -1,5 +0,0 @@
1
- @use '../mixins' as mixins;
2
-
3
- .clearfix {
4
- @include mixins.clearfix();
5
- }
@@ -1,11 +0,0 @@
1
- .sr {
2
- position: absolute;
3
- width: 1px;
4
- height: 1px;
5
- padding: 0;
6
- margin: -1px;
7
- overflow: hidden;
8
- clip: rect(0, 0, 0, 0);
9
- white-space: nowrap;
10
- border-width: 0;
11
- }
@@ -1,5 +0,0 @@
1
- .text-truncate {
2
- overflow: hidden;
3
- text-overflow: ellipsis;
4
- white-space: nowrap;
5
- }
@@ -1,3 +0,0 @@
1
- @mixin border-radius($radius) {
2
- border-radius: $radius;
3
- }
@@ -1,16 +0,0 @@
1
- @mixin box-shadow($shadow...) {
2
- $result: ();
3
-
4
- @each $value in $shadow {
5
- @if $value != null {
6
- $result: append($result, $value, "comma");
7
- }
8
- @if $value == none and length($shadow) > 1 {
9
- @warn "The keyword 'none' must be used as a single argument.";
10
- }
11
- }
12
-
13
- @if (length($result) > 0) {
14
- box-shadow: $result;
15
- }
16
- }
@@ -1,9 +0,0 @@
1
- // scss-docs-start clearfix
2
- @mixin clearfix() {
3
- &::after {
4
- display: block;
5
- clear: both;
6
- content: "";
7
- }
8
- }
9
- // scss-docs-end clearfix
@@ -1,152 +0,0 @@
1
- // This mixin uses an `if()` technique to be compatible with Dart Sass
2
- // See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details
3
-
4
- // scss-docs-start form-validation-mixins
5
- @mixin form-validation-state-selector($state) {
6
- @if ($state == "valid" or $state == "invalid") {
7
- .was-validated #{if(&, "&", "")}:#{$state},
8
- #{if(&, "&", "")}.is-#{$state} {
9
- @content;
10
- }
11
- } @else {
12
- #{if(&, "&", "")}.is-#{$state} {
13
- @content;
14
- }
15
- }
16
- }
17
-
18
- @mixin form-validation-state(
19
- $state,
20
- $color,
21
- $icon,
22
- $tooltip-color: color-contrast($color),
23
- $tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
24
- $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity)
25
- ) {
26
- .#{$state}-feedback {
27
- display: none;
28
- width: 100%;
29
- margin-top: $form-feedback-margin-top;
30
- font-size : $form-feedback-font-size;
31
- font-style: $form-feedback-font-style;
32
- color: $color;
33
- }
34
-
35
- .#{$state}-tooltip {
36
- position: absolute;
37
- top: 100%;
38
- z-index: 5;
39
- display: none;
40
- max-width: 100%; // Contain to parent when possible
41
- padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
42
- margin-top: .1rem;
43
- font-size : $form-feedback-tooltip-font-size;
44
- line-height: $form-feedback-tooltip-line-height;
45
- color: $tooltip-color;
46
- background-color: $tooltip-bg-color;
47
- @include border-radius($form-feedback-tooltip-border-radius);
48
- }
49
-
50
- @include form-validation-state-selector($state) {
51
- ~ .#{$state}-feedback,
52
- ~ .#{$state}-tooltip {
53
- display: block;
54
- }
55
- }
56
-
57
- .form-control {
58
- @include form-validation-state-selector($state) {
59
- border-color: $color;
60
-
61
- @if $enable-validation-icons {
62
- padding-right: $input-height-inner;
63
- background-image: escape-svg($icon);
64
- background-repeat: no-repeat;
65
- background-position: right $input-height-inner-quarter center;
66
- background-size: $input-height-inner-half $input-height-inner-half;
67
- }
68
-
69
- &:focus {
70
- border-color: $color;
71
- box-shadow: $focus-box-shadow;
72
- }
73
- }
74
- }
75
-
76
- // stylelint-disable-next-line selector-no-qualifying-type
77
- textarea.form-control {
78
- @include form-validation-state-selector($state) {
79
- @if $enable-validation-icons {
80
- padding-right: $input-height-inner;
81
- background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
82
- }
83
- }
84
- }
85
-
86
- .form-select {
87
- @include form-validation-state-selector($state) {
88
- border-color: $color;
89
-
90
- @if $enable-validation-icons {
91
- &:not([multiple]):not([size]),
92
- &:not([multiple])[size="1"] {
93
- padding-right: $form-select-feedback-icon-padding-end;
94
- background-image: escape-svg($form-select-indicator), escape-svg($icon);
95
- background-position: $form-select-bg-position, $form-select-feedback-icon-position;
96
- background-size: $form-select-bg-size, $form-select-feedback-icon-size;
97
- }
98
- }
99
-
100
- &:focus {
101
- border-color: $color;
102
- box-shadow: $focus-box-shadow;
103
- }
104
- }
105
- }
106
-
107
- .form-control-color {
108
- @include form-validation-state-selector($state) {
109
- @if $enable-validation-icons {
110
- width: add($form-color-width, $input-height-inner);
111
- }
112
- }
113
- }
114
-
115
- .form-check-input {
116
- @include form-validation-state-selector($state) {
117
- border-color: $color;
118
-
119
- &:checked {
120
- background-color: $color;
121
- }
122
-
123
- &:focus {
124
- box-shadow: $focus-box-shadow;
125
- }
126
-
127
- ~ .form-check-label {
128
- color: $color;
129
- }
130
- }
131
- }
132
- .form-check-inline .form-check-input {
133
- ~ .#{$state}-feedback {
134
- margin-left: .5em;
135
- }
136
- }
137
-
138
- .input-group .form-control,
139
- .input-group .form-select {
140
- @include form-validation-state-selector($state) {
141
- @if $state == "valid" {
142
- z-index: 1;
143
- } @else if $state == "invalid" {
144
- z-index: 2;
145
- }
146
- &:focus {
147
- z-index: 3;
148
- }
149
- }
150
- }
151
- }
152
- // scss-docs-end form-validation-mixins
@@ -1,6 +0,0 @@
1
- // Gradients
2
- // scss-docs-start gradient-bg-mixin
3
- @mixin gradient-bg($color: null) {
4
- background-color: $color;
5
- }
6
- // scss-docs-end gradient-bg-mixin
@@ -1,93 +0,0 @@
1
-
2
- @use 'sass:map';
3
- @use "sass:meta";
4
-
5
- @use '../config';
6
- @use './breakpoints' as mixins;
7
- @use '../functions' as functions;
8
-
9
- // Row columns
10
- @function divide($dividend, $divisor, $precision: 10) {
11
-
12
- $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
13
- $dividend: abs($dividend);
14
- $divisor: abs($divisor);
15
-
16
- @if $dividend == 0 {
17
- @return 0;
18
- }
19
-
20
- @if $divisor == 0 {
21
- @error "Cannot divide by 0";
22
- }
23
-
24
- $remainder: $dividend;
25
- $result: 0;
26
- $factor: 10;
27
-
28
- @while ($remainder > 0 and $precision >= 0) {
29
- $quotient: 0;
30
-
31
- @while ($remainder >= $divisor) {
32
- $remainder: $remainder - $divisor;
33
- $quotient: $quotient + 1;
34
- }
35
-
36
- $result: $result * 10 + $quotient;
37
- $factor: $factor * .1;
38
- $remainder: $remainder * 10;
39
- $precision: $precision - 1;
40
-
41
- @if ($precision < 0 and $remainder >= $divisor * 5) {
42
- $result: $result + 1;
43
- }
44
-
45
- }
46
- $result: $result * $factor * $sign;
47
-
48
- @return $result;
49
- }
50
-
51
- @mixin generate_columns($size: false, $columns) {
52
-
53
- @if $size {
54
- flex: 0 0 auto;
55
- width: percentage(divide($size, $columns));
56
-
57
- } @else {
58
- flex: 1 1 0;
59
- max-width: 100%;
60
- }
61
-
62
- }
63
-
64
- // Framework grid generation
65
- @mixin generate_grid_columns($columns, $breakpoints) {
66
-
67
- @each $breakpoint in map-keys($breakpoints) {
68
- $infix: mixins.breakpoint-infix($breakpoint, $breakpoints);
69
-
70
- @include mixins.media-breakpoint-up($breakpoint, $breakpoints) {
71
-
72
- .col#{$infix} {
73
- flex: 1 0 0;
74
- }
75
-
76
- .col#{$infix}-auto {
77
- flex: 0 0 auto;
78
- width: auto;
79
- }
80
-
81
- @if $columns > 0 {
82
- @for $i from 1 through $columns {
83
- .col#{$infix}-#{$i} {
84
- @include generate_columns($i, $columns);
85
- }
86
- }
87
-
88
- }
89
-
90
- }
91
- }
92
-
93
- }
@@ -1,30 +0,0 @@
1
- @mixin transition($transition...) {
2
- @if length($transition) == 0 {
3
- $transition: config.$transition-base;
4
- }
5
-
6
- @if length($transition) > 1 {
7
- @each $value in $transition {
8
- @if $value == null or $value == none {
9
- @warn "The keyword 'none' or 'null' must be used as a single argument.";
10
- }
11
- }
12
- }
13
-
14
- @if config.$enable-transitions {
15
- @if nth($transition, 1) != null {
16
- transition: $transition;
17
- }
18
-
19
- @if config.$enable-reduced-motion and
20
- nth($transition, 1) !=
21
- null and
22
- nth($transition, 1) !=
23
- none
24
- {
25
- @media (prefers-reduced-motion: reduce) {
26
- transition: none;
27
- }
28
- }
29
- }
30
- }