- color widget styling #1603

metasfresh · Apr 25, 2018 · ebb42fe · ebb42fe
1 parent 56fbc2a
commit ebb42fe
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 27 deletions.
diff --git a/src/assets/css/styles.css b/src/assets/css/styles.css
@@ -994,11 +994,6 @@ td.pulse-off input {
     justify-content: center;
 }
 
-.cell-text-wrapper {
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
 .icon-sm {
     font-size: 15px;
     padding-top: 3px;
@@ -1440,3 +1435,10 @@ td.pulse-off input {
 .btn-bookmark:hover .btn-bookmark-icon.active {
     color: $brand-success-dark-color;
 }
+
+.widget-color-display {
+    display: block;
+    width: 15px;
+    height: 15px;
+    border-radius: 15px;
+}
diff --git a/src/assets/css/table.css b/src/assets/css/table.css
@@ -122,6 +122,17 @@
         min-width: 60px;
         max-width: 100px;
     }
+
+    .cell-text-wrapper {
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        &.color-cell {
+            display: flex;
+            align-items: center;
+            flex-direction: column;
+        }
+    }
 }
 
 @media only screen and (min-width: $breakpoint-md) {
@@ -146,27 +157,6 @@
     opacity: .65;
 }
 
-/* Table cols sizing */
-
-.td-lg {
-    width: 225px;
-    max-width: 225px;
-
-    .input-dropdown-list {
-        width: auto;
-    }
-}
-
-.td-md {
-    width: 144px;
-    max-width: 144px;
-}
-
-.td-sm {
-    min-width: 60px;
-    max-width: 100px;
-}
-
 .table-fade-out {
     opacity: .65;
 }

diff --git a/src/components/table/TableCell.js b/src/components/table/TableCell.js
@@ -225,7 +225,7 @@ class TableCell extends PureComponent {
         ) : (
           <div
             className={classnames('cell-text-wrapper', {
-              [`${item.widgetType}-cell`]: item.widgetType,
+              [`${item.widgetType.toLowerCase()}-cell`]: item.widgetType,
             })}
             title={
               item.widgetType === 'YesNo' ||