forked from CIT/Vmeda.Online
MOBILE-3814 style: Update ionic helpers
This commit is contained in:
Pau Ferrer Ocaña
parent
3b7e6426e0
commit
76c1e7834e
@ -38,9 +38,8 @@
|
||||
max-width: fit-content;
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
margin-left: 50%;
|
||||
transform: translateX(-50%);
|
||||
margin: 0 50% 0 auto; // LTR will be applied on transform.
|
||||
@include transform(translate3d(-50%,0,0));
|
||||
object-fit: cover;
|
||||
object-position: 50% 50%;
|
||||
}
|
||||
|
||||
@ -53,10 +53,10 @@
|
||||
|
||||
@include core-transition(transform, 500ms);
|
||||
|
||||
@include push-arrow-color(626262, true);
|
||||
@include push-arrow-color(#626262);
|
||||
|
||||
@include darkmode() {
|
||||
@include push-arrow-color(ffffff, true);
|
||||
@include push-arrow-color(#ffffff);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,629 +0,0 @@
|
||||
/*
|
||||
* 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
|
||||
*/
|
||||
|
||||
// Responsive Mixins
|
||||
// --------------------------------------------------
|
||||
// Creates a fixed width for the grid based on the screen size
|
||||
// ---------------------------------------------------------------------------------
|
||||
@mixin make-grid-widths($widths: $grid-widths, $breakpoints: $screen-breakpoints) {
|
||||
@each $breakpoint, $width in $widths {
|
||||
@include media-breakpoint-up($breakpoint, $breakpoints) {
|
||||
width: $width;
|
||||
}
|
||||
}
|
||||
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
// Adds padding to the element based on breakpoints
|
||||
// ---------------------------------------------------------------------------------
|
||||
@mixin make-breakpoint-padding($paddings) {
|
||||
@each $breakpoint in map-keys($paddings) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
$padding: map-get($paddings, $breakpoint);
|
||||
|
||||
@include padding($padding);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Gets the active color's css variable from a variation. Alpha is optional.
|
||||
// --------------------------------------------------------------------------------------------
|
||||
// Example usage:
|
||||
// current-color(base) => var(--ion-color-base)
|
||||
// current-color(contrast, 0.1) => rgba(var(--ion-color-contrast-rgb), 0.1)
|
||||
// --------------------------------------------------------------------------------------------
|
||||
@function current-color($variation, $alpha: null) {
|
||||
@if $alpha == null {
|
||||
@return var(--ion-color-#{$variation});
|
||||
} @else {
|
||||
@return rgba(var(--ion-color-#{$variation}-rgb), #{$alpha});
|
||||
}
|
||||
}
|
||||
|
||||
// Mixes a color with black to create its shade.
|
||||
// Default to bootstrap level 6.
|
||||
// --------------------------------------------------------------------------------------------
|
||||
@function get-color-shade($color, $percent: 48%) {
|
||||
@return mix(#000, $color, $percent);
|
||||
}
|
||||
|
||||
// Mixes a color with white to create its tint.
|
||||
// Default to bootstrap level -10.
|
||||
// --------------------------------------------------------------------------------------------
|
||||
@function get-color-tint($color, $percent: 80%) {
|
||||
@return mix(#fff, $color, $percent);
|
||||
}
|
||||
|
||||
// Converts a color to a comma separated rgb.
|
||||
// --------------------------------------------------------------------------------------------
|
||||
@function color-to-rgb-list($color) {
|
||||
@return #{red($color)},#{green($color)},#{blue($color)};
|
||||
}
|
||||
|
||||
|
||||
// Ionic Colors
|
||||
// --------------------------------------------------
|
||||
// Generates the color classes and variables based on the
|
||||
// colors map
|
||||
|
||||
@mixin generate-color($color-name, $colors) {
|
||||
$base: map-get($colors, $color-name);
|
||||
$light: map-get($base, 'light');
|
||||
|
||||
@include generate-color-variants($color-name, $light);
|
||||
|
||||
body.dark {
|
||||
$dark: map-get($base, 'dark');
|
||||
$dark: mix($light, white, 80%) !default;
|
||||
@include generate-color-variants($color-name, $dark);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin generate-color-variants($color-name, $base) {
|
||||
$contrast: get_contrast_color($base);
|
||||
$shade: get-color-shade($base);
|
||||
$tint: get-color-tint($base);
|
||||
|
||||
--#{$color-name}: #{$base};
|
||||
--#{$color-name}-shade: #{$shade};
|
||||
--#{$color-name}-tint: #{$tint};
|
||||
--#{$color-name}-contrast: #{$contrast};
|
||||
|
||||
// Internal ionic use only.
|
||||
--ion-color-#{$color-name}: var(--#{$color-name});
|
||||
--ion-color-#{$color-name}-base: var(--ion-color-#{$color-name});
|
||||
--ion-color-#{$color-name}-rgb: #{color-to-rgb-list($base)};
|
||||
--ion-color-#{$color-name}-contrast: #{$contrast};
|
||||
--ion-color-#{$color-name}-contrast-rgb: #{color-to-rgb-list($contrast)};
|
||||
--ion-color-#{$color-name}-shade: #{$shade};
|
||||
--ion-color-#{$color-name}-tint: #{$tint};
|
||||
|
||||
.ion-color-#{$color-name} {
|
||||
--ion-color: var(--ion-color-#{$color-name});
|
||||
--ion-color-base: var(--ion-color-#{$color-name}-base);
|
||||
--ion-color-rgb: var(--ion-color-#{$color-name}-rgb);
|
||||
--ion-color-contrast: var(--ion-color-#{$color-name}-contrast);
|
||||
--ion-color-contrast-rgb: var(--ion-color-#{$color-name}-contrast-rgb);
|
||||
--ion-color-shade: var(--ion-color-#{$color-name}-shade);
|
||||
--ion-color-tint: var(--ion-color-#{$color-name}-tint);
|
||||
}
|
||||
}
|
||||
|
||||
@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,4 +1,4 @@
|
||||
/*
|
||||
/**
|
||||
* App Global variables SCSS
|
||||
* ----------------------------------------------------------------------------
|
||||
* Place here the different files you should import to use global variables.
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
$font-path: "../assets/fonts";
|
||||
$assets-path: "../assets";
|
||||
@import "./globals.mixins.scss";
|
||||
@import "./globals.mixins.ionic.scss";
|
||||
|
||||
@import "./helpers/helpers.scss";
|
||||
@import "./globals.custom.scss";
|
||||
@import "./globals.variables.scss";
|
||||
|
||||
@ -1,11 +1,74 @@
|
||||
@use "sass:math" as math;
|
||||
|
||||
/*
|
||||
/**
|
||||
* App custom mixins for SCSS
|
||||
* ----------------------------------------------------------------------------
|
||||
* Place here our custom mixins.
|
||||
*/
|
||||
|
||||
// Mixes a color with black to create its shade.
|
||||
// Default to bootstrap level 6.
|
||||
// --------------------------------------------------------------------------------------------
|
||||
@function get-color-shade-percent($color, $percent: 48%) {
|
||||
@return mix(#000, $color, $percent);
|
||||
}
|
||||
|
||||
// Mixes a color with white to create its tint.
|
||||
// Default to bootstrap level -10.
|
||||
// --------------------------------------------------------------------------------------------
|
||||
@function get-color-tint-percent($color, $percent: 80%) {
|
||||
@return mix(#fff, $color, $percent);
|
||||
}
|
||||
|
||||
// Ionic Colors
|
||||
// --------------------------------------------------
|
||||
// Generates the color classes and variables based on the
|
||||
// colors map
|
||||
|
||||
@mixin generate-color($color-name, $colors) {
|
||||
$base: map-get($colors, $color-name);
|
||||
$light: map-get($base, 'light');
|
||||
|
||||
@include generate-color-variants($color-name, $light);
|
||||
|
||||
body.dark {
|
||||
$dark: map-get($base, 'dark');
|
||||
$dark: mix($light, white, 80%) !default;
|
||||
@include generate-color-variants($color-name, $dark);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin generate-color-variants($color-name, $base) {
|
||||
$contrast: get_contrast_color($base);
|
||||
$shade: get-color-shade-percent($base);
|
||||
$tint: get-color-tint-percent($base);
|
||||
|
||||
--#{$color-name}: #{$base};
|
||||
--#{$color-name}-shade: #{$shade};
|
||||
--#{$color-name}-tint: #{$tint};
|
||||
--#{$color-name}-contrast: #{$contrast};
|
||||
|
||||
// Internal ionic use only.
|
||||
--ion-color-#{$color-name}: var(--#{$color-name});
|
||||
--ion-color-#{$color-name}-base: var(--ion-color-#{$color-name});
|
||||
--ion-color-#{$color-name}-rgb: #{color-to-rgb-list($base)};
|
||||
--ion-color-#{$color-name}-contrast: #{$contrast};
|
||||
--ion-color-#{$color-name}-contrast-rgb: #{color-to-rgb-list($contrast)};
|
||||
--ion-color-#{$color-name}-shade: #{$shade};
|
||||
--ion-color-#{$color-name}-tint: #{$tint};
|
||||
|
||||
.ion-color-#{$color-name} {
|
||||
--ion-color: var(--ion-color-#{$color-name});
|
||||
--ion-color-base: var(--ion-color-#{$color-name}-base);
|
||||
--ion-color-rgb: var(--ion-color-#{$color-name}-rgb);
|
||||
--ion-color-contrast: var(--ion-color-#{$color-name}-contrast);
|
||||
--ion-color-contrast-rgb: var(--ion-color-#{$color-name}-contrast-rgb);
|
||||
--ion-color-shade: var(--ion-color-#{$color-name}-shade);
|
||||
--ion-color-tint: var(--ion-color-#{$color-name}-tint);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@mixin core-focus() {
|
||||
outline: none;
|
||||
position: relative;
|
||||
@ -32,47 +95,24 @@
|
||||
}
|
||||
|
||||
-webkit-transition: $transitions;
|
||||
-moz-transition: $transitions;
|
||||
-ms-transition: $transitions;
|
||||
-o-transition: $transitions;
|
||||
transition: $transitions;
|
||||
}
|
||||
|
||||
@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>";
|
||||
/**
|
||||
* Same as item-push-svg-url but admits flip-rtl
|
||||
*/
|
||||
@mixin push-arrow-color($fill: 626262, $flip-rtl: false) {
|
||||
$item-detail-push-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='#{$fill}'/></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}");
|
||||
}
|
||||
}
|
||||
@include svg-background-image($item-detail-push-svg, $flip-rtl);
|
||||
}
|
||||
|
||||
@mixin border-start($px, $type: null, $color: null) {
|
||||
border-left: $px $type $color;
|
||||
|
||||
@include rtl() {
|
||||
border-left: unset;
|
||||
border-right: $px $type $color;
|
||||
}
|
||||
@include property-horizontal(border, $px $type $color, null);
|
||||
}
|
||||
|
||||
|
||||
@mixin border-end($px, $type: null, $color: null) {
|
||||
border-right: $px $type $color;
|
||||
|
||||
@include rtl() {
|
||||
border-right: unset;
|
||||
border-left: $px $type $color;
|
||||
}
|
||||
@include property-horizontal(border, null, $px $type $color);
|
||||
}
|
||||
|
||||
@mixin safe-area-border-start($px, $type, $color) {
|
||||
@ -167,41 +207,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
@at-root #{add-root-selector($root, "body.dark")} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
15
src/theme/helpers/helpers.scss
Normal file
15
src/theme/helpers/helpers.scss
Normal file
@ -0,0 +1,15 @@
|
||||
|
||||
// Global Utility Functions
|
||||
@import "./ionic.functions.string";
|
||||
|
||||
// Global Color Functions
|
||||
@import "./ionic.functions.color";
|
||||
|
||||
// Global Mixins
|
||||
@import "./ionic.mixins";
|
||||
|
||||
// Global Mixins
|
||||
@import "./ionic.components.mixins";
|
||||
|
||||
// Custom Mixins
|
||||
@import "./custom.mixins";
|
||||
48
src/theme/helpers/ionic.components.mixins.scss
Normal file
48
src/theme/helpers/ionic.components.mixins.scss
Normal file
@ -0,0 +1,48 @@
|
||||
/**
|
||||
* Imported ionic mixins for SCSS from different components
|
||||
* ----------------------------------------------------------------------------
|
||||
* Extracted from
|
||||
* https://github.com/ionic-team/ionic-framework/blob/master/core/src/components/grid/grid.mixins.scss
|
||||
* https://github.com/ionic-team/ionic-framework/blob/master/core/src/components/item/item.mixins.scss
|
||||
*/
|
||||
|
||||
// Responsive Mixins
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Creates a fixed width for the grid based on the screen size
|
||||
// ---------------------------------------------------------------------------------
|
||||
|
||||
@mixin make-grid-widths($widths: $grid-widths, $breakpoints: $screen-breakpoints) {
|
||||
@each $breakpoint, $width in $widths {
|
||||
@include media-breakpoint-up($breakpoint, $breakpoints) {
|
||||
width: $width;
|
||||
}
|
||||
}
|
||||
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
|
||||
// Adds padding to the element based on breakpoints
|
||||
// ---------------------------------------------------------------------------------
|
||||
|
||||
@mixin make-breakpoint-padding($paddings) {
|
||||
@each $breakpoint in map-keys($paddings) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
$padding: map-get($paddings, $breakpoint);
|
||||
|
||||
@include padding($padding);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Item Mixins
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin item-push-svg-url($fill) {
|
||||
$item-detail-push-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='#{$fill}'/></svg>";
|
||||
|
||||
@include svg-background-image($item-detail-push-svg, true);
|
||||
}
|
||||
66
src/theme/helpers/ionic.functions.color.scss
Normal file
66
src/theme/helpers/ionic.functions.color.scss
Normal file
@ -0,0 +1,66 @@
|
||||
/**
|
||||
* Imported ionic color functions for SCSS
|
||||
* ----------------------------------------------------------------------------
|
||||
* Extracted from
|
||||
* https://github.com/ionic-team/ionic-framework/blob/master/core/src/themes/ionic.functions.color.scss
|
||||
*/
|
||||
|
||||
// Gets the active color's css variable from a variation. Alpha is optional.
|
||||
// --------------------------------------------------------------------------------------------
|
||||
// Example usage:
|
||||
// current-color(base) => var(--ion-color-base)
|
||||
// current-color(contrast, 0.1) => rgba(var(--ion-color-contrast-rgb), 0.1)
|
||||
// --------------------------------------------------------------------------------------------
|
||||
@function current-color($variation, $alpha: null) {
|
||||
@if $alpha == null {
|
||||
@return var(--ion-color-#{$variation});
|
||||
} @else {
|
||||
@return rgba(var(--ion-color-#{$variation}-rgb), #{$alpha});
|
||||
}
|
||||
}
|
||||
|
||||
// Gets the specific color's css variable from the name and variation. Alpha/rgb are optional.
|
||||
// --------------------------------------------------------------------------------------------
|
||||
// Example usage:
|
||||
// ion-color(primary, base) => var(--ion-color-primary, #3880ff)
|
||||
// ion-color(secondary, contrast) => var(--ion-color-secondary-contrast)
|
||||
// ion-color(primary, base, 0.5) => rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.5)
|
||||
// --------------------------------------------------------------------------------------------
|
||||
@function ion-color($name, $variation, $alpha: null, $rgb: null) {
|
||||
$values: map-get($colors, $name);
|
||||
$value: map-get($values, $variation);
|
||||
$variable: --ion-color-#{$name}-#{$variation};
|
||||
|
||||
@if ($variation == base) {
|
||||
$variable: --ion-color-#{$name};
|
||||
}
|
||||
|
||||
@if ($alpha) {
|
||||
$value: color-to-rgb-list($value);
|
||||
@return rgba(var(#{$variable}-rgb, $value), $alpha);
|
||||
}
|
||||
@if ($rgb) {
|
||||
$value: color-to-rgb-list($value);
|
||||
$variable: #{$variable}-rgb;
|
||||
}
|
||||
|
||||
@return var(#{$variable}, $value);
|
||||
}
|
||||
|
||||
// Mixes a color with black to create its shade.
|
||||
// --------------------------------------------------------------------------------------------
|
||||
@function get-color-shade($color) {
|
||||
@return mix(#000, $color, 12%);
|
||||
}
|
||||
|
||||
// Mixes a color with white to create its tint.
|
||||
// --------------------------------------------------------------------------------------------
|
||||
@function get-color-tint($color) {
|
||||
@return mix(#fff, $color, 10%);
|
||||
}
|
||||
|
||||
// Converts a color to a comma separated rgb.
|
||||
// --------------------------------------------------------------------------------------------
|
||||
@function color-to-rgb-list($color) {
|
||||
@return #{red($color)},#{green($color)},#{blue($color)};
|
||||
}
|
||||
160
src/theme/helpers/ionic.functions.string.scss
Normal file
160
src/theme/helpers/ionic.functions.string.scss
Normal file
@ -0,0 +1,160 @@
|
||||
/**
|
||||
* Imported ionic string functions for SCSS
|
||||
* ----------------------------------------------------------------------------
|
||||
* Extracted from
|
||||
* https://github.com/ionic-team/ionic-framework/blob/master/core/src/themes/ionic.functions.string.scss
|
||||
*/
|
||||
|
||||
|
||||
// String Utility Functions
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
// String Replace Function
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
@function str-replace($string, $search, $replace: "") {
|
||||
$index: str-index($string, $search);
|
||||
|
||||
@if $index {
|
||||
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
|
||||
}
|
||||
|
||||
@return $string;
|
||||
}
|
||||
|
||||
// String Split Function
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
|
||||
@function str-split($string, $separator) {
|
||||
// empty array/list
|
||||
$split-arr: ();
|
||||
// first index of separator in string
|
||||
$index: str-index($string, $separator);
|
||||
// loop through string
|
||||
@while $index != null {
|
||||
// get the substring from the first character to the separator
|
||||
$item: str-slice($string, 1, $index - 1);
|
||||
// push item to array
|
||||
$split-arr: append($split-arr, $item);
|
||||
// remove item and separator from string
|
||||
$string: str-slice($string, $index + 1);
|
||||
// find new index of separator
|
||||
$index: str-index($string, $separator);
|
||||
}
|
||||
// add the remaining string to list (the last item)
|
||||
$split-arr: append($split-arr, $string);
|
||||
|
||||
@return $split-arr;
|
||||
}
|
||||
|
||||
|
||||
// String Extract Function
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
@function str-extract($string, $start, $end) {
|
||||
$start-index: str-index($string, $start);
|
||||
|
||||
@if $start-index {
|
||||
$post: str-slice($string, $start-index + str-length($start));
|
||||
$end-index: str-index($post, $end);
|
||||
|
||||
@if $end-index {
|
||||
@return str-slice($post, 1, $end-index - 1);
|
||||
}
|
||||
}
|
||||
|
||||
@return null;
|
||||
}
|
||||
|
||||
|
||||
// String Contains Function
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
@function str-contains($string, $needle) {
|
||||
@if (type-of($string) == string) {
|
||||
@return str-index($string, $needle) != null;
|
||||
}
|
||||
|
||||
@return false;
|
||||
}
|
||||
|
||||
|
||||
// URL Encode Function
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
@function url-encode($val) {
|
||||
$spaces: str-replace($val, " ", "%20");
|
||||
$encoded: str-replace($spaces, "#", "%23");
|
||||
@return $encoded;
|
||||
}
|
||||
|
||||
|
||||
// Add Root Selector
|
||||
// --------------------------------------------------------------------------------
|
||||
// Adds a root selector using host-context based on the selector passed
|
||||
//
|
||||
// Examples
|
||||
// --------------------------------------------------------------------------------
|
||||
// @include add-root-selector("[dir=rtl]", ":host")
|
||||
// --> :host-context([dir=rtl])
|
||||
//
|
||||
// @include add-root-selector("[dir=rtl]", ":host(.fixed)")
|
||||
// --> :host-context([dir=rtl]):host(.fixed)
|
||||
// --> :host-context([dir=rtl]).fixed
|
||||
//
|
||||
// @include add-root-selector("[dir=rtl]", ":host(.tab-layout-icon-hide) ::slotted(ion-badge)")
|
||||
// --> :host-context([dir=rtl]).tab-layout-icon-hide ::slotted(ion-badge)
|
||||
//
|
||||
// @include add-root-selector("[dir=rtl]", ".shadow")
|
||||
// --> [dir=rtl] .shadow
|
||||
// --> :host-context([dir=rtl]) .shadow
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
@function add-root-selector($root, $addHostSelector) {
|
||||
$selectors: str-split($root, ",");
|
||||
|
||||
$list: ();
|
||||
|
||||
@each $selector in $selectors {
|
||||
// If the selector contains :host( it means it is targeting a class on the host
|
||||
// element so we need to change how we target it
|
||||
@if str-contains($selector, ":host(") {
|
||||
$shadow-element: str-replace($selector, ":host(", ":host-context(#{$addHostSelector}):host(");
|
||||
$list: append($list, $shadow-element, comma);
|
||||
|
||||
$new-element: ();
|
||||
$elements: str-split($selector, " ");
|
||||
|
||||
@each $element in $elements {
|
||||
@if str-contains($element, ":host(") {
|
||||
$scoped-element: $element;
|
||||
|
||||
@if str-contains($element, "))") {
|
||||
$scoped-element: str-replace($scoped-element, "))", ")");
|
||||
} @else {
|
||||
$scoped-element: str-replace($scoped-element, ")", "");
|
||||
}
|
||||
$scoped-element: str-replace($scoped-element, ":host(", ":host-context(#{$addHostSelector})");
|
||||
|
||||
$new-element: append($new-element, $scoped-element, space);
|
||||
} @else {
|
||||
$new-element: append($new-element, $element, space);
|
||||
}
|
||||
}
|
||||
|
||||
$list: append($list, $new-element, comma);
|
||||
// If the selector contains :host it means it is targeting just the host
|
||||
// element so we can change it to look for host-context
|
||||
} @else if str-contains($selector, ":host") {
|
||||
$list: append($list, ":host-context(#{$addHostSelector})", comma);
|
||||
// If the selector does not contain host at all it is either a shadow
|
||||
// or normal element so append both the dir check and host-context
|
||||
} @else {
|
||||
$list: append($list, "#{$addHostSelector} #{$selector}", comma);
|
||||
$list: append($list, ":host-context(#{$addHostSelector}) #{$selector}", comma);
|
||||
}
|
||||
}
|
||||
|
||||
@return $list;
|
||||
}
|
||||
542
src/theme/helpers/ionic.mixins.scss
Normal file
542
src/theme/helpers/ionic.mixins.scss
Normal file
@ -0,0 +1,542 @@
|
||||
/**
|
||||
* Imported ionic mixins for SCSS
|
||||
* ----------------------------------------------------------------------------
|
||||
* Extracted from
|
||||
* 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 visually-hidden() {
|
||||
position: absolute;
|
||||
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
border: 0;
|
||||
outline: 0;
|
||||
clip: rect(0 0 0 0);
|
||||
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
}
|
||||
|
||||
@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 #{add-root-selector($root, "[dir=rtl]")} {
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -380,7 +380,7 @@
|
||||
|
||||
@for $i from 0 to length($core-course-image-background) {
|
||||
--core-course-color-#{$i}: #{nth($core-course-image-background, $i + 1)};
|
||||
--core-course-color-#{$i}-tint: #{get-color-tint(nth($core-course-image-background, $i + 1))};
|
||||
--core-course-color-#{$i}-tint: #{get-color-tint-percent(nth($core-course-image-background, $i + 1))};
|
||||
}
|
||||
|
||||
@for $i from 0 to length($core-dd-question-colors) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user