fae-rails 2.1.0 → 3.0.0

data/app/assets/stylesheets/fae/globals/layout/_content-header.scss

@@ -10,7 +10,7 @@ $content-header-padding: 16px;
   position: absolute;
   left: 0;
   top: 0;
-  box-shadow: 0 0 10px $c-grey;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -43,14 +43,14 @@ $content-header-padding: 16px;
     display: inline-block;
     vertical-align: top;
     padding: 6px 0;
-    border-bottom: 4px solid transparent;
+    border-bottom: 2px solid transparent;
     margin: 0 12px;
     font-size: 13px;
     color: $c-darkest-grey;
 
     &:hover {
       color: $c-text-heavy;
-      border-bottom-color: $c-custom-highlight;
+      border-bottom-color: var(--highlight-color);
     }
   }
 
@@ -67,13 +67,19 @@ $content-header-padding: 16px;
     &.-active {
       a {
         color: $c-text-heavy;
-        border-bottom-color: $c-custom-highlight;
+        border-bottom-color: var(--highlight-color);
       }
     }
   }
 }
 
 .content-header-buttons {
+  position: absolute;
+  height: 100%;
+  top: 0;
+  display: flex;
+  align-items: center;
+  right: 30px;
   a {
     margin-right: 5px;
 
@@ -81,6 +87,10 @@ $content-header-padding: 16px;
       margin-right: 0;
     }
   }
+
+  input[type=submit].saving {
+    color: darkgray;
+  }
 }
 
 .content-header-select {

data/app/assets/stylesheets/fae/globals/legacy/_pre-1.3.scss

@@ -80,7 +80,7 @@
 .main_content-section-title {
   padding: 17px 40px;
   color: pickForegroundColor($c-custom-highlight, $c-white, $c-black);
-  background: $c-custom-highlight;;
+  background: $c-custom-highlight;
   border-top: 1px solid $c-border;
   text-transform: uppercase;
   font-size: 14px;

data/app/assets/stylesheets/fae/globals/navigation/_footer.scss

@@ -32,7 +32,7 @@
 
     &:hover {
       path {
-        fill: $c-custom-highlight;
+        fill: var(--highlight-color);
       }
     }
   }

data/app/assets/stylesheets/fae/globals/navigation/_header.scss

@@ -6,7 +6,7 @@
   left: 0;
   width: 100%;
   background: $c-header-bg;
-  border-bottom: $header-border-width solid $c-custom-highlight;
+  border-top: $header-border-width solid var(--highlight-color);
 
   @include bp(large) {
     padding: 0 $content-buffer;
@@ -87,7 +87,7 @@
   }
 }
 
