From e5d82b07a709fe770c3a92e596c9fb4a66e2ddcb Mon Sep 17 00:00:00 2001
From: shamalainen <sebastian@hamse.fi>
Date: Fri, 29 Jan 2021 11:36:17 +0200
Subject: [PATCH] Update white hero variant styles and clean up code
---
src/components/hy-hero/hy-hero.scss | 400 ++++------------------------
1 file changed, 54 insertions(+), 346 deletions(-)
diff --git a/src/components/hy-hero/hy-hero.scss b/src/components/hy-hero/hy-hero.scss
index fa828908..50739e01 100644
--- a/src/components/hy-hero/hy-hero.scss
+++ b/src/components/hy-hero/hy-hero.scss
@@ -111,6 +111,60 @@
}
&--white {
+ border-bottom: 1px solid rgba(16, 126, 171, 0.1);
+ box-shadow: inset 0 -2rem 2rem -2rem rgba(14, 104, 139, 0.1);
+ padding-bottom: 2rem;
+
+ @include breakpoint($narrow) {
+ box-shadow: inset 0 -40px 40px -40px rgba(14, 104, 139, 0.1);
+ padding-bottom: 40px;
+ }
+
+ @include breakpoint($wide) {
+ background-color: var(--grayscale-white);
+ border-bottom: 1px solid rgba(16, 126, 171, 0.1);
+ border-top: 1px solid rgba(16, 126, 171, 0.1);
+ box-shadow: inset 0 -6px 6px -6px rgba(14, 104, 139, 0.1);
+ padding: 6px 0;
+ }
+
+ @include breakpoint($extrawide) {
+ box-shadow: inset 0 -6px 6px -6px rgba(14, 104, 139, 0.1), inset 0 6px 6px -6px rgba(14, 104, 139, 0.1);
+ margin: 0;
+ }
+
+ @include breakpoint($xlarge) {
+ box-shadow: inset 0 -12px 12px -12px rgba(14, 104, 139, 0.1), inset 0 12px 12px -12px rgba(14, 104, 139, 0.1);
+ margin-left: -32px;
+ margin-right: -32px;
+ padding: 12px 0;
+ }
+
+ .hy-hero__content-container {
+ @include breakpoint(max-width $wide) {
+ padding-bottom: 0;
+ }
+
+ @include breakpoint($extrawide) {
+ padding-left: 32px; // Original 24px + 8px
+ padding-right: 8px;
+ }
+
+ @include breakpoint($xlarge) {
+ padding-left: 0;
+ }
+ }
+
+ .hy-hero__image-container {
+ @include breakpoint($wide) {
+ padding: 0;
+ }
+
+ @include breakpoint($extrawide) {
+ padding-right: 8px;
+ }
+ }
+
.hy-hero__content-container,
.hy-hero__spacer-box {
background-color: var(--grayscale-white);
@@ -334,17 +388,6 @@
@include breakpoint($extrawide) {
padding: 28px 40px 32px 0;
}
-
- // No sidebar, large desktop screens
- // &__large {
- // @include breakpoint($extrawide) {
- // padding: 0 40px 32px 0;
- // }
-
- // @include breakpoint($xlarge) {
- // padding: 0 40px 36px 0;
- // }
- // }
}
.hy-hero__actions {
@@ -358,338 +401,3 @@
margin-top: 0;
}
}
-
-// .hy-hero {
-// position: relative;
-
-// @include breakpoint($wide) {
-// margin-left: 0;
-// margin-right: 0;
-// }
-
-// @include breakpoint($xlarge) {
-// margin-left: -32px;
-// padding-left: 32px;
-// }
-
-// // No sidebar, >1200px styles
-// &__large {
-// @include breakpoint($xlarge) {
-// margin-left: 0;
-// padding-left: 0;
-// }
-// }
-
-// &__desktop-container {
-// @include breakpoint($wide) {
-// display: flex;
-// }
-// }
-
-// &__image-container {
-// background: transparent;
-// background-position: 50% 50%;
-// background-size: cover;
-// position: relative;
-
-// @include breakpoint($wide) {
-// background: white;
-// order: 2;
-// padding: 6px 0;
-// width: 60%;
-// z-index: 1;
-// }
-
-// img.hy-image__image {
-// height: 100%;
-// min-height: 205px;
-// object-fit: cover;
-// width: 100%;
-// }
-// }
-
-// &__content {
-// display: none;
-// margin-right: 24px;
-// margin-top: -24px;
-// min-height: 24px;
-// max-width: 100%;
-// position: relative;
-
-// @include breakpoint($narrow) {
-// margin-right: 48px;
-// margin-top: -40px;
-// min-height: 40px;
-// max-width: 87%; //7col (out of 8) - 32px (1 margin)
-// }
-
-// @include breakpoint($wide) {
-// display: none;
-// }
-// }
-
-// &__content--bottom {
-// @include breakpoint($extrawide) {
-// margin-right: 32px;
-// }
-// }
-
-// &__content--container {
-// position: relative;
-
-// @include breakpoint($wide) {
-// margin-left: 32px;
-// margin-right: -32px;
-// padding-bottom: 44px;
-// padding-top: 20px;
-// }
-
-// @include breakpoint($extrawide) {
-// padding-bottom: 44px;
-// padding-top: 20px;
-// margin-left: 0;
-// margin-right: 0;
-// }
-// @include breakpoint($xlarge) {
-// padding-bottom: 78px;
-// padding-top: 48px;
-// }
-
-// // No sidebar, large screens
-// &__large {
-// @include breakpoint($extrawide) {
-// padding-bottom: 78px;
-// padding-top: 48px;
-// }
-// @include breakpoint($xlarge) {
-// padding-bottom: 92px;
-// padding-top: 56px;
-// }
-// }
-// }
-
-// &__content-wrap-helper {
-// padding: 1rem;
-// padding-bottom: 32px;
-
-// @include breakpoint($narrow) {
-// padding: 0 32px 40px;
-// }
-
-// @include breakpoint($wide) {
-// align-self: center;
-// display: flex;
-// flex-direction: column;
-// height: 100%;
-// justify-content: center;
-// left: 0;
-// margin: 0;
-// order: 1;
-// padding: 0;
-// position: relative;
-// top: 0;
-// width: 40%;
-// z-index: 2;
-// }
-// }
-
-// &--blue {
-// background-color: var(--brand-main-light);
-
-// .hy-hero__title__overlay h1 {
-// background-color: var(--brand-main-light);
-// color: transparent !important;
-// }
-
-// .hy-hero__content,
-// .hy-hero__description,
-// .hy-hero__cta-link__container {
-// background-color: var(--brand-main-light);
-// color: var(--grayscale-white);
-// }
-// }
-
-// &--black {
-// background-color: var(--grayscale-black);
-
-// .hy-hero__title__overlay h1 {
-// background-color: var(--grayscale-black);
-// color: transparent !important;
-// }
-
-// .hy-hero__content,
-// .hy-hero__description,
-// .hy-hero__cta-link__container {
-// background-color: var(--grayscale-black);
-// color: var(--grayscale-white);
-// }
-// }
-
-// &--white {
-// background-color: var(--grayscale-white);
-
-// .hy-hero__title__overlay h1 {
-// background-color: var(--grayscale-white);
-// color: transparent !important;
-// }
-
-// .hy-hero__content,
-// .hy-hero__description,
-// .hy-hero__cta-link__container {
-// background-color: var(--grayscale-white);
-// color: var(--grayscale-black);
-// }
-// }
-
-// &__title__container {
-// position: relative;
-
-// @include breakpoint($wide) {
-// width: 110%;
-// }
-// }
-
-// &__description {
-// // Ingress Small
-// @include font-size(16px, 24px);
-
-// color: var(--grayscale-white);
-// font-family: var(--main-font-family);
-// font-weight: 600;
-// letter-spacing: -0.1px;
-// margin: 12px 0 20px 0;
-// padding: 0;
-
-// @include breakpoint($narrow) {
-// margin: 16px 0 24px 0;
-// max-width: 87%;
-
-// // Ingress Medium
-// @include font-size(18px, 28px);
-// letter-spacing: -0.1px;
-// }
-
-// @include breakpoint($wide) {
-// @include font-size(18px, 28px);
-// letter-spacing: -0.1px;
-
-// max-width: 100%;
-// margin: 9px 0 0;
-// padding: 0 24px 20px 0;
-// }
-
-// @include breakpoint($extrawide) {
-// margin: 9px 0 0;
-// padding: 0 24px 20px 0;
-// }
-
-// @include breakpoint($xlarge) {
-// padding: 0 40px 32px 0;
-// }
-
-// // No sidebar, large desktop screens
-// &__large {
-// @include breakpoint($extrawide) {
-// padding: 0 40px 32px 0;
-// }
-
-// @include breakpoint($xlarge) {
-// padding: 0 40px 36px 0;
-// }
-// }
-// }
-
-// &__cta-link__container {
-// max-width: 100%;
-// @include breakpoint($wide) {
-// max-width: 87%;
-// }
-// }
-// }
-
-// .hy-hero__title {
-// z-index: 2;
-// }
-
-// .hy-hero__title__overlay--container {
-// left: 0;
-// opacity: 1;
-// position: absolute;
-// top: 0;
-
-// .hy-hero__title__overlay {
-// .hy-heading__container.hy-heading__container__common,
-// .hy-heading__container.sc-hy-heading-wide {
-// display: block;
-// }
-
-// h1 {
-// display: inline;
-// }
-// }
-
-// .hy-hero__title__overlay h1 {
-// box-decoration-break: clone;
-// display: inline;
-// // margin-left: -32px;
-// // padding: 16px 16px 16px 32px !important;
-
-// @include breakpoint($narrow) {
-// margin-left: -32px;
-// padding: 16px 16px 16px 32px !important;
-// }
-
-// @include breakpoint($wide) {
-// margin-left: 0;
-// padding: 16px 16px 16px 0 !important;
-// }
-// }
-// }
-
-// .hy-hero__title,
-// .hy-hero__title__overlay h1 {
-// @include font-weight($bold);
-
-// box-decoration-break: clone;
-// display: inline;
-// color: var(--grayscale-white);
-// font-family: var(--main-font-family);
-// font-weight: bold;
-// letter-spacing: -0.75px;
-// word-wrap: break-word;
-// hyphens: auto;
-// margin-bottom: 12px;
-// max-width: 100%;
-// position: relative;
-// text-transform: uppercase;
-
-// @include breakpoint($narrow) {
-// // margin-bottom: 16px;
-// }
-
-// @include breakpoint($wide) {
-// margin: 0;
-// max-width: 100%;
-// }
-// }
-
-// .hy-hero__title h1,
-// .hy-hero__title__overlay > h1 {
-// padding: 1rem;
-
-// @include breakpoint($narrow) {
-// // margin-bottom: 16px;
-// }
-
-// @include breakpoint($wide) {
-// margin: 0;
-// max-width: 100%;
-// padding: 16px 32px 16px 0;
-// }
-// @include breakpoint($extrawide) {
-// padding: 16px 32px 16px 0;
-// }
-// @include breakpoint($xlarge) {
-// padding: 16px 40px 16px 0;
-// }
-// }
--
GitLab