diff --git a/sass/bars.scss b/sass/bars.scss index 6fb3904..daa4eee 100644 --- a/sass/bars.scss +++ b/sass/bars.scss @@ -10,8 +10,8 @@ height: $bar-base-height; padding-right: $bar-side-spacing; padding-left: $bar-side-spacing; - border-bottom: $border-default; background-color: $chrome-color; + border-bottom: $border-default; } // Modifier class to dock any bar below .bar-nav @@ -38,8 +38,8 @@ .bar-footer, .bar-footer-secondary, .bar-footer-secondary-tab { - border-bottom: 0; border-top: $border-default; + border-bottom: 0; } @@ -83,18 +83,18 @@ width: 100%; height: $bar-tab-height; padding: 0; + table-layout: fixed; border-top: $border-default; border-bottom: 0; - table-layout: fixed; // Navigational tab (Nested to be more specific for the icons in tab-items) .tab-item { display: table-cell; width: 1%; height: $bar-tab-height; - vertical-align: middle; color: #929292; text-align: center; + vertical-align: middle; // Active states for the tab bar &.active, @@ -144,8 +144,8 @@ top: 0; padding: 0; font-size: 16px; - color: $primary-color; line-height: $bar-base-height; + color: $primary-color; border: 0; &:active, diff --git a/sass/buttons.scss b/sass/buttons.scss index 2f3f9ef..7abec8a 100644 --- a/sass/buttons.scss +++ b/sass/buttons.scss @@ -12,8 +12,8 @@ line-height: 1; color: #333; text-align: center; - vertical-align: top; white-space: nowrap; + vertical-align: top; cursor: pointer; background-color: $chrome-color; border: 1px solid #ccc; @@ -40,42 +40,42 @@ // Primary button (Default color is blue) .btn-primary { color: #fff; - border: 1px solid $primary-color; background-color: $primary-color; + border: 1px solid $primary-color; &:active, &.active { color: #fff; - border: 1px solid darken($primary-color, 10%); background-color: darken($primary-color, 10%); + border: 1px solid darken($primary-color, 10%); } } // Positive button (Default color is green) .btn-positive { color: #fff; - border: 1px solid $positive-color; background-color: $positive-color; + border: 1px solid $positive-color; &:active, &.active { color: #fff; - border: 1px solid darken($positive-color, 10%); background-color: darken($positive-color, 10%); + border: 1px solid darken($positive-color, 10%); } } // Negative button (Default color is red) .btn-negative { color: #fff; - border: 1px solid $negative-color; background-color: $negative-color; + border: 1px solid $negative-color; &:active, &.active { color: #fff; - border: 1px solid darken($negative-color, 10%); background-color: darken($negative-color, 10%); + border: 1px solid darken($negative-color, 10%); } } @@ -140,8 +140,8 @@ input[type="button"] { // Generic styles for all badges within default buttons .btn .badge { - font-size: 12px; margin: -2px -4px -2px 4px; + font-size: 12px; background-color: rgba(0,0,0,.15); } diff --git a/sass/cards.scss b/sass/cards.scss index 28e9afa..745cb8e 100644 --- a/sass/cards.scss +++ b/sass/cards.scss @@ -3,8 +3,8 @@ // -------------------------------------------------- .card { - overflow: hidden; margin: $bar-side-spacing; + overflow: hidden; background-color: $card-bg; border: $border-default; border-radius: $border-radius; @@ -21,14 +21,14 @@ // Rounding first divider on carded lists and remove border on the top .table-view-divider:first-child { top: 0; - border-top-right-radius: $border-radius; border-top-left-radius: $border-radius; + border-top-right-radius: $border-radius; } // Rounding last divider on carded table views .table-view-divider:last-child { - border-bottom-right-radius: $border-radius; border-bottom-left-radius: $border-radius; + border-bottom-right-radius: $border-radius; } } // Remove the bottom border from last table cell diff --git a/sass/forms.scss b/sass/forms.scss index 254160d..abc3c7e 100644 --- a/sass/forms.scss +++ b/sass/forms.scss @@ -30,6 +30,7 @@ input[type="tel"], input[type="color"] { width: 100%; height: 35px; + -webkit-appearance: none; padding: 0 15px; margin-bottom: 15px; line-height: $line-height-default; @@ -37,7 +38,6 @@ input[type="color"] { border: $border-default; border-radius: 3px; outline: none; - -webkit-appearance: none; } // Rounded search input @@ -80,8 +80,8 @@ select { margin-bottom: 0; background-color: transparent; border-top: 0; - border-left: 0; border-right: 0; + border-left: 0; border-radius: 0; @include box-shadow(none); } diff --git a/sass/mixins.scss b/sass/mixins.scss index 944583e..45d580a 100644 --- a/sass/mixins.scss +++ b/sass/mixins.scss @@ -22,8 +22,8 @@ @mixin clearfix() { &:before, &:after { - content: " "; // 1 display: table; // 2 + content: " "; // 1 } &:after { clear: both; diff --git a/sass/modals.scss b/sass/modals.scss index fd2f2b3..ba15faf 100644 --- a/sass/modals.scss +++ b/sass/modals.scss @@ -5,12 +5,12 @@ .modal { position: fixed; top: 0; - opacity: 0; z-index: 11; width: 100%; min-height: 100%; overflow: hidden; background-color: #fff; + opacity: 0; -webkit-transition: -webkit-transform .25s, opacity 1ms .25s; -moz-transition: -moz-transform .25s, opacity 1ms .25s; transition: transform .25s, opacity 1ms .25s; @@ -18,8 +18,8 @@ // Active modal &.active { - opacity: 1; height: 100%; + opacity: 1; -webkit-transition: -webkit-transform .25s; -moz-transition: -moz-transform .25s; transition: transform .25s; diff --git a/sass/normalize.scss b/sass/normalize.scss index ce04b6a..7126853 100644 --- a/sass/normalize.scss +++ b/sass/normalize.scss @@ -131,8 +131,8 @@ dfn { // h1 { - font-size: 2em; margin: 0.67em 0; + font-size: 2em; } // @@ -140,8 +140,8 @@ h1 { // mark { - background: #ff0; color: #000; + background: #ff0; } // @@ -158,18 +158,18 @@ small { sub, sup { + position: relative; font-size: 75%; line-height: 0; - position: relative; vertical-align: baseline; } sup { - top: -0.5em; + top: -.5em; } sub { - bottom: -0.25em; + bottom: -.25em; } // Embedded content @@ -207,9 +207,9 @@ figure { // hr { - -moz-box-sizing: content-box; - box-sizing: content-box; height: 0; + -moz-box-sizing: content-box; + box-sizing: content-box; } // @@ -252,9 +252,9 @@ input, optgroup, select, textarea { + margin: 0; // 3 color: inherit; // 1 font: inherit; // 2 - margin: 0; // 3 } // @@ -308,8 +308,8 @@ html input[disabled] { button::-moz-focus-inner, input::-moz-focus-inner { - border: 0; padding: 0; + border: 0; } // @@ -331,8 +331,8 @@ input { input[type="checkbox"], input[type="radio"] { - box-sizing: border-box; // 1 padding: 0; // 2 + box-sizing: border-box; // 1 } // @@ -353,10 +353,10 @@ input[type="number"]::-webkit-outer-spin-button { // input[type="search"] { - -webkit-appearance: textfield; // 1 - -moz-box-sizing: content-box; -webkit-box-sizing: content-box; // 2 - box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; + -webkit-appearance: textfield; // 1 } // @@ -375,9 +375,9 @@ input[type="search"]::-webkit-search-decoration { // fieldset { - border: 1px solid #c0c0c0; + padding: .35em .625em .75em; margin: 0 2px; - padding: 0.35em 0.625em 0.75em; + border: 1px solid #c0c0c0; } // @@ -386,8 +386,8 @@ fieldset { // legend { - border: 0; // 1 padding: 0; // 2 + border: 0; // 1 } // @@ -415,8 +415,8 @@ optgroup { // table { - border-collapse: collapse; border-spacing: 0; + border-collapse: collapse; } td, diff --git a/sass/popovers.scss b/sass/popovers.scss index 3ec3a7a..e91ae39 100644 --- a/sass/popovers.scss +++ b/sass/popovers.scss @@ -25,10 +25,10 @@ width: 0; height: 0; margin-left: -15px; + content: ''; border-right: 15px solid transparent; border-bottom: 15px solid $chrome-color; border-left: 15px solid transparent; - content: ''; } // Popover transition @@ -76,8 +76,8 @@ .popover .bar-nav { border-bottom: $border-default; - border-top-right-radius: 12px; border-top-left-radius: 12px; + border-top-right-radius: 12px; @include box-shadow(none); } @@ -89,9 +89,9 @@ max-height: 300px; margin-bottom: 0; overflow: auto; + -webkit-overflow-scrolling: touch; background-color: #fff; border-top: 0; border-bottom: 0; border-radius: $border-radius; - -webkit-overflow-scrolling: touch; } diff --git a/sass/push.scss b/sass/push.scss index 0a3fa4c..5e31961 100644 --- a/sass/push.scss +++ b/sass/push.scss @@ -42,11 +42,11 @@ position: absolute; top: 50%; display: inline-block; - color: #bbb; font-family: Ratchicons; font-size: inherit; - text-decoration: none; line-height: 1; + color: #bbb; + text-decoration: none; -webkit-font-smoothing: antialiased; @include transform(translateY(-50%)); } diff --git a/sass/ratchicons.scss b/sass/ratchicons.scss index 97a6803..be18807 100644 --- a/sass/ratchicons.scss +++ b/sass/ratchicons.scss @@ -4,21 +4,21 @@ @font-face { font-family: Ratchicons; + font-weight: normal; + font-style: normal; src: url('../fonts/ratchicons.eot'); src: url('../fonts/ratchicons.eot?#iefix') format('embedded-opentype'), url('../fonts/ratchicons.woff') format('woff'), url('../fonts/ratchicons.ttf') format('truetype'), url('../fonts/ratchicons.svg#svgFontName') format('svg'); - font-weight: normal; - font-style: normal; } .icon { display: inline-block; font-family: Ratchicons; font-size: 24px; - text-decoration: none; line-height: 1; + text-decoration: none; -webkit-font-smoothing: antialiased; } diff --git a/sass/segmented-controls.scss b/sass/segmented-controls.scss index 543520c..edc3aae 100644 --- a/sass/segmented-controls.scss +++ b/sass/segmented-controls.scss @@ -15,15 +15,15 @@ // Section within controller .control-item { display: table-cell; - overflow: hidden; width: 1%; padding-top: 6px; padding-bottom: 7px; + overflow: hidden; line-height: 1; color: #333; text-align: center; - white-space: nowrap; text-overflow: ellipsis; + white-space: nowrap; border-left: 1px solid #ccc; // Remove border-left and shadow from first section diff --git a/sass/sliders.scss b/sass/sliders.scss index 5b04477..d8e10aa 100644 --- a/sass/sliders.scss +++ b/sass/sliders.scss @@ -22,10 +22,10 @@ // Individual slide .slide { display: inline-block; - vertical-align: top; // Ensure that li always aligns to top width: 100%; height: 100%; font-size: 14px; + vertical-align: top; // Ensure that li always aligns to top } } } diff --git a/sass/table-views.scss b/sass/table-views.scss index 42372bf..e06f4a8 100644 --- a/sass/table-views.scss +++ b/sass/table-views.scss @@ -15,8 +15,8 @@ // Pad each table view item and add dividers .table-view-cell { position: relative; - overflow: hidden; padding: 11px 65px 11px 15px; + overflow: hidden; border-bottom: $border-default; // Remove the border from the last table view item @@ -27,9 +27,9 @@ > a:not(.btn) { position: relative; display: block; - overflow: hidden; padding: inherit; margin: -11px -65px -11px -15px; // Make the entire list item tappable. + overflow: hidden; color: inherit; &:active { @@ -51,11 +51,11 @@ padding-left: 15px; margin-top: -1px; // Hides the border of the previous list item margin-left: 0; - color: #999; font-weight: $font-weight; + color: #999; + background-color: #fafafa; border-top: $border-default; border-bottom: $border-default; - background-color: #fafafa; } diff --git a/sass/toggles.scss b/sass/toggles.scss index d79843b..2ecb096 100644 --- a/sass/toggles.scss +++ b/sass/toggles.scss @@ -3,8 +3,8 @@ // -------------------------------------------------- .toggle { - display: block; position: relative; + display: block; width: 74px; height: 30px; background-color: #fff; @@ -33,16 +33,16 @@ position: absolute; top: 3px; right: 11px; - color: #999; font-size: 13px; + color: #999; text-transform: uppercase; content: "Off"; } // Active state for toggle &.active { - border: 2px solid $positive-color; background-color: $positive-color; + border: 2px solid $positive-color; .toggle-handle { border-color: $positive-color;