@oardi/css-utils 0.47.0 → 0.48.0

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.
Files changed (29) hide show
  1. package/package.json +1 -1
  2. package/scss/borders.scss +24 -19
  3. package/scss/components/breadcrumb.scss +27 -25
  4. package/scss/components/button.scss +146 -140
  5. package/scss/components/card.scss +49 -47
  6. package/scss/components/chip.scss +81 -79
  7. package/scss/components/drawer.scss +30 -28
  8. package/scss/components/expansion-panel.scss +93 -91
  9. package/scss/components/form.scss +164 -146
  10. package/scss/components/icon-button.scss +112 -110
  11. package/scss/components/list.scss +57 -55
  12. package/scss/components/navbar.scss +24 -22
  13. package/scss/components/overlay.scss +9 -7
  14. package/scss/components/table.scss +35 -33
  15. package/scss/components/tabs.scss +54 -51
  16. package/scss/components/toast.scss +19 -17
  17. package/scss/components/tooltip.scss +54 -52
  18. package/scss/flex-responsive.scss +77 -75
  19. package/scss/flex.scss +127 -125
  20. package/scss/grid-responsive.scss +7 -5
  21. package/scss/grid.scss +14 -12
  22. package/scss/index.scss +2 -1
  23. package/scss/reboot.scss +110 -108
  24. package/scss/spacings-responsive.scss +12 -10
  25. package/scss/spacings.scss +33 -28
  26. package/scss/text.scss +69 -39
  27. package/scss/typography.scss +92 -125
  28. package/scss/utilities.scss +44 -35
  29. package/scss/variables.scss +70 -68
package/scss/flex-responsive.scss CHANGED
@@ -1,104 +1,106 @@
1
1
  @use 'sass:map';
2
2
  @use './theme.scss';
3
3
 
4
- @each $bp, $bp-value in map.get(theme.$theme, breakpoints) {
5
- @media (min-width: #{$bp-value}) {
6
- @each $key, $value in map.get(theme.$theme, spacings) {
7
- .gap-#{$bp}-#{$key} {
8
- gap: $value !important;
4
+ @layer utilities {
5
+ @each $bp, $bp-value in map.get(theme.$theme, breakpoints) {
6
+ @media (min-width: #{$bp-value}) {
7
+ @each $key, $value in map.get(theme.$theme, spacings) {
8
+ .gap-#{$bp}-#{$key} {
9
+ gap: $value;
10
+ }
11
+
12
+ .row-gap-#{$bp}-#{$key} {
13
+ row-gap: $value;
14
+ }
15
+
16
+ .column-gap-#{$bp}-#{$key} {
17
+ column-gap: $value;
18
+ }
9
19
  }
10
20
 
11
- .row-gap-#{$bp}-#{$key} {
12
- row-gap: $value !important;
21
+ // basic
22
+ .d-#{$bp}-flex {
23
+ display: flex;
13
24
  }
14
25
 
15
- .column-gap-#{$bp}-#{$key} {
16
- column-gap: $value !important;
26
+ .d-#{$bp}-inline-flex {
27
+ display: inline-flex;
17
28
  }
18
- }
19
-
20
- // basic
21
- .d-#{$bp}-flex {
22
- display: flex !important;
23
- }
24
-
25
- .d-#{$bp}-inline-flex {
26
- display: inline-flex !important;
27
- }
28
29
 
29
- // directions
30
- .flex-#{$bp}-row {
31
- flex-direction: row !important;
32
- }
30
+ // directions
31
+ .flex-#{$bp}-row {
32
+ flex-direction: row;
33
+ }
33
34
 
34
- .flex-#{$bp}-column {
35
- flex-direction: column !important;
36
- }
35
+ .flex-#{$bp}-column {
36
+ flex-direction: column;
37
+ }
37
38
 
38
- .flex-#{$bp}-row-reverse {
39
- flex-direction: row-reverse !important;
40
- }
39
+ .flex-#{$bp}-row-reverse {
40
+ flex-direction: row-reverse;
41
+ }
41
42
 
42
- .flex-#{$bp}-column-reverse {
43
- flex-direction: column-reverse !important;
44
- }
43
+ .flex-#{$bp}-column-reverse {
44
+ flex-direction: column-reverse;
45
+ }
45
46
 
