box size refactor

resources/public/styles/base.scss

@@ -10,6 +10,7 @@ body {
 }
 
 * {
+  box-sizing: border-box;
   transition: all .4s ease;
 }
 

resources/public/styles/layouts/main-layout.scss

@@ -5,8 +5,8 @@
 }
 
 .dashboard-content {
-  box-sizing: border-box;
   display: flex;
   flex-direction: column;
+  height: calc(100vh - 60px);
   width: 100%;
 }

resources/public/styles/partials/activity-bar.scss

@@ -23,7 +23,6 @@
 
   .date-ribbon {
     background-color: lighten($color-gray-light, 12%);
-    box-sizing: border-box;
     color: $color-white;
     font-size: $fs12;
     font-weight: bold;
@@ -34,7 +33,6 @@
 
   .activity-input {
     border-bottom: 1px solid $color-gray-lighter;
-    box-sizing: border-box;
     display: flex;
     font-size: $fs13;
     padding: $small;

resources/public/styles/partials/color-palette.scss

@@ -4,7 +4,6 @@
   background-color: $color-white;
   border-top: 1px solid $color-gray-lighter;
   bottom: 0;
-  box-sizing: border-box;
   display: flex;
   left: 0;
   padding: 1rem;

resources/public/styles/partials/dashboard-grid.scss

@@ -3,9 +3,13 @@
   display: flex;
   flex-direction: column;
   font-size: $fs14;
-  padding: $medium 250px $medium $medium;
+  height: 100%;
+  padding: $medium;
+  // ACTIVITY BAR PADDING
+  //padding: $medium 250px $medium $medium;
 
   .dashboard-title {
+    margin: $medium 0;
     position: relative;
     width: 100%;
 
@@ -47,16 +51,12 @@
 
   .dashboard-grid-content {
     align-items: center;
-    box-sizing: border-box;
     display: flex;
     flex-wrap: wrap;
     height: 100%;
     justify-content: center;
-    margin: $big;
-    max-height: 77vh;
     min-height: 60vh;
     overflow: scroll;
-    padding-bottom: 30px;
     width: 100%;
 
     .grid-item {
@@ -72,11 +72,11 @@
       padding: $medium;
       position: relative;
       text-align: center;
-      width: 20%;
+      width: 18%;
 
       &.small-item {
         max-width: 12%;
-        min-width: 150px;
+        min-width: 190px;
       }
 
       &.add-project {
@@ -128,7 +128,6 @@
 
         .project-th-actions {
           align-items: center;
-          box-sizing: border-box;
           bottom: 0;
           display: flex;
           left: 0;

resources/public/styles/partials/library-bar.scss

@@ -54,6 +54,7 @@
         cursor: pointer;
         display: flex;
         flex-direction: column;
+        flex-shrink: 0;
         padding: 10px;
 
         .element-title {

resources/public/styles/partials/lightbox.scss

@@ -14,7 +14,6 @@
     align-items: center;
     background-color: $color-white;
     border-radius: $br-medium;
-    box-sizing: border-box;
     display: flex;
     flex-direction: column;
     padding: $medium $x-big;

resources/public/styles/partials/main-bar.scss

@@ -2,7 +2,7 @@
   align-items: center;
   background-color: $primary-ui-bg;
   display: flex;
-  height: 50px;
+  height: 60px;
   padding: $x-small $medium;
   position: relative;
   z-index: 10;
@@ -71,7 +71,6 @@
     background-color: $color-white;
     border-radius: $br-small;
     border: 1px solid $soft-ui-border;
-    box-sizing: border-box;
     min-width: 150px;
     padding: 0 $small;
     position: absolute;

resources/public/styles/partials/project-bar.scss

@@ -21,7 +21,6 @@
 
     .project-name {
       border-bottom: 1px solid $color-gray-lighter;
-      box-sizing: border-box;
       font-size: $fs14;
       font-weight: bold;
       padding: 0 $small;
@@ -45,7 +44,6 @@
 
   li {
     align-items: center;
-    box-sizing: border-box;
     cursor: pointer;
     display: flex;
     padding: $x-small $small;

resources/public/styles/partials/sidebar-element-options.scss

@@ -55,7 +55,6 @@
     margin-left: $x-small;
 
     .element-set-title {
-      box-sizing: border-box;
       border-bottom: 1px dashed $soft-ui-border;
       color: $medium-ui-text;
       font-weight: bold;
@@ -75,7 +74,6 @@
   .input-text {
     background-color: transparent;
     border-color: $soft-ui-border;
-    box-sizing: border-box;
     color: $intense-ui-text;
     font-size: $fs13;
     margin: $x-small;

resources/public/styles/partials/sidebar-layers.scss

@@ -55,7 +55,6 @@
   }
 
   li {
-    box-sizing: border-box;
     cursor: pointer;
     display: flex;
     flex-direction: column;
@@ -80,7 +79,6 @@
     .element-list-body {
       align-items: center;
       border-bottom: 1px solid $soft-ui-border;
-      box-sizing: border-box;
       display: flex;
       padding: $small;
       width: 100%;

resources/public/styles/partials/sidebar-sitemap.scss

@@ -3,7 +3,6 @@
   .project-title {
     align-items: center;
     border-bottom: 1px solid $soft-ui-border;
-    box-sizing: border-box;
     display: flex;
     padding: $x-small;
     width: 100%;
@@ -49,7 +48,6 @@
     li {
       align-items: center;
       border-bottom: 1px solid $soft-ui-border;
-      box-sizing: border-box;
       display: flex;
       flex-direction: row;
       padding: $x-small;

resources/public/styles/partials/sidebar.scss

@@ -1,7 +1,6 @@
 .settings-bar {
   background-color: $primary-ui-bg;
   bottom: 0;
-  box-sizing: border-box;
   height: 100%;
   position: fixed;
   right: 0;
@@ -14,7 +13,6 @@
 
   .settings-bar-inside {
     align-items: center;
-    box-sizing: border-box;
     display: flex;
     flex-direction: column;
     overflow-y: auto;

resources/public/styles/partials/workspace-bar.scss

@@ -3,7 +3,7 @@
   background-color: $primary-ui-bg;
   border-bottom: 1px solid  $soft-ui-border;
   display: flex;
-  height: 40px;
+  height: 50px;
   padding: $x-small $medium $x-small 65px;
   position: relative;
   z-index: 11;
@@ -46,7 +46,6 @@
     align-items: center;
     background-color: $secondary-ui-bg;
     border-radius: $br-small;
-    box-sizing: border-box;
     cursor: pointer;
     display: flex;
     min-width: 164px;

resources/public/styles/partials/workspace-canvas.scss

@@ -1,6 +1,5 @@
 .workspace-content {
   background-color: $canvas-bg;
-  box-sizing: border-box;
   display: flex;
   height: 100%;
   width: 100%;
@@ -20,7 +19,6 @@
   }
 
   .workspace-canvas {
-    box-sizing: border-box;
     height: calc(100vh - 50px);
     overflow: scroll;
     transition: none;