ids-enterprise-wc 1.0.0-beta.12 → 1.0.0-beta.14

package/components/ids-list-view/ids-list-view.css

@@ -5,11 +5,11 @@
 
 :host([no-margins]) .ids-list-view .ids-list-view-body div[part=list-item]:first-child,
 :host([no-margins]) .ids-list-view .ids-list-view-body li:first-child {
-  margin-block-start: var(--ids-spacing-none);
+  margin-block-start: var(--ids-space-none);
 }
 
 .ids-list-view {
-  height: 100%;
+  height: var(--ids-list-view-height);
   overflow: auto;
   scroll-behavior: smooth;
   position: relative;
@@ -19,26 +19,26 @@
   padding: 0;
 }
 .ids-list-view .ids-list-view-body:focus {
-  border-color: var(--ids-list-view-focus-border-color);
+  border-color: var(--ids-list-view-color-border-focus);
 }
 .ids-list-view .ids-list-view-body div[part=list-item],
 .ids-list-view .ids-list-view-body li {
-  background-color: var(--ids-list-view-item-background-color);
+  background-color: var(--ids-list-view-item-color-background-default);
   border: var(--ids-list-view-item-border);
-  border-top-color: var(--ids-list-view-item-border-top-color);
+  border-top-color: var(--ids-list-view-item-color-border-top);
   contain: content;
   list-style-type: none;
   padding: var(--ids-list-view-item-padding);
 }
 .ids-list-view .ids-list-view-body div[part=list-item]:first-child,
 .ids-list-view .ids-list-view-body li:first-child {
-  margin-block-start: var(--ids-spacing-sm);
+  margin-block-start: var(--ids-space-20);
 }
 .ids-list-view .ids-list-view-body div[part=list-item]:focus,
 .ids-list-view .ids-list-view-body li:focus {
-  border-color: var(--ids-list-view-item-focus-border-color);
-  box-shadow: var(--ids-list-view-item-focus-box-shadow);
-  outline: var(--ids-list-view-item-focus-outline);
+  border-color: var(--ids-list-view-item-color-border-focus);
+  box-shadow: var(--ids-list-view-item-shadow-focus);
+  outline: var(--ids-list-view-item-outline-focus);
 }
 .ids-list-view .ids-list-view-body div[part=list-item]:focus + div[part=list-item],
 .ids-list-view .ids-list-view-body li:focus + div[part=list-item] {
@@ -52,38 +52,38 @@
 }
 .ids-list-view .ids-list-view-body div[part=list-item].sortable:first-child,
 .ids-list-view .ids-list-view-body li.sortable:first-child {
-  margin-block-start: var(--ids-spacing-none);
+  margin-block-start: var(--ids-space-none);
 }
 .ids-list-view .ids-list-view-body div[part=list-item][disabled],
 .ids-list-view .ids-list-view-body li[disabled] {
-  color: var(--ids-list-view-item-disabled-text-color);
+  color: var(--ids-list-view-item-color-text-disabled);
   cursor: var(--ids-cursor-default);
   pointer-events: none;
   user-select: none;
 }
 .ids-list-view .ids-list-view-body div[part=list-item][disabled]:focus,
 .ids-list-view .ids-list-view-body li[disabled]:focus {
-  border-color: var(--ids-list-view-item-disabled-focus-border-color);
-  border-top-color: var(--ids-list-view-item-disabled-focus-border-top-color);
-  box-shadow: var(--ids-list-view-item-disabled-focus-box-shadow);
+  border-color: var(--ids-list-view-item-color-border-disabled-focus);
+  border-top-color: var(--ids-list-view-item-top-color-border-disabled-focus);
+  box-shadow: var(--ids-list-view-item-shadow-disabled-focus);
 }
 .ids-list-view .ids-list-view-body div[part=list-item][disabled] ids-badge::part(badge),
 .ids-list-view .ids-list-view-body li[disabled] ids-badge::part(badge) {
-  background-color: var(--ids-list-view-item-disabled-badge-background-color);
-  border-color: var(--ids-list-view-item-disabled-badge-border-color);
-  color: var(--ids-list-view-item-disabled-badge-text-color);
+  background-color: var(--ids-list-view-item-color-background-disabled);
+  border-color: var(--ids-list-view-item-color-border-disabled);
+  color: var(--ids-list-view-item-badge-color-text-disabled);
 }
 .ids-list-view .ids-list-view-body div[part=list-item][disabled] ids-hyperlink::part(link),
 .ids-list-view .ids-list-view-body li[disabled] ids-hyperlink::part(link) {
-  color: var(--ids-list-view-item-disabled-link-text-color);
+  color: var(--ids-list-view-item-color-text-link-disabled);
 }
 .ids-list-view .ids-list-view-body div[part=list-item][disabled] ids-image,
 .ids-list-view .ids-list-view-body li[disabled] ids-image {
-  opacity: var(--ids-list-view-item-disabled-image-opacity);
+  opacity: var(--ids-list-view-item-opacity-disabled);
 }
 .ids-list-view.has-searchfield .ids-list-view-body div[part=list-item]:first-child,
 .ids-list-view.has-searchfield .ids-list-view-body li:first-child {
-  margin-block-start: var(--ids-spacing-none);
+  margin-block-start: 8px;
 }
 .ids-list-view.selectable-single .ids-list-view-body div[part=list-item]:not([disabled]):not(.sortable):hover, .ids-list-view.selectable-single .ids-list-view-body div[part=list-item]:not([disabled]):not(.sortable)[activated], .ids-list-view.selectable-single .ids-list-view-body div[part=list-item]:not([disabled]):not(.sortable)[selected]:not([hide-selected-color]),
 .ids-list-view.selectable-single .ids-list-view-body li:not([disabled]):not(.sortable):hover,
