@oardi/css-utils 0.47.1 → 0.49.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 (31) 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 +156 -155
  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 -52
  16. package/scss/components/toast.scss +19 -17
  17. package/scss/components/tooltip.scss +54 -52
  18. package/scss/flex-responsive.scss +64 -76
  19. package/scss/flex.scss +114 -127
  20. package/scss/gap-responsive.scss +22 -0
  21. package/scss/gap.scss +18 -0
  22. package/scss/grid-responsive.scss +7 -5
  23. package/scss/grid.scss +14 -12
  24. package/scss/index.scss +9 -1
  25. package/scss/reboot.scss +110 -108
  26. package/scss/spacings-responsive.scss +12 -10
  27. package/scss/spacings.scss +33 -28
  28. package/scss/text.scss +69 -39
  29. package/scss/typography.scss +92 -125
  30. package/scss/utilities.scss +207 -205
  31. package/scss/variables.scss +70 -68
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oardi/css-utils",
3
- "version": "0.47.1",
3
+ "version": "0.49.0",
4
4
  "author": "Ardian Shala",
5
5
  "homepage": "https://css-utils.oardi.com",
6
6
  "description": "Powerful set of semantic css classes with support for breakpoints, directions and spacings",
package/scss/borders.scss CHANGED
@@ -3,31 +3,36 @@
3
3
 
4
4
  $borderWidths: 0, 1, 2, 3, 4, 5;
5
5
 
6
- .border {
7
- border: var(--border-width) solid var(--border-color) !important;
8
- }
6
+ @layer utilities {
7
+ .border {
8
+ border: var(--border-width) solid var(--border-color);
9
+ }
9
10
 
10
- @each $dir, $prop in map.get(theme.$theme, directions) {
11
- .border-#{$dir} {
12
- border-#{$prop}: var(--border-width) solid var(--border-color) !important;
11
+ // border directions
12
+ @each $dir, $prop in map.get(theme.$theme, directions) {
13
+ .border-#{$dir} {
14
+ border-#{$prop}: var(--border-width) solid var(--border-color);
15
+ }
13
16
  }
14
- }
15
17
 
16
- // border widths
17
- @each $borderWidth in $borderWidths {
18
- .border-#{$borderWidth} {
19
- --border-width: #{$borderWidth}px !important;
18
+ // border widths
19
+ @each $borderWidth in $borderWidths {
20
+ .border-#{$borderWidth} {
21
+ --border-width: #{$borderWidth}px;
22
+ }
20
23
  }
21
- }
22
24
 
23
- @each $name, $value in map.get(theme.$theme, colors) {
24
- .border-#{$name} {
25
- --border-color: var(--#{$name});
25
+ // border colors
26
+ @each $name, $value in map.get(theme.$theme, colors) {
27
+ .border-#{$name} {
28
+ --border-color: var(--#{$name});
29
+ }
26
30
  }
27
- }
28
31
 
29
- @each $dir, $prop in map.get(theme.$theme, directions) {
30
- .border-#{$dir}-0 {
31
- border-#{$prop}: none !important;
32
+ // border direction resets
33
+ @each $dir, $prop in map.get(theme.$theme, directions) {
34
+ .border-#{$dir}-0 {
35
+ border-#{$prop}: none;
36
+ }
32
37
  }
33
38
  }
package/scss/components/breadcrumb.scss CHANGED
@@ -1,34 +1,36 @@
1
1
  @use 'sass:map';
2
2
 
