diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss index 14f1272761f980..2429a50ae62b48 100644 --- a/packages/dataviews/src/style.scss +++ b/packages/dataviews/src/style.scss @@ -396,7 +396,6 @@ .dataviews-view-list { margin: 0; - padding: $grid-unit-10; li { margin: 0; @@ -404,19 +403,8 @@ .dataviews-view-list__item-wrapper { position: relative; - padding-right: $grid-unit-30; border-radius: $grid-unit-05; - &::after { - position: absolute; - content: ""; - top: 100%; - left: $grid-unit-30; - right: $grid-unit-30; - background: $gray-100; - height: 1px; - } - > * { width: 100%; } @@ -429,6 +417,7 @@ &:hover, &:focus-within { color: var(--wp-admin-theme-color); + background-color: #f8f8f8; .dataviews-view-list__primary-field, .dataviews-view-list__fields { @@ -441,37 +430,33 @@ li.is-selected, li.is-selected:focus-within { .dataviews-view-list__item-wrapper { - background-color: var(--wp-admin-theme-color); - color: $white; + background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04); + color: $gray-900; .dataviews-view-list__primary-field, .dataviews-view-list__fields, .components-button { - color: $white; - } - - &::after { - background: transparent; + color: var(--wp-admin-theme-color); } } } .dataviews-view-list__item { - padding: $grid-unit-15 0 $grid-unit-15 $grid-unit-30; + padding: $grid-unit-20 $grid-unit-40; width: 100%; scroll-margin: $grid-unit-10 0; + border-top: 1px solid $gray-100; &:focus-visible { &::before { position: absolute; content: ""; - top: -1px; - right: -1px; - bottom: -1px; - left: -1px; - box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); - z-index: -1; - border-radius: $grid-unit-05; + top: calc(var(--wp-admin-border-width-focus) + 1px); + right: var(--wp-admin-border-width-focus); + bottom: var(--wp-admin-border-width-focus); + left: var(--wp-admin-border-width-focus); + box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); + border-radius: $radius-block-ui; } } .dataviews-view-list__primary-field { @@ -483,11 +468,11 @@ .dataviews-view-list__media-wrapper { width: $grid-unit-50; height: $grid-unit-50; - border-radius: $grid-unit-05; overflow: hidden; position: relative; flex-shrink: 0; background-color: $gray-100; + border-radius: $grid-unit-05; img { width: 100%;