lucas.mathieu/cachet-docker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Back to flat buttons

Browse Source
This commit is contained in:
James Brooks
2016-08-10 20:37:20 +01:00
parent be9da7c1d9
commit 4a81df2c41
1 changed files with 27 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
resources/assets/sass/modules/_btns.scss vendored
View File

@@ -1,17 +1,14 @@
@mixin pretty-buttons($color, $background, $text-shadow: none) {
color: $color;
@include gradient-vertical(lighten($background, 5%), darken($background, 5%), 0%, 100%);
border-color: darken($background, 10%);
border-bottom-color: darken($background, 20%);
text-shadow: $text-shadow;
@include box-shadow(inset 0 1px 0 rgba(255, 255, 255, .1));
background: $background;
border: solid 1px darken($background, 10%);
&:hover,
&:focus,
&:active,
&.active {
@include gradient-vertical(darken($background, 0), darken($background, 10%), 0%, 100%);
border-color: darken($background, 20%);
background: darken($background, 5%);
border-color: darken($background, 10%);
color: $color;
}
@@ -23,34 +20,34 @@
&:focus,
&:active,
&.active {
background-color: $background;
border-color: darken($background, 5%);
background-color: lighten($background, 5%);
border-color: darken($background, 10%);
}
}
}
.btn {
&.btn-default {
@include pretty-buttons($btn-default-color, $btn-default-bg);
}
&.btn-primary {
@include pretty-buttons($btn-primary-color, $btn-primary-bg);
}
&.btn-success {
@include pretty-buttons($btn-success-color, $btn-success-bg);
}
&.btn-info {
@include pretty-buttons($btn-info-color, $btn-info-bg);
}
&.btn-warning {
@include pretty-buttons($btn-warning-color, $btn-warning-bg);
}
&.btn-danger {
@include pretty-buttons($btn-danger-color, $btn-danger-bg);
}
&.btn-inverse {
@include pretty-buttons(white, #474949);
}
&.btn-default {
@include pretty-buttons($btn-default-color, $btn-default-bg);
}
&.btn-primary {
@include pretty-buttons($btn-primary-color, $btn-primary-bg);
}
&.btn-success {
@include pretty-buttons($btn-success-color, $btn-success-bg);
}
&.btn-info {
@include pretty-buttons($btn-info-color, $btn-info-bg);
}
&.btn-warning {
@include pretty-buttons($btn-warning-color, $btn-warning-bg);
}
&.btn-danger {
@include pretty-buttons($btn-danger-color, $btn-danger-bg);
}
&.btn-inverse {
@include pretty-buttons(white, #474949);
}
}
.btn-outline {