Skip to content

Commit

Permalink
Simplify the block selected state
Browse files Browse the repository at this point in the history
  • Loading branch information
@youknowriad
youknowriad committed Dec 10, 2019
1 parent ed66431 commit d6fe7b9
Show file tree
Hide file tree
Showing 6 changed files with 2 additions and 93 deletions.
1 change: 0 additions & 1 deletion packages/base-styles/_variables.scss
View file
Expand Up @@ -54,7 +54,6 @@ $resize-handler-size: 15px;
$resize-handler-container-size: $resize-handler-size + ($grid-size-small * 2); // Make the resize handle container larger so there's a larger grabbable area.

// Blocks
$block-left-border-width: $border-width * 3;
$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
52 changes: 0 additions & 52 deletions packages/block-editor/src/components/block-list/style.scss
View file
Expand Up @@ -108,7 +108,6 @@
content: "";
position: absolute;
border: $border-width solid transparent;
border-left: none;
box-shadow: none;
pointer-events: none;
transition: border-color 0.1s linear, border-style 0.1s linear, box-shadow 0.1s linear;
Expand All @@ -130,30 +129,14 @@
> .block-editor-block-list__block-edit::before {
// Use opacity to work in various editor styles.
border-color: $dark-opacity-light-800;
box-shadow: inset $block-left-border-width 0 0 0 $dark-gray-500;

.is-dark-theme & {
border-color: $light-opacity-light-800;
box-shadow: inset $block-left-border-width 0 0 0 $light-gray-600;
}

// Switch to outset borders on larger screens.
@include break-small() {
box-shadow: -$block-left-border-width 0 0 0 $dark-gray-500;

.is-dark-theme & {
box-shadow: -$block-left-border-width 0 0 0 $light-gray-600;
}
}
}

&.is-navigate-mode > .block-editor-block-list__block-edit::before {
border-color: $blue-medium-focus;
box-shadow: inset $block-left-border-width 0 0 0 $blue-medium-focus;

@include break-small() {
box-shadow: -$block-left-border-width 0 0 0 $blue-medium-focus;
}
}
}

Expand Down Expand Up @@ -183,20 +166,9 @@

> .block-editor-block-list__block-edit::before {
border-left-color: $dark-opacity-light-800;
box-shadow: inset $block-left-border-width 0 0 0 $dark-gray-500;

.is-dark-theme & {
border-left-color: $light-opacity-light-800;
box-shadow: inset $block-left-border-width 0 0 0 $light-gray-600;
}

// Switch to outset borders on larger screens.
@include break-small() {
box-shadow: -$block-left-border-width 0 0 0 $dark-gray-500;

.is-dark-theme & {
box-shadow: -$block-left-border-width 0 0 0 $light-gray-600;
}
}
}
}
Expand Down Expand Up @@ -812,20 +784,6 @@
&[data-align="right"] .block-editor-block-contextual-toolbar {
margin-bottom: $border-width;
margin-top: -$block-toolbar-height;

// Display the box-shadow on the parent element.
box-shadow: -$block-left-border-width 0 0 0 $dark-gray-500;
.is-dark-theme & {
box-shadow: -$block-left-border-width 0 0 0 $light-gray-600;
}

@include break-small() {
box-shadow: none;
}

.block-editor-block-toolbar {
border-left: none;
}
}

// Make block toolbar full width on mobile.
Expand Down Expand Up @@ -947,25 +905,15 @@
display: flex;
background: $white;
border: $border-width solid $blue-medium-focus;
border-left: none;
box-shadow: inset $block-left-border-width 0 0 0 $blue-medium-focus;
height: $block-toolbar-height + $border-width;
font-size: $default-font-size;
line-height: $block-toolbar-height - $grid-size;
padding-left: $grid-size;
padding-right: $grid-size;

.components-button {
box-shadow: none;
}

.is-dark-theme & {
border-color: $light-opacity-light-800;
}

@include break-small() {
box-shadow: -$block-left-border-width 0 0 0 $blue-medium-focus;
}
}
}

Expand Down
9 changes: 0 additions & 9 deletions packages/block-editor/src/components/block-toolbar/style.scss
View file
Expand Up @@ -11,15 +11,6 @@
@include break-small() {
// Allow overflow on desktop.
overflow: inherit;

// Show a left border on the parent container.
border-left: none;
box-shadow: -$block-left-border-width 0 0 0 $dark-gray-500;

// Show a lighter version for dark themes.
.is-dark-theme & {
box-shadow: -$block-left-border-width 0 0 0 $light-gray-600;
}
}

// The component is born with a border, but we only need some of them.
Expand Down
7 changes: 0 additions & 7 deletions packages/block-library/src/columns/editor.scss
View file
Expand Up @@ -149,13 +149,6 @@ div.block-core-columns.is-vertically-aligned-bottom {
justify-content: flex-end;
}

/**
* Fixes single Column breadcrumb position.
*/
[data-type="core/column"] > .editor-block-list__block-edit > .editor-block-list__breadcrumb {
left: -$block-left-border-width;
}

/**
* Make single Column overlay not extend past boundaries of parent
*/
Expand Down
9 changes: 0 additions & 9 deletions packages/editor/src/components/post-permalink/style.scss
View file
Expand Up @@ -11,15 +11,6 @@
border: $border-width solid $light-gray-800;
background-clip: padding-box;

// Show a thick left border to match the left border on the title field.
border-left: 0;
box-shadow: -$block-left-border-width 0 0 0 $dark-gray-500;

// Use a lighter border for dark themes.
.is-dark-theme & {
box-shadow: -$block-left-border-width 0 0 0 $light-gray-600;
}

// Include transparent outline for Windows High Contrast mode.
outline: $border-width solid transparent;

Expand Down
17 changes: 2 additions & 15 deletions packages/editor/src/components/post-title/style.scss
View file
Expand Up @@ -32,7 +32,6 @@

@include break-small() {
border-width: $border-width;
border-left-width: 0;
}

// Match h1 heading.
Expand All @@ -54,7 +53,6 @@

&:focus {
border: $border-width solid transparent;
border-left-width: 0;
outline: $border-width solid transparent;
box-shadow: none;
}
Expand All @@ -64,20 +62,9 @@
&.is-selected .editor-post-title__input {
// use opacity to work in various editor styles.
border-color: $dark-opacity-light-800;
box-shadow: inset $block-left-border-width 0 0 0 $dark-gray-500;

.is-dark-theme & {
border-color: $light-opacity-light-800;
box-shadow: inset $block-left-border-width 0 0 0 $light-gray-600;
}

// Switch to outset borders on larger screens.
@include break-small() {
box-shadow: -$block-left-border-width 0 0 0 $dark-gray-500;

.is-dark-theme & {
box-shadow: -$block-left-border-width 0 0 0 $light-gray-600;
}
}
}
}
Expand All @@ -98,9 +85,9 @@
color: $dark-gray-900;
height: auto;
position: relative;
left: $block-left-border-width;
left: 0;
top: -2px;
width: calc(100% - #{$block-left-border-width});
width: 100%;

@include break-mobile() {
position: absolute;
Expand Down

0 comments on commit d6fe7b9

Please sign in to comment.