locomotivecms 3.0.1 → 3.1.0.rc1

data/app/assets/stylesheets/locomotive/new/_transitions.scss

@@ -0,0 +1,96 @@
+// =============================================================================
+// Transitions
+// =============================================================================
+
+// Close sidebar.
+
+.sidebar-closed {
+  .sidebar {
+    left: -300px;
+  }
+  .navigation-app {
+    left: 0;
+    .navigation-trigger {
+      .fa-bars {
+        margin-right: 5px;
+        margin-left: 0;
+      }
+      .fa-caret-right {
+        display: inline-block;
+      }
+      .fa-caret-left {
+        display: none;
+      }
+    }
+  }
+  .content-main {
+    left: 0;
+  }
+}
+
+// Open sidebar.
+
+.sidebar-open {
+  .sidebar {
+    left: 0;
+  }
+  .content-main {
+    left: 300px;
+  }
+  .navigation-app {
+    left: 300px;
+  }
+  .content-overlay {
+    display: none;
+    max-width: 100%;
+    opacity: 1;
+  }
+  &.live-editing {
+    .content-main {
+      right: -300px;
+      overflow: hidden;
+    }
+    .content-overlay {
+      display: block;
+    }
+  }
+}
+
+// Close actionbar by adding this class. Removing it will open it back.
+
+.actionbar-closed {
+  .actionbar {
+    left: -500px;
+    box-shadow: 0;
+  }
+  .actionbar-trigger {
+    right: -30px;
+    i {
+      transform: rotate(180deg);
+    }
+  }
+  .content-preview {
+    left: 0;
+  }
+}
+
+// Responsive
+// =============================================================================
+
+@media (max-width: $screen-md-min) {
+  .sidebar-open {
+    .content-main,
+    .navigation-app {
+      right: -300px;
+      left: 300px;
+    }
+    .content-main {
+      overflow: hidden;
+    }
+    .content-overlay {
+      display: block;
+      max-width: 100%;
+      opacity: 1;
+    }
+  }
+}

data/app/assets/stylesheets/locomotive/{components → old}/_content_assets.scss

