// Correctly inherit ion-text-wrap onto labels. ion-item.ion-text-wrap ion-label { white-space: normal !important; } // Ionic toolbar. ion-toolbar ion-back-button, ion-toolbar .in-toolbar.button-clear { --color: var(--ion-color-primary-contrast); } // Ionic icon. ion-icon { &.icon-slash::after, &.icon-backslash::after { content: " "; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: var(--ion-color-danger); -webkit-mask: url("/assets/fonts/font-awesome/solid/slash.svg") no-repeat 50% 50%; mask: url("/assets/fonts/font-awesome/solid/slash.svg") no-repeat 50% 50%; } &.icon-slash::after { -webkit-transform: scale(-1, 1); transform: scale(-1, 1); } &.fa-fw { text-align: center; width: 1.25em; } } [dir=rtl] ion-icon.icon-flip-rtl { -webkit-transform: scale(-1, 1); transform: scale(-1, 1); } // Ionic alert. ion-alert.core-alert-network-error .alert-head { position: relative; content: " "; background: url("/assets/fonts/font-awesome/solid/wifi.svg") no-repeat 50% 50%; margin: 25px auto; &::after { content: " "; position: absolute; top: -20%; right: -15%; width: 50%; height: 50%; background-color: var(--ion-color-danger); -webkit-mask: url("/assets/fonts/font-awesome/solid/exclamation-triangle.svg") no-repeat 50% 50%; mask: url("/assets/fonts/font-awesome/solid/exclamation-triangle.svg") no-repeat 50% 50%; } } [dir=rtl] ion-alert.core-alert-network-error .alert-head::after { right: unset; left: -15%; } // Ionic item divider. ion-item-divider { --background: var(--gray-lighter); border: 0; } // Ionic list. ion-list.list-md { padding-bottom: 0; } // Modals. .core-modal-fullscreen .modal-wrapper { position: absolute; // @todo @include position(0 !important, null, null, 0 !important); display: block; width: 100% !important; height: 100% !important; } .core-modal-force-on-top { z-index: 100000 !important; } // Hidden submit button. .core-submit-hidden-enter { position: absolute; visibility: hidden; left: -1000px; } // Note on foot of ion-input. .item .core-input-footnote { width: 100%; font-style: italic; margin-top: 0; margin-bottom: 10px; font-size: 14px; } // Avatar // ------------------------- // Large centered avatar img.large-avatar { display: block; margin: auto; width: 90px; height: 90px; max-width: 90px; max-height: 90px; margin-bottom: 10px; border-radius : 50%; padding: 4px; border: 1px solid #ddd; background-color: transparent; } ion-avatar ion-img, ion-avatar img { text-indent: -99999px; background-color: --var(--gray-light); }