bkui-vue 0.0.2-beta.57 → 0.0.2-beta.59

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.
@@ -41,6 +41,11 @@
41
41
  border-color: #5594fa;
42
42
  color: white;
43
43
  }
44
+ .bk-button.bk-button-primary.is-outline:active {
45
+ background-color: #2c77f4;
46
+ border-color: #2c77f4;
47
+ color: white;
48
+ }
44
49
  .bk-button.bk-button-primary.is-text {
45
50
  color: #3a84ff;
46
51
  background-color: transparent;
@@ -87,6 +92,11 @@
87
92
  border-color: #ffb848;
88
93
  color: white;
89
94
  }
95
+ .bk-button.bk-button-warning.is-outline:active {
96
+ background-color: #eb9000;
97
+ border-color: #eb9000;
98
+ color: white;
99
+ }
90
100
  .bk-button.bk-button-warning.is-text {
91
101
  color: #ff9c01;
92
102
  background-color: transparent;
@@ -133,6 +143,11 @@
133
143
  border-color: #45e35f;
134
144
  color: white;
135
145
  }
146
+ .bk-button.bk-button-success.is-outline:active {
147
+ background-color: #1ab943;
148
+ border-color: #1ab943;
149
+ color: white;
150
+ }
136
151
  .bk-button.bk-button-success.is-text {
137
152
  color: #2dcb56;
138
153
  background-color: transparent;
@@ -179,6 +194,11 @@
179
194
  border-color: #ff5656;
180
195
  color: white;
181
196
  }
197
+ .bk-button.bk-button-danger.is-outline:active {
198
+ background-color: #db2626;
199
+ border-color: #db2626;
200
+ color: white;
201
+ }
182
202
  .bk-button.bk-button-danger.is-text {
183
203
  color: #ea3636;
184
204
  background-color: transparent;
@@ -33,11 +33,12 @@
33
33
  appearance: none;
34
34
  align-items: center;
35
35
  justify-content: center;
36
-
36
+
37
37
  each(@themeSelectors, {
38
38
  @color: '@{value}-color';
39
39
  @hoverColor: 'button-@{value}-hover-color';
40
40
  @activeColor: 'button-@{value}-active-color';
41
+
41
42
  &.@{bk-prefix}-button-@{value} {
42
43
  background-color: @@color;
43
44
  color: @white-color;
@@ -64,22 +65,31 @@
64
65
  border-color: @@hoverColor;
65
66
  color: @white-color;
66
67
  }
68
+
69
+ &:active {
70
+ background-color: @@activeColor;
71
+ border-color: @@activeColor;
72
+ color: @white-color;
73
+ }
67
74
  }
68
75
 
69
76
  &.is-text {
70
77
  color: @@color;
71
78
  background-color: transparent;
72
79
  border: none;
80
+
73
81
  &:not(.is-disabled):hover {
74
82
  color: @@hoverColor;
75
83
  }
76
84
  }
85
+
77
86
  &.is-disabled {
78
87
  &:not(.is-text) {
79
88
  background-color: @disable-color;
80
89
  color: @white-color;
81
90
  border-color: @disable-color;
82
91
  }
92
+
83
93
  color: @disable-color;
84
94
  cursor: not-allowed;
85
95
  }
@@ -92,81 +102,83 @@
92
102
  color: @white-color;
93
103
  }
94
104
  }
95
- })
96
105
 
