source: Dev/trunk/src/client/qed-client/css/widgets/LargeButton.less @ 530

Last change on this file since 530 was 529, checked in by hendrikvanantwerpen, 11 years ago
  • Added grey icons for better highlighting, synced block and large buttons.
  • Introduced extra color for text, now disabled/inactive/hovered -> it's not very clear though.
  • Added confirmation on irrevertable actions.
  • Added support for query string in our new request implementation.
File size: 2.2 KB
Line 
1#rft.claro {
2
3    .rftLargeButton {
4
5        .flatShading;
6        margin-right: @button_large_spacing;
7        height: @button_large_height;
8        padding: 3px;
9        color: @inactivetext;
10
11        &*, * {
12            -webkit-user-select: none;
13            -moz-user-select: none;
14            -ms-user-select: none;
15            user-select: none;
16        }
17
18        &.dijitDisabled {
19            color: @disabledtext;
20        }
21
22        &.dijitHover {
23            color: @text;
24        }
25
26        .dijitButtonNode {
27
28            .flatShading;
29            border: none;
30            height: @button_large_height;
31            background: transparent;
32            font-size: @button_large_font_size;
33            .transition(0.3s);
34
35            .rftIcon {
36                .setIcon(24px, grey);
37            }
38
39            .dijitButtonText {
40                line-height: @button_large_height;
41                margin: 0 0 0 @button_large_height;
42                padding-left: @std_offset_big;
43                display: block;
44            }
45        }
46       
47        &.black .dijitButtonNode .rftIcon {
48            .setIcon(24px, black);
49        }
50
51        &.rftLargeButtonHover,
52        &.rftLargeButtonActive {
53            .transition (0.1s);
54            .rftIcon {
55                vertical-align: top;
56                .setIcon(24px, white);
57            }
58        }
59    }
60
61    //colors on hover
62    span.blue.rftLargeButton.rftLargeButtonActive .dijitButtonNode,
63    .blue .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
64        color: @blue_light;
65    }
66    span.orange.rftLargeButton.rftLargeButtonActive .dijitButtonNode,
67    .orange .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
68        color: @orange_light;
69    }
70    span.green.rftLargeButton.rftLargeButtonActive .dijitButtonNode,
71    .green .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
72        color: @green_light;
73    }
74    span.red.rftLargeButton.rftLargeButtonActive .dijitButtonNode,
75    .red .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
76        color: @red_light;
77    }
78    span.purple.rftLargeButton.rftLargeButtonActive .dijitButtonNode,
79    .purple .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
80        color: @purple_light;
81    }
82
83}
Note: See TracBrowser for help on using the repository browser.