@linzjs/lui 12.1.4 → 12.2.0-roll-up.0

package/dist/scss/Components/LuiFormSection/LuiFormSectionHeader.scss

@@ -1,46 +0,0 @@
-@use '../../Foundation/Variables/LuiColors' as luiColors;
-@use '../../Foundation/Variables/SpacingVars' as spacing;
-@use '../../Foundation/Variables/BreakpointVars' as breakpoints;
-@use "../../Foundation/Utilities" as *;
-
-.LuiFormSectionHeader {
-  margin-top: spacing.$unit-md;
-  display: flex;
-  flex-direction: column;
-  padding: 1rem;
-  background-color: luiColors.$white;
-
-  @include breakpoint(md) {
-    flex-direction: row;
-    background-color: inherit;
-    padding: 0;
-  }
-}
-
-.LuiFormSectionHeader-header {
-  width: 100%;
-  padding-right: spacing.$unit-sm;
-
-  @include breakpoint(md) {
-    width: 30%;
-  }
-}
-
-.LuiFormSectionHeader-heading {
-  margin: 0;
-}
-
-.LuiFormSectionHeader-details {
-  padding: 0;
-  width: 100%;
-  background-color: luiColors.$white;
-  flex-grow: 2;
-
-  @include breakpoint(md) {
-    width: 70%;
-    border-radius: 5px;
-    margin-top: spacing.$unit-sm;
-    background-color: luiColors.$white;
-
-  }
-}

package/dist/scss/Components/LuiFormSection/LuiHelpInfo/LuiHelpInfo.scss

@@ -1,16 +0,0 @@
-@use '../../../Foundation/Variables/LuiColors' as luiColors;
-@use '../../../Foundation/Variables/SpacingVars' as spacing;
-
-.HelpInfo {
-  margin: 0;
-  display: flex;
-  color: luiColors.$fuscous;
-}
-
-.HelpInfo-icon {
-  transform: rotate(180deg);
-
-  margin-left: spacing.$unit-sm;
-  margin-right: spacing.$unit-xs;
-  fill: luiColors.$fuscous;
-}

package/dist/scss/Components/LuiForms/LuiComboSelect/LuiComboSelect.scss

@@ -1,35 +0,0 @@
-@use '../../../Foundation/Variables/FormVars' as luiForms;
-@use '../../../Foundation/Variables/LuiColors' as luiColors;
-@use '../../../Foundation/Variables/FontVars' as luiFonts;
-@use '../../../Foundation/Variables/SpacingVars' as luiSpacing;
-@use '../../../Foundation/Utilities/REM' as rem;
-
-.LuiComboSelect-label-text {
-  @include luiForms.formLabel();
-}
-
-.hasError {
-  .LuiComboSelect__control {
-     border-color: luiColors.$error;
-    box-shadow: -8px 0px 0 0 luiColors.$error;
-    border-radius: 4px;
-  }
-}
-
-.LuiComboSelect-error {
-  position: relative;
-  display: flex;
-  @include luiFonts.font-semibold;
-  color: luiColors.$error;
-  text-align: left;
-  padding-left: luiSpacing.$unit-md;
-  font-size: rem.rem(14px);
-  line-height: rem.rem(20px);
-  margin-top: luiSpacing.$unit-xxs;
-}
-
-.LuiComboSelect-error-icon {
-  position: absolute;
-  left: 0;
-  top: 2px;
-}

package/dist/scss/Components/LuiIcon/LuiIcons.scss

@@ -1,91 +0,0 @@
-@use "../../Foundation/Variables/ColorVars.scss" as colors;
-
-// Component starts
-
-$icon-xl: 64px;
-$icon-lg: 48px;
-$icon-md: 24px;
-$icon-sm: 16px;
-$icon-xs: 12px;
-
-.LuiIcon {
-  display: inline-block;
-  height: 100%;
-  width: 100%;
-
-  > svg {
-    display: block;
-  }
-}
-
-.LuiIcon--xl {
-  max-height: $icon-xl;
-  max-width: $icon-xl;
-
-  > svg {
-    height: $icon-xl;
-    width: $icon-xl;
-  }
-}
-
-.LuiIcon--lg {
-  max-height: $icon-lg;
-  max-width: $icon-lg;
-
-  > svg {
-    height: $icon-lg;
-    width: $icon-lg;
-  }
-}
-
-.LuiIcon--md {
-  height: $icon-md;
-  max-height: $icon-md;
-  max-width: $icon-md;
-  width: $icon-md;
-
-  > svg {
-    height: $icon-md;
-    width: $icon-md;
-  }
-}
-
-.LuiIcon--sm {
-  max-height: $icon-sm;
-  max-width: $icon-sm;
-
-  > svg {
-    height: $icon-sm;
-    width: $icon-sm;
-  }
-}
-
-.LuiIcon--xs {
-  max-height: $icon-xs;
-  max-width: $icon-xs;
-
-  > svg {
-    height: $icon-xs;
-    width: $icon-xs;
-  }
-}
-
-.LuiIcon--warning {
-  fill: colors.$warning;
-}
-
-.LuiIcon--error {
-  fill: colors.$error;
-}
-
-.LuiIcon--success {
-  fill: colors.$success;
-}
-
-.LuiIcon--interactive {
-  fill: colors.$sea;
-}
-
-.LuiIcon--disabled {
-  fill: colors.$disabled-color;
-}

