Author: sevein Date: Tue Apr 17 15:17:19 2012 New Revision: 11455 Log: Just extend original buttons.less instead of ovewrite the whole file with changes for maintanibility
Modified: branches/2.0/plugins/qtDominionPlugin/css/less/buttons.less Modified: branches/2.0/plugins/qtDominionPlugin/css/less/buttons.less ============================================================================== --- branches/2.0/plugins/qtDominionPlugin/css/less/buttons.less Tue Apr 17 13:14:09 2012 (r11454) +++ branches/2.0/plugins/qtDominionPlugin/css/less/buttons.less Tue Apr 17 15:17:19 2012 (r11455) @@ -15,231 +15,63 @@ * along with Qubit Toolkit. If not, see <http://www.gnu.org/licenses/>. */ -// BUTTON STYLES -// ------------- - - -// Base styles -// -------------------------------------------------- +// Alternative to .btn +.widebtn { -// Core -.btn { - display: inline-block; + display: block; padding: 4px 10px 4px; + margin-bottom: 0; // For input.btn font-size: @baseFontSize; - font-family: @baseFontFamily; + font-family: @baseFontFamily; // ? line-height: @baseLineHeight; + *line-height: 20px; color: @white; text-align: center; - text-shadow: none; text-transform: capitalize; + vertical-align: middle; + cursor: pointer; border: 2px solid @white; + *border: 0; // Remove the border to prevent IE7's black border on input:focus .border-radius(5px); - .box-shadow(none); - cursor: pointer; - background:none; - margin:0 10px 0 0; + margin: 0; + .ie7-restore-left-whitespace(); // Give IE7 some love - // Give IE7 some love - .ie7-restore-left-whitespace(); } - -.widebtn { - display: block; - padding: 4px 10px 4px; - font-size: @baseFontSize; - font-family: @baseFontFamily; - line-height: @baseLineHeight; - color: @white; - text-align: center; - text-shadow: none; - text-transform: capitalize; - border: 2px solid @white; +.btn-huge { + padding: 11px 28px; + font-size: @baseFontSize + 5px; + line-height: normal; .border-radius(5px); - .box-shadow(none); - cursor: pointer; - background:none; - margin:0; - - // Give IE7 some love - .ie7-restore-left-whitespace(); } +.gray { - -// Hover state -.btn:hover, .widebtn:hover { color: @grayDark; - text-decoration: none !important; - background-color: @white; - - // 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 Colors -// -------------------------------------------------- - -.gray { - color:@grayDark; border-color: @grayDark; } + .gray:hover { + color: @white; text-decoration: none !important; background-color: @grayDark; .transition(background-position .1s linear); -} +} .orange { + color:@orange; border-color: @orange; + } + .orange:hover { + color: @white !important; text-decoration: none !important; background-color: @orange; .transition(background-position .1s linear); -} - - - -// Button Sizes -// -------------------------------------------------- - -// Huge -.btn-huge { - padding: 11px 28px; - font-size: @baseFontSize + 5px; - line-height: normal; - .border-radius(5px); -} - -// 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; - } } -- You received this message because you are subscribed to the Google Groups "Qubit Toolkit Commits" group. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/qubit-commits?hl=en.
