@mmlogic/components 0.5.14 → 0.5.16

package/dist/collection/components/memo/mrd-memo-list/mrd-memo-list.css

@@ -0,0 +1,164 @@
+@charset "UTF-8";
+:host {
+  display: block;
+}
+
+.mrd-memo-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mrd-space-3);
+}
+.mrd-memo-list__card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mrd-space-2);
+  width: 100%;
+  padding: var(--mrd-space-4);
+  background: var(--mrd-color-white);
+  border: var(--mrd-border-width) solid var(--mrd-border-color);
+  border-radius: var(--mrd-border-radius-md);
+  font-family: var(--mrd-font-family);
+  text-align: left;
+  cursor: pointer;
+  transition: border-color var(--mrd-transition), box-shadow var(--mrd-transition);
+}
+.mrd-memo-list__card:hover {
+  border-color: var(--mrd-color-primary);
+  box-shadow: var(--mrd-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.06));
+}
+.mrd-memo-list__card:focus-visible {
+  outline: none;
+  box-shadow: var(--mrd-shadow-focus);
+}
+.mrd-memo-list__card--readonly {
+  cursor: default;
+}
+.mrd-memo-list__card--readonly:hover {
+  border-color: var(--mrd-border-color);
+  box-shadow: none;
+}
+.mrd-memo-list__card-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--mrd-space-2);
+}
+.mrd-memo-list__card-title {
+  font-size: var(--mrd-font-size-base);
+  font-weight: var(--mrd-font-weight-semibold);
+  color: var(--mrd-color-neutral-900);
+}
+.mrd-memo-list__card-important {
+  display: inline-flex;
+  flex-shrink: 0;
+  color: var(--mrd-color-warning);
+}
+.mrd-memo-list__card-important svg {
+  width: 1rem;
+  height: 1rem;
+}
+.mrd-memo-list__card-body-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--mrd-space-1);
+}
+.mrd-memo-list__card-body {
+  margin: 0;
+  font-size: var(--mrd-font-size-sm);
+  color: var(--mrd-color-neutral-600);
+  line-height: var(--mrd-line-height-relaxed);
+  word-break: break-word;
+}
+.mrd-memo-list__card-body p, .mrd-memo-list__card-body ul, .mrd-memo-list__card-body ol {
+  margin: 0 0 var(--mrd-space-1) 0;
+}
+.mrd-memo-list__card-body--clamped {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.mrd-memo-list__card-toggle {
+  background: none;
+  border: none;
+  padding: 0;
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-font-size-xs);
+  font-weight: var(--mrd-font-weight-medium);
+  color: var(--mrd-color-primary);
+  cursor: pointer;
+}
+.mrd-memo-list__card-toggle:hover {
+  text-decoration: underline;
+}
+.mrd-memo-list__labels {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--mrd-space-2);
+}
+.mrd-memo-list__badge {
+  display: inline-flex;
+  align-items: center;
+  height: 1.25rem;
+  padding: 0 var(--mrd-space-2);
+  border-radius: var(--mrd-border-radius-full, 999px);
+  font-size: var(--mrd-font-size-xs);
+  font-weight: var(--mrd-font-weight-medium);
+}
+.mrd-memo-list__badge--plain {
+  background: var(--mrd-color-neutral-100);
+  color: var(--mrd-color-neutral-600);
+}
+.mrd-memo-list__card-meta {
+  display: flex;
+  align-items: center;
+  gap: var(--mrd-space-2);
+  font-size: var(--mrd-font-size-xs);
+  color: var(--mrd-color-neutral-400);
+}
+.mrd-memo-list__card-author + .mrd-memo-list__card-date::before {
+  content: "·";
+  margin-right: var(--mrd-space-2);
+}
+.mrd-memo-list__card-container {
+  align-self: flex-start;
+  background: none;
+  border: none;
+  padding: 0;
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-font-size-xs);
+  font-weight: var(--mrd-font-weight-semibold);
+  color: var(--mrd-color-primary);
+  cursor: pointer;
+}
+.mrd-memo-list__card-container:hover {
+  text-decoration: underline;
+}
+.mrd-memo-list__empty {
+  padding: var(--mrd-space-6);
+  text-align: center;
+  color: var(--mrd-color-neutral-400);
+  font-size: var(--mrd-font-size-sm);
+}
+.mrd-memo-list__load-more {
+  align-self: center;
+  height: var(--mrd-input-height);
+  padding: 0 var(--mrd-space-6);
+  background: transparent;
+  color: var(--mrd-color-neutral-600);
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-font-size-sm);
+  font-weight: var(--mrd-font-weight-medium);
+  border: var(--mrd-border-width) solid var(--mrd-border-color);
+  border-radius: var(--mrd-border-radius);
+  cursor: pointer;
+  transition: background-color var(--mrd-transition);
+}
+.mrd-memo-list__load-more:hover:not(:disabled) {
+  background-color: var(--mrd-color-neutral-100);
+}
+.mrd-memo-list__load-more:disabled {
+  opacity: 0.6;
+  cursor: default;
+}