@oardi/css-utils 0.50.0 → 0.52.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 (14) hide show
  1. package/package.json +1 -1
  2. package/scss/borders.scss +4 -0
  3. package/scss/components/breadcrumb.scss +7 -11
  4. package/scss/components/button.scss +26 -23
  5. package/scss/components/form.scss +1 -0
  6. package/scss/flex-responsive.scss +26 -3
  7. package/scss/flex.scss +4 -4
  8. package/scss/gap-responsive.scss +1 -0
  9. package/scss/grid.scss +3 -2
  10. package/scss/spacings-responsive.scss +8 -0
  11. package/scss/spacings.scss +35 -1
  12. package/scss/text.scss +3 -11
  13. package/scss/utilities.scss +24 -20
  14. package/scss/variables.scss +4 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oardi/css-utils",
3
- "version": "0.50.0",
3
+ "version": "0.52.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
@@ -35,4 +35,8 @@ $borderWidths: 0, 1, 2, 3, 4, 5;
35
35
  border-#{$prop}: none;
36
36
  }
37
37
  }
38
+
39
+ .border-transparent {
40
+ --border-color: transparent;
41
+ }
38
42
  }
package/scss/components/breadcrumb.scss CHANGED
@@ -1,10 +1,7 @@
1
- @use 'sass:map';
2
-
3
1
  @layer components {
4
2
  .breadcrumb {
5
- --breadcrumb-padding-x: 0;
6
- --breadcrumb-padding-y: 0;
7
- --breadcrumb-margin-bottom: var(--spacer-3);
3
+ --breadcrumb-padding-x: var(--spacer-0);
4
+ --breadcrumb-padding-y: var(--spacer-0);
8
5
  --breadcrumb-divider-color: var(--text-subtle);
9
6
  --breadcrumb-item-padding-x: var(--spacer-2);
10
7
  --breadcrumb-item-active-color: var(--text-color-muted);
@@ -12,10 +9,9 @@
12
9
  display: flex;
13
10
  flex-wrap: wrap;
14
11
  padding: var(--breadcrumb-padding-y) var(--breadcrumb-padding-x);
15
- margin-bottom: var(--breadcrumb-margin-bottom);
16
- font-size: var(--breadcrumb-font-size);
12
+ margin-bottom: var(--breadcrumb-margin-bottom, var(--spacer-3));
13
+ font-size: var(--breadcrumb-font-size, var(--font-size));
17
14
  list-style: none;
18
- border-radius: var(--breadcrumb-border-radius);
19
15
 
20
16
  .breadcrumb-item {
21
17
  &.active {
@@ -23,11 +19,11 @@
23
19
  }
24
20
 
25
21
  & + .breadcrumb-item {
26
- padding-left: var(--breadcrumb-item-padding-x);
22
+ padding-inline-start: var(--breadcrumb-item-padding-x);
27
23
 
28
24
  &::before {
29
- float: left;
30
- padding-right: var(--breadcrumb-item-padding-x);
25
+ display: inline-block;
26
+ padding-inline-end: var(--breadcrumb-item-padding-x);
31
27
  color: var(--breadcrumb-divider-color);
32
28
  content: var(--breadcrumb-divider, '/');
33
29
  }
package/scss/components/button.scss CHANGED
@@ -9,16 +9,18 @@
9
9
  --button-focus-outline-width: var(--focus-outline-width);
10
10
  --button-focus-outline-style: var(--focus-outline-style);
11
11
  --button-focus-outline-color: var(--focus-outline-color);
12
+ --button-focus-outline-offset: var(--focus-outline-color);
12
13
 
13
14
  --button-font-size: var(--font-size);
14
- --button-padding-y: 0.25rem;
15
- --button-padding-x: 1rem;
15
+ --button-padding-y: var(--spacer-1);
16
+ --button-padding-x: var(--spacer-3);
16
17
 
17
18
  --button-disabled-text-color: var(--disabled-text-color);
18
19
  --button-disabled-bg-color: var(--disabled-bg-color);
19
20
  --button-disabled-border-color: var(--disabled-border-color);
20
21
 
21
22
  --button-transition-duration: var(--transition-duration, 0.2s);
23
+ --button-transition-easing: var(--transition-easing);
22
24
 
23
25
  font-size: var(--button-font-size);
24
26
  display: inline-flex;
@@ -35,10 +37,10 @@
35
37
  fill: currentColor;
36
38
 
37
39
  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;
40
+ color var(--button-transition-duration) var(--button-transition-easing),
41
+ background-color var(--button-transition-duration) var(--button-transition-easing),
42
+ box-shadow var(--button-transition-duration) var(--button-transition-easing),
43
+ border-color var(--button-transition-duration) var(--button-transition-easing);
42
44
 
43
45
  -webkit-tap-highlight-color: transparent;
44
46
  touch-action: manipulation; // ios fix
@@ -55,11 +57,12 @@
55
57
  &:focus-visible {
56
58
  outline: var(--button-focus-outline-width) var(--button-focus-outline-style)
57
59
  var(--button-focus-outline-color);
58
- outline-offset: var(--focus-offset);
60
+ outline-offset: var(--button-focus-outline-offset);
59
61
  }
60
62
 
61
63
  &:disabled,
62
- &[disabled] {
64
+ &[disabled],
65
+ &.disabled {
63
66
  cursor: not-allowed;
64
67
  pointer-events: none;
65
68
  box-shadow: none;
@@ -82,7 +85,6 @@
82
85
 
83
86
  .btn-solid {
84
87
  color: var(--button-on-color);
85
- fill: var(--button-on-color);
86
88
  background-color: var(--button-color);
87
89
  border-color: var(--button-color);
88
90
 
@@ -105,13 +107,11 @@
105
107
 
106
108
  .btn-outline {
107
109
  color: var(--button-color);
108
- fill: var(--button-color);
109
110
  background-color: transparent;
110
111
  border-color: var(--button-color);
111
112
 
112
113
  &:hover {
113
114
  color: var(--button-on-color);
114
- fill: var(--button-on-color);
115
115
  background-color: var(--button-color-hover);
116
116
  border-color: var(--button-color-hover);
117
117
  }
@@ -119,18 +119,16 @@
119
119
  &.active,
120
120
  &:active {
121
121
  color: var(--button-on-color);
122
- fill: var(--button-on-color);
123
122
  background-color: var(--button-color-active);
124
123
  border-color: var(--button-color-active);
125
124
  }
126
125
 
127
126
  &:focus-visible {
128
- color: var(--button-on-color);
129
- fill: var(--button-on-color);
127
+ // color: var(--button-on-color);
130
128
  outline: var(--button-focus-outline-width) var(--button-focus-outline-style)
131
129
  rgba(var(--button-color-rgb), 0.5);
132
- background-color: var(--button-color);
133
- border-color: var(--button-color);
130
+ // background-color: var(--button-color);
131
+ // border-color: var(--button-color);
134
132
  }
135
133
  }
136
134
 
@@ -138,7 +136,6 @@
138
136
  --button-highlight: var(--highlight);
139
137
 
140
138
  color: var(--button-color);
141
- fill: var(--button-color);
142
139
  background-color: transparent;
143
140
  border-color: transparent;
144
141
 
@@ -155,14 +152,20 @@
155
152
  }
156
153
 
157
154
  .btn-xs {
158
- --button-padding-y: 0.15rem;
159
- --button-padding-x: 0.5rem;
160
- --button-font-size: 0.75rem;
155
+ --button-padding-y: var(--spacer-0);
156
+ --button-padding-x: var(--spacer-2);
157
+ --button-font-size: var(--font-size-xs);
161
158
  }
162
159
 
163
160
  .btn-sm {
164
- --button-padding-y: 0.2rem;
165
- --button-padding-x: 0.75rem;
166
- --button-font-size: 0.875rem;
161
+ --button-padding-y: var(--spacer-1);
162
+ --button-padding-x: var(--spacer-2);
163
+ --button-font-size: var(--font-size-sm);
164
+ }
165
+
166
+ .btn-lg {
167
+ --button-padding-y: var(--spacer-2);
168
+ --button-padding-x: var(--spacer-4);
169
+ --button-font-size: var(--font-size-lg);
167
170
  }
168
171
  }
package/scss/components/form.scss CHANGED
@@ -50,6 +50,7 @@
50
50
  color: var(--error);
51
51
  border-color: var(--error);
52
52
  padding-right: calc(1.5em + 0.75rem);
53
+
53
54
  &:focus {
54
55
  outline: var(--focus-outline-error);
55
56
  outline-offset: var(--focus-offset);
package/scss/flex-responsive.scss CHANGED
@@ -80,13 +80,36 @@
80
80
  // TODO
81
81
 
82
82
  // fill
83
- // TODO
83
+ .flex-#{$bp}-fill {
84
+ flex-direction: row;
85
+ }
84
86
 
85
87
  // grow
86
- // TODO
88
+ .flex-#{$bp}-grow-0 {
89
+ flex-grow: 0;
90
+ }
91
+
92
+ .flex-#{$bp}-grow-1 {
93
+ flex-grow: 1;
94
+ }
87
95
 
88
96
  // shrink
89
- // TODO
97
+ .flex-#{$bp}-shrink-0 {
98
+ flex-shrink: 0;
99
+ }
100
+
101
+ .flex-#{$bp}-shrink-1 {
102
+ flex-shrink: 1;
103
+ }
104
+
105
+ // wrap
106
+ .flex-#{$bp}-wrap {
107
+ flex-wrap: wrap;
108
+ }
109
+
110
+ .flex-#{$bp}-nowrap {
111
+ flex-wrap: nowrap;
112
+ }
90
113
  }
