diff options
Diffstat (limited to 'client/src/sass/include/_mixins.scss')
-rw-r--r-- | client/src/sass/include/_mixins.scss | 97 |
1 files changed, 97 insertions, 0 deletions
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss new file mode 100644 index 000000000..f6f17846e --- /dev/null +++ b/client/src/sass/include/_mixins.scss | |||
@@ -0,0 +1,97 @@ | |||
1 | @import '_variables'; | ||
2 | |||
3 | @mixin disable-default-a-behaviour { | ||
4 | &:hover, &:focus, &:active { | ||
5 | text-decoration: none !important; | ||
6 | outline: none !important; | ||
7 | } | ||
8 | } | ||
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; | ||
18 | |||
19 | &::placeholder { | ||
20 | color: #585858; | ||
21 | } | ||
22 | } | ||
23 | |||
24 | @mixin orange-button { | ||
25 | color: #fff; | ||
26 | background-color: $orange-color; | ||
27 | |||
28 | &:hover, &:active, &:focus { | ||
29 | color: #fff; | ||
30 | background-color: $orange-hoover-color; | ||
31 | } | ||
32 | |||
33 | &[disabled], &.disabled { | ||
34 | cursor: default; | ||
35 | color: #fff; | ||
36 | background-color: #C6C6C6; | ||
37 | } | ||
38 | } | ||
39 | |||
40 | @mixin grey-button { | ||
41 | background-color: $grey-color; | ||
42 | color: #585858; | ||
43 | |||
44 | &:hover, &:active, &:focus, &[disabled], &.disabled { | ||
45 | color: #585858; | ||
46 | background-color: $grey-hoover-color; | ||
47 | } | ||
48 | |||
49 | &[disabled], &.disabled { | ||
50 | cursor: default; | ||
51 | } | ||
52 | } | ||
53 | |||
54 | @mixin peertube-button { | ||
55 | border: none; | ||
56 | font-weight: $font-semibold; | ||
57 | font-size: 15px; | ||
58 | height: $button-height; | ||
59 | line-height: $button-height; | ||
60 | border-radius: 3px; | ||
61 | text-align: center; | ||
62 | padding: 0 17px 0 13px; | ||
63 | cursor: pointer; | ||
64 | outline: 0; | ||
65 | } | ||
66 | |||
67 | @mixin peertube-button-link { | ||
68 | display: inline-block; | ||
69 | |||
70 | @include disable-default-a-behaviour; | ||
71 | @include peertube-button; | ||
72 | } | ||
73 | |||
74 | @mixin avatar ($size) { | ||
75 | width: $size; | ||
76 | height: $size; | ||
77 | } | ||
78 | |||
79 | @mixin icon ($size) { | ||
80 | display: inline-block; | ||
81 | background-repeat: no-repeat; | ||
82 | background-size: contain; | ||
83 | width: $size; | ||
84 | height: $size; | ||
85 | vertical-align: middle; | ||
86 | cursor: pointer; | ||
87 | } | ||
88 | |||
89 | |||
90 | @mixin peertube-select ($width) { | ||
91 | background-color: #fff; | ||
92 | border: 1px solid #C6C6C6; | ||
93 | height: $button-height; | ||
94 | width: $width; | ||
95 | border-radius: 3px; | ||
96 | padding-left: 15px; | ||
97 | } | ||