diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss index ee617699e2354f..dc8968dab8daa7 100644 --- a/packages/base-styles/_mixins.scss +++ b/packages/base-styles/_mixins.scss @@ -358,20 +358,26 @@ margin-right: $grid-unit-15; transition: none; border-radius: $radius-round; + width: $radio-input-size-sm; + height: $radio-input-size-sm; + + @include break-small() { + height: $radio-input-size; + width: $radio-input-size; + } &:checked::before { - width: 7px; - height: 7px; - margin: 8px 0 0 8px; + width: 8px; + height: 8px; + transform: translate(7px, 7px); + margin: 0; background-color: $white; // This border serves as a background color in Windows High Contrast mode. - border: 3px solid $white; + border: 4px solid $white; - @include break-medium() { - width: 6px; - height: 6px; - margin: 4px 0 0 4px; + @include break-small() { + transform: translate(5px, 5px); } } diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss index ef9731168a52f4..f50a31d426f622 100644 --- a/packages/base-styles/_variables.scss +++ b/packages/base-styles/_variables.scss @@ -19,6 +19,8 @@ $border-width: 1px; $border-width-focus: 1.5px; $border-width-tab: 4px; $helptext-font-size: 12px; +$radio-input-size: 20px; +$radio-input-size-sm: 24px; // Width & height for small viewports. /** * Grid System. diff --git a/packages/editor/src/components/post-visibility/style.scss b/packages/editor/src/components/post-visibility/style.scss index 78eddc859e6ac2..d43341ac3d1289 100644 --- a/packages/editor/src/components/post-visibility/style.scss +++ b/packages/editor/src/components/post-visibility/style.scss @@ -21,16 +21,19 @@ .editor-post-visibility__dialog-info { margin-top: 0; - margin-left: 28px; + margin-left: $grid-unit-40; } // Remove bottom margin on the last label only. .editor-post-visibility__choice:last-child .editor-post-visibility__dialog-info { margin-bottom: 0; } +} +.editor-post-visibility__dialog-password { .editor-post-visibility__dialog-password-input[type="text"] { @include input-control; - margin-left: 28px; + margin-left: $grid-unit * 4.5; + margin-top: $grid-unit-10; } }