viniBaxter-spa_directory 0.1.0

data/lib/viniBaxter/sass/spa_directory/temp_directory/theme/_filter.scss

@@ -0,0 +1,24 @@
+/*
+* ===================================================
+*     Category sidebar + filter
+* ===================================================
+*/
+
+.filter-block {
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+    border-bottom: 1px solid $gray-200;
+    &:last-of-type {
+        border-bottom: none;
+    }
+    &:first-of-type {
+        border-top: 1px solid $gray-200;
+    }
+}
+
+.sidebar-heading {
+    margin-bottom: 1.2rem;
+    font-weight: 400;
+    color: $gray-600;
+    @include uppercase;
+}

data/lib/viniBaxter/sass/spa_directory/temp_directory/theme/_forms.scss

@@ -0,0 +1,210 @@
+/*
+* ===================================================
+*     Custom form controls
+* ===================================================
+*/
+
+// 1. Label
+.form-label {
+    color: $gray-600;
+    font-size: $font-size-base * .8;
+    @include uppercase;
+}
+
+// 2. Underlined form control, i.e. Keep only border bottom
+.form-control.form-control-underlined {
+    border-radius: 0;
+    border-top: none;
+    border-left: none;
+    border-right: none;
+    padding-left: 0;
+}
+
+// 3. Items +/- button
+
+.form-control.input-items {
+    width: 2rem;
+    border-color: transparent;
+    margin-left: .6rem;
+    margin-right: .6rem;
+    padding-left: 0;
+    padding-right: 0;
+    text-align: center;
+
+    &:disabled {
+        background: $white;
+    }
+}
+
+.btn.btn-items {
+    display: inline-block;
+    width: 30px;
+    height: 30px;
+    line-height: 30px;
+    border-radius: 50%;
+    letter-spacing: 0;
+    font-weight: normal;
+    padding: 0;
+    border: solid 1px theme-color('primary');
+    text-align: center;
+    color: theme-color('primary');
+    flex-shrink: 0;
+}
+
+// 4. Input + absolutely positioned label inside it
+
+.input-label-absolute {
+    position: relative;
+}
+
+.label-absolute {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    color: $gray-600;
+}
+
+.input-label-absolute-left {
+    .label-absolute {
+        left: .7rem;
+    }
+
+    .form-control {
+        padding-left: 2rem;
+    }
+}
+
+.input-label-absolute-right {
+    .label-absolute {
+        right: .7rem;
+    }
+
+    .form-control {
+        padding-right: 2rem;
+    }
+}
+
+// 5. Expanding input - used for search in the navbar
+
+.input-expand {
+    position: relative;
+    z-index: 50;
+
+    .form-control {
+        width: 100%;
+        max-width: 15rem;
+        transition: all .5s !important;
+    }
+
+    &.focus {
+        // position: absolute;
+
+        .form-control {
+            width: 15rem !important;
+        }
+    }
+}
+
+.input-reset.focus {
+    .form-control {
+        padding-right: 2rem;
+    }
+
+    .btn-reset {
+        display: block;
+    }
+}
+
+.btn-reset {
+    display: none;
+    position: absolute;
+    top: 50%;
+    right: 0;
+    transform: translateY(-50%);
+    color: $gray-600;
+    background: none;
+
+    &:focus {
+        box-shadow: none;
+    }
+}
+
+// 6. Collapse button (+/- icon switching)
+
+.btn-collapse {
+
+    &::before {
+        display: inline-block;
+        height: 100%;
+        margin-right: .5rem;
+        content: '\f067';
+        text-align: center;
+        font-family: 'Font Awesome 5 Free';
+        font-weight: 900;
+
+    }
+
+    &[aria-expanded='true'] {
+        &::before {
+            content: '\f068';
+        }
+    }
+}
+
+// 7. Muted button
+
+.btn-muted {
+    @include button-variant($text-muted, $text-muted);
+}
+
+.btn-outline-muted {
+    @include button-outline-variant($text-muted);
+}
+
+// 8. Adjust custom switch
+.custom-switch {
+    .custom-control-label {
+        height: $custom-switch-height;  
+        &::before {
+            height: $custom-switch-height;  
+        }
+    }
+    .custom-control-input:checked ~ .custom-control-label {
+        &::after {
+          transform: translateX($custom-switch-width - $custom-switch-indicator-size - .25rem);
+        }
+      }    
+    .text-sm {
+        display: inline-block;
+        margin-top: calc((#{$custom-switch-height} - #{$font-size-sm})/2);
+    }
+}
+
+// 9.  Social icon button
+
+.btn-social {
+    position: relative;
+    padding-left: 3rem;
+}
+
+.btn-social-icon {
+    position: absolute;
+    left: 1rem;
+    width: 2rem;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+// 10. Form Blocks
+
+.form-block {
+    padding-top: 4rem;
+    padding-bottom: 4rem;
+    border-bottom: 1px solid $gray-200;
+    &:first-of-type {
+        border-top: 1px solid $gray-200;
+    }
+    &:last-of-type {
+        border-bottom: none;
+    }
+}

data/lib/viniBaxter/sass/spa_directory/temp_directory/theme/_functions.scss

@@ -0,0 +1,18 @@
+@function str-replace($string, $search, $replace: '') {
+
+    $index: str-index($string, $search);
+
+    @if $index {
+        @return str-slice($string, 1, $index - 1)+$replace+str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+    }
+
+    @return $string;
+}
+
+@function escape-for-svg($color) {
+
+    // To string
+    $string: inspect($color);
+
+    @return str-replace($string, '#', '%23');;
+}

data/lib/viniBaxter/sass/spa_directory/temp_directory/theme/_home.scss

@@ -0,0 +1,180 @@
+/*
+* ===================================================
+*     Homepage Elements
+* ===================================================
+*/
+
+// Homepage full-screen slider
+
+.hero-home {
+    display: flex;
+    position: relative;
+    align-items: center;
+
+    @include media-breakpoint-up(md) {
+        min-height: 600px;
+    }
+}
+
+.multi-slider {
+    height: 100vh;
+    min-height: 800px;
+
+    .swiper-slide {
+        padding-top: 95px;
+    }
+}
+
+/*
+     Search bars on the homepage
+    ------------------------
+*/
+
+.search-bar {
+    border-radius: 10rem;
+    background: #fff;
+    box-shadow: $box-shadow;
+
+    .form-group {
+        position: relative;
+        margin-bottom: 0;
+
+        &::after {
+            display: block;
+            width: 1px;
+            height: 60%;
+            content: '';
+            background: #ddd;
+            @include position(absolute, 20%, $right: 0);
+        }
+
+        &.no-divider,
+        &:last-of-type {
+            &::after {
+                display: none;
+            }
+        }
+    }
+
+    .form-control {
+        height: $input-height-lg;
+    }
+
+    .input-label-absolute-right .label-absolute {
+        right: 0;
+    }
+
+    &.search-bar-with-tabs {
+        border-radius: $border-radius;
+
+    }
+
+}
+
+@include media-breakpoint-down(md) {
+    .search-bar {
+        border-radius: 20px;
+
+        .form-group {
+            margin-bottom: 1rem;
+
+            &::after {
+                display: block;
+                width: calc(100% - 4rem);
+                height: 1px;
+                content: '';
+                transform: translateX(-50%);
+                background: $gray-300;
+                @include position(absolute, $top: auto, $bottom: 0, $left: 50%, $right: auto);
+            }
+        }
+
+        .form-control {
+            height: $input-height;
+            padding: 10px 20px;
+        }
+
+        .input-label-absolute-right .label-absolute {
+            right: 1rem;
+        }
+
+        .bootstrap-select {
+            display: block !important;
+            width: 100% !important;
+            padding: 0;
+
+            button {
+                display: block;
+                width: 100% !important;
+                padding: 10px 20px;
+            }
+        }
+
+    }
+}
+
+.nav-tabs.search-bar-nav-tabs {
+    border-bottom: none;
+
+    .nav-link {
+        padding: 1rem 2rem 1.5rem;
+        margin-bottom: -10px;
+        font-weight: bold;
+
+        border: $nav-tabs-border-width solid transparent;
+        color: $nav-tabs-link-active-color;
+        background-color: rgba($white, .5);
+
+        @include simpleTransition();
+
+        @include border-top-radius($nav-tabs-border-radius);
+
+        @include hover-focus() {
+            color: $nav-tabs-link-active-color;
+            background-color: rgba($white, .8);
+        }
+
+    }
+
+    .nav-link.active,
+    .nav-item.show .nav-link {
+        color: theme-color('primary');
+        background-color: $nav-tabs-link-active-bg;
+        border-color: $white;
+    }
+}
+
+.hero {
+    position: relative;
+    text-align: center;
+    background: $gray-100;
+    box-shadow: $box-shadow-sm;
+}
+
+.hero-slider {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+
+    .swiper-slide {
+        height: 100%;
+        background-repeat: no-repeat;
+        background-position: center center;
+        background-size: cover;
+    }
+}
+
+.advantage-number {
+    position: absolute;
+    top: -40px;
+    left: 20px;
+    width: 3rem;
+    text-align: center;
+    opacity: 0.5;
+    color: theme-color('primary');
+    font-size: 90px;
+    font-weight: bold;
+    z-index: -1;
+}

data/lib/viniBaxter/sass/spa_directory/temp_directory/theme/_icons.scss

@@ -0,0 +1,83 @@
+/*
+* ===================================================
+*    Icons + Badges
+* ===================================================
+*/
+.badge-transparent {
+    color: $gray-900;
+    background: rgba($gray-100, 0.9);
+}
+
+.icon-circle {
+    width: 20px;
+    height: 20px;
+    text-align: center;
+    color: $white;
+    border-radius: 50%;
+    font-size: .5rem;
+    line-height: 20px;
+
+    i {
+        vertical-align: middle;
+    }
+}
+
+.icon-rounded {
+    display: inline-block;
+    width: 4rem;
+    height: 4rem;
+    border-radius: 50%;
+    text-align: center;
+    line-height: 4rem;
+
+    svg,
+    i {
+        vertical-align: middle;
+    }
+
+    &.icon-rounded-sm {
+        width: 3rem;
+        height: 3rem;
+        line-height: 3rem;
+    }
+    &.icon-rounded-lg {
+        width: 5rem;
+        height: 5rem;
+        line-height: 5rem;
+    }
+    &.icon-rounded-xl {
+        width: 7rem;
+        height: 7rem;
+        line-height: 7rem;
+    }
+}
+
+.svg-icon {
+    width: 18px;
+    height: 18px;
+    vertical-align: text-bottom;
+    stroke: currentColor;
+    stroke-width: 3;
+
+    --layer1: currentColor;
+    --layer2: currentColor;
+
+    &.svg-icon-light {
+        stroke-width: 2;
+    }
+
+    &.svg-icon-heavy {
+        stroke-width: 4;
+    }
+
+    &.svg-icon-md {
+        width: 30px;
+        height: 30px;
+    }
+
+    &.svg-icon-lg {
+        width: 36px;
+        height: 36px;
+    }
+}
+