platform-core-ng 21.1.0

package/styles/components/master-detail.scss

@@ -0,0 +1,137 @@
+//@use '../base/tokens' as tk;
+//
+//.list-page-layout--master-detail,
+//s-list-page-layout.list-page-layout--master-detail .list-page-layout {
+//  --list-page-layout-sidebar-width: 16rem;
+//  --list-page-master-width: 20rem;
+//  --list-page-layout-main-gap: 0.75rem;
+//  --list-page-layout-main-padding: 0.875rem 1rem 1rem;
+//  --list-page-layout-desktop-radius: 0.875rem;
+//}
+//
+//.list-page-layout--master-detail .list-page-sidebar,
+//s-list-page-layout.list-page-layout--master-detail .list-page-sidebar {
+//  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
+//  height: 100%;
+//  border-right: 1px solid var(--list-page-sidebar-border-color, #{tk.$color-divider});
+//}
+//
+//.list-page-layout--master-detail .list-page-layout__content-desktop,
+//s-list-page-layout.list-page-layout--master-detail .list-page-layout__content-desktop {
+//  border: 1px solid var(--list-page-master-detail-border-color, #{tk.$color-border});
+//  box-sizing: border-box;
+//}
+//
+//.list-page-layout--master-detail .list-page-layout__content-desktop > .card,
+//s-list-page-layout.list-page-layout--master-detail .list-page-layout__content-desktop > .card {
+//  height: 100%;
+//  border: 0;
+//  border-radius: 0;
+//}
+//
+//.list-page-layout--master-detail .list-page-layout__content-desktop > .card > .card__body,
+//s-list-page-layout.list-page-layout--master-detail .list-page-layout__content-desktop > .card > .card__body {
+//  height: 100%;
+//  min-height: 0;
+//  align-items: stretch;
+//  gap: 0;
+//  padding: 0;
+//  overflow: hidden;
+//}
+//
+//.list-page-layout--master-detail .card__body-main--list,
+//s-list-page-layout.list-page-layout--master-detail .card__body-main--list {
+//  flex: 0 0 var(--list-page-master-width, 26rem);
+//  height: 100%;
+//  overflow: auto;
+//  border-right: 1px solid var(--list-page-master-detail-border-color, #{tk.$color-divider});
+//  background: var(--list-page-master-bg, #{tk.$color-surface});
+//}
+//
+//.list-page-layout--master-detail .card__aside--detail,
+//s-list-page-layout.list-page-layout--master-detail .card__aside--detail {
+//  flex: 1 1 auto;
+//  min-width: 0;
+//  height: 100%;
+//  display: grid;
+//  align-content: start;
+//  gap: 0.875rem;
+//  padding: 1rem;
+//  overflow: auto;
+//  box-sizing: border-box;
+//  background: var(--list-page-detail-bg, #{tk.$color-surface});
+//}
+//
+//.list-page-layout--master-detail .card__aside--detail > .card,
+//s-list-page-layout.list-page-layout--master-detail .card__aside--detail > .card {
+//  min-width: 0;
+//}
+//
+//.list-page-layout--master-detail .card__aside--detail .card__header,
+//s-list-page-layout.list-page-layout--master-detail .card__aside--detail .card__header {
+//  min-height: 3.25rem;
+//  padding: 0 1rem;
+//}
+//
+//.list-page-layout--master-detail .card__aside--detail .status-dot,
+//s-list-page-layout.list-page-layout--master-detail .card__aside--detail .status-dot {
+//  min-width: 0;
+//}
+//
+//.list-page-layout--master-detail .card__aside--detail .status-dot__label,
+//s-list-page-layout.list-page-layout--master-detail .card__aside--detail .status-dot__label {
+//  min-width: 0;
+//  overflow: hidden;
+//  text-overflow: ellipsis;
+//}
+//
+//.list-page-layout--master-detail .card__aside--detail .card__body,
+//s-list-page-layout.list-page-layout--master-detail .card__aside--detail .card__body {
+//  padding: 1rem;
+//}
+//
+//.list-page-layout--master-detail .card__aside--detail .card__footer,
+//s-list-page-layout.list-page-layout--master-detail .card__aside--detail .card__footer {
+//  min-height: 3.25rem;
+//  padding: 0 1rem;
+//}
+//
+//.list-page-layout--master-detail .card__aside--detail .list-item,
+//s-list-page-layout.list-page-layout--master-detail .card__aside--detail .list-item {
+//  padding: 0.75rem;
+//}
+//
+//.list-page-layout--master-detail .card__aside--detail .list-item__title,
+//s-list-page-layout.list-page-layout--master-detail .card__aside--detail .list-item__title {
+//  overflow: hidden;
+//  display: -webkit-box;
+//  overflow-wrap: break-word;
+//  -webkit-box-orient: vertical;
+//  -webkit-line-clamp: 2;
+//}
+//
+//.list-page-layout--master-detail .list-page-avatar,
+//s-list-page-layout.list-page-layout--master-detail .list-page-avatar {
+//  background: linear-gradient(
+//    180deg,
+//    var(--avatar-role-start, #{tk.$color-primary-300}),
+//    var(--avatar-role-end, #{tk.$color-primary})
+//  );
+//}
+//
+//@media (min-width: 1440px) {
+//  .list-page-layout--master-detail,
+//  s-list-page-layout.list-page-layout--master-detail .list-page-layout {
+//    --list-page-layout-sidebar-width: 18rem;
+//    --list-page-master-width: 25rem;
+//  }
+//}
+//
+//@media (max-width: 1180px) {
+//  .list-page-layout--master-detail,
+//  s-list-page-layout.list-page-layout--master-detail .list-page-layout {
+//    --list-page-layout-sidebar-width: 15rem;
+//    --list-page-master-width: 18.5rem;
+//    --list-page-layout-main-padding: 0.75rem;
+//  }
+//}

