Skip to content

Commit

Permalink
pfe-2018 Changed to readdressing togglebox custom properties
Browse files Browse the repository at this point in the history
  • Loading branch information
PriJoh committed Dec 16, 2024
1 parent 4bd1488 commit 3ed0b9e
Showing 1 changed file with 35 additions and 34 deletions.
69 changes: 35 additions & 34 deletions src/less/components/payex/togglebox.less
Original file line number Diff line number Diff line change
@@ -1,40 +1,41 @@
@import "../togglebox.less";

/* For theme-white */
.togglebox:has(input.theme-white) input[type="checkbox"]:not(:disabled) + label:after {
background-color: var(--brand-secondary);
}

.togglebox:has(input.theme-white) input[type="checkbox"]:not(:disabled) + label:before {
background-color: var(--white);
}

.togglebox:has(input.theme-white) input[type="checkbox"]:not(:disabled):checked + label:before {
background-color: var(--brand-success);
}

.togglebox:has(input.theme-white) input[type="checkbox"]:not(:disabled):checked + label:after {
background-color: var(--white);
}

/* Theme-white background */
.togglebox {

&:has(input.theme-grey) {
--unchecked-thumb-color: var(--brand-secondary);
--unchecked-track-color: var(--white);
--checked-thumb-color: var(--brand-success);
--checked-track-color: var(--white);
}

&:has(input.theme-white) {
--unchecked-thumb-color: var(--white);
--unchecked-track-color: var(--brand-secondary);
--checked-thumb-color: var(--brand-success);
--checked-track-color: var(--white);
}

input[type="checkbox"]:not(:disabled) + label:after {
background-color: var(--unchecked-track-color);
}

input[type="checkbox"]:not(:disabled) + label:before {
background-color: var(--unchecked-thumb-color);
}

input[type="checkbox"]:not(:disabled):checked + label:before {
background-color: var(--checked-thumb-color);
}

input[type="checkbox"]:not(:disabled):checked + label:after {
background-color: var(--checked-track-color);
}
}

/* Background for theme-white */
.documentation .showcase-panel.showcase-panel-advanced .component-preview .component-preview-content:has(input[type="checkbox"].theme-white) {
background-color: var(--bg-togglebox-theme-white) !important;
}

/* For theme-grey */
.togglebox:has(input.theme-grey) input[type="checkbox"]:not(:disabled):checked + label:after {
background-color: var(--white);
}

.togglebox:has(input.theme-grey) input[type="checkbox"]:not(:disabled) + label:after {
background-color: var(--white);
}

.togglebox:has(input.theme-grey) input[type="checkbox"]:not(:disabled):checked + label:before {
background-color: var(--brand-success);
}

.togglebox:has(input.theme-grey) input[type="checkbox"]:not(:disabled) + label:before {
background-color: var(--brand-secondary);
}

0 comments on commit 3ed0b9e

Please sign in to comment.