chore: add stylesheet linting (#4116)
This commit is contained in:
Erick Zhao
GitHub
Родитель
efcbaff8b3
Коммит
6772309b3e
|
|
@ -0,0 +1,11 @@
|
||||||
|
{
|
||||||
|
"extends": "stylelint-config-standard",
|
||||||
|
"plugins": [
|
||||||
|
"stylelint-scss"
|
||||||
|
],
|
||||||
|
"rules": {
|
||||||
|
"at-rule-no-unknown": null,
|
||||||
|
"declaration-block-single-line-max-declarations": null,
|
||||||
|
"scss/at-rule-no-unknown": true
|
||||||
|
}
|
||||||
|
}
|
||||||
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
27
package.json
27
package.json
|
|
@ -18,12 +18,15 @@
|
||||||
"precompile-assets": "cross-env NODE_ENV=production node script/precompile-assets.js",
|
"precompile-assets": "cross-env NODE_ENV=production node script/precompile-assets.js",
|
||||||
"linkschecker": "NODE_PATH=. NODE_ENV=test node scripts/links-checker.js",
|
"linkschecker": "NODE_PATH=. NODE_ENV=test node scripts/links-checker.js",
|
||||||
"cypress": "cypress run",
|
"cypress": "cypress run",
|
||||||
"lint": "eslint . --fix",
|
"lint": "npm run lint:js && npm run lint:style",
|
||||||
|
"lint:js": "eslint . --fix",
|
||||||
|
"lint:style": "stylelint 'public/styles/*.scss' --fix",
|
||||||
"heroku-postbuild": "npm run precompile-assets"
|
"heroku-postbuild": "npm run precompile-assets"
|
||||||
},
|
},
|
||||||
"husky": {
|
"husky": {
|
||||||
"hooks": {
|
"hooks": {
|
||||||
"pre-push": "check-for-leaks"
|
"pre-push": "check-for-leaks",
|
||||||
|
"pre-commit": "lint-staged"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
|
@ -93,16 +96,20 @@
|
||||||
"check-for-leaks": "^1.2.1",
|
"check-for-leaks": "^1.2.1",
|
||||||
"cheerio": "^1.0.0-rc.3",
|
"cheerio": "^1.0.0-rc.3",
|
||||||
"cypress": "^4.8.0",
|
"cypress": "^4.8.0",
|
||||||
"husky": "^4.2.5",
|
|
||||||
"mocha": "^8.0.1",
|
|
||||||
"nock": "^12.0.3",
|
|
||||||
"nodemon": "^2.0.4",
|
|
||||||
"node-sass": "^4.14.1",
|
|
||||||
"simplecrawler": "^1.1.9",
|
|
||||||
"eslint": "^7.2.0",
|
"eslint": "^7.2.0",
|
||||||
"eslint-config-prettier": "^6.11.0",
|
"eslint-config-prettier": "^6.11.0",
|
||||||
"eslint-plugin-prettier": "^3.1.4",
|
"eslint-plugin-prettier": "^3.1.4",
|
||||||
|
"husky": "^4.2.5",
|
||||||
|
"lint-staged": "^10.2.11",
|
||||||
|
"mocha": "^8.0.1",
|
||||||
|
"nock": "^12.0.3",
|
||||||
|
"node-sass": "^4.14.1",
|
||||||
|
"nodemon": "^2.0.4",
|
||||||
"prettier": "^2.0.5",
|
"prettier": "^2.0.5",
|
||||||
|
"simplecrawler": "^1.1.9",
|
||||||
|
"stylelint": "^13.6.1",
|
||||||
|
"stylelint-config-standard": "^20.0.0",
|
||||||
|
"stylelint-scss": "^3.17.2",
|
||||||
"supertest": "^4.0.2",
|
"supertest": "^4.0.2",
|
||||||
"supertest-session": "^4.0.0",
|
"supertest-session": "^4.0.0",
|
||||||
"uglify-js": "^3.8.1",
|
"uglify-js": "^3.8.1",
|
||||||
|
|
@ -111,5 +118,9 @@
|
||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=12 <14"
|
"node": ">=12 <14"
|
||||||
|
},
|
||||||
|
"lint-staged": {
|
||||||
|
"*.js": "npm run lint:js",
|
||||||
|
"*.scss": "npm run lint:style"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -45,7 +45,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-description {
|
.app-description {
|
||||||
margin: .3em 0 0 0;
|
margin: 0.3em 0 0 0;
|
||||||
font-size: 1.2em;
|
font-size: 1.2em;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
|
|
@ -81,16 +81,10 @@
|
||||||
padding: 16px 0;
|
padding: 16px 0;
|
||||||
border-top: 1px darken($main-bg-color-shade, 8%) solid;
|
border-top: 1px darken($main-bg-color-shade, 8%) solid;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|
||||||
.app-keyword {
|
|
||||||
white-space: normal;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-downloads {
|
&-downloads {
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
white-space: normal;
|
white-space: normal;
|
||||||
|
|
@ -107,6 +101,7 @@
|
||||||
&:nth-child(1) {
|
&:nth-child(1) {
|
||||||
border-top: none;
|
border-top: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:nth-child(2) {
|
&:nth-child(2) {
|
||||||
border-top: 1px darken($main-bg-color-shade, 8%) solid;
|
border-top: 1px darken($main-bg-color-shade, 8%) solid;
|
||||||
|
|
||||||
|
|
@ -128,6 +123,7 @@
|
||||||
|
|
||||||
.app-boxes {
|
.app-boxes {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
|
||||||
@include breakpoint(md) {
|
@include breakpoint(md) {
|
||||||
max-width: calc(100% - 300px);
|
max-width: calc(100% - 300px);
|
||||||
}
|
}
|
||||||
|
|
@ -149,6 +145,9 @@
|
||||||
font-size: 0.85em;
|
font-size: 0.85em;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
background-color: $main-bg-color-shade;
|
background-color: $main-bg-color-shade;
|
||||||
|
white-space: normal;
|
||||||
|
overflow: auto;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
background-color: darken($main-bg-color-shade, 4%);
|
background-color: darken($main-bg-color-shade, 4%);
|
||||||
|
|
@ -156,15 +155,15 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-tagname {
|
.app-tagname {
|
||||||
margin-left: .5em;
|
margin-left: 0.5em;
|
||||||
color: $main-color-subtle;
|
color: $main-color-subtle;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-download {
|
.app-download {
|
||||||
display: block;
|
display: block;
|
||||||
padding: 0.4em .8em;
|
padding: 0.4em 0.8em;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
margin: 0 .5em .5em 0;
|
margin: 0 0.5em 0.5em 0;
|
||||||
line-height: 1.7;
|
line-height: 1.7;
|
||||||
border: none;
|
border: none;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
|
@ -214,6 +213,7 @@
|
||||||
width: 196px;
|
width: 196px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
/* Scroll bug in Chrome */
|
/* Scroll bug in Chrome */
|
||||||
height: 126px;
|
height: 126px;
|
||||||
|
|
||||||
|
|
@ -252,6 +252,7 @@
|
||||||
|
|
||||||
.invisible {
|
.invisible {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
|
||||||
@media (max-width: 543px) {
|
@media (max-width: 543px) {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
@ -293,17 +294,21 @@
|
||||||
.container-narrow {
|
.container-narrow {
|
||||||
padding-right: 15px;
|
padding-right: 15px;
|
||||||
padding-left: 15px;
|
padding-left: 15px;
|
||||||
|
|
||||||
@include breakpoint(md) { // return normal value
|
@include breakpoint(md) { // return normal value
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.row { // default is -15px
|
.row { // default is -15px
|
||||||
margin-right: -12px; // work with .page-section { padding: 12px }
|
margin-right: -12px; // work with .page-section { padding: 12px }
|
||||||
margin-left: -12px;
|
margin-left: -12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mobile-hidden {
|
.mobile-hidden {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
|
|
||||||
@include breakpoint(md) {
|
@include breakpoint(md) {
|
||||||
display: block !important;
|
display: block !important;
|
||||||
}
|
}
|
||||||
|
|
@ -313,8 +318,8 @@
|
||||||
background-color: #f1f8ff;
|
background-color: #f1f8ff;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin: 0 .5em .5em 0;
|
margin: 0 0.5em 0.5em 0;
|
||||||
padding: .3em .9em;
|
padding: 0.3em 0.9em;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -357,7 +362,6 @@ $app-list-icon-size: 48px;
|
||||||
|
|
||||||
.listed-app > a:hover,
|
.listed-app > a:hover,
|
||||||
.listed-app > a:focus {
|
.listed-app > a:focus {
|
||||||
text-decoration: none;
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
border-color: $main-border-color;
|
border-color: $main-border-color;
|
||||||
background-color: $main-bg-color-shade;
|
background-color: $main-bg-color-shade;
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,7 @@ body {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
background-color: $main-bg-color;
|
background-color: $main-bg-color;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
|
||||||
@include breakpoint(sm) {
|
@include breakpoint(sm) {
|
||||||
font-size: $body-font-size;
|
font-size: $body-font-size;
|
||||||
}
|
}
|
||||||
|
|
@ -28,7 +29,12 @@ a {
|
||||||
color: $main-link-color; // override Primer
|
color: $main-link-color; // override Primer
|
||||||
}
|
}
|
||||||
|
|
||||||
h1,h2,h3,h4,h5,h6 {
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
a {
|
a {
|
||||||
color: $main-color; // override Primer
|
color: $main-color; // override Primer
|
||||||
}
|
}
|
||||||
|
|
@ -38,6 +44,7 @@ hr {
|
||||||
border-color: $border-color; // override Primer
|
border-color: $border-color; // override Primer
|
||||||
margin-left: $spacer6 !important;
|
margin-left: $spacer6 !important;
|
||||||
margin-right: $spacer6 !important;
|
margin-right: $spacer6 !important;
|
||||||
|
|
||||||
@include breakpoint(md) {
|
@include breakpoint(md) {
|
||||||
margin-left: $spacer8 !important;
|
margin-left: $spacer8 !important;
|
||||||
margin-right: $spacer8 !important;
|
margin-right: $spacer8 !important;
|
||||||
|
|
@ -66,16 +73,12 @@ p:last-child {
|
||||||
.text-center-lg { @include breakpoint(lg) { text-align: center !important; } }
|
.text-center-lg { @include breakpoint(lg) { text-align: center !important; } }
|
||||||
|
|
||||||
h1 { -webkit-font-smoothing: antialiased; }
|
h1 { -webkit-font-smoothing: antialiased; }
|
||||||
h2 { font-weight: 300; -webkit-font-smoothing: antialiased; }
|
h2 { font-weight: 300; -webkit-font-smoothing: antialiased; margin-top: 0; }
|
||||||
h3 { font-weight: 400; -webkit-font-smoothing: antialiased; }
|
h3 { font-weight: 400; -webkit-font-smoothing: antialiased; }
|
||||||
h4 { font-weight: 500; }
|
h4 { font-weight: 500; }
|
||||||
h5 { font-weight: 700; }
|
h5 { font-weight: 700; }
|
||||||
h6 { font-weight: 700; }
|
h6 { font-weight: 700; }
|
||||||
|
|
||||||
h2 {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Fade in lazily loaded images; see /scripts/lazy-load-images.js
|
// Fade in lazily loaded images; see /scripts/lazy-load-images.js
|
||||||
img {
|
img {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
|
@ -95,19 +98,43 @@ img[data-src] {
|
||||||
overflow: hidden !important;
|
overflow: hidden !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// add top margin
|
// add top margin
|
||||||
// to make it easier to see headers within a long wall of text
|
// to make it easier to see headers within a long wall of text
|
||||||
.strong-headers {
|
.strong-headers {
|
||||||
h1 { font-weight: 300 !important; -webkit-font-smoothing: initial !important; }
|
h1 {
|
||||||
h2 { margin: 1.75em 0 1em !important; font-size: 32px !important; font-weight: 300 !important; -webkit-font-smoothing: initial !important; border-bottom: $border !important; }
|
font-weight: 300 !important;
|
||||||
h3 { margin: 2em 0 0.75em !important; font-size: 26px !important; font-weight: 300 !important; -webkit-font-smoothing: initial !important; }
|
-webkit-font-smoothing: initial !important;
|
||||||
h4 { margin-top: 1.5em !important; font-weight: 300 !important; }
|
|
||||||
h5 { margin-top: 1.25em !important; }
|
|
||||||
h6 { margin-top: 1.125em !important; }
|
|
||||||
|
|
||||||
&.strong-headers hr { margin: $spacer6 0; }
|
@include breakpoint(lg) { font-size: $body-font-size * 2.75; }
|
||||||
h1 { @include breakpoint(lg) { font-size: $body-font-size * 2.75; } }
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin: 1.75em 0 1em !important;
|
||||||
|
font-size: 32px !important;
|
||||||
|
font-weight: 300 !important;
|
||||||
|
-webkit-font-smoothing: initial !important;
|
||||||
|
border-bottom: $border !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
margin: 2em 0 0.75em !important;
|
||||||
|
font-size: 26px !important;
|
||||||
|
font-weight: 300 !important;
|
||||||
|
-webkit-font-smoothing: initial !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
margin-top: 1.5em !important;
|
||||||
|
font-weight: 300 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
h5 {
|
||||||
|
margin-top: 1.25em !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
h6 {
|
||||||
|
margin-top: 1.125em !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Responsive video
|
// Responsive video
|
||||||
|
|
@ -144,8 +171,8 @@ kbd {
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
margin:0 .1em;
|
margin: 0 0.1em;
|
||||||
padding:.1em .6em;
|
padding: 0.1em 0.6em;
|
||||||
text-shadow: 0 1px 0 #fff;
|
text-shadow: 0 1px 0 #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -10,6 +10,7 @@
|
||||||
|
|
||||||
.blog-index-link {
|
.blog-index-link {
|
||||||
color: $main-color-strong !important;
|
color: $main-color-strong !important;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
text-decoration: none !important;
|
text-decoration: none !important;
|
||||||
color: $main-link-color !important;
|
color: $main-link-color !important;
|
||||||
|
|
@ -31,7 +32,6 @@
|
||||||
font-weight: 400 !important;
|
font-weight: 400 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Post
|
// Post
|
||||||
|
|
||||||
.blog-post {
|
.blog-post {
|
||||||
|
|
@ -63,6 +63,7 @@
|
||||||
|
|
||||||
p {
|
p {
|
||||||
line-height: 1.7 !important;
|
line-height: 1.7 !important;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
text-decoration: underline !important;
|
text-decoration: underline !important;
|
||||||
}
|
}
|
||||||
|
|
@ -82,7 +83,6 @@
|
||||||
margin-top: 20px !important;
|
margin-top: 20px !important;
|
||||||
margin-bottom: 20px !important;
|
margin-bottom: 20px !important;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
figure {
|
figure {
|
||||||
margin: 2em 0;
|
margin: 2em 0;
|
||||||
|
|
@ -93,7 +93,9 @@ figcaption {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
color: $main-color;
|
color: $main-color;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: $main-color;
|
color: $main-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
|
|
||||||
.docs-version {
|
.docs-version {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0 .4em;
|
padding: 0 0.4em;
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
font-size: $body-font-size * 0.95;
|
font-size: $body-font-size * 0.95;
|
||||||
|
|
@ -23,10 +23,12 @@
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: $main-color-subtle !important;
|
color: $main-color-subtle !important;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: $main-color;
|
color: $main-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.docs-breadcrumbs-divider {
|
.docs-breadcrumbs-divider {
|
||||||
color: $main-color-subtle;
|
color: $main-color-subtle;
|
||||||
}
|
}
|
||||||
|
|
@ -69,6 +71,20 @@
|
||||||
|
|
||||||
@include breakpoint(md) { font-size: $h3-size !important; }
|
@include breakpoint(md) { font-size: $h3-size !important; }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sub-section[data-lang='en-US'] .en-toggle h5 {
|
||||||
|
color: $main-link-color !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sub-section:not([data-lang='en-US']) {
|
||||||
|
.en-toggle h5 {
|
||||||
|
color: $main-bg-color !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover .en-toggle h5 {
|
||||||
|
color: $main-border-color !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.docs-heading {
|
.docs-heading {
|
||||||
|
|
@ -89,9 +105,10 @@
|
||||||
|
|
||||||
.header-link .octicon {
|
.header-link .octicon {
|
||||||
color: $main-color-subtle !important;
|
color: $main-color-subtle !important;
|
||||||
margin-left: .5em !important;
|
margin-left: 0.5em !important;
|
||||||
vertical-align: middle !important;
|
vertical-align: middle !important;
|
||||||
visibility: hidden !important;
|
visibility: hidden !important;
|
||||||
|
|
||||||
:hover > & {
|
:hover > & {
|
||||||
visibility: visible !important;
|
visibility: visible !important;
|
||||||
}
|
}
|
||||||
|
|
@ -104,6 +121,7 @@
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: $main-color-strong;
|
color: $main-color-strong;
|
||||||
background-color: darken($main-bg-color-shade, 8%);
|
background-color: darken($main-bg-color-shade, 8%);
|
||||||
|
|
||||||
@include breakpoint(md) {
|
@include breakpoint(md) {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
|
|
@ -111,38 +129,24 @@
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.docs-tag {
|
.docs-tag {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: .4em .8em;
|
padding: 0.4em 0.8em;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
font-size: .86em;
|
font-size: 0.86em;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
|
||||||
@include breakpoint(md) {
|
@include breakpoint(md) {
|
||||||
background-color: darken($main-bg-color-shade, 8%);
|
background-color: darken($main-bg-color-shade, 8%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// platform label, e.g. [OS X]
|
|
||||||
.docs h3 code > em,
|
|
||||||
.docs h3 > em,
|
|
||||||
.docs h4 code > em,
|
|
||||||
.docs h4 > em,
|
|
||||||
.docs .platform-label {
|
|
||||||
padding: .1em .4em !important;
|
|
||||||
vertical-align: middle !important;
|
|
||||||
font-size: .66em !important;
|
|
||||||
font-weight: 300 !important;
|
|
||||||
font-style: normal !important;
|
|
||||||
color: $main-bg-color !important;
|
|
||||||
border-radius: $border-radius !important;
|
|
||||||
background-color: $main-color-subtle !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
// process label, e.g. Main process
|
// process label, e.g. Main process
|
||||||
.docs h1 em {
|
.docs h1 em {
|
||||||
padding: .1em .4em;
|
padding: 0.1em 0.4em;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
font-size: .4em;
|
font-size: 0.4em;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
|
|
@ -151,17 +155,29 @@
|
||||||
background-color: $main-color-subtle;
|
background-color: $main-color-subtle;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// platform label, e.g. [OS X]
|
||||||
|
.docs h3 > em,
|
||||||
|
.docs h4 > em,
|
||||||
|
.docs h3 code > em,
|
||||||
|
.docs h4 code > em,
|
||||||
|
.docs .platform-label {
|
||||||
|
padding: 0.1em 0.4em !important;
|
||||||
|
vertical-align: middle !important;
|
||||||
|
font-size: 0.66em !important;
|
||||||
|
font-weight: 300 !important;
|
||||||
|
font-style: normal !important;
|
||||||
|
color: $main-bg-color !important;
|
||||||
|
border-radius: $border-radius !important;
|
||||||
|
background-color: $main-color-subtle !important;
|
||||||
|
}
|
||||||
|
|
||||||
.docs table {
|
.docs table {
|
||||||
th {
|
th {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
padding: $spacer2;
|
padding: $spacer2;
|
||||||
}
|
}
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.docs p a,
|
width: 100%;
|
||||||
.docs li a {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.doc-actions {
|
.doc-actions {
|
||||||
|
|
@ -170,19 +186,9 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.docs {
|
.docs p a,
|
||||||
.sub-section[data-lang='en-US'] .en-toggle h5 {
|
.docs li a {
|
||||||
color: $main-link-color !important;
|
text-decoration: underline;
|
||||||
}
|
|
||||||
|
|
||||||
.sub-section:not([data-lang='en-US']) {
|
|
||||||
.en-toggle h5 {
|
|
||||||
color: $main-bg-color !important;
|
|
||||||
}
|
|
||||||
&:hover .en-toggle h5 {
|
|
||||||
color: $main-border-color !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.docs-container-xl {
|
.docs-container-xl {
|
||||||
|
|
@ -211,6 +217,11 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.docs-guides-readme {
|
.docs-guides-readme {
|
||||||
|
li {
|
||||||
|
break-inside: avoid;
|
||||||
|
margin-bottom: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
> ul {
|
> ul {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
|
|
||||||
|
|
@ -219,16 +230,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
li {
|
|
||||||
break-inside: avoid;
|
|
||||||
margin-bottom: 3px;
|
|
||||||
|
|
||||||
> p {
|
|
||||||
margin-bottom: 0;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Hide various elements we only need on GitHub
|
// Hide various elements we only need on GitHub
|
||||||
> h2,
|
> h2,
|
||||||
> h3,
|
> h3,
|
||||||
|
|
|
||||||
|
|
@ -5,29 +5,31 @@
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
backface-visibility: hidden;
|
backface-visibility: hidden;
|
||||||
max-width: 900px;
|
max-width: 900px;
|
||||||
|
|
||||||
@include breakpoint(xl) { max-width: 100%; }
|
@include breakpoint(xl) { max-width: 100%; }
|
||||||
|
|
||||||
animation: hero-animation 1s forwards;
|
animation: hero-animation 1s forwards;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes hero-animation {
|
@keyframes hero-animation {
|
||||||
0% { opacity: 0; transform: scale(.96); }
|
0% { opacity: 0; transform: scale(0.96); }
|
||||||
100% { opacity: 1; transform: scale(1); }
|
100% { opacity: 1; transform: scale(1); }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Electron Icon
|
// Electron Icon
|
||||||
|
|
||||||
$hero-icon-delay: .6s;
|
$hero-icon-delay: 0.6s;
|
||||||
$hero-icon-delay-diff: .1s;
|
$hero-icon-delay-diff: 0.1s;
|
||||||
$hero-icon-duration: 1s;
|
$hero-icon-duration: 1s;
|
||||||
$hero-icon-all-delay: 9 * $hero-icon-delay-diff + $hero-icon-delay;
|
$hero-icon-all-delay: 9 * $hero-icon-delay-diff + $hero-icon-delay;
|
||||||
|
|
||||||
|
|
||||||
.hero-icon {
|
.hero-icon {
|
||||||
transform-origin: 50% 50%;
|
transform-origin: 50% 50%;
|
||||||
stroke: $jumbo-color-strong;
|
stroke: $jumbo-color-strong;
|
||||||
stroke-width: 5;
|
stroke-width: 5;
|
||||||
stroke-linecap: round;
|
stroke-linecap: round;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-icon.dot {
|
.hero-icon.dot {
|
||||||
fill: $jumbo-color-strong;
|
fill: $jumbo-color-strong;
|
||||||
stroke: none;
|
stroke: none;
|
||||||
|
|
@ -37,6 +39,7 @@ $hero-icon-all-delay: 9 * $hero-icon-delay-diff + $hero-icon-delay;
|
||||||
stroke-dasharray: 170;
|
stroke-dasharray: 170;
|
||||||
stroke-dashoffset: 170;
|
stroke-dashoffset: 170;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-icon--circle {
|
.hero-icon--circle {
|
||||||
stroke-dasharray: 70;
|
stroke-dasharray: 70;
|
||||||
stroke-dashoffset: 70;
|
stroke-dashoffset: 70;
|
||||||
|
|
@ -46,7 +49,8 @@ $hero-icon-all-delay: 9 * $hero-icon-delay-diff + $hero-icon-delay;
|
||||||
.hero-icon-#{$i} {
|
.hero-icon-#{$i} {
|
||||||
$_duration: $hero-icon-duration;
|
$_duration: $hero-icon-duration;
|
||||||
$_delay: $hero-icon-delay + ($hero-icon-delay-diff * $i);
|
$_delay: $hero-icon-delay + ($hero-icon-delay-diff * $i);
|
||||||
animation: hero-icon-animation $_duration $_delay cubic-bezier(.05, .35, .20, 1) forwards;
|
|
||||||
|
animation: hero-icon-animation $_duration $_delay cubic-bezier(0.05, 0.35, 0.2, 1) forwards;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -54,7 +58,6 @@ $hero-icon-all-delay: 9 * $hero-icon-delay-diff + $hero-icon-delay;
|
||||||
100% { stroke-dashoffset: 0; }
|
100% { stroke-dashoffset: 0; }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Apps ----------------
|
// Apps ----------------
|
||||||
|
|
||||||
.hero-app {
|
.hero-app {
|
||||||
|
|
@ -65,18 +68,19 @@ $hero-icon-all-delay: 9 * $hero-icon-delay-diff + $hero-icon-delay;
|
||||||
// Ripple effect
|
// Ripple effect
|
||||||
$hero-app-delay: $hero-icon-all-delay;
|
$hero-app-delay: $hero-icon-all-delay;
|
||||||
$hero-app-delay-diff: 0.04s;
|
$hero-app-delay-diff: 0.04s;
|
||||||
$hero-app-duration: .8s;
|
$hero-app-duration: 0.8s;
|
||||||
$hero-app-opacity: 0.1;
|
$hero-app-opacity: 0.1;
|
||||||
|
|
||||||
@keyframes hero-app-animate-left {
|
@keyframes hero-app-animate-left {
|
||||||
0% { transform: scale(1) translateX(30px); opacity: $hero-app-opacity; animation-timing-function: cubic-bezier(.3,.1,.9,.5); }
|
0% { transform: scale(1) translateX(30px); opacity: $hero-app-opacity; animation-timing-function: cubic-bezier(0.3, 0.1, 0.9, 0.5); }
|
||||||
20% { transform: scale(1.1) translateX(20px); animation-timing-function: cubic-bezier(.1,.4,.2,1); }
|
20% { transform: scale(1.1) translateX(20px); animation-timing-function: cubic-bezier(0.1, 0.4, 0.2, 1); }
|
||||||
100% { transform: scale(1) translateX( 0px); opacity: 1; }
|
100% { transform: scale(1) translateX(0); opacity: 1; }
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes hero-app-animate-right {
|
@keyframes hero-app-animate-right {
|
||||||
0% { transform: scale(1) translateX(-30px); opacity: $hero-app-opacity; animation-timing-function: cubic-bezier(.3,.1,.9,.5); }
|
0% { transform: scale(1) translateX(-30px); opacity: $hero-app-opacity; animation-timing-function: cubic-bezier(0.3, 0.1, 0.9, 0.5); }
|
||||||
20% { transform: scale(1.1) translateX(-20px); animation-timing-function: cubic-bezier(.1,.4,.2,1); }
|
20% { transform: scale(1.1) translateX(-20px); animation-timing-function: cubic-bezier(0.1, 0.4, 0.2, 1); }
|
||||||
100% { transform: scale(1) translateX( 0px); opacity: 1; }
|
100% { transform: scale(1) translateX(0); opacity: 1; }
|
||||||
}
|
}
|
||||||
|
|
||||||
// Colorize and animate
|
// Colorize and animate
|
||||||
|
|
@ -85,9 +89,12 @@ $hero-app-opacity: 0.1;
|
||||||
fill: mix($jumbo-color-subtle, $jumbo-bg-color, 80% - $i * 4%);
|
fill: mix($jumbo-color-subtle, $jumbo-bg-color, 80% - $i * 4%);
|
||||||
|
|
||||||
$_delay: $hero-app-delay + ($hero-app-delay-diff * $i);
|
$_delay: $hero-app-delay + ($hero-app-delay-diff * $i);
|
||||||
|
|
||||||
@if $i % 2 == 0 {
|
@if $i % 2 == 0 {
|
||||||
animation: hero-app-animate-left $hero-app-duration $_delay both;
|
animation: hero-app-animate-left $hero-app-duration $_delay both;
|
||||||
} @else {
|
}
|
||||||
|
|
||||||
|
@else {
|
||||||
animation: hero-app-animate-right $hero-app-duration $_delay both;
|
animation: hero-app-animate-right $hero-app-duration $_delay both;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,9 @@
|
||||||
.jumbotron.jumbotron-home {
|
.jumbotron.jumbotron-home {
|
||||||
// Reduce padding because the hero has some extra padding for the animation.
|
// Reduce padding because the hero has some extra padding for the animation.
|
||||||
padding: $spacer2 $spacer3 $spacer6 $spacer3;
|
padding: $spacer2 $spacer3 $spacer6 $spacer3;
|
||||||
|
|
||||||
@include breakpoint(md) { padding: $spacer4 $spacer3 $spacer8 $spacer3; }
|
@include breakpoint(md) { padding: $spacer4 $spacer3 $spacer8 $spacer3; }
|
||||||
|
|
||||||
@include breakpoint(xl) { padding: $spacer6 0 $spacer6 * 2 0; }
|
@include breakpoint(xl) { padding: $spacer6 0 $spacer6 * 2 0; }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -38,7 +40,6 @@ a.featured-app-list-item {
|
||||||
background-color: #e4e4e4;
|
background-color: #e4e4e4;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
margin: 20px;
|
margin: 20px;
|
||||||
display: inline-block;
|
|
||||||
transition: background-color 200ms ease-in-out;
|
transition: background-color 200ms ease-in-out;
|
||||||
position: relative;
|
position: relative;
|
||||||
min-width: 200px;
|
min-width: 200px;
|
||||||
|
|
@ -93,6 +94,7 @@ a.featured-app-list-item {
|
||||||
h4 {
|
h4 {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
justify-self: flex-end;
|
justify-self: flex-end;
|
||||||
|
|
||||||
/* Turn it into a h5 */
|
/* Turn it into a h5 */
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
|
@ -114,9 +116,11 @@ a.featured-app-list-item {
|
||||||
color: $jumbo-color-strong;
|
color: $jumbo-color-strong;
|
||||||
background-color: $jumbo-bg-color;
|
background-color: $jumbo-bg-color;
|
||||||
border-color: darken($jumbo-bg-color, 12%);
|
border-color: darken($jumbo-bg-color, 12%);
|
||||||
|
|
||||||
code {
|
code {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c1.c1 {
|
.c1.c1 {
|
||||||
color: mix($jumbo-color-strong, $jumbo-bg-color, 60%);
|
color: mix($jumbo-color-strong, $jumbo-bg-color, 60%);
|
||||||
}
|
}
|
||||||
|
|
@ -126,7 +130,7 @@ a.featured-app-list-item {
|
||||||
border: 2px solid $main-border-color;
|
border: 2px solid $main-border-color;
|
||||||
border-top-width: 20px;
|
border-top-width: 20px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
background-color: #FAFAFA;
|
background-color: #fafafa;
|
||||||
box-shadow: 0 25px 30px -18px rgba(0, 0, 0, 0.28);
|
box-shadow: 0 25px 30px -18px rgba(0, 0, 0, 0.28);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -65,7 +65,8 @@
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.kb-shortcut th, .kb-shortcut td {
|
.kb-shortcut th,
|
||||||
|
.kb-shortcut td {
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,5 @@
|
||||||
progress {
|
progress {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
|
|
||||||
height: 10px;
|
height: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -3,9 +3,9 @@
|
||||||
|
|
||||||
.releases-tag {
|
.releases-tag {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin: .3em .1em;
|
margin: 0.3em 0.1em;
|
||||||
padding: .1em .4em;
|
padding: 0.1em 0.4em;
|
||||||
font-size: .86em;
|
font-size: 0.86em;
|
||||||
color: $main-color-subtle;
|
color: $main-color-subtle;
|
||||||
border: 1px solid $border-color;
|
border: 1px solid $border-color;
|
||||||
border-radius: $border-radius;
|
border-radius: $border-radius;
|
||||||
|
|
@ -31,7 +31,6 @@
|
||||||
font-size: 21px;
|
font-size: 21px;
|
||||||
// Remove border radius for active element.
|
// Remove border radius for active element.
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
|
|
||||||
position: relative;
|
position: relative;
|
||||||
display: block;
|
display: block;
|
||||||
padding: 12px 15px;
|
padding: 12px 15px;
|
||||||
|
|
@ -89,7 +88,7 @@
|
||||||
// Tag
|
// Tag
|
||||||
& > .tag {
|
& > .tag {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: .1em .3em;
|
padding: 0.1em 0.3em;
|
||||||
color: $main-color;
|
color: $main-color;
|
||||||
border: 1px solid $border-color;
|
border: 1px solid $border-color;
|
||||||
border-radius: $border-radius;
|
border-radius: $border-radius;
|
||||||
|
|
@ -107,7 +106,7 @@
|
||||||
|
|
||||||
// Date
|
// Date
|
||||||
& > .date {
|
& > .date {
|
||||||
margin-left: .5em;
|
margin-left: 0.5em;
|
||||||
font-size: $body-font-size;
|
font-size: $body-font-size;
|
||||||
color: $main-color-subtle;
|
color: $main-color-subtle;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
|
|
@ -144,6 +143,7 @@
|
||||||
.container-narrow {
|
.container-narrow {
|
||||||
.r-resp-header-narrow {
|
.r-resp-header-narrow {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -31,9 +31,8 @@
|
||||||
color: $jumbo-bg-color;
|
color: $jumbo-bg-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.nav-search:focus::-webkit-input-placeholder { color: white; }
|
||||||
.nav-search:focus::-webkit-input-placeholder{ color:white }
|
.nav-search:focus::-moz-input-placeholder { color: white; }
|
||||||
.nav-search:focus::-moz-input-placeholder { color: white }
|
|
||||||
|
|
||||||
#search-hint {
|
#search-hint {
|
||||||
display: inline;
|
display: inline;
|
||||||
|
|
@ -42,7 +41,7 @@
|
||||||
top: 4.76px;
|
top: 4.76px;
|
||||||
transition: all 0.2s;
|
transition: all 0.2s;
|
||||||
|
|
||||||
@media(max-width: 691px){ right: 10% }
|
@media (max-width: 691px) { right: 10%; }
|
||||||
}
|
}
|
||||||
|
|
||||||
#search-hint-dialog {
|
#search-hint-dialog {
|
||||||
|
|
@ -56,7 +55,7 @@
|
||||||
right: -63%;
|
right: -63%;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
box-shadow: #00000033 0.2em 0.2em 0.2em;
|
box-shadow: #0003 0.2em 0.2em 0.2em;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
|
|
||||||
@media (min-width: 693px) and (max-width: 1163px) {
|
@media (min-width: 693px) and (max-width: 1163px) {
|
||||||
|
|
@ -70,7 +69,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#search-hint-dialog:before {
|
#search-hint-dialog::before {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 88%;
|
right: 88%;
|
||||||
|
|
@ -81,8 +80,10 @@
|
||||||
border-left: 17px solid transparent;
|
border-left: 17px solid transparent;
|
||||||
border-bottom: 26px solid white;
|
border-bottom: 26px solid white;
|
||||||
|
|
||||||
@media(max-width: 1230px) { right: 76% }
|
@media (max-width: 1230px) { right: 76%; }
|
||||||
|
|
||||||
@media (min-width: 693px) and (max-width: 1163px) { right: 68%; }
|
@media (min-width: 693px) and (max-width: 1163px) { right: 68%; }
|
||||||
|
|
||||||
@media (max-width: 690px) { right: 85%; }
|
@media (max-width: 690px) { right: 85%; }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -94,7 +95,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.dialog-text {
|
.dialog-text {
|
||||||
text-align: left
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
#hits {
|
#hits {
|
||||||
|
|
@ -105,7 +106,7 @@
|
||||||
width: 500px;
|
width: 500px;
|
||||||
max-height: 100%;
|
max-height: 100%;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
box-shadow: 0px 6px 35px 0px rgba(0,0,0,0.35);
|
box-shadow: 0 6px 35px 0 rgba(0, 0, 0, 0.35);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
margin-left: 49.5%;
|
margin-left: 49.5%;
|
||||||
|
|
@ -114,11 +115,11 @@
|
||||||
@media (max-width: 992px) {
|
@media (max-width: 992px) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
margin-top: 10.5%
|
margin-top: 10.5%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 993px) and (max-width: 1270px) {
|
@media (min-width: 993px) and (max-width: 1270px) {
|
||||||
margin-top: 6%
|
margin-top: 6%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -130,7 +131,7 @@
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hits-container:before {
|
.hits-container::before {
|
||||||
content: attr(title);
|
content: attr(title);
|
||||||
display: block;
|
display: block;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
@ -143,13 +144,14 @@
|
||||||
.ais-hits--item {
|
.ais-hits--item {
|
||||||
background-color: white;
|
background-color: white;
|
||||||
padding: 10px 20px;
|
padding: 10px 20px;
|
||||||
border-bottom: 1px solid #DDD;
|
border-bottom: 1px solid #ddd;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: #7e7e7e;
|
color: #7e7e7e;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ais-hits--item:hover, .ais-hits--item.active {
|
.ais-hits--item:hover,
|
||||||
background-color: #F0F0F0;
|
.ais-hits--item.active {
|
||||||
|
background-color: #f0f0f0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ais-hits.ais-hits__empty {
|
.ais-hits.ais-hits__empty {
|
||||||
|
|
@ -171,7 +173,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.ais-search-box--magnifier {
|
.ais-search-box--magnifier {
|
||||||
display: none
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ais-search-box--reset-wrapper {
|
.ais-search-box--reset-wrapper {
|
||||||
|
|
|
||||||
|
|
@ -1,110 +1,3 @@
|
||||||
/* Userland List Cards */
|
|
||||||
|
|
||||||
ul.report-list {
|
|
||||||
display: block;
|
|
||||||
list-style: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
@include breakpoint(md) {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.report-list > li {
|
|
||||||
display: block;
|
|
||||||
float: left;
|
|
||||||
@include breakpoint(md) { width: 47%; }
|
|
||||||
@include breakpoint(lg) { width: 31%; }
|
|
||||||
@include breakpoint(xl) { width: 23%; }
|
|
||||||
}
|
|
||||||
|
|
||||||
.report-list .inner {
|
|
||||||
display: block;
|
|
||||||
margin: 8px;
|
|
||||||
height: 100%;
|
|
||||||
padding: 20px;
|
|
||||||
text-align: center;
|
|
||||||
text-decoration: none;
|
|
||||||
background-color: #f6f8f8;
|
|
||||||
border: 1px solid #F0F0F0;
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.report-list .inner:hover {
|
|
||||||
background-color: #fcfdfd;
|
|
||||||
}
|
|
||||||
|
|
||||||
.report-list img {
|
|
||||||
display: inline-block;
|
|
||||||
width: 120px;
|
|
||||||
height: 60px;
|
|
||||||
margin-bottom: 0.3em;
|
|
||||||
transition: transform .32s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.report-list .inner:hover img {
|
|
||||||
transform: scale(1.1);
|
|
||||||
transition-duration: .08s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.report-list .inner:active img {
|
|
||||||
transform: scale(.92);
|
|
||||||
transition-duration: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.report-list h3 {
|
|
||||||
font-size: 18px;
|
|
||||||
color: $main-link-color;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.report-list p {
|
|
||||||
opacity: 0.8;
|
|
||||||
line-height: 1.4;
|
|
||||||
font-size: 90%;
|
|
||||||
text-align: left;
|
|
||||||
margin-top: 10px;
|
|
||||||
color: $text-gray-dark;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Filterable Lists (in /userland) */
|
|
||||||
|
|
||||||
.filterable-list {
|
|
||||||
list-style: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filterable-list > li {
|
|
||||||
border-bottom: 1px solid #DDD;
|
|
||||||
line-height: 1;
|
|
||||||
padding: 10px 40px 10px 0;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filterable-list > li:after {
|
|
||||||
content: attr(data-rank);
|
|
||||||
position: absolute;
|
|
||||||
top: 10px;
|
|
||||||
right: 10px;
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filterable-list-input {
|
|
||||||
width: 100%;
|
|
||||||
padding: 8px 8px;
|
|
||||||
border: 1px solid #CCC;
|
|
||||||
border-radius: 2px;
|
|
||||||
margin: 10px 0;
|
|
||||||
&[type="search"] {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Author List (for npm and GitHub users in /userland) */
|
/* Author List (for npm and GitHub users in /userland) */
|
||||||
|
|
||||||
.author-list {
|
.author-list {
|
||||||
|
|
@ -134,3 +27,115 @@ ul.report-list {
|
||||||
.author-list-item-details {
|
.author-list-item-details {
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Userland List Cards */
|
||||||
|
|
||||||
|
ul.report-list {
|
||||||
|
display: block;
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
@include breakpoint(md) {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.report-list > li {
|
||||||
|
display: block;
|
||||||
|
float: left;
|
||||||
|
|
||||||
|
@include breakpoint(md) { width: 47%; }
|
||||||
|
|
||||||
|
@include breakpoint(lg) { width: 31%; }
|
||||||
|
|
||||||
|
@include breakpoint(xl) { width: 23%; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.report-list .inner {
|
||||||
|
display: block;
|
||||||
|
margin: 8px;
|
||||||
|
height: 100%;
|
||||||
|
padding: 20px;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
background-color: #f6f8f8;
|
||||||
|
border: 1px solid #f0f0f0;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.report-list .inner:hover {
|
||||||
|
background-color: #fcfdfd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.report-list img {
|
||||||
|
display: inline-block;
|
||||||
|
width: 120px;
|
||||||
|
height: 60px;
|
||||||
|
margin-bottom: 0.3em;
|
||||||
|
transition: transform 0.32s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.report-list .inner:hover img {
|
||||||
|
transform: scale(1.1);
|
||||||
|
transition-duration: 0.08s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.report-list .inner:active img {
|
||||||
|
transform: scale(0.92);
|
||||||
|
transition-duration: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.report-list h3 {
|
||||||
|
font-size: 18px;
|
||||||
|
color: $main-link-color;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.report-list p {
|
||||||
|
opacity: 0.8;
|
||||||
|
line-height: 1.4;
|
||||||
|
font-size: 90%;
|
||||||
|
text-align: left;
|
||||||
|
margin-top: 10px;
|
||||||
|
color: $text-gray-dark;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Filterable Lists (in /userland) */
|
||||||
|
|
||||||
|
.filterable-list {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filterable-list > li {
|
||||||
|
border-bottom: 1px solid #ddd;
|
||||||
|
line-height: 1;
|
||||||
|
padding: 10px 40px 10px 0;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filterable-list > li::after {
|
||||||
|
content: attr(data-rank);
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
right: 10px;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filterable-list-input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 8px 8px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 2px;
|
||||||
|
margin: 10px 0;
|
||||||
|
|
||||||
|
&[type="search"] {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -29,7 +29,6 @@ $mini-color-link: hsl(230, 24%, 100%) !default;
|
||||||
// Accent
|
// Accent
|
||||||
$accent-color: hsl(335, 87%, 47%) !default;
|
$accent-color: hsl(335, 87%, 47%) !default;
|
||||||
|
|
||||||
|
|
||||||
// Basecoat overrides
|
// Basecoat overrides
|
||||||
|
|
||||||
$theme-color: $main-color-strong !default;
|
$theme-color: $main-color-strong !default;
|
||||||
|
|
@ -44,7 +43,7 @@ $border-color: $main-border-color !default;
|
||||||
// Default: $container-max-widths: ( xl: 1260px );
|
// Default: $container-max-widths: ( xl: 1260px );
|
||||||
$grid-breakpoints: map-merge($grid-breakpoints, (xl: 1300px)) !default;
|
$grid-breakpoints: map-merge($grid-breakpoints, (xl: 1300px)) !default;
|
||||||
|
|
||||||
$code-font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace !default;
|
$code-font-family: consolas, "Liberation Mono", menlo, courier, monospace !default;
|
||||||
|
|
||||||
$nodejs-color: #65AA4C;
|
$nodejs-color: #65aa4c;
|
||||||
$chromium-color: #5586EB
|
$chromium-color: #5586eb;
|
||||||
|
|
|
||||||
|
|
@ -25,7 +25,7 @@
|
||||||
transition: opacity 0.4s ease-in-out, flex 0.4s ease-in-out;
|
transition: opacity 0.4s ease-in-out, flex 0.4s ease-in-out;
|
||||||
|
|
||||||
&.expanded-version {
|
&.expanded-version {
|
||||||
flex: 2
|
flex: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.shrunk-version {
|
&.shrunk-version {
|
||||||
|
|
|
||||||
|
|
@ -5,10 +5,8 @@
|
||||||
@import "../bower_components/basecoat/scss/variables"; // Basecoat override
|
@import "../bower_components/basecoat/scss/variables"; // Basecoat override
|
||||||
@import "variables"; // Electron override
|
@import "variables"; // Electron override
|
||||||
|
|
||||||
|
|
||||||
// Global requirements
|
// Global requirements
|
||||||
@import "../bower_components/primer-css/scss/mixins";
|
@import "../bower_components/primer-css/scss/mixins";
|
||||||
|
|
||||||
@import "../bower_components/basecoat/scss/mixins/breakpoints";
|
@import "../bower_components/basecoat/scss/mixins/breakpoints";
|
||||||
@import "../bower_components/basecoat/scss/mixins/grid";
|
@import "../bower_components/basecoat/scss/mixins/grid";
|
||||||
@import "../bower_components/basecoat/scss/mixins/clearfix";
|
@import "../bower_components/basecoat/scss/mixins/clearfix";
|
||||||
|
|
@ -18,7 +16,6 @@
|
||||||
@import "../bower_components/primer-css/scss/normalize";
|
@import "../bower_components/primer-css/scss/normalize";
|
||||||
@import "../bower_components/primer-css/scss/base";
|
@import "../bower_components/primer-css/scss/base";
|
||||||
@import "../bower_components/primer-css/scss/type";
|
@import "../bower_components/primer-css/scss/type";
|
||||||
|
|
||||||
@import "../bower_components/basecoat/scss/layout"; // Basecoat override
|
@import "../bower_components/basecoat/scss/layout"; // Basecoat override
|
||||||
@import "../bower_components/basecoat/scss/type"; // Basecoat override
|
@import "../bower_components/basecoat/scss/type"; // Basecoat override
|
||||||
|
|
||||||
|
|
@ -26,7 +23,6 @@
|
||||||
@import "../bower_components/primer-css/scss/buttons";
|
@import "../bower_components/primer-css/scss/buttons";
|
||||||
@import "../bower_components/primer-css/scss/filter-list";
|
@import "../bower_components/primer-css/scss/filter-list";
|
||||||
@import "../bower_components/primer-css/scss/tooltips";
|
@import "../bower_components/primer-css/scss/tooltips";
|
||||||
|
|
||||||
@import "../bower_components/basecoat/scss/grid";
|
@import "../bower_components/basecoat/scss/grid";
|
||||||
@import "primer-support/index.scss";
|
@import "primer-support/index.scss";
|
||||||
|
|
||||||
|
|
|
||||||
Загрузка…
Ссылка в новой задаче