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);
}
}
}

13
resources/scripts/main.js Normal file
View File

@@ -0,0 +1,13 @@
function toggleDropdown() {
let target = document.getElementsByClassName('dropdown')[0];
if (target.classList.contains('hidden')) {
target.classList.remove('hidden');
target.classList.add('flex');
//document.getElementById('container').style.display = 'none';
}
else {
target.classList.add('dropdown_close_animation');
target.classList.add('hidden');
target.classList.remove('flex');
}
}

126
resources/styles/main.css
View File

@@ -58,7 +58,7 @@
}
@media screen and (max-width: 850px) {
.table .vertical-separator {
margin-right: 90px;
margin-right: 18px;
}
}
.table .reverse {
@@ -75,7 +75,7 @@
}
@media screen and (max-width: 850px) {
.table .reverse img {
margin-left: 10px;
margin-left: 2px;
}
}
.table .reverse p {
@@ -92,7 +92,7 @@
}
@media screen and (max-width: 850px) {
.table .reverse .vertical-separator {
margin-left: 90px;
margin-left: 18px;
}
}
.table .square img {
@@ -198,26 +198,94 @@
display: none;
}
}
#header .menu {
#header #toggle {
display: none;
filter: invert(1);
height: 56px;
width: auto;
}
#header .menu img {
height: 56px;
width: auto;
#header .dropdown-toggle {
margin: 0 auto 0;
width: 36px;
height: 36px;
position: relative;
}
#header .dropdown-toggle .bar {
padding: 0;
width: 36px;
height: 4px;
background-color: #1d60b5;
display: block;
border-radius: 4px;
transition: all 0.4s ease-in-out;
position: absolute;
}
#header .dropdown-toggle .bar1 {
transform-origin: 5%;
}
#header .dropdown-toggle .bar4 {
transform-origin: 5%;
}
@media screen and (max-width: 850px) {
#header .menu {
height: 36px;
#header .dropdown-toggle {
width: 28px;
height: 28px;
}
#header .menu img {
height: 36px;
#header .dropdown-toggle .bar {
width: 28px;
}
}
#header .bar1 {
top: 0;
}
#header .bar2,
#header .bar3 {
top: 16px;
}
@media screen and (max-width: 850px) {
#header .bar2,
#header .bar3 {
top: 12px;
}
}
#header .bar3 {
right: 0;
}
#header .bar4 {
bottom: 0;
}
#header .toggle:checked + label > .dropdown-toggle > .bar1 {
transform: rotate(45deg);
height: 3px;
width: 50px;
}
@media screen and (max-width: 850px) {
#header .toggle:checked + label > .dropdown-toggle > .bar1 {
width: 39px;
}
}
#header .toggle:checked + label > .dropdown-toggle > .bar3 {
transform: rotate(45deg);
height: 3px;
background-color: transparent;
}
#header .toggle:checked + label > .dropdown-toggle > .bar2 {
transform: rotate(-45deg);
height: 3px;
background-color: transparent;
}
#header .toggle:checked + label > .dropdown-toggle > .bar4 {
transform: rotate(-45deg);
height: 3px;
width: 50px;
}
@media screen and (max-width: 850px) {
#header .toggle:checked + label > .dropdown-toggle > .bar4 {
width: 39px;
}
}
#header #toggle-label {
display: none;
}
@media screen and (max-width: 1200px) {
#header .menu {
#header #toggle-label {
display: block;
}
}
@@ -302,6 +370,14 @@ html, body {
padding-bottom: 0;
}
.hidden {
display: none;
}
.flex {
display: flex;
}
#header {
height: 10vh;
}
@@ -311,6 +387,26 @@ 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 .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;