コントリビューターが使ってるIonicデフォルトCSS

英語よりも日本語のほうがフォントサイズが大きく見えることが多々あります。Web技術でモバイルアプリをつくることができるIonic Frameworkも例外ではなく、デフォルトテンプレートは英語では格好よくみえるのですが、テキストを日本語に入れ替えると少し野暮ったくみえがちです。

そこで、私はいつも以下を overwrite.scss として配置して、デフォルトのフォントサイズを上書きしています。これからデザインする方の参考になりましたら幸いです。

html {
  font-size: 90%;
}

ion-toolbar {
  --background: var(--ion-background-color) !important;
  & * {
    font-size: 1rem;
    font-weight: normal;
  }
  ion-buttons {
    * {
      font-size: 1rem !important;
    }

    ion-button ion-icon[slot=icon-only] {
      font-size: 1.2rem !important;
    }

    ion-back-button {
      font-size: 0.8rem !important;
    }

    ion-button[fill="outline"] {
      font-size: 0.9rem !important;
      max-height: 26px;
    }
  }
  ion-back-button {
    padding-left: 8px;
  }

  ion-segment {
    padding: 0;
  }
}

ion-alert {
  .alert-title, .alert-button {
    font-size: 1.1rem !important;
  }
  .alert-sub-title {
    font-size: 0.9rem !important;
  }
  .alert-message {
    padding-top: 8px !important;
    text-align: left !important;
    font-size: 1rem !important;

    &:empty {
      padding: 0 0 8px !important;
    }
  }
}

ion-action-sheet {
  .action-sheet-button {
    font-size: 1.05rem !important;
  }
}

/**
 * Alert作成時に `cssClass: 'alert-absolute',` が必要です
 */
.ios {
  .alert-absolute {
    position: absolute !important;
  }
}

/**
 * この設定は親に `default-font-size` が必要です
 */
.default-font-size {
  ion-input, ion-textarea, ion-label, ion-datetime, ion-select, ion-select-option, ion-note, ion-searchbar, input, textarea {
    font-size: 1rem !important;
  }
}