diff --git a/assets/less/accordion.less b/assets/less/accordion.less index d63523b..c3023ac 100644 --- a/assets/less/accordion.less +++ b/assets/less/accordion.less @@ -5,30 +5,27 @@ // Parent container .accordion { - margin-bottom: @baseLineHeight; + margin-bottom: @line-height-computed; } // Group == heading + body .accordion-group { margin-bottom: 2px; - border: 1px solid #e5e5e5; - .border-radius(@baseBorderRadius); + border: 1px solid @accordion-border-color; + border-radius: @border-radius-base; } .accordion-heading { border-bottom: 0; -} -.accordion-heading .accordion-toggle { - display: block; - padding: 8px 15px; -} -// General toggle styles -.accordion-toggle { - cursor: pointer; + .accordion-toggle { + display: block; + padding: 8px 15px; + cursor: pointer; + } } // Inner needs the styles because you can't animate properly with any styles on the element .accordion-inner { padding: 9px 15px; - border-top: 1px solid #e5e5e5; + border-top: 1px solid @accordion-border-color; } diff --git a/assets/less/alerts.less b/assets/less/alerts.less index 0116b19..66aa6cf 100644 --- a/assets/less/alerts.less +++ b/assets/less/alerts.less @@ -7,73 +7,63 @@ // ------------------------- .alert { - 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(@baseBorderRadius); -} -.alert, -.alert h4 { - // Specified for the h4 to prevent conflicts of changing @headingsColor - color: @warningText; -} -.alert h4 { - margin: 0; -} + padding: 10px 35px 10px 15px; + margin-bottom: @line-height-computed; + color: @alert-text; + background-color: @alert-bg; + border: 1px solid @alert-border; + border-radius: @alert-border-radius; -// Adjust close link position -.alert .close { - position: relative; - top: -2px; - right: -21px; - line-height: @baseLineHeight; -} + // Headings for larger alerts + h4 { + margin-top: 0; + // Specified for the h4 to prevent conflicts of changing @headingsColor + color: inherit; + } + // Match the hr to the border of the alert + hr { + border-top-color: darken(@alert-border, 5%); + } + // Provide class for links that match alerts + .alert-link { + font-weight: 500; + color: darken(@alert-text, 10%); + } + // Adjust close link position + .close { + position: relative; + top: -2px; + right: -21px; + color: inherit; + } +} // Alternate styles // ------------------------- .alert-success { - background-color: @successBackground; - border-color: @successBorder; - color: @successText; + .alert-variant(@alert-success-bg, @alert-success-border, @alert-success-text); } -.alert-success h4 { - color: @successText; -} -.alert-danger, -.alert-error { - background-color: @errorBackground; - border-color: @errorBorder; - color: @errorText; -} -.alert-danger h4, -.alert-error h4 { - color: @errorText; +.alert-danger { + .alert-variant(@alert-danger-bg, @alert-danger-border, @alert-danger-text); } .alert-info { - background-color: @infoBackground; - border-color: @infoBorder; - color: @infoText; + .alert-variant(@alert-info-bg, @alert-info-border, @alert-info-text); } -.alert-info h4 { - 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; + padding-top: 15px; + padding-bottom: 15px; + + > p, + > ul { + margin-bottom: 0; + } + p + p { + margin-top: 5px; + } } diff --git a/assets/less/badges.less b/assets/less/badges.less new file mode 100644 index 0000000..216d601 --- /dev/null +++ b/assets/less/badges.less @@ -0,0 +1,51 @@ +// +// Badges +// -------------------------------------------------- + + +// Base classes +.badge { + display: inline-block; + min-width: 10px; + padding: 3px 7px; + font-size: @font-size-small; + font-weight: bold; + color: @badge-color; + line-height: 1; + vertical-align: middle; + white-space: nowrap; + text-align: center; + background-color: @badge-bg; + border-radius: 10px; + + // Empty labels/badges collapse + &:empty { + display: none; + } +} + +// Hover state, but only for links +a.badge { + &:hover, + &:focus { + color: @badge-link-hover-color; + text-decoration: none; + cursor: pointer; + } +} + +// Quick fix for labels/badges in buttons +.btn .badge { + position: relative; + top: -1px; +} + +// Account for counters in navs +a.list-group-item.active > .badge, +.nav-pills > .active > a > .badge { + color: @badge-active-color; + background-color: @badge-active-bg; +} +.nav-pills > li > a > .badge { + margin-left: 3px; +} diff --git a/assets/less/bootstrap.less b/assets/less/bootstrap.less index d4ebf37..307f72f 100644 --- a/assets/less/bootstrap.less +++ b/assets/less/bootstrap.less @@ -1,46 +1,43 @@ /*! - * Bootstrap v2.3.2 + * Bootstrap v3.0.0 * - * Copyright 2012 Twitter, Inc + * Copyright 2013 Twitter, Inc * Licensed under the Apache License v2.0 * http://www.apache.org/licenses/LICENSE-2.0 * - * Designed and built with all the love in the world @twitter by @mdo and @fat. + * Designed and built with all the love in the world by @mdo and @fat. */ // Core variables and mixins -@import "variables.less"; // Modify this for custom colors, font-sizes, etc +@import "variables.less"; @import "mixins.less"; -// CSS Reset -@import "reset.less"; +// Reset +@import "normalize.less"; +@import "print.less"; -// Grid system and page structure +// Core CSS @import "scaffolding.less"; -@import "grid.less"; -@import "layouts.less"; - -// Base CSS @import "type.less"; @import "code.less"; -@import "forms.less"; +@import "grid.less"; + @import "tables.less"; +@import "forms.less"; +@import "buttons.less"; // Components: common -@import "sprites.less"; -@import "dropdowns.less"; -@import "wells.less"; @import "component-animations.less"; +@import "dropdowns.less"; +@import "list-group.less"; +@import "panels.less"; +@import "wells.less"; @import "close.less"; -// Components: Buttons & Alerts -@import "buttons.less"; -@import "button-groups.less"; -@import "alerts.less"; // Note: alerts share common CSS with buttons and thus have styles in buttons.less - // Components: Nav @import "navs.less"; @import "navbar.less"; +@import "button-groups.less"; @import "breadcrumbs.less"; @import "pagination.less"; @import "pager.less"; @@ -51,13 +48,16 @@ @import "popovers.less"; // Components: Misc +@import "alerts.less"; @import "thumbnails.less"; @import "media.less"; -@import "labels-badges.less"; +@import "labels.less"; +@import "badges.less"; @import "progress-bars.less"; @import "accordion.less"; @import "carousel.less"; -@import "hero-unit.less"; +@import "jumbotron.less"; // Utility classes @import "utilities.less"; // Has to be last to override when necessary +@import "responsive-utilities.less"; diff --git a/assets/less/breadcrumbs.less b/assets/less/breadcrumbs.less index f753df6..92643d1 100644 --- a/assets/less/breadcrumbs.less +++ b/assets/less/breadcrumbs.less @@ -5,20 +5,19 @@ .breadcrumb { padding: 8px 15px; - margin: 0 0 @baseLineHeight; + margin-bottom: @line-height-computed; list-style: none; - background-color: #f5f5f5; - .border-radius(@baseBorderRadius); + background-color: @breadcrumb-bg; + border-radius: @border-radius-base; > li { display: inline-block; - .ie7-inline-block(); - text-shadow: 0 1px 0 @white; - > .divider { + &+li:before { + content: "/\00a0"; // Unicode space added since inline-block means non-collapsing white-space padding: 0 5px; - color: #ccc; + color: @breadcrumb-color; } } > .active { - color: @grayLight; + color: @breadcrumb-active-color; } } diff --git a/assets/less/button-groups.less b/assets/less/button-groups.less index 55cdc60..f345f4e 100644 --- a/assets/less/button-groups.less +++ b/assets/less/button-groups.less @@ -2,90 +2,85 @@ // Button groups // -------------------------------------------------- - -// Make the div behave like a button -.btn-group { - position: relative; - display: inline-block; - .ie7-inline-block(); - font-size: 0; // remove as part 1 of font-size inline-block hack - vertical-align: middle; // match .btn alignment given font-size hack above - white-space: nowrap; // prevent buttons from wrapping when in tight spaces (e.g., the table on the tests page) - .ie7-restore-left-whitespace(); +// Button carets +.btn .caret { + border-top-color: @btn-default-color; +} +.dropup .btn .caret { + border-bottom-color: @btn-default-color; } -// Space out series of button groups -.btn-group + .btn-group { - margin-left: 5px; +// Make the div behave like a button +.btn-group, +.btn-group-vertical { + position: relative; + display: inline-block; + vertical-align: middle; // match .btn alignment given font-size hack above + > .btn { + position: relative; + float: left; + // Bring the "active" button to the front + &:hover, + &:active { + z-index: 2; + } + } +} + +// Prevent double borders when buttons are next to each other +.btn-group .btn + .btn { + margin-left: -1px; } // Optional: Group multiple button groups together for a toolbar .btn-toolbar { - font-size: 0; // Hack to remove whitespace that results from using inline-block - margin-top: @baseLineHeight / 2; - margin-bottom: @baseLineHeight / 2; - > .btn + .btn, - > .btn-group + .btn, - > .btn + .btn-group { - margin-left: 5px; + .clearfix(); + + .btn-group { + float: left; + } + // Space out series of button groups + > .btn, + > .btn-group { + + .btn, + + .btn-group { + margin-left: 5px; + } } } -// Float them, remove border radius, then re-add to first and last elements -.btn-group > .btn { - position: relative; - .border-radius(0); -} -.btn-group > .btn + .btn { - margin-left: -1px; -} -.btn-group > .btn, -.btn-group > .dropdown-menu, -.btn-group > .popover { - font-size: @baseFontSize; // redeclare as part 2 of font-size inline-block hack -} - -// Reset fonts for other sizes -.btn-group > .btn-mini { - font-size: @fontSizeMini; -} -.btn-group > .btn-small { - font-size: @fontSizeSmall; -} -.btn-group > .btn-large { - font-size: @fontSizeLarge; +.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) { + border-radius: 0; } // Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match .btn-group > .btn:first-child { margin-left: 0; - .border-top-left-radius(@baseBorderRadius); - .border-bottom-left-radius(@baseBorderRadius); + &:not(:last-child):not(.dropdown-toggle) { + .border-right-radius(0); + } } // Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it -.btn-group > .btn:last-child, -.btn-group > .dropdown-toggle { - .border-top-right-radius(@baseBorderRadius); - .border-bottom-right-radius(@baseBorderRadius); -} -// Reset corners for large buttons -.btn-group > .btn.large:first-child { - margin-left: 0; - .border-top-left-radius(@borderRadiusLarge); - .border-bottom-left-radius(@borderRadiusLarge); -} -.btn-group > .btn.large:last-child, -.btn-group > .large.dropdown-toggle { - .border-top-right-radius(@borderRadiusLarge); - .border-bottom-right-radius(@borderRadiusLarge); +.btn-group > .btn:last-child:not(:first-child), +.btn-group > .dropdown-toggle:not(:first-child) { + .border-left-radius(0); } -// On hover/focus/active, bring the proper btn to front -.btn-group > .btn:hover, -.btn-group > .btn:focus, -.btn-group > .btn:active, -.btn-group > .btn.active { - z-index: 2; +// Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group) +.btn-group > .btn-group { + float: left; +} +.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn { + border-radius: 0; +} +.btn-group > .btn-group:first-child { + > .btn:last-child, + > .dropdown-toggle { + .border-right-radius(0); + } +} +.btn-group > .btn-group:last-child > .btn:first-child { + .border-left-radius(0); } // On active and open, don't show outline @@ -103,78 +98,26 @@ .btn-group > .btn + .dropdown-toggle { padding-left: 8px; padding-right: 8px; - .box-shadow(~"inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)"); - *padding-top: 5px; - *padding-bottom: 5px; -} -.btn-group > .btn-mini + .dropdown-toggle { - padding-left: 5px; - padding-right: 5px; - *padding-top: 2px; - *padding-bottom: 2px; -} -.btn-group > .btn-small + .dropdown-toggle { - *padding-top: 5px; - *padding-bottom: 4px; } .btn-group > .btn-large + .dropdown-toggle { padding-left: 12px; padding-right: 12px; - *padding-top: 7px; - *padding-bottom: 7px; } -.btn-group.open { - - // The clickable button for toggling the menu - // Remove the gradient and set the same inset shadow as the :active state - .dropdown-toggle { - background-image: none; - .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)"); - } - - // Keep the hover's background when dropdown is open - .btn.dropdown-toggle { - background-color: @btnBackgroundHighlight; - } - .btn-primary.dropdown-toggle { - background-color: @btnPrimaryBackgroundHighlight; - } - .btn-warning.dropdown-toggle { - background-color: @btnWarningBackgroundHighlight; - } - .btn-danger.dropdown-toggle { - background-color: @btnDangerBackgroundHighlight; - } - .btn-success.dropdown-toggle { - background-color: @btnSuccessBackgroundHighlight; - } - .btn-info.dropdown-toggle { - background-color: @btnInfoBackgroundHighlight; - } - .btn-inverse.dropdown-toggle { - background-color: @btnInverseBackgroundHighlight; - } +// The clickable button for toggling the menu +// Remove the gradient and set the same inset shadow as the :active state +.btn-group.open .dropdown-toggle { + .box-shadow(inset 0 3px 5px rgba(0,0,0,.125)); } // Reposition the caret .btn .caret { - margin-top: 8px; margin-left: 0; } // Carets in other button sizes .btn-large .caret { - margin-top: 6px; -} -.btn-large .caret { - border-left-width: 5px; - border-right-width: 5px; - border-top-width: 5px; -} -.btn-mini .caret, -.btn-small .caret { - margin-top: 8px; + border-width: 5px; } // Upside down carets for .dropup .dropup .btn-large .caret { @@ -182,48 +125,47 @@ } +// Vertical button groups +// ---------------------- -// Account for other colors -.btn-primary, -.btn-warning, -.btn-danger, -.btn-info, -.btn-success, -.btn-inverse { - .caret { - border-top-color: @white; - border-bottom-color: @white; +.btn-group-vertical > .btn { + display: block; + float: none; + width: 100%; + max-width: 100%; + + .btn { + margin-top: -1px; + } +} +.btn-group-vertical .btn { + &:not(:first-child):not(:last-child) { + border-radius: 0; + } + &:first-child { + .border-bottom-radius(0); + } + &:last-child { + .border-top-radius(0); } } - -// Vertical button groups +// Justified button groups // ---------------------- -.btn-group-vertical { - display: inline-block; // makes buttons only take up the width they need - .ie7-inline-block(); +.btn-group-justified { + display: table; + width: 100%; + .btn { + float: none; + display: table-cell; + width: 1%; + } } -.btn-group-vertical > .btn { - display: block; - float: none; - max-width: 100%; - .border-radius(0); -} -.btn-group-vertical > .btn + .btn { - margin-left: 0; - margin-top: -1px; -} -.btn-group-vertical > .btn:first-child { - .border-radius(@baseBorderRadius @baseBorderRadius 0 0); -} -.btn-group-vertical > .btn:last-child { - .border-radius(0 0 @baseBorderRadius @baseBorderRadius); -} -.btn-group-vertical > .btn-large:first-child { - .border-radius(@borderRadiusLarge @borderRadiusLarge 0 0); -} -.btn-group-vertical > .btn-large:last-child { - .border-radius(0 0 @borderRadiusLarge @borderRadiusLarge); + + +// Checkbox and radio options +.btn-group[data-toggle="buttons"] > .btn > input[type="radio"], +.btn-group[data-toggle="buttons"] > .btn > input[type="checkbox"] { + display: none; } diff --git a/assets/less/buttons.less b/assets/less/buttons.less index 4cd4d86..b8bbfc6 100644 --- a/assets/less/buttons.less +++ b/assets/less/buttons.less @@ -6,109 +6,140 @@ // Base styles // -------------------------------------------------- -// Core +// Core styles .btn { display: inline-block; - .ie7-inline-block(); - padding: 4px 12px; + padding: @padding-base-vertical @padding-base-horizontal; margin-bottom: 0; // For input.btn - font-size: @baseFontSize; - line-height: @baseLineHeight; + font-size: @font-size-base; + font-weight: 500; + line-height: @line-height-base; 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(@baseBorderRadius); - .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)"); + border: 1px solid transparent; + border-radius: @border-radius-base; + white-space: nowrap; - // Hover/focus state - &:hover, - &:focus { - color: @grayDark; - text-decoration: none; - background-position: 0 -15px; - - // transition is only when going to hover/focus, 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-image: none; - outline: 0; - .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)"); + &:hover, + &:focus { + color: @btn-hover-color; + text-decoration: none; + } + + &:active, + &.active { + outline: 0; + .box-shadow(inset 0 3px 5px rgba(0,0,0,.125)); } - // Disabled state &.disabled, - &[disabled] { + &[disabled], + fieldset[disabled] & { cursor: default; - background-image: none; - .opacity(65); + pointer-events: none; // Future-proof disabling of clicks + .opacity(.65); .box-shadow(none); } } +// Alternate buttons +// -------------------------------------------------- + +.btn-default { + .btn-pseudo-states(@btn-default-color, @btn-default-bg, @btn-default-border); +} +.btn-primary { + .btn-pseudo-states(@btn-primary-color, @btn-primary-bg, @btn-primary-border); +} +// Warning appears as orange +.btn-warning { + .btn-pseudo-states(@btn-warning-color, @btn-warning-bg, @btn-warning-border); +} +// Danger and error appear as red +.btn-danger { + .btn-pseudo-states(@btn-danger-color, @btn-danger-bg, @btn-danger-border); +} +// Success appears as green +.btn-success { + .btn-pseudo-states(@btn-success-color, @btn-success-bg, @btn-success-border); +} +// Info appears as blue-green +.btn-info { + .btn-pseudo-states(@btn-info-color, @btn-info-bg, @btn-info-border); +} + + +// 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: @gray-dark; + text-decoration: none; + } + } +} + // Button Sizes // -------------------------------------------------- -// Large .btn-large { - padding: @paddingLarge; - font-size: @fontSizeLarge; - .border-radius(@borderRadiusLarge); + padding: @padding-large-vertical @padding-large-horizontal; + font-size: @font-size-large; + border-radius: @border-radius-large; } -.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); + padding: @padding-small-vertical @padding-small-horizontal; + font-size: @font-size-small; + line-height: 1.5; // ensure proper height of button next to small input + border-radius: @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,105 +155,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-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, -.btn-link:focus { - color: @linkColorHover; - text-decoration: underline; - background-color: transparent; -} -.btn-link[disabled]:hover, -.btn-link[disabled]:focus { - color: @grayDark; - text-decoration: none; -} diff --git a/assets/less/carousel.less b/assets/less/carousel.less index 55bc050..3526089 100644 --- a/assets/less/carousel.less +++ b/assets/less/carousel.less @@ -3,19 +3,15 @@ // -------------------------------------------------- +// Wrapper for the slide container and indicators .carousel { position: relative; - margin-bottom: @baseLineHeight; - line-height: 1; } .carousel-inner { + position: relative; overflow: hidden; width: 100%; - position: relative; -} - -.carousel-inner { > .item { display: none; @@ -25,7 +21,7 @@ // Account for jankitude on images > img, > a > img { - display: block; + .img-responsive(); line-height: 1; } } @@ -70,89 +66,140 @@ .carousel-control { position: absolute; - top: 40%; - left: 15px; - width: 40px; - height: 40px; - margin-top: -20px; - font-size: 60px; - font-weight: 100; - line-height: 30px; - color: @white; + top: 0; + left: 0; + bottom: 0; + width: 15%; + .opacity(.5); + font-size: 20px; + color: @carousel-control-color; text-align: center; - background: @grayDarker; - border: 3px solid @white; - .border-radius(23px); - .opacity(50); + text-shadow: @carousel-text-shadow; + // We can't have this transition here because webkit cancels the carousel + // animation if you trip this while in the middle of another animation. - // we can't have this transition here - // because webkit cancels the carousel - // animation if you trip this while - // in the middle of another animation - // ;_; - // .transition(opacity .2s linear); - - // Reposition the right one + // Set gradients for backgrounds + &.left { + #gradient > .horizontal(@start-color: rgba(0,0,0,.5); @end-color: rgba(0,0,0,.0001)); + background-color: transparent; + } &.right { left: auto; - right: 15px; + right: 0; + #gradient > .horizontal(@start-color: rgba(0,0,0,.0001); @end-color: rgba(0,0,0,.5)); + background-color: transparent; } // Hover/focus state &:hover, &:focus { - color: @white; + color: @carousel-control-color; text-decoration: none; - .opacity(90); + .opacity(.9); + } + + // Toggles + .glyphicon, + .icon-prev, + .icon-next { + position: absolute; + top: 50%; + left: 50%; + z-index: 5; + display: inline-block; + width: 20px; + height: 20px; + margin-top: -10px; + margin-left: -10px; + font-family: serif; + } + // Non-glyphicon toggles + .icon-prev { + &:before { + content: '\2039';// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039) + } + } + .icon-next { + &:before { + content: '\203a';// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A) + } } } -// Carousel indicator pips +// Optional indicator pips // ----------------------------- .carousel-indicators { position: absolute; - top: 15px; - right: 15px; - z-index: 5; - margin: 0; + bottom: 10px; + left: 50%; + z-index: 15; + width: 120px; + margin-left: -60px; + padding-left: 0; list-style: none; + text-align: center; li { - display: block; - float: left; - width: 10px; + display: inline-block; + width: 10px; height: 10px; - margin-left: 5px; + margin: 1px; text-indent: -999px; - background-color: #ccc; - background-color: rgba(255,255,255,.25); - border-radius: 5px; + border: 1px solid @carousel-indicator-border-color; + border-radius: 10px; + cursor: pointer; } .active { - background-color: #fff; + margin: 0; + width: 12px; + height: 12px; + background-color: @carousel-indicator-active-bg; } } -// Caption for text below images +// Optional captions // ----------------------------- - +// Hidden by default for smaller viewports .carousel-caption { position: absolute; - left: 0; - right: 0; - bottom: 0; - padding: 15px; - background: @grayDark; - background: rgba(0,0,0,.75); + left: 15%; + right: 15%; + bottom: 20px; + z-index: 10; + padding-top: 20px; + padding-bottom: 20px; + color: @carousel-caption-color; + text-align: center; + text-shadow: @carousel-text-shadow; + & .btn { + text-shadow: none; // No shadow for button elements in carousel-caption + } } -.carousel-caption h4, -.carousel-caption p { - color: @white; - line-height: @baseLineHeight; -} -.carousel-caption h4 { - margin: 0 0 5px; -} -.carousel-caption p { - margin-bottom: 0; + + +// Scale up controls for tablets and up +@media screen and (min-width: @screen-tablet) { + + // Scale up the controls a smidge + .carousel-control .glyphicon, + .carousel-control .icon-prev, + .carousel-control .icon-next { + width: 30px; + height: 30px; + margin-top: -15px; + margin-left: -15px; + font-size: 30px; + } + + // Show and left align the captions + .carousel-caption { + left: 20%; + right: 20%; + padding-bottom: 30px; + } + + // Move up the indicators + .carousel-indicators { + bottom: 20px; + } } diff --git a/assets/less/close.less b/assets/less/close.less index 4c626bd..f915667 100644 --- a/assets/less/close.less +++ b/assets/less/close.less @@ -5,28 +5,29 @@ .close { float: right; - font-size: 20px; + font-size: (@font-size-base * 1.5); font-weight: bold; - line-height: @baseLineHeight; - color: @black; - text-shadow: 0 1px 0 rgba(255,255,255,1); - .opacity(20); + line-height: 1; + color: @close-color; + text-shadow: @close-text-shadow; + .opacity(.2); + &:hover, &:focus { - color: @black; + color: @close-color; text-decoration: none; cursor: pointer; - .opacity(40); + .opacity(.5); + } + + // Additional properties for button version + // iOS requires the button element instead of an anchor tag. + // If you want the anchor version, it requires `href="#"`. + button& { + padding: 0; + cursor: pointer; + background: transparent; + border: 0; + -webkit-appearance: none; } } - -// Additional properties for button version -// iOS requires the button element instead of an anchor tag. -// If you want the anchor version, it requires `href="#"`. -button.close { - padding: 0; - cursor: pointer; - background: transparent; - border: 0; - -webkit-appearance: none; -} \ No newline at end of file diff --git a/assets/less/code.less b/assets/less/code.less index 266a926..cd61325 100644 --- a/assets/less/code.less +++ b/assets/less/code.less @@ -6,48 +6,42 @@ // Inline and block code styles code, pre { - padding: 0 3px 2px; - #font > #family > .monospace; - font-size: @baseFontSize - 2; - color: @grayDark; - .border-radius(3px); + font-family: @font-family-monospace; } // Inline code code { padding: 2px 4px; - color: #d14; - background-color: #f7f7f9; - border: 1px solid #e1e1e8; + font-size: 90%; + color: @code-color; + background-color: @code-bg; white-space: nowrap; + border-radius: 4px; } // Blocks of code pre { display: block; - padding: (@baseLineHeight - 1) / 2; - margin: 0 0 @baseLineHeight / 2; - font-size: @baseFontSize - 1; // 14px to 13px - line-height: @baseLineHeight; + padding: ((@line-height-computed - 1) / 2); + margin: 0 0 (@line-height-computed / 2); + font-size: (@font-size-base - 1); // 14px to 13px + line-height: @line-height-base; word-break: break-all; word-wrap: break-word; - white-space: pre; - white-space: pre-wrap; - background-color: #f5f5f5; - border: 1px solid #ccc; // fallback for IE7-8 - border: 1px solid rgba(0,0,0,.15); - .border-radius(@baseBorderRadius); + color: @gray-dark; + background-color: @pre-bg; + border: 1px solid @pre-border-color; + border-radius: @border-radius-base; // Make prettyprint styles more spaced out for readability &.prettyprint { - margin-bottom: @baseLineHeight; + margin-bottom: @line-height-computed; } // Account for some code outputs that place code tags in pre tags code { padding: 0; color: inherit; - white-space: pre; white-space: pre-wrap; background-color: transparent; border: 0; @@ -58,4 +52,4 @@ pre { .pre-scrollable { max-height: 340px; overflow-y: scroll; -} \ No newline at end of file +} diff --git a/assets/less/component-animations.less b/assets/less/component-animations.less index d614263..1efe45e 100644 --- a/assets/less/component-animations.less +++ b/assets/less/component-animations.less @@ -2,6 +2,10 @@ // Component animations // -------------------------------------------------- +// Heads up! +// +// We don't use the `.opacity()` mixin here since it causes a bug with text +// fields in IE7-8. Source: https://github.com/twitter/bootstrap/pull/3552. .fade { opacity: 0; @@ -12,11 +16,14 @@ } .collapse { + display: none; + &.in { + display: block; + } +} +.collapsing { position: relative; height: 0; overflow: hidden; .transition(height .35s ease); - &.in { - height: auto; - } } diff --git a/assets/less/dropdowns.less b/assets/less/dropdowns.less index 9e47b47..938e682 100644 --- a/assets/less/dropdowns.less +++ b/assets/less/dropdowns.less @@ -3,62 +3,39 @@ // -------------------------------------------------- -// Use the .menu class on any
  • element within the topbar or ul.tabs and you'll get some superfancy dropdowns -.dropup, -.dropdown { - position: relative; -} -.dropdown-toggle { - // The caret makes the toggle a bit too tall in IE7 - *margin-bottom: -3px; -} -.dropdown-toggle:active, -.open .dropdown-toggle { - outline: 0; -} - // Dropdown arrow/caret // -------------------- .caret { display: inline-block; width: 0; height: 0; - vertical-align: top; - border-top: 4px solid @black; + margin-left: 2px; + vertical-align: middle; + border-top: 4px solid @dropdown-caret-color; border-right: 4px solid transparent; border-left: 4px solid transparent; content: ""; } -// Place the caret -.dropdown .caret { - margin-top: 8px; - margin-left: 2px; -} - // The dropdown menu (ul) // ---------------------- .dropdown-menu { position: absolute; top: 100%; left: 0; - z-index: @zindexDropdown; + z-index: @zindex-dropdown; display: none; // none by default, but block on "open" of the menu float: left; min-width: 160px; padding: 5px 0; margin: 2px 0 0; // override default ul list-style: none; - background-color: @dropdownBackground; - border: 1px solid #ccc; // Fallback for IE7-8 - border: 1px solid @dropdownBorder; - *border-right-width: 2px; - *border-bottom-width: 2px; - .border-radius(6px); - .box-shadow(0 5px 10px rgba(0,0,0,.2)); - -webkit-background-clip: padding-box; - -moz-background-clip: padding; - background-clip: padding-box; + background-color: @dropdown-bg; + border: 1px solid @dropdown-fallback-border; // IE8 fallback + border: 1px solid @dropdown-border; + border-radius: @border-radius-base; + .box-shadow(0 6px 12px rgba(0,0,0,.175)); + .background-clip(padding-box); // Aligns the dropdown menu to right &.pull-right { @@ -68,7 +45,7 @@ // Dividers (basically an hr) within the dropdown .divider { - .nav-divider(@dropdownDividerTop, @dropdownDividerBottom); + .nav-divider(@dropdown-divider-bg); } // Links within the dropdown menu @@ -77,64 +54,84 @@ padding: 3px 20px; clear: both; font-weight: normal; - line-height: @baseLineHeight; - color: @dropdownLinkColor; - white-space: nowrap; + line-height: @line-height-base; + color: @dropdown-link-color; + white-space: nowrap; // prevent links from randomly breaking onto new lines } } // Hover/Focus state // ----------- -.dropdown-menu > li > a:hover, -.dropdown-menu > li > a:focus, -.dropdown-submenu:hover > a, -.dropdown-submenu:focus > a { - text-decoration: none; - color: @dropdownLinkColorHover; - #gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%)); +.dropdown-menu > li > a { + &:hover, + &:focus { + text-decoration: none; + color: @dropdown-link-hover-color; + #gradient > .vertical(@start-color: @dropdown-link-hover-bg; @end-color: darken(@dropdown-link-hover-bg, 5%)); + } } // Active state // ------------ -.dropdown-menu > .active > a, -.dropdown-menu > .active > a:hover, -.dropdown-menu > .active > a:focus { - color: @dropdownLinkColorActive; - text-decoration: none; - outline: 0; - #gradient > .vertical(@dropdownLinkBackgroundActive, darken(@dropdownLinkBackgroundActive, 5%)); +.dropdown-menu > .active > a { + &, + &:hover, + &:focus { + color: @dropdown-link-active-color; + text-decoration: none; + outline: 0; + #gradient > .vertical(@start-color: @dropdown-link-active-bg; @end-color: darken(@dropdown-link-active-bg, 5%)); + } } // Disabled state // -------------- // Gray out text and ensure the hover/focus state remains gray -.dropdown-menu > .disabled > a, -.dropdown-menu > .disabled > a:hover, -.dropdown-menu > .disabled > a:focus { - color: @grayLight; +.dropdown-menu > .disabled > a { + &, + &:hover, + &:focus { + color: @gray-light; + } } // Nuke hover/focus effects -.dropdown-menu > .disabled > a:hover, -.dropdown-menu > .disabled > a:focus { - text-decoration: none; - background-color: transparent; - background-image: none; // Remove CSS gradient - .reset-filter(); - cursor: default; +.dropdown-menu > .disabled > a { + &:hover, + &:focus { + text-decoration: none; + background-color: transparent; + background-image: none; // Remove CSS gradient + .reset-filter(); + cursor: not-allowed; + } } // Open state for the dropdown // --------------------------- .open { - // IE7's z-index only goes to the nearest positioned ancestor, which would - // make the menu appear below buttons that appeared later on the page - *z-index: @zindexDropdown; - - & > .dropdown-menu { + // Show the menu + > .dropdown-menu { display: block; } + + // Remove the outline when :focus is triggered + > a { + outline: 0; + } } +// Dropdown section headers +// --------------------------- +.dropdown-header { + display: block; + padding: 3px 20px; + font-size: @font-size-small; + line-height: @line-height-base; + color: @gray-light; +} + + + // Backdrop to catch body clicks on mobile, etc. // --------------------------- .dropdown-backdrop { @@ -143,7 +140,7 @@ right: 0; bottom: 0; top: 0; - z-index: @zindexDropdown - 10; + z-index: @zindex-dropdown - 10; } // Right aligned dropdowns @@ -162,7 +159,7 @@ // Reverse the caret .caret { border-top: 0; - border-bottom: 4px solid @black; + border-bottom: 4px solid @dropdown-caret-color; content: ""; } // Different positioning for bottom up menu @@ -172,77 +169,3 @@ margin-bottom: 1px; } } - -// Sub menus -// --------------------------- -.dropdown-submenu { - position: relative; -} -// Default dropdowns -.dropdown-submenu > .dropdown-menu { - top: 0; - left: 100%; - margin-top: -6px; - margin-left: -1px; - .border-radius(0 6px 6px 6px); -} -.dropdown-submenu:hover > .dropdown-menu { - display: block; -} - -// Dropups -.dropup .dropdown-submenu > .dropdown-menu { - top: auto; - bottom: 0; - margin-top: 0; - margin-bottom: -2px; - .border-radius(5px 5px 5px 0); -} - -// Caret to indicate there is a submenu -.dropdown-submenu > a:after { - display: block; - content: " "; - float: right; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; - border-width: 5px 0 5px 5px; - border-left-color: darken(@dropdownBackground, 20%); - margin-top: 5px; - margin-right: -10px; -} -.dropdown-submenu:hover > a:after { - border-left-color: @dropdownLinkColorHover; -} - -// Left aligned submenus -.dropdown-submenu.pull-left { - // Undo the float - // Yes, this is awkward since .pull-left adds a float, but it sticks to our conventions elsewhere. - float: none; - - // Positioning the submenu - > .dropdown-menu { - left: -100%; - margin-left: 10px; - .border-radius(6px 0 6px 6px); - } -} - -// Tweak nav headers -// ----------------- -// Increase padding from 15px to 20px on sides -.dropdown .dropdown-menu .nav-header { - padding-left: 20px; - padding-right: 20px; -} - -// Typeahead -// --------- -.typeahead { - z-index: 1051; - margin-top: 2px; // give it some space to breathe - .border-radius(@baseBorderRadius); -} diff --git a/assets/less/forms.less b/assets/less/forms.less index 06767bd..60e4576 100644 --- a/assets/less/forms.less +++ b/assets/less/forms.less @@ -3,13 +3,9 @@ // -------------------------------------------------- -// GENERAL STYLES -// -------------- - -// Make all forms have space below them -form { - margin: 0 0 @baseLineHeight; -} +// Normalize non-controls +// +// Restyle and baseline non-control form elements. fieldset { padding: 0; @@ -17,153 +13,43 @@ fieldset { border: 0; } -// Groups of fields with labels on top (legends) legend { display: block; width: 100%; padding: 0; - margin-bottom: @baseLineHeight; - font-size: @baseFontSize * 1.5; - line-height: @baseLineHeight * 2; - color: @grayDark; + margin-bottom: @line-height-computed; + font-size: (@font-size-base * 1.5); + line-height: inherit; + color: @gray-dark; border: 0; - border-bottom: 1px solid #e5e5e5; - - // Small - small { - font-size: @baseLineHeight * .75; - color: @grayLight; - } + border-bottom: 1px solid @legend-border-color; } -// Set font for forms -label, -input, -button, -select, -textarea { - #font > .shorthand(@baseFontSize,normal,@baseLineHeight); // Set size, weight, line-height here -} -input, -button, -select, -textarea { - font-family: @baseFontFamily; // And only set font-family here for those that need it (note the missing label element) -} - -// Identify controls by their labels label { - display: block; - margin-bottom: 5px; -} - -// Form controls -// ------------------------- - -// Shared size and type resets -select, -textarea, -input[type="text"], -input[type="password"], -input[type="datetime"], -input[type="datetime-local"], -input[type="date"], -input[type="month"], -input[type="time"], -input[type="week"], -input[type="number"], -input[type="email"], -input[type="url"], -input[type="search"], -input[type="tel"], -input[type="color"], -.uneditable-input { display: inline-block; - height: @baseLineHeight; - padding: 4px 6px; - margin-bottom: @baseLineHeight / 2; - font-size: @baseFontSize; - line-height: @baseLineHeight; - color: @gray; - .border-radius(@inputBorderRadius); - vertical-align: middle; + margin-bottom: 5px; + font-weight: bold; } -// Reset appearance properties for textual inputs and textarea -// Declare width for legacy (can't be on input[type=*] selectors or it's too specific) -input, -textarea, -.uneditable-input { - width: 206px; // plus 12px padding and 2px border -} -// Reset height since textareas have rows -textarea { - height: auto; -} -// Everything else -textarea, -input[type="text"], -input[type="password"], -input[type="datetime"], -input[type="datetime-local"], -input[type="date"], -input[type="month"], -input[type="time"], -input[type="week"], -input[type="number"], -input[type="email"], -input[type="url"], -input[type="search"], -input[type="tel"], -input[type="color"], -.uneditable-input { - background-color: @inputBackground; - border: 1px solid @inputBorder; - .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); - .transition(~"border linear .2s, box-shadow linear .2s"); - // Focus state - &:focus { - border-color: rgba(82,168,236,.8); - outline: 0; - outline: thin dotted \9; /* IE6-9 */ - .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)"); - } +// Normalize form controls + +// Override content-box in Normalize (* isn't specific enough) +input[type="search"] { + .box-sizing(border-box); } // Position radios and checkboxes better input[type="radio"], input[type="checkbox"] { margin: 4px 0 0; - *margin-top: 0; /* IE7 */ margin-top: 1px \9; /* IE8-9 */ line-height: normal; } -// Reset width of input images, buttons, radios, checkboxes -input[type="file"], -input[type="image"], -input[type="submit"], -input[type="reset"], -input[type="button"], -input[type="radio"], -input[type="checkbox"] { - width: auto; // Override of generic input selector -} - // Set the height of select and file controls to match text inputs -select, input[type="file"] { - height: @inputHeight; /* In IE7, the height of the select element cannot be changed by height, only font-size */ - *margin-top: 4px; /* For IE7, add top margin to align select with labels */ - line-height: @inputHeight; -} - -// Make select elements obey height by applying a border -select { - width: 220px; // default input width + 10px of padding that doesn't get applied - border: 1px solid @inputBorder; - background-color: @inputBackground; // Chrome on Linux and Mobile Safari need background-color + display: block; } // Make multiple select elements height not fixed @@ -172,519 +58,366 @@ select[size] { height: auto; } +// Fix optgroup Firefox bug per https://github.com/twbs/bootstrap/issues/7611 +select optgroup { + font-size: inherit; + font-style: inherit; + font-family: inherit; +} + // Focus for select, file, radio, and checkbox -select:focus, input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus { .tab-focus(); } - -// Uneditable inputs -// ------------------------- - -// Make uneditable inputs look inactive -.uneditable-input, -.uneditable-textarea { - color: @grayLight; - background-color: darken(@inputBackground, 1%); - border-color: @inputBorder; - .box-shadow(inset 0 1px 2px rgba(0,0,0,.025)); - cursor: not-allowed; -} - -// For text that needs to appear as an input but should not be an input -.uneditable-input { - overflow: hidden; // prevent text from wrapping, but still cut it off like an input does - white-space: nowrap; -} - -// Make uneditable textareas behave like a textarea -.uneditable-textarea { - width: auto; - height: auto; +// Fix for Chrome number input +// Setting certain font-sizes causes the `I` bar to appear on hover of the bottom increment button. +// See https://github.com/twbs/bootstrap/issues/8350 for more. +input[type="number"] { + &::-webkit-outer-spin-button, + &::-webkit-inner-spin-button { + height: auto; + } } // Placeholder -// ------------------------- - -// Placeholder text gets special styles because when browsers invalidate entire lines if it doesn't understand a selector -input, -textarea { +// +// Placeholder text gets special styles because when browsers invalidate entire +// lines if it doesn't understand a selector/ +.form-control { .placeholder(); } -// CHECKBOXES & RADIOS -// ------------------- +// Common form controls +// +// Shared size and type resets for form controls. Apply `.form-control` to any +// of the following form controls: +// +// select +// textarea +// input[type="text"] +// input[type="password"] +// input[type="datetime"] +// input[type="datetime-local"] +// input[type="date"] +// input[type="month"] +// input[type="time"] +// input[type="week"] +// input[type="number"] +// input[type="email"] +// input[type="url"] +// input[type="search"] +// input[type="tel"] +// input[type="color"] + +.form-control { + display: block; + width: 100%; + height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border) + padding: @padding-base-vertical @padding-base-horizontal; + font-size: @font-size-base; + line-height: @line-height-base; + color: @gray; + vertical-align: middle; + background-color: @input-bg; + border: 1px solid @input-border; + border-radius: @input-border-radius; + .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); + .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s"); + + &:focus { + border-color: rgba(82,168,236,.8); + outline: 0; + .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)"); + } + + // Disabled and read-only inputs + // Note: HTML5 says that inputs under a fieldset > legend:first-child won't be + // disabled if the fieldset is disabled. Due to implementation difficulty, + // we don't honor that edge case; we style them as disabled anyway. + &[disabled], + &[readonly], + fieldset[disabled] & { + cursor: not-allowed; + background-color: @input-bg-disabled; + } + + // Reset height for `textarea`s + textarea& { + height: auto; + } +} + + +// Form groups +// +// Designed to help with the organization and spacing of vertical forms. For +// horizontal forms, use the predefined grid classes. + +.form-group { + margin-bottom: 15px; +} + + +// Checkboxes and radios +// +// Indent the labels to position radios/checkboxes as hanging controls. -// Indent the labels to position radios/checkboxes as hanging .radio, .checkbox { - min-height: @baseLineHeight; // clear the floating input if there is no label text + display: block; + min-height: @line-height-computed; // clear the floating input if there is no label text + margin-top: 10px; + margin-bottom: 10px; padding-left: 20px; + vertical-align: middle; + label { + display: inline; + margin-bottom: 0; + font-weight: normal; + cursor: pointer; + } } .radio input[type="radio"], -.checkbox input[type="checkbox"] { +.radio-inline input[type="radio"], +.checkbox input[type="checkbox"], +.checkbox-inline input[type="checkbox"] { float: left; margin-left: -20px; } - -// Move the options list down to align with labels -.controls > .radio:first-child, -.controls > .checkbox:first-child { - padding-top: 5px; // has to be padding because margin collaspes +.radio + .radio, +.checkbox + .checkbox { + margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing } // Radios and checkboxes on same line -// TODO v3: Convert .inline to .control-inline -.radio.inline, -.checkbox.inline { +.radio-inline, +.checkbox-inline { display: inline-block; - padding-top: 5px; + padding-left: 20px; margin-bottom: 0; vertical-align: middle; + font-weight: normal; + cursor: pointer; } -.radio.inline + .radio.inline, -.checkbox.inline + .checkbox.inline { +.radio-inline + .radio-inline, +.checkbox-inline + .checkbox-inline { + margin-top: 0; margin-left: 10px; // space out consecutive inline controls } -// INPUT SIZES -// ----------- +// Form control sizing +// +// Relative text size, padding, and border-radii changes for form controls. For +// horizontal sizing, wrap controls in the predefined grid classes. `