alchemy_cms 3.0.0.rc5 → 3.0.0.rc6

data/app/assets/stylesheets/alchemy/elements.scss

@@ -2,7 +2,7 @@
   @include box-sizing(border-box);
   position: absolute;
   right: 0;
-  top: 80px;
+  top: 75px;
   width: 400px;
   height: auto;
   border-left: $default-border;
@@ -25,6 +25,50 @@
   }
 }
 
+.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;
@@ -121,10 +165,7 @@ span.preview_text_element_name {
 }
 
 .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);
@@ -138,14 +179,17 @@ span.preview_text_element_name {
     }
   }
 
-  &.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 {
@@ -202,14 +246,22 @@ span.preview_text_element_name {
 
 .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;
@@ -221,9 +273,7 @@ span.preview_text_element_name {
   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;
@@ -299,17 +349,19 @@ 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;

data/app/assets/stylesheets/alchemy/form_fields.scss

@@ -1,4 +1,10 @@
-textarea, input[type="text"], input[type="email"], input[type="password"], .thin_border, .input_field {
+textarea,
+input[type="url"],
+input[type="text"],
+input[type="email"],
+input[type="password"],
+.thin_border,
+.input_field {
   @extend %default-input-style;
 
   &.dirty {
@@ -13,10 +19,10 @@ textarea {
 }
 
 input#search_input_field {
-  width: 224px;
+  width: 204px;
   text-align: left;
   @include border-radius(21px);
-  padding: 3px 26px;
+  padding: 3px 16px 3px 28px;
   margin: 0;
   height: 29px;
 }
@@ -30,13 +36,13 @@ div.search_field span.icon, div.js_filter_field_box span.icon {
 .js_filter_field_box {
   position: absolute;
   right: 4px;
-  top: 4px;
+  top: 8px;
 
   .js_filter_field {
     width: 220px;
     text-align: left;
-    @include border-radius(3px);
-    padding: 3px 24px;
+    @include border-radius($default-border-radius);
+    padding: 3px 24px 3px 28px;
     height: 29px;
     margin: 0;
   }
@@ -54,3 +60,30 @@ div.search_field span.icon, div.js_filter_field_box span.icon {
 
   label { position: absolute }
 }
+
+.alchemy-char-counter {
+  display: block;
+  clear: both;
+  text-align: right;
+
+  &.too-long {
+    color: $error_text_color;
+  }
+}
+
+fieldset {
+  border: none;
+  padding: 0;
+  margin: 1em 0;
+
+  legend {
+    font-weight: bold;
+    text-decoration: none;
+    margin-bottom: 0.5em;
+  }
+}
+
+::-webkit-input-placeholder {
+  line-height: 1.5;
+  color: $default-border-color;
+}

data/app/assets/stylesheets/alchemy/forms.scss

@@ -28,6 +28,7 @@ form {
     padding: $default-padding 0;
     @include pie-clearfix;
 
+    input[type="url"],
     input[type="text"],
     input[type="email"],
     input[type="password"],
@@ -113,6 +114,37 @@ form {
     }
   }
 
+  .inline-input {
+    @include clearfix;
+    margin: 0 -1*$default-margin;
+    @include box-sizing(border-box);
+
+    .left-column, .right-column {
+      padding: 0 $default-padding;
+      @include box-sizing(border-box);
+    }
+
+    .left-column {
+      width: $form-right-width;
+      float: left;
+    }
+
+    .right-column {
+      width: $form-left-width;
+      float: right;
+    }
+
+    button,
+    .button,
+    input[type="url"],
+    input[type="text"],
+    input[type="email"],
+    input[type="submit"],
+    input[type="password"] {
+      width: 100%;
+    }
+  }
+
   .control_group {
     width: $form-right-width;
     padding-top: 6px;

data/app/assets/stylesheets/alchemy/frame.scss

@@ -33,11 +33,11 @@
 }
 
 #main_navi {
-  padding-top: 25px;
+  padding-top: 20px;
   padding-left: 4px;
   padding-bottom: 80px;
 
-  a.main_navi_entry {
+  .main_navi_entry {
     color: #444;
     position: relative;
     text-align: center;
@@ -47,7 +47,7 @@
     @extend .left-rounded-border;
     border: 1px none #afafaf;
     border-right-style: none;
-    padding-bottom: 5px;
+    padding-bottom: 6px;
     padding-left: 1px;
     width: 60px;
 
@@ -66,7 +66,7 @@
       padding-left: 0;
       border-right-style: none;
       padding-top: 6px;
-      padding-bottom: 4px;
+      padding-bottom: 5px;
     }
 
     img {
@@ -142,7 +142,7 @@ div#overlay_text_box {
 #main_content {
   @include box-sizing(border-box);
   background-color: $light-gray;
-  padding: 88px 8px 8px 74px;
+  padding: 83px 8px 8px 74px;
   z-index: 0;
   width: 100%;
   height: 100%;
@@ -158,27 +158,29 @@ div#overlay_text_box {
 
 div#user_info {
   position: absolute;
-  z-index: 10;
-  line-height: 27px;
-  height: 29px;
-  font-size: 11px;
+  top: 0;
   right: 65px;
-  top: -3px;
+  line-height: 28px;
+  font-size: 11px;
   padding: 0 8px;
   background-color: $light-blue;
 
   .select2-container {
-    margin-right: 2 * $default-margin;
+    margin-top: -2px;
+    margin-right: $default-margin;
+  }
+
+  .current-user-name {
+    padding-right: $default-padding;
   }
 }
 
 #sub_navigation {
-  height: 22px;
-  line-height: 21px;
+  height: 24px;
+  line-height: 23px;
   background: $light-blue;
   border-bottom: $default-border;
   padding-top: 4px;
-  z-index: 5;
   position: relative;
 
   a {
@@ -189,48 +191,46 @@ div#user_info {
     }
   }
 
-  span.page_status_and_name {
+  .page_status_and_name {
     padding: 0 8px;
     background-color: $medium-gray;
     text-shadow: 0px 1px 1px #FFFFFF;
     @extend .disable-user-select;
     cursor: default;
-    line-height: 20px;
+    line-height: 22px;
     float: left;
     @extend .top-rounded-border;
     border: $default-border;
     border-bottom-style: none;
-    height: 22px;
+    height: 24px;
     margin-right: 1px;
+  }
 
-    .page_language {
-      float: none;
-      position: relative;
-      @include inline-block;
-      bottom: 2px;
-      border: 1px solid #f0c8d1;
-      background-color: #f0c8d1;
-      color: #ac3d57;
-      @extend %rounded-border;
-      margin-right: 2px;
-      padding: 2px 3px;
-      line-height: 11px;
-    }
+  .page_name {
+    position: relative;
+    margin-right: $default-margin;
+    line-height: 27px;
+    bottom: 2px;
+  }
 
-    span.page_name {
-      position: relative;
-      margin-right: 16px;
-      margin-left: 4px;
-      line-height: 27px;
-      bottom: 2px;
-    }
+  .page_language {
+    float: none;
+    position: relative;
+    @include inline-block;
+    bottom: 3px;
+    color: #3265b1;
+    @extend %rounded-border;
+    margin-right: 2px;
+    font-size: 10px;
+    line-height: 12px;
+    text-transform: uppercase;
   }
 
-  div.subnavi_tab {
+  .subnavi_tab {
     float: left;
     padding: 0px 8px;
-    line-height: 19px;
-    height: 21px;
+    line-height: 21px;
+    height: 23px;
     text-shadow: #fff 0 0px 4px;
     background: #d6e0e6;
     color: #444;
@@ -260,7 +260,7 @@ div#user_info {
       float: left;
       position: relative;
       padding: 0px 8px;
-      height: 22px;
+      height: 24px;
       color: $text-color;
       background-color: $medium-gray;
       text-shadow: #fff 0 1px 2px;
@@ -272,14 +272,14 @@ div#user_info {
 }
 
 #subnav_additions {
-  height: 23px;
+  height: 25px;
   overflow: hidden;
 
   label {
     float: left;
     font-size: 10px;
-    line-height: 25px;
-    height: 25px;
+    line-height: 27px;
+    height: 27px;
     margin-left: 8px;
     margin-right: 4px;
   }

data/app/assets/stylesheets/alchemy/icons.scss

@@ -48,7 +48,7 @@
   }
 
   &.close {
-    background-position: -416px -40px;
+    background-position: -416px -39px;
 
     &.small {
       background: none;
@@ -297,7 +297,7 @@
   }
 
   &.visit_page {
-    background-position: -31px -137px;
+    background-position: -31px -135px;
   }
 
   &.warning, &.warn, &.alert {