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

package/dist/scss/Components/LuiFormElements/LuiCheckboxInput/LuiCheckboxInput.scss

@@ -1,155 +0,0 @@
-@use '../../../Foundation/Variables/FormVars' as luiForms;
-@use '../../../Foundation/Variables/LuiColors' as luiColors;
-@use '../../../Foundation/Variables/SpacingVars' as luiSpacing;
-// Usage:
-// <label class="Checkbox" for="male">
-//   <input class="Checkbox-input" type="checkbox" id="male">
-//   <span class="Checkbox-label">Content here</span>
-// </label>
-// <label class="Checkbox" for="female">
-//   <input class="Checkbox-input" type="checkbox" id="female">
-//   <span class="Checkbox-label">Content here</span>
-// </label>
-
-$checkbox-size: 23px;
-$border-size: 2px;
-
-// <label>
-.LuiCheckboxInput {
-  margin-bottom: 24px;
-  box-sizing: border-box;
-}
-
-.LuiCheckboxInput-group {
-  display: block;
-  user-select: none;
-  cursor: pointer;
-
-  // space them out if they're next to each other
-  // &:not(:last-child) {
-  //   margin-bottom: 12px;
-  // }
-}
-
-// <span> acting as the label
-.LuiCheckboxInput-label {
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  padding: 2px;
-  @include luiForms.formLabel();
-  margin-bottom: 0;
-
-  .isDisabled & {
-    cursor: not-allowed;
-    color: luiColors.$disabled-color;
-  }
-}
-
-// say goodbye to the real input
-.LuiCheckboxInput-input {
-  width: 0.1px;
-  height: 0.1px;
-  opacity: 0;
-  overflow: hidden;
-  position: absolute;
-  z-index: -1;
-}
-
-// say hello to the fake input
-.LuiCheckboxInput-label::after {
-  // Plug in your icon here
-  // font-size: 18px;
-  // line-height: 10px;
-  // content: ' ';
-  // display: block;
-  // text-align: center;
-  // color: transparent;
-  // width: $checkbox-size;
-  // height: $checkbox-size;
-  // // border: 3px solid white;
-  // box-shadow: 0 0 0 2px #053d52;
-  // margin-right: 12px;
-  // margin-top: 3px;
-  // border-radius: 2px;
-}
-
-.LuiCheckboxInput-label::before {
-  // Plug in your icon here
-  font-size: 18px;
-  line-height: 10px;
-  content: ' ';
-  display: block;
-  text-align: center;
-  color: transparent;
-  width: $checkbox-size;
-  height: $checkbox-size;
-  border: $border-size solid luiColors.$sea;
-  margin-right: luiForms.$checkbox-label-spacing;
-  border-radius: 5px;
-  transition: all 0.2s ease-in-out;
-
-  .hasError & {
-    border-color: #eb5757;
-  }
-}
-
-.LuiCheckboxInput-error {
-  margin-top: 2px;
-  text-align: left;
-}
-
-.LuiCheckboxInput-errorIcon {
-  margin-left: luiSpacing.$unit-lg;
-}
-
-// ============
-// STATES
-// ============
-.LuiCheckboxInput-input:checked + .LuiCheckboxInput-label::before,
-.LuiCheckboxInput--isChecked .LuiCheckboxInput-label::before {
-  color: white;
-  // base64 encoded version of `assets/icons/tick.svg`.  referring to svg via it's path causes downstream import errors.
-  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNCAxMSI+CiAgICA8cGF0aCBmaWxsPSIjRkZGIiBkPSJNLjI5NyA0LjkzNGExLjAxMyAxLjAxMyAwIDAgMSAxLjM0NC0uMDc4bC4wODguMDc4TDUuMjU0IDguNDYgMTIuMjE5LjM1M2ExLjAxMyAxLjAxMyAwIDAgMSAxLjMzNC0uMThsLjA5NC4wNzJjLjM5NC4zMzguNDY0LjkxNC4xOCAxLjMzNGwtLjA3Mi4wOTQtNy42NzYgOC45MzVhMS4wMTMgMS4wMTMgMCAwIDEtMS4zOTguMTM0bC0uMDg3LS4wNzhMLjI5NyA2LjM2N2ExLjAxMyAxLjAxMyAwIDAgMSAwLTEuNDMzWiIvPgo8L3N2Zz4=');
-  background-color: luiColors.$sea;
-  background-repeat: no-repeat;
-  background-position: 50% 50%;
-  background-size: 15px;
-}
-
-.LuiCheckboxInput--hasError .LuiCheckboxInput-label::before {
-  border-color: luiColors.$error;
-}
-
-.LuiCheckboxInput--hasError.LuiCheckboxInput--isChecked
-  .LuiCheckboxInput-label::before {
-  background-color: luiColors.$error;
-  border-color: luiColors.$error;
-}
-
-.LuiCheckboxInput-input:disabled + .LuiCheckboxInput-label::before,
-.LuiCheckboxInput--isDisabled .LuiCheckboxInput-label::before {
-  background-color: luiColors.$disabled-color;
-  border-color: luiColors.$disabled-color;
-}
-
-.LuiCheckboxInput-input:checked:disabled + .LuiCheckboxInput-label::before,
-.LuiCheckboxInput--isChecked.LuiCheckboxInput--isDisabled
-  .LuiCheckboxInput-label::before {
-  color: white;
-  background-color: luiColors.$disabled-color;
-  border-color: luiColors.$disabled-color;
-}
-
-// ============
-// MODIFIERS
-// ============
-.LuiCheckboxInput--inline {
-  display: inline-block;
-  // space them out if they're next to each other
-  &:not(:last-child) {
-    margin-bottom: 0;
-    margin-right: 24px;
-  }
-}

