Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added utility classes to remove horizontal and vertical spacing #735

Merged
merged 2 commits into from
Jan 16, 2024
Merged

Added utility classes to remove horizontal and vertical spacing #735

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
897f7a6
Added classes to remove horizontal and vertical padding
scottanthonymurray Jan 12, 2024
8d45057
Added classes to remove vertical and horizontal margins
scottanthonymurray Jan 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions src/sandbox/utilities/spacing/examples/remove-margin.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
---
tags: spacing
title: Remove margin
layout: layouts/preview.njk
permalink: /utilities/preview/{{ title | slug}}/
margin: true
order: 7
---
<div class="rvt-m-all-xxl rvt-m-top-none rvt-bg-black-100">No top margin</div>
<hr>
<div class="rvt-m-all-xxl rvt-m-bottom-none rvt-bg-black-100">No bottom margin</div>
<hr>
<div class="rvt-m-all-xxl rvt-m-left-none rvt-bg-black-100">No left margin</div>
<hr>
<div class="rvt-m-all-xxl rvt-m-right-none rvt-bg-black-100">No right margin</div>
<hr>
<div class="rvt-m-all-xxl rvt-m-tb-none rvt-bg-black-100">No vertical margin</div>
<hr>
<div class="rvt-m-all-xxl rvt-m-lr-none rvt-bg-black-100">No horizontal margin</div>
16 changes: 16 additions & 0 deletions src/sandbox/utilities/spacing/examples/remove-padding.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
---
tags: spacing
title: Remove padding
layout: layouts/preview.njk
permalink: /utilities/preview/{{ title | slug}}/
padding: true
order: 6
---
<div class="rvt-flow">
<div class="rvt-p-all-xxl rvt-p-top-none rvt-border-all">No top padding</div>
<div class="rvt-p-all-xxl rvt-p-bottom-none rvt-border-all">No bottom padding</div>
<div class="rvt-p-all-xxl rvt-p-left-none rvt-border-all">No left padding</div>
<div class="rvt-p-all-xxl rvt-p-right-none rvt-border-all">No right padding</div>
<div class="rvt-p-all-xxl rvt-p-tb-none rvt-border-all">No vertical padding</div>
<div class="rvt-p-all-xxl rvt-p-lr-none rvt-border-all">No horizontal padding</div>
</div>
28 changes: 26 additions & 2 deletions src/sass/utilities/_spacing.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,15 +32,15 @@ $spacing-sizes: (
-4-xl: $spacing-4-xl
);

// Super gnarly loop here, but it save sooo much time
// Super gnarly loop here, but it saves sooo much time

// Based on this great example by Harry Roberts:
// /~https://github.com/NHSLeadership/nightingale/blob/develop/utilities/_utilities.spacing.scss#L48

@each $direction in $spacing-directions {
@each $size, $value in $spacing-sizes {
// NOTE: We use !important here because we want these utilities to always
// produced the same result.
// produce the same result.

// If the direction is "null", add margin to all directions.
@if $direction == null {
Expand Down Expand Up @@ -166,10 +166,34 @@ $spacing-sizes: (
margin: 0 !important;
}

.#{$prefix}-m-tb-remove,
.#{$prefix}-m-tb-none {
margin-top: 0 !important;
margin-bottom: 0 !important;
}

.#{$prefix}-m-lr-remove,
.#{$prefix}-m-lr-none {
margin-left: 0 !important;
margin-right: 0 !important;
}

.#{$prefix}-p-all-remove,
.#{$prefix}-p-all-none {
padding: 0 !important;
}

.#{$prefix}-p-tb-remove,
.#{$prefix}-p-tb-none {
padding-top: 0 !important;
padding-bottom: 0 !important;
}

.#{$prefix}-p-lr-remove,
.#{$prefix}-p-lr-none {
padding-left: 0 !important;
padding-right: 0 !important;
}
}

@else {
Expand Down