diff --git a/src/app/modules/data/detail/data-detail-content.scss b/src/app/modules/data/detail/data-detail-content.scss index d611fd86..719e893d 100644 --- a/src/app/modules/data/detail/data-detail-content.scss +++ b/src/app/modules/data/detail/data-detail-content.scss @@ -12,6 +12,7 @@ * You should have received a copy of the GNU General Public License along with * this program. If not, see . */ +@import "src/theme/util/_mixins.scss"; :host ::ng-deep { ion-slides.work-locations { @@ -52,7 +53,7 @@ & > * { display: block; - border-radius: var(--border-radius-default); + @include border-radius-in-parallax(var(--border-radius-default)); overflow: hidden; position: relative; top: calc((var(--header-spacing-bottom) - var(--spacing-xl)) * -1); diff --git a/src/app/modules/data/list/data-list-item.scss b/src/app/modules/data/list/data-list-item.scss index 42c6bc34..bd872da7 100644 --- a/src/app/modules/data/list/data-list-item.scss +++ b/src/app/modules/data/list/data-list-item.scss @@ -1,6 +1,22 @@ +/*! + * Copyright (C) 2022 StApps + * This program is free software: you can redistribute it and/or modify it + * under the terms of the GNU General Public License as published by the Free + * Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but WITHOUT + * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or + * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for + * more details. + * + * You should have received a copy of the GNU General Public License along with + * this program. If not, see . + */ +@import "src/theme/util/_mixins.scss"; + ion-item { --border-color: transparent; - border-radius: var(--border-radius-default); + @include border-radius-in-parallax(var(--border-radius-default)); overflow: hidden; --inner-padding-end: 0; diff --git a/src/theme/util/_mixins.scss b/src/theme/util/_mixins.scss index d10de18f..4c791f05 100644 --- a/src/theme/util/_mixins.scss +++ b/src/theme/util/_mixins.scss @@ -77,3 +77,11 @@ // but also ensure items get shrunk on small screens grid-template-columns: repeat(auto-fit, minmax(calc(min($item-width, 100%)), 1fr)) } + +@mixin border-radius-in-parallax($border-radius) { + border-radius: $border-radius; + // explicitly place element in 3D space + // Safari seems to sometimes get confused + // and disregard border radius in some cases + transform: translateZ(0); +}