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

Update and fix missing CTA button hover/focus effects

parent 5983cb4c
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/components/cta-button/cta-button.scss
+ 97
− 28
View file @ 397df950
...@@ -15,8 +15,13 @@ ...@@ -15,8 +15,13 @@
&.transparent-background { &.transparent-background {
background-color: var(--grayscale-white); background-color: var(--grayscale-white);
border: 3px solid var(--grayscale-black);
color: var(--grayscale-black); color: var(--grayscale-black);
@include breakpoint($xlarge) {
border: 4px solid var(--grayscale-black);
}
.link-icon svg { .link-icon svg {
background-color: var(--grayscale-white); background-color: var(--grayscale-white);
fill: var(--grayscale-black); fill: var(--grayscale-black);
...@@ -29,8 +34,13 @@ ...@@ -29,8 +34,13 @@
&.black-background { &.black-background {
background-color: var(--grayscale-black); background-color: var(--grayscale-black);
border: 3px solid var(--grayscale-white);
color: var(--grayscale-white); color: var(--grayscale-white);
@include breakpoint($xlarge) {
border: 4px solid var(--grayscale-white);
}
.link-icon svg { .link-icon svg {
background-color: var(--grayscale-black); background-color: var(--grayscale-black);
fill: var(--grayscale-white); fill: var(--grayscale-white);
...@@ -39,12 +49,33 @@ ...@@ -39,12 +49,33 @@
.text { .text {
color: var(--grayscale-white); color: var(--grayscale-white);
} }
&:hover {
background-color: var(--brand-main-active);
.link-icon svg {
background-color: var(--brand-main-active);
}
}
&:focus {
background-color: var(--brand-main);
.link-icon svg {
background-color: var(--brand-main);
}
}
} }
&.blue-background { &.blue-background {
background-color: var(--brand-main-light); background-color: var(--brand-main-light);
border: 3px solid var(--grayscale-white);
color: var(--grayscale-white); color: var(--grayscale-white);
@include breakpoint($xlarge) {
border: 4px solid var(--grayscale-white);
}
.link-icon svg { .link-icon svg {
background-color: var(--brand-main-light); background-color: var(--brand-main-light);
fill: var(--grayscale-white); fill: var(--grayscale-white);
...@@ -53,19 +84,64 @@ ...@@ -53,19 +84,64 @@
.text { .text {
color: var(--grayscale-white); color: var(--grayscale-white);
} }
&:hover {
background-color: var(--brand-main);
.link-icon svg {
background-color: var(--brand-main);
}
}
&:focus {
background-color: var(--brand-main-active);
.link-icon svg {
background-color: var(--brand-main-active);
}
}
} }
&.white-background { &.white-background {
background-color: var(--brand-main-light); background-color: var(--grayscale-white);
color: var(--grayscale-white); border: 3px solid var(--brand-main-light);
color: var(--brand-main-light);
@include breakpoint($xlarge) {
border: 4px solid var(--brand-main-light);
}
.link-icon svg { .link-icon svg {
background-color: var(--brand-main-light); background-color: var(--grayscale-white);
fill: var(--grayscale-white); fill: var(--brand-main-light);
} }
.text { .text {
color: var(--grayscale-white); color: var(--brand-main-light);
}
&:hover {
border-color: var(--brand-main);
.text {
color: var(--brand-main);
}
.link-icon svg {
fill: var(--brand-main);
}
}
&:focus {
border-color: var(--brand-main-active);
.text {
color: var(--brand-main-active);
}
.link-icon svg {
fill: var(--brand-main-active);
}
} }
} }
...@@ -77,11 +153,11 @@ ...@@ -77,11 +153,11 @@
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
justify-content: center;
height: 100%; height: 100%;
justify-content: center;
max-width: 278px; max-width: 278px;
padding: 14px 12px; padding: 14px 12px;
@include breakpoint($narrow) { @include breakpoint($narrow) {
padding: 15px 16px; padding: 15px 16px;
} }
...@@ -100,10 +176,12 @@ ...@@ -100,10 +176,12 @@
@include breakpoint($narrow) { @include breakpoint($narrow) {
@include font-size(18px, 18px); //button medium @include font-size(18px, 18px); //button medium
} }
@include breakpoint($extrawide) { @include breakpoint($extrawide) {
// with sidebar on page // with sidebar on page
@include font-size(18px, 18px); //button medium @include font-size(18px, 18px); //button medium
} }
@include breakpoint($xlarge) { @include breakpoint($xlarge) {
// with sidebar on page // with sidebar on page
@include font-size(20px, 20px); //button large @include font-size(20px, 20px); //button large
...@@ -116,9 +194,11 @@ ...@@ -116,9 +194,11 @@
@include breakpoint($narrow) { @include breakpoint($narrow) {
margin-left: 10px; //button medium margin-left: 10px; //button medium
} }
@include breakpoint($extrawide) { @include breakpoint($extrawide) {
margin-left: 10px; //button medium margin-left: 10px; //button medium
} }
@include breakpoint($xlarge) { @include breakpoint($xlarge) {
margin-left: 12px; //button large margin-left: 12px; //button large
} }
...@@ -132,11 +212,13 @@ ...@@ -132,11 +212,13 @@
height: 18px; height: 18px;
width: 18px; width: 18px;
} }
@include breakpoint($extrawide) { @include breakpoint($extrawide) {
//button medium //button medium
height: 18px; height: 18px;
width: 18px; width: 18px;
} }
@include breakpoint($xlarge) { @include breakpoint($xlarge) {
//button large //button large
height: 22px; height: 22px;
...@@ -145,25 +227,6 @@ ...@@ -145,25 +227,6 @@
} }
} }
} }
&.blue-background,
&.black-background {
border: 3px solid var(--grayscale-white);
@include breakpoint($xlarge) {
border: 4px solid var(--grayscale-white);
}
}
&.transparent-background {
border: 3px solid var(--grayscale-black);
@include breakpoint($xlarge) {
border: 4px solid var(--grayscale-black);
}
}
&.white-background {
border: none;
}
} }
.hy-cta-button.large { .hy-cta-button.large {
...@@ -194,13 +257,19 @@ ...@@ -194,13 +257,19 @@
&.blue-background, &.blue-background,
&.black-background { &.black-background {
@include breakpoint($extrawide) { @include breakpoint($extrawide) {
border: 4px solid var(--grayscale-white); border-width: 4px;
} }
} }
&.transparent-background { &.transparent-background {
@include breakpoint($extrawide) { @include breakpoint($extrawide) {
border: 4px solid var(--grayscale-black); border-width: 4px;
}
}
&.white-background {
@include breakpoint($extrawide) {
border-width: 4px;
} }
} }
} }
src/components/hy-hero/hy-hero.tsx
+ 2
− 2
View file @ 397df950
...@@ -80,8 +80,8 @@ export class HyHero { ...@@ -80,8 +80,8 @@ export class HyHero {
if (this.colorVariant == HeroColorVariant.black) { if (this.colorVariant == HeroColorVariant.black) {
variant = CtaLinkButtonVariants.onBlackBkgd; variant = CtaLinkButtonVariants.onBlackBkgd;
} else if (this.colorVariant == HeroColorVariant.white) { } else if (this.colorVariant == HeroColorVariant.white || this.colorVariant == HeroColorVariant.fp_white) {
variant = CtaLinkButtonVariants.onTransparentBkgd; variant = CtaLinkButtonVariants.onWhiteBkgd;
} }
return ( return (
......
src/components/hy-hero/readme.md
+ 11
− 11
View file @ 397df950
...@@ -4,17 +4,17 @@ ...@@ -4,17 +4,17 @@
## Properties ## Properties
| Property | Attribute | Description | Type | Default | | Property | Attribute | Description | Type | Default |
| -------------- | --------------- | ----------- | --------------------------------------------------------------------------- | ----------------------- | | -------------- | --------------- | ----------- | -------------------------------------------------------------------------------------------------------- | ----------------------- |
| `colorVariant` | `color-variant` | | `HeroColorVariant.black \| HeroColorVariant.blue \| HeroColorVariant.white` | `HeroColorVariant.blue` | | `colorVariant` | `color-variant` | | `HeroColorVariant.black \| HeroColorVariant.blue \| HeroColorVariant.fp_white \| HeroColorVariant.white` | `HeroColorVariant.blue` |
| `description` | `description` | | `string` | `undefined` | | `description` | `description` | | `string` | `undefined` |
| `headerstyle` | `headerstyle` | | `string` | `'common'` | | `headerstyle` | `headerstyle` | | `string` | `'common'` |
| `heading` | `heading` | | `string` | `undefined` | | `heading` | `heading` | | `string` | `undefined` |
| `image` | `image` | | `string` | `undefined` | | `image` | `image` | | `string` | `undefined` |
| `isExternal` | `is-external` | | `boolean` | `false` | | `isExternal` | `is-external` | | `boolean` | `false` |
| `scLabel` | `sc-label` | | `string` | `undefined` | | `scLabel` | `sc-label` | | `string` | `undefined` |
| `url` | `url` | | `string` | `undefined` | | `url` | `url` | | `string` | `undefined` |
| `urlTitle` | `url-title` | | `string` | `undefined` | | `urlTitle` | `url-title` | | `string` | `undefined` |
## Dependencies ## Dependencies
......
src/utils/utils.ts
+ 1
− 0
View file @ 397df950
...@@ -182,6 +182,7 @@ export enum HeroColorVariant { ...@@ -182,6 +182,7 @@ export enum HeroColorVariant {
blue = 'blue', blue = 'blue',
black = 'black', black = 'black',
white = 'white', white = 'white',
fp_white = 'fp_white',
} }
export enum FooterLinkItemColor { export enum FooterLinkItemColor {
......
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