From 515219ea3f2c7470977a540551e1e75b6c00942b Mon Sep 17 00:00:00 2001 From: alflennik Date: Wed, 12 Apr 2023 13:47:45 -0400 Subject: [PATCH 1/2] Fix issue 2650 --- .../patterns/button/examples/css/button.css | 78 ++++++++++--------- 1 file changed, 42 insertions(+), 36 deletions(-) diff --git a/content/patterns/button/examples/css/button.css b/content/patterns/button/examples/css/button.css index 6fb2da8304..dd8e210037 100644 --- a/content/patterns/button/examples/css/button.css +++ b/content/patterns/button/examples/css/button.css @@ -8,21 +8,23 @@ color: #fff; text-shadow: 0 -1px 1px hsl(216deg 27% 25%); background-color: hsl(216deg 82% 51%); - background-image: linear-gradient( - to bottom, - hsl(216deg 82% 53%), - hsl(216deg 82% 47%) - ); + background-image: + linear-gradient( + to bottom, + hsl(216deg 82% 53%), + hsl(216deg 82% 47%) + ); } [role="button"]:hover { border-color: hsl(213deg 71% 29%); background-color: hsl(216deg 82% 31%); - background-image: linear-gradient( - to bottom, - hsl(216deg 82% 33%), - hsl(216deg 82% 27%) - ); + background-image: + linear-gradient( + to bottom, + hsl(216deg 82% 33%), + hsl(216deg 82% 27%) + ); cursor: default; } @@ -32,7 +34,6 @@ [role="button"]:focus::before { position: absolute; - z-index: -1; /* button border width - outline width - offset */ top: calc(-1px - 3px - 3px); @@ -49,11 +50,12 @@ [role="button"]:active { border-color: hsl(213deg 71% 49%); background-color: hsl(216deg 82% 31%); - background-image: linear-gradient( - to bottom, - hsl(216deg 82% 53%), - hsl(216deg 82% 47%) - ); + background-image: + linear-gradient( + to bottom, + hsl(216deg 82% 53%), + hsl(216deg 82% 47%) + ); box-shadow: inset 0 3px 5px 1px hsl(216deg 82% 30%); } @@ -62,21 +64,23 @@ box-shadow: 0 1px 2px hsl(261deg 27% 55%); text-shadow: 0 -1px 1px hsl(261deg 27% 25%); background-color: hsl(261deg 82% 51%); - background-image: linear-gradient( - to bottom, - hsl(261deg 82% 53%), - hsl(261deg 82% 47%) - ); + background-image: + linear-gradient( + to bottom, + hsl(261deg 82% 53%), + hsl(261deg 82% 47%) + ); } [role="button"][aria-pressed]:hover { border-color: hsl(261deg 71% 29%); background-color: hsl(261deg 82% 31%); - background-image: linear-gradient( - to bottom, - hsl(261deg 82% 33%), - hsl(261deg 82% 27%) - ); + background-image: + linear-gradient( + to bottom, + hsl(261deg 82% 33%), + hsl(261deg 82% 27%) + ); } [role="button"][aria-pressed="true"] { @@ -84,22 +88,24 @@ padding-bottom: 0.3em; border-color: hsl(261deg 71% 49%); background-color: hsl(261deg 82% 31%); - background-image: linear-gradient( - to bottom, - hsl(261deg 82% 63%), - hsl(261deg 82% 57%) - ); + background-image: + linear-gradient( + to bottom, + hsl(261deg 82% 63%), + hsl(261deg 82% 57%) + ); box-shadow: inset 0 3px 5px 1px hsl(261deg 82% 30%); } [role="button"][aria-pressed="true"]:hover { border-color: hsl(261deg 71% 49%); background-color: hsl(261deg 82% 31%); - background-image: linear-gradient( - to bottom, - hsl(261deg 82% 43%), - hsl(261deg 82% 37%) - ); + background-image: + linear-gradient( + to bottom, + hsl(261deg 82% 43%), + hsl(261deg 82% 37%) + ); box-shadow: inset 0 3px 5px 1px hsl(261deg 82% 20%); } From a82c7c1c430c2dd2af8087d73d0c2f680b8cb60a Mon Sep 17 00:00:00 2001 From: alflennik Date: Wed, 12 Apr 2023 13:56:19 -0400 Subject: [PATCH 2/2] Run latest prettier over button.css --- .../patterns/button/examples/css/button.css | 77 +++++++++---------- 1 file changed, 35 insertions(+), 42 deletions(-) diff --git a/content/patterns/button/examples/css/button.css b/content/patterns/button/examples/css/button.css index dd8e210037..e6b7c5519b 100644 --- a/content/patterns/button/examples/css/button.css +++ b/content/patterns/button/examples/css/button.css @@ -8,23 +8,21 @@ color: #fff; text-shadow: 0 -1px 1px hsl(216deg 27% 25%); background-color: hsl(216deg 82% 51%); - background-image: - linear-gradient( - to bottom, - hsl(216deg 82% 53%), - hsl(216deg 82% 47%) - ); + background-image: linear-gradient( + to bottom, + hsl(216deg 82% 53%), + hsl(216deg 82% 47%) + ); } [role="button"]:hover { border-color: hsl(213deg 71% 29%); background-color: hsl(216deg 82% 31%); - background-image: - linear-gradient( - to bottom, - hsl(216deg 82% 33%), - hsl(216deg 82% 27%) - ); + background-image: linear-gradient( + to bottom, + hsl(216deg 82% 33%), + hsl(216deg 82% 27%) + ); cursor: default; } @@ -50,12 +48,11 @@ [role="button"]:active { border-color: hsl(213deg 71% 49%); background-color: hsl(216deg 82% 31%); - background-image: - linear-gradient( - to bottom, - hsl(216deg 82% 53%), - hsl(216deg 82% 47%) - ); + background-image: linear-gradient( + to bottom, + hsl(216deg 82% 53%), + hsl(216deg 82% 47%) + ); box-shadow: inset 0 3px 5px 1px hsl(216deg 82% 30%); } @@ -64,23 +61,21 @@ box-shadow: 0 1px 2px hsl(261deg 27% 55%); text-shadow: 0 -1px 1px hsl(261deg 27% 25%); background-color: hsl(261deg 82% 51%); - background-image: - linear-gradient( - to bottom, - hsl(261deg 82% 53%), - hsl(261deg 82% 47%) - ); + background-image: linear-gradient( + to bottom, + hsl(261deg 82% 53%), + hsl(261deg 82% 47%) + ); } [role="button"][aria-pressed]:hover { border-color: hsl(261deg 71% 29%); background-color: hsl(261deg 82% 31%); - background-image: - linear-gradient( - to bottom, - hsl(261deg 82% 33%), - hsl(261deg 82% 27%) - ); + background-image: linear-gradient( + to bottom, + hsl(261deg 82% 33%), + hsl(261deg 82% 27%) + ); } [role="button"][aria-pressed="true"] { @@ -88,24 +83,22 @@ padding-bottom: 0.3em; border-color: hsl(261deg 71% 49%); background-color: hsl(261deg 82% 31%); - background-image: - linear-gradient( - to bottom, - hsl(261deg 82% 63%), - hsl(261deg 82% 57%) - ); + background-image: linear-gradient( + to bottom, + hsl(261deg 82% 63%), + hsl(261deg 82% 57%) + ); box-shadow: inset 0 3px 5px 1px hsl(261deg 82% 30%); } [role="button"][aria-pressed="true"]:hover { border-color: hsl(261deg 71% 49%); background-color: hsl(261deg 82% 31%); - background-image: - linear-gradient( - to bottom, - hsl(261deg 82% 43%), - hsl(261deg 82% 37%) - ); + background-image: linear-gradient( + to bottom, + hsl(261deg 82% 43%), + hsl(261deg 82% 37%) + ); box-shadow: inset 0 3px 5px 1px hsl(261deg 82% 20%); }