locomotivecms 3.0.1 → 3.1.0.rc1

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

@@ -1,35 +1,25 @@
 .main {
-
   background: $main_background_color;
 
   .header-row {
-
-    padding: 20px 0px;
+    padding: 20px 0;
 
     h1 {
-      font-size: 22px;
+      margin: 0;
       font-family: $font-family-sans-serif;
+      font-size: 22px;
       color: $main_title_color;
-      margin: 0px;
     }
 
     .actions {
       text-align: right;
       p {
-        margin: 0px;
+        margin: 0;
       }
 
       a {
         margin-left: 5px;
       }
     }
-
-  }
-
-}
-
-body.without-site {
-  .main {
-    margin-top: 20px;
   }
 }

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

@@ -0,0 +1,11 @@
+.scrollable {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: auto;
+  > .main {
+    height: 100%;
+  }
+}

data/app/assets/stylesheets/locomotive/{components/misc/_nav.scss → old/_search_bars.scss}

@@ -5,22 +5,20 @@
     display: inline-block;
 
     .form-group {
-      border: 1px solid #dadada;
       position: relative;
       top: -6px;
-
       padding: 4px 6px;
-
-      margin-bottom: 0px;
+      margin-bottom: 0;
+      border: 1px solid #dadada;
 
       input[type=text] {
-        width: 200px;
-        display: inline-block;
-        border: none;
         @include box-shadow(none);
-        padding: 0px;
+        display: inline-block;
+        width: 200px;
         height: 19px;
+        padding: 0;
         font-size: 12px;
+        border: none;
       }
 
       .icon {
@@ -28,7 +26,6 @@
         color: $nav-tabs-link-color;
       }
     }
-
   }
 
   &.search-bar-in-nav {
@@ -38,18 +35,16 @@
       top: 2px;
     }
   }
-
 }
 
 @media (max-width: $screen-md-min) {
-
   .search-bar {
-    text-align: left;
     margin-bottom: 16px;
+    text-align: left;
 
     form {
       .form-group {
-        top: 0px;
+        top: 0;
       }
     }
 
@@ -58,5 +53,4 @@
       margin-top: 16px;
     }
   }
-
 }

data/app/assets/stylesheets/locomotive/{globals → old}/_variables.scss

@@ -5,16 +5,47 @@
 // Bootstrap variables
 // =============================================================================
 
-$brand-primary: #1c77c3 !default;
-$brand-success: #54cc68 !default;
-$brand-warning: #f0ad4e !default;
-$brand-danger: #d9684c !default;
+// Shades of gray
+
+$black: #000;
+$gray-darkest: #232528;
+$gray-darker: lighten($gray-darkest, 15);
+$gray-dark: lighten($gray-darkest, 30);
+$gray: lighten($gray-darkest, 45);
+$gray-light: lighten($gray-darkest, 65);
+$gray-lighter: lighten($gray-darkest, 75);
+$gray-lightest: lighten($gray-darkest, 83);
+$white: #fff;
+
+// Colors
+
+$brand-primary: #1c77c3;
+$brand-primary-alt: lighten($brand-primary, 20);
+$brand-success: #00aa8f;
+$brand-warning: #f0ad4e;
+$brand-danger: #d9684c;
+
+// Fonts
+
+$font-family-sans-serif: "Noto Sans", sans-serif;
+$font-family-sans-serif-brand: "Muli", sans-serif;
+$font-size-base: 14px;
+
+// Common
+
+$border-radius-base: 3px;
+$border-color-base: $gray-lighter;
+$padding-base-vertical: 12px;
+$padding-base-horizontal: 15px;
+$base-transition-speed: .3s;
+
+// Headings
+
+$headings-font-family: $font-family-sans-serif-brand;
+$headings-color: $gray-dark;
 
 // Typography
 
-$font-family-sans-serif: "Noto Sans", sans-serif !default;
-$font-family-serif: Georgia, "Times New Roman", Times, serif !default;
-$font-size-base: 14px !default;
 $font-size-large: 18px !default;
 $font-size-small: 12px !default;
 $line-height-base: 1.428571429 !default;
@@ -42,6 +73,7 @@ $btn-success-border: darken($btn-success-bg, 10%) !default;
 
 $input-border: #fff !default;
 $input-height-base: ($line-height-computed + ($padding-base-vertical * 2) + 4) !default;
+$input-color: $gray-dark;
 
 // Media queries breakpoints
 
@@ -91,10 +123,10 @@ $alert-warning-text: $state-warning-text !default;
 
 // Badges
 
-$badge-color: #dedfe0 !default;
-$badge-bg: #616161 !default;
-$badge-font-weight: normal !default;
-$badge-border-radius: 3px !default;
+$badge-color: $gray-light;
+$badge-bg: lighten($gray-darkest, 5);
+$badge-font-weight: 500;
+$badge-border-radius: $border-radius-base;
 
 // Custom variables
 // =============================================================================
@@ -122,7 +154,7 @@ $sidebar_link_height: 45px;
 $sidebar_link_arrow_color: #616161;
 $sidebar_link_icon_color: #949999;
 $sidebar_link_background_hover_color: #474747;
-$drawer_width: 40em;
+$drawer_width: 560px;
 $drawer_background_color: white;
 $drawer_title_color: #666;
 $control_window_button_size: 30px;
@@ -204,3 +236,6 @@ $site_new_color: #fff;
 $nprogress-color: #fec145;
 $nprogress-height: 10px;
 $nprogress-zindex: 10100;
+$base-transition-speed: .3s;
+
+@import "bootstrap/variables";

data/app/assets/stylesheets/locomotive/{base → old}/form/_array_input.scss

