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
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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|