mirror of
https://github.com/wagtail/wagtail.git
synced 2024-11-29 17:36:49 +01:00
14280ad7ea
- Rewrite all styles to use logical properties - Update Stylelint configuration to include logical properties checks
76 lines
2.0 KiB
SCSS
76 lines
2.0 KiB
SCSS
@use 'sass:math';
|
|
|
|
// Utility variable - you should never need to modify this
|
|
$padding: math.div($grid-gutter-width, 2);
|
|
|
|
// Our row container
|
|
@mixin row($padding: 0) {
|
|
@include clearfix();
|
|
box-sizing: border-box;
|
|
display: block;
|
|
margin-inline-end: auto;
|
|
margin-inline-start: auto;
|
|
padding-inline-end: $padding;
|
|
padding-inline-start: $padding;
|
|
}
|
|
|
|
@mixin row-flush() {
|
|
margin-inline-start: -$padding;
|
|
margin-inline-end: -$padding;
|
|
}
|
|
|
|
// Our column container
|
|
@mixin column($x, $padding: $padding, $grid-columns: $grid-columns) {
|
|
box-sizing: border-box;
|
|
display: inline;
|
|
float: left;
|
|
width: 100% * math.div($x, $grid-columns);
|
|
padding-inline-end: $padding;
|
|
padding-inline-start: $padding;
|
|
}
|
|
|
|
@mixin table-column($x, $padding: $padding, $grid-columns: $grid-columns) {
|
|
box-sizing: border-box;
|
|
width: 100% * math.div($x, $grid-columns);
|
|
}
|
|
|
|
// Push adds left padding
|
|
@mixin push($offset: 1, $grid-columns: $grid-columns) {
|
|
margin-inline-start: 100% * math.div($offset, $grid-columns);
|
|
}
|
|
|
|
@mixin push-padding($offset: 1, $grid-columns: $grid-columns) {
|
|
padding-inline-start: 100% * math.div($offset, $grid-columns);
|
|
}
|
|
|
|
// Pull adds right padding
|
|
@mixin pull($offset: 1, $grid-columns: $grid-columns) {
|
|
margin-inline-end: 100% * math.div($offset, $grid-columns);
|
|
}
|
|
|
|
@mixin pull-padding($offset: 1, $grid-columns: $grid-columns) {
|
|
padding-inline-end: 100% * math.div($offset, $grid-columns);
|
|
}
|
|
|
|
// only used in places where padding not applied to same elements as row or row-flush
|
|
// most of the time this class should be applied directly to the html elements
|
|
@mixin nice-padding {
|
|
padding-inline-start: $mobile-nice-padding;
|
|
padding-inline-end: $mobile-nice-padding;
|
|
|
|
@include media-breakpoint-up(sm) {
|
|
padding-inline-start: $desktop-nice-padding;
|
|
padding-inline-end: $desktop-nice-padding;
|
|
}
|
|
}
|
|
|
|
@mixin nice-margin {
|
|
margin-inline-start: $mobile-nice-padding;
|
|
margin-inline-end: $mobile-nice-padding;
|
|
|
|
@include media-breakpoint-up(sm) {
|
|
margin-inline-start: $desktop-nice-padding;
|
|
margin-inline-end: $desktop-nice-padding;
|
|
}
|
|
}
|