mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
start form input css
This commit is contained in:
Adam Bradley
823
dist/ionic.css
vendored
823
dist/ionic.css
vendored
@@ -161,12 +161,20 @@ main > * {
|
||||
.button-group > .button:first-child {
|
||||
margin-left: 0; }
|
||||
.button-group > .button:first-child:not(:last-child) {
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0; }
|
||||
-webkit-border-top-right-radius: 0;
|
||||
-moz-border-radius-topright: 0;
|
||||
border-top-right-radius: 0;
|
||||
-webkit-border-bottom-right-radius: 0;
|
||||
-moz-border-radius-bottomright: 0;
|
||||
border-bottom-right-radius: 0; }
|
||||
|
||||
.button-group > .button:last-child:not(:first-child) {
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0; }
|
||||
-webkit-border-top-left-radius: 0;
|
||||
-moz-border-radius-topleft: 0;
|
||||
border-top-left-radius: 0;
|
||||
-webkit-border-bottom-left-radius: 0;
|
||||
-moz-border-radius-bottomleft: 0;
|
||||
border-bottom-left-radius: 0; }
|
||||
|
||||
.button-group > .button-group {
|
||||
float: left; }
|
||||
@@ -176,12 +184,811 @@ main > * {
|
||||
|
||||
.button-group > .button-group:first-child > .button:last-child,
|
||||
.button-group > .button-group:first-child > .dropdown-toggle {
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0; }
|
||||
-webkit-border-top-right-radius: 0;
|
||||
-moz-border-radius-topright: 0;
|
||||
border-top-right-radius: 0;
|
||||
-webkit-border-bottom-right-radius: 0;
|
||||
-moz-border-radius-bottomright: 0;
|
||||
border-bottom-right-radius: 0; }
|
||||
|
||||
.button-group > .button-group:last-child > .button:first-child {
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0; }
|
||||
-webkit-border-top-left-radius: 0;
|
||||
-moz-border-radius-topleft: 0;
|
||||
border-top-left-radius: 0;
|
||||
-webkit-border-bottom-left-radius: 0;
|
||||
-moz-border-radius-bottomleft: 0;
|
||||
border-bottom-left-radius: 0; }
|
||||
|
||||
form {
|
||||
margin: 0 0 1.42857; }
|
||||
|
||||
fieldset {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0; }
|
||||
|
||||
legend {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin-bottom: 1.42857;
|
||||
font-size: 21px;
|
||||
line-height: 2.85714;
|
||||
color: #333333;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #e5e5e5; }
|
||||
legend small {
|
||||
font-size: 1.07143;
|
||||
color: #999999; }
|
||||
|
||||
label,
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
textarea {
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
line-height: 1.42857; }
|
||||
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
textarea {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 5px; }
|
||||
|
||||
select,
|
||||
textarea,
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="datetime"],
|
||||
input[type="datetime-local"],
|
||||
input[type="date"],
|
||||
input[type="month"],
|
||||
input[type="time"],
|
||||
input[type="week"],
|
||||
input[type="number"],
|
||||
input[type="email"],
|
||||
input[type="url"],
|
||||
input[type="search"],
|
||||
input[type="tel"],
|
||||
input[type="color"],
|
||||
.uneditable-input {
|
||||
display: inline-block;
|
||||
height: 34px;
|
||||
padding: 4px 6px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #555555;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
vertical-align: middle; }
|
||||
|
||||
input,
|
||||
textarea,
|
||||
.uneditable-input {
|
||||
width: 100%; }
|
||||
|
||||
textarea {
|
||||
height: auto; }
|
||||
|
||||
textarea,
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="datetime"],
|
||||
input[type="datetime-local"],
|
||||
input[type="date"],
|
||||
input[type="month"],
|
||||
input[type="time"],
|
||||
input[type="week"],
|
||||
input[type="number"],
|
||||
input[type="email"],
|
||||
input[type="url"],
|
||||
input[type="search"],
|
||||
input[type="tel"],
|
||||
input[type="color"],
|
||||
.uneditable-input {
|
||||
background-color: white;
|
||||
border: 1px solid #cccccc;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
|
||||
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
|
||||
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
|
||||
transition: border linear 0.2s, box-shadow linear 0.2s; }
|
||||
textarea:focus,
|
||||
input[type="text"]:focus,
|
||||
input[type="password"]:focus,
|
||||
input[type="datetime"]:focus,
|
||||
input[type="datetime-local"]:focus,
|
||||
input[type="date"]:focus,
|
||||
input[type="month"]:focus,
|
||||
input[type="time"]:focus,
|
||||
input[type="week"]:focus,
|
||||
input[type="number"]:focus,
|
||||
input[type="email"]:focus,
|
||||
input[type="url"]:focus,
|
||||
input[type="search"]:focus,
|
||||
input[type="tel"]:focus,
|
||||
input[type="color"]:focus,
|
||||
.uneditable-input:focus {
|
||||
border-color: rgba(82, 168, 236, 0.8);
|
||||
outline: 0;
|
||||
outline: thin dotted \9;
|
||||
/* IE6-9 */
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
|
||||
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); }
|
||||
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
margin: 4px 0 0;
|
||||
*margin-top: 0;
|
||||
/* IE7 */
|
||||
margin-top: 1px \9;
|
||||
/* IE8-9 */
|
||||
line-height: normal; }
|
||||
|
||||
input[type="file"],
|
||||
input[type="image"],
|
||||
input[type="submit"],
|
||||
input[type="reset"],
|
||||
input[type="button"],
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
width: auto; }
|
||||
|
||||
select,
|
||||
input[type="file"] {
|
||||
height: 24px;
|
||||
/* In IE7, the height of the select element cannot be changed by height, only font-size */
|
||||
*margin-top: 4px;
|
||||
/* For IE7, add top margin to align select with labels */
|
||||
line-height: 24px; }
|
||||
|
||||
select {
|
||||
width: 220px;
|
||||
border: 1px solid #cccccc;
|
||||
background-color: white; }
|
||||
|
||||
select[multiple],
|
||||
select[size] {
|
||||
height: auto; }
|
||||
|
||||
select:focus,
|
||||
input[type="file"]:focus,
|
||||
input[type="radio"]:focus,
|
||||
input[type="checkbox"]:focus {
|
||||
outline: thin dotted #333333;
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
outline-offset: -2px; }
|
||||
|
||||
.uneditable-input,
|
||||
.uneditable-textarea {
|
||||
color: #999999;
|
||||
background-color: #fcfcfc;
|
||||
border-color: #cccccc;
|
||||
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
|
||||
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
|
||||
cursor: not-allowed; }
|
||||
|
||||
.uneditable-input {
|
||||
overflow: hidden;
|
||||
white-space: nowrap; }
|
||||
|
||||
.uneditable-textarea {
|
||||
width: auto;
|
||||
height: auto; }
|
||||
|
||||
input:-moz-placeholder,
|
||||
textarea:-moz-placeholder {
|
||||
color: #999999; }
|
||||
input:-ms-input-placeholder,
|
||||
textarea:-ms-input-placeholder {
|
||||
color: #999999; }
|
||||
input::-webkit-input-placeholder,
|
||||
textarea::-webkit-input-placeholder {
|
||||
color: #999999; }
|
||||
|
||||
.radio,
|
||||
.checkbox {
|
||||
min-height: 1.42857;
|
||||
padding-left: 20px; }
|
||||
|
||||
.radio input[type="radio"],
|
||||
.checkbox input[type="checkbox"] {
|
||||
float: left;
|
||||
margin-left: -20px; }
|
||||
|
||||
.controls > .radio:first-child,
|
||||
.controls > .checkbox:first-child {
|
||||
padding-top: 5px; }
|
||||
|
||||
.radio.inline,
|
||||
.checkbox.inline {
|
||||
display: inline-block;
|
||||
padding-top: 5px;
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle; }
|
||||
|
||||
.radio.inline + .radio.inline,
|
||||
.checkbox.inline + .checkbox.inline {
|
||||
margin-left: 10px; }
|
||||
|
||||
.input-mini {
|
||||
width: 60px; }
|
||||
|
||||
.input-small {
|
||||
width: 90px; }
|
||||
|
||||
.input-medium {
|
||||
width: 150px; }
|
||||
|
||||
.input-large {
|
||||
width: 210px; }
|
||||
|
||||
.input-xlarge {
|
||||
width: 270px; }
|
||||
|
||||
.input-xxlarge {
|
||||
width: 530px; }
|
||||
|
||||
input[class*="span"],
|
||||
select[class*="span"],
|
||||
textarea[class*="span"],
|
||||
.uneditable-input[class*="span"],
|
||||
.row-fluid input[class*="span"],
|
||||
.row-fluid select[class*="span"],
|
||||
.row-fluid textarea[class*="span"],
|
||||
.row-fluid .uneditable-input[class*="span"] {
|
||||
float: none;
|
||||
margin-left: 0; }
|
||||
|
||||
.input-append input[class*="span"],
|
||||
.input-append .uneditable-input[class*="span"],
|
||||
.input-prepend input[class*="span"],
|
||||
.input-prepend .uneditable-input[class*="span"],
|
||||
.row-fluid input[class*="span"],
|
||||
.row-fluid select[class*="span"],
|
||||
.row-fluid textarea[class*="span"],
|
||||
.row-fluid .uneditable-input[class*="span"],
|
||||
.row-fluid .input-prepend [class*="span"],
|
||||
.row-fluid .input-append [class*="span"] {
|
||||
display: inline-block; }
|
||||
|
||||
input,
|
||||
textarea,
|
||||
.uneditable-input {
|
||||
margin-left: 0; }
|
||||
|
||||
.controls-row [class*="span"] + [class*="span"] {
|
||||
margin-left: 20px; }
|
||||
|
||||
input.span1,
|
||||
textarea.span1,
|
||||
.uneditable-input.span1 {
|
||||
width: 46px; }
|
||||
|
||||
input.span2,
|
||||
textarea.span2,
|
||||
.uneditable-input.span2 {
|
||||
width: 126px; }
|
||||
|
||||
input.span3,
|
||||
textarea.span3,
|
||||
.uneditable-input.span3 {
|
||||
width: 206px; }
|
||||
|
||||
input.span4,
|
||||
textarea.span4,
|
||||
.uneditable-input.span4 {
|
||||
width: 286px; }
|
||||
|
||||
input.span5,
|
||||
textarea.span5,
|
||||
.uneditable-input.span5 {
|
||||
width: 366px; }
|
||||
|
||||
input.span6,
|
||||
textarea.span6,
|
||||
.uneditable-input.span6 {
|
||||
width: 446px; }
|
||||
|
||||
input.span7,
|
||||
textarea.span7,
|
||||
.uneditable-input.span7 {
|
||||
width: 526px; }
|
||||
|
||||
input.span8,
|
||||
textarea.span8,
|
||||
.uneditable-input.span8 {
|
||||
width: 606px; }
|
||||
|
||||
input.span9,
|
||||
textarea.span9,
|
||||
.uneditable-input.span9 {
|
||||
width: 686px; }
|
||||
|
||||
input.span10,
|
||||
textarea.span10,
|
||||
.uneditable-input.span10 {
|
||||
width: 766px; }
|
||||
|
||||
input.span11,
|
||||
textarea.span11,
|
||||
.uneditable-input.span11 {
|
||||
width: 846px; }
|
||||
|
||||
input.span12,
|
||||
textarea.span12,
|
||||
.uneditable-input.span12 {
|
||||
width: 926px; }
|
||||
|
||||
.controls-row {
|
||||
*zoom: 1; }
|
||||
.controls-row:before, .controls-row:after {
|
||||
display: table;
|
||||
content: "";
|
||||
line-height: 0; }
|
||||
.controls-row:after {
|
||||
clear: both; }
|
||||
|
||||
.controls-row [class*="span"],
|
||||
.row-fluid .controls-row [class*="span"] {
|
||||
float: left; }
|
||||
|
||||
.controls-row .checkbox[class*="span"],
|
||||
.controls-row .radio[class*="span"] {
|
||||
padding-top: 5px; }
|
||||
|
||||
input[disabled],
|
||||
select[disabled],
|
||||
textarea[disabled],
|
||||
input[readonly],
|
||||
select[readonly],
|
||||
textarea[readonly] {
|
||||
cursor: not-allowed;
|
||||
background-color: #eeeeee; }
|
||||
|
||||
input[type="radio"][disabled],
|
||||
input[type="checkbox"][disabled],
|
||||
input[type="radio"][readonly],
|
||||
input[type="checkbox"][readonly] {
|
||||
background-color: transparent; }
|
||||
|
||||
.control-group.warning .control-label,
|
||||
.control-group.warning .help-block,
|
||||
.control-group.warning .help-inline {
|
||||
color: #c09853; }
|
||||
.control-group.warning .checkbox,
|
||||
.control-group.warning .radio,
|
||||
.control-group.warning input,
|
||||
.control-group.warning select,
|
||||
.control-group.warning textarea {
|
||||
color: #c09853; }
|
||||
.control-group.warning input,
|
||||
.control-group.warning select,
|
||||
.control-group.warning textarea {
|
||||
border-color: #c09853;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); }
|
||||
.control-group.warning input:focus,
|
||||
.control-group.warning select:focus,
|
||||
.control-group.warning textarea:focus {
|
||||
border-color: #a47e3c;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
|
||||
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e; }
|
||||
.control-group.warning .input-prepend .add-on,
|
||||
.control-group.warning .input-append .add-on {
|
||||
color: #c09853;
|
||||
background-color: #fcf8e3;
|
||||
border-color: #c09853; }
|
||||
|
||||
.control-group.error .control-label,
|
||||
.control-group.error .help-block,
|
||||
.control-group.error .help-inline {
|
||||
color: #b94a48; }
|
||||
.control-group.error .checkbox,
|
||||
.control-group.error .radio,
|
||||
.control-group.error input,
|
||||
.control-group.error select,
|
||||
.control-group.error textarea {
|
||||
color: #b94a48; }
|
||||
.control-group.error input,
|
||||
.control-group.error select,
|
||||
.control-group.error textarea {
|
||||
border-color: #b94a48;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); }
|
||||
.control-group.error input:focus,
|
||||
.control-group.error select:focus,
|
||||
.control-group.error textarea:focus {
|
||||
border-color: #953b39;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
|
||||
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392; }
|
||||
.control-group.error .input-prepend .add-on,
|
||||
.control-group.error .input-append .add-on {
|
||||
color: #b94a48;
|
||||
background-color: #f2dede;
|
||||
border-color: #b94a48; }
|
||||
|
||||
.control-group.success .control-label,
|
||||
.control-group.success .help-block,
|
||||
.control-group.success .help-inline {
|
||||
color: #468847; }
|
||||
.control-group.success .checkbox,
|
||||
.control-group.success .radio,
|
||||
.control-group.success input,
|
||||
.control-group.success select,
|
||||
.control-group.success textarea {
|
||||
color: #468847; }
|
||||
.control-group.success input,
|
||||
.control-group.success select,
|
||||
.control-group.success textarea {
|
||||
border-color: #468847;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); }
|
||||
.control-group.success input:focus,
|
||||
.control-group.success select:focus,
|
||||
.control-group.success textarea:focus {
|
||||
border-color: #356635;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
|
||||
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b; }
|
||||
.control-group.success .input-prepend .add-on,
|
||||
.control-group.success .input-append .add-on {
|
||||
color: #468847;
|
||||
background-color: #dff0d8;
|
||||
border-color: #468847; }
|
||||
|
||||
.control-group.info .control-label,
|
||||
.control-group.info .help-block,
|
||||
.control-group.info .help-inline {
|
||||
color: #3a87ad; }
|
||||
.control-group.info .checkbox,
|
||||
.control-group.info .radio,
|
||||
.control-group.info input,
|
||||
.control-group.info select,
|
||||
.control-group.info textarea {
|
||||
color: #3a87ad; }
|
||||
.control-group.info input,
|
||||
.control-group.info select,
|
||||
.control-group.info textarea {
|
||||
border-color: #3a87ad;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); }
|
||||
.control-group.info input:focus,
|
||||
.control-group.info select:focus,
|
||||
.control-group.info textarea:focus {
|
||||
border-color: #2d6987;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3;
|
||||
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3;
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3; }
|
||||
.control-group.info .input-prepend .add-on,
|
||||
.control-group.info .input-append .add-on {
|
||||
color: #3a87ad;
|
||||
background-color: #d9edf7;
|
||||
border-color: #3a87ad; }
|
||||
|
||||
input:focus:invalid,
|
||||
textarea:focus:invalid,
|
||||
select:focus:invalid {
|
||||
color: #b94a48;
|
||||
border-color: #ee5f5b; }
|
||||
input:focus:invalid:focus,
|
||||
textarea:focus:invalid:focus,
|
||||
select:focus:invalid:focus {
|
||||
border-color: #e9322d;
|
||||
-webkit-box-shadow: 0 0 6px #f8b9b7;
|
||||
-moz-box-shadow: 0 0 6px #f8b9b7;
|
||||
box-shadow: 0 0 6px #f8b9b7; }
|
||||
|
||||
.form-actions {
|
||||
padding: 0.42857 20px 1.42857;
|
||||
margin-top: 1.42857;
|
||||
margin-bottom: 1.42857;
|
||||
background-color: whitesmoke;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
*zoom: 1; }
|
||||
.form-actions:before, .form-actions:after {
|
||||
display: table;
|
||||
content: "";
|
||||
line-height: 0; }
|
||||
.form-actions:after {
|
||||
clear: both; }
|
||||
|
||||
.help-block,
|
||||
.help-inline {
|
||||
color: #595959; }
|
||||
|
||||
.help-block {
|
||||
display: block;
|
||||
margin-bottom: 0.71429; }
|
||||
|
||||
.help-inline {
|
||||
display: inline-block;
|
||||
*display: inline;
|
||||
/* IE7 inline-block hack */
|
||||
*zoom: 1;
|
||||
vertical-align: middle;
|
||||
padding-left: 5px; }
|
||||
|
||||
.input-append,
|
||||
.input-prepend {
|
||||
display: inline-block;
|
||||
margin-bottom: 0.71429;
|
||||
vertical-align: middle;
|
||||
font-size: 0;
|
||||
white-space: nowrap; }
|
||||
.input-append input,
|
||||
.input-append select,
|
||||
.input-append .uneditable-input,
|
||||
.input-append .dropdown-menu,
|
||||
.input-append .popover,
|
||||
.input-prepend input,
|
||||
.input-prepend select,
|
||||
.input-prepend .uneditable-input,
|
||||
.input-prepend .dropdown-menu,
|
||||
.input-prepend .popover {
|
||||
font-size: 14px; }
|
||||
.input-append input,
|
||||
.input-append select,
|
||||
.input-append .uneditable-input,
|
||||
.input-prepend input,
|
||||
.input-prepend select,
|
||||
.input-prepend .uneditable-input {
|
||||
position: relative;
|
||||
margin-bottom: 0;
|
||||
*margin-left: 0;
|
||||
vertical-align: top;
|
||||
-webkit-border-radius: 0 4px 4px 0;
|
||||
-moz-border-radius: 0 4px 4px 0;
|
||||
border-radius: 0 4px 4px 0; }
|
||||
.input-append input:focus,
|
||||
.input-append select:focus,
|
||||
.input-append .uneditable-input:focus,
|
||||
.input-prepend input:focus,
|
||||
.input-prepend select:focus,
|
||||
.input-prepend .uneditable-input:focus {
|
||||
z-index: 2; }
|
||||
.input-append .add-on,
|
||||
.input-prepend .add-on {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
height: 1.42857;
|
||||
min-width: 16px;
|
||||
padding: 4px 5px;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
line-height: 1.42857;
|
||||
text-align: center;
|
||||
text-shadow: 0 1px 0 white;
|
||||
background-color: #eeeeee;
|
||||
border: 1px solid #cccccc; }
|
||||
.input-append .add-on,
|
||||
.input-append .btn,
|
||||
.input-append .btn-group > .dropdown-toggle,
|
||||
.input-prepend .add-on,
|
||||
.input-prepend .btn,
|
||||
.input-prepend .btn-group > .dropdown-toggle {
|
||||
vertical-align: top;
|
||||
-webkit-border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
border-radius: 0; }
|
||||
.input-append .active,
|
||||
.input-prepend .active {
|
||||
background-color: #a9dba9;
|
||||
border-color: #46a546; }
|
||||
|
||||
.input-prepend .add-on,
|
||||
.input-prepend .btn {
|
||||
margin-right: -1px; }
|
||||
.input-prepend .add-on:first-child,
|
||||
.input-prepend .btn:first-child {
|
||||
-webkit-border-radius: 4px 0 0 4px;
|
||||
-moz-border-radius: 4px 0 0 4px;
|
||||
border-radius: 4px 0 0 4px; }
|
||||
|
||||
.input-append input,
|
||||
.input-append select,
|
||||
.input-append .uneditable-input {
|
||||
-webkit-border-radius: 4px 0 0 4px;
|
||||
-moz-border-radius: 4px 0 0 4px;
|
||||
border-radius: 4px 0 0 4px; }
|
||||
.input-append input + .btn-group .btn:last-child,
|
||||
.input-append select + .btn-group .btn:last-child,
|
||||
.input-append .uneditable-input + .btn-group .btn:last-child {
|
||||
-webkit-border-radius: 0 4px 4px 0;
|
||||
-moz-border-radius: 0 4px 4px 0;
|
||||
border-radius: 0 4px 4px 0; }
|
||||
.input-append .add-on,
|
||||
.input-append .btn,
|
||||
.input-append .btn-group {
|
||||
margin-left: -1px; }
|
||||
.input-append .add-on:last-child,
|
||||
.input-append .btn:last-child,
|
||||
.input-append .btn-group:last-child > .dropdown-toggle {
|
||||
-webkit-border-radius: 0 4px 4px 0;
|
||||
-moz-border-radius: 0 4px 4px 0;
|
||||
border-radius: 0 4px 4px 0; }
|
||||
|
||||
.input-prepend.input-append input,
|
||||
.input-prepend.input-append select,
|
||||
.input-prepend.input-append .uneditable-input {
|
||||
-webkit-border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
border-radius: 0; }
|
||||
.input-prepend.input-append input + .btn-group .btn,
|
||||
.input-prepend.input-append select + .btn-group .btn,
|
||||
.input-prepend.input-append .uneditable-input + .btn-group .btn {
|
||||
-webkit-border-radius: 0 4px 4px 0;
|
||||
-moz-border-radius: 0 4px 4px 0;
|
||||
border-radius: 0 4px 4px 0; }
|
||||
.input-prepend.input-append .add-on:first-child,
|
||||
.input-prepend.input-append .btn:first-child {
|
||||
margin-right: -1px;
|
||||
-webkit-border-radius: 4px 0 0 4px;
|
||||
-moz-border-radius: 4px 0 0 4px;
|
||||
border-radius: 4px 0 0 4px; }
|
||||
.input-prepend.input-append .add-on:last-child,
|
||||
.input-prepend.input-append .btn:last-child {
|
||||
margin-left: -1px;
|
||||
-webkit-border-radius: 0 4px 4px 0;
|
||||
-moz-border-radius: 0 4px 4px 0;
|
||||
border-radius: 0 4px 4px 0; }
|
||||
.input-prepend.input-append .btn-group:first-child {
|
||||
margin-left: 0; }
|
||||
|
||||
input.search-query {
|
||||
padding-right: 14px;
|
||||
padding-right: 4px \9;
|
||||
padding-left: 14px;
|
||||
padding-left: 4px \9;
|
||||
/* IE7-8 doesn't have border-radius, so don't indent the padding */
|
||||
margin-bottom: 0;
|
||||
-webkit-border-radius: 15px;
|
||||
-moz-border-radius: 15px;
|
||||
border-radius: 15px; }
|
||||
|
||||
/* Allow for input prepend/append in search forms */
|
||||
.form-search .input-append .search-query,
|
||||
.form-search .input-prepend .search-query {
|
||||
-webkit-border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
border-radius: 0; }
|
||||
|
||||
.form-search .input-append .search-query {
|
||||
-webkit-border-radius: 14px 0 0 14px;
|
||||
-moz-border-radius: 14px 0 0 14px;
|
||||
border-radius: 14px 0 0 14px; }
|
||||
|
||||
.form-search .input-append .btn {
|
||||
-webkit-border-radius: 0 14px 14px 0;
|
||||
-moz-border-radius: 0 14px 14px 0;
|
||||
border-radius: 0 14px 14px 0; }
|
||||
|
||||
.form-search .input-prepend .search-query {
|
||||
-webkit-border-radius: 0 14px 14px 0;
|
||||
-moz-border-radius: 0 14px 14px 0;
|
||||
border-radius: 0 14px 14px 0; }
|
||||
|
||||
.form-search .input-prepend .btn {
|
||||
-webkit-border-radius: 14px 0 0 14px;
|
||||
-moz-border-radius: 14px 0 0 14px;
|
||||
border-radius: 14px 0 0 14px; }
|
||||
|
||||
.form-search input,
|
||||
.form-search textarea,
|
||||
.form-search select,
|
||||
.form-search .help-inline,
|
||||
.form-search .uneditable-input,
|
||||
.form-search .input-prepend,
|
||||
.form-search .input-append,
|
||||
.form-inline input,
|
||||
.form-inline textarea,
|
||||
.form-inline select,
|
||||
.form-inline .help-inline,
|
||||
.form-inline .uneditable-input,
|
||||
.form-inline .input-prepend,
|
||||
.form-inline .input-append,
|
||||
.form-horizontal input,
|
||||
.form-horizontal textarea,
|
||||
.form-horizontal select,
|
||||
.form-horizontal .help-inline,
|
||||
.form-horizontal .uneditable-input,
|
||||
.form-horizontal .input-prepend,
|
||||
.form-horizontal .input-append {
|
||||
display: inline-block;
|
||||
*display: inline;
|
||||
/* IE7 inline-block hack */
|
||||
*zoom: 1;
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle; }
|
||||
.form-search .hide,
|
||||
.form-inline .hide,
|
||||
.form-horizontal .hide {
|
||||
display: none; }
|
||||
|
||||
.form-search label,
|
||||
.form-inline label,
|
||||
.form-search .btn-group,
|
||||
.form-inline .btn-group {
|
||||
display: inline-block; }
|
||||
|
||||
.form-search .input-append,
|
||||
.form-inline .input-append,
|
||||
.form-search .input-prepend,
|
||||
.form-inline .input-prepend {
|
||||
margin-bottom: 0; }
|
||||
|
||||
.form-search .radio,
|
||||
.form-search .checkbox,
|
||||
.form-inline .radio,
|
||||
.form-inline .checkbox {
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle; }
|
||||
|
||||
.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; }
|
||||
|
||||
.control-group {
|
||||
margin-bottom: 0.71429; }
|
||||
|
||||
legend + .control-group {
|
||||
margin-top: 1.42857;
|
||||
-webkit-margin-top-collapse: separate; }
|
||||
|
||||
.form-horizontal .control-group {
|
||||
margin-bottom: 1.42857;
|
||||
*zoom: 1; }
|
||||
.form-horizontal .control-group:before, .form-horizontal .control-group:after {
|
||||
display: table;
|
||||
content: "";
|
||||
line-height: 0; }
|
||||
.form-horizontal .control-group:after {
|
||||
clear: both; }
|
||||
.form-horizontal .control-label {
|
||||
float: left;
|
||||
width: 160px;
|
||||
padding-top: 5px;
|
||||
text-align: right; }
|
||||
.form-horizontal .controls {
|
||||
*display: inline-block;
|
||||
*padding-left: 20px;
|
||||
margin-left: 180px;
|
||||
*margin-left: 0; }
|
||||
.form-horizontal .controls:first-child {
|
||||
*padding-left: 180px; }
|
||||
.form-horizontal .help-block {
|
||||
margin-bottom: 0; }
|
||||
.form-horizontal input + .help-block,
|
||||
.form-horizontal select + .help-block,
|
||||
.form-horizontal textarea + .help-block,
|
||||
.form-horizontal .uneditable-input + .help-block,
|
||||
.form-horizontal .input-prepend + .help-block,
|
||||
.form-horizontal .input-append + .help-block {
|
||||
margin-top: 0.71429; }
|
||||
.form-horizontal .form-actions {
|
||||
padding-left: 180px; }
|
||||
|
||||
.list {
|
||||
margin-bottom: 20px;
|
||||
|
||||
47
example/forms.html
Normal file
47
example/forms.html
Normal file
@@ -0,0 +1,47 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Forms</title>
|
||||
|
||||
<!-- Sets initial viewport load and disables zooming -->
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../../dist/ionic.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<section>
|
||||
|
||||
<header class="bar bar-header bar-dark">
|
||||
<h1 class="title">Forms</h1>
|
||||
</header>
|
||||
|
||||
<main class="content content-padded has-header">
|
||||
|
||||
<h2>Default form layout</h2>
|
||||
|
||||
<form>
|
||||
<fieldset>
|
||||
<legend>Legend</legend>
|
||||
<label>Label name</label>
|
||||
<input type="text" placeholder="Type something…">
|
||||
<span class="help-block">Example block-level help text here.</span>
|
||||
<label class="checkbox">
|
||||
<input type="checkbox"> Check me out
|
||||
</label>
|
||||
<button type="submit" class="btn">Submit</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
|
||||
<h2>Inline form layout</h2>
|
||||
|
||||
|
||||
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
|
||||
</main>
|
||||
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -27,7 +27,9 @@
|
||||
<p><a class="button button-default" href="alerts.html">Alerts</a></p>
|
||||
<p><a class="button button-default" href="buttons.html">Buttons</a></p>
|
||||
<p><a class="button button-default" href="button-groups.html">Button Groups</a></p>
|
||||
<p><a class="button button-default" href="events.html">Events</a></p>
|
||||
<p><a class="button button-default" href="footers.html">Footers</a></p>
|
||||
<p><a class="button button-default" href="forms.html">Forms</a></p>
|
||||
<p><a class="button button-default" href="grids.html">Grids</a></p>
|
||||
<p><a class="button button-default" href="headers.html">Headers</a></p>
|
||||
<p><a class="button button-default" href="image-swipe.html">Image Swipe</a></p>
|
||||
@@ -40,7 +42,6 @@
|
||||
<p><a class="button button-default" href="popovers.html">Popovers</a></p>
|
||||
<p><a class="button button-default" href="pull-to-refresh.html">Pull To Refresh</a></p>
|
||||
<p><a class="button button-default" href="tab-bars.html">Tab Bars</a></p>
|
||||
<p><a class="button button-default" href="events.html">Events</a></p>
|
||||
</main>
|
||||
|
||||
</section>
|
||||
|
||||
@@ -19,6 +19,19 @@
|
||||
|
||||
<main class="content content-padded has-header">
|
||||
|
||||
<h2>Text input</h2>
|
||||
<p>
|
||||
<input type="text" placeholder="This is where text goes!">
|
||||
</p>
|
||||
|
||||
<h2>Search input</h2>
|
||||
<p>
|
||||
<input type="text" class="input-medium search-query" placeholder="Search">
|
||||
</p>
|
||||
|
||||
<h2>Textarea</h2>
|
||||
<textarea></textarea>
|
||||
|
||||
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
|
||||
</main>
|
||||
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
@import
|
||||
"ionic/structure-variables",
|
||||
"ionic/mixins",
|
||||
"ionic/theme-variables",
|
||||
|
||||
"ionic/structure/base",
|
||||
|
||||
|
||||
@@ -3,6 +3,8 @@
|
||||
|
||||
// Component Themes
|
||||
@import
|
||||
"ionic/structure-variables",
|
||||
"ionic/mixins",
|
||||
"ionic/theme-variables",
|
||||
|
||||
"ionic/theme/base",
|
||||
@@ -11,6 +13,7 @@
|
||||
"ionic/theme/bar",
|
||||
"ionic/theme/button",
|
||||
"ionic/theme/icon",
|
||||
"ionic/theme/form",
|
||||
"ionic/theme/listview",
|
||||
"ionic/theme/panel",
|
||||
"ionic/theme/pull-to-refresh",
|
||||
|
||||
@@ -20,20 +20,699 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Single side border-radius
|
||||
//
|
||||
// Mixins
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// UTILITY MIXINS
|
||||
// --------------------------------------------------
|
||||
|
||||
// Clearfix
|
||||
// --------
|
||||
// For clearing floats like a boss h5bp.com/q
|
||||
@mixin clearfix {
|
||||
*zoom: 1;
|
||||
&:before,
|
||||
&:after {
|
||||
display: table;
|
||||
content: "";
|
||||
// Fixes Opera/contenteditable bug:
|
||||
// http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
|
||||
line-height: 0;
|
||||
}
|
||||
&:after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
// Webkit-style focus
|
||||
// ------------------
|
||||
@mixin tab-focus() {
|
||||
// Default
|
||||
outline: thin dotted #333;
|
||||
// Webkit
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
// Center-align a block level element
|
||||
// ----------------------------------
|
||||
@mixin center-block() {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
// IE7 inline-block
|
||||
// ----------------
|
||||
@mixin ie7-inline-block() {
|
||||
*display: inline; /* IE7 inline-block hack */
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
// IE7 likes to collapse whitespace on either side of the inline-block elements.
|
||||
// Ems because we're attempting to match the width of a space character. Left
|
||||
// version is for form buttons, which typically come after other elements, and
|
||||
// right version is for icons, which come before. Applying both is ok, but it will
|
||||
// mean that space between those elements will be .6em (~2 space characters) in IE7,
|
||||
// instead of the 1 space in other browsers.
|
||||
@mixin ie7-restore-left-whitespace() {
|
||||
*margin-left: .3em;
|
||||
|
||||
&:first-child {
|
||||
*margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin ie7-restore-right-whitespace() {
|
||||
*margin-right: .3em;
|
||||
}
|
||||
|
||||
// Sizing shortcuts
|
||||
// -------------------------
|
||||
@mixin size($height, $width) {
|
||||
width: $width;
|
||||
height: $height;
|
||||
}
|
||||
@mixin square($size) {
|
||||
@include size($size, $size);
|
||||
}
|
||||
|
||||
// Placeholder text
|
||||
// -------------------------
|
||||
@mixin placeholder($color: $placeholderText) {
|
||||
&:-moz-placeholder {
|
||||
color: $color;
|
||||
}
|
||||
&:-ms-input-placeholder {
|
||||
color: $color;
|
||||
}
|
||||
&::-webkit-input-placeholder {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
// Text overflow
|
||||
// -------------------------
|
||||
// Requires inline-block or block for proper styling
|
||||
@mixin text-overflow() {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// CSS image replacement
|
||||
// -------------------------
|
||||
// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
|
||||
@mixin hide-text {
|
||||
font: 0/0 a;
|
||||
color: transparent;
|
||||
text-shadow: none;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
|
||||
// FONTS
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin font-family-serif() {
|
||||
font-family: $serifFontFamily;
|
||||
}
|
||||
@mixin font-family-sans-serif() {
|
||||
font-family: $sansFontFamily;
|
||||
}
|
||||
@mixin font-family-monospace() {
|
||||
font-family: $monoFontFamily;
|
||||
}
|
||||
@mixin font-shorthand($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
|
||||
font-size: $size;
|
||||
font-weight: $weight;
|
||||
line-height: $lineHeight;
|
||||
}
|
||||
@mixin font-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
|
||||
@include font-family-serif();
|
||||
@include font-shorthand($size, $weight, $lineHeight);
|
||||
}
|
||||
@mixin font-sans-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
|
||||
@include font-family-sans-serif();
|
||||
@include font-shorthand($size, $weight, $lineHeight);
|
||||
}
|
||||
@mixin font-monospace($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
|
||||
@include font-family-monospace();
|
||||
@include font-shorthand($size, $weight, $lineHeight);
|
||||
}
|
||||
|
||||
|
||||
// FORMS
|
||||
// --------------------------------------------------
|
||||
|
||||
// Block level inputs
|
||||
@mixin input-block-level {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-height: $inputHeight; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
|
||||
@include box-sizing(border-box); // Makes inputs behave like true block-level elements
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Mixin for form field states
|
||||
@mixin formFieldState($textColor: #555, $borderColor: #ccc, $backgroundColor: #f5f5f5) {
|
||||
// Set the text color
|
||||
.control-label,
|
||||
.help-block,
|
||||
.help-inline {
|
||||
color: $textColor;
|
||||
}
|
||||
// Style inputs accordingly
|
||||
.checkbox,
|
||||
.radio,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
color: $textColor;
|
||||
}
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
border-color: $borderColor;
|
||||
@include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
|
||||
&:focus {
|
||||
border-color: darken($borderColor, 10%);
|
||||
@include box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($borderColor, 20%));
|
||||
}
|
||||
}
|
||||
// Give a small background color for input-prepend/-append
|
||||
.input-prepend .add-on,
|
||||
.input-append .add-on {
|
||||
color: $textColor;
|
||||
background-color: $backgroundColor;
|
||||
border-color: $textColor;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// CSS3 PROPERTIES
|
||||
// --------------------------------------------------
|
||||
|
||||
// Border Radius
|
||||
@mixin border-radius($radius) {
|
||||
-webkit-border-radius: $radius;
|
||||
-moz-border-radius: $radius;
|
||||
border-radius: $radius;
|
||||
}
|
||||
|
||||
// Single Corner Border Radius
|
||||
@mixin border-top-left-radius($radius) {
|
||||
-webkit-border-top-left-radius: $radius;
|
||||
-moz-border-radius-topleft: $radius;
|
||||
border-top-left-radius: $radius;
|
||||
}
|
||||
@mixin border-top-right-radius($radius) {
|
||||
-webkit-border-top-right-radius: $radius;
|
||||
-moz-border-radius-topright: $radius;
|
||||
border-top-right-radius: $radius;
|
||||
}
|
||||
@mixin border-bottom-right-radius($radius) {
|
||||
-webkit-border-bottom-right-radius: $radius;
|
||||
-moz-border-radius-bottomright: $radius;
|
||||
border-bottom-right-radius: $radius;
|
||||
}
|
||||
@mixin border-bottom-left-radius($radius) {
|
||||
-webkit-border-bottom-left-radius: $radius;
|
||||
-moz-border-radius-bottomleft: $radius;
|
||||
border-bottom-left-radius: $radius;
|
||||
}
|
||||
|
||||
// Single Side Border Radius
|
||||
@mixin border-top-radius($radius) {
|
||||
border-top-right-radius: $radius;
|
||||
border-top-left-radius: $radius;
|
||||
@include border-top-right-radius($radius);
|
||||
@include border-top-left-radius($radius);
|
||||
}
|
||||
@mixin border-right-radius($radius) {
|
||||
border-bottom-right-radius: $radius;
|
||||
border-top-right-radius: $radius;
|
||||
@include border-top-right-radius($radius);
|
||||
@include border-bottom-right-radius($radius);
|
||||
}
|
||||
@mixin border-bottom-radius($radius) {
|
||||
border-bottom-right-radius: $radius;
|
||||
border-bottom-left-radius: $radius;
|
||||
@include border-bottom-right-radius($radius);
|
||||
@include border-bottom-left-radius($radius);
|
||||
}
|
||||
@mixin border-left-radius($radius) {
|
||||
border-bottom-left-radius: $radius;
|
||||
border-top-left-radius: $radius;
|
||||
@include border-top-left-radius($radius);
|
||||
@include border-bottom-left-radius($radius);
|
||||
}
|
||||
|
||||
// Drop shadows
|
||||
@mixin box-shadow($shadow...) {
|
||||
-webkit-box-shadow: $shadow;
|
||||
-moz-box-shadow: $shadow;
|
||||
box-shadow: $shadow;
|
||||
}
|
||||
|
||||
// Transitions
|
||||
@mixin transition($transition...) {
|
||||
-webkit-transition: $transition;
|
||||
-moz-transition: $transition;
|
||||
-o-transition: $transition;
|
||||
transition: $transition;
|
||||
}
|
||||
@mixin transition-delay($transition-delay) {
|
||||
-webkit-transition-delay: $transition-delay;
|
||||
-moz-transition-delay: $transition-delay;
|
||||
-o-transition-delay: $transition-delay;
|
||||
transition-delay: $transition-delay;
|
||||
}
|
||||
@mixin transition-duration($transition-duration) {
|
||||
-webkit-transition-duration: $transition-duration;
|
||||
-moz-transition-duration: $transition-duration;
|
||||
-o-transition-duration: $transition-duration;
|
||||
transition-duration: $transition-duration;
|
||||
}
|
||||
|
||||
// Transformations
|
||||
@mixin rotate($degrees) {
|
||||
-webkit-transform: rotate($degrees);
|
||||
-moz-transform: rotate($degrees);
|
||||
-ms-transform: rotate($degrees);
|
||||
-o-transform: rotate($degrees);
|
||||
transform: rotate($degrees);
|
||||
}
|
||||
@mixin scale($ratio) {
|
||||
-webkit-transform: scale($ratio);
|
||||
-moz-transform: scale($ratio);
|
||||
-ms-transform: scale($ratio);
|
||||
-o-transform: scale($ratio);
|
||||
transform: scale($ratio);
|
||||
}
|
||||
@mixin translate($x, $y) {
|
||||
-webkit-transform: translate($x, $y);
|
||||
-moz-transform: translate($x, $y);
|
||||
-ms-transform: translate($x, $y);
|
||||
-o-transform: translate($x, $y);
|
||||
transform: translate($x, $y);
|
||||
}
|
||||
@mixin skew($x, $y) {
|
||||
-webkit-transform: skew($x, $y);
|
||||
-moz-transform: skew($x, $y);
|
||||
-ms-transform: skewX($x) skewY($y); // See https://github.com/twitter/bootstrap/issues/4885
|
||||
-o-transform: skew($x, $y);
|
||||
transform: skew($x, $y);
|
||||
-webkit-backface-visibility: hidden; // See https://github.com/twitter/bootstrap/issues/5319
|
||||
}
|
||||
@mixin translate3d($x, $y, $z) {
|
||||
-webkit-transform: translate3d($x, $y, $z);
|
||||
-moz-transform: translate3d($x, $y, $z);
|
||||
-o-transform: translate3d($x, $y, $z);
|
||||
transform: translate3d($x, $y, $z);
|
||||
}
|
||||
|
||||
// Backface visibility
|
||||
// Prevent browsers from flickering when using CSS 3D transforms.
|
||||
// Default value is `visible`, but can be changed to `hidden
|
||||
// See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
|
||||
@mixin backface-visibility($visibility){
|
||||
-webkit-backface-visibility: $visibility;
|
||||
-moz-backface-visibility: $visibility;
|
||||
backface-visibility: $visibility;
|
||||
}
|
||||
|
||||
// Background clipping
|
||||
// Heads up: FF 3.6 and under need "padding" instead of "padding-box"
|
||||
@mixin background-clip($clip) {
|
||||
-webkit-background-clip: $clip;
|
||||
-moz-background-clip: $clip;
|
||||
background-clip: $clip;
|
||||
}
|
||||
|
||||
// Background sizing
|
||||
@mixin background-size($size) {
|
||||
-webkit-background-size: $size;
|
||||
-moz-background-size: $size;
|
||||
-o-background-size: $size;
|
||||
background-size: $size;
|
||||
}
|
||||
|
||||
|
||||
// Box sizing
|
||||
@mixin box-sizing($boxmodel) {
|
||||
-webkit-box-sizing: $boxmodel;
|
||||
-moz-box-sizing: $boxmodel;
|
||||
box-sizing: $boxmodel;
|
||||
}
|
||||
|
||||
// User select
|
||||
// For selecting text on the page
|
||||
@mixin user-select($select) {
|
||||
-webkit-user-select: $select;
|
||||
-moz-user-select: $select;
|
||||
-ms-user-select: $select;
|
||||
-o-user-select: $select;
|
||||
user-select: $select;
|
||||
}
|
||||
|
||||
// Resize anything
|
||||
@mixin resizable($direction) {
|
||||
resize: $direction; // Options: horizontal, vertical, both
|
||||
overflow: auto; // Safari fix
|
||||
}
|
||||
|
||||
// CSS3 Content Columns
|
||||
@mixin content-columns($columnCount, $columnGap: $gridGutterWidth) {
|
||||
-webkit-column-count: $columnCount;
|
||||
-moz-column-count: $columnCount;
|
||||
column-count: $columnCount;
|
||||
-webkit-column-gap: $columnGap;
|
||||
-moz-column-gap: $columnGap;
|
||||
column-gap: $columnGap;
|
||||
}
|
||||
|
||||
// Optional hyphenation
|
||||
@mixin hyphens($mode: auto) {
|
||||
word-wrap: break-word;
|
||||
-webkit-hyphens: $mode;
|
||||
-moz-hyphens: $mode;
|
||||
-ms-hyphens: $mode;
|
||||
-o-hyphens: $mode;
|
||||
hyphens: $mode;
|
||||
}
|
||||
|
||||
// Opacity
|
||||
@mixin opacity($opacity) {
|
||||
opacity: $opacity / 100;
|
||||
filter: alpha(opacity=$opacity);
|
||||
}
|
||||
|
||||
|
||||
|
||||
// BACKGROUNDS
|
||||
// --------------------------------------------------
|
||||
|
||||
// Add an alphatransparency value to any background or border color (via Elyse Holladay)
|
||||
@mixin translucent-background($color: $white, $alpha: 1) {
|
||||
background-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
|
||||
}
|
||||
|
||||
@mixin translucent-border($color: $white, $alpha: 1) {
|
||||
border-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
|
||||
@include background-clip(padding-box);
|
||||
}
|
||||
|
||||
// Gradient Bar Colors for buttons and alerts
|
||||
@mixin gradientBar($primaryColor, $secondaryColor, $textColor: #fff, $textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
|
||||
color: $textColor;
|
||||
text-shadow: $textShadow;
|
||||
@include gradient-vertical($primaryColor, $secondaryColor);
|
||||
border-color: $secondaryColor $secondaryColor darken($secondaryColor, 15%);
|
||||
border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fade-in(rgba(0,0,0,.1), 0.15);
|
||||
}
|
||||
|
||||
// Gradients
|
||||
@mixin gradient-horizontal($startColor: #555, $endColor: #333) {
|
||||
background-color: $endColor;
|
||||
background-image: -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+
|
||||
background-image: -webkit-gradient(linear, 0 0, 100% 0, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
|
||||
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(to right, $startColor, $endColor); // Standard, IE10
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=1); // IE9 and down
|
||||
}
|
||||
@mixin gradient-vertical($startColor: #555, $endColor: #333) {
|
||||
background-color: mix($startColor, $endColor, 60%);
|
||||
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+
|
||||
background-image: -o-linear-gradient(top, $startColor, $endColor); // Opera 11.10
|
||||
background-image: linear-gradient(to bottom, $startColor, $endColor); // Standard, IE10
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=0); // IE9 and down
|
||||
}
|
||||
@mixin gradient-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+
|
||||
background-image: -webkit-linear-gradient($deg, $startColor, $endColor); // Safari 5.1+, Chrome 10+
|
||||
background-image: -o-linear-gradient($deg, $startColor, $endColor); // Opera 11.10
|
||||
background-image: linear-gradient($deg, $startColor, $endColor); // Standard, IE10
|
||||
}
|
||||
@mixin gradient-horizontal-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
|
||||
background-color: mix($midColor, $endColor, 80%);
|
||||
background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from($startColor), color-stop($colorStop, $midColor), to($endColor));
|
||||
background-image: -webkit-linear-gradient(left, $startColor, $midColor $colorStop, $endColor);
|
||||
background-image: -moz-linear-gradient(left, $startColor, $midColor $colorStop, $endColor);
|
||||
background-image: -o-linear-gradient(left, $startColor, $midColor $colorStop, $endColor);
|
||||
background-image: linear-gradient(to right, $startColor, $midColor $colorStop, $endColor);
|
||||
background-repeat: no-repeat;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=0); // IE9 and down, gets no color-stop at all for proper fallback
|
||||
}
|
||||
|
||||
@mixin gradient-vertical-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
|
||||
background-color: mix($midColor, $endColor, 80%);
|
||||
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: -o-linear-gradient($startColor, $midColor $colorStop, $endColor);
|
||||
background-image: linear-gradient($startColor, $midColor $colorStop, $endColor);
|
||||
background-repeat: no-repeat;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=0); // IE9 and down, gets no color-stop at all for proper fallback
|
||||
}
|
||||
@mixin gradient-radial($innerColor: #555, $outerColor: #333) {
|
||||
background-color: $outerColor;
|
||||
background-image: -webkit-gradient(radial, center center, 0, center center, 460, from($innerColor), to($outerColor));
|
||||
background-image: -webkit-radial-gradient(circle, $innerColor, $outerColor);
|
||||
background-image: -moz-radial-gradient(circle, $innerColor, $outerColor);
|
||||
background-image: -o-radial-gradient(circle, $innerColor, $outerColor);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
@mixin gradient-striped($color: #555, $angle: 45deg) {
|
||||
background-color: $color;
|
||||
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
|
||||
background-image: -webkit-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
|
||||
background-image: -moz-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
|
||||
background-image: -o-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
|
||||
background-image: linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
|
||||
}
|
||||
|
||||
// Reset filters for IE
|
||||
@mixin reset-filter() {
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
|
||||
}
|
||||
|
||||
|
||||
|
||||
// COMPONENT MIXINS
|
||||
// --------------------------------------------------
|
||||
|
||||
// Horizontal dividers
|
||||
// -------------------------
|
||||
// Dividers (basically an hr) within dropdowns and nav lists
|
||||
@mixin nav-divider($top: #e5e5e5, $bottom: $white) {
|
||||
// IE7 needs a set width since we gave a height. Restricting just
|
||||
// to IE7 to keep the 1px left/right space in other browsers.
|
||||
// It is unclear where IE is getting the extra space that we need
|
||||
// to negative-margin away, but so it goes.
|
||||
*width: 100%;
|
||||
height: 1px;
|
||||
margin: (($baseLineHeight / 2) - 1) 1px; // 8px 1px
|
||||
*margin: -5px 0 5px;
|
||||
overflow: hidden;
|
||||
background-color: $top;
|
||||
border-bottom: 1px solid $bottom;
|
||||
}
|
||||
|
||||
// Button backgrounds
|
||||
// ------------------
|
||||
@mixin buttonBackground($startColor, $endColor, $textColor: #fff, $textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
|
||||
// gradientBar will set the background to a pleasing blend of these, to support IE<=9
|
||||
@include gradientBar($startColor, $endColor, $textColor, $textShadow);
|
||||
*background-color: $endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */
|
||||
@include reset-filter();
|
||||
|
||||
// in these cases the gradient won't cover the background, so we override
|
||||
&:hover, &:focus, &:active, &.active, &.disabled, &[disabled] {
|
||||
color: $textColor;
|
||||
background-color: $endColor;
|
||||
*background-color: darken($endColor, 5%);
|
||||
}
|
||||
|
||||
// IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
|
||||
&:active,
|
||||
&.active {
|
||||
background-color: darken($endColor, 10%) \9;
|
||||
}
|
||||
}
|
||||
|
||||
// Navbar vertical align
|
||||
// -------------------------
|
||||
// Vertically center elements in the navbar.
|
||||
// Example: an element has a height of 30px, so write out `.navbarVerticalAlign(30px);` to calculate the appropriate top margin.
|
||||
@mixin navbarVerticalAlign($elementHeight) {
|
||||
margin-top: ($navbarHeight - $elementHeight) / 2;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Grid System
|
||||
// -----------
|
||||
|
||||
// Centered container element
|
||||
@mixin container-fixed() {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
@include clearfix();
|
||||
}
|
||||
|
||||
// Table columns
|
||||
@mixin tableColumns($columnSpan: 1) {
|
||||
float: none; // undo default grid column styles
|
||||
width: (($gridColumnWidth) * $columnSpan) + ($gridGutterWidth * ($columnSpan - 1)) - 16; // 16 is total padding on left and right of table cells
|
||||
margin-left: 0; // undo default grid column styles
|
||||
}
|
||||
|
||||
// Make a Grid
|
||||
// Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
|
||||
@mixin makeRow() {
|
||||
margin-left: $gridGutterWidth * -1;
|
||||
@include clearfix();
|
||||
}
|
||||
@mixin makeColumn($columns: 1, $offset: 0) {
|
||||
float: left;
|
||||
margin-left: ($gridColumnWidth * $offset) + ($gridGutterWidth * ($offset - 1)) + ($gridGutterWidth * 2);
|
||||
width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
|
||||
}
|
||||
|
||||
// The Grid
|
||||
@mixin grid-core($gridColumnWidth, $gridGutterWidth) {
|
||||
.row {
|
||||
margin-left: $gridGutterWidth * -1;
|
||||
@include clearfix();
|
||||
}
|
||||
|
||||
[class*="span"] {
|
||||
float: left;
|
||||
min-height: 1px; // prevent collapsing columns
|
||||
margin-left: $gridGutterWidth;
|
||||
}
|
||||
|
||||
// Set the container width, and override it for fixed navbars in media queries
|
||||
.container,
|
||||
.navbar-static-top .container,
|
||||
.navbar-fixed-top .container,
|
||||
.navbar-fixed-bottom .container {
|
||||
@include grid-core-span($gridColumns, $gridColumnWidth, $gridGutterWidth);
|
||||
}
|
||||
|
||||
// generate .spanX and .offsetX
|
||||
@include grid-core-span-x($gridColumns, $gridColumnWidth, $gridGutterWidth);
|
||||
@include grid-core-offset-x($gridColumns, $gridColumnWidth, $gridGutterWidth);
|
||||
}
|
||||
|
||||
@mixin grid-core-span-x($gridColumns, $gridColumnWidth, $gridGutterWidth) {
|
||||
@for $i from 1 through $gridColumns {
|
||||
.span#{$i} { @include grid-core-span($i, $gridColumnWidth, $gridGutterWidth); }
|
||||
}
|
||||
}
|
||||
|
||||
@mixin grid-core-offset-x($gridColumns, $gridColumnWidth, $gridGutterWidth) {
|
||||
@for $i from 1 through $gridColumns {
|
||||
.offset#{$i} { @include grid-core-offset($i, $gridColumnWidth, $gridGutterWidth); }
|
||||
}
|
||||
}
|
||||
|
||||
@mixin grid-core-span($columns, $gridColumnWidth, $gridGutterWidth) {
|
||||
width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
|
||||
}
|
||||
|
||||
@mixin grid-core-offset($columns, $gridColumnWidth, $gridGutterWidth) {
|
||||
margin-left: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns + 1));
|
||||
}
|
||||
|
||||
|
||||
|
||||
@mixin grid-fluid($fluidGridColumnWidth, $fluidGridGutterWidth) {
|
||||
.row-fluid {
|
||||
width: 100%;
|
||||
@include clearfix();
|
||||
[class*="span"] {
|
||||
@include input-block-level();
|
||||
float: left;
|
||||
margin-left: $fluidGridGutterWidth;
|
||||
*margin-left: $fluidGridGutterWidth - (.5 / $gridRowWidth * 100px * 1%);
|
||||
}
|
||||
[class*="span"]:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
// Space grid-sized controls properly if multiple per line
|
||||
.controls-row [class*="span"] + [class*="span"] {
|
||||
margin-left: $fluidGridGutterWidth;
|
||||
}
|
||||
|
||||
// generate .spanX and .offsetX
|
||||
@include grid-fluid-span-x($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth);
|
||||
@include grid-fluid-offset-x($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin grid-fluid-span-x($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
|
||||
@for $i from 1 through $gridColumns {
|
||||
.span#{$i} { @include grid-fluid-span($i, $fluidGridColumnWidth, $fluidGridGutterWidth); }
|
||||
}
|
||||
}
|
||||
|
||||
@mixin grid-fluid-offset-x($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
|
||||
@for $i from 1 through $gridColumns {
|
||||
.offset#{$i} { @include grid-fluid-offset($i, $fluidGridColumnWidth, $fluidGridGutterWidth); }
|
||||
.offset#{$i}:first-child { @include grid-fluid-offset-first-child($i, $fluidGridColumnWidth, $fluidGridGutterWidth); }
|
||||
}
|
||||
}
|
||||
|
||||
@mixin grid-fluid-span($columns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
|
||||
width: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1));
|
||||
*width: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)) - (.5 / $gridRowWidth * 100px * 1%);
|
||||
}
|
||||
|
||||
@mixin grid-fluid-offset($columns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
|
||||
margin-left: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)) + ($fluidGridGutterWidth * 2);
|
||||
*margin-left: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)) - (.5 / $gridRowWidth * 100px * 1%) + ($fluidGridGutterWidth * 2) - (.5 / $gridRowWidth * 100px * 1%);
|
||||
}
|
||||
|
||||
@mixin grid-fluid-offset-first-child($columns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
|
||||
margin-left: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)) + ($fluidGridGutterWidth);
|
||||
*margin-left: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)) - (.5 / $gridRowWidth * 100px * 1%) + $fluidGridGutterWidth - (.5 / $gridRowWidth * 100px * 1%);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@mixin grid-input($gridColumnWidth, $gridGutterWidth) {
|
||||
input,
|
||||
textarea,
|
||||
.uneditable-input {
|
||||
margin-left: 0; // override margin-left from core grid system
|
||||
}
|
||||
|
||||
// Space grid-sized controls properly if multiple per line
|
||||
.controls-row [class*="span"] + [class*="span"] {
|
||||
margin-left: $gridGutterWidth;
|
||||
}
|
||||
|
||||
// generate .spanX
|
||||
@include grid-input-span-x($gridColumns, $gridColumnWidth, $gridGutterWidth);
|
||||
}
|
||||
|
||||
@mixin grid-input-span-x($gridColumns, $gridColumnWidth, $gridGutterWidth) {
|
||||
@for $i from 1 through $gridColumns {
|
||||
input.span#{$i},
|
||||
textarea.span#{$i},
|
||||
.uneditable-input.span#{$i} {
|
||||
@include grid-input-span($i, $gridColumnWidth, $gridGutterWidth);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin grid-input-span($columns, $gridColumnWidth, $gridGutterWidth) {
|
||||
width: (($gridColumnWidth) * $columns) + ($gridGutterWidth * ($columns - 1)) - 14;
|
||||
}
|
||||
|
||||
@@ -6,11 +6,39 @@ $fontSizeLarge: ceil($baseFontSize * 1.25);
|
||||
|
||||
$baseLineHeight: 1.428571429; // 20/14
|
||||
$baseLineHeightComputed: floor($baseFontSize * $baseLineHeight); // ~20px
|
||||
$baseBorderRadius: 2px !default;
|
||||
|
||||
|
||||
// Grays
|
||||
// -------------------------
|
||||
$black: #000 !default;
|
||||
$grayDarker: #222 !default;
|
||||
$grayDark: #333 !default;
|
||||
$gray: #555 !default;
|
||||
$grayLight: #999 !default;
|
||||
$grayLighter: #eee !default;
|
||||
$white: #fff !default;
|
||||
|
||||
|
||||
// Accent colors
|
||||
// -------------------------
|
||||
$blue: #049cdb !default;
|
||||
$blueDark: #0064cd !default;
|
||||
$green: #46a546 !default;
|
||||
$red: #9d261d !default;
|
||||
$yellow: #ffc40d !default;
|
||||
$orange: #f89406 !default;
|
||||
$pink: #c3325f !default;
|
||||
$purple: #7a43b6 !default;
|
||||
|
||||
|
||||
// Content stuff
|
||||
// -------------------------
|
||||
$contentPadding: 10px;
|
||||
|
||||
|
||||
// Bar stuff
|
||||
// -------------------------
|
||||
$barHeight: 44px !default;
|
||||
$barLineHeight: 44px !default;
|
||||
$barTitleFontSize: $fontSizeLarge;
|
||||
@@ -20,11 +48,69 @@ $barPaddingPortrait: 8px;
|
||||
$barPaddingLandscape : 5px;
|
||||
|
||||
|
||||
// Forms
|
||||
// -------------------------
|
||||
$inputBackground: $white !default;
|
||||
$inputBorder: #ccc !default;
|
||||
$inputBorderRadius: 4px !default;
|
||||
$inputDisabledBackground: $grayLighter !default;
|
||||
$formActionsBackground: #f5f5f5 !default;
|
||||
$inputHeight: $baseFontSize + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
|
||||
|
||||
|
||||
// Horizontal forms & lists
|
||||
// -------------------------
|
||||
$horizontalComponentOffset: 180px !default;
|
||||
|
||||
|
||||
// Input placeholder text color
|
||||
// -------------------------
|
||||
$placeholderText: $grayLight !default;
|
||||
|
||||
|
||||
// Lists
|
||||
// -------------------------
|
||||
$listItemBorder: 1px solid #ddd;
|
||||
|
||||
|
||||
// Panels
|
||||
// -------------------------
|
||||
$panelOpenWidth: 270px;
|
||||
$panelAnimationSpeed: 200ms;
|
||||
$panelAnimationSpeed: 200ms;
|
||||
|
||||
|
||||
|
||||
// GRID
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Default 940px grid
|
||||
// -------------------------
|
||||
$gridColumns: 12 !default;
|
||||
$gridColumnWidth: 60px !default;
|
||||
$gridGutterWidth: 20px !default;
|
||||
$gridRowWidth: ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1)) !default;
|
||||
|
||||
// 1200px min
|
||||
$gridColumnWidth1200: 70px !default;
|
||||
$gridGutterWidth1200: 30px !default;
|
||||
$gridRowWidth1200: ($gridColumns * $gridColumnWidth1200) + ($gridGutterWidth1200 * ($gridColumns - 1)) !default;
|
||||
|
||||
// 768px-979px
|
||||
$gridColumnWidth768: 42px !default;
|
||||
$gridGutterWidth768: 20px !default;
|
||||
$gridRowWidth768: ($gridColumns * $gridColumnWidth768) + ($gridGutterWidth768 * ($gridColumns - 1)) !default;
|
||||
|
||||
|
||||
// Fluid grid
|
||||
// -------------------------
|
||||
$fluidGridColumnWidth: percentage($gridColumnWidth/$gridRowWidth) !default;
|
||||
$fluidGridGutterWidth: percentage($gridGutterWidth/$gridRowWidth) !default;
|
||||
|
||||
// 1200px min
|
||||
$fluidGridColumnWidth1200: percentage($gridColumnWidth1200/$gridRowWidth1200) !default;
|
||||
$fluidGridGutterWidth1200: percentage($gridGutterWidth1200/$gridRowWidth1200) !default;
|
||||
|
||||
// 768px-979px
|
||||
$fluidGridColumnWidth768: percentage($gridColumnWidth768/$gridRowWidth768) !default;
|
||||
$fluidGridGutterWidth768: percentage($gridGutterWidth768/$gridRowWidth768) !default;
|
||||
@@ -1,21 +1,27 @@
|
||||
|
||||
// Fonts
|
||||
// -------------------------------
|
||||
$sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
|
||||
$lightSansFontFamily: "Helvetica Neue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif !default;
|
||||
$serifFontFamily: Georgia, "Times New Roman", Times, serif !default;
|
||||
$monoFontFamily: Monaco, Menlo, Consolas, "Courier New", monospace !default;
|
||||
|
||||
|
||||
// Base
|
||||
// -------------------------------
|
||||
$baseFontFamily: $sansFontFamily;
|
||||
$baseBackgroundColor: #fff;
|
||||
$textColor: $grayDark !default;
|
||||
|
||||
|
||||
// Typography
|
||||
// -------------------------------
|
||||
$lightColor: #fff;
|
||||
$darkColor: #333;
|
||||
|
||||
|
||||
// Buttons
|
||||
// -------------------------------
|
||||
$buttonColor: #222;
|
||||
$buttonPadding: 10px 15px;
|
||||
$buttonBorderRadius: 2px;
|
||||
@@ -54,8 +60,8 @@ $buttonDarkBackgroundActive: #eee;
|
||||
$buttonDarkBorder: #111;
|
||||
|
||||
|
||||
|
||||
// Bars
|
||||
// -------------------------------
|
||||
$barBackground: white;
|
||||
|
||||
// Bar variations
|
||||
@@ -85,11 +91,13 @@ $barDarkBorderColor: #111;
|
||||
|
||||
|
||||
// Lists
|
||||
// -------------------------------
|
||||
$listDividerBackground: #f5f5f5;
|
||||
$listDividerColor: #222;
|
||||
|
||||
|
||||
// Form states and alerts
|
||||
// -------------------------------
|
||||
$warningText: #c09853;
|
||||
$warningBackground: #fcf8e3;
|
||||
$warningBorder: darken(adjust-hue($warningBackground, -10), 3%);
|
||||
@@ -108,5 +116,6 @@ $infoBorder: darken(adjust-hue($infoBackground, -10), 7%);
|
||||
|
||||
|
||||
// Panels
|
||||
// -------------------------------
|
||||
$panelBackgroundColor: #eee;
|
||||
$panelInsetBorderColor: #bbb;
|
||||
|
||||
@@ -0,0 +1,689 @@
|
||||
//
|
||||
// Forms
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// GENERAL STYLES
|
||||
// --------------
|
||||
|
||||
// Make all forms have space below them
|
||||
form {
|
||||
margin: 0 0 $baseLineHeight;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
// Groups of fields with labels on top (legends)
|
||||
legend {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin-bottom: $baseLineHeight;
|
||||
font-size: $baseFontSize * 1.5;
|
||||
line-height: $baseLineHeight * 2;
|
||||
color: $grayDark;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
|
||||
// Small
|
||||
small {
|
||||
font-size: $baseLineHeight * .75;
|
||||
color: $grayLight;
|
||||
}
|
||||
}
|
||||
|
||||
// Set font for forms
|
||||
label,
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
textarea {
|
||||
@include font-shorthand($baseFontSize, normal, $baseLineHeight); // Set size, weight, line-height here
|
||||
}
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
textarea {
|
||||
font-family: $baseFontFamily; // And only set font-family here for those that need it (note the missing label element)
|
||||
}
|
||||
|
||||
// Identify controls by their labels
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
// Form controls
|
||||
// -------------------------
|
||||
|
||||
// Shared size and type resets
|
||||
select,
|
||||
textarea,
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="datetime"],
|
||||
input[type="datetime-local"],
|
||||
input[type="date"],
|
||||
input[type="month"],
|
||||
input[type="time"],
|
||||
input[type="week"],
|
||||
input[type="number"],
|
||||
input[type="email"],
|
||||
input[type="url"],
|
||||
input[type="search"],
|
||||
input[type="tel"],
|
||||
input[type="color"],
|
||||
.uneditable-input {
|
||||
display: inline-block;
|
||||
height: $baseLineHeightComputed + 14px;
|
||||
padding: 4px 6px;
|
||||
margin-bottom: $baseLineHeightComputed / 2;;
|
||||
font-size: $baseFontSize;
|
||||
line-height: $baseLineHeightComputed;
|
||||
color: $gray;
|
||||
@include border-radius($inputBorderRadius);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// Reset appearance properties for textual inputs and textarea
|
||||
// Declare width for legacy (can't be on input[type=*] selectors or it's too specific)
|
||||
input,
|
||||
textarea,
|
||||
.uneditable-input {
|
||||
width: 100%;
|
||||
}
|
||||
// Reset height since textareas have rows
|
||||
textarea {
|
||||
height: auto;
|
||||
}
|
||||
// Everything else
|
||||
textarea,
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="datetime"],
|
||||
input[type="datetime-local"],
|
||||
input[type="date"],
|
||||
input[type="month"],
|
||||
input[type="time"],
|
||||
input[type="week"],
|
||||
input[type="number"],
|
||||
input[type="email"],
|
||||
input[type="url"],
|
||||
input[type="search"],
|
||||
input[type="tel"],
|
||||
input[type="color"],
|
||||
.uneditable-input {
|
||||
background-color: $inputBackground;
|
||||
border: 1px solid $inputBorder;
|
||||
@include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
|
||||
@include transition(border linear .2s, box-shadow linear .2s);
|
||||
|
||||
// Focus state
|
||||
&:focus {
|
||||
border-color: rgba(82,168,236,.8);
|
||||
outline: 0;
|
||||
outline: thin dotted \9; /* IE6-9 */
|
||||
@include box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6));
|
||||
}
|
||||
}
|
||||
|
||||
// Position radios and checkboxes better
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
margin: 4px 0 0;
|
||||
*margin-top: 0; /* IE7 */
|
||||
margin-top: 1px \9; /* IE8-9 */
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
// Reset width of input images, buttons, radios, checkboxes
|
||||
input[type="file"],
|
||||
input[type="image"],
|
||||
input[type="submit"],
|
||||
input[type="reset"],
|
||||
input[type="button"],
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
width: auto; // Override of generic input selector
|
||||
}
|
||||
|
||||
// Set the height of select and file controls to match text inputs
|
||||
select,
|
||||
input[type="file"] {
|
||||
height: $inputHeight; /* In IE7, the height of the select element cannot be changed by height, only font-size */
|
||||
*margin-top: 4px; /* For IE7, add top margin to align select with labels */
|
||||
line-height: $inputHeight;
|
||||
}
|
||||
|
||||
// Make select elements obey height by applying a border
|
||||
select {
|
||||
width: 220px; // default input width + 10px of padding that doesn't get applied
|
||||
border: 1px solid $inputBorder;
|
||||
background-color: $inputBackground; // Chrome on Linux and Mobile Safari need background-color
|
||||
}
|
||||
|
||||
// Make multiple select elements height not fixed
|
||||
select[multiple],
|
||||
select[size] {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
// Focus for select, file, radio, and checkbox
|
||||
select:focus,
|
||||
input[type="file"]:focus,
|
||||
input[type="radio"]:focus,
|
||||
input[type="checkbox"]:focus {
|
||||
@include tab-focus();
|
||||
}
|
||||
|
||||
|
||||
// Uneditable inputs
|
||||
// -------------------------
|
||||
|
||||
// Make uneditable inputs look inactive
|
||||
.uneditable-input,
|
||||
.uneditable-textarea {
|
||||
color: $grayLight;
|
||||
background-color: darken($inputBackground, 1%);
|
||||
border-color: $inputBorder;
|
||||
@include box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
// For text that needs to appear as an input but should not be an input
|
||||
.uneditable-input {
|
||||
overflow: hidden; // prevent text from wrapping, but still cut it off like an input does
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// Make uneditable textareas behave like a textarea
|
||||
.uneditable-textarea {
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
// Placeholder
|
||||
// -------------------------
|
||||
|
||||
// Placeholder text gets special styles because when browsers invalidate entire lines if it doesn't understand a selector
|
||||
input,
|
||||
textarea {
|
||||
@include placeholder();
|
||||
}
|
||||
|
||||
|
||||
// CHECKBOXES & RADIOS
|
||||
// -------------------
|
||||
|
||||
// Indent the labels to position radios/checkboxes as hanging
|
||||
.radio,
|
||||
.checkbox {
|
||||
min-height: $baseLineHeight; // clear the floating input if there is no label text
|
||||
padding-left: 20px;
|
||||
}
|
||||
.radio input[type="radio"],
|
||||
.checkbox input[type="checkbox"] {
|
||||
float: left;
|
||||
margin-left: -20px;
|
||||
}
|
||||
|
||||
// Move the options list down to align with labels
|
||||
.controls > .radio:first-child,
|
||||
.controls > .checkbox:first-child {
|
||||
padding-top: 5px; // has to be padding because margin collaspes
|
||||
}
|
||||
|
||||
// Radios and checkboxes on same line
|
||||
// TODO v3: Convert .inline to .control-inline
|
||||
.radio.inline,
|
||||
.checkbox.inline {
|
||||
display: inline-block;
|
||||
padding-top: 5px;
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.radio.inline + .radio.inline,
|
||||
.checkbox.inline + .checkbox.inline {
|
||||
margin-left: 10px; // space out consecutive inline controls
|
||||
}
|
||||
|
||||
|
||||
|
||||
// INPUT SIZES
|
||||
// -----------
|
||||
|
||||
// General classes for quick sizes
|
||||
.input-mini { width: 60px; }
|
||||
.input-small { width: 90px; }
|
||||
.input-medium { width: 150px; }
|
||||
.input-large { width: 210px; }
|
||||
.input-xlarge { width: 270px; }
|
||||
.input-xxlarge { width: 530px; }
|
||||
|
||||
// Grid style input sizes
|
||||
input[class*="span"],
|
||||
select[class*="span"],
|
||||
textarea[class*="span"],
|
||||
.uneditable-input[class*="span"],
|
||||
// Redeclare since the fluid row class is more specific
|
||||
.row-fluid input[class*="span"],
|
||||
.row-fluid select[class*="span"],
|
||||
.row-fluid textarea[class*="span"],
|
||||
.row-fluid .uneditable-input[class*="span"] {
|
||||
float: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
// Ensure input-prepend/append never wraps
|
||||
.input-append input[class*="span"],
|
||||
.input-append .uneditable-input[class*="span"],
|
||||
.input-prepend input[class*="span"],
|
||||
.input-prepend .uneditable-input[class*="span"],
|
||||
.row-fluid input[class*="span"],
|
||||
.row-fluid select[class*="span"],
|
||||
.row-fluid textarea[class*="span"],
|
||||
.row-fluid .uneditable-input[class*="span"],
|
||||
.row-fluid .input-prepend [class*="span"],
|
||||
.row-fluid .input-append [class*="span"] {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// GRID SIZING FOR INPUTS
|
||||
// ----------------------
|
||||
|
||||
// Grid sizes
|
||||
@include grid-input($gridColumnWidth, $gridGutterWidth);
|
||||
|
||||
// Control row for multiple inputs per line
|
||||
.controls-row {
|
||||
@include clearfix(); // Clear the float from controls
|
||||
}
|
||||
|
||||
// Float to collapse white-space for proper grid alignment
|
||||
.controls-row [class*="span"],
|
||||
// Redeclare the fluid grid collapse since we undo the float for inputs
|
||||
.row-fluid .controls-row [class*="span"] {
|
||||
float: left;
|
||||
}
|
||||
// Explicity set top padding on all checkboxes/radios, not just first-child
|
||||
.controls-row .checkbox[class*="span"],
|
||||
.controls-row .radio[class*="span"] {
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// DISABLED STATE
|
||||
// --------------
|
||||
|
||||
// Disabled and read-only inputs
|
||||
input[disabled],
|
||||
select[disabled],
|
||||
textarea[disabled],
|
||||
input[readonly],
|
||||
select[readonly],
|
||||
textarea[readonly] {
|
||||
cursor: not-allowed;
|
||||
background-color: $inputDisabledBackground;
|
||||
}
|
||||
// Explicitly reset the colors here
|
||||
input[type="radio"][disabled],
|
||||
input[type="checkbox"][disabled],
|
||||
input[type="radio"][readonly],
|
||||
input[type="checkbox"][readonly] {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// FORM FIELD FEEDBACK STATES
|
||||
// --------------------------
|
||||
|
||||
// Warning
|
||||
.control-group.warning {
|
||||
@include formFieldState($warningText, $warningText, $warningBackground);
|
||||
}
|
||||
// Error
|
||||
.control-group.error {
|
||||
@include formFieldState($errorText, $errorText, $errorBackground);
|
||||
}
|
||||
// Success
|
||||
.control-group.success {
|
||||
@include formFieldState($successText, $successText, $successBackground);
|
||||
}
|
||||
// Info
|
||||
.control-group.info {
|
||||
@include formFieldState($infoText, $infoText, $infoBackground);
|
||||
}
|
||||
|
||||
// HTML5 invalid states
|
||||
// Shares styles with the .control-group.error above
|
||||
input:focus:invalid,
|
||||
textarea:focus:invalid,
|
||||
select:focus:invalid {
|
||||
color: #b94a48;
|
||||
border-color: #ee5f5b;
|
||||
&:focus {
|
||||
border-color: darken(#ee5f5b, 10%);
|
||||
@include box-shadow(0 0 6px lighten(#ee5f5b, 20%));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// FORM ACTIONS
|
||||
// ------------
|
||||
|
||||
.form-actions {
|
||||
padding: ($baseLineHeight - 1) 20px $baseLineHeight;
|
||||
margin-top: $baseLineHeight;
|
||||
margin-bottom: $baseLineHeight;
|
||||
background-color: $formActionsBackground;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
@include clearfix(); // Adding clearfix to allow for .pull-right button containers
|
||||
}
|
||||
|
||||
|
||||
|
||||
// HELP TEXT
|
||||
// ---------
|
||||
|
||||
.help-block,
|
||||
.help-inline {
|
||||
color: lighten($textColor, 15%); // lighten the text some for contrast
|
||||
}
|
||||
|
||||
.help-block {
|
||||
display: block; // account for any element using help-block
|
||||
margin-bottom: $baseLineHeight / 2;
|
||||
}
|
||||
|
||||
.help-inline {
|
||||
display: inline-block;
|
||||
@include ie7-inline-block();
|
||||
vertical-align: middle;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// INPUT GROUPS
|
||||
// ------------
|
||||
|
||||
// Allow us to put symbols and text within the input field for a cleaner look
|
||||
.input-append,
|
||||
.input-prepend {
|
||||
display: inline-block;
|
||||
margin-bottom: $baseLineHeight / 2;
|
||||
vertical-align: middle;
|
||||
font-size: 0; // white space collapse hack
|
||||
white-space: nowrap; // Prevent span and input from separating
|
||||
|
||||
// Reset the white space collapse hack
|
||||
input,
|
||||
select,
|
||||
.uneditable-input,
|
||||
.dropdown-menu,
|
||||
.popover {
|
||||
font-size: $baseFontSize;
|
||||
}
|
||||
|
||||
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
|
||||
margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms
|
||||
*margin-left: 0;
|
||||
vertical-align: top;
|
||||
@include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
|
||||
// Make input on top when focused so blue border and shadow always show
|
||||
&:focus {
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
.add-on {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
height: $baseLineHeight;
|
||||
min-width: 16px;
|
||||
padding: 4px 5px;
|
||||
font-size: $baseFontSize;
|
||||
font-weight: normal;
|
||||
line-height: $baseLineHeight;
|
||||
text-align: center;
|
||||
text-shadow: 0 1px 0 $white;
|
||||
background-color: $grayLighter;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
.add-on,
|
||||
.btn,
|
||||
.btn-group > .dropdown-toggle {
|
||||
vertical-align: top;
|
||||
@include border-radius(0);
|
||||
}
|
||||
.active {
|
||||
background-color: lighten($green, 30);
|
||||
border-color: $green;
|
||||
}
|
||||
}
|
||||
|
||||
.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
|
||||
@include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
|
||||
}
|
||||
}
|
||||
|
||||
.input-append {
|
||||
input,
|
||||
select,
|
||||
.uneditable-input {
|
||||
@include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
|
||||
+ .btn-group .btn:last-child {
|
||||
@include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
|
||||
}
|
||||
}
|
||||
.add-on,
|
||||
.btn,
|
||||
.btn-group {
|
||||
margin-left: -1px;
|
||||
}
|
||||
.add-on:last-child,
|
||||
.btn:last-child,
|
||||
.btn-group:last-child > .dropdown-toggle {
|
||||
@include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
|
||||
}
|
||||
}
|
||||
|
||||
// Remove all border-radius for inputs with both prepend and append
|
||||
.input-prepend.input-append {
|
||||
input,
|
||||
select,
|
||||
.uneditable-input {
|
||||
@include border-radius(0);
|
||||
+ .btn-group .btn {
|
||||
@include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
|
||||
}
|
||||
}
|
||||
.add-on:first-child,
|
||||
.btn:first-child {
|
||||
margin-right: -1px;
|
||||
@include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
|
||||
}
|
||||
.add-on:last-child,
|
||||
.btn:last-child {
|
||||
margin-left: -1px;
|
||||
@include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
|
||||
}
|
||||
.btn-group:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// SEARCH FORM
|
||||
// -----------
|
||||
|
||||
input.search-query {
|
||||
padding-right: 14px;
|
||||
padding-right: 4px \9;
|
||||
padding-left: 14px;
|
||||
padding-left: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */
|
||||
margin-bottom: 0; // Remove the default margin on all inputs
|
||||
@include border-radius(15px);
|
||||
}
|
||||
|
||||
/* Allow for input prepend/append in search forms */
|
||||
.form-search .input-append .search-query,
|
||||
.form-search .input-prepend .search-query {
|
||||
@include border-radius(0); // Override due to specificity
|
||||
}
|
||||
.form-search .input-append .search-query {
|
||||
@include border-radius(14px 0 0 14px);
|
||||
}
|
||||
.form-search .input-append .btn {
|
||||
@include border-radius(0 14px 14px 0);
|
||||
}
|
||||
.form-search .input-prepend .search-query {
|
||||
@include border-radius(0 14px 14px 0);
|
||||
}
|
||||
.form-search .input-prepend .btn {
|
||||
@include border-radius(14px 0 0 14px);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// 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;
|
||||
@include ie7-inline-block();
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
// Re-hide hidden elements due to specifity
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.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 {
|
||||
padding-left: 0;
|
||||
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: $baseLineHeight / 2;
|
||||
}
|
||||
|
||||
// Legend collapses margin, so next element is responsible for spacing
|
||||
legend + .control-group {
|
||||
margin-top: $baseLineHeight;
|
||||
-webkit-margin-top-collapse: separate;
|
||||
}
|
||||
|
||||
// Horizontal-specific styles
|
||||
// --------------------------
|
||||
|
||||
.form-horizontal {
|
||||
// Increase spacing between groups
|
||||
.control-group {
|
||||
margin-bottom: $baseLineHeight;
|
||||
@include clearfix();
|
||||
}
|
||||
// Float the labels left
|
||||
.control-label {
|
||||
float: left;
|
||||
width: $horizontalComponentOffset - 20;
|
||||
padding-top: 5px;
|
||||
text-align: right;
|
||||
}
|
||||
// Move over all input controls and content
|
||||
.controls {
|
||||
// Super jank IE7 fix to ensure the inputs in .input-append and input-prepend
|
||||
// don't inherit the margin of the parent, in this case .controls
|
||||
*display: inline-block;
|
||||
*padding-left: 20px;
|
||||
margin-left: $horizontalComponentOffset;
|
||||
*margin-left: 0;
|
||||
&:first-child {
|
||||
*padding-left: $horizontalComponentOffset;
|
||||
}
|
||||
}
|
||||
// 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: $baseLineHeight / 2;
|
||||
}
|
||||
}
|
||||
// Move over buttons in .form-actions to align with .controls
|
||||
.form-actions {
|
||||
padding-left: $horizontalComponentOffset;
|
||||
}
|
||||
}
|
||||
|
||||
0
scss/ionic/theme/_form.scss
Normal file
0
scss/ionic/theme/_form.scss
Normal file
Reference in New Issue
Block a user