@keenmate/pure-admin-core 2.3.0 → 2.3.2

package/src/scss/core-components/_lists.scss

@@ -1,211 +1,211 @@
-/* ========================================
-   List Components
-   List items with avatars, titles, subtitles, and meta information
-   ======================================== */
-@use '../variables' as *;
-
-// Basic HTML Lists (ul, ol, dl)
-.pa-list-basic {
-  margin: 0;
-  padding-inline-start: $spacing-lg; // RTL: flips to right
-
-  li {
-    margin-bottom: $spacing-sm;
-    line-height: 1.6;
-  }
-
-  &--spacious li {
-    margin-bottom: $spacing-base;
-  }
-
-  &--compact li {
-    margin-bottom: $spacing-xs;
-  }
-
-  &--unstyled {
-    list-style: none;
-    padding-inline-start: 0; // RTL: flips to right
-  }
-
-  &--inline {
-    list-style: none;
-    padding-inline-start: 0; // RTL: flips to right
-    display: flex;
-    flex-wrap: wrap;
-    gap: $spacing-base;
-  }
-
-  &--bordered {
-    list-style: none;
-    padding-inline-start: 0; // RTL: flips to right
-
-    li {
-      padding: $spacing-sm $spacing-base;
-      border-bottom: $border-width-base solid var(--pa-border-color);
-
-      &:last-child {
-        border-bottom: none;
-      }
-    }
-  }
-
-  &--striped {
-    list-style: none;
-    padding-inline-start: 0; // RTL: flips to right
-
-    li {
-      padding: $spacing-sm $spacing-base;
-
-      &:nth-child(even) {
-        background-color: var(--pa-table-stripe);
-      }
-    }
-  }
-
-  &--icon {
-    list-style: none;
-    padding-inline-start: 0; // RTL: flips to right
-
-    li {
-      display: flex;
-      align-items: flex-start;
-      gap: $spacing-sm;
-
-      &::before {
-        content: '✓';
-        color: $success-bg;
-        font-weight: $font-weight-semibold;
-        flex-shrink: 0;
-      }
-    }
-
-    &.pa-list-basic--danger li::before {
-      content: '✗';
-      color: $danger-bg;
-    }
-
-    &.pa-list-basic--info li::before {
-      content: '→';
-      color: $info-bg;
-    }
-
-    &.pa-list-basic--warning li::before {
-      content: '!';
-      color: $warning-bg;
-    }
-  }
-}
-
-.pa-list-ordered {
-  margin: 0;
-  padding-inline-start: $spacing-lg; // RTL: flips to right
-
-  li {
-    margin-bottom: $spacing-sm;
-    line-height: 1.6;
-    padding-inline-start: $spacing-xs; // RTL: flips to right
-  }
-
-  &--roman {
-    list-style-type: upper-roman;
-  }
-
-  &--alpha {
-    list-style-type: lower-alpha;
-  }
-}
-
-.pa-list-definition {
-  margin: 0;
-
-  dt {
-    font-weight: $font-weight-semibold;
-    color: var(--pa-text-color-1);
-    margin-bottom: $spacing-xs;
-    margin-top: $spacing-base;
-
-    &:first-child {
-      margin-top: 0;
-    }
-  }
-
-  dd {
-    margin-inline-start: $spacing-lg; // RTL: flips to right
-    margin-bottom: $spacing-sm;
-    color: var(--pa-text-color-2);
-    line-height: 1.6;
-  }
-
-  &--inline {
-    dt {
-      display: inline;
-      margin-inline-end: $spacing-xs; // RTL: flips to left
-
-      &::after {
-        content: ':';
-      }
-    }
-
-    dd {
-      display: inline;
-      margin-inline-start: 0; // RTL: flips to right
-      margin-inline-end: $spacing-base; // RTL: flips to left
-
-      &::after {
-        content: '';
-        display: block;
-      }
-    }
-  }
-}
-
-// Complex Lists (with avatars, titles, etc.)
-.pa-list {
-  &__item {
-    display: flex;
-    align-items: center;
-    gap: $spacing-md;
-    padding: $card-footer-padding-v $card-footer-padding-h;
-    border-bottom: $border-width-base solid var(--pa-border-color);
-
-    &:last-child {
-      border-bottom: none;
-    }
-
-    &:hover {
-      background-color: var(--pa-main-bg);
-    }
-  }
-
-  &__avatar {
-    width: $btn-icon-only-size;
-    height: $btn-icon-only-size;
-    border-radius: 50%;
-    background-color: var(--pa-main-bg);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: $font-size-base;
-  }
-
-  &__content {
-    flex: 1;
-  }
-
-  &__title {
-    font-weight: $font-weight-medium;
-    color: var(--pa-text-color-1);
-    margin-bottom: $spacing-xs;
-  }
-
-  &__subtitle {
-    color: var(--pa-text-color-2);
-    font-size: $font-size-sm;
-    margin-bottom: $spacing-xs;
-  }
-
-  &__meta {
-    color: var(--pa-text-color-2);
-    font-size: $font-size-xs;
-  }
-}
+/* ========================================
+   List Components
+   List items with avatars, titles, subtitles, and meta information
+   ======================================== */
+@use '../variables' as *;
+
+// Basic HTML Lists (ul, ol, dl)
+.pa-list-basic {
+  margin: 0;
+  padding-inline-start: $spacing-lg; // RTL: flips to right
+
+  li {
+    margin-bottom: $spacing-sm;
+    line-height: 1.6;
+  }
+
+  &--spacious li {
+    margin-bottom: $spacing-base;
+  }
+
+  &--compact li {
+    margin-bottom: $spacing-xs;
+  }
+
+  &--unstyled {
+    list-style: none;
+    padding-inline-start: 0; // RTL: flips to right
+  }
+
+  &--inline {
+    list-style: none;
+    padding-inline-start: 0; // RTL: flips to right
+    display: flex;
+    flex-wrap: wrap;
+    gap: $spacing-base;
+  }
+
+  &--bordered {
+    list-style: none;
+    padding-inline-start: 0; // RTL: flips to right
+
+    li {
+      padding: $spacing-sm $spacing-base;
+      border-bottom: $border-width-base solid var(--pa-border-color);
+
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+  }
+
+  &--striped {
+    list-style: none;
+    padding-inline-start: 0; // RTL: flips to right
+
+    li {
+      padding: $spacing-sm $spacing-base;
+
+      &:nth-child(even) {
+        background-color: var(--pa-table-stripe);
+      }
+    }
+  }
+
+  &--icon {
+    list-style: none;
+    padding-inline-start: 0; // RTL: flips to right
+
+    li {
+      display: flex;
+      align-items: flex-start;
+      gap: $spacing-sm;
+
+      &::before {
+        content: '✓';
+        color: $success-bg;
+        font-weight: $font-weight-semibold;
+        flex-shrink: 0;
+      }
+    }
+
+    &.pa-list-basic--danger li::before {
+      content: '✗';
+      color: $danger-bg;
+    }
+
+    &.pa-list-basic--info li::before {
+      content: '→';
+      color: $info-bg;
+    }
+
+    &.pa-list-basic--warning li::before {
+      content: '!';
+      color: $warning-bg;
+    }
+  }
+}
+
+.pa-list-ordered {
+  margin: 0;
+  padding-inline-start: $spacing-lg; // RTL: flips to right
+
+  li {
+    margin-bottom: $spacing-sm;
+    line-height: 1.6;
+    padding-inline-start: $spacing-xs; // RTL: flips to right
+  }
+
+  &--roman {
+    list-style-type: upper-roman;
+  }
+
+  &--alpha {
+    list-style-type: lower-alpha;
+  }
+}
+
+.pa-list-definition {
+  margin: 0;
+
+  dt {
+    font-weight: $font-weight-semibold;
+    color: var(--pa-text-color-1);
+    margin-bottom: $spacing-xs;
+    margin-top: $spacing-base;
+
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+
+  dd {
+    margin-inline-start: $spacing-lg; // RTL: flips to right
+    margin-bottom: $spacing-sm;
+    color: var(--pa-text-color-2);
+    line-height: 1.6;
+  }
+
+  &--inline {
+    dt {
+      display: inline;
+      margin-inline-end: $spacing-xs; // RTL: flips to left
+
+      &::after {
+        content: ':';
+      }
+    }
+
+    dd {
+      display: inline;
+      margin-inline-start: 0; // RTL: flips to right
+      margin-inline-end: $spacing-base; // RTL: flips to left
+
+      &::after {
+        content: '';
+        display: block;
+      }
+    }
+  }
+}
+
+// Complex Lists (with avatars, titles, etc.)
+.pa-list {
+  &__item {
+    display: flex;
+    align-items: center;
+    gap: $spacing-md;
+    padding: $card-footer-padding-v $card-footer-padding-h;
+    border-bottom: $border-width-base solid var(--pa-border-color);
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    &:hover {
+      background-color: var(--pa-main-bg);
+    }
+  }
+
+  &__avatar {
+    width: $btn-icon-only-size;
+    height: $btn-icon-only-size;
+    border-radius: 50%;
+    background-color: var(--pa-main-bg);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: $font-size-base;
+  }
+
+  &__content {
+    flex: 1;
+  }
+
+  &__title {
+    font-weight: $font-weight-medium;
+    color: var(--pa-text-color-1);
+    margin-bottom: $spacing-xs;
+  }
+
+  &__subtitle {
+    color: var(--pa-text-color-2);
+    font-size: $font-size-sm;
+    margin-bottom: $spacing-xs;
+  }
+
+  &__meta {
+    color: var(--pa-text-color-2);
+    font-size: $font-size-xs;
+  }
+}