diff options
Diffstat (limited to 'client/src/sass/class-helpers.scss')
-rw-r--r-- | client/src/sass/class-helpers.scss | 292 |
1 files changed, 0 insertions, 292 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 | |||
121 | label + .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 | } | ||