mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-05 16:42:29 +03:00
Merge branch '3.0.0-wip' into bs3_theme
Conflicts: dist/css/bootstrap.min.css
This commit is contained in:
Mark Otto
@@ -1,31 +0,0 @@
|
||||
//
|
||||
// Accordion
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Parent container
|
||||
.accordion {
|
||||
margin-bottom: @line-height-computed;
|
||||
}
|
||||
|
||||
// Group == heading + body
|
||||
.accordion-group {
|
||||
margin-bottom: 2px;
|
||||
border: 1px solid @accordion-border-color;
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
.accordion-heading {
|
||||
border-bottom: 0;
|
||||
|
||||
.accordion-toggle {
|
||||
display: block;
|
||||
padding: 8px 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
// Inner needs the styles because you can't animate properly with any styles on the element
|
||||
.accordion-inner {
|
||||
padding: 9px 15px;
|
||||
border-top: 1px solid @accordion-border-color;
|
||||
}
|
||||
+19
-10
@@ -7,7 +7,7 @@
|
||||
// -------------------------
|
||||
|
||||
.alert {
|
||||
padding: @alert-padding (@alert-padding + 20) @alert-padding @alert-padding;
|
||||
padding: @alert-padding;
|
||||
margin-bottom: @line-height-computed;
|
||||
color: @alert-text;
|
||||
background-color: @alert-bg;
|
||||
@@ -30,14 +30,6 @@
|
||||
color: darken(@alert-text, 10%);
|
||||
}
|
||||
|
||||
// Adjust close link position
|
||||
.close {
|
||||
position: relative;
|
||||
top: -2px;
|
||||
right: -21px;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
// Improve alignment and spacing of inner content
|
||||
> p,
|
||||
> ul {
|
||||
@@ -48,8 +40,25 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Dismissable alerts
|
||||
//
|
||||
// Expand the right padding and account for the close button's positioning.
|
||||
|
||||
.alert-dismissable {
|
||||
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);
|
||||
|
||||
+1
-1
@@ -18,7 +18,7 @@
|
||||
background-color: @badge-bg;
|
||||
border-radius: @badge-border-radius;
|
||||
|
||||
// Empty labels/badges collapse
|
||||
// Empty badges collapse automatically (not available in IE8)
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
Vendored
-1
@@ -54,7 +54,6 @@
|
||||
@import "labels.less";
|
||||
@import "badges.less";
|
||||
@import "progress-bars.less";
|
||||
@import "accordion.less";
|
||||
@import "carousel.less";
|
||||
@import "jumbotron.less";
|
||||
|
||||
|
||||
+67
-19
@@ -18,16 +18,18 @@
|
||||
border-top-color: #fff;
|
||||
}
|
||||
}
|
||||
.dropup .caret {
|
||||
.btn-default & {
|
||||
.dropup {
|
||||
& .btn-default .caret {
|
||||
border-bottom-color: @btn-default-color;
|
||||
}
|
||||
.btn-primary &,
|
||||
.btn-success &,
|
||||
.btn-warning &,
|
||||
.btn-danger &,
|
||||
.btn-info & {
|
||||
border-bottom-color: #fff;
|
||||
& .btn-primary,
|
||||
& .btn-success,
|
||||
& .btn-warning,
|
||||
& .btn-danger,
|
||||
& .btn-info {
|
||||
.caret {
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -55,8 +57,13 @@
|
||||
}
|
||||
|
||||
// Prevent double borders when buttons are next to each other
|
||||
.btn-group .btn + .btn {
|
||||
margin-left: -1px;
|
||||
.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
|
||||
@@ -117,6 +124,14 @@
|
||||
}
|
||||
|
||||
|
||||
// Sizing
|
||||
//
|
||||
// Remix the default button sizing classes into new ones for easier manipulation.
|
||||
|
||||
.btn-group-xs > .btn { .btn-xs(); }
|
||||
.btn-group-sm > .btn { .btn-sm(); }
|
||||
.btn-group-lg > .btn { .btn-lg(); }
|
||||
|
||||
|
||||
// Split button dropdowns
|
||||
// ----------------------
|
||||
@@ -155,26 +170,58 @@
|
||||
// Vertical button groups
|
||||
// ----------------------
|
||||
|
||||
.btn-group-vertical > .btn {
|
||||
display: block;
|
||||
float: none;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
+ .btn {
|
||||
.btn-group-vertical {
|
||||
> .btn,
|
||||
> .btn-group {
|
||||
display: block;
|
||||
float: none;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
// Clear floats so dropdown menus can be properly placed
|
||||
> .btn-group {
|
||||
.clearfix();
|
||||
> .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 {
|
||||
|
||||
.btn-group-vertical > .btn {
|
||||
&:not(:first-child):not(:last-child) {
|
||||
border-radius: 0;
|
||||
}
|
||||
&:first-child:not(:last-child) {
|
||||
border-top-right-radius: @border-radius-base;
|
||||
.border-bottom-radius(0);
|
||||
}
|
||||
&:last-child:not(:first-child) {
|
||||
border-bottom-left-radius: @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 {
|
||||
> .btn:last-child,
|
||||
> .dropdown-toggle {
|
||||
.border-bottom-radius(0);
|
||||
}
|
||||
}
|
||||
.btn-group-vertical > .btn-group:last-child > .btn:first-child {
|
||||
.border-top-radius(0);
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Justified button groups
|
||||
@@ -184,6 +231,7 @@
|
||||
display: table;
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
border-collapse: separate;
|
||||
.btn {
|
||||
float: none;
|
||||
display: table-cell;
|
||||
@@ -193,7 +241,7 @@
|
||||
|
||||
|
||||
// Checkbox and radio options
|
||||
.btn-group[data-toggle="buttons"] > .btn > input[type="radio"],
|
||||
.btn-group[data-toggle="buttons"] > .btn > input[type="checkbox"] {
|
||||
[data-toggle="buttons"] > .btn > input[type="radio"],
|
||||
[data-toggle="buttons"] > .btn > input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
+13
-16
@@ -35,13 +35,14 @@
|
||||
&:active,
|
||||
&.active {
|
||||
outline: 0;
|
||||
background-image: none;
|
||||
.box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
cursor: default;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none; // Future-proof disabling of clicks
|
||||
.opacity(.65);
|
||||
.box-shadow(none);
|
||||
@@ -54,26 +55,26 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
.btn-default {
|
||||
.btn-pseudo-states(@btn-default-color; @btn-default-bg; @btn-default-border);
|
||||
.button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
|
||||
}
|
||||
.btn-primary {
|
||||
.btn-pseudo-states(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
|
||||
.button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
|
||||
}
|
||||
// Warning appears as orange
|
||||
.btn-warning {
|
||||
.btn-pseudo-states(@btn-warning-color; @btn-warning-bg; @btn-warning-border);
|
||||
.button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border);
|
||||
}
|
||||
// Danger and error appear as red
|
||||
.btn-danger {
|
||||
.btn-pseudo-states(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
|
||||
.button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
|
||||
}
|
||||
// Success appears as green
|
||||
.btn-success {
|
||||
.btn-pseudo-states(@btn-success-color; @btn-success-bg; @btn-success-border);
|
||||
.button-variant(@btn-success-color; @btn-success-bg; @btn-success-border);
|
||||
}
|
||||
// Info appears as blue-green
|
||||
.btn-info {
|
||||
.btn-pseudo-states(@btn-info-color; @btn-info-bg; @btn-info-border);
|
||||
.button-variant(@btn-info-color; @btn-info-bg; @btn-info-border);
|
||||
}
|
||||
|
||||
|
||||
@@ -121,20 +122,16 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
.btn-lg {
|
||||
padding: @padding-large-vertical @padding-large-horizontal;
|
||||
font-size: @font-size-large;
|
||||
line-height: @line-height-large; // ensure even-numbered height of button next to large input
|
||||
border-radius: @border-radius-large;
|
||||
// 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; @border-radius-large);
|
||||
}
|
||||
.btn-sm,
|
||||
.btn-xs {
|
||||
padding: @padding-small-vertical @padding-small-horizontal;
|
||||
font-size: @font-size-small;
|
||||
line-height: @line-height-small; // ensure proper height of button next to small input
|
||||
border-radius: @border-radius-small;
|
||||
// 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; @border-radius-small);
|
||||
}
|
||||
.btn-xs {
|
||||
padding: 3px 5px;
|
||||
padding: 1px 5px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
+1
-3
@@ -97,7 +97,6 @@
|
||||
}
|
||||
|
||||
// Toggles
|
||||
.glyphicon,
|
||||
.icon-prev,
|
||||
.icon-next {
|
||||
position: absolute;
|
||||
@@ -111,7 +110,7 @@
|
||||
margin-left: -10px;
|
||||
font-family: serif;
|
||||
}
|
||||
// Non-glyphicon toggles
|
||||
|
||||
.icon-prev {
|
||||
&:before {
|
||||
content: '\2039';// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
|
||||
@@ -182,7 +181,6 @@
|
||||
@media screen and (min-width: @screen-tablet) {
|
||||
|
||||
// Scale up the controls a smidge
|
||||
.carousel-control .glyphicon,
|
||||
.carousel-control .icon-prev,
|
||||
.carousel-control .icon-next {
|
||||
width: 30px;
|
||||
|
||||
+4
-3
@@ -16,7 +16,7 @@ code {
|
||||
color: @code-color;
|
||||
background-color: @code-bg;
|
||||
white-space: nowrap;
|
||||
border-radius: 4px;
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
|
||||
// Blocks of code
|
||||
@@ -28,7 +28,7 @@ pre {
|
||||
line-height: @line-height-base;
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
color: @gray-dark;
|
||||
color: @pre-color;
|
||||
background-color: @pre-bg;
|
||||
border: 1px solid @pre-border-color;
|
||||
border-radius: @border-radius-base;
|
||||
@@ -41,6 +41,7 @@ pre {
|
||||
// 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;
|
||||
@@ -50,6 +51,6 @@ pre {
|
||||
|
||||
// Enable scrollable blocks of code
|
||||
.pre-scrollable {
|
||||
max-height: 340px;
|
||||
max-height: @pre-scrollable-max-height;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
+21
-21
@@ -4,7 +4,6 @@
|
||||
|
||||
|
||||
// Dropdown arrow/caret
|
||||
// --------------------
|
||||
.caret {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
@@ -14,17 +13,23 @@
|
||||
border-top: @caret-width-base solid @dropdown-caret-color;
|
||||
border-right: @caret-width-base solid transparent;
|
||||
border-left: @caret-width-base solid transparent;
|
||||
// Firefox fix for https://github.com/twbs/bootstrap/issues/9538. Once fixed,
|
||||
// we can just straight up remove this.
|
||||
border-bottom: 0 dotted;
|
||||
content: "";
|
||||
}
|
||||
|
||||
// The dropdown wrapper (div)
|
||||
// --------------------------
|
||||
.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%;
|
||||
@@ -36,12 +41,13 @@
|
||||
padding: 5px 0;
|
||||
margin: 2px 0 0; // override default ul
|
||||
list-style: none;
|
||||
font-size: @font-size-base;
|
||||
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);
|
||||
background-clip: padding-box;
|
||||
|
||||
// Aligns the dropdown menu to right
|
||||
&.pull-right {
|
||||
@@ -67,19 +73,16 @@
|
||||
}
|
||||
|
||||
// Hover/Focus state
|
||||
// -----------
|
||||
.dropdown-menu > li > a {
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
color: @dropdown-link-hover-color;
|
||||
#gradient > .vertical(@start-color: @dropdown-link-hover-bg; @end-color: darken(@dropdown-link-hover-bg, 5%));
|
||||
background-color: darken(@dropdown-link-hover-bg, 5%);
|
||||
background-color: @dropdown-link-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// Active state
|
||||
// ------------
|
||||
.dropdown-menu > .active > a {
|
||||
&,
|
||||
&:hover,
|
||||
@@ -87,19 +90,19 @@
|
||||
color: @dropdown-link-active-color;
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
#gradient > .vertical(@start-color: @dropdown-link-active-bg; @end-color: darken(@dropdown-link-active-bg, 5%));
|
||||
background-color: darken(@dropdown-link-active-bg, 5%);
|
||||
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: @gray-light;
|
||||
color: @dropdown-link-disabled-color;
|
||||
}
|
||||
}
|
||||
// Nuke hover/focus effects
|
||||
@@ -115,7 +118,6 @@
|
||||
}
|
||||
|
||||
// Open state for the dropdown
|
||||
// ---------------------------
|
||||
.open {
|
||||
// Show the menu
|
||||
> .dropdown-menu {
|
||||
@@ -129,19 +131,15 @@
|
||||
}
|
||||
|
||||
// Dropdown section headers
|
||||
// ---------------------------
|
||||
.dropdown-header {
|
||||
display: block;
|
||||
padding: 3px 20px;
|
||||
font-size: @font-size-small;
|
||||
line-height: @line-height-base;
|
||||
color: @gray-light;
|
||||
color: @dropdown-header-color;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Backdrop to catch body clicks on mobile, etc.
|
||||
// ---------------------------
|
||||
.dropdown-backdrop {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
@@ -152,21 +150,23 @@
|
||||
}
|
||||
|
||||
// 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;
|
||||
// Firefox fix for https://github.com/twbs/bootstrap/issues/9538. Once this
|
||||
// gets fixed, restore `border-top: 0;`.
|
||||
border-top: 0 dotted;
|
||||
border-bottom: 4px solid @dropdown-caret-color;
|
||||
content: "";
|
||||
}
|
||||
|
||||
+60
-58
@@ -20,7 +20,7 @@ legend {
|
||||
margin-bottom: @line-height-computed;
|
||||
font-size: (@font-size-base * 1.5);
|
||||
line-height: inherit;
|
||||
color: @gray-dark;
|
||||
color: @legend-color;
|
||||
border: 0;
|
||||
border-bottom: 1px solid @legend-border-color;
|
||||
}
|
||||
@@ -121,7 +121,7 @@ input[type="number"] {
|
||||
padding: @padding-base-vertical @padding-base-horizontal;
|
||||
font-size: @font-size-base;
|
||||
line-height: @line-height-base;
|
||||
color: @gray;
|
||||
color: @input-color;
|
||||
vertical-align: middle;
|
||||
background-color: @input-bg;
|
||||
border: 1px solid @input-border;
|
||||
@@ -133,9 +133,9 @@ input[type="number"] {
|
||||
.form-control-focus();
|
||||
|
||||
// Disabled and read-only inputs
|
||||
// Note: HTML5 says that inputs under a fieldset > legend:first-child won't be
|
||||
// disabled if the fieldset is disabled. Due to implementation difficulty,
|
||||
// we don't honor that edge case; we style them as disabled anyway.
|
||||
// Note: 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] & {
|
||||
@@ -207,44 +207,28 @@ input[type="number"] {
|
||||
margin-left: 10px; // space out consecutive inline controls
|
||||
}
|
||||
|
||||
|
||||
// Apply same disabled cursor tweak as for inputs
|
||||
//
|
||||
// Note: Neither radios nor checkboxes can be readonly.
|
||||
input[type="radio"],
|
||||
input[type="checkbox"],
|
||||
.radio,
|
||||
.radio-inline,
|
||||
.checkbox,
|
||||
.checkbox-inline {
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
// 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-sm {
|
||||
.input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
|
||||
}
|
||||
|
||||
.input-lg {
|
||||
height: @input-height-large;
|
||||
padding: @padding-large-vertical @padding-large-horizontal;
|
||||
font-size: @font-size-large;
|
||||
line-height: @line-height-large;
|
||||
border-radius: @border-radius-large;
|
||||
}
|
||||
.input-sm {
|
||||
height: @input-height-small;
|
||||
padding: @padding-small-vertical @padding-small-horizontal;
|
||||
font-size: @font-size-small;
|
||||
line-height: @line-height-small;
|
||||
border-radius: @border-radius-small;
|
||||
}
|
||||
|
||||
select {
|
||||
&.input-lg {
|
||||
height: @input-height-large;
|
||||
line-height: @input-height-large;
|
||||
}
|
||||
&.input-sm {
|
||||
height: @input-height-small;
|
||||
line-height: @input-height-small;
|
||||
}
|
||||
}
|
||||
textarea {
|
||||
&.input-lg,
|
||||
&.input-sm {
|
||||
height: auto;
|
||||
}
|
||||
.input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
|
||||
}
|
||||
|
||||
|
||||
@@ -293,28 +277,46 @@ textarea {
|
||||
|
||||
// Inline forms
|
||||
//
|
||||
// Make forms appear inline(-block).
|
||||
// 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 {
|
||||
.form-control,
|
||||
.radio,
|
||||
.checkbox {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
// Remove default margin on radios/checkboxes that were used for stacking, and
|
||||
// then undo the floating of radios and checkboxes to match (which also avoids
|
||||
// a bug in WebKit: https://github.com/twbs/bootstrap/issues/1969).
|
||||
.radio,
|
||||
.checkbox {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
.radio input[type="radio"],
|
||||
.checkbox input[type="checkbox"] {
|
||||
float: none;
|
||||
margin-left: 0;
|
||||
// Kick in the inline
|
||||
@media (min-width: @screen-tablet) {
|
||||
// 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;
|
||||
}
|
||||
|
||||
// Remove default margin on radios/checkboxes that were used for stacking, and
|
||||
// then undo the floating of radios and checkboxes to match (which also avoids
|
||||
// a bug in WebKit: https://github.com/twbs/bootstrap/issues/1969).
|
||||
.radio,
|
||||
.checkbox {
|
||||
display: inline-block;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
.radio input[type="radio"],
|
||||
.checkbox input[type="checkbox"] {
|
||||
float: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+157
-53
@@ -2,6 +2,7 @@
|
||||
// Grid system
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Set the container width, and override it for fixed navbars in media queries
|
||||
.container {
|
||||
.container-fixed();
|
||||
@@ -13,18 +14,18 @@
|
||||
}
|
||||
|
||||
// Common styles for small and large grid columns
|
||||
.col-1,
|
||||
.col-2,
|
||||
.col-3,
|
||||
.col-4,
|
||||
.col-5,
|
||||
.col-6,
|
||||
.col-7,
|
||||
.col-8,
|
||||
.col-9,
|
||||
.col-10,
|
||||
.col-11,
|
||||
.col-12,
|
||||
.col-xs-1,
|
||||
.col-xs-2,
|
||||
.col-xs-3,
|
||||
.col-xs-4,
|
||||
.col-xs-5,
|
||||
.col-xs-6,
|
||||
.col-xs-7,
|
||||
.col-xs-8,
|
||||
.col-xs-9,
|
||||
.col-xs-10,
|
||||
.col-xs-11,
|
||||
.col-xs-12,
|
||||
.col-sm-1,
|
||||
.col-sm-2,
|
||||
.col-sm-3,
|
||||
@@ -37,6 +38,18 @@
|
||||
.col-sm-10,
|
||||
.col-sm-11,
|
||||
.col-sm-12,
|
||||
.col-md-1,
|
||||
.col-md-2,
|
||||
.col-md-3,
|
||||
.col-md-4,
|
||||
.col-md-5,
|
||||
.col-md-6,
|
||||
.col-md-7,
|
||||
.col-md-8,
|
||||
.col-md-9,
|
||||
.col-md-10,
|
||||
.col-md-11,
|
||||
.col-md-12,
|
||||
.col-lg-1,
|
||||
.col-lg-2,
|
||||
.col-lg-3,
|
||||
@@ -58,41 +71,50 @@
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Extra small grid
|
||||
//
|
||||
// Container and grid column sizing
|
||||
// Grid classes for extra small devices like smartphones. No offset, push, or
|
||||
// pull classes are present here due to the size of the target.
|
||||
//
|
||||
// Note that `.col-xs-12` doesn't get floated on purpose—there's no need since
|
||||
// it's full-width.
|
||||
|
||||
// Extra small device columns (smartphones)
|
||||
.col-1,
|
||||
.col-2,
|
||||
.col-3,
|
||||
.col-4,
|
||||
.col-5,
|
||||
.col-6,
|
||||
.col-7,
|
||||
.col-8,
|
||||
.col-9,
|
||||
.col-10,
|
||||
.col-11,
|
||||
.col-12 {
|
||||
.col-xs-1,
|
||||
.col-xs-2,
|
||||
.col-xs-3,
|
||||
.col-xs-4,
|
||||
.col-xs-5,
|
||||
.col-xs-6,
|
||||
.col-xs-7,
|
||||
.col-xs-8,
|
||||
.col-xs-9,
|
||||
.col-xs-10,
|
||||
.col-xs-11 {
|
||||
float: left;
|
||||
}
|
||||
.col-1 { width: percentage((1 / @grid-columns)); }
|
||||
.col-2 { width: percentage((2 / @grid-columns)); }
|
||||
.col-3 { width: percentage((3 / @grid-columns)); }
|
||||
.col-4 { width: percentage((4 / @grid-columns)); }
|
||||
.col-5 { width: percentage((5 / @grid-columns)); }
|
||||
.col-6 { width: percentage((6 / @grid-columns)); }
|
||||
.col-7 { width: percentage((7 / @grid-columns)); }
|
||||
.col-8 { width: percentage((8 / @grid-columns)); }
|
||||
.col-9 { width: percentage((9 / @grid-columns)); }
|
||||
.col-10 { width: percentage((10/ @grid-columns)); }
|
||||
.col-11 { width: percentage((11/ @grid-columns)); }
|
||||
.col-12 { width: 100%; }
|
||||
.col-xs-1 { width: percentage((1 / @grid-columns)); }
|
||||
.col-xs-2 { width: percentage((2 / @grid-columns)); }
|
||||
.col-xs-3 { width: percentage((3 / @grid-columns)); }
|
||||
.col-xs-4 { width: percentage((4 / @grid-columns)); }
|
||||
.col-xs-5 { width: percentage((5 / @grid-columns)); }
|
||||
.col-xs-6 { width: percentage((6 / @grid-columns)); }
|
||||
.col-xs-7 { width: percentage((7 / @grid-columns)); }
|
||||
.col-xs-8 { width: percentage((8 / @grid-columns)); }
|
||||
.col-xs-9 { width: percentage((9 / @grid-columns)); }
|
||||
.col-xs-10 { width: percentage((10/ @grid-columns)); }
|
||||
.col-xs-11 { width: percentage((11/ @grid-columns)); }
|
||||
.col-xs-12 { width: 100%; }
|
||||
|
||||
// Small device columns (phones to tablets)
|
||||
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
|
||||
|
||||
// Small grid
|
||||
//
|
||||
// Columns, offsets, pushes, and pulls for the small device range, from phones
|
||||
// to tablets.
|
||||
//
|
||||
// Note that `.col-sm-12` doesn't get floated on purpose—there's no need since
|
||||
// it's full-width.
|
||||
|
||||
@media (min-width: @screen-tablet) {
|
||||
.container {
|
||||
max-width: @container-tablet;
|
||||
}
|
||||
@@ -107,8 +129,7 @@
|
||||
.col-sm-8,
|
||||
.col-sm-9,
|
||||
.col-sm-10,
|
||||
.col-sm-11,
|
||||
.col-sm-12 {
|
||||
.col-sm-11 {
|
||||
float: left;
|
||||
}
|
||||
.col-sm-1 { width: percentage((1 / @grid-columns)); }
|
||||
@@ -163,11 +184,99 @@
|
||||
.col-sm-offset-11 { margin-left: percentage((11/ @grid-columns)); }
|
||||
}
|
||||
|
||||
// Medium and large device columns (desktop and up)
|
||||
|
||||
// Medium grid
|
||||
//
|
||||
// Columns, offsets, pushes, and pulls for the desktop device range.
|
||||
//
|
||||
// Note that `.col-md-12` doesn't get floated on purpose—there's no need since
|
||||
// it's full-width.
|
||||
|
||||
@media (min-width: @screen-desktop) {
|
||||
.container {
|
||||
max-width: @container-desktop;
|
||||
}
|
||||
.col-md-1,
|
||||
.col-md-2,
|
||||
.col-md-3,
|
||||
.col-md-4,
|
||||
.col-md-5,
|
||||
.col-md-6,
|
||||
.col-md-7,
|
||||
.col-md-8,
|
||||
.col-md-9,
|
||||
.col-md-10,
|
||||
.col-md-11 {
|
||||
float: left;
|
||||
}
|
||||
.col-md-1 { width: percentage((1 / @grid-columns)); }
|
||||
.col-md-2 { width: percentage((2 / @grid-columns)); }
|
||||
.col-md-3 { width: percentage((3 / @grid-columns)); }
|
||||
.col-md-4 { width: percentage((4 / @grid-columns)); }
|
||||
.col-md-5 { width: percentage((5 / @grid-columns)); }
|
||||
.col-md-6 { width: percentage((6 / @grid-columns)); }
|
||||
.col-md-7 { width: percentage((7 / @grid-columns)); }
|
||||
.col-md-8 { width: percentage((8 / @grid-columns)); }
|
||||
.col-md-9 { width: percentage((9 / @grid-columns)); }
|
||||
.col-md-10 { width: percentage((10/ @grid-columns)); }
|
||||
.col-md-11 { width: percentage((11/ @grid-columns)); }
|
||||
.col-md-12 { width: 100%; }
|
||||
|
||||
// Push and pull columns for source order changes
|
||||
.col-md-push-0 { left: auto; }
|
||||
.col-md-push-1 { left: percentage((1 / @grid-columns)); }
|
||||
.col-md-push-2 { left: percentage((2 / @grid-columns)); }
|
||||
.col-md-push-3 { left: percentage((3 / @grid-columns)); }
|
||||
.col-md-push-4 { left: percentage((4 / @grid-columns)); }
|
||||
.col-md-push-5 { left: percentage((5 / @grid-columns)); }
|
||||
.col-md-push-6 { left: percentage((6 / @grid-columns)); }
|
||||
.col-md-push-7 { left: percentage((7 / @grid-columns)); }
|
||||
.col-md-push-8 { left: percentage((8 / @grid-columns)); }
|
||||
.col-md-push-9 { left: percentage((9 / @grid-columns)); }
|
||||
.col-md-push-10 { left: percentage((10/ @grid-columns)); }
|
||||
.col-md-push-11 { left: percentage((11/ @grid-columns)); }
|
||||
|
||||
.col-md-pull-0 { right: auto; }
|
||||
.col-md-pull-1 { right: percentage((1 / @grid-columns)); }
|
||||
.col-md-pull-2 { right: percentage((2 / @grid-columns)); }
|
||||
.col-md-pull-3 { right: percentage((3 / @grid-columns)); }
|
||||
.col-md-pull-4 { right: percentage((4 / @grid-columns)); }
|
||||
.col-md-pull-5 { right: percentage((5 / @grid-columns)); }
|
||||
.col-md-pull-6 { right: percentage((6 / @grid-columns)); }
|
||||
.col-md-pull-7 { right: percentage((7 / @grid-columns)); }
|
||||
.col-md-pull-8 { right: percentage((8 / @grid-columns)); }
|
||||
.col-md-pull-9 { right: percentage((9 / @grid-columns)); }
|
||||
.col-md-pull-10 { right: percentage((10/ @grid-columns)); }
|
||||
.col-md-pull-11 { right: percentage((11/ @grid-columns)); }
|
||||
|
||||
// Offsets
|
||||
.col-md-offset-0 { margin-left: 0; }
|
||||
.col-md-offset-1 { margin-left: percentage((1 / @grid-columns)); }
|
||||
.col-md-offset-2 { margin-left: percentage((2 / @grid-columns)); }
|
||||
.col-md-offset-3 { margin-left: percentage((3 / @grid-columns)); }
|
||||
.col-md-offset-4 { margin-left: percentage((4 / @grid-columns)); }
|
||||
.col-md-offset-5 { margin-left: percentage((5 / @grid-columns)); }
|
||||
.col-md-offset-6 { margin-left: percentage((6 / @grid-columns)); }
|
||||
.col-md-offset-7 { margin-left: percentage((7 / @grid-columns)); }
|
||||
.col-md-offset-8 { margin-left: percentage((8 / @grid-columns)); }
|
||||
.col-md-offset-9 { margin-left: percentage((9 / @grid-columns)); }
|
||||
.col-md-offset-10 { margin-left: percentage((10/ @grid-columns)); }
|
||||
.col-md-offset-11 { margin-left: percentage((11/ @grid-columns)); }
|
||||
}
|
||||
|
||||
|
||||
// Large grid
|
||||
//
|
||||
// Columns, offsets, pushes, and pulls for the large desktop device range.
|
||||
//
|
||||
// Note that `.col-lg-12` doesn't get floated on purpose—there's no need since
|
||||
// it's full-width.
|
||||
|
||||
@media (min-width: @screen-lg-desktop) {
|
||||
.container {
|
||||
max-width: @container-lg-desktop;
|
||||
}
|
||||
|
||||
.col-lg-1,
|
||||
.col-lg-2,
|
||||
.col-lg-3,
|
||||
@@ -178,8 +287,7 @@
|
||||
.col-lg-8,
|
||||
.col-lg-9,
|
||||
.col-lg-10,
|
||||
.col-lg-11,
|
||||
.col-lg-12 {
|
||||
.col-lg-11 {
|
||||
float: left;
|
||||
}
|
||||
.col-lg-1 { width: percentage((1 / @grid-columns)); }
|
||||
@@ -196,6 +304,7 @@
|
||||
.col-lg-12 { width: 100%; }
|
||||
|
||||
// Push and pull columns for source order changes
|
||||
.col-lg-push-0 { left: auto; }
|
||||
.col-lg-push-1 { left: percentage((1 / @grid-columns)); }
|
||||
.col-lg-push-2 { left: percentage((2 / @grid-columns)); }
|
||||
.col-lg-push-3 { left: percentage((3 / @grid-columns)); }
|
||||
@@ -208,6 +317,7 @@
|
||||
.col-lg-push-10 { left: percentage((10/ @grid-columns)); }
|
||||
.col-lg-push-11 { left: percentage((11/ @grid-columns)); }
|
||||
|
||||
.col-lg-pull-0 { right: auto; }
|
||||
.col-lg-pull-1 { right: percentage((1 / @grid-columns)); }
|
||||
.col-lg-pull-2 { right: percentage((2 / @grid-columns)); }
|
||||
.col-lg-pull-3 { right: percentage((3 / @grid-columns)); }
|
||||
@@ -221,6 +331,7 @@
|
||||
.col-lg-pull-11 { right: percentage((11/ @grid-columns)); }
|
||||
|
||||
// Offsets
|
||||
.col-lg-offset-0 { margin-left: 0; }
|
||||
.col-lg-offset-1 { margin-left: percentage((1 / @grid-columns)); }
|
||||
.col-lg-offset-2 { margin-left: percentage((2 / @grid-columns)); }
|
||||
.col-lg-offset-3 { margin-left: percentage((3 / @grid-columns)); }
|
||||
@@ -233,10 +344,3 @@
|
||||
.col-lg-offset-10 { margin-left: percentage((10/ @grid-columns)); }
|
||||
.col-lg-offset-11 { margin-left: percentage((11/ @grid-columns)); }
|
||||
}
|
||||
|
||||
// Large desktops and up
|
||||
@media (min-width: @screen-large-desktop) {
|
||||
.container {
|
||||
max-width: @container-large-desktop;
|
||||
}
|
||||
}
|
||||
|
||||
+14
-1
@@ -22,6 +22,19 @@
|
||||
}
|
||||
}
|
||||
|
||||
// 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,
|
||||
@@ -49,7 +62,7 @@
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
background-color: @gray-lighter;
|
||||
background-color: @input-group-addon-bg;
|
||||
border: 1px solid @input-group-addon-border-color;
|
||||
border-radius: @border-radius-base;
|
||||
|
||||
|
||||
+14
-5
@@ -6,7 +6,7 @@
|
||||
display: inline;
|
||||
padding: .25em .6em;
|
||||
font-size: 75%;
|
||||
font-weight: 500;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
color: @label-color;
|
||||
text-align: center;
|
||||
@@ -23,6 +23,11 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
// Empty labels collapse automatically (not available in IE8)
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Colors
|
||||
@@ -32,18 +37,22 @@
|
||||
.label-variant(@label-default-bg);
|
||||
}
|
||||
|
||||
.label-danger {
|
||||
.label-variant(@label-danger-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-info {
|
||||
.label-variant(@label-info-bg);
|
||||
.label-danger {
|
||||
.label-variant(@label-danger-bg);
|
||||
}
|
||||
|
||||
+31
-35
@@ -17,7 +17,7 @@
|
||||
.list-group-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 10px 30px 10px 15px;
|
||||
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;
|
||||
@@ -25,57 +25,41 @@
|
||||
|
||||
// Round the first and last items
|
||||
&:first-child {
|
||||
.border-top-radius(@border-radius-base);
|
||||
.border-top-radius(@list-group-border-radius);
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
.border-bottom-radius(@border-radius-base);
|
||||
.border-bottom-radius(@list-group-border-radius);
|
||||
}
|
||||
|
||||
// Align badges within list items
|
||||
> .badge {
|
||||
float: right;
|
||||
margin-right: -15px;
|
||||
}
|
||||
> .badge + .badge {
|
||||
margin-right: 0;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
// Custom content options
|
||||
// -------------------------
|
||||
|
||||
.list-group-item-heading {
|
||||
margin-top: 0;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.list-group-item-text {
|
||||
margin-bottom: 0;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
// Linked list items
|
||||
// -------------------------
|
||||
|
||||
// Custom content within linked items
|
||||
a.list-group-item {
|
||||
// Colorize content accordingly
|
||||
.list-group-item-heading {
|
||||
color: @list-group-link-heading-color;
|
||||
}
|
||||
.list-group-item-text {
|
||||
// Linked list items
|
||||
a& {
|
||||
color: @list-group-link-color;
|
||||
}
|
||||
|
||||
// Hover state
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
background-color: @list-group-hover-bg;
|
||||
.list-group-item-heading {
|
||||
color: @list-group-link-heading-color;
|
||||
}
|
||||
|
||||
// Hover state
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
background-color: @list-group-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// Active class on item itself, not parent
|
||||
&.active {
|
||||
&.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;
|
||||
@@ -90,3 +74,15 @@ a.list-group-item {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Custom content options
|
||||
// -------------------------
|
||||
|
||||
.list-group-item-heading {
|
||||
margin-top: 0;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.list-group-item-text {
|
||||
margin-bottom: 0;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
+212
-49
@@ -163,16 +163,6 @@
|
||||
backface-visibility: @visibility;
|
||||
}
|
||||
|
||||
// Background clipping
|
||||
.background-clip(@clip) {
|
||||
background-clip: @clip;
|
||||
}
|
||||
|
||||
// Background sizing
|
||||
.background-size(@size) {
|
||||
background-size: @size;
|
||||
}
|
||||
|
||||
// Box sizing
|
||||
.box-sizing(@boxmodel) {
|
||||
-webkit-box-sizing: @boxmodel;
|
||||
@@ -304,10 +294,10 @@
|
||||
|
||||
|
||||
|
||||
// RETINA IMAGE SUPPORT
|
||||
// --------------------------------------------------
|
||||
|
||||
// Retina images
|
||||
//
|
||||
// Short retina mixin for setting background-image and -size
|
||||
|
||||
.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
|
||||
background-image: url("@{file-1x}");
|
||||
|
||||
@@ -324,6 +314,17 @@
|
||||
}
|
||||
|
||||
|
||||
// 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
|
||||
}
|
||||
|
||||
|
||||
// COMPONENT MIXINS
|
||||
// --------------------------------------------------
|
||||
|
||||
@@ -337,6 +338,25 @@
|
||||
background-color: @color;
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
& > .panel-footer {
|
||||
+ .panel-collapse .panel-body {
|
||||
border-bottom-color: @border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Alerts
|
||||
// -------------------------
|
||||
.alert-variant(@background; @border; @text-color) {
|
||||
@@ -351,11 +371,40 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Button pseudo states
|
||||
// Tables
|
||||
// -------------------------
|
||||
.table-row-variant(@state; @background; @border) {
|
||||
// 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;
|
||||
border-color: @border;
|
||||
}
|
||||
}
|
||||
|
||||
// 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 {
|
||||
background-color: darken(@background, 5%);
|
||||
border-color: darken(@border, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Button variants
|
||||
// -------------------------
|
||||
// Easily pump out default styles, as well as :hover, :focus, :active,
|
||||
// and disabled options for all buttons
|
||||
.btn-pseudo-states(@color; @background; @border) {
|
||||
.button-variant(@color; @background; @border) {
|
||||
color: @color;
|
||||
background-color: @background;
|
||||
border-color: @border;
|
||||
@@ -363,12 +412,17 @@
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active {
|
||||
&.active,
|
||||
.open .dropdown-toggle& {
|
||||
color: @color;
|
||||
background-color: darken(@background, 8%);
|
||||
border-color: darken(@border, 12%);
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.active,
|
||||
.open .dropdown-toggle& {
|
||||
background-image: none;
|
||||
}
|
||||
&.disabled,
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
@@ -383,6 +437,39 @@
|
||||
}
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
// Pagination
|
||||
// -------------------------
|
||||
.pagination-size(@padding-vertical; @padding-horizontal; @font-size; @border-radius) {
|
||||
> li {
|
||||
> a,
|
||||
> span {
|
||||
padding: @padding-vertical @padding-horizontal;
|
||||
font-size: @font-size;
|
||||
}
|
||||
&:first-child {
|
||||
> a,
|
||||
> span {
|
||||
.border-left-radius(@border-radius);
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
> a,
|
||||
> span {
|
||||
.border-right-radius(@border-radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Labels
|
||||
// -------------------------
|
||||
.label-variant(@color) {
|
||||
@@ -437,76 +524,129 @@
|
||||
.container-fixed() {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding-left: (@grid-gutter-width / 2);
|
||||
padding-right: (@grid-gutter-width / 2);
|
||||
.clearfix();
|
||||
}
|
||||
|
||||
// Creates a wrapper for a series of columns
|
||||
.make-row() {
|
||||
// Then clear the floated columns
|
||||
.make-row(@gutter: @grid-gutter-width) {
|
||||
margin-left: (@gutter / -2);
|
||||
margin-right: (@gutter / -2);
|
||||
.clearfix();
|
||||
|
||||
@media (min-width: @screen-small) {
|
||||
margin-left: (@grid-gutter-width / -2);
|
||||
margin-right: (@grid-gutter-width / -2);
|
||||
}
|
||||
|
||||
// Negative margin nested rows out to align the content of columns
|
||||
.row {
|
||||
margin-left: (@grid-gutter-width / -2);
|
||||
margin-right: (@grid-gutter-width / -2);
|
||||
}
|
||||
}
|
||||
|
||||
// Generate the columns
|
||||
.make-column(@columns) {
|
||||
// Generate the extra small columns
|
||||
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: percentage((@columns / @grid-columns));
|
||||
// Prevent columns from collapsing when empty
|
||||
min-height: 1px;
|
||||
// Inner gutter via padding
|
||||
padding-left: (@gutter / 2);
|
||||
padding-right: (@gutter / 2);
|
||||
}
|
||||
|
||||
// Generate the small columns
|
||||
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
|
||||
position: relative;
|
||||
// Prevent columns from collapsing when empty
|
||||
min-height: 1px;
|
||||
// Inner gutter via padding
|
||||
padding-left: (@grid-gutter-width / 2);
|
||||
padding-right: (@grid-gutter-width / 2);
|
||||
padding-left: (@gutter / 2);
|
||||
padding-right: (@gutter / 2);
|
||||
|
||||
// Calculate width based on number of columns available
|
||||
@media (min-width: @grid-float-breakpoint) {
|
||||
@media (min-width: @screen-sm) {
|
||||
float: left;
|
||||
width: percentage((@columns / @grid-columns));
|
||||
}
|
||||
}
|
||||
|
||||
// Generate the column offsets
|
||||
.make-column-offset(@columns) {
|
||||
@media (min-width: @grid-float-breakpoint) {
|
||||
// Generate the small column offsets
|
||||
.make-sm-column-offset(@columns) {
|
||||
@media (min-width: @screen-sm) {
|
||||
margin-left: percentage((@columns / @grid-columns));
|
||||
}
|
||||
}
|
||||
.make-column-push(@columns) {
|
||||
@media (min-width: @grid-float-breakpoint) {
|
||||
.make-sm-column-push(@columns) {
|
||||
@media (min-width: @screen-sm) {
|
||||
left: percentage((@columns / @grid-columns));
|
||||
}
|
||||
}
|
||||
.make-column-pull(@columns) {
|
||||
@media (min-width: @grid-float-breakpoint) {
|
||||
.make-sm-column-pull(@columns) {
|
||||
@media (min-width: @screen-sm) {
|
||||
right: percentage((@columns / @grid-columns));
|
||||
}
|
||||
}
|
||||
|
||||
// Generate the small columns
|
||||
.make-small-column(@columns) {
|
||||
// Generate the medium columns
|
||||
.make-md-column(@columns; @gutter: @grid-gutter-width) {
|
||||
position: relative;
|
||||
float: left;
|
||||
// Prevent columns from collapsing when empty
|
||||
min-height: 1px;
|
||||
// Inner gutter via padding
|
||||
padding-left: (@grid-gutter-width / 2);
|
||||
padding-right: (@grid-gutter-width / 2);
|
||||
@max-width: (@grid-float-breakpoint - 1);
|
||||
padding-left: (@gutter / 2);
|
||||
padding-right: (@gutter / 2);
|
||||
|
||||
// Calculate width based on number of columns available
|
||||
@media (max-width: @max-width) {
|
||||
@media (min-width: @screen-md) {
|
||||
float: left;
|
||||
width: percentage((@columns / @grid-columns));
|
||||
}
|
||||
}
|
||||
|
||||
// Generate the large column offsets
|
||||
.make-md-column-offset(@columns) {
|
||||
@media (min-width: @screen-md) {
|
||||
margin-left: percentage((@columns / @grid-columns));
|
||||
}
|
||||
}
|
||||
.make-md-column-push(@columns) {
|
||||
@media (min-width: @screen-md) {
|
||||
left: percentage((@columns / @grid-columns));
|
||||
}
|
||||
}
|
||||
.make-md-column-pull(@columns) {
|
||||
@media (min-width: @screen-md) {
|
||||
right: percentage((@columns / @grid-columns));
|
||||
}
|
||||
}
|
||||
|
||||
// Generate the large columns
|
||||
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
|
||||
position: relative;
|
||||
// Prevent columns from collapsing when empty
|
||||
min-height: 1px;
|
||||
// Inner gutter via padding
|
||||
padding-left: (@gutter / 2);
|
||||
padding-right: (@gutter / 2);
|
||||
|
||||
// Calculate width based on number of columns available
|
||||
@media (min-width: @screen-lg) {
|
||||
float: left;
|
||||
width: percentage((@columns / @grid-columns));
|
||||
}
|
||||
}
|
||||
|
||||
// Generate the large column offsets
|
||||
.make-lg-column-offset(@columns) {
|
||||
@media (min-width: @screen-lg) {
|
||||
margin-left: percentage((@columns / @grid-columns));
|
||||
}
|
||||
}
|
||||
.make-lg-column-push(@columns) {
|
||||
@media (min-width: @screen-lg) {
|
||||
left: percentage((@columns / @grid-columns));
|
||||
}
|
||||
}
|
||||
.make-lg-column-pull(@columns) {
|
||||
@media (min-width: @screen-lg) {
|
||||
right: percentage((@columns / @grid-columns));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Form validation states
|
||||
//
|
||||
@@ -558,3 +698,26 @@
|
||||
.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& {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
+1
-1
@@ -49,7 +49,7 @@
|
||||
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);
|
||||
background-clip: padding-box;
|
||||
// Remove focus outline from opened modal
|
||||
outline: none;
|
||||
}
|
||||
|
||||
+358
-213
@@ -2,32 +2,200 @@
|
||||
// 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: 20px;
|
||||
padding-left: @navbar-padding-horizontal;
|
||||
padding-right: @navbar-padding-horizontal;
|
||||
margin-bottom: @navbar-margin-bottom;
|
||||
background-color: @navbar-bg;
|
||||
border-radius: @navbar-border-radius;
|
||||
border: 1px solid @navbar-border;
|
||||
|
||||
// Prevent floats from breaking the navbar
|
||||
.clearfix();
|
||||
|
||||
@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 {
|
||||
padding-left: @navbar-padding-horizontal;
|
||||
padding-right: @navbar-padding-horizontal;
|
||||
.clearfix();
|
||||
|
||||
@media (min-width: @grid-float-breakpoint) {
|
||||
float: left;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
margin-right: @navbar-padding-horizontal;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 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 {
|
||||
max-height: 340px;
|
||||
overflow-x: visible;
|
||||
padding-right: @navbar-padding-horizontal;
|
||||
padding-left: @navbar-padding-horizontal;
|
||||
border-top: 1px solid darken(@navbar-bg, 7%);
|
||||
box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
|
||||
.clearfix();
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
&.in {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@media (min-width: @grid-float-breakpoint) {
|
||||
width: auto;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Navbar alignment options
|
||||
//
|
||||
// Display the navbar across the entirity of the page or fixed it to the top or
|
||||
// bottom of the page.
|
||||
|
||||
// Static top (unfixed, but 100% wide) navbar
|
||||
.navbar-static-top {
|
||||
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;
|
||||
border-width: 0 0 1px;
|
||||
|
||||
// Undo the rounded corners
|
||||
@media (min-width: @grid-float-breakpoint) {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
.navbar-fixed-top {
|
||||
top: 0;
|
||||
}
|
||||
.navbar-fixed-bottom {
|
||||
bottom: 0;
|
||||
margin-bottom: 0; // override .navbar defaults
|
||||
}
|
||||
|
||||
|
||||
// Brand/project name
|
||||
|
||||
.navbar-brand {
|
||||
float: left;
|
||||
padding-top: @navbar-padding-vertical;
|
||||
padding-bottom: @navbar-padding-vertical;
|
||||
font-size: @font-size-large;
|
||||
line-height: @line-height-computed;
|
||||
color: @navbar-brand-color;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @navbar-brand-hover-color;
|
||||
text-decoration: none;
|
||||
background-color: @navbar-brand-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Navbar toggle
|
||||
//
|
||||
// Custom button for toggling the `.navbar-collapse`, powered by the collapse
|
||||
// JavaScript plugin.
|
||||
|
||||
.navbar-toggle {
|
||||
position: relative;
|
||||
float: right;
|
||||
padding: 9px 10px;
|
||||
.navbar-vertical-align(34px);
|
||||
background-color: transparent;
|
||||
border: 1px solid @navbar-toggle-border-color;
|
||||
border-radius: @border-radius-base;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: @navbar-toggle-hover-bg;
|
||||
}
|
||||
|
||||
// Bars
|
||||
.icon-bar {
|
||||
display: block;
|
||||
width: 22px;
|
||||
height: 2px;
|
||||
background-color: @navbar-toggle-icon-bar-bg;
|
||||
border-radius: 1px;
|
||||
}
|
||||
.icon-bar + .icon-bar {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
@media (min-width: @grid-float-breakpoint) {
|
||||
position: relative;
|
||||
top: auto;
|
||||
left: auto;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Navbar nav links
|
||||
// -------------------------
|
||||
//
|
||||
// Builds on top of the `.nav` components with it's own modifier class to make
|
||||
// the nav the full height of the horizontal nav (above 768px).
|
||||
|
||||
.navbar-nav {
|
||||
margin-bottom: 15px;
|
||||
margin: (@navbar-padding-vertical / 2) -@navbar-padding-horizontal;
|
||||
|
||||
> li > a {
|
||||
padding-top: ((@navbar-height - @line-height-computed) / 2);
|
||||
padding-bottom: ((@navbar-height - @line-height-computed) / 2);
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
color: @navbar-link-color;
|
||||
line-height: @line-height-computed;
|
||||
border-radius: @border-radius-base;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @navbar-link-hover-color;
|
||||
@@ -51,148 +219,132 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Right aligned contents
|
||||
// Make them full width first so that they align properly on mobile
|
||||
&.pull-right {
|
||||
width: 100%;
|
||||
@media (max-width: @screen-xs-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 {
|
||||
color: @navbar-link-color;
|
||||
line-height: @line-height-computed;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @navbar-link-hover-color;
|
||||
background-color: @navbar-link-hover-bg;
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
> .active > a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @navbar-link-active-color;
|
||||
background-color: @navbar-link-active-bg;
|
||||
}
|
||||
}
|
||||
> .disabled > a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @navbar-link-disabled-color;
|
||||
background-color: @navbar-link-disabled-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Uncollapse the nav
|
||||
@media (min-width: @grid-float-breakpoint) {
|
||||
float: left;
|
||||
margin: 0;
|
||||
|
||||
> li {
|
||||
float: left;
|
||||
> a {
|
||||
padding-top: ((@navbar-height - @line-height-computed) / 2);
|
||||
padding-bottom: ((@navbar-height - @line-height-computed) / 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Component alignment
|
||||
//
|
||||
// Navbar alignment options
|
||||
// --------------------------------------------------
|
||||
// Repurpose the pull utilities as their own navbar utilities to avoid specifity
|
||||
// issues with parents and chaining. Only do this when the navbar is uncollapsed
|
||||
// though so that navbar contents properly stack and align in mobile.
|
||||
|
||||
// Static navbar
|
||||
.navbar-static-top {
|
||||
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;
|
||||
border-radius: 0;
|
||||
}
|
||||
.navbar-fixed-top {
|
||||
top: 0;
|
||||
}
|
||||
.navbar-fixed-bottom {
|
||||
bottom: 0;
|
||||
margin-bottom: 0; // override .navbar defaults
|
||||
}
|
||||
|
||||
.nav-collapse {
|
||||
// Space out collapsed contents within the mobile navbar
|
||||
padding-bottom: @navbar-padding-vertical;
|
||||
// Clear floated elements and prevent collapsing of padding
|
||||
.clearfix();
|
||||
|
||||
// When there is no `.navbar-brand` present (which normally sits between the
|
||||
// navbar brand and toggle), prevent the nav from overlapping the toggle.
|
||||
.navbar-toggle + & {
|
||||
width: 100%;
|
||||
margin-top: @navbar-height;
|
||||
@media (min-width: @grid-float-breakpoint) {
|
||||
.navbar-left { .pull-left(); }
|
||||
.navbar-right {
|
||||
.pull-right();
|
||||
.dropdown-menu {
|
||||
.pull-right > .dropdown-menu();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Scrollable navbar navigation
|
||||
//
|
||||
// Sometimes you might have too many links in your fixed navbar and you need to
|
||||
// maintain access to all that content. To help, add `.nav-collapse-scrollable`
|
||||
// to your `.nav-collapse` to prevent the the content from flowing past the max-
|
||||
// height of your browser.
|
||||
//
|
||||
// This is not automatically added to the `.navbar-fixed-top` because it causes
|
||||
// z-index bugs in iOS7 (possibly earlier).
|
||||
|
||||
@media (max-width: @screen-small) {
|
||||
.nav-collapse-scrollable {
|
||||
margin-bottom: @navbar-padding-vertical;
|
||||
max-height: 360px;
|
||||
overflow-y: scroll;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Navbar optional components
|
||||
// --------------------------------------------------
|
||||
|
||||
// Brand/project name
|
||||
.navbar-brand {
|
||||
display: block;
|
||||
max-width: 200px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: @navbar-padding-vertical @navbar-padding-horizontal;
|
||||
font-size: @font-size-large;
|
||||
font-weight: 500;
|
||||
line-height: @line-height-computed;
|
||||
color: @navbar-brand-color;
|
||||
text-align: center;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @navbar-brand-hover-color;
|
||||
text-decoration: none;
|
||||
background-color: @navbar-brand-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// Collapsible navbar toggle
|
||||
.navbar-toggle {
|
||||
position: relative;
|
||||
float: right;
|
||||
height: 34px;
|
||||
width: 48px;
|
||||
.navbar-vertical-align(34px);
|
||||
padding: @padding-base-vertical @padding-base-horizontal;
|
||||
background-color: transparent;
|
||||
border: 1px solid @navbar-toggle-border-color;
|
||||
border-radius: @border-radius-base;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: @navbar-toggle-hover-bg;
|
||||
}
|
||||
|
||||
// Bars
|
||||
.icon-bar {
|
||||
display: block;
|
||||
width: 22px;
|
||||
height: 2px;
|
||||
background-color: @navbar-toggle-icon-bar-bg;
|
||||
border-radius: 1px;
|
||||
}
|
||||
.icon-bar + .icon-bar {
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
// 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 darken(@navbar-bg, 7%);
|
||||
border-bottom: 1px solid darken(@navbar-bg, 7%);
|
||||
@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();
|
||||
.navbar-vertical-align(@input-height-base); // Vertically center in navbar
|
||||
|
||||
.form-group {
|
||||
@media (max-width: @screen-xs-max) {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
// 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-left-radius: 0;
|
||||
border-top-right-radius: 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 {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
.border-bottom-radius(0);
|
||||
}
|
||||
|
||||
// Dropdown menu items and carets
|
||||
@@ -231,12 +383,50 @@
|
||||
}
|
||||
|
||||
|
||||
// Buttons in navbars
|
||||
//
|
||||
// Vertically center a button within a navbar (when *not* in a form).
|
||||
|
||||
.navbar-btn {
|
||||
.navbar-vertical-align(@input-height-base);
|
||||
}
|
||||
|
||||
|
||||
// Text in navbars
|
||||
//
|
||||
// Add a class to make any element properly align itself vertically within the navbars.
|
||||
|
||||
.navbar-text {
|
||||
float: left;
|
||||
color: @navbar-color;
|
||||
.navbar-vertical-align(@line-height-computed);
|
||||
|
||||
@media (min-width: @grid-float-breakpoint) {
|
||||
margin-left: @navbar-padding-horizontal;
|
||||
margin-right: @navbar-padding-horizontal;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Links in navbars
|
||||
//
|
||||
// Add a class to ensure links outside the navbar nav are colored correctly.
|
||||
|
||||
// Default navbar variables
|
||||
.navbar-link {
|
||||
color: @navbar-link-color;
|
||||
&:hover {
|
||||
color: @navbar-link-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Inverse navbar
|
||||
// --------------------------------------------------
|
||||
|
||||
.navbar-inverse {
|
||||
background-color: @navbar-inverse-bg;
|
||||
border-color: @navbar-inverse-border;
|
||||
|
||||
.navbar-brand {
|
||||
color: @navbar-inverse-brand-color;
|
||||
@@ -291,6 +481,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-collapse,
|
||||
.navbar-form {
|
||||
border-color: darken(@navbar-inverse-bg, 7%);
|
||||
}
|
||||
|
||||
// Dropdowns
|
||||
.navbar-nav {
|
||||
> .open > a {
|
||||
@@ -319,96 +514,46 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Responsive navbar
|
||||
// --------------------------------------------------
|
||||
|
||||
@media screen and (min-width: @grid-float-breakpoint) {
|
||||
|
||||
.navbar-brand {
|
||||
float: left;
|
||||
margin-left: -(@navbar-padding-horizontal);
|
||||
margin-right: 5px;
|
||||
max-width: none; // Disables the default mobile setting
|
||||
}
|
||||
.navbar-nav {
|
||||
float: left;
|
||||
// undo margin to make nav extend full height of navbar
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
|
||||
> li {
|
||||
float: left;
|
||||
> a {
|
||||
border-radius: 0;
|
||||
@media (max-width: @screen-xs-max) {
|
||||
// Dropdowns get custom display
|
||||
.open .dropdown-menu {
|
||||
> .dropdown-header {
|
||||
border-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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.pull-right {
|
||||
width: auto;
|
||||
.navbar-link {
|
||||
color: @navbar-inverse-link-color;
|
||||
&:hover {
|
||||
color: @navbar-inverse-link-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Required to make the collapsing navbar work on regular desktops
|
||||
.navbar-toggle {
|
||||
position: relative;
|
||||
top: auto;
|
||||
left: auto;
|
||||
display: none;
|
||||
}
|
||||
.nav-collapse.collapse {
|
||||
display: block !important;
|
||||
height: auto !important;
|
||||
padding-bottom: 0; // Override default setting
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Buttons in navbars
|
||||
//
|
||||
// Vertically center a button within a navbar (when *not* in a form).
|
||||
|
||||
.navbar-btn {
|
||||
margin-top: ((@navbar-height - @input-height-base) / 2);
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Text in navbars
|
||||
//
|
||||
// Add a class to make any element properly align itself vertically within the navbars.
|
||||
|
||||
.navbar-text {
|
||||
float: left;
|
||||
padding: 0 @navbar-padding-horizontal;
|
||||
.navbar-vertical-align(@line-height-computed);
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Links in navbars
|
||||
//
|
||||
// Add a class to ensure links outside the navbar nav are colored correctly.
|
||||
|
||||
// Default navbar variables
|
||||
.navbar-link {
|
||||
color: @navbar-link-color;
|
||||
&:hover {
|
||||
color: @navbar-link-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Use the inverse navbar variables
|
||||
.navbar-inverse .navbar-link {
|
||||
color: @navbar-inverse-link-color;
|
||||
&:hover {
|
||||
color: @navbar-inverse-link-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
+19
-12
@@ -19,7 +19,7 @@
|
||||
> a {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 10px 15px;
|
||||
padding: @nav-link-padding;
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
@@ -42,17 +42,12 @@
|
||||
}
|
||||
|
||||
// Open dropdowns
|
||||
&.open > a {
|
||||
.open > a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @nav-open-link-hover-color;
|
||||
background-color: @link-color;
|
||||
background-color: @nav-link-hover-bg;
|
||||
border-color: @link-color;
|
||||
.caret {
|
||||
border-top-color: @nav-open-caret-border-color;
|
||||
border-bottom-color: @nav-open-caret-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -60,6 +55,12 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -81,7 +82,7 @@
|
||||
border: 1px solid transparent;
|
||||
border-radius: @border-radius-base @border-radius-base 0 0;
|
||||
&:hover {
|
||||
border-color: @nav-tabs-link-hover-border-color;
|
||||
border-color: @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color @nav-tabs-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -153,14 +154,20 @@
|
||||
|
||||
.nav-justified {
|
||||
width: 100%;
|
||||
|
||||
> li {
|
||||
float: none;
|
||||
display: table-cell;
|
||||
width: 1%;
|
||||
> a {
|
||||
> a {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: @screen-sm) {
|
||||
> li {
|
||||
display: table-cell;
|
||||
width: 1%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Move borders to anchors instead of bottom of list
|
||||
|
||||
+1
-1
@@ -23,7 +23,7 @@
|
||||
> a:hover,
|
||||
> a:focus {
|
||||
text-decoration: none;
|
||||
background-color: @pagination-active-bg;
|
||||
background-color: @pagination-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+22
-47
@@ -11,18 +11,19 @@
|
||||
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;
|
||||
background-color: @pagination-bg;
|
||||
border: 1px solid @pagination-border;
|
||||
border-left-width: 0;
|
||||
margin-left: -1px;
|
||||
}
|
||||
&:first-child {
|
||||
> a,
|
||||
> span {
|
||||
border-left-width: 1px;
|
||||
margin-left: 0;
|
||||
.border-left-radius(@border-radius-base);
|
||||
}
|
||||
}
|
||||
@@ -34,16 +35,25 @@
|
||||
}
|
||||
}
|
||||
|
||||
> li > a:hover,
|
||||
> li > a:focus,
|
||||
> .active > a,
|
||||
> .active > span {
|
||||
background-color: @pagination-active-bg;
|
||||
> li > a,
|
||||
> li > span {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: @pagination-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
> .active > a,
|
||||
> .active > span {
|
||||
color: @pagination-active-color;
|
||||
cursor: default;
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
z-index: 2;
|
||||
color: @pagination-active-color;
|
||||
background-color: @pagination-active-bg;
|
||||
border-color: @pagination-active-bg;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
> .disabled {
|
||||
@@ -53,6 +63,7 @@
|
||||
> a:focus {
|
||||
color: @pagination-disabled-color;
|
||||
background-color: @pagination-bg;
|
||||
border-color: @pagination-border;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
@@ -63,46 +74,10 @@
|
||||
|
||||
// Large
|
||||
.pagination-lg {
|
||||
> li {
|
||||
> a,
|
||||
> span {
|
||||
padding: @padding-large-vertical @padding-large-horizontal;
|
||||
font-size: @font-size-large;
|
||||
}
|
||||
&:first-child {
|
||||
> a,
|
||||
> span {
|
||||
.border-left-radius(@border-radius-large);
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
> a,
|
||||
> span {
|
||||
.border-right-radius(@border-radius-large);
|
||||
}
|
||||
}
|
||||
}
|
||||
.pagination-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @border-radius-large);
|
||||
}
|
||||
|
||||
// Small
|
||||
.pagination-sm {
|
||||
> li {
|
||||
> a,
|
||||
> span {
|
||||
padding: @padding-small-vertical @padding-small-horizontal;
|
||||
font-size: @font-size-small;
|
||||
}
|
||||
&:first-child {
|
||||
> a,
|
||||
> span {
|
||||
.border-left-radius(@border-radius-small);
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
> a,
|
||||
> span {
|
||||
.border-right-radius(@border-radius-small);
|
||||
}
|
||||
}
|
||||
}
|
||||
.pagination-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @border-radius-small);
|
||||
}
|
||||
|
||||
+67
-43
@@ -5,16 +5,27 @@
|
||||
|
||||
// Base class
|
||||
.panel {
|
||||
padding: 15px;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: @line-height-computed;
|
||||
background-color: @panel-bg;
|
||||
border: 1px solid @panel-border;
|
||||
border-radius: @panel-border-radius;
|
||||
.box-shadow(0 1px 1px rgba(0,0,0,.05));
|
||||
}
|
||||
|
||||
// List groups in panels
|
||||
.list-group {
|
||||
margin: 15px -15px -15px;
|
||||
// Panel contents
|
||||
.panel-body {
|
||||
padding: 15px;
|
||||
.clearfix();
|
||||
}
|
||||
|
||||
// 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 {
|
||||
margin-bottom: 0;
|
||||
|
||||
.list-group-item {
|
||||
border-width: 1px 0;
|
||||
@@ -30,23 +41,26 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
// Collapse space between when there's no additional content.
|
||||
.panel-heading + .list-group {
|
||||
.list-group-item:first-child {
|
||||
border-top-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Optional heading
|
||||
.panel-heading {
|
||||
margin: -15px -15px 15px;
|
||||
padding: 10px 15px;
|
||||
background-color: @panel-heading-bg;
|
||||
border-bottom: 1px solid @panel-border;
|
||||
border-top-left-radius: (@panel-border-radius - 1);
|
||||
border-top-right-radius: (@panel-border-radius - 1);
|
||||
.border-top-radius(@panel-border-radius - 1);
|
||||
}
|
||||
|
||||
// Within heading, strip any `h*` tag of it's default margins for spacing.
|
||||
.panel-title {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
font-size: (@font-size-base * 1.25);
|
||||
font-weight: 500;
|
||||
font-size: ceil((@font-size-base * 1.125));
|
||||
> a {
|
||||
color: inherit;
|
||||
}
|
||||
@@ -54,52 +68,62 @@
|
||||
|
||||
// Optional footer (stays gray in every modifier class)
|
||||
.panel-footer {
|
||||
margin: 15px -15px -15px;
|
||||
padding: 10px 15px;
|
||||
background-color: @panel-footer-bg;
|
||||
border-top: 1px solid @panel-border;
|
||||
border-bottom-left-radius: (@panel-border-radius - 1);
|
||||
border-bottom-right-radius: (@panel-border-radius - 1);
|
||||
.border-bottom-radius(@panel-border-radius - 1);
|
||||
}
|
||||
|
||||
|
||||
// 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 {
|
||||
// Tighten up margin so it's only between panels
|
||||
.panel {
|
||||
margin-bottom: 0;
|
||||
border-radius: @panel-border-radius;
|
||||
overflow: hidden; // crop contents when collapsed
|
||||
+ .panel {
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-heading {
|
||||
border-bottom: 0;
|
||||
+ .panel-collapse .panel-body {
|
||||
border-top: 1px solid @panel-border;
|
||||
}
|
||||
}
|
||||
.panel-footer {
|
||||
border-top: 0;
|
||||
+ .panel-collapse .panel-body {
|
||||
border-bottom: 1px solid @panel-border;
|
||||
}
|
||||
}
|
||||
|
||||
// New subcomponent for wrapping collapsable content for proper animations
|
||||
.panel-collapse {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Contextual variations
|
||||
.panel-primary {
|
||||
border-color: @panel-primary-border;
|
||||
.panel-heading {
|
||||
color: @panel-primary-text;
|
||||
background-color: @panel-primary-heading-bg;
|
||||
border-color: @panel-primary-border;
|
||||
}
|
||||
.panel-variant(@panel-primary-border; @panel-primary-text; @panel-primary-heading-bg; @panel-primary-border);
|
||||
}
|
||||
.panel-success {
|
||||
border-color: @panel-success-border;
|
||||
.panel-heading {
|
||||
color: @panel-success-text;
|
||||
background-color: @panel-success-heading-bg;
|
||||
border-color: @panel-success-border;
|
||||
}
|
||||
.panel-variant(@panel-success-border; @panel-success-text; @panel-success-heading-bg; @panel-success-border);
|
||||
}
|
||||
.panel-warning {
|
||||
border-color: @panel-warning-border;
|
||||
.panel-heading {
|
||||
color: @panel-warning-text;
|
||||
background-color: @panel-warning-heading-bg;
|
||||
border-color: @panel-warning-border;
|
||||
}
|
||||
.panel-variant(@panel-warning-border; @panel-warning-text; @panel-warning-heading-bg; @panel-warning-border);
|
||||
}
|
||||
.panel-danger {
|
||||
border-color: @panel-danger-border;
|
||||
.panel-heading {
|
||||
color: @panel-danger-text;
|
||||
background-color: @panel-danger-heading-bg;
|
||||
border-color: @panel-danger-border;
|
||||
}
|
||||
.panel-variant(@panel-danger-border; @panel-danger-text; @panel-danger-heading-bg; @panel-danger-border);
|
||||
}
|
||||
.panel-info {
|
||||
border-color: @panel-info-border;
|
||||
.panel-heading {
|
||||
color: @panel-info-text;
|
||||
background-color: @panel-info-heading-bg;
|
||||
border-color: @panel-info-border;
|
||||
}
|
||||
.panel-variant(@panel-info-border; @panel-info-text; @panel-info-heading-bg; @panel-info-border);
|
||||
}
|
||||
|
||||
@@ -13,8 +13,6 @@
|
||||
padding: 1px;
|
||||
text-align: left; // Reset given new insertion method
|
||||
background-color: @popover-bg;
|
||||
-webkit-bg-clip: padding-box;
|
||||
-moz-bg-clip: padding;
|
||||
background-clip: padding-box;
|
||||
border: 1px solid @popover-fallback-border-color;
|
||||
border: 1px solid @popover-border-color;
|
||||
|
||||
+7
-11
@@ -61,7 +61,7 @@
|
||||
// Striped bars
|
||||
.progress-striped .progress-bar {
|
||||
#gradient > .striped(@progress-bar-bg);
|
||||
.background-size(40px 40px);
|
||||
background-size: 40px 40px;
|
||||
}
|
||||
|
||||
// Call animation for the active one
|
||||
@@ -78,22 +78,18 @@
|
||||
// Variations
|
||||
// -------------------------
|
||||
|
||||
// Danger (red)
|
||||
.progress-bar-danger {
|
||||
.progress-bar-variant(@progress-bar-danger-bg);
|
||||
}
|
||||
|
||||
// Success (green)
|
||||
.progress-bar-success {
|
||||
.progress-bar-variant(@progress-bar-success-bg);
|
||||
}
|
||||
|
||||
// Warning (orange)
|
||||
.progress-bar-info {
|
||||
.progress-bar-variant(@progress-bar-info-bg);
|
||||
}
|
||||
|
||||
.progress-bar-warning {
|
||||
.progress-bar-variant(@progress-bar-warning-bg);
|
||||
}
|
||||
|
||||
// Info (teal)
|
||||
.progress-bar-info {
|
||||
.progress-bar-variant(@progress-bar-info-bg);
|
||||
.progress-bar-danger {
|
||||
.progress-bar-variant(@progress-bar-danger-bg);
|
||||
}
|
||||
|
||||
@@ -35,70 +35,100 @@
|
||||
|
||||
// Visibility utilities
|
||||
|
||||
// For Phones
|
||||
.visible-sm {
|
||||
.visible-xs {
|
||||
.responsive-visibility();
|
||||
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
@media (min-width: @screen-lg) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
}
|
||||
.visible-sm {
|
||||
.responsive-invisibility();
|
||||
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
@media (min-width: @screen-lg) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
}
|
||||
.visible-md {
|
||||
.responsive-invisibility();
|
||||
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
@media (min-width: @screen-lg) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
}
|
||||
.visible-lg {
|
||||
.responsive-invisibility();
|
||||
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
@media (min-width: @screen-lg) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
}
|
||||
|
||||
.hidden-sm {
|
||||
.hidden-xs {
|
||||
.responsive-invisibility();
|
||||
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
@media (min-width: @screen-lg) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
}
|
||||
.hidden-sm {
|
||||
.responsive-visibility();
|
||||
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
@media (min-width: @screen-lg) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
}
|
||||
.hidden-md {
|
||||
.responsive-visibility();
|
||||
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
@media (min-width: @screen-lg) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
}
|
||||
.hidden-lg {
|
||||
.responsive-visibility();
|
||||
}
|
||||
|
||||
|
||||
// Tablets & small desktops only
|
||||
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
|
||||
.visible-sm {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
.visible-md {
|
||||
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
.visible-lg {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
|
||||
.hidden-sm {
|
||||
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
.hidden-md {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
.hidden-lg {
|
||||
.responsive-visibility();
|
||||
}
|
||||
}
|
||||
|
||||
// For desktops
|
||||
@media (min-width: @screen-desktop) {
|
||||
.visible-sm {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
.visible-md {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
.visible-lg {
|
||||
.responsive-visibility();
|
||||
}
|
||||
|
||||
.hidden-sm {
|
||||
.responsive-visibility();
|
||||
}
|
||||
.hidden-md {
|
||||
.responsive-visibility();
|
||||
}
|
||||
.hidden-lg {
|
||||
@media (min-width: @screen-lg) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
}
|
||||
@@ -107,7 +137,6 @@
|
||||
.visible-print {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
.hidden-print { }
|
||||
|
||||
@media print {
|
||||
.visible-print {
|
||||
|
||||
+27
-5
@@ -6,7 +6,9 @@
|
||||
// Reset the box-sizing
|
||||
// -------------------------
|
||||
|
||||
* {
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
.box-sizing(border-box);
|
||||
}
|
||||
|
||||
@@ -37,6 +39,14 @@ textarea {
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
// Reset unusual Firefox-on-Android default style, see https://github.com/necolas/normalize.css/issues/214
|
||||
button,
|
||||
input,
|
||||
select[multiple],
|
||||
textarea {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
|
||||
// Links
|
||||
// -------------------------
|
||||
@@ -64,9 +74,7 @@ img {
|
||||
|
||||
// Responsive images (ensure images don't scale beyond their parents)
|
||||
.img-responsive {
|
||||
display: inline-block;
|
||||
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
|
||||
.img-responsive();
|
||||
}
|
||||
|
||||
// Rounded corners
|
||||
@@ -79,7 +87,7 @@ img {
|
||||
|
||||
// Perfect circle
|
||||
.img-circle {
|
||||
border-radius: 500px; // crank the border-radius so it works with most reasonably sized images
|
||||
border-radius: 50%; // set radius in percents
|
||||
}
|
||||
|
||||
|
||||
@@ -93,3 +101,17 @@ hr {
|
||||
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;
|
||||
}
|
||||
|
||||
+16
-43
@@ -35,6 +35,7 @@ th {
|
||||
// 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,
|
||||
@@ -92,6 +93,14 @@ th {
|
||||
}
|
||||
}
|
||||
}
|
||||
> thead {
|
||||
> tr {
|
||||
> th,
|
||||
> td {
|
||||
border-bottom-width: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -164,48 +173,12 @@ table {
|
||||
&.active > th {
|
||||
background-color: @table-bg-active;
|
||||
}
|
||||
> td.success,
|
||||
> th.success,
|
||||
&.success > td,
|
||||
&.success > th {
|
||||
background-color: @state-success-bg;
|
||||
border-color: @state-success-border;
|
||||
}
|
||||
> td.danger,
|
||||
> th.danger,
|
||||
&.danger > td,
|
||||
&.danger > th {
|
||||
background-color: @state-danger-bg;
|
||||
border-color: @state-danger-border;
|
||||
}
|
||||
> td.warning,
|
||||
> th.warning,
|
||||
&.warning > td,
|
||||
&.warning > th {
|
||||
background-color: @state-warning-bg;
|
||||
border-color: @state-warning-border;
|
||||
}
|
||||
}
|
||||
|
||||
// Hover states for `.table-hover`
|
||||
// Note: this is not available for cells or rows within `thead` or `tfoot`.
|
||||
.table-hover > tbody > tr {
|
||||
> td.success:hover,
|
||||
> th.success:hover,
|
||||
&.success:hover > td {
|
||||
background-color: darken(@state-success-bg, 5%);
|
||||
border-color: darken(@state-success-border, 5%);
|
||||
}
|
||||
> td.danger:hover,
|
||||
> th.danger:hover,
|
||||
&.danger:hover > td {
|
||||
background-color: darken(@state-danger-bg, 5%);
|
||||
border-color: darken(@state-danger-border, 5%);
|
||||
}
|
||||
> td.warning:hover,
|
||||
> th.warning:hover,
|
||||
&.warning:hover > td {
|
||||
background-color: darken(@state-warning-bg, 5%);
|
||||
border-color: darken(@state-warning-border, 5%);
|
||||
}
|
||||
}
|
||||
// Contextual variants
|
||||
// -------------------
|
||||
.table-row-variant(success; @state-success-bg; @state-success-border);
|
||||
|
||||
.table-row-variant(danger; @state-danger-bg; @state-danger-border);
|
||||
|
||||
.table-row-variant(warning; @state-warning-bg; @state-warning-border);
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
// Can be `a`, `div`, or `img`
|
||||
.thumbnail,
|
||||
.img-thumbnail {
|
||||
padding: 4px;
|
||||
padding: @thumbnail-padding;
|
||||
line-height: @line-height-base;
|
||||
background-color: @thumbnail-bg;
|
||||
border: 1px solid @thumbnail-border;
|
||||
@@ -20,10 +20,12 @@
|
||||
.thumbnail {
|
||||
display: block;
|
||||
}
|
||||
.thumbnail > img,
|
||||
.img-thumbnail {
|
||||
.thumbnail > img {
|
||||
.img-responsive();
|
||||
}
|
||||
.img-thumbnail {
|
||||
.img-responsive(inline-block);
|
||||
}
|
||||
|
||||
// Add a hover state for linked versions only
|
||||
a.thumbnail:hover,
|
||||
@@ -37,6 +39,6 @@ a.thumbnail:focus {
|
||||
margin-right: auto;
|
||||
}
|
||||
.thumbnail .caption {
|
||||
padding: 9px;
|
||||
padding: @thumbnail-caption-padding;
|
||||
color: @thumbnail-caption-color;
|
||||
}
|
||||
|
||||
+42
-25
@@ -133,6 +133,7 @@
|
||||
@input-bg: #fff;
|
||||
@input-bg-disabled: @gray-lighter;
|
||||
|
||||
@input-color: @gray;
|
||||
@input-border: #ccc;
|
||||
@input-border-radius: @border-radius-base;
|
||||
@input-border-focus: #66afe9;
|
||||
@@ -143,8 +144,10 @@
|
||||
@input-height-large: (floor(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
|
||||
@input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
|
||||
|
||||
@legend-color: @gray-dark;
|
||||
@legend-border-color: #e5e5e5;
|
||||
|
||||
@input-group-addon-bg: @gray-lighter;
|
||||
@input-group-addon-border-color: @input-border;
|
||||
|
||||
|
||||
@@ -163,6 +166,10 @@
|
||||
@dropdown-link-hover-color: #fff;
|
||||
@dropdown-link-hover-bg: @dropdown-link-active-bg;
|
||||
|
||||
@dropdown-link-disabled-color: @gray-light;
|
||||
|
||||
@dropdown-header-color: @gray-light;
|
||||
|
||||
@dropdown-caret-color: #000;
|
||||
|
||||
|
||||
@@ -186,25 +193,25 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
// Extra small screen / phone
|
||||
@screen-xsmall: 480px;
|
||||
@screen-phone: @screen-xsmall;
|
||||
@screen-xs: 480px;
|
||||
@screen-phone: @screen-xs;
|
||||
|
||||
// Small screen / tablet
|
||||
@screen-small: 768px;
|
||||
@screen-tablet: @screen-small;
|
||||
@screen-sm: 768px;
|
||||
@screen-tablet: @screen-sm;
|
||||
|
||||
// Medium screen / desktop
|
||||
@screen-medium: 992px;
|
||||
@screen-desktop: @screen-medium;
|
||||
@screen-md: 992px;
|
||||
@screen-desktop: @screen-md;
|
||||
|
||||
// Large screen / wide desktop
|
||||
@screen-large: 1200px;
|
||||
@screen-large-desktop: @screen-large;
|
||||
@screen-lg: 1200px;
|
||||
@screen-lg-desktop: @screen-lg;
|
||||
|
||||
// So media queries don't overlap when required, provide a maximum
|
||||
@screen-small-max: (@screen-medium - 1);
|
||||
@screen-tablet-max: (@screen-desktop - 1);
|
||||
@screen-desktop-max: (@screen-large-desktop - 1);
|
||||
@screen-xs-max: (@screen-sm - 1);
|
||||
@screen-sm-max: (@screen-md - 1);
|
||||
@screen-md-max: (@screen-lg - 1);
|
||||
|
||||
|
||||
// Grid system
|
||||
@@ -223,10 +230,12 @@
|
||||
|
||||
// Basics of a navbar
|
||||
@navbar-height: 50px;
|
||||
@navbar-margin-bottom: @line-height-computed;
|
||||
@navbar-color: #777;
|
||||
@navbar-bg: #eee;
|
||||
@navbar-bg: #f8f8f8;
|
||||
@navbar-border: darken(@navbar-bg, 6.5%);
|
||||
@navbar-border-radius: @border-radius-base;
|
||||
@navbar-padding-horizontal: floor(@grid-gutter-width / 2); // ~15px
|
||||
@navbar-padding-horizontal: floor(@grid-gutter-width / 2);
|
||||
@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
|
||||
|
||||
// Navbar links
|
||||
@@ -234,7 +243,7 @@
|
||||
@navbar-link-hover-color: #333;
|
||||
@navbar-link-hover-bg: transparent;
|
||||
@navbar-link-active-color: #555;
|
||||
@navbar-link-active-bg: darken(@navbar-bg, 10%);
|
||||
@navbar-link-active-bg: darken(@navbar-bg, 6.5%);
|
||||
@navbar-link-disabled-color: #ccc;
|
||||
@navbar-link-disabled-bg: transparent;
|
||||
|
||||
@@ -254,6 +263,7 @@
|
||||
// Reset inverted navbar basics
|
||||
@navbar-inverse-color: @gray-light;
|
||||
@navbar-inverse-bg: #222;
|
||||
@navbar-inverse-border: darken(@navbar-inverse-bg, 10%);
|
||||
|
||||
// Inverted navbar links
|
||||
@navbar-inverse-link-color: @gray-light;
|
||||
@@ -285,6 +295,7 @@
|
||||
// Navs
|
||||
// -------------------------
|
||||
|
||||
@nav-link-padding: 10px 15px;
|
||||
@nav-link-hover-bg: @gray-lighter;
|
||||
|
||||
@nav-disabled-link-color: @gray-light;
|
||||
@@ -315,10 +326,15 @@
|
||||
|
||||
@pagination-bg: #fff;
|
||||
@pagination-border: #ddd;
|
||||
@pagination-active-bg: #f5f5f5;
|
||||
@pagination-active-color: @gray-light;
|
||||
|
||||
@pagination-hover-bg: @gray-lighter;
|
||||
|
||||
@pagination-active-bg: @brand-primary;
|
||||
@pagination-active-color: #fff;
|
||||
|
||||
@pagination-disabled-color: @gray-light;
|
||||
|
||||
|
||||
// Pager
|
||||
// -------------------------
|
||||
|
||||
@@ -385,6 +401,7 @@
|
||||
// -------------------------
|
||||
|
||||
@label-default-bg: @gray-light;
|
||||
@label-primary-bg: @brand-primary;
|
||||
@label-success-bg: @brand-success;
|
||||
@label-info-bg: @brand-info;
|
||||
@label-warning-bg: @brand-warning;
|
||||
@@ -491,22 +508,20 @@
|
||||
|
||||
// Thumbnails
|
||||
// -------------------------
|
||||
@thumbnail-caption-color: @text-color;
|
||||
@thumbnail-padding: 4px;
|
||||
@thumbnail-bg: @body-bg;
|
||||
@thumbnail-border: #ddd;
|
||||
@thumbnail-border-radius: @border-radius-base;
|
||||
|
||||
@thumbnail-caption-color: @text-color;
|
||||
@thumbnail-caption-padding: 9px;
|
||||
|
||||
|
||||
// Wells
|
||||
// -------------------------
|
||||
@well-bg: #f5f5f5;
|
||||
|
||||
|
||||
// Accordion
|
||||
// -------------------------
|
||||
@accordion-border-color: #e5e5e5;
|
||||
|
||||
|
||||
// Badges
|
||||
// -------------------------
|
||||
@badge-color: #fff;
|
||||
@@ -557,7 +572,9 @@
|
||||
@code-bg: #f9f2f4;
|
||||
|
||||
@pre-bg: #f5f5f5;
|
||||
@pre-color: @gray-dark;
|
||||
@pre-border-color: #ccc;
|
||||
@pre-scrollable-max-height: 340px;
|
||||
|
||||
// Type
|
||||
// ------------------------
|
||||
@@ -582,10 +599,10 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
// Small screen / tablet
|
||||
@container-tablet: 728px;
|
||||
@container-tablet: ((720px + @grid-gutter-width));
|
||||
|
||||
// Medium screen / desktop
|
||||
@container-desktop: 940px;
|
||||
@container-desktop: ((940px + @grid-gutter-width));
|
||||
|
||||
// Large screen / wide desktop
|
||||
@container-large-desktop: 1170px;
|
||||
@container-lg-desktop: ((1140px + @grid-gutter-width));
|
||||
|
||||
Reference in New Issue
Block a user