primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-12-23 22:24:11 +03:00
Code Issues Projects Releases Wiki Activity

Merge pull request #1254 from primer/tobiasahlin/add-common-utilities

Browse Source 
Add common marketing utilities to primer/marketing
This commit is contained in:
Jon Rohan 2021-03-26 09:07:24 -07:00 committed by GitHub
commit a80b892216
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 43 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/nervous-plants-smell.md Normal file
View File

@ -0,0 +1,5 @@
---
"@primer/css": minor
---
Add common marketing utilities to primer/marketing

1
src/marketing/support/variables.scss
View File

@ -8,6 +8,7 @@ $h000-size-mobile: 48px !default;
// Animations
$transition-time: 0.4s !default;
$ease-mktg: cubic-bezier(0.16, 1, 0.3, 1) !default;
// Increases the core spacing scale first by 8px for $spacer-7, then by 16px
// increments from $spacer-8 to $spacer-12, i.e. after 40px, we have 48, 64,

9
src/marketing/utilities/animations.scss Normal file
View File

@ -0,0 +1,9 @@
// Animation utilities for marketing
.hover-grow-mktg {
transition: transform 0.4s $ease-mktg;
&:hover {
transform: scale3d(1.025, 1.025, 1.025);
}
}

3
src/marketing/utilities/index.scss
View File

@ -1,7 +1,8 @@
@import "../support/index.scss";
// utilities
@import "./filters.scss";
@import "./animations.scss";
@import "./borders.scss";
@import "./filters.scss";
@import "./layout.scss";
@import "./margin.scss";
@import "./misc.scss";

17
src/marketing/utilities/layout.scss
View File

@ -27,3 +27,20 @@
}
}
}
// Width and height utilities, especially needed when the
// dimensions of an image are set in HTML
.width-auto { width: auto !important; }
.height-auto { height: auto !important; }
// Make an object fill its parent
.object-fit-cover { object-fit: cover !important; }
// Handling z-index
.z-1 { z-index: 1 !important; }
.z-2 { z-index: 2 !important; }
.z-3 { z-index: 3 !important; }
// Negative z-index
.z-n1 { z-index: -1 !important; }
.z-n2 { z-index: -2 !important; }

9
src/marketing/utilities/margin.scss
View File

@ -8,6 +8,9 @@
.mt#{$variant}-#{$scale} { margin-top: $size !important; }
.mb#{$variant}-#{$scale} { margin-bottom: $size !important; }
.mt#{$variant}-n#{$scale} { margin-top: -$size !important; }
.mb#{$variant}-n#{$scale} { margin-bottom: -$size !important; }
.my#{$variant}-#{$scale} {
margin-top: $size !important;
margin-bottom: $size !important;
@ -15,3 +18,9 @@
}
}
}
.mt-auto {
margin-top: auto !important;
}
.m-auto { margin: auto !important; }