@rdlabo/ionic-theme-ios26 0.0.2 → 0.0.3

package/src/assets/ios-design/ion-searchbar.scss

@@ -1,44 +0,0 @@
-@use '../ios-variables';
-
-.ios {
-  .toolbar-searchbar::part(container) {
-    padding-top: 3px;
-    padding-bottom: 3px;
-  }
-
-  ion-modal {
-    ion-searchbar:not(.area-searchbar) {
-      .searchbar-input-container {
-        margin: 0 6px;
-        input.searchbar-input {
-          // Modal表示でのアイコン非表示の不具合の対応
-          backdrop-filter: none;
-        }
-      }
-    }
-  }
-
-  ion-searchbar:not(.area-searchbar) {
-    min-height: 60px;
-    padding: 0;
-
-    ion-icon.searchbar-search-icon {
-      inset-inline-start: 12px;
-    }
-
-    .searchbar-input-container {
-      margin: 0 8px 0 16px;
-      align-self: center;
-      justify-self: center;
-      input.searchbar-input {
-        min-height: 44px;
-        @include ios-variables.glass-background;
-        border-radius: 20px;
-        padding-inline-start: 2.4rem !important;
-      }
-      .searchbar-clear-button {
-        padding-inline-end: 2rem !important;
-      }
-    }
-  }
-}

package/src/assets/ios-design/ion-segment.scss

@@ -1,12 +0,0 @@
-.ios {
-  ion-toolbar:not(.minimum-segment-toolbar) {
-    ion-segment {
-      width: calc(100% - 16px);
-      border-radius: 16px;
-
-      ion-segment-button::part(indicator-background) {
-        border-radius: 16px;
-      }
-    }
-  }
-}

package/src/assets/ios-design/ion-tabs.scss

@@ -1,60 +0,0 @@
-@use '../ios-variables';
-
-.ios {
-  ion-fab.inner-tab-bar {
-    right: calc(16px + var(--ion-safe-area-right, 0px));
-    bottom: var(--max-safe-area);
-    ion-fab-button {
-      &::part(native) {
-        @include ios-variables.glass-background;
-        color: rgb(var(--system-dark-rgb));
-      }
-      --background-activated: rgba(var(--system-light-rgb), 0.3);
-    }
-  }
-
-  ion-tab-bar {
-    @include ios-variables.glass-background;
-    z-index: 2;
-
-    border-radius: 40px;
-
-    width: calc(100% - 56px - 16px - 16px - 4px - 16px);
-    max-width: 400px;
-    padding: 2px 2px;
-    bottom: var(--max-safe-area);
-    left: calc(16px + var(--ion-safe-area-left, 0px));
-    position: absolute;
-    margin: auto;
-
-    transition: transform 100ms ease-out;
-    will-change: transform;
-    &:active {
-      transform: scale(1.02);
-    }
-
-    ion-tab-button {
-      & > ion-icon {
-        font-size: 30px;
-      }
-      background: rgba(var(--system-light-rgb), 0);
-      height: auto;
-      &::part(native) {
-        overflow: visible;
-      }
-
-      &.tab-selected {
-        &::part(native) {
-          backdrop-filter: blur(7px);
-          background: rgba(var(--system-tab-active-rgb), 0.1);
-          transition: background 0.2s ease;
-          border-radius: 32px;
-        }
-
-        &.ion-activated::part(native) {
-          background: rgba(var(--system-shadow-rgb), 0.02);
-        }
-      }
-    }
-  }
-}

package/src/assets/ios-design/ion-toggle.scss

@@ -1,8 +0,0 @@
-ion-toggle.ios {
-  --handle-width: 38px;
-  --handle-height: 28px;
-  &::part(track) {
-    height: 28px;
-    width: 64px;
-  }
-}

package/src/assets/ios-design/ios-design-dark.scss

@@ -1,28 +0,0 @@
-@use '../ios-variables';
-
-.ion-palette-dark.ios {
-  .ion-page ion-header > ion-toolbar > ion-buttons *,
-  .ion-page ion-footer > ion-toolbar > ion-buttons * {
-    &:not(.link-setting) {
-      opacity: 1;
-      &::part(native) {
-        opacity: 1;
-      }
-    }
-
-    &.ion-activated {
-      &::part(native) {
-        @include ios-variables.glass-background-dark-active;
-      }
-      ion-icon {
-        color: rgb(255, 255, 255) !important;
-      }
-    }
-
-    &[color='primary'][fill='outline'] {
-      &::part(native) {
-        color: var(--ion-color-primary-contrast) !important;
-      }
-    }
-  }
-}

package/src/assets/ios-design.scss

