diff --git a/dist/ionic.css b/dist/ionic.css
index 73a7f6e410..ab70b47096 100644
--- a/dist/ionic.css
+++ b/dist/ionic.css
@@ -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;
diff --git a/example/forms.html b/example/forms.html
new file mode 100644
index 0000000000..cc44318704
--- /dev/null
+++ b/example/forms.html
@@ -0,0 +1,47 @@
+
+
+
+ Forms
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/example/index.html b/example/index.html
index ebd6d6f979..904b79a437 100644
--- a/example/index.html
+++ b/example/index.html
@@ -27,7 +27,9 @@
Alerts
Buttons
Button Groups
+ Events
Footers
+ Forms
Grids
Headers
Image Swipe
@@ -40,7 +42,6 @@
Popovers
Pull To Refresh
Tab Bars
- Events
diff --git a/example/input-text.html b/example/input-text.html
index 9a3252eedd..63175395c2 100644
--- a/example/input-text.html
+++ b/example/input-text.html
@@ -19,6 +19,19 @@
diff --git a/scss/ionic-structure.scss b/scss/ionic-structure.scss
index 1b8f7c1f77..1fe9fd04be 100755
--- a/scss/ionic-structure.scss
+++ b/scss/ionic-structure.scss
@@ -5,6 +5,7 @@
@import
"ionic/structure-variables",
"ionic/mixins",
+ "ionic/theme-variables",
"ionic/structure/base",
diff --git a/scss/ionic-theme.scss b/scss/ionic-theme.scss
index bb9dcfa6a9..7c7756d488 100755
--- a/scss/ionic-theme.scss
+++ b/scss/ionic-theme.scss
@@ -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",
diff --git a/scss/ionic/_mixins.scss b/scss/ionic/_mixins.scss
index 5af431402e..e89758e297 100644
--- a/scss/ionic/_mixins.scss
+++ b/scss/ionic/_mixins.scss
@@ -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;
}
diff --git a/scss/ionic/_structure-variables.scss b/scss/ionic/_structure-variables.scss
index a6da2d0117..c9c7c36b6b 100644
--- a/scss/ionic/_structure-variables.scss
+++ b/scss/ionic/_structure-variables.scss
@@ -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;
\ No newline at end of file
+$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;
\ No newline at end of file
diff --git a/scss/ionic/_theme-variables.scss b/scss/ionic/_theme-variables.scss
index d4824f06f3..3ce7b76bcb 100644
--- a/scss/ionic/_theme-variables.scss
+++ b/scss/ionic/_theme-variables.scss
@@ -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;
diff --git a/scss/ionic/structure/_form.scss b/scss/ionic/structure/_form.scss
index e69de29bb2..d5456c7131 100644
--- a/scss/ionic/structure/_form.scss
+++ b/scss/ionic/structure/_form.scss
@@ -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;
+ }
+}
diff --git a/scss/ionic/theme/_form.scss b/scss/ionic/theme/_form.scss
new file mode 100644
index 0000000000..e69de29bb2