package/styles/components/mobile-list-directives.scss

@@ -0,0 +1,355 @@
+m-list > .m-list.m-list--feed {
+  margin: 0;
+  border: 0;
+  border-radius: 0;
+  overflow: hidden;
+  background: #ffffff;
+  box-shadow: none;
+}
+
+m-list > .m-list.m-list--feed .m-item {
+  align-items: center;
+  background: #ffffff;
+}
+
+m-list > .m-list.m-list--feed .m-item--clickable:hover {
+  background: #f8fafc;
+}
+
+m-list > .m-list.m-list--feed .m-item__start,
+m-list > .m-list.m-list--feed .m-item__media {
+  align-items: center;
+}
+
+m-list > .m-list.m-list--feed .m-item__actions {
+  min-width: 20px;
+  max-width: 46px;
+  overflow: visible;
+  color: #aeb6c2;
+}
+
+.m-item .m-item-menu-icon {
+  width: 28px;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: #111111;
+}
+
+.m-item .m-item-menu-chevron {
+  width: 22px;
+  height: 22px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: #98a1af;
+}
+
+.m-item .m-item-profile-avatar {
+  width: var(--m-item-avatar-size, 40px);
+  height: var(--m-item-avatar-size, 40px);
+  flex: 0 0 var(--m-item-avatar-size, 40px);
+  display: inline-grid;
+  place-items: center;
+  border-radius: 999px;
+  background:
+    radial-gradient(
+      circle at 50% 28%,
+      rgb(255 255 255 / 55%) 0 12%,
+      transparent 13%
+    ),
+    var(--m-item-profile-avatar-bg, linear-gradient(135deg, #64748b, #cbd5e1));
+  box-shadow: inset 0 0 0 1px rgb(15 23 42 / 6%);
+  color: #ffffff;
+  font-size: 17px;
+  font-weight: 700;
+}
+
+.m-item-profile-avatar--amber,
+.m-item-profile-avatar--orange {
+  --m-item-profile-avatar-bg: linear-gradient(135deg, #c2410c, #fed7aa);
+}
+
+.m-item-profile-avatar--blue,
+.m-item-profile-avatar--sky {
+  --m-item-profile-avatar-bg: linear-gradient(135deg, #2563eb, #7dd3fc);
+}
+
+.m-item-profile-avatar--cyan {
+  --m-item-profile-avatar-bg: linear-gradient(135deg, #0f766e, #67e8f9);
+}
+
+.m-item-profile-avatar--green,
+.m-item-profile-avatar--mint {
+  --m-item-profile-avatar-bg: linear-gradient(135deg, #166534, #86efac);
+}
+
+.m-item-profile-avatar--purple {
+  --m-item-profile-avatar-bg: linear-gradient(135deg, #9333ea, #7dd3fc);
+}
+
+.m-item-profile-avatar--rose {
+  --m-item-profile-avatar-bg: linear-gradient(135deg, #f97316, #f9a8d4);
+}
+
+.m-item-profile-avatar--slate {
+  --m-item-profile-avatar-bg: linear-gradient(135deg, #111827, #cbd5e1);
+}
+
+.m-item-profile-avatar--warm {
+  --m-item-profile-avatar-bg: linear-gradient(135deg, #7c2d12, #fed7aa);
+}
+
+.m-item .m-item-profile-title {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+}
+
+.m-item .m-item-profile-name {
+  min-width: 0;
+  overflow: hidden;
+  color: #111827;
+  font-size: 17px;
+  font-weight: 500;
+  line-height: 24px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.m-item .m-item-presence {
+  width: 8px;
+  height: 8px;
+  flex: 0 0 auto;
+  box-sizing: border-box;
+  border: 2px solid #b9c1cc;
+  border-radius: 999px;
+  background: #ffffff;
+}
+
+.m-item .m-item-presence--online {
+  border-color: #31c86a;
+  background: #31c86a;
+}
+
+.m-item .m-item-avatar-frame {
+  width: var(--m-item-avatar-size, 48px);
+  height: var(--m-item-avatar-size, 48px);
+  flex: 0 0 var(--m-item-avatar-size, 48px);
+}
+
+.m-item .m-item-avatar-portrait,
+.m-item .m-item-avatar-face {
+  position: relative;
+  display: inline-flex;
+  overflow: hidden;
+  border-radius: 999px;
+  background:
+    radial-gradient(circle at 50% 38%, #f7cbb4 0 20%, transparent 21%),
+    radial-gradient(
+      circle at 50% 29%,
+      var(--m-item-avatar-hair, #26313f) 0 25%,
+      transparent 26%
+    ),
+    linear-gradient(
+      180deg,
+      var(--m-item-avatar-sky, #d7f4f7) 0 58%,
+      var(--m-item-avatar-shirt, #4bb7c8) 59% 100%
+    );
+  box-shadow: inset 0 0 0 1px rgb(15 23 42 / 6%);
+}
+
+.m-item .m-item-avatar-portrait::before,
+.m-item .m-item-avatar-face::before {
+  position: absolute;
+  left: 50%;
+  top: 52%;
+  width: 40%;
+  height: 18%;
+  border-radius: 999px 999px 0 0;
+  background: var(--m-item-avatar-shirt, #4bb7c8);
+  transform: translateX(-50%);
+  content: "";
+}
+
+.m-item .m-item-avatar-portrait::after,
+.m-item .m-item-avatar-face::after {
+  position: absolute;
+  left: 50%;
+  top: 36%;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: #1f2937;
+  box-shadow: 10px 0 0 #1f2937;
+  transform: translateX(-8px);
+  content: "";
+}
+
+.m-item .m-item-avatar-portrait {
+  width: var(--m-item-avatar-size, 48px);
+  height: var(--m-item-avatar-size, 48px);
+}
+
+.m-item .m-item-avatar-group {
+  display: grid;
+  grid-template-columns: repeat(2, 23px);
+  grid-template-rows: repeat(2, 23px);
+  gap: 2px;
+  align-content: center;
+  justify-content: center;
+  overflow: visible;
+}
+
+.m-item .m-item-avatar-face {
+  width: 23px;
+  height: 23px;
+}
+
+.m-item .m-item-avatar-face::after {
+  width: 2px;
+  height: 2px;
+  box-shadow: 5px 0 0 #1f2937;
+  transform: translateX(-4px);
+}
+
+.m-item .m-item-avatar-icon {
+  --m-item-avatar-icon-size: 35px;
+
+  width: var(--m-item-avatar-icon-size);
+  height: var(--m-item-avatar-icon-size);
+  flex: 0 0 var(--m-item-avatar-icon-size);
+  display: inline-grid;
+  place-items: center;
+  border-radius: var(--m-item-avatar-icon-radius, 999px);
+  background: var(--m-item-avatar-icon-bg, #34d399);
+  color: #ffffff;
+  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 45%);
+}
+
+.m-item-avatar-icon--circle {
+  --m-item-avatar-icon-radius: 999px;
+}
+
+.m-item-avatar-icon--rounded-square {
+  --m-item-avatar-icon-radius: 8px;
+}
+
+.m-item-avatar-icon--square {
+  --m-item-avatar-icon-radius: 4px;
+}
+
+.m-item-avatar-tone--amber,
+.m-item-avatar-tone--orange,
+.m-item-avatar-tone--warm {
+  --m-item-avatar-hair: #3b2415;
+  --m-item-avatar-sky: #ffedd5;
+  --m-item-avatar-shirt: #f97316;
+}
+
+.m-item-avatar-tone--blue,
+.m-item-avatar-tone--sky {
+  --m-item-avatar-hair: #1e3a8a;
+  --m-item-avatar-sky: #dbeafe;
+  --m-item-avatar-shirt: #3b82f6;
+}
+
+.m-item-avatar-tone--cyan,
+.m-item-avatar-tone--mint {
+  --m-item-avatar-hair: #1e293b;
+  --m-item-avatar-sky: #d9f8fb;
+  --m-item-avatar-shirt: #33b6cd;
+}
+
+.m-item-avatar-tone--green {
+  --m-item-avatar-hair: #1f2937;
+  --m-item-avatar-sky: #dcfce7;
+  --m-item-avatar-shirt: #22c55e;
+}
+
+.m-item-avatar-tone--purple {
+  --m-item-avatar-hair: #111827;
+  --m-item-avatar-sky: #f5d0fe;
+  --m-item-avatar-shirt: #8b5cf6;
+}
+
+.m-item-avatar-tone--rose {
+  --m-item-avatar-hair: #26202a;
+  --m-item-avatar-sky: #fde2e4;
+  --m-item-avatar-shirt: #60c7be;
+}
+
+.m-item-avatar-tone--slate {
+  --m-item-avatar-hair: #111827;
+  --m-item-avatar-sky: #e5e7eb;
+  --m-item-avatar-shirt: #64748b;
+}
+
+.m-item-avatar-icon--amber,
+.m-item-avatar-icon--orange,
+.m-item-avatar-icon--warm {
+  --m-item-avatar-icon-bg: linear-gradient(135deg, #f97316, #fb923c);
+}
+
+.m-item-avatar-icon--blue,
+.m-item-avatar-icon--sky {
+  --m-item-avatar-icon-bg: linear-gradient(135deg, #3b82f6, #60a5fa);
+}
+
+.m-item-avatar-icon--cyan,
+.m-item-avatar-icon--mint {
+  --m-item-avatar-icon-bg: linear-gradient(135deg, #06b6d4, #14b8a6);
+}
+
+.m-item-avatar-icon--green {
+  --m-item-avatar-icon-bg: linear-gradient(135deg, #22c55e, #34d399);
+}
+
+.m-item-avatar-icon--purple {
+  --m-item-avatar-icon-bg: linear-gradient(135deg, #8b5cf6, #a78bfa);
+}
+
+.m-item-avatar-icon--rose {
+  --m-item-avatar-icon-bg: linear-gradient(135deg, #f43f5e, #fb7185);
+}
+
+.m-item-avatar-icon--slate {
+  --m-item-avatar-icon-bg: linear-gradient(135deg, #475569, #94a3b8);
+}
+
+.m-item .m-item-indicator {
+  min-width: 20px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.m-item .m-item-badge {
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  border-radius: 9px;
+  background: #f52936;
+  color: #ffffff;
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 18px;
+}
+
+.m-item .m-item-unread-dot {
+  width: 9px;
+  height: 9px;
+  border-radius: 999px;
+  background: #f52936;
+  box-shadow: 0 0 0 1px rgb(245 41 54 / 12%);
+}
+
+.m-item .m-item-marker {
+  color: #aeb6c2;
+}