From d97ed924bcf1d7f4632af3eaf51b368e04f3049e Mon Sep 17 00:00:00 2001 From: Bastian Rihm Date: Tue, 10 Oct 2023 15:05:37 +0200 Subject: [PATCH] Cleanup styles --- .../global-headbar.component.scss | 5 + .../motion-detail-diff-summary.component.scss | 11 + .../file-list/file-list.component.scss | 1 + .../sort-filter-bar.component.scss | 1 + .../scrolling-table.component.scss | 35 ++ client/src/assets/styles/colors.scss | 73 +++ client/src/assets/styles/components.scss | 103 ++++ .../styles/global-components-style.scss | 141 ----- client/src/assets/styles/h-scroller.scss | 24 + client/src/assets/styles/material/icon.scss | 37 ++ client/src/assets/styles/pbl.scss | 8 + client/src/assets/styles/reset.scss | 25 + client/src/assets/styles/theme-styles.scss | 12 +- client/src/assets/styles/typography.scss | 53 ++ client/src/assets/styles/utils.scss | 243 ++++++++ client/src/styles.scss | 537 +----------------- 16 files changed, 653 insertions(+), 656 deletions(-) create mode 100644 client/src/assets/styles/colors.scss create mode 100644 client/src/assets/styles/components.scss create mode 100644 client/src/assets/styles/h-scroller.scss create mode 100644 client/src/assets/styles/material/icon.scss create mode 100644 client/src/assets/styles/pbl.scss create mode 100644 client/src/assets/styles/reset.scss create mode 100644 client/src/assets/styles/typography.scss create mode 100644 client/src/assets/styles/utils.scss diff --git a/client/src/app/site/modules/global-headbar/components/global-headbar/global-headbar.component.scss b/client/src/app/site/modules/global-headbar/components/global-headbar/global-headbar.component.scss index d3d9016598..c26df89702 100644 --- a/client/src/app/site/modules/global-headbar/components/global-headbar/global-headbar.component.scss +++ b/client/src/app/site/modules/global-headbar/components/global-headbar/global-headbar.component.scss @@ -13,6 +13,11 @@ padding-left: 26px; } +.background-headbar { + background: var(--theme-headbar); + color: var(--theme-headbar-contrast); +} + .spacer { flex: 1; height: 100%; diff --git a/client/src/app/site/pages/meetings/pages/motions/pages/motion-detail/components/motion-detail-diff-summary/motion-detail-diff-summary.component.scss b/client/src/app/site/pages/meetings/pages/motions/pages/motion-detail/components/motion-detail-diff-summary/motion-detail-diff-summary.component.scss index 26a251d54d..182ff4d1cc 100644 --- a/client/src/app/site/pages/meetings/pages/motions/pages/motion-detail/components/motion-detail-diff-summary/motion-detail-diff-summary.component.scss +++ b/client/src/app/site/pages/meetings/pages/motions/pages/motion-detail/components/motion-detail-diff-summary/motion-detail-diff-summary.component.scss @@ -31,3 +31,14 @@ top: -8px !important; } } + +.smaller-icon-button { + height: 24px !important; + width: 24px !important; + line-height: 24px !important; + + .mat-button-wrapper { + vertical-align: top; + line-height: initial; + } +} diff --git a/client/src/app/ui/modules/file-list/components/file-list/file-list.component.scss b/client/src/app/ui/modules/file-list/components/file-list/file-list.component.scss index 499cc56f44..52517d964d 100644 --- a/client/src/app/ui/modules/file-list/components/file-list/file-list.component.scss +++ b/client/src/app/ui/modules/file-list/components/file-list/file-list.component.scss @@ -1,4 +1,5 @@ @import 'src/assets/styles/tables.scss'; +@import 'src/assets/styles/h-scroller.scss'; $navbar-size: 40px; diff --git a/client/src/app/ui/modules/list/components/sort-filter-bar/sort-filter-bar.component.scss b/client/src/app/ui/modules/list/components/sort-filter-bar/sort-filter-bar.component.scss index 182f17ee72..ba2fff7e82 100644 --- a/client/src/app/ui/modules/list/components/sort-filter-bar/sort-filter-bar.component.scss +++ b/client/src/app/ui/modules/list/components/sort-filter-bar/sort-filter-bar.component.scss @@ -1,4 +1,5 @@ @import 'src/assets/styles/variables.scss'; +@import 'src/assets/styles/h-scroller.scss'; os-sort-filter-bar { .filter-menu-head { diff --git a/client/src/app/ui/modules/scrolling-table/components/scrolling-table/scrolling-table.component.scss b/client/src/app/ui/modules/scrolling-table/components/scrolling-table/scrolling-table.component.scss index bcbce72e6c..8baf824e41 100644 --- a/client/src/app/ui/modules/scrolling-table/components/scrolling-table/scrolling-table.component.scss +++ b/client/src/app/ui/modules/scrolling-table/components/scrolling-table/scrolling-table.component.scss @@ -63,3 +63,38 @@ @include scrolling-table-style(); } } + +.scrolling-table-cell ::ng-deep { + .fill { + position: relative; + display: inherit; + height: 100%; + width: 100%; + + // try to put all children in the in the vertical middle + * { + margin-top: auto; + margin-bottom: auto; + } + } + + .checkbox-ripple-padding { + padding-left: 12px; + } + + .central-button { + justify-content: center; + } + + .clickable { + cursor: pointer; + } + + .detail-link { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + } +} diff --git a/client/src/assets/styles/colors.scss b/client/src/assets/styles/colors.scss new file mode 100644 index 0000000000..d46f67d935 --- /dev/null +++ b/client/src/assets/styles/colors.scss @@ -0,0 +1,73 @@ +$os-lightblue: rgb(33, 150, 243); +$os-darkblue: rgb(63, 81, 181); +$os-lightgreen: rgb(77, 243, 86); +$os-green: rgb(76, 175, 80); +$os-red: rgb(255, 82, 82); +$os-yellow: rgb(255, 193, 7); +$os-bluegrey: rgb(96, 125, 139); +$os-grey: #e0e0e0; + +.white { + color: white; +} + +.lightblue { + background-color: $os-lightblue !important; + color: white !important; +} + +.darkblue { + background-color: $os-darkblue !important; + color: white !important; +} +.green, +.success { + background-color: $os-green !important; + color: white !important; +} + +// TODO: Remove save-button, add color +.light-green, +.save-button { + // needs to be important or will be overwritten locally + background-color: $os-lightgreen !important; +} + +.red, +.error { + background-color: $os-red !important; + color: white !important; +} + +.yellow, +.warning { + background-color: $os-yellow !important; + color: white !important; +} + +.bluegrey { + background-color: $os-bluegrey !important; + color: white !important; +} + +.grey, +.gray { + background-color: $os-grey !important; + color: rgba(0, 0, 0, 0.87) !important; +} + +// TODO: Update naming of text color helper classes to match a pattern +.red-warning-text { + color: red !important; + .mat-icon { + color: red !important; + } +} + +.green-text { + color: $os-green !important; +} + +.text-success { + color: $os-lightgreen; +} diff --git a/client/src/assets/styles/components.scss b/client/src/assets/styles/components.scss new file mode 100644 index 0000000000..076a52bd14 --- /dev/null +++ b/client/src/assets/styles/components.scss @@ -0,0 +1,103 @@ +.os-tree { + .node-content-wrapper { + border: 1px black; + width: 100%; + padding: 10px 20px; + } + + tree-loading-component { + display: none; + } +} + +// to display quantities. Use in span or div +.os-amount-chip { + border-radius: 50%; + min-width: 20px; + height: 20px; + line-height: 20px; + padding: 3px; + text-align: center; +} + +.os-card, +.os-form-card { + max-width: 770px; + margin-top: 20px !important; + margin-left: auto !important; + margin-right: auto !important; + font-size: 16px; +} + +.os-card { + margin-bottom: 20px !important; + + .mat-select-arrow-wrapper { + visibility: hidden; + } +} + +.os-form-card { + padding: 27px; + + .mat-form-field { + width: 100%; + padding: 10px 0; + } +} + +.os-form-card-mobile { + margin-top: 20px !important; + margin-bottom: 20px !important; + + .mat-form-field, + .mat-select { + width: 100%; + } +} + +// Shared table definitions +// TODO: Might be deprecated since we now have Virtual Scrolling Tables +%os-table { + width: 100%; + + /** size of the mat row */ + mat-row { + position: relative; + min-height: 60px; + } + mat-row.lg { + height: 110px; + min-height: 90px; + } + mat-row:hover { + cursor: pointer; + background-color: rgba(0, 0, 0, 0.025); + } + mat-row.selected { + cursor: pointer; + background-color: rgba(0, 0, 0, 0.055); + } +} + +.os-listview-table { + @extend %os-table; + + /* multi select column */ + .mat-column-selector { + flex: 0 0 60px; + } + /* projector button column */ + .mat-column-projector { + flex: 0 0 40px; + overflow: visible; + } + /** hide mat header row */ + .mat-header-row { + display: none; + } +} + +.os-headed-listview-table { + @extend %os-table; +} diff --git a/client/src/assets/styles/global-components-style.scss b/client/src/assets/styles/global-components-style.scss index 49943a31c2..21ed09266a 100644 --- a/client/src/assets/styles/global-components-style.scss +++ b/client/src/assets/styles/global-components-style.scss @@ -30,16 +30,6 @@ } } - button { - a { - text-decoration: none; - - &:hover { - text-decoration: none; - } - } - } - .anchor-button { color: mat.get-color-from-palette($foreground, text) !important; } @@ -81,39 +71,6 @@ } } - .fake-button-no-touch { - width: 40px; - height: 40px; - display: flex; - align-items: center; - justify-content: center; - user-select: none; - border-radius: 4px; - } - - .fake-button { - @extend .fake-button-no-touch; - cursor: pointer; - } - - .background-default[disabled] { - @extend .fake-disabled; - } - - .dialog-title { - font-size: 20px; - font-weight: 500; - margin: 0; - padding: 0; - } - - /* Custom hint and error classes. Same values as .mat-hint and -mat-error */ - .hint, - .error { - font-size: 75%; - display: block; - } - .error, .warn { color: mat.get-color-from-palette($warn); @@ -136,9 +93,6 @@ } .subtitle-text { - font-size: 125%; - margin-top: 0; - margin-bottom: 15px; color: mat.get-color-from-palette(if($is-dark-theme, $accent, $primary)); } @@ -150,11 +104,6 @@ color: mat.get-color-from-palette($foreground, secondary-text); } - .subtitle-nocolor { - font-size: 12px; - font-weight: 400; - } - .subtitle { @extend .subtitle-nocolor; color: mat.get-color-from-palette($foreground, secondary-text); @@ -189,64 +138,10 @@ color: mat.get-color-from-palette($foreground, text) !important; } - input[readonly] { - cursor: default; - } - - .stretch-to-fill-parent { - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - } - .icon { color: mat.get-color-from-palette($foreground, icon); } - .small-text { - font-size: 12px; - } - - .italic { - font-style: italic; - } - - .white-divider { - border-top-color: white; - } - - /** - * This primarily used to align a title and an icon in one line. The title will use the whole width subtracting - * the icon's width. So, the icon will be shown at the right edge. - */ - .action-title { - display: flex; - align-items: center; - - * { - padding: 0; - margin: 0; - } - - > :first-child { - flex: 1; - } - } - - .full-width { - width: 100%; - } - - .full-height { - height: 100%; - } - - .no-margin { - margin: 0; - } - /** Custom themes for NGrid. Could be an own file if it gets more */ .pbl-ngrid-container { background: mat.get-color-from-palette($background, card); @@ -256,28 +151,6 @@ color: mat.get-color-from-palette($foreground, secondary-text); } - .pbl-ngrid-row:hover { - background-color: rgba(0, 0, 0, 0.025); - } - - .pbl-ngrid-header-row, - .pbl-ngrid-row { - align-items: stretch; - } - - /** - * Background styles used for the global theme - */ - .background-dark { - background: #4f4f4f; - color: white; - } - - .background-dark-brighter { - background: #6f6f6f; - color: white; - } - /** * CLEANUP: * whole theme-related stylesheets can be replaced using classes like this one @@ -402,10 +275,6 @@ .text { color: mat.get-color-from-palette($foreground, text); - - &-center { - text-align: center; - } } .hint { @@ -444,16 +313,6 @@ } } - /** remove unwanted spaces from group displays */ - .inline-flex { - display: inline-flex; - } - - .background-headbar { - background: var(--theme-headbar); - color: var(--theme-headbar-contrast) !important; - } - .sidenav-background { background: if($is-dark-theme, darken(mat.get-color-from-palette($background, background), 0.5%), white); } diff --git a/client/src/assets/styles/h-scroller.scss b/client/src/assets/styles/h-scroller.scss new file mode 100644 index 0000000000..e59aad2f12 --- /dev/null +++ b/client/src/assets/styles/h-scroller.scss @@ -0,0 +1,24 @@ +// custom horrizontal scroll-bar +.h-scroller { + overflow-x: auto; + overflow-y: hidden; + scrollbar-width: 5px; + scrollbar-color: #666666; +} + +.h-scroller::-webkit-scrollbar { + width: 5px; + height: 5px; +} + +.h-scroller::-webkit-scrollbar-thumb { + background: #666666; + height: 5px; + border-radius: 5px; +} + +.h-scroller::-webkit-scrollbar-corner { + display: none; + height: 0px; + width: 0px; +} diff --git a/client/src/assets/styles/material/icon.scss b/client/src/assets/styles/material/icon.scss new file mode 100644 index 0000000000..529484c6fe --- /dev/null +++ b/client/src/assets/styles/material/icon.scss @@ -0,0 +1,37 @@ +mat-icon { + font-family: 'Material Icons' !important; +} + +// for aligning text lines with an icon and or link +.line-and-icon { + display: block; + line-height: 40px; + h2, + span, + a { + vertical-align: bottom; + } + + .mat-icon-button, + .mat-icon { + margin: auto 0; + vertical-align: middle; + } +} + +.icon-as-block.mat-icon { + display: block; +} + +/** + * Can better align icons with text. Use like: + * ... + * ... + */ +.inline-icon-text-align.mat-icon { + vertical-align: bottom; +} + +.icon-text-distance { + margin-left: 5px; +} diff --git a/client/src/assets/styles/pbl.scss b/client/src/assets/styles/pbl.scss new file mode 100644 index 0000000000..196f0d52b0 --- /dev/null +++ b/client/src/assets/styles/pbl.scss @@ -0,0 +1,8 @@ +.pbl-ngrid-row:hover { + background-color: rgba(0, 0, 0, 0.025); +} + +.pbl-ngrid-header-row, +.pbl-ngrid-row { + align-items: stretch; +} diff --git a/client/src/assets/styles/reset.scss b/client/src/assets/styles/reset.scss new file mode 100644 index 0000000000..f62fd5d131 --- /dev/null +++ b/client/src/assets/styles/reset.scss @@ -0,0 +1,25 @@ +img { + border: none; +} + +a { + text-decoration: none; + + &:hover { + text-decoration: underline; + } +} + +button { + a { + text-decoration: none; + + &:hover { + text-decoration: none; + } + } +} + +input[readonly] { + cursor: default; +} diff --git a/client/src/assets/styles/theme-styles.scss b/client/src/assets/styles/theme-styles.scss index 403af2a26c..243c7a9b77 100644 --- a/client/src/assets/styles/theme-styles.scss +++ b/client/src/assets/styles/theme-styles.scss @@ -8,18 +8,14 @@ /** Global component style definition */ @import 'global-components-style.scss'; -/** Mix the component-related style-rules. Every single custom style goes here */ -@mixin openslides-components-theme($theme) { - @include mat.all-legacy-component-themes($theme); - @include os-component-themes($theme); -} - .openslides-light-theme { - @include openslides-components-theme($openslides-light-theme); + @include mat.all-legacy-component-themes($openslides-light-theme); + @include os-component-themes($openslides-light-theme); } .openslides-dark-theme { - @include openslides-components-theme($openslides-dark-theme); + @include mat.all-legacy-component-colors($openslides-dark-theme); + @include os-component-themes($openslides-dark-theme); } [class^='openslides-'][class*='-light-theme'] { diff --git a/client/src/assets/styles/typography.scss b/client/src/assets/styles/typography.scss new file mode 100644 index 0000000000..c4df95eeef --- /dev/null +++ b/client/src/assets/styles/typography.scss @@ -0,0 +1,53 @@ +* { + font-family: OSFont, Fira Sans, Roboto, Arial, Helvetica, sans-serif; +} + +body { + margin: 0 auto; + padding: 0; + line-height: 1.5; + font-size: 14px; +} + +h1, +h2, +h3, +h4, +.title-font, +.slidetitle h1, +.slidetitle h2 { + font-family: OSFont Condensed, Fira Sans Condensed, Roboto-condensed, Arial, Helvetica, sans-serif; +} + +h1 { + padding-bottom: 10px; + line-height: 1.2; + margin: 0; + font-weight: normal; + font-size: 36px; +} + +h3 { + font-weight: 500; + margin-bottom: 0; +} + +h4 { + font-weight: 400; + font-size: 100%; + margin-bottom: 5px; + + .mat-icon-button mat-icon { + font-size: 16px; + } +} + +strong, +b, +.bold { + font-weight: 500; +} + +.italic { + font-style: italic; +} diff --git a/client/src/assets/styles/utils.scss b/client/src/assets/styles/utils.scss new file mode 100644 index 0000000000..28575d6e58 --- /dev/null +++ b/client/src/assets/styles/utils.scss @@ -0,0 +1,243 @@ +.small { + font-size: 90%; +} + +// transform text to uppercase. Use on span, p, h, (...) +.upper { + text-transform: uppercase; +} + +/**use to push content to the right side*/ +.spacer { + flex: 1 1 auto; +} + +/** helper classes for margin/padding */ +.spacer-top-3 { + margin-top: 3px !important; +} + +.spacer-top-5 { + margin-top: 5px !important; +} + +.spacer-top-10 { + margin-top: 10px !important; +} + +.spacer-top-20 { + margin-top: 20px !important; +} + +.spacer-bottom-10 { + margin-bottom: 10px !important; +} + +.spacer-bottom-20 { + margin-bottom: 20px !important; +} + +.spacer-bottom-40 { + margin-bottom: 40px !important; +} + +.spacer-bottom-60 { + margin-bottom: 60px !important; +} + +.spacer-left-10 { + margin-left: 10px; +} + +.spacer-left-20 { + margin-left: 20px; +} + +.spacer-left-50 { + margin-left: 50px !important; +} + + +.text-center, +.center { + text-align: center; +} + +.pointer:hover { + cursor: pointer; +} + +.pointer.selected { + cursor: pointer; +} + +.one-line { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.ellipsis-overflow { + @extend .one-line; + padding-right: 0px; + margin-right: 0px; +} + +.overflow-hidden { + overflow: hidden; +} + +.nowrap { + white-space: nowrap; +} + +.break-word { + hyphens: auto; +} + +.hide { + display: none; +} + +/** remove unwanted spaces from group displays */ +.inline-flex { + display: inline-flex; +} + +/**even distribution of elements in a row*/ +.flex-spaced { + display: flex; + justify-content: space-between; +} + +.flex-vertical-center-unsafe { + display: flex; + flex-direction: row; + align-items: center; + + &.align-left { + justify-content: flex-start; + } +} + +.flex-vertical-center { + display: flex; + flex-direction: row; + + &.align-left { + justify-content: flex-start; + } + + & > * { + margin-top: auto; + margin-bottom: auto; + } +} + +.flex-center { + @extend .flex-vertical-center; + justify-content: center; +} + +.flex-center-unsafe { + @extend .flex-vertical-center-unsafe; + justify-content: center; +} + +.nocursor { + cursor: none; +} + +.pre-wrap { + white-space: pre-wrap; +} + +.regular-shadow { + box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37) !important; +} + +.small-text { + font-size: 12px; +} + +.italic { + font-style: italic; +} + +.white-divider { + border-top-color: white; +} + +.full-width { + width: 100%; +} + +.full-height { + height: 100%; +} + +.no-margin { + margin: 0; +} + +.stretch-to-fill-parent { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; +} + +/** +* This primarily used to align a title and an icon in one line. The title will use the whole width subtracting +* the icon's width. So, the icon will be shown at the right edge. +*/ +// TODO: Choose more general and descriptive name +.action-title { + display: flex; + align-items: center; + + * { + padding: 0; + margin: 0; + } + + > :first-child { + flex: 1; + } +} + +/** +* Background styles used for the global theme +*/ +.background-dark { + background: #4f4f4f; + color: white; +} + +.background-dark-brighter { + background: #6f6f6f; + color: white; +} + +.subtitle-text { + font-size: 125%; + margin-top: 0; + margin-bottom: 15px; +} + +.subtitle-nocolor { + font-size: 12px; + font-weight: 400; +} + +@keyframes fadeIn { + 0% { + width: 0%; + margin-left: 0; + } + 100% { + width: 100%; + margin-left: -100%; + } +} diff --git a/client/src/styles.scss b/client/src/styles.scss index 0e54d91be5..561dbcfaff 100644 --- a/client/src/styles.scss +++ b/client/src/styles.scss @@ -37,276 +37,42 @@ --view-headbar-height: 50px; } +@import 'assets/styles/utils.scss'; + +@import 'assets/styles/reset.scss'; +@import 'assets/styles/typography.scss'; +@import 'assets/styles/colors.scss'; +@import 'assets/styles/components.scss'; +@import 'assets/styles/material/icon.scss'; +@import 'assets/styles/pbl.scss'; + /** * Must be cleaned up */ -.scrolling-table-cell { - .fill { - position: relative; - display: inherit; - height: 100%; - width: 100%; - - // try to put all children in the in the vertical middle - * { - margin-top: auto; - margin-bottom: auto; - } - } - - .checkbox-ripple-padding { - padding-left: 12px; - } - - .central-button { - justify-content: center; - } - - .clickable { - cursor: pointer; - } - - .detail-link { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - } -} - /** Define the general style-rules */ -* { - font-family: OSFont, Fira Sans, Roboto, Arial, Helvetica, sans-serif; -} - .mat-toolbar h2, .mat-dialog-title { font-family: OSFont, Fira Sans, Roboto, Arial, Helvetica, sans-serif; } -mat-icon { - font-family: 'Material Icons' !important; -} - -body { - margin: 0 auto; - padding: 0; - line-height: 1.5; - font-size: 14px; -} - -h1, -h2, -h3, -h4, -.title-font, -.slidetitle h1, -.slidetitle h2 { - font-family: OSFont Condensed, Fira Sans Condensed, Roboto-condensed, Arial, Helvetica, sans-serif; -} - -h1 { - padding-bottom: 10px; - line-height: 1.2; - margin: 0; - font-weight: normal; - font-size: 36px; -} - -h3 { - font-weight: 500; - margin-bottom: 0; -} - -h4 { - font-weight: 400; - font-size: 100%; - margin-bottom: 5px; - - .mat-icon-button mat-icon { - font-size: 16px; - } -} - -.small { - font-size: 90%; -} - -img { - border: none; -} - -a { - text-decoration: none; - - &:hover { - text-decoration: underline; - } -} - -strong, -b, -.bold { - font-weight: 500; -} - -.italic { - font-style: italic; -} - .generic-mini-button { bottom: -28px; z-index: 100; } -.save-button { - // needs to be important or will be overwritten locally - background-color: rgb(77, 243, 86) !important; -} - -.text-success { - color: rgb(77, 243, 86); -} - -// transform text to uppercase. Use on span, p, h, (...) -.upper { - text-transform: uppercase; -} - -// for aligning text lines with an icon and or link -.line-and-icon { - display: block; - line-height: 40px; - h2, - span, - a { - vertical-align: bottom; - } - - .mat-icon-button, - .mat-icon { - margin: auto 0; - vertical-align: middle; - } -} - -.red-warning-text { - color: red !important; - .mat-icon { - color: red !important; - } -} - -.green-text { - color: #5a5 !important; -} - -.icon-as-block.mat-icon { - display: block; -} - -/** - * Can better align icons with text. Use like: - * ... - * ... - */ -.inline-icon-text-align.mat-icon { - vertical-align: bottom; -} - -.icon-text-distance { - margin-left: 5px; -} - .no-content { text-align: center; color: gray; } -.regular-shadow { - box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37) !important; -} - .mat-card { @extend .regular-shadow; } -.os-card, -.os-form-card { - max-width: 770px; - margin-top: 20px !important; - margin-left: auto !important; - margin-right: auto !important; - font-size: 16px; -} - -.os-card { - margin-bottom: 20px !important; - - .mat-select-arrow-wrapper { - visibility: hidden; - } -} - -.os-form-card { - padding: 27px; - - .mat-form-field { - width: 100%; - padding: 10px 0; - } -} - -.os-form-card-mobile { - margin-top: 20px !important; - margin-bottom: 20px !important; - - .mat-form-field, - .mat-select { - width: 100%; - } -} - .projector-card .mat-form-field-infix { width: 290px; } -// Shared table definitions -// TODO: Might be deprecated since we now have Virtual Scrolling Tables -%os-table { - width: 100%; - - /** size of the mat row */ - mat-row { - position: relative; - min-height: 60px; - } - mat-row.lg { - height: 110px; - min-height: 90px; - } - mat-row:hover { - cursor: pointer; - background-color: rgba(0, 0, 0, 0.025); - } - mat-row.selected { - cursor: pointer; - background-color: rgba(0, 0, 0, 0.055); - } -} - -@keyframes fadeIn { - 0% { - width: 0%; - margin-left: 0; - } - 100% { - width: 100%; - margin-left: -100%; - } -} - //custom table header for search button, filtering and more. Used in ListViews .custom-table-header { $height: 40px; @@ -334,28 +100,6 @@ b, } } -.os-listview-table { - @extend %os-table; - - /* multi select column */ - .mat-column-selector { - flex: 0 0 60px; - } - /* projector button column */ - .mat-column-projector { - flex: 0 0 40px; - overflow: visible; - } - /** hide mat header row */ - .mat-header-row { - display: none; - } -} - -.os-headed-listview-table { - @extend %os-table; -} - /* hide scrollbars caused by hidden filter dialog outside of the viewport */ .mat-drawer-content { overflow-x: hidden !important; @@ -376,17 +120,6 @@ b, margin-top: 50px; } -/**even distribution of elements in a row*/ -.flex-spaced { - display: flex; - justify-content: space-between; -} - -/**use to push content to the right side*/ -.spacer { - flex: 1 1 auto; -} - .mat-expansion-panel { border-radius: 0 !important; } @@ -415,18 +148,6 @@ b, } } -.os-tree { - .node-content-wrapper { - border: 1px black; - width: 100%; - padding: 10px 20px; - } - - tree-loading-component { - display: none; - } -} - .mat-chip, .mat-basic-chip { font-size: 12px; @@ -438,16 +159,6 @@ b, display: inline-flex; } -// to display quantities. Use in span or div -.os-amount-chip { - border-radius: 50%; - min-width: 20px; - height: 20px; - line-height: 20px; - padding: 3px; - text-align: center; -} - .mat-chip:focus, .mat-basic-chip:focus { outline: none; @@ -460,62 +171,6 @@ button.mat-menu-item.selected { margin-right: 8px !important; } -/** helper classes for margin/padding */ -.spacer-top-3 { - margin-top: 3px !important; -} - -.spacer-top-5 { - margin-top: 5px !important; -} - -.spacer-top-10 { - margin-top: 10px !important; -} - -.spacer-top-20 { - margin-top: 20px !important; -} - -.spacer-bottom-10 { - margin-bottom: 10px !important; -} - -.spacer-bottom-20 { - margin-bottom: 20px !important; -} - -.spacer-bottom-40 { - margin-bottom: 40px !important; -} - -.spacer-bottom-60 { - margin-bottom: 60px !important; -} - -.spacer-left-10 { - margin-left: 10px; -} - -.spacer-left-20 { - margin-left: 20px; -} - -.spacer-left-50 { - margin-left: 50px !important; -} - -.button24 { - background-color: white; - width: 24px !important; - height: 24px !important; -} - -.icon24 { - font-size: 16px; - margin-top: -8px; -} - .mat-mini-fab.large { width: 24px; height: 24px; @@ -561,57 +216,6 @@ button.mat-menu-item.selected { padding: 0 16px 0 0 !important; } -/** more helper classes **/ -.center { - text-align: center; -} -.pointer:hover { - cursor: pointer; -} -.pointer.selected { - cursor: pointer; -} - -/** Colors **/ -.lightblue { - background-color: rgb(33, 150, 243) !important; - color: white !important; -} - -.darkblue { - background-color: rgb(63, 81, 181) !important; - color: white !important; -} - -.green, -.success { - background-color: rgb(76, 175, 80) !important; - color: white !important; -} - -.red, -.error { - background-color: rgb(255, 82, 82) !important; - color: white !important; -} - -.yellow, -.warning { - background-color: rgb(255, 193, 7) !important; - color: white !important; -} - -.bluegrey { - background-color: rgb(96, 125, 139) !important; - color: white !important; -} - -.grey, -.gray { - background-color: #e0e0e0 !important; - color: rgba(0, 0, 0, 0.87) !important; -} - .multi-line-chip { white-space: pre-line; } @@ -712,47 +316,12 @@ button.mat-menu-item.selected { font-size: 16px; } -.one-line { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.ellipsis-overflow { - @extend .one-line; - padding-right: 0px; - margin-right: 0px; -} - -.overflow-hidden { - overflow: hidden; -} - -.nowrap { - white-space: nowrap; -} - -.white { - color: white; -} - .queue { .mat-expansion-panel-body { padding: 0 !important; } } -.smaller-icon-button { - height: 24px !important; - width: 24px !important; - line-height: 24px !important; - - .mat-button-wrapper { - vertical-align: top; - line-height: initial; - } -} - /** * Fix to enable multi line mat hints. See: * https://github.com/angular/components/issues/5227 @@ -779,81 +348,35 @@ button.mat-menu-item.selected { } } -// custom horrizontal scroll-bar - -.h-scroller { - overflow-x: auto; - overflow-y: hidden; - scrollbar-width: 5px; - scrollbar-color: #666666; -} - -.h-scroller::-webkit-scrollbar { - width: 5px; - height: 5px; -} - -.h-scroller::-webkit-scrollbar-thumb { - background: #666666; - height: 5px; - border-radius: 5px; -} - -.h-scroller::-webkit-scrollbar-corner { - display: none; - height: 0px; - width: 0px; -} - -.break-word { - hyphens: auto; -} - -/** - * simply hide something - */ -.hide { - display: none; -} - -.flex-vertical-center-unsafe { +.fake-button-no-touch { + width: 40px; + height: 40px; display: flex; - flex-direction: row; align-items: center; - - &.align-left { - justify-content: flex-start; - } -} - -.flex-vertical-center { - display: flex; - flex-direction: row; - - &.align-left { - justify-content: flex-start; - } - - & > * { - margin-top: auto; - margin-bottom: auto; - } + justify-content: center; + user-select: none; + border-radius: 4px; } -.flex-center { - @extend .flex-vertical-center; - justify-content: center; +.fake-button { + @extend .fake-button-no-touch; + cursor: pointer; } -.flex-center-unsafe { - @extend .flex-vertical-center-unsafe; - justify-content: center; +.background-default[disabled] { + @extend .fake-disabled; } -.nocursor { - cursor: none; +.dialog-title { + font-size: 20px; + font-weight: 500; + margin: 0; + padding: 0; } -.pre-wrap { - white-space: pre-wrap; +/* Custom hint and error classes. Same values as .mat-hint and -mat-error */ +.hint, +.error { + font-size: 75%; + display: block; }