diff options
Diffstat (limited to 'client/src/sass/bootstrap.scss')
-rw-r--r-- | client/src/sass/bootstrap.scss | 211 |
1 files changed, 61 insertions, 150 deletions
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss index bc37134dd..49585a124 100644 --- a/client/src/sass/bootstrap.scss +++ b/client/src/sass/bootstrap.scss | |||
@@ -1,5 +1,3 @@ | |||
1 | $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; | ||
2 | |||
3 | @use '_variables' as *; | 1 | @use '_variables' as *; |
4 | @use '_mixins' as *; | 2 | @use '_mixins' as *; |
5 | 3 | ||
@@ -7,67 +5,43 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; | |||
7 | 5 | ||
8 | @import '~bootstrap/scss/functions'; | 6 | @import '~bootstrap/scss/functions'; |
9 | @import '~bootstrap/scss/variables'; | 7 | @import '~bootstrap/scss/variables'; |
10 | |||
11 | @import '~bootstrap/scss/mixins'; | 8 | @import '~bootstrap/scss/mixins'; |
9 | @import '~bootstrap/scss/utilities'; | ||
10 | |||
12 | @import '~bootstrap/scss/root'; | 11 | @import '~bootstrap/scss/root'; |
13 | @import '~bootstrap/scss/reboot'; | 12 | @import '~bootstrap/scss/reboot'; |
14 | @import '~bootstrap/scss/type'; | 13 | @import '~bootstrap/scss/type'; |
15 | @import '~bootstrap/scss/grid'; | 14 | @import '~bootstrap/scss/grid'; |
16 | @import '~bootstrap/scss/tables'; | ||
17 | @import '~bootstrap/scss/forms'; | 15 | @import '~bootstrap/scss/forms'; |
18 | @import '~bootstrap/scss/buttons'; | 16 | @import '~bootstrap/scss/buttons'; |
19 | @import '~bootstrap/scss/dropdown'; | 17 | @import '~bootstrap/scss/dropdown'; |
20 | @import '~bootstrap/scss/button-group'; | 18 | @import '~bootstrap/scss/button-group'; |
21 | @import '~bootstrap/scss/input-group'; | ||
22 | @import '~bootstrap/scss/nav'; | 19 | @import '~bootstrap/scss/nav'; |
23 | @import '~bootstrap/scss/card'; | 20 | @import '~bootstrap/scss/card'; |
24 | @import '~bootstrap/scss/badge'; | 21 | @import '~bootstrap/scss/accordion'; |
25 | @import '~bootstrap/scss/alert'; | 22 | @import '~bootstrap/scss/alert'; |
26 | @import '~bootstrap/scss/close'; | 23 | @import '~bootstrap/scss/close'; |
27 | @import '~bootstrap/scss/modal'; | 24 | @import '~bootstrap/scss/modal'; |
28 | @import '~bootstrap/scss/tooltip'; | 25 | @import '~bootstrap/scss/tooltip'; |
29 | @import '~bootstrap/scss/popover'; | 26 | @import '~bootstrap/scss/popover'; |
30 | @import '~bootstrap/scss/utilities'; | 27 | @import '~bootstrap/scss/spinners'; |
31 | 28 | ||
32 | @import '~@neos21/bootstrap3-glyphicons/assets/stylesheets/bootstrap3-glyphicons'; | 29 | @import '~bootstrap/scss/helpers'; |
33 | 30 | @import '~bootstrap/scss/utilities/api'; | |
34 | // Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d | ||
35 | .glyphicon-refresh-animate { | ||
36 | animation: spin 0.7s infinite linear; | ||
37 | } | ||
38 | |||
39 | .glyphicon-duplicate { | ||
40 | font-size: 70%; | ||
41 | } | ||
42 | 31 | ||
43 | .flex-auto { | 32 | .flex-auto { |
44 | flex: auto; | 33 | flex: auto; |
45 | } | 34 | } |
46 | 35 | ||
47 | .c-hand { | 36 | .c-hand { |
48 | cursor: pointer; | 37 | cursor: pointer !important; |
49 | } | ||
50 | |||
51 | @keyframes spin { | ||
52 | from { | ||
53 | transform: scale(1) rotate(0deg); | ||
54 | } | ||
55 | |||
56 | to { | ||
57 | transform: scale(1) rotate(360deg); | ||
58 | } | ||
59 | } | 38 | } |
60 | 39 | ||
61 | .btn-group > .btn:not(:first-child) { | 40 | // --------------------------------------------------------------------------- |
62 | border-top-left-radius: 0 !important; | 41 | // Dropdown |
63 | border-bottom-left-radius: 0 !important; | 42 | // --------------------------------------------------------------------------- |
64 | } | ||
65 | 43 | ||
66 | .dropdown-menu { | 44 | .dropdown-menu { |
67 | border-radius: 3px; | ||
68 | box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2); | ||
69 | font-size: 15px; | ||
70 | |||
71 | color: pvar(--mainForegroundColor); | 45 | color: pvar(--mainForegroundColor); |
72 | background-color: pvar(--mainBackgroundColor); | 46 | background-color: pvar(--mainBackgroundColor); |
73 | 47 | ||
@@ -78,39 +52,40 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; | |||
78 | .dropdown-item { | 52 | .dropdown-item { |
79 | padding: 3px 15px; | 53 | padding: 3px 15px; |
80 | 54 | ||
81 | color: pvar(--mainForegroundColor); | ||
82 | background-color: pvar(--mainBackgroundColor); | ||
83 | |||
84 | &.active { | 55 | &.active { |
85 | color: pvar(--mainBackgroundColor) !important; | 56 | color: pvar(--mainBackgroundColor) !important; |
86 | background-color: pvar(--mainHoverColor); | 57 | background-color: pvar(--mainHoverColor); |
87 | opacity: 0.9; | 58 | opacity: 0.9; |
88 | } | 59 | } |
89 | 60 | ||
90 | a:active, | ||
91 | &:hover { | ||
92 | color: pvar(--mainForegroundColor) !important; | ||
93 | background-color: pvar(--mainBackgroundHoverColor); | ||
94 | } | ||
95 | |||
96 | &::after { | 61 | &::after { |
97 | display: none; | 62 | display: none; |
98 | } | 63 | } |
99 | } | 64 | } |
100 | 65 | ||
101 | button { | ||
102 | @include disable-default-a-behaviour; | ||
103 | } | ||
104 | |||
105 | a { | 66 | a { |
106 | @include disable-default-a-behaviour; | 67 | @include disable-default-a-behaviour; |
107 | } | 68 | } |
108 | } | 69 | } |
109 | 70 | ||
110 | .badge { | 71 | .dropdown-divider { |
111 | line-height: 1.1; | 72 | margin: 0.3rem 0; |
112 | } | 73 | } |
113 | 74 | ||
75 | // --------------------------------------------------------------------------- | ||
76 | // Alert | ||
77 | // --------------------------------------------------------------------------- | ||
78 | |||
79 | .alert { | ||
80 | p:last-child { | ||
81 | margin-bottom: 0; | ||
82 | } | ||
83 | } | ||
84 | |||
85 | // --------------------------------------------------------------------------- | ||
86 | // Modal | ||
87 | // --------------------------------------------------------------------------- | ||
88 | |||
114 | @media screen and (min-width: #{breakpoint(md)}) { | 89 | @media screen and (min-width: #{breakpoint(md)}) { |
115 | .modal::before { | 90 | .modal::before { |
116 | vertical-align: middle; | 91 | vertical-align: middle; |
@@ -149,18 +124,10 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; | |||
149 | my-global-icon { | 124 | my-global-icon { |
150 | @include icon(22px); | 125 | @include icon(22px); |
151 | 126 | ||
152 | position: relative; | ||
153 | top: 5px; | ||
154 | float: right; | ||
155 | |||
156 | margin: 0; | ||
157 | padding: 0; | ||
158 | opacity: 0.5; | 127 | opacity: 0.5; |
159 | 128 | ||
160 | &[iconName=cross] { /* stylelint-disable-line selector-max-compound-selectors */ | 129 | &:hover { |
161 | @include icon(16px); | 130 | opacity: 0.8; |
162 | |||
163 | top: -3px; | ||
164 | } | 131 | } |
165 | } | 132 | } |
166 | } | 133 | } |
@@ -199,14 +166,15 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; | |||
199 | opacity: 0.75; | 166 | opacity: 0.75; |
200 | content: ''; | 167 | content: ''; |
201 | display: block; | 168 | display: block; |
202 | position: fixed; | ||
203 | z-index: z(overlay); | ||
204 | } | 169 | } |
205 | } | 170 | } |
206 | } | 171 | } |
207 | } | 172 | } |
208 | 173 | ||
209 | // Nav customizations | 174 | // --------------------------------------------------------------------------- |
175 | // Nav | ||
176 | // --------------------------------------------------------------------------- | ||
177 | |||
210 | .nav .nav-link { | 178 | .nav .nav-link { |
211 | display: flex !important; | 179 | display: flex !important; |
212 | align-items: center; | 180 | align-items: center; |
@@ -219,7 +187,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; | |||
219 | font-weight: $font-semibold !important; | 187 | font-weight: $font-semibold !important; |
220 | 188 | ||
221 | .nav-link { | 189 | .nav-link { |
222 | opacity: 0.6 !important; | 190 | opacity: 0.7 !important; |
223 | 191 | ||
224 | &.active, | 192 | &.active, |
225 | &:hover, | 193 | &:hover, |
@@ -243,7 +211,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; | |||
243 | font-weight: $font-semibold; | 211 | font-weight: $font-semibold; |
244 | border: 0; | 212 | border: 0; |
245 | border-bottom: 2px solid transparent; | 213 | border-bottom: 2px solid transparent; |
246 | opacity: 0.6; | 214 | opacity: 0.7; |
247 | 215 | ||
248 | &.active { | 216 | &.active { |
249 | color: pvar(--mainForegroundColor); | 217 | color: pvar(--mainForegroundColor); |
@@ -259,6 +227,10 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; | |||
259 | } | 227 | } |
260 | } | 228 | } |
261 | 229 | ||
230 | // --------------------------------------------------------------------------- | ||
231 | // Card, collapse and accordion | ||
232 | // --------------------------------------------------------------------------- | ||
233 | |||
262 | .card { | 234 | .card { |
263 | background-color: pvar(--mainBackgroundColor); | 235 | background-color: pvar(--mainBackgroundColor); |
264 | border-color: #dee2e6; | 236 | border-color: #dee2e6; |
@@ -277,8 +249,13 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; | |||
277 | } | 249 | } |
278 | } | 250 | } |
279 | 251 | ||
280 | .dropdown-divider { | 252 | // --------------------------------------------------------------------------- |
281 | margin: 0.3rem 0; | 253 | // Buttons & form controls |
254 | // --------------------------------------------------------------------------- | ||
255 | |||
256 | .btn:not(.btn-sm) { | ||
257 | font-size: $button-font-size; | ||
258 | line-height: 1.2; | ||
282 | } | 259 | } |
283 | 260 | ||
284 | .btn-outline-secondary { | 261 | .btn-outline-secondary { |
@@ -292,18 +269,6 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; | |||
292 | } | 269 | } |
293 | } | 270 | } |
294 | 271 | ||
295 | .btn-outline-tertiary { | ||
296 | color: pvar(--secondaryColor); | ||
297 | border-color: pvar(--secondaryColor); | ||
298 | |||
299 | &:focus-within, | ||
300 | &:focus, | ||
301 | &:hover { | ||
302 | color: pvar(--mainBackgroundColor); | ||
303 | background-color: pvar(--secondaryColor); | ||
304 | } | ||
305 | } | ||
306 | |||
307 | .btn-group.select-button { | 272 | .btn-group.select-button { |
308 | font-weight: $font-semibold; | 273 | font-weight: $font-semibold; |
309 | 274 | ||
@@ -332,60 +297,47 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; | |||
332 | } | 297 | } |
333 | } | 298 | } |
334 | 299 | ||
335 | // input box-shadow on focus | ||
336 | .form-control { | 300 | .form-control { |
337 | font-size: 15px; | ||
338 | color: pvar(--mainForegroundColor); | 301 | color: pvar(--mainForegroundColor); |
339 | background-color: pvar(--inputBackgroundColor); | 302 | background-color: pvar(--inputBackgroundColor); |
340 | outline: none; | 303 | outline: none; |
341 | |||
342 | &:focus-within, | ||
343 | &:focus { | ||
344 | box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest); | ||
345 | |||
346 | &.input-error { | ||
347 | box-shadow: #{$focus-box-shadow-form} #{scale-color($red, $alpha: -75%)}; | ||
348 | } | ||
349 | } | ||
350 | } | 304 | } |
351 | 305 | ||
352 | .input-group { | 306 | .input-group { |
353 | > .form-control { | 307 | > .btn, |
354 | flex: initial; | 308 | > .input-group-text { |
309 | height: $button-height; | ||
310 | } | ||
311 | |||
312 | > .input-group-text { | ||
313 | line-height: normal; | ||
314 | opacity: 0.9; | ||
355 | } | 315 | } |
356 | 316 | ||
357 | input.form-control { | 317 | .input-group-text > .dropdown-toggle { |
358 | width: unset !important; | 318 | display: flex; |
359 | flex-grow: 1; | ||
360 | } | 319 | } |
361 | 320 | ||
362 | .input-group-prepend + input { | 321 | .last-in-group { |
363 | border-top-left-radius: 0 !important; | 322 | border-top-right-radius: 3px !important; |
364 | border-bottom-left-radius: 0 !important; | 323 | border-bottom-right-radius: 3px !important; |
365 | } | 324 | } |
366 | } | 325 | } |
367 | 326 | ||
368 | .has-feedback.has-clear { | 327 | .has-clear { |
369 | position: relative; | ||
370 | |||
371 | input { | 328 | input { |
372 | @include padding-right(1.5rem !important); | 329 | @include padding-right(1.5rem !important); |
373 | } | 330 | } |
374 | 331 | ||
375 | .form-control-clear { | 332 | .form-control-clear { |
376 | color: rgba(0, 0, 0, 0.4); | 333 | color: rgba(0, 0, 0, 0.4); |
377 | /* | ||
378 | * Enable pointer events as they have been disabled since Bootstrap 3.3 | ||
379 | * See https://github.com/twbs/bootstrap/pull/14104 | ||
380 | */ | ||
381 | pointer-events: all; | ||
382 | display: flex; | 334 | display: flex; |
383 | justify-content: center; | 335 | justify-content: center; |
384 | align-items: center; | 336 | align-items: center; |
385 | position: absolute; | ||
386 | right: .5rem; | ||
387 | height: 95%; | 337 | height: 95%; |
388 | font-size: 14px; | 338 | font-size: 14px; |
339 | position: absolute; | ||
340 | right: .5rem; | ||
389 | 341 | ||
390 | &:hover { | 342 | &:hover { |
391 | color: rgba(0, 0, 0, 0.7); | 343 | color: rgba(0, 0, 0, 0.7); |
@@ -397,44 +349,3 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; | |||
397 | display: none; | 349 | display: none; |
398 | } | 350 | } |
399 | } | 351 | } |
400 | |||
401 | .callout { | ||
402 | padding: 1.25rem; | ||
403 | border: 1px solid #eee; | ||
404 | border-radius: .25rem; | ||
405 | |||
406 | > label { | ||
407 | position: relative; | ||
408 | top: -5px; | ||
409 | left: -10px; | ||
410 | color: #6c757d !important; | ||
411 | } | ||
412 | |||
413 | &:not(.callout-light) { | ||
414 | border-left-width: .25rem; | ||
415 | } | ||
416 | |||
417 | &.callout-info { | ||
418 | border-color: pvar(--mainColorLightest); | ||
419 | border-left-color: pvar(--mainColor); | ||
420 | } | ||
421 | } | ||
422 | |||
423 | // Override these properties for Bidi support | ||
424 | @each $size, $length in $spacers { | ||
425 | .ml-#{$size} { | ||
426 | @include margin-left($length); | ||
427 | } | ||
428 | |||
429 | .mr-#{$size} { | ||
430 | @include margin-right($length); | ||
431 | } | ||
432 | |||
433 | .pl-#{$size} { | ||
434 | @include padding-left($length); | ||
435 | } | ||
436 | |||
437 | .pr-#{$size} { | ||
438 | @include padding-right($length); | ||
439 | } | ||
440 | } | ||