46
- // justify content - start, end, center, between, around, evenly
47
- .justify-content-#{$bp}-start {
48
- justify-content: start !important;
49
- }
47
+ // justify content - start, end, center, between, around, evenly
48
+ .justify-content-#{$bp}-start {
49
+ justify-content: start;
50
+ }
50
51
 
51
- .justify-content-#{$bp}-end {
52
- justify-content: end !important;
53
- }
52
+ .justify-content-#{$bp}-end {
53
+ justify-content: end;
54
+ }
54
55
 
55
- .justify-content-#{$bp}-center {
56
- justify-content: center !important;
57
- }
56
+ .justify-content-#{$bp}-center {
57
+ justify-content: center;
58
+ }
58
59
 
59
- .justify-content-#{$bp}-between {
60
- justify-content: space-between !important;
61
- }
60
+ .justify-content-#{$bp}-between {
61
+ justify-content: space-between;
62
+ }
62
63
 
63
- .justify-content-#{$bp}-around {
64
- justify-content: space-around !important;
65
- }
64
+ .justify-content-#{$bp}-around {
65
+ justify-content: space-around;
66
+ }
66
67
 
67
- .justify-content-#{$bp}-evenly {
68
- justify-content: space-evenly !important;
69
- }
68
+ .justify-content-#{$bp}-evenly {
69
+ justify-content: space-evenly;
70
+ }
70
71
 
71
- // align items - start, end, center, baseline, or stretch
72
- .align-items-#{$bp}-start {
73
- align-items: start !important;
74
- }
72
+ // align items - start, end, center, baseline, or stretch
73
+ .align-items-#{$bp}-start {
74
+ align-items: start;
75
+ }
75
76
 
76
- .align-items-#{$bp}-end {
77
- align-items: end !important;
78
- }
77
+ .align-items-#{$bp}-end {
78
+ align-items: end;
79
+ }
79
80
 
80
- .align-items-#{$bp}-center {
81
- align-items: center !important;
82
- }
81
+ .align-items-#{$bp}-center {
82
+ align-items: center;
83
+ }
83
84
 
84
- .align-items-#{$bp}-baseline {
85
- align-items: baseline !important;
86
- }
85
+ .align-items-#{$bp}-baseline {
86
+ align-items: baseline;
87
+ }
87
88
 
88
- .align-items-#{$bp}-stretch {
89
- align-items: stretch !important;
90
- }
89
+ .align-items-#{$bp}-stretch {
90
+ align-items: stretch;
91
+ }
91
92
 
92
- // align self
93
- // TODO
93
+ // align self
94
+ // TODO
94
95
 
95
- // fill
96
- // TODO
96
+ // fill
97
+ // TODO
97
98
 
98
- // grow
99
- // TODO
99
+ // grow
100
+ // TODO
100
101
 
101
- // shrink
102
- // TODO
102
+ // shrink
103
+ // TODO
104
+ }
103
105
  }
104
106
  }
package/scss/flex.scss CHANGED
@@ -1,166 +1,168 @@
1
1
  @use 'sass:map';
2
2
  @use './theme.scss' as theme;
3
3
 
