Merge pull request #1309 from tvdeyen/border-box-model

Always use border-box box model
AlchemyCMS · Sep 7, 2017 · 0000aa8 · 0000aa8
2 parents 6bb8634 + d06d8f5
commit 0000aa8
Show file tree

Hide file tree

Showing 22 changed files with 90 additions and 154 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Change Log
 
+## 4.0.0 (unreleased)
+
+* Always use `border-box` box model for all CSS components in the admin
+
 ## 4.0.0.rc2 (2017-08-18)
 
 * Removed deprecated `:image_size` option from `EssencePicture`

diff --git a/app/assets/stylesheets/alchemy/_extends.scss b/app/assets/stylesheets/alchemy/_extends.scss
@@ -33,7 +33,6 @@
 }
 
 %default-input-style {
-  box-sizing: border-box;
   @extend %rounded-border;
   box-shadow: inset 0px 1px 1px $medium-gray;
   font: $default-font-style;
@@ -66,5 +65,5 @@
 %gradiated-toolbar {
   background: $toolbar-bg-color;
   padding: 8px 4px;
-  height: $default-form-field-height;
+  height: $toolbar-height;
 }
diff --git a/app/assets/stylesheets/alchemy/_mixins.scss b/app/assets/stylesheets/alchemy/_mixins.scss
@@ -74,7 +74,6 @@
 }
 
 @mixin form-label {
-  @extend .border-box-sizing;
   width: $form-left-width;
   padding-right: 2*$default-padding;
   padding-top: $default-padding + 1;
@@ -105,7 +104,6 @@
   min-height: $default-form-field-height;
   background: white;
   @extend %rounded-border;
-  @extend .border-box-sizing;
 }
 
 @mixin form-hint($background-color: $light_yellow, $border-color: $medium-gray) {
@@ -146,12 +144,6 @@
   box-shadow: $shadow;
 }
 
