Vmeda.Online/src/theme/globals.mixins.scss

/*
 * App custom mixins for SCSS
 * ----------------------------------------------------------------------------
 * Place here our custom mixins.
 */

 @mixin core-focus() {
    outline: none;
    position: relative;
    &::after {
        @include position(0, 0, 0, 0);
        position: absolute;
        content: "";
        opacity: 1;
        z-index: 1;
        @include core-focus-style();
    }
 }

 @mixin core-focus-style() {
    box-shadow: inset 0 0 var(--a11y-focus-width) 1px var(--a11y-focus-color);
    // Thicker option:
    // border: var(--a11y-focus-width) solid var(--a11y-focus-color);
}

@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: null, $color: null) {
    border-left: $px $type $color;

    @include rtl() {
        border-left: unset;
        border-right: $px $type $color;
    }
}


@mixin border-end($px, $type: null, $color: null) {
    border-right: $px $type $color;

    @include rtl() {
        border-right: unset;
        border-left: $px $type $color;
    }
}

@mixin safe-area-border-start($px, $type, $color) {
    $safe-area-position: calc(var(--ion-safe-area-left) + #{$px});

    @include border-start($safe-area-position, $type, $color);
}

@mixin safe-area-border-end($px, $type, $color) {
    $safe-area-position: calc(var(--ion-safe-area-right) + #{$px});

    @include border-end($safe-area-position, $type, $color);
}

@mixin safe-area-margin-horizontal($start, $end: $start) {
    $safe-area-end: null;
    $safe-area-start: null;

    @if ($end) {
        $safe-area-end: calc(var(--ion-safe-area-right) + #{$end});
    }
    @if ($start) {
        $safe-area-start: calc(var(--ion-safe-area-left) + #{$start});
    }

    @include margin-horizontal($safe-area-start, $safe-area-end);
}

@mixin safe-area-margin-start($start, $end) {
    $safe-area-start: calc(var(--ion-safe-area-left) + #{$start});

    @include margin-horizontal($safe-area-start, $end);
}

@mixin safe-area-margin-end($start, $end) {
    $safe-area-end: calc(var(--ion-safe-area-right) + #{$end});

    @include margin-horizontal($start, $safe-area-end);
}

@mixin safe-area-padding-horizontal($start, $end: $start) {
    $safe-area-end: null;
    $safe-area-start: null;

    @if ($end) {
        $safe-area-end: calc(var(--ion-safe-area-right) + #{$end});
    }
    @if ($start) {
        $safe-area-start: calc(var(--ion-safe-area-left) + #{$start});
    }

    @include padding-horizontal($safe-area-start, $safe-area-end);
}

@mixin safe-area-padding-start($start, $end) {
    $safe-area-start: calc(var(--ion-safe-area-left) + #{$start});

    @include padding-horizontal($safe-area-start, $end);
}

@mixin safe-area-padding-end($start, $end) {
    $safe-area-end: calc(var(--ion-safe-area-right) + #{$end});

    @include padding-horizontal($start, $safe-area-end);
}

@mixin safe-area-position($top: null, $end: null, $bottom: null, $start: null) {
    $safe-area-start: calc(var(--ion-safe-area-left) + #{$start});
    $safe-area-end: calc(var(--ion-safe-area-right) + #{$end});

    @include position($top, $safe-area-end, $bottom, $safe-area-start);
}

@mixin core-headings() {
    h1 {
        font-size: 26px;
    }
    h2, .item-heading {
        font-size: 24px;
    }
    h3 {
        font-size: 22px;
    }
    h4 {
        font-size: 20px;
    }
    h5 {
        font-size: 18px;
    }
    h6 {
        font-size: 16px;
    }
}

@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;
        }
    }
}

@mixin horizontal_scroll_item($width, $min-width, $max-width) {
    flex: 0 0 $width;
    min-width: $min-width;
    max-width: $max-width;
    align-self: stretch;
    display: block;

    ion-card {
        --vertical-margin: 10px;
        --horizontal-margin: 10px;

        width: calc(100% - var(--vertical-margin) - var(--vertical-margin));
        height: calc(100% - var(--vertical-margin) - var(--vertical-margin));
        margin: var(--vertical-margin) var(--horizontal-margin);

        @media (max-width: 360px) {
            --horizontal-margin: 6px;
        }
    }

    .ion-text-wrap ion-label {
        .item-heading, h2, p {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
}


// Color mixins.
@function get_brightness($color) {
    @return (red($color) + green($color) + blue($color)) / 3;
}

@function get_contrast_color($color) {
    $brightness: get_brightness($color);

    @return if($brightness < 127, white, black);
}