Instantly share code, notes, and snippets.
Last active
December 9, 2016 17:22
-
Star
0
(0)
You must be signed in to star a gist -
Fork
0
(0)
You must be signed in to fork a gist
-
Save xmon/a8e49163a73faae1f6f288c61f9a6f3d to your computer and use it in GitHub Desktop.
Classes for outline and outline inversed button for Bootstrap 3.x LESS and SCSS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Button outline style | |
| .btn-outline { | |
| background-color: transparent; | |
| &.btn-default { | |
| color: @btn-default-color; | |
| border-color: @btn-default-color; | |
| &:hover { | |
| background-color: @btn-default-color; | |
| } | |
| } | |
| &.btn-primary { | |
| color: @btn-primary-bg; | |
| border-color: @btn-primary-bg; | |
| &:hover { | |
| background-color: @btn-primary-bg; | |
| border-color: @btn-primary-border; | |
| } | |
| } | |
| &.btn-success { | |
| color: @btn-success-bg; | |
| border-color: @btn-success-bg; | |
| &:hover { | |
| background-color: @btn-success-bg; | |
| border-color: @btn-success-border; | |
| } | |
| } | |
| &.btn-info { | |
| color: @btn-info-bg; | |
| border-color: @btn-info-bg; | |
| &:hover { | |
| background-color: @btn-info-bg; | |
| border-color: @btn-info-border; | |
| } | |
| } | |
| &.btn-warning { | |
| color: @btn-warning-bg; | |
| border-color: @btn-warning-bg; | |
| &:hover { | |
| background-color: @btn-warning-bg; | |
| border-color: @btn-warning-border; | |
| } | |
| } | |
| &.btn-danger { | |
| color: @btn-danger-bg; | |
| border-color: @btn-danger-bg; | |
| &:hover { | |
| background-color: @btn-danger-bg; | |
| border-color: @btn-danger-border; | |
| } | |
| } | |
| &.btn-default:hover, | |
| &.btn-primary:hover, | |
| &.btn-success:hover, | |
| &.btn-info:hover, | |
| &.btn-warning:hover, | |
| &.btn-danger:hover { | |
| color: #fff; | |
| } | |
| } | |
| // Button outline style on inverse background | |
| .btn-outline-inverse { | |
| background-color: transparent; | |
| border-color: #fff; | |
| color: #fff; | |
| &:hover { | |
| background-color: #fff; | |
| } | |
| &.btn-default:hover { | |
| color: @btn-default-color; | |
| } | |
| &.btn-primary:hover { | |
| color: @brand-primary; | |
| } | |
| &.btn-success:hover { | |
| color: @brand-success; | |
| } | |
| &.btn-info:hover { | |
| color: @brand-info; | |
| } | |
| &.btn-warning:hover { | |
| color: @brand-warning; | |
| } | |
| &.btn-danger:hover { | |
| color: @brand-danger; | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Button outline style | |
| .btn-outline { | |
| background-color: transparent; | |
| &.btn-default { | |
| color: $btn-default-color; | |
| border-color: $btn-default-color; | |
| &:hover { | |
| background-color: $btn-default-color; | |
| } | |
| } | |
| &.btn-primary { | |
| color: $btn-primary-bg; | |
| border-color: $btn-primary-bg; | |
| &:hover { | |
| background-color: $btn-primary-bg; | |
| border-color: $btn-primary-border; | |
| } | |
| } | |
| &.btn-success { | |
| color: $btn-success-bg; | |
| border-color: $btn-success-bg; | |
| &:hover { | |
| background-color: $btn-success-bg; | |
| border-color: $btn-success-border; | |
| } | |
| } | |
| &.btn-info { | |
| color: $btn-info-bg; | |
| border-color: $btn-info-bg; | |
| &:hover { | |
| background-color: $btn-info-bg; | |
| border-color: $btn-info-border; | |
| } | |
| } | |
| &.btn-warning { | |
| color: $btn-warning-bg; | |
| border-color: $btn-warning-bg; | |
| &:hover { | |
| background-color: $btn-warning-bg; | |
| border-color: $btn-warning-border; | |
| } | |
| } | |
| &.btn-danger { | |
| color: $btn-danger-bg; | |
| border-color: $btn-danger-bg; | |
| &:hover { | |
| background-color: $btn-danger-bg; | |
| border-color: $btn-danger-border; | |
| } | |
| } | |
| &.btn-default:hover, | |
| &.btn-primary:hover, | |
| &.btn-success:hover, | |
| &.btn-info:hover, | |
| &.btn-warning:hover, | |
| &.btn-danger:hover { | |
| color: #fff; | |
| } | |
| } | |
| // Button outline style on inverse background | |
| .btn-outline-inverse { | |
| background-color: transparent; | |
| border-color: #fff; | |
| color: #fff; | |
| &:hover { | |
| background-color: #fff; | |
| } | |
| &.btn-default:hover { | |
| color: $btn-default-color; | |
| } | |
| &.btn-primary:hover { | |
| color: $brand-primary; | |
| } | |
| &.btn-success:hover { | |
| color: $brand-success; | |
| } | |
| &.btn-info:hover { | |
| color: $brand-info; | |
| } | |
| &.btn-warning:hover { | |
| color: $brand-warning; | |
| } | |
| &.btn-danger:hover { | |
| color: $brand-danger; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment