From 3dd73a0477f024f7c6ea02c44f97b0ffc71e614e Mon Sep 17 00:00:00 2001 From: TheThomaas Date: Tue, 30 Jan 2024 22:24:16 +0100 Subject: [PATCH] Refactor icons --- src/scss/components/_icons.scss | 58 ++++++++++++++++----------------- 1 file changed, 28 insertions(+), 30 deletions(-) diff --git a/src/scss/components/_icons.scss b/src/scss/components/_icons.scss index 0a2f968..9894b46 100644 --- a/src/scss/components/_icons.scss +++ b/src/scss/components/_icons.scss @@ -5,51 +5,49 @@ [class*=" icon-"], [class^="icon-"] { - vertical-align: top; -} - -[class*=" icon-"]:before, -[class*=" icon-"]:after, -[class^="icon-"]:before, -[class^="icon-"]:after { --icon-size: 1.5rem; + vertical-align: top; + + &:before, &:after { + --m-interior: .5rem; + --m-exterior: -.125rem; background-color: currentColor; display: inline-block; flex: 0 0 auto; - height: 1.5rem; - height: var(--icon-size); - width: 1.5rem; - width: var(--icon-size); + block-size: 1.5rem; + inline-size: 1.5rem; + block-size: var(--icon-size); + inline-size: var(--icon-size); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; vertical-align: calc(.375em - .75rem); vertical-align: calc((.75em - var(--icon-size))*.5); -} -[class*=" icon-"]:before, -[class^="icon-"]:before { - content: ""; + } + + &:before, + &.icon--right:after { + content: ""; + } + + &.icon--right:before { + content: none + } } -.icon--right[class*=" icon-"]:before, -.icon--right[class^="icon-"]:before { - content: none; -} .icon--left:before { - margin-left: -.125rem; - margin-right: .5rem; -} -.icon--right:after { - content: ""; - margin-left: .5rem; - margin-right: -.125rem; + margin-inline-start: var(--m-exterior); + margin-inline-end: var(--m-interior); } -.icon--sm:before, -.icon--sm:after { +.icon--right:after { + margin-inline-start: var(--m-interior); + margin-inline-end: var(--m-exterior); +} + +.icon--sm { --icon-size: 1rem; } -.icon--lg:before, -.icon--lg:after { +.icon--lg { --icon-size: 2rem; } \ No newline at end of file