viniBaxter-desk_front 0.7.0 → 10.0.0

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 (11) hide show
  1. checksums.yaml +4 -4
  2. data/lib/viniBaxter/desk_front/version.rb +1 -1
  3. data/lib/viniBaxter/sass/desk_front/beckyBaxter/_index.scss +74 -76
  4. data/lib/viniBaxter/sass/desk_front/beckyBaxter/custom/_buttons.scss +195 -162
  5. data/lib/viniBaxter/sass/desk_front/beckyBaxter/custom/mixins/_buttons.scss +357 -343
  6. data/lib/viniBaxter/sass/desk_front/beckyBaxter/custom/vendor/_plugin-bootstrap-select.scss +129 -69
  7. data/lib/viniBaxter/sass/desk_front/beckyBaxter/custom/vendor/_plugin-new-bootstrap-select.scss +534 -0
  8. data/lib/viniBaxter/sass/desk_front/beckyBaxter/mixins/_buttons.scss +341 -327
  9. data/lib/viniBaxter/sass/desk_front/dashkit/_dropdowns.scss +8 -14
  10. data/lib/viniBaxter/sass/desk_front.scss +2 -5
  11. metadata +3 -2
data/lib/viniBaxter/sass/desk_front/beckyBaxter/mixins/_buttons.scss CHANGED
@@ -1,343 +1,357 @@
1
1
  @mixin btn-styles($btn-color, $btn-states-color) {
2
- @include diagonal-gradient($btn-color, $btn-states-color);
3
- background-color: $btn-color;
4
- transition: all 0.15s ease;
2
+ @include diagonal-gradient($btn-color, $btn-states-color);
3
+ background-color: $btn-color;
4
+ transition: all 0.15s ease;
5
+ box-shadow: none;
6
+
7
+ &.animation-on-hover:hover {
8
+ background-position: bottom left;
9
+ transition: 0.3s ease-in-out;
10
+ }
11
+
12
+ &:hover,
13
+ &:focus,
14
+ &:active,
15
+ &.active,
16
+ &:active:focus,
17
+ &:active:hover,
18
+ &.active:focus,
19
+ &.active:hover {
20
+ background-color: $btn-states-color !important;
21
+ background-image: linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
22
+ background-image: -webkit-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
23
+ background-image: -o-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
24
+ background-image: -moz-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
25
+ color: $white;
26
+ box-shadow: none;
27
+ }
28
+
29
+ &:active {
30
+ box-shadow: none !important;
31
+ transform: translateY(1px) !important;
32
+ transition: all .15s ease;
33
+ }
34
+
35
+ &:not([data-action]):hover {
36
+
37
+ box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
38
+ transform: translateY(-1px);
39
+ -webkit-transform: translateY(-1px);
40
+ }
41
+
42
+ &.disabled,
43
+ &:disabled,
44
+ &[disabled],
45
+ fieldset[disabled] & {
46
+
47
+ &,
48
+ &:hover,
49
+ &:focus,
50
+ &.focus,
51
+ &:active,
52
+ &.active {
53
+ background-color: $btn-color;
54
+ border-color: $btn-color;
55
+ }
56
+ }
57
+
58
+ // btn-neutral style
59
+ @if $btn-color==$white {
60
+ color: $primary;
61
+
62
+ &.btn-danger {
63
+ color: $danger;
64
+
65
+ &:hover,
66
+ &:focus,
67
+ &:active,
68
+ &:active:focus {
69
+ color: $danger-states;
70
+ }
71
+ }
72
+
73
+ &.btn-info {
74
+ color: $info;
75
+
76
+ &:hover,
77
+ &:focus,
78
+ &:active,
79
+ &:active:focus {
80
+ color: $info-states;
81
+ }
82
+ }
83
+
84
+ &.btn-warning {
85
+ color: $warning;
86
+
87
+ &:hover,
88
+ &:focus,
89
+ &:active,
90
+ &:active:focus {
91
+ color: $warning-states;
92
+ }
93
+ }
94
+
95
+ &.btn-success {
96
+ color: $success;
97
+
98
+ &:hover,
99
+ &:focus,
100
+ &:active,
101
+ &:active:focus {
102
+ color: $success-states;
103
+ }
104
+ }
105
+
106
+ &.btn-default {
107
+ color: $default;
108
+
109
+ &:hover,
110
+ &:focus,
111
+ &:active,
112
+ &:active:focus {
113
+ color: $default-states;
114
+ }
115
+ }
116
+
117
+ &.active,
118
+ &:active,
119
+ &:active:focus,
120
+ &:active:hover,
121
+ &.active:focus,
122
+ &.active:hover,
123
+ .show>&.dropdown-toggle,
124
+ .show>&.dropdown-toggle:focus,
125
+ .show>&.dropdown-toggle:hover {
126
+ background-color: $white;
127
+ color: $primary-states;
128
+ box-shadow: none;
129
+ }
130
+
131
+ &:hover,
132
+ &:focus {
133
+ color: $primary-states;
134
+
135
+ &:not(.nav-link) {
5
136
  box-shadow: none;
6
- &.animation-on-hover:hover{
7
- background-position: bottom left;
8
- transition:0.3s ease-in-out;
9
- }
10
-
11
- &:hover,
12
- &:focus,
13
- &:active,
14
- &.active,
15
- &:active:focus,
16
- &:active:hover,
17
- &.active:focus,
18
- &.active:hover
19
- {
20
- background-color: $btn-states-color !important;
21
- background-image: linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
22
- background-image: -webkit-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
23
- background-image: -o-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
24
- background-image: -moz-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
25
- color: $white;
26
- box-shadow: none;
27
- }
28
-
29
- &:active{
30
- box-shadow: none !important;
31
- transform: translateY(1px) !important;
32
- transition: all .15s ease;
33
- }
34
-
35
- &:not([data-action]):hover{
36
-
37
- box-shadow: 2px 2px 6px rgba(0,0,0,0.4);
38
- transform: translateY(-1px);
39
- -webkit-transform: translateY(-1px);
40
- }
41
-
42
- &.disabled,
43
- &:disabled,
44
- &[disabled],
45
- fieldset[disabled] & {
46
- &,
47
- &:hover,
48
- &:focus,
49
- &.focus,
50
- &:active,
51
- &.active {
52
- background-color: $btn-color;
53
- border-color: $btn-color;
54
- }
55
- }
56
-
57
- // btn-neutral style
58
- @if $btn-color == $white{
59
- color: $primary;
60
-
61
- &.btn-danger{
62
- color: $danger;
63
-
64
- &:hover,
65
- &:focus,
66
- &:active,
67
- &:active:focus{
68
- color: $danger-states;
69
- }
70
- }
71
-
72
- &.btn-info{
73
- color: $info;
74
-
75
- &:hover,
76
- &:focus,
77
- &:active,
78
- &:active:focus{
79
- color: $info-states;
80
- }
81
- }
82
-
83
- &.btn-warning{
84
- color: $warning;
85
-
86
- &:hover,
87
- &:focus,
88
- &:active,
89
- &:active:focus{
90
- color: $warning-states;
91
- }
92
- }
93
-
94
- &.btn-success{
95
- color: $success;
96
-
97
- &:hover,
98
- &:focus,
99
- &:active,
100
- &:active:focus{
101
- color: $success-states;
102
- }
103
- }
104
-
105
- &.btn-default{
106
- color: $default;
107
-
108
- &:hover,
109
- &:focus,
110
- &:active,
111
- &:active:focus{
112
- color: $default-states;
113
- }
114
- }
115
-
116
- &.active,
117
- &:active,
118
- &:active:focus,
119
- &:active:hover,
120
- &.active:focus,
121
- &.active:hover,
122
- .show > &.dropdown-toggle,
123
- .show > &.dropdown-toggle:focus,
124
- .show > &.dropdown-toggle:hover {
125
- background-color: $white;
126
- color: $primary-states;
127
- box-shadow: none;
128
- }
129
-
130
- &:hover,
131
- &:focus{
132
- color: $primary-states;
133
-
134
- &:not(.nav-link){
135
- box-shadow: none;
136
- }
137
-
138
- }
139
-
140
- } @else {
141
- color: $white;
142
- }
143
-
144
- &.btn-simple{
145
- color: $btn-color;
146
- border-color: $btn-color;
147
- background: $transparent-bg;
148
-
149
- &:hover,
150
- &:focus,
151
- &:active,
152
- &:not(:disabled):not(.disabled):active{
153
- color: $btn-color;
154
- border-color: $btn-color;
155
- background-color: $transparent-bg !important;
156
- background-image: none !important;
157
- box-shadow: none;
158
- }
159
-
160
- &.active{
161
- border-color: $btn-color !important;
162
- &:hover,
163
- &:focus,
164
- &:active,
165
- &:not(:disabled):not(.disabled):active{
166
- color: $white;
167
- border-color: $btn-color;
168
- background-image: linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
169
- background-image: -webkit-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
170
- background-image: -o-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
171
- background-image: -moz-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
172
- background-color: $btn-states-color !important;
173
- box-shadow: none;
174
- }
175
- }
176
- }
177
-
178
- &.btn-link{
179
- color: $btn-color;
180
- &:hover,
181
- &:focus,
182
- &:active{
183
- background-color: $transparent-bg !important;
184
- background-image: none !important;
185
- color: $white !important;
186
- text-decoration: none;
187
- box-shadow: none;
188
- }
189
- }
137
+ }
138
+
139
+ }
140
+
141
+ }
142
+
143
+ @else {
144
+ color: $white;
145
+ }
146
+
147
+ &.btn-simple {
148
+ color: $btn-color;
149
+ border-color: $btn-color;
150
+ background: $transparent-bg;
151
+
152
+ &:hover,
153
+ &:focus,
154
+ &:active,
155
+ &:not(:disabled):not(.disabled):active {
156
+ color: $btn-color;
157
+ border-color: $btn-color;
158
+ background-color: $transparent-bg !important;
159
+ background-image: none !important;
160
+ box-shadow: none;
161
+ }
162
+
163
+ &.active {
164
+ border-color: $btn-color !important;
165
+
166
+ &:hover,
167
+ &:focus,
168
+ &:active,
169
+ &:not(:disabled):not(.disabled):active {
170
+ color: $white;
171
+ border-color: $btn-color;
172
+ background-image: linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
173
+ background-image: -webkit-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
174
+ background-image: -o-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
175
+ background-image: -moz-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
176
+ background-color: $btn-states-color !important;
177
+ box-shadow: none;
178
+ }
179
+ }
180
+ }
181
+
182
+ &.btn-link {
183
+ color: $btn-color;
184
+
185
+ &:hover,
186
+ &:focus,
187
+ &:active {
188
+ background-color: $transparent-bg !important;
189
+ background-image: none !important;
190
+ color: $white !important;
191
+ text-decoration: none;
192
+ box-shadow: none;
193
+ }
194
+ }
190
195
  }