@@ -1,110 +0,0 @@
-@use 'ios-variables';
-
-@use 'ios-design/ion-popover';
-@use 'ios-design/ion-searchbar';
-@use 'ios-design/ion-tabs';
-@use 'ios-design/ion-button';
-@use 'ios-design/ion-segment';
-@use 'ios-design/ion-toggle';
-@use 'ios-design/ios-design-dark';
-
-.ios {
-  ion-toast {
-    --border-radius: 24px;
-  }
-
-  ion-card {
-    border-radius: 24px;
-  }
-
-  ion-action-sheet {
-    --button-color: var(--ion-color-medium);
-  }
-
-  .can-go-back ion-header ion-toolbar:not(.md):first-child,
-  .enable-back-button ion-header ion-toolbar:not(.md):first-child {
-    --border-width: 0;
-  }
-  ion-header.header-translucent,
-  ion-footer.footer-translucent {
-    .header-background,
-    .footer-background {
-      backdrop-filter: none;
-    }
-    ion-toolbar {
-      --border-width: 0;
-      --background: transparent;
-      --opacity: 1 !important;
-    }
-  }
-  ion-header ion-toolbar:first-child {
-    padding-right: calc(var(--ion-safe-area-right) + 4px);
-    padding-left: calc(var(--ion-safe-area-left) + 4px);
-  }
-  ion-content:not(:has(cdk-virtual-scroll-viewport)) {
-    --padding-bottom: calc(56px + var(--max-safe-area));
-  }
-
-  .ion-page {
-    :not(:has(ion-footer)) cdk-virtual-scroll-viewport {
-      margin-bottom: calc(calc(56px + var(--max-safe-area)) * -1);
-      padding-bottom: calc(56px + var(--max-safe-area));
-    }
-    ion-content > ion-header > ion-toolbar:first-child {
-      --min-height: 66px;
-    }
-
-    &.enable-back-button,
-    &.ion-page.can-go-back {
-      ion-content > ion-header > ion-toolbar:first-child {
-        --min-height: auto;
-      }
-    }
-  }
-
-  .ion-page ion-header > ion-toolbar.ion-color-primary > ion-buttons * {
-    &::part(native) {
-      box-shadow: none !important;
-      border-radius: 25px;
-      background: var(--ion-color-primary) !important;
-      border-color: var(--ion-color-primary-contrast) !important;
-      border-width: 1px !important;
-    }
-    &.ion-activated {
-      opacity: 0.4;
-      ion-icon {
-        border-color: var(--ion-color-primary-contrast) !important;
-      }
-      &::part(native) {
-        &::after {
-          background: transparent !important;
-        }
-      }
-    }
-  }
-  .ion-page ion-content:not(.background-transparent)::after,
-  ion-footer.footer-translucent::after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    height: calc(56px + var(--max-safe-area));
-    box-shadow:
-      inset 0 0 0 0 rgba(var(--system-background-rgb), 0),
-      inset 0 calc(-56px - var(--max-safe-area)) 40px -40px rgba(var(--system-background-rgb), 0.8);
-    pointer-events: none;
-    z-index: 1;
-  }
-  ion-header.header-translucent::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    width: 100%;
-    height: calc(66px + var(--ion-safe-area-top));
-    box-shadow:
-      inset 0 0 0 0 rgba(var(--system-background-rgb), 0),
-      inset 0 calc(66px + var(--ion-safe-area-top)) 20px -20px rgba(var(--system-background-rgb), 1);
-    pointer-events: none;
-    z-index: 1;
-  }
-}

package/src/assets/ios-variables.scss

@@ -1,38 +0,0 @@
-:root {
-  --system-dark-rgb: 0, 0, 0;
-  --system-light-rgb: 255, 255, 255;
-  --system-tab-active-rgb: 16, 16, 16;
-  --system-shadow-rgb: 224, 224, 224;
-  --system-background-rgb: 255, 255, 255;
-  --system-edge-rgb: 255, 255, 255;
-}
-
-.ion-palette-dark {
-  --system-dark-rgb: 255, 255, 255;
-  --system-light-rgb: 58, 58, 58;
-  --system-tab-active-rgb: 255, 255, 255;
-  --system-shadow-rgb: translarent;
-  --system-background-rgb: 0, 0, 0;
-  --system-edge-rgb: 120, 120, 120;
-}
-
-@mixin glass-background($opacity: 0.4, $blur: 6px) {
-  background: rgba(var(--system-light-rgb), $opacity);
-  backdrop-filter: saturate(240%) blur($blur);
-  box-shadow:
-    inset 0 0 8px 0 rgba(var(--system-shadow-rgb), 0.2),
-    0 0 12px 0 rgba(var(--system-shadow-rgb), 0.8);
-  border-top: 0.5px solid rgba(var(--system-edge-rgb), 1);
-  border-right: 0.5px solid rgba(var(--system-edge-rgb), 0.8);
-  border-bottom: 0.5px solid rgba(var(--system-edge-rgb), 1);
-  border-left: 0.5px solid rgba(var(--system-edge-rgb), 0.6);
-  transition: box-shadow 0.1s ease;
-}
-
-@mixin glass-background-dark-active($opacity: 0.25, $blur: 7px) {
-  background: rgba(var(--system-tab-active-rgb), $opacity);
-  backdrop-filter: saturate(180%) blur($blur);
-  box-shadow: inset 0 0 8px 0 rgba(var(--system-tab-active-rgb), 0.2);
-  border: 0.5px solid rgba(var(--system-tab-active-rgb), 0.7);
-  transition: box-shadow 0.1s ease;
-}