@ascentgl/ads-ui 21.2.1 → 21.4.0

package/src/assets/sass/ads-ui/overrides/angular-material/_datetimepicker.scss

@@ -1,248 +1,248 @@
-@use '../../abstracts/functions' as *;
-
-mat-datetimepicker-content.ads-datetimepicker-calendar {
-  border-radius: 5px;
-  background-color: color(white);
-
-  --mat-form-field-filled-label-text-color: #{color(medium)} !important;
-
-  &.hidden {
-    display: none;
-  }
-
-  .mat-datetimepicker-calendar-table-header {
-    color: color(medium);
-  }
-
-  mat-datetimepicker-calendar {
-    height: auto;
-    width: 265px;
-    margin: 12px;
-
-    &.year {
-      .mat-datetimepicker-calendar-header {
-        .mat-datetimepicker-calendar-period-button {
-          display: none;
-        }
-
-        .header.line-1 .sub-line-1 .mat-datetimepicker-calendar-header-year:hover {
-          opacity: 1;
-        }
-      }
-    }
-
-    &.month .mat-datetimepicker-calendar-header {
-      .header.line-2 .mat-datetimepicker-calendar-header-date {
-        pointer-events: none;
-      }
-    }
-
-    &:not(.month) .mat-datetimepicker-calendar-header {
-      .header.line-2 {
-        .mat-datetimepicker-calendar-header-date:hover {
-          opacity: 1;
-        }
-      }
-    }
-
-    &.clock .mat-datetimepicker-calendar-header {
-      .header.line-1 .sub-line-2 {
-        display: none;
-      }
-
-      .header.line-2 {
-        .mat-datetimepicker-calendar-header-hours,
-        .mat-datetimepicker-calendar-header-minutes {
-          &.active {
-            opacity: 1;
-          }
-        }
-      }
-    }
-
-    .mat-datetimepicker-calendar-header {
-      display: flex;
-      flex-direction: column;
-      padding: 0;
-
-      .header {
-        color: var(--mat-form-field-filled-label-text-color);
-        display: flex;
-
-        &.line-1 {
-          justify-content: space-between;
-
-          .sub-line-1 {
-            display: flex;
-            gap: 6px;
-            align-items: center;
-
-            .mat-datetimepicker-calendar-header-year {
-              opacity: 1;
-              font-weight: font-weight(regular);
-              line-height: 21px;
-              display: flex;
-              gap: 4px;
-
-              &:hover {
-                opacity: 1;
-              }
-
-              .arrow-down {
-                display: flex;
-                align-items: center;
-                margin: 2px 0 0 15px;
-                svg {
-                  fill: color(medium);
-                }
-              }
-
-              .month-shortcut {
-                padding: 0;
-                text-transform: uppercase;
-                height: auto;
-                font-size: font-size(text-base);
-                line-height: 21px;
-                font-weight: font-weight(regular);
-              }
-            }
-          }
-
-          .sub-line-2 {
-            display: flex;
-
-            > div {
-              width: auto;
-              height: auto;
-              padding: 0;
-              display: flex;
-              align-items: center;
-              opacity: 1;
-
-              &:hover {
-                opacity: 1;
-              }
-            }
-          }
-        }
-
-        &.line-2 {
-          justify-content: flex-end;
-          gap: 6px;
-          font-size: inherit;
-          line-height: inherit;
-
-          .mat-datetimepicker-calendar-header-date {
-            opacity: 1;
-          }
-
-          .mat-datetimepicker-calendar-header-time {
-            opacity: 1;
-            padding: 0;
-
-            .mat-datetimepicker-calendar-header-hours,
-            .mat-datetimepicker-calendar-header-minutes {
-              cursor: pointer;
-              opacity: 1;
-
-              &:hover {
-                opacity: 1;
-              }
-            }
-          }
-        }
-      }
-    }
-
-    .mat-datetimepicker-calendar-content {
-      padding: 0;
-
-      .mat-month-content {
-        display: none;
-      }
-
-      .mat-datetimepicker-calendar-table {
-        thead th {
-          padding: 16px 0 10px 0;
-          color: var(--mat-form-field-filled-label-text-color);
-          opacity: 1;
-        }
-
-        tbody {
-          .mat-datetimepicker-calendar-body-label {
-            visibility: hidden;
-          }
-
-          .mat-datetimepicker-calendar-body-cell {
-            > * {
-              color: color(dark);
-            }
-
-            &:hover {
-              .mat-datetimepicker-calendar-body-cell-content {
-                color: color(white);
-                background-color: color(secondary-hover);
-              }
-            }
-
-            &:focus,
-            &:active {
-              .mat-datetimepicker-calendar-body-cell-content {
-                color: color(white);
-                background-color: color(secondary-pressed);
-              }
-            }
-
-            &.mat-datetimepicker-calendar-body-active {
-              &:not(:hover) {
-                .mat-datetimepicker-calendar-body-cell-content {
-                  background-color: color(white);
-                  color: color(secondary-hover);
-                }
-              }
-
-              .mat-datetimepicker-calendar-body-cell-content {
-                border: solid 1.5px color(secondary-hover);
-              }
-            }
-          }
-
-          .mat-datetimepicker-calendar-body-cell-content {
-            font-weight: font-weight(regular);
-            font-size: 16px;
-            line-height: 21px;
-          }
-        }
-      }
-
-      mat-datetimepicker-clock {
-        margin: 0;
-
-        .mat-datetimepicker-clock {
-          background-color: color(light-30);
-
-          .mat-datetimepicker-clock-cell {
-            font-weight: font-weight(regular);
-            font-size: font-size(text-base);
-            line-height: 21px;
-            color: color(dark);
-
-            &.mat-datetimepicker-clock-cell-selected {
-              border: solid 1.5px color(select-hover);
-            }
-
-            &:hover {
-              color: color(white);
-              background-color: color(secondary-hover);
-            }
-
-            &:active {
-              color: color(white);
-              background-color: color(secondary-pressed);
-            }
-          }
-        }
-      }
-    }
-  }
-}
+@use '../../abstracts/functions' as *;
+
+mat-datetimepicker-content.ads-datetimepicker-calendar {
+  border-radius: 5px;
+  background-color: color(white);
+
+  --mat-form-field-filled-label-text-color: #{color(medium)} !important;
+
+  &.hidden {
+    display: none;
+  }
+
+  .mat-datetimepicker-calendar-table-header {
+    color: color(medium);
+  }
+
+  mat-datetimepicker-calendar {
+    height: auto;
+    width: 265px;
+    margin: 12px;
+
+    &.year {
+      .mat-datetimepicker-calendar-header {
+        .mat-datetimepicker-calendar-period-button {
+          display: none;
+        }
+
+        .header.line-1 .sub-line-1 .mat-datetimepicker-calendar-header-year:hover {
+          opacity: 1;
+        }
+      }
+    }
+
+    &.month .mat-datetimepicker-calendar-header {
+      .header.line-2 .mat-datetimepicker-calendar-header-date {
+        pointer-events: none;
+      }
+    }
+
+    &:not(.month) .mat-datetimepicker-calendar-header {
+      .header.line-2 {
+        .mat-datetimepicker-calendar-header-date:hover {
+          opacity: 1;
+        }
+      }
+    }
+
+    &.clock .mat-datetimepicker-calendar-header {
+      .header.line-1 .sub-line-2 {
+        display: none;
+      }
+
+      .header.line-2 {
+        .mat-datetimepicker-calendar-header-hours,
+        .mat-datetimepicker-calendar-header-minutes {
+          &.active {
+            opacity: 1;
+          }
+        }
+      }
+    }
+
+    .mat-datetimepicker-calendar-header {
+      display: flex;
+      flex-direction: column;
+      padding: 0;
+
+      .header {
+        color: var(--mat-form-field-filled-label-text-color);
+        display: flex;
+
+        &.line-1 {
+          justify-content: space-between;
+
+          .sub-line-1 {
+            display: flex;
+            gap: 6px;
+            align-items: center;
+
+            .mat-datetimepicker-calendar-header-year {
+              opacity: 1;
+              font-weight: font-weight(regular);
+              line-height: 21px;
+              display: flex;
+              gap: 4px;
+
+              &:hover {
+                opacity: 1;
+              }
+
+              .arrow-down {
+                display: flex;
+                align-items: center;
+                margin: 2px 0 0 15px;
+                svg {
+                  fill: color(medium);
+                }
+              }
+
+              .month-shortcut {
+                padding: 0;
+                text-transform: uppercase;
+                height: auto;
+                font-size: font-size(text-base);
+                line-height: 21px;
+                font-weight: font-weight(regular);
+              }
+            }
+          }
+
+          .sub-line-2 {
+            display: flex;
+
+            > div {
+              width: auto;
+              height: auto;
+              padding: 0;
+              display: flex;
+              align-items: center;
+              opacity: 1;
+
+              &:hover {
+                opacity: 1;
+              }
+            }
+          }
+        }
+
+        &.line-2 {
+          justify-content: flex-end;
+          gap: 6px;
+          font-size: inherit;
+          line-height: inherit;
+
+          .mat-datetimepicker-calendar-header-date {
+            opacity: 1;
+          }
+
+          .mat-datetimepicker-calendar-header-time {
+            opacity: 1;
+            padding: 0;
+
+            .mat-datetimepicker-calendar-header-hours,
+            .mat-datetimepicker-calendar-header-minutes {
+              cursor: pointer;
+              opacity: 1;
+
+              &:hover {
+                opacity: 1;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .mat-datetimepicker-calendar-content {
+      padding: 0;
+
+      .mat-month-content {
+        display: none;
+      }
+
+      .mat-datetimepicker-calendar-table {
+        thead th {
+          padding: 16px 0 10px 0;
+          color: var(--mat-form-field-filled-label-text-color);
+          opacity: 1;
+        }
+
+        tbody {
+          .mat-datetimepicker-calendar-body-label {
+            visibility: hidden;
+          }
+
+          .mat-datetimepicker-calendar-body-cell {
+            > * {
+              color: color(dark);
+            }
+
+            &:hover {
+              .mat-datetimepicker-calendar-body-cell-content {
+                color: color(white);
+                background-color: color(secondary-hover);
+              }
+            }
+
+            &:focus,
+            &:active {
+              .mat-datetimepicker-calendar-body-cell-content {
+                color: color(white);
+                background-color: color(secondary-pressed);
+              }
+            }
+
+            &.mat-datetimepicker-calendar-body-active {
+              &:not(:hover) {
+                .mat-datetimepicker-calendar-body-cell-content {
+                  background-color: color(white);
+                  color: color(secondary-hover);
+                }
+              }
+
+              .mat-datetimepicker-calendar-body-cell-content {
+                border: solid 1.5px color(secondary-hover);
+              }
+            }
+          }
+
+          .mat-datetimepicker-calendar-body-cell-content {
+            font-weight: font-weight(regular);
+            font-size: 16px;
+            line-height: 21px;
+          }
+        }
+      }
+
+      mat-datetimepicker-clock {
+        margin: 0;
+
+        .mat-datetimepicker-clock {
+          background-color: color(light-30);
+
+          .mat-datetimepicker-clock-cell {
+            font-weight: font-weight(regular);
+            font-size: font-size(text-base);
+            line-height: 21px;
+            color: color(dark);
+
+            &.mat-datetimepicker-clock-cell-selected {
+              border: solid 1.5px color(select-hover);
+            }
+
+            &:hover {
+              color: color(white);
+              background-color: color(secondary-hover);
+            }
+
+            &:active {
+              color: color(white);
+              background-color: color(secondary-pressed);
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/assets/sass/ads-ui/overrides/angular-material/_dropdown.scss

@@ -1,31 +1,31 @@
-@use '../../abstracts/functions' as *;
-
-.mat-mdc-select-panel,
-.mat-mdc-autocomplete-panel {
-  --mat-autocomplete-background-color: #{color(white)};
-  --mat-select-panel-background-color: #{color(white)};
-  --mat-option-label-text-color: #{color(dark)};
-  &.ads-dropdown-panel {
-    padding: 0;
-
-    &.fit-content {
-      min-width: fit-content;
-    }
-
-    &:not(.clickable) mat-option {
-      cursor: default;
-    }
-  }
-}
-
-.mat-mdc-autocomplete-panel.loading {
-  display: none;
-}
-
-.no-results-hr {
-  margin: 0;
-}
-
-.empty-container {
-  height: 22px;
-}
+@use '../../abstracts/functions' as *;
+
+.mat-mdc-select-panel,
+.mat-mdc-autocomplete-panel {
+  --mat-autocomplete-background-color: #{color(white)};
+  --mat-select-panel-background-color: #{color(white)};
+  --mat-option-label-text-color: #{color(dark)};
+  &.ads-dropdown-panel {
+    padding: 0;
+
+    &.fit-content {
+      min-width: fit-content;
+    }
+
+    &:not(.clickable) mat-option {
+      cursor: default;
+    }
+  }
+}
+
+.mat-mdc-autocomplete-panel.loading {
+  display: none;
+}
+
+.no-results-hr {
+  margin: 0;
+}
+
+.empty-container {
+  height: 22px;
+}

package/src/assets/sass/ads-ui/overrides/angular-material/_html.scss

@@ -1,14 +1,14 @@
-@use '../../abstracts/functions' as *;
-
-html {
-  --mat-form-field-filled-container-color: #{color(white)} !important;
-  --mat-form-field-state-layer-color: #{color(white)} !important;
-  --mat-form-field-container-vertical-padding: 0 !important;
-  --mat-form-field-filled-with-label-container-padding-top: 0 !important;
-  --mat-form-field-filled-with-label-container-padding-bottom: 4px !important;
-  --mat-form-field-filled-error-hover-label-text-color: #{color(error)} !important;
-
-  --mat-form-field-container-height: 48px !important;
-  --mat-dialog-container-small-max-width: calc(100vw - 32px) !important;
-  --mat-badge-container-shape: 50% !important;
-}
+@use '../../abstracts/functions' as *;
+
+html {
+  --mat-form-field-filled-container-color: #{color(white)} !important;
+  --mat-form-field-state-layer-color: #{color(white)} !important;
+  --mat-form-field-container-vertical-padding: 0 !important;
+  --mat-form-field-filled-with-label-container-padding-top: 0 !important;
+  --mat-form-field-filled-with-label-container-padding-bottom: 4px !important;
+  --mat-form-field-filled-error-hover-label-text-color: #{color(error)} !important;
+
+  --mat-form-field-container-height: 48px !important;
+  --mat-dialog-container-small-max-width: calc(100vw - 32px) !important;
+  --mat-badge-container-shape: 50% !important;
+}

package/src/assets/sass/ads-ui/overrides/angular-material/_mat-list.scss

@@ -1,47 +1,47 @@
-@use '../../abstracts/functions' as *;
-
-mat-list.ads-mat-list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding: 0;
-
-  &.with-controls {
-    gap: 0;
-
-    &.single-control {
-      mat-list-item {
-        .mat-mdc-list-item-unscoped-content {
-          grid-template-columns: min-content minmax(260px, 450px);
-        }
-      }
-    }
-
-    mat-list-item {
-      .mat-mdc-list-item-unscoped-content {
-        align-items: flex-start;
-        grid-template-columns: min-content minmax(260px, 450px) minmax(200px, 400px);
-      }
-    }
-  }
-
-  mat-list-item {
-    --mat-list-list-item-one-line-container-height: auto;
-
-    min-height: 54px;
-
-    &:hover {
-      .mat-mdc-list-item-unscoped-content {
-        color: color(medium);
-      }
-    }
-
-    .mat-mdc-list-item-unscoped-content {
-      color: color(medium);
-      display: grid;
-      grid-template-columns: min-content 1fr;
-      white-space: normal;
-      grid-column-gap: 28px;
-    }
-  }
-}
+@use '../../abstracts/functions' as *;
+
+mat-list.ads-mat-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 0;
+
+  &.with-controls {
+    gap: 0;
+
+    &.single-control {
+      mat-list-item {
+        .mat-mdc-list-item-unscoped-content {
+          grid-template-columns: min-content minmax(260px, 450px);
+        }
+      }
+    }
+
+    mat-list-item {
+      .mat-mdc-list-item-unscoped-content {
+        align-items: flex-start;
+        grid-template-columns: min-content minmax(260px, 450px) minmax(200px, 400px);
+      }
+    }
+  }
+
+  mat-list-item {
+    --mat-list-list-item-one-line-container-height: auto;
+
+    min-height: 54px;
+
+    &:hover {
+      .mat-mdc-list-item-unscoped-content {
+        color: color(medium);
+      }
+    }
+
+    .mat-mdc-list-item-unscoped-content {
+      color: color(medium);
+      display: grid;
+      grid-template-columns: min-content 1fr;
+      white-space: normal;
+      grid-column-gap: 28px;
+    }
+  }
+}