-.main-header-nav {
+.main-header-nav, .utility-nav {
   @include transition(opacity .2s ease-in-out);
 
   a {
@@ -107,7 +107,7 @@
 
     &.-parent-current {
       > a {
-        background: $c-custom-highlight;
+        background: var(--highlight-color);
       }
     }
 

data/app/assets/stylesheets/fae/globals/navigation/_multi-col-subnav.scss

@@ -0,0 +1,50 @@
+$col_width: 176px;
+$col_width_padding: 36px;
+
+header.main-header ul ul.multicol-nav {
+  min-height: auto;
+  max-height: 1024px!important;
+  left: -($col_width * .5);
+}
+.main-header-nav li:nth-of-type(n+5) ul.multicol-nav.three,
+.main-header-nav li ul.multicol-nav.four,
+.main-header-nav li:nth-of-type(n+7) ul.multicol-nav {
+  left: -($col_width * 0.75);
+}
+.main-header-nav li:nth-of-type(n+6) ul.multicol-nav.three,
+.main-header-nav li:nth-of-type(n+2) ul.multicol-nav.four,
+.main-header-nav li:nth-of-type(n+8) ul.multicol-nav {
+  left: -($col_width * 1);
+}
+
+.main-header-nav li:nth-of-type(n+7) ul.multicol-nav.three,
+.main-header-nav li:nth-of-type(n+3) ul.multicol-nav.four {
+  left: -($col_width * 1.25);
+}
+
+.main-header-nav li:nth-of-type(n+8) ul.multicol-nav.three,
+.main-header-nav li:nth-of-type(n+4) ul.multicol-nav.four {
+  left: -($col_width * 1.75);
+}
+
+.main-header-nav li:nth-of-type(n+5) ul.multicol-nav.four {
+  left: -($col_width * 2.25);
+}
+.main-header-nav li:nth-of-type(n+6) ul.multicol-nav.four {
+  left: -($col_width * 2.5);
+}
+.main-header-nav li:nth-of-type(n+7) ul.multicol-nav.four {
+  left: -($col_width * 3);
+}
+
+
+.multicol-nav {
+  display: grid;
+  grid-template-columns: $col_width $col_width;
+  &.three {
+    grid-template-columns: $col_width $col_width $col_width;
+  }
+  &.four {
+    grid-template-columns: $col_width $col_width $col_width $col_width;
+  }
+}

data/app/assets/stylesheets/fae/globals/navigation/_sidenav.scss

@@ -25,7 +25,7 @@
     &.-parent-current {
       > a {
         color: $c-white;
-        background-color: $c-custom-highlight;
+        background-color: var(--highlight-color);
       }
 
       > ul {
@@ -95,7 +95,7 @@
     margin-top: 7px;
 
     &.-current {
-      border-left: 5px solid $c-custom-highlight;
+      border-left: 5px solid var(--highlight-color);
       padding-left: 25px;
     }
   }

data/app/assets/stylesheets/fae/globals/navigation/_utility.scss

@@ -73,7 +73,7 @@
   height: 40px;
   display: inline-block;
   vertical-align: middle;
-  background: $c-custom-highlight;
+  background: var(--highlight-color);
 }
 
 .grabatar-link {

data/app/assets/stylesheets/fae/modules/_buttons.scss

@@ -13,6 +13,10 @@ button[type=button],
   line-height: 1;
 }
 
+.deploy .button {
+  margin-right: 10px;
+}
+
 // Dark buttons
 
 input[type=submit],
@@ -47,6 +51,13 @@ button[type=button],
   &:hover {
     background: $c-light-button-gradient-end;
   }
+
+  &:disabled {
+    background: $c-light-button-gradient-end;
+    color: $c-mid-grey;
+    border-color: $c-grey;
+    cursor: wait;
+  }
 }
 
 .button {

data/app/assets/stylesheets/fae/modules/_deploy.scss

@@ -0,0 +1,25 @@
+.deploying-heading.running:after {
+  overflow: hidden;
+  display: inline-block;
+  vertical-align: bottom;
+  -webkit-animation: ellipsis steps(4,end) 900ms infinite;
+  animation: ellipsis steps(4,end) 900ms infinite;
+  content: "\2026"; /* ascii code for the ellipsis character */
+  width: 0px;
+}
+
+@keyframes ellipsis {
+  to {
+    width: 20px;
+  }
+}
+
+@-webkit-keyframes ellipsis {
+  to {
+    width: 20px;
+  }
+}
+
+.hidden {
+  display: none;
+}

data/app/assets/stylesheets/fae/modules/_errors-bar.scss

@@ -0,0 +1,19 @@
+.errors-bar-wrapper {
+  border-color: $c-error-content;
+  background: $c-error-bg;
+  color: $c-error-content;
+  width: 100%;
+  padding: 20px;
+  display: none;
+  
+  .errors-bar {
+    display: flex;
+    margin-top: 20px;
+    flex-direction: column;
+  }
+
+  .error-jump-link {
+    margin-right: 20px;
+    font-size: 14px;
+  }
+}

data/app/assets/stylesheets/fae/modules/_modal.scss

@@ -76,3 +76,28 @@
     font-size: 12px;
   }
 }
+
+#fae-modal {
+  padding: 0;
+  box-shadow: none;
+
+  .simplemodal-data {
+    min-height: 100%;
+  }
+
+  .simplemodal-close {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    height: 20px;
+    width: 20px;
+
+    &:before {
+      position: relative;
+      padding: 4px;
+      top: auto;
+      right: auto;
+      color: #3b3b3b;
+    }
+  }
+}

data/app/assets/stylesheets/fae/modules/_toggles.scss

@@ -2,47 +2,63 @@
 .slider-wrapper {
   display: block;
   position: relative;
-  width: 60px;
-  border: 1px solid $c-mid-grey;
-  border-radius: 2px;
+  width: 50px;
+  border-radius: 15px;
+  height: 25px;
   font-size: 12px;
-  overflow: hidden;
   cursor: pointer;
   text-decoration: none;
-  background: $c-white;
+  background: $c-light-grey;
+  transition: background-color 0.24s;
+  &:hover, &:focus {
+    background-color: $c-mid-grey;
+  }
+  &.slider-yes-selected {
+    background: var(--highlight-color);
+  }
 }
 
 .slider-options {
-  @include transition(left .2s);
-  position: relative;
-  left: -35px;
+  @include transition(left .24s);
   white-space: nowrap;
-
-  .slider-yes-selected & {
-    left: 0;
-  }
 }
 
 .slider-option-selector {
-  display: inline-block;
-  width: 18px;
+  display: block;
+  position: absolute;
+  width: 50%;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  border-radius: 50%;
+  box-sizing: border-box;
+  height: 100%;
+  border: 1px solid $c-mid-grey;
+  transition: left 0.24s;
+  .slider-yes-selected & {
+    left: 50%;
+  }
+  background: $c-white;
 }
 
 .slider-option-no,
 .slider-option-yes {
-  @include user-select(none);
-  display: inline-block;
-  width: 35px;
-  padding: 3px 4px;
-  text-align: center;
+  position: absolute;
+  height: 0;
+  width: 0;
+  left: -200vw;
 }
 
 .slider-option-no {
-  color: $c-slider-no-color;
-  background: $c-slider-no-bg;
+  display:block;
+  .slider-yes-selected & {
+    display: none;
+  }
 }
 
 .slider-option-yes {
-  color: $c-white;
-  background: $c-custom-highlight;
+  display: none;
+  .slider-yes-selected & {
+    display:block;
+  }
 }

data/app/assets/stylesheets/fae/modules/forms/_asset-actions.scss

@@ -45,7 +45,7 @@
     margin-right: 10px;
 
     &:focus {
-      border-color: $c-notice-content;
+      border-color: $c-focus-border;
       outline: 0;
     }
 

data/app/assets/stylesheets/fae/modules/forms/_base.scss

@@ -14,7 +14,7 @@ input[type=email] {
   max-width: 100%;
 
   &:focus {
-    border-color: $c-notice-content;
+    border-color: $c-focus-border;
   }
 }
 
@@ -39,6 +39,11 @@ input[type=email] {
     margin-top: 10px;
     margin-bottom: 10px;
   }
+
+  .addedit-form-thumb {
+    max-width: 150px;
+    max-height: 100px;
+  }
 }
 
 .js-addedit-form-wrapper {
@@ -98,3 +103,11 @@ input[type=email] {
     margin-bottom: 10px;
   }
 }
+
+.input.field {
+
+  &.highlight {
+    outline: 2px dashed green;
+    outline-offset: 1px;
+  }
+}

data/app/assets/stylesheets/fae/modules/forms/_checkbox.scss

@@ -56,7 +56,7 @@ label.checkbox,
 
 label.checkbox.focused:before,
 .checkbox.focused label:before {
-  border-color: $c-notice-content;
+  border-color: $c-focus-border;
 }
 
 .checkbox-wrapper {

data/app/assets/stylesheets/fae/modules/forms/_date.scss

@@ -149,11 +149,11 @@
 
 .ui-datepicker-calendar {
   .ui-state-hover {
-    color: $c-custom-highlight;
+    color: var(--highlight-color);
   }
 
   .ui-state-active {
-    background: $c-custom-highlight;
+    background: var(--highlight-color);
     color: $c-white;
     position: relative;
   }
@@ -207,6 +207,22 @@
     padding: 12px;
     font-size: 19px;
     color: $c-darker-grey;
+
+  }
+
+  &.table-filter-group {
+    width: 130px;
+
+    input[type=text] {
+      border-radius: 0;
+    }
+
+    label:before {
+      right: -5px;
+      bottom: -6px;
+
+      font-size: 15px;
+    }
   }
 }
 
@@ -307,12 +323,12 @@
 
         &.checked,
         &.toMonth.valid.checked {
-          background: $c-custom-highlight;
+          background: var(--highlight-color);
           color: $c-white;
         }
 
         &.real-today.checked {
-          background: $c-custom-highlight;
+          background: var(--highlight-color);
         }
       }
 

