diff --git a/tinymce-per-block/src/blocks/embed-block/_style.scss b/tinymce-per-block/src/blocks/embed-block/_style.scss index 7b15e6648f1448..e6e7563699f6aa 100644 --- a/tinymce-per-block/src/blocks/embed-block/_style.scss +++ b/tinymce-per-block/src/blocks/embed-block/_style.scss @@ -29,7 +29,6 @@ height: 24px; vertical-align: middle; margin-right: 5px; - fill: #87919d; } } } diff --git a/tinymce-per-block/src/controls/transform-block-toolbar/style.scss b/tinymce-per-block/src/controls/transform-block-toolbar/style.scss index 0db6481f0d5c56..7ef761ead052e6 100644 --- a/tinymce-per-block/src/controls/transform-block-toolbar/style.scss +++ b/tinymce-per-block/src/controls/transform-block-toolbar/style.scss @@ -55,15 +55,17 @@ cursor: pointer; display: flex; align-items: center; + color: #191e23; + border: 1px solid transparent; - &.is-active, &:hover { - background: #f0f2f4; + background: #f8f9f9; + outline: 1px solid #6d7882; + position: relative; } .dashicon { margin-right: 8px; - fill: #191e23; width: 24px; height: 24px; } diff --git a/tinymce-per-block/src/inserter/style.scss b/tinymce-per-block/src/inserter/style.scss index feb24e16c8a865..c066e569c16144 100644 --- a/tinymce-per-block/src/inserter/style.scss +++ b/tinymce-per-block/src/inserter/style.scss @@ -5,16 +5,20 @@ border: none; margin: 20px; padding: 0; + + a { + color: #87919d; + + &:hover { + color: #12181e; + } + } + .dashicon { cursor: pointer; - fill: #87919d; width: 24px; height: 24px; - &:hover { - fill: #12181e; - } - &:focus { box-shadow: none; outline: none; @@ -81,15 +85,24 @@ font-size: 11px; align-items: center; cursor: pointer; + border: 1px solid transparent; - &.is-active, &:hover { - background: #f0f2f4; + background: #f8f9f9; + border: 1px solid #6d7882; + position: relative; + } + + &.is-active { + background: #eef0f0; + border: 1px solid #6d7882; + position: relative; + color: #3e444c; } .dashicon { - margin-right: 8px; fill: #191e23; + margin-right: 8px; width: 24px; height: 24px; } diff --git a/tinymce-per-block/src/renderers/block/block-list/_style.scss b/tinymce-per-block/src/renderers/block/block-list/_style.scss index f604520211cea5..b668d43d0fea9a 100644 --- a/tinymce-per-block/src/renderers/block/block-list/_style.scss +++ b/tinymce-per-block/src/renderers/block/block-list/_style.scss @@ -18,11 +18,11 @@ } &:hover > div { - border-left-color: mix( $gray-light, $gray-dark-300, 80% ); + border-left-color: #e1e6ea; } &.is-selected > div { - border-color: mix( $gray-light, $gray-dark-300, 80% ); + border-color: #e1e6ea; } } @@ -36,11 +36,11 @@ .block-list__block-controls-group { background: #fff; - border: 1px solid #e1e6ea; + border: 1px solid #d8dbdf; box-shadow: 0px 3px 20px rgba( 18, 24, 30, .1 ), 0px 1px 3px rgba( 18, 24, 30, .1 ); color: #12181e; display: inline-block; - margin-left: 20px; + margin-left: 14px; } .block-list__block-toolbar { @@ -57,9 +57,23 @@ cursor: pointer; display: block; float: left; + color: #6d7882; - &.is-selected, &:hover { - background: #f0f2f4; + &:focus { + outline: 0; + } + + &:hover { + background: #f8f9f9; + outline: 1px solid #6d7882; + position: relative; + } + + &.is-selected { + background: #eef0f0; + outline: 1px solid #6d7882; + position: relative; + color: #3e444c; } .dashicon { @@ -67,10 +81,6 @@ width: 24px; height: 24px; } - - &:focus { - outline: 0; - } } .block-list__block-arrangement {