@oardi/css-utils 0.50.0 → 0.51.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 (11) hide show
  1. package/package.json +1 -1
  2. package/scss/borders.scss +4 -0
  3. package/scss/components/form.scss +1 -0
  4. package/scss/flex-responsive.scss +26 -3
  5. package/scss/flex.scss +4 -4
  6. package/scss/gap-responsive.scss +1 -0
  7. package/scss/grid.scss +3 -2
  8. package/scss/spacings.scss +35 -1
  9. package/scss/text.scss +3 -11
  10. package/scss/utilities.scss +24 -20
  11. 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.51.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/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.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