mirror of
https://github.com/picocss/pico.git
synced 2025-02-24 00:39:20 -05:00
77 lines
1.8 KiB
SCSS
77 lines
1.8 KiB
SCSS
@use "sass:map";
|
||
|
||
// Config
|
||
// ––––––––––––––––––––
|
||
|
||
// Prefix for CSS variables
|
||
$css-var-prefix: "pico-" !default;
|
||
|
||
// Set the root element for $enable-semantic-container and $enable-responsive-spacings
|
||
$semantic-root-element: "body" !default;
|
||
|
||
// Enable <header>, <main>, <footer> inside $semantic-root-element as containers
|
||
$enable-semantic-container: false !default;
|
||
|
||
// Enable .container and .container-fluid
|
||
$enable-class-container: true !default;
|
||
|
||
// Enable a centered viewport for <header>, <main>, <footer> inside $enable-semantic-container
|
||
// 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 root element size (rem) if disabled
|
||
$enable-responsive-typography: true !default;
|
||
|
||
// Enable .classes
|
||
// .classless version if disabled
|
||
$enable-classes: true !default;
|
||
|
||
// Enable .grid class
|
||
$enable-grid: true !default;
|
||
|
||
// Enable transitions
|
||
$enable-transitions: true !default;
|
||
|
||
// Enable overriding with !important
|
||
$enable-important: true !default;
|
||
|
||
// Breakpoints, viewports and root font size
|
||
$breakpoints: () !default;
|
||
$breakpoints: map.deep-merge(
|
||
(
|
||
// Small (landscape phones)
|
||
sm: (
|
||
breakpoint: 576px,
|
||
viewport: 510px,
|
||
root-font-size: 17px,
|
||
),
|
||
// Medium (tablets)
|
||
md: (
|
||
breakpoint: 768px,
|
||
viewport: 700px,
|
||
root-font-size: 18px,
|
||
),
|
||
// Large (desktops)
|
||
lg: (
|
||
breakpoint: 992px,
|
||
viewport: 920px,
|
||
root-font-size: 19px,
|
||
),
|
||
// Extra large (large desktops)
|
||
xl: (
|
||
breakpoint: 1200px,
|
||
viewport: 1130px,
|
||
root-font-size: 20px,
|
||
),
|
||
),
|
||
$breakpoints
|
||
);
|
||
|
||
// // Shortcut for CSS vars prefix
|
||
$✨: --#{$css-var-prefix};
|