Skip to content

B
bootstrap
Commit f919f6f9 authored by Mark Otto's avatar Mark Otto
Browse files
Options

huge update to forms, docs for the new forms, added a new link for js example... 

huge update to forms, docs for the new forms, added a new link for js example to tabs/pills, add some new mixins
parent 2d81d655
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 560 additions and 817 deletions
bootstrap.css
View file @ f919f6f9
This diff is collapsed.
bootstrap.min.css
View file @ f919f6f9
This diff is collapsed.
docs/assets/css/docs.css
View file @ f919f6f9
......@@ -310,8 +310,16 @@ img.large-bird {
opacity: .1;
}
/* Pretty Print
-------------------------------------------------- */
pre.prettyprint {
overflow: hidden;
}
\ No newline at end of file
}
/* Wells
-------------------------------------------------- */
.well form {
margin-bottom: 0;
}
docs/index.html
View file @ f919f6f9
This diff is collapsed.
lib/forms.less
View file @ f919f6f9
......@@ -6,29 +6,20 @@
// GENERAL STYLES
// --------------
// Make all forms have space below them
form {
margin-bottom: @baseline;
}
// Groups of fields with labels on top (legends)
fieldset {
margin-bottom: @baseline;
padding-top: @baseline;
legend {
display: block;
padding-left: 150px;
font-size: @basefont * 1.5;
line-height: 1;
color: @grayDark;
*padding: 0 0 5px 145px; /* IE6-7 */
*line-height: 1.5; /* IE6-7 */
}
}
// Parent element that clears floats and wraps labels and fields together
form .clearfix {
margin-bottom: @baseline;
.clearfix()
legend {
display: block;
width: 100%;
margin-bottom: @baseline * 1.5;
font-size: @basefont * 1.5;
line-height: @baseline * 2;
color: @grayDark;
border-bottom: 1px solid #eee;
}
// Set font for forms
......@@ -36,25 +27,16 @@ label,
input,
select,
textarea {
#font > .sans-serif(normal,13px,normal);
#font > .sans-serif(normal,@basefont,@baseline);
}
// Float labels left
// Identify controls by their labels
label {
padding-top: 6px;
font-size: @basefont;
line-height: @baseline;
float: left;
width: 130px;
text-align: right;
display: block;
margin-bottom: 5px;
color: @grayDark;
}
// Shift over the inside div to align all label's relevant content
form .input {
margin-left: 150px;
}
// Checkboxs and radio buttons
input[type=checkbox],
input[type=radio] {
......@@ -77,7 +59,7 @@ select,
.border-radius(3px);
}
/* mini reset for non-html5 file types */
/* Mini reset for unique input types */
input[type=checkbox],
input[type=radio] {
width: auto;
......@@ -89,6 +71,7 @@ input[type=radio] {
border: none;
}
// Reset the file input to browser defaults
input[type=file] {
background-color: @white;
padding: initial;
......@@ -97,6 +80,7 @@ input[type=file] {
.box-shadow(none);
}
// Help out input buttons
input[type=button],
input[type=reset],
input[type=submit] {
......@@ -120,24 +104,11 @@ textarea {
height: auto;
}
// For text that needs to appear as an input but should not be an input
.uneditable-input {
background-color: @white;
display: block;
border-color: #eee;
.box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
cursor: not-allowed;
}
// Placeholder text gets special styles; can't be bundled together though for some reason
:-moz-placeholder {
color: @grayLight;
}
::-webkit-input-placeholder {
color: @grayLight;
}
// Focus states
// FOCUS STATE
// -----------
input,
textarea {
@transition: border linear .2s, box-shadow linear .2s;
......@@ -158,36 +129,6 @@ select:focus {
outline: 1px dotted #666; // Selet elements don't get box-shadow styles, so instead we do outline
}
// Error styles
form div.clearfix.error {
background: lighten(@red, 57%);
padding: 10px 0;
margin: -10px 0 10px;
.border-radius(4px);
@error-text: desaturate(lighten(@red, 25%), 25%);
> label,
span.help-inline,
span.help-block {
color: @red;
}
input,
textarea {
border-color: @error-text;
.box-shadow(0 0 3px rgba(171,41,32,.25));
&:focus {
border-color: darken(@error-text, 10%);
.box-shadow(0 0 6px rgba(171,41,32,.5));
}
}
.input-prepend,
.input-append {
span.add-on {
background: lighten(@red, 50%);
border-color: @error-text;
color: darken(@error-text, 10%);
}
}
}
// INPUT SIZES
......@@ -232,8 +173,9 @@ select {
}
// INPUT STATES
// ------------
// DISABLED STATE
// --------------
// Disabled and read-only inputs
input[disabled],
......@@ -247,36 +189,89 @@ textarea[readonly] {
cursor: not-allowed;
}
// Actions (the buttons)
.actions {
background: #f5f5f5;
// ERROR STATE
// -----------
// Set color of error text
@error-text: desaturate(lighten(@red, 25%), 25%);
// Style the background of control-groups with errors
.has-error {
background: lighten(@red, 55%);
padding: (@baseline / 2) 0;
margin: -10px 0 10px;
.border-radius(4px);
> label,
span.help-inline,
span.help-block {
color: @red;
}
input,
textarea,
select {
border-color: @error-text;
.box-shadow(0 0 3px rgba(171,41,32,.25));
&:focus {
border-color: darken(@error-text, 10%);
.box-shadow(0 0 6px rgba(171,41,32,.5));
}
}
.input-prepend,
.input-append {
span.add-on {
background: lighten(@red, 50%);
border-color: @error-text;
color: darken(@error-text, 10%);
}
}
}
// FORM ACTIONS
// ------------
.form-actions {
padding: (@baseline - 1) 20px @baseline;
margin-top: @baseline;
margin-bottom: @baseline;
padding: (@baseline - 1) 20px @baseline 150px;
background-color: #f5f5f5;
border-top: 1px solid #ddd;
.border-radius(0 0 3px 3px);
.secondary-action {
float: right;
a {
line-height: 30px;
&:hover {
text-decoration: underline;
}
}
}
}
// For text that needs to appear as an input but should not be an input
.uneditable-input {
background-color: @white;
display: block;
border-color: #eee;
.box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
cursor: not-allowed;
}
// Placeholder text gets special styles; can't be bundled together though for some reason
:-moz-placeholder {
color: @grayLight;
}
::-webkit-input-placeholder {
color: @grayLight;
}
// HELP TEXT
// ---------
.help-inline,
.help-block {
font-size: @basefont - 2;
line-height: @baseline;
.help-text {
margin-top: 5px;
margin-bottom: 0;
color: @grayLight;
}
.help-inline {
display: inline;
padding-left: 5px;
*position: relative; /* IE6-7 */
*top: -5px; /* IE6-7 */
......@@ -290,7 +285,7 @@ textarea[readonly] {
// INLINE FIELDS
// ---------
// -------------
.inline-inputs {
color: @gray;
......@@ -309,8 +304,8 @@ textarea[readonly] {
}
// INPUTS GROUPS
// -------------
// INPUT GROUPS
// ------------
// Allow us to put symbols and text within the input field for a cleaner look
.input-prepend,
......@@ -360,97 +355,49 @@ textarea[readonly] {
}
// LISTS OF CONTROLS
// HORIZONTAL & VERTICAL FORMS
// ---------------------------
// Common properties
// -----------------
// Stacked options for forms (radio buttons or checkboxes)
.inputs-list {
margin: 0 0 5px;
width: 100%;
li {
display: block;
padding: 0;
width: 100%;
}
label {
display: block;
float: none;
width: auto;
padding: 0;
line-height: @baseline;
text-align: left;
white-space: normal;
strong {
color: @gray;
}
small {
font-size: @basefont - 2;
font-weight: normal;
}
}
.inputs-list {
margin-left: 25px;
margin-bottom: 10px;
padding-top: 0;
}
&:first-child {
padding-top: 6px;
}
li + li {
padding-top: 2px;
}
input[type=radio],
input[type=checkbox] {
margin-bottom: 0;
}
// Margin to space out fieldsets
.control-group {
margin-bottom: @baseline;
}
// Bold the labels so they stand out
.control-group > label {
font-weight: bold;
}
// STACKED FORMS
// -------------
// Lists of controls (checkboxes and radios)
.control-list {
}
.form-stacked {
padding-left: 20px;
fieldset {
padding-top: @baseline / 2;
}
legend {
padding-left: 0;
}
label {
display: block;
float: none;
width: auto;
font-weight: bold;
text-align: left;
line-height: 20px;
padding-top: 0;
}
.clearfix {
margin-bottom: @baseline / 2;
div.input {
margin-left: 0;
}
}
.inputs-list {
margin-bottom: 0;
li {
padding-top: 0;
label {
font-weight: normal;
padding-top: 0;
}
}
}
div.clearfix.error {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
margin-top: 0;
margin-left: -10px;
}
.actions {
margin-left: -20px;
padding-left: 20px;
}
}
\ No newline at end of file
// Horizontal-specific styles
// --------------------------
// Float the labels left
.form-horizontal .control-group > label {
float: left;
width: 130px;
padding-top: 5px;
text-align: right;
}
// Move over all input controls and content
.form-horizontal .controls {
margin-left: 150px;
}
// Move the options list down to align with labels
.form-horizontal .control-list {
padding-top: 6px; // has to be padding because margin collaspes
}
// Move over buttons in .form-actions to align with .controls
.form-horizontal .form-actions {
padding-left: 150px;
}
lib/mixins.less
View file @ f919f6f9
......@@ -6,32 +6,32 @@
// Clearfix for clearing floats like a boss h5bp.com/q
.clearfix() {
zoom: 1;
&:before,
&:before,
&:after {
display: table;
content: "";
zoom: 1;
*display: inline;
}
&:after {
}
&:after {
clear: both;
}
}
}
// Center-align a block level element
.center-block() {
display: block;
display: block;
margin-left: auto;
margin-right: auto;
}
// Sizing shortcuts
.size(@height: 5px, @width: 5px) {
height: @height;
width: @width;
height: @height;
width: @width;
}
.square(@size: 5px) {
.size(@size, @size);
.size(@size, @size);
}
// Input placeholder text
......@@ -112,27 +112,40 @@
// Transitions
.transition(@transition) {
-webkit-transition: @transition;
-moz-transition: @transition;
-ms-transition: @transition;
-o-transition: @transition;
transition: @transition;
-webkit-transition: @transition;
-moz-transition: @transition;
-ms-transition: @transition;
-o-transition: @transition;
transition: @transition;
}
// Transform for scale and rotate
// translate, rotate, scale -- need to finalize
.rotation(@degrees: 5deg) {
-webkit-transform: rotate(@degrees);
-moz-transform: rotate(@degrees);
transform: rotate(@degrees);
}
.scale(@value: 1.5) {
-webkit-transform: scale(@value);
-moz-transform: scale(@value);
transform: scale(@value);
}
// Background clipping
.background-clip(@clip) {
-webkit-background-clip: @clip;
-moz-background-clip: @clip;
background-clip: @clip;
-webkit-background-clip: @clip;
-moz-background-clip: @clip;
background-clip: @clip;
}
// CSS3 Content Columns
.content-columns(@columnCount, @columnGap: 20px) {
-webkit-column-count: @columnCount;
-moz-column-count: @columnCount;
-webkit-column-count: @columnCount;
-moz-column-count: @columnCount;
column-count: @columnCount;
-webkit-column-gap: @columnGap;
-moz-column-gap: @columnGap;
-moz-column-gap: @columnGap;
column-gap: @columnGap;
}
......@@ -140,11 +153,11 @@
#translucent {
.background(@color: @white, @alpha: 1) {
background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
}
.border(@color: @white, @alpha: 1) {
border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
background-clip: padding-box;
}
}
.border(@color: @white, @alpha: 1) {
border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
background-clip: padding-box;
}
}
// Gradient Bar Colors for buttons and allerts
......@@ -157,9 +170,8 @@
// Gradients
#gradient {
.horizontal (@startColor: #555, @endColor: #333) {
.horizontal(@startColor: #555, @endColor: #333) {
background-color: @endColor;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, right top, from(@startColor), to(@endColor)); // Konqueror
background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
background-image: -ms-linear-gradient(left, @startColor, @endColor); // IE10
......@@ -167,11 +179,11 @@
background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
background-image: linear-gradient(left, @startColor, @endColor); // Le standard
background-repeat: repeat-x;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE9 and down
}
.vertical (@startColor: #555, @endColor: #333) {
.vertical(@startColor: #555, @endColor: #333) {
background-color: @endColor;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); // Konqueror
background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
background-image: -ms-linear-gradient(top, @startColor, @endColor); // IE10
......@@ -179,9 +191,10 @@
background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
background-image: linear-gradient(top, @startColor, @endColor); // The standard
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down
background-repeat: repeat-x;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down
}
.directional (@startColor: #555, @endColor: #333, @deg: 45deg) {
.directional(@startColor: #555, @endColor: #333, @deg: 45deg) {
background-color: @endColor;
background-repeat: repeat-x;
background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
......@@ -192,15 +205,24 @@
}
.vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
background-color: @endColor;
background-repeat: no-repeat;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor);
background-image: -ms-linear-gradient(@startColor, @midColor @colorStop, @endColor);
background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
background-repeat: no-repeat;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down, gets no color-stop at all for proper fallback
}
.radial(@centerColor: #555, @outsideColor: #333) {
background-color: @outsideColor;
background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@centerColor), to(@outsideColor));
background-image: -webkit-radial-gradient(circle, @centerColor, @outsideColor);
background-image: -moz-radial-gradient(circle, @centerColor, @outsideColor);
background-image: -ms-radial-gradient(circle, @centerColor, @outsideColor);
background-repeat: no-repeat;
// Opera cannot do radial gradients yet
}
}
// Reset filters for IE
......@@ -210,8 +232,8 @@
// Opacity
.opacity(@opacity: 100) {
filter: e(%("alpha(opacity=%d)", @opacity));
-khtml-opacity: @opacity / 100;
-moz-opacity: @opacity / 100;
opacity: @opacity / 100;
filter: e(%("alpha(opacity=%d)", @opacity));
-khtml-opacity: @opacity / 100;
-moz-opacity: @opacity / 100;
opacity: @opacity / 100;
}
\ No newline at end of file
lib/reset.less
View file @ f919f6f9
/* Reset.less
* Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
* Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
......
lib/type.less
View file @ f919f6f9
......@@ -41,15 +41,16 @@ h2 {
font-size: 14px;
}
}
h3, h4, h5, h6 {
line-height: @baseline * 2;
}
h3 {
line-height: @baseline * 2;
font-size: 18px;
small {
font-size: 14px;
}
}
h4, h5, h6 {
line-height: @baseline;
}
h4 {
font-size: 16px;
small {
......
lib/variables.less
View file @ f919f6f9
......@@ -9,10 +9,10 @@
// Grays
@black: #000;
@grayDark: lighten(@black, 25%);
@gray: lighten(@black, 50%);
@grayLight: lighten(@black, 75%);
@grayLighter: lighten(@black, 90%);
@grayDark: #333;
@gray: #555;
@grayLight: #777;
@grayLighter: #ccc;
@white: #fff;
// Accent Colors
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment