lato_view 1.1.4 → 1.1.5

data/app/assets/stylesheets/lato_view/config/templates/_mauve-template.scss

@@ -0,0 +1,178 @@
+// Base colors
+$black        :  #000000;
+$mine-shaft   :  #333333;
+$white        :  #ffffff;
+
+// Project specific colors
+$catskill-white : #edf3f7;
+$dusty-gray     : #999999;
+$rhino          : #293b5a;
+$ebony-clay     : #292f43;
+$ship-cove      : #7b96c4;
+$robin-blue     : darken(#00c8e7, 5%);
+$jungle-green   : darken(#26b75e, 5%);
+$scarlet        : darken(#e32908, 5%);
+$radical-red    : darken(#ff2f6c, 5%);
+$yellow-sea     : darken(#ffae03, 5%);
+
+// Statuses colors
+$success-color : $jungle-green !default;
+$error-color   : $scarlet !default;
+$warning-color : $yellow-sea !default;
+
+// BASE
+
+$body-bg           : $catskill-white !default;
+$base-spacing      : $line-base * $font-size-base !default;
+$text-color        : $rhino !default;
+$text-accent-color : $robin-blue !default;
+$link-color        : $rhino !default;
+$base-padding      : $headings-margin-bottom;
+$selection-color   : $body-bg !default;
+$selection-bg      : $text-color !default;
+
+// MODULES
+
+// Content block
+$content-block-bg            : $white !default;
+$content-block-shadow        : 0 1px 4px rgba($text-color, 0.25) !default;
+$content-block-padding       : 20px !default;
+$content-block-margin-bottom : 30px !default;
+$content-block-title-size    : 30px !default;
+
+// Button colors.
+$button-bg    : $robin-blue !default;
+$button-color : $white !default;
+
+// Button-Group
+$button-group-color  : $ship-cove !default;
+$button-group-bg     : $white !default;
+$button-group-radius : 30px !default;
+
+// Navbar
+$nav-width                     : 85.3% !default;
+$nav-bg                        : $white !default;
+$nav-color                     : $text-color !default;
+$nav-shadow                    : 0 1px 4px rgba($text-color, 0.25) !default;
+$nav-padding-vertical          : 10px !default;
+$nav-base-padding              : $nav-padding-vertical 0 !default;
+$nav-actions-color             : $ship-cove !default;
+$nav-account-img-bg            : $ship-cove !default;
+$nav-account-drop-shadow       : $text-color !default;
+$nav-account-drop-border-color : $catskill-white !default;
+$nav-account-drop-left-stripe  : $robin-blue !default;
+$nav-account-drop-icon-color   : $ship-cove !default;
+
+// Sidebar
+$sidebar-width             : 200px !default;
+$sidebar-bg                : darken($catskill-white, 40%) !default;
+$sidebar-color             : $white !default;
+$sidebar-inactive-color    : darken($catskill-white, 10%) !default;
+$sidebar-icon-active-color : $white !default;
+
+// Form
+$form-input-border-color       : darken($catskill-white, 10%) !default;
+$form-input-hover-border-color : $ship-cove !default;
+$form-input-padding            : 5px 10px !default;
+$form-control-margin           : 15px !default;
+$text-area-min-height          : 80px !default;
+$label-advise-color            : $ship-cove !default;
+$form-error-color              : $error-color !default;
+$form-required-color           : $warning-color !default;
+
+// Form controls
+$form-control-border-color    : $form-input-border-color !default;
+$form-control-checked-bg      : $ebony-clay !default;
+$form-control-checked-color   : $white !default;
+$form-autocomplete-color      : $dusty-gray !default;
+$form-control-check-hover     : $robin-blue !default;
+
+// Input file
+$input-file-bg : $ship-cove !default;
+
+// Password-reveal submodule
+$psw-reveal-width  : 45px !default;
+$psw-reveal-height : 35px !default;
+$psw-eye-bg        : $form-input-border-color !default;
+$psw-eye-size      : 20px !default;
+$psw-inner-size    : $psw-eye-size / 2 !default;
+$psw-active        : $ebony-clay !default;
+
+// Datepicker - Overrides external
+// $pd-font-family          : $font-stack;
+// $pd-text-color           : $mine-shaft !default;
+// $pd-title-color          : $mine-shaft !default;
+// $pd-title-bg             : $white !default;
+// $pd-picker-bg            : $white !default;
+// $pd-picker-border        : #ccc !default;
+// $pd-picker-border-bottom : #bbb !default;
+// $pd-picker-shadow        : rgba($black, 0.5) !default;
+// $pd-th-color             : $ship-cove !default;
+// $pd-day-color            : $ebony-clay !default;
+// $pd-day-bg               : #f5f5f5 !default;
+// $pd-day-hover-color      : $white !default;
+// $pd-day-hover-bg         : $radical-red !default;
+// $pd-day-today-color      : $robin-blue !default;
+// $pd-day-selected-color   : $white !default;
+// $pd-day-selected-bg      : $robin-blue !default;
+// $pd-day-selected-shadow  : #178fe5 !default;
+// $pd-day-disabled-color   : #999 !default;
+// $pd-week-color           : #999 !default;
+$picker-selected         :  $ship-cove;
+$picker-date-today       :  $radical-red;
+$picker-item-hover-color :  $white;
+
+// Select
+$select-border-color       : $form-input-border-color !default;
+$select-focus-border-color : $form-input-hover-border-color !default;
+$select-dropdown-shadow    : 0 1px 4px rgba($text-color, 0.25) !default;
+$select-dropdown-active-bg : rgba($form-input-hover-border-color, 0.67) !default;
+
+// Arranger
+$arranger-text-color : darken($ship-cove, 15%) !default;
+
+// Confirmation Popup
+$confirmation-popup-container-bg : transparent !default;
+$confirmation-popup-bg           : $white !default;
+$confirmation-popup-max-width    : 550px !default;
+
+// Dropdown
+$drop-bg                           : $ebony-clay !default;
+$drop-links-bg                     : $ebony-clay !default;
+$drop-links-hover-color            : $robin-blue !default;
+$drop-active-voice-color           : $ebony-clay !default;
+$drop-active-voice-underline-color : $robin-blue !default;
+$drop-icon-bg                      : $ebony-clay !default;
+
+// Flashes
+$flash-default-bg : $ebony-clay !default;
+$flash-danger-bg  : $error-color !default;
+$flash-success-bg : $success-color !default;
+$flash-info-bg    : $robin-blue !default;
+$flash-warning-bg : $warning-color !default;
+$flash-shadow     : 0 1px 4px rgba(41, 59, 90, 0.25) !default;
+
+// Pagination
+$pagination-current-bg    : $rhino !default;
+$pagination-current-color : $white !default;
+
+// Step
+$step-paginate-spacing     : 35px !default;
+$step-index-base-color     : $ship-cove !default;
+$step-index-active-color   : $text-color !default;
+$step-index-base-size      : 40px !default;
+$step-index-base-spacing   : 25px !default;
+$step-index-shadow         : 0px 4px 14px rgba($text-color, 0.2) !default;
+$step-index-active-shadow  : 0px 8px 18px rgba($text-color, 0.3) !default;
+
+// Search Bar
+$search-bar-bg           : $white !default;
+$search-bar-shadow       : 0px 2px 6px rgba(black, 0.1) !default;
+$search-bar-focus-shadow : 0px 2px 8px rgba(black, 0.15) !default;
+$search-button-bg        : $robin-blue !default;
+$search-button-color     : $white !default;
+
+// VIEWS
+$login-view-base-bg            :  $catskill-white !default;
+$login-view-first-gradient-bg  :  $catskill-white !default;
+$login-view-second-gradient-bg :  lighten($ship-cove, 22%) !default;

data/app/assets/stylesheets/lato_view/config/templates/_orange-template.scss

@@ -0,0 +1,184 @@
+// Base colors
+$black        :  #000000;
+$mine-shaft   :  #333333;
+$white        :  #ffffff;
+
+// Project specific colors
+$catskill-white : #edf3f7;
+$dusty-gray     : #999999;
+$rhino          : #293b5a;
+$ebony-clay     : #292f43;
+$ship-cove      : #7b96c4;
+$robin-blue     : #00c8e7;
+$jungle-green   : #26b75e;
+$scarlet        : #e32908;
+$radical-red    : #ff2f6c;
+$yellow-sea     : #ffae03;
+
+// Orange specifics
+$flamingo       : #ef6121;
+$tundora        : #474747;
+$boulder        : #797979;
+$gallery        : #eee;
+
+// Statuses colors
+$success-color : $jungle-green !default;
+$error-color   : $scarlet !default;
+$warning-color : $yellow-sea !default;
+
+// BASE
+
+$body-bg           : $gallery !default;
+$base-spacing      : $line-base * $font-size-base !default;
+$text-color        : $tundora !default;
+$text-accent-color : $flamingo !default;
+$link-color        : $tundora !default;
+$base-padding      : $headings-margin-bottom;
+$selection-color   : $body-bg !default;
+$selection-bg      : $text-color !default;
+
+// MODULES
+
+// Content block
+$content-block-bg            : $white !default;
+$content-block-shadow        : 0 1px 4px rgba($text-color, 0.25) !default;
+$content-block-padding       : 20px !default;
+$content-block-margin-bottom : 30px !default;
+$content-block-title-size    : 30px !default;
+
+// Button colors.
+$button-bg    : $flamingo !default;
+$button-color : $white !default;
+
+// Button-Group
+$button-group-color  : $boulder !default;
+$button-group-bg     : $white !default;
+$button-group-radius : 30px !default;
+
+// Navbar
+$nav-width                     : 85.3% !default;
+$nav-bg                        : $white !default;
+$nav-color                     : $text-color !default;
+$nav-shadow                    : 0 1px 4px rgba($text-color, 0.25) !default;
+$nav-padding-vertical          : 10px !default;
+$nav-base-padding              : $nav-padding-vertical 0 !default;
+$nav-actions-color             : $boulder !default;
+$nav-account-img-bg            : mix($flamingo, $white, 75%) !default;
+$nav-account-drop-shadow       : $text-color !default;
+$nav-account-drop-border-color : $catskill-white !default;
+$nav-account-drop-left-stripe  : $flamingo !default;
+$nav-account-drop-icon-color   : $boulder !default;
+
+// Sidebar
+$sidebar-width             : 200px !default;
+$sidebar-bg                : mix($flamingo, $black, 88%) !default;
+$sidebar-color             : $white !default;
+$sidebar-inactive-color    : $catskill-white !default;
+$sidebar-icon-active-color : $white !default;
+
+// Form
+$form-input-border-color       : darken($gallery, 10%) !default;
+$form-input-hover-border-color : mix($flamingo, $white, 75%) !default;
+$form-input-padding            : 5px 10px !default;
+$form-control-margin           : 15px !default;
+$text-area-min-height          : 80px !default;
+$label-advise-color            : mix($flamingo, $white, 75%) !default;
+$form-error-color              : $error-color !default;
+$form-required-color           : $warning-color !default;
+
+// Form controls
+$form-control-border-color    : $form-input-border-color !default;
+$form-control-checked-bg      : $tundora !default;
+$form-control-checked-color   : $white !default;
+$form-autocomplete-color      : darken($gallery, 20%) !default;
+$form-control-check-hover     : $flamingo !default;
+
+// Input file
+$input-file-bg : mix($flamingo, $white, 75%) !default;
+
+// Password-reveal submodule
+$psw-reveal-width  : 45px !default;
+$psw-reveal-height : 35px !default;
+$psw-eye-bg        : $form-input-border-color !default;
+$psw-eye-size      : 20px !default;
+$psw-inner-size    : $psw-eye-size / 2 !default;
+$psw-active        : $tundora !default;
+
+// Datepicker - Overrides external
+// $pd-font-family          : $font-stack;
+// $pd-text-color           : $mine-shaft !default;
+// $pd-title-color          : $mine-shaft !default;
+// $pd-title-bg             : $white !default;
+// $pd-picker-bg            : $white !default;
+// $pd-picker-border        : #ccc !default;
+// $pd-picker-border-bottom : #bbb !default;
+// $pd-picker-shadow        : rgba($black, 0.5) !default;
+// $pd-th-color             : $ship-cove !default;
+// $pd-day-color            : $ebony-clay !default;
+// $pd-day-bg               : #f5f5f5 !default;
+// $pd-day-hover-color      : $white !default;
+// $pd-day-hover-bg         : $radical-red !default;
+// $pd-day-today-color      : $robin-blue !default;
+// $pd-day-selected-color   : $white !default;
+// $pd-day-selected-bg      : $robin-blue !default;
+// $pd-day-selected-shadow  : #178fe5 !default;
+// $pd-day-disabled-color   : #999 !default;
+// $pd-week-color           : #999 !default;
+$picker-selected         :  mix($flamingo, $white, 75%);
+$picker-date-today       :  $flamingo;
+$picker-item-hover-color :  $white;
+
+// Select
+$select-border-color       : $form-input-border-color !default;
+$select-focus-border-color : $form-input-hover-border-color !default;
+$select-dropdown-shadow    : 0 1px 4px rgba($text-color, 0.25) !default;
+$select-dropdown-active-bg : rgba($form-input-hover-border-color, 0.67) !default;
+
+// Arranger
+$arranger-text-color : $boulder !default;
+
+// Confirmation Popup
+$confirmation-popup-container-bg : transparent !default;
+$confirmation-popup-bg           : $white !default;
+$confirmation-popup-max-width    : 550px !default;
+
+// Dropdown
+$drop-bg                           : $flamingo !default;
+$drop-links-bg                     : $flamingo !default;
+$drop-links-hover-color            : $white !default;
+$drop-active-voice-color           : $tundora !default;
+$drop-active-voice-underline-color : $flamingo !default;
+$drop-icon-bg                      : $tundora !default;
+
+// Flashes
+$flash-default-bg : $flamingo !default;
+$flash-danger-bg  : $error-color !default;
+$flash-success-bg : $success-color !default;
+$flash-info-bg    : mix($flamingo, $white, 75%) !default;
+$flash-warning-bg : $warning-color !default;
+$flash-shadow     : 0 1px 4px rgba(41, 59, 90, 0.25) !default;
+
+// Pagination
+$pagination-current-bg    : $tundora !default;
+$pagination-current-color : $white !default;
+
+// Step
+$step-paginate-spacing     : 35px !default;
+$step-index-base-color     : $boulder !default;
+$step-index-active-color   : $flamingo !default;
+$step-index-base-size      : 40px !default;
+$step-index-base-spacing   : 25px !default;
+$step-index-shadow         : 0px 4px 14px rgba($text-color, 0.2) !default;
+$step-index-active-shadow  : 0px 8px 18px rgba($text-color, 0.3) !default;
+
+// Search Bar
+$search-bar-bg           : $white !default;
+$search-bar-shadow       : 0px 2px 6px rgba(black, 0.1) !default;
+$search-bar-focus-shadow : 0px 2px 8px rgba(black, 0.15) !default;
+$search-button-bg        : $flamingo !default;
+$search-button-color     : $white !default;
+
+// VIEWS
+$login-view-base-bg            :  $gallery !default;
+$login-view-first-gradient-bg  :  mix($flamingo, $white, 85%) !default;
+$login-view-second-gradient-bg :  $flamingo !default;

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

@@ -44,7 +44,7 @@ button {
   letter-spacing: 2px;
   text-transform: uppercase;
   transform: translateY(0);
-  transition: background-color 0.3s ease, transform 0.25s $snappy;
+  transition: all 0.3s;
   + .lato-button {
     margin-left: 5px;
   }
@@ -95,9 +95,9 @@ button {
 }
 
 .button-green {
-  background-color: $jungle-green;
+  background-color: $success-color;
   &:hover {
-    background-color: darken($jungle-green, 5%);
+    background-color: darken($success-color, 5%);
   }
   &:active {
     box-shadow: 0 3px 13px rgba($button-bg, 0.30);
@@ -108,9 +108,9 @@ button {
 }
 
 .button-yellow {
-  background-color: $yellow-sea;
+  background-color: $warning-color;
   &:hover {
-    background-color: darken($yellow-sea, 5%);
+    background-color: darken($warning-color, 5%);
   }
   &:active {
     box-shadow: 0 3px 13px rgba($yellow-sea, 0.30);
@@ -121,9 +121,9 @@ button {
 }
 
 .button-red {
-  background-color: $scarlet;
+  background-color: darken($error-color, 10%);
   &:hover {
-    background-color: darken($scarlet, 5%);
+    background-color: darken($error-color, 15%);
   }
   &:active {
     box-shadow: 0 3px 13px rgba($scarlet, 0.30);
@@ -161,6 +161,12 @@ button {
 }
 
 // Sizing
+
+.button-xsmall {
+  font-size: em(9px);
+  padding: 5px 10px;
+}
+
 .button-small {
   font-size: em(12px);
   padding: 8px 20px;

data/app/assets/stylesheets/lato_view/modules/_confirmation-popup.scss

@@ -0,0 +1,63 @@
+.confirmation-popup-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  @include size(100%);
+  background-color: $confirmation-popup-container-bg;
+  visibility: hidden;
+  opacity: 0;
+  transition: all 0.15s ease 0.35s;
+  z-index: -1;
+  .is-confirmation-popup-open & {
+    opacity: 1;
+    visibility: visible;
+    transition: all 0.15s ease 0s;
+    z-index: 99999;
+  }
+}
+
+.confirmation-popup {
+  @include align();
+  position: fixed;
+  padding: 30px;
+  background-color: $confirmation-popup-bg;
+  max-width: $confirmation-popup-max-width;
+  box-shadow: $content-block-shadow;
+  visibility: hidden;
+  opacity: 0;
+  transform: scale(0.9) translate(-50%, -50%);
+  transition: all 0.35s ease 0.15s;
+  z-index: -1;
+  .is-confirmation-popup-open & {
+    opacity: 1;
+    visibility: visible;
+    transform: scale(1) translate(-50%, -50%);
+    z-index: 9999;
+  }
+}
+
+.confirmation-popup-question-container {
+  width: 100%;
+  text-align: center;
+  @include clearfix();
+}
+
+.confirmation-popup-answers {
+  margin: 0 auto;
+  text-align: center;
+  margin-top: 22px;
+}
+
+.confirmation-popup-answer {
+  display: inline-block;
+  margin-right: 20px;
+  text-decoration: none;
+  &:last-child {
+    margin-right: 0;
+  }
+}
+
+.confirmation-popup-question {
+  font-size: 16px;
+  letter-spacing: 1px;
+}