143 lines
3.2 KiB
TypeScript
143 lines
3.2 KiB
TypeScript
import { VariableHelper } from '@hijlkema-codes/internal/z-styles';
|
|
import { css } from 'lit';
|
|
|
|
const iconColor = new VariableHelper()
|
|
.withGroupModifier('accordion', 'icon')
|
|
.withVariableName('color')
|
|
.withDefaultValue('currentColor')
|
|
.toCss();
|
|
|
|
export const headerStyles = css`
|
|
header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
cursor: pointer;
|
|
padding-inline: var(--_padding-inline);
|
|
border-width: var(--_header--border-width);
|
|
border-style: solid;
|
|
border-color: var(--_header--border-color);
|
|
}
|
|
`;
|
|
|
|
export const chevronStyles = css`
|
|
.o-icon__chevron-down {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
display: block;
|
|
position: relative;
|
|
}
|
|
|
|
.o-icon__chevron-down::before,
|
|
.o-icon__chevron-down::after {
|
|
content: '';
|
|
background-color: ${iconColor};
|
|
position: absolute;
|
|
top: 50%;
|
|
height: 1px;
|
|
width: 50%;
|
|
border: 1px solid ${iconColor};
|
|
transition: transform 0.3s ease-out;
|
|
}
|
|
|
|
.o-icon__chevron-down::before {
|
|
transform: translateY(-50%)
|
|
rotate(calc(var(--_rotation-displacement, 1) * 45deg));
|
|
left: 0;
|
|
}
|
|
|
|
.o-icon__chevron-down::after {
|
|
transform: translateY(-50%)
|
|
rotate(calc(var(--_rotation-displacement, 1) * -45deg));
|
|
right: 0;
|
|
}
|
|
|
|
:host([open]) .o-icon__chevron-down {
|
|
--_rotation-displacement: -1;
|
|
}
|
|
|
|
:host([open]) .o-icon__chevron-down::before,
|
|
:host([open]) .o-icon__chevron-down::after {
|
|
transition-timing-function: ease-in;
|
|
}
|
|
`;
|
|
|
|
export const plustoMinusStyles = css`
|
|
.o-icon__plus-to-minus {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
display: block;
|
|
position: relative;
|
|
}
|
|
|
|
.o-icon__plus-to-minus::before,
|
|
.o-icon__plus-to-minus::after {
|
|
content: '';
|
|
background-color: ${iconColor};
|
|
position: absolute;
|
|
top: 50%;
|
|
height: 1px;
|
|
width: 100%;
|
|
border: 1px solid ${iconColor};
|
|
transition: transform 0.3s ease-out;
|
|
}
|
|
|
|
.o-icon__plus-to-minus::before {
|
|
transform: translateY(-50%)
|
|
rotate(calc(var(--_rotation-displacement, 1) * 90deg));
|
|
}
|
|
|
|
.o-icon__plus-to-minus::after {
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
:host([open]) .o-icon__plus-to-minus {
|
|
--_rotation-displacement: 2;
|
|
}
|
|
|
|
:host([open]) .o-icon__plus-to-minus::before,
|
|
:host([open]) .o-icon__plus-to-minus::after {
|
|
transition-timing-function: ease-in;
|
|
}
|
|
`;
|
|
|
|
export const plusToCrossStyles = css`
|
|
.o-icon__plus-to-cross {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
display: block;
|
|
position: relative;
|
|
}
|
|
|
|
.o-icon__plus-to-cross::before,
|
|
.o-icon__plus-to-cross::after {
|
|
content: '';
|
|
background-color: ${iconColor};
|
|
position: absolute;
|
|
top: 50%;
|
|
height: 1px;
|
|
width: 100%;
|
|
border: 1px solid ${iconColor};
|
|
transition: transform 0.3s ease-out;
|
|
}
|
|
|
|
.o-icon__plus-to-cross::before {
|
|
transform: translateY(-50%)
|
|
rotate(calc(var(--_rotation-displacement, 2) * 135deg));
|
|
}
|
|
|
|
.o-icon__plus-to-cross::after {
|
|
transform: translateY(-50%)
|
|
rotate(calc(var(--_rotation-displacement, 0) * 45deg));
|
|
}
|
|
|
|
:host([open]) .o-icon__plus-to-cross {
|
|
--_rotation-displacement: 1;
|
|
}
|
|
|
|
:host([open]) .o-icon__plus-to-cross::before,
|
|
:host([open]) .o-icon__plus-to-cross::after {
|
|
transition-timing-function: ease-in;
|
|
}
|
|
`;
|