@rdlabo/ionic-theme-ios27 0.1.0 → 0.2.1

package/src/styles/utils/structured-list.scss

@@ -1,223 +0,0 @@
-@use './group-heading';
-
-$groups: ion-item-group, ion-reorder-group, ion-accordion-group, ion-radio-group;
-
-// Derive neutral list colors from the application's Ionic medium palette.
-@mixin colors($supporting-opacity, $detail-opacity) {
-  ion-item {
-    --detail-icon-color: rgb(var(--ion-color-medium-rgb));
-    --detail-icon-opacity: #{$detail-opacity};
-  }
-
-  &.list-inset {
-    ion-list-header ion-label:not(.ion-color) {
-      color: rgba(var(--ion-color-medium-rgb), $supporting-opacity);
-    }
-
-    ion-list-header ion-note:not(.ion-color),
-    > ion-note:not(.ion-color) {
-      --color: rgba(var(--ion-color-medium-rgb), #{$supporting-opacity});
-    }
-  }
-}
-
-@mixin support-text() {
-  ion-item {
-    &:has(ion-input.input-fill-outline),
-    &:has(ion-textarea.textarea-fill-outline),
-    &:has(ion-select:is([helpertext]:not([helpertext='']), [errortext]:not([errortext='']))),
-    &:has(ion-input .input-bottom > :is(.helper-text:not(:empty), .error-text:not(:empty), .counter:not(:empty))),
-    &:has(ion-textarea .textarea-bottom > :is(.helper-text:not(:empty), .error-text:not(:empty), .counter:not(:empty))) {
-      --inner-border-width: 0;
-      --inner-padding-bottom: 4px;
-    }
-
-    ion-input .input-bottom:not(:has(> :is(.helper-text:not(:empty), .error-text:not(:empty), .counter:not(:empty)))),
-    ion-textarea .textarea-bottom:not(:has(> :is(.helper-text:not(:empty), .error-text:not(:empty), .counter:not(:empty)))) {
-      display: none;
-    }
-  }
-}
-
-@mixin layout($outer-note-inset, $group-border-radius) {
-  background: transparent;
-
-  ion-list-header {
-    display: flex;
-    align-items: center;
-
-    ion-label {
-      font-size: 1rem;
-      line-height: 1.29rem;
-      font-weight: 600;
-      margin: 8px 4px 4px;
-
-      &:not(.ion-color) {
-        color: var(--ion-color-medium-tint);
-      }
-    }
-
-    ion-button {
-      margin-top: 8px;
-    }
-
-    ion-note {
-      font-size: 0.76rem;
-      line-height: 1.06rem;
-      font-weight: 400;
-      margin: 8px 16px 4px 0;
-
-      &:not(.ion-color) {
-        --color: var(--ion-color-medium-tint);
-      }
-    }
-  }
-
-  ion-item-group.item-group-header {
-    border-radius: $group-border-radius;
-
-    > ion-item {
-      --inner-padding-end: 0;
-      --inner-border-width: 0;
-
-      &::part(native) {
-        padding-inline: 0;
-      }
-    }
-
-    & > ion-item > ion-label {
-      width: 100%;
-      margin: 0;
-      text-align: start;
-      white-space: normal;
-      padding: 16px 20px;
-
-      /**
-       * ion-header.header-collapse-condenseを使って、スクロールによってHeaderを変化させるトリック
-       */
-      ion-header.header-collapse-condense > ion-toolbar {
-        --min-height: 0;
-        visibility: hidden;
-      }
-
-      ion-icon {
-        font-size: 2.82rem;
-        border-radius: 20%;
-        padding: 6px;
-        vertical-align: top;
-
-        &:not(.ion-color) {
-          color: #ffffff;
-        }
-      }
-
-      h2 {
-        @include group-heading.typography;
-        margin: 20px 0 8px;
-      }
-
-      ion-text {
-        display: block;
-        font-size: 1rem;
-        line-height: 1.29rem;
-
-        &:not(.ion-color) {
-          color: var(--ion-color-step-500, var(--ion-text-color-step-500, #808080));
-        }
-      }
-    }
-  }
-
-  > :is(#{$groups}) {
-    display: block;
-    border-radius: $group-border-radius;
-    overflow: hidden;
-
-    &:has(> .radio-group-top) {
-      display: flex;
-      flex-direction: column;
-      border-radius: 0;
-      overflow: visible;
-
-      > .radio-group-top {
-        order: 1;
-        font-size: 0.9rem;
-        padding-block-start: 8px;
-      }
-
-      > ion-item:first-of-type {
-        --border-radius: #{$group-border-radius} #{$group-border-radius} 0 0;
-      }
-
-      > ion-item:last-of-type {
-        --border-radius: 0 0 #{$group-border-radius} #{$group-border-radius};
-      }
-    }
-
-    &:not(:first-of-type) {
-      margin-top: 16px;
-    }
-
-    ion-item {
-      &:has(> ion-label:not([slot])):has(> ion-note:not([slot])) {
-        &::part(container) {
-          flex-direction: column;
-          justify-content: center;
-          padding-top: 14px;
-          padding-bottom: 14px;
-          min-height: 64px;
-        }
-        & > ion-label,
-        & > ion-note {
-          width: auto;
-          align-self: flex-start;
-        }
-        & > ion-label {
-          margin: 0;
-          font-weight: 500;
-          font-size: 1rem;
-          line-height: 1.29rem;
-        }
-        & > ion-note {
-          font-size: 0.88rem;
-          line-height: 1.18rem;
-        }
-      }
-
-      ion-text[slot='end'] {
-        padding-left: 8px;
-      }
-
-      &.item-disabled {
-        --detail-icon-opacity: 0.1;
-        opacity: 1;
-
-        & > * {
-          opacity: 0.4;
-        }
-      }
-
-      ion-button[slot='end'] {
-        &.ion-align-self-end {
-          transform: translateY(-7px);
-        }
-        ion-icon[slot='icon-only'] {
-          font-size: 1.2rem;
-          transform: translateY(4px);
-        }
-      }
-    }
-  }
-
-  & > ion-note {
-    font-size: 0.76rem;
-    line-height: 1.06rem;
-    font-weight: 400;
-    display: block;
-    margin: 8px calc(var(--ion-safe-area-right, 0) + $outer-note-inset) 8px calc(var(--ion-safe-area-left, 0) + $outer-note-inset);
-
-    &:not(.ion-color) {
-      --color: var(--ion-color-medium-tint);
-    }
-  }
-}