4
- // TODO - use the following to iterate
5
- $flex-directions: (row, row-reverse, column, column-reverse);
6
- $flex-ratios: (0, 1);
7
- $flex-justify-content-alignments: (start, end, center, between, around, evenly);
8
- $flex-align-items-alignments: (start, end, center, between, around, evenly);
9
-
10
- // basic
11
- .d-flex {
12
- display: flex;
13
- }
4
+ @layer utilities {
5
+ // TODO - use the following to iterate
6
+ $flex-directions: (row, row-reverse, column, column-reverse);
7
+ $flex-ratios: (0, 1);
8
+ $flex-justify-content-alignments: (start, end, center, between, around, evenly);
9
+ $flex-align-items-alignments: (start, end, center, between, around, evenly);
10
+
11
+ // basic
12
+ .d-flex {
13
+ display: flex;
14
+ }
14
15
 
15
- .d-inline-flex {
16
- display: inline-flex;
17
- }
16
+ .d-inline-flex {
17
+ display: inline-flex;
18
+ }
18
19
 
19
- // directions
20
- .flex-row {
21
- flex-direction: row;
22
- }
20
+ // directions
21
+ .flex-row {
22
+ flex-direction: row;
23
+ }
23
24
 
24
- .flex-row-reverse {
25
- flex-direction: row-reverse;
26
- }
25
+ .flex-row-reverse {
26
+ flex-direction: row-reverse;
27
+ }
27
28
 
28
- .flex-column {
29
- flex-direction: column;
30
- }
29
+ .flex-column {
30
+ flex-direction: column;
31
+ }
31
32
 
32
- .flex-column-reverse {
33
- flex-direction: column-reverse;
34
- }
33
+ .flex-column-reverse {
34
+ flex-direction: column-reverse;
35
+ }
35
36
 
36
- // justify content - start, end, center, between, around or evenly
37
- .justify-content-start {
38
- justify-content: start;
39
- }
37
+ // justify content - start, end, center, between, around or evenly
38
+ .justify-content-start {
39
+ justify-content: start;
40
+ }
40
41
 
41
- .justify-content-end {
42
- justify-content: end;
43
- }
42
+ .justify-content-end {
43
+ justify-content: end;
44
+ }
44
45
 
45
- .justify-content-center {
46
- justify-content: center;
47
- }
46
+ .justify-content-center {
47
+ justify-content: center;
48
+ }
48
49
 
49
- .justify-content-between {
50
- justify-content: space-between;
51
- }
50
+ .justify-content-between {
51
+ justify-content: space-between;
52
+ }
52
53
 
53
- .justify-content-around {
54
- justify-content: space-around;
55
- }
54
+ .justify-content-around {
55
+ justify-content: space-around;
56
+ }
56
57
 
57
- .justify-content-evenly {
58
- justify-content: space-evenly;
59
- }
58
+ .justify-content-evenly {
59
+ justify-content: space-evenly;
60
+ }
60
61
 
61
- // align items - start, end, center, baseline, or stretch
62
- .align-items-start {
63
- align-items: start;
64
- }
62
+ // align items - start, end, center, baseline, or stretch
63
+ .align-items-start {
64
+ align-items: start;
65
+ }
65
66
 
66
- .align-items-end {
67
- align-items: end;
68
- }
67
+ .align-items-end {
68
+ align-items: end;
69
+ }
69
70
 
70
- .align-items-center {
71
- align-items: center;
72
- }
71
+ .align-items-center {
72
+ align-items: center;
73
+ }
73
74
 
74
- .align-items-baseline {
75
- align-items: baseline;
76
- }
75
+ .align-items-baseline {
76
+ align-items: baseline;
77
+ }
77
78
 
78
- .align-items-stretch {
79
- align-items: stretch;
80
- }
79
+ .align-items-stretch {
80
+ align-items: stretch;
81
+ }
81
82
 
82
- // align self
83
- // TODO
83
+ // align self
84
+ // TODO
84
85
 
85
- // fill
86
- .flex-fill {
87
- flex: 1 1 auto;
88
- }
86
+ // fill
87
+ .flex-fill {
88
+ flex: 1 1 auto;
89
+ }
89
90
 
90
- // grow
91
- .flex-grow-0 {
92
- flex-grow: 0;
93
- }
91
+ // grow
92
+ .flex-grow-0 {
93
+ flex-grow: 0;
94
+ }
94
95
 
95
- .flex-grow-1 {
96
- flex-grow: 1;
97
- }
96
+ .flex-grow-1 {
97
+ flex-grow: 1;
98
+ }
98
99
 
99
- // shrink
100
- .flex-shrink-0 {
101
- flex-shrink: 0;
102
- }
100
+ // shrink
101
+ .flex-shrink-0 {
102
+ flex-shrink: 0;
103
+ }
103
104
 
104
- .flex-shrink-1 {
105
- flex-shrink: 1;
106
- }
105
+ .flex-shrink-1 {
106
+ flex-shrink: 1;
107
+ }
107
108
 
108
- // wrap
109
- .flex-wrap {
110
- flex-wrap: wrap;
111
- }
109
+ // wrap
110
+ .flex-wrap {
111
+ flex-wrap: wrap;
112
+ }
112
113
 
113
- .flex-nowrap {
114
- flex-wrap: nowrap;
115
- }
114
+ .flex-nowrap {
115
+ flex-wrap: nowrap;
116
+ }
116
117
 
117
- // order
118
- .order-0 {
119
- order: 0;
120
- }
118
+ // order
119
+ .order-0 {
120
+ order: 0;
121
+ }
121
122
 
122
- .order-1 {
123
- order: 1;
124
- }
123
+ .order-1 {
124
+ order: 1;
125
+ }
125
126
 
126
- .order-2 {
127
- order: 2;
128
- }
127
+ .order-2 {
128
+ order: 2;
129
+ }
129
130
 
130
- .order-3 {
131
- order: 3;
132
- }
131
+ .order-3 {
132
+ order: 3;
133
+ }
133
134
 
134
- .order-4 {
135
- order: 4;
136
- }
135
+ .order-4 {
136
+ order: 4;
137
+ }
137
138
 
138
- .order-5 {
139
- order: 5;
140
- }
139
+ .order-5 {
140
+ order: 5;
141
+ }
141
142
 
142
- .order-first {
143
- order: -1;
144
- }
143
+ .order-first {
144
+ order: -1;
145
+ }
145
146
 
146
- .order-last {
147
- order: 6;
148
- }
147
+ .order-last {
148
+ order: 6;
149
+ }
149
150
 
150
- // align-content
151
- // TODO
151
+ // align-content
152
+ // TODO
152
153
 
153
- // gap - move to own file?
154
- @each $key, $value in map.get(theme.$theme, spacings) {
155
- .gap-#{$key} {
156
- gap: $value !important;
157
- }
154
+ // gap - move to own file?
155
+ @each $key, $value in map.get(theme.$theme, spacings) {
156
+ .gap-#{$key} {
157
+ gap: $value;
158
+ }
158
159
 
159
- .row-gap-#{$key} {
160
- row-gap: $value !important;
161
- }
160
+ .row-gap-#{$key} {
161
+ row-gap: $value;
162
+ }
162
163
 