191
196
 
192
197
  @mixin button-variant($background, $border, $hover-background: darken($background, 0%), $hover-border: darken($border, 0%), $active-background: darken($background, 10%), $active-border: darken($border, 0%)) {
193
- color: color-yiq($background);
194
- @include gradient-bg($background);
195
- border-color: $border;
196
- @include box-shadow($btn-box-shadow);
197
-
198
- @include hover {
199
- color: color-yiq($hover-background);
200
- @include gradient-bg($hover-background);
201
- border-color: $hover-border;
202
- }
203
-
204
- &:focus,
205
- &.focus {
206
- // Avoid using mixin so we can pass custom focus shadow properly
207
- @if $enable-shadows {
208
- box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5);
209
- }
210
- @else {
211
- box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);
212
- }
213
- } // Disabled comes first so active can properly restyle
214
- &.disabled,
215
- &:disabled {
216
- color: color-yiq($background);
217
- background-color: $background;
218
- border-color: $border;
219
- }
220
-
221
- &:not(:disabled):not(.disabled):active,
222
- &:not(:disabled):not(.disabled).active,
223
- .show>&.dropdown-toggle {
224
- color: color-yiq($active-background);
225
- background-color: $active-background;
226
- @if $enable-gradients {
227
- background-image: none; // Remove the gradient for the pressed/active state
228
- }
229
- border-color: $active-border;
230
-
231
- &:focus {
232
- // Avoid using mixin so we can pass custom focus shadow properly
233
- @if $enable-shadows {
234
- box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5);
235
- }
236
- @else {
237
- box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);
238
- }
239
- }
240
- }
198
+ color: color-yiq($background);
199
+ @include gradient-bg($background);
200
+ border-color: $border;
201
+ @include box-shadow($btn-box-shadow);
202
+
203
+ @include hover {
204
+ color: color-yiq($hover-background);
205
+ @include gradient-bg($hover-background);
206
+ border-color: $hover-border;
207
+ }
208
+
209
+ &:focus,
210
+ &.focus {
211
+
212
+ // Avoid using mixin so we can pass custom focus shadow properly
213
+ @if $enable-shadows {
214
+ box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5);
215
+ }
216
+
217
+ @else {
218
+ box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);
219
+ }
220
+ }
221
+
222
+ // Disabled comes first so active can properly restyle
223
+ &.disabled,
224
+ &:disabled {
225
+ color: color-yiq($background);
226
+ background-color: $background;
227
+ border-color: $border;
228
+ }
229
+
230
+ &:not(:disabled):not(.disabled):active,
231
+ &:not(:disabled):not(.disabled).active,
232
+ .show>&.dropdown-toggle {
233
+ color: color-yiq($active-background);
234
+ background-color: $active-background;
235
+
236
+ @if $enable-gradients {
237
+ background-image: none; // Remove the gradient for the pressed/active state
238
+ }
239
+
240
+ border-color: $active-border;
241
+
242
+ &:focus {
243
+
244
+ // Avoid using mixin so we can pass custom focus shadow properly
245
+ @if $enable-shadows {
246
+ box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5);
247
+ }
248
+
249
+ @else {
250
+ box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);
251
+ }
252
+ }
253
+ }
241
254
  }
