fixed the styling for priorities sidebar

OpenTreeMap · Jul 30, 2015 · 7934764 · 7934764
1 parent 3789b9a
commit 7934764
Show file tree

Hide file tree

Showing 4 changed files with 350 additions and 139 deletions.
diff --git a/opentreemap/treemap/css/sass/partials/pages/_modeling.scss b/opentreemap/treemap/css/sass/partials/pages/_modeling.scss
@@ -86,7 +86,6 @@
         padding-top: 5px;
         box-shadow: 0 6px 0 rgba(0, 0, 0, 0.15);
         position: relative;
-        z-index: 998;
 
         .btn {
             border: none;
@@ -96,8 +95,9 @@
             border-bottom-right-radius: 0;
 
             &.active {
-                color: #fff;
-                background-color: $primary-color;
+                color: $primary-color;
+                background-color: #fff;
+                box-shadow: 0 0 0 1px #ddd;
             }
 
             &:focus {
@@ -150,6 +150,7 @@
                 border: 1px solid #ddd;
                 border-bottom: none;
                 border-radius: 5px 5px 0 0;
+                margin-right: 5px;
 
                 .btn {
                     background: transparent;
@@ -171,7 +172,7 @@
             right: auto;
             left: 0;
             border: none;
-            bottom: 30px;
+            bottom: 40px;
 
             .templates {
                 height: 50px;
@@ -390,14 +391,58 @@
             }
         }
     }
+}
+
+#sidebar-prioritization {
+    background: #f3f3f3;
+
+    .panel {
+        position: relative;
+    }
+
+    .panel-title a {
+        font-size: 1.9rem;
+        font-weight: 500;
+        position: relative;
+        line-height: 1.3;
+
+        &:after {
+            content: '\e970';
+            font-family: "fontello";
+            font-style: normal;
+            font-weight: normal;
+            speak: none;
+            display: inline-block;
+            text-decoration: inherit;
+            width: 1em;
+            margin-right: .2em;
+            text-align: center;
+            font-variant: normal;
+            text-transform: none;
+            line-height: 1em;
+            margin-left: .2em;
+            position: absolute;
+            right: 15px;
+            top: 20px;
+        }
+
+        &.collapsed {
+            opacity: .8;
+            &:after {
+                content: '\e972';
+            }
+        }
+    }
 
     .layer-group {
         .panel-heading {
-            padding: 15px;
+            padding: 15px 40px 15px 15px;
             background: $light-gray-color;
             border-bottom: 1px solid darken($light-gray-color, 10%);
             font-size: 1.6rem;
             font-weight: 700;
+            position: relative;
+            box-shadow: 0 4px 0 0 rgba(0, 0, 0, .2);
 
             input.slider {
                 display: none;
@@ -412,9 +457,18 @@
                 background: transparent;
                 color: $main-text-color;
                 padding: 0 0 10px;
+                position: relative;
+                font-size: 1.4rem;
+                font-weight: 700;
+
+                &:after {
+                    font-size: 1.9rem;
+                    right: -25px;
+                    top: 15px;
+                }
 
                 &.collapsed {
-                    opacity: 0.5;
+                    opacity: .8;
                 }
             }
         }
@@ -454,17 +508,47 @@
         border-bottom: 1px solid darken($light-gray-color, 10%);
         font-size: 1.6rem;
         font-weight: 700;
+        cursor: pointer;
+        box-shadow: 0 4px 0 0 rgba(0, 0, 0, .25);
+        position: relative;
+        z-index: 1;
 
         &:first-of-type {
             border-top: none;
         }
         & + .mask-row {
             border-top: none;
         }
+        &:after {
+            content: '\e970';
+            font-family: "fontello";
+            font-style: normal;
+            font-weight: normal;
+            speak: none;
+            display: inline-block;
+            text-decoration: inherit;
+            width: 1em;
+            margin-right: .2em;
+            text-align: center;
+            font-variant: normal;
+            text-transform: none;
+            line-height: 1em;
+            margin-left: .2em;
+            position: absolute;
+            right: 15px;
+            top: 12px;
+        }
+        &.collapsed {
+            box-shadow: none;
+            &:after {
+                content: '\e972';
+            }
+        }
     }
     .mask-row {
         padding: 10px 15px 9px;
         border-top: 1px solid $light-gray-color;
+        position: relative;
 
         &:hover {
             background: lighten($light-gray-color, 2%);
@@ -474,6 +558,67 @@
             font-weight: 400;
             font-size: 1.4rem;
         }
+
+        .remove-mask {
+            position: absolute;
+            cursor: pointer;
+            font-size: 1.2rem;
+            right: 18px;
+            top: 14px;
+            opacity: .5;
+        }
+    }
+
+    .search-block {
+        padding: 12px 14px 16px;
+
+        label {
+            display: block;
+            margin-top: -2px;
+            font-size: 1.2rem;
+        }
+
+        .search-field-group {
+            position: relative;
+
+            input[type="text"] {
+                margin: 0;
+                padding-left: 32px;
+                font-size: 1.2rem;
+            }
+
+            .twitter-typeahead {
+                display: block !important;
+            }
+            .typeahead-toggle {
+                padding: 9px 4px 7px;
+                position: absolute;
+                top: 0px;
+                z-index: 9;
+                background: none;
+                border: none;
+                cursor: pointer;
+                color: $well-color;
+                font-size: 1.8rem;
+                line-height: 1.6rem;
+
+                &.active, 
+                &:hover {
+                    color: $main-text-color;
+                }
+            }
+        }
+
+        .dropdown-menu {
+            width: 257px;
+            -moz-border-radius: 3px;
+            -webkit-border-radius: 3px;
+            border-radius: 3px;
+
+            > li > a {
+                padding: 3px 12px;
+            }
+        }
     }
 }
 

diff --git a/opentreemap/treemap/css/sass/partials/pages/_scenarios.scss b/opentreemap/treemap/css/sass/partials/pages/_scenarios.scss
@@ -1,6 +1,6 @@
 #sidebar-scenarios {
     background: #f3f3f3;
-    padding-bottom: 75px;
+    padding-bottom: 65px;
 
     > .sidebar-inner {