From 293d900f0581bb6096522b088b0e77ffcdb55f39 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fede=20=C3=81lvarez?= Date: Tue, 24 May 2022 18:37:19 +0200 Subject: [PATCH] General styles --- .../sections/careers/values/index.tsx | 6 +- .../sections/contact/form/form.module.scss | 17 ++-- .../sections/contact/hero/hero.module.scss | 85 ++++++------------- .../sections/contact/hero/index.tsx | 42 +++------ .../sections/newsroom/hero/hero.module.scss | 77 ++++++----------- .../sections/newsroom/hero/index.tsx | 26 +++--- .../partners/contact/contact.module.scss | 18 ++-- .../sections/products/stack/index.tsx | 22 ++--- .../sections/products/stack/stack.module.scss | 28 +++--- 9 files changed, 139 insertions(+), 182 deletions(-) diff --git a/src/components/sections/careers/values/index.tsx b/src/components/sections/careers/values/index.tsx index 8c844bd..64aa414 100644 --- a/src/components/sections/careers/values/index.tsx +++ b/src/components/sections/careers/values/index.tsx @@ -31,9 +31,9 @@ interface Props { } } -const Network = ({ data }: Props) => { +const Values = ({ data }: Props) => { return ( -
+
{/* { ) } -export default Network +export default Values diff --git a/src/components/sections/contact/form/form.module.scss b/src/components/sections/contact/form/form.module.scss index 3198ddb..d129d01 100644 --- a/src/components/sections/contact/form/form.module.scss +++ b/src/components/sections/contact/form/form.module.scss @@ -75,12 +75,18 @@ textarea, select { appearance: none; - background-color: unset; font-size: tovw(24px, 'default', 18px); - padding-bottom: tovw(26px, 'default', 14px); + padding: tovw(16px, 'default', 12px) tovw(12px, 'default', 10px); margin-top: tovw(20px, 'default', 16px); - border: unset; - border-bottom: tovw(1px, 'default', 1px) solid var(--color-grey-light); + background: rgb(142 142 142 / 0.1); + border: tovw(1px, 'default', 1px) solid transparent; + border-radius: tovw(8px, 'default', 8px); + + &:focus { + border: tovw(1px, 'default', 1px) solid var(--color-accent); + background: rgb(0 0 244 / 0.1); + transition: all 250ms; + } option { background-color: black; @@ -95,7 +101,8 @@ } select { - background: url('/images/dropdown.svg') no-repeat 98% 35%; + background: url('/images/dropdown.svg') no-repeat 95% 50%; + background-color: rgb(142 142 142 / 0.1); background-size: tovw(20px, 'default', 16px); &:invalid { diff --git a/src/components/sections/contact/hero/hero.module.scss b/src/components/sections/contact/hero/hero.module.scss index 1ab286c..f211806 100644 --- a/src/components/sections/contact/hero/hero.module.scss +++ b/src/components/sections/contact/hero/hero.module.scss @@ -24,70 +24,41 @@ justify-content: center; } - // .video_container { - // @include respond-to('mobile') { - // margin-top: unset; - // } - - // display: flex; - // align-self: center; - // position: relative; - // margin-top: tovw(-165px, 'default'); - // margin-bottom: tovw(-140px, 'default'); - // padding-top: tovw(30px, 'default', 20px); - // width: 82%; - // mix-blend-mode: lighten; - - // video { - // @include respond-to('mobile') { - // display: none; - // } - - // width: 100%; - // } - - // &::after { - // position: absolute; - // top: 0; - // left: 0; - // z-index: 1; - // background: radial-gradient( - // ellipse, - // rgb(3 3 3 / 0) 60%, - // rgb(3 3 3 / 1) 75%, - // rgb(3 3 3 / 1) 100% - // ); - // width: 100%; - // height: 100%; - // content: ''; - // } - // } - - .hero { + .hero__container { @include respond-to('mobile') { - display: none; + min-height: unset; } - place-self: center; - width: tovw(1516px, 'default', 800px); - mix-blend-mode: screen; + display: flex; + place-content: center; + min-height: tovw(600px, 'default', 315px); - &__mobile { + .hero { @include respond-to('mobile') { - display: flex; - margin: tovw(50px, 'mobile', 130px) 0 tovw(50px, 'mobile', 70px) - tovw(16px, 'mobile', 20px); - width: 200%; - mix-blend-mode: screen; - place-self: center; - mask-image: linear-gradient( - 0deg, - rgb(255 255 255 / 0) 0%, - rgb(0 0 0) 25% - ); + display: none; } - display: none; + margin: auto; + width: tovw(1516px, 'default', 800px); + mix-blend-mode: screen; + + &__mobile { + @include respond-to('mobile') { + display: flex; + margin: tovw(50px, 'mobile', 130px) 0 tovw(50px, 'mobile', 70px) + tovw(16px, 'mobile', 20px); + width: 200%; + mix-blend-mode: screen; + place-self: center; + mask-image: linear-gradient( + 0deg, + rgb(255 255 255 / 0) 0%, + rgb(0 0 0) 25% + ); + } + + display: none; + } } } diff --git a/src/components/sections/contact/hero/index.tsx b/src/components/sections/contact/hero/index.tsx index 70e2168..1cc9f4b 100644 --- a/src/components/sections/contact/hero/index.tsx +++ b/src/components/sections/contact/hero/index.tsx @@ -19,37 +19,23 @@ interface Props { } const Hero = ({ data }: Props) => { - // const heroVideoRef = useRef(null) - return (
- {/*
*/} - hero - {/* */} - {/*
*/} - hero +
+ hero + hero +
diff --git a/src/components/sections/newsroom/hero/hero.module.scss b/src/components/sections/newsroom/hero/hero.module.scss index 68fd560..4e5676f 100644 --- a/src/components/sections/newsroom/hero/hero.module.scss +++ b/src/components/sections/newsroom/hero/hero.module.scss @@ -21,64 +21,39 @@ } } - // .video_container { - // align-self: center; - // position: relative; - // margin-top: tovw(-165px, 'default'); - // margin-bottom: tovw(-140px, 'default'); - // padding-top: tovw(30px, 'default', 20px); - // width: 82%; - // mix-blend-mode: lighten; - - // video { - // @include respond-to('mobile') { - // display: none; - // } - - // width: 100%; - // } - - // &::after { - // position: absolute; - // top: 0; - // left: 0; - // z-index: 1; - // background: radial-gradient( - // ellipse, - // rgb(3 3 3 / 0) 60%, - // rgb(3 3 3 / 1) 75%, - // rgb(3 3 3 / 1) 100% - // ); - // width: 100%; - // height: 100%; - // content: ''; - // } - // } - - .hero { + .hero__container { @include respond-to('mobile') { - display: none; + min-height: unset; } - place-self: center; - width: tovw(1300px, 'default', 700px); - mix-blend-mode: screen; + display: flex; + place-content: center; + min-height: tovw(650px, 'default', 350px); - &__mobile { + .hero { @include respond-to('mobile') { - display: flex; - margin: tovw(50px, 'mobile', 130px) 0 tovw(50px, 'mobile', 70px) 0; - width: 135%; - mix-blend-mode: screen; - place-self: center; - mask-image: linear-gradient( - 0deg, - rgb(255 255 255 / 0) 0%, - rgb(0 0 0) 25% - ); + display: none; } - display: none; + width: tovw(1300px, 'default', 700px); + mix-blend-mode: screen; + + &__mobile { + @include respond-to('mobile') { + display: flex; + margin: tovw(50px, 'mobile', 130px) 0 tovw(50px, 'mobile', 70px) 0; + width: 135%; + mix-blend-mode: screen; + place-self: center; + mask-image: linear-gradient( + 0deg, + rgb(255 255 255 / 0) 0%, + rgb(0 0 0) 25% + ); + } + + display: none; + } } } diff --git a/src/components/sections/newsroom/hero/index.tsx b/src/components/sections/newsroom/hero/index.tsx index e09d9e0..5c4aa18 100644 --- a/src/components/sections/newsroom/hero/index.tsx +++ b/src/components/sections/newsroom/hero/index.tsx @@ -20,18 +20,20 @@ const Hero = ({ data }: Props) => { return (
- hero - hero +
+ hero + hero +
diff --git a/src/components/sections/partners/contact/contact.module.scss b/src/components/sections/partners/contact/contact.module.scss index 066219f..d80b6b9 100644 --- a/src/components/sections/partners/contact/contact.module.scss +++ b/src/components/sections/partners/contact/contact.module.scss @@ -136,14 +136,19 @@ input, textarea, select { - width: 100%; appearance: none; - background-color: unset; font-size: tovw(24px, 'default', 18px); - padding-bottom: tovw(26px, 'default', 14px); + padding: tovw(16px, 'default', 12px) tovw(12px, 'default', 10px); margin-top: tovw(20px, 'default', 16px); - border: unset; - border-bottom: tovw(1px, 'default', 1px) solid var(--color-grey-light); + background: rgb(142 142 142 / 0.1); + border: tovw(1px, 'default', 1px) solid transparent; + border-radius: tovw(8px, 'default', 8px); + + &:focus { + border: tovw(1px, 'default', 1px) solid var(--color-accent); + background: rgb(0 0 244 / 0.1); + transition: all 250ms; + } option { background-color: black; @@ -158,7 +163,8 @@ } select { - background: url('/images/dropdown.svg') no-repeat 98% 35%; + background: url('/images/dropdown.svg') no-repeat 95% 50%; + background-color: rgb(142 142 142 / 0.1); background-size: tovw(20px, 'default', 16px); &:invalid { diff --git a/src/components/sections/products/stack/index.tsx b/src/components/sections/products/stack/index.tsx index 058b052..68a9069 100644 --- a/src/components/sections/products/stack/index.tsx +++ b/src/components/sections/products/stack/index.tsx @@ -52,16 +52,18 @@ const Stack = ({ data }: Props) => {
- stack - stack +
+ stack + stack +
diff --git a/src/components/sections/products/stack/stack.module.scss b/src/components/sections/products/stack/stack.module.scss index 755d1b9..29e44f8 100644 --- a/src/components/sections/products/stack/stack.module.scss +++ b/src/components/sections/products/stack/stack.module.scss @@ -116,20 +116,28 @@ } div:last-child { - .stack__img { - margin-top: tovw(293px, 'default', 88px); - width: 100%; - image-rendering: optimizequality; + .image__container { @media screen and (max-width: 1450px) { - display: none; + min-height: unset; } - } - .stack__img__small { - display: none; + min-height: tovw(1611px, 'default', 758px); - @media screen and (max-width: 1450px) { - display: unset; + .stack__img { + width: 100%; + margin-top: tovw(293px, 'default', 88px); + image-rendering: optimizequality; + @media screen and (max-width: 1450px) { + display: none; + } + } + + .stack__img__small { + display: none; + + @media screen and (max-width: 1450px) { + display: unset; + } } }