diff options
Diffstat (limited to 'assets/sass/@primer/css/utilities')
| -rw-r--r-- | assets/sass/@primer/css/utilities/README.md | 25 | ||||
| -rw-r--r-- | assets/sass/@primer/css/utilities/animations.scss | 183 | ||||
| -rw-r--r-- | assets/sass/@primer/css/utilities/borders.scss | 116 | ||||
| -rw-r--r-- | assets/sass/@primer/css/utilities/box-shadow.scss | 25 | ||||
| -rw-r--r-- | assets/sass/@primer/css/utilities/colors.scss | 115 | ||||
| -rw-r--r-- | assets/sass/@primer/css/utilities/details.scss | 28 | ||||
| -rw-r--r-- | assets/sass/@primer/css/utilities/flexbox.scss | 51 | ||||
| -rw-r--r-- | assets/sass/@primer/css/utilities/index.scss | 14 | ||||
| -rw-r--r-- | assets/sass/@primer/css/utilities/layout.scss | 87 | ||||
| -rw-r--r-- | assets/sass/@primer/css/utilities/margin.scss | 50 | ||||
| -rw-r--r-- | assets/sass/@primer/css/utilities/padding.scss | 49 | ||||
| -rw-r--r-- | assets/sass/@primer/css/utilities/typography.scss | 255 | ||||
| -rw-r--r-- | assets/sass/@primer/css/utilities/visibility-display.scss | 74 |
13 files changed, 1072 insertions, 0 deletions
diff --git a/assets/sass/@primer/css/utilities/README.md b/assets/sass/@primer/css/utilities/README.md new file mode 100644 index 0000000..95eade2 --- /dev/null +++ b/assets/sass/@primer/css/utilities/README.md @@ -0,0 +1,25 @@ +--- +bundle: "utilities" +generated: true +--- + +# Primer CSS: `utilities` bundle + +## Usage + +Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with: + +```scss +@import "@primer/css/utilities/index.scss"; +``` + +## Build + +The `@primer/css` npm package includes a standalone CSS build of this module in `dist/utilities.css`. + +## License + +[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/) + + +[scss]: https://sass-lang.com/documentation/syntax#scss diff --git a/assets/sass/@primer/css/utilities/animations.scss b/assets/sass/@primer/css/utilities/animations.scss new file mode 100644 index 0000000..bb1422e --- /dev/null +++ b/assets/sass/@primer/css/utilities/animations.scss @@ -0,0 +1,183 @@ +// This file contains reusable animations for github. + +/* Fade in an element */ +.anim-fade-in { + animation-name: fade-in; + animation-duration: 1s; + animation-timing-function: ease-in-out; + + &.fast { + animation-duration: 300ms; + } +} + +@keyframes fade-in { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} + +/* Fade out an element */ +.anim-fade-out { + animation-name: fade-out; + animation-duration: 1s; + animation-timing-function: ease-out; + + &.fast { + animation-duration: 0.3s; + } +} + +@keyframes fade-out { + 0% { + opacity: 1; + } + + 100% { + opacity: 0; + } +} + +/* Fade in and slide up an element */ +.anim-fade-up { + opacity: 0; + animation-name: fade-up; + animation-duration: 0.3s; + animation-fill-mode: forwards; + animation-timing-function: ease-out; + animation-delay: 1s; +} + +@keyframes fade-up { + 0% { + opacity: 0.8; + transform: translateY(100%); + } + + 100% { + opacity: 1; + transform: translateY(0); + } +} + +/* Fade an element out and slide down */ +.anim-fade-down { + animation-name: fade-down; + animation-duration: 0.3s; + animation-fill-mode: forwards; + animation-timing-function: ease-in; +} + +@keyframes fade-down { + 0% { + opacity: 1; + transform: translateY(0); + } + + 100% { + opacity: 0.5; + transform: translateY(100%); + } +} + +/* Grow an element width from 0 to 100% */ +.anim-grow-x { + width: 0%; + animation-name: grow-x; + animation-duration: 0.3s; + animation-fill-mode: forwards; + animation-timing-function: ease; + animation-delay: 0.5s; +} + +@keyframes grow-x { + to { width: 100%; } +} + +/* Shrink an element from 100% to 0% */ +.anim-shrink-x { + animation-name: shrink-x; + animation-duration: 0.3s; + animation-fill-mode: forwards; + animation-timing-function: ease-in-out; + animation-delay: 0.5s; +} + +@keyframes shrink-x { + to { width: 0%; } +} + +/* Fade in an element and scale it fast */ +.anim-scale-in { + animation-name: scale-in; + animation-duration: 0.15s; + animation-timing-function: cubic-bezier(0.2, 0, 0.13, 1.5); +} + +@keyframes scale-in { + 0% { + opacity: 0; + transform: scale(0.5); + } + + 100% { + opacity: 1; + transform: scale(1); + } +} + +/* Pulse an element's opacity */ +.anim-pulse { + animation-name: pulse; + animation-duration: 2s; + animation-timing-function: linear; + animation-iteration-count: infinite; +} + +@keyframes pulse { + 0% { + opacity: 0.3; + } + + 10% { + opacity: 1; + } + + 100% { + opacity: 0.3; + } +} + +/* Pulse in an element */ +.anim-pulse-in { + animation-name: pulse-in; + animation-duration: 0.5s; +} + +@keyframes pulse-in { + 0% { + transform: scale3d(1, 1, 1); + } + + 50% { + transform: scale3d(1.1, 1.1, 1.1); + } + + 100% { + transform: scale3d(1, 1, 1); + } +} + +/* Increase scale of an element on hover */ +.hover-grow { + transition: transform 0.3s; + backface-visibility: hidden; + + &:hover { + transform: scale(1.025); + } +} diff --git a/assets/sass/@primer/css/utilities/borders.scss b/assets/sass/@primer/css/utilities/borders.scss new file mode 100644 index 0000000..d3df5ae --- /dev/null +++ b/assets/sass/@primer/css/utilities/borders.scss @@ -0,0 +1,116 @@ +// Core border utilities +// stylelint-disable block-opening-brace-space-before, comment-empty-line-before + +/* Add a gray border to the left and right */ +.border-x { + border-right: $border !important; + border-left: $border !important; +} + +/* Add a gray border to the top and bottom */ +.border-y { + border-top: $border !important; + border-bottom: $border !important; +} + +/* Responsive gray borders */ +@each $breakpoint, $variant in $responsive-variants { + @include breakpoint($breakpoint) { + /* Add a gray border on all sides at/above this breakpoint */ + .border#{$variant} { border: $border !important; } + /* Set the border width to 0 on all sides at/above this breakpoint */ + .border#{$variant}-0 { border: 0 !important; } + + /* Add a gray border to the top */ + .border#{$variant}-top { border-top: $border !important; } + /* Add a gray border to the right */ + .border#{$variant}-right { border-right: $border !important; } + /* Add a gray border to the bottom */ + .border#{$variant}-bottom { border-bottom: $border !important; } + /* Add a gray border to the left */ + .border#{$variant}-left { border-left: $border !important; } + + /* Remove the top border */ + .border#{$variant}-top-0 { border-top: 0 !important; } + /* Remove the right border */ + .border#{$variant}-right-0 { border-right: 0 !important; } + /* Remove the bottom border */ + .border#{$variant}-bottom-0 { border-bottom: 0 !important; } + /* Remove the left border */ + .border#{$variant}-left-0 { border-left: 0 !important; } + + // Rounded corners + /* Remove the border-radius */ + .rounded#{$variant}-0 { border-radius: 0 !important; } + /* Add a border-radius to all corners */ + .rounded#{$variant}-1 { border-radius: $border-radius !important; } + /* Add a 2x border-radius to all corners */ + .rounded#{$variant}-2 { border-radius: $border-radius * 2 !important; } + + @each $edge, $corners in $edges { + .rounded#{$variant}-#{$edge}-0 { + @each $corner in $corners { + border-#{$corner}-radius: 0 !important; + } + } + + .rounded#{$variant}-#{$edge}-1 { + @each $corner in $corners { + border-#{$corner}-radius: $border-radius !important; + } + } + + .rounded#{$variant}-#{$edge}-2 { + @each $corner in $corners { + border-#{$corner}-radius: $border-radius * 2 !important; + } + } + } + } +} + +/* Add a 50% border-radius to make something into a circle */ +.circle { border-radius: 50% !important; } + +/* Change the border style to dashed, in conjunction with another utility */ +.border-dashed { + // stylelint-disable-next-line primer/borders + border-style: dashed !important; +} + +/* Use with .border to turn the border blue */ +.border-blue { border-color: $border-blue !important; } +/* Use with .border to turn the border blue-light */ +.border-blue-light { border-color: $border-blue-light !important; } +/* Use with .border to turn the border green */ +.border-green { border-color: $border-green !important; } +/* Use with .border to turn the border green light */ +.border-green-light { border-color: $border-green-light !important; } +/* Use with .border to turn the border red */ +.border-red { border-color: $border-red !important; } +/* Use with .border to turn the border red-light */ +.border-red-light { border-color: $border-red-light !important; } +/* Use with .border to turn the border purple */ +.border-purple { border-color: $border-purple !important; } +/* Use with .border to turn the border yellow */ +.border-yellow { border-color: $border-yellow !important; } +/* Use with .border to turn the border gray-light */ +.border-gray-light { border-color: $border-gray-light !important; } +/* Use with .border to turn the border gray-dark */ +.border-gray-dark { border-color: $border-gray-dark !important; } + +/* Use with .border to turn the border rgba black 0.15 */ +.border-black-fade { border-color: $border-black-fade !important; } +/* Use with .border to turn the border rgba white 0.15 */ +.border-white-fade { border-color: $border-white-fade !important; } + +/* Use with .border to turn the border white w/varying transparency */ +.border-white-fade-15 { border-color: $border-white-fade !important; } +// stylelint-disable-next-line primer/borders +.border-white-fade-30 { border-color: $white-fade-30 !important; } +// stylelint-disable-next-line primer/borders +.border-white-fade-50 { border-color: $white-fade-50 !important; } +// stylelint-disable-next-line primer/borders +.border-white-fade-70 { border-color: $white-fade-70 !important; } +// stylelint-disable-next-line primer/borders +.border-white-fade-85 { border-color: $white-fade-85 !important; } diff --git a/assets/sass/@primer/css/utilities/box-shadow.scss b/assets/sass/@primer/css/utilities/box-shadow.scss new file mode 100644 index 0000000..fb5b1d6 --- /dev/null +++ b/assets/sass/@primer/css/utilities/box-shadow.scss @@ -0,0 +1,25 @@ +// Box shadow utilities + +// Box shadows + +.box-shadow { + box-shadow: $box-shadow !important; +} + +.box-shadow-medium { + box-shadow: $box-shadow-medium !important; +} + +.box-shadow-large { + box-shadow: $box-shadow-large !important; +} + +.box-shadow-extra-large { + box-shadow: $box-shadow-extra-large !important; +} + +// Turn off box shadow + +.box-shadow-none { + box-shadow: none !important; +} diff --git a/assets/sass/@primer/css/utilities/colors.scss b/assets/sass/@primer/css/utilities/colors.scss new file mode 100644 index 0000000..0864f8f --- /dev/null +++ b/assets/sass/@primer/css/utilities/colors.scss @@ -0,0 +1,115 @@ +// Color utilities +// stylelint-disable block-opening-brace-space-before, comment-empty-line-before + +// background colors +/* Set the background to $bg-white */ +.bg-white { background-color: $bg-white !important; } +/* Set the background to $bg-blue */ +.bg-blue { background-color: $bg-blue !important; } +/* Set the background to $bg-blue-light */ +.bg-blue-light { background-color: $bg-blue-light !important; } +/* Set the background to $bg-gray-dark */ +.bg-gray-dark { background-color: $bg-gray-dark !important; } +/* Set the background to $bg-gray */ +.bg-gray { background-color: $bg-gray !important; } +/* Set the background to $bg-gray-light */ +.bg-gray-light { background-color: $bg-gray-light !important; } +/* Set the background to $bg-green */ +.bg-green { background-color: $bg-green !important; } +/* Set the background to $bg-green-light */ +.bg-green-light { background-color: $bg-green-light !important; } +/* Set the background to $bg-red */ +.bg-red { background-color: $bg-red !important; } +/* Set the background to $bg-red-light */ +.bg-red-light { background-color: $bg-red-light !important; } +/* Set the background to $bg-yellow */ +.bg-yellow { background-color: $bg-yellow !important; } +/* Set the background to $bg-yellow-light */ +.bg-yellow-light { background-color: $bg-yellow-light !important; } +/* Set the background to $bg-yellow-dark */ +.bg-yellow-dark { background-color: $bg-yellow-dark !important; } +/* Set the background to $bg-purple */ +.bg-purple { background-color: $bg-purple !important; } +/* Set the background to $bg-pink */ +.bg-pink { background-color: $bg-pink !important; } +/* Set the background to $bg-purple-light */ +.bg-purple-light { background-color: $bg-purple-light !important; } + +// Generate a foreground and background utility for every shade of every hue +@each $hue, $shades in $hue-maps { + @each $index, $color in $shades { + .color-#{$hue}-#{$index} { color: $color !important; } + .bg-#{$hue}-#{$index} { background-color: $color !important; } + } +} + +.bg-shade-gradient { + background-image: linear-gradient(180deg, rgba($black, 0.065), rgba($black, 0)) !important; + background-repeat: no-repeat !important; + background-size: 100% 200px !important; +} + +// text colors +/* Set the text color to $text-blue */ +.text-blue { color: $text-blue !important; } +/* Set the text color to $text-red */ +.text-red { color: $text-red !important; } +/* Set the text color to $text-gray-light */ +.text-gray-light { color: $text-gray-light !important; } +/* Set the text color to $text-gray */ +.text-gray { color: $text-gray !important; } +/* Set the text color to $text-gray-dark */ +.text-gray-dark { color: $text-gray-dark !important; } +/* Set the text color to $text-green */ +.text-green { color: $text-green !important; } +/* Set the text color to $text-yellow */ +.text-yellow { color: $text-yellow !important; } +/* Set the text color to $text-orange */ +.text-orange { color: $text-orange !important; } +/* Set the text color to $text-orange-light */ +.text-orange-light { color: $text-orange-light !important; } +/* Set the text color to $text-purple */ +.text-purple { color: $text-purple !important; } +/* Set the text color to $text-pink */ +.text-pink { color: $text-pink !important; } +/* Set the text color to $text-white */ +.text-white { color: $text-white !important; } +/* Set the text color to inherit */ +.text-inherit { color: inherit !important; } + +// Link colors +// Sets the links color to $text-gray and $text-blue on hover +.link-gray { + color: $text-gray !important; + + &:hover { + color: $text-blue !important; + } +} + +// Sets the links color to $text-gray-dark and $text-blue on hover +.link-gray-dark { + color: $text-gray-dark !important; + + &:hover { + color: $text-blue !important; + } +} + +/* Set the link color to $text-blue on hover + Useful when you want only part of a link to turn blue on hover */ +.link-hover-blue { + &:hover { + color: $text-blue !important; + } +} + +/* Make a link $text-gray, then $text-blue on hover and removes the underline */ +.muted-link { + color: $text-gray !important; + + &:hover { + color: $text-blue !important; + text-decoration: none; + } +} diff --git a/assets/sass/@primer/css/utilities/details.scss b/assets/sass/@primer/css/utilities/details.scss new file mode 100644 index 0000000..935bc05 --- /dev/null +++ b/assets/sass/@primer/css/utilities/details.scss @@ -0,0 +1,28 @@ +// stylelint-disable selector-max-type + +.details-overlay[open] > summary::before { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 80; + display: block; + cursor: default; + content: " "; + background: transparent; +} + +.details-overlay-dark[open] > summary::before { + z-index: 99; + background: $bg-black-fade; +} + +.details-reset { + // Remove marker added by the display: list-item browser default + > summary { list-style: none; } + // Remove marker added by details polyfill + > summary::before { display: none; } + // Remove marker added by Chrome + > summary::-webkit-details-marker { display: none; } +} diff --git a/assets/sass/@primer/css/utilities/flexbox.scss b/assets/sass/@primer/css/utilities/flexbox.scss new file mode 100644 index 0000000..a0cd73a --- /dev/null +++ b/assets/sass/@primer/css/utilities/flexbox.scss @@ -0,0 +1,51 @@ +// Flex utility classes +// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before +@each $breakpoint, $variant in $responsive-variants { + @include breakpoint($breakpoint) { + // Flexbox classes + // Container + .flex#{$variant}-row { flex-direction: row !important; } + .flex#{$variant}-row-reverse { flex-direction: row-reverse !important; } + .flex#{$variant}-column { flex-direction: column !important; } + .flex#{$variant}-column-reverse { flex-direction: column-reverse !important; } + + .flex#{$variant}-wrap { flex-wrap: wrap !important; } + .flex#{$variant}-nowrap { flex-wrap: nowrap !important; } + + .flex#{$variant}-justify-start { justify-content: flex-start !important; } + .flex#{$variant}-justify-end { justify-content: flex-end !important; } + .flex#{$variant}-justify-center { justify-content: center !important; } + .flex#{$variant}-justify-between { justify-content: space-between !important; } + .flex#{$variant}-justify-around { justify-content: space-around !important; } + + .flex#{$variant}-items-start { align-items: flex-start !important; } + .flex#{$variant}-items-end { align-items: flex-end !important; } + .flex#{$variant}-items-center { align-items: center !important; } + .flex#{$variant}-items-baseline { align-items: baseline !important; } + .flex#{$variant}-items-stretch { align-items: stretch !important; } + + .flex#{$variant}-content-start { align-content: flex-start !important; } + .flex#{$variant}-content-end { align-content: flex-end !important; } + .flex#{$variant}-content-center { align-content: center !important; } + .flex#{$variant}-content-between { align-content: space-between !important; } + .flex#{$variant}-content-around { align-content: space-around !important; } + .flex#{$variant}-content-stretch { align-content: stretch !important; } + + // Item + .flex#{$variant}-1 { flex: 1 !important; } + .flex#{$variant}-auto { flex: auto !important; } + .flex#{$variant}-grow-0 { flex-grow: 0 !important; } + .flex#{$variant}-shrink-0 { flex-shrink: 0 !important; } + + .flex#{$variant}-self-auto { align-self: auto !important; } + .flex#{$variant}-self-start { align-self: flex-start !important; } + .flex#{$variant}-self-end { align-self: flex-end !important; } + .flex#{$variant}-self-center { align-self: center !important; } + .flex#{$variant}-self-baseline { align-self: baseline !important; } + .flex#{$variant}-self-stretch { align-self: stretch !important; } + + .flex#{$variant}-order-1 { order: 1 !important; } + .flex#{$variant}-order-2 { order: 2 !important; } + .flex#{$variant}-order-none { order: inherit !important; } + } +} diff --git a/assets/sass/@primer/css/utilities/index.scss b/assets/sass/@primer/css/utilities/index.scss new file mode 100644 index 0000000..7d68a09 --- /dev/null +++ b/assets/sass/@primer/css/utilities/index.scss @@ -0,0 +1,14 @@ +@import "../support/index.scss"; +// utilities +@import "./animations.scss"; +@import "./borders.scss"; +@import "./box-shadow.scss"; +@import "./colors.scss"; +@import "./details.scss"; +@import "./flexbox.scss"; +@import "./layout.scss"; +@import "./margin.scss"; +@import "./padding.scss"; +@import "./typography.scss"; +// Visibility and display should always come last in the imports so that they override other utilities with !important +@import "./visibility-display.scss"; diff --git a/assets/sass/@primer/css/utilities/layout.scss b/assets/sass/@primer/css/utilities/layout.scss new file mode 100644 index 0000000..1b4da95 --- /dev/null +++ b/assets/sass/@primer/css/utilities/layout.scss @@ -0,0 +1,87 @@ +// Layout +// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before, comment-empty-line-before + +// Loop through the breakpoint values +@each $breakpoint, $variant in $responsive-variants { + @include breakpoint($breakpoint) { + @each $position in $responsive-positions { + .position#{$variant}-#{$position} { + position: $position !important; + } + } + } +} + +/* Set top 0 */ +.top-0 { top: 0 !important; } +/* Set right 0 */ +.right-0 { right: 0 !important; } +/* Set bottom 0 */ +.bottom-0 { bottom: 0 !important; } +/* Set left 0 */ +.left-0 { left: 0 !important; } + +/* Vertical align middle */ +.v-align-middle { vertical-align: middle !important; } +/* Vertical align top */ +.v-align-top { vertical-align: top !important; } +/* Vertical align bottom */ +.v-align-bottom { vertical-align: bottom !important; } +/* Vertical align to the top of the text */ +.v-align-text-top { vertical-align: text-top !important; } +/* Vertical align to the bottom of the text */ +.v-align-text-bottom { vertical-align: text-bottom !important; } +/* Vertical align to the parent's baseline */ +.v-align-baseline { vertical-align: baseline !important; } + +// Overflow utilities +@each $overflow in (visible, hidden, auto, scroll) { + .overflow-#{$overflow} { overflow: $overflow !important; } + .overflow-x-#{$overflow} { overflow-x: $overflow !important; } + .overflow-y-#{$overflow} { overflow-y: $overflow !important; } +} + +// Clear floats +/* Clear floats around the element */ +.clearfix { + @include clearfix; +} + +// Floats +@each $breakpoint, $variant in $responsive-variants { + @include breakpoint($breakpoint) { + /* Float to the left */ + .float#{$variant}-left { float: left !important; } + /* Float to the right */ + .float#{$variant}-right { float: right !important; } + /* No float */ + .float#{$variant}-none { float: none !important; } + } +} + +// Width and height utilities, helpful in combination +// with display-table utilities and images +/* Max width 100% */ +.width-fit { max-width: 100% !important; } +/* Set the width to 100% */ +.width-full { width: 100% !important; } +/* Max height 100% */ +.height-fit { max-height: 100% !important; } +/* Set the height to 100% */ +.height-full { height: 100% !important; } + +/* Remove min-width from element */ +.min-width-0 { min-width: 0 !important; } + +@each $breakpoint, $variant in $responsive-variants { + @include breakpoint($breakpoint) { + + // Auto varients + .width#{$variant}-auto { width: auto !important; } + + /* Set the direction to rtl */ + .direction#{$variant}-rtl { direction: rtl !important; } + /* Set the direction to ltr */ + .direction#{$variant}-ltr { direction: ltr !important; } + } +} diff --git a/assets/sass/@primer/css/utilities/margin.scss b/assets/sass/@primer/css/utilities/margin.scss new file mode 100644 index 0000000..2212e91 --- /dev/null +++ b/assets/sass/@primer/css/utilities/margin.scss @@ -0,0 +1,50 @@ +// Margin spacer utilities +// stylelint-disable block-opening-brace-space-before, declaration-colon-space-before, comment-empty-line-before + +// Loop through the breakpoint values +@each $breakpoint, $variant in $responsive-variants { + @include breakpoint($breakpoint) { + // Loop through the spacer values + @each $scale, $size in $spacer-map { + /* Set a $size margin to all sides at $breakpoint */ + .m#{$variant}-#{$scale} { margin: $size !important; } + /* Set a $size margin on the top at $breakpoint */ + .mt#{$variant}-#{$scale} { margin-top: $size !important; } + /* Set a $size margin on the right at $breakpoint */ + .mr#{$variant}-#{$scale} { margin-right: $size !important; } + /* Set a $size margin on the bottom at $breakpoint */ + .mb#{$variant}-#{$scale} { margin-bottom: $size !important; } + /* Set a $size margin on the left at $breakpoint */ + .ml#{$variant}-#{$scale} { margin-left: $size !important; } + + @if ($size != 0) { + /* Set a negative $size margin on top at $breakpoint */ + .mt#{$variant}-n#{$scale} { margin-top : -$size !important; } + /* Set a negative $size margin on the right at $breakpoint */ + .mr#{$variant}-n#{$scale} { margin-right : -$size !important; } + /* Set a negative $size margin on the bottom at $breakpoint */ + .mb#{$variant}-n#{$scale} { margin-bottom: -$size !important; } + /* Set a negative $size margin on the left at $breakpoint */ + .ml#{$variant}-n#{$scale} { margin-left : -$size !important; } + } + + /* Set a $size margin on the left & right at $breakpoint */ + .mx#{$variant}-#{$scale} { + margin-right: $size !important; + margin-left: $size !important; + } + + /* Set a $size margin on the top & bottom at $breakpoint */ + .my#{$variant}-#{$scale} { + margin-top: $size !important; + margin-bottom: $size !important; + } + } + + /* responsive horizontal auto margins */ + .mx#{$variant}-auto { + margin-right: auto !important; + margin-left: auto !important; + } + } +} diff --git a/assets/sass/@primer/css/utilities/padding.scss b/assets/sass/@primer/css/utilities/padding.scss new file mode 100644 index 0000000..9914bb8 --- /dev/null +++ b/assets/sass/@primer/css/utilities/padding.scss @@ -0,0 +1,49 @@ +// Padding spacer utilities +// stylelint-disable block-opening-brace-space-before, declaration-colon-space-before, comment-empty-line-before + +// Responsive padding spacer utilities +@each $breakpoint, $variant in $responsive-variants { + @include breakpoint($breakpoint) { + // Loop through the spacer values + @each $scale, $size in $spacer-map { + /* Set a $size padding to all sides at $breakpoint */ + .p#{$variant}-#{$scale} { padding: $size !important; } + /* Set a $size padding to the top at $breakpoint */ + .pt#{$variant}-#{$scale} { padding-top: $size !important; } + /* Set a $size padding to the right at $breakpoint */ + .pr#{$variant}-#{$scale} { padding-right: $size !important; } + /* Set a $size padding to the bottom at $breakpoint */ + .pb#{$variant}-#{$scale} { padding-bottom: $size !important; } + /* Set a $size padding to the left at $breakpoint */ + .pl#{$variant}-#{$scale} { padding-left: $size !important; } + + /* Set a $size padding to the left & right at $breakpoint */ + .px#{$variant}-#{$scale} { + padding-right: $size !important; + padding-left: $size !important; + } + + /* Set a $size padding to the top & bottom at $breakpoint */ + .py#{$variant}-#{$scale} { + padding-top: $size !important; + padding-bottom: $size !important; + } + } + } +} + +// responsive padding for containers +.p-responsive { + padding-right: $spacer-3 !important; + padding-left: $spacer-3 !important; + + @include breakpoint(sm) { + padding-right: $spacer-6 !important; + padding-left: $spacer-6 !important; + } + + @include breakpoint(lg) { + padding-right: $spacer-3 !important; + padding-left: $spacer-3 !important; + } +} diff --git a/assets/sass/@primer/css/utilities/typography.scss b/assets/sass/@primer/css/utilities/typography.scss new file mode 100644 index 0000000..f790a71 --- /dev/null +++ b/assets/sass/@primer/css/utilities/typography.scss @@ -0,0 +1,255 @@ +// stylelint-disable block-closing-brace-space-before, comment-empty-line-before + +// Type scale variables found in ../support/lib/variables.scss +// $h00-size-mobile: 40px; +// $h0-size-mobile: 32px; +// $h1-size-mobile: 26px; +// $h2-size-mobile: 22px; +// $h3-size-mobile: 18px; +// $h00-size: 48px; +// $h0-size: 40px; +// $h1-size: 32px; +// $h2-size: 24px; +// $h3-size: 20px; +// $h4-size: 16px; +// $h5-size: 14px; +// $h6-size: 12px; + +/* Set the font size to 26px */ +.h1 { + // stylelint-disable-next-line primer/typography + font-size: $h1-size-mobile !important; + + @include breakpoint(md) { font-size: $h1-size !important; } +} + +/* Set the font size to 22px */ +.h2 { + // stylelint-disable-next-line primer/typography + font-size: $h2-size-mobile !important; + + @include breakpoint(md) { font-size: $h2-size !important; } +} + +/* Set the font size to 18px */ +.h3 { + // stylelint-disable-next-line primer/typography + font-size: $h3-size-mobile !important; + + @include breakpoint(md) { font-size: $h3-size !important; } +} + +/* Set the font size to #{$h4-size} */ +.h4 { + font-size: $h4-size !important; +} + +/* Set the font size to #{$h5-size} */ +.h5 { font-size: $h5-size !important; } + +// Does not include color property like typography base +// styles, color should be applied with color utilities. +/* Set the font size to #{$h6-size} */ +.h6 { font-size: $h6-size !important; } + +// Heading utilities +.h1, +.h2, +.h3, +.h4, +.h5, +.h6 { font-weight: $font-weight-bold !important; } + +// Type utilities that match type sale +/* Set the font size to 26px */ +.f1 { + // stylelint-disable-next-line primer/typography + font-size: $h1-size-mobile !important; + + @include breakpoint(md) { font-size: $h1-size !important; } +} + +/* Set the font size to 22px */ +.f2 { + // stylelint-disable-next-line primer/typography + font-size: $h2-size-mobile !important; + + @include breakpoint(md) { font-size: $h2-size !important; } +} + +/* Set the font size to 18px */ +.f3 { + // stylelint-disable-next-line primer/typography + font-size: $h3-size-mobile !important; + + @include breakpoint(md) { font-size: $h3-size !important; } +} + +/* Set the font size to #{$h4-size} */ +.f4 { + font-size: $h4-size !important; + + @include breakpoint(md) { font-size: $h4-size !important; } +} + +/* Set the font size to #{$h5-size} */ +.f5 { font-size: $h5-size !important; } +/* Set the font size to #{$h6-size} */ +.f6 { font-size: $h6-size !important; } + +// Type utils with light weight that match type scale +/* Set the font size to 40px and weight to light */ +.f00-light { + // stylelint-disable-next-line primer/typography + font-size: $h00-size-mobile !important; + font-weight: $font-weight-light !important; + + @include breakpoint(md) { font-size: $h00-size !important; } +} + +/* Set the font size to 32px and weight to light */ +.f0-light { + // stylelint-disable-next-line primer/typography + font-size: $h0-size-mobile !important; + font-weight: $font-weight-light !important; + + @include breakpoint(md) { font-size: $h0-size !important; } +} + +/* Set the font size to 26px and weight to light */ +.f1-light { + // stylelint-disable-next-line primer/typography + font-size: $h1-size-mobile !important; + font-weight: $font-weight-light !important; + + @include breakpoint(md) { font-size: $h1-size !important; } +} + +/* Set the font size to 22px and weight to light */ +.f2-light { + // stylelint-disable-next-line primer/typography + font-size: $h2-size-mobile !important; + font-weight: $font-weight-light !important; + + @include breakpoint(md) { font-size: $h2-size !important; } +} + +// Same size and weight as .lead but without color property +/* Set the font size to 18px and weight to light */ +.f3-light { + // stylelint-disable-next-line primer/typography + font-size: $h3-size-mobile !important; + font-weight: $font-weight-light !important; + + @include breakpoint(md) { font-size: $h3-size !important; } +} + +// Smallest text size +/* Set the font size to ${#h6-size} */ +.text-small { font-size: $h6-size !important; } // 12px + +/* Large leading paragraphs */ +.lead { + // stylelint-disable-next-line primer/spacing + margin-bottom: 30px; + font-size: $h3-size; + font-weight: $font-weight-light; + color: $text-gray; +} + +// Line-height variations +// Close to commonly used line-heights. Most line-heights +// combined with type size equate to whole pixels. +// Will be improved with future typography scale updates. +// Responsive line-height +@each $breakpoint, $variant in $responsive-variants { + @include breakpoint($breakpoint) { + /* Set the line height to ultra condensed */ + .lh#{$variant}-condensed-ultra { line-height: $lh-condensed-ultra !important; } + /* Set the line height to condensed */ + .lh#{$variant}-condensed { line-height: $lh-condensed !important; } + /* Set the line height to default */ + .lh#{$variant}-default { line-height: $lh-default !important; } + /* Set the line height to zero */ + .lh#{$variant}-0 { line-height: 0 !important; } + } +} + +// Text alignments +// Responsive text alignment +@each $breakpoint, $variant in $responsive-variants { + @include breakpoint($breakpoint) { + /* Text align to the right */ + .text#{$variant}-right { text-align: right !important; } + /* Text align to the left */ + .text#{$variant}-left { text-align: left !important; } + /* Text align to the center */ + .text#{$variant}-center { text-align: center !important; } + } +} + +// Text styles +/* Set the font weight to normal */ +.text-normal { font-weight: $font-weight-normal !important; } +/* Set the font weight to bold */ +.text-bold { font-weight: $font-weight-bold !important;} +/* Set the font to italic */ +.text-italic { font-style: italic !important; } +/* Make text uppercase */ +.text-uppercase { text-transform: uppercase !important; } +/* Underline text */ +.text-underline { text-decoration: underline !important; } +/* Don't underline text */ +.no-underline { text-decoration: none !important; } +/* Don't wrap white space */ +.no-wrap { white-space: nowrap !important; } +/* Normal white space */ +.ws-normal { white-space: normal !important; } + +/* Force long "words" to wrap if they exceed the width of the container */ +.break-word { + word-break: break-word !important; + // this is for backwards compatibility with browsers that don't respect overflow-wrap + word-wrap: break-word !important; + overflow-wrap: break-word !important; +} + +/* + * Specifically apply word-break: break-all; per MDN: + * + * > Note: In contrast to `word-break: break-word` and `overflow-wrap: break-word`, + * > `word-break: break-all` will create a break at the exact place where text would + * > otherwise overflow its container (even if putting an entire word on its own line + * > would negate the need for a break). + * + * see: https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#Values + */ +.wb-break-all { word-break: break-all !important; } + +.text-emphasized { + font-weight: $font-weight-bold; + color: $text-gray-dark; +} + +// List styles +.list-style-none { list-style: none !important; } + +// Text Shadows +/* Add a dark text shadow */ +.text-shadow-dark { + text-shadow: 0 1px 1px rgba($black, 0.25), 0 1px 25px rgba($black, 0.75); +} +/* Add a light text shadow */ +.text-shadow-light { + text-shadow: 0 1px 0 rgba($white, 0.5); +} + +/* Set to monospace font */ +.text-mono { + font-family: $mono-font !important; +} + +/* Disallow user from selecting text */ +.user-select-none { + user-select: none !important; +} diff --git a/assets/sass/@primer/css/utilities/visibility-display.scss b/assets/sass/@primer/css/utilities/visibility-display.scss new file mode 100644 index 0000000..61c6f5f --- /dev/null +++ b/assets/sass/@primer/css/utilities/visibility-display.scss @@ -0,0 +1,74 @@ +// Visibility and display utilities + +// Responsive display utilities +@each $breakpoint, $variant in $responsive-variants { + @include breakpoint($breakpoint) { + @each $display in $display-values { + .d#{$variant}-#{$display} { display: $display !important; } + } + } +} + +.v-hidden { visibility: hidden !important; } +.v-visible { visibility: visible !important; } + +// Hide utilities for each breakpoint +// Each hide utility only applies to one breakpoint range. +@media (max-width: $width-sm - 1px) { + .hide-sm { + display: none !important; + } +} + +@media (min-width: $width-sm) and (max-width: $width-md - 1px) { + .hide-md { + display: none !important; + } +} + +@media (min-width: $width-md) and (max-width: $width-lg - 1px) { + .hide-lg { + display: none !important; + } +} + +@media (min-width: $width-lg) { + .hide-xl { + display: none !important; + } +} + +/* Set the table-layout to fixed */ +.table-fixed { table-layout: fixed !important; } + +// Only display content to screen readers +// +// See: http://a11yproject.com/posts/how-to-hide-content/ +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + overflow: hidden; + clip: rect(0, 0, 0, 0); + // Workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=1241631 + word-wrap: normal; + border: 0; +} + +// Only display content on focus +.show-on-focus { + position: absolute; + width: 1px; + height: 1px; + margin: 0; + overflow: hidden; + clip: rect(1px, 1px, 1px, 1px); + + &:focus { + z-index: 20; + width: auto; + height: auto; + clip: auto; + } +} |