@avakhula/ui 0.0.106 → 0.0.107

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 +52 -52
  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.107",
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
@@ -2,7 +2,7 @@
2
2
  @import "../../../assets/scss/typography.scss";
3
3
  @import "../../../assets/scss/mixins.scss";
4
4
 
5
- $checkbox-bg-disabled: $gray-100;
5
+ $checkbox-bg-disabled: $neutral-500;
6
6
  $checkbox-border-disabled: $neutral-500;
7
7
  $checkbox-border: $gray-500;
8
8
  $checkbox-bg: transparent;
@@ -101,124 +101,124 @@ $checkbox-bg-indeterminate: $blue-800;
101
101
  }
102
102
  }
103
103
 
104
- &.ib-checkbox-disabled {
105
- cursor: not-allowed;
106
-
104
+ &.ib-checkbox-filled {
107
105
  .ib-checkbox-input {
108
- background-color: $checkbox-bg-disabled;
109
- border-color: $checkbox-border-disabled;
110
- }
106
+ border-color: $checkbox-border-filed;
107
+ background-color: $checkbox-bg-filed;
111
108
 
112
- &:focus {
113
- .ib-checkbox-body {
114
- outline: none!important;
109
+ ion-icon {
110
+ color: $white;
115
111
  }
116
112
  }
117
113
 
118
114
  .ib-checkbox-body {
119
- cursor: default;
120
-
121
115
  &:hover {
122
116
  .ib-checkbox-input {
123
- border-width: 1.25px;
124
- background-color: $checkbox-bg-disabled;
125
- border-color: $checkbox-border-disabled;
117
+ border-color: $checkbox-border-filed-hover;
118
+ background-color: $checkbox-bg-filed-hover;
126
119
  }
127
120
  }
128
121
 
129
122
  &:active {
130
123
  .ib-checkbox-input {
131
- background-color: $checkbox-bg-disabled;
132
- border-color: $checkbox-border-disabled;
124
+ border-color: $checkbox-border-filed-active;
125
+ background-color: $checkbox-bg-filed-active;
133
126
  }
134
127
  }
135
128
  }
136
129
 
137
- .ib-checkbox-label {
138
- color: $checkbox-text-color-disabled;
130
+ &.checkbox-disabled {
131
+ .checkbox-input {
132
+ background-color: $checkbox-bg-filed-disabled;
133
+ border-color: $checkbox-border-filed-disabled;
134
+ }
139
135
  }
140
136
  }
141
137
 
142
- &.ib-has-error {
138
+ &.ib-checkbox-indeterminate {
143
139
  .ib-checkbox-input {
144
- border-width: 2px;
145
- background-color: $checkbox-bg-error;
146
- border-color: $checkbox-border-error;
140
+ border-color: $checkbox-border-indeterminate;
141
+ background-color: $checkbox-bg-indeterminate;
142
+
143
+ ion-icon {
144
+ color: $white;
145
+ }
147
146
  }
148
147
 
149
148
  .ib-checkbox-body {
150
149
  &:hover {
151
150
  .ib-checkbox-input {
152
- border-color: $checkbox-border-error-hover;
153
- background-color: $checkbox-bg-error-hover;
151
+ border-color: $checkbox-border-filed-hover;
152
+ background-color: $checkbox-bg-filed-hover;
154
153
  }
155
154
  }
156
155
 
157
156
  &:active {
158
157
  .ib-checkbox-input {
159
- border-color: $checkbox-border-error-active;
160
- background-color: $checkbox-bg-error-active;
158
+ border-color: $checkbox-border-filed-active;
159
+ background-color: $checkbox-bg-filed-active;
161
160
  }
162
161
  }
163
162
  }
164
163
  }
165
164
 
166
- &.ib-checkbox-filled {
165
+ &.ib-checkbox-disabled {
166
+ cursor: not-allowed;
167
+
167
168
  .ib-checkbox-input {
168
- border-color: $checkbox-border-filed;
169
- background-color: $checkbox-bg-filed;
169
+ background-color: $checkbox-bg-disabled;
170
+ border-color: $checkbox-border-disabled;
171
+ }
170
172
 
171
- ion-icon {
172
- color: $white;
173
+ &:focus {
174
+ .ib-checkbox-body {
175
+ outline: none!important;
173
176
  }
174
177
  }
175
178
 
176
179
  .ib-checkbox-body {
180
+ cursor: default;
181
+
177
182
  &:hover {
178
183
  .ib-checkbox-input {
179
- border-color: $checkbox-border-filed-hover;
180
- background-color: $checkbox-bg-filed-hover;
184
+ border-width: 1.25px;
185
+ background-color: $checkbox-bg-disabled;
186
+ border-color: $checkbox-border-disabled;
181
187
  }
182
188
  }
183
189
 
184
190
  &:active {
185
191
  .ib-checkbox-input {
186
- border-color: $checkbox-border-filed-active;
187
- background-color: $checkbox-bg-filed-active;
192
+ background-color: $checkbox-bg-disabled;
193
+ border-color: $checkbox-border-disabled;
188
194
  }
189
195
  }
190
196
  }
191
197
 
192
- &.checkbox-disabled {
193
- .checkbox-input {
194
- background-color: $checkbox-bg-filed-disabled;
195
- border-color: $checkbox-border-filed-disabled;
196
- }
198
+ .ib-checkbox-label {
199
+ color: $checkbox-text-color-disabled;
197
200
  }
198
201
  }
199
202
 
200
- &.ib-checkbox-indeterminate {
203
+ &.ib-has-error {
201
204
  .ib-checkbox-input {
202
- border-color: $checkbox-border-indeterminate;
203
- background-color: $checkbox-bg-indeterminate;
204
-
205
- ion-icon {
206
- color: $white;
207
- }
205
+ border-width: 2px;
206
+ background-color: $checkbox-bg-error;
207
+ border-color: $checkbox-border-error;
208
208
  }
209
209
 
210
210
  .ib-checkbox-body {
211
211
  &:hover {
212
212
  .ib-checkbox-input {
213
- border-color: $checkbox-border-filed-hover;
214
- background-color: $checkbox-bg-filed-hover;
213
+ border-color: $checkbox-border-error-hover;
214
+ background-color: $checkbox-bg-error-hover;
215
215
  }
216
216
  }
217
217
 
218
218
  &:active {
219
219
  .ib-checkbox-input {
220
- border-color: $checkbox-border-filed-active;
221
- background-color: $checkbox-bg-filed-active;
220
+ border-color: $checkbox-border-error-active;
221
+ background-color: $checkbox-bg-error-active;
222
222
  }
223
223
  }
224
224
  }
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({});