mirror of
https://github.com/snachodog/just-the-docs.git
synced 2025-09-13 05:13:33 -06:00
Initial commit
This commit is contained in:
Patrick Marsceill
153
node_modules/primer-utilities/lib/animations.scss
generated
vendored
Normal file
153
node_modules/primer-utilities/lib/animations.scss
generated
vendored
Normal file
@@ -0,0 +1,153 @@
|
||||
// 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.
|
||||
.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 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);
|
||||
}
|
||||
}
|
||||
53
node_modules/primer-utilities/lib/borders.scss
generated
vendored
Normal file
53
node_modules/primer-utilities/lib/borders.scss
generated
vendored
Normal file
@@ -0,0 +1,53 @@
|
||||
// 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 to the left and right */
|
||||
.border-y {
|
||||
border-top: $border !important;
|
||||
border-bottom: $border !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; }
|
||||
/* 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; }
|
||||
/* 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; }
|
||||
|
||||
// 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; }
|
||||
|
||||
// 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; }
|
||||
22
node_modules/primer-utilities/lib/box-shadow.scss
generated
vendored
Normal file
22
node_modules/primer-utilities/lib/box-shadow.scss
generated
vendored
Normal file
@@ -0,0 +1,22 @@
|
||||
// Box shadow utilities
|
||||
// stylelint-disable primer/selector-no-utility
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
// Turn off box shadow
|
||||
|
||||
.box-shadow-none {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
109
node_modules/primer-utilities/lib/colors.scss
generated
vendored
Normal file
109
node_modules/primer-utilities/lib/colors.scss
generated
vendored
Normal file
@@ -0,0 +1,109 @@
|
||||
// Color utilities
|
||||
// stylelint-disable block-opening-brace-space-before, primer/selector-no-utility
|
||||
// stylelint-disable 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-purple */
|
||||
.bg-purple { background-color: $bg-purple !important; }
|
||||
|
||||
.bg-shade-gradient {
|
||||
background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.065), rgba(0, 0, 0, 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-orange */
|
||||
.text-orange { color: $text-orange !important; }
|
||||
/* Set the text color to $text-purple */
|
||||
.text-purple { color: $text-purple !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; }
|
||||
|
||||
// Text states
|
||||
.text-renamed { color: $status-renamed !important; }
|
||||
.text-pending { color: $status-pending !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;
|
||||
}
|
||||
}
|
||||
|
||||
// Shade gradient
|
||||
//
|
||||
// Shade gradient style from Basecoat
|
||||
.shade-gradient {
|
||||
background-image: linear-gradient(180deg, #f5f5f5, #fff);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 200px;
|
||||
}
|
||||
81
node_modules/primer-utilities/lib/flexbox.scss
generated
vendored
Normal file
81
node_modules/primer-utilities/lib/flexbox.scss
generated
vendored
Normal file
@@ -0,0 +1,81 @@
|
||||
// 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
|
||||
@include breakpoint($breakpoint) {
|
||||
@include flexUtility($breakpoint);
|
||||
}
|
||||
|
||||
}
|
||||
96
node_modules/primer-utilities/lib/layout.scss
generated
vendored
Normal file
96
node_modules/primer-utilities/lib/layout.scss
generated
vendored
Normal file
@@ -0,0 +1,96 @@
|
||||
// Layout
|
||||
// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before, primer/selector-no-utility
|
||||
// stylelint-disable comment-empty-line-before
|
||||
|
||||
/* Set position to static */
|
||||
.position-static { position: static !important; }
|
||||
/* Set position to relative */
|
||||
.position-relative { position: relative !important; }
|
||||
/* Set position to absolute */
|
||||
.position-absolute { position: absolute !important; }
|
||||
/* Set position to fixed */
|
||||
.position-fixed { position: fixed !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; }
|
||||
|
||||
// Overflow utilities
|
||||
// overflow-hidden can also be used to create a new
|
||||
// block formatting context or clear floats.
|
||||
/* Set the overflow hidden */
|
||||
.overflow-hidden { overflow: hidden !important; }
|
||||
/* Set the overflow scroll */
|
||||
.overflow-scroll { overflow: scroll !important; }
|
||||
/* Set the overflow auto */
|
||||
.overflow-auto { overflow: auto !important; }
|
||||
|
||||
// Clear floats
|
||||
/* Clear floats around the element */
|
||||
.clearfix {
|
||||
@include clearfix;
|
||||
}
|
||||
|
||||
// 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) {
|
||||
@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; }
|
||||
}
|
||||
}
|
||||
|
||||
// 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; }
|
||||
/* 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) {
|
||||
@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; }
|
||||
}
|
||||
}
|
||||
70
node_modules/primer-utilities/lib/margin.scss
generated
vendored
Normal file
70
node_modules/primer-utilities/lib/margin.scss
generated
vendored
Normal file
@@ -0,0 +1,70 @@
|
||||
// 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; }
|
||||
|
||||
/* 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 top & bottom at the breakpoint #{$breakpoint} */
|
||||
.my-#{$breakpoint}-#{$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;
|
||||
}
|
||||
67
node_modules/primer-utilities/lib/padding.scss
generated
vendored
Normal file
67
node_modules/primer-utilities/lib/padding.scss
generated
vendored
Normal file
@@ -0,0 +1,67 @@
|
||||
// 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
|
||||
|
||||
// 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
|
||||
|
||||
/* 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 top & bottom at the #{$breakpoint} breakpoint */
|
||||
.py-#{$breakpoint}-#{$scale} {
|
||||
padding-top: #{$size} !important;
|
||||
padding-bottom: #{$size} !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
211
node_modules/primer-utilities/lib/typography.scss
generated
vendored
Normal file
211
node_modules/primer-utilities/lib/typography.scss
generated
vendored
Normal file
@@ -0,0 +1,211 @@
|
||||
// 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: 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 {
|
||||
font-size: 26px !important;
|
||||
|
||||
@include breakpoint(md) { font-size: $h1-size !important; }
|
||||
|
||||
}
|
||||
|
||||
/* Set the font size to 22px */
|
||||
.h2 {
|
||||
font-size: 22px !important;
|
||||
|
||||
@include breakpoint(md) { font-size: $h2-size !important; }
|
||||
}
|
||||
|
||||
/* Set the font size to 18px */
|
||||
.h3 {
|
||||
font-size: 18px !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} */
|
||||
.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 {
|
||||
font-size: 26px !important;
|
||||
|
||||
@include breakpoint(md) { font-size: $h1-size !important; }
|
||||
|
||||
}
|
||||
|
||||
/* Set the font size to 22px */
|
||||
.f2 {
|
||||
font-size: 22px !important;
|
||||
|
||||
@include breakpoint(md) { font-size: $h2-size !important; }
|
||||
}
|
||||
|
||||
/* Set the font size to 18px */
|
||||
.f3 {
|
||||
font-size: 18px !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 {
|
||||
font-size: 40px !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-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-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-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-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 {
|
||||
margin-bottom: 30px;
|
||||
font-size: $h3-size;
|
||||
font-weight: $font-weight-light;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
// 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.
|
||||
/* Set the line height to ultra condensed */
|
||||
.lh-condensed-ultra { line-height: $lh-condensed-ultra !important; }
|
||||
/* Set the line height to condensed */
|
||||
.lh-condensed { line-height: $lh-condensed !important; }
|
||||
/* Set the line height to default */
|
||||
.lh-default { line-height: $lh-default !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) {
|
||||
@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 styles
|
||||
/* Set the font weight to normal */
|
||||
.text-normal { 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 */
|
||||
.no-underline { text-decoration: none !important; }
|
||||
/* Don't wrap white space */
|
||||
.no-wrap { white-space: nowrap !important; }
|
||||
/* Allow long lines with no spaces to line break */
|
||||
.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(0, 0, 0, 0.25), 0 1px 25px rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
/* Add a light text shadow */
|
||||
.text-shadow-light {
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
88
node_modules/primer-utilities/lib/visibility-display.scss
generated
vendored
Normal file
88
node_modules/primer-utilities/lib/visibility-display.scss
generated
vendored
Normal file
@@ -0,0 +1,88 @@
|
||||
// Visibility and display utilities
|
||||
// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before, primer/selector-no-utility
|
||||
// stylelint-disable comment-empty-line-before
|
||||
|
||||
// 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) {
|
||||
.hide-sm {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $width-sm) and (max-width: $width-md) {
|
||||
.hide-md {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $width-md) and (max-width: $width-lg) {
|
||||
.hide-lg {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $width-lg) {
|
||||
.hide-xl {
|
||||
display: none !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;
|
||||
}
|
||||
Reference in New Issue
Block a user