From b32608f8a9b078c9048af327a17ca88d021c73e7 Mon Sep 17 00:00:00 2001 From: devartes Date: Fri, 18 Nov 2022 09:06:37 -0300 Subject: [PATCH] style: adicionando breakpoint para desk>2500px --- src/styles/partials/container.scss | 18 ++++- src/styles/partials/form.scss | 96 +++++++++++++++++++++- src/styles/partials/slider.scss | 124 ++++++++++++++++++++++++++--- src/styles/utils/variables.scss | 1 + 4 files changed, 223 insertions(+), 16 deletions(-) diff --git a/src/styles/partials/container.scss b/src/styles/partials/container.scss index aaeac8c..1937533 100644 --- a/src/styles/partials/container.scss +++ b/src/styles/partials/container.scss @@ -6,13 +6,23 @@ margin: 40px auto; } +$breakpoint-desk: 2500px; +@media (min-width: $breakpoint-desk) { + .container { + width: 89.533%; + } +} + $breakpoint-tablet: 1024px; @media (max-width: $breakpoint-tablet) { .container { width: 96.87%; - margin: 40px auto; - display: flex; - justify-content: center; - flex-direction: column; + } +} + +$breakpoint-mobile: 375px; +@media (max-width: $breakpoint-mobile) { + .container { + width: 91.441%; } } diff --git a/src/styles/partials/form.scss b/src/styles/partials/form.scss index a7ba7f3..e46440c 100644 --- a/src/styles/partials/form.scss +++ b/src/styles/partials/form.scss @@ -111,6 +111,68 @@ form { position: absolute; } +$breakpoint-desk: 2500px; +@media (min-width: $breakpoint-desk) { + h1 { + font-size: 64px; + } + + textarea::placeholder, + textarea, + input::placeholder, + input, + .input-image-container { + font-weight: 400; + font-size: 32px; + line-height: 48px; + } + + form { + width: 65.6909%; + height: 416px; + .form-container { + .form-inputs { + .input-image-container { + width: 44.906%; + height: 400px; + &::after { + font-weight: 400; + font-size: 32px; + line-height: 48px; + } + .input-image-content { + height: 400px; + } + } + .form-input-descricao { + width: 54.262%; + height: 496px; + gap: 16px; + .input-titulo { + width: 79.311%; + height: 64px; + } + .description-content { + height: 416px; + .input-descricao { + height: 320px; + } + & button { + padding: 16px 20px; + border-radius: 8px; + margin-top: 16px; + font-weight: 700; + font-size: 32px; + } + } + .input-descricao { + padding: 40.66px 16.77px; + } + } + } + } + } +} $breakpoint-tablet: 1024px; @media (max-width: $breakpoint-tablet) { @@ -159,5 +221,37 @@ $breakpoint-tablet: 1024px; } } } - +} + +$breakpoint-mobile: 375px; +@media (max-width: $breakpoint-mobile) { + form { + height: 500.3px; + .form-container { + .form-inputs { + .input-image-container { + height: 212px; + .input-image-content { + height: 212px; + } + } + .form-input-descricao { + height: 272.3px; + .description-content { + width: 100%; + height: 200.3px; + & button { + width: 100%; + height: 56px; + margin-top: 8.3px; + } + } + .input-descricao, + .input-titulo { + padding: 10px 16px; + } + } + } + } + } } diff --git a/src/styles/partials/slider.scss b/src/styles/partials/slider.scss index 10a47c1..cd90587 100644 --- a/src/styles/partials/slider.scss +++ b/src/styles/partials/slider.scss @@ -17,7 +17,7 @@ h2 { justify-content: center; & .slider-content { background: $background-color; - box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.08); + box-shadow: 0px 4px 16px $slider-content-shadow-color; border-radius: 8px; width: 279px; height: auto; @@ -33,6 +33,7 @@ h2 { border-radius: 8px; } & h3 { + width: auto; font-weight: 700; font-size: 24px; line-height: 28px; @@ -79,11 +80,26 @@ h2 { } } +.slick-dots li { + width: auto; + margin: 0; +} + +.slick-dots li button { + width: auto; + height: 17px; + display: flex; + align-items: center; +} + .slick-dots li button:before { + display: flex; + justify-content: center; + align-items: center; + position: relative; top: 25px; color: $slider-ellipse-color; - width: 10.01px; - height: 10.01px; + font-size: 10.01px; opacity: unset; } @@ -96,6 +112,67 @@ h2 { opacity: unset; } +$breakpoint-desk: 2500px; +@media (min-width: $breakpoint-desk) { + h2 { + font-size: 64px; + } + + .slider-container { + margin-top: 120px; + .slider { + & ul { + margin-top: 41px; + & .slider-content { + width: 544px; + width: 544px; + min-height: 768px; + & img { + height: 400px; + } + & h3 { + font-weight: 700; + font-size: 48px; + line-height: 56px; + height: 120px; + } + & p { + font-weight: 400; + font-size: 32px; + line-height: 48px; + max-height: 192px; + } + } + } + } + } + + .slick-prev { + left: -40px; + &:before { + width: 26px; + height: 58px; + } + } + + .slick-next { + right: -40px; + &:before { + width: 26px; + height: 58px; + } + } + + .slick-dots li button:before { + font-size: 20.01px; + } + + .slick-dots li.slick-active button:before { + width: 25.49px; + height: 25.49px; + } +} + $breakpoint-tablet: 1024px; @media (max-width: $breakpoint-tablet) { .slider-container { @@ -124,12 +201,11 @@ $breakpoint-tablet: 1024px; } & img { width: 100%; - object-fit: cover; + object-position: top; height: 570px; border-radius: 8px; } & h3 { - width: 100%; color: $title-item-list-color; } & p { @@ -143,18 +219,18 @@ $breakpoint-tablet: 1024px; } } - .slick-dots li button{ + .slick-dots li button { display: none; } - .slick-track{ + .slick-track { max-width: 100%; margin-top: 0; display: flex; flex-direction: column; - transform: translate3d(0, 0, 0)!important; + transform: translate3d(0, 0, 0) !important; } - .slick-list{ + .slick-list { max-width: 100%; } @@ -170,6 +246,32 @@ $breakpoint-tablet: 1024px; display: none; } } - - +} + +$breakpoint-mobile: 375px; +@media (max-width: $breakpoint-mobile) { + .slider-container { + margin-top: 40.7px; + .slider { + & ul { + margin-top: 32px; + & .slider-content { + min-height: 400px; + & img { + height: 212px; + object-fit: cover; + } + & h3 { + color: $title-item-list-color; + } + & p { + padding: 0 24px 24px 24px; + &::-webkit-scrollbar { + display: none; + } + } + } + } + } + } } diff --git a/src/styles/utils/variables.scss b/src/styles/utils/variables.scss index 74f690b..b3e68da 100644 --- a/src/styles/utils/variables.scss +++ b/src/styles/utils/variables.scss @@ -12,3 +12,4 @@ $title-list-color: #000000; $title-item-list-color: #333333; $description-item-list-color: #858585; $slider-ellipse-color: #858585; +$slider-content-shadow-color: #00000014;