@oardi/css-utils 0.53.0 → 0.53.1

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 (9) hide show
  1. package/package.json +1 -1
  2. package/scss/borders.scss +1 -1
  3. package/scss/flex-responsive.scss +2 -2
  4. package/scss/gap-responsive.scss +1 -1
  5. package/scss/spacings-responsive.scss +58 -9
  6. package/scss/spacings.scss +1 -1
  7. package/scss/text.scss +1 -1
  8. package/scss/utilities.scss +29 -7
  9. package/scss/variables.scss +3 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oardi/css-utils",
3
- "version": "0.53.0",
3
+ "version": "0.53.1",
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
@@ -1,5 +1,5 @@
1
1
  @use 'sass:map';
2
- @use './theme.scss';
2
+ @use './theme.scss' as theme;
3
3
 
4
4
  $borderWidths: 0, 1, 2, 3, 4, 5;
5
5
 
package/scss/flex-responsive.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  @use 'sass:map';
2
- @use './theme.scss';
2
+ @use './theme.scss' as theme;
3
3
 
4
4
  // TODO
5
5
  // add flex-wrap-*, flex-grow-*, flex-shrink-*, flex-fill-* oder order-* variants
@@ -84,7 +84,7 @@
84
84
 
85
85
  // fill
86
86
  .flex-#{$bp}-fill {
87
- flex-direction: row;
87
+ flex: 1 1 auto;
88
88
  }
89
89
 
90
90
  // grow
package/scss/gap-responsive.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  @use 'sass:map';
2
- @use './theme.scss';
2
+ @use './theme.scss' as theme;
3
3
 
4
4
  // i.e.: .gap-md-2, .row-gap-md-2, .column-gap-md-2
5
5
  @layer utilities {
package/scss/spacings-responsive.scss CHANGED
@@ -1,20 +1,69 @@
1
1
  @use 'sass:map';
2
- @use './theme.scss';
2
+ @use './theme.scss' as theme;
3
3
 
4
4
  @layer utilities {
5
- // margin / padding with breakpoints and directions
6
5
  @each $bp, $bp-value in map.get(theme.$theme, breakpoints) {
7
6
  @media (min-width: #{$bp-value}) {
7
+ .m-#{$bp}-auto {
8
+ margin: auto;
9
+ }
10
+
11
+ .mx-#{$bp}-auto {
12
+ margin-left: auto;
13
+ margin-right: auto;
14
+ }
15
+
16
+ .my-#{$bp}-auto {
17
+ margin-top: auto;
18
+ margin-bottom: auto;
19
+ }
20
+
21
+ .ms-#{$bp}-auto {
22
+ margin-left: auto;
23
+ }
24
+
25
+ .me-#{$bp}-auto {
26
+ margin-right: auto;
27
+ }
28
+
29
+ .mt-#{$bp}-auto {
30
+ margin-top: auto;
31
+ }
32
+
33
+ .mb-#{$bp}-auto {
34
+ margin-bottom: auto;
35
+ }
36
+
8
37
  @each $key, $value in map.get(theme.$theme, spacings) {
9
- @each $dir, $prop in map.get(theme.$theme, directions) {
10
- .m-#{$bp}-#{$key} {
11
- margin-#{$prop}: $value;
12
- }
38
+ .m-#{$bp}-#{$key} {
39
+ margin: $value;
40
+ }
13
41
 
14
- .p-#{$bp}-#{$key} {
15
- padding-#{$prop}: $value;
16
- }
42
+ .mx-#{$bp}-#{$key} {
43
+ margin-left: $value;
44
+ margin-right: $value;
45
+ }
46
+
47
+ .my-#{$bp}-#{$key} {
48
+ margin-top: $value;
49
+ margin-bottom: $value;
50
+ }
17
51
 
52
+ .p-#{$bp}-#{$key} {
53
+ padding: $value;
54
+ }
55
+
56
+ .px-#{$bp}-#{$key} {
57
+ padding-left: $value;
58
+ padding-right: $value;
59
+ }
60
+
61
+ .py-#{$bp}-#{$key} {
62
+ padding-top: $value;
63
+ padding-bottom: $value;
64
+ }
65
+
66
+ @each $dir, $prop in map.get(theme.$theme, directions) {
18
67
  .m#{$dir}-#{$bp}-#{$key} {
19
68
  margin-#{$prop}: $value;
20
69
  }
