| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165 |
- // BUTTON STYLES
- // -------------
-
-
- // Base styles
- // --------------------------------------------------
-
- // Core
- .btn {
- display: inline-block;
- padding: 4px 10px 4px;
- font-size: @baseFontSize;
- line-height: @baseLineHeight;
- color: @grayDark;
- text-align: center;
- text-shadow: 0 1px 1px rgba(255,255,255,.75);
- #gradient > .vertical-three-colors(@white, @white, 25%, darken(@white, 10%)); // Don't use .gradientbar() here since it does a three-color gradient
- border: 1px solid #ccc;
- border-bottom-color: #bbb;
- .border-radius(4px);
- @shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
- .box-shadow(@shadow);
- cursor: pointer;
-
- // Give IE7 some love
- .ie7-restore-left-whitespace();
- }
-
- // Hover state
- .btn:hover {
- color: @grayDark;
- text-decoration: none;
- background-color: darken(@white, 10%);
- background-position: 0 -15px;
-
- // transition is only when going to hover, otherwise the background
- // behind the gradient (there for IE<=9 fallback) gets mismatched
- .transition(background-position .1s linear);
- }
-
- // Focus state for keyboard and accessibility
- .btn:focus {
- .tab-focus();
- }
-
- // Active state
- .btn.active,
- .btn:active {
- background-image: none;
- @shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
- .box-shadow(@shadow);
- background-color: darken(@white, 10%);
- background-color: darken(@white, 15%) e("\9");
- color: rgba(0,0,0,.5);
- outline: 0;
- }
-
- // Disabled state
- .btn.disabled,
- .btn[disabled] {
- cursor: default;
- background-image: none;
- background-color: darken(@white, 10%);
- .opacity(65);
- .box-shadow(none);
- }
-
-
- // Button Sizes
- // --------------------------------------------------
-
- // Large
- .btn-large {
- padding: 9px 14px;
- font-size: @baseFontSize + 2px;
- line-height: normal;
- .border-radius(5px);
- }
- .btn-large .icon {
- margin-top: 1px;
- }
-
- // Small
- .btn-small {
- padding: 5px 9px;
- font-size: @baseFontSize - 2px;
- line-height: @baseLineHeight - 2px;
- }
- .btn-small .icon {
- margin-top: -1px;
- }
-
-
- // Alternate buttons
- // --------------------------------------------------
-
- // Set text color
- // -------------------------
- .btn-primary,
- .btn-primary:hover,
- .btn-warning,
- .btn-warning:hover,
- .btn-danger,
- .btn-danger:hover,
- .btn-success,
- .btn-success:hover,
- .btn-info,
- .btn-info:hover {
- text-shadow: 0 -1px 0 rgba(0,0,0,.25);
- color: @white;
- }
- // Provide *some* extra contrast for those who can get it
- .btn-primary.active,
- .btn-warning.active,
- .btn-danger.active,
- .btn-success.active,
- .btn-info.active {
- color: rgba(255,255,255,.75);
- }
-
- // Set the backgrounds
- // -------------------------
- .btn-primary {
- .buttonBackground(@primaryButtonBackground, spin(@primaryButtonBackground, 20));
- }
- // Warning appears are orange
- .btn-warning {
- .buttonBackground(lighten(@orange, 15%), @orange);
- }
- // Danger and error appear as red
- .btn-danger {
- .buttonBackground(#ee5f5b, #bd362f);
- }
- // Success appears as green
- .btn-success {
- .buttonBackground(#62c462, #51a351);
- }
- // Info appears as a neutral blue
- .btn-info {
- .buttonBackground(#5bc0de, #2f96b4);
- }
-
-
- // Cross-browser Jank
- // --------------------------------------------------
-
- button.btn,
- input[type="submit"].btn {
- &::-moz-focus-inner {
- padding: 0;
- border: 0;
- }
-
- // IE7 has some default padding on button controls
- *padding-top: 2px;
- *padding-bottom: 2px;
- &.large {
- *padding-top: 7px;
- *padding-bottom: 7px;
- }
- &.small {
- *padding-top: 3px;
- *padding-bottom: 3px;
- }
- }
|