From bd2e82c28b53d99d199621e1307aeaec0b639071 Mon Sep 17 00:00:00 2001
From: Reda Lemeden <reda@thoughtbot.com>
Date: Wed, 25 Jan 2012 14:09:38 -0500
Subject: [PATCH] Styled the question order sort

---
 sass/_askbot-original.scss | 258 ++++++++++++++++++-------------------
 sass/_discussion.scss      |  28 +++-
 2 files changed, 155 insertions(+), 131 deletions(-)

diff --git a/sass/_askbot-original.scss b/sass/_askbot-original.scss
index c13d2c7c37..34a157ef27 100644
--- a/sass/_askbot-original.scss
+++ b/sass/_askbot-original.scss
@@ -100,19 +100,19 @@
 //   .clearfix, .paginator {
 //     min-height: 1%; } }
 
-.clearfix:after, .paginator:after {
-  clear: both;
-  content: ".";
-  display: block;
-  height: 0;
-  visibility: hidden; }
+// .clearfix:after, .paginator:after {
+//   clear: both;
+//   content: ".";
+//   display: block;
+//   height: 0;
+//   visibility: hidden; }
 
 .badges a {
   color: #763333;
   text-decoration: underline; }
 
-a:hover {
-  text-decoration: underline; }
+// a:hover {
+//   text-decoration: underline; }
 
 .badge-context-toggle.active {
   cursor: pointer;
@@ -125,18 +125,18 @@ a:hover {
 body.user-messages {
   margin-top: 2.4em; }
 
-.left {
-  float: left; }
+// .left {
+//   float: left; }
 
-.right {
-  float: right; }
+// .right {
+//   float: right; }
 
-.clean {
-  clear: both; }
+// .clean {
+//   clear: both; }
 
-.center {
-  margin: 0 auto;
-  padding: 0; }
+// .center {
+//   margin: 0 auto;
+//   padding: 0; }
 
 .notify {
   position: fixed;
@@ -241,50 +241,50 @@ body.user-messages {
   #navBadges {
     background: -210px -5px url(../images/sprites.png) no-repeat; } }
 
-#header {
-  &.with-logo #userToolsNav {
-    position: absolute;
-    bottom: 0;
-    right: 0px; }
-  &.without-logo {
-    #userToolsNav {
-      float: left;
-      margin-top: 7px; }
-    #metaNav {
-      margin-bottom: 7px; } } }
+// #header {
+//   &.with-logo #userToolsNav {
+//     position: absolute;
+//     bottom: 0;
+//     right: 0px; }
+//   &.without-logo {
+//     #userToolsNav {
+//       float: left;
+//       margin-top: 7px; }
+//     #metaNav {
+//       margin-bottom: 7px; } } }
 
-/*#secondaryHeader {
-  height: 55px;
-  background: #e9e9e1;
-  border-bottom: #d3d3c2 1px solid;
-  border-top: #fcfcfc 1px solid;
-  margin-bottom: 10px;
-  font-family: 'Yanone Kaffeesatz',sans-serif;
-  #homeButton {
-    border-right: #afaf9e 1px solid;
-    background: -6px -36px url(../images/sprites.png) no-repeat;
-    height: 55px;
-    width: 43px;
-    display: block;
-    float: left;
-    &:hover {
-      background: -51px -36px url(../images/sprites.png) no-repeat; } }
-  #scopeWrapper {
-    width: 688px;
-    float: left;
-    a {
-      display: block;
-      float: left; }
-    .scope-selector {
-      font-size: 21px;
-      color: #5a5a4b;
-      height: 55px;
-      line-height: 55px;
-      margin-left: 24px; }
-    .on {
-      background: url(../images/scopearrow.png) no-repeat center bottom; }
-    .ask-message {
-      font-size: 24px; } } }*/
+// #secondaryHeader {
+//   height: 55px;
+//   background: #e9e9e1;
+//   border-bottom: #d3d3c2 1px solid;
+//   border-top: #fcfcfc 1px solid;
+//   margin-bottom: 10px;
+//   font-family: 'Yanone Kaffeesatz',sans-serif;
+//   #homeButton {
+//     border-right: #afaf9e 1px solid;
+//     background: -6px -36px url(../images/sprites.png) no-repeat;
+//     height: 55px;
+//     width: 43px;
+//     display: block;
+//     float: left;
+//     &:hover {
+//       background: -51px -36px url(../images/sprites.png) no-repeat; } }
+//   #scopeWrapper {
+//     width: 688px;
+//     float: left;
+//     a {
+//       display: block;
+//       float: left; }
+//     .scope-selector {
+//       font-size: 21px;
+//       color: #5a5a4b;
+//       height: 55px;
+//       line-height: 55px;
+//       margin-left: 24px; }
+//     .on {
+//       background: url(../images/scopearrow.png) no-repeat center bottom; }
+//     .ask-message {
+//       font-size: 24px; } } }
 
 #searchBar {
   display: inline-block;
@@ -560,85 +560,85 @@ body.anon #searchBar {
   a {
     font-size: 16px; } }
 