242
255
 
243
256
  @mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) {
244
- color: $color;
245
- background-color: transparent;
246
- background-image: none;
247
- border-color: $color;
248
-
249
- &:hover {
250
- color: $color-hover;
251
- background-color: $active-background;
252
- border-color: $active-border;
253
- }
254
-
255
- &:focus,
256
- &.focus {
257
- box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
258
- }
259
-
260
- &.disabled,
261
- &:disabled {
262
- color: $color;
263
- background-color: transparent;
264
- }
265
-
266
- &:not(:disabled):not(.disabled):active,
267
- &:not(:disabled):not(.disabled).active,
268
- .show>&.dropdown-toggle {
269
- color: color-yiq($active-background);
270
- background-color: $active-background;
271
- border-color: $active-border;
272
-
273
- &:focus {
274
- // Avoid using mixin so we can pass custom focus shadow properly
275
- @if $enable-shadows and $btn-active-box-shadow !=none {
276
- box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5);
277
- }
278
- @else {
279
- box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
280
- }
281
- }
282
- }
257
+ color: $color;
258
+ background-color: transparent;
259
+ background-image: none;
260
+ border-color: $color;
261
+
262
+ &:hover {
263
+ color: $color-hover;
264
+ background-color: $active-background;
265
+ border-color: $active-border;
266
+ }
267
+
268
+ &:focus,
269
+ &.focus {
270
+ box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
271
+ }
272
+
273
+ &.disabled,
274
+ &:disabled {
275
+ color: $color;
276
+ background-color: transparent;
277
+ }
278
+
279
+ &:not(:disabled):not(.disabled):active,
280
+ &:not(:disabled):not(.disabled).active,
281
+ .show>&.dropdown-toggle {
282
+ color: color-yiq($active-background);
283
+ background-color: $active-background;
284
+ border-color: $active-border;
285
+
286
+ &:focus {
287
+
288
+ // Avoid using mixin so we can pass custom focus shadow properly
289
+ @if $enable-shadows and $btn-active-box-shadow !=none {
290
+ box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5);
291
+ }
292
+
293
+ @else {
294
+ box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
295
+ }
296
+ }
297
+ }
283
298
  }
