Merge pull request galaxyproject#6854 from guerler/styles-refresh-201…

…8-panel-header Fix panel header margins in history and tool panel
jmchilton · Oct 11, 2018 · b2477d1 · b2477d1
2 parents 85d4706 + 62b39e9
commit b2477d1
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 103 deletions.
diff --git a/client/galaxy/style/scss/base.scss b/client/galaxy/style/scss/base.scss
@@ -207,7 +207,7 @@ body {
 
 .unified-panel-header {
     @extend .unselectable;
-    @extend .m-2;
+    @extend .mx-3;
     height: $panel_header_height;
     z-index: 1000;
     font-size: 1rem;
@@ -257,7 +257,7 @@ body {
 }
 
 .unified-panel-controls {
-    padding: 0 $margin-v;
+    @extend .px-3;
 }
 
 .unified-panel-footer {
@@ -786,8 +786,7 @@ button {
 
 #tool-search {
     position: relative;
-    margin: 10px 0;
-
+    @extend .mb-2;
     #search-clear-btn {
         position: absolute;
         right: 6px;
@@ -1611,7 +1610,7 @@ div.permissionContainer {
     }
     background: $panel-bg-color;
     min-height: 100%;
-    padding: $margin-h $margin-v;
+    @extend .m-3;
 }
 
 div.toolSectionPad {

diff --git a/client/galaxy/style/scss/history.scss b/client/galaxy/style/scss/history.scss
@@ -1,52 +1,35 @@
-// ---------------------------------------------------------------------------- all histories
+// all histories
 .history-panel {
     @extend .flex-vertical-container;
-
     > .controls {
-        margin: $margin-h $margin-v;
-        padding: 0px;
+        @extend .px-3;
         flex: 0 0 auto;
-
         .title {
-            margin-bottom: 4px;
+            .name {
+                margin-left: -1px;
+            }
             input {
-                width: 100%;
-                // keep the text in position
-                margin: -3px 0px -3px -3px;
                 font-weight: bold;
             }
         }
         .subtitle:not(:empty) {
-            min-height: 15px;
-            margin: -4px 0px 8px;
             span + span:before {
                 content: ", ";
             }
         }
         .history-size {
             float: left;
-            margin: 4px 0 0;
+            @extend .mt-1;
         }
         .actions {
-            margin-bottom: 8px;
             &:empty {
                 height: $icon-btn-size;
             }
         }
-
-        // TODO: remove
         .messages {
             clear: both;
-            margin-bottom: 0px;
-            & > * {
-                cursor: pointer;
-                &:last-child {
-                    margin-bottom: 8px;
-                }
-            }
             .quota-message {
                 display: none;
-                margin: 8px 0px 5px 0px;
             }
         }
 
@@ -190,7 +173,7 @@
     }
 
     > .empty-message {
-        margin: 0px 10px 0px 10px;
+        @extend .m-3;
     }
 
     .loading-indicator,

diff --git a/client/galaxy/style/scss/list-item.scss b/client/galaxy/style/scss/list-item.scss
@@ -31,9 +31,6 @@ $vertical-gap: 8px;
     $spacing-right: $margin-v * 0.5;
     $spacing-bottom: 6px;
     $spacing-left: $margin-v * 0.5;
-    .padded {
-        padding: $spacing-top $spacing-right $spacing-bottom $spacing-left;
-    }
 
     .warnings {
         &:not(:empty) {
@@ -61,9 +58,9 @@ $vertical-gap: 8px;
         float: left;
         // always initially hidden and zero width
         display: none;
-        width: 15px;
-        height: 32px;
-        margin: 9px;
+        @extend .pt-2;
+        @extend .pl-3;
+        width: 2.5rem;
         font-size: 80%;
         color: $btn-default-color;
         cursor: pointer;
@@ -78,8 +75,8 @@ $vertical-gap: 8px;
     .title-bar {
         cursor: pointer;
         outline: none;
-        @extend .padded;
-
+        @extend .p-2;
+        @extend .px-3;
         .title {
             display: inline;
             font-weight: bold;
@@ -110,21 +107,18 @@ $vertical-gap: 8px;
 
     .primary-actions {
         @extend .icon-btn-group;
+        @extend .mt-2;
+        @extend .mx-3;
         float: right;
-        margin: $spacing-top $spacing-right 0;
         .icon-btn {
             margin-left: $icon-btn-margin;
         }
     }
 
     .details {
         display: none;
-        padding: 0px $spacing-right $spacing-bottom $spacing-left;
-        //TODO: FIXME
-        //& > [class$:messagesmall] {
-        //    margin: 0px 0px 8px 0px;
-        //}
-
+        @extend .pb-2;
+        @extend .px-3;
         label {
             margin: 0px;
             padding: 0px;