Update sortable styling (#19169)
This commit is contained in:
parent
1916dff57b
commit
7983556f98
|
@ -207,7 +207,8 @@ export class DialogAreaFilter
|
|||
color: var(--disabled-text-color);
|
||||
}
|
||||
.handle {
|
||||
cursor: move;
|
||||
cursor: move; /* fallback if grab cursor is unsupported */
|
||||
cursor: grab;
|
||||
}
|
||||
.actions {
|
||||
display: flex;
|
||||
|
|
|
@ -319,7 +319,8 @@ export default class HaAutomationAction extends LitElement {
|
|||
overflow: hidden;
|
||||
}
|
||||
.handle {
|
||||
cursor: move;
|
||||
cursor: move; /* fallback if grab cursor is unsupported */
|
||||
cursor: grab;
|
||||
padding: 12px;
|
||||
}
|
||||
.handle ha-svg-icon {
|
||||
|
|
|
@ -543,7 +543,8 @@ export class HaChooseAction extends LitElement implements ActionElement {
|
|||
padding: 0 16px 16px 16px;
|
||||
}
|
||||
.handle {
|
||||
cursor: move;
|
||||
cursor: move; /* fallback if grab cursor is unsupported */
|
||||
cursor: grab;
|
||||
padding: 12px;
|
||||
}
|
||||
.handle ha-svg-icon {
|
||||
|
|
|
@ -358,7 +358,8 @@ export default class HaAutomationCondition extends LitElement {
|
|||
overflow: hidden;
|
||||
}
|
||||
.handle {
|
||||
cursor: move;
|
||||
cursor: move; /* fallback if grab cursor is unsupported */
|
||||
cursor: grab;
|
||||
padding: 12px;
|
||||
}
|
||||
.handle ha-svg-icon {
|
||||
|
|
|
@ -298,7 +298,8 @@ export default class HaAutomationTrigger extends LitElement {
|
|||
overflow: hidden;
|
||||
}
|
||||
.handle {
|
||||
cursor: move;
|
||||
cursor: move; /* fallback if grab cursor is unsupported */
|
||||
cursor: grab;
|
||||
padding: 12px;
|
||||
}
|
||||
.handle ha-svg-icon {
|
||||
|
|
|
@ -285,7 +285,8 @@ class HaInputSelectForm extends LitElement {
|
|||
margin-bottom: 8px;
|
||||
}
|
||||
.handle {
|
||||
cursor: move;
|
||||
cursor: move; /* fallback if grab cursor is unsupported */
|
||||
cursor: grab;
|
||||
padding-right: 12px;
|
||||
}
|
||||
.handle ha-svg-icon {
|
||||
|
|
|
@ -57,6 +57,7 @@ import { findEntities } from "../common/find-entities";
|
|||
import { createEntityNotFoundWarning } from "../components/hui-warning";
|
||||
import { LovelaceCard, LovelaceCardEditor } from "../types";
|
||||
import { TodoListCardConfig } from "./types";
|
||||
import { sortableStyles } from "../../../resources/ha-sortable-style";
|
||||
|
||||
@customElement("hui-todo-list-card")
|
||||
export class HuiTodoListCard extends LitElement implements LovelaceCard {
|
||||
|
@ -619,161 +620,165 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
|
|||
}
|
||||
|
||||
static get styles(): CSSResultGroup {
|
||||
return css`
|
||||
ha-card {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
return [
|
||||
sortableStyles,
|
||||
css`
|
||||
ha-card {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.has-header {
|
||||
padding-top: 0;
|
||||
}
|
||||
.has-header {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.addRow {
|
||||
padding: 16px;
|
||||
padding-bottom: 0;
|
||||
position: relative;
|
||||
}
|
||||
.addRow {
|
||||
padding: 16px;
|
||||
padding-bottom: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.addRow ha-icon-button {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
inset-inline-start: initial;
|
||||
inset-inline-end: 16px;
|
||||
}
|
||||
.addRow ha-icon-button {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
inset-inline-start: initial;
|
||||
inset-inline-end: 16px;
|
||||
}
|
||||
|
||||
.addRow,
|
||||
.header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
.addRow,
|
||||
.header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding-left: 30px;
|
||||
padding-right: 16px;
|
||||
padding-inline-start: 30px;
|
||||
padding-inline-end: 16px;
|
||||
margin-top: 8px;
|
||||
justify-content: space-between;
|
||||
direction: var(--direction);
|
||||
}
|
||||
.header {
|
||||
padding-left: 30px;
|
||||
padding-right: 16px;
|
||||
padding-inline-start: 30px;
|
||||
padding-inline-end: 16px;
|
||||
margin-top: 8px;
|
||||
justify-content: space-between;
|
||||
direction: var(--direction);
|
||||
}
|
||||
|
||||
.header span {
|
||||
color: var(--primary-text-color);
|
||||
font-weight: 500;
|
||||
}
|
||||
.header span {
|
||||
color: var(--primary-text-color);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.empty {
|
||||
padding: 16px 32px;
|
||||
}
|
||||
.empty {
|
||||
padding: 16px 32px;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin-top: 8px;
|
||||
}
|
||||
.item {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
ha-check-list-item {
|
||||
--mdc-list-item-meta-size: 56px;
|
||||
min-height: 56px;
|
||||
height: auto;
|
||||
}
|
||||
ha-check-list-item {
|
||||
--mdc-list-item-meta-size: 56px;
|
||||
min-height: 56px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
ha-check-list-item.multiline {
|
||||
align-items: flex-start;
|
||||
--check-list-item-graphic-margin-top: 8px;
|
||||
}
|
||||
ha-check-list-item.multiline {
|
||||
align-items: flex-start;
|
||||
--check-list-item-graphic-margin-top: 8px;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.multiline .column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 18px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.multiline .column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 18px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.completed .summary {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
.completed .summary {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.description,
|
||||
.due {
|
||||
font-size: 12px;
|
||||
color: var(--secondary-text-color);
|
||||
}
|
||||
.description,
|
||||
.due {
|
||||
font-size: 12px;
|
||||
color: var(--secondary-text-color);
|
||||
}
|
||||
|
||||
.description {
|
||||
white-space: initial;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.description {
|
||||
white-space: initial;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.description p {
|
||||
margin: 0;
|
||||
}
|
||||
.description p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.description a {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
.description a {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.due {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.due {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.due ha-svg-icon {
|
||||
margin-right: 4px;
|
||||
--mdc-icon-size: 14px;
|
||||
}
|
||||
.due ha-svg-icon {
|
||||
margin-right: 4px;
|
||||
--mdc-icon-size: 14px;
|
||||
}
|
||||
|
||||
.due.overdue {
|
||||
color: var(--warning-color);
|
||||
}
|
||||
.due.overdue {
|
||||
color: var(--warning-color);
|
||||
}
|
||||
|
||||
.completed .due.overdue {
|
||||
color: var(--secondary-text-color);
|
||||
}
|
||||
.completed .due.overdue {
|
||||
color: var(--secondary-text-color);
|
||||
}
|
||||
|
||||
.handle {
|
||||
cursor: move;
|
||||
height: 24px;
|
||||
padding: 16px 4px;
|
||||
}
|
||||
.handle {
|
||||
cursor: move; /* fallback if grab cursor is unsupported */
|
||||
cursor: grab;
|
||||
height: 24px;
|
||||
padding: 16px 4px;
|
||||
}
|
||||
|
||||
.deleteItemButton {
|
||||
position: relative;
|
||||
left: 8px;
|
||||
}
|
||||
.deleteItemButton {
|
||||
position: relative;
|
||||
left: 8px;
|
||||
}
|
||||
|
||||
ha-textfield {
|
||||
flex-grow: 1;
|
||||
}
|
||||
ha-textfield {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
background-color: var(--divider-color);
|
||||
margin: 10px 0;
|
||||
}
|
||||
.divider {
|
||||
height: 1px;
|
||||
background-color: var(--divider-color);
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.clearall {
|
||||
cursor: pointer;
|
||||
}
|
||||
.clearall {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.todoList {
|
||||
display: block;
|
||||
padding: 8px;
|
||||
}
|
||||
.todoList {
|
||||
display: block;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.warning {
|
||||
color: var(--error-color);
|
||||
}
|
||||
`;
|
||||
.warning {
|
||||
color: var(--error-color);
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -181,7 +181,8 @@ export class HuiEntityEditor extends LitElement {
|
|||
}
|
||||
.entity .handle {
|
||||
padding-right: 8px;
|
||||
cursor: move;
|
||||
cursor: move; /* fallback if grab cursor is unsupported */
|
||||
cursor: grab;
|
||||
padding-inline-end: 8px;
|
||||
padding-inline-start: initial;
|
||||
direction: var(--direction);
|
||||
|
|
|
@ -460,7 +460,8 @@ export class HuiCardFeaturesEditor extends LitElement {
|
|||
}
|
||||
.feature .handle {
|
||||
padding-right: 8px;
|
||||
cursor: move;
|
||||
cursor: move; /* fallback if grab cursor is unsupported */
|
||||
cursor: grab;
|
||||
padding-inline-end: 8px;
|
||||
padding-inline-start: initial;
|
||||
direction: var(--direction);
|
||||
|
|
|
@ -243,7 +243,8 @@ export class HuiEntitiesCardRowEditor extends LitElement {
|
|||
|
||||
.entity .handle {
|
||||
padding-right: 8px;
|
||||
cursor: move;
|
||||
cursor: move; /* fallback if grab cursor is unsupported */
|
||||
cursor: grab;
|
||||
padding-inline-end: 8px;
|
||||
padding-inline-start: initial;
|
||||
direction: var(--direction);
|
||||
|
|
|
@ -34,14 +34,22 @@ export const sortableStyles = css`
|
|||
|
||||
.sortable-fallback {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.sortable-ghost {
|
||||
border: 2px solid var(--primary-color);
|
||||
background: rgba(var(--rgb-primary-color), 0.25);
|
||||
border-radius: 4px;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.sortable-fallback {
|
||||
opacity: 0;
|
||||
.sortable-drag {
|
||||
border-radius: 4px;
|
||||
opacity: 1;
|
||||
background: var(--card-background-color);
|
||||
box-shadow: 0px 4px 8px 3px #00000026;
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
@keyframes keyframes1 {
|
||||
|
|
Loading…
Reference in New Issue