// BUTTONS button:focus { outline: none!important; } .btn { border-radius: 0; border: 0; @extend .z-depth-1; transition: .2s ease-out; color: #fff; margin: 6px; &:hover { @extend .z-depth-1-half; color: #fff; } &:active, &:focus, &.active { outline: 0; color: #fff; } .fa { margin-top: 3px; &.right { margin-left: 3px; } &.left { margin-right: 3px; } } } .btn-group { .btn { margin: 0; } } // Alert buttons .btn-secondary { background-color: $secondary-color; &:hover, &:focus { background-color: lighten( $secondary-color, 5%)!important; color: #fff; } &.active { background-color: darken( $secondary-color, 20%)!important; @extend .z-depth-1-half; &:hover { color: #fff; } &:focus { color: #fff; } } &.dropdown-toggle { color: #fff!important; background-color: $secondary-color!important; @extend .z-depth-1-half; &:hover { color: #fff; background-color: lighten( $secondary-color, 5%)!important; } &:focus { color: #fff; background-color: $secondary-color; } } } .btn-secondary:active:hover { background-color: lighten( $secondary-color, 5%)!important; color: #fff; } .btn-primary { background: $primary-color; &:hover, &:focus { background-color: lighten( $primary-color, 5%)!important; } &.active { background-color: darken( $primary-color, 20%)!important; @extend .z-depth-1-half; } } .btn-default { background: $default-color; &:hover, &:focus { background-color: lighten( $default-color, 5%)!important; } &.active { background-color: darken( $default-color, 20%)!important; @extend .z-depth-1-half; } } .btn-success { background: $success-color; &:hover, &:focus { background-color: lighten( $success-color, 2%)!important; } &.active { background-color: darken( $success-color, 20%)!important; @extend .z-depth-1-half; } } .btn-info { background: $info-color; &:hover, &:focus { background-color: lighten( $info-color, 5%)!important; } &.active { background-color: darken( $info-color, 20%)!important; @extend .z-depth-1-half; } } .btn-warning { background: $warning-color-dark; &:hover, &:focus { background-color: lighten( $warning-color-dark, 6%)!important; } &.active { background-color: darken( $warning-color, 20%)!important; @extend .z-depth-1-half; } } .btn-danger { background: $danger-color-dark; &:hover, &:focus { background-color: lighten( $danger-color-dark, 3%)!important; } &.active { background-color: darken( $danger-color-dark, 15%)!important; @extend .z-depth-1-half; } } .btn-link { background-color: transparent; color: #000; &:hover, &:focus { background-color: transparent; color: #000; } } // Additional button styles .btn-primary-outline { border: 2px solid $primary-color; color: $primary-color-dark; &:hover, &:focus { background-color: transparent; color: $primary-color; } } .btn-secondary-outline { border: 2px solid $secondary-color; color: $secondary-color-dark; &:hover, &:focus { background-color: transparent; color: $secondary-color; border: 2px solid $secondary-color; } } .btn-default-outline { background-color: transparent; border: 2px solid $default-color; color: $default-color-dark; &:hover, &:focus { background-color: transparent; color: $default-color; } } .btn-success-outline { border: 2px solid $success-color; color: $success-color-dark; &:hover, &:focus { background-color: transparent; color: $success-color; } } .btn-info-outline { border: 2px solid $info-color; color: $info-color-dark; &:hover, &:focus { background-color: transparent; color: $info-color; } } .btn-warning-outline { border: 2px solid $warning-color; color: $warning-color-dark; &:hover, &:focus { background-color: transparent; color: $warning-color; } } .btn-danger-outline { border: 2px solid $danger-color; color: $danger-color-dark; &:hover, &:focus { background-color: transparent; color: $danger-color; } } // Pagination .pager li a { border: 0; @extend .z-depth-1; transition: .2s ease-out; &:hover { @extend .z-depth-1-half; } }