pico/scss/_variables.scss
2020-09-29 08:38:35 +07:00

68 lines
1.7 KiB
SCSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

// Config
//
// Enable <header>, <main>, <footer> inside <body> as a container
$enable-semantic-container: false !default;
// Enable .container and .container-fluid
$enable-class-container: true !default;
// Enable a centered viewport
// Fluid layout if disabled
$enable-viewport: true !default;
// Enable responsive spacings for <header>, <main>, <footer>, <section>, <article>
// Fixed spacings if disabled
$enable-responsive-spacings: true !default;
// Enable responsive typography
// Fixed base font if disabled
$enable-responsive-typography: true !default;
// Enable .classes
// .classless version if disabled
$enable-classes: true !default;
// Enable validation states for <input>
$enable-input-states: true !default;
// Enable transitions for <a>, <button>, <input>
$enable-transitions: true !default;
// Enable overriding with !important (used for <article>, `reduce-motion`, [type="search"])
$enable-important: true !default;
// Responsive
//
// xs: Extra small (portrait phones)
// sm: Small(landscape phones)
// md: Medium(tablets)
// lg: Large(desktops)
// xl: Extra large (large desktops)
// NOTE:
// To provide an easy and fine styling on each breakpoint
// we didn't use @each, @mixin or @include.
// That means you need to edit each CSS selector file to add a breakpoint
// Breakpoints
// 'null' disable the breakpoint
$breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
) !default;
// Viewports
$viewports: (
// 'null' disable the viewport on a breakpoint
sm: 510px,
md: 700px,
lg: 920px,
xl: 1130px
) !default;