@kaizen/components 1.4.20 → 1.4.22-canary.0

package/dist/iife/TitleBlockZen.module-OK3QIC4Y.scss

@@ -1,695 +0,0 @@
-@import "~@kaizen/design-tokens/sass/spacing";
-@import "~@kaizen/design-tokens/sass/typography";
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/layout";
-@import "~@kaizen/component-library/styles/grid";
-@import "~@kaizen/component-library/styles/layers";
-@import "~@kaizen/deprecated-component-library-helpers/styles/layout";
-@import "./mixins";
-@import "./variables";
-
-$title-block-margin-width-on-medium-and-small: 12px;
-$breadcrumb-circle-width: 48px;
-$breadcrumb-breakpoint-width: $layout-content-max-width +
-  $layout-content-side-margin * 2 + $breadcrumb-circle-width * 2.25;
-$title-block-separator-height: 0.1875rem;
-$tab-container-height-default: $ca-grid * 3;
-$tab-container-height-small: $ca-grid * 2.5;
-$tab-container-height-default-collapsed: 0;
-$tab-container-height-medium-and-small-collapsed: 0;
-
-.titleBlock {
-  position: relative;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  background-color: $dt-color-background-color-default;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-
-  &.educationVariant {
-    background-color: $dt-color-background-color-eduction;
-  }
-
-  &.adminVariant {
-    background-color: $dt-color-background-color-admin;
-  }
-
-  @media print {
-    display: none;
-  }
-}
-
-.titleRow,
-.rowBelowSeparator {
-  display: flex;
-  width: 100%;
-  justify-content: center;
-}
-
-.adminVariant .titleRow {
-  background-color: $color-white;
-}
-
-%titleBlockInner {
-  max-width: $layout-content-max-width;
-  margin: 0 $layout-content-side-margin;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  min-width: 0; // this is an important trick to prevent flexbox items from overflowing
-
-  @include title-block-medium-and-small {
-    margin: 0 $title-block-margin-width-on-medium-and-small;
-  }
-}
-
-.titleRowInner {
-  @extend %titleBlockInner;
-}
-
-.rowBelowSeparatorInner {
-  @extend %titleBlockInner;
-}
-
-.titleRowInnerContent {
-  position: relative;
-  display: flex;
-  width: 100%;
-  align-items: center;
-  min-height: $ca-grid * 3.5;
-  justify-content: space-between;
-  border-bottom: $title-block-separator-height solid rgba($color-white-rgb, 0.1);
-
-  .educationVariant & {
-    border-bottom-color: rgba($color-purple-700-rgb, 0.2);
-  }
-
-  .adminVariant &,
-  .collapseNavigationArea & {
-    border-bottom-color: transparent;
-  }
-
-  @include title-block-medium-and-small {
-    border-bottom: none;
-  }
-}
-
-.title {
-  display: flex;
-  align-items: center;
-  min-width: 0; // this is an important trick to prevent flexbox items from overflowing
-
-  // Applying width 100% when the title is *not* long and is followed by a subtitle
-  // causes misalignment of both.
-  @include title-block-under-1366 {
-    width: 100%;
-  }
-}
-
-.titleAndSubtitle {
-  display: flex;
-  align-items: center;
-  min-width: 0; // this is an important trick to prevent flexbox items from overflowing
-  z-index: $ca-z-index-dropdown; // this ensures the page switcher dropdown sits over nav tabs
-
-  .hasSubtitle & {
-    @include title-block-under-1366 {
-      transform: translateY(-0.38333em);
-    }
-  }
-  transform: translateY(-0.0833333em);
-}
-
-.titleAndSubtitleInner {
-  display: flex;
-  min-width: 0; // this is an important trick to prevent flexbox items from overflowing
-
-  // TODO: removing .hasLongTitle here fixes the alignment on Performance story, but we should be able to not wrap subtitle.
-  .hasSubtitle.hasLongTitle.hasLongSubtitle & {
-    align-items: center;
-
-    @include title-block-under-1366 {
-      align-items: baseline;
-    }
-  }
-
-  .hasPageSwitcherSelect & {
-    @include title-block-medium-and-small {
-      align-items: normal;
-      flex-direction: column;
-      justify-content: space-between;
-      transform: translateY(calc(#{$ca-grid} / 3));
-    }
-  }
-
-  .hasSubtitle & {
-    align-items: baseline;
-    overflow: hidden;
-
-    @include title-block-under-1366 {
-      align-items: normal;
-      flex-direction: column;
-      justify-content: space-between;
-      transform: translateY(calc(#{$ca-grid} / 3));
-
-      .hasLongTitle.hasLongSubtitle & {
-        align-items: baseline;
-      }
-    }
-
-    @include title-block-medium-and-small {
-      transform: translateY(calc(#{$ca-grid} / 2));
-    }
-  }
-}
-
-.titleTextOverride.titleTextOverride {
-  padding: 4px 0;
-
-  @media (max-width: $breadcrumb-breakpoint-width) {
-    font-family: $typography-heading-2-font-family;
-    font-weight: $typography-heading-2-font-weight;
-    font-size: $typography-heading-2-font-size;
-    line-height: $typography-heading-2-line-height;
-    letter-spacing: $typography-heading-2-letter-spacing;
-  }
-  @include title-block-under-1366 {
-    font-family: $typography-heading-2-font-family;
-    font-weight: $typography-heading-2-font-weight;
-    font-size: $typography-heading-2-font-size;
-    line-height: $typography-heading-2-line-height;
-    letter-spacing: $typography-heading-2-letter-spacing;
-    padding: 2px 0;
-  }
-  .hasLongTitle & {
-    @include title-block-under-1366 {
-      font-family: $typography-heading-3-font-family;
-      font-weight: $typography-heading-3-font-weight;
-      font-size: $typography-heading-3-font-size;
-      line-height: $typography-heading-3-line-height;
-      letter-spacing: $typography-heading-3-letter-spacing;
-      padding: 2px 0;
-    }
-  }
-
-  @include title-block-medium-and-small {
-    font-family: $typography-heading-4-font-family;
-    font-weight: $typography-heading-4-font-weight;
-    font-size: $typography-heading-4-font-size;
-    line-height: $typography-heading-4-line-height;
-    letter-spacing: $typography-heading-4-letter-spacing;
-    padding: 0;
-  }
-}
-
-.avatar {
-  display: none;
-  box-sizing: border-box;
-  overflow: hidden;
-  height: $ca-grid * 2;
-  width: $ca-grid * 2;
-  @include ca-margin($end: calc(#{$ca-grid} / 2));
-
-  > * {
-    max-width: 100%;
-  }
-
-  @media (min-width: $layout-breakpoints-large) {
-    display: block;
-  }
-
-  &.withBorder {
-    border: 3px solid $color-white;
-    border-radius: 50%;
-  }
-
-  .hasLongTitle & {
-    display: none;
-  }
-}
-
-.hamburger {
-  display: none;
-  @include ca-margin($end: $spacing-xs);
-
-  @include title-block-medium-and-small {
-    display: flex;
-    align-items: center;
-  }
-}
-
-.subtitle {
-  display: flex;
-  align-items: center;
-  color: $color-white;
-  font-family: $typography-paragraph-small-font-family;
-  font-weight: $typography-paragraph-small-font-weight;
-  font-size: $typography-paragraph-small-font-size;
-  line-height: $typography-paragraph-small-line-height;
-  letter-spacing: $typography-paragraph-small-letter-spacing;
-  max-width: 230px;
-
-  .adminVariant & {
-    color: $color-purple-800;
-  }
-
-  @include ca-margin($start: calc(#{$ca-grid} / 2));
-
-  @include title-block-under-1366 {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    max-width: none;
-    margin: ($ca-grid / 5) 0;
-  }
-}
-
-.subtitleText {
-  @include title-block-under-1366 {
-    max-width: 42vw;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-  }
-
-  @include title-block-small {
-    max-width: 88vw;
-  }
-}
-
-.sectionTitleContainer {
-  display: flex;
-  align-items: center;
-  padding: ($ca-grid * 3/4) 0;
-}
-
-.sectionTitleInner {
-  display: flex;
-  flex-direction: column;
-}
-
-.sectionTitleOverride.sectionTitleOverride {
-  white-space: nowrap;
-
-  @include ca-margin($end: $ca-grid);
-
-  font-family: $typography-heading-2-font-family;
-  font-weight: $typography-heading-2-font-weight;
-  font-size: $typography-heading-2-font-size;
-  line-height: $typography-heading-2-line-height;
-  letter-spacing: $typography-heading-2-letter-spacing;
-
-  @include title-block-under-1645 {
-    font-family: $typography-heading-3-font-family;
-    font-weight: $typography-heading-3-font-weight;
-    font-size: $typography-heading-3-font-size;
-    line-height: $typography-heading-3-line-height;
-    letter-spacing: $typography-heading-3-letter-spacing;
-  }
-  @include title-block-medium-and-small {
-    font-family: $typography-heading-4-font-family;
-    font-weight: $typography-heading-4-font-weight;
-    font-size: $typography-heading-4-font-size;
-    line-height: $typography-heading-4-line-height;
-    letter-spacing: $typography-heading-4-letter-spacing;
-  }
-}
-
-.sectionTitle {
-  display: block;
-}
-
-.sectionTitleDescription {
-  .sectionTitle + & {
-    margin-top: $ca-grid / 4;
-  }
-
-  color: $color-white;
-  max-width: 780px;
-  font-family: $typography-paragraph-small-font-family;
-  font-weight: $typography-paragraph-small-font-weight;
-  font-size: $typography-paragraph-small-font-size;
-  line-height: $typography-paragraph-small-line-height;
-  letter-spacing: $typography-paragraph-small-letter-spacing;
-
-  &.dark {
-    color: rgba($color-purple-800-rgb, 0.7);
-  }
-}
-
-.rowBelowSeparatorInnerContent {
-  display: flex;
-  width: 100%;
-  margin-top: -$title-block-separator-height;
-  justify-content: space-between;
-}
-
-.titleAndAdjacent {
-  display: flex;
-  min-width: 0; // this is an important trick to prevent flexbox items from overflowing
-}
-
-.titleAndAdjacentNotBreadcrumb {
-  display: flex;
-  transition: opacity 0.3s ease;
-  min-width: 0; // this is an important trick to prevent flexbox items from overflowing
-  align-items: center;
-
-  .breadcrumb:hover ~ &,
-  .breadcrumb:focus ~ &,
-  .breadcrumbTextLink:hover ~ &,
-  .breadcrumbTextLink:focus ~ & {
-    opacity: 0;
-  }
-}
-
-.tag {
-  @include ca-margin($start: calc(#{$ca-grid} / 2));
-  display: flex;
-  align-items: center;
-
-  @include title-block-medium-and-small {
-    display: none;
-  }
-
-  + .pageSwitcherSelectNextToTitle {
-    @include ca-margin($start: 0);
-  }
-}
-
-.pageSwitcherSelectNextToTitle {
-  @include ca-margin($start: calc(#{$ca-grid} / 2));
-  flex-shrink: 0;
-  width: 10 * $ca-grid;
-}
-
-.pageSwitcherSelectUnderneathTitle {
-  flex-shrink: 0;
-  max-width: 10 * $ca-grid;
-}
-
-.navigationTabsContainer {
-  display: flex;
-  height: $tab-container-height-default;
-
-  @include title-block-small {
-    height: $tab-container-height-small;
-  }
-}
-
-.navigationTabsContainerCollapsed {
-  height: $tab-container-height-default-collapsed;
-  @include title-block-medium-and-small {
-    height: $tab-container-height-medium-and-small-collapsed;
-  }
-}
-
-.navigationTabScrollerContainer {
-  .hasNavigationTabs & {
-    @include title-block-small {
-      display: block;
-      overflow-x: scroll;
-      scrollbar-width: none;
-      width: 100vw;
-
-      &::-webkit-scrollbar {
-        display: none;
-      }
-    }
-  }
-}
-
-.navigationTabEdgeShadow {
-  display: none;
-  pointer-events: none;
-
-  @include title-block-small {
-    display: block;
-    position: absolute;
-    top: $tab-container-height-small - $title-block-separator-height;
-    width: $tab-container-height-small;
-    height: $tab-container-height-small;
-    background: linear-gradient(
-      0,
-      $color-purple-600,
-      rgba($color-purple-600-rgb, 0)
-    );
-    z-index: $ca-z-index-sticky;
-  }
-
-  .adminVariant & {
-    @include title-block-small {
-      background: linear-gradient(
-        0,
-        $color-gray-100,
-        rgba($color-gray-100-rgb, 0)
-      );
-    }
-  }
-
-  .educationVariant & {
-    @include title-block-small {
-      background: linear-gradient(
-        0,
-        $color-blue-200,
-        rgba($color-blue-200-rgb, 0)
-      );
-    }
-  }
-}
-
-.navigationTabEdgeShadowLeft {
-  composes: navigationTabEdgeShadow;
-  transform: rotate(90deg);
-  left: 0;
-  top: calc(100% - #{$tab-container-height-default});
-
-  @include title-block-small {
-    top: calc(100% - #{$tab-container-height-small});
-  }
-}
-
-.navigationTabEdgeShadowRight {
-  composes: navigationTabEdgeShadow;
-  transform: rotate(-90deg);
-  right: 0;
-  top: calc(100% - #{$tab-container-height-default});
-
-  @include title-block-small {
-    top: calc(100% - #{$tab-container-height-small});
-  }
-}
-
-// This should be in SecondaryAction.module.scss,
-// but the variants prevent us from breaking this out.
-.secondaryActionsContainer {
-  display: flex;
-  align-items: flex-start;
-  justify-content: flex-end;
-  padding: (calc(#{$ca-grid} / 2)) 0;
-  @include ca-margin($start: $ca-grid * 1.5);
-
-  // To be removed eventually – the Dropdown does not
-  // currently set its own color, and we want it
-  // to be Cluny like the default secondary buttons
-  .educationVariant &,
-  .adminVariant & {
-    color: $color-blue-500;
-  }
-
-  @include title-block-medium-and-small {
-    display: none;
-  }
-}
-
-.buttonReset {
-  appearance: none;
-  display: inline;
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  cursor: pointer;
-  margin: 0;
-  padding: 0;
-  border: none;
-}
-
-.breadcrumb {
-  composes: buttonReset;
-  cursor: pointer;
-  display: flex;
-  position: absolute;
-  z-index: $ca-z-index-sticky;
-  align-items: center;
-  top: 50%;
-  transform: translateY(-50%);
-  @include ca-position(
-    $start: calc(-#{$breadcrumb-circle-width} - #{$ca-grid})
-  );
-  align-self: normal;
-
-  &:hover .breadcrumbTextLink {
-    text-decoration: underline;
-  }
-
-  @media only screen and (max-width: $breadcrumb-breakpoint-width) {
-    position: relative;
-    @include ca-margin($end: calc(#{$ca-grid} / 2));
-    @include ca-position($start: 0);
-    transform: translateY(0);
-  }
-
-  @include title-block-medium-and-small {
-    display: none;
-  }
-}
-
-@mixin visually-hidden {
-  clip: rect(0 0 0 0);
-  clip-path: inset(50%);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
-
-@mixin visually-hidden-reset {
-  clip: initial;
-  clip-path: initial;
-  height: initial;
-  overflow: initial;
-  position: initial;
-  white-space: initial;
-  width: initial;
-}
-
-.breadcrumbTextLink {
-  // We are using visually hidden here instead of display:none so that a screen reader
-  // navigating via 'read mode' (which doesn't trigger hover/focus) will still hear this link name
-  @include visually-hidden;
-  z-index: $ca-z-index-sticky - 1;
-  @include ca-position($start: -2 * $ca-grid);
-  position: absolute;
-
-  @include title-block-under-1645 {
-    @include ca-position($start: $ca-grid);
-  }
-
-  @media only screen and (min-width: $breadcrumb-breakpoint-width) {
-    @include ca-position(
-      $start: calc(#{$breadcrumb-circle-width} - #{$ca-grid})
-    );
-  }
-
-  &:hover,
-  &:focus,
-  .breadcrumb:hover &,
-  .breadcrumb:focus & {
-    @include visually-hidden-reset;
-    // ^be careful of this mixin unsetting values you need
-    // e.g. I needed to set position:absolute again below
-    position: absolute;
-    display: block;
-    animation: slide-fade 0.4s;
-
-    [dir="rtl"] & {
-      animation: reverse-slide-fade 0.4s;
-    }
-  }
-}
-
-.breadcrumbText {
-  margin-inline-start: $spacing-xl;
-  white-space: nowrap;
-  font-family: $typography-heading-5-font-family;
-  font-weight: $typography-heading-5-font-weight;
-  font-size: $typography-heading-5-font-size;
-  line-height: $typography-heading-5-line-height;
-  letter-spacing: $typography-heading-5-letter-spacing;
-}
-
-.breadcrumb,
-.breadcrumb:hover,
-.breadcrumbText {
-  color: $color-white;
-  .educationVariant &,
-  .adminVariant & {
-    color: $color-purple-800;
-  }
-}
-
-.circle {
-  $border-width: 3px;
-  flex: 0 0 $breadcrumb-circle-width;
-  box-sizing: border-box;
-  width: $breadcrumb-circle-width;
-  height: $breadcrumb-circle-width;
-  color: $color-white;
-  border-color: rgba($color-white-rgb, 0.5);
-  border-width: 2px;
-  border-radius: 50%;
-  border-style: solid;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: background-color 0.3s ease, transform 0.3s ease;
-
-  .breadcrumb:hover &,
-  .breadcrumb:focus & {
-    transform: scale(1.1);
-    border-color: $color-white;
-    color: $color-white;
-    background-color: rgba($color-white-rgb, 0.1);
-  }
-
-  .educationVariant &,
-  .adminVariant & {
-    color: $color-blue-500;
-    border-color: $color-blue-300;
-    border-width: $border-width;
-  }
-
-  .educationVariant .breadcrumb:hover &,
-  .educationVariant .breadcrumb:focus &,
-  .adminVariant .breadcrumb:hover &,
-  .adminVariant .breadcrumb:focus & {
-    border-color: $color-blue-500;
-    color: $color-blue-500;
-    background-color: rgba($color-blue-500-rgb, 0.1);
-  }
-}
-
-@keyframes slide-fade {
-  0% {
-    display: none;
-    opacity: 0;
-  }
-  1% {
-    display: block;
-    opacity: 0;
-    transform: translateX(-30px);
-  }
-  100% {
-    opacity: 1;
-    transform: translateX(0px);
-  }
-}
-
-@keyframes reverse-slide-fade {
-  0% {
-    display: none;
-    opacity: 0;
-  }
-  1% {
-    display: block;
-    opacity: 0;
-    transform: translateX(30px);
-  }
-  100% {
-    opacity: 1;
-    transform: translateX(0px);
-  }
-}

package/dist/iife/ToastNotificationsList.module-EHDVGWDW.scss

@@ -1,26 +0,0 @@
-@import "~@kaizen/design-tokens/sass/spacing";
-@import "~@kaizen/design-tokens/sass/layout";
-
-.list {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  bottom: 0;
-  overflow: hidden;
-  padding-bottom: 0;
-  padding-top: 160px + 12px;
-  position: fixed;
-  right: $spacing-md;
-  top: 0;
-  bottom: 0;
-  z-index: 1030;
-  max-width: 100%;
-  pointer-events: none;
-
-  @media (max-width: ($layout-breakpoints-large - 1px)) {
-    padding-top: 108px;
-  }
-  @media (max-width: ($layout-breakpoints-medium - 1px)) {
-    left: $spacing-md;
-  }
-}