Subversion Repositories Integrator Subversion

Rev

Rev 182 | Details | Compare with Previous | Last modification | View Log | RSS feed

Rev Author Line No. Line
179 espaco 1
body {
2
  .ui-button {
3
    background: $buttonBg;
4
    color: $buttonTextColor;
5
    border: $buttonBorder;
6
    margin: 0;
7
    outline: 0 none;
8
    border-radius: $borderRadius;
9
    transition: $transition;
10
 
11
    &.ui-state-hover {
12
      background: $buttonHoverBg;
13
      border-color: $buttonHoverBorderColor;
14
      color: $buttonTextHoverColor;
15
    }
16
 
17
    &.ui-state-focus {
18
      outline: $buttonFocusOutline;
19
      outline-offset: $buttonFocusOutlineOffset;
20
      box-shadow: $buttonFocusShadow;
21
    }
22
 
23
    &.ui-state-active, &.ui-state-down {
24
      background: $buttonActiveBg;
25
      border-color: $buttonActiveBorderColor;
26
      color: $buttonTextActiveColor;
27
    }
28
 
29
    &.ui-button-outlined {
30
      background-color: transparent;
31
      color: $buttonBg;
32
      border: $outlinedButtonBorder;
33
 
34
      &.ui-state-hover {
35
        background: rgba($buttonBg, $textButtonHoverBgOpacity);
36
        color: $buttonBg;
37
        border: $outlinedButtonBorder;
38
      }
39
 
40
      &.ui-state-active, &.ui-state-down {
41
        background: rgba($buttonBg, $textButtonActiveBgOpacity);
42
        color: $buttonBg;
43
        border: $outlinedButtonBorder;
44
      }
45
 
46
      &.ui-button-plain {
47
        color: $plainButtonTextColor;
48
        border-color: $plainButtonTextColor;
49
 
50
        &.ui-state-hover {
51
          background: $plainButtonHoverBgColor;
52
          color: $plainButtonTextColor;
53
        }
54
 
55
        &.ui-state-active, &.ui-state-down {
56
          background: $plainButtonActiveBgColor;
57
          color: $plainButtonTextColor;
58
        }
59
      }
60
    }
61
 
62
    &.ui-button-flat {
63
      background-color: transparent;
64
      color: $buttonBg;
65
      border-color: transparent;
66
 
67
      &.ui-state-hover {
68
        background: rgba($buttonBg, $textButtonHoverBgOpacity);
69
        color: $buttonBg;
70
        border-color: transparent;
71
      }
72
 
73
      &.ui-state-active, &.ui-state-down {
74
        background: rgba($buttonBg, $textButtonActiveBgOpacity);
75
        color: $buttonBg;
76
        border-color: transparent;
77
      }
78
 
79
      &.ui-button-plain {
80
        color: $plainButtonTextColor;
81
 
82
        &.ui-state-hover {
83
          background: $plainButtonHoverBgColor;
84
          color: $plainButtonTextColor;
85
        }
86
 
87
        &.ui-state-active, &.ui-state-down {
88
          background: $plainButtonActiveBgColor;
89
          color: $plainButtonTextColor;
90
        }
91
      }
92
    }
93
 
94
    &.ui-button-text-only {
95
      .ui-button-text {
96
        padding: $buttonTextOnlyPadding;
97
      }
98
    }
99
 
100
    &.ui-button-text-icon-left {
101
      .ui-button-text {
102
        padding: $buttonWithLeftIconPadding;
103
      }
104
 
105
      .ui-icon {
106
        position: absolute;
107
        top: 50%;
108
        left: 50%;
109
        margin-top: -1 * $iconSize / 2;
110
        left: $iconSize / 2;
111
      }
112
    }
113
 
114
    &.ui-button-text-icon-right {
115
      .ui-button-text {
116
        padding: $buttonWithRightIconPadding;
117
      }
118
 
119
      .ui-icon {
120
        position: absolute;
121
        top: 50%;
122
        right: 50%;
123
        margin-top: -1 * $iconSize / 2;
124
        right: $iconSize / 2;
125
      }
126
    }
127
 
128
    &.ui-button-icon-only {
129
      width: $buttonIconOnlyWidth;
130
 
131
      .ui-button-text {
132
        padding: $buttonIconOnlyPadding;
133
      }
134
 
135
      .ui-icon {
136
        position: absolute;
137
        top: 50%;
138
        left: 50%;
139
        margin-top: -1 * $iconSize / 2;
140
        margin-left:  -1 * $iconSize / 2;
141
      }
142
    }
143
 
144
    &.ui-button-raised {
145
      box-shadow: $raisedButtonShadow;
146
    }
147
 
148
    &.rounded-button {
149
      border-radius: $roundedButtonBorderRadius;
150
 
151
      &.ui-button-icon-only {
152
        border-radius: 50%;
153
        height: $buttonIconOnlyWidth;
154
      }
155
    }
156
 
157
    .ui-icon-triangle-1-s {
158
      @include icon_override("\e902");
159
    }
160
  }
161
 
162
  .ui-selectbooleanbutton,
163
  .ui-selectonebutton > .ui-button,
164
  .ui-selectmanybutton > .ui-button {
165
    background: $toggleButtonBg;
166
    color: $toggleButtonTextColor;
167
    border: $toggleButtonBorder;
168
    outline: 0 none;
169
    transition: $transition;
170
 
171
    .ui-icon {
172
      color: $toggleButtonIconColor;
173
    }
174
 
175
    &.ui-state-hover {
176
      background: $toggleButtonHoverBg;
177
      border-color: $toggleButtonHoverBorderColor;
178
      color: $toggleButtonTextHoverColor;
179
 
180
      .ui-icon {
181
        color: $toggleButtonHoverIconColor;
182
      }
183
    }
184
 
185
    &.ui-state-active {
186
      background: $toggleButtonActiveBg;
187
      border-color: $toggleButtonActiveBorderColor;
188
      color: $toggleButtonTextActiveColor;
189
 
190
      .ui-icon {
191
        color: $toggleButtonActiveIconColor;
192
      }
193
 
194
      &:not(.ui-state-disabled):hover {
195
        background: $toggleButtonActiveHoverBg;
196
        border-color: $toggleButtonActiveHoverBorderColor;
197
        color: $toggleButtonActiveTextHoverColor;
198
 
199
        .ui-icon {
200
          color: $toggleButtonActiveHoverIconColor;
201
        }
202
      }
203
    }
204
  }
205
 
206
  .ui-selectonebutton > .ui-button,
207
  .ui-selectmanybutton > .ui-button {
208
    border-radius: 0;
209
 
210
    &:first-child {
211
      border-top-left-radius: $borderRadius;
212
      border-bottom-left-radius: $borderRadius;
213
    }
214
 
215
    &:last-child {
216
      border-top-right-radius: $borderRadius;
217
      border-bottom-right-radius: $borderRadius;
218
    }
219
 
220
    &.ui-state-focus {
221
      z-index: 1;
222
    }
223
 
224
    &:not(:last-child) {
225
      border-right-width: 0;
226
    }
227
  }
228
 
229
  @media (max-width: 640px) {
230
    .ui-selectonebutton > div.ui-button,
231
    .ui-selectmanybutton > div.ui-button {
232
      &:not(:last-child) {
233
        border-bottom-width: 0;
234
        border-right-width: 1px;
235
      }
236
 
237
      &:first-child {
238
        @include border-radius-top($borderRadius);
239
        @include border-radius-bottom(0);
240
      }
241
 
242
      &:last-child {
243
        @include border-radius-top(0);
244
        @include border-radius-bottom($borderRadius);
245
        border-bottom-width: 1px;
246
      }
247
    }
248
  }
249
 
250
  @media (max-width: 640px) {
251
    .ui-dataview-layout-options > div.ui-button {
252
      &:not(:last-child) {
253
        border-bottom-width: 1px;
254
        border-right-width: 0;
255
      }
256
 
257
      &:first-child {
258
        @include border-radius-left($borderRadius);
259
        @include border-radius-right(0);
260
      }
261
 
262
      &:last-child {
263
        @include border-radius-left(0);
264
        @include border-radius-right($borderRadius);
265
      }
266
    }
267
  }
268
 
269
  .ui-button-group {
270
    .ui-button {
271
      margin: 0;
272
      border-radius: 0;
273
 
274
      &:first-child {
275
        border-top-left-radius: $borderRadius;
276
        border-bottom-left-radius: $borderRadius;
277
      }
278
 
279
      &:last-child {
280
        border-top-right-radius: $borderRadius;
281
        border-bottom-right-radius: $borderRadius;
282
      }
283
 
284
      &.ui-state-focus {
285
        z-index: 1;
286
      }
287
    }
288
  }
289
 
290
  .ui-button.ui-button-secondary, .ui-splitbutton.ui-button-secondary > .ui-button {
291
    @include secondary-button();
292
  }
293
 
294
  .ui-button.ui-button-success, .ui-splitbutton.ui-button-success > .ui-button {
295
    background:$successButtonBg;
296
    color: $successButtonTextColor;
297
    border: $successButtonBorder;
298
 
299
    &.ui-state-hover {
300
      background: $successButtonHoverBg;
301
      color: $successButtonTextHoverColor;
302
      border-color: $successButtonHoverBorderColor;
303
    }
304
 
305
    &.ui-state-focus {
306
      box-shadow: $successButtonFocusShadow;
307
    }
308
 
309
    &.ui-state-active {
310
      background: $successButtonActiveBg;
311
      color: $successButtonTextActiveColor;
312
    }
313
 
314
    &.ui-button-outlined {
315
      background-color: transparent;
316
      color: $successButtonBg;
317
      border: $outlinedButtonBorder;
318
 
319
      &:enabled:hover {
320
        background: rgba($successButtonBg, $textButtonHoverBgOpacity);
321
        color: $successButtonBg;
322
        border: $outlinedButtonBorder;
323
      }
324
 
325
      &:enabled:active {
326
        background: rgba($successButtonBg, $textButtonActiveBgOpacity);
327
        color: $successButtonBg;
328
        border: $outlinedButtonBorder;
329
      }
330
    }
331
 
332
    &.ui-button-flat {
333
      background-color: transparent;
334
      color: $successButtonBg;
335
      border-color: transparent;
336
 
337
      &:enabled:hover {
338
        background: rgba($successButtonBg, $textButtonHoverBgOpacity);
339
        border-color: transparent;
340
        color: $successButtonBg;
341
      }
342
 
343
      &:enabled:active {
344
        background: rgba($successButtonBg, $textButtonActiveBgOpacity);
345
        border-color: transparent;
346
        color: $successButtonBg;
347
      }
348
    }
349
  }
350
 
351
  .ui-button.ui-button-warning, .ui-splitbutton.ui-button-warning > .ui-button {
352
    background: $warningButtonBg;
353
    color: $warningButtonTextColor;
354
    border: $warningButtonBorder;
355
 
356
    &.ui-state-hover {
357
      background: $warningButtonHoverBg;
358
      color: $warningButtonTextHoverColor;
359
      border-color: $warningButtonHoverBorderColor;
360
    }
361
 
362
    &.ui-state-focus {
363
      box-shadow: $warningButtonFocusShadow;
364
    }
365
 
366
    &.ui-state-active {
367
      background:$warningButtonActiveBg;
368
      color: $warningButtonTextActiveColor;
369
      border-color: $warningButtonActiveBorderColor;
370
    }
371
 
372
    &.ui-button-outlined {
373
      background-color: transparent;
374
      color: $warningButtonBg;
375
      border: $outlinedButtonBorder;
376
 
377
      &:enabled:hover {
378
        background: rgba($warningButtonBg, $textButtonHoverBgOpacity);
379
        color: $warningButtonBg;
380
        border: $outlinedButtonBorder;
381
      }
382
 
383
      &:enabled:active {
384
        background: rgba($warningButtonBg, $textButtonActiveBgOpacity);
385
        color: $warningButtonBg;
386
        border: $outlinedButtonBorder;
387
      }
388
    }
389
 
390
    &.ui-button-flat {
391
      background-color: transparent;
392
      color: $warningButtonBg;
393
      border-color: transparent;
394
 
395
      &:enabled:hover {
396
        background: rgba($warningButtonBg, $textButtonHoverBgOpacity);
397
        border-color: transparent;
398
        color: $warningButtonBg;
399
      }
400
 
401
      &:enabled:active {
402
        background: rgba($warningButtonBg, $textButtonActiveBgOpacity);
403
        border-color: transparent;
404
        color: $warningButtonBg;
405
      }
406
    }
407
  }
408
 
409
  .ui-button.ui-button-help, .ui-splitbutton.ui-button-help > .ui-button {
410
    background: $helpButtonBg;
411
    color: $helpButtonTextColor;
412
    border: $helpButtonBorder;
413
 
414
    &.ui-state-hover {
415
      background: $helpButtonHoverBg;
416
      color: $helpButtonTextHoverColor;
417
      border-color: $helpButtonHoverBorderColor;
418
    }
419
 
420
    &.ui-state-focus {
421
      box-shadow: $helpButtonFocusShadow;
422
    }
423
 
424
    &.ui-state-active {
425
      background:$helpButtonActiveBg;
426
      color: $helpButtonTextActiveColor;
427
      border-color: $helpButtonActiveBorderColor;
428
    }
429
 
430
    &.ui-button-outlined {
431
      background-color: transparent;
432
      color: $helpButtonBg;
433
      border: $outlinedButtonBorder;
434
 
435
      &:enabled:hover {
436
        background: rgba($helpButtonBg, $textButtonHoverBgOpacity);
437
        color: $helpButtonBg;
438
        border: $outlinedButtonBorder;
439
      }
440
 
441
      &:enabled:active {
442
        background: rgba($helpButtonBg, $textButtonActiveBgOpacity);
443
        color: $helpButtonBg;
444
        border: $outlinedButtonBorder;
445
      }
446
    }
447
 
448
    &.ui-button-flat {
449
      background-color: transparent;
450
      color: $helpButtonBg;
451
      border-color: transparent;
452
 
453
      &:enabled:hover {
454
        background: rgba($helpButtonBg, $textButtonHoverBgOpacity);
455
        border-color: transparent;
456
        color: $helpButtonBg;
457
      }
458
 
459
      &:enabled:active {
460
        background: rgba($helpButtonBg, $textButtonActiveBgOpacity);
461
        border-color: transparent;
462
        color: $helpButtonBg;
463
      }
464
    }
465
  }
466
 
467
  .ui-button.ui-button-info, .ui-splitbutton.ui-button-info > .ui-button {
468
    background: $infoButtonBg;
469
    color: $infoButtonTextColor;
470
    border: $infoButtonBorder;
471
 
472
    &.ui-state-hover {
473
      background: $infoButtonHoverBg;
474
      color: $infoButtonTextHoverColor;
475
      border-color: $infoButtonHoverBorderColor;
476
    }
477
 
478
    &.ui-state-focus {
479
      box-shadow: $infoButtonFocusShadow;
480
    }
481
 
482
    &.ui-state-active {
483
      background:$infoButtonActiveBg;
484
      color: $infoButtonTextActiveColor;
485
      border-color: $infoButtonActiveBorderColor;
486
    }
487
 
488
    &.ui-button-outlined {
489
      background-color: transparent;
490
      color: $infoButtonBg;
491
      border: $outlinedButtonBorder;
492
 
493
      &:enabled:hover {
494
        background: rgba($infoButtonBg, $textButtonHoverBgOpacity);
495
        color: $infoButtonBg;
496
        border: $outlinedButtonBorder;
497
      }
498
 
499
      &:enabled:active {
500
        background: rgba($infoButtonBg, $textButtonActiveBgOpacity);
501
        color: $infoButtonBg;
502
        border: $outlinedButtonBorder;
503
      }
504
    }
505
 
506
    &.ui-button-flat {
507
      background-color: transparent;
508
      color: $infoButtonBg;
509
      border-color: transparent;
510
 
511
      &:enabled:hover {
512
        background: rgba($infoButtonBg, $textButtonHoverBgOpacity);
513
        border-color: transparent;
514
        color: $infoButtonBg;
515
      }
516
 
517
      &:enabled:active {
518
        background: rgba($infoButtonBg, $textButtonActiveBgOpacity);
519
        border-color: transparent;
520
        color: $infoButtonBg;
521
      }
522
    }
523
  }
524
 
525
  .ui-button.ui-button-danger, .ui-splitbutton.ui-button-danger > .ui-button {
526
    background: $dangerButtonBg;
527
    color: $dangerButtonTextColor;
528
    border: $dangerButtonBorder;
529
 
530
    &.ui-state-hover {
531
      background: $dangerButtonHoverBg;
532
      color: $dangerButtonTextHoverColor;
533
      border-color: $dangerButtonHoverBorderColor;
534
    }
535
 
536
    &.ui-state-focus {
537
      box-shadow: $dangerButtonFocusShadow;
538
    }
539
 
540
    &.ui-state-active {
541
      background: $dangerButtonActiveBg;
542
      color: $dangerButtonTextActiveColor;
543
      border-color: $dangerButtonActiveBorderColor;
544
    }
545
 
546
    &.ui-button-outlined {
547
      background-color: transparent;
548
      color: $dangerButtonBg;
549
      border: $outlinedButtonBorder;
550
 
551
      &:enabled:hover {
552
        background: rgba($dangerButtonBg, $textButtonHoverBgOpacity);
553
        color: $dangerButtonBg;
554
        border: $outlinedButtonBorder;
555
      }
556
 
557
      &:enabled:active {
558
        background: rgba($dangerButtonBg, $textButtonActiveBgOpacity);
559
        color: $dangerButtonBg;
560
        border: $outlinedButtonBorder;
561
      }
562
    }
563
 
564
    &.ui-button-flat {
565
      background-color: transparent;
566
      color: $dangerButtonBg;
567
      border-color: transparent;
568
 
569
      &:enabled:hover {
570
        background: rgba($dangerButtonBg, $textButtonHoverBgOpacity);
571
        border-color: transparent;
572
        color: $dangerButtonBg;
573
      }
574
 
575
      &:enabled:active {
576
        background: rgba($dangerButtonBg, $textButtonActiveBgOpacity);
577
        border-color: transparent;
578
        color: $dangerButtonBg;
579
      }
580
    }
581
  }
582
 
583
  .ui-commandlink, .ui-link {
584
    color: $buttonBg;
585
    transition: $transition;
586
 
587
    &:hover {
588
      color: $buttonHoverBg;
589
      text-decoration: underline;
590
    }
591
 
592
    &:active {
593
      color: $buttonActiveBg;
594
    }
595
  }
596
}