journal-to-canvas-slideshow/styles/_mixins.scss

230 lines
7.3 KiB
SCSS
Raw Normal View History

2024-01-28 15:59:53 -06:00
@mixin with-absolute-pseudo($centeredX: true, $centeredY: true, $isBefore: true) {
$pseudoSelector: before;
@if ($isBefore != true) {
$pseudoSelector: after;
}
position: relative;
&:#{$pseudoSelector} {
position: absolute;
content: "";
@if ($centeredX and not $centeredY) {
left: 50%;
transform: translateX(-50%);
} @else if ($centeredY and not $centeredX) {
top: 50%;
transform: translateY(-50%);
} @else if($centeredX and $centeredY) {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
}
.blank-button {
border: none;
background: transparent;
margin: unset;
padding: unset;
}
@function returnAllHeadings($startLevel: 1, $endLevel: 6) {
$selectorList: [];
@for $var from $startLevel to $endLevel {
$headerSelector: "h#{$var}";
$selectorList: join($selectorList, $headerSelector);
}
@return $selectorList;
}
@mixin printSelectors($selectorList, $propertyMap) {
@for $i from 1 to length($selectorList) {
#{nth($selectorList, $i)} {
@each $property, $value in $propertyMap {
#{$property}: $value;
}
}
}
}
@mixin text-shadow($shadow-color: black) {
text-shadow: -1px -1px 0 $shadow-color, 0 -1px 0 $shadow-color,
1px -1px 0 $shadow-color, 1px 0 0 $shadow-color, 1px 1px 0 $shadow-color,
0 1px 0 $shadow-color, -1px 1px 0 $shadow-color, -1px 0 0 $shadow-color;
}
@mixin JTCS-accent-ghost($primary-color: var(--JTCS-accent-color), $border-side: "") {
background-color: transparent;
color: $primary-color;
border#{$border-side}: 2px solid $primary-color;
transition: background-color 120ms ease-in, color 120ms ease-in;
&:hover,
&:focus,
&.active {
transition: background-color 120ms ease-out, color 120ms ease-out;
background-color: $primary-color;
// color: var(--JTCS-text-color-on-bg);
color: var(--JTCS-text-color-on-fill);
}
}
@mixin JTCS-accent-ghost-input-span($primary-color: var(--JTCS-accent-color)) {
input:disabled + label {
opacity: 50%;
}
display: inline-flex;
&[data-variant="visible-tick"] {
input[type="radio"],
input[type="checkbox"] {
@extend .JTCS-hidden;
+ label {
background-color: transparent;
color: $primary-color;
border: 2px solid $primary-color;
transition: background-color 120ms ease-in, color 120ms ease-in;
&:hover,
&:focus {
transition: background-color 120ms ease-out, color 120ms ease-out;
background-color: $primary-color;
color: var(--JTCS-text-color-on-fill);
}
.tick-circle,
.tick-box {
border: 1px solid $primary-color;
display: inline-flex;
width: 1rem;
height: 1rem;
background-color: var(--JTCS-background-color);
}
.tick-circle {
border-radius: 50%;
}
}
&:checked {
+ label {
color: var(--JTCS-text-color-on-fill);
background-color: $primary-color;
border: 2px solid $primary-color;
outline: 1.5px solid transparent;
outline-offset: -1px;
// transition: color 200ms ease-out, background-color 200ms ease-out, border-color 200ms ease-out;
transition: outline-color 200ms ease-out, box-shadow 200ms ease-out;
&:hover {
outline-color: white;
box-shadow: 0px 0px 4px 2px $primary-color;
color: var(--JTCS-text-color-on-fill);
// color: var(--JTCS-text-color-on-bg);
}
// background-color: var(--accent-color);
.tick-circle,
.tick-box {
@include with-absolute-pseudo($isBefore: false);
&:after {
width: 0.5rem;
height: 0.5rem;
}
}
.tick-circle {
&:after {
border-radius: 50%;
background-color: $primary-color;
}
}
.tick-box {
&:after {
content: "";
color: $primary-color;
top: unset;
}
}
}
}
}
}
}
@mixin JTCS-accent-fill(
$primary-color: var(--JTCS-accent-color),
$include-shadow: false,
$hoverStyle: "scale",
$is-icon-button: false
) {
background-color: $primary-color;
@if $include-shadow {
box-shadow: 0px 0px 8px 2px $primary-color;
} @else {
box-shadow: unset;
}
color: var(--JTCS-text-color-on-fill);
border: unset;
@if $hoverStyle == "scale" {
transform: scale(1);
transition: transform 120ms ease-in-out;
transition: transform 120ms ease-in-out;
} @else if $hoverStyle == "slide-in" {
position: relative;
overflow: hidden;
i {
display: inline-flex;
align-items: center;
justify-content: center;
position: absolute;
right: 100%;
transform: translateX(0);
transition: transform 220ms ease-in;
background-color: var(--JTCS-accent-color-20);
height: 100%;
width: 30%;
}
} @else if $hoverStyle == "border" {
position: relative;
border: 2px solid transparent;
transition: border-color 150ms ease-in;
// &:after {
// position: absolute;
// content: "";
// top: 50%;
// left: 50%;
// transform: translate(-50%, -50%);
// width: 100%;
// height: 100%;
// z-index: 1;
// border-radius: 3px;
// border: 2px solid var(--JTCS-accent-color-20);
// opacity: 0;
// transition: opacity 240ms ease-in;
// }
}
&:hover,
&:focus {
@if $hoverStyle == "scale" {
transform: scale(1.12);
} @else if $hoverStyle == "slide-in" {
i {
transform: translateX(100%);
transition: transform 220ms ease-out;
}
} @else if $hoverStyle == "border" {
border: 2px solid var(--JTCS-accent-color-80);
transition: border-color 150ms ease-out;
// &:after {
// opacity: 100%;
// transition: opacity 240ms ease-out;
// }
}
}
}
@mixin generateTypes(
$list: (
"frame",
"art",
"unlinked",
"default",
),
$propertyPrefix: ""
) {
@each $var in $list {
.#{$var}-color {
#{$propertyPrefix}color: var(--data-#{$var}-color);
}
}
}