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