@avakhula/ui 0.0.106 → 0.0.108

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 (4) hide show
  1. package/dist/style.css +1 -1
  2. package/package.json +1 -1
  3. package/src/components/Form/Checkbox/Checkbox.scss +70 -50
  4. package/src/components/Form/Checkbox/Checkbox.stories.js +4 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@avakhula/ui",
3
- "version": "0.0.106",
3
+ "version": "0.0.108",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.umd.cjs",
6
6
  "source": "src/index.js",
package/src/components/Form/Checkbox/Checkbox.scss CHANGED
@@ -3,6 +3,7 @@
3
3
  @import "../../../assets/scss/mixins.scss";
4
4
 
5
5
  $checkbox-bg-disabled: $gray-100;
6
+ $checkbox-filed-bg-disabled: $neutral-500;
6
7
  $checkbox-border-disabled: $neutral-500;
7
8
  $checkbox-border: $gray-500;
8
9
  $checkbox-bg: transparent;
@@ -101,124 +102,143 @@ $checkbox-bg-indeterminate: $blue-800;
101
102
  }
102
103
  }
103
104
 
104
- &.ib-checkbox-disabled {
105
- cursor: not-allowed;
106
-
105
+ &.ib-checkbox-filled {
107
106
  .ib-checkbox-input {
108
- background-color: $checkbox-bg-disabled;
109
- border-color: $checkbox-border-disabled;
110
- }
107
+ border-color: $checkbox-border-filed;
108
+ background-color: $checkbox-bg-filed;
111
109
 
112
- &:focus {
113
- .ib-checkbox-body {
114
- outline: none!important;
110
+ ion-icon {
111
+ color: $white;
115
112
  }
116
113
  }
117
114
 
118
115
  .ib-checkbox-body {
119
- cursor: default;
120
-
121
116
  &:hover {
122
117
  .ib-checkbox-input {
123
- border-width: 1.25px;
124
- background-color: $checkbox-bg-disabled;
125
- border-color: $checkbox-border-disabled;
118
+ border-color: $checkbox-border-filed-hover;
119
+ background-color: $checkbox-bg-filed-hover;
126
120
  }
127
121
  }
128
122
 
129
123
  &:active {
130
124
  .ib-checkbox-input {
131
- background-color: $checkbox-bg-disabled;
132
- border-color: $checkbox-border-disabled;
125
+ border-color: $checkbox-border-filed-active;
126
+ background-color: $checkbox-bg-filed-active;
133
127
  }
134
128
  }
135
129
  }
136
130
 
137
- .ib-checkbox-label {
138
- color: $checkbox-text-color-disabled;
131
+ &.checkbox-disabled {
132
+ .checkbox-input {
133
+ background-color: $checkbox-bg-filed-disabled;
134
+ border-color: $checkbox-border-filed-disabled;
135
+ }
139
136
  }
140
137
  }
141
138
 
142
- &.ib-has-error {
139
+ &.ib-checkbox-indeterminate {
143
140
  .ib-checkbox-input {
144
- border-width: 2px;
145
- background-color: $checkbox-bg-error;
146
- border-color: $checkbox-border-error;
141
+ border-color: $checkbox-border-indeterminate;
142
+ background-color: $checkbox-bg-indeterminate;
143
+
144
+ ion-icon {
145
+ color: $white;
146
+ }
147
147
  }
148
148
 
149
149
  .ib-checkbox-body {
150
150
  &:hover {
151
151
  .ib-checkbox-input {
152
- border-color: $checkbox-border-error-hover;
153
- background-color: $checkbox-bg-error-hover;
152
+ border-color: $checkbox-border-filed-hover;
153
+ background-color: $checkbox-bg-filed-hover;
154
154
  }
155
155
  }
156
156
 
157
157
  &:active {
158
158
  .ib-checkbox-input {
159
- border-color: $checkbox-border-error-active;
160
- background-color: $checkbox-bg-error-active;
159
+ border-color: $checkbox-border-filed-active;
160
+ background-color: $checkbox-bg-filed-active;
161
161
  }
162
162
  }
163
163
  }
164
164
  }
165
165
 
166
- &.ib-checkbox-filled {
166
+ &.ib-checkbox-disabled {
167
+ cursor: not-allowed;
168
+
167
169
  .ib-checkbox-input {
168
- border-color: $checkbox-border-filed;
169
- background-color: $checkbox-bg-filed;
170
+ background-color: $checkbox-bg-disabled;
171
+ border-color: $checkbox-border-disabled;
172
+ }
170
173
 
171
- ion-icon {
172
- color: $white;
174
+ &:focus {
175
+ .ib-checkbox-body {
176
+ outline: none!important;
173
177
  }
174
178
  }
175
179
 
176
180
  .ib-checkbox-body {
181
+ cursor: default;
182
+
177
183
  &:hover {
178
184
  .ib-checkbox-input {
179
- border-color: $checkbox-border-filed-hover;
180
- background-color: $checkbox-bg-filed-hover;
185
+ border-width: 1.25px;
186
+ background-color: $checkbox-bg-disabled;
187
+ border-color: $checkbox-border-disabled;
181
188
  }
182
189
  }
183
190
 
184
191
  &:active {
185
192
  .ib-checkbox-input {
186
- border-color: $checkbox-border-filed-active;
187
- background-color: $checkbox-bg-filed-active;
193
+ background-color: $checkbox-bg-disabled;
194
+ border-color: $checkbox-border-disabled;
188
195
  }
189
196
  }
190
197
  }
191
198
 
192
- &.checkbox-disabled {
193
- .checkbox-input {
194
- background-color: $checkbox-bg-filed-disabled;
195
- border-color: $checkbox-border-filed-disabled;
199
+ .ib-checkbox-label {
200
+ color: $checkbox-text-color-disabled;
201
+ }
202
+
203
+ &.ib-checkbox-filled,
204
+ &.ib-checkbox-indeterminate{
205
+ .ib-checkbox-input {
206
+ background-color: $checkbox-filed-bg-disabled;
207
+ }
208
+
209
+ &:hover {
210
+ .ib-checkbox-input {
211
+ background-color: $checkbox-filed-bg-disabled;
212
+ }
213
+ }
214
+
215
+ &:active {
216
+ .ib-checkbox-input {
217
+ background-color: $checkbox-filed-bg-disabled;
218
+ }
196
219
  }
197
220
  }
198
221
  }
199
222
 
200
- &.ib-checkbox-indeterminate {
223
+ &.ib-has-error {
201
224
  .ib-checkbox-input {
202
- border-color: $checkbox-border-indeterminate;
203
- background-color: $checkbox-bg-indeterminate;
204
-
205
- ion-icon {
206
- color: $white;
207
- }
225
+ border-width: 2px;
226
+ background-color: $checkbox-bg-error;
227
+ border-color: $checkbox-border-error;
208
228
  }
209
229
 
210
230
  .ib-checkbox-body {
211
231
  &:hover {
212
232
  .ib-checkbox-input {
213
- border-color: $checkbox-border-filed-hover;
214
- background-color: $checkbox-bg-filed-hover;
233
+ border-color: $checkbox-border-error-hover;
234
+ background-color: $checkbox-bg-error-hover;
215
235
  }
216
236
  }
217
237
 
218
238
  &:active {
219
239
  .ib-checkbox-input {
220
- border-color: $checkbox-border-filed-active;
221
- background-color: $checkbox-bg-filed-active;
240
+ border-color: $checkbox-border-error-active;
241
+ background-color: $checkbox-bg-error-active;
222
242
  }
223
243
  }
224
244
  }
package/src/components/Form/Checkbox/Checkbox.stories.js CHANGED
@@ -36,7 +36,9 @@ const IndeterminateTemplate = (args) => ({
36
36
  setup() {
37
37
  return { args };
38
38
  },
39
- template: '<ib-checkbox :is-checked="null" label="Indeterminate" />',
39
+
40
+ template:
41
+ '<ib-checkbox v-bind="args" :is-checked="null" label="Indeterminate" />',
40
42
  });
41
43
 
42
44
  export const Indeterminate = IndeterminateTemplate.bind({});
@@ -56,7 +58,7 @@ const ErrorTemplate = (args) => ({
56
58
  setup() {
57
59
  return { args };
58
60
  },
59
- template: '<ib-checkbox :error="true" label="Remember me" />',
61
+ template: '<ib-checkbox v-bind="args" :error="true" label="Remember me" />',
60
62
  });
61
63
 
62
64
  export const Error = ErrorTemplate.bind({});