@steroidsjs/bootstrap 3.0.19 → 3.0.20

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/form/DropDownField/DropDownFieldView.scss +1 -1
  2. package/form/InputField/InputFieldView.scss +1 -1
  3. package/form/PasswordField/PasswordFieldView.scss +1 -1
  4. package/form/TextField/TextFieldView.scss +51 -4
  5. package/package.json +1 -1
package/form/DropDownField/DropDownFieldView.scss CHANGED
@@ -410,7 +410,7 @@ $drop-down-color-themes: map.merge(
410
410
 
411
411
  &__icon-close {
412
412
  position: absolute;
413
- z-index: 9;
413
+ z-index: 1;
414
414
  width: 24px;
415
415
  height: 24px;
416
416
 
package/form/InputField/InputFieldView.scss CHANGED
@@ -60,7 +60,7 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
60
60
  }
61
61
 
62
62
  &:not(:disabled):focus {
63
- border: none;
63
+ border-color: transparent;
64
64
  }
65
65
  }
66
66
 
package/form/PasswordField/PasswordFieldView.scss CHANGED
@@ -83,7 +83,7 @@ $eye-filled-color: var(--eye-filled-color);
83
83
  }
84
84
 
85
85
  &:not(:disabled):focus {
86
- border: none;
86
+ border-color: transparent;
87
87
  }
88
88
 
89
89
  &:disabled {
package/form/TextField/TextFieldView.scss CHANGED
@@ -28,6 +28,28 @@ $text-field-active-clear-color: var(--text-field-active-clear-color);
28
28
  }
29
29
  }
30
30
 
31
+ //Statements
32
+ &::before {
33
+ content: '';
34
+ position: absolute;
35
+ z-index: 2;
36
+ top: 0;
37
+ left: 0;
38
+ width: 100%;
39
+ height: 100%;
40
+
41
+ pointer-events: none;
42
+ transform: translate(-1px, -1px);
43
+ opacity: 0;
44
+ transition: opacity 150ms ease-in-out;
45
+ }
46
+
47
+ &:not(#{$root}_disabled):focus-within::before {
48
+ border: 4px solid variables.$primary-light;
49
+ transform: translateX(-4px) translateY(-4px);
50
+ opacity: 1;
51
+ }
52
+
31
53
  &__clear {
32
54
  position: absolute;
33
55
  width: 24px;
@@ -64,6 +86,7 @@ $text-field-active-clear-color: var(--text-field-active-clear-color);
64
86
 
65
87
  padding: 5px 40px 8px 8px;
66
88
 
89
+ font-family: variables.$font-family-nunito;
67
90
  font-size: variables.$font-size-sm;
68
91
  font-weight: 400;
69
92
  line-height: 24px;
@@ -80,10 +103,6 @@ $text-field-active-clear-color: var(--text-field-active-clear-color);
80
103
  border-color: variables.$element-border-color-hover;
81
104
  }
82
105
 
83
- &:focus {
84
- border: 4px solid variables.$primary-light;
85
- }
86
-
87
106
  &:active {
88
107
  border: 1px solid variables.$primary;
89
108
  }
@@ -94,6 +113,10 @@ $text-field-active-clear-color: var(--text-field-active-clear-color);
94
113
  resize: none;
95
114
  }
96
115
 
116
+ &:not(:disabled):focus {
117
+ border-color: transparent;
118
+ }
119
+
97
120
  &:disabled::placeholder {
98
121
  color: variables.$element-placeholder-color-disabled;
99
122
  }
@@ -119,6 +142,14 @@ $text-field-active-clear-color: var(--text-field-active-clear-color);
119
142
  border-radius: variables.$radius-large;
120
143
  font-size: variables.$font-size-lg;
121
144
  }
145
+
146
+ &::before {
147
+ border-radius: variables.$radius-large;
148
+ }
149
+
150
+ &:focus-within::before {
151
+ border-radius: 16px;
152
+ }
122
153
  }
123
154
 
124
155
  &_md {
@@ -128,6 +159,14 @@ $text-field-active-clear-color: var(--text-field-active-clear-color);
128
159
  border-radius: variables.$radius-large;
129
160
  font-size: variables.$font-size-base;
130
161
  }
162
+
163
+ &::before {
164
+ border-radius: variables.$radius-large;
165
+ }
166
+
167
+ &:focus-within::before {
168
+ border-radius: 16px;
169
+ }
131
170
  }
132
171
 
133
172
  &_sm {
@@ -136,6 +175,14 @@ $text-field-active-clear-color: var(--text-field-active-clear-color);
136
175
  border-radius: variables.$radius-small;
137
176
  font-size: variables.$font-size-sm;
138
177
  }
178
+
179
+ &::before {
180
+ border-radius: variables.$radius-small;
181
+ }
182
+
183
+ &:focus-within::before {
184
+ border-radius: 12px;
185
+ }
139
186
  }
140
187
  }
141
188
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@steroidsjs/bootstrap",
3
- "version": "3.0.19",
3
+ "version": "3.0.20",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "author": "Vladimir Kozhin <hello@kozhindev.com>",