-
Notifications
You must be signed in to change notification settings - Fork 4.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Update hard-coded border-radius instances #64693
Changes from all commits
fbf46e2
27f0a1e
1b23acd
a5baad4
e26df2c
bf46768
d396f4d
9a71ac5
be65f60
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -553,7 +553,6 @@ svg { | |
background-color: #1e1e1e; | ||
color: #fff; | ||
margin: $grid-unit-10 0 0 24px; | ||
border-radius: 2px; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Radius here is inherited from the |
||
height: 24px; | ||
min-width: 24px; | ||
padding: 0; | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -48,7 +48,7 @@ $components-custom-gradient-picker__padding: $grid-unit-20; // 48px container, 1 | |
height: inherit; | ||
width: inherit; | ||
min-width: $grid-unit-20; | ||
border-radius: 50%; | ||
border-radius: $radius-round; | ||
|
||
background: $white; | ||
padding: 2px; | ||
|
@@ -65,7 +65,7 @@ $components-custom-gradient-picker__padding: $grid-unit-20; // 48px container, 1 | |
// Same size as the .components-custom-gradient-picker__control-point-dropdown parent | ||
height: inherit; | ||
width: inherit; | ||
border-radius: 50%; | ||
border-radius: $radius-round; | ||
padding: 0; | ||
|
||
// Shadow and stroke. | ||
|
@@ -100,25 +100,6 @@ $components-custom-gradient-picker__padding: $grid-unit-20; // 48px container, 1 | |
height: 20px; | ||
} | ||
|
||
.components-custom-gradient-picker .components-custom-gradient-picker__toolbar { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This class doesn't seem to be used at all. |
||
border: none; | ||
|
||
// Work-around to target the inner button containers rendered by <ToolbarGroup /> | ||
> div + div { | ||
margin-left: 1px; | ||
} | ||
|
||
button { | ||
&.is-pressed { | ||
> svg { | ||
background: $white; | ||
border: $border-width solid $gray-600; | ||
border-radius: 2px; | ||
} | ||
} | ||
} | ||
} | ||
|
||
.components-custom-gradient-picker__ui-line { | ||
position: relative; | ||
z-index: 0; | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -102,7 +102,6 @@ | |
&.is-error { | ||
.components-form-token-field__token-text { | ||
color: $alert-red; | ||
border-radius: 4px 0 0 4px; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Agreed — also, I don't see why there should be a different radius (4px) compared to the default (2px) |
||
padding: 0 4px 0 6px; | ||
} | ||
} | ||
|
@@ -133,7 +132,7 @@ | |
} | ||
|
||
.components-form-token-field__token-text { | ||
border-radius: 2px 0 0 2px; | ||
border-radius: $radius-x-small 0 0 $radius-x-small; | ||
padding: 0 0 0 8px; | ||
white-space: nowrap; | ||
overflow: hidden; | ||
|
@@ -142,7 +141,7 @@ | |
|
||
.components-form-token-field__remove-token.components-button { | ||
cursor: pointer; | ||
border-radius: 0 2px 2px 0; | ||
border-radius: 0 $radius-x-small $radius-x-small 0; | ||
ciampo marked this conversation as resolved.
Show resolved
Hide resolved
|
||
padding: 0 2px; | ||
color: $gray-900; | ||
line-height: 10px; | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -28,7 +28,7 @@ $resize-handler-container-size: $resize-handler-size + ($grid-unit-05 * 2); // M | |
content: ""; | ||
width: $resize-handler-size; | ||
height: $resize-handler-size; | ||
border-radius: 50%; | ||
border-radius: $radius-round; | ||
background: $white; | ||
cursor: inherit; | ||
position: absolute; | ||
|
@@ -43,7 +43,7 @@ $resize-handler-container-size: $resize-handler-size + ($grid-unit-05 * 2); // M | |
// This is the "visible" resize handle for side handles - the line | ||
.components-resizable-box__side-handle::before { | ||
display: block; | ||
border-radius: 2px; | ||
border-radius: $radius-full; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Ensures the handle is fully rounded regardless of any future width/height changes. |
||
content: ""; | ||
width: 3px; | ||
height: 3px; | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -89,7 +89,6 @@ | |
} | ||
|
||
&:focus-visible { | ||
border-radius: 2px; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Keeping or removing the radius is totally a design decision, but I think that whatever we decide should likely be applied to There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Done! |
||
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent; | ||
|
||
// Windows high contrast mode. | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The radius here is already added to the parent element.