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

Cleanup CSS variables #20529

Merged
merged 2 commits into from
Mar 2, 2020
Merged

Cleanup CSS variables #20529

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5f008ec
Cleanup CSS variables
youknowriad Feb 28, 2020
30c78f7
avoid using -unit directly
youknowriad Feb 28, 2020
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
35 changes: 3 additions & 32 deletions packages/base-styles/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ $text-editor-font-size: 14px;
$editor-line-height: 1.8;
$big-font-size: 18px;
$mobile-text-min-font-size: 16px; // Any font size below 16px will cause Mobile Safari to "zoom in"

$border-width: 1px;

/**
* Grid System.
Expand All @@ -32,31 +32,12 @@ $grid-unit-40: 4 * $grid-unit; // 32px
$grid-unit-50: 5 * $grid-unit; // 40px
$grid-unit-60: 6 * $grid-unit; // 48px

/* @Todo: Move towards custom properties:
:root {
--grid-unit: 8px;
--grid-unit-05: calc(0.5 * var(--grid-unit)); // 4px
--grid-unit-10: calc(1 * var(--grid-unit)); // 8px
--grid-unit-15: calc(1.5 * var(--grid-unit)); // 12px
--grid-unit-20: calc(2 * var(--grid-unit)); // 16px
--grid-unit-30: calc(3 * var(--grid-unit)); // 24px
--grid-unit-40: calc(4 * var(--grid-unit)); // 32px
--grid-unit-50: calc(5 * var(--grid-unit)); // 40px
--grid-unit-60: calc(6 * var(--grid-unit)); // 48px
}
*/

// Deprecated grid units.
$grid-size-small: 4px;
$grid-size: 8px;
$grid-size-large: 16px;
$grid-size-xlarge: 24px;


/**
* Dimensions.
*/

$button-size: 36px;
$button-size-small: 24px;
$panel-padding: 16px;
$header-height: 60px;
$panel-header-height: 50px;
Expand All @@ -65,7 +46,6 @@ $admin-bar-height-big: 46px;
$admin-sidebar-width: 160px;
$admin-sidebar-width-big: 190px;
$admin-sidebar-width-collapsed: 36px;
$empty-paragraph-height: $text-editor-font-size * 4;
$modal-min-width: 360px;
$spinner-size: 18px;

Expand All @@ -86,20 +66,11 @@ $sidebar-width: 280px;
$content-width: 580px; // This is optimized for 70 characters.
$widget-area-width: 700px;


/**
* Block UI.
*/

$border-width: 1px;
$icon-button-size: 36px;
$inserter-tabs-height: 36px;
$icon-button-size-small: 24px;
$block-toolbar-height: $grid-unit-60;
$resize-handler-size: 15px;
$resize-handler-container-size: $resize-handler-size + ($grid-unit-05 * 2); // Make the resize handle container larger so there's a larger grabbable area.

// Block specific dimensions.
$block-padding: 14px; // Space between block footprint and focus boundaries. These are drawn outside the block footprint, and do not affect the size.
$block-spacing: 4px; // Vertical space between blocks.
$block-side-ui-width: 28px; // Width of the movers/drag handle UI.
Expand Down
10 changes: 5 additions & 5 deletions packages/block-directory/src/components/downloadable-block-header/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,15 @@
flex-grow: 1;

.block-editor-block-icon {
width: $icon-button-size;
height: $icon-button-size;
font-size: $icon-button-size;
width: $button-size;
height: $button-size;
font-size: $button-size;
background-color: $light-gray-300;
}

img {
width: $icon-button-size;
height: $icon-button-size;
width: $button-size;
height: $button-size;
}

.block-directory-downloadable-block-header__column {
Expand Down
4 changes: 2 additions & 2 deletions packages/block-editor/src/components/block-breadcrumb/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@
}

