<!-- Standard -->
<button class="icon-button" id="icon-button-9d57" type="button">
<svg class="icon icon--user" id="icon-3d34" viewBox="0 0 200 200" role="img" aria-labelledby="title-icon-3d34">
<title id="title-icon-3d34">Ein Icon mit Text</title>
<use xlink:href="#icon-user"></use>
</svg>
</button>
<!-- Rot -->
<button class="icon-button icon-button--red" id="icon-button-f97a" type="button">
<svg class="icon icon--user" id="icon-ae72" viewBox="0 0 200 200" role="img" aria-labelledby="title-icon-ae72">
<title id="title-icon-ae72">Ein Icon mit Text</title>
<use xlink:href="#icon-user"></use>
</svg>
</button>
<!-- Blau -->
<button class="icon-button icon-button--blue" id="icon-button-6bfa" type="button">
<svg class="icon icon--user" id="icon-081e" viewBox="0 0 200 200" role="img" aria-labelledby="title-icon-081e">
<title id="title-icon-081e">Ein Icon mit Text</title>
<use xlink:href="#icon-user"></use>
</svg>
</button>
<!-- Facebook -->
<button class="icon-button icon-button--facebook" id="icon-button-ea9c" type="button">
<svg class="icon icon--facebook" id="icon-8bbe" viewBox="0 0 200 200" role="img" aria-labelledby="title-icon-8bbe">
<title id="title-icon-8bbe">Facebook</title>
<use xlink:href="#icon-facebook"></use>
</svg>
</button>
<!-- Twitter -->
<button class="icon-button icon-button--twitter" id="icon-button-e26e" type="button">
<svg class="icon icon--twitter" id="icon-9e6e" viewBox="0 0 200 200" role="img" aria-labelledby="title-icon-9e6e">
<title id="title-icon-9e6e">Twitter</title>
<use xlink:href="#icon-twitter"></use>
</svg>
</button>
<!-- Google Plus -->
<button class="icon-button icon-button--google-plus" id="icon-button-618d" type="button">
<svg class="icon icon--google-plus" id="icon-078d" viewBox="0 0 200 200" role="img" aria-labelledby="title-icon-078d">
<title id="title-icon-078d">Google Plus</title>
<use xlink:href="#icon-google-plus"></use>
</svg>
</button>
<!-- YouTube -->
<button class="icon-button icon-button--youtube" id="icon-button-9bbe" type="button">
<svg class="icon icon--youtube" id="icon-d8d7" viewBox="0 0 200 200" role="img" aria-labelledby="title-icon-d8d7">
<title id="title-icon-d8d7">YouTube</title>
<use xlink:href="#icon-youtube"></use>
</svg>
</button>
<!-- Xing -->
<button class="icon-button icon-button--xing" id="icon-button-19fc" type="button">
<svg class="icon icon--xing" id="icon-2402" viewBox="0 0 200 200" role="img" aria-labelledby="title-icon-2402">
<title id="title-icon-2402">Xing</title>
<use xlink:href="#icon-xing"></use>
</svg>
</button>
<!-- Instagram -->
<button class="icon-button icon-button--instagram" id="icon-button-4d4d" type="button">
<svg class="icon icon--instagram" id="icon-62dc" viewBox="0 0 200 200" role="img" aria-labelledby="title-icon-62dc">
<title id="title-icon-62dc">Instagram</title>
<use xlink:href="#icon-instagram"></use>
</svg>
</button>
<!-- LinkedIn -->
<button class="icon-button icon-button--linkedin" id="icon-button-0e74" type="button">
<svg class="icon icon--linkedin" id="icon-71e4" viewBox="0 0 200 200" role="img" aria-labelledby="title-icon-71e4">
<title id="title-icon-71e4">LinkedIn</title>
<use xlink:href="#icon-linkedin"></use>
</svg>
</button>
<!-- Funktions-Button -->
<button class="icon-button icon-button--functional" id="icon-button-7569" type="button">
<svg class="icon icon--share" id="icon-4c28" viewBox="0 0 200 200" role="img" aria-labelledby="title-icon-4c28">
<title id="title-icon-4c28">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"
}
// 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%);
}
}
}
}
There are no notes for this item.