mirror of
https://gitlab.com/openstapps/openstapps.git
synced 2026-01-21 17:12:43 +00:00
feat: add stylelint
This commit is contained in:
@@ -14,38 +14,38 @@
|
||||
*/
|
||||
|
||||
@font-face {
|
||||
font-family: 'Barlow';
|
||||
font-family: Barlow;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
src: url('../assets/fonts/barlow/Barlow-Regular.ttf');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Barlow';
|
||||
font-family: Barlow;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
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-family: Barlow;
|
||||
font-weight: 800;
|
||||
font-style: normal;
|
||||
src: url('../assets/fonts/barlow/Barlow-Bold.ttf');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Barlow Condensed';
|
||||
src: url('../assets/fonts/barlow_condensed/BarlowCondensed-Regular.ttf');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
src: url('../assets/fonts/barlow_condensed/BarlowCondensed-Regular.ttf');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Barlow Condensed';
|
||||
src: url('../assets/fonts/barlow_condensed/BarlowCondensed-SemiBold.ttf');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
src: url('../assets/fonts/barlow_condensed/BarlowCondensed-SemiBold.ttf');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Barlow Condensed';
|
||||
src: url('../assets/fonts/barlow_condensed/BarlowCondensed-Bold.ttf');
|
||||
font-weight: 800;
|
||||
font-style: normal;
|
||||
src: url('../assets/fonts/barlow_condensed/BarlowCondensed-Bold.ttf');
|
||||
}
|
||||
|
||||
@@ -17,7 +17,6 @@
|
||||
// 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%;
|
||||
@@ -28,7 +27,6 @@ $item-border-color-fade-amount: 15%;
|
||||
$contrast-threshold: 128;
|
||||
$contrast-light-color: #fff;
|
||||
$contrast-dark-color: #000;
|
||||
|
||||
$fade-threshold: 50%;
|
||||
|
||||
// https://ionicframework.com/docs/theming/themes#stepped-colors
|
||||
|
||||
@@ -37,16 +37,14 @@
|
||||
--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);
|
||||
|
||||
--map-box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%),
|
||||
0 1px 5px 0 rgb(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);
|
||||
--shadow-profile-card: 0 2px 6px 6px rgb(0 0 0 / 6%), 0 4px 5px 12px rgb(0 0 0 / 4%),
|
||||
0 5px 6px 20px rgb(0 0 0 / 2%);
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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));
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
app-root ion-header[class*='header-'] {
|
||||
&:after {
|
||||
&::after {
|
||||
background-image: unset;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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
|
||||
}
|
||||
|
||||
|
||||
@@ -14,15 +14,19 @@
|
||||
*/
|
||||
|
||||
.card {
|
||||
box-shadow: var(--shadow-cards);
|
||||
// background-color: var(--ion-item-color);
|
||||
border-radius: var(--border-radius-default);
|
||||
display: block;
|
||||
|
||||
height: 100%;
|
||||
padding: var(--spacing-md);
|
||||
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-bold);
|
||||
text-align: left;
|
||||
display: block;
|
||||
height: 100%;
|
||||
|
||||
// background-color: var(--ion-item-color);
|
||||
border-radius: var(--border-radius-default);
|
||||
box-shadow: var(--shadow-cards);
|
||||
|
||||
transition: transform 250ms ease-in-out, box-shadow 250ms ease-in-out;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,12 +1,13 @@
|
||||
.section-headline {
|
||||
display: flex;
|
||||
flex-direction: revert;
|
||||
justify-content: space-between;
|
||||
|
||||
width: 100%;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
@@ -14,27 +14,28 @@
|
||||
*/
|
||||
@font-face {
|
||||
font-family: 'Material Symbols Rounded';
|
||||
font-style: normal;
|
||||
font-weight: 100 700;
|
||||
font-style: normal;
|
||||
font-display: block;
|
||||
src: url('../assets/icons.min.woff2') format('woff2');
|
||||
}
|
||||
|
||||
.material-symbols-rounded {
|
||||
//noinspection CssNoGenericFontName
|
||||
direction: ltr;
|
||||
display: inline-block;
|
||||
// stylelint-disable-next-line
|
||||
font-family: 'Material Symbols Rounded';
|
||||
font-size: 24px;
|
||||
font-feature-settings: 'liga'; // Support for IE
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
text-rendering: optimizelegibility; // Support for Safari and Chrome
|
||||
letter-spacing: normal;
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
white-space: nowrap;
|
||||
|
||||
-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
|
||||
}
|
||||
|
||||
@@ -17,20 +17,20 @@
|
||||
@import '../color-processing';
|
||||
@import './dark';
|
||||
|
||||
@function toRGB($color) {
|
||||
@function to-rgb($color) {
|
||||
@return red($color) + ',' + green($color) + ',' + blue($color);
|
||||
}
|
||||
|
||||
@function toShade($color) {
|
||||
@function to-shade($color) {
|
||||
@return darken($color, $shade-amount);
|
||||
}
|
||||
|
||||
@function toTint($color) {
|
||||
@function to-tint($color) {
|
||||
@return lighten($color, $tint-amount);
|
||||
}
|
||||
|
||||
@function toContrast($color) {
|
||||
$yiq: toYiq($color);
|
||||
@function to-contrast($color) {
|
||||
$yiq: to-yiq($color);
|
||||
@return if($yiq >= $contrast-threshold, $contrast-dark-color, $contrast-light-color);
|
||||
}
|
||||
|
||||
@@ -53,7 +53,7 @@
|
||||
/**
|
||||
* Converts a color to the YIQ color system
|
||||
*/
|
||||
@function toYiq($color) {
|
||||
@function to-yiq($color) {
|
||||
@return math.div(
|
||||
(color.red($color) * 299) + (color.green($color) * 587) + (color.blue($color) * 114),
|
||||
1000
|
||||
@@ -62,19 +62,19 @@
|
||||
|
||||
@mixin color-rgb($name, $color) {
|
||||
#{$name}: #{$color};
|
||||
#{$name}-rgb: #{toRGB($color)};
|
||||
#{$name}-rgb: #{to-rgb($color)};
|
||||
}
|
||||
|
||||
@mixin light-dark-scheme($light, $dark) {
|
||||
:root,
|
||||
.light {
|
||||
@if ($include-theme-independent-colors == true) {
|
||||
@if $include-theme-independent-colors == true {
|
||||
@content ($light, -light);
|
||||
@content (if($dark == none, $light, $dark), -dark);
|
||||
}
|
||||
@content ($light, "");
|
||||
}
|
||||
@if ($dark != none) {
|
||||
@if $dark != none {
|
||||
@include dark-only {
|
||||
@content ($dark, "");
|
||||
}
|
||||
@@ -84,6 +84,7 @@
|
||||
@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)};
|
||||
}
|
||||
}
|
||||
@@ -91,15 +92,15 @@
|
||||
@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));
|
||||
@include color-rgb(--ion-color-#{$name}-shade#{$suffix}, to-shade($color));
|
||||
@include color-rgb(--ion-color-#{$name}-tint#{$suffix}, to-tint($color));
|
||||
@include color-rgb(--ion-color-#{$name}-contrast#{$suffix}, to-contrast($color));
|
||||
}
|
||||
}
|
||||
|
||||
@mixin ion-background-color($light, $dark: none) {
|
||||
@include light-dark-scheme($light, $dark) using($color, $suffix) {
|
||||
$text-color: toContrast($color);
|
||||
$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));
|
||||
@@ -115,6 +116,6 @@
|
||||
@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));
|
||||
@include color-rgb(--ion-item-color#{$suffix}, to-contrast($color));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -18,6 +18,7 @@
|
||||
@content();
|
||||
}
|
||||
}
|
||||
|
||||
.dark {
|
||||
@content();
|
||||
}
|
||||
|
||||
@@ -18,61 +18,61 @@
|
||||
*/
|
||||
|
||||
@mixin ion-sm-up {
|
||||
@media (min-width: 576px) {
|
||||
@media (width >= 576px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin ion-sm-down {
|
||||
@media (max-width: 575.98px) {
|
||||
@media (width <= 575.98px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin ion-md-up {
|
||||
@media (min-width: 768px) {
|
||||
@media (width >= 768px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin ion-md-down {
|
||||
@media (max-width: 767.98px) {
|
||||
@media (width <= 767.98px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin ion-lg-up {
|
||||
@media (min-width: 992px) {
|
||||
@media (width >= 992px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin ion-lg-down {
|
||||
@media (max-width: 991.98px) {
|
||||
@media (width <= 991.98px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin ion-xl-up {
|
||||
@media (min-width: 1200px) {
|
||||
@media (width >= 1200px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin ion-xl-down {
|
||||
@media (max-width: 1199.98px) {
|
||||
@media (width <= 1199.98px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin phoneLandscape {
|
||||
@media (max-height: 500px) and (orientation: landscape) {
|
||||
@mixin phone-landscape {
|
||||
@media (height <= 500px) and (orientation: landscape) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin phonePortraitSmall {
|
||||
@media (max-height: 700px) and (orientation: portrait) {
|
||||
@mixin phone-portrait-small {
|
||||
@media (height <= 700px) and (orientation: portrait) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@@ -84,11 +84,11 @@
|
||||
}
|
||||
|
||||
@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);
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
@mixin content-padding {
|
||||
|
||||
@@ -12,24 +12,44 @@
|
||||
* 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';
|
||||
@import './colors';
|
||||
|
||||
@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';
|
||||
|
||||
/** Ionic CSS Variables **/
|
||||
:root {
|
||||
// Fonts
|
||||
--ion-font-family: 'Barlow', Helvetica, Arial, sans-serif;
|
||||
--headline-font-family: 'Barlow Condensed', Helvetica, Arial, sans-serif;
|
||||
|
||||
--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;
|
||||
@@ -43,18 +63,13 @@
|
||||
--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;
|
||||
}
|
||||
|
||||
@@ -63,26 +78,3 @@ 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';
|
||||
|
||||
Reference in New Issue
Block a user