160 lines
3.4 KiB
SCSS
160 lines
3.4 KiB
SCSS
@mixin clickable($clr, $bg-clr, $hover-clr: default, $hover-bg-clr: default, $active-clr: default, $active-bg-clr: default, $focus-clr: default, $focus-bg-clr: default, $theme: default, $ignore-path: default) {
|
|
|
|
@if $theme == default {
|
|
@if $bg-clr == null and $hover-bg-clr == null {
|
|
@if $hover-clr == default {
|
|
$theme: get-color-theme($clr);
|
|
} @else {
|
|
$theme: get-color-theme($hover-clr);
|
|
}
|
|
} @else {
|
|
@if $hover-bg-clr == default {
|
|
$theme: get-color-theme($bg-clr);
|
|
} @else {
|
|
$theme: get-color-theme($hover-bg-clr);
|
|
}
|
|
}
|
|
}
|
|
|
|
@if $ignore-path == default {
|
|
$ignore-path: false;
|
|
} @else {
|
|
$ignore-path: true;
|
|
}
|
|
|
|
@include transition(map-get($clickable, transition));
|
|
@if $ignore-path == false {
|
|
svg {
|
|
path {
|
|
@include transition(map-get($clickable, transition));
|
|
}
|
|
}
|
|
}
|
|
|
|
// hover
|
|
@if $hover-clr == default {
|
|
@if $hover-bg-clr == null {
|
|
@if $theme == "light" {
|
|
$hover-clr: darken($clr, 14%);
|
|
}
|
|
@if $theme == "dark" {
|
|
$hover-clr: lighten($clr, 18%);
|
|
}
|
|
} @else if $hover-bg-clr == default {
|
|
$hover-clr: $clr;
|
|
}
|
|
}
|
|
|
|
@if $hover-bg-clr == default {
|
|
@if $theme == "light" {
|
|
$hover-bg-clr: darken($bg-clr, 14%);
|
|
}
|
|
@if $theme == "dark" {
|
|
$hover-bg-clr: lighten($bg-clr, 18%);
|
|
}
|
|
}
|
|
|
|
// active
|
|
@if $active-clr == default {
|
|
@if $active-bg-clr == null {
|
|
@if $theme == "light" {
|
|
$active-clr: darken($hover-clr, 15%);
|
|
}
|
|
@if $theme == "dark" {
|
|
$active-clr: lighten($hover-clr, 16%);
|
|
}
|
|
} @else if $active-bg-clr == default {
|
|
$active-clr: $hover-clr;
|
|
}
|
|
}
|
|
|
|
@if $active-bg-clr == default {
|
|
@if $theme == "light" {
|
|
$active-bg-clr: darken($hover-bg-clr, 15%);
|
|
}
|
|
@if $theme == "dark" {
|
|
$active-bg-clr: lighten($hover-bg-clr, 16%);
|
|
}
|
|
}
|
|
|
|
// focus
|
|
@if $focus-clr == default {
|
|
@if $focus-bg-clr == null {
|
|
$focus-clr: $hover-clr;
|
|
} @else if $hover-bg-clr == default {
|
|
$focus-clr: $hover-clr;
|
|
}
|
|
}
|
|
|
|
@if $focus-bg-clr == default {
|
|
$focus-bg-clr: $hover-bg-clr;
|
|
}
|
|
|
|
@include plain() {
|
|
color: $clr;
|
|
@if $bg-clr {
|
|
background-color: $bg-clr;
|
|
}
|
|
@if $ignore-path == false {
|
|
svg path {
|
|
fill: $clr;
|
|
}
|
|
}
|
|
}
|
|
@include hover() {
|
|
color: $hover-clr;
|
|
@if $hover-bg-clr {
|
|
background-color: $hover-bg-clr;
|
|
}
|
|
@if $ignore-path == false {
|
|
svg path {
|
|
fill: $hover-clr;
|
|
}
|
|
}
|
|
}
|
|
@include active() {
|
|
color: $active-clr;
|
|
@if $active-bg-clr {
|
|
background-color: $active-bg-clr;
|
|
}
|
|
@if $ignore-path == false {
|
|
svg path {
|
|
fill: $active-clr;
|
|
}
|
|
}
|
|
}
|
|
@include focus() {
|
|
color: $focus-clr;
|
|
@if $focus-bg-clr{
|
|
background-color: $focus-bg-clr;
|
|
box-shadow: 0 0 0 2px rgba($focus-bg-clr, .4);
|
|
}
|
|
@if $ignore-path == false {
|
|
svg path {
|
|
fill: $focus-clr;
|
|
}
|
|
}
|
|
}
|
|
@include disabled() {
|
|
@if $theme == "light" {
|
|
color: rgba($clr, .2) !important;
|
|
}
|
|
@if $theme == "dark" {
|
|
color: rgba($clr, .4) !important;
|
|
}
|
|
@if $bg-clr {
|
|
background-color: $bg-clr !important;
|
|
}
|
|
@if $ignore-path == false {
|
|
svg path {
|
|
@if $theme == "light" {
|
|
fill: rgba($clr, .2) !important;
|
|
}
|
|
@if $theme == "dark" {
|
|
fill: rgba($clr, .4) !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|