Skip to content
Snippets Groups Projects
Commit e5d82b07 authored by shamalainen's avatar shamalainen
Browse files

Update white hero variant styles and clean up code

parent 789f9f0b
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/components/hy-hero/hy-hero.scss
+ 54
− 346
View file @ e5d82b07
......@@ -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;
// }
// }
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment