lato_view 1.1

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

@@ -0,0 +1,158 @@
+// 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;
+
+// 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                : $ebony-clay !default;
+$sidebar-color             : $white !default;
+$sidebar-inactive-color    : $ship-cove !default;
+$sidebar-icon-active-color : $robin-blue !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;
+
+// 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;
+
+// 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;
+
+// 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;

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

@@ -0,0 +1,158 @@
+// Base colors
+$black        :  #000000;
+$mine-shaft   :  #333333;
+$white        :  #ffffff;
+
+// Project specific colors
+$catskill-white : #edf3f7;
+$dusty-gray     : #999999;
+$rhino          : #040303;
+$ebony-clay     : #262626;
+$ship-cove      : #040303;
+$robin-blue     : #fff;
+$jungle-green   : #26b75e;
+$scarlet        : #e32908;
+$radical-red    : #ff2f6c;
+$yellow-sea     : #ffae03;
+
+// Statuses colors
+$success-color : $jungle-green !default;
+$error-color   : $scarlet !default;
+$warning-color : $yellow-sea !default;
+
+// BASE
+
+$body-bg           : #EEE !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    : #00c8e7 !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                : $ebony-clay !default;
+$sidebar-color             : $white !default;
+$sidebar-inactive-color    : #BFBEBE !default;
+$sidebar-icon-active-color : $robin-blue !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;
+
+// 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         :  $mine-shaft;
+$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;
+
+// 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;
+
+// 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;

data/app/assets/stylesheets/lato_view/modules/_action-bar.scss

@@ -0,0 +1,62 @@
+.action-bar {
+  width: 100%;
+  margin: 30px 0;
+  @if settings('use-flex-grid') {
+    padding-right: 20px;
+  }
+  @include clearfix();
+  .action-group-left {
+    float: left;
+    margin-right: 20px;
+    .search-bar {
+      margin-left: 20px;
+    }
+  }
+  .action-group-right {
+    float: right;
+    margin-left: 20px;
+  }
+
+  // Stile widgets contenuta
+  .search-bar {
+    width: 270px;
+    .search-field {
+      width: auto;
+    }
+  }
+  .arranger {
+    position: relative;
+    top: 12px;
+  }
+}
+
+.action-nav-holder {
+  display: none;
+  float: right;
+  position: relative;
+  .action-menu-toggle {
+    padding-top: 13px;
+    cursor: pointer;
+  }
+  .action-nav-menu {
+    position: absolute;
+    top: 55px;
+    right: 0;
+    min-width: 210px;
+    padding: 20px;
+    background-color: $white;
+    opacity: 0;
+    visibility: hidden;
+    box-shadow: 0 4px 9px -3px rgba(41, 59, 90, 0.25);
+    text-align: center;
+    z-index: 39;
+    > .action-remove {
+      display: block;
+      margin: 0;
+      margin-bottom: 10px;
+    }
+  }
+  @include mq-max(1070px) {
+    //display: block;
+  }
+}

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

@@ -0,0 +1,10 @@
+.arrange-voice {
+  display: inline-block;
+  font-size: em(18px);
+  letter-spacing: 1px;
+  color: $arranger-text-color;
+  &:after {
+    content: "\/";
+    margin: 0 5px;
+  }
+}

data/app/assets/stylesheets/lato_view/modules/_button-group.scss

