mirror of
https://github.com/primer/css.git
synced 2024-09-11 16:36:07 +03:00
commit
c539fcd9bb
134
package-lock.json
generated
134
package-lock.json
generated
@ -14699,14 +14699,81 @@
|
||||
}
|
||||
},
|
||||
"stylelint-config-primer": {
|
||||
"version": "8.1.0",
|
||||
"resolved": "https://registry.npmjs.org/stylelint-config-primer/-/stylelint-config-primer-8.1.0.tgz",
|
||||
"integrity": "sha512-o15Bzr7FaX2+v+Lrby9s98jFjFYh8njo5rf2r5Z9q8+dSLdBtDrx9jeoQt31zmEgahta85aC6J31O0uKwVylsg==",
|
||||
"version": "9.0.0",
|
||||
"resolved": "https://registry.npmjs.org/stylelint-config-primer/-/stylelint-config-primer-9.0.0.tgz",
|
||||
"integrity": "sha512-jM/D1qB33wMb6Q19iWHDfowB9Sb4LwbR4wtCWz9qeZIapGJ1nclVxJ63HgDherzXl1Im2pXa69RdOX51trrR0Q==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"anymatch": "^3.1.1",
|
||||
"globby": "^9.2.0",
|
||||
"postcss-value-parser": "^4.0.2",
|
||||
"string.prototype.matchall": "^3.0.1",
|
||||
"stylelint-no-unsupported-browser-features": "^1.0.0",
|
||||
"stylelint-order": "^2.0.0",
|
||||
"stylelint-scss": "^3.10.0"
|
||||
"stylelint-scss": "^3.10.0",
|
||||
"tap-map": "^1.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"anymatch": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz",
|
||||
"integrity": "sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"normalize-path": "^3.0.0",
|
||||
"picomatch": "^2.0.4"
|
||||
}
|
||||
},
|
||||
"globby": {
|
||||
"version": "9.2.0",
|
||||
"resolved": "https://registry.npmjs.org/globby/-/globby-9.2.0.tgz",
|
||||
"integrity": "sha512-ollPHROa5mcxDEkwg6bPt3QbEf4pDQSNtd6JPL1YvOvAo/7/0VAm9TccUeoTmarjPw4pfUthSCqcyfNB1I3ZSg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@types/glob": "^7.1.1",
|
||||
"array-union": "^1.0.2",
|
||||
"dir-glob": "^2.2.2",
|
||||
"fast-glob": "^2.2.6",
|
||||
"glob": "^7.1.3",
|
||||
"ignore": "^4.0.3",
|
||||
"pify": "^4.0.1",
|
||||
"slash": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"ignore": {
|
||||
"version": "4.0.6",
|
||||
"resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
|
||||
"integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
|
||||
"dev": true
|
||||
},
|
||||
"slash": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
|
||||
"integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"stylelint-disable": {
|
||||
"version": "0.1.5",
|
||||
"resolved": "https://registry.npmjs.org/stylelint-disable/-/stylelint-disable-0.1.5.tgz",
|
||||
"integrity": "sha512-EJqGoTCG0HU9sE8zC51g8LJ+E4HYLEGBXJv4/ThOvq0KbGEA2gByyL5KFD7gat0KLB+lpAUvFKbRNvXxo3KTqg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"anymatch": "^3.1.1",
|
||||
"minimist": "^1.2.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"anymatch": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz",
|
||||
"integrity": "sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"normalize-path": "^3.0.0",
|
||||
"picomatch": "^2.0.4"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"stylelint-no-unsupported-browser-features": {
|
||||
@ -14740,6 +14807,29 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"stylelint-only": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/stylelint-only/-/stylelint-only-1.0.1.tgz",
|
||||
"integrity": "sha512-QaO/egPJIOo+NL6RVrXGdswLirJfbGCzUHTrX30rNVo4QzUYTTLK0aIGyJMPqOZnTlirwxRYYXzin4Nw87Q5sg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"anymatch": "^3.1.1",
|
||||
"minimist": "^1.2.0",
|
||||
"tempfile": "^3.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"anymatch": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz",
|
||||
"integrity": "sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"normalize-path": "^3.0.0",
|
||||
"picomatch": "^2.0.4"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"stylelint-order": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/stylelint-order/-/stylelint-order-2.2.1.tgz",
|
||||
@ -14752,9 +14842,9 @@
|
||||
}
|
||||
},
|
||||
"stylelint-scss": {
|
||||
"version": "3.11.0",
|
||||
"resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-3.11.0.tgz",
|
||||
"integrity": "sha512-2rA9hV8+ebvzGyRBQt/KCLDS1o11SEVRzOBlhAbqk4u1PVnWcjUhRhKIGGGWcyM4QE9t+YWivbnq6kjdeHg2Nw==",
|
||||
"version": "3.12.0",
|
||||
"resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-3.12.0.tgz",
|
||||
"integrity": "sha512-RvZqmCnILJ0etFBjSGTXQKOspYjF+jjtFdUGoqjuis2YILy/3LCtgSdBP2I+LUOfRT+eJFCrb8g+j3ZND4FaNA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"lodash": "^4.17.15",
|
||||
@ -14762,14 +14852,6 @@
|
||||
"postcss-resolve-nested-selector": "^0.1.1",
|
||||
"postcss-selector-parser": "^6.0.2",
|
||||
"postcss-value-parser": "^4.0.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"postcss-value-parser": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.0.2.tgz",
|
||||
"integrity": "sha512-LmeoohTpp/K4UiyQCwuGWlONxXamGzCMtFxLq4W1nZVGIQLYvMCJx3yAF9qyyuFpflABI9yVdtJAqbihOsCsJQ==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"stylis": {
|
||||
@ -14925,6 +15007,12 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"tap-map": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/tap-map/-/tap-map-1.0.0.tgz",
|
||||
"integrity": "sha512-qYUKYf/zPDpj9xL8eb3mBcGN+8qHcW4Yvem02SapcBZAw9PQHHrozIu+bma3o5MdDbcmgKK88hv5rCTGR8RZfA==",
|
||||
"dev": true
|
||||
},
|
||||
"tapable": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.1.tgz",
|
||||
@ -14946,6 +15034,22 @@
|
||||
"memoizerific": "^1.11.3"
|
||||
}
|
||||
},
|
||||
"temp-dir": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-2.0.0.tgz",
|
||||
"integrity": "sha512-aoBAniQmmwtcKp/7BzsH8Cxzv8OL736p7v1ihGb5e9DJ9kTwGWHrQrVB5+lfVDzfGrdRzXch+ig7LHaY1JTOrg==",
|
||||
"dev": true
|
||||
},
|
||||
"tempfile": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/tempfile/-/tempfile-3.0.0.tgz",
|
||||
"integrity": "sha512-uNFCg478XovRi85iD42egu+eSFUmmka750Jy7L5tfHI5hQKKtbPnxaSaXAbBqCDYrw3wx4tXjKwci4/QmsZJxw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"temp-dir": "^2.0.0",
|
||||
"uuid": "^3.3.2"
|
||||
}
|
||||
},
|
||||
"term-size": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/term-size/-/term-size-1.2.0.tgz",
|
||||
|
@ -73,7 +73,10 @@
|
||||
"style-loader": "^0.18.2",
|
||||
"styled-components": "4.1.2",
|
||||
"stylelint": "^10.1.0",
|
||||
"stylelint-config-primer": "^8.1.0",
|
||||
"stylelint-config-primer": "^9.0.0",
|
||||
"stylelint-disable": "^0.1.5",
|
||||
"stylelint-only": "^1.0.1",
|
||||
"stylelint-scss": "^3.12.0",
|
||||
"table": "5.2.3",
|
||||
"typographic-base": "^1.0.4",
|
||||
"unified": "^7.1.0",
|
||||
|
@ -3,10 +3,12 @@
|
||||
.flash {
|
||||
position: relative;
|
||||
padding: $spacer-3;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $blue-800;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: $blue-100;
|
||||
border: 1px solid $border-black-fade;
|
||||
border-radius: 3px;
|
||||
border: $border-width $border-style $border-black-fade;
|
||||
border-radius: $border-radius;
|
||||
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
@ -40,6 +42,7 @@
|
||||
// Action button
|
||||
.flash-action {
|
||||
float: right;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-top: -3px;
|
||||
margin-left: $spacer-4;
|
||||
}
|
||||
@ -49,26 +52,31 @@
|
||||
//
|
||||
|
||||
.flash-warn {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $yellow-900;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: $yellow-100;
|
||||
border-color: $black-fade-15;
|
||||
border-color: $border-black-fade;
|
||||
}
|
||||
|
||||
.flash-error {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $red-900;
|
||||
background-color: $red-100;
|
||||
border-color: $black-fade-15;
|
||||
background-color: $bg-red-light;
|
||||
border-color: $border-black-fade;
|
||||
}
|
||||
|
||||
.flash-success {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $green-800;
|
||||
background-color: $green-100;
|
||||
border-color: $black-fade-15;
|
||||
background-color: $bg-green-light;
|
||||
border-color: $border-black-fade;
|
||||
}
|
||||
|
||||
.flash-full {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-top: -1px;
|
||||
border-width: 1px 0;
|
||||
border-width: $border-width 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
@ -87,7 +95,9 @@
|
||||
// FIXME deprecate this
|
||||
.warning {
|
||||
padding: $em-spacer-5;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-bottom: 0.8em;
|
||||
font-weight: $font-weight-bold;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: $yellow-100;
|
||||
}
|
||||
|
@ -11,6 +11,8 @@
|
||||
right: -15%;
|
||||
bottom: -9%;
|
||||
background-color: $bg-white; // For transparent backgrounds
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-radius: 2px;
|
||||
// stylelint-disable-next-line primer/box-shadow
|
||||
box-shadow: -2px -2px 0 rgba($white, 0.8);
|
||||
}
|
||||
|
@ -30,9 +30,11 @@
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
box-sizing: content-box;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-right: -11px;
|
||||
background-color: $bg-white;
|
||||
border-right: $border-width $border-style $white;
|
||||
border-right: $border-width $border-style $border-white;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-radius: 2px;
|
||||
transition: margin 0.1s ease-in-out;
|
||||
|
||||
@ -47,6 +49,7 @@
|
||||
|
||||
// stylelint-disable selector-max-type
|
||||
img {
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-radius: 2px;
|
||||
}
|
||||
// stylelint-enable selector-max-type
|
||||
@ -60,6 +63,7 @@
|
||||
|
||||
&:hover {
|
||||
.avatar {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
@ -77,7 +81,7 @@
|
||||
.avatar.avatar-more {
|
||||
z-index: 1;
|
||||
margin-right: 0;
|
||||
background: $gray-100;
|
||||
background: $bg-gray;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
@ -85,17 +89,20 @@
|
||||
display: block;
|
||||
height: 20px;
|
||||
content: "";
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-radius: 2px;
|
||||
outline: $border-width $border-style $white;
|
||||
}
|
||||
|
||||
&::before {
|
||||
width: 17px;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background: $gray-200;
|
||||
}
|
||||
|
||||
&::after {
|
||||
width: 14px;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background: $gray-300;
|
||||
}
|
||||
}
|
||||
@ -109,11 +116,13 @@
|
||||
|
||||
&:hover .avatar {
|
||||
margin-right: 0;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-left: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar.avatar-more {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background: $gray-300;
|
||||
|
||||
&::before {
|
||||
@ -122,14 +131,15 @@
|
||||
|
||||
&::after {
|
||||
width: 2px;
|
||||
background: $gray-100;
|
||||
background: $bg-gray;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar {
|
||||
margin-right: 0;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-left: -11px;
|
||||
border-right: 0;
|
||||
border-left: $border-width $border-style $white;
|
||||
border-left: $border-width $border-style $border-white;
|
||||
}
|
||||
}
|
||||
|
@ -3,9 +3,10 @@
|
||||
overflow: hidden; // Ensure page layout in Firefox should images fail to load
|
||||
line-height: $lh-condensed-ultra;
|
||||
vertical-align: middle;
|
||||
border-radius: 3px;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
// stylelint-disable-next-line primer/borders
|
||||
.avatar-small { border-radius: 2px; }
|
||||
|
||||
.avatar-link {
|
||||
@ -16,5 +17,6 @@
|
||||
// User for example on /stars and /user for grids of avatars
|
||||
.avatar-group-item {
|
||||
display: inline-block;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
@ -4,7 +4,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: $white;
|
||||
background-color: $bg-white;
|
||||
border-radius: 50%;
|
||||
box-shadow: $box-shadow-medium;
|
||||
}
|
||||
@ -45,6 +45,7 @@
|
||||
left: 0;
|
||||
width: 100%;
|
||||
content: "";
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-bottom: 2px dashed $border-gray;
|
||||
}
|
||||
|
||||
|
@ -40,11 +40,13 @@ strong {
|
||||
hr,
|
||||
.rule {
|
||||
height: 0;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin: 15px 0;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-bottom: 1px solid lighten($gray-300, 5%);
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-bottom: $border-width $border-style lighten($gray-300, 5%);
|
||||
@include clearfix();
|
||||
}
|
||||
|
||||
|
@ -3,14 +3,19 @@
|
||||
|
||||
kbd {
|
||||
display: inline-block;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: ($spacer-1 - 1) ($spacer-1 + 1);
|
||||
font: 11px $mono-font;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
line-height: 10px;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $gray-700;
|
||||
vertical-align: middle;
|
||||
background-color: $bg-gray-light;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border: $border-style $border-width $border-gray-dark;
|
||||
border-bottom-color: $border-gray-dark;
|
||||
border-radius: $border-radius;
|
||||
// stylelint-disable-next-line primer/box-shadow
|
||||
box-shadow: inset 0 -1px 0 $border-gray-dark;
|
||||
}
|
||||
|
10
src/base/normalize.scss
vendored
10
src/base/normalize.scss
vendored
@ -162,7 +162,7 @@ h1 {
|
||||
|
||||
mark {
|
||||
background-color: #ff0;
|
||||
color: #000;
|
||||
color: $text-black;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -234,7 +234,7 @@ samp {
|
||||
*/
|
||||
|
||||
figure {
|
||||
margin: 1em 40px;
|
||||
margin: 1em $spacer-6;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -269,7 +269,7 @@ textarea {
|
||||
*/
|
||||
|
||||
optgroup {
|
||||
font-weight: bold;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -333,9 +333,9 @@ button:-moz-focusring,
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
border: $border-width $border-style #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
padding: 0.35em 0.625em $em-spacer-6;
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -23,10 +23,12 @@ h6 { @include h6; }
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
small {
|
||||
// stylelint-disable-next-line primer/typography
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
|
@ -5,11 +5,12 @@
|
||||
text-align: center;
|
||||
|
||||
code {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 2px 5px 3px;
|
||||
font-size: $h5-size;
|
||||
background: $bg-white;
|
||||
border: 1px solid $border-gray-light;
|
||||
border-radius: 3px;
|
||||
border: $border-width $border-style $border-gray-light;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
img {
|
||||
@ -22,14 +23,16 @@
|
||||
margin-right: $spacer-1;
|
||||
margin-bottom: $spacer-2;
|
||||
margin-left: $spacer-1;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: lighten($gray-400, 5%);
|
||||
}
|
||||
|
||||
.blankslate-capped {
|
||||
border-radius: 0 0 3px 3px;
|
||||
border-radius: 0 0 $border-radius $border-radius;
|
||||
}
|
||||
|
||||
.blankslate-spacious {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: ($spacer-6 * 2) $spacer-6;
|
||||
}
|
||||
|
||||
|
@ -2,7 +2,7 @@
|
||||
// Intended to replace simple-box, boxed-group, and table-list
|
||||
|
||||
.Box {
|
||||
background-color: $white;
|
||||
background-color: $bg-white;
|
||||
border: $border-width $border-style $border-gray-dark;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
@ -26,6 +26,7 @@
|
||||
.Box-btn-octicon {
|
||||
&.btn-octicon {
|
||||
padding: $spacer-2 $spacer-3;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin: (-$spacer-2) (-$spacer-3);
|
||||
line-height: $lh-condensed;
|
||||
}
|
||||
@ -58,6 +59,7 @@
|
||||
.Box-btn-octicon {
|
||||
&.btn-octicon {
|
||||
padding: $spacer-4;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin: (-$spacer-4) (-$spacer-4);
|
||||
}
|
||||
}
|
||||
@ -70,6 +72,7 @@
|
||||
|
||||
.Box-header {
|
||||
padding: $spacer-3;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin: (-$border-width) (-$border-width) 0;
|
||||
background-color: $bg-gray;
|
||||
border-color: $border-gray-dark;
|
||||
@ -90,8 +93,11 @@
|
||||
|
||||
// Ensures bottom-border doesn't poke out when .Box-body used without box-footer
|
||||
&:last-of-type {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-bottom: -$border-width;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-bottom-right-radius: 2px;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-bottom-left-radius: 2px;
|
||||
}
|
||||
}
|
||||
@ -99,18 +105,23 @@
|
||||
// Box rows
|
||||
.Box-row {
|
||||
padding: $spacer-3;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-top: -1px;
|
||||
list-style-type: none; // To account for applying Box component to a list
|
||||
border-top: $border-width $border-style $border-gray;
|
||||
|
||||
&:first-of-type {
|
||||
border-top-color: transparent;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-top-left-radius: 2px;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-top-right-radius: 2px;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-bottom-right-radius: 2px;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-bottom-left-radius: 2px;
|
||||
}
|
||||
|
||||
@ -119,6 +130,7 @@
|
||||
&.Box-row--unread,
|
||||
// .unread to be deprecated with .Box-row-unread
|
||||
&.unread {
|
||||
// stylelint-disable-next-line primer/box-shadow
|
||||
box-shadow: 2px 0 0 $blue inset;
|
||||
}
|
||||
|
||||
@ -202,6 +214,7 @@
|
||||
|
||||
.Box-footer {
|
||||
padding: $spacer-3;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-top: -1px; // prevents double border when used with .Box-body
|
||||
border-top: $border-width $border-style $border-gray;
|
||||
}
|
||||
@ -261,6 +274,7 @@
|
||||
// Box row highlight themes
|
||||
|
||||
.Box-row--yellow {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: $yellow-100;
|
||||
}
|
||||
|
||||
@ -278,6 +292,7 @@
|
||||
// Increase specificity when btn-octicon is used because comes after .Box in the cascade
|
||||
&.btn-octicon {
|
||||
padding: $spacer-3 $spacer-3;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin: (-$spacer-3) (-$spacer-3);
|
||||
line-height: $lh-default; // override btn-octicon line-height
|
||||
}
|
||||
|
@ -2,14 +2,19 @@
|
||||
// stylelint-disable selector-max-type
|
||||
.branch-name {
|
||||
display: inline-block;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 2px 6px;
|
||||
font: 12px $mono-font;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: rgba($black, 0.6);
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: lighten($blue-100, 3%);
|
||||
border-radius: 3px;
|
||||
border-radius: $border-radius;
|
||||
|
||||
.octicon {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin: 1px -2px 0 0;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: desaturate($blue-300, 70%);
|
||||
}
|
||||
}
|
||||
|
@ -1,5 +1,6 @@
|
||||
.breadcrumb-item {
|
||||
display: inline-block;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-left: -0.35em;
|
||||
white-space: nowrap;
|
||||
list-style: none;
|
||||
@ -7,6 +8,7 @@
|
||||
&::after {
|
||||
padding-right: $em-spacer-5;
|
||||
padding-left: $em-spacer-5;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $border-gray;
|
||||
content: "/";
|
||||
}
|
||||
|
@ -4,9 +4,11 @@
|
||||
.btn {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 6px 12px;
|
||||
font-size: $body-font-size;
|
||||
font-weight: $font-weight-bold;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
line-height: 20px; // Specifically not inherit our `<body>` default
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
@ -15,7 +17,8 @@
|
||||
background-repeat: repeat-x;
|
||||
background-position: -1px -1px;
|
||||
background-size: 110% 110%;
|
||||
border: 1px solid transparentize($black, 0.8);
|
||||
border: $border-width $border-style $border-color-button;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-radius: 0.25em;
|
||||
appearance: none; // Corrects inability to style clickable `input` types in iOS.
|
||||
|
||||
@ -31,8 +34,9 @@
|
||||
|
||||
// Darken for just a tad more contrast against the button background
|
||||
.Counter {
|
||||
color: $gray-600;
|
||||
color: $text-gray;
|
||||
text-shadow: none;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: rgba($black, 0.1);
|
||||
}
|
||||
|
||||
@ -82,8 +86,10 @@
|
||||
//
|
||||
// Tweak `line-height` to make them smaller.
|
||||
.btn-sm {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 3px 10px;
|
||||
font-size: $font-size-small;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
@ -91,6 +97,7 @@
|
||||
.btn-large {
|
||||
padding: $em-spacer-6 1.25em;
|
||||
font-size: inherit;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
@ -126,6 +133,7 @@
|
||||
&:disabled {
|
||||
&,
|
||||
&:hover {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: rgba($gray-600, 0.5);
|
||||
cursor: default;
|
||||
}
|
||||
@ -159,7 +167,9 @@
|
||||
// Icon-only buttons
|
||||
.btn-octicon {
|
||||
display: inline-block;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 5px;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-left: 5px;
|
||||
line-height: $lh-condensed-ultra;
|
||||
color: $text-gray;
|
||||
@ -172,9 +182,11 @@
|
||||
&:hover { color: $text-blue; }
|
||||
|
||||
&.disabled {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $gray-400;
|
||||
cursor: default;
|
||||
|
||||
// stylelint-disable-next-line primer/colors
|
||||
&:hover { color: $gray-400; }
|
||||
}
|
||||
}
|
||||
|
@ -20,6 +20,7 @@
|
||||
position: relative;
|
||||
top: -1px;
|
||||
display: inline-block;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-left: 5px;
|
||||
line-height: 0;
|
||||
}
|
||||
@ -29,24 +30,31 @@
|
||||
.ellipsis-expander {
|
||||
display: inline-block;
|
||||
height: 12px;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 0 5px 5px;
|
||||
font-size: $font-size-small;
|
||||
font-weight: $font-weight-bold;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
line-height: 6px;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $gray-700;
|
||||
text-decoration: none;
|
||||
vertical-align: middle;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background: lighten($gray-300, 5%);
|
||||
border: 0;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-radius: 1px;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: darken($gray-300, 4%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: $text-white;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: $blue-400;
|
||||
}
|
||||
}
|
||||
@ -56,17 +64,19 @@
|
||||
// A container that is used for social bubbles counts.
|
||||
.social-count {
|
||||
float: left;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 3px 10px;
|
||||
font-size: $font-size-small;
|
||||
font-weight: $font-weight-bold;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
line-height: 20px;
|
||||
color: $text-gray-dark;
|
||||
vertical-align: middle;
|
||||
background-color: $bg-white;
|
||||
border: 1px solid transparentize($black, 0.8); // match with .btn
|
||||
border: $border-width $border-style $border-color-button;
|
||||
border-left: 0;
|
||||
border-top-right-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
border-top-right-radius: $border-radius;
|
||||
border-bottom-right-radius: $border-radius;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
|
@ -8,7 +8,8 @@
|
||||
height: 0;
|
||||
vertical-align: middle;
|
||||
content: "";
|
||||
border-style: solid;
|
||||
border-style: $border-style;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-width: $spacer-1 $spacer-1 0;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
@ -25,11 +26,13 @@
|
||||
width: 160px;
|
||||
padding-top: $spacer-1;
|
||||
padding-bottom: $spacer-1;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-top: 2px;
|
||||
list-style: none;
|
||||
background-color: $bg-white;
|
||||
background-clip: padding-box;
|
||||
border: $border-width $border-style $black-fade-15;
|
||||
border: $border-width $border-style $border-black-fade;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-radius: $spacer-1;
|
||||
box-shadow: $box-shadow-large;
|
||||
|
||||
@ -41,13 +44,15 @@
|
||||
}
|
||||
|
||||
&::before {
|
||||
border: $spacer-2 solid transparent;
|
||||
border-bottom-color: $black-fade-15;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border: $spacer-2 $border-style transparent;
|
||||
border-bottom-color: $border-black-fade;
|
||||
}
|
||||
|
||||
&::after {
|
||||
border: 7px solid transparent;
|
||||
border-bottom-color: $white;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border: 7px $border-style transparent;
|
||||
border-bottom-color: $border-white;
|
||||
}
|
||||
|
||||
// stylelint-disable-next-line selector-max-type
|
||||
@ -136,7 +141,7 @@
|
||||
right: -$spacer-3;
|
||||
left: auto;
|
||||
border-color: transparent;
|
||||
border-left-color: $black-fade-15;
|
||||
border-left-color: $border-black-fade;
|
||||
}
|
||||
|
||||
&::after {
|
||||
@ -144,7 +149,7 @@
|
||||
right: -14px;
|
||||
left: auto;
|
||||
border-color: transparent;
|
||||
border-left-color: $white;
|
||||
border-left-color: $border-white;
|
||||
}
|
||||
}
|
||||
|
||||
@ -159,14 +164,14 @@
|
||||
top: $spacer-2;
|
||||
left: -$spacer-3;
|
||||
border-color: transparent;
|
||||
border-right-color: $black-fade-15;
|
||||
border-right-color: $border-black-fade;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: 11px;
|
||||
left: -14px;
|
||||
border-color: transparent;
|
||||
border-right-color: $white;
|
||||
border-right-color: $border-white;
|
||||
}
|
||||
}
|
||||
|
||||
@ -174,6 +179,7 @@
|
||||
top: auto;
|
||||
bottom: 100%;
|
||||
left: 0;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-bottom: 3px;
|
||||
|
||||
&::before,
|
||||
@ -185,19 +191,25 @@
|
||||
&::before {
|
||||
bottom: -$spacer-2;
|
||||
left: 9px;
|
||||
border-top: $spacer-2 solid $black-fade-15;
|
||||
border-right: $spacer-2 solid transparent;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-top: $spacer-2 $border-style $border-black-fade;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-right: $spacer-2 $border-style transparent;
|
||||
border-bottom: 0;
|
||||
border-left: $spacer-2 solid transparent;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-left: $spacer-2 $border-style transparent;
|
||||
}
|
||||
|
||||
&::after {
|
||||
bottom: -7px;
|
||||
left: 10px;
|
||||
border-top: 7px solid $white;
|
||||
border-right: 7px solid transparent;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-top: 7px $border-style $border-white;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-right: 7px $border-style transparent;
|
||||
border-bottom: 0;
|
||||
border-left: 7px solid transparent;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-left: 7px $border-style transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@ -250,20 +262,23 @@
|
||||
|
||||
// Dark dropdowns
|
||||
.dropdown-menu-dark {
|
||||
color: $white;
|
||||
color: $text-white;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background: $gray-800;
|
||||
border-color: $gray-700;
|
||||
border-color: $border-gray-darker;
|
||||
box-shadow: $box-shadow-large;
|
||||
|
||||
&::before {
|
||||
border-bottom-color: $gray-700;
|
||||
border-bottom-color: $border-gray-darker;
|
||||
}
|
||||
|
||||
&::after {
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-bottom-color: $gray-800;
|
||||
}
|
||||
|
||||
.dropdown-header {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $gray-300;
|
||||
}
|
||||
|
||||
@ -279,30 +294,33 @@
|
||||
|
||||
&.dropdown-menu-w {
|
||||
&::before {
|
||||
border-color: transparent transparent transparent $gray-700;
|
||||
border-color: transparent transparent transparent $border-gray-darker;
|
||||
}
|
||||
|
||||
&::after {
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-color: transparent transparent transparent $gray-800;
|
||||
}
|
||||
}
|
||||
|
||||
&.dropdown-menu-e {
|
||||
&::before {
|
||||
border-color: transparent $gray-700 transparent transparent;
|
||||
border-color: transparent $border-gray-darker transparent transparent;
|
||||
}
|
||||
|
||||
&::after {
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-color: transparent $gray-800 transparent transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&.dropdown-menu-ne {
|
||||
&::before {
|
||||
border-color: $gray-700 transparent transparent transparent;
|
||||
border-color: $border-gray-darker transparent transparent transparent;
|
||||
}
|
||||
|
||||
&::after {
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-color: $gray-800 transparent transparent transparent;
|
||||
}
|
||||
}
|
||||
|
@ -18,21 +18,24 @@ label {
|
||||
.form-control,
|
||||
.form-select {
|
||||
min-height: 34px;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 6px $spacer-2;
|
||||
font-size: $h4-size;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
line-height: 20px;
|
||||
color: $text-gray-dark;
|
||||
vertical-align: middle;
|
||||
background-color: $bg-white;
|
||||
background-repeat: no-repeat; // Repeat and position set for form states (success, error, etc)
|
||||
background-position: right 8px center; // For form validation. This keeps images 8px from right and centered vertically.
|
||||
border: 1px solid $border-gray-dark;
|
||||
border-radius: 3px;
|
||||
border: $border-width $border-style $border-gray-dark;
|
||||
border-radius: $border-radius;
|
||||
outline: none;
|
||||
box-shadow: $form-control-shadow;
|
||||
|
||||
&.focus,
|
||||
&:focus {
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-color: $blue-400;
|
||||
outline: none;
|
||||
box-shadow: $form-control-shadow, $btn-input-focus-shadow;
|
||||
@ -54,6 +57,7 @@ label {
|
||||
// Inputs to be used against dark backgrounds.
|
||||
.input-dark {
|
||||
color: $text-white;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: $white-fade-15;
|
||||
border-color: transparent;
|
||||
|
||||
@ -64,7 +68,9 @@ label {
|
||||
|
||||
&.focus,
|
||||
&:focus {
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-color: $black-fade-30;
|
||||
// stylelint-disable-next-line primer/box-shadow
|
||||
box-shadow: 0 0 0 0.2em rgba($blue-300, 0.4);
|
||||
}
|
||||
}
|
||||
@ -77,9 +83,12 @@ label {
|
||||
// Mini inputs, to match .minibutton
|
||||
.input-sm {
|
||||
min-height: 28px;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding-top: 3px;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding-bottom: 3px;
|
||||
font-size: $font-size-small;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
@ -115,7 +124,9 @@ label {
|
||||
//
|
||||
// For checkboxes and radio button selections.
|
||||
.form-checkbox {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding-left: 20px;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin: 15px 0;
|
||||
vertical-align: middle;
|
||||
|
||||
@ -123,16 +134,19 @@ label {
|
||||
em.highlight {
|
||||
position: relative;
|
||||
left: -$spacer-1;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 2px $spacer-1;
|
||||
font-style: normal;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background: $yellow-100;
|
||||
border-radius: 3px;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
input[type=checkbox],
|
||||
input[type=radio] {
|
||||
float: left;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin: 5px 0 0 -20px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
@ -142,7 +156,7 @@ label {
|
||||
margin: 0;
|
||||
font-size: $font-size-small;
|
||||
font-weight: $font-weight-normal;
|
||||
color: $gray-600;
|
||||
color: $text-gray;
|
||||
}
|
||||
}
|
||||
|
||||
@ -165,18 +179,21 @@ label {
|
||||
// Wrap field groups in `<div.hfields>` to lay them out horizontally - great for
|
||||
// the top of pages with autosave.
|
||||
.hfields {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin: 15px 0;
|
||||
@include clearfix;
|
||||
|
||||
.form-group {
|
||||
float: left;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin: 0 30px 0 0;
|
||||
|
||||
dt {
|
||||
label {
|
||||
display: inline-block;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin: 5px 0 0;
|
||||
color: $gray-600;
|
||||
color: $text-gray;
|
||||
}
|
||||
|
||||
img {
|
||||
@ -188,9 +205,11 @@ label {
|
||||
|
||||
.btn {
|
||||
float: left;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin: 28px 25px 0 -20px;
|
||||
}
|
||||
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
.form-select { margin-top: 5px; }
|
||||
}
|
||||
|
||||
@ -212,6 +231,7 @@ input::-webkit-inner-spin-button {
|
||||
float: right;
|
||||
|
||||
+ .btn {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
@ -219,12 +239,15 @@ input::-webkit-inner-spin-button {
|
||||
|
||||
.form-warning {
|
||||
padding: $spacer-2 10px;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin: 10px 0;
|
||||
font-size: $h5-size;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $yellow-900;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background: $yellow-100;
|
||||
border: 1px solid $border-yellow;
|
||||
border-radius: 3px;
|
||||
border: $border-width $border-style $border-yellow;
|
||||
border-radius: $border-radius;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
|
@ -5,12 +5,14 @@
|
||||
// stylelint-disable selector-max-compound-selectors
|
||||
// stylelint-disable selector-max-type
|
||||
.form-group {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin: 15px 0;
|
||||
|
||||
// Text fields
|
||||
.form-control {
|
||||
width: 440px;
|
||||
max-width: 100%;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-right: 5px;
|
||||
background-color: $bg-gray-light;
|
||||
|
||||
@ -41,6 +43,7 @@
|
||||
|
||||
// The Label
|
||||
dt {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin: 0 0 6px;
|
||||
}
|
||||
|
||||
@ -51,10 +54,12 @@
|
||||
&.flattened dt {
|
||||
float: left;
|
||||
margin: 0;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
&.flattened dd {
|
||||
// stylelint-disable-next-line primer/typography
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
@ -83,6 +88,7 @@
|
||||
|
||||
&.required {
|
||||
dt label::after {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding-left: 5px;
|
||||
color: $text-red;
|
||||
content: "*";
|
||||
@ -133,13 +139,15 @@
|
||||
z-index: 10;
|
||||
display: block; // Show up in errored/warn state
|
||||
max-width: 450px; // Keep our long errors readable
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 5px $spacer-2;
|
||||
margin: $spacer-1 0 0;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
font-size: 13px;
|
||||
font-weight: $font-weight-normal;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-radius: 3px;
|
||||
border-style: $border-style;
|
||||
border-width: $border-width;
|
||||
border-radius: $border-radius;
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
@ -151,15 +159,19 @@
|
||||
height: 0;
|
||||
pointer-events: none;
|
||||
content: " ";
|
||||
border: solid transparent;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border: $border-style transparent;
|
||||
}
|
||||
|
||||
&::after {
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-width: 5px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-left: -1px;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-width: 6px;
|
||||
}
|
||||
}
|
||||
@ -167,11 +179,14 @@
|
||||
|
||||
&.warn {
|
||||
.warning {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $yellow-900;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: $yellow-100;
|
||||
border-color: $border-yellow;
|
||||
|
||||
&::after {
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-bottom-color: $yellow-100;
|
||||
}
|
||||
|
||||
@ -187,11 +202,13 @@
|
||||
}
|
||||
|
||||
.error {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $red-900;
|
||||
background-color: $bg-red-light;
|
||||
border-color: $border-red-light;
|
||||
|
||||
&::after {
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-bottom-color: $bg-red-light;
|
||||
}
|
||||
|
||||
@ -209,6 +226,7 @@
|
||||
color: $text-gray;
|
||||
|
||||
.spinner {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-right: 3px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
@ -6,7 +6,10 @@
|
||||
max-width: 100%;
|
||||
height: 34px;
|
||||
padding-right: $spacer-4;
|
||||
background: $bg-white url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC") no-repeat right 8px center;
|
||||
background-color: $bg-white;
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 8px center;
|
||||
background-size: 8px 10px;
|
||||
appearance: none;
|
||||
|
||||
@ -23,7 +26,9 @@
|
||||
.select-sm {
|
||||
height: 28px;
|
||||
min-height: 28px;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding-top: 3px;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding-bottom: 3px;
|
||||
font-size: $font-size-small;
|
||||
|
||||
|
@ -5,6 +5,7 @@ dl.form-group > dd {
|
||||
&.is-autocheck-loading,
|
||||
&.is-autocheck-successful,
|
||||
&.is-autocheck-errored {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding-right: 30px; // Leave some space for our validation icons
|
||||
}
|
||||
|
||||
@ -53,6 +54,7 @@ dl.form-group > dd {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-left: 5px;
|
||||
|
||||
.octicon {
|
||||
@ -68,6 +70,7 @@ dl.form-group > dd {
|
||||
|
||||
.octicon-check {
|
||||
display: inline-block;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $green;
|
||||
fill: $green;
|
||||
}
|
||||
@ -96,7 +99,9 @@ dl.form-group > dd {
|
||||
|
||||
.status-indicator-loading {
|
||||
width: 16px;
|
||||
background: url("/images/spinners/octocat-spinner-32-EAF2F5.gif") 0 0 no-repeat;
|
||||
background-image: url("/images/spinners/octocat-spinner-32-EAF2F5.gif");
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 0;
|
||||
background-size: 16px;
|
||||
}
|
||||
|
||||
@ -114,16 +119,20 @@ dl.form-group > dd {
|
||||
// Previously part of `_forms.scss` in Primer. Needs accounting for.
|
||||
|
||||
.drag-and-drop {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 7px 10px;
|
||||
margin: 0;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
font-size: 13px;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
line-height: 16px;
|
||||
color: $text-gray;
|
||||
background-color: $gray-000;
|
||||
border: 1px solid darken($gray-300, 5%);
|
||||
background-color: $bg-gray-light;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border: $border-width $border-style darken($gray-300, 5%);
|
||||
border-top: 0;
|
||||
border-bottom-right-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
border-bottom-right-radius: $border-radius;
|
||||
border-bottom-left-radius: $border-radius;
|
||||
|
||||
.default,
|
||||
.loading,
|
||||
@ -193,7 +202,9 @@ dl.form-group > dd {
|
||||
.manual-file-chooser {
|
||||
position: absolute;
|
||||
width: 240px;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 5px;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-left: -80px;
|
||||
cursor: pointer;
|
||||
opacity: 0.0001;
|
||||
@ -208,6 +219,7 @@ dl.form-group > dd {
|
||||
.manual-file-chooser {
|
||||
top: 0;
|
||||
padding: 0;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
line-height: 34px;
|
||||
}
|
||||
}
|
||||
@ -216,13 +228,14 @@ dl.form-group > dd {
|
||||
.upload-enabled {
|
||||
textarea {
|
||||
display: block;
|
||||
border-bottom: 1px dashed lighten($gray-300, 5%);
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-bottom: $border-width dashed lighten($gray-300, 5%);
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
&.focused {
|
||||
border-radius: 3px;
|
||||
border-radius: $border-radius;
|
||||
box-shadow: $form-control-shadow, $btn-input-focus-shadow;
|
||||
|
||||
.form-control {
|
||||
@ -230,6 +243,7 @@ dl.form-group > dd {
|
||||
}
|
||||
|
||||
.drag-and-drop {
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-color: lighten($blue-400, 8%);
|
||||
}
|
||||
}
|
||||
@ -238,6 +252,7 @@ dl.form-group > dd {
|
||||
// Dropping a file on top
|
||||
.dragover textarea,
|
||||
.dragover .drag-and-drop {
|
||||
// stylelint-disable-next-line primer/box-shadow
|
||||
box-shadow: rgba(#c9ff00, 1) 0 0 3px;
|
||||
}
|
||||
|
||||
@ -255,7 +270,8 @@ dl.form-group > dd {
|
||||
}
|
||||
|
||||
.comment {
|
||||
border: 1px solid darken($gray-300, 5%);
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border: $border-width $border-style darken($gray-300, 5%);
|
||||
}
|
||||
|
||||
.comment-form-error { margin-bottom: $spacer-2; }
|
||||
@ -284,6 +300,7 @@ dl.form-group > dd {
|
||||
// Used in our boxed-group-less form styles. Give the sumbit button enough space
|
||||
// to breathe without the need for the extra hr.
|
||||
.form-action-spacious {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
@ -302,6 +319,7 @@ div.composer {
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
.composer .tabnav { margin: 0 0 10px; }
|
||||
|
||||
// Misc CSS
|
||||
@ -309,23 +327,27 @@ div.composer {
|
||||
// Previously part of `_forms.scss` in Primer. Needs accounting for.
|
||||
|
||||
h2.account {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin: 15px 0 0;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
font-size: 18px;
|
||||
font-weight: $font-weight-normal;
|
||||
color: $gray-600;
|
||||
color: $text-gray;
|
||||
}
|
||||
|
||||
p.explain {
|
||||
position: relative;
|
||||
font-size: $font-size-small;
|
||||
color: $gray-600;
|
||||
color: $text-gray;
|
||||
|
||||
strong {
|
||||
color: $text-gray-dark;
|
||||
}
|
||||
|
||||
.octicon {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-right: 5px;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $gray-400;
|
||||
}
|
||||
|
||||
|
@ -37,6 +37,7 @@
|
||||
}
|
||||
|
||||
.input-group-button:first-child .btn {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-right: -1px;
|
||||
}
|
||||
|
||||
@ -47,5 +48,6 @@
|
||||
}
|
||||
|
||||
.input-group-button:last-child .btn {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
@ -4,6 +4,7 @@
|
||||
padding: $spacer-3;
|
||||
font-size: $h5-size;
|
||||
line-height: $lh-default;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $white-fade-70;
|
||||
background-color: $bg-gray-dark;
|
||||
align-items: center;
|
||||
@ -24,11 +25,12 @@
|
||||
|
||||
.Header-link {
|
||||
font-weight: $font-weight-bold;
|
||||
color: $white;
|
||||
color: $text-white;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $white-fade-70;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
@ -1,12 +1,15 @@
|
||||
// Counters are rounded-corner badges for numbers
|
||||
.Counter {
|
||||
display: inline-block;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 2px 5px;
|
||||
font-size: $font-size-small;
|
||||
font-weight: $font-weight-bold;
|
||||
line-height: $lh-condensed-ultra;
|
||||
color: $gray-600;
|
||||
color: $text-gray;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: rgba($black, 0.08);
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-radius: 20px;
|
||||
|
||||
&:empty {
|
||||
@ -16,10 +19,12 @@
|
||||
|
||||
.Counter--gray-light {
|
||||
color: $text-gray-dark;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: $black-fade-15;
|
||||
}
|
||||
|
||||
.Counter--gray {
|
||||
color: $white;
|
||||
color: $text-white;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: $gray;
|
||||
}
|
||||
|
@ -16,6 +16,7 @@
|
||||
display: inline-block;
|
||||
width: $spacer-2;
|
||||
height: $spacer-2;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-left: 1px;
|
||||
}
|
||||
|
||||
|
@ -2,11 +2,15 @@
|
||||
|
||||
.IssueLabel {
|
||||
height: 20px;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 0.15em $spacer-1;
|
||||
font-size: $h6-size;
|
||||
font-weight: $font-weight-bold;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
line-height: 15px;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-radius: 2px;
|
||||
// stylelint-disable-next-line primer/box-shadow
|
||||
box-shadow: inset 0 -1px 0 rgba($black, 0.12);
|
||||
|
||||
.g-emoji {
|
||||
@ -31,6 +35,7 @@
|
||||
|
||||
.g-emoji {
|
||||
display: inline-block;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
|
@ -15,12 +15,15 @@
|
||||
.label,
|
||||
.Label {
|
||||
display: inline-block;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 3px $spacer-1;
|
||||
font-size: $font-size-small;
|
||||
font-weight: $font-weight-bold;
|
||||
line-height: $lh-condensed-ultra; // prevent inheritance from changing proportions
|
||||
color: $text-white;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-radius: 2px;
|
||||
// stylelint-disable-next-line primer/box-shadow
|
||||
box-shadow: inset 0 -1px 0 rgba($black, 0.12);
|
||||
|
||||
&:hover {
|
||||
@ -33,26 +36,30 @@
|
||||
// Commonly used across the site to indicate a particular role. For example,
|
||||
// "repo owner" within code comments or role in organizations.
|
||||
.Label--gray {
|
||||
color: $gray-600;
|
||||
color: $text-gray;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: lighten($gray-200, 3%);
|
||||
}
|
||||
|
||||
.Label--outline {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-top: -1px; // offsets the 1px border
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-bottom: -1px; // offsets the 1px border
|
||||
font-weight: $font-weight-normal;
|
||||
color: $text-gray;
|
||||
background-color: transparent;
|
||||
border: 1px solid $black-fade-15;
|
||||
border: $border-width $border-style $border-black-fade;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.Label--outline-green {
|
||||
color: $text-green;
|
||||
border: 1px solid $border-green;
|
||||
border: $border-width $border-style $border-green;
|
||||
}
|
||||
|
||||
.Label--gray-darker {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: $gray;
|
||||
}
|
||||
|
||||
|
@ -12,18 +12,22 @@
|
||||
display: inline-block;
|
||||
padding: $spacer-1 $spacer-2;
|
||||
font-weight: $font-weight-bold;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
line-height: 20px;
|
||||
color: $text-white;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: $gray-500;
|
||||
border-radius: 3px;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
// stylelint-disable-next-line primer/colors
|
||||
.State--green { background-color: darken($green-400, 5%); }
|
||||
|
||||
.State--purple { background-color: $bg-purple; }
|
||||
|
||||
// stylelint-disable-next-line primer/colors
|
||||
.State--red { background-color: $red-600; }
|
||||
|
||||
.State--small {
|
||||
|
@ -2,6 +2,7 @@
|
||||
.markdown-body .csv-data {
|
||||
td,
|
||||
th {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 5px;
|
||||
overflow: hidden;
|
||||
font-size: $font-size-small;
|
||||
@ -11,6 +12,7 @@
|
||||
}
|
||||
|
||||
.blob-num {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 10px $spacer-2 9px;
|
||||
text-align: right;
|
||||
background: $bg-white;
|
||||
@ -21,7 +23,7 @@
|
||||
|
||||
th {
|
||||
font-weight: $font-weight-bold;
|
||||
background: $gray-100;
|
||||
background: $bg-gray;
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
|
@ -3,9 +3,12 @@
|
||||
// Inline code snippets
|
||||
code,
|
||||
tt {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 0.2em 0.4em;
|
||||
margin: 0;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
font-size: 85%;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: rgba($black, 0.05);
|
||||
border-radius: $border-radius;
|
||||
|
||||
@ -21,6 +24,7 @@
|
||||
> code {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
font-size: 100%;
|
||||
word-break: normal;
|
||||
white-space: pre;
|
||||
@ -42,9 +46,11 @@
|
||||
pre {
|
||||
padding: $spacer-3;
|
||||
overflow: auto;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
font-size: 85%;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
line-height: 1.45;
|
||||
background-color: $gray-100;
|
||||
background-color: $bg-gray;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
|
@ -15,7 +15,7 @@
|
||||
line-height: $lh-condensed;
|
||||
|
||||
.octicon-link {
|
||||
color: $black;
|
||||
color: $text-black;
|
||||
vertical-align: middle;
|
||||
visibility: hidden;
|
||||
}
|
||||
@ -35,18 +35,23 @@
|
||||
}
|
||||
|
||||
h1 {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding-bottom: 0.3em;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
font-size: 2em;
|
||||
border-bottom: 1px solid lighten($gray-200, 3%);
|
||||
border-bottom: $border-width $border-style $border-gray-light;
|
||||
}
|
||||
|
||||
h2 {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding-bottom: 0.3em;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
font-size: 1.5em;
|
||||
border-bottom: 1px solid lighten($gray-200, 3%);
|
||||
border-bottom: $border-width $border-style $border-gray-light;
|
||||
}
|
||||
|
||||
h3 {
|
||||
// stylelint-disable-next-line primer/typography
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
@ -55,11 +60,13 @@
|
||||
}
|
||||
|
||||
h5 {
|
||||
// stylelint-disable-next-line primer/typography
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
h6 {
|
||||
// stylelint-disable-next-line primer/typography
|
||||
font-size: 0.85em;
|
||||
color: $gray-500;
|
||||
color: $text-gray-light;
|
||||
}
|
||||
}
|
||||
|
@ -11,10 +11,12 @@
|
||||
background-color: $bg-white;
|
||||
|
||||
&[align=right] {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
&[align=left] {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding-right: 20px;
|
||||
}
|
||||
}
|
||||
@ -37,10 +39,13 @@
|
||||
display: block;
|
||||
float: left;
|
||||
width: auto;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 7px;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin: 13px 0 0;
|
||||
overflow: hidden;
|
||||
border: 1px solid lighten($gray-300, 5%);
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border: $border-width $border-style lighten($gray-300, 5%);
|
||||
}
|
||||
|
||||
span img {
|
||||
@ -50,6 +55,7 @@
|
||||
|
||||
span span {
|
||||
display: block;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 5px 0 0;
|
||||
clear: both;
|
||||
color: $text-gray-dark;
|
||||
@ -63,6 +69,7 @@
|
||||
|
||||
> span {
|
||||
display: block;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin: 13px auto 0;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
@ -81,6 +88,7 @@
|
||||
|
||||
> span {
|
||||
display: block;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin: 13px 0 0;
|
||||
overflow: hidden;
|
||||
text-align: right;
|
||||
@ -95,10 +103,12 @@
|
||||
span.float-left {
|
||||
display: block;
|
||||
float: left;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-right: 13px;
|
||||
overflow: hidden;
|
||||
|
||||
span {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin: 13px 0 0;
|
||||
}
|
||||
}
|
||||
@ -106,11 +116,13 @@
|
||||
span.float-right {
|
||||
display: block;
|
||||
float: right;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-left: 13px;
|
||||
overflow: hidden;
|
||||
|
||||
> span {
|
||||
display: block;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin: 13px auto 0;
|
||||
overflow: hidden;
|
||||
text-align: right;
|
||||
|
@ -6,6 +6,7 @@
|
||||
// Lists, Blockquotes & Such
|
||||
ul,
|
||||
ol {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding-left: 2em;
|
||||
|
||||
&.no-list {
|
||||
|
@ -45,12 +45,13 @@
|
||||
|
||||
// Link Colors
|
||||
.absent {
|
||||
color: $red-600;
|
||||
color: $text-red;
|
||||
}
|
||||
|
||||
.anchor {
|
||||
float: left;
|
||||
padding-right: $spacer-1;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-left: -20px;
|
||||
line-height: $lh-condensed-ultra;
|
||||
|
||||
@ -75,14 +76,17 @@
|
||||
height: $em-spacer-3;
|
||||
padding: 0;
|
||||
margin: $spacer-4 0;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: $gray-200;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 0 1em;
|
||||
color: $gray-500;
|
||||
border-left: 0.25em solid lighten($gray-300, 5%);
|
||||
color: $text-gray-light;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-left: 0.25em $border-style lighten($gray-300, 5%);
|
||||
|
||||
> :first-child {
|
||||
margin-top: 0;
|
||||
|
@ -13,16 +13,19 @@
|
||||
|
||||
th,
|
||||
td {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 6px 13px;
|
||||
border: 1px solid lighten($gray-300, 5%);
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border: $border-width $border-style lighten($gray-300, 5%);
|
||||
}
|
||||
|
||||
tr {
|
||||
background-color: $bg-white;
|
||||
border-top: 1px solid darken($gray-300, 4%);
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-top: $border-width $border-style darken($gray-300, 4%);
|
||||
|
||||
&:nth-child(2n) {
|
||||
background-color: $gray-100;
|
||||
background-color: $bg-gray;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -3,25 +3,28 @@
|
||||
padding: $spacer-3 $spacer-4;
|
||||
font-size: $h5-size;
|
||||
font-weight: $font-weight-semibold;
|
||||
color: $white;
|
||||
color: $text-white;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: $blue-mktg;
|
||||
border: 1px solid $blue-mktg;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border: $border-width $border-style $blue-mktg;
|
||||
border-radius: $border-radius;
|
||||
transition: $transition-time / 2;
|
||||
appearance: none; // Corrects inability to style clickable `input` types in iOS.
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
background-color: $blue-500;
|
||||
border-color: $blue-500;
|
||||
background-color: $bg-blue;
|
||||
border-color: $border-blue;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
// stylelint-disable-next-line primer/box-shadow
|
||||
box-shadow: 0 0 0 0.2em rgba($blue-500, 0.3);
|
||||
}
|
||||
|
||||
@ -34,33 +37,43 @@
|
||||
}
|
||||
|
||||
.btn-primary-mktg {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: $green-mktg;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-color: $green-mktg;
|
||||
|
||||
&:hover {
|
||||
background-color: $green-500;
|
||||
background-color: $bg-green;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-color: $green-500;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
// stylelint-disable-next-line primer/box-shadow
|
||||
box-shadow: 0 0 0 0.2em rgba($green-500, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-large-mktg {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 20px $spacer-5;
|
||||
font-size: $h4-size;
|
||||
}
|
||||
|
||||
.btn-outline-mktg {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $blue-mktg;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: rgba($white, 0);
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-color: rgba($blue-mktg, 0.5);
|
||||
|
||||
&:hover {
|
||||
color: $blue-500;
|
||||
color: $text-blue;
|
||||
text-decoration: none;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: rgba($white, 0);
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-color: rgba($blue-mktg, 1);
|
||||
}
|
||||
}
|
||||
@ -73,9 +86,10 @@
|
||||
}
|
||||
|
||||
.btn-transparent {
|
||||
color: $white;
|
||||
color: $text-white;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border: $border-width $border-style $white-fade-50;
|
||||
|
||||
&:hover,
|
||||
|
@ -24,11 +24,11 @@ $h000-size: 64px !default;
|
||||
$h000-size-mobile: 48px !default;
|
||||
|
||||
// Colors
|
||||
$green-mktg: mix($green-500, $green-400, 50%);
|
||||
$blue-mktg: mix($blue-400, $blue-500, 42%);
|
||||
$green-mktg: mix($green-500, $green-400, 50%) !default;
|
||||
$blue-mktg: mix($blue-400, $blue-500, 42%) !default;
|
||||
|
||||
// Animations
|
||||
$transition-time: 0.4s;
|
||||
$transition-time: 0.4s !default;
|
||||
|
||||
// Increases primer-core scale first by 8px for spacer-7 then by 16px step increments for spacer-8 to spacer-12
|
||||
// i.e. After 40px, we have 48, 64, 80, 96, etc.
|
||||
@ -39,8 +39,10 @@ $spacer-10: $spacer * 12 !default; // 96px
|
||||
$spacer-11: $spacer * 14 !default; // 112px
|
||||
$spacer-12: $spacer * 16 !default; // 128px
|
||||
|
||||
$marketingSpacers: $spacer-7, $spacer-8, $spacer-9, $spacer-10, $spacer-11, $spacer-12;
|
||||
$allSpacers: $spacer-1, $spacer-2, $spacer-3, $spacer-4, $spacer-5, $spacer-6, $spacer-7, $spacer-8, $spacer-9, $spacer-10, $spacer-11, $spacer-12;
|
||||
// TODO@14.0.0: remove $marketingSpacers (unused)
|
||||
$marketingSpacers: $spacer-7, $spacer-8, $spacer-9, $spacer-10, $spacer-11, $spacer-12 !default;
|
||||
// TODO@14.0.0: remove $allSpacers (unused)
|
||||
$allSpacers: $spacer-1, $spacer-2, $spacer-3, $spacer-4, $spacer-5, $spacer-6, $spacer-7, $spacer-8, $spacer-9, $spacer-10, $spacer-11, $spacer-12 !default;
|
||||
|
||||
$marketing-spacers: (
|
||||
7: $spacer-7,
|
||||
|
@ -6,6 +6,7 @@
|
||||
|
||||
&.small .filter-item {
|
||||
padding: $spacer-1 10px;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin: 0 0 2px;
|
||||
font-size: $font-size-small;
|
||||
}
|
||||
@ -25,6 +26,7 @@
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: $spacer-2 10px;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-bottom: 5px;
|
||||
overflow: hidden;
|
||||
font-size: $h5-size;
|
||||
@ -33,10 +35,11 @@
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
border-radius: $border-radius;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: lighten($gray-200, 3%);
|
||||
}
|
||||
|
||||
@ -57,6 +60,7 @@
|
||||
bottom: 2px;
|
||||
z-index: -1;
|
||||
display: inline-block;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: darken($gray-100, 2%);
|
||||
}
|
||||
}
|
||||
|
@ -3,38 +3,45 @@
|
||||
// A menu on the side of a page, defaults to left side. e.g. github.com/about
|
||||
|
||||
.menu {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-bottom: 15px;
|
||||
list-style: none;
|
||||
background-color: $bg-white;
|
||||
border: 1px solid $gray-300;
|
||||
border-radius: 3px;
|
||||
border: $border-width $border-style $border-gray-dark;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: $spacer-2 10px;
|
||||
border-bottom: 1px solid $gray-200;
|
||||
border-bottom: $border;
|
||||
|
||||
&:first-child {
|
||||
border-top: 0;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-top-left-radius: 2px;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-top-right-radius: 2px;
|
||||
|
||||
// stylelint-disable-next-line primer/borders
|
||||
&::before { border-top-left-radius: 2px; }
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-bottom-right-radius: 2px;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-bottom-left-radius: 2px;
|
||||
|
||||
// stylelint-disable-next-line primer/borders
|
||||
&::before { border-bottom-left-radius: 2px; }
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
background-color: $gray-100;
|
||||
background-color: $bg-gray;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
@ -50,12 +57,14 @@
|
||||
left: 0;
|
||||
width: 2px;
|
||||
content: "";
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: $orange-600;
|
||||
}
|
||||
}
|
||||
|
||||
.octicon {
|
||||
width: 16px;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-right: 5px;
|
||||
color: $text-gray-dark;
|
||||
text-align: center;
|
||||
@ -63,16 +72,19 @@
|
||||
|
||||
.Counter {
|
||||
float: right;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.menu-warning {
|
||||
float: right;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $red-900;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
float: left;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
@ -88,25 +100,32 @@
|
||||
padding: $spacer-2 10px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
font-size: 13px;
|
||||
font-weight: $font-weight-bold;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
line-height: 20px;
|
||||
color: $gray-600;
|
||||
color: $text-gray;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: darken($gray-100, 1%);
|
||||
border-bottom: 1px solid $gray-200;
|
||||
border-bottom: $border;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-top-left-radius: 2px;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-top-right-radius: 2px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-bottom-right-radius: 2px;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-bottom-left-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
@ -23,6 +23,7 @@
|
||||
|
||||
&:last-child {
|
||||
// makes sure there is a "bottom border" in case the list is not long enough
|
||||
// stylelint-disable-next-line primer/box-shadow
|
||||
box-shadow: 0 $border-width 0 $border-color;
|
||||
}
|
||||
|
||||
@ -45,11 +46,12 @@
|
||||
.SideNav-item:focus {
|
||||
color: $text-gray-dark;
|
||||
text-decoration: none;
|
||||
background-color: $gray-100;
|
||||
background-color: $bg-gray;
|
||||
outline: none;
|
||||
|
||||
// Bar on the left
|
||||
&::before {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: $gray-300;
|
||||
}
|
||||
}
|
||||
@ -66,6 +68,7 @@
|
||||
|
||||
// Bar on the left
|
||||
&::before {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: $orange-600;
|
||||
}
|
||||
}
|
||||
@ -88,7 +91,7 @@
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: $spacer-1 0;
|
||||
color: $blue-500;
|
||||
color: $text-blue;
|
||||
text-align: left;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
|
@ -1,14 +1,16 @@
|
||||
// Needs refactoring
|
||||
// Sub nav
|
||||
.subnav {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-bottom: 20px;
|
||||
|
||||
@include clearfix();
|
||||
}
|
||||
|
||||
.subnav-bordered {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid lighten($gray-200, 3%);
|
||||
border-bottom: $border-width $border-style $border-gray-light;
|
||||
}
|
||||
|
||||
.subnav-flush {
|
||||
@ -18,20 +20,23 @@
|
||||
.subnav-item {
|
||||
position: relative;
|
||||
float: left;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 6px 14px;
|
||||
font-weight: $font-weight-bold;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
line-height: 20px;
|
||||
color: $gray-600;
|
||||
border: 1px solid $gray-200;
|
||||
color: $text-gray;
|
||||
border: $border;
|
||||
|
||||
+ .subnav-item {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
background-color: $gray-100;
|
||||
background-color: $bg-gray;
|
||||
}
|
||||
|
||||
&.selected,
|
||||
@ -40,27 +45,30 @@
|
||||
z-index: 2;
|
||||
color: $text-white;
|
||||
background-color: $bg-blue;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-color: $blue;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-top-left-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
border-top-left-radius: $border-radius;
|
||||
border-bottom-left-radius: $border-radius;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-top-right-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
border-top-right-radius: $border-radius;
|
||||
border-bottom-right-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
.subnav-search {
|
||||
position: relative;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.subnav-search-input {
|
||||
width: 320px;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding-left: 30px;
|
||||
color: $text-gray;
|
||||
}
|
||||
@ -74,6 +82,7 @@
|
||||
top: 9px;
|
||||
left: 8px;
|
||||
display: block;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: darken($gray-300, 4%);
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
@ -81,6 +90,7 @@
|
||||
|
||||
.subnav-search-context {
|
||||
.btn {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $gray-700;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
@ -94,6 +104,7 @@
|
||||
}
|
||||
|
||||
+ .subnav-search {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-left: -1px;
|
||||
|
||||
.subnav-search-input {
|
||||
@ -116,5 +127,6 @@
|
||||
}
|
||||
|
||||
.subnav-spacer-right {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
@ -2,15 +2,18 @@
|
||||
// stylelint-disable selector-max-type
|
||||
.tabnav {
|
||||
margin-top: 0;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-bottom: 15px;
|
||||
border-bottom: 1px solid $gray-300;
|
||||
border-bottom: $border-width $border-style $border-gray-dark;
|
||||
|
||||
.Counter {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.tabnav-tabs {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
|
||||
@ -18,19 +21,20 @@
|
||||
display: inline-block;
|
||||
padding: $spacer-2 12px;
|
||||
font-size: $h5-size;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
line-height: 20px;
|
||||
color: $gray-600;
|
||||
color: $text-gray;
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
border: 1px solid transparent;
|
||||
border: $border-width $border-style transparent;
|
||||
border-bottom: 0;
|
||||
|
||||
&[aria-selected=true],
|
||||
&.selected {
|
||||
color: $text-gray-dark;
|
||||
background-color: $bg-white;
|
||||
border-color: $gray-300;
|
||||
border-radius: 3px 3px 0 0;
|
||||
border-color: $border-gray-dark;
|
||||
border-radius: $border-radius $border-radius 0 0;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
@ -47,12 +51,15 @@
|
||||
|
||||
.tabnav-extra {
|
||||
display: inline-block;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding-top: 10px;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-left: 10px;
|
||||
font-size: $font-size-small;
|
||||
color: $gray-600;
|
||||
color: $text-gray;
|
||||
|
||||
> .octicon {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
@ -71,5 +78,6 @@ a.tabnav-extra:hover {
|
||||
// the buttons to be floated or inline-block.
|
||||
|
||||
.tabnav-btn {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
@ -17,17 +17,18 @@
|
||||
line-height: $lh-default;
|
||||
color: $text-gray;
|
||||
text-align: center;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-bottom: 2px $border-style transparent;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $text-gray-dark;
|
||||
text-decoration: none;
|
||||
border-bottom-color: $gray-300;
|
||||
border-bottom-color: $border-gray-dark;
|
||||
transition: 0.2s ease;
|
||||
|
||||
.UnderlineNav-octicon {
|
||||
color: $gray-500;
|
||||
color: $text-gray-light;
|
||||
}
|
||||
}
|
||||
|
||||
@ -36,10 +37,11 @@
|
||||
&[aria-current] {
|
||||
font-weight: $font-weight-bold;
|
||||
color: $text-gray-dark;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-bottom-color: $orange-600;
|
||||
|
||||
.UnderlineNav-octicon {
|
||||
color: $gray-500;
|
||||
color: $text-gray-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -66,6 +68,7 @@
|
||||
}
|
||||
|
||||
.UnderlineNav-octicon {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $gray-400;
|
||||
}
|
||||
|
||||
|
@ -8,8 +8,11 @@
|
||||
em {
|
||||
position: relative;
|
||||
float: left;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 7px 12px;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-left: -1px;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
font-size: 13px;
|
||||
font-style: normal;
|
||||
font-weight: $font-weight-bold;
|
||||
@ -37,6 +40,7 @@
|
||||
&:focus {
|
||||
z-index: 2;
|
||||
text-decoration: none;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: darken($gray-100, 2%);
|
||||
border-color: $border-gray;
|
||||
}
|
||||
@ -56,6 +60,7 @@
|
||||
.disabled,
|
||||
.gap:hover,
|
||||
.disabled:hover {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $gray-300;
|
||||
cursor: default;
|
||||
background-color: $bg-gray-light;
|
||||
@ -64,7 +69,9 @@
|
||||
|
||||
// Unified centered pagination across the site
|
||||
.paginate-container {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-top: 20px;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-bottom: 15px;
|
||||
text-align: center;
|
||||
|
||||
|
@ -20,7 +20,9 @@
|
||||
|
||||
&::before {
|
||||
top: -$spacer-3;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-left: -9px;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border: $spacer-2 $border-style transparent;
|
||||
border-bottom-color: $border-black-fade;
|
||||
}
|
||||
@ -28,7 +30,9 @@
|
||||
&::after {
|
||||
top: -14px;
|
||||
margin-left: -$spacer-2;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border: 7px $border-style transparent;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-bottom-color: $bg-white;
|
||||
}
|
||||
}
|
||||
@ -50,6 +54,7 @@
|
||||
|
||||
&::after {
|
||||
bottom: -14px;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-top-color: $bg-white;
|
||||
}
|
||||
}
|
||||
@ -108,6 +113,7 @@
|
||||
}
|
||||
|
||||
&::before {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-top: -($spacer-2 + 1);
|
||||
}
|
||||
|
||||
@ -127,6 +133,7 @@
|
||||
|
||||
&::after {
|
||||
right: -14px;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-left-color: $bg-white;
|
||||
}
|
||||
}
|
||||
@ -142,6 +149,7 @@
|
||||
|
||||
&::after {
|
||||
left: -14px;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-right-color: $bg-white;
|
||||
}
|
||||
}
|
||||
|
@ -4,6 +4,7 @@
|
||||
display: flex;
|
||||
height: 8px;
|
||||
overflow: hidden;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: $gray-200;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
@ -41,7 +41,7 @@
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
background-color: $black-fade-50;
|
||||
background-color: $bg-black-fade;
|
||||
|
||||
@include breakpoint(sm) {
|
||||
display: none;
|
||||
@ -61,8 +61,10 @@
|
||||
overflow: hidden; // Enables border radius on scrollable child elements
|
||||
pointer-events: auto;
|
||||
flex-direction: column;
|
||||
background-color: $gray-100;
|
||||
background-color: $bg-gray;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-radius: $border-radius * 2;
|
||||
// stylelint-disable-next-line primer/box-shadow
|
||||
box-shadow: 0 0 18px rgba(0, 0, 0, 0.4);
|
||||
animation: SelectMenu-modal-animation 0.12s cubic-bezier(0, 0.1, 0.1, 1) backwards;
|
||||
|
||||
@ -187,7 +189,7 @@
|
||||
|
||||
& + & {
|
||||
// Add a top border only if the above element also is a list item
|
||||
border-top: $border-width $border-style lighten($gray-200, 3%);
|
||||
border-top: $border-width $border-style $border-gray-light;
|
||||
}
|
||||
|
||||
@include breakpoint(sm) {
|
||||
@ -215,6 +217,7 @@
|
||||
.SelectMenu-tabs {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-bottom: -$border-width; // hide border of element below
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
@ -241,6 +244,7 @@
|
||||
text-align: center;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
// stylelint-disable-next-line primer/box-shadow
|
||||
box-shadow: inset 0 -1px 0 $border-color;
|
||||
|
||||
@include breakpoint(sm) {
|
||||
@ -256,6 +260,7 @@
|
||||
z-index: 1; // Keeps box-shadow visible when hovering
|
||||
color: $text-gray-dark;
|
||||
background-color: $bg-white;
|
||||
// stylelint-disable-next-line primer/box-shadow
|
||||
box-shadow: 0 0 0 1px $border-color;
|
||||
|
||||
@include breakpoint(sm) {
|
||||
@ -287,7 +292,7 @@
|
||||
font-size: $font-size-small;
|
||||
font-weight: $font-weight-bold;
|
||||
color: $text-gray-light;
|
||||
background-color: $gray-100;
|
||||
background-color: $bg-gray;
|
||||
border-top: $border;
|
||||
border-bottom: $border;
|
||||
|
||||
@ -335,6 +340,7 @@
|
||||
|
||||
// Show bottom "border" for the last item when the list doesn't take up the whole height
|
||||
.SelectMenu-item:last-child {
|
||||
// stylelint-disable-next-line primer/box-shadow
|
||||
box-shadow: 0 $border-width 0 lighten($gray-200, 3%);
|
||||
}
|
||||
}
|
||||
@ -377,26 +383,29 @@
|
||||
body:not(.intent-mouse) .SelectMenu-item:focus,
|
||||
.SelectMenu-item:hover {
|
||||
color: $text-white;
|
||||
background-color: $blue-500;
|
||||
background-color: $bg-blue;
|
||||
}
|
||||
|
||||
.SelectMenu-item:active {
|
||||
color: $text-white;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: $blue-400;
|
||||
}
|
||||
|
||||
body:not(.intent-mouse) .SelectMenu-tab:focus {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: $blue-100;
|
||||
}
|
||||
|
||||
.SelectMenu-tab:not([aria-checked="true"]):hover {
|
||||
color: $text-gray-dark;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: $gray-200;
|
||||
}
|
||||
|
||||
.SelectMenu-tab:not([aria-checked="true"]):active {
|
||||
color: $text-gray-dark;
|
||||
background-color: $gray-100;
|
||||
background-color: $bg-gray;
|
||||
}
|
||||
}
|
||||
|
||||
@ -408,7 +417,7 @@
|
||||
// Android
|
||||
.SelectMenu-item:focus,
|
||||
.SelectMenu-item:active {
|
||||
background-color: $gray-000;
|
||||
background-color: $bg-gray-light;
|
||||
}
|
||||
|
||||
// iOS Safari
|
||||
|
@ -15,7 +15,7 @@
|
||||
// <h2> sized heading with normal font weight
|
||||
.Subhead-heading {
|
||||
font-size: $h2-size;
|
||||
font-weight: normal;
|
||||
font-weight: $font-weight-normal;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
|
@ -34,7 +34,7 @@
|
||||
color: rgba($color, 0.4);
|
||||
background-color: $bg2;
|
||||
background-image: none;
|
||||
border-color: transparentize($black, 0.8); // back to default .btn
|
||||
border-color: $border-color-button;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@ -67,7 +67,7 @@
|
||||
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
|
||||
border-color: $border-color-button;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@ -114,7 +114,7 @@
|
||||
color: rgba($color, 0.4);
|
||||
background-color: $bg2;
|
||||
background-image: none;
|
||||
border-color: transparentize($black, 0.8); // back to default .btn
|
||||
border-color: $border-color-button;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
@ -1,3 +1,7 @@
|
||||
// Black based on same hue as $gray-900
|
||||
$black: #1b1f23 !default;
|
||||
$white: #fff !default;
|
||||
|
||||
//
|
||||
//
|
||||
// -------- Grays --------
|
||||
@ -97,10 +101,6 @@ $pink-800: #99306f !default;
|
||||
$pink-900: #6d224f !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;
|
||||
|
@ -2,40 +2,44 @@
|
||||
// Color variables
|
||||
|
||||
// State indicators.
|
||||
// TODO@14.0.0: remove $status-pending (unused)
|
||||
$status-pending: desaturate($yellow-700, 15%) !default;
|
||||
|
||||
// Repository type colors
|
||||
// Should be able to deprecate these in future
|
||||
// TODO@14.0.0: remove $repo-private-text, $repo-private-bg, and $repo-private-icon
|
||||
$repo-private-text: $black-fade-70 !default;
|
||||
$repo-private-bg: $yellow-000 !default;
|
||||
$repo-private-icon: transparentize($yellow-900, 0.5) !default;
|
||||
$repo-private-icon: rgba($yellow-900, 0.5) !default;
|
||||
|
||||
// Highlight used for things like search
|
||||
$highlight-yellow: rgba(255, 247, 140, 0.5);
|
||||
// TODO@14.0.0: remove $highlight-yellow (unused)
|
||||
$highlight-yellow: rgba(255, 247, 140, 0.5) !default;
|
||||
|
||||
// Border colors
|
||||
$border-white: $white !default;
|
||||
$border-black-fade: $black-fade-15 !default;
|
||||
$border-white-fade: $white-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-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;
|
||||
$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-yellow: desaturate($yellow-300, 60%) !default;
|
||||
|
||||
// Buttons have a slightly more opaque border than $border-black-fade (15% alpha)
|
||||
$border-color-button: rgba($black, 0.2) !default;
|
||||
|
||||
// Background colors
|
||||
$bg-white: $white !default;
|
||||
$bg-black: $black !default;
|
||||
$bg-black-fade: $black-fade-50 !default;
|
||||
$bg-blue-light: $blue-000 !default;
|
||||
$bg-blue: $blue-500 !default;
|
||||
$bg-gray-dark: $gray-900 !default;
|
||||
@ -49,7 +53,6 @@ $bg-purple-light: $purple-000 !default;
|
||||
$bg-pink: $pink-500 !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;
|
||||
$bg-yellow-dark: $yellow-700 !default;
|
||||
@ -60,6 +63,8 @@ $bg-diffstat-deleted: $red-600 !default;
|
||||
$bg-diffstat-neutral: $gray-300 !default;
|
||||
|
||||
// Text colors
|
||||
$text-black: $black !default;
|
||||
$text-white: $white !default;
|
||||
$text-blue: $blue-500 !default;
|
||||
$text-gray-dark: $gray-900 !default;
|
||||
$text-gray-light: $gray-500 !default;
|
||||
@ -70,5 +75,4 @@ $text-orange-light: $orange-600 !default;
|
||||
$text-purple: $purple !default;
|
||||
$text-pink: $pink-500 !default;
|
||||
$text-red: $red-600 !default;
|
||||
$text-white: $white !default;
|
||||
$text-yellow: $yellow-800 !default;
|
||||
|
@ -1,5 +1,25 @@
|
||||
// Layout variables
|
||||
|
||||
// these are values for the display CSS property
|
||||
$display-values: (
|
||||
block,
|
||||
flex,
|
||||
inline,
|
||||
inline-block,
|
||||
inline-flex,
|
||||
none,
|
||||
table,
|
||||
table-cell
|
||||
) !default;
|
||||
|
||||
// maps edges to respective corners for border-radius
|
||||
$edges: (
|
||||
top: (top-left, top-right),
|
||||
right: (top-right, bottom-right),
|
||||
bottom: (bottom-right, bottom-left),
|
||||
left: (bottom-left, top-left)
|
||||
) !default;
|
||||
|
||||
// These are our margin and padding utility spacers. The default step size we
|
||||
// use is 8px. This gives us a key of:
|
||||
// 0 => 0px
|
||||
|
@ -7,33 +7,36 @@ $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;
|
||||
|
||||
// Button and form variables
|
||||
$form-control-shadow: inset 0 1px 2px rgba($black, 0.075) !default;
|
||||
$btn-input-focus-shadow: 0 0 0 0.2em rgba($blue, 0.3) !default;
|
||||
$btn-active-shadow: inset 0 0.15em 0.3em $black-fade-15 !default;
|
||||
|
||||
// Tooltips
|
||||
$tooltip-max-width: 250px !default;
|
||||
$tooltip-background-color: $black;
|
||||
$tooltip-background-color: $black !default;
|
||||
$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;
|
||||
// Custom explore grid border
|
||||
// TODO@14.0.0: move $exploregrid-item-border-radius to github/github
|
||||
$exploregrid-item-border-radius: 4px !default;
|
||||
|
||||
// TODO@14.0.0: remove $stats-switcher-py (unused)
|
||||
$stats-switcher-py: 10px !default;
|
||||
// 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);
|
||||
// TODO@14.0.0: remove $stats-viewport-height (unused)
|
||||
$stats-viewport-height: ($body-font-size * $body-line-height) + ($stats-switcher-py * 2) !default;
|
||||
|
||||
$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;
|
||||
// TODO@14.0.0: move $min_tab_size, $max_tab_size to github/github
|
||||
$min_tab_size: 1 !default;
|
||||
$max_tab_size: 12 !default;
|
||||
|
@ -13,11 +13,14 @@
|
||||
display: block;
|
||||
width: 2px;
|
||||
content: "";
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: $gray-200;
|
||||
}
|
||||
|
||||
&:target .TimelineItem-badge {
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-color: $blue-400;
|
||||
// stylelint-disable-next-line primer/box-shadow
|
||||
box-shadow: 0 0 0.2em $blue-200;
|
||||
}
|
||||
}
|
||||
@ -30,10 +33,13 @@
|
||||
height: $spacer-5;
|
||||
margin-right: $spacer-2;
|
||||
margin-left: -$spacer-3 + 1;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $gray-700;
|
||||
align-items: center;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: $gray-200;
|
||||
border: 2px solid $white;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border: 2px $border-style $border-white;
|
||||
border-radius: 50%;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
@ -43,6 +49,7 @@
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
margin-top: $spacer-1;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $gray-700;
|
||||
flex: auto;
|
||||
}
|
||||
@ -59,10 +66,12 @@
|
||||
height: $spacer-4;
|
||||
margin: 0;
|
||||
margin-bottom: -$spacer-3;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-left: -($spacer-6 + $spacer-3);
|
||||
background-color: $white;
|
||||
background-color: $bg-white;
|
||||
border: 0;
|
||||
border-top: 4px solid $gray-200;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-top: 4px $border-style $border-color;
|
||||
}
|
||||
|
||||
.TimelineItem--condensed {
|
||||
@ -78,8 +87,9 @@
|
||||
height: $spacer-3;
|
||||
margin-top: $spacer-2;
|
||||
margin-bottom: $spacer-2;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $gray-400;
|
||||
background-color: $white;
|
||||
background-color: $bg-white;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
@ -3,9 +3,10 @@
|
||||
.Toast {
|
||||
display: flex;
|
||||
margin: $spacer-2;
|
||||
color: $black;
|
||||
color: $text-black;
|
||||
background-color: $bg-white;
|
||||
border-radius: $border-radius;
|
||||
// stylelint-disable-next-line primer/box-shadow
|
||||
box-shadow: inset 0 0 0 1px $border-gray-dark, $box-shadow-medium;
|
||||
|
||||
@include breakpoint(sm) {
|
||||
@ -22,7 +23,7 @@
|
||||
width: $spacer-3 * 3;
|
||||
flex-shrink: 0;
|
||||
color: $text-white;
|
||||
background-color: $blue-500;
|
||||
background-color: $bg-blue;
|
||||
border-top-left-radius: inherit;
|
||||
border-bottom-left-radius: inherit;
|
||||
}
|
||||
@ -44,6 +45,7 @@
|
||||
}
|
||||
|
||||
&:active {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $gray-400;
|
||||
}
|
||||
}
|
||||
@ -51,19 +53,21 @@
|
||||
// Modifier
|
||||
|
||||
.Toast--error .Toast-icon {
|
||||
background-color: $red-500;
|
||||
background-color: $bg-red;
|
||||
}
|
||||
|
||||
.Toast--warning .Toast-icon {
|
||||
color: $gray-900;
|
||||
color: $text-gray-dark;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: $yellow-600;
|
||||
}
|
||||
|
||||
.Toast--success .Toast-icon {
|
||||
background-color: $green-500;
|
||||
background-color: $bg-green;
|
||||
}
|
||||
|
||||
.Toast--loading .Toast-icon {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: $gray-600;
|
||||
}
|
||||
|
||||
|
@ -10,7 +10,7 @@
|
||||
padding: $em-spacer-5 $em-spacer-6;
|
||||
font: normal normal 11px/1.5 $body-font;
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
color: $tooltip-text-color;
|
||||
color: $text-white;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
text-shadow: none;
|
||||
@ -20,7 +20,7 @@
|
||||
white-space: pre;
|
||||
pointer-events: none;
|
||||
content: attr(aria-label);
|
||||
background: $tooltip-background-color;
|
||||
background: $bg-black;
|
||||
border-radius: $border-radius;
|
||||
opacity: 0;
|
||||
}
|
||||
@ -32,9 +32,10 @@
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
color: $tooltip-background-color;
|
||||
color: $text-black;
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border: 6px $border-style transparent;
|
||||
opacity: 0;
|
||||
}
|
||||
@ -90,6 +91,7 @@
|
||||
&::after {
|
||||
top: 100%;
|
||||
right: 50%;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
@ -97,8 +99,10 @@
|
||||
top: auto;
|
||||
right: 50%;
|
||||
bottom: -7px;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-right: -6px;
|
||||
border-bottom-color: $tooltip-background-color;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-bottom-color: $bg-black;
|
||||
}
|
||||
}
|
||||
|
||||
@ -121,6 +125,7 @@
|
||||
&::after {
|
||||
right: 50%;
|
||||
bottom: 100%;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
@ -128,8 +133,10 @@
|
||||
top: -7px;
|
||||
right: 50%;
|
||||
bottom: auto;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-right: -6px;
|
||||
border-top-color: $tooltip-background-color;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-top-color: $bg-black;
|
||||
}
|
||||
}
|
||||
|
||||
@ -156,6 +163,7 @@
|
||||
&::after {
|
||||
right: 100%;
|
||||
bottom: 50%;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-right: 6px;
|
||||
transform: translateY(50%);
|
||||
}
|
||||
@ -164,8 +172,10 @@
|
||||
top: 50%;
|
||||
bottom: 50%;
|
||||
left: -7px;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-top: -6px;
|
||||
border-left-color: $tooltip-background-color;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-left-color: $bg-black;
|
||||
}
|
||||
}
|
||||
|
||||
@ -174,6 +184,7 @@
|
||||
&::after {
|
||||
bottom: 50%;
|
||||
left: 100%;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-left: 6px;
|
||||
transform: translateY(50%);
|
||||
}
|
||||
@ -182,8 +193,10 @@
|
||||
top: 50%;
|
||||
right: -7px;
|
||||
bottom: 50%;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-top: -6px;
|
||||
border-right-color: $tooltip-background-color;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-right-color: $bg-black;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -13,13 +13,6 @@
|
||||
border-bottom: $border !important;
|
||||
}
|
||||
|
||||
$edges: (
|
||||
top: (top-left, top-right),
|
||||
right: (top-right, bottom-right),
|
||||
bottom: (bottom-right, bottom-left),
|
||||
left: (bottom-left, top-left)
|
||||
);
|
||||
|
||||
/* Responsive gray borders */
|
||||
@each $breakpoint, $variant in $responsive-variants {
|
||||
@include breakpoint($breakpoint) {
|
||||
@ -81,6 +74,7 @@ $edges: (
|
||||
|
||||
/* Change the border style to dashed, in conjunction with another utility */
|
||||
.border-dashed {
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-style: dashed !important;
|
||||
}
|
||||
|
||||
@ -111,8 +105,12 @@ $edges: (
|
||||
.border-white-fade { border-color: $border-white-fade !important; }
|
||||
|
||||
/* Use with .border to turn the border white w/varying transparency */
|
||||
.border-white-fade-15 { border-color: $white-fade-15 !important; }
|
||||
.border-white-fade-15 { border-color: $border-white-fade !important; }
|
||||
// stylelint-disable-next-line primer/borders
|
||||
.border-white-fade-30 { border-color: $white-fade-30 !important; }
|
||||
// stylelint-disable-next-line primer/borders
|
||||
.border-white-fade-50 { border-color: $white-fade-50 !important; }
|
||||
// stylelint-disable-next-line primer/borders
|
||||
.border-white-fade-70 { border-color: $white-fade-70 !important; }
|
||||
// stylelint-disable-next-line primer/borders
|
||||
.border-white-fade-85 { border-color: $white-fade-85 !important; }
|
||||
|
@ -15,7 +15,7 @@
|
||||
|
||||
.details-overlay-dark[open] > summary::before {
|
||||
z-index: 99;
|
||||
background: $black-fade-50;
|
||||
background: $bg-black-fade;
|
||||
}
|
||||
|
||||
.details-reset {
|
||||
|
@ -17,6 +17,7 @@
|
||||
|
||||
/* Set the font size to 26px */
|
||||
.h1 {
|
||||
// stylelint-disable-next-line primer/typography
|
||||
font-size: $h1-size-mobile !important;
|
||||
|
||||
@include breakpoint(md) { font-size: $h1-size !important; }
|
||||
@ -24,6 +25,7 @@
|
||||
|
||||
/* Set the font size to 22px */
|
||||
.h2 {
|
||||
// stylelint-disable-next-line primer/typography
|
||||
font-size: $h2-size-mobile !important;
|
||||
|
||||
@include breakpoint(md) { font-size: $h2-size !important; }
|
||||
@ -31,6 +33,7 @@
|
||||
|
||||
/* Set the font size to 18px */
|
||||
.h3 {
|
||||
// stylelint-disable-next-line primer/typography
|
||||
font-size: $h3-size-mobile !important;
|
||||
|
||||
@include breakpoint(md) { font-size: $h3-size !important; }
|
||||
@ -60,6 +63,7 @@
|
||||
// Type utilities that match type sale
|
||||
/* Set the font size to 26px */
|
||||
.f1 {
|
||||
// stylelint-disable-next-line primer/typography
|
||||
font-size: $h1-size-mobile !important;
|
||||
|
||||
@include breakpoint(md) { font-size: $h1-size !important; }
|
||||
@ -67,6 +71,7 @@
|
||||
|
||||
/* Set the font size to 22px */
|
||||
.f2 {
|
||||
// stylelint-disable-next-line primer/typography
|
||||
font-size: $h2-size-mobile !important;
|
||||
|
||||
@include breakpoint(md) { font-size: $h2-size !important; }
|
||||
@ -74,6 +79,7 @@
|
||||
|
||||
/* Set the font size to 18px */
|
||||
.f3 {
|
||||
// stylelint-disable-next-line primer/typography
|
||||
font-size: $h3-size-mobile !important;
|
||||
|
||||
@include breakpoint(md) { font-size: $h3-size !important; }
|
||||
@ -94,6 +100,7 @@
|
||||
// Type utils with light weight that match type scale
|
||||
/* Set the font size to 40px and weight to light */
|
||||
.f00-light {
|
||||
// stylelint-disable-next-line primer/typography
|
||||
font-size: $h00-size-mobile !important;
|
||||
font-weight: $font-weight-light !important;
|
||||
|
||||
@ -102,6 +109,7 @@
|
||||
|
||||
/* Set the font size to 32px and weight to light */
|
||||
.f0-light {
|
||||
// stylelint-disable-next-line primer/typography
|
||||
font-size: $h0-size-mobile !important;
|
||||
font-weight: $font-weight-light !important;
|
||||
|
||||
@ -110,6 +118,7 @@
|
||||
|
||||
/* Set the font size to 26px and weight to light */
|
||||
.f1-light {
|
||||
// stylelint-disable-next-line primer/typography
|
||||
font-size: $h1-size-mobile !important;
|
||||
font-weight: $font-weight-light !important;
|
||||
|
||||
@ -118,6 +127,7 @@
|
||||
|
||||
/* Set the font size to 22px and weight to light */
|
||||
.f2-light {
|
||||
// stylelint-disable-next-line primer/typography
|
||||
font-size: $h2-size-mobile !important;
|
||||
font-weight: $font-weight-light !important;
|
||||
|
||||
@ -127,6 +137,7 @@
|
||||
// Same size and weight as .lead but without color property
|
||||
/* Set the font size to 18px and weight to light */
|
||||
.f3-light {
|
||||
// stylelint-disable-next-line primer/typography
|
||||
font-size: $h3-size-mobile !important;
|
||||
font-weight: $font-weight-light !important;
|
||||
|
||||
@ -139,10 +150,11 @@
|
||||
|
||||
/* Large leading paragraphs */
|
||||
.lead {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-bottom: 30px;
|
||||
font-size: $h3-size;
|
||||
font-weight: $font-weight-light;
|
||||
color: $gray-600;
|
||||
color: $text-gray;
|
||||
}
|
||||
|
||||
// Line-height variations
|
||||
|
@ -1,14 +1,4 @@
|
||||
// Visibility and display utilities
|
||||
$display-values: (
|
||||
block,
|
||||
flex,
|
||||
inline,
|
||||
inline-block,
|
||||
inline-flex,
|
||||
none,
|
||||
table,
|
||||
table-cell
|
||||
);
|
||||
|
||||
// Responsive display utilities
|
||||
@each $breakpoint, $variant in $responsive-variants {
|
||||
|
@ -2,10 +2,16 @@ const currentVersion = process.env.PRIMER_VERSION || require('./package.json').v
|
||||
|
||||
module.exports = {
|
||||
extends: ['stylelint-config-primer'],
|
||||
plugins: ['./lib/stylelint-todo'],
|
||||
plugins: ['stylelint-scss', './lib/stylelint-todo'],
|
||||
syntax: 'scss',
|
||||
rules: {
|
||||
'scss/dollar-variable-default': [true, {ignore: 'local'}],
|
||||
'primer/no-override': false,
|
||||
'primer/colors': true,
|
||||
'primer/borders': true,
|
||||
'primer/spacing': true,
|
||||
'primer/typography': true,
|
||||
'primer/box-shadow': true,
|
||||
'primer-css/TODO': [true, {currentVersion, severity: 'error'}]
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user