From c10992c002979769c8eb030de97823a2a1f9aecf Mon Sep 17 00:00:00 2001 From: Naomi Calabretta Date: Wed, 31 Jul 2024 17:11:46 +0200 Subject: [PATCH] move md3 overrides to its own css file --- src/lib/theme/components.css | 102 +++++++++++++++++++++++++++++++++++ src/lib/theme/style.css | 2 + src/styles/override.css | 102 ----------------------------------- 3 files changed, 104 insertions(+), 102 deletions(-) create mode 100644 src/lib/theme/components.css diff --git a/src/lib/theme/components.css b/src/lib/theme/components.css new file mode 100644 index 0000000..8375cd1 --- /dev/null +++ b/src/lib/theme/components.css @@ -0,0 +1,102 @@ +/* Headerbar */ +.md3 ion-header.md { + box-shadow: unset; + -webkit-box-shadow: unset; +} + +/* FAB */ +.md3 ion-fab-button.md { + --border-radius: 16px; +} + +/* Segment Buttons */ +.md3 ion-segment.md.segment-alt ion-segment-button.md::part(native) { + border: 1px solid var(--color); + text-transform: none; + letter-spacing: normal; + font-size: unset; +} + +.md3 ion-segment.md.segment-alt ion-segment-button.md.segment-button-checked::part(native) { + background-color: rgba(var(--ion-color-primary-rgb), 0.2); + color: var(--ion-text-color); +} + +.md3 ion-segment.md.segment-alt ion-segment-button.md:first-child::part(native) { + border-right: 0; + border-radius: 48px 0 0 48px; +} + +.md3 ion-segment.md.segment-alt ion-segment-button.md:last-child::part(native) { + border-left: 0; + border-radius: 0 48px 48px 0; +} + +.md3 ion-segment.md.segment-alt ion-segment-button.md::part(indicator-background) { + height: 0px; +} + + +/* Toggles */ +.md3 ion-toggle.md::part(track) { + background-color: var(--ion-toolbar-background); + width: 56px; + height: 32px; + border-radius: 100px; +} + +.md3 ion-toggle.md::part(track) { + border: 2px solid var(--ion-text-color-step-400); +} + +.md3 ion-toggle.md::part(handle) { + background-color: var(--ion-text-color-step-400); + width: 18px; + height: 18px; + box-shadow: unset; + --handle-spacing: 8px; +} + +.md3 ion-toggle.toggle-checked.md::part(track) { + background-color: var(--ion-color-primary); + border: 2px solid var(--ion-color-primary); +} + +.md3 ion-toggle.toggle-checked.md::part(handle) { + background-color: var(--ion-toolbar-background); + width: 24px; + height: 24px; +} + + +/* Ranges / Sliders */ +.md3 ion-range.md { + --bar-height: 24px; + --bar-border-radius: 24px; + --knob-background: var(--ion-color-primary); + --knob-size: 64px; + --knob-border-radius: 64px; +} + +.md3 ion-range.md::part(knob) { + width: 6px; + outline: 12px solid var(--ion-background-color); + transform: translateX(29px); +} + +.md3 ion-range.md:active::part(knob) { + transform: translateX(29px) scale(0.75, 1); +} + +.md3 ion-range.md::part(knob)::before { + display: none; +} + +.md3 ion-range.md::part(tick) { + border-radius: 100%; + transform: scale(0.5); +} + +.md3 ion-range.md::part(tick-active) { + display: none; +} \ No newline at end of file diff --git a/src/lib/theme/style.css b/src/lib/theme/style.css index d6f06c2..d3b6545 100644 --- a/src/lib/theme/style.css +++ b/src/lib/theme/style.css @@ -1,3 +1,5 @@ +@import url(components.css); + /* Light */ .md3 * { --ion-color-primary: rgb(var(--md3-light-primary)); diff --git a/src/styles/override.css b/src/styles/override.css index a1829cf..4512e85 100644 --- a/src/styles/override.css +++ b/src/styles/override.css @@ -33,109 +33,7 @@ p { text-wrap: wrap; } -.md3 ion-header.md{ - box-shadow: unset; - -webkit-box-shadow: unset; -} - .logo { width: 256px; height: 256px; -} - - -.md3 ion-fab-button { - --border-radius: 16px; -} - -/* Segment Buttons */ -.md3 ion-segment.segment-alt ion-segment-button.md::part(native) { - border: 1px solid var(--color); - text-transform: none; - letter-spacing: normal; - font-size: unset; -} - -.md3 ion-segment.segment-alt ion-segment-button.md.segment-button-checked::part(native) { - background-color: rgba(var(--ion-color-primary-rgb), 0.2); - color: var(--ion-text-color); -} - -.md3 ion-segment.segment-alt ion-segment-button.md:first-child::part(native) { - border-right: 0; - border-radius: 48px 0 0 48px; -} - -.md3 ion-segment.segment-alt ion-segment-button.md:last-child::part(native) { - border-left: 0; - border-radius: 0 48px 48px 0; -} - -.md3 ion-segment.segment-alt ion-segment-button.md::part(indicator-background) { - height: 0px; -} - - - /* Toggles */ -.md3 ion-toggle.md::part(track) { - background-color: var(--ion-toolbar-background); - width: 56px; - height: 32px; - border-radius: 100px; -} - -.md3 ion-toggle.md::part(track) { - border: 2px solid var(--ion-text-color-step-400); -} - -.md3 ion-toggle.md::part(handle) { - background-color: var(--ion-text-color-step-400); - width: 18px; - height: 18px; - box-shadow: unset; - --handle-spacing: 8px; -} - -.md3 ion-toggle.toggle-checked.md::part(track) { - background-color: var(--ion-color-primary); - border: 2px solid var(--ion-color-primary); -} - -.md3 ion-toggle.toggle-checked.md::part(handle) { - background-color: var(--ion-toolbar-background); - width: 24px; - height: 24px; -} - - -/* Ranges / Sliders */ -.md3 ion-range { - --bar-height: 24px; - --bar-border-radius: 24px; - --knob-background: var(--ion-color-primary); - --knob-size: 64px; - --knob-border-radius: 64px; -} - -.md3 ion-range::part(knob) { - width: 6px; - outline: 12px solid var(--ion-background-color); - transform: translateX(29px); -} - -.md3 ion-range:active::part(knob) { - transform: translateX(29px) scale(0.75,1); -} - -.md3 ion-range::part(knob)::before { - display: none; -} - -.md3 ion-range::part(tick) { - border-radius: 100%; - transform: scale(0.5); -} - -.md3 ion-range::part(tick-active) { - display: none; } \ No newline at end of file