jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-07-03 15:16:40 -04:00
Code Issues Activity

fix SCSS theme mixin when multiple selectors are being set

Browse Source
This commit is contained in:
Jake Jarvis
2021-08-17 10:19:15 -04:00
parent e245205265
commit ed10962814
4 changed files with 50 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
assets/sass/abstracts/_functions.scss
View File

@ -1,4 +1,5 @@
@use "sass:math";
@use "sass:list";
@use "sass:string";
@use "settings";
@ -19,6 +20,29 @@
@return linear-gradient($color-opaque-alpha, $color-opaque-alpha);
}
// https://stackoverflow.com/a/65853667/1438024
@function str-split($str, $substr: ",") {
// return immediately if this function isn't necessary
@if (string.index("#{$str}", "#{$substr}") == null) {
@return $str;
}
$list: ();
@while string.index("#{$str}", "#{$substr}") != null {
@if (string.index("#{$str}", "#{$substr}") > 1) {
$list: list.append($list, string.slice("#{$str}", 1, string.index("#{$str}", "#{$substr}") - 1));
}
$str: string.slice("#{$str}", string.index("#{$str}", "#{$substr}") + 1, string.length("#{$str}"));
}
@if (string.slice("#{$str}", 1, string.length("#{$str}")) != "") {
$list: list.append($list, string.slice("#{$str}", 1, string.length("#{$str}")));
}
@return $list;
}
// Web fonts (see components/_typography.scss)
@mixin font-face(
$family,

12
assets/sass/abstracts/_themes.scss
View File

@ -1,4 +1,7 @@
@use "sass:map";
@use "sass:string";
@use "../abstracts/functions";
// Dark & Light Themes
$themes: (
@ -165,9 +168,14 @@ $icon-wand: 'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000
// ----------------------------------------
@mixin themed($property, $key) {
// hack to allow root (body) theming
$selectors: functions.str-split("#{&}");
@each $theme, $map in $themes {
@at-root body.#{$theme} #{&} {
#{$property}: map-get($map, $key);
@each $selector in $selectors {
@at-root body.#{$theme} #{$selector} {
#{$property}: map.get($map, $key);
}
}
}
}

13
assets/sass/components/_syntax.scss
View File

@ -1,3 +1,5 @@
@use "../abstracts/themes";
// all code
code {
font-size: 0.925em;
@ -53,13 +55,18 @@ div.highlight-clipboard-enabled {
top: 0;
right: 0;
width: 5.25em;
padding: 0.75em 0.25em;
width: 5.5em;
padding: 0.6em 0.2em;
border: 1px solid;
cursor: pointer;
font-size: 0.9em;
font-size: 0.85em;
font-weight: 500;
line-height: 1;
&:hover {
@include themes.themed(color, "links");
}
}
}