From fd91e53e684c7daa8cbd6092111825ea90a5a7a8 Mon Sep 17 00:00:00 2001
From: minusfive <mail@minusfive.com>
Date: Fri, 1 Sep 2017 18:59:50 -0400
Subject: [PATCH] Cleaned, de-duplicated/DRYed and organized discourse.css
 (common, mobile and desktop)

---
 .../stylesheets/common/base/discourse.scss    | 459 ++++++----
 app/assets/stylesheets/desktop/discourse.scss | 826 ++++++++++--------
 app/assets/stylesheets/mobile/discourse.scss  | 260 +++---
 3 files changed, 819 insertions(+), 726 deletions(-)

diff --git a/app/assets/stylesheets/common/base/discourse.scss b/app/assets/stylesheets/common/base/discourse.scss
index 02709d7da8e..2cca6788a5e 100644
--- a/app/assets/stylesheets/common/base/discourse.scss
+++ b/app/assets/stylesheets/common/base/discourse.scss
@@ -1,45 +1,39 @@
-img.avatar {
-  border-radius: 50%;
-}
+// Common
+// global styles that apply to the Discourse application specifically
+// BEWARE: changing these styles implies they take effect anywhere they are seen
+// throughout the Discourse application
 
-.container {
-  @extend .clearfix;
-}
-
-.wrap {
-  @extend .clearfix;
-  margin-right: auto;
-  margin-left: auto;
-  padding: 0 8px;
-  .contents {
-    position: relative;
+// Animation Keyframes
+@keyframes ping {
+  from {
+    transform: scale(0.25);
+    opacity: 1;
+  }
+  to {
+    transform: scale(2);
+    opacity: 0;
   }
 }
 
-.full-width {
-  margin-left: 12px;
+@keyframes rotate-forever {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
-big {
-  font-size: 28px;
-}
-
-small {
-  font-size: 9px;
-}
-
-//setting a static limit on big and small prevents nesting abuse
-
-
-blockquote {
-  @include post-aside;
-  clear: both;
-}
-
-a.no-href {
-  cursor: pointer;
+@keyframes background-fade-highlight {
+  0% {
+    background-color: $tertiary-low;
+  }
+  100% {
+    background-color: transparent;
+  }
 }
 
+// Base Elements
 html {
   height: 100%;
 }
@@ -52,56 +46,170 @@ body {
   @include clearfix;
 }
 
-h1, h2, h3, h4, h5, h6 {
+big {
+  font-size: 28px;
+}
+
+small {
+  font-size: 9px;
+}
+
+//setting a static limit on big and small prevents nesting abuse
+blockquote {
+  @include post-aside;
+  clear: both;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   margin-top: 0;
   margin-bottom: .5rem;
 }
 
-button.ok {
-  background: $success;
-  color: $secondary;
-  @include hover {
-    background: lighten($success, 10%);
+button {
+  &.ok {
+    background: $success;
     color: $secondary;
+
+    @include hover {
+      background: lighten($success, 10%);
+      color: $secondary;
+    }
+  }
+
+  &.cancel {
+    background: $danger;
+    color: $secondary;
+
+    @include hover {
+      background: lighten($danger, 10%);
+      color: $secondary;
+    }
   }
 }
 
-button.cancel {
-  background: $danger;
-  color: $secondary;
-  @include hover {
-    background: lighten($danger, 10%);
-    color: $secondary;
+ul.breadcrumb {
+  margin: 0 10px 0 10px;
+}
+
+a.no-href {
+  cursor: pointer;
+}
+
+img.avatar {
+  border-radius: 50%;
+}
+
+// don't wrap relative dates; we want Jul 26, '15, not: Jul
+//                                                      26,
+//                                                      '15
+span.relative-date {
+  white-space:nowrap;
+}
+
+label {
+  display: block;
+  margin-bottom: 5px;
+}
+
+input {
+  &[type="radio"],
+  &[type="checkbox"] {
+    margin: 3px 0;
+    line-height: normal;
+    cursor: pointer;
   }
+  &[type="submit"],
+  &[type="reset"],
+  &[type="button"],
+  &[type="radio"],
+  &[type="checkbox"] {
+    width: auto;
+  }
+
+  &.invalid {
+    background-color: dark-light-choose(scale-color($danger, $lightness: 80%), scale-color($danger, $lightness: -60%));
+  }
+
+  .radio &[type="radio"],
+  .checkbox &[type="checkbox"] {
+    float: left;
+    margin-left: -18px;
+  }
+}
+
+// Common Classes
+.radio,
+.checkbox {
+  min-height: 18px;
+  padding-left: 18px;
+
+  .controls > &:first-child {
+    padding-top: 5px;
+  }
+
+  &.inline {
+    display: inline-block;
+    padding-top: 5px;
+    margin-bottom: 0;
+    vertical-align: middle;
+  }
+}
+
+.radio.inline .radio.inline,
+.checkbox.inline .checkbox.inline {
+  margin-left: 10px;
+}
+
+.container {
+  @extend .clearfix;
+}
+
+.wrap {
+  @extend .clearfix;
+  margin-right: auto;
+  margin-left: auto;
+  padding: 0 8px;
+
+  .contents {
+    position: relative;
+  }
+}
+
+.boxed {
+  &.white {
+    background-color: $secondary;
+  }
+}
+
+.full-width {
+  margin-left: 12px;
 }
 
 // the default for table cells in topic list
 // is scale-color($primary, $lightness: 50%)
 // numbers get dimmer as they get colder
-.coldmap-high {
-  color: dark-light-choose(scale-color($primary, $lightness: 70%), scale-color($secondary, $lightness: 30%)) !important;
-}
-.coldmap-med {
-  color: dark-light-choose(scale-color($primary, $lightness: 60%), scale-color($secondary, $lightness: 40%)) !important;
-}
-.coldmap-low {
-  color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)) !important;
+.coldmap {
+  &-high {
+    color: dark-light-choose(scale-color($primary, $lightness: 70%), scale-color($secondary, $lightness: 30%)) !important;
+  }
+
+  &-med {
+    color: dark-light-choose(scale-color($primary, $lightness: 60%), scale-color($secondary, $lightness: 40%)) !important;
+  }
+
+  &-low {
+    color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)) !important;
+  }
 }
 
-#loading-message {
-  position: absolute;
-  font-size: 2.143em;
-  text-align: center;
-  top: 120px;
-  left: 500px;
-  color: $primary;
-}
-  .top-space {
+.top-space {
   margin-top: 10px;
 }
-ul.breadcrumb {
-  margin: 0 10px 0 10px;
-}
 
 .message {
   @include border-radius-all(8px);
@@ -113,18 +221,6 @@ ul.breadcrumb {
   }
 }
 
-#footer {
-  .container {
-    height: 50px;
-    .contents {
-      padding-top: 10px;
-      a[href] {
-        color: $secondary;
-      }
-    }
-  }
-}
-
 .clear-transitions {
   transition:none !important;
 }
@@ -139,10 +235,6 @@ ul.breadcrumb {
   }
 }
 
-input[type].invalid {
-  background-color: dark-light-choose(scale-color($danger, $lightness: 80%), scale-color($danger, $lightness: -60%));
-}
-
 .d-editor-input {
   resize: none;
 }
@@ -157,43 +249,6 @@ input[type].invalid {
   top: 60px !important;
 }
 
-label {
-  display: block;
-  margin-bottom: 5px;
-}
-input {
-  &[type="radio"], &[type="checkbox"] {
-    margin: 3px 0;
-    line-height: normal;
-    cursor: pointer;
-  }
-  &[type="submit"], &[type="reset"], &[type="button"], &[type="radio"], &[type="checkbox"] {
-    width: auto;
-  }
-}
-.radio, .checkbox {
-  min-height: 18px;
-  padding-left: 18px;
-}
-.radio input[type="radio"], .checkbox input[type="checkbox"] {
-  float: left;
-  margin-left: -18px;
-}
-.controls > {
-  .radio:first-child, .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;
-}
-
 .flex-center-align {
   display: flex;
   align-items: center;
@@ -202,7 +257,10 @@ input {
 .unread-private-messages {
   color: $secondary;
   background: $success;
-  &.badge-notification[href] {color: $secondary;}
+
+  &.badge-notification[href] {
+    color: $secondary;
+  }
 }
 
 .ring-backdrop-spotlight {
@@ -256,50 +314,12 @@ input {
   -webkit-animation-name: ping;
 }
 
-@-webkit-keyframes ping {
-  from {
-    $scale: 0.25;
-    transform: scale($scale);
-    -ms-transform: scale($scale);
-    -webkit-transform: scale($scale);
-    -o-transform: scale($scale);
-    -moz-transform: scale($scale);
-    opacity: 1;
-  }
-  to {
-    $scale: 2;
-    transform: scale($scale);
-    -ms-transform: scale($scale);
-    -webkit-transform: scale($scale);
-    -o-transform: scale($scale);
-    -moz-transform: scale($scale);
-    opacity: 0;
-  }
-}
-
 .fade {
   opacity: 0;
   transition: opacity 0.15s linear;
-}
 
-.fade.in {
-  opacity: 1;
-}
-
-@-webkit-keyframes rotate-forever {
-  0% {
-    -webkit-transform: rotate(0deg);
-  }
-  100% {
-    -webkit-transform: rotate(360deg);
-  }
-}
-@keyframes rotate-forever {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
+  &.in {
+    opacity: 1;
   }
 }
 
@@ -328,7 +348,6 @@ input {
 }
 
 .content-list {
-
   h3 {
     color: $primary-medium;
     font-size: 1.071em;
@@ -340,50 +359,106 @@ input {
     list-style: none;
     margin: 0;
 
-    li:first-of-type {
-      border-top: 1px solid $primary-low;
-    }
     li {
       border-bottom: 1px solid $primary-low;
-    }
 
-    li a {
-      display: block;
-      padding: 10px;
-      color: $primary;
-
-      &:hover {
-        background-color: $primary-low;
-        color: $primary;
+      &:first-of-type {
+        border-top: 1px solid $primary-low;
       }
 
-      &.active {
-        font-weight: bold;
+      a {
+        display: block;
+        padding: 10px;
         color: $primary;
+
+        &:hover {
+          background-color: $primary-low;
+          color: $primary;
+        }
+
+        &.active {
+          font-weight: bold;
+          color: $primary;
+        }
       }
     }
   }
 }
 
-// don't wrap relative dates, we want
-//
-// Jul 26, '15
-//
-// not
-//
-// Jul
-// 26,
-// '15
-//
-span.relative-date {
-  white-space:nowrap;
+.form-vertical {
+  input,
+  textarea,
+  select,
+  .input-prepend,
+  .input-append {
+    display: inline-block;
+    margin-bottom: 0;
+  }
+
+  .control-group {
+    @include clearfix;
+  }
+
+  .control-label {
+    font-weight: bold;
+    font-size: 1.2em;
+    line-height: 2;
+  }
+
+  .controls {
+    margin-left: 0;
+  }
 }
 
-@keyframes background-fade-highlight {
-  0% {
-    background-color: $tertiary-low;
+// Special elements
+// Special elements
+#main {
+  img.avatar {
+    &.header {
+      width: 45px;
+      height: 45px;
+    }
+
+    &.medium {
+      width: 32px;
+      height: 32px;
+    }
+
+    &.small {
+      width: 25px;
+      height: 25px;
+    }
+
+    &.tiny {
+      width: 20px;
+      height: 20px;
+    }
   }
-  100% {
-    background-color: transparent;
+
+  .user-list {
+    .user {
+      padding-bottom: 5px;
+    }
+  }
+}
+
+#loading-message {
+  position: absolute;
+  font-size: 2.143em;
+  text-align: center;
+  top: 120px;
+  left: 500px;
+  color: $primary;
+}
+
+#footer {
+  .container {
+    height: 50px;
+    .contents {
+      padding-top: 10px;
+      a[href] {
+        color: $secondary;
+      }
+    }
   }
 }
diff --git a/app/assets/stylesheets/desktop/discourse.scss b/app/assets/stylesheets/desktop/discourse.scss
index aa120ec8a95..268ee3beaeb 100644
--- a/app/assets/stylesheets/desktop/discourse.scss
+++ b/app/assets/stylesheets/desktop/discourse.scss
@@ -1,96 +1,43 @@
+// Desktop
 // global styles that apply to the Discourse application specifically
 // BEWARE: changing these styles implies they take effect anywhere they are seen
 // throughout the Discourse application
 
-@media all
-and (max-width : 570px) {
-  body {
-    min-width: 0;
-  }
-  .wrap,
-  .full-width {
-    min-width: 0;
-  }
+// Base Elements
+body.widget-dragging {
+  cursor: ns-resize;
 }
 
 header {
   margin-bottom: 15px;
 }
 
-body.widget-dragging {
-  cursor: ns-resize;
+// Common classes
+.boxed {
+  height: 100%;
 }
 
-body {
+.grippie {
+  cursor: row-resize;
+  padding: 4px 0px;
 
-  .boxed {
-    height: 100%;
-    &.white {
-      background-color: $secondary;
-    }
-  }
-  #main {
-    a.star {
-      color: $secondary-medium;
-      &:before {
-        font-family: "FontAwesome";
-        content: "\f005";
-      }
-      @include hover {
-        opacity: 0.6;
-      }
-
-      &:active {
-        opacity: 1;
-      }
-    }
-    img.avatar {
-      &.header {
-        width: 45px;
-        height: 45px;
-      }
-      &.medium {
-        width: 32px;
-        height: 32px;
-      }
-      &.small {
-        width: 25px;
-        height: 25px;
-      }
-      &.tiny {
-        width: 20px;
-        height: 20px;
-      }
-    }
-    .user-list {
-      .user {
-        padding-bottom: 5px;
-      }
-    }
-  }
-
-  $grippie-border-color: dark-light-choose(scale-color($primary, $lightness: 70%), scale-color($secondary, $lightness: 50%));
-
-  .grippie {
-    cursor: row-resize;
-    padding: 4px 0px;
-  }
-
-  .grippie:before {
+  &:before {
     content: '';
     display: block;
     width: 27px;
     margin: auto;
-    border-top: 3px double $grippie-border-color;
+    border-top: 3px double dark-light-choose(scale-color($primary, $lightness: 70%), scale-color($secondary, $lightness: 50%));
   }
 }
 
 .topic-statuses {
   float: left;
   padding: 0;
+
   .topic-status {
     padding: 0 2px 0 0;
     margin: 0;
+
     i {
         font-size: 1.071em;
       }
@@ -101,406 +48,515 @@ body {
   }
 }
 
-body {
-  .form-vertical input, .form-vertical textarea, .form-vertical select,  .form-vertical .input-prepend, .form-vertical .input-append {
-    display: inline-block;
-    margin-bottom: 0;
-  }
 
-  .form-vertical {
-    .control-group {
-      margin-bottom: 24px;
-      &:before {
-        display: table;
-        content: "";
-      }
-      &:after {
-        display: table;
-        content: "";
-        clear: both;
-      }
-    }
-    .control-label {
-      font-weight: bold;
-      font-size: 1.2em;
-      line-height: 2;
-    }
-    .controls {
-      margin-left: 0;
-    }
+.form-vertical {
+  .control-group {
+    margin-bottom: 24px;
   }
 }
 
+
+/***********************/
 /* bootstrap carryover */
+/***********************/
+code,
+pre {
+  font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace;
+}
 
+/* page not found styles */
+h1.page-not-found {
+  line-height: 30px;
+}
 
-body {
+.page-not-found {
+  margin: 20px 0 40px 0;
 
-  input, textarea, select {
-    color: $primary;
-  }
-
-  code, pre {
-    font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace;
-  }
-
-  /* page not found styles */
-  h1.page-not-found {
-    line-height: 30px;
-  }
-
-  .page-not-found {
-    margin: 20px 0 40px 0;
-  }
-
-  .page-not-found-search {
+  &-search {
     margin-top: 20px;
   }
 
-  .popular-topics-title, .recent-topics-title {
-    margin-bottom: 10px;
-  }
-
-  .not-found-topic {
-    > a { margin-right: 10px; line-height: 2;}
-  }
-
-  .page-not-found-topics .span8 {
+  &-topics .span8 {
     line-height: 1.5em;
     margin-right: 20px;
   }
+}
 
-  // this removes the unwanted top margin on a paragraph under a heading
-  h1+p, h2+p, h3+p, h4+p, h5+p, h6+p {
+.popular-topics-title,
+.recent-topics-title {
+  margin-bottom: 10px;
+}
+
+.not-found-topic {
+  > a {
+    margin-right: 10px;
+    line-height: 2;
+  }
+}
+
+// this removes the unwanted top margin on a paragraph under a heading
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  + p {
     margin-top:0px;
   }
+}
 
+form {
+  margin: 0 0 18px;
+}
 
-  form {
-    margin: 0 0 18px;
+label,
+input,
+button,
+select,
+textarea {
+  font-size: 0.929em;
+  font-weight: normal;
+  line-height: 18px;
+}
+
+input,
+button,
+select,
+textarea {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+input,
+select,
+textarea {
+  color: $primary;
+
+  &[class*="span"] {
+    float: none;
+    margin-left: 0;
   }
-  label, input, button, select, textarea {
-    font-size: 0.929em;
-    font-weight: normal;
-    line-height: 18px;
+
+  &[disabled],
+  &[readonly] {
+    cursor: not-allowed;
+    background-color: $primary-low;
+    border-color: $primary-low;
   }
-  input, button, select, textarea {
-    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+
+  &:focus:required:invalid {
+    color: $danger;
+    border-color: $danger;
   }
-  select, textarea {
+
+  &:focus:required:invalid:focus {
+    border-color: $danger;
+    box-shadow: 0 0 6px $danger;
+  }
+}
+
+select,
+textarea {
+  display: inline-block;
+  padding: 4px;
+  margin-bottom: 9px;
+  font-size: 0.929em;
+  line-height: 18px;
+  color: $primary;
+}
+
+input {
+  width: 210px;
+
+  &[type="text"],
+  &[type="password"],
+  &[type="datetime"],
+  &[type="datetime-local"],
+  &[type="date"],
+  &[type="month"],
+  &[type="time"],
+  &[type="week"],
+  &[type="number"],
+  &[type="email"],
+  &[type="url"],
+  &[type="search"],
+  &[type="tel"],
+  &[type="color"] {
     display: inline-block;
+    height: 18px;
     padding: 4px;
     margin-bottom: 9px;
     font-size: 0.929em;
     line-height: 18px;
     color: $primary;
-  }
-  input {
-    &[type="text"], &[type="password"], &[type="datetime"], &[type="datetime-local"], &[type="date"], &[type="month"], &[type="time"], &[type="week"], &[type="number"], &[type="email"], &[type="url"], &[type="search"], &[type="tel"], &[type="color"] {
-      display: inline-block;
-      height: 18px;
-      padding: 4px;
-      margin-bottom: 9px;
-      font-size: 0.929em;
-      line-height: 18px;
-      color: $primary;
-    }
-  }
-  input {
-    width: 210px;
-  }
-  textarea {
-    width: 210px;
-    height: auto;
-    background-color:$secondary;
-    border: 1px solid $primary-low; 
+    background-color: $secondary;
+    border: 1px solid $primary-low;
     border-radius: 3px;
     box-shadow: inset 0 1px 1px rgba(0,0,0, .3);
-  }
-  input {
-    &[type="text"], &[type="password"], &[type="datetime"], &[type="datetime-local"], &[type="date"], &[type="month"], &[type="time"], &[type="week"], &[type="number"], &[type="email"], &[type="url"], &[type="search"], &[type="tel"], &[type="color"] {
-      background-color: $secondary;
-      border: 1px solid $primary-low; 
-      border-radius: 3px;
-      box-shadow: inset 0 1px 1px rgba(0,0,0, .3);
-    }
-  }
-  textarea:focus {
-    border-color: $tertiary;
-    outline: 0;
-    box-shadow: inset 0 1px 1px rgba(0,0,0, .3), 0 0 8px $tertiary;
-  }
-  input {
-    &[type="text"]:focus, &[type="password"]:focus, &[type="datetime"]:focus, &[type="datetime-local"]:focus, &[type="date"]:focus, &[type="month"]:focus, &[type="time"]:focus, &[type="week"]:focus, &[type="number"]:focus, &[type="email"]:focus, &[type="url"]:focus, &[type="search"]:focus, &[type="tel"]:focus, &[type="color"]:focus {
+
+    &:focus {
       border-color: $tertiary;
       outline: 0;
       box-shadow: inset 0 1px 1px rgba(0,0,0, .3), 0 0 8px $tertiary;
     }
   }
+}
 
-  select, input[type="file"] {
-    line-height: 28px;
-  }
+textarea {
+  width: 210px;
+  height: auto;
+  background-color:$secondary;
+  border: 1px solid $primary-low;
+  border-radius: 3px;
+  box-shadow: inset 0 1px 1px rgba(0,0,0, .3);
 
-  select {
-    width: 220px;
-    border: 1px solid $primary-low; 
-    &[multiple], &[size] {
-      height: auto;
-    }
+  &:focus {
+    border-color: $tertiary;
+    outline: 0;
+    box-shadow: inset 0 1px 1px rgba(0,0,0, .3), 0 0 8px $tertiary;
   }
+}
 
-  .input-xxlarge {
-    width: 530px;
+select,
+input[type="file"] {
+  line-height: 28px;
+}
+
+select {
+  width: 220px;
+  border: 1px solid $primary-low;
+
+  &[multiple],
+  &[size] {
+    height: auto;
   }
-  input[class*="span"], select[class*="span"], textarea[class*="span"] {
-    float: none;
-    margin-left: 0;
-  }
-  .input-append {
-    input[class*="span"] {
-      display: inline-block;
-    }
-  }
-  .input-prepend {
-    input[class*="span"] {
-      display: inline-block;
-    }
-  }
-  input, textarea {
-    margin-left: 0;
-  }
-  input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] {
-    cursor: not-allowed;
-    background-color: $primary-low; 
-    border-color: $primary-low; 
-  }
-  input {
-    &[type="radio"][disabled], &[type="checkbox"][disabled], &[type="radio"][readonly], &[type="checkbox"][readonly] {
+}
+
+input,
+textarea {
+  margin-left: 0;
+}
+
+input {
+  &[type="radio"],
+  &[type="checkbox"] {
+    &[disabled],
+    &[readonly] {
       background-color: transparent;
     }
   }
-  .controls-dropdown {
-    margin-bottom: 10px;
+}
+
+.input {
+  &-xxlarge {
+    width: 530px;
   }
-  .control-group {
-    margin-bottom: 9px;
-    &.warning {
-      > label {
-        color: $danger;
+
+  &-prepend,
+  &-append {
+    margin-bottom: 5px;
+
+    input[class*="span"] {
+      display: inline-block;
+    }
+
+    input,
+    select {
+      position: relative;
+      margin-bottom: 0;
+      vertical-align: middle;
+      border-radius: 0 3px 3px 0;
+
+      &:focus {
+        z-index: 2;
       }
-      .checkbox, .radio, input, select, textarea {
-        color: $danger;
-        border-color: $danger;
+    }
+
+    .add-on {
+      display: inline-block;
+      width: auto;
+      height: 18px;
+      min-width: 16px;
+      padding: 4px 5px;
+      font-weight: normal;
+      line-height: 18px;
+      text-align: center;
+      vertical-align: middle;
+      background-color: $secondary;
+      border: 1px solid $primary-low;
+    }
+
+    .add-on,
+    .btn {
+      margin-left: -1px;
+      border-radius: 0;
+    }
+
+    .active {
+      background-color: scale-color($danger, $lightness: 30%);
+      border-color: $danger;
+    }
+  }
+
+  &-prepend {
+    .add-on,
+    .btn {
+      margin-right: -1px;
+
+      &:first-child {
+        border-radius: 3px 0 0 3px;
       }
-      .checkbox:focus, .radio:focus, input:focus, select:focus, textarea:focus {
+    }
+  }
+
+  &-append {
+    input,
+    select {
+      border-radius: 3px 0 0 3px;
+    }
+
+    .add-on,
+    .btn {
+      &:last-child {
+        border-radius: 0 3px 3px 0;
+      }
+    }
+  }
+}
+
+.input-prepend.input-append {
+  input,
+  select {
+    border-radius: 0;
+  }
+
+  .add-on,
+  .btn {
+    &:first-child {
+      margin-right: -1px;
+      border-radius: 3px 0 0 3px;
+    }
+  }
+
+  .add-on,
+  .btn {
+    &:last-child {
+      margin-left: -1px;
+      border-radius: 0 3px 3px 0;
+    }
+  }
+}
+
+.controls-dropdown {
+  margin-bottom: 10px;
+}
+
+.control-group {
+  margin-bottom: 9px;
+
+  &.warning,
+  &.error {
+    > label {
+      color: $danger;
+    }
+
+    .checkbox,
+    .radio,
+    input,
+    select,
+    textarea {
+      color: $danger;
+      border-color: $danger;
+
+      &:focus {
         border-color: scale-color($danger, $lightness: -30%);
         box-shadow: 0 0 6px $danger;
       }
-      .input-prepend .add-on, .input-append .add-on {
+    }
+
+  }
+
+  &.warning {
+    .input-prepend,
+    .input-append {
+      .add-on {
         color: $danger;
         background-color: $danger;
         border-color: $danger;
       }
     }
-    &.error {
-      > label {
-        color: $danger;
-      }
-      .checkbox, .radio, input, select, textarea {
-        color: $danger;
-        border-color: $danger;
-      }
-      .checkbox:focus, .radio:focus, input:focus, select:focus, textarea:focus {
-        border-color: scale-color($danger, $lightness: -30%);
-        box-shadow: 0 0 6px $danger;
-      }
-      .input-prepend .add-on, .input-append .add-on {
+  }
+
+  &.error {
+    .input-prepend,
+    .input-append {
+      .add-on {
         color: $danger;
         background-color: scale-color($danger, $lightness: 30%);
         border-color: scale-color($danger, $lightness: -20%);
       }
     }
-    &.success {
-      > label {
-        color: $success;
-      }
-      .checkbox, .radio, input, select, textarea {
-        color: $success;
-        border-color: $success;
-      }
-      .checkbox:focus, .radio:focus, input:focus, select:focus, textarea:focus {
+  }
+
+  &.success {
+    > label {
+      color: $success;
+    }
+
+    .checkbox,
+    .radio,
+    input,
+    select,
+    textarea {
+      color: $success;
+      border-color: $success;
+
+      &:focus {
         border-color: $success;
         box-shadow: 0 0 6px $success;
       }
-      .input-prepend .add-on, .input-append .add-on {
+    }
+
+    .input-prepend,
+    .input-append {
+      .add-on {
         color: $success;
         background-color:  scale-color($success, $lightness: 90%);
         border-color: $success;
       }
     }
   }
-  input:focus:required:invalid, textarea:focus:required:invalid, select:focus:required:invalid {
-    color: $danger;
-    border-color: $danger;
-  }
-  input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, select:focus:required:invalid:focus {
-    border-color: $danger;
-    box-shadow: 0 0 6px $danger;
-  }
+}
 
-  .input-prepend, .input-append {
-    margin-bottom: 5px;
-  }
-  .input-prepend input, .input-append input, .input-prepend select, .input-append select {
-    position: relative;
-    margin-bottom: 0;
-    vertical-align: middle;
-    border-radius: 0 3px 3px 0;
-  }
-  .input-prepend input:focus, .input-append input:focus, .input-prepend select:focus, .input-append select:focus {
-    z-index: 2;
-  }
-  .input-prepend .add-on, .input-append .add-on {
-    display: inline-block;
-    width: auto;
-    height: 18px;
-    min-width: 16px;
-    padding: 4px 5px;
-    font-weight: normal;
-    line-height: 18px;
-    text-align: center;
-    vertical-align: middle;
-    background-color: $secondary;
-    border: 1px solid $primary-low; 
-  }
-  .input-prepend .add-on, .input-append .add-on, .input-prepend .btn, .input-append .btn {
-    margin-left: -1px;
-    border-radius: 0;
-  }
-  .input-prepend .active, .input-append .active {
-    background-color: scale-color($danger, $lightness: 30%);
-    border-color: $danger;
-  }
-  .input-prepend {
-    .add-on, .btn {
-      margin-right: -1px;
-    }
-    .add-on:first-child, .btn:first-child {
-      border-radius: 3px 0 0 3px;
-    }
-  }
-  .input-append {
-    input, select {
-      border-radius: 3px 0 0 3px;
-    }
-    .add-on:last-child, .btn:last-child {
-      border-radius: 0 3px 3px 0;
-    }
-  }
-  .input-prepend.input-append {
-    input, select {
-      border-radius: 0;
-    }
-    .add-on:first-child, .btn:first-child {
-      margin-right: -1px;
-      border-radius: 3px 0 0 3px;
-    }
-    .add-on:last-child, .btn:last-child {
-      margin-left: -1px;
-      border-radius: 0 3px 3px 0;
-    }
-  }
-
-  .form-horizontal input, .form-horizontal textarea, .form-horizontal select,  .form-horizontal .input-prepend, .form-horizontal .input-append {
-    display: inline-block;
-    margin-bottom: 0;
-  }
-  .form-horizontal .hide {
+.form-horizontal {
+  .hide {
     display: none;
   }
 
-  .form-horizontal {
-    .control-group {
-      margin-bottom: 18px;
-      &:before {
-        display: table;
-        content: "";
-      }
-      &:after {
-        display: table;
-        content: "";
-        clear: both;
-      }
-    }
-    .control-indent {
-      margin-left: 20px;
-      margin-bottom: 10px;
-    }
-    .control-label {
-      float: left;
-      width: 140px;
-      text-align: right;
-      font-weight: bold;
-    }
-    .controls {
-      margin-left: 160px;
-    }
+  input,
+  textarea,
+  select,
+  .input-prepend,
+  .input-append {
+    display: inline-block;
+    margin-bottom: 0;
   }
 
-  .bootbox.modal {
-    .modal-footer {
-      a.btn-primary {
-        color: $secondary;
-      }
+  .control-group {
+    @include clearfix;
+    margin-bottom: 18px;
+  }
+
+  .control-indent {
+    margin-left: 20px;
+    margin-bottom: 10px;
+  }
+
+  .control-label {
+    float: left;
+    width: 140px;
+    text-align: right;
+    font-weight: bold;
+  }
+
+  .controls {
+    margin-left: 160px;
+  }
+}
+
+.bootbox.modal {
+  .modal-footer {
+    a.btn-primary {
+      color: $secondary;
     }
   }
 }
 
 /* bootstrap columns */
-
-.row:before,
-.row:after {
-  display: table;
-  content: "";
-}
-.row:after {
-  clear: both;
+.row {
+  @include clearfix;
 }
 
-.span24 {
-  width: 1236px;
-  float: left;
+.span {
+  &4 {
+    width: 196px;
+    margin-right: 12px;
+    float: left;
+  }
+
+  &6 {
+    width: 27.027%;
+    float: left;
+  }
+
+  &8 {
+    width: 404px;
+    float: left;
+  }
+
+  &10 {
+    width: 508px;
+    float: left;
+  }
+
+  &13 {
+    width: 59.8198%;
+    float: left;
+  }
+
+  &15 {
+    /* intentionally no width set here, do not add one */
+    margin-left: 12px;
+    float: left;
+  }
+
+  &24 {
+    width: 1236px;
+    float: left;
+    color: amarillo;
+  }
 }
-.span15 {
-  /* intentionally no width set here, do not add one */
-  margin-left: 12px;
-  float: left;
+
+.offset {
+  &2 {
+    margin-left: 116px;
+  }
+
+  &1 {
+    margin-left: 64px;
+  }
 }
-.span13 {
-  width: 59.8198%;
-  float: left;
+
+// Special elements
+#main {
+  a.star {
+    color: $secondary-medium;
+
+    &:before {
+      font-family: "FontAwesome";
+      content: "\f005";
+    }
+
+    @include hover {
+      opacity: 0.6;
+    }
+
+    &:active {
+      opacity: 1;
+    }
+  }
 }
-.span10 {
-  width: 508px;
-  float: left;
-}
-.span8 {
-  width: 404px;
-  float: left;
-}
-.span6 {
-  width: 27.027%;
-  float: left;
-}
-.span4 {
-  width: 196px;
-  margin-right: 12px;
-  float: left;
-}
-.offset2 {
-  margin-left: 116px;
-}
-.offset1 {
-  margin-left: 64px;
+
+// Media Queries
+@media all
+and (max-width : 570px) {
+
+  body {
+    min-width: 0;
+  }
+
+  .wrap,
+  .full-width {
+    min-width: 0;
+  }
 }
diff --git a/app/assets/stylesheets/mobile/discourse.scss b/app/assets/stylesheets/mobile/discourse.scss
index b4337cfe676..fce24121a20 100644
--- a/app/assets/stylesheets/mobile/discourse.scss
+++ b/app/assets/stylesheets/mobile/discourse.scss
@@ -1,98 +1,75 @@
+// Mobile
 // global styles that apply to the Discourse application specifically
 // BEWARE: changing these styles implies they take effect anywhere they are seen
 // throughout the Discourse application
 
+// Base Elements
 body {
   background-color: $secondary;
-  textarea {
-    background-color:$secondary;
-  }
 }
 
-// This sets the space between the application content and the edge of the
-// screen. This value is required in 'mobile/header.scss' to set the position
-// of the drop-down menu.
-$mobile-wrapper-padding: 10px;
-.wrap {
-  padding: 0 $mobile-wrapper-padding;
-}
-
-body {
-
-  .boxed {
-    .contents {
-      padding: 10px 0 0 0;
-    }
-    &.white {
-      background-color: $secondary;
-    }
-  }
-  #main {
-    position: relative;
-    img.avatar {
-      &.header {
-        width: 45px;
-        height: 45px;
-      }
-      &.medium {
-        width: 32px;
-        height: 32px;
-      }
-      &.small {
-        width: 25px;
-        height: 25px;
-      }
-      &.tiny {
-        width: 20px;
-        height: 20px;
-      }
-    }
-    .user-list {
-      .user {
-        padding-bottom: 5px;
-      }
-    }
-  }
-  .control-group {
-    margin-bottom: 9px;
-  }
+textarea {
+  background-color:$secondary;
 }
 
 blockquote {
   /* 13px left is intentional here to properly align with post quotes */
   padding: 10px 8px 10px 13px;
+
   p {
     margin: 0 0 10px 0;
+
+    &:last-of-type {
+      margin-bottom:0;
+    }
   }
-  p:last-of-type {
-    margin-bottom:0;
+
+}
+
+h1.page-not-found {
+  line-height: 24px;
+  margin: 5px 0 -5px 0;
+}
+
+h2 {
+  &.popular-topics-title {
+    margin-bottom: 6px;
+    font-size: 1.2em;
   }
+
+  &.recent-topics-title {
+    margin-bottom: 6px;
+    font-size: 1.2em;
+  }
+}
+
+// Common classes
+.wrap {
+  padding: 0 10px;
+}
+
+.boxed {
+  .contents {
+    padding: 10px 0 0 0;
+  }
+}
+
+.control-group {
+  margin-bottom: 9px;
 }
 
 .topic-statuses {
   display: inline-block;
+
   .topic-status {
     i {
       color: $secondary-medium;
     }
   }
-}
-.topic-statuses:empty {
-  display: none;
-}
 
-// Styles used before the user is logged into discourse. For example, activating their
-// account or changing their email.
-
-#simple-container {
-  width: 90%;
-}
-
-// somehow the image logo assumption inherits margins from earlier in the CSS stack
-// we must remove margins for text site titles
-h2#site-text-logo
-{
-  margin: 0 0 0 10px;
+  &:empty {
+    display: none;
+  }
 }
 
 // categories should not be bold on mobile; they fight with the topic title too much
@@ -101,22 +78,6 @@ h2#site-text-logo
 }
 
 .mobile-view .mobile-nav {
-  &.messages-nav, &.notifications-nav, &.activity-nav, &.preferences-nav {
-    position: absolute;
-    right: 0px;
-    top: -55px;
-  }
-}
-
-
-.mobile-view .mobile-nav {
-  a .fa {
-    margin-right: 8px;
-    color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%));
-  }
-  a {
-    color: $primary;
-  }
   margin: 0;
   padding: 0;
   background: $primary-low;
@@ -125,6 +86,24 @@ h2#site-text-logo
   position: relative;
   width: 45%;
 
+  &.messages-nav,
+  &.notifications-nav,
+  &.activity-nav,
+  &.preferences-nav {
+    position: absolute;
+    right: 0px;
+    top: -55px;
+  }
+
+  a {
+    color: $primary;
+
+    .fa {
+      margin-right: 8px;
+      color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%));
+    }
+  }
+
   > li > a {
     padding: 8px 10px;
     height: 100%;
@@ -132,6 +111,7 @@ h2#site-text-logo
     box-sizing: border-box;
     display: block;
   }
+
   .d-icon-caret-down {
     position: absolute;
     right: 0px;
@@ -139,81 +119,63 @@ h2#site-text-logo
 
   .drop {
     display: none;
-  }
-  .drop.expanded {
-    left: 0;
-    display: block;
-    position: absolute;
-    z-index: 10000000;
-    background-color: $secondary;
-    width: 100%;
-    list-style: none;
-    margin: 0;
-    padding: 5px;
-    border: 1px solid #eaeaea;
-    box-sizing: border-box;
-    li {
-      margin: 5px 0;
-      padding: 0;
-      a {
-        height: 100%;
-        display: block;
-        padding: 5px 8px;
+    &.expanded {
+      left: 0;
+      display: block;
+      position: absolute;
+      z-index: 10000000;
+      background-color: $secondary;
+      width: 100%;
+      list-style: none;
+      margin: 0;
+      padding: 5px;
+      border: 1px solid #eaeaea;
+      box-sizing: border-box;
+
+      li {
+        margin: 5px 0;
+        padding: 0;
+
+        a {
+          height: 100%;
+          display: block;
+          padding: 5px 8px;
+        }
       }
     }
   }
 }
 
 /* page not found styles */
-h1.page-not-found {
-  line-height: 24px;
-  margin: 5px 0 -5px 0;
+.page-not-found {
+  &-topics a.badge-wrapper {
+    margin-left: 8px;
+  }
+
+  &-search h2 {
+    font-size: 1.2em;
+  }
 }
 
-.page-not-found-topics a.badge-wrapper {
-  margin-left: 8px;
-}
-
-h2.popular-topics-title {
-  margin-bottom: 6px;
-  font-size: 1.2em;
-}
-
-h2.recent-topics-title {
-  margin-bottom: 6px;
-  font-size: 1.2em;
-}
-
-.page-not-found-search h2 {
-  font-size: 1.2em;
-}
-
-
-
 .form-vertical {
-  input, textarea, select, .input-prepend, .input-append {
-    display: inline-block;
-    margin-bottom: 0;
-  }
-
   .control-group {
     margin-bottom: 12px;
-    &:before {
-      display: table;
-      content: "";
-    }
-    &:after {
-      display: table;
-      content: "";
-      clear: both;
-    }
-  }
-  .control-label {
-    font-weight: bold;
-    font-size: 1.2em;
-    line-height: 2;
-  }
-  .controls {
-    margin-left: 0;
   }
 }
+
+// Special elements
+#main {
+  position: relative;
+}
+
+// Styles used before the user is logged into discourse. For example, activating
+// their account or changing their email.
+#simple-container {
+  width: 90%;
+}
+
+// somehow the image logo assumption inherits margins from earlier in the CSS
+// stack we must remove margins for text site titles
+h2#site-text-logo {
+  margin: 0 0 0 10px;
+}