Apollo-DEC/apollodec
Apollo-DEC/apollodec
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
204eb2e0cf
apollodec/Apollo/master/sass/partials/_buttons.scss
venbatechnologies@gmail.com d06b1c0cba status file
2017-12-07 11:31:25 +05:30

3160 lines
92 KiB
SCSS
Executable File
Raw Blame History

/* ---------------------------------------------------------------------- */
/* Buttons
/* ---------------------------------------------------------------------- */
.btn {
transition: all 0.3s ease 0s !important;
background-image: none !important;
box-shadow: none !important;
outline: none !important;
position: relative;
}
.btn:after {
content: "";
position: absolute;
transition: all 0.3s ease 0s;
z-index: -1;
}
.btn-wide {
min-width: 120px;
}
.ladda-button[data-style="contract"][data-loading] {
border-radius: 50%;
min-width: 38px !important;
overflow: hidden;
width: 38px !important;
}
.btn:hover, .btn:focus, .btn:active, .btn.active, .btn.disabled, .btn[disabled] {
box-shadow: none;
}
.btn-o {
background: none !important;
}
.btn-default {
background-color: $white;
border-color: $border-default;
color: $text-color;
&:hover {
background-color: $white;
border-color: darken($border-default, 5%);
color: $text-color !important;
}
&:active, &.active, &.active:focus, &:active:focus, &:active:hover {
background-color: #f8f8f8;
border-color: lighten($border-default, 5%);
color: darken($text-color,20%) !important;
}
&:focus {
background-color: $white;
border-color: darken($border-default, 5%);
color: darken($text-color,20%) !important;
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
background-color: $white;
border-color: lighten($border-default, 10%);
color: lighten($text-color, 25%);
}
.caret {
border-top-color: $text-color;
}
.dropup & {
.caret {
border-bottom: 4px solid $text-color;
}
}
}
.btn-primary {
.open & {
&.dropdown-toggle {
background-color: lighten($primary,15%);
border-color: lighten($primary,15%);
}
}
background-color: $primary;
border-color: $primary;
color: $white;
&:hover {
background-color: lighten($primary,10%) !important;
border-color: lighten($primary,10%);
color: $white;
}
&:active, &.active, &.active:focus, &:active:focus, &:active:hover, &.dropdown-toggle:active:hover {
background-color: darken($primary,5%) !important;
border-color: darken($primary,5%);
}
&:focus {
background-color: lighten($primary,15%);
border-color: lighten($primary,15%);
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
background-color: lighten($primary,20%);
border-color: lighten($primary,20%);
color: $white;
}
&.btn-o {
border: 1px solid $primary;
color: $primary;
&:hover {
color: lighten($primary,10%);
border-color: lighten($primary,10%);
background: none !important;
}
&:active, &.active, &.active:focus, &:active:focus, &:active:hover {
background-color: darken($lightGrey,5%) !important;
border-color: darken($primary,15%) !important;
color: darken($primary,15%) !important;
}
&:focus {
background-color: lighten($primary,20%);
border-color: lighten($primary,20%);
color: lighten($primary,10%);
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
border-color: lighten($primary,20%);
color: lighten($primary,20%);
}
.caret {
border-top-color: $primary;
}
}
.caret {
border-top-color: $white;
}
.dropup & {
.caret {
border-bottom: 4px solid $white;
}
}
}
.btn-success {
.open & {
&.dropdown-toggle {
background-color: lighten($success,15%);
border-color: lighten($success,15%);
}
}
background-color: $success;
border-color: $success;
color: $white;
&:hover {
background-color: lighten($success,10%) !important;
border-color: lighten($success,10%);
color: $white;
}
&:active, &.active, &.active:focus, &:active:focus, &:active:hover, &.dropdown-toggle:active:hover {
background-color: darken($success,5%) !important;
border-color: darken($success,5%);
}
&:focus {
background-color: lighten($success,15%);
border-color: lighten($success,15%);
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
background-color: lighten($success,20%);
border-color: lighten($success,20%);
color: $white;
}
&.btn-o {
border: 1px solid $success;
color: $success;
&:hover {
color: lighten($success,10%);
border-color: lighten($success,10%);
background: none !important;
}
&:active, &.active, &.active:focus, &:active:focus, &:active:hover {
background-color: darken($lightGrey,5%) !important;
border-color: darken($success,15%) !important;
color: darken($success,15%) !important;
}
&:focus {
background-color: lighten($success,20%);
border-color: lighten($success,20%);
color: lighten($success,10%);
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
border-color: lighten($success,20%);
color: lighten($success,20%);
}
.caret {
border-top-color: $success;
}
}
.caret {
border-top-color: $white;
}
.dropup & {
.caret {
border-bottom: 4px solid $white;
}
}
}
.btn-info {
.open & {
&.dropdown-toggle {
background-color: lighten($info,15%);
border-color: lighten($info,15%);
}
}
background-color: $info;
border-color: $info;
color: $white;
&:hover {
background-color: lighten($info,10%) !important;
border-color: lighten($info,10%);
color: $white;
}
&:active, &.active, &.active:focus, &:active:focus, &:active:hover, &.dropdown-toggle:active:hover {
background-color: darken($info,5%) !important;
border-color: darken($info,5%);
}
&:focus {
background-color: lighten($info,15%);
border-color: lighten($info,15%);
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
background-color: lighten($info,20%);
border-color: lighten($info,20%);
color: $white;
}
&.btn-o {
border: 1px solid $info;
color: $info;
&:hover {
color: lighten($info,10%);
border-color: lighten($info,10%);
background: none !important;
}
&:active, &.active, &.active:focus, &:active:focus, &:active:hover {
background-color: darken($lightGrey,5%) !important;
border-color: darken($info,15%) !important;
color: darken($info,15%) !important;
}
&:focus {
background-color: lighten($info,20%);
border-color: lighten($info,20%);
color: lighten($info,10%);
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
border-color: lighten($info,20%);
color: lighten($info,20%);
}
.caret {
border-top-color: $info;
}
}
.caret {
border-top-color: $white;
}
.dropup & {
.caret {
border-bottom: 4px solid $white;
}
}
}
.btn-warning {
.open & {
&.dropdown-toggle {
background-color: lighten($warning,15%);
border-color: lighten($warning,15%);
}
}
background-color: $warning;
border-color: $warning;
color: $white;
&:hover {
background-color: lighten($warning,10%) !important;
border-color: lighten($warning,10%);
color: $white;
}
&:active, &.active, &.active:focus, &:active:focus, &:active:hover, &.dropdown-toggle:active:hover {
background-color: darken($warning,5%) !important;
border-color: darken($warning,5%);
}
&:focus {
background-color: lighten($warning,15%);
border-color: lighten($warning,15%);
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
background-color: lighten($warning,20%);
border-color: lighten($warning,20%);
color: $white;
}
&.btn-o {
border: 1px solid $warning;
color: $warning;
&:hover {
color: lighten($warning,10%);
border-color: lighten($warning,10%);
background: none !important;
}
&:active, &.active, &.active:focus, &:active:focus, &:active:hover {
background-color: darken($lightGrey,5%) !important;
border-color: darken($warning,15%) !important;
color: darken($warning,15%) !important;
}
&:focus {
background-color: lighten($warning,20%);
border-color: lighten($warning,20%);
color: lighten($warning,10%);
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
border-color: lighten($warning,20%);
color: lighten($warning,20%);
}
.caret {
border-top-color: $warning;
}
}
.caret {
border-top-color: $white;
}
.dropup & {
.caret {
border-bottom: 4px solid $white;
}
}
}
.btn-danger {
.open & {
&.dropdown-toggle {
background-color: lighten($danger,15%);
border-color: lighten($danger,15%);
}
}
background-color: $danger;
border-color: $danger;
color: $white;
&:hover {
background-color: lighten($danger,10%) !important;
border-color: lighten($danger,10%);
color: $white;
}
&:active, &.active, &.active:focus, &:active:focus, &:active:hover, &.dropdown-toggle:active:hover {
background-color: darken($danger,5%) !important;
border-color: darken($danger,5%);
}
&:focus {
background-color: lighten($danger,15%);
border-color: lighten($danger,15%);
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
background-color: lighten($danger,20%);
border-color: lighten($danger,20%);
color: $white;
}
&.btn-o {
border: 1px solid $danger;
color: $danger;
&:hover {
color: lighten($danger,10%);
border-color: lighten($danger,10%);
background: none !important;
}
&:active, &.active, &.active:focus, &:active:focus, &:active:hover {
background-color: darken($lightGrey,5%) !important;
border-color: darken($danger,15%) !important;
color: darken($danger,15%) !important;
}
&:focus {
background-color: lighten($danger,20%);
border-color: lighten($danger,20%);
color: lighten($danger,10%);
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
border-color: lighten($danger,20%);
color: lighten($danger,20%);
}
.caret {
border-top-color: $danger;
}
}
.caret {
border-top-color: $white;
}
.dropup & {
.caret {
border-bottom: 4px solid $white;
}
}
}
.btn-azure {
.open & {
&.dropdown-toggle {
background-color: lighten($azure,15%);
border-color: lighten($azure,15%);
}
}
background-color: $azure;
border-color: $azure;
color: $white;
&:hover {
background-color: lighten($azure,10%) !important;
border-color: lighten($azure,10%);
color: $white;
}
&:active, &.active, &.active:focus, &:active:focus, &:active:hover, &.dropdown-toggle:active:hover {
background-color: darken($azure,5%) !important;
border-color: darken($azure,5%);
}
&:focus {
background-color: lighten($azure,15%);
border-color: lighten($azure,15%);
color: $white;
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
background-color: lighten($azure,20%);
border-color: lighten($azure,20%);
color: $white;
}
&.btn-o {
border: 1px solid $azure;
color: $azure;
&:hover {
color: lighten($azure,10%);
border-color: lighten($azure,10%);
background: none !important;
}
&:active, &.active, &.active:focus, &:active:focus, &:active:hover {
background-color: darken($lightGrey,5%) !important;
border-color: darken($azure,15%) !important;
color: darken($azure,15%) !important;
}
&:focus {
background-color: lighten($azure,20%);
border-color: lighten($azure,20%);
color: lighten($azure,10%);
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
border-color: lighten($azure,20%);
color: lighten($azure,20%);
}
.caret {
border-top-color: $azure;
}
}
.caret {
border-top-color: $white;
}
.dropup & {
.caret {
border-bottom: 4px solid $white;
}
}
}
.btn-light-azure {
.open & {
&.dropdown-toggle {
background-color: lighten($lightAzure,15%);
border-color: lighten($lightAzure,15%);
}
}
background-color: $lightAzure;
border-color: $lightAzure;
color: $white;
&:hover {
background-color: lighten($lightAzure,10%) !important;
border-color: lighten($lightAzure,10%);
color: $white;
}
&:active, &.active, &.active:focus, &:active:focus, &:active:hover, &.dropdown-toggle:active:hover {
background-color: darken($lightAzure,5%) !important;
border-color: darken($lightAzure,5%);
}
&:focus {
background-color: lighten($lightAzure,15%);
border-color: lighten($lightAzure,15%);
color: $white;
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
background-color: lighten($lightAzure,20%);
border-color: lighten($lightAzure,20%);
color: $white;
}
&.btn-o {
border: 1px solid $lightAzure;
color: $lightAzure;
&:hover {
color: lighten($lightAzure,10%);
border-color: lighten($lightAzure,10%);
background: none !important;
}
&:active, &.active, &.active:focus, &:active:focus, &:active:hover {
background-color: darken($lightGrey,5%) !important;
border-color: darken($lightAzure,15%) !important;
color: darken($lightAzure,15%) !important;
}
&:focus {
background-color: lighten($lightAzure,20%);
border-color: lighten($lightAzure,20%);
color: lighten($lightAzure,10%);
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
border-color: lighten($lightAzure,20%);
color: lighten($lightAzure,20%);
}
.caret {
border-top-color: $lightAzure;
}
}
.caret {
border-top-color: $white;
}
.dropup & {
.caret {
border-bottom: 4px solid $white;
}
}
}
.btn-dark-azure {
.open & {
&.dropdown-toggle {
background-color: lighten($darkAzure,15%);
border-color: lighten($darkAzure,15%);
}
}
background-color: $darkAzure;
border-color: $darkAzure;
color: $white;
&:hover {
background-color: lighten($darkAzure,10%) !important;
border-color: lighten($darkAzure,10%);
color: $white;
}
&:active, &.active, &.active:focus, &:active:focus, &:active:hover, &.dropdown-toggle:active:hover {
background-color: darken($darkAzure,5%) !important;
border-color: darken($darkAzure,5%);
}
&:focus {
background-color: lighten($darkAzure,15%);
border-color: lighten($darkAzure,15%);
color: $white;
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
background-color: lighten($darkAzure,20%);
border-color: lighten($darkAzure,20%);
color: $white;
}
&.btn-o {
border: 1px solid $darkAzure;
color: $darkAzure;
&:hover {
color: lighten($darkAzure,10%);
border-color: lighten($darkAzure,10%);
background: none !important;
}
&:active, &.active, &.active:focus, &:active:focus, &:active:hover {
background-color: darken($lightGrey,5%) !important;
border-color: darken($darkAzure,15%) !important;
color: darken($darkAzure,15%) !important;
}
&:focus {
background-color: lighten($darkAzure,20%);
border-color: lighten($darkAzure,20%);
color: lighten($darkAzure,10%);
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
border-color: lighten($darkAzure,20%);
color: lighten($darkAzure,20%);
}
.caret {
border-top-color: $darkAzure;
}
}
.caret {
border-top-color: $white;
}
.dropup & {
.caret {
border-bottom: 4px solid $white;
}
}
}
.btn-blue {
.open & {
&.dropdown-toggle {
background-color: lighten($blue,15%);
border-color: lighten($blue,15%);
}
}
background-color: $blue;
border-color: $blue;
color: $white;
&:hover {
background-color: lighten($blue,10%) !important;
border-color: lighten($blue,10%);
color: $white;
}
&:active, &.active, &.active:focus, &:active:focus, &:active:hover, &.dropdown-toggle:active:hover {
background-color: darken($blue,5%) !important;
border-color: darken($blue,5%);
}
&:focus {
background-color: lighten($blue,15%);
border-color: lighten($blue,15%);
color: $white;
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
background-color: lighten($blue,20%);
border-color: lighten($blue,20%);
color: $white;
}
&.btn-o {
border: 1px solid $blue;
color: $blue;
&:hover {
color: lighten($blue,10%);
border-color: lighten($blue,10%);
background: none !important;
}
&:active, &.active, &.active:focus, &:active:focus, &:active:hover {
background-color: darken($lightGrey,5%) !important;
border-color: darken($blue,15%) !important;
color: darken($blue,15%) !important;
}
&:focus {
background-color: lighten($blue,20%);
border-color: lighten($blue,20%);
color: lighten($blue,10%);
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
border-color: lighten($blue,20%);
color: lighten($blue,20%);
}
.caret {
border-top-color: $blue;
}
}
.caret {
border-top-color: $white;
}
.dropup & {
.caret {
border-bottom: 4px solid $white;
}
}
}
.btn-light-blue {
.open & {
&.dropdown-toggle {
background-color: lighten($lightBlue,15%);
border-color: lighten($lightBlue,15%);
}
}
background-color: $lightBlue;
border-color: $lightBlue;
color: $white;
&:hover {
background-color: lighten($lightBlue,10%) !important;
border-color: lighten($lightBlue,10%);
color: $white;
}
&:active, &.active, &.active:focus, &:active:focus, &:active:hover, &.dropdown-toggle:active:hover {
background-color: darken($lightBlue,5%) !important;
border-color: darken($lightBlue,5%);
}
&:focus {
background-color: lighten($lightBlue,15%);
border-color: lighten($lightBlue,15%);
color: $white;
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
background-color: lighten($lightBlue,20%);
border-color: lighten($lightBlue,20%);
color: $white;
}
&.btn-o {
border: 1px solid $lightBlue;
color: $lightBlue;
&:hover {
color: lighten($lightBlue,10%);
border-color: lighten($lightBlue,10%);
background: none !important;
}
&:active, &.active, &.active:focus, &:active:focus, &:active:hover {
background-color: darken($lightGrey,5%) !important;
border-color: darken($lightBlue,15%) !important;
color: darken($lightBlue,15%) !important;
}
&:focus {
background-color: lighten($lightBlue,20%);
border-color: lighten($lightBlue,20%);
color: lighten($lightBlue,10%);
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
border-color: lighten($lightBlue,20%);
color: lighten($lightBlue,20%);
}
.caret {
border-top-color: $lightBlue;
}
}
.caret {
border-top-color: $white;
}
.dropup & {
.caret {
border-bottom: 4px solid $white;
}
}
}
.btn-dark-blue {
.open & {
&.dropdown-toggle {
background-color: lighten($darkBlue,15%);
border-color: lighten($darkBlue,15%);
}
}
background-color: $darkBlue;
border-color: $darkBlue;
color: $white;
&:hover {
background-color: lighten($darkBlue,10%) !important;
border-color: lighten($darkBlue,10%);
color: $white;
}
&:active, &.active, &.active:focus, &:active:focus, &:active:hover, &.dropdown-toggle:active:hover {
background-color: darken($darkBlue,5%) !important;
border-color: darken($darkBlue,5%);
}
&:focus {
background-color: lighten($darkBlue,15%);
border-color: lighten($darkBlue,15%);
color: $white;
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
background-color: lighten($darkBlue,20%);
border-color: lighten($darkBlue,20%);
color: $white;
}
&.btn-o {
border: 1px solid $darkBlue;
color: $darkBlue;
&:hover {
color: lighten($darkBlue,10%);
border-color: lighten($darkBlue,10%);
background: none !important;
}
&:active, &.active, &.active:focus, &:active:focus, &:active:hover {
background-color: darken($lightGrey,5%) !important;
border-color: darken($darkBlue,15%) !important;
color: darken($darkBlue,15%) !important;
}
&:focus {
background-color: lighten($darkBlue,20%);
border-color: lighten($darkBlue,20%);
color: lighten($darkBlue,10%);
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
border-color: lighten($darkBlue,20%);
color: lighten($darkBlue,20%);
}
.caret {
border-top-color: $darkBlue;
}
}
.caret {
border-top-color: $white;
}
.dropup & {
.caret {
border-bottom: 4px solid $white;
}
}
}
.btn-green {
.open & {
&.dropdown-toggle {
background-color: lighten($green,15%);
border-color: lighten($green,15%);
}
}
background-color: $green;
border-color: $green;
color: $white;
&:hover {
background-color: lighten($green,10%) !important;
border-color: lighten($green,10%);
color: $white;
}
&:active, &.active, &.active:focus, &:active:focus, &:active:hover, &.dropdown-toggle:active:hover {
background-color: darken($green,5%) !important;
border-color: darken($green,5%);
}
&:focus {
background-color: lighten($green,15%);
border-color: lighten($green,15%);
color: $white;
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
background-color: lighten($green,20%);
border-color: lighten($green,20%);
color: $white;
}
&.btn-o {
border: 1px solid $green;
color: $green;
&:hover {
color: lighten($green,10%);
border-color: lighten($green,10%);
background: none !important;
}
&:active, &.active, &.active:focus, &:active:focus, &:active:hover {
background-color: darken($lightGrey,5%) !important;
border-color: darken($green,15%) !important;
color: darken($green,15%) !important;
}
&:focus {
background-color: lighten($green,20%);
border-color: lighten($green,20%);
color: lighten($green,10%);
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
border-color: lighten($green,20%);
color: lighten($green,20%);
}
.caret {
border-top-color: $green;
}
}
.caret {
border-top-color: $white;
}
.dropup & {
.caret {
border-bottom: 4px solid $white;
}
}
}
.btn-light-green {
.open & {
&.dropdown-toggle {
background-color: lighten($lightGreen,15%);
border-color: lighten($lightGreen,15%);
}
}
background-color: $lightGreen;
border-color: $lightGreen;
color: $white;
&:hover {
background-color: lighten($lightGreen,10%) !important;
border-color: lighten($lightGreen,10%);
color: $white;
}
&:active, &.active, &.active:focus, &:active:focus, &:active:hover, &.dropdown-toggle:active:hover {
background-color: darken($lightGreen,5%) !important;
border-color: darken($lightGreen,5%);
}
&:focus {
background-color: lighten($lightGreen,15%);
border-color: lighten($lightGreen,15%);
color: $white;
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
background-color: lighten($lightGreen,20%);
border-color: lighten($lightGreen,20%);
color: $white;
}
&.btn-o {
border: 1px solid $lightGreen;
color: $lightGreen;
&:hover {
color: lighten($lightGreen,10%);
border-color: lighten($lightGreen,10%);
background: none !important;
}
&:active, &.active, &.active:focus, &:active:focus, &:active:hover {
background-color: darken($lightGrey,5%) !important;
border-color: darken($lightGreen,15%) !important;
color: darken($lightGreen,15%) !important;
}
&:focus {
background-color: lighten($lightGreen,20%);
border-color: lighten($lightGreen,20%);
color: lighten($lightGreen,10%);
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
border-color: lighten($lightGreen,20%);
color: lighten($lightGreen,20%);
}
.caret {
border-top-color: $lightGreen;
}
}
.caret {
border-top-color: $white;
}
.dropup & {
.caret {
border-bottom: 4px solid $white;
}
}
}
.btn-dark-green {
.open & {
&.dropdown-toggle {
background-color: lighten($darkGreen,15%);
border-color: lighten($darkGreen,15%);
}
}
background-color: $darkGreen;
border-color: $darkGreen;
color: $white;
&:hover {
background-color: lighten($darkGreen,10%) !important;
border-color: lighten($darkGreen,10%);
color: $white;
}
&:active, &.active, &.active:focus, &:active:focus, &:active:hover, &.dropdown-toggle:active:hover {
background-color: darken($darkGreen,5%) !important;
border-color: darken($darkGreen,5%);
}
&:focus {
background-color: lighten($darkGreen,15%);
border-color: lighten($darkGreen,15%);
color: $white;
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
background-color: lighten($darkGreen,20%);
border-color: lighten($darkGreen,20%);
color: $white;
}
&.btn-o {
border: 1px solid $darkGreen;
color: $darkGreen;
&:hover {
color: lighten($darkGreen,10%);
border-color: lighten($darkGreen,10%);
background: none !important;
}
&:active, &.active, &.active:focus, &:active:focus, &:active:hover {
background-color: darken($lightGrey,5%) !important;
border-color: darken($darkGreen,15%) !important;
color: darken($darkGreen,15%) !important;
}
&:focus {
background-color: lighten($darkGreen,20%);
border-color: lighten($darkGreen,20%);
color: lighten($darkGreen,10%);
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
border-color: lighten($darkGreen,20%);
color: lighten($darkGreen,20%);
}
.caret {
border-top-color: $darkGreen;
}
}
.caret {
border-top-color: $white;
}
.dropup & {
.caret {
border-bottom: 4px solid $white;
}
}
}
.btn-orange {
.open & {
&.dropdown-toggle {
background-color: lighten($orange,15%);
border-color: lighten($orange,15%);
}
}
background-color: $orange;
border-color: $orange;
color: $white;
&:hover {
background-color: lighten($orange,10%) !important;
border-color: lighten($orange,10%);
color: $white;
}
&:active, &.active, &.active:focus, &:active:focus, &:active:hover, &.dropdown-toggle:active:hover {
background-color: darken($orange,5%) !important;
border-color: darken($orange,5%);
}
&:focus {
background-color: lighten($orange,15%);
border-color: lighten($orange,15%);
color: $white;
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
background-color: lighten($orange,20%);
border-color: lighten($orange,20%);
color: $white;
}
&.btn-o {
border: 1px solid $orange;
color: $orange;
&:hover {
color: lighten($orange,10%);
border-color: lighten($orange,10%);
background: none !important;
}
&:active, &.active, &.active:focus, &:active:focus, &:active:hover {
background-color: darken($lightGrey,5%) !important;
border-color: darken($orange,15%) !important;
color: darken($orange,15%) !important;
}
&:focus {
background-color: lighten($orange,20%);
border-color: lighten($orange,20%);
color: lighten($orange,10%);
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
border-color: lighten($orange,20%);
color: lighten($orange,20%);
}
.caret {
border-top-color: $orange;
}
}
.caret {
border-top-color: $white;
}
.dropup & {
.caret {
border-bottom: 4px solid $white;
}
}
}
.btn-light-orange {
.open & {
&.dropdown-toggle {
background-color: lighten($lightOrange,15%);
border-color: lighten($lightOrange,15%);
}
}
background-color: $lightOrange;
border-color: $lightOrange;
color: $white;
&:hover {
background-color: lighten($lightOrange,10%) !important;
border-color: lighten($lightOrange,10%);
color: $white;
}
&:active, &.active, &.active:focus, &:active:focus, &:active:hover, &.dropdown-toggle:active:hover {
background-color: darken($lightOrange,5%) !important;
border-color: darken($lightOrange,5%);
}
&:focus {
background-color: lighten($lightOrange,15%);
border-color: lighten($lightOrange,15%);
color: $white;
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
background-color: lighten($lightOrange,20%);
border-color: lighten($lightOrange,20%);
color: $white;
}
&.btn-o {
border: 1px solid $lightOrange;
color: $lightOrange;
&:hover {
color: lighten($lightOrange,10%);
border-color: lighten($lightOrange,10%);
background: none !important;
}
&:active, &.active, &.active:focus, &:active:focus, &:active:hover {
background-color: darken($lightGrey,5%) !important;
border-color: darken($lightOrange,15%) !important;
color: darken($lightOrange,15%) !important;
}
&:focus {
background-color: lighten($lightOrange,20%);
border-color: lighten($lightOrange,20%);
color: lighten($lightOrange,10%);
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
border-color: lighten($lightOrange,20%);
color: lighten($lightOrange,20%);
}
.caret {
border-top-color: $lightOrange;
}
}
.caret {
border-top-color: $white;
}
.dropup & {
.caret {
border-bottom: 4px solid $white;
}
}
}
.btn-dark-orange {
.open & {
&.dropdown-toggle {
background-color: lighten($darkOrange,15%);
border-color: lighten($darkOrange,15%);
}
}
background-color: $darkOrange;
border-color: $darkOrange;
color: $white;
&:hover {
background-color: lighten($darkOrange,10%) !important;
border-color: lighten($darkOrange,10%);
color: $white;
}
&:active, &.active, &.active:focus, &:active:focus, &:active:hover, &.dropdown-toggle:active:hover {
background-color: darken($darkOrange,5%) !important;
border-color: darken($darkOrange,5%);
}
&:focus {
background-color: lighten($darkOrange,15%);
border-color: lighten($darkOrange,15%);
color: $white;
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
background-color: lighten($darkOrange,20%);
border-color: lighten($darkOrange,20%);
color: $white;
}
&.btn-o {
border: 1px solid $darkOrange;
color: $darkOrange;
&:hover {
color: lighten($darkOrange,10%);
border-color: lighten($darkOrange,10%);
background: none !important;
}
&:active, &.active, &.active:focus, &:active:focus, &:active:hover {
background-color: darken($lightGrey,5%) !important;
border-color: darken($darkOrange,15%) !important;
color: darken($darkOrange,15%) !important;
}
&:focus {
background-color: lighten($darkOrange,20%);
border-color: lighten($darkOrange,20%);
color: lighten($darkOrange,10%);
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
border-color: lighten($darkOrange,20%);
color: lighten($darkOrange,20%);
}
.caret {
border-top-color: $darkOrange;
}
}
.caret {
border-top-color: $white;
}
.dropup & {
.caret {
border-bottom: 4px solid $white;
}
}
}
.btn-red {
.open & {
&.dropdown-toggle {
background-color: lighten($red,15%);
border-color: lighten($red,15%);
}
}
background-color: $red;
border-color: $red;
color: $white;
&:hover {
background-color: lighten($red,10%) !important;
border-color: lighten($red,10%);
color: $white;
}
&:active, &.active, &.active:focus, &:active:focus, &:active:hover, &.dropdown-toggle:active:hover {
background-color: darken($red,5%) !important;
border-color: darken($red,5%);
}
&:focus {
background-color: lighten($red,15%);
border-color: lighten($red,15%);
color: $white;
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
background-color: lighten($red,20%);
border-color: lighten($red,20%);
color: $white;
}
&.btn-o {
border: 1px solid $red;
color: $red;
&:hover {
color: lighten($red,10%);
border-color: lighten($red,10%);
background: none !important;
}
&:active, &.active, &.active:focus, &:active:focus, &:active:hover {
background-color: darken($lightGrey,5%) !important;
border-color: darken($red,15%) !important;
color: darken($red,15%) !important;
}
&:focus {
background-color: lighten($red,20%);
border-color: lighten($red,20%);
color: lighten($red,10%);
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
border-color: lighten($red,20%);
color: lighten($red,20%);
}
.caret {
border-top-color: $red;
}
}
.caret {
border-top-color: $white;
}
.dropup & {
.caret {
border-bottom: 4px solid $white;
}
}
}
.btn-light-red {
.open & {
&.dropdown-toggle {
background-color: lighten($lightRed,15%);
border-color: lighten($lightRed,15%);
}
}
background-color: $lightRed;
border-color: $lightRed;
color: $white;
&:hover {
background-color: lighten($lightRed,10%) !important;
border-color: lighten($lightRed,10%);
color: $white;
}
&:active, &.active, &.active:focus, &:active:focus, &:active:hover, &.dropdown-toggle:active:hover {
background-color: darken($lightRed,5%) !important;
border-color: darken($lightRed,5%);
}
&:focus {
background-color: lighten($lightRed,15%);
border-color: lighten($lightRed,15%);
color: $white;
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
background-color: lighten($lightRed,20%);
border-color: lighten($lightRed,20%);
color: $white;
}
&.btn-o {
border: 1px solid $lightRed;
color: $lightRed;
&:hover {
color: lighten($lightRed,10%);
border-color: lighten($lightRed,10%);
background: none !important;
}
&:active, &.active, &.active:focus, &:active:focus, &:active:hover {
background-color: darken($lightGrey,5%) !important;
border-color: darken($lightRed,15%) !important;
color: darken($lightRed,15%) !important;
}
&:focus {
background-color: lighten($lightRed,20%);
border-color: lighten($lightRed,20%);
color: lighten($lightRed,10%);
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
border-color: lighten($lightRed,20%);
color: lighten($lightRed,20%);
}
.caret {
border-top-color: $lightRed;
}
}
.caret {
border-top-color: $white;
}
.dropup & {
.caret {
border-bottom: 4px solid $white;
}
}
}
.btn-dark-red {
.open & {
&.dropdown-toggle {
background-color: lighten($darkRed,15%);
border-color: lighten($darkRed,15%);
}
}
background-color: $darkRed;
border-color: $darkRed;
color: $white;
&:hover {
background-color: lighten($darkRed,10%) !important;
border-color: lighten($darkRed,10%);
color: $white;
}
&:active, &.active, &.active:focus, &:active:focus, &:active:hover, &.dropdown-toggle:active:hover {
background-color: darken($darkRed,5%) !important;
border-color: darken($darkRed,5%);
}
&:focus {
background-color: lighten($darkRed,15%);
border-color: lighten($darkRed,15%);
color: $white;
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
background-color: lighten($darkRed,20%);
border-color: lighten($darkRed,20%);
color: $white;
}
&.btn-o {
border: 1px solid $darkRed;
color: $darkRed;
&:hover {
color: lighten($darkRed,10%);
border-color: lighten($darkRed,10%);
background: none !important;
}
&:active, &.active, &.active:focus, &:active:focus, &:active:hover {
background-color: darken($lightGrey,5%) !important;
border-color: darken($darkRed,15%) !important;
color: darken($darkRed,15%) !important;
}
&:focus {
background-color: lighten($darkRed,20%);
border-color: lighten($darkRed,20%);
color: lighten($darkRed,10%);
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
border-color: lighten($darkRed,20%);
color: lighten($darkRed,20%);
}
.caret {
border-top-color: $darkRed;
}
}
.caret {
border-top-color: $white;
}
.dropup & {
.caret {
border-bottom: 4px solid $white;
}
}
}
.btn-purple {
.open & {
&.dropdown-toggle {
background-color: lighten($purple,15%);
border-color: lighten($purple,15%);
}
}
background-color: $purple;
border-color: $purple;
color: $white;
&:hover {
background-color: lighten($purple,10%) !important;
border-color: lighten($purple,10%);
color: $white;
}
&:active, &.active, &.active:focus, &:active:focus, &:active:hover, &.dropdown-toggle:active:hover {
background-color: darken($purple,5%) !important;
border-color: darken($purple,5%);
}
&:focus {
background-color: lighten($purple,15%);
border-color: lighten($purple,15%);
color: $white;
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
background-color: lighten($purple,20%);
border-color: lighten($purple,20%);
color: $white;
}
&.btn-o {
border: 1px solid $purple;
color: $purple;
&:hover {
color: lighten($purple,10%);
border-color: lighten($purple,10%);
background: none !important;
}
&:active, &.active, &.active:focus, &:active:focus, &:active:hover {
background-color: darken($lightGrey,5%) !important;
border-color: darken($purple,15%) !important;
color: darken($purple,15%) !important;
}
&:focus {
background-color: lighten($purple,20%);
border-color: lighten($purple,20%);
color: lighten($purple,10%);
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
border-color: lighten($purple,20%);
color: lighten($purple,20%);
}
.caret {
border-top-color: $purple;
}
}
.caret {
border-top-color: $white;
}
.dropup & {
.caret {
border-bottom: 4px solid $white;
}
}
}
.btn-light-purple {
.open & {
&.dropdown-toggle {
background-color: lighten($lightPurple,15%);
border-color: lighten($lightPurple,15%);
}
}
background-color: $lightPurple;
border-color: $lightPurple;
color: $white;
&:hover {
background-color: lighten($lightPurple,10%) !important;
border-color: lighten($lightPurple,10%);
color: $white;
}
&:active, &.active, &.active:focus, &:active:focus, &:active:hover, &.dropdown-toggle:active:hover {
background-color: darken($lightPurple,5%) !important;
border-color: darken($lightPurple,5%);
}
&:focus {
background-color: lighten($lightPurple,15%);
border-color: lighten($lightPurple,15%);
color: $white;
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
background-color: lighten($lightPurple,20%);
border-color: lighten($lightPurple,20%);
color: $white;
}
&.btn-o {
border: 1px solid $lightPurple;
color: $lightPurple;
&:hover {
color: lighten($lightPurple,10%);
border-color: lighten($lightPurple,10%);
background: none !important;
}
&:active, &.active, &.active:focus, &:active:focus, &:active:hover {
background-color: darken($lightGrey,5%) !important;
border-color: darken($lightPurple,15%) !important;
color: darken($lightPurple,15%) !important;
}
&:focus {
background-color: lighten($lightPurple,20%);
border-color: lighten($lightPurple,20%);
color: lighten($lightPurple,10%);
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
border-color: lighten($lightPurple,20%);
color: lighten($lightPurple,20%);
}
.caret {
border-top-color: $lightPurple;
}
}
.caret {
border-top-color: $white;
}
.dropup & {
.caret {
border-bottom: 4px solid $white;
}
}
}
.btn-dark-purple {
.open & {
&.dropdown-toggle {
background-color: lighten($darkPurple,15%);
border-color: lighten($darkPurple,15%);
}
}
background-color: $darkPurple;
border-color: $darkPurple;
color: $white;
&:hover {
background-color: lighten($darkPurple,10%) !important;
border-color: lighten($darkPurple,10%);
color: $white;
}
&:active, &.active, &.active:focus, &:active:focus, &:active:hover, &.dropdown-toggle:active:hover {
background-color: darken($darkPurple,5%) !important;
border-color: darken($darkPurple,5%);
}
&:focus {
background-color: lighten($darkPurple,15%);
border-color: lighten($darkPurple,15%);
color: $white;
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
background-color: lighten($darkPurple,20%);
border-color: lighten($darkPurple,20%);
color: $white;
}
&.btn-o {
border: 1px solid $darkPurple;
color: $darkPurple;
&:hover {
color: lighten($darkPurple,10%);
border-color: lighten($darkPurple,10%);
background: none !important;
}
&:active, &.active, &.active:focus, &:active:focus, &:active:hover {
background-color: darken($lightGrey,5%) !important;
border-color: darken($darkPurple,15%) !important;
color: darken($darkPurple,15%) !important;
}
&:focus {
background-color: lighten($darkPurple,20%);
border-color: lighten($darkPurple,20%);
color: lighten($darkPurple,10%);
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
border-color: lighten($darkPurple,20%);
color: lighten($darkPurple,20%);
}
.caret {
border-top-color: $darkPurple;
}
}
.caret {
border-top-color: $white;
}
.dropup & {
.caret {
border-bottom: 4px solid $white;
}
}
}
.btn-beige {
.open & {
&.dropdown-toggle {
background-color: lighten($beige,15%);
border-color: lighten($beige,15%);
}
}
background-color: $beige;
border-color: $beige;
color: $white;
&:hover {
background-color: lighten($beige,10%) !important;
border-color: lighten($beige,10%);
color: $white;
}
&:active, &.active, &.active:focus, &:active:focus, &:active:hover, &.dropdown-toggle:active:hover {
background-color: darken($beige,5%) !important;
border-color: darken($beige,5%);
}
&:focus {
background-color: lighten($beige,15%);
border-color: lighten($beige,15%);
color: $white;
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
background-color: lighten($beige,20%);
border-color: lighten($beige,20%);
color: $white;
}
&.btn-o {
border: 1px solid $beige;
color: $beige;
&:hover {
color: lighten($beige,10%);
border-color: lighten($beige,10%);
background: none !important;
}
&:active, &.active, &.active:focus, &:active:focus, &:active:hover {
background-color: darken($lightGrey,5%) !important;
border-color: darken($beige,15%) !important;
color: darken($beige,15%) !important;
}
&:focus {
background-color: lighten($beige,20%);
border-color: lighten($beige,20%);
color: lighten($beige,10%);
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
border-color: lighten($beige,20%);
color: lighten($beige,20%);
}
.caret {
border-top-color: $beige;
}
}
.caret {
border-top-color: $white;
}
.dropup & {
.caret {
border-bottom: 4px solid $white;
}
}
}
.btn-light-beige {
.open & {
&.dropdown-toggle {
background-color: lighten($lightBeige,15%);
border-color: lighten($lightBeige,15%);
}
}
background-color: $lightBeige;
border-color: $lightBeige;
color: $white;
&:hover {
background-color: lighten($lightBeige,10%) !important;
border-color: lighten($lightBeige,10%);
color: $white;
}
&:active, &.active, &.active:focus, &:active:focus, &:active:hover, &.dropdown-toggle:active:hover {
background-color: darken($lightBeige,5%) !important;
border-color: darken($lightBeige,5%);
}
&:focus {
background-color: lighten($lightBeige,15%);
border-color: lighten($lightBeige,15%);
color: $white;
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
background-color: lighten($lightBeige,20%);
border-color: lighten($lightBeige,20%);
color: $white;
}
&.btn-o {
border: 1px solid $lightBeige;
color: $lightBeige;
&:hover {
color: lighten($lightBeige,10%);
border-color: lighten($lightBeige,10%);
background: none !important;
}
&:active, &.active, &.active:focus, &:active:focus, &:active:hover {
background-color: darken($lightGrey,5%) !important;
border-color: darken($lightBeige,15%) !important;
color: darken($lightBeige,15%) !important;
}
&:focus {
background-color: lighten($lightBeige,20%);
border-color: lighten($lightBeige,20%);
color: lighten($lightBeige,10%);
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
border-color: lighten($lightBeige,20%);
color: lighten($lightBeige,20%);
}
.caret {
border-top-color: $lightBeige;
}
}
.caret {
border-top-color: $white;
}
.dropup & {
.caret {
border-bottom: 4px solid $white;
}
}
}
.btn-dark-beige {
.open & {
&.dropdown-toggle {
background-color: lighten($darkBeige,15%);
border-color: lighten($darkBeige,15%);
}
}
background-color: $darkBeige;
border-color: $darkBeige;
color: $white;
&:hover {
background-color: lighten($darkBeige,10%) !important;
border-color: lighten($darkBeige,10%);
color: $white;
}
&:active, &.active, &.active:focus, &:active:focus, &:active:hover, &.dropdown-toggle:active:hover {
background-color: darken($darkBeige,5%) !important;
border-color: darken($darkBeige,5%);
}
&:focus {
background-color: lighten($darkBeige,15%);
border-color: lighten($darkBeige,15%);
color: $white;
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
background-color: lighten($darkBeige,20%);
border-color: lighten($darkBeige,20%);
color: $white;
}
&.btn-o {
border: 1px solid $darkBeige;
color: $darkBeige;
&:hover {
color: lighten($darkBeige,10%);
border-color: lighten($darkBeige,10%);
background: none !important;
}
&:active, &.active, &.active:focus, &:active:focus, &:active:hover {
background-color: darken($lightGrey,5%) !important;
border-color: darken($darkBeige,15%) !important;
color: darken($darkBeige,15%) !important;
}
&:focus {
background-color: lighten($darkBeige,20%);
border-color: lighten($darkBeige,20%);
color: lighten($darkBeige,10%);
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
border-color: lighten($darkBeige,20%);
color: lighten($darkBeige,20%);
}
.caret {
border-top-color: $darkBeige;
}
}
.caret {
border-top-color: $white;
}
.dropup & {
.caret {
border-bottom: 4px solid $white;
}
}
}
.btn-yellow {
.open & {
&.dropdown-toggle {
background-color: lighten($yellow,15%);
border-color: lighten($yellow,15%);
}
}
background-color: $yellow;
border-color: $yellow;
color: $white;
&:hover {
background-color: lighten($yellow,10%) !important;
border-color: lighten($yellow,10%);
color: $white;
}
&:active, &.active, &.active:focus, &:active:focus, &:active:hover, &.dropdown-toggle:active:hover {
background-color: darken($yellow,5%) !important;
border-color: darken($yellow,5%);
}
&:focus {
background-color: lighten($yellow,15%);
border-color: lighten($yellow,15%);
color: $white;
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
background-color: lighten($yellow,20%);
border-color: lighten($yellow,20%);
color: $white;
}
&.btn-o {
border: 1px solid $yellow;
color: $yellow;
&:hover {
color: lighten($yellow,10%);
border-color: lighten($yellow,10%);
background: none !important;
}
&:active, &.active, &.active:focus, &:active:focus, &:active:hover {
background-color: darken($lightGrey,5%) !important;
border-color: darken($yellow,15%) !important;
color: darken($yellow,15%) !important;
}
&:focus {
background-color: lighten($yellow,20%);
border-color: lighten($yellow,20%);
color: lighten($yellow,10%);
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
border-color: lighten($yellow,20%);
color: lighten($yellow,20%);
}
.caret {
border-top-color: $yellow;
}
}
.caret {
border-top-color: $white;
}
.dropup & {
.caret {
border-bottom: 4px solid $white;
}
}
}
.btn-light-yellow {
.open & {
&.dropdown-toggle {
background-color: lighten($lightYellow,15%);
border-color: lighten($lightYellow,15%);
}
}
background-color: $lightYellow;
border-color: $lightYellow;
color: $white;
&:hover {
background-color: lighten($lightYellow,10%) !important;
border-color: lighten($lightYellow,10%);
color: $white;
}
&:active, &.active, &.active:focus, &:active:focus, &:active:hover, &.dropdown-toggle:active:hover {
background-color: darken($lightYellow,5%) !important;
border-color: darken($lightYellow,5%);
}
&:focus {
background-color: lighten($lightYellow,15%);
border-color: lighten($lightYellow,15%);
color: $white;
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
background-color: lighten($lightYellow,20%);
border-color: lighten($lightYellow,20%);
color: $white;
}
&.btn-o {
border: 1px solid $lightYellow;
color: $lightYellow;
&:hover {
color: lighten($lightYellow,10%);
border-color: lighten($lightYellow,10%);
background: none !important;
}
&:active, &.active, &.active:focus, &:active:focus, &:active:hover {
background-color: darken($lightGrey,5%) !important;
border-color: darken($lightYellow,15%) !important;
color: darken($lightYellow,15%) !important;
}
&:focus {
background-color: lighten($lightYellow,20%);
border-color: lighten($lightYellow,20%);
color: lighten($lightYellow,10%);
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
border-color: lighten($lightYellow,20%);
color: lighten($lightYellow,20%);
}
.caret {
border-top-color: $lightYellow;
}
}
.caret {
border-top-color: $white;
}
.dropup & {
.caret {
border-bottom: 4px solid $white;
}
}
}
.btn-dark-yellow {
.open & {
&.dropdown-toggle {
background-color: lighten($darkYellow,15%);
border-color: lighten($darkYellow,15%);
}
}
background-color: $darkYellow;
border-color: $darkYellow;
color: $white;
&:hover {
background-color: lighten($darkYellow,10%) !important;
border-color: lighten($darkYellow,10%);
color: $white;
}
&:active, &.active, &.active:focus, &:active:focus, &:active:hover, &.dropdown-toggle:active:hover {
background-color: darken($darkYellow,5%) !important;
border-color: darken($darkYellow,5%);
}
&:focus {
background-color: lighten($darkYellow,15%);
border-color: lighten($darkYellow,15%);
color: $white;
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
background-color: lighten($darkYellow,20%);
border-color: lighten($darkYellow,20%);
color: $white;
}
&.btn-o {
border: 1px solid $darkYellow;
color: $darkYellow;
&:hover {
color: lighten($darkYellow,10%);
border-color: lighten($darkYellow,10%);
background: none !important;
}
&:active, &.active, &.active:focus, &:active:focus, &:active:hover {
background-color: darken($lightGrey,5%) !important;
border-color: darken($darkYellow,15%) !important;
color: darken($darkYellow,15%) !important;
}
&:focus {
background-color: lighten($darkYellow,20%);
border-color: lighten($darkYellow,20%);
color: lighten($darkYellow,10%);
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
border-color: lighten($darkYellow,20%);
color: lighten($darkYellow,20%);
}
.caret {
border-top-color: $darkYellow;
}
}
.caret {
border-top-color: $white;
}
.dropup & {
.caret {
border-bottom: 4px solid $white;
}
}
}
.btn-grey {
.open & {
&.dropdown-toggle {
background-color: lighten($grey,15%);
border-color: lighten($grey,15%);
}
}
background-color: $grey;
border-color: $grey;
color: $white;
&:hover {
background-color: lighten($grey,10%) !important;
border-color: lighten($grey,10%);
color: $white;
}
&:active, &.active, &.active:focus, &:active:focus, &:active:hover, &.dropdown-toggle:active:hover {
background-color: darken($grey,5%) !important;
border-color: darken($grey,5%);
}
&:focus {
background-color: lighten($grey,15%);
border-color: lighten($grey,15%);
color: $white;
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
background-color: lighten($grey,20%);
border-color: lighten($grey,20%);
color: $white;
}
&.btn-o {
border: 1px solid $grey;
color: $grey;
&:hover {
color: lighten($grey,10%);
border-color: lighten($grey,10%);
background: none !important;
}
&:active, &.active, &.active:focus, &:active:focus, &:active:hover {
background-color: darken($lightGrey,5%) !important;
border-color: darken($grey,15%) !important;
color: darken($grey,15%) !important;
}
&:focus {
background-color: lighten($grey,20%);
border-color: lighten($grey,20%);
color: lighten($grey,10%);
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
border-color: lighten($grey,20%);
color: lighten($grey,20%);
}
.caret {
border-top-color: $grey;
}
}
.caret {
border-top-color: $white;
}
.dropup & {
.caret {
border-bottom: 4px solid $white;
}
}
}
.btn-light-grey {
.open & {
&.dropdown-toggle {
background-color: lighten($lightGrey,15%);
border-color: lighten($lightGrey,15%);
}
}
background-color: $lightGrey;
border-color: $lightGrey;
color: $text-color;
&:hover {
background-color: lighten($lightGrey,10%) !important;
border-color: lighten($lightGrey,10%);
color: $text-color;
}
&:active, &.active, &.active:focus, &:active:focus, &:active:hover, &.dropdown-toggle:active:hover {
background-color: darken($lightGrey,5%) !important;
border-color: darken($lightGrey,5%);
}
&:focus {
background-color: lighten($lightGrey,15%);
border-color: lighten($lightGrey,15%);
color: $text-color;
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
background-color: lighten($lightGrey,20%);
border-color: lighten($lightGrey,20%);
color: $text-light;
}
&.btn-o {
border: 1px solid $lightGrey;
color: $lightGrey;
&:hover {
color: lighten($text-color,10%);
border-color: lighten($lightGrey,10%);
background: none !important;
}
&:active, &.active, &.active:focus, &:active:focus, &:active:hover {
background-color: darken($lightGrey,5%) !important;
border-color: darken($lightGrey,15%) !important;
color: darken($text-color,15%) !important;
}
&:focus {
background-color: lighten($lightGrey,20%);
border-color: lighten($lightGrey,20%);
color: lighten($lightGrey,10%);
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
border-color: lighten($lightGrey,20%);
color: lighten($text-color,20%);
}
.caret {
border-top-color: $text-color;
}
}
.caret {
border-top-color: $text-color;
}
.dropup & {
.caret {
border-bottom: 4px solid $text-color;
}
}
}
.btn-dark-grey {
.open & {
&.dropdown-toggle {
background-color: lighten($darkGrey,15%);
border-color: lighten($darkGrey,15%);
}
}
background-color: $darkGrey;
border-color: $darkGrey;
color: $white;
&:hover {
background-color: lighten($darkGrey,10%) !important;
border-color: lighten($darkGrey,10%);
color: $white;
}
&:active, &.active, &.active:focus, &:active:focus, &:active:hover, &.dropdown-toggle:active:hover {
background-color: darken($darkGrey,5%) !important;
border-color: darken($darkGrey,5%);
}
&:focus {
background-color: lighten($darkGrey,15%);
border-color: lighten($darkGrey,15%);
color: $white;
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
background-color: lighten($darkGrey,20%);
border-color: lighten($darkGrey,20%);
color: $white;
}
&.btn-o {
border: 1px solid $darkGrey;
color: $darkGrey;
&:hover {
color: lighten($darkGrey,10%);
border-color: lighten($darkGrey,10%);
background: none !important;
}
&:active, &.active, &.active:focus, &:active:focus, &:active:hover {
background-color: darken($darkGrey,5%) !important;
border-color: darken($darkGrey,15%) !important;
color: darken($darkGrey,15%) !important;
}
&:focus {
background-color: lighten($darkGrey,20%);
border-color: lighten($darkGrey,20%);
color: lighten($darkGrey,10%);
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
border-color: lighten($darkGrey,20%);
color: lighten($darkGrey,20%);
}
.caret {
border-top-color: $darkGrey;
}
}
.caret {
border-top-color: $white;
}
.dropup & {
.caret {
border-bottom: 4px solid $white;
}
}
}
.btn-transparent-white {
background: none;
border-color: rgba($white, 0.6);
border-width: 1px;
color: $white !important;
&:hover, &:focus, &:active, &.active {
background-color: rgba($black, 0.1);
border-color: rgba($white, 0.8);
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
background: none;
border-color: rgba($white, 0.3);
color: $white;
}
.caret {
border-top-color: rgba($black, 0.1);
}
.dropup & {
.caret {
border-bottom: 4px solid rgba($black, 0.1);
}
}
}
.btn-transparent-grey {
background: none;
border-color: rgba($grey, 0.3);
border-width: 1px;
color: $grey !important;
&:hover, &:focus, &:active, &.active {
background-color: rgba($grey, 0.1);
border-color: rgba($grey, 0.6);
box-shadow: none !important;
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
background: none;
border-color: rgba($grey, 0.3);
color: $grey;
}
.caret {
border-top-color: $grey;
}
.dropup & {
.caret {
border-bottom: 4px solid $grey;
}
}
}
.btn-transparent-red {
background: none;
border-color: rgba($red, 0.6);
border-width: 2px;
color: $red !important;
&:hover, &:focus, &:active, &.active {
background-color: rgba($red, 0.1);
border-color: rgba($red, 0.8);
}
&.disabled:hover, &.disabled:focus, &.disabled:active, &.disabled.active, &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active, fieldset[disabled] &:hover, fieldset[disabled] &:focus, fieldset[disabled] &:active, fieldset[disabled] &.active {
background: none;
border-color: rgba($red, 0.3);
color: $red;
}
.caret {
border-top-color: $white;
}
.dropup & {
.caret {
border-bottom: 4px solid $white;
}
}
}
.btn-squared {
border-radius: 0 !important;
}
.btn-icon {
background-color: $white;
border: 1px solid #DDDDDD;
border-radius: 2px 2px 2px 2px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
cursor: pointer;
height: 80px;
display: block;
font-size: 14px;
padding: 5px 0 0;
position: relative;
text-align: center;
transition: all 0.3s ease 0s;
color: $text-color;
}
.btn-icon:hover {
border-color: #A5A5A5;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
color: $text-color;
text-decoration: none;
text-shadow: 0 1px 0 #FFFFFF;
}
.btn-icon .badge {
border-radius: 12px 12px 12px 12px !important;
border-style: solid;
border-width: 0;
box-shadow: none;
color: #FFFFFF !important;
font-size: 11px !important;
font-weight: 300;
padding: 3px 7px;
position: absolute;
right: -5px;
text-shadow: none;
top: -5px;
}
.btn-icon [class^="fa-"], .btn-icon [class*=" fa-"] {
clear: both;
display: block;
}
.btn-file {
position: relative;
overflow: hidden;
.svg-inject {
vertical-align: middle;
}
}
.iconic-elem-primary {
fill: $primary !important;
}
.iconic-elem-secondary {
stroke: #fff !important;
}
.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
font-size: 100px;
text-align: right;
filter: alpha(opacity=0);
opacity: 0;
outline: none;
background: white;
cursor: inherit;
display: block;
}
.buttons-widget .btn, .buttons-widget .bootstrap-switch, .buttons-widget button {
margin-bottom: 10px;
}
.buttons-widget .btn-group button, .buttons-widget .btn-group-vertical button, .buttons-widget .btn-group .btn, .buttons-widget .btn-group-vertical .btn {
margin-bottom: 0;
}
.button-o {
background: none;
border: 1px solid #007aff;
border-radius: 5px;
box-sizing: border-box;
color: #007aff;
cursor: pointer;
display: block;
font-family: inherit;
font-size: 14px;
height: 29px;
line-height: 27px;
margin: 0;
overflow: hidden;
padding: 0 10px;
position: relative;
text-align: center;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
}
/***
Dropdown checkboxes
***/
.dropdown-checkboxes {
padding: 5px;
label {
display: block;
font-weight: normal;
line-height: 20px;
}
}
.btn-group .btn + .btn, .btn-group .btn + .btn-group, .btn-group .btn-group + .btn, .btn-group .btn-group + .btn-group {
border-left-color: rgba(255, 255, 255, 0.5) !important;
margin: 0;
}
.btn-group-vertical > .btn + .btn, .btn-group-vertical > .btn + .btn-group, .btn-group-vertical > .btn-group + .btn, .btn-group-vertical > .btn-group + .btn-group {
border-top-color: rgba(255, 255, 255, 0.5) !important;
margin: 0;
}
/***
Social Icons
***/
.social-icons {
ul {
list-style: none;
margin: 0 0 -1px 0;
padding: 0;
li {
display: inline-block;
margin: 0;
padding: 0;
height: 40px;
overflow: hidden;
a {
background-position: 0 0;
background-repeat: no-repeat;
display: block;
height: 80px;
opacity: 0.6;
text-indent: -9999px;
transition: all 0.2s ease 0s;
width: 40px;
top: 0;
font-size: 16px;
position: relative;
@include transition(all, .3s, ease);
&:hover {
top: -40px;
}
&:before {
position: absolute;
width: 40px;
height: 40px;
font-family: FontAwesome;
text-indent: 0;
line-height: 40px;
top: 0;
left: 0;
text-align: center;
color: #999999;
}
&:after {
position: absolute;
width: 40px;
height: 40px;
font-family: FontAwesome;
text-indent: 0;
line-height: 40px;
top: 40px;
left: 0;
text-align: center;
color: #FFFFFF;
}
}
&.social-twitter a {
&:before, &:after {
content: "\f099";
}
&:after {
background: #48C4D2;
}
}
&.social-dribbble a {
&:before, &:after {
content: "\f17d";
}
&:after {
background: #EF5B92;
}
}
&.social-facebook a {
&:before, &:after {
content: "\f09a";
}
&:after {
background: #3B5998;
}
}
&.social-google a {
&:before, &:after {
content: "\f0d5";
}
&:after {
background: #DD4B39;
}
}
&.social-linkedin a {
&:before, &:after {
content: "\f0e1";
}
&:after {
background: #71B2D0;
}
}
&.social-youtube a {
&:before, &:after {
content: "\f167";
}
&:after {
background: #F45750;
}
}
&.social-rss a {
&:before, &:after {
content: "\f09e";
}
&:after {
background: #FE9900;
}
}
&.social-behance a {
&:before, &:after {
content: "\f1b4";
}
&:after {
background: #5EB5FB;
}
}
&.social-dropbox a {
&:before, &:after {
content: "\f16b";
}
&:after {
background: #85BEEC;
}
}
&.social-github a {
&:before, &:after {
content: "\f09b";
}
&:after {
background: #94A5B0;
}
}
&.social-skype a {
&:before, &:after {
content: "\f17e";
}
&:after {
background: #70CCEF;
}
}
&.social-spotify a {
&:before, &:after {
content: "\f1bc";
}
&:after {
background: #8BD05A;
}
}
&.social-stumbleupon a {
&:before, &:after {
content: "\f1a4";
}
&:after {
background: #F08066;
}
}
&.social-tumblr a {
&:before, &:after {
content: "\f173";
}
&:after {
background: #85A5C3;
}
}
&.social-vimeo a {
&:before, &:after {
content: "\f194";
}
&:after {
background: #7C99A8;
}
}
&.social-wordpress a {
&:before, &:after {
content: "\f19a";
}
&:after {
background: #649EB9;
}
}
&.social-xing a {
&:before, &:after {
content: "\f168";
}
&:after {
background: #4F9394;
}
}
&.social-yahoo a {
&:before, &:after {
content: "\f19e";
}
&:after {
background: #C38DCF;
}
}
&.social-vk a {
&:before, &:after {
content: "\f189";
}
&:after {
background: #708FAC;
}
}
&.social-instagram a {
&:before, &:after {
content: "\f16d";
}
&:after {
background: #CBAA97;
}
}
&.social-reddit a {
&:before, &:after {
content: "\f1a1";
}
&:after {
background: #FF7A52;
}
}
&.social-flickr a {
&:before, &:after {
content: "\f16e";
}
&:after {
background: #FF4DA9;
}
}
&.social-foursquare a {
&:before, &:after {
content: "\f180";
}
&:after {
background: #6FCCF4;
}
}
}
}
}
.btn-scroll {
position: relative;
overflow: hidden;
font-family: $font-family-default !important;
line-height: inherit !important;
@include transition(all 0.3s ease 0s);
font-size: $font-size-normal;
&[class*="fa-"]:before {
font-family: FontAwesome;
}
&[class*="ti-"]:before {
font-family: themify;
}
&:after {
content: "";
position: absolute;
transition: all 0.3s ease 0s;
z-index: -1;
}
&:before {
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 1;
position: relative;
text-transform: none;
font-size: 100%;
height: 100%;
line-height: 2.5;
position: absolute;
transition: all 0.3s ease 0s;
width: 100%;
}
span {
backface-visibility: hidden;
display: inline-block;
height: 100%;
transition: all 0.3s ease 0s;
width: 100%;
}
&.btn-scroll-top {
&:hover {
span {
@include transform(translateY(300%));
}
&:before {
top: 0;
}
}
&:before {
left: 0;
top: -100%;
}
}
&.btn-scroll-left {
&:hover {
span {
@include transform(translateX(200%));
}
&:before {
left: 0;
}
}
&:before {
left: -100%;
top: 0;
}
}
}
Reference in New Issue View Git Blame Copy Permalink