Moved all styles

src/assets/styles/_common-variables.scss

@@ -21,6 +21,11 @@
     --iqser-grey-4: #e2e4e9;
     --iqser-grey-5: #d3d5da;
     --iqser-grey-6: #f0f1f4;
+    --iqser-grey-7: #9398a0;
+    --iqser-green-1: #00ff00;
+    --iqser-green-2: #5ce594;
+    --iqser-yellow-1: #ffb83b;
+    --iqser-yellow-2: #fdbd00;
     --iqser-helpmode-primary: green;
 }
 

src/assets/styles/common-buttons.scss

@@ -52,7 +52,7 @@
 
 iqser-icon-button,
 iqser-chevron-button,
-redaction-user-button, // TODO
+.user-button, // TODO
 iqser-circle-button {
     position: relative;
     display: flex;

src/assets/styles/common-fonts.scss

@@ -0,0 +1,36 @@
+/* inter-regular - latin */
+
+@font-face {
+    font-family: 'OpenSans Extrabold';
+    src: url('../font/OpenSans-ExtraBold.ttf') format('truetype');
+}
+
+@font-face {
+    font-family: 'Inter';
+    font-weight: 300;
+    src: url('../font/Inter-VariableFont.ttf') format('truetype');
+}
+
+@font-face {
+    font-family: 'Inter';
+    font-weight: 400;
+    src: url('../font/Inter-VariableFont.ttf') format('truetype');
+}
+
+@font-face {
+    font-family: 'Inter';
+    font-weight: 500;
+    src: url('../font/Inter-VariableFont.ttf') format('truetype');
+}
+
+@font-face {
+    font-family: 'Inter';
+    font-weight: 600;
+    src: url('../font/Inter-VariableFont.ttf') format('truetype');
+}
+
+@font-face {
+    font-family: 'Inter';
+    font-weight: 700;
+    src: url('../font/Inter-VariableFont.ttf') format('truetype');
+}

src/assets/styles/common-help-mode.scss

@@ -0,0 +1,28 @@
+.help-mode-on-mouse-over {
+    z-index: 100;
+    position: absolute;
+    top: -5px;
+    left: -5px;
+    width: 100%;
+    height: 100%;
+    padding-right: 5px;
+    padding-bottom: 10px;
+    transition: all 0.25s;
+}
+
+.help-highlight,
+.help-mode-on-mouse-over:hover {
+    background: rgba(92, 229, 148, 0.5);
+    box-shadow: 0 0 0 2px var(--iqser-helpmode-primary) inset;
+    cursor: help;
+}
+
+.help-mode-on-mouse-over-filters,
+.help-mode-on-mouse-over-quick-filters,
+.help-mode-on-mouse-over-new-dossier {
+    padding-right: 10px;
+}
+
+.help-mode-on-mouse-over-notifications {
+    padding-left: 4px;
+}

src/assets/styles/common-list.scss

@@ -0,0 +1,10 @@
+.mat-list-item {
+    color: var(--iqser-accent) !important;
+    font-size: 13px !important;
+    line-height: 16px !important;
+}
+
+.list-50vh {
+    overflow-y: scroll;
+    max-height: 50vh;
+}

src/assets/styles/common-loading.scss

@@ -0,0 +1,23 @@
+.loading:after {
+    content: '.';
+    animation: dots 1s steps(5, end) infinite;
+}
+
+@keyframes dots {
+    0%,
+    20% {
+        color: rgba(40, 50, 65, 0);
+        text-shadow: 0.25em 0 0 rgba(40, 50, 65, 0), 0.5em 0 0 rgba(40, 50, 65, 0);
+    }
+    40% {
+        color: #283241;
+        text-shadow: 0.25em 0 0 rgba(40, 50, 65, 0), 0.5em 0 0 rgba(40, 50, 65, 0);
+    }
+    60% {
+        text-shadow: 0.25em 0 0 #283241, 0.5em 0 0 rgba(40, 50, 65, 0);
+    }
+    80%,
+    100% {
+        text-shadow: 0.25em 0 0 #283241, 0.5em 0 0 #283241;
+    }
+}

src/assets/styles/common-media-queries.scss

@@ -0,0 +1,15 @@
+@media only screen and (max-width: 800px) {
+    .visible-lg {
+        display: none !important;
+    }
+}
+
+.visible-lt-lg {
+    display: none !important;
+}
+
+@media only screen and (max-width: 800px) {
+    .visible-lt-lg {
+        display: flex !important;
+    }
+}

src/assets/styles/common-progress-bar.scss

@@ -0,0 +1,14 @@
+.mat-progress-bar {
+    height: 6px;
+    border-radius: 3px;
+
+    .mat-progress-bar-buffer {
+        background-color: var(--iqser-grey-4);
+    }
+
+    &.green {
+        .mat-progress-bar-fill::after {
+            background-color: var(--iqser-green-2);
+        }
+    }
+}

src/assets/styles/common-select.scss

@@ -0,0 +1,22 @@
+@use 'common-mixins';
+
+.mat-select-panel {
+    @include common-mixins.scroll-bar;
+
+    .mat-option {
+        &:hover:not(.mat-option-disabled),
+        &:focus:not(.mat-option-disabled) {
+            background-color: var(--iqser-grey-6);
+        }
+
+        &.mat-selected:not(.mat-option-multiple) {
+            background-color: rgba(var(--iqser-primary), 0.2);
+            color: var(--iqser-accent);
+        }
+    }
+}
+
+.mat-form-field.no-label .mat-form-field-infix {
+    padding: 0 !important;
+    border-top: 0 !important;
+}

src/assets/styles/common-slider.scss

@@ -0,0 +1,48 @@
+.mat-slider-horizontal {
+    width: 140px;
+    height: 32px !important;
+
+    .mat-slider-wrapper {
+        left: 0 !important;
+        top: 16px !important;
+    }
+
+    .mat-slider-track-wrapper,
+    .mat-slider-track-fill {
+        height: 6px !important;
+        border-radius: 3px;
+    }
+
+    // For disabled state
+    .mat-slider-track-fill {
+        background-color: var(--iqser-primary);
+    }
+
+    .mat-slider-track-background {
+        height: 4px !important;
+        margin-top: 1px;
+        border-radius: 3px;
+        background-color: var(--iqser-grey-4) !important;
+    }
+
+    .mat-slider-focus-ring {
+        display: none;
+    }
+}
+
+.mat-slider-thumb {
+    width: 16px !important;
+    height: 16px !important;
+    border-width: 0 !important;
+    background-color: var(--iqser-primary) !important;
+}
+
+.mat-slider:not(.mat-slider-disabled):not(.mat-slider-sliding) .mat-slider-thumb {
+    transform: scale(1) !important;
+}
+
+.mat-slider-horizontal.mat-slider-disabled {
+    .mat-slider-thumb {
+        transform: translateX(-3px);
+    }
+}

src/assets/styles/common-styles.scss

@@ -1,3 +1,4 @@
+@use 'common-fonts';
 @use 'common-inputs';
 @use 'common-buttons';
 @use 'common-texts';
@@ -12,3 +13,15 @@
 @use 'common-autocomplete';
 @use 'common-checkbox';
 @use 'common-controls';
+@use 'common-help-mode';
+@use 'common-list';
+@use 'common-loading';
+@use 'common-media-queries';
+@use 'common-progress-bar';
+@use 'common-select';
+@use 'common-slider';
+@use 'common-tabs';
+@use 'common-toasts';
+@use 'common-toggle';
+@use 'common-toggle-button';
+@use 'common-tooltips';

src/assets/styles/common-tabs.scss

@@ -0,0 +1,27 @@
+.red-tab {
+    &:not(:last-child) {
+        margin-right: 2px;
+    }
+
+    height: 30px;
+    line-height: 30px;
+    padding: 0 14px;
+    border-radius: 17px;
+    transition: background-color 0.2s;
+    cursor: pointer;
+
+    &:not(.disabled):not(.active):hover {
+        background-color: var(--iqser-grey-6);
+    }
+
+    &.active {
+        background-color: rgba(var(--iqser-primary), 0.1);
+        font-weight: 600;
+        color: var(--iqser-primary);
+    }
+
+    &.disabled {
+        color: rgba(var(--iqser-accent), 0.3);
+        cursor: not-allowed;
+    }
+}

src/assets/styles/common-toasts.scss

@@ -0,0 +1,108 @@
+$toast-width: 400px;
+
+.toast-container .ngx-toastr,
+.inline-dialog-toast {
+    padding: 11px 16px;
+    border-radius: 8px;
+    background-image: none;
+    font-family: Inter, sans-serif;
+    font-size: 13px;
+    line-height: 18px;
+    width: $toast-width;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-shadow: none;
+
+    > *:not(:last-child) {
+        margin-right: 10px;
+    }
+
+    &:hover {
+        box-shadow: none;
+    }
+
+    .actions-wrapper {
+        margin-top: 24px;
+        display: flex;
+
+        > *:not(:last-child) {
+            margin-right: 24px;
+        }
+
+        a {
+            font-size: 11px;
+            font-weight: 600;
+            line-height: 14px;
+            color: var(--iqser-accent);
+            text-transform: uppercase;
+            cursor: pointer;
+        }
+    }
+}
+
+.toast-top-right {
+    top: 128px;
+    right: calc(50% - #{$toast-width} / 2);
+}
+
+.toast-file-preview {
+    top: 160px;
+    right: 405px;
+}
+
+.toast-close-button {
+    position: initial;
+    opacity: 1;
+    text-shadow: none;
+
+    mat-icon {
+        width: 10px;
+    }
+
+    &:hover {
+        opacity: 1;
+    }
+}
+
+.toast-warning,
+.toast-success {
+    .toast-message {
+        color: var(--iqser-accent);
+    }
+
+    .toast-close-button {
+        color: var(--iqser-accent);
+    }
+}
+
+.toast-error,
+.toast-info {
+    .toast-close-button:hover {
+        color: var(--iqser-white);
+    }
+}
+
+.toast-success {
+    background-color: var(--iqser-green-2);
+}
+
+.toast-error {
+    background-color: var(--iqser-primary);
+    color: var(--iqser-white);
+}
+
+.toast-warning {
+    background-color: var(--iqser-yellow-2);
+    color: var(--iqser-accent);
+}
+
+.toast-info {
+    background-color: var(--iqser-accent);;
+}
+
+.inline-dialog-toast {
+    width: calc(100% - 96px);
+    margin-left: 32px;
+    margin-top: 14px;
+}

src/assets/styles/common-toggle-button.scss

@@ -0,0 +1,21 @@
+.mat-button-toggle-standalone,
+.mat-button-toggle-group {
+    box-shadow: none;
+    border-radius: 100px !important;
+    width: fit-content;
+
+    .mat-button-toggle:not(.mat-button-toggle-checked) {
+        .mat-button-toggle-button {
+            background: var(--iqser-grey-6);
+            color: var(--iqser-grey-7);
+        }
+    }
+}
+
+.mat-button-toggle-disabled {
+    .mat-button-toggle-button {
+        cursor: not-allowed !important;
+    }
+
+    outline: none;
+}

src/assets/styles/common-toggle.scss

@@ -0,0 +1,40 @@
+.mat-slide-toggle {
+    .mat-slide-toggle-bar {
+        height: 16px !important;
+        width: 30px !important;
+        border-radius: 16px !important;
+        background-color: var(--iqser-grey-4);
+    }
+
+    .mat-slide-toggle-thumb-container {
+        top: 2px !important;
+        left: 2px !important;
+        height: 12px !important;
+        width: 12px !important;
+    }
+
+    .mat-slide-toggle-thumb {
+        height: 12px !important;
+        width: 12px !important;
+        box-shadow: none;
+        background-color: var(--iqser-grey-2);
+    }
+
+    .mat-ripple {
+        display: none;
+    }
+
+    &.mat-primary.mat-checked {
+        .mat-slide-toggle-bar {
+            background-color: var(--iqser-primary);
+        }
+
+        .mat-slide-toggle-thumb {
+            background-color: var(--iqser-white);
+        }
+
+        .mat-slide-toggle-thumb-container {
+            transform: translate3d(14px, 0, 0);
+        }
+    }
+}

src/assets/styles/common-tooltips.scss

@@ -0,0 +1,60 @@
+.mat-tooltip {
+    background-color: var(--iqser-accent);
+    border-radius: 3px !important;
+    padding: 10px;
+    margin: 12px !important;
+    font-size: 11px;
+    line-height: 14px;
+    color: var(--iqser-white) !important;
+    position: relative;
+    overflow: visible !important;
+    text-align: center;
+
+    //&:after {
+    //    content: '';
+    //    position: absolute;
+    //    left: 50%;
+    //    margin-left: -5px;
+    //    width: 0;
+    //    height: 0;
+    //    z-index: 3000;
+    //    border-left: solid 5px transparent;
+    //    border-right: solid 5px transparent;
+    //    border-top: solid 6px $accent;
+    //}
+
+    &.small {
+        max-width: 160px;
+    }
+
+    &.warn {
+        background-color: var(--iqser-yellow-2);
+        color: var(--iqser-accent) !important;
+
+        //&:after {
+        //    border-top: solid 6px $yellow-2;
+        //}
+    }
+}
+
+//
+//.mat-tooltip[style*='transform-origin: center top']:after {
+//    top: -6px;
+//    transform: rotate(180deg);
+//}
+//
+//.mat-tooltip[style*='transform-origin: center bottom']:after {
+//    top: 100%;
+//}
+//
+//.mat-tooltip[style*='transform-origin: right center']:after {
+//    top: 50%;
+//    left: 100%;
+//    transform: rotate(-90deg) translateY(3px) translateX(3px);
+//}
+//
+//.mat-tooltip[style*='transform-origin: left center']:after {
+//    top: 50%;
+//    left: 0;
+//    transform: rotate(90deg) translateY(3px) translateX(-3px);
+//}