JezK

Edit File: buttons.less

// MIXINS
.tds-s-btn() {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background-color: #0489FC;
  min-width: 100px;
  padding: 14px 24px 16px;
  font-size: 1em;
  line-height: 1;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  color: #fff;
  border: 0;
  border-radius: 5px;
  outline: 3px solid transparent;
  transition: background-color .2s ease-in-out, color .2s ease-in-out, border-color .2s ease-in-out, outline-color .2s ease-in-out;
  -webkit-appearance: none;
  cursor: pointer;

// Button icon
  svg {
    position: relative;
    width: .9em;
    height: auto;
    
    &:not(:last-child) {
      margin-right: .5em;
    }
  }

// Button hover & active states
  &:hover,
  &:active {
    background-color: #152BF7;
  }

// Button active states
  &:active:not(:disabled) {
    outline-color: rgba(21, 43, 247, .2);
  }

// Button disabled state
  &:disabled {
    background-color: #9ACFFD;
    pointer-events: none;
  }
}

// --------
// -- BUTTONS
// --------
// Default button
.tds-s-btn {
  .tds-s-btn();

// Button saving state
  &.tds-s-btn-saving {
    &:after {
      content: '';
      position: relative;
      width: 12px;
      height: 12px;
      margin-left: 15px;
      border: 1px solid #fff;
      border-left-color: transparent;
      border-right-color: transparent;
      border-radius: 50%;
      -webkit-animation: fullspin 1s infinite ease-out;
      animation: fullspin 1s infinite ease-out;
      z-index: 2;
      transition: border-top-color .2s ease-in-out, border-bottom-color .2s ease-in-out;
    }
  }

// Button saved state
  &.tds-s-btn-saved {
    background-color: #9ACFFD;
    pointer-events: none;

&:after {
      content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="12" height="8.875" viewBox="0 0 12 8.875"><path d="M7.125,13.875a1,1,0,0,1-.707-.293L3.293,10.457A1,1,0,0,1,4.707,9.043l2.418,2.418,6.168-6.168a1,1,0,0,1,1.414,1.414L7.832,13.582A1,1,0,0,1,7.125,13.875Z" transform="translate(-3 -5)" fill="%23fff"/></svg>');
      width: 14px;
      height: auto;
      border: 0;
      -webkit-animation: none;
      animation: none;
    }
  }
}

