Theaninova/openstapps
1
0
Fork 0
mirror of https://gitlab.com/openstapps/openstapps.git synced 2026-01-21 00:52:55 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: move app to monorepo

Browse Source
This commit is contained in:
Thea Schöbl
2023-05-24 14:26:54 +02:00
parent 20a336d3c4
commit ac62e621d5
794 changed files with 0 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
frontend/app/src/theme/_fonts.scss Normal file
View File

@@ -0,0 +1,51 @@
/*!
* 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 <https://www.gnu.org/licenses/>.
*/
@font-face {
font-family: 'Barlow';
src: url('../assets/fonts/barlow/Barlow-Regular.ttf');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Barlow';
src: url('../assets/fonts/barlow/Barlow-SemiBold.ttf');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Barlow';
src: url('../assets/fonts/barlow/Barlow-Bold.ttf');
font-weight: 800;
font-style: normal;
}
@font-face {
font-family: 'Barlow Condensed';
src: url('../assets/fonts/barlow_condensed/BarlowCondensed-Regular.ttf');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Barlow Condensed';
src: url('../assets/fonts/barlow_condensed/BarlowCondensed-SemiBold.ttf');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Barlow Condensed';
src: url('../assets/fonts/barlow_condensed/BarlowCondensed-Bold.ttf');
font-weight: 800;
font-style: normal;
}

39
frontend/app/src/theme/color-processing.scss Normal file
View File

@@ -0,0 +1,39 @@
/*!
* Copyright (C) 2023 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 <https://www.gnu.org/licenses/>.
*/
// Setting this to false significantly reduces the amount of variables
// being generated, but omits colors with -dark and -light suffixes, making
// it impossible to access dark theme colors while in light theme and vice versa
$include-theme-independent-colors: true;
$tint-amount: 10%;
$shade-amount: 12%;
$placeholder-fade-amount: 20%;
$box-shadow-fade-amount: 10%;
$item-border-color-fade-amount: 15%;
// The color chosen as contrast to another color
$contrast-threshold: 128;
$contrast-light-color: #fff;
$contrast-dark-color: #000;
$fade-threshold: 50%;
// https://ionicframework.com/docs/theming/themes#stepped-colors
$steps-start: 50;
$steps-end: 950;
$steps-step: 50;
$steps-range-start: 0;
$steps-range-end: 1000;

52
frontend/app/src/theme/colors.scss Normal file
View File

@@ -0,0 +1,52 @@
/*!
* Copyright (C) 2023 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 <https://www.gnu.org/licenses/>.
*/
@import '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 ion-background-color(#f5f5f5, #000);
@include ion-item-color(#fff, #0e0e0e);
:root {
--calender-lecture-card: var(--ion-color-primary-tint);
--calender-lecture-card-rgb: var(--ion-color-primary-tint-rgb);
--calender-lecture-card-contrast: var(--ion-color-primary-contrast);
--calender-exercise-card: var(--ion-color-dark);
--calender-exercise-card-rgb: var(--ion-color-dark-rgb);
--calender-exercise-card-contrast: var(--ion-color-dark-contrast);
--calender-default-card: var(--ion-color-light);
--calender-default-card-rgb: var(--ion-color-light-rgb);
--calender-default-card-contrast: var(--ion-color-light-contrast);
--map-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 1px 5px 0 rgba(0, 0, 0, 0.12);
--linear-gradient: linear-gradient(135deg, var(--ion-color-primary-shade), var(--ion-color-tertiary));
// Shadows
--shadow-default: 0px 0px 10px 4px var(--ion-box-shadow-color);
--shadow-cards: 0 0 8px 1px var(--ion-box-shadow-color);
--shadow-cards-hover: 5px 5px 8px 4px var(--ion-box-shadow-color);
--shadow-profile-card: 0 2px 6px 6px rgba(0, 0, 0, 0.06), 0 4px 5px 12px rgba(0, 0, 0, 0.04),
0 5px 6px 20px rgba(0, 0, 0, 0.02);
}

70
frontend/app/src/theme/common/_helper.scss Normal file
View File

@@ -0,0 +1,70 @@
/*!
* Copyright (C) 2023 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 <https://www.gnu.org/licenses/>.
*/
.no-padding-right {
padding-right: 0 !important;
}
.no-padding-inline-start {
padding-inline-start: 0 !important;
}
.display-flex {
display: flex;
}
.clickable {
cursor: pointer;
}
%vertical-list {
ul {
margin: 0;
padding: 0;
li {
list-style-type: none;
}
li img {
max-height: 1.25rem;
vertical-align: text-bottom;
// filter: invert(45%) sepia(0%) saturate(0%) hue-rotate(227deg) brightness(97%) contrast(82%);
}
}
}
%horizontal-list {
@extend %vertical-list;
ul {
li {
display: inline;
}
li:not(:first-child):before {
content: ' • ';
}
}
}
.vertical-list {
@extend %vertical-list;
}
.horizontal-list {
@extend %vertical-list;
li {
display: inline;
}
}

54
frontend/app/src/theme/common/_ion-button.scss Normal file
View File

@@ -0,0 +1,54 @@
/*!
* 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 <https://www.gnu.org/licenses/>.
*/
app-root {
// Change default border radius
ion-buttons ion-button.button,
.button {
&:not(.button-round) {
--border-radius: var(--border-radius-default);
}
}
.button {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semi-bold);
--padding-top: var(--spacing-sm);
--padding-bottom: var(--spacing-sm);
height: auto;
// Add default border, so buttons have the same size
&:not([fill='outline'])::part(native) {
border: var(--border-width-default) solid transparent;
}
&[fill='outline']::part(native) {
border: var(--border-width-default) solid rgba(var(--ion-color-primary-contrast-rgb), 0.2);
}
&.button-active {
font-weight: var(--font-weight-bold);
--background: var(--ion-color-tertiary);
ion-icon {
color: var(--ion-color-secondary);
}
}
}
ion-menu-button.button {
font-size: var(--font-size-lg);
}
}

