locomotivecms 3.0.0.rc6 → 3.0.0.rc7

data/app/assets/stylesheets/locomotive/account/_navs.scss

@@ -0,0 +1,42 @@
+// =============================================================================
+// Navs
+// =============================================================================
+
+@import "bootstrap/navs";
+
+// Used as tabs in setting screens.
+
+.nav-tabs {
+  margin: 50px 0 25px;
+  border-bottom: 1px solid $border-color-base;
+  > li {
+    display: inline-block;
+    margin-right: 25px;
+    margin-bottom: -1px;
+    vertical-align: middle;
+    border: 0;
+    > a {
+      display: inline-block;
+      padding: 0 0 10px;
+      color: $gray;
+      border: 0;
+      border-bottom: 1px solid transparent;
+      transition: all $base-transition-speed linear;
+      &:hover {
+        color: $brand-primary;
+        background: transparent;
+        border: 0;
+      }
+    }
+    &.active > a {
+      &,
+      &:hover,
+      &:focus {
+        color: $brand-primary;
+        background: transparent;
+        border: 0;
+        border-bottom: 1px solid $brand-primary;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/locomotive/account/_public.scss

@@ -22,7 +22,7 @@
   height: 100%;
   text-align: center;
   animation: fade-down 1s ease-out;
-  &:before {
+  &::before {
     display: inline-block;
     height: 100%;
     vertical-align: middle;
@@ -34,35 +34,11 @@
 
 .public-wrapper {
   display: inline-block;
-  width: 480px;
+  width: 460px;
   margin: 25px 0;
   vertical-align: middle;
 }
 
-// Adds a logo above the public box.
-
-.public-logo {
-  display: inline-block;
-  img,
-  span {
-    display: inline-block;
-    vertical-align: middle;
-  }
-  img {
-    display: inline-block;
-    height: 26px;
-    margin-right: 10px;
-    vertical-align: middle;
-  }
-  span {
-    margin-top: 2px;
-    font-family: $font-family-sans-serif-brand;
-    font-size: 20px;
-    line-height: 1.6;
-    color: $white;
-  }
-}
-
 // Contains the box styling.
 
 .public-box {
@@ -123,12 +99,6 @@
   }
 }
 
-.public-link-divider {
-  display: inline-block;
-  color: rgba($white, .7);
-  vertical-align: middle;
-}
-
 // Public entries collection for applying scrollbar when height is to high.
 
 .public-entries {
@@ -208,7 +178,6 @@
     margin-left: 0;
   }
   .public-box {
-    display: inline-block;
     padding: 50px 20px;
   }
   .public-intro.with-padding {

data/app/assets/stylesheets/locomotive/account/_variables.scss

@@ -16,8 +16,8 @@ $white: #fff;
 
 // Colors
 
-$brand-primary: #54b9cd;
-$brand-primary-alt: #5488cc;
+$brand-primary: #1c77c3;
+$brand-primary-alt: lighten($brand-primary, 20);
 $brand-success: #00aa8f;
 $brand-warning: #f0ad4e;
 $brand-danger: #d9684c;

data/app/assets/stylesheets/locomotive/application.scss

@@ -1,5 +1,5 @@
-//= require select2
-//= require select2-bootstrap
+//= require select2/select2
+//= require select2-bootstrap-css/select2-bootstrap
 //= require bootstrap-tagsinput/bootstrap-tagsinput
 //= require locomotive/cropper
 //= require locomotive/bootstrap-switch

data/app/assets/stylesheets/locomotive/base/_fonts.scss

@@ -1,5 +1,3 @@
-@import "compass/css3";
-
 // Noto Sans
 @font-face {
   font-family: 'Noto Sans';

data/app/assets/stylesheets/locomotive/base/form/_api_key.scss

@@ -15,7 +15,7 @@
         font-size: 14px;
 
         border: $form_input_control_border_size solid $form_input_control_border_color;
-        @include border-radius($form_input_control_border_size);
+        border-radius: $form_input_control_border_size;
       }
     }
 

data/app/assets/stylesheets/locomotive/base/form/_array_input.scss

@@ -12,8 +12,8 @@
           border-bottom: $form_input_array_border_size solid $form_input_array_border_color;
 
           .inner-row {
-            @include display-flex;
-            @include flex-align(center);
+            display: flex;
+            align-items: center;
 
             min-height: $form_input_array_item_height;
 
@@ -58,7 +58,7 @@
 
           .inner {
             background-color: $form_input_array_placeholder;
-            @include border-radius($form_input_array_placeholder_height / 2);
+            border-radius: $form_input_array_placeholder_height / 2;
             border: none;
             margin-top: $form_input_array_placeholder_margin - ($form_input_array_border_size / 2);
             margin-bottom: $form_input_array_placeholder_margin;
@@ -89,22 +89,14 @@
           }
         }
 
-        .form-control.select2-container {
+        .select2-container {
           background: transparent;
           border: none;
-          @include border-radius(0px);
+          border-radius: 0px;
           left: -$form_input_control_border_size - 1px;
-          padding: $select2-vertical-padding $form_input_control_border_size * 2;
-
-          &.select2-dropdown-open {
-            padding-top: $select2-vertical-padding;
-            padding-bottom: $select2-vertical-padding + 1px;
-          }
-
-          &.select2-dropdown-open.select2-drop-above {
-            padding-top: $select2-vertical-padding;
-            padding-bottom: $select2-vertical-padding;
-          }
+          padding-right: $form_input_control_border_size * 2;
+          padding-left: $form_input_control_border_size * 2;
+          padding-bottom: $select2-vertical-padding + 4px;
         }
 
       }
@@ -120,7 +112,7 @@
         .list {
           & > .item {
             .inner-row {
-              @include flex-wrap;
+              flex-wrap: wrap;
 
               > .text {
                 margin-right: $padding-base-horizontal;

data/app/assets/stylesheets/locomotive/base/form/_base.scss

@@ -12,7 +12,7 @@
     .input {
       background: $form_input_background_color;
       padding: $form_input_padding;
-      @include border-radius($form_input_radius);
+      border-radius: $form_input_radius;
       @include transition(background-color 0.2s ease-in-out);
 
       header {
@@ -65,11 +65,11 @@
         display: block;
         background: $form_input_wrapper_background_color;
         border: $form_input_control_border_size solid $form_input_control_border_color;
-        @include border-radius($form_input_control_border_size);
+        border-radius: $form_input_control_border_size;
 
         > input, > select, .input-group > input {
           border: none;
-          @include border-radius(0px);
+          border-radius: 0px;
         }
 
         .input-group {

data/app/assets/stylesheets/locomotive/base/form/_document_picker.scss

@@ -20,22 +20,15 @@
           }
         }
 
-        .form-control.select2-container {
+        .select2-container {
           background: transparent;
           border: none;
-          @include border-radius(0px);
-          left: -$form_input_control_border_size - 1px;
-          padding: $select2-vertical-padding $form_input_control_border_size * 2;
-
-          &.select2-dropdown-open {
-            padding-top: $select2-vertical-padding;
-            padding-bottom: $select2-vertical-padding + 1px;
-          }
+          border-radius: 0px;
 
-          &.select2-dropdown-open.select2-drop-above {
-            padding-top: $select2-vertical-padding;
-            padding-bottom: $select2-vertical-padding;
-          }
+          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;
         }
 
       }
@@ -43,45 +36,3 @@
     }
   }
 }
-
-
-// .simple_form fieldset > .input.document_picker .form-wrapper {
-//   border: none;
-//   background: transparent;
-
-//   .select2-container {
-//     width: 100%;
-//     background: #fff;
-
-//     .select2-choice {
-//       border: none;
-//     }
-//   }
-// }
-
-// .simple_form .document_picker .select2-container {
-//   width: 70%;
-//   border: none;
-//   padding: 0px;
-
-//   // @include box-shadow(none);
-//   // border: none;
-
-//   // border: $form_input_control_border_size solid $form_input_control_border_color;
-//   // @include border-radius($form_input_control_border_size);
-
-//   // padding: $select2-vertical-padding $select2-horizontal-padding;
-
-//   // @include transition(none);
-
-//   .select2-choice {
-//     background: transparent;
-//     @include box-shadow(none);
-//     border: none;
-
-//     .select2-arrow {
-//       background: transparent;
-//       border: none;
-//     }
-//   }
-// }

data/app/assets/stylesheets/locomotive/base/form/_select2.scss

@@ -11,96 +11,75 @@ $select2-height:                  32px;
 }
 
 .simple_form .select2-container {
+  width: 100% !important;
 
-  @include box-shadow(none);
+  box-shadow: none;
   border: none;
 
   border: $form_input_control_border_size solid $form_input_control_border_color;
-  @include border-radius($form_input_control_border_size);
+  border-radius: $form_input_control_border_size;
 
   padding: $select2-vertical-padding $select2-horizontal-padding;
 
   height: auto;
 
-  @include transition(none);
+  transition: none;
 
-  .select2-choice {
-    background: transparent;
-    @include box-shadow(none);
+  .select2-selection {
+    box-shadow: none;
     border: none;
+    border-radius: 0px;
 
     height: $select2-height;
     line-height: $select2-height;
 
-    padding-left: 8px;
-
-    .select2-chosen {
-      padding: 0px;
+    .select2-selection__rendered {
+      line-height: $select2-height;
     }
 
-    .select2-arrow {
-      background: transparent;
-      border: none;
+    .select2-selection__arrow {
+      top: 9px;
+      right: 5px;
     }
   }
+}
 
-  &.select2-drop-above .select2-choice {
-    background: transparent;
-    @include box-shadow(none);
-    border: none;
-  }
+.select2-container {
+  padding: $select2-vertical-padding $select2-horizontal-padding;
 
-  &.select2-container-active {
+  .select2-dropdown {
+    box-shadow: none;
     border: $form_input_control_border_size solid $form_input_control_border_color;
-  }
-
-  &.select2-dropdown-open {
-    border-bottom: none;
-    @include border-top-radius($form_input_control_border_size);
+    border-radius: $form_input_control_border_size;
 
-    padding-bottom: $select2-vertical-padding + $form_input_control_border_size;
-  }
-
-  &.select2-dropdown-open.select2-drop-above {
-    border-top: none;
-    border-bottom: $form_input_control_border_size solid $form_input_control_border_color;
-    @include border-top-radius(0px);
-    @include border-bottom-radius($form_input_control_border_size);
-
-    padding-top: $select2-vertical-padding + $form_input_control_border_size;
-    padding-bottom: $select2-vertical-padding;
-  }
+    &.select2-dropdown--above {
+      border-bottom: none;
+      border-bottom-left-radius: 0px;
+      border-bottom-right-radius: 0px;
+    }
 
-}
+    &.select2-dropdown--below {
+      position: relative;
+      top: -10px;
+      left: -5px;
+      border-top: none;
+      border-top-left-radius: 0px;
+      border-top-right-radius: 0px;
+    }
 
-.select2-results {
-  .select2-no-results, .select2-searching {
-    color: $form_input_help_color;
-    font-size: $form_input_help_size;
-    background: $form_input_background_color;
-    font-family: $alt-font-family-sans-serif;
-  }
+    .select2-results__option--highlighted {
+      background: $brand-primary;
+    }
 
-  .select2-highlighted {
-    background: $brand-primary;
+    .select2-results__option {
+      min-height: $select2-height;
+    }
   }
 }
 
-
-.select2-drop-active {
-  border: $form_input_control_border_size solid $form_input_control_border_color;
-  border-top: none;
-  @include box-shadow(none);
-}
-
-.select2-drop.select2-drop-above.select2-drop-active {
-  border-top: $form_input_control_border_size solid $form_input_control_border_color;
-  @include box-shadow(none);
-}
-
 // custom label
 
-.select2-chosen, .select2-result-label {
+.select2-selection, .select2-results {
   img.flag {
     margin-right: 5px;
   }
@@ -116,16 +95,13 @@ $select2-height:                  32px;
       top: -8px;
 
       .select2-container {
-        width: 280px;
-
-        .select2-choice {
-          height: 18px;
-          line-height: 18px;
+        width: 280px !important;
+        padding-top: 0px;
+        padding-bottom: 0px;
 
-          .select2-arrow {
-            b {
-              background-position: 0px -2px;
-            }
+        .select2-selection {
+          .select2-selection__arrow {
+            top: 3px;
           }
         }
       }