@@ -1,9 +1,7 @@
 .simple_form {
-
   fieldset .input.array {
-
     .form-wrapper {
-      padding: 0px $padding-base-horizontal;
+      padding: 0 $padding-base-horizontal;
 
       .list {
         & > .item {
@@ -14,12 +12,11 @@
           .inner-row {
             display: flex;
             align-items: center;
-
             min-height: $form_input_array_item_height;
 
             > .icon {
-              line-height: $line-height-computed;
               margin-right: $padding-base-horizontal;
+              line-height: $line-height-computed;
 
               .img-circle {
                 width: 35px;
@@ -28,10 +25,11 @@
             }
 
             > .draggable {
+              @include user-select(none);
               margin-right: $padding-base-horizontal;
-              color: $form_input_array_draggable_color;
               font-size: 16px;
-              @include draggable;
+              color: $form_input_array_draggable_color;
+              cursor: move;
             }
 
             > .buttons {
@@ -46,34 +44,31 @@
         }
 
         &.new-input-disabled > .item:last-child,
-        &.new-input-disabled > .item.last-child
-         {
+        &.new-input-disabled > .item.last-child {
           border-bottom: none;
         }
 
         .sortable-placeholder {
-          background-color: $form_input_array_placeholder_background;
           @include make-row();
           height: $form_input_array_placeholder_height + $form_input_array_placeholder_margin * 2;
+          background-color: $form_input_array_placeholder_background;
 
           .inner {
-            background-color: $form_input_array_placeholder;
-            border-radius: $form_input_array_placeholder_height / 2;
-            border: none;
+            height: $form_input_array_placeholder_height;
             margin-top: $form_input_array_placeholder_margin - ($form_input_array_border_size / 2);
+            margin-right: $form_input_array_border_size;
             margin-bottom: $form_input_array_placeholder_margin;
             margin-left: $form_input_array_border_size;
-            margin-right: $form_input_array_border_size;
-            height: $form_input_array_placeholder_height
+            background-color: $form_input_array_placeholder;
+            border: none;
+            border-radius: $form_input_array_placeholder_height / 2;
           }
-
         }
-
       }
 
       .new-field {
-
-        .field, .button {
+        .field,
+        .button {
           height: 44px;
           line-height: 44px;
         }
@@ -83,6 +78,7 @@
 
           input[type=text] {
             @include box-shadow(none);
+            height: 44px;
             padding-left: $padding-base-horizontal - $form_input_control_border_size;
             background: white;
             border: none;
@@ -90,22 +86,20 @@
         }
 
         .select2-container {
-          background: transparent;
-          border: none;
-          border-radius: 0px;
           left: -$form_input_control_border_size - 1px;
           padding-right: $form_input_control_border_size * 2;
-          padding-left: $form_input_control_border_size * 2;
           padding-bottom: $select2-vertical-padding + 4px;
+          padding-left: $form_input_control_border_size * 2;
+          background: transparent;
+          border: none;
+          border-radius: 0;
         }
-
       }
     }
   }
 }
 
 @media (max-width: $screen-sm-min) {
-
   .simple_form {
     fieldset .input.array {
       .form-wrapper {
@@ -119,7 +113,7 @@
               }
 
               > .buttons {
-                margin-left: 0px;
+                margin-left: 0;
               }
             }
           }
@@ -127,5 +121,4 @@
       }
     }
   }
-
 }

data/app/assets/stylesheets/locomotive/{base → old}/form/_base.scss

@@ -61,6 +61,7 @@
       }
 
       .form-wrapper {
+        position: relative;
         margin-top: 12px;
         display: block;
         background: $form_input_wrapper_background_color;

data/app/assets/stylesheets/locomotive/{base → old}/form/_file_input.scss

@@ -1,5 +1,4 @@
 .simple_form {
-
   fieldset .input.file {
     .form-wrapper {
       padding: 6px $padding-base-horizontal 7px $padding-base-horizontal;
@@ -9,30 +8,33 @@
         overflow: hidden;
 
         input[type=file] {
-          cursor: inherit;
-          display: block;
-          filter: alpha(opacity=0);
-          opacity: 0;
           position: absolute;
-          right: 0;
           top: 0;
-          height: 1px;
+          right: 0;
+          display: block;
           width: 1px;
+          height: 1px;
           text-indent: -99999;
+          cursor: inherit;
+          opacity: 0;
+          filter: alpha(opacity=0);
         }
 
-        .current-file, .new-file {
+        .current-file,
+        .new-file {
           img {
-            border: 2px solid $form_input_control_border_color;
             width: 29px;
             height: 29px;
             margin-right: 5px;
+            border: 2px solid $form_input_control_border_color;
           }
         }
 
-        .current-file, .new-file, .no-file {
-          line-height: 30px;
+        .current-file,
+        .new-file,
+        .no-file {
           height: 30px;
+          line-height: 30px;
         }
       }
 
@@ -46,22 +48,15 @@
     }
 
     &.mark-as-removed {
-
       .current-file {
-        @include opacity(0.3);
-        img {
-
-        }
-
+        @include opacity(.3);
         text-decoration: line-through;
       }
-
     }
   }
 }
 
 @media (max-width: $screen-sm-min) {
-
   .simple_form {
     fieldset .input.file {
       .form-wrapper {
@@ -76,5 +71,4 @@
       }
     }
   }
-
 }

data/app/assets/stylesheets/locomotive/{base → old}/form/_rte.scss

@@ -9,6 +9,10 @@
 
         > .wysihtml5-toolbar-group {
           margin-right: 20px;
+
+          &:last-child {
+            margin-right: 0px;
+          }
         }
 
         a {
@@ -71,3 +75,7 @@
   }
 
 }
+
+body.sidebar-closed .simple_form.rte-expanded .tab-pane fieldset.inputs.expanded {
+  left: 1px;
+}