start to fix the side navigation

NUM-Forschungsdatenplattform · Aug 6, 2024 · a64e494 · a64e494
2 parents 9a94950 + f4c417f
commit a64e494
Show file tree

Hide file tree

Showing 13 changed files with 90 additions and 48 deletions.
diff --git a/docs/_gettext/_static/css/micromodal.css b/docs/_gettext/_static/css/micromodal.css
@@ -143,3 +143,4 @@
     .modal__container {
         max-width: 90%;
     }
+}
diff --git a/src/styles/custom-material/styles/_buttons.themed.scss b/src/styles/custom-material/styles/_buttons.themed.scss
@@ -5,41 +5,46 @@
   $accent: map-get($theme, accent);
   $primary: map-get($theme, primary);
   $additional: map-get($theme, additional);
-
-  .mat-icon-button.mat-button-disabled.mat-button-disabled {
+  /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.*/
+  /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.*/
+  .mat-mdc-icon-button.mat-button-disabled.mat-button-disabled {
     color: mat-color($additional, light-grey);
   }
 
-  .mat-button-base {
+  .mat-mdc-button-base {
     text-transform: uppercase !important;
   }
 
   .num-button {
-    &.mat-button .mat-button-wrapper > *,
-    &.mat-stroked-button .mat-button-wrapper > *,
-    &.mat-raised-button .mat-button-wrapper > *,
-    &.mat-flat-button .mat-button-wrapper > * {
+    /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.*/
+    /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.*/
+    &.mat-mdc-button .mat-button-wrapper > *,
+    &.mat-mdc-outlined-button .mat-button-wrapper > *,
+    &.mat-mdc-raised-button .mat-button-wrapper > *,
+    &.mat-mdc-unelevated-button .mat-button-wrapper > * {
       vertical-align: baseline !important;
     }
 
     fa-icon {
       margin: 0 4px 0 0;
     }
-
+    /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.*/
+    /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.*/
     &.cdk-keyboard-focused .mat-button-focus-overlay {
       display: none;
     }
 
     // Primaray Button
-    &.mat-flat-button.mat-primary {
+    &.mat-mdc-unelevated-button.mat-primary {
       line-height: 34px;
       border-width: 1px;
       border-style: solid;
       border-color: mat-color($primary, 500);
       fa-icon {
         color: mat-color($accent, 500);
       }
-
+      /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.*/
+      /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.*/
       &:hover:not(.mat-button-disabled) {
         background: mat-color($primary, 700);
         box-shadow: $raised-shadow;
@@ -49,7 +54,8 @@
         background: mat-color($primary, 700);
         border-color: mat-color($accent, 500);
       }
-
+      /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.*/
+      /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.*/
       &.mat-button-disabled {
         background: mat-color($primary, 100);
         border-color: mat-color($primary, 100);
@@ -60,13 +66,14 @@
     }
 
     // Secondary Button
-    &.mat-stroked-button.mat-primary {
+    &.mat-mdc-outlined-button.mat-primary {
       border-color: mat-color($primary, 500);
 
       fa-icon {
         color: mat-color($accent, 500);
       }
-
+      /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.*/
+      /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.*/
       &:hover:not(.mat-button-disabled) {
         background: mat-color($accent, 100);
         box-shadow: $raised-shadow;
@@ -75,7 +82,8 @@
       &.cdk-keyboard-focused {
         background: mat-color($accent, 200);
       }
-
+      /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.*/
+      /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.*/
       &.mat-button-disabled {
         fa-icon {
           color: mat-color($accent, 200);
@@ -86,13 +94,14 @@
     }
 
     // Basic Button
-    &.mat-button.mat-primary {
+    &.mat-mdc-button.mat-primary {
       color: mat-color($additional, mid-grey);
 
       fa-icon {
         color: mat-color($accent, 500);
       }
-
+      /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.*/
+      /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.*/
       &:hover:not(.mat-button-disabled) {
         background: mat-color($accent, 100);
         box-shadow: $raised-shadow;
@@ -102,7 +111,8 @@
         background: mat-color($accent, 200);
         border-color: mat-color($accent, 500);
       }
-
+      /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.*/
+      /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.*/
       &.mat-button-disabled {
         fa-icon {
           color: mat-color($accent, 200);

diff --git a/src/styles/custom-material/styles/_general_select.themed.scss b/src/styles/custom-material/styles/_general_select.themed.scss
@@ -1,7 +1,7 @@
 @mixin general_select_themed($theme) {
   $accent: map-get($theme, accent);
 
-  .mat-option {
+  .mat-mdc-option {
     &--active,
     &--selected {
       background: mat-color($accent, 50);

diff --git a/src/styles/custom-material/styles/_general_table.themed.scss b/src/styles/custom-material/styles/_general_table.themed.scss
@@ -1,7 +1,7 @@
 @mixin general_table_themed($theme) {
   $accent: map-get($theme, accent);
 
-  .mat-row {
+  .mat-mdc-row {
     &--active,
     &--selected {
       background: mat-color($accent, 50);

diff --git a/src/styles/custom-material/styles/_input-classes.scss b/src/styles/custom-material/styles/_input-classes.scss
@@ -1,59 +1,74 @@
 .num-operator-select {
+  /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+  /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
   .mat-form-field-infix {
     width: 55px;
     bottom: 1px;
   }
-
+  /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+  /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
   .mat-form-field-underline {
     display: none;
   }
 }
 
 .num-tiny-input {
+  /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+  /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
   .mat-form-field-wrapper {
     padding: 0;
     margin: 0 !important;
   }
-
+  /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+  /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
   .mat-form-field-flex {
     padding: 0 0.1em 0 0.4em !important;
   }
-
+  /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+  /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
   .mat-form-field-infix {
     width: unset;
     padding: 0.1em 0 0.35em 0 !important;
   }
-
+  /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+  /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
   .mat-form-field-underline {
     position: initial;
   }
-
+  /* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version. */
+  /* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version. */
   .mat-select-value {
     max-width: unset;
     width: unset;
     min-width: 30px;
     padding-right: 1em;
   }
-
+  /* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version. */
+  /* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version. */
   .mat-select-arrow-wrapper {
     transform: translateY(-10%) !important;
   }
 }
 
 .num-time-picker {
   max-width: 50px;
+  /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+  /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
   .mat-form-field-wrapper {
     padding: 0;
   }
-
+  /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+  /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
   .mat-form-field-infix {
     width: unset;
   }
-
+  /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+  /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
   .mat-form-field-underline {
     position: initial;
   }
-
+  /* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version. */
+  /* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version. */
   .mat-select-value {
     max-width: unset;
     width: unset;

diff --git a/src/styles/custom-material/styles/_lang-toggle-button.themed.scss b/src/styles/custom-material/styles/_lang-toggle-button.themed.scss
@@ -5,7 +5,8 @@
 
   .num-mat-lang-toggle-button {
     border: none;
-
+    /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
+    /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
     .mat-button-toggle {
       background-color: transparent;
 
@@ -25,23 +26,30 @@
         }
       }
     }
-
+    /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
+    /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
+    /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
+    /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
     .mat-button-toggle-appearance-standard {
       color: mat-color($additional, mid-grey);
-
+      /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
+      /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
       &.mat-button-toggle-checked {
         color: mat-color($primary);
       }
-
+      /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
+      /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
       &.mat-button-toggle + .mat-button-toggle {
         border-left: solid 2px mat-color($accent);
       }
     }
-
+    /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
+    /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
     .cdk-keyboard-focused .mat-button-toggle-focus-overlay {
       display: none;
     }
-
+    /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
+    /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
     .mat-button-toggle-label-content {
       line-height: 32px;
     }

diff --git a/src/styles/custom-material/styles/_mat-chip.themed.scss b/src/styles/custom-material/styles/_mat-chip.themed.scss
@@ -2,8 +2,10 @@
   $primary: map-get($theme, primary);
   $accent: map-get($theme, accent);
 
-  .mat-chip.mat-standard-chip {
+  .mat-mdc-chip.mat-mdc-standard-chip {
     font-size: 14px;
+    /* TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version. */
+    /* TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version. */
     &.mat-chip-selected.mat-primary,
     &.chip-primary {
       background: mat-color($primary, 500);

diff --git a/src/styles/custom-material/styles/_mat-hint.themed.scss b/src/styles/custom-material/styles/_mat-hint.themed.scss
@@ -1,7 +1,7 @@
 @mixin mat-hint_themed($theme) {
   $additional: map-get($theme, additional);
 
-  .mat-hint {
+  .mat-mdc-form-field-hint {
     color: mat-color($additional, dark-grey);
   }
 }
diff --git a/src/styles/custom-material/styles/_mat-list.themed.scss b/src/styles/custom-material/styles/_mat-list.themed.scss
@@ -2,7 +2,7 @@
   $accent: map-get($theme, accent);
 
   num-side-menu {
-    .mat-list-base {
+    .mat-mdc-list-base {
       padding-top: 0 !important;
     }
   }

diff --git a/src/styles/custom-material/styles/_mat-toast.themed.scss b/src/styles/custom-material/styles/_mat-toast.themed.scss
@@ -7,28 +7,32 @@
     &-success {
       color: mat-color($additional, dark-grey);
       background-color: mat-color($additional, success);
-
+      /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
+      /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
       .mat-button-wrapper {
         color: mat-color($additional, dark-grey);
       }
     }
     &-warn {
       color: mat-color($additional, dark-grey);
       background-color: mat-color($additional, warning);
-
+      /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
+      /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
       .mat-button-wrapper {
         color: mat-color($additional, dark-grey);
       }
     }
     &-error {
       color: mat-color($additional, white);
       background-color: mat-color($additional, error);
-
+      /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
+      /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
       .mat-button-wrapper {
         color: mat-color($additional, white);
       }
     }
-
+    /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
+    /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
     .mat-button-wrapper {
       font-weight: 400;
     }

diff --git a/src/styles/custom-material/styles/_mat-tooltip.themed.scss b/src/styles/custom-material/styles/_mat-tooltip.themed.scss
@@ -1,5 +1,5 @@
 @mixin mat-tooltip_themed($theme) {
-  .mat-tooltip {
+  .mat-mdc-tooltip {
     max-width: 50vw !important;
     word-wrap: break-word;
   }

diff --git a/src/styles/custom-material/styles/_table-responsive.themed.scss b/src/styles/custom-material/styles/_table-responsive.themed.scss
@@ -4,18 +4,18 @@
     position: relative;
     width: 100%;
     overflow-x: auto;
-    .mat-table {
+    .mat-mdc-table {
       width: 100%;
       max-width: 100%;
       display: table;
       border-collapse: collapse;
     }
-    .mat-row,
-    .mat-header-row {
+    .mat-mdc-row,
+    .mat-mdc-header-row {
       display: table-row;
     }
-    .mat-cell,
-    .mat-header-cell {
+    .mat-mdc-cell,
+    .mat-mdc-header-cell {
       word-wrap: initial;
       display: table-cell;
       padding: 0px 5px;

diff --git a/src/styles/custom-material/styles/_typography.themed.scss b/src/styles/custom-material/styles/_typography.themed.scss
@@ -69,7 +69,9 @@
     letter-spacing: 0 !important;
   }
 
-  a:not(.mat-button):not(.mat-list-item):not(.mat-tab-link):not(.command-bar__scenario-link) {
+  a:not(.mat-mdc-button):not(.mat-mdc-list-item):not(.mat-mdc-tab-link):not(
+      .command-bar__scenario-link
+    ) {
     color: mat-color($primary, 500);
     font-size: 16px !important;
     font-weight: 400 !important;