alchemy_cms 5.0.3 → 5.1.1

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:

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

@@ -1,15 +1,16 @@
-$medium-select-box-width: 90px;
+@import "alchemy_admin/select2";
 
 select {
   @include button-defaults(
     $background-color: $form-field-background-color,
     $hover-color: $form-field-background-color,
     $hover-border-color: darken($default-border-color, 10%),
-    $padding: 0 2*$default-padding,
+    $padding: 0 2 * $default-padding,
     $border: 1px solid $default-border-color,
     $box-shadow: none,
     $color: $text-color,
-    $margin: 0);
+    $margin: 0
+  );
   height: $form-field-height;
   padding: 0.4em 0.6em;
   max-width: 100%;
@@ -34,7 +35,8 @@ select {
         $border: 1px solid $default-border-color,
         $box-shadow: none,
         $color: $text-color,
-        $margin: 0);
+        $margin: 0
+      );
       background-image: none;
       display: block;
       font-weight: normal;
@@ -76,15 +78,18 @@ select {
       width: $medium-select-box-width;
     }
 
-    &.select2-container-active {
+    &.large {
+      width: $large-select-box-width;
+    }
 
-      .select2-choice, .select2-choices {
+    &.select2-container-active {
+      .select2-choice,
+      .select2-choices {
         @include default-focus-style($box-shadow: 0 0 0 1px $focus-color);
       }
     }
 
     &.select2-container-disabled {
-
       &:hover {
         + .with-hint > .hint-bubble {
           @include hint-hover-style;
@@ -96,7 +101,8 @@ select {
         top: 0;
       }
 
-      .select2-choice, .select2-choice:hover {
+      .select2-choice,
+      .select2-choice:hover {
         background-image: none;
         background-color: $light-gray;
         box-shadow: none;
@@ -106,7 +112,9 @@ select {
         .select2-arrow {
           border-color: $border-inset-color;
 
-          b { color: $border-inset-color; }
+          b {
+            color: $border-inset-color;
+          }
         }
       }
     }
@@ -140,7 +148,6 @@ select {
     margin-top: 0 !important;
 
     &.select2-container-active {
-
       .select2-choices {
         @include default-focus-style($box-shadow: 0 0 0 1px $focus-color);
       }
@@ -212,7 +219,8 @@ select {
       }
     }
 
-    .select2-no-results, .select2-searching {
+    .select2-no-results,
+    .select2-searching {
       padding: 8px;
       margin: 0;
     }
@@ -233,41 +241,39 @@ select {
 
   .select2-more-results,
   .select2-ajax-error {
-    padding: 2*$default-padding;
+    padding: 2 * $default-padding;
     margin-bottom: 0;
   }
 }
 
-.window_form, #filter_bar {
-
+.window_form,
+#filter_bar {
   .select2-container {
     width: 100%;
   }
 }
 
 .select_with_label {
-  margin: 0 3*$default-margin;
+  margin: 0 3 * $default-margin;
   display: inline-block;
   vertical-align: middle;
 
   label {
     display: inline-block;
     vertical-align: middle;
-    margin-right: 2*$default-margin;
+    margin-right: 2 * $default-margin;
   }
 }
 
 // overriding important of select2 default style for retina screens
 @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
-       only screen and (min-resolution: 2dppx) {
-
+  only screen and (min-resolution: 2dppx) {
   #alchemy {
-
     .select2-search input,
     .select2-search-choice-close,
     .select2-container .select2-choice abbr,
     .select2-container .select2-choice .select2-arrow b {
-       background-image: none !important;
+      background-image: none !important;
     }
   }
 }

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

@@ -6,7 +6,8 @@ table {
   width: 100%;
 
   &.list .tools {
-    button, a {
+    button,
+    a {
       display: inline-block;
       width: 18px;
       height: 18px;
@@ -22,8 +23,9 @@ table {
   }
 }
 
-.list td, .list th {
-  padding: 2*$default-padding;
+.list td,
+.list th {
+  padding: 2 * $default-padding;
   vertical-align: top;
   line-height: 18px;
   border-right: 1px solid $medium-gray;
@@ -93,9 +95,10 @@ td.heading {
   background-color: $table-row-hover-color;
 }
 
-td, th {
-
-  &.center, &.boolean {
+td,
+th {
+  &.center,
+  &.boolean {
     text-align: center;
   }
 
@@ -105,7 +108,6 @@ td, th {
 }
 
 td {
-
   &.file_name {
     word-break: break-all;
   }
@@ -118,7 +120,8 @@ td {
     width: 80px;
   }
 
-  &.date, &.datetime {
+  &.date,
+  &.datetime {
     width: 150px;
   }
 
@@ -137,9 +140,35 @@ td {
   &.rights {
     width: 60px;
   }
+
+  &.page_layout {
+    width: 160px;
+  }
+
+  &.status {
+    width: 80px;
+
+    .page_status {
+      margin: 0 $default-margin;
+    }
+  }
+
+  &.tags {
+    width: 180px;
+
+    .tag {
+      margin: 0;
+      padding: 0 2 + $default-padding;
+
+      &:before {
+        padding-right: $default-padding;
+      }
+    }
+  }
 }
 
-th.count, td.count {
+th.count,
+td.count {
   width: 120px;
   text-align: right;
   padding-right: 16px;