1 files changed, 44 insertions, 48 deletions

diff --git a/plugins/SegmentEditor/stylesheets/segmentation.less b/plugins/SegmentEditor/stylesheets/segmentation.less
index 0109d11836..125a0c9f56 100644
--- a/plugins/SegmentEditor/stylesheets/segmentation.less
+++ b/plugins/SegmentEditor/stylesheets/segmentation.less
@@ -131,11 +131,6 @@ div.scrollable {
     padding: 0 0 8px 0;
 }
 
-.segment-element .segment-nav h4.visits {
-    padding-left: 28px;
-    background: url(plugins/SegmentEditor/images/icon-users.png) 0 0 no-repeat;
-}
-
 .segment-element .segment-nav h4 a {
     color: #255792;
     text-decoration: none;
@@ -403,7 +398,7 @@ div.scrollable {
 
 .segment-element .segment-footer {
     background: #eae8e3;
-    border-top: 1px solid #a9a399;
+    border-top: 1px solid @theme-color-background-tinyContrast;
     text-align: right;
     padding: 7px 10px;
     margin: 0 -4px -6px -4px;
@@ -430,11 +425,14 @@ div.scrollable {
     z-index: 121; /* Should be bigger than 'Dashboard widget selector' (z-index: 120) */
     background: #f7f7f7;
     border: 1px solid #e4e5e4;
-    padding: 5px 10px 6px 10px;
     margin-right: 10px;
     border-radius: 4px;
     color: @theme-color-text-light;
     font-size: 14px;
+
+    .segmentListContainer {
+        line-height: 14px;
+    }
 }
 
 .top_controls .segmentEditorPanel {
@@ -486,7 +484,6 @@ div.scrollable {
 .segmentationContainer ul.submenu {
     padding-top: 5px;
     display: none;
-    float: left;
     margin-bottom: 5px;
 }
 
@@ -501,54 +498,53 @@ div.scrollable {
     height: 16px;
 }
 
-.segmentEditorPanel.visible .segmentationContainer {
-    width: 200px;
+.segmentEditorPanel.expanded .segmentationContainer {
+    width: 240px;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
 }
 
-.segmentEditorPanel.visible ul.submenu {
-    display: block;
+.segmentEditorPanel.expanded ul.submenu {
+    display: inline-block;
     list-style: none;
 }
 
 .segmentFilterContainer {
-    margin-left: -10px;
-    margin-right: -10px;
     margin-bottom: 10px;
+    display: inline-block;
 }
 
-.segmentEditorPanel.visible .segmentFilterContainer > input[type="text"] {
-    font-size: 13px;
-    width: 100%;
+.segmentEditorPanel.expanded .segmentFilterContainer > input[type="text"] {
+    font-size: 11px;
+    width: 200px;
     padding: 0;
-    border: 1px solid #ccc;
-    border-width: 1px 0;
+    border: 1px solid #d0d0d0;
+    border-width: 1px;
     color: #999;
-    padding: 11px 32px 11px 12px;
+    padding: 7px 10px 7px 10px;
 }
 
-.segmentEditorPanel.visible .segmentFilterContainer > span {
+.segmentEditorPanel.expanded .segmentFilterContainer > span {
     position: absolute;
     width: 13px;
     height: 13px;
-    right: 12px;
-    top: 16px;
+    right: 23px;
+    top: 48px;
     cursor: pointer;
 }
 
-.segmentEditorPanel.visible .segmentFilterContainer:hover > span {
+.segmentEditorPanel.expanded .segmentFilterContainer:hover > span {
     background: url(plugins/SegmentEditor/images/reset_search.png);
 }
 
-.segmentEditorPanel.visible .filterNoResults {
+.segmentEditorPanel.expanded .filterNoResults {
     font-style: italic;
 }
 
-.segmentEditorPanel.visible .add_new_segment {
+.segmentEditorPanel.expanded .add_new_segment {
     clear: both;
     float: right;
-    margin: 12px 0 10px;
+    margin: 12px 9px 10px 0;
 }
 
 .segmentationContainer > ul.submenu > li {
@@ -557,14 +553,6 @@ div.scrollable {
     cursor: pointer;
 }
 
-span.segmentationTitle {
-    background: url(plugins/Morpheus/images/sort_subtable_desc.png) no-repeat right 0;
-    padding-right: 20px;
-    min-width: 180px;
-    display: block;
-    cursor: pointer;
-}
-
 .segmentList {
     max-height: 300px;
     margin-top: 5px;
@@ -668,28 +656,26 @@ a.metric_category {
     z-index: 1000 !important;
 }
 
+.ui-autocomplete.ui-menu.ui-widget {
+    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.2), 0 1px 5px 0 rgba(0,0,0,0.12);
+}
+
 @media all and (max-width: 749px) {
     span.segmentationTitle,
-    .segmentEditorPanel.visible .segmentationContainer {
+    .segmentEditorPanel.expanded .segmentationContainer {
         width: auto;
     }
 }
 
 .dropdown-body {
-    position: absolute;
-    top: 100%;
-    left: -1px;
     background-color: #f7f7f7;
-    padding: 0px 10px;
-    border: 1px solid #e4e5e4;
     border-top-width: 0px;
     display: none;
     border-bottom-left-radius: 4px;
     border-bottom-right-radius: 4px;
 }
 
-.segmentEditorPanel.visible .dropdown-body {
-    display: block;
+.segmentEditorPanel.expanded .dropdown-body {
     border-top-left-radius: 0;
     border-top-right-radius: 0;
 }
@@ -699,7 +685,7 @@ a.metric_category {
     background: #f1f0eb
 }
 
-.segmentEditorPanel.visible {
+.segmentEditorPanel.expanded {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
 }
@@ -711,7 +697,8 @@ a.metric_category {
 
 .available_segments {
     display: inline-block;
-    width: 160px;
+    width: 150px;
+    padding-left: 5px;
 }
 
 .segmentationTitle,
@@ -722,7 +709,6 @@ a.metric_category {
     white-space: nowrap;
 }
 
-.segmentationTitle,
 .segment-element .segment-nav a.dropdown {
     max-width: 180px;
 }
@@ -731,8 +717,18 @@ a.metric_category {
     max-width: 145px;
 }
 
-.segmentEditorPanel.visible .segmentationTitle {
-    max-width: 200px;
+.segmentEditorPanel .segmentationTitle {
+    text-overflow: ellipsis;
+    display: inline-block;
+    max-width: 170px;
+}
+
+.segmentEditorPanel a.title {
+    padding-bottom: 8px;
+}
+
+.segmentEditorPanel.expanded .segmentationTitle {
+    max-width: 180px;
     overflow: visible; /* restore default */
     white-space: normal; /* restore default */
 }