66 lines
1.5 KiB
SCSS
66 lines
1.5 KiB
SCSS
@use 'sass:list';
|
|
@use 'sass:map';
|
|
|
|
@function get-selector($title, $match) {
|
|
@if $match == 'equals' {
|
|
@return '[data-title="#{$title}"]';
|
|
} @else if $match == 'startsWith' {
|
|
@return '[data-title^="#{$title}"]';
|
|
} @else if $match == 'endsWith' {
|
|
@return '[data-title$="#{$title}"]';
|
|
} @else if $match == 'contains' {
|
|
@return '[data-title*="#{$title}"]';
|
|
} @else {
|
|
@warn "code-title-icon: Unknown match type '#{$match}' for title '#{$title}'.";
|
|
@return '';
|
|
}
|
|
}
|
|
|
|
/**
|
|
* each config shall be a map containing:
|
|
*
|
|
* - title: the title to match
|
|
* - match: one of 'startsWith' 'endsWith' 'contains' 'equals'
|
|
* - icon: the icon url
|
|
*/
|
|
@mixin style($configs...) {
|
|
$selectors: ();
|
|
|
|
@each $config in $configs {
|
|
$title: map.get($config, 'title');
|
|
$match: map.get($config, 'match');
|
|
$icon: map.get($config, 'icon');
|
|
$selector: get-selector($title, $match);
|
|
|
|
@if $selector != '' {
|
|
$selectors: list.append($selectors, '&#{$selector}', comma);
|
|
|
|
.code-block-title-bar#{$selector}::before {
|
|
background-image: url('#{$icon}');
|
|
}
|
|
}
|
|
}
|
|
|
|
/* stylelint-disable-next-line order/order */
|
|
.code-block-title-bar {
|
|
#{$selectors} {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
&::before {
|
|
content: ' ';
|
|
|
|
display: inline-block;
|
|
|
|
width: 1.5em;
|
|
height: 1.5em;
|
|
margin-inline-end: 0.5em;
|
|
|
|
background-position: center;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
}
|
|
}
|
|
}
|
|
}
|