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 { isValidUtility } from './core/utility';
|
||||
|
||||
import './app.scss';
|
||||
import './app.sass';
|
||||
|
||||
export class App {
|
||||
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 './alerts.scss';
|
||||
import './alerts.sass';
|
||||
|
||||
const ALERTS_INITIALIZED_CLASS = 'alerts--initialized';
|
||||
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 './asidenav.scss';
|
||||
import './asidenav.sass';
|
||||
|
||||
const FAVORITES_BTN_CLASS = 'navbar__list-item--favorite';
|
||||
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 { Datepicker } from '../form/datepicker';
|
||||
import './async-form.scss';
|
||||
import './async-form.sass';
|
||||
|
||||
const ASYNC_FORM_INITIALIZED_CLASS = 'check-all--initialized';
|
||||
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 { HttpClient } from '../../services/http-client/http-client';
|
||||
import * as debounce from 'lodash.debounce';
|
||||
import './async-table-filter.scss';
|
||||
import './async-table.scss';
|
||||
import './async-table-filter.sass';
|
||||
import './async-table.sass';
|
||||
|
||||
const INPUT_DEBOUNCE = 600;
|
||||
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 './course-teaser.scss';
|
||||
import './course-teaser.sass';
|
||||
|
||||
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 { AutoSubmitInput } from './auto-submit-input';
|
||||
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 { 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 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 './checkbox.scss';
|
||||
import './checkbox.sass';
|
||||
|
||||
var CHECKBOX_CLASS = 'checkbox';
|
||||
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 './file-input.scss';
|
||||
import './file-input.sass';
|
||||
|
||||
const FILE_INPUT_CLASS = 'file-input';
|
||||
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 { FileInput } from './file-input';
|
||||
|
||||
import './inputs.scss';
|
||||
import './radio.scss';
|
||||
import './inputs.sass';
|
||||
import './radio.sass';
|
||||
|
||||
export const InputUtils = [
|
||||
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 { Datepicker } from '../form/datepicker';
|
||||
import './mass-input.scss';
|
||||
import './mass-input.sass';
|
||||
|
||||
const MASS_INPUT_CELL_SELECTOR = '.massinput__cell';
|
||||
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 './modal.scss';
|
||||
import './modal.sass';
|
||||
|
||||
const MODAL_HEADERS = {
|
||||
'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 './navbar.scss';
|
||||
import './navbar.sass';
|
||||
|
||||
|
||||
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 { 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_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($) {
|
||||
|
||||
|
||||
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 './tooltips.scss';
|
||||
import './tooltips.sass';
|
||||
|
||||
// empty 'shell' to be able to load styles
|
||||
@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",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"null-loader": "^2.0.0",
|
||||
"optimize-css-assets-webpack-plugin": "^5.0.3",
|
||||
"postcss-loader": "^3.0.0",
|
||||
"postcss-preset-env": "^6.7.0",
|
||||
"resolve-url-loader": "^3.1.1",
|
||||
|
||||
234
records.json
234
records.json
@ -505,5 +505,239 @@
|
||||
"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 path = require('path');
|
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
|
||||
const ManifestPlugin = require('webpack-manifest-plugin');
|
||||
const { CleanWebpackPlugin } = require('clean-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,
|
||||
{ loader: 'css-loader', options: { sourceMap: true }},
|
||||
{ loader: 'postcss-loader', options: {
|
||||
@ -139,6 +140,13 @@ module.exports = {
|
||||
cache: true,
|
||||
parallel: true,
|
||||
sourceMap: true
|
||||
}),
|
||||
new OptimizeCSSAssetsPlugin({
|
||||
cssProcessorOptions: {
|
||||
map: {
|
||||
inline: false
|
||||
}
|
||||
}
|
||||
})
|
||||
],
|
||||
runtimeChunk: 'single',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user