alchemy_cms 4.0.6 → 4.1.0.beta

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

@@ -2,34 +2,31 @@ button, input[type="submit"], a.button, input.button {
   @include button-defaults;
   position: relative;
 
+  &.secondary {
+    background-color: $secondary-button-bg-color;
+    color: $secondary-button-text-color;
+    border-color: $secondary-button-border-color;
+  }
+
   &.small {
     padding: $default-padding 3*$default-padding;
     vertical-align: inherit;
     line-height: 4*$default-padding;
     font-size: inherit;
-
-    &.with_icon {
-      padding: $default-padding 3*$default-padding $default-padding 6px;
-    }
   }
 
-  &.with_icon {
-    padding: 6px 18px 6px 6px;
-
-    span.icon {
-      margin-top: -$default-margin;
-      margin-right: $default-margin;
-      height: 14px;
-    }
+  &.with_icon .icon {
+    position: relative;
+    top: -1px;
+    margin-right: $default-margin;
+    color: inherit;
   }
 
   &.icon_only {
     margin: 0;
     padding: 0;
     border: 0 none;
-    box-shadow: none;
     background: none;
-    border-radius: 0;
 
     .icon {
       margin: 0;
@@ -50,23 +47,8 @@ button, input[type="submit"], a.button, input.button {
   padding: 3px;
   overflow: hidden;
   text-align: center;
-
-  .icon {
-    display: inline-block;
-    vertical-align: middle;
-    margin-top: -2px;
-  }
-
-  .old_icon {
-    position: relative;
-    background-repeat: no-repeat;
-    width: 22px;
-    height: 20px;
-    display: inline-block;
-    vertical-align: middle;
-    top: -1px;
-    left: -1px;
-  }
+  text-shadow: none;
+  border-radius: $default-border-radius;
 
   img {
     position: absolute;
@@ -85,37 +67,19 @@ button, input[type="submit"], a.button, input.button {
     top: 0px;
     background: none;
     border: none;
-    box-shadow: none;
 
     .icon {
       position: absolute;
       top: 50%;
-      height: 8px;
       transform: translateX(-50%) translateY(-50%);
-
-      &:before {
-        line-height: 10px;
-      }
-
-      &.delete-small {
-        background-position: -4px -76px;
-      }
+      transition: color 250ms;
     }
 
     &:hover {
-      border: $default-border-width $default-border-style $button-hover-border-color;
-      border-radius: $default-border-radius;
-      background: $button-hover-bg-color;
-    }
-  }
-
-  &.old_icon {
-    width: 20px;
-    height: 19px;
+      border: $default-border-width $default-border-style $icon-color;
+      color: $icon-color;
 
-    img {
-      top: 0;
-      left: 1px;
+      .icon { color: inherit }
     }
   }
 
@@ -143,7 +107,6 @@ button, input[type="submit"], a.button, input.button {
 button.icon_button {
   background: transparent;
   border: 0 none;
-  border-radius: 0;
   box-shadow: none;
 
   &:disabled, &.disabled {
@@ -169,14 +132,14 @@ button.icon_button {
       background-color: darken($white, 10%);
       border: $default-border;
       padding: 2px;
-      @extend %rounded-border;
+      border-radius: $default-border-radius;
     }
   }
 
   &:hover .icon_button {
     border: $default-border;
     padding: 2px;
-    @extend %rounded-border;
+    border-radius: $default-border-radius;
     cursor: pointer;
 
     &:focus {
@@ -215,15 +178,15 @@ button.icon_button {
   }
 
   label {
-    @extend %rounded-border;
+    border-radius: $default-border-radius;
     position: absolute;
     visibility: hidden;
     top: -20px;
     left: 50%;
     margin-left: -13px;
     z-index: 30;
-    background: $dark-gray;
-    color: #fff;
+    background-color: $tooltip-background-color;
+    color: $white;
     padding: $default-padding 2*$default-padding;
     line-height: 1;
     box-shadow: 0 0 4px $default-border-color;
@@ -238,7 +201,7 @@ button.icon_button {
       bottom: -10px;
       left: 8px;
       border: 5px transparent solid;
-      border-top-color: $dark-gray;
+      border-top-color: $tooltip-background-color;
     }
 
     &.center {

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

@@ -0,0 +1,26 @@
+#clipboard_items {
+
+  ul {
+    list-style-type: none;
+    margin: 0 0 8px;
+    padding: 0;
+    height: 220px;
+    overflow-y: auto;
+    overflow-x: hidden;
+
+    li {
+      padding: 2*$default-padding;
+      border: $default-border;
+      background-color: white;
+      border-radius: $default-border-radius;
+
+      &.elements {
+        background-color: $medium-gray;
+      }
+
+      > .icon {
+        margin-right: $default-padding;
+      }
+    }
+  }
+}

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

@@ -1,32 +1,26 @@
 #dashboard {
   overflow: auto;
-  padding: 4*$default-padding 2*$default-padding;
+  padding: 4*$default-padding 0;
   width: 100%;
   position: relative;
 
   h1 {
-    font-size: 2em;
-    margin: 0 0 8px 0;
+    font-size: 1.5em;
+    margin: 0 0 8px 8px;
   }
 
-  h2 {
-    padding: 0;
-    margin-bottom: 16px;
+  p {
+    margin: 0 0 16px 8px;
   }
 
-  div.column {
+  .column {
     width: 50%;
     float: left;
     padding-right: 16px;
   }
 
-  div.widget {
-    width: 100%;
+  .widget {
     margin-bottom: 16px;
-    background-color: $medium-gray;
-    border: $default-border;
-    @extend .top-rounded-border;
-    float: left;
 
     h2 {
       padding: 2 * $default-padding;
@@ -38,43 +32,16 @@
     }
 
     table {
-      width: 100%;
-      padding: 0;
-      border-spacing: 0;
-
       td {
-        padding: 2 * $default-padding;
-        margin-bottom: 0;
         position: relative;
-        color: #aaa;
 
         &:first-child { width: 40% }
         form { float: right }
-        span { color: #333 }
       }
     }
   }
 }
 
-div#sideboard {
-  right: 16px;
-  top: 82px;
-  position: absolute;
-  width: 240px;
-  padding: 16px;
-
-  div.sideboard_widget img {
-    margin-bottom: 16px;
-    float: none;
-  }
-}
-
-div#license {
-  overflow: auto;
-  height: 24em;
-  background-color: white;
-}
-
 #update_check {
   height: 16px;
 

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

@@ -1,3 +1,5 @@
+$dialog-transition-duration: 150ms;
+
 .alchemy-image-overlay-container,
 .alchemy-dialog-container {
   position: fixed;
@@ -10,7 +12,10 @@
   text-align: center;
   white-space: nowrap;
   opacity: 0;
-  transition: opacity 200ms linear;
+  transform: scale(0.98);
+  transition-property: transform, opacity;
+  transition-duration: $dialog-transition-duration;
+  transition-timing-function: ease-in;
 
   // vertical aligment
   &:before {
@@ -24,6 +29,7 @@
 
   &.open {
     opacity: 1;
+    transform: scale(1);
   }
 }
 
@@ -36,7 +42,7 @@
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.0);
-  transition: background-color 200ms linear;
+  transition: background-color $dialog-transition-duration linear;
 
   &.closable {
     cursor: pointer;
@@ -46,7 +52,7 @@
 .alchemy-dialog-overlay {
 
   &.open {
-    background-color: rgba(0, 0, 0, 0.4);
+    background-color: rgba($dialog-overlay-color, $dialog-overlay-opacity);
   }
 }
 
@@ -61,15 +67,10 @@
 
 .alchemy-dialog {
   white-space: normal;
-  background-color: $light-gray;
   margin: 2*$default-margin;
   @include border-top-radius($default-border-radius);
-  box-shadow: 0 0 2px rgba(#000,0.8);
-  transition: min-height 200ms ease-in-out;
-
-  &.modal {
-    box-shadow: 0 0 4px #666;
-  }
+  box-shadow: $dialog-box-shadow;
+  transition: min-height $dialog-transition-duration ease-in-out;
 
   div#jscropper {
     padding: 2 * $default-padding;
@@ -125,10 +126,10 @@
   height: $dialog-header-height;
   padding: 0 2*$default-padding;
   line-height: $dialog-header-height;
-  background: $header-color;
-  color: $header-text-color;
+  background: $dialog-header-color;
+  color: $dialog-header-text-color;
   font-weight: normal;
-  font-size: $header-font-size;
+  font-size: $dialog-header-font-size;
   @include border-top-radius($default-border-radius);
 
   .ui-draggable & {
@@ -143,6 +144,7 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  @include antialiased-font-smoothing;
 }
 
 .alchemy-image-overlay-close,
@@ -150,11 +152,6 @@
   position: absolute;
   z-index: 1;
   cursor: pointer;
-
-  .icon.close.small {
-    line-height: 1;
-    vertical-align: text-top;
-  }
 }
 
 .alchemy-dialog-close {
@@ -163,13 +160,14 @@
   padding: 0 $default-padding;
   color: inherit;
 
-  .icon.close.small {
-    font-size: 16px;
+  .icon {
+    color: inherit;
   }
 }
 
 .alchemy-dialog-body {
   position: relative;
+  background-color: $dialog-background-color;
   color: $text-color;
 
   .message {
@@ -184,18 +182,6 @@
     }
   }
 
-  ul#sitemap ul li span.sitemap_sitename {
-
-    &.selected_page a {
-      font-weight: bold;
-      padding-left: 4px;
-    }
-
-    a:hover {
-      font-weight: bold;
-    }
-  }
-
   .buttons {
     text-align: right;
 
@@ -207,10 +193,7 @@
 }
 
 .alchemy-dialog-buttons {
-  float: left;
-  clear: both;
-  width: 100%;
-  padding: 4*$default-padding 0;
+  padding-top: 4*$default-padding;
   text-align: right;
 
   button:first-child {
@@ -224,4 +207,8 @@
   .ui-tabs-panel {
     padding: 4*$default-padding;
   }
+
+  .ui-tabs.ui-corner-all {
+    border-radius: 0;
+  }
 }

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

@@ -1,14 +1,22 @@
 #alchemy_elements_window {
   position: absolute;
   right: 0;
-  top: 73px;
-  width: 400px;
-  height: auto;
+  top: $top-menu-height;
+  z-index: 20;
+  width: $elements-window-width;
+  height: calc(100vh - #{$top-menu-height});
   border-left: $default-border;
+  background-color: $light-gray;
   transition: 200ms ease-in-out;
+  transform: translate3d($elements-window-width - $default-border-width, 0, 0);
+
+  .elements-window-visible & {
+    transform: translate3d(0, 0, 0);
+  }
 }
 
 #element_area {
+  height: calc(100vh - #{$top-menu-height + $toolbar-height});
   overflow-x: hidden;
   overflow-y: auto;
 
@@ -39,13 +47,13 @@
   }
 
   .preview_text_quote {
-    font-size: 10px;
+    font-size: $small-font-size;
     line-height: 15px;
   }
 }
 
 .preview_text_element_name {
-  font-size: 10px;
+  font-size: $small-font-size;
   text-shadow: #efefef 1px 1px 1px;
   font-weight: bold;
   line-height: 15px;
@@ -64,18 +72,8 @@
 
   .element.icon {
     position: absolute;
-    top: 0;
-    left: 0;
-  }
-
-  .icon {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-
-    &.element_dirty {
-      background-position: -160px -166px;
-    }
+    top: 3px;
+    left: 1px;
   }
 }
 
@@ -88,7 +86,7 @@
   width: 16px;
   height: 16px;
   right: 8px;
-  top: 8px;
+  top: 10px;
 
   .error_icon {
     float: left;
@@ -106,7 +104,7 @@
   margin: 1px;
   width: 119px;
   border: 1px solid #c0c0c0;
-  @extend %rounded-border;
+  border-radius: $default-border-radius;
   height: 123px;
 
   a {
@@ -117,10 +115,8 @@
     text-decoration: none;
     overflow: hidden;
     text-align: center;
-    font-weight: bold;
     line-height: 104px;
-    @extend %rounded-border;
-    font-size: 40px;
+    border-radius: $default-border-radius;
     background-color: $light-gray;
 
     &:hover {
@@ -128,21 +124,21 @@
     }
 
     .icon {
-      font-size: 30px;
-      width: 30px;
-      height: 30px;
+      font-size: 1.5em;
       position: absolute;
-      top: 48px;
-      left: 44px;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
     }
   }
 }
 
 .element-editor {
   border: 1px solid $default-border-color;
-  @extend %rounded-border;
+  border-radius: $default-border-radius;
   background-color: $light-gray;
   margin-bottom: 2*$default-margin;
+  transition: box-shadow 250ms;
 
   &.not-draggable {
     opacity: 0.5;
@@ -157,8 +153,8 @@
   }
 
   &.selected {
-    border-color: $blue;
-    box-shadow: 0 0 4px $blue;
+    border-color: #c3c3c3;
+    box-shadow: 0 2px 8px rgba(#9b9b9b, 0.75);
   }
 
   &.folded {
@@ -191,7 +187,7 @@
     float: left;
     margin-top: 8px;
     margin-bottom: 4px;
-    font-size: 10px;
+    font-size: $small-font-size;
     text-align: left;
   }
 
@@ -209,7 +205,7 @@
     line-height: 21px;
     background-color: #f5dea9;
     margin-top: 4px;
-    @extend %rounded-border;
+    border-radius: $default-border-radius;
 
     .icon.warning {
       position: relative;
@@ -223,7 +219,7 @@
     padding: $default-padding 0;
 
     label {
-      font-size: 10px;
+      font-size: $small-font-size;
     }
 
     .select2-container {
@@ -250,14 +246,15 @@
 .element-header {
   position: relative;
   padding: 2*$default-padding;
-  background-color: $medium-gray;
+  background-color: $element-header-bg-color;
   @extend .disable-user-select;
   cursor: pointer;
+  @include border-top-radius($default-border-radius);
 
   > .hint-with-icon {
     position: absolute;
     right: 32px;
-    top: 8px;
+    top: 10px;
 
     .hint-bubble {
       left: auto;
@@ -276,7 +273,7 @@
 .element-toolbar {
   padding: $default-padding 0;
   height: $element-toolbar-height;
-  background-color: #f0f0f0;
+  // background-color: #f0f0f0;
 
   .element_tools {
     float: left;
@@ -299,11 +296,11 @@
   overflow: hidden;
   margin: $default-margin 0;
   border: 1px solid $default-border-color;
-  @extend %rounded-border;
+  border-radius: $default-border-radius;
   background-color: $medium-gray;
   padding: 1px;
 
-  .essence_picture_editor {
+  .essence_picture {
     margin: 1px;
     float: left;
     height: 126px;
@@ -331,16 +328,23 @@
   right: 0;
 
   .icon_button {
-    @include button-defaults;
-    width: 29px;
-    height: 28px;
+    @include button-defaults(
+      $background-color: $medium-gray,
+      $hover-color: darken($medium-gray, 5%),
+      $border: $default-border);
+    width: $form-field-height;
+    height: $form-field-height;
     margin: 0 0 0 4px;
     padding: 2px;
     position: absolute;
-    bottom: 3px;
+    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;
@@ -361,25 +365,6 @@
   }
 }
 
-.expand_element,
-.fold_element {
-  background-image: image-url('alchemy/icons.png');
-  background-repeat: no-repeat;
-  height: 16px;
-  width: 16px;
-  text-decoration: none;
-  display: block;
-  margin: 1px;
-}
-
-.expand_element {
-  background-position: -160px -72px;
-}
-
-.fold_element {
-  background-position: -192px -72px;
-}
-
 .droppable_element_placeholder {
   height: 36px;
   border: 1px dotted $button-border-color;
@@ -390,43 +375,31 @@
 
 .edit_images_bottom {
   position: absolute;
+  display: flex;
+  justify-content: space-between;
   left: 0;
   bottom: 0;
   z-index: 0;
-  width: inherit;
-  padding: $default-padding;
-
-  > a, > span.icon {
-    float: left;
-    margin: 0 $default-margin/2;
-    width: 18px;
-    height: 18px;
-  }
+  padding: $default-padding $default-padding/2;
 
   a {
+    margin: 0 $default-padding/2;
+    padding: $default-padding/2;
+    cursor: pointer;
 
     &.linked {
-      position: relative;
-      @extend %rounded-border;
+      border-radius: $default-border-radius;
       background-color: $linked-color;
-      border: 1px solid $button-border-color;
-      bottom: 1px;
-      margin-right: 2px;
-      width: 18px;
-      height: 18px;
-      margin-left: 0;
-
-      .icon { margin-left: 1px }
     }
-  }
 
-  a.disabled, > span.icon {
-    opacity: 0.3;
-    cursor: default;
+    &.disabled {
+      opacity: 0.3;
+      cursor: default;
+    }
   }
 }
 
-.essence_picture_editor {
+.essence_picture {
   position: relative;
 
   .picture_tool_delete {
@@ -456,10 +429,8 @@
     border-color: $error_border_color
   }
 
-  .thumbnail_background.missing:before {
-    font-family: 'Alchemy Icons';
-    @extend .icon-pictures:before;
-    font-size: 48px;
+  .thumbnail_background .icon {
+    font-size: 4em;
     color: $medium-gray;
     vertical-align: top;
   }
@@ -472,7 +443,7 @@
     background-color: white;
     background-color: rgba(255, 254, 255, 0.7);
     padding: 4px 8px;
-    font-size: 10px;
+    font-size: $small-font-size;
     text-align: right;
     height: 12px;
     overflow: hidden;
@@ -504,8 +475,8 @@
     margin: 6px 0 $default-margin;
     border: $default-border;
     background-color: $white;
-    @extend %rounded-border;
-    height: $default-form-field-height;
+    border-radius: $default-border-radius;
+    height: $form-field-height;
 
     .validation_failed & {
       color: $error_text_color;
@@ -514,18 +485,11 @@
   }
 
   .file_icon {
+    display: inline-block;
     text-align: center;
     float: left;
-    line-height: 25px;
     width: 24px;
-
-    .icon {
-      margin: $default-margin;
-    }
-
-    .assign_file {
-      background-position: -480px -40px;
-    }
+    padding: 6px 4px;
   }
 
   .file_name {
@@ -533,8 +497,8 @@
     overflow: hidden;
     float: left;
     max-width: 80%;
-    line-height: $default-form-field-height;
-    font-size: 10px;
+    line-height: 28px;
+    font-size: $small-font-size;
     text-overflow: ellipsis;
   }
 }
@@ -548,18 +512,8 @@
 
   a {
     text-decoration: none;
-    width: 16px;
-    height: 16px;
-    margin: 5px $default-margin;
+    padding: 6px $default-margin;
     float: left;
-
-    &.assign_file {
-      background: image-url('alchemy/icons.png') -512px -40px;
-    }
-
-    &.edit_file {
-      background: image-url('alchemy/icons.png') -160px -167px;
-    }
   }
 }
 
@@ -603,12 +557,6 @@ select.long {
       width: 70%;
     }
 
-    .icon.warning {
-      vertical-align: text-bottom;
-      margin-left: 2px;
-      margin-right: 6px;
-    }
-
     .button {
       float: right;
       margin: 0;
@@ -637,10 +585,9 @@ select.long {
   }
 
   label {
-    display: block;
+    display: inline-block;
     margin-bottom: 2px;
-    font-size: 10px;
-    text-shadow: #fff5e1 1px 1px 0;
+    font-size: $small-font-size;
     line-height: 15px;
     text-indent: 1px;
 
@@ -655,24 +602,6 @@ select.long {
       min-width: 90px;
       margin-right: 4px;
     }
-
-    a.icon_button.small {
-      width: 10px;
-      height: 10px;
-      display: none;
-
-      .icon {
-        top: 1px;
-        right: 1px;
-      }
-
-      &:hover {
-
-        .icon {
-          right: 2px;
-        }
-      }
-    }
   }
 
   &.essence_select {
@@ -688,16 +617,11 @@ select.long {
     }
   }
 
-  &:hover label a.icon_button.small {
-    display: inline-block;
-    vertical-align: middle;
-  }
-
   select.essence_editor_select {
-    @extend %rounded-border;
+    border-radius: $default-border-radius;
     background: white;
     border: 1px solid $button-border-color;
-    font-size: 11px;
+    font-size: $default-font-size;
     height: 21px;
     line-height: 21px;
     padding: 2px;
@@ -720,7 +644,7 @@ select.long {
     }
   }
 
-  &.essence_picture_editor {
+  &.essence_picture {
     float: none;
     height: auto;
     display: inline-block;
@@ -742,9 +666,9 @@ textarea.has_tinymce {
 }
 
 .essence_html_editor textarea {
-  font-family: $mono-font-face;
+  font-family: $mono-font-family;
   resize: vertical;
-  font-size: 11px;
+  font-size: $form-field-font-size;
 }
 
 .text_short_float_left {
@@ -761,7 +685,7 @@ textarea.has_tinymce {
   background-color: $error_background_color;
   padding: 2*$default-padding;
   list-style-type: none;
-  @extend %rounded-border;
+  border-radius: $default-border-radius;
   color: $error_text_color;
   border: 1px solid $error_border_color;
 
@@ -773,8 +697,8 @@ textarea.has_tinymce {
 
 .content_editor .hint-with-icon,
 .content_editor .with-hint,
-.element-handle .warning {
-  margin-left: 0;
+.element-handle .hint-with-icon {
+  margin: 0;
 
   > .hint-bubble {
     left: -7px;
@@ -786,7 +710,7 @@ textarea.has_tinymce {
   }
 }
 
-.content_editor .hint-with-icon {
+.element-handle .hint-with-icon {
   top: -1px;
 }
 
@@ -818,5 +742,5 @@ textarea.has_tinymce {
 .essence_date--label {
   position: absolute;
   right: 5px;
-  top: 31px;
+  top: 35px;
 }