Created
July 6, 2013 15:26
-
-
Save orionrush/5940224 to your computer and use it in GitHub Desktop.
Revisions
-
retlehs revised this gist
Oct 14, 2012 . 1 changed file with 2 additions and 1 deletion.There are no files selected for viewing
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 charactersOriginal file line number Diff line number Diff line change @@ -7,7 +7,8 @@ // ------------------------- .alert, .validation_error, #gforms_confirmation_message { padding: 8px 35px 8px 14px; margin-bottom: @baseLineHeight; text-shadow: 0 1px 0 rgba(255,255,255,.5); -
Oct 14, 2012 .There are no files selected for viewing
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 charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,72 @@ // // Alerts // -------------------------------------------------- // Base styles // ------------------------- .alert, .validation_error { padding: 8px 35px 8px 14px; margin-bottom: @baseLineHeight; text-shadow: 0 1px 0 rgba(255,255,255,.5); background-color: @warningBackground; border: 1px solid @warningBorder; .border-radius(4px); color: @warningText; } .alert h4 { margin: 0; } // Adjust close link position .alert .close { position: relative; top: -2px; right: -21px; line-height: @baseLineHeight; } // Alternate styles // ------------------------- .alert-success { background-color: @successBackground; border-color: @successBorder; color: @successText; } .alert-danger, .alert-error, .validation_error, .gform_wrapper .gfield_error input[type=text], .gform_wrapper .gfield_error input[type=tel], .gform_wrapper .gfield_error input[type=email], .gform_wrapper .gfield_error textarea, .gform_wrapper .gfield_error select { background-color: @errorBackground; border-color: @errorBorder; color: @errorText; } .alert-info { background-color: @infoBackground; border-color: @infoBorder; color: @infoText; } // Block alerts // ------------------------- .alert-block { padding-top: 14px; padding-bottom: 14px; } .alert-block > p, .alert-block > ul { margin-bottom: 0; } .alert-block p + p { margin-top: 5px; } 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 charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,27 @@ .gform_wrapper ul { list-style: none; margin-left: 0; } .gform_wrapper form { margin-bottom: 0; } .gfield_radio input, .gfield_checkbox input { vertical-align: 0; } .gfield_radio label, .gfield_checkbox label { display: inline-block; margin-left: 8px; } // Hide the input-specific validation messages // since we'll be applying Bootstrap error styling to the fields .gform_wrapper .validation_message { display: none; } // Use Bootstrap's "red" variable for the required asterisk: .gform_wrapper .gfield_required { color: @red; padding-left: 1px; } // Apply error text styling to labels .gform_wrapper .gfield_error label { color: @errorText; } 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 charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,234 @@ // // Buttons // -------------------------------------------------- // Base styles // -------------------------------------------------- // Core .btn, .gform_button { display: inline-block; .ie7-inline-block(); padding: 4px 14px; margin-bottom: 0; // For input.btn font-size: @baseFontSize; line-height: @baseLineHeight; *line-height: @baseLineHeight; 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); } // Focus state for keyboard and accessibility &:focus { .tab-focus(); } // Active state &.active, &:active { background-color: darken(@white, 10%); background-color: darken(@white, 15%) e("\9"); 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-color: darken(@white, 10%); background-image: none; .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 [class^="icon-"] { margin-top: 2px; } // Small .btn-small { padding: 3px 9px; font-size: @baseFontSize - 2px; line-height: @baseLineHeight - 2px; } .btn-small [class^="icon-"] { margin-top: 0; } // Mini .btn-mini { padding: 2px 6px; font-size: @baseFontSize - 3px; line-height: @baseLineHeight - 3px; } // 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 // -------------------------------------------------- // 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, .gform_button { // 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, .gform_button { .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; }