package/dist/scss/Components/LuiShadow/LuiShadow.scss

@@ -1,16 +0,0 @@
-@use '../../Foundation/Variables/LuiColors' as luiColors;
-@use '../../Foundation/Variables/SpacingVars' as luiSpacing;
-
-// ========================
-// Lui Shadow wrapper
-// ========================
-// @note: Simple react component to wrap children in a div with a drop shadow, border radius, and appropriate padding
-// ========================
-
-.LuiShadow {
-  box-shadow: 0 0 luiSpacing.$unit-md 1px rgba(0, 113, 152, 0.1);
-  border-radius: 5px;
-  padding: luiSpacing.$unit-md;
-  margin-top: luiSpacing.$unit-sm;
-  background-color: luiColors.$white;
-}

package/dist/scss/Components/LuiTabs/LuiTab/LuiTab.scss

@@ -1,45 +0,0 @@
-@use "../../../Foundation/Variables/MiscVars.scss" as misc;
-@use "../../../Foundation/Variables/ColorVars.scss" as colors;
-@use '../../../Foundation/Variables/FontVars.scss' as fonts;
-@use '../../../Foundation/Variables/SpacingVars.scss' as spacing;
-@use "../../../Foundation/Utilities" as *;
-
-.LuiTab {
-  background: transparent;
-  border-radius: 0;
-  color: colors.$base-type-color;
-  min-width: spacing.$unit-xxl * 2;
-  @include fonts.font-regular;
-
-  &:focus {
-    background-color: rgba(colors.$persian, 0.2);
-  }
-
-  .LuiTabsGroup--justified & {
-    width: 100%;
-  }
-}
-
-.LuiTab--active,
-.LuiTab--active:focus {
-  @include fonts.font-semibold;
-  position: relative;
-  outline: none;
-  background: transparent;
-
-  &:after {
-    content: '';
-    display: block;
-    height: 4px;
-    width: 100%;
-    padding: 0 32px;
-    left: 0;
-    right: 0;
-    bottom: -1px;
-    box-sizing: border-box;
-    background: linear-gradient(270deg, colors.$downy 1%, colors.$persian 100%);
-    border-top-left-radius: 3px;
-    border-top-right-radius: 3px;
-    position: absolute;
-  }
-}

package/dist/scss/Components/LuiTabs/LuiTabs.scss

@@ -1,3 +0,0 @@
-@forward './LuiTab/LuiTab.scss';
-@forward './LuiTabsGroup/LuiTabsGroup.scss';
-@forward './LuiTabsPanel/LuiTabsPanel.scss';

package/dist/scss/Components/LuiTabs/LuiTabsGroup/LuiTabsGroup.scss

@@ -1,10 +0,0 @@
-@use '../../../Foundation/Variables/ColorVars.scss' as colors;
-
-.LuiTabsGroup {
-  border-bottom: 1px solid colors.$silver;
-}
-
-.LuiTabsGroup--justified {
-  display: flex;
-  justify-content: space-between;
-}

package/dist/scss/Components/LuiTabs/LuiTabsPanel/LuiTabsPanel.scss

@@ -1,9 +0,0 @@
-.LuiTabsPanel {
-  display: none;
-}
-
-.LuiTabsPanel--active {
-  display: block;
-  overflow: auto; // fixed the parent adopting the top margins of the content (collapsing margins)
-  // No padding is placed on the panel so you have full access to the content area. So any padding for margins needs to be added in your content.
-}

package/dist/scss/Components/Menu/menu.scss

