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, 0 insertions, 1072 deletions
diff --git a/assets/sass/@primer/css/utilities/README.md b/assets/sass/@primer/css/utilities/README.md deleted file mode 100644 index 95eade2..0000000 --- a/assets/sass/@primer/css/utilities/README.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -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 deleted file mode 100644 index bb1422e..0000000 --- a/assets/sass/@primer/css/utilities/animations.scss +++ /dev/null @@ -1,183 +0,0 @@ -// 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 deleted file mode 100644 index d3df5ae..0000000 --- a/assets/sass/@primer/css/utilities/borders.scss +++ /dev/null @@ -1,116 +0,0 @@ -// 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 deleted file mode 100644 index fb5b1d6..0000000 --- a/assets/sass/@primer/css/utilities/box-shadow.scss +++ /dev/null @@ -1,25 +0,0 @@ -// 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 deleted file mode 100644 index 0864f8f..0000000 --- a/assets/sass/@primer/css/utilities/colors.scss +++ /dev/null @@ -1,115 +0,0 @@ -// 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 deleted file mode 100644 index 935bc05..0000000 --- a/assets/sass/@primer/css/utilities/details.scss +++ /dev/null @@ -1,28 +0,0 @@ -// 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 deleted file mode 100644 index a0cd73a..0000000 --- a/assets/sass/@primer/css/utilities/flexbox.scss +++ /dev/null @@ -1,51 +0,0 @@ -// 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 deleted file mode 100644 index 7d68a09..0000000 --- a/assets/sass/@primer/css/utilities/index.scss +++ /dev/null @@ -1,14 +0,0 @@ -@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 deleted file mode 100644 index 1b4da95..0000000 --- a/assets/sass/@primer/css/utilities/layout.scss +++ /dev/null @@ -1,87 +0,0 @@ -// 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 deleted file mode 100644 index 2212e91..0000000 --- a/assets/sass/@primer/css/utilities/margin.scss +++ /dev/null @@ -1,50 +0,0 @@ -// 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 deleted file mode 100644 index 9914bb8..0000000 --- a/assets/sass/@primer/css/utilities/padding.scss +++ /dev/null @@ -1,49 +0,0 @@ -// 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 deleted file mode 100644 index f790a71..0000000 --- a/assets/sass/@primer/css/utilities/typography.scss +++ /dev/null @@ -1,255 +0,0 @@ -// 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 deleted file mode 100644 index 61c6f5f..0000000 --- a/assets/sass/@primer/css/utilities/visibility-display.scss +++ /dev/null @@ -1,74 +0,0 @@ -// 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; - } -} |