Merge pull request #534 from twbs/prop-order

Property order

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,

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);
 }
 

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

sass/docs.scss

@@ -16,9 +16,9 @@ body {
   position: relative !important; // Overrides the fixed positioning of body in Ratchet
   font: 400 14px/1.5 "Open Sans", sans-serif;
   color: #333;
+  -webkit-text-size-adjust: 100%;
   background-color: #fff;
   -webkit-font-smoothing: antialiased; // Fix for webkit rendering
-  -webkit-text-size-adjust: 100%;
 }
 
 // Typography
@@ -91,9 +91,9 @@ body {
 }
 .docs-header-bottom {
   position: absolute;
-  left: 0;
   right: 0;
   bottom: 0;
+  left: 0;
 }
 // Desktop jumbotron
 @media screen and (min-width: 768px) {
@@ -104,8 +104,8 @@ body {
     .carbonad {
       left: 50% !important;
       width: 330px !important;
-      margin-left: -165px !important;
       margin-bottom: 60px !important;
+      margin-left: -165px !important;
     }
   }
 
@@ -129,10 +129,10 @@ body {
 .docs-title {
   position: absolute;
   left: 50%;
+  z-index: 20;
   margin-bottom: 0;
   font-size: 22px;
   font-weight: 400;
-  z-index: 20;
   @include transform(translateX(-50%));
 }
 .docs-nav {
@@ -147,11 +147,11 @@ body {
   .docs-nav-group {
     position: absolute;
     top: 40px;
-    left: 0;
     right: 0;
+    left: 0;
     z-index: 20;
-    overflow: hidden;
     height: 0;
+    overflow: hidden;
     background-color: rgba(0,0,0,.9);
     opacity: 0;
 
@@ -229,8 +229,8 @@ body {
       opacity: .5;
     }
     .icon-list {
-      font-size: 16px;
       margin-right: 3px;
+      font-size: 16px;
     }
     .icon-caret {
       position: relative;
@@ -292,16 +292,16 @@ body {
 // "Build mobile apps using simple..."
 .docs-header-content {
   position: relative;
-  text-align: center;
   padding: 50px 10px;
+  text-align: center;
   @include animation-name(fadeintext);
   @include animation-duration(2s);
 
   .btn {
     display: block;
     padding: 15px 60px 16px; // Creates a button that's 330px wide.
-    font-size: 18px;
     margin-bottom: 0;
+    font-size: 18px;
     color: #0a1855;
     background-color: #fff;
     border: 0;
@@ -320,9 +320,9 @@ body {
   max-width: 750px;
   margin: 0 auto 20px;
   font-size: 28px;
-  color: #fff;
-  line-height: 38px;
   font-weight: 300;
+  line-height: 38px;
+  color: #fff;
 }
 
 // Desktop header content
@@ -411,12 +411,12 @@ body {
     font-weight: 300;
   }
   .page-title {
-    font-size: 40px;
     margin-bottom: 5px;
+    font-size: 40px;
   }
   .page-description {
-    color: #fff;
     font-size: 24px;
+    color: #fff;
     opacity: .7;
   }
 }
@@ -452,8 +452,8 @@ body {
 
 // Docs modules
 .docs-module {
-  margin-top: 20px;
   padding: 20px;
+  margin-top: 20px;
   border: $border-default;
   border-radius: 3px;
 
@@ -464,8 +464,8 @@ body {
 .version {
   margin-top: 10px;
   margin-bottom: 0;
-  color: #777;
   font-size: 90%;
+  color: #777;
 }
 
 
@@ -474,11 +474,11 @@ body {
 
 .docs-footer {
   border-top: 1px solid #ddd;
-  margin-top: 50px;
   padding: 30px 20px;
-  color: #777;
+  margin-top: 50px;
   font-size: 14px;
   text-align: center;
+  color: #777;
 
   .social {
     padding: 0 0 20px;
@@ -486,8 +486,8 @@ body {
     list-style: none;
 
     li {
-      height: 20px;
       display: inline-block;
+      height: 20px;
       vertical-align: top;
     }
     .twitter-follow-button {
@@ -508,9 +508,9 @@ body {
 @media screen and (min-width: 768px) {
   .docs-footer-text {
     width: 550px;
-    margin: 0 auto;
     padding-left: 0;
     padding-right: 0;
+    margin: 0 auto;
   }
 }
 .docs-footer-links {
@@ -549,8 +549,6 @@ body {
 // --------------------------------------------------
 
 .docs-component-toolbar {
-  padding-top: 8px;
-  padding-bottom: 8px;
   position: fixed;
   top: 0;
   bottom: auto;
@@ -558,6 +556,8 @@ body {
   right: 0;
   z-index: 20;
   height: 44px;
+  padding-top: 8px;
+  padding-bottom: 8px;
   background-color: #fff;
   border-bottom: 1px solid #ddd;
   -webkit-transition: -webkit-transform .5s;
@@ -590,9 +590,9 @@ body {
 
   .example {
     display: block;
-    overflow: hidden;
-    padding: 3px;
     width: 100%;
+    padding: 3px;
+    overflow: hidden;
     border: $border-default;
     border-radius: 3px;
   }
@@ -644,8 +644,8 @@ code {
   font-size: 16px;
 }
 .component-example {
-  font-family: $font-family-default;
   font-size: $font-size-default;
+  font-family: $font-family-default;
   line-height: $line-height-default;
 }
 .component-example,
@@ -691,10 +691,10 @@ code {
   top: 45%;
   left: 0;
   width: 100%;
-  color: #fff;
   text-align: center;
   font-size: 24px;
   text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+  color: #fff;
 }
 .component-example-fullbleed,
 .highlight {
@@ -705,10 +705,10 @@ code {
   padding: 0;
 }
 .highlight pre {
-  margin-top: 15px;
   padding: 15px;
-  font-size: 13px;
+  margin-top: 15px;
   overflow-x: auto;
+  font-size: 13px;
   color: #777;
   background-color: #fafafa;
   border-top: 1px solid #ddd;
@@ -858,8 +858,8 @@ code {
 @media screen and (min-width: 768px) {
   .slider .slide {
     cursor: -webkit-grab;
-    cursor: -moz-grab;
-    cursor: grab;
+    cursor:    -moz-grab;
+    cursor:         grab;
   }
   .slider .slide img {
     width: 100%;
@@ -884,8 +884,8 @@ code {
 
 .device {
   display: none;
-  font-family: $font-family-default;
   font-size: $font-size-default;
+  font-family: $font-family-default;
   line-height: $line-height-default;
 }
 @media screen and (min-width: 768px) {

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);
 }

sass/mixins.scss

@@ -22,8 +22,8 @@
 @mixin clearfix() {
   &:before,
   &:after {
-    content: " "; // 1
     display: table; // 2
+    content: " "; // 1
   }
   &:after {
     clear: both;

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;

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,

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;
 }

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%));
   }

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;
 }
 

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

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
     }
   }
 }

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;
 }
 
 

sass/theme-android.scss

@@ -96,8 +96,8 @@ a {
   &:active,
   &.active {
     color: $text-color;
-    border: 0;
     background-color: $default-color;
+    border: 0;
     @include box-shadow(inset 0 -1px 0 rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.2));
   }
 }
@@ -109,8 +109,8 @@ a {
 // Primary button (Default color is blue)
 .btn-primary {
   color: #fff;
-  border: 0;
   background-color: $primary-color;
+  border: 0;
 
   &:active,
   &.active {
@@ -123,69 +123,69 @@ a {
 // Positive button (Default color is green)
 .btn-positive {
   color: #fff;
-  border: 0;
   background-color: $positive-color;
+  border: 0;
 
   &:active,
   &.active {
     color: #fff;
-    border: 0;
     background-color: darken($positive-color, 10%);
+    border: 0;
   }
 }
 
 // Negative button (Default color is red)
 .btn-negative {
   color: #fff;
-  border: 0;
   background-color: $negative-color;
+  border: 0;
 
   &:active,
   &.active {
     color: #fff;
-    border: 0;
     background-color: darken($negative-color, 10%);
+    border: 0;
   }
 }
 
 // Outlined buttons
 .btn-outlined {
-  border: 1px solid $default-color;
   background-color: transparent;
+  border: 1px solid $default-color;
   @include box-shadow(none);
 
 
   &.btn-primary {
-    border: 1px solid $primary-color;
     color: $primary-color;
+    border: 1px solid $primary-color;
 
     &:active {
-      border: 1px solid $primary-color;
       background-color: $primary-color;
+      border: 1px solid $primary-color;
     }
   }
   &.btn-positive {
-    border: 1px solid $positive-color;
     color: $positive-color;
+    border: 1px solid $positive-color;
 
     &:active {
-      border: 1px solid $positive-color;
       background-color: $positive-color;
+      border: 1px solid $positive-color;
     }
   }
   &.btn-negative {
-    border: 1px solid $negative-color;
     color: $negative-color;
+    border: 1px solid $negative-color;
 
     &:active {
-      border: 1px solid $negative-color;
       background-color: $negative-color;
+      border: 1px solid $negative-color;
     }
   }
   // Active states
   &:active {
-    border: 1px solid $default-color;
     background-color: $default-color;
+    border: 1px solid $default-color;
     @include box-shadow(none);
   }
   &.btn-primary:active,
@@ -262,8 +262,8 @@ a {
   .bar-footer,
   .bar-footer-secondary,
   .bar-footer-secondary-tab {
-    border-bottom: 0;
     border-top: $border-default;
+    border-bottom: 0;
     @include box-shadow(inset 0 -2px 0 $primary-color);
   }
 }
@@ -313,9 +313,9 @@ a {
   .btn-link {
     top: 0;
     padding: 0;
-    color: $primary-color;
     font-size: $font-size-default;
     line-height: 49px;
+    color: $primary-color;
 
     &:active,
     &.active {
@@ -415,9 +415,9 @@ a {
 // --------------------------------------------------
 
 .card {
+  background-color: transparent;
   border-color: #d9d9d9;
   border-radius: $border-radius;
-  background-color: transparent;
 }
 
 
@@ -450,9 +450,9 @@ a {
     font-size: 12px;
     font-weight: bold;
     text-transform: uppercase;
+    background-color: transparent;
     border-top: 0;
     border-bottom: 2px solid #a9a9a9;
-    background-color: transparent;
   }
 }
 
@@ -674,9 +674,9 @@ textarea,
 .toggle {
   width: 104px;
   height: 28px;
+  background-color: #d7d7d7;
   border: 2px solid #d7d7d7;
   border-radius: 0;
-  background-color: #d7d7d7;
 
   // Sliding handle
   .toggle-handle {
@@ -684,9 +684,9 @@ textarea,
     left: 0;
     width: 50px;
     height: 24px;
+    background-color: #bebebe;
     border: 1px solid #b5b5b5;
     border-radius: 2px;
-    background-color: #bebebe;
     @include box-shadow(inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.1));
   }
   &:before {
@@ -699,8 +699,8 @@ textarea,
 
   // Active state for toggle
   &.active {
-    border: 2px solid #d7d7d7;
     background-color: #d7d7d7;
+    border: 2px solid #d7d7d7;
 
     .toggle-handle {
       margin-right: 2px;
@@ -709,8 +709,8 @@ textarea,
       @include transform(translate3d(50px,0,0));
     }
     &:before {
-      left: auto;
       right: 14px;
+      left: auto;
       color: #fff;
     }
   }

sass/theme-ios.scss

@@ -66,9 +66,9 @@ p {
 // --------------------------------------------------
 
 .btn {
-  border: 1px solid $default-color;
   color: $default-color;
   background-color: $chrome-color;
+  border: 1px solid $default-color;
   @include transition(all);
   @include transition-duration(.2s);
   @include transition-timing-function(linear);
@@ -88,39 +88,39 @@ p {
 // 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 {
-    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 {
-    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 {
-    border: 1px solid darken($negative-color, 10%);
     background-color: darken($negative-color, 10%);
+    border: 1px solid darken($negative-color, 10%);
   }
 }
 
@@ -180,8 +180,8 @@ p {
 
 // Default bar
 .bar {
-  border-bottom: 0;
   background-color: $chrome-color;
+  border-bottom: 0;
   @include box-shadow(0 0 1px rgba(0,0,0,.85));
 
   // Modifier class to dock any bar below .bar-nav
@@ -497,10 +497,10 @@ textarea,
   border-bottom: 1px solid rgba(0,0,0,.15);
 }
 
-// Popovers with `table-views1
+// Popovers with `table-views`
 .popover .table-view {
-  border-radius: 12px;
   background-image: none;
+  border-radius: 12px;
 }
 
 
@@ -539,8 +539,8 @@ textarea,
   }
   // Active state for toggle
   &.active {
-    border: 2px solid $positive-color;
     background-color: transparent;
+    border: 2px solid $positive-color;
     @include box-shadow(inset 0 0 0 13px $positive-color);
 
     .toggle-handle {

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;