// Import Bulma's core @import "~bulma/sass/utilities/_all"; // Set your colors $primary: #687cec; $primary-light: findLightColor($primary); $primary-dark: findDarkColor($primary); $primary-invert: findColorInvert($primary); $background: #fafdff; $background-invert: findColorInvert($background); // Lists and maps $custom-colors: null !default; $custom-shades: null !default; // Setup $colors to use as bulma classes (e.g. 'is-twitter') $colors: mergeColorMaps( ( "white": ( $white, $black, ), "black": ( $black, $white, ), "light": ( $light, $light-invert, ), "dark": ( $dark, $dark-invert, ), "primary": ( $primary, $primary-invert, $primary-light, $primary-dark, ), "link": ( $link, $link-invert, $link-light, $link-dark, ), "info": ( $info, $info-invert, $info-light, $info-dark, ), "success": ( $success, $success-invert, $success-light, $success-dark, ), "warning": ( $warning, $warning-invert, $warning-light, $warning-dark, ), "danger": ( $danger, $danger-invert, $danger-light, $danger-dark, ), ), $custom-colors ); // Links $link: $primary; $link-invert: $primary-invert; $link-focus-border: $primary; // Import Bulma and Buefy styles @import "~bulma"; @import "~buefy/src/scss/buefy"; .bnumber { align-items: center; background-color: whitesmoke; border-radius: 9999px; display: inline-flex; font-size: 1.25rem; height: 2em; justify-content: center; margin-right: 1.5rem; min-width: 2.5em; padding: 0.25rem 0.5rem; text-align: center; vertical-align: top; } .number { display: inherit; background-color: none; border: none; min-width: none; padding: 0; margin: 0; font-size: inherit; background: none; width: min-content; } html { background-color: $background; min-height: 100vh; } body { max-width: 100vw; overflow: hidden; }