alchemy_cms 4.1.0.beta → 4.1.0.rc1

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

@@ -6,6 +6,13 @@ button, input[type="submit"], a.button, input.button {
     background-color: $secondary-button-bg-color;
     color: $secondary-button-text-color;
     border-color: $secondary-button-border-color;
+
+    &:focus {
+      @include default-focus-style(
+        $border-color: $secondary-button-text-color,
+        $box-shadow: 0 0 2px $button-text-color
+      );
+    }
   }
 
   &.small {
@@ -18,25 +25,9 @@ button, input[type="submit"], a.button, input.button {
   &.with_icon .icon {
     position: relative;
     top: -1px;
-    margin-right: $default-margin;
+    margin-right: 2 * $default-margin;
     color: inherit;
   }
-
-  &.icon_only {
-    margin: 0;
-    padding: 0;
-    border: 0 none;
-    background: none;
-
-    .icon {
-      margin: 0;
-    }
-  }
-
-  &.disabled {
-    line-height: 13px;
-    height: 29px;
-  }
 }
 
 .icon_button {
@@ -100,7 +91,7 @@ button, input[type="submit"], a.button, input.button {
   }
 
   &:focus {
-    @extend %blue-focus-style;
+    @include default-focus-style;
   }
 }
 
@@ -121,30 +112,13 @@ button.icon_button {
 .button_with_label {
   position: relative;
   display: inline-block;
-  vertical-align: top;
   text-align: center;
   margin: 0 2*$default-margin;
-  line-height: 0;
-
-  &.active, &:active {
 
-    .icon_button {
-      background-color: darken($white, 10%);
-      border: $default-border;
-      padding: 2px;
-      border-radius: $default-border-radius;
-    }
-  }
-
-  &:hover .icon_button {
-    border: $default-border;
-    padding: 2px;
-    border-radius: $default-border-radius;
-    cursor: pointer;
-
-    &:focus {
-      border: 0;
-      padding: 3px;
+  &.active, &:active, &:hover {
+   .icon_button {
+      background-color: $default-border-color;
+      cursor: pointer;
     }
   }
 
@@ -174,7 +148,7 @@ button.icon_button {
   .icon_button {
     width: 29px;
     height: 29px;
-    line-height: 23px;
+    line-height: 27px;
   }
 
   label {

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

@@ -70,13 +70,13 @@ $dialog-transition-duration: 150ms;
   margin: 2*$default-margin;
   @include border-top-radius($default-border-radius);
   box-shadow: $dialog-box-shadow;
+  background-color: $dialog-background-color;
   transition: min-height $dialog-transition-duration ease-in-out;
 
   div#jscropper {
     padding: 2 * $default-padding;
 
     .thumbnail_background {
-      @extend %thumbnail-background;
       width: 800px;
       height: 600px;
       position: relative;
@@ -167,7 +167,6 @@ $dialog-transition-duration: 150ms;
 
 .alchemy-dialog-body {
   position: relative;
-  background-color: $dialog-background-color;
   color: $text-color;
 
   .message {

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

@@ -7,7 +7,7 @@
   height: calc(100vh - #{$top-menu-height});
   border-left: $default-border;
   background-color: $light-gray;
-  transition: 200ms ease-in-out;
+  transition: $transition-duration ease-in-out;
   transform: translate3d($elements-window-width - $default-border-width, 0, 0);
 
   .elements-window-visible & {
@@ -138,7 +138,7 @@
   border-radius: $default-border-radius;
   background-color: $light-gray;
   margin-bottom: 2*$default-margin;
-  transition: box-shadow 250ms;
+  transition: box-shadow $transition-duration;
 
   &.not-draggable {
     opacity: 0.5;
@@ -292,6 +292,11 @@
   }
 }
 
+.element-content-editors {
+  display: flex;
+  flex-wrap: wrap;
+}
+
 .picture_gallery_images {
   overflow: hidden;
   margin: $default-margin 0;
@@ -310,7 +315,6 @@
 }
 
 .picture_thumbnail .picture_image {
-  height: 93px;
   overflow: hidden;
 
   img.img_paddingtop {
@@ -323,43 +327,54 @@
 }
 
 .linkable_essence_tools {
+  display: flex;
   position: absolute;
-  bottom: 6px;
+  bottom: 2 * $default-margin;
   right: 0;
 
   .icon_button {
     @include button-defaults(
       $background-color: $medium-gray,
       $hover-color: darken($medium-gray, 5%),
-      $border: $default-border);
-    width: $form-field-height;
+      $border: 1px solid #c0c0c0,
+      $hover-border-color: #c0c0c0,
+      $line-height: 30px,
+      $padding: 0,
+      $margin: 0,
+      $border-radius: 0,
+      $focus-border-color: $focus-color,
+      $focus-box-shadow: 0 0 0 2px $focus-color);
+    width: 29px;
     height: $form-field-height;
-    margin: 0 0 0 4px;
-    padding: 2px;
-    position: absolute;
-    bottom: 2px;
-    right: 28px;
-    border-radius: 0;
 
     &.disabled, &.disabled:hover {
       background-color: $form-field-disabled-bg-color;
     }
 
-    &.link-essence,
-    &.unlink-essence {
-      border: 1px solid #c0c0c0;
-    }
-
     &.linked.link-essence {
-      @include linked-button($border-radius: 0 0 0 0);
+      @include linked-button(
+        $border-radius: 0,
+        $line-height: 30px,
+        $padding: 0
+      );
+      &:focus {
+        border-radius: 0;
+      }
     }
 
     &.linked.unlink-essence {
-      @include linked-button($border-radius: 0 $default-border-radius $default-border-radius 0);
+      @include linked-button(
+        $border-radius: 0 $default-border-radius $default-border-radius 0,
+        $line-height: 30px,
+        $padding: 0
+      );
+      &:focus {
+        border-radius: 0 $default-border-radius $default-border-radius 0;
+      }
     }
 
     &.unlink-essence {
-      right: 0;
+      border-left-width: 0;
       @extend .right-rounded-border;
     }
   }
@@ -380,6 +395,7 @@
   left: 0;
   bottom: 0;
   z-index: 0;
+  width: 100%;
   padding: $default-padding $default-padding/2;
 
   a {
@@ -415,14 +431,9 @@
   }
 
   .picture_thumbnail {
-    width: 121px;
-    height: 125px;
+    width: 160px;
     margin: $default-margin 0;
-
-    .thumbnail_background {
-      width: 111px;
-      height: 93px;
-    }
+    padding-bottom: 28px;
   }
 
   &.validation_failed .picture_thumbnail {
@@ -538,6 +549,7 @@ select.long {
 }
 
 .content_editor {
+  width: 100%;
   padding: $default-padding 0;
   position: relative;
 
@@ -645,10 +657,14 @@ select.long {
   }
 
   &.essence_picture {
-    float: none;
-    height: auto;
-    display: inline-block;
-    vertical-align: middle;
+    width: 50%;
+    padding-left: 1px; // Compensate the box shadow
+    padding-right: $default-padding;
+
+    + .essence_picture {
+      padding-left: $default-padding;
+      padding-right: 1px; // Compensate the box shadow
+    }
   }
 }
 
@@ -741,6 +757,6 @@ textarea.has_tinymce {
 
 .essence_date--label {
   position: absolute;
-  right: 5px;
-  top: 35px;
+  right: 7px;
+  top: 37px;
 }

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

@@ -13,6 +13,17 @@ input[type="search"],
   }
 }
 
+input[type="checkbox"] {
+  transition: $transition-duration;
+
+  &:focus {
+    @include default-focus-style($box-shadow: (
+      inset 0 0 0 1px $focus-color,
+      0 0 0 1px $focus-color
+    ));
+  }
+}
+
 input[type="search"] {
   -webkit-appearance: textfield;
 }
@@ -26,8 +37,6 @@ input[type="search"]::-webkit-search-results-decoration  {
 
 textarea {
   height: auto;
-  padding: 4px 8px;
-  line-height: 19px;
 }
 
 .alchemy-char-counter {

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

@@ -164,7 +164,7 @@ form {
 
   .control_group {
     width: $form-right-width;
-    padding-top: 6px;
+    padding-top: 0.6em;
     float: right;
   }
 

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

@@ -89,16 +89,17 @@ div#overlay_text_box {
 }
 
 #archive_all {
+  height: calc(100% - 4px);
   padding-bottom: 60px;
 
   &.with_tag_filter {
 
     table {
-      padding-right: 230px;
+      padding-right: 242px;
     }
 
     > .info {
-      margin-right: 230px;
+      margin-right: 242px;
     }
   }
 

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

@@ -1,6 +1,6 @@
-$picture-overlay-handle-width: 18px;
+$picture-overlay-handle-width: 24px;
 $image-overlay-form-width: 350px - $picture-overlay-handle-width;
-$image-overlay-transition-duration: 200ms;
+$image-overlay-transition-duration: $transition-duration;
 $image-overlay-transition-easing: ease-in;
 
 .alchemy-image-overlay {
@@ -96,12 +96,7 @@ $image-overlay-transition-easing: ease-in;
 
   form .control-label,
   .resource_info .value label {
-    width: 100%;
     text-align: left;
-    float: none;
-    display: block;
-    padding: 0;
-    margin: $default-margin 0 0;
   }
 
   form .input .hint {
@@ -178,28 +173,39 @@ $image-overlay-transition-easing: ease-in;
 }
 
 #pictures_page_list {
-
   h3 {
-    padding: $default-padding 0 0;
+    display: flex;
+    padding: 4px 8px 0;
     margin: 0;
   }
 
-  ol {
+  ul {
     padding-left: 0;
-    list-style-position: inside;
+    list-style-type: none;
   }
 
   .list {
     margin: 2*$default-margin 0;
 
     li {
+      display: flex;
       padding: 2*$default-padding;
       border-radius: $default-border-radius;
       white-space: normal;
-
-      &.even { background: #F7F7F7 }
+      margin-bottom: 1em;
     }
   }
+
+  .icon {
+    padding-top: 3px;
+    text-align: left;
+    width: 7%;
+  }
+
+  p {
+    width: 93%;
+    margin: 0;
+  }
 }
 
 .picture-overlay-navigation {

data/app/assets/stylesheets/alchemy/jquery.datetimepicker.scss

@@ -92,11 +92,6 @@
   margin-left: 0;
 }
 
-.xdsoft_datetimepicker .xdsoft_datepicker.active+.xdsoft_timepicker {
-  margin-top: 8px;
-  margin-bottom: 3px;
-}
-
 .xdsoft_datetimepicker .xdsoft_mounthpicker {
   position: relative;
   text-align: center;
@@ -143,6 +138,10 @@
   }
 }
 
+.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_prev:before {
+  content: fa-content($fa-var-caret-up);
+}
+
 .xdsoft_datetimepicker .xdsoft_today_button {
   float: left;
   margin: 0 5px;
@@ -163,6 +162,10 @@
   }
 }
 
+.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_next:before {
+  content: fa-content($fa-var-caret-down);
+}
+
 .xdsoft_datetimepicker .xdsoft_next,
 .xdsoft_datetimepicker .xdsoft_prev ,
 .xdsoft_datetimepicker .xdsoft_today_button {
@@ -187,12 +190,8 @@
 
 .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_prev,
 .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_next {
-  float: none;
-  height: 15px;
-  width: 30px;
-  display: block;
-  margin-left: 14px;
-  margin-top: 7px;
+  width: 100%;
+  text-align: center;
 }
 
 .xdsoft_datetimepicker.xdsoft_rtl .xdsoft_timepicker .xdsoft_prev,
@@ -203,8 +202,6 @@
 }
 
 .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_prev {
-  margin-bottom: 8px;
-  margin-top: 0;
 
   &:before {
     border-width: 0 8px 8px 8px;

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

@@ -11,14 +11,15 @@
   left: -358px;
   width: 400px;
   z-index: 10000;
-  background: $blue;
-  transition: left 0.15s ease-in;
+  background: $main-menu-bg-color;
+  transition: left 0.25s cubic-bezier(0.23, 1, 0.32, 1);
   box-shadow: 0 0 0 1px $white;
   box-sizing: border-box;
   height: auto;
   padding: 8px 40px 8px 8px;
   overflow: hidden;
-  font: $default-font-style;
+  font-family: $default-font-family;
+  font-size: $base-font-size;
 
   * {
     box-sizing: border-box;
@@ -37,7 +38,7 @@
     position: absolute;
     right: 10px;
     top: 50%;
-    background: image-url('alchemy/icon.svg') 0 0 no-repeat;
+    background: image-url('alchemy/icon-white.svg') 1px 1px no-repeat;
     background-size: 24px 24px;
     transform: translateY(-50%);
   }
@@ -58,11 +59,12 @@
 
       a, button {
         @include button-defaults(
-          $background-color: $blue,
-          $hover-color: rgba($white, 0.15),
+          $background-color: $main-menu-bg-color,
+          $hover-color: $blue,
           $hover-border-color: $white,
           $border: 1px solid $white,
           $padding: 0.5em 0,
+          $margin: 0,
           $color: $white
         );
         width: 100%;

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

@@ -113,6 +113,13 @@
       color: $main-menu-active-text-color;
       text-decoration: none;
       text-shadow: none;
+
+      &:focus {
+        @include default-focus-style(
+          $box-shadow: inset 0 0 0 2px $main-menu-active-text-color,
+          $border-radius: 0
+        );
+      }
     }
   }
 
@@ -123,6 +130,13 @@
     color: $main-menu-text-color;
     transition: color $transition-duration $transition-easing;
     @include antialiased-font-smoothing;
+
+    &:focus {
+      @include default-focus-style(
+        $box-shadow: inset 0 0 0 2px $focus-color,
+        $border-radius: 0
+      );
+    }
   }
 }
 
@@ -208,6 +222,10 @@ body:not(.collapsed-menu) {
   > a {
     cursor: pointer;
     padding: 0px 8px;
+
+    &:focus {
+      @include default-focus-style($box-shadow: inset 0 0 0 2px $focus-color);
+    }
   }
 
   .icon.close {

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

@@ -7,7 +7,7 @@
   border: 0 none;
   background: #fff;
   border-right: $default-border;
-  transition: 200ms ease-in-out;
+  transition: $transition-duration ease-in-out;
 
   .collapsed-menu & {
     left: $collapsed-main-menu-width;

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

@@ -47,62 +47,6 @@
   text-align: center;
 }
 
-#tags_tag_list {
-  text-align: left;
-  padding-top: 5px;
-
-  ul.tags {
-    max-height: 10em;
-    padding: 1px;
-    margin: 0;
-    margin-top: 2px;
-    overflow: auto;
-    text-align: left;
-    list-style-type: none;
-
-    li {
-      background-color: $medium-gray;
-      padding: 4px;
-      margin: 0 0 4px 0;
-      position: relative;
-      border-radius: $default-border-radius;
-
-      &.odd { background-color: #eaf3f9 }
-
-      input {
-        position: absolute;
-        top: 3px;
-        left: 4px;
-      }
-
-      label {
-        display: inline-block;
-        margin-left: 2em;
-        line-height: 1.6em;
-      }
-    }
-  }
-
-  .js_filter_field_box {
-    position: relative;
-    top: 0;
-    right: 0;
-    margin: 0;
-
-    .js_filter_field {
-      width: 100%;
-    }
-
-    label {
-      display: none
-    }
-  }
-
-  .js_filter_field_clear {
-    right: 4px;
-  }
-}
-
 #toolbar,
 #overlay_toolbar {
 
@@ -136,6 +80,11 @@
     &:focus {
       width: 250px;
       background-color: $form-field-background-color;
+
+      @include default-focus-style(
+        $box-shadow: inset 0 0 0 2px $focus-color,
+        $border-radius: 0
+      );
     }
   }
 
@@ -143,6 +92,6 @@
   .js_filter_field_box .icon,
   .search_field_clear,
   .js_filter_field_clear {
-    top: 16px;
+    top: 18px;
   }
 }

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

@@ -68,7 +68,7 @@ select {
     &.select2-container-active {
 
       .select2-choice, .select2-choices {
-        @extend %blue-focus-style;
+        @include default-focus-style($box-shadow: 0 0 0 1px $focus-color);
       }
     }
 
@@ -107,7 +107,7 @@ select {
     &.select2-container-active {
 
       .select2-choices {
-        @extend %blue-focus-style;
+        @include default-focus-style($box-shadow: 0 0 0 1px $focus-color);
       }
     }
 
@@ -150,29 +150,15 @@ select {
         height: 29px;
 
         input {
-          color: $text-color;
-          padding: $default-padding 6px;
+          color: $form-field-text-color;
+          padding: 3px 6px;
+          margin: 0;
         }
       }
     }
   }
 }
 
-.tag_list, .autocomplete_tag_list {
-  .select2-container.select2-container-multi {
-    .select2-search-choice {
-      padding: 0;
-
-      div {
-        @include tag-base(
-          $padding: $default-padding 6*$default-padding $default-padding 3*$default-padding,
-          $margin: 0
-        );
-      }
-    }
-  }
-}
-
 .select2-drop {
 
   .select2-search {
@@ -205,7 +191,7 @@ select {
 
       &.select2-highlighted {
         background: $button-hover-bg-color;
-        color: $white;
+        color: $button-text-color;
       }
 
       &.select2-result-with-children {