You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

156 lines
3.2 KiB

/* ==========================================================================
Buttons
========================================================================== */
/*
Default button .btn
========================================================================== */
.btn {
display: inline-block;
padding: 8px 20px;
@include font-size(14);
font-family: $alt-font;
background-color: $primary-color;
color: $white;
text-decoration: none;
border: 0 !important;
border-radius: 10 * $border-radius;
@include transition(background 0.2s, border 0.2s);
&:hover {
color: $white;
background-color: lighten($primary-color, 10);
}
&:active {
// move button slightly on click
@include transform(translateY(1px));
}
}
/*
Inverse button .btn-inverse
========================================================================== */
.btn-inverse {
@extend .btn;
background-color: $white;
color: $text-color;
&:visited,
&:active {
color: $text-color;
}
&:hover {
color: $white;
background-color: $text-color;
}
}
/*
Info button .btn-info
========================================================================== */
.btn-info {
@extend .btn;
background-color: $info-color;
color: $white;
&:visited {
color: $white;
}
&:hover {
background-color: lighten($info-color, 10);
}
}
/*
Warning button .btn-warning
========================================================================== */
.btn-warning {
@extend .btn;
background-color: $warning-color;
color: $white;
&:visited {
color: $white;
}
&:hover {
background-color: lighten($warning-color ,10);
}
}
/*
Success button .btn-success
========================================================================== */
.btn-success {
@extend .btn;
background-color: $success-color;
color: $white;
&:visited {
color: $white;
}
&:hover {
background-color:lighten($success-color, 10);
}
}
/*
Danger button .btn-danger
========================================================================== */
.btn-danger {
@extend .btn;
background-color: $danger-color;
color: $white;
&:visited {
color: $white;
}
&:hover {
background-color: lighten($danger-color, 10);
}
}
/*
Social media buttons
========================================================================== */
.btn-social {
$social:
(facebook, $facebook-color),
(flickr, $flickr-color),
(foursquare, $foursquare-color),
(google-plus, $google-plus-color),
(instagram, $instagram-color),
(linkedin, $linkedin-color),
(pinterest, $pinterest-color),
(rss, $rss-color),
(tumblr, $tumblr-color),
(twitter, $twitter-color),
(vimeo, $vimeo-color),
(youtube, $youtube-color);
@extend .btn-inverse;
color: $text-color !important;
&:visited,
&:active {
color: $text-color;
}
border: 1px solid $border-color !important;
@each $socialnetwork, $color in $social {
i.fa-#{$socialnetwork} {
color: $color;
}
}
&:hover {
color: $white !important;
}
@each $socialnetwork, $color in $social {
&.#{$socialnetwork}:hover {
background: $color;
border-color: $color;
@each $socialnetwork, $color in $social {
i.fa-#{$socialnetwork} {
color: $white;
}
}
}
}
}