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

feat: add stylelint

Browse Source
This commit is contained in:
Thea Schöbl
2023-07-18 15:24:15 +02:00
parent b085850207
commit d3268b50c2
89 changed files with 1436 additions and 801 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/app/src/theme/common/_helper.scss
View File

@@ -41,6 +41,7 @@
li img {
max-height: 1.25rem;
vertical-align: text-bottom;
// filter: invert(45%) sepia(0%) saturate(0%) hue-rotate(227deg) brightness(97%) contrast(82%);
}
}
@@ -48,11 +49,13 @@
%horizontal-list {
@extend %vertical-list;
ul {
li {
display: inline;
}
li:not(:first-child):before {
li:not(:first-child)::before {
content: ' • ';
}
}
@@ -64,6 +67,7 @@
.horizontal-list {
@extend %vertical-list;
li {
display: inline;
}

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

@@ -14,6 +14,34 @@
*/
app-root {
.button {
--padding-top: var(--spacing-sm);
--padding-bottom: var(--spacing-sm);
height: auto;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semi-bold);
// 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 rgb(var(--ion-color-primary-contrast-rgb) 0.2);
}
&.button-active {
--background: var(--ion-color-tertiary);
font-weight: var(--font-weight-bold);
ion-icon {
color: var(--ion-color-secondary);
}
}
}
// Change default border radius
ion-buttons ion-button.button,
.button {
@@ -22,32 +50,6 @@ app-root {
}
}
.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);
}

18
frontend/app/src/theme/common/_ion-content-parallax.scss
View File

@@ -22,24 +22,24 @@ ion-content::part(parallax-scroll) {
}
ion-content::part(parallax-parent) {
transform-style: preserve-3d;
position: relative;
transform-style: preserve-3d;
}
ion-content::part(parallax) {
$translate-y: calc($overscroll-padding * $parallax-strength);
$translate-z: calc(-1px * $parallax-strength);
$transform-origin: calc($parallax-strength * $parallax-strength * $overscroll-padding);
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);
transform: translate3d(0, $translate-y, $translate-z) scale($parallax-strength);
width: 150%;
height: calc(var(--parallax-content-size, $default-parallax-content-size) + $overscroll-padding);
background: var(--parallax-background, var(--ion-color-primary));
}

2
frontend/app/src/theme/common/_ion-header.scss
View File

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

18
frontend/app/src/theme/common/_ion-input.scss
View File

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

5
frontend/app/src/theme/common/_ion-refresher.scss
View File

@@ -14,14 +14,15 @@
*/
ion-refresher {
background-color: var(--ion-color-primary);
text-transform: uppercase;
background-color: var(--ion-color-primary);
.refresher-pulling-icon,
.refresher-pulling-text,
.refresher-refreshing-text {
--ion-text-color: var(--ion-color-primary-contrast);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semi-bold);
--ion-text-color: var(--ion-color-primary-contrast);
}
}

11
frontend/app/src/theme/common/_ion-toolbar.scss
View File

@@ -24,11 +24,13 @@ app-root ion-toolbar.in-toolbar {
--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;
}
@@ -40,6 +42,7 @@ app-root ion-toolbar.in-toolbar {
ion-segment {
&:last-of-type {
--padding-bottom: 0;
padding-bottom: 0;
}
}
@@ -55,8 +58,8 @@ app-root ion-toolbar.in-toolbar {
}
ion-title {
font-weight: var(--font-weight-black);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-black);
}
ion-menu-button {
@@ -65,13 +68,15 @@ app-root ion-toolbar.in-toolbar {
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;
padding-right: 0;
padding-left: 0;
}

10
frontend/app/src/theme/common/_swiper.scss
View File

@@ -29,17 +29,19 @@
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;
}
top: calc(-1 * var(--spacing-lg));
transform: translateY(0%);
font-weight: var(--font-weight-black);
color: var(--ion-color-dark);
}
.swiper-button-prev {

3
frontend/app/src/theme/common/_typo.scss
View File

@@ -18,12 +18,15 @@ body app-root {
.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
}