@oardi/css-utils 0.19.4 → 0.19.5

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/components/button.scss +8 -6
  3. package/scss/components/chip.scss +7 -14
  4. package/scss/components/expansion-panel.scss +2 -3
  5. package/scss/components/form.scss +11 -8
  6. package/scss/components/icon-button.scss +6 -8
  7. package/scss/components/tabs.scss +3 -2
  8. package/scss/typography.scss +2 -2
  9. package/scss/variables.scss +4 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oardi/css-utils",
3
- "version": "0.19.4",
3
+ "version": "0.19.5",
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/components/button.scss CHANGED
@@ -31,8 +31,8 @@
31
31
  }
32
32
 
33
33
  &:focus {
34
- outline: 0;
35
- box-shadow: 0 0 0 0.2rem var(--font-color);
34
+ outline: var(--focus-outline);
35
+ outline-offset: var(--focus-offset);
36
36
  }
37
37
  }
38
38
 
@@ -52,9 +52,9 @@
52
52
  &[disabled]:hover,
53
53
  &[active]:hover {
54
54
  color: var(--gray-30);
55
+ outline: 0;
55
56
  box-shadow: none;
56
57
  background-color: var(--button-disabled-bg-color);
57
- outline: 0;
58
58
  border-color: var(--button-disabled-bg-color);
59
59
  }
60
60
  }
@@ -72,7 +72,7 @@
72
72
  }
73
73
 
74
74
  &:focus {
75
- box-shadow: 0 0 0 0.2rem var(--#{$name}-light);
75
+ outline: 3px solid var(--#{$name}-light);
76
76
  }
77
77
  }
78
78
 
@@ -89,7 +89,9 @@
89
89
  }
90
90
 
