mirror of
https://gitlab.com/openstapps/openstapps.git
synced 2026-09-08 20:05:09 +00:00
refactor: migrate sass/scss deprecations
This commit is contained in:
Rainer Killinger
@@ -75,8 +75,8 @@
|
||||
"@capacitor/screen-orientation": "8.0.1",
|
||||
"@capacitor/share": "8.0.1",
|
||||
"@capacitor/splash-screen": "8.0.2",
|
||||
"@ionic/angular": "8.8.16",
|
||||
"@ionic/angular-server": "8.8.16",
|
||||
"@ionic/angular": "8.8.19",
|
||||
"@ionic/angular-server": "8.8.19",
|
||||
"@ionic/storage-angular": "4.0.0",
|
||||
"@maplibre/ngx-maplibre-gl": "17.4.1",
|
||||
"@ngx-translate/core": "15.0.0",
|
||||
@@ -94,7 +94,7 @@
|
||||
"form-data": "4.0.6",
|
||||
"geojson": "0.5.0",
|
||||
"ionic-appauth": "2.1.0",
|
||||
"ionicons": "8.0.13",
|
||||
"ionicons": "8.1.0",
|
||||
"jsonpath-plus": "10.3.0",
|
||||
"maplibre-gl": "4.0.2",
|
||||
"material-symbols": "0.17.1",
|
||||
@@ -110,7 +110,7 @@
|
||||
"semver": "7.6.0",
|
||||
"swiper": "8.4.5",
|
||||
"tslib": "2.6.2",
|
||||
"zone.js": "0.15.1"
|
||||
"zone.js": "0.16.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/architect": "0.1902.27",
|
||||
@@ -132,7 +132,7 @@
|
||||
"@capacitor/assets": "3.0.5",
|
||||
"@capacitor/cli": "8.2.0",
|
||||
"@capacitor/ios": "8.2.0",
|
||||
"@compodoc/compodoc": "1.1.23",
|
||||
"@compodoc/compodoc": "1.2.1",
|
||||
"@cypress/schematic": "4.1.1",
|
||||
"@ionic/angular-toolkit": "12.3.0",
|
||||
"@ionic/cli": "7.2.1",
|
||||
@@ -172,11 +172,11 @@
|
||||
"karma-junit-reporter": "2.0.1",
|
||||
"karma-mocha-reporter": "2.2.5",
|
||||
"license-checker": "25.0.1",
|
||||
"stylelint": "16.3.1",
|
||||
"stylelint-config-clean-order": "5.4.1",
|
||||
"stylelint": "17.14.1",
|
||||
"stylelint-config-clean-order": "10.0.0",
|
||||
"stylelint-config-prettier-scss": "1.0.0",
|
||||
"stylelint-config-recommended-scss": "14.0.0",
|
||||
"stylelint-config-standard-scss": "13.0.0",
|
||||
"stylelint-config-recommended-scss": "17.0.1",
|
||||
"stylelint-config-standard-scss": "17.0.0",
|
||||
"surge": "0.23.1",
|
||||
"ts-node": "10.9.2",
|
||||
"typescript": "5.5.4"
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
* You should have received a copy of the GNU General Public License along with
|
||||
* this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
@import '../../../../theme/util/mixins';
|
||||
@use '../../../../theme/util/mixins';
|
||||
|
||||
ion-text {
|
||||
margin-inline: var(--spacing-md);
|
||||
@@ -64,7 +64,7 @@ ion-text {
|
||||
.about-changelog,
|
||||
.licenses-content,
|
||||
.page-content {
|
||||
@include border-radius-in-parallax(var(--border-radius-default));
|
||||
@include mixins.border-radius-in-parallax(var(--border-radius-default));
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -76,7 +76,7 @@ ion-text {
|
||||
background: var(--ion-item-background);
|
||||
|
||||
& > * {
|
||||
@include border-radius-in-parallax(var(--border-radius-default));
|
||||
@include mixins.border-radius-in-parallax(var(--border-radius-default));
|
||||
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
* You should have received a copy of the GNU General Public License along with
|
||||
* this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
@import '../../../theme/util/mixins';
|
||||
@use '../../../theme/util/mixins';
|
||||
|
||||
ion-button {
|
||||
--color: var(--ion-color-primary-contrast);
|
||||
@@ -22,7 +22,7 @@ ion-button {
|
||||
}
|
||||
|
||||
.release-notes {
|
||||
@include border-radius-in-parallax(var(--border-radius-default));
|
||||
@include mixins.border-radius-in-parallax(var(--border-radius-default));
|
||||
|
||||
display: block;
|
||||
margin: var(--spacing-md);
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
}
|
||||
|
||||
blockquote {
|
||||
background: var(--ion-item-background);
|
||||
border-left: 0.25em solid var(--ion-color-medium);
|
||||
background: var(--ion-item-background);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
@import '../../../theme/util/mixins';
|
||||
@use '../../../theme/util/mixins';
|
||||
|
||||
ion-title {
|
||||
padding-block: var(--spacing-md);
|
||||
}
|
||||
|
||||
.content-card {
|
||||
@include border-radius-in-parallax(var(--border-radius-default));
|
||||
@include mixins.border-radius-in-parallax(var(--border-radius-default));
|
||||
|
||||
display: block;
|
||||
margin: var(--spacing-md);
|
||||
|
||||
@@ -13,9 +13,9 @@
|
||||
* this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
@import '../../../theme/util/mixins';
|
||||
@use '../../../theme/util/mixins';
|
||||
|
||||
@include ion-md-down {
|
||||
@include mixins.ion-md-down {
|
||||
ion-toolbar,
|
||||
.logo,
|
||||
.schedule,
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
<div #schedule class="schedule">
|
||||
<a [routerLink]="['/schedule/weekly-view']">
|
||||
<ion-icon [size]="36" [weight]="300" name="calendar_month"></ion-icon>
|
||||
<ion-label [innerHTML]="'schedule.recurring' | translate"></ion-label>
|
||||
<ion-label>{{ 'schedule.recurring' | translate }}</ion-label>
|
||||
</a>
|
||||
<!-- Avoid structural directives here, they might interfere with the collapse animation -->
|
||||
<a
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
* this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
@import '../../../theme/util/mixins';
|
||||
@use '../../../theme/util/mixins';
|
||||
|
||||
:host ion-header {
|
||||
z-index: 1;
|
||||
@@ -59,15 +59,6 @@ ion-content {
|
||||
}
|
||||
|
||||
.schedule {
|
||||
@include ion-md-up {
|
||||
position: unset;
|
||||
|
||||
width: unset;
|
||||
height: calc(var(--tablet-top-bar-height) + (2 * var(--spacing-xl)));
|
||||
margin: 0;
|
||||
padding: var(--spacing-xl);
|
||||
}
|
||||
|
||||
z-index: 3;
|
||||
|
||||
display: flex;
|
||||
@@ -82,6 +73,15 @@ ion-content {
|
||||
|
||||
background: var(--ion-color-primary);
|
||||
|
||||
@include mixins.ion-md-up {
|
||||
position: unset;
|
||||
|
||||
width: unset;
|
||||
height: calc(var(--tablet-top-bar-height) + (2 * var(--spacing-xl)));
|
||||
margin: 0;
|
||||
padding: var(--spacing-xl);
|
||||
}
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -89,18 +89,13 @@ ion-content {
|
||||
height: auto;
|
||||
min-height: 80px;
|
||||
padding: var(--spacing-sm);
|
||||
border-radius: var(--border-radius-default);
|
||||
|
||||
color: var(--ion-color-primary-contrast);
|
||||
text-decoration: none;
|
||||
|
||||
border-radius: var(--border-radius-default);
|
||||
}
|
||||
|
||||
a:first-child {
|
||||
@include phone-landscape {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
overflow: hidden;
|
||||
flex: 0 0 auto;
|
||||
gap: var(--spacing-sm);
|
||||
@@ -108,27 +103,22 @@ ion-content {
|
||||
justify-content: center;
|
||||
|
||||
height: 100%;
|
||||
border: 2px solid var(--ion-color-primary-tint);
|
||||
|
||||
text-align: center;
|
||||
|
||||
border: 2px solid var(--ion-color-primary-tint);
|
||||
@include mixins.phone-landscape {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
ion-label {
|
||||
font-size: var(--font-size-xxs);
|
||||
font-weight: var(--font-weight-semi-bold);
|
||||
word-break: break-word;
|
||||
word-break: overflow-wrap;
|
||||
}
|
||||
}
|
||||
|
||||
a:last-child {
|
||||
@include ion-md-up {
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
|
||||
@include phone-landscape {
|
||||
flex: 1 1 85%;
|
||||
}
|
||||
|
||||
z-index: 1;
|
||||
|
||||
flex: 1 1 65%;
|
||||
@@ -138,6 +128,14 @@ ion-content {
|
||||
|
||||
background: var(--linear-gradient);
|
||||
|
||||
@include mixins.ion-md-up {
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
|
||||
@include mixins.phone-landscape {
|
||||
flex: 1 1 85%;
|
||||
}
|
||||
|
||||
ion-label {
|
||||
font-size: var(--font-size-xxs);
|
||||
font-weight: var(--font-weight-bold);
|
||||
|
||||
+1
-1
@@ -29,8 +29,8 @@ simple-swiper {
|
||||
|
||||
&::part(native) {
|
||||
height: 100%;
|
||||
background: none;
|
||||
border-radius: var(--border-radius-default);
|
||||
background: none;
|
||||
}
|
||||
|
||||
ion-label {
|
||||
|
||||
+2
-3
@@ -23,8 +23,8 @@ simple-swiper {
|
||||
|
||||
&::part(native) {
|
||||
height: 100%;
|
||||
background: none;
|
||||
border-radius: var(--border-radius-default);
|
||||
background: none;
|
||||
}
|
||||
|
||||
ion-label {
|
||||
@@ -64,10 +64,9 @@ simple-swiper {
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
|
||||
white-space: break-spaces;
|
||||
|
||||
-webkit-line-clamp: 3;
|
||||
}
|
||||
|
||||
.title-sub {
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
* You should have received a copy of the GNU General Public License along with
|
||||
* this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
@import '../../../../theme/util/mixins';
|
||||
@use '../../../../theme/util/mixins';
|
||||
|
||||
:host {
|
||||
display: contents;
|
||||
@@ -34,8 +34,8 @@ stapps-origin-detail {
|
||||
padding: 0 var(--spacing-md);
|
||||
|
||||
::ng-deep > * {
|
||||
@include border-radius-in-parallax(var(--border-radius-default));
|
||||
@include content-padding;
|
||||
@include mixins.border-radius-in-parallax(var(--border-radius-default));
|
||||
@include mixins.content-padding;
|
||||
|
||||
position: relative;
|
||||
|
||||
|
||||
@@ -34,9 +34,9 @@ ion-button {
|
||||
justify-content: flex-start;
|
||||
|
||||
padding-inline: var(--spacing-xl);
|
||||
border-radius: var(--border-radius-default);
|
||||
|
||||
background: var(--ion-color-light);
|
||||
border-radius: var(--border-radius-default);
|
||||
|
||||
> ion-icon {
|
||||
&:active,
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
* You should have received a copy of the GNU General Public License along with
|
||||
* this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
@import '../../../../theme/util/mixins';
|
||||
@use '../../../../theme/util/mixins';
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
@@ -26,7 +26,7 @@ ion-item::part(native) {
|
||||
ion-item {
|
||||
--border-color: transparent;
|
||||
--inner-padding-end: 0;
|
||||
@include border-radius-in-parallax(var(--border-radius-default));
|
||||
@include mixins.border-radius-in-parallax(var(--border-radius-default));
|
||||
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
@@ -44,9 +44,8 @@ ion-item {
|
||||
.ion-text-wrap ::ng-deep ion-label {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
white-space: normal !important;
|
||||
|
||||
-webkit-line-clamp: 3;
|
||||
white-space: normal !important;
|
||||
}
|
||||
|
||||
[slot='end'] {
|
||||
@@ -64,22 +63,20 @@ ion-item ::ng-deep {
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
|
||||
white-space: break-spaces;
|
||||
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
|
||||
.title-sub {
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
|
||||
margin-block: var(--spacing-xs);
|
||||
|
||||
white-space: break-spaces;
|
||||
|
||||
-webkit-line-clamp: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -44,8 +44,8 @@ abbr {
|
||||
|
||||
mask-image: var(--background-url);
|
||||
mask-mode: alpha;
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
}
|
||||
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
-->
|
||||
|
||||
<ion-card>
|
||||
<ion-card-content [innerHtml]="item.description"> </ion-card-content>
|
||||
<ion-card-content>{{ item.description }} </ion-card-content>
|
||||
</ion-card>
|
||||
@if (item.sameAs) {
|
||||
<ion-card>
|
||||
@@ -40,7 +40,7 @@
|
||||
@if (item.employerOverview.image) {
|
||||
<ion-img class="company-image" src="{{ item.employerOverview.image }}"></ion-img>
|
||||
}
|
||||
<p [innerHtml]="item.employerOverview.description"></p>
|
||||
<p>{{ item.employerOverview.description }}</p>
|
||||
</ion-card-content>
|
||||
</ion-card>
|
||||
}
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
* You should have received a copy of the GNU General Public License along with
|
||||
* this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
@import '../../../theme/util/mixins';
|
||||
@use '../../../theme/util/mixins';
|
||||
|
||||
pre {
|
||||
white-space: pre-wrap;
|
||||
@@ -58,7 +58,7 @@ ion-button {
|
||||
}
|
||||
|
||||
.feedback-content {
|
||||
@include border-radius-in-parallax(var(--border-radius-default));
|
||||
@include mixins.border-radius-in-parallax(var(--border-radius-default));
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -69,7 +69,7 @@ ion-button {
|
||||
background: var(--ion-item-background);
|
||||
|
||||
& > * {
|
||||
@include border-radius-in-parallax(var(--border-radius-default));
|
||||
@include mixins.border-radius-in-parallax(var(--border-radius-default));
|
||||
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
@if (holding.storage && holding.storage.content) {
|
||||
<ion-row>
|
||||
<ion-col size="3">{{ 'hebisSearch.daia.location' | translate }}</ion-col>
|
||||
<ion-col size="9" [innerHTML]="holding.storage.content"></ion-col>
|
||||
<ion-col size="9">{{ holding.storage.content }}</ion-col>
|
||||
</ion-row>
|
||||
}
|
||||
@if (holding.signature && !holding.online) {
|
||||
@@ -34,7 +34,7 @@
|
||||
@if (holding.about) {
|
||||
<ion-row>
|
||||
<ion-col size="3">{{ 'hebisSearch.daia.comment' | translate }}</ion-col>
|
||||
<ion-col size="9" [innerHTML]="holding.about"></ion-col>
|
||||
<ion-col size="9">{{ holding.about }}</ion-col>
|
||||
</ion-row>
|
||||
}
|
||||
@if (holding.available && holding.online && resourceLink) {
|
||||
|
||||
@@ -27,9 +27,9 @@ ion-grid {
|
||||
padding: 0;
|
||||
|
||||
ion-row {
|
||||
border-bottom: 1px solid #fff;
|
||||
color: var(--ion-color-light-contrast);
|
||||
background-color: var(--ion-color-light);
|
||||
border-bottom: 1px solid #fff;
|
||||
|
||||
ion-col:first-child {
|
||||
font-weight: 700;
|
||||
|
||||
@@ -27,12 +27,11 @@ ion-label {
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
|
||||
padding: 4px 0;
|
||||
|
||||
text-align: left;
|
||||
overflow-wrap: normal;
|
||||
white-space: wrap;
|
||||
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
|
||||
@@ -5,13 +5,13 @@
|
||||
|
||||
width: fit-content;
|
||||
padding-inline: var(--spacing-md);
|
||||
border-radius: 15px;
|
||||
|
||||
font-size: 0.8em;
|
||||
color: var(--ion-color-primary-contrast);
|
||||
|
||||
opacity: 0.8;
|
||||
background: var(--ion-color-primary);
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
button:not(:only-child) {
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
|
||||
<ion-content id="map">
|
||||
<mgl-map
|
||||
[style]="('(prefers-color-scheme: dark)' | mediaQuery | async) ? 'dark' : 'light' | mapStyleUrl"
|
||||
[style]="('(prefers-color-scheme: dark)' | mediaQuery | async) ? 'dark' : ('light' | mapStyleUrl)"
|
||||
[attributionControl]="false"
|
||||
[fitBounds]="(bounds | async) ?? undefined"
|
||||
[fitBoundsOptions]="{maxZoom: 15, padding: {top: 100, bottom: 50, left: 50, right: 50}, animate: false}"
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
-->
|
||||
<mgl-map
|
||||
auto-3d
|
||||
[style]="('(prefers-color-scheme: dark)' | mediaQuery | async) ? 'dark' : 'light' | mapStyleUrl"
|
||||
[style]="('(prefers-color-scheme: dark)' | mediaQuery | async) ? 'dark' : ('light' | mapStyleUrl)"
|
||||
[interactive]="false"
|
||||
[attributionControl]="false"
|
||||
[center]="$any(place.geo.point.coordinates)"
|
||||
|
||||
@@ -25,5 +25,5 @@ mgl-map {
|
||||
}
|
||||
|
||||
.marker {
|
||||
filter: drop-shadow(0 0 2px rgba(0 0 0 / 50%));
|
||||
filter: drop-shadow(0 0 2px rgb(0 0 0 / 50%));
|
||||
}
|
||||
|
||||
@@ -12,10 +12,10 @@
|
||||
* You should have received a copy of the GNU General Public License along with
|
||||
* this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
@import '../../../../theme/util/mixins';
|
||||
@use '../../../../theme/util/mixins';
|
||||
|
||||
stapps-navigation-tabs {
|
||||
@include ion-xl-up {
|
||||
@include mixins.ion-xl-up {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -24,21 +24,21 @@ stapps-navigation-tabs {
|
||||
ion-split-pane {
|
||||
--side-max-width: 256px;
|
||||
|
||||
@include phone-landscape {
|
||||
margin-bottom: calc(var(--ion-tabbar-height) + env(safe-area-inset-bottom));
|
||||
transition: margin-top 150ms ease;
|
||||
|
||||
@include mixins.phone-landscape {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@include ion-md-up {
|
||||
@include mixins.ion-md-up {
|
||||
margin-bottom: 0;
|
||||
margin-left: var(--navigation-rail-width);
|
||||
}
|
||||
|
||||
@include ion-xl-up {
|
||||
@include mixins.ion-xl-up {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
margin-bottom: calc(var(--ion-tabbar-height) + env(safe-area-inset-bottom));
|
||||
transition: margin-top 150ms ease;
|
||||
}
|
||||
|
||||
ion-toolbar.in-toolbar {
|
||||
@@ -49,12 +49,12 @@ stapps-navigation-tabs {
|
||||
padding: var(--spacing-xl) var(--spacing-md);
|
||||
|
||||
.logo {
|
||||
@include ion-md-up {
|
||||
height: var(--tablet-top-bar-height);
|
||||
}
|
||||
|
||||
height: 80px;
|
||||
object-position: left;
|
||||
|
||||
@include mixins.ion-md-up {
|
||||
height: var(--tablet-top-bar-height);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -12,10 +12,16 @@
|
||||
* You should have received a copy of the GNU General Public License along with
|
||||
* this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
@import '../../../../theme/util/mixins';
|
||||
@use '../../../../theme/util/mixins';
|
||||
|
||||
:host {
|
||||
@include ion-md-up {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
||||
@include mixins.ion-md-up {
|
||||
top: 0;
|
||||
right: unset;
|
||||
|
||||
@@ -38,7 +44,6 @@
|
||||
|
||||
width: var(--navigation-rail-width);
|
||||
height: 100vh;
|
||||
|
||||
border-top: unset;
|
||||
border-right: var(--border);
|
||||
}
|
||||
@@ -49,12 +54,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
||||
.menu-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -38,10 +38,10 @@ ion-card-title {
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
|
||||
font-size: var(--font-size-xl);
|
||||
|
||||
-webkit-line-clamp: 3;
|
||||
max-lines: 3;
|
||||
}
|
||||
|
||||
|
||||
@@ -12,10 +12,10 @@
|
||||
* You should have received a copy of the GNU General Public License along with
|
||||
* this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
@import '../../../../theme/util/mixins';
|
||||
@use '../../../../theme/util/mixins';
|
||||
|
||||
.news-grid {
|
||||
@include auto-grid(300px);
|
||||
@include mixins.auto-grid(300px);
|
||||
|
||||
display: grid;
|
||||
gap: var(--spacing-sm);
|
||||
@@ -27,7 +27,7 @@
|
||||
}
|
||||
|
||||
ion-content.ios > div > .news-grid {
|
||||
@include auto-grid(350px);
|
||||
@include mixins.auto-grid(350px);
|
||||
|
||||
gap: var(--spacing-lg);
|
||||
margin: var(--spacing-lg);
|
||||
|
||||
@@ -21,12 +21,12 @@ simple-swiper {
|
||||
--swiper-slide-width: calc(min(90cqw, 12cm));
|
||||
|
||||
padding-block: 32px;
|
||||
filter: drop-shadow(0 0 16px rgba(0 0 0 / 10%));
|
||||
filter: drop-shadow(0 0 16px rgb(0 0 0 / 10%));
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
simple-swiper {
|
||||
filter: drop-shadow(0 0 16px rgba(0 0 0 / 50%));
|
||||
filter: drop-shadow(0 0 16px rgb(0 0 0 / 50%));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -39,11 +39,11 @@ simple-swiper {
|
||||
|
||||
height: calc(min(90cqw, 12cm) * (53.98 / 85.6));
|
||||
padding: var(--spacing-xxl);
|
||||
border-radius: 3mm;
|
||||
|
||||
color: var(--ion-color-dark);
|
||||
|
||||
background: var(--ion-color-light);
|
||||
border-radius: 3mm;
|
||||
outline: 1px dashed var(--ion-color-dark);
|
||||
outline-offset: calc(-1 * var(--spacing-sm));
|
||||
|
||||
|
||||
@@ -99,12 +99,12 @@ ion-content {
|
||||
|
||||
width: 40px;
|
||||
height: 70px;
|
||||
border-right: 1px solid var(--ion-item-border-color);
|
||||
|
||||
font-weight: var(--font-weight-bold);
|
||||
text-align: center;
|
||||
|
||||
background-color: var(--ion-background-color);
|
||||
border-right: 1px solid var(--ion-item-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -116,12 +116,11 @@ ion-content {
|
||||
.date-header {
|
||||
height: fit-content;
|
||||
padding: var(--spacing-sm) auto;
|
||||
border-bottom: 1px solid var(--ion-item-border-color);
|
||||
|
||||
font-weight: var(--font-weight-bold);
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
|
||||
border-bottom: 1px solid var(--ion-item-border-color);
|
||||
}
|
||||
|
||||
.day-labels > ion-button[disabled] {
|
||||
|
||||
@@ -19,7 +19,6 @@ ion-card {
|
||||
width: inherit;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
|
||||
border-radius: 0;
|
||||
|
||||
&::after {
|
||||
|
||||
@@ -36,8 +36,7 @@ div {
|
||||
height: 2px;
|
||||
margin-top: 8px;
|
||||
margin-right: 16px;
|
||||
margin-block: 0 0;
|
||||
|
||||
margin-block: 0;
|
||||
border-top: 2px solid var(--ion-color-danger);
|
||||
}
|
||||
|
||||
@@ -48,9 +47,9 @@ div {
|
||||
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50% 0 50% 50%;
|
||||
|
||||
background-color: var(--ion-color-danger);
|
||||
border-radius: 50% 0 50% 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -30,13 +30,13 @@
|
||||
|
||||
height: fit-content;
|
||||
padding: var(--spacing-md);
|
||||
border-bottom: 2px solid var(--ion-item-border-color);
|
||||
|
||||
font-size: var(--font-size-md);
|
||||
font-weight: var(--font-weight-bold);
|
||||
text-align: center;
|
||||
|
||||
background-color: var(--ion-background-color);
|
||||
border-bottom: 2px solid var(--ion-item-border-color);
|
||||
|
||||
&.leftmost {
|
||||
border-left: 1px solid var(--ion-item-border-color);
|
||||
|
||||
@@ -19,13 +19,13 @@
|
||||
<ion-back-button></ion-back-button>
|
||||
</ion-buttons>
|
||||
@if (tabChoreographer.currentValue === 'calendar') {
|
||||
<ion-title [innerHTML]="'schedule.calendar' | translate | titlecase"></ion-title>
|
||||
<ion-title>{{ 'schedule.calendar' | translate | titlecase }}</ion-title>
|
||||
}
|
||||
@if (tabChoreographer.currentValue === 'weekly-view') {
|
||||
<ion-title [innerHTML]="'schedule.recurring' | translate | titlecase"></ion-title>
|
||||
<ion-title>{{ 'schedule.recurring' | translate | titlecase }}</ion-title>
|
||||
}
|
||||
@if (tabChoreographer.currentValue === 'single') {
|
||||
<ion-title [innerHTML]="'schedule.single' | translate | titlecase"></ion-title>
|
||||
<ion-title>{{ 'schedule.single' | translate | titlecase }}</ion-title>
|
||||
}
|
||||
<ion-buttons slot="end">
|
||||
<ion-button (click)="onTodayClick()">
|
||||
@@ -36,15 +36,15 @@
|
||||
<ion-toolbar color="primary" mode="md" class="tabs-toolbar">
|
||||
<ion-segment #segment value="calendar" (ionChange)="onSegmentChange()">
|
||||
<ion-segment-button value="calendar" layout="icon-start">
|
||||
<ion-label class="ion-text-wrap" [innerHTML]="'schedule.calendar' | translate"></ion-label>
|
||||
<ion-label class="ion-text-wrap">{{ 'schedule.calendar' | translate }}</ion-label>
|
||||
<ion-icon name="calendar_today"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="weekly-view" layout="icon-start">
|
||||
<ion-label class="ion-text-wrap" [innerHTML]="'schedule.recurring' | translate"></ion-label>
|
||||
<ion-label class="ion-text-wrap">{{ 'schedule.recurring' | translate }}</ion-label>
|
||||
<ion-icon name="event_repeat"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="single" layout="icon-start">
|
||||
<ion-label class="ion-text-wrap" [innerHTML]="'schedule.single' | translate"></ion-label>
|
||||
<ion-label class="ion-text-wrap">{{ 'schedule.single' | translate }}</ion-label>
|
||||
<ion-icon name="event_upcoming"></ion-icon>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
* You should have received a copy of the GNU General Public License along with
|
||||
* this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
@import '../../../../theme/util/mixins';
|
||||
@use '../../../../theme/util/mixins';
|
||||
|
||||
:host ::ng-deep {
|
||||
ion-grid,
|
||||
@@ -50,7 +50,7 @@
|
||||
}
|
||||
|
||||
.settings-content {
|
||||
@include border-radius-in-parallax(var(--border-radius-default));
|
||||
@include mixins.border-radius-in-parallax(var(--border-radius-default));
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -61,7 +61,7 @@
|
||||
background: var(--ion-item-background);
|
||||
|
||||
& > * {
|
||||
@include border-radius-in-parallax(var(--border-radius-default));
|
||||
@include mixins.border-radius-in-parallax(var(--border-radius-default));
|
||||
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
* You should have received a copy of the GNU General Public License along with
|
||||
* this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
@import '../../theme/util/mixins';
|
||||
@use '../../theme/util/mixins';
|
||||
|
||||
a {
|
||||
display: contents;
|
||||
@@ -54,13 +54,13 @@ ion-col {
|
||||
--swiper-scroll-padding: var(--spacing-md);
|
||||
--swiper-gap: var(--spacing-sm);
|
||||
|
||||
@include ion-md-up {
|
||||
display: block;
|
||||
padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm);
|
||||
transition: height 250ms ease;
|
||||
|
||||
@include mixins.ion-md-up {
|
||||
--swiper-scroll-padding: var(--spacing-xxl);
|
||||
|
||||
padding: var(--spacing-lg) var(--spacing-xxl) var(--spacing-sm);
|
||||
}
|
||||
|
||||
display: block;
|
||||
padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm);
|
||||
transition: height 250ms ease;
|
||||
}
|
||||
|
||||
@@ -14,6 +14,34 @@
|
||||
*/
|
||||
|
||||
// http://ionicframework.com/docs/theming/
|
||||
|
||||
@use 'theme/common/helper';
|
||||
@use 'theme/common/ion-alert';
|
||||
@use 'theme/common/ion-button';
|
||||
@use 'theme/common/ion-card';
|
||||
@use 'theme/common/ion-content-parallax';
|
||||
@use 'theme/common/ion-header';
|
||||
@use 'theme/common/ion-img';
|
||||
@use 'theme/common/ion-item';
|
||||
@use 'theme/common/ion-menu';
|
||||
@use 'theme/common/ion-modal';
|
||||
@use 'theme/common/ion-popover';
|
||||
@use 'theme/common/ion-refresher';
|
||||
@use 'theme/common/ion-searchbar';
|
||||
@use 'theme/common/ion-toolbar';
|
||||
@use 'theme/common/link';
|
||||
@use 'theme/common/maplibre';
|
||||
@use 'theme/common/material-symbols';
|
||||
@use 'theme/common/swiper';
|
||||
@use 'theme/common/title';
|
||||
|
||||
@use 'theme/components/card';
|
||||
@use 'theme/components/centered-message-container';
|
||||
@use 'theme/components/image-dark';
|
||||
@use 'theme/components/section';
|
||||
|
||||
@use 'theme/variables';
|
||||
|
||||
@import '@ionic/angular/css/normalize.css';
|
||||
@import '@ionic/angular/css/structure.css';
|
||||
@import '@ionic/angular/css/typography.css';
|
||||
@@ -32,33 +60,6 @@
|
||||
@import 'swiper/scss/controller';
|
||||
@import 'swiper/scss/navigation';
|
||||
|
||||
@import './theme/common/helper';
|
||||
@import './theme/common/ion-alert';
|
||||
@import './theme/common/ion-button';
|
||||
@import './theme/common/ion-card';
|
||||
@import './theme/common/ion-content-parallax';
|
||||
@import './theme/common/ion-header';
|
||||
@import './theme/common/ion-img';
|
||||
@import './theme/common/ion-item';
|
||||
@import './theme/common/ion-menu';
|
||||
@import './theme/common/ion-modal';
|
||||
@import './theme/common/ion-popover';
|
||||
@import './theme/common/ion-refresher';
|
||||
@import './theme/common/ion-searchbar';
|
||||
@import './theme/common/ion-toolbar';
|
||||
@import './theme/common/link';
|
||||
@import './theme/common/maplibre';
|
||||
@import './theme/common/material-symbols';
|
||||
@import './theme/common/swiper';
|
||||
@import './theme/common/title';
|
||||
|
||||
@import './theme/components/card';
|
||||
@import './theme/components/centered-message-container';
|
||||
@import './theme/components/image-dark';
|
||||
@import './theme/components/section';
|
||||
|
||||
@import './theme/variables';
|
||||
|
||||
.add-event-popover {
|
||||
--width: fit-content;
|
||||
--max-width: 95%;
|
||||
|
||||
@@ -12,20 +12,20 @@
|
||||
* You should have received a copy of the GNU General Public License along with
|
||||
* this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
@import './util/color-system';
|
||||
@use 'util/color-system';
|
||||
|
||||
@include ion-color(primary, #3880ff);
|
||||
@include ion-color(secondary, #32db64);
|
||||
@include ion-color(tertiary, #f4a942);
|
||||
@include ion-color(success, #10dc60);
|
||||
@include ion-color(warning, #ffce00);
|
||||
@include ion-color(danger, #f53d3d);
|
||||
@include ion-color(light, #f4f4f4, #222);
|
||||
@include ion-color(medium, #989aa2, #989aa2);
|
||||
@include ion-color(dark, #222, #f4f4f4);
|
||||
@include color-system.ion-color(primary, #3880ff);
|
||||
@include color-system.ion-color(secondary, #32db64);
|
||||
@include color-system.ion-color(tertiary, #f4a942);
|
||||
@include color-system.ion-color(success, #10dc60);
|
||||
@include color-system.ion-color(warning, #ffce00);
|
||||
@include color-system.ion-color(danger, #f53d3d);
|
||||
@include color-system.ion-color(light, #f4f4f4, #222);
|
||||
@include color-system.ion-color(medium, #989aa2, #989aa2);
|
||||
@include color-system.ion-color(dark, #222, #f4f4f4);
|
||||
|
||||
@include ion-background-color(#f5f5f5, #000);
|
||||
@include ion-item-color(#fff, #0e0e0e);
|
||||
@include color-system.ion-background-color(#f5f5f5, #000);
|
||||
@include color-system.ion-item-color(#fff, #0e0e0e);
|
||||
|
||||
:root {
|
||||
--calender-lecture-card: var(--ion-color-primary-tint);
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
@import '../../theme/util/mixins';
|
||||
@use '../../theme/util/mixins';
|
||||
|
||||
ion-modal {
|
||||
&.modal-large {
|
||||
--height: 100%;
|
||||
|
||||
@include ion-md-up {
|
||||
@include mixins.ion-md-up {
|
||||
--height: 70vh;
|
||||
--max-height: 800px;
|
||||
}
|
||||
|
||||
@@ -6,13 +6,13 @@
|
||||
position: relative;
|
||||
|
||||
padding: 0 0 2px;
|
||||
border: none;
|
||||
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
color: var(--ion-color-dark);
|
||||
|
||||
background: none;
|
||||
border: none;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
@@ -23,7 +23,6 @@
|
||||
left: 0;
|
||||
|
||||
height: 8px;
|
||||
|
||||
border-right: 2px solid var(--ion-color-dark);
|
||||
border-bottom: 2px solid var(--ion-color-dark);
|
||||
}
|
||||
|
||||
@@ -16,6 +16,7 @@
|
||||
font-family: 'Material Symbols Rounded';
|
||||
font-weight: 100 700;
|
||||
font-style: normal;
|
||||
|
||||
font-display: block;
|
||||
src: url('../../assets/icons.min.woff2') format('woff2');
|
||||
}
|
||||
@@ -33,7 +34,7 @@
|
||||
text-transform: none;
|
||||
text-rendering: optimizelegibility; // Support for Safari and Chrome
|
||||
letter-spacing: normal;
|
||||
word-wrap: normal;
|
||||
overflow-wrap: normal;
|
||||
white-space: nowrap;
|
||||
|
||||
-webkit-font-smoothing: antialiased; // Support for all WebKit browsers
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
* this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
@import '../../theme/util/mixins';
|
||||
@use '../../theme/util/mixins';
|
||||
|
||||
.swiper.card-swiper {
|
||||
overflow: visible;
|
||||
@@ -34,14 +34,14 @@
|
||||
.swiper-button-next {
|
||||
--swiper-navigation-size: 20px;
|
||||
|
||||
@include ion-md-down {
|
||||
display: none;
|
||||
}
|
||||
|
||||
top: calc(-1 * var(--spacing-lg));
|
||||
transform: translateY(0%);
|
||||
font-weight: var(--font-weight-black);
|
||||
color: var(--ion-color-dark);
|
||||
|
||||
@include mixins.ion-md-down {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-button-prev {
|
||||
|
||||
@@ -19,12 +19,13 @@
|
||||
height: 100%;
|
||||
padding: var(--spacing-md);
|
||||
|
||||
// background-color: var(--ion-item-color);
|
||||
border-radius: var(--border-radius-default);
|
||||
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-bold);
|
||||
text-align: left;
|
||||
|
||||
// background-color: var(--ion-item-color);
|
||||
border-radius: var(--border-radius-default);
|
||||
box-shadow: var(--shadow-cards);
|
||||
|
||||
transition:
|
||||
|
||||
@@ -13,9 +13,9 @@
|
||||
* this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
@import '../util/dark';
|
||||
@use '../util/dark';
|
||||
|
||||
@include dark-only {
|
||||
@include dark.dark-only {
|
||||
.image-dark {
|
||||
filter: invert(1);
|
||||
}
|
||||
|
||||
@@ -8,6 +8,7 @@
|
||||
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: var(--font-weight-black);
|
||||
font-stretch: condensed;
|
||||
text-transform: uppercase;
|
||||
|
||||
font-stretch: condensed;
|
||||
}
|
||||
|
||||
@@ -17,35 +17,41 @@
|
||||
font-family: Barlow;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
|
||||
src: url('../assets/fonts/barlow/Barlow-Regular.ttf');
|
||||
}
|
||||
@font-face {
|
||||
font-family: Barlow;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
|
||||
src: url('../assets/fonts/barlow/Barlow-SemiBold.ttf');
|
||||
}
|
||||
@font-face {
|
||||
font-family: Barlow;
|
||||
font-weight: 800;
|
||||
font-style: normal;
|
||||
|
||||
src: url('../assets/fonts/barlow/Barlow-Bold.ttf');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Barlow Condensed';
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
|
||||
src: url('../assets/fonts/barlow_condensed/BarlowCondensed-Regular.ttf');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Barlow Condensed';
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
|
||||
src: url('../assets/fonts/barlow_condensed/BarlowCondensed-SemiBold.ttf');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Barlow Condensed';
|
||||
font-weight: 800;
|
||||
font-style: normal;
|
||||
|
||||
src: url('../assets/fonts/barlow_condensed/BarlowCondensed-Bold.ttf');
|
||||
}
|
||||
|
||||
@@ -14,29 +14,34 @@
|
||||
*/
|
||||
@use 'sass:color';
|
||||
@use 'sass:math';
|
||||
@import '../color-processing';
|
||||
@import './dark';
|
||||
@use '../color-processing';
|
||||
@use 'dark';
|
||||
|
||||
@function to-rgb($color) {
|
||||
@return color.red($color) + ',' + color.green($color) + ',' + color.blue($color);
|
||||
@return color.channel($color, 'red', $space: rgb) + ',' + color.channel($color, 'green', $space: rgb) + ',' +
|
||||
color.channel($color, 'blue', $space: rgb);
|
||||
}
|
||||
|
||||
@function to-shade($color) {
|
||||
@return color.adjust($color, $lightness: -$shade-amount);
|
||||
@return color.adjust($color, $lightness: -(color-processing.$shade-amount));
|
||||
}
|
||||
|
||||
@function to-tint($color) {
|
||||
@return color.adjust($color, $lightness: $tint-amount);
|
||||
@return color.adjust($color, $lightness: color-processing.$tint-amount);
|
||||
}
|
||||
|
||||
@function to-contrast($color) {
|
||||
$yiq: to-yiq($color);
|
||||
@return if($yiq >= $contrast-threshold, $contrast-dark-color, $contrast-light-color);
|
||||
@return if(
|
||||
$yiq >= color-processing.$contrast-threshold,
|
||||
color-processing.$contrast-dark-color,
|
||||
color-processing.$contrast-light-color
|
||||
);
|
||||
}
|
||||
|
||||
@function fade($color, $amount) {
|
||||
@return if(
|
||||
color.lightness($color) > $fade-threshold,
|
||||
color.channel($color, 'lightness', $space: hsl) > color-processing.$fade-threshold,
|
||||
color.adjust($color, $lightness: -$amount),
|
||||
color.adjust($color, $lightness: $amount)
|
||||
);
|
||||
@@ -48,9 +53,27 @@
|
||||
|
||||
@function interpolate-colors($from, $to, $progress, $progress-min: 0, $progress-max: 100) {
|
||||
@return rgb(
|
||||
map-range($progress, $progress-min, $progress-max, color.red($from), color.red($to)),
|
||||
map-range($progress, $progress-min, $progress-max, color.green($from), color.green($to)),
|
||||
map-range($progress, $progress-min, $progress-max, color.blue($from), color.blue($to))
|
||||
map-range(
|
||||
$progress,
|
||||
$progress-min,
|
||||
$progress-max,
|
||||
color.channel($from, 'red', $space: rgb),
|
||||
color.channel($to, 'red', $space: rgb)
|
||||
),
|
||||
map-range(
|
||||
$progress,
|
||||
$progress-min,
|
||||
$progress-max,
|
||||
color.channel($from, 'green', $space: rgb),
|
||||
color.channel($to, 'green', $space: rgb)
|
||||
),
|
||||
map-range(
|
||||
$progress,
|
||||
$progress-min,
|
||||
$progress-max,
|
||||
color.channel($from, 'blue', $space: rgb),
|
||||
color.channel($to, 'blue', $space: rgb)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@@ -59,7 +82,8 @@
|
||||
*/
|
||||
@function to-yiq($color) {
|
||||
@return math.div(
|
||||
(color.red($color) * 299) + (color.green($color) * 587) + (color.blue($color) * 114),
|
||||
(color.channel($color, 'red', $space: rgb) * 299) + (color.channel($color, 'green', $space: rgb) * 587) +
|
||||
(color.channel($color, 'blue', $space: rgb) * 114),
|
||||
1000
|
||||
);
|
||||
}
|
||||
@@ -72,24 +96,33 @@
|
||||
@mixin light-dark-scheme($light, $dark) {
|
||||
:root,
|
||||
.light {
|
||||
@if $include-theme-independent-colors == true {
|
||||
@if color-processing.$include-theme-independent-colors == true {
|
||||
@content ($light, -light);
|
||||
@content (if($dark == none, $light, $dark), -dark);
|
||||
}
|
||||
@content ($light, "");
|
||||
}
|
||||
@if $dark != none {
|
||||
@include dark-only {
|
||||
@include dark.dark-only {
|
||||
@content ($dark, "");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin ion-color-step($name, $from, $to) {
|
||||
@for $i from calc($steps-start / $steps-step) through calc($steps-end / $steps-step) {
|
||||
$value: $i * $steps-step;
|
||||
@for $i
|
||||
from calc(color-processing.$steps-start / color-processing.$steps-step)
|
||||
through calc(color-processing.$steps-end / color-processing.$steps-step)
|
||||
{
|
||||
$value: $i * color-processing.$steps-step;
|
||||
|
||||
#{$name}-#{$value}: #{interpolate-colors($from, $to, $value, $steps-range-start, $steps-range-end)};
|
||||
#{$name}-#{$value}: #{interpolate-colors(
|
||||
$from,
|
||||
$to,
|
||||
$value,
|
||||
color-processing.$steps-range-start,
|
||||
color-processing.$steps-range-end
|
||||
)};
|
||||
}
|
||||
}
|
||||
|
||||
@@ -107,8 +140,14 @@
|
||||
$text-color: to-contrast($color);
|
||||
@include color-rgb(--ion-background-color#{$suffix}, $color);
|
||||
@include color-rgb(--ion-text-color#{$suffix}, $text-color);
|
||||
@include color-rgb(--ion-box-shadow-color#{$suffix}, fade($color, $box-shadow-fade-amount));
|
||||
@include color-rgb(--ion-placeholder-color#{$suffix}, fade($text-color, $placeholder-fade-amount));
|
||||
@include color-rgb(
|
||||
--ion-box-shadow-color#{$suffix},
|
||||
fade($color, color-processing.$box-shadow-fade-amount)
|
||||
);
|
||||
@include color-rgb(
|
||||
--ion-placeholder-color#{$suffix},
|
||||
fade($text-color, color-processing.$placeholder-fade-amount)
|
||||
);
|
||||
|
||||
@include ion-color-step(--ion-color-step#{$suffix}, $color, $text-color);
|
||||
}
|
||||
@@ -118,8 +157,14 @@
|
||||
@include light-dark-scheme($light, $dark) using($color, $suffix) {
|
||||
@include color-rgb(--ion-item-background#{$suffix}, $color);
|
||||
@include color-rgb(--ion-card-background#{$suffix}, $color);
|
||||
@include color-rgb(--ion-item-border-color#{$suffix}, fade($color, $item-border-color-fade-amount));
|
||||
@include color-rgb(--ion-border-color#{$suffix}, fade($color, $item-border-color-fade-amount));
|
||||
@include color-rgb(
|
||||
--ion-item-border-color#{$suffix},
|
||||
fade($color, color-processing.$item-border-color-fade-amount)
|
||||
);
|
||||
@include color-rgb(
|
||||
--ion-border-color#{$suffix},
|
||||
fade($color, color-processing.$item-border-color-fade-amount)
|
||||
);
|
||||
@include color-rgb(--ion-item-color#{$suffix}, to-contrast($color));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -14,8 +14,8 @@
|
||||
*/
|
||||
// Ionic Variables and Theming. For more info, please see:
|
||||
// http://ionicframework.com/docs/theming/
|
||||
@import './colors';
|
||||
@import './fonts';
|
||||
@use 'colors';
|
||||
@use 'fonts';
|
||||
|
||||
:root {
|
||||
// Fonts
|
||||
|
||||
Generated
+1182
-957
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user