From 72bdb543759b5ffbdf5c2cc71294ad4f1f2996b2 Mon Sep 17 00:00:00 2001 From: Arun Persaud Date: Sat, 8 Mar 2014 22:02:34 -0800 Subject: updated css/js libraries * bootstrap 3.1.1 * jquery 2.1.0 * less 1.7.0 mostly bootstrap had to be adjusted, e.g. different names like hero-unit->jumbotron, etc. --- css/bootstrap/buttons.less | 270 +++++++++++++++++---------------------------- 1 file changed, 99 insertions(+), 171 deletions(-) (limited to 'css/bootstrap/buttons.less') diff --git a/css/bootstrap/buttons.less b/css/bootstrap/buttons.less index 3fd1e95..d4fc156 100644 --- a/css/bootstrap/buttons.less +++ b/css/bootstrap/buttons.less @@ -6,109 +6,142 @@ // Base styles // -------------------------------------------------- -// Core .btn { display: inline-block; - .ie7-inline-block(); - padding: 4px 14px; margin-bottom: 0; // For input.btn - font-size: @baseFontSize; - line-height: @baseLineHeight; - *line-height: @baseLineHeight; + font-weight: @btn-font-weight; text-align: center; vertical-align: middle; cursor: pointer; - .buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75)); - border: 1px solid @btnBorder; - *border: 0; // Remove the border to prevent IE7's black border on input:focus - border-bottom-color: darken(@btnBorder, 10%); - .border-radius(4px); - .ie7-restore-left-whitespace(); // Give IE7 some love - .box-shadow(inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)); - - // Hover state - &:hover { - color: @grayDark; - text-decoration: none; - background-color: darken(@white, 10%); - *background-color: darken(@white, 15%); /* Buttons in IE7 don't get borders, so darken on hover */ - 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); + background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214 + border: 1px solid transparent; + white-space: nowrap; + .button-size(@padding-base-vertical; @padding-base-horizontal; @font-size-base; @line-height-base; @border-radius-base); + .user-select(none); + + &, + &:active, + &.active { + &:focus { + .tab-focus(); + } } - // Focus state for keyboard and accessibility + &:hover, &:focus { - .tab-focus(); + color: @btn-default-color; + text-decoration: none; } - // Active state - &.active, - &:active { - background-color: darken(@white, 10%); - background-color: darken(@white, 15%) e("\9"); - background-image: none; + &:active, + &.active { outline: 0; - .box-shadow(inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)); + background-image: none; + .box-shadow(inset 0 3px 5px rgba(0,0,0,.125)); } - // Disabled state &.disabled, - &[disabled] { - cursor: default; - background-color: darken(@white, 10%); - background-image: none; - .opacity(65); + &[disabled], + fieldset[disabled] & { + cursor: not-allowed; + pointer-events: none; // Future-proof disabling of clicks + .opacity(.65); .box-shadow(none); } - } - -// Button Sizes +// Alternate buttons // -------------------------------------------------- -// Large -.btn-large { - padding: 9px 14px; - font-size: @baseFontSize + 2px; - line-height: normal; - .border-radius(5px); +.btn-default { + .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border); +} +.btn-primary { + .button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border); +} +// Success appears as green +.btn-success { + .button-variant(@btn-success-color; @btn-success-bg; @btn-success-border); } -.btn-large [class^="icon-"] { - margin-top: 2px; +// Info appears as blue-green +.btn-info { + .button-variant(@btn-info-color; @btn-info-bg; @btn-info-border); } - -// Small -.btn-small { - padding: 3px 9px; - font-size: @baseFontSize - 2px; - line-height: @baseLineHeight - 2px; +// Warning appears as orange +.btn-warning { + .button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border); } -.btn-small [class^="icon-"] { - margin-top: 0; +// Danger and error appear as red +.btn-danger { + .button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border); } -// Mini -.btn-mini { - padding: 2px 6px; - font-size: @baseFontSize - 3px; - line-height: @baseLineHeight - 3px; + +// Link buttons +// ------------------------- + +// Make a button look and behave like a link +.btn-link { + color: @link-color; + font-weight: normal; + cursor: pointer; + border-radius: 0; + + &, + &:active, + &[disabled], + fieldset[disabled] & { + background-color: transparent; + .box-shadow(none); + } + &, + &:hover, + &:focus, + &:active { + border-color: transparent; + } + &:hover, + &:focus { + color: @link-hover-color; + text-decoration: underline; + background-color: transparent; + } + &[disabled], + fieldset[disabled] & { + &:hover, + &:focus { + color: @btn-link-disabled-color; + text-decoration: none; + } + } +} + + +// Button Sizes +// -------------------------------------------------- + +.btn-lg { + // line-height: ensure even-numbered height of button next to large input + .button-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large); +} +.btn-sm { + // line-height: ensure proper height of button next to small input + .button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small); +} +.btn-xs { + .button-size(@padding-xs-vertical; @padding-xs-horizontal; @font-size-small; @line-height-small; @border-radius-small); } // Block button -// ------------------------- +// -------------------------------------------------- .btn-block { display: block; width: 100%; padding-left: 0; padding-right: 0; - .box-sizing(border-box); } // Vertically space out multiple block buttons @@ -124,108 +157,3 @@ input[type="button"] { width: 100%; } } - - - -// Alternate buttons -// -------------------------------------------------- - -// 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, -.btn-inverse.active { - color: rgba(255,255,255,.75); -} - -// Set the backgrounds -// ------------------------- -.btn { - // reset here as of 2.0.3 due to Recess property order - border-color: #c5c5c5; - border-color: rgba(0,0,0,.15) rgba(0,0,0,.15) rgba(0,0,0,.25); -} -.btn-primary { - .buttonBackground(@btnPrimaryBackground, @btnPrimaryBackgroundHighlight); -} -// Warning appears are orange -.btn-warning { - .buttonBackground(@btnWarningBackground, @btnWarningBackgroundHighlight); -} -// Danger and error appear as red -.btn-danger { - .buttonBackground(@btnDangerBackground, @btnDangerBackgroundHighlight); -} -// Success appears as green -.btn-success { - .buttonBackground(@btnSuccessBackground, @btnSuccessBackgroundHighlight); -} -// Info appears as a neutral blue -.btn-info { - .buttonBackground(@btnInfoBackground, @btnInfoBackgroundHighlight); -} -// Inverse appears as dark gray -.btn-inverse { - .buttonBackground(@btnInverseBackground, @btnInverseBackgroundHighlight); -} - - -// Cross-browser Jank -// -------------------------------------------------- - -button.btn, -input[type="submit"].btn { - - // Firefox 3.6 only I believe - &::-moz-focus-inner { - padding: 0; - border: 0; - } - - // IE7 has some default padding on button controls - *padding-top: 3px; - *padding-bottom: 3px; - - &.btn-large { - *padding-top: 7px; - *padding-bottom: 7px; - } - &.btn-small { - *padding-top: 3px; - *padding-bottom: 3px; - } - &.btn-mini { - *padding-top: 1px; - *padding-bottom: 1px; - } -} - - -// Link buttons -// -------------------------------------------------- - -// Make a button look and behave like a link -.btn-link, -.btn-link:active, -.btn-link[disabled] { - background-color: transparent; - background-image: none; - .box-shadow(none); -} -.btn-link { - border-color: transparent; - cursor: pointer; - color: @linkColor; - .border-radius(0); -} -.btn-link:hover { - color: @linkColorHover; - text-decoration: underline; - background-color: transparent; -} -.btn-link[disabled]:hover { - color: @grayDark; - text-decoration: none; -} -- cgit v1.2.3-18-g5258