SCSS Helpers Collection
Install
npm install @wide/styles-helpers --save
Note
Please, note that more you add helper mixins, more your CSS compiled file will be heavy.
So add helpers you really need.
Usage
- a11y
- alignment
- clearfix
- container
- crop
- display
- embed
- flexbox
- float
- font
- overflow
- position
- stretched-link
- text
- visibility
a11y
Mixins
a11y-aria()
ARIA roles display visual cursor hints.
@use '@wide/styles-helpers' as helpers;
@include helpers.a11y-aria;
Output
[aria-busy=true] {
cursor: progress;
}
[aria-controls] {
cursor: pointer;
}
[aria-disabled] {
cursor: default;
}
a11y-sr()
Screen readers.
@use '@wide/styles-helpers' as helpers;
{
@include helpers.a11y-sr();
}
Output
.a11y-sr-only {
border: 0 !important;
clip: rect(0 0 0 0) !important;
height: 1px !important;
margin: 0 !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
white-space: nowrap !important;
width: 1px !important;
}
.a11y-sr-focus:not(:focus) {
border: 0 !important;
clip: rect(0 0 0 0) !important;
height: 1px !important;
margin: 0 !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
white-space: nowrap !important;
width: 1px !important;
}
a11y()
Combine both a11y-aria
and a11y-sr
helpers in one helper.
@use '@wide/styles-helpers' as helpers;
{
@include helpers.a11y();
}
Output
[aria-busy=true] {
cursor: progress;
}
[aria-controls] {
cursor: pointer;
}
[aria-disabled] {
cursor: default;
}
.a11y-sr-only {
border: 0 !important;
clip: rect(0 0 0 0) !important;
height: 1px !important;
margin: 0 !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
white-space: nowrap !important;
width: 1px !important;
}
.a11y-sr-focus:not(:focus) {
border: 0 !important;
clip: rect(0 0 0 0) !important;
height: 1px !important;
margin: 0 !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
white-space: nowrap !important;
width: 1px !important;
}
alignment
Variables
All those variables could be customized depending on what you need in your variables.scss
file.
Here are the default values.
$aligns
Define all alignment values to support.
$aligns: (
baseline,
bottom,
middle,
top,
text-top,
text-bottom
) !default;
$aligns-important
Set the important property on each rules.
$aligns-important: true;
Mixins
alignment-helper()
Set all alignments classes from the $aligns
variable.
@use '@wide/styles-helpers' as helpers;
@include helpers.alignment-helper;
Output
.align-baseline {
vertical-align: baseline !important;
}
.align-bottom {
vertical-align: bottom !important;
}
.align-middle {
vertical-align: middle !important;
}
.align-top {
vertical-align: top !important;
}
.align-text-top {
vertical-align: text-top !important;
}
.align-text-bottom {
vertical-align: text-bottom !important;
}
.align-vcenter {
font-size: 0;
}
.align-vcenter::before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.align-vcenter > * {
display: inline-block;
font-size: 1rem;
vertical-align: middle;
}
alignment-helper-with-bp()
Set all alignments classes from the $aligns
variable with breakpoints media queries.
@use '@wide/styles-helpers' as helpers;
@include helpers.alignment-helper-with-bp;
Output
@media (min-width: 20.375em) and (max-width: 35.99875em) {
.align-baseline\@xs-only {
vertical-align: baseline !important;
}
.align-bottom\@xs-only {
vertical-align: bottom !important;
}
.align-middle\@xs-only {
vertical-align: middle !important;
}
.align-top\@xs-only {
vertical-align: top !important;
}
.align-text-top\@xs-only {
vertical-align: text-top !important;
}
.align-text-bottom\@xs-only {
vertical-align: text-bottom !important;
}
.align-vcenter\@xs-only {
font-size: 0;
}
.align-vcenter\@xs-only::before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.align-vcenter\@xs-only > * {
display: inline-block;
font-size: 1rem;
vertical-align: middle;
}
}
@media (min-width: 36em) {
/*
* .align-baseline\@sm
* .align-bottom\@sm
* .align-middle\@sm
* .align-top\@sm
* .align-text-top\@sm
* .align-text-bottom\@sm
* .align-vcenter\@sm
* .align-vcenter\@sm::before
* .align-vcenter\@sm > *
*/
}
@media (min-width: 36em) and (max-width: 47.99875em) {
/*
* .align-baseline\@sm-only
* .align-bottom\@sm-only
* .align-middle\@sm-only
* .align-top\@sm-only
* .align-text-top\@sm-only
* .align-text-bottom\@sm-only
* .align-vcenter\@sm-only
* .align-vcenter\@sm-only::before
* .align-vcenter\@sm-only > *
*/
}
@media (min-width: 48em) {
/*
* .align-baseline\@md
* .align-bottom\@md
* .align-middle\@md
* .align-top\@md
* .align-text-top\@md
* .align-text-bottom\@md
* .align-vcenter\@md
* .align-vcenter\@md::before
* .align-vcenter\@md > *
*/
}
@media (min-width: 48em) and (max-width: 63.99875em) {
/*
* .align-baseline\@md-only
* .align-bottom\@md-only
* .align-middle\@md-only
* .align-top\@md-only
* .align-text-top\@md-only
* .align-text-bottom\@md-only
* .align-vcenter\@md-only
* .align-vcenter\@md-only::before
* .align-vcenter\@md-only > *
*/
}
@media (min-width: 64em) {
/*
* .align-baseline\@lg
* .align-bottom\@lg
* .align-middle\@lg
* .align-top\@lg
* .align-text-top\@lg
* .align-text-bottom\@lg
* .align-vcenter\@lg
* .align-vcenter\@lg::before
* .align-vcenter\@lg > *
*/
}
@media (min-width: 64em) and (max-width: 74.99875em) {
/*
* .align-baseline\@lg-only
* .align-bottom\@lg-only
* .align-middle\@lg-only
* .align-top\@lg-only
* .align-text-top\@lg-only
* .align-text-bottom\@lg-only
* .align-vcenter\@lg-only
* .align-vcenter\@lg-only::before
* .align-vcenter\@lg-only > *
*/
}
@media (min-width: 75em) {
/*
* .align-baseline\@xl
* .align-bottom\@xl
* .align-middle\@xl
* .align-top\@xl
* .align-text-top\@xl
* .align-text-bottom\@xl
* .align-vcenter\@xl
* .align-vcenter\@xl::before
* .align-vcenter\@xl > *
*/
}
@media (min-width: 75em) and (max-width: 99.99875em) {
/*
* .align-baseline\@xl-only
* .align-bottom\@xl-only
* .align-middle\@xl-only
* .align-top\@xl-only
* .align-text-top\@xl-only
* .align-text-bottom\@xl-only
* .align-vcenter\@xl-only
* .align-vcenter\@xl-only::before
* .align-vcenter\@xl-only > *
*/
}
@media (min-width: 100em) {
/*
* .align-baseline\@xxl
* .align-bottom\@xxl
* .align-middle\@xxl
* .align-top\@xxl
* .align-text-top\@xxl
* .align-text-bottom\@xxl
* .align-vcenter\@xxl
* .align-vcenter\@xxl::before
* .align-vcenter\@xxl > *
*/
}
@media (min-width: 100em) {
/*
* .align-baseline\@xxl-only
* .align-bottom\@xxl-only
* .align-middle\@xxl-only
* .align-top\@xxl-only
* .align-text-top\@xxl-only
* .align-text-bottom\@xxl-only
* .align-vcenter\@xxl-only
* .align-vcenter\@xxl-only::before
* .align-vcenter\@xxl-only > *
*/
}
alignment()
Helper alignment
entry point
Combine both alignment-helper
and alignment-helper-with-bp
helpers in one helper.
@use '@wide/styles-helpers' as helpers;
@include helpers.alignment;
// @include helpers.alignment(false);
Parameters
Type | Description | Mandatory | Default |
---|---|---|---|
Boolean |
Use alignment-helper-with-bp()
|
false |
true |
Output
See alignment-helper
and alignment-helper-with-bp
outputs.
clearfix
Mixins
clearfix()
Define a .clearfix
class.
@use '@wide/styles-helpers' as helpers;
@include helpers.clearfix;
Output
.clearfix::after {
clear: both;
content: "";
display: block;
}
crop
Mixins
crop-helper()
Provide a cropping container in order to display media (usually images) cropped to certain ratios.
@use '@wide/styles-helpers' as helpers;
@include helpers.crop-helper;
Output
.crop {
display: block;
position: relative;
overflow: hidden;
}
.crop.-r1\:1 {
padding-bottom: 100%;
}
.crop.-r2\:1 {
padding-bottom: 50%;
}
.crop.-r3\:2 {
padding-bottom: 66.6666666667%;
}
.crop.-r4\:3 {
padding-bottom: 75%;
}
.crop.-r5\:3 {
padding-bottom: 60%;
}
.crop.-r5\:4 {
padding-bottom: 80%;
}
.crop.-r6\:5 {
padding-bottom: 83.3333333333%;
}
.crop.-r7\:3 {
padding-bottom: 42.8571428571%;
}
.crop.-r11\:8 {
padding-bottom: 72.7272727273%;
}
.crop.-r16\:9 {
padding-bottom: 56.25%;
}
.crop.-r16\:10 {
padding-bottom: 62.5%;
}
.crop_content,
.crop > iframe,
.crop > embed,
.crop > object,
.crop > video,
.crop > picture,
.crop > img {
position: absolute;
top: 0;
left: 0;
max-width: none;
}
.crop_content.-right,
.crop > iframe.-right,
.crop > embed.-right,
.crop > object.-right,
.crop > video.-right,
.crop > picture.-right,
.crop > img.-right {
right: 0;
left: auto;
}
.crop_content.-bottom,
.crop > iframe.-bottom,
.crop > embed.-bottom,
.crop > object.-bottom,
.crop > video.-bottom,
.crop > picture.-bottom,
.crop > img.-bottom {
top: auto;
bottom: 0;
}
.crop_content.-center,
.crop > iframe.-center,
.crop > embed.-center,
.crop > object.-center,
.crop > video.-center,
.crop > picture.-center,
.crop > img.-center {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
crop-helper-with-bp()
Provide a cropping container in order to display media (usually images) cropped to certain ratios with breakpoints media queries.
@use '@wide/styles-helpers' as helpers;
@include helpers.crop-helper-with-bp;
Output
@media (min-width: 20.375em) and (max-width: 35.99875em) {
.crop.-r1\:1\@xs-only {
padding-bottom: 100%;
}
.crop.-r2\:1\@xs-only {
padding-bottom: 50%;
}
.crop.-r3\:2\@xs-only {
padding-bottom: 66.6666666667%;
}
.crop.-r4\:3\@xs-only {
padding-bottom: 75%;
}
.crop.-r5\:3\@xs-only {
padding-bottom: 60%;
}
.crop.-r5\:4\@xs-only {
padding-bottom: 80%;
}
.crop.-r6\:5\@xs-only {
padding-bottom: 83.3333333333%;
}
.crop.-r7\:3\@xs-only {
padding-bottom: 42.8571428571%;
}
.crop.-r11\:8\@xs-only {
padding-bottom: 72.7272727273%;
}
.crop.-r16\:9\@xs-only {
padding-bottom: 56.25%;
}
.crop.-r16\:10\@xs-only {
padding-bottom: 62.5%;
}
}
@media (min-width: 36em) {
/*
* .crop.-r1\:1\@sm
* .crop.-r2\:1\@sm
* .crop.-r3\:2\@sm
* .crop.-r4\:3\@sm
* .crop.-r5\:3\@sm
* .crop.-r5\:4\@sm
* .crop.-r6\:5\@sm
* .crop.-r7\:3\@sm
* .crop.-r11\:8\@sm
* .crop.-r16\:9\@sm
* .crop.-r16\:10\@sm
*/
}
@media (min-width: 36em) and (max-width: 47.99875em) {
/*
* .crop.-r1\:1\@sm-only
* .crop.-r2\:1\@sm-only
* .crop.-r3\:2\@sm-only
* .crop.-r4\:3\@sm-only
* .crop.-r5\:3\@sm-only
* .crop.-r5\:4\@sm-only
* .crop.-r6\:5\@sm-only
* .crop.-r7\:3\@sm-only
* .crop.-r11\:8\@sm-only
* .crop.-r16\:9\@sm-only
* .crop.-r16\:10\@sm-only
*/
}
@media (min-width: 48em) {
/*
* .crop.-r1\:1\@md
* .crop.-r2\:1\@md
* .crop.-r3\:2\@md
* .crop.-r4\:3\@md
* .crop.-r5\:3\@md
* .crop.-r5\:4\@md
* .crop.-r6\:5\@md
* .crop.-r7\:3\@md
* .crop.-r11\:8\@md
* .crop.-r16\:9\@md
* .crop.-r16\:10\@md
*/
}
@media (min-width: 48em) and (max-width: 63.99875em) {
/*
* .crop.-r1\:1\@md-only
* .crop.-r2\:1\@md-only
* .crop.-r3\:2\@md-only
* .crop.-r4\:3\@md-only
* .crop.-r5\:3\@md-only
* .crop.-r5\:4\@md-only
* .crop.-r6\:5\@md-only
* .crop.-r7\:3\@md-only
* .crop.-r11\:8\@md-only
* .crop.-r16\:9\@md-only
* .crop.-r16\:10\@md-only
*/
}
@media (min-width: 64em) {
/*
* .crop.-r1\:1\@lg
* .crop.-r2\:1\@lg
* .crop.-r3\:2\@lg
* .crop.-r4\:3\@lg
* .crop.-r5\:3\@lg
* .crop.-r5\:4\@lg
* .crop.-r6\:5\@lg
* .crop.-r7\:3\@lg
* .crop.-r11\:8\@lg
* .crop.-r16\:9\@lg
* .crop.-r16\:10\@lg
*/
}
@media (min-width: 64em) and (max-width: 74.99875em) {
/*
* .crop.-r1\:1\@lg-only
* .crop.-r2\:1\@lg-only
* .crop.-r3\:2\@lg-only
* .crop.-r4\:3\@lg-only
* .crop.-r5\:3\@lg-only
* .crop.-r5\:4\@lg-only
* .crop.-r6\:5\@lg-only
* .crop.-r7\:3\@lg-only
* .crop.-r11\:8\@lg-only
* .crop.-r16\:9\@lg-only
* .crop.-r16\:10\@lg-only
*/
}
@media (min-width: 75em) {
/*
* .crop.-r1\:1\@xl
* .crop.-r2\:1\@xl
* .crop.-r3\:2\@xl
* .crop.-r4\:3\@xl
* .crop.-r5\:3\@xl
* .crop.-r5\:4\@xl
* .crop.-r6\:5\@xl
* .crop.-r7\:3\@xl
* .crop.-r11\:8\@xl
* .crop.-r16\:9\@xl
* .crop.-r16\:10\@xl
*/
}
@media (min-width: 75em) and (max-width: 99.99875em) {
/*
* .crop.-r1\:1\@xl-only
* .crop.-r2\:1\@xl-only
* .crop.-r3\:2\@xl-only
* .crop.-r4\:3\@xl-only
* .crop.-r5\:3\@xl-only
* .crop.-r5\:4\@xl-only
* .crop.-r6\:5\@xl-only
* .crop.-r7\:3\@xl-only
* .crop.-r11\:8\@xl-only
* .crop.-r16\:9\@xl-only
* .crop.-r16\:10\@xl-only
*/
}
@media (min-width: 100em) {
/*
* .crop.-r1\:1\@xxl
* .crop.-r2\:1\@xxl
* .crop.-r3\:2\@xxl
* .crop.-r4\:3\@xxl
* .crop.-r5\:3\@xxl
* .crop.-r5\:4\@xxl
* .crop.-r6\:5\@xxl
* .crop.-r7\:3\@xxl
* .crop.-r11\:8\@xxl
* .crop.-r16\:9\@xxl
* .crop.-r16\:10\@xxl
*/
}
@media (min-width: 100em) {
/*
* .crop.-r1\:1\@xxl-only
* .crop.-r2\:1\@xxl-only
* .crop.-r3\:2\@xxl-only
* .crop.-r4\:3\@xxl-only
* .crop.-r5\:3\@xxl-only
* .crop.-r5\:4\@xxl-only
* .crop.-r6\:5\@xxl-only
* .crop.-r7\:3\@xxl-only
* .crop.-r11\:8\@xxl-only
* .crop.-r16\:9\@xxl-only
* .crop.-r16\:10\@xxl-only
*/
}
crop()
Helper crop
entry point.
Combine both crop-helper
and crop-helper-with-bp
helpers in one helper.
@use '@wide/styles-helpers' as helpers;
@include helpers.crop;
// @include helpers.crop(false);
Parameters
Type | Description | Mandatory | Default |
---|---|---|---|
Boolean |
Use crop-helper-with-bp()
|
false |
true |
Output
See crop-helper
and crop-helper-with-bp
outputs.
display
Variables
All those variables could be customized depending on what you need in your variables.scss
file.
Here are the default values.
$displays
Define all display values to support.
$displays: (
block,
flex,
inline,
inline-block,
inline-flex,
list-item,
none,
table,
table-cell,
table-row
) !default;
$displays-important
Set the important property on each rules.
$displays-important: true;
$displays-prefix
Define the prefix of all display classes.
$displays-prefix: 'd-';
Mixins
display-helper()
Set all display classes from the $displays
variable.
@use '@wide/styles-helpers' as helpers;
@include helpers.display-helper;
Output
.d-block {
display: block !important;
}
.d-flex {
display: flex !important;
}
.d-inline {
display: inline !important;
}
.d-inline-block {
display: inline-block !important;
}
.d-inline-flex {
display: inline-flex !important;
}
.d-list-item {
display: list-item !important;
}
.d-none {
display: none !important;
}
.d-table {
display: table !important;
}
.d-table-cell {
display: table-cell !important;
}
.d-table-row {
display: table-row !important;
}
display-helper-with-bp()
Set all display classes from the $displays
variable with breakpoints media queries.
@use '@wide/styles-helpers' as helpers;
@include helpers.display-helper-with-bp;
Output
@media (min-width: 20.375em) and (max-width: 35.99875em) {
.d-block\@xs-only {
display: block !important;
}
.d-flex\@xs-only {
display: flex !important;
}
.d-inline\@xs-only {
display: inline !important;
}
.d-inline-block\@xs-only {
display: inline-block !important;
}
.d-inline-flex\@xs-only {
display: inline-flex !important;
}
.d-list-item\@xs-only {
display: list-item !important;
}
.d-none\@xs-only {
display: none !important;
}
.d-table\@xs-only {
display: table !important;
}
.d-table-cell\@xs-only {
display: table-cell !important;
}
.d-table-row\@xs-only {
display: table-row !important;
}
}
/* and so on */
@media (min-width: 36em) {
/*
* .d-block\@sm
* .d-flex\@sm
* .d-inline\@sm
* .d-inline-block\@sm
* .d-inline-flex\@sm
* .d-list-item\@sm
* .d-none\@sm
* .d-table\@sm
* .d-table-cell\@sm
* .d-table-row\@sm
*/
}
@media (min-width: 36em) and (max-width: 47.99875em) {
/*
* .d-block\@sm-only
* .d-flex\@sm-only
* .d-inline\@sm-only
* .d-inline-block\@sm-only
* .d-inline-flex\@sm-only
* .d-list-item\@sm-only
* .d-none\@sm-only
* .d-table\@sm-only
* .d-table-cell\@sm-only
* .d-table-row\@sm-only
*/
}
@media (min-width: 48em) {
/*
* .d-block\@md
* .d-flex\@md
* .d-inline\@md
* .d-inline-block\@md
* .d-inline-flex\@md
* .d-list-item\@md
* .d-none\@md
* .d-table\@md
* .d-table-cell\@md
* .d-table-row\@md
*/
}
@media (min-width: 48em) and (max-width: 63.99875em) {
/*
* .d-block\@md-only
* .d-flex\@md-only
* .d-inline\@md-only
* .d-inline-block\@md-only
* .d-inline-flex\@md-only
* .d-list-item\@md-only
* .d-none\@md-only
* .d-table\@md-only
* .d-table-cell\@md-only
* .d-table-row\@md-only
*/
}
@media (min-width: 64em) {
/*
* .d-block\@lg
* .d-flex\@lg
* .d-inline\@lg
* .d-inline-block\@lg
* .d-inline-flex\@lg
* .d-list-item\@lg
* .d-none\@lg
* .d-table\@lg
* .d-table-cell\@lg
* .d-table-row\@lg
*/
}
@media (min-width: 64em) and (max-width: 74.99875em) {
/*
* .d-block\@lg-only
* .d-flex\@lg-only
* .d-inline\@lg-only
* .d-inline-block\@lg-only
* .d-inline-flex\@lg-only
* .d-list-item\@lg-only
* .d-none\@lg-only
* .d-table\@lg-only
* .d-table-cell\@lg-only
* .d-table-row\@lg-only
*/
}
@media (min-width: 75em) {
/*
* .d-block\@xl
* .d-flex\@xl
* .d-inline\@xl
* .d-inline-block\@xl
* .d-inline-flex\@xl
* .d-list-item\@xl
* .d-none\@xl
* .d-table\@xl
* .d-table-cell\@xl
* .d-table-row\@xl
*/
}
@media (min-width: 75em) and (max-width: 99.99875em) {
/*
* .d-block\@xl-only
* .d-flex\@xl-only
* .d-inline\@xl-only
* .d-inline-block\@xl-only
* .d-inline-flex\@xl-only
* .d-list-item\@xl-only
* .d-none\@xl-only
* .d-table\@xl-only
* .d-table-cell\@xl-only
* .d-table-row\@xl-only
*/
}
@media (min-width: 100em) {
/*
* .d-block\@xxl
* .d-flex\@xxl
* .d-inline\@xxl
* .d-inline-block\@xxl
* .d-inline-flex\@xxl
* .d-list-item\@xxl
* .d-none\@xxl
* .d-table@xxl
* .font-weight-bolder\@xxl
* .font-weight-bolder\@xxl
*/
}
@media (min-width: 100em) {
/*
* .d-block\@xxl-only
* .d-flex\@xxl-only
* .d-inline\@xxl-only
* .d-inline-block\@xxl-only
* .d-inline-flex\@xxl-only
* .d-list-item\@xxl-only
* .d-none\@xxl-only
* .d-table@xxl-only
* .font-weight-bolder\@xxl-only
* .font-weight-bolder\@xxl-only
*/
}
display-print-helper()
Set all display classes from the $displays
variable with print media query.
@use '@wide/styles-helpers' as helpers;
@include helpers.display-print-helper;
Output
@media print {
/*
* .d-block
* .d-flex
* .d-inline
* .d-inline-block
* .d-inline-flex
* .d-list-item
* .d-none
* .d-table
* .d-table-cell
* .d-table-row
*/
}
display-screen-helper()
Set all display classes from the $displays
variable with screen media query.
@use '@wide/styles-helpers' as helpers;
@include helpers.display-screen-helper;
Output
@media screen {
/*
* .d-block
* .d-flex
* .d-inline
* .d-inline-block
* .d-inline-flex
* .d-list-item
* .d-none
* .d-table
* .d-table-cell
* .d-table-row
*/
}
display()
Helper display
entry point.
Combine both display-helper
and display-helper-with-bp
helpers in one helper.
@use '@wide/styles-helpers' as helpers;
@include helpers.display;
// @include helpers.display(false);
Parameters
Type | Description | Mandatory | Default |
---|---|---|---|
Boolean |
Use display-helper-with-bp()
|
false |
true |
Output
See display-helper
and display-helper-with-bp
outputs.
embed
Mixins
embed-helper()
Create ratio-bound content blocks, to keep media (e.g. images, videos) in their correct aspect ratios.
@use '@wide/styles-helpers' as helpers;
@include helpers.embed-helper;
Output
.embed {
display: block;
position: relative;
overflow: hidden;
}
.embed.-r1\:1::before {
padding-bottom: 100%;
}
.embed.-r2\:1::before {
padding-bottom: 50%;
}
.embed.-r3\:2::before {
padding-bottom: 66.6666666667%;
}
.embed.-r4\:3::before {
padding-bottom: 75%;
}
.embed.-r5\:3::before {
padding-bottom: 60%;
}
.embed.-r5\:4::before {
padding-bottom: 80%;
}
.embed.-r6\:5::before {
padding-bottom: 83.3333333333%;
}
.embed.-r7\:3::before {
padding-bottom: 42.8571428571%;
}
.embed.-r11\:8::before {
padding-bottom: 72.7272727273%;
}
.embed.-r16\:9::before {
padding-bottom: 56.25%;
}
.embed.-r16\:10::before {
padding-bottom: 62.5%;
}
.embed::before {
content: "";
display: block;
width: 100%;
padding-bottom: 100%;
}
.embed_content,
.embed > iframe,
.embed > embed,
.embed > object,
.embed > video,
.embed > picture,
.embed > img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
embed-helper-with-bp()
Create ratio-bound content blocks, to keep media (e.g. images, videos) in their correct aspect ratios with breakpoints media queries.
@use '@wide/styles-helpers' as helpers;
@include helpers.embed-helper-with-bp;
Output
@media (min-width: 20.375em) and (max-width: 35.99875em) {
.embed.-r1\:1\@xs-only::before {
padding-bottom: 100%;
}
.embed.-r2\:1\@xs-only::before {
padding-bottom: 50%;
}
.embed.-r3\:2\@xs-only::before {
padding-bottom: 66.6666666667%;
}
.embed.-r4\:3\@xs-only::before {
padding-bottom: 75%;
}
.embed.-r5\:3\@xs-only::before {
padding-bottom: 60%;
}
.embed.-r5\:4\@xs-only::before {
padding-bottom: 80%;
}
.embed.-r6\:5\@xs-only::before {
padding-bottom: 83.3333333333%;
}
.embed.-r7\:3\@xs-only::before {
padding-bottom: 42.8571428571%;
}
.embed.-r11\:8\@xs-only::before {
padding-bottom: 72.7272727273%;
}
.embed.-r16\:9\@xs-only::before {
padding-bottom: 56.25%;
}
.embed.-r16\:10\@xs-only::before {
padding-bottom: 62.5%;
}
}
@media (min-width: 36em) {
/*
* .embed.-r1\:1\@sm::before
* .embed.-r2\:1\@sm::before
* .embed.-r3\:2\@sm::before
* .embed.-r4\:3\@sm::before
* .embed.-r5\:3\@sm::before
* .embed.-r5\:4\@sm::before
* .embed.-r6\:5\@sm::before
* .embed.-r7\:3\@sm::before
* .embed.-r11\:8\@sm::before
* .embed.-r16\:9\@sm::before
* .embed.-r16\:10\@sm::before
*/
}
@media (min-width: 36em) and (max-width: 47.99875em) {
/*
* .embed.-r1\:1\@sm-only::before
* .embed.-r2\:1\@sm-only::before
* .embed.-r3\:2\@sm-only::before
* .embed.-r4\:3\@sm-only::before
* .embed.-r5\:3\@sm-only::before
* .embed.-r5\:4\@sm-only::before
* .embed.-r6\:5\@sm-only::before
* .embed.-r7\:3\@sm-only::before
* .embed.-r11\:8\@sm-only::before
* .embed.-r16\:9\@sm-only::before
* .embed.-r16\:10\@sm-only::before
*/
}
@media (min-width: 48em) {
/*
* .embed.-r1\:1\@md::before
* .embed.-r2\:1\@md::before
* .embed.-r3\:2\@md::before
* .embed.-r4\:3\@md::before
* .embed.-r5\:3\@md::before
* .embed.-r5\:4\@md::before
* .embed.-r6\:5\@md::before
* .embed.-r7\:3\@md::before
* .embed.-r11\:8\@md::before
* .embed.-r16\:9\@md::before
* .embed.-r16\:10\@md::before
*/
}
@media (min-width: 48em) and (max-width: 63.99875em) {
/*
* .embed.-r1\:1\@md-only::before
* .embed.-r2\:1\@md-only::before
* .embed.-r3\:2\@md-only::before
* .embed.-r4\:3\@md-only::before
* .embed.-r5\:3\@md-only::before
* .embed.-r5\:4\@md-only::before
* .embed.-r6\:5\@md-only::before
* .embed.-r7\:3\@md-only::before
* .embed.-r11\:8\@md-only::before
* .embed.-r16\:9\@md-only::before
* .embed.-r16\:10\@md-only::before
*/
}
@media (min-width: 64em) {
/*
* .embed.-r1\:1\@lg::before
* .embed.-r2\:1\@lg::before
* .embed.-r3\:2\@lg::before
* .embed.-r4\:3\@lg::before
* .embed.-r5\:3\@lg::before
* .embed.-r5\:4\@lg::before
* .embed.-r6\:5\@lg::before
* .embed.-r7\:3\@lg::before
* .embed.-r11\:8\@lg::before
* .embed.-r16\:9\@lg::before
* .embed.-r16\:10\@lg::before
*/
}
@media (min-width: 64em) and (max-width: 74.99875em) {
/*
* .embed.-r1\:1\@lg-only::before
* .embed.-r2\:1\@lg-only::before
* .embed.-r3\:2\@lg-only::before
* .embed.-r4\:3\@lg-only::before
* .embed.-r5\:3\@lg-only::before
* .embed.-r5\:4\@lg-only::before
* .embed.-r6\:5\@lg-only::before
* .embed.-r7\:3\@lg-only::before
* .embed.-r11\:8\@lg-only::before
* .embed.-r16\:9\@lg-only::before
* .embed.-r16\:10\@lg-only::before
*/
}
@media (min-width: 75em) {
/*
* .embed.-r1\:1\@xl::before
* .embed.-r2\:1\@xl::before
* .embed.-r3\:2\@xl::before
* .embed.-r4\:3\@xl::before
* .embed.-r5\:3\@xl::before
* .embed.-r5\:4\@xl::before
* .embed.-r6\:5\@xl::before
* .embed.-r7\:3\@xl::before
* .embed.-r11\:8\@xl::before
* .embed.-r16\:9\@xl::before
* .embed.-r16\:10\@xl::before
*/
}
@media (min-width: 75em) and (max-width: 99.99875em) {
/*
* .embed.-r1\:1\@xl-only::before
* .embed.-r2\:1\@xl-only::before
* .embed.-r3\:2\@xl-only::before
* .embed.-r4\:3\@xl-only::before
* .embed.-r5\:3\@xl-only::before
* .embed.-r5\:4\@xl-only::before
* .embed.-r6\:5\@xl-only::before
* .embed.-r7\:3\@xl-only::before
* .embed.-r11\:8\@xl-only::before
* .embed.-r16\:9\@xl-only::before
* .embed.-r16\:10\@xl-only::before
*/
}
@media (min-width: 100em) {
/*
* .embed.-r1\:1\@xxl::before
* .embed.-r2\:1\@xxl::before
* .embed.-r3\:2\@xxl::before
* .embed.-r4\:3\@xxl::before
* .embed.-r5\:3\@xxl::before
* .embed.-r5\:4\@xxl::before
* .embed.-r6\:5\@xxl::before
* .embed.-r7\:3\@xxl::before
* .embed.-r11\:8\@xxl::before
* .embed.-r16\:9\@xxl::before
* .embed.-r16\:10\@xxl::before
*/
}
@media (min-width: 100em) {
/*
* .embed.-r1\:1\@xxl-only::before
* .embed.-r2\:1\@xxl-only::before
* .embed.-r3\:2\@xxl-only::before
* .embed.-r4\:3\@xxl-only::before
* .embed.-r5\:3\@xxl-only::before
* .embed.-r5\:4\@xxl-only::before
* .embed.-r6\:5\@xxl-only::before
* .embed.-r7\:3\@xxl-only::before
* .embed.-r11\:8\@xxl-only::before
* .embed.-r16\:9\@xxl-only::before
* .embed.-r16\:10\@xxl-only::before
*/
}
embed()
Helper embed
entry point.
Combine both embed-helper
and embed-helper-with-bp
helpers in one helper.
@use '@wide/styles-helpers' as helpers;
@include helpers.embed;
// @include helpers.embed(false);
Parameters
Type | Description | Mandatory | Default |
---|---|---|---|
Boolean |
Use embed-helper-with-bp()
|
false |
true |
Output
See embed-helper
and embed-helper-with-bp
outputs.
flexbox
Variables
All those variables could be customized depending on what you need in your variables.scss
file.
Here are the default values.
$flexboxes
Define all flexbox values to support.
$flexboxes: (
'flex-direction': (
row,
row-reverse,
column,
column-reverse
),
'flex-wrap': (
wrap,
nowrap,
wrap-reverse
),
'justify-content': (
flex-start,
flex-end,
center,
space-between,
space-around
),
'align-content': (
flex-start,
flex-end,
center,
space-between,
space-around,
stretch
),
'align-items': (
flex-start,
flex-end,
center,
baseline,
stretch
),
'align-self': (
flex-start,
flex-end,
center,
baseline,
stretch
)
) !default;
$flexboxes-properties-class-override
Flexbox properties list for override class name.
$flexboxes-properties-class-override: (
// 'flex-direction': '',
// 'flex-wrap': '',
// 'justify-content': '',
// 'align-content': '',
// 'align-items': '',
// 'align-self': ''
) !default;
If you want to custom flexbox properties class name, just uncomment and set the value.
For example, set flex-direction
as flex-d
will render:
.flex-d-row {
flex-direction: row !important;
}
$flexboxes-values-class-override
Flexbox values list for override class name.
$flexboxes-values-class-override: (
// 'row': '',
// 'row-reverse': '',
// 'column': '',
// 'column-reverse': '',
// 'wrap': '',
// 'nowrap': '',
// 'wrap-reverse': '',
'flex-start': 'start',
'flex-end': 'end',
// 'center': '',
// 'space-between': '',
// 'space-around': '',
// 'stretch': '',
// 'baseline': ''
) !default;
If you want to custom flexbox values class name, just uncomment and set the value.
By default, flex-start
is set as start
. Which will render:
.justify-content-start {
justify-content: flex-start !important;
}
/*
* and not anymore
*
* .justify-content-flex-start { ... }
*
*/
$flexboxes-factors
Flexbox factor properties to loop.
Note that the properties need to support only numeric value !
$flexboxes-factors: (
'flex-grow',
'flex-shrink',
'order'
) !default;
$flexboxes-factors-max-loop
Flexbox factor max loop.
$flexboxes-factors-max-loop: 12 !default;
$flexboxes-important
Set the important property on each rules.
$flexboxes-important: true;
Mixins
flexbox-helper()
Set all flexbox classes from the $flexboxes
variable.
@use '@wide/styles-helpers' as helpers;
@include helpers.flexbox-helper;
Output
.flex-direction-row {
flex-direction: row !important;
}
.flex-direction-row-reverse {
flex-direction: row-reverse !important;
}
.flex-direction-column {
flex-direction: column !important;
}
.flex-direction-column-reverse {
flex-direction: column-reverse !important;
}
.flex-wrap-wrap {
flex-wrap: wrap !important;
}
.flex-wrap-nowrap {
flex-wrap: nowrap !important;
}
.flex-wrap-wrap-reverse {
flex-wrap: wrap-reverse !important;
}
.justify-content-start {
justify-content: flex-start !important;
}
.justify-content-end {
justify-content: flex-end !important;
}
.justify-content-center {
justify-content: center !important;
}
.justify-content-space-between {
justify-content: space-between !important;
}
.justify-content-space-around {
justify-content: space-around !important;
}
.align-content-start {
align-content: flex-start !important;
}
.align-content-end {
align-content: flex-end !important;
}
.align-content-center {
align-content: center !important;
}
.align-content-space-between {
align-content: space-between !important;
}
.align-content-space-around {
align-content: space-around !important;
}
.align-content-stretch {
align-content: stretch !important;
}
.align-items-start {
align-items: flex-start !important;
}
.align-items-end {
align-items: flex-end !important;
}
.align-items-center {
align-items: center !important;
}
.align-items-baseline {
align-items: baseline !important;
}
.align-items-stretch {
align-items: stretch !important;
}
.align-self-start {
align-self: flex-start !important;
}
.align-self-end {
align-self: flex-end !important;
}
.align-self-center {
align-self: center !important;
}
.align-self-baseline {
align-self: baseline !important;
}
.align-self-stretch {
align-self: stretch !important;
}
flexbox-helper-with-bp()
Set all flexbox classes from the $flexboxes
variable with breakpoints media queries.
@use '@wide/styles-helpers' as helpers;
@include helpers.flexbox-helper-with-bp;
Output
@media (min-width: 20.375em) and (max-width: 35.99875em) {
.flex-direction-row\@xs-only {
flex-direction: row !important;
}
.flex-direction-row-reverse\@xs-only {
flex-direction: row-reverse !important;
}
.flex-direction-column\@xs-only {
flex-direction: column !important;
}
.flex-direction-column-reverse\@xs-only {
flex-direction: column-reverse !important;
}
.flex-wrap-wrap\@xs-only {
flex-wrap: wrap !important;
}
.flex-wrap-nowrap\@xs-only {
flex-wrap: nowrap !important;
}
.flex-wrap-wrap-reverse\@xs-only {
flex-wrap: wrap-reverse !important;
}
.justify-content-start\@xs-only {
justify-content: flex-start !important;
}
.justify-content-end\@xs-only {
justify-content: flex-end !important;
}
.justify-content-center\@xs-only {
justify-content: center !important;
}
.justify-content-space-between\@xs-only {
justify-content: space-between !important;
}
.justify-content-space-around\@xs-only {
justify-content: space-around !important;
}
.align-content-start\@xs-only {
align-content: flex-start !important;
}
.align-content-end\@xs-only {
align-content: flex-end !important;
}
.align-content-center\@xs-only {
align-content: center !important;
}
.align-content-space-between\@xs-only {
align-content: space-between !important;
}
.align-content-space-around\@xs-only {
align-content: space-around !important;
}
.align-content-stretch\@xs-only {
align-content: stretch !important;
}
.align-items-start\@xs-only {
align-items: flex-start !important;
}
.align-items-end\@xs-only {
align-items: flex-end !important;
}
.align-items-center\@xs-only {
align-items: center !important;
}
.align-items-baseline\@xs-only {
align-items: baseline !important;
}
.align-items-stretch\@xs-only {
align-items: stretch !important;
}
.align-self-start\@xs-only {
align-self: flex-start !important;
}
.align-self-end\@xs-only {
align-self: flex-end !important;
}
.align-self-center\@xs-only {
align-self: center !important;
}
.align-self-baseline\@xs-only {
align-self: baseline !important;
}
.align-self-stretch\@xs-only {
align-self: stretch !important;
}
}
/* and so on */
@media (min-width: 36em) {
/*
* .flex-direction-row\@sm
* .flex-direction-row-reverse\@sm
* .flex-direction-column\@sm
* .flex-direction-column-reverse\@sm
* .flex-wrap-wrap\@sm
* .flex-wrap-nowrap\@sm
* .flex-wrap-wrap-reverse\@sm
* .justify-content-start\@sm
* .justify-content-end\@sm
* .justify-content-center\@sm
* .justify-content-space-between\@sm
* .justify-content-space-around\@sm
* .align-content-start\@sm
* .align-content-end\@sm
* .align-content-center\@sm
* .align-content-space-between\@sm
* .align-content-space-around\@sm
* .align-content-stretch\@sm
* .align-items-start\@sm
* .align-items-end\@sm
* .align-items-center\@sm
* .align-items-baseline\@sm
* .align-items-stretch\@sm
* .align-self-start\@sm
* .align-self-end\@sm
* .align-self-center\@sm
* .align-self-baseline\@sm
* .align-self-stretch\@sm
*/
}
@media (min-width: 36em) and (max-width: 47.99875em) {
/*
* .flex-direction-row\@sm-only
* .flex-direction-row-reverse\@sm-only
* .flex-direction-column\@sm-only
* .flex-direction-column-reverse\@sm-only
* .flex-wrap-wrap\@sm-only
* .flex-wrap-nowrap\@sm-only
* .flex-wrap-wrap-reverse\@sm-only
* .justify-content-start\@sm-only
* .justify-content-end\@sm-only
* .justify-content-center\@sm-only
* .justify-content-space-between\@sm-only
* .justify-content-space-around\@sm-only
* .align-content-start\@sm-only
* .align-content-end\@sm-only
* .align-content-center\@sm-only
* .align-content-space-between\@sm-only
* .align-content-space-around\@sm-only
* .align-content-stretch\@sm-only
* .align-items-start\@sm-only
* .align-items-end\@sm-only
* .align-items-center\@sm-only
* .align-items-baseline\@sm-only
* .align-items-stretch\@sm-only
* .align-self-start\@sm-only
* .align-self-end\@sm-only
* .align-self-center\@sm-only
* .align-self-baseline\@sm-only
* .align-self-stretch\@sm-only
*/
}
@media (min-width: 48em) {
/*
* .flex-direction-row\@md
* .flex-direction-row-reverse\@md
* .flex-direction-column\@md
* .flex-direction-column-reverse\@md
* .flex-wrap-wrap\@md
* .flex-wrap-nowrap\@md
* .flex-wrap-wrap-reverse\@md
* .justify-content-start\@md
* .justify-content-end\@md
* .justify-content-center\@md
* .justify-content-space-between\@md
* .justify-content-space-around\@md
* .align-content-start\@md
* .align-content-end\@md
* .align-content-center\@md
* .align-content-space-between\@md
* .align-content-space-around\@md
* .align-content-stretch\@md
* .align-items-start\@md
* .align-items-end\@md
* .align-items-center\@md
* .align-items-baseline\@md
* .align-items-stretch\@md
* .align-self-start\@md
* .align-self-end\@md
* .align-self-center\@md
* .align-self-baseline\@md
* .align-self-stretch\@md
*/
}
@media (min-width: 48em) and (max-width: 63.99875em) {
/*
* .flex-direction-row\@md-only
* .flex-direction-row-reverse\@md-only
* .flex-direction-column\@md-only
* .flex-direction-column-reverse\@md-only
* .flex-wrap-wrap\@md-only
* .flex-wrap-nowrap\@md-only
* .flex-wrap-wrap-reverse\@md-only
* .justify-content-start\@md-only
* .justify-content-end\@md-only
* .justify-content-center\@md-only
* .justify-content-space-between\@md-only
* .justify-content-space-around\@md-only
* .align-content-start\@md-only
* .align-content-end\@md-only
* .align-content-center\@md-only
* .align-content-space-between\@md-only
* .align-content-space-around\@md-only
* .align-content-stretch\@md-only
* .align-items-start\@md-only
* .align-items-end\@md-only
* .align-items-center\@md-only
* .align-items-baseline\@md-only
* .align-items-stretch\@md-only
* .align-self-start\@md-only
* .align-self-end\@md-only
* .align-self-center\@md-only
* .align-self-baseline\@md-only
* .align-self-stretch\@md-only
*/
}
@media (min-width: 64em) {
/*
* .flex-direction-row\@lg
* .flex-direction-row-reverse\@lg
* .flex-direction-column\@lg
* .flex-direction-column-reverse\@lg
* .flex-wrap-wrap\@lg
* .flex-wrap-nowrap\@lg
* .flex-wrap-wrap-reverse\@lg
* .justify-content-start\@lg
* .justify-content-end\@lg
* .justify-content-center\@lg
* .justify-content-space-between\@lg
* .justify-content-space-around\@lg
* .align-content-start\@lg
* .align-content-end\@lg
* .align-content-center\@lg
* .align-content-space-between\@lg
* .align-content-space-around\@lg
* .align-content-stretch\@lg
* .align-items-start\@lg
* .align-items-end\@lg
* .align-items-center\@lg
* .align-items-baseline\@lg
* .align-items-stretch\@lg
* .align-self-start\@lg
* .align-self-end\@lg
* .align-self-center\@lg
* .align-self-baseline\@lg
* .align-self-stretch\@lg
*/
}
@media (min-width: 64em) and (max-width: 74.99875em) {
/*
* .flex-direction-row\@lg-only
* .flex-direction-row-reverse\@lg-only
* .flex-direction-column\@lg-only
* .flex-direction-column-reverse\@lg-only
* .flex-wrap-wrap\@lg-only
* .flex-wrap-nowrap\@lg-only
* .flex-wrap-wrap-reverse\@lg-only
* .justify-content-start\@lg-only
* .justify-content-end\@lg-only
* .justify-content-center\@lg-only
* .justify-content-space-between\@lg-only
* .justify-content-space-around\@lg-only
* .align-content-start\@lg-only
* .align-content-end\@lg-only
* .align-content-center\@lg-only
* .align-content-space-between\@lg-only
* .align-content-space-around\@lg-only
* .align-content-stretch\@lg-only
* .align-items-start\@lg-only
* .align-items-end\@lg-only
* .align-items-center\@lg-only
* .align-items-baseline\@lg-only
* .align-items-stretch\@lg-only
* .align-self-start\@lg-only
* .align-self-end\@lg-only
* .align-self-center\@lg-only
* .align-self-baseline\@lg-only
* .align-self-stretch\@lg-only
*/
}
@media (min-width: 75em) {
/*
* .flex-direction-row\@xl
* .flex-direction-row-reverse\@xl
* .flex-direction-column\@xl
* .flex-direction-column-reverse\@xl
* .flex-wrap-wrap\@xl
* .flex-wrap-nowrap\@xl
* .flex-wrap-wrap-reverse\@xl
* .justify-content-start\@xl
* .justify-content-end\@xl
* .justify-content-center\@xl
* .justify-content-space-between\@xl
* .justify-content-space-around\@xl
* .align-content-start\@xl
* .align-content-end\@xl
* .align-content-center\@xl
* .align-content-space-between\@xl
* .align-content-space-around\@xl
* .align-content-stretch\@xl
* .align-items-start\@xl
* .align-items-end\@xl
* .align-items-center\@xl
* .align-items-baseline\@xl
* .align-items-stretch\@xl
* .align-self-start\@xl
* .align-self-end\@xl
* .align-self-center\@xl
* .align-self-baseline\@xl
* .align-self-stretch\@xl
*/
}
@media (min-width: 75em) and (max-width: 99.99875em) {
/*
* .flex-direction-row\@xl-only
* .flex-direction-row-reverse\@xl-only
* .flex-direction-column\@xl-only
* .flex-direction-column-reverse\@xl-only
* .flex-wrap-wrap\@xl-only
* .flex-wrap-nowrap\@xl-only
* .flex-wrap-wrap-reverse\@xl-only
* .justify-content-start\@xl-only
* .justify-content-end\@xl-only
* .justify-content-center\@xl-only
* .justify-content-space-between\@xl-only
* .justify-content-space-around\@xl-only
* .align-content-start\@xl-only
* .align-content-end\@xl-only
* .align-content-center\@xl-only
* .align-content-space-between\@xl-only
* .align-content-space-around\@xl-only
* .align-content-stretch\@xl-only
* .align-items-start\@xl-only
* .align-items-end\@xl-only
* .align-items-center\@xl-only
* .align-items-baseline\@xl-only
* .align-items-stretch\@xl-only
* .align-self-start\@xl-only
* .align-self-end\@xl-only
* .align-self-center\@xl-only
* .align-self-baseline\@xl-only
* .align-self-stretch\@xl-only
*/
}
@media (min-width: 100em) {
/*
* .flex-direction-row\@xxl
* .flex-direction-row-reverse\@xxl
* .flex-direction-column\@xxl
* .flex-direction-column-reverse\@xxl
* .flex-wrap-wrap\@xxl
* .flex-wrap-nowrap\@xxl
* .flex-wrap-wrap-reverse\@xxl
* .justify-content-start\@xxl
* .justify-content-end\@xxl
* .justify-content-center\@xxl
* .justify-content-space-between\@xxl
* .justify-content-space-around\@xxl
* .align-content-start\@xxl
* .align-content-end\@xxl
* .align-content-center\@xxl
* .align-content-space-between\@xxl
* .align-content-space-around\@xxl
* .align-content-stretch\@xxl
* .align-items-start\@xxl
* .align-items-end\@xxl
* .align-items-center\@xxl
* .align-items-baseline\@xxl
* .align-items-stretch\@xxl
* .align-self-start\@xxl
* .align-self-end\@xxl
* .align-self-center\@xxl
* .align-self-baseline\@xxl
* .align-self-stretch\@xxl
*/
}
@media (min-width: 100em) {
/*
* .flex-direction-row\@xxl-only
* .flex-direction-row-reverse\@xxl-only
* .flex-direction-column\@xxl-only
* .flex-direction-column-reverse\@xxl-only
* .flex-wrap-wrap\@xxl-only
* .flex-wrap-nowrap\@xxl-only
* .flex-wrap-wrap-reverse\@xxl-only
* .justify-content-start\@xxl-only
* .justify-content-end\@xxl-only
* .justify-content-center\@xxl-only
* .justify-content-space-between\@xxl-only
* .justify-content-space-around\@xxl-only
* .align-content-start\@xxl-only
* .align-content-end\@xxl-only
* .align-content-center\@xxl-only
* .align-content-space-between\@xxl-only
* .align-content-space-around\@xxl-only
* .align-content-stretch\@xxl-only
* .align-items-start\@xxl-only
* .align-items-end\@xxl-only
* .align-items-center\@xxl-only
* .align-items-baseline\@xxl-only
* .align-items-stretch\@xxl-only
* .align-self-start\@xxl-only
* .align-self-end\@xxl-only
* .align-self-center\@xxl-only
* .align-self-baseline\@xxl-only
* .align-self-stretch\@xxl-only
*/
}
flexbox-factor-helper()
Loop with $flexboxes-factors-max-loop
variable to set all flexbox factor classes from the $flexboxes-factors
variable.
@use '@wide/styles-helpers' as helpers;
@include helpers.flexbox-factor-helper;
Output
.flex-grow-0 {
flex-grow: 0 !important;
}
.flex-grow-1 {
flex-grow: 1 !important;
}
/*
* and so on until the value set to `$flexboxes-factors-max-loop`
*/
.flex-shrink-0 {
flex-shrink: 0 !important;
}
.flex-shrink-1 {
flex-shrink: 1 !important;
}
/*
* and so on until the value set to `$flexboxes-factors-max-loop`
*/
.order-0 {
order: 0 !important;
}
.order-1 {
order: 1 !important;
}
/*
* and so on until the value set to `$flexboxes-factors-max-loop`
*/
flexbox-factor-helper-with-bp()
Loop with $flexboxes-factors-max-loop
variable to set all flexbox factor classes from the $flexboxes-factors
variable with breakpoints media queries.
@use '@wide/styles-helpers' as helpers;
@include helpers.flexbox-factor-helper;
Output
@media (min-width: 20.375em) and (max-width: 35.99875em) {
.flex-grow-0\@xs-only {
flex-grow: 0 !important;
}
.flex-grow-1\@xs-only {
flex-grow: 1 !important;
}
/*
* and so on until the value set to `$flexboxes-factors-max-loop`
*/
.flex-shrink-0\@xs-only {
flex-shrink: 0 !important;
}
.flex-shrink-1\@xs-only {
flex-shrink: 1 !important;
}
/*
* and so on until the value set to `$flexboxes-factors-max-loop`
*/
.order-0\@xs-only {
order: 0 !important;
}
.order-1\@xs-only {
order: 1 !important;
}
/*
* and so on until the value set to `$flexboxes-factors-max-loop`
*/
}
/* and so on */
@media (min-width: 36em) {
/*
* .flex-grow-0\@sm
* .flex-grow-1\@sm
* ...
* .flex-shrink-0\@sm
* .flex-shrink-1\@sm
* ...
* .order-0\@sm
* .order-1\@sm
* ...
*/
}
@media (min-width: 36em) and (max-width: 47.99875em) {
/*
* .flex-grow-0\@sm-only
* .flex-grow-1\@sm-only
* ...
* .flex-shrink-0\@sm-only
* .flex-shrink-1\@sm-only
* ...
* .order-0\@sm-only
* .order-1\@sm-only
* ...
*/
}
@media (min-width: 48em) {
/*
* .flex-grow-0\@md
* .flex-grow-1\@md
* ...
* .flex-shrink-0\@md
* .flex-shrink-1\@md
* ...
* .order-0\@md
* .order-1\@md
* ...
*/
}
@media (min-width: 48em) and (max-width: 63.99875em) {
/*
* .flex-grow-0\@md-only
* .flex-grow-1\@md-only
* ...
* .flex-shrink-0\@md-only
* .flex-shrink-1\@md-only
* ...
* .order-0\@md-only
* .order-1\@md-only
* ...
*/
}
@media (min-width: 64em) {
/*
* .flex-grow-0\@lg
* .flex-grow-1\@lg
* ...
* .flex-shrink-0\@lg
* .flex-shrink-1\@lg
* ...
* .order-0\@lg
* .order-1\@lg
* ...
*/
}
@media (min-width: 64em) and (max-width: 74.99875em) {
/*
* .flex-grow-0\@lg-only
* .flex-grow-1\@lg-only
* ...
* .flex-shrink-0\@lg-only
* .flex-shrink-1\@lg-only
* ...
* .order-0\@lg-only
* .order-1\@lg-only
* ...
*/
}
@media (min-width: 75em) {
/*
* .flex-grow-0\@xl
* .flex-grow-1\@xl
* ...
* .flex-shrink-0\@xl
* .flex-shrink-1\@xl
* ...
* .order-0\@xl
* .order-1\@xl
* ...
*/
}
@media (min-width: 75em) and (max-width: 99.99875em) {
/*
* .flex-grow-0\@xl-only
* .flex-grow-1\@xl-only
* ...
* .flex-shrink-0\@xl-only
* .flex-shrink-1\@xl-only
* ...
* .order-0\@xl-only
* .order-1\@xl-only
* ...
*/
}
@media (min-width: 100em) {
/*
* .flex-grow-0\@xxl
* .flex-grow-1\@xxl
* ...
* .flex-shrink-0\@xxl
* .flex-shrink-1\@xxl
* ...
* .order-0\@xxl
* .order-1\@xxl
* ...
*/
}
@media (min-width: 100em) {
/*
* .flex-grow-0\@xxl-only
* .flex-grow-1\@xxl-only
* ...
* .flex-shrink-0\@xxl-only
* .flex-shrink-1\@xxl-only
* ...
* .order-0\@xxl-only
* .order-1\@xxl-only
* ...
*/
}
flexbox()
Helper flexbox
entry point.
Combine flexbox-helper
, flexbox-helper-with-bp
, flexbox-factor
and flexbox-factor-with-bp
helpers in one helper.
@use '@wide/styles-helpers' as helpers;
@include helpers.flexbox;
// @include helpers.flexbox(false);
Parameters
Type | Description | Mandatory | Default |
---|---|---|---|
Boolean |
Use flexbox-helper-with-bp()
|
false |
true |
Output
See flexbox-helper
, flexbox-helper-with-bp
, flexbox-factor
and flexbox-factor-with-bp
outputs.
float
Variables
This variable could be customized depending on what you need in your variables.scss
file.
Here is the default value.
$floats
Define all float values to support.
$floats: (
right,
left,
none
) !default;
Mixins
float-helper()
Set all float classes from the $floats
variable.
@use '@wide/styles-helpers' as helpers;
@include helpers.float-helper;
Output
.float-right {
float: right !important;
}
.float-left {
float: left !important;
}
.float-none {
float: none !important;
}
float-helper-with-bp()
Set all float classes from the $floats
variable with breakpoints media queries.
@use '@wide/styles-helpers' as helpers;
@include helpers.float-helper-with-bp;
Output
@media (min-width: 20.375em) and (max-width: 35.99875em) {
.float-right\@xs-only {
float: right !important;
}
.float-left\@xs-only {
float: left !important;
}
.float-none\@xs-only {
float: none !important;
}
}
/* and so on */
@media (min-width: 36em) {
/*
* .float-right\@sm
* .float-left\@sm
* .float-none\@sm
*/
}
@media (min-width: 36em) and (max-width: 47.99875em) {
/*
* .float-right\@sm-only
* .float-left\@sm-only
* .float-none\@sm-only
*/
}
@media (min-width: 48em) {
/*
* .float-right\@md
* .float-left\@md
* .float-none\@md
*/
}
@media (min-width: 48em) and (max-width: 63.99875em) {
/*
* .float-right\@md-only
* .float-left\@md-only
* .float-none\@md-only
*/
}
@media (min-width: 64em) {
/*
* .float-right\@lg
* .float-left\@lg
* .float-none\@lg
*/
}
@media (min-width: 64em) and (max-width: 74.99875em) {
/*
* .float-right\@lg-only
* .float-left\@lg-only
* .float-none\@lg-only
*/
}
@media (min-width: 75em) {
/*
* .float-right\@xl
* .float-left\@xl
* .float-none\@xl
*/
}
@media (min-width: 75em) and (max-width: 99.99875em) {
/*
* .float-right\@xl-only
* .float-left\@xl-only
* .float-none\@xl-only
*/
}
@media (min-width: 100em) {
/*
* .float-right\@xxl
* .float-left\@xxl
* .float-none\@xxl
*/
}
@media (min-width: 100em) {
/*
* .float-right\@xxl-only
* .float-left\@xxl-only
* .float-none\@xxl-only
*/
}
float()
Helper float
entry point.
Combine both float-helper
and float-helper-with-bp
helpers in one helper.
@use '@wide/styles-helpers' as helpers;
@include helpers.float;
// @include helpers.float(false);
Parameters
Type | Description | Mandatory | Default |
---|---|---|---|
Boolean |
Use float-helper-with-bp()
|
false |
true |
Output
See float-helper()
and float-helper-with-bp()
outputs.
font
Variables
Those variables could be customized depending on what you need in your variables.scss
file.
Here are the default values.
$fonts-style
Define all font-style values to support.
$fonts-style: (
italic: 'italic'
) !default;
$fonts-weight
Define all font-weight values to support.
$fonts-weight: (
lighter: 100,
light: 200,
normal: 300,
bold: 600,
bolder: 800
) !default;
$fonts-important
Set the important property on each rules.
$fonts-important: true;
Mixins
font-style-helper()
Set all font style classes from the $fonts-style
variable.
@use '@wide/styles-helpers' as helpers;
@include helpers.font-style-helper;
Output
.font-weight-italic {
font-style: "italic" !important;
}
font-weight-helper()
Set all font weight classes from the $fonts-weight
variable.
@use '@wide/styles-helpers' as helpers;
@include helpers.font-weight-helper;
Output
.font-weight-lighter {
font-weight: 100 !important;
}
.font-weight-light {
font-weight: 200 !important;
}
.font-weight-normal {
font-weight: 300 !important;
}
.font-weight-bold {
font-weight: 600 !important;
}
.font-weight-bolder {
font-weight: 800 !important;
}
font-helper-with-bp()
Set all font style classes from the $fonts-style
variable and all font weight classes from the $fonts-weight
variable with breakpoints media queries.
@use '@wide/styles-helpers' as helpers;
@include helpers.font-helper-with-bp;
Output
@media (min-width: 20.375em) and (max-width: 35.99875em) {
.font-weight-italic\@xs-only {
font-style: "italic" !important;
}
.font-weight-lighter\@xs-only {
font-weight: 100 !important;
}
.font-weight-light\@xs-only {
font-weight: 200 !important;
}
.font-weight-normal\@xs-only {
font-weight: 300 !important;
}
.font-weight-bold\@xs-only {
font-weight: 600 !important;
}
.font-weight-bolder\@xs-only {
font-weight: 800 !important;
}
}
/* and so on */
@media (min-width: 36em) {
/*
* .font-weight-italic\@sm
* .font-weight-lighter\@sm
* .font-weight-light\@sm
* .font-weight-normal\@sm
* .font-weight-bold\@sm
* .font-weight-bolder\@sm
*/
}
@media (min-width: 36em) and (max-width: 47.99875em) {
/*
* .font-weight-italic\@sm-only
* .font-weight-lighter\@sm-only
* .font-weight-light\@sm-only
* .font-weight-light\@sm-only
* .font-weight-bold\@sm-only
* .font-weight-bolder\@sm-only
*/
}
@media (min-width: 48em) {
/*
* .font-weight-italic\@md
* .font-weight-lighter\@md
* .font-weight-light\@md
* .font-weight-normal\@md
* .font-weight-bold\@md
* .font-weight-bolder\@md
*/
}
@media (min-width: 48em) and (max-width: 63.99875em) {
/*
* .font-weight-italic\@md-only
* .font-weight-lighter\@md-only
* .font-weight-light\@md-only
* .font-weight-light\@md-only
* .font-weight-bold\@md-only
* .font-weight-bolder\@md-only
*/
}
@media (min-width: 64em) {
/*
* .font-weight-italic\@lg
* .font-weight-lighter\@lg
* .font-weight-light\@lg
* .font-weight-normal\@lg
* .font-weight-bold\@lg
* .font-weight-bolder\@lg
*/
}
@media (min-width: 64em) and (max-width: 74.99875em) {
/*
* .font-weight-italic\@lg-only
* .font-weight-lighter\@lg-only
* .font-weight-light\@lg-only
* .font-weight-light\@lg-only
* .font-weight-bold\@lg-only
* .font-weight-bolder\@lg-only
*/
}
@media (min-width: 75em) {
/*
* .font-weight-italic\@xl
* .font-weight-lighter\@xl
* .font-weight-light\@xl
* .font-weight-normal\@xl
* .font-weight-bold\@xl
* .font-weight-bolder\@xl
*/
}
@media (min-width: 75em) and (max-width: 99.99875em) {
/*
* .font-weight-italic\@xl-only
* .font-weight-lighter\@xl-only
* .font-weight-light\@xl-only
* .font-weight-light\@xl-only
* .font-weight-bold\@xl-only
* .font-weight-bolder\@xl-only
*/
}
@media (min-width: 100em) {
/*
* .font-weight-italic\@xxl
* .font-weight-lighter\@xxl
* .font-weight-light\@xxl
* .font-weight-normal\@xxl
* .font-weight-bold\@xxl
* .font-weight-bolder\@xxl
*/
}
@media (min-width: 100em) {
/*
* .font-weight-italic\@xxl-only
* .font-weight-lighter\@xxl-only
* .font-weight-light\@xxl-only
* .font-weight-light\@xxl-only
* .font-weight-bold\@xxl-only
* .font-weight-bolder\@xxl-only
*/
}
font()
Helper font
entry point.
Combine font-style-helper
, font-weight-helper
and font-helper-with-bp
helpers in one helper.
@use '@wide/styles-helpers' as helpers;
@include helpers.font;
// @include helpers.font(false);
Parameters
Type | Description | Mandatory | Default |
---|---|---|---|
Boolean |
Use font-helper-with-bp()
|
false |
true |
Output
See font-style-helper
, font-weight-helper
and font-helper-with-bp
outputs.
overflow
Variables
This variable could be customized depending on what you need in your variables.scss
file.
Here is the default value.
$overflows
Define all position values to support.
$overflows: (
auto,
hidden
) !default;
Mixins
overflow-helper()
Set all float classes from the $overflows
variable.
@use '@wide/styles-helpers' as helpers;
@include helpers.overflow-helper;
Output
.overflow-auto {
overflow: auto !important;
}
.overflow-hidden {
overflow: hidden !important;
}
overflow-helper-with-bp()
Set all float classes from the $overflows
variable with breakpoints media queries.
@use '@wide/styles-helpers' as helpers;
@include helpers.overflow-helper-with-bp;
Output
@media (min-width: 20.375em) and (max-width: 35.99875em) {
.overflow-auto\@xs-only {
overflow: auto !important;
}
.overflow-hidden\@xs-only {
overflow: hidden !important;
}
}
/* and so on */
@media (min-width: 36em) {
/*
* .overflow-auto\@sm
* .overflow-hidden\@sm
*/
}
@media (min-width: 36em) and (max-width: 47.99875em) {
/*
* .overflow-auto\@sm-only
* .overflow-hidden\@sm-only
*/
}
@media (min-width: 48em) {
/*
* .overflow-auto\@md
* .overflow-hidden\@md
*/
}
@media (min-width: 48em) and (max-width: 63.99875em) {
/*
* .overflow-auto\@md-only
* .overflow-hidden\@md-only
*/
}
@media (min-width: 64em) {
/*
* .overflow-auto\@lg
* .overflow-hidden\@lg
*/
}
@media (min-width: 64em) and (max-width: 74.99875em) {
/*
* .overflow-auto\@lg-only
* .overflow-hidden\@lg-only
*/
}
@media (min-width: 75em) {
/*
* .overflow-auto\@xl
* .overflow-hidden\@xl
*/
}
@media (min-width: 75em) and (max-width: 99.99875em) {
/*
* .overflow-auto\@xl-only
* .overflow-hidden\@xl-only
*/
}
@media (min-width: 100em) {
/*
* .overflow-auto\@xxl
* .overflow-hidden\@xxl
*/
}
@media (min-width: 100em) {
/*
* .overflow-auto\@xxl-only
* .overflow-hidden\@xxl-only
*/
}
overflow()
Helper overflow
entry point.
Combine both overflow-helper
and overflow-helper-with-bp
helpers in one helper.
@use '@wide/styles-helpers' as helpers;
@include helpers.overflow;
// @include helpers.overflow(false);
Parameters
Type | Description | Mandatory | Default |
---|---|---|---|
Boolean |
Use overflow-helper-with-bp()
|
false |
true |
Output
See overflow-helper()
and overflow-helper-with-bp()
outputs.
position
Variables
This variable could be customized depending on what you need in your variables.scss
file.
Here is the default value.
$positions
Define all position values to support.
$positions: (
absolute,
fixed,
initial,
inherit,
relative,
static
) !default;
Mixins
position-helper()
Set all position classes from the $positions
variable.
@use '@wide/styles-helpers' as helpers;
@include helpers.position-helper;
Output
.position-absolute {
position: absolute !important;
}
.position-fixed {
position: fixed !important;
}
.position-initial {
position: initial !important;
}
.position-inherit {
position: inherit !important;
}
.position-relative {
position: relative !important;
}
.position-static {
position: static !important;
}
.fixed-top,
.fixed-bottom {
left: 0;
position: fixed;
right: 0;
}
.fixed-top {
top: 0;
}
.fixed-bottom {
bottom: 0;
}
position-helper-with-bp()
Set all position classes from the $positions
variable with breakpoints media queries.
@use '@wide/styles-helpers' as helpers;
@include helpers.position-helper-with-bp;
Output
@media (min-width: 20.375em) and (max-width: 35.99875em) {
.position-absolute\@xs-only {
position: absolute !important;
}
.position-fixed\@xs-only {
position: fixed !important;
}
.position-initial\@xs-only {
position: initial !important;
}
.position-inherit\@xs-only {
position: inherit !important;
}
.position-relative\@xs-only {
position: relative !important;
}
.position-static\@xs-only {
position: static !important;
}
.fixed-top\@xs-only,
.fixed-bottom\@xs-only {
left: 0;
position: fixed;
right: 0;
}
.fixed-top\@xs-only {
top: 0;
}
.fixed-bottom\@xs-only {
bottom: 0;
}
}
/* and so on */
@media (min-width: 36em) {
/*
* .position-absolute\@sm
* .position-fixed\@sm
* .position-initial\@sm
* .position-inherit\@sm
* .position-relative\@sm
* .position-static\@sm
* .fixed-top\@sm
* .fixed-bottom\@sm
*/
}
@media (min-width: 36em) and (max-width: 47.99875em) {
/*
* .position-absolute\@sm-only
* .position-fixed\@sm-only
* .position-initial\@sm-only
* .position-inherit\@sm-only
* .position-relative\@sm-only
* .position-static\@sm-only
* .fixed-top\@sm-only
* .fixed-bottom\@sm-only
*/
}
@media (min-width: 48em) {
/*
* .position-absolute\@md
* .position-fixed\@md
* .position-initial\@md
* .position-inherit\@md
* .position-relative\@md
* .position-static\@md
* .fixed-top\@md
* .fixed-bottom\@md
*/
}
@media (min-width: 48em) and (max-width: 63.99875em) {
/*
* .position-absolute\@md-only
* .position-fixed\@md-only
* .position-initial\@md-only
* .position-inherit\@md-only
* .position-relative\@md-only
* .position-static\@md-only
* .fixed-top\@md-only
* .fixed-bottom\@md-only
*/
}
@media (min-width: 64em) {
/*
* .position-absolute\@lg
* .position-fixed\@lg
* .position-initial\@lg
* .position-inherit\@lg
* .position-relative\@lg
* .position-static\@lg
* .fixed-top\@lg
* .fixed-bottom\@lg
*/
}
@media (min-width: 64em) and (max-width: 74.99875em) {
/*
* .position-absolute\@lg-only
* .position-fixed\@lg-only
* .position-initial\@lg-only
* .position-inherit\@lg-only
* .position-relative\@lg-only
* .position-static\@lg-only
* .fixed-top\@lg-only
* .fixed-bottom\@lg-only
*/
}
@media (min-width: 75em) {
/*
* .position-absolute\@xl
* .position-fixed\@xl
* .position-initial\@xl
* .position-inherit\@xl
* .position-relative\@xl
* .position-static\@xl
* .fixed-top\@xl
* .fixed-bottom\@xl
*/
}
@media (min-width: 75em) and (max-width: 99.99875em) {
/*
* .position-absolute\@xl-only
* .position-fixed\@xl-only
* .position-initial\@xl-only
* .position-inherit\@xl-only
* .position-relative\@xl-only
* .position-static\@xl-only
* .fixed-top\@xl-only
* .fixed-bottom\@xl-only
*/
}
@media (min-width: 100em) {
/*
* .position-absolute\@xxl
* .position-fixed\@xxl
* .position-initial\@xxl
* .position-inherit\@xxl
* .position-relative\@xxl
* .position-static\@xxl
* .fixed-top\@xxl
* .fixed-bottom\@xxl
*/
}
@media (min-width: 100em) {
/*
* .position-absolute\@xxl-only
* .position-fixed\@xxl-only
* .position-initial\@xxl-only
* .position-inherit\@xxl-only
* .position-relative\@xxl-only
* .position-static\@xxl-only
* .fixed-top\@xxl-only
* .fixed-bottom\@xxl-only
*/
}
position()
Helper position
entry point.
Combine both position-helper
and position-helper-with-bp
helpers in one helper.
@use '@wide/styles-helpers' as helpers;
@include helpers.position;
Parameters
Type | Description | Mandatory | Default |
---|---|---|---|
Boolean |
Use position-helper-with-bp()
|
false |
true |
Output
See position-helper()
and position-helper-with-bp()
outputs.
stretched-link
Variables
This variable could be customized depending on what you need in your variables.scss
file.
Here is the default value.
$zindex-stretched
Define the z-index value for the link.
$zindex-stretched: 1 !default;
Mixins
stretched-link-helper()
Set stretched-link classes.
@use '@wide/styles-helpers' as helpers;
@include helpers.stretched-link-helper;
Output
.stretched-link::after {
bottom: 0;
content: "";
left: 0;
pointer-events: auto;
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
.stretched-link-b::before {
bottom: 0;
content: "";
left: 0;
pointer-events: auto;
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
stretched-link-helper-with-bp()
Set stretched-link classes with breakpoints media queries.
@use '@wide/styles-helpers' as helpers;
@include helpers.stretched-link-helper-with-bp;
Output
@media (min-width: 20.375em) and (max-width: 35.99875em) {
.stretched-link\@xs-only::after {
bottom: 0;
content: "";
left: 0;
pointer-events: auto;
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
.stretched-link-b\@xs-only::before {
bottom: 0;
content: "";
left: 0;
pointer-events: auto;
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
}
/* and so on */
@media (min-width: 36em) {
/*
* .stretched-link\@sm
* .stretched-link-b\@sm
*/
}
@media (min-width: 36em) and (max-width: 47.99875em) {
/*
* .stretched-link\@sm-only
* .stretched-link-b\@sm-only
*/
}
@media (min-width: 48em) {
/*
* .stretched-link\@md
* .stretched-link-b\@md
*/
}
@media (min-width: 48em) and (max-width: 63.99875em) {
/*
* .stretched-link\@md-only
* .stretched-link-b\@md-only
*/
}
@media (min-width: 64em) {
/*
* .stretched-link\@lg
* .stretched-link-b\@lg
*/
}
@media (min-width: 64em) and (max-width: 74.99875em) {
/*
* .stretched-link\@lg-only
* .stretched-link-b\@lg-only
*/
}
@media (min-width: 75em) {
/*
* .stretched-link\@xl
* .stretched-link-b\@xl
*/
}
@media (min-width: 75em) and (max-width: 99.99875em) {
/*
* .stretched-link\@xl-only
* .stretched-link-b\@xl-only
*/
}
@media (min-width: 100em) {
/*
* .stretched-link\@xxl
* .stretched-link-b\@xxl
*/
}
@media (min-width: 100em) {
/*
* .stretched-link\@xxl-only
* .stretched-link-b\@xxl-only
*/
}
stretched-link()
Helper stretched-link
entry point.
Combine both stretched-link-helper
and stretched-link-helper-with-bp
helpers in one helper.
@use '@wide/styles-helpers' as helpers;
@include helpers.stretched-link;
// @include helpers.stretched-link(false);
Parameters
Type | Description | Mandatory | Default |
---|---|---|---|
Boolean |
Use of stretched-link-helper-with-bp()
|
false |
true |
Output
See stretched-link-helper()
and stretched-link-helper-with-bp()
outputs.
text
Variables
All those variables could be customized depending on what you need in your variables.scss
file.
Here are the default values.
$text-aligns
Define all text align values to support.
$text-aligns: (
center,
justify,
left,
right
) !default;
$text-transforms
Define all text transform values to support.
$text-transforms: (
capitalize,
lowercase,
uppercase
) !default;
$text-important
Set the important property on each rules.
$text-important: true;
Mixins
text-aligns-helper()
Set all text-align classes from the $text-aligns
variable.
@use '@wide/styles-helpers' as helpers;
/*
* $text-aligns variable defined in `variables.scss`
*/
$text-aligns: (
center,
justify,
left,
right
) !default;
/* */
@include helpers.text-aligns-helper;
Output
.text-center {
text-align: center !important;
}
.text-justify {
text-align: justify !important;
}
.text-left {
text-align: left !important;
}
.text-right {
text-align: right !important;
}
text-transforms-helper()
Set all text-transform classes from the $text-transforms
variable.
@use '@wide/styles-helpers' as helpers;
/*
* $text-transforms variable defined in `variables.scss`
*/
$text-transforms: (
capitalize,
lowercase,
uppercase
) !default;
/* */
@include helpers.text-transforms-helper;
Output
.text-capitalize {
text-transform: capitalize !important;
}
.text-lowercase {
text-transform: lowercase !important;
}
.text-uppercase {
text-transform: uppercase !important;
}
text-miscs-helper()
Set text-miscs classes.
@use '@wide/styles-helpers' as helpers;
@include helpers.text-miscs-helper;
Output
.text-decoration-none {
text-decoration: none !important;
}
.text-break {
overflow-wrap: break-word !important;
word-break: break-word !important;
}
.text-truncate {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.text-wrap {
white-space: normal !important;
}
.text-nowrap {
white-space: nowrap !important;
}
.text-reset {
color: inherit !important;
}
text-helper-with-bp()
Combine text-aligns-helper
, text-transforms-helper
and text-miscs-helper
helpers in one helper with breakpoints media queries.
@use '@wide/styles-helpers' as helpers;
@include helpers.text-helper-with-bp;
Output
@media (min-width: 20.375em) and (max-width: 35.99875em) {
.text-center\@xs-only {
text-align: center !important;
}
.text-justify\@xs-only {
text-align: justify !important;
}
.text-left\@xs-only {
text-align: left !important;
}
.text-right\@xs-only {
text-align: right !important;
}
.text-capitalize\@xs-only {
text-transform: capitalize !important;
}
.text-lowercase\@xs-only {
text-transform: lowercase !important;
}
.text-uppercase\@xs-only {
text-transform: uppercase !important;
}
.text-decoration-none\@xs-only {
text-decoration: none !important;
}
.text-break\@xs-only {
overflow-wrap: break-word !important;
word-break: break-word !important;
}
.text-truncate\@xs-only {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.text-wrap\@xs-only {
white-space: normal !important;
}
.text-nowrap\@xs-only {
white-space: nowrap !important;
}
.text-reset\@xs-only {
color: inherit !important;
}
}
/* and so on */
@media (min-width: 36em) {
/*
* .text-center\@sm
* .text-justify\@sm
* .text-left\@sm
* .text-right\@sm
* .text-capitalize\@sm
* .text-lowercase\@sm
* .text-uppercase\@sm
* .text-decoration-none\@sm
* .text-break\@sm
* .text-truncate\@sm
* .text-wrap\@sm
* .text-nowrap\@sm
* .text-reset\@sm
*/
}
@media (min-width: 36em) and (max-width: 47.99875em) {
/*
* .text-center\@sm-only
* .text-justify\@sm-only
* .text-left\@sm-only
* .text-lerightft\@sm-only
* .text-capitalize\@sm-only
* .text-lowercase\@sm-only
* .text-uppercase\@sm-only
* .text-decoration-none\@sm-only
* .text-break\@sm-only
* .text-truncate\@sm-only
* .text-wrap\@sm-only
* .text-nowrap\@sm-only
* .text-reset\@sm-only
*/
}
@media (min-width: 48em) {
/*
* .text-center\@md
* .text-justify\@md
* .text-left\@md
* .text-right\@md
* .text-capitalize\@md
* .text-lowercase\@md
* .text-uppercase\@md
* .text-decoration-none\@md
* .text-break\@md
* .text-truncate\@md
* .text-wrap\@md
* .text-nowrap\@md
* .text-reset\@md
*/
}
@media (min-width: 48em) and (max-width: 63.99875em) {
/*
* .text-center\@md-only
* .text-justify\@md-only
* .text-left\@md-only
* .text-right\@md-only
* .text-capitalize\@md-only
* .text-lowercase\@md-only
* .text-uppercase\@md-only
* .text-decoration-none\@md-only
* .text-break\@md-only
* .text-truncate\@md-only
* .text-wrap\@md-only
* .text-nowrap\@md-only
* .text-reset\@md-only
*/
}
@media (min-width: 64em) {
/*
* .text-center\@lg
* .text-justify\@lg
* .text-left\@lg
* .text-right\@lg
* .text-capitalize\@lg
* .text-lowercase\@lg
* .text-uppercase\@lg
* .text-decoration-none\@lg
* .text-break\@lg
* .text-truncate\@lg
* .text-wrap\@lg
* .text-nowrap\@lg
* .text-reset\@lg
*/
}
@media (min-width: 64em) and (max-width: 74.99875em) {
/*
* .text-center\@lg-only
* .text-justify\@lg-only
* .text-left\@lg-only
* .text-right\@lg-only
* .text-capitalize\@lg-only
* .text-lowercase\@lg-only
* .text-uppercase\@lg-only
* .text-decoration-none\@lg-only
* .text-break\@lg-only
* .text-truncate\@lg-only
* .text-wrap\@lg-only
* .text-nowrap\@lg-only
* .text-reset\@lg-only
*/
}
@media (min-width: 75em) {
/*
* .text-center\@xl
* .text-justify\@xl
* .text-left\@xl
* .text-right\@xl
* .text-capitalize\@xl
* .text-lowercase\@xl
* .text-uppercase\@xl
* .text-decoration-none\@xl
* .text-break\@xl
* .text-truncate\@xl
* .text-wrap\@xl
* .text-nowrap\@xl
* .text-reset\@xl
*/
}
@media (min-width: 75em) and (max-width: 99.99875em) {
/*
* .text-center\@xl-only
* .text-justify\@xl-only
* .text-left\@xl-only
* .text-right\@xl-only
* .text-capitalize\@xl-only
* .text-lowercase\@xl-only
* .text-uppercase\@xl-only
* .text-decoration-none\@xl-only
* .text-break\@xl-only
* .text-truncate\@xl-only
* .text-wrap\@xl-only
* .text-nowrap\@xl-only
* .text-reset\@xl-only
*/
}
@media (min-width: 100em) {
/*
* .text-center\@xxl
* .text-justify\@xxl
* .text-left\@xxl
* .text-right\@xxl
* .text-capitalize\@xxl
* .text-lowercase\@xxl
* .text-uppercase\@xxl
* .text-decoration-none\@xxl
* .text-break\@xxl
* .text-truncate\@xxl
* .text-wrap\@xxl
* .text-nowrap\@xxl
* .text-reset\@xxl
*/
}
@media (min-width: 100em) {
/*
* .text-center\@xxl-only
* .text-justify\@xxl-only
* .text-left\@xxl-only
* .text-right\@xxl-only
* .text-capitalize\@xxl-only
* .text-lowercase\@xxl-only
* .text-uppercase\@xxl-only
* .text-decoration-none\@xxl-only
* .text-break\@xxl-only
* .text-truncate\@xxl-only
* .text-wrap\@xxl-only
* .text-nowrap\@xxl-only
* .text-reset\@xxl-only
*/
}
text()
Helper text
entry point.
Combine text-aligns-helper
, text-transforms-helper
, text-miscs-helper
and text-helper-with-bp
helpers in one helper.
@use '@wide/styles-helpers' as helpers;
@include helpers.text;
// @include helpers.text(false);
Output
See text-aligns-helper()
, text-transforms-helper()
, text-miscs-helper()
and text-helper-with-bp()
outputs.
visibility
Variables
All those variables could be customized depending on what you need in your variables.scss
file.
Here are the default values.
$visibilities
Define all visibility values to support.
$visibilities: (
visible,
hidden
) !default;
$visibilities-important
Set the important property on each rules.
$visibilities-important: true;
$visibilities-prefix
Define the prefix of all visibility classes.
$visibilities-prefix: 'v-';
Mixins
visibility-helper()
Set all visibility classes from the $visibilities
variable.
@use '@wide/styles-helpers' as helpers;
@include helpers.visibility-helper;
Output
.v-visible {
visibility: visible !important;
}
.v-hidden {
visibility: hidden !important;
}
visibility-helper-with-bp()
Set all visibility classes from the $visibilities
variable with breakpoints media queries.
@use '@wide/styles-helpers' as helpers;
@include helpers.visibility-helper-with-bp;
Output
@media (min-width: 20.375em) and (max-width: 35.99875em) {
.v-visible\@xs-only {
visibility: visible !important;
}
.v-hidden\@xs-only {
visibility: hidden !important;
}
}
/* and so on */
@media (min-width: 36em) {
/*
* .v-visible\@sm
* .v-hidden\@sm
*/
}
@media (min-width: 36em) and (max-width: 47.99875em) {
/*
* .v-visible\@sm-only
* .v-hidden\@sm-only
*/
}
@media (min-width: 48em) {
/*
* .v-visible\@md
* .v-hidden\@md
*/
}
@media (min-width: 48em) and (max-width: 63.99875em) {
/*
* .v-visible\@md-only
* .v-hidden\@md-only
*/
}
@media (min-width: 64em) {
/*
* .v-visible\@lg
* .v-hidden\@lg
*/
}
@media (min-width: 64em) and (max-width: 74.99875em) {
/*
* .v-visible\@lg-only
* .v-hidden\@lg-only
*/
}
@media (min-width: 75em) {
/*
* .v-visible\@xl
* .v-hidden\@xl
*/
}
@media (min-width: 75em) and (max-width: 99.99875em) {
/*
* .v-visible\@xl-only
* .v-hidden\@xl-only
*/
}
@media (min-width: 100em) {
/*
* .v-visible\@xxl
* .v-hidden\@xxl
*/
}
@media (min-width: 100em) {
/*
* .v-visible\@xxl-only
* .v-hidden\@xxl-only
*/
}
visibility-print-helper()
Set all visibility classes from the $visibilities
variable in print media query.
@use '@wide/styles-helpers' as helpers;
@include helpers.visibility-print-helper;
Output
@media print {
/*
* .v-visible
* .v-hidden
*/
}
visibility-screen-helper()
Set all visibility classes from the $visibilities
variable in screen media query.
@use '@wide/styles-helpers' as helpers;
@include helpers.visibility-screen-helper;
Output
@media screen {
/*
* .v-visible
* .v-hidden
*/
}
visibility()
Helper visibility
entry point.
Combine both visibility-helper
and visibility-helper-with-bp
helpers in one helper.
@use '@wide/styles-helpers' as helpers;
@include helpers.visibility;
// @include helpers.visibility(false);
Parameters
Type | Description | Mandatory | Default |
---|---|---|---|
Boolean |
Use visibility-helper-with-bp()
|
false |
true |
Output
See visibility-helper
and visibility-helper-with-bp
outputs.
Authors
- Aymeric Assier - github.com/myeti
- Julien Martins Da Costa - github.com/jdacosta
Contributors
- Sébastien Robillard - github.com/robiseb
Resources
License
This project is licensed under the MIT License - see the licence file for details