2020-11-05 16:42:43 +01:00

130 lines
2.8 KiB
SCSS

// 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);
}