MOBILE-3631 theme: Reorganize theme files
Pau Ferrer Ocaña
parent
f4195c25af
commit
344eedfde5
|
|
@ -33,7 +33,7 @@
|
|||
],
|
||||
"styles": [
|
||||
{
|
||||
"input": "src/theme/global.scss"
|
||||
"input": "src/theme/theme.scss"
|
||||
}
|
||||
],
|
||||
"scripts": [],
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "~theme/breakpoints";
|
||||
@import "~theme/globals";
|
||||
|
||||
// @todo darkmode
|
||||
// @todo RTL layout
|
||||
|
|
|
|||
|
|
@ -1,13 +0,0 @@
|
|||
/*
|
||||
* Layout Breakpoints
|
||||
*
|
||||
* https://ionicframework.com/docs/layout/grid#default-breakpoints
|
||||
*/
|
||||
|
||||
$breakpoint-xs: 0px;
|
||||
$breakpoint-sm: 576px;
|
||||
$breakpoint-md: 768px;
|
||||
$breakpoint-lg: 992px;
|
||||
$breakpoint-xl: 1200px;
|
||||
|
||||
$breakpoint-tablet: $breakpoint-lg;
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
// Place here custom styles.
|
||||
:root {
|
||||
|
||||
}
|
||||
|
|
@ -1,5 +1,3 @@
|
|||
@import "./mixins.scss";
|
||||
|
||||
/** Format Text - Show more styles. */
|
||||
/** Styles of elements inside the directive should be placed in format-text.scss */
|
||||
core-format-text {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
/*
|
||||
* App Custom App variables SCSS
|
||||
* ----------------------------------------------------------------------------
|
||||
* Place here all custom app variables.
|
||||
*/
|
||||
|
|
@ -0,0 +1,520 @@
|
|||
/*
|
||||
* Imported ionic mixins for SCSS
|
||||
* ----------------------------------------------------------------------------
|
||||
* Place here our custom mixins.
|
||||
* Extracted from ionic.mixins.scss
|
||||
* https://github.com/ionic-team/ionic-framework/blob/master/core/src/themes/ionic.mixins.scss
|
||||
*/
|
||||
|
||||
@mixin input-cover() {
|
||||
@include position(0, null, null, 0);
|
||||
@include margin(0);
|
||||
|
||||
position: absolute;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
border: 0;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
|
||||
appearance: none;
|
||||
outline: none;
|
||||
|
||||
&::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin text-inherit() {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
font-style: inherit;
|
||||
font-weight: inherit;
|
||||
letter-spacing: inherit;
|
||||
text-decoration: inherit;
|
||||
text-indent: inherit;
|
||||
text-overflow: inherit;
|
||||
text-transform: inherit;
|
||||
text-align: inherit;
|
||||
white-space: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
@mixin button-state() {
|
||||
@include position(0, 0, 0, 0);
|
||||
|
||||
position: absolute;
|
||||
|
||||
content: "";
|
||||
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
// Font smoothing
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin font-smoothing() {
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
// Get the key from a map based on the index
|
||||
@function index-to-key($map, $index) {
|
||||
$keys: map-keys($map);
|
||||
|
||||
@return nth($keys, $index);
|
||||
}
|
||||
|
||||
|
||||
// Breakpoint Mixins
|
||||
// ---------------------------------------------------------------------------------
|
||||
|
||||
// Breakpoint viewport sizes and media queries.
|
||||
//
|
||||
// Breakpoints are defined as a map of (name: minimum width), order from small to large:
|
||||
//
|
||||
// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)
|
||||
//
|
||||
// The map defined in the `$screen-breakpoints` global variable is used as the `$breakpoints` argument by default.
|
||||
|
||||
// ---------------------------------------------------------------------------------
|
||||
|
||||
// Minimum breakpoint width. Null for the smallest (first) breakpoint.
|
||||
//
|
||||
// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
|
||||
// 576px
|
||||
@function breakpoint-min($name, $breakpoints: $screen-breakpoints) {
|
||||
$min: map-get($breakpoints, $name);
|
||||
|
||||
@return if($name != index-to-key($breakpoints, 1), $min, null);
|
||||
}
|
||||
|
||||
// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.
|
||||
// Useful for making responsive utilities.
|
||||
//
|
||||
// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
|
||||
// "" (Returns a blank string)
|
||||
// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
|
||||
// "-sm"
|
||||
@function breakpoint-infix($name, $breakpoints: $screen-breakpoints) {
|
||||
@return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
|
||||
}
|
||||
|
||||
// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
|
||||
// Makes the @content apply to the given breakpoint and wider.
|
||||
@mixin media-breakpoint-up($name, $breakpoints: $screen-breakpoints) {
|
||||
$min: breakpoint-min($name, $breakpoints);
|
||||
@if $min {
|
||||
@media (min-width: $min) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Name of the next breakpoint, or null for the last breakpoint.
|
||||
//
|
||||
// >> breakpoint-next(sm)
|
||||
// md
|
||||
// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
|
||||
// md
|
||||
// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
|
||||
// md
|
||||
@function breakpoint-next($name, $breakpoints: $screen-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
|
||||
$n: index($breakpoint-names, $name);
|
||||
@return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
|
||||
}
|
||||
|
||||
// Maximum breakpoint width. Null for the smallest (first) breakpoint.
|
||||
// The maximum value is reduced by 0.02px to work around the limitations of
|
||||
// `min-` and `max-` prefixes and viewports with fractional widths.
|
||||
//
|
||||
// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
|
||||
// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari. // Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
|
||||
// See https://bugs.webkit.org/show_bug.cgi?id=178261 // See https://bugs.webkit.org/show_bug.cgi?id=178261
|
||||
//
|
||||
// >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
|
||||
// 767.98px
|
||||
@function breakpoint-max($name, $breakpoints: $screen-breakpoints) {
|
||||
$max: map-get($breakpoints, $name);
|
||||
@return if($max and $max > 0, $max - .02, null);
|
||||
}
|
||||
|
||||
// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
|
||||
// Makes the @content apply to the given breakpoint and narrower.
|
||||
@mixin media-breakpoint-down($name, $breakpoints: $screen-breakpoints) {
|
||||
$max: breakpoint-max($name, $breakpoints);
|
||||
@if $max {
|
||||
@media (max-width: $max) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Text Direction - ltr / rtl
|
||||
//
|
||||
// CSS defaults to use the ltr css, and adds [dir=rtl] selectors
|
||||
// to override ltr defaults.
|
||||
// ----------------------------------------------------------
|
||||
|
||||
@mixin multi-dir() {
|
||||
@content;
|
||||
|
||||
// $root: #{&};
|
||||
// @at-root [dir] {
|
||||
// #{$root} {
|
||||
// @content;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
@mixin rtl() {
|
||||
$root: #{&};
|
||||
|
||||
@at-root [dir=rtl] {
|
||||
#{$root} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin ltr() {
|
||||
@content;
|
||||
}
|
||||
|
||||
|
||||
// SVG Background Image Mixin
|
||||
// @param {string} $svg
|
||||
// ----------------------------------------------------------
|
||||
@mixin svg-background-image($svg, $flip-rtl: false) {
|
||||
$url: url-encode($svg);
|
||||
$viewBox: str-split(str-extract($svg, "viewBox='", "'"), " ");
|
||||
|
||||
@if $flip-rtl != true or $viewBox == null {
|
||||
@include multi-dir() {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,#{$url}");
|
||||
}
|
||||
} @else {
|
||||
$transform: "transform='translate(#{nth($viewBox, 3)}, 0) scale(-1, 1)'";
|
||||
$flipped-url: $svg;
|
||||
$flipped-url: str-replace($flipped-url, "<path", "<path #{$transform}");
|
||||
$flipped-url: str-replace($flipped-url, "<line", "<line #{$transform}");
|
||||
$flipped-url: str-replace($flipped-url, "<polygon", "<polygon #{$transform}");
|
||||
$flipped-url: url-encode($flipped-url);
|
||||
|
||||
@include ltr () {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,#{$url}");
|
||||
}
|
||||
@include rtl() {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,#{$flipped-url}");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Add property horizontal
|
||||
// @param {string} $start
|
||||
// @param {string} $end
|
||||
// ----------------------------------------------------------
|
||||
@mixin property-horizontal($prop, $start, $end: $start) {
|
||||
@if $start == 0 and $end == 0 {
|
||||
#{$prop}-left: $start;
|
||||
#{$prop}-right: $end;
|
||||
|
||||
} @else {
|
||||
#{$prop}-left: $start;
|
||||
#{$prop}-right: $end;
|
||||
|
||||
@at-root {
|
||||
@supports ((margin-inline-start: 0) or (-webkit-margin-start: 0)) {
|
||||
& {
|
||||
@if $start != null {
|
||||
#{$prop}-left: unset;
|
||||
}
|
||||
@if $end != null {
|
||||
#{$prop}-right: unset;
|
||||
}
|
||||
|
||||
-webkit-#{$prop}-start: $start;
|
||||
#{$prop}-inline-start: $start;
|
||||
-webkit-#{$prop}-end: $end;
|
||||
#{$prop}-inline-end: $end;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Add property for all directions
|
||||
// @param {string} $prop
|
||||
// @param {string} $top
|
||||
// @param {string} $end
|
||||
// @param {string} $bottom
|
||||
// @param {string} $start
|
||||
// @param {boolean} $content include content or use default
|
||||
// ----------------------------------------------------------
|
||||
@mixin property($prop, $top, $end: $top, $bottom: $top, $start: $end) {
|
||||
@include property-horizontal($prop, $start, $end);
|
||||
#{$prop}-top: $top;
|
||||
#{$prop}-bottom: $bottom;
|
||||
}
|
||||
|
||||
// Add padding horizontal
|
||||
// @param {string} $start
|
||||
// @param {string} $end
|
||||
// ----------------------------------------------------------
|
||||
@mixin padding-horizontal($start, $end: $start) {
|
||||
@include property-horizontal(padding, $start, $end);
|
||||
}
|
||||
|
||||
// Add padding for all directions
|
||||
// @param {string} $top
|
||||
// @param {string} $end
|
||||
// @param {string} $bottom
|
||||
// @param {string} $start
|
||||
// ----------------------------------------------------------
|
||||
@mixin padding($top, $end: $top, $bottom: $top, $start: $end) {
|
||||
@include property(padding, $top, $end, $bottom, $start);
|
||||
}
|
||||
|
||||
// Add margin horizontal
|
||||
// @param {string} $start
|
||||
// @param {string} $end
|
||||
// ----------------------------------------------------------
|
||||
@mixin margin-horizontal($start, $end: $start) {
|
||||
@include property-horizontal(margin, $start, $end);
|
||||
}
|
||||
|
||||
// Add margin for all directions
|
||||
// @param {string} $top
|
||||
// @param {string} $end
|
||||
// @param {string} $bottom
|
||||
// @param {string} $start
|
||||
// ----------------------------------------------------------
|
||||
@mixin margin($top, $end: $top, $bottom: $top, $start: $end) {
|
||||
@include property(margin, $top, $end, $bottom, $start);
|
||||
}
|
||||
|
||||
// Add position horizontal
|
||||
// @param {string} $start - amount to position start
|
||||
// @param {string} $end - amount to left: 0; end
|
||||
// ----------------------------------------------------------
|
||||
@mixin position-horizontal($start: null, $end: null) {
|
||||
@if $start == $end {
|
||||
@include multi-dir() {
|
||||
left: $start;
|
||||
right: $end;
|
||||
}
|
||||
} @else {
|
||||
@include ltr() {
|
||||
left: $start;
|
||||
right: $end;
|
||||
}
|
||||
@include rtl() {
|
||||
left: unset;
|
||||
right: unset;
|
||||
|
||||
left: $end;
|
||||
right: $start;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Add position for all directions
|
||||
// @param {string} $top
|
||||
// @param {string} $end
|
||||
// @param {string} $bottom
|
||||
// @param {string} $start
|
||||
// ----------------------------------------------------------
|
||||
@mixin position($top: null, $end: null, $bottom: null, $start: null) {
|
||||
@include position-horizontal($start, $end);
|
||||
top: $top;
|
||||
bottom: $bottom;
|
||||
}
|
||||
|
||||
// Add border for all directions
|
||||
// @param {string} $top
|
||||
// @param {string} $end
|
||||
// @param {string} $bottom
|
||||
// @param {string} $start
|
||||
// ----------------------------------------------------------
|
||||
@mixin border($top, $end: $top, $bottom: $top, $start: $end) {
|
||||
@include property(border, $top, $end, $bottom, $start);
|
||||
}
|
||||
|
||||
// Add border radius for all directions
|
||||
// @param {string} $top-start
|
||||
// @param {string} $top-end
|
||||
// @param {string} $bottom-end
|
||||
// @param {string} $bottom-start
|
||||
// ----------------------------------------------------------
|
||||
@mixin border-radius($top-start, $top-end: $top-start, $bottom-end: $top-start, $bottom-start: $top-end) {
|
||||
@if $top-start == $top-end and $top-start == $bottom-end and $top-start == $bottom-start {
|
||||
@include multi-dir() {
|
||||
border-radius: $top-start;
|
||||
}
|
||||
} @else {
|
||||
@include ltr() {
|
||||
border-top-left-radius: $top-start;
|
||||
border-top-right-radius: $top-end;
|
||||
border-bottom-right-radius: $bottom-end;
|
||||
border-bottom-left-radius: $bottom-start;
|
||||
}
|
||||
|
||||
@include rtl() {
|
||||
border-top-left-radius: $top-end;
|
||||
border-top-right-radius: $top-start;
|
||||
border-bottom-right-radius: $bottom-start;
|
||||
border-bottom-left-radius: $bottom-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Add direction for all directions
|
||||
// @param {string} $dir - Direction on LTR
|
||||
@mixin direction($dir) {
|
||||
$other-dir: null;
|
||||
|
||||
@if $dir == ltr {
|
||||
$other-dir: rtl;
|
||||
} @else {
|
||||
$other-dir: ltr;
|
||||
}
|
||||
|
||||
@include ltr() {
|
||||
direction: $dir;
|
||||
}
|
||||
@include rtl() {
|
||||
direction: $other-dir;
|
||||
}
|
||||
}
|
||||
|
||||
// Add float for all directions
|
||||
// @param {string} $side
|
||||
// @param {string} $decorator - !important
|
||||
@mixin float($side, $decorator: null) {
|
||||
@if $side == start {
|
||||
@include ltr() {
|
||||
float: left $decorator;
|
||||
}
|
||||
@include rtl() {
|
||||
float: right $decorator;
|
||||
}
|
||||
} @else if $side == end {
|
||||
@include ltr() {
|
||||
float: right $decorator;
|
||||
}
|
||||
@include rtl() {
|
||||
float: left $decorator;
|
||||
}
|
||||
} @else {
|
||||
@include multi-dir() {
|
||||
float: $side $decorator;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin background-position($horizontal, $horizontal-amount: null, $vertical: null, $vertical-amount: null) {
|
||||
@if $horizontal == start or $horizontal == end {
|
||||
$horizontal-ltr: null;
|
||||
$horizontal-rtl: null;
|
||||
@if $horizontal == start {
|
||||
$horizontal-ltr: left;
|
||||
$horizontal-rtl: right;
|
||||
} @else {
|
||||
$horizontal-ltr: right;
|
||||
$horizontal-rtl: left;
|
||||
}
|
||||
|
||||
@include ltr() {
|
||||
background-position: $horizontal-ltr $horizontal-amount $vertical $vertical-amount;
|
||||
}
|
||||
@include rtl() {
|
||||
background-position: $horizontal-rtl $horizontal-amount $vertical $vertical-amount;
|
||||
}
|
||||
} @else {
|
||||
@include multi-dir() {
|
||||
background-position: $horizontal $horizontal-amount $vertical $vertical-amount;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin transform-origin($x-axis, $y-axis: null) {
|
||||
@if $x-axis == start {
|
||||
@include ltr() {
|
||||
transform-origin: left $y-axis;
|
||||
}
|
||||
@include rtl() {
|
||||
transform-origin: right $y-axis;
|
||||
}
|
||||
} @else if $x-axis == end {
|
||||
@include ltr() {
|
||||
transform-origin: right $y-axis;
|
||||
}
|
||||
@include rtl() {
|
||||
transform-origin: left $y-axis;
|
||||
}
|
||||
} @else if $x-axis == left or $x-axis == right {
|
||||
@include multi-dir() {
|
||||
transform-origin: $x-axis $y-axis;
|
||||
}
|
||||
} @else {
|
||||
@include ltr() {
|
||||
transform-origin: $x-axis $y-axis;
|
||||
}
|
||||
@include rtl() {
|
||||
transform-origin: calc(100% - #{$x-axis}) $y-axis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Add transform for all directions
|
||||
// @param {string} $transforms - comma separated list of transforms
|
||||
@mixin transform($transforms...) {
|
||||
$extra: null;
|
||||
|
||||
$x: null;
|
||||
$ltr-translate: null;
|
||||
$rtl-translate: null;
|
||||
|
||||
@each $transform in $transforms {
|
||||
@if (str-index($transform, translate3d)) {
|
||||
$transform: str-replace($transform, 'translate3d(');
|
||||
$transform: str-replace($transform, ')');
|
||||
|
||||
$coordinates: str-split($transform, ',');
|
||||
|
||||
$x: nth($coordinates, 1);
|
||||
$y: nth($coordinates, 2);
|
||||
$z: nth($coordinates, 3);
|
||||
|
||||
$ltr-translate: translate3d($x, $y, $z);
|
||||
$rtl-translate: translate3d(calc(-1 * #{$x}), $y, $z);
|
||||
} @else {
|
||||
@if $extra == null {
|
||||
$extra: $transform;
|
||||
} @else {
|
||||
$extra: $extra $transform;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if $x == '0' or $x == null {
|
||||
@include multi-dir() {
|
||||
transform: $ltr-translate $extra;
|
||||
}
|
||||
} @else {
|
||||
@include ltr() {
|
||||
transform: $ltr-translate $extra;
|
||||
}
|
||||
|
||||
@include rtl() {
|
||||
transform: $rtl-translate $extra;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,187 @@
|
|||
/*
|
||||
* App custom mixins for SCSS
|
||||
* ----------------------------------------------------------------------------
|
||||
* Place here our custom mixins.
|
||||
*/
|
||||
|
||||
@mixin core-transition($where: all, $time: 500ms) {
|
||||
-webkit-transition: $where $time ease-in-out;
|
||||
-moz-transition: $where $time ease-in-out;
|
||||
-ms-transition: $where $time ease-in-out;
|
||||
-o-transition: $where $time ease-in-out;
|
||||
transition: $where $time ease-in-out;
|
||||
}
|
||||
|
||||
@mixin push-arrow-color($color: dedede, $flip-rtl: false) {
|
||||
$svg: "<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%2020'><path%20d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z'%20fill='%23#{$color}'/></svg>";
|
||||
@if $flip-rtl != true {
|
||||
@include multi-dir() {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,#{$svg}");
|
||||
}
|
||||
} @else {
|
||||
$flipped-svg: "<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%2020'><path%20transform='translate(20,%200)%20scale(-1,%201)'%20d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z'%20fill='%23#{$color}'/></svg>";
|
||||
|
||||
@include ltr () {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,#{$svg}");
|
||||
}
|
||||
@include rtl() {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,#{$flipped-svg}");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin border-start($px, $type, $color) {
|
||||
@include ltr() {
|
||||
border-left: $px $type $color;
|
||||
}
|
||||
|
||||
@include rtl() {
|
||||
border-right: $px $type $color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@mixin border-end($px, $type, $color) {
|
||||
@include ltr() {
|
||||
border-right: $px $type $color;
|
||||
}
|
||||
|
||||
@include rtl() {
|
||||
border-left: $px $type $color;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin safe-area-border-start($px, $type, $color) {
|
||||
$safe-area-position: calc(constant(safe-area-inset-left) + #{$px});
|
||||
$safe-area-position-env: calc(env(safe-area-inset-left) + #{$px});
|
||||
|
||||
@include border-start($px, $type, $color);
|
||||
@media screen and (orientation: landscape) {
|
||||
@include border-start($safe-area-position, $type, $color);
|
||||
@include border-start($safe-area-position-env, $type, $color);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin safe-area-border-end($px, $type, $color) {
|
||||
$safe-area-position: calc(constant(safe-area-inset-right) + #{$px});
|
||||
$safe-area-position-env: calc(env(safe-area-inset-right) + #{$px});
|
||||
|
||||
@include border-end($px, $type, $color);
|
||||
@media screen and (orientation: landscape) {
|
||||
@include border-end($safe-area-position, $type, $color);
|
||||
@include border-end($safe-area-position-env, $type, $color);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin safe-area-margin-horizontal($start, $end: $start) {
|
||||
$safe-area-end: null;
|
||||
$safe-area-start: null;
|
||||
$safe-area-start-env: null;
|
||||
$safe-area-end-env: null;
|
||||
|
||||
@if ($end) {
|
||||
$safe-area-end: calc(constant(safe-area-inset-right) + #{$end});
|
||||
$safe-area-end-env: calc(env(safe-area-inset-right) + #{$end});
|
||||
}
|
||||
@if ($start) {
|
||||
$safe-area-start: calc(constant(safe-area-inset-left) + #{$start});
|
||||
$safe-area-start-env: calc(env(safe-area-inset-left) + #{$start});
|
||||
}
|
||||
|
||||
@include margin-horizontal($start, $end);
|
||||
|
||||
@media screen and (orientation: landscape) {
|
||||
@include margin-horizontal($safe-area-start, $safe-area-end);
|
||||
@include margin-horizontal($safe-area-start-env, $safe-area-end-env);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin safe-area-padding-start($start, $end) {
|
||||
$safe-area-start: calc(constant(safe-area-inset-left) + #{$start});
|
||||
$safe-area-start-env: calc(env(safe-area-inset-left) + #{$start});
|
||||
|
||||
@include padding-horizontal($start, $end);
|
||||
|
||||
@media screen and (orientation: landscape) {
|
||||
@include padding-horizontal($safe-area-start, $end);
|
||||
@include padding-horizontal($safe-area-start-env, $end);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin safe-area-padding-end($start, $end) {
|
||||
$safe-area-end: calc(constant(safe-area-inset-right) + #{$end});
|
||||
$safe-area-end-env: calc(env(safe-area-inset-right) + #{$end});
|
||||
|
||||
@include padding-horizontal($start, $end);
|
||||
|
||||
@media screen and (orientation: landscape) {
|
||||
@include padding-horizontal($start, $safe-area-end);
|
||||
@include padding-horizontal($start, $safe-area-end-env);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin safe-area-position($top: null, $end: null, $bottom: null, $start: null) {
|
||||
@include position-horizontal($start, $end);
|
||||
@include safe-position-horizontal($start, $end);
|
||||
top: $top;
|
||||
bottom: $bottom;
|
||||
}
|
||||
|
||||
@mixin core-headings() {
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
h2 {
|
||||
font-size: 2.8rem;
|
||||
}
|
||||
h3 {
|
||||
font-size: 2.6rem;
|
||||
}
|
||||
h4 {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
h5 {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
h6 {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin core-as-items() {
|
||||
.item-md.item-block > .item-inner {
|
||||
border-bottom: 1px solid $list-md-border-color;
|
||||
}
|
||||
|
||||
.item-ios.item-block > .item-inner {
|
||||
border-bottom: $hairlines-width solid $list-ios-border-color;
|
||||
}
|
||||
|
||||
&:last-child .item > .item-inner {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin core-items() {
|
||||
&.item-md.item-block > .item-inner {
|
||||
border-bottom: 1px solid $list-md-border-color;
|
||||
}
|
||||
|
||||
&.item-ios.item-block > .item-inner {
|
||||
border-bottom: $hairlines-width solid $list-ios-border-color;
|
||||
}
|
||||
|
||||
&.item-block:last-child > .item-inner {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin darkmode() {
|
||||
$root: #{&};
|
||||
|
||||
@at-root body.dark {
|
||||
#{$root} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
/*
|
||||
* App Global variables SCSS
|
||||
* ----------------------------------------------------------------------------
|
||||
* Place here the different files you should import to use global variables.
|
||||
*/
|
||||
|
||||
@import "./globals.custom.scss";
|
||||
@import "./globals.variables.scss";
|
||||
@import "./globals.mixins.scss";
|
||||
@import "./globals.mixins.ionic.scss";
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
/*
|
||||
* App Global variables SCSS
|
||||
* ----------------------------------------------------------------------------
|
||||
* Place here all global variables.
|
||||
*/
|
||||
|
||||
/*
|
||||
* App colors
|
||||
*/
|
||||
$black: #3a3a3a !default; // Headings, standard text.
|
||||
$gray-darker: #626262 !default; // Text (emphasis-detail), placeholder, background.
|
||||
$gray-dark: #9e9e9e !default; // Borders (never text).
|
||||
$gray: #dddddd !default;
|
||||
$gray-light: #e9e9e9 !default; // Background.
|
||||
$gray-lighter: #f5f5f5 !default;
|
||||
$white: #ffffff !default; // Background, reversed text.
|
||||
|
||||
$blue: #0064d2 !default; // Link, background.
|
||||
$turquoise: #007982 !default; // Accent.
|
||||
$green: #5e8100 !default; // Accent.
|
||||
$red: #cb3d4d !default;
|
||||
$orange: #f98012 !default; // Accent (never text).
|
||||
$yellow: #fbad1a !default; // Accent (never text).
|
||||
$purple: #8e24aa !default; // Accent (never text).
|
||||
|
||||
$blue-light: mix($blue, white, 20%) !default; // Background.
|
||||
$blue-dark: darken($blue, 10%) !default;
|
||||
|
||||
$turquoise-light: mix($turquoise, white, 20%) !default; // Background.
|
||||
$turquoise-dark: darken($turquoise, 10%) !default;
|
||||
|
||||
$green-light: mix($green, white, 20%) !default;
|
||||
$green-dark: darken($green, 10%) !default;
|
||||
|
||||
$red-light: mix($red, white, 20%) !default;
|
||||
$red-dark: darken($red, 10%) !default;
|
||||
|
||||
$orange-light: lighten($orange, 10%) !default;
|
||||
|
||||
$yellow-light: mix($yellow, white, 20%) !default;
|
||||
$yellow-dark: mix($yellow, black, 40%) !default;
|
||||
|
||||
$core-color: $orange !default;
|
||||
$core-color-light: lighten($core-color, 10%) !default;
|
||||
$core-color-dark: darken($core-color, 10%) !default;
|
||||
|
||||
$text-color: $black !default;
|
||||
$link-color: $blue !default;
|
||||
$background-color: $gray-light !default;
|
||||
$subdued-text-color: $gray-darker !default;
|
||||
|
||||
$core-online-color: #5cb85c !default;
|
||||
|
||||
/*
|
||||
* Layout Breakpoints
|
||||
*
|
||||
* https://ionicframework.com/docs/layout/grid#default-breakpoints
|
||||
*/
|
||||
|
||||
$breakpoint-xs: 0px !default;
|
||||
$breakpoint-sm: 576px !default;
|
||||
$breakpoint-md: 768px !default;
|
||||
$breakpoint-lg: 992px !default;
|
||||
$breakpoint-xl: 1200px !default;
|
||||
|
||||
$breakpoint-tablet: $breakpoint-lg !default;
|
||||
|
|
@ -1,697 +0,0 @@
|
|||
// Place here our custom mixins.
|
||||
@mixin core-transition($where: all, $time: 500ms) {
|
||||
-webkit-transition: $where $time ease-in-out;
|
||||
-moz-transition: $where $time ease-in-out;
|
||||
-ms-transition: $where $time ease-in-out;
|
||||
-o-transition: $where $time ease-in-out;
|
||||
transition: $where $time ease-in-out;
|
||||
}
|
||||
|
||||
@mixin push-arrow-color($color: dedede, $flip-rtl: false) {
|
||||
$svg: "<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%2020'><path%20d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z'%20fill='%23#{$color}'/></svg>";
|
||||
@if $flip-rtl != true {
|
||||
@include multi-dir() {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,#{$svg}");
|
||||
}
|
||||
} @else {
|
||||
$flipped-svg: "<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%2020'><path%20transform='translate(20,%200)%20scale(-1,%201)'%20d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z'%20fill='%23#{$color}'/></svg>";
|
||||
|
||||
@include ltr () {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,#{$svg}");
|
||||
}
|
||||
@include rtl() {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,#{$flipped-svg}");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin border-start($px, $type, $color) {
|
||||
@include ltr() {
|
||||
border-left: $px $type $color;
|
||||
}
|
||||
|
||||
@include rtl() {
|
||||
border-right: $px $type $color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@mixin border-end($px, $type, $color) {
|
||||
@include ltr() {
|
||||
border-right: $px $type $color;
|
||||
}
|
||||
|
||||
@include rtl() {
|
||||
border-left: $px $type $color;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin safe-area-border-start($px, $type, $color) {
|
||||
$safe-area-position: calc(constant(safe-area-inset-left) + #{$px});
|
||||
$safe-area-position-env: calc(env(safe-area-inset-left) + #{$px});
|
||||
|
||||
@include border-start($px, $type, $color);
|
||||
@media screen and (orientation: landscape) {
|
||||
@include border-start($safe-area-position, $type, $color);
|
||||
@include border-start($safe-area-position-env, $type, $color);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin safe-area-border-end($px, $type, $color) {
|
||||
$safe-area-position: calc(constant(safe-area-inset-right) + #{$px});
|
||||
$safe-area-position-env: calc(env(safe-area-inset-right) + #{$px});
|
||||
|
||||
@include border-end($px, $type, $color);
|
||||
@media screen and (orientation: landscape) {
|
||||
@include border-end($safe-area-position, $type, $color);
|
||||
@include border-end($safe-area-position-env, $type, $color);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin safe-area-margin-horizontal($start, $end: $start) {
|
||||
$safe-area-end: null;
|
||||
$safe-area-start: null;
|
||||
$safe-area-start-env: null;
|
||||
$safe-area-end-env: null;
|
||||
|
||||
@if ($end) {
|
||||
$safe-area-end: calc(constant(safe-area-inset-right) + #{$end});
|
||||
$safe-area-end-env: calc(env(safe-area-inset-right) + #{$end});
|
||||
}
|
||||
@if ($start) {
|
||||
$safe-area-start: calc(constant(safe-area-inset-left) + #{$start});
|
||||
$safe-area-start-env: calc(env(safe-area-inset-left) + #{$start});
|
||||
}
|
||||
|
||||
@include margin-horizontal($start, $end);
|
||||
|
||||
@media screen and (orientation: landscape) {
|
||||
@include margin-horizontal($safe-area-start, $safe-area-end);
|
||||
@include margin-horizontal($safe-area-start-env, $safe-area-end-env);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin safe-area-padding-start($start, $end) {
|
||||
$safe-area-start: calc(constant(safe-area-inset-left) + #{$start});
|
||||
$safe-area-start-env: calc(env(safe-area-inset-left) + #{$start});
|
||||
|
||||
@include padding-horizontal($start, $end);
|
||||
|
||||
@media screen and (orientation: landscape) {
|
||||
@include padding-horizontal($safe-area-start, $end);
|
||||
@include padding-horizontal($safe-area-start-env, $end);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin safe-area-padding-end($start, $end) {
|
||||
$safe-area-end: calc(constant(safe-area-inset-right) + #{$end});
|
||||
$safe-area-end-env: calc(env(safe-area-inset-right) + #{$end});
|
||||
|
||||
@include padding-horizontal($start, $end);
|
||||
|
||||
@media screen and (orientation: landscape) {
|
||||
@include padding-horizontal($start, $safe-area-end);
|
||||
@include padding-horizontal($start, $safe-area-end-env);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin safe-area-position($top: null, $end: null, $bottom: null, $start: null) {
|
||||
@include position-horizontal($start, $end);
|
||||
@include safe-position-horizontal($start, $end);
|
||||
top: $top;
|
||||
bottom: $bottom;
|
||||
}
|
||||
|
||||
@mixin core-headings() {
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
h2 {
|
||||
font-size: 2.8rem;
|
||||
}
|
||||
h3 {
|
||||
font-size: 2.6rem;
|
||||
}
|
||||
h4 {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
h5 {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
h6 {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin core-as-items() {
|
||||
.item-md.item-block > .item-inner {
|
||||
border-bottom: 1px solid $list-md-border-color;
|
||||
}
|
||||
|
||||
.item-ios.item-block > .item-inner {
|
||||
border-bottom: $hairlines-width solid $list-ios-border-color;
|
||||
}
|
||||
|
||||
&:last-child .item > .item-inner {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin core-items() {
|
||||
&.item-md.item-block > .item-inner {
|
||||
border-bottom: 1px solid $list-md-border-color;
|
||||
}
|
||||
|
||||
&.item-ios.item-block > .item-inner {
|
||||
border-bottom: $hairlines-width solid $list-ios-border-color;
|
||||
}
|
||||
|
||||
&.item-block:last-child > .item-inner {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin darkmode() {
|
||||
$root: #{&};
|
||||
|
||||
@at-root body.dark {
|
||||
#{$root} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Extracted from ionic.mixins.scss
|
||||
// https://github.com/ionic-team/ionic-framework/blob/master/core/src/themes/ionic.mixins.scss
|
||||
@mixin input-cover() {
|
||||
@include position(0, null, null, 0);
|
||||
@include margin(0);
|
||||
|
||||
position: absolute;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
border: 0;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
|
||||
appearance: none;
|
||||
outline: none;
|
||||
|
||||
&::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin text-inherit() {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
font-style: inherit;
|
||||
font-weight: inherit;
|
||||
letter-spacing: inherit;
|
||||
text-decoration: inherit;
|
||||
text-indent: inherit;
|
||||
text-overflow: inherit;
|
||||
text-transform: inherit;
|
||||
text-align: inherit;
|
||||
white-space: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
@mixin button-state() {
|
||||
@include position(0, 0, 0, 0);
|
||||
|
||||
position: absolute;
|
||||
|
||||
content: "";
|
||||
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
// Font smoothing
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin font-smoothing() {
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
// Get the key from a map based on the index
|
||||
@function index-to-key($map, $index) {
|
||||
$keys: map-keys($map);
|
||||
|
||||
@return nth($keys, $index);
|
||||
}
|
||||
|
||||
|
||||
// Breakpoint Mixins
|
||||
// ---------------------------------------------------------------------------------
|
||||
|
||||
// Breakpoint viewport sizes and media queries.
|
||||
//
|
||||
// Breakpoints are defined as a map of (name: minimum width), order from small to large:
|
||||
//
|
||||
// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)
|
||||
//
|
||||
// The map defined in the `$screen-breakpoints` global variable is used as the `$breakpoints` argument by default.
|
||||
|
||||
// ---------------------------------------------------------------------------------
|
||||
|
||||
// Minimum breakpoint width. Null for the smallest (first) breakpoint.
|
||||
//
|
||||
// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
|
||||
// 576px
|
||||
@function breakpoint-min($name, $breakpoints: $screen-breakpoints) {
|
||||
$min: map-get($breakpoints, $name);
|
||||
|
||||
@return if($name != index-to-key($breakpoints, 1), $min, null);
|
||||
}
|
||||
|
||||
// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.
|
||||
// Useful for making responsive utilities.
|
||||
//
|
||||
// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
|
||||
// "" (Returns a blank string)
|
||||
// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
|
||||
// "-sm"
|
||||
@function breakpoint-infix($name, $breakpoints: $screen-breakpoints) {
|
||||
@return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
|
||||
}
|
||||
|
||||
// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
|
||||
// Makes the @content apply to the given breakpoint and wider.
|
||||
@mixin media-breakpoint-up($name, $breakpoints: $screen-breakpoints) {
|
||||
$min: breakpoint-min($name, $breakpoints);
|
||||
@if $min {
|
||||
@media (min-width: $min) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Name of the next breakpoint, or null for the last breakpoint.
|
||||
//
|
||||
// >> breakpoint-next(sm)
|
||||
// md
|
||||
// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
|
||||
// md
|
||||
// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
|
||||
// md
|
||||
@function breakpoint-next($name, $breakpoints: $screen-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
|
||||
$n: index($breakpoint-names, $name);
|
||||
@return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
|
||||
}
|
||||
|
||||
// Maximum breakpoint width. Null for the smallest (first) breakpoint.
|
||||
// The maximum value is reduced by 0.02px to work around the limitations of
|
||||
// `min-` and `max-` prefixes and viewports with fractional widths.
|
||||
//
|
||||
// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
|
||||
// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari. // Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
|
||||
// See https://bugs.webkit.org/show_bug.cgi?id=178261 // See https://bugs.webkit.org/show_bug.cgi?id=178261
|
||||
//
|
||||
// >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
|
||||
// 767.98px
|
||||
@function breakpoint-max($name, $breakpoints: $screen-breakpoints) {
|
||||
$max: map-get($breakpoints, $name);
|
||||
@return if($max and $max > 0, $max - .02, null);
|
||||
}
|
||||
|
||||
// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
|
||||
// Makes the @content apply to the given breakpoint and narrower.
|
||||
@mixin media-breakpoint-down($name, $breakpoints: $screen-breakpoints) {
|
||||
$max: breakpoint-max($name, $breakpoints);
|
||||
@if $max {
|
||||
@media (max-width: $max) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Text Direction - ltr / rtl
|
||||
//
|
||||
// CSS defaults to use the ltr css, and adds [dir=rtl] selectors
|
||||
// to override ltr defaults.
|
||||
// ----------------------------------------------------------
|
||||
|
||||
@mixin multi-dir() {
|
||||
@content;
|
||||
|
||||
// $root: #{&};
|
||||
// @at-root [dir] {
|
||||
// #{$root} {
|
||||
// @content;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
@mixin rtl() {
|
||||
$root: #{&};
|
||||
|
||||
@at-root [dir=rtl] {
|
||||
#{$root} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin ltr() {
|
||||
@content;
|
||||
}
|
||||
|
||||
|
||||
// SVG Background Image Mixin
|
||||
// @param {string} $svg
|
||||
// ----------------------------------------------------------
|
||||
@mixin svg-background-image($svg, $flip-rtl: false) {
|
||||
$url: url-encode($svg);
|
||||
$viewBox: str-split(str-extract($svg, "viewBox='", "'"), " ");
|
||||
|
||||
@if $flip-rtl != true or $viewBox == null {
|
||||
@include multi-dir() {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,#{$url}");
|
||||
}
|
||||
} @else {
|
||||
$transform: "transform='translate(#{nth($viewBox, 3)}, 0) scale(-1, 1)'";
|
||||
$flipped-url: $svg;
|
||||
$flipped-url: str-replace($flipped-url, "<path", "<path #{$transform}");
|
||||
$flipped-url: str-replace($flipped-url, "<line", "<line #{$transform}");
|
||||
$flipped-url: str-replace($flipped-url, "<polygon", "<polygon #{$transform}");
|
||||
$flipped-url: url-encode($flipped-url);
|
||||
|
||||
@include ltr () {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,#{$url}");
|
||||
}
|
||||
@include rtl() {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,#{$flipped-url}");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Add property horizontal
|
||||
// @param {string} $start
|
||||
// @param {string} $end
|
||||
// ----------------------------------------------------------
|
||||
@mixin property-horizontal($prop, $start, $end: $start) {
|
||||
@if $start == 0 and $end == 0 {
|
||||
#{$prop}-left: $start;
|
||||
#{$prop}-right: $end;
|
||||
|
||||
} @else {
|
||||
#{$prop}-left: $start;
|
||||
#{$prop}-right: $end;
|
||||
|
||||
@at-root {
|
||||
@supports ((margin-inline-start: 0) or (-webkit-margin-start: 0)) {
|
||||
& {
|
||||
@if $start != null {
|
||||
#{$prop}-left: unset;
|
||||
}
|
||||
@if $end != null {
|
||||
#{$prop}-right: unset;
|
||||
}
|
||||
|
||||
-webkit-#{$prop}-start: $start;
|
||||
#{$prop}-inline-start: $start;
|
||||
-webkit-#{$prop}-end: $end;
|
||||
#{$prop}-inline-end: $end;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Add property for all directions
|
||||
// @param {string} $prop
|
||||
// @param {string} $top
|
||||
// @param {string} $end
|
||||
// @param {string} $bottom
|
||||
// @param {string} $start
|
||||
// @param {boolean} $content include content or use default
|
||||
// ----------------------------------------------------------
|
||||
@mixin property($prop, $top, $end: $top, $bottom: $top, $start: $end) {
|
||||
@include property-horizontal($prop, $start, $end);
|
||||
#{$prop}-top: $top;
|
||||
#{$prop}-bottom: $bottom;
|
||||
}
|
||||
|
||||
// Add padding horizontal
|
||||
// @param {string} $start
|
||||
// @param {string} $end
|
||||
// ----------------------------------------------------------
|
||||
@mixin padding-horizontal($start, $end: $start) {
|
||||
@include property-horizontal(padding, $start, $end);
|
||||
}
|
||||
|
||||
// Add padding for all directions
|
||||
// @param {string} $top
|
||||
// @param {string} $end
|
||||
// @param {string} $bottom
|
||||
// @param {string} $start
|
||||
// ----------------------------------------------------------
|
||||
@mixin padding($top, $end: $top, $bottom: $top, $start: $end) {
|
||||
@include property(padding, $top, $end, $bottom, $start);
|
||||
}
|
||||
|
||||
// Add margin horizontal
|
||||
// @param {string} $start
|
||||
// @param {string} $end
|
||||
// ----------------------------------------------------------
|
||||
@mixin margin-horizontal($start, $end: $start) {
|
||||
@include property-horizontal(margin, $start, $end);
|
||||
}
|
||||
|
||||
// Add margin for all directions
|
||||
// @param {string} $top
|
||||
// @param {string} $end
|
||||
// @param {string} $bottom
|
||||
// @param {string} $start
|
||||
// ----------------------------------------------------------
|
||||
@mixin margin($top, $end: $top, $bottom: $top, $start: $end) {
|
||||
@include property(margin, $top, $end, $bottom, $start);
|
||||
}
|
||||
|
||||
// Add position horizontal
|
||||
// @param {string} $start - amount to position start
|
||||
// @param {string} $end - amount to left: 0; end
|
||||
// ----------------------------------------------------------
|
||||
@mixin position-horizontal($start: null, $end: null) {
|
||||
@if $start == $end {
|
||||
@include multi-dir() {
|
||||
left: $start;
|
||||
right: $end;
|
||||
}
|
||||
} @else {
|
||||
@include ltr() {
|
||||
left: $start;
|
||||
right: $end;
|
||||
}
|
||||
@include rtl() {
|
||||
left: unset;
|
||||
right: unset;
|
||||
|
||||
left: $end;
|
||||
right: $start;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Add position for all directions
|
||||
// @param {string} $top
|
||||
// @param {string} $end
|
||||
// @param {string} $bottom
|
||||
// @param {string} $start
|
||||
// ----------------------------------------------------------
|
||||
@mixin position($top: null, $end: null, $bottom: null, $start: null) {
|
||||
@include position-horizontal($start, $end);
|
||||
top: $top;
|
||||
bottom: $bottom;
|
||||
}
|
||||
|
||||
// Add border for all directions
|
||||
// @param {string} $top
|
||||
// @param {string} $end
|
||||
// @param {string} $bottom
|
||||
// @param {string} $start
|
||||
// ----------------------------------------------------------
|
||||
@mixin border($top, $end: $top, $bottom: $top, $start: $end) {
|
||||
@include property(border, $top, $end, $bottom, $start);
|
||||
}
|
||||
|
||||
// Add border radius for all directions
|
||||
// @param {string} $top-start
|
||||
// @param {string} $top-end
|
||||
// @param {string} $bottom-end
|
||||
// @param {string} $bottom-start
|
||||
// ----------------------------------------------------------
|
||||
@mixin border-radius($top-start, $top-end: $top-start, $bottom-end: $top-start, $bottom-start: $top-end) {
|
||||
@if $top-start == $top-end and $top-start == $bottom-end and $top-start == $bottom-start {
|
||||
@include multi-dir() {
|
||||
border-radius: $top-start;
|
||||
}
|
||||
} @else {
|
||||
@include ltr() {
|
||||
border-top-left-radius: $top-start;
|
||||
border-top-right-radius: $top-end;
|
||||
border-bottom-right-radius: $bottom-end;
|
||||
border-bottom-left-radius: $bottom-start;
|
||||
}
|
||||
|
||||
@include rtl() {
|
||||
border-top-left-radius: $top-end;
|
||||
border-top-right-radius: $top-start;
|
||||
border-bottom-right-radius: $bottom-start;
|
||||
border-bottom-left-radius: $bottom-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Add direction for all directions
|
||||
// @param {string} $dir - Direction on LTR
|
||||
@mixin direction($dir) {
|
||||
$other-dir: null;
|
||||
|
||||
@if $dir == ltr {
|
||||
$other-dir: rtl;
|
||||
} @else {
|
||||
$other-dir: ltr;
|
||||
}
|
||||
|
||||
@include ltr() {
|
||||
direction: $dir;
|
||||
}
|
||||
@include rtl() {
|
||||
direction: $other-dir;
|
||||
}
|
||||
}
|
||||
|
||||
// Add float for all directions
|
||||
// @param {string} $side
|
||||
// @param {string} $decorator - !important
|
||||
@mixin float($side, $decorator: null) {
|
||||
@if $side == start {
|
||||
@include ltr() {
|
||||
float: left $decorator;
|
||||
}
|
||||
@include rtl() {
|
||||
float: right $decorator;
|
||||
}
|
||||
} @else if $side == end {
|
||||
@include ltr() {
|
||||
float: right $decorator;
|
||||
}
|
||||
@include rtl() {
|
||||
float: left $decorator;
|
||||
}
|
||||
} @else {
|
||||
@include multi-dir() {
|
||||
float: $side $decorator;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin background-position($horizontal, $horizontal-amount: null, $vertical: null, $vertical-amount: null) {
|
||||
@if $horizontal == start or $horizontal == end {
|
||||
$horizontal-ltr: null;
|
||||
$horizontal-rtl: null;
|
||||
@if $horizontal == start {
|
||||
$horizontal-ltr: left;
|
||||
$horizontal-rtl: right;
|
||||
} @else {
|
||||
$horizontal-ltr: right;
|
||||
$horizontal-rtl: left;
|
||||
}
|
||||
|
||||
@include ltr() {
|
||||
background-position: $horizontal-ltr $horizontal-amount $vertical $vertical-amount;
|
||||
}
|
||||
@include rtl() {
|
||||
background-position: $horizontal-rtl $horizontal-amount $vertical $vertical-amount;
|
||||
}
|
||||
} @else {
|
||||
@include multi-dir() {
|
||||
background-position: $horizontal $horizontal-amount $vertical $vertical-amount;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin transform-origin($x-axis, $y-axis: null) {
|
||||
@if $x-axis == start {
|
||||
@include ltr() {
|
||||
transform-origin: left $y-axis;
|
||||
}
|
||||
@include rtl() {
|
||||
transform-origin: right $y-axis;
|
||||
}
|
||||
} @else if $x-axis == end {
|
||||
@include ltr() {
|
||||
transform-origin: right $y-axis;
|
||||
}
|
||||
@include rtl() {
|
||||
transform-origin: left $y-axis;
|
||||
}
|
||||
} @else if $x-axis == left or $x-axis == right {
|
||||
@include multi-dir() {
|
||||
transform-origin: $x-axis $y-axis;
|
||||
}
|
||||
} @else {
|
||||
@include ltr() {
|
||||
transform-origin: $x-axis $y-axis;
|
||||
}
|
||||
@include rtl() {
|
||||
transform-origin: calc(100% - #{$x-axis}) $y-axis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Add transform for all directions
|
||||
// @param {string} $transforms - comma separated list of transforms
|
||||
@mixin transform($transforms...) {
|
||||
$extra: null;
|
||||
|
||||
$x: null;
|
||||
$ltr-translate: null;
|
||||
$rtl-translate: null;
|
||||
|
||||
@each $transform in $transforms {
|
||||
@if (str-index($transform, translate3d)) {
|
||||
$transform: str-replace($transform, 'translate3d(');
|
||||
$transform: str-replace($transform, ')');
|
||||
|
||||
$coordinates: str-split($transform, ',');
|
||||
|
||||
$x: nth($coordinates, 1);
|
||||
$y: nth($coordinates, 2);
|
||||
$z: nth($coordinates, 3);
|
||||
|
||||
$ltr-translate: translate3d($x, $y, $z);
|
||||
$rtl-translate: translate3d(calc(-1 * #{$x}), $y, $z);
|
||||
} @else {
|
||||
@if $extra == null {
|
||||
$extra: $transform;
|
||||
} @else {
|
||||
$extra: $extra $transform;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if $x == '0' or $x == null {
|
||||
@include multi-dir() {
|
||||
transform: $ltr-translate $extra;
|
||||
}
|
||||
} @else {
|
||||
@include ltr() {
|
||||
transform: $ltr-translate $extra;
|
||||
}
|
||||
|
||||
@include rtl() {
|
||||
transform: $rtl-translate $extra;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,30 +1,30 @@
|
|||
// Common styles.
|
||||
.text-left { text-align: left; }
|
||||
.text-right { text-align: right; }
|
||||
.text-center { text-align: center; }
|
||||
.text-justify { text-align: justify; }
|
||||
.clearfix {
|
||||
// Common styles.
|
||||
.text-left { text-align: left; }
|
||||
.text-right { text-align: right; }
|
||||
.text-center { text-align: center; }
|
||||
.text-justify { text-align: justify; }
|
||||
.clearfix {
|
||||
&:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
.img-responsive {
|
||||
}
|
||||
.img-responsive {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
&[height] {
|
||||
height: auto;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.opacity-hide { opacity: 0; }
|
||||
.core-big { font-size: 115%; }
|
||||
.invisible { visibility: hidden; }
|
||||
.opacity-hide { opacity: 0; }
|
||||
.core-big { font-size: 115%; }
|
||||
.invisible { visibility: hidden; }
|
||||
|
||||
.button-no-uppercase {
|
||||
.button-no-uppercase {
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Correctly inherit ion-text-wrap onto labels.
|
||||
ion-item.ion-text-wrap ion-label {
|
||||
|
|
@ -432,7 +432,7 @@ ion-button.core-button-select {
|
|||
// Text formats.
|
||||
// Highlight text.
|
||||
.matchtext {
|
||||
background-color: var(--text-hightlight-background-color);
|
||||
background-color: var(--text-hightlight-background-color);
|
||||
}
|
||||
|
||||
// Text for accessibility, hidden from the view.
|
||||
|
|
@ -442,5 +442,3 @@ ion-button.core-button-select {
|
|||
font-weight: normal;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
@import "./format-text.scss";
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
/*
|
||||
* App CUSTOM theme SCSS
|
||||
* ----------------------------------------------------------------------------
|
||||
* Place here custom styles.
|
||||
*/
|
||||
|
||||
/*
|
||||
* Light Theme
|
||||
* -------------------------------------------
|
||||
*/
|
||||
:root {
|
||||
|
||||
}
|
||||
|
||||
/*
|
||||
* Dark Theme
|
||||
* -------------------------------------------
|
||||
*/
|
||||
:root body.dark {
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
/*
|
||||
* App DARK theme CSS
|
||||
* ----------------------------------------------------------------------------
|
||||
* Ionic Variables and Theming. For more info, please see:
|
||||
* http://ionicframework.com/docs/theming/
|
||||
*/
|
||||
|
||||
:root body.dark {
|
||||
--ion-background-color: #1e1e1e;
|
||||
--ion-background-color-rgb: 18,18,18;
|
||||
|
||||
--ion-text-color: #ffffff;
|
||||
--ion-text-color-rgb: 255,255,255;
|
||||
|
||||
--ion-border-color: #3f3f3f;
|
||||
|
||||
--ion-color-step-50: #1e1e1e;
|
||||
--ion-color-step-100: #2a2a2a;
|
||||
--ion-color-step-150: #363636;
|
||||
--ion-color-step-200: #414141;
|
||||
--ion-color-step-250: #4d4d4d;
|
||||
--ion-color-step-300: #595959;
|
||||
--ion-color-step-350: #656565;
|
||||
--ion-color-step-400: #717171;
|
||||
--ion-color-step-450: #7d7d7d;
|
||||
--ion-color-step-500: #898989;
|
||||
--ion-color-step-550: #949494;
|
||||
--ion-color-step-600: #a0a0a0;
|
||||
--ion-color-step-650: #acacac;
|
||||
--ion-color-step-700: #b8b8b8;
|
||||
--ion-color-step-750: #c4c4c4;
|
||||
--ion-color-step-800: #d0d0d0;
|
||||
--ion-color-step-850: #dbdbdb;
|
||||
--ion-color-step-900: #e7e7e7;
|
||||
--ion-color-step-950: #f3f3f3;
|
||||
|
||||
--light: var(--black);
|
||||
--dark: var(--gray-lighter);
|
||||
|
||||
--ion-color-light: var(--light);
|
||||
--ion-color-light-rgb: 58,58,58;
|
||||
--ion-color-light-contrast: #ffffff;
|
||||
--ion-color-light-contrast-rgb: 255,255,255;
|
||||
--ion-color-light-shade: #333333;
|
||||
--ion-color-light-tint: #4e4e4e;
|
||||
|
||||
--ion-color-dark: var(--dark);
|
||||
--ion-color-dark-rgb: 245,245,245;
|
||||
--ion-color-dark-contrast: #000000;
|
||||
--ion-color-dark-contrast-rgb: 0,0,0;
|
||||
--ion-color-dark-shade: #d8d8d8;
|
||||
--ion-color-dark-tint: #f6f6f6;
|
||||
|
||||
--ion-tab-bar-background: #1f1f1f;
|
||||
|
||||
--ion-item-background: #1e1e1e;
|
||||
|
||||
--ion-card-background: #1c1c1d;
|
||||
|
||||
ion-content {
|
||||
--background: var(--ion-background-color);
|
||||
--background-lighter: var(--gray-darker);
|
||||
--contrast-background: var(--ion-background-color);
|
||||
}
|
||||
|
||||
--core-tabs-background: var(--custom-tabs-background, #3a3a3a);
|
||||
--core-tab-background: var(--custom-tab-background, #3a3a3a);
|
||||
--core-tab-color: var(--custom-tab-color, var(--white));
|
||||
--core-tab-border-color: var(--custom-tab-border-color, var(--gray-light));
|
||||
|
||||
core-progress-bar {
|
||||
--text-color: var(--custom-progress-text-color, var(--gray-lighter));
|
||||
}
|
||||
|
||||
ion-item-divider {
|
||||
--background: var(--black);
|
||||
--color: var(--white);
|
||||
.item-detail-icon {
|
||||
color: var(--white);
|
||||
}
|
||||
}
|
||||
|
||||
--core-button-select-background: var(--custom-button-select-background, #3a3a3a);
|
||||
|
||||
--core-login-background: var(--custom-login-background, #3a3a3a);
|
||||
--core-login-text-color: var(--custom-login-text-color, white);
|
||||
}
|
||||
|
|
@ -1,102 +1,116 @@
|
|||
// Ionic Variables and Theming. For more info, please see:
|
||||
// http://ionicframework.com/docs/theming/
|
||||
/*
|
||||
* App LIGHT theme CSS
|
||||
* ----------------------------------------------------------------------------
|
||||
* Ionic Variables and Theming. For more info, please see:
|
||||
* http://ionicframework.com/docs/theming/
|
||||
*/
|
||||
|
||||
@import "custom.scss";
|
||||
|
||||
/** Ionic CSS Variables **/
|
||||
:root {
|
||||
|
||||
// Color palette
|
||||
--black: var(--custom-black, #3a3a3a); // Headings, standard text.
|
||||
--gray-darker: var(--custom-gray-darker, #626262); // Text (emphasis-detail), placeholder, background.
|
||||
--gray-dark: var(--custom-gray-dark, #9e9e9e); // Borders (never text).
|
||||
--gray: var(--custom-gray, #dddddd);
|
||||
--gray-light: var(--custom-gray-light, #e9e9e9); // Background.
|
||||
--gray-lighter: var(--custom-gray-lighter, #f5f5f5);
|
||||
--white: var(--custom-white, #ffffff); // Background, reversed text.
|
||||
--black: #{$black}; // Headings, standard text.
|
||||
--gray-darker: #{$gray-darker};
|
||||
--gray-dark: #{$gray-dark};
|
||||
--gray: #{$gray};
|
||||
--gray-light: #{$gray-light};
|
||||
--gray-lighter: #{$gray-lighter};
|
||||
--white: #{$white};
|
||||
|
||||
--blue: var(--custom-blue, #0064d2); // Link, background.
|
||||
--turquoise: var(--custom-turquoise, #007982); // Accent.
|
||||
--green: var(--custom-green, #5e8100); // Accent.
|
||||
--red: var(--custom-red, #cb3d4d);
|
||||
--orange: var(--custom-orange, #f98012); // Accent (never text).
|
||||
--yellow: var(--custom-yellow, #fbad1a); // Accent (never text).
|
||||
--purple: var(--custom-purple, #8e24aa); // Accent (never text).
|
||||
--blue: #{$blue};
|
||||
--turquoise: #{$turquoise};
|
||||
--green: #{$green};
|
||||
--red: #{$red};
|
||||
--orange: #{$orange};
|
||||
--yellow: #{$yellow};
|
||||
--purple: #{$purple};
|
||||
|
||||
--core-color: var(--custom-main-color, var(--orange));
|
||||
--core-online-color: #5cb85c;
|
||||
--core-color: #{$core-color};
|
||||
--core-online-color: #{$core-online-color};
|
||||
|
||||
--ion-color-primary: var(--core-color);
|
||||
// Named Color Variables
|
||||
--primary: var(--core-color);
|
||||
--secondary: var(--blue);
|
||||
--tertiary: var(--turquoise);
|
||||
--success: var(--green);
|
||||
--danger: var(--red);
|
||||
--warning: var(--yellow);
|
||||
--light: var(--gray-lighter);
|
||||
--dark: var(--black);
|
||||
--medium: var(--gray-light);
|
||||
--light: var(--gray-lighter);
|
||||
--primary: var(--core-color);
|
||||
|
||||
--ion-color-primary: var(--primary);
|
||||
--ion-color-primary-rgb: 249,128,18;
|
||||
--ion-color-primary-contrast: #ffffff;
|
||||
--ion-color-primary-contrast-rgb: 255,255,255;
|
||||
--ion-color-primary-shade: #db7110;
|
||||
--ion-color-primary-tint: #fa8d2a;
|
||||
|
||||
--ion-color-secondary: #0064d2;
|
||||
--ion-color-secondary: var(--secondary);
|
||||
--ion-color-secondary-rgb: 0,100,210;
|
||||
--ion-color-secondary-contrast: #ffffff;
|
||||
--ion-color-secondary-contrast-rgb: 255,255,255;
|
||||
--ion-color-secondary-shade: #0058b9;
|
||||
--ion-color-secondary-tint: #1a74d7;
|
||||
|
||||
--ion-color-tertiary: #007982;
|
||||
--ion-color-tertiary: var(--tertiary);
|
||||
--ion-color-tertiary-rgb: 0,121,130;
|
||||
--ion-color-tertiary-contrast: #ffffff;
|
||||
--ion-color-tertiary-contrast-rgb: 255,255,255;
|
||||
--ion-color-tertiary-shade: #006a72;
|
||||
--ion-color-tertiary-tint: #1a868f;
|
||||
|
||||
--ion-color-success: #5e8100;
|
||||
--ion-color-success: var(--success);
|
||||
--ion-color-success-rgb: 94,129,0;
|
||||
--ion-color-success-contrast: #ffffff;
|
||||
--ion-color-success-contrast-rgb: 255,255,255;
|
||||
--ion-color-success-shade: #537200;
|
||||
--ion-color-success-tint: #6e8e1a;
|
||||
|
||||
--ion-color-warning: #fbad1a;
|
||||
--ion-color-warning: var(--warning);
|
||||
--ion-color-warning-rgb: 251,173,26;
|
||||
--ion-color-warning-contrast: #000000;
|
||||
--ion-color-warning-contrast-rgb: 0,0,0;
|
||||
--ion-color-warning-shade: #dd9817;
|
||||
--ion-color-warning-tint: #fbb531;
|
||||
|
||||
--ion-color-danger: #cb3d4d;
|
||||
--ion-color-danger: var(--danger);
|
||||
--ion-color-danger-rgb: 203,61,77;
|
||||
--ion-color-danger-contrast: #ffffff;
|
||||
--ion-color-danger-contrast-rgb: 255,255,255;
|
||||
--ion-color-danger-shade: #b33644;
|
||||
--ion-color-danger-tint: #d0505f;
|
||||
|
||||
--ion-color-dark: #3a3a3a;
|
||||
--ion-color-dark: var(--dark);
|
||||
--ion-color-dark-rgb: 58,58,58;
|
||||
--ion-color-dark-contrast: #ffffff;
|
||||
--ion-color-dark-contrast-rgb: 255,255,255;
|
||||
--ion-color-dark-shade: #333333;
|
||||
--ion-color-dark-tint: #4e4e4e;
|
||||
|
||||
--ion-color-medium: #9e9e9e;
|
||||
--ion-color-medium: var(--medium);
|
||||
--ion-color-medium-rgb: 158,158,158;
|
||||
--ion-color-medium-contrast: #000000;
|
||||
--ion-color-medium-contrast-rgb: 0,0,0;
|
||||
--ion-color-medium-shade: #8b8b8b;
|
||||
--ion-color-medium-tint: #a8a8a8;
|
||||
|
||||
--ion-color-light: #f5f5f5;
|
||||
--ion-color-light: var(--light);
|
||||
--ion-color-light-rgb: 245,245,245;
|
||||
--ion-color-light-contrast: #000000;
|
||||
--ion-color-light-contrast-rgb: 0,0,0;
|
||||
--ion-color-light-shade: #d8d8d8;
|
||||
--ion-color-light-tint: #f6f6f6;
|
||||
|
||||
--ion-text-color: #3a3a3a;
|
||||
--ion-text-color: var($text-color);
|
||||
--ion-text-color-rgb: 58,58,58;
|
||||
--ion-card-color: var(--ion-text-color);
|
||||
|
||||
--text-hightlight-background-color: var(--custom-text-hightlight-background-color, #99c1ed);
|
||||
|
||||
ion-content {
|
||||
--background: var(--gray-light);
|
||||
--background: #{$background-color};
|
||||
--background-lighter: var(--gray-lighter);
|
||||
--contrast-background: var(--white);
|
||||
}
|
||||
|
|
@ -223,88 +237,3 @@
|
|||
--core-menu-box-shadow-end: var(--custom-menu-box-shadow-end, -4px 0px 16px rgba(0, 0, 0, 0.18));
|
||||
--core-menu-box-shadow-start: var(--custom-menu-box-shadow-start, 4px 0px 16px rgba(0, 0, 0, 0.18));
|
||||
}
|
||||
|
||||
/*
|
||||
* Dark Theme
|
||||
* -------------------------------------------
|
||||
*/
|
||||
:root body.dark {
|
||||
--ion-background-color: #1e1e1e;
|
||||
--ion-background-color-rgb: 18,18,18;
|
||||
|
||||
--ion-text-color: #ffffff;
|
||||
--ion-text-color-rgb: 255,255,255;
|
||||
|
||||
--ion-border-color: #3f3f3f;
|
||||
|
||||
--ion-color-step-50: #1e1e1e;
|
||||
--ion-color-step-100: #2a2a2a;
|
||||
--ion-color-step-150: #363636;
|
||||
--ion-color-step-200: #414141;
|
||||
--ion-color-step-250: #4d4d4d;
|
||||
--ion-color-step-300: #595959;
|
||||
--ion-color-step-350: #656565;
|
||||
--ion-color-step-400: #717171;
|
||||
--ion-color-step-450: #7d7d7d;
|
||||
--ion-color-step-500: #898989;
|
||||
--ion-color-step-550: #949494;
|
||||
--ion-color-step-600: #a0a0a0;
|
||||
--ion-color-step-650: #acacac;
|
||||
--ion-color-step-700: #b8b8b8;
|
||||
--ion-color-step-750: #c4c4c4;
|
||||
--ion-color-step-800: #d0d0d0;
|
||||
--ion-color-step-850: #dbdbdb;
|
||||
--ion-color-step-900: #e7e7e7;
|
||||
--ion-color-step-950: #f3f3f3;
|
||||
|
||||
--ion-color-light: #3a3a3a;
|
||||
--ion-color-light-rgb: 58,58,58;
|
||||
--ion-color-light-contrast: #ffffff;
|
||||
--ion-color-light-contrast-rgb: 255,255,255;
|
||||
--ion-color-light-shade: #333333;
|
||||
--ion-color-light-tint: #4e4e4e;
|
||||
|
||||
--ion-color-dark: #f5f5f5;
|
||||
--ion-color-dark-rgb: 245,245,245;
|
||||
--ion-color-dark-contrast: #000000;
|
||||
--ion-color-dark-contrast-rgb: 0,0,0;
|
||||
--ion-color-dark-shade: #d8d8d8;
|
||||
--ion-color-dark-tint: #f6f6f6;
|
||||
|
||||
--ion-tab-bar-background: #1f1f1f;
|
||||
|
||||
--ion-item-background: #1e1e1e;
|
||||
|
||||
--ion-card-background: #1c1c1d;
|
||||
|
||||
ion-content {
|
||||
--background: var(--ion-background-color);
|
||||
--background-lighter: var(--gray-darker);
|
||||
--contrast-background: var(--ion-background-color);
|
||||
}
|
||||
|
||||
--core-tabs-background: var(--custom-tabs-background, #3a3a3a);
|
||||
--core-tab-background: var(--custom-tab-background, #3a3a3a);
|
||||
--core-tab-color: var(--custom-tab-color, var(--white));
|
||||
--core-tab-border-color: var(--custom-tab-border-color, var(--gray-light));
|
||||
|
||||
core-progress-bar {
|
||||
--text-color: var(--custom-progress-text-color, var(--gray-lighter));
|
||||
}
|
||||
|
||||
ion-item-divider {
|
||||
--background: var(--black);
|
||||
--color: var(--white);
|
||||
.item-detail-icon {
|
||||
color: var(--white);
|
||||
}
|
||||
}
|
||||
|
||||
--core-button-select-background: var(--custom-button-select-background, #3a3a3a);
|
||||
|
||||
|
||||
--core-login-background: var(--custom-login-background, #3a3a3a);
|
||||
--core-login-text-color: var(--custom-login-text-color, white);
|
||||
}
|
||||
|
||||
@import "app.scss";
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
/*
|
||||
* App Global CSS
|
||||
* App Global theme CSS
|
||||
* ----------------------------------------------------------------------------
|
||||
* Put style rules here that you want to apply globally. These styles are for
|
||||
* the entire app and not just one component. Additionally, this file can be
|
||||
|
|
@ -9,9 +9,15 @@
|
|||
* https://ionicframework.com/docs/layout/global-stylesheets
|
||||
*/
|
||||
|
||||
/* Global variables */
|
||||
@import "./globals.scss";
|
||||
|
||||
/* Application styles */
|
||||
@import "./variables.scss";
|
||||
@import "./mixins.scss";
|
||||
@import "./theme.light.scss";
|
||||
@import "./theme.dark.scss";
|
||||
@import "./theme.custom.scss";
|
||||
@import "./theme.base.scss";
|
||||
@import "./format-text.scss";
|
||||
|
||||
/* Core CSS required for Ionic components to work properly */
|
||||
@import "~@ionic/angular/css/core.css";
|
||||
Loading…
Reference in New Issue