97
-
98
- each(@sizeSelectors, {
99
- @sizeBtnHeight: '@{value}BtnHeight';
100
- @sizeBtnPadding: '@{value}BtnPadding';
101
- @sizeBtnFontSize: '@{value}BtnFontSize';
102
- &.@{bk-prefix}-button-@{value} {
103
- height: @@sizeBtnHeight;
104
- padding: @@sizeBtnPadding;
105
- font-size: @@sizeBtnFontSize;
106
- }
107
- });
106
+ }) each(@sizeSelectors, {
107
+ @sizeBtnHeight: '@{value}BtnHeight';
108
+ @sizeBtnPadding: '@{value}BtnPadding';
109
+ @sizeBtnFontSize: '@{value}BtnFontSize';
108
110
 
109
- .@{bk-prefix}-button-text {
110
- display: inline-flex;
111
- align-items: center;
112
- line-height: 1;
111
+ &.@{bk-prefix}-button-@{value} {
112
+ height: @@sizeBtnHeight;
113
+ padding: @@sizeBtnPadding;
114
+ font-size: @@sizeBtnFontSize;
113
115
  }
116
+ });
114
117
 
115
- &.is-loading {
116
- position: relative;
117
- .@{bk-prefix}-button-loading {
118
- &:not(:last-child) {
119
- position: absolute;
120
- }
121
- }
122
- .@{bk-prefix}-button-text {
123
- visibility: hidden;
118
+ .@{bk-prefix}-button-text {
119
+ display: inline-flex;
120
+ align-items: center;
121
+ line-height: 1;
122
+ }
123
+
124
+ &.is-loading {
125
+ position: relative;
126
+
127
+ .@{bk-prefix}-button-loading {
128
+ &:not(:last-child) {
129
+ position: absolute;
124
130
  }
125
131
  }
126
132
 
127
- &:hover {
128
- border-color: @button-default-hover-border-color;
133
+ .@{bk-prefix}-button-text {
134
+ visibility: hidden;
129
135
  }
136
+ }
130
137
 
131
- &:active {
132
- color: @primary-color;
133
- border-color: @primary-color;
134
- }
138
+ &:hover {
139
+ border-color: @button-default-hover-border-color;
140
+ }
135
141
 
136
- &.is-text {
137
- height: auto;
138
- padding: 0;
139
- font-size: inherit;
140
- color: @default-color;
141
- text-decoration: none;
142
- cursor: pointer;
143
- background-color: transparent;
144
- border: none;
145
- outline: none;
146
- }
142
+ &:active {
143
+ color: @primary-color;
144
+ border-color: @primary-color;
145
+ }
147
146
 
148
- &.is-disabled {
149
- color: @disable-color;
150
- cursor: not-allowed;
151
- border-color: @disable-color;
152
- }
147
+ &.is-text {
148
+ height: auto;
149
+ padding: 0;
150
+ font-size: inherit;
151
+ color: @default-color;
152
+ text-decoration: none;
153
+ cursor: pointer;
154
+ background-color: transparent;
155
+ border: none;
156
+ outline: none;
157
+ }
153
158
 
154
- // &.is-circle {
155
- // padding: 8px;
156
- // line-height: 1;
157
- // border-radius: 50%;
158
- // }
159
+ &.is-disabled {
160
+ color: @disable-color;
161
+ cursor: not-allowed;
162
+ border-color: @disable-color;
163
+ }
164
+
165
+ // &.is-circle {
166
+ // padding: 8px;
167
+ // line-height: 1;
168
+ // border-radius: 50%;
169
+ // }
159
170
  }
160
171
 
161
172
 
162
173
  .@{bk-prefix}-button-group {
163
174
  display: inline-block;
164
175
  font-size: 0;
165
-
176
+
166
177
  each(@sizeSelectors, {
167
178
  @sizeBtnHeight: '@{value}BtnHeight';
168
179
  @sizeBtnPadding: '@{value}BtnPadding';
169
180
  @sizeBtnFontSize: '@{value}BtnFontSize';
181
+
170
182
  &.@{bk-prefix}-button-group-@{value} {
171
183
  .@{bk-prefix}-button {
172
184
  height: @@sizeBtnHeight;
@@ -174,52 +186,51 @@
174
186
  font-size: @@sizeBtnFontSize;
175
187
  }
176
188
  }
177
- })
178
- ;
179
-
180
- .@{bk-prefix}-button {
181
- height: @btnHeight;
182
- margin: 0 0 0 -1px;
183
- border-radius: 0;
184
-
185
- &:not(.is-disabled) {
186
- color: @default-color;
187
- background-color: @white-color;
188
- border-color: @light-gray;
189
- }
189
+ });
190
190
 
191
- &.is-disabled {
192
- color: @light-gray;
193
- }
194
-
195
- &:first-child {
196
- border-radius: @btnBorderRadius 0 0 @btnBorderRadius;
197
- }
191
+ .@{bk-prefix}-button {
192
+ height: @btnHeight;
193
+ margin: 0 0 0 -1px;
194
+ border-radius: 0;
198
195
 
199
- &:last-child {
200
- border-radius: 0 @btnBorderRadius @btnBorderRadius 0;
201
- }
196
+ &:not(.is-disabled) {
197
+ color: @default-color;
198
+ background-color: @white-color;
199
+ border-color: @light-gray;
200
+ }
202
201
 
203
- &:only-child {
204
- border-radius: @btnBorderRadius;
205
- }
202
+ &.is-disabled {
203
+ color: @light-gray;
204
+ }
206
205
 
207
- &:hover:not(.is-disabled),
208
- &.is-selected:not(.is-disabled) {
209
- position: relative;
210
- z-index: 1;
211
- color: @primary-color;
212
- background-color: @white-color;
213
- border-color: @primary-color;
214
- }
206
+ &:first-child {
207
+ border-radius: @btnBorderRadius 0 0 @btnBorderRadius;
208
+ }
215
209
 
216
- &.is-selected:not(.is-disabled) {
217
- background-color: @button-selected-bg-color;
218
- }
210
+ &:last-child {
211
+ border-radius: 0 @btnBorderRadius @btnBorderRadius 0;
212
+ }
219
213
 
220
- &.is-selected.is-disabled {
221
- background-color: @button-disabled-selected-bg-color;
222
- }
214
+ &:only-child {
215
+ border-radius: @btnBorderRadius;
216
+ }
223
217
 
218
+ &:hover:not(.is-disabled),
219
+ &.is-selected:not(.is-disabled) {
220
+ position: relative;
221
+ z-index: 1;
222
+ color: @primary-color;
223
+ background-color: @white-color;
224
+ border-color: @primary-color;
225
+ }
226
+
227
+ &.is-selected:not(.is-disabled) {
228
+ background-color: @button-selected-bg-color;
229
+ }
230
+
231
+ &.is-selected.is-disabled {
232
+ background-color: @button-disabled-selected-bg-color;
224
233
  }
234
+
225
235
  }
236
+ }
@@ -163,6 +163,11 @@
163
163
  border-color: var(--button-primary-hover-color);
164
164
  color: var(--white-color);
165
165
  }
166
+ .bk-button.bk-button-primary.is-outline:active {
167
+ background-color: var(--button-primary-active-color);
168
+ border-color: var(--button-primary-active-color);
169
+ color: var(--white-color);
170
+ }
166
171
  .bk-button.bk-button-primary.is-text {
167
172
  color: var(--primary-color);
168
173
  background-color: transparent;
@@ -209,6 +214,11 @@
209
214
  border-color: var(--button-warning-hover-color);
210
215
  color: var(--white-color);
211
216
  }
217
+ .bk-button.bk-button-warning.is-outline:active {
218
+ background-color: var(--button-warning-active-color);
219
+ border-color: var(--button-warning-active-color);
220
+ color: var(--white-color);
221
+ }
212
222
  .bk-button.bk-button-warning.is-text {
213
223
  color: var(--warning-color);
214
224
  background-color: transparent;
@@ -255,6 +265,11 @@
255
265
  border-color: var(--button-success-hover-color);
256
266
  color: var(--white-color);
257
267
  }
268
+ .bk-button.bk-button-success.is-outline:active {
269
+ background-color: var(--button-success-active-color);
270
+ border-color: var(--button-success-active-color);
271
+ color: var(--white-color);
272
+ }
258
273
  .bk-button.bk-button-success.is-text {
259
274
  color: var(--success-color);
260
275
  background-color: transparent;
@@ -301,6 +316,11 @@
301
316
  border-color: var(--button-danger-hover-color);
302
317
  color: var(--white-color);
303
318
  }
319
+ .bk-button.bk-button-danger.is-outline:active {
320
+ background-color: var(--button-danger-active-color);
321
+ border-color: var(--button-danger-active-color);
322
+ color: var(--white-color);
323
+ }
304
324
  .bk-button.bk-button-danger.is-text {
305
325
  color: var(--danger-color);
306
326
  background-color: transparent;