Created
November 13, 2014 15:06
-
-
Save uraimo/d499dfc683e7a67b89fc to your computer and use it in GitHub Desktop.
Bootstrap 2 theme for bgrins/spectrum color picker button
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
| .sp-boot2.sp-replacer { | |
| margin:0; | |
| overflow:hidden; | |
| cursor:pointer; | |
| padding: 4px; | |
| display:inline-block; | |
| *zoom: 1; | |
| *display: inline; | |
| border: solid 1px #dddddd; | |
| background: #eee; | |
| color: #333; | |
| vertical-align: middle; | |
| cursor: pointer; | |
| background-color: #f5f5f5; | |
| *background-color: #e6e6e6; | |
| background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6); | |
| background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6); | |
| background-image: -o-linear-gradient(top, #ffffff, #e6e6e6); | |
| background-image: linear-gradient(to bottom, #ffffff, #e6e6e6); | |
| background-repeat: repeat-x; | |
| border: 1px solid #cccccc; | |
| *border: 0; | |
| border-color: #e6e6e6 #e6e6e6 #bfbfbf; | |
| border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); | |
| border-bottom-color: #b3b3b3; | |
| -webkit-border-radius: 4px; | |
| -moz-border-radius: 4px; | |
| border-radius: 4px; | |
| -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); | |
| -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); | |
| box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); | |
| } | |
| .sp-boot2.sp-replacer:hover, .sp-boot2.sp-replacer.sp-active { | |
| color: #111; | |
| background-color: #e6e6e6; | |
| *background-color: #d9d9d9; | |
| } | |
| .sp-boot2.sp-replacer:active, | |
| .sp-boot2.sp-replacer.active { | |
| background-color: #cccccc; | |
| } | |
| .sp-boot2.sp-replacer:hover, | |
| .sp-boot2.sp-replacer:focus { | |
| color: #333333; | |
| text-decoration: none; | |
| background-position: 0 -15px; | |
| -webkit-transition: background-position 0.1s linear; | |
| -moz-transition: background-position 0.1s linear; | |
| -o-transition: background-position 0.1s linear; | |
| transition: background-position 0.1s linear; | |
| } | |
| .sp-boot2.sp-replacer:focus { | |
| outline: thin dotted #333; | |
| outline: 5px auto -webkit-focus-ring-color; | |
| outline-offset: -2px; | |
| } | |
| .sp-boot2.sp-replacer.active, | |
| .sp-boot2.sp-replacer:active { | |
| background-image: none; | |
| outline: 0; | |
| -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); | |
| -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); | |
| box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); | |
| } | |
| .sp-boot2.sp-replacer.sp-disabled, | |
| .sp-boot2.sp-replacer.disabled, | |
| .sp-boot2.sp-replacer[disabled] { | |
| cursor:default; | |
| background-image: none; | |
| opacity: 0.65; | |
| filter: alpha(opacity=65); | |
| -webkit-box-shadow: none; | |
| -moz-box-shadow: none; | |
| box-shadow: none; | |
| } |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Started from the .btn of bootstrap 2, with this the color picker doesn't look out of place among other controls 😃