package/dist/scss/Components/LuiFormElements/LuiFileInputBox.scss

@@ -1,78 +0,0 @@
-@use '../../../scss/Foundation/Variables/LuiColors' as luiColors;
-
-.LuiFileInputBox-upload {
-  outline: 2px dashed luiColors.$lily;
-  color: dimgray;
-  cursor: pointer;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-
-  &:hover {
-    background: #eef1f5;
-  }
-}
-
-.LuiFileInputBox-upload-input {
-  opacity: 0;
-  cursor: pointer;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: block;
-}
-
-.LuiFileInputBox-upload-container {
-  text-align: center;
-  padding: 24px 20px;
-}
-
-.LuiFileInputBox-upload-error {
-  outline: 2px dashed luiColors.$error;
-}
-
-.LuiFileInputBox-upload-icon-success {
-  width: 120px;
-  fill: luiColors.$success;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.LuiFileInputBox-upload-icon-upload {
-  width: 120px;
-  fill: luiColors.$sea;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.LuiFileInputBox-upload-icon-error {
-  width: 168px;
-  fill: luiColors.$error;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.LuiFileInputBox-upload-text {
-  margin-top: 0;
-  padding-top: 8px;
-
-  span {
-    color: luiColors.$info;
-    font-weight: 600;
-  }
-}
-
-.LuiFileInputBox-upload-text-no-padding {
-  padding: 0;
-  font-size: 14px;
-}
-
-.LuiFileInputBox-upload-file-name {
-  margin-top: 0;
-  padding-bottom: 12px;
-  font-weight: 600;
-}

package/dist/scss/Components/LuiFormElements/LuiRadioInput/LuiRadioInput.scss

@@ -1,86 +0,0 @@
-@use '../../../Foundation/Variables/FontVars' as luiFonts;
-@use '../../../Foundation/Variables/LuiColors' as luiColors;
-@use '../../../Foundation/Variables/SpacingVars' as luiSpacing;
-@use '../../../Foundation/Utilities/ScreenReadersOnly' as luiScreenReadersOnly;
-
-.LuiRadioInput-fieldset {
-  border: none;
-  padding: 0;
-}
-
-.LuiRadioInput-input {
-  @include luiScreenReadersOnly.ScreenReadersOnly();
-}
-
-.LuiRadioInput-legend {
-  @include luiFonts.font-semibold;
-}
-
-.LuiRadioInput-label {
-  position: relative;
-  display: flex;
-  justify-content: flex-start;
-  align-items: flex-start;
-  cursor: pointer;
-  padding: luiSpacing.$unit-xs 0 luiSpacing.$unit-xs luiSpacing.$unit-lg;
-
-  &:before {
-    content: '';
-    height: 1.5rem; // 20px
-    min-width: 1.5rem; // 20px
-    width: 1.5rem; // 20px
-    border: 2px solid luiColors.$sea;
-    border-radius: 50%;
-    background-color: transparent;
-    position: absolute;
-    left: 0;
-    top: 8px;
-    margin-right: luiSpacing.$unit-sm;
-  }
-
-  &:after {
-    content: '';
-    position: absolute;
-    left: 5px;
-    top: 13px;
-    background-color: #007198;
-    height: 14px;
-    min-width: 14px;
-    width: 14px;
-    border-radius: 50%;
-    opacity: 0;
-    transition: opacity 0.3s ease-in-out;
-  }
-
-  &--isSelected:after {
-    opacity: 1;
-  }
-
-  &--isDisabled {
-    color: luiColors.$gray;
-
-    &:before {
-      background-color: luiColors.$lily;
-      border-color: luiColors.$gray;
-    }
-  }
-}
-
-.LuiRadioInput--hasError {
-  .LuiRadioInput-label:before {
-    border-color: luiColors.$error;
-  }
-}
-
-.LuiRadioInput-errorMsg {
-  display: flex;
-  margin-top: luiSpacing.$unit-xs;
-
-  .LuiIcon--error {
-    margin-right: luiSpacing.$unit-xs;
-  }
-
-  p {
-    margin: 0;
-  }
-}

package/dist/scss/Components/LuiFormElements/LuiSelectInput/LuiSelectInput.scss

@@ -1,113 +0,0 @@
-@use '../../../Foundation/Variables/FormVars' as luiForms;
-@use '../../../Foundation/Variables/FontVars' as luiFonts;
-@use '../../../Foundation/Variables/LuiColors' as luiColors;
-@use '../../../Foundation/Variables/SpacingVars' as luiSpacing;
-@use '../../../Foundation/Variables/MiscVars' as MiscVars;
-@use '../../../Foundation/Utilities/REM' as rem;
-
-
-// No top or bottom margins set on the component at the LUI level as we never know what is coming before or after the component. 
-// Set spacing once you have it in your project
-
-.LuiSelect-label-text {
-  @include luiForms.formLabel();
-}
-
-.LuiSelect-select {
-  @include luiFonts.font-regular();
-  margin-bottom: 0;
-  border: 1px solid luiColors.$silver;
-  border-radius: MiscVars.$borderRadius;
-  display: block;
-  height: luiSpacing.$unit-xl;
-  color: luiColors.$charcoal;
-  caret-color: luiColors.$charcoal;
-  padding: {
-    right: luiSpacing.$unit-lg;
-    left: luiSpacing.$base-unit * 2; // 16px
-  }
-  width: 100%;
-  transition: all 0.15 ease-in-out;
-  appearance: none;
-
-  &:hover,
-  &:active {
-    border-color: luiColors.$input-focus;
-    cursor: pointer;
-  }
-
-  &:focus {
-    outline: none;
-    border-color: luiColors.$input-focus;
-  }
-
-  .hasError & {
-    border-color: luiColors.$error;
-  }
-
-  .isDisabled & {
-    border-color: luiColors.$silver;
-    background-color: luiColors.$lily;
-    color: luiColors.$charcoal;
-    cursor: not-allowed;
-  }
-
-  .hasPlaceholder & {
-    color: #b2b2b2;
-  }
-
-  .hasValue & {
-    color: luiColors.$charcoal;
-  }
-}
-
-.LuiSelect-wrapper {
-  position: relative;
-  .hasError & {
-    &:before {
-      content: '';
-      display: block;
-      position: absolute;
-      width: luiSpacing.$unit-sm;
-      top: 0;
-      bottom: 0;
-      left: -6px;
-      background-color: luiColors.$error;
-      border-radius: MiscVars.$borderRadius 0 0 MiscVars.$borderRadius;
-      z-index: -1;
-    }
-  }
-}
-
-.LuiSelect-chevron-icon {
-  position: absolute;
-  right: 7px;
-  top: 50%;
-  transform: translateY(-50%);
-  pointer-events: none;
-}
-
-.LuiSelect-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;
-}
-
-.LuiSelect-error-icon {
-  position: absolute;
-  left: 0;
-  top: 2px;
-}
-
-.LuiSelect-mandatory {
-  display: inline-block;
-  width: 10px;
-  margin: 0 0 0 -10px;
-  color: luiColors.$error;
-}

package/dist/scss/Components/LuiFormElements/LuiTextAreaInput/LuiTextAreaInput.scss

@@ -1,115 +0,0 @@
-@use '../../../Foundation/Variables/FormVars' as luiForms;
-@use '../../../Foundation/Variables/FontVars' as luiFonts;
-@use '../../../Foundation/Utilities/FluidType' as luiFluidType;
-@use '../../../Foundation/Variables/BreakpointVars' as luiBreakpoints;
-@use '../../../Foundation/Variables/LuiColors' as luiColors;
-@use '../../../Foundation/Variables/MiscVars' as luiMisc;
-@use '../../../Foundation/Variables/SpacingVars' as luiSpacing;
-@use '../../../Foundation/Utilities/REM' as rem;
-
-// =============================
-// TextArea
-// =============================
-
-// No top or bottom margins set on the component at the LUI level as we never know what is coming before or after the component. 
-// Set spacing once you have it in your project
-
-.LuiTextAreaInput {
-  width: 100%;
-  position: relative;
-
-  textarea {
-    @include luiFonts.font-regular;
-    @include luiFluidType.fluidType--size(
-      14px,
-      16px,
-      1px,
-      luiBreakpoints.$breakpoint-xl
-    );
-    @include luiForms.formPlaceholder;
-    border: solid 1px luiColors.$silver;
-    border-radius: luiMisc.$borderRadius;
-    background: luiColors.$white;
-    padding: {
-      top: luiSpacing.$unit-sm;
-      right: luiSpacing.$unit-lg;
-      bottom: luiSpacing.$unit-sm;
-      left: luiSpacing.$unit-xs * 2;
-    }
-    box-sizing: border-box;
-    width: 100%;
-    resize: vertical;
-    min-height: 100px;
-    position: relative;
-
-    &:focus {
-      outline: none;
-      border-color: luiColors.$input-focus;
-    }
-  }
-
-  label,
-  textarea {
-    display: block;
-  }
-
-  &.hasError {
-    textarea {
-      border: 1px solid luiColors.$error;
-    }
-    .LuiTextAreaInput-wrapper {
-      position: relative;
-
-      &:before {
-        content: '';
-        display: block;
-        position: absolute;
-        width: luiSpacing.$unit-sm;
-        top: 0;
-        bottom: 0;
-        left: -6px;
-        background-color: luiColors.$error;
-        border-radius: luiMisc.$borderRadius 0 0 luiMisc.$borderRadius;
-      }
-    }
-  }
-
-  &.isDisabled {
-    textarea {
-      border-color: luiColors.$silver;
-      background-color: luiColors.$lily;
-      cursor: not-allowed;
-    }
-  }
-}
-
-.LuiTextAreaInput-label {
-  @include luiForms.formLabel;
-}
-
-.LuiTextAreaInput-error {
-  position: relative;
-  display: flex;
-  color: luiColors.$error;
-  @include luiFonts.font-semibold;
-  text-align: left;
-  padding-left: luiSpacing.$unit-md;
-  font-size: rem.rem(14px);
-  line-height: rem.rem(20px);
-  margin-top: luiSpacing.$unit-xxs;
-}
-
-.LuiTextAreaInput-error-icon {
-  position: absolute;
-  left: 0;
-  top: 2px;
-}
-
-.LuiTextAreaInput-mandatory {
-  display: inline-block;
-  @include luiFonts.font-semibold();
-  font-size: luiForms.$label-font-size;
-  width: 10px;
-  margin: 0 0 0 -10px;
-  color: luiColors.$error;
-}

package/dist/scss/Components/LuiFormElements/LuiTextInput/LuiTextInput.scss

@@ -1,150 +0,0 @@
-@use '../../../Foundation/Variables/FormVars' as luiForms;
-@use '../../../Foundation/Variables/FontVars' as luiFonts;
-@use '../../../Foundation/Variables/LuiColors' as luiColors;
-@use '../../../Foundation/Variables/SpacingVars' as luiSpacing;
-@use '../../../Foundation/Variables/MiscVars' as MiscVars;
-@use '../../../Foundation/Utilities/REM' as rem;
-
-$input-spacing: luiSpacing.$unit-xs; // 8px
-
-$label-line-height: luiSpacing.$unit-md;
-
-.LuiTextInput {
-  margin-bottom: 24px;
-}
-
-.LuiTextInput-label {
-  margin-bottom: $input-spacing;
-  line-height: $label-line-height;
-}
-
-.LuiTextInput-label-text {
-  @include luiForms.formLabel;
-}
-
-.LuiTextInput-inputWrapper {
-  position: relative;
-  display: block;
-  box-shadow: -1px 0 0 0 transparent;
-  border-radius: 4px;
-  transition: box-shadow 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s,
-  border-color 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s;
-
-  .hasError & {
-    box-shadow: -8px 0px 0 0 luiColors.$error;
-    border-radius: 4px;
-  }
-}
-
-.LuiTextInput-passwordReveal {
-  position: absolute;
-  background: transparent;
-  min-height: 0;
-  min-width: 0;
-  margin: 0;
-  padding: 12px;
-  top: 50%;
-  right: 0;
-  transform: translateY(-50%);
-
-  &:hover {
-    background: transparent;
-  }
-}
-
-.LuiTextInput-input {
-  @include luiFonts.font-regular();
-  @include luiForms.formPlaceholder;
-  margin-bottom: 0;
-  border: 1px solid luiColors.$silver;
-  border-radius: MiscVars.$borderRadius;
-  height: luiSpacing.$unit-xl;
-  color: luiColors.$charcoal;
-  caret-color: luiColors.$charcoal;
-  padding: {
-    top: luiSpacing.$unit-sm;
-    right: luiSpacing.$unit-lg;
-    bottom: luiSpacing.$unit-sm;
-    left: luiSpacing.$unit-xs * 2;
-  }
-  width: 100%;
-  transition: all 0.15 ease-in-out;
-  transition: border 0.2s ease;
-
-  &:hover,
-  &:active {
-    border-color: luiColors.$input-focus;
-  }
-
-  &:focus {
-    outline: none;
-    border-color: luiColors.$input-focus;
-  }
-
-  .hasError & {
-    border-color: luiColors.$error;
-  }
-
-  .isDisabled & {
-    border-color: luiColors.$silver;
-    background-color: luiColors.$lily;
-    cursor: not-allowed;
-  }
-}
-
-.LuiTextInput-padlock-icon {
-  // base64 encoded version of `assets/icons/lock.svg`.  referring to svg via it's path causes downstream import errors.
-  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAyMiI+PHBhdGggZD0iTTE0IDcuNUgxM1Y1LjVDMTMgMi43NCAxMC43NiAwLjUgOCAwLjVDNS4yNCAwLjUgMyAyLjc0IDMgNS41VjcuNUgyQzAuOSA3LjUgMCA4LjQgMCA5LjVWMTkuNUMwIDIwLjYgMC45IDIxLjUgMiAyMS41SDE0QzE1LjEgMjEuNSAxNiAyMC42IDE2IDE5LjVWOS41QzE2IDguNCAxNS4xIDcuNSAxNCA3LjVaTTggMTYuNUM2LjkgMTYuNSA2IDE1LjYgNiAxNC41QzYgMTMuNCA2LjkgMTIuNSA4IDEyLjVDOS4xIDEyLjUgMTAgMTMuNCAxMCAxNC41QzEwIDE1LjYgOS4xIDE2LjUgOCAxNi41Wk0xMS4xIDcuNUg0LjlWNS41QzQuOSAzLjc5IDYuMjkgMi40IDggMi40QzkuNzEgMi40IDExLjEgMy43OSAxMS4xIDUuNVY3LjVaIiBmaWxsPSIjNkI2OTY2IiAvPjwvc3ZnPg==');
-  background-repeat: no-repeat;
-  background-position: right 12px center;
-  background-size: 16px 21px;
-}
-
-.LuiTextInput-error {
-  @include luiFonts.font-semibold();
-  position: relative;
-  color: luiColors.$error;
-  text-align: left;
-  padding-left: 22px;
-  font-size: luiForms.$label-font-size;
-  line-height: 20px;
-  margin-top: 2px;
-}
-
-.LuiTextInput-error-icon {
-  position: absolute;
-  left: 0;
-  top: 2px;
-}
-
-.LuiTextInput-mandatory {
-  display: inline-block;
-  @include luiFonts.font-semibold();
-  font-size: luiForms.$label-font-size;
-  width: 10px;
-  margin: 0 0 0 -10px;
-  color: luiColors.$error;
-}
-
-.LuiFieldWrapper {
-  position: relative;
-  box-shadow: -1px 0 0 0 transparent;
-  border-radius: 4px;
-  transition: box-shadow 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s,
-    border-color 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s;
-
-  //  !--------- This can't live here! Needs to go in specific input-------!
-  input {
-    transition: border 0.2s ease;
-  }
-
-  &.LuiFieldWrapper--error {
-    box-shadow: -12px 0px 0 0 luiColors.$error;
-    border-radius: 4px;
-
-    //  !--------- This can't live here! Needs to go in specific input-------!
-    input {
-      border-color: luiColors.$error;
-    }
-  }
-}