Oops, something went wrong.
| @@ -0,0 +1,33 @@ | ||
| +// ACCORDION | ||
| +// --------- | ||
| + | ||
| + | ||
| +// Parent container | ||
| +.accordion { | ||
| + margin-bottom: @baseLineHeight; | ||
| +} | ||
| + | ||
| +// Group == heading + body | ||
| +.accordion-group { | ||
| + margin-bottom: 2px; | ||
| + border: 1px solid #e5e5e5; | ||
| + .border-radius(4px); | ||
| +} | ||
| +.accordion-heading { | ||
| + border-bottom: 0; | ||
| +} | ||
| +.accordion-heading .accordion-toggle { | ||
| + display: block; | ||
| + padding: 8px 15px; | ||
| +} | ||
| + | ||
| +// General toggle styles | ||
| +.accordion-toggle { | ||
| + cursor: pointer; | ||
| +} | ||
| + | ||
| +// Inner needs the styles because you can't animate properly with any styles on the element | ||
| +.accordion-inner { | ||
| + padding: 9px 15px; | ||
| + border-top: 1px solid #e5e5e5; | ||
| +} |
| @@ -0,0 +1,58 @@ | ||
| +// ALERT STYLES | ||
| +// ------------ | ||
| + | ||
| +// Base alert styles | ||
| +.alert { | ||
| + padding: 8px 35px 8px 14px; | ||
| + margin-bottom: @baseLineHeight; | ||
| + text-shadow: 0 1px 0 rgba(255,255,255,.5); | ||
| + background-color: @warningBackground; | ||
| + border: 1px solid @warningBorder; | ||
| + .border-radius(4px); | ||
| + color: @warningText; | ||
| +} | ||
| +.alert-heading { | ||
| + color: inherit; | ||
| +} | ||
| + | ||
| +// Adjust close link position | ||
| +.alert .close { | ||
| + position: relative; | ||
| + top: -2px; | ||
| + right: -21px; | ||
| + line-height: 18px; | ||
| +} | ||
| + | ||
| +// Alternate styles | ||
| +// ---------------- | ||
| + | ||
| +.alert-success { | ||
| + background-color: @successBackground; | ||
| + border-color: @successBorder; | ||
| + color: @successText; | ||
| +} | ||
| +.alert-danger, | ||
| +.alert-error { | ||
| + background-color: @errorBackground; | ||
| + border-color: @errorBorder; | ||
| + color: @errorText; | ||
| +} | ||
| +.alert-info { | ||
| + background-color: @infoBackground; | ||
| + border-color: @infoBorder; | ||
| + color: @infoText; | ||
| +} | ||
| + | ||
| +// Block alerts | ||
| +// ------------------------ | ||
| +.alert-block { | ||
| + padding-top: 14px; | ||
| + padding-bottom: 14px; | ||
| +} | ||
| +.alert-block > p, | ||
| +.alert-block > ul { | ||
| + margin-bottom: 0; | ||
| +} | ||
| +.alert-block p + p { | ||
| + margin-top: 5px; | ||
| +} |
| @@ -0,0 +1,24 @@ | ||
| +// BREADCRUMBS | ||
| +// ----------- | ||
| + | ||
| +.breadcrumb { | ||
| + padding: 7px 14px; | ||
| + margin: 0 0 @baseLineHeight; | ||
| + list-style: none; | ||
| + #gradient > .vertical(@white, #f5f5f5); | ||
| + border: 1px solid #ddd; | ||
| + .border-radius(3px); | ||
| + .box-shadow(inset 0 1px 0 @white); | ||
| + li { | ||
| + display: inline-block; | ||
| + .ie7-inline-block(); | ||
| + text-shadow: 0 1px 0 @white; | ||
| + } | ||
| + .divider { | ||
| + padding: 0 5px; | ||
| + color: @grayLight; | ||
| + } | ||
| + .active a { | ||
| + color: @grayDark; | ||
| + } | ||
| +} |
| @@ -0,0 +1,191 @@ | ||
| +// BUTTON GROUPS | ||
| +// ------------- | ||
| + | ||
| + | ||
| +// Make the div behave like a button | ||
| +.btn-group { | ||
| + position: relative; | ||
| + .clearfix(); // clears the floated buttons | ||
| + .ie7-restore-left-whitespace(); | ||
| +} | ||
| + | ||
| +// Space out series of button groups | ||
| +.btn-group + .btn-group { | ||
| + margin-left: 5px; | ||
| +} | ||
| + | ||
| +// Optional: Group multiple button groups together for a toolbar | ||
| +.btn-toolbar { | ||
| + margin-top: @baseLineHeight / 2; | ||
| + margin-bottom: @baseLineHeight / 2; | ||
| + .btn-group { | ||
| + display: inline-block; | ||
| + .ie7-inline-block(); | ||
| + } | ||
| +} | ||
| + | ||
| +// Float them, remove border radius, then re-add to first and last elements | ||
| +.btn-group > .btn { | ||
| + position: relative; | ||
| + float: left; | ||
| + margin-left: -1px; | ||
| + .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; | ||
| + -webkit-border-top-left-radius: 4px; | ||
| + -moz-border-radius-topleft: 4px; | ||
| + border-top-left-radius: 4px; | ||
| + -webkit-border-bottom-left-radius: 4px; | ||
| + -moz-border-radius-bottomleft: 4px; | ||
| + border-bottom-left-radius: 4px; | ||
| +} | ||
| +// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it | ||
| +.btn-group > .btn:last-child, | ||
| +.btn-group > .dropdown-toggle { | ||
| + -webkit-border-top-right-radius: 4px; | ||
| + -moz-border-radius-topright: 4px; | ||
| + border-top-right-radius: 4px; | ||
| + -webkit-border-bottom-right-radius: 4px; | ||
| + -moz-border-radius-bottomright: 4px; | ||
| + border-bottom-right-radius: 4px; | ||
| +} | ||
| +// Reset corners for large buttons | ||
| +.btn-group > .btn.large:first-child { | ||
| + margin-left: 0; | ||
| + -webkit-border-top-left-radius: 6px; | ||
| + -moz-border-radius-topleft: 6px; | ||
| + border-top-left-radius: 6px; | ||
| + -webkit-border-bottom-left-radius: 6px; | ||
| + -moz-border-radius-bottomleft: 6px; | ||
| + border-bottom-left-radius: 6px; | ||
| +} | ||
| +.btn-group > .btn.large:last-child, | ||
| +.btn-group > .large.dropdown-toggle { | ||
| + -webkit-border-top-right-radius: 6px; | ||
| + -moz-border-radius-topright: 6px; | ||
| + border-top-right-radius: 6px; | ||
| + -webkit-border-bottom-right-radius: 6px; | ||
| + -moz-border-radius-bottomright: 6px; | ||
| + border-bottom-right-radius: 6px; | ||
| +} | ||
| + | ||
| +// On hover/focus/active, bring the proper btn to front | ||
| +.btn-group > .btn:hover, | ||
| +.btn-group > .btn:focus, | ||
| +.btn-group > .btn:active, | ||
| +.btn-group > .btn.active { | ||
| + z-index: 2; | ||
| +} | ||
| + | ||
| +// On active and open, don't show outline | ||
| +.btn-group .dropdown-toggle:active, | ||
| +.btn-group.open .dropdown-toggle { | ||
| + outline: 0; | ||
| +} | ||
| + | ||
| + | ||
| + | ||
| +// Split button dropdowns | ||
| +// ---------------------- | ||
| + | ||
| +// Give the line between buttons some depth | ||
| +.btn-group > .dropdown-toggle { | ||
| + padding-left: 8px; | ||
| + padding-right: 8px; | ||
| + .box-shadow(~"inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)"); | ||
| + *padding-top: 4px; | ||
| + *padding-bottom: 4px; | ||
| +} | ||
| +.btn-group > .btn-mini.dropdown-toggle { | ||
| + padding-left: 5px; | ||
| + padding-right: 5px; | ||
| +} | ||
| +.btn-group > .btn-small.dropdown-toggle { | ||
| + *padding-top: 4px; | ||
| + *padding-bottom: 4px; | ||
| +} | ||
| +.btn-group > .btn-large.dropdown-toggle { | ||
| + padding-left: 12px; | ||
| + padding-right: 12px; | ||
| +} | ||
| + | ||
| +.btn-group.open { | ||
| + | ||
| + // The clickable button for toggling the menu | ||
| + // Remove the gradient and set the same inset shadow as the :active state | ||
| + .dropdown-toggle { | ||
| + background-image: none; | ||
| + .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)"); | ||
| + } | ||
| + | ||
| + // Keep the hover's background when dropdown is open | ||
| + .btn.dropdown-toggle { | ||
| + background-color: @btnBackgroundHighlight; | ||
| + } | ||
| + .btn-primary.dropdown-toggle { | ||
| + background-color: @btnPrimaryBackgroundHighlight; | ||
| + } | ||
| + .btn-warning.dropdown-toggle { | ||
| + background-color: @btnWarningBackgroundHighlight; | ||
| + } | ||
| + .btn-danger.dropdown-toggle { | ||
| + background-color: @btnDangerBackgroundHighlight; | ||
| + } | ||
| + .btn-success.dropdown-toggle { | ||
| + background-color: @btnSuccessBackgroundHighlight; | ||
| + } | ||
| + .btn-info.dropdown-toggle { | ||
| + background-color: @btnInfoBackgroundHighlight; | ||
| + } | ||
| + .btn-inverse.dropdown-toggle { | ||
| + background-color: @btnInverseBackgroundHighlight; | ||
| + } | ||
| +} | ||
| + | ||
| + | ||
| +// Reposition the caret | ||
| +.btn .caret { | ||
| + margin-top: 7px; | ||
| + margin-left: 0; | ||
| +} | ||
| +.btn:hover .caret, | ||
| +.open.btn-group .caret { | ||
| + .opacity(100); | ||
| +} | ||
| +// Carets in other button sizes | ||
| +.btn-mini .caret { | ||
| + margin-top: 5px; | ||
| +} | ||
| +.btn-small .caret { | ||
| + margin-top: 6px; | ||
| +} | ||
| +.btn-large .caret { | ||
| + margin-top: 6px; | ||
| + border-left-width: 5px; | ||
| + border-right-width: 5px; | ||
| + border-top-width: 5px; | ||
| +} | ||
| +// Upside down carets for .dropup | ||
| +.dropup .btn-large .caret { | ||
| + border-bottom: 5px solid @black; | ||
| + border-top: 0; | ||
| +} | ||
| + | ||
| + | ||
| + | ||
| +// Account for other colors | ||
| +.btn-primary, | ||
| +.btn-warning, | ||
| +.btn-danger, | ||
| +.btn-info, | ||
| +.btn-success, | ||
| +.btn-inverse { | ||
| + .caret { | ||
| + border-top-color: @white; | ||
| + border-bottom-color: @white; | ||
| + .opacity(75); | ||
| + } | ||
| +} | ||
| + |
| @@ -0,0 +1,191 @@ | ||
| +// BUTTON STYLES | ||
| +// ------------- | ||
| + | ||
| + | ||
| +// Base styles | ||
| +// -------------------------------------------------- | ||
| + | ||
| +// Core | ||
| +.btn { | ||
| + display: inline-block; | ||
| + .ie7-inline-block(); | ||
| + padding: 4px 10px 4px; | ||
| + margin-bottom: 0; // For input.btn | ||
| + font-size: @baseFontSize; | ||
| + line-height: @baseLineHeight; | ||
| + *line-height: 20px; | ||
| + color: @grayDark; | ||
| + text-align: center; | ||
| + text-shadow: 0 1px 1px rgba(255,255,255,.75); | ||
| + vertical-align: middle; | ||
| + cursor: pointer; | ||
| + .buttonBackground(@btnBackground, @btnBackgroundHighlight); | ||
| + border: 1px solid @btnBorder; | ||
| + *border: 0; // Remove the border to prevent IE7's black border on input:focus | ||
| + border-bottom-color: darken(@btnBorder, 10%); | ||
| + .border-radius(4px); | ||
| + .ie7-restore-left-whitespace(); // Give IE7 some love | ||
| + .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)"); | ||
| +} | ||
| + | ||
| +// Hover state | ||
| +.btn:hover { | ||
| + color: @grayDark; | ||
| + text-decoration: none; | ||
| + background-color: darken(@white, 10%); | ||
| + *background-color: darken(@white, 15%); /* Buttons in IE7 don't get borders, so darken on hover */ | ||
| + background-position: 0 -15px; | ||
| + | ||
| + // transition is only when going to hover, otherwise the background | ||
| + // behind the gradient (there for IE<=9 fallback) gets mismatched | ||
| + .transition(background-position .1s linear); | ||
| +} | ||
| + | ||
| +// Focus state for keyboard and accessibility | ||
| +.btn:focus { | ||
| + .tab-focus(); | ||
| +} | ||
| + | ||
| +// Active state | ||
| +.btn.active, | ||
| +.btn:active { | ||
| + background-color: darken(@white, 10%); | ||
| + background-color: darken(@white, 15%) e("\9"); | ||
| + background-image: none; | ||
| + outline: 0; | ||
| + .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)"); | ||
| +} | ||
| + | ||
| +// Disabled state | ||
| +.btn.disabled, | ||
| +.btn[disabled] { | ||
| + cursor: default; | ||
| + background-color: darken(@white, 10%); | ||
| + background-image: none; | ||
| + .opacity(65); | ||
| + .box-shadow(none); | ||
| +} | ||
| + | ||
| + | ||
| +// Button Sizes | ||
| +// -------------------------------------------------- | ||
| + | ||
| +// Large | ||
| +.btn-large { | ||
| + padding: 9px 14px; | ||
| + font-size: @baseFontSize + 2px; | ||
| + line-height: normal; | ||
| + .border-radius(5px); | ||
| +} | ||
| +.btn-large [class^="icon-"] { | ||
| + margin-top: 1px; | ||
| +} | ||
| + | ||
| +// Small | ||
| +.btn-small { | ||
| + padding: 5px 9px; | ||
| + font-size: @baseFontSize - 2px; | ||
| + line-height: @baseLineHeight - 2px; | ||
| +} | ||
| +.btn-small [class^="icon-"] { | ||
| + margin-top: -1px; | ||
| +} | ||
| + | ||
| +// Mini | ||
| +.btn-mini { | ||
| + padding: 2px 6px; | ||
| + font-size: @baseFontSize - 2px; | ||
| + line-height: @baseLineHeight - 4px; | ||
| +} | ||
| + | ||
| + | ||
| +// Alternate buttons | ||
| +// -------------------------------------------------- | ||
| + | ||
| +// Set text color | ||
| +// ------------------------- | ||
| +.btn-primary, | ||
| +.btn-primary:hover, | ||
| +.btn-warning, | ||
| +.btn-warning:hover, | ||
| +.btn-danger, | ||
| +.btn-danger:hover, | ||
| +.btn-success, | ||
| +.btn-success:hover, | ||
| +.btn-info, | ||
| +.btn-info:hover, | ||
| +.btn-inverse, | ||
| +.btn-inverse:hover { | ||
| + color: @white; | ||
| + text-shadow: 0 -1px 0 rgba(0,0,0,.25); | ||
| +} | ||
| +// Provide *some* extra contrast for those who can get it | ||
| +.btn-primary.active, | ||
| +.btn-warning.active, | ||
| +.btn-danger.active, | ||
| +.btn-success.active, | ||
| +.btn-info.active, | ||
| +.btn-inverse.active { | ||
| + color: rgba(255,255,255,.75); | ||
| +} | ||
| + | ||
| +// Set the backgrounds | ||
| +// ------------------------- | ||
| +.btn { | ||
| + // reset here as of 2.0.3 due to Recess property order | ||
| + border-color: #ccc; | ||
| + border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25); | ||
| +} | ||
| +.btn-primary { | ||
| + .buttonBackground(@btnPrimaryBackground, @btnPrimaryBackgroundHighlight); | ||
| +} | ||
| +// Warning appears are orange | ||
| +.btn-warning { | ||
| + .buttonBackground(@btnWarningBackground, @btnWarningBackgroundHighlight); | ||
| +} | ||
| +// Danger and error appear as red | ||
| +.btn-danger { | ||
| + .buttonBackground(@btnDangerBackground, @btnDangerBackgroundHighlight); | ||
| +} | ||
| +// Success appears as green | ||
| +.btn-success { | ||
| + .buttonBackground(@btnSuccessBackground, @btnSuccessBackgroundHighlight); | ||
| +} | ||
| +// Info appears as a neutral blue | ||
| +.btn-info { | ||
| + .buttonBackground(@btnInfoBackground, @btnInfoBackgroundHighlight); | ||
| +} | ||
| +// Inverse appears as dark gray | ||
| +.btn-inverse { | ||
| + .buttonBackground(@btnInverseBackground, @btnInverseBackgroundHighlight); | ||
| +} | ||
| + | ||
| + | ||
| +// Cross-browser Jank | ||
| +// -------------------------------------------------- | ||
| + | ||
| +button.btn, | ||
| +input[type="submit"].btn { | ||
| + | ||
| + // Firefox 3.6 only I believe | ||
| + &::-moz-focus-inner { | ||
| + padding: 0; | ||
| + border: 0; | ||
| + } | ||
| + | ||
| + // IE7 has some default padding on button controls | ||
| + *padding-top: 2px; | ||
| + *padding-bottom: 2px; | ||
| + &.btn-large { | ||
| + *padding-top: 7px; | ||
| + *padding-bottom: 7px; | ||
| + } | ||
| + &.btn-small { | ||
| + *padding-top: 3px; | ||
| + *padding-bottom: 3px; | ||
| + } | ||
| + &.btn-mini { | ||
| + *padding-top: 1px; | ||
| + *padding-bottom: 1px; | ||
| + } | ||
| +} |
| @@ -0,0 +1,121 @@ | ||
| +// CAROUSEL | ||
| +// -------- | ||
| + | ||
| +.carousel { | ||
| + position: relative; | ||
| + margin-bottom: @baseLineHeight; | ||
| + line-height: 1; | ||
| +} | ||
| + | ||
| +.carousel-inner { | ||
| + overflow: hidden; | ||
| + width: 100%; | ||
| + position: relative; | ||
| +} | ||
| + | ||
| +.carousel { | ||
| + | ||
| + .item { | ||
| + display: none; | ||
| + position: relative; | ||
| + .transition(.6s ease-in-out left); | ||
| + } | ||
| + | ||
| + // Account for jankitude on images | ||
| + .item > img { | ||
| + display: block; | ||
| + line-height: 1; | ||
| + } | ||
| + | ||
| + .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: 40%; | ||
| + left: 15px; | ||
| + width: 40px; | ||
| + height: 40px; | ||
| + margin-top: -20px; | ||
| + font-size: 60px; | ||
| + font-weight: 100; | ||
| + line-height: 30px; | ||
| + color: @white; | ||
| + text-align: center; | ||
| + background: @grayDarker; | ||
| + border: 3px solid @white; | ||
| + .border-radius(23px); | ||
| + .opacity(50); | ||
| + | ||
| + // we can't have this transition here | ||
| + // because webkit cancels the carousel | ||
| + // animation if you trip this while | ||
| + // in the middle of another animation | ||
| + // ;_; | ||
| + // .transition(opacity .2s linear); | ||
| + | ||
| + // Reposition the right one | ||
| + &.right { | ||
| + left: auto; | ||
| + right: 15px; | ||
| + } | ||
| + | ||
| + // Hover state | ||
| + &:hover { | ||
| + color: @white; | ||
| + text-decoration: none; | ||
| + .opacity(90); | ||
| + } | ||
| +} | ||
| + | ||
| +// Caption for text below images | ||
| +// ----------------------------- | ||
| + | ||
| +.carousel-caption { | ||
| + position: absolute; | ||
| + left: 0; | ||
| + right: 0; | ||
| + bottom: 0; | ||
| + padding: 10px 15px 5px; | ||
| + background: @grayDark; | ||
| + background: rgba(0,0,0,.75); | ||
| +} | ||
| +.carousel-caption h4, | ||
| +.carousel-caption p { | ||
| + color: @white; | ||
| +} |
| @@ -0,0 +1,29 @@ | ||
| +// CLOSE ICONS | ||
| +// ----------- | ||
| + | ||
| +.close { | ||
| + float: right; | ||
| + font-size: 20px; | ||
| + font-weight: bold; | ||
| + line-height: @baseLineHeight; | ||
| + color: @black; | ||
| + text-shadow: 0 1px 0 rgba(255,255,255,1); | ||
| + .opacity(20); | ||
| + &:hover { | ||
| + color: @black; | ||
| + text-decoration: none; | ||
| + cursor: pointer; | ||
| + .opacity(40); | ||
| + } | ||
| +} | ||
| + | ||
| +// Additional properties for button version | ||
| +// iOS requires the button element instead of an anchor tag. | ||
| +// If you want the anchor version, it requires `href="#"`. | ||
| +button.close { | ||
| + padding: 0; | ||
| + cursor: pointer; | ||
| + background: transparent; | ||
| + border: 0; | ||
| + -webkit-appearance: none; | ||
| +} |
| @@ -0,0 +1,57 @@ | ||
| +// Code.less | ||
| +// Code typography styles for the <code> and <pre> elements | ||
| +// -------------------------------------------------------- | ||
| + | ||
| +// Inline and block code styles | ||
| +code, | ||
| +pre { | ||
| + padding: 0 3px 2px; | ||
| + #font > #family > .monospace; | ||
| + font-size: @baseFontSize - 1; | ||
| + color: @grayDark; | ||
| + .border-radius(3px); | ||
| +} | ||
| + | ||
| +// Inline code | ||
| +code { | ||
| + padding: 2px 4px; | ||
| + color: #d14; | ||
| + background-color: #f7f7f9; | ||
| + border: 1px solid #e1e1e8; | ||
| +} | ||
| + | ||
| +// Blocks of code | ||
| +pre { | ||
| + display: block; | ||
| + padding: (@baseLineHeight - 1) / 2; | ||
| + margin: 0 0 @baseLineHeight / 2; | ||
| + font-size: @baseFontSize * .925; // 13px to 12px | ||
| + line-height: @baseLineHeight; | ||
| + word-break: break-all; | ||
| + word-wrap: break-word; | ||
| + white-space: pre; | ||
| + white-space: pre-wrap; | ||
| + background-color: #f5f5f5; | ||
| + border: 1px solid #ccc; // fallback for IE7-8 | ||
| + border: 1px solid rgba(0,0,0,.15); | ||
| + .border-radius(4px); | ||
| + | ||
| + // Make prettyprint styles more spaced out for readability | ||
| + &.prettyprint { | ||
| + margin-bottom: @baseLineHeight; | ||
| + } | ||
| + | ||
| + // Account for some code outputs that place code tags in pre tags | ||
| + code { | ||
| + padding: 0; | ||
| + color: inherit; | ||
| + background-color: transparent; | ||
| + border: 0; | ||
| + } | ||
| +} | ||
| + | ||
| +// Enable scrollable blocks of code | ||
| +.pre-scrollable { | ||
| + max-height: 340px; | ||
| + overflow-y: scroll; | ||
| +} |
| @@ -0,0 +1,20 @@ | ||
| +// COMPONENT ANIMATIONS | ||
| +// -------------------- | ||
| + | ||
| +.fade { | ||
| + opacity: 0; | ||
| + .transition(opacity .15s linear); | ||
| + &.in { | ||
| + opacity: 1; | ||
| + } | ||
| +} | ||
| + | ||
| +.collapse { | ||
| + position: relative; | ||
| + height: 0; | ||
| + overflow: hidden; | ||
| + .transition(height .35s ease); | ||
| + &.in { | ||
| + height: auto; | ||
| + } | ||
| +} |
| @@ -0,0 +1,143 @@ | ||
| +// DROPDOWN MENUS | ||
| +// -------------- | ||
| + | ||
| +// Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns | ||
| +.dropup, | ||
| +.dropdown { | ||
| + position: relative; | ||
| +} | ||
| +.dropdown-toggle { | ||
| + // The caret makes the toggle a bit too tall in IE7 | ||
| + *margin-bottom: -3px; | ||
| +} | ||
| +.dropdown-toggle:active, | ||
| +.open .dropdown-toggle { | ||
| + outline: 0; | ||
| +} | ||
| + | ||
| +// Dropdown arrow/caret | ||
| +// -------------------- | ||
| +.caret { | ||
| + display: inline-block; | ||
| + width: 0; | ||
| + height: 0; | ||
| + vertical-align: top; | ||
| + border-top: 4px solid @black; | ||
| + border-right: 4px solid transparent; | ||
| + border-left: 4px solid transparent; | ||
| + content: ""; | ||
| + .opacity(30); | ||
| +} | ||
| + | ||
| +// Place the caret | ||
| +.dropdown .caret { | ||
| + margin-top: 8px; | ||
| + margin-left: 2px; | ||
| +} | ||
| +.dropdown:hover .caret, | ||
| +.open .caret { | ||
| + .opacity(100); | ||
| +} | ||
| + | ||
| +// The dropdown menu (ul) | ||
| +// ---------------------- | ||
| +.dropdown-menu { | ||
| + position: absolute; | ||
| + top: 100%; | ||
| + left: 0; | ||
| + z-index: @zindexDropdown; | ||
| + display: none; // none by default, but block on "open" of the menu | ||
| + float: left; | ||
| + min-width: 160px; | ||
| + padding: 4px 0; | ||
| + margin: 1px 0 0; // override default ul | ||
| + list-style: none; | ||
| + background-color: @dropdownBackground; | ||
| + border: 1px solid #ccc; | ||
| + border: 1px solid rgba(0,0,0,.2); | ||
| + *border-right-width: 2px; | ||
| + *border-bottom-width: 2px; | ||
| + .border-radius(5px); | ||
| + .box-shadow(0 5px 10px rgba(0,0,0,.2)); | ||
| + -webkit-background-clip: padding-box; | ||
| + -moz-background-clip: padding; | ||
| + background-clip: padding-box; | ||
| + | ||
| + // Aligns the dropdown menu to right | ||
| + &.pull-right { | ||
| + right: 0; | ||
| + left: auto; | ||
| + } | ||
| + | ||
| + // Dividers (basically an hr) within the dropdown | ||
| + .divider { | ||
| + .nav-divider(@dropdownDividerTop, @dropdownDividerBottom); | ||
| + } | ||
| + | ||
| + // Links within the dropdown menu | ||
| + a { | ||
| + display: block; | ||
| + padding: 3px 15px; | ||
| + clear: both; | ||
| + font-weight: normal; | ||
| + line-height: @baseLineHeight; | ||
| + color: @dropdownLinkColor; | ||
| + white-space: nowrap; | ||
| + } | ||
| +} | ||
| + | ||
| +// Hover state | ||
| +// ----------- | ||
| +.dropdown-menu li > a:hover, | ||
| +.dropdown-menu .active > a, | ||
| +.dropdown-menu .active > a:hover { | ||
| + color: @dropdownLinkColorHover; | ||
| + text-decoration: none; | ||
| + background-color: @dropdownLinkBackgroundHover; | ||
| +} | ||
| + | ||
| +// Open state for the dropdown | ||
| +// --------------------------- | ||
| +.open { | ||
| + // IE7's z-index only goes to the nearest positioned ancestor, which would | ||
| + // make the menu appear below buttons that appeared later on the page | ||
| + *z-index: @zindexDropdown; | ||
| + | ||
| + & > .dropdown-menu { | ||
| + display: block; | ||
| + } | ||
| +} | ||
| + | ||
| +// 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: 4px solid @black; | ||
| + content: "\2191"; | ||
| + } | ||
| + // Different positioning for bottom up menu | ||
| + .dropdown-menu { | ||
| + top: auto; | ||
| + bottom: 100%; | ||
| + margin-bottom: 1px; | ||
| + } | ||
| +} | ||
| + | ||
| +// Typeahead | ||
| +// --------- | ||
| +.typeahead { | ||
| + margin-top: 2px; // give it some space to breathe | ||
| + .border-radius(4px); | ||
| +} |
| @@ -0,0 +1,5 @@ | ||
| +// Fixed (940px) | ||
| +#grid > .core(@gridColumnWidth, @gridGutterWidth); | ||
| + | ||
| +// Fluid (940px) | ||
| +#grid > .fluid(@fluidGridColumnWidth, @fluidGridGutterWidth); |
| @@ -0,0 +1,22 @@ | ||
| +// HERO UNIT | ||
| +// --------- | ||
| + | ||
| +.hero-unit { | ||
| + padding: 60px; | ||
| + margin-bottom: 30px; | ||
| + background-color: @heroUnitBackground; | ||
| + .border-radius(6px); | ||
| + h1 { | ||
| + margin-bottom: 0; | ||
| + font-size: 60px; | ||
| + line-height: 1; | ||
| + color: @heroUnitHeadingColor; | ||
| + letter-spacing: -1px; | ||
| + } | ||
| + p { | ||
| + font-size: 18px; | ||
| + font-weight: 200; | ||
| + line-height: @baseLineHeight * 1.5; | ||
| + color: @heroUnitLeadColor; | ||
| + } | ||
| +} |
| @@ -0,0 +1,234 @@ | ||
| +/*! fancyBox v2.0.6 fancyapps.com | fancyapps.com/fancybox/#license */ | ||
| +.fancybox-tmp iframe, .fancybox-tmp object { | ||
| + vertical-align: top; | ||
| + padding: 0; | ||
| + margin: 0; | ||
| +} | ||
| + | ||
| +.fancybox-wrap { | ||
| + position: absolute; | ||
| + top: 0; | ||
| + left: 0; | ||
| + z-index: 8020; | ||
| +} | ||
| + | ||
| +.fancybox-skin { | ||
| + position: relative; | ||
| + padding: 0; | ||
| + margin: 0; | ||
| + background: #f9f9f9; | ||
| + color: #444; | ||
| + text-shadow: none; | ||
| + -webkit-border-radius: 4px; | ||
| + -moz-border-radius: 4px; | ||
| + border-radius: 4px; | ||
| +} | ||
| + | ||
| +.fancybox-opened { | ||
| + z-index: 8030; | ||
| +} | ||
| + | ||
| +.fancybox-opened .fancybox-skin { | ||
| + -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); | ||
| + -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); | ||
| + box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); | ||
| +} | ||
| + | ||
| +.fancybox-outer, .fancybox-inner { | ||
| + padding: 0; | ||
| + margin: 0; | ||
| + position: relative; | ||
| + outline: none; | ||
| +} | ||
| + | ||
| +.fancybox-inner { | ||
| + overflow: hidden; | ||
| +} | ||
| + | ||
| +.fancybox-type-iframe .fancybox-inner { | ||
| + -webkit-overflow-scrolling: touch; | ||
| +} | ||
| + | ||
| +.fancybox-error { | ||
| + color: #444; | ||
| + font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; | ||
| + margin: 0; | ||
| + padding: 10px; | ||
| +} | ||
| + | ||
| +.fancybox-image, .fancybox-iframe { | ||
| + display: block; | ||
| + width: 100%; | ||
| + height: 100%; | ||
| + border: 0; | ||
| + padding: 0; | ||
| + margin: 0; | ||
| + vertical-align: top; | ||
| +} | ||
| + | ||
| +.fancybox-image { | ||
| + max-width: 100%; | ||
| + max-height: 100%; | ||
| +} | ||
| + | ||
| +#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span { | ||
| + background-image: url('/images/icons/fancybox_sprite.png'); | ||
| +} | ||
| + | ||
| +#fancybox-loading { | ||
| + position: fixed; | ||
| + top: 50%; | ||
| + left: 50%; | ||
| + margin-top: -22px; | ||
| + margin-left: -22px; | ||
| + background-position: 0 -108px; | ||
| + opacity: 0.8; | ||
| + cursor: pointer; | ||
| + z-index: 8020; | ||
| +} | ||
| + | ||
| +#fancybox-loading div { | ||
| + width: 44px; | ||
| + height: 44px; | ||
| + background: url('/images/icons/fancybox_loading.gif') center center no-repeat; | ||
| +} | ||
| + | ||
| +.fancybox-close { | ||
| + position: absolute; | ||
| + top: -18px; | ||
| + right: -18px; | ||
| + width: 36px; | ||
| + height: 36px; | ||
| + cursor: pointer; | ||
| + z-index: 8040; | ||
| +} | ||
| + | ||
| +.fancybox-nav { | ||
| + position: absolute; | ||
| + top: 0; | ||
| + width: 40%; | ||
| + height: 100%; | ||
| + cursor: pointer; | ||
| + background: transparent url('/images/icons/blank.gif'); /* helps IE */ | ||
| + -webkit-tap-highlight-color: rgba(0,0,0,0); | ||
| + z-index: 8040; | ||
| +} | ||
| + | ||
| +.fancybox-prev { | ||
| + left: 0; | ||
| +} | ||
| + | ||
| +.fancybox-next { | ||
| + right: 0; | ||
| +} | ||
| + | ||
| +.fancybox-nav span { | ||
| + position: absolute; | ||
| + top: 50%; | ||
| + width: 36px; | ||
| + height: 34px; | ||
| + margin-top: -18px; | ||
| + cursor: pointer; | ||
| + z-index: 8040; | ||
| + visibility: hidden; | ||
| +} | ||
| + | ||
| +.fancybox-prev span { | ||
| + left: 20px; | ||
| + background-position: 0 -36px; | ||
| +} | ||
| + | ||
| +.fancybox-next span { | ||
| + right: 20px; | ||
| + background-position: 0 -72px; | ||
| +} | ||
| + | ||
| +.fancybox-nav:hover span { | ||
| + visibility: visible; | ||
| +} | ||
| + | ||
| +.fancybox-tmp { | ||
| + position: absolute; | ||
| + top: -9999px; | ||
| + left: -9999px; | ||
| + padding: 0; | ||
| + overflow: visible; | ||
| + visibility: hidden; | ||
| +} | ||
| + | ||
| +/* Overlay helper */ | ||
| + | ||
| +#fancybox-overlay { | ||
| + position: absolute; | ||
| + top: 0; | ||
| + left: 0; | ||
| + overflow: hidden; | ||
| + display: none; | ||
| + z-index: 8010; | ||
| + background: #000; | ||
| +} | ||
| + | ||
| +#fancybox-overlay.overlay-fixed { | ||
| + position: fixed; | ||
| + bottom: 0; | ||
| + right: 0; | ||
| +} | ||
| + | ||
| +/* Title helper */ | ||
| + | ||
| +.fancybox-title { | ||
| + visibility: hidden; | ||
| + font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; | ||
| + position: relative; | ||
| + text-shadow: none; | ||
| + z-index: 8050; | ||
| +} | ||
| + | ||
| +.fancybox-opened .fancybox-title { | ||
| + visibility: visible; | ||
| +} | ||
| + | ||
| +.fancybox-title-float-wrap { | ||
| + position: absolute; | ||
| + bottom: 0; | ||
| + right: 50%; | ||
| + margin-bottom: -35px; | ||
| + z-index: 8030; | ||
| + text-align: center; | ||
| +} | ||
| + | ||
| +.fancybox-title-float-wrap .child { | ||
| + display: inline-block; | ||
| + margin-right: -100%; | ||
| + padding: 2px 20px; | ||
| + background: transparent; /* Fallback for web browsers that doesn't support RGBa */ | ||
| + background: rgba(0, 0, 0, 0.8); | ||
| + -webkit-border-radius: 15px; | ||
| + -moz-border-radius: 15px; | ||
| + border-radius: 15px; | ||
| + text-shadow: 0 1px 2px #222; | ||
| + color: #FFF; | ||
| + font-weight: bold; | ||
| + line-height: 24px; | ||
| + white-space: nowrap; | ||
| +} | ||
| + | ||
| +.fancybox-title-outside-wrap { | ||
| + position: relative; | ||
| + margin-top: 10px; | ||
| + color: #fff; | ||
| +} | ||
| + | ||
| +.fancybox-title-inside-wrap { | ||
| + margin-top: 10px; | ||
| +} | ||
| + | ||
| +.fancybox-title-over-wrap { | ||
| + position: absolute; | ||
| + bottom: 0; | ||
| + left: 0; | ||
| + color: #fff; | ||
| + padding: 10px; | ||
| + background: #000; | ||
| + background: rgba(0, 0, 0, .8); | ||
| +} |
| @@ -0,0 +1,55 @@ | ||
| +// LABELS & BADGES | ||
| +// --------------- | ||
| + | ||
| +// Base classes | ||
| +.label, | ||
| +.badge { | ||
| + font-size: @baseFontSize * .846; | ||
| + font-weight: bold; | ||
| + line-height: 14px; // ensure proper line-height if floated | ||
| + color: @white; | ||
| + vertical-align: baseline; | ||
| + white-space: nowrap; | ||
| + text-shadow: 0 -1px 0 rgba(0,0,0,.25); | ||
| + background-color: @grayLight; | ||
| +} | ||
| +// Set unique padding and border-radii | ||
| +.label { | ||
| + padding: 1px 4px 2px; | ||
| + .border-radius(3px); | ||
| +} | ||
| +.badge { | ||
| + padding: 1px 9px 2px; | ||
| + .border-radius(9px); | ||
| +} | ||
| + | ||
| +// Hover state, but only for links | ||
| +a { | ||
| + &.label:hover, | ||
| + &.badge:hover { | ||
| + color: @white; | ||
| + text-decoration: none; | ||
| + cursor: pointer; | ||
| + } | ||
| +} | ||
| + | ||
| +// Colors | ||
| +// Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute) | ||
| +.label, | ||
| +.badge { | ||
| + // Important (red) | ||
| + &-important { background-color: @errorText; } | ||
| + &-important[href] { background-color: darken(@errorText, 10%); } | ||
| + // Warnings (orange) | ||
| + &-warning { background-color: @orange; } | ||
| + &-warning[href] { background-color: darken(@orange, 10%); } | ||
| + // Success (green) | ||
| + &-success { background-color: @successText; } | ||
| + &-success[href] { background-color: darken(@successText, 10%); } | ||
| + // Info (turquoise) | ||
| + &-info { background-color: @infoText; } | ||
| + &-info[href] { background-color: darken(@infoText, 10%); } | ||
| + // Inverse (black) | ||
| + &-inverse { background-color: @grayDark; } | ||
| + &-inverse[href] { background-color: darken(@grayDark, 10%); } | ||
| +} |
| @@ -0,0 +1,17 @@ | ||
| +// | ||
| +// Layouts | ||
| +// Fixed-width and fluid (with sidebar) layouts | ||
| +// -------------------------------------------- | ||
| + | ||
| + | ||
| +// Container (centered, fixed-width layouts) | ||
| +.container { | ||
| + .container-fixed(); | ||
| +} | ||
| + | ||
| +// Fluid layouts (left aligned, with sidebar, min- & max-width content) | ||
| +.container-fluid { | ||
| + padding-right: @gridGutterWidth; | ||
| + padding-left: @gridGutterWidth; | ||
| + .clearfix(); | ||
| +} |
| @@ -0,0 +1,90 @@ | ||
| +// MODALS | ||
| +// ------ | ||
| + | ||
| +// Recalculate z-index where appropriate | ||
| +.modal-open { | ||
| + .dropdown-menu { z-index: @zindexDropdown + @zindexModal; } | ||
| + .dropdown.open { *z-index: @zindexDropdown + @zindexModal; } | ||
| + .popover { z-index: @zindexPopover + @zindexModal; } | ||
| + .tooltip { z-index: @zindexTooltip + @zindexModal; } | ||
| +} | ||
| + | ||
| +// Background | ||
| +.modal-backdrop { | ||
| + position: fixed; | ||
| + top: 0; | ||
| + right: 0; | ||
| + bottom: 0; | ||
| + left: 0; | ||
| + z-index: @zindexModalBackdrop; | ||
| + background-color: @black; | ||
| + // Fade for backdrop | ||
| + &.fade { opacity: 0; } | ||
| +} | ||
| + | ||
| +.modal-backdrop, | ||
| +.modal-backdrop.fade.in { | ||
| + .opacity(80); | ||
| +} | ||
| + | ||
| +// Base modal | ||
| +.modal { | ||
| + position: fixed; | ||
| + top: 50%; | ||
| + left: 50%; | ||
| + z-index: @zindexModal; | ||
| + overflow: auto; | ||
| + width: 560px; | ||
| + margin: -250px 0 0 -280px; | ||
| + background-color: @white; | ||
| + border: 1px solid #999; | ||
| + border: 1px solid rgba(0,0,0,.3); | ||
| + *border: 1px solid #999; /* IE6-7 */ | ||
| + .border-radius(6px); | ||
| + .box-shadow(0 3px 7px rgba(0,0,0,0.3)); | ||
| + .background-clip(padding-box); | ||
| + &.fade { | ||
| + .transition(e('opacity .3s linear, top .3s ease-out')); | ||
| + top: -25%; | ||
| + } | ||
| + &.fade.in { top: 50%; } | ||
| +} | ||
| +.modal-header { | ||
| + padding: 9px 15px; | ||
| + border-bottom: 1px solid #eee; | ||
| + // Close icon | ||
| + .close { margin-top: 2px; } | ||
| +} | ||
| + | ||
| +// Body (where all modal content resides) | ||
| +.modal-body { | ||
| + overflow-y: auto; | ||
| + max-height: 400px; | ||
| + padding: 15px; | ||
| +} | ||
| +// Remove bottom margin if need be | ||
| +.modal-form { | ||
| + margin-bottom: 0; | ||
| +} | ||
| + | ||
| +// Footer (for actions) | ||
| +.modal-footer { | ||
| + padding: 14px 15px 15px; | ||
| + margin-bottom: 0; | ||
| + text-align: right; // right align buttons | ||
| + background-color: #f5f5f5; | ||
| + border-top: 1px solid #ddd; | ||
| + .border-radius(0 0 6px 6px); | ||
| + .box-shadow(inset 0 1px 0 @white); | ||
| + .clearfix(); // 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; | ||
| + } | ||
| +} |
| @@ -0,0 +1,361 @@ | ||
| +// NAVBAR (FIXED AND STATIC) | ||
| +// ------------------------- | ||
| + | ||
| + | ||
| +// COMMON STYLES | ||
| +// ------------- | ||
| + | ||
| +.navbar { | ||
| + // Fix for IE7's bad z-indexing so dropdowns don't appear below content that follows the navbar | ||
| + *position: relative; | ||
| + *z-index: 2; | ||
| + | ||
| + overflow: visible; | ||
| + margin-bottom: @baseLineHeight; | ||
| +} | ||
| + | ||
| +// Gradient is applied to it's own element because overflow visible is not honored by IE when filter is present | ||
| +.navbar-inner { | ||
| + min-height: @navbarHeight; | ||
| + padding-left: 20px; | ||
| + padding-right: 20px; | ||
| + #gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground); | ||
| + .border-radius(4px); | ||
| + .box-shadow(~"0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1)"); | ||
| +} | ||
| + | ||
| +// Set width to auto for default container | ||
| +// We then reset it for fixed navbars in the #gridSystem mixin | ||
| +.navbar .container { | ||
| + width: auto; | ||
| +} | ||
| + | ||
| +// Override the default collapsed state | ||
| +.nav-collapse.collapse { | ||
| + height: 0; | ||
| +} | ||
| + | ||
| + | ||
| +// Brand, links, text, and buttons | ||
| +.navbar { | ||
| + color: @navbarText; | ||
| + // Hover and active states | ||
| + .brand:hover { | ||
| + text-decoration: none; | ||
| + } | ||
| + // Website or project name | ||
| + .brand { | ||
| + float: left; | ||
| + display: block; | ||
| + // Vertically center the text given @navbarHeight | ||
| + @elementHeight: 20px; | ||
| + padding: ((@navbarHeight - @elementHeight) / 2) 20px ((@navbarHeight - @elementHeight) / 2 + 2); | ||
| + margin-left: -20px; // negative indent to left-align the text down the page | ||
| + font-size: 20px; | ||
| + font-weight: 600; | ||
| + line-height: 1; | ||
| + color: @navbarBrandColor; | ||
| + } | ||
| + // Plain text in topbar | ||
| + .navbar-text { | ||
| + margin-bottom: 0; | ||
| + line-height: @navbarHeight; | ||
| + } | ||
| + // Janky solution for now to account for links outside the .nav | ||
| + .navbar-link { | ||
| + color: @navbarLinkColor; | ||
| + &:hover { | ||
| + color: @navbarLinkColorHover; | ||
| + } | ||
| + } | ||
| + // Buttons in navbar | ||
| + .btn, | ||
| + .btn-group { | ||
| + .navbarVerticalAlign(30px); // Vertically center in navbar | ||
| + } | ||
| + .btn-group .btn { | ||
| + margin: 0; // then undo the margin here so we don't accidentally double it | ||
| + } | ||
| +} | ||
| + | ||
| +// Navbar forms | ||
| +.navbar-form { | ||
| + margin-bottom: 0; // remove default bottom margin | ||
| + .clearfix(); | ||
| + input, | ||
| + select, | ||
| + .radio, | ||
| + .checkbox { | ||
| + .navbarVerticalAlign(30px); // Vertically center in navbar | ||
| + } | ||
| + input, | ||
| + select { | ||
| + display: inline-block; | ||
| + margin-bottom: 0; | ||
| + } | ||
| + input[type="image"], | ||
| + input[type="checkbox"], | ||
| + input[type="radio"] { | ||
| + margin-top: 3px; | ||
| + } | ||
| + .input-append, | ||
| + .input-prepend { | ||
| + margin-top: 6px; | ||
| + white-space: nowrap; // preven two items from separating within a .navbar-form that has .pull-left | ||
| + input { | ||
| + margin-top: 0; // remove the margin on top since it's on the parent | ||
| + } | ||
| + } | ||
| +} | ||
| + | ||
| +// Navbar search | ||
| +.navbar-search { | ||
| + position: relative; | ||
| + float: left; | ||
| + .navbarVerticalAlign(28px); // Vertically center in navbar | ||
| + margin-bottom: 0; | ||
| + padding-left: 10px; | ||
| + .search-query { | ||
| + padding: 4px 9px; | ||
| + margin: 0; | ||
| + #font > .sans-serif(13px, normal, 1); | ||
| + color: @black; | ||
| + background-color: @navbarSearchBackground; | ||
| + border: 1px solid @navbarSearchBorder; | ||
| + .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15)"); | ||
| + .transition(none); | ||
| + | ||
| + .placeholder(@navbarSearchPlaceholderColor); | ||
| + | ||
| + // Focus states (we use .focused since IE7-8 and down doesn't support :focus) | ||
| + &:focus, | ||
| + &.focused { | ||
| + padding: 5px 10px; | ||
| + color: @grayDark; | ||
| + background-color: @navbarSearchBackgroundFocus; | ||
| + border: 0; | ||
| + .box-shadow(0 0 3px rgba(0,0,0,.15)); | ||
| + outline: 0; | ||
| + } | ||
| + } | ||
| +} | ||
| + | ||
| + | ||
| + | ||
| +// FIXED NAVBAR | ||
| +// ------------ | ||
| + | ||
| +// Shared (top/bottom) styles | ||
| +.navbar-fixed-top, | ||
| +.navbar-fixed-bottom { | ||
| + position: fixed; | ||
| + right: 0; | ||
| + left: 0; | ||
| + z-index: @zindexFixedNavbar; | ||
| + margin-bottom: 0; // remove 18px margin for static navbar | ||
| +} | ||
| +.navbar-fixed-top .navbar-inner, | ||
| +.navbar-fixed-bottom .navbar-inner { | ||
| + padding-left: 0; | ||
| + padding-right: 0; | ||
| + .border-radius(0); | ||
| +} | ||
| + | ||
| +.navbar-fixed-top .container, | ||
| +.navbar-fixed-bottom .container { | ||
| + #grid > .core > .span(@gridColumns); | ||
| +} | ||
| + | ||
| +// Fixed to top | ||
| +.navbar-fixed-top { | ||
| + top: 0; | ||
| +} | ||
| + | ||
| +// Fixed to bottom | ||
| +.navbar-fixed-bottom { | ||
| + bottom: 0; | ||
| +} | ||
| + | ||
| + | ||
| + | ||
| +// NAVIGATION | ||
| +// ---------- | ||
| + | ||
| +.navbar .nav { | ||
| + position: relative; | ||
| + left: 0; | ||
| + display: block; | ||
| + float: left; | ||
| + margin: 0 10px 0 0; | ||
| +} | ||
| +.navbar .nav.pull-right { | ||
| + float: right; // redeclare due to specificity | ||
| +} | ||
| +.navbar .nav > li { | ||
| + display: block; | ||
| + float: left; | ||
| +} | ||
| + | ||
| +// Links | ||
| +.navbar .nav > li > a { | ||
| + float: none; | ||
| + // Vertically center the text given @navbarHeight | ||
| + @elementHeight: 20px; | ||
| + padding: ((@navbarHeight - @elementHeight) / 2 + 2) 10px ((@navbarHeight - @elementHeight) / 2 + 1); | ||
| + line-height: 19px; | ||
| + color: @navbarLinkColor; | ||
| + text-decoration: none; | ||
| + text-shadow: 0 -1px 0 rgba(0,0,0,.25); | ||
| + font-size: 14px; | ||
| + margin: 0; | ||
| +} | ||
| +// Buttons | ||
| +.navbar .btn { | ||
| + display: inline-block; | ||
| + padding: 4px 10px 4px; | ||
| + // Vertically center the button given @navbarHeight | ||
| + @elementHeight: 28px; | ||
| + margin: ((@navbarHeight - @elementHeight) / 2 - 1) 5px ((@navbarHeight - @elementHeight) / 2); | ||
| + line-height: @baseLineHeight; | ||
| +} | ||
| +.navbar .btn-group { | ||
| + margin: 0; | ||
| + // Vertically center the button given @navbarHeight | ||
| + @elementHeight: 28px; | ||
| + padding: ((@navbarHeight - @elementHeight) / 2 - 1) 5px ((@navbarHeight - @elementHeight) / 2); | ||
| +} | ||
| +// Hover | ||
| +.navbar .nav > li > a:hover { | ||
| + background-color: @navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover from .active | ||
| + color: @navbarLinkColorHover; | ||
| + text-decoration: none; | ||
| +} | ||
| + | ||
| +// Active nav items | ||
| +.navbar .nav .active > a, | ||
| +.navbar .nav .active > a:hover { | ||
| + color: @navbarLinkColorActive; | ||
| + text-decoration: none; | ||
| + background-color: @navbarLinkBackgroundActive; | ||
| +} | ||
| + | ||
| +// Dividers (basically a vertical hr) | ||
| +.navbar .divider-vertical { | ||
| + height: @navbarHeight; | ||
| + width: 1px; | ||
| + margin: 0 9px; | ||
| + overflow: hidden; | ||
| + background-color: @navbarBackground; | ||
| + border-right: 1px solid @navbarBackgroundHighlight; | ||
| +} | ||
| + | ||
| +// Secondary (floated right) nav in topbar | ||
| +.navbar .nav.pull-right { | ||
| + margin-left: 10px; | ||
| + margin-right: 0; | ||
| +} | ||
| + | ||
| +// Navbar button for toggling navbar items in responsive layouts | ||
| +// These definitions need to come after '.navbar .btn' | ||
| +.navbar .btn-navbar { | ||
| + display: none; | ||
| + float: right; | ||
| + padding: 8px 10px; | ||
| + margin-left: 5px; | ||
| + margin-right: 5px; | ||
| + .buttonBackground(@navbarBackgroundHighlight, @navbarBackground); | ||
| + .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075)"); | ||
| +} | ||
| +.navbar .btn-navbar .icon-bar { | ||
| + display: block; | ||
| + width: 18px; | ||
| + height: 2px; | ||
| + background-color: #f5f5f5; | ||
| + .border-radius(1px); | ||
| + .box-shadow(0 1px 0 rgba(0,0,0,.25)); | ||
| +} | ||
| +.btn-navbar .icon-bar + .icon-bar { | ||
| + margin-top: 3px; | ||
| +} | ||
| + | ||
| + | ||
| +// Dropdown menus | ||
| +// -------------- | ||
| + | ||
| +// Menu position and menu carets | ||
| +.navbar .dropdown-menu { | ||
| + &:before { | ||
| + content: ''; | ||
| + display: inline-block; | ||
| + border-left: 7px solid transparent; | ||
| + border-right: 7px solid transparent; | ||
| + border-bottom: 7px solid #ccc; | ||
| + border-bottom-color: @dropdownBorder; | ||
| + position: absolute; | ||
| + top: -7px; | ||
| + left: 9px; | ||
| + } | ||
| + &:after { | ||
| + content: ''; | ||
| + display: inline-block; | ||
| + border-left: 6px solid transparent; | ||
| + border-right: 6px solid transparent; | ||
| + border-bottom: 6px solid @dropdownBackground; | ||
| + position: absolute; | ||
| + top: -6px; | ||
| + left: 10px; | ||
| + } | ||
| +} | ||
| +// Menu position and menu caret support for dropups via extra dropup class | ||
| +.navbar-fixed-bottom .dropdown-menu { | ||
| + &:before { | ||
| + border-top: 7px solid #ccc; | ||
| + border-top-color: @dropdownBorder; | ||
| + border-bottom: 0; | ||
| + bottom: -7px; | ||
| + top: auto; | ||
| + } | ||
| + &:after { | ||
| + border-top: 6px solid @dropdownBackground; | ||
| + border-bottom: 0; | ||
| + bottom: -6px; | ||
| + top: auto; | ||
| + } | ||
| +} | ||
| +// Dropdown toggle caret | ||
| +.navbar .nav li.dropdown .dropdown-toggle .caret, | ||
| +.navbar .nav li.dropdown.open .caret { | ||
| + border-top-color: @white; | ||
| + border-bottom-color: @white; | ||
| +} | ||
| +.navbar .nav li.dropdown.active .caret { | ||
| + .opacity(100); | ||
| +} | ||
| + | ||
| +// Remove background color from open dropdown | ||
| +.navbar .nav li.dropdown.open > .dropdown-toggle, | ||
| +.navbar .nav li.dropdown.active > .dropdown-toggle, | ||
| +.navbar .nav li.dropdown.open.active > .dropdown-toggle { | ||
| + background-color: transparent; | ||
| +} | ||
| + | ||
| +// Dropdown link on hover | ||
| +.navbar .nav li.dropdown.active > .dropdown-toggle:hover { | ||
| + color: @white; | ||
| +} | ||
| + | ||
| +// Right aligned menus need alt position | ||
| +// TODO: rejigger this at some point to simplify the selectors | ||
| +.navbar .pull-right .dropdown-menu, | ||
| +.navbar .dropdown-menu.pull-right { | ||
| + left: auto; | ||
| + right: 0; | ||
| + &:before { | ||
| + left: auto; | ||
| + right: 12px; | ||
| + } | ||
| + &:after { | ||
| + left: auto; | ||
| + right: 13px; | ||
| + } | ||
| +} |
| @@ -0,0 +1,365 @@ | ||
| +// NAVIGATIONS | ||
| +// ----------- | ||
| + | ||
| + | ||
| + | ||
| +// BASE CLASS | ||
| +// ---------- | ||
| + | ||
| +.nav { | ||
| + margin-left: 0; | ||
| + margin-bottom: @baseLineHeight; | ||
| + list-style: none; | ||
| +} | ||
| + | ||
| +// Make links block level | ||
| +.nav > li > a { | ||
| + display: block; | ||
| + margin-top: 2px; | ||
| +} | ||
| +.nav > li > a:hover { | ||
| + text-decoration: none; | ||
| + background-color: @grayLighter; | ||
| +} | ||
| + | ||
| +// Redeclare pull classes because of specifity | ||
| +.nav > .pull-right { | ||
| + float: right; | ||
| +} | ||
| + | ||
| +// Nav headers (for dropdowns and lists) | ||
| +.nav .nav-header { | ||
| + display: block; | ||
| + padding: 3px 15px; | ||
| + font-size: 11px; | ||
| + font-weight: bold; | ||
| + line-height: @baseLineHeight; | ||
| + color: @grayLight; | ||
| + text-shadow: 0 1px 0 rgba(255,255,255,.5); | ||
| + text-transform: uppercase; | ||
| +} | ||
| +// Space them out when they follow another list item (link) | ||
| +.nav li + .nav-header { | ||
| + margin-top: 9px; | ||
| +} | ||
| + | ||
| + | ||
| +// NAV LIST | ||
| +// -------- | ||
| + | ||
| +.nav-list { | ||
| + padding-left: 15px; | ||
| + padding-right: 15px; | ||
| + margin-bottom: 0; | ||
| +} | ||
| +.nav-list > li > a, | ||
| +.nav-list .nav-header { | ||
| + margin-left: -15px; | ||
| + margin-right: -15px; | ||
| + text-shadow: 0 1px 0 rgba(255,255,255,.5); | ||
| +} | ||
| +.nav-list > li > a { | ||
| + padding: 3px 15px; | ||
| +} | ||
| +.nav-list > .active > a, | ||
| +.nav-list > .active > a:hover { | ||
| + color: @white; | ||
| + text-shadow: 0 -1px 0 rgba(0,0,0,.2); | ||
| + background-color: @linkColor; | ||
| +} | ||
| +.nav-list [class^="icon-"] { | ||
| + margin-right: 2px; | ||
| +} | ||
| +// Dividers (basically an hr) within the dropdown | ||
| +.nav-list .divider { | ||
| + .nav-divider(); | ||
| +} | ||
| + | ||
| + | ||
| + | ||
| +// TABS AND PILLS | ||
| +// ------------- | ||
| + | ||
| +// Common styles | ||
| +.nav-tabs, | ||
| +.nav-pills { | ||
| + .clearfix(); | ||
| +} | ||
| +.nav-tabs > li, | ||
| +.nav-pills > li { | ||
| + float: left; | ||
| +} | ||
| +.nav-tabs > li > a, | ||
| +.nav-pills > li > a { | ||
| + padding-right: 12px; | ||
| + padding-left: 12px; | ||
| + margin-right: 2px; | ||
| + line-height: 14px; // keeps the overall height an even number | ||
| +} | ||
| + | ||
| +// TABS | ||
| +// ---- | ||
| + | ||
| +// Give the tabs something to sit on | ||
| +.nav-tabs { | ||
| + border-bottom: 1px solid #ddd; | ||
| +} | ||
| +// Make the list-items overlay the bottom border | ||
| +.nav-tabs > li { | ||
| + margin-bottom: -1px; | ||
| +} | ||
| +// Actual tabs (as links) | ||
| +.nav-tabs > li > a { | ||
| + padding-top: 8px; | ||
| + padding-bottom: 8px; | ||
| + line-height: @baseLineHeight; | ||
| + border: 1px solid transparent; | ||
| + .border-radius(4px 4px 0 0); | ||
| + &:hover { | ||
| + border-color: @grayLighter @grayLighter #ddd; | ||
| + } | ||
| +} | ||
| +// Active state, and it's :hover to override normal :hover | ||
| +.nav-tabs > .active > a, | ||
| +.nav-tabs > .active > a:hover { | ||
| + color: @gray; | ||
| + background-color: @white; | ||
| + border: 1px solid #ddd; | ||
| + border-bottom-color: transparent; | ||
| + cursor: default; | ||
| +} | ||
| + | ||
| + | ||
| +// PILLS | ||
| +// ----- | ||
| + | ||
| +// Links rendered as pills | ||
| +.nav-pills > li > a { | ||
| + padding-top: 8px; | ||
| + padding-bottom: 8px; | ||
| + margin-top: 2px; | ||
| + margin-bottom: 2px; | ||
| + .border-radius(5px); | ||
| +} | ||
| + | ||
| +// Active state | ||
| +.nav-pills > .active > a, | ||
| +.nav-pills > .active > a:hover { | ||
| + color: @white; | ||
| + background-color: @linkColor; | ||
| +} | ||
| + | ||
| + | ||
| + | ||
| +// STACKED NAV | ||
| +// ----------- | ||
| + | ||
| +// Stacked tabs and pills | ||
| +.nav-stacked > li { | ||
| + float: none; | ||
| +} | ||
| +.nav-stacked > li > a { | ||
| + margin-right: 0; // no need for the gap between nav items | ||
| + margin-top: 0; | ||
| +} | ||
| + | ||
| +// Tabs | ||
| +.nav-tabs.nav-stacked { | ||
| + border-bottom: 0; | ||
| +} | ||
| +.nav-tabs.nav-stacked > li > a { | ||
| + border: 1px solid #ddd; | ||
| + .border-radius(0); | ||
| +} | ||
| +.nav-tabs.nav-stacked > li:first-child > a { | ||
| + .border-radius(4px 4px 0 0); | ||
| +} | ||
| +.nav-tabs.nav-stacked > li:last-child > a { | ||
| + .border-radius(0 0 4px 4px); | ||
| +} | ||
| +.nav-tabs.nav-stacked > li > a:hover { | ||
| + border-color: #ddd; | ||
| + z-index: 2; | ||
| +} | ||
| + | ||
| +// Pills | ||
| +.nav-pills.nav-stacked > li > a { | ||
| + margin-bottom: 3px; | ||
| +} | ||
| +.nav-pills.nav-stacked > li:last-child > a { | ||
| + margin-bottom: 1px; // decrease margin to match sizing of stacked tabs | ||
| +} | ||
| + | ||
| + | ||
| + | ||
| +// DROPDOWNS | ||
| +// --------- | ||
| + | ||
| +.nav-tabs .dropdown-menu { | ||
| + .border-radius(0 0 5px 5px); // remove the top rounded corners here since there is a hard edge above the menu | ||
| +} | ||
| +.nav-pills .dropdown-menu { | ||
| + .border-radius(4px); // make rounded corners match the pills | ||
| +} | ||
| + | ||
| +// Default dropdown links | ||
| +// ------------------------- | ||
| +// Make carets use linkColor to start | ||
| +.nav-tabs .dropdown-toggle .caret, | ||
| +.nav-pills .dropdown-toggle .caret { | ||
| + border-top-color: @linkColor; | ||
| + border-bottom-color: @linkColor; | ||
| + margin-top: 6px; | ||
| +} | ||
| +.nav-tabs .dropdown-toggle:hover .caret, | ||
| +.nav-pills .dropdown-toggle:hover .caret { | ||
| + border-top-color: @linkColorHover; | ||
| + border-bottom-color: @linkColorHover; | ||
| +} | ||
| + | ||
| +// Active dropdown links | ||
| +// ------------------------- | ||
| +.nav-tabs .active .dropdown-toggle .caret, | ||
| +.nav-pills .active .dropdown-toggle .caret { | ||
| + border-top-color: @grayDark; | ||
| + border-bottom-color: @grayDark; | ||
| +} | ||
| + | ||
| +// Active:hover dropdown links | ||
| +// ------------------------- | ||
| +.nav > .dropdown.active > a:hover { | ||
| + color: @black; | ||
| + cursor: pointer; | ||
| +} | ||
| + | ||
| +// Open dropdowns | ||
| +// ------------------------- | ||
| +.nav-tabs .open .dropdown-toggle, | ||
| +.nav-pills .open .dropdown-toggle, | ||
| +.nav > li.dropdown.open.active > a:hover { | ||
| + color: @white; | ||
| + background-color: @grayLight; | ||
| + border-color: @grayLight; | ||
| +} | ||
| +.nav li.dropdown.open .caret, | ||
| +.nav li.dropdown.open.active .caret, | ||
| +.nav li.dropdown.open a:hover .caret { | ||
| + border-top-color: @white; | ||
| + border-bottom-color: @white; | ||
| + .opacity(100); | ||
| +} | ||
| + | ||
| +// Dropdowns in stacked tabs | ||
| +.tabs-stacked .open > a:hover { | ||
| + border-color: @grayLight; | ||
| +} | ||
| + | ||
| + | ||
| + | ||
| +// TABBABLE | ||
| +// -------- | ||
| + | ||
| + | ||
| +// COMMON STYLES | ||
| +// ------------- | ||
| + | ||
| +// Clear any floats | ||
| +.tabbable { | ||
| + .clearfix(); | ||
| +} | ||
| +.tab-content { | ||
| + overflow: auto; // prevent content from running below tabs | ||
| +} | ||
| + | ||
| +// Remove border on bottom, left, right | ||
| +.tabs-below > .nav-tabs, | ||
| +.tabs-right > .nav-tabs, | ||
| +.tabs-left > .nav-tabs { | ||
| + border-bottom: 0; | ||
| +} | ||
| + | ||
| +// Show/hide tabbable areas | ||
| +.tab-content > .tab-pane, | ||
| +.pill-content > .pill-pane { | ||
| + display: none; | ||
| +} | ||
| +.tab-content > .active, | ||
| +.pill-content > .active { | ||
| + display: block; | ||
| +} | ||
| + | ||
| + | ||
| +// BOTTOM | ||
| +// ------ | ||
| + | ||
| +.tabs-below > .nav-tabs { | ||
| + border-top: 1px solid #ddd; | ||
| +} | ||
| +.tabs-below > .nav-tabs > li { | ||
| + margin-top: -1px; | ||
| + margin-bottom: 0; | ||
| +} | ||
| +.tabs-below > .nav-tabs > li > a { | ||
| + .border-radius(0 0 4px 4px); | ||
| + &:hover { | ||
| + border-bottom-color: transparent; | ||
| + border-top-color: #ddd; | ||
| + } | ||
| +} | ||
| +.tabs-below > .nav-tabs > .active > a, | ||
| +.tabs-below > .nav-tabs > .active > a:hover { | ||
| + border-color: transparent #ddd #ddd #ddd; | ||
| +} | ||
| + | ||
| +// LEFT & RIGHT | ||
| +// ------------ | ||
| + | ||
| +// Common styles | ||
| +.tabs-left > .nav-tabs > li, | ||
| +.tabs-right > .nav-tabs > li { | ||
| + float: none; | ||
| +} | ||
| +.tabs-left > .nav-tabs > li > a, | ||
| +.tabs-right > .nav-tabs > li > a { | ||
| + min-width: 74px; | ||
| + margin-right: 0; | ||
| + margin-bottom: 3px; | ||
| +} | ||
| + | ||
| +// Tabs on the left | ||
| +.tabs-left > .nav-tabs { | ||
| + float: left; | ||
| + margin-right: 19px; | ||
| + border-right: 1px solid #ddd; | ||
| +} | ||
| +.tabs-left > .nav-tabs > li > a { | ||
| + margin-right: -1px; | ||
| + .border-radius(4px 0 0 4px); | ||
| +} | ||
| +.tabs-left > .nav-tabs > li > a:hover { | ||
| + border-color: @grayLighter #ddd @grayLighter @grayLighter; | ||
| +} | ||
| +.tabs-left > .nav-tabs .active > a, | ||
| +.tabs-left > .nav-tabs .active > a:hover { | ||
| + border-color: #ddd transparent #ddd #ddd; | ||
| + *border-right-color: @white; | ||
| +} | ||
| + | ||
| +// Tabs on the right | ||
| +.tabs-right > .nav-tabs { | ||
| + float: right; | ||
| + margin-left: 19px; | ||
| + border-left: 1px solid #ddd; | ||
| +} | ||
| +.tabs-right > .nav-tabs > li > a { | ||
| + margin-left: -1px; | ||
| + .border-radius(0 4px 4px 0); | ||
| +} | ||
| +.tabs-right > .nav-tabs > li > a:hover { | ||
| + border-color: @grayLighter @grayLighter @grayLighter #ddd; | ||
| +} | ||
| +.tabs-right > .nav-tabs .active > a, | ||
| +.tabs-right > .nav-tabs .active > a:hover { | ||
| + border-color: #ddd #ddd #ddd transparent; | ||
| + *border-left-color: @white; | ||
| +} |
| @@ -0,0 +1,36 @@ | ||
| +// PAGER | ||
| +// ----- | ||
| + | ||
| +.pager { | ||
| + margin-left: 0; | ||
| + margin-bottom: @baseLineHeight; | ||
| + list-style: none; | ||
| + text-align: center; | ||
| + .clearfix(); | ||
| +} | ||
| +.pager li { | ||
| + display: inline; | ||
| +} | ||
| +.pager a { | ||
| + display: inline-block; | ||
| + padding: 5px 14px; | ||
| + background-color: #fff; | ||
| + border: 1px solid #ddd; | ||
| + .border-radius(15px); | ||
| +} | ||
| +.pager a:hover { | ||
| + text-decoration: none; | ||
| + background-color: #f5f5f5; | ||
| +} | ||
| +.pager .next a { | ||
| + float: right; | ||
| +} | ||
| +.pager .previous a { | ||
| + float: left; | ||
| +} | ||
| +.pager .disabled a, | ||
| +.pager .disabled a:hover { | ||
| + color: @grayLight; | ||
| + background-color: #fff; | ||
| + cursor: default; | ||
| +} |
| @@ -0,0 +1,56 @@ | ||
| +// PAGINATION | ||
| +// ---------- | ||
| + | ||
| +.pagination { | ||
| + height: @baseLineHeight * 2; | ||
| + margin: @baseLineHeight 0; | ||
| + } | ||
| +.pagination ul { | ||
| + display: inline-block; | ||
| + .ie7-inline-block(); | ||
| + margin-left: 0; | ||
| + margin-bottom: 0; | ||
| + .border-radius(3px); | ||
| + .box-shadow(0 1px 2px rgba(0,0,0,.05)); | ||
| +} | ||
| +.pagination li { | ||
| + display: inline; | ||
| + } | ||
| +.pagination a { | ||
| + float: left; | ||
| + padding: 0 14px; | ||
| + line-height: (@baseLineHeight * 2) - 2; | ||
| + text-decoration: none; | ||
| + border: 1px solid #ddd; | ||
| + border-left-width: 0; | ||
| +} | ||
| +.pagination a:hover, | ||
| +.pagination .active a { | ||
| + background-color: #f5f5f5; | ||
| +} | ||
| +.pagination .active a { | ||
| + color: @grayLight; | ||
| + cursor: default; | ||
| +} | ||
| +.pagination .disabled span, | ||
| +.pagination .disabled a, | ||
| +.pagination .disabled a:hover { | ||
| + color: @grayLight; | ||
| + background-color: transparent; | ||
| + cursor: default; | ||
| +} | ||
| +.pagination li:first-child a { | ||
| + border-left-width: 1px; | ||
| + .border-radius(3px 0 0 3px); | ||
| +} | ||
| +.pagination li:last-child a { | ||
| + .border-radius(0 3px 3px 0); | ||
| +} | ||
| + | ||
| +// Centered | ||
| +.pagination-centered { | ||
| + text-align: center; | ||
| +} | ||
| +.pagination-right { | ||
| + text-align: right; | ||
| +} |
| @@ -0,0 +1,49 @@ | ||
| +// POPOVERS | ||
| +// -------- | ||
| + | ||
| +.popover { | ||
| + position: absolute; | ||
| + top: 0; | ||
| + left: 0; | ||
| + z-index: @zindexPopover; | ||
| + display: none; | ||
| + padding: 5px; | ||
| + &.top { margin-top: -5px; } | ||
| + &.right { margin-left: 5px; } | ||
| + &.bottom { margin-top: 5px; } | ||
| + &.left { margin-left: -5px; } | ||
| + &.top .arrow { #popoverArrow > .top(); } | ||
| + &.right .arrow { #popoverArrow > .right(); } | ||
| + &.bottom .arrow { #popoverArrow > .bottom(); } | ||
| + &.left .arrow { #popoverArrow > .left(); } | ||
| + .arrow { | ||
| + position: absolute; | ||
| + width: 0; | ||
| + height: 0; | ||
| + } | ||
| +} | ||
| +.popover-inner { | ||
| + padding: 3px; | ||
| + width: 280px; | ||
| + overflow: hidden; | ||
| + background: @black; // has to be full background declaration for IE fallback | ||
| + background: rgba(0,0,0,.8); | ||
| + .border-radius(6px); | ||
| + .box-shadow(0 3px 7px rgba(0,0,0,0.3)); | ||
| +} | ||
| +.popover-title { | ||
| + padding: 9px 15px; | ||
| + line-height: 1; | ||
| + background-color: #f5f5f5; | ||
| + border-bottom:1px solid #eee; | ||
| + .border-radius(3px 3px 0 0); | ||
| +} | ||
| +.popover-content { | ||
| + padding: 14px; | ||
| + background-color: @white; | ||
| + .border-radius(0 0 3px 3px); | ||
| + .background-clip(padding-box); | ||
| + p, ul, ol { | ||
| + margin-bottom: 0; | ||
| + } | ||
| +} |
| @@ -0,0 +1,117 @@ | ||
| +// PROGRESS BARS | ||
| +// ------------- | ||
| + | ||
| + | ||
| +// ANIMATIONS | ||
| +// ---------- | ||
| + | ||
| +// Webkit | ||
| +@-webkit-keyframes progress-bar-stripes { | ||
| + from { background-position: 40px 0; } | ||
| + to { background-position: 0 0; } | ||
| +} | ||
| + | ||
| +// Firefox | ||
| +@-moz-keyframes progress-bar-stripes { | ||
| + from { background-position: 40px 0; } | ||
| + to { background-position: 0 0; } | ||
| +} | ||
| + | ||
| +// IE9 | ||
| +@-ms-keyframes progress-bar-stripes { | ||
| + from { background-position: 40px 0; } | ||
| + to { background-position: 0 0; } | ||
| +} | ||
| + | ||
| +// Opera | ||
| +@-o-keyframes progress-bar-stripes { | ||
| + from { background-position: 0 0; } | ||
| + to { background-position: 40px 0; } | ||
| +} | ||
| + | ||
| +// Spec | ||
| +@keyframes progress-bar-stripes { | ||
| + from { background-position: 40px 0; } | ||
| + to { background-position: 0 0; } | ||
| +} | ||
| + | ||
| + | ||
| + | ||
| +// THE BARS | ||
| +// -------- | ||
| + | ||
| +// Outer container | ||
| +.progress { | ||
| + overflow: hidden; | ||
| + height: 18px; | ||
| + margin-bottom: 18px; | ||
| + #gradient > .vertical(#f5f5f5, #f9f9f9); | ||
| + .box-shadow(inset 0 1px 2px rgba(0,0,0,.1)); | ||
| + .border-radius(4px); | ||
| +} | ||
| + | ||
| +// Bar of progress | ||
| +.progress .bar { | ||
| + width: 0%; | ||
| + height: 18px; | ||
| + color: @white; | ||
| + font-size: 12px; | ||
| + text-align: center; | ||
| + text-shadow: 0 -1px 0 rgba(0,0,0,.25); | ||
| + #gradient > .vertical(#149bdf, #0480be); | ||
| + .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15)); | ||
| + .box-sizing(border-box); | ||
| + .transition(width .6s ease); | ||
| +} | ||
| + | ||
| +// Striped bars | ||
| +.progress-striped .bar { | ||
| + #gradient > .striped(#149bdf); | ||
| + .background-size(40px 40px); | ||
| +} | ||
| + | ||
| +// Call animation for the active one | ||
| +.progress.active .bar { | ||
| + -webkit-animation: progress-bar-stripes 2s linear infinite; | ||
| + -moz-animation: progress-bar-stripes 2s linear infinite; | ||
| + -ms-animation: progress-bar-stripes 2s linear infinite; | ||
| + -o-animation: progress-bar-stripes 2s linear infinite; | ||
| + animation: progress-bar-stripes 2s linear infinite; | ||
| +} | ||
| + | ||
| + | ||
| + | ||
| +// COLORS | ||
| +// ------ | ||
| + | ||
| +// Danger (red) | ||
| +.progress-danger .bar { | ||
| + #gradient > .vertical(#ee5f5b, #c43c35); | ||
| +} | ||
| +.progress-danger.progress-striped .bar { | ||
| + #gradient > .striped(#ee5f5b); | ||
| +} | ||
| + | ||
| +// Success (green) | ||
| +.progress-success .bar { | ||
| + #gradient > .vertical(#62c462, #57a957); | ||
| +} | ||
| +.progress-success.progress-striped .bar { | ||
| + #gradient > .striped(#62c462); | ||
| +} | ||
| + | ||
| +// Info (teal) | ||
| +.progress-info .bar { | ||
| + #gradient > .vertical(#5bc0de, #339bb9); | ||
| +} | ||
| +.progress-info.progress-striped .bar { | ||
| + #gradient > .striped(#5bc0de); | ||
| +} | ||
| + | ||
| +// Warning (orange) | ||
| +.progress-warning .bar { | ||
| + #gradient > .vertical(lighten(@orange, 15%), @orange); | ||
| +} | ||
| +.progress-warning.progress-striped .bar { | ||
| + #gradient > .striped(lighten(@orange, 15%)); | ||
| +} |
| @@ -0,0 +1,131 @@ | ||
| +// Reset.less | ||
| +// Adapted from Normalize.css http://github.com/necolas/normalize.css | ||
| +// ------------------------------------------------------------------------ | ||
| + | ||
| +// Display in IE6-9 and FF3 | ||
| +// ------------------------- | ||
| + | ||
| +article, | ||
| +aside, | ||
| +details, | ||
| +figcaption, | ||
| +figure, | ||
| +footer, | ||
| +header, | ||
| +hgroup, | ||
| +nav, | ||
| +section { | ||
| + display: block; | ||
| +} | ||
| + | ||
| +// Display block in IE6-9 and FF3 | ||
| +// ------------------------- | ||
| + | ||
| +audio, | ||
| +canvas, | ||
| +video { | ||
| + display: inline-block; | ||
| + *display: inline; | ||
| + *zoom: 1; | ||
| +} | ||
| + | ||
| +// Prevents modern browsers from displaying 'audio' without controls | ||
| +// ------------------------- | ||
| + | ||
| +audio:not([controls]) { | ||
| + display: none; | ||
| +} | ||
| + | ||
| +// Base settings | ||
| +// ------------------------- | ||
| + | ||
| +html { | ||
| + font-size: 100%; | ||
| + -webkit-text-size-adjust: 100%; | ||
| + -ms-text-size-adjust: 100%; | ||
| +} | ||
| +// Focus states | ||
| +a:focus { | ||
| + .tab-focus(); | ||
| +} | ||
| +// Hover & Active | ||
| +a:hover, | ||
| +a:active { | ||
| + outline: 0; | ||
| +} | ||
| + | ||
| +// Prevents sub and sup affecting line-height in all browsers | ||
| +// ------------------------- | ||
| + | ||
| +sub, | ||
| +sup { | ||
| + position: relative; | ||
| + font-size: 75%; | ||
| + line-height: 0; | ||
| + vertical-align: baseline; | ||
| +} | ||
| +sup { | ||
| + top: -0.5em; | ||
| +} | ||
| +sub { | ||
| + bottom: -0.25em; | ||
| +} | ||
| + | ||
| +// Img border in a's and image quality | ||
| +// ------------------------- | ||
| + | ||
| +img { | ||
| + max-width: 100%; // Make images inherently responsive | ||
| + vertical-align: middle; | ||
| + border: 0; | ||
| + -ms-interpolation-mode: bicubic; | ||
| +} | ||
| + | ||
| +// Prevent max-width from affecting Google Maps | ||
| +#map_canvas img { | ||
| + max-width: none; | ||
| +} | ||
| + | ||
| +// Forms | ||
| +// ------------------------- | ||
| + | ||
| +// Font size in all browsers, margin changes, misc consistency | ||
| +button, | ||
| +input, | ||
| +select, | ||
| +textarea { | ||
| + margin: 0; | ||
| + font-size: 100%; | ||
| + vertical-align: middle; | ||
| +} | ||
| +button, | ||
| +input { | ||
| + *overflow: visible; // Inner spacing ie IE6/7 | ||
| + line-height: normal; // FF3/4 have !important on line-height in UA stylesheet | ||
| +} | ||
| +button::-moz-focus-inner, | ||
| +input::-moz-focus-inner { // Inner padding and border oddities in FF3/4 | ||
| + padding: 0; | ||
| + border: 0; | ||
| +} | ||
| +button, | ||
| +input[type="button"], | ||
| +input[type="reset"], | ||
| +input[type="submit"] { | ||
| + cursor: pointer; // Cursors on all buttons applied consistently | ||
| + -webkit-appearance: button; // Style clickable inputs in iOS | ||
| +} | ||
| +input[type="search"] { // Appearance in Safari/Chrome | ||
| + -webkit-box-sizing: content-box; | ||
| + -moz-box-sizing: content-box; | ||
| + box-sizing: content-box; | ||
| + -webkit-appearance: textfield; | ||
| +} | ||
| +input[type="search"]::-webkit-search-decoration, | ||
| +input[type="search"]::-webkit-search-cancel-button { | ||
| + -webkit-appearance: none; // Inner-padding issues in Chrome OSX, Safari 5 | ||
| +} | ||
| +textarea { | ||
| + overflow: auto; // Remove vertical scrollbar in IE6-9 | ||
| + vertical-align: top; // Readability and alignment cross-browser | ||
| +} |
| @@ -0,0 +1,26 @@ | ||
| +// LARGE DESKTOP & UP | ||
| +// ------------------ | ||
| + | ||
| +@media (min-width: 1200px) { | ||
| + | ||
| + // Fixed grid | ||
| + #grid > .core(70px, 30px); | ||
| + | ||
| + // Fluid grid | ||
| + #grid > .fluid(5.982905983%, 2.564102564%); | ||
| + | ||
| + // Input grid | ||
| + #grid > .input(70px, 30px); | ||
| + | ||
| + // Thumbnails | ||
| + .thumbnails { | ||
| + margin-left: -30px; | ||
| + } | ||
| + .thumbnails > li { | ||
| + margin-left: 30px; | ||
| + } | ||
| + .row-fluid .thumbnails { | ||
| + margin-left: 0; | ||
| + } | ||
| + | ||
| +} |
| @@ -0,0 +1,149 @@ | ||
| +// UP TO LANDSCAPE PHONE | ||
| +// --------------------- | ||
| + | ||
| +@media (max-width: 480px) { | ||
| + | ||
| + // Smooth out the collapsing/expanding nav | ||
| + .nav-collapse { | ||
| + -webkit-transform: translate3d(0, 0, 0); // activate the GPU | ||
| + } | ||
| + | ||
| + // Block level the page header small tag for readability | ||
| + .page-header h1 small { | ||
| + display: block; | ||
| + line-height: @baseLineHeight; | ||
| + } | ||
| + | ||
| + // Update checkboxes for iOS | ||
| + input[type="checkbox"], | ||
| + input[type="radio"] { | ||
| + border: 1px solid #ccc; | ||
| + } | ||
| + | ||
| + // Remove the horizontal form styles | ||
| + .form-horizontal .control-group > label { | ||
| + float: none; | ||
| + width: auto; | ||
| + padding-top: 0; | ||
| + text-align: left; | ||
| + } | ||
| + // Move over all input controls and content | ||
| + .form-horizontal .controls { | ||
| + margin-left: 0; | ||
| + } | ||
| + // Move the options list down to align with labels | ||
| + .form-horizontal .control-list { | ||
| + padding-top: 0; // has to be padding because margin collaspes | ||
| + } | ||
| + // Move over buttons in .form-actions to align with .controls | ||
| + .form-horizontal .form-actions { | ||
| + padding-left: 10px; | ||
| + padding-right: 10px; | ||
| + } | ||
| + | ||
| + // Modals | ||
| + .modal { | ||
| + position: absolute; | ||
| + top: 10px; | ||
| + left: 10px; | ||
| + right: 10px; | ||
| + width: auto; | ||
| + margin: 0; | ||
| + &.fade.in { top: auto; } | ||
| + } | ||
| + .modal-header .close { | ||
| + padding: 10px; | ||
| + margin: -10px; | ||
| + } | ||
| + | ||
| + // Carousel | ||
| + .carousel-caption { | ||
| + position: static; | ||
| + } | ||
| + | ||
| +} | ||
| + | ||
| + | ||
| + | ||
| +// LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET | ||
| +// -------------------------------------------------- | ||
| + | ||
| +@media (max-width: 767px) { | ||
| + | ||
| + // Padding to set content in a bit | ||
| + body { | ||
| + padding-left: 20px; | ||
| + padding-right: 20px; | ||
| + } | ||
| + // Negative indent the now static "fixed" navbar | ||
| + .navbar-fixed-top, | ||
| + .navbar-fixed-bottom { | ||
| + margin-left: -20px; | ||
| + margin-right: -20px; | ||
| + } | ||
| + // Remove padding on container given explicit padding set on body | ||
| + .container-fluid { | ||
| + padding: 0; | ||
| + } | ||
| + | ||
| + // TYPOGRAPHY | ||
| + // ---------- | ||
| + // Reset horizontal dl | ||
| + .dl-horizontal { | ||
| + dt { | ||
| + float: none; | ||
| + clear: none; | ||
| + width: auto; | ||
| + text-align: left; | ||
| + } | ||
| + dd { | ||
| + margin-left: 0; | ||
| + } | ||
| + } | ||
| + | ||
| + // GRID & CONTAINERS | ||
| + // ----------------- | ||
| + // Remove width from containers | ||
| + .container { | ||
| + width: auto; | ||
| + } | ||
| + // Fluid rows | ||
| + .row-fluid { | ||
| + width: 100%; | ||
| + } | ||
| + // Undo negative margin on rows and thumbnails | ||
| + .row, | ||
| + .thumbnails { | ||
| + margin-left: 0; | ||
| + } | ||
| + // Make all grid-sized elements block level again | ||
| + [class*="span"], | ||
| + .row-fluid [class*="span"] { | ||
| + float: none; | ||
| + display: block; | ||
| + width: auto; | ||
| + margin-left: 0; | ||
| + } | ||
| + | ||
| + // FORM FIELDS | ||
| + // ----------- | ||
| + // Make span* classes full width | ||
| + .input-large, | ||
| + .input-xlarge, | ||
| + .input-xxlarge, | ||
| + input[class*="span"], | ||
| + select[class*="span"], | ||
| + textarea[class*="span"], | ||
| + .uneditable-input { | ||
| + .input-block-level(); | ||
| + } | ||
| + // But don't let it screw up prepend/append inputs | ||
| + .input-prepend input, | ||
| + .input-append input, | ||
| + .input-prepend input[class*="span"], | ||
| + .input-append input[class*="span"] { | ||
| + display: inline-block; // redeclare so they don't wrap to new lines | ||
| + width: auto; | ||
| + } | ||
| + | ||
| +} |
| @@ -0,0 +1,17 @@ | ||
| +// PORTRAIT TABLET TO DEFAULT DESKTOP | ||
| +// ---------------------------------- | ||
| + | ||
| +@media (min-width: 768px) and (max-width: 979px) { | ||
| + | ||
| + // Fixed grid | ||
| + #grid > .core(42px, 20px); | ||
| + | ||
| + // Fluid grid | ||
| + #grid > .fluid(5.801104972%, 2.762430939%); | ||
| + | ||
| + // Input grid | ||
| + #grid > .input(42px, 20px); | ||
| + | ||
| + // No need to reset .thumbnails here since it's the same @gridGutterWidth | ||
| + | ||
| +} |
| @@ -0,0 +1,153 @@ | ||
| +// TABLETS AND BELOW | ||
| +// ----------------- | ||
| +@media (max-width: 979px) { | ||
| + | ||
| + // UNFIX THE TOPBAR | ||
| + // ---------------- | ||
| + // Remove any padding from the body | ||
| + body { | ||
| + padding-top: 0; | ||
| + } | ||
| + // Unfix the navbar | ||
| + .navbar-fixed-top, | ||
| + .navbar-fixed-bottom { | ||
| + position: static; | ||
| + } | ||
| + .navbar-fixed-top { | ||
| + margin-bottom: @baseLineHeight; | ||
| + } | ||
| + .navbar-fixed-bottom { | ||
| + margin-top: @baseLineHeight; | ||
| + } | ||
| + .navbar-fixed-top .navbar-inner, | ||
| + .navbar-fixed-bottom .navbar-inner { | ||
| + padding: 5px; | ||
| + } | ||
| + .navbar .container { | ||
| + width: auto; | ||
| + padding: 0; | ||
| + } | ||
| + // Account for brand name | ||
| + .navbar .brand { | ||
| + padding-left: 10px; | ||
| + padding-right: 10px; | ||
| + margin: 0 0 0 -5px; | ||
| + } | ||
| + | ||
| + // COLLAPSIBLE NAVBAR | ||
| + // ------------------ | ||
| + // Nav collapse clears brand | ||
| + .nav-collapse { | ||
| + clear: both; | ||
| + } | ||
| + // Block-level the nav | ||
| + .nav-collapse .nav { | ||
| + float: none; | ||
| + margin: 0 0 (@baseLineHeight / 2); | ||
| + } | ||
| + .nav-collapse .nav > li { | ||
| + float: none; | ||
| + } | ||
| + .nav-collapse .nav > li > a { | ||
| + margin-bottom: 2px; | ||
| + } | ||
| + .nav-collapse .nav > .divider-vertical { | ||
| + display: none; | ||
| + } | ||
| + .nav-collapse .nav .nav-header { | ||
| + color: @navbarText; | ||
| + text-shadow: none; | ||
| + } | ||
| + // Nav and dropdown links in navbar | ||
| + .nav-collapse .nav > li > a, | ||
| + .nav-collapse .dropdown-menu a { | ||
| + padding: 6px 15px; | ||
| + font-weight: bold; | ||
| + color: @navbarLinkColor; | ||
| + .border-radius(3px); | ||
| + } | ||
| + // Buttons | ||
| + .nav-collapse .btn { | ||
| + padding: 4px 10px 4px; | ||
| + font-weight: normal; | ||
| + .border-radius(4px); | ||
| + } | ||
| + .nav-collapse .dropdown-menu li + li a { | ||
| + margin-bottom: 2px; | ||
| + } | ||
| + .nav-collapse .nav > li > a:hover, | ||
| + .nav-collapse .dropdown-menu a:hover { | ||
| + background-color: @navbarBackground; | ||
| + } | ||
| + // Buttons in the navbar | ||
| + .nav-collapse.in .btn-group { | ||
| + margin-top: 5px; | ||
| + padding: 0; | ||
| + } | ||
| + // Dropdowns in the navbar | ||
| + .nav-collapse .dropdown-menu { | ||
| + position: static; | ||
| + top: auto; | ||
| + left: auto; | ||
| + float: none; | ||
| + display: block; | ||
| + max-width: none; | ||
| + margin: 0 15px; | ||
| + padding: 0; | ||
| + background-color: transparent; | ||
| + border: none; | ||
| + .border-radius(0); | ||
| + .box-shadow(none); | ||
| + } | ||
| + .nav-collapse .dropdown-menu:before, | ||
| + .nav-collapse .dropdown-menu:after { | ||
| + display: none; | ||
| + } | ||
| + .nav-collapse .dropdown-menu .divider { | ||
| + display: none; | ||
| + } | ||
| + // Forms in navbar | ||
| + .nav-collapse .navbar-form, | ||
| + .nav-collapse .navbar-search { | ||
| + float: none; | ||
| + padding: (@baseLineHeight / 2) 15px; | ||
| + margin: (@baseLineHeight / 2) 0; | ||
| + border-top: 1px solid @navbarBackground; | ||
| + border-bottom: 1px solid @navbarBackground; | ||
| + .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1)"); | ||
| + } | ||
| + // Pull right (secondary) nav content | ||
| + .navbar .nav-collapse .nav.pull-right { | ||
| + float: none; | ||
| + margin-left: 0; | ||
| + } | ||
| + // Hide everything in the navbar save .brand and toggle button */ | ||
| + .nav-collapse, | ||
| + .nav-collapse.collapse { | ||
| + overflow: hidden; | ||
| + height: 0; | ||
| + } | ||
| + // Navbar button | ||
| + .navbar .btn-navbar { | ||
| + display: block; | ||
| + } | ||
| + | ||
| + // STATIC NAVBAR | ||
| + // ------------- | ||
| + .navbar-static .navbar-inner { | ||
| + padding-left: 10px; | ||
| + padding-right: 10px; | ||
| + } | ||
| +} | ||
| + | ||
| + | ||
| +// DEFAULT DESKTOP | ||
| +// --------------- | ||
| + | ||
| +// Required to make the collapsing navbar work on regular desktops | ||
| +@media (min-width: 980px) { | ||
| + .nav-collapse.collapse { | ||
| + height: auto !important; | ||
| + overflow: visible !important; | ||
| + } | ||
| +} |
| @@ -0,0 +1,55 @@ | ||
| +// RESPONSIVE CLASSES | ||
| +// ------------------ | ||
| + | ||
| +// Hide from screenreaders and browsers | ||
| +// Credit: HTML5 Boilerplate | ||
| +.hidden { | ||
| + display: none; | ||
| + visibility: hidden; | ||
| +} | ||
| + | ||
| +// Visibility utilities | ||
| + | ||
| +// For desktops | ||
| +.visible-phone, th.visible-phone, td.visible-phone { display: none !important; } | ||
| +.visible-tablet, th.visible-tablet, td.visible-tablet { display: none !important; } | ||
| +.visible-desktop { display: block !important; } | ||
| +th.visible-desktop, td.visible-desktop { display: table-cell !important; } | ||
| +tr.visible-desktop { display: table-row !important; } | ||
| +.hidden-phone { display: block !important; } | ||
| +th.hidden-phone, td.hidden-phone { display: table-cell !important; } | ||
| +tr.hidden-phone { display: table-row !important; } | ||
| +.hidden-tablet { display: block !important; } | ||
| +th.hidden-tablet, td.hidden-tablet { display: table-cell !important; } | ||
| +tr.hidden-tablet { display: table-row !important; } | ||
| +.hidden-desktop, th.hidden-desktop, td.hidden-desktop { display: none !important; } | ||
| + | ||
| +// Phones only | ||
| +@media (max-width: 767px) { | ||
| + // Show | ||
| + .visible-phone { display: block !important; } | ||
| + th.visible-phone, td.visible-phone { display: table-cell !important; } | ||
| + tr.visible-phone { display: table-row !important; } | ||
| + // Hide | ||
| + .hidden-phone, th.hidden-phone, td.hidden-phone, tr.hidden-phone { display: none !important; } | ||
| + // Hide everything else | ||
| + .hidden-desktop { display: block !important; } | ||
| + th.hidden-desktop, td.hidden-desktop { display: table-cell !important; } | ||
| + tr.hidden-desktop { display: table-row !important; } | ||
| + .visible-desktop, th.visible-desktop, td.visible-desktop, tr.visible-desktop { display: none !important; } | ||
| +} | ||
| + | ||
| +// Tablets & small desktops only | ||
| +@media (min-width: 768px) and (max-width: 979px) { | ||
| + // Show | ||
| + .visible-tablet { display: block !important; } | ||
| + th.visible-tablet, td.visible-tablet { display: table-cell !important; } | ||
| + tr.visible-tablet {display: table-row !important; } | ||
| + // Hide | ||
| + .hidden-tablet, th.hidden-tablet, td.hidden-tablet, tr.hidden-tablet { display: none !important; } | ||
| + // Hide everything else | ||
| + .hidden-desktop { display: block !important; } | ||
| + th.hidden-desktop, td.hidden-desktop { display: table-cell !important; } | ||
| + tr.hidden-desktop { display: table-row !important; } | ||
| + .visible-desktop, th.visible-desktop, td.visible-desktop, tr.visible-desktop { display: none !important; } | ||
| +} |
| @@ -0,0 +1,31 @@ | ||
| +// Scaffolding | ||
| +// Basic and global styles for generating a grid system, structural layout, and page templates | ||
| +// ------------------------------------------------------------------------------------------- | ||
| + | ||
| + | ||
| +// Body reset | ||
| +// ---------- | ||
| + | ||
| +body { | ||
| + margin: 0; | ||
| + font-family: @baseFontFamily; | ||
| + font-size: @baseFontSize; | ||
| + line-height: @baseLineHeight; | ||
| + color: @textColor; | ||
| + background-color: @bodyBackground; | ||
| + padding-top: @bodyPadding; | ||
| + padding-bottom: @bodyPadding; | ||
| +} | ||
| + | ||
| + | ||
| +// Links | ||
| +// ----- | ||
| + | ||
| +a { | ||
| + color: @linkColor; | ||
| + text-decoration: none; | ||
| +} | ||
| +a:hover { | ||
| + color: @linkColorHover; | ||
| + text-decoration: underline; | ||
| +} |