3
- .breadcrumb {
4
- --breadcrumb-padding-x: 0;
5
- --breadcrumb-padding-y: 0;
6
- --breadcrumb-margin-bottom: var(--spacer-3);
7
- --breadcrumb-divider-color: var(--text-subtle);
8
- --breadcrumb-item-padding-x: var(--spacer-2);
9
- --breadcrumb-item-active-color: var(--text-color-muted);
3
+ @layer components {
4
+ .breadcrumb {
5
+ --breadcrumb-padding-x: 0;
6
+ --breadcrumb-padding-y: 0;
7
+ --breadcrumb-margin-bottom: var(--spacer-3);
8
+ --breadcrumb-divider-color: var(--text-subtle);
9
+ --breadcrumb-item-padding-x: var(--spacer-2);
10
+ --breadcrumb-item-active-color: var(--text-color-muted);
10
11
 
11
- display: flex;
12
- flex-wrap: wrap;
13
- padding: var(--breadcrumb-padding-y) var(--breadcrumb-padding-x);
14
- margin-bottom: var(--breadcrumb-margin-bottom);
15
- font-size: var(--breadcrumb-font-size);
16
- list-style: none;
17
- border-radius: var(--breadcrumb-border-radius);
12
+ display: flex;
13
+ flex-wrap: wrap;
14
+ padding: var(--breadcrumb-padding-y) var(--breadcrumb-padding-x);
15
+ margin-bottom: var(--breadcrumb-margin-bottom);
16
+ font-size: var(--breadcrumb-font-size);
17
+ list-style: none;
18
+ border-radius: var(--breadcrumb-border-radius);
18
19
 
19
- .breadcrumb-item {
20
- &.active {
21
- color: var(--breadcrumb-item-active-color);
22
- }
20
+ .breadcrumb-item {
21
+ &.active {
22
+ color: var(--breadcrumb-item-active-color);
23
+ }
23
24
 
24
- & + .breadcrumb-item {
25
- padding-left: var(--breadcrumb-item-padding-x);
25
+ & + .breadcrumb-item {
26
+ padding-left: var(--breadcrumb-item-padding-x);
26
27
 
27
- &::before {
28
- float: left;
29
- padding-right: var(--breadcrumb-item-padding-x);
30
- color: var(--breadcrumb-divider-color);
31
- content: var(--breadcrumb-divider, '/');
28
+ &::before {
29
+ float: left;
30
+ padding-right: var(--breadcrumb-item-padding-x);
31
+ color: var(--breadcrumb-divider-color);
32
+ content: var(--breadcrumb-divider, '/');
33
+ }
32
34
  }
33
35
  }
34
36
  }
package/scss/components/button.scss CHANGED
@@ -1,162 +1,168 @@
1
1
  @use 'sass:map';
2
2
  @use '../theme.scss' as theme;
3
3
 
4
- .btn {
5
- --button-border-width: var(--border-width);
6
- --button-border-radius: var(--border-radius);
7
-
8
- --button-focus-outline-width: var(--focus-outline-width);
9
- --button-focus-outline-style: var(--focus-outline-style);
10
- --button-focus-outline-color: var(--focus-outline-color);
11
-
12
- --button-font-size: var(--font-size);
13
- --button-padding-y: 0.25rem;
14
- --button-padding-x: 1rem;
15
-
16
- --button-disabled-text-color: var(--disabled-text-color);
17
- --button-disabled-bg-color: var(--disabled-bg-color);
18
- --button-disabled-border-color: var(--disabled-border-color);
19
-
20
- --button-transition-duration: var(--transition-duration, 0.2s);
21
-
22
- font-size: var(--button-font-size);
23
- display: inline-flex;
24
- align-items: center;
25
- justify-content: center;
26
- gap: var(--spacer-2);
27
-
28
- border-width: var(--button-border-width);
29
- border-style: solid;
30
- border-color: transparent;
31
-
32
- background-color: transparent;
33
- color: var(--text-color);
34
- fill: currentColor;
35
-
36
- transition:
37
- color var(--button-transition-duration) ease,
38
- background-color var(--button-transition-duration) ease,
39
- box-shadow var(--button-transition-duration) ease,
40
- border-color var(--button-transition-duration) ease;
41
-
42
- -webkit-tap-highlight-color: transparent;
43
- touch-action: manipulation; // ios fix
44
-
45
- border-radius: var(--button-border-radius);
46
- line-height: var(--line-height);
47
- padding: var(--button-padding-y) var(--button-padding-x);
48
-
49
- &:hover {
50
- cursor: pointer;
51
- text-decoration: none;
4
+ @layer components {
5
+ .btn {
6
+ --button-border-width: var(--border-width);
7
+ --button-border-radius: var(--border-radius);
8
+
9
+ --button-focus-outline-width: var(--focus-outline-width);
10
+ --button-focus-outline-style: var(--focus-outline-style);
11
+ --button-focus-outline-color: var(--focus-outline-color);
12
+
13
+ --button-font-size: var(--font-size);
14
+ --button-padding-y: 0.25rem;
15
+ --button-padding-x: 1rem;
16
+
17
+ --button-disabled-text-color: var(--disabled-text-color);
18
+ --button-disabled-bg-color: var(--disabled-bg-color);
19
+ --button-disabled-border-color: var(--disabled-border-color);
20
+
21
+ --button-transition-duration: var(--transition-duration, 0.2s);
22
+
23
+ font-size: var(--button-font-size);
24
+ display: inline-flex;
25
+ align-items: center;
26
+ justify-content: center;
27
+ gap: var(--spacer-2);
28
+
29
+ border-width: var(--button-border-width);
30
+ border-style: solid;
31
+ border-color: transparent;
32
+
33
+ background-color: transparent;
34
+ color: var(--text-color);
35
+ fill: currentColor;
36
+
37
+ transition:
38
+ color var(--button-transition-duration) ease,
39
+ background-color var(--button-transition-duration) ease,
40
+ box-shadow var(--button-transition-duration) ease,
41
+ border-color var(--button-transition-duration) ease;
42
+
43
+ -webkit-tap-highlight-color: transparent;
44
+ touch-action: manipulation; // ios fix
45
+
46
+ border-radius: var(--button-border-radius);
47
+ line-height: var(--line-height);
48
+ padding: var(--button-padding-y) var(--button-padding-x);
49
+
50
+ &:hover {
51
+ cursor: pointer;
52
+ text-decoration: none;
53
+ }
54
+
55
+ &:focus-visible {
56
+ outline: var(--button-focus-outline-width) var(--button-focus-outline-style)
57
+ var(--button-focus-outline-color);
58
+ outline-offset: var(--focus-offset);
59
+ }
60
+
61
+ &:disabled,
62
+ &[disabled] {
63
+ cursor: not-allowed;
64
+ pointer-events: none;
65
+ box-shadow: none;
66
+ outline: 0;
67
+ color: var(--button-disabled-text-color);
68
+ background-color: var(--button-disabled-bg-color);
69
+ border-color: var(--button-disabled-border-color);
70
+ }
52
71
  }
53
72
 
54
- &:focus-visible {
55
- outline: var(--button-focus-outline-width) var(--button-focus-outline-style) var(--button-focus-outline-color);
56
- outline-offset: var(--focus-offset);
73
+ @each $name, $value in map.get(theme.$theme, colors) {
74
+ .btn-#{$name} {
75
+ --button-color: var(--#{$name});
76
+ --button-color-hover: var(--#{$name}-hover);
77
+ --button-color-active: var(--#{$name}-active);
78
+ --button-color-rgb: var(--#{$name}-rgb);
79
+ --button-on-color: var(--on-#{$name});
80
+ }
57
81
  }
58
82
 
59
- &:disabled,
60
- &[disabled] {
61
- cursor: not-allowed;
62
- pointer-events: none;
63
- box-shadow: none;
64
- outline: 0;
65
- color: var(--button-disabled-text-color);
66
- background-color: var(--button-disabled-bg-color);
67
- border-color: var(--button-disabled-border-color);
68
- }
69
- }
70
-
71
- @each $name, $value in map.get(theme.$theme, colors) {
72
- .btn-#{$name} {
73
- --button-color: var(--#{$name});
74
- --button-color-hover: var(--#{$name}-hover);
75
- --button-color-active: var(--#{$name}-active);
76
- --button-color-rgb: var(--#{$name}-rgb);
77
- --button-on-color: var(--on-#{$name});
78
- }
79
- }
80
-
81
- .btn-solid {
82
- color: var(--button-on-color);
83
- fill: var(--button-on-color);
84
- background-color: var(--button-color);
85
- border-color: var(--button-color);
86
-
87
- &:hover {
88
- background-color: var(--button-color-hover);
89
- border-color: var(--button-color-hover);
90
- }
91
-
92
- &.active,
93
- &:active {
94
- background-color: var(--button-color-active);
95
- border-color: var(--button-color-active);
96
- }
97
-
98
- &:focus-visible {
99
- outline: var(--button-focus-outline-width) var(--button-focus-outline-style) rgba(var(--button-color-rgb), 0.5);
100
- }
101
- }
102
-
103
- .btn-outline {
104
- color: var(--button-color);
105
- fill: var(--button-color);
106
- background-color: transparent;
107
- border-color: var(--button-color);
108
-
109
- &:hover {
83
+ .btn-solid {
110
84
  color: var(--button-on-color);
111
85
  fill: var(--button-on-color);
112
- background-color: var(--button-color-hover);
113
- border-color: var(--button-color-hover);
114
- }
86
+ background-color: var(--button-color);
87
+ border-color: var(--button-color);
115
88
 
116
- &.active,
117
- &:active {
118
- color: var(--button-on-color);
119
- fill: var(--button-on-color);
120
- background-color: var(--button-color-active);
121
- border-color: var(--button-color-active);
89
+ &:hover {
90
+ background-color: var(--button-color-hover);
91
+ border-color: var(--button-color-hover);
92
+ }
93
+
94
+ &.active,
95
+ &:active {
96
+ background-color: var(--button-color-active);
97
+ border-color: var(--button-color-active);
98
+ }
99
+
100
+ &:focus-visible {
101
+ outline: var(--button-focus-outline-width) var(--button-focus-outline-style)
102
+ rgba(var(--button-color-rgb), 0.5);
103
+ }
122
104
  }
123
105
 
124
- &:focus-visible {
125
- color: var(--button-on-color);
126
- fill: var(--button-on-color);
127
- outline: var(--button-focus-outline-width) var(--button-focus-outline-style) rgba(var(--button-color-rgb), 0.5);
128
- background-color: var(--button-color);
106
+ .btn-outline {
107
+ color: var(--button-color);
108
+ fill: var(--button-color);
109
+ background-color: transparent;
129
110
  border-color: var(--button-color);
111
+
112
+ &:hover {
113
+ color: var(--button-on-color);
114
+ fill: var(--button-on-color);
115
+ background-color: var(--button-color-hover);
116
+ border-color: var(--button-color-hover);
117
+ }
118
+
119
+ &.active,
120
+ &:active {
121
+ color: var(--button-on-color);
122
+ fill: var(--button-on-color);
123
+ background-color: var(--button-color-active);
124
+ border-color: var(--button-color-active);
125
+ }
126
+
127
+ &:focus-visible {
128
+ color: var(--button-on-color);
129
+ fill: var(--button-on-color);
130
+ outline: var(--button-focus-outline-width) var(--button-focus-outline-style)
131
+ rgba(var(--button-color-rgb), 0.5);
132
+ background-color: var(--button-color);
133
+ border-color: var(--button-color);
134
+ }
130
135
  }
131
- }
132
136
 
133
- .btn-text {
134
- --button-highlight: var(--highlight);
137
+ .btn-text {
138
+ --button-highlight: var(--highlight);
135
139
 
136
- color: var(--button-color);
137
- fill: var(--button-color);
138
- background-color: transparent;
139
- border-color: transparent;
140
+ color: var(--button-color);
141
+ fill: var(--button-color);
142
+ background-color: transparent;
143
+ border-color: transparent;
140
144
 
141
- &:hover,
142
- &.active,
143
- &:active {
144
- background-color: var(--button-highlight);
145
- }
145
+ &:hover,
146
+ &.active,
147
+ &:active {
148
+ background-color: var(--button-highlight);
149
+ }
146
150
 
147
- &:focus-visible {
148
- outline: var(--button-focus-outline-width) var(--button-focus-outline-style) rgba(var(--button-color-rgb), 0.5);
151
+ &:focus-visible {
152
+ outline: var(--button-focus-outline-width) var(--button-focus-outline-style)
153
+ rgba(var(--button-color-rgb), 0.5);
154
+ }
149
155
  }
150
- }
151
156
 
152
- .btn-xs {
153
- --button-padding-y: 0.15rem;
154
- --button-padding-x: 0.5rem;
155
- --button-font-size: 0.75rem;
156
- }
157
+ .btn-xs {
158
+ --button-padding-y: 0.15rem;
159
+ --button-padding-x: 0.5rem;
160
+ --button-font-size: 0.75rem;
161
+ }
157
162
 
158
- .btn-sm {
159
- --button-padding-y: 0.2rem;
160
- --button-padding-x: 0.75rem;
161
- --button-font-size: 0.875rem;
163
+ .btn-sm {
164
+ --button-padding-y: 0.2rem;
165
+ --button-padding-x: 0.75rem;
166
+ --button-font-size: 0.875rem;
167
+ }
162
168
  }
package/scss/components/card.scss CHANGED
@@ -1,49 +1,51 @@
1
- .card {
2
- --card-header-padding: var(--spacer-3) var(--spacer-3) 0 var(--spacer-3);
3
- --card-header-border-bottom: 0;
4
- --card-body-padding: var(--spacer-3);
5
- --card-bg-color: var(--bg-surface);
6
- --card-border-width: var(--border-width);
7
- --card-border-color: var(--border-color);
8
- --card-border-radius: var(--border-radius);
9
- --card-bg-hover-color: var(--bg-surface-hover);
10
- --card-title-spacer-y: var(--spacer-2);
11
- --card-subtitle-color: var(--text-color-muted);
12
-
13
- --card-transition-duration: var(--transition-duration, 0.2s);
14
-
15
- background-color: var(--card-bg-color);
16
- border: var(--card-border-width) solid var(--card-border-color);
17
- border-radius: var(--card-border-radius);
18
-
19
- transition:
20
- color var(--card-transition-duration) ease,
21
- background-color var(--card-transition-duration) ease,
22
- box-shadow var(--card-transition-duration) ease,
23
- border-color var(--card-transition-duration) ease;
24
-
25
- &.action:hover {
26
- background-color: var(--card-bg-hover-color);
27
- }
28
-
29
- .card-title {
30
- margin-bottom: var(--card-title-spacer-y);
31
- }
32
-
33
- .card-subtitle {
34
- color: var(--card-subtitle-color);
35
- margin-top: calc(-0.5 * var(--card-title-spacer-y));
36
- margin-bottom: var(--card-title-spacer-y);
37
- }
38
-
39
- .card-header {
40
- padding: var(--card-header-padding);
41
- border-bottom: var(--card-header-border-bottom);
42
-
43
- --card-title-spacer-y: 0;
44
- }
45
-
46
- .card-body {
47
- padding: var(--card-body-padding);
1
+ @layer components {
2
+ .card {
3
+ --card-header-padding: var(--spacer-3) var(--spacer-3) 0 var(--spacer-3);
4
+ --card-header-border-bottom: 0;
5
+ --card-body-padding: var(--spacer-3);
6
+ --card-bg-color: var(--bg-surface);
7
+ --card-border-width: var(--border-width);
8
+ --card-border-color: var(--border-color);
9
+ --card-border-radius: var(--border-radius);
10
+ --card-bg-hover-color: var(--bg-surface-hover);
11
+ --card-title-spacer-y: var(--spacer-2);
12
+ --card-subtitle-color: var(--text-color-muted);
13
+
14
+ --card-transition-duration: var(--transition-duration, 0.2s);
15
+
16
+ background-color: var(--card-bg-color);
17
+ border: var(--card-border-width) solid var(--card-border-color);
18
+ border-radius: var(--card-border-radius);
19
+
20
+ transition:
21
+ color var(--card-transition-duration) ease,
22
+ background-color var(--card-transition-duration) ease,
23
+ box-shadow var(--card-transition-duration) ease,
24
+ border-color var(--card-transition-duration) ease;
25
+
26
+ &.action:hover {
27
+ background-color: var(--card-bg-hover-color);
28
+ }
29
+
30
+ .card-title {
31
+ margin-bottom: var(--card-title-spacer-y);
32
+ }
33
+
34
+ .card-subtitle {
35
+ color: var(--card-subtitle-color);
36
+ margin-top: calc(-0.5 * var(--card-title-spacer-y));
37
+ margin-bottom: var(--card-title-spacer-y);
38
+ }
39
+
40
+ .card-header {
41
+ padding: var(--card-header-padding);
42
+ border-bottom: var(--card-header-border-bottom);
43
+
44
+ --card-title-spacer-y: 0;
45
+ }
46
+
47
+ .card-body {
48
+ padding: var(--card-body-padding);
49
+ }
48
50
  }
49
51
  }