Skip to content

Commit

Permalink
fix: make Radio build again
Browse files Browse the repository at this point in the history
  • Loading branch information
@lazd @GarthDB
lazd authored and GarthDB committed Dec 1, 2020
1 parent 7873da0 commit 6dcde84
Show file tree
Hide file tree
Showing 2 changed files with 37 additions and 29 deletions.
12 changes: 10 additions & 2 deletions components/radio/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,17 @@ OF ANY KIND, either express or implied. See the License for the specific languag
governing permissions and limitations under the License.
*/

@import "../commons/index.css";
@import "../vars/css/scales/spectrum-medium.css";
@import "../vars/css/scales/spectrum-large.css";
@import "../vars/css/components/spectrum-radio.css";

.spectrum-Radio {
@remapvars {
find: /--spectrum-radio-m(.*)/;
filter: color;
replace: --spectrum-radio$1;
}

:root {
--spectrum-radio-radius: calc(var(--spectrum-radio-circle-diameter) / 2);
--spectrum-radio-border-width-checked: calc(
calc(var(--spectrum-radio-circle-diameter) / 2) -
Expand Down
54 changes: 27 additions & 27 deletions components/radio/skin.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,29 +11,29 @@ governing permissions and limitations under the License.

:root {
/* todo: fix in DNA */
--spectrum-radio-emphasized-circle-border-color-selected-key-focus: var(
--spectrum-radio-emphasized-circle-border-color-selected-hover
--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus: var(
--spectrum-radio-m-emphasized-circle-border-color-selected-hover
);
}

.spectrum-Radio-input {
&:checked + .spectrum-Radio-button {
&:before {
border-color: var(
--spectrum-radio-circle-border-color-selected
--spectrum-radio-m-circle-border-color-selected
);
}
}
}

.spectrum-Radio-label {
color: var(--spectrum-radio-text-color);
color: var(--spectrum-radio-m-text-color);
}

.spectrum-Radio-button {
&:before {
background-color: var(--spectrum-radio-circle-background-color);
border-color: var(--spectrum-radio-circle-border-color);
background-color: var(--spectrum-radio-m-circle-background-color);
border-color: var(--spectrum-radio-m-circle-border-color);
}
}

Expand All @@ -42,7 +42,7 @@ governing permissions and limitations under the License.
.spectrum-Radio-button {
&:before {
border-color: var(
--spectrum-radio-circle-border-color-hover
--spectrum-radio-m-circle-border-color-hover
);
box-shadow: none;
}
Expand All @@ -51,33 +51,33 @@ governing permissions and limitations under the License.
.spectrum-Radio-input:checked + .spectrum-Radio-button {
&:before {
border-color: var(
--spectrum-radio-circle-border-color-selected-hover
--spectrum-radio-m-circle-border-color-selected-hover
);
}
}

.spectrum-Radio-label {
color: var(--spectrum-radio-text-color-hover);
color: var(--spectrum-radio-m-text-color-hover);
}
}

&:active {
.spectrum-Radio-button {
&:before {
border-color: var(--spectrum-radio-circle-border-color-down);
border-color: var(--spectrum-radio-m-circle-border-color-down);
}
}

.spectrum-Radio-input:checked + .spectrum-Radio-button {
&:before {
border-color: var(
--spectrum-radio-circle-border-color-selected-down
--spectrum-radio-m-circle-border-color-selected-down
);
}
}

.spectrum-Radio-label {
color: var(--spectrum-radio-text-color-down);
color: var(--spectrum-radio-m-text-color-down);
}
}
}
Expand All @@ -86,15 +86,15 @@ governing permissions and limitations under the License.
.spectrum-Radio-input:checked + .spectrum-Radio-button {
&:before {
border-color: var(
--spectrum-radio-emphasized-circle-border-color-selected
--spectrum-radio-m-emphasized-circle-border-color-selected
);
}
}
&:hover {
.spectrum-Radio-input:checked + .spectrum-Radio-button {
&:before {
border-color: var(
--spectrum-radio-emphasized-circle-border-color-selected-hover
--spectrum-radio-m-emphasized-circle-border-color-selected-hover
);
}
}
Expand All @@ -103,7 +103,7 @@ governing permissions and limitations under the License.
.spectrum-Radio-input:checked + .spectrum-Radio-button {
&:before {
border-color: var(
--spectrum-radio-emphasized-circle-border-color-selected-down
--spectrum-radio-m-emphasized-circle-border-color-selected-down
);
}
}
Expand All @@ -116,37 +116,37 @@ governing permissions and limitations under the License.
.spectrum-Radio-input + .spectrum-Radio-button {
&:before {
border-color: var(
--spectrum-radio-emphasized-circle-border-color-error-hover
--spectrum-radio-m-emphasized-circle-border-color-error-hover
);
}
}
.spectrum-Radio-label {
color: var(--spectrum-radio-emphasized-text-color-error-hover);
color: var(--spectrum-radio-m-emphasized-text-color-error-hover);
}
}
&.is-invalid:active {
.spectrum-Radio-input + .spectrum-Radio-button {
&:before {
border-color: var(
--spectrum-radio-emphasized-circle-border-color-error-down
--spectrum-radio-m-emphasized-circle-border-color-error-down
);
}
}
.spectrum-Radio-label {
color: var(--spectrum-radio-emphasized-text-color-error-down);
color: var(--spectrum-radio-m-emphasized-text-color-error-down);
}
}
&.is-invalid {
.spectrum-Radio-button,
.spectrum-Radio-input:checked + .spectrum-Radio-button {
&:before {
border-color: var(
--spectrum-radio-emphasized-circle-border-color-error
--spectrum-radio-m-emphasized-circle-border-color-error
);
}
}
.spectrum-Radio-label {
color: var(--spectrum-radio-emphasized-text-color-error);
color: var(--spectrum-radio-m-emphasized-text-color-error);
}
}
}
Expand All @@ -156,13 +156,13 @@ governing permissions and limitations under the License.
&:disabled + .spectrum-Radio-button {
&:before {
border-color: var(
--spectrum-radio-emphasized-circle-border-color-disabled
--spectrum-radio-m-emphasized-circle-border-color-disabled
);
}
}

&:disabled ~ .spectrum-Radio-label {
color: var(--spectrum-radio-emphasized-text-color-disabled);
color: var(--spectrum-radio-m-emphasized-text-color-disabled);
}
}

Expand All @@ -173,17 +173,17 @@ governing permissions and limitations under the License.
&:hover .spectrum-Radio-input:focus-ring {
& + .spectrum-Radio-button {
&:before {
border-color: var(--spectrum-radio-circle-border-color-key-focus);
border-color: var(--spectrum-radio-m-circle-border-color-key-focus);
}
&:after {
box-shadow: 0 0 0 var(--spectrum-radio-focus-ring-size-key-focus)
var(--spectrum-radio-focus-ring-color-key-focus);
box-shadow: 0 0 0 var(--spectrum-radio-m-focus-ring-size-key-focus)
var(--spectrum-radio-m-focus-ring-color-key-focus);
}
}
&:checked + .spectrum-Radio-button {
&:before {
border-color: var(
--spectrum-radio-emphasized-circle-border-color-selected-key-focus
--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus
);
}
}
Expand Down

0 comments on commit 6dcde84

Please sign in to comment.