blob: fa80c36bbdd101ebd22adacc48d7c363f5b486b2 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
|
/* NumberSpinner - namespace "dijitSpinner"
*
* Styling NumberSpinner mainly includes:
*
* 1. Arrows
* Outer containers: .dijitSpinnerButtonContainer|.dijitSpinnerButtonInner - for border, padding and position
* Arrows: .dijitArrowButton|.dijitUpArrowButton.|dijitDownArrowButton
* Inner container: .dijitArrowButtonInner - for border, padding, width|height and background image
*
* 2. Hover state
* .dijitUpArrowButtonHover|.dijitDownArrowButtonHover .* - for background color|image
*
* 3. Active state
* .dijitUpArrowButtonActive|.dijitDownArrowButtonActive .* - for border, padding, margin and background color|image
*
* 4. Focused state
* .dijitSpinnerFocused .* - for background color|image
*
* 5. Disabled state
* .dijitSpinnerDisabled .* - for background color|image
*/
@import 'dijit_form_variables';
.{$theme-name} {
.dijitSpinner {
.dijitSpinnerButtonContainer {
overflow: hidden;
position: relative;
width: auto;
padding: 0;
border: $numberspinner-button-border;
}
.dijitSpinnerButtonInner {
width: $numberspinner-button-width;
padding: $numberspinner-button-inner-padding 0 !important;
margin: 0;
}
/* up & down buttons */
.dijitArrowButton {
button-style();
border-radius: 0;
border: 0;
width: auto;
overflow: hidden;
left: 0;
right: 0;
padding: $numberspinner-button-padding;
&:before {
content: none; // remove arrow icons from dijitArrowButton nodes
}
}
/* up button */
.dijitUpArrowButton {
border-top-right-radius: $numberspinner-button-border-radius
}
/* down button */
.dijitDownArrowButton {
border-bottom-right-radius: $numberspinner-button-border-radius
}
/* hover */
.dijitUpArrowButtonHover,
.dijitDownArrowButtonHover {
button-hover-style();
}
/* active */
.dijitDownArrowButtonActive,
.dijitUpArrowButtonActive {
button-active-style();
}
/* up & down arrows */
.dijitArrowButtonInner {
line-height: $icon-size;
display: block;
.dijitInputField {
padding: 0;
}
&:before {
content: $numberspinner-icon-up;
}
}
.dijitDownArrowButton .dijitArrowButtonInner {
&:before {
content: $numberspinner-icon-down;
}
}
}
/* disabled */
.dijitSpinnerDisabled {
.dijitDownArrowButton,
.dijitUpArrowButton {
button-disabled-style();
}
}
// checkbox icon within alternative buttons
if($button-alternative-colors && length($button-alternative-colors) > 0) {
for class in $button-alternative-colors {
.{class} {
.dijitSpinnerButtonContainer {
border-color: $button-alternative-colors[class];
}
}
}
}
}
|
