diff options
| author | ivarlovlie <git@ivarlovlie.no> | 2022-06-01 22:10:32 +0200 |
|---|---|---|
| committer | ivarlovlie <git@ivarlovlie.no> | 2022-06-01 22:10:32 +0200 |
| commit | a640703f2da8815dc26ad1600a6f206be1624379 (patch) | |
| tree | dbda195fb5783d16487e557e06471cf848b75427 /apps/web-shared/src/styles/base/_icons.scss | |
| download | greatoffice-a640703f2da8815dc26ad1600a6f206be1624379.tar.xz greatoffice-a640703f2da8815dc26ad1600a6f206be1624379.zip | |
feat: Initial after clean slate
Diffstat (limited to 'apps/web-shared/src/styles/base/_icons.scss')
| -rw-r--r-- | apps/web-shared/src/styles/base/_icons.scss | 62 |
1 files changed, 62 insertions, 0 deletions
diff --git a/apps/web-shared/src/styles/base/_icons.scss b/apps/web-shared/src/styles/base/_icons.scss new file mode 100644 index 0000000..1674a7c --- /dev/null +++ b/apps/web-shared/src/styles/base/_icons.scss @@ -0,0 +1,62 @@ +// don't modify this file -> edit 📁 custom-style/_icons.scss to set your custom icons style + +:root { + // default icon sizes + --icon-xxxs: 8px; + --icon-xxs: 12px; + --icon-xs: 16px; + --icon-sm: 24px; + --icon-md: 32px; + --icon-lg: 48px; + --icon-xl: 64px; + --icon-xxl: 96px; + --icon-xxxl: 128px; +} + +.icon { + --size: 1em; + height: var(--size); + width: var(--size); + display: inline-block; + color: inherit; + fill: currentColor; + line-height: 1; + flex-shrink: 0; + max-width: initial; +} + +// icon size +.icon--xxxs { --size: var(--icon-xxxs); } +.icon--xxs { --size: var(--icon-xxs); } +.icon--xs { --size: var(--icon-xs); } +.icon--sm { --size: var(--icon-sm); } +.icon--md { --size: var(--icon-md); } +.icon--lg { --size: var(--icon-lg); } +.icon--xl { --size: var(--icon-xl); } +.icon--xxl { --size: var(--icon-xxl); } +.icon--xxxl { --size: var(--icon-xxxl); } + +.icon--is-spinning { // rotate the icon infinitely + animation: icon-spin 1s infinite linear; +} + +@keyframes icon-spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +// -------------------------------- + +// SVG <symbol> + +// -------------------------------- + +// enable icon color corrections +.icon use { + color: inherit; + fill: currentColor; +}
\ No newline at end of file |