Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Remove Gutenberg form control resets and include the styles in the components #22596

Merged
merged 1 commit into from
May 29, 2020
Merged

Remove Gutenberg form control resets and include the styles in the components #22596

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
267 changes: 121 additions & 146 deletions packages/base-styles/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -238,188 +238,163 @@

}

/**
* Reset default styles for JavaScript UI based pages.
* This is a WP-admin agnostic reset
*/
@mixin reset {
box-sizing: border-box;

*,
*::before,
*::after {
box-sizing: inherit;
}

.input-control, // Upstream name is `.regular-text`.
input[type="text"],
input[type="search"],
input[type="radio"],
input[type="tel"],
input[type="time"],
input[type="url"],
input[type="week"],
input[type="password"],
input[type="checkbox"],
input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
select,
textarea {
font-family: $default-font;
padding: 6px 8px;
@include input-style__neutral();

/* Fonts smaller than 16px causes mobile safari to zoom. */
font-size: $mobile-text-min-font-size;
@mixin input-control {
font-family: $default-font;
padding: 6px 8px;
@include input-style__neutral();

/* Fonts smaller than 16px causes mobile safari to zoom. */
font-size: $mobile-text-min-font-size;
/* Override core line-height. To be reviewed. */
line-height: normal;
@include break-small {
font-size: $default-font-size;
/* Override core line-height. To be reviewed. */
line-height: normal;
@include break-small {
font-size: $default-font-size;
/* Override core line-height. To be reviewed. */
line-height: normal;
}

&:focus {
@include input-style__focus();
}
}

input[type="number"] {
padding-left: 4px;
padding-right: 4px;
&:focus {
@include input-style__focus();
}

select {
padding: 3px 24px 3px 8px;
font-size: $default-font-size;
color: $dark-gray-500;
// Use opacity to work in various editor styles.
&::-webkit-input-placeholder {
color: $dark-opacity-300;
}

&:focus {
border-color: $blue-medium-600;
// Windows High Contrast mode will show this outline
outline: 2px solid transparent;
outline-offset: 0;
}
&::-moz-placeholder {
opacity: 1; // Necessary because Firefox reduces this from 1.
color: $dark-opacity-300;
}

input[type="checkbox"],
input[type="radio"] {
border: $border-width + 1 solid $medium-gray-text;
margin-right: $grid-unit-15;
transition: none;
&:-ms-input-placeholder {
color: $dark-opacity-300;
}

&:focus {
border-color: $medium-gray-text;
box-shadow: 0 0 0 1px $medium-gray-text;
.is-dark-theme & {
&::-webkit-input-placeholder {
color: $light-opacity-300;
}

&:checked {
background: theme(toggle);
border-color: theme(toggle);
&::-moz-placeholder {
opacity: 1; // Necessary because Firefox reduces this from 1.
color: $light-opacity-300;
}

&:checked:focus {
box-shadow: 0 0 0 $border-width-focus $medium-gray-text;
&:-ms-input-placeholder {
color: $light-opacity-300;
}
}
}

input[type="checkbox"] {
border-radius: $radius-block-ui;
@mixin checkbox-control {
@include input-control;
border: $border-width + 1 solid $medium-gray-text;
margin-right: $grid-unit-15;
transition: none;
border-radius: $radius-block-ui;

&:checked::before,
&[aria-checked="mixed"]::before {
margin: -3px -5px;
color: $white;
&:focus {
border-color: $medium-gray-text;
box-shadow: 0 0 0 1px $medium-gray-text;
}

@include break-medium() {
margin: -4px 0 0 -5px;
}
}
&:checked {
background: theme(toggle);
border-color: theme(toggle);
}

&[aria-checked="mixed"] {
background: theme(toggle);
border-color: theme(toggle);

&::before {
// Inherited from `forms.css`.
// See: https://github.com/WordPress/wordpress-develop/tree/5.1.1/src/wp-admin/css/forms.css#L122-L132
content: "\f460";
float: left;
display: inline-block;
vertical-align: middle;
width: 16px;
/* stylelint-disable */
font: normal 30px/1 dashicons;
/* stylelint-enable */
speak: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

@include break-medium() {
float: none;
font-size: 21px;
}
}
&:checked:focus {
box-shadow: 0 0 0 $border-width-focus $medium-gray-text;
}

&:focus {
box-shadow: 0 0 0 $border-width-focus $dark-gray-500;
}

&:checked::before,
&[aria-checked="mixed"]::before {
margin: -3px -5px;
color: $white;

@include break-medium() {
margin: -4px 0 0 -5px;
}
}

// We provide explicit pixel dimensions to ensure a crisp appearance.
// This radio button style should be ported upstream.
input[type="radio"] {
border-radius: $radius-round;

&:checked::before {
width: 6px;
height: 6px;
margin: 6px 0 0 6px;
background-color: $white;
&[aria-checked="mixed"] {
background: theme(toggle);
border-color: theme(toggle);

&::before {
// Inherited from `forms.css`.
// See: https://github.com/WordPress/wordpress-develop/tree/5.1.1/src/wp-admin/css/forms.css#L122-L132
content: "\f460";
float: left;
display: inline-block;
vertical-align: middle;
width: 16px;
/* stylelint-disable */
font: normal 30px/1 dashicons;
/* stylelint-enable */
speak: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

@include break-medium() {
margin: 3px 0 0 3px;
float: none;
font-size: 21px;
}
}
}

// Placeholder colors
input,
textarea {
// Use opacity to work in various editor styles.
&::-webkit-input-placeholder {
color: $dark-opacity-300;
&:focus {
box-shadow: 0 0 0 $border-width-focus $dark-gray-500;
}
}
}

&::-moz-placeholder {
opacity: 1; // Necessary because Firefox reduces this from 1.
color: $dark-opacity-300;
@mixin radio-control {
@include input-control;
border: $border-width + 1 solid $medium-gray-text;
margin-right: $grid-unit-15;
transition: none;
border-radius: $radius-round;

&:checked::before {
width: 6px;
height: 6px;
margin: 6px 0 0 6px;
background-color: $white;

@include break-medium() {
margin: 3px 0 0 3px;
}
}

&:-ms-input-placeholder {
color: $dark-opacity-300;
}
&:focus {
border-color: $medium-gray-text;
box-shadow: 0 0 0 1px $medium-gray-text;
}

.is-dark-theme & {
&::-webkit-input-placeholder {
color: $light-opacity-300;
}
&:checked {
background: theme(toggle);
border-color: theme(toggle);
}

&::-moz-placeholder {
opacity: 1; // Necessary because Firefox reduces this from 1.
color: $light-opacity-300;
}
&:checked:focus {
box-shadow: 0 0 0 $border-width-focus $medium-gray-text;
}

&:-ms-input-placeholder {
color: $light-opacity-300;
}
}
}

/**
* Reset default styles for JavaScript UI based pages.
* This is a WP-admin agnostic reset
*/
@mixin reset {
box-sizing: border-box;

*,
*::before,
*::after {
box-sizing: inherit;
}
}

Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/inserter/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,9 +70,9 @@ $block-inserter-tabs-height: 44px;
position: relative;

input[type="search"].block-editor-inserter__search-input {
@include input-control;
display: block;
padding: $grid-unit-20 $grid-unit-60 $grid-unit-20 $grid-unit-20;
border-radius: $radius-block-ui;
background: $light-gray-200;
border: none;
width: 100%;
Expand Down
12 changes: 1 addition & 11 deletions packages/block-editor/src/components/link-control/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ $block-editor-link-control-number-of-actions: 1;
.block-editor-link-control .block-editor-link-control__search-input {
// Specificity override.
&.block-editor-link-control__search-input input[type="text"] {
@include input-control;
width: calc(100% - #{$grid-unit-20*2});
display: block;
padding: 11px $grid-unit-20;
Expand All @@ -29,17 +30,6 @@ $block-editor-link-control-number-of-actions: 1;
position: relative;
border: 1px solid $light-gray-500;
border-radius: $radius-round-rectangle;

/* Fonts smaller than 16px causes mobile safari to zoom. */
font-size: $mobile-text-min-font-size;

@include break-small {
font-size: $default-font-size;
}

&:focus {
@include input-style__focus();
}
}

.components-base-control__field {
Expand Down
2 changes: 0 additions & 2 deletions packages/block-editor/src/components/url-input/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -379,7 +379,6 @@ class URLInput extends Component {
instanceId,
className,
isFullWidth,
hasBorder,
__experimentalRenderSuggestions: renderSuggestions,
placeholder = __( 'Paste URL or type to search' ),
value = '',
Expand Down Expand Up @@ -422,7 +421,6 @@ class URLInput extends Component {
id={ id }
className={ classnames( 'block-editor-url-input', className, {
'is-full-width': isFullWidth,
'has-border': hasBorder,
} ) }
>
<input
Expand Down
11 changes: 5 additions & 6 deletions packages/block-editor/src/components/url-input/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,15 +31,10 @@ $input-size: 300px;
}
}

&.has-border input[type="text"] {
border: 1px solid $dark-gray-500;
border-radius: 4px;
}

&.is-full-width {
width: 100%;

input[type="text"] {
.block-editor-url-input__input[type="text"] {
width: 100%;
}

Expand All @@ -56,6 +51,10 @@ $input-size: 300px;
}
}

.block-editor-url-input__input[type="text"] {
@include input-control;
}

// Suggestions
.block-editor-url-input__suggestions {
max-height: 200px;
Expand Down
Loading