anki/sass/_button-mixins.scss

/* Copyright: Ankitects Pty Ltd and contributors
 * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
@use "vars";
@use "sass:color";
@use "sass/elevation" as *;

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";

@mixin impressed-shadow($intensity) {
    box-shadow: inset 0 calc(var(--buttons-size, 10px) / 15)
        calc(var(--buttons-size, 10px) / 5) rgba(black, $intensity);
}

@mixin border-radius {
    border-top-left-radius: var(--border-left-radius);
    border-bottom-left-radius: var(--border-left-radius);

    border-top-right-radius: var(--border-right-radius);
    border-bottom-right-radius: var(--border-right-radius);
}

@mixin background($primary: false, $elevation: 1, $hover: true) {
    @if $primary {
        background: linear-gradient(
            180deg,
            var(--button-primary-gradient-start) 0%,
            var(--button-primary-gradient-end) 100%
        );
        @if $hover {
            &:hover {
                background: linear-gradient(
                    180deg,
                    var(--button-primary-hover-gradient-start) 0%,
                    var(--button-primary-hover-gradient-end) 100%
                );
                border-color: var(--button-hover-border);
            }
        }
        @if $elevation != 0 {
            @include elevation($elevation, 0.2);
        }
    } @else {
        background: linear-gradient(
            180deg,
            var(--button-gradient-start) 0%,
            var(--button-gradient-end) 100%
        );
        @if $hover {
            &:hover {
                background: linear-gradient(
                    180deg,
                    var(--button-hover-gradient-start) 0%,
                    var(--button-hover-gradient-end) 100%
                );
                border-color: var(--button-hover-border);
            }
        }
        @if $elevation != 0 {
            @include elevation($elevation);
        }
    }
}

@mixin base(
    $primary: false,
    $border: true,
    $with-hover: true,
    $with-active: true,
    $active-class: "",
    $with-disabled: true,
    $elevation: 1
) {
    -webkit-appearance: none;
    cursor: pointer;
    @if $border {
        @if $primary {
            border: none;
        } @else {
            border: 1px solid var(--border-subtle);
        }
    } @else {
        border: none;
    }
    @include background($primary, $elevation, $hover: $with-hover);

    @if ($primary) {
        color: white;
    } @else {
        color: var(--fg);
    }

    @if ($with-active) {
        &:active {
            @include impressed-shadow(0.35);
            border-color: var(--border-subtle);
        }
        @if ($active-class != "") {
            &.#{$active-class} {
                @include impressed-shadow(0.35);
                border-color: var(--border);
            }
        }
    }

    @if ($with-disabled) {
        &[disabled],
        &[disabled]:hover {
            cursor: not-allowed;
            color: var(--fg-disabled);
            box-shadow: none !important;
            background-color: var(--button-gradient-end);
        }
    }
}

$focus-color: var(--shadow-focus);

@mixin select($with-disabled: true) {
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;

    pointer-events: all;
    cursor: pointer;

    @include base($with-disabled: $with-disabled);

    border-radius: var(--border-radius);

    &.rtl {
        direction: rtl;
    }
}