3-variables edit

wm-spacing  edit 

/* scss/3-variables/_wm-spacing.scss */

// ----------------------------------------------
// TEXT CONTENT SPACING

// spacing variables are at the bottom of this file

// ==============================================
// KARL'S SPACING MAP FOR CONTENT STRUCTURE
// use kspace() function to pull spaces from map
// usage: margin: kspace(sm);
// ==============================================
$kspaces: (
	2xs: 8px,
	xs: 15px,
	sm: 22px,
	md: 30px,
	lg: 44px,
	xl: 60px,
	2xl: 100px
);

$sm-content-margin: 0.5rem;
$md-content-margin: 1.2rem;

$alert-margin-bottom: 1.066rem;
$title-margin-bottom: 1.25rem;
$aside-margin-bottom: 1.5625rem;
$page-nav-margin-bottom: 1.68rem;
$page-nav-element-spacing: toRem(25);
$text-heading-top-margin: 2rem;
$float-side-margin: 2rem;
$list-left-margin: 2.5rem;
$info-for-nav-margin-bottom: 3.198rem;

$maincontent-bottom-spacing: kspaces(xl);

// This does not get used
// // ==============================================
// // ROW HEIGHT MAP
// // uses height function to pull heights from map
// // usage: height(md);
// // ==============================================
// $heights: (
// 	sm: 25vh,
// 	md: 40vh,
// 	lg: 65vh,
// 	xl: 80vh,
// 	full: 100vh,
// );

 
/* scss/3-variables/_wm-spacing.scss */

// ----------------------------------------------
// TEXT CONTENT SPACING

// spacing variables are at the bottom of this file

// ==============================================
// KARL'S SPACING MAP FOR CONTENT STRUCTURE
// use kspace() function to pull spaces from map
// usage: margin: kspace(sm);
// ==============================================
$kspaces: (
	2xs: 8px,
	xs: 15px,
	sm: 22px,
	md: 30px,
	lg: 44px,
	xl: 60px,
	2xl: 100px
);

$sm-content-margin: 0.5rem;
$md-content-margin: 1.2rem;

$alert-margin-bottom: 1.066rem;
$title-margin-bottom: 1.25rem;
$aside-margin-bottom: 1.5625rem;
$page-nav-margin-bottom: 1.68rem;
$page-nav-element-spacing: toRem(25);
$text-heading-top-margin: 2rem;
$float-side-margin: 2rem;
$list-left-margin: 2.5rem;
$info-for-nav-margin-bottom: 3.198rem;

$maincontent-bottom-spacing: kspaces(xl);

// This does not get used
// // ==============================================
// // ROW HEIGHT MAP
// // uses height function to pull heights from map
// // usage: height(md);
// // ==============================================
// $heights: (
// 	sm: 25vh,
// 	md: 40vh,
// 	lg: 65vh,
// 	xl: 80vh,
// 	full: 100vh,
// );
Copy
Edit
<!-- components/3-variables/wm-spacing.php --> <pre><code class="language-css"><?php echo outputFile('../scss/3-variables/_wm-spacing.scss'); ?> </code></pre> <pre><code class="printableVars"><?php echo outputFile('../scss/3-variables/_wm-spacing.scss'); ?> </code></pre>
Cancel
Copy
Copy
Edit
/* scss/3-variables/_wm-spacing.scss */ // ---------------------------------------------- // TEXT CONTENT SPACING // spacing variables are at the bottom of this file // ============================================== // KARL'S SPACING MAP FOR CONTENT STRUCTURE // use kspace() function to pull spaces from map // usage: margin: kspace(sm); // ============================================== $kspaces: ( 2xs: 8px, xs: 15px, sm: 22px, md: 30px, lg: 44px, xl: 60px, 2xl: 100px ); $sm-content-margin: 0.5rem; $md-content-margin: 1.2rem; $alert-margin-bottom: 1.066rem; $title-margin-bottom: 1.25rem; $aside-margin-bottom: 1.5625rem; $page-nav-margin-bottom: 1.68rem; $page-nav-element-spacing: toRem(25); $text-heading-top-margin: 2rem; $float-side-margin: 2rem; $list-left-margin: 2.5rem; $info-for-nav-margin-bottom: 3.198rem; $maincontent-bottom-spacing: kspaces(xl); // This does not get used // // ============================================== // // ROW HEIGHT MAP // // uses height function to pull heights from map // // usage: height(md); // // ============================================== // $heights: ( // sm: 25vh, // md: 40vh, // lg: 65vh, // xl: 80vh, // full: 100vh, // );
Cancel