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

package/dist/scss/Elements/Buttons/buttons.scss

@@ -1,760 +0,0 @@
-@use "sass:math";
-
-@use "../../Foundation/Variables/ColorVars.scss" as colors;
-@use "../../Foundation/Variables/FontVars.scss" as fonts;
-@use "../../Foundation/Variables/MiscVars.scss" as misc;
-@use "../../Foundation/Variables/SpacingVars.scss" as spacing;
-@use "../../Foundation/Utilities" as *;
-
-// button variables only used for this file
-$strokeWeight: 2px;
-$reversed-btn-active-txt: rgba(255, 255, 255, 0.6);
-$reversed-no-bg-btn-active-txt: rgba(255, 255, 255, 0.8);
-$disabled-reversed-no-bg-btn-txt: rgba(255, 255, 255, 0.4);
-$btnLine-height: 40px;
-
-// reset buttons and base styling for all
-
-@mixin button {
-  @include fonts.font-bold();
-  font-size: 1rem;
-  line-height: $btnLine-height;
-  margin: 0;
-  padding: 0 spacing.$unit-lg;
-  border: none;
-  border-radius: misc.$borderRadius;
-  transition: background-color 0.3s, color 0.3s, height 0.3s, border 0.3s,
-    fill 0.3s;
-
-  i,
-  svg * {
-    transition: color 0.3s, fill 0.3s;
-  }
-
-  &:hover {
-    cursor: pointer;
-  }
-}
-
-button {
-  @include button();
-}
-
-// create a SASS Mixin that can be called from the style definitions. You pass values and it will
-// pre-populate your style declaration with the content of the mixin.
-@mixin button-builder(
-  $btnTxtCol,
-  $btnBgCol,
-  $borderCol,
-  $myStrokeWeight: $strokeWeight,
-  $myBtnLineHeight: $btnLine-height
-) {
-  background-color: $btnBgCol;
-  border: $myStrokeWeight solid $borderCol;
-  color: $btnTxtCol;
-  line-height: $myBtnLineHeight;
-
-  i,
-  svg * {
-    color: $btnTxtCol;
-    fill: $btnTxtCol;
-  }
-
-  &:visited {
-    color: $btnTxtCol;
-  }
-}
-
-// Broke the Button styling mixin into two so passing the values wouldn't be so overwelming.
-// This one defines the Hover and Active states of the button
-@mixin button-states-builder(
-  $btnTxtColHover,
-  $btnBgColHover,
-  $borderColHover,
-  $btnTxtColActive,
-  $btnBgColActive,
-  $borderColActive
-) {
-  &:hover {
-    background-color: $btnBgColHover;
-    cursor: pointer;
-    color: $btnTxtColHover;
-    border: $strokeWeight solid $borderColHover;
-
-    i,
-    svg * {
-      color: $btnTxtColHover;
-      fill: $btnTxtColHover;
-    }
-  }
-
-  &:disabled {
-    color: colors.$disabled-color;
-    background: colors.$lily;
-    border-color: colors.$lily;
-
-    i,
-    svg * {
-      color: colors.$disabled-color;
-      fill: colors.$disabled-color;
-    }
-
-    &:hover {
-      cursor: not-allowed;
-    }
-  }
-
-  &:active:enabled {
-    background-color: $btnBgColActive;
-    cursor: pointer;
-    color: rgba($btnTxtColActive, 0.6);
-    border: $strokeWeight solid $borderColActive;
-    -moz-box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.2);
-    -webkit-box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.2);
-    box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.2);
-
-    i,
-    svg * {
-      color: $btnTxtColActive;
-      fill: $btnTxtColActive;
-    }
-  }
-}
-
-a.lui-button {
-  @include button();
-  display: inline-block;
-  text-decoration: none;
-}
-
-.lui-button,
-a.lui-button {
-  text-align: center;
-
-  &.lui-button-icon-right {
-    padding: 0 14px 0 spacing.$unit-sm;
-
-    i,
-    .LuiIcon {
-      position: relative;
-      top: 6px;
-      margin: 0 0 0 12px;
-    }
-  }
-
-  &.lui-button-icon {
-    padding: 0 spacing.$unit-sm 0 14px;
-
-    i,
-    .LuiIcon {
-      position: relative;
-      top: 6px;
-      margin: 0 12px 0 0;
-    }
-  }
-
-  &-primary {
-    // var $btnTxtCol, $btnBgCol, $borderCol, $myStrokeWeight : 2px, $myBtnLineHeight : 40px
-    @include button-builder(#fff, colors.$sea, colors.$sea);
-    // var $btnTxtColHover, $btnBgColHover, $borderColHover, $btnTxtColActive, $btnBgColActive, $borderColActive
-    @include button-states-builder(
-      #fff,
-      colors.$brand-primary,
-      colors.$brand-primary,
-      $reversed-btn-active-txt,
-      colors.$teal,
-      colors.$teal
-    );
-  }
-
-  &-secondary {
-    // var $btnTxtCol, $btnBgCol, $borderCol, $myStrokeWeight : 2px, $myBtnLineHeight : 40px
-    @include button-builder(colors.$sea, #fff, colors.$sea);
-    // var $btnTxtColHover, $btnBgColHover, $borderColHover, $btnTxtColActive, $btnBgColActive, $borderColActive
-    @include button-states-builder(
-      #fff,
-      colors.$brand-primary,
-      colors.$brand-primary,
-      $reversed-btn-active-txt,
-      colors.$teal,
-      colors.$teal
-    );
-
-    i,
-    svg * {
-      color: colors.$sea;
-    }
-
-    &:hover i {
-      color: #fff;
-    }
-  }
-
-  &-tertiary {
-    // var $btnTxtCol, $btnBgCol, $borderCol, $myStrokeWeight : 2px, $myBtnLineHeight : 40px
-    @include button-builder(#fff, colors.$green-btn, colors.$green-btn);
-    // var $btnTxtColHover, $btnBgColHover, $borderColHover, $btnTxtColActive, $btnBgColActive, $borderColActive
-    @include button-states-builder(
-      #fff,
-      colors.$green-hover,
-      colors.$green-hover,
-      $reversed-btn-active-txt,
-      colors.$green-active,
-      colors.$green-active
-    );
-  }
-
-  &-error {
-    // var $btnTxtCol, $btnBgCol, $borderCol, $myStrokeWeight : 2px, $myBtnLineHeight : 40px
-    @include button-builder(#fff, colors.$error, colors.$error);
-    // var $btnTxtColHover, $btnBgColHover, $borderColHover, $btnTxtColActive, $btnBgColActive, $borderColActive
-    @include button-states-builder(
-      #fff,
-      colors.$error-focus,
-      colors.$error-focus,
-      $reversed-btn-active-txt,
-      colors.$error-focus,
-      colors.$error-focus
-    );
-  }
-
-  &-reversed-no-bg {
-    // var $btnTxtCol, $btnBgCol, $borderCol, $myStrokeWeight : 2px, $myBtnLineHeight : 40px
-    @include button-builder(#fff, transparent, transparent);
-    // var $btnTxtColHover, $btnBgColHover, $borderColHover, $btnTxtColActive, $btnBgColActive, $borderColActive
-    @include button-states-builder(
-      $reversed-no-bg-btn-active-txt,
-      transparent,
-      transparent,
-      $reversed-btn-active-txt,
-      transparent,
-      transparent
-    );
-
-    i {
-      font-size: 2.5rem;
-      top: 13px !important; // overwrite the base btn icon positioning without reworking mulitple classes
-    }
-
-    &:disabled {
-      color: $disabled-reversed-no-bg-btn-txt;
-      background: none;
-      border: 0;
-
-      i,
-      svg * {
-        color: $disabled-reversed-no-bg-btn-txt;
-        fill: $disabled-reversed-no-bg-btn-txt;
-      }
-
-      &:hover {
-        cursor: not-allowed;
-      }
-    }
-  }
-
-  &-text {
-    // var $btnTxtCol, $btnBgCol, $borderCol, $myStrokeWeight : 2px, $myBtnLineHeight : 40px
-    @include button-builder(colors.$txt-link, transparent, #fff, 0, 24px);
-    // var $btnTxtColHover, $btnBgColHover, $borderColHover, $btnTxtColActive, $btnBgColActive, $borderColActive
-    @include button-states-builder(
-      colors.$teal,
-      transparent,
-      none,
-      colors.$teal,
-      none,
-      none
-    );
-    // border bottom mimics what we have for text link styling
-    border-bottom: 1px solid;
-    @include fonts.font-regular();
-    // remove the padding and margin off the buttons - used for text only buttons
-    padding: 0;
-    margin: 0;
-    border-radius: 0; // remove border radius so the text underline via border bottom doesn't turn up at the ends
-    &:hover {
-      border-bottom: 2px solid;
-    }
-
-    &:disabled {
-      color: colors.$gray;
-      background: none;
-      border: 0;
-      text-decoration: none;
-
-      &:hover {
-        cursor: not-allowed;
-      }
-
-      i,
-      svg * {
-        color: colors.$gray;
-        fill: colors.$gray;
-      }
-    }
-  }
-
-  &-plain-text {
-    // var $btnTxtCol, $btnBgCol, $borderCol
-    @include button-builder(inherit, transparent, #fff);
-    // remove the padding and margin off the buttons - used for text only buttons
-    padding: 0;
-    margin: 0;
-    font-family: inherit;
-    font-size: inherit;
-    line-height: inherit;
-    color: inherit;
-    font-weight: inherit;
-
-    &:disabled {
-      color: colors.$gray;
-      background: none;
-      border: 0;
-      text-decoration: none;
-
-      i,
-      svg * {
-        color: colors.$gray;
-        fill: colors.$gray;
-      }
-    }
-  }
-
-  &-icon-only,
-  &-icon-only-rev,
-  &-icon-only-link {
-    // var $btnTxtCol, $btnBgCol, $borderCol, $myStrokeWeight : 2px, $myBtnLineHeight : 40px
-    @include button-builder(colors.$sea, transparent, transparent);
-    // var $btnTxtColHover, $btnBgColHover, $borderColHover, $btnTxtColActive, $btnBgColActive, $borderColActive
-    @include button-states-builder(
-      colors.$primary-hover-btn,
-      transparent,
-      transparent,
-      colors.$txt-link,
-      transparent,
-      transparent
-    );
-    // OK, for some reason setting the line height to 44px sets the icon in the centre of the 36 X 36 box. Tested fine on Chrome, FF & Safari
-    line-height: 44px;
-    padding: 0;
-    width: 36px;
-    height: 36px;
-
-    &:disabled {
-      background-color: transparent;
-      border: 0;
-    }
-  }
-
-  &-icon-only-rev {
-    color: #fff;
-
-    i,
-    svg * {
-      color: #fff;
-    }
-    &:disabled {
-      color: $disabled-reversed-no-bg-btn-txt;
-
-      i,
-      svg * {
-        color: $disabled-reversed-no-bg-btn-txt;
-        fill: $disabled-reversed-no-bg-btn-txt;
-      }
-    }
-  }
-
-  &-icon-only-link {
-    color: colors.$txt-link;
-  }
-
-  &.lui-button-sm {
-    line-height: 30px;
-    padding: 0 spacing.$unit-sm;
-    font-size: rem(14px);
-
-    &.lui-button-icon {
-      padding: 0 spacing.$unit-sm 0 12px;
-
-      i,
-      .LuiIcon {
-        margin: 0 spacing.$unit-xs 0 0;
-        font-size: 1.3rem;
-      }
-    }
-
-    &.lui-button-icon-right {
-      padding: 0 12px 0 spacing.$unit-sm;
-
-      i,
-      .LuiIcon {
-        margin: 0 0 0 spacing.$unit-xs;
-        font-size: 1.3rem;
-      }
-    }
-
-    &.lui-button-reversed-no-bg {
-      i,
-      .LuiIcon {
-        font-size: 1.8rem;
-        top: 9px !important;
-      }
-    }
-  }
-
-  // medium is not defined as that is the default button size
-  &.lui-button-lg {
-    // height: 50px;
-    line-height: 50px;
-    padding: 0 spacing.$unit-lg;
-    font-size: rem(18px);
-
-    &.lui-button-icon {
-      padding: 0 spacing.$unit-lg 0 28px;
-
-      i {
-        margin: 0 spacing.$unit-sm 0 0;
-      }
-    }
-
-    &.lui-button-icon-right {
-      padding: 0 28px 0 spacing.$unit-lg;
-
-      i {
-        margin: 0 0 0 spacing.$unit-sm;
-      }
-    }
-  }
-
-  // If the buttons appear next to each other, then add a margin
-  + .lui-button {
-    margin-left: spacing.$unit-xs;
-  }
-
-  + a.lui-button {
-    margin-left: spacing.$unit-xs;
-  }
-}
-
-.lui-button-group {
-  display: flex; // Whitespace was appearing between buttons, this fixes it
-  align-content: stretch; //fill the horiztonal space on mobile
-  flex-direction: row;
-
-  .lui-button-wrapper {
-    flex: 1 1 0;
-
-    &:first-child button {
-      border-left: 1px solid colors.$brand-primary;
-      border-top-left-radius: misc.$borderRadius;
-      border-bottom-left-radius: misc.$borderRadius;
-    }
-
-    &:last-child button {
-      border-top-right-radius: misc.$borderRadius;
-      border-bottom-right-radius: misc.$borderRadius;
-    }
-  }
-
-  &.lui-input-error {
-    border-radius: misc.$borderRadius * 1.5; // Makes the outter border hug the inner border and avoids white space
-    // Other error styling is inherited from checkbox & radio groups, so head over there for declarations
-  }
-
-  &-text-sizing {
-    // display: block; //remove flexbox so they can just be inline buttons. Flexbox wasn't allowing the buttons to be sized by their content (flex shrink made a mess of things)
-    display: inline-block;
-    font-size: 0;
-
-    .lui-button-wrapper {
-      width: auto;
-      float: left; // have gone for floating blocks, as inline-blocks had white space and the usual CSS tricks like font-size: 0 didn't work. So done it the old school way
-      .lui-button {
-        @include breakpoint(md) {
-          padding: 0 spacing.$unit-sm;
-        }
-        @include breakpoint(lg) {
-          padding: 0 spacing.$unit-lg;
-        }
-      }
-    }
-  }
-
-  .lui-button {
-    padding: 0 spacing.$unit-xs;
-    background-color: #fff;
-    border-radius: 0;
-    border: 1px solid colors.$brand-primary;
-    color: colors.$brand-primary;
-    border-left: none;
-    width: 100%;
-
-    &.lui-button-active {
-      background-color: colors.$sea;
-      -moz-box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.4);
-      -webkit-box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.4);
-      box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.4);
-      color: colors.$white;
-      text-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
-    }
-
-    &:hover {
-      background: colors.$sea;
-      cursor: pointer;
-      color: colors.$white;
-    }
-
-    &:focus {
-      outline: 2px solid colors.$brand-primary;
-      // make sure the button sits above the others so the outline is not cut off on focus
-      position: relative;
-    }
-  }
-
-  &--radio {
-    margin-top: spacing.$unit-md;
-
-    .lui-radio-container {
-      margin-top: spacing.$unit-sm; // 12px
-    }
-
-    @include breakpoint(md) {
-      .LuiDeprecatedForms & {
-        display: grid;
-      }
-
-      // add a 24 column grid so you have more control over the size of the buttons at various breakpoints
-      display: grid;
-      grid-template-columns: repeat(24, 1fr);
-      // Set the font size to 0 so no spaces appear between the labels
-      font-size: 0 !important;
-
-      input {
-        // hide the input from view, but not from screenreaders to ensure the element can still get focus when tabbing through
-        @include ScreenReadersOnly();
-
-        &:checked + label {
-          background-color: colors.$sea;
-          box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.5);
-          color: colors.$white;
-          text-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
-
-          .LuiDeprecatedForms & {
-            color: colors.$white;
-          }
-        }
-
-        &:checked:disabled + label,
-        &:disabled:checked + label:hover {
-          background-color: colors.$gray;
-          color: colors.$white;
-
-          .LuiDeprecatedForms & {
-            color: colors.$white;
-          }
-        }
-
-        &:focus:not([disabled]) + label {
-          color: colors.$white;
-          background: colors.$sea;
-          cursor: pointer;
-        }
-
-        &:disabled + label {
-          border-color: colors.$gray !important; // imp! for overwrite RH border styling
-        }
-
-        &:disabled + label:hover {
-          background-color: colors.$white;
-          cursor: default;
-        }
-      }
-    }
-
-    label {
-      margin-left: spacing.$unit-xs; // 8px
-      // label to look like buttons on larger screens
-      @include breakpoint(md) {
-        display: inline-block;
-        // copied Lui button styles based on secondary button styling
-        //@include fonts.font-bold;
-        // Messy override to prevent the bold font from being overridden by the normal radio label styles
-        font-family: fonts.$base-font--combined;
-        font-weight: 700 !important;
-        line-height: 40px;
-        transition: background-color 0.3s, color 0.3s, height 0.3s, border 0.3s;
-        text-align: center;
-        border: 2px solid colors.$sea;
-        color: colors.$sea;
-        border-radius: 0;
-        border-right: none;
-        width: 100%;
-        margin: 0;
-
-        &:hover {
-          color: colors.$white;
-          background: colors.$sea;
-          cursor: pointer;
-        }
-      }
-    }
-  }
-}
-
-.LuiDeprecatedForms {
-  .radio-btn-group-pair {
-    // add a 24 column grid so you have more control over the size of the buttons at various breakpoints
-    display: grid;
-    grid-template-columns: repeat(24, 1fr);
-    // Set the font size to 0 so no spaces appear between the labels
-    font-size: 0 !important;
-
-    input {
-      // hide the input from view, but not from screenreaders to ensure the element can still get focus when tabbing through
-      @include ScreenReadersOnly();
-
-      &:checked + label {
-        background-color: colors.$sea;
-        box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.5);
-        color: colors.$white;
-        text-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
-      }
-
-      &:focus + label {
-        color: colors.$white;
-        background: colors.$sea;
-        cursor: pointer;
-      }
-    }
-
-    label {
-      // label to look like buttons on larger screens
-      display: inline-block;
-      // copied Lui button styles based on secondary button styling
-      @include fonts.font-bold;
-      line-height: 40px;
-      transition: background-color 0.3s, color 0.3s, height 0.3s, border 0.3s;
-      text-align: center;
-      border: 2px solid colors.$sea;
-      color: colors.$sea;
-      border-radius: 0;
-      border-right: none;
-      width: 100%;
-      margin: 0;
-
-      &:hover {
-        color: colors.$white;
-        background: colors.$sea;
-        cursor: pointer;
-      }
-    }
-
-    .grid-cell-1 {
-      grid-column: span 12;
-
-      label {
-        border-radius: spacing.$unit-xs 0 0 spacing.$unit-xs;
-      }
-    }
-
-    .grid-cell-2 {
-      grid-column: span 12;
-
-      label {
-        border-right: 2px solid colors.$sea;
-        border-radius: 0 spacing.$unit-xs spacing.$unit-xs 0;
-      }
-    }
-
-    @include breakpoint(md) {
-      .grid-cell-1 {
-        grid-column: span 6;
-      }
-
-      .grid-cell-2 {
-        grid-column: span 6;
-      }
-    }
-    @include breakpoint(lg) {
-      .grid-cell-1 {
-        grid-column: span 5;
-      }
-
-      .grid-cell-2 {
-        grid-column: span 5;
-      }
-    }
-    @include breakpoint(xl) {
-      .grid-cell-1 {
-        grid-column: span 4;
-      }
-
-      .grid-cell-2 {
-        grid-column: span 4;
-      }
-    }
-  }
-}
-
-.exampleOfGridForButtons {
-  @include breakpoint(md) {
-    .grid-cell-1 {
-      grid-column: span 3;
-
-      label {
-        border-radius: spacing.$unit-xs 0 0 spacing.$unit-xs;
-      }
-    }
-
-    .grid-cell-2 {
-      grid-column: span 5;
-    }
-
-    .grid-cell-3 {
-      grid-column: span 8;
-    }
-
-    .grid-cell-4 {
-      grid-column: span 8;
-
-      label {
-        border-right: 2px solid colors.$sea;
-        border-radius: 0 spacing.$unit-xs spacing.$unit-xs 0;
-      }
-    }
-  }
-  @include breakpoint(lg) {
-    .grid-cell-1 {
-      grid-column: span 4;
-    }
-
-    .grid-cell-2 {
-      grid-column: span 5;
-    }
-
-    .grid-cell-3 {
-      grid-column: span 5;
-    }
-
-    .grid-cell-4 {
-      grid-column: span 5;
-    }
-  }
-  @include breakpoint(xl) {
-    .grid-cell-1 {
-      grid-column: span 3;
-    }
-
-    .grid-cell-2 {
-      grid-column: span 4;
-    }
-
-    .grid-cell-3 {
-      grid-column: span 4;
-    }
-
-    .grid-cell-4 {
-      grid-column: span 4;
-    }
-  }
-}