Cleanup styles

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%;

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;
+    }
+}

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;
 

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 {

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;
+    }
+}

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;
+}

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;
+}