91
91
  &:focus {
92
- box-shadow: 0 0 0 0.2rem var(--#{$name}-light);
92
+ color: var(--on-#{$name});
93
+ outline: 3px solid var(--#{$name}-light);
94
+ background-color: var(--#{$name});
93
95
  }
94
96
  }
95
97
 
@@ -97,7 +99,7 @@
97
99
  color: var(--#{$name});
98
100
 
99
101
  &:focus {
100
- box-shadow: 0 0 0 0.2rem var(--#{$name}-light);
102
+ outline: 3px solid var(--#{$name}-light);
101
103
  }
102
104
  }
103
105
  }
package/scss/components/chip.scss CHANGED
@@ -28,12 +28,6 @@
28
28
  &[data-disabled]:hover,
29
29
  [data-disabled]:focus {
30
30
  cursor: not-allowed;
31
- box-shadow: none;
32
- }
33
-
34
- &:focus {
35
- outline: 0;
36
- box-shadow: 0 0 0 0.2rem var(--font-color);
37
31
  }
38
32
  }
39
33
 
@@ -52,9 +46,8 @@
52
46
  &[data-disabled]:hover,
53
47
  &[active]:hover {
54
48
  color: var(--gray-30);
55
- box-shadow: none;
56
- background-color: var(--button-disabled-bg-color);
57
49
  outline: 0;
50
+ background-color: var(--button-disabled-bg-color);
58
51
  border-color: var(--button-disabled-bg-color);
59
52
  }
60
53
 
@@ -78,9 +71,9 @@
78
71
  border-color: var(--#{$name}-dark);
79
72
  }
80
73
 
81
- &:focus {
82
- box-shadow: 0 0 0 0.2rem var(--#{$name}-light);
83
- }
74
+ // &:focus {
75
+ // box-shadow: 0 0 0 0.2rem var(--#{$name}-light);
76
+ // }
84
77
  }
85
78
 
86
79
  .chip-#{$name}-outline {
@@ -95,8 +88,8 @@
95
88
  border-color: var(--#{$name}-dark);
96
89
  }
97
90
 
98
- &:focus {
99
- box-shadow: 0 0 0 0.2rem var(--#{$name}-light);
100
- }
91
+ // &:focus {
92
+ // box-shadow: 0 0 0 0.2rem var(--#{$name}-light);
93
+ // }
101
94
  }
102
95
  }
package/scss/components/expansion-panel.scss CHANGED
@@ -20,14 +20,13 @@
20
20
  transition: all 0.3s ease;
21
21
 
22
22
  &:focus {
23
- outline: 0;
24
- box-shadow: var(--box-shadow);
23
+ outline: var(--focus-outline);
24
+ outline-offset: var(--focus-offset);
25
25
  }
26
26
 
27
27
  .expansion-panel-header {
28
28
  display: flex;
29
29
  align-items: center;
30
- background-color: var(--expansion-panel-header-bg-color);
31
30
  padding: var(--expansion-panel-header-padding);
32
31
  border-top-left-radius: var(--border-radius);
33
32
  border-top-right-radius: var(--border-radius);
package/scss/components/form.scss CHANGED
@@ -24,15 +24,17 @@
24
24
  &:focus {
25
25
  background-color: var(--input-bg-color);
26
26
  border-color: var(--primary-dark);
27
- outline: 0;
28
- box-shadow: var(--box-shadow);
27
+ outline: var(--focus-outline);
28
+ outline-offset: var(--focus-offset);
29
29
  }
30
30
 
31
31
  &.invalid {
32
+ color: var(--error);
32
33
  border: var(--input-border-width) solid var(--error) !important;
33
34
  padding-right: calc(1.5em + 0.75rem) !important;
34
35
  &:focus {
35
- box-shadow: var(--box-shadow-error);
36
+ outline: var(--focus-outline-error);
37
+ outline-offset: var(--focus-offset);
36
38
  }
37
39
  }
38
40
 
@@ -40,7 +42,7 @@
40
42
  &[disabled]:hover,
41
43
  &[disabled]:focus {
42
44
  cursor: not-allowed;
43
- box-shadow: none;
45
+ outline: 0;
44
46
  background-color: var(--gray-90);
45
47
  }
46
48
 
@@ -93,7 +95,8 @@ textarea.form-control {
93
95
  border: var(--input-border-width) solid var(--error) !important;
94
96
 
95
97
  &:focus {
96
- box-shadow: var(--box-shadow-error);
98
+ outline: var(--focus-outline-error);
99
+ outline-offset: var(--focus-offset);
97
100
  }
98
101
  }
99
102
 
@@ -102,15 +105,15 @@ textarea.form-control {
102
105
  }
103
106
 
104
107
  &:focus {
105
- box-shadow: var(--box-shadow);
106
- outline: 0;
108
+ outline: var(--focus-outline);
109
+ outline-offset: var(--focus-offset);
107
110
  }
108
111
 
109
112
  &[disabled],
110
113
  &[disabled]:hover,
111
114
  &[disabled]:focus {
112
115
  cursor: not-allowed;
113
- box-shadow: none;
116
+ outline: 0;
114
117
  background-color: var(--gray-90);
115
118
  }
116
119
  }
package/scss/components/icon-button.scss CHANGED
@@ -53,14 +53,13 @@ $sizes: (
53
53
  color: var(--gray-80);
54
54
  fill: var(--gray-80);
55
55
  cursor: not-allowed;
56
- box-shadow: none;
57
- background-color: var(--icon-button-disabled-bg-color);
58
56
  outline: 0;
57
+ background-color: var(--icon-button-disabled-bg-color);
59
58
  }
60
59
 
61
60
  &:focus {
62
- outline: 0;
63
- box-shadow: 0 0 0 0.2rem var(--font-color);
61
+ outline: var(--focus-outline);
62
+ outline-offset: var(--focus-offset);
64
63
  }
65
64
  }
66
65
 
@@ -82,12 +81,11 @@ $sizes: (
82
81
  color: var(--#{$name});
83
82
  fill: var(--#{$name});
84
83
  background-color: transparent;
85
- box-shadow: 0 0 0 0.2rem transparent;
86
84
 
87
85
  &:hover,
88
86
  &:active,
89
87
  &:focus {
90
- box-shadow: 0 0 0 0.2rem var(--icon-button-highlight);
88
+ outline: 3px solid var(--#{$name}-light);
91
89
  color: var(--on-#{$name});
92
90
  }
93
91
 
@@ -98,8 +96,8 @@ $sizes: (
98
96
  fill: var(--#{$name}-light);
99
97
  cursor: not-allowed;
100
98
  box-shadow: none;
101
- background-color: var(--icon-button-disabled-bg-color);
102
99
  outline: 0;
100
+ background-color: var(--icon-button-disabled-bg-color);
103
101
  }
104
102
  }
105
103
 
@@ -112,7 +110,7 @@ $sizes: (
112
110
  &:hover,
113
111
  &:active,
114
112
  &:focus {
115
- box-shadow: 0 0 0 0.2rem var(--#{$name});
113
+ --focus-outline: 3px solid var(--#{$name}-light);
116
114
  background-color: var(--#{$name}-dark);
117
115
  }
118
116
 
package/scss/components/tabs.scss CHANGED
@@ -26,8 +26,9 @@
26
26
  }
27
27
 
28
28
  &:focus {
29
- outline: 0;
30
- // box-shadow: var(--box-shadow);
29
+ outline: 3px solid var(--primary-light);
30
+ outline-offset: -3px;
31
+ color: var(--primary);
31
32
  z-index: 10;
32
33
  }
33
34
 
package/scss/typography.scss CHANGED
@@ -68,8 +68,8 @@ a {
68
68
  }
69
69
 
70
70
  &:focus {
71
- outline: 0;
72
- box-shadow: var(--box-shadow);
71
+ outline: var(--focus-outline);
72
+ outline-offset: var(--focus-offset);
73
73
  }
74
74
  }
75
75
 
package/scss/variables.scss CHANGED
@@ -34,5 +34,9 @@
34
34
  --box-shadow: 0 0 0 0.2rem var(--primary-light);
35
35
  --box-shadow-error: 0 0 0 0.2rem var(--error-light);
36
36
 
37
+ --focus-outline: 2px solid var(--primary-light);
38
+ --focus-outline-error: 2px solid var(--error-light);
39
+ --focus-offset: -2px;
40
+
37
41
  --container: 900px;
38
42
  }