@oardi/css-utils 0.26.3 → 0.27.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 (6) hide show
  1. package/package.json +1 -1
  2. package/readme.md +3 -2
  3. package/scss/spacings.scss +11 -0
  4. package/scss/theme.scss +5 -0
  5. package/scss/utilities.scss +18 -7
  6. package/scss/variables.scss +3 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oardi/css-utils",
3
- "version": "0.26.3",
3
+ "version": "0.27.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/readme.md CHANGED
@@ -2,6 +2,8 @@
2
2
 
3
3
  Powerful set of CSS Utility classes for Colors, Typography, Spacings, Flex and CSS Grid.
4
4
 
5
+ <!-- [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/edit/oardi-css-utils/) -->
6
+
5
7
  ## Showcase
6
8
 
7
9
  - Browse the Showcase [here](https://css-utils.oardi.com/)
@@ -17,11 +19,10 @@ npm i @oardi/css-utils
17
19
 
18
20
  ### Import SCSS files
19
21
 
20
- This will import the theme with all utility classes and their responsive classes as well as predefined components.
22
+ Import the theme with all utility classes and their responsive classes as well as predefined components.
21
23
 
22
24
  ```scss
23
25
  @use '@oardi/css-utilss/scss/index.scss';
24
- @use '@oardi/css-utils/scss/components.scss';
25
26
  ```
26
27
 
27
28
  ### Use Utility classes
package/scss/spacings.scss CHANGED
@@ -4,8 +4,18 @@
4
4
  .ml-auto {
5
5
  margin-left: auto;
6
6
  }
7
+ .mr-auto {
8
+ margin-right: auto;
9
+ }
10
+ .mt-auto {
11
+ margin-top: auto;
12
+ }
13
+ .mb-auto {
14
+ margin-bottom: auto;
15
+ }
7
16
 
8
17
  // margin / padding spacings
18
+ // i.e. m-2, m-5, p-1, ...
9
19
  @each $key, $value in map.get(theme.$theme, spacings) {
10
20
  .m-#{$key} {
11
21
  margin: $value;
@@ -17,6 +27,7 @@
17
27
  }
18
28
 
19
29
  // margin / padding with directions
30
+ // i.e. mt-2, mb-5, pt-1, ...
20
31
  @each $key, $value in map.get(theme.$theme, spacings) {
21
32
  @each $dir, $prop in map.get(theme.$theme, directions) {
22
33
  .m#{$dir}-#{$key} {
package/scss/theme.scss CHANGED
@@ -27,8 +27,12 @@ $theme: (
27
27
  directions: (
28
28
  t: top,
29
29
  r: right,
30
+ // rename r to e -> end
30
31
  b: bottom,
31
32
  l: left,
33
+ // rename l to s -> start
34
+ // add x for left and right
35
+ // add y for top and bottom
32
36
  ),
33
37
  spacings: (
34
38
  0: 0rem,
@@ -37,6 +41,7 @@ $theme: (
37
41
  3: 3rem,
38
42
  4: 4rem,
39
43
  5: 5rem,
44
+ // add auto
40
45
  ),
41
46
  positions: (
42
47
  relative,
package/scss/utilities.scss CHANGED
@@ -29,15 +29,16 @@
29
29
  width: 100%;
30
30
  }
31
31
 
32
+ // add responsive
32
33
  .text-center {
33
34
  text-align: center;
34
35
  }
35
36
 
36
- .text-left {
37
+ .text-start {
37
38
  text-align: left;
38
39
  }
39
40
 
40
- .text-right {
41
+ .text-end {
41
42
  text-align: right;
42
43
  }
43
44
 
@@ -98,16 +99,24 @@ bg-light(top)?
98
99
  border-radius: 50%;
99
100
  }
100
101
 
101
- .shadow-light {
102
- box-shadow: var(--shadow-light);
102
+ .rounded {
103
+ border-radius: var(--border-radius) !important;
104
+ }
105
+
106
+ .shadow-none {
107
+ box-shadow: none !important;
108
+ }
109
+
110
+ .shadow-sm {
111
+ box-shadow: var(--shadow-sm) !important;
103
112
  }
104
113
 
105
114
  .shadow {
106
- box-shadow: var(--shadow);
115
+ box-shadow: var(--shadow) !important;
107
116
  }
108
117
 
109
- .shadow-dark {
110
- box-shadow: var(--shadow-dark);
118
+ .shadow-lg {
119
+ box-shadow: var(--shadow-lg) !important;
111
120
  }
112
121
 
113
122
  .w-100 {
@@ -126,11 +135,13 @@ bg-light(top)?
126
135
  width: 40%;
127
136
  }
128
137
 
138
+ // TODO - add several heights
129
139
  .h-100 {
130
140
  height: 100%;
131
141
  }
132
142
 
133
143
  // TODO - check if more classes are needed
144
+ // arrange elements top, start, bottom, end
134
145
  .top-0 {
135
146
  top: 0px;
136
147
  }
package/scss/variables.scss CHANGED
@@ -33,9 +33,9 @@
33
33
  --disabled-bg-color: var(--gray-80);
34
34
  --disabled-border-color: var(--gray-80);
35
35
 
36
- --shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.075);
37
- --shadow-dark: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.1);
38
- --shadow-light: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.025);
36
+ --shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
37
+ --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
38
+ --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
39
39
 
40
40
  --focus-outline: 2px solid var(--primary-light);
41
41
  --focus-outline-error: 2px solid var(--error-light);