/* 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"; @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; @mixin impressed-shadow($intensity) { box-shadow: inset 0 calc(var(--buttons-size) / 15) calc(var(--buttons-size) / 5) rgba(black, $intensity); } @mixin btn-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 base( $selector: button, $with-primary: false, $with-hover: true, $with-active: true, $with-disabled: true ) { #{$selector} { -webkit-appearance: none; border: 1px solid var(--button-border); color: var(--fg); background: linear-gradient( 180deg, var(--button-gradient-start) 0%, var(--button-gradient-end) 100% ); @if ($with-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 ($with-primary) { &.btn-primary { color: white; background: linear-gradient( 180deg, var(--button-primary-gradient-start) 0%, var(--button-primary-gradient-end) 100% ); &:hover { background: linear-gradient( 180deg, var(--button-primary-hover-gradient-start) 0%, var(--button-primary-hover-gradient-end) 100% ); } } } @if ($with-active) { &:active { @include impressed-shadow(0.35); box-shadow: none; border-color: var(--button-border); } } @if ($with-disabled) { &[disabled] { color: var(--fg-disabled); background-color: var(--button-gradient-end) !important; box-shadow: none !important; border-color: var(--button-gradient-end) !important; } } } } $focus-color: vars.color(shadow-focus); @function down-arrow($color) { @return url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='transparent' stroke='#{$color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); }