diff --git a/dist/ionic.css b/dist/ionic.css
index 363e028606..fe54261ec1 100644
--- a/dist/ionic.css
+++ b/dist/ionic.css
@@ -344,9 +344,10 @@ table {
html {
-webkit-text-size-adjust: 100%;
- -webkit-touch-callout: none;
-webkit-user-select: none;
- -moz-user-select: -moz-none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ -o-user-select: none;
user-select: none; }
body {
@@ -390,7 +391,7 @@ body {
margin: 10px; }
.rounded {
- border-radius: 5px; }
+ border-radius: 4px; }
a {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
@@ -432,9 +433,10 @@ a {
margin-top: 5px; }
.bar {
- -webkit-touch-callout: none;
-webkit-user-select: none;
- -moz-user-select: -moz-none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ -o-user-select: none;
user-select: none;
display: -webkit-box;
display: box;
@@ -639,21 +641,21 @@ textarea {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.form-group {
- border-top: 1px solid #bbbbbb;
- border-bottom: 1px solid #bbbbbb;
+ border-top: 1px solid #cccccc;
+ border-bottom: 1px solid #cccccc;
background-color: white;
overflow: hidden; }
.content-padded > .form-group,
.form-group.inset {
- border-left: 1px solid #bbbbbb;
- border-right: 1px solid #bbbbbb;
- -webkit-border-radius: 2px;
- -moz-border-radius: 2px;
- border-radius: 2px; }
+ border-left: 1px solid #cccccc;
+ border-right: 1px solid #cccccc;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ border-radius: 4px; }
.form-group .input-wrapper + .input-wrapper {
- border-top: 1px solid #bbbbbb; }
+ border-top: 1px solid #cccccc; }
.form-group + .form-group {
margin-top: 10px; }
@@ -679,13 +681,13 @@ textarea {
border: 0; }
.form-group.stacked-label input {
- border: 1px solid #bbbbbb;
+ border: 1px solid #cccccc;
background-color: white;
padding: 4px 8px 3px;
overflow: hidden;
- -webkit-border-radius: 2px;
- -moz-border-radius: 2px;
- border-radius: 2px; }
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ border-radius: 4px; }
select,
textarea,
@@ -774,13 +776,13 @@ input[type="checkbox"] {
select,
input[type="file"] {
- height: 24px;
+ height: 34px;
/* In IE7, the height of the select element cannot be changed by height, only font-size */
- line-height: 24px; }
+ line-height: 34px; }
select {
width: 220px;
- border: 1px solid #bbbbbb;
+ border: 1px solid #cccccc;
background-color: white; }
select[multiple],
@@ -795,21 +797,6 @@ input[type="checkbox"]:focus {
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px; }
-.uneditable-input,
-.uneditable-textarea {
- color: #999999;
- background-color: #fcfcfc;
- border-color: #bbbbbb;
- cursor: not-allowed; }
-
-.uneditable-input {
- overflow: hidden;
- white-space: nowrap; }
-
-.uneditable-textarea {
- width: auto;
- height: auto; }
-
input:-moz-placeholder,
textarea:-moz-placeholder {
color: #999999; }
@@ -820,157 +807,6 @@ 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],
@@ -978,7 +814,7 @@ input[readonly],
select[readonly],
textarea[readonly] {
cursor: not-allowed;
- background-color: whitesmoke; }
+ background-color: #eeeeee; }
input[type="radio"][disabled],
input[type="checkbox"][disabled],
@@ -986,427 +822,22 @@ 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; }
-
-.form-actions {
- padding: 0.42857 20px 1.42857;
- margin-top: 1.42857;
- margin-bottom: 1.42857;
- background-color: whitesmoke;
- border-top: 1px solid #e5e5e5;
+.container {
+ margin-right: auto;
+ margin-left: auto;
+ padding-left: 15px;
+ padding-right: 15px;
*zoom: 1; }
- .form-actions:before, .form-actions:after {
+ .container:before, .container:after {
display: table;
content: "";
line-height: 0; }
- .form-actions:after {
+ .container: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;
- vertical-align: top; }
- .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: whitesmoke;
- 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: 2px 0 0 2px;
- -moz-border-radius: 2px 0 0 2px;
- border-radius: 2px 0 0 2px; }
-
-.input-append input,
-.input-append select,
-.input-append .uneditable-input {
- -webkit-border-radius: 2px 0 0 2px;
- -moz-border-radius: 2px 0 0 2px;
- border-radius: 2px 0 0 2px; }
- .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 2px 2px 0;
- -moz-border-radius: 0 2px 2px 0;
- border-radius: 0 2px 2px 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 2px 2px 0;
- -moz-border-radius: 0 2px 2px 0;
- border-radius: 0 2px 2px 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 2px 2px 0;
- -moz-border-radius: 0 2px 2px 0;
- border-radius: 0 2px 2px 0; }
-.input-prepend.input-append .add-on:first-child,
-.input-prepend.input-append .btn:first-child {
- margin-right: -1px;
- -webkit-border-radius: 2px 0 0 2px;
- -moz-border-radius: 2px 0 0 2px;
- border-radius: 2px 0 0 2px; }
-.input-prepend.input-append .add-on:last-child,
-.input-prepend.input-append .btn:last-child {
- margin-left: -1px;
- -webkit-border-radius: 0 2px 2px 0;
- -moz-border-radius: 0 2px 2px 0;
- border-radius: 0 2px 2px 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; }
- .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; }
-
.row {
- margin-left: -20px;
+ margin-left: -15px;
+ margin-right: -15px;
*zoom: 1; }
.row:before, .row:after {
display: table;
@@ -1415,229 +846,579 @@ legend + .control-group {
.row:after {
clear: both; }
-[class*="span"] {
- float: left;
+.col-xs-1,
+.col-xs-2,
+.col-xs-3,
+.col-xs-4,
+.col-xs-5,
+.col-xs-6,
+.col-xs-7,
+.col-xs-8,
+.col-xs-9,
+.col-xs-10,
+.col-xs-11,
+.col-xs-12,
+.col-sm-1,
+.col-sm-2,
+.col-sm-3,
+.col-sm-4,
+.col-sm-5,
+.col-sm-6,
+.col-sm-7,
+.col-sm-8,
+.col-sm-9,
+.col-sm-10,
+.col-sm-11,
+.col-sm-12,
+.col-md-1,
+.col-md-2,
+.col-md-3,
+.col-md-4,
+.col-md-5,
+.col-md-6,
+.col-md-7,
+.col-md-8,
+.col-md-9,
+.col-md-10,
+.col-md-11,
+.col-md-12,
+.col-lg-1,
+.col-lg-2,
+.col-lg-3,
+.col-lg-4,
+.col-lg-5,
+.col-lg-6,
+.col-lg-7,
+.col-lg-8,
+.col-lg-9,
+.col-lg-10,
+.col-lg-11,
+.col-lg-12 {
+ position: relative;
min-height: 1px;
- margin-left: 20px; }
+ padding-left: 15px;
+ padding-right: 15px; }
-.container,
-.navbar-static-top .container,
-.navbar-fixed-top .container,
-.navbar-fixed-bottom .container {
- width: 940px; }
+.col-xs-1,
+.col-xs-2,
+.col-xs-3,
+.col-xs-4,
+.col-xs-5,
+.col-xs-6,
+.col-xs-7,
+.col-xs-8,
+.col-xs-9,
+.col-xs-10,
+.col-xs-11 {
+ float: left; }
-.span1 {
- width: 60px; }
+.col-xs-1 {
+ width: 8.33333%; }
-.span2 {
- width: 140px; }
+.col-xs-2 {
+ width: 16.66667%; }
-.span3 {
- width: 220px; }
+.col-xs-3 {
+ width: 25%; }
-.span4 {
- width: 300px; }
+.col-xs-4 {
+ width: 33.33333%; }
-.span5 {
- width: 380px; }
+.col-xs-5 {
+ width: 41.66667%; }
-.span6 {
- width: 460px; }
+.col-xs-6 {
+ width: 50%; }
-.span7 {
- width: 540px; }
+.col-xs-7 {
+ width: 58.33333%; }
-.span8 {
- width: 620px; }
+.col-xs-8 {
+ width: 66.66667%; }
-.span9 {
- width: 700px; }
+.col-xs-9 {
+ width: 75%; }
-.span10 {
- width: 780px; }
+.col-xs-10 {
+ width: 83.33333%; }
-.span11 {
- width: 860px; }
+.col-xs-11 {
+ width: 91.66667%; }
-.span12 {
- width: 940px; }
+.col-xs-12 {
+ width: 100%; }
-.offset1 {
- margin-left: 100px; }
+@media (min-width: 768px) {
+ .container {
+ max-width: 750px; }
-.offset2 {
- margin-left: 180px; }
+ .col-sm-1,
+ .col-sm-2,
+ .col-sm-3,
+ .col-sm-4,
+ .col-sm-5,
+ .col-sm-6,
+ .col-sm-7,
+ .col-sm-8,
+ .col-sm-9,
+ .col-sm-10,
+ .col-sm-11 {
+ float: left; }
-.offset3 {
- margin-left: 260px; }
+ .col-sm-1 {
+ width: 8.33333%; }
-.offset4 {
- margin-left: 340px; }
+ .col-sm-2 {
+ width: 16.66667%; }
-.offset5 {
- margin-left: 420px; }
+ .col-sm-3 {
+ width: 25%; }
-.offset6 {
- margin-left: 500px; }
+ .col-sm-4 {
+ width: 33.33333%; }
-.offset7 {
- margin-left: 580px; }
+ .col-sm-5 {
+ width: 41.66667%; }
-.offset8 {
- margin-left: 660px; }
+ .col-sm-6 {
+ width: 50%; }
-.offset9 {
- margin-left: 740px; }
+ .col-sm-7 {
+ width: 58.33333%; }
-.offset10 {
- margin-left: 820px; }
+ .col-sm-8 {
+ width: 66.66667%; }
-.offset11 {
- margin-left: 900px; }
+ .col-sm-9 {
+ width: 75%; }
-.offset12 {
- margin-left: 980px; }
+ .col-sm-10 {
+ width: 83.33333%; }
-.row-fluid {
- width: 100%;
- *zoom: 1; }
- .row-fluid:before, .row-fluid:after {
- display: table;
- content: "";
- line-height: 0; }
- .row-fluid:after {
- clear: both; }
- .row-fluid [class*="span"] {
- display: block;
- width: 100%;
- min-height: 24px;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- float: left;
- margin-left: 2.12766%;
- *margin-left: 2.07447%; }
- .row-fluid [class*="span"]:first-child {
+ .col-sm-11 {
+ width: 91.66667%; }
+
+ .col-sm-12 {
+ width: 100%; }
+
+ .col-sm-push-1 {
+ left: 8.33333%; }
+
+ .col-sm-push-2 {
+ left: 16.66667%; }
+
+ .col-sm-push-3 {
+ left: 25%; }
+
+ .col-sm-push-4 {
+ left: 33.33333%; }
+
+ .col-sm-push-5 {
+ left: 41.66667%; }
+
+ .col-sm-push-6 {
+ left: 50%; }
+
+ .col-sm-push-7 {
+ left: 58.33333%; }
+
+ .col-sm-push-8 {
+ left: 66.66667%; }
+
+ .col-sm-push-9 {
+ left: 75%; }
+
+ .col-sm-push-10 {
+ left: 83.33333%; }
+
+ .col-sm-push-11 {
+ left: 91.66667%; }
+
+ .col-sm-pull-1 {
+ right: 8.33333%; }
+
+ .col-sm-pull-2 {
+ right: 16.66667%; }
+
+ .col-sm-pull-3 {
+ right: 25%; }
+
+ .col-sm-pull-4 {
+ right: 33.33333%; }
+
+ .col-sm-pull-5 {
+ right: 41.66667%; }
+
+ .col-sm-pull-6 {
+ right: 50%; }
+
+ .col-sm-pull-7 {
+ right: 58.33333%; }
+
+ .col-sm-pull-8 {
+ right: 66.66667%; }
+
+ .col-sm-pull-9 {
+ right: 75%; }
+
+ .col-sm-pull-10 {
+ right: 83.33333%; }
+
+ .col-sm-pull-11 {
+ right: 91.66667%; }
+
+ .col-sm-offset-1 {
+ margin-left: 8.33333%; }
+
+ .col-sm-offset-2 {
+ margin-left: 16.66667%; }
+
+ .col-sm-offset-3 {
+ margin-left: 25%; }
+
+ .col-sm-offset-4 {
+ margin-left: 33.33333%; }
+
+ .col-sm-offset-5 {
+ margin-left: 41.66667%; }
+
+ .col-sm-offset-6 {
+ margin-left: 50%; }
+
+ .col-sm-offset-7 {
+ margin-left: 58.33333%; }
+
+ .col-sm-offset-8 {
+ margin-left: 66.66667%; }
+
+ .col-sm-offset-9 {
+ margin-left: 75%; }
+
+ .col-sm-offset-10 {
+ margin-left: 83.33333%; }
+
+ .col-sm-offset-11 {
+ margin-left: 91.66667%; } }
+@media (min-width: 992px) {
+ .container {
+ max-width: 970px; }
+
+ .col-md-1,
+ .col-md-2,
+ .col-md-3,
+ .col-md-4,
+ .col-md-5,
+ .col-md-6,
+ .col-md-7,
+ .col-md-8,
+ .col-md-9,
+ .col-md-10,
+ .col-md-11 {
+ float: left; }
+
+ .col-md-1 {
+ width: 8.33333%; }
+
+ .col-md-2 {
+ width: 16.66667%; }
+
+ .col-md-3 {
+ width: 25%; }
+
+ .col-md-4 {
+ width: 33.33333%; }
+
+ .col-md-5 {
+ width: 41.66667%; }
+
+ .col-md-6 {
+ width: 50%; }
+
+ .col-md-7 {
+ width: 58.33333%; }
+
+ .col-md-8 {
+ width: 66.66667%; }
+
+ .col-md-9 {
+ width: 75%; }
+
+ .col-md-10 {
+ width: 83.33333%; }
+
+ .col-md-11 {
+ width: 91.66667%; }
+
+ .col-md-12 {
+ width: 100%; }
+
+ .col-md-push-0 {
+ left: auto; }
+
+ .col-md-push-1 {
+ left: 8.33333%; }
+
+ .col-md-push-2 {
+ left: 16.66667%; }
+
+ .col-md-push-3 {
+ left: 25%; }
+
+ .col-md-push-4 {
+ left: 33.33333%; }
+
+ .col-md-push-5 {
+ left: 41.66667%; }
+
+ .col-md-push-6 {
+ left: 50%; }
+
+ .col-md-push-7 {
+ left: 58.33333%; }
+
+ .col-md-push-8 {
+ left: 66.66667%; }
+
+ .col-md-push-9 {
+ left: 75%; }
+
+ .col-md-push-10 {
+ left: 83.33333%; }
+
+ .col-md-push-11 {
+ left: 91.66667%; }
+
+ .col-md-pull-0 {
+ right: auto; }
+
+ .col-md-pull-1 {
+ right: 8.33333%; }
+
+ .col-md-pull-2 {
+ right: 16.66667%; }
+
+ .col-md-pull-3 {
+ right: 25%; }
+
+ .col-md-pull-4 {
+ right: 33.33333%; }
+
+ .col-md-pull-5 {
+ right: 41.66667%; }
+
+ .col-md-pull-6 {
+ right: 50%; }
+
+ .col-md-pull-7 {
+ right: 58.33333%; }
+
+ .col-md-pull-8 {
+ right: 66.66667%; }
+
+ .col-md-pull-9 {
+ right: 75%; }
+
+ .col-md-pull-10 {
+ right: 83.33333%; }
+
+ .col-md-pull-11 {
+ right: 91.66667%; }
+
+ .col-md-offset-0 {
margin-left: 0; }
- .row-fluid .controls-row [class*="span"] + [class*="span"] {
- margin-left: 2.12766%; }
- .row-fluid .span1 {
- width: 6.38298%;
- *width: 6.32979%; }
- .row-fluid .span2 {
- width: 14.89362%;
- *width: 14.84043%; }
- .row-fluid .span3 {
- width: 23.40426%;
- *width: 23.35106%; }
- .row-fluid .span4 {
- width: 31.91489%;
- *width: 31.8617%; }
- .row-fluid .span5 {
- width: 40.42553%;
- *width: 40.37234%; }
- .row-fluid .span6 {
- width: 48.93617%;
- *width: 48.88298%; }
- .row-fluid .span7 {
- width: 57.44681%;
- *width: 57.39362%; }
- .row-fluid .span8 {
- width: 65.95745%;
- *width: 65.90426%; }
- .row-fluid .span9 {
- width: 74.46809%;
- *width: 74.41489%; }
- .row-fluid .span10 {
- width: 82.97872%;
- *width: 82.92553%; }
- .row-fluid .span11 {
- width: 91.48936%;
- *width: 91.43617%; }
- .row-fluid .span12 {
- width: 100%;
- *width: 99.94681%; }
- .row-fluid .offset1 {
- margin-left: 10.6383%;
- *margin-left: 10.53191%; }
- .row-fluid .offset1:first-child {
- margin-left: 8.51064%;
- *margin-left: 8.40426%; }
- .row-fluid .offset2 {
- margin-left: 19.14894%;
- *margin-left: 19.04255%; }
- .row-fluid .offset2:first-child {
- margin-left: 17.02128%;
- *margin-left: 16.91489%; }
- .row-fluid .offset3 {
- margin-left: 27.65957%;
- *margin-left: 27.55319%; }
- .row-fluid .offset3:first-child {
- margin-left: 25.53191%;
- *margin-left: 25.42553%; }
- .row-fluid .offset4 {
- margin-left: 36.17021%;
- *margin-left: 36.06383%; }
- .row-fluid .offset4:first-child {
- margin-left: 34.04255%;
- *margin-left: 33.93617%; }
- .row-fluid .offset5 {
- margin-left: 44.68085%;
- *margin-left: 44.57447%; }
- .row-fluid .offset5:first-child {
- margin-left: 42.55319%;
- *margin-left: 42.44681%; }
- .row-fluid .offset6 {
- margin-left: 53.19149%;
- *margin-left: 53.08511%; }
- .row-fluid .offset6:first-child {
- margin-left: 51.06383%;
- *margin-left: 50.95745%; }
- .row-fluid .offset7 {
- margin-left: 61.70213%;
- *margin-left: 61.59574%; }
- .row-fluid .offset7:first-child {
- margin-left: 59.57447%;
- *margin-left: 59.46809%; }
- .row-fluid .offset8 {
- margin-left: 70.21277%;
- *margin-left: 70.10638%; }
- .row-fluid .offset8:first-child {
- margin-left: 68.08511%;
- *margin-left: 67.97872%; }
- .row-fluid .offset9 {
- margin-left: 78.7234%;
- *margin-left: 78.61702%; }
- .row-fluid .offset9:first-child {
- margin-left: 76.59574%;
- *margin-left: 76.48936%; }
- .row-fluid .offset10 {
- margin-left: 87.23404%;
- *margin-left: 87.12766%; }
- .row-fluid .offset10:first-child {
- margin-left: 85.10638%;
- *margin-left: 85.0%; }
- .row-fluid .offset11 {
- margin-left: 95.74468%;
- *margin-left: 95.6383%; }
- .row-fluid .offset11:first-child {
- margin-left: 93.61702%;
- *margin-left: 93.51064%; }
- .row-fluid .offset12 {
- margin-left: 104.25532%;
- *margin-left: 104.14894%; }
- .row-fluid .offset12:first-child {
- margin-left: 102.12766%;
- *margin-left: 102.02128%; }
-[class*="span"].hide,
-.row-fluid [class*="span"].hide {
- display: none; }
+ .col-md-offset-1 {
+ margin-left: 8.33333%; }
-[class*="span"].pull-right,
-.row-fluid [class*="span"].pull-right {
- float: right; }
+ .col-md-offset-2 {
+ margin-left: 16.66667%; }
+ .col-md-offset-3 {
+ margin-left: 25%; }
+
+ .col-md-offset-4 {
+ margin-left: 33.33333%; }
+
+ .col-md-offset-5 {
+ margin-left: 41.66667%; }
+
+ .col-md-offset-6 {
+ margin-left: 50%; }
+
+ .col-md-offset-7 {
+ margin-left: 58.33333%; }
+
+ .col-md-offset-8 {
+ margin-left: 66.66667%; }
+
+ .col-md-offset-9 {
+ margin-left: 75%; }
+
+ .col-md-offset-10 {
+ margin-left: 83.33333%; }
+
+ .col-md-offset-11 {
+ margin-left: 91.66667%; } }
+@media (min-width: 1200px) {
+ .container {
+ max-width: 1170px; }
+
+ .col-lg-1,
+ .col-lg-2,
+ .col-lg-3,
+ .col-lg-4,
+ .col-lg-5,
+ .col-lg-6,
+ .col-lg-7,
+ .col-lg-8,
+ .col-lg-9,
+ .col-lg-10,
+ .col-lg-11 {
+ float: left; }
+
+ .col-lg-1 {
+ width: 8.33333%; }
+
+ .col-lg-2 {
+ width: 16.66667%; }
+
+ .col-lg-3 {
+ width: 25%; }
+
+ .col-lg-4 {
+ width: 33.33333%; }
+
+ .col-lg-5 {
+ width: 41.66667%; }
+
+ .col-lg-6 {
+ width: 50%; }
+
+ .col-lg-7 {
+ width: 58.33333%; }
+
+ .col-lg-8 {
+ width: 66.66667%; }
+
+ .col-lg-9 {
+ width: 75%; }
+
+ .col-lg-10 {
+ width: 83.33333%; }
+
+ .col-lg-11 {
+ width: 91.66667%; }
+
+ .col-lg-12 {
+ width: 100%; }
+
+ .col-lg-push-0 {
+ left: auto; }
+
+ .col-lg-push-1 {
+ left: 8.33333%; }
+
+ .col-lg-push-2 {
+ left: 16.66667%; }
+
+ .col-lg-push-3 {
+ left: 25%; }
+
+ .col-lg-push-4 {
+ left: 33.33333%; }
+
+ .col-lg-push-5 {
+ left: 41.66667%; }
+
+ .col-lg-push-6 {
+ left: 50%; }
+
+ .col-lg-push-7 {
+ left: 58.33333%; }
+
+ .col-lg-push-8 {
+ left: 66.66667%; }
+
+ .col-lg-push-9 {
+ left: 75%; }
+
+ .col-lg-push-10 {
+ left: 83.33333%; }
+
+ .col-lg-push-11 {
+ left: 91.66667%; }
+
+ .col-lg-pull-0 {
+ right: auto; }
+
+ .col-lg-pull-1 {
+ right: 8.33333%; }
+
+ .col-lg-pull-2 {
+ right: 16.66667%; }
+
+ .col-lg-pull-3 {
+ right: 25%; }
+
+ .col-lg-pull-4 {
+ right: 33.33333%; }
+
+ .col-lg-pull-5 {
+ right: 41.66667%; }
+
+ .col-lg-pull-6 {
+ right: 50%; }
+
+ .col-lg-pull-7 {
+ right: 58.33333%; }
+
+ .col-lg-pull-8 {
+ right: 66.66667%; }
+
+ .col-lg-pull-9 {
+ right: 75%; }
+
+ .col-lg-pull-10 {
+ right: 83.33333%; }
+
+ .col-lg-pull-11 {
+ right: 91.66667%; }
+
+ .col-lg-offset-0 {
+ margin-left: 0; }
+
+ .col-lg-offset-1 {
+ margin-left: 8.33333%; }
+
+ .col-lg-offset-2 {
+ margin-left: 16.66667%; }
+
+ .col-lg-offset-3 {
+ margin-left: 25%; }
+
+ .col-lg-offset-4 {
+ margin-left: 33.33333%; }
+
+ .col-lg-offset-5 {
+ margin-left: 41.66667%; }
+
+ .col-lg-offset-6 {
+ margin-left: 50%; }
+
+ .col-lg-offset-7 {
+ margin-left: 58.33333%; }
+
+ .col-lg-offset-8 {
+ margin-left: 66.66667%; }
+
+ .col-lg-offset-9 {
+ margin-left: 75%; }
+
+ .col-lg-offset-10 {
+ margin-left: 83.33333%; }
+
+ .col-lg-offset-11 {
+ margin-left: 91.66667%; } }
.list {
margin-bottom: 20px;
padding-left: 0; }
@@ -1835,39 +1616,39 @@ main {
.bar.bar-primary {
background-color: #6999e9;
border-color: #5981c5;
- color: white; }
+ color: #999999; }
.bar.bar-primary .tab-item a {
- color: white; }
+ color: #999999; }
.bar.bar-info {
background-color: #60d2e6;
border-color: #51b3c4;
- color: white; }
+ color: #999999; }
.bar.bar-info .tab-item a {
- color: white; }
+ color: #999999; }
.bar.bar-success {
background-color: #89c163;
border-color: #71a052;
- color: white; }
+ color: #999999; }
.bar.bar-success .tab-item a {
- color: white; }
+ color: #999999; }
.bar.bar-warning {
background-color: #f0b840;
border-color: #cf9a29;
- color: white; }
+ color: #999999; }
.bar.bar-warning .tab-item a {
- color: white; }
+ color: #999999; }
.bar.bar-danger {
background-color: #de5645;
border-color: #bc4435;
- color: white; }
+ color: #999999; }
.bar.bar-danger .tab-item a {
- color: white; }
+ color: #999999; }
.bar.bar-dark {
background-color: #444444;
border-color: #111111;
- color: white; }
+ color: #999999; }
.bar.bar-dark .tab-item a {
- color: white; }
+ color: #999999; }
.bar-default .button {
color: #333333;
@@ -1894,11 +1675,11 @@ main {
border-color: #b3b3b3; }
.bar-primary .button {
- color: white;
+ color: #999999;
background-color: #6999e9;
border-color: #5981c5; }
.bar-primary .button:hover {
- color: white;
+ color: #999999;
text-decoration: none; }
.bar-primary .button.active, .bar-primary .button:active {
background-color: #4581e4;
@@ -1906,11 +1687,11 @@ main {
border-color: #3d67ae; }
.bar-info .button {
- color: white;
+ color: #999999;
background-color: #60d2e6;
border-color: #51b3c4; }
.bar-info .button:hover {
- color: white;
+ color: #999999;
text-decoration: none; }
.bar-info .button.active, .bar-info .button:active {
background-color: #3dc8e0;
@@ -1918,11 +1699,11 @@ main {
border-color: #3998a9; }
.bar-success .button {
- color: white;
+ color: #999999;
background-color: #89c163;
border-color: #71a052; }
.bar-success .button:hover {
- color: white;
+ color: #999999;
text-decoration: none; }
.bar-success .button.active, .bar-success .button:active {
background-color: #73b447;
@@ -1930,11 +1711,11 @@ main {
border-color: #597e41; }
.bar-warning .button {
- color: white;
+ color: #999999;
background-color: #f0b840;
border-color: #cf9a29; }
.bar-warning .button:hover {
- color: white;
+ color: #999999;
text-decoration: none; }
.bar-warning .button.active, .bar-warning .button:active {
background-color: #edaa1a;
@@ -1942,11 +1723,11 @@ main {
border-color: #a47a21; }
.bar-danger .button {
- color: white;
+ color: #999999;
background-color: #de5645;
border-color: #bc4435; }
.bar-danger .button:hover {
- color: white;
+ color: #999999;
text-decoration: none; }
.bar-danger .button.active, .bar-danger .button:active {
background-color: #d43926;
@@ -1954,11 +1735,11 @@ main {
border-color: #94362a; }
.bar-dark .button {
- color: white;
+ color: #999999;
background-color: #444444;
border-color: #111111; }
.bar-dark .button:hover {
- color: white;
+ color: #999999;
text-decoration: none; }
.bar-dark .button.active, .bar-dark .button:active {
background-color: #303030;
@@ -1995,66 +1776,66 @@ main {
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
border-color: #b3b3b3; }
.button.button-primary {
- color: white;
+ color: #999999;
background-color: #6999e9;
border-color: #5981c5; }
.button.button-primary:hover {
- color: white;
+ color: #999999;
text-decoration: none; }
.button.button-primary.active, .button.button-primary:active {
background-color: #4581e4;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
border-color: #3d67ae; }
.button.button-info {
- color: white;
+ color: #999999;
background-color: #60d2e6;
border-color: #51b3c4; }
.button.button-info:hover {
- color: white;
+ color: #999999;
text-decoration: none; }
.button.button-info.active, .button.button-info:active {
background-color: #3dc8e0;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
border-color: #3998a9; }
.button.button-success {
- color: white;
+ color: #999999;
background-color: #89c163;
border-color: #71a052; }
.button.button-success:hover {
- color: white;
+ color: #999999;
text-decoration: none; }
.button.button-success.active, .button.button-success:active {
background-color: #73b447;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
border-color: #597e41; }
.button.button-warning {
- color: white;
+ color: #999999;
background-color: #f0b840;
border-color: #cf9a29; }
.button.button-warning:hover {
- color: white;
+ color: #999999;
text-decoration: none; }
.button.button-warning.active, .button.button-warning:active {
background-color: #edaa1a;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
border-color: #a47a21; }
.button.button-danger {
- color: white;
+ color: #999999;
background-color: #de5645;
border-color: #bc4435; }
.button.button-danger:hover {
- color: white;
+ color: #999999;
text-decoration: none; }
.button.button-danger.active, .button.button-danger:active {
background-color: #d43926;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
border-color: #94362a; }
.button.button-dark {
- color: white;
+ color: #999999;
background-color: #444444;
border-color: #111111; }
.button.button-dark:hover {
- color: white;
+ color: #999999;
text-decoration: none; }
.button.button-dark.active, .button.button-dark:active {
background-color: #303030;
diff --git a/example/input-text.html b/example/input-text.html
index 76c483050a..7584816f98 100644
--- a/example/input-text.html
+++ b/example/input-text.html
@@ -127,6 +127,12 @@
+
+
+
diff --git a/scss/ionic/_mixins.scss b/scss/ionic/_mixins.scss
index 6388216c44..284a6e73b6 100644
--- a/scss/ionic/_mixins.scss
+++ b/scss/ionic/_mixins.scss
@@ -68,30 +68,6 @@
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
// -------------------------
@@ -105,7 +81,7 @@
// Placeholder text
// -------------------------
-@mixin placeholder($color: $placeholderText) {
+@mixin placeholder($color: $input-color-placeholder) {
&:-moz-placeholder {
color: $color;
}
@@ -126,29 +102,18 @@
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;
+ font-family: $serif-font-family;
}
@mixin font-family-sans-serif() {
- font-family: $sansFontFamily;
+ font-family: $sans-font-family;
}
@mixin font-family-monospace() {
- font-family: $monoFontFamily;
+ font-family: $mono-font-family;
}
@mixin font-shorthand($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
font-size: $size;
@@ -169,53 +134,6 @@
}
-// 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;
- }
-}
@@ -410,12 +328,6 @@
hyphens: $mode;
}
-// Opacity
-@mixin opacity($opacity) {
- opacity: $opacity / 100;
- filter: alpha(opacity=$opacity);
-}
-
@mixin box-orient($orientation) {
box-orient: $orientation;
-webkit-box-orient: $orientation;
@@ -428,156 +340,6 @@
-moz-box-flex: $flex;
}
-
-
-// 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
// -----------
@@ -585,175 +347,125 @@
@mixin container-fixed() {
margin-right: auto;
margin-left: auto;
+ padding-left: ($grid-gutter-width / 2);
+ padding-right: ($grid-gutter-width / 2);
@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;
+// Creates a wrapper for a series of columns
+@mixin make-row($gutter: $grid-gutter-width) {
+ margin-left: ($gutter / -2);
+ margin-right: ($gutter / -2);
@include clearfix();
}
-@mixin makeColumn($columns: 1, $offset: 0) {
+
+// Generate the extra small columns
+@mixin make-xs-column($columns, $gutter: $grid-gutter-width) {
+ position: relative;
float: left;
- margin-left: ($gridColumnWidth * $offset) + ($gridGutterWidth * ($offset - 1)) + ($gridGutterWidth * 2);
- width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
+ width: percentage(($columns / $grid-columns));
+ // Prevent columns from collapsing when empty
+ min-height: 1px;
+ // Inner gutter via padding
+ padding-left: ($gutter / 2);
+ padding-right: ($gutter / 2);
}
-// The Grid
-@mixin grid-core($gridColumnWidth, $gridGutterWidth) {
- .row {
- margin-left: $gridGutterWidth * -1;
- @include clearfix();
- }
+// Generate the small columns
+@mixin make-sm-column($columns, $gutter: $grid-gutter-width) {
+ position: relative;
+ // Prevent columns from collapsing when empty
+ min-height: 1px;
+ // Inner gutter via padding
+ padding-left: ($gutter / 2);
+ padding-right: ($gutter / 2);
- [class*="span"] {
+ // Calculate width based on number of columns available
+ @media (min-width: $screen-sm) {
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); }
+ width: percentage(($columns / $grid-columns));
}
}
-@mixin grid-core-offset-x($gridColumns, $gridColumnWidth, $gridGutterWidth) {
- @for $i from 1 through $gridColumns {
- .offset#{$i} { @include grid-core-offset($i, $gridColumnWidth, $gridGutterWidth); }
+// Generate the small column offsets
+@mixin make-sm-column-offset($columns) {
+ @media (min-width: $screen-sm) {
+ margin-left: percentage(($columns / $grid-columns));
+ }
+}
+@mixin make-sm-column-push($columns) {
+ @media (min-width: $screen-sm) {
+ left: percentage(($columns / $grid-columns));
+ }
+}
+@mixin make-sm-column-pull($columns) {
+ @media (min-width: $screen-sm) {
+ right: percentage(($columns / $grid-columns));
}
}
-@mixin grid-core-span($columns, $gridColumnWidth, $gridGutterWidth) {
- width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
-}
+// Generate the medium columns
+@mixin make-md-column($columns, $gutter: $grid-gutter-width) {
+ position: relative;
+ // Prevent columns from collapsing when empty
+ min-height: 1px;
+ // Inner gutter via padding
+ padding-left: ($gutter / 2);
+ padding-right: ($gutter / 2);
-@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);
+ // Calculate width based on number of columns available
+ @media (min-width: $screen-md) {
+ float: left;
+ width: percentage(($columns / $grid-columns));
}
}
-@mixin grid-fluid-span-x($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
- @for $i from 1 through $gridColumns {
- .span#{$i} { @include grid-fluid-span($i, $fluidGridColumnWidth, $fluidGridGutterWidth); }
+// Generate the large column offsets
+@mixin make-md-column-offset($columns) {
+ @media (min-width: $screen-md) {
+ margin-left: percentage(($columns / $grid-columns));
+ }
+}
+@mixin make-md-column-push($columns) {
+ @media (min-width: $screen-md) {
+ left: percentage(($columns / $grid-columns));
+ }
+}
+@mixin make-md-column-pull($columns) {
+ @media (min-width: $screen-md) {
+ right: percentage(($columns / $grid-columns));
}
}
-@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); }
+// Generate the large columns
+@mixin make-lg-column($columns, $gutter: $grid-gutter-width) {
+ position: relative;
+ // Prevent columns from collapsing when empty
+ min-height: 1px;
+ // Inner gutter via padding
+ padding-left: ($gutter / 2);
+ padding-right: ($gutter / 2);
+
+ // Calculate width based on number of columns available
+ @media (min-width: $screen-lg) {
+ float: left;
+ width: percentage(($columns / $grid-columns));
}
}
-@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);
- }
+// Generate the large column offsets
+@mixin make-lg-column-offset($columns) {
+ @media (min-width: $screen-lg) {
+ margin-left: percentage(($columns / $grid-columns));
}
}
-
-@mixin grid-input-span($columns, $gridColumnWidth, $gridGutterWidth) {
- width: (($gridColumnWidth) * $columns) + ($gridGutterWidth * ($columns - 1)) - 14;
-}
-
-@mixin panel-variant($border, $heading-text-color, $heading-bg-color, $heading-border) {
- border-color: $border;
- & > .panel-heading {
- color: $heading-text-color;
- background-color: $heading-bg-color;
- border-color: $heading-border;
- + .panel-collapse .panel-body {
- border-top-color: $border;
- }
- }
- & > .panel-footer {
- + .panel-collapse .panel-body {
- border-bottom-color: $border;
- }
+@mixin make-lg-column-push($columns) {
+ @media (min-width: $screen-lg) {
+ left: percentage(($columns / $grid-columns));
+ }
+}
+@mixin make-lg-column-pull($columns) {
+ @media (min-width: $screen-lg) {
+ right: percentage(($columns / $grid-columns));
}
}
-
diff --git a/scss/ionic/_structure-variables.scss b/scss/ionic/_structure-variables.scss
index 4756d45361..c4e7ca3026 100644
--- a/scss/ionic/_structure-variables.scss
+++ b/scss/ionic/_structure-variables.scss
@@ -1,92 +1,133 @@
+// Components
+// -------------------------
+// Based on 14px font-size and 1.428 line-height (~20px to start)
+
+$padding-base-vertical: 6px !default;
+$padding-base-horizontal: 12px !default;
+
+$padding-large-vertical: 10px !default;
+$padding-large-horizontal: 16px !default;
+
+$padding-small-vertical: 5px !default;
+$padding-small-horizontal: 10px !default;
+
+$line-height-large: 1.33 !default;
+$line-height-small: 1.5 !default;
+
+$border-radius-base: 4px !default;
+$border-radius-large: 6px !default;
+$border-radius-small: 3px !default;
+
+$caret-width-base: 4px !default;
+$caret-width-large: 5px !default;
+
// Typography
-// -------------------------------
-$baseFontSize: 14px !default;
-$fontSizeLarge: ceil($baseFontSize * 1.25);
-$baseLineHeight: 1.428571429; // 20/14
-$baseLineHeightComputed: floor($baseFontSize * $baseLineHeight); // ~20px
-$lineHeightComputed: $baseLineHeightComputed;
-$baseBorderRadius: 2px !default;
+// -------------------------
+
+$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
+$font-family-serif: Georgia, "Times New Roman", Times, serif !default;
+$font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace !default;
+$font-family-base: $font-family-sans-serif !default;
+
+$font-size-base: 14px !default;
+$font-size-large: ceil($font-size-base * 1.25) !default; // ~18px
+$font-size-small: ceil($font-size-base * 0.85) !default; // ~12px
+
+$line-height-base: 1.428571429 !default; // 20/14
+$line-height-computed: floor($font-size-base * $line-height-base) !default; // ~20px
+
+$headings-font-family: $font-family-base !default;
+$headings-font-weight: 500 !default;
+$headings-line-height: 1.1 !default;
// Content stuff
// -------------------------------
-$contentPadding: 10px;
-$insetMargin: 10px;
-$roundedRadius: 5px;
+$content-padding: 10px;
+$inset-margin: 10px;
+$border-radius-base: 4px !default;
+$border-radius-large: 6px !default;
+$border-radius-small: 3px !default;
// Bar stuff
// -------------------------------
-$barHeight: 44px !default;
-$barLineHeight: 44px !default;
-$barButtonLineHeight: 23px !default;
-$barButtonBarLineHeight: 18px !default;
-$barTitleFontSize: $fontSizeLarge;
-$barTitleLineHeightComputed: 26px;//$barHeight - 2;
-$barPaddingPortrait: 5px;
-$barPaddingLandscape: 5px;
+$bar-height: 44px !default;
+$bar-button-line-height: 23px !default;
+$bar-button-bar-line-height: 18px !default;
+$bar-title-font-size: $font-size-large;
+$bar-padding-portrait: 5px;
+$bar-padding-landscape: 5px;
// Button bar stuff
// -------------------------------
-$buttonBarButtonLineHeight: 15px !default;
+$button-bar-button-line-height: 15px !default;
// Forms
// -------------------------------
-$textInputBorderRadius: 2px;
-
-
-// Horizontal forms & lists
-// -------------------------------
-$horizontalComponentOffset: 180px !default;
+$input-height-base: ($line-height-computed + ($padding-base-vertical * 2) + 2) !default;
+$input-height-large: (floor($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2) !default;
+$input-height-small: (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2) !default;
// Lists
// -------------------------------
-$listItemBorder: 1px solid #ddd;
+$list-item-border: 1px solid #ddd;
// Menus
// -------------------------------
-$menuWidth: 270px;
-$menuAnimationSpeed: 200ms;
-$menuBackgroundColor: #eee;
-$menuInsetBorderColor: #bbb;
+$menu-width: 270px;
+$menu-animation-speed: 200ms;
-// GRID
+// Media queries breakpoints
// -------------------------------
+// Extra small screen / phone
+$screen-xs: 480px !default;
+$screen-phone: $screen-xs !default;
-// Default 940px grid
+// Small screen / tablet
+$screen-sm: 768px !default;
+$screen-tablet: $screen-sm !default;
+
+// Medium screen / desktop
+$screen-md: 992px !default;
+$screen-desktop: $screen-md !default;
+
+// Large screen / wide desktop
+$screen-lg: 1200px !default;
+$screen-lg-desktop: $screen-lg !default;
+
+// So media queries don't overlap when required, provide a maximum
+$screen-xs-max: ($screen-sm - 1) !default;
+$screen-sm-max: ($screen-md - 1) !default;
+$screen-md-max: ($screen-lg - 1) !default;
+
+
+// Grid system
// -------------------------------
-$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;
+// Number of columns in the grid system
+$grid-columns: 12 !default;
+// Padding, to be divided by two and applied to the left and right of all columns
+$grid-gutter-width: 30px !default;
+// Point at which the navbar stops collapsing
+$grid-float-breakpoint: $screen-tablet !default;
-// Fluid grid
+// Container sizes
// -------------------------------
-$fluidGridColumnWidth: percentage($gridColumnWidth/$gridRowWidth) !default;
-$fluidGridGutterWidth: percentage($gridGutterWidth/$gridRowWidth) !default;
-// 1200px min
-$fluidGridColumnWidth1200: percentage($gridColumnWidth1200/$gridRowWidth1200) !default;
-$fluidGridGutterWidth1200: percentage($gridGutterWidth1200/$gridRowWidth1200) !default;
+// Small screen / tablet
+$container-tablet: ((720px + $grid-gutter-width)) !default;
+
+// Medium screen / desktop
+$container-desktop: ((940px + $grid-gutter-width)) !default;
+
+// Large screen / wide desktop
+$container-lg-desktop: ((1140px + $grid-gutter-width)) !default;
-// 768px-979px
-$fluidGridColumnWidth768: percentage($gridColumnWidth768/$gridRowWidth768) !default;
-$fluidGridGutterWidth768: percentage($gridGutterWidth768/$gridRowWidth768) !default;
diff --git a/scss/ionic/_theme-variables.scss b/scss/ionic/_theme-variables.scss
index 17121c9a95..9a064caa86 100644
--- a/scss/ionic/_theme-variables.scss
+++ b/scss/ionic/_theme-variables.scss
@@ -1,169 +1,174 @@
// Brand Colors
// -------------------------------
-$brandPrimary: #428bca;
-$brandSuccess: #5cb85c;
-$brandWarning: #f0ad4e;
-$brandDanger: #d9534f;
-$brandInfo: #5bc0de;
+$brand-primary: #428bca;
+$brand-success: #5cb85c;
+$brand-warning: #f0ad4e;
+$brand-danger: #d9534f;
+$brand-info: #5bc0de;
+
// Global Gray Colors
// -------------------------------
$black: #000 !default;
-$grayDarker: #222 !default;
-$grayDark: #333 !default;
-$gray: #555 !default;
-$grayLight: #999 !default;
-$grayLighter: #f5f5f5 !default;
+$gray-darker: lighten(#000, 13.5%) !default; // #222
+$gray-dark: lighten(#000, 20%) !default; // #333
+$gray: lighten(#000, 33.5%) !default; // #555
+$gray-light: lighten(#000, 60%) !default; // #999
+$gray-lighter: lighten(#000, 93.5%) !default; // #eee
$white: #fff !default;
// Global 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;
+$blue: #049cdb !default;
+$blue-dark: #0064cd !default;
+$green: #46a546 !default;
+$red: #9d261d !default;
+$yellow: #ffc40d !default;
+$orange: #f89406 !default;
+$pink: #c3325f !default;
+$purple: #7a43b6 !default;
+
+$component-active-bg: $brand-primary !default;
// Global 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;
+$sans-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
+$light-sans-font-family: "Helvetica Neue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif !default;
+$serif-font-family: Georgia, "Times New Roman", Times, serif !default;
+$mono-font-family: Monaco, Menlo, Consolas, "Courier New", monospace !default;
// Base
// -------------------------------
-$baseFontFamily: $sansFontFamily;
-$baseBackgroundColor: $white;
-$textColor: $grayDark !default;
+$base-font-family: $sans-font-family;
+$base-background-color: $white;
// Forms
// -------------------------------
-$inputBackground: $white !default;
-$inputBorderColor: #bbb !default;
-$inputBorderWidth: 1px !default;
-$inputBorderRadius: 2px !default;
-$inputDisabledBackground: $grayLighter !default;
-$formActionsBackground: $grayLighter !default;
-$inputHeight: $baseFontSize + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
-$placeholderText: $grayLight !default;
+$input-bg: $white !default;
+$input-bg-disabled: $gray-lighter !default;
+$input-color: $gray !default;
+$input-border-color: #ccc !default;
+$input-border-width: 1px !default;
+$input-border-radius: $border-radius-base !default;
+$input-border-focus: #66afe9 !default;
+
+$input-color-placeholder: $gray-light !default;
+
+$legend-color: $gray-dark !default;
+$legend-border-color: #e5e5e5 !default;
+
+$input-group-addon-bg: $gray-lighter !default;
+$input-group-addon-border-color: $input-border-color !default;
-// Typography
-// -------------------------------
-$lightColor: #fff;
-$darkColor: #333;
// Buttons
// -------------------------------
-$buttonColor: #222;
-$buttonPadding: 12px 12px;
-$buttonClearPadding: 10px 0px;
-$buttonBorderRadius: 2px;
-$buttonBorderWidth: 1px;
-$buttonFontSize: 16px;
+$button-color: #222;
+$button-padding: 12px 12px;
+$button-clear-padding: 10px 0px;
+$button-border-radius: 2px;
+$button-border-width: 1px;
+$button-font-size: 16px;
// Button block that has spacing
-$buttonBlockMargin: 10px 0 10px 0;
+$button-block-margin: 10px 0 10px 0;
-$buttonDefaultBackground: #fff;
-$buttonDefaultBackgroundActive: #eee;
-$buttonDefaultBorder: #ddd;
+$button-default-bg: #fff;
+$button-default-bg-active: #eee;
+$buttonDefaultBorder: #ddd;
-$buttonSecondaryBackground: #f5f5f5;
-$buttonSecondaryBackgroundActive: #eee;
-$buttonSecondaryBorder: #ccc;
+$button-secondary-bg: #f5f5f5;
+$button-secondary-bg-active: #eee;
+$button-secondary-border: #ccc;
-$buttonPrimaryBackground: #6999e9;
-$buttonPrimaryBackgroundActive: #eee;
-$buttonPrimaryBorder: #5981c5;
+$button-primary-bg: #6999e9;
+$button-primary-bg-active: #eee;
+$button-primary-border: #5981c5;
-$buttonInfoBackground: #60d2e6;
-$buttonInfoBackgroundActive: #eee;
-$buttonInfoBorder: #51b3c4;
+$button-info-bg: #60d2e6;
+$button-info-bg-active: #eee;
+$button-info-border: #51b3c4;
-$buttonSuccessBackground: #89c163;
-$buttonSuccessBackgroundActive: #eee;
-$buttonSuccessBorder: #71a052;
+$button-success-bg: #89c163;
+$button-success-bg-active: #eee;
+$button-success-border: #71a052;
-$buttonWarningBackground: #f0b840;
-$buttonWarningBackgroundActive: #eee;
-$buttonWarningBorder: #cf9a29;
+$button-warning-bg: #f0b840;
+$button-warning-bg-active: #eee;
+$button-warning-border: #cf9a29;
-$buttonDangerBackground: #de5645;
-$buttonDangerBackgroundActive: #eee;
-$buttonDangerBorder: #bc4435;
+$button-danger-bg: #de5645;
+$button-danger-bg-active: #eee;
+$buttonDangerBorder: #bc4435;
-$buttonDarkBackground: #444;
-$buttonDarkBackgroundActive: #eee;
-$buttonDarkBorder: #111;
+$button-dark-bg: #444;
+$button-dark-bg-active: #eee;
+$button-dark-border: #111;
// Bars
// -------------------------------
-$barBackground: white;
+$bar-bg: #fff;
// Bar variations
-$barDefaultBackground: #fff;
-$barDefaultBorderColor: #ddd;
+$bar-default-bg: #fff;
+$bar-default-border-color: #ddd;
-$barSecondaryBackground: #f5f5f5;
-$barSecondaryBorderColor: #ccc;
+$bar-secondary-bg: #f5f5f5;
+$bar-secondary-border-color: #ccc;
-$barPrimaryBackground: #6999e9;
-$barPrimaryBorderColor: #5981c5;
+$bar-primary-bg: #6999e9;
+$bar-primary-border-color: #5981c5;
-$barInfoBackground: #60d2e6;
-$barInfoBorderColor: #51b3c4;
+$bar-info-bg: #60d2e6;
+$bar-info-border-color: #51b3c4;
-$barSuccessBackground: #89c163;
-$barSuccessBorderColor: #71a052;
+$bar-success-bg: #89c163;
+$bar-success-border-color: #71a052;
-$barWarningBackground: #f0b840;
-$barWarningBorderColor: #cf9a29;
+$bar-warning-bg: #f0b840;
+$bar-warning-border-color: #cf9a29;
-$barDangerBackground: #de5645;
-$barDangerBorderColor: #bc4435;
+$bar-danger-bg: #de5645;
+$bar-danger-border-color: #bc4435;
-$barDarkBackground: #444;
-$barDarkBorderColor: #111;
+$bar-dark-bg: #444;
+$bar-dark-border-color: #111;
// Lists
// -------------------------------
-$listDividerBackground: #f5f5f5;
-$listDividerColor: #222;
+$list-divider-bg: #f5f5f5;
+$list-divider-color: #222;
-// Form states and alerts
+// Form States and Alerts
// -------------------------------
-$warningText: #c09853;
-$warningBackground: #fcf8e3;
-$warningBorder: darken(adjust-hue($warningBackground, -10), 3%);
+$warning-text: #c09853;
+$warning-bg: #fcf8e3;
+$warning-border: darken(adjust-hue($warning-bg, -10), 3%);
-$errorText: #b94a48;
-$errorBackground: #f2dede;
-$errorBorder: darken(adjust-hue($errorBackground, -10), 3%);
+$error-text: #b94a48;
+$error-bg: #f2dede;
+$error-border: darken(adjust-hue($error-bg, -10), 3%);
-$successText: #468847;
-$successBackground: #dff0d8;
-$successBorder: darken(adjust-hue($successBackground, -10), 5%);
+$success-text: #468847;
+$success-bg: #dff0d8;
+$success-border: darken(adjust-hue($success-bg, -10), 5%);
-$infoText: #3a87ad;
-$infoBackground: #d9edf7;
-$infoBorder: darken(adjust-hue($infoBackground, -10), 7%);
+$info-text: #3a87ad;
+$info-bg: #d9edf7;
+$info-border: darken(adjust-hue($info-bg, -10), 7%);
-// Panels
+// Side Menu
// -------------------------------
-$menuBackgroundColor: #eee;
-$menuInsetBorderColor: #bbb;
+$menu-bg: #eee;
+$menu-inset-border-color: #bbb;
diff --git a/scss/ionic/structure/_alerts.scss b/scss/ionic/structure/_alerts.scss
index b84659bee2..9a5c5a5fed 100644
--- a/scss/ionic/structure/_alerts.scss
+++ b/scss/ionic/structure/_alerts.scss
@@ -18,7 +18,7 @@
position: relative;
top: -2px;
right: -21px;
- line-height: $baseLineHeight;
+ line-height: $line-height-base;
}
diff --git a/scss/ionic/structure/_bar.scss b/scss/ionic/structure/_bar.scss
index ff5d88ae53..758ba7ee80 100644
--- a/scss/ionic/structure/_bar.scss
+++ b/scss/ionic/structure/_bar.scss
@@ -1,7 +1,7 @@
// Use Flexbox for our header and footer bars
.bar {
- @include disable-user-select();
+ @include user-select(none);
display: -webkit-box;
display: box;
@@ -11,8 +11,8 @@
right: 0;
z-index: 10;
width: 100%;
- height: $barHeight;
- padding: $barPaddingPortrait;
+ height: $bar-height;
+ padding: $bar-padding-portrait;
box-sizing: border-box;
@@ -26,7 +26,7 @@
left: 0;
right: 0;
- line-height: $barHeight;
+ line-height: $bar-height;
margin: 0;
//padding: $barPaddingVertical 0px;
@@ -38,7 +38,7 @@
text-align: center;
white-space: nowrap;
- font-size: $barTitleFontSize;
+ font-size: $bar-title-font-size;
}
@@ -49,12 +49,12 @@
.button {
@include box-flex(0);
- line-height: $barButtonLineHeight;
+ line-height: $bar-button-line-height;
font-size: 12px;
}
.button-bar {
- line-height: $barButtonBarLineHeight;
+ line-height: $bar-button-bar-line-height;
}
.button-bar + .button, .button + .button-bar {
@@ -88,19 +88,19 @@
}
.bar-header-secondary {
- top: $barHeight;
+ top: $bar-height;
}
.bar-footer-secondary {
- bottom: $barHeight;
+ bottom: $bar-height;
}
/* Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab.
Note: For these to work, content must come after both bars in the markup */
.has-header {
- top: $barHeight;
+ top: $bar-height;
}
.has-footer {
- bottom: $barHeight;
+ bottom: $bar-height;
}
diff --git a/scss/ionic/structure/_base.scss b/scss/ionic/structure/_base.scss
index 137942bd8e..59bdf46438 100644
--- a/scss/ionic/structure/_base.scss
+++ b/scss/ionic/structure/_base.scss
@@ -3,8 +3,7 @@
// Make sure iOS Safari doesn't scale fonts on orientation changes
html {
-webkit-text-size-adjust: 100%;
-
- @include disable-user-select();
+ @include user-select(none);
}
body {
@@ -46,15 +45,15 @@ body {
}
.content-padded {
- padding: $contentPadding;
+ padding: $content-padding;
}
.inset {
- margin: $insetMargin;
+ margin: $inset-margin;
}
.rounded {
- border-radius: $roundedRadius;
+ border-radius: $border-radius-base;
}
// Remove tap highlight color on Safari
diff --git a/scss/ionic/structure/_button-group.scss b/scss/ionic/structure/_button-group.scss
index 38e4bfcff0..50e365dfd8 100644
--- a/scss/ionic/structure/_button-group.scss
+++ b/scss/ionic/structure/_button-group.scss
@@ -76,7 +76,7 @@
@include box-flex(1);
// Fix for box-flex width issue
- line-height: $buttonBarButtonLineHeight;
+ line-height: $button-bar-button-line-height;
border-radius: 0;
overflow: hidden;
diff --git a/scss/ionic/structure/_button.scss b/scss/ionic/structure/_button.scss
index 8a4f90bac7..d85415ac76 100644
--- a/scss/ionic/structure/_button.scss
+++ b/scss/ionic/structure/_button.scss
@@ -7,7 +7,7 @@
margin: 0;
&.button-block {
- margin: $buttonBlockMargin;
+ margin: $button-block-margin;
display: block;
width: 100%;
}
diff --git a/scss/ionic/structure/_form.scss b/scss/ionic/structure/_form.scss
index bd06d554f5..f08748d8af 100644
--- a/scss/ionic/structure/_form.scss
+++ b/scss/ionic/structure/_form.scss
@@ -4,7 +4,7 @@
// Make all forms have space below them
form {
- margin: 0 0 $baseLineHeight;
+ margin: 0 0 $line-height-base;
}
fieldset {
@@ -18,17 +18,17 @@ legend {
display: block;
width: 100%;
padding: 0;
- margin-bottom: $baseLineHeight;
- font-size: $baseFontSize * 1.5;
- line-height: $baseLineHeight * 2;
- color: $grayDark;
+ margin-bottom: $line-height-base;
+ font-size: $font-size-base * 1.5;
+ line-height: $line-height-base * 2;
+ color: $gray-dark;
border: 0;
border-bottom: 1px solid #e5e5e5;
// Small
small {
- font-size: $baseLineHeight * .75;
- color: $grayLight;
+ font-size: $line-height-base * .75;
+ color: $gray-light;
}
}
@@ -38,34 +38,34 @@ input,
button,
select,
textarea {
- @include font-shorthand($baseFontSize, normal, $baseLineHeight); // Set size, weight, line-height here
+ @include font-shorthand($font-size-base, normal, $line-height-base); // 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)
+ font-family: $base-font-family; // And only set font-family here for those that need it (note the missing label element)
}
.form-group {
- border-top: $inputBorderWidth solid $inputBorderColor;
- border-bottom: $inputBorderWidth solid $inputBorderColor;
- background-color: $inputBackground;
+ border-top: $input-border-width solid $input-border-color;
+ border-bottom: $input-border-width solid $input-border-color;
+ background-color: $input-bg;
overflow: hidden;
}
.content-padded > .form-group,
.form-group.inset {
- border-left: $inputBorderWidth solid $inputBorderColor;
- border-right: $inputBorderWidth solid $inputBorderColor;
- @include border-radius($inputBorderRadius);
+ border-left: $input-border-width solid $input-border-color;
+ border-right: $input-border-width solid $input-border-color;
+ @include border-radius($input-border-radius);
}
.form-group .input-wrapper + .input-wrapper {
- border-top: $inputBorderWidth solid $inputBorderColor;
+ border-top: $input-border-width solid $input-border-color;
}
.form-group + .form-group {
- margin-top: $contentPadding;
+ margin-top: $content-padding;
}
.input-wrapper {
@@ -82,7 +82,7 @@ textarea {
.input-label {
font-weight: bold;
- line-height: $baseLineHeightComputed + $baseFontSize;
+ line-height: $line-height-computed + $font-size-base;
}
}
@@ -93,11 +93,11 @@ textarea {
}
.form-group.stacked-label input {
- border: $inputBorderWidth solid $inputBorderColor;
- background-color: $inputBackground;
+ border: $input-border-width solid $input-border-color;
+ background-color: $input-bg;
padding: 4px 8px 3px;
overflow: hidden;
- @include border-radius($inputBorderRadius);
+ @include border-radius($input-border-radius);
}
@@ -123,9 +123,9 @@ input[type="tel"],
input[type="color"],
.uneditable-input {
display: inline-block;
- height: $baseLineHeightComputed + $baseFontSize;
- font-size: $baseFontSize;
- line-height: $baseLineHeightComputed;
+ height: $line-height-computed + $font-size-base;
+ font-size: $font-size-base;
+ line-height: $line-height-computed;
color: $gray;
vertical-align: middle;
}
@@ -191,15 +191,15 @@ input[type="checkbox"] {
// 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 */
- line-height: $inputHeight;
+ height: $input-height-base; /* In IE7, the height of the select element cannot be changed by height, only font-size */
+ line-height: $input-height-base;
}
// Make select elements obey height by applying a border
select {
width: 220px; // default input width + 10px of padding that doesn't get applied
- border: $inputBorderWidth solid $inputBorderColor;
- background-color: $inputBackground; // Chrome on Linux and Mobile Safari need background-color
+ border: $input-border-width solid $input-border-color;
+ background-color: $input-bg; // Chrome on Linux and Mobile Safari need background-color
}
// Make multiple select elements height not fixed
@@ -217,31 +217,6 @@ input[type="checkbox"]:focus {
}
-// Uneditable inputs
-// -------------------------------
-
-// Make uneditable inputs look inactive
-.uneditable-input,
-.uneditable-textarea {
- color: $grayLight;
- background-color: darken($inputBackground, 1%);
- border-color: $inputBorderColor;
- 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
// -------------------------------
input,
@@ -250,111 +225,9 @@ textarea {
}
-// 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],
@@ -364,7 +237,7 @@ input[readonly],
select[readonly],
textarea[readonly] {
cursor: not-allowed;
- background-color: $inputDisabledBackground;
+ background-color: $input-bg-disabled;
}
// Explicitly reset the colors here
input[type="radio"][disabled],
@@ -374,345 +247,3 @@ 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%);
- }
-}
-
-
-
-// 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
- vertical-align: top;
- // 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;
- &: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/structure/_grid.scss b/scss/ionic/structure/_grid.scss
index f2b910a16f..7b33ecd39b 100644
--- a/scss/ionic/structure/_grid.scss
+++ b/scss/ionic/structure/_grid.scss
@@ -3,19 +3,344 @@
// --------------------------------------------------
-// Fixed (940px)
-@include grid-core($gridColumnWidth, $gridGutterWidth);
-
-// Fluid (940px)
-@include grid-fluid($fluidGridColumnWidth, $fluidGridGutterWidth);
-
-// Reset utility classes due to specificity
-[class*="span"].hide,
-.row-fluid [class*="span"].hide {
- display: none;
+// Set the container width, and override it for fixed navbars in media queries
+.container {
+ @include container-fixed();
}
-[class*="span"].pull-right,
-.row-fluid [class*="span"].pull-right {
- float: right;
+// mobile first defaults
+.row {
+ @include make-row();
+}
+
+// Common styles for small and large grid columns
+.col-xs-1,
+.col-xs-2,
+.col-xs-3,
+.col-xs-4,
+.col-xs-5,
+.col-xs-6,
+.col-xs-7,
+.col-xs-8,
+.col-xs-9,
+.col-xs-10,
+.col-xs-11,
+.col-xs-12,
+.col-sm-1,
+.col-sm-2,
+.col-sm-3,
+.col-sm-4,
+.col-sm-5,
+.col-sm-6,
+.col-sm-7,
+.col-sm-8,
+.col-sm-9,
+.col-sm-10,
+.col-sm-11,
+.col-sm-12,
+.col-md-1,
+.col-md-2,
+.col-md-3,
+.col-md-4,
+.col-md-5,
+.col-md-6,
+.col-md-7,
+.col-md-8,
+.col-md-9,
+.col-md-10,
+.col-md-11,
+.col-md-12,
+.col-lg-1,
+.col-lg-2,
+.col-lg-3,
+.col-lg-4,
+.col-lg-5,
+.col-lg-6,
+.col-lg-7,
+.col-lg-8,
+.col-lg-9,
+.col-lg-10,
+.col-lg-11,
+.col-lg-12 {
+ position: relative;
+ // Prevent columns from collapsing when empty
+ min-height: 1px;
+ // Inner gutter via padding
+ padding-left: ($grid-gutter-width / 2);
+ padding-right: ($grid-gutter-width / 2);
+}
+
+
+// Extra small grid
+//
+// Grid classes for extra small devices like smartphones. No offset, push, or
+// pull classes are present here due to the size of the target.
+//
+// Note that `.col-xs-12` doesn't get floated on purpose—there's no need since
+// it's full-width.
+
+.col-xs-1,
+.col-xs-2,
+.col-xs-3,
+.col-xs-4,
+.col-xs-5,
+.col-xs-6,
+.col-xs-7,
+.col-xs-8,
+.col-xs-9,
+.col-xs-10,
+.col-xs-11 {
+ float: left;
+}
+.col-xs-1 { width: percentage((1 / $grid-columns)); }
+.col-xs-2 { width: percentage((2 / $grid-columns)); }
+.col-xs-3 { width: percentage((3 / $grid-columns)); }
+.col-xs-4 { width: percentage((4 / $grid-columns)); }
+.col-xs-5 { width: percentage((5 / $grid-columns)); }
+.col-xs-6 { width: percentage((6 / $grid-columns)); }
+.col-xs-7 { width: percentage((7 / $grid-columns)); }
+.col-xs-8 { width: percentage((8 / $grid-columns)); }
+.col-xs-9 { width: percentage((9 / $grid-columns)); }
+.col-xs-10 { width: percentage((10/ $grid-columns)); }
+.col-xs-11 { width: percentage((11/ $grid-columns)); }
+.col-xs-12 { width: 100%; }
+
+
+// Small grid
+//
+// Columns, offsets, pushes, and pulls for the small device range, from phones
+// to tablets.
+//
+// Note that `.col-sm-12` doesn't get floated on purpose—there's no need since
+// it's full-width.
+
+@media (min-width: $screen-tablet) {
+ .container {
+ max-width: $container-tablet;
+ }
+
+ .col-sm-1,
+ .col-sm-2,
+ .col-sm-3,
+ .col-sm-4,
+ .col-sm-5,
+ .col-sm-6,
+ .col-sm-7,
+ .col-sm-8,
+ .col-sm-9,
+ .col-sm-10,
+ .col-sm-11 {
+ float: left;
+ }
+ .col-sm-1 { width: percentage((1 / $grid-columns)); }
+ .col-sm-2 { width: percentage((2 / $grid-columns)); }
+ .col-sm-3 { width: percentage((3 / $grid-columns)); }
+ .col-sm-4 { width: percentage((4 / $grid-columns)); }
+ .col-sm-5 { width: percentage((5 / $grid-columns)); }
+ .col-sm-6 { width: percentage((6 / $grid-columns)); }
+ .col-sm-7 { width: percentage((7 / $grid-columns)); }
+ .col-sm-8 { width: percentage((8 / $grid-columns)); }
+ .col-sm-9 { width: percentage((9 / $grid-columns)); }
+ .col-sm-10 { width: percentage((10/ $grid-columns)); }
+ .col-sm-11 { width: percentage((11/ $grid-columns)); }
+ .col-sm-12 { width: 100%; }
+
+ // Push and pull columns for source order changes
+ .col-sm-push-1 { left: percentage((1 / $grid-columns)); }
+ .col-sm-push-2 { left: percentage((2 / $grid-columns)); }
+ .col-sm-push-3 { left: percentage((3 / $grid-columns)); }
+ .col-sm-push-4 { left: percentage((4 / $grid-columns)); }
+ .col-sm-push-5 { left: percentage((5 / $grid-columns)); }
+ .col-sm-push-6 { left: percentage((6 / $grid-columns)); }
+ .col-sm-push-7 { left: percentage((7 / $grid-columns)); }
+ .col-sm-push-8 { left: percentage((8 / $grid-columns)); }
+ .col-sm-push-9 { left: percentage((9 / $grid-columns)); }
+ .col-sm-push-10 { left: percentage((10/ $grid-columns)); }
+ .col-sm-push-11 { left: percentage((11/ $grid-columns)); }
+
+ .col-sm-pull-1 { right: percentage((1 / $grid-columns)); }
+ .col-sm-pull-2 { right: percentage((2 / $grid-columns)); }
+ .col-sm-pull-3 { right: percentage((3 / $grid-columns)); }
+ .col-sm-pull-4 { right: percentage((4 / $grid-columns)); }
+ .col-sm-pull-5 { right: percentage((5 / $grid-columns)); }
+ .col-sm-pull-6 { right: percentage((6 / $grid-columns)); }
+ .col-sm-pull-7 { right: percentage((7 / $grid-columns)); }
+ .col-sm-pull-8 { right: percentage((8 / $grid-columns)); }
+ .col-sm-pull-9 { right: percentage((9 / $grid-columns)); }
+ .col-sm-pull-10 { right: percentage((10/ $grid-columns)); }
+ .col-sm-pull-11 { right: percentage((11/ $grid-columns)); }
+
+ // Offsets
+ .col-sm-offset-1 { margin-left: percentage((1 / $grid-columns)); }
+ .col-sm-offset-2 { margin-left: percentage((2 / $grid-columns)); }
+ .col-sm-offset-3 { margin-left: percentage((3 / $grid-columns)); }
+ .col-sm-offset-4 { margin-left: percentage((4 / $grid-columns)); }
+ .col-sm-offset-5 { margin-left: percentage((5 / $grid-columns)); }
+ .col-sm-offset-6 { margin-left: percentage((6 / $grid-columns)); }
+ .col-sm-offset-7 { margin-left: percentage((7 / $grid-columns)); }
+ .col-sm-offset-8 { margin-left: percentage((8 / $grid-columns)); }
+ .col-sm-offset-9 { margin-left: percentage((9 / $grid-columns)); }
+ .col-sm-offset-10 { margin-left: percentage((10/ $grid-columns)); }
+ .col-sm-offset-11 { margin-left: percentage((11/ $grid-columns)); }
+}
+
+
+// Medium grid
+//
+// Columns, offsets, pushes, and pulls for the desktop device range.
+//
+// Note that `.col-md-12` doesn't get floated on purpose—there's no need since
+// it's full-width.
+
+@media (min-width: $screen-desktop) {
+ .container {
+ max-width: $container-desktop;
+ }
+ .col-md-1,
+ .col-md-2,
+ .col-md-3,
+ .col-md-4,
+ .col-md-5,
+ .col-md-6,
+ .col-md-7,
+ .col-md-8,
+ .col-md-9,
+ .col-md-10,
+ .col-md-11 {
+ float: left;
+ }
+ .col-md-1 { width: percentage((1 / $grid-columns)); }
+ .col-md-2 { width: percentage((2 / $grid-columns)); }
+ .col-md-3 { width: percentage((3 / $grid-columns)); }
+ .col-md-4 { width: percentage((4 / $grid-columns)); }
+ .col-md-5 { width: percentage((5 / $grid-columns)); }
+ .col-md-6 { width: percentage((6 / $grid-columns)); }
+ .col-md-7 { width: percentage((7 / $grid-columns)); }
+ .col-md-8 { width: percentage((8 / $grid-columns)); }
+ .col-md-9 { width: percentage((9 / $grid-columns)); }
+ .col-md-10 { width: percentage((10/ $grid-columns)); }
+ .col-md-11 { width: percentage((11/ $grid-columns)); }
+ .col-md-12 { width: 100%; }
+
+ // Push and pull columns for source order changes
+ .col-md-push-0 { left: auto; }
+ .col-md-push-1 { left: percentage((1 / $grid-columns)); }
+ .col-md-push-2 { left: percentage((2 / $grid-columns)); }
+ .col-md-push-3 { left: percentage((3 / $grid-columns)); }
+ .col-md-push-4 { left: percentage((4 / $grid-columns)); }
+ .col-md-push-5 { left: percentage((5 / $grid-columns)); }
+ .col-md-push-6 { left: percentage((6 / $grid-columns)); }
+ .col-md-push-7 { left: percentage((7 / $grid-columns)); }
+ .col-md-push-8 { left: percentage((8 / $grid-columns)); }
+ .col-md-push-9 { left: percentage((9 / $grid-columns)); }
+ .col-md-push-10 { left: percentage((10/ $grid-columns)); }
+ .col-md-push-11 { left: percentage((11/ $grid-columns)); }
+
+ .col-md-pull-0 { right: auto; }
+ .col-md-pull-1 { right: percentage((1 / $grid-columns)); }
+ .col-md-pull-2 { right: percentage((2 / $grid-columns)); }
+ .col-md-pull-3 { right: percentage((3 / $grid-columns)); }
+ .col-md-pull-4 { right: percentage((4 / $grid-columns)); }
+ .col-md-pull-5 { right: percentage((5 / $grid-columns)); }
+ .col-md-pull-6 { right: percentage((6 / $grid-columns)); }
+ .col-md-pull-7 { right: percentage((7 / $grid-columns)); }
+ .col-md-pull-8 { right: percentage((8 / $grid-columns)); }
+ .col-md-pull-9 { right: percentage((9 / $grid-columns)); }
+ .col-md-pull-10 { right: percentage((10/ $grid-columns)); }
+ .col-md-pull-11 { right: percentage((11/ $grid-columns)); }
+
+ // Offsets
+ .col-md-offset-0 { margin-left: 0; }
+ .col-md-offset-1 { margin-left: percentage((1 / $grid-columns)); }
+ .col-md-offset-2 { margin-left: percentage((2 / $grid-columns)); }
+ .col-md-offset-3 { margin-left: percentage((3 / $grid-columns)); }
+ .col-md-offset-4 { margin-left: percentage((4 / $grid-columns)); }
+ .col-md-offset-5 { margin-left: percentage((5 / $grid-columns)); }
+ .col-md-offset-6 { margin-left: percentage((6 / $grid-columns)); }
+ .col-md-offset-7 { margin-left: percentage((7 / $grid-columns)); }
+ .col-md-offset-8 { margin-left: percentage((8 / $grid-columns)); }
+ .col-md-offset-9 { margin-left: percentage((9 / $grid-columns)); }
+ .col-md-offset-10 { margin-left: percentage((10/ $grid-columns)); }
+ .col-md-offset-11 { margin-left: percentage((11/ $grid-columns)); }
+}
+
+
+// Large grid
+//
+// Columns, offsets, pushes, and pulls for the large desktop device range.
+//
+// Note that `.col-lg-12` doesn't get floated on purpose—there's no need since
+// it's full-width.
+
+@media (min-width: $screen-lg-desktop) {
+ .container {
+ max-width: $container-lg-desktop;
+ }
+
+ .col-lg-1,
+ .col-lg-2,
+ .col-lg-3,
+ .col-lg-4,
+ .col-lg-5,
+ .col-lg-6,
+ .col-lg-7,
+ .col-lg-8,
+ .col-lg-9,
+ .col-lg-10,
+ .col-lg-11 {
+ float: left;
+ }
+ .col-lg-1 { width: percentage((1 / $grid-columns)); }
+ .col-lg-2 { width: percentage((2 / $grid-columns)); }
+ .col-lg-3 { width: percentage((3 / $grid-columns)); }
+ .col-lg-4 { width: percentage((4 / $grid-columns)); }
+ .col-lg-5 { width: percentage((5 / $grid-columns)); }
+ .col-lg-6 { width: percentage((6 / $grid-columns)); }
+ .col-lg-7 { width: percentage((7 / $grid-columns)); }
+ .col-lg-8 { width: percentage((8 / $grid-columns)); }
+ .col-lg-9 { width: percentage((9 / $grid-columns)); }
+ .col-lg-10 { width: percentage((10/ $grid-columns)); }
+ .col-lg-11 { width: percentage((11/ $grid-columns)); }
+ .col-lg-12 { width: 100%; }
+
+ // Push and pull columns for source order changes
+ .col-lg-push-0 { left: auto; }
+ .col-lg-push-1 { left: percentage((1 / $grid-columns)); }
+ .col-lg-push-2 { left: percentage((2 / $grid-columns)); }
+ .col-lg-push-3 { left: percentage((3 / $grid-columns)); }
+ .col-lg-push-4 { left: percentage((4 / $grid-columns)); }
+ .col-lg-push-5 { left: percentage((5 / $grid-columns)); }
+ .col-lg-push-6 { left: percentage((6 / $grid-columns)); }
+ .col-lg-push-7 { left: percentage((7 / $grid-columns)); }
+ .col-lg-push-8 { left: percentage((8 / $grid-columns)); }
+ .col-lg-push-9 { left: percentage((9 / $grid-columns)); }
+ .col-lg-push-10 { left: percentage((10/ $grid-columns)); }
+ .col-lg-push-11 { left: percentage((11/ $grid-columns)); }
+
+ .col-lg-pull-0 { right: auto; }
+ .col-lg-pull-1 { right: percentage((1 / $grid-columns)); }
+ .col-lg-pull-2 { right: percentage((2 / $grid-columns)); }
+ .col-lg-pull-3 { right: percentage((3 / $grid-columns)); }
+ .col-lg-pull-4 { right: percentage((4 / $grid-columns)); }
+ .col-lg-pull-5 { right: percentage((5 / $grid-columns)); }
+ .col-lg-pull-6 { right: percentage((6 / $grid-columns)); }
+ .col-lg-pull-7 { right: percentage((7 / $grid-columns)); }
+ .col-lg-pull-8 { right: percentage((8 / $grid-columns)); }
+ .col-lg-pull-9 { right: percentage((9 / $grid-columns)); }
+ .col-lg-pull-10 { right: percentage((10/ $grid-columns)); }
+ .col-lg-pull-11 { right: percentage((11/ $grid-columns)); }
+
+ // Offsets
+ .col-lg-offset-0 { margin-left: 0; }
+ .col-lg-offset-1 { margin-left: percentage((1 / $grid-columns)); }
+ .col-lg-offset-2 { margin-left: percentage((2 / $grid-columns)); }
+ .col-lg-offset-3 { margin-left: percentage((3 / $grid-columns)); }
+ .col-lg-offset-4 { margin-left: percentage((4 / $grid-columns)); }
+ .col-lg-offset-5 { margin-left: percentage((5 / $grid-columns)); }
+ .col-lg-offset-6 { margin-left: percentage((6 / $grid-columns)); }
+ .col-lg-offset-7 { margin-left: percentage((7 / $grid-columns)); }
+ .col-lg-offset-8 { margin-left: percentage((8 / $grid-columns)); }
+ .col-lg-offset-9 { margin-left: percentage((9 / $grid-columns)); }
+ .col-lg-offset-10 { margin-left: percentage((10/ $grid-columns)); }
+ .col-lg-offset-11 { margin-left: percentage((11/ $grid-columns)); }
}
diff --git a/scss/ionic/structure/_listview.scss b/scss/ionic/structure/_listview.scss
index ec063b3a1e..cef41ec647 100644
--- a/scss/ionic/structure/_listview.scss
+++ b/scss/ionic/structure/_listview.scss
@@ -15,7 +15,7 @@
margin-bottom: -1px;
//background-color: $list-group-bg;
- border: $listItemBorder;
+ border: $list-item-border;
// Round the first and last items
&:first-child {
diff --git a/scss/ionic/structure/_menu.scss b/scss/ionic/structure/_menu.scss
index b5024e88df..ce27e74d1f 100644
--- a/scss/ionic/structure/_menu.scss
+++ b/scss/ionic/structure/_menu.scss
@@ -5,7 +5,7 @@
.menu {
min-height: 100%;
max-height: 100%;
- width: $menuWidth;
+ width: $menu-width;
position: absolute;
top: 0;
bottom: 0;
@@ -23,7 +23,7 @@
.menu-right { right: 0; }
.menu-animated {
- -webkit-transition: -webkit-transform $menuAnimationSpeed ease;
- -moz-transition: -moz-transform $menuAnimationSpeed ease;
- transition: transform $menuAnimationSpeed ease;
+ -webkit-transition: -webkit-transform $menu-animation-speed ease;
+ -moz-transition: -moz-transform $menu-animation-speed ease;
+ transition: transform $menu-animation-speed ease;
}
diff --git a/scss/ionic/theme/_alerts.scss b/scss/ionic/theme/_alerts.scss
index fa4e46b4c3..283f105296 100644
--- a/scss/ionic/theme/_alerts.scss
+++ b/scss/ionic/theme/_alerts.scss
@@ -7,15 +7,15 @@
// -------------------------
.alert {
- margin-bottom: $baseLineHeight;
+ margin-bottom: $line-height-base;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
- background-color: $warningBackground;
- border: 1px solid $warningBorder;
+ background-color: $warning-bg;
+ border: 1px solid $warning-border;
}
.alert,
.alert h4 {
// Specified for the h4 to prevent conflicts of changing $headingsColor
- color: $warningText;
+ color: $warning-text;
}
@@ -23,29 +23,29 @@
// -------------------------
.alert-success {
- background-color: $successBackground;
- border-color: $successBorder;
- color: $successText;
+ background-color: $success-bg;
+ border-color: $success-border;
+ color: $success-text;
}
.alert-success h4 {
- color: $successText;
+ color: $success-text;
}
.alert-danger,
.alert-error {
- background-color: $errorBackground;
- border-color: $errorBorder;
- color: $errorText;
+ background-color: $error-bg;
+ border-color: $error-border;
+ color: $error-text;
}
.alert-danger h4,
.alert-error h4 {
- color: $errorText;
+ color: $error-text;
}
.alert-info {
- background-color: $infoBackground;
- border-color: $infoBorder;
- color: $infoText;
+ background-color: $info-bg;
+ border-color: $info-border;
+ color: $info-text;
}
.alert-info h4 {
- color: $infoText;
+ color: $info-text;
}
diff --git a/scss/ionic/theme/_bar.scss b/scss/ionic/theme/_bar.scss
index 5077f4d41b..737f2f561b 100644
--- a/scss/ionic/theme/_bar.scss
+++ b/scss/ionic/theme/_bar.scss
@@ -1,5 +1,5 @@
.bar {
- background-color: $barBackground;
+ background-color: $bar-bg;
border-style: solid;
border-width: 0;
@@ -11,70 +11,70 @@
}
&.bar-default {
- background-color: $barDefaultBackground;
- border-color: $barDefaultBorderColor;
- color: $darkColor;
+ background-color: $bar-default-bg;
+ border-color: $bar-default-border-color;
+ color: $gray-dark;
.tab-item a {
- color: $darkColor;
+ color: $gray-dark;
}
}
&.bar-secondary {
- background-color: $barSecondaryBackground;
- border-color: $barSecondaryBorderColor;
- color: $darkColor;
+ background-color: $bar-secondary-bg;
+ border-color: $bar-secondary-border-color;
+ color: $gray-dark;
.tab-item a {
- color: $darkColor;
+ color: $gray-dark;
}
}
&.bar-primary {
- background-color: $barPrimaryBackground;
- border-color: $barPrimaryBorderColor;
- color: $lightColor;
+ background-color: $bar-primary-bg;
+ border-color: $bar-primary-border-color;
+ color: $gray-light;
.tab-item a {
- color: $lightColor;
+ color: $gray-light;
}
}
&.bar-info {
- background-color: $barInfoBackground;
- border-color: $barInfoBorderColor;
- color: $lightColor;
+ background-color: $bar-info-bg;
+ border-color: $bar-info-border-color;
+ color: $gray-light;
.tab-item a {
- color: $lightColor;
+ color: $gray-light;
}
}
&.bar-success {
- background-color: $barSuccessBackground;
- border-color: $barSuccessBorderColor;
- color: $lightColor;
+ background-color: $bar-success-bg;
+ border-color: $bar-success-border-color;
+ color: $gray-light;
.tab-item a {
- color: $lightColor;
+ color: $gray-light;
}
}
&.bar-warning {
- background-color: $barWarningBackground;
- border-color: $barWarningBorderColor;
- color: $lightColor;
+ background-color: $bar-warning-bg;
+ border-color: $bar-warning-border-color;
+ color: $gray-light;
.tab-item a {
- color: $lightColor;
+ color: $gray-light;
}
}
&.bar-danger {
- background-color: $barDangerBackground;
- border-color: $barDangerBorderColor;
- color: $lightColor;
+ background-color: $bar-danger-bg;
+ border-color: $bar-danger-border-color;
+ color: $gray-light;
.tab-item a {
- color: $lightColor;
+ color: $gray-light;
}
}
&.bar-dark {
- background-color: $barDarkBackground;
- border-color: $barDarkBorderColor;
- color: $lightColor;
+ background-color: $bar-dark-bg;
+ border-color: $bar-dark-border-color;
+ color: $gray-light;
.tab-item a {
- color: $lightColor;
+ color: $gray-light;
}
}
@@ -89,45 +89,45 @@
.bar-default {
.button {
- @include button-style($buttonDefaultBackground, $buttonDefaultBorder, $darkColor);
+ @include button-style($button-default-bg, $buttonDefaultBorder, $gray-dark);
}
}
.bar-secondary {
.button {
- @include button-style($buttonSecondaryBackground, $buttonSecondaryBorder, $darkColor);
+ @include button-style($button-secondary-bg, $button-secondary-border, $gray-dark);
}
}
.bar-primary {
.button {
- @include button-style($buttonPrimaryBackground, $buttonPrimaryBorder, $lightColor);
+ @include button-style($button-primary-bg, $button-primary-border, $gray-light);
}
}
.bar-info {
.button {
- @include button-style($buttonInfoBackground, $buttonInfoBorder, $lightColor);
+ @include button-style($button-info-bg, $button-info-border, $gray-light);
}
}
.bar-success {
.button {
- @include button-style($buttonSuccessBackground, $buttonSuccessBorder, $lightColor);
+ @include button-style($button-success-bg, $button-success-border, $gray-light);
}
}
.bar-warning {
.button {
- @include button-style($buttonWarningBackground, $buttonWarningBorder, $lightColor);
+ @include button-style($button-warning-bg, $button-warning-border, $gray-light);
}
}
.bar-danger {
.button {
- @include button-style($buttonDangerBackground, $buttonDangerBorder, $lightColor);
+ @include button-style($button-danger-bg, $buttonDangerBorder, $gray-light);
}
}
.bar-dark {
// A default style for buttons
.button {
- @include button-style($buttonDarkBackground, $buttonDarkBorder, $lightColor);
+ @include button-style($button-dark-bg, $button-dark-border, $gray-light);
}
}
diff --git a/scss/ionic/theme/_base.scss b/scss/ionic/theme/_base.scss
index 7d6175ec4c..d8f9537b5e 100644
--- a/scss/ionic/theme/_base.scss
+++ b/scss/ionic/theme/_base.scss
@@ -2,11 +2,11 @@
body {
font-size: 14px;
line-height: 1.25;
- font-family: $baseFontFamily;
+ font-family: $base-font-family;
}
main {
- background-color: $baseBackgroundColor;
+ background-color: $base-background-color;
}
.full-section {
diff --git a/scss/ionic/theme/_button.scss b/scss/ionic/theme/_button.scss
index 33317d68ec..5e93663428 100644
--- a/scss/ionic/theme/_button.scss
+++ b/scss/ionic/theme/_button.scss
@@ -1,39 +1,39 @@
.button {
- color: $buttonColor;
- border-radius: $buttonBorderRadius;
- border-width: $buttonBorderWidth;
+ color: $button-color;
+ border-radius: $button-border-radius;
+ border-width: $button-border-width;
border-style: solid;
- padding: $buttonPadding;
- font-size: $buttonFontSize;
+ padding: $button-padding;
+ font-size: $button-font-size;
&.button-default {
- @include button-style($buttonDefaultBackground, $buttonDefaultBorder, $darkColor);
+ @include button-style($button-default-bg, $buttonDefaultBorder, $gray-dark);
}
&.button-secondary {
- @include button-style($buttonSecondaryBackground, $buttonSecondaryBorder, $darkColor);
+ @include button-style($button-secondary-bg, $button-secondary-border, $gray-dark);
}
&.button-primary {
- @include button-style($buttonPrimaryBackground, $buttonPrimaryBorder, $lightColor);
+ @include button-style($button-primary-bg, $button-primary-border, $gray-light);
}
&.button-info {
- @include button-style($buttonInfoBackground, $buttonInfoBorder, $lightColor);
+ @include button-style($button-info-bg, $button-info-border, $gray-light);
}
&.button-success {
- @include button-style($buttonSuccessBackground, $buttonSuccessBorder, $lightColor);
+ @include button-style($button-success-bg, $button-success-border, $gray-light);
}
&.button-warning {
- @include button-style($buttonWarningBackground, $buttonWarningBorder, $lightColor);
+ @include button-style($button-warning-bg, $button-warning-border, $gray-light);
}
&.button-danger {
- @include button-style($buttonDangerBackground, $buttonDangerBorder, $lightColor);
+ @include button-style($button-danger-bg, $buttonDangerBorder, $gray-light);
}
&.button-dark {
- @include button-style($buttonDarkBackground, $buttonDarkBorder, $lightColor);
+ @include button-style($button-dark-bg, $button-dark-border, $gray-light);
}
&.button-clear {
background: none;
border: none;
- padding: $buttonClearPadding;
+ padding: $button-clear-padding;
}
}
diff --git a/scss/ionic/theme/_listview.scss b/scss/ionic/theme/_listview.scss
index 007f1e04e6..d1d74e6235 100644
--- a/scss/ionic/theme/_listview.scss
+++ b/scss/ionic/theme/_listview.scss
@@ -1,9 +1,9 @@
.list-divider {
- background-color: $listDividerBackground;
- color: $listDividerColor;
+ background-color: $list-divider-bg;
+ color: $list-divider-color;
font-weight: bold;
}
a.list-item {
- color: $darkColor;
+ color: $gray-dark;
}
diff --git a/scss/ionic/theme/_menu.scss b/scss/ionic/theme/_menu.scss
index 22f632bf66..462e82e97b 100644
--- a/scss/ionic/theme/_menu.scss
+++ b/scss/ionic/theme/_menu.scss
@@ -1,12 +1,12 @@
.ion-panel {
- background: $menuBackgroundColor;
+ background: $menu-bg;
}
.ion-panel-left .ion-panel {
- border-right: 1px solid $menuInsetBorderColor;
+ border-right: 1px solid $menu-inset-border-color;
}
.ion-panel-right .ion-panel {
- border-left: 1px solid $menuInsetBorderColor;
+ border-left: 1px solid $menu-inset-border-color;
}
diff --git a/scss/ionic/theme/_tabs.scss b/scss/ionic/theme/_tabs.scss
index fc71f67983..4b0748ff6c 100644
--- a/scss/ionic/theme/_tabs.scss
+++ b/scss/ionic/theme/_tabs.scss
@@ -3,7 +3,7 @@
}
.tab-item {
a {
- font-family: $lightSansFontFamily;
+ font-family: $light-sans-font-family;
font-weight: 200;
.active, &:active {