@propbinder/mobile-design 0.0.28 → 0.1.0

package/styles/mobile-common.css

@@ -0,0 +1,109 @@
+/**
+ * Mobile Common Styles
+ * Shared CSS classes used across multiple mobile components
+ * 
+ * USAGE IN DOWNSTREAM APPS:
+ * Import via styleUrls in your component:
+ * 
+ *   @Component({
+ *     styleUrls: [
+ *       '@propbinder/mobile-design/styles/mobile-common.css',
+ *       './your-component.scss'
+ *     ],
+ *   })
+ * 
+ * Or import in angular.json styles array for global availability:
+ * 
+ *   "styles": [
+ *     "@propbinder/mobile-design/styles/mobile-common.css",
+ *     "src/styles.scss"
+ *   ]
+ */
+
+/* Author Details Container */
+.author-details {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  flex: 1;
+}
+
+/* Author Name */
+.author-name {
+  font-family: 'Brockmann', sans-serif;
+  font-size: var(--font-size-sm);
+  font-weight: 600;
+  line-height: 20px;
+  letter-spacing: -0.3px;
+  color: var(--color-text-primary, #1a1a1a);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Author Meta (role, timestamp, etc.) */
+.author-meta {
+  font-family: 'Brockmann', sans-serif;
+  font-size: var(--font-size-xs);
+  font-weight: 400;
+  line-height: 1.2;
+  letter-spacing: -0.26px;
+  color: var(--color-text-tertiary, #737373);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.author-meta .separator {
+  color: var(--color-text-tertiary, #a0a0a0);
+}
+
+/* Variants for lightbox/overlay contexts (white text on dark bg) */
+.lightbox-context .author-name,
+.overlay-context .author-name {
+  color: rgba(255, 255, 255, 0.95);
+}
+
+.lightbox-context .author-meta,
+.overlay-context .author-meta {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.lightbox-context .author-meta .separator,
+.overlay-context .author-meta .separator {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+/* Section Headlines */
+.section-headline {
+  font-size: var(--font-size-sm);
+  font-weight: 600;
+  color: var(--text-color-default-primary);
+  padding: 16px 0;
+  margin: 0;
+  letter-spacing: -0.2px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+/* Empty State Text */
+.empty-state-title {
+  font-family: 'Brockmann', sans-serif;
+  font-size: var(--font-size-base);
+  font-weight: 600;
+  line-height: 1.3;
+  color: var(--text-color-default-primary, #202227);
+  margin: 0 0 8px 0;
+}
+
+.empty-state-description {
+  font-family: 'Brockmann', sans-serif;
+  font-size: var(--font-size-sm);
+  font-weight: 400;
+  line-height: 1.4;
+  color: var(--text-color-default-secondary, #545B66);
+  margin: 0;
+}
+

package/styles/mobile-page-base.css

@@ -0,0 +1,282 @@
+/* ============================================
+   MOBILE PAGE BASE STYLES
+   Shared styles for mobile pages
+   Import this in your page component's styleUrls
+   ============================================ */
+
+/* ============================================
+   ION-CONTENT
+   ============================================ */
+
+ion-content {
+  --background: transparent;
+  --padding-top: 0;
+  --padding-start: 0;
+  --padding-end: 0;
+  --padding-bottom: 0;
+  border-radius: 24px 24px 0 0;
+  overflow: hidden;
+}
+
+ion-content::part(scroll) {
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior-y: none;
+}
+
+/* Desktop/Tablet adjustments */
+@media (min-width: 768px) {
+  ion-content {
+    border-radius: 16px 16px 0 0;
+  }
+}
+
+/* ============================================
+   ION-HEADER
+   ============================================ */
+
+ion-header {
+  background: transparent;
+  box-shadow: none;
+  height: 72px;
+  min-height: 72px;
+}
+
+ion-header ion-toolbar {
+  --background: transparent;
+  --border-width: 0;
+  --box-shadow: none;
+  --padding-top: 0;
+  --padding-bottom: 0;
+  --padding-start: 0;
+  --padding-end: 0;
+  --min-height: 72px;
+  height: 72px;
+  min-height: 72px;
+  padding: 0;
+}
+
+/* Hide header on desktop when using ds-mobile-tabs top bar */
+@media (min-width: 768px) {
+  ion-header {
+    display: none;
+    height: auto;
+  }
+}
+
+/* ============================================
+   REFRESHER
+   ============================================ */
+
+ion-refresher {
+  z-index: 0;
+}
+
+ion-refresher-content {
+  --color: white;
+}
+
+/* ============================================
+   HEADER VARIANTS
+   ============================================ */
+
+.header-home {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 20px;
+  background: var(--color-brand-secondary);
+  height: 72px;
+}
+
+.header-home__title {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%) translateY(-100%);
+  font-size: var(--font-size-base);
+  font-weight: 600;
+  color: white;
+  opacity: 0;
+  transition: transform 0.6s ease, opacity 0.6s ease;
+  margin: 0;
+  padding: 0;
+  --color: white;
+}
+
+.header-home__actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.logomark {
+  height: 28px;
+  width: auto;
+  flex-shrink: 0;
+}
+
+/* Condensed header - hidden by default on mobile */
+ion-header[collapse="condense"] {
+  display: none;
+}
+
+/* Show title in top header when scrolled past condensed header */
+.header-scrolled .header-home__title {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0);
+}
+
+@media (min-width: 768px) {
+  .header-home {
+    padding: 16px 24px;
+  }
+  
+  .logomark {
+    height: 32px;
+  }
+
+  /* Hide title on desktop - not needed */
+  .header-home__title {
+    display: none;
+  }
+
+  /* Hide condensed header on desktop */
+  ion-header[collapse="condense"] {
+    display: none;
+  }
+}
+
+/* ============================================
+   EXPANDABLE HEADER
+   ============================================ */
+
+.header-expandable {
+  background: var(--color-brand-secondary);
+  padding: 24px 16px;
+  color: var(--header-content-color, white);
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.header-expandable-inner {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  max-width: 640px;
+  margin: 0 auto;
+}
+
+@media (min-width: 768px) {
+  .header-expandable {
+    padding: 32px var(--content-padding-md);
+  }
+}
+
+@media (min-width: 992px) {
+  .header-expandable {
+    padding-left: var(--content-padding-lg);
+    padding-right: var(--content-padding-lg);
+  }
+}
+
+@media (min-width: 1440px) {
+  .header-expandable {
+    padding-left: var(--content-padding-xl);
+    padding-right: var(--content-padding-xl);
+  }
+}
+
+@media (min-width: 1768px) {
+  .header-expandable {
+    padding-left: var(--content-padding-2xl);
+    padding-right: var(--content-padding-2xl);
+  }
+}
+
+@media (min-width: 1920px) {
+  .header-expandable {
+    padding-left: var(--content-padding-3xl);
+    padding-right: var(--content-padding-3xl);
+  }
+}
+
+.header-expandable__text {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.header-expandable__subtitle {
+  font-size: var(--font-size-sm);
+  font-weight: 400;
+  color: var(--header-content-color, white);
+  opacity: 0.85;
+  margin: 0;
+}
+
+@media (min-width: 768px) {
+  .header-expandable__subtitle {
+    font-size: var(--font-size-base);
+  }
+}
+
+/* ============================================
+   CONTENT WRAPPER
+   ============================================ */
+
+.content-wrapper {
+  position: relative;
+  z-index: 10;
+  background: var(--color-background-neutral-primary);
+  border-radius: 24px 24px 0 0;
+  padding: 0;
+}
+
+@media (min-width: 768px) {
+  .content-wrapper {
+    border-radius: 16px 16px 0 0;
+    width: 100%;
+  }
+}
+
+.content-inner {
+  padding: 20px 16px;
+}
+
+@media (min-width: 768px) {
+  .content-inner {
+    padding: 32px var(--content-padding-md);
+    max-width: calc(var(--content-max-width-md) + (var(--content-padding-md) * 2));
+    margin: 0 auto;
+    width: 100%;
+  }
+}
+
+@media (min-width: 992px) {
+  .content-inner {
+    padding: 32px var(--content-padding-lg);
+    max-width: calc(var(--content-max-width-md) + (var(--content-padding-md) * 2));
+  }
+}
+
+@media (min-width: 1440px) {
+  .content-inner {
+    padding: 32px var(--content-padding-lg);
+    max-width: calc(var(--content-max-width-lg) + (var(--content-padding-lg) * 2));
+  }
+}
+
+@media (min-width: 1768px) {
+  .content-inner {
+    /* Keep xl max-width, only increase padding */
+    padding: 32px var(--content-padding-2xl);
+  }
+}
+
+@media (min-width: 1920px) {
+  .content-inner {
+    /* Keep xl max-width, only increase padding */
+    padding: 32px var(--content-padding-3xl);
+  }
+}
+