163
- .column-gap-#{$key} {
164
- column-gap: $value !important;
164
+ .column-gap-#{$key} {
165
+ column-gap: $value;
166
+ }
165
167
  }
166
168
  }
package/scss/grid-responsive.scss CHANGED
@@ -3,11 +3,13 @@
3
3
 
4
4
  // grid responsive
5
5
 
6
- @each $bp, $bp-value in map.get(theme.$theme, breakpoints) {
7
- @media (min-width: #{$bp-value}) {
8
- @for $i from 1 through 12 {
9
- .col-#{$bp}-#{$i} {
10
- grid-column: span $i !important;
6
+ @layer utilities {
7
+ @each $bp, $bp-value in map.get(theme.$theme, breakpoints) {
8
+ @media (min-width: #{$bp-value}) {
9
+ @for $i from 1 through 12 {
10
+ .col-#{$bp}-#{$i} {
11
+ grid-column: span $i;
12
+ }
11
13
  }
12
14
  }
13
15
  }
package/scss/grid.scss CHANGED
@@ -1,17 +1,19 @@
1
- .grid {
2
- display: grid;
3
- grid-template-columns: repeat(12, minmax(0, 1fr));
1
+ @layer utilities {
2
+ .grid {
3
+ display: grid;
4
+ grid-template-columns: repeat(12, minmax(0, 1fr));
4
5
 
5
- column-gap: 1rem;
6
- row-gap: 1rem;
7
- }
6
+ column-gap: 1rem;
7
+ row-gap: 1rem;
8
+ }
8
9
 
9
- .col {
10
- grid-column: span 12;
11
- }
10
+ .col {
11
+ grid-column: span 12;
12
+ }
12
13
 
13
- @for $i from 1 through 12 {
14
- .col-#{$i} {
15
- grid-column: span $i;
14
+ @for $i from 1 through 12 {
15
+ .col-#{$i} {
16
+ grid-column: span $i;
17
+ }
16
18
  }
17
19
  }
package/scss/index.scss CHANGED
@@ -1,8 +1,9 @@
1
+ @forward './reboot.scss';
1
2
  @forward './theme.scss';
2
3
  @forward './variables.scss';
3
- @forward './reboot.scss';
4
4
  @forward './typography.scss';
5
5
  @forward './text.scss';
6
+
6
7
  @forward './utilities.scss';
7
8
  @forward './spacings.scss';
8
9
  @forward './spacings-responsive.scss';