Change sidebar style

assets/css/src/listing.css

@@ -5,7 +5,7 @@
     margin-bottom: 20px;
     border: 1px solid #ddd;
     color: #333;
-    background-color: #fefefe;
+    background-color: #fcfcfc;
     overflow: auto;
 }
 

assets/css/src/sidebar.css

@@ -1,90 +1,65 @@
-/* sidebar */
 .sidebar-container {
     margin-top: 10px;
-    position: relative;
-    clear: both;
+    height: 100%;
+    display: -ms-flexbox;
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-box;
+    display: box;
+    -ms-flex-direction: row;
+    -webkit-box-orient: horizontal;
+    -moz-box-orient: horizontal;
+    -ms-box-orient: horizontal;
+    box-orient: horizontal;
 }
 
 .sidebar-content {
-    margin-left: 23%;
-    width: 76%;
-    position: absolute;
+    padding-left: 10px;
+    -ms-flex: 1;
+    -webkit-box-flex: 1;
+    -moz-box-flex: 1;
+    -ms-box-flex: 1;
+    box-flex: 1;
 }
 
 .sidebar {
-    width: 20%;
-    float: left;
-    padding: 10px;
-    padding-top: 0;
-    border: 1px solid #ddd;
-    background: #fdfdfd;
-    border-radius: 5px;
+    padding-right: 10px;
+    border-right: 1px dotted #eee;
+    font-size: 0.95em;
+    width: 240px;
+    -ms-flex: 0 100px;
+    -webkit-box-flex: 0;
+    -moz-box-flex: 0;
+    -ms-box-flex: 0;
+    box-flex: 0;
+}
+
+.sidebar a {
+    text-decoration: none;
 }
 
 .sidebar li {
-    list-style-type: square;
-    margin-left: 30px;
-    line-height: 1.8em;
+    list-style-type: none;
+    line-height: 35px;
+    border-bottom: 1px dotted #efefef;
+}
+
+.sidebar li:hover {
+    border-left: 5px solid #555;
+    padding-left: 8px;
+}
+
+.sidebar li.active {
+    border-left: 5px solid #333;
+    padding-left: 8px;
 }
 
 .sidebar li.active a {
-    color: #000;
+    color: #333;
     font-weight: bold;
-    text-decoration: none;
 }
 
 .sidebar li.active a:focus,
 .sidebar li.active a:hover {
-    text-decoration: underline;
-}
-
-.sidebar-collapsed .sidebar {
-    width: 10px;
-    padding-bottom: 0;
-    float: none;
-}
-
-.sidebar-collapsed .sidebar-content {
-    margin: 0;
-    margin-top: 15px;
-    width: 100%;
-}
-
-.sidebar-collapse {
-    text-align: right;
-}
-
-.sidebar-collapse a,
-.sidebar-expand a {
-    color: #333;
-    text-decoration: none;
-}
-
-.sidebar-collapse a:hover,
-.sidebar-expand a:hover {
-    color: #DF5353;
-}
-
-@media only screen and (max-width: 1024px) {
-    .sidebar {
-        width: 25%;
-    }
-
-    .sidebar-content {
-        margin-left: 30%;
-        width: 70%;
-    }
-}
-
-@media only screen and (max-width: 767px) {
-    .sidebar {
-        width: 95%;
-        float: none;
-    }
-
-    .sidebar-content {
-        margin: 0;
-        margin-top: 15px;
-        width: 100%;
-    }
+    color: #555;
 }