165 lines
2.9 KiB
SCSS
165 lines
2.9 KiB
SCSS
@import "variable"; // variable
|
|
|
|
.btn-default{
|
|
background: $default;
|
|
border-color: $default;
|
|
color: $white;
|
|
&:hover,&:focus,&.active{
|
|
background: darken($default,10%);
|
|
border-color: $default;
|
|
color: $white;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
.btn-primary {
|
|
background: $primary;
|
|
border-color: $primary;
|
|
color: $white;
|
|
&:hover,
|
|
&:focus,
|
|
&.active {
|
|
background: darken($primary, 10%);
|
|
border-color: $primary;
|
|
color: $white;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
.btn-success {
|
|
background: $success;
|
|
border-color: $success;
|
|
color: $white;
|
|
&:hover,
|
|
&:focus,
|
|
&.active {
|
|
background: darken($success, 10%);
|
|
border-color: $success;
|
|
color: $white;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
.btn-info {
|
|
background: $info;
|
|
border-color: $info;
|
|
color: $white;
|
|
&:hover,
|
|
&:focus,
|
|
&.active {
|
|
background: darken($info, 10%);
|
|
border-color: $info;
|
|
color: $white;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
.btn-warning {
|
|
background: $warning;
|
|
border-color: $warning;
|
|
color: $white;
|
|
&:hover,
|
|
&:focus,
|
|
&.active {
|
|
background: darken($warning, 10%);
|
|
border-color: $warning;
|
|
color: $white;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
.btn-danger {
|
|
background: $danger;
|
|
border-color: $danger;
|
|
color: $white;
|
|
&:hover,
|
|
&:focus,
|
|
&.active {
|
|
background: darken($danger, 10%);
|
|
border-color: $danger;
|
|
color: $white;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
.btn-pink {
|
|
background: $pink;
|
|
border-color: $pink;
|
|
color: $white;
|
|
&:hover,
|
|
&:focus,
|
|
&.active {
|
|
background: darken($pink, 10%);
|
|
border-color: $pink;
|
|
color: $white;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
.btn-dark {
|
|
background: $dark;
|
|
border-color: $dark;
|
|
color: $white;
|
|
&:hover,
|
|
&:focus,
|
|
&.active {
|
|
background: darken($dark, 10%);
|
|
border-color: $dark;
|
|
color: $white;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
.btn-addon {
|
|
position: relative;
|
|
padding-left: 40px;
|
|
i {
|
|
background: rgba(0, 0, 0, 0.1);
|
|
left: -1px;
|
|
margin-right: 20px;
|
|
padding: 10px;
|
|
position: absolute;
|
|
top: -1px;
|
|
}
|
|
}
|
|
|
|
.btn-addon.btn-lg {
|
|
padding-left: 60px;
|
|
i {
|
|
padding: 14px;
|
|
}
|
|
}
|
|
|
|
.btn-addon.btn-md {
|
|
padding-left: 45px;
|
|
i {
|
|
padding: 10px;
|
|
}
|
|
}
|
|
|
|
.btn-addon.btn-sm {
|
|
padding-left: 40px;
|
|
i {
|
|
padding: 9px;
|
|
}
|
|
}
|
|
|
|
.btn-addon.btn-xs {
|
|
padding-left: 25px;
|
|
i {
|
|
// font-size: 8px;
|
|
padding: 5px;
|
|
}
|
|
}
|
|
|
|
.btn-rounded {
|
|
border-radius: 100px;
|
|
}
|
|
|
|
.btn-outline {
|
|
background: transparent;
|
|
color: $text;
|
|
}
|
|
|
|
.btn-flat {
|
|
border-radius: 0px;
|
|
} |