91
114
  }
92
115
  }
package/scss/flex.scss CHANGED
@@ -3,10 +3,10 @@
3
3
 
4
4
  @layer utilities {
5
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);
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, baseline, stretch);
10
10
 
11
11
  // basic
12
12
  .d-flex {
package/scss/gap-responsive.scss CHANGED
@@ -1,6 +1,7 @@
1
1
  @use 'sass:map';
2
2
  @use './theme.scss';
3
3
 
4
+ // i.e.: .gap-md-2, .row-gap-md-2, .column-gap-md-2
4
5
  @layer utilities {
5
6
  @each $bp, $bp-value in map.get(theme.$theme, breakpoints) {
6
7
  @media (min-width: #{$bp-value}) {
package/scss/grid.scss CHANGED
@@ -1,10 +1,11 @@
1
1
  @layer utilities {
2
2
  .grid {
3
+ --grid-gap: var(--spacer-3);
4
+
3
5
  display: grid;
4
6
  grid-template-columns: repeat(12, minmax(0, 1fr));
5
7
 
6
- column-gap: 1rem;
7
- row-gap: 1rem;
8
+ gap: var(--grid-gap);
8
9
  }
9
10
 
10
11
  .col {
package/scss/spacings-responsive.scss CHANGED
@@ -7,6 +7,14 @@
7
7
  @media (min-width: #{$bp-value}) {
8
8
  @each $key, $value in map.get(theme.$theme, spacings) {
9
9
  @each $dir, $prop in map.get(theme.$theme, directions) {
10
+ .m-#{$bp}-#{$key} {
11
+ margin-#{$prop}: $value;
12
+ }
13
+
14
+ .p-#{$bp}-#{$key} {
15
+ padding-#{$prop}: $value;
16
+ }
17
+
10
18
  .m#{$dir}-#{$bp}-#{$key} {
11
19
  margin-#{$prop}: $value;
12
20
  }
package/scss/spacings.scss CHANGED
@@ -2,6 +2,20 @@
2
2
  @use './theme.scss';
3
3
 
4
4
  @layer utilities {
5
+ .m-auto {
6
+ margin: auto;
7
+ }
8
+
9
+ .mx-auto {
10
+ margin-left: auto;
11
+ margin-right: auto;
12
+ }
13
+
14
+ .my-auto {
15
+ margin-top: auto;
16
+ margin-bottom: auto;
17
+ }
18
+
5
19
  .ms-auto {
6
20
  margin-left: auto;
7
21
  }
@@ -19,15 +33,35 @@
19
33
  }
20
34
 
21
35
  // margin / padding spacings
22
- // i.e. m-2, m-5, p-1, ...
36
+ // i.e. .m-2, .m-5, p-1,
23
37
  @each $key, $value in map.get(theme.$theme, spacings) {
24
38
  .m-#{$key} {
25
39
  margin: $value;
26
40
  }
27
41
 
42
+ .mx-#{$key} {
43
+ margin-left: $value;
44
+ margin-right: $value;
45
+ }
46
+
47
+ .my-#{$key} {
48
+ margin-top: $value;
49
+ margin-bottom: $value;
50
+ }
51
+
28
52
  .p-#{$key} {
29
53
  padding: $value;
30
54
  }
55
+
56
+ .px-#{$key} {
57
+ padding-left: $value;
58
+ padding-right: $value;
59
+ }
60
+
61
+ .py-#{$key} {
62
+ padding-top: $value;
63
+ padding-bottom: $value;
64
+ }
31
65
  }
