@propbinder/mobile-design 0.4.0 → 0.4.4

package/styles/mobile-page-base.css

@@ -1,338 +1,338 @@
-/* ============================================
-   MOBILE PAGE BASE STYLES
-   Shared styles for mobile pages
-   Import this in your page component's styleUrls
-   ============================================ */
-
-/* ============================================
-   HOST
-   ============================================ */
-
-:host {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  height: 100%;
-  /* Solid background to cover overlay from page underneath during transitions */
-  background: var(--color-header-surface);
-  width: 100%;
-}
-
-/* ============================================
-   SHARED ION-HEADER STYLES
-   ============================================ */
-
-:host ion-header {
-  background: var(--color-header-surface);
-  box-shadow: none;
-  height: 72px;
-  min-height: 72px;
-  margin-top: var(--app-header-top-offset);
-}
-
-:host ion-header ion-toolbar {
-  --background: var(--color-header-surface);
-  --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;
-}
-
-@media (min-width: 768px) {
-  :host ion-header {
-    height: 88px;
-    min-height: 88px;
-  }
-
-  :host ion-header ion-toolbar {
-    --min-height: 88px;
-    height: 88px;
-    min-height: 88px;
-  }
-}
-
-/* Hide header on desktop when using ds-mobile-tabs top bar */
-/* Note: This only applies to components using ds-mobile-page-main/ds-mobile-page-details */
-/* Pages that need the header visible on desktop should override this */
-@media (min-width: 768px) {
-  :host ion-header {
-    display: none;
-    height: auto;
-  }
-}
-
-/* ============================================
-   SHARED HEADER CONTAINER PATTERNS
-   ============================================ */
-
-/* Common flex container pattern for header content */
-:host .header-main,
-:host .header-details,
-.header-details {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background: var(--color-header-surface);
-  position: relative;
-}
-
-/* Common centered title pattern */
-:host .header-main__title,
-:host .header-details .header-title,
-.header-details .header-title {
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  font-size: var(--font-size-base);
-  font-weight: 600;
-  color: var(--color-header-content);
-  margin: 0;
-  padding: 0;
-  --color: var(--color-header-content);
-}
-
-/* Scroll behavior for header-details title (hidden initially, shows on scroll) */
-.header-details .header-title {
-  transform: translateX(-50%) translateY(-100%);
-  opacity: 0 !important;
-  pointer-events: none;
-  transition: transform 0.2s ease, opacity 0.2s ease !important;
-}
-
-/* Show title when scrolled */
-.header-scrolled .header-details .header-title {
-  opacity: 1 !important;
-  pointer-events: auto;
-  transform: translateX(-50%) translateY(0);
-}
-
-/* Back button styles for detail pages */
-:host .header-details .back-button,
-.header-details .back-button {
-  background: none;
-  border: none;
-  padding: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  color: var(--color-header-content);
-  transition: opacity var(--transition-duration-fast, 0.2s) var(--ease-smooth, ease);
-  z-index: 10;
-  position: relative;
-}
-
-:host .header-details .back-button:hover,
-.header-details .back-button:hover {
-  opacity: 0.8;
-}
-
-:host .header-details .back-button:active,
-.header-details .back-button:active {
-  opacity: 0.6;
-}
-
-/* ============================================
-   SHARED ION-CONTENT STYLES
-   ============================================ */
-
-:host ion-content {
-  --background: var(--color-header-surface);
-  --padding-top: 0;
-  --padding-start: 0;
-  --padding-end: 0;
-  --padding-bottom: 0;
-  border-radius: 24px 24px 0 0;
-  overflow: hidden;
-}
-
-/* Make ion-content scroll area a flex container */
-:host ion-content::part(scroll) {
-  display: flex;
-  flex-direction: column;
-  min-height: 100%;
-  -webkit-overflow-scrolling: touch;
-  /* Note: Do NOT set overscroll-behavior-y here as it prevents ion-refresher from working */
-  /* overscroll-behavior on ion-app is sufficient to block native browser pull-to-refresh */
-}
-
-/* iOS-specific: White background for bottom overshoot */
-.plt-ios :host ion-content {
-  --background: var(--color-background-neutral-primary);
-}
-
-/* Desktop only: remove bottom radius */
-@media (min-width: 768px) {
-  :host ion-content {
-    border-radius: 24px 24px 0 0;
-  }
-}
-
-/* ============================================
-   CONDENSED HEADER
-   ============================================ */
-
-:host ion-header[collapse="condense"] {
-  display: none;
-}
-
-@media (min-width: 768px) {
-  :host ion-header[collapse="condense"] {
-    display: none;
-  }
-}
-
-/* ============================================
-   REFRESHER
-   ============================================ */
-
-:host ion-refresher {
-  z-index: 0;
-}
-
-:host ion-refresher-content {
-  --color: var(--color-header-content);
-}
-
-/* ============================================
-   SHARED CONTENT WRAPPER STYLES
-   ============================================ */
-
-:host .content-wrapper {
-  width: 100%;
-  position: relative;
-  z-index: 20;
-  /* Fill remaining viewport height while keeping ion-content as scroller */
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  background: var(--color-background-neutral-primary);
-  border-radius: 24px 24px 0 0;
-  overflow: visible;
-  
-  /* Visual styling for iOS overshoot - extend background below using box-shadow */
-  transform: translateZ(0);
-  will-change: transform;
-  isolation: isolate;
-  box-shadow: 0 300px 0 0 var(--color-background-neutral-primary);
-  
-  /* No top padding - ds-mobile-section provides its own */
-  padding-top: 0;
-  padding-left: var(--content-wrapper-padding, 20px);
-  padding-right: var(--content-wrapper-padding, 20px);
-  /* Bottom padding ALWAYS preserved for safe area and tab bar */
-  padding-bottom: calc(var(--mobile-content-spacing) + var(--mobile-tab-bar-height) + var(--app-safe-bottom, 0px));
-}
-
-:host .content-inner {
-  /* Mobile-first: max-width 640px, centered */
-  max-width: 640px;
-  margin: 0 auto;
-  width: 100%;
-}
-
-@media (min-width: 768px) {
-  :host .content-wrapper {
-    /* Remove top padding since ds-mobile-section provides its own */
-    padding-top: 0;
-    padding-left: var(--content-wrapper-padding, 20px);
-    padding-right: var(--content-wrapper-padding, 20px);
-  }
-}
-
-/* ============================================
-   EXPANDABLE HEADER (for main pages only)
-   ============================================ */
-
-:host .header-expandable {
-  background: var(--color-header-surface);
-  padding: 32px 20px 24px 20px;
-  color: var(--header-content-color, white);
-  position: sticky;
-  top: 0;
-  z-index: 5;
-  transition: opacity 0.1s ease-out, transform 0.1s ease-out;
-  /* ion-content::part(scroll) is a flex column + .content-wrapper has flex:1 — sticky flex items
-     can otherwise shrink to a single line (~56px) and padding looks “gone” */
-  flex: 0 0 auto;
-  min-height: -moz-min-content;
-  min-height: min-content;
-}
-
-:host .header-expandable-inner {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  max-width: 640px;
-  margin: 0 auto;
-}
-
-:host .header-expandable__text {
-  margin-bottom: 0;
-  gap: 4px;
-  display: flex;
-  flex-direction: column;
-}
-
-:host .header-expandable__title {
-  font-size: var(--font-size-2xl);
-  font-weight: 600;
-  color: var(--header-content-color, white);
-  margin: 0;
-}
-
-:host .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) {
-  :host .header-expandable {
-    padding: 48px 20px 32px 20px;
-  }
-
-  :host .header-expandable__title {
-    font-size: var(--font-size-3xl);
-  }
-
-  :host .header-expandable__subtitle {
-    font-size: var(--font-size-base);
-  }
-}
-
-@media (min-width: 992px) {
-  :host .header-expandable {
-    padding-left: var(--content-padding-lg);
-    padding-right: var(--content-padding-lg);
-  }
-}
-
-@media (min-width: 1440px) {
-  :host .header-expandable {
-    padding-left: var(--content-padding-xl);
-    padding-right: var(--content-padding-xl);
-  }
-}
-
-@media (min-width: 1768px) {
-  :host .header-expandable {
-    padding-left: var(--content-padding-2xl);
-    padding-right: var(--content-padding-2xl);
-  }
-}
-
-@media (min-width: 1920px) {
-  :host .header-expandable {
-    padding-left: var(--content-padding-3xl);
-    padding-right: var(--content-padding-3xl);
-  }
-}
+/* ============================================
+   MOBILE PAGE BASE STYLES
+   Shared styles for mobile pages
+   Import this in your page component's styleUrls
+   ============================================ */
+
+/* ============================================
+   HOST
+   ============================================ */
+
+:host {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
+  /* Solid background to cover overlay from page underneath during transitions */
+  background: var(--color-header-surface);
+  width: 100%;
+}
+
+/* ============================================
+   SHARED ION-HEADER STYLES
+   ============================================ */
+
+:host ion-header {
+  background: var(--color-header-surface);
+  box-shadow: none;
+  height: 72px;
+  min-height: 72px;
+  margin-top: var(--app-header-top-offset);
+}
+
+:host ion-header ion-toolbar {
+  --background: var(--color-header-surface);
+  --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;
+}
+
+@media (min-width: 768px) {
+  :host ion-header {
+    height: 88px;
+    min-height: 88px;
+  }
+
+  :host ion-header ion-toolbar {
+    --min-height: 88px;
+    height: 88px;
+    min-height: 88px;
+  }
+}
+
+/* Hide header on desktop when using ds-mobile-tabs top bar */
+/* Note: This only applies to components using ds-mobile-page-main/ds-mobile-page-details */
+/* Pages that need the header visible on desktop should override this */
+@media (min-width: 768px) {
+  :host ion-header {
+    display: none;
+    height: auto;
+  }
+}
+
+/* ============================================
+   SHARED HEADER CONTAINER PATTERNS
+   ============================================ */
+
+/* Common flex container pattern for header content */
+:host .header-main,
+:host .header-details,
+.header-details {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: var(--color-header-surface);
+  position: relative;
+}
+
+/* Common centered title pattern */
+:host .header-main__title,
+:host .header-details .header-title,
+.header-details .header-title {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: var(--font-size-base);
+  font-weight: 600;
+  color: var(--color-header-content);
+  margin: 0;
+  padding: 0;
+  --color: var(--color-header-content);
+}
+
+/* Scroll behavior for header-details title (hidden initially, shows on scroll) */
+.header-details .header-title {
+  transform: translateX(-50%) translateY(-100%);
+  opacity: 0 !important;
+  pointer-events: none;
+  transition: transform 0.2s ease, opacity 0.2s ease !important;
+}
+
+/* Show title when scrolled */
+.header-scrolled .header-details .header-title {
+  opacity: 1 !important;
+  pointer-events: auto;
+  transform: translateX(-50%) translateY(0);
+}
+
+/* Back button styles for detail pages */
+:host .header-details .back-button,
+.header-details .back-button {
+  background: none;
+  border: none;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: var(--color-header-content);
+  transition: opacity var(--transition-duration-fast, 0.2s) var(--ease-smooth, ease);
+  z-index: 10;
+  position: relative;
+}
+
+:host .header-details .back-button:hover,
+.header-details .back-button:hover {
+  opacity: 0.8;
+}
+
+:host .header-details .back-button:active,
+.header-details .back-button:active {
+  opacity: 0.6;
+}
+
+/* ============================================
+   SHARED ION-CONTENT STYLES
+   ============================================ */
+
+:host ion-content {
+  --background: var(--color-header-surface);
+  --padding-top: 0;
+  --padding-start: 0;
+  --padding-end: 0;
+  --padding-bottom: 0;
+  border-radius: 24px 24px 0 0;
+  overflow: hidden;
+}
+
+/* Make ion-content scroll area a flex container */
+:host ion-content::part(scroll) {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+  -webkit-overflow-scrolling: touch;
+  /* Note: Do NOT set overscroll-behavior-y here as it prevents ion-refresher from working */
+  /* overscroll-behavior on ion-app is sufficient to block native browser pull-to-refresh */
+}
+
+/* iOS-specific: White background for bottom overshoot */
+.plt-ios :host ion-content {
+  --background: var(--color-background-neutral-primary);
+}
+
+/* Desktop only: remove bottom radius */
+@media (min-width: 768px) {
+  :host ion-content {
+    border-radius: 24px 24px 0 0;
+  }
+}
+
+/* ============================================
+   CONDENSED HEADER
+   ============================================ */
+
+:host ion-header[collapse="condense"] {
+  display: none;
+}
+
+@media (min-width: 768px) {
+  :host ion-header[collapse="condense"] {
+    display: none;
+  }
+}
+
+/* ============================================
+   REFRESHER
+   ============================================ */
+
+:host ion-refresher {
+  z-index: 0;
+}
+
+:host ion-refresher-content {
+  --color: var(--color-header-content);
+}
+
+/* ============================================
+   SHARED CONTENT WRAPPER STYLES
+   ============================================ */
+
+:host .content-wrapper {
+  width: 100%;
+  position: relative;
+  z-index: 20;
+  /* Fill remaining viewport height while keeping ion-content as scroller */
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background: var(--color-background-neutral-primary);
+  border-radius: 24px 24px 0 0;
+  overflow: visible;
+  
+  /* Visual styling for iOS overshoot - extend background below using box-shadow */
+  transform: translateZ(0);
+  will-change: transform;
+  isolation: isolate;
+  box-shadow: 0 300px 0 0 var(--color-background-neutral-primary);
+  
+  /* No top padding - ds-mobile-section provides its own */
+  padding-top: 0;
+  padding-left: var(--content-wrapper-padding, 20px);
+  padding-right: var(--content-wrapper-padding, 20px);
+  /* Bottom padding ALWAYS preserved for safe area and tab bar */
+  padding-bottom: calc(var(--mobile-content-spacing) + var(--mobile-tab-bar-height) + var(--app-safe-bottom, 0px));
+}
+
+:host .content-inner {
+  /* Mobile-first: max-width 640px, centered */
+  max-width: 640px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+@media (min-width: 768px) {
+  :host .content-wrapper {
+    /* Remove top padding since ds-mobile-section provides its own */
+    padding-top: 0;
+    padding-left: var(--content-wrapper-padding, 20px);
+    padding-right: var(--content-wrapper-padding, 20px);
+  }
+}
+
+/* ============================================
+   EXPANDABLE HEADER (for main pages only)
+   ============================================ */
+
+:host .header-expandable {
+  background: var(--color-header-surface);
+  padding: 32px 20px 24px 20px;
+  color: var(--header-content-color, white);
+  position: sticky;
+  top: 0;
+  z-index: 5;
+  transition: opacity 0.1s ease-out, transform 0.1s ease-out;
+  /* ion-content::part(scroll) is a flex column + .content-wrapper has flex:1 — sticky flex items
+     can otherwise shrink to a single line (~56px) and padding looks “gone” */
+  flex: 0 0 auto;
+  min-height: -moz-min-content;
+  min-height: min-content;
+}
+
+:host .header-expandable-inner {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  max-width: 640px;
+  margin: 0 auto;
+}
+
+:host .header-expandable__text {
+  margin-bottom: 0;
+  gap: 4px;
+  display: flex;
+  flex-direction: column;
+}
+
+:host .header-expandable__title {
+  font-size: var(--font-size-2xl);
+  font-weight: 600;
+  color: var(--header-content-color, white);
+  margin: 0;
+}
+
+:host .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) {
+  :host .header-expandable {
+    padding: 48px 20px 32px 20px;
+  }
+
+  :host .header-expandable__title {
+    font-size: var(--font-size-3xl);
+  }
+
+  :host .header-expandable__subtitle {
+    font-size: var(--font-size-base);
+  }
+}
+
+@media (min-width: 992px) {
+  :host .header-expandable {
+    padding-left: var(--content-padding-lg);
+    padding-right: var(--content-padding-lg);
+  }
+}
+
+@media (min-width: 1440px) {
+  :host .header-expandable {
+    padding-left: var(--content-padding-xl);
+    padding-right: var(--content-padding-xl);
+  }
+}
+
+@media (min-width: 1768px) {
+  :host .header-expandable {
+    padding-left: var(--content-padding-2xl);
+    padding-right: var(--content-padding-2xl);
+  }
+}
+
+@media (min-width: 1920px) {
+  :host .header-expandable {
+    padding-left: var(--content-padding-3xl);
+    padding-right: var(--content-padding-3xl);
+  }
+}