@testgorilla/tgo-ui 2.9.0 → 2.10.1

package/projects/tgo-canopy-ui/components/button/button.component.scss

@@ -0,0 +1,1012 @@
+@use "../../theme/variables" as *;
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap");
+
+::ng-deep .mat-mdc-button-persistent-ripple::before {
+  opacity: 0 !important;
+}
+
+:host {
+  position: relative;
+  .tooltip {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: auto;
+  }
+}
+
+
+
+.rounded-icon {
+  button {
+    min-width: unset;
+  }
+
+  .mdc-button {
+    width: 48px !important;
+    min-width: unset;
+
+    .icon {
+      margin: 0 !important;
+    }
+  }
+
+  .big,
+  .small {
+    padding: 0 !important;
+  }
+}
+
+:host {
+  display: flex;
+
+  .button-container {
+    width: 100%;
+
+    &.disabled {
+      pointer-events: none;
+    }
+
+    &.button-scale {
+      &:active {
+        transform: scale(0.98);
+      }
+    }
+  }
+
+  .button-wrapper.full-width {
+    width: 100%;
+  }
+}
+
+button.mat-mdc-unelevated-button,
+a.mat-mdc-unelevated-button {
+  font-size: 14px;
+  font-weight: 600;
+  line-height: normal;
+  letter-spacing: normal;
+
+  .spinner-wrapper {
+    display: flex;
+    align-items: center;
+    flex-flow: column;
+    width: 100%;
+  }
+
+  .icon {
+    display: flex;
+    height: 100%;
+    align-items: center;
+
+    &.only {
+      align-items: center;
+      flex-flow: column;
+      justify-content: center;
+      margin-left: 0;
+    }
+  }
+
+  .icon-label-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+
+    &.center-text {
+      flex-flow: column;
+      width: 100%;
+    }
+
+    .label {
+      display: flex;
+      height: 100%;
+      align-items: center;
+    }
+  }
+
+  //Size
+  &.big {
+    height: 48px;
+    padding: 12px 24px;
+  }
+
+  &.small {
+    height: 38px;
+    padding: 7px 11px;
+  }
+
+  &.classic-theme {
+    &.big {
+      height: 48px;
+      padding: 12px 16px;
+    }
+  }
+
+  &.small,
+  &.big {
+    &.left .icon {
+      margin-right: 8px;
+    }
+
+    &.right .icon {
+      margin-left: 8px;
+    }
+
+    &.only-icon .icon {
+      margin-left: 0;
+    }
+  }
+
+  //Type
+  &.primary,
+  &.secondary,
+  &.ghost,
+  &.outlined,
+  &.destructive,
+  &.tertiary,
+  &.link {
+    min-width: 80px;
+
+    &.only-icon {
+      min-width: 1px;
+    }
+
+    &.full-width {
+      width: 100%;
+      min-width: 100%;
+
+      .icon-label-wrapper {
+        justify-content: center;
+      }
+    }
+  }
+
+  &.primary,
+  &.secondary,
+  &.ghost,
+  &.outlined,
+  &.destructive,
+  &.tertiary,
+  &.tab,
+  &.squareicon,
+  &.menuTrigger.classic-theme {
+    &:focus {
+      &.cdk-focused {
+        outline: 1px dashed $tgo-dark;
+        outline-offset: 4px;
+      }
+    }
+  }
+
+  &.menuCell {
+    &:focus {
+      &.cdk-focused {
+        outline: 1px dashed $tgo-dark;
+        outline-offset: -1px;
+      }
+    }
+  }
+
+  &.primary {
+    background-color: var(--color);
+    color: $tgo-white;
+    border-radius: 1000px;
+
+    &-disabled {
+      opacity: 0.75;
+    }
+
+    &.classic-theme {
+      border-radius: 4px;
+
+      &:disabled,
+      &:disabled:hover {
+        background-color: $tgo-teal-60w;
+      }
+    }
+
+    &.light-theme {
+      &:disabled,
+      &:disabled:hover {
+        background-color: $grayscale-10;
+        color: $grayscale-50;
+
+        ::ng-deep mat-icon.black svg {
+          color: $grayscale-50;
+        }
+      }
+    }
+
+    &.dark-theme {
+      &:disabled,
+      &:disabled:hover {
+        background-color: $grayscale-50;
+        color: $grayscale-30;
+
+        ::ng-deep mat-icon.black svg {
+          color: $grayscale-30;
+        }
+      }
+    }
+
+
+    ::ng-deep mat-icon.black svg {
+      color: $tgo-white;
+    }
+
+    .mat-mdc-progress-spinner {
+      ::ng-deep circle {
+        stroke: $tgo-white;
+      }
+    }
+  }
+
+  &.secondary {
+    border-radius: 1000px;
+
+    &.light-theme {
+      background-color: $black;
+      color: $tgo-white;
+
+      ::ng-deep mat-icon.black svg {
+        color: $tgo-white;
+      }
+
+      &:disabled,
+      &:disabled:hover {
+        opacity: 0.75;
+        background-color: $grayscale-10;
+        color: $grayscale-50;
+
+        ::ng-deep mat-icon.black svg {
+          color: $grayscale-30 !important;
+        }
+      }
+    }
+
+    &.dark-theme {
+      background-color: $tgo-white;
+      color: $black;
+
+      ::ng-deep mat-icon.black svg {
+        color: $black;
+      }
+
+      &:disabled,
+      &:disabled:hover {
+        opacity: 0.75;
+        background-color: $grayscale-50;
+        color: $grayscale-30;
+
+        ::ng-deep mat-icon.black svg {
+          color: $grayscale-30;
+        }
+      }
+    }
+
+    &:hover {
+      background-color: $grayscale-50;
+      color: $tgo-white;
+
+      ::ng-deep mat-icon.black svg {
+        color: $tgo-white;
+      }
+    }
+
+    .mat-mdc-progress-spinner {
+      ::ng-deep circle {
+        stroke: $tgo-white;
+      }
+    }
+
+    &.classic-theme {
+      border-radius: 4px;
+      background-color: $tgo-grey;
+      color: $tgo-black;
+
+      &:hover {
+        background-color: $tgo-medium;
+      }
+
+      &:disabled,
+      &:disabled:hover {
+        background-color: $tgo-grey;
+        color: $tgo-dark;
+
+        ::ng-deep mat-icon.black svg {
+          color: $tgo-dark;
+        }
+      }
+
+      .mat-mdc-progress-spinner {
+        ::ng-deep circle {
+          stroke: $tgo-black;
+        }
+      }
+    }
+  }
+
+  &.outlined {
+    background-color: $tgo-white;
+    color: $tgo-black;
+    border-width: 1px;
+    border-style: solid;
+    border-color: $tgo-black;
+
+    &:hover {
+      background-color: $tgo-light;
+    }
+
+    &:disabled,
+    &:disabled:hover {
+      color: $tgo-grey;
+      border-color: $tgo-grey;
+
+      ::ng-deep mat-icon.black svg {
+        color: $tgo-dark;
+      }
+    }
+
+    &:focus {
+      &.cdk-focused {
+        background-color: $tgo-medium;
+      }
+    }
+
+    .mat-mdc-progress-spinner {
+      ::ng-deep circle {
+        stroke: $tgo-black;
+      }
+    }
+  }
+
+
+  &.ghost {
+    border-width: 1px;
+    border-style: solid;
+    border-radius: 1000px;
+
+    &.light-theme {
+      background-color: transparent;
+      color: $black;
+      border-color: $black;
+
+      &.only-icon {
+        width: 48px;
+        height: 48px;
+        padding: 0;
+      }
+
+      ::ng-deep mat-icon.black svg {
+        color: $black;
+      }
+
+      &:hover {
+        background-color: $grayscale-10;
+      }
+    }
+
+    &.dark-theme {
+      background-color: transparent;
+      color: $tgo-white;
+      border-color: $tgo-white;
+
+      &.only-icon {
+        width: 48px;
+        height: 48px;
+        padding: 0;
+      }
+
+      ::ng-deep mat-icon.black svg {
+        color: $tgo-white;
+      }
+
+      &:hover {
+        background-color: $grayscale-50;
+      }
+    }
+
+    &:disabled,
+    &:disabled:hover {
+      opacity: 0.5;
+      background-color: transparent;
+    }
+
+    .mat-mdc-progress-spinner {
+      ::ng-deep circle {
+        stroke: $black;
+      }
+    }
+  }
+
+  &.destructive {
+    border: 1px solid $error-50;
+    background-color: $tgo-white;
+    color: $error-50;
+    border-radius: 1000px;
+
+    &:hover {
+      background-color: $error-50;
+      color: $tgo-white;
+
+      ::ng-deep mat-icon.black svg {
+        color: $tgo-white;
+      }
+    }
+
+    &:disabled,
+    &:disabled:hover {
+      border-color: $error-30;
+      color: $error-30;
+    }
+
+    ::ng-deep mat-icon.black svg {
+      color: $error-50;
+    }
+
+    .mat-mdc-progress-spinner {
+      ::ng-deep circle {
+        stroke: $black;
+      }
+    }
+
+    &.classic-theme {
+      border: unset;
+      border-radius: 4px;
+      background-color: $tgo-error-default;
+      color: $tgo-white;
+
+      &:hover {
+        background-color: $tgo-error-30b;
+      }
+
+      &:disabled,
+      &:disabled:hover {
+        background-color: $tgo-error-60w;
+      }
+
+      ::ng-deep mat-icon.black svg {
+        color: $tgo-white;
+      }
+
+      .mat-mdc-progress-spinner {
+        ::ng-deep circle {
+          stroke: $tgo-black;
+        }
+      }
+    }
+  }
+
+  &.tertiary {
+    background-color: transparent;
+    color: $tgo-teal-default;
+
+    &:hover {
+      background-color: $tgo-light;
+      color: $tgo-teal-30b;
+    }
+
+    &:disabled,
+    &:disabled:hover {
+      opacity: 0.75;
+      background-color: $tgo-white;
+      color: $tgo-teal-60w;
+
+      ::ng-deep mat-icon.black svg {
+        color: $tgo-teal-60w;
+      }
+    }
+
+    ::ng-deep mat-icon.black svg {
+      color: var(--color);
+    }
+
+    .mat-mdc-progress-spinner {
+      ::ng-deep circle {
+        stroke: $tgo-black;
+      }
+    }
+  }
+
+  &.link {
+    background-color: transparent;
+    color: $brand-50;
+    border-radius: 0;
+
+    ::ng-deep.mat-mdc-button-persistent-ripple {
+      display: none;
+    }
+
+    span.icon-label-wrapper {
+      text-decoration: underline;
+    }
+
+    &:hover {
+      color: $brand-60 !important;
+    }
+
+    &:active {
+      color: $brand-40 !important;
+    }
+
+    ::ng-deep .mdc-button__label {
+      padding: 4px;
+    }
+
+    &:focus {
+      ::ng-deep .mdc-button__label {
+        padding: 4px;
+        outline: 1px dashed $grayscale-50;
+      }
+    }
+
+    &:disabled,
+    &:disabled:hover {
+      color: $grayscale-30;
+    }
+
+    ::ng-deep mat-icon.black svg {
+      color: var(--color);
+    }
+
+    &.classic-theme {
+      background-color: transparent;
+      color: $tgo-teal-default;
+      border-radius: 0;
+
+      span.icon-label-wrapper {
+        text-decoration: underline;
+      }
+
+      &:hover {
+        color: $tgo-teal-30b;
+      }
+
+      &:disabled,
+      &:disabled:hover {
+        color: $tgo-teal-60w;
+      }
+
+      ::ng-deep mat-icon.black svg {
+        color: var(--color);
+      }
+    }
+  }
+
+  &.text {
+    background-color: transparent;
+    border-radius: 0;
+    text-decoration: underline;
+
+    &.light-theme {
+      color: $black;
+
+      &:active {
+        color: $grayscale-50 !important;
+      }
+
+      &:hover {
+        color: $grayscale-50;
+      }
+    }
+
+    &.dark-theme {
+      color: $tgo-white;
+
+      &:active {
+        color: $grayscale-50 !important;
+      }
+
+      &:hover {
+        color: $grayscale-10;
+      }
+    }
+
+    ::ng-deep.mat-mdc-button-persistent-ripple {
+      display: none;
+    }
+
+    span.icon-label-wrapper {
+      text-decoration: underline;
+    }
+
+    &:disabled,
+    &:disabled:hover {
+      color: $grayscale-30;
+
+      ::ng-deep mat-icon.black svg {
+        color: $grayscale-30;
+      }
+    }
+
+    ::ng-deep .mdc-button__label {
+      padding: 4px;
+    }
+
+    &:focus {
+      ::ng-deep .mdc-button__label {
+        padding: 4px;
+        outline: 1px dashed $grayscale-50;
+      }
+    }
+
+    .mat-mdc-progress-spinner {
+      ::ng-deep circle {
+        stroke: $black;
+      }
+    }
+
+    &.classic-theme {
+      background-color: transparent;
+      color: $tgo-black;
+      border-radius: 0;
+      text-decoration: underline;
+
+      span.icon-label-wrapper {
+        text-decoration: underline;
+      }
+
+      &:hover {
+        color: $tgo-black;
+      }
+
+      &:disabled,
+      &:disabled:hover {
+        color: $tgo-dark;
+
+        ::ng-deep mat-icon.black svg {
+          color: $tgo-dark;
+        }
+      }
+
+      &:focus {
+
+        &.cdk-focused {
+          color: $tgo-black;
+        }
+      }
+
+      .mat-mdc-progress-spinner {
+        ::ng-deep circle {
+          stroke: $tgo-black;
+        }
+      }
+    }
+  }
+
+  &.squareicon {
+    background-color: $tgo-grey;
+    color: $tgo-black;
+    min-width: 56px;
+
+    &:hover {
+      background-color: $tgo-medium;
+    }
+
+    &:disabled,
+    &:disabled:hover {
+      background-color: $tgo-grey;
+      color: $tgo-dark;
+    }
+
+    &:focus {
+      &.cdk-focused.cdk-mouse-focused {
+        background-color: $tgo-grey;
+      }
+    }
+
+    .mat-mdc-progress-spinner {
+      ::ng-deep circle {
+        stroke: $tgo-black;
+      }
+    }
+
+    .icon-label-wrapper {
+      flex-flow: column;
+    }
+
+    &.left .icon,
+    &.right .icon {
+      margin: 0 auto;
+    }
+  }
+
+  &.tab {
+    background-color: $tgo-white;
+    color: $tgo-black;
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    border-bottom-color: $tgo-medium;
+    border-radius: 0;
+
+    &:hover {
+      .label,
+      .icon.only {
+        text-decoration: underline;
+      }
+    }
+
+    &:disabled,
+    &:disabled:hover {
+      color: $tgo-dark;
+
+      .label {
+        text-decoration: none;
+      }
+
+      ::ng-deep mat-icon.black svg {
+        color: $tgo-dark;
+      }
+    }
+
+    &:focus {
+
+      &.cdk-focused.cdk-mouse-focused {
+        font-weight: 700;
+        border-color: $tgo-petrol-default;
+      }
+    }
+  }
+
+  &.menuTrigger.classic-theme {
+    background: transparent;
+    min-width: 24px;
+    height: 24px;
+    padding: 0;
+
+    &:hover {
+      background-color: $tgo-medium;
+    }
+
+    &:disabled,
+    &:disabled:hover {
+      background-color: $tgo-white;
+      color: $tgo-dark;
+    }
+
+    &:focus {
+      &.cdk-focused.cdk-mouse-focused {
+        background-color: transparent;
+      }
+    }
+
+    .icon-label-wrapper {
+      flex-flow: column;
+    }
+
+    &.left .icon,
+    &.right .icon {
+      margin: 0 auto;
+    }
+  }
+
+  &.menuCell {
+    background-color: $tgo-white;
+    color: $tgo-black;
+    font-weight: 400;
+    border-radius: 0;
+    min-width: 100%;
+    justify-content: flex-start;
+
+    &.classic-theme {
+      &.big.left .icon {
+        margin-right: 16px;
+      }
+    }
+
+    &.big.left .icon {
+      margin-right: 8px;
+    }
+
+    .icon-label-wrapper {
+      justify-content: flex-start;
+    }
+
+    &:hover {
+      background-color: $tgo-medium;
+    }
+
+    &:disabled,
+    &:disabled:hover {
+      background-color: $tgo-white;
+      color: $tgo-dark;
+
+      ::ng-deep mat-icon.black svg {
+        color: $tgo-dark;
+      }
+    }
+
+    .mat-mdc-progress-spinner {
+      ::ng-deep circle {
+        stroke: $tgo-black;
+      }
+    }
+  }
+}
+
+.button-wrapper {
+  position: relative;
+  height: fit-content;
+
+  &[aria-disabled="true"] {
+    pointer-events: none;
+  }
+
+  .menuTrigger:not(.classic-theme), .icon-button {
+    ::ng-deep &.mat-mdc-unelevated-button:not(:disabled) {
+      background-color: unset;
+    }
+
+    ::ng-deep &.mdc-button {
+      min-width: var(--icon-button-size) !important;
+    }
+
+    ::ng-deep .mat-mdc-button-touch-target {
+      height: var(--icon-button-size) !important;
+    }
+
+    border: none;
+    border-radius: 100%;
+    width: var(--icon-button-size) !important;
+    height: var(--icon-button-size) !important;
+    cursor: pointer;
+    background-color: unset;
+
+    &:disabled {
+      pointer-events: none;
+      background: unset;
+
+      &.classic-theme {
+        ::ng-deep mat-icon svg {
+          color: $tgo-dark;
+        }
+      }
+    }
+
+    &:hover {
+      background-color: $tgo-light;
+    }
+
+    &:focus {
+      &.cdk-focused {
+        padding: 1px;
+        border: 1px dashed $tgo-dark;
+        outline: 0;
+      }
+    }
+
+    &:not(.has-company-color) {
+      &.light-theme, &.dark-theme {
+        &:disabled,
+        &:disabled:hover ::ng-deep mat-icon svg {
+          color: $grayscale-40 !important;
+        }
+      }
+
+      &.light-theme {
+        color: $black !important;
+
+        &:hover {
+          background-color: $grayscale-20;
+        }
+
+        &:focus {
+          &.cdk-focused {
+            border-color: $grayscale-50;
+          }
+        }
+      }
+
+      &.dark-theme {
+        color: $tgo-white !important;
+
+        &:hover {
+          background-color: $grayscale-50;
+        }
+
+        &:focus {
+          &.cdk-focused {
+            border-color: $grayscale-20;
+          }
+        }
+      }
+    }
+  }
+
+  .menuTrigger {
+    &:focus {
+      &.cdk-focused.cdk-mouse-focused {
+        &.light-theme {
+          border: none;
+          background-color: $grayscale-20;
+          color: $black;
+        }
+
+        &.dark-theme {
+          border: none;
+          background-color: $grayscale-50;
+          color: $tgo-white;
+        }
+      }
+    }
+  }
+
+  .right-top {
+    position: absolute;
+    right: -8px;
+    top: -8px;
+    z-index: 1;
+  }
+}
+
+::ng-deep .mat-mdc-tooltip {
+  background-color: $tgo-petrol-60w;
+  font-family: "Open Sans", serif;
+  font-weight: normal;
+  font-size: 12px;
+  border-radius: 4px;
+  overflow: visible;
+  max-width: 248px;
+  padding: 6px 2px;
+  --mdc-plain-tooltip-container-color: none;
+  --mdc-plain-tooltip-supporting-text-color: $tgo-black;
+}
+
+:host {
+  &[btn-variant="link"] {
+    display: inline-flex;
+  }
+}
+
+::ng-deep .link {
+  .button-container {
+    display: flex;
+  }
+  a.mat-mdc-unelevated-button.link {
+    height: unset !important;
+    min-width: unset !important;
+    border-radius: 10px;
+
+    &:focus {
+      outline: 1px dashed $grayscale-50 !important;
+      .mdc-button__label {
+        padding: 0 !important;
+        outline: none !important;
+      }
+    }
+  }
+
+  a.mat-mdc-unelevated-button {
+    .mdc-button__label {
+      padding: 0 !important;
+    }
+
+    &.big,
+    &.small {
+      padding: 0 !important;
+      .mdc-button__label {
+        padding: 0 !important;
+      }
+    }
+    &.big {
+      .mdc-button__label .icon-label-wrapper {
+        font-size: 16px !important;
+        line-height: 24px !important;
+      }
+    }
+
+    &.small {
+      .mdc-button__label .icon-label-wrapper {
+        font-size: 12px !important;
+        line-height: 16px !important;
+      }
+    }
+    padding: 0 !important;
+
+    .mat-mdc-button-touch-target {
+      height: unset !important;
+    }
+  }
+}