45
frontend/app/src/theme/common/_ion-content-parallax.scss Normal file
View File

@@ -0,0 +1,45 @@
/*!
* Copyright (C) 2023 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 <https://www.gnu.org/licenses/>.
*/
$overscroll-padding: 720px;
$parallax-strength: 2;
$default-parallax-content-size: 230px;
ion-content::part(parallax-scroll) {
perspective: 2px;
perspective-origin: center top;
}
ion-content::part(parallax-parent) {
transform-style: preserve-3d;
position: relative;
}
ion-content::part(parallax) {
position: absolute;
top: 0;
right: 0;
left: 0;
$translateY: calc($overscroll-padding * $parallax-strength);
$translateZ: calc(-1px * $parallax-strength);
$transform-origin: calc($parallax-strength * $parallax-strength * $overscroll-padding);
height: calc(var(--parallax-content-size, $default-parallax-content-size) + $overscroll-padding);
width: 150%;
transform-origin: 50% $transform-origin;
transform: translate3d(0px, $translateY, $translateZ) scale($parallax-strength);
background: var(--parallax-background, var(--ion-color-primary));
}

5
frontend/app/src/theme/common/_ion-header.scss Normal file
View File

@@ -0,0 +1,5 @@
app-root ion-header[class*='header-'] {
&:after {
background-image: unset;
}
}

5
frontend/app/src/theme/common/_ion-img.scss Normal file
View File

@@ -0,0 +1,5 @@
app-root {
ion-thumbnail {
background: transparent;
}
}

40
frontend/app/src/theme/common/_ion-input.scss Normal file
View File

@@ -0,0 +1,40 @@
$icon-size: 23px;
app-root ion-searchbar[class*='sc-ion-searchbar-'] {
--border-radius: var(--border-radius-default);
padding-top: 0;
padding-bottom: 0;
height: 38px;
&.filterable {
padding-left: 0;
padding-right: 0;
--box-shadow: none;
position: relative;
ion-menu-button {
position: absolute;
right: 5px;
z-index: 1;
}
.searchbar-clear-button {
right: 45px;
}
}
ion-icon.searchbar-search-icon {
width: $icon-size;
height: $icon-size;
top: 50%;
transform: translateY(-50%);
left: var(--spacing-sm);
color: var(--ion-color-medium-shade);
}
input.searchbar-input {
padding-top: var(--spacing-xs);
padding-bottom: var(--spacing-xs);
padding-left: calc(var(--spacing-lg) + #{$icon-size});
}
}

18
frontend/app/src/theme/common/_ion-menu.scss Normal file
View File

@@ -0,0 +1,18 @@
/*!
* Copyright (C) 2023 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 <https://www.gnu.org/licenses/>.
*/
ion-menu {
--ion-item-background: var(--ion-background-color);
--ion-item-color: var(--ion-background-color-contrast);
}

12
frontend/app/src/theme/common/_ion-modal.scss Normal file
View File

@@ -0,0 +1,12 @@
@import '../../theme/util/mixins';
ion-modal {
&.modal-large {
--height: 100%;
@include ion-md-up {
--height: 70vh;
--max-height: 800px;
}
}
}

19
frontend/app/src/theme/common/_ion-popover.scss Normal file
View File

@@ -0,0 +1,19 @@
/*!
* 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 <https://www.gnu.org/licenses/>.
*/
.sc-ion-popover-ios-h,
.sc-ion-popover-md-h {
--width: 98vw;
}

27
frontend/app/src/theme/common/_ion-refresher.scss Normal file
View File

@@ -0,0 +1,27 @@
/*!
* 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 <https://www.gnu.org/licenses/>.
*/
ion-refresher {
background-color: var(--ion-color-primary);
text-transform: uppercase;
.refresher-pulling-icon,
.refresher-pulling-text,
.refresher-refreshing-text {
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semi-bold);
--ion-text-color: var(--ion-color-primary-contrast);
}
}

