alchemy_cms 5.0.1 → 5.1.0

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

@@ -1,6 +1,5 @@
 /*  Alchemy CMS Sprockets Manifest
  *  -------------------------------
- *= require select2
  *= require_self
  */
 

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

@@ -1,5 +1,5 @@
 .resources-header {
-  padding: 2*$default-padding;
+  padding: 2 * $default-padding;
 }
 
 .resources-table-wrapper {
@@ -16,12 +16,11 @@ div#image_assign_filter_and_image_sizing {
 }
 
 #picture_archive {
-
   .selected_item_tools {
-    margin: -2*$default-padding;
+    margin: -2 * $default-padding;
     border-bottom: 1px solid $default-border-color;
-    margin-bottom: 4*$default-padding;
-    padding: 4*$default-padding;
+    margin-bottom: 4 * $default-padding;
+    padding: 4 * $default-padding;
     display: none;
   }
 }
@@ -37,7 +36,7 @@ div#image_assign_filter_and_image_sizing {
 }
 
 .picture_thumbnail {
-  margin: 2*$default-margin;
+  margin: 2 * $default-margin;
   background-color: #fff;
   position: relative;
   box-shadow: 0 0 0 1px $default-border-color;
@@ -80,8 +79,8 @@ div#image_assign_filter_and_image_sizing {
   }
 
   &:hover {
-
-    .picture_tool, .picture_tags {
+    .picture_tool,
+    .picture_tags {
       visibility: visible;
       opacity: 1;
     }
@@ -95,7 +94,6 @@ div#image_assign_filter_and_image_sizing {
 }
 
 #pictures {
-
   .thumbnail_background {
     @include zoom-in;
   }
@@ -165,25 +163,34 @@ div.assign_image_list_image {
   pointer-events: none;
 }
 
-.picture_tags, .picture_tool {
+.picture_tags,
+.picture_tool {
   visibility: hidden;
   opacity: 0;
   transition: opacity $transition-duration;
 }
 
 div#library_sidebar {
+  display: flex;
+  flex-direction: column;
   position: fixed;
   border-left: 1px solid $default-border-color;
   top: 0;
   right: 0;
   width: 232px;
-  padding: 86px 4*$default-padding 0 4*$default-padding;
+
+  padding: $top-menu-height + 2 * $default-padding 4 * $default-padding
+    $pagination-height + 2 * $default-padding 4 * $default-padding;
   height: 100%;
   z-index: 3;
   background-color: $light-gray;
 
   h2 {
-    margin-top: 4*$default-margin;
+    margin-top: 4 * $default-margin;
+  }
+
+  h3 {
+    margin: 2em 0 1em;
   }
 }
 
@@ -192,20 +199,19 @@ div#library_sidebar {
 }
 
 div#filter_bar {
-
   .selectboxit {
     width: 194px;
   }
 }
 
 .alchemy-dialog-body {
-
   #library_sidebar {
-    padding: 0 4*$default-padding;
+    padding: 0 4 * $default-padding;
   }
 }
 
-#assign_image_list, #assign_file_list {
+#assign_image_list,
+#assign_file_list {
   position: relative;
   height: 548px;
 }
@@ -234,7 +240,7 @@ div#filter_bar {
       display: block;
       line-height: 25px;
       text-decoration: none;
