Search documentation v0.6.1

CSS Configurations

How to customize the way CSS works

Source ↗️ Report Issue ↗️

To reduce your CSS bundle size and help you ship your own styles along with the necessary styles for the components, style includes can be configured in the configuration object of the setup mixin. It accepts the following options:

How to configure your CSS
@import 'webcoreui/styles';
@include setup((
// Define paths for your fonts
fontRegular: '/fonts/Inter-Regular.woff2',
fontBold: '/fonts/Inter-Bold.woff2'
// Optionally, define which styles you'd like to include
includeResets: true,
includeUtilities: true,
includeTooltip: true,
includeScrollbarStyles: true
));
PropertyDefault valuePurpose
includeResets true Include reset styles for native HTML elements, such as code, pre, or ul. Set to false if you want to use your own CSS resets.
includeUtilities true Adds utility classes for CSS. Read more about the available utility classes here.
includeTooltip true Adds global styles for tooltips.
includeScrollbarStyles true Adds global styles for scrollbars.

webcore.config.scss

While the setup mixin can be used once to define generic styles that will be bundled in your CSS, the webcore.config.scss file can be used to define individual component styles. To configure how Webcore component are displayed, you can define the following maps in your webcore.config.scss file:

// Override breakpoints
$breakpoints: (
'xs': 600px,
'sm': 800px,
'md': 1024px,
'lg': 1200px
);
// Override paddings, margins, and gaps
$spacing: (
'none': 0,
'xxs': 2px,
'xs': 5px,
'sm': 10px,
'md': 15px,
'default': 20px,
'lg': 25px,
'xl': 30px,
'2xl': 35px,
'3xl': 40px,
'4xl': 45px,
'5xl': 50px
);
// Override font sizes
$fontSizes: (
'xs': 12px,
'sm': 14px,
'md': 16px,
'default': 18px,
'lg': 21px,
'xl': 24px,
'2xl': 28px,
'3xl': 32px
);
// Override line heights
$lineHeights: (
'normal': normal,
'hmd': 1.5,
'hlg': 1.7
);
// Override z-index values
$layers: (
'bg': -1,
'default': 0,
'fg': 1,
'overlay': 2,
'popup': 3,
'top': 98,
'header': 99,
'modal': 100
);
// Disable animations
$disableAnimations: false

You can also override border-radius values using the following CSS variables:

body {
--w-sm-radius: 2px;
--w-md-radius: 5px;
--w-lg-radius: 10px;
--w-xl-radius: 15px;
}
If you leave your webcore.config.scss file empty, the above rules will be applied as default.

Overriding Component Styles

Default component styles can also be changed by overriding the following CSS variables:

How to override component styles
html body {
// Avatar component
--w-avatar-border: var(--w-color-primary-70);
// Checkbox component
--w-checkbox-color: var(--w-color-primary);
// Collapsible component
--w-collapsible-initial-height: 0;
--w-collapsible-max-height: 100%;
// Masonry component
--w-masonry-gap: 5px;
// Progress component
--w-progress-color: var(--w-color-primary);
--w-progress-background: var(--w-color-primary-50);
--w-progress-stripe-light: var(--w-color-primary);
--w-progress-stripe-dark: var(--w-color-primary-10);
// Radio component
--w-radio-color: var(--w-color-primary);
// Rating component
--w-rating-color: var(--w-color-primary);
--w-rating-empty-color: var(--w-color-primary);
--w-rating-empty-background: var(--w-color-primary-70);
--w-rating-size: 18px;
// Scrollbars
--w-scrollbar-bg: var(--w-color-primary-60);
--w-scrollbar-fg: var(--w-color-primary-50);
// Slider component
--w-slider-background: var(--w-color-primary-50);
--w-slider-color: var(--w-color-primary);
--w-slider-thumb: var(--w-color-primary-50);
// Spinner component
--w-spinner-color: var(--w-color-primary);
--w-spinner-width: 2px;
--w-spinner-speed: 2s;
--w-spinner-size: 30px;
--w-spinner-dash: 8;
// Switch component
--w-switch-off-color: var(--w-color-primary-50);
--w-switch-on-color: var(--w-color-primary);
// ThemeSwitcher component
--w-theme-switcher-size: 20px;
// Timeline component
--w-timeline-color: var(--w-color-primary-50);
--w-timeline-text-color: var(--w-color-primary);
--w-timeline-counter: decimal;
// Tooltips
--w-tooltip-background: var(--w-color-primary);
--w-tooltip-color: var(--w-color-primary-70);
}

Request improvement for this page