18
frontend/app/src/theme/common/_ion-searchbar.scss Normal file
View File

@@ -0,0 +1,18 @@
/*!
* Copyright (C) 2023 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 <https://www.gnu.org/licenses/>.
*/
ion-searchbar {
--background: var(--ion-item-background) !important;
}

77
frontend/app/src/theme/common/_ion-toolbar.scss Normal file
View File

@@ -0,0 +1,77 @@
/*!
* Copyright (C) 2023 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 <https://www.gnu.org/licenses/>.
*/
app-root ion-toolbar.in-toolbar {
--background: var(--ion-color-primary);
--border-color: var(--ion-color-primary);
--color: var(--ion-color-primary-contrast);
--ion-toolbar-color: var(--ion-color-primary-contrast);
--min-height: unset;
--padding-start: 0;
--padding-end: 0;
--padding-top: 0;
--padding-bottom: 0;
--opacity: 1;
padding: 0 var(--spacing-md) var(--spacing-md);
&:first-of-type {
--padding-top: 0;
--padding-bottom: 0;
padding-bottom: 0;
}
&:last-of-type {
--padding-top: 0;
--padding-bottom: 0;
}
ion-segment {
&:last-of-type {
--padding-bottom: 0;
padding-bottom: 0;
}
}
ion-menu-button.filter {
--padding-start: var(--spacing-lg);
--padding-end: var(--spacing-lg);
ion-icon {
margin-right: var(--spacing-md);
font-size: var(--font-size-lg);
}
}
ion-title {
font-weight: var(--font-weight-black);
font-size: var(--font-size-lg);
}
ion-menu-button {
width: auto;
}
ion-back-button {
--icon-margin-end: var(--spacing-xs);
height: 42px; // this prevents the back button to become a .x px value
}
}
app-root ion-toolbar.in-toolbar ion-searchbar,
.stapps-searchbar {
padding-left: 0;
padding-right: 0;
--box-shadow: none;
}

25
frontend/app/src/theme/common/_leaflet-tile.scss Normal file
View File

@@ -0,0 +1,25 @@
/*!
* Copyright (C) 2023 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 <https://www.gnu.org/licenses/>.
*/
@import '../util/dark';
@include dark-only {
.leaflet-tile-container > .leaflet-tile {
filter: invert(1);
}
}
.map-container.leaflet-container {
background: var(--ion-background-color);
}

53
frontend/app/src/theme/common/_swiper.scss Normal file
View File

@@ -0,0 +1,53 @@
/*!
* 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 <https://www.gnu.org/licenses/>.
*/
@import '../../theme/util/mixins';
.swiper.card-swiper {
overflow: visible;
padding-right: var(--spacing-lg);
.swiper-slide {
display: flex;
flex-direction: column;
height: auto; // required for same height of cards
a {
color: var(--ion-color-text);
text-decoration: none;
}
}
.swiper-button-prev,
.swiper-button-next {
--swiper-navigation-size: 20px;
top: calc(-1 * var(--spacing-lg));
transform: translateY(0%);
font-weight: var(--font-weight-black);
color: var(--ion-color-dark);
@include ion-md-down {
display: none;
}
}
.swiper-button-prev {
right: 30px;
left: auto;
}
.swiper-button-next {
right: 0;
}
}

33
frontend/app/src/theme/common/_typo.scss Normal file
View File

@@ -0,0 +1,33 @@
/*!
* Copyright (C) 2023 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 <https://www.gnu.org/licenses/>.
*/
body app-root {
.title,
.title[class*='sc-ion-label'] {
font-size: var(--font-size-md);
font-weight: var(--font-weight-semi-bold);
// TODO Condensed Font
}
.title-sub,
.title-sub[class*='sc-ion-label'] {
font-size: var(--font-size-md);
font-weight: var(--font-weight-regular);
// TODO Condensed Font
}
.title-sub {
// color: var(--ion-color-medium);
}
}