package/scss/spacings.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  @use 'sass:map';
2
- @use './theme.scss';
2
+ @use './theme.scss' as theme;
3
3
 
4
4
  @layer utilities {
5
5
  .m-auto {
package/scss/text.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  @use 'sass:map';
2
- @use './theme.scss';
2
+ @use './theme.scss' as theme;
3
3
 
4
4
  @layer utilities {
5
5
  .text-center {
package/scss/utilities.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  @use 'sass:map';
2
- @use './theme.scss';
2
+ @use './theme.scss' as theme;
3
3
 
4
4
  @layer utilities {
5
5
  // positions
@@ -60,6 +60,18 @@
60
60
  background-color: var(--bg-inverse);
61
61
  }
62
62
 
63
+ .bg-surface-hover {
64
+ background-color: var(--bg-surface-hover);
65
+ }
66
+
67
+ .bg-highlight {
68
+ background-color: var(--bg-highlight);
69
+ }
70
+
71
+ .bg-active {
72
+ background-color: var(--bg-active);
73
+ }
74
+
63
75
  .img-responsive {
64
76
  width: 100%;
65
77
  }
@@ -134,8 +146,8 @@
134
146
 
135
147
  .hover-shadow-sm {
136
148
  transition:
137
- box-shadow var(--transition-duration) ease-out,
138
- transform var(--transition-duration) ease-out;
149
+ box-shadow var(--transition-duration) var(--transition-easing),
150
+ transform var(--transition-duration) var(--transition-easing);
139
151
 
140
152
  &:hover {
141
153
  box-shadow: var(--shadow-sm);
@@ -144,8 +156,18 @@
144
156
 
145
157
  .hover-shadow {
146
158
  transition:
147
- box-shadow var(--transition-duration) ease-out,
148
- transform var(--transition-duration) ease-out;
159
+ box-shadow var(--transition-duration) var(--transition-easing),
160
+ transform var(--transition-duration) var(--transition-easing);
161
+
162
+ &:hover {
163
+ box-shadow: var(--shadow);
164
+ }
165
+ }
166
+
167
+ .hover-shadow-md {
168
+ transition:
169
+ box-shadow var(--transition-duration) var(--transition-easing),
170
+ transform var(--transition-duration) var(--transition-easing);
149
171
 
150
172
  &:hover {
151
173
  box-shadow: var(--shadow);
@@ -154,8 +176,8 @@
154
176
 
155
177
  .hover-shadow-lg {
156
178
  transition:
157
- box-shadow var(--transition-duration) ease-out,
158
- transform var(--transition-duration) ease-out;
179
+ box-shadow var(--transition-duration) var(--transition-easing),
180
+ transform var(--transition-duration) var(--transition-easing);
159
181
 
160
182
  &:hover {
161
183
  box-shadow: var(--shadow-lg);
package/scss/variables.scss CHANGED
@@ -38,7 +38,7 @@
38
38
  --font-weight: 400;
39
39
  --font-family: 'Inter', sans-serif;
40
40
 
41
- --bg-color: #fdfdfd;
41
+ --bg-body: #fdfdfd;
42
42
  --bg-surface: var(--white);
43
43
  --bg-surface-hover: var(--gray-50);
44
44
  --bg-inverse: var(--gray-900);
@@ -81,10 +81,11 @@
81
81
  --transition-easing: ease-out;
82
82
 
83
83
  /* deprecated alias */
84
+ --bg-color: var(--bg-body);
84
85
  --body-bg-color: var(--bg-body);
85
86
  --text-color-muted: var(--text-muted);
86
87
  --text-color-inverse: var(--text-inverse);
87
88
  --text-color-subtle: var(--text-subtle);
88
- --highlight: rgba(0, 0, 0, 0.15);
89
+ --highlight: var(--bg-highlight);
89
90
  }
90
91
  }