hkk Frontend 2017

Button: Blau (Inaktiv) 

<a class="button button--blue button--inactive" id="button-ac94" href="#">Das ist ein Button.
</a>
 
-
  //- Prepare attr object
  attr = attr || {};
  attr.class = classList(attr.class);
  attr.id = id || attr.id || `button-${randomString()}`;

  //- Tag
  tag = link ? 'a' : 'button';

  //- Process options
  if (color || modifier) {
    attr.class.push(`button--${color || modifier}`);
  }

  if (outline) {
    attr.class.push('button--outline');
  }

  if (transparent) {
    attr.class.push('button--transparent');
  }

  if (inactive) {
    attr.class.push('button--inactive');
  }

  if (link) {
    attr.href = link;
  } else {
    attr.type = submit ? 'submit' : 'button';
  }

  // Icon only
  if (!text && icon) {
    attr.class.push('button--icon');
  }

//- Render atom
#{tag}.button&attributes(attr)
  if icon
    != include('@icon', {icon, attr: {class: 'button__icon'}})

  | #{content || text}

  if iconAfter
    != include('@icon', {icon: iconAfter, attr: {class: 'button__icon button__icon--after'}})
 
{
  "text": "Das ist ein Button.",
  "modifier": "blue",
  "link": "#",
  "inactive": true
}
  • Content: 
    // Default button
.button {
  background-color: $color-steelgrey-dark;
  border: 2px solid transparent;
  border-radius: 3px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1;
  margin: 0 auto;
  max-width: 100%;
  padding: calc(3.1rem / 2 - 2px) calc(3rem - 2px);
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition-duration: $default-transition-duration;
  transition-property: background-color, color, border-color, text-decoration;
  user-select: none;
  width: auto;

  // If buttons are grouped, add some spacing between them
  & + & {
    margin-left: $spacer;
  }

  // Default focus, hover
  &:hover,
  &:focus {
    background-color: $color-steelgrey-xdark;
    text-decoration: underline;
  }
}

// Simple
.button--simple {
  padding: calc(1.8rem / 2 - 2px) calc(1.5rem - 2px);
  text-transform: none;
}

// Colors
.button--red {
  background-color: $color-red;

  &:focus,
  &:hover {
    background-color: $color-red-dark;
  }

  &.button--outline {
    background-color: #fff;
    border-color: $color-red;
    color: $color-red;
  }

  &.button--outline:hover,
  &.button--outline:focus, {
    background-color: $color-red;
    color: #fff;
  }
}

.button--blue {
  background-color: $color-blue-light;

  &:focus,
  &:hover {
    background-color: $color-blue;
  }

  &.button--outline {
    background-color: #fff;
    border-color: $color-blue-light;
    color: $color-blue-light;
  }

  &.button--outline:hover,
  &.button--outline:focus, {
    background-color: $color-blue-light;
    color: #fff;
  }

  &.button--transparent {
    background-color: transparent;
    border-color: $color-blue-light;
    color: $color-blue-light;
  }

  &.button--transparent:focus,
  &.button--transparent:hover {
    background-color: $color-blue-light;
    color: #fff;
  }

  &.button--inactive {
    background-color: $color-steelgrey-dark;
    color: #fff;
    pointer-events: none;
  }
}

.button--white-red {
  background-color: #fff;
  color: $color-red;

  &:focus,
  &:hover {
    background-color: #fff;
  }

  &.button--outline {
    background-color: $color-red;
    border-color: #fff;
    color: #fff;
  }

  &.button--outline:hover,
  &.button--outline:focus, {
    background-color: #fff;
    color: $color-red;
  }
}

.button--white-blue {
  background-color: #fff;
  color: $color-blue;

  &:focus,
  &:hover {
    background-color: $color-blue-light;
    color: #fff;
  }

  &.button--outline {
    background-color: $color-blue;
    border-color: #fff;
    color: #fff;
  }

  &.button--outline:hover,
  &.button--outline:focus, {
    background-color: #fff;
    color: $color-blue;
  }
}

.button--icon {
  padding: calc(1.5rem - 2px);

  .button__icon {
    margin: 0;
  }
}

.button__icon {
  margin-right: 1rem;
}

.button__icon--after {
  margin-left: 1rem;
  margin-right: 0;
}
  • URL: /components/raw/button/button.scss
  • Filesystem Path: src/components/atoms/button/button.scss
  • Size: 2.9 KB

There are no notes for this item.