Components that live in the bootstrap grid should be placed inside a container that lives at the sds-contentSection__inner level of the content section element. The container will set the horizontal padding inside the content section.
The following classes can be added as modifiers to the content section:
The following classes can be used to alter the content section's textual background. This is limited to elements that are direct children of it
<section class="sds-section -sectionSunken -sectionInverted">
<div class="sds-section__innerWrapper">
<div class="sds-section__inner">
<p class="sds-section__textColor">Example text that changes color depending on content section type.</p>
</div>
</div>
</section>
<section class="{{ namespace }}section{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<div class="{{ namespace }}section__innerWrapper">
<div class="{{ namespace }}section__inner">
<p class="{{ namespace }}section__textColor">Example text that changes color depending on content section type.</p>
</div>
</div>
</section>
/* variables specific to current element */
$element-specific-variables: "";
.#{$namespace}contentSection {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
/* Pseudo Elements */
&::before {
}
&::after {
}
/*
Include elements that are linked to the current element but have to reside at the root level of the stylesheet
(e.g: keyframes)
*/
@at-root {
}
/* children - write selector in full in comments in order to facilitate search */
// contentSection__innerWrapper
&__innerWrapper {
@include containerPaddingInline();
padding-left: 0;
padding-right: 0;
}
// contentSection__inner
&__inner {
// follows same logic as parent
@include contentSectionPaddingBlock();
@include contentSectionDimensions();
@include custom-prop-fallback("background-color", "comp-section-background-color")
}
/* modifiers */
// contentSection -sectionSunken
&.-elevated {
@include contentSectionPaddingBlock();
#{$self}__innerWrapper {
@include containerPaddingInline();
}
// follows same logic as base element
#{$self}__inner {
border-radius: map-deep-get($token-radius-map, "24");
@include styles-without-custom-props() {
background-color: map-deep-get($design-tokens, "sys-color-elevation-surface-sunken");
}
}
&.-noInsetBlockStart,
&.-sectionNoInsetBlockStart {
padding-top: 0;
}
&.-noInsetBlock,
&.-sectionNoInsetBlock {
padding-top: 0;
padding-bottom: 0;
}
}
// contentSection -sectionInverted
&.-elevatedInverted {
// follows same logic as base element
#{$self}__inner {
@include styles-without-custom-props() {
background-color: map-deep-get($design-tokens, "sys-color-background-primary-140");
}
}
#{$self}__textColor {
@include styles-without-custom-props() {
color: map-deep-get($design-tokens, "sys-color-text-primary-inverse");
}
@include custom-prop-fallback("color","comp-heading-text-color");
> * {
color: inherit;
}
}
}
&.-overflowHidden {
#{$self}__innerWrapper {
overflow: hidden;
}
}
&.-leaseOfferWrapper {
#{$self}__inner {
@include contentSectionPaddingBlock("lg");
}
}
&:not(.-elevated) {
&.-noInsetBlockStart {
#{$self}__inner {
padding-top: 0;
}
}
&.-noInsetBlock {
#{$self}__inner {
padding-top: 0;
padding-bottom: 0;
}
}
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* This is an edge case where all nested content sections should be stripped of their padding AND background colors */
& & {
padding: 0 !important;
#{$self}__innerWrapper {
padding: 0 !important;
}
#{$self}__inner {
padding: 0 !important;
background-color: transparent !important;
}
}
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}
/* variables specific to current element */
$element-specific-variables: "";
.#{$namespace}section {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
/* Pseudo Elements */
&::before {
}
&::after {
}
/*
Include elements that are linked to the current element but have to reside at the root level of the stylesheet
(e.g: keyframes)
*/
@at-root {
}
/* children - write selector in full in comments in order to facilitate search */
// section__innerWrapper
&__innerWrapper {
@include containerPaddingInline();
padding-left: 0;
padding-right: 0;
}
// section__inner
&__inner {
// follows same logic as parent
@include contentSectionPaddingBlock();
@include contentSectionDimensions();
@include custom-prop-fallback("background-color", "comp-section-background-color")
}
/* modifiers */
// section -sectionSunken
&.-sectionSunken {
@include contentSectionPaddingBlock();
#{$self}__innerWrapper {
@include containerPaddingInline();
}
// follows same logic as base element
#{$self}__inner {
border-radius: map-deep-get($token-radius-map, "24");
@include styles-without-custom-props() {
background-color: map-deep-get($design-tokens, "sys-color-elevation-surface-sunken");
}
}
&.-sectionNoInsetBlockStart {
padding-top: 0;
}
&.-sectionNoInsetBlock {
padding-top: 0;
padding-bottom: 0;
}
}
// section -sectionInverted
&.-sectionInverted {
// follows same logic as base element
#{$self}__inner {
@include styles-without-custom-props() {
background-color: map-deep-get($design-tokens, "sys-color-background-primary-140");
}
}
#{$self}__textColor {
@include styles-without-custom-props() {
color: map-deep-get($design-tokens, "sys-color-text-primary-inverse");
}
@include custom-prop-fallback("color","comp-heading-text-color");
> * {
color: inherit;
}
}
}
&.-sectionOverflowHidden {
#{$self}__innerWrapper {
overflow: hidden;
}
}
&.-sectionLeaseOfferWrapper {
#{$self}__inner {
@include contentSectionPaddingBlock("lg");
}
}
&:not(.-sectionSunken) {
&.-sectionNoInsetBlockStart {
#{$self}__inner {
padding-top: 0;
}
}
&.-sectionNoInsetBlock {
#{$self}__inner {
padding-top: 0;
padding-bottom: 0;
}
}
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* This is an edge case where all nested content sections should be stripped of their padding AND background colors */
& & {
padding: 0 !important;
#{$self}__innerWrapper {
padding: 0 !important;
}
#{$self}__inner {
padding: 0 !important;
background-color: transparent !important;
}
}
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}