aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass/include
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/sass/include')
-rw-r--r--client/src/sass/include/_mixins.scss97
-rw-r--r--client/src/sass/include/_variables.scss29
2 files changed, 126 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}
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
new file mode 100644
index 000000000..0d310409b
--- /dev/null
+++ b/client/src/sass/include/_variables.scss
@@ -0,0 +1,29 @@
1$font-regular: 400;
2$font-semibold: 600;
3$font-bold: 700;
4
5$grey-color: #E5E5E5;
6$grey-hoover-color: #EFEFEF;;
7$orange-color: #F1680D;
8$orange-hoover-color: #F97D46;
9
10$black-background: #000;
11$grey-background: #f6f2f2;
12$red-error: #FF0000;
13
14$expanded-horizontal-margins: 150px;
15$not-expanded-horizontal-margins: 30px;
16
17$button-height: 30px;
18
19$header-height: 50px;
20$header-border-color: #e9eff6;
21$search-input-width: 375px;
22
23$menu-color: #fff;
24$menu-width: 240px;
25
26$footer-height: 30px;
27$footer-margin: 30px;
28
29$footer-border-color: $header-border-color;