@@ -95,22 +95,26 @@
 .ids-list-view.selectable-mixed .ids-list-view-body li:not([disabled]):not(.sortable):hover,
 .ids-list-view.selectable-mixed .ids-list-view-body li:not([disabled]):not(.sortable)[activated],
 .ids-list-view.selectable-mixed .ids-list-view-body li:not([disabled]):not(.sortable)[selected]:not([hide-selected-color]) {
-  background-color: var(--ids-list-view-selectable-item-selected-background-color);
+  background-color: var(--ids-list-view-color-background-selected);
 }
 .ids-list-view.selectable-multiple .list-item-area, .ids-list-view.selectable-mixed .list-item-area {
   display: flex;
   align-items: center;
 }
 .ids-list-view.selectable-multiple .list-item-area .list-item-checkbox, .ids-list-view.selectable-mixed .list-item-area .list-item-checkbox {
-  padding-inline-end: var(--ids-spacing-3xl);
+  padding-inline-end: var(--ids-space-70);
   flex-grow: 0;
   flex-shrink: 0;
-  max-height: var(--ids-spacing-xxl);
-  max-width: var(--ids-spacing-xxl);
+  max-height: var(--ids-space-60);
+  max-width: var(--ids-space-60);
 }
 .ids-list-view.selectable-multiple .list-item-area .list-item-checkbox[disabled]::part(checkmark), .ids-list-view.selectable-mixed .list-item-area .list-item-checkbox[disabled]::part(checkmark) {
   background-color: transparent;
 }
+.ids-list-view.is-scrolling {
+  box-shadow: var(--ids-scroll-shadow);
+  border-top: var(--ids-scroll-color-border-top);
+}
 
 ids-swappable-item {
   border: 1px solid transparent;
@@ -119,4 +123,8 @@ ids-swappable-item {
 
 ids-swappable-item[over] {
   border: 1px dashed var(--ids-color-neutral-80);
+}
+
+.ids-list-view-search {
+  margin-bottom: 8px;
 }