Cleanup styles

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

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:
+ * <mat-icon inline class="inline-icon-text-align"> ...
+ * <span> ...
+ */
+.inline-icon-text-align.mat-icon {
+    vertical-align: bottom;
+}
+
+.icon-text-distance {
+    margin-left: 5px;
+}

client/src/assets/styles/reset.scss

@@ -0,0 +1,11 @@
+img {
+    border: none;
+}
+
+a {
+    text-decoration: none;
+
+    &:hover {
+        text-decoration: underline;
+    }
+}

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