3
frontend/app/src/theme/common/_typography.scss Normal file
View File

@@ -0,0 +1,3 @@
a {
cursor: pointer;
}

37
frontend/app/src/theme/components/_card.scss Normal file
View File

@@ -0,0 +1,37 @@
/*!
* Copyright (C) 2023 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 <https://www.gnu.org/licenses/>.
*/
.card {
box-shadow: var(--shadow-cards);
// background-color: var(--ion-item-color);
border-radius: var(--border-radius-default);
padding: var(--spacing-md);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-bold);
text-align: left;
display: block;
height: 100%;
transition: transform 250ms ease-in-out, box-shadow 250ms ease-in-out;
}
@media (hover: hover) {
a.card,
.card.clickable {
&:hover {
transform: translate(-5px, -5px);
box-shadow: var(--shadow-cards-hover);
}
}
}

22
frontend/app/src/theme/components/_image-dark.scss Normal file
View File

@@ -0,0 +1,22 @@
/*!
* Copyright (C) 2023 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 <https://www.gnu.org/licenses/>.
*/
@import '../util/dark';
@include dark-only {
.image-dark {
filter: invert(1);
}
}

12
frontend/app/src/theme/components/_section.scss Normal file
View File

@@ -0,0 +1,12 @@
.section-headline {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-black);
font-stretch: condensed;
text-transform: uppercase;
margin-bottom: var(--spacing-sm);
width: 100%;
display: flex;
flex-direction: revert;
justify-content: space-between;
}

40
frontend/app/src/theme/material-symbols.scss Normal file
View File

@@ -0,0 +1,40 @@
/*!
* 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 <https://www.gnu.org/licenses/>.
*/
@font-face {
font-family: 'Material Symbols Rounded';
font-style: normal;
font-weight: 100 700;
font-display: block;
src: url('../assets/icons.min.woff2') format('woff2');
}
.material-symbols-rounded {
//noinspection CssNoGenericFontName
font-family: 'Material Symbols Rounded';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-smoothing: antialiased; // Support for all WebKit browsers
-moz-osx-font-smoothing: grayscale; // Support for Firefox
text-rendering: optimizeLegibility; // Support for Safari and Chrome
font-feature-settings: 'liga'; // Support for IE
}

120
frontend/app/src/theme/util/_color-system.scss Normal file
View File

