diff --git a/frontend/src/_common.sass b/frontend/src/_common.sass new file mode 100644 index 000000000..cf4fab2cf --- /dev/null +++ b/frontend/src/_common.sass @@ -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 diff --git a/frontend/src/_common.scss b/frontend/src/_common.scss deleted file mode 100644 index d0652e036..000000000 --- a/frontend/src/_common.scss +++ /dev/null @@ -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; diff --git a/frontend/src/app.js b/frontend/src/app.js index 6aa438405..8b26b08a2 100644 --- a/frontend/src/app.js +++ b/frontend/src/app.js @@ -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(); diff --git a/frontend/src/app.sass b/frontend/src/app.sass new file mode 100644 index 000000000..14460cf2a --- /dev/null +++ b/frontend/src/app.sass @@ -0,0 +1,1191 @@ +@use "common" as * + +\:root + // THEME INDEPENDENT COLORS + --color-error: #8c0707 + --color-error-dark: #500303 + --color-warning: #fc9900 + --color-warning-dark: #c27400 + --color-success: #23d160 + --color-success-dark: #1ca64c + --color-info: #c4c4c4 + --color-info-dark: #919191 + --color-lightblack: #1A2A36 + --color-lightwhite: #fcfffa + --color-grey: #B1B5C0 + --color-grey-light: #efefef + --color-grey-lighter: #f5f5f5 + --color-grey-medium: #9A989E + --color-font: #34303a + --color-fontsec: #5b5861 + + // FONTS + --font-base: "Source Sans Pro", "Trebuchet MS", sans-serif + --font-logo: "Roboto", var(--font-base) + + // DIMENSIONS + --header-height: 100px + --header-height-collapsed: 60px + --asidenav-width-xl: 250px + --asidenav-width-lg: 20% + --asidenav-width-md: 60px + +* + box-sizing: border-box + padding: 0 + margin: 0 + -webkit-font-smoothing: antialiased + +body + background-color: white + color: var(--color-font) + font-family: var(--font-base) + font-weight: 400 + font-size: 16px + overflow-y: scroll + +// THEMES + +body + // DEFAULT LMU THEME + --color-lmu-green: #0a9342 + --color-primary: var(--color-lmu-green) + --color-light: #31cc72 + --color-lighter: #35db7a + --color-dark: #087536 + --color-darker: #075728 + --color-link: var(--color-font) + --color-link-hover: var(--color-font) + --color-lmu-box-border: var(--color-lightwhite) + + &.theme--lavender + --color-primary: #584c9c + --color-light: #5969b5 + --color-lighter: #5f7dc2 + --color-dark: #4c4279 + --color-darker: #3c2765 + --color-link: var(--color-dark) + --color-link-hover: var(--color-darker) + + &.theme--neutral-blue + --color-primary: #3E606F + --color-light: rgb(189, 201, 219) + --color-lighter: rgb(145, 159, 170) + --color-dark: rgb(42, 74, 88) + --color-darker: #193441 + + &.theme--aberdeen-reds + --color-primary: #820333 + --color-light: #C9283E + --color-lighter: #F0433A + --color-dark: #540032 + --color-darker: #2E112D + + &.theme--moss-green + --color-primary: #5C996B + --color-light: #7ACC8F + --color-lighter: #99FFB2 + --color-dark: #3D6647 + --color-darker: #1F3324 + + &.theme--sky-love + --color-primary: #87ABE5 + --color-light: #A0C6F2 + --color-lighter: #BAE2FF + --color-dark: #7A95DE + --color-darker: #6B7BC9 + --color-link: var(--color-lightblack) + --color-link-hover: var(--color-darker) + +// END THEMES + +.emph + font-style: italic + +a, +a:visited + text-decoration: none + font-weight: 600 + transition: color .2s ease, background-color .2s ease + +a + color: var(--color-link) + +a:hover + color: var(--color-link-hover) + +ul + margin-left: 20px + +h1, h2, h3, .div-h3, h4, h5 + font-weight: 600 + +h1 + font-size: 32px + margin-bottom: 10px + +h2 + font-size: 24px + margin: 10px 0 + + &:first-child + margin-top: 0 + +h3, .div-h3 + font-size: 20px + margin: 10px 0 + + &:first-child + margin-top: 0 + +h4 + font-size: 16px + margin: 0 + +@media (max-width: 768px) + h1 + font-size: 24px + + h2 + font-size: 20px + + h3, .div-h3 + font-size: 16px + +// LAYOUT +.main + position: relative + +.main__content + position: relative + background-color: white + transition: padding-left .2s ease-out + margin-top: var(--header-height-collapsed) + margin-left: 0 + + > .container + margin: 20px 0 + +.main__content, .modal__content + a + text-decoration: underline + + p, form, .div-p + margin: 0.5rem 0 + + &:last-child + margin: 0.5rem 0 0 + + &:first-child + margin: 0 + +@media (min-width: 426px) + .main__content + margin-left: var(--asidenav-width-md, 50px) + +@media (min-width: 769px) + .main__content + margin-left: var(--asidenav-width-lg, 20%) + margin-top: var(--header-height) + +@media (min-width: 1200px) + .main__content + margin-left: var(--asidenav-width-xl, 250px) + +.main__content-body + padding: 13px + +@media (min-width: 426px) + .main__content-body + padding: 13px 20px + +@media (min-width: 769px) + .main__content-body + padding: 20px 40px + +.pseudo-focus + outline: 5px auto var(--color-light) + outline: 5px auto -webkit-focus-ring-color + +// CONTAINER +.container + + .container + margin-top: 20px + +// GENERAL BUTTON STYLES +input[type="submit"], +input[type="button"], +button, +.btn + outline: 0 + border: 0 + box-shadow: 0 + background-color: var(--color-dark) + color: white + padding: 10px 17px + min-width: 100px + transition: all .1s + font-size: 16px + cursor: pointer + display: inline-block + text-decoration: none + + a:hover + color: white + + &:focus + border-color: #3273dc + box-shadow: 0 0 0 0.25rem rgba(50, 115, 220, 0.25) + outline: 0 + +input[type="submit"][disabled], +input[type="button"][disabled], +button[disabled], +.btn[disabled] + opacity: 0.3 + background-color: var(--color-grey) + cursor: default + +input[type="submit"]:not([disabled]):hover, +input[type="button"]:not([disabled]):hover, +button:not([disabled]):hover, +.btn:not([disabled]):hover + background-color: var(--color-light) + color: white + +.btn-primary + background-color: var(--color-primary) + +.btn-info + background-color: var(--color-info) + +.btn--small + padding: 4px 7px + background-color: var(--color-darker) + +input[type="submit"].btn-info:hover, +input[type="button"].btn-info:hover, +.btn-info:hover + background-color: var(--color-grey) + +// GENERAL TABLE STYLES +.table + margin: 21px 0 + width: 100% + +.table:first-child + margin-top: 0 + +.table:last-child + margin-bottom: 0 + +.table--striped + .table__row:not(.no-stripe):not(.table__row--sum):nth-child(even) + background-color: rgba(0, 0, 0, 0.03) + +.table--hover + .table__row:not(.no-hover):not(.table__row--sum):not(.table__row--head):not(.table__row--foot):hover + background-color: rgba(0, 0, 0, 0.07) + +.table__row--sum td.table__td::before + content: 'Σ' + font-weight: bold + margin-right: .25em + +// SCROLLTABLE +.scrolltable + overflow: auto + +.scrolltable--bordered + box-shadow: 0 0 1px 1px var(--color-grey-light) + +@media (max-width: 425px) + .scrolltable + margin-left: -10px + padding-left: 10px + margin-right: -10px + padding-right: 10px + +// TABLE DESIGN +.table__td, .table__th + padding-top: 14px + padding-bottom: 10px + padding-left: 10px + padding-right: 10px + max-width: 300px + +.table__td + font-size: 16px + color: var(--color-font) + line-height: 1.4 + vertical-align: top + +.table__td--automatic + font-style: oblique + color: var(--color-fontsec) + +.table__td--overriden + font-weight: bold + +.table__th + background-color: var(--color-dark) + position: relative + font-size: 16px + color: white + line-height: 1.4 + padding-top: 10px + padding-bottom: 10px + font-weight: bold + text-align: left + + a + color: white + text-decoration: none + font-weight: bold + + &:hover + color: inherit + + &::before + @extend .fas + + content: fa-content($fa-var-link) + margin-right: 0.25em + +@media (max-width: 1200px) + .table th + padding: 4px 6px + +.table__td-content + max-height: 200px + overflow-y: auto + +.table__th-link + font-weight: bold + + &::before + display: none + +.table--vertical + th + background-color: transparent + color: var(--color-font) + width: 170px + text-align: right + padding-right: 15px + font-weight: 400 + + td + font-weight: 600 + color: var(--color-font) + +.table--condensed + margin: 0 + + .table__th, + .table__td + padding: 4px 8px + +// UNORDERED LIST +.list-ul__item + // padding: 4px 0; + line-height: 25px + +// LIST MODIFIERS +.list--iconless + list-style-type: none + margin-left: 0 + +.list--inline + ul + display: inline-block + margin-left: 0 + + li + display: inline-block + +ul.list--inline + display: inline-block + margin-left: 0 + + li + display: inline-block + +.list--comma-separated li + &::after + content: ', ' + white-space: pre + + &:last-of-type::after + content: none + +.list--space-separated li + &::after + content: ' ' + white-space: pre + + &:last-of-type::after + content: none + +.list--icon-width li + width: 1rem + height: 1rem + +// DEFINITION LIST +.deflist + display: grid + grid-template-columns: 100% + +.deflist__dt, +.deflist__dd + padding: 2px 0 + +.deflist__dt + font-weight: 600 + +.deflist__dd + font-size: 18px + margin-bottom: 10px + + > p, > .div-p + margin-top: 0 + +@media (min-width: 768px) + .deflist + grid-template-columns: fit-content(25vw) 1fr + + .deflist + margin-top: -10px + margin-right: -15px + + .deflist__dd + padding-right: 15px + + .deflist__dt, + .deflist__dd + padding: 12px 0 + margin: 0 + font-size: 16px + + &:last-of-type + border: 0 + + .deflist__dt + padding-right: 50px + + .deflist__dd + padding-right: 15px + +section + padding-bottom: 30px + border-bottom: 1px solid #d3d3d3 + + + section + margin-top: 20px + + &:last-child + border-bottom: none + padding-bottom: 0px + +.pseudonym + font-family: monospace + +.headline-one + margin-bottom: 10px + +// Notification style used as requested by @hamanf in #298, but class was not globally available. Copied from dead-code. For @hamanf to clean up: + +.notification + position: relative + border-radius: 3px + padding: 10px 20px 20px + margin: 40px auto + box-shadow: 0 0 4px 2px inset currentColor + padding-left: 100px + min-height: 100px + max-width: 700px + font-weight: 600 + vertical-align: center + display: grid + grid-column: 2 + + &::before + @extend .fas + + position: absolute + display: flex + left: 0 + top: 0 + height: 100% + width: 100px + font-size: 50px + align-items: center + justify-content: center + + .notification__content + grid-column: 1 + align-self: center + color: var(--color-font) + + &.notification--broad + max-width: none + +.form-section-notification + display: grid + grid-template-columns: 1fr 3fr + grid-gap: 5px + + fieldset + display: grid + grid-template-columns: 1fr 3fr + grid-gap: 5px + grid-column: 1/3 + + .notification + margin: 0 + + + .form-group, + .form-section-legend, + .form-section-notification + margin-top: 11px + + + .form-section-title + margin-top: 40px + +@media (max-width: 768px) + .form-section-notification + grid-template-columns: 1fr + margin-top: 17px + + fieldset + grid-template-columns: 1fr + grid-column: 1/2 + + .notification + grid-column: 1 + max-width: none + padding-left: 40px + + &::before + height: auto + width: 45px + font-size: 40px + top: 15px + +.notification-error + color: var(--color-error) + +.notification-warning + color: var(--color-warning) + +.notification-info + color: var(--color-lightblack) + +.notification-success + color: var(--color-warning) + +// "Heated" element. + Set custom property "--hotness" to a value from 0 to 1 to turn + the element's background to a color on a gradient from green to red. + + TBD: + - move to a proper place + - think about font-weight... + + Example: +
Lorem ipsum + +.heated + --hotness: 0 + --red: calc(var(--hotness) * 200) + --green: calc(255 - calc(var(--hotness) * 255)) + --opacity: calc(calc(var(--red) / 600) + 0.1) + font-weight: var(--weight, 600) + background-color: rgba(var(--red), var(--green), 0, var(--opacity)) + +.uuid + font-family: monospace + +.form--inline + display: inline-block + +.ribbon + position: fixed + top: calc(40px + var(--header-height)) + transition: all 0.2s cubic-bezier(0.03, 0.43, 0.58, 1) + right: -63px + transform: rotate(45deg) + width: 250px + background: var(--color-error) + text-align: center + color: var(--color-lightwhite) + font-weight: 600 + font-size: 1.25rem + line-height: 2em + box-shadow: 0 0 3px rgba(0, 0, 0, 0.4) + z-index: 19 + pointer-events: none + +@media (max-width: 768px) + .ribbon + top: calc(20px + var(--header-height-collapsed)) + right: -83px + transform: rotate(45deg) scale(0.6) + +#admin-studyterms + select, option, input + min-width: 50px + +.allocation__label, .allocation__explanation + color: var(--color-fontsec) + font-style: italic + +.allocation__state + color: var(--color-font) + font-weight: 600 + font-style: normal + +.allocation__courses + margin: 20px 0 0 40px + +.allocation-course + display: grid + grid-template-columns: minmax(105px, 1fr) 9fr + grid-template-areas: 'name name ' '. registered ' 'prio-label prio ' 'instr-label instr ' 'form-label form ' + grid-gap: 5px 7px + margin: 12px 0 + padding: 0 10px 12px 7px + border-left: 1px solid var(--color-grey) + + // &:last-child { + padding: 12px 10px 0 10px; + } + + & + .allocation-course { + border-top: 1px solid var(--color-grey); + } + + &:nth-child(2n) + background-color: rgba(0, 0, 0, 0.015) + + .allocation-course__registered + grid-area: registered + + .allocation-course__priority + grid-area: prio + + .allocation-course__priority-label + grid-area: prio-label + justify-self: end + align-self: center + text-align: right + + .allocation-course__name + grid-area: name + align-self: center + font-size: 1.2rem + + .allocation-course__instructions + grid-area: instr + + .allocation-course__instructions-label + grid-area: instr-label + justify-self: end + text-align: right + + .allocation-course__application + grid-area: form + + .allocation-course__application-label + grid-area: form-label + justify-self: end + text-align: right + padding-top: 6px + +@media (max-width: 426px) + .allocation-course + grid-template-columns: 1fr + grid-template-areas: 'name ' 'registered ' 'prio-label ' 'prio ' 'instr-label' 'instr ' 'form-label ' 'form ' + + .allocation-course__application-label + padding-top: 0 + +.comment + white-space: pre-wrap + font-family: monospace + +th + vertical-align: top + text-align: left + +th, td + padding-bottom: 7px + +.course-news + max-height: 50vh + overflow: auto + + .course-news-item + padding: 12px 0 + border-bottom: 1px solid #d3d3d3 + + &:last-child + padding-bottom: 0 + border-bottom: none + + &:first-child + padding-top: 0 + + .course-news-item__last-edit + color: var(--color-fontsec) + font-style: italic + + .course-news-item__title .modal__trigger-label + font-style: normal + + .course-news-item__summary .modal__trigger-label + font-weight: normal + font-style: normal + color: var(--color-font) + +.bound_explanation + color: var(--color-fontsec) + font-style: italic + +.action + max-width: 800px + padding: 3px 0 + + &:not(:last-child) + margin-bottom: 7px + + &:not(:first-child) + margin-top: 7px + +.action__options + max-height: 450px + overflow-y: auto + +.action__option + display: flex + + &:not(:last-child) + margin-bottom: 10px + +.action__label, +.action__option-label + margin-left: 15px + vertical-align: top + +.action__fieldset + margin: 7px 0 5px 9px + padding: 5px 0 10px + border-left: 1px solid #bcbcbc + padding-left: 16px + position: relative + +.action__toggle-all + display: flex + border-bottom: 1px solid #bcbcbc + padding-bottom: 8px + margin-bottom: 8px + +.action__checked-counter + position: absolute + right: 5px + top: 5px + +.occurrence--not-registered, .no-bonus + text-decoration: line-through + +.result + font-size: 3rem + margin: 30px 30px 0 !important + +.glossary + dt, .dt + font-weight: 600 + + &.sec + font-style: italic + font-size: 0.9rem + font-weight: 600 + color: var(--color-fontsec) + + dd, .dd + margin-left: 12px + + dd + dt, .dd + dt, dd + .dt, .dd + .dt + margin-top: 17px + +// SORTABLE TABLE-HEADERS +.table__th.sortable + position: relative + padding-right: 24px + cursor: pointer + +.table__th.sortable::after, +.table__th.sortable::before + content: '' + position: absolute + top: 50% + right: 4px + width: 0 + height: 0 + border-left: 8px solid transparent + border-right: 8px solid transparent + border-bottom: 8px solid rgba(255, 255, 255, 0.4) + +.table__th.sortable::before + // magic numbers to move arrow back in the right position after flipping it. + this allows us to use the same border for the up and the down arrow + transform: translateY(150%) scale(1, -1) + transform-origin: top + +.table__th.sortable::after + transform: translateY(-150%) + +.table__th.sortable:hover::before, +.table__th.sortable:hover::after + border-bottom-color: rgba(255, 255, 255, 0.7) + +.table__th.sorted-asc::before, +.table__th.sorted-desc::after + border-bottom-color: white !important + +\:root + --color-grey-light: #efefef + --color-grey-lighter: #f5f5f5 + --color-fontsec: #5b5861 + --course-bg-color: var(--color-grey-lighter) + --course-expanded-bg-color: var(--color-grey-light) + +.scrolltable + box-shadow: none !important + +.course-header::after, +.course-header::before + content: '' + position: absolute + right: 10px + top: 20px + width: 0 + height: 0 + border-left: 8px solid transparent + border-right: 8px solid transparent + border-bottom: 8px solid rgba(255, 255, 255, 0.4) + +.course-header::before + // magic numbers to move arrow back in the right position after flipping it. + this allows us to use the same border for the up and the down arrow + transform: translateY(150%) scale(1, -1) + transform-origin: top + +.course-header::after + transform: translateY(-150%) + +.course-header:hover::before, +.course-header:hover::after + border-bottom-color: rgba(255, 255, 255, 0.7) + +.sorted-asc::before, +.sorted-desc::after + border-bottom-color: white !important + +.csv-export + margin-bottom: 13px + +.csv-import + margin-bottom: 13px + +.table-filter + margin-bottom: 13px + +.table-filter__toggle + padding: 3px 7px + +// TABLE HEADER +.table-header + display: flex + flex-flow: row-reverse + justify-content: space-between + margin-bottom: 15px + +// TABLE FOOTER +.table-footer + display: flex + flex-flow: row-reverse + justify-content: space-between + margin-top: 15px + +// PAGINATION +.pagination + margin-top: 20px + overflow: auto + + .pages + text-align: center + white-space: nowrap + margin: 0 + + .page-link + margin-top: 7px + display: inline-block + background-color: var(--color-grey-medium) + + + .page-link + margin-left: 7px + + a + color: var(--color-lightwhite) + padding: 7px 13px + display: inline-block + text-decoration: none + + &:not(.current):hover + background-color: var(--color-primary) + + a + color: var(--color-lightwhite) + + &.current + pointer-events: none + background-color: var(--color-dark) + + a + pointer-events: none + +#changelog + font-size: 14px + white-space: pre-wrap + font-family: monospace + +#gitrev + font-size: 12px + white-space: pre-wrap + font-family: monospace + +.breadcrumbs__container + position: relative + color: var(--color-lightwhite) + padding: 4px 13px + background-color: var(--color-dark) + line-height: 30px + +@media (min-width: 426px) + .breadcrumbs__container + padding: 7px 20px + +@media (min-width: 769px) + .breadcrumbs__container + padding: 7px 40px + +.breadcrumbs__link + color: var(--color-lightwhite) + + &:hover + color: var(--color-white) + +.breadcrumbs__item + padding-right: 14px + position: relative + line-height: 28px + opacity: 0.8 + z-index: 1 + margin-right: 10px + + &:hover + opacity: 1 + + &::after + content: '' + position: absolute + top: 11px + right: 0 + width: 7px + height: 7px + border-style: solid + border-width: 0 + border-bottom-width: 1px + border-right-width: 1px + border-color: var(--color-white) + transform: rotate(-45deg) + z-index: 10 + +.breadcrumbs__last-item + line-height: 28px + vertical-align: bottom + font-weight: 600 + +.recipient-category + max-width: 400px + padding: 3px 0 + + &:not(:last-child) + margin-bottom: 7px + + &:not(:first-child) + margin-top: 7px + +.recipient-category__options + max-height: 150px + overflow-y: auto + +.recipient-category__option + display: flex + + &:not(:last-child) + margin-bottom: 10px + +.recipient-category__label, +.recipient-category__option-label + margin-left: 15px + vertical-align: top + +.recipient-category__fieldset + margin: 7px 0 5px 9px + padding: 5px 0 10px + border-left: 1px solid #bcbcbc + padding-left: 16px + position: relative + +.recipient-category__option-add + display: flex + + .btn-mass-input-add + margin-left: 10px + padding: 10px 0 + +.recipient-category__options + .recipient-category__option-add + margin-top: 10px + +.recipient-category__toggle-all + display: flex + border-bottom: 1px solid #bcbcbc + padding-bottom: 8px + margin-bottom: 8px + +.recipient-category__checked-counter + position: absolute + right: 5px + top: 5px + +.table__td--csv, .table__th--csv + font-family: monospace + +.confirmationText + white-space: pre-wrap + font-size: 14px + font-family: monospace + +.func-field__wrapper + max-height: 75vh + overflow: auto + +.footer + text-align: center + padding: 20px + position: relative + margin: 40px 0 + + &::before + content: '' + position: absolute + top: 0 + left: 10% + width: 80% + height: 2px + background-color: var(--color-grey-light) + +.footer-links * + margin-right: 0.5em + + &:last + margin-right: 0 + +.table--grading-key + th, td + padding: 3px + +.btn.btn-mass-input-delete, +.btn.btn-mass-input-add + background-color: #999 + min-width: 50px + padding: 5px 15px + font-weight: 700 + font-size: 1.3rem + +.file-input__unpack + font-size: .9rem + display: flex + align-items: center + margin-top: 10px + + .checkbox + display: inline-block + margin-left: 7px + +.pagenav + display: flex + align-items: flex-start + padding-bottom: 15px + margin-bottom: 20px + border-bottom: 1px solid #eee + +.pagenav__list-item + flex: 1 + position: relative + display: inline-flex + box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.6) + margin: 10px 10px 0 0 + +.pagenav__link-wrapper + flex: 1 + padding: 10px 10px 12px + text-decoration: none !important + + &:hover + background-color: var(--color-grey-light) + +@media (max-width: 1024px) + .pagenav + flex-direction: column + +@media (min-width: 1025px) + .pagenav-secondary + position: relative + overflow: visible + padding-top: 10px + + &::after + content: '\2026' + display: inline-block + padding: 10px 10px 12px + width: 40px + box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.6) + box-sizing: border-box + text-align: center + transition: box-shadow 0.2s ease + + &:hover + &::after + box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.8) + + .pagenav-secondary__list + display: block + + .pagenav-secondary__list + position: absolute + display: none + right: 0 + top: 50px + width: 250px + background-color: white + box-shadow: 0 0 6px 3px var(--color-grey-light) + z-index: 18 + + .pagenav__list-item--secondary + display: flex + box-shadow: none + margin: 0 + + &:hover + background-color: var(--color-grey-light) diff --git a/frontend/src/app.scss b/frontend/src/app.scss deleted file mode 100644 index fd0d6f93c..000000000 --- a/frontend/src/app.scss +++ /dev/null @@ -1,1517 +0,0 @@ -@use "common" as *; - -:root { - /* THEME INDEPENDENT COLORS */ - --color-error: #8c0707; - --color-error-dark: #500303; - --color-warning: #fc9900; - --color-warning-dark: #c27400; - --color-success: #23d160; - --color-success-dark: #1ca64c; - --color-info: #c4c4c4; - --color-info-dark: #919191; - --color-lightblack: #1A2A36; - --color-lightwhite: #fcfffa; - --color-grey: #B1B5C0; - --color-grey-light: #efefef; - --color-grey-lighter: #f5f5f5; - --color-grey-medium: #9A989E; - --color-font: #34303a; - --color-fontsec: #5b5861; - - - /* FONTS */ - --font-base: "Source Sans Pro", "Trebuchet MS", sans-serif; - --font-logo: "Roboto", var(--font-base); - - /* DIMENSIONS */ - --header-height: 100px; - --header-height-collapsed: 60px; - - --asidenav-width-xl: 250px; - --asidenav-width-lg: 20%; - --asidenav-width-md: 60px; -} - -* { - box-sizing: border-box; - padding: 0; - margin: 0; - -webkit-font-smoothing: antialiased; -} - -body { - background-color: white; - color: var(--color-font); - font-family: var(--font-base); - font-weight: 400; - font-size: 16px; - overflow-y: scroll; -} - -/* THEMES */ - -body { - /* DEFAULT LMU THEME */ - --color-lmu-green: #0a9342; - --color-primary: var(--color-lmu-green); - --color-light: #31cc72; - --color-lighter: #35db7a; - --color-dark: #087536; - --color-darker: #075728; - --color-link: var(--color-font); - --color-link-hover: var(--color-font); - --color-lmu-box-border: var(--color-lightwhite); - - &.theme--lavender { - --color-primary: #584c9c; - --color-light: #5969b5; - --color-lighter: #5f7dc2; - --color-dark: #4c4279; - --color-darker: #3c2765; - --color-link: var(--color-dark); - --color-link-hover: var(--color-darker); - } - - &.theme--neutral-blue { - --color-primary: #3E606F; - --color-light: rgb(189, 201, 219); - --color-lighter: rgb(145, 159, 170); - --color-dark: rgb(42, 74, 88); - --color-darker: #193441; - } - - &.theme--aberdeen-reds { - --color-primary: #820333; - --color-light: #C9283E; - --color-lighter: #F0433A; - --color-dark: #540032; - --color-darker: #2E112D; - } - - &.theme--moss-green { - --color-primary: #5C996B; - --color-light: #7ACC8F; - --color-lighter: #99FFB2; - --color-dark: #3D6647; - --color-darker: #1F3324; - } - - &.theme--sky-love { - --color-primary: #87ABE5; - --color-light: #A0C6F2; - --color-lighter: #BAE2FF; - --color-dark: #7A95DE; - --color-darker: #6B7BC9; - --color-link: var(--color-lightblack); - --color-link-hover: var(--color-darker); - } -} - -/* END THEMES */ - -.emph { - font-style: italic; -} - -a, -a:visited { - text-decoration: none; - font-weight: 600; - transition: color .2s ease, background-color .2s ease; -} - -a { - color: var(--color-link); -} - -a:hover { - color: var(--color-link-hover); -} - - -ul { - margin-left: 20px; -} - -h1, h2, h3, .div-h3 , h4, h5 { - font-weight: 600; -} -h1 { - font-size: 32px; - margin-bottom: 10px; -} -h2 { - font-size: 24px; - margin: 10px 0; - - &:first-child { - margin-top: 0; - } -} -h3, .div-h3 { - font-size: 20px; - margin: 10px 0; - - &:first-child { - margin-top: 0; - } -} -h4 { - font-size: 16px; - margin: 0; -} - -@media (max-width: 768px) { - - h1 { - font-size: 24px; - } - - h2 { - font-size: 20px; - } - - h3, .div-h3 { - font-size: 16px; - } -} - -/* LAYOUT */ -.main { - position: relative; -} - -.main__content { - position: relative; - background-color: white; - transition: padding-left .2s ease-out; - margin-top: var(--header-height-collapsed); - margin-left: 0; - - > .container { - margin: 20px 0; - } -} - -.main__content, .modal__content { - a { - text-decoration: underline; - } - - p, form, .div-p { - margin: 0.5rem 0; - - &:last-child { - margin: 0.5rem 0 0; - - &:first-child { - margin: 0; - } - } - } -} - -@media (min-width: 426px) { - .main__content { - margin-left: var(--asidenav-width-md, 50px); - } -} - -@media (min-width: 769px) { - .main__content { - margin-left: var(--asidenav-width-lg, 20%); - margin-top: var(--header-height); - } -} - -@media (min-width: 1200px) { - .main__content { - margin-left: var(--asidenav-width-xl, 250px); - } -} - -.main__content-body { - padding: 13px; -} - -@media (min-width: 426px) { - .main__content-body { - padding: 13px 20px; - } -} - -@media (min-width: 769px) { - .main__content-body { - padding: 20px 40px; - } -} - -.pseudo-focus { - outline: 5px auto var(--color-light); - outline: 5px auto -webkit-focus-ring-color; -} - -/* CONTAINER */ -.container { - - + .container { - margin-top: 20px; - } -} - -/* GENERAL BUTTON STYLES */ -input[type="submit"], -input[type="button"], -button, -.btn { - outline: 0; - border: 0; - box-shadow: 0; - background-color: var(--color-dark); - color: white; - padding: 10px 17px; - min-width: 100px; - transition: all .1s; - font-size: 16px; - cursor: pointer; - display: inline-block; - text-decoration: none; - - a:hover { - color: white; - } - - &:focus { - border-color: #3273dc; - box-shadow: 0 0 0 0.25rem rgba(50,115,220,.25); - outline: 0; - } -} - -input[type="submit"][disabled], -input[type="button"][disabled], -button[disabled], -.btn[disabled] { - opacity: 0.3; - background-color: var(--color-grey); - cursor: default; -} - -input[type="submit"]:not([disabled]):hover, -input[type="button"]:not([disabled]):hover, -button:not([disabled]):hover, -.btn:not([disabled]):hover { - background-color: var(--color-light); - color: white; -} - -.btn-primary { - background-color: var(--color-primary); -} - -.btn-info { - background-color: var(--color-info) -} - -.btn--small { - padding: 4px 7px; - background-color: var(--color-darker); -} - -input[type="submit"].btn-info:hover, -input[type="button"].btn-info:hover, -.btn-info:hover { - background-color: var(--color-grey) -} - -/* GENERAL TABLE STYLES */ -.table { - margin: 21px 0; - width: 100%; -} - -.table:first-child { - margin-top: 0; -} - -.table:last-child { - margin-bottom: 0; -} - -.table--striped { - - .table__row:not(.no-stripe):not(.table__row--sum):nth-child(even) { - background-color: rgba(0, 0, 0, 0.03); - } -} - -.table--hover { - - .table__row:not(.no-hover):not(.table__row--sum):not(.table__row--head):not(.table__row--foot):hover { - background-color: rgba(0, 0, 0, 0.07); - } -} - -.table__row--sum td.table__td::before { - content: 'Σ'; - font-weight: bold; - margin-right: .25em; -} - -/* SCROLLTABLE */ -.scrolltable { - overflow: auto; -} - -.scrolltable--bordered { - box-shadow: 0 0 1px 1px var(--color-grey-light); -} - -@media (max-width: 425px) { - - .scrolltable { - margin-left: -10px; - padding-left: 10px; - margin-right: -10px; - padding-right: 10px; - } -} - -/* TABLE DESIGN */ -.table__td, .table__th { - padding-top: 14px; - padding-bottom: 10px; - padding-left: 10px; - padding-right: 10px; - max-width: 300px; -} - -.table__td { - font-size: 16px; - color: var(--color-font); - line-height: 1.4; - vertical-align: top; -} - -.table__td--automatic { - font-style: oblique; - color: var(--color-fontsec); -} - -.table__td--overriden { - font-weight: bold; -} - -.table__th { - background-color: var(--color-dark); - position: relative; - font-size: 16px; - color: white; - line-height: 1.4; - padding-top: 10px; - padding-bottom: 10px; - font-weight: bold; - text-align: left; - - a { - color: white; - text-decoration: none; - font-weight: bold; - - &:hover { - color: inherit; - } - - &::before { - @extend .fas; - content: fa-content($fa-var-link); - margin-right: 0.25em; - } - } -} - -@media (max-width: 1200px) { - - .table th { - padding: 4px 6px; - } -} - -.table__td-content { - max-height: 200px; - overflow-y: auto; -} - -.table__th-link { - font-weight: bold; - - &::before { - display: none; - } -} - -.table--vertical { - - th { - background-color: transparent; - color: var(--color-font); - width: 170px; - text-align: right; - padding-right: 15px; - font-weight: 400; - } - - td { - font-weight: 600; - color: var(--color-font); - } -} - -.table--condensed { - margin: 0; - - .table__th, - .table__td { - padding: 4px 8px; - } -} - -/* UNORDERED LIST */ -.list-ul__item { - // padding: 4px 0; - line-height: 25px; -} - -/* LIST MODIFIERS */ -.list--iconless { - list-style-type: none; - margin-left: 0; -} - -.list--inline { - ul { - display: inline-block; - margin-left: 0; - - li { - display: inline-block; - } - } -} - -ul.list--inline { - - display: inline-block; - margin-left: 0; - - li { - display: inline-block; - } -} - -.list--comma-separated li { - &::after { - content: ', '; - white-space: pre; - } - - &:last-of-type::after { - content: none; - } -} - -.list--space-separated li { - &::after { - content: ' '; - white-space: pre; - } - - &:last-of-type::after { - content: none; - } -} - -.list--icon-width li { - width: 1rem; - height: 1rem; -} - -/* DEFINITION LIST */ -.deflist { - display: grid; - grid-template-columns: 100%; -} -.deflist__dt, -.deflist__dd { - padding: 2px 0; -} - -.deflist__dt { - font-weight: 600; -} - -.deflist__dd { - font-size: 18px; - margin-bottom: 10px; - - > p, > .div-p { - margin-top: 0; - } -} - -@media (min-width: 768px) { - - .deflist { - grid-template-columns: fit-content(25vw) 1fr; - - .deflist { - margin-top: -10px; - margin-right: -15px; - - .deflist__dd { - padding-right: 15px; - } - } - } - - .deflist__dt, - .deflist__dd { - padding: 12px 0; - margin: 0; - font-size: 16px; - - &:last-of-type { - border: 0; - } - } - - .deflist__dt { - padding-right: 50px; - } - - .deflist__dd { - padding-right: 15px; - } -} - -section { - padding-bottom: 30px; - border-bottom: 1px solid #d3d3d3; - - + section { - margin-top: 20px; - } - - &:last-child { - border-bottom: none; - padding-bottom: 0px; - } -} - -.pseudonym { - font-family: monospace; -} - -.headline-one { - margin-bottom: 10px; -} - -/* Notification style used as requested by @hamanf in #298, but class was not globally available. Copied from dead-code. For @hamanf to clean up: */ - -.notification { - position: relative; - border-radius: 3px; - padding: 10px 20px 20px; - margin: 40px auto; - box-shadow: 0 0 4px 2px inset currentColor; - padding-left: 100px; - min-height: 100px; - max-width: 700px; - font-weight: 600; - vertical-align: center; - display: grid; - grid-column: 2; - - &::before { - @extend .fas; - position: absolute; - display: flex; - left: 0; - top: 0; - height: 100%; - width: 100px; - font-size: 50px; - align-items: center; - justify-content: center; - } - - .notification__content { - grid-column: 1; - align-self: center; - - color: var(--color-font); - } - - &.notification--broad { - max-width: none; - } -} - -.form-section-notification { - display: grid; - grid-template-columns: 1fr 3fr; - grid-gap: 5px; - - fieldset { - display: grid; - grid-template-columns: 1fr 3fr; - grid-gap: 5px; - grid-column: 1/3; - } - - .notification { - margin: 0; - } - - + .form-group, + .form-section-legend, + .form-section-notification { - margin-top: 11px; - } - - + .form-section-title { - margin-top: 40px; - } -} - -@media (max-width: 768px) { - .form-section-notification { - grid-template-columns: 1fr; - margin-top: 17px; - - fieldset { - grid-template-columns: 1fr; - grid-column: 1/2; - } - } - - .notification { - grid-column: 1; - - max-width: none; - - padding-left: 40px; - - &::before { - height: auto; - width: 45px; - font-size: 40px; - top: 15px; - } - } -} - -.notification-error { - color: var(--color-error) ; -} - -.notification-warning { - color: var(--color-warning) ; -} - -.notification-info { - color: var(--color-lightblack) ; -} - -.notification-success { - color: var(--color-warning) ; -} - - - - -/* - "Heated" element. - Set custom property "--hotness" to a value from 0 to 1 to turn - the element's background to a color on a gradient from green to red. - - TBD: - - move to a proper place - - think about font-weight... - - Example: -
Lorem ipsum -*/ - -.heated { - --hotness: 0; - --red: calc(var(--hotness) * 200); - --green: calc(255 - calc(var(--hotness) * 255)); - --opacity: calc(calc(var(--red) / 600) + 0.1); - - font-weight: var(--weight, 600); - background-color: rgba(var(--red), var(--green), 0, var(--opacity)); -} - - -.uuid { - font-family: monospace; -} - - -.form--inline { - display: inline-block; -} - - -.ribbon { - position: fixed; - top: calc(40px + var(--header-height)); - transition: all .2s cubic-bezier(0.03, 0.43, 0.58, 1); - right: -63px; - transform: rotate(45deg); - width: 250px; - background: var(--color-error); - text-align: center; - color: var(--color-lightwhite); - font-weight: 600; - font-size: 1.25rem; - line-height: 2em; - box-shadow: 0 0 3px rgba(0, 0, 0, 0.4); - z-index: 19; - pointer-events: none; -} - -@media (max-width: 768px) { - .ribbon { - top: calc(20px + var(--header-height-collapsed)); - right: -83px; - transform: rotate(45deg) scale(0.6); - } -} - -#admin-studyterms { - select, option, input { - min-width: 50px; - } -} - -.allocation__label, .allocation__explanation { - color: var(--color-fontsec); - font-style: italic; -} - -.allocation__state { - color: var(--color-font); - font-weight: 600; - font-style: normal; -} - -.allocation__courses { - margin: 20px 0 0 40px; -} - -.allocation-course { - display: grid; - grid-template-columns: minmax(105px, 1fr) 9fr; - grid-template-areas: - 'name name ' - '. registered ' - 'prio-label prio ' - 'instr-label instr ' - 'form-label form '; - - grid-gap: 5px 7px; - margin: 12px 0; - padding: 0 10px 12px 7px; - - border-left: 1px solid var(--color-grey); - - /* &:last-child { - * padding: 12px 10px 0 10px; - * } - * - * & + .allocation-course { - * border-top: 1px solid var(--color-grey); - * } - */ - - &:nth-child(2n) { - background-color: rgba(0, 0, 0, 0.015); - } - - .allocation-course__registered { - grid-area: registered; - } - - .allocation-course__priority { - grid-area: prio; - } - .allocation-course__priority-label { - grid-area: prio-label; - justify-self: end; - align-self: center; - text-align: right; - } - - .allocation-course__name { - grid-area: name; - - align-self: center; - - font-size: 1.2rem; - } - - .allocation-course__instructions { - grid-area: instr; - } - .allocation-course__instructions-label { - grid-area: instr-label; - justify-self: end; - text-align: right; - } - - .allocation-course__application { - grid-area: form; - } - .allocation-course__application-label { - grid-area: form-label; - justify-self: end; - text-align: right; - padding-top: 6px; - } -} - -@media (max-width: 426px) { - .allocation-course { - grid-template-columns: 1fr; - grid-template-areas: - 'name ' - 'registered ' - 'prio-label ' - 'prio ' - 'instr-label' - 'instr ' - 'form-label ' - 'form '; - } - - .allocation-course__application-label { - padding-top: 0; - } -} - - -.comment { - white-space: pre-wrap; - font-family: monospace; -} - -th { - vertical-align: top; - text-align: left; -} - -th, td { - padding-bottom: 7px; -} - -.course-news { - max-height: 50vh; - overflow: auto; - - .course-news-item { - padding: 12px 0; - border-bottom: 1px solid #d3d3d3; - - &:last-child { - padding-bottom: 0; - border-bottom: none; - } - - &:first-child { - padding-top: 0; - } - - .course-news-item__last-edit { - color: var(--color-fontsec); - font-style: italic; - } - - .course-news-item__title .modal__trigger-label { - font-style: normal; - } - - .course-news-item__summary .modal__trigger-label { - font-weight: normal; - font-style: normal; - color: var(--color-font); - } - } -} - - -.bound_explanation { - color: var(--color-fontsec); - font-style: italic; -} - - -.action { - max-width: 800px; - padding: 3px 0; - - &:not(:last-child) { - margin-bottom: 7px; - } - - &:not(:first-child) { - margin-top: 7px; - } -} - -.action__options { - max-height: 450px; - overflow-y: auto; -} - -.action__option { - display: flex; - - &:not(:last-child) { - margin-bottom: 10px; - } -} - -.action__label, -.action__option-label { - margin-left: 15px; - vertical-align: top; -} - -.action__fieldset { - margin: 7px 0 5px 9px; - padding: 5px 0 10px; - border-left: 1px solid #bcbcbc; - padding-left: 16px; - position: relative; -} - -.action__toggle-all { - display: flex; - border-bottom: 1px solid #bcbcbc; - padding-bottom: 8px; - margin-bottom: 8px; -} - -.action__checked-counter { - position: absolute; - right: 5px; - top: 5px; -} - - -.occurrence--not-registered, .no-bonus { - text-decoration: line-through; -} - -.result { - font-size: 3rem; - margin: 30px 30px 0 !important; -} - - -.glossary { - dt, .dt { - font-weight: 600; - } - - &.sec { - font-style: italic; - font-size: 0.9rem; - font-weight: 600; - color: var(--color-fontsec); - } - dd, .dd { - margin-left: 12px; - } - - dd + dt, .dd + dt, dd + .dt, .dd + .dt { - margin-top: 17px; - } -} - - -/* SORTABLE TABLE-HEADERS*/ -.table__th.sortable { - position: relative; - padding-right: 24px; - cursor: pointer; -} - -.table__th.sortable::after, -.table__th.sortable::before { - content: ''; - position: absolute; - top: 50%; - right: 4px; - width: 0; - height: 0; - border-left: 8px solid transparent; - border-right: 8px solid transparent; - border-bottom: 8px solid rgba(255, 255, 255, 0.4); -} - -.table__th.sortable::before { - /* magic numbers to move arrow back in the right position after flipping it. - this allows us to use the same border for the up and the down arrow */ - transform: translateY(150%) scale(1, -1); - transform-origin: top; -} - -.table__th.sortable::after { - transform: translateY(-150%); -} - -.table__th.sortable:hover::before, -.table__th.sortable:hover::after { - border-bottom-color: rgba(255, 255, 255, 0.7); -} - -.table__th.sorted-asc::before, -.table__th.sorted-desc::after { - border-bottom-color: white !important; -} - - -:root { - --color-grey-light: #efefef; - --color-grey-lighter: #f5f5f5; - --color-fontsec: #5b5861; - --course-bg-color: var(--color-grey-lighter); - --course-expanded-bg-color: var(--color-grey-light); -} - -.scrolltable { - box-shadow: none!important; -} - -.course-header::after, -.course-header::before { - content: ''; - position: absolute; - right: 10px; - top: 20px; - width: 0; - height: 0; - border-left: 8px solid transparent; - border-right: 8px solid transparent; - border-bottom: 8px solid rgba(255, 255, 255, 0.4); -} - -.course-header::before { - /* magic numbers to move arrow back in the right position after flipping it. - this allows us to use the same border for the up and the down arrow */ - transform: translateY(150%) scale(1, -1); - transform-origin: top; -} - -.course-header::after { - transform: translateY(-150%); -} - -.course-header:hover::before, -.course-header:hover::after { - border-bottom-color: rgba(255, 255, 255, 0.7); -} - -.sorted-asc::before, -.sorted-desc::after { - border-bottom-color: white !important; -} - -.csv-export { - margin-bottom: 13px; - -} - -.csv-import { - margin-bottom: 13px; -} - - -.table-filter { - margin-bottom: 13px; -} - -.table-filter__toggle { - padding: 3px 7px; -} - - -/* TABLE HEADER */ -.table-header { - display: flex; - flex-flow: row-reverse; - justify-content: space-between; - margin-bottom: 15px; -} - -/* TABLE FOOTER */ -.table-footer { - display: flex; - flex-flow: row-reverse; - justify-content: space-between; - margin-top: 15px; -} - -/* PAGINATION */ -.pagination { - margin-top: 20px; - overflow: auto; - - .pages { - text-align: center; - white-space: nowrap; - margin: 0; - - .page-link { - margin-top: 7px; - display: inline-block; - background-color: var(--color-grey-medium); - - + .page-link { - margin-left: 7px; - } - - a { - color: var(--color-lightwhite); - padding: 7px 13px; - display: inline-block; - text-decoration: none; - } - - &:not(.current):hover { - background-color: var(--color-primary); - - a { - color: var(--color-lightwhite); - } - } - - &.current { - pointer-events: none; - background-color: var(--color-dark); - - a { - pointer-events: none; - } - } - } - } -} - - -#changelog { - font-size: 14px; - white-space: pre-wrap; - font-family: monospace; -} - -#gitrev { - font-size: 12px; - white-space: pre-wrap; - font-family: monospace; -} - - -.breadcrumbs__container { - position: relative; - color: var(--color-lightwhite); - padding: 4px 13px; - background-color: var(--color-dark); - line-height: 30px; -} - -@media (min-width: 426px) { - .breadcrumbs__container { - padding: 7px 20px; - } -} - -@media (min-width: 769px) { - .breadcrumbs__container { - padding: 7px 40px; - } -} - -.breadcrumbs__link { - color: var(--color-lightwhite); - - &:hover { - color: var(--color-white); - } -} - -.breadcrumbs__item { - padding-right: 14px; - position: relative; - line-height: 28px; - opacity: 0.8; - z-index: 1; - margin-right: 10px; - - &:hover { - opacity: 1; - } - - &::after { - content: ''; - position: absolute; - top: 11px; - right: 0; - width: 7px; - height: 7px; - border-style: solid; - border-width: 0; - border-bottom-width: 1px; - border-right-width: 1px; - border-color: var(--color-white); - transform: rotate(-45deg); - z-index: 10; - } -} - -.breadcrumbs__last-item { - line-height: 28px; - vertical-align: bottom; - font-weight: 600; -} - - -.recipient-category { - max-width: 400px; - padding: 3px 0; - - &:not(:last-child) { - margin-bottom: 7px; - } - - &:not(:first-child) { - margin-top: 7px; - } -} - -.recipient-category__options { - max-height: 150px; - overflow-y: auto; -} - -.recipient-category__option { - display: flex; - - &:not(:last-child) { - margin-bottom: 10px; - } -} - -.recipient-category__label, -.recipient-category__option-label { - margin-left: 15px; - vertical-align: top; -} - -.recipient-category__fieldset { - margin: 7px 0 5px 9px; - padding: 5px 0 10px; - border-left: 1px solid #bcbcbc; - padding-left: 16px; - position: relative; -} - -.recipient-category__option-add { - display: flex; - - .btn-mass-input-add { - margin-left: 10px; - padding: 10px 0; - } -} - -.recipient-category__options + .recipient-category__option-add { - margin-top: 10px; -} - -.recipient-category__toggle-all { - display: flex; - border-bottom: 1px solid #bcbcbc; - padding-bottom: 8px; - margin-bottom: 8px; -} - -.recipient-category__checked-counter { - position: absolute; - right: 5px; - top: 5px; -} - - -.table__td--csv, .table__th--csv { - font-family: monospace; -} - - -.confirmationText { - white-space: pre-wrap; - font-size: 14px; - font-family: monospace; -} - - -.func-field__wrapper { - max-height: 75vh; - overflow: auto; -} - - -.footer { - text-align: center; - padding: 20px; - position: relative; - margin: 40px 0; - - &::before { - content: ''; - position: absolute; - top: 0; - left: 10%; - width: 80%; - height: 2px; - background-color: var(--color-grey-light); - } -} - -.footer-links * { - margin-right: 0.5em; - - &:last { - margin-right: 0; - } -} - - -.table--grading-key { - th, td { - padding: 3px; - } -} - -.btn.btn-mass-input-delete, -.btn.btn-mass-input-add { - background-color: #999; - min-width: 50px; - padding: 5px 15px; - font-weight: 700; - font-size: 1.3rem; -} - - -.file-input__unpack { - font-size: .9rem; - display: flex; - align-items: center; - margin-top: 10px; - - .checkbox { - display: inline-block; - margin-left: 7px; - } -} - - -.pagenav { - display: flex; - align-items: flex-start; - padding-bottom: 15px; - margin-bottom: 20px; - border-bottom: 1px solid #eee; -} - -.pagenav__list-item { - flex: 1; - position: relative; - display: inline-flex; - box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.6); - margin: 10px 10px 0 0; -} - -.pagenav__link-wrapper { - flex: 1; - padding: 10px 10px 12px; - text-decoration: none !important; - - &:hover { - background-color: var(--color-grey-light); - } -} - -@media (max-width: 1024px) { - - .pagenav { - flex-direction: column; - } -} - -@media (min-width: 1025px) { - .pagenav-secondary { - position: relative; - overflow: visible; - padding-top: 10px; - - &::after { - content: '\2026'; - display: inline-block; - padding: 10px 10px 12px; - width: 40px; - box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.6); - box-sizing: border-box; - text-align: center; - transition: box-shadow 0.2s ease; - } - - &:hover { - &::after { - box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.8); - } - - .pagenav-secondary__list { - display: block; - } - } - } - - .pagenav-secondary__list { - position: absolute; - display: none; - right: 0; - top: 50px; - width: 250px; - background-color: white; - box-shadow: 0 0 6px 3px var(--color-grey-light); - z-index: 18; - } - - .pagenav__list-item--secondary { - display: flex; - box-shadow: none; - margin: 0; - - &:hover { - background-color: var(--color-grey-light); - } - } -} - - -##{theId} { - list-style-type: none; -} diff --git a/frontend/src/utils/alerts/alerts.js b/frontend/src/utils/alerts/alerts.js index 3c4eba683..6c4a41a40 100644 --- a/frontend/src/utils/alerts/alerts.js +++ b/frontend/src/utils/alerts/alerts.js @@ -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'; diff --git a/frontend/src/utils/alerts/alerts.sass b/frontend/src/utils/alerts/alerts.sass new file mode 100644 index 000000000..340b85f01 --- /dev/null +++ b/frontend/src/utils/alerts/alerts.sass @@ -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'; + // } diff --git a/frontend/src/utils/alerts/alerts.scss b/frontend/src/utils/alerts/alerts.scss deleted file mode 100644 index ee800d40a..000000000 --- a/frontend/src/utils/alerts/alerts.scss +++ /dev/null @@ -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'; - * } - */ -} diff --git a/frontend/src/utils/asidenav/asidenav.js b/frontend/src/utils/asidenav/asidenav.js index 2964e1617..6bf425ffa 100644 --- a/frontend/src/utils/asidenav/asidenav.js +++ b/frontend/src/utils/asidenav/asidenav.js @@ -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'; diff --git a/frontend/src/utils/asidenav/asidenav.sass b/frontend/src/utils/asidenav/asidenav.sass new file mode 100644 index 000000000..b9beb15b4 --- /dev/null +++ b/frontend/src/utils/asidenav/asidenav.sass @@ -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) diff --git a/frontend/src/utils/asidenav/asidenav.scss b/frontend/src/utils/asidenav/asidenav.scss deleted file mode 100644 index 477292d38..000000000 --- a/frontend/src/utils/asidenav/asidenav.scss +++ /dev/null @@ -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); - } - } - } -} diff --git a/frontend/src/utils/async-form/async-form.js b/frontend/src/utils/async-form/async-form.js index f366f9eae..6c0da95c0 100644 --- a/frontend/src/utils/async-form/async-form.js +++ b/frontend/src/utils/async-form/async-form.js @@ -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'; diff --git a/frontend/src/utils/async-form/async-form.sass b/frontend/src/utils/async-form/async-form.sass new file mode 100644 index 000000000..c4e54719d --- /dev/null +++ b/frontend/src/utils/async-form/async-form.sass @@ -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 diff --git a/frontend/src/utils/async-form/async-form.scss b/frontend/src/utils/async-form/async-form.scss deleted file mode 100644 index bd5a97a41..000000000 --- a/frontend/src/utils/async-form/async-form.scss +++ /dev/null @@ -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; -} diff --git a/frontend/src/utils/async-table/async-table-filter.sass b/frontend/src/utils/async-table/async-table-filter.sass new file mode 100644 index 000000000..2108e9066 --- /dev/null +++ b/frontend/src/utils/async-table/async-table-filter.sass @@ -0,0 +1,4 @@ +.async-table-filter--loading + opacity: 0.7 + pointer-events: none + transition: opacity 400ms ease-out diff --git a/frontend/src/utils/async-table/async-table-filter.scss b/frontend/src/utils/async-table/async-table-filter.scss deleted file mode 100644 index 794240f3f..000000000 --- a/frontend/src/utils/async-table/async-table-filter.scss +++ /dev/null @@ -1,5 +0,0 @@ -.async-table-filter--loading { - opacity: 0.7; - pointer-events: none; - transition: opacity 400ms ease-out; -} diff --git a/frontend/src/utils/async-table/async-table.js b/frontend/src/utils/async-table/async-table.js index 80dadca3a..f2d1248ab 100644 --- a/frontend/src/utils/async-table/async-table.js +++ b/frontend/src/utils/async-table/async-table.js @@ -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; diff --git a/frontend/src/utils/async-table/async-table.sass b/frontend/src/utils/async-table/async-table.sass new file mode 100644 index 000000000..3b885cdbe --- /dev/null +++ b/frontend/src/utils/async-table/async-table.sass @@ -0,0 +1,4 @@ +.async-table--loading + opacity: 0.7 + pointer-events: none + transition: opacity 400ms ease-out diff --git a/frontend/src/utils/async-table/async-table.scss b/frontend/src/utils/async-table/async-table.scss deleted file mode 100644 index 9766daa84..000000000 --- a/frontend/src/utils/async-table/async-table.scss +++ /dev/null @@ -1,5 +0,0 @@ -.async-table--loading { - opacity: 0.7; - pointer-events: none; - transition: opacity 400ms ease-out; -} diff --git a/frontend/src/utils/course-teaser/course-teaser.js b/frontend/src/utils/course-teaser/course-teaser.js index 7f8c32630..889e7937a 100644 --- a/frontend/src/utils/course-teaser/course-teaser.js +++ b/frontend/src/utils/course-teaser/course-teaser.js @@ -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'; diff --git a/frontend/src/utils/course-teaser/course-teaser.sass b/frontend/src/utils/course-teaser/course-teaser.sass new file mode 100644 index 000000000..56831de4f --- /dev/null +++ b/frontend/src/utils/course-teaser/course-teaser.sass @@ -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 diff --git a/frontend/src/utils/course-teaser/course-teaser.scss b/frontend/src/utils/course-teaser/course-teaser.scss deleted file mode 100644 index 68576fb1e..000000000 --- a/frontend/src/utils/course-teaser/course-teaser.scss +++ /dev/null @@ -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; -} diff --git a/frontend/src/utils/form/form.js b/frontend/src/utils/form/form.js index 1e8fb6d3a..6d30a501b 100644 --- a/frontend/src/utils/form/form.js +++ b/frontend/src/utils/form/form.js @@ -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'; diff --git a/frontend/src/utils/form/form.sass b/frontend/src/utils/form/form.sass new file mode 100644 index 000000000..675deabd9 --- /dev/null +++ b/frontend/src/utils/form/form.sass @@ -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 diff --git a/frontend/src/utils/form/form.scss b/frontend/src/utils/form/form.scss deleted file mode 100644 index 6ec870f9e..000000000 --- a/frontend/src/utils/form/form.scss +++ /dev/null @@ -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; -} diff --git a/frontend/src/utils/hide-columns/hide-columns.js b/frontend/src/utils/hide-columns/hide-columns.js index acedc2375..712de7d68 100644 --- a/frontend/src/utils/hide-columns/hide-columns.js +++ b/frontend/src/utils/hide-columns/hide-columns.js @@ -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'; diff --git a/frontend/src/utils/hide-columns/hide-columns.sass b/frontend/src/utils/hide-columns/hide-columns.sass new file mode 100644 index 000000000..e257b7045 --- /dev/null +++ b/frontend/src/utils/hide-columns/hide-columns.sass @@ -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 diff --git a/frontend/src/utils/hide-columns/hide-columns.scss b/frontend/src/utils/hide-columns/hide-columns.scss deleted file mode 100644 index 59aab069d..000000000 --- a/frontend/src/utils/hide-columns/hide-columns.scss +++ /dev/null @@ -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; -} diff --git a/frontend/src/utils/inputs/checkbox.js b/frontend/src/utils/inputs/checkbox.js index 6f52ea3ae..1cf408ba8 100644 --- a/frontend/src/utils/inputs/checkbox.js +++ b/frontend/src/utils/inputs/checkbox.js @@ -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'; diff --git a/frontend/src/utils/inputs/checkbox.sass b/frontend/src/utils/inputs/checkbox.sass new file mode 100644 index 000000000..ce15110ae --- /dev/null +++ b/frontend/src/utils/inputs/checkbox.sass @@ -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 diff --git a/frontend/src/utils/inputs/checkbox.scss b/frontend/src/utils/inputs/checkbox.scss deleted file mode 100644 index 817aa5f3a..000000000 --- a/frontend/src/utils/inputs/checkbox.scss +++ /dev/null @@ -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; -} diff --git a/frontend/src/utils/inputs/file-input.js b/frontend/src/utils/inputs/file-input.js index 568e1baf4..e84d2ce26 100644 --- a/frontend/src/utils/inputs/file-input.js +++ b/frontend/src/utils/inputs/file-input.js @@ -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'; diff --git a/frontend/src/utils/inputs/file-input.sass b/frontend/src/utils/inputs/file-input.sass new file mode 100644 index 000000000..576aad0b5 --- /dev/null +++ b/frontend/src/utils/inputs/file-input.sass @@ -0,0 +1,2 @@ +.file-input__list:empty + display: none diff --git a/frontend/src/utils/inputs/file-input.scss b/frontend/src/utils/inputs/file-input.scss deleted file mode 100644 index 7bf23248d..000000000 --- a/frontend/src/utils/inputs/file-input.scss +++ /dev/null @@ -1,3 +0,0 @@ -.file-input__list:empty { - display: none; -} diff --git a/frontend/src/utils/inputs/inputs.js b/frontend/src/utils/inputs/inputs.js index abda566a5..1909d964a 100644 --- a/frontend/src/utils/inputs/inputs.js +++ b/frontend/src/utils/inputs/inputs.js @@ -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, diff --git a/frontend/src/utils/inputs/inputs.sass b/frontend/src/utils/inputs/inputs.sass new file mode 100644 index 000000000..ec9581ff7 --- /dev/null +++ b/frontend/src/utils/inputs/inputs.sass @@ -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 diff --git a/frontend/src/utils/inputs/inputs.scss b/frontend/src/utils/inputs/inputs.scss deleted file mode 100644 index f19a17bda..000000000 --- a/frontend/src/utils/inputs/inputs.scss +++ /dev/null @@ -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; - } -} diff --git a/frontend/src/utils/inputs/radio.sass b/frontend/src/utils/inputs/radio.sass new file mode 100644 index 000000000..367a05702 --- /dev/null +++ b/frontend/src/utils/inputs/radio.sass @@ -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 diff --git a/frontend/src/utils/inputs/radio.scss b/frontend/src/utils/inputs/radio.scss deleted file mode 100644 index 8e36edbda..000000000 --- a/frontend/src/utils/inputs/radio.scss +++ /dev/null @@ -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; - } -} diff --git a/frontend/src/utils/mass-input/mass-input.js b/frontend/src/utils/mass-input/mass-input.js index f6c8357b2..403c626ac 100644 --- a/frontend/src/utils/mass-input/mass-input.js +++ b/frontend/src/utils/mass-input/mass-input.js @@ -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'; diff --git a/frontend/src/utils/mass-input/mass-input.sass b/frontend/src/utils/mass-input/mass-input.sass new file mode 100644 index 000000000..89bdf08c9 --- /dev/null +++ b/frontend/src/utils/mass-input/mass-input.sass @@ -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 diff --git a/frontend/src/utils/mass-input/mass-input.scss b/frontend/src/utils/mass-input/mass-input.scss deleted file mode 100644 index d8f006d36..000000000 --- a/frontend/src/utils/mass-input/mass-input.scss +++ /dev/null @@ -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; -} diff --git a/frontend/src/utils/modal/modal.js b/frontend/src/utils/modal/modal.js index 3958d6c2c..52a9a2b99 100644 --- a/frontend/src/utils/modal/modal.js +++ b/frontend/src/utils/modal/modal.js @@ -1,5 +1,5 @@ import { Utility } from '../../core/utility'; -import './modal.scss'; +import './modal.sass'; const MODAL_HEADERS = { 'Is-Modal': 'True', diff --git a/frontend/src/utils/modal/modal.sass b/frontend/src/utils/modal/modal.sass new file mode 100644 index 000000000..4a2b69459 --- /dev/null +++ b/frontend/src/utils/modal/modal.sass @@ -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% diff --git a/frontend/src/utils/modal/modal.scss b/frontend/src/utils/modal/modal.scss deleted file mode 100644 index 446863f03..000000000 --- a/frontend/src/utils/modal/modal.scss +++ /dev/null @@ -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%; -} diff --git a/frontend/src/utils/navbar/navbar.js b/frontend/src/utils/navbar/navbar.js index 95af958f4..0bb6fb029 100644 --- a/frontend/src/utils/navbar/navbar.js +++ b/frontend/src/utils/navbar/navbar.js @@ -1,5 +1,5 @@ import { Utility } from '../../core/utility'; -import './navbar.scss'; +import './navbar.sass'; export const LANGUAGE_SELECT_UTIL_SELECTOR = '[uw-language-select]'; diff --git a/frontend/src/utils/navbar/navbar.sass b/frontend/src/utils/navbar/navbar.sass new file mode 100644 index 000000000..05e3e23ab --- /dev/null +++ b/frontend/src/utils/navbar/navbar.sass @@ -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) diff --git a/frontend/src/utils/navbar/navbar.scss b/frontend/src/utils/navbar/navbar.scss deleted file mode 100644 index 888d8d5cb..000000000 --- a/frontend/src/utils/navbar/navbar.scss +++ /dev/null @@ -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); - } -} diff --git a/frontend/src/utils/show-hide/show-hide.js b/frontend/src/utils/show-hide/show-hide.js index aa1f4f792..4da5f8c06 100644 --- a/frontend/src/utils/show-hide/show-hide.js +++ b/frontend/src/utils/show-hide/show-hide.js @@ -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'; diff --git a/frontend/src/utils/show-hide/show-hide.sass b/frontend/src/utils/show-hide/show-hide.sass new file mode 100644 index 000000000..cb5c922f2 --- /dev/null +++ b/frontend/src/utils/show-hide/show-hide.sass @@ -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 diff --git a/frontend/src/utils/show-hide/show-hide.scss b/frontend/src/utils/show-hide/show-hide.scss deleted file mode 100644 index f557248fb..000000000 --- a/frontend/src/utils/show-hide/show-hide.scss +++ /dev/null @@ -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; - } -} diff --git a/frontend/src/utils/tabber/tabber.js b/frontend/src/utils/tabber/tabber.js index c44caa44b..39ed37576 100644 --- a/frontend/src/utils/tabber/tabber.js +++ b/frontend/src/utils/tabber/tabber.js @@ -1,4 +1,4 @@ -import './tabber.scss'; +import './tabber.sass'; (function($) { diff --git a/frontend/src/utils/tabber/tabber.sass b/frontend/src/utils/tabber/tabber.sass new file mode 100644 index 000000000..eea4355fd --- /dev/null +++ b/frontend/src/utils/tabber/tabber.sass @@ -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) diff --git a/frontend/src/utils/tabber/tabber.scss b/frontend/src/utils/tabber/tabber.scss deleted file mode 100644 index d135a5f27..000000000 --- a/frontend/src/utils/tabber/tabber.scss +++ /dev/null @@ -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); -} diff --git a/frontend/src/utils/tooltips/tooltips.js b/frontend/src/utils/tooltips/tooltips.js index b773eef39..c4813957e 100644 --- a/frontend/src/utils/tooltips/tooltips.js +++ b/frontend/src/utils/tooltips/tooltips.js @@ -1,5 +1,5 @@ import { Utility } from '../../core/utility'; -import './tooltips.scss'; +import './tooltips.sass'; // empty 'shell' to be able to load styles @Utility({ diff --git a/frontend/src/utils/tooltips/tooltips.sass b/frontend/src/utils/tooltips/tooltips.sass new file mode 100644 index 000000000..dc3861fee --- /dev/null +++ b/frontend/src/utils/tooltips/tooltips.sass @@ -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 diff --git a/frontend/src/utils/tooltips/tooltips.scss b/frontend/src/utils/tooltips/tooltips.scss deleted file mode 100644 index 845c33310..000000000 --- a/frontend/src/utils/tooltips/tooltips.scss +++ /dev/null @@ -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; -} diff --git a/package-lock.json b/package-lock.json index e1895328f..76cf43601 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2633,6 +2633,12 @@ "integrity": "sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==", "dev": true }, + "@types/q": { + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.2.tgz", + "integrity": "sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw==", + "dev": true + }, "@types/semver": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/@types/semver/-/semver-6.0.2.tgz", @@ -3022,6 +3028,12 @@ "integrity": "sha512-aUjdRFISbuFOl0EIZc+9e4FfZp0bDZgAdOOf30bJmw8VM9v84SHyVyxDfbWxpGYbdZD/9XoKxfHVNmxPkhwyGw==", "dev": true }, + "alphanum-sort": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/alphanum-sort/-/alphanum-sort-1.0.2.tgz", + "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=", + "dev": true + }, "ansi-colors": { "version": "3.2.4", "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz", @@ -4206,6 +4218,12 @@ "type-is": "~1.6.17" } }, + "boolbase": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", + "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=", + "dev": true + }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -4546,6 +4564,18 @@ } } }, + "caniuse-api": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz", + "integrity": "sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==", + "dev": true, + "requires": { + "browserslist": "^4.0.0", + "caniuse-lite": "^1.0.0", + "lodash.memoize": "^4.1.2", + "lodash.uniq": "^4.5.0" + } + }, "caniuse-lite": { "version": "1.0.30001015", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001015.tgz", @@ -4770,6 +4800,17 @@ "shallow-clone": "^3.0.0" } }, + "coa": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/coa/-/coa-2.0.2.tgz", + "integrity": "sha512-q5/jG+YQnSy4nRTV4F7lPepBJZ8qBNJJDBuJdoejDyLXgmL7IEo+Le2JDZudFTFt7mrCqIRaSjws4ygRCTCAXA==", + "dev": true, + "requires": { + "@types/q": "^1.5.1", + "chalk": "^2.4.1", + "q": "^1.1.2" + } + }, "code-point-at": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz", @@ -4786,6 +4827,16 @@ "object-visit": "^1.0.0" } }, + "color": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/color/-/color-3.1.2.tgz", + "integrity": "sha512-vXTJhHebByxZn3lDvDJYw4lR5+uB3vuoHsuYA5AKuxRVn5wzzIfQKGLBmgdVRHKTJYeK5rvJcHnrd0Li49CFpg==", + "dev": true, + "requires": { + "color-convert": "^1.9.1", + "color-string": "^1.5.2" + } + }, "color-convert": { "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", @@ -4801,6 +4852,16 @@ "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=", "dev": true }, + "color-string": { + "version": "1.5.3", + "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.5.3.tgz", + "integrity": "sha512-dC2C5qeWoYkxki5UAXapdjqO672AM4vZuPGRQfO8b5HKuKGBbKWpITyDYN7TOFKvRW7kOgAn3746clDBMDJyQw==", + "dev": true, + "requires": { + "color-name": "^1.0.0", + "simple-swizzle": "^0.2.2" + } + }, "colors": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/colors/-/colors-1.4.0.tgz", @@ -6283,6 +6344,22 @@ "postcss": "^7.0.5" } }, + "css-color-names": { + "version": "0.0.4", + "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz", + "integrity": "sha1-gIrcLnnPhHOAabZGyyDsJ762KeA=", + "dev": true + }, + "css-declaration-sorter": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-4.0.1.tgz", + "integrity": "sha512-BcxQSKTSEEQUftYpBVnsH4SF05NTuBokb19/sBt6asXGKZ/6VP7PLG1CBCkFDYOnhXhPh0jMhO6xZ71oYHXHBA==", + "dev": true, + "requires": { + "postcss": "^7.0.1", + "timsort": "^0.3.0" + } + }, "css-has-pseudo": { "version": "0.10.0", "resolved": "https://registry.npmjs.org/css-has-pseudo/-/css-has-pseudo-0.10.0.tgz", @@ -6340,6 +6417,54 @@ "postcss": "^7.0.5" } }, + "css-select": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/css-select/-/css-select-2.1.0.tgz", + "integrity": "sha512-Dqk7LQKpwLoH3VovzZnkzegqNSuAziQyNZUcrdDM401iY+R5NkGBXGmtO05/yaXQziALuPogeG0b7UAgjnTJTQ==", + "dev": true, + "requires": { + "boolbase": "^1.0.0", + "css-what": "^3.2.1", + "domutils": "^1.7.0", + "nth-check": "^1.0.2" + } + }, + "css-select-base-adapter": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz", + "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==", + "dev": true + }, + "css-tree": { + "version": "1.0.0-alpha.37", + "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz", + "integrity": "sha512-DMxWJg0rnz7UgxKT0Q1HU/L9BeJI0M6ksor0OgqOnF+aRCDWg/N2641HmVyU9KVIu0OVVWOb2IpC9A+BJRnejg==", + "dev": true, + "requires": { + "mdn-data": "2.0.4", + "source-map": "^0.6.1" + }, + "dependencies": { + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + } + } + }, + "css-unit-converter": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.1.tgz", + "integrity": "sha1-2bkoGtz9jO2TW9urqDeGiX9k6ZY=", + "dev": true + }, + "css-what": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.2.1.tgz", + "integrity": "sha512-WwOrosiQTvyms+Ti5ZC5vGEK0Vod3FTt1ca+payZqvKuGJF+dq7bG63DstxtN0dpm6FxY27a/zS3Wten+gEtGw==", + "dev": true + }, "cssdb": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-4.4.0.tgz", @@ -6352,6 +6477,92 @@ "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==", "dev": true }, + "cssnano": { + "version": "4.1.10", + "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-4.1.10.tgz", + "integrity": "sha512-5wny+F6H4/8RgNlaqab4ktc3e0/blKutmq8yNlBFXA//nSFFAqAngjNVRzUvCgYROULmZZUoosL/KSoZo5aUaQ==", + "dev": true, + "requires": { + "cosmiconfig": "^5.0.0", + "cssnano-preset-default": "^4.0.7", + "is-resolvable": "^1.0.0", + "postcss": "^7.0.0" + } + }, + "cssnano-preset-default": { + "version": "4.0.7", + "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-4.0.7.tgz", + "integrity": "sha512-x0YHHx2h6p0fCl1zY9L9roD7rnlltugGu7zXSKQx6k2rYw0Hi3IqxcoAGF7u9Q5w1nt7vK0ulxV8Lo+EvllGsA==", + "dev": true, + "requires": { + "css-declaration-sorter": "^4.0.1", + "cssnano-util-raw-cache": "^4.0.1", + "postcss": "^7.0.0", + "postcss-calc": "^7.0.1", + "postcss-colormin": "^4.0.3", + "postcss-convert-values": "^4.0.1", + "postcss-discard-comments": "^4.0.2", + "postcss-discard-duplicates": "^4.0.2", + "postcss-discard-empty": "^4.0.1", + "postcss-discard-overridden": "^4.0.1", + "postcss-merge-longhand": "^4.0.11", + "postcss-merge-rules": "^4.0.3", + "postcss-minify-font-values": "^4.0.2", + "postcss-minify-gradients": "^4.0.2", + "postcss-minify-params": "^4.0.2", + "postcss-minify-selectors": "^4.0.2", + "postcss-normalize-charset": "^4.0.1", + "postcss-normalize-display-values": "^4.0.2", + "postcss-normalize-positions": "^4.0.2", + "postcss-normalize-repeat-style": "^4.0.2", + "postcss-normalize-string": "^4.0.2", + "postcss-normalize-timing-functions": "^4.0.2", + "postcss-normalize-unicode": "^4.0.1", + "postcss-normalize-url": "^4.0.1", + "postcss-normalize-whitespace": "^4.0.2", + "postcss-ordered-values": "^4.1.2", + "postcss-reduce-initial": "^4.0.3", + "postcss-reduce-transforms": "^4.0.2", + "postcss-svgo": "^4.0.2", + "postcss-unique-selectors": "^4.0.1" + } + }, + "cssnano-util-get-arguments": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/cssnano-util-get-arguments/-/cssnano-util-get-arguments-4.0.0.tgz", + "integrity": "sha1-7ToIKZ8h11dBsg87gfGU7UnMFQ8=", + "dev": true + }, + "cssnano-util-get-match": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/cssnano-util-get-match/-/cssnano-util-get-match-4.0.0.tgz", + "integrity": "sha1-wOTKB/U4a7F+xeUiULT1lhNlFW0=", + "dev": true + }, + "cssnano-util-raw-cache": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/cssnano-util-raw-cache/-/cssnano-util-raw-cache-4.0.1.tgz", + "integrity": "sha512-qLuYtWK2b2Dy55I8ZX3ky1Z16WYsx544Q0UWViebptpwn/xDBmog2TLg4f+DBMg1rJ6JDWtn96WHbOKDWt1WQA==", + "dev": true, + "requires": { + "postcss": "^7.0.0" + } + }, + "cssnano-util-same-parent": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/cssnano-util-same-parent/-/cssnano-util-same-parent-4.0.1.tgz", + "integrity": "sha512-WcKx5OY+KoSIAxBW6UBBRay1U6vkYheCdjyVNDm85zt5K9mHoGOfsOsqIszfAqrQQFIIKgjh2+FDgIj/zsl21Q==", + "dev": true + }, + "csso": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/csso/-/csso-4.0.2.tgz", + "integrity": "sha512-kS7/oeNVXkHWxby5tHVxlhjizRCSv8QdU7hB2FpdAibDU8FjTAolhNjKNTiLzXtUrKT6HwClE81yXwEk1309wg==", + "dev": true, + "requires": { + "css-tree": "1.0.0-alpha.37" + } + }, "currently-unhandled": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz", @@ -6625,12 +6836,46 @@ "void-elements": "^2.0.0" } }, + "dom-serializer": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz", + "integrity": "sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==", + "dev": true, + "requires": { + "domelementtype": "^2.0.1", + "entities": "^2.0.0" + }, + "dependencies": { + "domelementtype": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.0.1.tgz", + "integrity": "sha512-5HOHUDsYZWV8FGWN0Njbr/Rn7f/eWSQi1v7+HsUVwXgn8nWWlL64zKDkS0n8ZmQ3mlWOMuXOnR+7Nx/5tMO5AQ==", + "dev": true + } + } + }, "domain-browser": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz", "integrity": "sha512-jnjyiM6eRyZl2H+W8Q/zLMA481hzi0eszAaBUzIVnmYVDBbnLxVNnfu1HgEBvCbL+71FrxMl3E6lpKH7Ge3OXA==", "dev": true }, + "domelementtype": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz", + "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==", + "dev": true + }, + "domutils": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz", + "integrity": "sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==", + "dev": true, + "requires": { + "dom-serializer": "0", + "domelementtype": "1" + } + }, "dot-prop": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-3.0.0.tgz", @@ -6825,6 +7070,12 @@ "integrity": "sha1-6WQhkyWiHQX0RGai9obtbOX13R0=", "dev": true }, + "entities": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/entities/-/entities-2.0.0.tgz", + "integrity": "sha512-D9f7V0JSRwIxlRI2mjMqufDrRDnx8p+eEOz7aUM9SuvF8gsBzra0/6tbjl1m8eQHrZlYj6PxqE00hZ1SAIKPLw==", + "dev": true + }, "errno": { "version": "0.1.7", "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.7.tgz", @@ -8793,6 +9044,12 @@ "minimalistic-assert": "^1.0.1" } }, + "hex-color-regex": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz", + "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==", + "dev": true + }, "hmac-drbg": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", @@ -8829,6 +9086,24 @@ "integrity": "sha512-7T/BxH19zbcCTa8XkMlbK5lTo1WtgkFi3GvdWEyNuc4Vex7/9Dqbnpsf4JMydcfj9HCg4zUWFTL3Za6lapg5/w==", "dev": true }, + "hsl-regex": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/hsl-regex/-/hsl-regex-1.0.0.tgz", + "integrity": "sha1-1JMwx4ntgZ4nakwNJy3/owsY/m4=", + "dev": true + }, + "hsla-regex": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/hsla-regex/-/hsla-regex-1.0.0.tgz", + "integrity": "sha1-wc56MWjIxmFAM6S194d/OyJfnDg=", + "dev": true + }, + "html-comment-regex": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/html-comment-regex/-/html-comment-regex-1.1.2.tgz", + "integrity": "sha512-P+M65QY2JQ5Y0G9KKdlDpo0zK+/OHptU5AaBwUfAIDJZk1MYf32Frm84EcOytfJE0t5JvkAnKlmjsXDnWzCJmQ==", + "dev": true + }, "http-errors": { "version": "1.7.2", "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz", @@ -9123,6 +9398,12 @@ "loose-envify": "^1.0.0" } }, + "is-absolute-url": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-2.1.0.tgz", + "integrity": "sha1-UFMN+4T8yap9vnhS6Do3uTufKqY=", + "dev": true + }, "is-accessor-descriptor": { "version": "0.1.6", "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz", @@ -9179,6 +9460,20 @@ "ci-info": "^2.0.0" } }, + "is-color-stop": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/is-color-stop/-/is-color-stop-1.1.0.tgz", + "integrity": "sha1-z/9HGu5N1cnhWFmPvhKWe1za00U=", + "dev": true, + "requires": { + "css-color-names": "^0.0.4", + "hex-color-regex": "^1.1.0", + "hsl-regex": "^1.0.0", + "hsla-regex": "^1.0.0", + "rgb-regex": "^1.0.1", + "rgba-regex": "^1.0.0" + } + }, "is-data-descriptor": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz", @@ -9361,12 +9656,27 @@ "integrity": "sha1-/S2INUXEa6xaYz57mgnof6LLUGk=", "dev": true }, + "is-resolvable": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/is-resolvable/-/is-resolvable-1.1.0.tgz", + "integrity": "sha512-qgDYXFSR5WvEfuS5dMj6oTMEbrrSaM0CrFk2Yiq/gXnBvD9pMa2jGXxyhGLfvhZpuMZe18CJpFxAt3CRs42NMg==", + "dev": true + }, "is-stream": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz", "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=", "dev": true }, + "is-svg": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/is-svg/-/is-svg-3.0.0.tgz", + "integrity": "sha512-gi4iHK53LR2ujhLVVj+37Ykh9GLqYHX6JOVXbLAucaG/Cqw9xwdFOjDM2qeifLs1sF1npXXFvDu0r5HNgCMrzQ==", + "dev": true, + "requires": { + "html-comment-regex": "^1.1.0" + } + }, "is-symbol": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.2.tgz", @@ -9770,6 +10080,16 @@ "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==", "dev": true }, + "last-call-webpack-plugin": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/last-call-webpack-plugin/-/last-call-webpack-plugin-3.0.0.tgz", + "integrity": "sha512-7KI2l2GIZa9p2spzPIVZBYyNKkN+e/SQPpnjlTiPhdbDW3F86tdKKELxKpzJ5sgU19wQWsACULZmpTPYHeWO5w==", + "dev": true, + "requires": { + "lodash": "^4.17.5", + "webpack-sources": "^1.1.0" + } + }, "levn": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz", @@ -10044,6 +10364,12 @@ "integrity": "sha1-dWy1FQyjum8RCFp4hJZF8Yj4Xzc=", "dev": true }, + "lodash.memoize": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz", + "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=", + "dev": true + }, "lodash.template": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.4.0.tgz", @@ -10063,6 +10389,12 @@ "lodash._reinterpolate": "~3.0.0" } }, + "lodash.uniq": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz", + "integrity": "sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=", + "dev": true + }, "log-symbols": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-2.2.0.tgz", @@ -10226,6 +10558,12 @@ "safe-buffer": "^5.1.2" } }, + "mdn-data": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz", + "integrity": "sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==", + "dev": true + }, "media-typer": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", @@ -13844,6 +14182,15 @@ "which": "^1.2.10" } }, + "nth-check": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz", + "integrity": "sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==", + "dev": true, + "requires": { + "boolbase": "~1.0.0" + } + }, "null-check": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/null-check/-/null-check-1.0.0.tgz", @@ -13915,6 +14262,12 @@ } } }, + "object-inspect": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.7.0.tgz", + "integrity": "sha512-a7pEHdh1xKIAgTySUGgLMx/xwDZskN1Ud6egYYN3EdRW4ZMPNEDUTF+hwy2LUC+Bl+SyLXANnwz/jyh/qutKUw==", + "dev": true + }, "object-keys": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz", @@ -13960,6 +14313,54 @@ "has": "^1.0.3" } }, + "object.getownpropertydescriptors": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.0.tgz", + "integrity": "sha512-Z53Oah9A3TdLoblT7VKJaTDdXdT+lQO+cNpKVnya5JDe9uLvzu1YyY1yFDFrcxrlRgWrEFH0jJtD/IbuwjcEVg==", + "dev": true, + "requires": { + "define-properties": "^1.1.3", + "es-abstract": "^1.17.0-next.1" + }, + "dependencies": { + "es-abstract": { + "version": "1.17.0-next.1", + "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.0-next.1.tgz", + "integrity": "sha512-7MmGr03N7Rnuid6+wyhD9sHNE2n4tFSwExnU2lQl3lIo2ShXWGePY80zYaoMOmILWv57H0amMjZGHNzzGG70Rw==", + "dev": true, + "requires": { + "es-to-primitive": "^1.2.1", + "function-bind": "^1.1.1", + "has": "^1.0.3", + "has-symbols": "^1.0.1", + "is-callable": "^1.1.4", + "is-regex": "^1.0.4", + "object-inspect": "^1.7.0", + "object-keys": "^1.1.1", + "object.assign": "^4.1.0", + "string.prototype.trimleft": "^2.1.0", + "string.prototype.trimright": "^2.1.0" + } + }, + "es-to-primitive": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz", + "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==", + "dev": true, + "requires": { + "is-callable": "^1.1.4", + "is-date-object": "^1.0.1", + "is-symbol": "^1.0.2" + } + }, + "has-symbols": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.1.tgz", + "integrity": "sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg==", + "dev": true + } + } + }, "object.pick": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/object.pick/-/object.pick-1.3.0.tgz", @@ -13969,6 +14370,56 @@ "isobject": "^3.0.1" } }, + "object.values": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.1.tgz", + "integrity": "sha512-WTa54g2K8iu0kmS/us18jEmdv1a4Wi//BZ/DTVYEcH0XhLM5NYdpDHja3gt57VrZLcNAO2WGA+KpWsDBaHt6eA==", + "dev": true, + "requires": { + "define-properties": "^1.1.3", + "es-abstract": "^1.17.0-next.1", + "function-bind": "^1.1.1", + "has": "^1.0.3" + }, + "dependencies": { + "es-abstract": { + "version": "1.17.0-next.1", + "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.0-next.1.tgz", + "integrity": "sha512-7MmGr03N7Rnuid6+wyhD9sHNE2n4tFSwExnU2lQl3lIo2ShXWGePY80zYaoMOmILWv57H0amMjZGHNzzGG70Rw==", + "dev": true, + "requires": { + "es-to-primitive": "^1.2.1", + "function-bind": "^1.1.1", + "has": "^1.0.3", + "has-symbols": "^1.0.1", + "is-callable": "^1.1.4", + "is-regex": "^1.0.4", + "object-inspect": "^1.7.0", + "object-keys": "^1.1.1", + "object.assign": "^4.1.0", + "string.prototype.trimleft": "^2.1.0", + "string.prototype.trimright": "^2.1.0" + } + }, + "es-to-primitive": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz", + "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==", + "dev": true, + "requires": { + "is-callable": "^1.1.4", + "is-date-object": "^1.0.1", + "is-symbol": "^1.0.2" + } + }, + "has-symbols": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.1.tgz", + "integrity": "sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg==", + "dev": true + } + } + }, "on-finished": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz", @@ -14014,6 +14465,16 @@ } } }, + "optimize-css-assets-webpack-plugin": { + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/optimize-css-assets-webpack-plugin/-/optimize-css-assets-webpack-plugin-5.0.3.tgz", + "integrity": "sha512-q9fbvCRS6EYtUKKSwI87qm2IxlyJK5b4dygW1rKUBT6mMDhdG5e5bZT63v6tnJR9F9FB/H5a0HTmtw+laUBxKA==", + "dev": true, + "requires": { + "cssnano": "^4.1.10", + "last-call-webpack-plugin": "^3.0.0" + } + }, "optionator": { "version": "0.8.2", "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.2.tgz", @@ -14380,6 +14841,37 @@ } } }, + "postcss-calc": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-7.0.1.tgz", + "integrity": "sha512-oXqx0m6tb4N3JGdmeMSc/i91KppbYsFZKdH0xMOqK8V1rJlzrKlTdokz8ozUXLVejydRN6u2IddxpcijRj2FqQ==", + "dev": true, + "requires": { + "css-unit-converter": "^1.1.1", + "postcss": "^7.0.5", + "postcss-selector-parser": "^5.0.0-rc.4", + "postcss-value-parser": "^3.3.1" + }, + "dependencies": { + "cssesc": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-2.0.0.tgz", + "integrity": "sha512-MsCAG1z9lPdoO/IUMLSBWBSVxVtJ1395VGIQ+Fc2gNdkQ1hNDnQdw3YhA71WJCBW1vdwA0cAnk/DnW6bqoEUYg==", + "dev": true + }, + "postcss-selector-parser": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-5.0.0.tgz", + "integrity": "sha512-w+zLE5Jhg6Liz8+rQOWEAwtwkyqpfnmsinXjXg6cY7YIONZZtgvE0v2O0uhQBs0peNomOJwWRKt6JBfTdTd3OQ==", + "dev": true, + "requires": { + "cssesc": "^2.0.0", + "indexes-of": "^1.0.1", + "uniq": "^1.0.1" + } + } + } + }, "postcss-color-functional-notation": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/postcss-color-functional-notation/-/postcss-color-functional-notation-2.0.1.tgz", @@ -14432,6 +14924,29 @@ "postcss-values-parser": "^2.0.0" } }, + "postcss-colormin": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-4.0.3.tgz", + "integrity": "sha512-WyQFAdDZpExQh32j0U0feWisZ0dmOtPl44qYmJKkq9xFWY3p+4qnRzCHeNrkeRhwPHz9bQ3mo0/yVkaply0MNw==", + "dev": true, + "requires": { + "browserslist": "^4.0.0", + "color": "^3.0.0", + "has": "^1.0.0", + "postcss": "^7.0.0", + "postcss-value-parser": "^3.0.0" + } + }, + "postcss-convert-values": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-4.0.1.tgz", + "integrity": "sha512-Kisdo1y77KUC0Jmn0OXU/COOJbzM8cImvw1ZFsBgBgMgb1iL23Zs/LXRe3r+EZqM3vGYKdQ2YJVQ5VkJI+zEJQ==", + "dev": true, + "requires": { + "postcss": "^7.0.0", + "postcss-value-parser": "^3.0.0" + } + }, "postcss-custom-media": { "version": "7.0.8", "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-7.0.8.tgz", @@ -14537,6 +15052,42 @@ } } }, + "postcss-discard-comments": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-4.0.2.tgz", + "integrity": "sha512-RJutN259iuRf3IW7GZyLM5Sw4GLTOH8FmsXBnv8Ab/Tc2k4SR4qbV4DNbyyY4+Sjo362SyDmW2DQ7lBSChrpkg==", + "dev": true, + "requires": { + "postcss": "^7.0.0" + } + }, + "postcss-discard-duplicates": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-4.0.2.tgz", + "integrity": "sha512-ZNQfR1gPNAiXZhgENFfEglF93pciw0WxMkJeVmw8eF+JZBbMD7jp6C67GqJAXVZP2BWbOztKfbsdmMp/k8c6oQ==", + "dev": true, + "requires": { + "postcss": "^7.0.0" + } + }, + "postcss-discard-empty": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-4.0.1.tgz", + "integrity": "sha512-B9miTzbznhDjTfjvipfHoqbWKwd0Mj+/fL5s1QOz06wufguil+Xheo4XpOnc4NqKYBCNqqEzgPv2aPBIJLox0w==", + "dev": true, + "requires": { + "postcss": "^7.0.0" + } + }, + "postcss-discard-overridden": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-4.0.1.tgz", + "integrity": "sha512-IYY2bEDD7g1XM1IDEsUT4//iEYCxAmP5oDSFMVU/JVvT7gh+l4fmjciLqGgwjdWpQIdb0Che2VX00QObS5+cTg==", + "dev": true, + "requires": { + "postcss": "^7.0.0" + } + }, "postcss-double-position-gradients": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/postcss-double-position-gradients/-/postcss-double-position-gradients-1.0.0.tgz", @@ -14676,6 +15227,124 @@ "postcss": "^7.0.2" } }, + "postcss-merge-longhand": { + "version": "4.0.11", + "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-4.0.11.tgz", + "integrity": "sha512-alx/zmoeXvJjp7L4mxEMjh8lxVlDFX1gqWHzaaQewwMZiVhLo42TEClKaeHbRf6J7j82ZOdTJ808RtN0ZOZwvw==", + "dev": true, + "requires": { + "css-color-names": "0.0.4", + "postcss": "^7.0.0", + "postcss-value-parser": "^3.0.0", + "stylehacks": "^4.0.0" + } + }, + "postcss-merge-rules": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-4.0.3.tgz", + "integrity": "sha512-U7e3r1SbvYzO0Jr3UT/zKBVgYYyhAz0aitvGIYOYK5CPmkNih+WDSsS5tvPrJ8YMQYlEMvsZIiqmn7HdFUaeEQ==", + "dev": true, + "requires": { + "browserslist": "^4.0.0", + "caniuse-api": "^3.0.0", + "cssnano-util-same-parent": "^4.0.0", + "postcss": "^7.0.0", + "postcss-selector-parser": "^3.0.0", + "vendors": "^1.0.0" + }, + "dependencies": { + "dot-prop": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-4.2.0.tgz", + "integrity": "sha512-tUMXrxlExSW6U2EXiiKGSBVdYgtV8qlHL+C10TsW4PURY/ic+eaysnSkwB4kA/mBlCyy/IKDJ+Lc3wbWeaXtuQ==", + "dev": true, + "requires": { + "is-obj": "^1.0.0" + } + }, + "postcss-selector-parser": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-3.1.1.tgz", + "integrity": "sha1-T4dfSvsMllc9XPTXQBGu4lCn6GU=", + "dev": true, + "requires": { + "dot-prop": "^4.1.1", + "indexes-of": "^1.0.1", + "uniq": "^1.0.1" + } + } + } + }, + "postcss-minify-font-values": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-4.0.2.tgz", + "integrity": "sha512-j85oO6OnRU9zPf04+PZv1LYIYOprWm6IA6zkXkrJXyRveDEuQggG6tvoy8ir8ZwjLxLuGfNkCZEQG7zan+Hbtg==", + "dev": true, + "requires": { + "postcss": "^7.0.0", + "postcss-value-parser": "^3.0.0" + } + }, + "postcss-minify-gradients": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/postcss-minify-gradients/-/postcss-minify-gradients-4.0.2.tgz", + "integrity": "sha512-qKPfwlONdcf/AndP1U8SJ/uzIJtowHlMaSioKzebAXSG4iJthlWC9iSWznQcX4f66gIWX44RSA841HTHj3wK+Q==", + "dev": true, + "requires": { + "cssnano-util-get-arguments": "^4.0.0", + "is-color-stop": "^1.0.0", + "postcss": "^7.0.0", + "postcss-value-parser": "^3.0.0" + } + }, + "postcss-minify-params": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-4.0.2.tgz", + "integrity": "sha512-G7eWyzEx0xL4/wiBBJxJOz48zAKV2WG3iZOqVhPet/9geefm/Px5uo1fzlHu+DOjT+m0Mmiz3jkQzVHe6wxAWg==", + "dev": true, + "requires": { + "alphanum-sort": "^1.0.0", + "browserslist": "^4.0.0", + "cssnano-util-get-arguments": "^4.0.0", + "postcss": "^7.0.0", + "postcss-value-parser": "^3.0.0", + "uniqs": "^2.0.0" + } + }, + "postcss-minify-selectors": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/postcss-minify-selectors/-/postcss-minify-selectors-4.0.2.tgz", + "integrity": "sha512-D5S1iViljXBj9kflQo4YutWnJmwm8VvIsU1GeXJGiG9j8CIg9zs4voPMdQDUmIxetUOh60VilsNzCiAFTOqu3g==", + "dev": true, + "requires": { + "alphanum-sort": "^1.0.0", + "has": "^1.0.0", + "postcss": "^7.0.0", + "postcss-selector-parser": "^3.0.0" + }, + "dependencies": { + "dot-prop": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-4.2.0.tgz", + "integrity": "sha512-tUMXrxlExSW6U2EXiiKGSBVdYgtV8qlHL+C10TsW4PURY/ic+eaysnSkwB4kA/mBlCyy/IKDJ+Lc3wbWeaXtuQ==", + "dev": true, + "requires": { + "is-obj": "^1.0.0" + } + }, + "postcss-selector-parser": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-3.1.1.tgz", + "integrity": "sha1-T4dfSvsMllc9XPTXQBGu4lCn6GU=", + "dev": true, + "requires": { + "dot-prop": "^4.1.1", + "indexes-of": "^1.0.1", + "uniq": "^1.0.1" + } + } + } + }, "postcss-modules-extract-imports": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-2.0.0.tgz", @@ -14725,6 +15394,124 @@ "postcss": "^7.0.2" } }, + "postcss-normalize-charset": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-4.0.1.tgz", + "integrity": "sha512-gMXCrrlWh6G27U0hF3vNvR3w8I1s2wOBILvA87iNXaPvSNo5uZAMYsZG7XjCUf1eVxuPfyL4TJ7++SGZLc9A3g==", + "dev": true, + "requires": { + "postcss": "^7.0.0" + } + }, + "postcss-normalize-display-values": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/postcss-normalize-display-values/-/postcss-normalize-display-values-4.0.2.tgz", + "integrity": "sha512-3F2jcsaMW7+VtRMAqf/3m4cPFhPD3EFRgNs18u+k3lTJJlVe7d0YPO+bnwqo2xg8YiRpDXJI2u8A0wqJxMsQuQ==", + "dev": true, + "requires": { + "cssnano-util-get-match": "^4.0.0", + "postcss": "^7.0.0", + "postcss-value-parser": "^3.0.0" + } + }, + "postcss-normalize-positions": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/postcss-normalize-positions/-/postcss-normalize-positions-4.0.2.tgz", + "integrity": "sha512-Dlf3/9AxpxE+NF1fJxYDeggi5WwV35MXGFnnoccP/9qDtFrTArZ0D0R+iKcg5WsUd8nUYMIl8yXDCtcrT8JrdA==", + "dev": true, + "requires": { + "cssnano-util-get-arguments": "^4.0.0", + "has": "^1.0.0", + "postcss": "^7.0.0", + "postcss-value-parser": "^3.0.0" + } + }, + "postcss-normalize-repeat-style": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-4.0.2.tgz", + "integrity": "sha512-qvigdYYMpSuoFs3Is/f5nHdRLJN/ITA7huIoCyqqENJe9PvPmLhNLMu7QTjPdtnVf6OcYYO5SHonx4+fbJE1+Q==", + "dev": true, + "requires": { + "cssnano-util-get-arguments": "^4.0.0", + "cssnano-util-get-match": "^4.0.0", + "postcss": "^7.0.0", + "postcss-value-parser": "^3.0.0" + } + }, + "postcss-normalize-string": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/postcss-normalize-string/-/postcss-normalize-string-4.0.2.tgz", + "integrity": "sha512-RrERod97Dnwqq49WNz8qo66ps0swYZDSb6rM57kN2J+aoyEAJfZ6bMx0sx/F9TIEX0xthPGCmeyiam/jXif0eA==", + "dev": true, + "requires": { + "has": "^1.0.0", + "postcss": "^7.0.0", + "postcss-value-parser": "^3.0.0" + } + }, + "postcss-normalize-timing-functions": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-4.0.2.tgz", + "integrity": "sha512-acwJY95edP762e++00Ehq9L4sZCEcOPyaHwoaFOhIwWCDfik6YvqsYNxckee65JHLKzuNSSmAdxwD2Cud1Z54A==", + "dev": true, + "requires": { + "cssnano-util-get-match": "^4.0.0", + "postcss": "^7.0.0", + "postcss-value-parser": "^3.0.0" + } + }, + "postcss-normalize-unicode": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/postcss-normalize-unicode/-/postcss-normalize-unicode-4.0.1.tgz", + "integrity": "sha512-od18Uq2wCYn+vZ/qCOeutvHjB5jm57ToxRaMeNuf0nWVHaP9Hua56QyMF6fs/4FSUnVIw0CBPsU0K4LnBPwYwg==", + "dev": true, + "requires": { + "browserslist": "^4.0.0", + "postcss": "^7.0.0", + "postcss-value-parser": "^3.0.0" + } + }, + "postcss-normalize-url": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/postcss-normalize-url/-/postcss-normalize-url-4.0.1.tgz", + "integrity": "sha512-p5oVaF4+IHwu7VpMan/SSpmpYxcJMtkGppYf0VbdH5B6hN8YNmVyJLuY9FmLQTzY3fag5ESUUHDqM+heid0UVA==", + "dev": true, + "requires": { + "is-absolute-url": "^2.0.0", + "normalize-url": "^3.0.0", + "postcss": "^7.0.0", + "postcss-value-parser": "^3.0.0" + }, + "dependencies": { + "normalize-url": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-3.3.0.tgz", + "integrity": "sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==", + "dev": true + } + } + }, + "postcss-normalize-whitespace": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/postcss-normalize-whitespace/-/postcss-normalize-whitespace-4.0.2.tgz", + "integrity": "sha512-tO8QIgrsI3p95r8fyqKV+ufKlSHh9hMJqACqbv2XknufqEDhDvbguXGBBqxw9nsQoXWf0qOqppziKJKHMD4GtA==", + "dev": true, + "requires": { + "postcss": "^7.0.0", + "postcss-value-parser": "^3.0.0" + } + }, + "postcss-ordered-values": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/postcss-ordered-values/-/postcss-ordered-values-4.1.2.tgz", + "integrity": "sha512-2fCObh5UanxvSxeXrtLtlwVThBvHn6MQcu4ksNT2tsaV2Fg76R2CV98W7wNSlX+5/pFwEyaDwKLLoEV7uRybAw==", + "dev": true, + "requires": { + "cssnano-util-get-arguments": "^4.0.0", + "postcss": "^7.0.0", + "postcss-value-parser": "^3.0.0" + } + }, "postcss-overflow-shorthand": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/postcss-overflow-shorthand/-/postcss-overflow-shorthand-2.0.0.tgz", @@ -14855,6 +15642,30 @@ } } }, + "postcss-reduce-initial": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-4.0.3.tgz", + "integrity": "sha512-gKWmR5aUulSjbzOfD9AlJiHCGH6AEVLaM0AV+aSioxUDd16qXP1PCh8d1/BGVvpdWn8k/HiK7n6TjeoXN1F7DA==", + "dev": true, + "requires": { + "browserslist": "^4.0.0", + "caniuse-api": "^3.0.0", + "has": "^1.0.0", + "postcss": "^7.0.0" + } + }, + "postcss-reduce-transforms": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/postcss-reduce-transforms/-/postcss-reduce-transforms-4.0.2.tgz", + "integrity": "sha512-EEVig1Q2QJ4ELpJXMZR8Vt5DQx8/mo+dGWSR7vWXqcob2gQLyQGsionYcGKATXvQzMPn6DSN1vTN7yFximdIAg==", + "dev": true, + "requires": { + "cssnano-util-get-match": "^4.0.0", + "has": "^1.0.0", + "postcss": "^7.0.0", + "postcss-value-parser": "^3.0.0" + } + }, "postcss-replace-overflow-wrap": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-3.0.0.tgz", @@ -14895,6 +15706,29 @@ "uniq": "^1.0.1" } }, + "postcss-svgo": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-4.0.2.tgz", + "integrity": "sha512-C6wyjo3VwFm0QgBy+Fu7gCYOkCmgmClghO+pjcxvrcBKtiKt0uCF+hvbMO1fyv5BMImRK90SMb+dwUnfbGd+jw==", + "dev": true, + "requires": { + "is-svg": "^3.0.0", + "postcss": "^7.0.0", + "postcss-value-parser": "^3.0.0", + "svgo": "^1.0.0" + } + }, + "postcss-unique-selectors": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-4.0.1.tgz", + "integrity": "sha512-+JanVaryLo9QwZjKrmJgkI4Fn8SBgRO6WXQBJi7KiAVPlmxikB5Jzc4EvXMT2H0/m0RjrVVm9rGNhZddm/8Spg==", + "dev": true, + "requires": { + "alphanum-sort": "^1.0.0", + "postcss": "^7.0.0", + "uniqs": "^2.0.0" + } + }, "postcss-value-parser": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz", @@ -15522,6 +16356,18 @@ "integrity": "sha512-5C9HXdzK8EAqN7JDif30jqsBzavB7wLpaubisuQIGHWf2gUXSpzy6ArX/+Da8RjFpagWsCn+pIgxTMAmKw9Zug==", "dev": true }, + "rgb-regex": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/rgb-regex/-/rgb-regex-1.0.1.tgz", + "integrity": "sha1-wODWiC3w4jviVKR16O3UGRX+rrE=", + "dev": true + }, + "rgba-regex": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/rgba-regex/-/rgba-regex-1.0.0.tgz", + "integrity": "sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=", + "dev": true + }, "rimraf": { "version": "2.6.3", "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz", @@ -15625,6 +16471,12 @@ } } }, + "sax": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz", + "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==", + "dev": true + }, "schema-utils": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz", @@ -15767,6 +16619,23 @@ } } }, + "simple-swizzle": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz", + "integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=", + "dev": true, + "requires": { + "is-arrayish": "^0.3.1" + }, + "dependencies": { + "is-arrayish": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz", + "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==", + "dev": true + } + } + }, "slash": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz", @@ -16118,6 +16987,12 @@ "figgy-pudding": "^3.5.1" } }, + "stable": { + "version": "0.1.8", + "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz", + "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==", + "dev": true + }, "staged-git-files": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/staged-git-files/-/staged-git-files-1.1.2.tgz", @@ -16507,6 +17382,26 @@ "function-bind": "^1.0.2" } }, + "string.prototype.trimleft": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/string.prototype.trimleft/-/string.prototype.trimleft-2.1.0.tgz", + "integrity": "sha512-FJ6b7EgdKxxbDxc79cOlok6Afd++TTs5szo+zJTUyow3ycrRfJVE2pq3vcN53XexvKZu/DJMDfeI/qMiZTrjTw==", + "dev": true, + "requires": { + "define-properties": "^1.1.3", + "function-bind": "^1.1.1" + } + }, + "string.prototype.trimright": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/string.prototype.trimright/-/string.prototype.trimright-2.1.0.tgz", + "integrity": "sha512-fXZTSV55dNBwv16uw+hh5jkghxSnc5oHq+5K/gXgizHwAvMetdAJlHqqoFC1FSDVPYWLkAKl2cxpUT41sV7nSg==", + "dev": true, + "requires": { + "define-properties": "^1.1.3", + "function-bind": "^1.1.1" + } + }, "string_decoder": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", @@ -16590,6 +17485,39 @@ "schema-utils": "^1.0.0" } }, + "stylehacks": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz", + "integrity": "sha512-7GlLk9JwlElY4Y6a/rmbH2MhVlTyVmiJd1PfTCqFaIBEGMYNsrO/v3SeGTdhBThLg4Z+NbOk/qFMwCa+J+3p/g==", + "dev": true, + "requires": { + "browserslist": "^4.0.0", + "postcss": "^7.0.0", + "postcss-selector-parser": "^3.0.0" + }, + "dependencies": { + "dot-prop": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-4.2.0.tgz", + "integrity": "sha512-tUMXrxlExSW6U2EXiiKGSBVdYgtV8qlHL+C10TsW4PURY/ic+eaysnSkwB4kA/mBlCyy/IKDJ+Lc3wbWeaXtuQ==", + "dev": true, + "requires": { + "is-obj": "^1.0.0" + } + }, + "postcss-selector-parser": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-3.1.1.tgz", + "integrity": "sha1-T4dfSvsMllc9XPTXQBGu4lCn6GU=", + "dev": true, + "requires": { + "dot-prop": "^4.1.1", + "indexes-of": "^1.0.1", + "uniq": "^1.0.1" + } + } + } + }, "supports-color": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", @@ -16599,6 +17527,27 @@ "has-flag": "^3.0.0" } }, + "svgo": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz", + "integrity": "sha512-yhy/sQYxR5BkC98CY7o31VGsg014AKLEPxdfhora76l36hD9Rdy5NZA/Ocn6yayNPgSamYdtX2rFJdcv07AYVw==", + "dev": true, + "requires": { + "chalk": "^2.4.1", + "coa": "^2.0.2", + "css-select": "^2.0.0", + "css-select-base-adapter": "^0.1.1", + "css-tree": "1.0.0-alpha.37", + "csso": "^4.0.2", + "js-yaml": "^3.13.1", + "mkdirp": "~0.5.1", + "object.values": "^1.1.0", + "sax": "~1.2.4", + "stable": "^0.1.8", + "unquote": "~1.1.1", + "util.promisify": "~1.0.0" + } + }, "symbol-observable": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz", @@ -16864,6 +17813,12 @@ "setimmediate": "^1.0.4" } }, + "timsort": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz", + "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=", + "dev": true + }, "tmp": { "version": "0.0.33", "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz", @@ -17090,6 +18045,12 @@ "integrity": "sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=", "dev": true }, + "uniqs": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/uniqs/-/uniqs-2.0.0.tgz", + "integrity": "sha1-/+3ks2slKQaW5uFl1KWe25mOawI=", + "dev": true + }, "unique-filename": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-1.1.1.tgz", @@ -17120,6 +18081,12 @@ "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=", "dev": true }, + "unquote": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/unquote/-/unquote-1.1.1.tgz", + "integrity": "sha1-j97XMk7G6IoP+LkF58CYzcCG1UQ=", + "dev": true + }, "unset-value": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/unset-value/-/unset-value-1.0.0.tgz", @@ -17236,6 +18203,16 @@ "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=", "dev": true }, + "util.promisify": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/util.promisify/-/util.promisify-1.0.0.tgz", + "integrity": "sha512-i+6qA2MPhvoKLuxnJNpXAGhg7HphQOSUq2LKMZD0m15EiskXUkMvKdF4Uui0WYeCUGea+o2cw/ZuwehtfsrNkA==", + "dev": true, + "requires": { + "define-properties": "^1.1.2", + "object.getownpropertydescriptors": "^2.0.3" + } + }, "utils-merge": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz", @@ -17264,6 +18241,12 @@ "spdx-expression-parse": "^3.0.0" } }, + "vendors": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/vendors/-/vendors-1.0.3.tgz", + "integrity": "sha512-fOi47nsJP5Wqefa43kyWSg80qF+Q3XA6MUkgi7Hp1HQaKDQW4cQrK2D0P7mmbFtsV1N89am55Yru/nyEwRubcw==", + "dev": true + }, "vm-browserify": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz", diff --git a/package.json b/package.json index b4bbf8ab7..a5108f480 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/records.json b/records.json index 70313cfe0..0e3c24f99 100644 --- a/records.json +++ b/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": [] + } + } ] } \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index 376cc0b24..7faa15e17 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -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',