diff --git a/src/components/ha-clickable-list-item.ts b/src/components/ha-clickable-list-item.ts index fe12d329d4..4e81260995 100644 --- a/src/components/ha-clickable-list-item.ts +++ b/src/components/ha-clickable-list-item.ts @@ -31,11 +31,6 @@ export class HaClickableListItem extends ListItemBase { padding-right: 0px; } - :host([rtl]) { - padding-left: var(--mdc-list-side-padding, 0px); - padding-right: var(--mdc-list-side-padding, 0px); - } - :host([rtl]) span { margin-left: var(--mdc-list-item-graphic-margin, 20px) !important; margin-right: 0px !important; diff --git a/src/resources/ha-sortable-style.ts b/src/resources/ha-sortable-style.ts index 5979f986e2..086c385512 100644 --- a/src/resources/ha-sortable-style.ts +++ b/src/resources/ha-sortable-style.ts @@ -1,6 +1,7 @@ import { css } from "lit-element"; export const sortableStyles = css` + #sortable ha-clickable-list-item:nth-of-type(2n), #sortable a:nth-of-type(2n) paper-icon-item { animation-name: keyframes1; animation-iteration-count: infinite; @@ -9,6 +10,7 @@ export const sortableStyles = css` animation-duration: 0.25s; } + #sortable ha-clickable-list-item:nth-of-type(2n-1), #sortable a:nth-of-type(2n-1) paper-icon-item { animation-name: keyframes2; animation-iteration-count: infinite; @@ -34,16 +36,13 @@ export const sortableStyles = css` .sortable-fallback { display: none; + opacity: 0; } .sortable-ghost { opacity: 0.4; } - .sortable-fallback { - opacity: 0; - } - @keyframes keyframes1 { 0% { transform: rotate(-1deg); @@ -73,15 +72,10 @@ export const sortableStyles = css` display: none; position: absolute; top: 0; - right: 4px; + right: 0; --mdc-icon-button-size: 40px; } - :host([rtl]) .show-panel { - right: initial; - left: 4px; - } - .hide-panel { top: 4px; right: 8px; @@ -100,6 +94,8 @@ export const sortableStyles = css` display: inline-flex; } + ha-clickable-list-item.hidden-panel, + ha-clickable-list-item.hidden-panel span, paper-icon-item.hidden-panel, paper-icon-item.hidden-panel span, paper-icon-item.hidden-panel ha-icon[slot="item-icon"] {