3-variables edit
wm-widths-and-heights edit
/* scss/3-variables/_wm-widths-and-heights.scss */
// ==============================================
// VARIABLES FOR WIDTHS AND HEIGHTS
// content widths
// page nav sizes
// top bar sizes
// banner sizes
// sidebar width
// ==============================================
// ----------------------------------------------
// CONTENT WIDTHS
$max-content-width: 1172px;
$max-content-width-ultrawide: 1288px;
// ----------------------------------------------
// PAGE NAV SIZES
$page-nav-width: 280px; // updated from 258px when removing "paper" background Jan '23
// ----------------------------------------------
// TOP BAR SIZES
$topbar-height-mobile: 66px;
$topbar-height: 84px;
$topbar-border-height-mobile: 10px;
$topbar-border-height: 13px;
$info-button-top-mobile: 63px;
$info-button-top: 80px;
$info-button-height: 35px;
// used in -info-for-menu.scss
$open-menu-info-button-top-mobile: calc(#{$info-button-top-mobile} + #{$topbar-border-height-mobile} + 7px);
$open-menu-info-button-top: calc(#{$info-button-top} + #{$topbar-border-height});
// ----------------------------------------------
// BANNER SIZES
$shortbanner-height-mobile: 20vh;
$shortbanner-height: 261px;
$mediumbanner-height-mobile: 20vh;
$mediumbanner-height: 481px;
// this will need to be reset to 90vh when broadcast bar is taken down
$tallbanner-height-mobile: 75;
$tallbanner-height: 85;
// ----------------------------------------------
// SIDEBAR WIDTHS ON WIDE DESKTOPS
// width of content inside sidebar
$sidebar-width: 240px;
// actual width of sidebar column, includes padding for left border line
$sidebar-column-width: 264px;
// ROW SIZES
// this is used to create css variables for the row sizes
// and to create a sass function to pull the values from the map
$sizesMap: (
row: (
width-max: 1288px,
padding-top: calc(kspaces(lg) * 2),
padding-bottom: calc(kspaces(lg) * 2),
padding-side-mobile: kspaces(sm),
padding-side-default: kspaces(lg),
text-width-max: 808px,
title-margin-bottom: 43px
)
);
// write size map to css variables using a SASS loop
:root {
@each $size_parent, $size_child in $sizesMap {
@each $size_name, $size in $size_child {
--size-#{$size-parent}-#{$size-name}: #{$size};
}
}
// these are used by themes
--wm-row-side-padding-external: var(--size-row-padding-side-mobile);
@include breakpoint($mobile-to-wide-mobile-breakpoint) {
--wm-row-side-padding-external: var(--size-row-padding-side-default);
}
}
// getSize function
// returns the size value from the $sizesMap or css variable created from the $sizesMap text
// @param $size-name: the name of the size in the map to return
// @param $size-variant: the name of the size within the size-name section to return
// @param $returnCSSVar: if true, return the css variable instead of the value
// @param $theme-map: the map to pull the size from
// @return the size value from the map or css variable
@function getSize($size-name, $size-variant: null, $returnCSSVar: false, $theme-map: $sizesMap) {
// if we need to return the size value
@if ($returnCSSVar != true) {
// if size variant is specified
@if ($size-variant != null) {
@if (map-get(map-get($theme-map, $size-name), $size-variant) == null) {
@error "#{$size-name}, #{$size-variant} not found in #{$theme-map} map.";
} @else {
// map inception, need two deep
@return map-get(map-get($theme-map, $size-name), $size-variant);
}
} @else {
// single-level size, one deep
@return map-get($theme-map, $size-name);
}
} @else {
// return the css variable
@return var(--size-#{$size-name}-#{$size-variant});
}
}
/* scss/3-variables/_wm-widths-and-heights.scss */
// ==============================================
// VARIABLES FOR WIDTHS AND HEIGHTS
// content widths
// page nav sizes
// top bar sizes
// banner sizes
// sidebar width
// ==============================================
// ----------------------------------------------
// CONTENT WIDTHS
$max-content-width: 1172px;
$max-content-width-ultrawide: 1288px;
// ----------------------------------------------
// PAGE NAV SIZES
$page-nav-width: 280px; // updated from 258px when removing "paper" background Jan '23
// ----------------------------------------------
// TOP BAR SIZES
$topbar-height-mobile: 66px;
$topbar-height: 84px;
$topbar-border-height-mobile: 10px;
$topbar-border-height: 13px;
$info-button-top-mobile: 63px;
$info-button-top: 80px;
$info-button-height: 35px;
// used in -info-for-menu.scss
$open-menu-info-button-top-mobile: calc(#{$info-button-top-mobile} + #{$topbar-border-height-mobile} + 7px);
$open-menu-info-button-top: calc(#{$info-button-top} + #{$topbar-border-height});
// ----------------------------------------------
// BANNER SIZES
$shortbanner-height-mobile: 20vh;
$shortbanner-height: 261px;
$mediumbanner-height-mobile: 20vh;
$mediumbanner-height: 481px;
// this will need to be reset to 90vh when broadcast bar is taken down
$tallbanner-height-mobile: 75;
$tallbanner-height: 85;
// ----------------------------------------------
// SIDEBAR WIDTHS ON WIDE DESKTOPS
// width of content inside sidebar
$sidebar-width: 240px;
// actual width of sidebar column, includes padding for left border line
$sidebar-column-width: 264px;
// ROW SIZES
// this is used to create css variables for the row sizes
// and to create a sass function to pull the values from the map
$sizesMap: (
row: (
width-max: 1288px,
padding-top: calc(kspaces(lg) * 2),
padding-bottom: calc(kspaces(lg) * 2),
padding-side-mobile: kspaces(sm),
padding-side-default: kspaces(lg),
text-width-max: 808px,
title-margin-bottom: 43px
)
);
// write size map to css variables using a SASS loop
:root {
@each $size_parent, $size_child in $sizesMap {
@each $size_name, $size in $size_child {
--size-#{$size-parent}-#{$size-name}: #{$size};
}
}
// these are used by themes
--wm-row-side-padding-external: var(--size-row-padding-side-mobile);
@include breakpoint($mobile-to-wide-mobile-breakpoint) {
--wm-row-side-padding-external: var(--size-row-padding-side-default);
}
}
// getSize function
// returns the size value from the $sizesMap or css variable created from the $sizesMap text
// @param $size-name: the name of the size in the map to return
// @param $size-variant: the name of the size within the size-name section to return
// @param $returnCSSVar: if true, return the css variable instead of the value
// @param $theme-map: the map to pull the size from
// @return the size value from the map or css variable
@function getSize($size-name, $size-variant: null, $returnCSSVar: false, $theme-map: $sizesMap) {
// if we need to return the size value
@if ($returnCSSVar != true) {
// if size variant is specified
@if ($size-variant != null) {
@if (map-get(map-get($theme-map, $size-name), $size-variant) == null) {
@error "#{$size-name}, #{$size-variant} not found in #{$theme-map} map.";
} @else {
// map inception, need two deep
@return map-get(map-get($theme-map, $size-name), $size-variant);
}
} @else {
// single-level size, one deep
@return map-get($theme-map, $size-name);
}
} @else {
// return the css variable
@return var(--size-#{$size-name}-#{$size-variant});
}
}