fyb/ugurgaleri
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

Browse Source
This commit is contained in:
Ferit Yiğit BALABAN
2022-07-07 21:06:35 +03:00
parent 9ac4883bd3
commit 1beb1e8711
7 changed files with 289 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
resources/css/main.scss
View File

@@ -30,6 +30,14 @@ html, body {
padding-bottom: 0;
}
.hidden {
display: none;
}
.flex {
display: flex;
}
#header {
// Layout, details and children is set in partials/header.scss
height: 10vh;
@@ -39,6 +47,27 @@ html, body {
}
}
.dropdown {
position: fixed;
z-index: 2;
background-color: #706fff;
width: 100vw;
height: 90vh;
animation: slide-in-right 550ms;
flex-direction: column;
align-items: center;
.dropdown-nav-item {
color: white;
font: 600 28px "Montserrat", sans-serif;
text-decoration: none;
}
}
.dropdown_close_animation {
animation: 550ms slide-in-left;
}
#container {
height: 90vh;
display: grid;

109
resources/css/partials/header.scss
View File

@@ -1,5 +1,17 @@
@use "../variables.scss";
@use "../mixins.scss";
@use "sass:math";
$dropdown-toggle_l_width_no_unit: 36;
$dropdown-toggle_s_width_no_unit: 28;
$dropdown-toggle_l_width: $dropdown-toggle_l_width_no_unit * 1px;
$dropdown-toggle_l_cross_width: math.floor(math.sqrt(2 * math.pow($dropdown-toggle_l_width_no_unit, 2))) * 1px;
$dropdown-toggle_l_second_bar: math.div($dropdown-toggle_l_width - 4, 2);
$dropdown-toggle_s_width: $dropdown-toggle_s_width_no_unit * 1px;
$dropdown-toggle_s_cross_width: math.floor(math.sqrt(2 * math.pow($dropdown-toggle_s_width_no_unit, 2))) * 1px;
$dropdown-toggle_s_second_bar: math.div($dropdown-toggle_s_width - 4, 2);
#header {
// Height is set in main.scss
@@ -47,23 +59,100 @@
}
}
.menu {
#toggle {
display: none;
filter: invert(1);
height: 56px;
width: auto;
}
img {
height: 56px;
width: auto;
.dropdown-toggle {
margin: 0 auto 0;
width: $dropdown-toggle_l_width;
height: $dropdown-toggle_l_width;
position: relative;
.bar {
padding: 0;
width: $dropdown-toggle_l_width;
height: 4px;
background-color: variables.$clr_brand;
display: block;
border-radius: 4px;
transition: all 0.4s ease-in-out;
position: absolute;
}
.bar1 {
transform-origin: 5%;
}
.bar4 {
transform-origin: 5%;
}
@include mixins.header_overflow2 {
img {
height: 36px;
width: $dropdown-toggle_s_width;
height: $dropdown-toggle_s_width;
.bar {
width: $dropdown-toggle_s_width;
}
height: 36px;
}
}
.bar1 {
top: 0;
}
.bar2,
.bar3 {
top: $dropdown-toggle_l_second_bar;
@include mixins.header_overflow2 {
top: $dropdown-toggle_s_second_bar;
}
}
.bar3 {
right: 0;
}
.bar4 {
bottom: 0;
}
.toggle:checked + label > .dropdown-toggle > .bar1{
transform: rotate(45deg);
height: 3px;
width: $dropdown-toggle_l_cross_width;
@include mixins.header_overflow2 {
width: $dropdown-toggle_s_cross_width;
}
}
.toggle:checked + label > .dropdown-toggle > .bar3{
transform: rotate(45deg);
height: 3px;
background-color: transparent;
}
.toggle:checked + label > .dropdown-toggle > .bar2{
transform: rotate(-45deg);
height: 3px;
background-color: transparent;
}
.toggle:checked + label > .dropdown-toggle > .bar4{
transform: rotate(-45deg);
height: 3px;
width: $dropdown-toggle_l_cross_width;
@include mixins.header_overflow2 {
width: $dropdown-toggle_s_cross_width;
}
}
#toggle-label {
display: none;
@include mixins.header_overflow {
display: block;

6
resources/css/views/index.scss
View File

@@ -67,7 +67,7 @@ $social-button_inner_margin: 10px;
}
@include mixins.mx_index_brands_fix2 {
margin-right: 9 * math.div(variables.$px_horizontalPadding2, 10);
margin-right: 9 * math.div(variables.$px_horizontalPadding3, 10);
}
}
@@ -86,7 +86,7 @@ $social-button_inner_margin: 10px;
}
@include mixins.mx_index_brands_fix2 {
margin-left: math.div(variables.$px_horizontalPadding2, 10);
margin-left: math.div(variables.$px_horizontalPadding3, 10);
}
}
@@ -103,7 +103,7 @@ $social-button_inner_margin: 10px;
}
@include mixins.mx_index_brands_fix2 {
margin-left: 9 * math.div(variables.$px_horizontalPadding2, 10);
margin-left: 9 * math.div(variables.$px_horizontalPadding3, 10);
}
}
}