]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blame - client/src/sass/include/_mixins.scss
Merge branch 'develop' into cli-wrapper
[github/Chocobozzz/PeerTube.git] / client / src / sass / include / _mixins.scss
CommitLineData
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 9
3ec8dc09 10@mixin disable-outline {
e78980eb
RK
11 &:focus:not(.focus-visible) {
12 outline: none;
13 }
3ec8dc09
C
14
15 &::-moz-focus-inner {
16 border: 0;
17 padding: 0
18 }
19}
20
769ac6c1
RK
21/**
22 * This mixin will crop text in block for needed amount of lines and put ellipsis at the end
23 *
24 * @param $font-size font-size property
25 * @param $line-height line-height property
26 * @param $lines-to-show amount of lines to show
27 */
74d63469 28@mixin ellipsis-multiline($font-size: 1rem, $line-height: 1, $lines-to-show: 2) {
769ac6c1
RK
29 display: block;
30 /* Fallback for non-webkit */
31 display: -webkit-box;
32 max-height: $font-size*$line-height*$lines-to-show;
33 /* Fallback for non-webkit */
34 font-size: $font-size;
35 line-height: $line-height;
36 -webkit-line-clamp: $lines-to-show;
37 -webkit-box-orient: vertical;
38 overflow: hidden;
39 text-overflow: ellipsis;
40}
41
42@mixin prefix($property, $parameters...) {
43 @each $prefix in -webkit-, -moz-, -ms-, -o-, "" {
44 #{$prefix}#{$property}: $parameters;
45 }
46}
47
7a14004b
C
48@mixin peertube-word-wrap {
49 word-break: normal;
50 word-wrap: break-word;
51 overflow-wrap: break-word;
52 -webkit-hyphens: auto;
53 -ms-hyphens: auto;
54 -moz-hyphens: auto;
55 hyphens: auto;
7a14004b
C
56}
57
c30745f3
C
58@mixin peertube-input-text($width) {
59 display: inline-block;
60 height: $button-height;
61 width: $width;
9a0fc840 62 background: var(--inputColor);
c30745f3
C
63 border: 1px solid #C6C6C6;
64 border-radius: 3px;
65 padding-left: 15px;
15ca2e87 66 padding-right: 15px;
9a0fc840
RK
67
68 &::placeholder {
69 color: var(--inputPlaceholderColor);
70 }
8a19bee1 71}
c30745f3 72
8a19bee1
C
73@mixin peertube-input-group($width) {
74 width: $width;
75 height: $button-height;
76 padding-top: 0;
77 padding-bottom: 0;
78
79 .input-group-text{
80 font-size: 14px;
9a0fc840 81 color: gray;
c30745f3
C
82 }
83}
84
5f0805d3
C
85@mixin peertube-textarea ($width, $height) {
86 @include peertube-input-text($width);
87
88 height: $height;
89 padding: 5px 15px;
90 font-size: 15px;
91}
92
7b272fd7 93@mixin orange-button {
15a7387d
C
94 &, &:active, &:focus {
95 color: #fff;
9a0fc840 96 background-color: var(--mainColor);
15a7387d 97 }
7b272fd7 98
15a7387d 99 &:hover {
0727cab0 100 color: #fff;
9a0fc840 101 background-color: var(--mainHoverColor);
7b272fd7 102 }
4cc66133
C
103
104 &[disabled], &.disabled {
105 cursor: default;
cadb46d8
C
106 color: #fff;
107 background-color: #C6C6C6;
4cc66133 108 }
7b272fd7
C
109}
110
111@mixin grey-button {
15a7387d
C
112 &, &:active, &:focus {
113 background-color: $grey-color;
114 color: #585858;
115 }
7b272fd7 116
4cc66133 117 &:hover, &:active, &:focus, &[disabled], &.disabled {
0727cab0 118 color: #585858;
7b272fd7
C
119 background-color: $grey-hoover-color;
120 }
4cc66133
C
121
122 &[disabled], &.disabled {
123 cursor: default;
124 }
7b272fd7
C
125}
126
c30745f3
C
127@mixin peertube-button {
128 border: none;
c30745f3
C
129 font-weight: $font-semibold;
130 font-size: 15px;
131 height: $button-height;
132 line-height: $button-height;
133 border-radius: 3px;
134 text-align: center;
c30745f3
C
135 padding: 0 17px 0 13px;
136 cursor: pointer;
e600e1fe 137 outline: 0;
c30745f3
C
138}
139
140@mixin peertube-button-link {
141 display: inline-block;
142
c30745f3 143 @include disable-default-a-behaviour;
ce0e281d 144 @include peertube-button;
c30745f3 145}
2295ce6c 146
c5911fd3
C
147@mixin peertube-button-file ($width) {
148 position: relative;
149 overflow: hidden;
150 display: inline-block;
151 width: $width;
152
153 @include peertube-button;
154 @include orange-button;
155
156 input[type=file] {
157 position: absolute;
158 top: 0;
159 right: 0;
160 min-width: 100%;
161 min-height: 100%;
162 font-size: 100px;
163 text-align: right;
164 filter: alpha(opacity=0);
165 opacity: 0;
166 outline: none;
167 background: white;
168 cursor: inherit;
169 display: block;
170 }
171}
172
0727cab0
C
173@mixin icon ($size) {
174 display: inline-block;
175 background-repeat: no-repeat;
176 background-size: contain;
177 width: $size;
178 height: $size;
179 vertical-align: middle;
180 cursor: pointer;
181}
4cc66133 182
15a7387d
C
183@mixin peertube-select-container ($width) {
184 padding: 0;
185 margin: 0;
4cc66133 186 border: 1px solid #C6C6C6;
4cc66133
C
187 width: $width;
188 border-radius: 3px;
15a7387d 189 overflow: hidden;
9a0fc840 190 background: var(--inputColor);
15a7387d 191 position: relative;
5f0805d3 192 font-size: 15px;
15a7387d
C
193
194 &:after {
195 top: 50%;
196 right: calc(0% + 15px);
197 content: " ";
198 height: 0;
199 width: 0;
200 position: absolute;
201 pointer-events: none;
202 border: 5px solid rgba(0, 0, 0, 0);
a4f99a76 203 border-top-color: #000;
15a7387d
C
204 margin-top: -2px;
205 z-index: 100;
206 }
207
208 select {
108af661 209 padding: 0 35px 0 12px;
15a7387d
C
210 width: calc(100% + 2px);
211 position: relative;
212 left: 1px;
213 border: none;
214 box-shadow: none;
215 background: transparent none;
216 appearance: none;
217 cursor: pointer;
218 height: $button-height;
108af661 219 text-overflow: ellipsis;
15a7387d
C
220
221 &:focus {
222 outline: none;
223 }
224
225 &:-moz-focusring {
226 color: transparent;
227 text-shadow: 0 0 0 #000;
228 }
229 }
230}
231
232@mixin peertube-select-disabled-container ($width) {
233 @include peertube-select-container($width);
234
235 background-color: #E5E5E5;
236
237 select {
238 cursor: default;
239 }
4cc66133 240}
a0d69908 241
5f0805d3
C
242// Thanks: https://codepen.io/triss90/pen/XNEdRe/
243@mixin peertube-radio-container {
244 input[type="radio"] {
245 display: none;
246
247 & + label {
248 font-weight: $font-regular;
249 cursor: pointer;
250
251 &:before {
252 position: relative;
253 top: -2px;
254 content: '';
255 background: #fff;
256 border-radius: 100%;
257 border: 1px solid #000;
258 display: inline-block;
259 width: 15px;
260 height: 15px;
261 vertical-align: middle;
262 cursor: pointer;
263 text-align: center;
264 margin-right: 10px;
265 }
266 }
267
268 &:checked + label:before {
269 background-color: #000;
270 box-shadow: inset 0 0 0 4px #fff;
271 }
272
273 &:focus + label:before {
274 outline: none;
275 border-color: #000;
276 }
277 }
278}
279
a0d69908
C
280@mixin peertube-checkbox ($border-width) {
281 display: none;
282
0f7fedc3 283 & + span {
a0d69908
C
284 position: relative;
285 width: 18px;
286 height: 18px;
9a0fc840 287 border: $border-width solid var(--mainForegroundColor);
a0d69908
C
288 border-radius: 3px;
289 vertical-align: middle;
290 cursor: pointer;
291
292 &:after {
293 content: '';
294 position: absolute;
295 top: calc(2px - #{$border-width});
296 left: 5px;
297 width: 5px;
298 height: 12px;
299 opacity: 0;
300 transform: rotate(45deg) scale(0);
dcbc29d5
C
301 border-right: 2px solid var(--mainBackgroundColor);
302 border-bottom: 2px solid var(--mainBackgroundColor);
a0d69908
C
303 }
304 }
305
0f7fedc3 306 &:checked + span {
a0d69908 307 border-color: transparent;
9a0fc840 308 background: var(--mainColor);
a0d69908
C
309 animation: jelly 0.6s ease;
310
311 &:after {
312 opacity: 1;
313 transform: rotate(45deg) scale(1);
314 }
315 }
316
0f7fedc3 317 & + span + span {
a0d69908
C
318 font-size: 15px;
319 font-weight: $font-regular;
320 margin-left: 5px;
321 cursor: pointer;
6693df9d 322 display: inline;
a0d69908 323 }
bbe0f064 324
0f7fedc3
C
325 &[disabled] + span,
326 &[disabled] + span + span{
bbe0f064
C
327 opacity: 0.5;
328 cursor: default;
329 }
a0d69908
C
330}
331
4e8c8728
C
332
333@mixin avatar ($size) {
334 object-fit: cover;
a4f99a76 335 border-radius: 50%;
4e8c8728
C
336 width: $size;
337 height: $size;
338}
c6352f2c
C
339
340@mixin chevron ($size, $border-width) {
341 border-style: solid;
342 border-width: $border-width $border-width 0 0;
343 content: '';
344 display: inline-block;
345 transform: rotate(-45deg);
346 height: $size;
347 width: $size;
348}
349
350@mixin chevron-right ($size, $border-width) {
351 @include chevron($size, $border-width);
352
353 left: 0;
354 transform: rotate(45deg);
355}
356
357@mixin chevron-left ($size, $border-width) {
358 @include chevron($size, $border-width);
359
360 left: 0.25em;
361 transform: rotate(-135deg);
362}
0626e7af
C
363
364@mixin in-content-small-title {
365 text-transform: uppercase;
9a0fc840 366 color: var(--mainColor);
0626e7af
C
367 font-weight: $font-bold;
368 font-size: 13px;
170726f5
C
369}
370
22a16e36
C
371@mixin actor-owner {
372 @include disable-default-a-behaviour;
373
9a0fc840 374 display: inline-table;
22a16e36
C
375 font-size: 13px;
376 margin-top: 4px;
9a0fc840 377 color: var(--mainForegroundColor);
22a16e36
C
378
379 span:hover {
380 opacity: 0.8;
381 }
382
383 img {
384 @include avatar(18px);
385
386 margin-left: 7px;
387 position: relative;
388 top: -2px;
389 }
390}
391
170726f5
C
392@mixin sub-menu-with-actor {
393 height: 160px;
394 display: flex;
395 flex-direction: column;
396 align-items: start;
397
398 .actor {
399 display: flex;
400 margin-top: 20px;
401 margin-bottom: 20px;
402
403 img {
404 @include avatar(80px);
405
406 margin-right: 20px;
407 }
408
409 .actor-info {
410 display: flex;
411 flex-direction: column;
412 justify-content: center;
413
7de6afdf
C
414 .actor-names {
415 display: flex;
416 align-items: center;
417
418 .actor-display-name {
419 font-size: 23px;
420 font-weight: $font-bold;
421 }
422
423 .actor-name {
424 margin-left: 7px;
425 position: relative;
426 top: 3px;
427 font-size: 14px;
22a16e36 428 color: $grey-actor-name;
7de6afdf 429 }
170726f5
C
430 }
431
432 .actor-followers {
433 font-size: 15px;
434 }
a4f99a76
C
435
436 .actor-owner {
22a16e36 437 @include actor-owner;
a4f99a76 438 }
170726f5
C
439 }
440 }
441
442 .links {
443 margin-top: 0;
444 margin-bottom: 10px;
445
446 a {
447 margin-top: 0;
448 margin-bottom: 0;
449 }
450 }
08c1efbe
C
451}
452
695237b2 453@mixin create-button ($imageUrl) {
08c1efbe
C
454 @include peertube-button-link;
455 @include orange-button;
456
457 .icon.icon-add {
f2bbd1e1 458 @include icon(20px);
08c1efbe 459
f2bbd1e1
C
460 position: relative;
461 top: -1px;
462 margin-right: 5px;
695237b2 463 background-image: url($imageUrl);
08c1efbe 464 }
a4f99a76 465}
22a16e36
C
466
467@mixin row-blocks {
468 display: flex;
469 min-height: 130px;
470 padding-bottom: 20px;
471 margin-bottom: 20px;
472 border-bottom: 1px solid #C6C6C6;
473
474 @media screen and (max-width: 800px) {
475 flex-direction: column;
476 height: auto;
477 text-align: center;
478 align-items: center;
479 }
6aff854c
C
480}
481
482@mixin video-miniature-small-screen {
483 text-align: center;
484
485 /deep/ .video-miniature {
486 padding-right: 0;
487 height: auto;
488 width: 100%;
489 margin-bottom: 20px;
490
491 .video-miniature-information {
492 width: 100% !important;
493
494 span {
495 width: 100%;
496 }
497 }
498
499 .video-thumbnail {
500 width: 100%;
501 height: auto;
502
503 img {
504 width: 100%;
505 height: auto;
506 }
507 }
508 }
22a16e36 509}