@@ -0,0 +1,120 @@
/*!
* Copyright (C) 2023 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 <https://www.gnu.org/licenses/>.
*/
@use 'sass:color';
@use 'sass:math';
@import '../color-processing';
@import './dark';
@function toRGB($color) {
@return red($color) + ',' + green($color) + ',' + blue($color);
}
@function toShade($color) {
@return darken($color, $shade-amount);
}
@function toTint($color) {
@return lighten($color, $tint-amount);
}
@function toContrast($color) {
$yiq: toYiq($color);
@return if($yiq >= $contrast-threshold, $contrast-dark-color, $contrast-light-color);
}
@function fade($color, $amount) {
@return if(lightness($color) > $fade-threshold, darken($color, $amount), lighten($color, $amount));
}
@function map-range($value, $input-min, $input-max, $output-min, $output-max) {
@return calc(($value - $input-min) * ($output-max - $output-min) / ($input-max - $input-min) + $output-min);
}
@function interpolate-colors($from, $to, $progress, $progress-min: 0, $progress-max: 100) {
@return rgb(
map-range($progress, $progress-min, $progress-max, red($from), red($to)),
map-range($progress, $progress-min, $progress-max, green($from), green($to)),
map-range($progress, $progress-min, $progress-max, blue($from), blue($to))
);
}
/**
* Converts a color to the YIQ color system
*/
@function toYiq($color) {
@return math.div(
(color.red($color) * 299) + (color.green($color) * 587) + (color.blue($color) * 114),
1000
);
}
@mixin color-rgb($name, $color) {
#{$name}: #{$color};
#{$name}-rgb: #{toRGB($color)};
}
@mixin light-dark-scheme($light, $dark) {
:root,
.light {
@if ($include-theme-independent-colors == true) {
@content ($light, -light);
@content (if($dark == none, $light, $dark), -dark);
}
@content ($light, "");
}
@if ($dark != none) {
@include 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;
#{$name}-#{$value}: #{interpolate-colors($from, $to, $value, $steps-range-start, $steps-range-end)};
}
}
@mixin ion-color($name, $light, $dark: none) {
@include light-dark-scheme($light, $dark) using($color, $suffix) {
@include color-rgb(--ion-color-#{$name}#{$suffix}, $color);
@include color-rgb(--ion-color-#{$name}-shade#{$suffix}, toShade($color));
@include color-rgb(--ion-color-#{$name}-tint#{$suffix}, toTint($color));
@include color-rgb(--ion-color-#{$name}-contrast#{$suffix}, toContrast($color));
}
}
@mixin ion-background-color($light, $dark: none) {
@include light-dark-scheme($light, $dark) using($color, $suffix) {
$text-color: toContrast($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 ion-color-step(--ion-color-step#{$suffix}, $color, $text-color);
}
}
@mixin ion-item-color($light, $dark: none) {
@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-color#{$suffix}, toContrast($color));
}
}

24
frontend/app/src/theme/util/_dark.scss Normal file
View File

@@ -0,0 +1,24 @@
/*!
* Copyright (C) 2023 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 <https://www.gnu.org/licenses/>.
*/
@mixin dark-only {
:root {
@media (prefers-color-scheme: dark) {
@content();
}
}
.dark {
@content();
}
}

98
frontend/app/src/theme/util/_mixins.scss Normal file
View File

@@ -0,0 +1,98 @@
/*!
* Copyright (C) 2023 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 <https://www.gnu.org/licenses/>.
*/
/**
* Breakpoints copied from node_modules/@ionic/angular/css/display.css
*/
@mixin ion-sm-up {
@media (min-width: 576px) {
@content;
}
}
@mixin ion-sm-down {
@media (max-width: 575.98px) {
@content;
}
}
@mixin ion-md-up {
@media (min-width: 768px) {
@content;
}
}
@mixin ion-md-down {
@media (max-width: 767.98px) {
@content;
}
}
@mixin ion-lg-up {
@media (min-width: 992px) {
@content;
}
}
@mixin ion-lg-down {
@media (max-width: 991.98px) {
@content;
}
}
@mixin ion-xl-up {
@media (min-width: 1200px) {
@content;
}
}
@mixin ion-xl-down {
@media (max-width: 1199.98px) {
@content;
}
}
@mixin phoneLandscape {
@media (max-height: 500px) and (orientation: landscape) {
@content;
}
}
@mixin phonePortraitSmall {
@media (max-height: 700px) and (orientation: portrait) {
@content;
}
}
@mixin auto-grid($item-width) {
// fit as many items on the page while keeping items >$item-width,
// 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);
}
@mixin content-padding {
margin-inline-start: calc(
clamp(0px, (100% - var(--preferred-content-width)) / 2, var(--content-inline-start-padding-bias))
);
}

88
frontend/app/src/theme/variables.scss Normal file
View File

@@ -0,0 +1,88 @@
/*!
* Copyright (C) 2023 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 <https://www.gnu.org/licenses/>.
*/
// Ionic Variables and Theming. For more info, please see:
// http://ionicframework.com/docs/theming/
@import 'colors';
/** Ionic CSS Variables **/
:root {
// Fonts
--ion-font-family: 'Barlow', Helvetica, Arial, sans-serif;
--headline-font-family: 'Barlow Condensed', Helvetica, Arial, sans-serif;
--font-size-xxs: 10px;
--font-size-xs: 12px;
--font-size-sm: 14px;
--font-size-md: 16px;
--font-size-lg: 20px;
--font-size-xl: 24px;
--font-weight-thin: 200;
--font-weight-regular: 400;
--font-weight-semi-bold: 700;
--font-weight-bold: 800;
--font-weight-black: 900;
// Spacing
--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 12px;
--spacing-lg: 16px;
--spacing-xl: 20px;
--spacing-xxl: 24px;
--border-width-default: 1px;
--border-radius-default: 8px;
--header-spacing-bottom: 70px;
--navigation-rail-width: 80px;
--navigation-rail-item-height: 56px;
--icon-stroke-width: 1.2;
--tablet-top-bar-height: 96px;
--ion-tabbar-height: 50px;
}
html,
body {
font-family: var(--ion-font-family);
background-color: var(--ion-color-primary);
}
@import '~swiper/css/navigation';
// Import all other styles
@import 'fonts';
@import 'common/typo';
@import 'common/helper';
@import 'common/ion-button';
@import 'common/ion-header';
@import 'common/ion-input';
@import 'common/ion-modal';
@import 'common/ion-popover';
@import 'common/ion-refresher';
@import 'common/ion-toolbar';
@import 'common/ion-menu';
@import 'common/swiper';
@import 'common/typography';
@import 'common/leaflet-tile';
@import 'common/ion-searchbar';
@import 'components/image-dark';
@import 'components/card';
@import 'components/section';