.block-editor-block-breadcrumb__button.components-button {
height: $icon-button-size-small;
line-height: $icon-button-size-small;
height: $button-size-small;
line-height: $button-size-small;
padding: 0;

&:hover {
Expand Down
4 changes: 2 additions & 2 deletions packages/block-editor/src/components/block-card/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,6 @@
margin-left: -2px;
margin-right: 10px;
padding: 0 3px;
width: $icon-button-size;
height: $icon-button-size-small;
width: $button-size;
height: $button-size-small;
}
4 changes: 2 additions & 2 deletions packages/block-editor/src/components/block-mobile-toolbar/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
border-right: $border-width solid $light-gray-500;

.block-editor-block-mover__control {
width: $icon-button-size;
height: $icon-button-size;
width: $button-size;
height: $button-size;
border-radius: $radius-round-rectangle;
padding: 3px;
margin: 0;
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/block-navigation/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ $tree-item-height: 36px;
background: none;
padding: $grid-unit-10;
margin-left: 0.8em;
width: $icon-button-size;
width: $button-size;
border-radius: 4px;

&:hover:not(:disabled):not([aria-disabled="true"]) {
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/block-toolbar/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@
padding-right: $grid-unit-15 / 2;

svg {
min-width: $icon-button-size-small; // This is the optimal icon size, and we size the whole button after this.
min-width: $button-size-small; // This is the optimal icon size, and we size the whole button after this.
}

&::before {
Expand Down
4 changes: 2 additions & 2 deletions packages/block-editor/src/components/button-block-appender/styles.native.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,9 @@
.addBlockButton {
color: $white;
background-color: $gray;
border-radius: $icon-button-size-small / 2;
border-radius: $button-size-small / 2;
overflow: hidden;
size: $icon-button-size-small;
size: $button-size-small;
}

.addBlockButtonDark {
Expand Down
4 changes: 2 additions & 2 deletions packages/block-editor/src/components/colors-gradients/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
.block-editor-color-gradient-control {
&__color-indicator {
margin-bottom: $grid-size;
margin-bottom: $grid-unit;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think we should ever actually use $grid-unit, it should always be one of the numbered ones. I.e. in this case, it should be $grid-unit-10.

In that vein, $grid-unit is intended only to seed all the numbered variables. Should it have a different name to reflect that?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I updated but why not just remove the variable in that case and use $grid-unit-10 everywhere.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh I guess that could work? Seems almost cyclical 😅

The alternative would be to spell out 8px for each variable.

}

&__button-tabs {
display: block;
margin-bottom: $grid-size;
margin-bottom: $grid-unit;
}
}

Expand Down
3 changes: 1 addition & 2 deletions packages/block-editor/src/components/default-block-appender/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
// Emulate the dimensions of a paragraph block.
// On mobile and in nested contexts, the plus to add blocks shows up on the right.
// The rightmost padding makes sure it doesn't overlap text.
padding: 0 #{ $block-padding + $icon-button-size } 0 $block-padding;
padding: 0 #{ $block-padding + $button-size } 0 $block-padding;

// Use opacity to work in various editor styles.
color: $dark-opacity-300;
Expand All @@ -48,7 +48,6 @@

// Ensure that the height of the first appender, and the one between blocks, is the same as text.
.block-editor-default-block-appender__content {
min-height: $empty-paragraph-height / 2;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I haven't had time to test this yet, are you sure there aren't any negataive consequences of removing this? I'm sure we added it for a reason, back in the day.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The reason we added it is to make sure the appender with or without paragraph has the same height. It's broken with or without this style now.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure I follow but I'll check when I have a moment.

line-height: $editor-line-height;
}

Expand Down
18 changes: 9 additions & 9 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 @@ -24,7 +24,7 @@ $block-editor-link-control-number-of-actions: 1;
width: calc(100% - #{$grid-unit-20*2});
display: block;
padding: 11px $grid-unit-20;
padding-right: ( $icon-button-size * $block-editor-link-control-number-of-actions ); // width of reset and submit buttons
padding-right: ( $button-size * $block-editor-link-control-number-of-actions ); // width of reset and submit buttons
margin: $grid-unit-20;
position: relative;
border: 1px solid $light-gray-500;
Expand All @@ -44,7 +44,7 @@ $block-editor-link-control-number-of-actions: 1;
}

.block-editor-link-control__search-error {
margin: -$grid-size-large/2 $grid-size-large $grid-size-large; // negative margin to bring the error a bit closer to the button
margin: -$grid-unit-20/2 $grid-unit-20 $grid-unit-20; // negative margin to bring the error a bit closer to the button
}

.block-editor-link-control__search-actions {
Expand All @@ -54,15 +54,15 @@ $block-editor-link-control-number-of-actions: 1;
* when suggestions are rendered.
*
* Compensate for:
* - Input margin ($grid-size-large)
* - Input margin ($grid-unit-20)
* - Border (1px)
* - Vertically, for the difference in height between the input (40px) and
* the icon buttons.
* - Horizontally, pad to the minimum of: default input padding, or the
* equivalent of the vertical padding.
*/
top: $grid-size-large + 1px + ( ( 40px - $icon-button-size ) / 2 );
right: $grid-size-large + 1px + min($grid-size, ( 40px - $icon-button-size ) / 2);
top: $grid-unit-20 + 1px + ( ( 40px - $button-size ) / 2 );
right: $grid-unit-20 + 1px + min($grid-unit, ( 40px - $button-size ) / 2);
}

.block-editor-link-control__search-results-wrapper {
Expand Down Expand Up @@ -203,7 +203,7 @@ $block-editor-link-control-number-of-actions: 1;
}

.block-editor-link-control__loading {
margin: $grid-size-large; // when only loading control is shown it requires it's own spacing.
margin: $grid-unit-20; // when only loading control is shown it requires it's own spacing.
display: flex;
align-items: center;

Expand Down Expand Up @@ -265,16 +265,16 @@ $block-editor-link-control-number-of-actions: 1;
* Position spinner to the left of the actions.
*
* Compensate for:
* - Input margin ($grid-size-large)
* - Input margin ($grid-unit-20)
* - Border (1px)
* - Vertically, for the difference in height between the input (40px)
* and the spinner.
* - Horizontally, adjust for the width occupied by the icon buttons,
* then artificially create spacing that mimics as if the spinner
* were center-padded to the same width as an icon button.
*/
top: $grid-size-large + 1px + ( ( 40px - $spinner-size ) / 2 );
right: $grid-size-large + 1px + ( $icon-button-size * $block-editor-link-control-number-of-actions ) + ( ( $icon-button-size - $spinner-size ) / 2 );
top: $grid-unit-20 + 1px + ( ( 40px - $spinner-size ) / 2 );
right: $grid-unit-20 + 1px + ( $button-size * $block-editor-link-control-number-of-actions ) + ( ( $button-size - $spinner-size ) / 2 );
}
}

Expand Down
4 changes: 2 additions & 2 deletions packages/block-editor/src/components/media-placeholder/styles.native.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,9 +61,9 @@
.addMediaButton {
color: $white;
background-color: $toolbar-button;
border-radius: $icon-button-size-small / 2;
border-radius: $button-size-small / 2;
overflow: hidden;
size: $icon-button-size-small;
size: $button-size-small;
}

.addMediaButtonDark {
Expand Down
4 changes: 2 additions & 2 deletions packages/block-editor/src/components/multi-selection-inspector/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,6 @@
margin-left: -2px;
margin-right: 10px;
padding: 0 3px;
width: $icon-button-size;
height: $icon-button-size-small;
width: $button-size;
height: $button-size-small;
}
4 changes: 2 additions & 2 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 @@ -136,7 +136,7 @@ $input-size: 300px;

.components-button {
flex-shrink: 0;
width: $icon-button-size;
height: $icon-button-size;
width: $button-size;
height: $button-size;
}
}
2 changes: 1 addition & 1 deletion packages/block-library/src/buttons/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.wp-block-buttons .wp-block-button {
display: inline-block;
margin: $grid-size-small;
margin: $grid-unit-05;
}
.wp-block-buttons.aligncenter {
text-align: center;
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/columns/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@

// Between mobile and large viewports, allow 2 columns.
@include break-small() {
flex-basis: calc(50% - (#{$grid-size-large}));
flex-basis: calc(50% - (#{$grid-unit-20}));
flex-grow: 0;
margin-left: 0;
margin-right: 0;
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/columns/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@

// Between mobile and large viewports, allow 2 columns.
@include break-small() {
flex-basis: calc(50% - #{$grid-size-large});
flex-basis: calc(50% - #{$grid-unit-20});
flex-grow: 0;

// Add space between the multiple columns. Themes can customize this if they wish to work differently.
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/more/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
border-radius: 4px;
background: $white;
padding: 6px 8px;
height: $icon-button-size-small;
height: $button-size-small;
max-width: 100%;

&:focus {
Expand Down
10 changes: 5 additions & 5 deletions packages/block-library/src/navigation-link/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
.wp-block-navigation-link__container {
border-radius: 0;
// Make it the same height as the appender to prevent a jump. Maybe revisit this.
line-height: $icon-button-size;
min-height: $icon-button-size;
line-height: $button-size;
min-height: $button-size;
}

/*
Expand All @@ -29,9 +29,9 @@
}

.block-list-appender {
margin: $grid-size * 2;
margin-left: $grid-size * 1.25;
margin-top: $grid-size * 1.25;
margin: $grid-unit * 2;
margin-left: $grid-unit * 1.25;
margin-top: $grid-unit * 1.25;
}
}

Expand Down
16 changes: 8 additions & 8 deletions packages/block-library/src/navigation/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
$navigation-menu-height: $grid-size * 7;
$navigation-sub-menu-height: $grid-size * 5;
$navigation-sub-menu-width: $grid-size * 25;
$navigation-menu-height: $grid-unit * 7;
$navigation-sub-menu-height: $grid-unit * 5;
$navigation-sub-menu-width: $grid-unit * 25;

/*
* Frontend: reset the default list styles
Expand Down Expand Up @@ -158,30 +158,30 @@ $navigation-sub-menu-width: $grid-size * 25;
display: flex;
align-items: center;
width: max-content;
padding: $grid-size * 0.75 $grid-size * 2;
padding: $grid-unit * 0.75 $grid-unit * 2;
}

// Submenu links only
.wp-block-navigation-link {

&:first-child:not(:only-child) .wp-block-navigation-link__content {
padding-top: $grid-size;
padding-top: $grid-unit;
}

&:last-child .wp-block-navigation-link__content {
padding-bottom: $grid-size;
padding-bottom: $grid-unit;
}
}

&.has-child .wp-block-navigation-link__content {
min-width: 100%;
padding-right: $grid-size * 4;
padding-right: $grid-unit * 4;
position: relative;
}

.wp-block-navigation-link__submenu-icon {
position: absolute;
right: $grid-size * 2;
right: $grid-unit * 2;

svg {
fill: currentColor;
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/nextpage/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
border-radius: 4px;
background: $white;
padding: 6px 8px;
height: $icon-button-size-small;
height: $button-size-small;
}

// Dashed line
Expand Down
Loading