284
299
 
285
300
  // Button sizes
286
- @mixin btn-size($padding-vertical, $padding-horizontal, $font-size, $border){
287
- font-size: $font-size;
288
- border-radius: $border;
289
- padding: $padding-vertical $padding-horizontal;
301
+ @mixin btn-size($padding-vertical, $padding-horizontal, $font-size, $border) {
302
+ font-size: $font-size;
303
+ border-radius: $border;
304
+ padding: $padding-vertical $padding-horizontal;
290
305
 
291
- &.btn-simple{
292
- padding: $padding-vertical - 1 $padding-horizontal - 1;
293
- }
306
+ &.btn-simple {
307
+ padding: $padding-vertical - 1 $padding-horizontal - 1;
308
+ }
294
309
 
295
310
  }
296
311
 
297
312
  // for social buttons
298
- @mixin social-buttons-color ($color, $state-color){
299
- @include diagonal-gradient($color, darken($color,20%));
300
- //background-color: $color;
301
- color: $white;
302
- background-size: 210% 210%;
303
- background-position: top right;
304
- background-repeat: space;
305
-
306
- &:focus,
307
- &:active,
308
- &:hover{
309
- background-color: $state-color;
310
- background-image: linear-gradient(to bottom left, $color, darken($color,20%), $color) !important;
311
- background-image: -webkit-linear-gradient(to bottom left, $color, darken($color,20%), $color) !important;
312
- background-image: -o-linear-gradient(to bottom left, $color, darken($color,20%), $color) !important;
313
- background-image: -moz-linear-gradient(to bottom left, $color, darken($color,20%), $color) !important;
314
- color: $white;
315
- }
316
-
317
- &.btn-simple{
318
- color: $state-color;
319
- background-color: $transparent-bg;
320
- background-image: none !important;
321
- box-shadow: none;
322
- border-color: $state-color;
323
-
324
- &:hover,
325
- &:focus,
326
- &:active{
327
- color: $state-color;
328
- border-color: $state-color;
329
- }
330
- }
331
-
332
- &.btn-neutral{
333
- color: $color;
334
- background-color: $white;
335
-
336
-
337
- &:hover,
338
- &:focus,
339
- &:active{
340
- color: $state-color;
341
- }
342
- }
343
- }
313
+ @mixin social-buttons-color ($color, $state-color) {
314
+ @include diagonal-gradient($color, darken($color, 20%));
315
+ //background-color: $color;
316
+ color: $white;
317
+ background-size: 210% 210%;
318
+ background-position: top right;
319
+ background-repeat: space;
320
+
321
+ &:focus,
322
+ &:active,
323
+ &:hover {
324
+ background-color: $state-color;
325
+ background-image: linear-gradient(to bottom left, $color, darken($color, 20%), $color) !important;
326
+ background-image: -webkit-linear-gradient(to bottom left, $color, darken($color, 20%), $color) !important;
327
+ background-image: -o-linear-gradient(to bottom left, $color, darken($color, 20%), $color) !important;
328
+ background-image: -moz-linear-gradient(to bottom left, $color, darken($color, 20%), $color) !important;
329
+ color: $white;
330
+ }
331
+
332
+ &.btn-simple {
333
+ color: $state-color;
334
+ background-color: $transparent-bg;
335
+ background-image: none !important;
336
+ box-shadow: none;
337
+ border-color: $state-color;
338
+
339
+ &:hover,
340
+ &:focus,
341
+ &:active {
342
+ color: $state-color;
343
+ border-color: $state-color;
344
+ }
345
+ }
346
+
347
+ &.btn-neutral {
348
+ color: $color;
349
+ background-color: $white;
350
+
351
+ &:hover,
352
+ &:focus,
353
+ &:active {
354
+ color: $state-color;
355
+ }
356
+ }
357
+ }