refactor: convert to sass & minify output css
This commit is contained in:
Gregor Kleen
parent
a4cd1f586a
commit
b66809a352
9
frontend/src/_common.sass
Normal file
9
frontend/src/_common.sass
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
@use "~@fortawesome/fontawesome-pro/scss/fontawesome" with ( $fa-font-path: "~@fortawesome/fontawesome-pro/webfonts" )
|
||||||
|
|
||||||
|
@forward "~@fortawesome/fontawesome-pro/scss/fontawesome"
|
||||||
|
|
||||||
|
@use "~@fortawesome/fontawesome-pro/scss/solid"
|
||||||
|
|
||||||
|
@use "~typeface-roboto" as roboto
|
||||||
|
|
||||||
|
@use "~typeface-source-sans-pro" as source-sans-pro
|
||||||
@ -1,8 +0,0 @@
|
|||||||
@use "~@fortawesome/fontawesome-pro/scss/fontawesome" with (
|
|
||||||
$fa-font-path: "~@fortawesome/fontawesome-pro/webfonts"
|
|
||||||
);
|
|
||||||
@forward "~@fortawesome/fontawesome-pro/scss/fontawesome";
|
|
||||||
@use "~@fortawesome/fontawesome-pro/scss/solid";
|
|
||||||
|
|
||||||
@use "~typeface-roboto" as roboto;
|
|
||||||
@use "~typeface-source-sans-pro" as source-sans-pro;
|
|
||||||
@ -4,7 +4,7 @@ import { I18n } from './services/i18n/i18n';
|
|||||||
import { UtilRegistry } from './services/util-registry/util-registry';
|
import { UtilRegistry } from './services/util-registry/util-registry';
|
||||||
import { isValidUtility } from './core/utility';
|
import { isValidUtility } from './core/utility';
|
||||||
|
|
||||||
import './app.scss';
|
import './app.sass';
|
||||||
|
|
||||||
export class App {
|
export class App {
|
||||||
httpClient = new HttpClient();
|
httpClient = new HttpClient();
|
||||||
|
|||||||
1191
frontend/src/app.sass
Normal file
1191
frontend/src/app.sass
Normal file
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -1,5 +1,5 @@
|
|||||||
import { Utility } from '../../core/utility';
|
import { Utility } from '../../core/utility';
|
||||||
import './alerts.scss';
|
import './alerts.sass';
|
||||||
|
|
||||||
const ALERTS_INITIALIZED_CLASS = 'alerts--initialized';
|
const ALERTS_INITIALIZED_CLASS = 'alerts--initialized';
|
||||||
const ALERTS_ELEVATED_CLASS = 'alerts--elevated';
|
const ALERTS_ELEVATED_CLASS = 'alerts--elevated';
|
||||||
|
|||||||
186
frontend/src/utils/alerts/alerts.sass
Normal file
186
frontend/src/utils/alerts/alerts.sass
Normal file
@ -0,0 +1,186 @@
|
|||||||
|
@use "../../common" as *
|
||||||
|
|
||||||
|
.alerts
|
||||||
|
position: fixed
|
||||||
|
bottom: 0
|
||||||
|
right: 5%
|
||||||
|
z-index: 20
|
||||||
|
text-align: right
|
||||||
|
display: flex
|
||||||
|
flex-direction: column
|
||||||
|
|
||||||
|
.alerts__toggler
|
||||||
|
width: 40px
|
||||||
|
height: 40px
|
||||||
|
position: absolute
|
||||||
|
top: 400px
|
||||||
|
left: 50%
|
||||||
|
transform: translateX(-50%)
|
||||||
|
cursor: pointer
|
||||||
|
|
||||||
|
&::before
|
||||||
|
@extend .fas
|
||||||
|
|
||||||
|
content: fa-content($fa-var-chevron-up)
|
||||||
|
position: absolute
|
||||||
|
left: 50%
|
||||||
|
top: 0
|
||||||
|
height: 30px
|
||||||
|
display: flex
|
||||||
|
align-items: center
|
||||||
|
justify-content: center
|
||||||
|
width: 30px
|
||||||
|
color: var(--color-grey)
|
||||||
|
font-size: 30px
|
||||||
|
transform: translateX(-50%)
|
||||||
|
|
||||||
|
&:hover::before
|
||||||
|
color: var(--color-grey-medium)
|
||||||
|
|
||||||
|
.alerts--elevated
|
||||||
|
z-index: 1000
|
||||||
|
|
||||||
|
.alerts__toggler--visible
|
||||||
|
top: -40px
|
||||||
|
opacity: 1
|
||||||
|
transition: top 0.5s cubic-bezier(0.73, 1.25, 0.61, 1), opacity 0.5s cubic-bezier(0.73, 1.25, 0.61, 1)
|
||||||
|
|
||||||
|
@media (max-width: 425px)
|
||||||
|
.alerts
|
||||||
|
left: 5%
|
||||||
|
|
||||||
|
.alert
|
||||||
|
position: relative
|
||||||
|
display: block
|
||||||
|
background-color: var(--color-lightblack)
|
||||||
|
font-size: 1rem
|
||||||
|
color: var(--color-lightwhite)
|
||||||
|
z-index: 0
|
||||||
|
padding: 0 50px
|
||||||
|
padding-right: 60px
|
||||||
|
animation: slide-in-alert .2s ease-out forwards
|
||||||
|
margin-bottom: 10px
|
||||||
|
transition: margin-bottom .2s ease-out
|
||||||
|
|
||||||
|
.alert a
|
||||||
|
color: var(--color-lightwhite)
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
color: var(--color-grey)
|
||||||
|
|
||||||
|
@keyframes slide-in-alert
|
||||||
|
from
|
||||||
|
transform: translateY(120%)
|
||||||
|
|
||||||
|
to
|
||||||
|
transform: translateY(0)
|
||||||
|
|
||||||
|
@keyframes slide-out-alert
|
||||||
|
from
|
||||||
|
transform: translateY(0)
|
||||||
|
max-height: 200px
|
||||||
|
|
||||||
|
to
|
||||||
|
transform: translateY(250%)
|
||||||
|
opacity: 0
|
||||||
|
max-height: 0
|
||||||
|
overflow: hidden
|
||||||
|
|
||||||
|
@media (min-width: 425px)
|
||||||
|
.alert
|
||||||
|
max-width: 400px
|
||||||
|
|
||||||
|
.alert--invisible
|
||||||
|
animation: slide-out-alert .2s ease-out forwards
|
||||||
|
margin-bottom: 0
|
||||||
|
|
||||||
|
.alert__content
|
||||||
|
padding: 8px 0
|
||||||
|
min-height: 40px
|
||||||
|
position: relative
|
||||||
|
display: flex
|
||||||
|
font-weight: 600
|
||||||
|
align-items: center
|
||||||
|
text-align: left
|
||||||
|
|
||||||
|
.alert__icon
|
||||||
|
text-align: right
|
||||||
|
position: absolute
|
||||||
|
left: 0px
|
||||||
|
top: 0
|
||||||
|
width: 50px
|
||||||
|
height: 100%
|
||||||
|
z-index: 40
|
||||||
|
|
||||||
|
&::before
|
||||||
|
position: absolute
|
||||||
|
font-size: 24px
|
||||||
|
top: 50%
|
||||||
|
left: 50%
|
||||||
|
display: flex
|
||||||
|
align-items: center
|
||||||
|
justify-content: center
|
||||||
|
transform: translate(-50%, -50%)
|
||||||
|
border-radius: 50%
|
||||||
|
width: 30px
|
||||||
|
height: 30px
|
||||||
|
|
||||||
|
.alert__closer
|
||||||
|
cursor: pointer
|
||||||
|
text-align: right
|
||||||
|
position: absolute
|
||||||
|
right: 0px
|
||||||
|
top: 0
|
||||||
|
width: 60px
|
||||||
|
height: 100%
|
||||||
|
transition: all .3s ease
|
||||||
|
z-index: 40
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
transform: scale(1.05, 1.05)
|
||||||
|
|
||||||
|
&::before
|
||||||
|
box-shadow: 0 0 4px white
|
||||||
|
background-color: rgba(255, 255, 255, 0.1)
|
||||||
|
color: white
|
||||||
|
|
||||||
|
&::before
|
||||||
|
@extend .fas
|
||||||
|
|
||||||
|
content: fa-content($fa-var-times)
|
||||||
|
position: absolute
|
||||||
|
top: 50%
|
||||||
|
left: 50%
|
||||||
|
display: flex
|
||||||
|
align-items: center
|
||||||
|
justify-content: center
|
||||||
|
transform: translate(-50%, -50%)
|
||||||
|
border-radius: 50%
|
||||||
|
width: 30px
|
||||||
|
height: 30px
|
||||||
|
transition: all .15s ease
|
||||||
|
|
||||||
|
@media (max-width: 768px)
|
||||||
|
.alert__closer
|
||||||
|
width: 40px
|
||||||
|
|
||||||
|
.alert-success
|
||||||
|
background-color: var(--color-success)
|
||||||
|
|
||||||
|
// .alert__icon::before {
|
||||||
|
// --alert-icon-default: '\f058';
|
||||||
|
// }
|
||||||
|
|
||||||
|
.alert-warning
|
||||||
|
background-color: var(--color-warning)
|
||||||
|
|
||||||
|
// .alert__icon::before {
|
||||||
|
// --alert-icon-default: '\f06a';
|
||||||
|
// }
|
||||||
|
|
||||||
|
.alert-error
|
||||||
|
background-color: var(--color-error)
|
||||||
|
|
||||||
|
// .alert__icon::before {
|
||||||
|
// --alert-icon-default: '\f071';
|
||||||
|
// }
|
||||||
@ -1,221 +0,0 @@
|
|||||||
@use "../../common" as *;
|
|
||||||
|
|
||||||
.alerts {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 0;
|
|
||||||
right: 5%;
|
|
||||||
z-index: 20;
|
|
||||||
text-align: right;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.alerts__toggler {
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
position: absolute;
|
|
||||||
top: 400px;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
@extend .fas;
|
|
||||||
content: fa-content($fa-var-chevron-up);
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
top: 0;
|
|
||||||
height: 30px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 30px;
|
|
||||||
color: var(--color-grey);
|
|
||||||
font-size: 30px;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover::before {
|
|
||||||
color: var(--color-grey-medium);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.alerts--elevated {
|
|
||||||
z-index: 1000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.alerts__toggler--visible {
|
|
||||||
top: -40px;
|
|
||||||
opacity: 1;
|
|
||||||
transition: top .5s cubic-bezier(0.73, 1.25, 0.61, 1),
|
|
||||||
opacity .5s cubic-bezier(0.73, 1.25, 0.61, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 425px) {
|
|
||||||
|
|
||||||
.alerts {
|
|
||||||
left: 5%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.alert {
|
|
||||||
position: relative;
|
|
||||||
display: block;
|
|
||||||
background-color: var(--color-lightblack);
|
|
||||||
font-size: 1rem;
|
|
||||||
color: var(--color-lightwhite);
|
|
||||||
z-index: 0;
|
|
||||||
padding: 0 50px;
|
|
||||||
padding-right: 60px;
|
|
||||||
animation: slide-in-alert .2s ease-out forwards;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
transition: margin-bottom .2s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.alert a {
|
|
||||||
color: var(--color-lightwhite);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: var(--color-grey);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes slide-in-alert {
|
|
||||||
from {
|
|
||||||
transform: translateY(120%);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes slide-out-alert {
|
|
||||||
from {
|
|
||||||
transform: translateY(0);
|
|
||||||
max-height: 200px;
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
transform: translateY(250%);
|
|
||||||
opacity: 0;
|
|
||||||
max-height: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 425px) {
|
|
||||||
|
|
||||||
.alert {
|
|
||||||
max-width: 400px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.alert--invisible {
|
|
||||||
animation: slide-out-alert .2s ease-out forwards;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.alert__content {
|
|
||||||
padding: 8px 0;
|
|
||||||
min-height: 40px;
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
font-weight: 600;
|
|
||||||
align-items: center;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.alert__icon {
|
|
||||||
text-align: right;
|
|
||||||
position: absolute;
|
|
||||||
left: 0px;
|
|
||||||
top: 0;
|
|
||||||
width: 50px;
|
|
||||||
height: 100%;
|
|
||||||
z-index: 40;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
position: absolute;
|
|
||||||
font-size: 24px;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
border-radius: 50%;
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.alert__closer {
|
|
||||||
cursor: pointer;
|
|
||||||
text-align: right;
|
|
||||||
position: absolute;
|
|
||||||
right: 0px;
|
|
||||||
top: 0;
|
|
||||||
width: 60px;
|
|
||||||
height: 100%;
|
|
||||||
transition: all .3s ease;
|
|
||||||
z-index: 40;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
transform: scale(1.05, 1.05);
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
box-shadow: 0 0 4px white;
|
|
||||||
background-color: rgba(255, 255, 255, 0.1);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
@extend .fas;
|
|
||||||
content: fa-content($fa-var-times);
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
border-radius: 50%;
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
transition: all .15s ease;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
|
|
||||||
.alert__closer {
|
|
||||||
width: 40px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.alert-success {
|
|
||||||
background-color: var(--color-success);
|
|
||||||
|
|
||||||
/* .alert__icon::before {
|
|
||||||
* --alert-icon-default: '\f058';
|
|
||||||
* }
|
|
||||||
*/
|
|
||||||
}
|
|
||||||
|
|
||||||
.alert-warning {
|
|
||||||
background-color: var(--color-warning);
|
|
||||||
|
|
||||||
/* .alert__icon::before {
|
|
||||||
* --alert-icon-default: '\f06a';
|
|
||||||
* }
|
|
||||||
*/
|
|
||||||
}
|
|
||||||
|
|
||||||
.alert-error {
|
|
||||||
background-color: var(--color-error);
|
|
||||||
|
|
||||||
/* .alert__icon::before {
|
|
||||||
* --alert-icon-default: '\f071';
|
|
||||||
* }
|
|
||||||
*/
|
|
||||||
}
|
|
||||||
@ -1,5 +1,5 @@
|
|||||||
import { Utility } from '../../core/utility';
|
import { Utility } from '../../core/utility';
|
||||||
import './asidenav.scss';
|
import './asidenav.sass';
|
||||||
|
|
||||||
const FAVORITES_BTN_CLASS = 'navbar__list-item--favorite';
|
const FAVORITES_BTN_CLASS = 'navbar__list-item--favorite';
|
||||||
const FAVORITES_BTN_ACTIVE_CLASS = 'navbar__list-item--active';
|
const FAVORITES_BTN_ACTIVE_CLASS = 'navbar__list-item--active';
|
||||||
|
|||||||
330
frontend/src/utils/asidenav/asidenav.sass
Normal file
330
frontend/src/utils/asidenav/asidenav.sass
Normal file
@ -0,0 +1,330 @@
|
|||||||
|
.main__aside
|
||||||
|
position: fixed
|
||||||
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3)
|
||||||
|
z-index: 1
|
||||||
|
top: 0
|
||||||
|
left: 0
|
||||||
|
width: var(--asidenav-width-lg, 20%)
|
||||||
|
height: 100%
|
||||||
|
flex: 0 0 0
|
||||||
|
flex-basis: var(--asidenav-width-lg, 20%)
|
||||||
|
transition: all .2s ease-out
|
||||||
|
|
||||||
|
&::before
|
||||||
|
position: absolute
|
||||||
|
z-index: -1
|
||||||
|
left: 0
|
||||||
|
top: 0
|
||||||
|
width: 100%
|
||||||
|
height: 100%
|
||||||
|
background-color: var(--color-dark)
|
||||||
|
opacity: 0.05
|
||||||
|
|
||||||
|
&::after
|
||||||
|
content: ''
|
||||||
|
position: absolute
|
||||||
|
z-index: -2
|
||||||
|
left: 0
|
||||||
|
top: 0
|
||||||
|
width: 100%
|
||||||
|
height: 100%
|
||||||
|
background-color: var(--color-grey-light)
|
||||||
|
|
||||||
|
@media (max-width: 425px)
|
||||||
|
.main__aside
|
||||||
|
position: fixed
|
||||||
|
top: var(--header-height-collapsed)
|
||||||
|
left: 0
|
||||||
|
right: 0
|
||||||
|
bottom: 0
|
||||||
|
height: 100% !important
|
||||||
|
width: 100%
|
||||||
|
z-index: 5
|
||||||
|
overflow: hidden
|
||||||
|
transform: translateX(-110%)
|
||||||
|
transition: transform .2s ease-out
|
||||||
|
|
||||||
|
&.main__aside--expanded
|
||||||
|
transform: translateX(0%)
|
||||||
|
|
||||||
|
.asidenav__box-subtitle
|
||||||
|
display: inherit
|
||||||
|
|
||||||
|
.asidenav__box-title
|
||||||
|
font-size: 18px
|
||||||
|
padding-left: 10px
|
||||||
|
|
||||||
|
.asidenav__box-subtitle
|
||||||
|
display: none
|
||||||
|
|
||||||
|
@media (min-width: 1200px)
|
||||||
|
.main__aside
|
||||||
|
width: var(--asidenav-width-xl, 250px)
|
||||||
|
|
||||||
|
.asidenav
|
||||||
|
color: var(--color-font)
|
||||||
|
min-height: calc(100% - var(--header-height))
|
||||||
|
height: 400px
|
||||||
|
overflow-y: auto
|
||||||
|
overflow-x: hidden
|
||||||
|
|
||||||
|
&::-webkit-scrollbar
|
||||||
|
width: 0
|
||||||
|
|
||||||
|
.asidenav__box
|
||||||
|
transition: opacity .2s ease
|
||||||
|
|
||||||
|
+ .asidenav__box
|
||||||
|
margin-top: 10px
|
||||||
|
|
||||||
|
.asidenav__box-title
|
||||||
|
padding: 7px 13px
|
||||||
|
margin-top: 30px
|
||||||
|
background-color: transparent
|
||||||
|
transition: all .2s ease
|
||||||
|
padding: 10px 13px
|
||||||
|
margin: 0
|
||||||
|
border-bottom: 1px solid var(--color-grey)
|
||||||
|
|
||||||
|
.asidenav-term-identifier--long
|
||||||
|
display: inherit
|
||||||
|
|
||||||
|
.asidenav-term-identifier--short
|
||||||
|
display: none
|
||||||
|
|
||||||
|
.asidenav__box-subtitle
|
||||||
|
color: var(--color-fontsec)
|
||||||
|
font-size: 0.9rem
|
||||||
|
font-weight: 600
|
||||||
|
padding: 0 13px
|
||||||
|
margin: 3px 0
|
||||||
|
|
||||||
|
// LOGO
|
||||||
|
|
||||||
|
.asidenav__logo
|
||||||
|
height: var(--header-height)
|
||||||
|
display: flex
|
||||||
|
align-items: center
|
||||||
|
|
||||||
|
@media (max-width: 768px)
|
||||||
|
.asidenav__logo
|
||||||
|
display: none
|
||||||
|
|
||||||
|
.asidenav__logo-link
|
||||||
|
flex: 1
|
||||||
|
top: 10px
|
||||||
|
left: 20px
|
||||||
|
height: 80px
|
||||||
|
padding: 0 20px
|
||||||
|
display: flex
|
||||||
|
flex-basis: var(--asidenav-width-xl, 250px)
|
||||||
|
font-size: 16px
|
||||||
|
align-items: center
|
||||||
|
color: var(--color-dark)
|
||||||
|
transform-origin: left
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
color: var(--color-primary)
|
||||||
|
|
||||||
|
.asidenav__logo-lmu
|
||||||
|
width: 80px
|
||||||
|
height: 100%
|
||||||
|
|
||||||
|
.asidenav__logo-uni2work
|
||||||
|
display: flex
|
||||||
|
align-items: flex-end
|
||||||
|
min-width: 70px
|
||||||
|
margin-left: 12px
|
||||||
|
text-transform: uppercase
|
||||||
|
width: 100%
|
||||||
|
height: 100%
|
||||||
|
padding: 2px 4px
|
||||||
|
border: 1px solid currentColor
|
||||||
|
letter-spacing: 2px
|
||||||
|
background-color: white
|
||||||
|
transition: background-color .3s ease
|
||||||
|
|
||||||
|
@media (max-width: 1199px)
|
||||||
|
.asidenav__logo-link
|
||||||
|
flex-basis: var(--asidenav-width-lg, 20%)
|
||||||
|
font-size: 16px
|
||||||
|
|
||||||
|
.asidenav__logo-lmu
|
||||||
|
display: none
|
||||||
|
|
||||||
|
.asidenav__logo-uni2work
|
||||||
|
margin-left: 0
|
||||||
|
|
||||||
|
// SEAL
|
||||||
|
|
||||||
|
.asidenav__sigillum
|
||||||
|
position: absolute
|
||||||
|
bottom: -40px
|
||||||
|
right: 25px
|
||||||
|
opacity: 0.1
|
||||||
|
|
||||||
|
> img
|
||||||
|
width: 350px
|
||||||
|
|
||||||
|
@media (max-width: 768px)
|
||||||
|
.asidenav__sigillum
|
||||||
|
right: auto
|
||||||
|
left: 50%
|
||||||
|
transform: translateX(-50%)
|
||||||
|
|
||||||
|
// LIST-ITEM
|
||||||
|
|
||||||
|
.asidenav__list-item
|
||||||
|
color: var(--color-font)
|
||||||
|
display: flex
|
||||||
|
flex-direction: column
|
||||||
|
justify-content: flex-start
|
||||||
|
align-items: center
|
||||||
|
|
||||||
|
&:not(.asidenav__list-item--active):hover
|
||||||
|
background-color: var(--color-lightwhite)
|
||||||
|
|
||||||
|
> .asidenav__link-wrapper
|
||||||
|
color: var(--color-font)
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
.asidenav__link-shorthand
|
||||||
|
// transform: scale(1.05, 1.0);
|
||||||
|
// transform-origin: right;
|
||||||
|
text-shadow: none
|
||||||
|
|
||||||
|
.asidenav__nested-list-wrapper
|
||||||
|
display: block
|
||||||
|
|
||||||
|
// small list-item-padding for medium to large screens
|
||||||
|
@media (min-width: 769px)
|
||||||
|
.asidenav__list-item
|
||||||
|
padding-left: 10px
|
||||||
|
|
||||||
|
.asidenav__list-item--active
|
||||||
|
background-color: var(--color-lightwhite)
|
||||||
|
|
||||||
|
.asidenav__link-wrapper
|
||||||
|
color: var(--color-link)
|
||||||
|
|
||||||
|
.asidenav__link-shorthand
|
||||||
|
transform: scale(1.05, 1)
|
||||||
|
transform-origin: right
|
||||||
|
text-shadow: none
|
||||||
|
|
||||||
|
.asidenav__link-wrapper
|
||||||
|
position: relative
|
||||||
|
display: flex
|
||||||
|
flex: 1
|
||||||
|
align-items: center
|
||||||
|
padding: 8px 3px
|
||||||
|
justify-content: flex-start
|
||||||
|
color: var(--color-font)
|
||||||
|
width: 100%
|
||||||
|
z-index: 1
|
||||||
|
|
||||||
|
.asidenav__link-shorthand
|
||||||
|
display: none
|
||||||
|
|
||||||
|
.asidenav__link-label
|
||||||
|
line-height: 1
|
||||||
|
|
||||||
|
// hover sub-menus
|
||||||
|
.asidenav__nested-list-wrapper
|
||||||
|
position: absolute
|
||||||
|
z-index: 10
|
||||||
|
display: none
|
||||||
|
color: var(--color-font)
|
||||||
|
background-color: var(--color-grey-light)
|
||||||
|
box-shadow: 1px 1px 1px 0px var(--color-grey)
|
||||||
|
|
||||||
|
.asidenav__nested-list
|
||||||
|
min-width: 200px
|
||||||
|
|
||||||
|
@media (max-width: 425px)
|
||||||
|
.asidenav__list-item
|
||||||
|
padding-left: 10px
|
||||||
|
|
||||||
|
.asidenav__nested-list
|
||||||
|
display: none
|
||||||
|
|
||||||
|
.asidenav__nested-list-item
|
||||||
|
position: relative
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
background-color: var(--color-lightwhite)
|
||||||
|
|
||||||
|
.asidenav__link-wrapper
|
||||||
|
padding-left: 13px
|
||||||
|
padding-right: 13px
|
||||||
|
transition: all .2s ease
|
||||||
|
color: var(--color-font)
|
||||||
|
|
||||||
|
// TABLET
|
||||||
|
@media (min-width: 426px) and (max-width: 768px)
|
||||||
|
.main__aside
|
||||||
|
width: var(--asidenav-width-md, 50px)
|
||||||
|
flex-basis: var(--asidenav-width-md, 50px)
|
||||||
|
overflow: hidden
|
||||||
|
min-height: calc(100% - var(--header-height-collapsed))
|
||||||
|
top: var(--header-height-collapsed)
|
||||||
|
|
||||||
|
.asidenav__box-title
|
||||||
|
width: var(--asidenav-width-md, 50px)
|
||||||
|
font-size: 18px
|
||||||
|
text-align: center
|
||||||
|
padding: 10px 1px
|
||||||
|
word-break: break-all
|
||||||
|
background-color: var(--color-dark)
|
||||||
|
color: var(--color-lightwhite)
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
background-color: var(--color-darker)
|
||||||
|
|
||||||
|
&::before
|
||||||
|
display: none
|
||||||
|
|
||||||
|
.asidenav-term-identifier--long
|
||||||
|
display: none
|
||||||
|
|
||||||
|
.asidenav-term-identifier--short
|
||||||
|
display: inherit
|
||||||
|
|
||||||
|
.asidenav__box-subtitle
|
||||||
|
padding: 0 3px
|
||||||
|
font-size: 0.85rem
|
||||||
|
|
||||||
|
.asidenav__link-shorthand
|
||||||
|
display: flex
|
||||||
|
position: static
|
||||||
|
height: 50px
|
||||||
|
width: var(--asidenav-width-md, 50px)
|
||||||
|
text-align: center
|
||||||
|
opacity: 1
|
||||||
|
font-size: 15px
|
||||||
|
line-height: 1em
|
||||||
|
margin-right: 13px
|
||||||
|
flex-shrink: 0
|
||||||
|
padding: 1px
|
||||||
|
outline: 1px solid white
|
||||||
|
word-break: break-all
|
||||||
|
align-items: center
|
||||||
|
justify-content: center
|
||||||
|
|
||||||
|
.asidenav__list-item
|
||||||
|
padding-left: 0
|
||||||
|
|
||||||
|
+ .asidenav__list-item
|
||||||
|
margin: 0
|
||||||
|
|
||||||
|
.asidenav__link-wrapper
|
||||||
|
color: var(--color-font)
|
||||||
|
padding: 0
|
||||||
|
|
||||||
|
.asidenav__nested-list,
|
||||||
|
.asidenav__link-label
|
||||||
|
display: none
|
||||||
|
|
||||||
|
.asidenav__list-item--active
|
||||||
|
.asidenav__link-wrapper
|
||||||
|
background-color: var(--color-lightwhite)
|
||||||
@ -1,406 +0,0 @@
|
|||||||
.main__aside {
|
|
||||||
position: fixed;
|
|
||||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
|
|
||||||
z-index: 1;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: var(--asidenav-width-lg, 20%);
|
|
||||||
height: 100%;
|
|
||||||
flex: 0 0 0;
|
|
||||||
flex-basis: var(--asidenav-width-lg, 20%);
|
|
||||||
transition: all .2s ease-out;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
position: absolute;
|
|
||||||
z-index: -1;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: var(--color-dark);
|
|
||||||
opacity: 0.05;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
z-index: -2;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: var(--color-grey-light);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 425px) {
|
|
||||||
|
|
||||||
.main__aside {
|
|
||||||
position: fixed;
|
|
||||||
top: var(--header-height-collapsed);
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
height: 100% !important;
|
|
||||||
width: 100%;
|
|
||||||
z-index: 5;
|
|
||||||
overflow: hidden;
|
|
||||||
transform: translateX(-110%);
|
|
||||||
transition: transform .2s ease-out;
|
|
||||||
|
|
||||||
&.main__aside--expanded {
|
|
||||||
transform: translateX(0%);
|
|
||||||
|
|
||||||
.asidenav__box-subtitle {
|
|
||||||
display: inherit;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.asidenav__box-title {
|
|
||||||
font-size: 18px;
|
|
||||||
padding-left: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.asidenav__box-subtitle {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1200px) {
|
|
||||||
.main__aside {
|
|
||||||
width: var(--asidenav-width-xl, 250px)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.asidenav {
|
|
||||||
color: var(--color-font);
|
|
||||||
min-height: calc(100% - var(--header-height));
|
|
||||||
height: 400px;
|
|
||||||
overflow-y: auto;
|
|
||||||
overflow-x: hidden;
|
|
||||||
|
|
||||||
&::-webkit-scrollbar {
|
|
||||||
width: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.asidenav__box {
|
|
||||||
transition: opacity .2s ease;
|
|
||||||
|
|
||||||
+ .asidenav__box {
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.asidenav__box-title {
|
|
||||||
padding: 7px 13px;
|
|
||||||
margin-top: 30px;
|
|
||||||
background-color: transparent;
|
|
||||||
transition: all .2s ease;
|
|
||||||
padding: 10px 13px;
|
|
||||||
margin: 0;
|
|
||||||
border-bottom: 1px solid var(--color-grey);
|
|
||||||
|
|
||||||
.asidenav-term-identifier--long {
|
|
||||||
display: inherit;
|
|
||||||
}
|
|
||||||
.asidenav-term-identifier--short {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.asidenav__box-subtitle {
|
|
||||||
color: var(--color-fontsec);
|
|
||||||
font-size: 0.9rem;
|
|
||||||
font-weight: 600;
|
|
||||||
padding: 0 13px;
|
|
||||||
margin: 3px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* LOGO */
|
|
||||||
|
|
||||||
.asidenav__logo {
|
|
||||||
height: var(--header-height);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
|
|
||||||
.asidenav__logo {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.asidenav__logo-link {
|
|
||||||
flex: 1;
|
|
||||||
top: 10px;
|
|
||||||
left: 20px;
|
|
||||||
height: 80px;
|
|
||||||
padding: 0 20px;
|
|
||||||
display: flex;
|
|
||||||
flex-basis: var(--asidenav-width-xl, 250px);
|
|
||||||
font-size: 16px;
|
|
||||||
align-items: center;
|
|
||||||
color: var(--color-dark);
|
|
||||||
transform-origin: left;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: var(--color-primary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.asidenav__logo-lmu {
|
|
||||||
width: 80px;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.asidenav__logo-uni2work {
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-end;
|
|
||||||
min-width: 70px;
|
|
||||||
margin-left: 12px;
|
|
||||||
text-transform: uppercase;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
padding: 2px 4px;
|
|
||||||
border: 1px solid currentColor;
|
|
||||||
letter-spacing: 2px;
|
|
||||||
background-color: white;
|
|
||||||
transition: background-color .3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1199px) {
|
|
||||||
|
|
||||||
.asidenav__logo-link {
|
|
||||||
flex-basis: var(--asidenav-width-lg, 20%);
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.asidenav__logo-lmu {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.asidenav__logo-uni2work {
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* SEAL */
|
|
||||||
|
|
||||||
.asidenav__sigillum {
|
|
||||||
position: absolute;
|
|
||||||
bottom: -40px;
|
|
||||||
right: 25px;
|
|
||||||
opacity: 0.1;
|
|
||||||
|
|
||||||
> img {
|
|
||||||
width: 350px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.asidenav__sigillum {
|
|
||||||
right: auto;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* LIST-ITEM */
|
|
||||||
|
|
||||||
.asidenav__list-item {
|
|
||||||
color: var(--color-font);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
&:not(.asidenav__list-item--active):hover {
|
|
||||||
background-color: var(--color-lightwhite);
|
|
||||||
|
|
||||||
> .asidenav__link-wrapper {
|
|
||||||
color: var(--color-font);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
|
|
||||||
.asidenav__link-shorthand {
|
|
||||||
/* transform: scale(1.05, 1.0);
|
|
||||||
* transform-origin: right;
|
|
||||||
*/
|
|
||||||
text-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.asidenav__nested-list-wrapper {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* small list-item-padding for medium to large screens */
|
|
||||||
@media (min-width: 769px) {
|
|
||||||
.asidenav__list-item {
|
|
||||||
padding-left: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.asidenav__list-item--active {
|
|
||||||
background-color: var(--color-lightwhite);
|
|
||||||
|
|
||||||
.asidenav__link-wrapper {
|
|
||||||
color: var(--color-link);
|
|
||||||
}
|
|
||||||
|
|
||||||
.asidenav__link-shorthand {
|
|
||||||
transform: scale(1.05, 1.0);
|
|
||||||
transform-origin: right;
|
|
||||||
text-shadow: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.asidenav__link-wrapper {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
flex: 1;
|
|
||||||
align-items: center;
|
|
||||||
padding: 8px 3px;
|
|
||||||
justify-content: flex-start;
|
|
||||||
color: var(--color-font);
|
|
||||||
width: 100%;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.asidenav__link-shorthand {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.asidenav__link-label {
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* hover sub-menus */
|
|
||||||
.asidenav__nested-list-wrapper {
|
|
||||||
position: absolute;
|
|
||||||
z-index: 10;
|
|
||||||
display: none;
|
|
||||||
color: var(--color-font);
|
|
||||||
background-color: var(--color-grey-light);
|
|
||||||
box-shadow: 1px 1px 1px 0px var(--color-grey);
|
|
||||||
}
|
|
||||||
|
|
||||||
.asidenav__nested-list {
|
|
||||||
min-width: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 425px) {
|
|
||||||
.asidenav__list-item {
|
|
||||||
padding-left: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.asidenav__nested-list {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.asidenav__nested-list-item {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--color-lightwhite);
|
|
||||||
}
|
|
||||||
|
|
||||||
.asidenav__link-wrapper {
|
|
||||||
padding-left: 13px;
|
|
||||||
padding-right: 13px;
|
|
||||||
transition: all .2s ease;
|
|
||||||
color: var(--color-font);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* TABLET */
|
|
||||||
@media (min-width: 426px) and (max-width: 768px) {
|
|
||||||
|
|
||||||
.main__aside {
|
|
||||||
width: var(--asidenav-width-md, 50px);
|
|
||||||
flex-basis: var(--asidenav-width-md, 50px);
|
|
||||||
overflow: hidden;
|
|
||||||
min-height: calc(100% - var(--header-height-collapsed));
|
|
||||||
top: var(--header-height-collapsed);
|
|
||||||
|
|
||||||
.asidenav__box-title {
|
|
||||||
width: var(--asidenav-width-md, 50px);
|
|
||||||
font-size: 18px;
|
|
||||||
text-align: center;
|
|
||||||
padding: 10px 1px;
|
|
||||||
word-break: break-all;
|
|
||||||
background-color: var(--color-dark);
|
|
||||||
color: var(--color-lightwhite);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--color-darker);
|
|
||||||
}
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.asidenav-term-identifier--long {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.asidenav-term-identifier--short {
|
|
||||||
display: inherit;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.asidenav__box-subtitle {
|
|
||||||
padding: 0 3px;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.asidenav__link-shorthand {
|
|
||||||
display: flex;
|
|
||||||
position: static;
|
|
||||||
height: 50px;
|
|
||||||
width: var(--asidenav-width-md, 50px);
|
|
||||||
text-align: center;
|
|
||||||
opacity: 1;
|
|
||||||
font-size: 15px;
|
|
||||||
line-height: 1em;
|
|
||||||
margin-right: 13px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
padding: 1px;
|
|
||||||
outline: 1px solid white;
|
|
||||||
word-break: break-all;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.asidenav__list-item {
|
|
||||||
padding-left: 0;
|
|
||||||
|
|
||||||
+ .asidenav__list-item {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.asidenav__link-wrapper {
|
|
||||||
color: var(--color-font);
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.asidenav__nested-list,
|
|
||||||
.asidenav__link-label {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.asidenav__list-item--active {
|
|
||||||
|
|
||||||
.asidenav__link-wrapper {
|
|
||||||
background-color: var(--color-lightwhite);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,6 +1,6 @@
|
|||||||
import { Utility } from '../../core/utility';
|
import { Utility } from '../../core/utility';
|
||||||
import { Datepicker } from '../form/datepicker';
|
import { Datepicker } from '../form/datepicker';
|
||||||
import './async-form.scss';
|
import './async-form.sass';
|
||||||
|
|
||||||
const ASYNC_FORM_INITIALIZED_CLASS = 'check-all--initialized';
|
const ASYNC_FORM_INITIALIZED_CLASS = 'check-all--initialized';
|
||||||
const ASYNC_FORM_RESPONSE_CLASS = 'async-form__response';
|
const ASYNC_FORM_RESPONSE_CLASS = 'async-form__response';
|
||||||
|
|||||||
71
frontend/src/utils/async-form/async-form.sass
Normal file
71
frontend/src/utils/async-form/async-form.sass
Normal file
@ -0,0 +1,71 @@
|
|||||||
|
.async-form__response
|
||||||
|
margin: 20px 0
|
||||||
|
position: relative
|
||||||
|
width: 100%
|
||||||
|
font-size: 18px
|
||||||
|
text-align: center
|
||||||
|
padding-top: 60px
|
||||||
|
|
||||||
|
.async-form__response::before,
|
||||||
|
.async-form__response::after
|
||||||
|
position: absolute
|
||||||
|
top: 0px
|
||||||
|
left: 50%
|
||||||
|
display: block
|
||||||
|
|
||||||
|
.async-form__response--success::before
|
||||||
|
content: ''
|
||||||
|
width: 17px
|
||||||
|
height: 28px
|
||||||
|
border: solid #069e04
|
||||||
|
border-width: 0 5px 5px 0
|
||||||
|
transform: translateX(-50%) rotate(45deg)
|
||||||
|
|
||||||
|
.async-form__response--info::before
|
||||||
|
content: ''
|
||||||
|
width: 5px
|
||||||
|
height: 30px
|
||||||
|
top: 10px
|
||||||
|
background-color: #777
|
||||||
|
transform: translateX(-50%)
|
||||||
|
|
||||||
|
.async-form__response--info::after
|
||||||
|
content: ''
|
||||||
|
width: 5px
|
||||||
|
height: 5px
|
||||||
|
background-color: #777
|
||||||
|
transform: translateX(-50%)
|
||||||
|
|
||||||
|
.async-form__response--warning::before
|
||||||
|
content: ''
|
||||||
|
width: 5px
|
||||||
|
height: 30px
|
||||||
|
background-color: rgb(255, 187, 0)
|
||||||
|
transform: translateX(-50%)
|
||||||
|
|
||||||
|
.async-form__response--warning::after
|
||||||
|
content: ''
|
||||||
|
width: 5px
|
||||||
|
height: 5px
|
||||||
|
top: 35px
|
||||||
|
background-color: rgb(255, 187, 0)
|
||||||
|
transform: translateX(-50%)
|
||||||
|
|
||||||
|
.async-form__response--error::before
|
||||||
|
content: ''
|
||||||
|
width: 5px
|
||||||
|
height: 40px
|
||||||
|
background-color: #940d0d
|
||||||
|
transform: translateX(-50%) rotate(-45deg)
|
||||||
|
|
||||||
|
.async-form__response--error::after
|
||||||
|
content: ''
|
||||||
|
width: 5px
|
||||||
|
height: 40px
|
||||||
|
background-color: #940d0d
|
||||||
|
transform: translateX(-50%) rotate(45deg)
|
||||||
|
|
||||||
|
.async-form--loading
|
||||||
|
opacity: 0.1
|
||||||
|
transition: opacity 800ms ease-out
|
||||||
|
pointer-events: none
|
||||||
@ -1,78 +0,0 @@
|
|||||||
.async-form__response {
|
|
||||||
margin: 20px 0;
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
font-size: 18px;
|
|
||||||
text-align: center;
|
|
||||||
padding-top: 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.async-form__response::before,
|
|
||||||
.async-form__response::after {
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 50%;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.async-form__response--success::before {
|
|
||||||
content: '';
|
|
||||||
width: 17px;
|
|
||||||
height: 28px;
|
|
||||||
border: solid #069e04;
|
|
||||||
border-width: 0 5px 5px 0;
|
|
||||||
transform: translateX(-50%) rotate(45deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.async-form__response--info::before {
|
|
||||||
content: '';
|
|
||||||
width: 5px;
|
|
||||||
height: 30px;
|
|
||||||
top: 10px;
|
|
||||||
background-color: #777;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
}
|
|
||||||
.async-form__response--info::after {
|
|
||||||
content: '';
|
|
||||||
width: 5px;
|
|
||||||
height: 5px;
|
|
||||||
background-color: #777;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.async-form__response--warning::before {
|
|
||||||
content: '';
|
|
||||||
width: 5px;
|
|
||||||
height: 30px;
|
|
||||||
background-color: rgb(255, 187, 0);
|
|
||||||
transform: translateX(-50%);
|
|
||||||
}
|
|
||||||
.async-form__response--warning::after {
|
|
||||||
content: '';
|
|
||||||
width: 5px;
|
|
||||||
height: 5px;
|
|
||||||
top: 35px;
|
|
||||||
background-color: rgb(255, 187, 0);
|
|
||||||
transform: translateX(-50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.async-form__response--error::before {
|
|
||||||
content: '';
|
|
||||||
width: 5px;
|
|
||||||
height: 40px;
|
|
||||||
background-color: #940d0d;
|
|
||||||
transform: translateX(-50%) rotate(-45deg);
|
|
||||||
}
|
|
||||||
.async-form__response--error::after {
|
|
||||||
content: '';
|
|
||||||
width: 5px;
|
|
||||||
height: 40px;
|
|
||||||
background-color: #940d0d;
|
|
||||||
transform: translateX(-50%) rotate(45deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.async-form--loading {
|
|
||||||
opacity: 0.1;
|
|
||||||
transition: opacity 800ms ease-out;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
4
frontend/src/utils/async-table/async-table-filter.sass
Normal file
4
frontend/src/utils/async-table/async-table-filter.sass
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
.async-table-filter--loading
|
||||||
|
opacity: 0.7
|
||||||
|
pointer-events: none
|
||||||
|
transition: opacity 400ms ease-out
|
||||||
@ -1,5 +0,0 @@
|
|||||||
.async-table-filter--loading {
|
|
||||||
opacity: 0.7;
|
|
||||||
pointer-events: none;
|
|
||||||
transition: opacity 400ms ease-out;
|
|
||||||
}
|
|
||||||
@ -3,8 +3,8 @@ import { StorageManager, LOCATION } from '../../lib/storage-manager/storage-mana
|
|||||||
import { Datepicker } from '../form/datepicker';
|
import { Datepicker } from '../form/datepicker';
|
||||||
import { HttpClient } from '../../services/http-client/http-client';
|
import { HttpClient } from '../../services/http-client/http-client';
|
||||||
import * as debounce from 'lodash.debounce';
|
import * as debounce from 'lodash.debounce';
|
||||||
import './async-table-filter.scss';
|
import './async-table-filter.sass';
|
||||||
import './async-table.scss';
|
import './async-table.sass';
|
||||||
|
|
||||||
const INPUT_DEBOUNCE = 600;
|
const INPUT_DEBOUNCE = 600;
|
||||||
const HEADER_HEIGHT = 80;
|
const HEADER_HEIGHT = 80;
|
||||||
|
|||||||
4
frontend/src/utils/async-table/async-table.sass
Normal file
4
frontend/src/utils/async-table/async-table.sass
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
.async-table--loading
|
||||||
|
opacity: 0.7
|
||||||
|
pointer-events: none
|
||||||
|
transition: opacity 400ms ease-out
|
||||||
@ -1,5 +0,0 @@
|
|||||||
.async-table--loading {
|
|
||||||
opacity: 0.7;
|
|
||||||
pointer-events: none;
|
|
||||||
transition: opacity 400ms ease-out;
|
|
||||||
}
|
|
||||||
@ -1,5 +1,5 @@
|
|||||||
import { Utility } from '../../core/utility';
|
import { Utility } from '../../core/utility';
|
||||||
import './course-teaser.scss';
|
import './course-teaser.sass';
|
||||||
|
|
||||||
var COURSE_TEASER_INITIALIZED_CLASS = 'course-teaser--initialized';
|
var COURSE_TEASER_INITIALIZED_CLASS = 'course-teaser--initialized';
|
||||||
|
|
||||||
|
|||||||
246
frontend/src/utils/course-teaser/course-teaser.sass
Normal file
246
frontend/src/utils/course-teaser/course-teaser.sass
Normal file
@ -0,0 +1,246 @@
|
|||||||
|
[uw-course-teaser]
|
||||||
|
--course-border-color: var(--color-grey)
|
||||||
|
--course-padding-hori: 10px
|
||||||
|
--course-padding-vert: 12px
|
||||||
|
display: grid
|
||||||
|
position: relative
|
||||||
|
grid-gap: 5px 7px
|
||||||
|
grid-template-columns: 130px 30px 1fr 60px
|
||||||
|
grid-template-areas: 'shrthnd . title chevron' 'shrthnd smstr school chevron' '. . rgstrd . ' 'tutor tutor name . ' 'duedate duedate date . ' 'dscrptn dscrptn dscrptn dscrptn'
|
||||||
|
padding: var(--course-padding-vert) var(--course-padding-hori)
|
||||||
|
transition: background-color .1s ease-out
|
||||||
|
cursor: pointer
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
background-color: var(--course-bg-color)
|
||||||
|
|
||||||
|
+ [uw-course-teaser]
|
||||||
|
border-top: 1px solid var(--course-border-color)
|
||||||
|
|
||||||
|
@media (max-width: 768px)
|
||||||
|
grid-template-columns: 140px 1fr 30px
|
||||||
|
grid-template-areas: 'shrthnd title chevron' 'shrthnd title . ' 'smstr school school ' '. rgstrd rgstrd ' 'tutor name name ' 'duedate date date ' 'dscrptn dscrptn dscrptn'
|
||||||
|
|
||||||
|
@media (max-width: 426px)
|
||||||
|
grid-template-columns: 1fr
|
||||||
|
grid-template-areas: 'shrthnd' 'title' 'smstr' 'school' 'rgstrd' 'tutor' 'name' 'duedate' 'date' 'dscrptnlbl' 'dscrptn' 'chevron'
|
||||||
|
|
||||||
|
.course-teaser__not-expandable
|
||||||
|
cursor: initial
|
||||||
|
|
||||||
|
// chevron
|
||||||
|
.course-teaser__chevron
|
||||||
|
position: relative
|
||||||
|
padding: 10px
|
||||||
|
grid-area: chevron
|
||||||
|
justify-self: center
|
||||||
|
align-self: center
|
||||||
|
width: 100%
|
||||||
|
height: 100%
|
||||||
|
cursor: pointer
|
||||||
|
|
||||||
|
&::before
|
||||||
|
content: ''
|
||||||
|
position: absolute
|
||||||
|
display: block
|
||||||
|
margin-top: -7.35px
|
||||||
|
margin-left: -7.35px
|
||||||
|
|
||||||
|
// visually centered
|
||||||
|
border-width: 0 3px 3px 0
|
||||||
|
width: 8px
|
||||||
|
height: 8px
|
||||||
|
top: 50%
|
||||||
|
left: 50%
|
||||||
|
border-color: var(--color-fontsec)
|
||||||
|
border-style: solid
|
||||||
|
transform: rotate(135deg)
|
||||||
|
transform-origin: 7.25px 7.25px
|
||||||
|
|
||||||
|
// rotate about visual center
|
||||||
|
transition: all .2s ease-out
|
||||||
|
|
||||||
|
&:hover::before
|
||||||
|
transform: scale(1.4) rotate(45deg)
|
||||||
|
|
||||||
|
@media (max-width: 768px)
|
||||||
|
justify-self: end
|
||||||
|
width: auto
|
||||||
|
|
||||||
|
&::before
|
||||||
|
position: initial
|
||||||
|
|
||||||
|
@media (max-width: 426px)
|
||||||
|
&::before
|
||||||
|
transform: rotate(45deg)
|
||||||
|
margin-left: -7.35px
|
||||||
|
|
||||||
|
&:hover::before
|
||||||
|
transform: scale(1.4) rotate(45deg)
|
||||||
|
|
||||||
|
// semester
|
||||||
|
.course-teaser__semester
|
||||||
|
grid-area: smstr
|
||||||
|
justify-self: end
|
||||||
|
|
||||||
|
a
|
||||||
|
color: var(--color-fontsec)
|
||||||
|
|
||||||
|
@media (max-width: 768px)
|
||||||
|
justify-self: initial
|
||||||
|
|
||||||
|
// shorthand
|
||||||
|
.course-teaser__shorthand
|
||||||
|
position: relative
|
||||||
|
grid-area: shrthnd
|
||||||
|
font-size: 2rem
|
||||||
|
line-height: 1.25
|
||||||
|
min-height: calc(2rem * 1.25)
|
||||||
|
|
||||||
|
> a
|
||||||
|
position: absolute
|
||||||
|
height: 100%
|
||||||
|
width: 100%
|
||||||
|
overflow: hidden
|
||||||
|
text-overflow: ellipsis
|
||||||
|
white-space: nowrap
|
||||||
|
word-break: break-any
|
||||||
|
text-decoration: none !important
|
||||||
|
|
||||||
|
// sry.
|
||||||
|
font-weight: 600
|
||||||
|
color: var(--color-grey-medium)
|
||||||
|
|
||||||
|
// @media (max-width: 768px) {
|
||||||
|
position: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
// title
|
||||||
|
.course-teaser__title
|
||||||
|
grid-area: title
|
||||||
|
font-size: 1.2rem
|
||||||
|
align-self: baseline
|
||||||
|
|
||||||
|
// registration
|
||||||
|
.course-teaser__registration
|
||||||
|
grid-area: rgstrd
|
||||||
|
color: var(--color-fontsec)
|
||||||
|
font-weight: bold
|
||||||
|
|
||||||
|
// school
|
||||||
|
.course-teaser__school
|
||||||
|
grid-area: school
|
||||||
|
|
||||||
|
a
|
||||||
|
color: var(--color-fontsec)
|
||||||
|
|
||||||
|
// duedate
|
||||||
|
.course-teaser__duedate
|
||||||
|
grid-area: date
|
||||||
|
|
||||||
|
// lecturer
|
||||||
|
.course-teaser__lecturer
|
||||||
|
grid-area: name
|
||||||
|
|
||||||
|
// description
|
||||||
|
.course-teaser__description
|
||||||
|
grid-area: dscrptn
|
||||||
|
max-height: 75vh
|
||||||
|
overflow: auto
|
||||||
|
|
||||||
|
// show description only as dots (overflow text-overflow) and only show when expanded. No "hidden fiddling"
|
||||||
|
|
||||||
|
// labels
|
||||||
|
.course-teaser__lecturer-label
|
||||||
|
grid-area: tutor
|
||||||
|
|
||||||
|
.course-teaser__duedate-label
|
||||||
|
grid-area: duedate
|
||||||
|
|
||||||
|
.course-teaser__description-label
|
||||||
|
grid-area: dscrptnlbl
|
||||||
|
|
||||||
|
.course-teaser__lecturer-label,
|
||||||
|
.course-teaser__description-label,
|
||||||
|
.course-teaser__duedate-label
|
||||||
|
justify-self: end
|
||||||
|
color: var(--color-fontsec)
|
||||||
|
font-style: italic
|
||||||
|
|
||||||
|
@media (max-width: 768px)
|
||||||
|
justify-self: initial
|
||||||
|
|
||||||
|
@media (max-width: 426px)
|
||||||
|
margin-top: 7px
|
||||||
|
font-weight: bold
|
||||||
|
font-style: initial
|
||||||
|
|
||||||
|
// hidden in closed state
|
||||||
|
.course-teaser__description,
|
||||||
|
.course-teaser__description-label
|
||||||
|
display: none
|
||||||
|
|
||||||
|
// expanded courses
|
||||||
|
.course-teaser__expanded
|
||||||
|
cursor: initial
|
||||||
|
|
||||||
|
.course-teaser__chevron
|
||||||
|
&::before
|
||||||
|
transform: rotate(45deg)
|
||||||
|
|
||||||
|
&:hover::before
|
||||||
|
transform: scale(1.4) rotate(135deg)
|
||||||
|
|
||||||
|
@media (max-width: 426px)
|
||||||
|
&::before
|
||||||
|
transform: rotate(225deg)
|
||||||
|
|
||||||
|
&:hover::before
|
||||||
|
transform: scale(1.4) rotate(225deg)
|
||||||
|
|
||||||
|
.course-teaser__school-label,
|
||||||
|
.course-teaser__school,
|
||||||
|
.course-teaser__duedate-label,
|
||||||
|
.course-teaser__duedate,
|
||||||
|
.course-teaser__description
|
||||||
|
display: block
|
||||||
|
|
||||||
|
@media (max-width: 426px)
|
||||||
|
.course-teaser__description-label
|
||||||
|
display: block
|
||||||
|
|
||||||
|
// course teaser: header styling
|
||||||
|
.course-teaser-header
|
||||||
|
padding-top: 10px
|
||||||
|
padding-bottom: 20px
|
||||||
|
line-height: 1.4
|
||||||
|
max-width: 85vw
|
||||||
|
|
||||||
|
.course-header
|
||||||
|
float: left
|
||||||
|
background-color: var(--color-dark)
|
||||||
|
position: relative
|
||||||
|
font-size: 16px
|
||||||
|
color: #fff
|
||||||
|
padding-top: 10px
|
||||||
|
padding-bottom: 10px
|
||||||
|
padding-left: 10px
|
||||||
|
padding-right: 35px
|
||||||
|
margin-bottom: 10px
|
||||||
|
font-weight: bold
|
||||||
|
text-align: left
|
||||||
|
border-radius: 20px 20px 20px 20px / 50% 50% 50% 50%
|
||||||
|
margin-right: 30px
|
||||||
|
|
||||||
|
.course-header-link
|
||||||
|
color: white
|
||||||
|
font-weight: bold
|
||||||
|
text-decoration: none
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
color: inherit
|
||||||
|
|
||||||
|
.course-teaser-header:after
|
||||||
|
content: ""
|
||||||
|
display: table
|
||||||
|
clear: both
|
||||||
@ -1,317 +0,0 @@
|
|||||||
[uw-course-teaser] {
|
|
||||||
--course-border-color: var(--color-grey);
|
|
||||||
--course-padding-hori: 10px;
|
|
||||||
--course-padding-vert: 12px;
|
|
||||||
|
|
||||||
display: grid;
|
|
||||||
position: relative;
|
|
||||||
grid-gap: 5px 7px;
|
|
||||||
grid-template-columns: 130px 30px 1fr 60px;
|
|
||||||
grid-template-areas:
|
|
||||||
'shrthnd . title chevron'
|
|
||||||
'shrthnd smstr school chevron'
|
|
||||||
'. . rgstrd . '
|
|
||||||
'tutor tutor name . '
|
|
||||||
'duedate duedate date . '
|
|
||||||
'dscrptn dscrptn dscrptn dscrptn';
|
|
||||||
padding: var(--course-padding-vert) var(--course-padding-hori);
|
|
||||||
transition: background-color .1s ease-out;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--course-bg-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
+ [uw-course-teaser] {
|
|
||||||
border-top: 1px solid var(--course-border-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
grid-template-columns: 140px 1fr 30px;
|
|
||||||
grid-template-areas:
|
|
||||||
'shrthnd title chevron'
|
|
||||||
'shrthnd title . '
|
|
||||||
'smstr school school '
|
|
||||||
'. rgstrd rgstrd '
|
|
||||||
'tutor name name '
|
|
||||||
'duedate date date '
|
|
||||||
'dscrptn dscrptn dscrptn';
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 426px) {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
grid-template-areas:
|
|
||||||
'shrthnd'
|
|
||||||
'title'
|
|
||||||
'smstr'
|
|
||||||
'school'
|
|
||||||
'rgstrd'
|
|
||||||
'tutor'
|
|
||||||
'name'
|
|
||||||
'duedate'
|
|
||||||
'date'
|
|
||||||
'dscrptnlbl'
|
|
||||||
'dscrptn'
|
|
||||||
'chevron';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.course-teaser__not-expandable {
|
|
||||||
cursor: initial;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* chevron */
|
|
||||||
.course-teaser__chevron {
|
|
||||||
position: relative;
|
|
||||||
padding: 10px;
|
|
||||||
grid-area: chevron;
|
|
||||||
justify-self: center;
|
|
||||||
align-self: center;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
display: block;
|
|
||||||
margin-top: -7.35px;
|
|
||||||
margin-left: -7.35px; /* visually centered */
|
|
||||||
border-width: 0 3px 3px 0;
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
border-color: var(--color-fontsec);
|
|
||||||
border-style: solid;
|
|
||||||
transform: rotate(135deg);
|
|
||||||
transform-origin: 7.25px 7.25px; /* rotate about visual center */
|
|
||||||
transition: all .2s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover::before {
|
|
||||||
transform: scale(1.4) rotate(45deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
justify-self: end;
|
|
||||||
width: auto;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
position: initial;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 426px) {
|
|
||||||
&::before {
|
|
||||||
transform: rotate(45deg);
|
|
||||||
margin-left: -7.35px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover::before {
|
|
||||||
transform: scale(1.4) rotate(45deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* semester */
|
|
||||||
.course-teaser__semester {
|
|
||||||
grid-area: smstr;
|
|
||||||
justify-self: end;
|
|
||||||
a {
|
|
||||||
color: var(--color-fontsec);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
justify-self: initial;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* shorthand */
|
|
||||||
.course-teaser__shorthand {
|
|
||||||
position: relative;
|
|
||||||
grid-area: shrthnd;
|
|
||||||
font-size: 2rem;
|
|
||||||
line-height: 1.25;
|
|
||||||
min-height: calc(2rem * 1.25);
|
|
||||||
|
|
||||||
> a {
|
|
||||||
position: absolute;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
word-break: break-any;
|
|
||||||
|
|
||||||
text-decoration: none !important; /* sry. */
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--color-grey-medium);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* @media (max-width: 768px) {
|
|
||||||
* position: initial;
|
|
||||||
* }
|
|
||||||
*/
|
|
||||||
}
|
|
||||||
|
|
||||||
/* title */
|
|
||||||
.course-teaser__title {
|
|
||||||
grid-area: title;
|
|
||||||
font-size: 1.2rem;
|
|
||||||
align-self: baseline;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* registration */
|
|
||||||
.course-teaser__registration {
|
|
||||||
grid-area: rgstrd;
|
|
||||||
color: var(--color-fontsec);
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* school */
|
|
||||||
.course-teaser__school {
|
|
||||||
grid-area: school;
|
|
||||||
a {
|
|
||||||
color: var(--color-fontsec);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* duedate */
|
|
||||||
.course-teaser__duedate {
|
|
||||||
grid-area: date;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* lecturer */
|
|
||||||
.course-teaser__lecturer {
|
|
||||||
grid-area: name;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* description */
|
|
||||||
.course-teaser__description {
|
|
||||||
grid-area: dscrptn;
|
|
||||||
max-height: 75vh;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* show description only as dots (overflow text-overflow) and only show when expanded. No "hidden fiddling" */
|
|
||||||
|
|
||||||
/* labels */
|
|
||||||
.course-teaser__lecturer-label {
|
|
||||||
grid-area: tutor;
|
|
||||||
}
|
|
||||||
|
|
||||||
.course-teaser__duedate-label {
|
|
||||||
grid-area: duedate;
|
|
||||||
}
|
|
||||||
|
|
||||||
.course-teaser__description-label {
|
|
||||||
grid-area: dscrptnlbl;
|
|
||||||
}
|
|
||||||
|
|
||||||
.course-teaser__lecturer-label,
|
|
||||||
.course-teaser__description-label,
|
|
||||||
.course-teaser__duedate-label {
|
|
||||||
justify-self: end;
|
|
||||||
color: var(--color-fontsec);
|
|
||||||
font-style: italic;
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
justify-self: initial;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 426px) {
|
|
||||||
margin-top: 7px;
|
|
||||||
font-weight: bold;
|
|
||||||
font-style: initial;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* hidden in closed state */
|
|
||||||
.course-teaser__description,
|
|
||||||
.course-teaser__description-label {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* expanded courses */
|
|
||||||
.course-teaser__expanded {
|
|
||||||
cursor: initial;
|
|
||||||
|
|
||||||
.course-teaser__chevron {
|
|
||||||
&::before {
|
|
||||||
transform: rotate(45deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover::before {
|
|
||||||
transform: scale(1.4) rotate(135deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 426px) {
|
|
||||||
&::before {
|
|
||||||
transform: rotate(225deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover::before {
|
|
||||||
transform: scale(1.4) rotate(225deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.course-teaser__school-label,
|
|
||||||
.course-teaser__school,
|
|
||||||
.course-teaser__duedate-label,
|
|
||||||
.course-teaser__duedate,
|
|
||||||
.course-teaser__description {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 426px) {
|
|
||||||
.course-teaser__description-label {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
course teaser: header styling
|
|
||||||
*/
|
|
||||||
.course-teaser-header {
|
|
||||||
padding-top: 10px;
|
|
||||||
padding-bottom: 20px;
|
|
||||||
line-height: 1.4;
|
|
||||||
max-width: 85vw;
|
|
||||||
|
|
||||||
.course-header {
|
|
||||||
float: left;
|
|
||||||
background-color: var(--color-dark);
|
|
||||||
position: relative;
|
|
||||||
font-size: 16px;
|
|
||||||
color: #fff;
|
|
||||||
padding-top: 10px;
|
|
||||||
padding-bottom: 10px;
|
|
||||||
padding-left: 10px;
|
|
||||||
padding-right: 35px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
font-weight: bold;
|
|
||||||
text-align: left;
|
|
||||||
border-radius: 20px 20px 20px 20px / 50% 50% 50% 50%;
|
|
||||||
margin-right: 30px;
|
|
||||||
|
|
||||||
.course-header-link {
|
|
||||||
color: white;
|
|
||||||
font-weight: bold;
|
|
||||||
text-decoration: none;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.course-teaser-header:after {
|
|
||||||
content: "";
|
|
||||||
display: table;
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
@ -1,4 +1,4 @@
|
|||||||
import './form.scss';
|
import './form.sass';
|
||||||
import { AutoSubmitButton } from './auto-submit-button';
|
import { AutoSubmitButton } from './auto-submit-button';
|
||||||
import { AutoSubmitInput } from './auto-submit-input';
|
import { AutoSubmitInput } from './auto-submit-input';
|
||||||
import { Datepicker } from './datepicker';
|
import { Datepicker } from './datepicker';
|
||||||
|
|||||||
35
frontend/src/utils/form/form.sass
Normal file
35
frontend/src/utils/form/form.sass
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
fieldset
|
||||||
|
border: 0
|
||||||
|
margin: 0
|
||||||
|
padding: 0
|
||||||
|
|
||||||
|
legend
|
||||||
|
display: none
|
||||||
|
|
||||||
|
@media (min-width: 769px)
|
||||||
|
.form-group__input
|
||||||
|
grid-column: 2
|
||||||
|
|
||||||
|
[uw-auto-submit-button][type='submit']
|
||||||
|
animation: fade-in 500ms ease-in-out backwards
|
||||||
|
animation-delay: 500ms
|
||||||
|
|
||||||
|
@keyframes fade-in
|
||||||
|
from
|
||||||
|
opacity: 0
|
||||||
|
|
||||||
|
.hidden
|
||||||
|
visibility: hidden !important
|
||||||
|
height: 0 !important
|
||||||
|
width: 0 !important
|
||||||
|
opacity: 0 !important
|
||||||
|
margin: 0 !important
|
||||||
|
padding: 0 !important
|
||||||
|
min-width: 0 !important
|
||||||
|
|
||||||
|
.select--pagesize
|
||||||
|
width: 5em
|
||||||
|
min-width: 75px
|
||||||
|
|
||||||
|
.label-pagesize
|
||||||
|
margin-right: 13px
|
||||||
@ -1,45 +0,0 @@
|
|||||||
fieldset {
|
|
||||||
border: 0;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
legend {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 769px) {
|
|
||||||
.form-group__input {
|
|
||||||
grid-column: 2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
[uw-auto-submit-button][type='submit'] {
|
|
||||||
animation: fade-in 500ms ease-in-out backwards;
|
|
||||||
animation-delay: 500ms;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fade-in {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.hidden {
|
|
||||||
visibility: hidden !important;
|
|
||||||
height: 0 !important;
|
|
||||||
width: 0 !important;
|
|
||||||
opacity: 0 !important;
|
|
||||||
margin: 0 !important;
|
|
||||||
padding: 0 !important;
|
|
||||||
min-width: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.select--pagesize {
|
|
||||||
width: 5em;
|
|
||||||
min-width: 75px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label-pagesize {
|
|
||||||
margin-right: 13px;
|
|
||||||
}
|
|
||||||
@ -1,6 +1,6 @@
|
|||||||
import { Utility } from '../../core/utility';
|
import { Utility } from '../../core/utility';
|
||||||
import { StorageManager, LOCATION } from '../../lib/storage-manager/storage-manager';
|
import { StorageManager, LOCATION } from '../../lib/storage-manager/storage-manager';
|
||||||
import './hide-columns.scss';
|
import './hide-columns.sass';
|
||||||
|
|
||||||
const HIDE_COLUMNS_CONTAINER_IDENT = 'uw-hide-columns';
|
const HIDE_COLUMNS_CONTAINER_IDENT = 'uw-hide-columns';
|
||||||
const TABLE_HEADER_IDENT = 'uw-hide-column-header';
|
const TABLE_HEADER_IDENT = 'uw-hide-column-header';
|
||||||
|
|||||||
61
frontend/src/utils/hide-columns/hide-columns.sass
Normal file
61
frontend/src/utils/hide-columns/hide-columns.sass
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
.table-hider
|
||||||
|
background-color: #fff
|
||||||
|
color: var(--color-link)
|
||||||
|
padding: 10px
|
||||||
|
cursor: pointer
|
||||||
|
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.6)
|
||||||
|
position: absolute
|
||||||
|
overflow: hidden
|
||||||
|
transition: transform .2s ease
|
||||||
|
transform: scaleY(0)
|
||||||
|
transform-origin: top
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
background-color: var(--color-grey-light)
|
||||||
|
|
||||||
|
.table-hider__label
|
||||||
|
display: none
|
||||||
|
|
||||||
|
&.table-hider--visible
|
||||||
|
transform: scaleY(0.4)
|
||||||
|
transition: none
|
||||||
|
|
||||||
|
// TODO find better way to prevent transition on icons
|
||||||
|
|
||||||
|
.fas
|
||||||
|
transform: scaleY(2.5)
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
transform: scaleY(1)
|
||||||
|
|
||||||
|
.fas
|
||||||
|
transform: scaleY(1)
|
||||||
|
|
||||||
|
[table-utils]
|
||||||
|
max-width: 85vw
|
||||||
|
margin-bottom: 10px
|
||||||
|
min-height: 0
|
||||||
|
line-height: 1.4
|
||||||
|
|
||||||
|
.table-pill
|
||||||
|
background-color: var(--color-dark)
|
||||||
|
float: left
|
||||||
|
color: #fff
|
||||||
|
padding: 10px
|
||||||
|
border-radius: 20px / 50%
|
||||||
|
margin-right: 20px
|
||||||
|
margin-bottom: 10px
|
||||||
|
cursor: pointer
|
||||||
|
|
||||||
|
.table-hider__label
|
||||||
|
font-size: 16px
|
||||||
|
font-weight: bold
|
||||||
|
margin-left: 5px
|
||||||
|
|
||||||
|
&:after
|
||||||
|
content: ""
|
||||||
|
display: block
|
||||||
|
clear: both
|
||||||
|
|
||||||
|
.hide-columns--hidden-cell
|
||||||
|
display: none
|
||||||
@ -1,71 +0,0 @@
|
|||||||
.table-hider {
|
|
||||||
background-color: #fff;
|
|
||||||
color: var(--color-link);
|
|
||||||
padding: 10px;
|
|
||||||
cursor: pointer;
|
|
||||||
box-shadow: 0 0 2px 0 rgba(0,0,0,0.6);
|
|
||||||
position: absolute;
|
|
||||||
overflow: hidden;
|
|
||||||
transition: transform .2s ease;
|
|
||||||
transform: scaleY(0);
|
|
||||||
transform-origin: top;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--color-grey-light);
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-hider__label {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.table-hider--visible {
|
|
||||||
transform: scaleY(.4);
|
|
||||||
transition: none; /* TODO find better way to prevent transition on icons */
|
|
||||||
|
|
||||||
.fas {
|
|
||||||
transform: scaleY(2.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
transform: scaleY(1);
|
|
||||||
|
|
||||||
.fas {
|
|
||||||
transform: scaleY(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
[table-utils] {
|
|
||||||
max-width: 85vw;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
min-height: 0;
|
|
||||||
line-height: 1.4;
|
|
||||||
|
|
||||||
.table-pill {
|
|
||||||
background-color: var(--color-dark);
|
|
||||||
float: left;
|
|
||||||
color: #fff;
|
|
||||||
padding: 10px;
|
|
||||||
border-radius: 20px / 50%;
|
|
||||||
margin-right: 20px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
.table-hider__label {
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: bold;
|
|
||||||
margin-left: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:after {
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.hide-columns--hidden-cell {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
@ -1,5 +1,5 @@
|
|||||||
import { Utility } from '../../core/utility';
|
import { Utility } from '../../core/utility';
|
||||||
import './checkbox.scss';
|
import './checkbox.sass';
|
||||||
|
|
||||||
var CHECKBOX_CLASS = 'checkbox';
|
var CHECKBOX_CLASS = 'checkbox';
|
||||||
var CHECKBOX_INITIALIZED_CLASS = 'checkbox--initialized';
|
var CHECKBOX_INITIALIZED_CLASS = 'checkbox--initialized';
|
||||||
|
|||||||
71
frontend/src/utils/inputs/checkbox.sass
Normal file
71
frontend/src/utils/inputs/checkbox.sass
Normal file
@ -0,0 +1,71 @@
|
|||||||
|
// CUSTOM CHECKBOXES
|
||||||
|
// Completely replaces legacy checkbox
|
||||||
|
.checkbox [type='checkbox'], #lang-checkbox
|
||||||
|
position: fixed
|
||||||
|
top: -1px
|
||||||
|
left: -1px
|
||||||
|
width: 1px
|
||||||
|
height: 1px
|
||||||
|
overflow: hidden
|
||||||
|
display: none
|
||||||
|
|
||||||
|
.checkbox
|
||||||
|
position: relative
|
||||||
|
display: inline-block
|
||||||
|
|
||||||
|
label
|
||||||
|
display: block
|
||||||
|
height: 20px
|
||||||
|
width: 20px
|
||||||
|
background-color: #f3f3f3
|
||||||
|
box-shadow: inset 0 1px 2px 1px rgba(50, 50, 50, 0.05)
|
||||||
|
border: 2px solid var(--color-primary)
|
||||||
|
border-radius: 4px
|
||||||
|
color: white
|
||||||
|
cursor: pointer
|
||||||
|
|
||||||
|
label::before,
|
||||||
|
label::after
|
||||||
|
position: absolute
|
||||||
|
display: block
|
||||||
|
top: 12px
|
||||||
|
left: 8px
|
||||||
|
height: 2px
|
||||||
|
width: 8px
|
||||||
|
background-color: var(--color-font)
|
||||||
|
|
||||||
|
\:checked + label
|
||||||
|
background-color: var(--color-primary)
|
||||||
|
|
||||||
|
[type='checkbox']:focus + label
|
||||||
|
border-color: #3273dc
|
||||||
|
box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25)
|
||||||
|
outline: 0
|
||||||
|
|
||||||
|
\:checked + label::before,
|
||||||
|
:checked + label::after
|
||||||
|
content: ''
|
||||||
|
|
||||||
|
\:checked + label::before
|
||||||
|
background-color: white
|
||||||
|
transform: rotate(45deg)
|
||||||
|
left: 2px
|
||||||
|
top: 11px
|
||||||
|
|
||||||
|
\:checked + label::after
|
||||||
|
background-color: white
|
||||||
|
transform: rotate(-45deg)
|
||||||
|
top: 9px
|
||||||
|
width: 12px
|
||||||
|
left: 7px
|
||||||
|
|
||||||
|
[disabled] + label
|
||||||
|
pointer-events: none
|
||||||
|
border: none
|
||||||
|
opacity: 0.6
|
||||||
|
filter: grayscale(1)
|
||||||
|
|
||||||
|
// special treatment for checkboxes in table headers
|
||||||
|
th .checkbox
|
||||||
|
margin-right: 7px
|
||||||
|
vertical-align: bottom
|
||||||
@ -1,83 +0,0 @@
|
|||||||
|
|
||||||
/* CUSTOM CHECKBOXES */
|
|
||||||
/* Completely replaces legacy checkbox */
|
|
||||||
.checkbox [type='checkbox'], #lang-checkbox {
|
|
||||||
position: fixed;
|
|
||||||
top: -1px;
|
|
||||||
left: -1px;
|
|
||||||
width: 1px;
|
|
||||||
height: 1px;
|
|
||||||
overflow: hidden;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkbox {
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
|
|
||||||
label {
|
|
||||||
display: block;
|
|
||||||
height: 20px;
|
|
||||||
width: 20px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
box-shadow: inset 0 1px 2px 1px rgba(50, 50, 50, 0.05);
|
|
||||||
border: 2px solid var(--color-primary);
|
|
||||||
border-radius: 4px;
|
|
||||||
color: white;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
label::before,
|
|
||||||
label::after {
|
|
||||||
position: absolute;
|
|
||||||
display: block;
|
|
||||||
top: 12px;
|
|
||||||
left: 8px;
|
|
||||||
height: 2px;
|
|
||||||
width: 8px;
|
|
||||||
background-color: var(--color-font);
|
|
||||||
}
|
|
||||||
|
|
||||||
:checked + label {
|
|
||||||
background-color: var(--color-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
[type='checkbox']:focus + label {
|
|
||||||
border-color: #3273dc;
|
|
||||||
box-shadow: 0 0 0 0.125em rgba(50,115,220,.25);
|
|
||||||
outline: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
:checked + label::before,
|
|
||||||
:checked + label::after {
|
|
||||||
content: '';
|
|
||||||
}
|
|
||||||
|
|
||||||
:checked + label::before {
|
|
||||||
background-color: white;
|
|
||||||
transform: rotate(45deg);
|
|
||||||
left: 2px;
|
|
||||||
top: 11px;
|
|
||||||
}
|
|
||||||
|
|
||||||
:checked + label::after {
|
|
||||||
background-color: white;
|
|
||||||
transform: rotate(-45deg);
|
|
||||||
top: 9px;
|
|
||||||
width: 12px;
|
|
||||||
left: 7px;
|
|
||||||
}
|
|
||||||
|
|
||||||
[disabled] + label {
|
|
||||||
pointer-events: none;
|
|
||||||
border: none;
|
|
||||||
opacity: 0.6;
|
|
||||||
filter: grayscale(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* special treatment for checkboxes in table headers */
|
|
||||||
th .checkbox {
|
|
||||||
margin-right: 7px;
|
|
||||||
vertical-align: bottom;
|
|
||||||
}
|
|
||||||
@ -1,5 +1,5 @@
|
|||||||
import { Utility } from '../../core/utility';
|
import { Utility } from '../../core/utility';
|
||||||
import './file-input.scss';
|
import './file-input.sass';
|
||||||
|
|
||||||
const FILE_INPUT_CLASS = 'file-input';
|
const FILE_INPUT_CLASS = 'file-input';
|
||||||
const FILE_INPUT_INITIALIZED_CLASS = 'file-input--initialized';
|
const FILE_INPUT_INITIALIZED_CLASS = 'file-input--initialized';
|
||||||
|
|||||||
2
frontend/src/utils/inputs/file-input.sass
Normal file
2
frontend/src/utils/inputs/file-input.sass
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
.file-input__list:empty
|
||||||
|
display: none
|
||||||
@ -1,3 +0,0 @@
|
|||||||
.file-input__list:empty {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
@ -1,8 +1,8 @@
|
|||||||
import { Checkbox } from './checkbox';
|
import { Checkbox } from './checkbox';
|
||||||
import { FileInput } from './file-input';
|
import { FileInput } from './file-input';
|
||||||
|
|
||||||
import './inputs.scss';
|
import './inputs.sass';
|
||||||
import './radio.scss';
|
import './radio.sass';
|
||||||
|
|
||||||
export const InputUtils = [
|
export const InputUtils = [
|
||||||
Checkbox,
|
Checkbox,
|
||||||
|
|||||||
211
frontend/src/utils/inputs/inputs.sass
Normal file
211
frontend/src/utils/inputs/inputs.sass
Normal file
@ -0,0 +1,211 @@
|
|||||||
|
// GENERAL STYLES FOR FORMS
|
||||||
|
|
||||||
|
// FORM GROUPS
|
||||||
|
.form-section-title
|
||||||
|
color: var(--color-fontsec)
|
||||||
|
margin: 0
|
||||||
|
|
||||||
|
+ .form-group
|
||||||
|
margin-top: 11px
|
||||||
|
|
||||||
|
.form-group
|
||||||
|
position: relative
|
||||||
|
display: flex
|
||||||
|
display: grid
|
||||||
|
grid-template-columns: 1fr 3fr
|
||||||
|
grid-gap: 5px
|
||||||
|
justify-content: flex-start
|
||||||
|
align-items: flex-start
|
||||||
|
|
||||||
|
+ .form-group, + .form-section-legend, + .form-section-notification
|
||||||
|
margin-top: 11px
|
||||||
|
|
||||||
|
+ .form-section-title
|
||||||
|
margin-top: 40px
|
||||||
|
|
||||||
|
.form-section-legend
|
||||||
|
color: var(--color-fontsec)
|
||||||
|
margin: 7px 0
|
||||||
|
|
||||||
|
.form-group__hint, .form-section-title__hint
|
||||||
|
color: var(--color-fontsec)
|
||||||
|
font-size: 0.9rem
|
||||||
|
font-weight: 600
|
||||||
|
|
||||||
|
.form-section-title__hint
|
||||||
|
margin-top: 7px
|
||||||
|
|
||||||
|
+ .form-group
|
||||||
|
margin-top: 11px
|
||||||
|
|
||||||
|
.form-group-label
|
||||||
|
font-weight: 600
|
||||||
|
padding-top: 6px
|
||||||
|
|
||||||
|
.form-group-label__hint
|
||||||
|
margin-top: 7px
|
||||||
|
color: var(--color-fontsec)
|
||||||
|
font-size: 0.9rem
|
||||||
|
|
||||||
|
.form-group--required .form-group-label__caption::after, .form-group__required-marker::before
|
||||||
|
content: ' *'
|
||||||
|
color: var(--color-error)
|
||||||
|
font-weight: 600
|
||||||
|
|
||||||
|
.form-group--submit .form-group__input
|
||||||
|
grid-column: 2
|
||||||
|
|
||||||
|
@media (max-width: 768px)
|
||||||
|
.form-group--submit .form-group__input
|
||||||
|
grid-column: 1
|
||||||
|
|
||||||
|
.form-group--has-error
|
||||||
|
background-color: rgba(255, 0, 0, 0.1)
|
||||||
|
|
||||||
|
input, textarea
|
||||||
|
border-color: var(--color-error) !important
|
||||||
|
|
||||||
|
.form-error
|
||||||
|
display: block
|
||||||
|
|
||||||
|
.form-error
|
||||||
|
display: none
|
||||||
|
|
||||||
|
@media (max-width: 768px)
|
||||||
|
.form-group
|
||||||
|
grid-template-columns: 1fr
|
||||||
|
align-items: baseline
|
||||||
|
margin-top: 17px
|
||||||
|
flex-direction: column
|
||||||
|
|
||||||
|
// TEXT INPUTS
|
||||||
|
input[type='text'],
|
||||||
|
input[type='search'],
|
||||||
|
input[type='password'],
|
||||||
|
input[type='url'],
|
||||||
|
input[type='number'],
|
||||||
|
input[type='email'],
|
||||||
|
input[type*='date'],
|
||||||
|
input[type*='time'],
|
||||||
|
select
|
||||||
|
// from bulma.css
|
||||||
|
color: #363636
|
||||||
|
border-color: #dbdbdb
|
||||||
|
background-color: #f3f3f3
|
||||||
|
box-shadow: inset 0 1px 2px 1px rgba(50, 50, 50, 0.05)
|
||||||
|
width: 100%
|
||||||
|
max-width: 600px
|
||||||
|
align-items: center
|
||||||
|
border: 1px solid transparent
|
||||||
|
border-radius: 4px
|
||||||
|
font-size: 1rem
|
||||||
|
font-family: var(--font-base)
|
||||||
|
line-height: 1.5
|
||||||
|
padding: 4px 13px
|
||||||
|
|
||||||
|
input[type='number']
|
||||||
|
width: 100px
|
||||||
|
|
||||||
|
input[type*='date'],
|
||||||
|
input[type*='time'],
|
||||||
|
.flatpickr-input[type='text']
|
||||||
|
width: 50%
|
||||||
|
width: 250px
|
||||||
|
|
||||||
|
// BUTTON STYLE SEE default-layout.lucius
|
||||||
|
|
||||||
|
// TEXTAREAS
|
||||||
|
textarea
|
||||||
|
width: 100%
|
||||||
|
height: 170px
|
||||||
|
max-width: 600px
|
||||||
|
line-height: 1.5
|
||||||
|
color: #363636
|
||||||
|
background-color: #f3f3f3
|
||||||
|
padding: 4px 13px
|
||||||
|
font-size: 1rem
|
||||||
|
font-family: var(--font-base)
|
||||||
|
appearance: none
|
||||||
|
border: 1px solid #dbdbdb
|
||||||
|
border-radius: 2px
|
||||||
|
box-shadow: inset 0 1px 2px 1px rgba(50, 50, 50, 0.05)
|
||||||
|
vertical-align: top
|
||||||
|
|
||||||
|
// SHARED STATE RELATED STYLES
|
||||||
|
|
||||||
|
input,
|
||||||
|
select,
|
||||||
|
textarea
|
||||||
|
&:focus
|
||||||
|
border-color: #3273dc
|
||||||
|
box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25)
|
||||||
|
outline: 0
|
||||||
|
|
||||||
|
&[disabled]
|
||||||
|
background-color: #f3f3f3
|
||||||
|
color: #7a7a7a
|
||||||
|
box-shadow: none
|
||||||
|
border-color: #dbdbdb
|
||||||
|
|
||||||
|
&[readonly]
|
||||||
|
background-color: #f5f5f5
|
||||||
|
border-color: #dbdbdb
|
||||||
|
|
||||||
|
// OPTIONS
|
||||||
|
|
||||||
|
select[size="1"], select:not([size])
|
||||||
|
appearance: menulist
|
||||||
|
|
||||||
|
select,
|
||||||
|
option
|
||||||
|
font-size: 1rem
|
||||||
|
line-height: 1.5
|
||||||
|
padding: 4px 13px
|
||||||
|
border: 1px solid #dbdbdb
|
||||||
|
border-radius: 2px
|
||||||
|
outline: 0
|
||||||
|
color: #363636
|
||||||
|
min-width: 250px
|
||||||
|
width: auto
|
||||||
|
background-color: #f3f3f3
|
||||||
|
box-shadow: inset 0 1px 2px 1px rgba(50, 50, 50, 0.05)
|
||||||
|
|
||||||
|
@media (max-width: 425px)
|
||||||
|
select, option
|
||||||
|
width: 100%
|
||||||
|
|
||||||
|
// FILE INPUT
|
||||||
|
.file-input
|
||||||
|
display: none
|
||||||
|
|
||||||
|
.file-input__label
|
||||||
|
cursor: pointer
|
||||||
|
display: inline-block
|
||||||
|
background-color: var(--color-primary)
|
||||||
|
color: white
|
||||||
|
padding: 10px 17px
|
||||||
|
border-radius: 3px
|
||||||
|
|
||||||
|
.file-input__info
|
||||||
|
font-size: .9rem
|
||||||
|
font-style: italic
|
||||||
|
margin: 10px 0
|
||||||
|
color: var(--color-fontsec)
|
||||||
|
|
||||||
|
.file-input__list
|
||||||
|
margin-left: 40px
|
||||||
|
margin-top: 10px
|
||||||
|
font-weight: 600
|
||||||
|
|
||||||
|
// PREVIOUSLY UPLOADED FILES
|
||||||
|
|
||||||
|
.file-uploads-label
|
||||||
|
margin-bottom: 10px
|
||||||
|
|
||||||
|
.file-container
|
||||||
|
display: flex
|
||||||
|
align-items: center
|
||||||
|
margin-bottom: 10px
|
||||||
|
|
||||||
|
.checkbox
|
||||||
|
margin-left: 12px
|
||||||
@ -1,253 +0,0 @@
|
|||||||
/* GENERAL STYLES FOR FORMS */
|
|
||||||
|
|
||||||
/* FORM GROUPS */
|
|
||||||
.form-section-title {
|
|
||||||
color: var(--color-fontsec);
|
|
||||||
margin: 0;
|
|
||||||
|
|
||||||
+ .form-group {
|
|
||||||
margin-top: 11px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 3fr;
|
|
||||||
grid-gap: 5px;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: flex-start;
|
|
||||||
|
|
||||||
+ .form-group, + .form-section-legend, + .form-section-notification {
|
|
||||||
margin-top: 11px;
|
|
||||||
}
|
|
||||||
|
|
||||||
+ .form-section-title {
|
|
||||||
margin-top: 40px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-section-legend {
|
|
||||||
color: var(--color-fontsec);
|
|
||||||
margin: 7px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group__hint, .form-section-title__hint {
|
|
||||||
color: var(--color-fontsec);
|
|
||||||
font-size: 0.9rem;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-section-title__hint {
|
|
||||||
margin-top: 7px;
|
|
||||||
|
|
||||||
+ .form-group {
|
|
||||||
margin-top: 11px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group-label {
|
|
||||||
font-weight: 600;
|
|
||||||
padding-top: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group-label__hint {
|
|
||||||
margin-top: 7px;
|
|
||||||
color: var(--color-fontsec);
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group--required .form-group-label__caption::after, .form-group__required-marker::before {
|
|
||||||
content: ' *';
|
|
||||||
color: var(--color-error);
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group--submit .form-group__input {
|
|
||||||
grid-column: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.form-group--submit .form-group__input {
|
|
||||||
grid-column: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group--has-error {
|
|
||||||
background-color: rgba(255, 0, 0, 0.1);
|
|
||||||
|
|
||||||
input, textarea {
|
|
||||||
border-color: var(--color-error) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-error {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-error {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.form-group {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
align-items: baseline;
|
|
||||||
margin-top: 17px;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* TEXT INPUTS */
|
|
||||||
input[type='text'],
|
|
||||||
input[type='search'],
|
|
||||||
input[type='password'],
|
|
||||||
input[type='url'],
|
|
||||||
input[type='number'],
|
|
||||||
input[type='email'],
|
|
||||||
input[type*='date'],
|
|
||||||
input[type*='time'],
|
|
||||||
select {
|
|
||||||
/* from bulma.css */
|
|
||||||
color: #363636;
|
|
||||||
border-color: #dbdbdb;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
box-shadow: inset 0 1px 2px 1px rgba(50,50,50,.05);
|
|
||||||
|
|
||||||
width: 100%;
|
|
||||||
max-width: 600px;
|
|
||||||
align-items: center;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 1rem;
|
|
||||||
font-family: var(--font-base);
|
|
||||||
line-height: 1.5;
|
|
||||||
padding: 4px 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type='number'] {
|
|
||||||
width: 100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type*='date'],
|
|
||||||
input[type*='time'],
|
|
||||||
.flatpickr-input[type='text'] {
|
|
||||||
width: 50%;
|
|
||||||
width: 250px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* BUTTON STYLE SEE default-layout.lucius */
|
|
||||||
|
|
||||||
/* TEXTAREAS */
|
|
||||||
textarea {
|
|
||||||
width: 100%;
|
|
||||||
height: 170px;
|
|
||||||
max-width: 600px;
|
|
||||||
line-height: 1.5;
|
|
||||||
color: #363636;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
padding: 4px 13px;
|
|
||||||
font-size: 1rem;
|
|
||||||
font-family: var(--font-base);
|
|
||||||
appearance: none;
|
|
||||||
border: 1px solid #dbdbdb;
|
|
||||||
border-radius: 2px;
|
|
||||||
box-shadow: inset 0 1px 2px 1px rgba(50,50,50,.05);
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* SHARED STATE RELATED STYLES */
|
|
||||||
|
|
||||||
input,
|
|
||||||
select,
|
|
||||||
textarea {
|
|
||||||
&:focus {
|
|
||||||
border-color: #3273dc;
|
|
||||||
box-shadow: 0 0 0 0.125em rgba(50,115,220,.25);
|
|
||||||
outline: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&[disabled] {
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
color: #7a7a7a;
|
|
||||||
box-shadow: none;
|
|
||||||
border-color: #dbdbdb;
|
|
||||||
}
|
|
||||||
|
|
||||||
&[readonly] {
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
border-color: #dbdbdb;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* OPTIONS */
|
|
||||||
|
|
||||||
select[size = "1"], select:not([size]) {
|
|
||||||
appearance: menulist;
|
|
||||||
}
|
|
||||||
|
|
||||||
select,
|
|
||||||
option {
|
|
||||||
font-size: 1rem;
|
|
||||||
line-height: 1.5;
|
|
||||||
padding: 4px 13px;
|
|
||||||
border: 1px solid #dbdbdb;
|
|
||||||
border-radius: 2px;
|
|
||||||
outline: 0;
|
|
||||||
color: #363636;
|
|
||||||
min-width: 250px;
|
|
||||||
width: auto;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
box-shadow: inset 0 1px 2px 1px rgba(50,50,50,.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 425px) {
|
|
||||||
|
|
||||||
select, option {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* FILE INPUT */
|
|
||||||
.file-input {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.file-input__label {
|
|
||||||
cursor: pointer;
|
|
||||||
display: inline-block;
|
|
||||||
background-color: var(--color-primary);
|
|
||||||
color: white;
|
|
||||||
padding: 10px 17px;
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.file-input__info {
|
|
||||||
font-size: .9rem;
|
|
||||||
font-style: italic;
|
|
||||||
margin: 10px 0;
|
|
||||||
color: var(--color-fontsec);
|
|
||||||
}
|
|
||||||
|
|
||||||
.file-input__list {
|
|
||||||
margin-left: 40px;
|
|
||||||
margin-top: 10px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* PREVIOUSLY UPLOADED FILES */
|
|
||||||
|
|
||||||
.file-uploads-label {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.file-container {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
|
|
||||||
.checkbox {
|
|
||||||
margin-left: 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
55
frontend/src/utils/inputs/radio.sass
Normal file
55
frontend/src/utils/inputs/radio.sass
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
// CUSTOM RADIO BOXES
|
||||||
|
// Completely replaces native radiobox
|
||||||
|
|
||||||
|
.radio-group
|
||||||
|
display: flex
|
||||||
|
|
||||||
|
.radio
|
||||||
|
position: relative
|
||||||
|
display: inline-block
|
||||||
|
|
||||||
|
[type='radio']
|
||||||
|
position: fixed
|
||||||
|
top: -1px
|
||||||
|
left: -1px
|
||||||
|
width: 1px
|
||||||
|
height: 1px
|
||||||
|
overflow: hidden
|
||||||
|
|
||||||
|
label
|
||||||
|
display: block
|
||||||
|
height: 34px
|
||||||
|
min-width: 42px
|
||||||
|
line-height: 34px
|
||||||
|
text-align: center
|
||||||
|
padding: 0 13px
|
||||||
|
background-color: #f3f3f3
|
||||||
|
box-shadow: inset 2px 1px 2px 1px rgba(50, 50, 50, 0.05)
|
||||||
|
color: var(--color-font)
|
||||||
|
cursor: pointer
|
||||||
|
|
||||||
|
\:checked + label
|
||||||
|
background-color: var(--color-primary)
|
||||||
|
color: var(--color-lightwhite)
|
||||||
|
box-shadow: inset -2px -1px 2px 1px rgba(255, 255, 255, 0.15)
|
||||||
|
|
||||||
|
\:focus + label
|
||||||
|
border-color: #3273dc
|
||||||
|
box-shadow: 0 0 0.125em 0 rgba(50, 115, 220, 0.8)
|
||||||
|
outline: 0
|
||||||
|
|
||||||
|
[disabled] + label
|
||||||
|
pointer-events: none
|
||||||
|
border: none
|
||||||
|
opacity: 0.6
|
||||||
|
filter: grayscale(1)
|
||||||
|
|
||||||
|
.radio:first-child
|
||||||
|
label
|
||||||
|
border-top-left-radius: 4px
|
||||||
|
border-bottom-left-radius: 4px
|
||||||
|
|
||||||
|
.radio:last-child
|
||||||
|
label
|
||||||
|
border-top-right-radius: 4px
|
||||||
|
border-bottom-right-radius: 4px
|
||||||
@ -1,66 +0,0 @@
|
|||||||
/* CUSTOM RADIO BOXES */
|
|
||||||
/* Completely replaces native radiobox */
|
|
||||||
|
|
||||||
.radio-group {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.radio {
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
|
|
||||||
[type='radio'] {
|
|
||||||
position: fixed;
|
|
||||||
top: -1px;
|
|
||||||
left: -1px;
|
|
||||||
width: 1px;
|
|
||||||
height: 1px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
label {
|
|
||||||
display: block;
|
|
||||||
height: 34px;
|
|
||||||
min-width: 42px;
|
|
||||||
line-height: 34px;
|
|
||||||
text-align: center;
|
|
||||||
padding: 0 13px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
box-shadow: inset 2px 1px 2px 1px rgba(50, 50, 50, 0.05);
|
|
||||||
color: var(--color-font);
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
:checked + label {
|
|
||||||
background-color: var(--color-primary);
|
|
||||||
color: var(--color-lightwhite);
|
|
||||||
box-shadow: inset -2px -1px 2px 1px rgba(255, 255, 255, 0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
:focus + label {
|
|
||||||
border-color: #3273dc;
|
|
||||||
box-shadow: 0 0 0.125em 0 rgba(50,115,220,0.8);
|
|
||||||
outline: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
[disabled] + label {
|
|
||||||
pointer-events: none;
|
|
||||||
border: none;
|
|
||||||
opacity: 0.6;
|
|
||||||
filter: grayscale(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.radio:first-child {
|
|
||||||
label {
|
|
||||||
border-top-left-radius: 4px;
|
|
||||||
border-bottom-left-radius: 4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.radio:last-child {
|
|
||||||
label {
|
|
||||||
border-top-right-radius: 4px;
|
|
||||||
border-bottom-right-radius: 4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,6 +1,6 @@
|
|||||||
import { Utility } from '../../core/utility';
|
import { Utility } from '../../core/utility';
|
||||||
import { Datepicker } from '../form/datepicker';
|
import { Datepicker } from '../form/datepicker';
|
||||||
import './mass-input.scss';
|
import './mass-input.sass';
|
||||||
|
|
||||||
const MASS_INPUT_CELL_SELECTOR = '.massinput__cell';
|
const MASS_INPUT_CELL_SELECTOR = '.massinput__cell';
|
||||||
const MASS_INPUT_ADD_CELL_SELECTOR = '.massinput__cell--add';
|
const MASS_INPUT_ADD_CELL_SELECTOR = '.massinput__cell--add';
|
||||||
|
|||||||
14
frontend/src/utils/mass-input/mass-input.sass
Normal file
14
frontend/src/utils/mass-input/mass-input.sass
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
.massinput-list__wrapper, .massinput-list__cell
|
||||||
|
display: grid
|
||||||
|
grid: auto / auto 50px
|
||||||
|
max-width: 600px
|
||||||
|
grid-gap: 7px
|
||||||
|
|
||||||
|
.massinput-list__field
|
||||||
|
grid-column: 1
|
||||||
|
|
||||||
|
.massinput-list__add, .massinput-list__delete
|
||||||
|
grid-column: 2
|
||||||
|
|
||||||
|
.massinput-list__cell
|
||||||
|
grid-column: 1 / 3
|
||||||
@ -1,18 +0,0 @@
|
|||||||
.massinput-list__wrapper, .massinput-list__cell {
|
|
||||||
display: grid;
|
|
||||||
grid: auto / auto 50px;
|
|
||||||
max-width: 600px;
|
|
||||||
grid-gap: 7px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.massinput-list__field {
|
|
||||||
grid-column: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.massinput-list__add, .massinput-list__delete {
|
|
||||||
grid-column: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.massinput-list__cell {
|
|
||||||
grid-column: 1 / 3;
|
|
||||||
}
|
|
||||||
@ -1,5 +1,5 @@
|
|||||||
import { Utility } from '../../core/utility';
|
import { Utility } from '../../core/utility';
|
||||||
import './modal.scss';
|
import './modal.sass';
|
||||||
|
|
||||||
const MODAL_HEADERS = {
|
const MODAL_HEADERS = {
|
||||||
'Is-Modal': 'True',
|
'Is-Modal': 'True',
|
||||||
|
|||||||
103
frontend/src/utils/modal/modal.sass
Normal file
103
frontend/src/utils/modal/modal.sass
Normal file
@ -0,0 +1,103 @@
|
|||||||
|
@use "../../common" as *
|
||||||
|
|
||||||
|
.modals-wrapper
|
||||||
|
position: fixed
|
||||||
|
left: 0
|
||||||
|
top: 0
|
||||||
|
width: 100%
|
||||||
|
height: 100%
|
||||||
|
z-index: -1
|
||||||
|
display: flex
|
||||||
|
align-items: center
|
||||||
|
justify-content: center
|
||||||
|
|
||||||
|
&.modals-wrapper--open
|
||||||
|
z-index: 200
|
||||||
|
width: 100%
|
||||||
|
height: 100%
|
||||||
|
|
||||||
|
.modal
|
||||||
|
position: relative
|
||||||
|
display: none
|
||||||
|
background-color: rgba(255, 255, 255, 1)
|
||||||
|
min-width: 60vw
|
||||||
|
max-width: 70vw
|
||||||
|
min-height: 100px
|
||||||
|
max-height: calc(100vh - 30px)
|
||||||
|
border-radius: 2px
|
||||||
|
z-index: -1
|
||||||
|
color: var(--color-font)
|
||||||
|
overflow: auto
|
||||||
|
overscroll-behavior: contain
|
||||||
|
pointer-events: none
|
||||||
|
opacity: 0
|
||||||
|
|
||||||
|
&.modal--open
|
||||||
|
display: flex
|
||||||
|
opacity: 1
|
||||||
|
pointer-events: auto
|
||||||
|
z-index: 200
|
||||||
|
transition: opacity .2s .1s ease-in-out, transform .3s ease-in-out
|
||||||
|
|
||||||
|
@media (max-width: 1024px)
|
||||||
|
.modal
|
||||||
|
min-width: 80vw
|
||||||
|
|
||||||
|
@media (max-width: 768px)
|
||||||
|
.modal
|
||||||
|
min-width: 90vw
|
||||||
|
|
||||||
|
@media (max-width: 425px)
|
||||||
|
.modal
|
||||||
|
min-width: calc(100vw - 20px)
|
||||||
|
|
||||||
|
.modal__overlay
|
||||||
|
position: fixed
|
||||||
|
left: 0
|
||||||
|
top: 0
|
||||||
|
height: 100%
|
||||||
|
width: 100%
|
||||||
|
background-color: transparent
|
||||||
|
z-index: -1
|
||||||
|
transition: all .2s ease
|
||||||
|
display: none
|
||||||
|
|
||||||
|
&.modal__overlay--open
|
||||||
|
display: block
|
||||||
|
z-index: 199
|
||||||
|
opacity: 1
|
||||||
|
background-color: rgba(0, 0, 0, 0.4)
|
||||||
|
|
||||||
|
.modal__trigger
|
||||||
|
cursor: pointer
|
||||||
|
|
||||||
|
div.modal__trigger
|
||||||
|
display: inline-block
|
||||||
|
|
||||||
|
.modal__trigger-label
|
||||||
|
font-style: italic
|
||||||
|
text-decoration: underline
|
||||||
|
|
||||||
|
.modal__closer
|
||||||
|
position: absolute
|
||||||
|
top: 20px
|
||||||
|
right: 20px
|
||||||
|
display: flex
|
||||||
|
align-items: center
|
||||||
|
justify-content: center
|
||||||
|
width: 30px
|
||||||
|
height: 30px
|
||||||
|
background-color: var(--color-darker)
|
||||||
|
border-radius: 2px
|
||||||
|
cursor: pointer
|
||||||
|
z-index: 20
|
||||||
|
|
||||||
|
&::before
|
||||||
|
@extend .fas
|
||||||
|
|
||||||
|
content: fa-content($fa-var-times)
|
||||||
|
color: white
|
||||||
|
|
||||||
|
.modal__content
|
||||||
|
margin: 20px 40px
|
||||||
|
width: 100%
|
||||||
@ -1,120 +0,0 @@
|
|||||||
@use "../../common" as *;
|
|
||||||
|
|
||||||
.modals-wrapper {
|
|
||||||
position: fixed;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
z-index: -1;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
&.modals-wrapper--open {
|
|
||||||
z-index: 200;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal {
|
|
||||||
position: relative;
|
|
||||||
display: none;
|
|
||||||
background-color: rgba(255, 255, 255, 1);
|
|
||||||
min-width: 60vw;
|
|
||||||
max-width: 70vw;
|
|
||||||
min-height: 100px;
|
|
||||||
max-height: calc(100vh - 30px);
|
|
||||||
border-radius: 2px;
|
|
||||||
z-index: -1;
|
|
||||||
color: var(--color-font);
|
|
||||||
overflow: auto;
|
|
||||||
overscroll-behavior: contain;
|
|
||||||
pointer-events: none;
|
|
||||||
opacity: 0;
|
|
||||||
|
|
||||||
&.modal--open {
|
|
||||||
display: flex;
|
|
||||||
opacity: 1;
|
|
||||||
pointer-events: auto;
|
|
||||||
z-index: 200;
|
|
||||||
transition:
|
|
||||||
opacity .2s .1s ease-in-out,
|
|
||||||
transform .3s ease-in-out;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
.modal {
|
|
||||||
min-width: 80vw;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.modal {
|
|
||||||
min-width: 90vw;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (max-width: 425px) {
|
|
||||||
.modal {
|
|
||||||
min-width: calc(100vw - 20px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal__overlay {
|
|
||||||
position: fixed;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
background-color: transparent;
|
|
||||||
z-index: -1;
|
|
||||||
transition: all .2s ease;
|
|
||||||
display: none;
|
|
||||||
|
|
||||||
&.modal__overlay--open {
|
|
||||||
display: block;
|
|
||||||
z-index: 199;
|
|
||||||
opacity: 1;
|
|
||||||
background-color: rgba(0, 0, 0, 0.4);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal__trigger {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.modal__trigger {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal__trigger-label {
|
|
||||||
font-style: italic;
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal__closer {
|
|
||||||
position: absolute;
|
|
||||||
top: 20px;
|
|
||||||
right: 20px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
background-color: var(--color-darker);
|
|
||||||
border-radius: 2px;
|
|
||||||
cursor: pointer;
|
|
||||||
z-index: 20;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
@extend .fas;
|
|
||||||
content: fa-content($fa-var-times);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal__content {
|
|
||||||
margin: 20px 40px;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
@ -1,5 +1,5 @@
|
|||||||
import { Utility } from '../../core/utility';
|
import { Utility } from '../../core/utility';
|
||||||
import './navbar.scss';
|
import './navbar.sass';
|
||||||
|
|
||||||
|
|
||||||
export const LANGUAGE_SELECT_UTIL_SELECTOR = '[uw-language-select]';
|
export const LANGUAGE_SELECT_UTIL_SELECTOR = '[uw-language-select]';
|
||||||
|
|||||||
228
frontend/src/utils/navbar/navbar.sass
Normal file
228
frontend/src/utils/navbar/navbar.sass
Normal file
@ -0,0 +1,228 @@
|
|||||||
|
.navbar-container
|
||||||
|
position: relative
|
||||||
|
|
||||||
|
.navbar-shadow
|
||||||
|
position: fixed
|
||||||
|
right: 0
|
||||||
|
top: 0
|
||||||
|
height: var(--header-height-collapsed)
|
||||||
|
width: 20px
|
||||||
|
z-index: 50
|
||||||
|
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.4), transparent)
|
||||||
|
transition: height 0.2s cubic-bezier(0.03, 0.43, 0.58, 1)
|
||||||
|
|
||||||
|
@media (min-width: 768px)
|
||||||
|
.navbar-shadow
|
||||||
|
height: var(--header-height)
|
||||||
|
|
||||||
|
@media (min-width: 1025px)
|
||||||
|
.navbar-shadow
|
||||||
|
display: none
|
||||||
|
|
||||||
|
.navbar
|
||||||
|
position: fixed
|
||||||
|
display: flex
|
||||||
|
flex-direction: row
|
||||||
|
align-items: center
|
||||||
|
justify-content: flex-start
|
||||||
|
right: 0
|
||||||
|
top: 0
|
||||||
|
left: var(--asidenav-width-xl)
|
||||||
|
height: var(--header-height)
|
||||||
|
background-color: var(--color-primary)
|
||||||
|
color: white
|
||||||
|
z-index: 20
|
||||||
|
box-shadow: 0 0 4px rgba(0, 0, 0, 0.2)
|
||||||
|
overflow: auto
|
||||||
|
transition: all 0.2s cubic-bezier(0.03, 0.43, 0.58, 1)
|
||||||
|
|
||||||
|
@media (max-width: 1199px)
|
||||||
|
.navbar
|
||||||
|
left: var(--asidenav-width-lg)
|
||||||
|
|
||||||
|
@media (max-width: 768px)
|
||||||
|
.navbar
|
||||||
|
left: 0
|
||||||
|
|
||||||
|
// links
|
||||||
|
.navbar__link-wrapper
|
||||||
|
display: flex
|
||||||
|
flex-direction: column
|
||||||
|
justify-content: flex-end
|
||||||
|
align-items: center
|
||||||
|
height: 80px
|
||||||
|
min-width: 90px
|
||||||
|
color: var(--color-lightwhite)
|
||||||
|
transition: height 0.2s cubic-bezier(0.03, 0.43, 0.58, 1)
|
||||||
|
overflow: hidden
|
||||||
|
cursor: pointer
|
||||||
|
|
||||||
|
.navbar__link-icon
|
||||||
|
opacity: 0.7
|
||||||
|
transition: opacity 0.2s ease
|
||||||
|
margin-bottom: 7px
|
||||||
|
|
||||||
|
.navbar__link-label
|
||||||
|
transition: opacity .2s ease
|
||||||
|
padding: 2px 4px
|
||||||
|
text-transform: uppercase
|
||||||
|
font-weight: 600
|
||||||
|
|
||||||
|
@media (min-width: 769px)
|
||||||
|
.navbar__link-wrapper
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.7)
|
||||||
|
|
||||||
|
@media (max-width: 768px)
|
||||||
|
.navbar__link-wrapper
|
||||||
|
box-shadow: none
|
||||||
|
min-width: 0
|
||||||
|
align-items: center
|
||||||
|
justify-content: center
|
||||||
|
|
||||||
|
.navbar__link-label
|
||||||
|
padding: 0 7px
|
||||||
|
|
||||||
|
.navbar__link-icon
|
||||||
|
transform: scale(0.65)
|
||||||
|
margin-bottom: 0
|
||||||
|
|
||||||
|
// navbar list
|
||||||
|
.navbar__list
|
||||||
|
white-space: nowrap
|
||||||
|
|
||||||
|
+ .navbar__list
|
||||||
|
margin-left: 12px
|
||||||
|
|
||||||
|
@media (min-width: 769px)
|
||||||
|
.navbar__list:last-of-type
|
||||||
|
padding-right: 40px
|
||||||
|
|
||||||
|
@media (max-width: 768px)
|
||||||
|
.navbar__list
|
||||||
|
+ .navbar__list
|
||||||
|
margin-left: 0
|
||||||
|
padding-right: 40px
|
||||||
|
|
||||||
|
// list item
|
||||||
|
.navbar__list-item
|
||||||
|
position: relative
|
||||||
|
transition: background-color .1s ease
|
||||||
|
|
||||||
|
&:not(.navbar__list-item--favorite) + .navbar__list-item--lang-wrapper
|
||||||
|
margin-left: 12px
|
||||||
|
|
||||||
|
&:not(.navbar__list-item--favorite) + .navbar__list-item
|
||||||
|
margin-left: 12px
|
||||||
|
|
||||||
|
@media (max-width: 500px)
|
||||||
|
.navbar__list-item
|
||||||
|
min-width: 60px
|
||||||
|
|
||||||
|
&:not(.navbar__list-item--favorite) + .navbar__list-item
|
||||||
|
margin-left: 0
|
||||||
|
|
||||||
|
&:not(.navbar__list-item--favorite) + .navbar__list-item--lang-wrapper
|
||||||
|
margin-left: 0
|
||||||
|
|
||||||
|
.navbar__list-left
|
||||||
|
flex: 5
|
||||||
|
padding-left: 40px
|
||||||
|
|
||||||
|
@media (max-width: 768px)
|
||||||
|
.navbar__list-left
|
||||||
|
padding-left: 0
|
||||||
|
|
||||||
|
// "Favorites" list item, only visible on small screens and logged in
|
||||||
|
.navbar__list-item
|
||||||
|
&.navbar__list-item--favorite
|
||||||
|
display: none
|
||||||
|
|
||||||
|
.navbar__list-item--favorite
|
||||||
|
display: none
|
||||||
|
background-color: var(--color-primary)
|
||||||
|
|
||||||
|
.logged-in
|
||||||
|
.navbar__list
|
||||||
|
li.navbar__list-item--favorite,
|
||||||
|
.navbar__list-item--favorite
|
||||||
|
display: inline-block
|
||||||
|
|
||||||
|
@media (min-width: 426px)
|
||||||
|
.logged-in
|
||||||
|
.navbar__list
|
||||||
|
.navbar__list-item--favorite
|
||||||
|
display: none !important
|
||||||
|
|
||||||
|
.navbar__list-item--active
|
||||||
|
background-color: var(--color-lightwhite)
|
||||||
|
color: var(--color-dark)
|
||||||
|
|
||||||
|
.navbar__link-wrapper
|
||||||
|
color: var(--color-dark)
|
||||||
|
|
||||||
|
.navbar__list-item--active .navbar__link-wrapper
|
||||||
|
color: var(--color-dark)
|
||||||
|
|
||||||
|
.navbar .navbar__list-item:not(.navbar__list-item--active):not(.navbar__list-item--favorite):hover .navbar__link-wrapper, #lang-checkbox:checked ~ * .navbar__link-wrapper
|
||||||
|
background-color: var(--color-dark)
|
||||||
|
color: var(--color-lightwhite)
|
||||||
|
|
||||||
|
.navbar__link-icon
|
||||||
|
opacity: 1
|
||||||
|
|
||||||
|
// sticky state
|
||||||
|
.navbar--sticky
|
||||||
|
height: var(--header-height-collapsed)
|
||||||
|
z-index: 100
|
||||||
|
|
||||||
|
.navbar__link-wrapper
|
||||||
|
height: var(--header-height-collapsed)
|
||||||
|
|
||||||
|
.navbar__pushdown
|
||||||
|
height: var(--header-height)
|
||||||
|
transition: height 0.2s cubic-bezier(0.03, 0.43, 0.58, 1)
|
||||||
|
|
||||||
|
.navbar--sticky + .navbar__pushdown
|
||||||
|
display: block
|
||||||
|
height: var(--header-height-collapsed)
|
||||||
|
|
||||||
|
@media (max-width: 768px)
|
||||||
|
.navbar,
|
||||||
|
.navbar__pushdown
|
||||||
|
height: var(--header-height-collapsed)
|
||||||
|
|
||||||
|
.navbar__link-wrapper
|
||||||
|
height: var(--header-height-collapsed)
|
||||||
|
|
||||||
|
@media (max-height: 500px)
|
||||||
|
.navbar,
|
||||||
|
.navbar__pushdown
|
||||||
|
height: var(--header-height-collapsed)
|
||||||
|
|
||||||
|
.navbar__link-wrapper
|
||||||
|
height: var(--header-height-collapsed)
|
||||||
|
|
||||||
|
#lang-dropdown
|
||||||
|
display: none
|
||||||
|
position: fixed
|
||||||
|
top: var(--header-height)
|
||||||
|
right: 0
|
||||||
|
min-width: 200px
|
||||||
|
z-index: 10
|
||||||
|
background-color: white
|
||||||
|
border-radius: 2px
|
||||||
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3)
|
||||||
|
|
||||||
|
select
|
||||||
|
display: block
|
||||||
|
|
||||||
|
button
|
||||||
|
display: block
|
||||||
|
width: 100%
|
||||||
|
|
||||||
|
#lang-checkbox:checked ~ #lang-dropdown
|
||||||
|
display: block
|
||||||
|
|
||||||
|
@media (max-width: 768px)
|
||||||
|
#lang-dropdown
|
||||||
|
top: var(--header-height-collapsed)
|
||||||
@ -1,305 +0,0 @@
|
|||||||
.navbar-container {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-shadow {
|
|
||||||
position: fixed;
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
height: var(--header-height-collapsed);
|
|
||||||
width: 20px;
|
|
||||||
z-index: 50;
|
|
||||||
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.4), transparent);
|
|
||||||
transition: height .2s cubic-bezier(0.03, 0.43, 0.58, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
|
|
||||||
.navbar-shadow {
|
|
||||||
height: var(--header-height);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1025px) {
|
|
||||||
|
|
||||||
.navbar-shadow {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar {
|
|
||||||
position: fixed;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-start;
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
left: var(--asidenav-width-xl);
|
|
||||||
height: var(--header-height);
|
|
||||||
background-color: var(--color-primary);
|
|
||||||
color: white;
|
|
||||||
z-index: 20;
|
|
||||||
box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
|
|
||||||
overflow: auto;
|
|
||||||
transition: all .2s cubic-bezier(0.03, 0.43, 0.58, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1199px) {
|
|
||||||
.navbar {
|
|
||||||
left: var(--asidenav-width-lg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.navbar {
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* links */
|
|
||||||
.navbar__link-wrapper {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: flex-end;
|
|
||||||
align-items: center;
|
|
||||||
height: 80px;
|
|
||||||
min-width: 90px;
|
|
||||||
color: var(--color-lightwhite);
|
|
||||||
transition: height .2s cubic-bezier(0.03, 0.43, 0.58, 1);
|
|
||||||
overflow: hidden;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar__link-icon {
|
|
||||||
opacity: 0.7;
|
|
||||||
transition: opacity 0.2s ease;
|
|
||||||
margin-bottom: 7px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar__link-label {
|
|
||||||
transition: opacity .2s ease;
|
|
||||||
padding: 2px 4px;
|
|
||||||
text-transform: uppercase;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 769px) {
|
|
||||||
|
|
||||||
.navbar__link-wrapper {
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.7);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
|
|
||||||
.navbar__link-wrapper {
|
|
||||||
box-shadow: none;
|
|
||||||
min-width: 0;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar__link-label {
|
|
||||||
padding: 0 7px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar__link-icon {
|
|
||||||
transform: scale(0.65);
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* navbar list */
|
|
||||||
.navbar__list {
|
|
||||||
white-space: nowrap;
|
|
||||||
|
|
||||||
+ .navbar__list {
|
|
||||||
margin-left: 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 769px) {
|
|
||||||
|
|
||||||
.navbar__list:last-of-type {
|
|
||||||
padding-right: 40px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
|
|
||||||
.navbar__list {
|
|
||||||
+ .navbar__list {
|
|
||||||
margin-left: 0;
|
|
||||||
padding-right: 40px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* list item */
|
|
||||||
.navbar__list-item {
|
|
||||||
position: relative;
|
|
||||||
transition: background-color .1s ease;
|
|
||||||
&:not(.navbar__list-item--favorite) + .navbar__list-item--lang-wrapper {
|
|
||||||
margin-left: 12px;
|
|
||||||
}
|
|
||||||
&:not(.navbar__list-item--favorite) + .navbar__list-item {
|
|
||||||
margin-left: 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 500px) {
|
|
||||||
|
|
||||||
.navbar__list-item {
|
|
||||||
min-width: 60px;
|
|
||||||
|
|
||||||
&:not(.navbar__list-item--favorite) + .navbar__list-item {
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
&:not(.navbar__list-item--favorite) + .navbar__list-item--lang-wrapper {
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar__list-left {
|
|
||||||
flex: 5;
|
|
||||||
padding-left: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
|
|
||||||
.navbar__list-left {
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* "Favorites" list item, only visible on small screens and logged in */
|
|
||||||
.navbar__list-item {
|
|
||||||
&.navbar__list-item--favorite {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.navbar__list-item--favorite {
|
|
||||||
display: none;
|
|
||||||
background-color: var(--color-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.logged-in {
|
|
||||||
.navbar__list {
|
|
||||||
li.navbar__list-item--favorite,
|
|
||||||
.navbar__list-item--favorite {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 426px) {
|
|
||||||
|
|
||||||
.logged-in {
|
|
||||||
.navbar__list {
|
|
||||||
.navbar__list-item--favorite {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar__list-item--active {
|
|
||||||
background-color: var(--color-lightwhite);
|
|
||||||
color: var(--color-dark);
|
|
||||||
|
|
||||||
.navbar__link-wrapper {
|
|
||||||
color: var(--color-dark);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar__list-item--active .navbar__link-wrapper {
|
|
||||||
color: var(--color-dark);
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar .navbar__list-item:not(.navbar__list-item--active):not(.navbar__list-item--favorite):hover .navbar__link-wrapper, #lang-checkbox:checked ~ * .navbar__link-wrapper {
|
|
||||||
background-color: var(--color-dark);
|
|
||||||
color: var(--color-lightwhite);
|
|
||||||
|
|
||||||
.navbar__link-icon {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* sticky state */
|
|
||||||
.navbar--sticky {
|
|
||||||
height: var(--header-height-collapsed);
|
|
||||||
z-index: 100;
|
|
||||||
|
|
||||||
.navbar__link-wrapper {
|
|
||||||
height: var(--header-height-collapsed);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar__pushdown {
|
|
||||||
height: var(--header-height);
|
|
||||||
transition: height .2s cubic-bezier(0.03, 0.43, 0.58, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar--sticky + .navbar__pushdown {
|
|
||||||
display: block;
|
|
||||||
height: var(--header-height-collapsed);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
|
|
||||||
.navbar,
|
|
||||||
.navbar__pushdown {
|
|
||||||
height: var(--header-height-collapsed);
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar__link-wrapper {
|
|
||||||
height: var(--header-height-collapsed);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-height: 500px) {
|
|
||||||
|
|
||||||
.navbar,
|
|
||||||
.navbar__pushdown {
|
|
||||||
height: var(--header-height-collapsed);
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar__link-wrapper {
|
|
||||||
height: var(--header-height-collapsed);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
#lang-dropdown {
|
|
||||||
display: none;
|
|
||||||
|
|
||||||
position: fixed;
|
|
||||||
top: var(--header-height);
|
|
||||||
right: 0;
|
|
||||||
min-width: 200px;
|
|
||||||
z-index: 10;
|
|
||||||
background-color: white;
|
|
||||||
border-radius: 2px;
|
|
||||||
box-shadow: 0 0 10px rgba(0,0,0,0.3);
|
|
||||||
|
|
||||||
select {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#lang-checkbox:checked ~ #lang-dropdown {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
#lang-dropdown {
|
|
||||||
top: var(--header-height-collapsed);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,6 +1,6 @@
|
|||||||
import { Utility } from '../../core/utility';
|
import { Utility } from '../../core/utility';
|
||||||
import { StorageManager, LOCATION } from '../../lib/storage-manager/storage-manager';
|
import { StorageManager, LOCATION } from '../../lib/storage-manager/storage-manager';
|
||||||
import './show-hide.scss';
|
import './show-hide.sass';
|
||||||
|
|
||||||
const SHOW_HIDE_LOCAL_STORAGE_KEY = 'SHOW_HIDE';
|
const SHOW_HIDE_LOCAL_STORAGE_KEY = 'SHOW_HIDE';
|
||||||
const SHOW_HIDE_INITIALIZED_CLASS = 'show-hide--initialized';
|
const SHOW_HIDE_INITIALIZED_CLASS = 'show-hide--initialized';
|
||||||
|
|||||||
44
frontend/src/utils/show-hide/show-hide.sass
Normal file
44
frontend/src/utils/show-hide/show-hide.sass
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
$show-hide-toggle-size: 6px
|
||||||
|
|
||||||
|
.show-hide__toggle
|
||||||
|
position: relative
|
||||||
|
cursor: pointer
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
background-color: var(--color-grey-lighter)
|
||||||
|
cursor: pointer
|
||||||
|
|
||||||
|
.show-hide__toggle::before
|
||||||
|
content: ''
|
||||||
|
position: absolute
|
||||||
|
width: $show-hide-toggle-size
|
||||||
|
height: $show-hide-toggle-size
|
||||||
|
left: -15px
|
||||||
|
top: 50%
|
||||||
|
color: var(--color-primary)
|
||||||
|
border-right: 2px solid currentColor
|
||||||
|
border-top: 2px solid currentColor
|
||||||
|
transition: transform .2s ease
|
||||||
|
transform: translateY(-50%) rotate(-45deg)
|
||||||
|
|
||||||
|
@media (max-width: 768px)
|
||||||
|
left: auto
|
||||||
|
right: 20px
|
||||||
|
color: var(--color-font)
|
||||||
|
|
||||||
|
.show-hide__toggle--right::before
|
||||||
|
left: auto
|
||||||
|
right: 20px
|
||||||
|
color: var(--color-font)
|
||||||
|
|
||||||
|
.show-hide--collapsed
|
||||||
|
.show-hide__toggle::before
|
||||||
|
transform: translateY(-50%) rotate(135deg)
|
||||||
|
|
||||||
|
& > :not(.show-hide__toggle)
|
||||||
|
display: block
|
||||||
|
height: 0
|
||||||
|
margin: 0
|
||||||
|
padding: 0
|
||||||
|
max-height: 0
|
||||||
|
overflow-y: hidden
|
||||||
@ -1,54 +0,0 @@
|
|||||||
$show-hide-toggle-size: 6px;
|
|
||||||
|
|
||||||
.show-hide__toggle {
|
|
||||||
|
|
||||||
position: relative;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--color-grey-lighter);
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.show-hide__toggle::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
width: $show-hide-toggle-size;
|
|
||||||
height: $show-hide-toggle-size;
|
|
||||||
left: -15px;
|
|
||||||
top: 50%;
|
|
||||||
color: var(--color-primary);
|
|
||||||
border-right: 2px solid currentColor;
|
|
||||||
border-top: 2px solid currentColor;
|
|
||||||
transition: transform .2s ease;
|
|
||||||
transform: translateY(-50%) rotate(-45deg);
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
left: auto;
|
|
||||||
right: 20px;
|
|
||||||
color: var(--color-font);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.show-hide__toggle--right::before {
|
|
||||||
left: auto;
|
|
||||||
right: 20px;
|
|
||||||
color: var(--color-font);
|
|
||||||
}
|
|
||||||
|
|
||||||
.show-hide--collapsed {
|
|
||||||
|
|
||||||
.show-hide__toggle::before {
|
|
||||||
transform: translateY(-50%) rotate(135deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
& > :not(.show-hide__toggle) {
|
|
||||||
display: block;
|
|
||||||
height: 0;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
max-height: 0;
|
|
||||||
overflow-y: hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,4 +1,4 @@
|
|||||||
import './tabber.scss';
|
import './tabber.sass';
|
||||||
|
|
||||||
(function($) {
|
(function($) {
|
||||||
|
|
||||||
|
|||||||
35
frontend/src/utils/tabber/tabber.sass
Normal file
35
frontend/src/utils/tabber/tabber.sass
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
.tab-group
|
||||||
|
border-top: 2px solid #dcdcdc
|
||||||
|
padding-top: 30px
|
||||||
|
|
||||||
|
.tab-group-openers
|
||||||
|
display: flex
|
||||||
|
justify-content: stretch
|
||||||
|
line-height: 40px
|
||||||
|
font-size: 14px
|
||||||
|
margin-bottom: 40px
|
||||||
|
|
||||||
|
.tab-opener
|
||||||
|
display: inline-block
|
||||||
|
flex: 1
|
||||||
|
text-align: center
|
||||||
|
padding: 0 13px
|
||||||
|
margin: 0 2px
|
||||||
|
background-color: var(--color-dark)
|
||||||
|
color: white
|
||||||
|
font-size: 16px
|
||||||
|
text-transform: uppercase
|
||||||
|
font-weight: 600
|
||||||
|
transition: all .1s ease
|
||||||
|
border-bottom: 5px solid rgba(100, 100, 100, 0.2)
|
||||||
|
|
||||||
|
.tab-opener:not(.tab-visible):hover
|
||||||
|
cursor: pointer
|
||||||
|
background-color: transparent
|
||||||
|
color: rgb(52, 48, 58)
|
||||||
|
border-bottom-color: grey
|
||||||
|
|
||||||
|
.tab-opener.tab-visible
|
||||||
|
background-color: transparent
|
||||||
|
color: rgb(52, 48, 58)
|
||||||
|
border-bottom-color: var(--color-primary)
|
||||||
@ -1,39 +0,0 @@
|
|||||||
.tab-group {
|
|
||||||
border-top: 2px solid #dcdcdc;
|
|
||||||
padding-top: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-group-openers {
|
|
||||||
display: flex;
|
|
||||||
justify-content: stretch;
|
|
||||||
line-height: 40px;
|
|
||||||
font-size: 14px;
|
|
||||||
margin-bottom: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-opener {
|
|
||||||
display: inline-block;
|
|
||||||
flex: 1;
|
|
||||||
text-align: center;
|
|
||||||
padding: 0 13px;
|
|
||||||
margin: 0 2px;
|
|
||||||
background-color: var(--color-dark);
|
|
||||||
color: white;
|
|
||||||
font-size: 16px;
|
|
||||||
text-transform: uppercase;
|
|
||||||
font-weight: 600;
|
|
||||||
transition: all .1s ease;
|
|
||||||
border-bottom: 5px solid rgba(100, 100, 100, 0.2);
|
|
||||||
}
|
|
||||||
.tab-opener:not(.tab-visible):hover {
|
|
||||||
cursor: pointer;
|
|
||||||
background-color: transparent;
|
|
||||||
color: rgb(52, 48, 58);
|
|
||||||
border-bottom-color: grey;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-opener.tab-visible {
|
|
||||||
background-color: transparent;
|
|
||||||
color: rgb(52, 48, 58);
|
|
||||||
border-bottom-color: var(--color-primary);
|
|
||||||
}
|
|
||||||
@ -1,5 +1,5 @@
|
|||||||
import { Utility } from '../../core/utility';
|
import { Utility } from '../../core/utility';
|
||||||
import './tooltips.scss';
|
import './tooltips.sass';
|
||||||
|
|
||||||
// empty 'shell' to be able to load styles
|
// empty 'shell' to be able to load styles
|
||||||
@Utility({
|
@Utility({
|
||||||
|
|||||||
92
frontend/src/utils/tooltips/tooltips.sass
Normal file
92
frontend/src/utils/tooltips/tooltips.sass
Normal file
@ -0,0 +1,92 @@
|
|||||||
|
.tooltip
|
||||||
|
position: relative
|
||||||
|
display: inline-block
|
||||||
|
vertical-align: middle
|
||||||
|
|
||||||
|
&:hover .tooltip__content
|
||||||
|
display: inline-block
|
||||||
|
|
||||||
|
.tooltip__handle
|
||||||
|
color: var(--color-light)
|
||||||
|
height: 1.5rem
|
||||||
|
line-height: 1.5rem
|
||||||
|
font-size: 1.2rem
|
||||||
|
display: inline-block
|
||||||
|
text-align: center
|
||||||
|
margin: 0 10px
|
||||||
|
cursor: default
|
||||||
|
position: relative
|
||||||
|
|
||||||
|
&::before
|
||||||
|
position: absolute
|
||||||
|
top: 0
|
||||||
|
left: 0
|
||||||
|
top: 50%
|
||||||
|
left: 50%
|
||||||
|
transform: translate(-50%, -50%)
|
||||||
|
font-size: 15px
|
||||||
|
|
||||||
|
&.tooltip__handle.urgency__success
|
||||||
|
color: var(--color-success)
|
||||||
|
|
||||||
|
&.tooltip__handle.urgency__warning
|
||||||
|
color: var(--color-warning)
|
||||||
|
|
||||||
|
&.tooltip__handle.urgency__error
|
||||||
|
color: var(--color-error)
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
color: var(--color-dark)
|
||||||
|
|
||||||
|
&.tooltip__handle.urgency__success
|
||||||
|
color: var(--color-success-dark)
|
||||||
|
|
||||||
|
&.tooltip__handle.urgency__warning
|
||||||
|
color: var(--color-warning-dark)
|
||||||
|
|
||||||
|
&.tooltip__handle.urgency__error
|
||||||
|
color: var(--color-error-dark)
|
||||||
|
|
||||||
|
.tooltip.tooltip__inline
|
||||||
|
.tooltip__handle
|
||||||
|
height: 1.0rem
|
||||||
|
line-height: 1.0rem
|
||||||
|
font-size: 1.0rem
|
||||||
|
|
||||||
|
.tooltip__content
|
||||||
|
position: absolute
|
||||||
|
display: none
|
||||||
|
top: -10px
|
||||||
|
transform: translateY(-100%)
|
||||||
|
left: 3px
|
||||||
|
width: 275px
|
||||||
|
z-index: 10
|
||||||
|
background-color: #fafafa
|
||||||
|
border-radius: 4px
|
||||||
|
padding: 13px 17px
|
||||||
|
box-shadow: 0 0 20px 4px rgba(0, 0, 0, 0.1)
|
||||||
|
|
||||||
|
&::after
|
||||||
|
content: ''
|
||||||
|
width: 16px
|
||||||
|
height: 16px
|
||||||
|
background-color: #fafafa
|
||||||
|
transform: rotate(45deg)
|
||||||
|
position: absolute
|
||||||
|
left: 10px
|
||||||
|
bottom: -8px
|
||||||
|
|
||||||
|
@media (max-width: 768px)
|
||||||
|
.tooltip
|
||||||
|
display: block
|
||||||
|
margin-top: 10px
|
||||||
|
|
||||||
|
.tooltip__content
|
||||||
|
left: 3px
|
||||||
|
right: 3px
|
||||||
|
width: auto
|
||||||
|
|
||||||
|
// fix font color when used in tableheaders
|
||||||
|
th .tooltip__content
|
||||||
|
color: var(--color-font)
|
||||||
|
font-weight: normal
|
||||||
@ -1,109 +0,0 @@
|
|||||||
.tooltip {
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: middle;
|
|
||||||
|
|
||||||
&:hover .tooltip__content {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tooltip__handle {
|
|
||||||
color: var(--color-light);
|
|
||||||
height: 1.5rem;
|
|
||||||
line-height: 1.5rem;
|
|
||||||
font-size: 1.2rem;
|
|
||||||
display: inline-block;
|
|
||||||
text-align: center;
|
|
||||||
margin: 0 10px;
|
|
||||||
cursor: default;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
font-size: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.tooltip__handle.urgency__success {
|
|
||||||
color: var(--color-success);
|
|
||||||
}
|
|
||||||
&.tooltip__handle.urgency__warning {
|
|
||||||
color: var(--color-warning);
|
|
||||||
}
|
|
||||||
&.tooltip__handle.urgency__error {
|
|
||||||
color: var(--color-error);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: var(--color-dark);
|
|
||||||
|
|
||||||
&.tooltip__handle.urgency__success {
|
|
||||||
color: var(--color-success-dark);
|
|
||||||
}
|
|
||||||
&.tooltip__handle.urgency__warning {
|
|
||||||
color: var(--color-warning-dark);
|
|
||||||
}
|
|
||||||
&.tooltip__handle.urgency__error {
|
|
||||||
color: var(--color-error-dark);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tooltip.tooltip__inline {
|
|
||||||
.tooltip__handle {
|
|
||||||
height: 1.0rem;
|
|
||||||
line-height: 1.0rem;
|
|
||||||
font-size: 1.0rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tooltip__content {
|
|
||||||
position: absolute;
|
|
||||||
display: none;
|
|
||||||
top: -10px;
|
|
||||||
transform: translateY(-100%);
|
|
||||||
left: 3px;
|
|
||||||
width: 275px;
|
|
||||||
z-index: 10;
|
|
||||||
background-color: #fafafa;
|
|
||||||
border-radius: 4px;
|
|
||||||
padding: 13px 17px;
|
|
||||||
box-shadow: 0 0 20px 4px rgba(0, 0, 0, 0.1);
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
content: '';
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
background-color: #fafafa;
|
|
||||||
transform: rotate(45deg);
|
|
||||||
position: absolute;
|
|
||||||
left: 10px;
|
|
||||||
bottom: -8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
|
|
||||||
.tooltip {
|
|
||||||
display: block;
|
|
||||||
margin-top: 10px;
|
|
||||||
|
|
||||||
.tooltip__content {
|
|
||||||
left: 3px;
|
|
||||||
right: 3px;
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* fix font color when used in tableheaders */
|
|
||||||
th .tooltip__content {
|
|
||||||
color: var(--color-font);
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
983
package-lock.json
generated
983
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -87,6 +87,7 @@
|
|||||||
"mini-css-extract-plugin": "^0.8.0",
|
"mini-css-extract-plugin": "^0.8.0",
|
||||||
"npm-run-all": "^4.1.5",
|
"npm-run-all": "^4.1.5",
|
||||||
"null-loader": "^2.0.0",
|
"null-loader": "^2.0.0",
|
||||||
|
"optimize-css-assets-webpack-plugin": "^5.0.3",
|
||||||
"postcss-loader": "^3.0.0",
|
"postcss-loader": "^3.0.0",
|
||||||
"postcss-preset-env": "^6.7.0",
|
"postcss-preset-env": "^6.7.0",
|
||||||
"resolve-url-loader": "^3.1.1",
|
"resolve-url-loader": "^3.1.1",
|
||||||
|
|||||||
234
records.json
234
records.json
@ -505,5 +505,239 @@
|
|||||||
"usedIds": []
|
"usedIds": []
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
],
|
||||||
|
"mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--6-1!node_modules/postcss-loader/src/index.js??ref--6-2!node_modules/resolve-url-loader/index.js??ref--6-3!node_modules/sass-loader/dist/cjs.js??ref--6-4!frontend/src/app.sass": [
|
||||||
|
{
|
||||||
|
"modules": {
|
||||||
|
"byIdentifier": {},
|
||||||
|
"usedIds": {}
|
||||||
|
},
|
||||||
|
"chunks": {
|
||||||
|
"byName": {},
|
||||||
|
"bySource": {},
|
||||||
|
"usedIds": []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--6-1!node_modules/postcss-loader/src/index.js??ref--6-2!node_modules/resolve-url-loader/index.js??ref--6-3!node_modules/sass-loader/dist/cjs.js??ref--6-4!frontend/src/utils/async-form/async-form.sass": [
|
||||||
|
{
|
||||||
|
"modules": {
|
||||||
|
"byIdentifier": {},
|
||||||
|
"usedIds": {}
|
||||||
|
},
|
||||||
|
"chunks": {
|
||||||
|
"byName": {},
|
||||||
|
"bySource": {},
|
||||||
|
"usedIds": []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--6-1!node_modules/postcss-loader/src/index.js??ref--6-2!node_modules/resolve-url-loader/index.js??ref--6-3!node_modules/sass-loader/dist/cjs.js??ref--6-4!frontend/src/utils/alerts/alerts.sass": [
|
||||||
|
{
|
||||||
|
"modules": {
|
||||||
|
"byIdentifier": {},
|
||||||
|
"usedIds": {}
|
||||||
|
},
|
||||||
|
"chunks": {
|
||||||
|
"byName": {},
|
||||||
|
"bySource": {},
|
||||||
|
"usedIds": []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--6-1!node_modules/postcss-loader/src/index.js??ref--6-2!node_modules/resolve-url-loader/index.js??ref--6-3!node_modules/sass-loader/dist/cjs.js??ref--6-4!frontend/src/utils/asidenav/asidenav.sass": [
|
||||||
|
{
|
||||||
|
"modules": {
|
||||||
|
"byIdentifier": {},
|
||||||
|
"usedIds": {}
|
||||||
|
},
|
||||||
|
"chunks": {
|
||||||
|
"byName": {},
|
||||||
|
"bySource": {},
|
||||||
|
"usedIds": []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--6-1!node_modules/postcss-loader/src/index.js??ref--6-2!node_modules/resolve-url-loader/index.js??ref--6-3!node_modules/sass-loader/dist/cjs.js??ref--6-4!frontend/src/utils/form/form.sass": [
|
||||||
|
{
|
||||||
|
"modules": {
|
||||||
|
"byIdentifier": {},
|
||||||
|
"usedIds": {}
|
||||||
|
},
|
||||||
|
"chunks": {
|
||||||
|
"byName": {},
|
||||||
|
"bySource": {},
|
||||||
|
"usedIds": []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--6-1!node_modules/postcss-loader/src/index.js??ref--6-2!node_modules/resolve-url-loader/index.js??ref--6-3!node_modules/sass-loader/dist/cjs.js??ref--6-4!frontend/src/utils/hide-columns/hide-columns.sass": [
|
||||||
|
{
|
||||||
|
"modules": {
|
||||||
|
"byIdentifier": {},
|
||||||
|
"usedIds": {}
|
||||||
|
},
|
||||||
|
"chunks": {
|
||||||
|
"byName": {},
|
||||||
|
"bySource": {},
|
||||||
|
"usedIds": []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--6-1!node_modules/postcss-loader/src/index.js??ref--6-2!node_modules/resolve-url-loader/index.js??ref--6-3!node_modules/sass-loader/dist/cjs.js??ref--6-4!frontend/src/utils/navbar/navbar.sass": [
|
||||||
|
{
|
||||||
|
"modules": {
|
||||||
|
"byIdentifier": {},
|
||||||
|
"usedIds": {}
|
||||||
|
},
|
||||||
|
"chunks": {
|
||||||
|
"byName": {},
|
||||||
|
"bySource": {},
|
||||||
|
"usedIds": []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--6-1!node_modules/postcss-loader/src/index.js??ref--6-2!node_modules/resolve-url-loader/index.js??ref--6-3!node_modules/sass-loader/dist/cjs.js??ref--6-4!frontend/src/utils/course-teaser/course-teaser.sass": [
|
||||||
|
{
|
||||||
|
"modules": {
|
||||||
|
"byIdentifier": {},
|
||||||
|
"usedIds": {}
|
||||||
|
},
|
||||||
|
"chunks": {
|
||||||
|
"byName": {},
|
||||||
|
"bySource": {},
|
||||||
|
"usedIds": []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--6-1!node_modules/postcss-loader/src/index.js??ref--6-2!node_modules/resolve-url-loader/index.js??ref--6-3!node_modules/sass-loader/dist/cjs.js??ref--6-4!frontend/src/utils/modal/modal.sass": [
|
||||||
|
{
|
||||||
|
"modules": {
|
||||||
|
"byIdentifier": {},
|
||||||
|
"usedIds": {}
|
||||||
|
},
|
||||||
|
"chunks": {
|
||||||
|
"byName": {},
|
||||||
|
"bySource": {},
|
||||||
|
"usedIds": []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--6-1!node_modules/postcss-loader/src/index.js??ref--6-2!node_modules/resolve-url-loader/index.js??ref--6-3!node_modules/sass-loader/dist/cjs.js??ref--6-4!frontend/src/utils/tooltips/tooltips.sass": [
|
||||||
|
{
|
||||||
|
"modules": {
|
||||||
|
"byIdentifier": {},
|
||||||
|
"usedIds": {}
|
||||||
|
},
|
||||||
|
"chunks": {
|
||||||
|
"byName": {},
|
||||||
|
"bySource": {},
|
||||||
|
"usedIds": []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--6-1!node_modules/postcss-loader/src/index.js??ref--6-2!node_modules/resolve-url-loader/index.js??ref--6-3!node_modules/sass-loader/dist/cjs.js??ref--6-4!frontend/src/utils/mass-input/mass-input.sass": [
|
||||||
|
{
|
||||||
|
"modules": {
|
||||||
|
"byIdentifier": {},
|
||||||
|
"usedIds": {}
|
||||||
|
},
|
||||||
|
"chunks": {
|
||||||
|
"byName": {},
|
||||||
|
"bySource": {},
|
||||||
|
"usedIds": []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--6-1!node_modules/postcss-loader/src/index.js??ref--6-2!node_modules/resolve-url-loader/index.js??ref--6-3!node_modules/sass-loader/dist/cjs.js??ref--6-4!frontend/src/utils/inputs/radio.sass": [
|
||||||
|
{
|
||||||
|
"modules": {
|
||||||
|
"byIdentifier": {},
|
||||||
|
"usedIds": {}
|
||||||
|
},
|
||||||
|
"chunks": {
|
||||||
|
"byName": {},
|
||||||
|
"bySource": {},
|
||||||
|
"usedIds": []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--6-1!node_modules/postcss-loader/src/index.js??ref--6-2!node_modules/resolve-url-loader/index.js??ref--6-3!node_modules/sass-loader/dist/cjs.js??ref--6-4!frontend/src/utils/inputs/inputs.sass": [
|
||||||
|
{
|
||||||
|
"modules": {
|
||||||
|
"byIdentifier": {},
|
||||||
|
"usedIds": {}
|
||||||
|
},
|
||||||
|
"chunks": {
|
||||||
|
"byName": {},
|
||||||
|
"bySource": {},
|
||||||
|
"usedIds": []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--6-1!node_modules/postcss-loader/src/index.js??ref--6-2!node_modules/resolve-url-loader/index.js??ref--6-3!node_modules/sass-loader/dist/cjs.js??ref--6-4!frontend/src/utils/show-hide/show-hide.sass": [
|
||||||
|
{
|
||||||
|
"modules": {
|
||||||
|
"byIdentifier": {},
|
||||||
|
"usedIds": {}
|
||||||
|
},
|
||||||
|
"chunks": {
|
||||||
|
"byName": {},
|
||||||
|
"bySource": {},
|
||||||
|
"usedIds": []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--6-1!node_modules/postcss-loader/src/index.js??ref--6-2!node_modules/resolve-url-loader/index.js??ref--6-3!node_modules/sass-loader/dist/cjs.js??ref--6-4!frontend/src/utils/async-table/async-table.sass": [
|
||||||
|
{
|
||||||
|
"modules": {
|
||||||
|
"byIdentifier": {},
|
||||||
|
"usedIds": {}
|
||||||
|
},
|
||||||
|
"chunks": {
|
||||||
|
"byName": {},
|
||||||
|
"bySource": {},
|
||||||
|
"usedIds": []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--6-1!node_modules/postcss-loader/src/index.js??ref--6-2!node_modules/resolve-url-loader/index.js??ref--6-3!node_modules/sass-loader/dist/cjs.js??ref--6-4!frontend/src/utils/async-table/async-table-filter.sass": [
|
||||||
|
{
|
||||||
|
"modules": {
|
||||||
|
"byIdentifier": {},
|
||||||
|
"usedIds": {}
|
||||||
|
},
|
||||||
|
"chunks": {
|
||||||
|
"byName": {},
|
||||||
|
"bySource": {},
|
||||||
|
"usedIds": []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--6-1!node_modules/postcss-loader/src/index.js??ref--6-2!node_modules/resolve-url-loader/index.js??ref--6-3!node_modules/sass-loader/dist/cjs.js??ref--6-4!frontend/src/utils/inputs/file-input.sass": [
|
||||||
|
{
|
||||||
|
"modules": {
|
||||||
|
"byIdentifier": {},
|
||||||
|
"usedIds": {}
|
||||||
|
},
|
||||||
|
"chunks": {
|
||||||
|
"byName": {},
|
||||||
|
"bySource": {},
|
||||||
|
"usedIds": []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--6-1!node_modules/postcss-loader/src/index.js??ref--6-2!node_modules/resolve-url-loader/index.js??ref--6-3!node_modules/sass-loader/dist/cjs.js??ref--6-4!frontend/src/utils/inputs/checkbox.sass": [
|
||||||
|
{
|
||||||
|
"modules": {
|
||||||
|
"byIdentifier": {},
|
||||||
|
"usedIds": {}
|
||||||
|
},
|
||||||
|
"chunks": {
|
||||||
|
"byName": {},
|
||||||
|
"bySource": {},
|
||||||
|
"usedIds": []
|
||||||
|
}
|
||||||
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
@ -1,6 +1,7 @@
|
|||||||
const webpack = require('webpack');
|
const webpack = require('webpack');
|
||||||
const path = require('path');
|
const path = require('path');
|
||||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||||
|
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
|
||||||
const ManifestPlugin = require('webpack-manifest-plugin');
|
const ManifestPlugin = require('webpack-manifest-plugin');
|
||||||
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
|
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
|
||||||
const CopyPlugin = require('copy-webpack-plugin');
|
const CopyPlugin = require('copy-webpack-plugin');
|
||||||
@ -54,7 +55,7 @@ module.exports = {
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
test: /\.scss$/i,
|
test: /\.s(c|a)ss$/i,
|
||||||
use: [ MiniCssExtractPlugin.loader,
|
use: [ MiniCssExtractPlugin.loader,
|
||||||
{ loader: 'css-loader', options: { sourceMap: true }},
|
{ loader: 'css-loader', options: { sourceMap: true }},
|
||||||
{ loader: 'postcss-loader', options: {
|
{ loader: 'postcss-loader', options: {
|
||||||
@ -139,6 +140,13 @@ module.exports = {
|
|||||||
cache: true,
|
cache: true,
|
||||||
parallel: true,
|
parallel: true,
|
||||||
sourceMap: true
|
sourceMap: true
|
||||||
|
}),
|
||||||
|
new OptimizeCSSAssetsPlugin({
|
||||||
|
cssProcessorOptions: {
|
||||||
|
map: {
|
||||||
|
inline: false
|
||||||
|
}
|
||||||
|
}
|
||||||
})
|
})
|
||||||
],
|
],
|
||||||
runtimeChunk: 'single',
|
runtimeChunk: 'single',
|
||||||
|
|||||||
Reference in New Issue
Block a user