-      padding: $default-padding 2*$default-padding;
+      padding: $default-padding 2 * $default-padding;
     }
 
     .icon {

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

@@ -1,4 +1,7 @@
-button, input[type="submit"], a.button, input.button {
+button,
+input[type="submit"],
+a.button,
+input.button {
   @include button-defaults;
   position: relative;
 
@@ -14,7 +17,8 @@ button, input[type="submit"], a.button, input.button {
       );
     }
 
-    &:active, &:active:focus {
+    &:active,
+    &:active:focus {
       border-color: $button-hover-border-color;
       box-shadow: none;
     }
@@ -23,7 +27,7 @@ button, input[type="submit"], a.button, input.button {
   &.small {
     padding: $small-button-padding;
     vertical-align: inherit;
-    line-height: 4*$default-padding;
+    line-height: 4 * $default-padding;
     font-size: inherit;
   }
 
@@ -83,13 +87,14 @@ button, input[type="submit"], a.button, input.button {
       border: $default-border-width $default-border-style $icon-color;
       color: $icon-color;
 
-      .icon { color: inherit }
+      .icon {
+        color: inherit;
+      }
     }
   }
 
   &.disabled,
   &[disabled] {
-
     span {
       opacity: 0.3;
       cursor: not-allowed;
@@ -118,7 +123,8 @@ button.icon_button {
   border: 0 none;
   box-shadow: none;
 
-  &:disabled, &.disabled {
+  &:disabled,
+  &.disabled {
     background: transparent;
   }
 }
@@ -131,10 +137,15 @@ button.icon_button {
   position: relative;
   display: inline-block;
   text-align: center;
-  margin: 0 2*$default-margin;
 
-  &.active, &:active, &:hover {
-   .icon_button:not([disabled]) {
+  .toolbar_buttons & {
+    margin: 0 2 * $default-margin;
+  }
+
+  &.active,
+  &:active,
+  &:hover {
+    .icon_button:not([disabled]) {
       background-color: $default-border-color;
       cursor: pointer;
     }
@@ -161,8 +172,8 @@ button.icon_button {
   }
 }
 
-.button_with_label, .button_group {
-
+.button_with_label,
+.button_group {
   .icon_button {
     width: 29px;
     height: 29px;
@@ -179,16 +190,16 @@ button.icon_button {
     z-index: 30;
     background-color: $tooltip-background-color;
     color: $white;
-    padding: $default-padding 2*$default-padding 1.5*$default-padding;
+    padding: $default-padding 2 * $default-padding 1.5 * $default-padding;
     line-height: 1;
     box-shadow: 0 0 4px $default-border-color;
     white-space: nowrap;
     pointer-events: none;
     opacity: 0;
-    transition: .3s;
+    transition: 0.3s;
 
     &:before {
-      content: '';
+      content: "";
       position: absolute;
       bottom: -10px;
       left: 8px;
@@ -238,6 +249,6 @@ button.icon_button {
     visibility: visible;
     opacity: 1;
     top: -25px;
-    transition-delay: .2s;
+    transition-delay: 0.2s;
   }
 }

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

@@ -60,6 +60,7 @@
   max-width: 85%;
   margin-left: $default-margin;
   text-overflow: ellipsis;
+  transition: color $transition-duration;
 
   .has-hint & {
     max-width: 80%;
@@ -73,7 +74,6 @@
 
 .preview_text_element_name {
   font-size: $small-font-size;
-  text-shadow: #efefef 1px 1px 1px;
   font-weight: bold;
   line-height: 15px;
 }
@@ -106,6 +106,7 @@
   height: 16px;
   right: 8px;
   top: 10px;
+  transition: none;
 
   .error_icon {
     float: left;
@@ -126,6 +127,32 @@
   margin-bottom: 2*$default-margin;
   transition: box-shadow $transition-duration;
 
+  &.hidden {
+    display: block;
+    border-style: dashed;
+    opacity: 0.5;
+    transition: opacity $transition-duration;
+
+    > .element-header {
+      background-color: transparent;
+      background-image: linear-gradient(
+        45deg,
+        $light-gray 25%,
+        $medium-gray 25%,
+        $medium-gray 50%,
+        $light-gray 50%,
+        $light-gray 75%,
+        $medium-gray 75%,
+        $medium-gray 100%
+      );
+      background-size: 28.28px 28.28px;
+    }
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
   &.is-fixed {
     border-width: 0;
     border-radius: 0;
@@ -143,9 +170,17 @@
     }
   }
 
-  &.selected:not(.is-fixed) {
-    border-color: #c3c3c3;
-    box-shadow: 0 2px 8px rgba(#9b9b9b, 0.75);
+  &.selected:not(.is-fixed), &:hover {
+    &:not(.hidden) {
+      box-shadow: 0 2px 8px rgba(#9b9b9b, 0.75);
+    }
+  }
+
+  &.selected:not(.is-fixed):not(.folded):not(.dirty):not(.hidden) {
+    > .element-header {
+      background-color: $element-header-active-bg-color;
+      color: $element-header-active-color;
+    }
   }
 
   &.folded {
@@ -221,21 +256,10 @@
       }
     }
 
-    .element_tools {
-      display: flex;
-      width: 100%;
-      justify-content: space-between;
-      margin-left: 0;
-    }
-
     .element-content {
       margin: 4px 8px;
     }
 
-    .button_with_label {
-      margin: 0 4px;
-    }
-
     .content_editor,
     .picture_thumbnail {
       width: 100%;
@@ -313,7 +337,18 @@
   background-color: $element-header-bg-color;
   @extend .disable-user-select;
   cursor: pointer;
-  @include border-top-radius($default-border-radius);
+  border-radius: $default-border-radius;
+  transition: background-color $transition-duration;
+
+  .expanded & {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .icon {
+    color: inherit;
+    transition: color $transition-duration;
+  }
 
   >.hint-with-icon {
     position: absolute;
@@ -338,10 +373,14 @@
   padding: $default-padding 0;
   height: $element-toolbar-height;
   border-bottom: 1px solid $medium-gray;
+}
 
-  .element_tools {
-    float: left;
-    margin-left: -$default-margin;
+.element_tools {
+  display: flex;
+  width: 100%;
+
+  .button_with_label {
+    margin: 0 2px;
   }
 }
 

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

@@ -40,7 +40,7 @@ div#errors, div.errors {
 
 body.error {
   .error.message {
-    max-height: 95%;
+    max-height: 100%;
     overflow-y: scroll;
   }
 }

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

@@ -74,7 +74,6 @@ div#overlay_text_box {
 
   .page_name {
     display: inline-block;
-    max-width: 100px;
     margin-right: $default-margin;
     line-height: $header-height;
     white-space: nowrap;

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

@@ -27,7 +27,8 @@
 
   > .hint-bubble {
     visibility: hidden;
-    background: $light_yellow;
+    background-color: $hint-background-color;
+    color: $hint-text-color;
     border-radius: $default-border-radius;
     box-shadow: 0px 4px 8px rgba(0, 0, 0, .3);
     position: absolute;

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

@@ -256,7 +256,7 @@
   > a {
     display: flex;
     cursor: pointer;
-    padding: 0px 8px;
+    padding-left: 2 * $default-padding;
 
     &:focus {
       @include default-focus-style($box-shadow: inset 0 0 0 2px $focus-color);
@@ -273,19 +273,16 @@
     text-shadow: $text-shadow-light;
   }
 
-  .page_language {
-    display: inline-block;
-    color: $muted-text-color;
-    margin-right: 2px;
-    font-size: $small-font-size;
-    text-transform: uppercase;
-  }
-
+  .page_language,
   .page_site {
     display: inline-block;
     color: $muted-text-color;
-    margin-right: $default-margin;
     font-size: $small-font-size;
+    margin-right: $default-margin;
     line-height: 31px;
   }
+
+  .page_language {
+    text-transform: uppercase;
+  }
 }

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

@@ -7,7 +7,7 @@
   right: 0;
   width: 100%;
   left: 0px;
-  height: 52px;
+  height: $pagination-height;
   padding: 2*$default-padding;
   padding-left: $main-menu-width + 10px;
   text-align: left;

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

@@ -11,9 +11,19 @@
     top: 9px;
   }
 
-  label {
-    display: block;
+  button {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 30px;
     height: inherit;
+    appearance: none;
+    background-color: transparent;
+    border: 0 none;
+    border-radius: 0;
+    box-shadow: none;
+    margin: 0;
+    padding: 0;
   }
 }
 
@@ -44,7 +54,7 @@
 
   .search_input_field {
     width: 0;
-    height: inherit;
+    height: 100%;
     border: none;
     background-color: transparentize($form-field-background-color, 0.25);
     transition: