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