Vmeda.Online/src/app/app.ios.scss

114 lines
3.3 KiB
SCSS

ion-app.app-root.ios {
.button-ios {
min-height: $button-ios-height;
}
ion-searchbar.searchbar-ios .button-ios {
min-height: auto;
}
// Light buttons color.
.button-ios-light {
color: color($colors, primary, base);
}
.col[align-self-stretch] .card-ios {
height: calc(100% - #{($card-ios-margin-end + $card-ios-margin-start)});
}
.bar-buttons core-context-menu .button-clear-ios {
color: $toolbar-ios-button-color;
}
.item-ios ion-spinner[item-start],
.item-ios ion-spinner[item-end] {
@include margin($item-ios-padding-icon-top, null, $item-ios-padding-icon-bottom, 0);
}
.item-ios ion-icon[item-start] + .item-inner,
.item-ios ion-icon[item-start] + .item-input,
.item-ios img[item-start] + .item-inner,
.item-ios img[item-start] + .item-input {
@include margin-horizontal($item-ios-padding-start, null);
}
.item-ios ion-avatar[item-start] + .item-inner,
.item-ios ion-avatar[item-start] + .item-input {
@include margin-horizontal(0, null);
}
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
.core-#{$color-name}-card {
@extend .card-ios ;
@extend .card-content-ios;
&[icon-start] {
@include padding(null, null, null, $card-ios-padding-left * 2 + 20);
ion-icon {
@include position(null, null, null, $card-ios-padding-left);
}
}
}
}
.core-avoid-header ion-content {
top: $navbar-ios-height;
height: calc(100% - #{($navbar-ios-height)});
}
&.platform-cordova .core-avoid-header ion-content.statusbar-padding,
&.platform-cordova .core-avoid-header .menu-inner > ion-content {
height: calc(100% - #{($navbar-ios-height + $cordova-ios-statusbar-padding)});
height: calc(100% - #{($navbar-ios-height)} - constant(safe-area-inset-top));
height: calc(100% - #{($navbar-ios-height)} - env(safe-area-inset-top));
top: calc(#{$navbar-ios-height + $cordova-ios-statusbar-padding});
top: calc(#{$navbar-ios-height} + constant(safe-area-inset-top));
top: calc(#{$navbar-ios-height} + env(safe-area-inset-top));
}
&.platform-cordova .core-avoid-header .core-avoid-header .menu-inner > ion-content,
core-tab core-split-view .core-avoid-header .menu-inner > ion-content {
top: 0;
height: 100%;
}
// Different levels of padding.
@for $i from 0 through 15 {
.core-padding-#{$i} {
@include padding(null, null, null, 15px * $i + $item-ios-padding-start);
}
}
.radio-ios .radio-icon {
@include position(0, null, null, 0);
@include margin(0);
@include border-radius($radio-md-icon-border-radius);
position: relative;
display: block;
width: $checkbox-ios-icon-size;
height: $checkbox-ios-icon-size;
border-width: $checkbox-ios-icon-border-width;
border-style: $checkbox-ios-icon-border-style;
border-color: $checkbox-ios-icon-border-color-off;
background-color: $checkbox-ios-background-color-off;
}
// File Uploader
// In iOS the input is 1 level higher, so the styles are different.
.action-sheet-ios input.core-fileuploader-file-handler-input {
position: absolute;
@include position(null, 0, null, 0);
min-width: 100%;
min-height: $action-sheet-ios-button-min-height;
opacity: 0;
outline: none;
z-index: 100;
cursor: pointer;
}
}