@@ -0,0 +1,70 @@
+.group-button {
+  @extend %button_base;
+  @extend %button_brand;
+  padding: 10px 25px;
+  background-color: $button-group-bg;
+  color: $button-group-color;
+  border: 1px solid $button-group-color;
+  font-size: em(14px);
+  font-weight: bold;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  transition: all 0.3s ease;
+  &:hover {
+    background-color: $button-group-color;
+    color: $button-group-bg;
+  }
+  &:active {
+    box-shadow: 0 3px 13px rgba($button-group-color, 0.30);
+  }
+  &:focus {
+    box-shadow: 0 5px 18px rgba($button-group-color, 0.35);
+  }
+}
+
+.button-group {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  font-size: em(14px);
+  @include clearfix();
+  .group-button {
+    margin-right: -3px;
+    border-right: 1px solid transparent;
+    &:first-child {
+      border-top-left-radius: $button-group-radius;
+      border-bottom-left-radius: $button-group-radius;
+    }
+    &:last-child {
+      border-right: 1px solid $button-group-color;
+      margin-right: 0;
+      border-top-right-radius: $button-group-radius;
+      border-bottom-right-radius: $button-group-radius;
+    }
+  }
+  &.no-radius {
+    .group-button {
+      &:first-child {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+      &:last-child {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+    }
+  }
+}
+
+// Size classes
+.group-small {
+  font-size: em(12px);
+}
+
+.group-medium {
+  font-size: em(16px);
+}
+
+.group-large {
+  font-size: em(20px);
+}

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

@@ -0,0 +1,177 @@
+/* Button Module */
+
+%button_base {
+  cursor: pointer;
+  text-decoration: none;
+  background-color: transparent;
+  padding: 0;
+  border: 0;
+  -ms-touch-action: manipulation;
+  touch-action: manipulation;
+  white-space: nowrap;
+}
+
+%button_brand {
+  display: inline-block;
+  text-align: center;
+  vertical-align: middle;
+}
+
+button {
+  @extend %button_base;
+  background-image: none;
+  &:focus, &:active {
+    outline: none;
+    box-shadow: none;
+    border: none;
+  }
+  &.button-disabled, &[disabled] {
+    background-color: #cecece;
+    cursor: not-allowed;
+    opacity: 0.65;
+  }
+}
+
+.lato-button {
+  @extend %button_base;
+  @extend %button_brand;
+  background-color: $button-bg;
+  border-radius: 100px;
+  padding: 12px 40px;
+  color: $button-color;
+  font-size: 0.875em;
+  font-weight: bold;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  transform: translateY(0);
+  transition: background-color 0.3s ease, transform 0.25s $snappy;
+  + .lato-button {
+    margin-left: 5px;
+  }
+  &:hover {
+    background-color: darken($button-bg, 5%);
+  }
+  &:active, &:focus {
+    outline: none;
+  }
+  &:active {
+    transform: translateY(2px);
+    box-shadow: 0 3px 13px rgba($button-bg, 0.30);
+  }
+  &:focus {
+    box-shadow: 0 5px 18px rgba($button-bg, 0.35);
+  }
+  &[disabled] {
+    background-color: #cecece;
+    cursor: not-allowed;
+    opacity: 0.65;
+  }
+}
+
+.button-icon {
+  display: inline-block;
+  margin-right: 12px;
+  svg {
+    position: relative;
+    top: 3px;
+    @include size(20px);
+    path {
+      fill: white;
+    }
+  }
+  + span {
+    position: relative;
+    top: -2px;
+  }
+  .button-small & {
+    margin-right: 7px;
+    svg {
+      @include size(15px);
+    }
+    + span {
+      top: 0;
+    }
+  }
+}
+
+.button-green {
+  background-color: $jungle-green;
+  &:hover {
+    background-color: darken($jungle-green, 5%);
+  }
+  &:active {
+    box-shadow: 0 3px 13px rgba($button-bg, 0.30);
+  }
+  &:focus {
+    box-shadow: 0 5px 18px rgba($button-bg, 0.35);
+  }
+}
+
+.button-yellow {
+  background-color: $yellow-sea;
+  &:hover {
+    background-color: darken($yellow-sea, 5%);
+  }
+  &:active {
+    box-shadow: 0 3px 13px rgba($yellow-sea, 0.30);
+  }
+  &:focus {
+    box-shadow: 0 5px 18px rgba($yellow-sea, 0.35);
+  }
+}
+
+.button-red {
+  background-color: $scarlet;
+  &:hover {
+    background-color: darken($scarlet, 5%);
+  }
+  &:active {
+    box-shadow: 0 3px 13px rgba($scarlet, 0.30);
+  }
+  &:focus {
+    box-shadow: 0 5px 18px rgba($scarlet, 0.35);
+  }
+}
+
+.button-line {
+  background-color: white;
+  color: $ship-cove;
+  border: 2px solid $ship-cove;
+  &:hover {
+    background-color: $ship-cove;
+    color: white;
+  }
+  &:active {
+    box-shadow: 0 3px 13px rgba($ship-cove, 0.30);
+  }
+  &:focus {
+    box-shadow: 0 5px 18px rgba($ship-cove, 0.35);
+  }
+}
+
+// In the action bar component
+.action-button {
+  font-size: em(12px);
+  padding: 8px 20px;
+  margin-right: 10px;
+}
+
+.button-no-radius {
+  border-radius: 0;
+}
+
+// Sizing
+.button-small {
+  font-size: em(12px);
+  padding: 8px 20px;
+}
+
+.button-medium {
+  font-size: em(14px);
+  padding: 10px 25px;
+}
+
+.button-full {
+  display: block;
+  width: 100%;
+}

data/app/assets/stylesheets/lato_view/modules/_content-block.scss

@@ -0,0 +1,33 @@
+.content-row {
+  width: 100%;
+  @include clearfix();
+}
+
+.content-block {
+  width: 100%;
+  position: relative;
+  background-color: $content-block-bg;
+  box-shadow: $content-block-shadow;
+  padding: $content-block-padding;
+  margin-bottom: $content-block-margin-bottom;
+  // Le seguenti classi sono mantenute solo per retrocompatibilità:
+  &.half {
+    @include col(1/2);
+  }
+  &.third {
+    @include col(1/3);
+  }
+  &.two-third {
+    @include col(2/3);
+  }
+  &.fourth {
+    @include col(1/4);
+  }
+  &.three-fourth {
+    @include col(3/4);
+  }
+}
+
+.content-block-title {
+  font-size: em($content-block-title-size);
+}