]>
Commit | Line | Data |
---|---|---|
63c4db6d C |
1 | @import '_variables'; |
2 | ||
26c6ee80 | 3 | @mixin disable-default-a-behaviour { |
cadb46d8 | 4 | &:hover, &:focus, &:active { |
26c6ee80 C |
5 | text-decoration: none !important; |
6 | outline: none !important; | |
7 | } | |
8 | } | |
c30745f3 C |
9 | |
10 | @mixin peertube-input-text($width) { | |
11 | display: inline-block; | |
12 | height: $button-height; | |
13 | width: $width; | |
14 | background: #fff; | |
15 | border: 1px solid #C6C6C6; | |
16 | border-radius: 3px; | |
17 | padding-left: 15px; | |
15ca2e87 | 18 | padding-right: 15px; |
c30745f3 C |
19 | |
20 | &::placeholder { | |
21 | color: #585858; | |
22 | } | |
23 | } | |
24 | ||
5f0805d3 C |
25 | @mixin peertube-textarea ($width, $height) { |
26 | @include peertube-input-text($width); | |
27 | ||
28 | height: $height; | |
29 | padding: 5px 15px; | |
30 | font-size: 15px; | |
31 | } | |
32 | ||
7b272fd7 | 33 | @mixin orange-button { |
15a7387d C |
34 | &, &:active, &:focus { |
35 | color: #fff; | |
36 | background-color: $orange-color; | |
37 | } | |
7b272fd7 | 38 | |
15a7387d | 39 | &:hover { |
0727cab0 | 40 | color: #fff; |
7b272fd7 C |
41 | background-color: $orange-hoover-color; |
42 | } | |
4cc66133 C |
43 | |
44 | &[disabled], &.disabled { | |
45 | cursor: default; | |
cadb46d8 C |
46 | color: #fff; |
47 | background-color: #C6C6C6; | |
4cc66133 | 48 | } |
7b272fd7 C |
49 | } |
50 | ||
51 | @mixin grey-button { | |
15a7387d C |
52 | &, &:active, &:focus { |
53 | background-color: $grey-color; | |
54 | color: #585858; | |
55 | } | |
7b272fd7 | 56 | |
4cc66133 | 57 | &:hover, &:active, &:focus, &[disabled], &.disabled { |
0727cab0 | 58 | color: #585858; |
7b272fd7 C |
59 | background-color: $grey-hoover-color; |
60 | } | |
4cc66133 C |
61 | |
62 | &[disabled], &.disabled { | |
63 | cursor: default; | |
64 | } | |
7b272fd7 C |
65 | } |
66 | ||
c30745f3 C |
67 | @mixin peertube-button { |
68 | border: none; | |
c30745f3 C |
69 | font-weight: $font-semibold; |
70 | font-size: 15px; | |
71 | height: $button-height; | |
72 | line-height: $button-height; | |
73 | border-radius: 3px; | |
74 | text-align: center; | |
c30745f3 C |
75 | padding: 0 17px 0 13px; |
76 | cursor: pointer; | |
e600e1fe | 77 | outline: 0; |
c30745f3 C |
78 | } |
79 | ||
80 | @mixin peertube-button-link { | |
81 | display: inline-block; | |
82 | ||
c30745f3 | 83 | @include disable-default-a-behaviour; |
ce0e281d | 84 | @include peertube-button; |
c30745f3 | 85 | } |
2295ce6c | 86 | |
c5911fd3 C |
87 | @mixin peertube-button-file ($width) { |
88 | position: relative; | |
89 | overflow: hidden; | |
90 | display: inline-block; | |
91 | width: $width; | |
92 | ||
93 | @include peertube-button; | |
94 | @include orange-button; | |
95 | ||
96 | input[type=file] { | |
97 | position: absolute; | |
98 | top: 0; | |
99 | right: 0; | |
100 | min-width: 100%; | |
101 | min-height: 100%; | |
102 | font-size: 100px; | |
103 | text-align: right; | |
104 | filter: alpha(opacity=0); | |
105 | opacity: 0; | |
106 | outline: none; | |
107 | background: white; | |
108 | cursor: inherit; | |
109 | display: block; | |
110 | } | |
111 | } | |
112 | ||
2295ce6c C |
113 | @mixin avatar ($size) { |
114 | width: $size; | |
115 | height: $size; | |
116 | } | |
0727cab0 C |
117 | |
118 | @mixin icon ($size) { | |
119 | display: inline-block; | |
120 | background-repeat: no-repeat; | |
121 | background-size: contain; | |
122 | width: $size; | |
123 | height: $size; | |
124 | vertical-align: middle; | |
125 | cursor: pointer; | |
126 | } | |
4cc66133 C |
127 | |
128 | ||
15a7387d C |
129 | @mixin peertube-select-container ($width) { |
130 | padding: 0; | |
131 | margin: 0; | |
4cc66133 | 132 | border: 1px solid #C6C6C6; |
4cc66133 C |
133 | width: $width; |
134 | border-radius: 3px; | |
15a7387d C |
135 | overflow: hidden; |
136 | background: #fff; | |
137 | position: relative; | |
5f0805d3 | 138 | font-size: 15px; |
15a7387d C |
139 | |
140 | &:after { | |
141 | top: 50%; | |
142 | right: calc(0% + 15px); | |
143 | content: " "; | |
144 | height: 0; | |
145 | width: 0; | |
146 | position: absolute; | |
147 | pointer-events: none; | |
148 | border: 5px solid rgba(0, 0, 0, 0); | |
149 | border-top-color: #000000; | |
150 | margin-top: -2px; | |
151 | z-index: 100; | |
152 | } | |
153 | ||
154 | select { | |
155 | padding: 0 12px; | |
156 | width: calc(100% + 2px); | |
157 | position: relative; | |
158 | left: 1px; | |
159 | border: none; | |
160 | box-shadow: none; | |
161 | background: transparent none; | |
162 | appearance: none; | |
163 | cursor: pointer; | |
164 | height: $button-height; | |
165 | ||
166 | &:focus { | |
167 | outline: none; | |
168 | } | |
169 | ||
170 | &:-moz-focusring { | |
171 | color: transparent; | |
172 | text-shadow: 0 0 0 #000; | |
173 | } | |
174 | } | |
175 | } | |
176 | ||
177 | @mixin peertube-select-disabled-container ($width) { | |
178 | @include peertube-select-container($width); | |
179 | ||
180 | background-color: #E5E5E5; | |
181 | ||
182 | select { | |
183 | cursor: default; | |
184 | } | |
4cc66133 | 185 | } |
a0d69908 | 186 | |
5f0805d3 C |
187 | // Thanks: https://codepen.io/triss90/pen/XNEdRe/ |
188 | @mixin peertube-radio-container { | |
189 | input[type="radio"] { | |
190 | display: none; | |
191 | ||
192 | & + label { | |
193 | font-weight: $font-regular; | |
194 | cursor: pointer; | |
195 | ||
196 | &:before { | |
197 | position: relative; | |
198 | top: -2px; | |
199 | content: ''; | |
200 | background: #fff; | |
201 | border-radius: 100%; | |
202 | border: 1px solid #000; | |
203 | display: inline-block; | |
204 | width: 15px; | |
205 | height: 15px; | |
206 | vertical-align: middle; | |
207 | cursor: pointer; | |
208 | text-align: center; | |
209 | margin-right: 10px; | |
210 | } | |
211 | } | |
212 | ||
213 | &:checked + label:before { | |
214 | background-color: #000; | |
215 | box-shadow: inset 0 0 0 4px #fff; | |
216 | } | |
217 | ||
218 | &:focus + label:before { | |
219 | outline: none; | |
220 | border-color: #000; | |
221 | } | |
222 | } | |
223 | } | |
224 | ||
a0d69908 C |
225 | @mixin peertube-checkbox ($border-width) { |
226 | display: none; | |
227 | ||
228 | & + label { | |
229 | position: relative; | |
230 | width: 18px; | |
231 | height: 18px; | |
232 | border: $border-width solid #000; | |
233 | border-radius: 3px; | |
234 | vertical-align: middle; | |
235 | cursor: pointer; | |
236 | ||
237 | &:after { | |
238 | content: ''; | |
239 | position: absolute; | |
240 | top: calc(2px - #{$border-width}); | |
241 | left: 5px; | |
242 | width: 5px; | |
243 | height: 12px; | |
244 | opacity: 0; | |
245 | transform: rotate(45deg) scale(0); | |
246 | border-right: 2px solid #fff; | |
247 | border-bottom: 2px solid #fff; | |
248 | } | |
249 | } | |
250 | ||
251 | &:checked + label { | |
252 | border-color: transparent; | |
253 | background: $orange-color; | |
254 | animation: jelly 0.6s ease; | |
255 | ||
256 | &:after { | |
257 | opacity: 1; | |
258 | transform: rotate(45deg) scale(1); | |
259 | } | |
260 | } | |
261 | ||
262 | & + label + label { | |
263 | font-size: 15px; | |
264 | font-weight: $font-regular; | |
265 | margin-left: 5px; | |
266 | cursor: pointer; | |
267 | } | |
268 | } | |
269 |