-@mixin box-sizing($box-sizing-type: content-box) {
-  -webkit-box-sizing: $box-sizing-type;
-  -moz-box-sizing: $box-sizing-type;
-  box-sizing: $box-sizing-type;
-}
-
 @mixin tag-base($margin: 2*$default-margin 0, $padding: $default-padding 4*$default-padding $default-padding 6*$default-padding) {
   padding: $padding;
   margin: $margin;

diff --git a/app/assets/stylesheets/alchemy/_variables.scss b/app/assets/stylesheets/alchemy/_variables.scss
@@ -70,6 +70,8 @@ $main-menu-active-bg-color: $light-blue !default;
 $main-menu-text-color: #222 !default;
 $main-menu-entry-max-width: 100px !default;
 $toolbar-bg-color: $medium-gray !default;
+$toolbar-height: 46px !default;
+$element-toolbar-height: 37px !default;
 $header-height: 29px !default;
 $text-shadow-light: rgba($white, 0.5) 0 0 4px !default;
 $transition-duration: 200ms !default;

diff --git a/app/assets/stylesheets/alchemy/archive.scss b/app/assets/stylesheets/alchemy/archive.scss
@@ -23,6 +23,7 @@ div#image_assign_filter_and_image_sizing {
   border: 1px solid #c0c0c0;
   position: relative;
   @extend %rounded-border;
+  width: 170px;
 
   img {
     width: auto;
@@ -38,56 +39,29 @@ div#image_assign_filter_and_image_sizing {
   }
 
   .picture_name {
-    height: 14px;
     display: block;
+    width: 100%;
     text-align: center;
     white-space: nowrap;
     overflow: hidden;
-    position: absolute;
-    bottom: 1px;
+    bottom: 0;
     left: 0;
     font-family: "Courier New", Courier, mono;
-    line-height: 11px;
-    padding: 2px 0;
-    margin-right: 4px;
-    margin-left: 4px;
+    line-height: 16px;
+    padding: $default-padding 0 0;
   }
 
   &.small {
-    width: 80px;
-    height: 80px;
-
-    .picture_name {
-      width: 80px;
-    }
+    width: 90px;
 
     .thumbnail_background {
       width: 80px;
       height: 60px;
     }
   }
 
-  &.medium {
-    width: 160px;
-    height: 140px;
-
-    .picture_name {
-      width: 160px;
-    }
-
-    .thumbnail_background {
-      width: 160px;
-      height: 120px;
-    }
-  }
-
   &.large {
-    width: 240px;
-    height: 200px;
-
-    .picture_name {
-      width: 240px;
-    }
+    width: 250px;
 
     .thumbnail_background {
       width: 240px;
@@ -106,11 +80,11 @@ div#image_assign_filter_and_image_sizing {
 #pictures {
   margin-right: 232px;
   padding-bottom: 60px;
+  overflow: hidden;
 
   .picture_thumbnail {
-    margin: 0 8px 8px 0;
-    display: inline-block;
-    float: none;
+    margin: 0 2*$default-margin 2*$default-margin 0;
+    float: left;
 
     .thumbnail_background {
       @include zoom-in;
@@ -129,12 +103,12 @@ div.assign_image_list_image {
 }
 
 .picture_tool {
-  width: 16px;
-  height: 16px;
+  width: 20px;
+  height: 20px;
   position: absolute;
   background-color: white;
-  top: 3px;
-  padding: 1px;
+  top: $default-padding;
+  padding: $default-padding/2;
   z-index: 10;
   display: none;
 
@@ -147,7 +121,7 @@ div.assign_image_list_image {
   }
 
   &.select {
-    left: 4px;
+    left: $default-padding;
 
     input {
       margin: 0;
@@ -156,7 +130,7 @@ div.assign_image_list_image {
   }
 
   &.delete {
-    right: 4px;
+    right: $default-padding;
 
     a {
       background: image-url('alchemy/icons.png') no-repeat -63px -72px;
@@ -172,7 +146,6 @@ div.assign_image_list_image {
 }
 
 div#library_sidebar {
-  box-sizing: border-box;
   position: fixed;
   border-left: 1px solid $default-border-color;
   top: 0;
@@ -201,7 +174,6 @@ div#filter_bar {
 }
 
 .tag-list {
-  box-sizing: border-box;
   height: 100%;
   padding-bottom: 138px;
 
@@ -237,7 +209,6 @@ div#filter_bar {
   }
 
   ul {
-    box-sizing: border-box;
     list-style-type: none;
     padding: 0;
     margin: 40px 0 4px 0;
@@ -277,7 +248,7 @@ div#filter_bar {
 
 #assign_image_list, #assign_file_list {
   position: relative;
-  height: 519px;
+  height: 535px;
 }
 
 #assign_image_list {
@@ -328,7 +299,7 @@ div#filter_bar {
       display: block;
       line-height: 25px;
       text-decoration: none;
-      padding: 0px 4px 2px 4px;
+      padding: 2px $default-padding;
     }
 
     .icon {
@@ -339,12 +310,12 @@ div#filter_bar {
 }
 
 .picture_tags {
-  box-sizing: border-box;
-  width: 50%;
-  max-height: 100%;
+  overflow: hidden;
   position: absolute;
-  top: 16px;
-  left: 0;
+  top: 22px;
+  left: $default-padding;
+  width: 50%;
+  max-height: 80%;
   padding: $default-padding;
   pointer-events: none;
   display: none;

diff --git a/app/assets/stylesheets/alchemy/base.scss b/app/assets/stylesheets/alchemy/base.scss
@@ -1,4 +1,5 @@
 html {
+  box-sizing: border-box;
   height: 100%;
 
   &.turbolinks-progress-bar::before,
@@ -8,6 +9,12 @@ html {
   }
 }
 
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
 noscript {
   position: fixed;
   top: 0;
@@ -44,7 +51,7 @@ body {
 
 h1 {
   padding: 0;
-  margin: 8px;
+  margin: 2*$default-margin;
   font-weight: bold;
   font-size: $default-font-size;
 
@@ -62,15 +69,15 @@ h1 {
 
 h2 {
   margin: $default-margin 0;
-  padding-bottom: 5px;
+  padding-bottom: $default-padding;
   clear: both;
   font-weight: bold;
   font-size: $default-font-size;
 }
 
 h3 {
   margin: $default-margin 0;
-  padding-bottom: 5px;
+  padding-bottom: $default-padding;
   font-size: $default-font-size;
   font-weight: bold;
 }
@@ -160,10 +167,6 @@ kbd {
   user-select: none;
 }
 
-.border-box-sizing {
-  box-sizing: border-box;
-}
-
 span.updated_at {
   float: right;
 }
@@ -507,7 +510,6 @@ div.browse {
 }
 
 #alchemy_preview_window {
-  box-sizing: border-box;
   position: absolute;
   left: $main-menu-width;
   top: 75px;

diff --git a/app/assets/stylesheets/alchemy/buttons.scss b/app/assets/stylesheets/alchemy/buttons.scss
@@ -17,9 +17,9 @@ button, input[type="submit"], a.button, input.button {
     padding: 6px 18px 6px 6px;
 
     span.icon {
-      margin-top: -5px;
-      padding-right: 0.25em;
-      height: 15px;
+      margin-top: -$default-margin;
+      margin-right: $default-margin;
+      height: 14px;
     }
   }
 
@@ -43,7 +43,6 @@ button, input[type="submit"], a.button, input.button {
 }
 
 .icon_button {
-  box-sizing: border-box;
   width: 27px;
   height: 27px;
   line-height: 21px;

diff --git a/app/assets/stylesheets/alchemy/dashboard.scss b/app/assets/stylesheets/alchemy/dashboard.scss
@@ -3,8 +3,6 @@
   padding: 4*$default-padding 2*$default-padding;
   width: 100%;
   position: relative;
-  box-sizing: border-box;
-  * { box-sizing: border-box }
 
   h1 {
     font-size: 2em;

diff --git a/app/assets/stylesheets/alchemy/dialogs.scss b/app/assets/stylesheets/alchemy/dialogs.scss
@@ -119,7 +119,6 @@
 }
 
 .alchemy-dialog-header {
-  box-sizing: border-box;
   position: relative;
   height: $dialog-header-height;
   padding: 0 2*$default-padding;
@@ -168,7 +167,6 @@
 }
 
 .alchemy-dialog-body {
-  box-sizing: border-box;
   position: relative;
   color: $text-color;
 
@@ -207,7 +205,6 @@
 }
 
 .alchemy-dialog-buttons {
-  box-sizing: border-box;
   float: left;
   clear: both;
   width: 100%;