From 2b1ddc0715f1e70f585b7e305f3271281dcf73dc Mon Sep 17 00:00:00 2001 From: theo Date: Wed, 1 May 2024 22:21:51 +0200 Subject: [PATCH] chore: remove bulma and switch to css --- styles/bootstrap-icons.scss | 2090 ----------------- styles/bulma/_index.scss | 4 - styles/bulma/sass/_index.scss | 10 - styles/bulma/sass/base/_index.scss | 6 - styles/bulma/sass/base/animations.scss | 15 - styles/bulma/sass/base/generic.scss | 239 -- styles/bulma/sass/base/minireset.scss | 92 - styles/bulma/sass/base/skeleton.scss | 126 - styles/bulma/sass/components/_index.scss | 13 - styles/bulma/sass/components/breadcrumb.scss | 139 -- styles/bulma/sass/components/card.scss | 162 -- styles/bulma/sass/components/dropdown.scss | 188 -- styles/bulma/sass/components/menu.scss | 165 -- styles/bulma/sass/components/message.scss | 183 -- styles/bulma/sass/components/modal.scss | 164 -- styles/bulma/sass/components/navbar.scss | 788 ------- styles/bulma/sass/components/pagination.scss | 379 --- styles/bulma/sass/components/panel.scss | 218 -- styles/bulma/sass/components/tabs.scss | 273 --- styles/bulma/sass/elements/_index.scss | 16 - styles/bulma/sass/elements/block.scss | 6 - styles/bulma/sass/elements/box.scss | 59 - styles/bulma/sass/elements/button.scss | 640 ----- styles/bulma/sass/elements/content.scss | 283 --- styles/bulma/sass/elements/delete.scss | 6 - styles/bulma/sass/elements/icon.scss | 67 - styles/bulma/sass/elements/image.scss | 62 - styles/bulma/sass/elements/loader.scss | 15 - styles/bulma/sass/elements/notification.scss | 105 - styles/bulma/sass/elements/progress.scss | 115 - styles/bulma/sass/elements/table.scss | 261 -- styles/bulma/sass/elements/tag.scss | 219 -- styles/bulma/sass/elements/title.scss | 128 - styles/bulma/sass/form/_index.scss | 9 - styles/bulma/sass/form/checkbox-radio.scss | 32 - styles/bulma/sass/form/file.scss | 330 --- styles/bulma/sass/form/input-textarea.scss | 123 - styles/bulma/sass/form/select.scss | 143 -- styles/bulma/sass/form/shared.scss | 172 -- styles/bulma/sass/form/tools.scss | 341 --- styles/bulma/sass/grid/_index.scss | 5 - styles/bulma/sass/grid/columns-v2.scss | 957 -------- styles/bulma/sass/grid/columns.scss | 877 ------- styles/bulma/sass/grid/grid.scss | 209 -- styles/bulma/sass/helpers/_index.scss | 15 - styles/bulma/sass/helpers/aspect-ratio.scss | 10 - styles/bulma/sass/helpers/border.scss | 15 - styles/bulma/sass/helpers/color.scss | 364 --- styles/bulma/sass/helpers/flexbox.scss | 62 - styles/bulma/sass/helpers/float.scss | 28 - styles/bulma/sass/helpers/gap.scss | 24 - styles/bulma/sass/helpers/other.scss | 19 - styles/bulma/sass/helpers/overflow.scss | 21 - styles/bulma/sass/helpers/position.scss | 19 - styles/bulma/sass/helpers/spacing.scss | 64 - styles/bulma/sass/helpers/typography.scss | 168 -- styles/bulma/sass/helpers/visibility.scss | 221 -- styles/bulma/sass/layout/_index.scss | 9 - styles/bulma/sass/layout/container.scss | 51 - styles/bulma/sass/layout/footer.scss | 23 - styles/bulma/sass/layout/hero.scss | 270 --- styles/bulma/sass/layout/level.scss | 107 - styles/bulma/sass/layout/media.scss | 106 - styles/bulma/sass/layout/section.scss | 34 - styles/bulma/sass/themes/_index.scss | 35 - styles/bulma/sass/themes/dark.scss | 56 - styles/bulma/sass/themes/light.scss | 145 -- styles/bulma/sass/themes/setup.scss | 174 -- styles/bulma/sass/utilities/_index.scss | 7 - styles/bulma/sass/utilities/controls.scss | 85 - .../bulma/sass/utilities/css-variables.scss | 425 ---- .../sass/utilities/derived-variables.scss | 112 - styles/bulma/sass/utilities/extends.scss | 34 - styles/bulma/sass/utilities/functions.scss | 258 -- .../sass/utilities/initial-variables.scss | 155 -- styles/bulma/sass/utilities/mixins.scss | 460 ---- styles/global.scss | 13 - 77 files changed, 14023 deletions(-) delete mode 100644 styles/bootstrap-icons.scss delete mode 100644 styles/bulma/_index.scss delete mode 100644 styles/bulma/sass/_index.scss delete mode 100644 styles/bulma/sass/base/_index.scss delete mode 100644 styles/bulma/sass/base/animations.scss delete mode 100644 styles/bulma/sass/base/generic.scss delete mode 100644 styles/bulma/sass/base/minireset.scss delete mode 100644 styles/bulma/sass/base/skeleton.scss delete mode 100644 styles/bulma/sass/components/_index.scss delete mode 100644 styles/bulma/sass/components/breadcrumb.scss delete mode 100644 styles/bulma/sass/components/card.scss delete mode 100644 styles/bulma/sass/components/dropdown.scss delete mode 100644 styles/bulma/sass/components/menu.scss delete mode 100644 styles/bulma/sass/components/message.scss delete mode 100644 styles/bulma/sass/components/modal.scss delete mode 100644 styles/bulma/sass/components/navbar.scss delete mode 100644 styles/bulma/sass/components/pagination.scss delete mode 100644 styles/bulma/sass/components/panel.scss delete mode 100644 styles/bulma/sass/components/tabs.scss delete mode 100644 styles/bulma/sass/elements/_index.scss delete mode 100644 styles/bulma/sass/elements/block.scss delete mode 100644 styles/bulma/sass/elements/box.scss delete mode 100644 styles/bulma/sass/elements/button.scss delete mode 100644 styles/bulma/sass/elements/content.scss delete mode 100644 styles/bulma/sass/elements/delete.scss delete mode 100644 styles/bulma/sass/elements/icon.scss delete mode 100644 styles/bulma/sass/elements/image.scss delete mode 100644 styles/bulma/sass/elements/loader.scss delete mode 100644 styles/bulma/sass/elements/notification.scss delete mode 100644 styles/bulma/sass/elements/progress.scss delete mode 100644 styles/bulma/sass/elements/table.scss delete mode 100644 styles/bulma/sass/elements/tag.scss delete mode 100644 styles/bulma/sass/elements/title.scss delete mode 100644 styles/bulma/sass/form/_index.scss delete mode 100644 styles/bulma/sass/form/checkbox-radio.scss delete mode 100644 styles/bulma/sass/form/file.scss delete mode 100644 styles/bulma/sass/form/input-textarea.scss delete mode 100644 styles/bulma/sass/form/select.scss delete mode 100644 styles/bulma/sass/form/shared.scss delete mode 100644 styles/bulma/sass/form/tools.scss delete mode 100644 styles/bulma/sass/grid/_index.scss delete mode 100644 styles/bulma/sass/grid/columns-v2.scss delete mode 100644 styles/bulma/sass/grid/columns.scss delete mode 100644 styles/bulma/sass/grid/grid.scss delete mode 100644 styles/bulma/sass/helpers/_index.scss delete mode 100644 styles/bulma/sass/helpers/aspect-ratio.scss delete mode 100644 styles/bulma/sass/helpers/border.scss delete mode 100644 styles/bulma/sass/helpers/color.scss delete mode 100644 styles/bulma/sass/helpers/flexbox.scss delete mode 100644 styles/bulma/sass/helpers/float.scss delete mode 100644 styles/bulma/sass/helpers/gap.scss delete mode 100644 styles/bulma/sass/helpers/other.scss delete mode 100644 styles/bulma/sass/helpers/overflow.scss delete mode 100644 styles/bulma/sass/helpers/position.scss delete mode 100644 styles/bulma/sass/helpers/spacing.scss delete mode 100644 styles/bulma/sass/helpers/typography.scss delete mode 100644 styles/bulma/sass/helpers/visibility.scss delete mode 100644 styles/bulma/sass/layout/_index.scss delete mode 100644 styles/bulma/sass/layout/container.scss delete mode 100644 styles/bulma/sass/layout/footer.scss delete mode 100644 styles/bulma/sass/layout/hero.scss delete mode 100644 styles/bulma/sass/layout/level.scss delete mode 100644 styles/bulma/sass/layout/media.scss delete mode 100644 styles/bulma/sass/layout/section.scss delete mode 100644 styles/bulma/sass/themes/_index.scss delete mode 100644 styles/bulma/sass/themes/dark.scss delete mode 100644 styles/bulma/sass/themes/light.scss delete mode 100644 styles/bulma/sass/themes/setup.scss delete mode 100644 styles/bulma/sass/utilities/_index.scss delete mode 100644 styles/bulma/sass/utilities/controls.scss delete mode 100644 styles/bulma/sass/utilities/css-variables.scss delete mode 100644 styles/bulma/sass/utilities/derived-variables.scss delete mode 100644 styles/bulma/sass/utilities/extends.scss delete mode 100644 styles/bulma/sass/utilities/functions.scss delete mode 100644 styles/bulma/sass/utilities/initial-variables.scss delete mode 100644 styles/bulma/sass/utilities/mixins.scss delete mode 100644 styles/global.scss diff --git a/styles/bootstrap-icons.scss b/styles/bootstrap-icons.scss deleted file mode 100644 index 9fafa26..0000000 --- a/styles/bootstrap-icons.scss +++ /dev/null @@ -1,2090 +0,0 @@ -/*! - * Bootstrap Icons v1.11.3 (https://icons.getbootstrap.com/) - * Copyright 2019-2024 The Bootstrap Authors - * Licensed under MIT (https://github.com/twbs/icons/blob/main/LICENSE) - */ - -$bootstrap-icons-font: "bootstrap-icons" !default; -$bootstrap-icons-font-dir: "/public/fonts" !default; -$bootstrap-icons-font-file: "#{$bootstrap-icons-font-dir}/#{$bootstrap-icons-font}" !default; -$bootstrap-icons-font-hash: "24e3eb84d0bcaf83d77f904c78ac1f47" !default; -$bootstrap-icons-font-src: url("#{$bootstrap-icons-font-file}.woff2?#{$bootstrap-icons-font-hash}") format("woff2"), - url("#{$bootstrap-icons-font-file}.woff?#{$bootstrap-icons-font-hash}") format("woff") !default; - -@font-face { - font-display: block; - font-family: $bootstrap-icons-font; - src: $bootstrap-icons-font-src; -} - -.bi::before, -[class^="bi-"]::before, -[class*=" bi-"]::before { - display: inline-block; - font-family: $bootstrap-icons-font !important; - font-style: normal; - font-weight: normal !important; - font-variant: normal; - text-transform: none; - line-height: 1; - vertical-align: -.125em; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -$bootstrap-icons-map: ( - "123": "\f67f", - "alarm-fill": "\f101", - "alarm": "\f102", - "align-bottom": "\f103", - "align-center": "\f104", - "align-end": "\f105", - "align-middle": "\f106", - "align-start": "\f107", - "align-top": "\f108", - "alt": "\f109", - "app-indicator": "\f10a", - "app": "\f10b", - "archive-fill": "\f10c", - "archive": "\f10d", - "arrow-90deg-down": "\f10e", - "arrow-90deg-left": "\f10f", - "arrow-90deg-right": "\f110", - "arrow-90deg-up": "\f111", - "arrow-bar-down": "\f112", - "arrow-bar-left": "\f113", - "arrow-bar-right": "\f114", - "arrow-bar-up": "\f115", - "arrow-clockwise": "\f116", - "arrow-counterclockwise": "\f117", - "arrow-down-circle-fill": "\f118", - "arrow-down-circle": "\f119", - "arrow-down-left-circle-fill": "\f11a", - "arrow-down-left-circle": "\f11b", - "arrow-down-left-square-fill": "\f11c", - "arrow-down-left-square": "\f11d", - "arrow-down-left": "\f11e", - "arrow-down-right-circle-fill": "\f11f", - "arrow-down-right-circle": "\f120", - "arrow-down-right-square-fill": "\f121", - "arrow-down-right-square": "\f122", - "arrow-down-right": "\f123", - "arrow-down-short": "\f124", - "arrow-down-square-fill": "\f125", - "arrow-down-square": "\f126", - "arrow-down-up": "\f127", - "arrow-down": "\f128", - "arrow-left-circle-fill": "\f129", - "arrow-left-circle": "\f12a", - "arrow-left-right": "\f12b", - "arrow-left-short": "\f12c", - "arrow-left-square-fill": "\f12d", - "arrow-left-square": "\f12e", - "arrow-left": "\f12f", - "arrow-repeat": "\f130", - "arrow-return-left": "\f131", - "arrow-return-right": "\f132", - "arrow-right-circle-fill": "\f133", - "arrow-right-circle": "\f134", - "arrow-right-short": "\f135", - "arrow-right-square-fill": "\f136", - "arrow-right-square": "\f137", - "arrow-right": "\f138", - "arrow-up-circle-fill": "\f139", - "arrow-up-circle": "\f13a", - "arrow-up-left-circle-fill": "\f13b", - "arrow-up-left-circle": "\f13c", - "arrow-up-left-square-fill": "\f13d", - "arrow-up-left-square": "\f13e", - "arrow-up-left": "\f13f", - "arrow-up-right-circle-fill": "\f140", - "arrow-up-right-circle": "\f141", - "arrow-up-right-square-fill": "\f142", - "arrow-up-right-square": "\f143", - "arrow-up-right": "\f144", - "arrow-up-short": "\f145", - "arrow-up-square-fill": "\f146", - "arrow-up-square": "\f147", - "arrow-up": "\f148", - "arrows-angle-contract": "\f149", - "arrows-angle-expand": "\f14a", - "arrows-collapse": "\f14b", - "arrows-expand": "\f14c", - "arrows-fullscreen": "\f14d", - "arrows-move": "\f14e", - "aspect-ratio-fill": "\f14f", - "aspect-ratio": "\f150", - "asterisk": "\f151", - "at": "\f152", - "award-fill": "\f153", - "award": "\f154", - "back": "\f155", - "backspace-fill": "\f156", - "backspace-reverse-fill": "\f157", - "backspace-reverse": "\f158", - "backspace": "\f159", - "badge-3d-fill": "\f15a", - "badge-3d": "\f15b", - "badge-4k-fill": "\f15c", - "badge-4k": "\f15d", - "badge-8k-fill": "\f15e", - "badge-8k": "\f15f", - "badge-ad-fill": "\f160", - "badge-ad": "\f161", - "badge-ar-fill": "\f162", - "badge-ar": "\f163", - "badge-cc-fill": "\f164", - "badge-cc": "\f165", - "badge-hd-fill": "\f166", - "badge-hd": "\f167", - "badge-tm-fill": "\f168", - "badge-tm": "\f169", - "badge-vo-fill": "\f16a", - "badge-vo": "\f16b", - "badge-vr-fill": "\f16c", - "badge-vr": "\f16d", - "badge-wc-fill": "\f16e", - "badge-wc": "\f16f", - "bag-check-fill": "\f170", - "bag-check": "\f171", - "bag-dash-fill": "\f172", - "bag-dash": "\f173", - "bag-fill": "\f174", - "bag-plus-fill": "\f175", - "bag-plus": "\f176", - "bag-x-fill": "\f177", - "bag-x": "\f178", - "bag": "\f179", - "bar-chart-fill": "\f17a", - "bar-chart-line-fill": "\f17b", - "bar-chart-line": "\f17c", - "bar-chart-steps": "\f17d", - "bar-chart": "\f17e", - "basket-fill": "\f17f", - "basket": "\f180", - "basket2-fill": "\f181", - "basket2": "\f182", - "basket3-fill": "\f183", - "basket3": "\f184", - "battery-charging": "\f185", - "battery-full": "\f186", - "battery-half": "\f187", - "battery": "\f188", - "bell-fill": "\f189", - "bell": "\f18a", - "bezier": "\f18b", - "bezier2": "\f18c", - "bicycle": "\f18d", - "binoculars-fill": "\f18e", - "binoculars": "\f18f", - "blockquote-left": "\f190", - "blockquote-right": "\f191", - "book-fill": "\f192", - "book-half": "\f193", - "book": "\f194", - "bookmark-check-fill": "\f195", - "bookmark-check": "\f196", - "bookmark-dash-fill": "\f197", - "bookmark-dash": "\f198", - "bookmark-fill": "\f199", - "bookmark-heart-fill": "\f19a", - "bookmark-heart": "\f19b", - "bookmark-plus-fill": "\f19c", - "bookmark-plus": "\f19d", - "bookmark-star-fill": "\f19e", - "bookmark-star": "\f19f", - "bookmark-x-fill": "\f1a0", - "bookmark-x": "\f1a1", - "bookmark": "\f1a2", - "bookmarks-fill": "\f1a3", - "bookmarks": "\f1a4", - "bookshelf": "\f1a5", - "bootstrap-fill": "\f1a6", - "bootstrap-reboot": "\f1a7", - "bootstrap": "\f1a8", - "border-all": "\f1a9", - "border-bottom": "\f1aa", - "border-center": "\f1ab", - "border-inner": "\f1ac", - "border-left": "\f1ad", - "border-middle": "\f1ae", - "border-outer": "\f1af", - "border-right": "\f1b0", - "border-style": "\f1b1", - "border-top": "\f1b2", - "border-width": "\f1b3", - "border": "\f1b4", - "bounding-box-circles": "\f1b5", - "bounding-box": "\f1b6", - "box-arrow-down-left": "\f1b7", - "box-arrow-down-right": "\f1b8", - "box-arrow-down": "\f1b9", - "box-arrow-in-down-left": "\f1ba", - "box-arrow-in-down-right": "\f1bb", - "box-arrow-in-down": "\f1bc", - "box-arrow-in-left": "\f1bd", - "box-arrow-in-right": "\f1be", - "box-arrow-in-up-left": "\f1bf", - "box-arrow-in-up-right": "\f1c0", - "box-arrow-in-up": "\f1c1", - "box-arrow-left": "\f1c2", - "box-arrow-right": "\f1c3", - "box-arrow-up-left": "\f1c4", - "box-arrow-up-right": "\f1c5", - "box-arrow-up": "\f1c6", - "box-seam": "\f1c7", - "box": "\f1c8", - "braces": "\f1c9", - "bricks": "\f1ca", - "briefcase-fill": "\f1cb", - "briefcase": "\f1cc", - "brightness-alt-high-fill": "\f1cd", - "brightness-alt-high": "\f1ce", - "brightness-alt-low-fill": "\f1cf", - "brightness-alt-low": "\f1d0", - "brightness-high-fill": "\f1d1", - "brightness-high": "\f1d2", - "brightness-low-fill": "\f1d3", - "brightness-low": "\f1d4", - "broadcast-pin": "\f1d5", - "broadcast": "\f1d6", - "brush-fill": "\f1d7", - "brush": "\f1d8", - "bucket-fill": "\f1d9", - "bucket": "\f1da", - "bug-fill": "\f1db", - "bug": "\f1dc", - "building": "\f1dd", - "bullseye": "\f1de", - "calculator-fill": "\f1df", - "calculator": "\f1e0", - "calendar-check-fill": "\f1e1", - "calendar-check": "\f1e2", - "calendar-date-fill": "\f1e3", - "calendar-date": "\f1e4", - "calendar-day-fill": "\f1e5", - "calendar-day": "\f1e6", - "calendar-event-fill": "\f1e7", - "calendar-event": "\f1e8", - "calendar-fill": "\f1e9", - "calendar-minus-fill": "\f1ea", - "calendar-minus": "\f1eb", - "calendar-month-fill": "\f1ec", - "calendar-month": "\f1ed", - "calendar-plus-fill": "\f1ee", - "calendar-plus": "\f1ef", - "calendar-range-fill": "\f1f0", - "calendar-range": "\f1f1", - "calendar-week-fill": "\f1f2", - "calendar-week": "\f1f3", - "calendar-x-fill": "\f1f4", - "calendar-x": "\f1f5", - "calendar": "\f1f6", - "calendar2-check-fill": "\f1f7", - "calendar2-check": "\f1f8", - "calendar2-date-fill": "\f1f9", - "calendar2-date": "\f1fa", - "calendar2-day-fill": "\f1fb", - "calendar2-day": "\f1fc", - "calendar2-event-fill": "\f1fd", - "calendar2-event": "\f1fe", - "calendar2-fill": "\f1ff", - "calendar2-minus-fill": "\f200", - "calendar2-minus": "\f201", - "calendar2-month-fill": "\f202", - "calendar2-month": "\f203", - "calendar2-plus-fill": "\f204", - "calendar2-plus": "\f205", - "calendar2-range-fill": "\f206", - "calendar2-range": "\f207", - "calendar2-week-fill": "\f208", - "calendar2-week": "\f209", - "calendar2-x-fill": "\f20a", - "calendar2-x": "\f20b", - "calendar2": "\f20c", - "calendar3-event-fill": "\f20d", - "calendar3-event": "\f20e", - "calendar3-fill": "\f20f", - "calendar3-range-fill": "\f210", - "calendar3-range": "\f211", - "calendar3-week-fill": "\f212", - "calendar3-week": "\f213", - "calendar3": "\f214", - "calendar4-event": "\f215", - "calendar4-range": "\f216", - "calendar4-week": "\f217", - "calendar4": "\f218", - "camera-fill": "\f219", - "camera-reels-fill": "\f21a", - "camera-reels": "\f21b", - "camera-video-fill": "\f21c", - "camera-video-off-fill": "\f21d", - "camera-video-off": "\f21e", - "camera-video": "\f21f", - "camera": "\f220", - "camera2": "\f221", - "capslock-fill": "\f222", - "capslock": "\f223", - "card-checklist": "\f224", - "card-heading": "\f225", - "card-image": "\f226", - "card-list": "\f227", - "card-text": "\f228", - "caret-down-fill": "\f229", - "caret-down-square-fill": "\f22a", - "caret-down-square": "\f22b", - "caret-down": "\f22c", - "caret-left-fill": "\f22d", - "caret-left-square-fill": "\f22e", - "caret-left-square": "\f22f", - "caret-left": "\f230", - "caret-right-fill": "\f231", - "caret-right-square-fill": "\f232", - "caret-right-square": "\f233", - "caret-right": "\f234", - "caret-up-fill": "\f235", - "caret-up-square-fill": "\f236", - "caret-up-square": "\f237", - "caret-up": "\f238", - "cart-check-fill": "\f239", - "cart-check": "\f23a", - "cart-dash-fill": "\f23b", - "cart-dash": "\f23c", - "cart-fill": "\f23d", - "cart-plus-fill": "\f23e", - "cart-plus": "\f23f", - "cart-x-fill": "\f240", - "cart-x": "\f241", - "cart": "\f242", - "cart2": "\f243", - "cart3": "\f244", - "cart4": "\f245", - "cash-stack": "\f246", - "cash": "\f247", - "cast": "\f248", - "chat-dots-fill": "\f249", - "chat-dots": "\f24a", - "chat-fill": "\f24b", - "chat-left-dots-fill": "\f24c", - "chat-left-dots": "\f24d", - "chat-left-fill": "\f24e", - "chat-left-quote-fill": "\f24f", - "chat-left-quote": "\f250", - "chat-left-text-fill": "\f251", - "chat-left-text": "\f252", - "chat-left": "\f253", - "chat-quote-fill": "\f254", - "chat-quote": "\f255", - "chat-right-dots-fill": "\f256", - "chat-right-dots": "\f257", - "chat-right-fill": "\f258", - "chat-right-quote-fill": "\f259", - "chat-right-quote": "\f25a", - "chat-right-text-fill": "\f25b", - "chat-right-text": "\f25c", - "chat-right": "\f25d", - "chat-square-dots-fill": "\f25e", - "chat-square-dots": "\f25f", - "chat-square-fill": "\f260", - "chat-square-quote-fill": "\f261", - "chat-square-quote": "\f262", - "chat-square-text-fill": "\f263", - "chat-square-text": "\f264", - "chat-square": "\f265", - "chat-text-fill": "\f266", - "chat-text": "\f267", - "chat": "\f268", - "check-all": "\f269", - "check-circle-fill": "\f26a", - "check-circle": "\f26b", - "check-square-fill": "\f26c", - "check-square": "\f26d", - "check": "\f26e", - "check2-all": "\f26f", - "check2-circle": "\f270", - "check2-square": "\f271", - "check2": "\f272", - "chevron-bar-contract": "\f273", - "chevron-bar-down": "\f274", - "chevron-bar-expand": "\f275", - "chevron-bar-left": "\f276", - "chevron-bar-right": "\f277", - "chevron-bar-up": "\f278", - "chevron-compact-down": "\f279", - "chevron-compact-left": "\f27a", - "chevron-compact-right": "\f27b", - "chevron-compact-up": "\f27c", - "chevron-contract": "\f27d", - "chevron-double-down": "\f27e", - "chevron-double-left": "\f27f", - "chevron-double-right": "\f280", - "chevron-double-up": "\f281", - "chevron-down": "\f282", - "chevron-expand": "\f283", - "chevron-left": "\f284", - "chevron-right": "\f285", - "chevron-up": "\f286", - "circle-fill": "\f287", - "circle-half": "\f288", - "circle-square": "\f289", - "circle": "\f28a", - "clipboard-check": "\f28b", - "clipboard-data": "\f28c", - "clipboard-minus": "\f28d", - "clipboard-plus": "\f28e", - "clipboard-x": "\f28f", - "clipboard": "\f290", - "clock-fill": "\f291", - "clock-history": "\f292", - "clock": "\f293", - "cloud-arrow-down-fill": "\f294", - "cloud-arrow-down": "\f295", - "cloud-arrow-up-fill": "\f296", - "cloud-arrow-up": "\f297", - "cloud-check-fill": "\f298", - "cloud-check": "\f299", - "cloud-download-fill": "\f29a", - "cloud-download": "\f29b", - "cloud-drizzle-fill": "\f29c", - "cloud-drizzle": "\f29d", - "cloud-fill": "\f29e", - "cloud-fog-fill": "\f29f", - "cloud-fog": "\f2a0", - "cloud-fog2-fill": "\f2a1", - "cloud-fog2": "\f2a2", - "cloud-hail-fill": "\f2a3", - "cloud-hail": "\f2a4", - "cloud-haze-fill": "\f2a6", - "cloud-haze": "\f2a7", - "cloud-haze2-fill": "\f2a8", - "cloud-lightning-fill": "\f2a9", - "cloud-lightning-rain-fill": "\f2aa", - "cloud-lightning-rain": "\f2ab", - "cloud-lightning": "\f2ac", - "cloud-minus-fill": "\f2ad", - "cloud-minus": "\f2ae", - "cloud-moon-fill": "\f2af", - "cloud-moon": "\f2b0", - "cloud-plus-fill": "\f2b1", - "cloud-plus": "\f2b2", - "cloud-rain-fill": "\f2b3", - "cloud-rain-heavy-fill": "\f2b4", - "cloud-rain-heavy": "\f2b5", - "cloud-rain": "\f2b6", - "cloud-slash-fill": "\f2b7", - "cloud-slash": "\f2b8", - "cloud-sleet-fill": "\f2b9", - "cloud-sleet": "\f2ba", - "cloud-snow-fill": "\f2bb", - "cloud-snow": "\f2bc", - "cloud-sun-fill": "\f2bd", - "cloud-sun": "\f2be", - "cloud-upload-fill": "\f2bf", - "cloud-upload": "\f2c0", - "cloud": "\f2c1", - "clouds-fill": "\f2c2", - "clouds": "\f2c3", - "cloudy-fill": "\f2c4", - "cloudy": "\f2c5", - "code-slash": "\f2c6", - "code-square": "\f2c7", - "code": "\f2c8", - "collection-fill": "\f2c9", - "collection-play-fill": "\f2ca", - "collection-play": "\f2cb", - "collection": "\f2cc", - "columns-gap": "\f2cd", - "columns": "\f2ce", - "command": "\f2cf", - "compass-fill": "\f2d0", - "compass": "\f2d1", - "cone-striped": "\f2d2", - "cone": "\f2d3", - "controller": "\f2d4", - "cpu-fill": "\f2d5", - "cpu": "\f2d6", - "credit-card-2-back-fill": "\f2d7", - "credit-card-2-back": "\f2d8", - "credit-card-2-front-fill": "\f2d9", - "credit-card-2-front": "\f2da", - "credit-card-fill": "\f2db", - "credit-card": "\f2dc", - "crop": "\f2dd", - "cup-fill": "\f2de", - "cup-straw": "\f2df", - "cup": "\f2e0", - "cursor-fill": "\f2e1", - "cursor-text": "\f2e2", - "cursor": "\f2e3", - "dash-circle-dotted": "\f2e4", - "dash-circle-fill": "\f2e5", - "dash-circle": "\f2e6", - "dash-square-dotted": "\f2e7", - "dash-square-fill": "\f2e8", - "dash-square": "\f2e9", - "dash": "\f2ea", - "diagram-2-fill": "\f2eb", - "diagram-2": "\f2ec", - "diagram-3-fill": "\f2ed", - "diagram-3": "\f2ee", - "diamond-fill": "\f2ef", - "diamond-half": "\f2f0", - "diamond": "\f2f1", - "dice-1-fill": "\f2f2", - "dice-1": "\f2f3", - "dice-2-fill": "\f2f4", - "dice-2": "\f2f5", - "dice-3-fill": "\f2f6", - "dice-3": "\f2f7", - "dice-4-fill": "\f2f8", - "dice-4": "\f2f9", - "dice-5-fill": "\f2fa", - "dice-5": "\f2fb", - "dice-6-fill": "\f2fc", - "dice-6": "\f2fd", - "disc-fill": "\f2fe", - "disc": "\f2ff", - "discord": "\f300", - "display-fill": "\f301", - "display": "\f302", - "distribute-horizontal": "\f303", - "distribute-vertical": "\f304", - "door-closed-fill": "\f305", - "door-closed": "\f306", - "door-open-fill": "\f307", - "door-open": "\f308", - "dot": "\f309", - "download": "\f30a", - "droplet-fill": "\f30b", - "droplet-half": "\f30c", - "droplet": "\f30d", - "earbuds": "\f30e", - "easel-fill": "\f30f", - "easel": "\f310", - "egg-fill": "\f311", - "egg-fried": "\f312", - "egg": "\f313", - "eject-fill": "\f314", - "eject": "\f315", - "emoji-angry-fill": "\f316", - "emoji-angry": "\f317", - "emoji-dizzy-fill": "\f318", - "emoji-dizzy": "\f319", - "emoji-expressionless-fill": "\f31a", - "emoji-expressionless": "\f31b", - "emoji-frown-fill": "\f31c", - "emoji-frown": "\f31d", - "emoji-heart-eyes-fill": "\f31e", - "emoji-heart-eyes": "\f31f", - "emoji-laughing-fill": "\f320", - "emoji-laughing": "\f321", - "emoji-neutral-fill": "\f322", - "emoji-neutral": "\f323", - "emoji-smile-fill": "\f324", - "emoji-smile-upside-down-fill": "\f325", - "emoji-smile-upside-down": "\f326", - "emoji-smile": "\f327", - "emoji-sunglasses-fill": "\f328", - "emoji-sunglasses": "\f329", - "emoji-wink-fill": "\f32a", - "emoji-wink": "\f32b", - "envelope-fill": "\f32c", - "envelope-open-fill": "\f32d", - "envelope-open": "\f32e", - "envelope": "\f32f", - "eraser-fill": "\f330", - "eraser": "\f331", - "exclamation-circle-fill": "\f332", - "exclamation-circle": "\f333", - "exclamation-diamond-fill": "\f334", - "exclamation-diamond": "\f335", - "exclamation-octagon-fill": "\f336", - "exclamation-octagon": "\f337", - "exclamation-square-fill": "\f338", - "exclamation-square": "\f339", - "exclamation-triangle-fill": "\f33a", - "exclamation-triangle": "\f33b", - "exclamation": "\f33c", - "exclude": "\f33d", - "eye-fill": "\f33e", - "eye-slash-fill": "\f33f", - "eye-slash": "\f340", - "eye": "\f341", - "eyedropper": "\f342", - "eyeglasses": "\f343", - "facebook": "\f344", - "file-arrow-down-fill": "\f345", - "file-arrow-down": "\f346", - "file-arrow-up-fill": "\f347", - "file-arrow-up": "\f348", - "file-bar-graph-fill": "\f349", - "file-bar-graph": "\f34a", - "file-binary-fill": "\f34b", - "file-binary": "\f34c", - "file-break-fill": "\f34d", - "file-break": "\f34e", - "file-check-fill": "\f34f", - "file-check": "\f350", - "file-code-fill": "\f351", - "file-code": "\f352", - "file-diff-fill": "\f353", - "file-diff": "\f354", - "file-earmark-arrow-down-fill": "\f355", - "file-earmark-arrow-down": "\f356", - "file-earmark-arrow-up-fill": "\f357", - "file-earmark-arrow-up": "\f358", - "file-earmark-bar-graph-fill": "\f359", - "file-earmark-bar-graph": "\f35a", - "file-earmark-binary-fill": "\f35b", - "file-earmark-binary": "\f35c", - "file-earmark-break-fill": "\f35d", - "file-earmark-break": "\f35e", - "file-earmark-check-fill": "\f35f", - "file-earmark-check": "\f360", - "file-earmark-code-fill": "\f361", - "file-earmark-code": "\f362", - "file-earmark-diff-fill": "\f363", - "file-earmark-diff": "\f364", - "file-earmark-easel-fill": "\f365", - "file-earmark-easel": "\f366", - "file-earmark-excel-fill": "\f367", - "file-earmark-excel": "\f368", - "file-earmark-fill": "\f369", - "file-earmark-font-fill": "\f36a", - "file-earmark-font": "\f36b", - "file-earmark-image-fill": "\f36c", - "file-earmark-image": "\f36d", - "file-earmark-lock-fill": "\f36e", - "file-earmark-lock": "\f36f", - "file-earmark-lock2-fill": "\f370", - "file-earmark-lock2": "\f371", - "file-earmark-medical-fill": "\f372", - "file-earmark-medical": "\f373", - "file-earmark-minus-fill": "\f374", - "file-earmark-minus": "\f375", - "file-earmark-music-fill": "\f376", - "file-earmark-music": "\f377", - "file-earmark-person-fill": "\f378", - "file-earmark-person": "\f379", - "file-earmark-play-fill": "\f37a", - "file-earmark-play": "\f37b", - "file-earmark-plus-fill": "\f37c", - "file-earmark-plus": "\f37d", - "file-earmark-post-fill": "\f37e", - "file-earmark-post": "\f37f", - "file-earmark-ppt-fill": "\f380", - "file-earmark-ppt": "\f381", - "file-earmark-richtext-fill": "\f382", - "file-earmark-richtext": "\f383", - "file-earmark-ruled-fill": "\f384", - "file-earmark-ruled": "\f385", - "file-earmark-slides-fill": "\f386", - "file-earmark-slides": "\f387", - "file-earmark-spreadsheet-fill": "\f388", - "file-earmark-spreadsheet": "\f389", - "file-earmark-text-fill": "\f38a", - "file-earmark-text": "\f38b", - "file-earmark-word-fill": "\f38c", - "file-earmark-word": "\f38d", - "file-earmark-x-fill": "\f38e", - "file-earmark-x": "\f38f", - "file-earmark-zip-fill": "\f390", - "file-earmark-zip": "\f391", - "file-earmark": "\f392", - "file-easel-fill": "\f393", - "file-easel": "\f394", - "file-excel-fill": "\f395", - "file-excel": "\f396", - "file-fill": "\f397", - "file-font-fill": "\f398", - "file-font": "\f399", - "file-image-fill": "\f39a", - "file-image": "\f39b", - "file-lock-fill": "\f39c", - "file-lock": "\f39d", - "file-lock2-fill": "\f39e", - "file-lock2": "\f39f", - "file-medical-fill": "\f3a0", - "file-medical": "\f3a1", - "file-minus-fill": "\f3a2", - "file-minus": "\f3a3", - "file-music-fill": "\f3a4", - "file-music": "\f3a5", - "file-person-fill": "\f3a6", - "file-person": "\f3a7", - "file-play-fill": "\f3a8", - "file-play": "\f3a9", - "file-plus-fill": "\f3aa", - "file-plus": "\f3ab", - "file-post-fill": "\f3ac", - "file-post": "\f3ad", - "file-ppt-fill": "\f3ae", - "file-ppt": "\f3af", - "file-richtext-fill": "\f3b0", - "file-richtext": "\f3b1", - "file-ruled-fill": "\f3b2", - "file-ruled": "\f3b3", - "file-slides-fill": "\f3b4", - "file-slides": "\f3b5", - "file-spreadsheet-fill": "\f3b6", - "file-spreadsheet": "\f3b7", - "file-text-fill": "\f3b8", - "file-text": "\f3b9", - "file-word-fill": "\f3ba", - "file-word": "\f3bb", - "file-x-fill": "\f3bc", - "file-x": "\f3bd", - "file-zip-fill": "\f3be", - "file-zip": "\f3bf", - "file": "\f3c0", - "files-alt": "\f3c1", - "files": "\f3c2", - "film": "\f3c3", - "filter-circle-fill": "\f3c4", - "filter-circle": "\f3c5", - "filter-left": "\f3c6", - "filter-right": "\f3c7", - "filter-square-fill": "\f3c8", - "filter-square": "\f3c9", - "filter": "\f3ca", - "flag-fill": "\f3cb", - "flag": "\f3cc", - "flower1": "\f3cd", - "flower2": "\f3ce", - "flower3": "\f3cf", - "folder-check": "\f3d0", - "folder-fill": "\f3d1", - "folder-minus": "\f3d2", - "folder-plus": "\f3d3", - "folder-symlink-fill": "\f3d4", - "folder-symlink": "\f3d5", - "folder-x": "\f3d6", - "folder": "\f3d7", - "folder2-open": "\f3d8", - "folder2": "\f3d9", - "fonts": "\f3da", - "forward-fill": "\f3db", - "forward": "\f3dc", - "front": "\f3dd", - "fullscreen-exit": "\f3de", - "fullscreen": "\f3df", - "funnel-fill": "\f3e0", - "funnel": "\f3e1", - "gear-fill": "\f3e2", - "gear-wide-connected": "\f3e3", - "gear-wide": "\f3e4", - "gear": "\f3e5", - "gem": "\f3e6", - "geo-alt-fill": "\f3e7", - "geo-alt": "\f3e8", - "geo-fill": "\f3e9", - "geo": "\f3ea", - "gift-fill": "\f3eb", - "gift": "\f3ec", - "github": "\f3ed", - "globe": "\f3ee", - "globe2": "\f3ef", - "google": "\f3f0", - "graph-down": "\f3f1", - "graph-up": "\f3f2", - "grid-1x2-fill": "\f3f3", - "grid-1x2": "\f3f4", - "grid-3x2-gap-fill": "\f3f5", - "grid-3x2-gap": "\f3f6", - "grid-3x2": "\f3f7", - "grid-3x3-gap-fill": "\f3f8", - "grid-3x3-gap": "\f3f9", - "grid-3x3": "\f3fa", - "grid-fill": "\f3fb", - "grid": "\f3fc", - "grip-horizontal": "\f3fd", - "grip-vertical": "\f3fe", - "hammer": "\f3ff", - "hand-index-fill": "\f400", - "hand-index-thumb-fill": "\f401", - "hand-index-thumb": "\f402", - "hand-index": "\f403", - "hand-thumbs-down-fill": "\f404", - "hand-thumbs-down": "\f405", - "hand-thumbs-up-fill": "\f406", - "hand-thumbs-up": "\f407", - "handbag-fill": "\f408", - "handbag": "\f409", - "hash": "\f40a", - "hdd-fill": "\f40b", - "hdd-network-fill": "\f40c", - "hdd-network": "\f40d", - "hdd-rack-fill": "\f40e", - "hdd-rack": "\f40f", - "hdd-stack-fill": "\f410", - "hdd-stack": "\f411", - "hdd": "\f412", - "headphones": "\f413", - "headset": "\f414", - "heart-fill": "\f415", - "heart-half": "\f416", - "heart": "\f417", - "heptagon-fill": "\f418", - "heptagon-half": "\f419", - "heptagon": "\f41a", - "hexagon-fill": "\f41b", - "hexagon-half": "\f41c", - "hexagon": "\f41d", - "hourglass-bottom": "\f41e", - "hourglass-split": "\f41f", - "hourglass-top": "\f420", - "hourglass": "\f421", - "house-door-fill": "\f422", - "house-door": "\f423", - "house-fill": "\f424", - "house": "\f425", - "hr": "\f426", - "hurricane": "\f427", - "image-alt": "\f428", - "image-fill": "\f429", - "image": "\f42a", - "images": "\f42b", - "inbox-fill": "\f42c", - "inbox": "\f42d", - "inboxes-fill": "\f42e", - "inboxes": "\f42f", - "info-circle-fill": "\f430", - "info-circle": "\f431", - "info-square-fill": "\f432", - "info-square": "\f433", - "info": "\f434", - "input-cursor-text": "\f435", - "input-cursor": "\f436", - "instagram": "\f437", - "intersect": "\f438", - "journal-album": "\f439", - "journal-arrow-down": "\f43a", - "journal-arrow-up": "\f43b", - "journal-bookmark-fill": "\f43c", - "journal-bookmark": "\f43d", - "journal-check": "\f43e", - "journal-code": "\f43f", - "journal-medical": "\f440", - "journal-minus": "\f441", - "journal-plus": "\f442", - "journal-richtext": "\f443", - "journal-text": "\f444", - "journal-x": "\f445", - "journal": "\f446", - "journals": "\f447", - "joystick": "\f448", - "justify-left": "\f449", - "justify-right": "\f44a", - "justify": "\f44b", - "kanban-fill": "\f44c", - "kanban": "\f44d", - "key-fill": "\f44e", - "key": "\f44f", - "keyboard-fill": "\f450", - "keyboard": "\f451", - "ladder": "\f452", - "lamp-fill": "\f453", - "lamp": "\f454", - "laptop-fill": "\f455", - "laptop": "\f456", - "layer-backward": "\f457", - "layer-forward": "\f458", - "layers-fill": "\f459", - "layers-half": "\f45a", - "layers": "\f45b", - "layout-sidebar-inset-reverse": "\f45c", - "layout-sidebar-inset": "\f45d", - "layout-sidebar-reverse": "\f45e", - "layout-sidebar": "\f45f", - "layout-split": "\f460", - "layout-text-sidebar-reverse": "\f461", - "layout-text-sidebar": "\f462", - "layout-text-window-reverse": "\f463", - "layout-text-window": "\f464", - "layout-three-columns": "\f465", - "layout-wtf": "\f466", - "life-preserver": "\f467", - "lightbulb-fill": "\f468", - "lightbulb-off-fill": "\f469", - "lightbulb-off": "\f46a", - "lightbulb": "\f46b", - "lightning-charge-fill": "\f46c", - "lightning-charge": "\f46d", - "lightning-fill": "\f46e", - "lightning": "\f46f", - "link-45deg": "\f470", - "link": "\f471", - "linkedin": "\f472", - "list-check": "\f473", - "list-nested": "\f474", - "list-ol": "\f475", - "list-stars": "\f476", - "list-task": "\f477", - "list-ul": "\f478", - "list": "\f479", - "lock-fill": "\f47a", - "lock": "\f47b", - "mailbox": "\f47c", - "mailbox2": "\f47d", - "map-fill": "\f47e", - "map": "\f47f", - "markdown-fill": "\f480", - "markdown": "\f481", - "mask": "\f482", - "megaphone-fill": "\f483", - "megaphone": "\f484", - "menu-app-fill": "\f485", - "menu-app": "\f486", - "menu-button-fill": "\f487", - "menu-button-wide-fill": "\f488", - "menu-button-wide": "\f489", - "menu-button": "\f48a", - "menu-down": "\f48b", - "menu-up": "\f48c", - "mic-fill": "\f48d", - "mic-mute-fill": "\f48e", - "mic-mute": "\f48f", - "mic": "\f490", - "minecart-loaded": "\f491", - "minecart": "\f492", - "moisture": "\f493", - "moon-fill": "\f494", - "moon-stars-fill": "\f495", - "moon-stars": "\f496", - "moon": "\f497", - "mouse-fill": "\f498", - "mouse": "\f499", - "mouse2-fill": "\f49a", - "mouse2": "\f49b", - "mouse3-fill": "\f49c", - "mouse3": "\f49d", - "music-note-beamed": "\f49e", - "music-note-list": "\f49f", - "music-note": "\f4a0", - "music-player-fill": "\f4a1", - "music-player": "\f4a2", - "newspaper": "\f4a3", - "node-minus-fill": "\f4a4", - "node-minus": "\f4a5", - "node-plus-fill": "\f4a6", - "node-plus": "\f4a7", - "nut-fill": "\f4a8", - "nut": "\f4a9", - "octagon-fill": "\f4aa", - "octagon-half": "\f4ab", - "octagon": "\f4ac", - "option": "\f4ad", - "outlet": "\f4ae", - "paint-bucket": "\f4af", - "palette-fill": "\f4b0", - "palette": "\f4b1", - "palette2": "\f4b2", - "paperclip": "\f4b3", - "paragraph": "\f4b4", - "patch-check-fill": "\f4b5", - "patch-check": "\f4b6", - "patch-exclamation-fill": "\f4b7", - "patch-exclamation": "\f4b8", - "patch-minus-fill": "\f4b9", - "patch-minus": "\f4ba", - "patch-plus-fill": "\f4bb", - "patch-plus": "\f4bc", - "patch-question-fill": "\f4bd", - "patch-question": "\f4be", - "pause-btn-fill": "\f4bf", - "pause-btn": "\f4c0", - "pause-circle-fill": "\f4c1", - "pause-circle": "\f4c2", - "pause-fill": "\f4c3", - "pause": "\f4c4", - "peace-fill": "\f4c5", - "peace": "\f4c6", - "pen-fill": "\f4c7", - "pen": "\f4c8", - "pencil-fill": "\f4c9", - "pencil-square": "\f4ca", - "pencil": "\f4cb", - "pentagon-fill": "\f4cc", - "pentagon-half": "\f4cd", - "pentagon": "\f4ce", - "people-fill": "\f4cf", - "people": "\f4d0", - "percent": "\f4d1", - "person-badge-fill": "\f4d2", - "person-badge": "\f4d3", - "person-bounding-box": "\f4d4", - "person-check-fill": "\f4d5", - "person-check": "\f4d6", - "person-circle": "\f4d7", - "person-dash-fill": "\f4d8", - "person-dash": "\f4d9", - "person-fill": "\f4da", - "person-lines-fill": "\f4db", - "person-plus-fill": "\f4dc", - "person-plus": "\f4dd", - "person-square": "\f4de", - "person-x-fill": "\f4df", - "person-x": "\f4e0", - "person": "\f4e1", - "phone-fill": "\f4e2", - "phone-landscape-fill": "\f4e3", - "phone-landscape": "\f4e4", - "phone-vibrate-fill": "\f4e5", - "phone-vibrate": "\f4e6", - "phone": "\f4e7", - "pie-chart-fill": "\f4e8", - "pie-chart": "\f4e9", - "pin-angle-fill": "\f4ea", - "pin-angle": "\f4eb", - "pin-fill": "\f4ec", - "pin": "\f4ed", - "pip-fill": "\f4ee", - "pip": "\f4ef", - "play-btn-fill": "\f4f0", - "play-btn": "\f4f1", - "play-circle-fill": "\f4f2", - "play-circle": "\f4f3", - "play-fill": "\f4f4", - "play": "\f4f5", - "plug-fill": "\f4f6", - "plug": "\f4f7", - "plus-circle-dotted": "\f4f8", - "plus-circle-fill": "\f4f9", - "plus-circle": "\f4fa", - "plus-square-dotted": "\f4fb", - "plus-square-fill": "\f4fc", - "plus-square": "\f4fd", - "plus": "\f4fe", - "power": "\f4ff", - "printer-fill": "\f500", - "printer": "\f501", - "puzzle-fill": "\f502", - "puzzle": "\f503", - "question-circle-fill": "\f504", - "question-circle": "\f505", - "question-diamond-fill": "\f506", - "question-diamond": "\f507", - "question-octagon-fill": "\f508", - "question-octagon": "\f509", - "question-square-fill": "\f50a", - "question-square": "\f50b", - "question": "\f50c", - "rainbow": "\f50d", - "receipt-cutoff": "\f50e", - "receipt": "\f50f", - "reception-0": "\f510", - "reception-1": "\f511", - "reception-2": "\f512", - "reception-3": "\f513", - "reception-4": "\f514", - "record-btn-fill": "\f515", - "record-btn": "\f516", - "record-circle-fill": "\f517", - "record-circle": "\f518", - "record-fill": "\f519", - "record": "\f51a", - "record2-fill": "\f51b", - "record2": "\f51c", - "reply-all-fill": "\f51d", - "reply-all": "\f51e", - "reply-fill": "\f51f", - "reply": "\f520", - "rss-fill": "\f521", - "rss": "\f522", - "rulers": "\f523", - "save-fill": "\f524", - "save": "\f525", - "save2-fill": "\f526", - "save2": "\f527", - "scissors": "\f528", - "screwdriver": "\f529", - "search": "\f52a", - "segmented-nav": "\f52b", - "server": "\f52c", - "share-fill": "\f52d", - "share": "\f52e", - "shield-check": "\f52f", - "shield-exclamation": "\f530", - "shield-fill-check": "\f531", - "shield-fill-exclamation": "\f532", - "shield-fill-minus": "\f533", - "shield-fill-plus": "\f534", - "shield-fill-x": "\f535", - "shield-fill": "\f536", - "shield-lock-fill": "\f537", - "shield-lock": "\f538", - "shield-minus": "\f539", - "shield-plus": "\f53a", - "shield-shaded": "\f53b", - "shield-slash-fill": "\f53c", - "shield-slash": "\f53d", - "shield-x": "\f53e", - "shield": "\f53f", - "shift-fill": "\f540", - "shift": "\f541", - "shop-window": "\f542", - "shop": "\f543", - "shuffle": "\f544", - "signpost-2-fill": "\f545", - "signpost-2": "\f546", - "signpost-fill": "\f547", - "signpost-split-fill": "\f548", - "signpost-split": "\f549", - "signpost": "\f54a", - "sim-fill": "\f54b", - "sim": "\f54c", - "skip-backward-btn-fill": "\f54d", - "skip-backward-btn": "\f54e", - "skip-backward-circle-fill": "\f54f", - "skip-backward-circle": "\f550", - "skip-backward-fill": "\f551", - "skip-backward": "\f552", - "skip-end-btn-fill": "\f553", - "skip-end-btn": "\f554", - "skip-end-circle-fill": "\f555", - "skip-end-circle": "\f556", - "skip-end-fill": "\f557", - "skip-end": "\f558", - "skip-forward-btn-fill": "\f559", - "skip-forward-btn": "\f55a", - "skip-forward-circle-fill": "\f55b", - "skip-forward-circle": "\f55c", - "skip-forward-fill": "\f55d", - "skip-forward": "\f55e", - "skip-start-btn-fill": "\f55f", - "skip-start-btn": "\f560", - "skip-start-circle-fill": "\f561", - "skip-start-circle": "\f562", - "skip-start-fill": "\f563", - "skip-start": "\f564", - "slack": "\f565", - "slash-circle-fill": "\f566", - "slash-circle": "\f567", - "slash-square-fill": "\f568", - "slash-square": "\f569", - "slash": "\f56a", - "sliders": "\f56b", - "smartwatch": "\f56c", - "snow": "\f56d", - "snow2": "\f56e", - "snow3": "\f56f", - "sort-alpha-down-alt": "\f570", - "sort-alpha-down": "\f571", - "sort-alpha-up-alt": "\f572", - "sort-alpha-up": "\f573", - "sort-down-alt": "\f574", - "sort-down": "\f575", - "sort-numeric-down-alt": "\f576", - "sort-numeric-down": "\f577", - "sort-numeric-up-alt": "\f578", - "sort-numeric-up": "\f579", - "sort-up-alt": "\f57a", - "sort-up": "\f57b", - "soundwave": "\f57c", - "speaker-fill": "\f57d", - "speaker": "\f57e", - "speedometer": "\f57f", - "speedometer2": "\f580", - "spellcheck": "\f581", - "square-fill": "\f582", - "square-half": "\f583", - "square": "\f584", - "stack": "\f585", - "star-fill": "\f586", - "star-half": "\f587", - "star": "\f588", - "stars": "\f589", - "stickies-fill": "\f58a", - "stickies": "\f58b", - "sticky-fill": "\f58c", - "sticky": "\f58d", - "stop-btn-fill": "\f58e", - "stop-btn": "\f58f", - "stop-circle-fill": "\f590", - "stop-circle": "\f591", - "stop-fill": "\f592", - "stop": "\f593", - "stoplights-fill": "\f594", - "stoplights": "\f595", - "stopwatch-fill": "\f596", - "stopwatch": "\f597", - "subtract": "\f598", - "suit-club-fill": "\f599", - "suit-club": "\f59a", - "suit-diamond-fill": "\f59b", - "suit-diamond": "\f59c", - "suit-heart-fill": "\f59d", - "suit-heart": "\f59e", - "suit-spade-fill": "\f59f", - "suit-spade": "\f5a0", - "sun-fill": "\f5a1", - "sun": "\f5a2", - "sunglasses": "\f5a3", - "sunrise-fill": "\f5a4", - "sunrise": "\f5a5", - "sunset-fill": "\f5a6", - "sunset": "\f5a7", - "symmetry-horizontal": "\f5a8", - "symmetry-vertical": "\f5a9", - "table": "\f5aa", - "tablet-fill": "\f5ab", - "tablet-landscape-fill": "\f5ac", - "tablet-landscape": "\f5ad", - "tablet": "\f5ae", - "tag-fill": "\f5af", - "tag": "\f5b0", - "tags-fill": "\f5b1", - "tags": "\f5b2", - "telegram": "\f5b3", - "telephone-fill": "\f5b4", - "telephone-forward-fill": "\f5b5", - "telephone-forward": "\f5b6", - "telephone-inbound-fill": "\f5b7", - "telephone-inbound": "\f5b8", - "telephone-minus-fill": "\f5b9", - "telephone-minus": "\f5ba", - "telephone-outbound-fill": "\f5bb", - "telephone-outbound": "\f5bc", - "telephone-plus-fill": "\f5bd", - "telephone-plus": "\f5be", - "telephone-x-fill": "\f5bf", - "telephone-x": "\f5c0", - "telephone": "\f5c1", - "terminal-fill": "\f5c2", - "terminal": "\f5c3", - "text-center": "\f5c4", - "text-indent-left": "\f5c5", - "text-indent-right": "\f5c6", - "text-left": "\f5c7", - "text-paragraph": "\f5c8", - "text-right": "\f5c9", - "textarea-resize": "\f5ca", - "textarea-t": "\f5cb", - "textarea": "\f5cc", - "thermometer-half": "\f5cd", - "thermometer-high": "\f5ce", - "thermometer-low": "\f5cf", - "thermometer-snow": "\f5d0", - "thermometer-sun": "\f5d1", - "thermometer": "\f5d2", - "three-dots-vertical": "\f5d3", - "three-dots": "\f5d4", - "toggle-off": "\f5d5", - "toggle-on": "\f5d6", - "toggle2-off": "\f5d7", - "toggle2-on": "\f5d8", - "toggles": "\f5d9", - "toggles2": "\f5da", - "tools": "\f5db", - "tornado": "\f5dc", - "trash-fill": "\f5dd", - "trash": "\f5de", - "trash2-fill": "\f5df", - "trash2": "\f5e0", - "tree-fill": "\f5e1", - "tree": "\f5e2", - "triangle-fill": "\f5e3", - "triangle-half": "\f5e4", - "triangle": "\f5e5", - "trophy-fill": "\f5e6", - "trophy": "\f5e7", - "tropical-storm": "\f5e8", - "truck-flatbed": "\f5e9", - "truck": "\f5ea", - "tsunami": "\f5eb", - "tv-fill": "\f5ec", - "tv": "\f5ed", - "twitch": "\f5ee", - "twitter": "\f5ef", - "type-bold": "\f5f0", - "type-h1": "\f5f1", - "type-h2": "\f5f2", - "type-h3": "\f5f3", - "type-italic": "\f5f4", - "type-strikethrough": "\f5f5", - "type-underline": "\f5f6", - "type": "\f5f7", - "ui-checks-grid": "\f5f8", - "ui-checks": "\f5f9", - "ui-radios-grid": "\f5fa", - "ui-radios": "\f5fb", - "umbrella-fill": "\f5fc", - "umbrella": "\f5fd", - "union": "\f5fe", - "unlock-fill": "\f5ff", - "unlock": "\f600", - "upc-scan": "\f601", - "upc": "\f602", - "upload": "\f603", - "vector-pen": "\f604", - "view-list": "\f605", - "view-stacked": "\f606", - "vinyl-fill": "\f607", - "vinyl": "\f608", - "voicemail": "\f609", - "volume-down-fill": "\f60a", - "volume-down": "\f60b", - "volume-mute-fill": "\f60c", - "volume-mute": "\f60d", - "volume-off-fill": "\f60e", - "volume-off": "\f60f", - "volume-up-fill": "\f610", - "volume-up": "\f611", - "vr": "\f612", - "wallet-fill": "\f613", - "wallet": "\f614", - "wallet2": "\f615", - "watch": "\f616", - "water": "\f617", - "whatsapp": "\f618", - "wifi-1": "\f619", - "wifi-2": "\f61a", - "wifi-off": "\f61b", - "wifi": "\f61c", - "wind": "\f61d", - "window-dock": "\f61e", - "window-sidebar": "\f61f", - "window": "\f620", - "wrench": "\f621", - "x-circle-fill": "\f622", - "x-circle": "\f623", - "x-diamond-fill": "\f624", - "x-diamond": "\f625", - "x-octagon-fill": "\f626", - "x-octagon": "\f627", - "x-square-fill": "\f628", - "x-square": "\f629", - "x": "\f62a", - "youtube": "\f62b", - "zoom-in": "\f62c", - "zoom-out": "\f62d", - "bank": "\f62e", - "bank2": "\f62f", - "bell-slash-fill": "\f630", - "bell-slash": "\f631", - "cash-coin": "\f632", - "check-lg": "\f633", - "coin": "\f634", - "currency-bitcoin": "\f635", - "currency-dollar": "\f636", - "currency-euro": "\f637", - "currency-exchange": "\f638", - "currency-pound": "\f639", - "currency-yen": "\f63a", - "dash-lg": "\f63b", - "exclamation-lg": "\f63c", - "file-earmark-pdf-fill": "\f63d", - "file-earmark-pdf": "\f63e", - "file-pdf-fill": "\f63f", - "file-pdf": "\f640", - "gender-ambiguous": "\f641", - "gender-female": "\f642", - "gender-male": "\f643", - "gender-trans": "\f644", - "headset-vr": "\f645", - "info-lg": "\f646", - "mastodon": "\f647", - "messenger": "\f648", - "piggy-bank-fill": "\f649", - "piggy-bank": "\f64a", - "pin-map-fill": "\f64b", - "pin-map": "\f64c", - "plus-lg": "\f64d", - "question-lg": "\f64e", - "recycle": "\f64f", - "reddit": "\f650", - "safe-fill": "\f651", - "safe2-fill": "\f652", - "safe2": "\f653", - "sd-card-fill": "\f654", - "sd-card": "\f655", - "skype": "\f656", - "slash-lg": "\f657", - "translate": "\f658", - "x-lg": "\f659", - "safe": "\f65a", - "apple": "\f65b", - "microsoft": "\f65d", - "windows": "\f65e", - "behance": "\f65c", - "dribbble": "\f65f", - "line": "\f660", - "medium": "\f661", - "paypal": "\f662", - "pinterest": "\f663", - "signal": "\f664", - "snapchat": "\f665", - "spotify": "\f666", - "stack-overflow": "\f667", - "strava": "\f668", - "wordpress": "\f669", - "vimeo": "\f66a", - "activity": "\f66b", - "easel2-fill": "\f66c", - "easel2": "\f66d", - "easel3-fill": "\f66e", - "easel3": "\f66f", - "fan": "\f670", - "fingerprint": "\f671", - "graph-down-arrow": "\f672", - "graph-up-arrow": "\f673", - "hypnotize": "\f674", - "magic": "\f675", - "person-rolodex": "\f676", - "person-video": "\f677", - "person-video2": "\f678", - "person-video3": "\f679", - "person-workspace": "\f67a", - "radioactive": "\f67b", - "webcam-fill": "\f67c", - "webcam": "\f67d", - "yin-yang": "\f67e", - "bandaid-fill": "\f680", - "bandaid": "\f681", - "bluetooth": "\f682", - "body-text": "\f683", - "boombox": "\f684", - "boxes": "\f685", - "dpad-fill": "\f686", - "dpad": "\f687", - "ear-fill": "\f688", - "ear": "\f689", - "envelope-check-fill": "\f68b", - "envelope-check": "\f68c", - "envelope-dash-fill": "\f68e", - "envelope-dash": "\f68f", - "envelope-exclamation-fill": "\f691", - "envelope-exclamation": "\f692", - "envelope-plus-fill": "\f693", - "envelope-plus": "\f694", - "envelope-slash-fill": "\f696", - "envelope-slash": "\f697", - "envelope-x-fill": "\f699", - "envelope-x": "\f69a", - "explicit-fill": "\f69b", - "explicit": "\f69c", - "git": "\f69d", - "infinity": "\f69e", - "list-columns-reverse": "\f69f", - "list-columns": "\f6a0", - "meta": "\f6a1", - "nintendo-switch": "\f6a4", - "pc-display-horizontal": "\f6a5", - "pc-display": "\f6a6", - "pc-horizontal": "\f6a7", - "pc": "\f6a8", - "playstation": "\f6a9", - "plus-slash-minus": "\f6aa", - "projector-fill": "\f6ab", - "projector": "\f6ac", - "qr-code-scan": "\f6ad", - "qr-code": "\f6ae", - "quora": "\f6af", - "quote": "\f6b0", - "robot": "\f6b1", - "send-check-fill": "\f6b2", - "send-check": "\f6b3", - "send-dash-fill": "\f6b4", - "send-dash": "\f6b5", - "send-exclamation-fill": "\f6b7", - "send-exclamation": "\f6b8", - "send-fill": "\f6b9", - "send-plus-fill": "\f6ba", - "send-plus": "\f6bb", - "send-slash-fill": "\f6bc", - "send-slash": "\f6bd", - "send-x-fill": "\f6be", - "send-x": "\f6bf", - "send": "\f6c0", - "steam": "\f6c1", - "terminal-dash": "\f6c3", - "terminal-plus": "\f6c4", - "terminal-split": "\f6c5", - "ticket-detailed-fill": "\f6c6", - "ticket-detailed": "\f6c7", - "ticket-fill": "\f6c8", - "ticket-perforated-fill": "\f6c9", - "ticket-perforated": "\f6ca", - "ticket": "\f6cb", - "tiktok": "\f6cc", - "window-dash": "\f6cd", - "window-desktop": "\f6ce", - "window-fullscreen": "\f6cf", - "window-plus": "\f6d0", - "window-split": "\f6d1", - "window-stack": "\f6d2", - "window-x": "\f6d3", - "xbox": "\f6d4", - "ethernet": "\f6d5", - "hdmi-fill": "\f6d6", - "hdmi": "\f6d7", - "usb-c-fill": "\f6d8", - "usb-c": "\f6d9", - "usb-fill": "\f6da", - "usb-plug-fill": "\f6db", - "usb-plug": "\f6dc", - "usb-symbol": "\f6dd", - "usb": "\f6de", - "boombox-fill": "\f6df", - "displayport": "\f6e1", - "gpu-card": "\f6e2", - "memory": "\f6e3", - "modem-fill": "\f6e4", - "modem": "\f6e5", - "motherboard-fill": "\f6e6", - "motherboard": "\f6e7", - "optical-audio-fill": "\f6e8", - "optical-audio": "\f6e9", - "pci-card": "\f6ea", - "router-fill": "\f6eb", - "router": "\f6ec", - "thunderbolt-fill": "\f6ef", - "thunderbolt": "\f6f0", - "usb-drive-fill": "\f6f1", - "usb-drive": "\f6f2", - "usb-micro-fill": "\f6f3", - "usb-micro": "\f6f4", - "usb-mini-fill": "\f6f5", - "usb-mini": "\f6f6", - "cloud-haze2": "\f6f7", - "device-hdd-fill": "\f6f8", - "device-hdd": "\f6f9", - "device-ssd-fill": "\f6fa", - "device-ssd": "\f6fb", - "displayport-fill": "\f6fc", - "mortarboard-fill": "\f6fd", - "mortarboard": "\f6fe", - "terminal-x": "\f6ff", - "arrow-through-heart-fill": "\f700", - "arrow-through-heart": "\f701", - "badge-sd-fill": "\f702", - "badge-sd": "\f703", - "bag-heart-fill": "\f704", - "bag-heart": "\f705", - "balloon-fill": "\f706", - "balloon-heart-fill": "\f707", - "balloon-heart": "\f708", - "balloon": "\f709", - "box2-fill": "\f70a", - "box2-heart-fill": "\f70b", - "box2-heart": "\f70c", - "box2": "\f70d", - "braces-asterisk": "\f70e", - "calendar-heart-fill": "\f70f", - "calendar-heart": "\f710", - "calendar2-heart-fill": "\f711", - "calendar2-heart": "\f712", - "chat-heart-fill": "\f713", - "chat-heart": "\f714", - "chat-left-heart-fill": "\f715", - "chat-left-heart": "\f716", - "chat-right-heart-fill": "\f717", - "chat-right-heart": "\f718", - "chat-square-heart-fill": "\f719", - "chat-square-heart": "\f71a", - "clipboard-check-fill": "\f71b", - "clipboard-data-fill": "\f71c", - "clipboard-fill": "\f71d", - "clipboard-heart-fill": "\f71e", - "clipboard-heart": "\f71f", - "clipboard-minus-fill": "\f720", - "clipboard-plus-fill": "\f721", - "clipboard-pulse": "\f722", - "clipboard-x-fill": "\f723", - "clipboard2-check-fill": "\f724", - "clipboard2-check": "\f725", - "clipboard2-data-fill": "\f726", - "clipboard2-data": "\f727", - "clipboard2-fill": "\f728", - "clipboard2-heart-fill": "\f729", - "clipboard2-heart": "\f72a", - "clipboard2-minus-fill": "\f72b", - "clipboard2-minus": "\f72c", - "clipboard2-plus-fill": "\f72d", - "clipboard2-plus": "\f72e", - "clipboard2-pulse-fill": "\f72f", - "clipboard2-pulse": "\f730", - "clipboard2-x-fill": "\f731", - "clipboard2-x": "\f732", - "clipboard2": "\f733", - "emoji-kiss-fill": "\f734", - "emoji-kiss": "\f735", - "envelope-heart-fill": "\f736", - "envelope-heart": "\f737", - "envelope-open-heart-fill": "\f738", - "envelope-open-heart": "\f739", - "envelope-paper-fill": "\f73a", - "envelope-paper-heart-fill": "\f73b", - "envelope-paper-heart": "\f73c", - "envelope-paper": "\f73d", - "filetype-aac": "\f73e", - "filetype-ai": "\f73f", - "filetype-bmp": "\f740", - "filetype-cs": "\f741", - "filetype-css": "\f742", - "filetype-csv": "\f743", - "filetype-doc": "\f744", - "filetype-docx": "\f745", - "filetype-exe": "\f746", - "filetype-gif": "\f747", - "filetype-heic": "\f748", - "filetype-html": "\f749", - "filetype-java": "\f74a", - "filetype-jpg": "\f74b", - "filetype-js": "\f74c", - "filetype-jsx": "\f74d", - "filetype-key": "\f74e", - "filetype-m4p": "\f74f", - "filetype-md": "\f750", - "filetype-mdx": "\f751", - "filetype-mov": "\f752", - "filetype-mp3": "\f753", - "filetype-mp4": "\f754", - "filetype-otf": "\f755", - "filetype-pdf": "\f756", - "filetype-php": "\f757", - "filetype-png": "\f758", - "filetype-ppt": "\f75a", - "filetype-psd": "\f75b", - "filetype-py": "\f75c", - "filetype-raw": "\f75d", - "filetype-rb": "\f75e", - "filetype-sass": "\f75f", - "filetype-scss": "\f760", - "filetype-sh": "\f761", - "filetype-svg": "\f762", - "filetype-tiff": "\f763", - "filetype-tsx": "\f764", - "filetype-ttf": "\f765", - "filetype-txt": "\f766", - "filetype-wav": "\f767", - "filetype-woff": "\f768", - "filetype-xls": "\f76a", - "filetype-xml": "\f76b", - "filetype-yml": "\f76c", - "heart-arrow": "\f76d", - "heart-pulse-fill": "\f76e", - "heart-pulse": "\f76f", - "heartbreak-fill": "\f770", - "heartbreak": "\f771", - "hearts": "\f772", - "hospital-fill": "\f773", - "hospital": "\f774", - "house-heart-fill": "\f775", - "house-heart": "\f776", - "incognito": "\f777", - "magnet-fill": "\f778", - "magnet": "\f779", - "person-heart": "\f77a", - "person-hearts": "\f77b", - "phone-flip": "\f77c", - "plugin": "\f77d", - "postage-fill": "\f77e", - "postage-heart-fill": "\f77f", - "postage-heart": "\f780", - "postage": "\f781", - "postcard-fill": "\f782", - "postcard-heart-fill": "\f783", - "postcard-heart": "\f784", - "postcard": "\f785", - "search-heart-fill": "\f786", - "search-heart": "\f787", - "sliders2-vertical": "\f788", - "sliders2": "\f789", - "trash3-fill": "\f78a", - "trash3": "\f78b", - "valentine": "\f78c", - "valentine2": "\f78d", - "wrench-adjustable-circle-fill": "\f78e", - "wrench-adjustable-circle": "\f78f", - "wrench-adjustable": "\f790", - "filetype-json": "\f791", - "filetype-pptx": "\f792", - "filetype-xlsx": "\f793", - "1-circle-fill": "\f796", - "1-circle": "\f797", - "1-square-fill": "\f798", - "1-square": "\f799", - "2-circle-fill": "\f79c", - "2-circle": "\f79d", - "2-square-fill": "\f79e", - "2-square": "\f79f", - "3-circle-fill": "\f7a2", - "3-circle": "\f7a3", - "3-square-fill": "\f7a4", - "3-square": "\f7a5", - "4-circle-fill": "\f7a8", - "4-circle": "\f7a9", - "4-square-fill": "\f7aa", - "4-square": "\f7ab", - "5-circle-fill": "\f7ae", - "5-circle": "\f7af", - "5-square-fill": "\f7b0", - "5-square": "\f7b1", - "6-circle-fill": "\f7b4", - "6-circle": "\f7b5", - "6-square-fill": "\f7b6", - "6-square": "\f7b7", - "7-circle-fill": "\f7ba", - "7-circle": "\f7bb", - "7-square-fill": "\f7bc", - "7-square": "\f7bd", - "8-circle-fill": "\f7c0", - "8-circle": "\f7c1", - "8-square-fill": "\f7c2", - "8-square": "\f7c3", - "9-circle-fill": "\f7c6", - "9-circle": "\f7c7", - "9-square-fill": "\f7c8", - "9-square": "\f7c9", - "airplane-engines-fill": "\f7ca", - "airplane-engines": "\f7cb", - "airplane-fill": "\f7cc", - "airplane": "\f7cd", - "alexa": "\f7ce", - "alipay": "\f7cf", - "android": "\f7d0", - "android2": "\f7d1", - "box-fill": "\f7d2", - "box-seam-fill": "\f7d3", - "browser-chrome": "\f7d4", - "browser-edge": "\f7d5", - "browser-firefox": "\f7d6", - "browser-safari": "\f7d7", - "c-circle-fill": "\f7da", - "c-circle": "\f7db", - "c-square-fill": "\f7dc", - "c-square": "\f7dd", - "capsule-pill": "\f7de", - "capsule": "\f7df", - "car-front-fill": "\f7e0", - "car-front": "\f7e1", - "cassette-fill": "\f7e2", - "cassette": "\f7e3", - "cc-circle-fill": "\f7e6", - "cc-circle": "\f7e7", - "cc-square-fill": "\f7e8", - "cc-square": "\f7e9", - "cup-hot-fill": "\f7ea", - "cup-hot": "\f7eb", - "currency-rupee": "\f7ec", - "dropbox": "\f7ed", - "escape": "\f7ee", - "fast-forward-btn-fill": "\f7ef", - "fast-forward-btn": "\f7f0", - "fast-forward-circle-fill": "\f7f1", - "fast-forward-circle": "\f7f2", - "fast-forward-fill": "\f7f3", - "fast-forward": "\f7f4", - "filetype-sql": "\f7f5", - "fire": "\f7f6", - "google-play": "\f7f7", - "h-circle-fill": "\f7fa", - "h-circle": "\f7fb", - "h-square-fill": "\f7fc", - "h-square": "\f7fd", - "indent": "\f7fe", - "lungs-fill": "\f7ff", - "lungs": "\f800", - "microsoft-teams": "\f801", - "p-circle-fill": "\f804", - "p-circle": "\f805", - "p-square-fill": "\f806", - "p-square": "\f807", - "pass-fill": "\f808", - "pass": "\f809", - "prescription": "\f80a", - "prescription2": "\f80b", - "r-circle-fill": "\f80e", - "r-circle": "\f80f", - "r-square-fill": "\f810", - "r-square": "\f811", - "repeat-1": "\f812", - "repeat": "\f813", - "rewind-btn-fill": "\f814", - "rewind-btn": "\f815", - "rewind-circle-fill": "\f816", - "rewind-circle": "\f817", - "rewind-fill": "\f818", - "rewind": "\f819", - "train-freight-front-fill": "\f81a", - "train-freight-front": "\f81b", - "train-front-fill": "\f81c", - "train-front": "\f81d", - "train-lightrail-front-fill": "\f81e", - "train-lightrail-front": "\f81f", - "truck-front-fill": "\f820", - "truck-front": "\f821", - "ubuntu": "\f822", - "unindent": "\f823", - "unity": "\f824", - "universal-access-circle": "\f825", - "universal-access": "\f826", - "virus": "\f827", - "virus2": "\f828", - "wechat": "\f829", - "yelp": "\f82a", - "sign-stop-fill": "\f82b", - "sign-stop-lights-fill": "\f82c", - "sign-stop-lights": "\f82d", - "sign-stop": "\f82e", - "sign-turn-left-fill": "\f82f", - "sign-turn-left": "\f830", - "sign-turn-right-fill": "\f831", - "sign-turn-right": "\f832", - "sign-turn-slight-left-fill": "\f833", - "sign-turn-slight-left": "\f834", - "sign-turn-slight-right-fill": "\f835", - "sign-turn-slight-right": "\f836", - "sign-yield-fill": "\f837", - "sign-yield": "\f838", - "ev-station-fill": "\f839", - "ev-station": "\f83a", - "fuel-pump-diesel-fill": "\f83b", - "fuel-pump-diesel": "\f83c", - "fuel-pump-fill": "\f83d", - "fuel-pump": "\f83e", - "0-circle-fill": "\f83f", - "0-circle": "\f840", - "0-square-fill": "\f841", - "0-square": "\f842", - "rocket-fill": "\f843", - "rocket-takeoff-fill": "\f844", - "rocket-takeoff": "\f845", - "rocket": "\f846", - "stripe": "\f847", - "subscript": "\f848", - "superscript": "\f849", - "trello": "\f84a", - "envelope-at-fill": "\f84b", - "envelope-at": "\f84c", - "regex": "\f84d", - "text-wrap": "\f84e", - "sign-dead-end-fill": "\f84f", - "sign-dead-end": "\f850", - "sign-do-not-enter-fill": "\f851", - "sign-do-not-enter": "\f852", - "sign-intersection-fill": "\f853", - "sign-intersection-side-fill": "\f854", - "sign-intersection-side": "\f855", - "sign-intersection-t-fill": "\f856", - "sign-intersection-t": "\f857", - "sign-intersection-y-fill": "\f858", - "sign-intersection-y": "\f859", - "sign-intersection": "\f85a", - "sign-merge-left-fill": "\f85b", - "sign-merge-left": "\f85c", - "sign-merge-right-fill": "\f85d", - "sign-merge-right": "\f85e", - "sign-no-left-turn-fill": "\f85f", - "sign-no-left-turn": "\f860", - "sign-no-parking-fill": "\f861", - "sign-no-parking": "\f862", - "sign-no-right-turn-fill": "\f863", - "sign-no-right-turn": "\f864", - "sign-railroad-fill": "\f865", - "sign-railroad": "\f866", - "building-add": "\f867", - "building-check": "\f868", - "building-dash": "\f869", - "building-down": "\f86a", - "building-exclamation": "\f86b", - "building-fill-add": "\f86c", - "building-fill-check": "\f86d", - "building-fill-dash": "\f86e", - "building-fill-down": "\f86f", - "building-fill-exclamation": "\f870", - "building-fill-gear": "\f871", - "building-fill-lock": "\f872", - "building-fill-slash": "\f873", - "building-fill-up": "\f874", - "building-fill-x": "\f875", - "building-fill": "\f876", - "building-gear": "\f877", - "building-lock": "\f878", - "building-slash": "\f879", - "building-up": "\f87a", - "building-x": "\f87b", - "buildings-fill": "\f87c", - "buildings": "\f87d", - "bus-front-fill": "\f87e", - "bus-front": "\f87f", - "ev-front-fill": "\f880", - "ev-front": "\f881", - "globe-americas": "\f882", - "globe-asia-australia": "\f883", - "globe-central-south-asia": "\f884", - "globe-europe-africa": "\f885", - "house-add-fill": "\f886", - "house-add": "\f887", - "house-check-fill": "\f888", - "house-check": "\f889", - "house-dash-fill": "\f88a", - "house-dash": "\f88b", - "house-down-fill": "\f88c", - "house-down": "\f88d", - "house-exclamation-fill": "\f88e", - "house-exclamation": "\f88f", - "house-gear-fill": "\f890", - "house-gear": "\f891", - "house-lock-fill": "\f892", - "house-lock": "\f893", - "house-slash-fill": "\f894", - "house-slash": "\f895", - "house-up-fill": "\f896", - "house-up": "\f897", - "house-x-fill": "\f898", - "house-x": "\f899", - "person-add": "\f89a", - "person-down": "\f89b", - "person-exclamation": "\f89c", - "person-fill-add": "\f89d", - "person-fill-check": "\f89e", - "person-fill-dash": "\f89f", - "person-fill-down": "\f8a0", - "person-fill-exclamation": "\f8a1", - "person-fill-gear": "\f8a2", - "person-fill-lock": "\f8a3", - "person-fill-slash": "\f8a4", - "person-fill-up": "\f8a5", - "person-fill-x": "\f8a6", - "person-gear": "\f8a7", - "person-lock": "\f8a8", - "person-slash": "\f8a9", - "person-up": "\f8aa", - "scooter": "\f8ab", - "taxi-front-fill": "\f8ac", - "taxi-front": "\f8ad", - "amd": "\f8ae", - "database-add": "\f8af", - "database-check": "\f8b0", - "database-dash": "\f8b1", - "database-down": "\f8b2", - "database-exclamation": "\f8b3", - "database-fill-add": "\f8b4", - "database-fill-check": "\f8b5", - "database-fill-dash": "\f8b6", - "database-fill-down": "\f8b7", - "database-fill-exclamation": "\f8b8", - "database-fill-gear": "\f8b9", - "database-fill-lock": "\f8ba", - "database-fill-slash": "\f8bb", - "database-fill-up": "\f8bc", - "database-fill-x": "\f8bd", - "database-fill": "\f8be", - "database-gear": "\f8bf", - "database-lock": "\f8c0", - "database-slash": "\f8c1", - "database-up": "\f8c2", - "database-x": "\f8c3", - "database": "\f8c4", - "houses-fill": "\f8c5", - "houses": "\f8c6", - "nvidia": "\f8c7", - "person-vcard-fill": "\f8c8", - "person-vcard": "\f8c9", - "sina-weibo": "\f8ca", - "tencent-qq": "\f8cb", - "wikipedia": "\f8cc", - "alphabet-uppercase": "\f2a5", - "alphabet": "\f68a", - "amazon": "\f68d", - "arrows-collapse-vertical": "\f690", - "arrows-expand-vertical": "\f695", - "arrows-vertical": "\f698", - "arrows": "\f6a2", - "ban-fill": "\f6a3", - "ban": "\f6b6", - "bing": "\f6c2", - "cake": "\f6e0", - "cake2": "\f6ed", - "cookie": "\f6ee", - "copy": "\f759", - "crosshair": "\f769", - "crosshair2": "\f794", - "emoji-astonished-fill": "\f795", - "emoji-astonished": "\f79a", - "emoji-grimace-fill": "\f79b", - "emoji-grimace": "\f7a0", - "emoji-grin-fill": "\f7a1", - "emoji-grin": "\f7a6", - "emoji-surprise-fill": "\f7a7", - "emoji-surprise": "\f7ac", - "emoji-tear-fill": "\f7ad", - "emoji-tear": "\f7b2", - "envelope-arrow-down-fill": "\f7b3", - "envelope-arrow-down": "\f7b8", - "envelope-arrow-up-fill": "\f7b9", - "envelope-arrow-up": "\f7be", - "feather": "\f7bf", - "feather2": "\f7c4", - "floppy-fill": "\f7c5", - "floppy": "\f7d8", - "floppy2-fill": "\f7d9", - "floppy2": "\f7e4", - "gitlab": "\f7e5", - "highlighter": "\f7f8", - "marker-tip": "\f802", - "nvme-fill": "\f803", - "nvme": "\f80c", - "opencollective": "\f80d", - "pci-card-network": "\f8cd", - "pci-card-sound": "\f8ce", - "radar": "\f8cf", - "send-arrow-down-fill": "\f8d0", - "send-arrow-down": "\f8d1", - "send-arrow-up-fill": "\f8d2", - "send-arrow-up": "\f8d3", - "sim-slash-fill": "\f8d4", - "sim-slash": "\f8d5", - "sourceforge": "\f8d6", - "substack": "\f8d7", - "threads-fill": "\f8d8", - "threads": "\f8d9", - "transparency": "\f8da", - "twitter-x": "\f8db", - "type-h4": "\f8dc", - "type-h5": "\f8dd", - "type-h6": "\f8de", - "backpack-fill": "\f8df", - "backpack": "\f8e0", - "backpack2-fill": "\f8e1", - "backpack2": "\f8e2", - "backpack3-fill": "\f8e3", - "backpack3": "\f8e4", - "backpack4-fill": "\f8e5", - "backpack4": "\f8e6", - "brilliance": "\f8e7", - "cake-fill": "\f8e8", - "cake2-fill": "\f8e9", - "duffle-fill": "\f8ea", - "duffle": "\f8eb", - "exposure": "\f8ec", - "gender-neuter": "\f8ed", - "highlights": "\f8ee", - "luggage-fill": "\f8ef", - "luggage": "\f8f0", - "mailbox-flag": "\f8f1", - "mailbox2-flag": "\f8f2", - "noise-reduction": "\f8f3", - "passport-fill": "\f8f4", - "passport": "\f8f5", - "person-arms-up": "\f8f6", - "person-raised-hand": "\f8f7", - "person-standing-dress": "\f8f8", - "person-standing": "\f8f9", - "person-walking": "\f8fa", - "person-wheelchair": "\f8fb", - "shadows": "\f8fc", - "suitcase-fill": "\f8fd", - "suitcase-lg-fill": "\f8fe", - "suitcase-lg": "\f8ff", - "suitcase": "\f900", - "suitcase2-fill": "\f901", - "suitcase2": "\f902", - "vignette": "\f903", -); - -@each $icon, $codepoint in $bootstrap-icons-map { - .bi-#{$icon}::before { content: $codepoint; } -} diff --git a/styles/bulma/_index.scss b/styles/bulma/_index.scss deleted file mode 100644 index 83b4c0e..0000000 --- a/styles/bulma/_index.scss +++ /dev/null @@ -1,4 +0,0 @@ -@charset "utf-8"; - -/*! bulma.io v1.0.0 | MIT License | github.com/jgthms/bulma */ -@use "sass"; diff --git a/styles/bulma/sass/_index.scss b/styles/bulma/sass/_index.scss deleted file mode 100644 index 82310cb..0000000 --- a/styles/bulma/sass/_index.scss +++ /dev/null @@ -1,10 +0,0 @@ -@forward "utilities"; -@forward "themes"; -@forward "base"; -@forward "elements"; -@forward "form"; -@forward "components"; -@forward "grid"; -@forward "layout"; -@forward "base/skeleton"; -@forward "helpers"; diff --git a/styles/bulma/sass/base/_index.scss b/styles/bulma/sass/base/_index.scss deleted file mode 100644 index 4416b1f..0000000 --- a/styles/bulma/sass/base/_index.scss +++ /dev/null @@ -1,6 +0,0 @@ -/* Bulma Base */ -@charset "utf-8"; - -@forward "minireset"; -@forward "generic"; -@forward "animations"; diff --git a/styles/bulma/sass/base/animations.scss b/styles/bulma/sass/base/animations.scss deleted file mode 100644 index 667124c..0000000 --- a/styles/bulma/sass/base/animations.scss +++ /dev/null @@ -1,15 +0,0 @@ -@keyframes spinAround { - from { - transform: rotate(0deg); - } - - to { - transform: rotate(359deg); - } -} - -@keyframes pulsate { - 50% { - opacity: 0.5; - } -} diff --git a/styles/bulma/sass/base/generic.scss b/styles/bulma/sass/base/generic.scss deleted file mode 100644 index b7ee0cc..0000000 --- a/styles/bulma/sass/base/generic.scss +++ /dev/null @@ -1,239 +0,0 @@ -@use "../utilities/css-variables.scss" as cv; -@use "../utilities/mixins" as mx; - -$body-background-color: cv.getVar("scheme-main") !default; -$body-size: 1em !default; -$body-min-width: 300px !default; -$body-rendering: optimizeLegibility !default; -$body-family: cv.getVar("family-primary") !default; -$body-overflow-x: hidden !default; -$body-overflow-y: scroll !default; - -$body-color: cv.getVar("text") !default; -$body-font-size: 1em !default; -$body-weight: cv.getVar("weight-normal") !default; -$body-line-height: 1.5 !default; - -$code-family: cv.getVar("family-code") !default; -$code-padding: 0.25em 0.5em 0.25em !default; -$code-weight: normal !default; -$code-size: 0.875em !default; - -$small-font-size: 0.875em !default; - -$hr-background-color: cv.getVar("background") !default; -$hr-height: 2px !default; -$hr-margin: 1.5rem 0 !default; - -$strong-color: cv.getVar("text-strong") !default; -$strong-weight: cv.getVar("weight-semibold") !default; - -$pre-font-size: 0.875em !default; -$pre-padding: 1.25rem 1.5rem !default; -$pre-code-font-size: 1em !default; - -:root { - @include cv.register-vars( - ( - "body-background-color": #{$body-background-color}, - "body-size": #{$body-size}, - "body-min-width": #{$body-min-width}, - "body-rendering": #{$body-rendering}, - "body-family": #{$body-family}, - "body-overflow-x": #{$body-overflow-x}, - "body-overflow-y": #{$body-overflow-y}, - "body-color": #{$body-color}, - "body-font-size": #{$body-font-size}, - "body-weight": #{$body-weight}, - "body-line-height": #{$body-line-height}, - "code-family": #{$code-family}, - "code-padding": #{$code-padding}, - "code-weight": #{$code-weight}, - "code-size": #{$code-size}, - "small-font-size": #{$small-font-size}, - "hr-background-color": #{$hr-background-color}, - "hr-height": #{$hr-height}, - "hr-margin": #{$hr-margin}, - "strong-color": #{$strong-color}, - "strong-weight": #{$strong-weight}, - "pre-font-size": #{$pre-font-size}, - "pre-padding": #{$pre-padding}, - "pre-code-font-size": #{$pre-code-font-size}, - ) - ); -} - -html { - background-color: cv.getVar("body-background-color"); - font-size: cv.getVar("body-size"); - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - min-width: cv.getVar("body-min-width"); - overflow-x: cv.getVar("body-overflow-x"); - overflow-y: cv.getVar("body-overflow-y"); - text-rendering: cv.getVar("body-rendering"); - text-size-adjust: 100%; -} - -article, -aside, -figure, -footer, -header, -hgroup, -section { - display: block; -} - -body, -button, -input, -optgroup, -select, -textarea { - font-family: cv.getVar("body-family"); -} - -code, -pre { - -moz-osx-font-smoothing: auto; - -webkit-font-smoothing: auto; - font-family: cv.getVar("code-family"); -} - -body { - color: cv.getVar("body-color"); - font-size: cv.getVar("body-font-size"); - font-weight: cv.getVar("body-weight"); - line-height: cv.getVar("body-line-height"); -} - -// Inline - -a, -button { - cursor: pointer; - - &:focus-visible { - outline-color: hsl( - cv.getVar("focus-h"), - cv.getVar("focus-s"), - cv.getVar("focus-l") - ); - outline-offset: cv.getVar("focus-offset"); - outline-style: cv.getVar("focus-style"); - outline-width: cv.getVar("focus-width"); - - &:active { - outline-width: 1px; - } - } - - &:active { - outline-width: 1px; - } -} - -a { - color: cv.getVar("link-text"); - cursor: pointer; - text-decoration: none; - transition-duration: cv.getVar("duration"); - transition-property: background-color, border-color, color; - - strong { - color: currentColor; - } -} - -button { - @include mx.reset; - transition-duration: cv.getVar("duration"); - transition-property: background-color, border-color, color; -} - -code { - background-color: cv.getVar("code-background"); - border-radius: 0.5em; - color: cv.getVar("code"); - font-size: cv.getVar("code-size"); - font-weight: cv.getVar("code-weight"); - padding: cv.getVar("code-padding"); -} - -hr { - background-color: cv.getVar("hr-background-color"); - border: none; - display: block; - height: cv.getVar("hr-height"); - margin: cv.getVar("hr-margin"); -} - -img { - height: auto; - max-width: 100%; -} - -input[type="checkbox"], -input[type="radio"] { - vertical-align: baseline; -} - -small { - font-size: cv.getVar("small-font-size"); -} - -span { - font-style: inherit; - font-weight: inherit; -} - -strong { - color: cv.getVar("strong-color"); - font-weight: cv.getVar("strong-weight"); -} - -svg { - height: auto; - width: auto; -} - -// Block - -fieldset { - border: none; -} - -pre { - @include mx.overflow-touch; - - background-color: cv.getVar("pre-background"); - color: cv.getVar("pre"); - font-size: cv.getVar("pre-font-size"); - overflow-x: auto; - padding: cv.getVar("pre-padding"); - white-space: pre; - word-wrap: normal; - - code { - background-color: transparent; - color: currentColor; - font-size: cv.getVar("pre-code-font-size"); - padding: 0; - } -} - -table { - td, - th { - vertical-align: top; - - &:not([align]) { - text-align: inherit; - } - } - - th { - color: cv.getVar("text-strong"); - } -} diff --git a/styles/bulma/sass/base/minireset.scss b/styles/bulma/sass/base/minireset.scss deleted file mode 100644 index 5b09693..0000000 --- a/styles/bulma/sass/base/minireset.scss +++ /dev/null @@ -1,92 +0,0 @@ -/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */ -// Blocks -html, -body, -p, -ol, -ul, -li, -dl, -dt, -dd, -blockquote, -figure, -fieldset, -legend, -textarea, -pre, -iframe, -hr, -h1, -h2, -h3, -h4, -h5, -h6 { - margin: 0; - padding: 0; -} - -// Headings -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: 100%; - font-weight: normal; -} - -// List -ul { - list-style: none; -} - -// Form -button, -input, -select, -textarea { - margin: 0; -} - -// Box sizing -html { - box-sizing: border-box; -} - -* { - &, - &::before, - &::after { - box-sizing: inherit; - } -} - -// Media -img, -video { - height: auto; - max-width: 100%; -} - -// Iframe -iframe { - border: 0; -} - -// Table -table { - border-collapse: collapse; - border-spacing: 0; -} - -td, -th { - padding: 0; - - &:not([align]) { - text-align: inherit; - } -} diff --git a/styles/bulma/sass/base/skeleton.scss b/styles/bulma/sass/base/skeleton.scss deleted file mode 100644 index 792e2ce..0000000 --- a/styles/bulma/sass/base/skeleton.scss +++ /dev/null @@ -1,126 +0,0 @@ -@use "../utilities/css-variables" as cv; -@use "../utilities/initial-variables" as iv; -@use "../utilities/mixins" as mx; -@use "../utilities/extends"; - -$skeleton-background: cv.getVar("border") !default; -$skeleton-radius: cv.getVar("radius-small") !default; -$skeleton-block-min-height: 4.5em !default; -$skeleton-lines-gap: 0.75em !default; -$skeleton-line-height: 0.75em !default; - -:root { - @include cv.register-vars( - ( - "skeleton-background": #{$skeleton-background}, - "skeleton-radius": #{$skeleton-radius}, - "skeleton-block-min-height": #{$skeleton-block-min-height}, - "skeleton-lines-gap": #{$skeleton-lines-gap}, - "skeleton-line-height": #{$skeleton-line-height}, - ) - ); -} - -%skeleton-pulsation { - animation-duration: 2s; - animation-iteration-count: infinite; - animation-name: pulsate; - animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); - background-color: cv.getVar("skeleton-background"); - border-radius: cv.getVar("skeleton-radius"); - box-shadow: none; - pointer-events: none; -} - -.#{iv.$class-prefix}is-skeleton { - @extend %skeleton-pulsation; - color: transparent !important; - - em, - strong { - color: inherit; - } - - img { - visibility: hidden; - } - - &.#{iv.$class-prefix}checkbox { - input { - opacity: 0; - } - } - - &.#{iv.$class-prefix}delete { - border-radius: cv.getVar("radius-rounded"); - - &::before, - &::after { - display: none; - } - } -} - -input.#{iv.$class-prefix}is-skeleton, -textarea.#{iv.$class-prefix}is-skeleton { - resize: none; - - @include mx.placeholder { - color: transparent !important; - } -} - -.#{iv.$class-prefix}has-skeleton { - color: transparent !important; - position: relative; - - &::after { - @extend %skeleton-pulsation; - content: ""; - display: block; - height: 100%; - left: 0; - max-width: 100%; - min-width: 10%; - position: absolute; - top: 0; - width: 7em; - } -} - -.#{iv.$class-prefix}skeleton-block { - @extend %block; - @extend %skeleton-pulsation; - color: transparent !important; - min-height: cv.getVar("skeleton-block-min-height"); -} - -.#{iv.$class-prefix}skeleton-lines { - color: transparent !important; - display: flex; - flex-direction: column; - gap: cv.getVar("skeleton-lines-gap"); - position: relative; - - > div { - @extend %skeleton-pulsation; - height: cv.getVar("skeleton-line-height"); - - &:last-child { - min-width: 4em; - width: 30%; - } - } -} - -.#{iv.$class-prefix}skeleton { - background-image: linear-gradient( - 0deg, - transparent 0%, - transparent 50%, - #f60 50%, - #f60 100% - ); - background-position: top left; - background-size: 1.5em; -} diff --git a/styles/bulma/sass/components/_index.scss b/styles/bulma/sass/components/_index.scss deleted file mode 100644 index 2decd67..0000000 --- a/styles/bulma/sass/components/_index.scss +++ /dev/null @@ -1,13 +0,0 @@ -/* Bulma Components */ -@charset "utf-8"; - -@forward "breadcrumb"; -@forward "card"; -@forward "dropdown"; -@forward "menu"; -@forward "message"; -@forward "modal"; -@forward "navbar"; -@forward "pagination"; -@forward "panel"; -@forward "tabs"; diff --git a/styles/bulma/sass/components/breadcrumb.scss b/styles/bulma/sass/components/breadcrumb.scss deleted file mode 100644 index bd261fb..0000000 --- a/styles/bulma/sass/components/breadcrumb.scss +++ /dev/null @@ -1,139 +0,0 @@ -@use "../utilities/css-variables" as cv; -@use "../utilities/initial-variables" as iv; -@use "../utilities/extends"; -@use "../utilities/mixins"; - -$breadcrumb-item-color: cv.getVar("link-text") !default; -$breadcrumb-item-hover-color: cv.getVar("link-text-hover") !default; -$breadcrumb-item-active-color: cv.getVar("link-text-active") !default; - -$breadcrumb-item-padding-vertical: 0 !default; -$breadcrumb-item-padding-horizontal: 0.75em !default; - -$breadcrumb-item-separator-color: cv.getVar("border") !default; - -.#{iv.$class-prefix}breadcrumb { - @include cv.register-vars( - ( - "breadcrumb-item-color": #{$breadcrumb-item-color}, - "breadcrumb-item-hover-color": #{$breadcrumb-item-hover-color}, - "breadcrumb-item-active-color": #{$breadcrumb-item-active-color}, - "breadcrumb-item-padding-vertical": #{$breadcrumb-item-padding-vertical}, - "breadcrumb-item-padding-horizontal": #{$breadcrumb-item-padding-horizontal}, - "breadcrumb-item-separator-color": #{$breadcrumb-item-separator-color}, - ) - ); -} - -.#{iv.$class-prefix}breadcrumb { - @extend %block; - @extend %unselectable; - font-size: cv.getVar("size-normal"); - white-space: nowrap; - - a { - align-items: center; - color: cv.getVar("breadcrumb-item-color"); - display: flex; - justify-content: center; - padding: cv.getVar("breadcrumb-item-padding-vertical") - cv.getVar("breadcrumb-item-padding-horizontal"); - - &:hover { - color: cv.getVar("breadcrumb-item-hover-color"); - } - } - - li { - align-items: center; - display: flex; - - &:first-child a { - padding-inline-start: 0; - } - - &.#{iv.$class-prefix}is-active { - a { - color: cv.getVar("breadcrumb-item-active-color"); - cursor: default; - pointer-events: none; - } - } - - & + li::before { - color: cv.getVar("breadcrumb-item-separator-color"); - content: "/"; - } - } - - ul, - ol { - align-items: flex-start; - display: flex; - flex-wrap: wrap; - justify-content: flex-start; - } - - .#{iv.$class-prefix}icon { - &:first-child { - margin-inline-end: 0.5em; - } - - &:last-child { - margin-inline-start: 0.5em; - } - } - - // Alignment - &.#{iv.$class-prefix}is-centered { - ol, - ul { - justify-content: center; - } - } - - &.#{iv.$class-prefix}is-right { - ol, - ul { - justify-content: flex-end; - } - } - - // Sizes - &.#{iv.$class-prefix}is-small { - font-size: cv.getVar("size-small"); - } - - &.#{iv.$class-prefix}is-medium { - font-size: cv.getVar("size-medium"); - } - - &.#{iv.$class-prefix}is-large { - font-size: cv.getVar("size-large"); - } - - // Styles - &.#{iv.$class-prefix}has-arrow-separator { - li + li::before { - content: "→"; - } - } - - &.#{iv.$class-prefix}has-bullet-separator { - li + li::before { - content: "•"; - } - } - - &.#{iv.$class-prefix}has-dot-separator { - li + li::before { - content: "·"; - } - } - - &.#{iv.$class-prefix}has-succeeds-separator { - li + li::before { - content: "≻"; - } - } -} diff --git a/styles/bulma/sass/components/card.scss b/styles/bulma/sass/components/card.scss deleted file mode 100644 index 0b3b2c5..0000000 --- a/styles/bulma/sass/components/card.scss +++ /dev/null @@ -1,162 +0,0 @@ -@use "../utilities/css-variables" as cv; -@use "../utilities/initial-variables" as iv; -@use "../utilities/extends"; -@use "../utilities/mixins" as mx; - -$card-color: cv.getVar("text") !default; -$card-background-color: cv.getVar("scheme-main") !default; -$card-shadow: cv.getVar("shadow") !default; -$card-radius: 0.75rem !default; - -$card-header-background-color: transparent !default; -$card-header-color: cv.getVar("text-strong") !default; -$card-header-padding: 0.75rem 1rem !default; -$card-header-shadow: 0 0.125em 0.25em - hsla( - #{cv.getVar("scheme-h")}, - #{cv.getVar("scheme-s")}, - #{cv.getVar("scheme-invert-l")}, - 0.1 - ) !default; -$card-header-weight: cv.getVar("weight-bold") !default; - -$card-content-background-color: transparent !default; -$card-content-padding: 1.5rem !default; - -$card-footer-background-color: transparent !default; -$card-footer-border-top: 1px solid cv.getVar("border-weak") !default; -$card-footer-padding: 0.75rem !default; - -$card-media-margin: cv.getVar("block-spacing") !default; - -.#{iv.$class-prefix}card { - @include cv.register-vars( - ( - "card-color": #{$card-color}, - "card-background-color": #{$card-background-color}, - "card-shadow": #{$card-shadow}, - "card-radius": #{$card-radius}, - "card-header-background-color": #{$card-header-background-color}, - "card-header-color": #{$card-header-color}, - "card-header-padding": #{$card-header-padding}, - "card-header-shadow": #{$card-header-shadow}, - "card-header-weight": #{$card-header-weight}, - "card-content-background-color": #{$card-content-background-color}, - "card-content-padding": #{$card-content-padding}, - "card-footer-background-color": #{$card-footer-background-color}, - "card-footer-border-top": #{$card-footer-border-top}, - "card-footer-padding": #{$card-footer-padding}, - "card-media-margin": #{$card-media-margin}, - ) - ); -} - -.#{iv.$class-prefix}card { - @extend %block; - background-color: cv.getVar("card-background-color"); - border-radius: cv.getVar("card-radius"); - box-shadow: cv.getVar("card-shadow"); - color: cv.getVar("card-color"); - max-width: 100%; - position: relative; -} - -%card-item { - &:first-child { - border-start-start-radius: cv.getVar("card-radius"); - border-start-end-radius: cv.getVar("card-radius"); - } - - &:last-child { - border-end-start-radius: cv.getVar("card-radius"); - border-end-end-radius: cv.getVar("card-radius"); - } -} - -.#{iv.$class-prefix}card-header { - @extend %card-item; - background-color: cv.getVar("card-header-background-color"); - align-items: stretch; - box-shadow: cv.getVar("card-header-shadow"); - display: flex; -} - -.#{iv.$class-prefix}card-header-title { - align-items: center; - color: cv.getVar("card-header-color"); - display: flex; - flex-grow: 1; - font-weight: cv.getVar("card-header-weight"); - padding: cv.getVar("card-header-padding"); - - &.#{iv.$class-prefix}is-centered { - justify-content: center; - } -} - -.#{iv.$class-prefix}card-header-icon { - @include mx.reset; - - align-items: center; - cursor: pointer; - display: flex; - justify-content: center; - padding: cv.getVar("card-header-padding"); -} - -.#{iv.$class-prefix}card-image { - display: block; - position: relative; - - &:first-child { - img { - border-start-start-radius: cv.getVar("card-radius"); - border-start-end-radius: cv.getVar("card-radius"); - } - } - - &:last-child { - img { - border-end-start-radius: cv.getVar("card-radius"); - border-end-end-radius: cv.getVar("card-radius"); - } - } -} - -.#{iv.$class-prefix}card-content { - @extend %card-item; - - background-color: cv.getVar("card-content-background-color"); - padding: cv.getVar("card-content-padding"); -} - -.#{iv.$class-prefix}card-footer { - @extend %card-item; - - background-color: cv.getVar("card-footer-background-color"); - border-top: cv.getVar("card-footer-border-top"); - align-items: stretch; - display: flex; -} - -.#{iv.$class-prefix}card-footer-item { - align-items: center; - display: flex; - flex-basis: 0; - flex-grow: 1; - flex-shrink: 0; - justify-content: center; - padding: cv.getVar("card-footer-padding"); - - &:not(:last-child) { - border-inline-end: cv.getVar("card-footer-border-top"); - } -} - -// Combinations - -.#{iv.$class-prefix}card { - .#{iv.$class-prefix}media:not(:last-child) { - margin-bottom: cv.getVar("card-media-margin"); - } -} diff --git a/styles/bulma/sass/components/dropdown.scss b/styles/bulma/sass/components/dropdown.scss deleted file mode 100644 index 415728b..0000000 --- a/styles/bulma/sass/components/dropdown.scss +++ /dev/null @@ -1,188 +0,0 @@ -@use "../utilities/css-variables" as cv; -@use "../utilities/initial-variables" as iv; -@use "../utilities/extends"; -@use "../utilities/mixins" as mx; - -$dropdown-menu-min-width: 12rem !default; - -$dropdown-content-background-color: cv.getVar("scheme-main") !default; -$dropdown-content-offset: 0.25rem !default; -$dropdown-content-padding-bottom: 0.5rem !default; -$dropdown-content-padding-top: 0.5rem !default; -$dropdown-content-radius: cv.getVar("radius") !default; -$dropdown-content-shadow: cv.getVar("shadow") !default; -$dropdown-content-z: 20 !default; - -$dropdown-item-h: cv.getVar("scheme-h"); -$dropdown-item-s: cv.getVar("scheme-s"); -$dropdown-item-l: cv.getVar("scheme-main-l"); -$dropdown-item-background-l: cv.getVar("scheme-main-l"); -$dropdown-item-background-l-delta: 0%; -$dropdown-item-hover-background-l-delta: cv.getVar("hover-background-l-delta"); -$dropdown-item-active-background-l-delta: cv.getVar( - "active-background-l-delta" -); -$dropdown-item-color-l: cv.getVar("text-strong-l"); -$dropdown-item-selected-h: cv.getVar("link-h"); -$dropdown-item-selected-s: cv.getVar("link-s"); -$dropdown-item-selected-l: cv.getVar("link-l"); -$dropdown-item-selected-background-l: cv.getVar("link-l"); -$dropdown-item-selected-color-l: cv.getVar("link-invert-l"); - -$dropdown-divider-background-color: cv.getVar("border-weak") !default; - -.#{iv.$class-prefix}dropdown { - // prettier-ignore-start - @include cv.register-vars( - ( - "dropdown-menu-min-width": #{$dropdown-menu-min-width}, - "dropdown-content-background-color": #{$dropdown-content-background-color}, - "dropdown-content-offset": #{$dropdown-content-offset}, - "dropdown-content-padding-bottom": #{$dropdown-content-padding-bottom}, - "dropdown-content-padding-top": #{$dropdown-content-padding-top}, - "dropdown-content-radius": #{$dropdown-content-radius}, - "dropdown-content-shadow": #{$dropdown-content-shadow}, - "dropdown-content-z": #{$dropdown-content-z}, - "dropdown-item-h": #{$dropdown-item-h}, - "dropdown-item-s": #{$dropdown-item-s}, - "dropdown-item-l": #{$dropdown-item-l}, - "dropdown-item-background-l": #{$dropdown-item-background-l}, - "dropdown-item-background-l-delta": #{$dropdown-item-background-l-delta}, - "dropdown-item-hover-background-l-delta": #{$dropdown-item-hover-background-l-delta}, - "dropdown-item-active-background-l-delta": #{$dropdown-item-active-background-l-delta}, - "dropdown-item-color-l": #{$dropdown-item-color-l}, - "dropdown-item-selected-h": #{$dropdown-item-selected-h}, - "dropdown-item-selected-s": #{$dropdown-item-selected-s}, - "dropdown-item-selected-l": #{$dropdown-item-selected-l}, - "dropdown-item-selected-background-l": #{$dropdown-item-selected-background-l}, - "dropdown-item-selected-color-l": #{$dropdown-item-selected-color-l}, - "dropdown-divider-background-color": #{$dropdown-divider-background-color}, - ) - ); - // prettier-ignore-end -} - -.#{iv.$class-prefix}dropdown { - display: inline-flex; - position: relative; - vertical-align: top; - - &.#{iv.$class-prefix}is-active, - &.#{iv.$class-prefix}is-hoverable:hover { - .#{iv.$class-prefix}dropdown-menu { - display: block; - } - } - - &.#{iv.$class-prefix}is-right { - .#{iv.$class-prefix}dropdown-menu { - left: auto; - right: 0; - } - } - - &.#{iv.$class-prefix}is-up { - .#{iv.$class-prefix}dropdown-menu { - bottom: 100%; - padding-bottom: cv.getVar("dropdown-content-offset"); - padding-top: initial; - top: auto; - } - } -} - -.#{iv.$class-prefix}dropdown-menu { - display: none; - @include mx.ltr-position(0, false); - min-width: cv.getVar("dropdown-menu-min-width"); - padding-top: cv.getVar("dropdown-content-offset"); - position: absolute; - top: 100%; - z-index: cv.getVar("dropdown-content-z"); -} - -.#{iv.$class-prefix}dropdown-content { - background-color: cv.getVar("dropdown-content-background-color"); - border-radius: cv.getVar("dropdown-content-radius"); - box-shadow: cv.getVar("dropdown-content-shadow"); - padding-bottom: cv.getVar("dropdown-content-padding-bottom"); - padding-top: cv.getVar("dropdown-content-padding-top"); -} - -.#{iv.$class-prefix}dropdown-item { - color: hsl( - #{cv.getVar("dropdown-item-h")}, - #{cv.getVar("dropdown-item-s")}, - #{cv.getVar("dropdown-item-color-l")} - ); - display: block; - font-size: 0.875rem; - line-height: 1.5; - padding: 0.375rem 1rem; -} - -a.#{iv.$class-prefix}dropdown-item, -button.#{iv.$class-prefix}dropdown-item { - background-color: hsl( - #{cv.getVar("dropdown-item-h")}, - #{cv.getVar("dropdown-item-s")}, - calc( - #{cv.getVar("dropdown-item-background-l")} + #{cv.getVar( - "dropdown-item-background-l-delta" - )} - ) - ); - padding-inline-end: 3rem; - text-align: inherit; - white-space: nowrap; - width: 100%; - - &:hover { - @include cv.register-vars( - ( - "dropdown-item-background-l-delta": #{cv.getVar( - "dropdown-item-hover-background-l-delta" - )}, - "dropdown-item-border-l-delta": #{cv.getVar( - "dropdown-item-hover-border-l-delta" - )}, - ) - ); - } - - &:active { - @include cv.register-vars( - ( - "dropdown-item-background-l-delta": #{cv.getVar( - "dropdown-item-active-background-l-delta" - )}, - "dropdown-item-border-l-delta": #{cv.getVar( - "dropdown-item-active-border-l-delta" - )}, - ) - ); - } - - &.#{iv.$class-prefix}is-active, - &.#{iv.$class-prefix}is-selected { - @include cv.register-vars( - ( - "dropdown-item-h": #{cv.getVar("dropdown-item-selected-h")}, - "dropdown-item-s": #{cv.getVar("dropdown-item-selected-s")}, - "dropdown-item-l": #{cv.getVar("dropdown-item-selected-l")}, - "dropdown-item-background-l": #{cv.getVar( - "dropdown-item-selected-background-l" - )}, - "dropdown-item-color-l": #{cv.getVar("dropdown-item-selected-color-l")}, - ) - ); - } -} - -.#{iv.$class-prefix}dropdown-divider { - background-color: cv.getVar("dropdown-divider-background-color"); - border: none; - display: block; - height: 1px; - margin: 0.5rem 0; -} diff --git a/styles/bulma/sass/components/menu.scss b/styles/bulma/sass/components/menu.scss deleted file mode 100644 index 2bee7d5..0000000 --- a/styles/bulma/sass/components/menu.scss +++ /dev/null @@ -1,165 +0,0 @@ -@use "../utilities/css-variables" as cv; -@use "../utilities/initial-variables" as iv; -@use "../utilities/extends"; -@use "../utilities/mixins" as mx; - -$menu-item-h: cv.getVar("scheme-h"); -$menu-item-s: cv.getVar("scheme-s"); -$menu-item-l: cv.getVar("scheme-main-l"); -$menu-item-background-l: cv.getVar("scheme-main-l"); -$menu-item-background-l-delta: 0%; -$menu-item-hover-background-l-delta: cv.getVar("hover-background-l-delta"); -$menu-item-active-background-l-delta: cv.getVar("active-background-l-delta"); -$menu-item-color-l: cv.getVar("text-l"); -$menu-item-radius: cv.getVar("radius-small") !default; -$menu-item-selected-h: cv.getVar("link-h"); -$menu-item-selected-s: cv.getVar("link-s"); -$menu-item-selected-l: cv.getVar("link-l"); -$menu-item-selected-background-l: cv.getVar("link-l"); -$menu-item-selected-color-l: cv.getVar("link-invert-l"); - -$menu-list-border-left: 1px solid cv.getVar("border") !default; -$menu-list-line-height: 1.25 !default; -$menu-list-link-padding: 0.5em 0.75em !default; -$menu-nested-list-margin: 0.75em !default; -$menu-nested-list-padding-left: 0.75em !default; - -$menu-label-color: cv.getVar("text-weak") !default; -$menu-label-font-size: 0.75em !default; -$menu-label-letter-spacing: 0.1em !default; -$menu-label-spacing: 1em !default; - -.#{iv.$class-prefix}menu { - @include cv.register-vars( - ( - "menu-item-h": #{$menu-item-h}, - "menu-item-s": #{$menu-item-s}, - "menu-item-l": #{$menu-item-l}, - "menu-item-background-l": #{$menu-item-background-l}, - "menu-item-background-l-delta": #{$menu-item-background-l-delta}, - "menu-item-hover-background-l-delta": #{$menu-item-hover-background-l-delta}, - "menu-item-active-background-l-delta": #{$menu-item-active-background-l-delta}, - "menu-item-color-l": #{$menu-item-color-l}, - "menu-item-radius": #{$menu-item-radius}, - "menu-item-selected-h": #{$menu-item-selected-h}, - "menu-item-selected-s": #{$menu-item-selected-s}, - "menu-item-selected-l": #{$menu-item-selected-l}, - "menu-item-selected-background-l": #{$menu-item-selected-background-l}, - "menu-item-selected-color-l": #{$menu-item-selected-color-l}, - "menu-list-border-left": #{$menu-list-border-left}, - "menu-list-line-height": #{$menu-list-line-height}, - "menu-list-link-padding": #{$menu-list-link-padding}, - "menu-nested-list-margin": #{$menu-nested-list-margin}, - "menu-nested-list-padding-left": #{$menu-nested-list-padding-left}, - "menu-label-color": #{$menu-label-color}, - "menu-label-font-size": #{$menu-label-font-size}, - "menu-label-letter-spacing": #{$menu-label-letter-spacing}, - "menu-label-spacing": #{$menu-label-spacing}, - ) - ); -} - -.#{iv.$class-prefix}menu { - font-size: cv.getVar("size-normal"); - - // Sizes - &.#{iv.$class-prefix}is-small { - font-size: cv.getVar("size-small"); - } - - &.#{iv.$class-prefix}is-medium { - font-size: cv.getVar("size-medium"); - } - - &.#{iv.$class-prefix}is-large { - font-size: cv.getVar("size-large"); - } -} - -.#{iv.$class-prefix}menu-list { - line-height: cv.getVar("menu-list-line-height"); - - a, - button, - .#{iv.$class-prefix}menu-item { - @extend %reset; - background-color: hsl( - #{cv.getVar("menu-item-h")}, - #{cv.getVar("menu-item-s")}, - calc( - #{cv.getVar("menu-item-background-l")} + #{cv.getVar( - "menu-item-background-l-delta" - )} - ) - ); - border-radius: cv.getVar("menu-item-radius"); - color: hsl( - #{cv.getVar("menu-item-h")}, - #{cv.getVar("menu-item-s")}, - #{cv.getVar("menu-item-color-l")} - ); - display: block; - padding: cv.getVar("menu-list-link-padding"); - text-align: left; - width: 100%; - - &:hover { - @include cv.register-vars( - ( - "menu-item-background-l-delta": #{cv.getVar( - "menu-item-hover-background-l-delta" - )}, - ) - ); - } - - &:active { - @include cv.register-vars( - ( - "menu-item-background-l-delta": #{cv.getVar( - "menu-item-active-background-l-delta" - )}, - ) - ); - } - - // Modifiers - &.#{iv.$class-prefix}is-active, - &.#{iv.$class-prefix}is-selected { - @include cv.register-vars( - ( - "menu-item-h": #{cv.getVar("menu-item-selected-h")}, - "menu-item-s": #{cv.getVar("menu-item-selected-s")}, - "menu-item-l": #{cv.getVar("menu-item-selected-l")}, - "menu-item-background-l": #{cv.getVar( - "menu-item-selected-background-l" - )}, - "menu-item-color-l": #{cv.getVar("menu-item-selected-color-l")}, - ) - ); - } - } - - li { - ul { - border-inline-start: cv.getVar("menu-list-border-left"); - margin: cv.getVar("menu-nested-list-margin"); - padding-inline-start: cv.getVar("menu-nested-list-padding-left"); - } - } -} - -.#{iv.$class-prefix}menu-label { - color: cv.getVar("menu-label-color"); - font-size: cv.getVar("menu-label-font-size"); - letter-spacing: cv.getVar("menu-label-letter-spacing"); - text-transform: uppercase; - - &:not(:first-child) { - margin-top: cv.getVar("menu-label-spacing"); - } - - &:not(:last-child) { - margin-bottom: cv.getVar("menu-label-spacing"); - } -} diff --git a/styles/bulma/sass/components/message.scss b/styles/bulma/sass/components/message.scss deleted file mode 100644 index 03196fe..0000000 --- a/styles/bulma/sass/components/message.scss +++ /dev/null @@ -1,183 +0,0 @@ -@use "../utilities/css-variables" as cv; -@use "../utilities/derived-variables" as dv; -@use "../utilities/initial-variables" as iv; -@use "../utilities/extends"; -@use "../utilities/mixins" as mx; - -$message-h: cv.getVar("scheme-h"); -$message-s: cv.getVar("scheme-s"); -$message-background-l: cv.getVar("background-l"); -$message-border-l: cv.getVar("border-l"); -$message-border-l-delta: -20% !default; -$message-border-style: solid; -$message-border-width: 0.25em; -$message-color-l: cv.getVar("text-l"); -$message-header-background-l: cv.getVar("dark-l"); -$message-header-color-l: cv.getVar("text-dark-invert-l"); -$message-radius: cv.getVar("radius") !default; - -$message-header-weight: cv.getVar("weight-semibold") !default; -$message-header-padding: 1em 1.25em !default; -$message-header-radius: cv.getVar("radius") !default; - -$message-body-border-width: 0 0 0 4px !default; -$message-body-color: cv.getVar("text") !default; -$message-body-padding: 1.25em 1.5em !default; -$message-body-radius: cv.getVar("radius-small") !default; - -$message-body-pre-code-background-color: transparent !default; - -$message-header-body-border-width: 0 !default; -$message-colors: dv.$colors !default; - -.#{iv.$class-prefix}message { - @include cv.register-vars( - ( - "message-border-l-delta": #{$message-border-l-delta}, - "message-radius": #{$message-radius}, - "message-header-weight": #{$message-header-weight}, - "message-header-padding": #{$message-header-padding}, - "message-header-radius": #{$message-header-radius}, - "message-body-border-width": #{$message-body-border-width}, - "message-body-color": #{$message-body-color}, - "message-body-padding": #{$message-body-padding}, - "message-body-radius": #{$message-body-radius}, - "message-body-pre-code-background-color": #{$message-body-pre-code-background-color}, - "message-header-body-border-width": #{$message-header-body-border-width}, - "message-h": #{$message-h}, - "message-s": #{$message-s}, - "message-background-l": #{$message-background-l}, - "message-border-l": #{$message-border-l}, - "message-border-style": #{$message-border-style}, - "message-border-width": #{$message-border-width}, - "message-color-l": #{$message-color-l}, - "message-header-background-l": #{$message-header-background-l}, - "message-header-color-l": #{$message-header-color-l}, - ) - ); -} - -.#{iv.$class-prefix}message { - @extend %block; - border-radius: cv.getVar("message-radius"); - color: hsl( - #{cv.getVar("message-h")}, - #{cv.getVar("message-s")}, - #{cv.getVar("message-color-l")} - ); - font-size: cv.getVar("size-normal"); - - strong { - color: currentColor; - } - - a:not(.#{iv.$class-prefix}button):not(.#{iv.$class-prefix}tag):not( - .#{iv.$class-prefix}dropdown-item - ) { - color: currentColor; - text-decoration: underline; - } - - // Sizes - &.#{iv.$class-prefix}is-small { - font-size: cv.getVar("size-small"); - } - - &.#{iv.$class-prefix}is-medium { - font-size: cv.getVar("size-medium"); - } - - &.#{iv.$class-prefix}is-large { - font-size: cv.getVar("size-large"); - } - - // Colors - @each $name, $components in $message-colors { - &.#{iv.$class-prefix}is-#{$name} { - @include cv.register-vars( - ( - "message-h": #{cv.getVar($name, "", "-h")}, - "message-s": #{cv.getVar($name, "", "-s")}, - "message-border-l": - calc( - #{cv.getVar($name, "", "-l")} + #{cv.getVar( - "message-border-l-delta" - )} - ), - "message-color-l": #{cv.getVar($name, "", "-on-scheme-l")}, - "message-header-background-l": #{cv.getVar($name, "", "-l")}, - "message-header-color-l": #{cv.getVar($name, "", "-invert-l")}, - ) - ); - } - } -} - -.#{iv.$class-prefix}message-header { - align-items: center; - background-color: hsl( - #{cv.getVar("message-h")}, - #{cv.getVar("message-s")}, - #{cv.getVar("message-header-background-l")} - ); - border-start-start-radius: cv.getVar("message-header-radius"); - border-start-end-radius: cv.getVar("message-header-radius"); - color: hsl( - #{cv.getVar("message-h")}, - #{cv.getVar("message-s")}, - #{cv.getVar("message-header-color-l")} - ); - display: flex; - font-weight: cv.getVar("message-header-weight"); - justify-content: space-between; - line-height: 1.25; - padding: cv.getVar("message-header-padding"); - position: relative; - - .#{iv.$class-prefix}delete { - flex-grow: 0; - flex-shrink: 0; - margin-inline-start: 0.75em; - } - - & + .#{iv.$class-prefix}message-body { - border-width: cv.getVar("message-header-body-border-width"); - border-start-start-radius: 0; - border-start-end-radius: 0; - } -} - -.#{iv.$class-prefix}message-body { - background-color: hsl( - #{cv.getVar("message-h")}, - #{cv.getVar("message-s")}, - #{cv.getVar("message-background-l")} - ); - border-inline-start-color: hsl( - #{cv.getVar("message-h")}, - #{cv.getVar("message-s")}, - #{cv.getVar("message-border-l")} - ); - border-inline-start-style: #{cv.getVar("message-border-style")}; - border-inline-start-width: #{cv.getVar("message-border-width")}; - border-radius: cv.getVar("message-body-radius"); - padding: cv.getVar("message-body-padding"); - - code, - pre { - background-color: hsl( - #{cv.getVar("message-h")}, - #{cv.getVar("message-s")}, - #{cv.getVar("message-header-color-l")} - ); - color: hsl( - #{cv.getVar("message-h")}, - #{cv.getVar("message-s")}, - #{cv.getVar("message-header-background-l")} - ); - } - - pre code { - background-color: cv.getVar("message-body-pre-code-background-color"); - } -} diff --git a/styles/bulma/sass/components/modal.scss b/styles/bulma/sass/components/modal.scss deleted file mode 100644 index 0a0aa59..0000000 --- a/styles/bulma/sass/components/modal.scss +++ /dev/null @@ -1,164 +0,0 @@ -@use "../utilities/css-variables" as cv; -@use "../utilities/derived-variables" as dv; -@use "../utilities/initial-variables" as iv; -@use "../utilities/extends"; -@use "../utilities/mixins" as mx; - -$modal-z: 40 !default; - -$modal-background-background-color: hsla( - #{cv.getVar("scheme-h")}, - #{cv.getVar("scheme-s")}, - #{cv.getVar("scheme-invert-l")}, - 0.86 -) !default; - -$modal-content-width: 40rem !default; -$modal-content-margin-mobile: 1.25rem !default; -$modal-content-spacing-mobile: 10rem !default; -$modal-content-spacing-tablet: 2.5rem !default; - -$modal-close-dimensions: 2.5rem !default; -$modal-close-right: 1.25rem !default; -$modal-close-top: 1.25rem !default; - -$modal-card-spacing: 2.5rem !default; - -$modal-card-head-background-color: cv.getVar("scheme-main") !default; -$modal-card-head-padding: 2rem !default; -$modal-card-head-radius: cv.getVar("radius-large") !default; - -$modal-card-title-color: cv.getVar("text-strong") !default; -$modal-card-title-line-height: 1 !default; -$modal-card-title-size: cv.getVar("size-4") !default; - -$modal-card-foot-background-color: cv.getVar("scheme-main-bis") !default; -$modal-card-foot-radius: cv.getVar("radius-large") !default; - -$modal-card-body-background-color: cv.getVar("scheme-main") !default; -$modal-card-body-padding: 2rem !default; - -$modal-breakpoint: iv.$tablet !default; - -.#{iv.$class-prefix}modal { - @include cv.register-vars( - ( - "modal-z": #{$modal-z}, - "modal-background-background-color": #{$modal-background-background-color}, - "modal-content-width": #{$modal-content-width}, - "modal-content-margin-mobile": #{$modal-content-margin-mobile}, - "modal-content-spacing-mobile": #{$modal-content-spacing-mobile}, - "modal-content-spacing-tablet": #{$modal-content-spacing-tablet}, - "modal-close-dimensions": #{$modal-close-dimensions}, - "modal-close-right": #{$modal-close-right}, - "modal-close-top": #{$modal-close-top}, - "modal-card-spacing": #{$modal-card-spacing}, - "modal-card-head-background-color": #{$modal-card-head-background-color}, - "modal-card-head-padding": #{$modal-card-head-padding}, - "modal-card-head-radius": #{$modal-card-head-radius}, - "modal-card-title-color": #{$modal-card-title-color}, - "modal-card-title-line-height": #{$modal-card-title-line-height}, - "modal-card-title-size": #{$modal-card-title-size}, - "modal-card-foot-background-color": #{$modal-card-foot-background-color}, - "modal-card-foot-radius": #{$modal-card-foot-radius}, - "modal-card-body-background-color": #{$modal-card-body-background-color}, - "modal-card-body-padding": #{$modal-card-body-padding}, - ) - ); -} - -.#{iv.$class-prefix}modal { - @extend %overlay; - - align-items: center; - display: none; - flex-direction: column; - justify-content: center; - overflow: hidden; - position: fixed; - z-index: cv.getVar("modal-z"); - - // Modifiers - &.#{iv.$class-prefix}is-active { - display: flex; - } -} - -.#{iv.$class-prefix}modal-background { - @extend %overlay; - background-color: cv.getVar("modal-background-background-color"); -} - -.#{iv.$class-prefix}modal-content, -.#{iv.$class-prefix}modal-card { - margin: 0 cv.getVar("modal-content-margin-mobile"); - max-height: calc(100vh - #{cv.getVar("modal-content-spacing-mobile")}); - overflow: auto; - position: relative; - width: 100%; - - // Responsiveness - @include mx.from($modal-breakpoint) { - margin: 0 auto; - max-height: calc(100vh - #{cv.getVar("modal-content-spacing-tablet")}); - width: cv.getVar("modal-content-width"); - } -} - -.#{iv.$class-prefix}modal-close { - @extend %delete; - background: none; - height: cv.getVar("modal-close-dimensions"); - inset-inline-end: cv.getVar("modal-close-right"); - position: fixed; - top: cv.getVar("modal-close-top"); - width: cv.getVar("modal-close-dimensions"); -} - -.#{iv.$class-prefix}modal-card { - display: flex; - flex-direction: column; - max-height: calc(100vh - #{cv.getVar("modal-card-spacing")}); - overflow: hidden; - overflow-y: visible; -} - -.#{iv.$class-prefix}modal-card-head, -.#{iv.$class-prefix}modal-card-foot { - align-items: center; - display: flex; - flex-shrink: 0; - justify-content: flex-start; - padding: cv.getVar("modal-card-head-padding"); - position: relative; -} - -.#{iv.$class-prefix}modal-card-head { - background-color: cv.getVar("modal-card-head-background-color"); - border-start-start-radius: cv.getVar("modal-card-head-radius"); - border-start-end-radius: cv.getVar("modal-card-head-radius"); - box-shadow: cv.getVar("shadow"); -} - -.#{iv.$class-prefix}modal-card-title { - color: cv.getVar("modal-card-title-color"); - flex-grow: 1; - flex-shrink: 0; - font-size: cv.getVar("modal-card-title-size"); - line-height: cv.getVar("modal-card-title-line-height"); -} - -.#{iv.$class-prefix}modal-card-foot { - background-color: cv.getVar("modal-card-foot-background-color"); - border-end-start-radius: cv.getVar("modal-card-foot-radius"); - border-end-end-radius: cv.getVar("modal-card-foot-radius"); -} - -.#{iv.$class-prefix}modal-card-body { - @include mx.overflow-touch; - background-color: cv.getVar("modal-card-body-background-color"); - flex-grow: 1; - flex-shrink: 1; - overflow: auto; - padding: cv.getVar("modal-card-body-padding"); -} diff --git a/styles/bulma/sass/components/navbar.scss b/styles/bulma/sass/components/navbar.scss deleted file mode 100644 index c755aff..0000000 --- a/styles/bulma/sass/components/navbar.scss +++ /dev/null @@ -1,788 +0,0 @@ -@use "../utilities/css-variables" as cv; -@use "../utilities/initial-variables" as iv; -@use "../utilities/derived-variables" as dv; -@use "../utilities/extends"; -@use "../utilities/mixins" as mx; - -$navbar-h: cv.getVar("scheme-h"); -$navbar-s: cv.getVar("scheme-s"); -$navbar-l: cv.getVar("scheme-main-l"); -$navbar-background-color: cv.getVar("scheme-main") !default; -$navbar-box-shadow-size: 0 0.125em 0 0 !default; -$navbar-box-shadow-color: cv.getVar("background") !default; -$navbar-height: 3.25rem !default; -$navbar-padding-vertical: 1rem !default; -$navbar-padding-horizontal: 2rem !default; -$navbar-z: 30 !default; -$navbar-fixed-z: 30 !default; - -$navbar-item-background-a: 0; -$navbar-item-background-l: cv.getVar("scheme-main-l"); -$navbar-item-background-l-delta: 0%; -$navbar-item-hover-background-l-delta: cv.getVar("hover-background-l-delta"); -$navbar-item-active-background-l-delta: cv.getVar("active-background-l-delta"); -$navbar-item-color-l: cv.getVar("text-l"); -$navbar-item-selected-h: cv.getVar("link-h"); -$navbar-item-selected-s: cv.getVar("link-s"); -$navbar-item-selected-l: cv.getVar("link-l"); -$navbar-item-selected-background-l: cv.getVar("link-l"); -$navbar-item-selected-color-l: cv.getVar("link-invert-l"); -$navbar-item-img-max-height: 1.75rem !default; - -$navbar-dropdown-item-h: cv.getVar("scheme-h"); -$navbar-dropdown-item-s: cv.getVar("scheme-s"); -$navbar-dropdown-item-l: cv.getVar("scheme-main-l"); -$navbar-dropdown-item-background-l: cv.getVar("scheme-main-l"); -$navbar-dropdown-item-color-l: cv.getVar("text-l"); - -$navbar-burger-color: cv.getVar("navbar-item-color") !default; - -$navbar-tab-hover-background-color: transparent !default; -$navbar-tab-hover-border-bottom-color: cv.getVar("link") !default; -$navbar-tab-active-color: cv.getVar("link") !default; -$navbar-tab-active-background-color: transparent !default; -$navbar-tab-active-border-bottom-color: cv.getVar("link") !default; -$navbar-tab-active-border-bottom-style: solid !default; -$navbar-tab-active-border-bottom-width: 0.1875em !default; - -$navbar-dropdown-background-color: cv.getVar("scheme-main") !default; -$navbar-dropdown-border-l: cv.getVar("border-l") !default; -$navbar-dropdown-border-color: hsl( - cv.getVar("navbar-h"), - cv.getVar("navbar-s"), - cv.getVar("navbar-dropdown-border-l") -) !default; -$navbar-dropdown-border-style: solid !default; -$navbar-dropdown-border-width: 0.125em !default; -$navbar-dropdown-offset: -0.25em !default; -$navbar-dropdown-arrow: cv.getVar("link") !default; -$navbar-dropdown-radius: cv.getVar("radius-large") !default; -$navbar-dropdown-z: 20 !default; - -$navbar-dropdown-boxed-radius: cv.getVar("radius-large") !default; -$navbar-dropdown-boxed-shadow: - 0 0.5em 0.5em - hsla( - #{cv.getVar("scheme-h")}, - #{cv.getVar("scheme-s")}, - #{cv.getVar("scheme-invert-l")}, - 0.1 - ), - 0 0 0 1px - hsla( - #{cv.getVar("scheme-h")}, - #{cv.getVar("scheme-s")}, - #{cv.getVar("scheme-invert-l")}, - 0.1 - ) !default; - -$navbar-divider-background-l: cv.getVar("background-l") !default; -$navbar-divider-height: 0.125em !default; - -$navbar-bottom-box-shadow-size: 0 -0.125em 0 0 !default; - -$navbar-breakpoint: iv.$desktop !default; - -$navbar-colors: dv.$colors !default; - -@mixin navbar-fixed { - left: 0; - position: fixed; - right: 0; - z-index: cv.getVar("navbar-fixed-z"); -} - -:root { - @include cv.register-vars( - ( - "navbar-height": #{$navbar-height}, - ) - ); -} - -.#{iv.$class-prefix}navbar { - @include cv.register-vars( - ( - "navbar-h": #{$navbar-h}, - "navbar-s": #{$navbar-s}, - "navbar-l": #{$navbar-l}, - "navbar-background-color": #{$navbar-background-color}, - "navbar-box-shadow-size": #{$navbar-box-shadow-size}, - "navbar-box-shadow-color": #{$navbar-box-shadow-color}, - "navbar-padding-vertical": #{$navbar-padding-vertical}, - "navbar-padding-horizontal": #{$navbar-padding-horizontal}, - "navbar-z": #{$navbar-z}, - "navbar-fixed-z": #{$navbar-fixed-z}, - "navbar-item-background-a": #{$navbar-item-background-a}, - "navbar-item-background-l": #{$navbar-item-background-l}, - "navbar-item-background-l-delta": #{$navbar-item-background-l-delta}, - "navbar-item-hover-background-l-delta": #{$navbar-item-hover-background-l-delta}, - "navbar-item-active-background-l-delta": #{$navbar-item-active-background-l-delta}, - "navbar-item-color-l": #{$navbar-item-color-l}, - "navbar-item-selected-h": #{$navbar-item-selected-h}, - "navbar-item-selected-s": #{$navbar-item-selected-s}, - "navbar-item-selected-l": #{$navbar-item-selected-l}, - "navbar-item-selected-background-l": #{$navbar-item-selected-background-l}, - "navbar-item-selected-color-l": #{$navbar-item-selected-color-l}, - "navbar-item-img-max-height": #{$navbar-item-img-max-height}, - "navbar-burger-color": #{$navbar-burger-color}, - "navbar-tab-hover-background-color": #{$navbar-tab-hover-background-color}, - "navbar-tab-hover-border-bottom-color": #{$navbar-tab-hover-border-bottom-color}, - "navbar-tab-active-color": #{$navbar-tab-active-color}, - "navbar-tab-active-background-color": #{$navbar-tab-active-background-color}, - "navbar-tab-active-border-bottom-color": #{$navbar-tab-active-border-bottom-color}, - "navbar-tab-active-border-bottom-style": #{$navbar-tab-active-border-bottom-style}, - "navbar-tab-active-border-bottom-width": #{$navbar-tab-active-border-bottom-width}, - "navbar-dropdown-background-color": #{$navbar-dropdown-background-color}, - "navbar-dropdown-border-l": #{$navbar-dropdown-border-l}, - "navbar-dropdown-border-color": #{$navbar-dropdown-border-color}, - "navbar-dropdown-border-style": #{$navbar-dropdown-border-style}, - "navbar-dropdown-border-width": #{$navbar-dropdown-border-width}, - "navbar-dropdown-offset": #{$navbar-dropdown-offset}, - "navbar-dropdown-arrow": #{$navbar-dropdown-arrow}, - "navbar-dropdown-radius": #{$navbar-dropdown-radius}, - "navbar-dropdown-z": #{$navbar-dropdown-z}, - "navbar-dropdown-boxed-radius": #{$navbar-dropdown-boxed-radius}, - "navbar-dropdown-boxed-shadow": #{$navbar-dropdown-boxed-shadow}, - "navbar-dropdown-item-h": #{$navbar-dropdown-item-h}, - "navbar-dropdown-item-s": #{$navbar-dropdown-item-s}, - "navbar-dropdown-item-l": #{$navbar-dropdown-item-l}, - "navbar-dropdown-item-background-l": #{$navbar-dropdown-item-background-l}, - "navbar-dropdown-item-color-l": #{$navbar-dropdown-item-color-l}, - "navbar-divider-background-l": #{$navbar-divider-background-l}, - "navbar-divider-height": #{$navbar-divider-height}, - "navbar-bottom-box-shadow-size": #{$navbar-bottom-box-shadow-size}, - ) - ); -} - -.#{iv.$class-prefix}navbar { - background-color: cv.getVar("navbar-background-color"); - min-height: cv.getVar("navbar-height"); - position: relative; - z-index: cv.getVar("navbar-z"); - - @each $name, $pair in $navbar-colors { - &.#{iv.$class-prefix}is-#{$name} { - @include cv.register-vars( - ( - "navbar-h": #{cv.getVar($name, "", "-h")}, - "navbar-s": #{cv.getVar($name, "", "-s")}, - "navbar-l": #{cv.getVar($name, "", "-l")}, - "burger-h": #{cv.getVar($name, "", "-h")}, - "burger-s": #{cv.getVar($name, "", "-s")}, - "burger-l": #{cv.getVar($name, "", "-invert-l")}, - "navbar-background-color": #{cv.getVar($name)}, - "navbar-item-background-l": #{cv.getVar($name, "", "-l")}, - "navbar-item-color-l": #{cv.getVar($name, "", "-invert-l")}, - "navbar-item-selected-h": #{cv.getVar($name, "", "-h")}, - "navbar-item-selected-s": #{cv.getVar($name, "", "-s")}, - "navbar-item-selected-l": #{cv.getVar($name, "", "-l")}, - "navbar-item-selected-background-l": #{cv.getVar($name, "", "-l")}, - "navbar-item-selected-color-l": #{cv.getVar($name, "", "-invert-l")}, - "navbar-dropdown-arrow": #{cv.getVar($name, "", "-invert-l")}, - "navbar-dropdown-background-color": - hsl( - #{cv.getVar($name, "", "-h")}, - #{cv.getVar($name, "", "-s")}, - #{cv.getVar("navbar-dropdown-item-background-l")} - ), - "navbar-dropdown-item-h": #{cv.getVar($name, "", "-h")}, - "navbar-dropdown-item-s": #{cv.getVar($name, "", "-s")}, - ) - ); - } - } - - & > .#{iv.$class-prefix}container { - align-items: stretch; - display: flex; - min-height: cv.getVar("navbar-height"); - width: 100%; - } - - &.#{iv.$class-prefix}has-shadow { - box-shadow: cv.getVar("navbar-box-shadow-size") - cv.getVar("navbar-box-shadow-color"); - } - - &.#{iv.$class-prefix}is-fixed-bottom, - &.#{iv.$class-prefix}is-fixed-top { - @include navbar-fixed; - } - - &.#{iv.$class-prefix}is-fixed-bottom { - bottom: 0; - - &.#{iv.$class-prefix}has-shadow { - box-shadow: cv.getVar("navbar-bottom-box-shadow-size") - cv.getVar("navbar-box-shadow-color"); - } - } - - &.#{iv.$class-prefix}is-fixed-top { - top: 0; - } -} - -html, -body { - &.#{iv.$class-prefix}has-navbar-fixed-top { - padding-top: cv.getVar("navbar-height"); - } - - &.#{iv.$class-prefix}has-navbar-fixed-bottom { - padding-bottom: cv.getVar("navbar-height"); - } -} - -.#{iv.$class-prefix}navbar-brand, -.#{iv.$class-prefix}navbar-tabs { - align-items: stretch; - display: flex; - flex-shrink: 0; - min-height: cv.getVar("navbar-height"); -} - -.#{iv.$class-prefix}navbar-tabs { - @include mx.overflow-touch; - max-width: 100vw; - overflow-x: auto; - overflow-y: hidden; -} - -.#{iv.$class-prefix}navbar-burger { - @extend %reset; - @include mx.burger(2.5rem); - align-self: center; - margin-inline-start: auto; - margin-inline-end: 0.375rem; -} - -.#{iv.$class-prefix}navbar-menu { - display: none; -} - -.#{iv.$class-prefix}navbar-item, -.#{iv.$class-prefix}navbar-link { - color: hsl( - #{cv.getVar("navbar-h")}, - #{cv.getVar("navbar-s")}, - #{cv.getVar("navbar-item-color-l")} - ); - display: block; - line-height: 1.5; - padding: 0.5rem 0.75rem; - position: relative; - - .#{iv.$class-prefix}icon { - &:only-child { - margin-left: -0.25rem; - margin-right: -0.25rem; - } - } -} - -a.#{iv.$class-prefix}navbar-item, -.#{iv.$class-prefix}navbar-link { - background-color: hsla( - #{cv.getVar("navbar-h")}, - #{cv.getVar("navbar-s")}, - calc( - #{cv.getVar("navbar-item-background-l")} + #{cv.getVar( - "navbar-item-background-l-delta" - )} - ), - #{cv.getVar("navbar-item-background-a")} - ); - cursor: pointer; - - &:focus, - &:focus-within, - &:hover { - @include cv.register-vars( - ( - "navbar-item-background-l-delta": #{cv.getVar( - "navbar-item-hover-background-l-delta" - )}, - "navbar-item-background-a": 1, - ) - ); - } - - &:active { - @include cv.register-vars( - ( - "navbar-item-background-l-delta": #{cv.getVar( - "navbar-item-active-background-l-delta" - )}, - "navbar-item-background-a": 1, - ) - ); - } - - &.#{iv.$class-prefix}is-active, - &.#{iv.$class-prefix}is-selected { - @include cv.register-vars( - ( - "navbar-h": #{cv.getVar("navbar-item-selected-h")}, - "navbar-s": #{cv.getVar("navbar-item-selected-s")}, - "navbar-l": #{cv.getVar("navbar-item-selected-l")}, - "navbar-item-background-l": #{cv.getVar( - "navbar-item-selected-background-l" - )}, - "navbar-item-background-a": 1, - "navbar-item-color-l": #{cv.getVar("navbar-item-selected-color-l")}, - ) - ); - } -} - -.#{iv.$class-prefix}navbar-item { - flex-grow: 0; - flex-shrink: 0; - - img, - svg { - max-height: cv.getVar("navbar-item-img-max-height"); - } - - &.#{iv.$class-prefix}has-dropdown { - padding: 0; - } - - &.#{iv.$class-prefix}is-expanded { - flex-grow: 1; - flex-shrink: 1; - } - - &.#{iv.$class-prefix}is-tab { - border-bottom: 1px solid transparent; - min-height: cv.getVar("navbar-height"); - padding-bottom: calc(0.5rem - 1px); - - &:focus, - &:hover { - background-color: cv.getVar("navbar-tab-hover-background-color"); - border-bottom-color: cv.getVar("navbar-tab-hover-border-bottom-color"); - } - - &.#{iv.$class-prefix}is-active { - background-color: cv.getVar("navbar-tab-active-background-color"); - border-bottom-color: cv.getVar("navbar-tab-active-border-bottom-color"); - border-bottom-style: cv.getVar("navbar-tab-active-border-bottom-style"); - border-bottom-width: cv.getVar("navbar-tab-active-border-bottom-width"); - color: cv.getVar("navbar-tab-active-color"); - padding-bottom: calc( - 0.5rem - #{cv.getVar("navbar-tab-active-border-bottom-width")} - ); - } - } -} - -.#{iv.$class-prefix}navbar-content { - flex-grow: 1; - flex-shrink: 1; -} - -.#{iv.$class-prefix}navbar-link:not(.#{iv.$class-prefix}is-arrowless) { - padding-inline-end: 2.5em; - - &::after { - @extend %arrow; - border-color: cv.getVar("navbar-dropdown-arrow"); - margin-top: -0.375em; - inset-inline-end: 1.125em; - } -} - -.#{iv.$class-prefix}navbar-dropdown { - font-size: 0.875rem; - padding-bottom: 0.75rem; - padding-top: 0.5rem; - - .#{iv.$class-prefix}navbar-item { - padding-left: 1.5rem; - padding-right: 1.5rem; - - &:not(.is-active, .is-selected) { - background-color: hsl( - #{cv.getVar("navbar-dropdown-item-h")}, - #{cv.getVar("navbar-dropdown-item-s")}, - calc( - #{cv.getVar("navbar-dropdown-item-background-l")} + #{cv.getVar( - "navbar-item-background-l-delta" - )} - ) - ); - color: hsl( - #{cv.getVar("navbar-dropdown-item-h")}, - #{cv.getVar("navbar-dropdown-item-s")}, - #{cv.getVar("navbar-dropdown-item-color-l")} - ); - } - } -} - -.#{iv.$class-prefix}navbar-divider { - background-color: hsl( - #{cv.getVar("navbar-h")}, - #{cv.getVar("navbar-s")}, - #{cv.getVar("navbar-divider-background-l")} - ); - border: none; - display: none; - height: cv.getVar("navbar-divider-height"); - margin: 0.5rem 0; -} - -@include mx.until($navbar-breakpoint) { - .#{iv.$class-prefix}navbar > .#{iv.$class-prefix}container { - display: block; - } - - .#{iv.$class-prefix}navbar-brand, - .#{iv.$class-prefix}navbar-tabs { - .#{iv.$class-prefix}navbar-item { - align-items: center; - display: flex; - } - } - - .#{iv.$class-prefix}navbar-link { - &::after { - display: none; - } - } - - .#{iv.$class-prefix}navbar-menu { - background-color: cv.getVar("navbar-background-color"); - box-shadow: 0 0.5em 1em - hsla( - #{cv.getVar("scheme-h")}, - #{cv.getVar("scheme-s")}, - #{cv.getVar("scheme-invert-l")}, - 0.1 - ); - padding: 0.5rem 0; - - &.#{iv.$class-prefix}is-active { - display: block; - } - } - - // Fixed navbar - .#{iv.$class-prefix}navbar { - &.#{iv.$class-prefix}is-fixed-bottom-touch, - &.#{iv.$class-prefix}is-fixed-top-touch { - @include navbar-fixed; - } - - &.#{iv.$class-prefix}is-fixed-bottom-touch { - bottom: 0; - - &.#{iv.$class-prefix}has-shadow { - box-shadow: 0 -0.125em 0.1875em hsla(#{cv.getVar("scheme-h")}, #{cv.getVar( - "scheme-s" - )}, #{cv.getVar("scheme-invert-l")}, 0.1); - } - } - - &.#{iv.$class-prefix}is-fixed-top-touch { - top: 0; - } - - &.#{iv.$class-prefix}is-fixed-top, - &.#{iv.$class-prefix}is-fixed-top-touch { - .#{iv.$class-prefix}navbar-menu { - @include mx.overflow-touch; - max-height: calc(100vh - #{cv.getVar("navbar-height")}); - overflow: auto; - } - } - } - - html, - body { - &.#{iv.$class-prefix}has-navbar-fixed-top-touch { - padding-top: cv.getVar("navbar-height"); - } - - &.#{iv.$class-prefix}has-navbar-fixed-bottom-touch { - padding-bottom: cv.getVar("navbar-height"); - } - } -} - -@include mx.from($navbar-breakpoint) { - .#{iv.$class-prefix}navbar, - .#{iv.$class-prefix}navbar-menu, - .#{iv.$class-prefix}navbar-start, - .#{iv.$class-prefix}navbar-end { - align-items: stretch; - display: flex; - } - - .#{iv.$class-prefix}navbar { - min-height: cv.getVar("navbar-height"); - - &.#{iv.$class-prefix}is-spaced { - padding: cv.getVar("navbar-padding-vertical") - cv.getVar("navbar-padding-horizontal"); - - .#{iv.$class-prefix}navbar-start, - .#{iv.$class-prefix}navbar-end { - align-items: center; - } - - a.#{iv.$class-prefix}navbar-item, - .#{iv.$class-prefix}navbar-link { - border-radius: cv.getVar("radius"); - } - } - - &.#{iv.$class-prefix}is-transparent { - @include cv.register-vars( - ( - "navbar-item-background-a": 0, - ) - ); - - .#{iv.$class-prefix}navbar-dropdown { - a.#{iv.$class-prefix}navbar-item { - background-color: hsl( - #{cv.getVar("navbar-h")}, - #{cv.getVar("navbar-s")}, - calc( - #{cv.getVar("navbar-item-background-l")} + #{cv.getVar( - "navbar-item-background-l-delta" - )} - ) - ); - - &.#{iv.$class-prefix}is-active, - &.#{iv.$class-prefix}is-selected { - @include cv.register-vars( - ( - "navbar-h": #{cv.getVar("navbar-item-selected-h")}, - "navbar-s": #{cv.getVar("navbar-item-selected-s")}, - "navbar-l": #{cv.getVar("navbar-item-selected-l")}, - "navbar-item-background-l": #{cv.getVar( - "navbar-item-selected-background-l" - )}, - "navbar-item-color-l": #{cv.getVar( - "navbar-item-selected-color-l" - )}, - ) - ); - } - } - } - } - } - - .#{iv.$class-prefix}navbar-burger { - display: none; - } - - .#{iv.$class-prefix}navbar-item, - .#{iv.$class-prefix}navbar-link { - align-items: center; - display: flex; - } - - .#{iv.$class-prefix}navbar-item { - &.#{iv.$class-prefix}has-dropdown { - align-items: stretch; - } - - &.#{iv.$class-prefix}has-dropdown-up { - .#{iv.$class-prefix}navbar-link::after { - transform: rotate(135deg) translate(0.25em, -0.25em); - } - - .#{iv.$class-prefix}navbar-dropdown { - border-bottom-color: cv.getVar("navbar-dropdown-border-color"); - border-bottom-style: cv.getVar("navbar-dropdown-border-style"); - border-bottom-width: cv.getVar("navbar-dropdown-border-width"); - border-radius: cv.getVar("navbar-dropdown-radius") - cv.getVar("navbar-dropdown-radius") 0 0; - border-top: none; - bottom: 100%; - box-shadow: 0 -0.5em 0.5em hsla(#{cv.getVar("scheme-h")}, #{cv.getVar( - "scheme-s" - )}, #{cv.getVar("scheme-invert-l")}, 0.1); - top: auto; - } - } - - &.#{iv.$class-prefix}is-active, - &.#{iv.$class-prefix}is-hoverable:focus, - &.#{iv.$class-prefix}is-hoverable:focus-within, - &.#{iv.$class-prefix}is-hoverable:hover { - .#{iv.$class-prefix}navbar-dropdown { - display: block; - - .#{iv.$class-prefix}navbar.#{iv.$class-prefix}is-spaced &, - &.#{iv.$class-prefix}is-boxed { - opacity: 1; - pointer-events: auto; - transform: translateY(0); - } - } - } - } - - .#{iv.$class-prefix}navbar-menu { - flex-grow: 1; - flex-shrink: 0; - } - - .#{iv.$class-prefix}navbar-start { - justify-content: flex-start; - margin-inline-end: auto; - } - - .#{iv.$class-prefix}navbar-end { - justify-content: flex-end; - margin-inline-start: auto; - } - - .#{iv.$class-prefix}navbar-dropdown { - background-color: cv.getVar("navbar-dropdown-background-color"); - border-bottom-left-radius: cv.getVar("navbar-dropdown-radius"); - border-bottom-right-radius: cv.getVar("navbar-dropdown-radius"); - border-top-color: cv.getVar("navbar-dropdown-border-color"); - border-top-style: cv.getVar("navbar-dropdown-border-style"); - border-top-width: cv.getVar("navbar-dropdown-border-width"); - box-shadow: 0 0.5em 0.5em - hsla( - #{cv.getVar("scheme-h")}, - #{cv.getVar("scheme-s")}, - #{cv.getVar("scheme-invert-l")}, - 0.1 - ); - display: none; - font-size: 0.875rem; - inset-inline-start: 0; - min-width: 100%; - position: absolute; - top: 100%; - z-index: cv.getVar("navbar-dropdown-z"); - - .#{iv.$class-prefix}navbar-item { - padding: 0.375rem 1rem; - white-space: nowrap; - } - - a.#{iv.$class-prefix}navbar-item { - padding-inline-end: 3rem; - - &:not(.is-active, .is-selected) { - background-color: hsl( - #{cv.getVar("navbar-dropdown-item-h")}, - #{cv.getVar("navbar-dropdown-item-s")}, - calc( - #{cv.getVar("navbar-dropdown-item-background-l")} + #{cv.getVar( - "navbar-item-background-l-delta" - )} - ) - ); - color: hsl( - #{cv.getVar("navbar-dropdown-item-h")}, - #{cv.getVar("navbar-dropdown-item-s")}, - #{cv.getVar("navbar-dropdown-item-color-l")} - ); - } - } - - .#{iv.$class-prefix}navbar.#{iv.$class-prefix}is-spaced &, - &.#{iv.$class-prefix}is-boxed { - border-radius: cv.getVar("navbar-dropdown-boxed-radius"); - border-top: none; - box-shadow: cv.getVar("navbar-dropdown-boxed-shadow"); - display: block; - opacity: 0; - pointer-events: none; - top: calc(100% + (#{cv.getVar("navbar-dropdown-offset")})); - transform: translateY(-5px); - transition-duration: cv.getVar("duration"); - transition-property: opacity, transform; - } - - &.#{iv.$class-prefix}is-right { - left: auto; - right: 0; - } - } - - .#{iv.$class-prefix}navbar-divider { - display: block; - } - - .#{iv.$class-prefix}navbar > .#{iv.$class-prefix}container, - .#{iv.$class-prefix}container > .#{iv.$class-prefix}navbar { - .#{iv.$class-prefix}navbar-brand { - margin-inline-start: -0.75rem; - } - - .#{iv.$class-prefix}navbar-menu { - margin-inline-end: -0.75rem; - } - } - - // Fixed navbar - .#{iv.$class-prefix}navbar { - &.#{iv.$class-prefix}is-fixed-bottom-desktop, - &.#{iv.$class-prefix}is-fixed-top-desktop { - @include navbar-fixed; - } - - &.#{iv.$class-prefix}is-fixed-bottom-desktop { - bottom: 0; - - &.#{iv.$class-prefix}has-shadow { - box-shadow: 0 -0.125em 0.1875em hsla(#{cv.getVar("scheme-h")}, #{cv.getVar( - "scheme-s" - )}, #{cv.getVar("scheme-invert-l")}, 0.1); - } - } - - &.#{iv.$class-prefix}is-fixed-top-desktop { - top: 0; - } - } - - html, - body { - &.#{iv.$class-prefix}has-navbar-fixed-top-desktop { - padding-top: cv.getVar("navbar-height"); - } - - &.#{iv.$class-prefix}has-navbar-fixed-bottom-desktop { - padding-bottom: cv.getVar("navbar-height"); - } - - &.#{iv.$class-prefix}has-spaced-navbar-fixed-top { - padding-top: calc( - #{cv.getVar("navbar-height")} + #{cv.getVar("navbar-padding-vertical")} * - 2 - ); - } - - &.#{iv.$class-prefix}has-spaced-navbar-fixed-bottom { - padding-bottom: calc( - #{cv.getVar("navbar-height")} + #{cv.getVar("navbar-padding-vertical")} * - 2 - ); - } - } -} - -// Combination - -.#{iv.$class-prefix}hero { - &.#{iv.$class-prefix}is-fullheight-with-navbar { - min-height: calc(100vh - #{cv.getVar("navbar-height")}); - } -} diff --git a/styles/bulma/sass/components/pagination.scss b/styles/bulma/sass/components/pagination.scss deleted file mode 100644 index 0634653..0000000 --- a/styles/bulma/sass/components/pagination.scss +++ /dev/null @@ -1,379 +0,0 @@ -@use "../utilities/css-variables" as cv; -@use "../utilities/initial-variables" as iv; -@use "../utilities/derived-variables" as dv; -@use "../utilities/extends"; -@use "../utilities/mixins" as mx; - -$pagination-margin: -0.25rem !default; -$pagination-min-width: cv.getVar("control-height") !default; - -$pagination-item-h: cv.getVar("scheme-h"); -$pagination-item-s: cv.getVar("scheme-s"); -$pagination-item-l: cv.getVar("scheme-main-l"); -$pagination-item-background-l-delta: 0%; -$pagination-item-hover-background-l-delta: cv.getVar( - "hover-background-l-delta" -); -$pagination-item-active-background-l-delta: cv.getVar( - "active-background-l-delta" -); -$pagination-item-border-l: cv.getVar("border-l"); -$pagination-item-border-l-delta: 0%; -$pagination-item-border-style: solid !default; -$pagination-item-border-width: cv.getVar("control-border-width") !default; -$pagination-item-hover-border-l-delta: cv.getVar("hover-border-l-delta"); -$pagination-item-active-border-l-delta: cv.getVar("active-border-l-delta"); -$pagination-item-focus-border-l-delta: cv.getVar("focus-border-l-delta"); -$pagination-item-color-l: cv.getVar("text-strong-l"); -$pagination-item-font-size: 1em !default; -$pagination-item-margin: 0.25rem !default; -$pagination-item-padding-left: 0.5em !default; -$pagination-item-padding-right: 0.5em !default; -$pagination-item-outer-shadow-h: 0; -$pagination-item-outer-shadow-s: 0%; -$pagination-item-outer-shadow-l: 20%; -$pagination-item-outer-shadow-a: 0.05; - -$pagination-selected-item-h: cv.getVar("link-h"); -$pagination-selected-item-s: cv.getVar("link-s"); -$pagination-selected-item-l: cv.getVar("link-l"); -$pagination-selected-item-background-l: cv.getVar("link-l"); -$pagination-selected-item-border-l: cv.getVar("link-l"); -$pagination-selected-item-color-l: cv.getVar("link-invert-l"); - -$pagination-nav-padding-left: 0.75em !default; -$pagination-nav-padding-right: 0.75em !default; - -$pagination-disabled-color: cv.getVar("text-weak") !default; -$pagination-disabled-background-color: cv.getVar("border") !default; -$pagination-disabled-border-color: cv.getVar("border") !default; - -$pagination-current-color: cv.getVar("link-invert") !default; -$pagination-current-background-color: cv.getVar("link") !default; -$pagination-current-border-color: cv.getVar("link") !default; - -$pagination-ellipsis-color: cv.getVar("text-weak") !default; - -$pagination-shadow-inset: inset 0 0.0625em 0.125em - hsla( - #{cv.getVar("scheme-h")}, - #{cv.getVar("scheme-s")}, - #{cv.getVar("scheme-invert-l")}, - 0.2 - ) !default; - -.#{iv.$class-prefix}pagination { - @include cv.register-vars( - ( - "pagination-margin": #{$pagination-margin}, - "pagination-min-width": #{$pagination-min-width}, - "pagination-item-h": #{$pagination-item-h}, - "pagination-item-s": #{$pagination-item-s}, - "pagination-item-l": #{$pagination-item-l}, - "pagination-item-background-l-delta": #{$pagination-item-background-l-delta}, - "pagination-item-hover-background-l-delta": #{$pagination-item-hover-background-l-delta}, - "pagination-item-active-background-l-delta": #{$pagination-item-active-background-l-delta}, - "pagination-item-border-style": #{$pagination-item-border-style}, - "pagination-item-border-width": #{$pagination-item-border-width}, - "pagination-item-border-l": #{$pagination-item-border-l}, - "pagination-item-border-l-delta": #{$pagination-item-border-l-delta}, - "pagination-item-hover-border-l-delta": #{$pagination-item-hover-border-l-delta}, - "pagination-item-active-border-l-delta": #{$pagination-item-active-border-l-delta}, - "pagination-item-focus-border-l-delta": #{$pagination-item-focus-border-l-delta}, - "pagination-item-color-l": #{$pagination-item-color-l}, - "pagination-item-font-size": #{$pagination-item-font-size}, - "pagination-item-margin": #{$pagination-item-margin}, - "pagination-item-padding-left": #{$pagination-item-padding-left}, - "pagination-item-padding-right": #{$pagination-item-padding-right}, - "pagination-item-outer-shadow-h": #{$pagination-item-outer-shadow-h}, - "pagination-item-outer-shadow-s": #{$pagination-item-outer-shadow-s}, - "pagination-item-outer-shadow-l": #{$pagination-item-outer-shadow-l}, - "pagination-item-outer-shadow-a": #{$pagination-item-outer-shadow-a}, - "pagination-nav-padding-left": #{$pagination-nav-padding-left}, - "pagination-nav-padding-right": #{$pagination-nav-padding-right}, - "pagination-disabled-color": #{$pagination-disabled-color}, - "pagination-disabled-background-color": #{$pagination-disabled-background-color}, - "pagination-disabled-border-color": #{$pagination-disabled-border-color}, - "pagination-current-color": #{$pagination-current-color}, - "pagination-current-background-color": #{$pagination-current-background-color}, - "pagination-current-border-color": #{$pagination-current-border-color}, - "pagination-ellipsis-color": #{$pagination-ellipsis-color}, - "pagination-shadow-inset": #{$pagination-shadow-inset}, - "pagination-selected-item-h": #{$pagination-selected-item-h}, - "pagination-selected-item-s": #{$pagination-selected-item-s}, - "pagination-selected-item-l": #{$pagination-selected-item-l}, - "pagination-selected-item-background-l": #{$pagination-selected-item-background-l}, - "pagination-selected-item-border-l": #{$pagination-selected-item-border-l}, - "pagination-selected-item-color-l": #{$pagination-selected-item-color-l}, - ) - ); -} - -.#{iv.$class-prefix}pagination { - @extend %block; - - font-size: cv.getVar("size-normal"); - margin: cv.getVar("pagination-margin"); - - // Sizes - &.#{iv.$class-prefix}is-small { - font-size: cv.getVar("size-small"); - } - - &.#{iv.$class-prefix}is-medium { - font-size: cv.getVar("size-medium"); - } - - &.#{iv.$class-prefix}is-large { - font-size: cv.getVar("size-large"); - } - - &.#{iv.$class-prefix}is-rounded { - .#{iv.$class-prefix}pagination-previous, - .#{iv.$class-prefix}pagination-next { - padding-left: 1em; - padding-right: 1em; - border-radius: cv.getVar("radius-rounded"); - } - - .#{iv.$class-prefix}pagination-link { - border-radius: cv.getVar("radius-rounded"); - } - } -} - -.#{iv.$class-prefix}pagination, -.#{iv.$class-prefix}pagination-list { - align-items: center; - display: flex; - justify-content: center; - text-align: center; -} - -.#{iv.$class-prefix}pagination-previous, -.#{iv.$class-prefix}pagination-next, -.#{iv.$class-prefix}pagination-link, -.#{iv.$class-prefix}pagination-ellipsis { - @extend %control; - @extend %unselectable; - color: hsl( - #{cv.getVar("pagination-item-h")}, - #{cv.getVar("pagination-item-s")}, - #{cv.getVar("pagination-item-color-l")} - ); - font-size: cv.getVar("pagination-item-font-size"); - justify-content: center; - margin: cv.getVar("pagination-item-margin"); - padding-left: cv.getVar("pagination-item-padding-left"); - padding-right: cv.getVar("pagination-item-padding-right"); - text-align: center; -} - -.#{iv.$class-prefix}pagination-previous, -.#{iv.$class-prefix}pagination-next, -.#{iv.$class-prefix}pagination-link { - background-color: hsl( - #{cv.getVar("pagination-item-h")}, - #{cv.getVar("pagination-item-s")}, - calc( - #{cv.getVar("pagination-item-background-l")} + #{cv.getVar( - "pagination-item-background-l-delta" - )} - ) - ); - border-color: hsl( - #{cv.getVar("pagination-item-h")}, - #{cv.getVar("pagination-item-s")}, - calc( - #{cv.getVar("pagination-item-border-l")} + #{cv.getVar( - "pagination-item-border-l-delta" - )} - ) - ); - border-style: cv.getVar("pagination-item-border-style"); - border-width: cv.getVar("pagination-item-border-width"); - box-shadow: - 0px 0.0625em 0.125em - hsla( - cv.getVar("pagination-item-outer-shadow-h"), - cv.getVar("pagination-item-outer-shadow-s"), - cv.getVar("pagination-item-outer-shadow-l"), - cv.getVar("pagination-item-outer-shadow-a") - ), - 0px 0.125em 0.25em - hsla( - cv.getVar("pagination-item-outer-shadow-h"), - cv.getVar("pagination-item-outer-shadow-s"), - cv.getVar("pagination-item-outer-shadow-l"), - cv.getVar("pagination-item-outer-shadow-a") - ); - color: hsl( - #{cv.getVar("pagination-item-h")}, - #{cv.getVar("pagination-item-s")}, - #{cv.getVar("pagination-item-color-l")} - ); - min-width: cv.getVar("pagination-min-width"); - transition-duration: cv.getVar("duration"); - transition-property: background-color, border-color, box-shadow, color; - - &:hover { - @include cv.register-vars( - ( - "pagination-item-background-l-delta": #{cv.getVar( - "pagination-item-hover-background-l-delta" - )}, - "pagination-item-border-l-delta": #{cv.getVar( - "pagination-item-hover-border-l-delta" - )}, - ) - ); - } - - &:focus { - @include cv.register-vars( - ( - "pagination-item-background-l-delta": #{cv.getVar( - "pagination-item-hover-background-l-delta" - )}, - "pagination-item-border-l-delta": #{cv.getVar( - "pagination-item-hover-border-l-delta" - )}, - ) - ); - } - - &:active { - box-shadow: cv.getVar("pagination-shadow-inset"); - } - - &[disabled], - &.#{iv.$class-prefix}is-disabled { - background-color: cv.getVar("pagination-disabled-background-color"); - border-color: cv.getVar("pagination-disabled-border-color"); - box-shadow: none; - color: cv.getVar("pagination-disabled-color"); - opacity: 0.5; - } -} - -.#{iv.$class-prefix}pagination-previous, -.#{iv.$class-prefix}pagination-next { - padding-left: cv.getVar("pagination-nav-padding-left"); - padding-right: cv.getVar("pagination-nav-padding-right"); - white-space: nowrap; -} - -.#{iv.$class-prefix}pagination-link { - &.#{iv.$class-prefix}is-current, - &.#{iv.$class-prefix}is-selected { - @include cv.register-vars( - ( - "pagination-item-h": #{cv.getVar("pagination-selected-item-h")}, - "pagination-item-s": #{cv.getVar("pagination-selected-item-s")}, - "pagination-item-l": #{cv.getVar("pagination-selected-item-l")}, - "pagination-item-background-l": #{cv.getVar( - "pagination-selected-item-background-l" - )}, - "pagination-item-border-l": #{cv.getVar( - "pagination-selected-item-border-l" - )}, - "pagination-item-color-l": #{cv.getVar( - "pagination-selected-item-color-l" - )}, - ) - ); - } -} - -.#{iv.$class-prefix}pagination-ellipsis { - color: cv.getVar("pagination-ellipsis-color"); - pointer-events: none; -} - -.#{iv.$class-prefix}pagination-list { - flex-wrap: wrap; - - li { - list-style: none; - } -} - -@include mx.mobile { - .#{iv.$class-prefix}pagination { - flex-wrap: wrap; - } - - .#{iv.$class-prefix}pagination-previous, - .#{iv.$class-prefix}pagination-next { - flex-grow: 1; - flex-shrink: 1; - } - - .#{iv.$class-prefix}pagination-list { - li { - flex-grow: 1; - flex-shrink: 1; - } - } -} - -@include mx.tablet { - .#{iv.$class-prefix}pagination-list { - flex-grow: 1; - flex-shrink: 1; - justify-content: flex-start; - order: 1; - } - - .#{iv.$class-prefix}pagination-previous, - .#{iv.$class-prefix}pagination-next, - .#{iv.$class-prefix}pagination-link, - .#{iv.$class-prefix}pagination-ellipsis { - margin-bottom: 0; - margin-top: 0; - } - - .#{iv.$class-prefix}pagination-previous { - order: 2; - } - - .#{iv.$class-prefix}pagination-next { - order: 3; - } - - .#{iv.$class-prefix}pagination { - justify-content: space-between; - margin-bottom: 0; - margin-top: 0; - - &.#{iv.$class-prefix}is-centered { - .#{iv.$class-prefix}pagination-previous { - order: 1; - } - - .#{iv.$class-prefix}pagination-list { - justify-content: center; - order: 2; - } - - .#{iv.$class-prefix}pagination-next { - order: 3; - } - } - - &.#{iv.$class-prefix}is-right { - .#{iv.$class-prefix}pagination-previous { - order: 1; - } - - .#{iv.$class-prefix}pagination-next { - order: 2; - } - - .#{iv.$class-prefix}pagination-list { - justify-content: flex-end; - order: 3; - } - } - } -} diff --git a/styles/bulma/sass/components/panel.scss b/styles/bulma/sass/components/panel.scss deleted file mode 100644 index 7d7d010..0000000 --- a/styles/bulma/sass/components/panel.scss +++ /dev/null @@ -1,218 +0,0 @@ -@use "../utilities/css-variables" as cv; -@use "../utilities/initial-variables" as iv; -@use "../utilities/derived-variables" as dv; -@use "../utilities/extends"; -@use "../utilities/mixins" as mx; - -$panel-margin: cv.getVar("block-spacing") !default; -$panel-item-border: 1px solid cv.getVar("border-weak") !default; -$panel-radius: cv.getVar("radius-large") !default; -$panel-shadow: cv.getVar("shadow") !default; - -$panel-heading-line-height: 1.25 !default; -$panel-heading-padding: 1em 1.25em !default; -$panel-heading-radius: cv.getVar("radius") !default; -$panel-heading-size: 1.25em !default; -$panel-heading-weight: cv.getVar("weight-bold") !default; - -$panel-tabs-font-size: 1em !default; -$panel-tab-border-bottom-color: cv.getVar("border") !default; -$panel-tab-border-bottom-style: solid !default; -$panel-tab-border-bottom-width: 1px !default; -$panel-tab-active-color: cv.getVar("link-active") !default; - -$panel-list-item-color: cv.getVar("text") !default; -$panel-list-item-hover-color: cv.getVar("link") !default; - -$panel-block-color: cv.getVar("text-strong") !default; -$panel-block-hover-background-color: cv.getVar("background") !default; -$panel-block-active-border-left-color: cv.getVar("link") !default; -$panel-block-active-color: cv.getVar("link-active") !default; -$panel-block-active-icon-color: cv.getVar("link") !default; - -$panel-icon-color: cv.getVar("text-weak") !default; -$panel-colors: dv.$colors !default; - -.#{iv.$class-prefix}panel { - @include cv.register-vars( - ( - "panel-margin": #{$panel-margin}, - "panel-item-border": #{$panel-item-border}, - "panel-radius": #{$panel-radius}, - "panel-shadow": #{$panel-shadow}, - "panel-heading-line-height": #{$panel-heading-line-height}, - "panel-heading-padding": #{$panel-heading-padding}, - "panel-heading-radius": #{$panel-heading-radius}, - "panel-heading-size": #{$panel-heading-size}, - "panel-heading-weight": #{$panel-heading-weight}, - "panel-tabs-font-size": #{$panel-tabs-font-size}, - "panel-tab-border-bottom-color": #{$panel-tab-border-bottom-color}, - "panel-tab-border-bottom-style": #{$panel-tab-border-bottom-style}, - "panel-tab-border-bottom-width": #{$panel-tab-border-bottom-width}, - "panel-tab-active-color": #{$panel-tab-active-color}, - "panel-list-item-color": #{$panel-list-item-color}, - "panel-list-item-hover-color": #{$panel-list-item-hover-color}, - "panel-block-color": #{$panel-block-color}, - "panel-block-hover-background-color": #{$panel-block-hover-background-color}, - "panel-block-active-border-left-color": #{$panel-block-active-border-left-color}, - "panel-block-active-color": #{$panel-block-active-color}, - "panel-block-active-icon-color": #{$panel-block-active-icon-color}, - "panel-icon-color": #{$panel-icon-color}, - ) - ); -} - -.#{iv.$class-prefix}panel { - @include cv.register-vars( - ( - "panel-h": #{cv.getVar("scheme-h")}, - "panel-s": #{cv.getVar("scheme-s")}, - "panel-color-l": #{cv.getVar("text-l")}, - "panel-heading-background-l": #{cv.getVar("text-l")}, - "panel-heading-color-l": #{cv.getVar("text-invert-l")}, - ) - ); - - border-radius: cv.getVar("panel-radius"); - box-shadow: cv.getVar("panel-shadow"); - font-size: cv.getVar("size-normal"); - - &:not(:last-child) { - margin-bottom: cv.getVar("panel-margin"); - } - - // Colors - @each $name, $components in $panel-colors { - &.#{iv.$class-prefix}is-#{$name} { - @include cv.register-vars( - ( - "panel-h": #{cv.getVar($name, "", "-h")}, - "panel-s": #{cv.getVar($name, "", "-s")}, - "panel-color-l": #{cv.getVar($name, "", "-l")}, - "panel-heading-background-l": #{cv.getVar($name, "", "-l")}, - "panel-heading-color-l": #{cv.getVar($name, "", "-invert-l")}, - ) - ); - } - } -} - -.#{iv.$class-prefix}panel-tabs, -.#{iv.$class-prefix}panel-block { - &:not(:last-child) { - border-bottom: cv.getVar("panel-item-border"); - } -} - -.#{iv.$class-prefix}panel-heading { - background-color: hsl( - cv.getVar("panel-h"), - cv.getVar("panel-s"), - cv.getVar("panel-heading-background-l") - ); - border-radius: cv.getVar("panel-radius") cv.getVar("panel-radius") 0 0; - color: hsl( - cv.getVar("panel-h"), - cv.getVar("panel-s"), - cv.getVar("panel-heading-color-l") - ); - font-size: cv.getVar("panel-heading-size"); - font-weight: cv.getVar("panel-heading-weight"); - line-height: cv.getVar("panel-heading-line-height"); - padding: cv.getVar("panel-heading-padding"); -} - -.#{iv.$class-prefix}panel-tabs { - align-items: flex-end; - display: flex; - font-size: cv.getVar("panel-tabs-font-size"); - justify-content: center; - - a { - border-bottom-color: cv.getVar("panel-tab-border-bottom-color"); - border-bottom-style: cv.getVar("panel-tab-border-bottom-style"); - border-bottom-width: cv.getVar("panel-tab-border-bottom-width"); - margin-bottom: calc(-1 * #{$panel-tab-border-bottom-width}); - padding: 0.75em; - - // Modifiers - &.#{iv.$class-prefix}is-active { - border-bottom-color: hsl( - cv.getVar("panel-h"), - cv.getVar("panel-s"), - cv.getVar("panel-color-l") - ); - color: cv.getVar("panel-tab-active-color"); - } - } -} - -.#{iv.$class-prefix}panel-list { - a { - color: cv.getVar("panel-list-item-color"); - - &:hover { - color: cv.getVar("panel-list-item-hover-color"); - } - } -} - -.#{iv.$class-prefix}panel-block { - align-items: center; - color: cv.getVar("panel-block-color"); - display: flex; - justify-content: flex-start; - padding: 0.75em 1em; - - input[type="checkbox"] { - margin-inline-end: 0.75em; - } - - & > .#{iv.$class-prefix}control { - flex-grow: 1; - flex-shrink: 1; - width: 100%; - } - - &.#{iv.$class-prefix}is-wrapped { - flex-wrap: wrap; - } - - &.#{iv.$class-prefix}is-active { - border-left-color: cv.getVar("panel-block-active-border-left-color"); - color: cv.getVar("panel-block-active-color"); - - .#{iv.$class-prefix}panel-icon { - color: hsl( - cv.getVar("panel-h"), - cv.getVar("panel-s"), - cv.getVar("panel-color-l") - ); - } - } - - &:last-child { - border-bottom-left-radius: cv.getVar("panel-radius"); - border-bottom-right-radius: cv.getVar("panel-radius"); - } -} - -a.#{iv.$class-prefix}panel-block, -label.#{iv.$class-prefix}panel-block { - cursor: pointer; - - &:hover { - background-color: cv.getVar("panel-block-hover-background-color"); - } -} - -.#{iv.$class-prefix}panel-icon { - @include mx.fa(1em, 1em); - color: cv.getVar("panel-icon-color"); - margin-inline-end: 0.75em; - - .#{iv.$class-prefix}fa { - font-size: inherit; - line-height: inherit; - } -} diff --git a/styles/bulma/sass/components/tabs.scss b/styles/bulma/sass/components/tabs.scss deleted file mode 100644 index 072282c..0000000 --- a/styles/bulma/sass/components/tabs.scss +++ /dev/null @@ -1,273 +0,0 @@ -@use "../utilities/css-variables" as cv; -@use "../utilities/initial-variables" as iv; -@use "../utilities/derived-variables" as dv; -@use "../utilities/extends"; -@use "../utilities/mixins" as mx; - -$tabs-border-bottom-color: cv.getVar("border") !default; -$tabs-border-bottom-style: solid !default; -$tabs-border-bottom-width: 1px !default; -$tabs-link-color: cv.getVar("text") !default; -$tabs-link-hover-border-bottom-color: cv.getVar("text-strong") !default; -$tabs-link-hover-color: cv.getVar("text-strong") !default; -$tabs-link-active-border-bottom-color: cv.getVar("link-text") !default; -$tabs-link-active-color: cv.getVar("link-text") !default; -$tabs-link-padding: 0.5em 1em !default; - -$tabs-boxed-link-radius: cv.getVar("radius") !default; -$tabs-boxed-link-hover-background-color: cv.getVar("background") !default; -$tabs-boxed-link-hover-border-bottom-color: cv.getVar("border") !default; - -$tabs-boxed-link-active-background-color: cv.getVar("scheme-main") !default; -$tabs-boxed-link-active-border-color: cv.getVar("border") !default; -$tabs-boxed-link-active-border-bottom-color: transparent !default; - -$tabs-toggle-link-border-color: cv.getVar("border") !default; -$tabs-toggle-link-border-style: solid !default; -$tabs-toggle-link-border-width: 1px !default; -$tabs-toggle-link-hover-background-color: cv.getVar("background") !default; -$tabs-toggle-link-hover-border-color: cv.getVar("border-hover") !default; -$tabs-toggle-link-radius: cv.getVar("radius") !default; -$tabs-toggle-link-active-background-color: cv.getVar("link") !default; -$tabs-toggle-link-active-border-color: cv.getVar("link") !default; -$tabs-toggle-link-active-color: cv.getVar("link-invert") !default; - -.#{iv.$class-prefix}tabs { - @include cv.register-vars( - ( - "tabs-border-bottom-color": #{$tabs-border-bottom-color}, - "tabs-border-bottom-style": #{$tabs-border-bottom-style}, - "tabs-border-bottom-width": #{$tabs-border-bottom-width}, - "tabs-link-color": #{$tabs-link-color}, - "tabs-link-hover-border-bottom-color": #{$tabs-link-hover-border-bottom-color}, - "tabs-link-hover-color": #{$tabs-link-hover-color}, - "tabs-link-active-border-bottom-color": #{$tabs-link-active-border-bottom-color}, - "tabs-link-active-color": #{$tabs-link-active-color}, - "tabs-link-padding": #{$tabs-link-padding}, - "tabs-boxed-link-radius": #{$tabs-boxed-link-radius}, - "tabs-boxed-link-hover-background-color": #{$tabs-boxed-link-hover-background-color}, - "tabs-boxed-link-hover-border-bottom-color": #{$tabs-boxed-link-hover-border-bottom-color}, - "tabs-boxed-link-active-background-color": #{$tabs-boxed-link-active-background-color}, - "tabs-boxed-link-active-border-color": #{$tabs-boxed-link-active-border-color}, - "tabs-boxed-link-active-border-bottom-color": #{$tabs-boxed-link-active-border-bottom-color}, - "tabs-toggle-link-border-color": #{$tabs-toggle-link-border-color}, - "tabs-toggle-link-border-style": #{$tabs-toggle-link-border-style}, - "tabs-toggle-link-border-width": #{$tabs-toggle-link-border-width}, - "tabs-toggle-link-hover-background-color": #{$tabs-toggle-link-hover-background-color}, - "tabs-toggle-link-hover-border-color": #{$tabs-toggle-link-hover-border-color}, - "tabs-toggle-link-radius": #{$tabs-toggle-link-radius}, - "tabs-toggle-link-active-background-color": #{$tabs-toggle-link-active-background-color}, - "tabs-toggle-link-active-border-color": #{$tabs-toggle-link-active-border-color}, - "tabs-toggle-link-active-color": #{$tabs-toggle-link-active-color}, - ) - ); -} - -.#{iv.$class-prefix}tabs { - @extend %block; - @extend %unselectable; - @include mx.overflow-touch; - align-items: stretch; - display: flex; - font-size: cv.getVar("size-normal"); - justify-content: space-between; - overflow: hidden; - overflow-x: auto; - white-space: nowrap; - - a { - align-items: center; - border-bottom-color: cv.getVar("tabs-border-bottom-color"); - border-bottom-style: cv.getVar("tabs-border-bottom-style"); - border-bottom-width: cv.getVar("tabs-border-bottom-width"); - color: cv.getVar("tabs-link-color"); - display: flex; - justify-content: center; - margin-bottom: calc(-1 * #{cv.getVar("tabs-border-bottom-width")}); - padding: cv.getVar("tabs-link-padding"); - transition-duration: cv.getVar("duration"); - transition-property: background-color, border-color, color; - vertical-align: top; - - &:hover { - border-bottom-color: cv.getVar("tabs-link-hover-border-bottom-color"); - color: cv.getVar("tabs-link-hover-color"); - } - } - - li { - display: block; - - &.#{iv.$class-prefix}is-active { - a { - border-bottom-color: cv.getVar("tabs-link-active-border-bottom-color"); - color: cv.getVar("tabs-link-active-color"); - } - } - } - - ul { - align-items: center; - border-bottom-color: cv.getVar("tabs-border-bottom-color"); - border-bottom-style: cv.getVar("tabs-border-bottom-style"); - border-bottom-width: cv.getVar("tabs-border-bottom-width"); - display: flex; - flex-grow: 1; - flex-shrink: 0; - justify-content: flex-start; - - &.#{iv.$class-prefix}is-left { - padding-right: 0.75em; - } - - &.#{iv.$class-prefix}is-center { - flex: none; - justify-content: center; - padding-left: 0.75em; - padding-right: 0.75em; - } - - &.#{iv.$class-prefix}is-right { - justify-content: flex-end; - padding-left: 0.75em; - } - } - - .#{iv.$class-prefix}icon { - &:first-child { - margin-inline-end: 0.5em; - } - - &:last-child { - margin-inline-start: 0.5em; - } - } - - // Alignment - &.#{iv.$class-prefix}is-centered { - ul { - justify-content: center; - } - } - - &.#{iv.$class-prefix}is-right { - ul { - justify-content: flex-end; - } - } - - // Styles - &.#{iv.$class-prefix}is-boxed { - a { - border: 1px solid transparent; - border-start-start-radius: cv.getVar("tabs-boxed-link-radius"); - border-start-end-radius: cv.getVar("tabs-boxed-link-radius"); - - &:hover { - background-color: cv.getVar("tabs-boxed-link-hover-background-color"); - border-bottom-color: cv.getVar( - "tabs-boxed-link-hover-border-bottom-color" - ); - } - } - - li { - &.#{iv.$class-prefix}is-active { - a { - background-color: cv.getVar( - "tabs-boxed-link-active-background-color" - ); - border-color: cv.getVar("tabs-boxed-link-active-border-color"); - border-bottom-color: cv.getVar( - "tabs-boxed-link-active-border-bottom-color" - ) !important; - } - } - } - } - - &.#{iv.$class-prefix}is-fullwidth { - li { - flex-grow: 1; - flex-shrink: 0; - } - } - - &.#{iv.$class-prefix}is-toggle { - a { - border-color: cv.getVar("tabs-toggle-link-border-color"); - border-style: cv.getVar("tabs-toggle-link-border-style"); - border-width: cv.getVar("tabs-toggle-link-border-width"); - margin-bottom: 0; - position: relative; - - &:hover { - background-color: cv.getVar("tabs-toggle-link-hover-background-color"); - border-color: cv.getVar("tabs-toggle-link-hover-border-color"); - z-index: 2; - } - } - - li { - & + li { - margin-inline-start: calc( - -1 * #{cv.getVar("tabs-toggle-link-border-width")} - ); - } - - &:first-child a { - border-start-start-radius: cv.getVar("tabs-toggle-link-radius"); - border-end-start-radius: cv.getVar("tabs-toggle-link-radius"); - } - - &:last-child a { - border-start-end-radius: cv.getVar("tabs-toggle-link-radius"); - border-end-end-radius: cv.getVar("tabs-toggle-link-radius"); - } - - &.#{iv.$class-prefix}is-active { - a { - background-color: cv.getVar( - "tabs-toggle-link-active-background-color" - ); - border-color: cv.getVar("tabs-toggle-link-active-border-color"); - color: cv.getVar("tabs-toggle-link-active-color"); - z-index: 1; - } - } - } - - ul { - border-bottom: none; - } - - &.#{iv.$class-prefix}is-toggle-rounded { - li { - &:first-child a { - border-start-start-radius: cv.getVar("radius-rounded"); - border-end-start-radius: cv.getVar("radius-rounded"); - padding-inline-start: 1.25em; - } - - &:last-child a { - border-start-end-radius: cv.getVar("radius-rounded"); - border-end-end-radius: cv.getVar("radius-rounded"); - padding-inline-end: 1.25em; - } - } - } - } - - // Sizes - &.#{iv.$class-prefix}is-small { - font-size: cv.getVar("size-small"); - } - - &.#{iv.$class-prefix}is-medium { - font-size: cv.getVar("size-medium"); - } - - &.#{iv.$class-prefix}is-large { - font-size: cv.getVar("size-large"); - } -} diff --git a/styles/bulma/sass/elements/_index.scss b/styles/bulma/sass/elements/_index.scss deleted file mode 100644 index 68034bf..0000000 --- a/styles/bulma/sass/elements/_index.scss +++ /dev/null @@ -1,16 +0,0 @@ -/* Bulma Elements */ -@charset "utf-8"; - -@forward "block"; -@forward "box"; -@forward "button"; -@forward "content"; -@forward "delete"; -@forward "icon"; -@forward "image"; -@forward "loader"; -@forward "notification"; -@forward "progress"; -@forward "table"; -@forward "tag"; -@forward "title"; diff --git a/styles/bulma/sass/elements/block.scss b/styles/bulma/sass/elements/block.scss deleted file mode 100644 index 34fee01..0000000 --- a/styles/bulma/sass/elements/block.scss +++ /dev/null @@ -1,6 +0,0 @@ -@use "../utilities/initial-variables" as iv; -@use "../utilities/extends"; - -.#{iv.$class-prefix}block { - @extend %block; -} diff --git a/styles/bulma/sass/elements/box.scss b/styles/bulma/sass/elements/box.scss deleted file mode 100644 index 060f53a..0000000 --- a/styles/bulma/sass/elements/box.scss +++ /dev/null @@ -1,59 +0,0 @@ -@use "../utilities/css-variables" as cv; -@use "../utilities/initial-variables" as iv; -@use "../utilities/extends"; - -$box-background-color: cv.getVar("scheme-main") !default; -$box-color: cv.getVar("text") !default; -$box-radius: cv.getVar("radius-large") !default; -$box-shadow: cv.getVar("shadow") !default; -$box-padding: 1.25rem !default; - -$box-link-hover-shadow: - 0 0.5em 1em -0.125em hsla(#{cv.getVar("scheme-h")}, #{cv.getVar("scheme-s")}, #{cv.getVar( - "scheme-invert-l" - )}, 0.1), - 0 0 0 1px cv.getVar("link") !default; -$box-link-active-shadow: - inset 0 1px 2px - hsla( - #{cv.getVar("scheme-h")}, - #{cv.getVar("scheme-s")}, - #{cv.getVar("scheme-invert-l")}, - 0.2 - ), - 0 0 0 1px cv.getVar("link") !default; - -.#{iv.$class-prefix}box { - @include cv.register-vars( - ( - "box-background-color": #{$box-background-color}, - "box-color": #{$box-color}, - "box-radius": #{$box-radius}, - "box-shadow": #{$box-shadow}, - "box-padding": #{$box-padding}, - "box-link-hover-shadow": #{$box-link-hover-shadow}, - "box-link-active-shadow": #{$box-link-active-shadow}, - ) - ); -} - -.#{iv.$class-prefix}box { - @extend %block; - background-color: cv.getVar("box-background-color"); - border-radius: cv.getVar("box-radius"); - box-shadow: cv.getVar("box-shadow"); - color: cv.getVar("box-color"); - display: block; - padding: cv.getVar("box-padding"); -} - -a.#{iv.$class-prefix}box { - &:hover, - &:focus { - box-shadow: cv.getVar("box-link-hover-shadow"); - } - - &:active { - box-shadow: cv.getVar("box-link-active-shadow"); - } -} diff --git a/styles/bulma/sass/elements/button.scss b/styles/bulma/sass/elements/button.scss deleted file mode 100644 index f8d3ba8..0000000 --- a/styles/bulma/sass/elements/button.scss +++ /dev/null @@ -1,640 +0,0 @@ -@use "sass:list"; - -@use "../utilities/css-variables" as cv; -@use "../utilities/derived-variables" as dv; -@use "../utilities/initial-variables" as iv; -@use "../utilities/extends"; -@use "../utilities/mixins" as mx; - -$button-h: #{cv.getVar("scheme-h")}; -$button-s: #{cv.getVar("scheme-s")}; -$button-l: #{cv.getVar("scheme-main-l")}; -$button-background-l: #{cv.getVar("scheme-main-l")}; -$button-background-l-delta: 0%; -$button-hover-background-l-delta: #{cv.getVar("hover-background-l-delta")}; -$button-active-background-l-delta: #{cv.getVar("active-background-l-delta")}; -$button-color-l: #{cv.getVar("text-strong-l")}; -$button-border-l: #{cv.getVar("border-l")}; -$button-border-l-delta: 0%; -$button-hover-border-l-delta: #{cv.getVar("hover-border-l-delta")}; -$button-active-border-l-delta: #{cv.getVar("active-border-l-delta")}; -$button-focus-border-l-delta: #{cv.getVar("focus-border-l-delta")}; -$button-outer-shadow-h: 0; -$button-outer-shadow-s: 0%; -$button-outer-shadow-l: 20%; -$button-outer-shadow-a: 0.05; - -$button-weight: cv.getVar("weight-medium") !default; -$button-family: false !default; - -$button-border-color: cv.getVar("border") !default; -$button-border-style: solid !default; -$button-border-width: cv.getVar("control-border-width") !default; - -$button-padding-vertical: 0.5em !default; -$button-padding-horizontal: 1em !default; - -$button-focus-border-color: cv.getVar("link-focus-border") !default; -$button-focus-box-shadow-size: 0 0 0 0.125em !default; -$button-focus-box-shadow-color: hsla( - #{cv.getVar("link-h")}, - #{cv.getVar("link-s")}, - #{cv.getVar("link-on-scheme-l")}, - 0.25 -) !default; - -$button-active-color: cv.getVar("link-active") !default; -$button-active-border-color: cv.getVar("link-active-border") !default; - -$button-text-color: cv.getVar("text") !default; -$button-text-decoration: underline !default; -$button-text-hover-background-color: cv.getVar("background") !default; -$button-text-hover-color: cv.getVar("text-strong") !default; - -$button-ghost-background: none !default; -$button-ghost-border-color: transparent !default; -$button-ghost-color: cv.getVar("link-text") !default; -$button-ghost-decoration: none !default; -$button-ghost-hover-color: cv.getVar("link") !default; -$button-ghost-hover-decoration: underline !default; - -$button-disabled-background-color: cv.getVar("scheme-main") !default; -$button-disabled-border-color: cv.getVar("border") !default; -$button-disabled-shadow: none !default; -$button-disabled-opacity: 0.5 !default; - -$button-static-color: cv.getVar("text-weak") !default; -$button-static-background-color: cv.getVar("scheme-main-ter") !default; -$button-static-border-color: cv.getVar("border") !default; - -$button-colors: dv.$colors !default; -$button-responsive-sizes: ( - "mobile": ( - "small": calc(#{cv.getVar("size-small")} * 0.75), - "normal": calc(#{cv.getVar("size-small")} * 0.875), - "medium": cv.getVar("size-small"), - "large": cv.getVar("size-normal"), - ), - "tablet-only": ( - "small": calc(#{cv.getVar("size-small")} * 0.875), - "normal": cv.getVar("size-small"), - "medium": cv.getVar("size-normal"), - "large": cv.getVar("size-medium"), - ), -) !default; - -$no-palette: ("white", "black", "light", "dark"); - -.#{iv.$class-prefix}button { - @include cv.register-vars( - ( - "button-family": #{$button-family}, - "button-weight": #{$button-weight}, - "button-border-color": #{$button-border-color}, - "button-border-style": #{$button-border-style}, - "button-border-width": #{$button-border-width}, - "button-padding-vertical": #{$button-padding-vertical}, - "button-padding-horizontal": #{$button-padding-horizontal}, - "button-focus-border-color": #{$button-focus-border-color}, - "button-focus-box-shadow-size": #{$button-focus-box-shadow-size}, - "button-focus-box-shadow-color": #{$button-focus-box-shadow-color}, - "button-active-color": #{$button-active-color}, - "button-active-border-color": #{$button-active-border-color}, - "button-text-color": #{$button-text-color}, - "button-text-decoration": #{$button-text-decoration}, - "button-text-hover-background-color": #{$button-text-hover-background-color}, - "button-text-hover-color": #{$button-text-hover-color}, - "button-ghost-background": #{$button-ghost-background}, - "button-ghost-border-color": #{$button-ghost-border-color}, - "button-ghost-color": #{$button-ghost-color}, - "button-ghost-decoration": #{$button-ghost-decoration}, - "button-ghost-hover-color": #{$button-ghost-hover-color}, - "button-ghost-hover-decoration": #{$button-ghost-hover-decoration}, - "button-disabled-background-color": #{$button-disabled-background-color}, - "button-disabled-border-color": #{$button-disabled-border-color}, - "button-disabled-shadow": #{$button-disabled-shadow}, - "button-disabled-opacity": #{$button-disabled-opacity}, - "button-static-color": #{$button-static-color}, - "button-static-background-color": #{$button-static-background-color}, - "button-static-border-color": #{$button-static-border-color}, - ) - ); -} - -.#{iv.$class-prefix}button { - @include cv.register-vars( - ( - "button-h": #{$button-h}, - "button-s": #{$button-s}, - "button-l": #{$button-l}, - "button-background-l": #{$button-background-l}, - "button-background-l-delta": #{$button-background-l-delta}, - "button-hover-background-l-delta": #{$button-hover-background-l-delta}, - "button-active-background-l-delta": #{$button-active-background-l-delta}, - "button-color-l": #{$button-color-l}, - "button-border-l": #{$button-border-l}, - "button-border-l-delta": #{$button-border-l-delta}, - "button-hover-border-l-delta": #{$button-hover-border-l-delta}, - "button-active-border-l-delta": #{$button-active-border-l-delta}, - "button-focus-border-l-delta": #{$button-focus-border-l-delta}, - "button-outer-shadow-h": #{$button-outer-shadow-h}, - "button-outer-shadow-s": #{$button-outer-shadow-s}, - "button-outer-shadow-l": #{$button-outer-shadow-l}, - "button-outer-shadow-a": #{$button-outer-shadow-a}, - "loading-color": - hsl( - #{cv.getVar("button-h")}, - #{cv.getVar("button-s")}, - #{cv.getVar("button-color-l")} - ), - ) - ); - - @extend %control; - @extend %unselectable; - - background-color: hsl( - #{cv.getVar("button-h")}, - #{cv.getVar("button-s")}, - calc( - #{cv.getVar("button-background-l")} + #{cv.getVar( - "button-background-l-delta" - )} - ) - ); - border-color: hsl( - #{cv.getVar("button-h")}, - #{cv.getVar("button-s")}, - calc( - #{cv.getVar("button-border-l")} + #{cv.getVar("button-border-l-delta")} - ) - ); - border-style: cv.getVar("button-border-style"); - border-width: cv.getVar("button-border-width"); - box-shadow: - 0px 0.0625em 0.125em - hsla( - cv.getVar("button-outer-shadow-h"), - cv.getVar("button-outer-shadow-s"), - cv.getVar("button-outer-shadow-l"), - cv.getVar("button-outer-shadow-a") - ), - 0px 0.125em 0.25em - hsla( - cv.getVar("button-outer-shadow-h"), - cv.getVar("button-outer-shadow-s"), - cv.getVar("button-outer-shadow-l"), - cv.getVar("button-outer-shadow-a") - ); - color: hsl( - #{cv.getVar("button-h")}, - #{cv.getVar("button-s")}, - #{cv.getVar("button-color-l")} - ); - cursor: pointer; - font-weight: cv.getVar("button-weight"); - height: auto; - justify-content: center; - padding-bottom: calc( - #{cv.getVar("button-padding-vertical")} - #{cv.getVar( - "button-border-width" - )} - ); - padding-left: calc( - #{cv.getVar("button-padding-horizontal")} - #{cv.getVar( - "button-border-width" - )} - ); - padding-right: calc( - #{cv.getVar("button-padding-horizontal")} - #{cv.getVar( - "button-border-width" - )} - ); - padding-top: calc( - #{cv.getVar("button-padding-vertical")} - #{cv.getVar( - "button-border-width" - )} - ); - text-align: center; - white-space: nowrap; - - @if $button-family { - font-family: cv.getVar("button-family"); - } - - strong { - color: inherit; - } - - .#{iv.$class-prefix}icon { - &, - &.#{iv.$class-prefix}is-small, - &.#{iv.$class-prefix}is-medium, - &.#{iv.$class-prefix}is-large { - height: 1.5em; - width: 1.5em; - } - - &:first-child:not(:last-child) { - margin-inline-start: calc( - -0.5 * #{cv.getVar("button-padding-horizontal")} - ); - margin-inline-end: calc(#{cv.getVar("button-padding-horizontal")} * 0.25); - } - - &:last-child:not(:first-child) { - margin-inline-start: calc( - #{cv.getVar("button-padding-horizontal")} * 0.25 - ); - margin-inline-end: calc(-0.5 * #{cv.getVar("button-padding-horizontal")}); - } - - &:first-child:last-child { - margin-inline-start: calc( - -0.5 * #{cv.getVar("button-padding-horizontal")} - ); - margin-inline-end: calc(-0.5 * #{cv.getVar("button-padding-horizontal")}); - } - } - - // States - &:hover, - &.#{iv.$class-prefix}is-hovered { - @include cv.register-vars( - ( - "button-background-l-delta": #{cv.getVar( - "button-hover-background-l-delta" - )}, - "button-border-l-delta": #{cv.getVar("button-hover-border-l-delta")}, - ) - ); - } - - &:focus-visible, - &.#{iv.$class-prefix}is-focused { - @include cv.register-var("button-border-width", 1px); - - border-color: hsl( - #{cv.getVar("focus-h")}, - #{cv.getVar("focus-s")}, - #{cv.getVar("focus-l")} - ); - box-shadow: cv.getVar("focus-shadow-size") - hsla( - cv.getVar("focus-h"), - cv.getVar("focus-s"), - cv.getVar("focus-l"), - cv.getVar("focus-shadow-alpha") - ); - } - - &:active, - &.#{iv.$class-prefix}is-active { - @include cv.register-vars( - ( - "button-background-l-delta": #{cv.getVar( - "button-active-background-l-delta" - )}, - "button-border-l-delta": #{cv.getVar("button-active-border-l-delta")}, - "button-outer-shadow-a": 0, - ) - ); - } - - &[disabled], - fieldset[disabled] & { - background-color: cv.getVar("button-disabled-background-color"); - border-color: cv.getVar("button-disabled-border-color"); - box-shadow: cv.getVar("button-disabled-shadow"); - opacity: cv.getVar("button-disabled-opacity"); - } - - // Colors - @each $name, $pair in $button-colors { - &.#{iv.$class-prefix}is-#{$name} { - @include cv.register-vars( - ( - "button-h": #{cv.getVar($name, "", "-h")}, - "button-s": #{cv.getVar($name, "", "-s")}, - "button-l": #{cv.getVar($name, "", "-l")}, - "button-background-l": #{cv.getVar($name, "", "-l")}, - "button-border-l": #{cv.getVar($name, "", "-l")}, - "button-border-width": 0px, - "button-color-l": #{cv.getVar($name, "", "-invert-l")}, - "button-outer-shadow-a": 0, - ) - ); - - &:focus-visible, - &.#{iv.$class-prefix}is-focused { - @include cv.register-var("button-border-width", 1px); - } - - @if not list.index($no-palette, $name) { - &.#{iv.$class-prefix}is-light { - @include cv.register-vars( - ( - "button-background-l": #{cv.getVar("light-l")}, - "button-color-l": #{cv.getVar($name, "", "-light-invert-l")}, - ) - ); - } - - &.#{iv.$class-prefix}is-dark { - @include cv.register-vars( - ( - "button-background-l": #{cv.getVar("dark-l")}, - "button-color-l": #{cv.getVar($name, "", "-dark-invert-l")}, - ) - ); - } - } - - &.#{iv.$class-prefix}is-soft { - @include cv.register-vars( - ( - "button-background-l": #{cv.getVar("soft-l")}, - "button-color-l": #{cv.getVar("soft-invert-l")}, - ) - ); - } - - &.#{iv.$class-prefix}is-bold { - @include cv.register-vars( - ( - "button-background-l": #{cv.getVar("bold-l")}, - "button-color-l": #{cv.getVar("bold-invert-l")}, - ) - ); - } - - &[disabled], - fieldset[disabled] & { - background-color: cv.getVar($name); - border-color: cv.getVar($name); - box-shadow: none; - } - } - } - - // Styles - &.#{iv.$class-prefix}is-outlined { - @include cv.register-vars( - ( - "button-border-width": max(1px, 0.0625em), - ) - ); - - background-color: transparent; - border-color: hsl( - #{cv.getVar("button-h")}, - #{cv.getVar("button-s")}, - #{cv.getVar("button-l")} - ); - color: hsl( - #{cv.getVar("button-h")}, - #{cv.getVar("button-s")}, - #{cv.getVar("button-l")} - ); - - &:hover { - @include cv.register-vars( - ( - "button-border-width": max(2px, 0.125em), - "button-outer-shadow-alpha": 1, - ) - ); - } - - &:active { - @include cv.register-vars(()); - } - } - - &.#{iv.$class-prefix}is-inverted { - background-color: hsl( - #{cv.getVar("button-h")}, - #{cv.getVar("button-s")}, - calc( - #{cv.getVar("button-color-l")} + #{cv.getVar( - "button-background-l-delta" - )} - ) - ); - color: hsl( - #{cv.getVar("button-h")}, - #{cv.getVar("button-s")}, - #{cv.getVar("button-background-l")} - ); - } - - &.#{iv.$class-prefix}is-text { - background-color: transparent; - border-color: transparent; - color: cv.getVar("button-text-color"); - text-decoration: cv.getVar("button-text-decoration"); - - &:hover, - &.#{iv.$class-prefix}is-hovered { - background-color: cv.getVar("button-text-hover-background-color"); - color: cv.getVar("button-text-hover-color"); - } - - &:active, - &.#{iv.$class-prefix}is-active { - // background-color: bulmaDarken($button-text-hover-background-color, 5%); - color: cv.getVar("button-text-hover-color"); - } - - &[disabled], - fieldset[disabled] & { - background-color: transparent; - border-color: transparent; - box-shadow: none; - } - } - - &.#{iv.$class-prefix}is-ghost { - background: cv.getVar("button-ghost-background"); - border-color: cv.getVar("button-ghost-border-color"); - box-shadow: none; - color: cv.getVar("button-ghost-color"); - text-decoration: cv.getVar("button-ghost-decoration"); - - &:hover, - &.#{iv.$class-prefix}is-hovered { - color: cv.getVar("button-ghost-hover-color"); - text-decoration: cv.getVar("button-ghost-hover-decoration"); - } - } - - // Sizes - &.#{iv.$class-prefix}is-small { - @include cv.register-vars( - ( - "control-size": #{cv.getVar("size-small")}, - "control-radius": #{cv.getVar("radius-small")}, - ) - ); - } - - &.#{iv.$class-prefix}is-normal { - @include cv.register-vars( - ( - "control-size": #{cv.getVar("size-normal")}, - "control-radius": #{cv.getVar("radius")}, - ) - ); - } - - &.#{iv.$class-prefix}is-medium { - @include cv.register-vars( - ( - "control-size": #{cv.getVar("size-medium")}, - "control-radius": #{cv.getVar("radius-medium")}, - ) - ); - } - - &.#{iv.$class-prefix}is-large { - @include cv.register-vars( - ( - "control-size": #{cv.getVar("size-large")}, - "control-radius": #{cv.getVar("radius-medium")}, - ) - ); - } - - // Modifiers - &.#{iv.$class-prefix}is-fullwidth { - display: flex; - width: 100%; - } - - &.#{iv.$class-prefix}is-loading { - box-shadow: none; - color: transparent !important; - pointer-events: none; - - &::after { - @extend %loader; - @include mx.center(1em); - position: absolute !important; - } - } - - &.#{iv.$class-prefix}is-static { - background-color: cv.getVar("button-static-background-color"); - border-color: cv.getVar("button-static-border-color"); - color: cv.getVar("button-static-color"); - box-shadow: none; - pointer-events: none; - } - - &.#{iv.$class-prefix}is-rounded { - border-radius: cv.getVar("radius-rounded"); - padding-left: calc(#{cv.getVar("button-padding-horizontal")} + 0.25em); - padding-right: calc(#{cv.getVar("button-padding-horizontal")} + 0.25em); - } -} - -.#{iv.$class-prefix}buttons { - @extend %block; - align-items: center; - display: flex; - flex-wrap: wrap; - gap: 0.75rem; - justify-content: flex-start; - - // Sizes - &.#{iv.$class-prefix}are-small { - @include cv.register-vars( - ( - "control-size": #{cv.getVar("size-small")}, - "control-radius": #{cv.getVar("radius-small")}, - ) - ); - } - - &.#{iv.$class-prefix}are-medium { - @include cv.register-vars( - ( - "control-size": #{cv.getVar("size-medium")}, - "control-radius": #{cv.getVar("radius-medium")}, - ) - ); - } - - &.#{iv.$class-prefix}are-large { - @include cv.register-vars( - ( - "control-size": #{cv.getVar("size-large")}, - "control-radius": #{cv.getVar("radius-large")}, - ) - ); - } - - &.#{iv.$class-prefix}has-addons { - gap: 0; - - .#{iv.$class-prefix}button { - &:not(:first-child) { - border-end-start-radius: 0; - border-start-start-radius: 0; - } - - &:not(:last-child) { - border-end-end-radius: 0; - border-start-end-radius: 0; - margin-inline-end: -1px; - } - - &:hover, - &.#{iv.$class-prefix}is-hovered { - z-index: 2; - } - - &:focus, - &.#{iv.$class-prefix}is-focused, - &:active, - &.#{iv.$class-prefix}is-active, - &.#{iv.$class-prefix}is-selected { - z-index: 3; - - &:hover { - z-index: 4; - } - } - - &.#{iv.$class-prefix}is-expanded { - flex-grow: 1; - flex-shrink: 1; - } - } - } - - &.#{iv.$class-prefix}is-centered { - justify-content: center; - } - - &.#{iv.$class-prefix}is-right { - justify-content: flex-end; - } -} - -@each $bp-name, $bp-sizes in $button-responsive-sizes { - @include mx.breakpoint($bp-name) { - @each $size, $value in $bp-sizes { - @if $size != "normal" { - .#{iv.$class-prefix}button.#{iv.$class-prefix}is-responsive.#{iv.$class-prefix}is-#{$size} { - font-size: $value; - } - } @else { - .#{iv.$class-prefix}button.#{iv.$class-prefix}is-responsive, - .#{iv.$class-prefix}button.#{iv.$class-prefix}is-responsive.#{iv.$class-prefix}is-normal { - font-size: $value; - } - } - } - } -} diff --git a/styles/bulma/sass/elements/content.scss b/styles/bulma/sass/elements/content.scss deleted file mode 100644 index 4acfa08..0000000 --- a/styles/bulma/sass/elements/content.scss +++ /dev/null @@ -1,283 +0,0 @@ -@use "../utilities/css-variables" as cv; -@use "../utilities/derived-variables" as dv; -@use "../utilities/initial-variables" as iv; -@use "../utilities/extends"; -@use "../utilities/mixins" as mx; - -$content-heading-color: #{cv.getVar("text-strong")} !default; -$content-heading-weight: #{cv.getVar("weight-extrabold")} !default; -$content-heading-line-height: 1.125 !default; - -$content-block-margin-bottom: 1em !default; - -$content-blockquote-background-color: #{cv.getVar("background")} !default; -$content-blockquote-border-left: 5px solid #{cv.getVar("border")} !default; -$content-blockquote-padding: 1.25em 1.5em !default; - -$content-pre-padding: 1.25em 1.5em !default; - -$content-table-cell-border: 1px solid #{cv.getVar("border")} !default; -$content-table-cell-border-width: 0 0 1px !default; -$content-table-cell-padding: 0.5em 0.75em !default; -$content-table-cell-heading-color: #{cv.getVar("text-strong")} !default; -$content-table-head-cell-border-width: 0 0 2px !default; -$content-table-head-cell-color: #{cv.getVar("text-strong")} !default; -$content-table-body-last-row-cell-border-bottom-width: 0 !default; -$content-table-foot-cell-border-width: 2px 0 0 !default; -$content-table-foot-cell-color: #{cv.getVar("text-strong")} !default; - -.#{iv.$class-prefix}content { - @include cv.register-vars( - ( - "content-heading-color": #{$content-heading-color}, - "content-heading-weight": #{$content-heading-weight}, - "content-heading-line-height": #{$content-heading-line-height}, - "content-block-margin-bottom": #{$content-block-margin-bottom}, - "content-blockquote-background-color": #{$content-blockquote-background-color}, - "content-blockquote-border-left": #{$content-blockquote-border-left}, - "content-blockquote-padding": #{$content-blockquote-padding}, - "content-pre-padding": #{$content-pre-padding}, - "content-table-cell-border": #{$content-table-cell-border}, - "content-table-cell-border-width": #{$content-table-cell-border-width}, - "content-table-cell-padding": #{$content-table-cell-padding}, - "content-table-cell-heading-color": #{$content-table-cell-heading-color}, - "content-table-head-cell-border-width": #{$content-table-head-cell-border-width}, - "content-table-head-cell-color": #{$content-table-head-cell-color}, - "content-table-body-last-row-cell-border-bottom-width": #{$content-table-body-last-row-cell-border-bottom-width}, - "content-table-foot-cell-border-width": #{$content-table-foot-cell-border-width}, - "content-table-foot-cell-color": #{$content-table-foot-cell-color}, - ) - ); -} - -.#{iv.$class-prefix}content { - @extend %block; - - // Inline - li + li { - margin-top: 0.25em; - } - - // Block - p, - dl, - ol, - ul, - blockquote, - pre, - table { - &:not(:last-child) { - margin-bottom: cv.getVar("content-block-margin-bottom"); - } - } - - h1, - h2, - h3, - h4, - h5, - h6 { - color: cv.getVar("content-heading-color"); - font-weight: cv.getVar("content-heading-weight"); - line-height: cv.getVar("content-heading-line-height"); - } - - h1 { - font-size: 2em; - margin-bottom: 0.5em; - - &:not(:first-child) { - margin-top: 1em; - } - } - - h2 { - font-size: 1.75em; - margin-bottom: 0.5714em; - - &:not(:first-child) { - margin-top: 1.1428em; - } - } - - h3 { - font-size: 1.5em; - margin-bottom: 0.6666em; - - &:not(:first-child) { - margin-top: 1.3333em; - } - } - - h4 { - font-size: 1.25em; - margin-bottom: 0.8em; - } - - h5 { - font-size: 1.125em; - margin-bottom: 0.8888em; - } - - h6 { - font-size: 1em; - margin-bottom: 1em; - } - - blockquote { - background-color: cv.getVar("content-blockquote-background-color"); - border-inline-start: cv.getVar("content-blockquote-border-left"); - padding: cv.getVar("content-blockquote-padding"); - } - - ol { - list-style-position: outside; - margin-inline-start: 2em; - margin-top: 1em; - - &:not([type]) { - list-style-type: decimal; - - &.#{iv.$class-prefix}is-lower-alpha { - list-style-type: lower-alpha; - } - - &.#{iv.$class-prefix}is-lower-roman { - list-style-type: lower-roman; - } - - &.#{iv.$class-prefix}is-upper-alpha { - list-style-type: upper-alpha; - } - - &.#{iv.$class-prefix}is-upper-roman { - list-style-type: upper-roman; - } - } - } - - ul { - list-style: disc outside; - margin-inline-start: 2em; - margin-top: 1em; - - ul { - list-style-type: circle; - margin-bottom: 0.25em; - margin-top: 0.25em; - - ul { - list-style-type: square; - } - } - } - - dd { - margin-inline-start: 2em; - } - - figure:not([class]) { - margin-left: 2em; - margin-right: 2em; - text-align: center; - - &:not(:first-child) { - margin-top: 2em; - } - - &:not(:last-child) { - margin-bottom: 2em; - } - - img { - display: inline-block; - } - - figcaption { - font-style: italic; - } - } - - pre { - @include mx.overflow-touch; - overflow-x: auto; - padding: cv.getVar("content-pre-padding"); - white-space: pre; - word-wrap: normal; - } - - sup, - sub { - font-size: 75%; - } - - table { - td, - th { - border: cv.getVar("content-table-cell-border"); - border-width: cv.getVar("content-table-cell-border-width"); - padding: cv.getVar("content-table-cell-padding"); - vertical-align: top; - } - - th { - color: cv.getVar("content-table-cell-heading-color"); - - &:not([align]) { - text-align: inherit; - } - } - - thead { - td, - th { - border-width: cv.getVar("content-table-head-cell-border-width"); - color: cv.getVar("content-table-head-cell-color"); - } - } - - tfoot { - td, - th { - border-width: cv.getVar("content-table-foot-cell-border-width"); - color: cv.getVar("content-table-foot-cell-color"); - } - } - - tbody { - tr { - &:last-child { - td, - th { - border-bottom-width: cv.getVar( - "content-table-body-last-row-cell-border-bottom-width" - ); - } - } - } - } - } - - .#{iv.$class-prefix}tabs { - li + li { - margin-top: 0; - } - } - - // Sizes - &.#{iv.$class-prefix}is-small { - font-size: cv.getVar("size-small"); - } - - &.#{iv.$class-prefix}is-normal { - font-size: cv.getVar("size-normal"); - } - - &.#{iv.$class-prefix}is-medium { - font-size: cv.getVar("size-medium"); - } - - &.#{iv.$class-prefix}is-large { - font-size: cv.getVar("size-large"); - } -} diff --git a/styles/bulma/sass/elements/delete.scss b/styles/bulma/sass/elements/delete.scss deleted file mode 100644 index fb9cb43..0000000 --- a/styles/bulma/sass/elements/delete.scss +++ /dev/null @@ -1,6 +0,0 @@ -@use "../utilities/initial-variables" as iv; -@use "../utilities/mixins" as mx; - -.#{iv.$class-prefix}delete { - @include mx.delete; -} diff --git a/styles/bulma/sass/elements/icon.scss b/styles/bulma/sass/elements/icon.scss deleted file mode 100644 index 2df2638..0000000 --- a/styles/bulma/sass/elements/icon.scss +++ /dev/null @@ -1,67 +0,0 @@ -@use "../utilities/css-variables" as cv; -@use "../utilities/initial-variables" as iv; - -$icon-dimensions: 1.5rem !default; -$icon-dimensions-small: 1rem !default; -$icon-dimensions-medium: 2rem !default; -$icon-dimensions-large: 3rem !default; -$icon-text-spacing: 0.25em !default; - -.#{iv.$class-prefix}icon, -.#{iv.$class-prefix}icon-text { - @include cv.register-vars( - ( - "icon-dimensions": #{$icon-dimensions}, - "icon-dimensions-small": #{$icon-dimensions-small}, - "icon-dimensions-medium": #{$icon-dimensions-medium}, - "icon-dimensions-large": #{$icon-dimensions-large}, - "icon-text-spacing": #{$icon-text-spacing}, - ) - ); -} - -.#{iv.$class-prefix}icon { - align-items: center; - display: inline-flex; - flex-shrink: 0; - justify-content: center; - height: cv.getVar("icon-dimensions"); - transition-duration: cv.getVar("duration"); - transition-property: color; - width: cv.getVar("icon-dimensions"); - - // Sizes - &.#{iv.$class-prefix}is-small { - height: cv.getVar("icon-dimensions-small"); - width: cv.getVar("icon-dimensions-small"); - } - - &.#{iv.$class-prefix}is-medium { - height: cv.getVar("icon-dimensions-medium"); - width: cv.getVar("icon-dimensions-medium"); - } - - &.#{iv.$class-prefix}is-large { - height: cv.getVar("icon-dimensions-large"); - width: cv.getVar("icon-dimensions-large"); - } -} - -.#{iv.$class-prefix}icon-text { - align-items: flex-start; - color: inherit; - display: inline-flex; - flex-wrap: wrap; - gap: cv.getVar("icon-text-spacing"); - line-height: cv.getVar("icon-dimensions"); - vertical-align: top; - - .#{iv.$class-prefix}icon { - flex-grow: 0; - flex-shrink: 0; - } -} - -div.#{iv.$class-prefix}icon-text { - display: flex; -} diff --git a/styles/bulma/sass/elements/image.scss b/styles/bulma/sass/elements/image.scss deleted file mode 100644 index 8e5106e..0000000 --- a/styles/bulma/sass/elements/image.scss +++ /dev/null @@ -1,62 +0,0 @@ -@use "../utilities/initial-variables" as iv; -@use "../utilities/css-variables" as cv; -@use "../utilities/mixins" as mx; - -$dimensions: 16 24 32 48 64 96 128 !default; - -.#{iv.$class-prefix}image { - display: block; - position: relative; - - img { - display: block; - height: auto; - width: 100%; - - &.#{iv.$class-prefix}is-rounded { - border-radius: cv.getVar("radius-rounded"); - } - } - - &.#{iv.$class-prefix}is-fullwidth { - width: 100%; - } - - // Ratio - &.#{iv.$class-prefix}is-square { - img, - .#{iv.$class-prefix}has-ratio { - @include mx.overlay; - height: 100%; - width: 100%; - } - } - - &.#{iv.$class-prefix}is-square { - aspect-ratio: 1; - } - - @each $pair in iv.$aspect-ratios { - $w: nth($pair, 1); - $h: nth($pair, 2); - - &.#{iv.$class-prefix}is-#{$w}by#{$h} { - aspect-ratio: #{$w} / #{$h}; - - img, - .#{iv.$class-prefix}has-ratio { - @include mx.overlay; - height: 100%; - width: 100%; - } - } - } - - // Sizes - @each $dimension in $dimensions { - &.#{iv.$class-prefix}is-#{$dimension}x#{$dimension} { - height: $dimension * 1px; - width: $dimension * 1px; - } - } -} diff --git a/styles/bulma/sass/elements/loader.scss b/styles/bulma/sass/elements/loader.scss deleted file mode 100644 index 3cd1a26..0000000 --- a/styles/bulma/sass/elements/loader.scss +++ /dev/null @@ -1,15 +0,0 @@ -@use "../utilities/css-variables" as cv; -@use "../utilities/initial-variables" as iv; - -.#{iv.$class-prefix}loader { - animation: spinAround 500ms infinite linear; - border: 2px solid cv.getVar("border"); - border-radius: cv.getVar("radius-rounded"); - border-right-color: transparent; - border-top-color: transparent; - content: ""; - display: block; - height: 1em; - position: relative; - width: 1em; -} diff --git a/styles/bulma/sass/elements/notification.scss b/styles/bulma/sass/elements/notification.scss deleted file mode 100644 index 0e0df7e..0000000 --- a/styles/bulma/sass/elements/notification.scss +++ /dev/null @@ -1,105 +0,0 @@ -@use "../utilities/css-variables" as cv; -@use "../utilities/derived-variables" as dv; -@use "../utilities/initial-variables" as iv; -@use "../utilities/extends"; -@use "../utilities/mixins" as mx; - -$notification-code-background-color: cv.getVar("scheme-main") !default; -$notification-radius: cv.getVar("radius") !default; -$notification-padding: 1.375em 1.5em !default; - -$notification-colors: dv.$colors !default; - -.#{iv.$class-prefix}notification { - @include cv.register-vars( - ( - "notification-h": #{cv.getVar("scheme-h")}, - "notification-s": #{cv.getVar("scheme-s")}, - "notification-background-l": #{cv.getVar("background-l")}, - "notification-color-l": #{cv.getVar("text-strong-l")}, - "notification-code-background-color": #{$notification-code-background-color}, - "notification-radius": #{$notification-radius}, - "notification-padding": #{$notification-padding}, - ) - ); -} - -.#{iv.$class-prefix}notification { - @extend %block; - - background-color: hsl( - cv.getVar("notification-h"), - cv.getVar("notification-s"), - cv.getVar("notification-background-l") - ); - border-radius: cv.getVar("notification-radius"); - color: hsl( - cv.getVar("notification-h"), - cv.getVar("notification-s"), - cv.getVar("notification-color-l") - ); - padding: cv.getVar("notification-padding"); - position: relative; - - a:not(.#{iv.$class-prefix}button):not(.#{iv.$class-prefix}dropdown-item) { - color: currentColor; - text-decoration: underline; - } - - strong { - color: currentColor; - } - - code, - pre { - background: cv.getVar("notification-code-background-color"); - } - - pre code { - background: transparent; - } - - & > .#{iv.$class-prefix}delete { - position: absolute; - inset-inline-end: 1rem; - top: 1rem; - } - - .#{iv.$class-prefix}title, - .#{iv.$class-prefix}subtitle, - .#{iv.$class-prefix}content { - color: currentColor; - } - - // Colors - @each $name, $pair in $notification-colors { - &.#{iv.$class-prefix}is-#{$name} { - @include cv.register-vars( - ( - "notification-h": #{cv.getVar($name, "", "-h")}, - "notification-s": #{cv.getVar($name, "", "-s")}, - "notification-background-l": #{cv.getVar($name, "", "-l")}, - "notification-color-l": #{cv.getVar($name, "", "-invert-l")}, - ) - ); - - &.#{iv.$class-prefix}is-light { - @include cv.register-vars( - ( - "notification-background-l": 90%, - "notification-color-l": #{cv.getVar($name, "", "-light-invert-l")}, - ) - ); - } - - &.#{iv.$class-prefix}is-dark { - @include cv.register-vars( - ( - "notification-background-l": 20%, - "notification-color-l": #{cv.getVar($name, "", "-dark-invert-l")}, - ) - ); - } - } - } -} diff --git a/styles/bulma/sass/elements/progress.scss b/styles/bulma/sass/elements/progress.scss deleted file mode 100644 index 2c38af4..0000000 --- a/styles/bulma/sass/elements/progress.scss +++ /dev/null @@ -1,115 +0,0 @@ -@use "../utilities/css-variables" as cv; -@use "../utilities/derived-variables" as dv; -@use "../utilities/initial-variables" as iv; -@use "../utilities/extends"; -@use "../utilities/mixins" as mx; - -$progress-bar-background-color: cv.getVar("border-weak") !default; -$progress-value-background-color: cv.getVar("text") !default; -$progress-border-radius: cv.getVar("radius-rounded") !default; - -$progress-indeterminate-duration: 1.5s !default; - -$progress-colors: dv.$colors !default; - -.#{iv.$class-prefix}progress { - @include cv.register-vars( - ( - "progress-border-radius": #{$progress-border-radius}, - "progress-bar-background-color": #{$progress-bar-background-color}, - "progress-value-background-color": #{$progress-value-background-color}, - "progress-indeterminate-duration": #{$progress-indeterminate-duration}, - ) - ); -} - -.#{iv.$class-prefix}progress { - @extend %block; - - appearance: none; - border: none; - border-radius: cv.getVar("progress-border-radius"); - display: block; - height: cv.getVar("size-normal"); - overflow: hidden; - padding: 0; - width: 100%; - - &::-webkit-progress-bar { - background-color: cv.getVar("progress-bar-background-color"); - } - - &::-webkit-progress-value { - background-color: cv.getVar("progress-value-background-color"); - } - - &::-moz-progress-bar { - background-color: cv.getVar("progress-value-background-color"); - } - - &::-ms-fill { - background-color: cv.getVar("progress-value-background-color"); - border: none; - } - - // Colors - @each $name, $pair in $progress-colors { - &.#{iv.$class-prefix}is-#{$name} { - @include cv.register-var( - "progress-value-background-color", - #{cv.getVar($name)} - ); - } - } - - &:indeterminate { - animation-duration: cv.getVar("progress-indeterminate-duration"); - animation-iteration-count: infinite; - animation-name: moveIndeterminate; - animation-timing-function: linear; - background-color: cv.getVar("progress-bar-background-color"); - background-image: linear-gradient( - to right, - cv.getVar("progress-value-background-color") 30%, - cv.getVar("progress-bar-background-color") 30% - ); - background-position: top left; - background-repeat: no-repeat; - background-size: 150% 150%; - - &::-webkit-progress-bar { - background-color: transparent; - } - - &::-moz-progress-bar { - background-color: transparent; - } - - &::-ms-fill { - animation-name: none; - } - } - - // Sizes - &.#{iv.$class-prefix}is-small { - height: cv.getVar("size-small"); - } - - &.#{iv.$class-prefix}is-medium { - height: cv.getVar("size-medium"); - } - - &.#{iv.$class-prefix}is-large { - height: cv.getVar("size-large"); - } -} - -@keyframes moveIndeterminate { - from { - background-position: 200% 0; - } - - to { - background-position: (-200%) 0; - } -} diff --git a/styles/bulma/sass/elements/table.scss b/styles/bulma/sass/elements/table.scss deleted file mode 100644 index 97b6e92..0000000 --- a/styles/bulma/sass/elements/table.scss +++ /dev/null @@ -1,261 +0,0 @@ -@use "../utilities/css-variables" as cv; -@use "../utilities/derived-variables" as dv; -@use "../utilities/initial-variables" as iv; -@use "../utilities/extends"; -@use "../utilities/mixins" as mx; - -$table-color: cv.getVar("text-strong") !default; -$table-background-color: cv.getVar("scheme-main") !default; - -$table-cell-border-color: cv.getVar("border") !default; -$table-cell-border-style: solid !default; -$table-cell-border-width: 0 0 1px !default; -$table-cell-padding: 0.5em 0.75em !default; -$table-cell-heading-color: cv.getVar("text-strong") !default; -$table-cell-text-align: left !default; - -$table-head-cell-border-width: 0 0 2px !default; -$table-head-cell-color: cv.getVar("text-strong") !default; -$table-foot-cell-border-width: 2px 0 0 !default; -$table-foot-cell-color: cv.getVar("text-strong") !default; - -$table-head-background-color: transparent !default; -$table-body-background-color: transparent !default; -$table-foot-background-color: transparent !default; - -$table-row-hover-background-color: cv.getVar("scheme-main-bis") !default; - -$table-row-active-background-color: cv.getVar("primary") !default; -$table-row-active-color: cv.getVar("primary-invert") !default; - -$table-striped-row-even-background-color: cv.getVar("scheme-main-bis") !default; -$table-striped-row-even-hover-background-color: cv.getVar( - "scheme-main-ter" -) !default; - -$table-colors: dv.$colors !default; - -.#{iv.$class-prefix}table { - @include cv.register-vars( - ( - "table-color": #{$table-color}, - "table-background-color": #{$table-background-color}, - "table-cell-border-color": #{$table-cell-border-color}, - "table-cell-border-style": #{$table-cell-border-style}, - "table-cell-border-width": #{$table-cell-border-width}, - "table-cell-padding": #{$table-cell-padding}, - "table-cell-heading-color": #{$table-cell-heading-color}, - "table-cell-text-align": #{$table-cell-text-align}, - "table-head-cell-border-width": #{$table-head-cell-border-width}, - "table-head-cell-color": #{$table-head-cell-color}, - "table-foot-cell-border-width": #{$table-foot-cell-border-width}, - "table-foot-cell-color": #{$table-foot-cell-color}, - "table-head-background-color": #{$table-head-background-color}, - "table-body-background-color": #{$table-body-background-color}, - "table-foot-background-color": #{$table-foot-background-color}, - "table-row-hover-background-color": #{$table-row-hover-background-color}, - "table-row-active-background-color": #{$table-row-active-background-color}, - "table-row-active-color": #{$table-row-active-color}, - "table-striped-row-even-background-color": #{$table-striped-row-even-background-color}, - "table-striped-row-even-hover-background-color": #{$table-striped-row-even-hover-background-color}, - ) - ); -} - -.#{iv.$class-prefix}table { - @extend %block; - - background-color: cv.getVar("table-background-color"); - color: cv.getVar("table-color"); - - td, - th { - background-color: cv.getVar("table-cell-background-color"); - border-color: cv.getVar("table-cell-border-color"); - border-style: cv.getVar("table-cell-border-style"); - border-width: cv.getVar("table-cell-border-width"); - color: cv.getVar("table-color"); - padding: cv.getVar("table-cell-padding"); - vertical-align: top; - - // Colors - @each $name, $pair in $table-colors { - &.#{iv.$class-prefix}is-#{$name} { - @include cv.register-vars( - ( - "table-color": #{cv.getVar($name, "", "-invert")}, - "table-cell-heading-color": #{cv.getVar($name, "", "-invert")}, - "table-cell-background-color": #{cv.getVar($name)}, - "table-cell-border-color": #{cv.getVar($name)}, - ) - ); - } - } - - // Modifiers - &.#{iv.$class-prefix}is-narrow { - white-space: nowrap; - width: 1%; - } - - &.#{iv.$class-prefix}is-selected { - background-color: cv.getVar("table-row-active-background-color"); - color: cv.getVar("table-row-active-color"); - - a, - strong { - color: currentColor; - } - } - - &.#{iv.$class-prefix}is-vcentered { - vertical-align: middle; - } - } - - th { - color: cv.getVar("table-cell-heading-color"); - - &:not([align]) { - text-align: cv.getVar("table-cell-text-align"); - } - } - - tr { - &.#{iv.$class-prefix}is-selected { - background-color: cv.getVar("table-row-active-background-color"); - color: cv.getVar("table-row-active-color"); - - a, - strong { - color: currentColor; - } - - td, - th { - border-color: cv.getVar("table-row-active-color"); - color: currentColor; - } - } - - @each $name, $pair in $table-colors { - &.#{iv.$class-prefix}is-#{$name} { - @include cv.register-vars( - ( - "table-color": #{cv.getVar($name, "", "-invert")}, - "table-cell-heading-color": #{cv.getVar($name, "", "-invert")}, - "table-cell-background-color": #{cv.getVar($name)}, - "table-cell-border-color": #{cv.getVar($name)}, - ) - ); - } - } - } - - thead { - background-color: cv.getVar("table-head-background-color"); - - td, - th { - border-width: cv.getVar("table-head-cell-border-width"); - color: cv.getVar("table-head-cell-color"); - } - } - - tfoot { - background-color: cv.getVar("table-foot-background-color"); - - td, - th { - border-width: cv.getVar("table-foot-cell-border-width"); - color: cv.getVar("table-foot-cell-color"); - } - } - - tbody { - background-color: cv.getVar("table-body-background-color"); - - tr { - &:last-child { - td, - th { - border-bottom-width: 0; - } - } - } - } - - // Modifiers - &.#{iv.$class-prefix}is-bordered { - td, - th { - border-width: 1px; - } - - tr { - &:last-child { - td, - th { - border-bottom-width: 1px; - } - } - } - } - - &.#{iv.$class-prefix}is-fullwidth { - width: 100%; - } - - &.#{iv.$class-prefix}is-hoverable { - tbody { - tr:not(.#{iv.$class-prefix}is-selected) { - &:hover { - background-color: cv.getVar("table-row-hover-background-color"); - } - } - } - - &.#{iv.$class-prefix}is-striped { - tbody { - tr:not(.#{iv.$class-prefix}is-selected) { - &:hover { - background-color: cv.getVar("table-row-hover-background-color"); - - &:nth-child(even) { - background-color: cv.getVar( - "table-striped-row-even-hover-background-color" - ); - } - } - } - } - } - } - - &.#{iv.$class-prefix}is-narrow { - td, - th { - padding: 0.25em 0.5em; - } - } - - &.#{iv.$class-prefix}is-striped { - tbody { - tr:not(.#{iv.$class-prefix}is-selected) { - &:nth-child(even) { - background-color: cv.getVar( - "table-striped-row-even-background-color" - ); - } - } - } - } -} - -.#{iv.$class-prefix}table-container { - @extend %block; - @include mx.overflow-touch; - overflow: auto; - overflow-y: hidden; - max-width: 100%; -} diff --git a/styles/bulma/sass/elements/tag.scss b/styles/bulma/sass/elements/tag.scss deleted file mode 100644 index 336fa97..0000000 --- a/styles/bulma/sass/elements/tag.scss +++ /dev/null @@ -1,219 +0,0 @@ -@use "../utilities/css-variables" as cv; -@use "../utilities/derived-variables" as dv; -@use "../utilities/initial-variables" as iv; -@use "../utilities/extends"; -@use "../utilities/mixins" as mx; - -$tag-h: cv.getVar("scheme-h"); -$tag-s: cv.getVar("scheme-s"); -$tag-background-l: cv.getVar("background-l"); -$tag-background-l-delta: 0%; -$tag-hover-background-l-delta: cv.getVar("hover-background-l-delta"); -$tag-active-background-l-delta: cv.getVar("active-background-l-delta"); -$tag-color-l: cv.getVar("text-l"); -$tag-radius: cv.getVar("radius") !default; -$tag-delete-margin: 1px !default; - -$tag-colors: dv.$colors !default; - -.#{iv.$class-prefix}tags { - @extend %block; - - align-items: center; - color: hsl(cv.getVar("tag-h"), cv.getVar("tag-s"), cv.getVar("tag-color-l")); - display: flex; - flex-wrap: wrap; - gap: 0.5rem; - justify-content: flex-start; - - // Sizes - &.#{iv.$class-prefix}are-medium { - .#{iv.$class-prefix}tag:not(.#{iv.$class-prefix}is-normal):not( - .#{iv.$class-prefix}is-large - ) { - font-size: cv.getVar("size-normal"); - } - } - - &.#{iv.$class-prefix}are-large { - .#{iv.$class-prefix}tag:not(.#{iv.$class-prefix}is-normal):not( - .#{iv.$class-prefix}is-medium - ) { - font-size: cv.getVar("size-medium"); - } - } - - &.#{iv.$class-prefix}is-centered { - gap: 0.25rem; - justify-content: center; - } - - &.#{iv.$class-prefix}is-right { - justify-content: flex-end; - } - - &.#{iv.$class-prefix}has-addons { - gap: 0; - - .#{iv.$class-prefix}tag { - &:not(:first-child) { - border-start-start-radius: 0; // Top left - border-end-start-radius: 0; // Top right - } - - &:not(:last-child) { - border-start-end-radius: 0; // Bottom left - border-end-end-radius: 0; // Bottom right - } - } - } -} - -.#{iv.$class-prefix}tag { - @include cv.register-vars( - ( - "tag-h": #{$tag-h}, - "tag-s": #{$tag-s}, - "tag-background-l": #{$tag-background-l}, - "tag-background-l-delta": #{$tag-background-l-delta}, - "tag-hover-background-l-delta": #{$tag-hover-background-l-delta}, - "tag-active-background-l-delta": #{$tag-active-background-l-delta}, - "tag-color-l": #{$tag-color-l}, - "tag-radius": #{$tag-radius}, - "tag-delete-margin": #{$tag-delete-margin}, - ) - ); - - align-items: center; - background-color: hsl( - cv.getVar("tag-h"), - cv.getVar("tag-s"), - calc( - #{cv.getVar("tag-background-l")} + #{cv.getVar("tag-background-l-delta")} - ) - ); - border-radius: $tag-radius; - color: hsl(cv.getVar("tag-h"), cv.getVar("tag-s"), cv.getVar("tag-color-l")); - display: inline-flex; - font-size: cv.getVar("size-small"); - height: 2em; - justify-content: center; - line-height: 1.5; - padding-left: 0.75em; - padding-right: 0.75em; - white-space: nowrap; - - .#{iv.$class-prefix}delete { - margin-inline-start: 0.25rem; - margin-inline-end: -0.375rem; - } - - // Colors - @each $name, $pair in $tag-colors { - &.#{iv.$class-prefix}is-#{$name} { - @include cv.register-vars( - ( - "tag-h": #{cv.getVar($name, "", "-h")}, - "tag-s": #{cv.getVar($name, "", "-s")}, - "tag-background-l": #{cv.getVar($name, "", "-l")}, - "tag-color-l": #{cv.getVar($name, "", "-invert-l")}, - ) - ); - - &.#{iv.$class-prefix}is-light { - @include cv.register-vars( - ( - "tag-background-l": #{cv.getVar("light-l")}, - "tag-color-l": #{cv.getVar($name, "", "-light-invert-l")}, - ) - ); - } - } - } - - // Sizes - &.#{iv.$class-prefix}is-normal { - font-size: cv.getVar("size-small"); - } - - &.#{iv.$class-prefix}is-medium { - font-size: cv.getVar("size-normal"); - } - - &.#{iv.$class-prefix}is-large { - font-size: cv.getVar("size-medium"); - } - - .#{iv.$class-prefix}icon { - &:first-child:not(:last-child) { - margin-inline-start: -0.375em; - margin-inline-end: 0.1875em; - } - - &:last-child:not(:first-child) { - margin-inline-start: 0.1875em; - margin-inline-end: -0.375em; - } - - &:first-child:last-child { - margin-inline-start: -0.375em; - margin-inline-end: -0.375em; - } - } - - // Modifiers - &.#{iv.$class-prefix}is-delete { - margin-inline-start: cv.getVar("tag-delete-margin"); - padding: 0; - position: relative; - width: 2em; - - &::before, - &::after { - background-color: currentColor; - content: ""; - display: block; - left: 50%; - position: absolute; - top: 50%; - transform: translateX(-50%) translateY(-50%) rotate(45deg); - transform-origin: center center; - } - - &::before { - height: 1px; - width: 50%; - } - - &::after { - height: 50%; - width: 1px; - } - } - - &.#{iv.$class-prefix}is-rounded { - border-radius: cv.getVar("radius-rounded"); - } -} - -a.#{iv.$class-prefix}tag, -button.#{iv.$class-prefix}tag, -.#{iv.$class-prefix}tag.is-hoverable { - cursor: pointer; - - &:hover { - @include cv.register-vars( - ( - "tag-background-l-delta": #{cv.getVar("tag-hover-background-l-delta")}, - ) - ); - } - - &:active { - @include cv.register-vars( - ( - "tag-background-l-delta": #{cv.getVar("tag-active-background-l-delta")}, - ) - ); - } -} diff --git a/styles/bulma/sass/elements/title.scss b/styles/bulma/sass/elements/title.scss deleted file mode 100644 index b416689..0000000 --- a/styles/bulma/sass/elements/title.scss +++ /dev/null @@ -1,128 +0,0 @@ -@use "../utilities/css-variables" as cv; -@use "../utilities/derived-variables" as dv; -@use "../utilities/initial-variables" as iv; -@use "../utilities/extends"; -@use "../utilities/mixins" as mx; - -$title-color: cv.getVar("text-strong") !default; -$title-family: false !default; -$title-size: cv.getVar("size-3") !default; -$title-weight: cv.getVar("weight-extrabold") !default; -$title-line-height: 1.125 !default; -$title-strong-color: inherit !default; -$title-strong-weight: inherit !default; -$title-sub-size: 0.75em !default; -$title-sup-size: 0.75em !default; - -$subtitle-color: cv.getVar("text") !default; -$subtitle-family: false !default; -$subtitle-size: cv.getVar("size-5") !default; -$subtitle-weight: cv.getVar("weight-normal") !default; -$subtitle-line-height: 1.25 !default; -$subtitle-strong-color: cv.getVar("text-strong") !default; -$subtitle-strong-weight: cv.getVar("weight-semibold") !default; - -.#{iv.$class-prefix}title, -.#{iv.$class-prefix}subtitle { - @include cv.register-vars( - ( - "title-color": #{$title-color}, - "title-family": #{$title-family}, - "title-size": #{$title-size}, - "title-weight": #{$title-weight}, - "title-line-height": #{$title-line-height}, - "title-strong-color": #{$title-strong-color}, - "title-strong-weight": #{$title-strong-weight}, - "title-sub-size": #{$title-sub-size}, - "title-sup-size": #{$title-sup-size}, - "subtitle-color": #{$subtitle-color}, - "subtitle-family": #{$subtitle-family}, - "subtitle-size": #{$subtitle-size}, - "subtitle-weight": #{$subtitle-weight}, - "subtitle-line-height": #{$subtitle-line-height}, - "subtitle-strong-color": #{$subtitle-strong-color}, - "subtitle-strong-weight": #{$subtitle-strong-weight}, - ) - ); -} - -.#{iv.$class-prefix}title, -.#{iv.$class-prefix}subtitle { - @extend %block; - word-break: break-word; - - em, - span { - font-weight: inherit; - } - - sub { - font-size: cv.getVar("title-sub-size"); - } - - sup { - font-size: cv.getVar("title-sup-size"); - } - - .#{iv.$class-prefix}tag { - vertical-align: middle; - } -} - -.#{iv.$class-prefix}title { - color: cv.getVar("title-color"); - font-size: cv.getVar("title-size"); - font-weight: cv.getVar("title-weight"); - line-height: cv.getVar("title-line-height"); - - @if $title-family { - font-family: cv.getVar("title-family"); - } - - strong { - color: cv.getVar("title-strong-color"); - font-weight: cv.getVar("title-strong-weight"); - } - - &:not(.#{iv.$class-prefix}is-spaced):has(+ .#{iv.$class-prefix}subtitle) { - margin-bottom: 0; - } - - // Sizes - @each $size in dv.$sizes { - $i: index(dv.$sizes, $size); - - &.#{iv.$class-prefix}is-#{$i} { - font-size: $size; - } - } -} - -.#{iv.$class-prefix}subtitle { - color: cv.getVar("subtitle-color"); - font-size: cv.getVar("subtitle-size"); - font-weight: cv.getVar("subtitle-weight"); - line-height: cv.getVar("subtitle-line-height"); - - @if $subtitle-family { - font-family: cv.getVar("subtitle-family"); - } - - strong { - color: cv.getVar("subtitle-strong-color"); - font-weight: cv.getVar("subtitle-strong-weight"); - } - - &:not(.#{iv.$class-prefix}is-spaced):has(+ .#{iv.$class-prefix}title) { - margin-bottom: 0; - } - - // Sizes - @each $size in dv.$sizes { - $i: index(dv.$sizes, $size); - - &.#{iv.$class-prefix}is-#{$i} { - font-size: $size; - } - } -} diff --git a/styles/bulma/sass/form/_index.scss b/styles/bulma/sass/form/_index.scss deleted file mode 100644 index 7c1214d..0000000 --- a/styles/bulma/sass/form/_index.scss +++ /dev/null @@ -1,9 +0,0 @@ -/* Bulma Form */ -@charset "utf-8"; - -@forward "shared"; -@forward "input-textarea"; -@forward "checkbox-radio"; -@forward "select"; -@forward "file"; -@forward "tools"; diff --git a/styles/bulma/sass/form/checkbox-radio.scss b/styles/bulma/sass/form/checkbox-radio.scss deleted file mode 100644 index 39dc530..0000000 --- a/styles/bulma/sass/form/checkbox-radio.scss +++ /dev/null @@ -1,32 +0,0 @@ -@use "shared"; -@use "../utilities/initial-variables" as iv; - -%checkbox-radio { - cursor: pointer; - display: inline-block; - line-height: 1.25; - position: relative; - - input { - cursor: pointer; - } - - &[disabled], - fieldset[disabled] &, - input[disabled] { - color: shared.$input-disabled-color; - cursor: not-allowed; - } -} - -.#{iv.$class-prefix}checkbox { - @extend %checkbox-radio; -} - -.#{iv.$class-prefix}radio { - @extend %checkbox-radio; - - & + .#{iv.$class-prefix}radio { - margin-inline-start: 0.5em; - } -} diff --git a/styles/bulma/sass/form/file.scss b/styles/bulma/sass/form/file.scss deleted file mode 100644 index c75d4a1..0000000 --- a/styles/bulma/sass/form/file.scss +++ /dev/null @@ -1,330 +0,0 @@ -@use "shared"; -@use "../utilities/css-variables" as cv; -@use "../utilities/initial-variables" as iv; -@use "../utilities/controls"; -@use "../utilities/extends"; - -$file-radius: cv.getVar("radius") !default; - -$file-h: cv.getVar("scheme-h"); -$file-s: cv.getVar("scheme-s"); -$file-background-l: cv.getVar("scheme-main-ter-l"); -$file-background-l-delta: 0%; -$file-hover-background-l-delta: -5%; -$file-active-background-l-delta: -10%; -$file-border-l: cv.getVar("border-l"); -$file-border-l-delta: 0%; -$file-hover-border-l-delta: -10%; -$file-active-border-l-delta: -20%; -$file-cta-color-l: cv.getVar("text-strong-l"); -$file-name-color-l: cv.getVar("text-strong-l"); -$file-color-l-delta: 0%; -$file-hover-color-l-delta: -5%; -$file-active-color-l-delta: -10%; - -$file-cta-color: cv.getVar("text") !default; -$file-cta-hover-color: cv.getVar("text-strong") !default; -$file-cta-active-color: cv.getVar("text-strong") !default; - -$file-name-border-color: cv.getVar("border") !default; -$file-name-border-style: solid !default; -$file-name-border-width: 1px 1px 1px 0 !default; -$file-name-max-width: 16em !default; - -$file-colors: shared.$form-colors !default; - -.#{iv.$class-prefix}file { - @extend %block; - @extend %unselectable; - - @include cv.register-vars( - ( - "file-radius": #{$file-radius}, - "file-name-border-color": #{$file-name-border-color}, - "file-name-border-style": #{$file-name-border-style}, - "file-name-border-width": #{$file-name-border-width}, - "file-name-max-width": #{$file-name-max-width}, - "file-h": #{$file-h}, - "file-s": #{$file-s}, - "file-background-l": #{$file-background-l}, - "file-background-l-delta": #{$file-background-l-delta}, - "file-hover-background-l-delta": #{$file-hover-background-l-delta}, - "file-active-background-l-delta": #{$file-active-background-l-delta}, - "file-border-l": #{$file-border-l}, - "file-border-l-delta": #{$file-border-l-delta}, - "file-hover-border-l-delta": #{$file-hover-border-l-delta}, - "file-active-border-l-delta": #{$file-active-border-l-delta}, - "file-cta-color-l": #{$file-cta-color-l}, - "file-name-color-l": #{$file-name-color-l}, - "file-color-l-delta": #{$file-color-l-delta}, - "file-hover-color-l-delta": #{$file-hover-color-l-delta}, - "file-active-color-l-delta": #{$file-active-color-l-delta}, - ) - ); - - align-items: stretch; - display: flex; - justify-content: flex-start; - position: relative; - - // Colors - @each $name, $pair in $file-colors { - &.#{iv.$class-prefix}is-#{$name} { - @include cv.register-vars( - ( - "file-h": #{cv.getVar($name, "", "-h")}, - "file-s": #{cv.getVar($name, "", "-s")}, - "file-background-l": #{cv.getVar($name, "", "-l")}, - "file-border-l": #{cv.getVar($name, "", "-l")}, - "file-cta-color-l": #{cv.getVar($name, "", "-invert-l")}, - "file-name-color-l": #{cv.getVar($name, "", "-on-scheme-l")}, - ) - ); - } - } - - // Sizes - &.#{iv.$class-prefix}is-small { - font-size: cv.getVar("size-small"); - } - - &.#{iv.$class-prefix}is-normal { - font-size: cv.getVar("size-normal"); - } - - &.#{iv.$class-prefix}is-medium { - font-size: cv.getVar("size-medium"); - - .#{iv.$class-prefix}file-icon { - .#{iv.$class-prefix}fa { - font-size: 1.5rem; - } - } - } - - &.#{iv.$class-prefix}is-large { - font-size: cv.getVar("size-large"); - - .#{iv.$class-prefix}file-icon { - .#{iv.$class-prefix}fa { - font-size: 2rem; - } - } - } - - // Modifiers - &.#{iv.$class-prefix}has-name { - .#{iv.$class-prefix}file-cta { - border-end-end-radius: 0; - border-start-end-radius: 0; - } - - .#{iv.$class-prefix}file-name { - border-end-start-radius: 0; - border-start-start-radius: 0; - } - - &.#{iv.$class-prefix}is-empty { - .#{iv.$class-prefix}file-cta { - border-radius: cv.getVar("file-radius"); - } - - .#{iv.$class-prefix}file-name { - display: none; - } - } - } - - &.#{iv.$class-prefix}is-boxed { - .#{iv.$class-prefix}file-label { - flex-direction: column; - } - - .#{iv.$class-prefix}file-cta { - flex-direction: column; - height: auto; - padding: 1em 3em; - } - - .#{iv.$class-prefix}file-name { - border-width: 0 1px 1px; - } - - .#{iv.$class-prefix}file-icon { - height: 1.5em; - width: 1.5em; - - .#{iv.$class-prefix}fa { - font-size: 1.5rem; - } - } - - &.#{iv.$class-prefix}is-small { - .#{iv.$class-prefix}file-icon .#{iv.$class-prefix}fa { - font-size: 1rem; - } - } - - &.#{iv.$class-prefix}is-medium { - .#{iv.$class-prefix}file-icon .#{iv.$class-prefix}fa { - font-size: 2rem; - } - } - - &.#{iv.$class-prefix}is-large { - .#{iv.$class-prefix}file-icon .#{iv.$class-prefix}fa { - font-size: 2.5rem; - } - } - - &.#{iv.$class-prefix}has-name { - .#{iv.$class-prefix}file-cta { - border-end-end-radius: 0; - border-end-start-radius: 0; - border-start-end-radius: cv.getVar("file-radius"); - border-start-start-radius: cv.getVar("file-radius"); - } - - .#{iv.$class-prefix}file-name { - border-end-end-radius: cv.getVar("file-radius"); - border-end-start-radius: cv.getVar("file-radius"); - border-start-end-radius: 0; - border-start-start-radius: 0; - border-width: 0 1px 1px; - } - } - } - - &.#{iv.$class-prefix}is-centered { - justify-content: center; - } - - &.#{iv.$class-prefix}is-fullwidth { - .#{iv.$class-prefix}file-label { - width: 100%; - } - - .#{iv.$class-prefix}file-name { - flex-grow: 1; - max-width: none; - } - } - - &.#{iv.$class-prefix}is-right { - justify-content: flex-end; - - .#{iv.$class-prefix}file-cta { - border-radius: 0 cv.getVar("file-radius") cv.getVar("file-radius") 0; - } - - .#{iv.$class-prefix}file-name { - border-radius: cv.getVar("file-radius") 0 0 cv.getVar("file-radius"); - border-width: 1px 0 1px 1px; - order: -1; - } - } -} - -.#{iv.$class-prefix}file-label { - align-items: stretch; - display: flex; - cursor: pointer; - justify-content: flex-start; - overflow: hidden; - position: relative; - - &:hover { - @include cv.register-vars( - ( - "file-background-l-delta": #{cv.getVar("file-hover-background-l-delta")}, - "file-border-l-delta": #{cv.getVar("file-hover-border-l-delta")}, - "file-color-l-delta": #{cv.getVar("file-hover-color-l-delta")}, - ) - ); - } - - &:active { - @include cv.register-vars( - ( - "file-background-l-delta": #{cv.getVar("file-active-background-l-delta")}, - "file-border-l-delta": #{cv.getVar("file-active-border-l-delta")}, - "file-color-l-delta": #{cv.getVar("file-active-color-l-delta")}, - ) - ); - } -} - -.#{iv.$class-prefix}file-input { - height: 100%; - left: 0; - opacity: 0; - outline: none; - position: absolute; - top: 0; - width: 100%; -} - -.#{iv.$class-prefix}file-cta, -.#{iv.$class-prefix}file-name { - @extend %control; - border-color: hsl( - cv.getVar("file-h"), - cv.getVar("file-s"), - calc(#{cv.getVar("file-border-l")} + #{cv.getVar("file-border-l-delta")}) - ); - border-radius: cv.getVar("file-radius"); - font-size: 1em; - padding-left: 1em; - padding-right: 1em; - white-space: nowrap; -} - -.#{iv.$class-prefix}file-cta { - background-color: hsl( - cv.getVar("file-h"), - cv.getVar("file-s"), - calc( - #{cv.getVar("file-background-l")} + #{cv.getVar( - "file-background-l-delta" - )} - ) - ); - color: hsl( - cv.getVar("file-h"), - cv.getVar("file-s"), - calc(#{cv.getVar("file-cta-color-l")} + #{cv.getVar("file-color-l-delta")}) - ); -} - -.#{iv.$class-prefix}file-name { - border-color: hsl( - cv.getVar("file-h"), - cv.getVar("file-s"), - calc(#{cv.getVar("file-border-l")} + #{cv.getVar("file-color-l-delta")}) - ); - border-style: cv.getVar("file-name-border-style"); - border-width: cv.getVar("file-name-border-width"); - color: hsl( - cv.getVar("file-h"), - cv.getVar("file-s"), - calc(#{cv.getVar("file-name-color-l")} + #{cv.getVar("file-color-l-delta")}) - ); - display: block; - max-width: cv.getVar("file-name-max-width"); - overflow: hidden; - text-align: inherit; - text-overflow: ellipsis; -} - -.#{iv.$class-prefix}file-icon { - align-items: center; - display: flex; - height: 1em; - justify-content: center; - margin-inline-end: 0.5em; - width: 1em; - - .#{iv.$class-prefix}fa { - font-size: 1rem; - } -} diff --git a/styles/bulma/sass/form/input-textarea.scss b/styles/bulma/sass/form/input-textarea.scss deleted file mode 100644 index 98adbe3..0000000 --- a/styles/bulma/sass/form/input-textarea.scss +++ /dev/null @@ -1,123 +0,0 @@ -@use "shared"; -@use "../utilities/css-variables" as cv; -@use "../utilities/initial-variables" as iv; -@use "../utilities/controls"; - -$textarea-padding: cv.getVar("control-padding-horizontal") !default; -$textarea-max-height: 40em !default; -$textarea-min-height: 8em !default; - -$textarea-colors: shared.$form-colors !default; - -%input-textarea { - @extend %input; - - @include cv.register-vars( - ( - "input-h": #{cv.getVar("scheme-h")}, - "input-s": #{cv.getVar("scheme-s")}, - "input-border-style": solid, - "input-border-width": 1px, - "input-border-l": #{cv.getVar("border-l")}, - ) - ); - - box-shadow: shared.$input-shadow; - max-width: 100%; - width: 100%; - - &[readonly] { - box-shadow: none; - } - - // Colors - @each $name, $pair in $textarea-colors { - $color: nth($pair, 1); - - &.#{iv.$class-prefix}is-#{$name} { - @include cv.register-vars( - ( - "input-h": #{cv.getVar($name, "", "-h")}, - "input-s": #{cv.getVar($name, "", "-s")}, - "input-l": #{cv.getVar($name, "", "-l")}, - "input-focus-h": #{cv.getVar($name, "", "-h")}, - "input-focus-s": #{cv.getVar($name, "", "-s")}, - "input-focus-l": #{cv.getVar($name, "", "-l")}, - "input-border-l": #{cv.getVar($name, "", "-l")}, - ) - ); - } - } - - // Sizes - &.#{iv.$class-prefix}is-small { - @include controls.control-small; - } - - &.#{iv.$class-prefix}is-medium { - @include controls.control-medium; - } - - &.#{iv.$class-prefix}is-large { - @include controls.control-large; - } - - // Modifiers - &.#{iv.$class-prefix}is-fullwidth { - display: block; - width: 100%; - } - - &.#{iv.$class-prefix}is-inline { - display: inline; - width: auto; - } -} - -.#{iv.$class-prefix}input { - @extend %input-textarea; - - &.#{iv.$class-prefix}is-rounded { - border-radius: cv.getVar("radius-rounded"); - padding-left: calc(#{controls.$control-padding-horizontal} + 0.375em); - padding-right: calc(#{controls.$control-padding-horizontal} + 0.375em); - } - - &.#{iv.$class-prefix}is-static { - background-color: transparent; - border-color: transparent; - box-shadow: none; - padding-left: 0; - padding-right: 0; - } -} - -.#{iv.$class-prefix}textarea { - @extend %input-textarea; - @include cv.register-vars( - ( - "textarea-padding": #{$textarea-padding}, - "textarea-max-height": #{$textarea-max-height}, - "textarea-min-height": #{$textarea-min-height}, - ) - ); - display: block; - max-width: 100%; - min-width: 100%; - padding: cv.getVar("textarea-padding"); - resize: vertical; - - &:not([rows]) { - max-height: cv.getVar("textarea-max-height"); - min-height: cv.getVar("textarea-min-height"); - } - - &[rows] { - height: initial; - } - - // Modifiers - &.#{iv.$class-prefix}has-fixed-size { - resize: none; - } -} diff --git a/styles/bulma/sass/form/select.scss b/styles/bulma/sass/form/select.scss deleted file mode 100644 index b68861b..0000000 --- a/styles/bulma/sass/form/select.scss +++ /dev/null @@ -1,143 +0,0 @@ -@use "shared"; -@use "../utilities/controls"; -@use "../utilities/css-variables" as cv; -@use "../utilities/initial-variables" as iv; -@use "../utilities/extends"; - -$select-colors: shared.$form-colors !default; - -.#{iv.$class-prefix}select { - @include cv.register-vars( - ( - "input-h": #{cv.getVar("scheme-h")}, - "input-s": #{cv.getVar("scheme-s")}, - "input-border-style": solid, - "input-border-width": 1px, - "input-border-l": #{cv.getVar("border-l")}, - ) - ); - - display: inline-block; - max-width: 100%; - position: relative; - vertical-align: top; - - &:not(.#{iv.$class-prefix}is-multiple) { - height: shared.$input-height; - } - - &:not(.#{iv.$class-prefix}is-multiple):not(.#{iv.$class-prefix}is-loading) { - &::after { - @extend %arrow; - inset-inline-end: 1.125em; - z-index: 4; - } - } - - &.#{iv.$class-prefix}is-rounded { - select { - border-radius: cv.getVar("radius-rounded"); - padding-inline-start: 1em; - } - } - - select { - @extend %input; - cursor: pointer; - display: block; - font-size: 1em; - max-width: 100%; - outline: none; - - &::-ms-expand { - display: none; - } - - &[disabled]:hover, - fieldset[disabled] &:hover { - border-color: shared.$input-disabled-border-color; - } - - &:not([multiple]) { - padding-inline-end: 2.5em; - } - - &[multiple] { - height: auto; - padding: 0; - - option { - padding: 0.5em 1em; - } - } - } - - // Colors - @each $name, $pair in $select-colors { - &.#{iv.$class-prefix}is-#{$name} { - @include cv.register-vars( - ( - "input-h": #{cv.getVar($name, "", "-h")}, - "input-s": #{cv.getVar($name, "", "-s")}, - "input-l": #{cv.getVar($name, "", "-l")}, - "input-focus-h": #{cv.getVar($name, "", "-h")}, - "input-focus-s": #{cv.getVar($name, "", "-s")}, - "input-focus-l": #{cv.getVar($name, "", "-l")}, - "input-border-l": #{cv.getVar($name, "", "-l")}, - ) - ); - } - } - - // Sizes - &.#{iv.$class-prefix}is-small { - @include controls.control-small; - } - - &.#{iv.$class-prefix}is-medium { - @include controls.control-medium; - } - - &.#{iv.$class-prefix}is-large { - @include controls.control-large; - } - - // Modifiers - &.#{iv.$class-prefix}is-disabled { - &::after { - border-color: shared.$input-disabled-color !important; - opacity: 0.5; - } - } - - &.#{iv.$class-prefix}is-fullwidth { - width: 100%; - - select { - width: 100%; - } - } - - &.#{iv.$class-prefix}is-loading { - &::after { - @extend %loader; - inset-inline-end: 0.625em; - margin-top: 0; - position: absolute; - top: 0.625em; - transform: none; - } - - &.#{iv.$class-prefix}is-small:after { - font-size: cv.getVar("size-small"); - } - - &.#{iv.$class-prefix}is-medium:after { - font-size: cv.getVar("size-medium"); - } - - &.#{iv.$class-prefix}is-large:after { - font-size: cv.getVar("size-large"); - } - } -} diff --git a/styles/bulma/sass/form/shared.scss b/styles/bulma/sass/form/shared.scss deleted file mode 100644 index 14325eb..0000000 --- a/styles/bulma/sass/form/shared.scss +++ /dev/null @@ -1,172 +0,0 @@ -@use "../utilities/css-variables" as cv; -@use "../utilities/derived-variables" as dv; -@use "../utilities/initial-variables" as iv; -@use "../utilities/extends"; -@use "../utilities/mixins" as mx; - -$form-colors: dv.$colors !default; - -$input-h: #{cv.getVar("scheme-h")} !default; -$input-s: #{cv.getVar("scheme-s")} !default; -$input-l: #{cv.getVar("scheme-main-l")} !default; -$input-border-l: cv.getVar("border-l") !default; -$input-border-l-delta: 0% !default; -$input-hover-border-l-delta: #{cv.getVar("hover-border-l-delta")} !default; -$input-active-border-l-delta: #{cv.getVar("active-border-l-delta")} !default; -$input-color-l: cv.getVar("text-strong-l") !default; -$input-background-l: cv.getVar("scheme-main-l") !default; -$input-background-l-delta: 0% !default; -$input-height: cv.getVar("control-height") !default; -$input-shadow: inset 0 0.0625em 0.125em - hsla( - #{cv.getVar("scheme-h")}, - #{cv.getVar("scheme-s")}, - #{cv.getVar("scheme-invert-l")}, - 0.05 - ) !default; -$input-placeholder-color: hsla( - #{cv.getVar("text-h")}, - #{cv.getVar("text-s")}, - #{cv.getVar("text-strong-l")}, - 0.3 -) !default; - -$input-focus-h: cv.getVar("focus-h") !default; -$input-focus-s: cv.getVar("focus-s") !default; -$input-focus-l: cv.getVar("focus-l") !default; -$input-focus-shadow-size: cv.getVar("focus-shadow-size") !default; -$input-focus-shadow-alpha: cv.getVar("focus-shadow-alpha") !default; - -$input-disabled-color: cv.getVar("text-weak") !default; -$input-disabled-background-color: cv.getVar("background") !default; -$input-disabled-border-color: cv.getVar("background") !default; -$input-disabled-placeholder-color: hsla( - #{cv.getVar("text-h")}, - #{cv.getVar("text-s")}, - #{cv.getVar("text-weak-l")}, - 0.3 -) !default; - -$input-arrow: cv.getVar("link") !default; - -$input-icon-color: cv.getVar("text-light") !default; -$input-icon-hover-color: cv.getVar("text-weak") !default; -$input-icon-focus-color: cv.getVar("link") !default; - -$input-radius: cv.getVar("radius") !default; - -.#{iv.$class-prefix}control, -.#{iv.$class-prefix}input, -.#{iv.$class-prefix}textarea, -.#{iv.$class-prefix}select select { - @include cv.register-vars( - ( - "input-h": #{$input-h}, - "input-s": #{$input-s}, - "input-l": #{$input-l}, - "input-border-l": #{$input-border-l}, - "input-border-l-delta": #{$input-border-l-delta}, - "input-hover-border-l-delta": #{$input-hover-border-l-delta}, - "input-active-border-l-delta": #{$input-active-border-l-delta}, - "input-focus-h": #{$input-focus-h}, - "input-focus-s": #{$input-focus-s}, - "input-focus-l": #{$input-focus-l}, - "input-focus-shadow-size": #{$input-focus-shadow-size}, - "input-focus-shadow-alpha": #{$input-focus-shadow-alpha}, - "input-color-l": #{$input-color-l}, - "input-background-l": #{$input-background-l}, - "input-background-l-delta": #{$input-background-l-delta}, - "input-height": #{$input-height}, - "input-shadow": #{$input-shadow}, - "input-placeholder-color": #{$input-placeholder-color}, - "input-disabled-color": #{$input-disabled-color}, - "input-disabled-background-color": #{$input-disabled-background-color}, - "input-disabled-border-color": #{$input-disabled-border-color}, - "input-disabled-placeholder-color": #{$input-disabled-placeholder-color}, - "input-arrow": #{$input-arrow}, - "input-icon-color": #{$input-icon-color}, - "input-icon-hover-color": #{$input-icon-hover-color}, - "input-icon-focus-color": #{$input-icon-focus-color}, - "input-radius": #{$input-radius}, - ) - ); -} - -@mixin input { - @extend %control; - background-color: hsl( - #{cv.getVar("input-h")}, - #{cv.getVar("input-s")}, - calc( - #{cv.getVar("input-background-l")} + #{cv.getVar( - "input-background-l-delta" - )} - ) - ); - border-color: hsl( - cv.getVar("input-h"), - cv.getVar("input-s"), - calc(#{cv.getVar("input-border-l")} + #{cv.getVar("input-border-l-delta")}) - ); - border-radius: cv.getVar("input-radius"); - color: hsl( - #{cv.getVar("input-h")}, - #{cv.getVar("input-s")}, - #{cv.getVar("input-color-l")} - ); - - @include mx.placeholder { - color: cv.getVar("input-placeholder-color"); - } - - &:hover, - &.#{iv.$class-prefix}is-hovered { - @include cv.register-vars( - ( - "input-border-l-delta": #{cv.getVar("input-hover-border-l-delta")}, - ) - ); - } - - &:active, - &.#{iv.$class-prefix}is-active { - @include cv.register-vars( - ( - "input-border-l-delta": #{cv.getVar("input-active-border-l-delta")}, - ) - ); - } - - &:focus, - &:focus-within, - &.#{iv.$class-prefix}is-focused { - border-color: hsl( - cv.getVar("input-focus-h"), - cv.getVar("input-focus-s"), - cv.getVar("input-focus-l") - ); - box-shadow: cv.getVar("input-focus-shadow-size") - hsla( - cv.getVar("input-focus-h"), - cv.getVar("input-focus-s"), - cv.getVar("input-focus-l"), - cv.getVar("input-focus-shadow-alpha") - ); - } - - &[disabled], - fieldset[disabled] & { - background-color: cv.getVar("input-disabled-background-color"); - border-color: cv.getVar("input-disabled-border-color"); - box-shadow: none; - color: cv.getVar("input-disabled-color"); - - @include mx.placeholder { - color: cv.getVar("input-disabled-placeholder-color"); - } - } -} - -%input { - @include input; -} diff --git a/styles/bulma/sass/form/tools.scss b/styles/bulma/sass/form/tools.scss deleted file mode 100644 index a4f20bb..0000000 --- a/styles/bulma/sass/form/tools.scss +++ /dev/null @@ -1,341 +0,0 @@ -@use "shared"; -@use "../utilities/controls"; -@use "../utilities/css-variables" as cv; -@use "../utilities/initial-variables" as iv; -@use "../utilities/extends"; -@use "../utilities/mixins" as mx; - -$label-color: cv.getVar("text-strong") !default; -$label-weight: cv.getVar("weight-semibold") !default; - -$help-size: cv.getVar("size-small") !default; - -$label-colors: shared.$form-colors !default; - -.#{iv.$class-prefix}label { - color: $label-color; - display: block; - font-size: cv.getVar("size-normal"); - font-weight: $label-weight; - - &:not(:last-child) { - margin-bottom: 0.5em; - } - - // Sizes - &.#{iv.$class-prefix}is-small { - font-size: cv.getVar("size-small"); - } - - &.#{iv.$class-prefix}is-medium { - font-size: cv.getVar("size-medium"); - } - - &.#{iv.$class-prefix}is-large { - font-size: cv.getVar("size-large"); - } -} - -.#{iv.$class-prefix}help { - display: block; - font-size: $help-size; - margin-top: 0.25rem; - - @each $name, $pair in $label-colors { - &.#{iv.$class-prefix}is-#{$name} { - color: hsl( - #{cv.getVar($name, "", "-h")}, - #{cv.getVar($name, "", "-s")}, - #{cv.getVar($name, "", "-on-scheme-l")} - ); - } - } -} - -// Containers - -.#{iv.$class-prefix}field { - @include cv.register-vars( - ( - "block-spacing": 0.75rem, - ) - ); - - @extend %block; - - // Modifiers - &.#{iv.$class-prefix}has-addons { - display: flex; - justify-content: flex-start; - - .#{iv.$class-prefix}control { - &:not(:last-child) { - margin-inline-end: -1px; - } - - &:not(:first-child):not(:last-child) { - .#{iv.$class-prefix}button, - .#{iv.$class-prefix}input, - .#{iv.$class-prefix}select select { - border-radius: 0; - } - } - - &:first-child:not(:only-child) { - .#{iv.$class-prefix}button, - .#{iv.$class-prefix}input, - .#{iv.$class-prefix}select select { - // @include ltr { - border-bottom-right-radius: 0; - border-top-right-radius: 0; - // } - } - } - - &:last-child:not(:only-child) { - .#{iv.$class-prefix}button, - .#{iv.$class-prefix}input, - .#{iv.$class-prefix}select select { - // @include ltr { - border-bottom-left-radius: 0; - border-top-left-radius: 0; - // } - } - } - - .#{iv.$class-prefix}button, - .#{iv.$class-prefix}input, - .#{iv.$class-prefix}select select { - &:not([disabled]) { - &:hover, - &.#{iv.$class-prefix}is-hovered { - z-index: 2; - } - - &:focus, - &.#{iv.$class-prefix}is-focused, - &:active, - &.#{iv.$class-prefix}is-active { - z-index: 3; - - &:hover { - z-index: 4; - } - } - } - } - - &.#{iv.$class-prefix}is-expanded { - flex-grow: 1; - flex-shrink: 1; - } - } - - &.#{iv.$class-prefix}has-addons-centered { - justify-content: center; - } - - &.#{iv.$class-prefix}has-addons-right { - justify-content: flex-end; - } - - &.#{iv.$class-prefix}has-addons-fullwidth { - .#{iv.$class-prefix}control { - flex-grow: 1; - flex-shrink: 0; - } - } - } - - &.#{iv.$class-prefix}is-grouped { - display: flex; - gap: 0.75rem; - justify-content: flex-start; - - & > .#{iv.$class-prefix}control { - flex-shrink: 0; - - &.#{iv.$class-prefix}is-expanded { - flex-grow: 1; - flex-shrink: 1; - } - } - - &.#{iv.$class-prefix}is-grouped-centered { - justify-content: center; - } - - &.#{iv.$class-prefix}is-grouped-right { - justify-content: flex-end; - } - - &.#{iv.$class-prefix}is-grouped-multiline { - flex-wrap: wrap; - } - } - - &.#{iv.$class-prefix}is-horizontal { - @include mx.tablet { - display: flex; - } - } -} - -.#{iv.$class-prefix}field-label { - .#{iv.$class-prefix}label { - font-size: inherit; - } - - @include mx.mobile { - margin-bottom: 0.5rem; - } - - @include mx.tablet { - flex-basis: 0; - flex-grow: 1; - flex-shrink: 0; - margin-inline-end: 1.5rem; - text-align: right; - - &.#{iv.$class-prefix}is-small { - font-size: cv.getVar("size-small"); - padding-top: 0.375em; - } - - &.#{iv.$class-prefix}is-normal { - padding-top: 0.375em; - } - - &.#{iv.$class-prefix}is-medium { - font-size: cv.getVar("size-medium"); - padding-top: 0.375em; - } - - &.#{iv.$class-prefix}is-large { - font-size: cv.getVar("size-large"); - padding-top: 0.375em; - } - } -} - -.#{iv.$class-prefix}field-body { - .#{iv.$class-prefix}field .#{iv.$class-prefix}field { - margin-bottom: 0; - } - - @include mx.tablet { - display: flex; - flex-basis: 0; - flex-grow: 5; - flex-shrink: 1; - - .#{iv.$class-prefix}field { - margin-bottom: 0; - } - - & > .#{iv.$class-prefix}field { - flex-shrink: 1; - - &:not(.#{iv.$class-prefix}is-narrow) { - flex-grow: 1; - } - - &:not(:last-child) { - margin-inline-end: 0.75rem; - } - } - } -} - -.#{iv.$class-prefix}control { - box-sizing: border-box; - clear: both; - font-size: cv.getVar("size-normal"); - position: relative; - text-align: inherit; - - // Modifiers - &.#{iv.$class-prefix}has-icons-left, - &.#{iv.$class-prefix}has-icons-right { - .#{iv.$class-prefix}input, - .#{iv.$class-prefix}select { - &:hover { - & ~ .#{iv.$class-prefix}icon { - color: cv.getVar("input-icon-hover-color"); - } - } - - &:focus { - & ~ .#{iv.$class-prefix}icon { - color: cv.getVar("input-icon-focus-color"); - } - } - - &.#{iv.$class-prefix}is-small ~ .#{iv.$class-prefix}icon { - font-size: cv.getVar("size-small"); - } - - &.#{iv.$class-prefix}is-medium ~ .#{iv.$class-prefix}icon { - font-size: cv.getVar("size-medium"); - } - - &.#{iv.$class-prefix}is-large ~ .#{iv.$class-prefix}icon { - font-size: cv.getVar("size-large"); - } - } - - .#{iv.$class-prefix}icon { - color: cv.getVar("input-icon-color"); - height: cv.getVar("input-height"); - pointer-events: none; - position: absolute; - top: 0; - width: cv.getVar("input-height"); - z-index: 4; - } - } - - &.#{iv.$class-prefix}has-icons-left { - .#{iv.$class-prefix}input, - .#{iv.$class-prefix}select select { - padding-left: cv.getVar("input-height"); - } - - .#{iv.$class-prefix}icon.#{iv.$class-prefix}is-left { - left: 0; - } - } - - &.#{iv.$class-prefix}has-icons-right { - .#{iv.$class-prefix}input, - .#{iv.$class-prefix}select select { - padding-right: cv.getVar("input-height"); - } - - .#{iv.$class-prefix}icon.#{iv.$class-prefix}is-right { - right: 0; - } - } - - &.#{iv.$class-prefix}is-loading { - &::after { - @extend %loader; - inset-inline-end: 0.75em; - position: absolute !important; - top: 0.75em; - z-index: 4; - } - - &.#{iv.$class-prefix}is-small:after { - font-size: cv.getVar("size-small"); - } - - &.#{iv.$class-prefix}is-medium:after { - font-size: cv.getVar("size-medium"); - } - - &.#{iv.$class-prefix}is-large:after { - font-size: cv.getVar("size-large"); - } - } -} diff --git a/styles/bulma/sass/grid/_index.scss b/styles/bulma/sass/grid/_index.scss deleted file mode 100644 index 70d64ca..0000000 --- a/styles/bulma/sass/grid/_index.scss +++ /dev/null @@ -1,5 +0,0 @@ -/* Bulma Grid */ -@charset "utf-8"; - -@forward "columns"; -@forward "grid"; diff --git a/styles/bulma/sass/grid/columns-v2.scss b/styles/bulma/sass/grid/columns-v2.scss deleted file mode 100644 index bfb3aa0..0000000 --- a/styles/bulma/sass/grid/columns-v2.scss +++ /dev/null @@ -1,957 +0,0 @@ -@use "sass:math"; -@use "../utilities/css-variables" as cv; -@use "../utilities/derived-variables" as dv; -@use "../utilities/initial-variables" as iv; -@use "../utilities/extends"; -@use "../utilities/mixins" as mx; - -$column-gap: 1.5rem !default; - -:root { - @include cv.register-vars( - ( - "column-gap": #{$column-gap}, - ) - ); -} - -.#{iv.$class-prefix}column { - display: block; - flex-basis: 0; - flex-grow: 1; - flex-shrink: 1; - - .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile - > &.#{iv.$class-prefix}is-narrow { - flex: none; - width: unset; - } - - .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile - > &.#{iv.$class-prefix}is-full { - flex: none; - width: 100%; - } - - .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile - > &.#{iv.$class-prefix}is-three-quarters { - flex: none; - width: calc(75% - calc(#{cv.getVar("column-gap")} / 2)); - } - - .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile - > &.#{iv.$class-prefix}is-two-thirds { - flex: none; - width: calc(66.6666% - calc(#{cv.getVar("column-gap")} / 2)); - } - - .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile - > &.#{iv.$class-prefix}is-half { - flex: none; - width: calc(50% - calc(#{cv.getVar("column-gap")} / 2)); - } - - .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile - > &.#{iv.$class-prefix}is-one-third { - flex: none; - width: calc(33.3333% - calc(#{cv.getVar("column-gap")} / 2)); - } - - .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile - > &.#{iv.$class-prefix}is-one-quarter { - flex: none; - width: calc(25% - calc(#{cv.getVar("column-gap")} / 2)); - } - - .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile - > &.#{iv.$class-prefix}is-one-fifth { - flex: none; - width: calc(20% - calc(#{cv.getVar("column-gap")} / 2)); - } - - .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile - > &.#{iv.$class-prefix}is-two-fifths { - flex: none; - width: calc(40% - calc(#{cv.getVar("column-gap")} / 2)); - } - - .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile - > &.#{iv.$class-prefix}is-three-fifths { - flex: none; - width: calc(60% - calc(#{cv.getVar("column-gap")} / 2)); - } - - .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile - > &.#{iv.$class-prefix}is-four-fifths { - flex: none; - width: calc(80% - calc(#{cv.getVar("column-gap")} / 2)); - } - - .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile - > &.#{iv.$class-prefix}is-offset-three-quarters { - margin-inline-start: 75%; - } - - .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile - > &.#{iv.$class-prefix}is-offset-two-thirds { - margin-inline-start: 66.6666%; - } - - .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile - > &.#{iv.$class-prefix}is-offset-half { - margin-inline-start: 50%; - } - - .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile - > &.#{iv.$class-prefix}is-offset-one-third { - margin-inline-start: 33.3333%; - } - - .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile - > &.#{iv.$class-prefix}is-offset-one-quarter { - margin-inline-start: 25%; - } - - .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile - > &.#{iv.$class-prefix}is-offset-one-fifth { - margin-inline-start: 20%; - } - - .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile - > &.#{iv.$class-prefix}is-offset-two-fifths { - margin-inline-start: 40%; - } - - .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile - > &.#{iv.$class-prefix}is-offset-three-fifths { - margin-inline-start: 60%; - } - - .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile - > &.#{iv.$class-prefix}is-offset-four-fifths { - margin-inline-start: 80%; - } - - @for $i from 0 through 12 { - .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile - > &.#{iv.$class-prefix}is-#{$i} { - flex: none; - width: calc( - math.percentage(math.div($i, 12)) - calc(#{cv.getVar("column-gap")} / 2) - ); - } - - .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile - > &.#{iv.$class-prefix}is-offset-#{$i} { - margin-inline-start: math.percentage(math.div($i, 12)); - } - } - - @include mx.mobile { - &.#{iv.$class-prefix}is-narrow-mobile { - flex: none; - width: unset; - } - - &.#{iv.$class-prefix}is-full-mobile { - flex: none; - width: 100%; - } - - &.#{iv.$class-prefix}is-three-quarters-mobile { - flex: none; - width: calc(75% - calc(#{cv.getVar("column-gap")} / 2)); - } - - &.#{iv.$class-prefix}is-two-thirds-mobile { - flex: none; - width: calc(66.6666% - calc(#{cv.getVar("column-gap")} / 2)); - } - - &.#{iv.$class-prefix}is-half-mobile { - flex: none; - width: calc(50% - calc(#{cv.getVar("column-gap")} / 2)); - } - - &.#{iv.$class-prefix}is-one-third-mobile { - flex: none; - width: calc(33.3333% - calc(#{cv.getVar("column-gap")} / 2)); - } - - &.#{iv.$class-prefix}is-one-quarter-mobile { - flex: none; - width: calc(25% - calc(#{cv.getVar("column-gap")} / 2)); - } - - &.#{iv.$class-prefix}is-one-fifth-mobile { - flex: none; - width: calc(20% - calc(#{cv.getVar("column-gap")} / 2)); - } - - &.#{iv.$class-prefix}is-two-fifths-mobile { - flex: none; - width: calc(40% - calc(#{cv.getVar("column-gap")} / 2)); - } - - &.#{iv.$class-prefix}is-three-fifths-mobile { - flex: none; - width: calc(60% - calc(#{cv.getVar("column-gap")} / 2)); - } - - &.#{iv.$class-prefix}is-four-fifths-mobile { - flex: none; - width: calc(80% - calc(#{cv.getVar("column-gap")} / 2)); - } - - &.#{iv.$class-prefix}is-offset-three-quarters-mobile { - margin-inline-start: 75%; - } - - &.#{iv.$class-prefix}is-offset-two-thirds-mobile { - margin-inline-start: 66.6666%; - } - - &.#{iv.$class-prefix}is-offset-half-mobile { - margin-inline-start: 50%; - } - - &.#{iv.$class-prefix}is-offset-one-third-mobile { - margin-inline-start: 33.3333%; - } - - &.#{iv.$class-prefix}is-offset-one-quarter-mobile { - margin-inline-start: 25%; - } - - &.#{iv.$class-prefix}is-offset-one-fifth-mobile { - margin-inline-start: 20%; - } - - &.#{iv.$class-prefix}is-offset-two-fifths-mobile { - margin-inline-start: 40%; - } - - &.#{iv.$class-prefix}is-offset-three-fifths-mobile { - margin-inline-start: 60%; - } - - &.#{iv.$class-prefix}is-offset-four-fifths-mobile { - margin-inline-start: 80%; - } - - @for $i from 0 through 12 { - &.#{iv.$class-prefix}is-#{$i}-mobile { - flex: none; - width: calc( - math.percentage(math.div($i, 12)) - calc( - #{cv.getVar("column-gap")} / 2 - ) - ); - } - - &.#{iv.$class-prefix}is-offset-#{$i}-mobile { - margin-inline-start: math.percentage(math.div($i, 12)); - } - } - } - - @include mx.tablet { - &.#{iv.$class-prefix}is-narrow, - &.#{iv.$class-prefix}is-narrow-tablet { - flex: none; - width: unset; - } - - &.#{iv.$class-prefix}is-full, - &.#{iv.$class-prefix}is-full-tablet { - flex: none; - width: 100%; - } - - &.#{iv.$class-prefix}is-three-quarters, - &.#{iv.$class-prefix}is-three-quarters-tablet { - flex: none; - width: calc(75% - calc(#{cv.getVar("column-gap")} / 2)); - } - - &.#{iv.$class-prefix}is-two-thirds, - &.#{iv.$class-prefix}is-two-thirds-tablet { - flex: none; - width: calc(66.6666% - calc(#{cv.getVar("column-gap")} / 2)); - } - - &.#{iv.$class-prefix}is-half, - &.#{iv.$class-prefix}is-half-tablet { - flex: none; - width: calc(50% - calc(#{cv.getVar("column-gap")} / 2)); - } - - &.#{iv.$class-prefix}is-one-third, - &.#{iv.$class-prefix}is-one-third-tablet { - flex: none; - width: calc(33.3333% - calc(#{cv.getVar("column-gap")} / 2)); - } - - &.#{iv.$class-prefix}is-one-quarter, - &.#{iv.$class-prefix}is-one-quarter-tablet { - flex: none; - width: calc(25% - calc(#{cv.getVar("column-gap")} / 2)); - } - - &.#{iv.$class-prefix}is-one-fifth, - &.#{iv.$class-prefix}is-one-fifth-tablet { - flex: none; - width: calc(20% - calc(#{cv.getVar("column-gap")} / 2)); - } - - &.#{iv.$class-prefix}is-two-fifths, - &.#{iv.$class-prefix}is-two-fifths-tablet { - flex: none; - width: calc(40% - calc(#{cv.getVar("column-gap")} / 2)); - } - - &.#{iv.$class-prefix}is-three-fifths, - &.#{iv.$class-prefix}is-three-fifths-tablet { - flex: none; - width: calc(60% - calc(#{cv.getVar("column-gap")} / 2)); - } - - &.#{iv.$class-prefix}is-four-fifths, - &.#{iv.$class-prefix}is-four-fifths-tablet { - flex: none; - width: calc(80% - calc(#{cv.getVar("column-gap")} / 2)); - } - - &.#{iv.$class-prefix}is-offset-three-quarters, - &.#{iv.$class-prefix}is-offset-three-quarters-tablet { - margin-inline-start: 75%; - } - - &.#{iv.$class-prefix}is-offset-two-thirds, - &.#{iv.$class-prefix}is-offset-two-thirds-tablet { - margin-inline-start: 66.6666%; - } - - &.#{iv.$class-prefix}is-offset-half, - &.#{iv.$class-prefix}is-offset-half-tablet { - margin-inline-start: 50%; - } - - &.#{iv.$class-prefix}is-offset-one-third, - &.#{iv.$class-prefix}is-offset-one-third-tablet { - margin-inline-start: 33.3333%; - } - - &.#{iv.$class-prefix}is-offset-one-quarter, - &.#{iv.$class-prefix}is-offset-one-quarter-tablet { - margin-inline-start: 25%; - } - - &.#{iv.$class-prefix}is-offset-one-fifth, - &.#{iv.$class-prefix}is-offset-one-fifth-tablet { - margin-inline-start: 20%; - } - - &.#{iv.$class-prefix}is-offset-two-fifths, - &.#{iv.$class-prefix}is-offset-two-fifths-tablet { - margin-inline-start: 40%; - } - - &.#{iv.$class-prefix}is-offset-three-fifths, - &.#{iv.$class-prefix}is-offset-three-fifths-tablet { - margin-inline-start: 60%; - } - - &.#{iv.$class-prefix}is-offset-four-fifths, - &.#{iv.$class-prefix}is-offset-four-fifths-tablet { - margin-inline-start: 80%; - } - - @for $i from 0 through 12 { - &.#{iv.$class-prefix}is-#{$i}, - &.#{iv.$class-prefix}is-#{$i}-tablet { - flex: none; - width: calc( - math.percentage(math.div($i, 12)) - calc( - #{cv.getVar("column-gap")} / 2 - ) - ); - } - - &.#{iv.$class-prefix}is-offset-#{$i}, - &.#{iv.$class-prefix}is-offset-#{$i}-tablet { - margin-inline-start: math.percentage(math.div($i, 12)); - } - } - } - - @include mx.touch { - &.#{iv.$class-prefix}is-narrow-touch { - flex: none; - width: unset; - } - - &.#{iv.$class-prefix}is-full-touch { - flex: none; - width: 100%; - } - - &.#{iv.$class-prefix}is-three-quarters-touch { - flex: none; - width: calc(75% - calc(#{cv.getVar("column-gap")} / 2)); - } - - &.#{iv.$class-prefix}is-two-thirds-touch { - flex: none; - width: calc(66.6666% - calc(#{cv.getVar("column-gap")} / 2)); - } - - &.#{iv.$class-prefix}is-half-touch { - flex: none; - width: calc(50% - calc(#{cv.getVar("column-gap")} / 2)); - } - - &.#{iv.$class-prefix}is-one-third-touch { - flex: none; - width: calc(33.3333% - calc(#{cv.getVar("column-gap")} / 2)); - } - - &.#{iv.$class-prefix}is-one-quarter-touch { - flex: none; - width: calc(25% - calc(#{cv.getVar("column-gap")} / 2)); - } - - &.#{iv.$class-prefix}is-one-fifth-touch { - flex: none; - width: calc(20% - calc(#{cv.getVar("column-gap")} / 2)); - } - - &.#{iv.$class-prefix}is-two-fifths-touch { - flex: none; - width: calc(40% - calc(#{cv.getVar("column-gap")} / 2)); - } - - &.#{iv.$class-prefix}is-three-fifths-touch { - flex: none; - width: calc(60% - calc(#{cv.getVar("column-gap")} / 2)); - } - - &.#{iv.$class-prefix}is-four-fifths-touch { - flex: none; - width: calc(80% - calc(#{cv.getVar("column-gap")} / 2)); - } - - &.#{iv.$class-prefix}is-offset-three-quarters-touch { - margin-inline-start: 75%; - } - - &.#{iv.$class-prefix}is-offset-two-thirds-touch { - margin-inline-start: 66.6666%; - } - - &.#{iv.$class-prefix}is-offset-half-touch { - margin-inline-start: 50%; - } - - &.#{iv.$class-prefix}is-offset-one-third-touch { - margin-inline-start: 33.3333%; - } - - &.#{iv.$class-prefix}is-offset-one-quarter-touch { - margin-inline-start: 25%; - } - - &.#{iv.$class-prefix}is-offset-one-fifth-touch { - margin-inline-start: 20%; - } - - &.#{iv.$class-prefix}is-offset-two-fifths-touch { - margin-inline-start: 40%; - } - - &.#{iv.$class-prefix}is-offset-three-fifths-touch { - margin-inline-start: 60%; - } - - &.#{iv.$class-prefix}is-offset-four-fifths-touch { - margin-inline-start: 80%; - } - - @for $i from 0 through 12 { - &.#{iv.$class-prefix}is-#{$i}-touch { - flex: none; - width: math.percentage(math.div($i, 12)); - } - - &.#{iv.$class-prefix}is-offset-#{$i}-touch { - margin-inline-start: math.percentage(math.div($i, 12)); - } - } - } - - @include mx.desktop { - &.#{iv.$class-prefix}is-narrow-desktop { - flex: none; - width: unset; - } - - &.#{iv.$class-prefix}is-full-desktop { - flex: none; - width: 100%; - } - - &.#{iv.$class-prefix}is-three-quarters-desktop { - flex: none; - width: calc(75% - calc(#{cv.getVar("column-gap")} / 2)); - } - - &.#{iv.$class-prefix}is-two-thirds-desktop { - flex: none; - width: calc(66.6666% - calc(#{cv.getVar("column-gap")} / 2)); - } - - &.#{iv.$class-prefix}is-half-desktop { - flex: none; - width: calc(50% - calc(#{cv.getVar("column-gap")} / 2)); - } - - &.#{iv.$class-prefix}is-one-third-desktop { - flex: none; - width: calc(33.3333% - calc(#{cv.getVar("column-gap")} / 2)); - } - - &.#{iv.$class-prefix}is-one-quarter-desktop { - flex: none; - width: calc(25% - calc(#{cv.getVar("column-gap")} / 2)); - } - - &.#{iv.$class-prefix}is-one-fifth-desktop { - flex: none; - width: calc(20% - calc(#{cv.getVar("column-gap")} / 2)); - } - - &.#{iv.$class-prefix}is-two-fifths-desktop { - flex: none; - width: calc(40% - calc(#{cv.getVar("column-gap")} / 2)); - } - - &.#{iv.$class-prefix}is-three-fifths-desktop { - flex: none; - width: calc(60% - calc(#{cv.getVar("column-gap")} / 2)); - } - - &.#{iv.$class-prefix}is-four-fifths-desktop { - flex: none; - width: calc(80% - calc(#{cv.getVar("column-gap")} / 2)); - } - - &.#{iv.$class-prefix}is-offset-three-quarters-desktop { - margin-inline-start: 75%; - } - - &.#{iv.$class-prefix}is-offset-two-thirds-desktop { - margin-inline-start: 66.6666%; - } - - &.#{iv.$class-prefix}is-offset-half-desktop { - margin-inline-start: 50%; - } - - &.#{iv.$class-prefix}is-offset-one-third-desktop { - margin-inline-start: 33.3333%; - } - - &.#{iv.$class-prefix}is-offset-one-quarter-desktop { - margin-inline-start: 25%; - } - - &.#{iv.$class-prefix}is-offset-one-fifth-desktop { - margin-inline-start: 20%; - } - - &.#{iv.$class-prefix}is-offset-two-fifths-desktop { - margin-inline-start: 40%; - } - - &.#{iv.$class-prefix}is-offset-three-fifths-desktop { - margin-inline-start: 60%; - } - - &.#{iv.$class-prefix}is-offset-four-fifths-desktop { - margin-inline-start: 80%; - } - - @for $i from 0 through 12 { - &.#{iv.$class-prefix}is-#{$i}-desktop { - flex: none; - width: calc( - math.percentage(math.div($i, 12)) - calc( - #{cv.getVar("column-gap")} / 2 - ) - ); - } - - &.#{iv.$class-prefix}is-offset-#{$i}-desktop { - margin-inline-start: math.percentage(math.div($i, 12)); - } - } - } - - @include mx.widescreen { - &.#{iv.$class-prefix}is-narrow-widescreen { - flex: none; - width: unset; - } - - &.#{iv.$class-prefix}is-full-widescreen { - flex: none; - width: 100%; - } - - &.#{iv.$class-prefix}is-three-quarters-widescreen { - flex: none; - width: calc(75% - calc(#{cv.getVar("column-gap")} / 2)); - } - - &.#{iv.$class-prefix}is-two-thirds-widescreen { - flex: none; - width: calc(66.6666% - calc(#{cv.getVar("column-gap")} / 2)); - } - - &.#{iv.$class-prefix}is-half-widescreen { - flex: none; - width: calc(50% - calc(#{cv.getVar("column-gap")} / 2)); - } - - &.#{iv.$class-prefix}is-one-third-widescreen { - flex: none; - width: calc(33.3333% - calc(#{cv.getVar("column-gap")} / 2)); - } - - &.#{iv.$class-prefix}is-one-quarter-widescreen { - flex: none; - width: calc(25% - calc(#{cv.getVar("column-gap")} / 2)); - } - - &.#{iv.$class-prefix}is-one-fifth-widescreen { - flex: none; - width: calc(20% - calc(#{cv.getVar("column-gap")} / 2)); - } - - &.#{iv.$class-prefix}is-two-fifths-widescreen { - flex: none; - width: calc(40% - calc(#{cv.getVar("column-gap")} / 2)); - } - - &.#{iv.$class-prefix}is-three-fifths-widescreen { - flex: none; - width: calc(60% - calc(#{cv.getVar("column-gap")} / 2)); - } - - &.#{iv.$class-prefix}is-four-fifths-widescreen { - flex: none; - width: calc(80% - calc(#{cv.getVar("column-gap")} / 2)); - } - - &.#{iv.$class-prefix}is-offset-three-quarters-widescreen { - margin-inline-start: 75%; - } - - &.#{iv.$class-prefix}is-offset-two-thirds-widescreen { - margin-inline-start: 66.6666%; - } - - &.#{iv.$class-prefix}is-offset-half-widescreen { - margin-inline-start: 50%; - } - - &.#{iv.$class-prefix}is-offset-one-third-widescreen { - margin-inline-start: 33.3333%; - } - - &.#{iv.$class-prefix}is-offset-one-quarter-widescreen { - margin-inline-start: 25%; - } - - &.#{iv.$class-prefix}is-offset-one-fifth-widescreen { - margin-inline-start: 20%; - } - - &.#{iv.$class-prefix}is-offset-two-fifths-widescreen { - margin-inline-start: 40%; - } - - &.#{iv.$class-prefix}is-offset-three-fifths-widescreen { - margin-inline-start: 60%; - } - - &.#{iv.$class-prefix}is-offset-four-fifths-widescreen { - margin-inline-start: 80%; - } - - @for $i from 0 through 12 { - &.#{iv.$class-prefix}is-#{$i}-widescreen { - flex: none; - width: calc( - math.percentage(math.div($i, 12)) - calc( - #{cv.getVar("column-gap")} / 2 - ) - ); - } - - &.#{iv.$class-prefix}is-offset-#{$i}-widescreen { - margin-inline-start: math.percentage(math.div($i, 12)); - } - } - } - - @include mx.fullhd { - &.#{iv.$class-prefix}is-narrow-fullhd { - flex: none; - width: unset; - } - - &.#{iv.$class-prefix}is-full-fullhd { - flex: none; - width: 100%; - } - - &.#{iv.$class-prefix}is-three-quarters-fullhd { - flex: none; - width: calc(75% - calc(#{cv.getVar("column-gap")} / 2)); - } - - &.#{iv.$class-prefix}is-two-thirds-fullhd { - flex: none; - width: calc(66.6666% - calc(#{cv.getVar("column-gap")} / 2)); - } - - &.#{iv.$class-prefix}is-half-fullhd { - flex: none; - width: calc(50% - calc(#{cv.getVar("column-gap")} / 2)); - } - - &.#{iv.$class-prefix}is-one-third-fullhd { - flex: none; - width: calc(33.3333% - calc(#{cv.getVar("column-gap")} / 2)); - } - - &.#{iv.$class-prefix}is-one-quarter-fullhd { - flex: none; - width: calc(25% - calc(#{cv.getVar("column-gap")} / 2)); - } - - &.#{iv.$class-prefix}is-one-fifth-fullhd { - flex: none; - width: calc(20% - calc(#{cv.getVar("column-gap")} / 2)); - } - - &.#{iv.$class-prefix}is-two-fifths-fullhd { - flex: none; - width: calc(40% - calc(#{cv.getVar("column-gap")} / 2)); - } - - &.#{iv.$class-prefix}is-three-fifths-fullhd { - flex: none; - width: calc(60% - calc(#{cv.getVar("column-gap")} / 2)); - } - - &.#{iv.$class-prefix}is-four-fifths-fullhd { - flex: none; - width: calc(80% - calc(#{cv.getVar("column-gap")} / 2)); - } - - &.#{iv.$class-prefix}is-offset-three-quarters-fullhd { - margin-inline-start: 75%; - } - - &.#{iv.$class-prefix}is-offset-two-thirds-fullhd { - margin-inline-start: 66.6666%; - } - - &.#{iv.$class-prefix}is-offset-half-fullhd { - margin-inline-start: 50%; - } - - &.#{iv.$class-prefix}is-offset-one-third-fullhd { - margin-inline-start: 33.3333%; - } - - &.#{iv.$class-prefix}is-offset-one-quarter-fullhd { - margin-inline-start: 25%; - } - - &.#{iv.$class-prefix}is-offset-one-fifth-fullhd { - margin-inline-start: 20%; - } - - &.#{iv.$class-prefix}is-offset-two-fifths-fullhd { - margin-inline-start: 40%; - } - - &.#{iv.$class-prefix}is-offset-three-fifths-fullhd { - margin-inline-start: 60%; - } - - &.#{iv.$class-prefix}is-offset-four-fifths-fullhd { - margin-inline-start: 80%; - } - - @for $i from 0 through 12 { - &.#{iv.$class-prefix}is-#{$i}-fullhd { - flex: none; - width: calc( - math.percentage(math.div($i, 12)) - calc( - #{cv.getVar("column-gap")} / 2 - ) - ); - } - - &.#{iv.$class-prefix}is-offset-#{$i}-fullhd { - margin-inline-start: math.percentage(math.div($i, 12)); - } - } - } -} - -.#{iv.$class-prefix}columns { - @extend %block; - gap: cv.getVar("column-gap"); - - // Modifiers - &.#{iv.$class-prefix}is-centered { - justify-content: center; - } - - &.#{iv.$class-prefix}is-gapless { - gap: 0; - } - - &.#{iv.$class-prefix}is-mobile { - display: flex; - } - - &.#{iv.$class-prefix}is-multiline { - flex-wrap: wrap; - } - - &.#{iv.$class-prefix}is-vcentered { - align-items: center; - } - - // Responsiveness - @include mx.tablet { - &:not(.#{iv.$class-prefix}is-desktop) { - display: flex; - } - } - - @include mx.desktop { - // Modifiers - &.#{iv.$class-prefix}is-desktop { - display: flex; - } - } - - &.#{iv.$class-prefix}is-variable { - @for $i from 0 through 8 { - &.#{iv.$class-prefix}is-#{$i} { - @include cv.register-vars( - ( - "column-gap": #{$i * 0.25rem}, - ) - ); - } - - @include mx.mobile { - &.#{iv.$class-prefix}is-#{$i}-mobile { - @include cv.register-vars( - ( - "column-gap": #{$i * 0.25rem}, - ) - ); - } - } - - @include mx.tablet { - &.#{iv.$class-prefix}is-#{$i}-tablet { - @include cv.register-vars( - ( - "column-gap": #{$i * 0.25rem}, - ) - ); - } - } - - @include mx.tablet-only { - &.#{iv.$class-prefix}is-#{$i}-tablet-only { - @include cv.register-vars( - ( - "column-gap": #{$i * 0.25rem}, - ) - ); - } - } - - @include mx.touch { - &.#{iv.$class-prefix}is-#{$i}-touch { - @include cv.register-vars( - ( - "column-gap": #{$i * 0.25rem}, - ) - ); - } - } - - @include mx.desktop { - &.#{iv.$class-prefix}is-#{$i}-desktop { - @include cv.register-vars( - ( - "column-gap": #{$i * 0.25rem}, - ) - ); - } - } - - @include mx.desktop-only { - &.#{iv.$class-prefix}is-#{$i}-desktop-only { - @include cv.register-vars( - ( - "column-gap": #{$i * 0.25rem}, - ) - ); - } - } - - @include mx.widescreen { - &.#{iv.$class-prefix}is-#{$i}-widescreen { - @include cv.register-vars( - ( - "column-gap": #{$i * 0.25rem}, - ) - ); - } - } - - @include mx.widescreen-only { - &.#{iv.$class-prefix}is-#{$i}-widescreen-only { - @include cv.register-vars( - ( - "column-gap": #{$i * 0.25rem}, - ) - ); - } - } - - @include mx.fullhd { - &.#{iv.$class-prefix}is-#{$i}-fullhd { - @include cv.register-vars( - ( - "column-gap": #{$i * 0.25rem}, - ) - ); - } - } - } - } -} diff --git a/styles/bulma/sass/grid/columns.scss b/styles/bulma/sass/grid/columns.scss deleted file mode 100644 index 5f5f126..0000000 --- a/styles/bulma/sass/grid/columns.scss +++ /dev/null @@ -1,877 +0,0 @@ -@use "sass:math"; -@use "../utilities/css-variables" as cv; -@use "../utilities/derived-variables" as dv; -@use "../utilities/initial-variables" as iv; -@use "../utilities/extends"; -@use "../utilities/mixins" as mx; - -$column-gap: 0.75rem !default; - -:root { - @include cv.register-vars( - ( - "column-gap": #{$column-gap}, - ) - ); -} - -.#{iv.$class-prefix}column { - display: block; - flex-basis: 0; - flex-grow: 1; - flex-shrink: 1; - padding: $column-gap; - - .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile - > &.#{iv.$class-prefix}is-narrow { - flex: none; - width: unset; - } - - .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile - > &.#{iv.$class-prefix}is-full { - flex: none; - width: 100%; - } - - .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile - > &.#{iv.$class-prefix}is-three-quarters { - flex: none; - width: 75%; - } - - .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile - > &.#{iv.$class-prefix}is-two-thirds { - flex: none; - width: 66.6666%; - } - - .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile - > &.#{iv.$class-prefix}is-half { - flex: none; - width: 50%; - } - - .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile - > &.#{iv.$class-prefix}is-one-third { - flex: none; - width: 33.3333%; - } - - .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile - > &.#{iv.$class-prefix}is-one-quarter { - flex: none; - width: 25%; - } - - .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile - > &.#{iv.$class-prefix}is-one-fifth { - flex: none; - width: 20%; - } - - .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile - > &.#{iv.$class-prefix}is-two-fifths { - flex: none; - width: 40%; - } - - .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile - > &.#{iv.$class-prefix}is-three-fifths { - flex: none; - width: 60%; - } - - .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile - > &.#{iv.$class-prefix}is-four-fifths { - flex: none; - width: 80%; - } - - .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile - > &.#{iv.$class-prefix}is-offset-three-quarters { - margin-inline-start: 75%; - } - - .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile - > &.#{iv.$class-prefix}is-offset-two-thirds { - margin-inline-start: 66.6666%; - } - - .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile - > &.#{iv.$class-prefix}is-offset-half { - margin-inline-start: 50%; - } - - .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile - > &.#{iv.$class-prefix}is-offset-one-third { - margin-inline-start: 0.3333%; - } - - .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile - > &.#{iv.$class-prefix}is-offset-one-quarter { - margin-inline-start: 25%; - } - - .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile - > &.#{iv.$class-prefix}is-offset-one-fifth { - margin-inline-start: 20%; - } - - .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile - > &.#{iv.$class-prefix}is-offset-two-fifths { - margin-inline-start: 40%; - } - - .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile - > &.#{iv.$class-prefix}is-offset-three-fifths { - margin-inline-start: 60%; - } - - .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile - > &.#{iv.$class-prefix}is-offset-four-fifths { - margin-inline-start: 80%; - } - - @for $i from 0 through 12 { - .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile - > &.#{iv.$class-prefix}is-#{$i} { - flex: none; - width: calc( - math.percentage(math.div($i, 12)) - calc(#{cv.getVar("column-gap")} / 2) - ); - } - - .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile - > &.#{iv.$class-prefix}is-offset-#{$i} { - margin-inline-start: math.percentage(math.div($i, 12)); - } - } - - @include mx.mobile { - &.#{iv.$class-prefix}is-narrow-mobile { - flex: none; - width: unset; - } - - &.#{iv.$class-prefix}is-full-mobile { - flex: none; - width: 100%; - } - - &.#{iv.$class-prefix}is-three-quarters-mobile { - flex: none; - width: 75%; - } - - &.#{iv.$class-prefix}is-two-thirds-mobile { - flex: none; - width: 66.6666%; - } - - &.#{iv.$class-prefix}is-half-mobile { - flex: none; - width: 50%; - } - - &.#{iv.$class-prefix}is-one-third-mobile { - flex: none; - width: 33.3333%; - } - - &.#{iv.$class-prefix}is-one-quarter-mobile { - flex: none; - width: 25%; - } - - &.#{iv.$class-prefix}is-one-fifth-mobile { - flex: none; - width: 20%; - } - - &.#{iv.$class-prefix}is-two-fifths-mobile { - flex: none; - width: 40%; - } - - &.#{iv.$class-prefix}is-three-fifths-mobile { - flex: none; - width: 60%; - } - - &.#{iv.$class-prefix}is-four-fifths-mobile { - flex: none; - width: 80%; - } - - &.#{iv.$class-prefix}is-offset-three-quarters-mobile { - margin-inline-start: 75%; - } - - &.#{iv.$class-prefix}is-offset-two-thirds-mobile { - margin-inline-start: 66.6666%; - } - - &.#{iv.$class-prefix}is-offset-half-mobile { - margin-inline-start: 50%; - } - - &.#{iv.$class-prefix}is-offset-one-third-mobile { - margin-inline-start: 0.3333%; - } - - &.#{iv.$class-prefix}is-offset-one-quarter-mobile { - margin-inline-start: 25%; - } - - &.#{iv.$class-prefix}is-offset-one-fifth-mobile { - margin-inline-start: 20%; - } - - &.#{iv.$class-prefix}is-offset-two-fifths-mobile { - margin-inline-start: 40%; - } - - &.#{iv.$class-prefix}is-offset-three-fifths-mobile { - margin-inline-start: 60%; - } - - &.#{iv.$class-prefix}is-offset-four-fifths-mobile { - margin-inline-start: 80%; - } - - @for $i from 0 through 12 { - &.#{iv.$class-prefix}is-#{$i}-mobile { - flex: none; - width: calc( - math.percentage(math.div($i, 12)) - calc( - #{cv.getVar("column-gap")} / 2 - ) - ); - } - - &.#{iv.$class-prefix}is-offset-#{$i}-mobile { - margin-inline-start: math.percentage(math.div($i, 12)); - } - } - } - - @include mx.tablet { - &.#{iv.$class-prefix}is-narrow, - &.#{iv.$class-prefix}is-narrow-tablet { - flex: none; - width: unset; - } - - &.#{iv.$class-prefix}is-full, - &.#{iv.$class-prefix}is-full-tablet { - flex: none; - width: 100%; - } - - &.#{iv.$class-prefix}is-three-quarters, - &.#{iv.$class-prefix}is-three-quarters-tablet { - flex: none; - width: 75%; - } - - &.#{iv.$class-prefix}is-two-thirds, - &.#{iv.$class-prefix}is-two-thirds-tablet { - flex: none; - width: 66.6666%; - } - - &.#{iv.$class-prefix}is-half, - &.#{iv.$class-prefix}is-half-tablet { - flex: none; - width: 50%; - } - - &.#{iv.$class-prefix}is-one-third, - &.#{iv.$class-prefix}is-one-third-tablet { - flex: none; - width: 33.3333%; - } - - &.#{iv.$class-prefix}is-one-quarter, - &.#{iv.$class-prefix}is-one-quarter-tablet { - flex: none; - width: 25%; - } - - &.#{iv.$class-prefix}is-one-fifth, - &.#{iv.$class-prefix}is-one-fifth-tablet { - flex: none; - width: 20%; - } - - &.#{iv.$class-prefix}is-two-fifths, - &.#{iv.$class-prefix}is-two-fifths-tablet { - flex: none; - width: 40%; - } - - &.#{iv.$class-prefix}is-three-fifths, - &.#{iv.$class-prefix}is-three-fifths-tablet { - flex: none; - width: 60%; - } - - &.#{iv.$class-prefix}is-four-fifths, - &.#{iv.$class-prefix}is-four-fifths-tablet { - flex: none; - width: 80%; - } - - &.#{iv.$class-prefix}is-offset-three-quarters, - &.#{iv.$class-prefix}is-offset-three-quarters-tablet { - margin-inline-start: 75%; - } - - &.#{iv.$class-prefix}is-offset-two-thirds, - &.#{iv.$class-prefix}is-offset-two-thirds-tablet { - margin-inline-start: 66.6666%; - } - - &.#{iv.$class-prefix}is-offset-half, - &.#{iv.$class-prefix}is-offset-half-tablet { - margin-inline-start: 50%; - } - - &.#{iv.$class-prefix}is-offset-one-third, - &.#{iv.$class-prefix}is-offset-one-third-tablet { - margin-inline-start: 0.3333%; - } - - &.#{iv.$class-prefix}is-offset-one-quarter, - &.#{iv.$class-prefix}is-offset-one-quarter-tablet { - margin-inline-start: 25%; - } - - &.#{iv.$class-prefix}is-offset-one-fifth, - &.#{iv.$class-prefix}is-offset-one-fifth-tablet { - margin-inline-start: 20%; - } - - &.#{iv.$class-prefix}is-offset-two-fifths, - &.#{iv.$class-prefix}is-offset-two-fifths-tablet { - margin-inline-start: 40%; - } - - &.#{iv.$class-prefix}is-offset-three-fifths, - &.#{iv.$class-prefix}is-offset-three-fifths-tablet { - margin-inline-start: 60%; - } - - &.#{iv.$class-prefix}is-offset-four-fifths, - &.#{iv.$class-prefix}is-offset-four-fifths-tablet { - margin-inline-start: 80%; - } - - @for $i from 0 through 12 { - &.#{iv.$class-prefix}is-#{$i}, - &.#{iv.$class-prefix}is-#{$i}-tablet { - flex: none; - width: calc( - math.percentage(math.div($i, 12)) - calc( - #{cv.getVar("column-gap")} / 2 - ) - ); - } - - &.#{iv.$class-prefix}is-offset-#{$i}, - &.#{iv.$class-prefix}is-offset-#{$i}-tablet { - margin-inline-start: math.percentage(math.div($i, 12)); - } - } - } - - @include mx.touch { - &.#{iv.$class-prefix}is-narrow-touch { - flex: none; - width: unset; - } - - &.#{iv.$class-prefix}is-full-touch { - flex: none; - width: 100%; - } - - &.#{iv.$class-prefix}is-three-quarters-touch { - flex: none; - width: 75%; - } - - &.#{iv.$class-prefix}is-two-thirds-touch { - flex: none; - width: 66.6666%; - } - - &.#{iv.$class-prefix}is-half-touch { - flex: none; - width: 50%; - } - - &.#{iv.$class-prefix}is-one-third-touch { - flex: none; - width: 33.3333%; - } - - &.#{iv.$class-prefix}is-one-quarter-touch { - flex: none; - width: 25%; - } - - &.#{iv.$class-prefix}is-one-fifth-touch { - flex: none; - width: 20%; - } - - &.#{iv.$class-prefix}is-two-fifths-touch { - flex: none; - width: 40%; - } - - &.#{iv.$class-prefix}is-three-fifths-touch { - flex: none; - width: 60%; - } - - &.#{iv.$class-prefix}is-four-fifths-touch { - flex: none; - width: 80%; - } - - &.#{iv.$class-prefix}is-offset-three-quarters-touch { - margin-inline-start: 75%; - } - - &.#{iv.$class-prefix}is-offset-two-thirds-touch { - margin-inline-start: 66.6666%; - } - - &.#{iv.$class-prefix}is-offset-half-touch { - margin-inline-start: 50%; - } - - &.#{iv.$class-prefix}is-offset-one-third-touch { - margin-inline-start: 0.3333%; - } - - &.#{iv.$class-prefix}is-offset-one-quarter-touch { - margin-inline-start: 25%; - } - - &.#{iv.$class-prefix}is-offset-one-fifth-touch { - margin-inline-start: 20%; - } - - &.#{iv.$class-prefix}is-offset-two-fifths-touch { - margin-inline-start: 40%; - } - - &.#{iv.$class-prefix}is-offset-three-fifths-touch { - margin-inline-start: 60%; - } - - &.#{iv.$class-prefix}is-offset-four-fifths-touch { - margin-inline-start: 80%; - } - - @for $i from 0 through 12 { - &.#{iv.$class-prefix}is-#{$i}-touch { - flex: none; - width: math.percentage(math.div($i, 12)); - } - - &.#{iv.$class-prefix}is-offset-#{$i}-touch { - margin-inline-start: math.percentage(math.div($i, 12)); - } - } - } - - @include mx.desktop { - &.#{iv.$class-prefix}is-narrow-desktop { - flex: none; - width: unset; - } - - &.#{iv.$class-prefix}is-full-desktop { - flex: none; - width: 100%; - } - - &.#{iv.$class-prefix}is-three-quarters-desktop { - flex: none; - width: 75%; - } - - &.#{iv.$class-prefix}is-two-thirds-desktop { - flex: none; - width: 66.6666%; - } - - &.#{iv.$class-prefix}is-half-desktop { - flex: none; - width: 50%; - } - - &.#{iv.$class-prefix}is-one-third-desktop { - flex: none; - width: 33.3333%; - } - - &.#{iv.$class-prefix}is-one-quarter-desktop { - flex: none; - width: 25%; - } - - &.#{iv.$class-prefix}is-one-fifth-desktop { - flex: none; - width: 20%; - } - - &.#{iv.$class-prefix}is-two-fifths-desktop { - flex: none; - width: 40%; - } - - &.#{iv.$class-prefix}is-three-fifths-desktop { - flex: none; - width: 60%; - } - - &.#{iv.$class-prefix}is-four-fifths-desktop { - flex: none; - width: 80%; - } - - &.#{iv.$class-prefix}is-offset-three-quarters-desktop { - margin-inline-start: 75%; - } - - &.#{iv.$class-prefix}is-offset-two-thirds-desktop { - margin-inline-start: 66.6666%; - } - - &.#{iv.$class-prefix}is-offset-half-desktop { - margin-inline-start: 50%; - } - - &.#{iv.$class-prefix}is-offset-one-third-desktop { - margin-inline-start: 0.3333%; - } - - &.#{iv.$class-prefix}is-offset-one-quarter-desktop { - margin-inline-start: 25%; - } - - &.#{iv.$class-prefix}is-offset-one-fifth-desktop { - margin-inline-start: 20%; - } - - &.#{iv.$class-prefix}is-offset-two-fifths-desktop { - margin-inline-start: 40%; - } - - &.#{iv.$class-prefix}is-offset-three-fifths-desktop { - margin-inline-start: 60%; - } - - &.#{iv.$class-prefix}is-offset-four-fifths-desktop { - margin-inline-start: 80%; - } - - @for $i from 0 through 12 { - &.#{iv.$class-prefix}is-#{$i}-desktop { - flex: none; - width: calc( - math.percentage(math.div($i, 12)) - calc( - #{cv.getVar("column-gap")} / 2 - ) - ); - } - - &.#{iv.$class-prefix}is-offset-#{$i}-desktop { - margin-inline-start: math.percentage(math.div($i, 12)); - } - } - } - - @include mx.widescreen { - &.#{iv.$class-prefix}is-narrow-widescreen { - flex: none; - width: unset; - } - - &.#{iv.$class-prefix}is-full-widescreen { - flex: none; - width: 100%; - } - - &.#{iv.$class-prefix}is-three-quarters-widescreen { - flex: none; - width: 75%; - } - - &.#{iv.$class-prefix}is-two-thirds-widescreen { - flex: none; - width: 66.6666%; - } - - &.#{iv.$class-prefix}is-half-widescreen { - flex: none; - width: 50%; - } - - &.#{iv.$class-prefix}is-one-third-widescreen { - flex: none; - width: 33.3333%; - } - - &.#{iv.$class-prefix}is-one-quarter-widescreen { - flex: none; - width: 25%; - } - - &.#{iv.$class-prefix}is-one-fifth-widescreen { - flex: none; - width: 20%; - } - - &.#{iv.$class-prefix}is-two-fifths-widescreen { - flex: none; - width: 40%; - } - - &.#{iv.$class-prefix}is-three-fifths-widescreen { - flex: none; - width: 60%; - } - - &.#{iv.$class-prefix}is-four-fifths-widescreen { - flex: none; - width: 80%; - } - - &.#{iv.$class-prefix}is-offset-three-quarters-widescreen { - margin-inline-start: 75%; - } - - &.#{iv.$class-prefix}is-offset-two-thirds-widescreen { - margin-inline-start: 66.6666%; - } - - &.#{iv.$class-prefix}is-offset-half-widescreen { - margin-inline-start: 50%; - } - - &.#{iv.$class-prefix}is-offset-one-third-widescreen { - margin-inline-start: 0.3333%; - } - - &.#{iv.$class-prefix}is-offset-one-quarter-widescreen { - margin-inline-start: 25%; - } - - &.#{iv.$class-prefix}is-offset-one-fifth-widescreen { - margin-inline-start: 20%; - } - - &.#{iv.$class-prefix}is-offset-two-fifths-widescreen { - margin-inline-start: 40%; - } - - &.#{iv.$class-prefix}is-offset-three-fifths-widescreen { - margin-inline-start: 60%; - } - - &.#{iv.$class-prefix}is-offset-four-fifths-widescreen { - margin-inline-start: 80%; - } - - @for $i from 0 through 12 { - &.#{iv.$class-prefix}is-#{$i}-widescreen { - flex: none; - width: calc( - math.percentage(math.div($i, 12)) - calc( - #{cv.getVar("column-gap")} / 2 - ) - ); - } - - &.#{iv.$class-prefix}is-offset-#{$i}-widescreen { - margin-inline-start: math.percentage(math.div($i, 12)); - } - } - } - - @include mx.fullhd { - &.#{iv.$class-prefix}is-narrow-fullhd { - flex: none; - width: unset; - } - - &.#{iv.$class-prefix}is-full-fullhd { - flex: none; - width: 100%; - } - - &.#{iv.$class-prefix}is-three-quarters-fullhd { - flex: none; - width: 75%; - } - - &.#{iv.$class-prefix}is-two-thirds-fullhd { - flex: none; - width: 66.6666%; - } - - &.#{iv.$class-prefix}is-half-fullhd { - flex: none; - width: 50%; - } - - &.#{iv.$class-prefix}is-one-third-fullhd { - flex: none; - width: 33.3333%; - } - - &.#{iv.$class-prefix}is-one-quarter-fullhd { - flex: none; - width: 25%; - } - - &.#{iv.$class-prefix}is-one-fifth-fullhd { - flex: none; - width: 20%; - } - - &.#{iv.$class-prefix}is-two-fifths-fullhd { - flex: none; - width: 40%; - } - - &.#{iv.$class-prefix}is-three-fifths-fullhd { - flex: none; - width: 60%; - } - - &.#{iv.$class-prefix}is-four-fifths-fullhd { - flex: none; - width: 80%; - } - - &.#{iv.$class-prefix}is-offset-three-quarters-fullhd { - margin-inline-start: 75%; - } - - &.#{iv.$class-prefix}is-offset-two-thirds-fullhd { - margin-inline-start: 66.6666%; - } - - &.#{iv.$class-prefix}is-offset-half-fullhd { - margin-inline-start: 50%; - } - - &.#{iv.$class-prefix}is-offset-one-third-fullhd { - margin-inline-start: 33.3333%; - } - - &.#{iv.$class-prefix}is-offset-one-quarter-fullhd { - margin-inline-start: 25%; - } - - &.#{iv.$class-prefix}is-offset-one-fifth-fullhd { - margin-inline-start: 20%; - } - - &.#{iv.$class-prefix}is-offset-two-fifths-fullhd { - margin-inline-start: 40%; - } - - &.#{iv.$class-prefix}is-offset-three-fifths-fullhd { - margin-inline-start: 60%; - } - - &.#{iv.$class-prefix}is-offset-four-fifths-fullhd { - margin-inline-start: 80%; - } - - @for $i from 0 through 12 { - &.#{iv.$class-prefix}is-#{$i}-fullhd { - flex: none; - width: math.percentage(math.div($i, 12)); - } - - &.#{iv.$class-prefix}is-offset-#{$i}-fullhd { - margin-inline-start: math.percentage(math.div($i, 12)); - } - } - } -} - -.#{iv.$class-prefix}columns { - margin-inline-start: calc(-1 * #{cv.getVar("column-gap")}); - margin-inline-end: calc(-1 * #{cv.getVar("column-gap")}); - margin-top: calc(-1 * #{cv.getVar("column-gap")}); - - &:last-child { - margin-bottom: calc(-1 * #{cv.getVar("column-gap")}); - } - - &:not(:last-child) { - margin-bottom: calc(1.5rem - #{$column-gap}); - } - - // Modifiers - &.#{iv.$class-prefix}is-centered { - justify-content: center; - } - - &.#{iv.$class-prefix}is-gapless { - margin-inline-start: 0; - margin-inline-end: 0; - - margin-top: 0; - - & > .#{iv.$class-prefix}column { - margin: 0; - padding: 0 !important; - } - - &:not(:last-child) { - margin-bottom: 1.5rem; - } - - &:last-child { - margin-bottom: 0; - } - } - - &.#{iv.$class-prefix}is-mobile { - display: flex; - } - - &.#{iv.$class-prefix}is-multiline { - flex-wrap: wrap; - } - - &.#{iv.$class-prefix}is-vcentered { - align-items: center; - } - - // Responsiveness - @include mx.tablet { - &:not(.#{iv.$class-prefix}is-desktop) { - display: flex; - } - } - - @include mx.desktop { - // Modifiers - &.#{iv.$class-prefix}is-desktop { - display: flex; - } - } -} diff --git a/styles/bulma/sass/grid/grid.scss b/styles/bulma/sass/grid/grid.scss deleted file mode 100644 index 9c4191d..0000000 --- a/styles/bulma/sass/grid/grid.scss +++ /dev/null @@ -1,209 +0,0 @@ -@use "../utilities/css-variables" as cv; -@use "../utilities/initial-variables" as iv; -@use "../utilities/extends"; -@use "../utilities/mixins" as mx; - -$max-column-count: 12; -$grip-gap: 0.75rem; -$column-min-base: 1.5rem; - -@mixin fixed-grid-properties($suffix: "") { - @for $i from 1 through $max-column-count { - &.#{iv.$class-prefix}has-#{$i}-cols#{$suffix} { - .#{iv.$class-prefix}grid { - @include cv.register-var("grid-column-count", #{$i}); - } - } - } -} - -$grid-container-name: bulma-fixed-grid; - -.#{iv.$class-prefix}fixed-grid { - @extend %block; - container-name: $grid-container-name; - container-type: inline-size; - - .#{iv.$class-prefix}grid { - @include cv.register-vars( - ( - "grid-gap-count": calc(#{cv.getVar("grid-column-count")} - 1), - "grid-column-count": 2, - ) - ); - - grid-template-columns: repeat(cv.getVar("grid-column-count"), 1fr); - } - - @include fixed-grid-properties; - - @include mx.container-until($grid-container-name, iv.$tablet) { - @include fixed-grid-properties("-mobile"); - } - - @include mx.container-from($grid-container-name, iv.$tablet) { - @include fixed-grid-properties("-tablet"); - } - - @include mx.container-from($grid-container-name, iv.$desktop) { - @include fixed-grid-properties("-desktop"); - } - - @include mx.container-from($grid-container-name, iv.$widescreen) { - @include fixed-grid-properties("-widescreen"); - } - - @include mx.container-from($grid-container-name, iv.$fullhd) { - @include fixed-grid-properties("-fullhd"); - } - - &.#{iv.$class-prefix}has-auto-count { - .#{iv.$class-prefix}grid { - @include mx.container-until($grid-container-name, iv.$tablet) { - @include cv.register-var("grid-column-count", 2); - } - - @include mx.container-from($grid-container-name, iv.$tablet) { - @include cv.register-var("grid-column-count", 4); - } - - @include mx.container-from($grid-container-name, iv.$desktop) { - @include cv.register-var("grid-column-count", 8); - } - - @include mx.container-from($grid-container-name, iv.$widescreen) { - @include cv.register-var("grid-column-count", 12); - } - - @include mx.container-from($grid-container-name, iv.$fullhd) { - @include cv.register-var("grid-column-count", 16); - } - } - } -} - -.#{iv.$class-prefix}grid { - @include cv.register-vars( - ( - "grid-gap": $grip-gap, - "grid-column-min": 9rem, - "grid-cell-column-span": 1, - "grid-cell-row-span": 1, - ) - ); - - @extend %block; - display: grid; - gap: cv.getVar("grid-gap"); - column-gap: #{cv.getVarWithBackup("grid-column-gap", "grid-gap")}; - row-gap: #{cv.getVarWithBackup("grid-row-gap", "grid-gap")}; - grid-template-columns: repeat( - auto-fit, - minmax(#{cv.getVar("grid-column-min")}, 1fr) - ); - grid-template-rows: auto; - - &.is-auto-fill { - grid-template-columns: repeat( - auto-fill, - minmax(#{cv.getVar("grid-column-min")}, 1fr) - ); - } - - @for $i from 1 through 12 { - &.#{iv.$class-prefix}is-col-min-#{$i} { - @include cv.register-vars( - ( - "grid-column-min": #{$column-min-base * $i}, - ) - ); - } - } -} - -@mixin cell-properties($suffix: "") { - @for $i from 1 through $max-column-count { - $name: $i + $suffix; - - &.#{iv.$class-prefix}is-col-start-#{$name} { - @include cv.register-var("grid-cell-column-start", #{$i}); - } - - &.#{iv.$class-prefix}is-col-end-#{$name} { - @include cv.register-var("grid-cell-column-end", #{$i}); - } - - &.#{iv.$class-prefix}is-col-from-end-#{$name} { - @include cv.register-var("grid-cell-column-start", #{$i * -1}); - } - - &.#{iv.$class-prefix}is-col-span-#{$name} { - @include cv.register-var("grid-cell-column-span", #{$i}); - } - - &.#{iv.$class-prefix}is-row-start-#{$name} { - @include cv.register-var("grid-cell-row-start", #{$i}); - } - - &.#{iv.$class-prefix}is-row-end-#{$name} { - @include cv.register-var("grid-cell-row-end", #{$i}); - } - - &.#{iv.$class-prefix}is-row-from-end-#{$name} { - @include cv.register-var("grid-cell-row-start", #{$i * -1}); - } - - &.#{iv.$class-prefix}is-row-span-#{$name} { - @include cv.register-var("grid-cell-row-span", #{$i}); - } - } -} - -.#{iv.$class-prefix}cell { - grid-column-end: span cv.getVar("grid-cell-column-span"); - grid-column-start: cv.getVar("grid-cell-column-start"); - grid-row-end: span cv.getVar("grid-cell-row-span"); - grid-row-start: cv.getVar("grid-cell-row-start"); - - // Sizes - &.#{iv.$class-prefix}is-col-start-end { - @include cv.register-var("grid-cell-column-start", -1); - } - - &.#{iv.$class-prefix}is-row-start-end { - @include cv.register-var("grid-cell-row-start", -1); - } - - @include cell-properties; - @include mx.mobile { - @include cell-properties("-mobile"); - } - - @include mx.tablet { - @include cell-properties("-tablet"); - } - - @include mx.tablet-only { - @include cell-properties("-tablet-only"); - } - - @include mx.desktop { - @include cell-properties("-desktop"); - } - - @include mx.desktop-only { - @include cell-properties("-desktop-only"); - } - - @include mx.widescreen { - @include cell-properties("-widescreen"); - } - - @include mx.widescreen-only { - @include cell-properties("-widescreen-only"); - } - - @include mx.fullhd { - @include cell-properties("-fullhd"); - } -} diff --git a/styles/bulma/sass/helpers/_index.scss b/styles/bulma/sass/helpers/_index.scss deleted file mode 100644 index 4388647..0000000 --- a/styles/bulma/sass/helpers/_index.scss +++ /dev/null @@ -1,15 +0,0 @@ -/* Bulma Helpers */ -@charset "utf-8"; - -@forward "aspect-ratio"; -@forward "border"; -@forward "color"; -@forward "flexbox"; -@forward "float"; -@forward "gap"; -@forward "overflow"; -@forward "position"; -@forward "spacing"; -@forward "typography"; -@forward "visibility"; -@forward "other"; diff --git a/styles/bulma/sass/helpers/aspect-ratio.scss b/styles/bulma/sass/helpers/aspect-ratio.scss deleted file mode 100644 index 91e8c4c..0000000 --- a/styles/bulma/sass/helpers/aspect-ratio.scss +++ /dev/null @@ -1,10 +0,0 @@ -@use "../utilities/initial-variables" as iv; - -@each $pair in iv.$aspect-ratios { - $w: nth($pair, 1); - $h: nth($pair, 2); - - .#{iv.$helpers-prefix}aspect-ratio-#{$w}by#{$h} { - aspect-ratio: #{$w} / #{$h}; - } -} diff --git a/styles/bulma/sass/helpers/border.scss b/styles/bulma/sass/helpers/border.scss deleted file mode 100644 index 500ea00..0000000 --- a/styles/bulma/sass/helpers/border.scss +++ /dev/null @@ -1,15 +0,0 @@ -@use "../utilities/css-variables" as cv; -@use "../utilities/initial-variables" as iv; - -$radii: ( - "small": "radius-small", - "normal": "radius", - "large": "radius-large", - "rounded": "radius-rounded", -); - -@each $name, $var in $radii { - .#{iv.$helpers-has-prefix}radius-#{$name} { - border-radius: cv.getVar($var); - } -} diff --git a/styles/bulma/sass/helpers/color.scss b/styles/bulma/sass/helpers/color.scss deleted file mode 100644 index 22feaad..0000000 --- a/styles/bulma/sass/helpers/color.scss +++ /dev/null @@ -1,364 +0,0 @@ -@use "../utilities/css-variables" as cv; -@use "../utilities/derived-variables" as dv; -@use "../utilities/initial-variables" as iv; - -$digits: ( - "00", - "05", - "10", - "15", - "20", - "25", - "30", - "35", - "40", - "45", - "50", - "55", - "60", - "65", - "70", - "75", - "80", - "85", - "90", - "95", - "100" -); - -.#{iv.$helpers-has-prefix}background { - background-color: cv.getVar("background"); -} - -@each $name, $color in dv.$colors { - $background: hsl( - #{cv.getVar($name, "", "-h")}, - #{cv.getVar($name, "", "-s")}, - calc(#{cv.getVar("background-l")} + #{cv.getVar("background-l-delta")}) - ); - - $color: hsl( - #{cv.getVar($name, "", "-h")}, - #{cv.getVar($name, "", "-s")}, - calc(#{cv.getVar("color-l")} + #{cv.getVar("color-l-delta")}) - ); - - [class*="#{iv.$helpers-prefix}color-#{$name}"], - [class*="#{iv.$helpers-has-prefix}text-#{$name}"] { - @include cv.register-vars( - ( - "color-l": #{cv.getVar($name, "", "-l")}, - "color-l-delta": 0%, - ) - ); - color: $color !important; - } - - [class*="#{iv.$helpers-prefix}background-#{$name}"], - [class*="#{iv.$helpers-has-prefix}background-#{$name}"] { - @include cv.register-vars( - ( - "background-l": #{cv.getVar($name, "", "-l")}, - "background-l-delta": 0%, - ) - ); - background-color: $background !important; - } - - // Invert - .#{iv.$helpers-prefix}color-#{$name}-invert, - .#{iv.$helpers-has-prefix}text-#{$name}-invert { - @include cv.register-vars( - ( - "color-l": #{cv.getVar($name, "", "-invert-l")}, - ) - ); - } - - .#{iv.$helpers-prefix}background-#{$name}-invert, - .#{iv.$helpers-has-prefix}background-#{$name}-invert { - @include cv.register-vars( - ( - "background-l": #{cv.getVar($name, "", "-invert-l")}, - ) - ); - } - - // On Scheme - .#{iv.$helpers-prefix}color-#{$name}-on-scheme, - .#{iv.$helpers-has-prefix}text-#{$name}-on-scheme { - @include cv.register-vars( - ( - "color-l": #{cv.getVar($name, "", "-on-scheme-l")}, - ) - ); - } - - .#{iv.$helpers-prefix}background-#{$name}-on-scheme, - .#{iv.$helpers-has-prefix}background-#{$name}-on-scheme { - @include cv.register-vars( - ( - "background-l": #{cv.getVar($name, "", "-on-scheme-l")}, - ) - ); - } - - // Light - .#{iv.$helpers-prefix}color-#{$name}-light, - .#{iv.$helpers-has-prefix}text-#{$name}-light { - @include cv.register-vars( - ( - "color-l": #{cv.getVar($name, "", "-light-l")}, - ) - ); - } - - .#{iv.$helpers-prefix}background-#{$name}-light, - .#{iv.$helpers-has-prefix}background-#{$name}-light { - @include cv.register-vars( - ( - "background-l": #{cv.getVar($name, "", "-light-l")}, - ) - ); - } - - .#{iv.$helpers-prefix}color-#{$name}-light-invert, - .#{iv.$helpers-has-prefix}text-#{$name}-light-invert { - @include cv.register-vars( - ( - "color-l": #{cv.getVar($name, "", "-light-invert-l")}, - ) - ); - } - - .#{iv.$helpers-prefix}background-#{$name}-light-invert, - .#{iv.$helpers-has-prefix}background-#{$name}-light-invert { - @include cv.register-vars( - ( - "background-l": #{cv.getVar($name, "", "-light-invert-l")}, - ) - ); - } - - // Dark - .#{iv.$helpers-prefix}color-#{$name}-dark, - .#{iv.$helpers-has-prefix}text-#{$name}-dark { - @include cv.register-vars( - ( - "color-l": #{cv.getVar($name, "", "-dark-l")}, - ) - ); - } - - .#{iv.$helpers-prefix}background-#{$name}-dark, - .#{iv.$helpers-has-prefix}background-#{$name}-dark { - @include cv.register-vars( - ( - "background-l": #{cv.getVar($name, "", "-dark-l")}, - ) - ); - } - - .#{iv.$helpers-prefix}color-#{$name}-dark-invert, - .#{iv.$helpers-has-prefix}text-#{$name}-dark-invert { - @include cv.register-vars( - ( - "color-l": #{cv.getVar($name, "", "-dark-invert-l")}, - ) - ); - } - - .#{iv.$helpers-prefix}background-#{$name}-dark-invert, - .#{iv.$helpers-has-prefix}background-#{$name}-dark-invert { - @include cv.register-vars( - ( - "background-l": #{cv.getVar($name, "", "-dark-invert-l")}, - ) - ); - } - - // Soft/Bold - .#{iv.$helpers-prefix}color-#{$name}-soft, - .#{iv.$helpers-has-prefix}text-#{$name}-soft { - @include cv.register-vars( - ( - "color-l": #{cv.getVar("soft-l")}, - ) - ); - } - - .#{iv.$helpers-prefix}background-#{$name}-soft, - .#{iv.$helpers-has-prefix}background-#{$name}-soft { - @include cv.register-vars( - ( - "background-l": #{cv.getVar("soft-l")}, - ) - ); - } - - .#{iv.$helpers-prefix}color-#{$name}-bold, - .#{iv.$helpers-has-prefix}text-#{$name}-bold { - @include cv.register-vars( - ( - "color-l": #{cv.getVar("bold-l")}, - ) - ); - } - - .#{iv.$helpers-prefix}background-#{$name}-bold, - .#{iv.$helpers-has-prefix}background-#{$name}-bold { - @include cv.register-vars( - ( - "background-l": #{cv.getVar("bold-l")}, - ) - ); - } - - .#{iv.$helpers-prefix}color-#{$name}-soft-invert, - .#{iv.$helpers-has-prefix}text-#{$name}-soft-invert { - @include cv.register-vars( - ( - "color-l": #{cv.getVar("soft-invert-l")}, - ) - ); - } - - .#{iv.$helpers-prefix}background-#{$name}-soft-invert, - .#{iv.$helpers-has-prefix}background-#{$name}-soft-invert { - @include cv.register-vars( - ( - "background-l": #{cv.getVar("soft-invert-l")}, - ) - ); - } - - .#{iv.$helpers-prefix}color-#{$name}-bold-invert, - .#{iv.$helpers-has-prefix}text-#{$name}-bold-invert { - @include cv.register-vars( - ( - "color-l": #{cv.getVar("bold-invert-l")}, - ) - ); - } - - .#{iv.$helpers-prefix}background-#{$name}-bold-invert, - .#{iv.$helpers-has-prefix}background-#{$name}-bold-invert { - @include cv.register-vars( - ( - "background-l": #{cv.getVar("bold-invert-l")}, - ) - ); - } - - @each $digit in $digits { - .#{iv.$helpers-prefix}color-#{$name}-#{$digit}, - .#{iv.$helpers-has-prefix}text-#{$name}-#{$digit} { - @include cv.register-vars( - ( - "color-l": #{cv.getVar($name, "", "-#{$digit}-l")}, - ) - ); - } - - .#{iv.$helpers-prefix}background-#{$name}-#{$digit}, - .#{iv.$helpers-has-prefix}background-#{$name}-#{$digit} { - @include cv.register-vars( - ( - "background-l": #{cv.getVar($name, "", "-#{$digit}-l")}, - ) - ); - } - - .#{iv.$helpers-prefix}color-#{$name}-#{$digit}-invert, - .#{iv.$helpers-has-prefix}text-#{$name}-#{$digit}-invert { - @include cv.register-vars( - ( - "color-l": #{cv.getVar($name, "", "-#{$digit}-invert-l")}, - ) - ); - } - - .#{iv.$helpers-prefix}background-#{$name}-#{$digit}-invert, - .#{iv.$helpers-has-prefix}background-#{$name}-#{$digit}-invert { - @include cv.register-vars( - ( - "background-l": #{cv.getVar($name, "", "-#{$digit}-invert-l")}, - ) - ); - } - } - - // Hover - a.#{iv.$helpers-prefix}color-#{$name}, - button.#{iv.$helpers-prefix}color-#{$name}, - #{iv.$helpers-prefix}color-#{$name}.is-hoverable, - a.#{iv.$helpers-has-prefix}text-#{$name}, - button.#{iv.$helpers-has-prefix}text-#{$name}, - #{iv.$helpers-has-prefix}text-#{$name}.is-hoverable { - &:hover, - &:focus-visible { - @include cv.register-vars( - ( - "color-l-delta": #{cv.getVar("hover-color-l-delta")}, - ) - ); - } - - &:active { - @include cv.register-vars( - ( - "color-l-delta": #{cv.getVar("active-color-l-delta")}, - ) - ); - } - } - - a.#{iv.$helpers-prefix}background-#{$name}, - button.#{iv.$helpers-prefix}background-#{$name}, - #{iv.$helpers-prefix}background-#{$name}.is-hoverable, - a.#{iv.$helpers-has-prefix}background-#{$name}, - button.#{iv.$helpers-has-prefix}background-#{$name}, - #{iv.$helpers-has-prefix}background-#{$name}.is-hoverable { - &:hover, - &:focus-visible { - @include cv.register-vars( - ( - "background-l-delta": #{cv.getVar("hover-background-l-delta")}, - ) - ); - } - - &:active { - @include cv.register-vars( - ( - "background-l-delta": #{cv.getVar("active-background-l-delta")}, - ) - ); - } - } - - // Palettes - .#{iv.$helpers-prefix}palette-#{$name} { - --h: #{cv.getVar($name, "", "-h")}; - --s: #{cv.getVar($name, "", "-s")}; - --l: #{cv.getVar($name, "", "-l")}; - --color: hsl(var(--h), var(--s), var(--l)); - - @each $digit in $digits { - --#{$digit}-l: #{cv.getVar($name, "", "-#{$digit}-l")}; - --color-#{$digit}: hsl(var(--h), var(--s), var(--#{$digit}-l)); - } - } -} - -@each $name, $shade in dv.$shades { - .#{iv.$helpers-prefix}color-#{$name}, - .#{iv.$helpers-has-prefix}text-#{$name} { - color: $shade !important; - } - - .#{iv.$helpers-prefix}background-#{$name}, - .#{iv.$helpers-has-prefix}background-#{$name} { - background-color: $shade !important; - } -} diff --git a/styles/bulma/sass/helpers/flexbox.scss b/styles/bulma/sass/helpers/flexbox.scss deleted file mode 100644 index 1265e99..0000000 --- a/styles/bulma/sass/helpers/flexbox.scss +++ /dev/null @@ -1,62 +0,0 @@ -@use "../utilities/initial-variables" as iv; - -$flex-direction-values: row, row-reverse, column, column-reverse; - -@each $value in $flex-direction-values { - .#{iv.$helpers-prefix}flex-direction-#{$value} { - flex-direction: $value !important; - } -} - -$flex-wrap-values: nowrap, wrap, wrap-reverse; - -@each $value in $flex-wrap-values { - .#{iv.$helpers-prefix}flex-wrap-#{$value} { - flex-wrap: $value !important; - } -} - -$justify-content-values: flex-start, flex-end, center, space-between, - space-around, space-evenly, start, end, left, right; - -@each $value in $justify-content-values { - .#{iv.$helpers-prefix}justify-content-#{$value} { - justify-content: $value !important; - } -} - -$align-content-values: flex-start, flex-end, center, space-between, space-around, - space-evenly, stretch, start, end, baseline; - -@each $value in $align-content-values { - .#{iv.$helpers-prefix}align-content-#{$value} { - align-content: $value !important; - } -} - -$align-items-values: stretch, flex-start, flex-end, center, baseline, start, end, - self-start, self-end; - -@each $value in $align-items-values { - .#{iv.$helpers-prefix}align-items-#{$value} { - align-items: $value !important; - } -} - -$align-self-values: auto, flex-start, flex-end, center, baseline, stretch; - -@each $value in $align-self-values { - .#{iv.$helpers-prefix}align-self-#{$value} { - align-self: $value !important; - } -} - -$flex-operators: grow, shrink; - -@each $operator in $flex-operators { - @for $i from 0 through 5 { - .#{iv.$helpers-prefix}flex-#{$operator}-#{$i} { - flex-#{$operator}: $i !important; - } - } -} diff --git a/styles/bulma/sass/helpers/float.scss b/styles/bulma/sass/helpers/float.scss deleted file mode 100644 index 6eecebe..0000000 --- a/styles/bulma/sass/helpers/float.scss +++ /dev/null @@ -1,28 +0,0 @@ -@use "../utilities/initial-variables" as iv; -@use "../utilities/mixins" as mx; - -.#{iv.$helpers-prefix}clearfix { - @include mx.clearfix; -} - -.#{iv.$helpers-prefix}float-left, -.#{iv.$helpers-prefix}pulled-left { - float: left !important; -} - -.#{iv.$helpers-prefix}float-right, -.#{iv.$helpers-prefix}pulled-right { - float: right !important; -} - -.#{iv.$helpers-prefix}float-none { - float: none !important; -} - -$clears: both left none right; - -@each $clear in $clears { - .#{iv.$helpers-prefix}clear-#{$clear} { - clear: $clear !important; - } -} diff --git a/styles/bulma/sass/helpers/gap.scss b/styles/bulma/sass/helpers/gap.scss deleted file mode 100644 index cbff6c3..0000000 --- a/styles/bulma/sass/helpers/gap.scss +++ /dev/null @@ -1,24 +0,0 @@ -@use "sass:math"; -@use "sass:string"; -@use "../utilities/initial-variables" as iv; - -.#{iv.$helpers-prefix}gapless { - gap: 0 !important; -} - -$gaps: "gap", "column-gap", "row-gap"; -$gap-base: 0.5rem; - -@each $gap in $gaps { - @for $i from 0 through 8 { - .#{iv.$helpers-prefix}#{$gap}-#{$i} { - #{$gap}: ($gap-base * $i) !important; - } - - @if $i < 8 { - .#{iv.$helpers-prefix}#{$gap}-#{$i}\.5 { - #{$gap}: ($gap-base * $i + math.div($gap-base, 2)) !important; - } - } - } -} diff --git a/styles/bulma/sass/helpers/other.scss b/styles/bulma/sass/helpers/other.scss deleted file mode 100644 index 90e0edd..0000000 --- a/styles/bulma/sass/helpers/other.scss +++ /dev/null @@ -1,19 +0,0 @@ -@use "../utilities/extends"; -@use "../utilities/initial-variables" as iv; - -.#{iv.$helpers-prefix}radiusless { - border-radius: 0 !important; -} - -.#{iv.$helpers-prefix}shadowless { - box-shadow: none !important; -} - -.#{iv.$helpers-prefix}clickable { - cursor: pointer !important; - pointer-events: all !important; -} - -.#{iv.$helpers-prefix}unselectable { - @extend %unselectable; -} diff --git a/styles/bulma/sass/helpers/overflow.scss b/styles/bulma/sass/helpers/overflow.scss deleted file mode 100644 index f618600..0000000 --- a/styles/bulma/sass/helpers/overflow.scss +++ /dev/null @@ -1,21 +0,0 @@ -@use "../utilities/initial-variables" as iv; - -.#{iv.$helpers-prefix}clipped { - overflow: hidden !important; -} - -$overflows: auto clip hidden scroll visible; - -@each $overflow in $overflows { - .#{iv.$helpers-prefix}overflow-#{$overflow} { - overflow: $overflow !important; - } - - .#{iv.$helpers-prefix}overflow-x-#{$overflow} { - overflow-x: $overflow !important; - } - - .#{iv.$helpers-prefix}overflow-y-#{$overflow} { - overflow-y: $overflow !important; - } -} diff --git a/styles/bulma/sass/helpers/position.scss b/styles/bulma/sass/helpers/position.scss deleted file mode 100644 index 794b3d3..0000000 --- a/styles/bulma/sass/helpers/position.scss +++ /dev/null @@ -1,19 +0,0 @@ -@use "../utilities/extends"; -@use "../utilities/initial-variables" as iv; - -.#{iv.$helpers-prefix}overlay, -.#{iv.$helpers-prefix}overlay { - @extend %overlay; -} - -.#{iv.$helpers-prefix}relative { - position: relative !important; -} - -$positions: absolute fixed relative static sticky; - -@each $position in $positions { - .#{iv.$helpers-prefix}position-#{$position} { - position: $position !important; - } -} diff --git a/styles/bulma/sass/helpers/spacing.scss b/styles/bulma/sass/helpers/spacing.scss deleted file mode 100644 index e825c6c..0000000 --- a/styles/bulma/sass/helpers/spacing.scss +++ /dev/null @@ -1,64 +0,0 @@ -@use "../utilities/initial-variables" as iv; - -.marginless { - margin: 0 !important; -} - -.paddingless { - padding: 0 !important; -} - -$spacing-shortcuts: ( - "margin": "m", - "padding": "p", -) !default; -$spacing-directions: ( - "top": "t", - "right": "r", - "bottom": "b", - "left": "l", -) !default; -$spacing-horizontal: "x" !default; -$spacing-vertical: "y" !default; -$spacing-values: ( - "0": 0, - "1": 0.25rem, - "2": 0.5rem, - "3": 0.75rem, - "4": 1rem, - "5": 1.5rem, - "6": 3rem, - "auto": auto, -) !default; - -@each $property, $shortcut in $spacing-shortcuts { - @each $name, $value in $spacing-values { - // All directions - .#{$shortcut}-#{$name} { - #{$property}: $value !important; - } - - // Cardinal directions - @each $direction, $suffix in $spacing-directions { - .#{$shortcut}#{$suffix}-#{$name} { - #{$property}-#{$direction}: $value !important; - } - } - - // Horizontal axis - @if $spacing-horizontal != null { - .#{$shortcut}#{$spacing-horizontal}-#{$name} { - #{$property}-left: $value !important; - #{$property}-right: $value !important; - } - } - - // Vertical axis - @if $spacing-vertical != null { - .#{$shortcut}#{$spacing-vertical}-#{$name} { - #{$property}-top: $value !important; - #{$property}-bottom: $value !important; - } - } - } -} diff --git a/styles/bulma/sass/helpers/typography.scss b/styles/bulma/sass/helpers/typography.scss deleted file mode 100644 index 2f9d029..0000000 --- a/styles/bulma/sass/helpers/typography.scss +++ /dev/null @@ -1,168 +0,0 @@ -@use "../utilities/derived-variables" as dv; -@use "../utilities/initial-variables" as iv; -@use "../utilities/mixins" as mx; - -@mixin typography-size($target: "") { - @each $size in dv.$sizes { - $i: index(dv.$sizes, $size); - - .#{iv.$helpers-prefix}size-#{$i}#{if($target == "", "", "-" + $target)} { - font-size: $size !important; - } - } -} - -@include typography-size; - -@include mx.mobile { - @include typography-size("mobile"); -} - -@include mx.tablet { - @include typography-size("tablet"); -} - -@include mx.touch { - @include typography-size("touch"); -} - -@include mx.desktop { - @include typography-size("desktop"); -} - -@include mx.widescreen { - @include typography-size("widescreen"); -} - -@include mx.fullhd { - @include typography-size("fullhd"); -} - -$alignments: ( - "centered": "center", - "justified": "justify", - "left": "left", - "right": "right", -); - -@each $alignment, $text-align in $alignments { - .#{iv.$helpers-has-prefix}text-#{$alignment} { - text-align: #{$text-align} !important; - } -} - -@each $alignment, $text-align in $alignments { - @include mx.mobile { - .#{iv.$helpers-has-prefix}text-#{$alignment}-mobile { - text-align: #{$text-align} !important; - } - } - - @include mx.tablet { - .#{iv.$helpers-has-prefix}text-#{$alignment}-tablet { - text-align: #{$text-align} !important; - } - } - - @include mx.tablet-only { - .#{iv.$helpers-has-prefix}text-#{$alignment}-tablet-only { - text-align: #{$text-align} !important; - } - } - - @include mx.touch { - .#{iv.$helpers-has-prefix}text-#{$alignment}-touch { - text-align: #{$text-align} !important; - } - } - - @include mx.desktop { - .#{iv.$helpers-has-prefix}text-#{$alignment}-desktop { - text-align: #{$text-align} !important; - } - } - - @include mx.desktop-only { - .#{iv.$helpers-has-prefix}text-#{$alignment}-desktop-only { - text-align: #{$text-align} !important; - } - } - - @include mx.widescreen { - .#{iv.$helpers-has-prefix}text-#{$alignment}-widescreen { - text-align: #{$text-align} !important; - } - } - - @include mx.widescreen-only { - .#{iv.$helpers-has-prefix}text-#{$alignment}-widescreen-only { - text-align: #{$text-align} !important; - } - } - - @include mx.fullhd { - .#{iv.$helpers-has-prefix}text-#{$alignment}-fullhd { - text-align: #{$text-align} !important; - } - } -} - -.#{iv.$helpers-prefix}capitalized { - text-transform: capitalize !important; -} - -.#{iv.$helpers-prefix}lowercase { - text-transform: lowercase !important; -} - -.#{iv.$helpers-prefix}uppercase { - text-transform: uppercase !important; -} - -.#{iv.$helpers-prefix}italic { - font-style: italic !important; -} - -.#{iv.$helpers-prefix}underlined { - text-decoration: underline !important; -} - -.#{iv.$helpers-has-prefix}text-weight-light { - font-weight: iv.$weight-light !important; -} - -.#{iv.$helpers-has-prefix}text-weight-normal { - font-weight: iv.$weight-normal !important; -} - -.#{iv.$helpers-has-prefix}text-weight-medium { - font-weight: iv.$weight-medium !important; -} - -.#{iv.$helpers-has-prefix}text-weight-semibold { - font-weight: iv.$weight-semibold !important; -} - -.#{iv.$helpers-has-prefix}text-weight-bold { - font-weight: iv.$weight-bold !important; -} - -.#{iv.$helpers-prefix}family-primary { - font-family: dv.$family-primary !important; -} - -.#{iv.$helpers-prefix}family-secondary { - font-family: dv.$family-secondary !important; -} - -.#{iv.$helpers-prefix}family-sans-serif { - font-family: iv.$family-sans-serif !important; -} - -.#{iv.$helpers-prefix}family-monospace { - font-family: iv.$family-monospace !important; -} - -.#{iv.$helpers-prefix}family-code { - font-family: dv.$family-code !important; -} diff --git a/styles/bulma/sass/helpers/visibility.scss b/styles/bulma/sass/helpers/visibility.scss deleted file mode 100644 index 85124af..0000000 --- a/styles/bulma/sass/helpers/visibility.scss +++ /dev/null @@ -1,221 +0,0 @@ -@use "../utilities/initial-variables" as iv; -@use "../utilities/mixins" as mx; - -.#{iv.$helpers-prefix}display-none, -.#{iv.$helpers-prefix}hidden { - display: none !important; -} - -$displays: block flex inline inline-block inline-flex grid; - -@each $display in $displays { - .#{iv.$helpers-prefix}display-#{$display}, - .#{iv.$helpers-prefix}#{$display} { - display: $display !important; - } - - @include mx.mobile { - .#{iv.$helpers-prefix}display-#{$display}-mobile, - .#{iv.$helpers-prefix}#{$display}-mobile { - display: $display !important; - } - } - - @include mx.tablet { - .#{iv.$helpers-prefix}display-#{$display}-tablet, - .#{iv.$helpers-prefix}#{$display}-tablet { - display: $display !important; - } - } - - @include mx.tablet-only { - .#{iv.$helpers-prefix}display-#{$display}-tablet-only, - .#{iv.$helpers-prefix}#{$display}-tablet-only { - display: $display !important; - } - } - - @include mx.touch { - .#{iv.$helpers-prefix}display-#{$display}-touch, - .#{iv.$helpers-prefix}#{$display}-touch { - display: $display !important; - } - } - - @include mx.desktop { - .#{iv.$helpers-prefix}display-#{$display}-desktop, - .#{iv.$helpers-prefix}#{$display}-desktop { - display: $display !important; - } - } - - @include mx.desktop-only { - .#{iv.$helpers-prefix}display-#{$display}-desktop-only, - .#{iv.$helpers-prefix}#{$display}-desktop-only { - display: $display !important; - } - } - - @include mx.widescreen { - .#{iv.$helpers-prefix}display-#{$display}-widescreen, - .#{iv.$helpers-prefix}#{$display}-widescreen { - display: $display !important; - } - } - - @include mx.widescreen-only { - .#{iv.$helpers-prefix}display-#{$display}-widescreen-only, - .#{iv.$helpers-prefix}#{$display}-widescreen-only { - display: $display !important; - } - } - - @include mx.fullhd { - .#{iv.$helpers-prefix}display-#{$display}-fullhd, - .#{iv.$helpers-prefix}#{$display}-fullhd { - display: $display !important; - } - } -} - -.#{iv.$helpers-prefix}sr-only { - border: none !important; - clip: rect(0, 0, 0, 0) !important; - height: 0.01em !important; - overflow: hidden !important; - padding: 0 !important; - position: absolute !important; - white-space: nowrap !important; - width: 0.01em !important; -} - -@include mx.mobile { - .#{iv.$helpers-prefix}display-none-mobile, - .#{iv.$helpers-prefix}hidden-mobile { - display: none !important; - } -} - -@include mx.tablet { - .#{iv.$helpers-prefix}display-none-tablet, - .#{iv.$helpers-prefix}hidden-tablet { - display: none !important; - } -} - -@include mx.tablet-only { - .#{iv.$helpers-prefix}display-none-tablet-only, - .#{iv.$helpers-prefix}hidden-tablet-only { - display: none !important; - } -} - -@include mx.touch { - .#{iv.$helpers-prefix}display-none-touch, - .#{iv.$helpers-prefix}hidden-touch { - display: none !important; - } -} - -@include mx.desktop { - .#{iv.$helpers-prefix}display-none-desktop, - .#{iv.$helpers-prefix}hidden-desktop { - display: none !important; - } -} - -@include mx.desktop-only { - .#{iv.$helpers-prefix}display-none-desktop-only, - .#{iv.$helpers-prefix}hidden-desktop-only { - display: none !important; - } -} - -@include mx.widescreen { - .#{iv.$helpers-prefix}display-none-widescreen, - .#{iv.$helpers-prefix}hidden-widescreen { - display: none !important; - } -} - -@include mx.widescreen-only { - .#{iv.$helpers-prefix}display-none-widescreen-only, - .#{iv.$helpers-prefix}hidden-widescreen-only { - display: none !important; - } -} - -@include mx.fullhd { - .#{iv.$helpers-prefix}display-none-fullhd, - .#{iv.$helpers-prefix}hidden-fullhd { - display: none !important; - } -} - -.#{iv.$helpers-prefix}visibility-hidden, -.#{iv.$helpers-prefix}invisible { - visibility: hidden !important; -} - -@include mx.mobile { - .#{iv.$helpers-prefix}visibility-hidden-mobile, - .#{iv.$helpers-prefix}invisible-mobile { - visibility: hidden !important; - } -} - -@include mx.tablet { - .#{iv.$helpers-prefix}visibility-hidden-tablet, - .#{iv.$helpers-prefix}invisible-tablet { - visibility: hidden !important; - } -} - -@include mx.tablet-only { - .#{iv.$helpers-prefix}visibility-hidden-tablet-only, - .#{iv.$helpers-prefix}invisible-tablet-only { - visibility: hidden !important; - } -} - -@include mx.touch { - .#{iv.$helpers-prefix}visibility-hidden-touch, - .#{iv.$helpers-prefix}invisible-touch { - visibility: hidden !important; - } -} - -@include mx.desktop { - .#{iv.$helpers-prefix}visibility-hidden-desktop, - .#{iv.$helpers-prefix}invisible-desktop { - visibility: hidden !important; - } -} - -@include mx.desktop-only { - .#{iv.$helpers-prefix}visibility-hidden-desktop-only, - .#{iv.$helpers-prefix}invisible-desktop-only { - visibility: hidden !important; - } -} - -@include mx.widescreen { - .#{iv.$helpers-prefix}visibility-hidden-widescreen, - .#{iv.$helpers-prefix}invisible-widescreen { - visibility: hidden !important; - } -} - -@include mx.widescreen-only { - .#{iv.$helpers-prefix}visibility-hidden-widescreen-only, - .#{iv.$helpers-prefix}invisible-widescreen-only { - visibility: hidden !important; - } -} - -@include mx.fullhd { - .#{iv.$helpers-prefix}visibility-hidden-fullhd, - .#{iv.$helpers-prefix}invisible-fullhd { - visibility: hidden !important; - } -} diff --git a/styles/bulma/sass/layout/_index.scss b/styles/bulma/sass/layout/_index.scss deleted file mode 100644 index c28494d..0000000 --- a/styles/bulma/sass/layout/_index.scss +++ /dev/null @@ -1,9 +0,0 @@ -/* Bulma Components */ -@charset "utf-8"; - -@forward "container"; -@forward "footer"; -@forward "hero"; -@forward "level"; -@forward "media"; -@forward "section"; diff --git a/styles/bulma/sass/layout/container.scss b/styles/bulma/sass/layout/container.scss deleted file mode 100644 index a04a1b8..0000000 --- a/styles/bulma/sass/layout/container.scss +++ /dev/null @@ -1,51 +0,0 @@ -@use "../utilities/initial-variables" as iv; -@use "../utilities/mixins" as mx; - -$container-offset: 2 * iv.$gap !default; -$container-max-width: iv.$fullhd !default; - -.#{iv.$class-prefix}container { - flex-grow: 1; - margin: 0 auto; - position: relative; - width: 100%; - - &.#{iv.$class-prefix}is-fluid { - max-width: none !important; - padding-left: iv.$gap; - padding-right: iv.$gap; - width: 100%; - } - - @include mx.desktop { - max-width: iv.$desktop - $container-offset; - } - - @include mx.until-widescreen { - &.#{iv.$class-prefix}is-widescreen:not(.#{iv.$class-prefix}is-max-desktop) { - max-width: min(iv.$widescreen, $container-max-width) - $container-offset; - } - } - - @include mx.until-fullhd { - &.#{iv.$class-prefix}is-fullhd:not(.#{iv.$class-prefix}is-max-desktop):not( - .#{iv.$class-prefix}is-max-widescreen - ) { - max-width: min(iv.$fullhd, $container-max-width) - $container-offset; - } - } - - @include mx.widescreen { - &:not(.#{iv.$class-prefix}is-max-desktop) { - max-width: min(iv.$widescreen, $container-max-width) - $container-offset; - } - } - - @include mx.fullhd { - &:not(.#{iv.$class-prefix}is-max-desktop):not( - .#{iv.$class-prefix}is-max-widescreen - ) { - max-width: min(iv.$fullhd, $container-max-width) - $container-offset; - } - } -} diff --git a/styles/bulma/sass/layout/footer.scss b/styles/bulma/sass/layout/footer.scss deleted file mode 100644 index bc9b6c8..0000000 --- a/styles/bulma/sass/layout/footer.scss +++ /dev/null @@ -1,23 +0,0 @@ -@use "../utilities/css-variables" as cv; -@use "../utilities/initial-variables" as iv; - -$footer-background-color: cv.getVar("scheme-main-bis") !default; -$footer-color: false !default; -$footer-padding: 3rem 1.5rem 6rem !default; - -.#{iv.$class-prefix}footer { - @include cv.register-vars( - ( - "footer-background-color": #{$footer-background-color}, - "footer-color": #{$footer-color}, - "footer-padding": #{$footer-padding}, - ) - ); - - background-color: cv.getVar("footer-background-color"); - padding: cv.getVar("footer-padding"); - - @if $footer-color { - color: cv.getVar("footer-color"); - } -} diff --git a/styles/bulma/sass/layout/hero.scss b/styles/bulma/sass/layout/hero.scss deleted file mode 100644 index 3cd1cfd..0000000 --- a/styles/bulma/sass/layout/hero.scss +++ /dev/null @@ -1,270 +0,0 @@ -@use "../utilities/css-variables" as cv; -@use "../utilities/derived-variables" as dv; -@use "../utilities/extends"; -@use "../utilities/initial-variables" as iv; -@use "../utilities/mixins" as mx; - -$hero-body-padding: 3rem 1.5rem !default; -$hero-body-padding-tablet: 3rem 3rem !default; -$hero-body-padding-small: 1.5rem !default; -$hero-body-padding-medium: 9rem 4.5rem !default; -$hero-body-padding-large: 18rem 6rem !default; - -$hero-gradient-h-offset: 5deg; -$hero-gradient-s-offset: 10%; -$hero-gradient-l-offset: 5%; - -$hero-colors: dv.$colors !default; - -// Main container -.#{iv.$class-prefix}hero { - @include cv.register-vars( - ( - "hero-body-padding": #{$hero-body-padding}, - "hero-body-padding-tablet": #{$hero-body-padding-tablet}, - "hero-body-padding-small": #{$hero-body-padding-small}, - "hero-body-padding-medium": #{$hero-body-padding-medium}, - "hero-body-padding-large": #{$hero-body-padding-large}, - ) - ); -} - -.#{iv.$class-prefix}hero { - align-items: stretch; - display: flex; - flex-direction: column; - justify-content: space-between; - - .#{iv.$class-prefix}navbar { - background: none; - } - - .#{iv.$class-prefix}tabs { - ul { - border-bottom: none; - } - } - - // Colors - @each $name, $pair in $hero-colors { - &.#{iv.$class-prefix}is-#{$name} { - @include cv.register-vars( - ( - "hero-h": #{cv.getVar($name, "", "-h")}, - "hero-s": #{cv.getVar($name, "", "-s")}, - "hero-background-l": #{cv.getVar($name, "", "-l")}, - "hero-color-l": #{cv.getVar($name, "", "-invert-l")}, - ) - ); - - $background-color: hsl( - #{cv.getVar("hero-h")}, - #{cv.getVar("hero-s")}, - #{cv.getVar("hero-background-l")} - ); - $color: hsl( - #{cv.getVar("hero-h")}, - #{cv.getVar("hero-s")}, - #{cv.getVar("hero-color-l")} - ); - - background-color: hsl( - #{cv.getVar("hero-h")}, - #{cv.getVar("hero-s")}, - #{cv.getVar("hero-background-l")} - ); - color: $color; - - .#{iv.$class-prefix}navbar { - @include cv.register-vars( - ( - "navbar-item-color": $color, - "navbar-item-hover-background-color": $color, - "navbar-item-hover-color": $background-color, - "navbar-item-active-background-color": $color, - "navbar-item-active-color": $background-color, - ) - ); - } - - .#{iv.$class-prefix}tabs { - @include cv.register-vars( - ( - "tabs-link-color": $color, - "tabs-boxed-link-active-background-color": $color, - "tabs-boxed-link-active-border-color": $background-color, - "tabs-link-active-color": $background-color, - ) - ); - } - - .#{iv.$class-prefix}subtitle { - @include cv.register-vars( - ( - "subtitle-color": $color, - "subtitle-strong-color": $color, - ) - ); - } - - .#{iv.$class-prefix}title { - @include cv.register-vars( - ( - "title-color": $color, - "title-strong-color": $color, - ) - ); - } - - // Modifiers - &.#{iv.$class-prefix}is-bold { - $gradient-top-left: hsl( - calc(#{cv.getVar("hero-h")} - $hero-gradient-h-offset), - calc(#{cv.getVar("hero-s")} + $hero-gradient-s-offset), - calc(#{cv.getVar("hero-background-l")} + $hero-gradient-l-offset) - ); - $gradient-middle: hsl( - #{cv.getVar("hero-h")}, - #{cv.getVar("hero-s")}, - #{cv.getVar("hero-background-l")} - ); - $gradient-bottom-right: hsl( - calc(#{cv.getVar("hero-h")} + $hero-gradient-h-offset), - calc(#{cv.getVar("hero-s")} - $hero-gradient-s-offset), - calc(#{cv.getVar("hero-background-l")} - $hero-gradient-l-offset) - ); - - background-image: linear-gradient( - 141deg, - $gradient-top-left 0%, - $gradient-middle 71%, - $gradient-bottom-right 100% - ); - - @include mx.mobile { - .#{iv.$class-prefix}navbar-menu { - background-image: linear-gradient( - 141deg, - $gradient-top-left 0%, - $color 71%, - $gradient-bottom-right 100% - ); - } - } - } - } - } - - // Sizes - &.#{iv.$class-prefix}is-small { - .#{iv.$class-prefix}hero-body { - padding: cv.getVar("hero-body-padding-small"); - } - } - - &.#{iv.$class-prefix}is-medium { - @include mx.tablet { - .#{iv.$class-prefix}hero-body { - padding: cv.getVar("hero-body-padding-medium"); - } - } - } - - &.#{iv.$class-prefix}is-large { - @include mx.tablet { - .#{iv.$class-prefix}hero-body { - padding: cv.getVar("hero-body-padding-large"); - } - } - } - - &.#{iv.$class-prefix}is-halfheight, - &.#{iv.$class-prefix}is-fullheight, - &.#{iv.$class-prefix}is-fullheight-with-navbar { - .#{iv.$class-prefix}hero-body { - align-items: center; - display: flex; - - & > .#{iv.$class-prefix}container { - flex-grow: 1; - flex-shrink: 1; - } - } - } - - &.#{iv.$class-prefix}is-halfheight { - min-height: 50vh; - } - - &.#{iv.$class-prefix}is-fullheight { - min-height: 100vh; - } -} - -// Components - -.#{iv.$class-prefix}hero-video { - @extend %overlay; - overflow: hidden; - - video { - left: 50%; - min-height: 100%; - min-width: 100%; - position: absolute; - top: 50%; - transform: translate3d(-50%, -50%, 0); - } - - // Modifiers - &.#{iv.$class-prefix}is-transparent { - opacity: 0.3; - } - - // Responsiveness - @include mx.mobile { - display: none; - } -} - -.#{iv.$class-prefix}hero-buttons { - margin-top: 1.5rem; - - // Responsiveness - @include mx.mobile { - .#{iv.$class-prefix}button { - display: flex; - - &:not(:last-child) { - margin-bottom: 0.75rem; - } - } - } - - @include mx.tablet { - display: flex; - justify-content: center; - - .#{iv.$class-prefix}button:not(:last-child) { - margin-inline-end: 1.5rem; - } - } -} - -// Containers - -.#{iv.$class-prefix}hero-head, -.#{iv.$class-prefix}hero-foot { - flex-grow: 0; - flex-shrink: 0; -} - -.#{iv.$class-prefix}hero-body { - flex-grow: 1; - flex-shrink: 0; - padding: cv.getVar("hero-body-padding"); - - @include mx.tablet { - padding: cv.getVar("hero-body-padding-tablet"); - } -} diff --git a/styles/bulma/sass/layout/level.scss b/styles/bulma/sass/layout/level.scss deleted file mode 100644 index dbb5a47..0000000 --- a/styles/bulma/sass/layout/level.scss +++ /dev/null @@ -1,107 +0,0 @@ -@use "../utilities/css-variables" as cv; -@use "../utilities/initial-variables" as iv; -@use "../utilities/extends"; -@use "../utilities/mixins" as mx; - -$level-item-spacing: calc(#{cv.getVar("block-spacing")} * 0.5) !default; - -.#{iv.$class-prefix}level { - @extend %block; - @include cv.register-var("level-item-spacing", #{$level-item-spacing}); - align-items: center; - display: flex; - flex-direction: column; - justify-content: space-between; - gap: cv.getVar("level-item-spacing"); - - code { - border-radius: cv.getVar("radius"); - } - - img { - display: inline-block; - vertical-align: top; - } - - // Modifiers - &.#{iv.$class-prefix}is-mobile { - display: flex; - flex-direction: row; - - .#{iv.$class-prefix}level-left, - .#{iv.$class-prefix}level-right { - display: flex; - } - - .#{iv.$class-prefix}level-item { - &:not(.#{iv.$class-prefix}is-narrow) { - flex-grow: 1; - } - } - } - - // Responsiveness - @include mx.tablet { - display: flex; - flex-direction: row; - - & > .#{iv.$class-prefix}level-item { - &:not(.#{iv.$class-prefix}is-narrow) { - flex-grow: 1; - } - } - } -} - -.#{iv.$class-prefix}level-item { - align-items: center; - display: flex; - flex-basis: auto; - flex-grow: 0; - flex-shrink: 0; - justify-content: center; - - .#{iv.$class-prefix}title, - .#{iv.$class-prefix}subtitle { - margin-bottom: 0; - } -} - -.#{iv.$class-prefix}level-left, -.#{iv.$class-prefix}level-right { - flex-basis: auto; - flex-grow: 0; - flex-shrink: 0; - gap: $level-item-spacing; - - .#{iv.$class-prefix}level-item { - // Modifiers - &.#{iv.$class-prefix}is-flexible { - flex-grow: 1; - } - } -} - -.#{iv.$class-prefix}level-left { - align-items: center; - display: flex; - flex-direction: column; - justify-content: flex-start; - - // Responsiveness - @include mx.tablet { - flex-direction: row; - } -} - -.#{iv.$class-prefix}level-right { - align-items: center; - display: flex; - flex-direction: column; - justify-content: flex-end; - - // Responsiveness - @include mx.tablet { - flex-direction: row; - } -} diff --git a/styles/bulma/sass/layout/media.scss b/styles/bulma/sass/layout/media.scss deleted file mode 100644 index e65ced8..0000000 --- a/styles/bulma/sass/layout/media.scss +++ /dev/null @@ -1,106 +0,0 @@ -@use "../utilities/css-variables" as cv; -@use "../utilities/initial-variables" as iv; -@use "../utilities/extends"; -@use "../utilities/mixins" as mx; - -$media-border-color: hsla( - #{cv.getVar("scheme-h")}, - #{cv.getVar("scheme-s")}, - #{cv.getVar("border-l")}, - 0.5 -) !default; -$media-border-size: 1px !default; -$media-spacing: 1rem !default; -$media-spacing-large: 1.5rem !default; -$media-content-spacing: 0.75rem !default; -$media-level-1-spacing: 0.75rem !default; -$media-level-1-content-spacing: 0.5rem !default; -$media-level-2-spacing: 0.5rem !default; - -.#{iv.$class-prefix}media { - @extend %block; - @include cv.register-vars( - ( - "media-border-color": #{$media-border-color}, - "media-border-size": #{$media-border-size}, - "media-spacing": #{$media-spacing}, - "media-spacing-large": #{$media-spacing-large}, - "media-content-spacing": #{$media-content-spacing}, - "media-level-1-spacing": #{$media-level-1-spacing}, - "media-level-1-content-spacing": #{$media-level-1-content-spacing}, - "media-level-2-spacing": #{$media-level-2-spacing}, - ) - ); - align-items: flex-start; - display: flex; - text-align: inherit; - - .#{iv.$class-prefix}content:not(:last-child) { - margin-bottom: cv.getVar("media-content-spacing"); - } - - .#{iv.$class-prefix}media { - border-top-color: cv.getVar("media-border-color"); - border-top-style: solid; - border-top-width: cv.getVar("media-border-size"); - display: flex; - padding-top: cv.getVar("media-level-1-spacing"); - - .#{iv.$class-prefix}content:not(:last-child), - .#{iv.$class-prefix}control:not(:last-child) { - margin-bottom: cv.getVar("media-level-1-content-spacing"); - } - - .#{iv.$class-prefix}media { - padding-top: cv.getVar("media-level-2-spacing"); - - & + .#{iv.$class-prefix}media { - margin-top: cv.getVar("media-level-2-spacing"); - } - } - } - - & + .#{iv.$class-prefix}media { - border-top-color: cv.getVar("media-border-color"); - border-top-style: solid; - border-top-width: cv.getVar("media-border-size"); - margin-top: cv.getVar("media-spacing"); - padding-top: cv.getVar("media-spacing"); - } - - // Sizes - &.#{iv.$class-prefix}is-large { - & + .#{iv.$class-prefix}media { - margin-top: cv.getVar("media-spacing-large"); - padding-top: cv.getVar("media-spacing-large"); - } - } -} - -.#{iv.$class-prefix}media-left, -.#{iv.$class-prefix}media-right { - flex-basis: auto; - flex-grow: 0; - flex-shrink: 0; -} - -.#{iv.$class-prefix}media-left { - margin-inline-end: cv.getVar("media-spacing"); -} - -.#{iv.$class-prefix}media-right { - margin-inline-start: cv.getVar("media-spacing"); -} - -.#{iv.$class-prefix}media-content { - flex-basis: auto; - flex-grow: 1; - flex-shrink: 1; - text-align: inherit; -} - -@include mx.mobile { - .#{iv.$class-prefix}media-content { - overflow-x: auto; - } -} diff --git a/styles/bulma/sass/layout/section.scss b/styles/bulma/sass/layout/section.scss deleted file mode 100644 index 9d9bd5a..0000000 --- a/styles/bulma/sass/layout/section.scss +++ /dev/null @@ -1,34 +0,0 @@ -@use "../utilities/css-variables" as cv; -@use "../utilities/initial-variables" as iv; -@use "../utilities/mixins" as mx; - -$section-padding: 3rem 1.5rem !default; -$section-padding-desktop: 3rem 3rem !default; -$section-padding-medium: 9rem 4.5rem !default; -$section-padding-large: 18rem 6rem !default; - -.#{iv.$class-prefix}section { - @include cv.register-vars( - ( - "section-padding": #{$section-padding}, - "section-padding-desktop": #{$section-padding-desktop}, - "section-padding-medium": #{$section-padding-medium}, - "section-padding-large": #{$section-padding-large}, - ) - ); - padding: cv.getVar("section-padding"); - - // Responsiveness - @include mx.desktop { - padding: cv.getVar("section-padding-desktop"); - - // Sizes - &.#{iv.$class-prefix}is-medium { - padding: cv.getVar("section-padding-medium"); - } - - &.#{iv.$class-prefix}is-large { - padding: cv.getVar("section-padding-large"); - } - } -} diff --git a/styles/bulma/sass/themes/_index.scss b/styles/bulma/sass/themes/_index.scss deleted file mode 100644 index d4168f5..0000000 --- a/styles/bulma/sass/themes/_index.scss +++ /dev/null @@ -1,35 +0,0 @@ -/* Bulma Themes */ -@charset "utf-8"; - -@use "../utilities/css-variables" as cv; - -@use "light"; -@use "dark"; -@use "setup"; - -:root { - @include light.light-theme; - @include setup.setup-theme; -} - -// prefers-color-scheme: light -@include cv.system-theme($name: "light") { - @include light.light-theme; -} - -// prefers-color-scheme: dark -@include cv.system-theme($name: "dark") { - @include dark.dark-theme; -} - -// :root, [data-theme=light], .theme-light -@include cv.bulma-theme($name: "light") { - @include light.light-theme; - @include setup.setup-theme; -} - -// [data-theme=dark], .theme-dark -@include cv.bulma-theme($name: "dark") { - @include dark.dark-theme; - @include setup.setup-theme; -} diff --git a/styles/bulma/sass/themes/dark.scss b/styles/bulma/sass/themes/dark.scss deleted file mode 100644 index 65cf947..0000000 --- a/styles/bulma/sass/themes/dark.scss +++ /dev/null @@ -1,56 +0,0 @@ -@use "sass:list"; - -@use "../utilities/initial-variables" as iv; -@use "../utilities/css-variables" as cv; -@use "../utilities/derived-variables" as dv; -@use "setup"; - -// The main lightness of this theme -$scheme-main-l: 9%; -$background-l: 14%; -$text-l: 71%; - -// The main scheme color, used to make calculations -$scheme-main: hsl(iv.$scheme-h, iv.$scheme-s, $scheme-main-l); -$background: hsl(iv.$scheme-h, iv.$scheme-s, $background-l); -$text: hsl(iv.$scheme-h, iv.$scheme-s, $text-l); - -@mixin dark-theme { - @each $name, $color in dv.$colors { - $base: $color; - - @if type-of($color == "list") { - $base: list.nth($color, 1); - } - - @include cv.generate-on-scheme-colors($name, $base, $scheme-main); - } - - @include cv.register-vars( - ( - "scheme-brightness": "dark", - "scheme-main-l": $scheme-main-l, - "scheme-main-bis-l": $scheme-main-l + 2%, - "scheme-main-ter-l": $scheme-main-l + 4%, - "soft-l": iv.$dark-l, - "bold-l": iv.$light-l, - "soft-invert-l": iv.$light-l, - "bold-invert-l": iv.$dark-l, - "background-l": $background-l, - "border-weak-l": 21%, - "border-l": 24%, - "text-weak-l": 53%, - "text-l": $text-l, - "text-strong-l": 93%, - "text-title-l": 100%, - "hover-background-l-delta": 5%, - "active-background-l-delta": 10%, - "hover-border-l-delta": 10%, - "active-border-l-delta": 20%, - "hover-color-l-delta": 5%, - "active-color-l-delta": 10%, - ) - ); - - @include cv.register-hsl("shadow", white); -} diff --git a/styles/bulma/sass/themes/light.scss b/styles/bulma/sass/themes/light.scss deleted file mode 100644 index 67f94c7..0000000 --- a/styles/bulma/sass/themes/light.scss +++ /dev/null @@ -1,145 +0,0 @@ -@use "sass:list"; - -@use "../utilities/css-variables" as cv; -@use "../utilities/derived-variables" as dv; -@use "../utilities/initial-variables" as iv; -@use "../utilities/functions" as fn; -@use "setup"; - -// The main lightness of this theme -$scheme-main-l: 100%; - -// The main scheme color, used to make calculations -$scheme-main: hsl(iv.$scheme-h, iv.$scheme-s, $scheme-main-l); - -@mixin light-theme { - @include cv.register-vars( - ( - "scheme-h": iv.$scheme-h, - "scheme-s": iv.$scheme-s, - "light-l": iv.$light-l, - "light-invert-l": iv.$dark-l, - "dark-l": iv.$dark-l, - "dark-invert-l": iv.$light-l, - "soft-l": iv.$light-l, - "bold-l": iv.$dark-l, - "soft-invert-l": iv.$dark-l, - "bold-invert-l": iv.$light-l, - - // Deltas - "hover-background-l-delta": -5%, - "active-background-l-delta": -10%, - - "hover-border-l-delta": -10%, - "active-border-l-delta": -20%, - - "hover-color-l-delta": -5%, - "active-color-l-delta": -10%, - - "hover-shadow-a-delta": -0.05, - "active-shadow-a-delta": -0.1, - - // Light only - "scheme-brightness": "light", - "scheme-main-l": $scheme-main-l, - "scheme-main-bis-l": 98%, - "scheme-main-ter-l": 96%, - "background-l": 96%, - "border-weak-l": 93%, - "border-l": 86%, - "text-weak-l": 48%, - "text-l": 29%, - "text-strong-l": 21%, - "text-title-l": 14%, - "scheme-invert-ter-l": 14%, - "scheme-invert-bis-l": 7%, - "scheme-invert-l": 4%, - - // Typography - "family-primary": dv.$family-primary, - "family-secondary": dv.$family-secondary, - "family-code": dv.$family-code, - "size-small": dv.$size-small, - "size-normal": dv.$size-normal, - "size-medium": dv.$size-medium, - "size-large": dv.$size-large, - "weight-light": iv.$weight-light, - "weight-normal": iv.$weight-normal, - "weight-medium": iv.$weight-medium, - "weight-semibold": iv.$weight-semibold, - "weight-bold": iv.$weight-bold, - "weight-extrabold": iv.$weight-extrabold, - - // Other - "block-spacing": iv.$block-spacing, - "duration": 294ms, - "easing": ease-out, - "radius-small": iv.$radius-small, - "radius": iv.$radius, - "radius-medium": iv.$radius-medium, - "radius-large": iv.$radius-large, - "radius-rounded": 9999px, - "speed": 86ms, - - "loading-color": #{cv.getVar("border")}, - "burger-h": #{cv.getVar("link-h")}, - "burger-s": #{cv.getVar("link-s")}, - "burger-l": #{cv.getVar("link-l")}, - "burger-border-radius": 0.5em, - // Using px values to prevent half pixel issues - "burger-gap": 5px, - "burger-item-height": 2px, - "burger-item-width": 20px, - ) - ); - - // Colors - $no-palette: ("white", "black", "light", "dark"); - - @each $name, $color in dv.$colors { - $base: $color; - $invert: null; - $light: null; - $dark: null; - - @if type-of($color == "list") { - $base: list.nth($color, 1); - - @if list.length($color) > 3 { - $invert: list.nth($color, 2); - $light: list.nth($color, 3); - $dark: list.nth($color, 4); - } @else if list.length($color) > 1 { - $invert: list.nth($color, 2); - } - } - - @if list.index($no-palette, $name) { - @include cv.generate-basic-palette($name, $base, $invert); - } @else { - @include cv.generate-color-palette( - $name, - $base, - $scheme-main-l, - $invert, - $light, - $dark - ); - } - - @include cv.generate-on-scheme-colors($name, $base, $scheme-main); - } - - // Shades - @each $name, $shade in dv.$shades { - @include cv.register-var($name, $shade); - } - - @include cv.register-hsl("shadow", dv.$shadow-color); - - @each $size in dv.$sizes { - $i: index(dv.$sizes, $size); - $name: "size-#{$i}"; - @include cv.register-var($name, $size); - } -} diff --git a/styles/bulma/sass/themes/setup.scss b/styles/bulma/sass/themes/setup.scss deleted file mode 100644 index 6caddf7..0000000 --- a/styles/bulma/sass/themes/setup.scss +++ /dev/null @@ -1,174 +0,0 @@ -@use "../utilities/css-variables" as cv; - -@mixin setup-theme() { - @include cv.register-vars( - ( - // Computed - "scheme-main": - hsl( - #{cv.getVar("scheme-h")}, - #{cv.getVar("scheme-s")}, - #{cv.getVar("scheme-main-l")} - ), - "scheme-main-bis": - hsl( - #{cv.getVar("scheme-h")}, - #{cv.getVar("scheme-s")}, - #{cv.getVar("scheme-main-bis-l")} - ), - "scheme-main-ter": - hsl( - #{cv.getVar("scheme-h")}, - #{cv.getVar("scheme-s")}, - #{cv.getVar("scheme-main-ter-l")} - ), - "background": - hsl( - #{cv.getVar("scheme-h")}, - #{cv.getVar("scheme-s")}, - #{cv.getVar("background-l")} - ), - "background-hover": - hsl( - #{cv.getVar("scheme-h")}, - #{cv.getVar("scheme-s")}, - calc( - #{cv.getVar("background-l")} + #{cv.getVar( - "hover-background-l-delta" - )} - ) - ), - "background-active": - hsl( - #{cv.getVar("scheme-h")}, - #{cv.getVar("scheme-s")}, - calc( - #{cv.getVar("background-l")} + #{cv.getVar( - "active-background-l-delta" - )} - ) - ), - "border-weak": - hsl( - #{cv.getVar("scheme-h")}, - #{cv.getVar("scheme-s")}, - #{cv.getVar("border-weak-l")} - ), - "border": - hsl( - #{cv.getVar("scheme-h")}, - #{cv.getVar("scheme-s")}, - #{cv.getVar("border-l")} - ), - "border-hover": - hsl( - #{cv.getVar("scheme-h")}, - #{cv.getVar("scheme-s")}, - calc(#{cv.getVar("border-l")} + #{cv.getVar("hover-border-l-delta")}) - ), - "border-active": - hsl( - #{cv.getVar("scheme-h")}, - #{cv.getVar("scheme-s")}, - calc(#{cv.getVar("border-l")} + #{cv.getVar("active-border-l-delta")}) - ), - "text-weak": - hsl( - #{cv.getVar("text-h")}, - #{cv.getVar("text-s")}, - #{cv.getVar("text-weak-l")} - ), - "text": - hsl( - #{cv.getVar("text-h")}, - #{cv.getVar("text-s")}, - #{cv.getVar("text-l")} - ), - "text-strong": - hsl( - #{cv.getVar("text-h")}, - #{cv.getVar("text-s")}, - #{cv.getVar("text-strong-l")} - ), - "scheme-invert-ter": - hsl( - #{cv.getVar("scheme-h")}, - #{cv.getVar("scheme-s")}, - #{cv.getVar("scheme-invert-ter-l")} - ), - "scheme-invert-bis": - hsl( - #{cv.getVar("scheme-h")}, - #{cv.getVar("scheme-s")}, - #{cv.getVar("scheme-invert-bis-l")} - ), - "scheme-invert": - hsl( - #{cv.getVar("scheme-h")}, - #{cv.getVar("scheme-s")}, - #{cv.getVar("scheme-invert-l")} - ), - "link": - hsl( - #{cv.getVar("link-h")}, - #{cv.getVar("link-s")}, - #{cv.getVar("link-l")} - ), - "link-text": - hsl( - #{cv.getVar("link-h")}, - #{cv.getVar("link-s")}, - #{cv.getVar("link-on-scheme-l")} - ), - "link-text-hover": - hsl( - #{cv.getVar("link-h")}, - #{cv.getVar("link-s")}, - calc( - #{cv.getVar("link-on-scheme-l")} + #{cv.getVar( - "hover-color-l-delta" - )} - ) - ), - "link-text-active": - hsl( - #{cv.getVar("link-h")}, - #{cv.getVar("link-s")}, - calc( - #{cv.getVar("link-on-scheme-l")} + #{cv.getVar( - "active-color-l-delta" - )} - ) - ), - "focus-h": #{cv.getVar("link-h")}, - "focus-s": #{cv.getVar("link-s")}, - "focus-l": #{cv.getVar("link-l")}, - "focus-offset": 1px, - "focus-style": solid, - "focus-width": 2px, - "focus-shadow-size": 0 0 0 0.1875em, - "focus-shadow-alpha": 0.25, - "code": - hsl( - #{cv.getVar("danger-h")}, - #{cv.getVar("danger-s")}, - #{cv.getVar("danger-on-scheme-l")} - ), - "code-background": #{cv.getVar("background")}, - "pre": #{cv.getVar("text")}, - "pre-background": #{cv.getVar("background")}, - "shadow": ( - 0 0.5em 1em -0.125em hsla(#{cv.getVar("shadow-h")}, #{cv.getVar( - "shadow-s" - )}, #{cv.getVar("shadow-l")}, 0.1), - 0 0px 0 1px - hsla( - #{cv.getVar("shadow-h")}, - #{cv.getVar("shadow-s")}, - #{cv.getVar("shadow-l")}, - 0.02 - ) - ) - ) - ); -} diff --git a/styles/bulma/sass/utilities/_index.scss b/styles/bulma/sass/utilities/_index.scss deleted file mode 100644 index 12e06bc..0000000 --- a/styles/bulma/sass/utilities/_index.scss +++ /dev/null @@ -1,7 +0,0 @@ -/* Bulma Utilities */ -@charset "utf-8"; - -@forward "initial-variables"; -@forward "functions"; -@forward "derived-variables"; -@forward "controls"; diff --git a/styles/bulma/sass/utilities/controls.scss b/styles/bulma/sass/utilities/controls.scss deleted file mode 100644 index 5ad16dd..0000000 --- a/styles/bulma/sass/utilities/controls.scss +++ /dev/null @@ -1,85 +0,0 @@ -@use "css-variables" as cv; -@use "derived-variables" as dv; -@use "initial-variables" as iv; - -$control-radius: cv.getVar("radius") !default; -$control-radius-small: cv.getVar("radius-small") !default; - -$control-border-width: 1px !default; -$control-size: cv.getVar("size-normal") !default; - -$control-height: 2.5em !default; -$control-line-height: 1.5 !default; - -$control-padding-vertical: calc(0.5em - #{$control-border-width}) !default; -$control-padding-horizontal: calc(0.75em - #{$control-border-width}) !default; - -$control-focus-shadow-l: 50% !default; - -:root { - @include cv.register-vars( - ( - "control-radius": #{$control-radius}, - "control-radius-small": #{$control-radius-small}, - "control-border-width": #{$control-border-width}, - "control-height": #{$control-height}, - "control-line-height": #{$control-line-height}, - "control-padding-vertical": #{$control-padding-vertical}, - "control-padding-horizontal": #{$control-padding-horizontal}, - "control-size": #{$control-size}, - "control-focus-shadow-l": #{$control-focus-shadow-l}, - ) - ); -} - -@mixin control { - align-items: center; - appearance: none; - border-color: transparent; - border-style: solid; - border-width: cv.getVar("control-border-width"); - border-radius: cv.getVar("control-radius"); - box-shadow: none; - display: inline-flex; - font-size: cv.getVar("control-size"); - height: cv.getVar("control-height"); - justify-content: flex-start; - line-height: cv.getVar("control-line-height"); - padding-bottom: cv.getVar("control-padding-vertical"); - padding-left: cv.getVar("control-padding-horizontal"); - padding-right: cv.getVar("control-padding-horizontal"); - padding-top: cv.getVar("control-padding-vertical"); - position: relative; - transition-duration: cv.getVar("duration"); - transition-property: background-color, border-color, box-shadow, color; - vertical-align: top; - - // States - &:focus, - &:focus-visible, - &:focus-within, - &.#{iv.$class-prefix}is-focused, - &:active, - &.#{iv.$class-prefix}is-active { - outline: none; - } - - &[disabled], - fieldset[disabled] & { - cursor: not-allowed; - } -} - -// The controls sizes use mixins so they can be used at different breakpoints -@mixin control-small { - border-radius: $control-radius-small; - font-size: cv.getVar("size-small"); -} - -@mixin control-medium { - font-size: cv.getVar("size-medium"); -} - -@mixin control-large { - font-size: cv.getVar("size-large"); -} diff --git a/styles/bulma/sass/utilities/css-variables.scss b/styles/bulma/sass/utilities/css-variables.scss deleted file mode 100644 index 31feb61..0000000 --- a/styles/bulma/sass/utilities/css-variables.scss +++ /dev/null @@ -1,425 +0,0 @@ -@use "sass:color"; -@use "sass:list"; -@use "sass:map"; -@use "sass:math"; - -@use "initial-variables" as iv; -@use "functions" as fn; - -@function buildVarName($name, $prefix: "", $suffix: "") { - @return "--#{iv.$cssvars-prefix}#{$prefix}#{$name}#{$suffix}"; -} - -@function buildHslaString($name, $l, $a: 1) { - $lightness: getVar($name, "", "-l"); - @if ($l) { - $lightness: $l; - } - @return "hsla(#{getVar($name, '', '-h')}, #{getVar($name, '', '-s')}, #{$lightness}, #{$a})"; -} - -@function getVar($name, $prefix: "", $suffix: "") { - $varName: buildVarName($name, $prefix, $suffix); - @return var(#{$varName}); -} - -@function getVarWithBackup($name, $backup, $prefix: "", $suffix: "") { - $varName: buildVarName($name, $prefix, $suffix); - $backupName: buildVarName($backup, $prefix, $suffix); - @return var(#{$varName}, var(#{$backupName})); -} - -@function getRgbaVar($name, $alpha, $prefix: "", $suffix: "") { - $varName: buildVarName($name, $prefix, $suffix); - @return unquote("rgba(var(#{$varName}), #{$alpha})"); -} - -@mixin register-var($name, $value, $prefix: "", $suffix: "") { - $varName: buildVarName($name, $prefix, $suffix); - #{$varName}: #{$value}; -} - -@mixin register-vars($vars, $prefix: "", $suffix: "") { - @each $name, $value in $vars { - @include register-var($name, $value, $prefix, $suffix); - } -} - -@mixin register-rgb($name, $value) { - @include register-var( - $name, - (red($value), green($value), blue($value)), - "", - "-rgb" - ); -} - -@mixin register-hsl($name, $value) { - @include register-var($name, round(hue($value)), "", "-h"); - @include register-var($name, round(saturation($value)), "", "-s"); - @include register-var($name, round(lightness($value)), "", "-l"); -} - -@mixin generate-on-scheme-colors($name, $base, $scheme-main) { - // Accessibility Contrast System - $scheme-main-brightness: fn.bulmaColorBrightness($scheme-main); - $on-scheme-color: $base; - $fg-lum: fn.bulmaColorLuminance($on-scheme-color); - $bg-lum: fn.bulmaColorLuminance($scheme-main); - $ratio: 0; - $found-decent-color: false; - - @if ($fg-lum > $bg-lum) { - @for $i from 0 through 20 { - $ratio: math.div(($fg-lum + 0.05), ($bg-lum + 0.05)); - - @if $ratio > 5 { - $found-decent-color: true; - } @else { - $on-scheme-color: lighten($on-scheme-color, 5%); - $fg-lum: fn.bulmaColorLuminance($on-scheme-color); - } - } - } @else { - @for $i from 0 through 20 { - $ratio: math.div(($bg-lum + 0.05), ($fg-lum + 0.05)); - - @if $ratio > 5 { - $found-decent-color: true; - } @else { - $on-scheme-color: darken($on-scheme-color, 5%); - $fg-lum: fn.bulmaColorLuminance($on-scheme-color); - } - } - } - - $on-scheme-lightness: lightness($on-scheme-color); - @include register-var($name, $on-scheme-lightness, "", "-on-scheme-l"); - $on-scheme-l: getVar($name, "", "-on-scheme-l"); - @include register-var( - "#{$name}-on-scheme", - buildHslaString($name, $on-scheme-l) - ); -} - -@mixin v1-generate-on-scheme-colors($name, $base, $scheme-main) { - // Accessibility Contrast System - $scheme-main-brightness: fn.bulmaColorBrightness($scheme-main); - $on-scheme-color: $base; - - @if ($scheme-main-brightness == "bright") { - @while (fn.bulmaEnoughContrast($on-scheme-color, #fff) == false) { - // We're on a light background, so we'll darken the test color step by step. - $on-scheme-color: darken($on-scheme-color, 5%); - } - } @else { - @while (fn.bulmaEnoughContrast($on-scheme-color, #000) == false) { - // We're on a dark background, so we'll lighten the test color step by step. - $on-scheme-color: lighten($on-scheme-color, 5%); - } - } - - $on-scheme-lightness: lightness($on-scheme-color); - @include register-var($name, $on-scheme-lightness, "", "-on-scheme-l"); -} - -@mixin register-base-color($name, $base) { - $hsla: buildHslaString($name, getVar($name, "", "-l")); - @include register-var($name, $hsla); - @include register-var($name, $hsla, "", "-base"); // Just for reference - @include register-rgb($name, $base); - @include register-hsl($name, $base); -} - -@mixin generate-basic-palette($name, $base, $invert: null) { - @include register-base-color($name, $base); - - @if $invert { - @include register-var($name, lightness($invert), "", "-invert-l"); - @include register-var("#{$name}-invert", $invert); - } -} - -@mixin generate-color-palette( - $name, - $base, - $scheme-main-l: 100%, - $invert: null, - $light: null, - $dark: null -) { - $h: round(hue($base)); // Hue - $s: round(saturation($base)); // Saturation - $l: round(lightness($base)); // Lightness - $base-lum: fn.bulmaColorLuminance($base); - $l-base: round($l % 10); // Get lightness second digit: 53% -> 3% - $l-0: 0%; // 5% or less - $l-5: 5%; // More than 5% - $a: 1; // Alpha - $base-digits: "00"; - - // Calculate digits like "40" for the scheme-main - $scheme-l-0: 0%; - $scheme-l-base: round($scheme-main-l % 10); - $closest-5: math.round(math.div($scheme-main-l, 5)) * 5; - $pct-to-int: math.div($closest-5, 100%) * 100; - $scheme-main-digits: #{$pct-to-int}; - - // === STEP 1 === - // Register the base colors - @include register-base-color($name, $base); - - // === STEP 2 === - // Generating 20 shades of the color - - // 00: 0%, 1%, 2% - // 05: 3%, 4%, 5%, 6%, 7% - // 10: 8%, 9% - - @if ($l-base < 3%) { - $l-0: $l-base; - $l-5: $l-base + 5%; - } @else if ($l-base < 8%) { - // $l-0: math.max($l-base - 5%, 0%); - $l-0: $l-base - 5%; - $l-5: $l-base; - } @else { - // $l-0: math.max($l-base - 10%, 0%); - $l-0: $l-base - 10%; - $l-5: $l-base - 5%; - } - - $shades: (); - - @for $i from 0 through 9 { - // if $l-base = 3%, then we get 3%, 13%, 23%, 33% etc. - $color-l-0: math.max($l-0 + $i * 10, 0%); - - // if $l-base = 3%, then we get 8%, 18%, 28%, 38% etc. - $color-l-5: $l-5 + $i * 10; - - $shades: map.set($shades, "#{$i}0", $color-l-0); - $shades: map.set($shades, "#{$i}5", $color-l-5); - - @include register-var($name, $color-l-0, "", "-#{$i}0-l"); - @include register-var($name, $color-l-5, "", "-#{$i}5-l"); - - @if $color-l-0 == $l { - $base-digits: "#{$i}0"; - } @else if $color-l-5 == $l { - $base-digits: "#{$i}5"; - } - } - - $shades: map.set($shades, "100", 100%); - @include register-var($name, 100%, "", "-100-l"); - - // === STEP 3 === - // Find accessible color combinations - - $combos: (); - - @each $digits-bg, $bg-l in $shades { - $background: hsl($h, $s, $bg-l); - $bg-lum: fn.bulmaColorLuminance($background); - $bg-is-light: $bg-lum > 0.55; - $candidates: (); - $found: false; - - // If the background color is the base color - @if $bg-l == $l { - $base-digits: $digits-bg; - - // Even if the base color as a background - // doesn't have an appropriate foreground, - // we still add to the list of "valid" contrast combos for now. - @if $bg-is-light { - $combos: map.set($combos, $base-digits, "10"); - } @else { - $combos: map.set($combos, $base-digits, "100"); - } - } - - // We capture all contrast ratios for any given background - // using all foreground options - $current-best-digits: "00"; - $current-best-ratio: 0; - - @each $digits-fg, $fg-l in $shades { - $foreground: hsl($h, $s, $fg-l); - $ratio: 0; - $is-light-fg: false; - - // Source: https://www.w3.org/TR/WCAG20-TECHS/G17.html - $fg-lum: fn.bulmaColorLuminance($foreground); - - @if (lightness($foreground) > lightness($background)) { - $is-light-fg: true; - $ratio: math.div(($fg-lum + 0.05), ($bg-lum + 0.05)); - } @else { - $ratio: math.div(($bg-lum + 0.05), ($fg-lum + 0.05)); - } - - @if $ratio > 7 { - $candidates: list.append( - $candidates, - fn.bulmaStringToNumber($digits-fg) - ); - - @if ($is-light-fg) { - @if (not $found) { - // Store the background/foreground combination - $combos: map.set($combos, $digits-bg, $digits-fg); - $current-best-digits: $digits-fg; - $current-best-ratio: $ratio; - $found: true; - } - } @else { - $combos: map.set($combos, $digits-bg, $digits-fg); - $current-best-digits: $digits-fg; - $current-best-ratio: $ratio; - } - } - } - - // We haven't found a decent ratio - @each $digits-fg, $fg-l in $shades { - @if (map.has-key($combos, $digits-bg) == false) { - @if ($bg-is-light) { - // Light background so we set a dark foreground - $combos: map.set($combos, $digits-bg, "00"); - } @else { - // Dark background so we set a light foreground - $combos: map.set($combos, $digits-bg, "100"); - } - } - } - } - - // The output needs to be: - // --bulma-primary-invert-l: var(--bulma-primary-100-l); - - @each $bg, $fg in $combos { - // Just using this loop to register all 20 digits - $bg-l: getVar($name, "", "-#{$bg}-l"); - @include register-var("#{$name}-#{$bg}", buildHslaString($name, $bg-l)); - - // Register the lightness - @include register-var( - $name, - getVar($name, "", "-#{$fg}-l"), - "", - "-#{$bg}-invert-l" - ); - - // Resiter the color using that lightness - $bg-invert-l: getVar($name, "", "-#{$bg}-invert-l"); - @include register-var( - "#{$name}-#{$bg}-invert", - buildHslaString($name, $bg-invert-l) - ); - } - - // If an invert color is provided by the user - @if $invert { - @include register-var($name, lightness($invert), "", "-invert-l"); - @include register-var("#{$name}-invert", $invert); - } @else { - $base-invert-l-digits: map.get($combos, $base-digits); - @include register-var( - $name, - getVar($name, "", "-#{$base-invert-l-digits}-l"), - "", - "-invert-l" - ); - - $base-invert-l: getVar($name, "", "-invert-l"); - @include register-var( - "#{$name}-invert", - buildHslaString($name, $base-invert-l) - ); - } - - // Good color on light background (90% lightness) - @if $light and $dark { - @include register-var($name, lightness($light), "", "-light-l"); - @include register-var($name, lightness($light), "", "-dark-invert-l"); - @include register-var("#{$name}-light", $light); - @include register-var("#{$name}-dark-invert", $light); - - @include register-var($name, lightness($dark), "", "-dark-l"); - @include register-var($name, lightness($dark), "", "-light-invert-l"); - @include register-var("#{$name}-dark", $dark); - @include register-var("#{$name}-light-invert", $dark); - } @else { - @include register-var($name, getVar($name, "", "-90-l"), "", "-light-l"); - - $light-l: getVar($name, "", "-light-l"); - @include register-var("#{$name}-light", buildHslaString($name, $light-l)); - - $light-invert-l-digits: map.get($combos, "90"); - @include register-var( - $name, - getVar($name, "", "-#{$light-invert-l-digits}-l"), - "", - "-light-invert-l" - ); - - $light-invert-l: getVar($name, "", "-light-invert-l"); - @include register-var( - "#{$name}-light-invert", - buildHslaString($name, $light-invert-l) - ); - - // Good color on dark background (10% lightness) - @include register-var($name, getVar($name, "", "-10-l"), "", "-dark-l"); - - $dark-l: getVar($name, "", "-dark-l"); - @include register-var("#{$name}-dark", buildHslaString($name, $dark-l)); - - $dark-invert-l-digits: map.get($combos, "10"); - @include register-var( - $name, - getVar($name, "", "-#{$dark-invert-l-digits}-l"), - "", - "-dark-invert-l" - ); - - $dark-invert-l: getVar($name, "", "-dark-invert-l"); - @include register-var( - "#{$name}-dark-invert", - buildHslaString($name, $dark-invert-l) - ); - - // Soft and Bold colors - $soft-l: getVar("soft-l"); - $soft-invert-l: getVar("soft-invert-l"); - $bold-l: getVar("bold-l"); - $bold-invert-l: getVar("bold-invert-l"); - @include register-var("#{$name}-soft", buildHslaString($name, $soft-l)); - @include register-var("#{$name}-bold", buildHslaString($name, $bold-l)); - @include register-var( - "#{$name}-soft-invert", - buildHslaString($name, $soft-invert-l) - ); - @include register-var( - "#{$name}-bold-invert", - buildHslaString($name, $bold-invert-l) - ); - } -} - -@mixin bulma-theme($name) { - [data-#{iv.$class-prefix}theme="#{$name}"], - .#{iv.$class-prefix}theme-#{$name} { - @content; - } -} - -@mixin system-theme($name) { - @media (prefers-color-scheme: #{$name}) { - :root { - @content; - } - } -} diff --git a/styles/bulma/sass/utilities/derived-variables.scss b/styles/bulma/sass/utilities/derived-variables.scss deleted file mode 100644 index 6f1440d..0000000 --- a/styles/bulma/sass/utilities/derived-variables.scss +++ /dev/null @@ -1,112 +0,0 @@ -@use "initial-variables" as iv; -@use "functions" as fn; - -// Scheme colors - -$scheme-main: iv.$white !default; -$scheme-main-bis: iv.$white-bis !default; -$scheme-main-ter: iv.$white-ter !default; -$scheme-invert: iv.$black !default; -$scheme-invert-bis: iv.$black-bis !default; -$scheme-invert-ter: iv.$black-ter !default; - -// Text colors - -$text: iv.$grey-dark !default; -$text-invert: fn.bulmaFindColorInvert($text) !default; -$text-weak: iv.$grey !default; -$text-strong: iv.$grey-darker !default; - -// Status colors - -$primary: iv.$turquoise !default; -$info: iv.$cyan !default; -$success: iv.$green !default; -$warning: iv.$yellow !default; -$danger: iv.$red !default; -$light: iv.$white-ter !default; -$dark: iv.$grey-darker !default; - -// Link colors - -$link: iv.$blue !default; - -// Decorative colors - -$background: iv.$white-ter !default; -$border: iv.$grey-lighter !default; -$border-weak: iv.$grey-lightest !default; - -// Code colors - -$code: iv.$red !default; -$code-background: $background !default; - -$pre: $text !default; -$pre-background: $background !default; - -// Typography - -$family-primary: iv.$family-sans-serif !default; -$family-secondary: iv.$family-sans-serif !default; -$family-code: iv.$family-monospace !default; - -$size-small: iv.$size-7 !default; -$size-normal: iv.$size-6 !default; -$size-medium: iv.$size-5 !default; -$size-large: iv.$size-4 !default; - -// Effects - -$shadow-color: iv.$black !default; - -// Lists and maps -$custom-colors: null !default; -$custom-shades: null !default; - -$colors: fn.mergeColorMaps( - ( - "white": ( - iv.$white, - iv.$black, - ), - "black": ( - iv.$black, - iv.$white, - ), - "light": ( - $light, - $dark, - ), - "dark": ( - $dark, - $light, - ), - "text": $text, - "primary": $primary, - "link": $link, - "info": $info, - "success": $success, - "warning": $warning, - "danger": $danger, - ), - $custom-colors -) !default; - -$shades: fn.mergeColorMaps( - ( - "black-bis": iv.$black-bis, - "black-ter": iv.$black-ter, - "grey-darker": iv.$grey-darker, - "grey-dark": iv.$grey-dark, - "grey": iv.$grey, - "grey-light": iv.$grey-light, - "grey-lighter": iv.$grey-lighter, - "white-ter": iv.$white-ter, - "white-bis": iv.$white-bis, - ), - $custom-shades -) !default; - -$sizes: iv.$size-1 iv.$size-2 iv.$size-3 iv.$size-4 iv.$size-5 iv.$size-6 - iv.$size-7 !default; diff --git a/styles/bulma/sass/utilities/extends.scss b/styles/bulma/sass/utilities/extends.scss deleted file mode 100644 index 42d05fe..0000000 --- a/styles/bulma/sass/utilities/extends.scss +++ /dev/null @@ -1,34 +0,0 @@ -@use "controls"; -@use "mixins"; - -%arrow { - @include mixins.arrow; -} - -%block { - @include mixins.block; -} - -%control { - @include controls.control; -} - -%delete { - @include mixins.delete; -} - -%loader { - @include mixins.loader; -} - -%overlay { - @include mixins.overlay; -} - -%reset { - @include mixins.reset; -} - -%unselectable { - @include mixins.unselectable; -} diff --git a/styles/bulma/sass/utilities/functions.scss b/styles/bulma/sass/utilities/functions.scss deleted file mode 100644 index f19dae0..0000000 --- a/styles/bulma/sass/utilities/functions.scss +++ /dev/null @@ -1,258 +0,0 @@ -@use "sass:list"; -@use "sass:math"; - -@function mergeColorMaps($bulma-colors, $custom-colors) { - // We return at least Bulma's hard-coded colors - $merged-colors: $bulma-colors; - - // We want a map as input - @if type-of($custom-colors) == "map" { - @each $name, $components in $custom-colors { - // The color name should be a string - // and the components either a single color - // or a colors list with at least one element - @if type-of($name) == - "string" and - (type-of($components) == "list" or type-of($components) == "color") and - length($components) >= - 1 - { - $color-base: null; - $color-invert: null; - $color-light: null; - $color-dark: null; - $value: null; - - // The param can either be a single color - // or a list of 2 colors - @if type-of($components) == "color" { - $color-base: $components; - $color-invert: bulmaFindColorInvert($color-base); - $color-light: bulmaFindLightColor($color-base); - $color-dark: bulmaFindDarkColor($color-base); - } @else if type-of($components) == "list" { - $color-base: list.nth($components, 1); - - // If Invert, Light and Dark are provided - @if length($components) > 3 { - $color-invert: list.nth($components, 2); - $color-light: list.nth($components, 3); - $color-dark: list.nth($components, 4); - - // If only Invert and Light are provided - } @else if length($components) > 2 { - $color-invert: list.nth($components, 2); - $color-light: list.nth($components, 3); - $color-dark: bulmaFindDarkColor($color-base); - - // If only Invert is provided - } @else { - $color-invert: list.nth($components, 2); - $color-light: bulmaFindLightColor($color-base); - $color-dark: bulmaFindDarkColor($color-base); - } - } - - $value: $color-base, $color-invert, $color-light, $color-dark; - - // We only want to merge the map if the color base is an actual color - @if type-of($color-base) == "color" { - // We merge this colors elements as map with Bulma's colors map - // (we can override them this way, no multiple definition for the same name) - // $merged-colors: map_merge($merged-colors, ($name: ($color-base, $color-invert, $color-light, $color-dark))) - $merged-colors: map_merge( - $merged-colors, - ( - $name: $value, - ) - ); - } - } - } - } - - @return $merged-colors; -} - -@function powerNumber($number, $exp) { - $value: 1; - - @if $exp > 0 { - @for $i from 1 through $exp { - $value: $value * $number; - } - } @else if $exp < 0 { - @for $i from 1 through -$exp { - $value: math.div($value, $number); - } - } - - @return $value; -} - -@function bulmaColorLuminance($color) { - @if type-of($color) != "color" { - @return 0.55; - } - - $color-rgb: ( - "red": red($color), - "green": green($color), - "blue": blue($color), - ); - - @each $name, $value in $color-rgb { - $adjusted: 0; - $value: math.div($value, 255); - - @if $value < 0.03928 { - $value: math.div($value, 12.92); - } @else { - $value: math.div($value + 0.055, 1.055); - $value: powerNumber($value, 2); - } - - $color-rgb: map-merge( - $color-rgb, - ( - $name: $value, - ) - ); - } - - @return map-get($color-rgb, "red") * 0.2126 + map-get($color-rgb, "green") * - 0.7152 + map-get($color-rgb, "blue") * 0.0722; -} - -@function bulmaFindColorInvert($color) { - @if bulmaColorLuminance($color) > 0.55 { - @return rgba(#000, 0.7); - } @else { - @return #fff; - } -} - -@function bulmaFindLightColor($color, $l: 96%) { - @if type-of($color) == "color" { - $l: 96%; - - @if lightness($color) > 96% { - $l: lightness($color); - } - - @return change-color($color, $lightness: $l); - } - - @return $background; -} - -@function bulmaFindDarkColor($color, $base-l: 29%) { - @if type-of($color) == "color" { - $luminance: bulmaColorLuminance($color); - $luminance-delta: 0.53 - $luminance; - $target-l: round($base-l + $luminance-delta * 53); - - @return change-color($color, $lightness: max($base-l, $target-l)); - } - - @return $text-strong; -} - -@function bulmaRgba($color, $alpha) { - @if type-of($color) != "color" { - @return $color; - } - - @return rgba($color, $alpha); -} - -@function bulmaDarken($color, $amount) { - @if type-of($color) != "color" { - @return $color; - } - - @return darken($color, $amount); -} - -@function bulmaLighten($color, $amount) { - @if type-of($color) != "color" { - @return $color; - } - - @return lighten($color, $amount); -} - -@function bulmaColorBrightness($n) { - $color-brightness: round( - (red($n) * 299) + (green($n) * 587) + (blue($n) * 114) / 1000 - ); - $light-color: round( - (red(#ffffff) * 299) + (green(#ffffff) * 587) + (blue(#ffffff) * 114) / 1000 - ); - - @if abs($color-brightness) < math.div($light-color, 2) { - @return "dark"; - } - - @return "bright"; -} - -@function bulmaEnoughContrast($foreground, $background) { - $r: (max(red($foreground), red($background))) - - (min(red($foreground), red($background))); - $g: (max(green($foreground), green($background))) - - (min(green($foreground), green($background))); - $b: (max(blue($foreground), blue($background))) - - (min(blue($foreground), blue($background))); - $sum-rgb: $r + $g + $b; - - @if $sum-rgb < 500 { - @return false; - } - - @return true; -} - -// By Cory Simmons https://corysimmons.com/ -@function bulmaStringToNumber($value) { - @if type-of($value) == "number" { - @return $value; - } @else if type-of($value) != "string" { - $_: log("Value for `to-number` should be a number or a string."); - } - - $result: 0; - $digits: 0; - $minus: str-slice($value, 1, 1) == "-"; - $numbers: ( - "0": 0, - "1": 1, - "2": 2, - "3": 3, - "4": 4, - "5": 5, - "6": 6, - "7": 7, - "8": 8, - "9": 9, - ); - - @for $i from if($minus, 2, 1) through str-length($value) { - $character: str-slice($value, $i, $i); - - @if not(index(map-keys($numbers), $character) or $character == ".") { - @return to-length(if($minus, -$result, $result), str-slice($value, $i)); - } - - @if $character == "." { - $digits: 1; - } @else if $digits == 0 { - $result: $result * 10 + map-get($numbers, $character); - } @else { - $digits: $digits * 10; - $result: $result + map-get($numbers, $character) / $digits; - } - } - - @return if($minus, -$result, $result); -} diff --git a/styles/bulma/sass/utilities/initial-variables.scss b/styles/bulma/sass/utilities/initial-variables.scss deleted file mode 100644 index 7bd4b53..0000000 --- a/styles/bulma/sass/utilities/initial-variables.scss +++ /dev/null @@ -1,155 +0,0 @@ -// Scheme Hue and Saturation - -$scheme-h: 221; -$scheme-s: 14%; -$dark-l: 20%; -$light-l: 90%; - -// Colors - -$black: hsl(221, 14%, 4%) !default; -$black-bis: hsl(221, 14%, 9%) !default; -$black-ter: hsl(221, 14%, 14%) !default; - -$grey-darker: hsl(221, 14%, 21%) !default; -$grey-dark: hsl(221, 14%, 29%) !default; -$grey: hsl(221, 14%, 48%) !default; -$grey-light: hsl(221, 14%, 71%) !default; -$grey-lighter: hsl(221, 14%, 86%) !default; -$grey-lightest: hsl(221, 14%, 93%) !default; - -$white-ter: hsl(221, 14%, 96%) !default; -$white-bis: hsl(221, 14%, 98%) !default; -$white: hsl(221, 14%, 100%) !default; - -$orange: hsl(14, 100%, 53%) !default; -$yellow: hsl(42, 100%, 53%) !default; -$green: hsl(153, 53%, 53%) !default; -$turquoise: hsl(171, 100%, 41%) !default; -$cyan: hsl(198, 100%, 70%) !default; -$blue: hsl(233, 100%, 63%) !default; -$purple: hsl(271, 100%, 71%) !default; -$red: hsl(348, 100%, 70%) !default; - -// Typography - -$family-sans-serif: "Inter", "SF Pro", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", - "Helvetica Neue", "Helvetica", "Arial", sans-serif !default; -$family-monospace: "Inconsolata", "Hack", "SF Mono", "Roboto Mono", - "Source Code Pro", "Ubuntu Mono", monospace !default; -$render-mode: optimizeLegibility !default; - -$size-1: 3rem !default; -$size-2: 2.5rem !default; -$size-3: 2rem !default; -$size-4: 1.5rem !default; -$size-5: 1.25rem !default; -$size-6: 1rem !default; -$size-7: 0.75rem !default; - -$weight-light: 300 !default; -$weight-normal: 400 !default; -$weight-medium: 500 !default; -$weight-semibold: 600 !default; -$weight-bold: 700 !default; -$weight-extrabold: 800 !default; - -// Spacing - -$block-spacing: 1.5rem !default; -$aspect-ratios: ( - (1, 1), - (5, 4), - (4, 3), - (3, 2), - (5, 3), - (16, 9), - (2, 1), - (3, 1), - (4, 5), - (3, 4), - (2, 3), - (3, 5), - (9, 16), - (1, 2), - (1, 3) -) !default; - -// Responsiveness - -// The container horizontal gap, which acts as the offset for breakpoints -$gap: 32px !default; - -// 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16 -$tablet: 769px !default; - -// 960px container + 4rem -$desktop: 960px + 2 * $gap !default; - -// 1152px container + 4rem -$widescreen: 1152px + 2 * $gap !default; -$widescreen-enabled: true !default; - -// 1344px container + 4rem -$fullhd: 1344px + 2 * $gap !default; -$fullhd-enabled: true !default; -$breakpoints: ( - "mobile": ( - "until": $tablet, - ), - "tablet": ( - "from": $tablet, - ), - "tablet-only": ( - "from": $tablet, - "until": $desktop, - ), - "touch": ( - "from": $desktop, - ), - "desktop": ( - "from": $desktop, - ), - "desktop-only": ( - "from": $desktop, - "until": $widescreen, - ), - "until-widescreen": ( - "until": $widescreen, - ), - "widescreen": ( - "from": $widescreen, - ), - "widescreen-only": ( - "from": $widescreen, - "until": $fullhd, - ), - "until-fullhd": ( - "until": $fullhd, - ), - "fullhd": ( - "from": $fullhd, - ), -) !default; - -// Miscellaneous - -$easing: ease-out !default; -$radius-small: 0.25rem !default; -$radius: 0.375rem !default; -$radius-medium: 0.5em !default; -$radius-large: 0.75rem !default; -$radius-rounded: 9999px !default; -$speed: 86ms !default; - -// Flags - -$variable-columns: true !default; -$rtl: false !default; - -// Prefixes - -$class-prefix: "" !default; -$cssvars-prefix: "bulma-" !default; -$helpers-prefix: "is-" !default; -$helpers-has-prefix: "has-" !default; diff --git a/styles/bulma/sass/utilities/mixins.scss b/styles/bulma/sass/utilities/mixins.scss deleted file mode 100644 index 20d87b6..0000000 --- a/styles/bulma/sass/utilities/mixins.scss +++ /dev/null @@ -1,460 +0,0 @@ -@use "initial-variables" as iv; -@use "css-variables" as cv; - -@mixin arrow($color: #{cv.getVar("link")}) { - border: 0.125em solid $color; - border-right: 0; - border-top: 0; - content: " "; - display: block; - height: 0.625em; - margin-top: -0.4375em; - pointer-events: none; - position: absolute; - top: 50%; - transform: rotate(-45deg); - transform-origin: center; - transition-duration: cv.getVar("duration"); - transition-property: border-color; - width: 0.625em; -} - -@mixin block($spacing: cv.getVar("block-spacing")) { - &:not(:last-child) { - margin-bottom: $spacing; - } -} - -@mixin center($width, $height: 0) { - position: absolute; - @if $height != 0 { - left: calc(50% - (#{$width} * 0.5)); - top: calc(50% - (#{$height} * 0.5)); - } @else { - left: calc(50% - (#{$width} * 0.5)); - top: calc(50% - (#{$width} * 0.5)); - } -} - -@mixin clearfix { - &::after { - clear: both; - content: " "; - display: table; - } -} - -@mixin delete { - @include cv.register-vars( - ( - "delete-dimensions": 1.25rem, - "delete-background-l": 0%, - "delete-background-alpha": 0.5, - "delete-color": #{cv.getVar("white")}, - ) - ); - - appearance: none; - background-color: hsla( - #{cv.getVar("scheme-h")}, - #{cv.getVar("scheme-s")}, - #{cv.getVar("delete-background-l")}, - #{cv.getVar("delete-background-alpha")} - ); - border: none; - border-radius: cv.getVar("radius-rounded"); - cursor: pointer; - pointer-events: auto; - display: inline-flex; - flex-grow: 0; - flex-shrink: 0; - font-size: 1em; - height: cv.getVar("delete-dimensions"); - max-height: cv.getVar("delete-dimensions"); - max-width: cv.getVar("delete-dimensions"); - min-height: cv.getVar("delete-dimensions"); - min-width: cv.getVar("delete-dimensions"); - outline: none; - position: relative; - vertical-align: top; - width: cv.getVar("delete-dimensions"); - - &::before, - &::after { - background-color: cv.getVar("delete-color"); - content: ""; - display: block; - left: 50%; - position: absolute; - top: 50%; - transform: translateX(-50%) translateY(-50%) rotate(45deg); - transform-origin: center center; - } - - &::before { - height: 2px; - width: 50%; - } - - &::after { - height: 50%; - width: 2px; - } - - &:hover, - &:focus { - @include cv.register-var("delete-background-alpha", 0.4); - } - - &:active { - @include cv.register-var("delete-background-alpha", 0.5); - } - - // Sizes - &.#{iv.$class-prefix}is-small { - @include cv.register-var("delete-dimensions", 1rem); - } - - &.#{iv.$class-prefix}is-medium { - @include cv.register-var("delete-dimensions", 1.5rem); - } - - &.#{iv.$class-prefix}is-large { - @include cv.register-var("delete-dimensions", 2rem); - } -} - -@mixin fa($size, $dimensions) { - display: inline-block; - font-size: $size; - height: $dimensions; - line-height: $dimensions; - text-align: center; - vertical-align: top; - width: $dimensions; -} - -@mixin burger($dimensions) { - align-items: center; - appearance: none; - background: none; - border: none; - border-radius: cv.getVar("burger-border-radius"); - color: hsl( - cv.getVar("burger-h"), - cv.getVar("burger-s"), - cv.getVar("burger-l") - ); - cursor: pointer; - display: inline-flex; - flex-direction: column; - flex-shrink: 0; - height: $dimensions; - justify-content: center; - position: relative; - vertical-align: top; - width: $dimensions; - - span { - background-color: currentColor; - display: block; - height: cv.getVar("burger-item-height"); - left: calc(50% - calc(#{cv.getVar("burger-item-width")}) / 2); - position: absolute; - transform-origin: center; - transition-duration: cv.getVar("duration"); - transition-property: background-color, color, opacity, transform; - transition-timing-function: cv.getVar("easing"); - width: cv.getVar("burger-item-width"); - - &:nth-child(1), - &:nth-child(2) { - top: calc(50% - calc(#{cv.getVar("burger-item-height")}) / 2); - } - - &:nth-child(3) { - bottom: calc(50% + #{cv.getVar("burger-gap")}); - } - - &:nth-child(4) { - top: calc(50% + #{cv.getVar("burger-gap")}); - } - } - - &:hover { - background-color: hsla( - cv.getVar("burger-h"), - cv.getVar("burger-s"), - cv.getVar("burger-l"), - 0.1 - ); - } - - &:active { - background-color: hsla( - cv.getVar("burger-h"), - cv.getVar("burger-s"), - cv.getVar("burger-l"), - 0.2 - ); - } - - // Modifers - &.#{iv.$class-prefix}is-active { - span { - &:nth-child(1) { - transform: rotate(-45deg); - } - - &:nth-child(2) { - transform: rotate(45deg); - } - - &:nth-child(3), - &:nth-child(4) { - opacity: 0; - } - } - } -} - -@mixin overflow-touch { - -webkit-overflow-scrolling: touch; -} - -@mixin placeholder { - $placeholders: ":-moz" ":-webkit-input" "-moz" "-ms-input"; - - @each $placeholder in $placeholders { - &:#{$placeholder}-placeholder { - @content; - } - } -} - -@mixin reset { - appearance: none; - background: none; - border: none; - color: inherit; - font-family: inherit; - font-size: 1em; - margin: 0; - padding: 0; -} - -@mixin selection($current-selector: false) { - @if $current-selector { - &::-moz-selection { - @content; - } - &::selection { - @content; - } - } @else { - ::-moz-selection { - @content; - } - ::selection { - @content; - } - } -} - -// Responsiveness - -@mixin from($device) { - @media screen and (min-width: $device) { - @content; - } -} - -@mixin until($device) { - @media screen and (max-width: ($device - 1px)) { - @content; - } -} - -@mixin between($from, $until) { - @media screen and (min-width: $from) and (max-width: ($until - 1px)) { - @content; - } -} - -@mixin mobile { - @media screen and (max-width: (iv.$tablet - 1px)) { - @content; - } -} - -@mixin tablet { - @media screen and (min-width: iv.$tablet), print { - @content; - } -} - -@mixin tablet-only { - @media screen and (min-width: iv.$tablet) and (max-width: (iv.$desktop - 1px)) { - @content; - } -} - -@mixin touch { - @media screen and (max-width: (iv.$desktop - 1px)) { - @content; - } -} - -@mixin desktop { - @media screen and (min-width: iv.$desktop) { - @content; - } -} - -@mixin desktop-only { - @if iv.$widescreen-enabled { - @media screen and (min-width: iv.$desktop) and (max-width: (iv.$widescreen - 1px)) { - @content; - } - } -} - -@mixin until-widescreen { - @if iv.$widescreen-enabled { - @media screen and (max-width: (iv.$widescreen - 1px)) { - @content; - } - } -} - -@mixin widescreen { - @if iv.$widescreen-enabled { - @media screen and (min-width: iv.$widescreen) { - @content; - } - } -} - -@mixin widescreen-only { - @if iv.$widescreen-enabled and iv.$fullhd-enabled { - @media screen and (min-width: iv.$widescreen) and (max-width: (iv.$fullhd - 1px)) { - @content; - } - } -} - -@mixin until-fullhd { - @if iv.$fullhd-enabled { - @media screen and (max-width: (iv.$fullhd - 1px)) { - @content; - } - } -} - -@mixin fullhd { - @if iv.$fullhd-enabled { - @media screen and (min-width: iv.$fullhd) { - @content; - } - } -} - -@mixin breakpoint($name) { - $breakpoint: map-get(iv.$breakpoints, $name); - - @if $breakpoint { - $from: map-get($breakpoint, "from"); - $until: map-get($breakpoint, "until"); - - @if $from and $until { - @include between($from, $until) { - @content; - } - } @else if $from { - @include from($from) { - @content; - } - } @else if $until { - @include until($until) { - @content; - } - } - } -} - -@mixin container-from($name, $width) { - @container #{$name} (min-width: #{$width}) { - @content; - } -} - -@mixin container-until($name, $width) { - @container #{$name} (max-width: #{$width - 1px}) { - @content; - } -} - -@mixin ltr { - @if not iv.$rtl { - @content; - } -} - -@mixin rtl { - @if iv.$rtl { - @content; - } -} - -@mixin ltr-property($property, $spacing, $right: true) { - $normal: if($right, "right", "left"); - $opposite: if($right, "left", "right"); - - @if iv.$rtl { - #{$property}-#{$opposite}: $spacing; - } @else { - #{$property}-#{$normal}: $spacing; - } -} - -@mixin ltr-position($spacing, $right: true) { - $normal: if($right, "right", "left"); - $opposite: if($right, "left", "right"); - - @if iv.$rtl { - #{$opposite}: $spacing; - } @else { - #{$normal}: $spacing; - } -} - -// Placeholders - -@mixin unselectable { - -webkit-touch-callout: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -@mixin loader { - animation: spinAround 500ms infinite linear; - border: 2px solid cv.getVar("loading-color"); - border-radius: cv.getVar("radius-rounded"); - border-right-color: transparent; - border-top-color: transparent; - content: ""; - display: block; - height: 1em; - position: relative; - width: 1em; -} - -@mixin overlay($offset: 0) { - bottom: $offset; - left: $offset; - position: absolute; - right: $offset; - top: $offset; -} diff --git a/styles/global.scss b/styles/global.scss deleted file mode 100644 index b539e2d..0000000 --- a/styles/global.scss +++ /dev/null @@ -1,13 +0,0 @@ -@use "bulma/sass/utilities" with ( - $family-sans-serif: "system-ui, sans-serif", - $family-monospace: "ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace", -); - -@forward "bulma/sass/base"; -@forward "bulma/sass/components/navbar"; -@forward "bulma/sass/elements/title"; -@forward "bulma/sass/elements/content"; -@forward "bulma/sass/layout/hero"; -@forward "bulma/sass/layout/container"; - -@forward "bulma/sass/themes";