Skip to content
Snippets Groups Projects
Unverified Commit 8968860b authored by Patrick Marsceill's avatar Patrick Marsceill
Browse files

Ignore node modules

parent aa5a4e52
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 256 additions and 305 deletions
node_modules/primer-utilities/lib/colors.scss
+ 9
− 12
View file @ 8968860b
......@@ -29,9 +29,11 @@
.bg-yellow-light { background-color: $bg-yellow-light !important; }
/* Set the background to $bg-purple */
.bg-purple { background-color: $bg-purple !important; }
/* Set the background to $bg-purple-light */
.bg-purple-light { background-color: $bg-purple-light !important; }
.bg-shade-gradient {
background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.065), rgba(0, 0, 0, 0)) !important;
background-image: linear-gradient(180deg, rgba($black, 0.065), rgba($black, 0)) !important;
background-repeat: no-repeat !important;
background-size: 100% 200px !important;
}
......@@ -51,6 +53,8 @@
.text-green { color: $text-green !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-white */
......@@ -59,8 +63,10 @@
.text-inherit { color: inherit !important; }
// Text states
.text-renamed { color: $status-renamed !important; }
.text-pending { color: $status-pending !important; }
// These can probably all be regular utilities
.text-pending { color: $yellow-800 !important; }
// Separate text and background colors in future to improve a11y
.bg-pending { color: $yellow-700 !important; }
// Link colors
// Sets the links color to $text-gray and $text-blue on hover
......@@ -98,12 +104,3 @@
text-decoration: none;
}
}
// Shade gradient
//
// Shade gradient style from Basecoat
.shade-gradient {
background-image: linear-gradient(180deg, #f5f5f5, #fff);
background-repeat: no-repeat;
background-size: 100% 200px;
}
node_modules/primer-utilities/lib/details.scss 0 → 100644
+ 18
− 0
View file @ 8968860b
// 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: $black-fade-50;
}
node_modules/primer-utilities/lib/flexbox.scss
+ 45
− 74
View file @ 8968860b
// Flex utility classes
// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before
// stylelint-disable comment-empty-line-before
// - - - - - - - - - - - - - - - - - - - - - - -
// This is a template for generating the flex utility classes.
// A version of each class will be generated without a breakpoint,
// along with a variant for each breakpoint.
// - - - - - - - - - - - - - - - - - - - - - - -
@mixin flexUtility($breakpoint: 0) {
// This is the breakpoint that will be inserted into class names
$breakstring: -#{$breakpoint}; // example: `.d-sm-flex`
// If there's no breakpoint, the $breakstring value will be blank.
@if $breakpoint == 0 {
$breakstring: ""; // example: `.d-flex`
}
// Flexbox classes
// Container
.d#{$breakstring}-flex { display: flex !important; }
.d#{$breakstring}-inline-flex { display: inline-flex !important; }
.flex#{$breakstring}-row { flex-direction: row !important; }
.flex#{$breakstring}-column { flex-direction: column !important; }
.flex#{$breakstring}-wrap { flex-wrap: wrap !important; }
.flex#{$breakstring}-nowrap { flex-wrap: nowrap !important; }
.flex#{$breakstring}-justify-start { justify-content: flex-start !important; }
.flex#{$breakstring}-justify-end { justify-content: flex-end !important; }
.flex#{$breakstring}-justify-center { justify-content: center !important; }
.flex#{$breakstring}-justify-between { justify-content: space-between !important; }
.flex#{$breakstring}-justify-around { justify-content: space-around !important; }
.flex#{$breakstring}-items-start { align-items: flex-start !important; }
.flex#{$breakstring}-items-end { align-items: flex-end !important; }
.flex#{$breakstring}-items-center { align-items: center !important; }
.flex#{$breakstring}-items-baseline { align-items: baseline !important; }
.flex#{$breakstring}-items-stretch { align-items: stretch !important; }
.flex#{$breakstring}-content-start { align-content: flex-start !important; }
.flex#{$breakstring}-content-end { align-content: flex-end !important; }
.flex#{$breakstring}-content-center { align-content: center !important; }
.flex#{$breakstring}-content-between { align-content: space-between !important; }
.flex#{$breakstring}-content-around { align-content: space-around !important; }
.flex#{$breakstring}-content-stretch { align-content: stretch !important; }
// Item
.flex#{$breakstring}-auto { flex: 1 1 auto !important; }
.flex#{$breakstring}-shrink-0 { flex-shrink: 0 !important; }
.flex#{$breakstring}-self-auto { align-self: auto !important; }
.flex#{$breakstring}-self-start { align-self: flex-start !important; }
.flex#{$breakstring}-self-end { align-self: flex-end !important; }
.flex#{$breakstring}-self-center { align-self: center !important; }
.flex#{$breakstring}-self-baseline { align-self: baseline !important; }
.flex#{$breakstring}-self-stretch { align-self: stretch !important; }
// Shorthand for equal width and height cols
.flex#{$breakstring}-item-equal {
flex-grow: 1;
flex-basis: 0;
}
}
// Generate basic flexbox classes
@include flexUtility();
// Loop through the breakpoint values to create responsive classes
@each $breakpoint in map-keys($breakpoints) {
// Loop through the spacer values
@each $breakpoint, $variant in $responsive-variants {
@include breakpoint($breakpoint) {
@include flexUtility($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}-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}-auto { flex: 1 1 auto !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; }
// Shorthand for equal width and height cols
.flex#{$variant}-item-equal {
flex-grow: 1;
flex-basis: 0;
}
}
}
node_modules/primer-utilities/lib/layout.scss
+ 16
− 27
View file @ 8968860b
......@@ -30,6 +30,8 @@
.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
// overflow-hidden can also be used to create a new
......@@ -48,23 +50,14 @@
}
// Floats
/* Float to the right */
.float-right { float: right !important; }
/* Float to the left */
.float-left { float: left !important; }
/* Don't float left or right */
.float-none { float: none !important; }
// Responsive float utlities
// .float-md-left, .float-lg-right, ...
@each $breakpoint in map-keys($breakpoints) {
@each $breakpoint, $variant in $responsive-variants {
@include breakpoint($breakpoint) {
/* Float to the left at the #{$breakpoint} breakpoint */
.float-#{$breakpoint}-left { float: left !important; }
/* Float to the right at the #{$breakpoint} breakpoint */
.float-#{$breakpoint}-right { float: right !important; }
/* No float at the #{$breakpoint} breakpoint */
.float-#{$breakpoint}-none { float: none !important; }
/* 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; }
}
}
......@@ -74,23 +67,19 @@
.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; }
// Direction utilities
.direction-rtl { direction: rtl !important; }
.direction-ltr { direction: ltr !important; }
@each $breakpoint in map-keys($breakpoints) {
@each $breakpoint, $variant in $responsive-variants {
@include breakpoint($breakpoint) {
/* Set the direction to ltr at the #{$breakpoint} breakpoint */
.direction-#{$breakpoint}-rtl { direction: rtl !important; }
/* Set the direction to ltr at the #{$breakpoint} breakpoint */
.direction-#{$breakpoint}-ltr { direction: ltr !important; }
/* Set the direction to rtl */
.direction#{$variant}-rtl { direction: rtl !important; }
/* Set the direction to ltr */
.direction#{$variant}-ltr { direction: ltr !important; }
}
}
node_modules/primer-utilities/lib/margin.scss
+ 42
− 59
View file @ 8968860b
// Margin spacer utilities
// stylelint-disable block-opening-brace-space-before, declaration-colon-space-before, primer/selector-no-utility, comment-empty-line-before
@for $i from 1 through length($spacers) {
$size: #{nth($spacers, $i)};
$scale: #{$i - 1};
/* Set a #{$size} margin to all sides */
.m-#{$scale} { margin : #{$size} !important; }
/* Set a #{$size} margin on the top */
.mt-#{$scale} { margin-top : #{$size} !important; }
/* Set a #{$size} margin on the right */
.mr-#{$scale} { margin-right : #{$size} !important; }
/* Set a #{$size} margin on the bottom */
.mb-#{$scale} { margin-bottom: #{$size} !important; }
/* Set a #{$size} margin on the left */
.ml-#{$scale} { margin-left : #{$size} !important; }
/* Set a #{$size} margin on the left & right */
.mx-#{$scale} {
margin-right: #{$size} !important;
margin-left : #{$size} !important;
}
/* Set a #{$size} margin on the top & bottom */
.my-#{$scale} {
margin-top : #{$size} !important;
margin-bottom: #{$size} !important;
}
}
// Loop through the breakpoint values
@each $breakpoint in map-keys($breakpoints) {
// Loop through the spacer values
@for $i from 1 through length($spacers) {
@include breakpoint($breakpoint) {
$size: #{nth($spacers, $i)}; // sm, md, lg, xl
$scale: #{$i - 1}; // 0, 1, 2, 3, 4, 5, 6
/* Set a #{$size} margin to all sides at the breakpoint #{$breakpoint} */
.m-#{$breakpoint}-#{$scale} { margin: #{$size} !important; }
/* Set a #{$size} margin on the top at the breakpoint #{$breakpoint} */
.mt-#{$breakpoint}-#{$scale} { margin-top: #{$size} !important; }
/* Set a #{$size} margin on the right at the breakpoint #{$breakpoint} */
.mr-#{$breakpoint}-#{$scale} { margin-right: #{$size} !important; }
/* Set a #{$size} margin on the bottom at the breakpoint #{$breakpoint} */
.mb-#{$breakpoint}-#{$scale} { margin-bottom: #{$size} !important; }
/* Set a #{$size} margin on the left at the breakpoint #{$breakpoint} */
.ml-#{$breakpoint}-#{$scale} { margin-left: #{$size} !important; }
@each $breakpoint, $variant in $responsive-variants {
@include breakpoint($breakpoint) {
// Loop through the spacer values
@for $i from 1 through length($spacers) {
$size: nth($spacers, $i); // sm, md, lg, xl
$scale: $i - 1; // 0, 1, 2, 3, 4, 5, 6
/* 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 the breakpoint #{$breakpoint} */
.mx-#{$breakpoint}-#{$scale} {
margin-right: #{$size} !important;
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 the breakpoint #{$breakpoint} */
.my-#{$breakpoint}-#{$scale} {
margin-top: #{$size} !important;
margin-bottom: #{$size} !important;
/* Set a $size margin on the top & bottom at $breakpoint */
.my#{$variant}-#{$scale} {
margin-top: $size !important;
margin-bottom: $size !important;
}
}
}
}
/* Set an auto margin on left & right */
.mx-auto {
margin-right: auto !important;
margin-left: auto !important;
/* responsive horizontal auto margins */
.mx#{$variant}-auto {
margin-right: auto !important;
margin-left: auto !important;
}
}
}
node_modules/primer-utilities/lib/padding.scss
+ 42
− 55
View file @ 8968860b
// Padding spacer utilities
// stylelint-disable block-opening-brace-space-before, declaration-colon-space-before
// stylelint-disable comment-empty-line-before
@for $i from 1 through length($spacers) {
$size: #{nth($spacers, $i)};
$scale: #{$i - 1};
/* Set a #{$size} padding to all sides */
.p-#{$scale} { padding : #{$size} !important; }
/* Set a #{$size} padding to the top */
.pt-#{$scale} { padding-top : #{$size} !important; }
/* Set a #{$size} padding to the right */
.pr-#{$scale} { padding-right : #{$size} !important; }
/* Set a #{$size} padding to the bottom */
.pb-#{$scale} { padding-bottom: #{$size} !important; }
/* Set a #{$size} padding to the left */
.pl-#{$scale} { padding-left : #{$size} !important; }
/* Set a #{$size} padding to the left & right */
.px-#{$scale} {
padding-right: #{$size} !important;
padding-left: #{$size} !important;
}
// Responsive padding spacer utilities
@each $breakpoint, $variant in $responsive-variants {
@include breakpoint($breakpoint) {
// Loop through the spacer values
@for $i from 1 through length($spacers) {
$size: nth($spacers, $i); // xs, sm, md, lg, xl
$scale: $i - 1; // 0, 1, 2, 3, 4, 5, 6
/* 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 */
.py-#{$scale} {
padding-top: #{$size} !important;
padding-bottom: #{$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 spacer utilities
// Loop through the breakpoint values
@each $breakpoint in map-keys($breakpoints) {
// Loop through the spacer values
@for $i from 1 through length($spacers) {
@include breakpoint($breakpoint) {
$size: #{nth($spacers, $i)}; // xs, sm, md, lg, xl
$scale: #{$i - 1}; // 0, 1, 2, 3, 4, 5, 6
// responsive padding for containers
// stylelint-disable-next-line primer/selector-no-utility
.p-responsive {
padding-right: $spacer-3 !important;
padding-left: $spacer-3 !important;
/* Set a #{$size} padding to all sides at the #{$breakpoint} breakpoint */
.p-#{$breakpoint}-#{$scale} { padding: #{$size} !important; }
/* Set a #{$size} padding to the top at the #{$breakpoint} breakpoint */
.pt-#{$breakpoint}-#{$scale} { padding-top: #{$size} !important; }
/* Set a #{$size} padding to the right at the #{$breakpoint} breakpoint */
.pr-#{$breakpoint}-#{$scale} { padding-right: #{$size} !important; }
/* Set a #{$size} padding to the bottom at the #{$breakpoint} breakpoint */
.pb-#{$breakpoint}-#{$scale} { padding-bottom: #{$size} !important; }
/* Set a #{$size} padding to the left at the #{$breakpoint} breakpoint */
.pl-#{$breakpoint}-#{$scale} { padding-left: #{$size} !important; }
/* Set a #{$size} padding to the left & right at the #{$breakpoint} breakpoint */
.px-#{$breakpoint}-#{$scale} {
padding-right: #{$size} !important;
padding-left: #{$size} !important;
}
@include breakpoint(sm) {
padding-right: $spacer-6 !important;
padding-left: $spacer-6 !important;
}
/* Set a #{$size} padding to the top & bottom at the #{$breakpoint} breakpoint */
.py-#{$breakpoint}-#{$scale} {
padding-top: #{$size} !important;
padding-bottom: #{$size} !important;
}
}
@include breakpoint(lg) {
padding-right: $spacer-3 !important;
padding-left: $spacer-3 !important;
}
}
node_modules/primer-utilities/lib/typography.scss
+ 44
− 40
View file @ 8968860b
// stylelint-disable block-closing-brace-space-before, primer/selector-no-utility, selector-list-comma-newline-after
// stylelint-disable comment-empty-line-before
// Type scale variables found in primer-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;
......@@ -12,33 +17,28 @@
/* Set the font size to 26px */
.h1 {
font-size: 26px !important;
font-size: $h1-size-mobile !important;
@include breakpoint(md) { font-size: $h1-size !important; }
}
/* Set the font size to 22px */
.h2 {
font-size: 22px !important;
font-size: $h2-size-mobile !important;
@include breakpoint(md) { font-size: $h2-size !important; }
}
/* Set the font size to 18px */
.h3 {
font-size: 18px !important;
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;
@include breakpoint(md) { font-size: $h4-size !important; }
}
/* Set the font size to #{$h5-size} */
......@@ -55,25 +55,23 @@
// Type utilities that match type sale
/* Set the font size to 26px */
.f1 {
font-size: 26px !important;
font-size: $h1-size-mobile !important;
@include breakpoint(md) { font-size: $h1-size !important; }
}
/* Set the font size to 22px */
.f2 {
font-size: 22px !important;
font-size: $h2-size-mobile !important;
@include breakpoint(md) { font-size: $h2-size !important; }
}
/* Set the font size to 18px */
.f3 {
font-size: 18px !important;
font-size: $h3-size-mobile !important;
@include breakpoint(md) { font-size: $h3-size !important; }
}
/* Set the font size to #{$h4-size} */
......@@ -81,7 +79,6 @@
font-size: $h4-size !important;
@include breakpoint(md) { font-size: $h4-size !important; }
}
/* Set the font size to #{$h5-size} */
......@@ -92,47 +89,43 @@
// Type utils with light weight that match type scale
/* Set the font size to 40px and weight to light */
.f00-light {
font-size: 40px !important;
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 {
font-size: 32px !important;
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 {
font-size: 26px !important;
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 {
font-size: 22px !important;
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 {
font-size: 18px !important;
font-size: $h3-size-mobile !important;
font-weight: $font-weight-light !important;
@include breakpoint(md) { font-size: $h3-size !important; }
}
// Smallest text size
......@@ -144,7 +137,7 @@
margin-bottom: 30px;
font-size: $h3-size;
font-weight: $font-weight-light;
color: #555;
color: $gray-600;
}
// Line-height variations
......@@ -157,28 +150,25 @@
.lh-condensed { line-height: $lh-condensed !important; }
/* Set the line height to default */
.lh-default { line-height: $lh-default !important; }
/* Set the line height to zero */
.lh-0 { line-height: 0 !important; }
// Text alignments
/* Text align to the right */
.text-right { text-align: right !important; }
/* Text align to the left */
.text-left { text-align: left !important; }
/* Text align to the center */
.text-center { text-align: center !important; }
// Responsive text alignment
// .text-md-left, .text-lg-right, ...
@each $breakpoint in map-keys($breakpoints) {
@each $breakpoint, $variant in $responsive-variants {
@include breakpoint($breakpoint) {
.text-#{$breakpoint}-right { text-align: right !important; }
.text-#{$breakpoint}-left { text-align: left !important; }
.text-#{$breakpoint}-center { text-align: center !important; }
/* 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: normal !important; }
.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 */
......@@ -186,9 +176,13 @@
/* 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; }
/* Allow long lines with no spaces to line break */
.wb-break-all { word-break: break-all !important; }
......@@ -203,9 +197,19 @@
// Text Shadows
/* Add a dark text shadow */
.text-shadow-dark {
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25), 0 1px 25px rgba(0, 0, 0, 0.75);
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(255, 255, 255, 0.5);
text-shadow: 0 1px 0 rgba($white, 0.5);
}
/* Set to monospace font */
.text-mono {
font-family: $mono-font;
}
/* Disallow user from selecting text */
.user-select-none {
user-select: none !important;
}
node_modules/primer-utilities/lib/visibility-display.scss
+ 40
− 38
View file @ 8968860b
......@@ -2,48 +2,32 @@
// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before, primer/selector-no-utility
// stylelint-disable comment-empty-line-before
$display-values: (
block,
flex,
inline,
inline-block,
inline-flex,
none,
table,
table-cell
);
// Responsive display utilities
@each $breakpoint, $variant in $responsive-variants {
@include breakpoint($breakpoint) {
@each $display in $display-values {
.d#{$variant}-#{$display} { display: $display !important; }
}
}
}
// Visibility utilities
/* Visibility hidden */
.v-hidden { visibility: hidden !important; }
/* Visibility visible */
.v-visible { visibility: visible !important; }
// Display utilites
/* Set the display to table */
.d-table { display: table !important; }
/* Set the display to table-cell */
.d-table-cell { display: table-cell !important; }
/* Set the table-layout to fixed */
.table-fixed { table-layout: fixed !important; }
/* Set the display to block */
.d-block { display: block !important; }
/* Set the display to inline */
.d-inline { display: inline !important; }
/* Set the display to inline-block */
.d-inline-block { display: inline-block !important; }
/* Set the display to none */
.d-none { display: none !important; }
// Responsive display utlities
// .d-sm-none, .d-lg-inline, ...
@each $breakpoint in map-keys($breakpoints) {
@include breakpoint($breakpoint) {
/* Set the display to table at the #{$breakpoint} breakpoint */
.d-#{$breakpoint}-table { display: table !important; }
/* Set the display to table cell at the #{$breakpoint} breakpoint */
.d-#{$breakpoint}-table-cell { display: table-cell !important; }
/* Set the display to block at the #{$breakpoint} breakpoint */
.d-#{$breakpoint}-block { display: block !important; }
/* Set the display to inline at the #{$breakpoint} breakpoint */
.d-#{$breakpoint}-inline { display: inline !important; }
/* Set the display to inline block at the #{$breakpoint} breakpoint */
.d-#{$breakpoint}-inline-block { display: inline-block !important; }
/* Set the display to none at the #{$breakpoint} breakpoint */
.d-#{$breakpoint}-none { display: none !important; }
}
}
// Hide utilities for each breakpoint
// Each hide utility only applies to one breakpoint range.
@media (max-width: $width-sm) {
......@@ -70,19 +54,37 @@
}
}
/* 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;
margin: -1px;
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;
}
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment