ngx-edu-sharing-ui 10.0.28 → 10.0.29

package/assets/scss/branding.scss

@@ -1,32 +1,32 @@
 $tokens: (
-     primaryFontFamily: 'Montserrat',
-     primaryFontSize: 9pt,
-     customIcons: true
+    primaryFontFamily: '"Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
+    primaryFontSize: 15px,
+    customIcons: false
 );
 
 
-$warning: #EA4B71;
-$warningMedium: #e98c1b;
-$colorStatusPositive: #189d62;
+$cardRadius: 20px;
+$cardWidth: 250px;
+$breadcrumbHeight: 60px;
 
-$oehYellow: #e4f700;
-$oehGreen: #b4da1c;
-$tabColorLight: $oehYellow;
-$cardWidth: 280px;
+$default-chip-color: rgb(188, 188, 188);
+$custom-chip-colors: (
+    'ccm_taxonid': var(--primary),
+    'ccm_educationallearningresourcetype_agg': $default-chip-color,
+    'ccm_educationalcontext': $default-chip-color,
+);
 
-@use '@angular/material' as mat;
-@use 'sass:map';
+$mebisBreakpoint_2xl: 1536px;
+$mebisBreakpoint_xl: 1280px;
+$mebisBreakpoint_l: 1025px;
+$mebisBreakpoint_m: 769px;
+$mebisBreakpoint_s: 640px;
 
-$custom-typography: mat.m2-define-typography-config(
-    $font-family: map.get($tokens, primaryFontFamily),
-        //$display-1: mat.define-typography-level(32px, 40px, 500, 'Montserrat'),
-    $headline-1: mat.m2-define-typography-level(24px, 32px, 700, 'Montserrat'),
-    $headline-2: mat.m2-define-typography-level(20px, 30px, 700, 'Montserrat'),
-    $subtitle-1: mat.m2-define-typography-level(18px, 27px, 700, 'Montserrat'),
-    $subtitle-2: mat.m2-define-typography-level(16px, 24px, 700, 'Montserrat'),
-    $body-2: mat.m2-define-typography-level(16px, 24px, 400, 'Montserrat'),
-    $body-1: mat.m2-define-typography-level(16px, 21px, 400),
-    $caption: mat.m2-define-typography-level(11px, 15px, 500, 'Montserrat'),
-    $button: mat.m2-define-typography-level(14px, 20px, 700, 'Montserrat'),
-    //$input: mat.define-typography-level(inherit, 1.125, 400),
+$custom-chip-colors: (
+    'customProperties_special': rgb(166, 214, 208),
+    'ccm_educationallearningresourcetype_agg': rgb(214, 166, 166),
+    'ccm_taxonid': rgb(231, 213, 191),
+    'customProperties_license': rgb(166, 192, 214),
+    'customProperties_context': rgb(214, 193, 166),
+    'customProperties_source': rgb(211, 214, 166),
 );

package/assets/scss/material-theme.scss

@@ -64,6 +64,7 @@ $dark-secondary-text: rgba(black, 0.54);
     --mdc-switch-handle-shape: var(--mat-sys-corner-full);
     --mdc-switch-track-shape: var(--mat-sys-corner-full);
 }
+
 html .mat-mdc-slide-toggle {
     --mat-switch-track-outline-width: 2px;
     --mat-switch-unselected-with-icon-handle-horizontal-margin: 0 4px;
@@ -73,6 +74,9 @@ html .mat-mdc-slide-toggle {
     --mdc-switch-handle-elevation-shadow: none;
     --mat-switch-track-outline-color: var(--mdc-switch-unselected-handle-color);
 }
+.mat-mdc-standard-chip {
+    --mdc-chip-elevated-container-color: var(--palette-primary-100);
+}
 .mdc-switch--selected {
     --mdc-switch-selected-icon-size: 16px;
     --mdc-switch-selected-handle-color: var(--palette-primary-contrast-500);
@@ -331,19 +335,17 @@ body {
     }
 }
 .mat-mdc-checkbox {
+    --mdc-checkbox-selected-checkmark-color: var(--primary);
+    --mdc-checkbox-selected-hover-icon-color: var(--primary);
+    --mdc-checkbox-selected-focus-icon-color: var(--primary);
+    --mdc-checkbox-disabled-selected-checkmark-color: var(--palette-primary-100);
     .mdc-checkbox__background {
-        border-color: var(--primary) !important;
-
-        background-color: #fff !important;
-
+        background-color: #fff;
         .mdc-checkbox__checkmark {
             color: #fff !important;
         }
     }
     &.mdc-checkbox--disabled {
-        .mdc-checkbox__background {
-            border-color: var(--palette-primary-100) !important;
-        }
         &.mat-mdc-checkbox-checked,
         &.mat-mdc-checkbox-indeterminate {
             .mdc-checkbox__background {
@@ -354,7 +356,6 @@ body {
     &.mat-mdc-checkbox-checked,
     &.mat-mdc-checkbox-indeterminate {
         .mdc-checkbox__background {
-            background-color: var(--primary) !important;
             .mdc-checkbox__checkmark,
             .mdc-checkbox__mixedmark {
                 color: #fff !important;
@@ -443,7 +444,7 @@ button {
 .mat-calendar-table-header-divider {
     display: none;
 }
-.mat-option {
+mat-option {
     font-size: 100%;
     .mat-option-primary {
         line-height: initial;
@@ -571,7 +572,6 @@ mat-select.mat-select-icon {
     }
 }
 .mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) {
-    background-color: var(--palette-primary-100) !important;
     .mat-mdc-chip-remove {
         color: var(--primary) !important;
         opacity: 1 !important;

package/assets/scss/mixins.scss

@@ -47,6 +47,26 @@
         background-color: var(--primary);
     }
 }
+@mixin materialScrollbarLight() {
+    &::-webkit-scrollbar-track {
+        -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1);
+        border-radius: 10px;
+        background-color: transparent;
+    }
+    &::-webkit-scrollbar {
+        height: 4px;
+        background-color: transparent;
+    }
+    &::-webkit-scrollbar-thumb {
+        max-width: 4px;
+        border-radius: 10px;
+        // -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
+        background-color: var(--palette-primary-100);
+    }
+    // Firefox
+    scrollbar-width: thin;
+    scrollbar-color: var(--palette-primary-100) transparent;
+}
 @mixin removeDefaultFocus() {
     outline: none;
 }