The dashboard now uses Bootstrap's grid system

1 files changed, 27 insertions, 62 deletions

diff --git a/plugins/Dashboard/stylesheets/dashboard.less b/plugins/Dashboard/stylesheets/dashboard.less
index 775b7da56b..3d2b2ae32b 100644
--- a/plugins/Dashboard/stylesheets/dashboard.less
+++ b/plugins/Dashboard/stylesheets/dashboard.less
@@ -26,57 +26,41 @@
   }
 }
 
-.col {
-  float: left;
-  min-height: 100px;
-}
-
-.col.width-100 {
-  width: 100%;
-}
-
-.col.width-75 {
-  width: 75%;
-}
-
-.col.width-67 {
-  width: 66.67%;
-}
-
-.col.width-50 {
-  width: 50%;
-}
-
-.col.width-40 {
-  width: 40%;
-}
-
-.col.width-33 {
-  width: 33.33%;
-}
+#dashboard {
+  .col {
+    min-height: 100px;
+    // Customize Bootstrap gutter between columns
+    padding-right: 7px;
+    padding-left: 7px;
 
-.col.width-30 {
-  width: 30%;
-}
+    >.sortable {
+      padding: 5px 0;
+    }
+  }
 
-.col.width-25 {
-  width: 25%;
+  .widget {
+    background: @theme-color-background-base;
+    border: 1px solid #bbb6ad;
+    border-radius: 4px;
+    overflow: hidden;
+    font-size: 14px;
+    z-index: 1;
+
+    h3 {
+      font-size: 15px;
+      margin: 0;
+      font-weight: normal;
+      color: #0D0D0D;
+      text-shadow: none;
+      padding: 15px 15px 10px;
+    }
+  }
 }
 
 .hover {
   border: 2px dashed #E3E3E3;
 }
 
-.widget {
-  background: @theme-color-background-base;
-  border: 1px solid #bbb6ad;
-  margin: 10px 7px;
-  border-radius: 4px;
-  overflow: hidden;
-  font-size: 14px;
-  z-index: 1;
-}
-
 .widgetHover {
   border: 1px solid #aba494;
 }
@@ -112,18 +96,6 @@
   padding-bottom: 4px;
 }
 
-.widgetTopHover {
-}
-
-h3.widgetName {
-  font-size: 15px;
-  padding: 0px;
-  margin: 0px;
-  font-weight: normal;
-  color: #0D0D0D;
-  text-shadow: none;
-}
-
 .widgetNameOffScreen {
   overflow: hidden;
   width:1px;
@@ -323,31 +295,24 @@ h3.widgetName {
 #columnPreview .width-100 {
   width: 120px;
 }
-
 #columnPreview .width-75 {
   width: 90px;
 }
-
 #columnPreview .width-67 {
   width: 80.4px;
 }
-
 #columnPreview .width-50 {
   width: 60px;
 }
-
 #columnPreview .width-40 {
   width: 48px;
 }
-
 #columnPreview .width-33 {
   width: 40px;
 }
-
 #columnPreview .width-30 {
   width: 36px;
 }
-
 #columnPreview .width-25 {
   width: 30px;
 }