lato_view 1.1

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

@@ -0,0 +1,262 @@
+/* Navigation Module */
+
+.main-navigation-header {
+  //position: fixed;
+  //width: $nav-width;
+  background-color: $nav-bg;
+  box-shadow: $nav-shadow;
+  padding-left: 30px;
+  @include clearfix();
+  z-index: z(menu);
+}
+
+.nav-logo {
+  float: left;
+  padding: 22px 0;
+  img, svg {
+    width: 100px;
+    height: 20px;
+    position: relative;
+    top: 4px;
+    left: -15px;
+  }
+}
+
+.nav-actions, .nav-account-area {
+  float: right;
+}
+
+.nav-actions {
+  padding: 22px 30px;
+  // background-color: #F5F7F8;
+  .nav-action {
+    display: inline-block;
+    margin-right: 15px;
+    svg { 
+      @include size(22px, 20px);
+      position: relative;
+      top: 3px;
+      path {
+        fill: mix($nav-actions-color, white, 50%);
+        transition: all 0.3s ease;
+      }
+    }
+    &:last-child {
+      margin-right: 0;
+    }
+    &:hover {
+      svg path {
+        fill: $nav-actions-color;
+      }
+    }
+  }
+}
+
+.nav-account-area {
+  position: relative;
+  padding: $nav-padding-vertical 30px $nav-padding-vertical 21px;
+  cursor: pointer;
+  border-left: 1px solid $catskill-white;
+  transition: border-color 0.25s ease, background-color 0.3s ease;
+  .nav-account-img {
+    display: inline-block;
+    @include size(45px);
+    background-color: $nav-account-img-bg;
+    border-radius: 50%;
+    margin-right: 10px;
+    span {
+      @include visual-hide();
+    }
+  }
+  .nav-account-username {
+    display: inline-block;
+    position: relative;
+    top: -15px;
+  }
+  .nav-account-dropdown {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    background-color: white;
+    list-style: none;
+    box-shadow: 0 4px 9px -3px rgba($nav-account-drop-shadow, 0.25);
+    border-top: 1px solid $nav-account-drop-border-color;
+    transform: translateY(10px);
+    opacity: 0;
+    visibility: hidden;
+    margin: 0;
+    padding: 0;
+    z-index: 90;
+    transition: all 0.3s ease;
+    li {
+      opacity: 0;
+      transform: translateY(6px);
+      transition: all 0.3s;
+      transition-delay: 0.3s;
+      &:nth-child(2) {
+        transition-delay: 0.35s;
+      }
+      &:nth-child(3) {
+        transition-delay: 0.38s;
+      }
+      &:nth-child(4) {
+        transition-delay: 0.42s;
+      }
+      &:nth-child(5) {
+        transition-delay: 0.45s;
+      }
+    }
+    a {
+      display: block;
+      text-decoration: none;
+      padding: 12px 10px 12px 20px;
+      overflow: hidden;
+      position: relative;
+      &:before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 2px;
+        height: 100%;
+        transform: translateX(-5px);
+        background-color: $nav-account-drop-left-stripe;
+        transition: transform 0.35s $snappy;
+      }
+      &:after {
+        content: "";
+        position: absolute;
+        bottom: 0;
+        left: 10%;
+        width: 80%;
+        margin: 0 auto;
+        height: 1px;
+        background-color: #F0F3FA;
+      }
+      &:hover {
+        &:before {
+          transform: translateX(0);
+        }
+      }
+      &.logout {
+        &:hover {
+          svg path {
+            fill: $scarlet;
+          }
+        }
+      }
+    }
+    .dropdown-icon {
+      display: inline-block;
+      margin-right: 8px;
+      svg {
+        @include size(14px);
+        position: relative;
+        top: 1px;
+        path {
+          fill: $nav-account-drop-icon-color;
+          transition: all 0.3s ease;
+        }
+      }
+    }
+    li:last-child {
+      a:after {
+        display: none;
+      }
+    }
+  }
+  &:hover {
+    background-color: $catskill-white;
+    border-color: darken($catskill-white, 4%);
+  }
+  .is-dropdown-open & {
+    .nav-account-dropdown {
+      opacity: 1;
+      visibility: visible;
+      transform: translateY(0);
+      li {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+  }
+}
+
+.menu-toggle {
+  display: none;
+}
+
+@include mq-max(766px) {
+  .menu-toggle {
+    display: block;
+    float: right;
+    @include size(40px, 40px);
+    padding-top: 12px;
+    span {
+      display: block;
+      @include size(40px, 3px);
+      margin: 0 0 5px;
+      background: $white;
+      transition: all 0.2s ease;
+    }
+
+    &.is-mobile-menu-open {
+      span {
+        background: $white;
+        &:first-child {
+          transition-delay: 0.2s;
+          transform: rotate(45deg);
+          transform-origin: 10px 50%;
+        }
+        &:nth-child(2) {
+          transform: translateX(40px);
+          opacity: 0;
+        }
+        &:nth-child(3) {
+          transition-delay: 0.4s;
+          transform: rotate(-45deg);
+          transform-origin: 8px 50%;
+        }
+      }
+    }
+  }
+  .main-navigation-header {
+    position: fixed;
+    width: 100%;
+    top: 0;
+    left: 0;
+    padding: 5px 20px;
+    background-color: $sidebar-bg;
+  }
+  .nav-account-area {
+    width: 100%;
+    padding: 0;
+    border-left: 0;
+    .nav-account-img, .nav-account-username {
+      display: none;
+    }
+    .nav-account-dropdown {
+      position: relative;
+      top: auto;
+      left: auto;
+      box-shadow: none;
+      opacity: 1;
+      visibility: visible;
+      transform: none;
+      border: 0;
+      background-color: $sidebar-bg;
+      li {
+        opacity: 1;
+        transform: none;
+      }
+      a {
+        padding: 20px 0 20px 25px;
+        color: $ship-cove;
+        .dropdown-icon {
+          margin-right: 20px;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,30 @@
+// Stile paginazione momentaneamente per la gemma
+// 'will_paginate' già inclusa in lato_view
+
+.pagination {
+  text-align: center;
+
+  .previous_page {
+    float: left;
+    text-decoration: none;
+  }
+
+  .next_page {
+    float: right;
+    text-decoration: none;
+  }
+
+  .current {
+    display: inline-block;
+    background: $pagination-current-bg;
+    color: $pagination-current-color;
+    border-radius: 50%;
+    @include size(25px);
+    font-style: normal;
+  }
+
+  a {
+    margin: 0 5px;
+  }
+
+}

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

@@ -0,0 +1,44 @@
+.search-bar {
+  position: relative;
+  min-width: 270px;
+}
+
+.search-field {
+  width: 70%;
+  border: 0;
+  padding: 7px 17px;
+  background: $search-bar-bg;
+  box-shadow: $search-bar-shadow;
+  transition: all 0.4s ease;
+  &:focus {
+    outline: none;
+    box-shadow: $search-bar-focus-shadow;
+  }
+}
+
+.search-button {
+  border: none;
+  position: absolute;
+  height: 100%;
+  padding: 7px 12px;
+  background-color: $search-button-bg;
+  color: $search-button-color;
+  box-shadow: 0px 2px 6px rgba(black, 0.1);
+  svg {
+    @include size(15px);
+    path {
+      fill: $search-button-color;
+    }
+  }
+}
+
+.search-bar.rounded {
+  .search-field {
+    border-top-left-radius: 15px;
+    border-bottom-left-radius: 15px;
+  }
+  .search-button {
+    border-top-right-radius: 15px;
+    border-bottom-right-radius: 15px;
+  }
+}

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

@@ -0,0 +1,313 @@
+.selectize-control.plugin-drag_drop.multi > .selectize-input > div.ui-sortable-placeholder {
+  visibility: visible !important;
+  background: #f2f2f2 !important;
+  background: rgba(0, 0, 0, 0.06) !important;
+  border: 0 none !important;
+  box-shadow: inset 0 0 12px 4px #ffffff;
+}
+.selectize-control.plugin-drag_drop .ui-sortable-placeholder::after {
+  content: '!';
+  visibility: hidden;
+}
+.selectize-control.plugin-drag_drop .ui-sortable-helper {
+  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+}
+.selectize-dropdown-header {
+  position: relative;
+  padding: 5px 8px;
+  border-bottom: 1px solid #d0d0d0;
+  background: #f8f8f8;
+  border-radius: 3px 3px 0 0;
+}
+.selectize-dropdown-header-close {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  color: #303030;
+  opacity: 0.4;
+  margin-top: -12px;
+  line-height: 20px;
+  font-size: 20px !important;
+}
+.selectize-dropdown-header-close:hover {
+  color: #000000;
+}
+.selectize-dropdown.plugin-optgroup_columns .optgroup {
+  border-right: 1px solid #f2f2f2;
+  border-top: 0 none;
+  float: left;
+  box-sizing: border-box;
+}
+.selectize-dropdown.plugin-optgroup_columns .optgroup:last-child {
+  border-right: 0 none;
+}
+.selectize-dropdown.plugin-optgroup_columns .optgroup:before {
+  display: none;
+}
+.selectize-dropdown.plugin-optgroup_columns .optgroup-header {
+  border-top: 0 none;
+}
+.selectize-control.plugin-remove_button [data-value] {
+  position: relative;
+  padding-right: 24px !important;
+}
+.selectize-control.plugin-remove_button [data-value] .remove {
+  z-index: 1;
+  /* fixes ie bug (see #392) */
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 17px;
+  text-align: center;
+  font-weight: bold;
+  font-size: 12px;
+  color: inherit;
+  text-decoration: none;
+  vertical-align: middle;
+  display: inline-block;
+  padding: 2px 0 0 0;
+  border-left: 1px solid #d0d0d0;
+  border-radius: 0 2px 2px 0;
+  box-sizing: border-box;
+}
+.selectize-control.plugin-remove_button [data-value] .remove:hover {
+  background: rgba(0, 0, 0, 0.05);
+}
+.selectize-control.plugin-remove_button [data-value].active .remove {
+  border-left-color: #cacaca;
+}
+.selectize-control.plugin-remove_button .disabled [data-value] .remove:hover {
+  background: none;
+}
+.selectize-control.plugin-remove_button .disabled [data-value] .remove {
+  border-left-color: #ffffff;
+}
+.selectize-control {
+  position: relative;
+}
+.selectize-dropdown,
+.selectize-input,
+.selectize-input input {
+  color: #303030;
+  font-family: inherit;
+  font-size: 13px;
+  line-height: 18px;
+  -webkit-font-smoothing: inherit;
+}
+.selectize-input,
+.selectize-control.single .selectize-input.input-active {
+  background: #ffffff;
+  cursor: text;
+  display: inline-block;
+}
+.selectize-input {
+  border: 1px solid #d0d0d0;
+  padding: 8px 8px;
+  display: inline-block;
+  width: 100%;
+  overflow: hidden;
+  position: relative;
+  z-index: 1;
+  box-sizing: border-box;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
+  border-radius: 3px;
+}
+.selectize-control.multi .selectize-input.has-items {
+  padding: 6px 8px 3px;
+}
+.selectize-input.full {
+  background-color: #ffffff;
+}
+.selectize-input.disabled,
+.selectize-input.disabled * {
+  cursor: default !important;
+}
+.selectize-input.focus {
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
+}
+.selectize-input.dropdown-active {
+  border-radius: 3px 3px 0 0;
+}
+.selectize-input > * {
+  vertical-align: baseline;
+  display: -moz-inline-stack;
+  display: inline-block;
+  zoom: 1;
+  *display: inline;
+}
+.selectize-control.multi .selectize-input > div {
+  cursor: pointer;
+  margin: 0 3px 3px 0;
+  padding: 2px 6px;
+  background: #f2f2f2;
+  color: #303030;
+  border: 0 solid #d0d0d0;
+}
+.selectize-control.multi .selectize-input > div.active {
+  background: #e8e8e8;
+  color: #303030;
+  border: 0 solid #cacaca;
+}
+.selectize-control.multi .selectize-input.disabled > div,
+.selectize-control.multi .selectize-input.disabled > div.active {
+  color: #7d7d7d;
+  background: #ffffff;
+  border: 0 solid #ffffff;
+}
+.selectize-input > input {
+  display: inline-block !important;
+  padding: 0 !important;
+  min-height: 0 !important;
+  max-height: none !important;
+  max-width: 100% !important;
+  margin: 0 2px 0 0 !important;
+  text-indent: 0 !important;
+  border: 0 none !important;
+  background: none !important;
+  line-height: inherit !important;
+  -webkit-user-select: auto !important;
+  box-shadow: none !important;
+}
+.selectize-input > input::-ms-clear {
+  display: none;
+}
+.selectize-input > input:focus {
+  outline: none !important;
+}
+.selectize-input::after {
+  content: ' ';
+  display: block;
+  clear: left;
+}
+.selectize-input.dropdown-active::before {
+  content: ' ';
+  display: block;
+  position: absolute;
+  background: #f0f0f0;
+  height: 1px;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+.selectize-dropdown {
+  position: absolute;
+  z-index: 10;
+  border: 1px solid #d0d0d0;
+  background: #ffffff;
+  margin: -1px 0 0 0;
+  border-top: 0 none;
+  box-sizing: border-box;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  border-radius: 0 0 3px 3px;
+}
+.selectize-dropdown [data-selectable] {
+  cursor: pointer;
+  overflow: hidden;
+}
+.selectize-dropdown [data-selectable] .highlight {
+  background: rgba(125, 168, 208, 0.2);
+  border-radius: 1px;
+}
+.selectize-dropdown [data-selectable],
+.selectize-dropdown .optgroup-header {
+  padding: 5px 8px;
+}
+.selectize-dropdown .optgroup:first-child .optgroup-header {
+  border-top: 0 none;
+}
+.selectize-dropdown .optgroup-header {
+  color: #303030;
+  background: #ffffff;
+  cursor: default;
+}
+.selectize-dropdown .active {
+  background-color: #f5fafd;
+  color: #495c68;
+}
+.selectize-dropdown .active.create {
+  color: #495c68;
+}
+.selectize-dropdown .create {
+  color: rgba(48, 48, 48, 0.5);
+}
+.selectize-dropdown-content {
+  overflow-y: auto;
+  overflow-x: hidden;
+  max-height: 200px;
+}
+.selectize-control.single .selectize-input,
+.selectize-control.single .selectize-input input {
+  cursor: pointer;
+}
+.selectize-control.single .selectize-input.input-active,
+.selectize-control.single .selectize-input.input-active input {
+  cursor: text;
+}
+.selectize-control.single .selectize-input:after {
+  content: ' ';
+  display: block;
+  position: absolute;
+  top: 50%;
+  right: 15px;
+  margin-top: -3px;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 5px 5px 0 5px;
+  border-color: #808080 transparent transparent transparent;
+}
+.selectize-control.single .selectize-input.dropdown-active:after {
+  margin-top: -4px;
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent #808080 transparent;
+}
+.selectize-control.rtl.single .selectize-input:after {
+  left: 15px;
+  right: auto;
+}
+.selectize-control.rtl .selectize-input > input {
+  margin: 0 4px 0 -2px !important;
+}
+.selectize-control .selectize-input.disabled {
+  opacity: 0.5;
+  background-color: #fafafa;
+}
+
+// Custom
+.selectize-input {
+  border: 0;
+  padding: 8px 10px;
+  border-radius: 2px;
+  border: 1px solid $select-border-color;
+  box-shadow: none;
+  transition: border-color 0.25s ease;
+  &.dropdown-active {
+    border-radius: 0;
+  }
+  &.focus {
+    box-shadow: none;
+    border-color: $select-focus-border-color;
+  }
+}
+
+.selectize-control.single .selectize-input:after {
+  border-color: $select-focus-border-color transparent transparent transparent;
+}
+
+.selectize-dropdown {
+  border: 0;
+  margin: 0;
+  box-shadow: $select-dropdown-shadow;
+  border-radius: 0;
+}
+
+.selectize-dropdown .active {
+  background-color: $select-dropdown-active-bg;
+  color: $white;
+}
+
+.selectize-dropdown [data-selectable], .selectize-dropdown .optgroup-header {
+  padding: 8px;
+}