From 78c10a18d9bb4b24f33ce78fcc49c68bce01ebbd Mon Sep 17 00:00:00 2001 From: Debra Toranska Date: Mon, 16 Oct 2023 16:22:19 +0100 Subject: [PATCH] style(button-toggle): amend styles --- .../button-toggle/button-toggle.style.ts | 99 +------------------ 1 file changed, 2 insertions(+), 97 deletions(-) diff --git a/src/components/button-toggle/button-toggle.style.ts b/src/components/button-toggle/button-toggle.style.ts index 12b3ffee14..369ea5a5b6 100644 --- a/src/components/button-toggle/button-toggle.style.ts +++ b/src/components/button-toggle/button-toggle.style.ts @@ -136,13 +136,7 @@ const StyledButtonToggle = styled.button` } } cursor: not-allowed; - `} - -<<<<<<< HEAD - -======= -<<<<<<< HEAD -<<<<<<< HEAD + `}s & ${StyledIcon} { color: var(--colorsActionMinor500); @@ -180,15 +174,8 @@ const StyledButtonToggle = styled.button` 0px 0px 0px var(--borderWidth600) var(--colorsUtilityYin090); } } -======= - ${({ variant }) => - variant === "minor" && - css` -======= ->>>>>>> 0a84e5447 (feat(button-toggle): rm variant prop) ->>>>>>> df20abe7b (feat(button-toggle): rm variant prop) - & ${StyledIcon} { + & ${StyledIcon} { color: var(--colorsActionMinor500); :not([aria-pressed="true"]):not(:disabled):hover { color: var(--colorsActionMinorYang100); @@ -214,36 +201,6 @@ const StyledButtonToggle = styled.button` color: var(--colorsActionMinorYang100); } } - -<<<<<<< HEAD -======= -<<<<<<< HEAD - &[aria-pressed="true"]:not(:hover) { - box-shadow: inset 0px 0px 0px 3px var(--colorsActionMinor500); - background-color: transparent; - :focus { - box-shadow: inset 0px 0px 0px 3px var(--colorsActionMinor500), - 0px 0px 0px var(--borderWidth300) var(--colorsSemanticFocus500), - 0px 0px 0px var(--borderWidth600) var(--colorsUtilityYin090); - } - } - `} ->>>>>>> 8c445eebb (feat(button-toggle): add minor child) -======= ->>>>>>> df20abe7b (feat(button-toggle): rm variant prop) - &[aria-pressed="true"]:not(:hover) { - box-shadow: inset 0px 0px 0px 3px var(--colorsActionMinor500); - background-color: transparent; - :focus { - box-shadow: inset 0px 0px 0px 3px var(--colorsActionMinor500), - 0px 0px 0px var(--borderWidth300) var(--colorsSemanticFocus500), - 0px 0px 0px var(--borderWidth600) var(--colorsUtilityYin090); - } - } -<<<<<<< HEAD -======= ->>>>>>> 0a84e5447 (feat(button-toggle): rm variant prop) ->>>>>>> df20abe7b (feat(button-toggle): rm variant prop) `; const iconFontSizes = { @@ -295,21 +252,7 @@ const StyledButtonToggleWrapper = styled.div` css` &&&& { ${StyledButtonToggle} { -<<<<<<< HEAD border-radius: var(--borderRadius050); -======= -<<<<<<< HEAD -<<<<<<< HEAD - border-radius: var(--borderRadius050); -======= - border-radius: ${variant === "minor" - ? "var(--borderRadius050)" - : "var(--borderRadius400)"}; ->>>>>>> 8c445eebb (feat(button-toggle): add minor child) -======= - border-radius: var(--borderRadius050); ->>>>>>> 0a84e5447 (feat(button-toggle): rm variant prop) ->>>>>>> df20abe7b (feat(button-toggle): rm variant prop) } } `} @@ -319,53 +262,15 @@ const StyledButtonToggleWrapper = styled.div` &&&& { :first-of-type { ${StyledButtonToggle} { -<<<<<<< HEAD - border-top-left-radius: var(--borderRadius050); - border-bottom-left-radius: var(--borderRadius050); -======= -<<<<<<< HEAD -<<<<<<< HEAD - border-top-left-radius: var(--borderRadius050); - border-bottom-left-radius: var(--borderRadius050); -======= - border-top-left-radius: ${variant === "minor" - ? "var(--borderRadius050)" - : "var(--borderRadius400)"}; - border-bottom-left-radius: ${variant === "minor" - ? "var(--borderRadius050)" - : "var(--borderRadius400)"}; ->>>>>>> 8c445eebb (feat(button-toggle): add minor child) -======= border-top-left-radius: var(--borderRadius050); border-bottom-left-radius: var(--borderRadius050); ->>>>>>> 0a84e5447 (feat(button-toggle): rm variant prop) ->>>>>>> df20abe7b (feat(button-toggle): rm variant prop) } } :last-of-type { ${StyledButtonToggle} { -<<<<<<< HEAD - border-top-right-radius: var(--borderRadius050); - border-bottom-right-radius: var(--borderRadius050); -======= -<<<<<<< HEAD -<<<<<<< HEAD - border-top-right-radius: var(--borderRadius050); - border-bottom-right-radius: var(--borderRadius050); -======= - border-top-right-radius: ${variant === "minor" - ? "var(--borderRadius050)" - : "var(--borderRadius400)"}; - border-bottom-right-radius: ${variant === "minor" - ? "var(--borderRadius050)" - : "var(--borderRadius400)"}; ->>>>>>> 8c445eebb (feat(button-toggle): add minor child) -======= border-top-right-radius: var(--borderRadius050); border-bottom-right-radius: var(--borderRadius050); ->>>>>>> 0a84e5447 (feat(button-toggle): rm variant prop) ->>>>>>> df20abe7b (feat(button-toggle): rm variant prop) } } }