restore composer.json, add mysqli extension
This commit is contained in:
19
resources/sass/_variables.scss
Executable file
19
resources/sass/_variables.scss
Executable file
@@ -0,0 +1,19 @@
|
||||
// Body
|
||||
$body-bg: #f8fafc;
|
||||
|
||||
// Typography
|
||||
$font-family-sans-serif: 'Nunito', sans-serif;
|
||||
$font-size-base: 0.9rem;
|
||||
$line-height-base: 1.6;
|
||||
|
||||
// Colors
|
||||
$blue: #3490dc;
|
||||
$indigo: #6574cd;
|
||||
$purple: #9561e2;
|
||||
$pink: #f66d9b;
|
||||
$red: #e3342f;
|
||||
$orange: #f6993f;
|
||||
$yellow: #ffed4a;
|
||||
$green: #38c172;
|
||||
$teal: #4dc0b5;
|
||||
$cyan: #6cb2eb;
|
||||
0
resources/sass/abstracts/_functions.scss
Executable file
0
resources/sass/abstracts/_functions.scss
Executable file
408
resources/sass/abstracts/_mixins.scss
Executable file
408
resources/sass/abstracts/_mixins.scss
Executable file
@@ -0,0 +1,408 @@
|
||||
// CSS3-Prefix
|
||||
@mixin css3-prefix($prop, $value) {
|
||||
-webkit-#{$prop}: #{$value};
|
||||
-moz-#{$prop}: #{$value};
|
||||
-ms-#{$prop}: #{$value};
|
||||
-o-#{$prop}: #{$value};
|
||||
#{$prop}: #{$value};
|
||||
}
|
||||
|
||||
// div {
|
||||
// @include css3-prefix(transform, scale3d(2.5, 2, 1.5));
|
||||
// }
|
||||
//
|
||||
@mixin text-clamp($clamp, $height:auto) {
|
||||
-webkit-line-clamp: $clamp;
|
||||
height: $height;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Fonts
|
||||
@mixin font-face($name, $file) {
|
||||
@font-face {
|
||||
font-family: #{$name};
|
||||
src: url("../fonts/Qanelas/#{$file}.ttf") format("truetype");
|
||||
|
||||
// src: url("../fonts/Qanelas/#{$file}.eot");
|
||||
// src: url("../fonts/Qanelas/#{$file}.eot?#iefix") format("embedded-opentype"),
|
||||
// url("../fonts/Qanelas/#{$file}.woff") format("woff"),
|
||||
// url("../fonts/Qanelas/#{$file}.ttf") format("truetype"),
|
||||
// url("../fonts/Qanelas/#{$file}.svg?#webfont") format("svg");
|
||||
}
|
||||
}
|
||||
|
||||
// @include font-face("My Font", my-font);
|
||||
|
||||
|
||||
|
||||
// Keyframes
|
||||
@mixin keyframes($name) {
|
||||
@-webkit-keyframes #{$name} {
|
||||
@content;
|
||||
}
|
||||
|
||||
@-moz-keyframes #{$name} {
|
||||
@content;
|
||||
}
|
||||
|
||||
@keyframes #{$name} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Absolute Position
|
||||
@mixin abs-position ($top, $right, $bottom, $left) {
|
||||
position: absolute;
|
||||
top: $top;
|
||||
right: $right;
|
||||
bottom: $bottom;
|
||||
left: $left;
|
||||
}
|
||||
|
||||
// div {
|
||||
// @include abs-position(100px, 100px, auto, auto);
|
||||
// }
|
||||
|
||||
|
||||
|
||||
// Retina Image
|
||||
@mixin retina-image($image, $width, $height) {
|
||||
|
||||
@media (min--moz-device-pixel-ratio: 1.3),
|
||||
(-o-min-device-pixel-ratio: 2.6/2),
|
||||
(-webkit-min-device-pixel-ratio: 1.3),
|
||||
(min-device-pixel-ratio: 1.3),
|
||||
(min-resolution: 1.3dppx) {
|
||||
background-image: url($image);
|
||||
background-size: $width $height;
|
||||
}
|
||||
}
|
||||
|
||||
// .image {
|
||||
// background: url("my-image.png") no-repeat;
|
||||
// @include retina-image("my-image2x.png", 1000px, 500px);
|
||||
// }
|
||||
|
||||
|
||||
|
||||
|
||||
// Arrows
|
||||
@mixin arrow($direction: down, $size: 5px, $color: #555) {
|
||||
width: 0;
|
||||
height: 0;
|
||||
|
||||
@if ($direction==left) {
|
||||
border-top: $size solid transparent;
|
||||
border-bottom: $size solid transparent;
|
||||
border-right: $size solid $color;
|
||||
}
|
||||
|
||||
@else if ($direction==right) {
|
||||
border-top: $size solid transparent;
|
||||
border-bottom: $size solid transparent;
|
||||
border-left: $size solid $color;
|
||||
}
|
||||
|
||||
@else if ($direction==down) {
|
||||
border-left: $size solid transparent;
|
||||
border-right: $size solid transparent;
|
||||
border-top: $size solid $color;
|
||||
}
|
||||
|
||||
@else {
|
||||
border-left: $size solid transparent;
|
||||
border-right: $size solid transparent;
|
||||
border-bottom: $size solid $color;
|
||||
}
|
||||
}
|
||||
|
||||
// without arguments (default)
|
||||
// div {
|
||||
// @include arrow();
|
||||
// }
|
||||
|
||||
// with custom arguments
|
||||
// div {
|
||||
// @include arrow(up, 10px, #efefef);
|
||||
// }
|
||||
|
||||
|
||||
// Aspect ratio
|
||||
@mixin aspect-ratio($width, $height) {
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
display: block;
|
||||
content: "";
|
||||
width: 100%;
|
||||
padding-top: ($height / $width) * 100%;
|
||||
}
|
||||
|
||||
>.inner-box {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// <!-- HTML -->
|
||||
// <div class="outer-box">
|
||||
// <div class="inner-box"></div>
|
||||
// </div>
|
||||
|
||||
// SCSS
|
||||
// .outer-box {
|
||||
// @include aspect-ratio(4, 3);
|
||||
// }
|
||||
|
||||
|
||||
// Media Queries
|
||||
$breakpoints: (
|
||||
"phone-smallest": 251px,
|
||||
"phone-small": 321px,
|
||||
"phone": 400px,
|
||||
"phone-wide": 480px,
|
||||
"phablet": 560px,
|
||||
"tablet-small": 640px,
|
||||
"tablet": 768px,
|
||||
"tablet-wide": 1024px,
|
||||
"desktop": 1248px,
|
||||
"desktop-wide": 1440px,
|
||||
"desktop-large": 2500px
|
||||
);
|
||||
|
||||
@mixin mq($width, $type: min) {
|
||||
@if map_has_key($breakpoints, $width) {
|
||||
$width: map_get($breakpoints, $width);
|
||||
|
||||
@if $type==max {
|
||||
$width: $width - 1px;
|
||||
}
|
||||
|
||||
@media only screen and (#{$type}-width: $width) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// @include mq('tablet-wide') {
|
||||
// padding-top: 4rem;
|
||||
// font-size: 2.4rem;
|
||||
// }
|
||||
|
||||
|
||||
// Z-index
|
||||
@function z($name) {
|
||||
@if index($z-indexes, $name) {
|
||||
@return (length($z-indexes) - index($z-indexes, $name))+1;
|
||||
}
|
||||
|
||||
@else {
|
||||
@warn 'There is no item "#{$name}" in this list; choose one of: #{$z-indexes}';
|
||||
@return null;
|
||||
}
|
||||
}
|
||||
|
||||
$z-indexes: ("outdated-browser",
|
||||
"modal",
|
||||
"site-header",
|
||||
"page-wrapper",
|
||||
"site-footer"
|
||||
);
|
||||
// .site-header {
|
||||
// z-index: z('site-header');
|
||||
// }
|
||||
|
||||
|
||||
// Perspective
|
||||
@mixin hardware($backface: true, $perspective: 1000) {
|
||||
@if $backface {
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
perspective: $perspective;
|
||||
}
|
||||
|
||||
|
||||
// Box
|
||||
@mixin box($width, $height: $width) {
|
||||
width: $width;
|
||||
height: $height;
|
||||
}
|
||||
|
||||
|
||||
// Opacity
|
||||
@mixin opacity($opacity) {
|
||||
opacity: $opacity;
|
||||
$opacity-ie: $opacity * 100;
|
||||
filter: alpha(opacity=$opacity-ie); //IE8
|
||||
}
|
||||
// .fade {
|
||||
// @include opacity(.4);
|
||||
// }
|
||||
|
||||
// Font Size
|
||||
@mixin font-size($size, $base: 16) {
|
||||
font-size: $size; // fallback for old browsers
|
||||
font-size: ($size / $base) * 1rem;
|
||||
}
|
||||
// body {
|
||||
// @include font-size(16);
|
||||
// }
|
||||
|
||||
// p {
|
||||
// @include font-size(12, 10);
|
||||
// }
|
||||
|
||||
|
||||
// Gradients
|
||||
@mixin gradient($start-color, $end-color, $orientation) {
|
||||
background: $start-color;
|
||||
|
||||
@if $orientation=='vertical' {
|
||||
background: -webkit-linear-gradient(top, $start-color, $end-color);
|
||||
background: linear-gradient(to bottom, $start-color, $end-color);
|
||||
}
|
||||
|
||||
@else if $orientation=='horizontal' {
|
||||
background: -webkit-linear-gradient(left, $start-color, $end-color);
|
||||
background: linear-gradient(to right, $start-color, $end-color);
|
||||
}
|
||||
|
||||
@else {
|
||||
background: -webkit-radial-gradient(center, ellipse cover, $start-color, $end-color);
|
||||
background: radial-gradient(ellipse at center, $start-color, $end-color);
|
||||
}
|
||||
}
|
||||
// .gradient {
|
||||
// @include gradient(#07c, #06f, vertical);
|
||||
// }
|
||||
|
||||
|
||||
// Define vertical, horizontal, or both position
|
||||
@mixin center($position) {
|
||||
position: absolute;
|
||||
|
||||
@if $position=='vertical' {
|
||||
top: 50%;
|
||||
-webkit-transform: translateY(-50%);
|
||||
-ms-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
@else if $position=='horizontal' {
|
||||
left: 50%;
|
||||
-webkit-transform: translateX(-50%);
|
||||
-ms-transform: translateX(-50%);
|
||||
transform: translate(-50%);
|
||||
}
|
||||
|
||||
@else if $position=='both' {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
-ms-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
// Using the mixin
|
||||
// .foo {
|
||||
// @include center(both);
|
||||
// }
|
||||
// .foo-parent {
|
||||
// position: relative;
|
||||
// }
|
||||
|
||||
//Padding mixin
|
||||
@mixin padding($top, $right, $bottom, $left) {
|
||||
padding-top: $top;
|
||||
padding-right: $right;
|
||||
padding-bottom: $bottom;
|
||||
padding-left: $left;
|
||||
}
|
||||
|
||||
//Margin mixin
|
||||
@mixin margin($top, $right, $bottom, $left) {
|
||||
margin-top: $top;
|
||||
margin-right: $right;
|
||||
margin-bottom: $bottom;
|
||||
margin-left: $left;
|
||||
}
|
||||
|
||||
//Usage definition
|
||||
// @include padding(top, right, bottom, left);
|
||||
// @include margin(top, right, bottom, left);
|
||||
//Usage 1
|
||||
// @include padding(1px, 2px, 3px, 4px);
|
||||
// @include margin(1px, 2px, 3px, 4px);
|
||||
//Output 1
|
||||
// padding: 1px 2px 3px 4px;
|
||||
// margin: 1px 2px 3px 4px;
|
||||
//Usage 2 (with null properties)
|
||||
// @include padding(1px, null, 3px, 4px);
|
||||
// @include margin(1px, 2px, null, 4px);
|
||||
//Output 2
|
||||
// padding-top: 1px;
|
||||
// padding-bottom: 3px;
|
||||
// padding-left: 4px;
|
||||
// margin-top: 1px;
|
||||
// margin-right: 2px;
|
||||
// margin-left: 4px;
|
||||
|
||||
// PLACEHOLDER
|
||||
%btn {
|
||||
padding: 10px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
font-size: 14px;
|
||||
width: 150px;
|
||||
margin: 5px 0;
|
||||
text-align: center;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* BUTTON MIXIN
|
||||
============================================= */
|
||||
|
||||
@mixin btn-background($btn-background) {
|
||||
@extend %btn;
|
||||
background-color: $btn-background;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($btn-background, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
// BUTTONS
|
||||
|
||||
// .cta-btn {
|
||||
// @include btn-background(green);
|
||||
// }
|
||||
|
||||
// .main-btn {
|
||||
// @include btn-background(orange);
|
||||
// }
|
||||
|
||||
// .info-btn {
|
||||
// @include btn-background(blue);
|
||||
// }
|
||||
|
||||
|
||||
@mixin center-vertically {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
@include prefix(transform, translate(-50%, -50%), 'webkit''ms');
|
||||
}
|
||||
|
||||
// .vc-box {
|
||||
// @include center-vertically;
|
||||
// }
|
||||
123
resources/sass/abstracts/_placeholders.scss
Executable file
123
resources/sass/abstracts/_placeholders.scss
Executable file
@@ -0,0 +1,123 @@
|
||||
// Vertical or Horizontal position
|
||||
%v-c {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
-ms-transform: translateY(-50%);
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
%h-c {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
-ms-transform: translateX(-50%);
|
||||
-webkit-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
%c-c {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
-ms-transform: translate(-50%, -50%);
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
// Background Image
|
||||
%bgcontain {
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
%bgcover {
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
// Flex Center center
|
||||
%fcc {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
%fjb {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
%fja {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
%fjs {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
%fjs {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// Img Fluid
|
||||
%whfluid {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
// img full
|
||||
%wh100 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
// Position Full
|
||||
%pa_full {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
// Transition
|
||||
%tr03 {
|
||||
transition: all 0.3s ease-out;
|
||||
}
|
||||
|
||||
%tr02 {
|
||||
transition: all 0.2s ease-out;
|
||||
}
|
||||
|
||||
%text-shorten {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
%center-block {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
%aftercenter {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
z-index: -2;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
3
resources/sass/abstracts/_variables.scss
Executable file
3
resources/sass/abstracts/_variables.scss
Executable file
@@ -0,0 +1,3 @@
|
||||
// Colors
|
||||
$my-orange: #ff621a;
|
||||
$my-dark-gray: #5b5b5b;
|
||||
9
resources/sass/app.scss
Executable file
9
resources/sass/app.scss
Executable file
@@ -0,0 +1,9 @@
|
||||
// Fonts
|
||||
@import url('https://fonts.googleapis.com/css?family=Nunito');
|
||||
|
||||
// Variables
|
||||
@import 'variables';
|
||||
|
||||
// Bootstrap
|
||||
@import '~bootstrap/scss/bootstrap';
|
||||
//@import './vendor.scss';
|
||||
24
resources/sass/base/_animations.scss
Executable file
24
resources/sass/base/_animations.scss
Executable file
@@ -0,0 +1,24 @@
|
||||
@keyframes mover {
|
||||
0% {
|
||||
transform: translateY(2px) scale(.99);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-10px) scale(1);
|
||||
}
|
||||
}
|
||||
@keyframes mover2 {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
}
|
||||
@keyframes mover3 {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(10px);
|
||||
}
|
||||
}
|
||||
81
resources/sass/base/_base.scss
Executable file
81
resources/sass/base/_base.scss
Executable file
@@ -0,0 +1,81 @@
|
||||
html {
|
||||
scroll-behavior: smooth !important;
|
||||
}
|
||||
|
||||
* {
|
||||
outline: none !important;
|
||||
&::selection {
|
||||
background-color: $my-orange;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.btn.focus,
|
||||
.btn:focus {
|
||||
outline: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
button:focus {
|
||||
outline: none !important;
|
||||
outline: 0 auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
outline: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.input-group > .custom-file .custom-file-input:focus ~ .custom-file-label,
|
||||
.input-group > .custom-select:focus,
|
||||
.input-group > .form-control:focus {
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.btn-dark:not(:disabled):not(.disabled).active:focus,
|
||||
.btn-dark:not(:disabled):not(.disabled):active:focus,
|
||||
.show > .btn-dark.dropdown-toggle:focus {
|
||||
box-shadow: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
@extend %tr02;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.container,
|
||||
.container-lg,
|
||||
.container-md,
|
||||
.container-sm,
|
||||
.container-xl {
|
||||
max-width: 1200px;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
&.menu-active {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #fff !important;
|
||||
font-family: "ProximaNova", Arial, Helvetica, sans-serif;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
html {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
87
resources/sass/base/_fonts.scss
Executable file
87
resources/sass/base/_fonts.scss
Executable file
@@ -0,0 +1,87 @@
|
||||
/* Fonts */
|
||||
// @include font-face("Exo2-Thin", Exo2-Thin); // 100
|
||||
// @include font-face("Exo2-ExtraLight", Exo2-ExtraLight); // 200
|
||||
// @include font-face("Exo2-Light", Exo2-Light); // 300
|
||||
// @include font-face("Exo2-Regular", Exo2-Regular); // 400
|
||||
// @include font-face("Exo2-Medium", Exo2-Medium); // 500
|
||||
// @include font-face("Exo2-SemiBold", Exo2-SemiBold); // 600
|
||||
// @include font-face("Exo2-Bold", Exo2-Bold); // 700
|
||||
// @include font-face("Exo2-ExtraBold", Exo2-ExtraBold); // 800
|
||||
// @include font-face("Exo2-Black", Exo2-Black); // 900
|
||||
|
||||
@font-face {
|
||||
font-family: "ProximaNova";
|
||||
src: url("../fonts/ProximaNova/ProximaNova-Thin.eot");
|
||||
src: local("Proxima Nova Thin"), local("ProximaNova-Thin"),
|
||||
url("../fonts/ProximaNova/ProximaNova-Thin.eot?#iefix") format("embedded-opentype"),
|
||||
url("../fonts/ProximaNova/ProximaNova-Thin.woff") format("woff"),
|
||||
url("../fonts/ProximaNova/ProximaNova-Thin.ttf") format("truetype");
|
||||
font-weight: 100;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "ProximaNova";
|
||||
src: url("../fonts/ProximaNova/ProximaNova-Light.eot");
|
||||
src: local("Proxima Nova Light"), local("ProximaNova-Light"),
|
||||
url("../fonts/ProximaNova/ProximaNova-Light.eot?#iefix") format("embedded-opentype"),
|
||||
url("../fonts/ProximaNova/ProximaNova-Light.woff") format("woff"),
|
||||
url("../fonts/ProximaNova/ProximaNova-Light.ttf") format("truetype");
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "ProximaNova";
|
||||
src: url("../fonts/ProximaNova/ProximaNova-Regular.eot");
|
||||
src: local("Proxima Nova Regular"), local("ProximaNova-Regular"),
|
||||
url("../fonts/ProximaNova/ProximaNova-Regular.eot?#iefix") format("embedded-opentype"),
|
||||
url("../fonts/ProximaNova/ProximaNova-Regular.woff") format("woff"),
|
||||
url("../fonts/ProximaNova/ProximaNova-Regular.ttf") format("truetype");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "ProximaNova";
|
||||
src: url("../fonts/ProximaNova/ProximaNova-Semibold.eot");
|
||||
src: local("Proxima Nova Semibold"), local("ProximaNova-Semibold"),
|
||||
url("../fonts/ProximaNova/ProximaNova-Semibold.eot?#iefix") format("embedded-opentype"),
|
||||
url("../fonts/ProximaNova/ProximaNova-Semibold.woff") format("woff"),
|
||||
url("../fonts/ProximaNova/ProximaNova-Semibold.ttf") format("truetype");
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "ProximaNova";
|
||||
src: url("../fonts/ProximaNova/ProximaNova-Bold.eot");
|
||||
src: local("Proxima Nova Bold"), local("ProximaNova-Bold"),
|
||||
url("../fonts/ProximaNova/ProximaNova-Bold.eot?#iefix") format("embedded-opentype"),
|
||||
url("../fonts/ProximaNova/ProximaNova-Bold.woff") format("woff"),
|
||||
url("../fonts/ProximaNova/ProximaNova-Bold.ttf") format("truetype");
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "ProximaNova";
|
||||
src: url("../fonts/ProximaNova/ProximaNova-Extrabld.eot");
|
||||
src: local("Proxima Nova Extrabold"), local("ProximaNova-Extrabld"),
|
||||
url("../fonts/ProximaNova/ProximaNova-Extrabld.eot?#iefix") format("embedded-opentype"),
|
||||
url("../fonts/ProximaNova/ProximaNova-Extrabld.woff") format("woff"),
|
||||
url("../fonts/ProximaNova/ProximaNova-Extrabld.ttf") format("truetype");
|
||||
font-weight: 800;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "ProximaNova";
|
||||
src: url("../fonts/ProximaNova/ProximaNova-Black.eot");
|
||||
src: local("Proxima Nova Black"), local("ProximaNova-Black"),
|
||||
url("../fonts/ProximaNova/ProximaNova-Black.eot?#iefix") format("embedded-opentype"),
|
||||
url("../fonts/ProximaNova/ProximaNova-Black.woff") format("woff"),
|
||||
url("../fonts/ProximaNova/ProximaNova-Black.ttf") format("truetype");
|
||||
font-weight: 900;
|
||||
font-style: normal;
|
||||
}
|
||||
24
resources/sass/base/_typography.scss
Executable file
24
resources/sass/base/_typography.scss
Executable file
@@ -0,0 +1,24 @@
|
||||
.section-title {
|
||||
font-size: 36px;
|
||||
font-weight: normal;
|
||||
color: rgb(34, 34, 34);
|
||||
|
||||
@include mq("tablet", max) {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
a {
|
||||
&:hover {
|
||||
color: $my-orange;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section-title-small {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: rgb(26, 26, 26);
|
||||
line-height: 1.333;
|
||||
text-align: left;
|
||||
}
|
||||
0
resources/sass/base/_utilities.scss
Executable file
0
resources/sass/base/_utilities.scss
Executable file
86
resources/sass/components/_base.scss
Executable file
86
resources/sass/components/_base.scss
Executable file
@@ -0,0 +1,86 @@
|
||||
// Hamburger
|
||||
// ==================================================
|
||||
.hamburger {
|
||||
padding: $hamburger-padding-y $hamburger-padding-x;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
|
||||
transition-property: opacity, filter;
|
||||
transition-duration: 0.15s;
|
||||
transition-timing-function: linear;
|
||||
|
||||
// Normalize (<button>)
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
text-transform: none;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
|
||||
&:hover {
|
||||
@if $hamburger-hover-use-filter == true {
|
||||
filter: $hamburger-hover-filter;
|
||||
}
|
||||
@else {
|
||||
opacity: $hamburger-hover-opacity;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
&:hover {
|
||||
@if $hamburger-hover-use-filter == true {
|
||||
filter: $hamburger-active-hover-filter;
|
||||
}
|
||||
@else {
|
||||
opacity: $hamburger-active-hover-opacity;
|
||||
}
|
||||
}
|
||||
|
||||
.hamburger-inner,
|
||||
.hamburger-inner::before,
|
||||
.hamburger-inner::after {
|
||||
background-color: $hamburger-active-layer-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hamburger-box {
|
||||
width: $hamburger-layer-width;
|
||||
height: $hamburger-layer-height * 3 + $hamburger-layer-spacing * 2;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hamburger-inner {
|
||||
display: block;
|
||||
top: 50%;
|
||||
margin-top: $hamburger-layer-height / -2;
|
||||
|
||||
&,
|
||||
&::before,
|
||||
&::after {
|
||||
width: $hamburger-layer-width;
|
||||
height: $hamburger-layer-height;
|
||||
background-color: $hamburger-layer-color;
|
||||
border-radius: $hamburger-layer-border-radius;
|
||||
position: absolute;
|
||||
transition-property: transform;
|
||||
transition-duration: 0.15s;
|
||||
transition-timing-function: ease;
|
||||
}
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
}
|
||||
|
||||
&::before {
|
||||
top: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;
|
||||
}
|
||||
|
||||
&::after {
|
||||
bottom: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;
|
||||
}
|
||||
}
|
||||
144
resources/sass/components/_button.scss
Executable file
144
resources/sass/components/_button.scss
Executable file
@@ -0,0 +1,144 @@
|
||||
.my-btn__white {
|
||||
padding: 12px 15px;
|
||||
width: 170px;
|
||||
margin-top: 20px;
|
||||
display: inline-block;
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
border-color: rgb(255, 255, 255);
|
||||
background-color: rgba(203, 86, 42, 0);
|
||||
font-size: 16px;
|
||||
border-radius: 25.5px;
|
||||
font-weight: normal;
|
||||
color: rgb(255, 255, 255);
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
|
||||
i {
|
||||
font-size: 14px;
|
||||
@extend %tr02;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
i {
|
||||
transform: translateX(5px);
|
||||
}
|
||||
color: white;
|
||||
background-color: rgba(white, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
.my-btn {
|
||||
height: 45px;
|
||||
min-width: 120px;
|
||||
padding: 8px 15px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 22.5px;
|
||||
font-size: 18px;
|
||||
font-weight: normal;
|
||||
color: rgb(0, 0, 0);
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
@extend %tr02;
|
||||
|
||||
&__gray {
|
||||
background-color: rgb(239, 239, 239);
|
||||
|
||||
&:hover {
|
||||
background-color: rgba($color: $my-dark-gray, $alpha: 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
&__orange {
|
||||
background-color: $my-orange;
|
||||
color: white;
|
||||
|
||||
&:hover {
|
||||
background-color: #d65a12;
|
||||
}
|
||||
|
||||
&--small {
|
||||
padding: 4px 10px;
|
||||
font-size: 14px;
|
||||
height: auto;
|
||||
min-width: unset;
|
||||
cursor: unset !important;
|
||||
|
||||
&:hover {
|
||||
background-color: $my-orange;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-links {
|
||||
display: inline-block;
|
||||
min-width: 200px;
|
||||
padding: 15px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 27.5px;
|
||||
font-size: 18px;
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&__one {
|
||||
background-color: #f8445a;
|
||||
border-color: rgb(248, 68, 90);
|
||||
color: white;
|
||||
|
||||
&.bg__green {
|
||||
background-color: #42c28d;
|
||||
border-color: #42c28d;
|
||||
}
|
||||
&:hover {
|
||||
color: white;
|
||||
box-shadow: 0px 5px 14.25px 0.75px rgba(248, 68, 90, 0.35);
|
||||
&.bg__green {
|
||||
background-color: #42c28d;
|
||||
box-shadow: 0px 5px 14.25px 0.75px rgba(66, 194, 141, 0.35);
|
||||
border-color: #42c28d;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__two {
|
||||
background-color: $my-orange;
|
||||
border-color: $my-orange;
|
||||
color: white;
|
||||
|
||||
&:hover {
|
||||
color: white;
|
||||
box-shadow: 0px 5px 14.25px 0.75px rgba(255, 99, 25, 0.35);
|
||||
}
|
||||
}
|
||||
&__three {
|
||||
background-color: #fff;
|
||||
border-color: rgba(0, 0, 0, 0.5);
|
||||
border-width: 2px;
|
||||
color: white;
|
||||
color: rgb(0, 0, 0);
|
||||
|
||||
&:hover {
|
||||
background-color: rgba($color: #fff, $alpha: 0.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.no-button {
|
||||
background-color: #c2c2c2 !important;
|
||||
border-color: #c2c2c2 !important;
|
||||
box-shadow: none !important;
|
||||
cursor: no-drop;
|
||||
&:hover {
|
||||
background-color: #c2c2c2 !important;
|
||||
box-shadow: none !important;
|
||||
border-color: #c2c2c2 !important;
|
||||
}
|
||||
}
|
||||
1048
resources/sass/components/_cards.scss
Executable file
1048
resources/sass/components/_cards.scss
Executable file
File diff suppressed because it is too large
Load Diff
118
resources/sass/components/_hamburgers.scss
Executable file
118
resources/sass/components/_hamburgers.scss
Executable file
@@ -0,0 +1,118 @@
|
||||
@charset "UTF-8";
|
||||
/*!
|
||||
* Hamburgers
|
||||
* @description Tasty CSS-animated hamburgers
|
||||
* @author Jonathan Suh @jonsuh
|
||||
* @site https://jonsuh.com/hamburgers
|
||||
* @link https://github.com/jonsuh/hamburgers
|
||||
*/
|
||||
|
||||
// Settings
|
||||
// ==================================================
|
||||
$hamburger-padding-x : 0px !default;
|
||||
$hamburger-padding-y : 0px !default;
|
||||
$hamburger-layer-width : 22px !default;
|
||||
$hamburger-layer-height : 2px !default;
|
||||
$hamburger-layer-spacing : 4px !default;
|
||||
$hamburger-layer-color : #333 !default;
|
||||
$hamburger-layer-border-radius : 4px !default;
|
||||
$hamburger-hover-opacity : 1 !default;
|
||||
$hamburger-active-layer-color : $hamburger-layer-color !default;
|
||||
$hamburger-active-hover-opacity: $hamburger-hover-opacity !default;
|
||||
|
||||
// To use CSS filters as the hover effect instead of opacity,
|
||||
// set $hamburger-hover-use-filter as true and
|
||||
// change the value of $hamburger-hover-filter accordingly.
|
||||
$hamburger-hover-use-filter : false !default;
|
||||
$hamburger-hover-filter : opacity(50%) !default;
|
||||
$hamburger-active-hover-filter: $hamburger-hover-filter !default;
|
||||
|
||||
// Types (Remove or comment out what you don’t need)
|
||||
// ==================================================
|
||||
$hamburger-types: (
|
||||
3dx,
|
||||
3dx-r,
|
||||
3dy,
|
||||
3dy-r,
|
||||
3dxy,
|
||||
3dxy-r,
|
||||
arrow,
|
||||
arrow-r,
|
||||
arrowalt,
|
||||
arrowalt-r,
|
||||
arrowturn,
|
||||
arrowturn-r,
|
||||
boring,
|
||||
collapse,
|
||||
collapse-r,
|
||||
elastic,
|
||||
elastic-r,
|
||||
emphatic,
|
||||
emphatic-r,
|
||||
minus,
|
||||
slider,
|
||||
slider-r,
|
||||
spin,
|
||||
spin-r,
|
||||
spring,
|
||||
spring-r,
|
||||
stand,
|
||||
stand-r,
|
||||
squeeze,
|
||||
vortex,
|
||||
vortex-r
|
||||
) !default;
|
||||
|
||||
// Base Hamburger (We need this)
|
||||
// ==================================================
|
||||
@import "base";
|
||||
|
||||
// Hamburger types
|
||||
// ==================================================
|
||||
@import "types/3dx";
|
||||
@import "types/3dx-r";
|
||||
@import "types/3dy";
|
||||
@import "types/3dy-r";
|
||||
@import "types/3dxy";
|
||||
@import "types/3dxy-r";
|
||||
@import "types/arrow";
|
||||
@import "types/arrow-r";
|
||||
@import "types/arrowalt";
|
||||
@import "types/arrowalt-r";
|
||||
@import "types/arrowturn";
|
||||
@import "types/arrowturn-r";
|
||||
@import "types/boring";
|
||||
@import "types/collapse";
|
||||
@import "types/collapse-r";
|
||||
@import "types/elastic";
|
||||
@import "types/elastic-r";
|
||||
@import "types/emphatic";
|
||||
@import "types/emphatic-r";
|
||||
@import "types/minus";
|
||||
@import "types/slider";
|
||||
@import "types/slider-r";
|
||||
@import "types/spin";
|
||||
@import "types/spin-r";
|
||||
@import "types/spring";
|
||||
@import "types/spring-r";
|
||||
@import "types/stand";
|
||||
@import "types/stand-r";
|
||||
@import "types/squeeze";
|
||||
@import "types/vortex";
|
||||
@import "types/vortex-r";
|
||||
|
||||
// ==================================================
|
||||
// Cooking up additional types:
|
||||
//
|
||||
// The Sass for each hamburger type should be nested
|
||||
// inside an @if directive to check whether or not
|
||||
// it exists in $hamburger-types so only the CSS for
|
||||
// included types are generated.
|
||||
//
|
||||
// e.g. hamburgers/types/_new-type.scss
|
||||
//
|
||||
// @if index($hamburger-types, new-type) {
|
||||
// .hamburger--new-type {
|
||||
// ...
|
||||
// }
|
||||
// }
|
||||
231
resources/sass/components/_modal.scss
Executable file
231
resources/sass/components/_modal.scss
Executable file
@@ -0,0 +1,231 @@
|
||||
.modal {
|
||||
&-content,
|
||||
&-body,
|
||||
&-header,
|
||||
&-footer {
|
||||
border: 0;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
&-body {
|
||||
padding: 30px 40px;
|
||||
@include mq("tablet", max) {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
position: relative;
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 30px;
|
||||
font-weight: 600;
|
||||
color: rgb(34, 34, 34);
|
||||
text-align: left;
|
||||
@include mq("tablet", max) {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.terms-of-use {
|
||||
&__content {
|
||||
margin-top: 20px;
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
color: rgb(34, 34, 34);
|
||||
line-height: 1.3;
|
||||
text-align: left;
|
||||
|
||||
max-height: 600px;
|
||||
overflow-y: auto;
|
||||
|
||||
padding-right: 10px;
|
||||
|
||||
// @include mq("desktop", min) {
|
||||
/* width */
|
||||
&::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
/* Track */
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: rgba(#b5bdcc, 0.329);
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #b5bdcc;
|
||||
}
|
||||
|
||||
/* Handle on hover */
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #b5bdcc;
|
||||
}
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
.basket-modal {
|
||||
.product {
|
||||
padding: 10px;
|
||||
margin: 20px 0;
|
||||
|
||||
&-title {
|
||||
font-size: 16px;
|
||||
|
||||
a {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@include mq("desktop", min) {
|
||||
// box-shadow: none;
|
||||
// padding: 0px;
|
||||
}
|
||||
|
||||
&-img {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.product-buttons {
|
||||
margin-bottom: 0;
|
||||
button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sum-of-products {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.basket-modal {
|
||||
.btn-links {
|
||||
height: 45px;
|
||||
padding: 13px 5px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.modal-dialog {
|
||||
max-width: 550px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 900px) {
|
||||
.modal-dialog {
|
||||
max-width: 850px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
form {
|
||||
button,
|
||||
a {
|
||||
width: 100%;
|
||||
margin: 10px 0 !important;
|
||||
}
|
||||
|
||||
.product-buttons {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.alert-when-has-product {
|
||||
h5 {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: rgb(34, 34, 34);
|
||||
text-align: left;
|
||||
@include mq("tablet", max) {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
color: rgb(34, 34, 34);
|
||||
text-align: left;
|
||||
@include mq("tablet", max) {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.installment {
|
||||
.nav-pills .nav-link {
|
||||
border: 2px solid #b5bdcc;
|
||||
margin: 0 5px;
|
||||
background-color: transparent;
|
||||
color: #000;
|
||||
min-width: 150px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
@media screen and (max-width: 576px) {
|
||||
min-width: unset;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 10px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #b5bdcc;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 13px;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border-radius: 50%;
|
||||
background-color: $my-orange;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
@media screen and (max-width: 576px) {
|
||||
width: 48%;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-pills .nav-link.active,
|
||||
.nav-pills .show > .nav-link {
|
||||
border-color: $my-orange;
|
||||
&::after {
|
||||
border-color: $my-orange;
|
||||
}
|
||||
|
||||
&::before {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.my-form__group {
|
||||
input:disabled {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
327
resources/sass/components/_my-form.scss
Executable file
327
resources/sass/components/_my-form.scss
Executable file
@@ -0,0 +1,327 @@
|
||||
.my-form {
|
||||
&__group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
label {
|
||||
order: -1;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
color: rgb(34, 34, 34);
|
||||
line-height: 1.5;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
font-weight: normal;
|
||||
color: rgba(34, 34, 34, 0.502);
|
||||
line-height: 1.333;
|
||||
@extend %tr02;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-color: rgba(34, 34, 34, 0.2);
|
||||
border-radius: 6px;
|
||||
background-color: transparent;
|
||||
height: 50px;
|
||||
padding: 6px 15px;
|
||||
color: rgba(34, 34, 34, 0.99);
|
||||
@extend %tr02;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
line-height: 1.333;
|
||||
|
||||
@include mq("tablet", max) {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
@include mq("phone-small", max) {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: rgba(34, 34, 34, 0.502);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: $my-orange;
|
||||
|
||||
& ~ label {
|
||||
color: $my-orange;
|
||||
}
|
||||
}
|
||||
}
|
||||
textarea {
|
||||
height: auto;
|
||||
resize: none;
|
||||
}
|
||||
select {
|
||||
&:focus {
|
||||
border-color: rgba(34, 34, 34, 0.2);
|
||||
box-shadow: unset;
|
||||
& ~ label {
|
||||
color: $my-orange;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.reset-password {
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
text-decoration: underline;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.form-payment {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
label {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: rgb(26, 26, 26) !important;
|
||||
line-height: 1.5;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
& > div {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
& + div {
|
||||
margin-top: 50px;
|
||||
textarea {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border-radius: 8px;
|
||||
padding: 8px 15px;
|
||||
background-color: transparent;
|
||||
border: 1px solid #fff;
|
||||
color: rgba(34, 34, 34, 0.99);
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
transition: all 0.2s ease-in-out;
|
||||
resize: none;
|
||||
border-color: rgba(0, 0, 0, 0.2);
|
||||
|
||||
&:focus {
|
||||
border-color: $my-orange;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: rgb(26, 26, 26);
|
||||
line-height: 1.333;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: rgb(26, 26, 26);
|
||||
line-height: 1.333;
|
||||
text-align: left;
|
||||
}
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: rgb(26, 26, 26);
|
||||
line-height: 1.333;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.custom-control-label::before {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.custom-control-label::after {
|
||||
width: 1.7rem;
|
||||
height: 1.7rem;
|
||||
top: -1px;
|
||||
left: -1.7rem;
|
||||
background: no-repeat 35%/35% 35%;
|
||||
// background: unset;
|
||||
// content: "\f00c";
|
||||
// font-family: "Font Awesome 5 Pro";
|
||||
// font-weight: 300;
|
||||
}
|
||||
|
||||
.custom-checkbox
|
||||
.custom-control-input:checked
|
||||
~ .custom-control-label::after {
|
||||
background-image: url("../img/check.png");
|
||||
}
|
||||
.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
|
||||
color: #fff;
|
||||
background-color: transparent;
|
||||
border-color: $my-orange;
|
||||
}
|
||||
|
||||
.custom-control-input:checked ~ .custom-control-label::before {
|
||||
color: white;
|
||||
background-color: transparent;
|
||||
border-color: $my-orange;
|
||||
}
|
||||
|
||||
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
|
||||
border-color: #adb5bd;
|
||||
}
|
||||
|
||||
.custom-control-input:focus ~ .custom-control-label::before {
|
||||
box-shadow: unset;
|
||||
}
|
||||
.custom-radio {
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
color: rgb(0, 0, 0);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
|
||||
background-image: none;
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
background-color: #ff621a;
|
||||
border-radius: 50%;
|
||||
top: 0.4rem;
|
||||
left: -1.35rem;
|
||||
}
|
||||
.custom-radio .custom-control-label::after {
|
||||
background: no-repeat 38%/30% 30%;
|
||||
}
|
||||
|
||||
.my-custom-control {
|
||||
.custom-control-label {
|
||||
font-size: 16px;
|
||||
color: #000;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.custom-control-input:checked ~ .custom-control-label::before {
|
||||
color: #fff;
|
||||
background-color: #ff621a;
|
||||
border-color: #ff621a;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.my-form__countBy {
|
||||
select {
|
||||
height: 32px;
|
||||
padding: 5px 10px;
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
color: #222;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-color: #cbccd3;
|
||||
border-radius: 3px;
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
min-width: 150px;
|
||||
|
||||
@include mq("tablet", max) {
|
||||
min-width: unset;
|
||||
max-width: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #222;
|
||||
}
|
||||
}
|
||||
|
||||
.select-months {
|
||||
position: relative;
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -12px;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: #000;
|
||||
opacity: 0.3;
|
||||
z-index: 0;
|
||||
}
|
||||
margin-top: 30px;
|
||||
padding: 0 15px;
|
||||
label {
|
||||
cursor: pointer;
|
||||
min-width: 60px;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
&::before {
|
||||
top: -20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.custom-control {
|
||||
&-inline {
|
||||
margin: 0 5px;
|
||||
}
|
||||
padding-left: 0;
|
||||
position: relative;
|
||||
z-index: 22;
|
||||
}
|
||||
|
||||
.custom-control-label::after {
|
||||
top: -17.5px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
|
||||
top: -17.5px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.custom-control-label::before {
|
||||
background-color: #fff;
|
||||
}
|
||||
.custom-control-input:checked ~ .custom-control-label::before {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
281
resources/sass/components/_my-nav.scss
Executable file
281
resources/sass/components/_my-nav.scss
Executable file
@@ -0,0 +1,281 @@
|
||||
// .my-navbars {
|
||||
// position: relative;
|
||||
// &::after {
|
||||
// content: "";
|
||||
// width: 100vw;
|
||||
// height: 100%;
|
||||
// position: absolute;
|
||||
// background-color: rgba(255, 255, 255, 0.102);
|
||||
// left: 0;
|
||||
// right: 0;
|
||||
// top: 0;
|
||||
// }
|
||||
// }
|
||||
|
||||
.my-navbar {
|
||||
overflow: hidden;
|
||||
// background-color: #2c2c2c;
|
||||
background-color: #00b58d;
|
||||
height: 80px;
|
||||
@include mq("tablet-wide", max) {
|
||||
overflow-y: auto;
|
||||
position: absolute;
|
||||
width: 84%;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
top: 0;
|
||||
// padding-top: 90px;
|
||||
padding-top: 110px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
|
||||
transform: translateX(0px);
|
||||
left: -100%;
|
||||
z-index: 111;
|
||||
transition: 0.2s transform ease-out;
|
||||
|
||||
@include mq("phablet", max) {
|
||||
min-height: 105%;
|
||||
}
|
||||
}
|
||||
|
||||
&-active {
|
||||
transform: translateX(118%);
|
||||
}
|
||||
|
||||
.container {
|
||||
height: 100%;
|
||||
@include mq("tablet-wide", max) {
|
||||
height: auto;
|
||||
padding: 0;
|
||||
}
|
||||
.nav {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
&-item {
|
||||
width: calc(100% / 8);
|
||||
|
||||
@include mq("tablet-wide", max) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@include mq("tablet-wide", max) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
overflow: hidden;
|
||||
list-style-type: none;
|
||||
height: 100%;
|
||||
|
||||
& > i {
|
||||
display: none;
|
||||
width: 50px;
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
transform: translateX(-50%);
|
||||
right: -15px;
|
||||
color: #999;
|
||||
// color: #ff621a;
|
||||
// color: #00b58d;
|
||||
z-index: 11;
|
||||
margin-left: 15px;
|
||||
padding: 5px;
|
||||
}
|
||||
@include mq("tablet-wide", max) {
|
||||
position: relative;
|
||||
border-bottom: 1px solid #00000015;
|
||||
padding-left: 10px;
|
||||
|
||||
& > i {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
&.checkout {
|
||||
// background-image: linear-gradient(137deg, #f8583d 0%, #f8445a 100%);
|
||||
background-image: linear-gradient(137deg, #ff8a52, #ff6319);
|
||||
|
||||
@include mq("tablet-wide", max) {
|
||||
background-image: unset;
|
||||
a {
|
||||
color: $my-orange;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item .dropbtn {
|
||||
height: 100%;
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 10px;
|
||||
background-color: inherit;
|
||||
text-decoration: none;
|
||||
font-size: 15px;
|
||||
font-family: "ProximaNova", Arial, Helvetica, sans-serif;
|
||||
color: rgb(255, 255, 255);
|
||||
line-height: 1.333;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
@include mq("tablet-wide", max) {
|
||||
justify-content: flex-start;
|
||||
color: #000;
|
||||
height: auto;
|
||||
}
|
||||
span {
|
||||
text-align: center;
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
@include mq("tablet-wide", max) {
|
||||
br {
|
||||
display: none;
|
||||
}
|
||||
|
||||
text-align: left;
|
||||
margin: unset;
|
||||
width: 80%;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& a:hover,
|
||||
.nav-item:hover .dropbtn {
|
||||
background-color: rgba(255, 255, 255, 0.102);
|
||||
}
|
||||
.nav-item-content {
|
||||
overflow-y: auto;
|
||||
@include mq("tablet-wide", min) {
|
||||
height: 353px;
|
||||
}
|
||||
@include mq("desktop", min) {
|
||||
height: 400px;
|
||||
}
|
||||
@include mq("desktop-wide", min) {
|
||||
height: 503px;
|
||||
}
|
||||
|
||||
padding: 30px 0;
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
z-index: 1111;
|
||||
box-shadow: 0px 20px 18px 2px rgba(5, 8, 9, 0.1);
|
||||
background-color: rgb(255, 255, 255);
|
||||
@include mq("tablet-wide", max) {
|
||||
padding: 10px 20px;
|
||||
width: 95%;
|
||||
max-height: 350px;
|
||||
overflow-y: auto;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
display: none;
|
||||
box-shadow: unset;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
margin: 5px 0;
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
color: rgb(34, 34, 34);
|
||||
|
||||
padding-right: 36px;
|
||||
|
||||
@include mq("tablet", max) {
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $my-orange;
|
||||
}
|
||||
}
|
||||
|
||||
h3,
|
||||
h3 a {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: rgb(34, 34, 34);
|
||||
line-height: 1.2;
|
||||
@include mq("tablet-wide", max) {
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
img {
|
||||
position: absolute;
|
||||
left: -38px;
|
||||
top: 5px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
|
||||
@include mq("desktop", max) {
|
||||
left: -30px;
|
||||
top: 5px;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
@include mq("tablet-wide", max) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
i {
|
||||
margin-left: 10px;
|
||||
font-size: 14px;
|
||||
padding: 5px;
|
||||
|
||||
width: 50px;
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
transform: translateX(-50%);
|
||||
right: -30px;
|
||||
z-index: 11;
|
||||
margin-left: 15px;
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #999;
|
||||
|
||||
@include mq("tablet-wide", min) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__toggle {
|
||||
@include mq("tablet-wide", max) {
|
||||
display: none;
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item:hover .nav-item-content {
|
||||
@include mq("tablet-wide", min) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
33
resources/sass/components/_preloader.scss
Executable file
33
resources/sass/components/_preloader.scss
Executable file
@@ -0,0 +1,33 @@
|
||||
.pace {
|
||||
-webkit-pointer-events: none;
|
||||
pointer-events: none;
|
||||
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 99999999;
|
||||
|
||||
transform: translate3d(0, -50px, 0);
|
||||
transition: transform 0.5s ease-out;
|
||||
}
|
||||
|
||||
.pace.pace-active {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.pace .pace-progress {
|
||||
display: block;
|
||||
position: fixed;
|
||||
z-index: 2000;
|
||||
top: 0;
|
||||
right: 100%;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: $my-orange;
|
||||
pointer-events: none;
|
||||
}
|
||||
51
resources/sass/components/_scroll.scss
Executable file
51
resources/sass/components/_scroll.scss
Executable file
@@ -0,0 +1,51 @@
|
||||
html, .product-subtitle {
|
||||
@include mq("desktop", min) {
|
||||
/* width */
|
||||
&::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
/* Track */
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: rgba(#b5bdcc, 0.329);
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: rgba(#2c2c2c, 1);
|
||||
background-image: linear-gradient(137deg, #f8583d 0, #f8445a 100%);
|
||||
}
|
||||
|
||||
/* Handle on hover */
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background: #2c2c2c;
|
||||
background-image: linear-gradient(137deg, #f8583d 0, #f8445a 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// .nav-item-content {
|
||||
// @include mq("desktop", min) {
|
||||
// /* width */
|
||||
// &::-webkit-scrollbar {
|
||||
// width: 8px;
|
||||
// height: 4px;
|
||||
// }
|
||||
|
||||
// /* Track */
|
||||
// &::-webkit-scrollbar-track {
|
||||
// background-color: rgba(#b5bdcc, 0.329);
|
||||
// }
|
||||
|
||||
// /* Handle */
|
||||
// &::-webkit-scrollbar-thumb {
|
||||
// background: rgba(#2c2c2c, 1);
|
||||
// }
|
||||
|
||||
// /* Handle on hover */
|
||||
// &::-webkit-scrollbar-thumb:hover {
|
||||
// background: #2c2c2c;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
412
resources/sass/components/_sliders.scss
Executable file
412
resources/sass/components/_sliders.scss
Executable file
@@ -0,0 +1,412 @@
|
||||
.swiper-header {
|
||||
&__item {
|
||||
width: 100%;
|
||||
@extend %bgcover;
|
||||
|
||||
@include mq("desktop", min) {
|
||||
height: 453px;
|
||||
}
|
||||
@include mq("desktop-wide", min) {
|
||||
height: 553px;
|
||||
}
|
||||
@include mq("desktop-large", min) {
|
||||
height: 753px;
|
||||
}
|
||||
@include mq("desktop", max) {
|
||||
height: 353px;
|
||||
}
|
||||
|
||||
@include mq("tablet-wide", max) {
|
||||
height: 303px;
|
||||
}
|
||||
}
|
||||
.swiper-pagination-bullets {
|
||||
@include mq("tablet", min) {
|
||||
bottom: 20px;
|
||||
}
|
||||
}
|
||||
.swiper-pagination-bullets .swiper-pagination-bullet {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background-color: rgb(255, 255, 255);
|
||||
opacity: 0.502;
|
||||
@extend %tr02;
|
||||
}
|
||||
|
||||
.swiper-pagination-bullets .swiper-pagination-bullet-active {
|
||||
width: 20px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.swiper-button-next,
|
||||
.swiper-container-rtl .swiper-button-prev {
|
||||
right: 50px;
|
||||
|
||||
@include mq("tablet", max) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-button-prev,
|
||||
.swiper-container-rtl .swiper-button-next {
|
||||
left: 50px;
|
||||
|
||||
@include mq("tablet", max) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-button-next:after,
|
||||
.swiper-container-rtl .swiper-button-prev:after {
|
||||
content: "\f061";
|
||||
font-family: "Font Awesome 5 Pro";
|
||||
font-weight: 300;
|
||||
font-size: 18px;
|
||||
color: white;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.swiper-button-prev:after,
|
||||
.swiper-container-rtl .swiper-button-next:after {
|
||||
content: "\f060";
|
||||
font-family: "Font Awesome 5 Pro";
|
||||
font-weight: 300;
|
||||
font-size: 18px;
|
||||
color: white;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.swiper-button-next:before,
|
||||
.swiper-button-prev::before {
|
||||
border-color: rgb(255, 255, 255);
|
||||
opacity: 0.7;
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
border-radius: 50%;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
position: absolute;
|
||||
content: "";
|
||||
@extend %c-c;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-product {
|
||||
padding: 75px 0 50px;
|
||||
margin-top: -50px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
|
||||
@include mq("tablet", max) {
|
||||
margin-left: -15px;
|
||||
margin-right: -15px;
|
||||
padding-bottom: 30px;
|
||||
|
||||
.swiper-wrapper {
|
||||
z-index: 22;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-banners,
|
||||
.swiper-product {
|
||||
.swiper-button-next,
|
||||
.swiper-button-prev {
|
||||
z-index: 2;
|
||||
@include mq("tablet", min) {
|
||||
top: 25px;
|
||||
}
|
||||
|
||||
@include mq("tablet", max) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&::after {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
content: "";
|
||||
position: absolute;
|
||||
@extend %c-c;
|
||||
z-index: -1;
|
||||
background-color: #f2f4f6;
|
||||
@extend %tr02;
|
||||
}
|
||||
|
||||
&::before {
|
||||
font-family: "Font Awesome 5 Pro";
|
||||
font-weight: 400;
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
position: absolute;
|
||||
@extend %c-c;
|
||||
z-index: 0;
|
||||
@extend %tr02;
|
||||
}
|
||||
|
||||
&:hover::after {
|
||||
background-color: $my-orange;
|
||||
}
|
||||
&:hover::before {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-button-prev {
|
||||
@include mq("tablet", min) {
|
||||
right: 145px;
|
||||
left: unset;
|
||||
}
|
||||
&::before {
|
||||
content: "\f053";
|
||||
}
|
||||
}
|
||||
.swiper-button-next {
|
||||
&::before {
|
||||
content: "\f054";
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-pagination {
|
||||
width: 100%;
|
||||
@include mq("tablet", min) {
|
||||
height: 50px;
|
||||
top: 20px;
|
||||
right: 50px;
|
||||
left: unset;
|
||||
}
|
||||
@include mq("tablet", max) {
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
|
||||
@include mq("tablet", min) {
|
||||
left: unset !important;
|
||||
transform: unset !important;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-pagination-bullet {
|
||||
background: rgb(144, 144, 144);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.swiper-pagination-bullet-active-main {
|
||||
background: $my-orange;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-banners {
|
||||
padding: 75px 0 0px;
|
||||
margin-top: -50px;
|
||||
|
||||
@include mq("tablet", max) {
|
||||
// margin-left: -15px;
|
||||
// margin-right: -15px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-partners {
|
||||
.swiper-button-next,
|
||||
.swiper-button-prev {
|
||||
@include mq("tablet", max) {
|
||||
top: 70%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-news {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
// Product item slider
|
||||
.slider-small {
|
||||
.sldier-slide {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.slider__img {
|
||||
height: 70px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
background-color: #fff;
|
||||
padding: 5px;
|
||||
img {
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
object-position: center;
|
||||
}
|
||||
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.slick-current {
|
||||
border: 1px solid #d3d3d3;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
@include mq("tablet", max) {
|
||||
display: none !important;
|
||||
}
|
||||
.slick-prev,
|
||||
.slick-next {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
z-index: 45;
|
||||
}
|
||||
|
||||
.slick-prev:before,
|
||||
.slick-next:before {
|
||||
color: $my-dark-gray;
|
||||
font-size: 24px;
|
||||
font-family: "Font Awesome 5 Pro";
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.slick-prev:before {
|
||||
content: "\f137";
|
||||
}
|
||||
|
||||
.slick-next:before {
|
||||
content: "\f138";
|
||||
}
|
||||
}
|
||||
|
||||
.slider-big {
|
||||
margin: 5px;
|
||||
margin-bottom: 10px;
|
||||
.slider__content {
|
||||
height: 400px;
|
||||
position: relative;
|
||||
padding: 30px;
|
||||
padding-top: 32px;
|
||||
min-height: 1px;
|
||||
}
|
||||
.slick-list {
|
||||
border-radius: 5px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 3px 15px 3px rgba(5, 8, 9, 0.1);
|
||||
}
|
||||
|
||||
.slider__img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
box-shadow: unset;
|
||||
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
width: unset !important;
|
||||
@include mq("desktop", min) {
|
||||
}
|
||||
|
||||
@include mq("tablet-wide", max) {
|
||||
// max-width: 300px;
|
||||
}
|
||||
@include mq("tablet", max) {
|
||||
// max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Arrows
|
||||
.slick-prev,
|
||||
.slick-next {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
z-index: 45;
|
||||
}
|
||||
|
||||
.slick-prev {
|
||||
left: -15px;
|
||||
}
|
||||
|
||||
.slick-next {
|
||||
right: -15px;
|
||||
}
|
||||
|
||||
.slick-prev:before,
|
||||
.slick-next:before {
|
||||
color: $my-dark-gray;
|
||||
font-size: 36px;
|
||||
font-family: "Font Awesome 5 Pro";
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.slick-prev:before {
|
||||
content: "\f137";
|
||||
}
|
||||
|
||||
.slick-next:before {
|
||||
content: "\f138";
|
||||
}
|
||||
}
|
||||
|
||||
// XZoom
|
||||
.xzoom-source {
|
||||
@include mq("tablet-wide", max) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.xzoom-preview {
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.swiper-category {
|
||||
margin-top: 0;
|
||||
padding-top: 10px;
|
||||
.category-item {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
|
||||
&__title {
|
||||
@include mq("tablet", max) {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include mq("tablet", min) {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-specials {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
margin-bottom: 0;
|
||||
margin-top: 50px;
|
||||
|
||||
@include mq("tablet", max) {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0px;
|
||||
padding-top: 0px;
|
||||
margin-top: 0;
|
||||
}
|
||||
.specials {
|
||||
.special {
|
||||
width: 100%;
|
||||
|
||||
@include mq("tablet", max) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
1372
resources/sass/components/_widgets.scss
Executable file
1372
resources/sass/components/_widgets.scss
Executable file
File diff suppressed because it is too large
Load Diff
35
resources/sass/components/types/_3dx-r.scss
Executable file
35
resources/sass/components/types/_3dx-r.scss
Executable file
@@ -0,0 +1,35 @@
|
||||
@if index($hamburger-types, 3dx-r) {
|
||||
/*
|
||||
* 3DX Reverse
|
||||
*/
|
||||
.hamburger--3dx-r {
|
||||
.hamburger-box {
|
||||
perspective: $hamburger-layer-width * 2;
|
||||
}
|
||||
|
||||
.hamburger-inner {
|
||||
transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
|
||||
background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
.hamburger-inner {
|
||||
background-color: transparent !important;
|
||||
transform: rotateY(-180deg);
|
||||
|
||||
&::before {
|
||||
transform: translate3d(0, $hamburger-layer-height + $hamburger-layer-spacing, 0) rotate(45deg);
|
||||
}
|
||||
|
||||
&::after {
|
||||
transform: translate3d(0, ($hamburger-layer-height + $hamburger-layer-spacing) * -1, 0) rotate(-45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
35
resources/sass/components/types/_3dx.scss
Executable file
35
resources/sass/components/types/_3dx.scss
Executable file
@@ -0,0 +1,35 @@
|
||||
@if index($hamburger-types, 3dx) {
|
||||
/*
|
||||
* 3DX
|
||||
*/
|
||||
.hamburger--3dx {
|
||||
.hamburger-box {
|
||||
perspective: $hamburger-layer-width * 2;
|
||||
}
|
||||
|
||||
.hamburger-inner {
|
||||
transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
|
||||
background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
.hamburger-inner {
|
||||
background-color: transparent !important;
|
||||
transform: rotateY(180deg);
|
||||
|
||||
&::before {
|
||||
transform: translate3d(0, $hamburger-layer-height + $hamburger-layer-spacing, 0) rotate(45deg);
|
||||
}
|
||||
|
||||
&::after {
|
||||
transform: translate3d(0, ($hamburger-layer-height + $hamburger-layer-spacing) * -1, 0) rotate(-45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
35
resources/sass/components/types/_3dxy-r.scss
Executable file
35
resources/sass/components/types/_3dxy-r.scss
Executable file
@@ -0,0 +1,35 @@
|
||||
@if index($hamburger-types, 3dxy-r) {
|
||||
/*
|
||||
* 3DXY Reverse
|
||||
*/
|
||||
.hamburger--3dxy-r {
|
||||
.hamburger-box {
|
||||
perspective: $hamburger-layer-width * 2;
|
||||
}
|
||||
|
||||
.hamburger-inner {
|
||||
transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
|
||||
background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
.hamburger-inner {
|
||||
background-color: transparent !important;
|
||||
transform: rotateX(180deg) rotateY(180deg) rotateZ(-180deg);
|
||||
|
||||
&::before {
|
||||
transform: translate3d(0, $hamburger-layer-height + $hamburger-layer-spacing, 0) rotate(45deg);
|
||||
}
|
||||
|
||||
&::after {
|
||||
transform: translate3d(0, ($hamburger-layer-height + $hamburger-layer-spacing) * -1, 0) rotate(-45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
35
resources/sass/components/types/_3dxy.scss
Executable file
35
resources/sass/components/types/_3dxy.scss
Executable file
@@ -0,0 +1,35 @@
|
||||
@if index($hamburger-types, 3dxy) {
|
||||
/*
|
||||
* 3DXY
|
||||
*/
|
||||
.hamburger--3dxy {
|
||||
.hamburger-box {
|
||||
perspective: $hamburger-layer-width * 2;
|
||||
}
|
||||
|
||||
.hamburger-inner {
|
||||
transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
|
||||
background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
.hamburger-inner {
|
||||
background-color: transparent !important;
|
||||
transform: rotateX(180deg) rotateY(180deg);
|
||||
|
||||
&::before {
|
||||
transform: translate3d(0, $hamburger-layer-height + $hamburger-layer-spacing, 0) rotate(45deg);
|
||||
}
|
||||
|
||||
&::after {
|
||||
transform: translate3d(0, ($hamburger-layer-height + $hamburger-layer-spacing) * -1, 0) rotate(-45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
35
resources/sass/components/types/_3dy-r.scss
Executable file
35
resources/sass/components/types/_3dy-r.scss
Executable file
@@ -0,0 +1,35 @@
|
||||
@if index($hamburger-types, 3dy-r) {
|
||||
/*
|
||||
* 3DY Reverse
|
||||
*/
|
||||
.hamburger--3dy-r {
|
||||
.hamburger-box {
|
||||
perspective: $hamburger-layer-width * 2;
|
||||
}
|
||||
|
||||
.hamburger-inner {
|
||||
transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
|
||||
background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
.hamburger-inner {
|
||||
background-color: transparent !important;
|
||||
transform: rotateX(180deg);
|
||||
|
||||
&::before {
|
||||
transform: translate3d(0, $hamburger-layer-height + $hamburger-layer-spacing, 0) rotate(45deg);
|
||||
}
|
||||
|
||||
&::after {
|
||||
transform: translate3d(0, ($hamburger-layer-height + $hamburger-layer-spacing) * -1, 0) rotate(-45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
35
resources/sass/components/types/_3dy.scss
Executable file
35
resources/sass/components/types/_3dy.scss
Executable file
@@ -0,0 +1,35 @@
|
||||
@if index($hamburger-types, 3dy) {
|
||||
/*
|
||||
* 3DY
|
||||
*/
|
||||
.hamburger--3dy {
|
||||
.hamburger-box {
|
||||
perspective: $hamburger-layer-width * 2;
|
||||
}
|
||||
|
||||
.hamburger-inner {
|
||||
transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
|
||||
background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
.hamburger-inner {
|
||||
background-color: transparent !important;
|
||||
transform: rotateX(-180deg);
|
||||
|
||||
&::before {
|
||||
transform: translate3d(0, $hamburger-layer-height + $hamburger-layer-spacing, 0) rotate(45deg);
|
||||
}
|
||||
|
||||
&::after {
|
||||
transform: translate3d(0, ($hamburger-layer-height + $hamburger-layer-spacing) * -1, 0) rotate(-45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
16
resources/sass/components/types/_arrow-r.scss
Executable file
16
resources/sass/components/types/_arrow-r.scss
Executable file
@@ -0,0 +1,16 @@
|
||||
@if index($hamburger-types, arrow-r) {
|
||||
/*
|
||||
* Arrow Right
|
||||
*/
|
||||
.hamburger--arrow-r.is-active {
|
||||
.hamburger-inner {
|
||||
&::before {
|
||||
transform: translate3d($hamburger-layer-width * 0.2, 0, 0) rotate(45deg) scale(0.7, 1);
|
||||
}
|
||||
|
||||
&::after {
|
||||
transform: translate3d($hamburger-layer-width * 0.2, 0, 0) rotate(-45deg) scale(0.7, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
16
resources/sass/components/types/_arrow.scss
Executable file
16
resources/sass/components/types/_arrow.scss
Executable file
@@ -0,0 +1,16 @@
|
||||
@if index($hamburger-types, arrow) {
|
||||
/*
|
||||
* Arrow
|
||||
*/
|
||||
.hamburger--arrow.is-active {
|
||||
.hamburger-inner {
|
||||
&::before {
|
||||
transform: translate3d($hamburger-layer-width * -0.2, 0, 0) rotate(-45deg) scale(0.7, 1);
|
||||
}
|
||||
|
||||
&::after {
|
||||
transform: translate3d($hamburger-layer-width * -0.2, 0, 0) rotate(45deg) scale(0.7, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
36
resources/sass/components/types/_arrowalt-r.scss
Executable file
36
resources/sass/components/types/_arrowalt-r.scss
Executable file
@@ -0,0 +1,36 @@
|
||||
@if index($hamburger-types, arrowalt-r) {
|
||||
/*
|
||||
* Arrow Alt Right
|
||||
*/
|
||||
.hamburger--arrowalt-r {
|
||||
.hamburger-inner {
|
||||
&::before {
|
||||
transition: top 0.1s 0.1s ease,
|
||||
transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||
}
|
||||
|
||||
&::after {
|
||||
transition: bottom 0.1s 0.1s ease,
|
||||
transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
.hamburger-inner {
|
||||
&::before {
|
||||
top: 0;
|
||||
transform: translate3d($hamburger-layer-width * 0.2, $hamburger-layer-width * -0.25, 0) rotate(45deg) scale(0.7, 1);
|
||||
transition: top 0.1s ease,
|
||||
transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
|
||||
}
|
||||
|
||||
&::after {
|
||||
bottom: 0;
|
||||
transform: translate3d($hamburger-layer-width * 0.2, $hamburger-layer-width * 0.25, 0) rotate(-45deg) scale(0.7, 1);
|
||||
transition: bottom 0.1s ease,
|
||||
transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
36
resources/sass/components/types/_arrowalt.scss
Executable file
36
resources/sass/components/types/_arrowalt.scss
Executable file
@@ -0,0 +1,36 @@
|
||||
@if index($hamburger-types, arrowalt) {
|
||||
/*
|
||||
* Arrow Alt
|
||||
*/
|
||||
.hamburger--arrowalt {
|
||||
.hamburger-inner {
|
||||
&::before {
|
||||
transition: top 0.1s 0.1s ease,
|
||||
transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||
}
|
||||
|
||||
&::after {
|
||||
transition: bottom 0.1s 0.1s ease,
|
||||
transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
.hamburger-inner {
|
||||
&::before {
|
||||
top: 0;
|
||||
transform: translate3d($hamburger-layer-width * -0.2, $hamburger-layer-width * -0.25, 0) rotate(-45deg) scale(0.7, 1);
|
||||
transition: top 0.1s ease,
|
||||
transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
|
||||
}
|
||||
|
||||
&::after {
|
||||
bottom: 0;
|
||||
transform: translate3d($hamburger-layer-width * -0.2, $hamburger-layer-width * 0.25, 0) rotate(45deg) scale(0.7, 1);
|
||||
transition: bottom 0.1s ease,
|
||||
transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
18
resources/sass/components/types/_arrowturn-r.scss
Executable file
18
resources/sass/components/types/_arrowturn-r.scss
Executable file
@@ -0,0 +1,18 @@
|
||||
@if index($hamburger-types, arrowturn-r) {
|
||||
/*
|
||||
* Arrow Turn Right
|
||||
*/
|
||||
.hamburger--arrowturn-r.is-active {
|
||||
.hamburger-inner {
|
||||
transform: rotate(-180deg);
|
||||
|
||||
&::before {
|
||||
transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1);
|
||||
}
|
||||
|
||||
&::after {
|
||||
transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
18
resources/sass/components/types/_arrowturn.scss
Executable file
18
resources/sass/components/types/_arrowturn.scss
Executable file
@@ -0,0 +1,18 @@
|
||||
@if index($hamburger-types, arrowturn) {
|
||||
/*
|
||||
* Arrow Turn
|
||||
*/
|
||||
.hamburger--arrowturn.is-active {
|
||||
.hamburger-inner {
|
||||
transform: rotate(-180deg);
|
||||
|
||||
&::before {
|
||||
transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1);
|
||||
}
|
||||
|
||||
&::after {
|
||||
transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
30
resources/sass/components/types/_boring.scss
Executable file
30
resources/sass/components/types/_boring.scss
Executable file
@@ -0,0 +1,30 @@
|
||||
@if index($hamburger-types, boring) {
|
||||
/*
|
||||
* Boring
|
||||
*/
|
||||
.hamburger--boring {
|
||||
.hamburger-inner {
|
||||
&,
|
||||
&::before,
|
||||
&::after {
|
||||
transition-property: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
.hamburger-inner {
|
||||
transform: rotate(45deg);
|
||||
|
||||
&::before {
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
bottom: 0;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
47
resources/sass/components/types/_collapse-r.scss
Executable file
47
resources/sass/components/types/_collapse-r.scss
Executable file
@@ -0,0 +1,47 @@
|
||||
@if index($hamburger-types, collapse-r) {
|
||||
/*
|
||||
* Collapse Reverse
|
||||
*/
|
||||
.hamburger--collapse-r {
|
||||
.hamburger-inner {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
transition-duration: 0.13s;
|
||||
transition-delay: 0.13s;
|
||||
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
|
||||
&::after {
|
||||
top: ($hamburger-layer-spacing * 2 + $hamburger-layer-height * 2) * -1;
|
||||
transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
|
||||
opacity 0.1s linear;
|
||||
}
|
||||
|
||||
&::before {
|
||||
transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
|
||||
transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
.hamburger-inner {
|
||||
transform: translate3d(0, ($hamburger-layer-spacing + $hamburger-layer-height) * -1, 0) rotate(45deg);
|
||||
transition-delay: 0.22s;
|
||||
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
|
||||
&::after {
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
|
||||
opacity 0.1s 0.22s linear;
|
||||
}
|
||||
|
||||
&::before {
|
||||
top: 0;
|
||||
transform: rotate(90deg);
|
||||
transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
|
||||
transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
47
resources/sass/components/types/_collapse.scss
Executable file
47
resources/sass/components/types/_collapse.scss
Executable file
@@ -0,0 +1,47 @@
|
||||
@if index($hamburger-types, collapse) {
|
||||
/*
|
||||
* Collapse
|
||||
*/
|
||||
.hamburger--collapse {
|
||||
.hamburger-inner {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
transition-duration: 0.13s;
|
||||
transition-delay: 0.13s;
|
||||
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
|
||||
&::after {
|
||||
top: ($hamburger-layer-spacing * 2 + $hamburger-layer-height * 2) * -1;
|
||||
transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
|
||||
opacity 0.1s linear;
|
||||
}
|
||||
|
||||
&::before {
|
||||
transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
|
||||
transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
.hamburger-inner {
|
||||
transform: translate3d(0, ($hamburger-layer-spacing + $hamburger-layer-height) * -1, 0) rotate(-45deg);
|
||||
transition-delay: 0.22s;
|
||||
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
|
||||
&::after {
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
|
||||
opacity 0.1s 0.22s linear;
|
||||
}
|
||||
|
||||
&::before {
|
||||
top: 0;
|
||||
transform: rotate(-90deg);
|
||||
transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
|
||||
transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
41
resources/sass/components/types/_elastic-r.scss
Executable file
41
resources/sass/components/types/_elastic-r.scss
Executable file
@@ -0,0 +1,41 @@
|
||||
@if index($hamburger-types, elastic-r) {
|
||||
/*
|
||||
* Elastic Reverse
|
||||
*/
|
||||
.hamburger--elastic-r {
|
||||
.hamburger-inner {
|
||||
top: $hamburger-layer-height / 2;
|
||||
transition-duration: 0.275s;
|
||||
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
|
||||
&::before {
|
||||
top: $hamburger-layer-height + $hamburger-layer-spacing;
|
||||
transition: opacity 0.125s 0.275s ease;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: ($hamburger-layer-height * 2) + ($hamburger-layer-spacing * 2);
|
||||
transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
.hamburger-inner {
|
||||
$y-offset: $hamburger-layer-spacing + $hamburger-layer-height;
|
||||
|
||||
transform: translate3d(0, $y-offset, 0) rotate(-135deg);
|
||||
transition-delay: 0.075s;
|
||||
|
||||
&::before {
|
||||
transition-delay: 0s;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
transform: translate3d(0, $y-offset * -2, 0) rotate(270deg);
|
||||
transition-delay: 0.075s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
41
resources/sass/components/types/_elastic.scss
Executable file
41
resources/sass/components/types/_elastic.scss
Executable file
@@ -0,0 +1,41 @@
|
||||
@if index($hamburger-types, elastic) {
|
||||
/*
|
||||
* Elastic
|
||||
*/
|
||||
.hamburger--elastic {
|
||||
.hamburger-inner {
|
||||
top: $hamburger-layer-height / 2;
|
||||
transition-duration: 0.275s;
|
||||
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
|
||||
&::before {
|
||||
top: $hamburger-layer-height + $hamburger-layer-spacing;
|
||||
transition: opacity 0.125s 0.275s ease;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: ($hamburger-layer-height * 2) + ($hamburger-layer-spacing * 2);
|
||||
transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
.hamburger-inner {
|
||||
$y-offset: $hamburger-layer-spacing + $hamburger-layer-height;
|
||||
|
||||
transform: translate3d(0, $y-offset, 0) rotate(135deg);
|
||||
transition-delay: 0.075s;
|
||||
|
||||
&::before {
|
||||
transition-delay: 0s;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
transform: translate3d(0, $y-offset * -2, 0) rotate(-270deg);
|
||||
transition-delay: 0.075s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
53
resources/sass/components/types/_emphatic-r.scss
Executable file
53
resources/sass/components/types/_emphatic-r.scss
Executable file
@@ -0,0 +1,53 @@
|
||||
@if index($hamburger-types, emphatic-r) {
|
||||
/*
|
||||
* Emphatic Reverse
|
||||
*/
|
||||
.hamburger--emphatic-r {
|
||||
overflow: hidden;
|
||||
|
||||
.hamburger-inner {
|
||||
transition: background-color 0.125s 0.175s ease-in;
|
||||
|
||||
&::before {
|
||||
left: 0;
|
||||
transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335),
|
||||
top 0.05s 0.125s linear,
|
||||
left 0.125s 0.175s ease-in;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: ($hamburger-layer-height) + ($hamburger-layer-spacing);
|
||||
right: 0;
|
||||
transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335),
|
||||
top 0.05s 0.125s linear,
|
||||
right 0.125s 0.175s ease-in;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
.hamburger-inner {
|
||||
transition-delay: 0s;
|
||||
transition-timing-function: ease-out;
|
||||
background-color: transparent !important;
|
||||
|
||||
&::before {
|
||||
left: $hamburger-layer-width * -2;
|
||||
top: $hamburger-layer-width * 2;
|
||||
transform: translate3d($hamburger-layer-width * 2, $hamburger-layer-width * -2, 0) rotate(-45deg);
|
||||
transition: left 0.125s ease-out,
|
||||
top 0.05s 0.125s linear,
|
||||
transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||
}
|
||||
|
||||
&::after {
|
||||
right: $hamburger-layer-width * -2;
|
||||
top: $hamburger-layer-width * 2;
|
||||
transform: translate3d($hamburger-layer-width * -2, $hamburger-layer-width * -2, 0) rotate(45deg);
|
||||
transition: right 0.125s ease-out,
|
||||
top 0.05s 0.125s linear,
|
||||
transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
53
resources/sass/components/types/_emphatic.scss
Executable file
53
resources/sass/components/types/_emphatic.scss
Executable file
@@ -0,0 +1,53 @@
|
||||
@if index($hamburger-types, emphatic) {
|
||||
/*
|
||||
* Emphatic
|
||||
*/
|
||||
.hamburger--emphatic {
|
||||
overflow: hidden;
|
||||
|
||||
.hamburger-inner {
|
||||
transition: background-color 0.125s 0.175s ease-in;
|
||||
|
||||
&::before {
|
||||
left: 0;
|
||||
transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335),
|
||||
top 0.05s 0.125s linear,
|
||||
left 0.125s 0.175s ease-in;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: ($hamburger-layer-height) + ($hamburger-layer-spacing);
|
||||
right: 0;
|
||||
transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335),
|
||||
top 0.05s 0.125s linear,
|
||||
right 0.125s 0.175s ease-in;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
.hamburger-inner {
|
||||
transition-delay: 0s;
|
||||
transition-timing-function: ease-out;
|
||||
background-color: transparent !important;
|
||||
|
||||
&::before {
|
||||
left: $hamburger-layer-width * -2;
|
||||
top: $hamburger-layer-width * -2;
|
||||
transform: translate3d($hamburger-layer-width * 2, $hamburger-layer-width * 2, 0) rotate(45deg);
|
||||
transition: left 0.125s ease-out,
|
||||
top 0.05s 0.125s linear,
|
||||
transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||
}
|
||||
|
||||
&::after {
|
||||
right: $hamburger-layer-width * -2;
|
||||
top: $hamburger-layer-width * -2;
|
||||
transform: translate3d($hamburger-layer-width * -2, $hamburger-layer-width * 2, 0) rotate(-45deg);
|
||||
transition: right 0.125s ease-out,
|
||||
top 0.05s 0.125s linear,
|
||||
transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
34
resources/sass/components/types/_minus.scss
Executable file
34
resources/sass/components/types/_minus.scss
Executable file
@@ -0,0 +1,34 @@
|
||||
@if index($hamburger-types, minus) {
|
||||
/*
|
||||
* Minus
|
||||
*/
|
||||
.hamburger--minus {
|
||||
.hamburger-inner {
|
||||
&::before,
|
||||
&::after {
|
||||
transition: bottom 0.08s 0s ease-out,
|
||||
top 0.08s 0s ease-out,
|
||||
opacity 0s linear;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
.hamburger-inner {
|
||||
&::before,
|
||||
&::after {
|
||||
opacity: 0;
|
||||
transition: bottom 0.08s ease-out,
|
||||
top 0.08s ease-out,
|
||||
opacity 0s 0.08s linear;
|
||||
}
|
||||
&::before {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
38
resources/sass/components/types/_slider-r.scss
Executable file
38
resources/sass/components/types/_slider-r.scss
Executable file
@@ -0,0 +1,38 @@
|
||||
@if index($hamburger-types, slider-r) {
|
||||
/*
|
||||
* Slider Reverse
|
||||
*/
|
||||
.hamburger--slider-r {
|
||||
.hamburger-inner {
|
||||
top: $hamburger-layer-height / 2;
|
||||
|
||||
&::before {
|
||||
top: $hamburger-layer-height + $hamburger-layer-spacing;
|
||||
transition-property: transform, opacity;
|
||||
transition-timing-function: ease;
|
||||
transition-duration: 0.15s;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: ($hamburger-layer-height * 2) + ($hamburger-layer-spacing * 2);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
.hamburger-inner {
|
||||
$y-offset: $hamburger-layer-spacing + $hamburger-layer-height;
|
||||
|
||||
transform: translate3d(0, $y-offset, 0) rotate(-45deg);
|
||||
|
||||
&::before {
|
||||
transform: rotate(45deg) translate3d($hamburger-layer-width / 7, $hamburger-layer-spacing * -1, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
transform: translate3d(0, $y-offset * -2, 0) rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
38
resources/sass/components/types/_slider.scss
Executable file
38
resources/sass/components/types/_slider.scss
Executable file
@@ -0,0 +1,38 @@
|
||||
@if index($hamburger-types, slider) {
|
||||
/*
|
||||
* Slider
|
||||
*/
|
||||
.hamburger--slider {
|
||||
.hamburger-inner {
|
||||
top: $hamburger-layer-height / 2;
|
||||
|
||||
&::before {
|
||||
top: $hamburger-layer-height + $hamburger-layer-spacing;
|
||||
transition-property: transform, opacity;
|
||||
transition-timing-function: ease;
|
||||
transition-duration: 0.15s;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: ($hamburger-layer-height * 2) + ($hamburger-layer-spacing * 2);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
.hamburger-inner {
|
||||
$y-offset: $hamburger-layer-spacing + $hamburger-layer-height;
|
||||
|
||||
transform: translate3d(0, $y-offset, 0) rotate(45deg);
|
||||
|
||||
&::before {
|
||||
transform: rotate(-45deg) translate3d($hamburger-layer-width / -7, $hamburger-layer-spacing * -1, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
transform: translate3d(0, $y-offset * -2, 0) rotate(-90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
43
resources/sass/components/types/_spin-r.scss
Executable file
43
resources/sass/components/types/_spin-r.scss
Executable file
@@ -0,0 +1,43 @@
|
||||
@if index($hamburger-types, spin-r) {
|
||||
/*
|
||||
* Spin Reverse
|
||||
*/
|
||||
.hamburger--spin-r {
|
||||
.hamburger-inner {
|
||||
transition-duration: 0.22s;
|
||||
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
|
||||
&::before {
|
||||
transition: top 0.1s 0.25s ease-in,
|
||||
opacity 0.1s ease-in;
|
||||
}
|
||||
|
||||
&::after {
|
||||
transition: bottom 0.1s 0.25s ease-in,
|
||||
transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
.hamburger-inner {
|
||||
transform: rotate(-225deg);
|
||||
transition-delay: 0.12s;
|
||||
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
|
||||
&::before {
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
transition: top 0.1s ease-out,
|
||||
opacity 0.1s 0.12s ease-out;
|
||||
}
|
||||
|
||||
&::after {
|
||||
bottom: 0;
|
||||
transform: rotate(90deg);
|
||||
transition: bottom 0.1s ease-out,
|
||||
transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
43
resources/sass/components/types/_spin.scss
Executable file
43
resources/sass/components/types/_spin.scss
Executable file
@@ -0,0 +1,43 @@
|
||||
@if index($hamburger-types, spin) {
|
||||
/*
|
||||
* Spin
|
||||
*/
|
||||
.hamburger--spin {
|
||||
.hamburger-inner {
|
||||
transition-duration: 0.22s;
|
||||
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
|
||||
&::before {
|
||||
transition: top 0.1s 0.25s ease-in,
|
||||
opacity 0.1s ease-in;
|
||||
}
|
||||
|
||||
&::after {
|
||||
transition: bottom 0.1s 0.25s ease-in,
|
||||
transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
.hamburger-inner {
|
||||
transform: rotate(225deg);
|
||||
transition-delay: 0.12s;
|
||||
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
|
||||
&::before {
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
transition: top 0.1s ease-out,
|
||||
opacity 0.1s 0.12s ease-out;
|
||||
}
|
||||
|
||||
&::after {
|
||||
bottom: 0;
|
||||
transform: rotate(-90deg);
|
||||
transition: bottom 0.1s ease-out,
|
||||
transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
47
resources/sass/components/types/_spring-r.scss
Executable file
47
resources/sass/components/types/_spring-r.scss
Executable file
@@ -0,0 +1,47 @@
|
||||
@if index($hamburger-types, spring-r) {
|
||||
/*
|
||||
* Spring Reverse
|
||||
*/
|
||||
.hamburger--spring-r {
|
||||
.hamburger-inner {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
transition-duration: 0.13s;
|
||||
transition-delay: 0s;
|
||||
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
|
||||
&::after {
|
||||
top: ($hamburger-layer-spacing * 2 + $hamburger-layer-height * 2) * -1;
|
||||
transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
|
||||
opacity 0s linear;
|
||||
}
|
||||
|
||||
&::before {
|
||||
transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
|
||||
transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
.hamburger-inner {
|
||||
transform: translate3d(0, ($hamburger-layer-spacing + $hamburger-layer-height) * -1, 0) rotate(-45deg);
|
||||
transition-delay: 0.22s;
|
||||
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
|
||||
&::after {
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
|
||||
opacity 0s 0.22s linear;
|
||||
}
|
||||
|
||||
&::before {
|
||||
top: 0;
|
||||
transform: rotate(90deg);
|
||||
transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
|
||||
transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
44
resources/sass/components/types/_spring.scss
Executable file
44
resources/sass/components/types/_spring.scss
Executable file
@@ -0,0 +1,44 @@
|
||||
@if index($hamburger-types, spring) {
|
||||
/*
|
||||
* Spring
|
||||
*/
|
||||
.hamburger--spring {
|
||||
.hamburger-inner {
|
||||
top: $hamburger-layer-height / 2;
|
||||
transition: background-color 0s 0.13s linear;
|
||||
|
||||
&::before {
|
||||
top: $hamburger-layer-height + $hamburger-layer-spacing;
|
||||
transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
|
||||
transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: ($hamburger-layer-height * 2) + ($hamburger-layer-spacing * 2);
|
||||
transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
|
||||
transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
.hamburger-inner {
|
||||
transition-delay: 0.22s;
|
||||
background-color: transparent !important;
|
||||
|
||||
&::before {
|
||||
top: 0;
|
||||
transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
|
||||
transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
transform: translate3d(0, $hamburger-layer-spacing + $hamburger-layer-height, 0) rotate(45deg);
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: 0;
|
||||
transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
|
||||
transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
transform: translate3d(0, $hamburger-layer-spacing + $hamburger-layer-height, 0) rotate(-45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
43
resources/sass/components/types/_squeeze.scss
Executable file
43
resources/sass/components/types/_squeeze.scss
Executable file
@@ -0,0 +1,43 @@
|
||||
@if index($hamburger-types, squeeze) {
|
||||
/*
|
||||
* Squeeze
|
||||
*/
|
||||
.hamburger--squeeze {
|
||||
.hamburger-inner {
|
||||
transition-duration: 0.075s;
|
||||
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
|
||||
&::before {
|
||||
transition: top 0.075s 0.12s ease,
|
||||
opacity 0.075s ease;
|
||||
}
|
||||
|
||||
&::after {
|
||||
transition: bottom 0.075s 0.12s ease,
|
||||
transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
.hamburger-inner {
|
||||
transform: rotate(45deg);
|
||||
transition-delay: 0.12s;
|
||||
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
|
||||
&::before {
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
transition: top 0.075s ease,
|
||||
opacity 0.075s 0.12s ease;
|
||||
}
|
||||
|
||||
&::after {
|
||||
bottom: 0;
|
||||
transform: rotate(-90deg);
|
||||
transition: bottom 0.075s ease,
|
||||
transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
45
resources/sass/components/types/_stand-r.scss
Executable file
45
resources/sass/components/types/_stand-r.scss
Executable file
@@ -0,0 +1,45 @@
|
||||
@if index($hamburger-types, stand-r) {
|
||||
/*
|
||||
* Stand Reverse
|
||||
*/
|
||||
.hamburger--stand-r {
|
||||
.hamburger-inner {
|
||||
transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19),
|
||||
background-color 0s 0.075s linear;
|
||||
|
||||
&::before {
|
||||
transition: top 0.075s 0.075s ease-in,
|
||||
transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
|
||||
&::after {
|
||||
transition: bottom 0.075s 0.075s ease-in,
|
||||
transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
.hamburger-inner {
|
||||
transform: rotate(-90deg);
|
||||
background-color: transparent !important;
|
||||
|
||||
transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1),
|
||||
background-color 0s 0.15s linear;
|
||||
|
||||
&::before {
|
||||
top: 0;
|
||||
transform: rotate(-45deg);
|
||||
transition: top 0.075s 0.1s ease-out,
|
||||
transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
&::after {
|
||||
bottom: 0;
|
||||
transform: rotate(45deg);
|
||||
transition: bottom 0.075s 0.1s ease-out,
|
||||
transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
45
resources/sass/components/types/_stand.scss
Executable file
45
resources/sass/components/types/_stand.scss
Executable file
@@ -0,0 +1,45 @@
|
||||
@if index($hamburger-types, stand) {
|
||||
/*
|
||||
* Stand
|
||||
*/
|
||||
.hamburger--stand {
|
||||
.hamburger-inner {
|
||||
transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19),
|
||||
background-color 0s 0.075s linear;
|
||||
|
||||
&::before {
|
||||
transition: top 0.075s 0.075s ease-in,
|
||||
transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
|
||||
&::after {
|
||||
transition: bottom 0.075s 0.075s ease-in,
|
||||
transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
.hamburger-inner {
|
||||
transform: rotate(90deg);
|
||||
background-color: transparent !important;
|
||||
|
||||
transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1),
|
||||
background-color 0s 0.15s linear;
|
||||
|
||||
&::before {
|
||||
top: 0;
|
||||
transform: rotate(-45deg);
|
||||
transition: top 0.075s 0.1s ease-out,
|
||||
transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
&::after {
|
||||
bottom: 0;
|
||||
transform: rotate(45deg);
|
||||
transition: bottom 0.075s 0.1s ease-out,
|
||||
transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
48
resources/sass/components/types/_vortex-r.scss
Executable file
48
resources/sass/components/types/_vortex-r.scss
Executable file
@@ -0,0 +1,48 @@
|
||||
@if index($hamburger-types, vortex-r) {
|
||||
/*
|
||||
* Vortex Reverse
|
||||
*/
|
||||
.hamburger--vortex-r {
|
||||
.hamburger-inner {
|
||||
transition-duration: 0.2s;
|
||||
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
transition-duration: 0s;
|
||||
transition-delay: 0.1s;
|
||||
transition-timing-function: linear;
|
||||
}
|
||||
|
||||
&::before {
|
||||
transition-property: top, opacity;
|
||||
}
|
||||
|
||||
&::after {
|
||||
transition-property: bottom, transform;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
.hamburger-inner {
|
||||
transform: rotate(-765deg);
|
||||
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
transition-delay: 0s;
|
||||
}
|
||||
|
||||
&::before {
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
bottom: 0;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
48
resources/sass/components/types/_vortex.scss
Executable file
48
resources/sass/components/types/_vortex.scss
Executable file
@@ -0,0 +1,48 @@
|
||||
@if index($hamburger-types, vortex) {
|
||||
/*
|
||||
* Vortex
|
||||
*/
|
||||
.hamburger--vortex {
|
||||
.hamburger-inner {
|
||||
transition-duration: 0.2s;
|
||||
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
transition-duration: 0s;
|
||||
transition-delay: 0.1s;
|
||||
transition-timing-function: linear;
|
||||
}
|
||||
|
||||
&::before {
|
||||
transition-property: top, opacity;
|
||||
}
|
||||
|
||||
&::after {
|
||||
transition-property: bottom, transform;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
.hamburger-inner {
|
||||
transform: rotate(765deg);
|
||||
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
transition-delay: 0s;
|
||||
}
|
||||
|
||||
&::before {
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
bottom: 0;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
223
resources/sass/layout/_footer.scss
Executable file
223
resources/sass/layout/_footer.scss
Executable file
@@ -0,0 +1,223 @@
|
||||
.footer {
|
||||
background-color: #efefef;
|
||||
padding: 30px 0 30px;
|
||||
&-top {
|
||||
.logo {
|
||||
@include mq("tablet", max) {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.phone {
|
||||
margin-left: 10px;
|
||||
@include mq("tablet", max) {
|
||||
margin-left: -20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
i {
|
||||
margin-right: 10px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
color: white;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
@extend %c-c;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
background-color: #5b5b5b;
|
||||
z-index: -2;
|
||||
@extend %tr02;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
span {
|
||||
text-decoration: underline;
|
||||
}
|
||||
i::after {
|
||||
background-color: $my-orange;
|
||||
}
|
||||
}
|
||||
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: rgb(1, 1, 1);
|
||||
line-height: 1.2;
|
||||
}
|
||||
.nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&-item {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: rgb(0, 0, 0);
|
||||
line-height: 1.2;
|
||||
text-align: left;
|
||||
opacity: 1;
|
||||
padding: 0;
|
||||
// &:first-of-type {
|
||||
// margin-bottom: 20px;
|
||||
|
||||
// @include mq("tablet", max) {
|
||||
// margin-top: 20px;
|
||||
// margin-bottom: 10px;
|
||||
// font-size: 18px;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
&-link {
|
||||
margin: 0;
|
||||
margin-bottom: 10px;
|
||||
padding: 0;
|
||||
font-size: 14px;
|
||||
opacity: 1;
|
||||
font-weight: 600;
|
||||
color: rgb(0, 0, 0);
|
||||
line-height: 1.2;
|
||||
text-align: left;
|
||||
display: block;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
color: $my-orange;
|
||||
}
|
||||
|
||||
@include mq("tablet", max) {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.socials {
|
||||
display: flex;
|
||||
// flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
@include mq("tablet-wide", max) {
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
&:not(:last-of-type) {
|
||||
// @include mq("tablet-wide", max) {
|
||||
margin-right: 25px;
|
||||
// }
|
||||
}
|
||||
i {
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
color: white;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
@extend %c-c;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
background-color: #5b5b5b;
|
||||
z-index: -2;
|
||||
@extend %tr02;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
span {
|
||||
text-decoration: underline;
|
||||
}
|
||||
i::after {
|
||||
background-color: $my-orange;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.copyright,
|
||||
.software-company {
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
color: rgb(0, 0, 0);
|
||||
|
||||
a {
|
||||
&:hover {
|
||||
color: $my-orange;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
@include mq("tablet", max) {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
// &-bottom {
|
||||
// margin-top: 20px;
|
||||
// @include mq("tablet", max) {
|
||||
// margin-top: 0;
|
||||
// }
|
||||
// .container {
|
||||
// display: flex;
|
||||
// justify-content: space-between;
|
||||
// align-items: center;
|
||||
|
||||
// @include mq("tablet", max) {
|
||||
// flex-direction: column;
|
||||
// text-align: center;
|
||||
// }
|
||||
// }
|
||||
|
||||
// padding: 15px 0;
|
||||
// border-top: 1px solid rgba(0, 0, 0, 0.102);
|
||||
|
||||
// }
|
||||
|
||||
.payments {
|
||||
p {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: rgb(0, 0, 0);
|
||||
text-align: left;
|
||||
line-height: 1;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
margin-bottom: 15px;
|
||||
|
||||
@include mq("tablet-wide", max) {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
@include mq("tablet", max) {
|
||||
margin-bottom: 0;
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
&-item {
|
||||
height: 50px;
|
||||
width: 100px;
|
||||
}
|
||||
& > div {
|
||||
margin-top: -20px;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
@include mq("tablet-wide", max) {
|
||||
margin-top: -40px;
|
||||
}
|
||||
@include mq("tablet", max) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
5
resources/sass/layout/_header.scss
Executable file
5
resources/sass/layout/_header.scss
Executable file
@@ -0,0 +1,5 @@
|
||||
header {
|
||||
@include mq("tablet-wide", min) {
|
||||
margin-top: 6px;
|
||||
}
|
||||
}
|
||||
177
resources/sass/layout/_navigation.scss
Executable file
177
resources/sass/layout/_navigation.scss
Executable file
@@ -0,0 +1,177 @@
|
||||
.topbar {
|
||||
& > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&-top,
|
||||
&-bottom {
|
||||
.container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
&-top {
|
||||
border-bottom: 1px solid #00000015;
|
||||
padding: 12px 0;
|
||||
@include mq("tablet-wide", max) {
|
||||
border-bottom-color: transparent;
|
||||
position: absolute;
|
||||
background-color: #fff;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 555;
|
||||
transition: 0.2s transform ease-out;
|
||||
transform: translateX(0px);
|
||||
left: -100%;
|
||||
width: 84%;
|
||||
padding-top: 18px;
|
||||
padding-bottom: 18px;
|
||||
&-active {
|
||||
transform: translateX(118%);
|
||||
}
|
||||
}
|
||||
.container {
|
||||
@include mq("tablet", max) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
&__left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
@include mq("tablet", max) {
|
||||
width: 100%;
|
||||
padding: 0 15px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 0;
|
||||
height: 65px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.lang {
|
||||
font-size: 18px;
|
||||
|
||||
&-list {
|
||||
left: -6px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__right {
|
||||
a {
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
text-align: right;
|
||||
color: rgb(0, 0, 0);
|
||||
&:not(:last-of-type) {
|
||||
margin-right: 15px;
|
||||
|
||||
@include mq("tablet", max) {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
color: $my-orange;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.just-call {
|
||||
i {
|
||||
color: #333 !important;
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-bottom {
|
||||
padding: 20px 0;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.container {
|
||||
@include mq("tablet-wide", max) {
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
& > * {
|
||||
margin-right: 40px;
|
||||
}
|
||||
}
|
||||
@include mq("tablet", max) {
|
||||
& > * {
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
@include mq("phone-small", max) {
|
||||
& > * {
|
||||
margin-right: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sign-in {
|
||||
position: absolute;
|
||||
right: 40px;
|
||||
|
||||
img {
|
||||
width: 27px;
|
||||
height: 27px;
|
||||
object-fit: contain;
|
||||
object-position: center;
|
||||
}
|
||||
}
|
||||
|
||||
&--bottom {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
order: 11;
|
||||
margin-left: auto !important;
|
||||
margin-right: auto !important;
|
||||
position: absolute;
|
||||
z-index: 222;
|
||||
bottom: 0px;
|
||||
width: 84%;
|
||||
background: white;
|
||||
transition: 0.2s transform ease-out;
|
||||
transform: translateX(0px);
|
||||
left: -108%;
|
||||
&-active {
|
||||
transform: translateX(127%);
|
||||
}
|
||||
padding: 10px 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
@include mq("tablet-wide", min) {
|
||||
display: none;
|
||||
}
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
z-index: 122;
|
||||
transition: unset;
|
||||
// &-active {
|
||||
// top: 15px;
|
||||
// color: white;
|
||||
// .hamburger.is-active .hamburger-inner,
|
||||
// .hamburger.is-active .hamburger-inner::after,
|
||||
// .hamburger.is-active .hamburger-inner::before {
|
||||
// background-color: #fff;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
1229
resources/sass/layout/_sections.scss
Executable file
1229
resources/sass/layout/_sections.scss
Executable file
File diff suppressed because it is too large
Load Diff
31
resources/sass/main.scss
Executable file
31
resources/sass/main.scss
Executable file
@@ -0,0 +1,31 @@
|
||||
// Подключение своих SCSS файлов
|
||||
// @import '../fonts/ProximaNova/stylesheet';
|
||||
|
||||
@import "abstracts/variables";
|
||||
@import "abstracts/functions";
|
||||
@import "abstracts/mixins";
|
||||
@import "abstracts/placeholders";
|
||||
|
||||
@import "base/animations";
|
||||
@import "base/base";
|
||||
@import "base/typography";
|
||||
@import "base/utilities";
|
||||
@import "base/fonts";
|
||||
|
||||
@import "layout/navigation";
|
||||
@import "layout/header";
|
||||
@import "layout/sections";
|
||||
@import "layout/footer";
|
||||
|
||||
@import "components/button";
|
||||
@import "components/my-nav";
|
||||
@import "components/widgets";
|
||||
@import "components/modal";
|
||||
@import "components/my-form";
|
||||
@import "components/cards";
|
||||
@import "components/hamburgers";
|
||||
@import "components/sliders";
|
||||
@import "components/scroll";
|
||||
@import "components/preloader";
|
||||
|
||||
@import "pages/home";
|
||||
3
resources/sass/pages/_home.scss
Executable file
3
resources/sass/pages/_home.scss
Executable file
@@ -0,0 +1,3 @@
|
||||
header {
|
||||
|
||||
}
|
||||
31
resources/sass/vendor.scss
Executable file
31
resources/sass/vendor.scss
Executable file
@@ -0,0 +1,31 @@
|
||||
// Подключение своих SCSS файлов
|
||||
//@import '../fonts/ProximaNova/stylesheet.css';
|
||||
|
||||
@import "abstracts/variables";
|
||||
@import "abstracts/functions";
|
||||
@import "abstracts/mixins";
|
||||
@import "abstracts/placeholders";
|
||||
|
||||
@import "base/animations";
|
||||
@import "base/base";
|
||||
@import "base/typography";
|
||||
@import "base/utilities";
|
||||
@import "base/fonts";
|
||||
|
||||
@import "layout/navigation";
|
||||
@import "layout/header";
|
||||
@import "layout/sections";
|
||||
@import "layout/footer";
|
||||
|
||||
@import "components/button";
|
||||
@import "components/my-nav";
|
||||
@import "components/widgets";
|
||||
@import "components/modal";
|
||||
@import "components/my-form";
|
||||
@import "components/cards";
|
||||
@import "components/hamburgers";
|
||||
@import "components/sliders";
|
||||
@import "components/scroll";
|
||||
@import "components/preloader";
|
||||
|
||||
@import "pages/home";
|
||||
3
resources/sass/vendors/_bootstrap.scss
vendored
Executable file
3
resources/sass/vendors/_bootstrap.scss
vendored
Executable file
@@ -0,0 +1,3 @@
|
||||
// Переопределение дефолтных значений переменных Bootstrap 4 и определение своих
|
||||
@import "variables";
|
||||
@import "../../../node_modules/bootstrap/scss/bootstrap.scss";
|
||||
0
resources/sass/vendors/_variables.scss
vendored
Executable file
0
resources/sass/vendors/_variables.scss
vendored
Executable file
Reference in New Issue
Block a user