@@ -1,17 +1,17 @@
 body.live-editing .drawer {
-  .content-assets, .content-assets-list {
+  .content-assets,
+  .content-assets-list {
     margin-left: $live_editing_expand_bar_width;
   }
 }
 
 .content-assets {
-
   .updatable {
     margin-top: 140px;
 
     > .nav-container {
       height: 39px;
-      padding: 3px 0px 10px 0px;
+      padding: 3px 0 10px 0;
     }
 
     > .list-container {
@@ -28,11 +28,11 @@ body.live-editing .drawer {
   }
 
   .top-dropzone {
-    z-index: 10;
     position: absolute;
-    top: 0px;
-    height: 140px;
+    top: 0;
+    z-index: 10;
     width: 100%;
+    height: 140px;
   }
 
   .dropzone {
@@ -49,29 +49,27 @@ body.live-editing .drawer {
 
     .instructions {
       margin-top: 10px;
-      text-align: center;
-
-      color: $assets_dropzone_instructions_color;
       font-size: 12px;
+      color: $assets_dropzone_instructions_color;
+      text-align: center;
 
       strong {
-        color: #555;
         font-size: 14px;
+        color: #555;
       }
 
       i {
-        color: #bec1c2;
         font-size: 65px;
+        color: #bec1c2;
       }
     }
 
     .progress {
+      @include box-shadow(none);
+      height: $assets_dropzone_progress_size;
       margin-top: 10px;
-
       background: $assets_dropzone_progress_background;
-      height: $assets_dropzone_progress_size;
       border-radius: $assets_dropzone_progress_size / 2;
-      @include box-shadow(none);
 
       .progress-bar {
         background: $assets_dropzone_progress_bar_color;
@@ -81,51 +79,48 @@ body.live-editing .drawer {
 }
 
 .content-assets-list {
-
-  margin-top: 10px;
-
   display: flex;
+  align-items: left;
   flex-direction: row;
   flex-wrap: wrap;
-  align-items: left;
+  margin-top: 10px;
 
   .asset {
-    border-radius: $asset_border_radius;
-    background: $asset_background;
-    padding: 10px 15px;
-    margin: 0px 20px 20px 0px;
     position: relative;
-
     width: $asset_width;
     height: $asset_height;
+    padding: 10px 15px;
+    margin: 0 20px 20px 0;
+    background: $asset_background;
+    border-radius: $asset_border_radius;
 
     h2 {
-      color: $asset_title_color;
+      margin: 0 0 4px 0;
       font-size: 14px;
-      margin: 0px 0px 4px 0px;
+      color: $asset_title_color;
       text-align: right;
     }
 
     .size {
+      margin-bottom: 10px;
       font-size: 11px;
-      text-align: right;
       color: $asset_size_color;
-      margin-bottom: 10px;
+      text-align: right;
     }
 
     .body {
-      width: 100%;
-      height: $asset_height - 106;
       display: flex;
       align-items: center;
       justify-content: center;
+      width: 100%;
+      height: $asset_height - 106;
     }
 
     .small-thumbnail {
       display: inline-block;
+      padding: $asset_thumbnail_border_radius;
       background: $asset_thumbnail_background;
       border-radius: $asset_thumbnail_border_radius;
-      padding: $asset_thumbnail_border_radius;
 
       img {
         border: $asset_thumbnail_img_border;
@@ -137,18 +132,23 @@ body.live-editing .drawer {
         height: 120px;
         border: 2px solid $asset_not_image_border_color;
 
-        &.pdf { background: $asset_pdf_background; }
-        &.media { background: $asset_media_background; }
-        &.other { background: $asset_other_background; }
+        &.pdf {
+          background: $asset_pdf_background;
+        }
+        &.media {
+          background: $asset_media_background;
+        }
+        &.other {
+          background: $asset_other_background;
+        }
 
         span {
-          display: block;
           position: relative;
           top: 40px;
-
-          color: $asset_not_image_text_color;
+          display: block;
           font-size: 22px;
           font-weight: bold;
+          color: $asset_not_image_text_color;
           text-align: center;
           text-transform: uppercase;
 
@@ -160,20 +160,22 @@ body.live-editing .drawer {
 
     .actions {
       position: absolute;
-      bottom: 10px;
       right: 15px;
+      bottom: 10px;
 
       a.remove {
         color: $asset_remove_icon_color;
       }
     }
-
   }
-
 }
 
 .edit-assets-container {
-  @include full-space();
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
 
   .actions {
     position: absolute;
@@ -182,10 +184,10 @@ body.live-editing .drawer {
   }
 
   .image-container {
-    background-color: $cropping_asset_background;
-    overflow: hidden;
     width: 100%;
+    overflow: hidden;
     text-align: center;
+    background-color: $cropping_asset_background;
   }
 
   .image-container {
@@ -199,12 +201,11 @@ body.live-editing .drawer {
 
   .cropper-label {
     position: absolute;
-    top: 0px;
-    left: 0px;
-    background: $cropping_asset_label_background;
-    color: $cropping_asset_label_color;
-    font-size: 11px;
+    top: 0;
+    left: 0;
     padding: 3px 6px;
+    font-size: 11px;
+    color: $cropping_asset_label_color;
+    background: $cropping_asset_label_background;
   }
-
 }

data/app/assets/stylesheets/locomotive/{components → old}/_list.scss

@@ -1,20 +1,16 @@
 .content {
-
   p.text {
     color: $paragraph_color;
   }
 
   .big-list {
-
     .item {
-      background: $content_list_item_background_color;
-      border-top: $content_list_item_border_size solid $content_list_item_border_color;
-
-      min-height: $content_list_item_min_height;
-
+      position: relative;
       display: flex;
       align-items: center;
-      position: relative;
+      min-height: $content_list_item_min_height;
+      background: $content_list_item_background_color;
+      border-top: $content_list_item_border_size solid $content_list_item_border_color;
 
       &:not(.hide):last-child {
         border-bottom: $content_list_item_border_size solid $content_list_item_border_color;
@@ -23,8 +19,9 @@
       .draggable {
         margin-right: $padding-base-horizontal;
         i {
+          @include user-select(none);
           font-size: 20px;
-          @include draggable;
+          cursor: move;
         }
       }
 
@@ -36,14 +33,14 @@
 
       .text {
         &:before {
+          @include transition(all .2s ease-in-out);
           position: absolute;
-          top: 0px;
-          left: 0px;
-          height: 100%;
+          top: 0;
+          left: 0;
           width: $content_list_item_border_hover_size;
+          height: 100%;
           background-color: transparent;
           content: " ";
-          @include transition(all 0.2s ease-in-out);
         }
 
         a {
@@ -58,12 +55,12 @@
 
         .stamp {
           margin-top: 5px;
-          color: $content_list_item_stamp_color;
           font-size: $content_list_item_stamp_size;
+          color: $content_list_item_stamp_color;
 
           img {
+            margin: 0 6px;
             border: 1px solid $content_list_item_stamp_color;
-            margin: 0px 6px;
           }
         }
       }
@@ -90,19 +87,16 @@
     }
 
     .sortable-placeholder {
-      height: $content_list_item_min_height;
       @include make-sm-column(12);
-
+      height: $content_list_item_min_height;
       background-color: $content_list_item_placeholder_background;
 
       .inner {
-        margin: $padding-base-horizontal 0px;
-        background-color: $content_list_item_placeholder;
         height: $content_list_item_min_height - (2 * $padding-base-horizontal);
+        margin: $padding-base-horizontal 0;
+        background-color: $content_list_item_placeholder;
         border-radius: ($content_list_item_min_height - (2 * $padding-base-horizontal)) / 2;
       }
-
     }
-
   }
 }

data/app/assets/stylesheets/locomotive/old/_live_editing.scss

@@ -0,0 +1,37 @@
+body.live-editing {
+  .content .close-button {
+    @include opacity(0);
+    left: 0;
+  }
+  &.full-width-preview {
+    .content .close-button {
+      @include opacity(1);
+    }
+    .content.expand-button {
+      display: none;
+    }
+    .content {
+      background-color: $live_editing_content_alt_background_color;
+      > .inner {
+        @include opacity(0);
+      }
+    }
+  }
+  .simple_form.rte-expanded {
+    fieldset.inputs.expanded {
+      position: absolute !important;
+    }
+  }
+
+  .simple_form fieldset .input.rte .form-wrapper .wysihtml5-toolbar > .wysihtml5-toolbar-group {
+    margin-right: 12px;
+    &:last-child {
+      margin-right: 0px;
+    }
+  }
+}
+
+.embed-page {
+  height: 100%;
+  padding-bottom: 0;
+}