@ -0,0 +1 @@ | |||||
lessc bootstrap/bootstrap.less ../static/css/bootstrap.css |
@ -0,0 +1,73 @@ | |||||
// | |||||
// Alerts | |||||
// -------------------------------------------------- | |||||
// Base styles | |||||
// ------------------------- | |||||
.alert { | |||||
padding: @alert-padding; | |||||
margin-bottom: @line-height-computed; | |||||
border: 1px solid transparent; | |||||
border-radius: @alert-border-radius; | |||||
// Headings for larger alerts | |||||
h4 { | |||||
margin-top: 0; | |||||
// Specified for the h4 to prevent conflicts of changing @headings-color | |||||
color: inherit; | |||||
} | |||||
// Provide class for links that match alerts | |||||
.alert-link { | |||||
font-weight: @alert-link-font-weight; | |||||
} | |||||
// Improve alignment and spacing of inner content | |||||
> p, | |||||
> ul { | |||||
margin-bottom: 0; | |||||
} | |||||
> p + p { | |||||
margin-top: 5px; | |||||
} | |||||
} | |||||
// Dismissible alerts | |||||
// | |||||
// Expand the right padding and account for the close button's positioning. | |||||
.alert-dismissable, // The misspelled .alert-dismissable was deprecated in 3.2.0. | |||||
.alert-dismissible { | |||||
padding-right: (@alert-padding + 20); | |||||
// Adjust close link position | |||||
.close { | |||||
position: relative; | |||||
top: -2px; | |||||
right: -21px; | |||||
color: inherit; | |||||
} | |||||
} | |||||
// Alternate styles | |||||
// | |||||
// Generate contextual modifier classes for colorizing the alert. | |||||
.alert-success { | |||||
.alert-variant(@alert-success-bg; @alert-success-border; @alert-success-text); | |||||
} | |||||
.alert-info { | |||||
.alert-variant(@alert-info-bg; @alert-info-border; @alert-info-text); | |||||
} | |||||
.alert-warning { | |||||
.alert-variant(@alert-warning-bg; @alert-warning-border; @alert-warning-text); | |||||
} | |||||
.alert-danger { | |||||
.alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text); | |||||
} |
@ -0,0 +1,66 @@ | |||||
// | |||||
// Badges | |||||
// -------------------------------------------------- | |||||
// Base class | |||||
.badge { | |||||
display: inline-block; | |||||
min-width: 10px; | |||||
padding: 3px 7px; | |||||
font-size: @font-size-small; | |||||
font-weight: @badge-font-weight; | |||||
color: @badge-color; | |||||
line-height: @badge-line-height; | |||||
vertical-align: middle; | |||||
white-space: nowrap; | |||||
text-align: center; | |||||
background-color: @badge-bg; | |||||
border-radius: @badge-border-radius; | |||||
// Empty badges collapse automatically (not available in IE8) | |||||
&:empty { | |||||
display: none; | |||||
} | |||||
// Quick fix for badges in buttons | |||||
.btn & { | |||||
position: relative; | |||||
top: -1px; | |||||
} | |||||
.btn-xs &, | |||||
.btn-group-xs > .btn & { | |||||
top: 0; | |||||
padding: 1px 5px; | |||||
} | |||||
// Hover state, but only for links | |||||
a& { | |||||
&:hover, | |||||
&:focus { | |||||
color: @badge-link-hover-color; | |||||
text-decoration: none; | |||||
cursor: pointer; | |||||
} | |||||
} | |||||
// Account for badges in navs | |||||
.list-group-item.active > &, | |||||
.nav-pills > .active > a > & { | |||||
color: @badge-active-color; | |||||
background-color: @badge-active-bg; | |||||
} | |||||
.list-group-item > & { | |||||
float: right; | |||||
} | |||||
.list-group-item > & + & { | |||||
margin-right: 5px; | |||||
} | |||||
.nav-pills > li > a > & { | |||||
margin-left: 3px; | |||||
} | |||||
} |
@ -0,0 +1,56 @@ | |||||
/*! | |||||
* Bootstrap v3.3.5 (http://getbootstrap.com) | |||||
* Copyright 2011-2015 Twitter, Inc. | |||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) | |||||
*/ | |||||
// Core variables and mixins | |||||
@import "variables.less"; | |||||
@import "mixins.less"; | |||||
// Reset and dependencies | |||||
@import "normalize.less"; | |||||
@import "print.less"; | |||||
@import "glyphicons.less"; | |||||
// Core CSS | |||||
@import "scaffolding.less"; | |||||
@import "type.less"; | |||||
@import "code.less"; | |||||
@import "grid.less"; | |||||
@import "tables.less"; | |||||
@import "forms.less"; | |||||
@import "buttons.less"; | |||||
// Components | |||||
@import "component-animations.less"; | |||||
@import "dropdowns.less"; | |||||
@import "button-groups.less"; | |||||
@import "input-groups.less"; | |||||
@import "navs.less"; | |||||
@import "navbar.less"; | |||||
@import "breadcrumbs.less"; | |||||
@import "pagination.less"; | |||||
@import "pager.less"; | |||||
@import "labels.less"; | |||||
@import "badges.less"; | |||||
@import "jumbotron.less"; | |||||
@import "thumbnails.less"; | |||||
@import "alerts.less"; | |||||
@import "progress-bars.less"; | |||||
@import "media.less"; | |||||
@import "list-group.less"; | |||||
@import "panels.less"; | |||||
@import "responsive-embed.less"; | |||||
@import "wells.less"; | |||||
@import "close.less"; | |||||
// Components w/ JavaScript | |||||
@import "modals.less"; | |||||
@import "tooltip.less"; | |||||
@import "popovers.less"; | |||||
@import "carousel.less"; | |||||
// Utility classes | |||||
@import "utilities.less"; | |||||
@import "responsive-utilities.less"; |
@ -0,0 +1,26 @@ | |||||
// | |||||
// Breadcrumbs | |||||
// -------------------------------------------------- | |||||
.breadcrumb { | |||||
padding: @breadcrumb-padding-vertical @breadcrumb-padding-horizontal; | |||||
margin-bottom: @line-height-computed; | |||||
list-style: none; | |||||
background-color: @breadcrumb-bg; | |||||
border-radius: @border-radius-base; | |||||
> li { | |||||
display: inline-block; | |||||
+ li:before { | |||||
content: "@{breadcrumb-separator}\00a0"; // Unicode space added since inline-block means non-collapsing white-space | |||||
padding: 0 5px; | |||||
color: @breadcrumb-color; | |||||
} | |||||
} | |||||
> .active { | |||||
color: @breadcrumb-active-color; | |||||
} | |||||
} |
@ -0,0 +1,244 @@ | |||||
// | |||||
// Button groups | |||||
// -------------------------------------------------- | |||||
// 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, | |||||
&:focus, | |||||
&:active, | |||||
&.active { | |||||
z-index: 2; | |||||
} | |||||
} | |||||
} | |||||
// Prevent double borders when buttons are next to each other | |||||
.btn-group { | |||||
.btn + .btn, | |||||
.btn + .btn-group, | |||||
.btn-group + .btn, | |||||
.btn-group + .btn-group { | |||||
margin-left: -1px; | |||||
} | |||||
} | |||||
// Optional: Group multiple button groups together for a toolbar | |||||
.btn-toolbar { | |||||
margin-left: -5px; // Offset the first child's margin | |||||
&:extend(.clearfix all); | |||||
.btn, | |||||
.btn-group, | |||||
.input-group { | |||||
float: left; | |||||
} | |||||
> .btn, | |||||
> .btn-group, | |||||
> .input-group { | |||||
margin-left: 5px; | |||||
} | |||||
} | |||||
.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; | |||||
&: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:not(:first-child), | |||||
.btn-group > .dropdown-toggle:not(:first-child) { | |||||
.border-left-radius(0); | |||||
} | |||||
// 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:not(:last-child) { | |||||
> .btn:last-child, | |||||
> .dropdown-toggle { | |||||
.border-right-radius(0); | |||||
} | |||||
} | |||||
.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child { | |||||
.border-left-radius(0); | |||||
} | |||||
// On active and open, don't show outline | |||||
.btn-group .dropdown-toggle:active, | |||||
.btn-group.open .dropdown-toggle { | |||||
outline: 0; | |||||
} | |||||
// Sizing | |||||
// | |||||
// Remix the default button sizing classes into new ones for easier manipulation. | |||||
.btn-group-xs > .btn { &:extend(.btn-xs); } | |||||
.btn-group-sm > .btn { &:extend(.btn-sm); } | |||||
.btn-group-lg > .btn { &:extend(.btn-lg); } | |||||
// Split button dropdowns | |||||
// ---------------------- | |||||
// Give the line between buttons some depth | |||||
.btn-group > .btn + .dropdown-toggle { | |||||
padding-left: 8px; | |||||
padding-right: 8px; | |||||
} | |||||
.btn-group > .btn-lg + .dropdown-toggle { | |||||
padding-left: 12px; | |||||
padding-right: 12px; | |||||
} | |||||
// 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)); | |||||
// Show no shadow for `.btn-link` since it has no other button styles. | |||||
&.btn-link { | |||||
.box-shadow(none); | |||||
} | |||||
} | |||||
// Reposition the caret | |||||
.btn .caret { | |||||
margin-left: 0; | |||||
} | |||||
// Carets in other button sizes | |||||
.btn-lg .caret { | |||||
border-width: @caret-width-large @caret-width-large 0; | |||||
border-bottom-width: 0; | |||||
} | |||||
// Upside down carets for .dropup | |||||
.dropup .btn-lg .caret { | |||||
border-width: 0 @caret-width-large @caret-width-large; | |||||
} | |||||
// Vertical button groups | |||||
// ---------------------- | |||||
.btn-group-vertical { | |||||
> .btn, | |||||
> .btn-group, | |||||
> .btn-group > .btn { | |||||
display: block; | |||||
float: none; | |||||
width: 100%; | |||||
max-width: 100%; | |||||
} | |||||
// Clear floats so dropdown menus can be properly placed | |||||
> .btn-group { | |||||
&:extend(.clearfix all); | |||||
> .btn { | |||||
float: none; | |||||
} | |||||
} | |||||
> .btn + .btn, | |||||
> .btn + .btn-group, | |||||
> .btn-group + .btn, | |||||
> .btn-group + .btn-group { | |||||
margin-top: -1px; | |||||
margin-left: 0; | |||||
} | |||||
} | |||||
.btn-group-vertical > .btn { | |||||
&:not(:first-child):not(:last-child) { | |||||
border-radius: 0; | |||||
} | |||||
&:first-child:not(:last-child) { | |||||
border-top-right-radius: @btn-border-radius-base; | |||||
.border-bottom-radius(0); | |||||
} | |||||
&:last-child:not(:first-child) { | |||||
border-bottom-left-radius: @btn-border-radius-base; | |||||
.border-top-radius(0); | |||||
} | |||||
} | |||||
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn { | |||||
border-radius: 0; | |||||
} | |||||
.btn-group-vertical > .btn-group:first-child:not(:last-child) { | |||||
> .btn:last-child, | |||||
> .dropdown-toggle { | |||||
.border-bottom-radius(0); | |||||
} | |||||
} | |||||
.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child { | |||||
.border-top-radius(0); | |||||
} | |||||
// Justified button groups | |||||
// ---------------------- | |||||
.btn-group-justified { | |||||
display: table; | |||||
width: 100%; | |||||
table-layout: fixed; | |||||
border-collapse: separate; | |||||
> .btn, | |||||
> .btn-group { | |||||
float: none; | |||||
display: table-cell; | |||||
width: 1%; | |||||
} | |||||
> .btn-group .btn { | |||||
width: 100%; | |||||
} | |||||
> .btn-group .dropdown-menu { | |||||
left: auto; | |||||
} | |||||
} | |||||
// Checkbox and radio options | |||||
// | |||||
// In order to support the browser's form validation feedback, powered by the | |||||
// `required` attribute, we have to "hide" the inputs via `clip`. We cannot use | |||||
// `display: none;` or `visibility: hidden;` as that also hides the popover. | |||||
// Simply visually hiding the inputs via `opacity` would leave them clickable in | |||||
// certain cases which is prevented by using `clip` and `pointer-events`. | |||||
// This way, we ensure a DOM element is visible to position the popover from. | |||||
// | |||||
// See https://github.com/twbs/bootstrap/pull/12794 and | |||||
// https://github.com/twbs/bootstrap/pull/14559 for more information. | |||||
[data-toggle="buttons"] { | |||||
> .btn, | |||||
> .btn-group > .btn { | |||||
input[type="radio"], | |||||
input[type="checkbox"] { | |||||
position: absolute; | |||||
clip: rect(0,0,0,0); | |||||
pointer-events: none; | |||||
} | |||||
} | |||||
} |
@ -0,0 +1,166 @@ | |||||
// | |||||
// Buttons | |||||
// -------------------------------------------------- | |||||
// Base styles | |||||
// -------------------------------------------------- | |||||
.btn { | |||||
display: inline-block; | |||||
margin-bottom: 0; // For input.btn | |||||
font-weight: @btn-font-weight; | |||||
text-align: center; | |||||
vertical-align: middle; | |||||
touch-action: manipulation; | |||||
cursor: pointer; | |||||
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; @btn-border-radius-base); | |||||
.user-select(none); | |||||
&, | |||||
&:active, | |||||
&.active { | |||||
&:focus, | |||||
&.focus { | |||||
.tab-focus(); | |||||
} | |||||
} | |||||
&:hover, | |||||
&:focus, | |||||
&.focus { | |||||
color: @btn-default-color; | |||||
text-decoration: none; | |||||
} | |||||
&:active, | |||||
&.active { | |||||
outline: 0; | |||||
background-image: none; | |||||
.box-shadow(inset 0 3px 5px rgba(0,0,0,.125)); | |||||
} | |||||
&.disabled, | |||||
&[disabled], | |||||
fieldset[disabled] & { | |||||
cursor: @cursor-disabled; | |||||
.opacity(.65); | |||||
.box-shadow(none); | |||||
} | |||||
a& { | |||||
&.disabled, | |||||
fieldset[disabled] & { | |||||
pointer-events: none; // Future-proof disabling of clicks on `<a>` elements | |||||
} | |||||
} | |||||
} | |||||
// Alternate buttons | |||||
// -------------------------------------------------- | |||||
.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); | |||||
} | |||||
// Info appears as blue-green | |||||
.btn-info { | |||||
.button-variant(@btn-info-color; @btn-info-bg; @btn-info-border); | |||||
} | |||||
// Warning appears as orange | |||||
.btn-warning { | |||||
.button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border); | |||||
} | |||||
// Danger and error appear as red | |||||
.btn-danger { | |||||
.button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border); | |||||
} | |||||
// Link buttons | |||||
// ------------------------- | |||||
// Make a button look and behave like a link | |||||
.btn-link { | |||||
color: @link-color; | |||||
font-weight: normal; | |||||
border-radius: 0; | |||||
&, | |||||
&:active, | |||||
&.active, | |||||
&[disabled], | |||||
fieldset[disabled] & { | |||||
background-color: transparent; | |||||
.box-shadow(none); | |||||
} | |||||
&, | |||||
&:hover, | |||||
&:focus, | |||||
&:active { | |||||
border-color: transparent; | |||||
} | |||||
&:hover, | |||||
&:focus { | |||||
color: @link-hover-color; | |||||
text-decoration: @link-hover-decoration; | |||||
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; @btn-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; @btn-border-radius-small); | |||||
} | |||||
.btn-xs { | |||||
.button-size(@padding-xs-vertical; @padding-xs-horizontal; @font-size-small; @line-height-small; @btn-border-radius-small); | |||||
} | |||||
// Block button | |||||
// -------------------------------------------------- | |||||
.btn-block { | |||||
display: block; | |||||
width: 100%; | |||||
} | |||||
// 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%; | |||||
} | |||||
} |
@ -0,0 +1,269 @@ | |||||
// | |||||
// Carousel | |||||
// -------------------------------------------------- | |||||
// Wrapper for the slide container and indicators | |||||
.carousel { | |||||
position: relative; | |||||
} | |||||
.carousel-inner { | |||||
position: relative; | |||||
overflow: hidden; | |||||
width: 100%; | |||||
> .item { | |||||
display: none; | |||||
position: relative; | |||||
.transition(.6s ease-in-out left); | |||||
// Account for jankitude on images | |||||
> img, | |||||
> a > img { | |||||
&:extend(.img-responsive); | |||||
line-height: 1; | |||||
} | |||||
// WebKit CSS3 transforms for supported devices | |||||
@media all and (transform-3d), (-webkit-transform-3d) { | |||||
.transition-transform(~'0.6s ease-in-out'); | |||||
.backface-visibility(~'hidden'); | |||||
.perspective(1000px); | |||||
&.next, | |||||
&.active.right { | |||||
.translate3d(100%, 0, 0); | |||||
left: 0; | |||||
} | |||||
&.prev, | |||||
&.active.left { | |||||
.translate3d(-100%, 0, 0); | |||||
left: 0; | |||||
} | |||||
&.next.left, | |||||
&.prev.right, | |||||
&.active { | |||||
.translate3d(0, 0, 0); | |||||
left: 0; | |||||
} | |||||
} | |||||
} | |||||
> .active, | |||||
> .next, | |||||
> .prev { | |||||
display: block; | |||||
} | |||||
> .active { | |||||
left: 0; | |||||
} | |||||
> .next, | |||||
> .prev { | |||||
position: absolute; | |||||
top: 0; | |||||
width: 100%; | |||||
} | |||||
> .next { | |||||
left: 100%; | |||||
} | |||||
> .prev { | |||||
left: -100%; | |||||
} | |||||
> .next.left, | |||||
> .prev.right { | |||||
left: 0; | |||||
} | |||||
> .active.left { | |||||
left: -100%; | |||||
} | |||||
> .active.right { | |||||
left: 100%; | |||||
} | |||||
} | |||||
// Left/right controls for nav | |||||
// --------------------------- | |||||
.carousel-control { | |||||
position: absolute; | |||||
top: 0; | |||||
left: 0; | |||||
bottom: 0; | |||||
width: @carousel-control-width; | |||||
.opacity(@carousel-control-opacity); | |||||
font-size: @carousel-control-font-size; | |||||
color: @carousel-control-color; | |||||
text-align: center; | |||||
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. | |||||
// Set gradients for backgrounds | |||||
&.left { | |||||
#gradient > .horizontal(@start-color: rgba(0,0,0,.5); @end-color: rgba(0,0,0,.0001)); | |||||
} | |||||
&.right { | |||||
left: auto; | |||||
right: 0; | |||||
#gradient > .horizontal(@start-color: rgba(0,0,0,.0001); @end-color: rgba(0,0,0,.5)); | |||||
} | |||||
// Hover/focus state | |||||
&:hover, | |||||
&:focus { | |||||
outline: 0; | |||||
color: @carousel-control-color; | |||||
text-decoration: none; | |||||
.opacity(.9); | |||||
} | |||||
// Toggles | |||||
.icon-prev, | |||||
.icon-next, | |||||
.glyphicon-chevron-left, | |||||
.glyphicon-chevron-right { | |||||
position: absolute; | |||||
top: 50%; | |||||
margin-top: -10px; | |||||
z-index: 5; | |||||
display: inline-block; | |||||
} | |||||
.icon-prev, | |||||
.glyphicon-chevron-left { | |||||
left: 50%; | |||||
margin-left: -10px; | |||||
} | |||||
.icon-next, | |||||
.glyphicon-chevron-right { | |||||
right: 50%; | |||||
margin-right: -10px; | |||||
} | |||||
.icon-prev, | |||||
.icon-next { | |||||
width: 20px; | |||||
height: 20px; | |||||
line-height: 1; | |||||
font-family: serif; | |||||
} | |||||
.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) | |||||
} | |||||
} | |||||
} | |||||
// Optional indicator pips | |||||
// | |||||
// Add an unordered list with the following class and add a list item for each | |||||
// slide your carousel holds. | |||||
.carousel-indicators { | |||||
position: absolute; | |||||
bottom: 10px; | |||||
left: 50%; | |||||
z-index: 15; | |||||
width: 60%; | |||||
margin-left: -30%; | |||||
padding-left: 0; | |||||
list-style: none; | |||||
text-align: center; | |||||
li { | |||||
display: inline-block; | |||||
width: 10px; | |||||
height: 10px; | |||||
margin: 1px; | |||||
text-indent: -999px; | |||||
border: 1px solid @carousel-indicator-border-color; | |||||
border-radius: 10px; | |||||
cursor: pointer; | |||||
// IE8-9 hack for event handling | |||||
// | |||||
// Internet Explorer 8-9 does not support clicks on elements without a set | |||||
// `background-color`. We cannot use `filter` since that's not viewed as a | |||||
// background color by the browser. Thus, a hack is needed. | |||||
// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Internet_Explorer | |||||
// | |||||
// For IE8, we set solid black as it doesn't support `rgba()`. For IE9, we | |||||
// set alpha transparency for the best results possible. | |||||
background-color: #000 \9; // IE8 | |||||
background-color: rgba(0,0,0,0); // IE9 | |||||
} | |||||
.active { | |||||
margin: 0; | |||||
width: 12px; | |||||
height: 12px; | |||||
background-color: @carousel-indicator-active-bg; | |||||
} | |||||
} | |||||
// Optional captions | |||||
// ----------------------------- | |||||
// Hidden by default for smaller viewports | |||||
.carousel-caption { | |||||
position: absolute; | |||||
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 | |||||
} | |||||
} | |||||
// Scale up controls for tablets and up | |||||
@media screen and (min-width: @screen-sm-min) { | |||||
// Scale up the controls a smidge | |||||
.carousel-control { | |||||
.glyphicon-chevron-left, | |||||
.glyphicon-chevron-right, | |||||
.icon-prev, | |||||
.icon-next { | |||||
width: 30px; | |||||
height: 30px; | |||||
margin-top: -15px; | |||||
font-size: 30px; | |||||
} | |||||
.glyphicon-chevron-left, | |||||
.icon-prev { | |||||
margin-left: -15px; | |||||
} | |||||
.glyphicon-chevron-right, | |||||
.icon-next { | |||||
margin-right: -15px; | |||||
} | |||||
} | |||||
// Show and left align the captions | |||||
.carousel-caption { | |||||
left: 20%; | |||||
right: 20%; | |||||
padding-bottom: 30px; | |||||
} | |||||
// Move up the indicators | |||||
.carousel-indicators { | |||||
bottom: 20px; | |||||
} | |||||
} |
@ -0,0 +1,34 @@ | |||||
// | |||||
// Close icons | |||||
// -------------------------------------------------- | |||||
.close { | |||||
float: right; | |||||
font-size: (@font-size-base * 1.5); | |||||
font-weight: @close-font-weight; | |||||
line-height: 1; | |||||
color: @close-color; | |||||
text-shadow: @close-text-shadow; | |||||
.opacity(.2); | |||||
&:hover, | |||||
&:focus { | |||||
color: @close-color; | |||||
text-decoration: none; | |||||
cursor: pointer; | |||||
.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="#"`. | |||||
// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile | |||||
button& { | |||||
padding: 0; | |||||
cursor: pointer; | |||||
background: transparent; | |||||
border: 0; | |||||
-webkit-appearance: none; | |||||
} | |||||
} |
@ -0,0 +1,69 @@ | |||||
// | |||||
// Code (inline and block) | |||||
// -------------------------------------------------- | |||||
// Inline and block code styles | |||||
code, | |||||
kbd, | |||||
pre, | |||||
samp { | |||||
font-family: @font-family-monospace; | |||||
} | |||||
// Inline code | |||||
code { | |||||
padding: 2px 4px; | |||||
font-size: 90%; | |||||
color: @code-color; | |||||
background-color: @code-bg; | |||||
border-radius: @border-radius-base; | |||||
} | |||||
// User input typically entered via keyboard | |||||
kbd { | |||||
padding: 2px 4px; | |||||
font-size: 90%; | |||||
color: @kbd-color; | |||||
background-color: @kbd-bg; | |||||
border-radius: @border-radius-small; | |||||
box-shadow: inset 0 -1px 0 rgba(0,0,0,.25); | |||||
kbd { | |||||
padding: 0; | |||||
font-size: 100%; | |||||
font-weight: bold; | |||||
box-shadow: none; | |||||
} | |||||
} | |||||
// Blocks of code | |||||
pre { | |||||
display: block; | |||||
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; | |||||
color: @pre-color; | |||||
background-color: @pre-bg; | |||||
border: 1px solid @pre-border-color; | |||||
border-radius: @border-radius-base; | |||||
// Account for some code outputs that place code tags in pre tags | |||||
code { | |||||
padding: 0; | |||||
font-size: inherit; | |||||
color: inherit; | |||||
white-space: pre-wrap; | |||||
background-color: transparent; | |||||
border-radius: 0; | |||||
} | |||||
} | |||||
// Enable scrollable blocks of code | |||||
.pre-scrollable { | |||||
max-height: @pre-scrollable-max-height; | |||||
overflow-y: scroll; | |||||
} |
@ -0,0 +1,33 @@ | |||||
// | |||||
// 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/twbs/bootstrap/pull/3552. | |||||
.fade { | |||||
opacity: 0; | |||||
.transition(opacity .15s linear); | |||||
&.in { | |||||
opacity: 1; | |||||
} | |||||
} | |||||
.collapse { | |||||
display: none; | |||||
&.in { display: block; } | |||||
tr&.in { display: table-row; } | |||||
tbody&.in { display: table-row-group; } | |||||
} | |||||
.collapsing { | |||||
position: relative; | |||||
height: 0; | |||||
overflow: hidden; | |||||
.transition-property(~"height, visibility"); | |||||
.transition-duration(.35s); | |||||
.transition-timing-function(ease); | |||||
} |
@ -0,0 +1,216 @@ | |||||
// | |||||
// Dropdown menus | |||||
// -------------------------------------------------- | |||||
// Dropdown arrow/caret | |||||
.caret { | |||||
display: inline-block; | |||||
width: 0; | |||||
height: 0; | |||||
margin-left: 2px; | |||||
vertical-align: middle; | |||||
border-top: @caret-width-base dashed; | |||||
border-top: @caret-width-base solid ~"\9"; // IE8 | |||||
border-right: @caret-width-base solid transparent; | |||||
border-left: @caret-width-base solid transparent; | |||||
} | |||||
// The dropdown wrapper (div) | |||||
.dropup, | |||||
.dropdown { | |||||
position: relative; | |||||
} | |||||
// Prevent the focus on the dropdown toggle when closing dropdowns | |||||
.dropdown-toggle:focus { | |||||
outline: 0; | |||||
} | |||||
// The dropdown menu (ul) | |||||
.dropdown-menu { | |||||
position: absolute; | |||||
top: 100%; | |||||
left: 0; | |||||
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; | |||||
font-size: @font-size-base; | |||||
text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer) | |||||
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 | |||||
// | |||||
// Deprecated as of 3.1.0 in favor of `.dropdown-menu-[dir]` | |||||
&.pull-right { | |||||
right: 0; | |||||
left: auto; | |||||
} | |||||
// Dividers (basically an hr) within the dropdown | |||||
.divider { | |||||
.nav-divider(@dropdown-divider-bg); | |||||
} | |||||
// Links within the dropdown menu | |||||
> li > a { | |||||
display: block; | |||||
padding: 3px 20px; | |||||
clear: both; | |||||
font-weight: normal; | |||||
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, | |||||
&:focus { | |||||
text-decoration: none; | |||||
color: @dropdown-link-hover-color; | |||||
background-color: @dropdown-link-hover-bg; | |||||
} | |||||
} | |||||
// Active state | |||||
.dropdown-menu > .active > a { | |||||
&, | |||||
&:hover, | |||||
&:focus { | |||||
color: @dropdown-link-active-color; | |||||
text-decoration: none; | |||||
outline: 0; | |||||
background-color: @dropdown-link-active-bg; | |||||
} | |||||
} | |||||
// Disabled state | |||||
// | |||||
// Gray out text and ensure the hover/focus state remains gray | |||||
.dropdown-menu > .disabled > a { | |||||
&, | |||||
&:hover, | |||||
&:focus { | |||||
color: @dropdown-link-disabled-color; | |||||
} | |||||
// Nuke hover/focus effects | |||||
&:hover, | |||||
&:focus { | |||||
text-decoration: none; | |||||
background-color: transparent; | |||||
background-image: none; // Remove CSS gradient | |||||
.reset-filter(); | |||||
cursor: @cursor-disabled; | |||||
} | |||||
} | |||||
// Open state for the dropdown | |||||
.open { | |||||
// Show the menu | |||||
> .dropdown-menu { | |||||
display: block; | |||||
} | |||||
// Remove the outline when :focus is triggered | |||||
> a { | |||||
outline: 0; | |||||
} | |||||
} | |||||
// Menu positioning | |||||
// | |||||
// Add extra class to `.dropdown-menu` to flip the alignment of the dropdown | |||||
// menu with the parent. | |||||
.dropdown-menu-right { | |||||
left: auto; // Reset the default from `.dropdown-menu` | |||||
right: 0; | |||||
} | |||||
// With v3, we enabled auto-flipping if you have a dropdown within a right | |||||
// aligned nav component. To enable the undoing of that, we provide an override | |||||
// to restore the default dropdown menu alignment. | |||||
// | |||||
// This is only for left-aligning a dropdown menu within a `.navbar-right` or | |||||
// `.pull-right` nav component. | |||||
.dropdown-menu-left { | |||||
left: 0; | |||||
right: auto; | |||||
} | |||||
// Dropdown section headers | |||||
.dropdown-header { | |||||
display: block; | |||||
padding: 3px 20px; | |||||
font-size: @font-size-small; | |||||
line-height: @line-height-base; | |||||
color: @dropdown-header-color; | |||||
white-space: nowrap; // as with > li > a | |||||
} | |||||
// Backdrop to catch body clicks on mobile, etc. | |||||
.dropdown-backdrop { | |||||
position: fixed; | |||||
left: 0; | |||||
right: 0; | |||||
bottom: 0; | |||||
top: 0; | |||||
z-index: (@zindex-dropdown - 10); | |||||
} | |||||
// Right aligned dropdowns | |||||
.pull-right > .dropdown-menu { | |||||
right: 0; | |||||
left: auto; | |||||
} | |||||
// Allow for dropdowns to go bottom up (aka, dropup-menu) | |||||
// | |||||
// Just add .dropup after the standard .dropdown class and you're set, bro. | |||||
// TODO: abstract this so that the navbar fixed styles are not placed here? | |||||
.dropup, | |||||
.navbar-fixed-bottom .dropdown { | |||||
// Reverse the caret | |||||
.caret { | |||||
border-top: 0; | |||||
border-bottom: @caret-width-base dashed; | |||||
border-bottom: @caret-width-base solid ~"\9"; // IE8 | |||||
content: ""; | |||||
} | |||||
// Different positioning for bottom up menu | |||||
.dropdown-menu { | |||||
top: auto; | |||||
bottom: 100%; | |||||
margin-bottom: 2px; | |||||
} | |||||
} | |||||
// Component alignment | |||||
// | |||||
// Reiterate per navbar.less and the modified component alignment there. | |||||
@media (min-width: @grid-float-breakpoint) { | |||||
.navbar-right { | |||||
.dropdown-menu { | |||||
.dropdown-menu-right(); | |||||
} | |||||
// Necessary for overrides of the default right aligned menu. | |||||
// Will remove come v4 in all likelihood. | |||||
.dropdown-menu-left { | |||||
.dropdown-menu-left(); | |||||
} | |||||
} | |||||
} |
@ -0,0 +1,607 @@ | |||||
// | |||||
// Forms | |||||
// -------------------------------------------------- | |||||
// Normalize non-controls | |||||
// | |||||
// Restyle and baseline non-control form elements. | |||||
fieldset { | |||||
padding: 0; | |||||
margin: 0; | |||||
border: 0; | |||||
// Chrome and Firefox set a `min-width: min-content;` on fieldsets, | |||||
// so we reset that to ensure it behaves more like a standard block element. | |||||
// See https://github.com/twbs/bootstrap/issues/12359. | |||||
min-width: 0; | |||||
} | |||||
legend { | |||||
display: block; | |||||
width: 100%; | |||||
padding: 0; | |||||
margin-bottom: @line-height-computed; | |||||
font-size: (@font-size-base * 1.5); | |||||
line-height: inherit; | |||||
color: @legend-color; | |||||
border: 0; | |||||
border-bottom: 1px solid @legend-border-color; | |||||
} | |||||
label { | |||||
display: inline-block; | |||||
max-width: 100%; // Force IE8 to wrap long content (see https://github.com/twbs/bootstrap/issues/13141) | |||||
margin-bottom: 5px; | |||||
font-weight: bold; | |||||
} | |||||
// Normalize form controls | |||||
// | |||||
// While most of our form styles require extra classes, some basic normalization | |||||
// is required to ensure optimum display with or without those classes to better | |||||
// address browser inconsistencies. | |||||
// 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: 1px \9; // IE8-9 | |||||
line-height: normal; | |||||
} | |||||
input[type="file"] { | |||||
display: block; | |||||
} | |||||
// Make range inputs behave like textual form controls | |||||
input[type="range"] { | |||||
display: block; | |||||
width: 100%; | |||||
} | |||||
// Make multiple select elements height not fixed | |||||
select[multiple], | |||||
select[size] { | |||||
height: auto; | |||||
} | |||||
// Focus for file, radio, and checkbox | |||||
input[type="file"]:focus, | |||||
input[type="radio"]:focus, | |||||
input[type="checkbox"]:focus { | |||||
.tab-focus(); | |||||
} | |||||
// Adjust output element | |||||
output { | |||||
display: block; | |||||
padding-top: (@padding-base-vertical + 1); | |||||
font-size: @font-size-base; | |||||
line-height: @line-height-base; | |||||
color: @input-color; | |||||
} | |||||
// 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: @input-color; | |||||
background-color: @input-bg; | |||||
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214 | |||||
border: 1px solid @input-border; | |||||
border-radius: @input-border-radius; // Note: This has no effect on <select>s in some browsers, due to the limited stylability of <select>s in CSS. | |||||
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); | |||||
.transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s"); | |||||
// Customize the `:focus` state to imitate native WebKit styles. | |||||
.form-control-focus(); | |||||
// Placeholder | |||||
.placeholder(); | |||||
// Disabled and read-only inputs | |||||
// | |||||
// HTML5 says that controls 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] & { | |||||
background-color: @input-bg-disabled; | |||||
opacity: 1; // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655 | |||||
} | |||||
&[disabled], | |||||
fieldset[disabled] & { | |||||
cursor: @cursor-disabled; | |||||
} | |||||
// Reset height for `textarea`s | |||||
textarea& { | |||||
height: auto; | |||||
} | |||||
} | |||||
// Search inputs in iOS | |||||
// | |||||
// This overrides the extra rounded corners on search inputs in iOS so that our | |||||
// `.form-control` class can properly style them. Note that this cannot simply | |||||
// be added to `.form-control` as it's not specific enough. For details, see | |||||
// https://github.com/twbs/bootstrap/issues/11586. | |||||
input[type="search"] { | |||||
-webkit-appearance: none; | |||||
} | |||||
// Special styles for iOS temporal inputs | |||||
// | |||||
// In Mobile Safari, setting `display: block` on temporal inputs causes the | |||||
// text within the input to become vertically misaligned. As a workaround, we | |||||
// set a pixel line-height that matches the given height of the input, but only | |||||
// for Safari. See https://bugs.webkit.org/show_bug.cgi?id=139848 | |||||
// | |||||
// Note that as of 8.3, iOS doesn't support `datetime` or `week`. | |||||
@media screen and (-webkit-min-device-pixel-ratio: 0) { | |||||
input[type="date"], | |||||
input[type="time"], | |||||
input[type="datetime-local"], | |||||
input[type="month"] { | |||||
&.form-control { | |||||
line-height: @input-height-base; | |||||
} | |||||
&.input-sm, | |||||
.input-group-sm & { | |||||
line-height: @input-height-small; | |||||
} | |||||
&.input-lg, | |||||
.input-group-lg & { | |||||
line-height: @input-height-large; | |||||
} | |||||
} | |||||
} | |||||
// 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: @form-group-margin-bottom; | |||||
} | |||||
// Checkboxes and radios | |||||
// | |||||
// Indent the labels to position radios/checkboxes as hanging controls. | |||||
.radio, | |||||
.checkbox { | |||||
position: relative; | |||||
display: block; | |||||
margin-top: 10px; | |||||
margin-bottom: 10px; | |||||
label { | |||||
min-height: @line-height-computed; // Ensure the input doesn't jump when there is no text | |||||
padding-left: 20px; | |||||
margin-bottom: 0; | |||||
font-weight: normal; | |||||
cursor: pointer; | |||||
} | |||||
} | |||||
.radio input[type="radio"], | |||||
.radio-inline input[type="radio"], | |||||
.checkbox input[type="checkbox"], | |||||
.checkbox-inline input[type="checkbox"] { | |||||
position: absolute; | |||||
margin-left: -20px; | |||||
margin-top: 4px \9; | |||||
} | |||||
.radio + .radio, | |||||
.checkbox + .checkbox { | |||||
margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing | |||||
} | |||||
// Radios and checkboxes on same line | |||||
.radio-inline, | |||||
.checkbox-inline { | |||||
position: relative; | |||||
display: inline-block; | |||||
padding-left: 20px; | |||||
margin-bottom: 0; | |||||
vertical-align: middle; | |||||
font-weight: normal; | |||||
cursor: pointer; | |||||
} | |||||
.radio-inline + .radio-inline, | |||||
.checkbox-inline + .checkbox-inline { | |||||
margin-top: 0; | |||||
margin-left: 10px; // space out consecutive inline controls | |||||
} | |||||
// Apply same disabled cursor tweak as for inputs | |||||
// Some special care is needed because <label>s don't inherit their parent's `cursor`. | |||||
// | |||||
// Note: Neither radios nor checkboxes can be readonly. | |||||
input[type="radio"], | |||||
input[type="checkbox"] { | |||||
&[disabled], | |||||
&.disabled, | |||||
fieldset[disabled] & { | |||||
cursor: @cursor-disabled; | |||||
} | |||||
} | |||||
// These classes are used directly on <label>s | |||||
.radio-inline, | |||||
.checkbox-inline { | |||||
&.disabled, | |||||
fieldset[disabled] & { | |||||
cursor: @cursor-disabled; | |||||
} | |||||
} | |||||
// These classes are used on elements with <label> descendants | |||||
.radio, | |||||
.checkbox { | |||||
&.disabled, | |||||
fieldset[disabled] & { | |||||
label { | |||||
cursor: @cursor-disabled; | |||||
} | |||||
} | |||||
} | |||||
// Static form control text | |||||
// | |||||
// Apply class to a `p` element to make any string of text align with labels in | |||||
// a horizontal form layout. | |||||
.form-control-static { | |||||
// Size it appropriately next to real form controls | |||||
padding-top: (@padding-base-vertical + 1); | |||||
padding-bottom: (@padding-base-vertical + 1); | |||||
// Remove default margin from `p` | |||||
margin-bottom: 0; | |||||
min-height: (@line-height-computed + @font-size-base); | |||||
&.input-lg, | |||||
&.input-sm { | |||||
padding-left: 0; | |||||
padding-right: 0; | |||||
} | |||||
} | |||||
// Form control sizing | |||||
// | |||||
// Build on `.form-control` with modifier classes to decrease or increase the | |||||
// height and font-size of form controls. | |||||
// | |||||
// The `.form-group-* form-control` variations are sadly duplicated to avoid the | |||||
// issue documented in https://github.com/twbs/bootstrap/issues/15074. | |||||
.input-sm { | |||||
.input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @input-border-radius-small); | |||||
} | |||||
.form-group-sm { | |||||
.form-control { | |||||
height: @input-height-small; | |||||
padding: @padding-small-vertical @padding-small-horizontal; | |||||
font-size: @font-size-small; | |||||
line-height: @line-height-small; | |||||
border-radius: @input-border-radius-small; | |||||
} | |||||
select.form-control { | |||||
height: @input-height-small; | |||||
line-height: @input-height-small; | |||||
} | |||||
textarea.form-control, | |||||
select[multiple].form-control { | |||||
height: auto; | |||||
} | |||||
.form-control-static { | |||||
height: @input-height-small; | |||||
min-height: (@line-height-computed + @font-size-small); | |||||
padding: (@padding-small-vertical + 1) @padding-small-horizontal; | |||||
font-size: @font-size-small; | |||||
line-height: @line-height-small; | |||||
} | |||||
} | |||||
.input-lg { | |||||
.input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @input-border-radius-large); | |||||
} | |||||
.form-group-lg { | |||||
.form-control { | |||||
height: @input-height-large; | |||||
padding: @padding-large-vertical @padding-large-horizontal; | |||||
font-size: @font-size-large; | |||||
line-height: @line-height-large; | |||||
border-radius: @input-border-radius-large; | |||||
} | |||||
select.form-control { | |||||
height: @input-height-large; | |||||
line-height: @input-height-large; | |||||
} | |||||
textarea.form-control, | |||||
select[multiple].form-control { | |||||
height: auto; | |||||
} | |||||
.form-control-static { | |||||
height: @input-height-large; | |||||
min-height: (@line-height-computed + @font-size-large); | |||||
padding: (@padding-large-vertical + 1) @padding-large-horizontal; | |||||
font-size: @font-size-large; | |||||
line-height: @line-height-large; | |||||
} | |||||
} | |||||
// Form control feedback states | |||||
// | |||||
// Apply contextual and semantic states to individual form controls. | |||||
.has-feedback { | |||||
// Enable absolute positioning | |||||
position: relative; | |||||
// Ensure icons don't overlap text | |||||
.form-control { | |||||
padding-right: (@input-height-base * 1.25); | |||||
} | |||||
} | |||||
// Feedback icon (requires .glyphicon classes) | |||||
.form-control-feedback { | |||||
position: absolute; | |||||
top: 0; | |||||
right: 0; | |||||
z-index: 2; // Ensure icon is above input groups | |||||
display: block; | |||||
width: @input-height-base; | |||||
height: @input-height-base; | |||||
line-height: @input-height-base; | |||||
text-align: center; | |||||
pointer-events: none; | |||||
} | |||||
.input-lg + .form-control-feedback, | |||||
.input-group-lg + .form-control-feedback, | |||||
.form-group-lg .form-control + .form-control-feedback { | |||||
width: @input-height-large; | |||||
height: @input-height-large; | |||||
line-height: @input-height-large; | |||||
} | |||||
.input-sm + .form-control-feedback, | |||||
.input-group-sm + .form-control-feedback, | |||||
.form-group-sm .form-control + .form-control-feedback { | |||||
width: @input-height-small; | |||||
height: @input-height-small; | |||||
line-height: @input-height-small; | |||||
} | |||||
// Feedback states | |||||
.has-success { | |||||
.form-control-validation(@state-success-text; @state-success-text; @state-success-bg); | |||||
} | |||||
.has-warning { | |||||
.form-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg); | |||||
} | |||||
.has-error { | |||||
.form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg); | |||||
} | |||||
// Reposition feedback icon if input has visible label above | |||||
.has-feedback label { | |||||
& ~ .form-control-feedback { | |||||
top: (@line-height-computed + 5); // Height of the `label` and its margin | |||||
} | |||||
&.sr-only ~ .form-control-feedback { | |||||
top: 0; | |||||
} | |||||
} | |||||
// Help text | |||||
// | |||||
// Apply to any element you wish to create light text for placement immediately | |||||
// below a form control. Use for general help, formatting, or instructional text. | |||||
.help-block { | |||||
display: block; // account for any element using help-block | |||||
margin-top: 5px; | |||||
margin-bottom: 10px; | |||||
color: lighten(@text-color, 25%); // lighten the text some for contrast | |||||
} | |||||
// Inline forms | |||||
// | |||||
// Make forms appear inline(-block) by adding the `.form-inline` class. Inline | |||||
// forms begin stacked on extra small (mobile) devices and then go inline when | |||||
// viewports reach <768px. | |||||
// | |||||
// Requires wrapping inputs and labels with `.form-group` for proper display of | |||||
// default HTML form controls and our custom form controls (e.g., input groups). | |||||
// | |||||
// Heads up! This is mixin-ed into `.navbar-form` in navbars.less. | |||||
.form-inline { | |||||
// Kick in the inline | |||||
@media (min-width: @screen-sm-min) { | |||||
// Inline-block all the things for "inline" | |||||
.form-group { | |||||
display: inline-block; | |||||
margin-bottom: 0; | |||||
vertical-align: middle; | |||||
} | |||||
// In navbar-form, allow folks to *not* use `.form-group` | |||||
.form-control { | |||||
display: inline-block; | |||||
width: auto; // Prevent labels from stacking above inputs in `.form-group` | |||||
vertical-align: middle; | |||||
} | |||||
// Make static controls behave like regular ones | |||||
.form-control-static { | |||||
display: inline-block; | |||||
} | |||||
.input-group { | |||||
display: inline-table; | |||||
vertical-align: middle; | |||||
.input-group-addon, | |||||
.input-group-btn, | |||||
.form-control { | |||||
width: auto; | |||||
} | |||||
} | |||||
// Input groups need that 100% width though | |||||
.input-group > .form-control { | |||||
width: 100%; | |||||
} | |||||
.control-label { | |||||
margin-bottom: 0; | |||||
vertical-align: middle; | |||||
} | |||||
// Remove default margin on radios/checkboxes that were used for stacking, and | |||||
// then undo the floating of radios and checkboxes to match. | |||||
.radio, | |||||
.checkbox { | |||||
display: inline-block; | |||||
margin-top: 0; | |||||
margin-bottom: 0; | |||||
vertical-align: middle; | |||||
label { | |||||
padding-left: 0; | |||||
} | |||||
} | |||||
.radio input[type="radio"], | |||||
.checkbox input[type="checkbox"] { | |||||
position: relative; | |||||
margin-left: 0; | |||||
} | |||||
// Re-override the feedback icon. | |||||
.has-feedback .form-control-feedback { | |||||
top: 0; | |||||
} | |||||
} | |||||
} | |||||
// Horizontal forms | |||||
// | |||||
// Horizontal forms are built on grid classes and allow you to create forms with | |||||
// labels on the left and inputs on the right. | |||||
.form-horizontal { | |||||
// Consistent vertical alignment of radios and checkboxes | |||||
// | |||||
// Labels also get some reset styles, but that is scoped to a media query below. | |||||
.radio, | |||||
.checkbox, | |||||
.radio-inline, | |||||
.checkbox-inline { | |||||
margin-top: 0; | |||||
margin-bottom: 0; | |||||
padding-top: (@padding-base-vertical + 1); // Default padding plus a border | |||||
} | |||||
// Account for padding we're adding to ensure the alignment and of help text | |||||
// and other content below items | |||||
.radio, | |||||
.checkbox { | |||||
min-height: (@line-height-computed + (@padding-base-vertical + 1)); | |||||
} | |||||
// Make form groups behave like rows | |||||
.form-group { | |||||
.make-row(); | |||||
} | |||||
// Reset spacing and right align labels, but scope to media queries so that | |||||
// labels on narrow viewports stack the same as a default form example. | |||||
@media (min-width: @screen-sm-min) { | |||||
.control-label { | |||||
text-align: right; | |||||
margin-bottom: 0; | |||||
padding-top: (@padding-base-vertical + 1); // Default padding plus a border | |||||
} | |||||
} | |||||
// Validation states | |||||
// | |||||
// Reposition the icon because it's now within a grid column and columns have | |||||
// `position: relative;` on them. Also accounts for the grid gutter padding. | |||||
.has-feedback .form-control-feedback { | |||||
right: floor((@grid-gutter-width / 2)); | |||||
} | |||||
// Form group sizes | |||||
// | |||||
// Quick utility class for applying `.input-lg` and `.input-sm` styles to the | |||||
// inputs and labels within a `.form-group`. | |||||
.form-group-lg { | |||||
@media (min-width: @screen-sm-min) { | |||||
.control-label { | |||||
padding-top: ((@padding-large-vertical * @line-height-large) + 1); | |||||
font-size: @font-size-large; | |||||
} | |||||
} | |||||
} | |||||
.form-group-sm { | |||||
@media (min-width: @screen-sm-min) { | |||||
.control-label { | |||||
padding-top: (@padding-small-vertical + 1); | |||||
font-size: @font-size-small; | |||||
} | |||||
} | |||||
} | |||||
} |
@ -0,0 +1,305 @@ | |||||
// | |||||
// Glyphicons for Bootstrap | |||||
// | |||||
// Since icons are fonts, they can be placed anywhere text is placed and are | |||||
// thus automatically sized to match the surrounding child. To use, create an | |||||
// inline element with the appropriate classes, like so: | |||||
// | |||||
// <a href="#"><span class="glyphicon glyphicon-star"></span> Star</a> | |||||
// Import the fonts | |||||
@font-face { | |||||
font-family: 'Glyphicons Halflings'; | |||||
src: url('@{icon-font-path}@{icon-font-name}.eot'); | |||||
src: url('@{icon-font-path}@{icon-font-name}.eot?#iefix') format('embedded-opentype'), | |||||
url('@{icon-font-path}@{icon-font-name}.woff2') format('woff2'), | |||||
url('@{icon-font-path}@{icon-font-name}.woff') format('woff'), | |||||
url('@{icon-font-path}@{icon-font-name}.ttf') format('truetype'), | |||||
url('@{icon-font-path}@{icon-font-name}.svg#@{icon-font-svg-id}') format('svg'); | |||||
} | |||||
// Catchall baseclass | |||||
.glyphicon { | |||||
position: relative; | |||||
top: 1px; | |||||
display: inline-block; | |||||
font-family: 'Glyphicons Halflings'; | |||||
font-style: normal; | |||||
font-weight: normal; | |||||
line-height: 1; | |||||
-webkit-font-smoothing: antialiased; | |||||
-moz-osx-font-smoothing: grayscale; | |||||
} | |||||
// Individual icons | |||||
.glyphicon-asterisk { &:before { content: "\2a"; } } | |||||
.glyphicon-plus { &:before { content: "\2b"; } } | |||||
.glyphicon-euro, | |||||
.glyphicon-eur { &:before { content: "\20ac"; } } | |||||
.glyphicon-minus { &:before { content: "\2212"; } } | |||||
.glyphicon-cloud { &:before { content: "\2601"; } } | |||||
.glyphicon-envelope { &:before { content: "\2709"; } } | |||||
.glyphicon-pencil { &:before { content: "\270f"; } } | |||||
.glyphicon-glass { &:before { content: "\e001"; } } | |||||
.glyphicon-music { &:before { content: "\e002"; } } | |||||
.glyphicon-search { &:before { content: "\e003"; } } | |||||
.glyphicon-heart { &:before { content: "\e005"; } } | |||||
.glyphicon-star { &:before { content: "\e006"; } } | |||||
.glyphicon-star-empty { &:before { content: "\e007"; } } | |||||
.glyphicon-user { &:before { content: "\e008"; } } | |||||
.glyphicon-film { &:before { content: "\e009"; } } | |||||
.glyphicon-th-large { &:before { content: "\e010"; } } | |||||
.glyphicon-th { &:before { content: "\e011"; } } | |||||
.glyphicon-th-list { &:before { content: "\e012"; } } | |||||
.glyphicon-ok { &:before { content: "\e013"; } } | |||||
.glyphicon-remove { &:before { content: "\e014"; } } | |||||
.glyphicon-zoom-in { &:before { content: "\e015"; } } | |||||
.glyphicon-zoom-out { &:before { content: "\e016"; } } | |||||
.glyphicon-off { &:before { content: "\e017"; } } | |||||
.glyphicon-signal { &:before { content: "\e018"; } } | |||||
.glyphicon-cog { &:before { content: "\e019"; } } | |||||
.glyphicon-trash { &:before { content: "\e020"; } } | |||||
.glyphicon-home { &:before { content: "\e021"; } } | |||||
.glyphicon-file { &:before { content: "\e022"; } } | |||||
.glyphicon-time { &:before { content: "\e023"; } } | |||||
.glyphicon-road { &:before { content: "\e024"; } } | |||||
.glyphicon-download-alt { &:before { content: "\e025"; } } | |||||
.glyphicon-download { &:before { content: "\e026"; } } | |||||
.glyphicon-upload { &:before { content: "\e027"; } } | |||||
.glyphicon-inbox { &:before { content: "\e028"; } } | |||||
.glyphicon-play-circle { &:before { content: "\e029"; } } | |||||
.glyphicon-repeat { &:before { content: "\e030"; } } | |||||
.glyphicon-refresh { &:before { content: "\e031"; } } | |||||
.glyphicon-list-alt { &:before { content: "\e032"; } } | |||||
.glyphicon-lock { &:before { content: "\e033"; } } | |||||
.glyphicon-flag { &:before { content: "\e034"; } } | |||||
.glyphicon-headphones { &:before { content: "\e035"; } } | |||||
.glyphicon-volume-off { &:before { content: "\e036"; } } | |||||
.glyphicon-volume-down { &:before { content: "\e037"; } } | |||||
.glyphicon-volume-up { &:before { content: "\e038"; } } | |||||
.glyphicon-qrcode { &:before { content: "\e039"; } } | |||||
.glyphicon-barcode { &:before { content: "\e040"; } } | |||||
.glyphicon-tag { &:before { content: "\e041"; } } | |||||
.glyphicon-tags { &:before { content: "\e042"; } } | |||||
.glyphicon-book { &:before { content: "\e043"; } } | |||||
.glyphicon-bookmark { &:before { content: "\e044"; } } | |||||
.glyphicon-print { &:before { content: "\e045"; } } | |||||
.glyphicon-camera { &:before { content: "\e046"; } } | |||||
.glyphicon-font { &:before { content: "\e047"; } } | |||||
.glyphicon-bold { &:before { content: "\e048"; } } | |||||
.glyphicon-italic { &:before { content: "\e049"; } } | |||||
.glyphicon-text-height { &:before { content: "\e050"; } } | |||||
.glyphicon-text-width { &:before { content: "\e051"; } } | |||||
.glyphicon-align-left { &:before { content: "\e052"; } } | |||||
.glyphicon-align-center { &:before { content: "\e053"; } } | |||||
.glyphicon-align-right { &:before { content: "\e054"; } } | |||||
.glyphicon-align-justify { &:before { content: "\e055"; } } | |||||
.glyphicon-list { &:before { content: "\e056"; } } | |||||
.glyphicon-indent-left { &:before { content: "\e057"; } } | |||||
.glyphicon-indent-right { &:before { content: "\e058"; } } | |||||
.glyphicon-facetime-video { &:before { content: "\e059"; } } | |||||
.glyphicon-picture { &:before { content: "\e060"; } } | |||||
.glyphicon-map-marker { &:before { content: "\e062"; } } | |||||
.glyphicon-adjust { &:before { content: "\e063"; } } | |||||
.glyphicon-tint { &:before { content: "\e064"; } } | |||||
.glyphicon-edit { &:before { content: "\e065"; } } | |||||
.glyphicon-share { &:before { content: "\e066"; } } | |||||
.glyphicon-check { &:before { content: "\e067"; } } | |||||
.glyphicon-move { &:before { content: "\e068"; } } | |||||
.glyphicon-step-backward { &:before { content: "\e069"; } } | |||||
.glyphicon-fast-backward { &:before { content: "\e070"; } } | |||||
.glyphicon-backward { &:before { content: "\e071"; } } | |||||
.glyphicon-play { &:before { content: "\e072"; } } | |||||
.glyphicon-pause { &:before { content: "\e073"; } } | |||||
.glyphicon-stop { &:before { content: "\e074"; } } | |||||
.glyphicon-forward { &:before { content: "\e075"; } } | |||||
.glyphicon-fast-forward { &:before { content: "\e076"; } } | |||||
.glyphicon-step-forward { &:before { content: "\e077"; } } | |||||
.glyphicon-eject { &:before { content: "\e078"; } } | |||||
.glyphicon-chevron-left { &:before { content: "\e079"; } } | |||||
.glyphicon-chevron-right { &:before { content: "\e080"; } } | |||||
.glyphicon-plus-sign { &:before { content: "\e081"; } } | |||||
.glyphicon-minus-sign { &:before { content: "\e082"; } } | |||||
.glyphicon-remove-sign { &:before { content: "\e083"; } } | |||||
.glyphicon-ok-sign { &:before { content: "\e084"; } } | |||||
.glyphicon-question-sign { &:before { content: "\e085"; } } | |||||
.glyphicon-info-sign { &:before { content: "\e086"; } } | |||||
.glyphicon-screenshot { &:before { content: "\e087"; } } | |||||
.glyphicon-remove-circle { &:before { content: "\e088"; } } | |||||
.glyphicon-ok-circle { &:before { content: "\e089"; } } | |||||
.glyphicon-ban-circle { &:before { content: "\e090"; } } | |||||
.glyphicon-arrow-left { &:before { content: "\e091"; } } | |||||
.glyphicon-arrow-right { &:before { content: "\e092"; } } | |||||
.glyphicon-arrow-up { &:before { content: "\e093"; } } | |||||
.glyphicon-arrow-down { &:before { content: "\e094"; } } | |||||
.glyphicon-share-alt { &:before { content: "\e095"; } } | |||||
.glyphicon-resize-full { &:before { content: "\e096"; } } | |||||
.glyphicon-resize-small { &:before { content: "\e097"; } } | |||||
.glyphicon-exclamation-sign { &:before { content: "\e101"; } } | |||||
.glyphicon-gift { &:before { content: "\e102"; } } | |||||
.glyphicon-leaf { &:before { content: "\e103"; } } | |||||
.glyphicon-fire { &:before { content: "\e104"; } } | |||||
.glyphicon-eye-open { &:before { content: "\e105"; } } | |||||
.glyphicon-eye-close { &:before { content: "\e106"; } } | |||||
.glyphicon-warning-sign { &:before { content: "\e107"; } } | |||||
.glyphicon-plane { &:before { content: "\e108"; } } | |||||
.glyphicon-calendar { &:before { content: "\e109"; } } | |||||
.glyphicon-random { &:before { content: "\e110"; } } | |||||
.glyphicon-comment { &:before { content: "\e111"; } } | |||||
.glyphicon-magnet { &:before { content: "\e112"; } } | |||||
.glyphicon-chevron-up { &:before { content: "\e113"; } } | |||||
.glyphicon-chevron-down { &:before { content: "\e114"; } } | |||||
.glyphicon-retweet { &:before { content: "\e115"; } } | |||||
.glyphicon-shopping-cart { &:before { content: "\e116"; } } | |||||
.glyphicon-folder-close { &:before { content: "\e117"; } } | |||||
.glyphicon-folder-open { &:before { content: "\e118"; } } | |||||
.glyphicon-resize-vertical { &:before { content: "\e119"; } } | |||||
.glyphicon-resize-horizontal { &:before { content: "\e120"; } } | |||||
.glyphicon-hdd { &:before { content: "\e121"; } } | |||||
.glyphicon-bullhorn { &:before { content: "\e122"; } } | |||||
.glyphicon-bell { &:before { content: "\e123"; } } | |||||
.glyphicon-certificate { &:before { content: "\e124"; } } | |||||
.glyphicon-thumbs-up { &:before { content: "\e125"; } } | |||||
.glyphicon-thumbs-down { &:before { content: "\e126"; } } | |||||
.glyphicon-hand-right { &:before { content: "\e127"; } } | |||||
.glyphicon-hand-left { &:before { content: "\e128"; } } | |||||
.glyphicon-hand-up { &:before { content: "\e129"; } } | |||||
.glyphicon-hand-down { &:before { content: "\e130"; } } | |||||
.glyphicon-circle-arrow-right { &:before { content: "\e131"; } } | |||||
.glyphicon-circle-arrow-left { &:before { content: "\e132"; } } | |||||
.glyphicon-circle-arrow-up { &:before { content: "\e133"; } } | |||||
.glyphicon-circle-arrow-down { &:before { content: "\e134"; } } | |||||
.glyphicon-globe { &:before { content: "\e135"; } } | |||||
.glyphicon-wrench { &:before { content: "\e136"; } } | |||||
.glyphicon-tasks { &:before { content: "\e137"; } } | |||||
.glyphicon-filter { &:before { content: "\e138"; } } | |||||
.glyphicon-briefcase { &:before { content: "\e139"; } } | |||||
.glyphicon-fullscreen { &:before { content: "\e140"; } } | |||||
.glyphicon-dashboard { &:before { content: "\e141"; } } | |||||
.glyphicon-paperclip { &:before { content: "\e142"; } } | |||||
.glyphicon-heart-empty { &:before { content: "\e143"; } } | |||||
.glyphicon-link { &:before { content: "\e144"; } } | |||||
.glyphicon-phone { &:before { content: "\e145"; } } | |||||
.glyphicon-pushpin { &:before { content: "\e146"; } } | |||||
.glyphicon-usd { &:before { content: "\e148"; } } | |||||
.glyphicon-gbp { &:before { content: "\e149"; } } | |||||
.glyphicon-sort { &:before { content: "\e150"; } } | |||||
.glyphicon-sort-by-alphabet { &:before { content: "\e151"; } } | |||||
.glyphicon-sort-by-alphabet-alt { &:before { content: "\e152"; } } | |||||
.glyphicon-sort-by-order { &:before { content: "\e153"; } } | |||||
.glyphicon-sort-by-order-alt { &:before { content: "\e154"; } } | |||||
.glyphicon-sort-by-attributes { &:before { content: "\e155"; } } | |||||
.glyphicon-sort-by-attributes-alt { &:before { content: "\e156"; } } | |||||
.glyphicon-unchecked { &:before { content: "\e157"; } } | |||||
.glyphicon-expand { &:before { content: "\e158"; } } | |||||
.glyphicon-collapse-down { &:before { content: "\e159"; } } | |||||
.glyphicon-collapse-up { &:before { content: "\e160"; } } | |||||
.glyphicon-log-in { &:before { content: "\e161"; } } | |||||
.glyphicon-flash { &:before { content: "\e162"; } } | |||||
.glyphicon-log-out { &:before { content: "\e163"; } } | |||||
.glyphicon-new-window { &:before { content: "\e164"; } } | |||||
.glyphicon-record { &:before { content: "\e165"; } } | |||||
.glyphicon-save { &:before { content: "\e166"; } } | |||||
.glyphicon-open { &:before { content: "\e167"; } } | |||||
.glyphicon-saved { &:before { content: "\e168"; } } | |||||
.glyphicon-import { &:before { content: "\e169"; } } | |||||
.glyphicon-export { &:before { content: "\e170"; } } | |||||
.glyphicon-send { &:before { content: "\e171"; } } | |||||
.glyphicon-floppy-disk { &:before { content: "\e172"; } } | |||||
.glyphicon-floppy-saved { &:before { content: "\e173"; } } | |||||
.glyphicon-floppy-remove { &:before { content: "\e174"; } } | |||||
.glyphicon-floppy-save { &:before { content: "\e175"; } } | |||||
.glyphicon-floppy-open { &:before { content: "\e176"; } } | |||||
.glyphicon-credit-card { &:before { content: "\e177"; } } | |||||
.glyphicon-transfer { &:before { content: "\e178"; } } | |||||
.glyphicon-cutlery { &:before { content: "\e179"; } } | |||||
.glyphicon-header { &:before { content: "\e180"; } } | |||||
.glyphicon-compressed { &:before { content: "\e181"; } } | |||||
.glyphicon-earphone { &:before { content: "\e182"; } } | |||||
.glyphicon-phone-alt { &:before { content: "\e183"; } } | |||||
.glyphicon-tower { &:before { content: "\e184"; } } | |||||
.glyphicon-stats { &:before { content: "\e185"; } } | |||||
.glyphicon-sd-video { &:before { content: "\e186"; } } | |||||
.glyphicon-hd-video { &:before { content: "\e187"; } } | |||||
.glyphicon-subtitles { &:before { content: "\e188"; } } | |||||
.glyphicon-sound-stereo { &:before { content: "\e189"; } } | |||||
.glyphicon-sound-dolby { &:before { content: "\e190"; } } | |||||
.glyphicon-sound-5-1 { &:before { content: "\e191"; } } | |||||
.glyphicon-sound-6-1 { &:before { content: "\e192"; } } | |||||
.glyphicon-sound-7-1 { &:before { content: "\e193"; } } | |||||
.glyphicon-copyright-mark { &:before { content: "\e194"; } } | |||||
.glyphicon-registration-mark { &:before { content: "\e195"; } } | |||||
.glyphicon-cloud-download { &:before { content: "\e197"; } } | |||||
.glyphicon-cloud-upload { &:before { content: "\e198"; } } | |||||
.glyphicon-tree-conifer { &:before { content: "\e199"; } } | |||||
.glyphicon-tree-deciduous { &:before { content: "\e200"; } } | |||||
.glyphicon-cd { &:before { content: "\e201"; } } | |||||
.glyphicon-save-file { &:before { content: "\e202"; } } | |||||
.glyphicon-open-file { &:before { content: "\e203"; } } | |||||
.glyphicon-level-up { &:before { content: "\e204"; } } | |||||
.glyphicon-copy { &:before { content: "\e205"; } } | |||||
.glyphicon-paste { &:before { content: "\e206"; } } | |||||
// The following 2 Glyphicons are omitted for the time being because | |||||
// they currently use Unicode codepoints that are outside the | |||||
// Basic Multilingual Plane (BMP). Older buggy versions of WebKit can't handle | |||||
// non-BMP codepoints in CSS string escapes, and thus can't display these two icons. | |||||
// Notably, the bug affects some older versions of the Android Browser. | |||||
// More info: https://github.com/twbs/bootstrap/issues/10106 | |||||
// .glyphicon-door { &:before { content: "\1f6aa"; } } | |||||
// .glyphicon-key { &:before { content: "\1f511"; } } | |||||
.glyphicon-alert { &:before { content: "\e209"; } } | |||||
.glyphicon-equalizer { &:before { content: "\e210"; } } | |||||
.glyphicon-king { &:before { content: "\e211"; } } | |||||
.glyphicon-queen { &:before { content: "\e212"; } } | |||||
.glyphicon-pawn { &:before { content: "\e213"; } } | |||||
.glyphicon-bishop { &:before { content: "\e214"; } } | |||||
.glyphicon-knight { &:before { content: "\e215"; } } | |||||
.glyphicon-baby-formula { &:before { content: "\e216"; } } | |||||
.glyphicon-tent { &:before { content: "\26fa"; } } | |||||
.glyphicon-blackboard { &:before { content: "\e218"; } } | |||||
.glyphicon-bed { &:before { content: "\e219"; } } | |||||
.glyphicon-apple { &:before { content: "\f8ff"; } } | |||||
.glyphicon-erase { &:before { content: "\e221"; } } | |||||
.glyphicon-hourglass { &:before { content: "\231b"; } } | |||||
.glyphicon-lamp { &:before { content: "\e223"; } } | |||||
.glyphicon-duplicate { &:before { content: "\e224"; } } | |||||
.glyphicon-piggy-bank { &:before { content: "\e225"; } } | |||||
.glyphicon-scissors { &:before { content: "\e226"; } } | |||||
.glyphicon-bitcoin { &:before { content: "\e227"; } } | |||||
.glyphicon-btc { &:before { content: "\e227"; } } | |||||
.glyphicon-xbt { &:before { content: "\e227"; } } | |||||
.glyphicon-yen { &:before { content: "\00a5"; } } | |||||
.glyphicon-jpy { &:before { content: "\00a5"; } } | |||||
.glyphicon-ruble { &:before { content: "\20bd"; } } | |||||
.glyphicon-rub { &:before { content: "\20bd"; } } | |||||
.glyphicon-scale { &:before { content: "\e230"; } } | |||||
.glyphicon-ice-lolly { &:before { content: "\e231"; } } | |||||
.glyphicon-ice-lolly-tasted { &:before { content: "\e232"; } } | |||||
.glyphicon-education { &:before { content: "\e233"; } } | |||||
.glyphicon-option-horizontal { &:before { content: "\e234"; } } | |||||
.glyphicon-option-vertical { &:before { content: "\e235"; } } | |||||
.glyphicon-menu-hamburger { &:before { content: "\e236"; } } | |||||
.glyphicon-modal-window { &:before { content: "\e237"; } } | |||||
.glyphicon-oil { &:before { content: "\e238"; } } | |||||
.glyphicon-grain { &:before { content: "\e239"; } } | |||||
.glyphicon-sunglasses { &:before { content: "\e240"; } } | |||||
.glyphicon-text-size { &:before { content: "\e241"; } } | |||||
.glyphicon-text-color { &:before { content: "\e242"; } } | |||||
.glyphicon-text-background { &:before { content: "\e243"; } } | |||||
.glyphicon-object-align-top { &:before { content: "\e244"; } } | |||||
.glyphicon-object-align-bottom { &:before { content: "\e245"; } } | |||||
.glyphicon-object-align-horizontal{ &:before { content: "\e246"; } } | |||||
.glyphicon-object-align-left { &:before { content: "\e247"; } } | |||||
.glyphicon-object-align-vertical { &:before { content: "\e248"; } } | |||||
.glyphicon-object-align-right { &:before { content: "\e249"; } } | |||||
.glyphicon-triangle-right { &:before { content: "\e250"; } } | |||||
.glyphicon-triangle-left { &:before { content: "\e251"; } } | |||||
.glyphicon-triangle-bottom { &:before { content: "\e252"; } } | |||||
.glyphicon-triangle-top { &:before { content: "\e253"; } } | |||||
.glyphicon-console { &:before { content: "\e254"; } } | |||||
.glyphicon-superscript { &:before { content: "\e255"; } } | |||||
.glyphicon-subscript { &:before { content: "\e256"; } } | |||||
.glyphicon-menu-left { &:before { content: "\e257"; } } | |||||
.glyphicon-menu-right { &:before { content: "\e258"; } } | |||||
.glyphicon-menu-down { &:before { content: "\e259"; } } | |||||
.glyphicon-menu-up { &:before { content: "\e260"; } } |
@ -0,0 +1,84 @@ | |||||
// | |||||
// Grid system | |||||
// -------------------------------------------------- | |||||
// Container widths | |||||
// | |||||
// Set the container width, and override it for fixed navbars in media queries. | |||||
.container { | |||||
.container-fixed(); | |||||
@media (min-width: @screen-sm-min) { | |||||
width: @container-sm; | |||||
} | |||||
@media (min-width: @screen-md-min) { | |||||
width: @container-md; | |||||
} | |||||
@media (min-width: @screen-lg-min) { | |||||
width: @container-lg; | |||||
} | |||||
} | |||||
// Fluid container | |||||
// | |||||
// Utilizes the mixin meant for fixed width containers, but without any defined | |||||
// width for fluid, full width layouts. | |||||
.container-fluid { | |||||
.container-fixed(); | |||||
} | |||||
// Row | |||||
// | |||||
// Rows contain and clear the floats of your columns. | |||||
.row { | |||||
.make-row(); | |||||
} | |||||
// Columns | |||||
// | |||||
// Common styles for small and large grid columns | |||||
.make-grid-columns(); | |||||
// Extra small grid | |||||
// | |||||
// Columns, offsets, pushes, and pulls for extra small devices like | |||||
// smartphones. | |||||
.make-grid(xs); | |||||
// Small grid | |||||
// | |||||
// Columns, offsets, pushes, and pulls for the small device range, from phones | |||||
// to tablets. | |||||
@media (min-width: @screen-sm-min) { | |||||
.make-grid(sm); | |||||
} | |||||
// Medium grid | |||||
// | |||||
// Columns, offsets, pushes, and pulls for the desktop device range. | |||||
@media (min-width: @screen-md-min) { | |||||
.make-grid(md); | |||||
} | |||||
// Large grid | |||||
// | |||||
// Columns, offsets, pushes, and pulls for the large desktop device range. | |||||
@media (min-width: @screen-lg-min) { | |||||
.make-grid(lg); | |||||
} |
@ -0,0 +1,167 @@ | |||||
// | |||||
// Input groups | |||||
// -------------------------------------------------- | |||||
// Base styles | |||||
// ------------------------- | |||||
.input-group { | |||||
position: relative; // For dropdowns | |||||
display: table; | |||||
border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table | |||||
// Undo padding and float of grid classes | |||||
&[class*="col-"] { | |||||
float: none; | |||||
padding-left: 0; | |||||
padding-right: 0; | |||||
} | |||||
.form-control { | |||||
// Ensure that the input is always above the *appended* addon button for | |||||
// proper border colors. | |||||
position: relative; | |||||
z-index: 2; | |||||
// IE9 fubars the placeholder attribute in text inputs and the arrows on | |||||
// select elements in input groups. To fix it, we float the input. Details: | |||||
// https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855 | |||||
float: left; | |||||
width: 100%; | |||||
margin-bottom: 0; | |||||
} | |||||
} | |||||
// Sizing options | |||||
// | |||||
// Remix the default form control sizing classes into new ones for easier | |||||
// manipulation. | |||||
.input-group-lg > .form-control, | |||||
.input-group-lg > .input-group-addon, | |||||
.input-group-lg > .input-group-btn > .btn { | |||||
.input-lg(); | |||||
} | |||||
.input-group-sm > .form-control, | |||||
.input-group-sm > .input-group-addon, | |||||
.input-group-sm > .input-group-btn > .btn { | |||||
.input-sm(); | |||||
} | |||||
// Display as table-cell | |||||
// ------------------------- | |||||
.input-group-addon, | |||||
.input-group-btn, | |||||
.input-group .form-control { | |||||
display: table-cell; | |||||
&:not(:first-child):not(:last-child) { | |||||
border-radius: 0; | |||||
} | |||||
} | |||||
// Addon and addon wrapper for buttons | |||||
.input-group-addon, | |||||
.input-group-btn { | |||||
width: 1%; | |||||
white-space: nowrap; | |||||
vertical-align: middle; // Match the inputs | |||||
} | |||||
// Text input groups | |||||
// ------------------------- | |||||
.input-group-addon { | |||||
padding: @padding-base-vertical @padding-base-horizontal; | |||||
font-size: @font-size-base; | |||||
font-weight: normal; | |||||
line-height: 1; | |||||
color: @input-color; | |||||
text-align: center; | |||||
background-color: @input-group-addon-bg; | |||||
border: 1px solid @input-group-addon-border-color; | |||||
border-radius: @border-radius-base; | |||||
// Sizing | |||||
&.input-sm { | |||||
padding: @padding-small-vertical @padding-small-horizontal; | |||||
font-size: @font-size-small; | |||||
border-radius: @border-radius-small; | |||||
} | |||||
&.input-lg { | |||||
padding: @padding-large-vertical @padding-large-horizontal; | |||||
font-size: @font-size-large; | |||||
border-radius: @border-radius-large; | |||||
} | |||||
// Nuke default margins from checkboxes and radios to vertically center within. | |||||
input[type="radio"], | |||||
input[type="checkbox"] { | |||||
margin-top: 0; | |||||
} | |||||
} | |||||
// Reset rounded corners | |||||
.input-group .form-control:first-child, | |||||
.input-group-addon:first-child, | |||||
.input-group-btn:first-child > .btn, | |||||
.input-group-btn:first-child > .btn-group > .btn, | |||||
.input-group-btn:first-child > .dropdown-toggle, | |||||
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle), | |||||
.input-group-btn:last-child > .btn-group:not(:last-child) > .btn { | |||||
.border-right-radius(0); | |||||
} | |||||
.input-group-addon:first-child { | |||||
border-right: 0; | |||||
} | |||||
.input-group .form-control:last-child, | |||||
.input-group-addon:last-child, | |||||
.input-group-btn:last-child > .btn, | |||||
.input-group-btn:last-child > .btn-group > .btn, | |||||
.input-group-btn:last-child > .dropdown-toggle, | |||||
.input-group-btn:first-child > .btn:not(:first-child), | |||||
.input-group-btn:first-child > .btn-group:not(:first-child) > .btn { | |||||
.border-left-radius(0); | |||||
} | |||||
.input-group-addon:last-child { | |||||
border-left: 0; | |||||
} | |||||
// Button input groups | |||||
// ------------------------- | |||||
.input-group-btn { | |||||
position: relative; | |||||
// Jankily prevent input button groups from wrapping with `white-space` and | |||||
// `font-size` in combination with `inline-block` on buttons. | |||||
font-size: 0; | |||||
white-space: nowrap; | |||||
// Negative margin for spacing, position for bringing hovered/focused/actived | |||||
// element above the siblings. | |||||
> .btn { | |||||
position: relative; | |||||
+ .btn { | |||||
margin-left: -1px; | |||||
} | |||||
// Bring the "active" button to the front | |||||
&:hover, | |||||
&:focus, | |||||
&:active { | |||||
z-index: 2; | |||||
} | |||||
} | |||||
// Negative margin to only have a 1px border between the two | |||||
&:first-child { | |||||
> .btn, | |||||
> .btn-group { | |||||
margin-right: -1px; | |||||
} | |||||
} | |||||
&:last-child { | |||||
> .btn, | |||||
> .btn-group { | |||||
z-index: 2; | |||||
margin-left: -1px; | |||||
} | |||||
} | |||||
} |
@ -0,0 +1,52 @@ | |||||
// | |||||
// Jumbotron | |||||
// -------------------------------------------------- | |||||
.jumbotron { | |||||
padding-top: @jumbotron-padding; | |||||
padding-bottom: @jumbotron-padding; | |||||
margin-bottom: @jumbotron-padding; | |||||
color: @jumbotron-color; | |||||
background-color: @jumbotron-bg; | |||||
h1, | |||||
.h1 { | |||||
color: @jumbotron-heading-color; | |||||
} | |||||
p { | |||||
margin-bottom: (@jumbotron-padding / 2); | |||||
font-size: @jumbotron-font-size; | |||||
font-weight: 200; | |||||
} | |||||
> hr { | |||||
border-top-color: darken(@jumbotron-bg, 10%); | |||||
} | |||||
.container &, | |||||
.container-fluid & { | |||||
border-radius: @border-radius-large; // Only round corners at higher resolutions if contained in a container | |||||
} | |||||
.container { | |||||
max-width: 100%; | |||||
} | |||||
@media screen and (min-width: @screen-sm-min) { | |||||
padding-top: (@jumbotron-padding * 1.6); | |||||
padding-bottom: (@jumbotron-padding * 1.6); | |||||
.container &, | |||||
.container-fluid & { | |||||
padding-left: (@jumbotron-padding * 2); | |||||
padding-right: (@jumbotron-padding * 2); | |||||
} | |||||
h1, | |||||
.h1 { | |||||
font-size: @jumbotron-heading-font-size; | |||||
} | |||||
} | |||||
} |
@ -0,0 +1,64 @@ | |||||
// | |||||
// Labels | |||||
// -------------------------------------------------- | |||||
.label { | |||||
display: inline; | |||||
padding: .2em .6em .3em; | |||||
font-size: 75%; | |||||
font-weight: bold; | |||||
line-height: 1; | |||||
color: @label-color; | |||||
text-align: center; | |||||
white-space: nowrap; | |||||
vertical-align: baseline; | |||||
border-radius: .25em; | |||||
// Add hover effects, but only for links | |||||
a& { | |||||
&:hover, | |||||
&:focus { | |||||
color: @label-link-hover-color; | |||||
text-decoration: none; | |||||
cursor: pointer; | |||||
} | |||||
} | |||||
// Empty labels collapse automatically (not available in IE8) | |||||
&:empty { | |||||
display: none; | |||||
} | |||||
// Quick fix for labels in buttons | |||||
.btn & { | |||||
position: relative; | |||||
top: -1px; | |||||
} | |||||
} | |||||
// Colors | |||||
// Contextual variations (linked labels get darker on :hover) | |||||
.label-default { | |||||
.label-variant(@label-default-bg); | |||||
} | |||||
.label-primary { | |||||
.label-variant(@label-primary-bg); | |||||
} | |||||
.label-success { | |||||
.label-variant(@label-success-bg); | |||||
} | |||||
.label-info { | |||||
.label-variant(@label-info-bg); | |||||
} | |||||
.label-warning { | |||||
.label-variant(@label-warning-bg); | |||||
} | |||||
.label-danger { | |||||
.label-variant(@label-danger-bg); | |||||
} |
@ -0,0 +1,130 @@ | |||||
// | |||||
// List groups | |||||
// -------------------------------------------------- | |||||
// Base class | |||||
// | |||||
// Easily usable on <ul>, <ol>, or <div>. | |||||
.list-group { | |||||
// No need to set list-style: none; since .list-group-item is block level | |||||
margin-bottom: 20px; | |||||
padding-left: 0; // reset padding because ul and ol | |||||
} | |||||
// Individual list items | |||||
// | |||||
// Use on `li`s or `div`s within the `.list-group` parent. | |||||
.list-group-item { | |||||
position: relative; | |||||
display: block; | |||||
padding: 10px 15px; | |||||
// Place the border on the list items and negative margin up for better styling | |||||
margin-bottom: -1px; | |||||
background-color: @list-group-bg; | |||||
border: 1px solid @list-group-border; | |||||
// Round the first and last items | |||||
&:first-child { | |||||
.border-top-radius(@list-group-border-radius); | |||||
} | |||||
&:last-child { | |||||
margin-bottom: 0; | |||||
.border-bottom-radius(@list-group-border-radius); | |||||
} | |||||
} | |||||
// Interactive list items | |||||
// | |||||
// Use anchor or button elements instead of `li`s or `div`s to create interactive items. | |||||
// Includes an extra `.active` modifier class for showing selected items. | |||||
a.list-group-item, | |||||
button.list-group-item { | |||||
color: @list-group-link-color; | |||||
.list-group-item-heading { | |||||
color: @list-group-link-heading-color; | |||||
} | |||||
// Hover state | |||||
&:hover, | |||||
&:focus { | |||||
text-decoration: none; | |||||
color: @list-group-link-hover-color; | |||||
background-color: @list-group-hover-bg; | |||||
} | |||||
} | |||||
button.list-group-item { | |||||
width: 100%; | |||||
text-align: left; | |||||
} | |||||
.list-group-item { | |||||
// Disabled state | |||||
&.disabled, | |||||
&.disabled:hover, | |||||
&.disabled:focus { | |||||
background-color: @list-group-disabled-bg; | |||||
color: @list-group-disabled-color; | |||||
cursor: @cursor-disabled; | |||||
// Force color to inherit for custom content | |||||
.list-group-item-heading { | |||||
color: inherit; | |||||
} | |||||
.list-group-item-text { | |||||
color: @list-group-disabled-text-color; | |||||
} | |||||
} | |||||
// Active class on item itself, not parent | |||||
&.active, | |||||
&.active:hover, | |||||
&.active:focus { | |||||
z-index: 2; // Place active items above their siblings for proper border styling | |||||
color: @list-group-active-color; | |||||
background-color: @list-group-active-bg; | |||||
border-color: @list-group-active-border; | |||||
// Force color to inherit for custom content | |||||
.list-group-item-heading, | |||||
.list-group-item-heading > small, | |||||
.list-group-item-heading > .small { | |||||
color: inherit; | |||||
} | |||||
.list-group-item-text { | |||||
color: @list-group-active-text-color; | |||||
} | |||||
} | |||||
} | |||||
// Contextual variants | |||||
// | |||||
// Add modifier classes to change text and background color on individual items. | |||||
// Organizationally, this must come after the `:hover` states. | |||||
.list-group-item-variant(success; @state-success-bg; @state-success-text); | |||||
.list-group-item-variant(info; @state-info-bg; @state-info-text); | |||||
.list-group-item-variant(warning; @state-warning-bg; @state-warning-text); | |||||
.list-group-item-variant(danger; @state-danger-bg; @state-danger-text); | |||||
// Custom content options | |||||
// | |||||
// Extra classes for creating well-formatted content within `.list-group-item`s. | |||||
.list-group-item-heading { | |||||
margin-top: 0; | |||||
margin-bottom: 5px; | |||||
} | |||||
.list-group-item-text { | |||||
margin-bottom: 0; | |||||
line-height: 1.3; | |||||
} |
@ -0,0 +1,66 @@ | |||||
.media { | |||||
// Proper spacing between instances of .media | |||||
margin-top: 15px; | |||||
&:first-child { | |||||
margin-top: 0; | |||||
} | |||||
} | |||||
.media, | |||||
.media-body { | |||||
zoom: 1; | |||||
overflow: hidden; | |||||
} | |||||
.media-body { | |||||
width: 10000px; | |||||
} | |||||
.media-object { | |||||
display: block; | |||||
// Fix collapse in webkit from max-width: 100% and display: table-cell. | |||||
&.img-thumbnail { | |||||
max-width: none; | |||||
} | |||||
} | |||||
.media-right, | |||||
.media > .pull-right { | |||||
padding-left: 10px; | |||||
} | |||||
.media-left, | |||||
.media > .pull-left { | |||||
padding-right: 10px; | |||||
} | |||||
.media-left, | |||||
.media-right, | |||||
.media-body { | |||||
display: table-cell; | |||||
vertical-align: top; | |||||
} | |||||
.media-middle { | |||||
vertical-align: middle; | |||||
} | |||||
.media-bottom { | |||||
vertical-align: bottom; | |||||
} | |||||
// Reset margins on headings for tighter default spacing | |||||
.media-heading { | |||||
margin-top: 0; | |||||
margin-bottom: 5px; | |||||
} | |||||
// Media list variation | |||||
// | |||||
// Undo default ul/ol styles | |||||
.media-list { | |||||
padding-left: 0; | |||||
list-style: none; | |||||
} |
@ -0,0 +1,40 @@ | |||||
// Mixins | |||||
// -------------------------------------------------- | |||||
// Utilities | |||||
@import "mixins/hide-text.less"; | |||||
@import "mixins/opacity.less"; | |||||
@import "mixins/image.less"; | |||||
@import "mixins/labels.less"; | |||||
@import "mixins/reset-filter.less"; | |||||
@import "mixins/resize.less"; | |||||
@import "mixins/responsive-visibility.less"; | |||||
@import "mixins/size.less"; | |||||
@import "mixins/tab-focus.less"; | |||||
@import "mixins/reset-text.less"; | |||||
@import "mixins/text-emphasis.less"; | |||||
@import "mixins/text-overflow.less"; | |||||
@import "mixins/vendor-prefixes.less"; | |||||
// Components | |||||
@import "mixins/alerts.less"; | |||||
@import "mixins/buttons.less"; | |||||
@import "mixins/panels.less"; | |||||
@import "mixins/pagination.less"; | |||||
@import "mixins/list-group.less"; | |||||
@import "mixins/nav-divider.less"; | |||||
@import "mixins/forms.less"; | |||||
@import "mixins/progress-bar.less"; | |||||
@import "mixins/table-row.less"; | |||||
// Skins | |||||
@import "mixins/background-variant.less"; | |||||
@import "mixins/border-radius.less"; | |||||
@import "mixins/gradients.less"; | |||||
// Layout | |||||
@import "mixins/clearfix.less"; | |||||
@import "mixins/center-block.less"; | |||||
@import "mixins/nav-vertical-align.less"; | |||||
@import "mixins/grid-framework.less"; | |||||
@import "mixins/grid.less"; |
@ -0,0 +1,14 @@ | |||||
// Alerts | |||||
.alert-variant(@background; @border; @text-color) { | |||||
background-color: @background; | |||||
border-color: @border; | |||||
color: @text-color; | |||||
hr { | |||||
border-top-color: darken(@border, 5%); | |||||
} | |||||
.alert-link { | |||||
color: darken(@text-color, 10%); | |||||
} | |||||
} |
@ -0,0 +1,9 @@ | |||||
// Contextual backgrounds | |||||
.bg-variant(@color) { | |||||
background-color: @color; | |||||
a&:hover, | |||||
a&:focus { | |||||
background-color: darken(@color, 10%); | |||||
} | |||||
} |
@ -0,0 +1,18 @@ | |||||
// Single side border-radius | |||||
.border-top-radius(@radius) { | |||||
border-top-right-radius: @radius; | |||||
border-top-left-radius: @radius; | |||||
} | |||||
.border-right-radius(@radius) { | |||||
border-bottom-right-radius: @radius; | |||||
border-top-right-radius: @radius; | |||||
} | |||||
.border-bottom-radius(@radius) { | |||||
border-bottom-right-radius: @radius; | |||||
border-bottom-left-radius: @radius; | |||||
} | |||||
.border-left-radius(@radius) { | |||||
border-bottom-left-radius: @radius; | |||||
border-top-left-radius: @radius; | |||||
} |
@ -0,0 +1,68 @@ | |||||
// Button variants | |||||
// | |||||
// Easily pump out default styles, as well as :hover, :focus, :active, | |||||
// and disabled options for all buttons | |||||
.button-variant(@color; @background; @border) { | |||||
color: @color; | |||||
background-color: @background; | |||||
border-color: @border; | |||||
&:focus, | |||||
&.focus { | |||||
color: @color; | |||||
background-color: darken(@background, 10%); | |||||
border-color: darken(@border, 25%); | |||||
} | |||||
&:hover { | |||||
color: @color; | |||||
background-color: darken(@background, 10%); | |||||
border-color: darken(@border, 12%); | |||||
} | |||||
&:active, | |||||
&.active, | |||||
.open > .dropdown-toggle& { | |||||
color: @color; | |||||
background-color: darken(@background, 10%); | |||||
border-color: darken(@border, 12%); | |||||
&:hover, | |||||
&:focus, | |||||
&.focus { | |||||
color: @color; | |||||
background-color: darken(@background, 17%); | |||||
border-color: darken(@border, 25%); | |||||
} | |||||
} | |||||
&:active, | |||||
&.active, | |||||
.open > .dropdown-toggle& { | |||||
background-image: none; | |||||
} | |||||
&.disabled, | |||||
&[disabled], | |||||
fieldset[disabled] & { | |||||
&, | |||||
&:hover, | |||||
&:focus, | |||||
&.focus, | |||||
&:active, | |||||
&.active { | |||||
background-color: @background; | |||||
border-color: @border; | |||||
} | |||||
} | |||||
.badge { | |||||
color: @background; | |||||
background-color: @color; | |||||
} | |||||
} | |||||
// Button sizes | |||||
.button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) { | |||||
padding: @padding-vertical @padding-horizontal; | |||||
font-size: @font-size; | |||||
line-height: @line-height; | |||||
border-radius: @border-radius; | |||||
} |
@ -0,0 +1,7 @@ | |||||
// Center-align a block level element | |||||
.center-block() { | |||||
display: block; | |||||
margin-left: auto; | |||||
margin-right: auto; | |||||
} |
@ -0,0 +1,22 @@ | |||||
// Clearfix | |||||
// | |||||
// For modern browsers | |||||
// 1. The space content is one way to avoid an Opera bug when the | |||||
// contenteditable attribute is included anywhere else in the document. | |||||
// Otherwise it causes space to appear at the top and bottom of elements | |||||
// that are clearfixed. | |||||
// 2. The use of `table` rather than `block` is only necessary if using | |||||
// `:before` to contain the top-margins of child elements. | |||||
// | |||||
// Source: http://nicolasgallagher.com/micro-clearfix-hack/ | |||||
.clearfix() { | |||||
&:before, | |||||
&:after { | |||||
content: " "; // 1 | |||||
display: table; // 2 | |||||
} | |||||
&:after { | |||||
clear: both; | |||||
} | |||||
} |
@ -0,0 +1,85 @@ | |||||
// Form validation states | |||||
// | |||||
// Used in forms.less to generate the form validation CSS for warnings, errors, | |||||
// and successes. | |||||
.form-control-validation(@text-color: #555; @border-color: #ccc; @background-color: #f5f5f5) { | |||||
// Color the label and help text | |||||
.help-block, | |||||
.control-label, | |||||
.radio, | |||||
.checkbox, | |||||
.radio-inline, | |||||
.checkbox-inline, | |||||
&.radio label, | |||||
&.checkbox label, | |||||
&.radio-inline label, | |||||
&.checkbox-inline label { | |||||
color: @text-color; | |||||
} | |||||
// Set the border and box shadow on specific inputs to match | |||||
.form-control { | |||||
border-color: @border-color; | |||||
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work | |||||
&:focus { | |||||
border-color: darken(@border-color, 10%); | |||||
@shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@border-color, 20%); | |||||
.box-shadow(@shadow); | |||||
} | |||||
} | |||||
// Set validation states also for addons | |||||
.input-group-addon { | |||||
color: @text-color; | |||||
border-color: @border-color; | |||||
background-color: @background-color; | |||||
} | |||||
// Optional feedback icon | |||||
.form-control-feedback { | |||||
color: @text-color; | |||||
} | |||||
} | |||||
// Form control focus state | |||||
// | |||||
// Generate a customized focus state and for any input with the specified color, | |||||
// which defaults to the `@input-border-focus` variable. | |||||
// | |||||
// We highly encourage you to not customize the default value, but instead use | |||||
// this to tweak colors on an as-needed basis. This aesthetic change is based on | |||||
// WebKit's default styles, but applicable to a wider range of browsers. Its | |||||
// usability and accessibility should be taken into account with any change. | |||||
// | |||||
// Example usage: change the default blue border and shadow to white for better | |||||
// contrast against a dark gray background. | |||||
.form-control-focus(@color: @input-border-focus) { | |||||
@color-rgba: rgba(red(@color), green(@color), blue(@color), .6); | |||||
&:focus { | |||||
border-color: @color; | |||||
outline: 0; | |||||
.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}"); | |||||
} | |||||
} | |||||
// Form control sizing | |||||
// | |||||
// Relative text size, padding, and border-radii changes for form controls. For | |||||
// horizontal sizing, wrap controls in the predefined grid classes. `<select>` | |||||
// element gets special love because it's special, and that's a fact! | |||||
.input-size(@input-height; @padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) { | |||||
height: @input-height; | |||||
padding: @padding-vertical @padding-horizontal; | |||||
font-size: @font-size; | |||||
line-height: @line-height; | |||||
border-radius: @border-radius; | |||||
select& { | |||||
height: @input-height; | |||||
line-height: @input-height; | |||||
} | |||||
textarea&, | |||||
select[multiple]& { | |||||
height: auto; | |||||
} | |||||
} |
@ -0,0 +1,59 @@ | |||||
// Gradients | |||||
#gradient { | |||||
// Horizontal gradient, from left to right | |||||
// | |||||
// Creates two color stops, start and end, by specifying a color and position for each color stop. | |||||
// Color stops are not available in IE9 and below. | |||||
.horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) { | |||||
background-image: -webkit-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // Safari 5.1-6, Chrome 10+ | |||||
background-image: -o-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // Opera 12 | |||||
background-image: linear-gradient(to right, @start-color @start-percent, @end-color @end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+ | |||||
background-repeat: repeat-x; | |||||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down | |||||
} | |||||
// Vertical gradient, from top to bottom | |||||
// | |||||
// Creates two color stops, start and end, by specifying a color and position for each color stop. | |||||
// Color stops are not available in IE9 and below. | |||||
.vertical(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) { | |||||
background-image: -webkit-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // Safari 5.1-6, Chrome 10+ | |||||
background-image: -o-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // Opera 12 | |||||
background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+ | |||||
background-repeat: repeat-x; | |||||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down | |||||
} | |||||
.directional(@start-color: #555; @end-color: #333; @deg: 45deg) { | |||||
background-repeat: repeat-x; | |||||
background-image: -webkit-linear-gradient(@deg, @start-color, @end-color); // Safari 5.1-6, Chrome 10+ | |||||
background-image: -o-linear-gradient(@deg, @start-color, @end-color); // Opera 12 | |||||
background-image: linear-gradient(@deg, @start-color, @end-color); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+ | |||||
} | |||||
.horizontal-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) { | |||||
background-image: -webkit-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color); | |||||
background-image: -o-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color); | |||||
background-image: linear-gradient(to right, @start-color, @mid-color @color-stop, @end-color); | |||||
background-repeat: no-repeat; | |||||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback | |||||
} | |||||
.vertical-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) { | |||||
background-image: -webkit-linear-gradient(@start-color, @mid-color @color-stop, @end-color); | |||||
background-image: -o-linear-gradient(@start-color, @mid-color @color-stop, @end-color); | |||||
background-image: linear-gradient(@start-color, @mid-color @color-stop, @end-color); | |||||
background-repeat: no-repeat; | |||||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback | |||||
} | |||||
.radial(@inner-color: #555; @outer-color: #333) { | |||||
background-image: -webkit-radial-gradient(circle, @inner-color, @outer-color); | |||||
background-image: radial-gradient(circle, @inner-color, @outer-color); | |||||
background-repeat: no-repeat; | |||||
} | |||||
.striped(@color: rgba(255,255,255,.15); @angle: 45deg) { | |||||
background-image: -webkit-linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent); | |||||
background-image: -o-linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent); | |||||
background-image: linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent); | |||||
} | |||||
} |
@ -0,0 +1,91 @@ | |||||
// Framework grid generation | |||||
// | |||||
// Used only by Bootstrap to generate the correct number of grid classes given | |||||
// any value of `@grid-columns`. | |||||
.make-grid-columns() { | |||||
// Common styles for all sizes of grid columns, widths 1-12 | |||||
.col(@index) { // initial | |||||
@item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}"; | |||||
.col((@index + 1), @item); | |||||
} | |||||
.col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo | |||||
@item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}"; | |||||
.col((@index + 1), ~"@{list}, @{item}"); | |||||
} | |||||
.col(@index, @list) when (@index > @grid-columns) { // terminal | |||||
@{list} { | |||||
position: relative; | |||||
// Prevent columns from collapsing when empty | |||||
min-height: 1px; | |||||
// Inner gutter via padding | |||||
padding-left: ceil((@grid-gutter-width / 2)); | |||||
padding-right: floor((@grid-gutter-width / 2)); | |||||
} | |||||
} | |||||
.col(1); // kickstart it | |||||
} | |||||
.float-grid-columns(@class) { | |||||
.col(@index) { // initial | |||||
@item: ~".col-@{class}-@{index}"; | |||||
.col((@index + 1), @item); | |||||
} | |||||
.col(@index, @list) when (@index =< @grid-columns) { // general | |||||
@item: ~".col-@{class}-@{index}"; | |||||
.col((@index + 1), ~"@{list}, @{item}"); | |||||
} | |||||
.col(@index, @list) when (@index > @grid-columns) { // terminal | |||||
@{list} { | |||||
float: left; | |||||
} | |||||
} | |||||
.col(1); // kickstart it | |||||
} | |||||
.calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) { | |||||
.col-@{class}-@{index} { | |||||
width: percentage((@index / @grid-columns)); | |||||
} | |||||
} | |||||
.calc-grid-column(@index, @class, @type) when (@type = push) and (@index > 0) { | |||||
.col-@{class}-push-@{index} { | |||||
left: percentage((@index / @grid-columns)); | |||||
} | |||||
} | |||||
.calc-grid-column(@index, @class, @type) when (@type = push) and (@index = 0) { | |||||
.col-@{class}-push-0 { | |||||
left: auto; | |||||
} | |||||
} | |||||
.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index > 0) { | |||||
.col-@{class}-pull-@{index} { | |||||
right: percentage((@index / @grid-columns)); | |||||
} | |||||
} | |||||
.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index = 0) { | |||||
.col-@{class}-pull-0 { | |||||
right: auto; | |||||
} | |||||
} | |||||
.calc-grid-column(@index, @class, @type) when (@type = offset) { | |||||
.col-@{class}-offset-@{index} { | |||||
margin-left: percentage((@index / @grid-columns)); | |||||
} | |||||
} | |||||
// Basic looping in LESS | |||||
.loop-grid-columns(@index, @class, @type) when (@index >= 0) { | |||||
.calc-grid-column(@index, @class, @type); | |||||
// next iteration | |||||
.loop-grid-columns((@index - 1), @class, @type); | |||||
} | |||||
// Create grid for specific class | |||||
.make-grid(@class) { | |||||
.float-grid-columns(@class); | |||||
.loop-grid-columns(@grid-columns, @class, width); | |||||
.loop-grid-columns(@grid-columns, @class, pull); | |||||
.loop-grid-columns(@grid-columns, @class, push); | |||||
.loop-grid-columns(@grid-columns, @class, offset); | |||||
} |
@ -0,0 +1,122 @@ | |||||
// Grid system | |||||
// | |||||
// Generate semantic grid columns with these mixins. | |||||
// Centered container element | |||||
.container-fixed(@gutter: @grid-gutter-width) { | |||||
margin-right: auto; | |||||
margin-left: auto; | |||||
padding-left: (@gutter / 2); | |||||
padding-right: (@gutter / 2); | |||||
&:extend(.clearfix all); | |||||
} | |||||
// Creates a wrapper for a series of columns | |||||
.make-row(@gutter: @grid-gutter-width) { | |||||
margin-left: ceil((@gutter / -2)); | |||||
margin-right: floor((@gutter / -2)); | |||||
&:extend(.clearfix all); | |||||
} | |||||
// Generate the extra small columns | |||||
.make-xs-column(@columns; @gutter: @grid-gutter-width) { | |||||
position: relative; | |||||
float: left; | |||||
width: percentage((@columns / @grid-columns)); | |||||
min-height: 1px; | |||||
padding-left: (@gutter / 2); | |||||
padding-right: (@gutter / 2); | |||||
} | |||||
.make-xs-column-offset(@columns) { | |||||
margin-left: percentage((@columns / @grid-columns)); | |||||
} | |||||
.make-xs-column-push(@columns) { | |||||
left: percentage((@columns / @grid-columns)); | |||||
} | |||||
.make-xs-column-pull(@columns) { | |||||
right: percentage((@columns / @grid-columns)); | |||||
} | |||||
// Generate the small columns | |||||
.make-sm-column(@columns; @gutter: @grid-gutter-width) { | |||||
position: relative; | |||||
min-height: 1px; | |||||
padding-left: (@gutter / 2); | |||||
padding-right: (@gutter / 2); | |||||
@media (min-width: @screen-sm-min) { | |||||
float: left; | |||||
width: percentage((@columns / @grid-columns)); | |||||
} | |||||
} | |||||
.make-sm-column-offset(@columns) { | |||||
@media (min-width: @screen-sm-min) { | |||||
margin-left: percentage((@columns / @grid-columns)); | |||||
} | |||||
} | |||||
.make-sm-column-push(@columns) { | |||||
@media (min-width: @screen-sm-min) { | |||||
left: percentage((@columns / @grid-columns)); | |||||
} | |||||
} | |||||
.make-sm-column-pull(@columns) { | |||||
@media (min-width: @screen-sm-min) { | |||||
right: percentage((@columns / @grid-columns)); | |||||
} | |||||
} | |||||
// Generate the medium columns | |||||
.make-md-column(@columns; @gutter: @grid-gutter-width) { | |||||
position: relative; | |||||
min-height: 1px; | |||||
padding-left: (@gutter / 2); | |||||
padding-right: (@gutter / 2); | |||||
@media (min-width: @screen-md-min) { | |||||
float: left; | |||||
width: percentage((@columns / @grid-columns)); | |||||
} | |||||
} | |||||
.make-md-column-offset(@columns) { | |||||
@media (min-width: @screen-md-min) { | |||||
margin-left: percentage((@columns / @grid-columns)); | |||||
} | |||||
} | |||||
.make-md-column-push(@columns) { | |||||
@media (min-width: @screen-md-min) { | |||||
left: percentage((@columns / @grid-columns)); | |||||
} | |||||
} | |||||
.make-md-column-pull(@columns) { | |||||
@media (min-width: @screen-md-min) { | |||||
right: percentage((@columns / @grid-columns)); | |||||
} | |||||
} | |||||
// Generate the large columns | |||||
.make-lg-column(@columns; @gutter: @grid-gutter-width) { | |||||
position: relative; | |||||
min-height: 1px; | |||||
padding-left: (@gutter / 2); | |||||
padding-right: (@gutter / 2); | |||||
@media (min-width: @screen-lg-min) { | |||||
float: left; | |||||
width: percentage((@columns / @grid-columns)); | |||||
} | |||||
} | |||||
.make-lg-column-offset(@columns) { | |||||
@media (min-width: @screen-lg-min) { | |||||
margin-left: percentage((@columns / @grid-columns)); | |||||
} | |||||
} | |||||
.make-lg-column-push(@columns) { | |||||
@media (min-width: @screen-lg-min) { | |||||
left: percentage((@columns / @grid-columns)); | |||||
} | |||||
} | |||||
.make-lg-column-pull(@columns) { | |||||
@media (min-width: @screen-lg-min) { | |||||
right: percentage((@columns / @grid-columns)); | |||||
} | |||||
} |
@ -0,0 +1,21 @@ | |||||
// CSS image replacement | |||||
// | |||||
// Heads up! v3 launched with only `.hide-text()`, but per our pattern for | |||||
// mixins being reused as classes with the same name, this doesn't hold up. As | |||||
// of v3.0.1 we have added `.text-hide()` and deprecated `.hide-text()`. | |||||
// | |||||
// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757 | |||||
// Deprecated as of v3.0.1 (will be removed in v4) | |||||
.hide-text() { | |||||
font: ~"0/0" a; | |||||
color: transparent; | |||||
text-shadow: none; | |||||
background-color: transparent; | |||||
border: 0; | |||||
} | |||||
// New mixin to use as of v3.0.1 | |||||
.text-hide() { | |||||
.hide-text(); | |||||
} |
@ -0,0 +1,33 @@ | |||||
// Image Mixins | |||||
// - Responsive image | |||||
// - Retina image | |||||
// Responsive image | |||||
// | |||||
// Keep images from scaling beyond the width of their parents. | |||||
.img-responsive(@display: block) { | |||||
display: @display; | |||||
max-width: 100%; // Part 1: Set a maximum relative to the parent | |||||
height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching | |||||
} | |||||
// Retina image | |||||
// | |||||
// Short retina mixin for setting background-image and -size. Note that the | |||||
// spelling of `min--moz-device-pixel-ratio` is intentional. | |||||
.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) { | |||||
background-image: url("@{file-1x}"); | |||||
@media | |||||
only screen and (-webkit-min-device-pixel-ratio: 2), | |||||
only screen and ( min--moz-device-pixel-ratio: 2), | |||||
only screen and ( -o-min-device-pixel-ratio: 2/1), | |||||
only screen and ( min-device-pixel-ratio: 2), | |||||
only screen and ( min-resolution: 192dpi), | |||||
only screen and ( min-resolution: 2dppx) { | |||||
background-image: url("@{file-2x}"); | |||||
background-size: @width-1x @height-1x; | |||||
} | |||||
} |
@ -0,0 +1,12 @@ | |||||
// Labels | |||||
.label-variant(@color) { | |||||
background-color: @color; | |||||
&[href] { | |||||
&:hover, | |||||
&:focus { | |||||
background-color: darken(@color, 10%); | |||||
} | |||||
} | |||||
} |
@ -0,0 +1,30 @@ | |||||
// List Groups | |||||
.list-group-item-variant(@state; @background; @color) { | |||||
.list-group-item-@{state} { | |||||
color: @color; | |||||
background-color: @background; | |||||
a&, | |||||
button& { | |||||
color: @color; | |||||
.list-group-item-heading { | |||||
color: inherit; | |||||
} | |||||
&:hover, | |||||
&:focus { | |||||
color: @color; | |||||
background-color: darken(@background, 5%); | |||||
} | |||||
&.active, | |||||
&.active:hover, | |||||
&.active:focus { | |||||
color: #fff; | |||||
background-color: @color; | |||||
border-color: @color; | |||||
} | |||||
} | |||||
} | |||||
} |
@ -0,0 +1,10 @@ | |||||
// Horizontal dividers | |||||
// | |||||
// Dividers (basically an hr) within dropdowns and nav lists | |||||
.nav-divider(@color: #e5e5e5) { | |||||
height: 1px; | |||||
margin: ((@line-height-computed / 2) - 1) 0; | |||||
overflow: hidden; | |||||
background-color: @color; | |||||
} |
@ -0,0 +1,9 @@ | |||||
// Navbar vertical align | |||||
// | |||||
// Vertically center elements in the navbar. | |||||
// Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin. | |||||
.navbar-vertical-align(@element-height) { | |||||
margin-top: ((@navbar-height - @element-height) / 2); | |||||
margin-bottom: ((@navbar-height - @element-height) / 2); | |||||
} |
@ -0,0 +1,8 @@ | |||||
// Opacity | |||||
.opacity(@opacity) { | |||||
opacity: @opacity; | |||||
// IE8 filter | |||||
@opacity-ie: (@opacity * 100); | |||||
filter: ~"alpha(opacity=@{opacity-ie})"; | |||||
} |
@ -0,0 +1,24 @@ | |||||
// Pagination | |||||
.pagination-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) { | |||||
> li { | |||||
> a, | |||||
> span { | |||||
padding: @padding-vertical @padding-horizontal; | |||||
font-size: @font-size; | |||||
line-height: @line-height; | |||||
} | |||||
&:first-child { | |||||
> a, | |||||
> span { | |||||
.border-left-radius(@border-radius); | |||||
} | |||||
} | |||||
&:last-child { | |||||
> a, | |||||
> span { | |||||
.border-right-radius(@border-radius); | |||||
} | |||||
} | |||||
} | |||||
} |
@ -0,0 +1,24 @@ | |||||
// Panels | |||||
.panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border) { | |||||
border-color: @border; | |||||
& > .panel-heading { | |||||
color: @heading-text-color; | |||||
background-color: @heading-bg-color; | |||||
border-color: @heading-border; | |||||
+ .panel-collapse > .panel-body { | |||||
border-top-color: @border; | |||||
} | |||||
.badge { | |||||
color: @heading-bg-color; | |||||
background-color: @heading-text-color; | |||||
} | |||||
} | |||||
& > .panel-footer { | |||||
+ .panel-collapse > .panel-body { | |||||
border-bottom-color: @border; | |||||
} | |||||
} | |||||
} |
@ -0,0 +1,10 @@ | |||||
// Progress bars | |||||
.progress-bar-variant(@color) { | |||||
background-color: @color; | |||||
// Deprecated parent class requirement as of v3.2.0 | |||||
.progress-striped & { | |||||
#gradient > .striped(); | |||||
} | |||||
} |
@ -0,0 +1,8 @@ | |||||
// Reset filters for IE | |||||
// | |||||
// When you need to remove a gradient background, do not forget to use this to reset | |||||
// the IE filter for IE9 and below. | |||||
.reset-filter() { | |||||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)")); | |||||
} |
@ -0,0 +1,18 @@ | |||||
.reset-text() { | |||||
font-family: @font-family-base; | |||||
// We deliberately do NOT reset font-size. | |||||
font-style: normal; | |||||
font-weight: normal; | |||||
letter-spacing: normal; | |||||
line-break: auto; | |||||
line-height: @line-height-base; | |||||
text-align: left; // Fallback for where `start` is not supported | |||||
text-align: start; | |||||
text-decoration: none; | |||||
text-shadow: none; | |||||
text-transform: none; | |||||
white-space: normal; | |||||
word-break: normal; | |||||
word-spacing: normal; | |||||
word-wrap: normal; | |||||
} |
@ -0,0 +1,6 @@ | |||||
// Resize anything | |||||
.resizable(@direction) { | |||||
resize: @direction; // Options: horizontal, vertical, both | |||||
overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible` | |||||
} |
@ -0,0 +1,15 @@ | |||||
// Responsive utilities | |||||
// | |||||
// More easily include all the states for responsive-utilities.less. | |||||
.responsive-visibility() { | |||||
display: block !important; | |||||
table& { display: table !important; } | |||||
tr& { display: table-row !important; } | |||||
th&, | |||||
td& { display: table-cell !important; } | |||||
} | |||||
.responsive-invisibility() { | |||||
display: none !important; | |||||
} |
@ -0,0 +1,10 @@ | |||||
// Sizing shortcuts | |||||
.size(@width; @height) { | |||||
width: @width; | |||||
height: @height; | |||||
} | |||||
.square(@size) { | |||||
.size(@size; @size); | |||||
} |
@ -0,0 +1,9 @@ | |||||
// WebKit-style focus | |||||
.tab-focus() { | |||||
// Default | |||||
outline: thin dotted; | |||||
// WebKit | |||||
outline: 5px auto -webkit-focus-ring-color; | |||||
outline-offset: -2px; | |||||
} |
@ -0,0 +1,28 @@ | |||||
// Tables | |||||
.table-row-variant(@state; @background) { | |||||
// Exact selectors below required to override `.table-striped` and prevent | |||||
// inheritance to nested tables. | |||||
.table > thead > tr, | |||||
.table > tbody > tr, | |||||
.table > tfoot > tr { | |||||
> td.@{state}, | |||||
> th.@{state}, | |||||
&.@{state} > td, | |||||
&.@{state} > th { | |||||
background-color: @background; | |||||
} | |||||
} | |||||
// Hover states for `.table-hover` | |||||
// Note: this is not available for cells or rows within `thead` or `tfoot`. | |||||
.table-hover > tbody > tr { | |||||
> td.@{state}:hover, | |||||
> th.@{state}:hover, | |||||
&.@{state}:hover > td, | |||||
&:hover > .@{state}, | |||||
&.@{state}:hover > th { | |||||
background-color: darken(@background, 5%); | |||||
} | |||||
} | |||||
} |
@ -0,0 +1,9 @@ | |||||
// Typography | |||||
.text-emphasis-variant(@color) { | |||||
color: @color; | |||||
a&:hover, | |||||
a&:focus { | |||||
color: darken(@color, 10%); | |||||
} | |||||
} |
@ -0,0 +1,8 @@ | |||||
// Text overflow | |||||
// Requires inline-block or block for proper styling | |||||
.text-overflow() { | |||||
overflow: hidden; | |||||
text-overflow: ellipsis; | |||||
white-space: nowrap; | |||||
} |
@ -0,0 +1,227 @@ | |||||
// Vendor Prefixes | |||||
// | |||||
// All vendor mixins are deprecated as of v3.2.0 due to the introduction of | |||||
// Autoprefixer in our Gruntfile. They will be removed in v4. | |||||
// - Animations | |||||
// - Backface visibility | |||||
// - Box shadow | |||||
// - Box sizing | |||||
// - Content columns | |||||
// - Hyphens | |||||
// - Placeholder text | |||||
// - Transformations | |||||
// - Transitions | |||||
// - User Select | |||||
// Animations | |||||
.animation(@animation) { | |||||
-webkit-animation: @animation; | |||||
-o-animation: @animation; | |||||
animation: @animation; | |||||
} | |||||
.animation-name(@name) { | |||||
-webkit-animation-name: @name; | |||||
animation-name: @name; | |||||
} | |||||
.animation-duration(@duration) { | |||||
-webkit-animation-duration: @duration; | |||||
animation-duration: @duration; | |||||
} | |||||
.animation-timing-function(@timing-function) { | |||||
-webkit-animation-timing-function: @timing-function; | |||||
animation-timing-function: @timing-function; | |||||
} | |||||
.animation-delay(@delay) { | |||||
-webkit-animation-delay: @delay; | |||||
animation-delay: @delay; | |||||
} | |||||
.animation-iteration-count(@iteration-count) { | |||||
-webkit-animation-iteration-count: @iteration-count; | |||||
animation-iteration-count: @iteration-count; | |||||
} | |||||
.animation-direction(@direction) { | |||||
-webkit-animation-direction: @direction; | |||||
animation-direction: @direction; | |||||
} | |||||
.animation-fill-mode(@fill-mode) { | |||||
-webkit-animation-fill-mode: @fill-mode; | |||||
animation-fill-mode: @fill-mode; | |||||
} | |||||
// Backface visibility | |||||
// Prevent browsers from flickering when using CSS 3D transforms. | |||||
// Default value is `visible`, but can be changed to `hidden` | |||||
.backface-visibility(@visibility){ | |||||
-webkit-backface-visibility: @visibility; | |||||
-moz-backface-visibility: @visibility; | |||||
backface-visibility: @visibility; | |||||
} | |||||
// Drop shadows | |||||
// | |||||
// Note: Deprecated `.box-shadow()` as of v3.1.0 since all of Bootstrap's | |||||
// supported browsers that have box shadow capabilities now support it. | |||||
.box-shadow(@shadow) { | |||||
-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1 | |||||
box-shadow: @shadow; | |||||
} | |||||
// Box sizing | |||||
.box-sizing(@boxmodel) { | |||||
-webkit-box-sizing: @boxmodel; | |||||
-moz-box-sizing: @boxmodel; | |||||
box-sizing: @boxmodel; | |||||
} | |||||
// CSS3 Content Columns | |||||
.content-columns(@column-count; @column-gap: @grid-gutter-width) { | |||||
-webkit-column-count: @column-count; | |||||
-moz-column-count: @column-count; | |||||
column-count: @column-count; | |||||
-webkit-column-gap: @column-gap; | |||||
-moz-column-gap: @column-gap; | |||||
column-gap: @column-gap; | |||||
} | |||||
// Optional hyphenation | |||||
.hyphens(@mode: auto) { | |||||
word-wrap: break-word; | |||||
-webkit-hyphens: @mode; | |||||
-moz-hyphens: @mode; | |||||
-ms-hyphens: @mode; // IE10+ | |||||
-o-hyphens: @mode; | |||||
hyphens: @mode; | |||||
} | |||||
// Placeholder text | |||||
.placeholder(@color: @input-color-placeholder) { | |||||
// Firefox | |||||
&::-moz-placeholder { | |||||
color: @color; | |||||
opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526 | |||||
} | |||||
&:-ms-input-placeholder { color: @color; } // Internet Explorer 10+ | |||||
&::-webkit-input-placeholder { color: @color; } // Safari and Chrome | |||||
} | |||||
// Transformations | |||||
.scale(@ratio) { | |||||
-webkit-transform: scale(@ratio); | |||||
-ms-transform: scale(@ratio); // IE9 only | |||||
-o-transform: scale(@ratio); | |||||
transform: scale(@ratio); | |||||
} | |||||
.scale(@ratioX; @ratioY) { | |||||
-webkit-transform: scale(@ratioX, @ratioY); | |||||
-ms-transform: scale(@ratioX, @ratioY); // IE9 only | |||||
-o-transform: scale(@ratioX, @ratioY); | |||||
transform: scale(@ratioX, @ratioY); | |||||
} | |||||
.scaleX(@ratio) { | |||||
-webkit-transform: scaleX(@ratio); | |||||
-ms-transform: scaleX(@ratio); // IE9 only | |||||
-o-transform: scaleX(@ratio); | |||||
transform: scaleX(@ratio); | |||||
} | |||||
.scaleY(@ratio) { | |||||
-webkit-transform: scaleY(@ratio); | |||||
-ms-transform: scaleY(@ratio); // IE9 only | |||||
-o-transform: scaleY(@ratio); | |||||
transform: scaleY(@ratio); | |||||
} | |||||
.skew(@x; @y) { | |||||
-webkit-transform: skewX(@x) skewY(@y); | |||||
-ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+ | |||||
-o-transform: skewX(@x) skewY(@y); | |||||
transform: skewX(@x) skewY(@y); | |||||
} | |||||
.translate(@x; @y) { | |||||
-webkit-transform: translate(@x, @y); | |||||
-ms-transform: translate(@x, @y); // IE9 only | |||||
-o-transform: translate(@x, @y); | |||||
transform: translate(@x, @y); | |||||
} | |||||
.translate3d(@x; @y; @z) { | |||||
-webkit-transform: translate3d(@x, @y, @z); | |||||
transform: translate3d(@x, @y, @z); | |||||
} | |||||
.rotate(@degrees) { | |||||
-webkit-transform: rotate(@degrees); | |||||
-ms-transform: rotate(@degrees); // IE9 only | |||||
-o-transform: rotate(@degrees); | |||||
transform: rotate(@degrees); | |||||
} | |||||
.rotateX(@degrees) { | |||||
-webkit-transform: rotateX(@degrees); | |||||
-ms-transform: rotateX(@degrees); // IE9 only | |||||
-o-transform: rotateX(@degrees); | |||||
transform: rotateX(@degrees); | |||||
} | |||||
.rotateY(@degrees) { | |||||
-webkit-transform: rotateY(@degrees); | |||||
-ms-transform: rotateY(@degrees); // IE9 only | |||||
-o-transform: rotateY(@degrees); | |||||
transform: rotateY(@degrees); | |||||
} | |||||
.perspective(@perspective) { | |||||
-webkit-perspective: @perspective; | |||||
-moz-perspective: @perspective; | |||||
perspective: @perspective; | |||||
} | |||||
.perspective-origin(@perspective) { | |||||
-webkit-perspective-origin: @perspective; | |||||
-moz-perspective-origin: @perspective; | |||||
perspective-origin: @perspective; | |||||
} | |||||
.transform-origin(@origin) { | |||||
-webkit-transform-origin: @origin; | |||||
-moz-transform-origin: @origin; | |||||
-ms-transform-origin: @origin; // IE9 only | |||||
transform-origin: @origin; | |||||
} | |||||
// Transitions | |||||
.transition(@transition) { | |||||
-webkit-transition: @transition; | |||||
-o-transition: @transition; | |||||
transition: @transition; | |||||
} | |||||
.transition-property(@transition-property) { | |||||
-webkit-transition-property: @transition-property; | |||||
transition-property: @transition-property; | |||||
} | |||||
.transition-delay(@transition-delay) { | |||||
-webkit-transition-delay: @transition-delay; | |||||
transition-delay: @transition-delay; | |||||
} | |||||
.transition-duration(@transition-duration) { | |||||
-webkit-transition-duration: @transition-duration; | |||||
transition-duration: @transition-duration; | |||||
} | |||||
.transition-timing-function(@timing-function) { | |||||
-webkit-transition-timing-function: @timing-function; | |||||
transition-timing-function: @timing-function; | |||||
} | |||||
.transition-transform(@transition) { | |||||
-webkit-transition: -webkit-transform @transition; | |||||
-moz-transition: -moz-transform @transition; | |||||
-o-transition: -o-transform @transition; | |||||
transition: transform @transition; | |||||
} | |||||
// User select | |||||
// For selecting text on the page | |||||
.user-select(@select) { | |||||
-webkit-user-select: @select; | |||||
-moz-user-select: @select; | |||||
-ms-user-select: @select; // IE10+ | |||||
user-select: @select; | |||||
} |
@ -0,0 +1,150 @@ | |||||
// | |||||
// Modals | |||||
// -------------------------------------------------- | |||||
// .modal-open - body class for killing the scroll | |||||
// .modal - container to scroll within | |||||
// .modal-dialog - positioning shell for the actual modal | |||||
// .modal-content - actual modal w/ bg and corners and shit | |||||
// Kill the scroll on the body | |||||
.modal-open { | |||||
overflow: hidden; | |||||
} | |||||
// Container that the modal scrolls within | |||||
.modal { | |||||
display: none; | |||||
overflow: hidden; | |||||
position: fixed; | |||||
top: 0; | |||||
right: 0; | |||||
bottom: 0; | |||||
left: 0; | |||||
z-index: @zindex-modal; | |||||
-webkit-overflow-scrolling: touch; | |||||
// Prevent Chrome on Windows from adding a focus outline. For details, see | |||||
// https://github.com/twbs/bootstrap/pull/10951. | |||||
outline: 0; | |||||
// When fading in the modal, animate it to slide down | |||||
&.fade .modal-dialog { | |||||
.translate(0, -25%); | |||||
.transition-transform(~"0.3s ease-out"); | |||||
} | |||||
&.in .modal-dialog { .translate(0, 0) } | |||||
} | |||||
.modal-open .modal { | |||||
overflow-x: hidden; | |||||
overflow-y: auto; | |||||
} | |||||
// Shell div to position the modal with bottom padding | |||||
.modal-dialog { | |||||
position: relative; | |||||
width: auto; | |||||
margin: 10px; | |||||
} | |||||
// Actual modal | |||||
.modal-content { | |||||
position: relative; | |||||
background-color: @modal-content-bg; | |||||
border: 1px solid @modal-content-fallback-border-color; //old browsers fallback (ie8 etc) | |||||
border: 1px solid @modal-content-border-color; | |||||
border-radius: @border-radius-large; | |||||
.box-shadow(0 3px 9px rgba(0,0,0,.5)); | |||||
background-clip: padding-box; | |||||
// Remove focus outline from opened modal | |||||
outline: 0; | |||||
} | |||||
// Modal background | |||||
.modal-backdrop { | |||||
position: fixed; | |||||
top: 0; | |||||
right: 0; | |||||
bottom: 0; | |||||
left: 0; | |||||
z-index: @zindex-modal-background; | |||||
background-color: @modal-backdrop-bg; | |||||
// Fade for backdrop | |||||
&.fade { .opacity(0); } | |||||
&.in { .opacity(@modal-backdrop-opacity); } | |||||
} | |||||
// Modal header | |||||
// Top section of the modal w/ title and dismiss | |||||
.modal-header { | |||||
padding: @modal-title-padding; | |||||
border-bottom: 1px solid @modal-header-border-color; | |||||
min-height: (@modal-title-padding + @modal-title-line-height); | |||||
} | |||||
// Close icon | |||||
.modal-header .close { | |||||
margin-top: -2px; | |||||
} | |||||
// Title text within header | |||||
.modal-title { | |||||
margin: 0; | |||||
line-height: @modal-title-line-height; | |||||
} | |||||
// Modal body | |||||
// Where all modal content resides (sibling of .modal-header and .modal-footer) | |||||
.modal-body { | |||||
position: relative; | |||||
padding: @modal-inner-padding; | |||||
} | |||||
// Footer (for actions) | |||||
.modal-footer { | |||||
padding: @modal-inner-padding; | |||||
text-align: right; // right align buttons | |||||
border-top: 1px solid @modal-footer-border-color; | |||||
&:extend(.clearfix all); // clear it in case folks use .pull-* classes on buttons | |||||
// Properly space out buttons | |||||
.btn + .btn { | |||||
margin-left: 5px; | |||||
margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs | |||||
} | |||||
// but override that for button groups | |||||
.btn-group .btn + .btn { | |||||
margin-left: -1px; | |||||
} | |||||
// and override it for block buttons as well | |||||
.btn-block + .btn-block { | |||||
margin-left: 0; | |||||
} | |||||
} | |||||
// Measure scrollbar width for padding body during modal show/hide | |||||
.modal-scrollbar-measure { | |||||
position: absolute; | |||||
top: -9999px; | |||||
width: 50px; | |||||
height: 50px; | |||||
overflow: scroll; | |||||
} | |||||
// Scale up the modal | |||||
@media (min-width: @screen-sm-min) { | |||||
// Automatically set modal's width for larger viewports | |||||
.modal-dialog { | |||||
width: @modal-md; | |||||
margin: 30px auto; | |||||
} | |||||
.modal-content { | |||||
.box-shadow(0 5px 15px rgba(0,0,0,.5)); | |||||
} | |||||
// Modal sizes | |||||
.modal-sm { width: @modal-sm; } | |||||
} | |||||
@media (min-width: @screen-md-min) { | |||||
.modal-lg { width: @modal-lg; } | |||||
} |
@ -0,0 +1,660 @@ | |||||
// | |||||
// Navbars | |||||
// -------------------------------------------------- | |||||
// Wrapper and base class | |||||
// | |||||
// Provide a static navbar from which we expand to create full-width, fixed, and | |||||
// other navbar variations. | |||||
.navbar { | |||||
position: relative; | |||||
min-height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode) | |||||
margin-bottom: @navbar-margin-bottom; | |||||
border: 1px solid transparent; | |||||
// Prevent floats from breaking the navbar | |||||
&:extend(.clearfix all); | |||||
@media (min-width: @grid-float-breakpoint) { | |||||
border-radius: @navbar-border-radius; | |||||
} | |||||
} | |||||
// Navbar heading | |||||
// | |||||
// Groups `.navbar-brand` and `.navbar-toggle` into a single component for easy | |||||
// styling of responsive aspects. | |||||
.navbar-header { | |||||
&:extend(.clearfix all); | |||||
@media (min-width: @grid-float-breakpoint) { | |||||
float: left; | |||||
} | |||||
} | |||||
// Navbar collapse (body) | |||||
// | |||||
// Group your navbar content into this for easy collapsing and expanding across | |||||
// various device sizes. By default, this content is collapsed when <768px, but | |||||
// will expand past that for a horizontal display. | |||||
// | |||||
// To start (on mobile devices) the navbar links, forms, and buttons are stacked | |||||
// vertically and include a `max-height` to overflow in case you have too much | |||||
// content for the user's viewport. | |||||
.navbar-collapse { | |||||
overflow-x: visible; | |||||
padding-right: @navbar-padding-horizontal; | |||||
padding-left: @navbar-padding-horizontal; | |||||
border-top: 1px solid transparent; | |||||
box-shadow: inset 0 1px 0 rgba(255,255,255,.1); | |||||
&:extend(.clearfix all); | |||||
-webkit-overflow-scrolling: touch; | |||||
&.in { | |||||
overflow-y: auto; | |||||
} | |||||
@media (min-width: @grid-float-breakpoint) { | |||||
width: auto; | |||||
border-top: 0; | |||||
box-shadow: none; | |||||
&.collapse { | |||||
display: block !important; | |||||
height: auto !important; | |||||
padding-bottom: 0; // Override default setting | |||||
overflow: visible !important; | |||||
} | |||||
&.in { | |||||
overflow-y: visible; | |||||
} | |||||
// Undo the collapse side padding for navbars with containers to ensure | |||||
// alignment of right-aligned contents. | |||||
.navbar-fixed-top &, | |||||
.navbar-static-top &, | |||||
.navbar-fixed-bottom & { | |||||
padding-left: 0; | |||||
padding-right: 0; | |||||
} | |||||
} | |||||
} | |||||
.navbar-fixed-top, | |||||
.navbar-fixed-bottom { | |||||
.navbar-collapse { | |||||
max-height: @navbar-collapse-max-height; | |||||
@media (max-device-width: @screen-xs-min) and (orientation: landscape) { | |||||
max-height: 200px; | |||||
} | |||||
} | |||||
} | |||||
// Both navbar header and collapse | |||||
// | |||||
// When a container is present, change the behavior of the header and collapse. | |||||
.container, | |||||
.container-fluid { | |||||
> .navbar-header, | |||||
> .navbar-collapse { | |||||
margin-right: -@navbar-padding-horizontal; | |||||
margin-left: -@navbar-padding-horizontal; | |||||
@media (min-width: @grid-float-breakpoint) { | |||||
margin-right: 0; | |||||
margin-left: 0; | |||||
} | |||||
} | |||||
} | |||||
// | |||||
// Navbar alignment options | |||||
// | |||||
// Display the navbar across the entirety of the page or fixed it to the top or | |||||
// bottom of the page. | |||||
// Static top (unfixed, but 100% wide) navbar | |||||
.navbar-static-top { | |||||
z-index: @zindex-navbar; | |||||
border-width: 0 0 1px; | |||||
@media (min-width: @grid-float-breakpoint) { | |||||
border-radius: 0; | |||||
} | |||||
} | |||||
// Fix the top/bottom navbars when screen real estate supports it | |||||
.navbar-fixed-top, | |||||
.navbar-fixed-bottom { | |||||
position: fixed; | |||||
right: 0; | |||||
left: 0; | |||||
z-index: @zindex-navbar-fixed; | |||||
// Undo the rounded corners | |||||
@media (min-width: @grid-float-breakpoint) { | |||||
border-radius: 0; | |||||
} | |||||
} | |||||
.navbar-fixed-top { | |||||
top: 0; | |||||
border-width: 0 0 1px; | |||||
} | |||||
.navbar-fixed-bottom { | |||||
bottom: 0; | |||||
margin-bottom: 0; // override .navbar defaults | |||||
border-width: 1px 0 0; | |||||
} | |||||
// Brand/project name | |||||
.navbar-brand { | |||||
float: left; | |||||
padding: @navbar-padding-vertical @navbar-padding-horizontal; | |||||
font-size: @font-size-large; | |||||
line-height: @line-height-computed; | |||||
height: @navbar-height; | |||||
&:hover, | |||||
&:focus { | |||||
text-decoration: none; | |||||
} | |||||
> img { | |||||
display: block; | |||||
} | |||||
@media (min-width: @grid-float-breakpoint) { | |||||
.navbar > .container &, | |||||
.navbar > .container-fluid & { | |||||
margin-left: -@navbar-padding-horizontal; | |||||
} | |||||
} | |||||
} | |||||
// Navbar toggle | |||||
// | |||||
// Custom button for toggling the `.navbar-collapse`, powered by the collapse | |||||
// JavaScript plugin. | |||||
.navbar-toggle { | |||||
position: relative; | |||||
float: right; | |||||
margin-right: @navbar-padding-horizontal; | |||||
padding: 9px 10px; | |||||
.navbar-vertical-align(34px); | |||||
background-color: transparent; | |||||
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214 | |||||
border: 1px solid transparent; | |||||
border-radius: @border-radius-base; | |||||
// We remove the `outline` here, but later compensate by attaching `:hover` | |||||
// styles to `:focus`. | |||||
&:focus { | |||||
outline: 0; | |||||
} | |||||
// Bars | |||||
.icon-bar { | |||||
display: block; | |||||
width: 22px; | |||||
height: 2px; | |||||
border-radius: 1px; | |||||
} | |||||
.icon-bar + .icon-bar { | |||||
margin-top: 4px; | |||||
} | |||||
@media (min-width: @grid-float-breakpoint) { | |||||
display: none; | |||||
} | |||||
} | |||||
// Navbar nav links | |||||
// | |||||
// Builds on top of the `.nav` components with its own modifier class to make | |||||
// the nav the full height of the horizontal nav (above 768px). | |||||
.navbar-nav { | |||||
margin: (@navbar-padding-vertical / 2) -@navbar-padding-horizontal; | |||||
> li > a { | |||||
padding-top: 10px; | |||||
padding-bottom: 10px; | |||||
line-height: @line-height-computed; | |||||
} | |||||
@media (max-width: @grid-float-breakpoint-max) { | |||||
// Dropdowns get custom display when collapsed | |||||
.open .dropdown-menu { | |||||
position: static; | |||||
float: none; | |||||
width: auto; | |||||
margin-top: 0; | |||||
background-color: transparent; | |||||
border: 0; | |||||
box-shadow: none; | |||||
> li > a, | |||||
.dropdown-header { | |||||
padding: 5px 15px 5px 25px; | |||||
} | |||||
> li > a { | |||||
line-height: @line-height-computed; | |||||
&:hover, | |||||
&:focus { | |||||
background-image: none; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
// Uncollapse the nav | |||||
@media (min-width: @grid-float-breakpoint) { | |||||
float: left; | |||||
margin: 0; | |||||
> li { | |||||
float: left; | |||||
> a { | |||||
padding-top: @navbar-padding-vertical; | |||||
padding-bottom: @navbar-padding-vertical; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
// Navbar form | |||||
// | |||||
// Extension of the `.form-inline` with some extra flavor for optimum display in | |||||
// our navbars. | |||||
.navbar-form { | |||||
margin-left: -@navbar-padding-horizontal; | |||||
margin-right: -@navbar-padding-horizontal; | |||||
padding: 10px @navbar-padding-horizontal; | |||||
border-top: 1px solid transparent; | |||||
border-bottom: 1px solid transparent; | |||||
@shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1); | |||||
.box-shadow(@shadow); | |||||
// Mixin behavior for optimum display | |||||
.form-inline(); | |||||
.form-group { | |||||
@media (max-width: @grid-float-breakpoint-max) { | |||||
margin-bottom: 5px; | |||||
&:last-child { | |||||
margin-bottom: 0; | |||||
} | |||||
} | |||||
} | |||||
// Vertically center in expanded, horizontal navbar | |||||
.navbar-vertical-align(@input-height-base); | |||||
// Undo 100% width for pull classes | |||||
@media (min-width: @grid-float-breakpoint) { | |||||
width: auto; | |||||
border: 0; | |||||
margin-left: 0; | |||||
margin-right: 0; | |||||
padding-top: 0; | |||||
padding-bottom: 0; | |||||
.box-shadow(none); | |||||
} | |||||
} | |||||
// Dropdown menus | |||||
// Menu position and menu carets | |||||
.navbar-nav > li > .dropdown-menu { | |||||
margin-top: 0; | |||||
.border-top-radius(0); | |||||
} | |||||
// Menu position and menu caret support for dropups via extra dropup class | |||||
.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu { | |||||
margin-bottom: 0; | |||||
.border-top-radius(@navbar-border-radius); | |||||
.border-bottom-radius(0); | |||||
} | |||||
// Buttons in navbars | |||||
// | |||||
// Vertically center a button within a navbar (when *not* in a form). | |||||
.navbar-btn { | |||||
.navbar-vertical-align(@input-height-base); | |||||
&.btn-sm { | |||||
.navbar-vertical-align(@input-height-small); | |||||
} | |||||
&.btn-xs { | |||||
.navbar-vertical-align(22); | |||||
} | |||||
} | |||||
// Text in navbars | |||||
// | |||||
// Add a class to make any element properly align itself vertically within the navbars. | |||||
.navbar-text { | |||||
.navbar-vertical-align(@line-height-computed); | |||||
@media (min-width: @grid-float-breakpoint) { | |||||
float: left; | |||||
margin-left: @navbar-padding-horizontal; | |||||
margin-right: @navbar-padding-horizontal; | |||||
} | |||||
} | |||||
// Component alignment | |||||
// | |||||
// Repurpose the pull utilities as their own navbar utilities to avoid specificity | |||||
// issues with parents and chaining. Only do this when the navbar is uncollapsed | |||||
// though so that navbar contents properly stack and align in mobile. | |||||
// | |||||
// Declared after the navbar components to ensure more specificity on the margins. | |||||
@media (min-width: @grid-float-breakpoint) { | |||||
.navbar-left { .pull-left(); } | |||||
.navbar-right { | |||||
.pull-right(); | |||||
margin-right: -@navbar-padding-horizontal; | |||||
~ .navbar-right { | |||||
margin-right: 0; | |||||
} | |||||
} | |||||
} | |||||
// Alternate navbars | |||||
// -------------------------------------------------- | |||||
// Default navbar | |||||
.navbar-default { | |||||
background-color: @navbar-default-bg; | |||||
border-color: @navbar-default-border; | |||||
.navbar-brand { | |||||
color: @navbar-default-brand-color; | |||||
&:hover, | |||||
&:focus { | |||||
color: @navbar-default-brand-hover-color; | |||||
background-color: @navbar-default-brand-hover-bg; | |||||
} | |||||
} | |||||
.navbar-text { | |||||
color: @navbar-default-color; | |||||
} | |||||
.navbar-nav { | |||||
> li > a { | |||||
color: @navbar-default-link-color; | |||||
&:hover, | |||||
&:focus { | |||||
color: @navbar-default-link-hover-color; | |||||
background-color: @navbar-default-link-hover-bg; | |||||
} | |||||
} | |||||
> .active > a { | |||||
&, | |||||
&:hover, | |||||
&:focus { | |||||
color: @navbar-default-link-active-color; | |||||
background-color: @navbar-default-link-active-bg; | |||||
} | |||||
} | |||||
> .disabled > a { | |||||
&, | |||||
&:hover, | |||||
&:focus { | |||||
color: @navbar-default-link-disabled-color; | |||||
background-color: @navbar-default-link-disabled-bg; | |||||
} | |||||
} | |||||
} | |||||
.navbar-toggle { | |||||
border-color: @navbar-default-toggle-border-color; | |||||
&:hover, | |||||
&:focus { | |||||
background-color: @navbar-default-toggle-hover-bg; | |||||
} | |||||
.icon-bar { | |||||
background-color: @navbar-default-toggle-icon-bar-bg; | |||||
} | |||||
} | |||||
.navbar-collapse, | |||||
.navbar-form { | |||||
border-color: @navbar-default-border; | |||||
} | |||||
// Dropdown menu items | |||||
.navbar-nav { | |||||
// Remove background color from open dropdown | |||||
> .open > a { | |||||
&, | |||||
&:hover, | |||||
&:focus { | |||||
background-color: @navbar-default-link-active-bg; | |||||
color: @navbar-default-link-active-color; | |||||
} | |||||
} | |||||
@media (max-width: @grid-float-breakpoint-max) { | |||||
// Dropdowns get custom display when collapsed | |||||
.open .dropdown-menu { | |||||
> li > a { | |||||
color: @navbar-default-link-color; | |||||
&:hover, | |||||
&:focus { | |||||
color: @navbar-default-link-hover-color; | |||||
background-color: @navbar-default-link-hover-bg; | |||||
} | |||||
} | |||||
> .active > a { | |||||
&, | |||||
&:hover, | |||||
&:focus { | |||||
color: @navbar-default-link-active-color; | |||||
background-color: @navbar-default-link-active-bg; | |||||
} | |||||
} | |||||
> .disabled > a { | |||||
&, | |||||
&:hover, | |||||
&:focus { | |||||
color: @navbar-default-link-disabled-color; | |||||
background-color: @navbar-default-link-disabled-bg; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
} | |||||
// Links in navbars | |||||
// | |||||
// Add a class to ensure links outside the navbar nav are colored correctly. | |||||
.navbar-link { | |||||
color: @navbar-default-link-color; | |||||
&:hover { | |||||
color: @navbar-default-link-hover-color; | |||||
} | |||||
} | |||||
.btn-link { | |||||
color: @navbar-default-link-color; | |||||
&:hover, | |||||
&:focus { | |||||
color: @navbar-default-link-hover-color; | |||||
} | |||||
&[disabled], | |||||
fieldset[disabled] & { | |||||
&:hover, | |||||
&:focus { | |||||
color: @navbar-default-link-disabled-color; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
// Inverse navbar | |||||
.navbar-inverse { | |||||
background-color: @navbar-inverse-bg; | |||||
border-color: @navbar-inverse-border; | |||||
.navbar-brand { | |||||
color: @navbar-inverse-brand-color; | |||||
&:hover, | |||||
&:focus { | |||||
color: @navbar-inverse-brand-hover-color; | |||||
background-color: @navbar-inverse-brand-hover-bg; | |||||
} | |||||
} | |||||
.navbar-text { | |||||
color: @navbar-inverse-color; | |||||
} | |||||
.navbar-nav { | |||||
> li > a { | |||||
color: @navbar-inverse-link-color; | |||||
&:hover, | |||||
&:focus { | |||||
color: @navbar-inverse-link-hover-color; | |||||
background-color: @navbar-inverse-link-hover-bg; | |||||
} | |||||
} | |||||
> .active > a { | |||||
&, | |||||
&:hover, | |||||
&:focus { | |||||
color: @navbar-inverse-link-active-color; | |||||
background-color: @navbar-inverse-link-active-bg; | |||||
} | |||||
} | |||||
> .disabled > a { | |||||
&, | |||||
&:hover, | |||||
&:focus { | |||||
color: @navbar-inverse-link-disabled-color; | |||||
background-color: @navbar-inverse-link-disabled-bg; | |||||
} | |||||
} | |||||
} | |||||
// Darken the responsive nav toggle | |||||
.navbar-toggle { | |||||
border-color: @navbar-inverse-toggle-border-color; | |||||
&:hover, | |||||
&:focus { | |||||
background-color: @navbar-inverse-toggle-hover-bg; | |||||
} | |||||
.icon-bar { | |||||
background-color: @navbar-inverse-toggle-icon-bar-bg; | |||||
} | |||||
} | |||||
.navbar-collapse, | |||||
.navbar-form { | |||||
border-color: darken(@navbar-inverse-bg, 7%); | |||||
} | |||||
// Dropdowns | |||||
.navbar-nav { | |||||
> .open > a { | |||||
&, | |||||
&:hover, | |||||
&:focus { | |||||
background-color: @navbar-inverse-link-active-bg; | |||||
color: @navbar-inverse-link-active-color; | |||||
} | |||||
} | |||||
@media (max-width: @grid-float-breakpoint-max) { | |||||
// Dropdowns get custom display | |||||
.open .dropdown-menu { | |||||
> .dropdown-header { | |||||
border-color: @navbar-inverse-border; | |||||
} | |||||
.divider { | |||||
background-color: @navbar-inverse-border; | |||||
} | |||||
> li > a { | |||||
color: @navbar-inverse-link-color; | |||||
&:hover, | |||||
&:focus { | |||||
color: @navbar-inverse-link-hover-color; | |||||
background-color: @navbar-inverse-link-hover-bg; | |||||
} | |||||
} | |||||
> .active > a { | |||||
&, | |||||
&:hover, | |||||
&:focus { | |||||
color: @navbar-inverse-link-active-color; | |||||
background-color: @navbar-inverse-link-active-bg; | |||||
} | |||||
} | |||||
> .disabled > a { | |||||
&, | |||||
&:hover, | |||||
&:focus { | |||||
color: @navbar-inverse-link-disabled-color; | |||||
background-color: @navbar-inverse-link-disabled-bg; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
} | |||||
.navbar-link { | |||||
color: @navbar-inverse-link-color; | |||||
&:hover { | |||||
color: @navbar-inverse-link-hover-color; | |||||
} | |||||
} | |||||
.btn-link { | |||||
color: @navbar-inverse-link-color; | |||||
&:hover, | |||||
&:focus { | |||||
color: @navbar-inverse-link-hover-color; | |||||
} | |||||
&[disabled], | |||||
fieldset[disabled] & { | |||||
&:hover, | |||||
&:focus { | |||||
color: @navbar-inverse-link-disabled-color; | |||||
} | |||||
} | |||||
} | |||||
} |
@ -0,0 +1,242 @@ | |||||
// | |||||
// Navs | |||||
// -------------------------------------------------- | |||||
// Base class | |||||
// -------------------------------------------------- | |||||
.nav { | |||||
margin-bottom: 0; | |||||
padding-left: 0; // Override default ul/ol | |||||
list-style: none; | |||||
&:extend(.clearfix all); | |||||
> li { | |||||
position: relative; | |||||
display: block; | |||||
> a { | |||||
position: relative; | |||||
display: block; | |||||
padding: @nav-link-padding; | |||||
&:hover, | |||||
&:focus { | |||||
text-decoration: none; | |||||
background-color: @nav-link-hover-bg; | |||||
} | |||||
} | |||||
// Disabled state sets text to gray and nukes hover/tab effects | |||||
&.disabled > a { | |||||
color: @nav-disabled-link-color; | |||||
&:hover, | |||||
&:focus { | |||||
color: @nav-disabled-link-hover-color; | |||||
text-decoration: none; | |||||
background-color: transparent; | |||||
cursor: @cursor-disabled; | |||||
} | |||||
} | |||||
} | |||||
// Open dropdowns | |||||
.open > a { | |||||
&, | |||||
&:hover, | |||||
&:focus { | |||||
background-color: @nav-link-hover-bg; | |||||
border-color: @link-color; | |||||
} | |||||
} | |||||
// Nav dividers (deprecated with v3.0.1) | |||||
// | |||||
// This should have been removed in v3 with the dropping of `.nav-list`, but | |||||
// we missed it. We don't currently support this anywhere, but in the interest | |||||
// of maintaining backward compatibility in case you use it, it's deprecated. | |||||
.nav-divider { | |||||
.nav-divider(); | |||||
} | |||||
// Prevent IE8 from misplacing imgs | |||||
// | |||||
// See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989 | |||||
> li > a > img { | |||||
max-width: none; | |||||
} | |||||
} | |||||
// Tabs | |||||
// ------------------------- | |||||
// Give the tabs something to sit on | |||||
.nav-tabs { | |||||
border-bottom: 1px solid @nav-tabs-border-color; | |||||
> li { | |||||
float: left; | |||||
// Make the list-items overlay the bottom border | |||||
margin-bottom: -1px; | |||||
// Actual tabs (as links) | |||||
> a { | |||||
margin-right: 2px; | |||||
line-height: @line-height-base; | |||||
border: 1px solid transparent; | |||||
border-radius: @border-radius-base @border-radius-base 0 0; | |||||
&:hover { | |||||
border-color: @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color @nav-tabs-border-color; | |||||
} | |||||
} | |||||
// Active state, and its :hover to override normal :hover | |||||
&.active > a { | |||||
&, | |||||
&:hover, | |||||
&:focus { | |||||
color: @nav-tabs-active-link-hover-color; | |||||
background-color: @nav-tabs-active-link-hover-bg; | |||||
border: 1px solid @nav-tabs-active-link-hover-border-color; | |||||
border-bottom-color: transparent; | |||||
cursor: default; | |||||
} | |||||
} | |||||
} | |||||
// pulling this in mainly for less shorthand | |||||
&.nav-justified { | |||||
.nav-justified(); | |||||
.nav-tabs-justified(); | |||||
} | |||||
} | |||||
// Pills | |||||
// ------------------------- | |||||
.nav-pills { | |||||
> li { | |||||
float: left; | |||||
// Links rendered as pills | |||||
> a { | |||||
border-radius: @nav-pills-border-radius; | |||||
} | |||||
+ li { | |||||
margin-left: 2px; | |||||
} | |||||
// Active state | |||||
&.active > a { | |||||
&, | |||||
&:hover, | |||||
&:focus { | |||||
color: @nav-pills-active-link-hover-color; | |||||
background-color: @nav-pills-active-link-hover-bg; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
// Stacked pills | |||||
.nav-stacked { | |||||
> li { | |||||
float: none; | |||||
+ li { | |||||
margin-top: 2px; | |||||
margin-left: 0; // no need for this gap between nav items | |||||
} | |||||
} | |||||
} | |||||
// Nav variations | |||||
// -------------------------------------------------- | |||||
// Justified nav links | |||||
// ------------------------- | |||||
.nav-justified { | |||||
width: 100%; | |||||
> li { | |||||
float: none; | |||||
> a { | |||||
text-align: center; | |||||
margin-bottom: 5px; | |||||
} | |||||
} | |||||
> .dropdown .dropdown-menu { | |||||
top: auto; | |||||
left: auto; | |||||
} | |||||
@media (min-width: @screen-sm-min) { | |||||
> li { | |||||
display: table-cell; | |||||
width: 1%; | |||||
> a { | |||||
margin-bottom: 0; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
// Move borders to anchors instead of bottom of list | |||||
// | |||||
// Mixin for adding on top the shared `.nav-justified` styles for our tabs | |||||
.nav-tabs-justified { | |||||
border-bottom: 0; | |||||
> li > a { | |||||
// Override margin from .nav-tabs | |||||
margin-right: 0; | |||||
border-radius: @border-radius-base; | |||||
} | |||||
> .active > a, | |||||
> .active > a:hover, | |||||
> .active > a:focus { | |||||
border: 1px solid @nav-tabs-justified-link-border-color; | |||||
} | |||||
@media (min-width: @screen-sm-min) { | |||||
> li > a { | |||||
border-bottom: 1px solid @nav-tabs-justified-link-border-color; | |||||
border-radius: @border-radius-base @border-radius-base 0 0; | |||||
} | |||||
> .active > a, | |||||
> .active > a:hover, | |||||
> .active > a:focus { | |||||
border-bottom-color: @nav-tabs-justified-active-link-border-color; | |||||
} | |||||
} | |||||
} | |||||
// Tabbable tabs | |||||
// ------------------------- | |||||
// Hide tabbable panes to start, show them when `.active` | |||||
.tab-content { | |||||
> .tab-pane { | |||||
display: none; | |||||
} | |||||
> .active { | |||||
display: block; | |||||
} | |||||
} | |||||
// Dropdowns | |||||
// ------------------------- | |||||
// Specific dropdowns | |||||
.nav-tabs .dropdown-menu { | |||||
// make dropdown border overlap tab border | |||||
margin-top: -1px; | |||||
// Remove the top rounded corners here since there is a hard edge above the menu | |||||
.border-top-radius(0); | |||||
} |
@ -0,0 +1,424 @@ | |||||
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ | |||||
// | |||||
// 1. Set default font family to sans-serif. | |||||
// 2. Prevent iOS and IE text size adjust after device orientation change, | |||||
// without disabling user zoom. | |||||
// | |||||
html { | |||||
font-family: sans-serif; // 1 | |||||
-ms-text-size-adjust: 100%; // 2 | |||||
-webkit-text-size-adjust: 100%; // 2 | |||||
} | |||||
// | |||||
// Remove default margin. | |||||
// | |||||
body { | |||||
margin: 0; | |||||
} | |||||
// HTML5 display definitions | |||||
// ========================================================================== | |||||
// | |||||
// Correct `block` display not defined for any HTML5 element in IE 8/9. | |||||
// Correct `block` display not defined for `details` or `summary` in IE 10/11 | |||||
// and Firefox. | |||||
// Correct `block` display not defined for `main` in IE 11. | |||||
// | |||||
article, | |||||
aside, | |||||
details, | |||||
figcaption, | |||||
figure, | |||||
footer, | |||||
header, | |||||
hgroup, | |||||
main, | |||||
menu, | |||||
nav, | |||||
section, | |||||
summary { | |||||
display: block; | |||||
} | |||||
// | |||||
// 1. Correct `inline-block` display not defined in IE 8/9. | |||||
// 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. | |||||
// | |||||
audio, | |||||
canvas, | |||||
progress, | |||||
video { | |||||
display: inline-block; // 1 | |||||
vertical-align: baseline; // 2 | |||||
} | |||||
// | |||||
// Prevent modern browsers from displaying `audio` without controls. | |||||
// Remove excess height in iOS 5 devices. | |||||
// | |||||
audio:not([controls]) { | |||||
display: none; | |||||
height: 0; | |||||
} | |||||
// | |||||
// Address `[hidden]` styling not present in IE 8/9/10. | |||||
// Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. | |||||
// | |||||
[hidden], | |||||
template { | |||||
display: none; | |||||
} | |||||
// Links | |||||
// ========================================================================== | |||||
// | |||||
// Remove the gray background color from active links in IE 10. | |||||
// | |||||
a { | |||||
background-color: transparent; | |||||
} | |||||
// | |||||
// Improve readability of focused elements when they are also in an | |||||
// active/hover state. | |||||
// | |||||
a:active, | |||||
a:hover { | |||||
outline: 0; | |||||
} | |||||
// Text-level semantics | |||||
// ========================================================================== | |||||
// | |||||
// Address styling not present in IE 8/9/10/11, Safari, and Chrome. | |||||
// | |||||
abbr[title] { | |||||
border-bottom: 1px dotted; | |||||
} | |||||
// | |||||
// Address style set to `bolder` in Firefox 4+, Safari, and Chrome. | |||||
// | |||||
b, | |||||
strong { | |||||
font-weight: bold; | |||||
} | |||||
// | |||||
// Address styling not present in Safari and Chrome. | |||||
// | |||||
dfn { | |||||
font-style: italic; | |||||
} | |||||
// | |||||
// Address variable `h1` font-size and margin within `section` and `article` | |||||
// contexts in Firefox 4+, Safari, and Chrome. | |||||
// | |||||
h1 { | |||||
font-size: 2em; | |||||
margin: 0.67em 0; | |||||
} | |||||
// | |||||
// Address styling not present in IE 8/9. | |||||
// | |||||
mark { | |||||
background: #ff0; | |||||
color: #000; | |||||
} | |||||
// | |||||
// Address inconsistent and variable font size in all browsers. | |||||
// | |||||
small { | |||||
font-size: 80%; | |||||
} | |||||
// | |||||
// Prevent `sub` and `sup` affecting `line-height` in all browsers. | |||||
// | |||||
sub, | |||||
sup { | |||||
font-size: 75%; | |||||
line-height: 0; | |||||
position: relative; | |||||
vertical-align: baseline; | |||||
} | |||||
sup { | |||||
top: -0.5em; | |||||
} | |||||
sub { | |||||
bottom: -0.25em; | |||||
} | |||||
// Embedded content | |||||
// ========================================================================== | |||||
// | |||||
// Remove border when inside `a` element in IE 8/9/10. | |||||
// | |||||
img { | |||||
border: 0; | |||||
} | |||||
// | |||||
// Correct overflow not hidden in IE 9/10/11. | |||||
// | |||||
svg:not(:root) { | |||||
overflow: hidden; | |||||
} | |||||
// Grouping content | |||||
// ========================================================================== | |||||
// | |||||
// Address margin not present in IE 8/9 and Safari. | |||||
// | |||||
figure { | |||||
margin: 1em 40px; | |||||
} | |||||
// | |||||
// Address differences between Firefox and other browsers. | |||||
// | |||||
hr { | |||||
box-sizing: content-box; | |||||
height: 0; | |||||
} | |||||
// | |||||
// Contain overflow in all browsers. | |||||
// | |||||
pre { | |||||
overflow: auto; | |||||
} | |||||
// | |||||
// Address odd `em`-unit font size rendering in all browsers. | |||||
// | |||||
code, | |||||
kbd, | |||||
pre, | |||||
samp { | |||||
font-family: monospace, monospace; | |||||
font-size: 1em; | |||||
} | |||||
// Forms | |||||
// ========================================================================== | |||||
// | |||||
// Known limitation: by default, Chrome and Safari on OS X allow very limited | |||||
// styling of `select`, unless a `border` property is set. | |||||
// | |||||
// | |||||
// 1. Correct color not being inherited. | |||||
// Known issue: affects color of disabled elements. | |||||
// 2. Correct font properties not being inherited. | |||||
// 3. Address margins set differently in Firefox 4+, Safari, and Chrome. | |||||
// | |||||
button, | |||||
input, | |||||
optgroup, | |||||
select, | |||||
textarea { | |||||
color: inherit; // 1 | |||||
font: inherit; // 2 | |||||
margin: 0; // 3 | |||||
} | |||||
// | |||||
// Address `overflow` set to `hidden` in IE 8/9/10/11. | |||||
// | |||||
button { | |||||
overflow: visible; | |||||
} | |||||
// | |||||
// Address inconsistent `text-transform` inheritance for `button` and `select`. | |||||
// All other form control elements do not inherit `text-transform` values. | |||||
// Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. | |||||
// Correct `select` style inheritance in Firefox. | |||||
// | |||||
button, | |||||
select { | |||||
text-transform: none; | |||||
} | |||||
// | |||||
// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` | |||||
// and `video` controls. | |||||
// 2. Correct inability to style clickable `input` types in iOS. | |||||
// 3. Improve usability and consistency of cursor style between image-type | |||||
// `input` and others. | |||||
// | |||||
button, | |||||
html input[type="button"], // 1 | |||||
input[type="reset"], | |||||
input[type="submit"] { | |||||
-webkit-appearance: button; // 2 | |||||
cursor: pointer; // 3 | |||||
} | |||||
// | |||||
// Re-set default cursor for disabled elements. | |||||
// | |||||
button[disabled], | |||||
html input[disabled] { | |||||
cursor: default; | |||||
} | |||||
// | |||||
// Remove inner padding and border in Firefox 4+. | |||||
// | |||||
button::-moz-focus-inner, | |||||
input::-moz-focus-inner { | |||||
border: 0; | |||||
padding: 0; | |||||
} | |||||
// | |||||
// Address Firefox 4+ setting `line-height` on `input` using `!important` in | |||||
// the UA stylesheet. | |||||
// | |||||
input { | |||||
line-height: normal; | |||||
} | |||||
// | |||||
// It's recommended that you don't attempt to style these elements. | |||||
// Firefox's implementation doesn't respect box-sizing, padding, or width. | |||||
// | |||||
// 1. Address box sizing set to `content-box` in IE 8/9/10. | |||||
// 2. Remove excess padding in IE 8/9/10. | |||||
// | |||||
input[type="checkbox"], | |||||
input[type="radio"] { | |||||
box-sizing: border-box; // 1 | |||||
padding: 0; // 2 | |||||
} | |||||
// | |||||
// Fix the cursor style for Chrome's increment/decrement buttons. For certain | |||||
// `font-size` values of the `input`, it causes the cursor style of the | |||||
// decrement button to change from `default` to `text`. | |||||
// | |||||
input[type="number"]::-webkit-inner-spin-button, | |||||
input[type="number"]::-webkit-outer-spin-button { | |||||
height: auto; | |||||
} | |||||
// | |||||
// 1. Address `appearance` set to `searchfield` in Safari and Chrome. | |||||
// 2. Address `box-sizing` set to `border-box` in Safari and Chrome. | |||||
// | |||||
input[type="search"] { | |||||
-webkit-appearance: textfield; // 1 | |||||
box-sizing: content-box; //2 | |||||
} | |||||
// | |||||
// Remove inner padding and search cancel button in Safari and Chrome on OS X. | |||||
// Safari (but not Chrome) clips the cancel button when the search input has | |||||
// padding (and `textfield` appearance). | |||||
// | |||||
input[type="search"]::-webkit-search-cancel-button, | |||||
input[type="search"]::-webkit-search-decoration { | |||||
-webkit-appearance: none; | |||||
} | |||||
// | |||||
// Define consistent border, margin, and padding. | |||||
// | |||||
fieldset { | |||||
border: 1px solid #c0c0c0; | |||||
margin: 0 2px; | |||||
padding: 0.35em 0.625em 0.75em; | |||||
} | |||||
// | |||||
// 1. Correct `color` not being inherited in IE 8/9/10/11. | |||||
// 2. Remove padding so people aren't caught out if they zero out fieldsets. | |||||
// | |||||
legend { | |||||
border: 0; // 1 | |||||
padding: 0; // 2 | |||||
} | |||||
// | |||||
// Remove default vertical scrollbar in IE 8/9/10/11. | |||||
// | |||||
textarea { | |||||
overflow: auto; | |||||
} | |||||
// | |||||
// Don't inherit the `font-weight` (applied by a rule above). | |||||
// NOTE: the default cannot safely be changed in Chrome and Safari on OS X. | |||||
// | |||||
optgroup { | |||||
font-weight: bold; | |||||
} | |||||
// Tables | |||||
// ========================================================================== | |||||
// | |||||
// Remove most spacing between table cells. | |||||
// | |||||
table { | |||||
border-collapse: collapse; | |||||
border-spacing: 0; | |||||
} | |||||
td, | |||||
th { | |||||
padding: 0; | |||||
} |
@ -0,0 +1,54 @@ | |||||
// | |||||
// Pager pagination | |||||
// -------------------------------------------------- | |||||
.pager { | |||||
padding-left: 0; | |||||
margin: @line-height-computed 0; | |||||
list-style: none; | |||||
text-align: center; | |||||
&:extend(.clearfix all); | |||||
li { | |||||
display: inline; | |||||
> a, | |||||
> span { | |||||
display: inline-block; | |||||
padding: 5px 14px; | |||||
background-color: @pager-bg; | |||||
border: 1px solid @pager-border; | |||||
border-radius: @pager-border-radius; | |||||
} | |||||
> a:hover, | |||||
> a:focus { | |||||
text-decoration: none; | |||||
background-color: @pager-hover-bg; | |||||
} | |||||
} | |||||
.next { | |||||
> a, | |||||
> span { | |||||
float: right; | |||||
} | |||||
} | |||||
.previous { | |||||
> a, | |||||
> span { | |||||
float: left; | |||||
} | |||||
} | |||||
.disabled { | |||||
> a, | |||||
> a:hover, | |||||
> a:focus, | |||||
> span { | |||||
color: @pager-disabled-color; | |||||
background-color: @pager-bg; | |||||
cursor: @cursor-disabled; | |||||
} | |||||
} | |||||
} |
@ -0,0 +1,89 @@ | |||||
// | |||||
// Pagination (multiple pages) | |||||
// -------------------------------------------------- | |||||
.pagination { | |||||
display: inline-block; | |||||
padding-left: 0; | |||||
margin: @line-height-computed 0; | |||||
border-radius: @border-radius-base; | |||||
> li { | |||||
display: inline; // Remove list-style and block-level defaults | |||||
> a, | |||||
> span { | |||||
position: relative; | |||||
float: left; // Collapse white-space | |||||
padding: @padding-base-vertical @padding-base-horizontal; | |||||
line-height: @line-height-base; | |||||
text-decoration: none; | |||||
color: @pagination-color; | |||||
background-color: @pagination-bg; | |||||
border: 1px solid @pagination-border; | |||||
margin-left: -1px; | |||||
} | |||||
&:first-child { | |||||
> a, | |||||
> span { | |||||
margin-left: 0; | |||||
.border-left-radius(@border-radius-base); | |||||
} | |||||
} | |||||
&:last-child { | |||||
> a, | |||||
> span { | |||||
.border-right-radius(@border-radius-base); | |||||
} | |||||
} | |||||
} | |||||
> li > a, | |||||
> li > span { | |||||
&:hover, | |||||
&:focus { | |||||
z-index: 3; | |||||
color: @pagination-hover-color; | |||||
background-color: @pagination-hover-bg; | |||||
border-color: @pagination-hover-border; | |||||
} | |||||
} | |||||
> .active > a, | |||||
> .active > span { | |||||
&, | |||||
&:hover, | |||||
&:focus { | |||||
z-index: 2; | |||||
color: @pagination-active-color; | |||||
background-color: @pagination-active-bg; | |||||
border-color: @pagination-active-border; | |||||
cursor: default; | |||||
} | |||||
} | |||||
> .disabled { | |||||
> span, | |||||
> span:hover, | |||||
> span:focus, | |||||
> a, | |||||
> a:hover, | |||||
> a:focus { | |||||
color: @pagination-disabled-color; | |||||
background-color: @pagination-disabled-bg; | |||||
border-color: @pagination-disabled-border; | |||||
cursor: @cursor-disabled; | |||||
} | |||||
} | |||||
} | |||||
// Sizing | |||||
// -------------------------------------------------- | |||||
// Large | |||||
.pagination-lg { | |||||
.pagination-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large); | |||||
} | |||||
// Small | |||||
.pagination-sm { | |||||
.pagination-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small); | |||||
} |
@ -0,0 +1,271 @@ | |||||
// | |||||
// Panels | |||||
// -------------------------------------------------- | |||||
// Base class | |||||
.panel { | |||||
margin-bottom: @line-height-computed; | |||||
background-color: @panel-bg; | |||||
border: 1px solid transparent; | |||||
border-radius: @panel-border-radius; | |||||
.box-shadow(0 1px 1px rgba(0,0,0,.05)); | |||||
} | |||||
// Panel contents | |||||
.panel-body { | |||||
padding: @panel-body-padding; | |||||
&:extend(.clearfix all); | |||||
} | |||||
// Optional heading | |||||
.panel-heading { | |||||
padding: @panel-heading-padding; | |||||
border-bottom: 1px solid transparent; | |||||
.border-top-radius((@panel-border-radius - 1)); | |||||
> .dropdown .dropdown-toggle { | |||||
color: inherit; | |||||
} | |||||
} | |||||
// Within heading, strip any `h*` tag of its default margins for spacing. | |||||
.panel-title { | |||||
margin-top: 0; | |||||
margin-bottom: 0; | |||||
font-size: ceil((@font-size-base * 1.125)); | |||||
color: inherit; | |||||
> a, | |||||
> small, | |||||
> .small, | |||||
> small > a, | |||||
> .small > a { | |||||
color: inherit; | |||||
} | |||||
} | |||||
// Optional footer (stays gray in every modifier class) | |||||
.panel-footer { | |||||
padding: @panel-footer-padding; | |||||
background-color: @panel-footer-bg; | |||||
border-top: 1px solid @panel-inner-border; | |||||
.border-bottom-radius((@panel-border-radius - 1)); | |||||
} | |||||
// List groups in panels | |||||
// | |||||
// By default, space out list group content from panel headings to account for | |||||
// any kind of custom content between the two. | |||||
.panel { | |||||
> .list-group, | |||||
> .panel-collapse > .list-group { | |||||
margin-bottom: 0; | |||||
.list-group-item { | |||||
border-width: 1px 0; | |||||
border-radius: 0; | |||||
} | |||||
// Add border top radius for first one | |||||
&:first-child { | |||||
.list-group-item:first-child { | |||||
border-top: 0; | |||||
.border-top-radius((@panel-border-radius - 1)); | |||||
} | |||||
} | |||||
// Add border bottom radius for last one | |||||
&:last-child { | |||||
.list-group-item:last-child { | |||||
border-bottom: 0; | |||||
.border-bottom-radius((@panel-border-radius - 1)); | |||||
} | |||||
} | |||||
} | |||||
> .panel-heading + .panel-collapse > .list-group { | |||||
.list-group-item:first-child { | |||||
.border-top-radius(0); | |||||
} | |||||
} | |||||
} | |||||
// Collapse space between when there's no additional content. | |||||
.panel-heading + .list-group { | |||||
.list-group-item:first-child { | |||||
border-top-width: 0; | |||||
} | |||||
} | |||||
.list-group + .panel-footer { | |||||
border-top-width: 0; | |||||
} | |||||
// Tables in panels | |||||
// | |||||
// Place a non-bordered `.table` within a panel (not within a `.panel-body`) and | |||||
// watch it go full width. | |||||
.panel { | |||||
> .table, | |||||
> .table-responsive > .table, | |||||
> .panel-collapse > .table { | |||||
margin-bottom: 0; | |||||
caption { | |||||
padding-left: @panel-body-padding; | |||||
padding-right: @panel-body-padding; | |||||
} | |||||
} | |||||
// Add border top radius for first one | |||||
> .table:first-child, | |||||
> .table-responsive:first-child > .table:first-child { | |||||
.border-top-radius((@panel-border-radius - 1)); | |||||
> thead:first-child, | |||||
> tbody:first-child { | |||||
> tr:first-child { | |||||
border-top-left-radius: (@panel-border-radius - 1); | |||||
border-top-right-radius: (@panel-border-radius - 1); | |||||
td:first-child, | |||||
th:first-child { | |||||
border-top-left-radius: (@panel-border-radius - 1); | |||||
} | |||||
td:last-child, | |||||
th:last-child { | |||||
border-top-right-radius: (@panel-border-radius - 1); | |||||
} | |||||
} | |||||
} | |||||
} | |||||
// Add border bottom radius for last one | |||||
> .table:last-child, | |||||
> .table-responsive:last-child > .table:last-child { | |||||
.border-bottom-radius((@panel-border-radius - 1)); | |||||
> tbody:last-child, | |||||
> tfoot:last-child { | |||||
> tr:last-child { | |||||
border-bottom-left-radius: (@panel-border-radius - 1); | |||||
border-bottom-right-radius: (@panel-border-radius - 1); | |||||
td:first-child, | |||||
th:first-child { | |||||
border-bottom-left-radius: (@panel-border-radius - 1); | |||||
} | |||||
td:last-child, | |||||
th:last-child { | |||||
border-bottom-right-radius: (@panel-border-radius - 1); | |||||
} | |||||
} | |||||
} | |||||
} | |||||
> .panel-body + .table, | |||||
> .panel-body + .table-responsive, | |||||
> .table + .panel-body, | |||||
> .table-responsive + .panel-body { | |||||
border-top: 1px solid @table-border-color; | |||||
} | |||||
> .table > tbody:first-child > tr:first-child th, | |||||
> .table > tbody:first-child > tr:first-child td { | |||||
border-top: 0; | |||||
} | |||||
> .table-bordered, | |||||
> .table-responsive > .table-bordered { | |||||
border: 0; | |||||
> thead, | |||||
> tbody, | |||||
> tfoot { | |||||
> tr { | |||||
> th:first-child, | |||||
> td:first-child { | |||||
border-left: 0; | |||||
} | |||||
> th:last-child, | |||||
> td:last-child { | |||||
border-right: 0; | |||||
} | |||||
} | |||||
} | |||||
> thead, | |||||
> tbody { | |||||
> tr:first-child { | |||||
> td, | |||||
> th { | |||||
border-bottom: 0; | |||||
} | |||||
} | |||||
} | |||||
> tbody, | |||||
> tfoot { | |||||
> tr:last-child { | |||||
> td, | |||||
> th { | |||||
border-bottom: 0; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
> .table-responsive { | |||||
border: 0; | |||||
margin-bottom: 0; | |||||
} | |||||
} | |||||
// Collapsable panels (aka, accordion) | |||||
// | |||||
// Wrap a series of panels in `.panel-group` to turn them into an accordion with | |||||
// the help of our collapse JavaScript plugin. | |||||
.panel-group { | |||||
margin-bottom: @line-height-computed; | |||||
// Tighten up margin so it's only between panels | |||||
.panel { | |||||
margin-bottom: 0; | |||||
border-radius: @panel-border-radius; | |||||
+ .panel { | |||||
margin-top: 5px; | |||||
} | |||||
} | |||||
.panel-heading { | |||||
border-bottom: 0; | |||||
+ .panel-collapse > .panel-body, | |||||
+ .panel-collapse > .list-group { | |||||
border-top: 1px solid @panel-inner-border; | |||||
} | |||||
} | |||||
.panel-footer { | |||||
border-top: 0; | |||||
+ .panel-collapse .panel-body { | |||||
border-bottom: 1px solid @panel-inner-border; | |||||
} | |||||
} | |||||
} | |||||
// Contextual variations | |||||
.panel-default { | |||||
.panel-variant(@panel-default-border; @panel-default-text; @panel-default-heading-bg; @panel-default-border); | |||||
} | |||||
.panel-primary { | |||||
.panel-variant(@panel-primary-border; @panel-primary-text; @panel-primary-heading-bg; @panel-primary-border); | |||||
} | |||||
.panel-success { | |||||
.panel-variant(@panel-success-border; @panel-success-text; @panel-success-heading-bg; @panel-success-border); | |||||
} | |||||
.panel-info { | |||||
.panel-variant(@panel-info-border; @panel-info-text; @panel-info-heading-bg; @panel-info-border); | |||||
} | |||||
.panel-warning { | |||||
.panel-variant(@panel-warning-border; @panel-warning-text; @panel-warning-heading-bg; @panel-warning-border); | |||||
} | |||||
.panel-danger { | |||||
.panel-variant(@panel-danger-border; @panel-danger-text; @panel-danger-heading-bg; @panel-danger-border); | |||||
} |
@ -0,0 +1,131 @@ | |||||
// | |||||
// Popovers | |||||
// -------------------------------------------------- | |||||
.popover { | |||||
position: absolute; | |||||
top: 0; | |||||
left: 0; | |||||
z-index: @zindex-popover; | |||||
display: none; | |||||
max-width: @popover-max-width; | |||||
padding: 1px; | |||||
// Our parent element can be arbitrary since popovers are by default inserted as a sibling of their target element. | |||||
// So reset our font and text properties to avoid inheriting weird values. | |||||
.reset-text(); | |||||
font-size: @font-size-base; | |||||
background-color: @popover-bg; | |||||
background-clip: padding-box; | |||||
border: 1px solid @popover-fallback-border-color; | |||||
border: 1px solid @popover-border-color; | |||||
border-radius: @border-radius-large; | |||||
.box-shadow(0 5px 10px rgba(0,0,0,.2)); | |||||
// Offset the popover to account for the popover arrow | |||||
&.top { margin-top: -@popover-arrow-width; } | |||||
&.right { margin-left: @popover-arrow-width; } | |||||
&.bottom { margin-top: @popover-arrow-width; } | |||||
&.left { margin-left: -@popover-arrow-width; } | |||||
} | |||||
.popover-title { | |||||
margin: 0; // reset heading margin | |||||
padding: 8px 14px; | |||||
font-size: @font-size-base; | |||||
background-color: @popover-title-bg; | |||||
border-bottom: 1px solid darken(@popover-title-bg, 5%); | |||||
border-radius: (@border-radius-large - 1) (@border-radius-large - 1) 0 0; | |||||
} | |||||
.popover-content { | |||||
padding: 9px 14px; | |||||
} | |||||
// Arrows | |||||
// | |||||
// .arrow is outer, .arrow:after is inner | |||||
.popover > .arrow { | |||||
&, | |||||
&:after { | |||||
position: absolute; | |||||
display: block; | |||||
width: 0; | |||||
height: 0; | |||||
border-color: transparent; | |||||
border-style: solid; | |||||
} | |||||
} | |||||
.popover > .arrow { | |||||
border-width: @popover-arrow-outer-width; | |||||
} | |||||
.popover > .arrow:after { | |||||
border-width: @popover-arrow-width; | |||||
content: ""; | |||||
} | |||||
.popover { | |||||
&.top > .arrow { | |||||
left: 50%; | |||||
margin-left: -@popover-arrow-outer-width; | |||||
border-bottom-width: 0; | |||||
border-top-color: @popover-arrow-outer-fallback-color; // IE8 fallback | |||||
border-top-color: @popover-arrow-outer-color; | |||||
bottom: -@popover-arrow-outer-width; | |||||
&:after { | |||||
content: " "; | |||||
bottom: 1px; | |||||
margin-left: -@popover-arrow-width; | |||||
border-bottom-width: 0; | |||||
border-top-color: @popover-arrow-color; | |||||
} | |||||
} | |||||
&.right > .arrow { | |||||
top: 50%; | |||||
left: -@popover-arrow-outer-width; | |||||
margin-top: -@popover-arrow-outer-width; | |||||
border-left-width: 0; | |||||
border-right-color: @popover-arrow-outer-fallback-color; // IE8 fallback | |||||
border-right-color: @popover-arrow-outer-color; | |||||
&:after { | |||||
content: " "; | |||||
left: 1px; | |||||
bottom: -@popover-arrow-width; | |||||
border-left-width: 0; | |||||
border-right-color: @popover-arrow-color; | |||||
} | |||||
} | |||||
&.bottom > .arrow { | |||||
left: 50%; | |||||
margin-left: -@popover-arrow-outer-width; | |||||
border-top-width: 0; | |||||
border-bottom-color: @popover-arrow-outer-fallback-color; // IE8 fallback | |||||
border-bottom-color: @popover-arrow-outer-color; | |||||
top: -@popover-arrow-outer-width; | |||||
&:after { | |||||
content: " "; | |||||
top: 1px; | |||||
margin-left: -@popover-arrow-width; | |||||
border-top-width: 0; | |||||
border-bottom-color: @popover-arrow-color; | |||||
} | |||||
} | |||||
&.left > .arrow { | |||||
top: 50%; | |||||
right: -@popover-arrow-outer-width; | |||||
margin-top: -@popover-arrow-outer-width; | |||||
border-right-width: 0; | |||||
border-left-color: @popover-arrow-outer-fallback-color; // IE8 fallback | |||||
border-left-color: @popover-arrow-outer-color; | |||||
&:after { | |||||
content: " "; | |||||
right: 1px; | |||||
border-right-width: 0; | |||||
border-left-color: @popover-arrow-color; | |||||
bottom: -@popover-arrow-width; | |||||
} | |||||
} | |||||
} |
@ -0,0 +1,101 @@ | |||||
/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */ | |||||
// ========================================================================== | |||||
// Print styles. | |||||
// Inlined to avoid the additional HTTP request: h5bp.com/r | |||||
// ========================================================================== | |||||
@media print { | |||||
*, | |||||
*:before, | |||||
*:after { | |||||
background: transparent !important; | |||||
color: #000 !important; // Black prints faster: h5bp.com/s | |||||
box-shadow: none !important; | |||||
text-shadow: none !important; | |||||
} | |||||
a, | |||||
a:visited { | |||||
text-decoration: underline; | |||||
} | |||||
a[href]:after { | |||||
content: " (" attr(href) ")"; | |||||
} | |||||
abbr[title]:after { | |||||
content: " (" attr(title) ")"; | |||||
} | |||||
// Don't show links that are fragment identifiers, | |||||
// or use the `javascript:` pseudo protocol | |||||
a[href^="#"]:after, | |||||
a[href^="javascript:"]:after { | |||||
content: ""; | |||||
} | |||||
pre, | |||||
blockquote { | |||||
border: 1px solid #999; | |||||
page-break-inside: avoid; | |||||
} | |||||
thead { | |||||
display: table-header-group; // h5bp.com/t | |||||
} | |||||
tr, | |||||
img { | |||||
page-break-inside: avoid; | |||||
} | |||||
img { | |||||
max-width: 100% !important; | |||||
} | |||||
p, | |||||
h2, | |||||
h3 { | |||||
orphans: 3; | |||||
widows: 3; | |||||
} | |||||
h2, | |||||
h3 { | |||||
page-break-after: avoid; | |||||
} | |||||
// Bootstrap specific changes start | |||||
// Bootstrap components | |||||
.navbar { | |||||
display: none; | |||||
} | |||||
.btn, | |||||
.dropup > .btn { | |||||
> .caret { | |||||
border-top-color: #000 !important; | |||||
} | |||||
} | |||||
.label { | |||||
border: 1px solid #000; | |||||
} | |||||
.table { | |||||
border-collapse: collapse !important; | |||||
td, | |||||
th { | |||||
background-color: #fff !important; | |||||
} | |||||
} | |||||
.table-bordered { | |||||
th, | |||||
td { | |||||
border: 1px solid #ddd !important; | |||||
} | |||||
} | |||||
// Bootstrap specific changes end | |||||
} |
@ -0,0 +1,87 @@ | |||||
// | |||||
// Progress bars | |||||
// -------------------------------------------------- | |||||
// Bar animations | |||||
// ------------------------- | |||||
// WebKit | |||||
@-webkit-keyframes progress-bar-stripes { | |||||
from { background-position: 40px 0; } | |||||
to { background-position: 0 0; } | |||||
} | |||||
// Spec and IE10+ | |||||
@keyframes progress-bar-stripes { | |||||
from { background-position: 40px 0; } | |||||
to { background-position: 0 0; } | |||||
} | |||||
// Bar itself | |||||
// ------------------------- | |||||
// Outer container | |||||
.progress { | |||||
overflow: hidden; | |||||
height: @line-height-computed; | |||||
margin-bottom: @line-height-computed; | |||||
background-color: @progress-bg; | |||||
border-radius: @progress-border-radius; | |||||
.box-shadow(inset 0 1px 2px rgba(0,0,0,.1)); | |||||
} | |||||
// Bar of progress | |||||
.progress-bar { | |||||
float: left; | |||||
width: 0%; | |||||
height: 100%; | |||||
font-size: @font-size-small; | |||||
line-height: @line-height-computed; | |||||
color: @progress-bar-color; | |||||
text-align: center; | |||||
background-color: @progress-bar-bg; | |||||
.box-shadow(inset 0 -1px 0 rgba(0,0,0,.15)); | |||||
.transition(width .6s ease); | |||||
} | |||||
// Striped bars | |||||
// | |||||
// `.progress-striped .progress-bar` is deprecated as of v3.2.0 in favor of the | |||||
// `.progress-bar-striped` class, which you just add to an existing | |||||
// `.progress-bar`. | |||||
.progress-striped .progress-bar, | |||||
.progress-bar-striped { | |||||
#gradient > .striped(); | |||||
background-size: 40px 40px; | |||||
} | |||||
// Call animation for the active one | |||||
// | |||||
// `.progress.active .progress-bar` is deprecated as of v3.2.0 in favor of the | |||||
// `.progress-bar.active` approach. | |||||
.progress.active .progress-bar, | |||||
.progress-bar.active { | |||||
.animation(progress-bar-stripes 2s linear infinite); | |||||
} | |||||
// Variations | |||||
// ------------------------- | |||||
.progress-bar-success { | |||||
.progress-bar-variant(@progress-bar-success-bg); | |||||
} | |||||
.progress-bar-info { | |||||
.progress-bar-variant(@progress-bar-info-bg); | |||||
} | |||||
.progress-bar-warning { | |||||
.progress-bar-variant(@progress-bar-warning-bg); | |||||
} | |||||
.progress-bar-danger { | |||||
.progress-bar-variant(@progress-bar-danger-bg); | |||||
} |
@ -0,0 +1,35 @@ | |||||
// Embeds responsive | |||||
// | |||||
// Credit: Nicolas Gallagher and SUIT CSS. | |||||
.embed-responsive { | |||||
position: relative; | |||||
display: block; | |||||
height: 0; | |||||
padding: 0; | |||||
overflow: hidden; | |||||
.embed-responsive-item, | |||||
iframe, | |||||
embed, | |||||
object, | |||||
video { | |||||
position: absolute; | |||||
top: 0; | |||||
left: 0; | |||||
bottom: 0; | |||||
height: 100%; | |||||
width: 100%; | |||||
border: 0; | |||||
} | |||||
} | |||||
// Modifier class for 16:9 aspect ratio | |||||
.embed-responsive-16by9 { | |||||
padding-bottom: 56.25%; | |||||
} | |||||
// Modifier class for 4:3 aspect ratio | |||||
.embed-responsive-4by3 { | |||||
padding-bottom: 75%; | |||||
} |
@ -0,0 +1,194 @@ | |||||
// | |||||
// Responsive: Utility classes | |||||
// -------------------------------------------------- | |||||
// IE10 in Windows (Phone) 8 | |||||
// | |||||
// Support for responsive views via media queries is kind of borked in IE10, for | |||||
// Surface/desktop in split view and for Windows Phone 8. This particular fix | |||||
// must be accompanied by a snippet of JavaScript to sniff the user agent and | |||||
// apply some conditional CSS to *only* the Surface/desktop Windows 8. Look at | |||||
// our Getting Started page for more information on this bug. | |||||
// | |||||
// For more information, see the following: | |||||
// | |||||
// Issue: https://github.com/twbs/bootstrap/issues/10497 | |||||
// Docs: http://getbootstrap.com/getting-started/#support-ie10-width | |||||
// Source: http://timkadlec.com/2013/01/windows-phone-8-and-device-width/ | |||||
// Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/ | |||||
@-ms-viewport { | |||||
width: device-width; | |||||
} | |||||
// Visibility utilities | |||||
// Note: Deprecated .visible-xs, .visible-sm, .visible-md, and .visible-lg as of v3.2.0 | |||||
.visible-xs, | |||||
.visible-sm, | |||||
.visible-md, | |||||
.visible-lg { | |||||
.responsive-invisibility(); | |||||
} | |||||
.visible-xs-block, | |||||
.visible-xs-inline, | |||||
.visible-xs-inline-block, | |||||
.visible-sm-block, | |||||
.visible-sm-inline, | |||||
.visible-sm-inline-block, | |||||
.visible-md-block, | |||||
.visible-md-inline, | |||||
.visible-md-inline-block, | |||||
.visible-lg-block, | |||||
.visible-lg-inline, | |||||
.visible-lg-inline-block { | |||||
display: none !important; | |||||
} | |||||
.visible-xs { | |||||
@media (max-width: @screen-xs-max) { | |||||
.responsive-visibility(); | |||||
} | |||||
} | |||||
.visible-xs-block { | |||||
@media (max-width: @screen-xs-max) { | |||||
display: block !important; | |||||
} | |||||
} | |||||
.visible-xs-inline { | |||||
@media (max-width: @screen-xs-max) { | |||||
display: inline !important; | |||||
} | |||||
} | |||||
.visible-xs-inline-block { | |||||
@media (max-width: @screen-xs-max) { | |||||
display: inline-block !important; | |||||
} | |||||
} | |||||
.visible-sm { | |||||
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { | |||||
.responsive-visibility(); | |||||
} | |||||
} | |||||
.visible-sm-block { | |||||
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { | |||||
display: block !important; | |||||
} | |||||
} | |||||
.visible-sm-inline { | |||||
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { | |||||
display: inline !important; | |||||
} | |||||
} | |||||
.visible-sm-inline-block { | |||||
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { | |||||
display: inline-block !important; | |||||
} | |||||
} | |||||
.visible-md { | |||||
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { | |||||
.responsive-visibility(); | |||||
} | |||||
} | |||||
.visible-md-block { | |||||
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { | |||||
display: block !important; | |||||
} | |||||
} | |||||
.visible-md-inline { | |||||
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { | |||||
display: inline !important; | |||||
} | |||||
} | |||||
.visible-md-inline-block { | |||||
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { | |||||
display: inline-block !important; | |||||
} | |||||
} | |||||
.visible-lg { | |||||
@media (min-width: @screen-lg-min) { | |||||
.responsive-visibility(); | |||||
} | |||||
} | |||||
.visible-lg-block { | |||||
@media (min-width: @screen-lg-min) { | |||||
display: block !important; | |||||
} | |||||
} | |||||
.visible-lg-inline { | |||||
@media (min-width: @screen-lg-min) { | |||||
display: inline !important; | |||||
} | |||||
} | |||||
.visible-lg-inline-block { | |||||
@media (min-width: @screen-lg-min) { | |||||
display: inline-block !important; | |||||
} | |||||
} | |||||
.hidden-xs { | |||||
@media (max-width: @screen-xs-max) { | |||||
.responsive-invisibility(); | |||||
} | |||||
} | |||||
.hidden-sm { | |||||
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { | |||||
.responsive-invisibility(); | |||||
} | |||||
} | |||||
.hidden-md { | |||||
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { | |||||
.responsive-invisibility(); | |||||
} | |||||
} | |||||
.hidden-lg { | |||||
@media (min-width: @screen-lg-min) { | |||||
.responsive-invisibility(); | |||||
} | |||||
} | |||||
// Print utilities | |||||
// | |||||
// Media queries are placed on the inside to be mixin-friendly. | |||||
// Note: Deprecated .visible-print as of v3.2.0 | |||||
.visible-print { | |||||
.responsive-invisibility(); | |||||
@media print { | |||||
.responsive-visibility(); | |||||
} | |||||
} | |||||
.visible-print-block { | |||||
display: none !important; | |||||
@media print { | |||||
display: block !important; | |||||
} | |||||
} | |||||
.visible-print-inline { | |||||
display: none !important; | |||||
@media print { | |||||
display: inline !important; | |||||
} | |||||
} | |||||
.visible-print-inline-block { | |||||
display: none !important; | |||||
@media print { | |||||
display: inline-block !important; | |||||
} | |||||
} | |||||
.hidden-print { | |||||
@media print { | |||||
.responsive-invisibility(); | |||||
} | |||||
} |
@ -0,0 +1,161 @@ | |||||
// | |||||
// Scaffolding | |||||
// -------------------------------------------------- | |||||
// Reset the box-sizing | |||||
// | |||||
// Heads up! This reset may cause conflicts with some third-party widgets. | |||||
// For recommendations on resolving such conflicts, see | |||||
// http://getbootstrap.com/getting-started/#third-box-sizing | |||||
* { | |||||
.box-sizing(border-box); | |||||
} | |||||
*:before, | |||||
*:after { | |||||
.box-sizing(border-box); | |||||
} | |||||
// Body reset | |||||
html { | |||||
font-size: 10px; | |||||
-webkit-tap-highlight-color: rgba(0,0,0,0); | |||||
} | |||||
body { | |||||
font-family: @font-family-base; | |||||
font-size: @font-size-base; | |||||
line-height: @line-height-base; | |||||
color: @text-color; | |||||
background-color: @body-bg; | |||||
} | |||||
// Reset fonts for relevant elements | |||||
input, | |||||
button, | |||||
select, | |||||
textarea { | |||||
font-family: inherit; | |||||
font-size: inherit; | |||||
line-height: inherit; | |||||
} | |||||
// Links | |||||
a { | |||||
color: @link-color; | |||||
text-decoration: none; | |||||
&:hover, | |||||
&:focus { | |||||
color: @link-hover-color; | |||||
text-decoration: @link-hover-decoration; | |||||
} | |||||
&:focus { | |||||
.tab-focus(); | |||||
} | |||||
} | |||||
// Figures | |||||
// | |||||
// We reset this here because previously Normalize had no `figure` margins. This | |||||
// ensures we don't break anyone's use of the element. | |||||
figure { | |||||
margin: 0; | |||||
} | |||||
// Images | |||||
img { | |||||
vertical-align: middle; | |||||
} | |||||
// Responsive images (ensure images don't scale beyond their parents) | |||||
.img-responsive { | |||||
.img-responsive(); | |||||
} | |||||
// Rounded corners | |||||
.img-rounded { | |||||
border-radius: @border-radius-large; | |||||
} | |||||
// Image thumbnails | |||||
// | |||||
// Heads up! This is mixin-ed into thumbnails.less for `.thumbnail`. | |||||
.img-thumbnail { | |||||
padding: @thumbnail-padding; | |||||
line-height: @line-height-base; | |||||
background-color: @thumbnail-bg; | |||||
border: 1px solid @thumbnail-border; | |||||
border-radius: @thumbnail-border-radius; | |||||
.transition(all .2s ease-in-out); | |||||
// Keep them at most 100% wide | |||||
.img-responsive(inline-block); | |||||
} | |||||
// Perfect circle | |||||
.img-circle { | |||||
border-radius: 50%; // set radius in percents | |||||
} | |||||
// Horizontal rules | |||||
hr { | |||||
margin-top: @line-height-computed; | |||||
margin-bottom: @line-height-computed; | |||||
border: 0; | |||||
border-top: 1px solid @hr-border; | |||||
} | |||||
// Only display content to screen readers | |||||
// | |||||
// See: http://a11yproject.com/posts/how-to-hide-content/ | |||||
.sr-only { | |||||
position: absolute; | |||||
width: 1px; | |||||
height: 1px; | |||||
margin: -1px; | |||||
padding: 0; | |||||
overflow: hidden; | |||||
clip: rect(0,0,0,0); | |||||
border: 0; | |||||
} | |||||
// Use in conjunction with .sr-only to only display content when it's focused. | |||||
// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 | |||||
// Credit: HTML5 Boilerplate | |||||
.sr-only-focusable { | |||||
&:active, | |||||
&:focus { | |||||
position: static; | |||||
width: auto; | |||||
height: auto; | |||||
margin: 0; | |||||
overflow: visible; | |||||
clip: auto; | |||||
} | |||||
} | |||||
// iOS "clickable elements" fix for role="button" | |||||
// | |||||
// Fixes "clickability" issue (and more generally, the firing of events such as focus as well) | |||||
// for traditionally non-focusable elements with role="button" | |||||
// see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile | |||||
[role="button"] { | |||||
cursor: pointer; | |||||
} |
@ -0,0 +1,234 @@ | |||||
// | |||||
// Tables | |||||
// -------------------------------------------------- | |||||
table { | |||||
background-color: @table-bg; | |||||
} | |||||
caption { | |||||
padding-top: @table-cell-padding; | |||||
padding-bottom: @table-cell-padding; | |||||
color: @text-muted; | |||||
text-align: left; | |||||
} | |||||
th { | |||||
text-align: left; | |||||
} | |||||
// Baseline styles | |||||
.table { | |||||
width: 100%; | |||||
max-width: 100%; | |||||
margin-bottom: @line-height-computed; | |||||
// Cells | |||||
> thead, | |||||
> tbody, | |||||
> tfoot { | |||||
> tr { | |||||
> th, | |||||
> td { | |||||
padding: @table-cell-padding; | |||||
line-height: @line-height-base; | |||||
vertical-align: top; | |||||
border-top: 1px solid @table-border-color; | |||||
} | |||||
} | |||||
} | |||||
// Bottom align for column headings | |||||
> thead > tr > th { | |||||
vertical-align: bottom; | |||||
border-bottom: 2px solid @table-border-color; | |||||
} | |||||
// Remove top border from thead by default | |||||
> caption + thead, | |||||
> colgroup + thead, | |||||
> thead:first-child { | |||||
> tr:first-child { | |||||
> th, | |||||
> td { | |||||
border-top: 0; | |||||
} | |||||
} | |||||
} | |||||
// Account for multiple tbody instances | |||||
> tbody + tbody { | |||||
border-top: 2px solid @table-border-color; | |||||
} | |||||
// Nesting | |||||
.table { | |||||
background-color: @body-bg; | |||||
} | |||||
} | |||||
// Condensed table w/ half padding | |||||
.table-condensed { | |||||
> thead, | |||||
> tbody, | |||||
> tfoot { | |||||
> tr { | |||||
> th, | |||||
> td { | |||||
padding: @table-condensed-cell-padding; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
// Bordered version | |||||
// | |||||
// Add borders all around the table and between all the columns. | |||||
.table-bordered { | |||||
border: 1px solid @table-border-color; | |||||
> thead, | |||||
> tbody, | |||||
> tfoot { | |||||
> tr { | |||||
> th, | |||||
> td { | |||||
border: 1px solid @table-border-color; | |||||
} | |||||
} | |||||
} | |||||
> thead > tr { | |||||
> th, | |||||
> td { | |||||
border-bottom-width: 2px; | |||||
} | |||||
} | |||||
} | |||||
// Zebra-striping | |||||
// | |||||
// Default zebra-stripe styles (alternating gray and transparent backgrounds) | |||||
.table-striped { | |||||
> tbody > tr:nth-of-type(odd) { | |||||
background-color: @table-bg-accent; | |||||
} | |||||
} | |||||
// Hover effect | |||||
// | |||||
// Placed here since it has to come after the potential zebra striping | |||||
.table-hover { | |||||
> tbody > tr:hover { | |||||
background-color: @table-bg-hover; | |||||
} | |||||
} | |||||
// Table cell sizing | |||||
// | |||||
// Reset default table behavior | |||||
table col[class*="col-"] { | |||||
position: static; // Prevent border hiding in Firefox and IE9-11 (see https://github.com/twbs/bootstrap/issues/11623) | |||||
float: none; | |||||
display: table-column; | |||||
} | |||||
table { | |||||
td, | |||||
th { | |||||
&[class*="col-"] { | |||||
position: static; // Prevent border hiding in Firefox and IE9-11 (see https://github.com/twbs/bootstrap/issues/11623) | |||||
float: none; | |||||
display: table-cell; | |||||
} | |||||
} | |||||
} | |||||
// Table backgrounds | |||||
// | |||||
// Exact selectors below required to override `.table-striped` and prevent | |||||
// inheritance to nested tables. | |||||
// Generate the contextual variants | |||||
.table-row-variant(active; @table-bg-active); | |||||
.table-row-variant(success; @state-success-bg); | |||||
.table-row-variant(info; @state-info-bg); | |||||
.table-row-variant(warning; @state-warning-bg); | |||||
.table-row-variant(danger; @state-danger-bg); | |||||
// Responsive tables | |||||
// | |||||
// Wrap your tables in `.table-responsive` and we'll make them mobile friendly | |||||
// by enabling horizontal scrolling. Only applies <768px. Everything above that | |||||
// will display normally. | |||||
.table-responsive { | |||||
overflow-x: auto; | |||||
min-height: 0.01%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837) | |||||
@media screen and (max-width: @screen-xs-max) { | |||||
width: 100%; | |||||
margin-bottom: (@line-height-computed * 0.75); | |||||
overflow-y: hidden; | |||||
-ms-overflow-style: -ms-autohiding-scrollbar; | |||||
border: 1px solid @table-border-color; | |||||
// Tighten up spacing | |||||
> .table { | |||||
margin-bottom: 0; | |||||
// Ensure the content doesn't wrap | |||||
> thead, | |||||
> tbody, | |||||
> tfoot { | |||||
> tr { | |||||
> th, | |||||
> td { | |||||
white-space: nowrap; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
// Special overrides for the bordered tables | |||||
> .table-bordered { | |||||
border: 0; | |||||
// Nuke the appropriate borders so that the parent can handle them | |||||
> thead, | |||||
> tbody, | |||||
> tfoot { | |||||
> tr { | |||||
> th:first-child, | |||||
> td:first-child { | |||||
border-left: 0; | |||||
} | |||||
> th:last-child, | |||||
> td:last-child { | |||||
border-right: 0; | |||||
} | |||||
} | |||||
} | |||||
// Only nuke the last row's bottom-border in `tbody` and `tfoot` since | |||||
// chances are there will be only one `tr` in a `thead` and that would | |||||
// remove the border altogether. | |||||
> tbody, | |||||
> tfoot { | |||||
> tr:last-child { | |||||
> th, | |||||
> td { | |||||
border-bottom: 0; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
} | |||||
} |
@ -0,0 +1,291 @@ | |||||
/*! | |||||
* Bootstrap v3.3.5 (http://getbootstrap.com) | |||||
* Copyright 2011-2015 Twitter, Inc. | |||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) | |||||
*/ | |||||
// | |||||
// Load core variables and mixins | |||||
// -------------------------------------------------- | |||||
@import "variables.less"; | |||||
@import "mixins.less"; | |||||
// | |||||
// Buttons | |||||
// -------------------------------------------------- | |||||
// Common styles | |||||
.btn-default, | |||||
.btn-primary, | |||||
.btn-success, | |||||
.btn-info, | |||||
.btn-warning, | |||||
.btn-danger { | |||||
text-shadow: 0 -1px 0 rgba(0,0,0,.2); | |||||
@shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075); | |||||
.box-shadow(@shadow); | |||||
// Reset the shadow | |||||
&:active, | |||||
&.active { | |||||
.box-shadow(inset 0 3px 5px rgba(0,0,0,.125)); | |||||
} | |||||
&.disabled, | |||||
&[disabled], | |||||
fieldset[disabled] & { | |||||
.box-shadow(none); | |||||
} | |||||
.badge { | |||||
text-shadow: none; | |||||
} | |||||
} | |||||
// Mixin for generating new styles | |||||
.btn-styles(@btn-color: #555) { | |||||
#gradient > .vertical(@start-color: @btn-color; @end-color: darken(@btn-color, 12%)); | |||||
.reset-filter(); // Disable gradients for IE9 because filter bleeds through rounded corners; see https://github.com/twbs/bootstrap/issues/10620 | |||||
background-repeat: repeat-x; | |||||
border-color: darken(@btn-color, 14%); | |||||
&:hover, | |||||
&:focus { | |||||
background-color: darken(@btn-color, 12%); | |||||
background-position: 0 -15px; | |||||
} | |||||
&:active, | |||||
&.active { | |||||
background-color: darken(@btn-color, 12%); | |||||
border-color: darken(@btn-color, 14%); | |||||
} | |||||
&.disabled, | |||||
&[disabled], | |||||
fieldset[disabled] & { | |||||
&, | |||||
&:hover, | |||||
&:focus, | |||||
&.focus, | |||||
&:active, | |||||
&.active { | |||||
background-color: darken(@btn-color, 12%); | |||||
background-image: none; | |||||
} | |||||
} | |||||
} | |||||
// Common styles | |||||
.btn { | |||||
// Remove the gradient for the pressed/active state | |||||
&:active, | |||||
&.active { | |||||
background-image: none; | |||||
} | |||||
} | |||||
// Apply the mixin to the buttons | |||||
.btn-default { .btn-styles(@btn-default-bg); text-shadow: 0 1px 0 #fff; border-color: #ccc; } | |||||
.btn-primary { .btn-styles(@btn-primary-bg); } | |||||
.btn-success { .btn-styles(@btn-success-bg); } | |||||
.btn-info { .btn-styles(@btn-info-bg); } | |||||
.btn-warning { .btn-styles(@btn-warning-bg); } | |||||
.btn-danger { .btn-styles(@btn-danger-bg); } | |||||
// | |||||
// Images | |||||
// -------------------------------------------------- | |||||
.thumbnail, | |||||
.img-thumbnail { | |||||
.box-shadow(0 1px 2px rgba(0,0,0,.075)); | |||||
} | |||||
// | |||||
// Dropdowns | |||||
// -------------------------------------------------- | |||||
.dropdown-menu > li > a:hover, | |||||
.dropdown-menu > li > a:focus { | |||||
#gradient > .vertical(@start-color: @dropdown-link-hover-bg; @end-color: darken(@dropdown-link-hover-bg, 5%)); | |||||
background-color: darken(@dropdown-link-hover-bg, 5%); | |||||
} | |||||
.dropdown-menu > .active > a, | |||||
.dropdown-menu > .active > a:hover, | |||||
.dropdown-menu > .active > a:focus { | |||||
#gradient > .vertical(@start-color: @dropdown-link-active-bg; @end-color: darken(@dropdown-link-active-bg, 5%)); | |||||
background-color: darken(@dropdown-link-active-bg, 5%); | |||||
} | |||||
// | |||||
// Navbar | |||||
// -------------------------------------------------- | |||||
// Default navbar | |||||
.navbar-default { | |||||
#gradient > .vertical(@start-color: lighten(@navbar-default-bg, 10%); @end-color: @navbar-default-bg); | |||||
.reset-filter(); // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered | |||||
border-radius: @navbar-border-radius; | |||||
@shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 5px rgba(0,0,0,.075); | |||||
.box-shadow(@shadow); | |||||
.navbar-nav > .open > a, | |||||
.navbar-nav > .active > a { | |||||
#gradient > .vertical(@start-color: darken(@navbar-default-link-active-bg, 5%); @end-color: darken(@navbar-default-link-active-bg, 2%)); | |||||
.box-shadow(inset 0 3px 9px rgba(0,0,0,.075)); | |||||
} | |||||
} | |||||
.navbar-brand, | |||||
.navbar-nav > li > a { | |||||
text-shadow: 0 1px 0 rgba(255,255,255,.25); | |||||
} | |||||
// Inverted navbar | |||||
.navbar-inverse { | |||||
#gradient > .vertical(@start-color: lighten(@navbar-inverse-bg, 10%); @end-color: @navbar-inverse-bg); | |||||
.reset-filter(); // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered; see https://github.com/twbs/bootstrap/issues/10257 | |||||
border-radius: @navbar-border-radius; | |||||
.navbar-nav > .open > a, | |||||
.navbar-nav > .active > a { | |||||
#gradient > .vertical(@start-color: @navbar-inverse-link-active-bg; @end-color: lighten(@navbar-inverse-link-active-bg, 2.5%)); | |||||
.box-shadow(inset 0 3px 9px rgba(0,0,0,.25)); | |||||
} | |||||
.navbar-brand, | |||||
.navbar-nav > li > a { | |||||
text-shadow: 0 -1px 0 rgba(0,0,0,.25); | |||||
} | |||||
} | |||||
// Undo rounded corners in static and fixed navbars | |||||
.navbar-static-top, | |||||
.navbar-fixed-top, | |||||
.navbar-fixed-bottom { | |||||
border-radius: 0; | |||||
} | |||||
// Fix active state of dropdown items in collapsed mode | |||||
@media (max-width: @grid-float-breakpoint-max) { | |||||
.navbar .navbar-nav .open .dropdown-menu > .active > a { | |||||
&, | |||||
&:hover, | |||||
&:focus { | |||||
color: #fff; | |||||
#gradient > .vertical(@start-color: @dropdown-link-active-bg; @end-color: darken(@dropdown-link-active-bg, 5%)); | |||||
} | |||||
} | |||||
} | |||||
// | |||||
// Alerts | |||||
// -------------------------------------------------- | |||||
// Common styles | |||||
.alert { | |||||
text-shadow: 0 1px 0 rgba(255,255,255,.2); | |||||
@shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.05); | |||||
.box-shadow(@shadow); | |||||
} | |||||
// Mixin for generating new styles | |||||
.alert-styles(@color) { | |||||
#gradient > .vertical(@start-color: @color; @end-color: darken(@color, 7.5%)); | |||||
border-color: darken(@color, 15%); | |||||
} | |||||
// Apply the mixin to the alerts | |||||
.alert-success { .alert-styles(@alert-success-bg); } | |||||
.alert-info { .alert-styles(@alert-info-bg); } | |||||
.alert-warning { .alert-styles(@alert-warning-bg); } | |||||
.alert-danger { .alert-styles(@alert-danger-bg); } | |||||
// | |||||
// Progress bars | |||||
// -------------------------------------------------- | |||||
// Give the progress background some depth | |||||
.progress { | |||||
#gradient > .vertical(@start-color: darken(@progress-bg, 4%); @end-color: @progress-bg) | |||||
} | |||||
// Mixin for generating new styles | |||||
.progress-bar-styles(@color) { | |||||
#gradient > .vertical(@start-color: @color; @end-color: darken(@color, 10%)); | |||||
} | |||||
// Apply the mixin to the progress bars | |||||
.progress-bar { .progress-bar-styles(@progress-bar-bg); } | |||||
.progress-bar-success { .progress-bar-styles(@progress-bar-success-bg); } | |||||
.progress-bar-info { .progress-bar-styles(@progress-bar-info-bg); } | |||||
.progress-bar-warning { .progress-bar-styles(@progress-bar-warning-bg); } | |||||
.progress-bar-danger { .progress-bar-styles(@progress-bar-danger-bg); } | |||||
// Reset the striped class because our mixins don't do multiple gradients and | |||||
// the above custom styles override the new `.progress-bar-striped` in v3.2.0. | |||||
.progress-bar-striped { | |||||
#gradient > .striped(); | |||||
} | |||||
// | |||||
// List groups | |||||
// -------------------------------------------------- | |||||
.list-group { | |||||
border-radius: @border-radius-base; | |||||
.box-shadow(0 1px 2px rgba(0,0,0,.075)); | |||||
} | |||||
.list-group-item.active, | |||||
.list-group-item.active:hover, | |||||
.list-group-item.active:focus { | |||||
text-shadow: 0 -1px 0 darken(@list-group-active-bg, 10%); | |||||
#gradient > .vertical(@start-color: @list-group-active-bg; @end-color: darken(@list-group-active-bg, 7.5%)); | |||||
border-color: darken(@list-group-active-border, 7.5%); | |||||
.badge { | |||||
text-shadow: none; | |||||
} | |||||
} | |||||
// | |||||
// Panels | |||||
// -------------------------------------------------- | |||||
// Common styles | |||||
.panel { | |||||
.box-shadow(0 1px 2px rgba(0,0,0,.05)); | |||||
} | |||||
// Mixin for generating new styles | |||||
.panel-heading-styles(@color) { | |||||
#gradient > .vertical(@start-color: @color; @end-color: darken(@color, 5%)); | |||||
} | |||||
// Apply the mixin to the panel headings only | |||||
.panel-default > .panel-heading { .panel-heading-styles(@panel-default-heading-bg); } | |||||
.panel-primary > .panel-heading { .panel-heading-styles(@panel-primary-heading-bg); } | |||||
.panel-success > .panel-heading { .panel-heading-styles(@panel-success-heading-bg); } | |||||
.panel-info > .panel-heading { .panel-heading-styles(@panel-info-heading-bg); } | |||||
.panel-warning > .panel-heading { .panel-heading-styles(@panel-warning-heading-bg); } | |||||
.panel-danger > .panel-heading { .panel-heading-styles(@panel-danger-heading-bg); } | |||||
// | |||||
// Wells | |||||
// -------------------------------------------------- | |||||
.well { | |||||
#gradient > .vertical(@start-color: darken(@well-bg, 5%); @end-color: @well-bg); | |||||
border-color: darken(@well-bg, 10%); | |||||
@shadow: inset 0 1px 3px rgba(0,0,0,.05), 0 1px 0 rgba(255,255,255,.1); | |||||
.box-shadow(@shadow); | |||||
} |
@ -0,0 +1,36 @@ | |||||
// | |||||
// Thumbnails | |||||
// -------------------------------------------------- | |||||
// Mixin and adjust the regular image class | |||||
.thumbnail { | |||||
display: block; | |||||
padding: @thumbnail-padding; | |||||
margin-bottom: @line-height-computed; | |||||
line-height: @line-height-base; | |||||
background-color: @thumbnail-bg; | |||||
border: 1px solid @thumbnail-border; | |||||
border-radius: @thumbnail-border-radius; | |||||
.transition(border .2s ease-in-out); | |||||
> img, | |||||
a > img { | |||||
&:extend(.img-responsive); | |||||
margin-left: auto; | |||||
margin-right: auto; | |||||
} | |||||
// Add a hover state for linked versions only | |||||
a&:hover, | |||||
a&:focus, | |||||
a&.active { | |||||
border-color: @link-color; | |||||
} | |||||
// Image captions | |||||
.caption { | |||||
padding: @thumbnail-caption-padding; | |||||
color: @thumbnail-caption-color; | |||||
} | |||||
} |
@ -0,0 +1,101 @@ | |||||
// | |||||
// Tooltips | |||||
// -------------------------------------------------- | |||||
// Base class | |||||
.tooltip { | |||||
position: absolute; | |||||
z-index: @zindex-tooltip; | |||||
display: block; | |||||
// Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element. | |||||
// So reset our font and text properties to avoid inheriting weird values. | |||||
.reset-text(); | |||||
font-size: @font-size-small; | |||||
.opacity(0); | |||||
&.in { .opacity(@tooltip-opacity); } | |||||
&.top { margin-top: -3px; padding: @tooltip-arrow-width 0; } | |||||
&.right { margin-left: 3px; padding: 0 @tooltip-arrow-width; } | |||||
&.bottom { margin-top: 3px; padding: @tooltip-arrow-width 0; } | |||||
&.left { margin-left: -3px; padding: 0 @tooltip-arrow-width; } | |||||
} | |||||
// Wrapper for the tooltip content | |||||
.tooltip-inner { | |||||
max-width: @tooltip-max-width; | |||||
padding: 3px 8px; | |||||
color: @tooltip-color; | |||||
text-align: center; | |||||
background-color: @tooltip-bg; | |||||
border-radius: @border-radius-base; | |||||
} | |||||
// Arrows | |||||
.tooltip-arrow { | |||||
position: absolute; | |||||
width: 0; | |||||
height: 0; | |||||
border-color: transparent; | |||||
border-style: solid; | |||||
} | |||||
// Note: Deprecated .top-left, .top-right, .bottom-left, and .bottom-right as of v3.3.1 | |||||
.tooltip { | |||||
&.top .tooltip-arrow { | |||||
bottom: 0; | |||||
left: 50%; | |||||
margin-left: -@tooltip-arrow-width; | |||||
border-width: @tooltip-arrow-width @tooltip-arrow-width 0; | |||||
border-top-color: @tooltip-arrow-color; | |||||
} | |||||
&.top-left .tooltip-arrow { | |||||
bottom: 0; | |||||
right: @tooltip-arrow-width; | |||||
margin-bottom: -@tooltip-arrow-width; | |||||
border-width: @tooltip-arrow-width @tooltip-arrow-width 0; | |||||
border-top-color: @tooltip-arrow-color; | |||||
} | |||||
&.top-right .tooltip-arrow { | |||||
bottom: 0; | |||||
left: @tooltip-arrow-width; | |||||
margin-bottom: -@tooltip-arrow-width; | |||||
border-width: @tooltip-arrow-width @tooltip-arrow-width 0; | |||||
border-top-color: @tooltip-arrow-color; | |||||
} | |||||
&.right .tooltip-arrow { | |||||
top: 50%; | |||||
left: 0; | |||||
margin-top: -@tooltip-arrow-width; | |||||
border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0; | |||||
border-right-color: @tooltip-arrow-color; | |||||
} | |||||
&.left .tooltip-arrow { | |||||
top: 50%; | |||||
right: 0; | |||||
margin-top: -@tooltip-arrow-width; | |||||
border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width; | |||||
border-left-color: @tooltip-arrow-color; | |||||
} | |||||
&.bottom .tooltip-arrow { | |||||
top: 0; | |||||
left: 50%; | |||||
margin-left: -@tooltip-arrow-width; | |||||
border-width: 0 @tooltip-arrow-width @tooltip-arrow-width; | |||||
border-bottom-color: @tooltip-arrow-color; | |||||
} | |||||
&.bottom-left .tooltip-arrow { | |||||
top: 0; | |||||
right: @tooltip-arrow-width; | |||||
margin-top: -@tooltip-arrow-width; | |||||
border-width: 0 @tooltip-arrow-width @tooltip-arrow-width; | |||||
border-bottom-color: @tooltip-arrow-color; | |||||
} | |||||
&.bottom-right .tooltip-arrow { | |||||
top: 0; | |||||
left: @tooltip-arrow-width; | |||||
margin-top: -@tooltip-arrow-width; | |||||
border-width: 0 @tooltip-arrow-width @tooltip-arrow-width; | |||||
border-bottom-color: @tooltip-arrow-color; | |||||
} | |||||
} |
@ -0,0 +1,302 @@ | |||||
// | |||||
// Typography | |||||
// -------------------------------------------------- | |||||
// Headings | |||||
// ------------------------- | |||||
h1, h2, h3, h4, h5, h6, | |||||
.h1, .h2, .h3, .h4, .h5, .h6 { | |||||
font-family: @headings-font-family; | |||||
font-weight: @headings-font-weight; | |||||
line-height: @headings-line-height; | |||||
color: @headings-color; | |||||
small, | |||||
.small { | |||||
font-weight: normal; | |||||
line-height: 1; | |||||
color: @headings-small-color; | |||||
} | |||||
} | |||||
h1, .h1, | |||||
h2, .h2, | |||||
h3, .h3 { | |||||
margin-top: @line-height-computed; | |||||
margin-bottom: (@line-height-computed / 2); | |||||
small, | |||||
.small { | |||||
font-size: 65%; | |||||
} | |||||
} | |||||
h4, .h4, | |||||
h5, .h5, | |||||
h6, .h6 { | |||||
margin-top: (@line-height-computed / 2); | |||||
margin-bottom: (@line-height-computed / 2); | |||||
small, | |||||
.small { | |||||
font-size: 75%; | |||||
} | |||||
} | |||||
h1, .h1 { font-size: @font-size-h1; } | |||||
h2, .h2 { font-size: @font-size-h2; } | |||||
h3, .h3 { font-size: @font-size-h3; } | |||||
h4, .h4 { font-size: @font-size-h4; } | |||||
h5, .h5 { font-size: @font-size-h5; } | |||||
h6, .h6 { font-size: @font-size-h6; } | |||||
// Body text | |||||
// ------------------------- | |||||
p { | |||||
margin: 0 0 (@line-height-computed / 2); | |||||
} | |||||
.lead { | |||||
margin-bottom: @line-height-computed; | |||||
font-size: floor((@font-size-base * 1.15)); | |||||
font-weight: 300; | |||||
line-height: 1.4; | |||||
@media (min-width: @screen-sm-min) { | |||||
font-size: (@font-size-base * 1.5); | |||||
} | |||||
} | |||||
// Emphasis & misc | |||||
// ------------------------- | |||||
// Ex: (12px small font / 14px base font) * 100% = about 85% | |||||
small, | |||||
.small { | |||||
font-size: floor((100% * @font-size-small / @font-size-base)); | |||||
} | |||||
mark, | |||||
.mark { | |||||
background-color: @state-warning-bg; | |||||
padding: .2em; | |||||
} | |||||
// Alignment | |||||
.text-left { text-align: left; } | |||||
.text-right { text-align: right; } | |||||
.text-center { text-align: center; } | |||||
.text-justify { text-align: justify; } | |||||
.text-nowrap { white-space: nowrap; } | |||||
// Transformation | |||||
.text-lowercase { text-transform: lowercase; } | |||||
.text-uppercase { text-transform: uppercase; } | |||||
.text-capitalize { text-transform: capitalize; } | |||||
// Contextual colors | |||||
.text-muted { | |||||
color: @text-muted; | |||||
} | |||||
.text-primary { | |||||
.text-emphasis-variant(@brand-primary); | |||||
} | |||||
.text-success { | |||||
.text-emphasis-variant(@state-success-text); | |||||
} | |||||
.text-info { | |||||
.text-emphasis-variant(@state-info-text); | |||||
} | |||||
.text-warning { | |||||
.text-emphasis-variant(@state-warning-text); | |||||
} | |||||
.text-danger { | |||||
.text-emphasis-variant(@state-danger-text); | |||||
} | |||||
// Contextual backgrounds | |||||
// For now we'll leave these alongside the text classes until v4 when we can | |||||
// safely shift things around (per SemVer rules). | |||||
.bg-primary { | |||||
// Given the contrast here, this is the only class to have its color inverted | |||||
// automatically. | |||||
color: #fff; | |||||
.bg-variant(@brand-primary); | |||||
} | |||||
.bg-success { | |||||
.bg-variant(@state-success-bg); | |||||
} | |||||
.bg-info { | |||||
.bg-variant(@state-info-bg); | |||||
} | |||||
.bg-warning { | |||||
.bg-variant(@state-warning-bg); | |||||
} | |||||
.bg-danger { | |||||
.bg-variant(@state-danger-bg); | |||||
} | |||||
// Page header | |||||
// ------------------------- | |||||
.page-header { | |||||
padding-bottom: ((@line-height-computed / 2) - 1); | |||||
margin: (@line-height-computed * 2) 0 @line-height-computed; | |||||
border-bottom: 1px solid @page-header-border-color; | |||||
} | |||||
// Lists | |||||
// ------------------------- | |||||
// Unordered and Ordered lists | |||||
ul, | |||||
ol { | |||||
margin-top: 0; | |||||
margin-bottom: (@line-height-computed / 2); | |||||
ul, | |||||
ol { | |||||
margin-bottom: 0; | |||||
} | |||||
} | |||||
// List options | |||||
// Unstyled keeps list items block level, just removes default browser padding and list-style | |||||
.list-unstyled { | |||||
padding-left: 0; | |||||
list-style: none; | |||||
} | |||||
// Inline turns list items into inline-block | |||||
.list-inline { | |||||
.list-unstyled(); | |||||
margin-left: -5px; | |||||
> li { | |||||
display: inline-block; | |||||
padding-left: 5px; | |||||
padding-right: 5px; | |||||
} | |||||
} | |||||
// Description Lists | |||||
dl { | |||||
margin-top: 0; // Remove browser default | |||||
margin-bottom: @line-height-computed; | |||||
} | |||||
dt, | |||||
dd { | |||||
line-height: @line-height-base; | |||||
} | |||||
dt { | |||||
font-weight: bold; | |||||
} | |||||
dd { | |||||
margin-left: 0; // Undo browser default | |||||
} | |||||
// Horizontal description lists | |||||
// | |||||
// Defaults to being stacked without any of the below styles applied, until the | |||||
// grid breakpoint is reached (default of ~768px). | |||||
.dl-horizontal { | |||||
dd { | |||||
&:extend(.clearfix all); // Clear the floated `dt` if an empty `dd` is present | |||||
} | |||||
@media (min-width: @grid-float-breakpoint) { | |||||
dt { | |||||
float: left; | |||||
width: (@dl-horizontal-offset - 20); | |||||
clear: left; | |||||
text-align: right; | |||||
.text-overflow(); | |||||
} | |||||
dd { | |||||
margin-left: @dl-horizontal-offset; | |||||
} | |||||
} | |||||
} | |||||
// Misc | |||||
// ------------------------- | |||||
// Abbreviations and acronyms | |||||
abbr[title], | |||||
// Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257 | |||||
abbr[data-original-title] { | |||||
cursor: help; | |||||
border-bottom: 1px dotted @abbr-border-color; | |||||
} | |||||
.initialism { | |||||
font-size: 90%; | |||||
.text-uppercase(); | |||||
} | |||||
// Blockquotes | |||||
blockquote { | |||||
padding: (@line-height-computed / 2) @line-height-computed; | |||||
margin: 0 0 @line-height-computed; | |||||
font-size: @blockquote-font-size; | |||||
border-left: 5px solid @blockquote-border-color; | |||||
p, | |||||
ul, | |||||
ol { | |||||
&:last-child { | |||||
margin-bottom: 0; | |||||
} | |||||
} | |||||
// Note: Deprecated small and .small as of v3.1.0 | |||||
// Context: https://github.com/twbs/bootstrap/issues/11660 | |||||
footer, | |||||
small, | |||||
.small { | |||||
display: block; | |||||
font-size: 80%; // back to default font-size | |||||
line-height: @line-height-base; | |||||
color: @blockquote-small-color; | |||||
&:before { | |||||
content: '\2014 \00A0'; // em dash, nbsp | |||||
} | |||||
} | |||||
} | |||||
// Opposite alignment of blockquote | |||||
// | |||||
// Heads up: `blockquote.pull-right` has been deprecated as of v3.1.0. | |||||
.blockquote-reverse, | |||||
blockquote.pull-right { | |||||
padding-right: 15px; | |||||
padding-left: 0; | |||||
border-right: 5px solid @blockquote-border-color; | |||||
border-left: 0; | |||||
text-align: right; | |||||
// Account for citation | |||||
footer, | |||||
small, | |||||
.small { | |||||
&:before { content: ''; } | |||||
&:after { | |||||
content: '\00A0 \2014'; // nbsp, em dash | |||||
} | |||||
} | |||||
} | |||||
// Addresses | |||||
address { | |||||
margin-bottom: @line-height-computed; | |||||
font-style: normal; | |||||
line-height: @line-height-base; | |||||
} |
@ -0,0 +1,55 @@ | |||||
// | |||||
// Utility classes | |||||
// -------------------------------------------------- | |||||
// Floats | |||||
// ------------------------- | |||||
.clearfix { | |||||
.clearfix(); | |||||
} | |||||
.center-block { | |||||
.center-block(); | |||||
} | |||||
.pull-right { | |||||
float: right !important; | |||||
} | |||||
.pull-left { | |||||
float: left !important; | |||||
} | |||||
// Toggling content | |||||
// ------------------------- | |||||
// Note: Deprecated .hide in favor of .hidden or .sr-only (as appropriate) in v3.0.1 | |||||
.hide { | |||||
display: none !important; | |||||
} | |||||
.show { | |||||
display: block !important; | |||||
} | |||||
.invisible { | |||||
visibility: hidden; | |||||
} | |||||
.text-hide { | |||||
.text-hide(); | |||||
} | |||||
// Hide from screenreaders and browsers | |||||
// | |||||
// Credit: HTML5 Boilerplate | |||||
.hidden { | |||||
display: none !important; | |||||
} | |||||
// For Affix plugin | |||||
// ------------------------- | |||||
.affix { | |||||
position: fixed; | |||||
} |
@ -0,0 +1,867 @@ | |||||
// | |||||
// Variables | |||||
// -------------------------------------------------- | |||||
//== Colors | |||||
// | |||||
//## Gray and brand colors for use across Bootstrap. | |||||
@gray-base: #000; | |||||
@gray-darker: lighten(@gray-base, 13.5%); // #222 | |||||
@gray-dark: lighten(@gray-base, 20%); // #333 | |||||
@gray: lighten(@gray-base, 33.5%); // #555 | |||||
@gray-light: lighten(@gray-base, 46.7%); // #777 | |||||
@gray-lighter: lighten(@gray-base, 93.5%); // #eee | |||||
@brand-primary: #5cb85c; // #337ab7 | |||||
@brand-success: #5cb85c; | |||||
@brand-info: #5bc0de; | |||||
@brand-warning: #f0ad4e; | |||||
@brand-danger: #d9534f; | |||||
//== Scaffolding | |||||
// | |||||
//## Settings for some of the most global styles. | |||||
//** Background color for `<body>`. | |||||
@body-bg: #fff; | |||||
//** Global text color on `<body>`. | |||||
@text-color: @gray-dark; | |||||
//** Global textual link color. | |||||
@link-color: #0091EA; | |||||
//** Link hover color set via `darken()` function. | |||||
@link-hover-color: darken(@link-color, 15%); | |||||
//** Link hover decoration. | |||||
@link-hover-decoration: underline; | |||||
//== Typography | |||||
// | |||||
//## Font, line-height, and color for body text, headings, and more. | |||||
@font-family-sans-serif: "Open Sans", Arial, sans-serif; | |||||
@font-family-serif: Georgia, "Times New Roman", Times, serif; | |||||
//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`. | |||||
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace; | |||||
@font-family-base: @font-family-sans-serif; | |||||
@font-size-base: 14px; | |||||
@font-size-large: ceil((@font-size-base * 1.25)); // ~18px | |||||
@font-size-small: ceil((@font-size-base * 0.85)); // ~12px | |||||
@font-size-h1: floor((@font-size-base * 2.6)); // ~36px | |||||
@font-size-h2: floor((@font-size-base * 2.15)); // ~30px | |||||
@font-size-h3: ceil((@font-size-base * 1.7)); // ~24px | |||||
@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px | |||||
@font-size-h5: @font-size-base; | |||||
@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px | |||||
//** Unit-less `line-height` for use in components like buttons. | |||||
@line-height-base: 1.428571429; // 20/14 | |||||
//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc. | |||||
@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px | |||||
//** By default, this inherits from the `<body>`. | |||||
@headings-font-family: inherit; | |||||
@headings-font-weight: 300; | |||||
@headings-line-height: 1.1; | |||||
@headings-color: inherit; | |||||
//== Iconography | |||||
// | |||||
//## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower. | |||||
//** Load fonts from this directory. | |||||
@icon-font-path: "../fonts/"; | |||||
//** File name for all font files. | |||||
@icon-font-name: "glyphicons-halflings-regular"; | |||||
//** Element ID within SVG icon file. | |||||
@icon-font-svg-id: "glyphicons_halflingsregular"; | |||||
//== Components | |||||
// | |||||
//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start). | |||||
@padding-base-vertical: 6px; | |||||
@padding-base-horizontal: 12px; | |||||
@padding-large-vertical: 10px; | |||||
@padding-large-horizontal: 16px; | |||||
@padding-small-vertical: 5px; | |||||
@padding-small-horizontal: 10px; | |||||
@padding-xs-vertical: 1px; | |||||
@padding-xs-horizontal: 5px; | |||||
@line-height-large: 1.3333333; // extra decimals for Win 8.1 Chrome | |||||
@line-height-small: 1.5; | |||||
@border-radius-base: 4px; | |||||
@border-radius-large: 6px; | |||||
@border-radius-small: 3px; | |||||
//** Global color for active items (e.g., navs or dropdowns). | |||||
@component-active-color: #fff; | |||||
//** Global background color for active items (e.g., navs or dropdowns). | |||||
@component-active-bg: @brand-primary; | |||||
//** Width of the `border` for generating carets that indicator dropdowns. | |||||
@caret-width-base: 4px; | |||||
//** Carets increase slightly in size for larger components. | |||||
@caret-width-large: 5px; | |||||
//== Tables | |||||
// | |||||
//## Customizes the `.table` component with basic values, each used across all table variations. | |||||
//** Padding for `<th>`s and `<td>`s. | |||||
@table-cell-padding: 8px; | |||||
//** Padding for cells in `.table-condensed`. | |||||
@table-condensed-cell-padding: 5px; | |||||
//** Default background color used for all tables. | |||||
@table-bg: transparent; | |||||
//** Background color used for `.table-striped`. | |||||
@table-bg-accent: #f9f9f9; | |||||
//** Background color used for `.table-hover`. | |||||
@table-bg-hover: #f5f5f5; | |||||
@table-bg-active: @table-bg-hover; | |||||
//** Border color for table and cell borders. | |||||
@table-border-color: #ddd; | |||||
//== Buttons | |||||
// | |||||
//## For each of Bootstrap's buttons, define text, background and border color. | |||||
@btn-font-weight: normal; | |||||
@btn-default-color: #333; | |||||
@btn-default-bg: #fff; | |||||
@btn-default-border: #ccc; | |||||
@btn-primary-color: #fff; | |||||
@btn-primary-bg: @brand-primary; | |||||
@btn-primary-border: darken(@btn-primary-bg, 5%); | |||||
@btn-success-color: #fff; | |||||
@btn-success-bg: @brand-success; | |||||
@btn-success-border: darken(@btn-success-bg, 5%); | |||||
@btn-info-color: #fff; | |||||
@btn-info-bg: @brand-info; | |||||
@btn-info-border: darken(@btn-info-bg, 5%); | |||||
@btn-warning-color: #fff; | |||||
@btn-warning-bg: @brand-warning; | |||||
@btn-warning-border: darken(@btn-warning-bg, 5%); | |||||
@btn-danger-color: #fff; | |||||
@btn-danger-bg: @brand-danger; | |||||
@btn-danger-border: darken(@btn-danger-bg, 5%); | |||||
@btn-link-disabled-color: @gray-light; | |||||
// Allows for customizing button radius independently from global border radius | |||||
@btn-border-radius-base: @border-radius-base; | |||||
@btn-border-radius-large: @border-radius-large; | |||||
@btn-border-radius-small: @border-radius-small; | |||||
//== Forms | |||||
// | |||||
//## | |||||
//** `<input>` background color | |||||
@input-bg: #fff; | |||||
//** `<input disabled>` background color | |||||
@input-bg-disabled: @gray-lighter; | |||||
//** Text color for `<input>`s | |||||
@input-color: @gray; | |||||
//** `<input>` border color | |||||
@input-border: #ccc; | |||||
// TODO: Rename `@input-border-radius` to `@input-border-radius-base` in v4 | |||||
//** Default `.form-control` border radius | |||||
// This has no effect on `<select>`s in some browsers, due to the limited stylability of `<select>`s in CSS. | |||||
@input-border-radius: @border-radius-base; | |||||
//** Large `.form-control` border radius | |||||
@input-border-radius-large: @border-radius-large; | |||||
//** Small `.form-control` border radius | |||||
@input-border-radius-small: @border-radius-small; | |||||
//** Border color for inputs on focus | |||||
@input-border-focus: #66afe9; | |||||
//** Placeholder text color | |||||
@input-color-placeholder: #999; | |||||
//** Default `.form-control` height | |||||
@input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2); | |||||
//** Large `.form-control` height | |||||
@input-height-large: (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2); | |||||
//** Small `.form-control` height | |||||
@input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2); | |||||
//** `.form-group` margin | |||||
@form-group-margin-bottom: 15px; | |||||
@legend-color: @gray-dark; | |||||
@legend-border-color: #e5e5e5; | |||||
//** Background color for textual input addons | |||||
@input-group-addon-bg: @gray-lighter; | |||||
//** Border color for textual input addons | |||||
@input-group-addon-border-color: @input-border; | |||||
//** Disabled cursor for form controls and buttons. | |||||
@cursor-disabled: not-allowed; | |||||
//== Dropdowns | |||||
// | |||||
//## Dropdown menu container and contents. | |||||
//** Background for the dropdown menu. | |||||
@dropdown-bg: #fff; | |||||
//** Dropdown menu `border-color`. | |||||
@dropdown-border: rgba(0,0,0,.15); | |||||
//** Dropdown menu `border-color` **for IE8**. | |||||
@dropdown-fallback-border: #ccc; | |||||
//** Divider color for between dropdown items. | |||||
@dropdown-divider-bg: #e5e5e5; | |||||
//** Dropdown link text color. | |||||
@dropdown-link-color: @gray-dark; | |||||
//** Hover color for dropdown links. | |||||
@dropdown-link-hover-color: darken(@gray-dark, 5%); | |||||
//** Hover background for dropdown links. | |||||
@dropdown-link-hover-bg: #f5f5f5; | |||||
//** Active dropdown menu item text color. | |||||
@dropdown-link-active-color: @component-active-color; | |||||
//** Active dropdown menu item background color. | |||||
@dropdown-link-active-bg: @component-active-bg; | |||||
//** Disabled dropdown menu item background color. | |||||
@dropdown-link-disabled-color: @gray-light; | |||||
//** Text color for headers within dropdown menus. | |||||
@dropdown-header-color: @gray-light; | |||||
//** Deprecated `@dropdown-caret-color` as of v3.1.0 | |||||
@dropdown-caret-color: #000; | |||||
//-- Z-index master list | |||||
// | |||||
// Warning: Avoid customizing these values. They're used for a bird's eye view | |||||
// of components dependent on the z-axis and are designed to all work together. | |||||
// | |||||
// Note: These variables are not generated into the Customizer. | |||||
@zindex-navbar: 1000; | |||||
@zindex-dropdown: 1000; | |||||
@zindex-popover: 1060; | |||||
@zindex-tooltip: 1070; | |||||
@zindex-navbar-fixed: 1030; | |||||
@zindex-modal-background: 1040; | |||||
@zindex-modal: 1050; | |||||
//== Media queries breakpoints | |||||
// | |||||
//## Define the breakpoints at which your layout will change, adapting to different screen sizes. | |||||
// Extra small screen / phone | |||||
//** Deprecated `@screen-xs` as of v3.0.1 | |||||
@screen-xs: 480px; | |||||
//** Deprecated `@screen-xs-min` as of v3.2.0 | |||||
@screen-xs-min: @screen-xs; | |||||
//** Deprecated `@screen-phone` as of v3.0.1 | |||||
@screen-phone: @screen-xs-min; | |||||
// Small screen / tablet | |||||
//** Deprecated `@screen-sm` as of v3.0.1 | |||||
@screen-sm: 768px; | |||||
@screen-sm-min: @screen-sm; | |||||
//** Deprecated `@screen-tablet` as of v3.0.1 | |||||
@screen-tablet: @screen-sm-min; | |||||
// Medium screen / desktop | |||||
//** Deprecated `@screen-md` as of v3.0.1 | |||||
@screen-md: 992px; | |||||
@screen-md-min: @screen-md; | |||||
//** Deprecated `@screen-desktop` as of v3.0.1 | |||||
@screen-desktop: @screen-md-min; | |||||
// Large screen / wide desktop | |||||
//** Deprecated `@screen-lg` as of v3.0.1 | |||||
@screen-lg: 1200px; | |||||
@screen-lg-min: @screen-lg; | |||||
//** Deprecated `@screen-lg-desktop` as of v3.0.1 | |||||
@screen-lg-desktop: @screen-lg-min; | |||||
// So media queries don't overlap when required, provide a maximum | |||||
@screen-xs-max: (@screen-sm-min - 1); | |||||
@screen-sm-max: (@screen-md-min - 1); | |||||
@screen-md-max: (@screen-lg-min - 1); | |||||
//== Grid system | |||||
// | |||||
//## Define your custom responsive grid. | |||||
//** Number of columns in the grid. | |||||
@grid-columns: 12; | |||||
//** Padding between columns. Gets divided in half for the left and right. | |||||
@grid-gutter-width: 30px; | |||||
// Navbar collapse | |||||
//** Point at which the navbar becomes uncollapsed. | |||||
@grid-float-breakpoint: @screen-sm-min; | |||||
//** Point at which the navbar begins collapsing. | |||||
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1); | |||||
//== Container sizes | |||||
// | |||||
//## Define the maximum width of `.container` for different screen sizes. | |||||
// Small screen / tablet | |||||
@container-tablet: (720px + @grid-gutter-width); | |||||
//** For `@screen-sm-min` and up. | |||||
@container-sm: @container-tablet; | |||||
// Medium screen / desktop | |||||
@container-desktop: (940px + @grid-gutter-width); | |||||
//** For `@screen-md-min` and up. | |||||
@container-md: @container-desktop; | |||||
// Large screen / wide desktop | |||||
@container-large-desktop: (1140px + @grid-gutter-width); | |||||
//** For `@screen-lg-min` and up. | |||||
@container-lg: @container-large-desktop; | |||||
//== Navbar | |||||
// | |||||
//## | |||||
// Basics of a navbar | |||||
@navbar-height: 80px; | |||||
@navbar-margin-bottom: @line-height-computed; | |||||
@navbar-border-radius: @border-radius-base; | |||||
@navbar-padding-horizontal: floor((@grid-gutter-width / 2)); | |||||
@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2); | |||||
@navbar-collapse-max-height: 340px; | |||||
@navbar-default-color: #777; | |||||
@navbar-default-bg: #FFF; | |||||
@navbar-default-border: darken(@navbar-default-bg, 6.5%); | |||||
// Navbar links | |||||
@navbar-default-link-color: #777; | |||||
@navbar-default-link-hover-color: #333; | |||||
@navbar-default-link-hover-bg: transparent; | |||||
@navbar-default-link-active-color: #555; | |||||
@navbar-default-link-active-bg: darken(@navbar-default-bg, 6.5%); | |||||
@navbar-default-link-disabled-color: #ccc; | |||||
@navbar-default-link-disabled-bg: transparent; | |||||
// Navbar brand label | |||||
@navbar-default-brand-color: @navbar-default-link-color; | |||||
@navbar-default-brand-hover-color: darken(@navbar-default-brand-color, 10%); | |||||
@navbar-default-brand-hover-bg: transparent; | |||||
// Navbar toggle | |||||
@navbar-default-toggle-hover-bg: #ddd; | |||||
@navbar-default-toggle-icon-bar-bg: #888; | |||||
@navbar-default-toggle-border-color: #ddd; | |||||
//=== Inverted navbar | |||||
// Reset inverted navbar basics | |||||
@navbar-inverse-color: lighten(@gray-light, 15%); | |||||
@navbar-inverse-bg: #222; | |||||
@navbar-inverse-border: darken(@navbar-inverse-bg, 10%); | |||||
// Inverted navbar links | |||||
@navbar-inverse-link-color: lighten(@gray-light, 15%); | |||||
@navbar-inverse-link-hover-color: #fff; | |||||
@navbar-inverse-link-hover-bg: transparent; | |||||
@navbar-inverse-link-active-color: @navbar-inverse-link-hover-color; | |||||
@navbar-inverse-link-active-bg: darken(@navbar-inverse-bg, 10%); | |||||
@navbar-inverse-link-disabled-color: #444; | |||||
@navbar-inverse-link-disabled-bg: transparent; | |||||
// Inverted navbar brand label | |||||
@navbar-inverse-brand-color: @navbar-inverse-link-color; | |||||
@navbar-inverse-brand-hover-color: #fff; | |||||
@navbar-inverse-brand-hover-bg: transparent; | |||||
// Inverted navbar toggle | |||||
@navbar-inverse-toggle-hover-bg: #333; | |||||
@navbar-inverse-toggle-icon-bar-bg: #fff; | |||||
@navbar-inverse-toggle-border-color: #333; | |||||
//== Navs | |||||
// | |||||
//## | |||||
//=== Shared nav styles | |||||
@nav-link-padding: 10px 15px; | |||||
@nav-link-hover-bg: @gray-lighter; | |||||
@nav-disabled-link-color: @gray-light; | |||||
@nav-disabled-link-hover-color: @gray-light; | |||||
//== Tabs | |||||
@nav-tabs-border-color: #ddd; | |||||
@nav-tabs-link-hover-border-color: @gray-lighter; | |||||
@nav-tabs-active-link-hover-bg: @body-bg; | |||||
@nav-tabs-active-link-hover-color: @gray; | |||||
@nav-tabs-active-link-hover-border-color: #ddd; | |||||
@nav-tabs-justified-link-border-color: #ddd; | |||||
@nav-tabs-justified-active-link-border-color: @body-bg; | |||||
//== Pills | |||||
@nav-pills-border-radius: @border-radius-base; | |||||
@nav-pills-active-link-hover-bg: @component-active-bg; | |||||
@nav-pills-active-link-hover-color: @component-active-color; | |||||
//== Pagination | |||||
// | |||||
//## | |||||
@pagination-color: @link-color; | |||||
@pagination-bg: #fff; | |||||
@pagination-border: #ddd; | |||||
@pagination-hover-color: @link-hover-color; | |||||
@pagination-hover-bg: @gray-lighter; | |||||
@pagination-hover-border: #ddd; | |||||
@pagination-active-color: #fff; | |||||
@pagination-active-bg: @brand-primary; | |||||
@pagination-active-border: @brand-primary; | |||||
@pagination-disabled-color: @gray-light; | |||||
@pagination-disabled-bg: #fff; | |||||
@pagination-disabled-border: #ddd; | |||||
//== Pager | |||||
// | |||||
//## | |||||
@pager-bg: @pagination-bg; | |||||
@pager-border: @pagination-border; | |||||
@pager-border-radius: 15px; | |||||
@pager-hover-bg: @pagination-hover-bg; | |||||
@pager-active-bg: @pagination-active-bg; | |||||
@pager-active-color: @pagination-active-color; | |||||
@pager-disabled-color: @pagination-disabled-color; | |||||
//== Jumbotron | |||||
// | |||||
//## | |||||
@jumbotron-padding: 30px; | |||||
@jumbotron-color: inherit; | |||||
@jumbotron-bg: @gray-lighter; | |||||
@jumbotron-heading-color: inherit; | |||||
@jumbotron-font-size: ceil((@font-size-base * 1.5)); | |||||
@jumbotron-heading-font-size: ceil((@font-size-base * 4.5)); | |||||
//== Form states and alerts | |||||
// | |||||
//## Define colors for form feedback states and, by default, alerts. | |||||
@state-success-text: #3c763d; | |||||
@state-success-bg: #dff0d8; | |||||
@state-success-border: darken(spin(@state-success-bg, -10), 5%); | |||||
@state-info-text: #31708f; | |||||
@state-info-bg: #d9edf7; | |||||
@state-info-border: darken(spin(@state-info-bg, -10), 7%); | |||||
@state-warning-text: #8a6d3b; | |||||
@state-warning-bg: #fcf8e3; | |||||
@state-warning-border: darken(spin(@state-warning-bg, -10), 5%); | |||||
@state-danger-text: #a94442; | |||||
@state-danger-bg: #f2dede; | |||||
@state-danger-border: darken(spin(@state-danger-bg, -10), 5%); | |||||
//== Tooltips | |||||
// | |||||
//## | |||||
//** Tooltip max width | |||||
@tooltip-max-width: 200px; | |||||
//** Tooltip text color | |||||
@tooltip-color: #fff; | |||||
//** Tooltip background color | |||||
@tooltip-bg: #000; | |||||
@tooltip-opacity: .9; | |||||
//** Tooltip arrow width | |||||
@tooltip-arrow-width: 5px; | |||||
//** Tooltip arrow color | |||||
@tooltip-arrow-color: @tooltip-bg; | |||||
//== Popovers | |||||
// | |||||
//## | |||||
//** Popover body background color | |||||
@popover-bg: #fff; | |||||
//** Popover maximum width | |||||
@popover-max-width: 276px; | |||||
//** Popover border color | |||||
@popover-border-color: rgba(0,0,0,.2); | |||||
//** Popover fallback border color | |||||
@popover-fallback-border-color: #ccc; | |||||
//** Popover title background color | |||||
@popover-title-bg: darken(@popover-bg, 3%); | |||||
//** Popover arrow width | |||||
@popover-arrow-width: 10px; | |||||
//** Popover arrow color | |||||
@popover-arrow-color: @popover-bg; | |||||
//** Popover outer arrow width | |||||
@popover-arrow-outer-width: (@popover-arrow-width + 1); | |||||
//** Popover outer arrow color | |||||
@popover-arrow-outer-color: fadein(@popover-border-color, 5%); | |||||
//** Popover outer arrow fallback color | |||||
@popover-arrow-outer-fallback-color: darken(@popover-fallback-border-color, 20%); | |||||
//== Labels | |||||
// | |||||
//## | |||||
//** Default label background color | |||||
@label-default-bg: @gray-light; | |||||
//** Primary label background color | |||||
@label-primary-bg: @brand-primary; | |||||
//** Success label background color | |||||
@label-success-bg: @brand-success; | |||||
//** Info label background color | |||||
@label-info-bg: @brand-info; | |||||
//** Warning label background color | |||||
@label-warning-bg: @brand-warning; | |||||
//** Danger label background color | |||||
@label-danger-bg: @brand-danger; | |||||
//** Default label text color | |||||
@label-color: #fff; | |||||
//** Default text color of a linked label | |||||
@label-link-hover-color: #fff; | |||||
//== Modals | |||||
// | |||||
//## | |||||
//** Padding applied to the modal body | |||||
@modal-inner-padding: 15px; | |||||
//** Padding applied to the modal title | |||||
@modal-title-padding: 15px; | |||||
//** Modal title line-height | |||||
@modal-title-line-height: @line-height-base; | |||||
//** Background color of modal content area | |||||
@modal-content-bg: #fff; | |||||
//** Modal content border color | |||||
@modal-content-border-color: rgba(0,0,0,.2); | |||||
//** Modal content border color **for IE8** | |||||
@modal-content-fallback-border-color: #999; | |||||
//** Modal backdrop background color | |||||
@modal-backdrop-bg: #000; | |||||
//** Modal backdrop opacity | |||||
@modal-backdrop-opacity: .5; | |||||
//** Modal header border color | |||||
@modal-header-border-color: #e5e5e5; | |||||
//** Modal footer border color | |||||
@modal-footer-border-color: @modal-header-border-color; | |||||
@modal-lg: 900px; | |||||
@modal-md: 600px; | |||||
@modal-sm: 300px; | |||||
//== Alerts | |||||
// | |||||
//## Define alert colors, border radius, and padding. | |||||
@alert-padding: 15px; | |||||
@alert-border-radius: @border-radius-base; | |||||
@alert-link-font-weight: bold; | |||||
@alert-success-bg: @state-success-bg; | |||||
@alert-success-text: @state-success-text; | |||||
@alert-success-border: @state-success-border; | |||||
@alert-info-bg: @state-info-bg; | |||||
@alert-info-text: @state-info-text; | |||||
@alert-info-border: @state-info-border; | |||||
@alert-warning-bg: @state-warning-bg; | |||||
@alert-warning-text: @state-warning-text; | |||||
@alert-warning-border: @state-warning-border; | |||||
@alert-danger-bg: @state-danger-bg; | |||||
@alert-danger-text: @state-danger-text; | |||||
@alert-danger-border: @state-danger-border; | |||||
//== Progress bars | |||||
// | |||||
//## | |||||
//** Background color of the whole progress component | |||||
@progress-bg: #f5f5f5; | |||||
//** Progress bar text color | |||||
@progress-bar-color: #fff; | |||||
//** Variable for setting rounded corners on progress bar. | |||||
@progress-border-radius: @border-radius-base; | |||||
//** Default progress bar color | |||||
@progress-bar-bg: @brand-primary; | |||||
//** Success progress bar color | |||||
@progress-bar-success-bg: @brand-success; | |||||
//** Warning progress bar color | |||||
@progress-bar-warning-bg: @brand-warning; | |||||
//** Danger progress bar color | |||||
@progress-bar-danger-bg: @brand-danger; | |||||
//** Info progress bar color | |||||
@progress-bar-info-bg: @brand-info; | |||||
//== List group | |||||
// | |||||
//## | |||||
//** Background color on `.list-group-item` | |||||
@list-group-bg: #fff; | |||||
//** `.list-group-item` border color | |||||
@list-group-border: #ddd; | |||||
//** List group border radius | |||||
@list-group-border-radius: @border-radius-base; | |||||
//** Background color of single list items on hover | |||||
@list-group-hover-bg: #f5f5f5; | |||||
//** Text color of active list items | |||||
@list-group-active-color: @component-active-color; | |||||
//** Background color of active list items | |||||
@list-group-active-bg: @component-active-bg; | |||||
//** Border color of active list elements | |||||
@list-group-active-border: @list-group-active-bg; | |||||
//** Text color for content within active list items | |||||
@list-group-active-text-color: lighten(@list-group-active-bg, 40%); | |||||
//** Text color of disabled list items | |||||
@list-group-disabled-color: @gray-light; | |||||
//** Background color of disabled list items | |||||
@list-group-disabled-bg: @gray-lighter; | |||||
//** Text color for content within disabled list items | |||||
@list-group-disabled-text-color: @list-group-disabled-color; | |||||
@list-group-link-color: #555; | |||||
@list-group-link-hover-color: @list-group-link-color; | |||||
@list-group-link-heading-color: #333; | |||||
//== Panels | |||||
// | |||||
//## | |||||
@panel-bg: #fff; | |||||
@panel-body-padding: 15px; | |||||
@panel-heading-padding: 10px 15px; | |||||
@panel-footer-padding: @panel-heading-padding; | |||||
@panel-border-radius: @border-radius-base; | |||||
//** Border color for elements within panels | |||||
@panel-inner-border: #ddd; | |||||
@panel-footer-bg: #f5f5f5; | |||||
@panel-default-text: @gray-dark; | |||||
@panel-default-border: #ddd; | |||||
@panel-default-heading-bg: #f5f5f5; | |||||
@panel-primary-text: #fff; | |||||
@panel-primary-border: @brand-primary; | |||||
@panel-primary-heading-bg: @brand-primary; | |||||
@panel-success-text: @state-success-text; | |||||
@panel-success-border: @state-success-border; | |||||
@panel-success-heading-bg: @state-success-bg; | |||||
@panel-info-text: @state-info-text; | |||||
@panel-info-border: @state-info-border; | |||||
@panel-info-heading-bg: @state-info-bg; | |||||
@panel-warning-text: @state-warning-text; | |||||
@panel-warning-border: @state-warning-border; | |||||
@panel-warning-heading-bg: @state-warning-bg; | |||||
@panel-danger-text: @state-danger-text; | |||||
@panel-danger-border: @state-danger-border; | |||||
@panel-danger-heading-bg: @state-danger-bg; | |||||
//== Thumbnails | |||||
// | |||||
//## | |||||
//** Padding around the thumbnail image | |||||
@thumbnail-padding: 4px; | |||||
//** Thumbnail background color | |||||
@thumbnail-bg: @body-bg; | |||||
//** Thumbnail border color | |||||
@thumbnail-border: #ddd; | |||||
//** Thumbnail border radius | |||||
@thumbnail-border-radius: @border-radius-base; | |||||
//** Custom text color for thumbnail captions | |||||
@thumbnail-caption-color: @text-color; | |||||
//** Padding around the thumbnail caption | |||||
@thumbnail-caption-padding: 9px; | |||||
//== Wells | |||||
// | |||||
//## | |||||
@well-bg: #f5f5f5; | |||||
@well-border: darken(@well-bg, 7%); | |||||
//== Badges | |||||
// | |||||
//## | |||||
@badge-color: #fff; | |||||
//** Linked badge text color on hover | |||||
@badge-link-hover-color: #fff; | |||||
@badge-bg: @gray-light; | |||||
//** Badge text color in active nav link | |||||
@badge-active-color: @link-color; | |||||
//** Badge background color in active nav link | |||||
@badge-active-bg: #fff; | |||||
@badge-font-weight: bold; | |||||
@badge-line-height: 1; | |||||
@badge-border-radius: 10px; | |||||
//== Breadcrumbs | |||||
// | |||||
//## | |||||
@breadcrumb-padding-vertical: 8px; | |||||
@breadcrumb-padding-horizontal: 15px; | |||||
//** Breadcrumb background color | |||||
@breadcrumb-bg: #f5f5f5; | |||||
//** Breadcrumb text color | |||||
@breadcrumb-color: #ccc; | |||||
//** Text color of current page in the breadcrumb | |||||
@breadcrumb-active-color: @gray-light; | |||||
//** Textual separator for between breadcrumb elements | |||||
@breadcrumb-separator: "/"; | |||||
//== Carousel | |||||
// | |||||
//## | |||||
@carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6); | |||||
@carousel-control-color: #fff; | |||||
@carousel-control-width: 15%; | |||||
@carousel-control-opacity: .5; | |||||
@carousel-control-font-size: 20px; | |||||
@carousel-indicator-active-bg: #fff; | |||||
@carousel-indicator-border-color: #fff; | |||||
@carousel-caption-color: #fff; | |||||
//== Close | |||||
// | |||||
//## | |||||
@close-font-weight: bold; | |||||
@close-color: #000; | |||||
@close-text-shadow: 0 1px 0 #fff; | |||||
//== Code | |||||
// | |||||
//## | |||||
@code-color: #222; | |||||
@code-bg: transparent; | |||||
@kbd-color: #fff; | |||||
@kbd-bg: #333; | |||||
@pre-bg: #f5f5f5; | |||||
@pre-color: @gray-dark; | |||||
@pre-border-color: #ccc; | |||||
@pre-scrollable-max-height: 340px; | |||||
//== Type | |||||
// | |||||
//## | |||||
//** Horizontal offset for forms and lists. | |||||
@component-offset-horizontal: 180px; | |||||
//** Text muted color | |||||
@text-muted: @gray-light; | |||||
//** Abbreviations and acronyms border color | |||||
@abbr-border-color: @gray-light; | |||||
//** Headings small color | |||||
@headings-small-color: @gray-light; | |||||
//** Blockquote small color | |||||
@blockquote-small-color: @gray-light; | |||||
//** Blockquote font size | |||||
@blockquote-font-size: (@font-size-base * 1.25); | |||||
//** Blockquote border color | |||||
@blockquote-border-color: @gray-lighter; | |||||
//** Page header border color | |||||
@page-header-border-color: @gray-lighter; | |||||
//** Width of horizontal description list titles | |||||
@dl-horizontal-offset: @component-offset-horizontal; | |||||
//** Horizontal line color. | |||||
@hr-border: @gray-lighter; |
@ -0,0 +1,29 @@ | |||||
// | |||||
// Wells | |||||
// -------------------------------------------------- | |||||
// Base class | |||||
.well { | |||||
min-height: 20px; | |||||
padding: 19px; | |||||
margin-bottom: 20px; | |||||
background-color: @well-bg; | |||||
border: 1px solid @well-border; | |||||
border-radius: @border-radius-base; | |||||
.box-shadow(inset 0 1px 1px rgba(0,0,0,.05)); | |||||
blockquote { | |||||
border-color: #ddd; | |||||
border-color: rgba(0,0,0,.15); | |||||
} | |||||
} | |||||
// Sizes | |||||
.well-lg { | |||||
padding: 24px; | |||||
border-radius: @border-radius-large; | |||||
} | |||||
.well-sm { | |||||
padding: 9px; | |||||
border-radius: @border-radius-small; | |||||
} |