restore composer.json, add mysqli extension
This commit is contained in:
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user