gtk-3.0/widgets/_spinbuttons.scss 4.7 K raw
1
/*****************
2
 * GtkSpinButton *
3
 *****************/
4
spinbutton {
5
  &:not(.vertical) {
6
    // in this horizontal configuration, the whole spinbutton
7
    // behaves as the entry, so we extend the entry styling
8
    // and nuke the style on the internal entry
9
    @extend %entry;
10
11
    padding: 0;
12
13
    entry {
14
      min-width: 28px;
15
      // reset all the other props since the spinbutton node is styled here
16
      margin: 0;
17
      background: none;
18
      background-color: transparent;
19
      border: none;
20
      border-radius: 0;
21
      box-shadow: none;
22
    }
23
24
    button {
25
      min-height: 16px;
26
      margin: 0;
27
      padding-bottom: 0;
28
      padding-top: 0;
29
      color: mix($fg_color, $base_color, 90%);
30
      background-image: none;
31
      border-style: none none none solid;
32
      border-color: transparentize($borders_color, 0.7);
33
      border-radius: 0;
34
      box-shadow: inset 1px 0px 0px 0px rgba(0,0,0,0.07);
35
36
      &:dir(rtl) { border-style: none solid none none; }
37
38
      &:hover {
39
        color: $fg_color;
40
        background-color: $base_hover_color;
41
      }
42
43
      &:disabled { color: transparentize($insensitive_fg_color, 0.7); }
44
45
      &:active {
46
        background-color: transparentize(black, 0.9);
47
        box-shadow: inset 0 2px 3px -1px transparentize(black, 0.8);
48
      }
49
50
      &:backdrop {
51
        color: mix($backdrop_fg_color, $backdrop_base_color, 90%);
52
        background-color: transparent;
53
        border-color: transparentize($backdrop_borders_color, 0.7);
54
        transition: $backdrop_transition;
55
      }
56
57
      &:backdrop:disabled {
58
        color: transparentize($backdrop_insensitive_color,0.7);
59
        background-image: none;
60
        border-style: none none none solid; // It is needed or it gets overridden
61
        box-shadow: inset 1px 0px 0px 0px rgba(0,0,0,0.07);
62
63
        &:dir(rtl) { border-style: none solid none none; }
64
      }
65
66
      &:last-child {
67
        border-top-right-radius: 2px;
68
        border-bottom-right-radius: 2px;
69
      }
70
    }
71
  }
72
73
  // OSD horizontal
74
  .osd &:not(.vertical) {
75
    button {
76
      @include button(undecorated);
77
78
      color: $osd_fg_color;
79
      border-style: none none none solid;
80
      border-color: transparentize($osd_borders_color, 0.3);
81
      border-radius: 0;
82
      box-shadow: none;
83
      -gtk-icon-shadow: 0 1px black;
84
85
      &:dir(rtl) { border-style: none solid none none; }
86
87
      &:hover {
88
        @include button(undecorated);
89
90
        color: $osd_fg_color;
91
        border-color: transparentize(opacify($osd_borders_color, 1), 0.5);
92
        background-color: transparentize($osd_fg_color, 0.9);
93
        -gtk-icon-shadow: 0 1px black;
94
        box-shadow: none;
95
      }
96
97
      &:backdrop {
98
        @include button(undecorated);
99
100
        color: $osd_fg_color;
101
        border-color: transparentize(opacify($osd_borders_color, 1), 0.5);
102
        -gtk-icon-shadow: none;
103
        box-shadow: none;
104
      }
105
106
      &:disabled {
107
        @include button(undecorated);
108
109
        color: $osd_insensitive_fg_color;
110
        border-color: transparentize(opacify($osd_borders_color, 1), 0.5);
111
        -gtk-icon-shadow: none;
112
        box-shadow: none;
113
      }
114
115
      &:last-child { border-radius: 0 3px 3px 0; }
116
117
      &:dir(rtl):first-child { border-radius: 3px 0 0 3px; }
118
    }
119
  }
120
121
  // Vertical
122
  &.vertical {
123
    // in the vertical configuration, we treat the spinbutton
124
    // as a box, and tweak the style of the entry in the middle
125
    // so that it's linked
126
127
    // FIXME: this should not be set at all, but otherwise it gets the wrong
128
    // color
129
    &:disabled { color: $insensitive_fg_color; }
130
    &:backdrop:disabled { color: $backdrop_insensitive_color; }
131
132
    &:drop(active) {
133
      border-color: transparent;
134
      box-shadow: none;
135
    }
136
137
    entry {
138
      min-height: 32px;
139
      min-width: 32px;
140
      padding: 0;
141
      border-radius: 0;
142
    }
143
144
    button {
145
      min-height: 32px;
146
      min-width: 32px;
147
      padding: 0;
148
      border-width: 1px;
149
      border-color: $borders_color;
150
      box-shadow: 0 1px $top_highlight;
151
152
      &.up { @extend %top_button; }
153
154
      &.down { @extend %bottom_button; }
155
    }
156
157
    %top_button {
158
      border-radius: 3px 3px 0 0;
159
      border-style: solid solid none solid;
160
    }
161
162
    %bottom_button {
163
      border-radius: 0 0 3px 3px;
164
      border-style: none solid solid solid;
165
    }
166
  }
167
168
  // OSD vertical
169
  .osd &.vertical button:first-child {
170
    @include button(osd);
171
172
    &:hover { @include button(osd-hover);}
173
174
    &:active { @include button(osd-active); }
175
176
    &:disabled { @include button(osd-insensitive); }
177
178
    &:backdrop { @include button(osd-backdrop); }
179
  }
180
181
  // Misc
182
  treeview &:not(.vertical) {
183
    min-height: 0;
184
    border-style: none;
185
    border-radius: 0;
186
187
    entry {
188
      min-height: 0;
189
      padding: 1px 2px;
190
    }
191
  }
192
}