@oardi/css-utils 0.21.0 → 0.22.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 (16) hide show
  1. package/package.json +1 -1
  2. package/readme.md +1 -1
  3. package/scss/components/breadcrumb.scss +39 -0
  4. package/scss/components/button.scss +1 -3
  5. package/scss/components/card.scss +1 -3
  6. package/scss/components/chip.scss +1 -11
  7. package/scss/components/drawer.scss +1 -3
  8. package/scss/components/expansion-panel.scss +7 -9
  9. package/scss/components/form.scss +5 -3
  10. package/scss/components/icon-button.scss +1 -3
  11. package/scss/components/list.scss +1 -4
  12. package/scss/components/navbar.scss +15 -0
  13. package/scss/components/tabs.scss +5 -3
  14. package/scss/components.scss +2 -1
  15. package/scss/variables.scss +2 -2
  16. package/scss/components/nav.scss +0 -61
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oardi/css-utils",
3
- "version": "0.21.0",
3
+ "version": "0.22.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
@@ -16,7 +16,7 @@ npm i @oardi/css-utils
16
16
 
17
17
  ### Import SCSS files
18
18
 
19
- This will import the theme with all utility classes and their responsive classes as well as predefined components. This will result in a bundle size around 44kb.
19
+ This will import the theme with all utility classes and their responsive classes as well as predefined components.
20
20
 