// Light button
.tds-s-btn-light {
  background-color: #E5F3FF;
  color: #152BF7;

// Button hover & active states
  &:hover,
  &:active {
    background-color: #152BF7;
    color: #E5F3FF;
  }

// Button disabled state
  &:disabled {
    background-color: #eef4fd;
    color: #6c79fa;
  }

// Button saving state
  &.tds-s-btn-saving {
    &:after {
      border-top-color: #152BF7;
      border-bottom-color: #152BF7;
    }

&:hover {
      &:after {
        border-top-color: #fff;
        border-bottom-color: #fff;
      }
    }
  }

// Button saved state
  &.tds-s-btn-saved {
    background-color: #eef4fd;
    color: #6c79fa;

// Grey button
.tds-s-btn-grey {
  background-color: #f3f3f3;
  color: #1D2327;

// Button hover & active states
  &:hover,
  &:active {
    background-color: #EBEBEB;
  }

// Button disabled state
  &:disabled {
    background-color: #F8F8F8;
    color: #828588;
  }

// Button saving state
  &.tds-s-btn-saving {
    &:after {
      border-top-color: #1D2327;
      border-bottom-color: #1D2327;
    }
  }

// Button saved state
  &.tds-s-btn-saved {
    background-color: #F8F8F8;
    color: #828588;

// Red button
.tds-s-btn-red {
  background-color: #FF3838;

// Button hover & active states
  &:hover,
  &:active {
    background-color: #E20000;
  }

// Button active states
  &:active:not(:disabled) {
    outline-color: rgba(226, 0, 0, .15);
  }

// Button disabled state
  &:disabled,
  [disabled="disabled"] {
    background-color: #FFA4A4;
  }

// Button saved state
  &.tds-s-btn-saved {
    background-color: #FFA4A4;
  }
}

// Light red button
.tds-s-btn-light-red {
  background-color: #fde7e7;
  color: #E20000;

svg {
    fill: #E20000;
  }

// Button hover & active states
  &:hover,
  &:active {
    background-color: #FF3838;
    color: #fff;

svg {
      fill: #fff;
    }
  }

// Button active states
  &:active:not(:disabled) {
    outline-color: rgba(226, 0, 0, .10);
  }

// Button disabled state
  &:disabled,
  [disabled="disabled"]  {
    background-color: #fff1f1;
    color: #e76a6a;

svg {
      fill: #e76a6a;
    }
  }

// Button saved state
  &.tds-s-btn-saved {
    background-color: #fff1f1;
  }
}

// Hollow button
.tds-s-btn-hollow {
  min-width: 96px;
  padding: 12px 22px 14px;
  background-color: transparent;
  color: #444;
  border: 2px solid #A8AAB8;

// Button hover & active states
  &:hover,
  &:active {
    background-color: transparent;
    color: #0489FC;
    border-color: #0489FC;
  }

// Button active states
  &:active:not(:disabled) {
    outline-color: rgba(4, 137, 252, .2);
  }

// Button disabled state
  &:disabled {
    background-color: transparent;
    color: #B3B3B3;
    border-color: #D3D4DB;
  }

// Button saving state
  &.tds-s-btn-saving {
    &:after {
      border-top-color: #444;
      border-bottom-color: #444;
    }

&:hover {
      &:after {
        border-top-color: #0489FC;
        border-bottom-color: #0489FC;
      }
    }
  }

// Button saved state
  &.tds-s-btn-saved {
    background-color: transparent;
    color: #B3B3B3;

// Button extra small
.tds-s-btn-xsm {
  min-width: 0;
  padding: 5px 10px 7px;
  font-size: .857em;

// Button icon
  svg {
    top: 1px;
    width: .95em;
  }

// Button saving state
  &.tds-s-btn-saving {
    &:after {
      width: 8px;
      height: 8px;
      margin-left: 12px;
    }

&:not(.tds-s-btn-saved) {
      &:after {
        top: 1px;
      }
    }
  }

// Button saved state
  &.tds-s-btn-saved {
    &:after {
      content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="9" height="6.5" viewBox="0 0 10 7.5"><path d="M6.5,12.5a1,1,0,0,1-.707-.293l-2.5-2.5A1,1,0,0,1,4.707,8.293L6.5,10.086l4.793-4.793a1,1,0,0,1,1.414,1.414l-5.5,5.5A1,1,0,0,1,6.5,12.5Z" transform="translate(-3 -5)" fill="%23fff" opacity="0.8"/></svg>');
      top: -3px;
    }
  }

// Light
  &.tds-s-btn-light {
    // Button saved state
    &.tds-s-btn-saved {
      &:after {
        content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="9" height="6.5" viewBox="0 0 10 7.5"><path d="M6.5,12.5a1,1,0,0,1-.707-.293l-2.5-2.5A1,1,0,0,1,4.707,8.293L6.5,10.086l4.793-4.793a1,1,0,0,1,1.414,1.414l-5.5,5.5A1,1,0,0,1,6.5,12.5Z" transform="translate(-3 -5)" fill="%236371fd" opacity="0.8"/></svg>');
      }
    }
  }

// Grey
  &.tds-s-btn-grey {
    // Button saved state
    &.tds-s-btn-saved {
      &:after {
        content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="9" height="6.5" viewBox="0 0 10 7.5"><path d="M6.5,12.5a1,1,0,0,1-.707-.293l-2.5-2.5A1,1,0,0,1,4.707,8.293L6.5,10.086l4.793-4.793a1,1,0,0,1,1.414,1.414l-5.5,5.5A1,1,0,0,1,6.5,12.5Z" transform="translate(-3 -5)" fill="%23828588" opacity="0.8"/></svg>');
      }
    }
  }

// Hollow
  &.tds-s-btn-hollow {
    min-width: 0;
    padding: 3px 8px 5px;

// Button saved state
    &.tds-s-btn-saved {
      &:after {
        content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="9" height="6.5" viewBox="0 0 10 7.5"><path d="M6.5,12.5a1,1,0,0,1-.707-.293l-2.5-2.5A1,1,0,0,1,4.707,8.293L6.5,10.086l4.793-4.793a1,1,0,0,1,1.414,1.414l-5.5,5.5A1,1,0,0,1,6.5,12.5Z" transform="translate(-3 -5)" fill="%23B3B3B3" opacity="0.8"/></svg>');
      }
    }
  }
}

// Button small
.tds-s-btn-sm {
  min-width: 76px;
  padding: 10px 19px 12px;
  font-size: .929em;

// Button icon
  svg {
    top: 1px;
  }

// Button saving state
  &.tds-s-btn-saving {
    &:after {
      width: 11px;
      height: 11px;
      margin-left: 13px;
    }

&:not(.tds-s-btn-saved) {
      &:after {
        top: 1px;
      }
    }
  }

// Button saved state
  &.tds-s-btn-saved {
    &:after {
      content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="10" height="7.5" viewBox="0 0 10 7.5"><path d="M6.5,12.5a1,1,0,0,1-.707-.293l-2.5-2.5A1,1,0,0,1,4.707,8.293L6.5,10.086l4.793-4.793a1,1,0,0,1,1.414,1.414l-5.5,5.5A1,1,0,0,1,6.5,12.5Z" transform="translate(-3 -5)" fill="%23fff" opacity="0.8"/></svg>');
      top: -2px;
    }
  }

// Light
  &.tds-s-btn-light {
    // Button saved state
    &.tds-s-btn-saved {
      &:after {
        content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="10" height="7.5" viewBox="0 0 10 7.5"><path d="M6.5,12.5a1,1,0,0,1-.707-.293l-2.5-2.5A1,1,0,0,1,4.707,8.293L6.5,10.086l4.793-4.793a1,1,0,0,1,1.414,1.414l-5.5,5.5A1,1,0,0,1,6.5,12.5Z" transform="translate(-3 -5)" fill="%236371fd" opacity="0.8"/></svg>');
      }
    }
  }

// Grey
  &.tds-s-btn-grey {
    // Button saved state
    &.tds-s-btn-saved {
      &:after {
        content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="10" height="7.5" viewBox="0 0 10 7.5"><path d="M6.5,12.5a1,1,0,0,1-.707-.293l-2.5-2.5A1,1,0,0,1,4.707,8.293L6.5,10.086l4.793-4.793a1,1,0,0,1,1.414,1.414l-5.5,5.5A1,1,0,0,1,6.5,12.5Z" transform="translate(-3 -5)" fill="%23828588" opacity="0.8"/></svg>');
      }
    }
  }

// Hollow
  &.tds-s-btn-hollow {
    min-width: 72px;
    padding: 8px 17px 10px;

// Button saved state
    &.tds-s-btn-saved {
      &:after {
        content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="10" height="7.5" viewBox="0 0 10 7.5"><path d="M6.5,12.5a1,1,0,0,1-.707-.293l-2.5-2.5A1,1,0,0,1,4.707,8.293L6.5,10.086l4.793-4.793a1,1,0,0,1,1.414,1.414l-5.5,5.5A1,1,0,0,1,6.5,12.5Z" transform="translate(-3 -5)" fill="%23B3B3B3" opacity="0.8"/></svg>');
      }
    }
  }
}