From eeda77d741f521c9f836563fdc791a52a97c4492 Mon Sep 17 00:00:00 2001 From: Julio Ochoa Date: Sat, 6 Mar 2021 16:05:32 -0800 Subject: [PATCH 1/5] visual change to input color. issues with size of medium and large. --- .../calcite-radio/calcite-radio.scss | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/calcite-radio/calcite-radio.scss b/src/components/calcite-radio/calcite-radio.scss index fd66d8d1dda..e73943cb091 100644 --- a/src/components/calcite-radio/calcite-radio.scss +++ b/src/components/calcite-radio/calcite-radio.scss @@ -1,8 +1,7 @@ :host { .radio { - border-radius: 100%; - box-shadow: inset 0 0 0 1px var(--calcite-ui-border-1); - cursor: pointer; + @apply rounded-full cursor-pointer border; + box-shadow: inset 0 0 0 1px var(--calcite-ui-border-input); transition: all 0.15s ease-in-out; } } @@ -14,20 +13,19 @@ } :host([disabled]) { .radio { - cursor: default; - opacity: var(--calcite-ui-opacity-disabled); + @apply cursor-default opacity-disabled; } } :host([hovered][disabled]) { .radio { - box-shadow: inset 0 0 0 1px var(--calcite-ui-border-1); + box-shadow: inset 0 0 0 1px var(--calcite-ui-border-input); } } :host([scale="s"]) { .radio { - height: 12px; - min-width: 12px; - max-width: 12px; + @apply h-3; + min-width: theme("spacing.3"); + max-width: theme("spacing.3"); } } :host([scale="s"][checked]), @@ -44,6 +42,7 @@ } :host([scale="m"]) { .radio { + //FIXME: Both figma and current code here have 14, but it's not a tailwind value height: 14px; min-width: 14px; max-width: 14px; @@ -63,6 +62,7 @@ } :host([scale="l"]) { .radio { + //FIXME: Both figma and current code here have 14, but it's not a tailwind value height: 20px; min-width: 20px; max-width: 20px; @@ -81,5 +81,5 @@ } } :host([hidden]) { - display: none; + @apply hidden; } From bfda5f2a7a98b01b195220747722ce84b813fb7c Mon Sep 17 00:00:00 2001 From: Julio Ochoa Date: Sat, 6 Mar 2021 16:13:46 -0800 Subject: [PATCH 2/5] 20px large for now. --- src/components/calcite-radio/calcite-radio.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/calcite-radio/calcite-radio.scss b/src/components/calcite-radio/calcite-radio.scss index e73943cb091..c9427266fae 100644 --- a/src/components/calcite-radio/calcite-radio.scss +++ b/src/components/calcite-radio/calcite-radio.scss @@ -63,9 +63,9 @@ :host([scale="l"]) { .radio { //FIXME: Both figma and current code here have 14, but it's not a tailwind value - height: 20px; - min-width: 20px; - max-width: 20px; + @apply h-5; + min-width: theme("spacing.5"); + max-width: theme("spacing.5"); } } :host([scale="l"][checked]), From aedfe7c7283f04961f5d69a98b14e8227247aea2 Mon Sep 17 00:00:00 2001 From: Julio Ochoa Date: Mon, 8 Mar 2021 09:41:58 -0800 Subject: [PATCH 3/5] updates from Paul/Bryan feedback --- .../calcite-radio/calcite-radio.scss | 36 ++++++++----------- 1 file changed, 15 insertions(+), 21 deletions(-) diff --git a/src/components/calcite-radio/calcite-radio.scss b/src/components/calcite-radio/calcite-radio.scss index c9427266fae..28fd3c3aad3 100644 --- a/src/components/calcite-radio/calcite-radio.scss +++ b/src/components/calcite-radio/calcite-radio.scss @@ -21,13 +21,23 @@ box-shadow: inset 0 0 0 1px var(--calcite-ui-border-input); } } + :host([scale="s"]) { - .radio { - @apply h-3; - min-width: theme("spacing.3"); - max-width: theme("spacing.3"); - } + --calcite-radio-size: theme("fontSize.-2"); +} +:host([scale="m"]) { + --calcite-radio-size: theme("fontSize.-1"); } +:host([scale="l"]) { + --calcite-radio-size: theme("fontSize.1"); +} + +.radio { + height: var(--calcite-radio-size); + max-width: var(--calcite-radio-size); + min-width: var(--calcite-radio-size); +} + :host([scale="s"][checked]), :host([hovered][scale="s"][checked][disabled]) { .radio { @@ -40,14 +50,6 @@ 0 0 0 4px var(--calcite-ui-brand); } } -:host([scale="m"]) { - .radio { - //FIXME: Both figma and current code here have 14, but it's not a tailwind value - height: 14px; - min-width: 14px; - max-width: 14px; - } -} :host([scale="m"][checked]), :host([hovered][scale="m"][checked][disabled]) { .radio { @@ -60,14 +62,6 @@ 0 0 0 4px var(--calcite-ui-brand); } } -:host([scale="l"]) { - .radio { - //FIXME: Both figma and current code here have 14, but it's not a tailwind value - @apply h-5; - min-width: theme("spacing.5"); - max-width: theme("spacing.5"); - } -} :host([scale="l"][checked]), :host([hovered][scale="l"][checked][disabled]) { .radio { From 64de0448cf0c98294af2e99d43e14bf518959ce2 Mon Sep 17 00:00:00 2001 From: Julio Ochoa Date: Mon, 8 Mar 2021 10:26:06 -0800 Subject: [PATCH 4/5] removed border, shouldn't be here. --- src/components/calcite-radio/calcite-radio.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/calcite-radio/calcite-radio.scss b/src/components/calcite-radio/calcite-radio.scss index 28fd3c3aad3..9446fe67136 100644 --- a/src/components/calcite-radio/calcite-radio.scss +++ b/src/components/calcite-radio/calcite-radio.scss @@ -1,6 +1,6 @@ :host { .radio { - @apply rounded-full cursor-pointer border; + @apply rounded-full cursor-pointer; box-shadow: inset 0 0 0 1px var(--calcite-ui-border-input); transition: all 0.15s ease-in-out; } From 29dd7ce02e97224a62fc03c34185aafa48ae5fc4 Mon Sep 17 00:00:00 2001 From: Julio Ochoa Date: Thu, 11 Mar 2021 12:54:13 -0800 Subject: [PATCH 5/5] updates from jack feedback --- src/components/calcite-radio/calcite-radio.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/calcite-radio/calcite-radio.scss b/src/components/calcite-radio/calcite-radio.scss index 9446fe67136..50edb130e61 100644 --- a/src/components/calcite-radio/calcite-radio.scss +++ b/src/components/calcite-radio/calcite-radio.scss @@ -1,8 +1,7 @@ :host { .radio { - @apply rounded-full cursor-pointer; + @apply rounded-full cursor-pointer transition-all duration-150 ease-in-out; box-shadow: inset 0 0 0 1px var(--calcite-ui-border-input); - transition: all 0.15s ease-in-out; } } :host([hovered]),