data/app/assets/stylesheets/fae/modules/forms/_form-manager.scss

@@ -0,0 +1,82 @@
+.form-manager-form {
+  z-index: 2;
+  background: gray(90);
+  display: none;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  overflow: scroll;
+  margin-top: 1px;
+  padding: 100px 40px 0px 30px;
+
+  .js-form-manager-submit {
+    background: gray(20);
+    color: white;
+    font-size: 13px;
+
+    &:hover {
+      background: gray(10);
+    }
+  }
+
+  .helper {
+    color: gray(40);
+    font-weight: normal;
+  }
+
+  .inner-content {
+    margin-top: 103px;
+  }
+
+  .field-input {
+    margin-bottom: 10px;
+  }
+
+  header {
+    height: 74px;
+
+    a {
+      margin-right: 5px;
+      float: right;
+    }
+  }
+
+  .form-section {
+    margin-bottom: 30px;
+    overflow: auto;
+  }
+
+  .single-field {
+    float: left;
+    width: 25%;
+    margin-right: 20px;
+
+    input {
+      width: 100%;
+    }
+
+    .field_title {
+      width: 100%;
+      display: inline-block;
+
+      label {
+        float: left;
+        margin-right: 10px;
+      }
+
+      input {
+        width: auto;
+        float: left;
+      }
+    }
+  }
+}
+
+.js-form-manager-container {
+  display: none;
+  z-index: 4;
+}
+
+.js-launch-form-manager {
+	margin-left: 10px;
+}

data/app/assets/stylesheets/fae/modules/forms/_hints.scss

@@ -3,7 +3,7 @@
   display: inline-block;
   padding-left: 7px;
   cursor: pointer;
-  color: $c-custom-highlight;
+  color: var(--highlight-color);
 
   &:after {
     @include icon-stuff;

data/app/assets/stylesheets/fae/modules/forms/_label.scss

@@ -6,7 +6,7 @@ label {
   color: $c-text-heavy;
 
   abbr {
-    color: $c-custom-highlight;
+    color: var(--highlight-color);
   }
 
   h6 {

data/app/assets/stylesheets/fae/modules/forms/_radio.scss

@@ -64,6 +64,6 @@
 
 .radio_collection.focused {
   .radio_collection-bullet {
-    border-color: $c-notice-content;
+    border-color: $c-focus-border;
   }
 }

data/app/assets/stylesheets/fae/modules/forms/_select.scss

@@ -32,7 +32,7 @@
     top: auto;
     bottom: 100%;
     margin-bottom: -1px;
-    border-top: 1px solid $c-notice-content;
+    border-top: 1px solid $c-focus-border;
     border-bottom: none;
     box-shadow: none;
     border-radius: 0;
@@ -41,7 +41,7 @@
 
 .chosen-container-active {
   .chosen-single {
-    border-color: $c-notice-content;
+    border-color: $c-focus-border;
     background: $c-chosen-gradient-end;
   }
 }
@@ -120,7 +120,7 @@
 .chosen-container-multi.chosen-container-active {
   .chosen-single,
   .chosen-choices {
-    border-color: $c-notice-content;
+    border-color: $c-focus-border;
   }
 }
 
@@ -159,7 +159,8 @@
   }
 
   .chosen-search {
-    display: none;
+    position: absolute;
+    left: -9999px;
   }
 }
 
@@ -185,7 +186,7 @@
 
 .chosen-container {
   .chosen-drop {
-    border-color: $c-notice-content;
+    border-color: $c-focus-border;
   }
 }
 
@@ -227,7 +228,7 @@
           position: absolute;
           right: 15px;
           top: 9px;
-          color: $c-custom-highlight;
+          color: var(--highlight-color);
         }
       }
 
@@ -288,7 +289,7 @@
           content: fae-icon(check);
           padding-right: 5px;
           margin-left: -19px;
-          color: $c-custom-highlight;
+          color: var(--highlight-color);
         }
       }
 
@@ -307,7 +308,7 @@
 
     &.ms-focus {
       outline: 0;
-      border-bottom: 4px solid $c-notice-content;
+      border-bottom: 4px solid $c-focus-border;
     }
   }