32
66
 
33
67
  // margin / padding with directions
package/scss/text.scss CHANGED
@@ -1,17 +1,17 @@
1
1
  @use 'sass:map';
2
2
  @use './theme.scss';
3
3
 
4
- @layer base {
4
+ @layer utilities {
5
5
  .text-center {
6
6
  text-align: center;
7
7
  }
8
8
 
9
9
  .text-start {
10
- text-align: left;
10
+ text-align: start;
11
11
  }
12
12
 
13
13
  .text-end {
14
- text-align: right;
14
+ text-align: end;
15
15
  }
16
16
 
17
17
  .text-body {
@@ -34,14 +34,6 @@
34
34
  color: inherit;
35
35
  }
36
36
 
37
- .text-white {
38
- color: var(--white);
39
- }
40
-
41
- .text-black {
42
- color: var(--black);
43
- }
44
-
45
37
  @each $name, $value in map.get(theme.$theme, colors) {
46
38
  .text-#{$name} {
47
39
  color: var(--#{$name});
package/scss/utilities.scss CHANGED
@@ -48,14 +48,6 @@
48
48
  }
49
49
  }
50
50
 
51
- .bg-white {
52
- background-color: var(--white);
53
- }
54
-
55
- .bg-black {
56
- background-color: var(--black);
57
- }
58
-
59
51
  .bg-surface {
60
52
  background-color: var(--bg-surface);
61
53
  }
@@ -64,12 +56,16 @@
64
56
  width: 100%;
65
57
  }
66
58
 
59
+ .rounded-sm {
60
+ border-radius: var(--border-radius-sm);
61
+ }
62
+
67
63
  .rounded {
68
64
  border-radius: var(--border-radius);
69
65
  }
70
66
 
71
- .rounded-sm {
72
- border-radius: var(--border-radius-sm);
67
+ .rounded-md {
68
+ border-radius: var(--border-radius);
73
69
  }
74
70
 
75
71
  .rounded-lg {
@@ -108,10 +104,6 @@
108
104
  border-radius: 0;
109
105
  }
110
106
 
111
- .shadow-0 {
112
- box-shadow: none;
113
- }
114
-
115
107
  .shadow-sm {
116
108
  box-shadow: var(--shadow-sm);
117
109
  }
@@ -120,14 +112,22 @@
120
112
  box-shadow: var(--shadow);
121
113
  }
122
114
 
115
+ .shadow-md {
116
+ box-shadow: var(--shadow);
117
+ }
118
+
123
119
  .shadow-lg {
124
120
  box-shadow: var(--shadow-lg);
125
121
  }
126
122
 
123
+ .shadow-0 {
124
+ box-shadow: none;
125
+ }
126
+
127
127
  .hover-shadow-sm {
128
128
  transition:
129
- box-shadow var(--transition-duration-fast) ease-out,
130
- transform var(--transition-duration-fast) ease-out;
129
+ box-shadow var(--transition-duration) ease-out,
130
+ transform var(--transition-duration) ease-out;
131
131
 
132
132
  &:hover {
133
133
  box-shadow: var(--shadow-sm);
@@ -136,8 +136,8 @@
136
136
 
137
137
  .hover-shadow {
138
138
  transition:
139
- box-shadow var(--transition-duration-fast) ease-out,
140
- transform var(--transition-duration-fast) ease-out;
139
+ box-shadow var(--transition-duration) ease-out,
140
+ transform var(--transition-duration) ease-out;
141
141
 
142
142
  &:hover {
143
143
  box-shadow: var(--shadow);
@@ -146,8 +146,8 @@
146
146
 
147
147
  .hover-shadow-lg {
148
148
  transition:
149
- box-shadow var(--transition-duration-fast) ease-out,
150
- transform var(--transition-duration-fast) ease-out;
149
+ box-shadow var(--transition-duration) ease-out,
150
+ transform var(--transition-duration) ease-out;
151
151
 
152
152
  &:hover {
153
153
  box-shadow: var(--shadow-lg);
@@ -166,6 +166,10 @@
166
166
  width: 50%;
167
167
  }
168
168
 
169
+ .w-30 {
170
+ width: 30%;
171
+ }
172
+
169
173
  .w-40 {
170
174
  width: 40%;
171
175
  }
package/scss/variables.scss CHANGED
@@ -69,12 +69,14 @@
69
69
  --focus-outline-color: rgba(var(--primary-rgb), 0.5);
70
70
  --focus-outline-style: solid;
71
71
  --focus-outline-width: 2.5px;
72
- // create focus outline for every theme color
73
- --focus-outline-error: var(--focus-outline-width) var(--focus-outline-style) rgba(var(--error-rgb), 0.5);
72
+
73
+ --focus-outline-error: var(--focus-outline-width) var(--focus-outline-style) rgba(var(--error-rgb), 0.5); // create focus outline for every theme color?
74
+
74
75
  --focus-offset: 0px;
75
76
 
76
77
  --container: 900px;
77
78
 
79
+ --transition-duration-fast: 0.12s;
78
80
  --transition-duration: 0.2s;
79
81
  --transition-easing: ease-out;
80
82