elements.scss in alchemy_cms-3.0.0.rc6

- old
+ new

@@ -1,10 +1,10 @@
 #alchemy_elements_window {
   @include box-sizing(border-box);
   position: absolute;
   right: 0;
-  top: 80px;
+  top: 75px;
   width: 400px;
   height: auto;
   border-left: $default-border;
   @include transition(200ms ease-in-out);
 }
@@ -23,10 +23,54 @@
     width: 100%;
     height: 140px;
   }
 }
 
+.insert-element-button {
+  display: block;
+  text-align: center;
+  margin-bottom: 2 * $default-margin;
+  background-color: transparent;
+  border: 1px solid $medium-gray;
+  height: 20px;
+  line-height: 20px;
+  @extend %rounded-border;
+  @include transition(all 100ms ease-in-out);
+
+  &:hover, &.expanded {
+    height: 30px;
+    line-height: 30px;
+    background-color: darken($medium-gray, 2%);
+    text-decoration: none;
+    cursor: pointer;
+    border-color: darken($medium-gray, 2%);
+
+    label { display: inline-block; }
+    .icon { @include opacity(1) }
+  }
+
+  &.expanded:hover {
+    background-color: darken($medium-gray, 5%);
+
+    label { color: #000 }
+  }
+
+  label {
+    display: inline-block;
+    vertical-align: middle;
+    cursor: pointer;
+    display: none;
+  }
+
+  .icon {
+    display: inline-block;
+    vertical-align: text-top;
+    @include opacity(0.7);
+    @include transition(opacity 100ms ease-in-out);
+  }
+}
+
 .element_heading {
   padding: 0;
   z-index: 0;
   overflow: hidden;
   white-space: nowrap;
@@ -119,14 +163,11 @@
   right: 8px;
   top: 8px;
 }
 
 .element_editor {
-  border: 1px solid $default-border-color;
-  @extend %rounded-border;
   background-color: $light-gray;
-  margin-bottom: 2*$default-margin;
 
   &.not-draggable {
     @include opacity(0.5);
   }
 
@@ -136,18 +177,21 @@
     .element_head, .element_foot {
       background-color: #fff8df;
     }
   }
 
-  &.selected {
+  &.selected > .edit_element {
     border-color: $blue;
     @include box-shadow(0 0 4px $blue);
   }
 
   form {
     margin: 0;
-    padding: 8px 8px 0 8px;
+    padding: 0 8px;
+    margin-bottom: 2*$default-margin;
+    border: $default-border;
+    @include border-radius($default-border-radius);
   }
 
   .validation_notice {
     font-size: 10px;
     margin-top: 1em;
@@ -200,32 +244,38 @@
   }
 }
 
 .element_head, .element_foot {
   position: relative;
+  background-color: $medium-gray;
+  margin-left: -8px;
+  margin-right: -8px;
 }
 
 .element_head {
   padding: 8px 0 6px;
-  margin-bottom: 0;
+  margin-bottom: 2*$default-margin;
   height: 20px;
-  background-color: $medium-gray;
   @extend .disable-user-select;
+  @include border-top-radius($default-border-radius);
 
+  .folded & {
+    margin-bottom: 0;
+    @include border-bottom-radius($default-border-radius);
+  }
+
   .spinner {
     top: 9px;
     right: 9px;
   }
 }
 
 .element_foot {
   padding: 2*$default-padding;
   width: 100%;
   height: 29px;
-  margin-left: -8px;
-  margin-right: -8px;
-  background-color: $medium-gray;
+  @include border-bottom-radius($default-border-radius);
 
   .element_tools {
     float: left;
     margin-right: 8px;
     margin-top: 6px;
@@ -297,20 +347,22 @@
 
 div#cells {
   min-height: 100px;
 }
 
-span.linkable_essence_tools {
+.linkable_essence_tools {
   position: absolute;
   bottom: 0;
   right: 0;
 
-  a.icon_button {
+  .icon_button {
     margin: 0 0 0 4px;
+    padding: 3px;
     position: absolute;
     bottom: 4px;
     right: 28px;
-    @extend %border-radius-reset;
+    @extend %button-defaults;
+    @include border-radius(0);
 
     &.unlink {
       right: 0;
       @extend .right-rounded-border;
     }