65 lines
1.3 KiB
SCSS
65 lines
1.3 KiB
SCSS
@mixin sizes() {
|
|
--lep-indicator-height: 3px;
|
|
--lep-outline-size: 2px;
|
|
--lep-num-columns: 8;
|
|
--lep-emoji-size: 1.375rem;
|
|
--lep-emoji-padding: 0.5rem;
|
|
}
|
|
|
|
@mixin colors($dark) {
|
|
$border: #e0e0e0;
|
|
$bg: #fff;
|
|
$placeholder: #999;
|
|
$outline: #999;
|
|
$input-border: #999;
|
|
$indicator: #385ac1;
|
|
$input-color: #111;
|
|
|
|
@if $dark {
|
|
$border: #444;
|
|
$bg: #222;
|
|
$placeholder: #ccc;
|
|
$outline: #fff;
|
|
$input-border: #ccc;
|
|
$indicator: #5373ec;
|
|
$input-color: #efefef;
|
|
}
|
|
|
|
--lep-border-color: #{$border};
|
|
--lep-input-border-color: #{$input-border};
|
|
--lep-background-color: #{$bg};
|
|
--lep-placeholder-color: #{$placeholder};
|
|
--lep-outline-color: #{$outline};
|
|
--lep-indicator-color: #{$indicator};
|
|
--lep-input-font-color: #{$input-color};
|
|
|
|
@if $dark {
|
|
--lep-hover-background-color: #{lighten($bg, 15%)};
|
|
--lep-active-background-color: #{lighten($bg, 20%)};
|
|
}
|
|
|
|
@else {
|
|
--lep-hover-background-color: #{darken($bg, 15%)};
|
|
--lep-active-background-color: #{darken($bg, 10%)};
|
|
}
|
|
}
|
|
|
|
:host {
|
|
@include sizes();
|
|
}
|
|
|
|
:host,
|
|
:host-context(lite-emoji-picker.light) {
|
|
@include colors(false);
|
|
}
|
|
|
|
:host-context(lite-emoji-picker.dark) {
|
|
@include colors(true);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:host {
|
|
@include colors(true);
|
|
}
|
|
}
|