mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-11 18:02:28 +03:00
Merge branch '3.0.0-wip' into bs3-normalize
Conflicts: less/bootstrap.less
This commit is contained in:
Mark Otto
@@ -4,7 +4,6 @@
|
||||
|
||||
|
||||
// Base classes
|
||||
.label,
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 2px 4px;
|
||||
@@ -16,29 +15,17 @@
|
||||
white-space: nowrap;
|
||||
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
||||
background-color: @grayLight;
|
||||
}
|
||||
// Set unique padding and border-radii
|
||||
.label {
|
||||
border-radius: 3px;
|
||||
}
|
||||
.badge {
|
||||
padding-left: 9px;
|
||||
padding-right: 9px;
|
||||
border-radius: 9px;
|
||||
}
|
||||
|
||||
// Empty labels/badges collapse
|
||||
.label,
|
||||
.badge {
|
||||
// Empty labels/badges collapse
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Hover state, but only for links
|
||||
a {
|
||||
&.label:hover,
|
||||
&.badge:hover {
|
||||
a.badge {
|
||||
&:hover {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
@@ -47,7 +34,6 @@ a {
|
||||
|
||||
// Colors
|
||||
// Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute)
|
||||
.label,
|
||||
.badge {
|
||||
// Important (red)
|
||||
&-danger { background-color: @state-error-text; }
|
||||
@@ -68,14 +54,12 @@ a {
|
||||
|
||||
// Quick fix for labels/badges in buttons
|
||||
.btn {
|
||||
.label,
|
||||
.badge {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
}
|
||||
.btn-mini {
|
||||
.label,
|
||||
.badge {
|
||||
top: 0;
|
||||
}
|
||||
Vendored
+2
-2
@@ -52,11 +52,11 @@
|
||||
// Components: Misc
|
||||
@import "thumbnails.less";
|
||||
@import "media.less";
|
||||
@import "labels-badges.less";
|
||||
@import "badges.less";
|
||||
@import "progress-bars.less";
|
||||
@import "accordion.less";
|
||||
@import "carousel.less";
|
||||
@import "hero-unit.less";
|
||||
@import "jumbotron.less";
|
||||
|
||||
// Utility classes
|
||||
@import "utilities.less"; // Has to be last to override when necessary
|
||||
|
||||
+8
-12
@@ -126,22 +126,16 @@
|
||||
background-color: @btn-background-highlight;
|
||||
}
|
||||
.btn-primary.dropdown-toggle {
|
||||
background-color: @btn-backround-primary-highlight;
|
||||
background-color: @btn-background-primary-highlight;
|
||||
}
|
||||
.btn-warning.dropdown-toggle {
|
||||
background-color: @btn-backround-warning-highlight;
|
||||
background-color: @btn-background-warning-highlight;
|
||||
}
|
||||
.btn-danger.dropdown-toggle {
|
||||
background-color: @btn-backround-danger-highlight;
|
||||
background-color: @btn-background-danger-highlight;
|
||||
}
|
||||
.btn-success.dropdown-toggle {
|
||||
background-color: @btn-backround-success-highlight;
|
||||
}
|
||||
.btn-info.dropdown-toggle {
|
||||
background-color: @btn-backround-info-highlight;
|
||||
}
|
||||
.btn-inverse.dropdown-toggle {
|
||||
background-color: @btn-backround-inverse-highlight;
|
||||
background-color: @btn-background-success-highlight;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -152,8 +146,6 @@
|
||||
margin-left: 0;
|
||||
}
|
||||
// Carets in other button sizes
|
||||
.btn-mini .caret,
|
||||
.btn-small .caret,
|
||||
.btn-large .caret {
|
||||
margin-top: 6px;
|
||||
}
|
||||
@@ -162,6 +154,10 @@
|
||||
border-right-width: 5px;
|
||||
border-top-width: 5px;
|
||||
}
|
||||
.btn-mini .caret,
|
||||
.btn-small .caret {
|
||||
margin-top: 8px;
|
||||
}
|
||||
// Upside down carets for .dropup
|
||||
.dropup .btn-large .caret {
|
||||
border-bottom-width: 5px;
|
||||
|
||||
+32
-60
@@ -6,51 +6,39 @@
|
||||
// Base styles
|
||||
// --------------------------------------------------
|
||||
|
||||
// Core
|
||||
// Core styles
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 6px 12px;
|
||||
padding: 6px 13px;
|
||||
margin-bottom: 0; // For input.btn
|
||||
font-size: @font-size-base;
|
||||
line-height: @line-height-base;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
.buttonBackground(@btn-background, @btn-background-highlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
|
||||
border: 1px solid @btn-border;
|
||||
border-bottom-color: darken(@btn-border, 10%);
|
||||
border: 1px solid #ccc;
|
||||
border-radius: @border-radius-base;
|
||||
.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
|
||||
.box-shadow(inset 0 1px 0 rgba(255,255,255,.25));
|
||||
|
||||
// Hover state
|
||||
&:hover {
|
||||
color: @grayDark;
|
||||
text-decoration: none;
|
||||
background-position: 0 -15px;
|
||||
|
||||
// transition is only when going to hover, otherwise the background
|
||||
// behind the gradient (there for IE<=9 fallback) gets mismatched
|
||||
.transition(background-position .1s linear);
|
||||
}
|
||||
|
||||
// Focus state for keyboard and accessibility
|
||||
&:focus {
|
||||
.tab-focus();
|
||||
}
|
||||
|
||||
// Active state
|
||||
&.active,
|
||||
&:active {
|
||||
background-image: none;
|
||||
outline: 0;
|
||||
.box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
&.disabled,
|
||||
&[disabled] {
|
||||
cursor: default;
|
||||
&:active,
|
||||
&.active {
|
||||
outline: 0;
|
||||
background-image: none;
|
||||
.box-shadow(~"inset 0 3px 5px rgba(0,0,0,.125), 0 1px 0 rgba(255,255,255,.1)");
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
cursor: default;
|
||||
.opacity(65);
|
||||
.box-shadow(none);
|
||||
}
|
||||
@@ -125,47 +113,25 @@ input[type="button"] {
|
||||
// Alternate buttons
|
||||
// --------------------------------------------------
|
||||
|
||||
// Provide *some* extra contrast for those who can get it
|
||||
.btn-primary.active,
|
||||
.btn-warning.active,
|
||||
.btn-danger.active,
|
||||
.btn-success.active,
|
||||
.btn-info.active,
|
||||
.btn-inverse.active {
|
||||
color: rgba(255,255,255,.75);
|
||||
}
|
||||
|
||||
// Set the backgrounds
|
||||
// -------------------------
|
||||
.btn {
|
||||
// reset here as of 2.0.3 due to Recess property order
|
||||
border-color: #c5c5c5;
|
||||
border-color: rgba(0,0,0,.15) rgba(0,0,0,.15) rgba(0,0,0,.25);
|
||||
.buttonBackground(@btn-background, @btn-background-highlight, @gray, 0 1px 0 rgba(255,255,255,.75));
|
||||
}
|
||||
// Primary appears as blue
|
||||
.btn-primary {
|
||||
.buttonBackground(@btn-backround-primary, @btn-backround-primary-highlight);
|
||||
.buttonBackground(@btn-background-primary, @btn-background-primary-highlight);
|
||||
}
|
||||
// Warning appears are orange
|
||||
.btn-warning {
|
||||
.buttonBackground(@btn-backround-warning, @btn-backround-warning-highlight);
|
||||
.buttonBackground(@btn-background-warning, @btn-background-warning-highlight);
|
||||
}
|
||||
// Danger and error appear as red
|
||||
.btn-danger {
|
||||
.buttonBackground(@btn-backround-danger, @btn-backround-danger-highlight);
|
||||
.buttonBackground(@btn-background-danger, @btn-background-danger-highlight);
|
||||
}
|
||||
// Success appears as green
|
||||
.btn-success {
|
||||
.buttonBackground(@btn-backround-success, @btn-backround-success-highlight);
|
||||
.buttonBackground(@btn-background-success, @btn-background-success-highlight);
|
||||
}
|
||||
// Info appears as a neutral blue
|
||||
.btn-info {
|
||||
.buttonBackground(@btn-backround-info, @btn-backround-info-highlight);
|
||||
}
|
||||
// Inverse appears as dark gray
|
||||
.btn-inverse {
|
||||
.buttonBackground(@btn-backround-inverse, @btn-backround-inverse-highlight);
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Link buttons
|
||||
@@ -174,7 +140,8 @@ input[type="button"] {
|
||||
// Make a button look and behave like a link
|
||||
.btn-link,
|
||||
.btn-link:active,
|
||||
.btn-link[disabled] {
|
||||
.btn-link[disabled],
|
||||
fieldset[disabled] .btn-link {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
.box-shadow(none);
|
||||
@@ -190,7 +157,12 @@ input[type="button"] {
|
||||
text-decoration: underline;
|
||||
background-color: transparent;
|
||||
}
|
||||
.btn-link[disabled]:hover {
|
||||
color: @grayDark;
|
||||
text-decoration: none;
|
||||
.btn-link {
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
&:hover {
|
||||
color: @grayDark;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -119,6 +119,31 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Carousel indicator pips
|
||||
// -----------------------------
|
||||
.carousel-indicators {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
z-index: 5;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin-left: 5px;
|
||||
text-indent: -999px;
|
||||
background-color: #ccc;
|
||||
background-color: rgba(255,255,255,.25);
|
||||
border-radius: 5px;
|
||||
}
|
||||
.active {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Caption for text below images
|
||||
|
||||
+2
-2
@@ -8,11 +8,11 @@
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
line-height: @line-height-base;
|
||||
color: @black;
|
||||
color: #000;
|
||||
text-shadow: 0 1px 0 rgba(255,255,255,1);
|
||||
.opacity(20);
|
||||
&:hover {
|
||||
color: @black;
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
.opacity(40);
|
||||
|
||||
+9
-69
@@ -20,7 +20,7 @@
|
||||
width: 0;
|
||||
height: 0;
|
||||
vertical-align: top;
|
||||
border-top: 4px solid @black;
|
||||
border-top: 4px solid #000;
|
||||
border-right: 4px solid transparent;
|
||||
border-left: 4px solid transparent;
|
||||
content: "";
|
||||
@@ -64,7 +64,7 @@
|
||||
}
|
||||
|
||||
// Links within the dropdown menu
|
||||
li > a {
|
||||
> li > a {
|
||||
display: block;
|
||||
padding: 3px 20px;
|
||||
clear: both;
|
||||
@@ -78,8 +78,7 @@
|
||||
// Hover state
|
||||
// -----------
|
||||
.dropdown-menu li > a:hover,
|
||||
.dropdown-menu li > a:focus,
|
||||
.dropdown-submenu:hover > a {
|
||||
.dropdown-menu li > a:focus {
|
||||
text-decoration: none;
|
||||
color: @dropdown-link-color-hover;
|
||||
#gradient > .vertical(@dropdown-link-background-hover, darken(@dropdown-link-background-hover, 5%));
|
||||
@@ -87,8 +86,8 @@
|
||||
|
||||
// Active state
|
||||
// ------------
|
||||
.dropdown-menu .active > a,
|
||||
.dropdown-menu .active > a:hover {
|
||||
.dropdown-menu > .active > a,
|
||||
.dropdown-menu > .active > a:hover {
|
||||
color: @dropdown-link-color-active;
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
@@ -98,12 +97,12 @@
|
||||
// Disabled state
|
||||
// --------------
|
||||
// Gray out text and ensure the hover state remains gray
|
||||
.dropdown-menu .disabled > a,
|
||||
.dropdown-menu .disabled > a:hover {
|
||||
.dropdown-menu > .disabled > a,
|
||||
.dropdown-menu > .disabled > a:hover {
|
||||
color: @grayLight;
|
||||
}
|
||||
// Nuke hover effects
|
||||
.dropdown-menu .disabled > a:hover {
|
||||
.dropdown-menu > .disabled > a:hover {
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
background-image: none; // Remove CSS gradient
|
||||
@@ -135,7 +134,7 @@
|
||||
// Reverse the caret
|
||||
.caret {
|
||||
border-top: 0;
|
||||
border-bottom: 4px solid @black;
|
||||
border-bottom: 4px solid #000;
|
||||
content: "";
|
||||
}
|
||||
// Different positioning for bottom up menu
|
||||
@@ -146,64 +145,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Sub menus
|
||||
// ---------------------------
|
||||
.dropdown-submenu {
|
||||
position: relative;
|
||||
}
|
||||
// Default dropdowns
|
||||
.dropdown-submenu > .dropdown-menu {
|
||||
top: 0;
|
||||
left: 100%;
|
||||
margin-top: -6px;
|
||||
margin-left: -1px;
|
||||
border-radius: 0 4px 4px 4px;
|
||||
}
|
||||
.dropdown-submenu:hover > .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Dropups
|
||||
.dropup .dropdown-submenu > .dropdown-menu {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: -2px;
|
||||
border-radius: 4px 4px 4px 0;
|
||||
}
|
||||
|
||||
// Caret to indicate there is a submenu
|
||||
.dropdown-submenu > a:after {
|
||||
display: block;
|
||||
content: " ";
|
||||
float: right;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
border-width: 5px 0 5px 5px;
|
||||
border-left-color: darken(@dropdown-background, 20%);
|
||||
margin-top: 5px;
|
||||
margin-right: -10px;
|
||||
}
|
||||
.dropdown-submenu:hover > a:after {
|
||||
border-left-color: @dropdown-link-color-hover;
|
||||
}
|
||||
|
||||
// Left aligned submenus
|
||||
.dropdown-submenu.pull-left {
|
||||
// Undo the float
|
||||
// Yes, this is awkward since .pull-left adds a float, but it sticks to our conventions elsewhere.
|
||||
float: none;
|
||||
|
||||
// Positioning the submenu
|
||||
> .dropdown-menu {
|
||||
left: -100%;
|
||||
margin-left: 10px;
|
||||
border-radius: 4px 0 4px 4px;
|
||||
}
|
||||
}
|
||||
|
||||
// Tweak nav headers
|
||||
// -----------------
|
||||
// Increase padding from 15px to 20px on sides
|
||||
@@ -216,5 +157,4 @@
|
||||
// ---------
|
||||
.typeahead {
|
||||
z-index: 1051;
|
||||
margin-top: 2px; // give it some space to breathe
|
||||
}
|
||||
|
||||
+104
-262
@@ -307,7 +307,7 @@ input[class*="span"],
|
||||
select[class*="span"],
|
||||
textarea[class*="span"],
|
||||
.uneditable-input[class*="span"] {
|
||||
height: 30px;
|
||||
height: @input-height;
|
||||
}
|
||||
// Control row for multiple inputs per line
|
||||
.controls-row {
|
||||
@@ -331,21 +331,24 @@ textarea[class*="span"],
|
||||
// --------------
|
||||
|
||||
// Disabled and read-only inputs
|
||||
input[disabled],
|
||||
select[disabled],
|
||||
textarea[disabled],
|
||||
input[readonly],
|
||||
select[readonly],
|
||||
textarea[readonly] {
|
||||
cursor: not-allowed;
|
||||
background-color: @input-background-disabled;
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
&[disabled],
|
||||
&[readonly],
|
||||
fieldset[disabled] & {
|
||||
cursor: not-allowed;
|
||||
background-color: @input-background-disabled;
|
||||
}
|
||||
}
|
||||
// Explicitly reset the colors here
|
||||
input[type="radio"][disabled],
|
||||
input[type="checkbox"][disabled],
|
||||
input[type="radio"][readonly],
|
||||
input[type="checkbox"][readonly] {
|
||||
background-color: transparent;
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
&[disabled],
|
||||
&[readonly],
|
||||
fieldset[disabled] & {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -422,273 +425,112 @@ select:focus:invalid {
|
||||
|
||||
|
||||
|
||||
// INPUT GROUPS
|
||||
// ------------
|
||||
|
||||
// Allow us to put symbols and text within the input field for a cleaner look
|
||||
.input-append,
|
||||
.input-prepend {
|
||||
margin-bottom: 5px;
|
||||
font-size: 0; // white space collapse hack
|
||||
white-space: nowrap; // Prevent span and input from separating
|
||||
// Input groups
|
||||
// --------------------------------------------------
|
||||
|
||||
// Reset the white space collapse hack
|
||||
input,
|
||||
select,
|
||||
.uneditable-input,
|
||||
.dropdown-menu {
|
||||
font-size: @font-size-base;
|
||||
// Base styles
|
||||
// -------------------------
|
||||
.input-group {
|
||||
display: table;
|
||||
|
||||
// Undo padding and float of grid classes
|
||||
&[class*="span"] {
|
||||
float: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
.uneditable-input {
|
||||
position: relative; // placed here by default so that on :focus we can place the input above the .add-on for full border and box-shadow goodness
|
||||
float: none; // Undo the float from grid sizing
|
||||
margin: 0; // Prevent bottom margin from screwing up alignment in stacked forms
|
||||
font-size: @font-size-base;
|
||||
vertical-align: top;
|
||||
border-radius: 0 @input-border-radius @input-border-radius 0;
|
||||
// Make input on top when focused so blue border and shadow always show
|
||||
&:focus {
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
input[class*="span"],
|
||||
select[class*="span"],
|
||||
.uneditable-input[class*="span"] {
|
||||
margin: 0;
|
||||
}
|
||||
.add-on {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
height: @line-height-base;
|
||||
min-width: 16px;
|
||||
padding: 6px;
|
||||
font-size: @font-size-base;
|
||||
font-weight: normal;
|
||||
line-height: @line-height-base;
|
||||
text-align: center;
|
||||
text-shadow: 0 1px 0 #fff;
|
||||
background-color: @grayLighter;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
.add-on,
|
||||
.btn,
|
||||
.btn-group > .dropdown-toggle {
|
||||
vertical-align: top;
|
||||
border-radius: 0;
|
||||
}
|
||||
.active {
|
||||
background-color: @state-success-background;
|
||||
border-color: @state-success-text;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.input-prepend {
|
||||
.add-on,
|
||||
.btn {
|
||||
margin-right: -1px;
|
||||
}
|
||||
.add-on:first-child,
|
||||
.btn:first-child {
|
||||
// FYI, `.btn:first-child` accounts for a button group that's prepended
|
||||
border-radius: @input-border-radius 0 0 @input-border-radius;
|
||||
}
|
||||
// Display as table-cell
|
||||
// -------------------------
|
||||
.input-group-addon,
|
||||
.input-group-btn,
|
||||
.input-group input,
|
||||
.input-group .uneditable-input {
|
||||
display: table-cell;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
// Addon and addon wrapper for buttons
|
||||
.input-group-addon,
|
||||
.input-group-btn {
|
||||
width: 1%;
|
||||
vertical-align: middle; // Match the inputs
|
||||
}
|
||||
|
||||
.input-append {
|
||||
input,
|
||||
select,
|
||||
.uneditable-input {
|
||||
border-radius: @input-border-radius 0 0 @input-border-radius;
|
||||
+ .btn-group .btn,
|
||||
+ .btn-group .btn:last-child {
|
||||
border-radius: 0 @input-border-radius @input-border-radius 0;
|
||||
}
|
||||
}
|
||||
.add-on,
|
||||
.btn,
|
||||
.btn-group {
|
||||
margin-left: -1px;
|
||||
}
|
||||
.add-on:last-child,
|
||||
.btn:last-child,
|
||||
.btn-group:last-child > .dropdown-toggle {
|
||||
border-radius: 0 @input-border-radius @input-border-radius 0;
|
||||
}
|
||||
// Text input groups
|
||||
// -------------------------
|
||||
.input-group-addon {
|
||||
.box-sizing(border-box);
|
||||
padding: 6px 8px;
|
||||
font-size: @font-size-base;
|
||||
font-weight: normal;
|
||||
line-height: @line-height-base;
|
||||
text-align: center;
|
||||
text-shadow: 0 1px 0 #fff;
|
||||
background-color: @grayLighter;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
// Remove all border-radius for inputs with both prepend and append
|
||||
.input-prepend.input-append {
|
||||
input,
|
||||
select,
|
||||
.uneditable-input {
|
||||
border-radius: 0;
|
||||
+ .btn-group .btn {
|
||||
border-radius: 0 @input-border-radius @input-border-radius 0;
|
||||
}
|
||||
}
|
||||
.add-on:first-child,
|
||||
.btn:first-child {
|
||||
margin-right: -1px;
|
||||
border-radius: @input-border-radius 0 0 @input-border-radius;
|
||||
}
|
||||
.add-on:last-child,
|
||||
.btn:last-child {
|
||||
margin-left: -1px;
|
||||
border-radius: 0 @input-border-radius @input-border-radius 0;
|
||||
}
|
||||
.btn-group:first-child {
|
||||
margin-left: 0;
|
||||
// Reset rounded corners
|
||||
.input-group input:first-child,
|
||||
.input-group .uneditable-input:first-child,
|
||||
.input-group-addon:first-child {
|
||||
.border-left-radius(@border-radius-base);
|
||||
}
|
||||
.input-group-addon:first-child {
|
||||
border-right: 0;
|
||||
}
|
||||
.input-group input:last-child,
|
||||
.input-group .uneditable-input:last-child,
|
||||
.input-group-addon:last-child {
|
||||
.border-right-radius(@border-radius-base);
|
||||
}
|
||||
.input-group-addon:last-child {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
// Button input groups
|
||||
// -------------------------
|
||||
.input-group-btn,
|
||||
.input-group-btn .btn {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.input-group-btn > .btn {
|
||||
float: left; // Collapse white-space
|
||||
border-radius: 0;
|
||||
+ .btn {
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// SEARCH FORM
|
||||
// -----------
|
||||
|
||||
input.search-query {
|
||||
padding-right: 14px;
|
||||
padding-right: 4px \9;
|
||||
padding-left: 14px;
|
||||
padding-left: 4px \9; /* IE8 doesn't have border radius, so don't indent the padding */
|
||||
margin-bottom: 0; // Remove the default margin on all inputs
|
||||
border-radius: @input-border-radius-search;
|
||||
.input-group-btn.btn-group {
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
/* Allow for input prepend/append in search forms */
|
||||
.form-search .input-append .search-query,
|
||||
.form-search .input-prepend .search-query {
|
||||
border-radius: 0; // Override due to specificity
|
||||
}
|
||||
.form-search .input-append .search-query {
|
||||
border-radius: @input-border-radius-search 0 0 @input-border-radius-search;
|
||||
}
|
||||
.form-search .input-append .btn {
|
||||
border-radius: 0 @input-border-radius-search @input-border-radius-search 0;
|
||||
}
|
||||
.form-search .input-prepend .search-query {
|
||||
border-radius: 0 @input-border-radius-search @input-border-radius-search 0;
|
||||
}
|
||||
.form-search .input-prepend .btn {
|
||||
border-radius: @input-border-radius-search 0 0 @input-border-radius-search;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// HORIZONTAL & VERTICAL FORMS
|
||||
// ---------------------------
|
||||
|
||||
// Common properties
|
||||
// -----------------
|
||||
|
||||
.form-search,
|
||||
.form-inline,
|
||||
.form-horizontal {
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
.help-inline,
|
||||
.uneditable-input,
|
||||
.input-prepend,
|
||||
.input-append {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
// Prepend
|
||||
.input-group-btn {
|
||||
&:first-child > .btn,
|
||||
&.btn-group:first-child > .btn {
|
||||
border-right: 0;
|
||||
}
|
||||
// Re-hide hidden elements due to specifity
|
||||
.hide {
|
||||
display: none;
|
||||
&:first-child > .btn,
|
||||
&.btn-group:first-child > .btn {
|
||||
border-radius: @border-radius-base 0 0 @border-radius-base;
|
||||
}
|
||||
}
|
||||
.form-search label,
|
||||
.form-inline label,
|
||||
.form-search .btn-group,
|
||||
.form-inline .btn-group {
|
||||
display: inline-block;
|
||||
}
|
||||
// Remove margin for input-prepend/-append
|
||||
.form-search .input-append,
|
||||
.form-inline .input-append,
|
||||
.form-search .input-prepend,
|
||||
.form-inline .input-prepend {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
// Inline checkbox/radio labels (remove padding on left)
|
||||
.form-search .radio,
|
||||
.form-search .checkbox,
|
||||
.form-inline .radio,
|
||||
.form-inline .checkbox {
|
||||
display: inline-block;
|
||||
padding-left: 0;
|
||||
label {
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
// Remove float and margin, set to inline-block
|
||||
.form-search .radio input[type="radio"],
|
||||
.form-search .checkbox input[type="checkbox"],
|
||||
.form-inline .radio input[type="radio"],
|
||||
.form-inline .checkbox input[type="checkbox"] {
|
||||
float: left;
|
||||
margin-right: 3px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
|
||||
// Margin to space out fieldsets
|
||||
.control-group {
|
||||
margin-bottom: @line-height-base / 2;
|
||||
}
|
||||
|
||||
// Legend collapses margin, so next element is responsible for spacing
|
||||
legend + .control-group {
|
||||
margin-top: @line-height-base;
|
||||
-webkit-margin-top-collapse: separate;
|
||||
}
|
||||
|
||||
// Horizontal-specific styles
|
||||
// --------------------------
|
||||
|
||||
.form-horizontal {
|
||||
// Increase spacing between groups
|
||||
.control-group {
|
||||
margin-bottom: @line-height-base;
|
||||
.clearfix();
|
||||
}
|
||||
// Float the labels left
|
||||
.control-label {
|
||||
float: left;
|
||||
width: @component-offset-horizontal - 20;
|
||||
padding-top: 5px;
|
||||
text-align: right;
|
||||
}
|
||||
// Move over all input controls and content
|
||||
.controls {
|
||||
margin-left: @component-offset-horizontal;
|
||||
}
|
||||
// Remove bottom margin on block level help text since that's accounted for on .control-group
|
||||
.help-block {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
// And apply it only to .help-block instances that follow a form control
|
||||
input,
|
||||
select,
|
||||
textarea,
|
||||
.uneditable-input,
|
||||
.input-prepend,
|
||||
.input-append {
|
||||
+ .help-block {
|
||||
margin-top: @line-height-base / 2;
|
||||
}
|
||||
}
|
||||
// Move over buttons in .form-actions to align with .controls
|
||||
.form-actions {
|
||||
padding-left: @component-offset-horizontal;
|
||||
// Append
|
||||
.input-group-btn {
|
||||
&:last-child > .btn,
|
||||
&.btn-group:last-child > .btn:first-child {
|
||||
border-left: 0;
|
||||
}
|
||||
&:last-child > .btn,
|
||||
&.btn-group:last-child > .btn {
|
||||
border-radius: 0 @border-radius-base @border-radius-base 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -13,10 +13,6 @@
|
||||
#grid > .core(@grid-column-width, @grid-gutter-width, @grid-row-width);
|
||||
|
||||
// Reset utility classes due to specificity
|
||||
[class*="span"].hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[class*="span"].pull-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
@@ -1,22 +1,22 @@
|
||||
//
|
||||
// Hero unit
|
||||
// Jumbotron
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
.hero-unit {
|
||||
.jumbotron {
|
||||
padding: 60px;
|
||||
margin-bottom: 30px;
|
||||
font-size: 18px;
|
||||
font-weight: 200;
|
||||
line-height: @line-height-base * 1.5;
|
||||
color: @hero-lead-color;
|
||||
background-color: @hero-background;
|
||||
color: @jumbotron-lead-color;
|
||||
background-color: @jumbotron-background;
|
||||
border-radius: 6px;
|
||||
h1 {
|
||||
margin-bottom: 0;
|
||||
font-size: 60px;
|
||||
line-height: 1;
|
||||
color: @hero-heading-color;
|
||||
color: @jumbotron-heading-color;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
li {
|
||||
+2
-2
@@ -36,10 +36,10 @@
|
||||
// Media image alignment
|
||||
// -------------------------
|
||||
|
||||
.media .pull-left {
|
||||
.media > .pull-left {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.media .pull-right {
|
||||
.media > .pull-right {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
|
||||
+16
-15
@@ -338,7 +338,7 @@
|
||||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down
|
||||
}
|
||||
.vertical(@startColor: #555, @endColor: #333) {
|
||||
background-color: mix(@startColor, @endColor, 60%);
|
||||
background-color: @endColor;
|
||||
background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
|
||||
background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
|
||||
@@ -405,24 +405,25 @@
|
||||
|
||||
// Button backgrounds
|
||||
// ------------------
|
||||
.buttonBackground(@startColor, @endColor, @text-color: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
|
||||
.buttonBackground(@background-start, @background-end, @text-color: #fff, @text-shadow: 0 -1px 0 rgba(0,0,0,.25)) {
|
||||
color: @text-color;
|
||||
text-shadow: @textShadow;
|
||||
#gradient > .vertical(@startColor, @endColor);
|
||||
border-color: @endColor @endColor darken(@endColor, 15%);
|
||||
border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
|
||||
.reset-filter();
|
||||
text-shadow: @text-shadow;
|
||||
#gradient > .vertical(@background-start, @background-end);
|
||||
border-color: darken(@background-end, 7.5%);
|
||||
|
||||
// in these cases the gradient won't cover the background, so we override
|
||||
&:hover, &:active, &.active, &.disabled, &[disabled] {
|
||||
color: @text-color;
|
||||
background-color: @endColor;
|
||||
}
|
||||
|
||||
// IE8 can't handle box-shadow to show active, so we darken a bit ourselves
|
||||
&:hover,
|
||||
&:active,
|
||||
&.active {
|
||||
background-color: darken(@endColor, 10%) e("\9");
|
||||
color: @text-color;
|
||||
background-color: @background-end;
|
||||
background-position: 0 -15px;
|
||||
}
|
||||
&:active,
|
||||
&.active,
|
||||
&[disabled],
|
||||
&.disabled,
|
||||
fieldset[disabled] & {
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+2
-1
@@ -10,7 +10,7 @@
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: @zindex-modal-background;
|
||||
background-color: @black;
|
||||
background-color: #000;
|
||||
// Fade for backdrop
|
||||
&.fade { opacity: 0; }
|
||||
}
|
||||
@@ -26,6 +26,7 @@
|
||||
top: 10%;
|
||||
left: 50%;
|
||||
z-index: @zindex-modal;
|
||||
display: none;
|
||||
width: 560px;
|
||||
margin-left: -280px;
|
||||
background-color: #fff;
|
||||
|
||||
@@ -222,7 +222,6 @@
|
||||
}
|
||||
.navbar .nav .dropdown-toggle .caret {
|
||||
margin-top: 8px;
|
||||
|
||||
}
|
||||
|
||||
// Hover
|
||||
|
||||
@@ -3,6 +3,13 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// IE10 Metro responsive
|
||||
// Required for Windows 8 Metro split-screen snapping with IE10
|
||||
// Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
|
||||
@-ms-viewport{
|
||||
width: device-width;
|
||||
}
|
||||
|
||||
// Hide from screenreaders and browsers
|
||||
// Credit: HTML5 Boilerplate
|
||||
.hidden {
|
||||
|
||||
+2
-2
@@ -21,10 +21,10 @@
|
||||
// -------------------------
|
||||
|
||||
.hide {
|
||||
display: none;
|
||||
display: none !important;
|
||||
}
|
||||
.show {
|
||||
display: block;
|
||||
display: block !important;
|
||||
}
|
||||
.invisible {
|
||||
visibility: hidden;
|
||||
|
||||
+13
-21
@@ -9,7 +9,6 @@
|
||||
|
||||
// Grays
|
||||
// -------------------------
|
||||
@black: #000;
|
||||
@grayDarker: #222;
|
||||
@grayDark: #333;
|
||||
@gray: #555;
|
||||
@@ -77,26 +76,19 @@
|
||||
// -------------------------
|
||||
|
||||
@btn-background: #fff;
|
||||
@btn-background-highlight: darken(#fff, 10%);
|
||||
@btn-border: #bbb;
|
||||
@btn-background-highlight: #eaeaea;
|
||||
|
||||
@btn-backround-primary: @link-color;
|
||||
@btn-backround-primary-highlight: spin(@btn-backround-primary, 20%);
|
||||
@btn-background-primary: @link-color;
|
||||
@btn-background-primary-highlight: darken(@link-color, 10%);
|
||||
|
||||
@btn-backround-info: #5bc0de;
|
||||
@btn-backround-info-highlight: #2f96b4;
|
||||
@btn-background-success: #62c462;
|
||||
@btn-background-success-highlight: #51a351;
|
||||
|
||||
@btn-backround-success: #62c462;
|
||||
@btn-backround-success-highlight: #51a351;
|
||||
@btn-background-warning: lighten(#f89406, 15%);
|
||||
@btn-background-warning-highlight: #f89406;
|
||||
|
||||
@btn-backround-warning: lighten(#f89406, 15%);
|
||||
@btn-backround-warning-highlight: #f89406;
|
||||
|
||||
@btn-backround-danger: #ee5f5b;
|
||||
@btn-backround-danger-highlight: #bd362f;
|
||||
|
||||
@btn-backround-inverse: #444;
|
||||
@btn-backround-inverse-highlight: @grayDarker;
|
||||
@btn-background-danger: #ee5f5b;
|
||||
@btn-background-danger-highlight: #bd362f;
|
||||
|
||||
|
||||
// Forms
|
||||
@@ -199,12 +191,12 @@
|
||||
@pagination-border: #ddd;
|
||||
|
||||
|
||||
// Hero unit
|
||||
// Jumbotron
|
||||
// -------------------------
|
||||
|
||||
@hero-background: @grayLighter;
|
||||
@hero-heading-color: inherit;
|
||||
@hero-lead-color: inherit;
|
||||
@jumbotron-background: @grayLighter;
|
||||
@jumbotron-heading-color: inherit;
|
||||
@jumbotron-lead-color: inherit;
|
||||
|
||||
|
||||
// Form states and alerts
|
||||
|
||||
Reference in New Issue
Block a user