css/buttons.sass
Copying Source is Forbidden
255 lines of code
1
// buttons, buttons, buttons AND ... MORE BUTTONS!!!!
2
3
button, input[type='button'] {
4
margin-left: 2px;
5
margin-right: 2px;
6
}
7
8
button, input[type='button'], input[type='submit'], input[type='reset'], input[type='cancel'] {
9
@include buttonize;
10
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5) !important;
11
12
&:disabled {
13
@include buttonize(grey);
14
@include borders-button(grey);
15
color: white;
16
17
&:hover {
18
transition: none;
19
filter: none;
20
transform: none;
21
cursor: url('/images/site/cursor2.png'), auto;
22
}
23
24
input[type='checkbox']:disabled {
25
background-color: var(--white) !important;
26
color: var(--input-clr) !important;
27
}
28
}
29
30
&.tiny {
31
font-size: var(--tiny-font-size);
32
margin: 2px;
33
margin-bottom: 6px;
34
padding: 2px;
35
}
36
37
&.save {
38
@include buttonize(green);
39
@include borders-button(green);
40
color: white;
41
42
b, i { color: white; }
43
}
44
45
&.reset {
46
@include buttonize(yellow);
47
@include borders-button(yellow);
48
color: black;
49
text-shadow: 0 0 4px rgba(255, 255, 255, 0.9) !important;
50
51
b, i { color: black; }
52
}
53
54
&.cancel {
55
@include buttonize(red);
56
@include borders-button(red);
57
color: white;
58
59
b, i { color: white; }
60
}
61
62
&.blue-button, &.blue {
63
@include buttonize(blue);
64
@include borders-button(blue);
65
color: white;
66
67
b, i { color: white; }
68
}
69
70
&.cyan-button, &.cyan {
71
@include buttonize(medium-cyan);
72
@include borders-button(cyan);
73
color: white;
74
75
b, i { color: white; }
76
}
77
78
&.green-button, &.green {
79
@include buttonize(green);
80
@include borders-button(green);
81
color: white;
82
83
b, i { color: white; }
84
}
85
86
&.red-button, &.red {
87
@include buttonize(red);
88
@include borders-button(red);
89
color: white;
90
91
b, i { color: white; }
92
}
93
94
&.yellow-button, &.yellow {
95
@include buttonize(medium-yellow);
96
@include borders-button(yellow);
97
color: white;
98
99
b, i { color: white; }
100
}
101
102
&.purple-button, &.purple {
103
@include buttonize(purple);
104
@include borders-button(purple);
105
color: white;
106
107
b, i { color: white; }
108
}
109
110
&.as_link {
111
background: none;
112
border-color: transparent;
113
box-shadow: none;
114
color: var(--link-clr);
115
transform: none;
116
cursor: pointer;
117
height: min-content;
118
119
b, i { color: --link-clr; }
120
}
121
122
&.big_button {
123
border-width: 3px;
124
border-style: outset;
125
border-radius: 10px;
126
font-size: var(--giant-font-size);
127
padding: 12px 18px 12px 18px;
128
}
129
130
&.login_button {
131
border-width: 3px;
132
border-style: outset;
133
border-radius: 10px;
134
font-size: var(--normal-font-size);
135
padding: 18px 18px 18px 18px;
136
}
137
138
&:hover { cursor: url('/images/site/pointer.png'), auto; }
139
140
@include margin(2px, 5px, 5px, 2px);
141
}
142
143
/************************************/
144
145
// Dropdown Button
146
.dropbtn {
147
@include buttonize;
148
height: 20px;
149
min-width: 20px;
150
white-space: nowrap;
151
margin: 0;
152
margin-top: 2px;
153
}
154
155
// The container <div> - needed to position the dropdown content
156
.dropdown {
157
position: relative;
158
display: inline-block;
159
}
160
161
// Dropdown Content (Hidden by Default)
162
.dropdown-content {
163
background-color: getval($vars, gradient-dark);
164
border: 1px solid getval($vars, borders-clr);
165
border-radius: 5px;
166
color: getval($vars, button-clr);
167
//cursor: default;
168
left: 25%;
169
max-height: 500px;
170
min-width: 140px;
171
opacity: 0.25;
172
overflow-x: hidden;
173
overflow-y: hidden;
174
position: absolute;
175
top: calc(100% + 8px);
176
transform: scale(0);
177
transform-origin: top left;
178
transition: all 200ms cubic-bezier(0.18, 0.89, 0.32, 1.08);
179
/* transition: all 100ms ease-in-out; */
180
z-index: 9999;
181
182
a {
183
background-color: getval($vars, gradient-dark);
184
border-bottom: 1px solid getval($vars, gradient-dark);
185
border-top: 1px solid getval($vars, gradient-dark);
186
color: getval($vars, button-clr);
187
padding: 2px 3px;
188
text-decoration: none;
189
display: block;
190
white-space: nowrap;
191
192
&:hover {
193
@include mo-lift(1.05);
194
195
background-color: getval($vars, gradient-light);
196
border-bottom: 1px solid getval($vars, borders-clr);
197
border-top: 1px solid getval($vars, borders-clr);
198
}
199
}
200
201
hr {
202
background-color: getval($vars, gradient-dark);
203
}
204
}
205
206
// Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button)
207
.show {
208
opacity: 1;
209
transform: scale(1);
210
211
a {
212
opacity: 1;
213
transition: opacity 350ms ease-in-out 150ms;
214
}
215
}
216
217
/************************************/
218
219
.navbutton {
220
background-color: var(--gradient-light);
221
border: 1px outset var(--borders-clr);
222
border-radius: 5px;
223
box-shadow: 3px 3px 3px var(--input-box-shadow-clr);
224
//cursor: default;
225
//display: inline;
226
padding: 0 3px 0 3px;
227
margin: 0;
228
text-align: center;
229
230
@include transition;
231
}
232
233
.navbutton:hover {
234
box-shadow: 1px 10px 8px -3px var(--input-box-shadow-clr);
235
cursor: pointer;
236
transform: translateY(-3px);
237
transform: scale(1.1);
238
background-color: var(--gradient-dark);
239
}
240
241
.navbutton_selected {
242
background-color: var(--gradient-dark);
243
border: 1px outset var(--borders-clr);
244
border-radius: 3px;
245
box-shadow: 3px 3px 3px var(--input-box-shadow-clr);
246
//cursor: default;
247
padding: 0 3px 0 3px;
248
margin: 0;
249
text-align: center;
250
251
transform: translateY(3px);
252
transform: scale(0.8);
253
254
@include transition;
255
}