elements.scss in alchemy_cms-4.0.0

- old
+ new

@@ -1,18 +1,16 @@
 #alchemy_elements_window {
-  box-sizing: border-box;
   position: absolute;
   right: 0;
   top: 73px;
   width: 400px;
   height: auto;
   border-left: $default-border;
   transition: 200ms ease-in-out;
 }
 
 #element_area {
-  box-sizing: border-box;
   overflow-x: hidden;
   overflow-y: auto;
 
   .sortable_cell {
     min-height: 100px;
@@ -249,11 +247,10 @@
   }
 }
 
 .element-header {
   position: relative;
-  height: 20px;
   padding: 2*$default-padding;
   background-color: $medium-gray;
   @extend .disable-user-select;
   cursor: pointer;
 
@@ -275,18 +272,17 @@
     }
   }
 }
 
 .element-toolbar {
-  padding: 6px 0;
-  height: 6*$default-padding;
+  padding: $default-padding 0;
+  height: $element-toolbar-height;
   background-color: #f0f0f0;
 
   .element_tools {
     float: left;
-    margin-top: -3px;
-    margin-left: -4px;
+    margin-left: -$default-margin;
   }
 }
 
 .element-footer {
   border-top: 1px solid $medium-gray;
@@ -391,21 +387,20 @@
   margin-bottom: 2*$default-margin;
   border-radius: $default-border-radius;
 }
 
 .edit_images_bottom {
-  height: 19px;
   position: absolute;
+  left: 0;
+  bottom: 0;
   z-index: 0;
-  left: 5px;
-  bottom: 2px;
-  width: 111px;
+  width: inherit;
+  padding: $default-padding;
 
   > a, > span.icon {
     float: left;
-    margin-left: 2px;
-    margin-right: 2px;
+    margin: 0 $default-margin/2;
     width: 18px;
     height: 18px;
   }
 
   a {
@@ -445,12 +440,12 @@
   .picture_thumbnail:hover .picture_tool_delete {
     display: block;
   }
 
   .picture_thumbnail {
-    width: 111px;
-    height: 115px;
+    width: 121px;
+    height: 125px;
     margin: $default-margin 0;
 
     .thumbnail_background {
       width: 111px;
       height: 93px;
@@ -493,75 +488,70 @@
 }
 
 .picture_thumbnail .picture_handle {
   position: absolute;
   z-index: 1;
-  width: 110px;
-  height: 93px;
-  top: 4px;
-  left: 4px;
+  width: 100%;
+  height: 97px;
+  top: 0;
+  left: 0;
   background-color: transparent;
   @extend .disable-user-select;
 }
 
-div.file {
-  padding: 0;
-  margin-top: 8px;
-  margin-bottom: 4px;
-  border: 1px solid #c0c0c0;
-  background-color: #f3f3f3;
-  @extend %rounded-border;
-  height: 24px;
+.content_editor.essence_file {
 
-  .validation_failed & {
-    color: $error_text_color;
-    border-color: $error_border_color;
+  .file {
+    margin: 6px 0 $default-margin;
+    border: $default-border;
+    background-color: $white;
+    @extend %rounded-border;
+    height: $default-form-field-height;
+
+    .validation_failed & {
+      color: $error_text_color;
+      border-color: $error_border_color;
+    }
   }
-}
 
-div.file_icon {
-  text-align: center;
-  float: left;
-  height: 24px;
-  width: 24px;
+  .file_icon {
+    text-align: center;
+    float: left;
+    line-height: 25px;
+    width: 24px;
 
-  span.icon {
-    margin: $default-margin;
-  }
+    .icon {
+      margin: $default-margin;
+    }
 
-  a.assign_file {
-    display: block;
-    height: 16px;
-    background: image-url('alchemy/icons.png') no-repeat -480px -40px;
-    width: 16px;
-    margin: $default-margin;
+    .assign_file {
+      background-position: -480px -40px;
+    }
   }
-}
 
-.content_editor.essence_file {
-
   .file_name {
     white-space: nowrap;
     overflow: hidden;
     float: left;
     max-width: 80%;
-    line-height: 25px;
+    line-height: $default-form-field-height;
     font-size: 10px;
     text-overflow: ellipsis;
   }
 }
 
 .essence_file_tools {
-  height: 24px;
+  height: 27px;
   float: right;
   background-color: white;
   width: 48px;
+  border-radius: 0 $default-border-radius $default-border-radius 0;
 
   a {
     text-decoration: none;
     width: 16px;
     height: 16px;
-    margin: $default-margin;
+    margin: 5px $default-margin;
     float: left;
 
     &.assign_file {
       background: image-url('alchemy/icons.png') -512px -40px;
     }