forked from EVOgeek/Vmeda.Online
188 lines
5.3 KiB
SCSS
188 lines
5.3 KiB
SCSS
|
/*
|
||
|
* 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;
|
||
|
}
|
||
|
}
|
||
|
}
|