mirror of https://github.com/thangisme/notes.git
Ignore node modules
This commit is contained in:
Patrick Marsceill
parent
aa5a4e529c
commit
8968860b4b
|
|
@ -3,3 +3,4 @@
|
|||
.sass-cache
|
||||
_site
|
||||
Gemfile.lock
|
||||
node_modules
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
//
|
||||
// Base element style overrides
|
||||
//
|
||||
// stylelint-disable selector-no-type
|
||||
// stylelint-disable selector-no-type, selector-max-type
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
//
|
||||
// Code and syntax highlighting
|
||||
//
|
||||
// stylelint-disable selector-no-qualifying-type, declaration-block-semicolon-newline-after,declaration-block-single-line-max-declarations, selector-no-type
|
||||
// stylelint-disable selector-no-qualifying-type, declaration-block-semicolon-newline-after,declaration-block-single-line-max-declarations, selector-no-type, selector-max-type
|
||||
|
||||
code {
|
||||
padding: 0.2em 0.15em;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
//
|
||||
// Styles for rendered markdown in the .main-content container
|
||||
//
|
||||
// stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors
|
||||
// stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type
|
||||
|
||||
.page-content {
|
||||
ul,
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
//
|
||||
// Tables
|
||||
//
|
||||
// stylelint-disable max-nesting-depth, selector-no-type
|
||||
// stylelint-disable max-nesting-depth, selector-no-type, selector-max-type
|
||||
|
||||
table {
|
||||
display: block;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
//
|
||||
// Typography
|
||||
//
|
||||
// stylelint-disable primer/selector-no-utility, selector-no-type
|
||||
// stylelint-disable primer/selector-no-utility, selector-no-type, selector-max-type
|
||||
|
||||
h1,
|
||||
.text-alpha {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
// variables
|
||||
@import "./lib/variables.scss";
|
||||
@import "./lib/variables/typography.scss";
|
||||
@import "./lib/variables/colors.scss";
|
||||
@import "./lib/variables/layout.scss";
|
||||
@import "./lib/variables/misc.scss";
|
||||
|
||||
// mixins
|
||||
@import "./lib/mixins/typography.scss";
|
||||
|
|
|
|||
|
|
@ -1,137 +1,160 @@
|
|||
// stylelint-disable block-closing-brace-newline-after
|
||||
|
||||
// Button color generator for primary and themed buttons
|
||||
|
||||
@mixin solid-btn($foreground: $text-gray-dark, $background: #eee) {
|
||||
color: $foreground;
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
|
||||
background-color: $background;
|
||||
background-image: linear-gradient(saturate(lighten($background, 13%), 8%), saturate(darken($background, 9%), 5%));
|
||||
border: 1px solid darken($background, 8%);
|
||||
// New button hotness
|
||||
@mixin btn-solid($color, $bg, $bg2) {
|
||||
color: $color;
|
||||
background-color: $bg2;
|
||||
background-image: linear-gradient(-180deg, $bg 0%, $bg2 90%);
|
||||
|
||||
.counter {
|
||||
color: saturate(darken($background, 9%), 5%);
|
||||
background: $foreground;
|
||||
}
|
||||
@if $bg == $gray-000 {
|
||||
&:focus,
|
||||
&.focus {
|
||||
box-shadow: $btn-input-focus-shadow;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&.zeroclipboard-is-hover,
|
||||
&.zeroclipboard-is-active {
|
||||
background-color: darken($background, 10%);
|
||||
background-image: linear-gradient(lighten($background, 8%), darken($background, 13%));
|
||||
border-color: darken($background, 12%);
|
||||
}
|
||||
&:hover,
|
||||
&.hover {
|
||||
background-color: darken($bg2, 3%);
|
||||
background-image: linear-gradient(-180deg, darken($bg, 3%) 0%, darken($bg2, 3%) 90%);
|
||||
background-position: 0 -$em-spacer-5;
|
||||
border-color: rgba($black, 0.35);
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.selected,
|
||||
&.zeroclipboard-is-active {
|
||||
background-color: darken($background, 15%);
|
||||
background-image: none;
|
||||
border-color: darken($background, 20%);
|
||||
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
&:active,
|
||||
&.selected,
|
||||
[open] > & {
|
||||
background-color: darken(desaturate($bg, 10%), 6%);
|
||||
background-image: none;
|
||||
border-color: rgba($black, 0.35); // repeat to avoid shift on click-drag off of button
|
||||
box-shadow: $btn-active-shadow;
|
||||
}
|
||||
|
||||
&.selected:hover {
|
||||
background-color: darken($background, 20%);
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&.disabled {
|
||||
&,
|
||||
&:hover {
|
||||
color: $foreground;
|
||||
cursor: default;
|
||||
background-color: mix(#fff, $background, 50%);
|
||||
background-image: linear-gradient(mix(#fff, $background, 60%), mix(#fff, darken($background, 5%), 45%));
|
||||
border-color: mix(#fff, $background, 40%);
|
||||
&:disabled,
|
||||
&.disabled {
|
||||
color: rgba($color, 0.4);
|
||||
background-color: $bg2;
|
||||
background-image: none;
|
||||
border-color: transparentize($black, 0.8); // back to default .btn
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
} @else {
|
||||
&:focus,
|
||||
&.focus {
|
||||
box-shadow: 0 0 0 0.2em rgba($bg, 0.4);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.hover {
|
||||
background-color: darken($bg2, 2%);
|
||||
background-image: linear-gradient(-180deg, darken($bg, 2%) 0%, darken($bg2, 2%) 90%);
|
||||
background-position: 0 -$em-spacer-5;
|
||||
border-color: $black-fade-50;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.selected,
|
||||
[open] > & {
|
||||
background-color: darken(mix($bg, $bg2, 50%), 7%);
|
||||
background-image: none;
|
||||
border-color: $black-fade-50; // repeat to avoid shift on click-drag off of button
|
||||
box-shadow: $btn-active-shadow;
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&.disabled {
|
||||
color: rgba($color, 0.75);
|
||||
background-color: mix($bg2, $white, 50%);
|
||||
background-image: none;
|
||||
border-color: transparentize($black, 0.8); // repeat .btn default to avoid shift on click-drag off of button
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.Counter {
|
||||
color: darken($bg, 8%);
|
||||
background-color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Button color generator for default-y buttons with grey bgs and colored text, like btn-danger
|
||||
// Inverse button hover style
|
||||
@mixin btn-inverse($color, $bg, $bg2) {
|
||||
color: $color;
|
||||
background-color: $bg;
|
||||
background-image: linear-gradient(-180deg, $bg 0%, $bg2 90%);
|
||||
|
||||
@mixin inverse-hover-btn($foreground: $text-gray-dark) {
|
||||
color: $foreground;
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 0.2em rgba($color, 0.4);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $text-white;
|
||||
background-color: $foreground;
|
||||
background-image: linear-gradient(lighten($foreground, 30%), lighten($foreground, 10%));
|
||||
border-color: $foreground;
|
||||
background-color: $color;
|
||||
background-image: linear-gradient(-180deg, lighten($color, 10%) 0%, $color 90%);
|
||||
border-color: $black-fade-50;
|
||||
|
||||
.Counter {
|
||||
color: $text-white;
|
||||
}
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.selected {
|
||||
&.selected,
|
||||
[open] > & {
|
||||
color: $text-white;
|
||||
background-color: darken($foreground, 5%);
|
||||
background-color: darken($color, 5%);
|
||||
background-image: none;
|
||||
border-color: darken($foreground, 8%);
|
||||
}
|
||||
|
||||
&.selected:hover {
|
||||
background-color: darken($foreground, 5%);
|
||||
border-color: $black-fade-50;
|
||||
box-shadow: $btn-active-shadow;
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&.disabled {
|
||||
&,
|
||||
&:hover {
|
||||
color: mix(#fff, $foreground, 50%);
|
||||
background-color: #efefef;
|
||||
background-image: linear-gradient(#fefefe, #efefef);
|
||||
border-color: #e1e1e1;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&.selected {
|
||||
.counter {
|
||||
color: $text-white;
|
||||
}
|
||||
color: rgba($color, 0.4);
|
||||
background-color: $bg2;
|
||||
background-image: none;
|
||||
border-color: transparentize($black, 0.8); // back to default .btn
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Outline color generator for btn-outline to make the hover state inverse the text and bg colors.
|
||||
|
||||
@mixin outline-btn($text-color: $text-blue, $bg-color: $bg-white) {
|
||||
@mixin btn-outline($text-color: $text-blue, $bg-color: $bg-white) {
|
||||
color: $text-color;
|
||||
background-color: $bg-color;
|
||||
background-image: none;
|
||||
border: 1px solid $border-gray;
|
||||
|
||||
.counter {
|
||||
background-color: rgba(0, 0, 0, 0.07);
|
||||
.Counter {
|
||||
background-color: rgba($black, 0.07);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&.selected,
|
||||
&.zeroclipboard-is-hover,
|
||||
&.zeroclipboard-is-active {
|
||||
[open] > & {
|
||||
color: $bg-color;
|
||||
background-color: $text-color;
|
||||
background-image: none;
|
||||
border-color: $text-color;
|
||||
|
||||
.counter {
|
||||
.Counter {
|
||||
color: $text-color;
|
||||
background-color: $bg-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.selected:hover {
|
||||
background-color: darken($text-color, 5%);
|
||||
&:focus {
|
||||
border-color: $text-color;
|
||||
box-shadow: 0 0 0 0.2em rgba($text-color, 0.4);
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&.disabled {
|
||||
&,
|
||||
&:hover {
|
||||
color: $text-gray;
|
||||
background-color: $bg-white;
|
||||
background-image: none;
|
||||
border-color: $border-gray;
|
||||
}
|
||||
color: $black-fade-30;
|
||||
background-color: $bg-white;
|
||||
border-color: $black-fade-15;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,21 +1,27 @@
|
|||
// Responsive media queries
|
||||
|
||||
@mixin breakpoint($breakpoint) {
|
||||
// Retrieves the value from the key
|
||||
$value: map-get($breakpoints, $breakpoint);
|
||||
|
||||
// If the key exists in the map
|
||||
@if $value != null {
|
||||
// Prints a media query based on the value
|
||||
@media (min-width: $value) {
|
||||
@content;
|
||||
}
|
||||
@if $breakpoint == "" {
|
||||
@content;
|
||||
}
|
||||
|
||||
// If the key doesn't exist in the map
|
||||
@else {
|
||||
@warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
|
||||
+ "Please make sure it is defined in `$breakpoints` map.";
|
||||
// Retrieves the value from the key
|
||||
$value: map-get($breakpoints, $breakpoint);
|
||||
|
||||
// If the key exists in the map
|
||||
@if $value != null {
|
||||
// Prints a media query based on the value
|
||||
@media (min-width: $value) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// If the key doesn't exist in the map
|
||||
@else {
|
||||
@warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
|
||||
+ "Please make sure it is defined in `$breakpoints` map.";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
// Generate a two-color caret for any element.
|
||||
@mixin double-caret($foreground: #fff, $background: #ddd) {
|
||||
@mixin double-caret($foreground: $text-white, $background: lighten($gray-300, 5%)) {
|
||||
&::after,
|
||||
&::before {
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -40,37 +40,45 @@
|
|||
}
|
||||
|
||||
// Responsive heading mixins
|
||||
// There are no responsive mixins for h5 and h6 because they are small
|
||||
// There are no responsive mixins for h4—h6 because they are small
|
||||
// and don't need to be smaller on mobile.
|
||||
@mixin h1-reponsive {
|
||||
font-size: 26px;
|
||||
@mixin f1-responsive {
|
||||
font-size: $h1-size-mobile;
|
||||
|
||||
// 32px on desktop
|
||||
@include breakpoint(md) { font-size: $h1-size; }
|
||||
|
||||
}
|
||||
|
||||
@mixin f2-responsive {
|
||||
font-size: $h2-size-mobile;
|
||||
|
||||
// 24px on desktop
|
||||
@include breakpoint(md) { font-size: $h2-size; }
|
||||
}
|
||||
|
||||
@mixin f3-responsive {
|
||||
font-size: $h3-size-mobile;
|
||||
|
||||
// 20px on desktop
|
||||
@include breakpoint(md) { font-size: $h3-size; }
|
||||
|
||||
}
|
||||
|
||||
// These use the mixins from above for responsive heading sizes.
|
||||
// The following mixins can be used where it's convenient or necessary to
|
||||
// couple the responsive font-size with the font-weight.
|
||||
@mixin h1-responsive {
|
||||
@include f1-responsive;
|
||||
font-weight: $font-weight-bold;
|
||||
|
||||
// Up to 32px in future
|
||||
@include breakpoint(md) { font-size: 30px; }
|
||||
|
||||
}
|
||||
|
||||
@mixin h2-responsive {
|
||||
font-size: 20px;
|
||||
@include f2-responsive;
|
||||
font-weight: $font-weight-bold;
|
||||
|
||||
// Up to 22px or 24px in future
|
||||
@include breakpoint(md) { font-size: 21px; }
|
||||
}
|
||||
|
||||
@mixin h3-responsive {
|
||||
font-size: 14px;
|
||||
@include f3-responsive;
|
||||
font-weight: $font-weight-bold;
|
||||
|
||||
@include breakpoint(md) { font-size: 16px; }
|
||||
|
||||
}
|
||||
|
||||
@mixin h4-responsive {
|
||||
font-size: 13px;
|
||||
font-weight: $font-weight-bold;
|
||||
|
||||
@include breakpoint(md) { font-size: 14px; }
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,114 @@
|
|||
//
|
||||
//
|
||||
// -------- Grays --------
|
||||
$gray-000: #fafbfc !default;
|
||||
$gray-100: #f6f8fa !default;
|
||||
$gray-200: #e1e4e8 !default;
|
||||
$gray-300: #d1d5da !default;
|
||||
$gray-400: #959da5 !default;
|
||||
$gray-500: #6a737d !default;
|
||||
$gray-600: #586069 !default;
|
||||
$gray-700: #444d56 !default;
|
||||
$gray-800: #2f363d !default;
|
||||
$gray-900: #24292e !default; // body font color
|
||||
|
||||
// -------- Blue --------
|
||||
$blue-000: #f1f8ff !default;
|
||||
$blue-100: #dbedff !default;
|
||||
$blue-200: #c8e1ff !default;
|
||||
$blue-300: #79b8ff !default;
|
||||
$blue-400: #2188ff !default;
|
||||
$blue-500: #0366d6 !default; // Default: Passes AA with #fff
|
||||
$blue-600: #005cc5 !default;
|
||||
$blue-700: #044289 !default;
|
||||
$blue-800: #032f62 !default;
|
||||
$blue-900: #05264c !default; // Passes with 1/2/300 blues
|
||||
|
||||
// -------- Green --------
|
||||
$green-000: #f0fff4 !default;
|
||||
$green-100: #dcffe4 !default;
|
||||
$green-200: #bef5cb !default;
|
||||
$green-300: #85e89d !default;
|
||||
$green-400: #34d058 !default;
|
||||
$green-500: #28a745 !default; // Default. passes AA Large
|
||||
$green-600: #22863a !default; // Text green, passes AA on #fff
|
||||
$green-700: #176f2c !default;
|
||||
$green-800: #165c26 !default;
|
||||
$green-900: #144620 !default;
|
||||
|
||||
// -------- Yellow --------
|
||||
$yellow-000: #fffdef !default;
|
||||
$yellow-100: #fffbdd !default;
|
||||
$yellow-200: #fff5b1 !default;
|
||||
$yellow-300: #ffea7f !default;
|
||||
$yellow-400: #ffdf5d !default;
|
||||
$yellow-500: #ffd33d !default;
|
||||
$yellow-600: #f9c513 !default;
|
||||
$yellow-700: #dbab09 !default;
|
||||
$yellow-800: #b08800 !default;
|
||||
$yellow-900: #735c0f !default;
|
||||
|
||||
// -------- Orange --------
|
||||
$orange-000: #fff8f2 !default;
|
||||
$orange-100: #ffebda !default;
|
||||
$orange-200: #ffd1ac !default;
|
||||
$orange-300: #ffab70 !default;
|
||||
$orange-400: #fb8532 !default;
|
||||
$orange-500: #f66a0a !default; // Default. passes AA Large with #fff
|
||||
$orange-600: #e36209 !default;
|
||||
$orange-700: #d15704 !default;
|
||||
$orange-800: #c24e00 !default;
|
||||
$orange-900: #a04100 !default;
|
||||
|
||||
// -------- Red --------
|
||||
$red-000: #ffeef0 !default;
|
||||
$red-100: #ffdce0 !default;
|
||||
$red-200: #fdaeb7 !default;
|
||||
$red-300: #f97583 !default;
|
||||
$red-400: #ea4a5a !default;
|
||||
$red-500: #d73a49 !default; // Default. passes AA
|
||||
$red-600: #cb2431 !default;
|
||||
$red-700: #b31d28 !default;
|
||||
$red-800: #9e1c23 !default;
|
||||
$red-900: #86181d !default;
|
||||
|
||||
// -------- Purple --------
|
||||
$purple-000: #f5f0ff !default;
|
||||
$purple-100: #e6dcfd !default;
|
||||
$purple-200: #d1bcf9 !default;
|
||||
$purple-300: #b392f0 !default;
|
||||
$purple-400: #8a63d2 !default;
|
||||
$purple-500: #6f42c1 !default; // passes AA with #fff
|
||||
$purple-600: #5a32a3 !default;
|
||||
$purple-700: #4c2889 !default;
|
||||
$purple-800: #3a1d6e !default;
|
||||
$purple-900: #29134e !default;
|
||||
|
||||
// -------- Fades --------
|
||||
// Black based on same hue as $gray-900
|
||||
$black: #1b1f23 !default;
|
||||
$white: #fff !default;
|
||||
|
||||
$black-fade-15: rgba($black, 0.15) !default;
|
||||
$black-fade-30: rgba($black, 0.3) !default;
|
||||
$black-fade-50: rgba($black, 0.5) !default;
|
||||
$black-fade-70: rgba($black, 0.7) !default;
|
||||
$black-fade-85: rgba($black, 0.85) !default;
|
||||
|
||||
$white-fade-15: rgba($white, 0.15) !default;
|
||||
$white-fade-30: rgba($white, 0.3) !default;
|
||||
$white-fade-50: rgba($white, 0.5) !default;
|
||||
$white-fade-70: rgba($white, 0.7) !default;
|
||||
$white-fade-85: rgba($white, 0.85) !default;
|
||||
|
||||
// -------- Color defaults --------
|
||||
$red: $red-500 !default;
|
||||
$purple: $purple-500 !default;
|
||||
$blue: $blue-500 !default;
|
||||
$green: $green-500 !default;
|
||||
$yellow: $yellow-500 !default;
|
||||
$orange: $orange-500 !default;
|
||||
|
||||
$gray-dark: $gray-900 !default;
|
||||
$gray-light: $gray-400 !default;
|
||||
$gray: $gray-500 !default;
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
@import "color-system.scss";
|
||||
// Color variables
|
||||
// stylelint-disable declaration-bang-space-before
|
||||
|
||||
// State indicators.
|
||||
$status-pending: desaturate($yellow-700, 15%) !default;
|
||||
|
||||
// Repository type colors
|
||||
// Should be able to deprecate these in future
|
||||
$repo-private-text: $black-fade-70 !default;
|
||||
$repo-private-bg: $yellow-000 !default;
|
||||
$repo-private-icon: transparentize($yellow-900, 0.5) !default;
|
||||
|
||||
// Highlight used for things like search
|
||||
$highlight-yellow: rgba(255, 247, 140, 0.5);
|
||||
|
||||
// Border colors
|
||||
$border-black-fade: $black-fade-15 !default;
|
||||
|
||||
$border-blue: $blue-500 !default;
|
||||
$border-blue-light: $blue-200 !default;
|
||||
|
||||
$border-green: $green-400 !default;
|
||||
$border-green-light: desaturate($green-300, 40%) !default;
|
||||
|
||||
$border-purple: $purple !default;
|
||||
|
||||
$border-red: $red !default;
|
||||
$border-red-light: desaturate($red-300, 60%) !default;
|
||||
|
||||
$border-purple: $purple !default;
|
||||
|
||||
$border-yellow: desaturate($yellow-300, 60%) !default;
|
||||
|
||||
$border-gray-dark: $gray-300 !default;
|
||||
$border-gray-darker: $gray-700 !default;
|
||||
$border-gray-light: lighten($gray-200, 3%) !default;
|
||||
$border-gray: $gray-200 !default;
|
||||
|
||||
// Background colors
|
||||
$bg-blue-light: $blue-000 !default;
|
||||
$bg-blue: $blue-500 !default;
|
||||
$bg-gray-dark: $gray-900 !default;
|
||||
$bg-gray-light: $gray-000 !default;
|
||||
$bg-gray: $gray-100 !default;
|
||||
$bg-green: $green-500 !default;
|
||||
$bg-green-light: $green-100 !default;
|
||||
$bg-orange: $orange-700 !default;
|
||||
$bg-purple: $purple-500 !default;
|
||||
$bg-purple-light: $purple-000 !default;
|
||||
$bg-red: $red-500 !default;
|
||||
$bg-red-light: $red-100 !default;
|
||||
$bg-white: $white !default;
|
||||
$bg-yellow: $yellow-500 !default;
|
||||
$bg-yellow-light: $yellow-200 !default;
|
||||
|
||||
// Text colors
|
||||
$text-blue: $blue-500 !default;
|
||||
$text-gray-dark: $gray-900 !default;
|
||||
$text-gray-light: $gray-500 !default;
|
||||
$text-gray: $gray-600 !default;
|
||||
$text-green: $green-500 !default;
|
||||
$text-orange: $orange-900 !default;
|
||||
$text-orange-light: $orange-600 !default;
|
||||
$text-purple: $purple !default;
|
||||
$text-red: $red-600 !default;
|
||||
$text-white: $white !default;
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
// Layout variables
|
||||
// stylelint-disable declaration-bang-space-before
|
||||
|
||||
// These are our margin and padding utility spacers. The default step size we
|
||||
// use is 8px. This gives us a key of:
|
||||
// 0 => 0px
|
||||
// 1 => 4px
|
||||
// 2 => 8px
|
||||
// 3 => 16px
|
||||
// 4 => 24px
|
||||
// 5 => 32px
|
||||
// 6 => 40px
|
||||
$spacer: 8px !default;
|
||||
$spacers: (
|
||||
0,
|
||||
round($spacer / 2),
|
||||
$spacer,
|
||||
$spacer * 2,
|
||||
$spacer * 3,
|
||||
$spacer * 4,
|
||||
$spacer * 5
|
||||
) !default;
|
||||
|
||||
// Aliases for easy use
|
||||
$spacer-0: nth($spacers, 1) !default; // 0
|
||||
$spacer-1: nth($spacers, 2) !default; // 4px
|
||||
$spacer-2: nth($spacers, 3) !default; // 8px
|
||||
$spacer-3: nth($spacers, 4) !default; // 16px
|
||||
$spacer-4: nth($spacers, 5) !default; // 24px
|
||||
$spacer-5: nth($spacers, 6) !default; // 32px
|
||||
$spacer-6: nth($spacers, 7) !default; // 40px
|
||||
|
||||
// Em spacer variables
|
||||
$em-spacer-1: 0.0625em !default; // 1/16
|
||||
$em-spacer-2: 0.125em !default; // 1/8
|
||||
$em-spacer-3: 0.25em !default; // 1/4
|
||||
$em-spacer-4: 0.375em !default; // 3/8
|
||||
$em-spacer-5: 0.5em !default; // 1/2
|
||||
$em-spacer-6: 0.75em !default; // 3/4
|
||||
|
||||
// Fixed-width container variables
|
||||
$container-width: 980px !default;
|
||||
$grid-gutter: 10px !default;
|
||||
|
||||
// Breakpoint widths
|
||||
$width-xs: 0;
|
||||
$width-sm: 544px;
|
||||
$width-md: 768px;
|
||||
$width-lg: 1012px;
|
||||
$width-xl: 1280px;
|
||||
|
||||
// Responsive container widths
|
||||
$container-md: $width-md !default;
|
||||
$container-lg: $width-lg !default;
|
||||
$container-xl: $width-xl !default;
|
||||
|
||||
// Breakpoints
|
||||
$breakpoints: (
|
||||
// Small screen / phone
|
||||
sm: $width-sm,
|
||||
// Medium screen / tablet
|
||||
md: $width-md,
|
||||
// Large screen / desktop (980 + (16 * 2)) <= container + gutters
|
||||
lg: $width-lg,
|
||||
// Extra large screen / wide desktop
|
||||
xl: $width-xl
|
||||
) !default;
|
||||
|
||||
$responsive-variants: ("": "");
|
||||
@each $key in map-keys($breakpoints) {
|
||||
$responsive-variants: map-merge($responsive-variants, ($key: "-#{$key}"));
|
||||
}
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
// Miscellaneous variables
|
||||
// stylelint-disable declaration-bang-space-before
|
||||
|
||||
// Border size
|
||||
$border-width: 1px !default;
|
||||
$border-color: $border-gray !default;
|
||||
$border-style: solid !default;
|
||||
$border: $border-width $border-color $border-style !default;
|
||||
$border-radius: 3px !default;
|
||||
|
||||
// Custom explore grid border
|
||||
$exploregrid-item-border-radius: 4px;
|
||||
|
||||
// Box shadow
|
||||
$box-shadow: 0 1px 1px rgba($black, 0.1) !default;
|
||||
$box-shadow-medium: 0 1px 5px $black-fade-15 !default;
|
||||
$box-shadow-large: 0 1px 15px $black-fade-15 !default;
|
||||
$box-shadow-extra-large: 0 10px 50px rgba($black, 0.07) !default;
|
||||
|
||||
// Tooltips
|
||||
$tooltip-max-width: 250px !default;
|
||||
$tooltip-background-color: $black;
|
||||
$tooltip-text-color: $white !default;
|
||||
$tooltip-delay: 0.4s !default;
|
||||
$tooltip-duration: 0.1s !default;
|
||||
|
||||
// Should be moved into custom github css
|
||||
$stats-switcher-py: 10px;
|
||||
// Future proof this `height` value by finding the computed line-height, then
|
||||
// adding the total value of the vertical padding. This var is used to toggle
|
||||
// between the stats bar and language breakdown.
|
||||
$stats-viewport-height: ($body-font-size * $body-line-height) + ($stats-switcher-py * 2);
|
||||
|
||||
$min_tab_size: 1;
|
||||
$max_tab_size: 12;
|
||||
|
||||
// Button and form variables
|
||||
$form-control-shadow: inset 0 1px 2px rgba($black, 0.075);
|
||||
$btn-input-focus-shadow: 0 0 0 0.2em rgba($blue, 0.3);
|
||||
$btn-active-shadow: inset 0 0.15em 0.3em $black-fade-15;
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
// Typography variables
|
||||
// stylelint-disable declaration-bang-space-before
|
||||
|
||||
// Heading sizes - mobile
|
||||
// h4—h6 remain the same size on both mobile & desktop
|
||||
$h00-size-mobile: 40px !default;
|
||||
$h0-size-mobile: 32px !default;
|
||||
$h1-size-mobile: 26px !default;
|
||||
$h2-size-mobile: 22px !default;
|
||||
$h3-size-mobile: 18px !default;
|
||||
|
||||
// Heading sizes - desktop
|
||||
$h00-size: 48px !default;
|
||||
$h0-size: 40px !default;
|
||||
$h1-size: 32px !default;
|
||||
$h2-size: 24px !default;
|
||||
$h3-size: 20px !default;
|
||||
$h4-size: 16px !default;
|
||||
$h5-size: 14px !default;
|
||||
$h6-size: 12px !default;
|
||||
|
||||
$font-size-small: 12px !default;
|
||||
|
||||
// Font weights
|
||||
$font-weight-bold: 600 !default;
|
||||
$font-weight-semibold: 500 !default;
|
||||
$font-weight-normal: 400 !default;
|
||||
$font-weight-light: 300 !default;
|
||||
|
||||
// Line heights
|
||||
$lh-condensed-ultra: 1 !default;
|
||||
$lh-condensed: 1.25 !default;
|
||||
$lh-default: 1.5 !default;
|
||||
|
||||
// Font stacks
|
||||
$body-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
|
||||
|
||||
// Monospace font stack
|
||||
$mono-font: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace !default;
|
||||
|
||||
// The base body size
|
||||
$body-font-size: 14px !default;
|
||||
$body-line-height: $lh-default !default;
|
||||
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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; }
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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; }
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue