css/inputs.sass
Copying Source is Forbidden
123 lines of code
1
/*
2
button inputs are found in buttons.sass
3
*/
4
5
input {
6
color: var(--input-clr);
7
background-color: var(--input-bg);
8
cursor: url('/images/site/cursor2.png'), auto;
9
padding: 0 2px 0 2px;
10
margin: 0;
11
12
@include transition;
13
@include sunken($transparent: 1);
14
@include placeholder;
15
16
&::-webkit-outer-spin-button,
17
&::-webkit-inner-spin-button {
18
-webkit-appearance: none;
19
}
20
21
&[type='number'] {
22
-moz-appearance: textfield;
23
}
24
25
&[type='button'],
26
&[type='image'],
27
&[type='reset'],
28
&[type='submit'] {
29
@include mo-lift;
30
@include box-shadow;
31
}
32
33
&[type='color'],
34
&[type='checkbox'],
35
&[type='radio'] {
36
@include mo-lift(1.2);
37
}
38
39
&[type='checkbox'],
40
&[type='radio'] {
41
@include box-shadow;
42
}
43
44
&[type='checkbox'].copyright, &[type='checkbox'].small {
45
height: 10px;
46
width: 10px;
47
}
48
49
&:not(:placeholder-shown):invalid, &:indeterminate, &:out-of-range {
50
background-color: dark-red;
51
}
52
53
&:disabled, &:read-only {
54
border-color: darken(getval($vars, borders-clr), 55%);
55
background-color: darken(getval($vars, input-bg), 55%);
56
color: darken(getval($vars, input-clr), 35%);
57
}
58
59
&[type='checkbox'] { // cuz the default position is just wrong, imho
60
transform: translateY(2px);
61
}
62
63
&:focus {
64
outline: none;
65
border: 2px solid darken(getval($vars, borders-clr), 55%);
66
}
67
}
68
69
textarea {
70
color: var(--input-clr);
71
cursor: url('/images/site/cursor.png'), auto;
72
background-color: var(--input-bg);
73
margin: 0;
74
padding: 0;
75
76
@include sunken($transparent: 1);
77
@include scrollbarred;
78
@include transition;
79
80
&:disabled, &:read-only {
81
background-color: darken(getval($vars, input-bg), 45%);
82
}
83
}
84
85
select {
86
background-color: var(--select-bg);
87
color: var(--select-clr);
88
font-size: var(--normal-font-size);
89
cursor: url('/images/site/pointer.png'), auto;
90
91
@include borders-select;
92
@include rounded;
93
@include transition;
94
@include box-shadow;
95
@include scrollbarred();
96
97
&.tiny {
98
font-size: var(--tiny-font-size);
99
@include mini-select(/images/site/friends\.png);
100
}
101
102
&:disabled {
103
background-color: darken(getval($vars, select-bg), 45%);
104
color: darken(getval($vars, select-clr), 35%);
105
cursor: url('/images/site/cursor.png'), auto;
106
}
107
}
108
109
option {
110
font-size: inherit;
111
color: getval($vars, select-clr);
112
background-color: inherit;
113
}
114
115
input.hiddenfile {
116
width: 0.1px;
117
height: 0.1px;
118
opacity: 0;
119
overflow: hidden;
120
position: absolute;
121
z-index: -1;
122
123
}