@@ -1,145 +0,0 @@
-@use "../../Foundation/Variables/MiscVars.scss" as misc;
-@use "../../Foundation/Variables/ColorVars.scss" as colors;
-@use '../../Foundation/Variables/FontVars.scss' as fonts;
-@use "../../Foundation/Utilities" as *;
-@use "../Header/header.scss" as header;
-
-@mixin menu-container {
-  text-align: left;
-  background-color: white;
-  color: colors.$base-type-color;
-}
-
-.lui-menu-close-button {
-  &:hover {
-    cursor: pointer;
-  }
-}
-
-.lui-menu.rc-menu {
-  z-index: 900;
-  color: colors.$base-type-color;
-  @include fonts.font-light;
-
-  a[role='menuitem'] {
-    text-decoration: none;
-    color: colors.$base-type-color;
-    @include fonts.font-light;
-  }
-}
-
-body.lui-menu-drawer-open {
-  overflow-y: hidden;
-}
-
-.lui-menu-drawer {
-  @include menu-container;
-  height: 100%;
-  width: 300px;
-  max-width: 100%;
-  position: fixed;
-  z-index: 1;
-  top: 0;
-  right: 0;
-  overflow-x: hidden;
-  border-left: 2px solid colors.$lily;
-  transition: right 0.5s, visibility 0.6s;
-
-  .lui-header & {
-    top: header.$headerHeightMd;
-    height: calc(100% - #{header.$headerHeightMd});
-
-    @include breakpoint(md) {
-      top: header.$headerHeightLg;
-      height: calc(100% - #{header.$headerHeightLg});
-    }
-  }
-
-  .lui-header-small & {
-    top: header.$headerHeightSm;
-    height: calc(100% - #{header.$headerHeightSm});
-  }
-
-  &-closed {
-    right: -300px;
-    visibility: hidden;
-  }
-
-  &-options {
-    hr {
-      background-color: colors.$lily;
-    }
-  }
-
-  &-option {
-    display: flex;
-    justify-content: space-between;
-    padding: 12px 16px;
-
-    &:hover {
-      cursor: pointer;
-      background-color: colors.$polar;
-    }
-
-    &-label {
-      display: flex;
-      align-items: center;
-
-      :first-child {
-        margin-right: 10px;
-      }
-
-      i {
-        color: colors.$brand-secondary;
-        font-size: rem(24px);
-      }
-    }
-
-    .badge {
-      width: 24px;
-      height: 24px;
-    }
-  }
-}
-
-.lui-menu-dropdown {
-  @include menu-container;
-  position: absolute;
-  width: 350px;
-  border-radius: misc.$borderRadius;
-  right: 0;
-  top: rem(32px); // same as menu item font size
-
-  &-closed {
-    display: none;
-  }
-
-  z-index: 900; // primary menu
-}
-
-.LuiDrawerMenuSection-header {
-  @include fonts.font-semibold;
-  background-color: colors.$hint;
-  white-space: nowrap;
-  padding-left: 16px;
-  padding-right: 8px;
-}
-
-.LuiDrawerMenuSection-header .lui-expand-header {
-  padding-top: 8px;
-  padding-bottom: 8px;
-  display: flex;
-}
-
-.LuiDrawerMenuSection-header h3 {
-  @include fonts.font-semibold;
-  font-size: fonts.$base-font-size;
-  color: colors.$base-type-color;
-  margin-top: 0;
-  line-height: 32px;
-}
-
-.LuiDrawerMenuDivider {
-  height: 1px;
-  background-color: colors.$lily;
-}

package/dist/scss/Components/Messaging/messaging.scss

@@ -1,210 +0,0 @@
-@use "../../Foundation/Variables/MiscVars.scss" as misc;
-@use "../../Foundation/Variables/ColorVars.scss" as colors;
-@use "../../Foundation/Variables/FontVars.scss" as fonts;
-@use "../../Foundation/Variables/SpacingVars.scss" as spacing;
-@use "../../Foundation/Utilities" as *;
-
-@mixin message-base-styling {
-  border-left: 50px solid #ccc;
-  padding: spacing.$unit-sm 50px 16px spacing.$unit-sm;
-  margin: spacing.$unit-lg 0;
-  color: colors.$fuscous;
-  background: colors.$lily;
-  position: relative;
-
-  p {
-    margin: 0;
-    @include fonts.font-regular;
-  }
-
-  h2 {
-    font-size: fonts.$base-font-size;
-    @include fonts.font-semibold;
-    color: colors.$fuscous;
-    margin: 0;
-  }
-
-  h2 + p {
-    margin-top: spacing.$unit-xs;
-  }
-}
-
-@mixin message-close-btn {
-  button {
-    position: absolute;
-    top: 14px;
-    right: 13px;
-    background: none;
-    padding: 0;
-    border: none;
-    color: colors.$fuscous;
-    &:hover {
-      cursor: pointer;
-    }
-  }
-}
-
-.lui-msg-success {
-  @include message-base-styling;
-  border-color: colors.$success;
-  background: colors.$success-bg;
-  @include message-close-btn;
-}
-
-.lui-msg-info {
-  @include message-base-styling;
-  background: colors.$info-bg;
-  border-color: colors.$info;
-  @include message-close-btn;
-}
-.lui-msg-warning {
-  @include message-base-styling;
-  background: colors.$warning-bg;
-  border-color: colors.$warning;
-  @include message-close-btn;
-}
-
-.lui-msg-error {
-  @include message-base-styling;
-  border-color: colors.$error;
-  background: colors.$error-bg;
-  @include message-close-btn;
-}
-
-.lui-msg-link {
-  display: inline-block;
-  margin-top: spacing.$unit-xs;
-}
-
-.lui-msg-toast {
-  @include box-shadow;
-  background: #fff;
-  display: block;
-  box-sizing: border-box;
-  position: fixed;
-  // limit the width so messages are kept small, animation timing is accurate and messages fit on mobile.
-  width: 320px;
-  right: spacing.$unit-lg;
-  top: 0;
-  // Transform & left values are needed if we want the messages to come from the top
-  //left: 50%;
-  //transform: translateX(-50%);
-  z-index: 1200;
-  @include breakpoint(md) {
-    width: 400px;
-    min-height: 100px;
-  }
-}
-
-.lui-msg-dynamic-banner {
-  @include box-shadow;
-  background: #fff;
-  min-height: 55px;
-}
-
-.lui-msg-status-icon {
-  content: '';
-  position: absolute;
-  top: 12px;
-  left: -41.5px;
-  font-size: 2rem !important;
-  color: white;
-}
-
-.lui-msg-banner-container {
-  width: 100%;
-  background: colors.$lily;
-  padding: spacing.$unit-xxs;
-  @include breakpoint(md) {
-    padding: spacing.$unit-lg;
-  }
-  &--reducedSpacing {
-    @include breakpoint(md) {
-      padding: spacing.$unit-sm;
-    }
-  }
-}
-
-.lui-msg-banner-container {
-  text-align: center;
-
-  .lui-msg-dynamic-banner {
-    margin: 0;
-  }
-}
-
-.lui-msg-toast-dismissable {
-  animation-name: toast-ani;
-  animation-duration: 0.6s;
-  animation-timing-function: ease-out;
-  animation-fill-mode: forwards;
-}
-.lui-msg-toast-transition {
-  animation-name: toast-ani-auto;
-  animation-duration: 4s;
-  animation-timing-function: ease-out;
-  animation-fill-mode: forwards;
-}
-.lui-msg-toast-show {
-  animation-name: toast-ani-show;
-  animation-duration: 0.6s;
-  animation-timing-function: ease-out;
-  animation-fill-mode: forwards;
-}
-
-.lui-msg-toast-hide {
-  animation-name: toast-ani-hide;
-  animation-duration: 0.6s;
-  animation-timing-function: ease-out;
-  animation-fill-mode: forwards;
-}
-
-@keyframes toast-ani {
-  0% {
-    right: -400px;
-  }
-  100% {
-    right: spacing.$unit-lg;
-  }
-}
-
-@keyframes toast-ani-auto {
-  0% {
-    right: -400px;
-    opacity: 0;
-  }
-  25% {
-    right: spacing.$unit-lg;
-    opacity: 1;
-  }
-  75% {
-    right: spacing.$unit-lg;
-    opacity: 1;
-  }
-  100% {
-    right: -400px;
-    opacity: 0;
-  }
-}
-
-@keyframes toast-ani-show {
-  0% {
-    right: -400px;
-    opacity: 0;
-  }
-  100% {
-    right: spacing.$unit-lg;
-    opacity: 1;
-  }
-}
-
-@keyframes toast-ani-hide {
-  0% {
-    right: spacing.$unit-lg;
-    opacity: 1;
-  }
-  100% {
-    right: -400px;
-    opacity: 0;
-  }
-}