Merge pull request #2379 from dcos/orlandohohmeier/fix/DCOS-17997-adj…

…ust-jobs-table DCOS-17997: adjust jobs table styles
dcos · Aug 18, 2017 · 8702cc3 · 8702cc3
2 parents 031553d + 80f6102
commit 8702cc3
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 66 deletions.
diff --git a/src/js/pages/jobs/JobsTable.js b/src/js/pages/jobs/JobsTable.js
@@ -166,7 +166,7 @@ class JobsTable extends React.Component {
       if (schedule.enabled) {
         scheduleIcon = (
           <Tooltip
-            wrapperClassName="tooltip-wrapper icon icon-margin-left"
+            wrapperClassName="tooltip-wrapper icon-margin-left"
             content={prettycron.toString(schedule.cron)}
             maxWidth={250}
             wrapText={true}

diff --git a/src/styles/components/icons/styles.less b/src/styles/components/icons/styles.less
@@ -64,23 +64,6 @@
       background-color: @icon-default-background-white;
     }
 
-    &.icon-margin-right {
-      margin-right: @base-spacing-unit * 0.25;
-
-      &.icon-margin-right-wide {
-        margin-right: @base-spacing-unit * 0.5;
-      }
-    }
-
-    &.icon-margin-left {
-      margin-left: @base-spacing-unit * 0.25;
-      margin-right: 0;
-
-      &.icon-margin-left-wide {
-        margin-left: @base-spacing-unit * 0.5;
-      }
-    }
-
     &.icon-neutral {
       color: @neutral;
     }
@@ -109,28 +92,42 @@
       flex: 0 0 auto;
     }
   }
+
+  .icon-margin-right {
+    margin-right: @base-spacing-unit * 0.25;
+
+    &.icon-margin-right-wide {
+      margin-right: @base-spacing-unit * 0.5;
+    }
+  }
+
+  .icon-margin-left {
+    margin-left: @base-spacing-unit * 0.25;
+    margin-right: 0;
+
+    &.icon-margin-left-wide {
+      margin-left: @base-spacing-unit * 0.5;
+    }
+  }
 }
 
 & when (@icon-enabled) and (@layout-screen-small-enabled) {
 
   @media (min-width: @layout-screen-small-min-width) {
 
-    .icon {
-
-      &.icon-margin-right {
-        margin-right: @base-spacing-unit-screen-small * 0.25;
+    .icon-margin-right {
+      margin-right: @base-spacing-unit-screen-small * 0.25;
 
-        &.icon-margin-right-wide {
-          margin-right: @base-spacing-unit-screen-small * 0.5;
-        }
+      &.icon-margin-right-wide {
+        margin-right: @base-spacing-unit-screen-small * 0.5;
       }
+    }
 
-      &.icon-margin-left {
-        margin-left: @base-spacing-unit-screen-small * 0.25;
+    .icon-margin-left {
+      margin-left: @base-spacing-unit-screen-small * 0.25;
 
-        &.icon-margin-left-wide {
-          margin-left: @base-spacing-unit-screen-small * 0.5;
-        }
+      &.icon-margin-left-wide {
+        margin-left: @base-spacing-unit-screen-small * 0.5;
       }
     }
   }
@@ -140,22 +137,19 @@
 
   @media (min-width: @layout-screen-medium-min-width) {
 
-    .icon {
-
-      &.icon-margin-right {
-        margin-right: @base-spacing-unit-screen-medium * 0.25;
+    &.icon-margin-right {
+      margin-right: @base-spacing-unit-screen-medium * 0.25;
 
-        &.icon-margin-right-wide {
-          margin-right: @base-spacing-unit-screen-medium 0.5;
-        }
+      &.icon-margin-right-wide {
+        margin-right: @base-spacing-unit-screen-medium 0.5;
       }
+    }
 
-      &.icon-margin-left {
-        margin-left: @base-spacing-unit-screen-medium * 0.25;
+    &.icon-margin-left {
+      margin-left: @base-spacing-unit-screen-medium * 0.25;
 
-        &.icon-margin-left-wide {
-          margin-left: @base-spacing-unit-screen-medium * 0.5;
-        }
+      &.icon-margin-left-wide {
+        margin-left: @base-spacing-unit-screen-medium * 0.5;
       }
     }
   }
@@ -165,22 +159,19 @@
 
   @media (min-width: @layout-screen-large-min-width) {
 
-    .icon {
-
-      &.icon-margin-right {
-        margin-right: @base-spacing-unit-screen-large * 0.25;
+    &.icon-margin-right {
+      margin-right: @base-spacing-unit-screen-large * 0.25;
 
-        &.icon-margin-right-wide {
-          margin-right: @base-spacing-unit-screen-large 0.5;
-        }
+      &.icon-margin-right-wide {
+        margin-right: @base-spacing-unit-screen-large 0.5;
       }
+    }
 
-      &.icon-margin-left {
-        margin-left: @base-spacing-unit-screen-large * 0.25;
+    &.icon-margin-left {
+      margin-left: @base-spacing-unit-screen-large * 0.25;
 
-        &.icon-margin-left-wide {
-          margin-left: @base-spacing-unit-screen-large * 0.5;
-        }
+      &.icon-margin-left-wide {
+        margin-left: @base-spacing-unit-screen-large * 0.5;
       }
     }
   }
@@ -190,22 +181,19 @@
 
   @media (min-width: @layout-screen-jumbo-min-width) {
 
-    .icon {
-
-      &.icon-margin-right {
-        margin-right: @base-spacing-unit-screen-jumbo * 0.25;
+    &.icon-margin-right {
+      margin-right: @base-spacing-unit-screen-jumbo * 0.25;
 
-        &.icon-margin-right-wide {
-          margin-right: @base-spacing-unit-screen-jumbo 0.5;
-        }
+      &.icon-margin-right-wide {
+        margin-right: @base-spacing-unit-screen-jumbo 0.5;
       }
+    }
 
-      &.icon-margin-left {
-        margin-left: @base-spacing-unit-screen-jumbo * 0.25;
+    &.icon-margin-left {
+      margin-left: @base-spacing-unit-screen-jumbo * 0.25;
 
-        &.icon-margin-left-wide {
-          margin-left: @base-spacing-unit-screen-jumbo * 0.5;
-        }
+      &.icon-margin-left-wide {
+        margin-left: @base-spacing-unit-screen-jumbo * 0.5;
       }
     }
   }