@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/reboot.scss CHANGED
@@ -1,133 +1,135 @@
1
- *,
2
- ::after,
3
- ::before {
4
- margin: 0;
5
- padding: 0;
6
- box-sizing: border-box;
7
- }
1
+ @layer reset {
2
+ *,
3
+ ::after,
4
+ ::before {
5
+ margin: 0;
6
+ padding: 0;
7
+ box-sizing: border-box;
8
+ }
8
9
 
9
- html {
10
- font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
11
- line-height: 1.15;
12
- -webkit-text-size-adjust: 100%;
13
- tab-size: 4;
14
- }
10
+ html {
11
+ font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
12
+ line-height: 1.15;
13
+ -webkit-text-size-adjust: 100%;
14
+ tab-size: 4;
15
+ }
15
16
 
16
- body {
17
- margin: 0;
18
- }
17
+ body {
18
+ margin: 0;
19
+ }
19
20
 
20
- b,
21
- strong {
22
- font-weight: bolder;
23
- }
21
+ b,
22
+ strong {
23
+ font-weight: bolder;
24
+ }
24
25
 
25
- code,
26
- kbd,
27
- pre,
28
- samp {
29
- font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
30
- font-size: 1em;
31
- }
26
+ code,
27
+ kbd,
28
+ pre,
29
+ samp {
30
+ font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
31
+ font-size: 1em;
32
+ }
32
33
 
33
- small {
34
- font-size: 80%;
35
- }
34
+ small {
35
+ font-size: 80%;
36
+ }
36
37
 
37
- sub,
38
- sup {
39
- font-size: 75%;
40
- line-height: 0;
41
- position: relative;
42
- vertical-align: baseline;
43
- }
38
+ sub,
39
+ sup {
40
+ font-size: 75%;
41
+ line-height: 0;
42
+ position: relative;
43
+ vertical-align: baseline;
44
+ }
44
45
 
45
- sub {
46
- bottom: -0.25em;
47
- }
46
+ sub {
47
+ bottom: -0.25em;
48
+ }
48
49
 
49
- sup {
50
- top: -0.5em;
51
- }
50
+ sup {
51
+ top: -0.5em;
52
+ }
52
53
 
53
- table {
54
- border-color: currentcolor;
55
- caption-side: bottom;
56
- border-collapse: collapse;
54
+ table {
55
+ border-color: currentcolor;
56
+ caption-side: bottom;
57
+ border-collapse: collapse;
57
58
 
58
- th {
59
- text-align: -webkit-match-parent;
59
+ th {
60
+ text-align: -webkit-match-parent;
61
+ }
60
62
  }
61
- }
62
63
 
63
- tbody,
64
- td,
65
- tfoot,
66
- th,
67
- thead,
68
- tr {
69
- border-color: inherit;
70
- border-style: solid;
71
- border-width: 0;
72
- }
64
+ tbody,
65
+ td,
66
+ tfoot,
67
+ th,
68
+ thead,
69
+ tr {
70
+ border-color: inherit;
71
+ border-style: solid;
72
+ border-width: 0;
73
+ }
73
74
 
74
- button,
75
- input,
76
- optgroup,
77
- select,
78
- textarea {
79
- font-family: inherit;
80
- font-size: 100%;
81
- line-height: 1.15;
82
- margin: 0;
83
- }
75
+ button,
76
+ input,
77
+ optgroup,
78
+ select,
79
+ textarea {
80
+ font-family: inherit;
81
+ font-size: 100%;
82
+ line-height: 1.15;
83
+ margin: 0;
84
+ }
84
85
 
85
- [type='button'],
86
- [type='reset'],
87
- [type='submit'],
88
- button {
89
- -webkit-appearance: button;
90
- appearance: button;
91
- }
86
+ [type='button'],
87
+ [type='reset'],
88
+ [type='submit'],
89
+ button {
90
+ -webkit-appearance: button;
91
+ appearance: button;
92
+ }
92
93
 
93
- legend {
94
- padding: 0;
95
- }
94
+ legend {
95
+ padding: 0;
96
+ }
96
97
 
97
- progress {
98
- vertical-align: baseline;
99
- }
98
+ progress {
99
+ vertical-align: baseline;
100
+ }
100
101
 
101
- ::-webkit-inner-spin-button,
102
- ::-webkit-outer-spin-button {
103
- height: auto;
104
- }
102
+ ::-webkit-inner-spin-button,
103
+ ::-webkit-outer-spin-button {
104
+ height: auto;
105
+ }
105
106
 
106
- [type='search'] {
107
- -webkit-appearance: textfield;
108
- appearance: textfield;
109
- outline-offset: -2px;
110
- }
107
+ [type='search'] {
108
+ -webkit-appearance: textfield;
109
+ appearance: textfield;
110
+ outline-offset: -2px;
111
+ }
111
112
 
112
- ::-webkit-search-decoration {
113
- -webkit-appearance: none;
114
- }
113
+ ::-webkit-search-decoration {
114
+ -webkit-appearance: none;
115
+ }
115
116
 
116
- ::-webkit-file-upload-button {
117
- -webkit-appearance: button;
118
- font: inherit;
119
- }
117
+ ::-webkit-file-upload-button {
118
+ -webkit-appearance: button;
119
+ font: inherit;
120
+ }
120
121
 
121
- summary {
122
- display: list-item;
123
- }
122
+ summary {
123
+ display: list-item;
124
+ }
124
125
 
125
- ul {
126
- padding-left: 1rem;
127
- }
126
+ ul {
127
+ padding-left: 1rem;
128
+ }
128
129
 
129
- @media (prefers-reduced-motion: reduce) {
130
- :root {
131
- --transition-duration: 0ms;
130
+ @media (prefers-reduced-motion: reduce) {
131
+ :root {
132
+ --transition-duration: 0ms;
133
+ }
132
134
  }
133
135
  }
package/scss/spacings-responsive.scss CHANGED
@@ -1,17 +1,19 @@
1
1
  @use 'sass:map';
2
2
  @use './theme.scss';
3
3
 
4
- // margin / padding with breakpoints and directions
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
- @each $dir, $prop in map.get(theme.$theme, directions) {
9
- .m#{$dir}-#{$bp}-#{$key} {
10
- margin-#{$prop}: $value !important;
11
- }
4
+ @layer utilities {
5
+ // margin / padding with breakpoints and directions
6
+ @each $bp, $bp-value in map.get(theme.$theme, breakpoints) {
7
+ @media (min-width: #{$bp-value}) {
8
+ @each $key, $value in map.get(theme.$theme, spacings) {
9
+ @each $dir, $prop in map.get(theme.$theme, directions) {
10
+ .m#{$dir}-#{$bp}-#{$key} {
11
+ margin-#{$prop}: $value;
12
+ }
12
13
 
13
- .p#{$dir}-#{$bp}-#{$key} {
14
- padding-#{$prop}: $value !important;
14
+ .p#{$dir}-#{$bp}-#{$key} {
15
+ padding-#{$prop}: $value;
16
+ }
15
17
  }
16
18
  }
17
19
  }
package/scss/spacings.scss CHANGED
@@ -1,41 +1,46 @@
1
1
  @use 'sass:map';
2
2
  @use './theme.scss';
3
3
 
4
- .ms-auto {
5
- margin-left: auto !important;
6
- }
7
- .me-auto {
8
- margin-right: auto !important;
9
- }
10
- .mt-auto {
11
- margin-top: auto !important;
12
- }
13
- .mb-auto {
14
- margin-bottom: auto !important;
15
- }
4
+ @layer utilities {
5
+ .ms-auto {
6
+ margin-left: auto;
7
+ }
16
8
 
17
- // margin / padding spacings
18
- // i.e. m-2, m-5, p-1, ...
19
- @each $key, $value in map.get(theme.$theme, spacings) {
20
- .m-#{$key} {
21
- margin: $value !important;
9
+ .me-auto {
10
+ margin-right: auto;
22
11
  }
23
12
 
24
- .p-#{$key} {
25
- padding: $value !important;
13
+ .mt-auto {
14
+ margin-top: auto;
26
15
  }
27
- }
28
16
 
29
- // margin / padding with directions
30
- // i.e. mt-2, mb-5, pt-1, ...
31
- @each $key, $value in map.get(theme.$theme, spacings) {
32
- @each $dir, $prop in map.get(theme.$theme, directions) {
33
- .m#{$dir}-#{$key} {
34
- margin-#{$prop}: $value !important;
17
+ .mb-auto {
18
+ margin-bottom: auto;
19
+ }
20
+
21
+ // margin / padding spacings
22
+ // i.e. m-2, m-5, p-1, ...
23
+ @each $key, $value in map.get(theme.$theme, spacings) {
24
+ .m-#{$key} {
25
+ margin: $value;
26
+ }
27
+
28
+ .p-#{$key} {
29
+ padding: $value;
35
30
  }
31
+ }
32
+
33
+ // margin / padding with directions
34
+ // i.e. mt-2, mb-5, pt-1, ...
35
+ @each $key, $value in map.get(theme.$theme, spacings) {
36
+ @each $dir, $prop in map.get(theme.$theme, directions) {
37
+ .m#{$dir}-#{$key} {
38
+ margin-#{$prop}: $value;
39
+ }
36
40
 
37
- .p#{$dir}-#{$key} {
38
- padding-#{$prop}: $value !important;
41
+ .p#{$dir}-#{$key} {
42
+ padding-#{$prop}: $value;
43
+ }
39
44
  }
40
45
  }
41
46
  }
package/scss/text.scss CHANGED
@@ -1,56 +1,86 @@
1
1
  @use 'sass:map';
2
2
  @use './theme.scss';
3
3
 
4
- .text-center {
5
- text-align: center !important;
6
- }
4
+ @layer base {
5
+ .text-center {
6
+ text-align: center;
7
+ }
7
8
 
8
- .text-start {
9
- text-align: left !important;
10
- }
9
+ .text-start {
10
+ text-align: left;
11
+ }
11
12
 
12
- .text-end {
13
- text-align: right !important;
14
- }
13
+ .text-end {
14
+ text-align: right;
15
+ }
15
16
 
16
- .text-body {
17
- color: var(--text-color);
18
- }
17
+ .text-body {
18
+ color: var(--text-color);
19
+ }
19
20
 
20
- .text-inverse {
21
- color: var(--text-color-inverse);
22
- }
21
+ .text-inverse {
22
+ color: var(--text-color-inverse);
23
+ }
23
24
 
24
- .text-muted {
25
- color: var(--text-color-muted);
26
- }
25
+ .text-muted {
26
+ color: var(--text-color-muted);
27
+ }
27
28
 
28
- .text-subtle {
29
- color: var(--text-color-subtle);
30
- }
29
+ .text-subtle {
30
+ color: var(--text-color-subtle);
31
+ }
31
32
 
32
- .text-inherit {
33
- color: inherit;
34
- }
33
+ .text-inherit {
34
+ color: inherit;
35
+ }
35
36
 
36
- .text-white {
37
- color: var(--white) !important;
38
- }
37
+ .text-white {
38
+ color: var(--white);
39
+ }
39
40
 
40
- .text-black {
41
- color: var(--black) !important;
42
- }
41
+ .text-black {
42
+ color: var(--black);
43
+ }
43
44
 
44
- @each $name, $value in map.get(theme.$theme, colors) {
45
- .text-#{$name} {
46
- color: var(--#{$name}) !important;
47
- fill: var(--#{$name}) !important;
45
+ @each $name, $value in map.get(theme.$theme, colors) {
46
+ .text-#{$name} {
47
+ color: var(--#{$name});
48
+ fill: var(--#{$name});
49
+ }
50
+ }
51
+
52
+ @each $name, $value in map.get(theme.$theme, grays) {
53
+ .text-gray-#{$name} {
54
+ color: var(--gray-#{$name});
55
+ fill: var(--gray-#{$name});
56
+ }
57
+ }
58
+
59
+ .text-xs {
60
+ font-size: var(--font-size-xs);
61
+ }
62
+
63
+ .text-sm {
64
+ font-size: var(--font-size-sm);
65
+ }
66
+
67
+ .text-md {
68
+ font-size: var(--font-size-md);
69
+ }
70
+
71
+ .text-lg {
72
+ font-size: var(--font-size-lg);
73
+ }
74
+
75
+ .text-xl {
76
+ font-size: var(--font-size-xl);
77
+ }
78
+
79
+ .text-xxl {
80
+ font-size: var(--font-size-xxl);
48
81
  }
49
- }
50
82
 
51
- @each $name, $value in map.get(theme.$theme, grays) {
52
- .text-gray-#{$name} {
53
- color: var(--gray-#{$name});
54
- fill: var(--gray-#{$name});
83
+ .text-xxxl {
84
+ font-size: var(--font-size-xxxl);
55
85
  }
56
86
  }