mirror of
https://github.com/snachodog/just-the-docs.git
synced 2025-09-13 13:23:32 -06:00
Ignore node modules
This commit is contained in:
Patrick Marsceill
1
node_modules/primer-utilities/index.scss
generated
vendored
1
node_modules/primer-utilities/index.scss
generated
vendored
@@ -4,6 +4,7 @@
|
||||
@import "./lib/borders.scss";
|
||||
@import "./lib/box-shadow.scss";
|
||||
@import "./lib/colors.scss";
|
||||
@import "./lib/details.scss";
|
||||
@import "./lib/flexbox.scss";
|
||||
@import "./lib/layout.scss";
|
||||
@import "./lib/margin.scss";
|
||||
|
||||
35
node_modules/primer-utilities/lib/animations.scss
generated
vendored
35
node_modules/primer-utilities/lib/animations.scss
generated
vendored
@@ -1,7 +1,7 @@
|
||||
// This file contains reusable animations for github.
|
||||
// stylelint-disable primer/selector-no-utility
|
||||
// Fade in
|
||||
// A class to fade in an element on the page.
|
||||
|
||||
/* Fade in an element */
|
||||
.anim-fade-in {
|
||||
animation-name: fade-in;
|
||||
animation-duration: 1s;
|
||||
@@ -22,6 +22,27 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* 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;
|
||||
@@ -151,3 +172,13 @@
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
119
node_modules/primer-utilities/lib/borders.scss
generated
vendored
119
node_modules/primer-utilities/lib/borders.scss
generated
vendored
@@ -1,53 +1,100 @@
|
||||
// Border utilities
|
||||
// stylelint-disable block-opening-brace-space-before, primer/selector-no-utility, comment-empty-line-before
|
||||
|
||||
/* Add a gray border */
|
||||
.border { border: $border !important; }
|
||||
/* Add a gray border to the top */
|
||||
.border-top { border-top: $border !important; }
|
||||
/* Add a gray border to the right */
|
||||
.border-right { border-right: $border !important; }
|
||||
/* Add a gray border to the bottom */
|
||||
.border-bottom { border-bottom: $border !important; }
|
||||
/* Add a gray border to the left */
|
||||
.border-left { border-left: $border !important; }
|
||||
/* Add a gray border on all sides */
|
||||
.border { border: $border !important; }
|
||||
|
||||
/* Add a gray border to the left and right */
|
||||
.border-y {
|
||||
border-top: $border !important;
|
||||
border-bottom: $border !important;
|
||||
}
|
||||
|
||||
/* Remove borders from all sides */
|
||||
.border-0 { border: 0 !important; }
|
||||
|
||||
.border-dashed { 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 */
|
||||
.border-blue-dark { border-color: $border-blue-dark !important; }
|
||||
.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 */
|
||||
.border-red-dark { border-color: $border-red-dark !important; }
|
||||
.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; }
|
||||
.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; }
|
||||
.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; }
|
||||
|
||||
// Without borders
|
||||
/* Remove all borders */
|
||||
.border-0 { border: 0 !important; }
|
||||
/* Remove the top border */
|
||||
.border-top-0 { border-top: 0 !important; }
|
||||
/* Remove the right border */
|
||||
.border-right-0 { border-right: 0 !important; }
|
||||
/* Remove the bottom border */
|
||||
.border-bottom-0 { border-bottom: 0 !important; }
|
||||
/* Remove the left border */
|
||||
.border-left-0 { border-left: 0 !important; }
|
||||
$edges: (
|
||||
top: (top-left, top-right),
|
||||
right: (top-right, bottom-right),
|
||||
bottom: (bottom-right, bottom-left),
|
||||
left: (bottom-left, top-left)
|
||||
);
|
||||
|
||||
// Rounded corners
|
||||
/* Remove the border-radius */
|
||||
.rounded-0 { border-radius: 0 !important; }
|
||||
/* Add a border-radius to all corners */
|
||||
.rounded-1 { border-radius: $border-radius !important; }
|
||||
/* Add a 2x border-radius to all corners */
|
||||
.rounded-2 { border-radius: $border-radius * 2 !important; }
|
||||
@each $breakpoint, $variant in $responsive-variants {
|
||||
@include breakpoint($breakpoint) {
|
||||
/* Add a gray border */
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
|
||||
.rounded#{$variant}-#{$edge}-1 {
|
||||
@each $corner in $corners {
|
||||
border-#{$corner}-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
.rounded#{$variant}-#{$edge}-2 {
|
||||
@each $corner in $corners {
|
||||
border-#{$corner}-radius: $border-radius * 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Add a 50% border-radius to make something into a circle */
|
||||
.circle { border-radius: 50% !important; }
|
||||
|
||||
4
node_modules/primer-utilities/lib/box-shadow.scss
generated
vendored
4
node_modules/primer-utilities/lib/box-shadow.scss
generated
vendored
@@ -15,6 +15,10 @@
|
||||
box-shadow: $box-shadow-large !important;
|
||||
}
|
||||
|
||||
.box-shadow-extra-large {
|
||||
box-shadow: $box-shadow-extra-large !important;
|
||||
}
|
||||
|
||||
// Turn off box shadow
|
||||
|
||||
.box-shadow-none {
|
||||
|
||||
21
node_modules/primer-utilities/lib/colors.scss
generated
vendored
21
node_modules/primer-utilities/lib/colors.scss
generated
vendored
@@ -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;
|
||||
}
|
||||
|
||||
18
node_modules/primer-utilities/lib/details.scss
generated
vendored
Normal file
18
node_modules/primer-utilities/lib/details.scss
generated
vendored
Normal file
@@ -0,0 +1,18 @@
|
||||
// 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;
|
||||
}
|
||||
119
node_modules/primer-utilities/lib/flexbox.scss
generated
vendored
119
node_modules/primer-utilities/lib/flexbox.scss
generated
vendored
@@ -1,81 +1,52 @@
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
43
node_modules/primer-utilities/lib/layout.scss
generated
vendored
43
node_modules/primer-utilities/lib/layout.scss
generated
vendored
@@ -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; }
|
||||
}
|
||||
}
|
||||
|
||||
99
node_modules/primer-utilities/lib/margin.scss
generated
vendored
99
node_modules/primer-utilities/lib/margin.scss
generated
vendored
@@ -1,70 +1,53 @@
|
||||
// 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) {
|
||||
@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
|
||||
|
||||
// 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 $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; }
|
||||
|
||||
/* 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; }
|
||||
|
||||
/* Set a #{$size} margin on the left & right at the breakpoint #{$breakpoint} */
|
||||
.mx-#{$breakpoint}-#{$scale} {
|
||||
margin-right: #{$size} !important;
|
||||
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 top & bottom at the breakpoint #{$breakpoint} */
|
||||
.my-#{$breakpoint}-#{$scale} {
|
||||
margin-top: #{$size} !important;
|
||||
margin-bottom: #{$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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Set an auto margin on left & right */
|
||||
.mx-auto {
|
||||
margin-right: auto !important;
|
||||
margin-left: auto !important;
|
||||
}
|
||||
|
||||
95
node_modules/primer-utilities/lib/padding.scss
generated
vendored
95
node_modules/primer-utilities/lib/padding.scss
generated
vendored
@@ -1,67 +1,54 @@
|
||||
// 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;
|
||||
}
|
||||
|
||||
/* Set a #{$size} padding to the top & bottom */
|
||||
.py-#{$scale} {
|
||||
padding-top: #{$size} !important;
|
||||
padding-bottom: #{$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
|
||||
|
||||
// Loop through the breakpoint values
|
||||
@each $breakpoint in map-keys($breakpoints) {
|
||||
/* 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; }
|
||||
|
||||
// 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
|
||||
|
||||
/* 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;
|
||||
/* 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 the #{$breakpoint} breakpoint */
|
||||
.py-#{$breakpoint}-#{$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 for containers
|
||||
// stylelint-disable-next-line primer/selector-no-utility
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
84
node_modules/primer-utilities/lib/typography.scss
generated
vendored
84
node_modules/primer-utilities/lib/typography.scss
generated
vendored
@@ -1,6 +1,11 @@
|
||||
// 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;
|
||||
}
|
||||
|
||||
78
node_modules/primer-utilities/lib/visibility-display.scss
generated
vendored
78
node_modules/primer-utilities/lib/visibility-display.scss
generated
vendored
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user