-.tabBar {
-  background-color: #eff5f6;
-  height: 30px;
-  margin-bottom: 3px;
-  margin-top: 3px;
-  float: right;
-  font-family: Georgia,serif;
-  font-size: 16px;
-  border-radius: 5px;
-  -ms-border-radius: 5px;
-  -moz-border-radius: 5px;
-  -webkit-border-radius: 5px;
-  -khtml-border-radius: 5px;
-  h2 {
-    float: left; } }
+// .tabBar {
+  // background-color: #eff5f6;
+  // height: 30px;
+  // margin-bottom: 3px;
+  // margin-top: 3px;
+  // float: right;
+  // font-family: Georgia,serif;
+  // font-size: 16px;
+  // border-radius: 5px;
+  // -ms-border-radius: 5px;
+  // -moz-border-radius: 5px;
+  // -webkit-border-radius: 5px;
+  // -khtml-border-radius: 5px;
+  // h2 {
+  //   float: left; } }
 
-.tabsA, .tabsC {
-  float: right;
-  position: relative;
-  display: block;
-  height: 20px; }
+// .tabsA, .tabsC {
+  // float: right;
+  // position: relative;
+  // display: block;
+  // height: 20px; }
 
-.tabsA {
-  float: right; }
+// .tabsA {
+  // float: right; }
 
-.tabsC {
-  float: left; }
+// .tabsC {
+  // float: left; }
 
-.tabsA a, .tabsC a {
-  border-left: 1px solid #d0e1e4;
-  color: #7ea9b3;
-  display: block;
-  float: left;
-  height: 20px;
-  line-height: 20px;
-  padding: 4px 7px 4px 7px;
-  text-decoration: none; }
+// .tabsA a, .tabsC a {
+  // border-left: 1px solid #d0e1e4;
+  // color: #7ea9b3;
+  // display: block;
+  // float: left;
+  // height: 20px;
+  // line-height: 20px;
+  // padding: 4px 7px 4px 7px;
+  // text-decoration: none; }
 
-.tabsA a.on, .tabsC a.on, .tabsA a:hover, .tabsC a:hover {
-  color: #4a757f; }
+// .tabsA a.on, .tabsC a.on, .tabsA a:hover, .tabsC a:hover {
+  // color: #4a757f; }
 
-.tabsA .label, .tabsC .label {
-  float: left;
-  color: #646464;
-  margin-top: 4px;
-  margin-right: 5px; }
+// .tabsA .label, .tabsC .label {
+  // float: left;
+  // color: #646464;
+  // margin-top: 4px;
+  // margin-right: 5px; }
 
-.main-page .tabsA .label {
-  margin-left: 8px; }
+// .main-page .tabsA .label {
+  // margin-left: 8px; }
 
-.tabsB a {
-  background: #eee;
-  border: 1px solid #eee;
-  color: #777;
-  display: block;
-  float: left;
-  height: 22px;
-  line-height: 28px;
-  margin: 5px 0px 0 4px;
-  padding: 0 11px 0 11px;
-  text-decoration: none; }
+// .tabsB a {
+  // background: #eee;
+  // border: 1px solid #eee;
+  // color: #777;
+  // display: block;
+  // float: left;
+  // height: 22px;
+  // line-height: 28px;
+  // margin: 5px 0px 0 4px;
+  // padding: 0 11px 0 11px;
+  // text-decoration: none; }
 
-.tabsC .first {
-  border: none; }
+// .tabsC .first {
+  // border: none; }
 
-.rss {
-  float: right;
-  font-size: 16px;
-  color: #f57900;
-  margin: 5px 0px 3px 7px;
-  width: 52px;
-  padding-left: 2px;
-  padding-top: 3px;
-  background: white url(../images/feed-icon-small.png) no-repeat center right;
-  float: right;
-  font-family: Georgia,serif;
-  font-size: 16px;
-  &:hover {
-    color: #F4A731 !important; } }
+// .rss {
+  // float: right;
+  // font-size: 16px;
+  // color: #f57900;
+  // margin: 5px 0px 3px 7px;
+  // width: 52px;
+  // padding-left: 2px;
+  // padding-top: 3px;
+  // background: white url(../images/feed-icon-small.png) no-repeat center right;
+  // float: right;
+  // font-family: Georgia,serif;
+  // font-size: 16px;
+  // &:hover {
+  //   color: #F4A731 !important; } }
 
 #questionCount {
   font-weight: bold;
diff --git a/sass/_discussion.scss b/sass/_discussion.scss
index 939ddfece8..163a3f2306 100644
--- a/sass/_discussion.scss
+++ b/sass/_discussion.scss
@@ -65,17 +65,41 @@ body.askbot {
       width: 100%;
 
       .discussion-content {
-        /*@extend .content;*/
         @include box-sizing(border-box);
         display: table-cell;
         padding: $gw-gutter;
         vertical-align: top;
         width: grid-width(9);
+
+        .order-sort {
+          @include border-radius(35px);
+          background-color: lighten(#F6EFD4, 5%) ;
+          height: 30px;
+          float: right;
+          font-size: 16px;
+          margin: 3px 0;
+          padding: 0 20px;
+
+          a {
+            color: darken(#F6EFD4, 50%);
+
+            &:before {
+              content: '|';
+              color: darken(#F6EFD4, 10%);
+              font-size: 22px;
+            }
+
+            &:hover {
+              text-decoration: none;
+              color: darken(#F6EFD4, 70%);
+            }
+          }
+        }
       }
 
       aside {
         @extend .sidebar;
-        width: grid-width(2.5);
+        width: grid-width(3);
         padding: $gw-gutter;
 
         h2 {