initial commit

Signed-off-by: Mitch Hijlkema <mitch@hijlkema.codes>

libs/accordion/src/lib/styles/header.styles.ts

@@ -0,0 +1,142 @@
+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;
+  }
+`;