@oardi/css-utils 0.27.0 → 0.27.2

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 (5) hide show
  1. package/package.json +1 -1
  2. package/scss/index.scss +25 -25
  3. package/scss/theme.scss +8 -2
  4. package/scss/utilities.scss +30 -13
  5. package/scss/variables.scss +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oardi/css-utils",
3
- "version": "0.27.0",
3
+ "version": "0.27.2",
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/index.scss CHANGED
@@ -1,26 +1,26 @@
1
- @use './theme.scss';
2
- @use './variables.scss';
3
- @use './reboot.scss';
4
- @use './typography.scss';
5
- @use './utilities.scss';
6
- @use './spacings.scss';
7
- @use './spacings-responsive.scss';
8
- @use './flex.scss';
9
- @use './flex-responsive.scss';
10
- @use './grid.scss';
11
- @use './grid-responsive.scss';
1
+ @forward './theme.scss';
2
+ @forward './variables.scss';
3
+ @forward './reboot.scss';
4
+ @forward './typography.scss';
5
+ @forward './utilities.scss';
6
+ @forward './spacings.scss';
7
+ @forward './spacings-responsive.scss';
8
+ @forward './flex.scss';
9
+ @forward './flex-responsive.scss';
10
+ @forward './grid.scss';
11
+ @forward './grid-responsive.scss';
12
12
 
13
- @use './components/breadcrumb.scss';
14
- @use './components/button.scss';
15
- @use './components/card.scss';
16
- @use './components/chip.scss';
17
- @use './components/drawer.scss';
18
- @use './components/expansion-panel.scss';
19
- @use './components/form.scss';
20
- @use './components/icon-button.scss';
21
- @use './components/list.scss';
22
- @use './components/navbar.scss';
23
- @use './components/overlay.scss';
24
- @use './components/tabs.scss';
25
- @use './components/table.scss';
26
- @use './components/toast.scss';
13
+ @forward './components/breadcrumb.scss';
14
+ @forward './components/button.scss';
15
+ @forward './components/card.scss';
16
+ @forward './components/chip.scss';
17
+ @forward './components/drawer.scss';
18
+ @forward './components/expansion-panel.scss';
19
+ @forward './components/form.scss';
20
+ @forward './components/icon-button.scss';
21
+ @forward './components/list.scss';
22
+ @forward './components/navbar.scss';
23
+ @forward './components/overlay.scss';
24
+ @forward './components/tabs.scss';
25
+ @forward './components/table.scss';
26
+ @forward './components/toast.scss';
package/scss/theme.scss CHANGED
@@ -1,4 +1,6 @@
1
- $theme: (
1
+ @use 'sass:map';
2
+
3
+ $default-theme: (
2
4
  colors: (
3
5
  primary: #715acd,
4
6
  secondary: #595959,
@@ -67,4 +69,8 @@ $theme: (
67
69
  xl: 1200px,
68
70
  xxl: 1400px,
69
71
  ),
70
- ) !default;
72
+ );
73
+
74
+ $theme: () !default; // user overrides via with()
75
+
76
+ $theme: map.deep-merge($default-theme, $theme);
package/scss/utilities.scss CHANGED
@@ -1,18 +1,6 @@
1
1
  @use 'sass:map';
2
2
  @use './theme.scss';
3
3
 
4
- .d-block {
5
- display: block;
6
- }
7
-
8
- .d-inline-block {
9
- display: inline-block;
10
- }
11
-
12
- .d-none {
13
- display: none;
14
- }
15
-
16
4
  // positions
17
5
  @each $value in map.get(theme.$theme, positions) {
18
6
  .position-#{$value} {
@@ -96,13 +84,17 @@ bg-light(top)?
96
84
  }
97
85
 
98
86
  .rounded-circle {
99
- border-radius: 50%;
87
+ border-radius: 50% !important;
100
88
  }
101
89
 
102
90
  .rounded {
103
91
  border-radius: var(--border-radius) !important;
104
92
  }
105
93
 
94
+ .rounded-50 {
95
+ border-radius: 50px !important;
96
+ }
97
+
106
98
  .shadow-none {
107
99
  box-shadow: none !important;
108
100
  }
@@ -203,10 +195,35 @@ bg-light(top)?
203
195
  .w-#{$bp}-30 {
204
196
  width: 30% !important;
205
197
  }
198
+ }
199
+ }
200
+
201
+ // display
202
+ .d-none {
203
+ display: none !important;
204
+ }
205
+
206
+ .d-block {
207
+ display: block !important;
208
+ }
209
+
210
+ .d-inline-block {
211
+ display: inline-block !important;
212
+ }
213
+
214
+ @each $bp, $bp-value in map.get(theme.$theme, breakpoints) {
215
+ @media (min-width: #{$bp-value}) {
216
+ .d-#{$bp}-none {
217
+ display: none !important;
218
+ }
206
219
 
207
220
  .d-#{$bp}-block {
208
221
  display: block !important;
209
222
  }
223
+
224
+ .d-#{$bp}-inline-block {
225
+ display: inline-block !important;
226
+ }
210
227
  }
211
228
  }
212
229
 
package/scss/variables.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  @use 'sass:color';
2
2
  @use 'sass:map';
3
- @use './theme.scss';
3
+ @use './theme.scss' as theme;
4
4
 
5
5
  :root {
6
6
  @each $name, $value in map.get(theme.$theme, colors) {