npm - @testgorilla/tgo-ui - Versions diffs - 2.11.1 → 2.11.2 - Mend

@testgorilla/tgo-ui 2.11.1 → 2.11.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1003) hide show

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

@@ -1,1012 +0,0 @@
-@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;
-    }
-  }
-}