Skip to content

Commit

Permalink
Remove Gutenberg form control resets and include the styles in the co…
Browse files Browse the repository at this point in the history 
…mponents (#22596)
  • Loading branch information
@youknowriad
youknowriad authored May 29, 2020
1 parent f2eea8e commit 9f45d0b
Show file tree
Hide file tree
Showing 17 changed files with 167 additions and 184 deletions.
267 changes: 121 additions & 146 deletions packages/base-styles/_mixins.scss
View file
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
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
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
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
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

0 comments on commit 9f45d0b

Please sign in to comment.