viniBaxter-desk_front 0.5.0 → 12.0.0

data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/_flickity.scss

@@ -0,0 +1,112 @@
+//
+// flickity.scss
+// Library overrides
+//
+
+// Controls
+
+.flickity-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: $input-height;
+  height: $input-height;
+  background-color: $primary;
+  box-shadow: $box-shadow-light;
+  color: $white;
+
+  &::before, &::after {
+    font-family: "Feather";
+  }
+
+  @include hover-focus {
+    background-color: $primary;
+    box-shadow: $box-shadow;
+  }
+}
+
+.flickity-button.previous {
+  left: 0;
+  transform: translate(calc(-50% + #{$grid-gutter-width / 4}), -50%);
+
+  @include media-breakpoint-up(md) {
+    transform: translate(-50%, -50%);
+  }
+
+  &::before {
+    content: "\e910";
+  }
+}
+
+.flickity-button.next {
+  right: 0;
+  transform: translate(calc(50% - #{$grid-gutter-width / 4}), -50%);
+
+  @include media-breakpoint-up(md) {
+    transform: translate(50%, -50%);
+  }
+
+  &::before {
+    content: "\e912";
+  }
+}
+
+.flickity-button-icon {
+  display: none;
+}
+
+
+// Button white
+
+.flickity-button-white .flickity-button {
+  background-color: $white;
+  color: $primary;
+}
+
+
+// Button bottom
+
+.flickity-button-bottom .flickity-button {
+  top: auto;
+  bottom: 1.5rem;
+  transform: none;
+}
+
+.flickity-button-bottom .flickity-button.previous {
+  left: auto;
+  right: 6.375rem;
+}
+
+.flickity-button-bottom .flickity-button.next {
+  left: auto;
+  right: 2.5rem;
+}
+
+
+// Button inset
+
+.flickity-button-inset .flickity-button {
+  transform: translateY(-50%);
+}
+
+.flickity-button-inset .flickity-button.previous {
+  left: 1.5rem;
+}
+
+.flickity-button-inset .flickity-button.next {
+  right: 1.5rem;
+}
+
+
+// Viewport
+
+.flickity-viewport-visible .flickity-viewport {
+  overflow: visible;
+}
+
+
+// Adaptive height
+
+[data-flickity*='"adaptiveHeight": true'] .flickity-viewport {
+  transition: all .5s ease; // Make the transition match the rough duration of flicking between items
+}

data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/_footer.scss

@@ -0,0 +1,10 @@
+//
+// footer.scss
+// Theme component
+//
+
+// Brand image
+
+.bg-dark .footer-brand {
+  filter: brightness(0) invert(1);
+}

data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/_forms.scss

@@ -0,0 +1,92 @@
+//
+// forms.scss
+// Extended from Boostrap
+//
+
+// Form control flush
+
+.form-control-flush {
+  padding-left: 0;
+  padding-right: 0;
+  border-top-width: 0;
+  border-right-width: 0;
+  border-left-width: 0;
+  border-radius: 0;
+}
+
+
+// Custom file input
+
+.custom-file-label::after {
+  font-weight: $font-weight-bold;
+}
+
+
+// Floating label
+//
+// Works for base size only
+
+.form-label-group {
+  position: relative;
+  margin-bottom: $form-group-margin-bottom;
+}
+
+.form-label-group > label {
+  position: absolute;
+  top: 0; left: 0;
+  width: 100%; height: $input-height;
+  padding: $input-padding-y $input-padding-x;
+  margin-bottom: 0;
+  line-height: $input-line-height;
+  font-size: $input-font-size;
+  color: $input-placeholder-color;
+  pointer-events: none;
+  cursor: text;
+  transition: $transition-base;
+}
+
+.form-label-group > .form-control-flush ~ label {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.form-label-group > .form-control::placeholder {
+  color: transparent;
+}
+
+.form-label-group > .form-control:not(:placeholder-shown) {
+  padding-top: $input-padding-y * 1.5;
+  padding-bottom: $input-padding-y * .5;
+}
+
+.form-label-group > .form-control:not(:placeholder-shown) ~ label {
+  padding-top: ((($input-padding-y * 1.5) - ($font-size-xs * $input-line-height)) / 2);
+  padding-bottom: ((($input-padding-y * 1.5) - ($font-size-xs * $input-line-height)) / 2);
+  font-size: $font-size-xs;
+}
+
+// Fallback for Edge
+
+@supports (-ms-ime-align: auto) {
+
+  .form-label-group > label {
+    display: none;
+  }
+
+  .form-label-group .form-control::placeholder {
+    color: $input-placeholder-color;
+  }
+}
+
+// Fallback for IE
+
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+
+  .form-label-group > label {
+    display: none;
+  }
+
+  .form-label-group .form-control::placeholder {
+    color: $input-placeholder-color;
+  }
+}

data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/_functions.scss

@@ -0,0 +1,14 @@
+// =========
+// Functions
+// =========
+
+// Colors
+// ======
+
+@function tint($color, $percentage) {
+	@return mix(white, $color, $percentage);
+}
+
+@function shade($color, $percentage) {
+	@return mix(black, $color, $percentage);
+}

data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/_grid.scss

@@ -0,0 +1,9 @@
+//
+// grid.scsss
+// Extended from Bootstrap
+//
+
+.container, .container-fluid {
+  position: relative;
+  z-index: 1;
+}

data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/_highlight.scss

@@ -0,0 +1,8 @@
+//
+// highlight.js
+// Theme component
+//
+
+.hljs {
+  background-color: transparent;
+}

data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/_icon.scss

@@ -0,0 +1,56 @@
+//
+// icon.scss
+// Theme component
+//
+
+.icon>svg {
+  width: $icon-size-base;
+  height: $icon-size-base;
+}
+
+.icon>img {
+  width: $icon-size-base;
+  height: $icon-size-base;
+}
+
+// Use "text-" utilities to fill svg icons
+.icon[class*="text-"]>svg [fill]:not([fill="none"]) {
+  fill: currentColor !important;
+}
+
+// Sizing
+
+.icon-xs>svg {
+  width: $icon-size-xs;
+  height: $icon-size-xs;
+}
+
+.icon-sm>svg {
+  width: $icon-size-sm;
+  height: $icon-size-sm;
+}
+
+.icon-lg>svg {
+  width: $icon-size-lg;
+  height: $icon-size-lg;
+}
+
+.icon-xl>svg {
+  width: $icon-size-xl;
+  height: $icon-size-xl;
+}
+
+// Circle
+
+.icon-circle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: $icon-circle-size;
+  height: $icon-circle-size;
+  border-radius: 50%;
+
+  >.fe {
+    font-size: $icon-circle-font-size;
+  }
+}

data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/_images.scss

@@ -0,0 +1,32 @@
+//
+// images.scss
+// Extended from Bootstrap
+//
+
+// Image cover
+//
+// Spans the whole with of the viewport
+
+.img-cover {
+  width: 100vw;
+  height: auto;
+  margin-left: calc(50% - 50vw);
+}
+
+// Extending .img-fluid class to support nested images
+
+.img-fluid > img,
+.img-fluid > svg {
+  max-width: inherit;
+  height: inherit;
+}
+
+// Figure
+
+.figure {
+  display: block;
+}
+
+.figure-img {
+  margin-bottom: $spacer;
+}

data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/_list-group.scss

@@ -0,0 +1,22 @@
+//
+// list-group.scss
+// Extended from Bootstrap
+//
+
+.list-group-flush {
+
+  .list-group-item {
+    padding-left: 0;
+    padding-right: 0;
+
+    &:first-child {
+      padding-top: 0 !important;
+      border-top: 0;
+    }
+
+    &:last-child {
+      padding-bottom: 0 !important;
+      border-bottom: 0;
+    }
+  }
+}

data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/_list.scss

@@ -0,0 +1,27 @@
+//
+// list.scss
+// Theme component
+//
+
+.list {
+  margin-bottom: 0;
+  padding-left: 0;
+  list-style-type: none;
+}
+
+.list-item + .list-item {
+  margin-top: $list-item-spacing-y;
+}
+
+.list-link {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  font-size: $list-link-font-size;
+  color: $list-link-color;
+
+  @include hover-focus {
+    text-decoration: none;
+    color: $list-link-hover-color;
+  }
+}

data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/_mixins.scss

@@ -0,0 +1,8 @@
+//
+// mixins.scss
+// Extended from Bootstrap
+//
+
+@import "mixins/badge";
+@import "mixins/buttons";
+@import "mixins/overlay";

data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/_modal.scss

@@ -0,0 +1,21 @@
+//
+// modals.scss
+// Extended from Bootstrap
+//
+
+.modal-open {
+  padding-right: 0 !important; // additional padding is not required as we have overflow-x: hidden on the root element
+}
+
+.modal-open .navbar {
+  padding-right: $navbar-padding-x !important;
+}
+
+
+// Close
+
+.modal-close {
+  position: absolute;
+  top: 1.5rem; right: 1.5rem;
+  z-index: $zindex-dropdown;
+}

data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/_navbar.scss

@@ -0,0 +1,377 @@
+//
+// navbar.scss
+// Extended from Bootstrap
+//
+
+.navbar {
+  transition: $transition-base;
+  transition-property: background-color, color;
+  z-index: $zindex-fixed;
+
+  &.blured {
+    backdrop-filter: saturate(180%) blur(20px);
+  }
+}
+
+// Dark version
+
+.navbar-dark {
+
+  @include media-breakpoint-down(md) {
+
+    .navbar-nav .nav-item .nav-link {
+      color: $navbar-light-color;
+
+      &:hover,
+      &:focus {
+        color: $navbar-light-hover-color;
+      }
+    }
+
+    .navbar-nav .nav-item.active .nav-link,
+    .navbar-nav .nav-item .nav-link.active {
+      color: $navbar-light-active-color;
+    }
+
+    .navbar-collapse .navbar-toggler {
+      color: $navbar-light-color;
+    }
+  }
+}
+
+// Contaner
+
+.navbar>.container,
+.navbar>.container-fluid {
+  padding-left: $grid-gutter-width / 2 !important;
+  padding-right: $grid-gutter-width / 2 !important;
+}
+
+// Brand
+
+.navbar-brand {
+  font-weight: $navbar-brand-font-weight;
+}
+
+.navbar-brand-img {
+  max-height: $navbar-brand-height;
+  width: auto;
+}
+
+.navbar-dark .navbar-brand {
+  filter: brightness(0) invert(1);
+}
+
+// change nav links and logo color if  shouldStayTransparent class
+.navbar-dark.shouldStayTransparent {
+  .navbar-nav .nav-link {
+    filter: brightness(0.1) invert(1);
+  }
+
+  .navbar-brand {
+    filter: brightness(1) invert(1);
+  }
+}
+
+// Button
+
+.navbar-btn {
+
+  @include media-breakpoint-down(md) {
+    width: 100%;
+    padding: $btn-padding-y $btn-padding-x;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    font-size: $btn-font-size;
+  }
+}
+
+// Navigation
+
+.navbar-nav .nav-link {
+  font-weight: $navbar-nav-link-font-weight;
+
+  @include hover-focus {
+    outline: none;
+  }
+}
+
+// Boxed layout
+
+.navbar-dark.fixed-top>.container {
+  position: relative;
+
+  &::after {
+    content: "";
+    position: absolute;
+    right: 0;
+    bottom: -$navbar-padding-y;
+    left: 0;
+    border-top: $border-width solid fade-out($white, .8);
+  }
+}
+
+// Collapse
+
+@include media-breakpoint-down(md) {
+
+  .navbar-collapse {
+    position: fixed;
+    top: $spacer;
+    right: $spacer;
+    left: $spacer;
+    height: auto !important;
+    max-height: calc(100vh - #{$spacer * 2});
+    background-color: $dropdown-bg;
+    border-radius: $dropdown-border-radius;
+    box-shadow: $box-shadow-dark-lg;
+    overflow-y: scroll; // This has to be scroll for iOS bounce scroll
+    -webkit-overflow-scrolling: touch;
+  }
+
+  // Animation
+
+  .navbar-collapse.show,
+  .navbar-collapse.collapsing {
+    transition: $transition-base;
+    transition-property: opacity, transform, -webkit-transform;
+    transform-origin: top right;
+  }
+
+  .navbar-collapse.show {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  .navbar-collapse.collapsing {
+    opacity: 0;
+    transform: scale(.9);
+  }
+
+}
+
+// Toggler
+
+.navbar-collapse .navbar-toggler {
+  position: absolute;
+  top: $spacer;
+  right: $spacer;
+  z-index: 1;
+
+  @include media-breakpoint-up(lg) {
+    display: none;
+  }
+}
+
+// Navigation
+
+.navbar-nav .nav-item {
+
+  @include media-breakpoint-down(md) {
+    padding: $navbar-nav-item-spacing;
+
+    +.nav-item {
+      border-top: $border-width solid $gray-200;
+    }
+  }
+}
+
+.navbar-nav .nav-link {
+
+  @include media-breakpoint-down(md) {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+}
+
+// Dropdown menu
+
+.navbar-nav .dropdown-menu {
+  box-shadow: none;
+
+  @include media-breakpoint-down(md) {
+    min-width: 0;
+    padding: 0;
+  }
+
+  @include media-breakpoint-up(lg) {
+    box-shadow: $box-shadow-dark-lg;
+  }
+}
+
+.navbar-nav .dropdown>.dropdown-menu {
+  display: block !important;
+}
+
+.navbar-nav .dropright>.dropdown-menu {
+
+  @include media-breakpoint-down(md) {
+    padding-top: $spacer;
+    padding-bottom: $spacer;
+    padding-left: $spacer / 2;
+  }
+}
+
+// Dropdown item
+
+.navbar-nav .dropdown-item,
+.navbar-nav .dropdown-header {
+
+  @include media-breakpoint-down(md) {
+    margin-left: 0;
+    margin-right: 0;
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
+// Dropdown toggle
+
+.navbar-nav .dropdown>.dropdown-toggle {
+
+  &::after {
+    display: none;
+  }
+
+  @include media-breakpoint-down(md) {
+    margin-bottom: $navbar-dropdown-toggle-margin-bottom;
+    pointer-events: none;
+  }
+}
+
+.navbar-nav .dropright>.dropdown-toggle {
+  display: flex;
+
+  &::after {
+    margin-left: auto;
+  }
+
+  @include media-breakpoint-down(md) {
+
+    &::after {
+      content: "\e92e";
+    }
+
+    &[aria-expanded="true"]::after {
+      transform-origin: center center;
+      transform: rotate(180deg);
+    }
+  }
+}
+
+// Dropdown image
+
+.navbar-nav .dropdown-img-left {
+  height: 100%;
+  display: none;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: $dropdown-padding-y $dropdown-padding-x;
+  background: no-repeat center center / cover;
+  border-top-left-radius: $border-radius;
+  border-bottom-left-radius: $border-radius;
+
+  @include media-breakpoint-up(lg) {
+    display: flex;
+  }
+
+  // Overlay
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: fade-out($primary, .2);
+    border-radius: inherit;
+  }
+
+  // Content
+
+  * {
+    position: relative;
+  }
+}
+
+.navbar-nav .dropdown-menu-lg .dropdown-img-left,
+.navbar-nav .dropdown-menu-xl .dropdown-img-left {
+
+  @include media-breakpoint-up(lg) {
+    padding: $dropdown-padding-y-lg $dropdown-padding-x-lg;
+  }
+}
+
+// Dropdown body
+
+.navbar-nav .dropdown-body {
+
+  @include media-breakpoint-up(lg) {
+    padding: $dropdown-padding-y $dropdown-padding-x;
+  }
+}
+
+.navbar-nav .dropdown-menu-lg .dropdown-body,
+.navbar-nav .dropdown-menu-xl .dropdown-body {
+
+  @include media-breakpoint-up(lg) {
+    padding: $dropdown-padding-y-lg $dropdown-padding-x-lg;
+  }
+}
+
+// Dropdown list group
+
+.navbar-nav .dropdown-menu .list-group-item {
+  display: flex;
+  align-items: center;
+  padding-top: $spacer;
+  padding-bottom: $spacer;
+  color: inherit;
+
+  @include hover {
+    text-decoration: none;
+  }
+}
+
+// Toggle dropdown on hover
+
+@include media-breakpoint-up(lg) {
+
+  .navbar-nav .dropdown-menu {
+    z-index: $zindex-fixed;
+    display: block !important;
+    visibility: hidden;
+    opacity: 0;
+  }
+
+  .navbar-nav .hovered>.dropdown-menu {
+    transition: $transition-base;
+    transition-property: opacity, visibility, transform, -webkit-transform;
+    transform-origin: top center;
+  }
+
+  .navbar-nav .dropdown>.dropdown-menu {
+    left: 50%;
+    transform: translate3d(-50%, 10px, 0);
+  }
+
+  .navbar-nav .dropright>.dropdown-menu {
+    transform: translate3d(0, 10px, 0);
+  }
+
+  .navbar-nav .dropdown.show>.dropdown-menu,
+  .navbar-nav .dropright.show>.dropdown-menu {
+    visibility: visible;
+    opacity: 1;
+  }
+
+  .navbar-nav .dropdown.show>.dropdown-menu {
+    transform: translate3d(-50%, 0, 0);
+  }
+
+  .navbar-nav .dropright.show>.dropdown-menu {
+    transform: translate3d(0, 0, 0);
+  }
+}