aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src
diff options
context:
space:
mode:
authorWicklow <wicklow@framasoft.org>2023-02-16 12:30:30 +0100
committerChocobozzz <chocobozzz@cpy.re>2023-02-20 13:52:22 +0100
commit27f84cc3371aaf519c1bb5c0cca9e728a9dd3967 (patch)
treec45e780589ea69f0a9842c90af58e22fe32749f4 /client/src
parent6b13ba9b808059fec4398ee3b38c8197d8c41fb9 (diff)
downloadPeerTube-27f84cc3371aaf519c1bb5c0cca9e728a9dd3967.tar.gz
PeerTube-27f84cc3371aaf519c1bb5c0cca9e728a9dd3967.tar.zst
PeerTube-27f84cc3371aaf519c1bb5c0cca9e728a9dd3967.zip
Refactoring class helpers + add bootstrap mixins
Diffstat (limited to 'client/src')
-rw-r--r--client/src/sass/class-helpers.scss292
-rw-r--r--client/src/sass/class-helpers/_buttons.scss37
-rw-r--r--client/src/sass/class-helpers/_common.scss123
-rw-r--r--client/src/sass/class-helpers/_custom-bootstrap-helpers.scss36
-rw-r--r--client/src/sass/class-helpers/_forms.scss55
-rw-r--r--client/src/sass/class-helpers/_menu.scss80
-rw-r--r--client/src/sass/class-helpers/index.scss10
-rw-r--r--client/src/sass/include/_bootstrap-mixins.scss5
-rw-r--r--client/src/sass/include/_mixins.scss29
9 files changed, 361 insertions, 306 deletions
diff --git a/client/src/sass/class-helpers.scss b/client/src/sass/class-helpers.scss
deleted file mode 100644
index feb3a6de2..000000000
--- a/client/src/sass/class-helpers.scss
+++ /dev/null
@@ -1,292 +0,0 @@
1@use '_variables' as *;
2@use '_mixins' as *;
3@use '_badges' as *;
4@use '_icons' as *;
5@use '_fonts' as *;
6
7.link-orange {
8 color: pvar(--mainForegroundColor);
9 font-weight: $font-semibold;
10 border-bottom: 0.18em solid pvar(--mainColor);
11 display: inline-block;
12 line-height: 1.1;
13
14 &:hover {
15 color: pvar(--mainForegroundColor);
16 opacity: 0.8;
17 }
18}
19
20.underline-orange {
21 display: inline-block;
22 border-bottom: 0.19em solid pvar(--mainColor);
23}
24
25// ---------------------------------------------------------------------------
26
27.peertube-button {
28 @include peertube-button;
29}
30
31.peertube-button-big {
32 @include peertube-button-big;
33}
34
35.peertube-button-link {
36 @include peertube-button-link;
37}
38
39.peertube-button-big-link {
40 @include peertube-button-big-link;
41}
42
43.orange-button {
44 @include orange-button;
45}
46
47.orange-button-inverted {
48 @include orange-button-inverted;
49}
50
51.grey-button {
52 @include grey-button;
53}
54
55.tertiary-button {
56 @include tertiary-button;
57}
58
59.peertube-radio-container {
60 @include peertube-radio-container;
61}
62
63// ---------------------------------------------------------------------------
64
65.muted {
66 @include muted;
67}
68
69// ---------------------------------------------------------------------------
70
71.pt-badge {
72 @include peertube-badge;
73}
74
75// ---------------------------------------------------------------------------
76
77.form-group {
78 margin-bottom: 1rem;
79}
80
81.input-error:not(:focus) {
82 &,
83 + .nav-preview, // Markdown textarea
84 + * + .tab-content {
85 border-color: $red !important;
86 }
87}
88
89.input-group .input-error {
90 z-index: 3;
91}
92
93.form-error,
94.form-warning {
95 display: block;
96 margin-top: 5px;
97 font-size: 0.9em;
98}
99
100.form-error {
101 color: $red;
102}
103
104// Disable red error on input focus
105.input-error:focus,
106.input-group:focus-within {
107 + .form-error,
108 + * + .form-error, // Markdown textarea
109 + * + * + .form-error {
110 color: pvar(--mainForegroundColor);
111 }
112}
113
114.form-group-description {
115 @include muted;
116
117 font-size: 14px;
118 margin-top: 10px;
119}
120
121label + .form-group-description {
122 margin-bottom: 10px;
123 margin-top: 0;
124}
125
126// ---------------------------------------------------------------------------
127
128
129.sub-menu-entry {
130 @include disable-default-a-behaviour;
131 @include margin-right(55px);
132
133 opacity: 0.7;
134 color: pvar(--mainForegroundColor);
135 display: inline-block;
136 font-weight: $font-semibold;
137 border-bottom: 2px solid transparent;
138 white-space: nowrap;
139 font-size: 1rem;
140
141 &.active {
142 border-bottom-color: pvar(--mainColor);
143 }
144
145 &:hover,
146 &:active,
147 &:focus {
148 color: pvar(--mainForegroundColor);
149 }
150
151 &.active,
152 &:hover,
153 &:active,
154 &:focus {
155 opacity: 1;
156 outline: 0 hidden !important;
157 }
158
159 @media screen and (max-width: $mobile-view) {
160 @include margin-left(15px);
161 }
162}
163
164.title-page-v2 {
165 font-weight: normal;
166 font-size: 15px;
167 padding: 35px 25px;
168}
169
170.title-page {
171 @include margin-right(55px);
172
173 margin-top: 30px;
174 margin-bottom: 25px;
175
176 color: pvar(--mainForegroundColor);
177 display: inline-block;
178 font-weight: $font-semibold;
179 font-size: 1.25rem;
180
181 a {
182 @include disable-default-a-behaviour;
183
184 color: inherit;
185
186 &:hover {
187 color: inherit;
188 opacity: 0.8;
189 }
190 }
191
192 @media screen and (max-width: $mobile-view) {
193 @include margin-left(15px);
194 }
195}
196
197.admin-sub-header {
198 display: flex;
199 align-items: center;
200 margin-bottom: 30px;
201
202 @media screen and (max-width: $small-view) {
203 flex-direction: column;
204 }
205}
206
207// ---------------------------------------------------------------------------
208
209.no-results {
210 height: 40vh;
211 max-height: 500px;
212
213 display: flex;
214 flex-direction: column;
215 align-items: center;
216 justify-content: center;
217 font-weight: $font-semibold;
218}
219
220// ---------------------------------------------------------------------------
221
222.chevron-down {
223 @include chevron-down-default;
224}
225
226.chevron-up {
227 @include chevron-up-default;
228}
229
230.chevron-right {
231 @include chevron-right-default;
232}
233
234.chevron-left {
235 @include chevron-left-default;
236}
237
238// ---------------------------------------------------------------------------
239
240.callout {
241 padding: 1.25rem;
242 border: 1px solid #eee;
243 border-radius: .25rem;
244 position: relative;
245
246 > label {
247 position: relative;
248 top: -5px;
249 left: -10px;
250 color: #6c757d !important;
251 }
252
253 &:not(.callout-light) {
254 border-left-width: .25rem;
255 }
256
257 &.callout-orange {
258 border-color: pvar(--mainColorLightest);
259
260 &:not(.callout-light) {
261 border-left-color: pvar(--mainColor);
262 }
263 }
264}
265
266// ---------------------------------------------------------------------------
267
268.anchor {
269 position: relative;
270 top: #{-($header-height + 20px)};
271}
272
273.offset-content { // if sub-menu fixed
274 .anchor {
275 top: #{-($header-height + $sub-menu-height + 20px)};
276 }
277}
278
279// ---------------------------------------------------------------------------
280
281.alert {
282 &.pt-alert-primary {
283 background-color: pvar(--mainColorVeryLight);
284 border: 2px solid pvar(--mainColorLightest);
285 }
286}
287
288// ---------------------------------------------------------------------------
289
290.chip {
291 @include chip;
292}
diff --git a/client/src/sass/class-helpers/_buttons.scss b/client/src/sass/class-helpers/_buttons.scss
new file mode 100644
index 000000000..61fdbbf70
--- /dev/null
+++ b/client/src/sass/class-helpers/_buttons.scss
@@ -0,0 +1,37 @@
1@use '_mixins' as *;
2
3.peertube-button {
4 @include peertube-button;
5}
6
7.peertube-button-big {
8 @include peertube-button-big;
9}
10
11.peertube-button-link {
12 @include peertube-button-link;
13}
14
15.peertube-button-big-link {
16 @include peertube-button-big-link;
17}
18
19.orange-button {
20 @include orange-button;
21}
22
23.orange-button-inverted {
24 @include orange-button-inverted;
25}
26
27.grey-button {
28 @include grey-button;
29}
30
31.tertiary-button {
32 @include tertiary-button;
33}
34
35.peertube-radio-container {
36 @include peertube-radio-container;
37} \ No newline at end of file
diff --git a/client/src/sass/class-helpers/_common.scss b/client/src/sass/class-helpers/_common.scss
new file mode 100644
index 000000000..182c51c8f
--- /dev/null
+++ b/client/src/sass/class-helpers/_common.scss
@@ -0,0 +1,123 @@
1@use '_variables' as *;
2@use '_mixins' as *;
3@use '_badges' as *;
4@use '_icons' as *;
5
6.link-orange {
7 color: pvar(--mainForegroundColor);
8 font-weight: $font-semibold;
9 border-bottom: 0.18em solid pvar(--mainColor);
10 display: inline-block;
11 line-height: 1.1;
12
13 &:hover {
14 color: pvar(--mainForegroundColor);
15 opacity: 0.8;
16 }
17}
18
19.underline-orange {
20 display: inline-block;
21 border-bottom: 0.19em solid pvar(--mainColor);
22}
23
24// ---------------------------------------------------------------------------
25
26.muted {
27 @include muted;
28}
29
30// ---------------------------------------------------------------------------
31
32.pt-badge {
33 @include peertube-badge;
34}
35
36// ---------------------------------------------------------------------------
37
38.no-results {
39 height: 40vh;
40 max-height: 500px;
41
42 display: flex;
43 flex-direction: column;
44 align-items: center;
45 justify-content: center;
46 font-weight: $font-semibold;
47}
48
49// ---------------------------------------------------------------------------
50
51.chevron-down {
52 @include chevron-down-default;
53}
54
55.chevron-up {
56 @include chevron-up-default;
57}
58
59.chevron-right {
60 @include chevron-right-default;
61}
62
63.chevron-left {
64 @include chevron-left-default;
65}
66
67// ---------------------------------------------------------------------------
68
69.callout {
70 padding: 1.25rem;
71 border: 1px solid #eee;
72 border-radius: 0.25rem;
73 position: relative;
74
75 >label {
76 position: relative;
77 top: -5px;
78 left: -10px;
79 color: #6c757d !important;
80 }
81
82 &:not(.callout-light) {
83 border-left-width: 0.25rem;
84 }
85
86 &.callout-orange {
87 border-color: pvar(--mainColorLightest);
88
89 &:not(.callout-light) {
90 border-left-color: pvar(--mainColor);
91 }
92 }
93}
94
95// ---------------------------------------------------------------------------
96
97.anchor {
98 position: relative;
99 top: #{- ($header-height + 20px)};
100}
101
102.offset-content {
103
104 // if sub-menu fixed
105 .anchor {
106 top: #{- ($header-height + $sub-menu-height + 20px)};
107 }
108}
109
110// ---------------------------------------------------------------------------
111
112.alert {
113 &.pt-alert-primary {
114 background-color: pvar(--mainColorVeryLight);
115 border: 2px solid pvar(--mainColorLightest);
116 }
117}
118
119// ---------------------------------------------------------------------------
120
121.chip {
122 @include chip;
123} \ No newline at end of file
diff --git a/client/src/sass/class-helpers/_custom-bootstrap-helpers.scss b/client/src/sass/class-helpers/_custom-bootstrap-helpers.scss
new file mode 100644
index 000000000..78c4d30df
--- /dev/null
+++ b/client/src/sass/class-helpers/_custom-bootstrap-helpers.scss
@@ -0,0 +1,36 @@
1@use '_variables' as *;
2@use '_mixins' as *;
3
4// Font sizes
5
6.pt-fs-1 {
7 @include font-size(2.5rem);
8}
9
10.pt-fs-2 {
11 @include font-size(2rem);
12}
13
14.pt-fs-3 {
15 @include font-size(1.75rem);
16}
17
18.pt-fs-4 {
19 @include font-size(1.5rem);
20}
21
22.pt-fs-5 {
23 @include font-size(1.25rem);
24}
25
26.pt-fs-5-5 {
27 @include font-size(1.125rem);
28}
29
30.pt-fs-6 {
31 @include font-size(1rem);
32}
33
34.pt-fs-7 {
35 @include font-size(0.875rem);
36} \ No newline at end of file
diff --git a/client/src/sass/class-helpers/_forms.scss b/client/src/sass/class-helpers/_forms.scss
new file mode 100644
index 000000000..79495aeb4
--- /dev/null
+++ b/client/src/sass/class-helpers/_forms.scss
@@ -0,0 +1,55 @@
1@use '_variables' as *;
2@use '_mixins' as *;
3
4.form-group {
5 margin-bottom: 1rem;
6}
7
8.input-error:not(:focus) {
9
10 &,
11 +.nav-preview,
12 // Markdown textarea
13 +*+.tab-content {
14 border-color: $red !important;
15 }
16}
17
18.input-group .input-error {
19 z-index: 3;
20}
21
22.form-error,
23.form-warning {
24 display: block;
25 margin-top: 5px;
26 font-size: 0.9em;
27}
28
29.form-error {
30 color: $red;
31}
32
33// Disable red error on input focus
34.input-error:focus,
35.input-group:focus-within {
36
37 +.form-error,
38 +*+.form-error,
39 // Markdown textarea
40 +*+*+.form-error {
41 color: pvar(--mainForegroundColor);
42 }
43}
44
45.form-group-description {
46 @include muted;
47
48 font-size: 14px;
49 margin-top: 10px;
50}
51
52label+.form-group-description {
53 margin-bottom: 10px;
54 margin-top: 0;
55} \ No newline at end of file
diff --git a/client/src/sass/class-helpers/_menu.scss b/client/src/sass/class-helpers/_menu.scss
new file mode 100644
index 000000000..1d17f9f2e
--- /dev/null
+++ b/client/src/sass/class-helpers/_menu.scss
@@ -0,0 +1,80 @@
1@use '_variables' as *;
2@use '_mixins' as *;
3
4.sub-menu-entry {
5 @include disable-default-a-behaviour;
6 @include margin-right(55px);
7
8 opacity: 0.7;
9 color: pvar(--mainForegroundColor);
10 display: inline-block;
11 font-weight: $font-semibold;
12 border-bottom: 2px solid transparent;
13 white-space: nowrap;
14 font-size: 1rem;
15
16 &.active {
17 border-bottom-color: pvar(--mainColor);
18 }
19
20 &:hover,
21 &:active,
22 &:focus {
23 color: pvar(--mainForegroundColor);
24 }
25
26 &.active,
27 &:hover,
28 &:active,
29 &:focus {
30 opacity: 1;
31 outline: 0 hidden !important;
32 }
33
34 @media screen and (max-width: $mobile-view) {
35 @include margin-left(15px);
36 }
37}
38
39.title-page-v2 {
40 font-weight: normal;
41 font-size: 15px;
42 padding: 35px 25px;
43}
44
45.title-page {
46 @include margin-right(55px);
47
48 margin-top: 30px;
49 margin-bottom: 25px;
50
51 color: pvar(--mainForegroundColor);
52 display: inline-block;
53 font-weight: $font-semibold;
54 font-size: 1.25rem;
55
56 a {
57 @include disable-default-a-behaviour;
58
59 color: inherit;
60
61 &:hover {
62 color: inherit;
63 opacity: 0.8;
64 }
65 }
66
67 @media screen and (max-width: $mobile-view) {
68 @include margin-left(15px);
69 }
70}
71
72.admin-sub-header {
73 display: flex;
74 align-items: center;
75 margin-bottom: 30px;
76
77 @media screen and (max-width: $small-view) {
78 flex-direction: column;
79 }
80} \ No newline at end of file
diff --git a/client/src/sass/class-helpers/index.scss b/client/src/sass/class-helpers/index.scss
new file mode 100644
index 000000000..ad5fd7838
--- /dev/null
+++ b/client/src/sass/class-helpers/index.scss
@@ -0,0 +1,10 @@
1@use '_variables' as *;
2@use '_mixins' as *;
3@use '_badges' as *;
4@use '_icons' as *;
5@use '_fonts' as *;
6@use '_menu' as *;
7@use '_buttons' as *;
8@use '_forms' as *;
9@use '_common' as *;
10@use '_custom-bootstrap-helpers' as *; \ No newline at end of file
diff --git a/client/src/sass/include/_bootstrap-mixins.scss b/client/src/sass/include/_bootstrap-mixins.scss
new file mode 100644
index 000000000..2be16ebad
--- /dev/null
+++ b/client/src/sass/include/_bootstrap-mixins.scss
@@ -0,0 +1,5 @@
1@import 'bootstrap/scss/functions';
2@import 'bootstrap/scss/variables';
3@import 'bootstrap/scss/maps';
4@import 'bootstrap/scss/mixins';
5@import 'bootstrap/scss/utilities'; \ No newline at end of file
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 34af9e8c1..bd467a0ed 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -1,6 +1,9 @@
1@use 'sass:math'; 1@use 'sass:math';
2@use '_variables' as *; 2@use '_variables' as *;
3 3
4@import '_bootstrap-mixins';
5
6
4@mixin disable-default-a-behaviour { 7@mixin disable-default-a-behaviour {
5 &:hover, 8 &:hover,
6 &:focus, 9 &:focus,
@@ -919,55 +922,53 @@
919@mixin margin ($block-start, $inline-end, $block-end, $inline-start) { 922@mixin margin ($block-start, $inline-end, $block-end, $inline-start) {
920 @include margin-left($inline-start); 923 @include margin-left($inline-start);
921 @include margin-right($inline-end); 924 @include margin-right($inline-end);
922 925 @include margin-top($block-start);
923 margin-top: $block-start; 926 @include margin-bottom($block-end);
924 margin-bottom: $block-end;
925} 927}
926 928
927@mixin padding ($block-start, $inline-end, $block-end, $inline-start) { 929@mixin padding ($block-start, $inline-end, $block-end, $inline-start) {
928 @include padding-left($inline-start); 930 @include padding-left($inline-start);
929 @include padding-right($inline-end); 931 @include padding-right($inline-end);
930 932 @include padding-top($block-start);
931 padding-top: $block-start; 933 @include padding-bottom($block-end);
932 padding-bottom: $block-end;
933} 934}
934 935
935@mixin margin-left ($value) { 936@mixin margin-left ($value) {
936 @supports (margin-inline-start: $value) { 937 @supports (margin-inline-start: $value) {
937 margin-inline-start: $value; 938 @include rfs($value, margin-inline-start);
938 } 939 }
939 940
940 @supports not (margin-inline-start: $value) { 941 @supports not (margin-inline-start: $value) {
941 margin-left: $value; 942 @include rfs($value, margin-left);
942 } 943 }
943} 944}
944 945
945@mixin margin-right ($value) { 946@mixin margin-right ($value) {
946 @supports (margin-inline-end: $value) { 947 @supports (margin-inline-end: $value) {
947 margin-inline-end: $value; 948 @include rfs($value, margin-inline-end);
948 } 949 }
949 950
950 @supports not (margin-inline-end: $value) { 951 @supports not (margin-inline-end: $value) {
951 margin-right: $value; 952 @include rfs($value, margin-right);
952 } 953 }
953} 954}
954 955
955@mixin padding-left ($value) { 956@mixin padding-left ($value) {
956 @supports (padding-inline-start: $value) { 957 @supports (padding-inline-start: $value) {
957 padding-inline-start: $value; 958 @include rfs($value, padding-inline-start);
958 } 959 }
959 960
960 @supports not (padding-inline-start: $value) { 961 @supports not (padding-inline-start: $value) {
961 padding-left: $value; 962 @include rfs($value, padding-left);
962 } 963 }
963} 964}
964 965
965@mixin padding-right ($value) { 966@mixin padding-right ($value) {
966 @supports (padding-inline-end: $value) { 967 @supports (padding-inline-end: $value) {
967 padding-inline-end: $value; 968 @include rfs($value, padding-inline-end);
968 } 969 }
969 970
970 @supports not (padding-inline-end: $value) { 971 @supports not (padding-inline-end: $value) {
971 padding-right: $value; 972 @include rfs($value, padding-right);
972 } 973 }
973} 974}