_modifiers.scss
TLDR
This file contains a list of SASS variables and CSS classes for applying padding, margin, height, display, position, visibility, and background styles to HTML elements.
Classes
d-block
This class sets the display property of an element to block
, making it take up the full width of its parent container.
w-full
This class sets the width property of an element to 100%
, making it take up the full width of its parent container.
a11y--focused
This class adds a border-radius and box-shadow to simulate a focused state for accessibility purposes.
pos-relative
This class sets the position property of an element to relative
, making it positioned relative to its normal position.
hidden-label
This class is used to visually hide a label by positioning it absolutely and setting its width and height to 1px, along with other styles to hide it from view.
overflow--visible
This class sets the overflow property of an element to visible
, allowing content to overflow outside the boundaries of the element.
bg--white
This class sets the background property of an element to a variable named --center-channel-bg
, which is used to define a white background color.
Methods
@charset 'UTF-8';
$positions: 't b l r';
$positions: 't'top,
'b'bottom,
'l'left,
'r'right;
@for $i from 0 through 20 {
@each $label,
$position in $positions {
.p#{$label}-#{$i} {
padding-#{$position}: #{$i*4}px !important;
}
}
@each $label,
$position in $positions {
.m#{$label}-#{$i} {
margin-#{$position}: #{$i*4}px !important;
}
}
.m-#{$i} {
margin: #{$i*4}px !important;
}
.p-#{$i} {
padding: #{$i*4}px !important;
}
.px-#{$i} {
padding: 0 #{$i*4}px 0 #{$i*4}px !important;
}
.py-#{$i} {
padding: #{$i*4}px 0 #{$i*4}px 0 !important;
}
.h-#{$i} {
height: #{$i*4}px !important;
}
}
.d-block {
display: block;
}
.w-full {
width: 100%;
}
.a11y--focused {
border-radius: 4px;
box-shadow: 0 0 1px 3px rgba(var(--link-color-rgb), 0.5), 0 0 0 1px var(--link-color);
}
.pos-relative {
position: relative;
}
.hidden-label {
position: absolute;
overflow: hidden;
width: 1px;
height: 1px;
padding: 0;
border: 0;
margin: -1px;
}
.overflow--visible {
overflow: visible;
}
.bg--white {
background: var(--center-channel-bg);
}