21
21
  ```scss
22
22
  @use '@oardi/css-utilss/scss/index.scss';
package/scss/components/breadcrumb.scss ADDED
@@ -0,0 +1,39 @@
1
+ @use 'sass:map';
2
+ @use '../theme.scss';
3
+
4
+ .breadcrumb {
5
+ --breadcrumb-padding-x: 0;
6
+ --breadcrumb-padding-y: 0;
7
+ --breadcrumb-margin-bottom: 1rem;
8
+ --breadcrumb-bg: ;
9
+ --breadcrumb-border-radius: ;
10
+ --breadcrumb-divider-color: var(--secondary);
11
+ --breadcrumb-item-padding-x: 0.5rem;
12
+ --breadcrumb-item-active-color: var(--secondary);
13
+
14
+ display: flex;
15
+ flex-wrap: wrap;
16
+ padding: var(--breadcrumb-padding-y) var(--breadcrumb-padding-x);
17
+ margin-bottom: var(--breadcrumb-margin-bottom);
18
+ font-size: var(--breadcrumb-font-size);
19
+ list-style: none;
20
+ background-color: var(--breadcrumb-bg);
21
+ border-radius: var(--breadcrumb-border-radius);
22
+
23
+ .breadcrumb-item {
24
+ &.active {
25
+ color: var(--breadcrumb-item-active-color);
26
+ }
27
+
28
+ & + .breadcrumb-item {
29
+ padding-left: var(--breadcrumb-item-padding-x);
30
+
31
+ &::before {
32
+ float: left;
33
+ padding-right: var(--breadcrumb-item-padding-x);
34
+ color: var(--breadcrumb-divider-color);
35
+ content: var(--breadcrumb-divider, '/');
36
+ }
37
+ }
38
+ }
39
+ }
package/scss/components/button.scss CHANGED
@@ -1,15 +1,13 @@
1
1
  @use 'sass:map';
2
2
  @use '../theme.scss' as theme;
3
3
 
4
- :root {
4
+ .btn-base {
5
5
  --button-padding: 5px 14px;
6
6
  --button-border-width: 2px;
7
7
  --button-text-highlight: var(--gray-90);
8
8
  --button-icon-highlight: var(--gray-90);
9
9
  --button-disabled-bg-color: var(--gray-80);
10
- }
11
10
 
12
- .btn-base {
13
11
  border-width: var(--button-border-width);
14
12
  border-style: solid;
15
13
  background-color: transparent;
package/scss/components/card.scss CHANGED
@@ -1,11 +1,9 @@
1
- :root {
1
+ .card {
2
2
  --card-bg-color: var(--white);
3
3
  --card-border-color: transparent;
4
4
  --card-border-width: 1px;
5
5
  --card-body-padding: 1rem;
6
- }
7
6
 
8
- .card {
9
7
  background-color: var(--card-bg-color);
10
8
  border: var(--card-border-width) solid var(--card-border-color);
11
9
  border-radius: var(--border-radius);
package/scss/components/chip.scss CHANGED
@@ -1,15 +1,13 @@
1
1
  @use 'sass:map';
2
2
  @use '../theme.scss';
3
3
 
4
- :root {
4
+ .chip-base {
5
5
  --chip-label-padding: 0 7px;
6
6
  --chip-border-width: 2px;
7
7
  --chip-text-highlight: var(--gray-90);
8
8
  --chip-border-radius: 16px;
9
9
  --chip-disabled-bg-color: var(--gray-80);
10
- }
11
10
 
12
- .chip-base {
13
11
  display: inline-flex;
14
12
  border-width: var(--button-border-width);
15
13
  border-style: solid;
@@ -70,10 +68,6 @@
70
68
  background-color: var(--#{$name}-dark);
71
69
  border-color: var(--#{$name}-dark);
72
70
  }
73
-
74
- // &:focus {
75
- // box-shadow: 0 0 0 0.2rem var(--#{$name}-light);
76
- // }
77
71
  }
78
72
 
79
73
  .chip-#{$name}-outline {
@@ -87,9 +81,5 @@
87
81
  background-color: var(--#{$name}-dark);
88
82
  border-color: var(--#{$name}-dark);
89
83
  }
90
-
91
- // &:focus {
92
- // box-shadow: 0 0 0 0.2rem var(--#{$name}-light);
93
- // }
94
84
  }
95
85
  }
package/scss/components/drawer.scss CHANGED
@@ -1,8 +1,6 @@
1
- :root {
1
+ .drawer {
2
2
  --drawer-bg-color: #ffffff;
3
- }
4
3
 
5
- .drawer {
6
4
  display: flex;
7
5
  flex-direction: column;
8
6
  position: fixed;
package/scss/components/expansion-panel.scss CHANGED
@@ -1,18 +1,16 @@
1
- :root {
2
- --expansion-panel-border-color: var(--gray-90);
3
- --expansion-panel-header-bg-color: #ffffff;
4
- --expansion-panel-content-bg-color: #ffffff;
5
- --expansion-panel-header-hover-bg-color: var(--highlight);
6
- --expansion-panel-header-padding: 1.25rem 2.5rem 1.25rem 1.25rem;
7
- --expansion-panel-inner-padding: 1.25rem;
8
- }
9
-
10
1
  .expansion-panel-container {
11
2
  display: flex;
12
3
  flex-direction: column;
13
4
  gap: 0.5rem;
14
5
 
15
6
  .expansion-panel {
7
+ --expansion-panel-border-color: var(--gray-90);
8
+ --expansion-panel-header-bg-color: #ffffff;
9
+ --expansion-panel-content-bg-color: #ffffff;
10
+ --expansion-panel-header-hover-bg-color: var(--highlight);
11
+ --expansion-panel-header-padding: 1.25rem 2.5rem 1.25rem 1.25rem;
12
+ --expansion-panel-inner-padding: 1.25rem;
13
+
16
14
  color: var(--font-color);
17
15
  border: 1px solid var(--expansion-panel-border-color);
18
16
  border-radius: var(--border-radius);
package/scss/components/form.scss CHANGED
@@ -1,10 +1,8 @@
1
- :root {
1
+ .form-control {
2
2
  --input-bg-color: #ffffff;
3
3
  --input-border-width: 1px;
4
4
  --input-border-color: var(--gray-80);
5
- }
6
5
 
7
- .form-control {
8
6
  display: block;
9
7
  width: 100%;
10
8
  padding: 0.375rem 0.75rem;
@@ -56,6 +54,10 @@ textarea.form-control {
56
54
  }
57
55
 
58
56
  .form-check {
57
+ --input-bg-color: #ffffff;
58
+ --input-border-width: 1px;
59
+ --input-border-color: var(--gray-80);
60
+
59
61
  display: flex;
60
62
  flex-direction: row;
61
63
  align-items: center;
package/scss/components/icon-button.scss CHANGED
@@ -8,14 +8,12 @@ $sizes: (
8
8
  lg: 44px,
9
9
  );
10
10
 
11
- :root {
11
+ .icon-btn {
12
12
  --icon-button-padding: 0.25rem;
13
13
  --icon-button-border-width: 2px;
14
14
  --icon-button-highlight: var(--gray-90);
15
15
  --icon-button-disabled-bg-color: none;
16
- }
17
16
 
18
- .icon-btn {
19
17
  fill: var(--font-color);
20
18
  padding: var(--icon-button-padding);
21
19
  min-width: 40px;
package/scss/components/list.scss CHANGED
@@ -1,13 +1,11 @@
1
- :root {
1
+ .list {
2
2
  --list-border-color: transparent;
3
3
  --list-border-width: 1px;
4
4
  --list-padding: 0rem;
5
5
  --list-item-padding: 1rem;
6
6
  --list-item-bg-color: var(--white);
7
7
  // --list-item-hover-bg-color: var(--highlight);
8
- }
9
8
 
10
- .list {
11
9
  border: var(--list-border-width) solid var(--list-border-color);
12
10
  padding: var(--list-padding);
13
11
  list-style-type: none;
@@ -24,7 +22,6 @@
24
22
  &.is-active,
25
23
  &:hover {
26
24
  cursor: pointer;
27
- // background-color: var(--list-item-hover-bg-color);
28
25
  color: var(--primary);
29
26
  fill: var(--primary);
30
27
  text-decoration: none;
package/scss/components/navbar.scss ADDED
@@ -0,0 +1,15 @@
1
+ .navbar {
2
+ --nav-bg-color: #ffffff;
3
+
4
+ padding-top: 0.6rem;
5
+ padding-bottom: 0.6rem;
6
+ background-color: var(--nav-bg-color);
7
+ min-height: 60px;
8
+ display: flex;
9
+ align-items: center;
10
+ }
11
+
12
+ .navbar .logo:hover {
13
+ text-decoration: none;
14
+ color: var(--primary-dark);
15
+ }
package/scss/components/tabs.scss CHANGED
@@ -1,10 +1,8 @@
1
- :root {
1
+ .tabs {
2
2
  --tab-highlight: var(--highlight);
3
3
  --tab-bg-color: var(--white);
4
4
  --tab-content-bg-color: var(--white);
5
- }
6
5
 
7
- .tabs {
8
6
  display: flex;
9
7
  cursor: pointer;
10
8
  -webkit-tap-highlight-color: transparent;
@@ -20,6 +18,8 @@
20
18
  border-bottom: 3px solid var(--gray-80);
21
19
  flex: 1 0 auto;
22
20
 
21
+ transition: all 0.3s ease;
22
+
23
23
  &.active {
24
24
  color: var(--primary);
25
25
  border-bottom: 3px solid var(--primary);
@@ -44,6 +44,8 @@
44
44
  padding: 20px;
45
45
  background-color: var(--tab-content-bg-color);
46
46
 
47
+ transition: all 0.3s ease;
48
+
47
49
  &.active {
48
50
  display: block;
49
51
  }
package/scss/components.scss CHANGED
@@ -1,3 +1,4 @@
1
+ @use './components/breadcrumb.scss';
1
2
  @use './components/button.scss';
2
3
  @use './components/card.scss';
3
4
  @use './components/chip.scss';
@@ -6,7 +7,7 @@
6
7
  @use './components/form.scss';
7
8
  @use './components/icon-button.scss';
8
9
  @use './components/list.scss';
9
- @use './components/nav.scss';
10
+ @use './components/navbar.scss';
10
11
  @use './components/overlay.scss';
11
12
  @use './components/tabs.scss';
12
13
  @use './components/toast.scss';
package/scss/variables.scss CHANGED
@@ -29,11 +29,11 @@
29
29
 
30
30
  --shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.075);
31
31
  --shadow-dark: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.1);
32
- --shadow-light: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.005);
32
+ --shadow-light: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.025);
33
33
 
34
34
  --focus-outline: 2px solid var(--primary-light);
35
35
  --focus-outline-error: 2px solid var(--error-light);
36
36
  --focus-offset: -2px;
37
37
 
38
- --container: 780px;
38
+ --container: 900px;
39
39
  }
package/scss/components/nav.scss DELETED
@@ -1,61 +0,0 @@
1
- :root {
2
- --nav-bg-color: #ffffff;
3
- }
4
-
5
- nav {
6
- padding-top: 0.6rem;
7
- padding-bottom: 0.6rem;
8
- background-color: var(--nav-bg-color);
9
- min-height: 60px;
10
- display: flex;
11
- align-items: center;
12
- }
13
-
14
- nav .logo:hover {
15
- text-decoration: none;
16
- color: var(--primary-dark);
17
- }
18
-
19
- nav .nav-open,
20
- nav .nav-close {
21
- display: none;
22
- border: none;
23
- }
24
-
25
- nav .nav-open svg,
26
- nav .nav-close svg {
27
- height: 20px;
28
- }
29
-
30
- nav .nav-open:hover,
31
- nav .nav-close:hover {
32
- background-color: var(--gray-90);
33
- }
34
-
35
- nav .menu {
36
- background-color: var(--white);
37
- }
38
-
39
- nav .menu ul {
40
- display: flex;
41
- align-items: center;
42
- list-style: none;
43
- }
44
-
45
- nav .menu ul li {
46
- display: flex;
47
- border-radius: var(--border-radius);
48
- }
49
-
50
- nav .menu ul li:hover {
51
- background-color: var(--gray-90);
52
- }
53
-
54
- nav .menu ul li:hover a {
55
- color: var(--primary-dark);
56
- }
57
-
58
- nav .menu ul li a {
59
- padding: 0.75rem 0.75rem;
60
- text-decoration: none;
61
- }