From a597c7ff532cc5a3fc19b4d642bc1662ebb14281 Mon Sep 17 00:00:00 2001 From: Chris Van Patten Date: Fri, 10 Aug 2018 09:06:13 -0500 Subject: [PATCH 1/2] Apply new checkbox CSS to radio buttons w/ border-radius fix; fixes #8833 --- edit-post/assets/stylesheets/main.scss | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/edit-post/assets/stylesheets/main.scss b/edit-post/assets/stylesheets/main.scss index 77668e03e32e43..7c1ce2af4edc6f 100644 --- a/edit-post/assets/stylesheets/main.scss +++ b/edit-post/assets/stylesheets/main.scss @@ -175,9 +175,9 @@ body.gutenberg-editor-page { } } - input[type="checkbox"] { + input[type="checkbox"], + input[type="radio"] { border: $border-width + 1 solid $dark-gray-300; - border-radius: $radius-round-rectangle / 2; margin-right: 12px; transition: none; @@ -194,12 +194,25 @@ body.gutenberg-editor-page { &:checked:focus { box-shadow: 0 0 0 2px $dark-gray-500; } + } + + input[type="checkbox"] { + border-radius: $radius-round-rectangle / 2; &::before { margin: -4px 0 0 -5px; color: $white; } } + + input[type="radio"] { + border-radius: 50%; + + &::before { + margin: 3px 0 0 3px; + background-color: $white; + } + } } // Placeholder colors From 3bfb736f94de1e6c1a5ff28d6ffbc45bf24953d2 Mon Sep 17 00:00:00 2001 From: Chris Van Patten Date: Fri, 10 Aug 2018 10:06:05 -0500 Subject: [PATCH 2/2] Use $round-radius instead of 50% --- edit-post/assets/stylesheets/main.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/edit-post/assets/stylesheets/main.scss b/edit-post/assets/stylesheets/main.scss index 7c1ce2af4edc6f..fbc3062666e880 100644 --- a/edit-post/assets/stylesheets/main.scss +++ b/edit-post/assets/stylesheets/main.scss @@ -206,7 +206,7 @@ body.gutenberg-editor-page { } input[type="radio"] { - border-radius: 50%; + border-radius: $radius-round; &::before { margin: 3px 0 0 3px;