<!-- Standard -->
<button class="icon-button" id="icon-button-7a92" type="button">
<svg class="icon icon--user" id="icon-7abf" viewBox="0 0 200 200" role="img" aria-labelledby="title-icon-7abf">
  <title id="title-icon-7abf">Ein Icon mit Text</title>
  <use xlink:href="#icon-user"></use>
</svg>
</button>

<!-- Rot -->
<button class="icon-button icon-button--red" id="icon-button-69e5" type="button">
<svg class="icon icon--user" id="icon-b257" viewBox="0 0 200 200" role="img" aria-labelledby="title-icon-b257">
  <title id="title-icon-b257">Ein Icon mit Text</title>
  <use xlink:href="#icon-user"></use>
</svg>
</button>

<!-- Blau -->
<button class="icon-button icon-button--blue" id="icon-button-151f" type="button">
<svg class="icon icon--user" id="icon-9d71" viewBox="0 0 200 200" role="img" aria-labelledby="title-icon-9d71">
  <title id="title-icon-9d71">Ein Icon mit Text</title>
  <use xlink:href="#icon-user"></use>
</svg>
</button>

<!-- Facebook -->
<button class="icon-button icon-button--facebook" id="icon-button-c3ab" type="button">
<svg class="icon icon--facebook" id="icon-e1e6" viewBox="0 0 200 200" role="img" aria-labelledby="title-icon-e1e6">
  <title id="title-icon-e1e6">Facebook</title>
  <use xlink:href="#icon-facebook"></use>
</svg>
</button>

<!-- Twitter -->
<button class="icon-button icon-button--twitter" id="icon-button-9a2c" type="button">
<svg class="icon icon--twitter" id="icon-9589" viewBox="0 0 200 200" role="img" aria-labelledby="title-icon-9589">
  <title id="title-icon-9589">Twitter</title>
  <use xlink:href="#icon-twitter"></use>
</svg>
</button>

<!-- Google Plus -->
<button class="icon-button icon-button--google-plus" id="icon-button-c727" type="button">
<svg class="icon icon--google-plus" id="icon-8a81" viewBox="0 0 200 200" role="img" aria-labelledby="title-icon-8a81">
  <title id="title-icon-8a81">Google Plus</title>
  <use xlink:href="#icon-google-plus"></use>
</svg>
</button>

<!-- YouTube -->
<button class="icon-button icon-button--youtube" id="icon-button-f8e1" type="button">
<svg class="icon icon--youtube" id="icon-b53f" viewBox="0 0 200 200" role="img" aria-labelledby="title-icon-b53f">
  <title id="title-icon-b53f">YouTube</title>
  <use xlink:href="#icon-youtube"></use>
</svg>
</button>

<!-- Xing -->
<button class="icon-button icon-button--xing" id="icon-button-e8cc" type="button">
<svg class="icon icon--xing" id="icon-25a9" viewBox="0 0 200 200" role="img" aria-labelledby="title-icon-25a9">
  <title id="title-icon-25a9">Xing</title>
  <use xlink:href="#icon-xing"></use>
</svg>
</button>

<!-- Instagram -->
<button class="icon-button icon-button--instagram" id="icon-button-d8bb" type="button">
<svg class="icon icon--instagram" id="icon-a035" viewBox="0 0 200 200" role="img" aria-labelledby="title-icon-a035">
  <title id="title-icon-a035">Instagram</title>
  <use xlink:href="#icon-instagram"></use>
</svg>
</button>

<!-- LinkedIn -->
<button class="icon-button icon-button--linkedin" id="icon-button-3eb3" type="button">
<svg class="icon icon--linkedin" id="icon-865b" viewBox="0 0 200 200" role="img" aria-labelledby="title-icon-865b">
  <title id="title-icon-865b">LinkedIn</title>
  <use xlink:href="#icon-linkedin"></use>
</svg>
</button>

<!-- Funktions-Button -->
<button class="icon-button icon-button--functional" id="icon-button-e998" type="button">
<svg class="icon icon--share" id="icon-a12f" viewBox="0 0 200 200" role="img" aria-labelledby="title-icon-a12f">
  <title id="title-icon-a12f">Diesen Inhalt teilen</title>
  <use xlink:href="#icon-share"></use>
</svg>
</button>

-
  //- Prepare attr object
  attr = attr || {};
  attr.class = classList(attr.class);
  attr.id = id || attr.id || `icon-button-${randomString()}`;

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

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

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

//- Render atom
#{tag}.icon-button&attributes(attr)
  != include('@icon', {icon, title: title})
/* Standard */
{
  "icon": "user",
  "title": "Ein Icon mit Text"
}

/* Rot */
{
  "icon": "user",
  "color": "red",
  "title": "Ein Icon mit Text"
}

/* Blau */
{
  "icon": "user",
  "color": "blue",
  "title": "Ein Icon mit Text"
}

/* Facebook */
{
  "icon": "facebook",
  "color": "facebook",
  "title": "Facebook"
}

/* Twitter */
{
  "icon": "twitter",
  "color": "twitter",
  "title": "Twitter"
}

/* Google Plus */
{
  "icon": "google-plus",
  "color": "google-plus",
  "title": "Google Plus"
}

/* YouTube */
{
  "icon": "youtube",
  "color": "youtube",
  "title": "YouTube"
}

/* Xing */
{
  "icon": "xing",
  "color": "xing",
  "title": "Xing"
}

/* Instagram */
{
  "icon": "instagram",
  "color": "instagram",
  "title": "Instagram"
}

/* LinkedIn */
{
  "icon": "linkedin",
  "color": "linkedin",
  "title": "LinkedIn"
}

/* Funktions-Button */
{
  "modifier": "functional",
  "icon": "share",
  "title": "Diesen Inhalt teilen"
}

  • Content:
    // Icon button settings
    $default-icon-button-size: 4.5rem;
    
    // Default icon button
    .icon-button {
      background-color: $color-steelgrey-dark;
      border-radius: 50%;
      color: #fff;
      cursor: pointer;
      display: inline-block;
      font-size: 2rem;
      height: $default-icon-button-size;
      line-height: $default-icon-button-size;
      padding: 0;
      text-align: center;
      text-decoration: none;
      transition-duration: $default-transition-duration;
      transition-property: background-color;
      user-select: none;
      width: $default-icon-button-size;
    
      // If buttons are grouped, add some spacing between them
      & + & {
        margin-left: $spacer;
      }
    
      // Default focus, hover
      &:hover,
      &:focus {
        background-color: $color-steelgrey-xdark;
      }
    }
    
    // Functional
    .icon-button--functional {
      border-radius: 0;
    }
    
    // Colors
    $default-icon-button-colors: (
      red: ($color-red, $color-red-dark),
      blue: $color-blue,
      facebook: #3b5998,
      twitter: #1da1f2,
      youtube: #cd201f,
      xing: #026466,
      google-plus: #dd4b39,
      instagram: #405de6,
      linkedin: #2867b2,
    );
    
    @each $name, $color in $default-icon-button-colors {
      .icon-button--#{$name} {
        @if type-of($color) == list {
          background-color: nth($color, 1);
        } @else {
          background-color: $color;
        }
    
        &:hover,
        &:focus {
          @if type-of($color) == list {
            background-color: nth($color, 2);
          } @else {
            background-color: darken($color, 5%);
          }
        }
      }
    }
    
  • URL: /components/raw/icon-button/icon-button.scss
  • Filesystem Path: src/components/molecules/icon-button/icon-button.scss
  • Size: 1.4 KB

There are no notes for this item.