@testgorilla/tgo-ui 2.5.2 → 2.5.3

package/src/theme/_input.scss

@@ -1,429 +0,0 @@
-@use "variables.scss" as *;
-
-.active-field {
-  .mdc-notched-outline__leading {
-    border-left-width: 2px;
-    border-top-width: 2px;
-    border-bottom-width: 2px;
-  }
-
-  .mdc-notched-outline__notch {
-    border-top-width: 2px;
-    border-bottom-width: 2px;
-  }
-
-  .mdc-notched-outline__trailing {
-    border-top-width: 2px;
-    border-bottom-width: 2px;
-    border-right-width: 2px;
-  }
-}
-
-*[theme="classic"] {
-  .mat-mdc-form-field {
-    .mat-mdc-form-field-hint.error,
-    .mat-mdc-form-field-hint.error svg {
-      color: $tgo-error-default;
-    }
-  }
-
-  .mat-mdc-form-field:not(.mat-warn) {
-    &.mat-form-field-appearance-outline {
-      .mat-mdc-text-field-wrapper {
-        height: 48px;
-
-        &:hover, &.mdc-text-field--focused {
-
-          .mat-mdc-form-field-flex .mat-mdc-floating-label:not(.mdc-floating-label--float-above) {
-            top: 21px !important;
-          }
-
-          @extend .active-field;
-
-          .mdc-notched-outline__leading, .mdc-notched-outline__notch, .mdc-notched-outline__trailing {
-            border-color: $tgo-petrol-default !important;
-          }
-
-          .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above {
-            color: $tgo-petrol-default !important;
-          }
-        }
-      }
-    }
-  }
-}
-
-*[theme="dark"], *[theme="light"], .dark, .light {
-
-  &.phone-number-select {
-    margin-top: 8px;
-    border-radius: 10px!important;
-    box-shadow: $box-shadow-hover-state;
-
-    .country-option {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-
-    .mat-mdc-option {
-      --mat-option-selected-state-layer-color: #{$grayscale-10};
-      --mat-option-selected-state-label-text-color: #{$black};
-
-      .mdc-list-item__primary-text small {
-        font-size: 14px;
-      }
-
-      .mat-pseudo-checkbox-minimal.mat-pseudo-checkbox-checked::after {
-        color: $black;
-        width: 12px;
-        height: 5px;
-      }
-      &:hover {
-        background-color: $brand-10;
-      }
-    }
-
-    .mat-divider {
-      display: none;
-    }
-  }
-
-  .mat-mdc-autocomplete-panel, &.mat-mdc-autocomplete-panel {
-    box-shadow: $box-shadow-hover-state;
-    border-radius: 10px;
-    .mat-mdc-option.selected-option,
-    .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled) {
-      &:hover {
-        background: var(--ui-autocomplete-option-color) !important;
-      }
-      background: $grayscale-10!important;
-    }
-    .mat-mdc-option:hover:not(.mdc-list-item--disabled)     {
-      background: var(--ui-autocomplete-option-color) !important;
-    }
-
-    .mat-mdc-option:active:not(.mdc-list-item--disabled)     {
-      background: var(--ui-autocomplete-option-color) !important;
-    }
-
-    .mat-mdc-option {
-      .mdc-list-item__primary-text, span {
-        color: $black!important;
-        font-weight: 400;
-      }
-    }
-
-    .mat-mdc-optgroup-label {
-      .mdc-list-item__primary-text {
-        font-size: 14px!important;
-      }
-    }
-
-    .mat-mdc-optgroup {
-      .mdc-list-item__primary-text {
-        color: $black!important;
-        text-transform: lowercase;
-      }
-
-      .mdc-list-item__primary-text:first-letter {
-        text-transform: uppercase!important;
-      }
-    }
-  }
-
-  .ui-dropdown-list, &.ui-dropdown-list {
-    .mat-mdc-option .mat-mdc-focus-indicator {
-      display: none;
-    }
-
-    .mat-mdc-option, .mat-option-section .section-title {
-      color: $black!important;
-    }
-
-    .mat-mdc-option-multiple .mat-pseudo-checkbox {
-      border-radius: 4px;
-      border-width: 1px;
-      border-color: $black;
-    }
-
-    .mat-mdc-option .mat-pseudo-checkbox-minimal {
-      transform: scale(0.9);
-    }
-
-    &.mat-warn mat-option,
-    &.mat-accent mat-option,
-    &.mat-accent .mat-mdc-option-multiple {
-      &:hover {
-        background: $brand-10!important;
-      }
-
-      &:active {
-        background: $brand-20!important;
-      }
-
-      &.mat-mdc-option-active,
-      &.mdc-list-item--selected {
-        background-color: $grayscale-10!important;
-
-        .mdc-list-item__primary-text, .mat-pseudo-checkbox-checked:after {
-          color: $black!important;
-        }
-
-        &:hover:not(.mdc-list-item--disabled),
-        &:focus:not(.mdc-list-item--disabled) {
-          background-color: $grayscale-10;
-        }
-      }
-    }
-
-    .mat-mdc-option-multiple.mdc-list-item--selected .mat-pseudo-checkbox-full {
-      background: $brand-50;
-      border-color: $brand-50;
-      &:after {
-        border-color: $tgo-white;
-      }
-    }
-  }
-
-  .mat-mdc-form-field, .autocomplete-wrapper .mat-mdc-form-field {
-    &.mat-form-field-appearance-outline,  &.mat-text-field-outlined {
-
-      .mat-mdc-form-field-hint.error,
-      .mat-mdc-form-field-hint.error svg {
-        color: $error-50;
-        row-gap: 0;
-      }
-
-      .mat-mdc-form-field-subscript-wrapper {
-        padding: 4px 0 0 0;
-        min-height: 24px;
-
-        &:after, &:before {
-          display: none;
-        }
-      }
-
-      input, .mat-text-field__input {
-        caret-color: $black !important;
-      }
-
-      &.mat-focused {
-        ui-icon:not(.clear) {
-          svg {
-            color: $black;
-          }
-        }
-      }
-
-      .mat-mdc-text-field-wrapper {
-        height: 48px;
-
-        &:hover {
-          ui-icon {
-            svg {
-              color: $black!important;
-            }
-          }
-        }
-
-        ui-icon {
-          svg {
-            color: $grayscale-40!important;
-          }
-        }
-
-        .value-tag {
-          ui-icon {
-            svg {
-              color: $black!important;
-            }
-          }
-
-          &:hover {
-            ui-icon {
-              svg {
-                color: $tgo-white!important;
-              }
-            }
-          }
-        }
-
-        .mdc-notched-outline__notch {
-          label {
-            color: $grayscale-40 !important;
-          }
-        }
-
-        &.mdc-text-field--disabled {
-          * {
-            border-color: $grayscale-30!important;
-            color: $grayscale-30!important;
-            pointer-events: none!important;
-          }
-
-          .mdc-notched-outline__notch {
-            label {
-              color: $grayscale-20 !important;
-            }
-          }
-        }
-
-        .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above {
-          color: $grayscale-40 !important;
-        }
-
-        .mdc-notched-outline__leading {
-          border-top-left-radius: 10px;
-          border-bottom-left-radius: 10px;
-        }
-
-        .mdc-notched-outline__trailing {
-          border-top-right-radius: 10px;
-          border-bottom-right-radius: 10px;
-        }
-
-        &:hover {
-          .mat-mdc-form-field-icon-prefix svg {
-            color: $black !important;
-          }
-
-          .password .icon-only-wrapper svg {
-            color: $black !important;
-          }
-
-          .mat-mdc-form-field-flex .mat-mdc-floating-label:not(.mdc-floating-label--float-above) {
-            top: 21px !important;
-          }
-        }
-
-        &:hover, &.mdc-text-field--focused {
-          .mat-mdc-form-field-icon-prefix svg {
-            color: $black !important;
-          }
-
-          @extend .active-field;
-
-          .mdc-notched-outline__leading, .mdc-notched-outline__notch, .mdc-notched-outline__trailing {
-            border-color: $black !important;
-          }
-
-          .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above {
-            color: $black !important;
-          }
-        }
-      }
-
-      &.mat-warn {
-        mat-label {
-          color: $error-50!important;
-        }
-
-        .mat-mdc-form-field-hint.error {
-          color: $error-50 !important;
-
-          a {
-            color: $error-50!important;
-          }
-
-
-          svg {
-            color: $error-50 !important;
-          }
-        }
-
-        .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above {
-          color: $error-50 !important;
-        }
-
-        .mat-mdc-text-field-wrapper {
-          .mdc-notched-outline__leading, .mdc-notched-outline__notch, .mdc-notched-outline__trailing {
-            border-color: $error-50 !important;
-          }
-
-          &:hover, &.mdc-text-field--focused {
-            .mat-mdc-form-field-icon-prefix svg {
-              color: $error-50 !important;
-            }
-
-            @extend .active-field;
-
-            .mdc-notched-outline__leading, .mdc-notched-outline__notch, .mdc-notched-outline__trailing {
-              border-color: $error-50 !important;
-            }
-
-            .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above {
-              color: $error-50 !important;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list {
-  border-radius: 10px !important;
-  box-shadow: $box-shadow-hover-state;
-
-  &.mat-accent mat-option,
-  &.mat-accent .mat-mdc-option-multiple {
-    &:hover:not(.mdc-list-item--disabled),
-    &:focus:not(.mdc-list-item--disabled) {
-      background-color: $tgo-medium;
-    }
-
-    &.mat-mdc-option-active,
-    &.mdc-list-item--selected {
-      background-color: $tgo-petrol-90w;
-      color: $tgo-black;
-      &:hover:not(.mdc-list-item--disabled),
-      &:focus:not(.mdc-list-item--disabled) {
-        background-color: $tgo-petrol-secondary;
-      }
-    }
-  }
-
-  &.mat-warn mat-option,
-  &.mat-warn .mat-mdc-option-multiple {
-    &:hover:not(.mdc-list-item--disabled),
-    &:focus:not(.mdc-list-item--disabled) {
-      background-color: $tgo-medium;
-    }
-
-    &.mat-mdc-option-active,
-    &.mdc-list-item--selected {
-      background-color: $tgo-error-secondary;
-      color: $tgo-black;
-      &:hover:not(.mdc-list-item--disabled),
-      &:focus:not(.mdc-list-item--disabled) {
-        background-color: $tgo-error-60w;
-      }
-    }
-  }
-}
-
-.mat-mdc-form-field {
-  .mat-mdc-form-field-hint-wrapper {
-    padding: 0;
-  }
-
-  .mat-mdc-form-field-hint:before {
-    height: 2px;
-  }
-
-  .mat-mdc-form-field-hint.error {
-    display: flex;
-    flex-flow: column;
-    row-gap: 4px;
-
-    .errors {
-      ui-icon {
-        margin-right: 4px;
-      }
-
-      align-items: center;
-      display: flex;
-    }
-  }
-}

package/src/theme/_lib-styles.scss

@@ -1,35 +0,0 @@
-@use "variables.scss" as *;
-@use "tooltip.scss" as *;
-@use "mat-paginator.scss" as *;
-@use "core.scss" as *;
-
-*[theme="dark"], *[theme="light"] {
-  * {
-    font-family: "ModernGothic", sans-serif !important;
-    font-weight: 400;
-  };
-}
-
-//custom scss for the angular material components
-.mat-mdc-card {
-  border-radius: 8px !important;
-  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1) !important;
-  padding: 32px 32px 16px 32px !important;
-  border-width: 0 !important;
-}
-
-/** Mat password strength */
-mat-password-strength-info {
-  .mat-mdc-card {
-    box-shadow: none !important;
-    place-content: stretch start !important;
-    padding: 15px 0 !important;
-
-    .mat-icon {
-      font-size: 20px;
-      position: relative;
-      top: 3px;
-      margin: 0px !important;
-    }
-  }
-}

package/src/theme/_mat-paginator.scss

@@ -1,59 +0,0 @@
-@use "./variables" as *;
-
-.mat-mdc-paginator {
-
-  .mdc-text-field--focused {
-    .mdc-notched-outline__leading, .mdc-notched-outline__trailing, .mdc-notched-outline__notch {
-      border-color: $tgo-petrol-default !important;
-    }
-  }
-
-  .mat-mdc-select {
-    &[aria-expanded="false"] {
-      .mat-mdc-select-arrow {
-        @extend .select-arrow;
-        background-image: url('/icons/Arrow_down.svg');
-      }
-
-      &[aria-disabled="true"] {
-        .mat-mdc-select-arrow {
-          opacity: 0.2 !important;
-        }
-      }
-    }
-
-    &[aria-expanded="true"] {
-      .mat-mdc-select-arrow {
-        @extend .select-arrow;
-        background-image: url('/icons/Arrow_up.svg');
-      }
-    }
-
-    svg {
-      display: none;
-    }
-  }
-}
-
-.mdc-menu-surface {
-  &[aria-labelledby*="mat-paginator"] {
-    mat-option {
-      &[aria-selected="true"] {
-        background: $tgo-petrol-90w!important;
-
-        .mdc-list-item__primary-text {
-          color: black!important;
-        }
-      }
-    }
-  }
-}
-
-.select-arrow {
-  left: -4px;
-  top: 0;
-  width: 22px;
-  height: 23px;
-  background-repeat: no-repeat;
-  background-size: cover;
-}

package/src/theme/_palette.scss

@@ -1,108 +0,0 @@
-@use "@angular/material" as mat;
-@include mat.core();
-//teal
-$tgo-teal-palette: (
-  50: #ECF6F5,
-  //secondary teal
-  100: #CBD6CB,
-  200: #B5DDD5,
-  300: #7EC3B6,
-  400: #55B9A6,
-  500: #46A997,
-  600: #347E70,
-  700: #31766A,
-  800: #2B685D,
-  900: #1C443C,
-  contrast: (
-    50: #000000,
-    100: #000000,
-    200: #000000,
-    300: #000000,
-    400: #ffffff,
-    500: #ffffff,
-    600: #ffffff,
-    700: #ffffff,
-    800: #ffffff,
-    900: #ffffff,
-  ),
-);
-
-//petrol
-$tgo-petrol-palette: (
-  50: #E9F0F1,
-  //secondary petrol
-  100: #C8D7DE,
-  200: #A9C2C9,
-  300: #6894A0,
-  400: #368DA6,
-  500: #276678,
-  600: #1F5261,
-  700: #1B4754,
-  800: #183F4A,
-  900: #102930,
-  contrast: (
-    50: #000000,
-    100: #000000,
-    200: #000000,
-    300: #000000,
-    400: #000000,
-    500: #ffffff,
-    600: #ffffff,
-    700: #ffffff,
-  ),
-);
-
-$tgo-error-palette: (
-  50: #ffffff,
-  //secondary error
-  100: #F0DAD9,
-  200: #E3C3C6,
-  300: #DCA7A6,
-  400: #D49190,
-  500: #cb7b7a,
-  600: #C26564,
-  700: #BA4F4E,
-  800: #8E5655,
-  900: #513131,
-  contrast: (
-    50: #000000,
-    100: #000000,
-    200: #000000,
-    300: #000000,
-    400: #000000,
-    500: #ffffff,
-    600: #ffffff,
-    700: #ffffff,
-    800: #ffffff,
-    900: #ffffff,
-  ),
-);
-
-//teal
-$tgo-teal: mat.define-palette($tgo-teal-palette, 500);
-$tgo-light-palette: mat.define-palette($tgo-teal-palette, 50);
-//petrol
-$tgo-petrol: mat.define-palette($tgo-petrol-palette, 500);
-//error
-$tgo-error: mat.define-palette($tgo-error-palette, 500);
-//typography
-$tgo-typography: mat.define-typography-config(
-  $font-family: "'Open Sans', sans-serif",
-  $body-1: mat.define-typography-level($font-size: 14px, $letter-spacing: normal),
-  $body-2: mat.define-typography-level($font-size: 14px, $letter-spacing: normal),
-  $button: mat.define-typography-level($font-size: 14px, $letter-spacing: normal),
-);
-
-$my-theme: mat.define-light-theme(
-  (
-    color: (
-      primary: $tgo-teal,
-      accent: $tgo-petrol,
-      light: $tgo-light-palette,
-      warn: $tgo-error,
-    ),
-    typography: $tgo-typography,
-  )
-);
-@include mat.typography-hierarchy($tgo-typography);
-@include mat.all-component-themes($my-theme);