%PDF- %PDF-
Direktori : /home1/lightco1/public_html/administrator/templates/isis/less/bootstrap/ |
Current File : //home1/lightco1/public_html/administrator/templates/isis/less/bootstrap/buttons.less |
// // Buttons // -------------------------------------------------- // Base styles // -------------------------------------------------- // Core .btn { display: inline-block; .ie7-inline-block(); padding: 4px 12px; margin-bottom: 0; // For input.btn font-size: @baseFontSize; line-height: @baseLineHeight; text-align: center; vertical-align: middle; cursor: pointer; background-color: @btnBackground; color: #333; // .buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75)); border: 1px solid @btnBorder; .border-radius(@baseBorderRadius); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); &:hover, &:focus { background-color: @btnBackgroundHighlight; text-decoration: none; text-shadow: none; } // Focus state for keyboard and accessibility &:focus { .tab-focus(); } // Active state &.active, &:active { background-image: none; outline: 0; // .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)"); } // Disabled state &.disabled, &[disabled] { cursor: default; background-image: none; .opacity(65); .box-shadow(none); } } // Button Sizes // -------------------------------------------------- // Large .btn-large { padding: @paddingLarge; font-size: @fontSizeLarge; .border-radius(@borderRadiusLarge); } .btn-large [class^="icon-"], .btn-large [class*=" icon-"] { margin-top: 4px; } // Small .btn-small { padding: @paddingSmall; font-size: @fontSizeSmall; .border-radius(@borderRadiusSmall); } .btn-small [class^="icon-"], .btn-small [class*=" icon-"] { margin-top: 0; } .btn-mini [class^="icon-"], .btn-mini [class*=" icon-"] { margin-top: -1px; } // Mini .btn-mini { padding: @paddingMini; font-size: @fontSizeMini; .border-radius(@borderRadiusSmall); } // Block button // ------------------------- .btn-block { display: block; width: 100%; padding-left: 0; padding-right: 0; .box-sizing(border-box); } // Vertically space out multiple block buttons .btn-block + .btn-block { margin-top: 5px; } // Specificity overrides input[type="submit"], input[type="reset"], input[type="button"] { &.btn-block { width: 100%; } } // Alternate buttons // -------------------------------------------------- .btn-primary, .btn-warning, .btn-danger, .btn-success, .btn-info, .btn-inverse { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } // 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-primary { border: 1px solid @btnPrimaryBackgroundHighlight; border: 1px solid rgba(0, 0, 0, 0.2); color: #fff; background-color: @btnPrimaryBackground; &:hover, &:focus { background-color: darken(@btnPrimaryBackground, 15%); color: #fff; text-decoration: none; } } // Warning appears are orange .btn-warning { border: 1px solid @btnWarningBackground; border: 1px solid rgba(0, 0, 0, 0.2); color: #fff; background-color: @btnWarningBackground; &:hover, &:focus { background-color: darken(@btnWarningBackground, 15%); color: #fff; text-decoration: none; text-shadow: none; } } // Danger and error appear as red .btn-danger { border: 1px solid @btnDangerBackground; border: 1px solid rgba(0, 0, 0, 0.2); color: #fff; background-color: @btnDangerBackground; &:hover, &:focus { background-color: darken(@btnDangerBackground, 15%); color: #fff; text-decoration: none; } } // Success appears as green .btn-success { border: 1px solid @btnSuccessBackgroundHighlight; border: 1px solid rgba(0, 0, 0, 0.2); color: #fff; background-color: @btnSuccessBackground; &:hover, &:focus { background-color: darken(@btnSuccessBackground, 15%); color: #fff; text-decoration: none; } } // Info appears as a neutral blue .btn-info { border: 1px solid @btnInfoBackground; border: 1px solid rgba(0, 0, 0, 0.2); color: #fff; background-color: @btnInfoBackground; &:hover, &:focus { background-color: darken(@btnInfoBackground, 15%); color: #fff; text-decoration: none; } } // Inverse appears as dark gray .btn-inverse { border: 1px solid @btnInverseBackground; border: 1px solid rgba(0, 0, 0, 0.2); color: #fff; background-color: @btnInverseBackground; &:hover, &:focus { background-color: darken(@btnInverseBackground, 15%); color: #fff; text-decoration: none; } } // 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, .btn-link:focus { color: @linkColorHover; text-decoration: underline; background-color: transparent; } .btn-link[disabled]:hover, .btn-link[disabled]:focus { color: @grayDark; text-decoration: none; }