mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-24 02:16:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Prettify code

Browse source
This commit is contained in:
Lucas Larroche 2021-10-24 12:33:20 +07:00
parent 868e5d20cb
commit 5f6e3c1abd
59 changed files with 1079 additions and 1027 deletions
Download patch file Download diff file Expand all files Collapse all files

1
docs/scss/components/_nav.scss
View file

@ -23,7 +23,6 @@ body > nav {
// Band & Title
ul:first-of-type li {
// Brand
&:first-of-type {
a {

22
docs/scss/components/_theme-switcher.scss
View file

@ -8,7 +8,7 @@
bottom: var(--spacing);
width: auto;
margin-bottom: 0;
padding: .75rem;
padding: 0.75rem;
border-radius: 2rem;
box-shadow: var(--card-box-shadow);
line-height: 1;
@ -20,9 +20,14 @@
height: 1rem;
border: 0.15rem solid currentColor;
border-radius: 50%;
background: linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%);
background: linear-gradient(
to right,
currentColor 0%,
currentColor 50%,
transparent 50%
);
vertical-align: bottom;
content: '';
content: "";
transition: transform var(--transition);
}
@ -31,7 +36,7 @@
max-width: 0;
padding: 0;
overflow: hidden;
font-size: .875rem;
font-size: 0.875rem;
font-style: normal;
white-space: nowrap;
}
@ -39,10 +44,8 @@
&:hover,
&:focus {
max-width: 100%;
transition:
background-color var(--transition),
border-color var(--transition),
color var(--transition),
transition: background-color var(--transition),
border-color var(--transition), color var(--transition),
box-shadow var(--transition);
}
@ -54,8 +57,7 @@
i {
max-width: 100%;
padding: 0 calc(var(--spacing) / 2) 0 calc(var(--spacing) / 4);
transition: max-width var(--transition),
padding var(--transition);
transition: max-width var(--transition), padding var(--transition);
}
}

12
docs/scss/content/_code.scss
View file

@ -17,7 +17,8 @@ article pre code {
section > pre {
background: var(--article-code-background-color);
margin: var(--block-spacing-vertical) 0;
padding: calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal);
padding: calc(var(--block-spacing-vertical) / 1.5)
var(--block-spacing-horizontal);
box-shadow: var(--card-box-shadow);
}
@ -33,7 +34,7 @@ section > pre {
position: absolute;
top: 0;
right: 0;
padding: .375rem .75rem;
padding: 0.375rem 0.75rem;
border-radius: 0;
color: var(--primary-inverse);
font-size: 14px;
@ -47,7 +48,8 @@ section > pre {
// Spacing for Valid & Invalid badge
code {
padding: calc(var(--block-spacing-vertical) / 1.5 + 14px + 0.75rem) var(--block-spacing-horizontal);
padding: calc(var(--block-spacing-vertical) / 1.5 + 14px + 0.75rem)
var(--block-spacing-horizontal);
}
}
@ -55,13 +57,13 @@ section > pre {
[data-theme="invalid"] {
&:before {
background: var(--invalid-color);
content: 'Not so great';
content: "Not so great";
}
}
[data-theme="valid"] {
&:before {
background: var(--valid-color);
content: 'Great';
content: "Great";
}
}

4
docs/scss/content/_typography.scss
View file

@ -6,12 +6,12 @@ section > hgroup {
margin-bottom: calc(var(--typography-spacing-vertical) * 2);
}
a[role=button] {
a[role="button"] {
margin-right: calc(var(--typography-spacing-vertical) / 4);
margin-bottom: var(--typography-spacing-vertical);
}
[role=document] {
[role="document"] {
section > h1,
section > h2,
section > h3 {

8
docs/scss/layout/_aside.scss
View file

@ -3,7 +3,6 @@
*/
main > aside {
nav {
width: 100%;
margin-bottom: var(--block-spacing-vertical);
@ -26,7 +25,8 @@ main > aside {
}
}
li, summary {
li,
summary {
padding-top: 0;
padding-bottom: 0;
font-size: 16px;
@ -51,7 +51,7 @@ main > aside {
}
details {
padding-bottom: .25rem;
padding-bottom: 0.25rem;
border-bottom: none;
summary {
@ -66,7 +66,7 @@ main > aside {
}
&[open] {
>summary:not(:focus) {
> summary:not(:focus) {
color: var(--h1-color);
}
}

2
docs/scss/layout/_document.scss
View file

@ -3,5 +3,5 @@
*/
html {
scroll-behavior:smooth;
scroll-behavior: smooth;
}

23
docs/scss/layout/_documentation.scss
View file

@ -11,7 +11,6 @@
// Docs: Customization
#customization {
figure {
display: grid;
grid-template-columns: repeat(9, 1fr);
@ -32,12 +31,12 @@
border-top-left-radius: 0;
}
button {
margin-bottom: 0;
padding: 0;
padding-top: 100%;
border:none;
border-radius: 0;
button {
margin-bottom: 0;
padding: 0;
padding-top: 100%;
border: none;
border-radius: 0;
&:focus {
box-shadow: none;
@ -47,8 +46,8 @@
background-image: var(--icon-check);
background-position: center;
background-repeat: no-repeat;
background-size: .66rem auto;
box-shadow: inset 0 0 1rem 0 rgba(0,0,0,0.25);
background-size: 0.66rem auto;
box-shadow: inset 0 0 1rem 0 rgba(0, 0, 0, 0.25);
}
&[data-color="lime"],
&[data-color="yellow"],
@ -69,10 +68,8 @@
}
}
// Docs: Grids
#grids {
--grid-spacing-vertical: 1rem;
button {
@ -83,12 +80,12 @@
@media (min-width: map-get($breakpoints, "sm")) {
display: inline-block;
width: auto;
margin-right: .5rem;
margin-right: 0.5rem;
}
svg {
stroke: var(--secondary);
margin-right: .5rem;
margin-right: 0.5rem;
border: 2px solid currentColor;
border-radius: 1rem;
background: currentColor;

31
docs/scss/layout/_main.scss
View file

@ -7,7 +7,6 @@ $navHeight: 3.5rem;
// Main grid
body > main {
padding-top: calc(var(--block-spacing-vertical) + #{$navHeight});
@if map-get($breakpoints, "lg") {
@ -33,51 +32,51 @@ body > main {
// Anchors hacks for internal links
div[role="document"] > section::before {
display: block;
height: calc(2rem + #{$navHeight} - .5rem);
margin-top: calc(-2rem - #{$navHeight} + .5rem);
content: '';
height: calc(2rem + #{$navHeight} - 0.5rem);
margin-top: calc(-2rem - #{$navHeight} + 0.5rem);
content: "";
@if map-get($breakpoints, "sm") {
@media (min-width: map-get($breakpoints, "sm")) {
height: calc(2.5rem + #{$navHeight} - .5rem);
height: calc(-2.5rem - #{$navHeight} + .5rem);
height: calc(2.5rem + #{$navHeight} - 0.5rem);
height: calc(-2.5rem - #{$navHeight} + 0.5rem);
}
}
@if map-get($breakpoints, "md") {
@media (min-width: map-get($breakpoints, "md")) {
height: calc(3rem + #{$navHeight} - .5rem);
margin-top: calc(-3rem - #{$navHeight} + .5rem);
height: calc(3rem + #{$navHeight} - 0.5rem);
margin-top: calc(-3rem - #{$navHeight} + 0.5rem);
}
}
@if map-get($breakpoints, "lg") {
@media (min-width: map-get($breakpoints, "lg")) {
height: calc(3.5rem + #{$navHeight} - .5rem);
margin-top: calc(-3.5rem - #{$navHeight} + .5rem);
height: calc(3.5rem + #{$navHeight} - 0.5rem);
margin-top: calc(-3.5rem - #{$navHeight} + 0.5rem);
}
}
@if map-get($breakpoints, "xl") {
@media (min-width: map-get($breakpoints, "xl")) {
height: calc(4rem + #{$navHeight} - .5rem);
margin-top: calc(-4rem - #{$navHeight} + .5rem);
height: calc(4rem + #{$navHeight} - 0.5rem);
margin-top: calc(-4rem - #{$navHeight} + 0.5rem);
}
}
}
// External links
div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):not([role])::after {
div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):not([role])::after
{
display: inline-block;
width: 1rem;
height: 1rem;
background-image: var(--icon-external);
background-position: top center;
background-repeat: no-repeat;
background-size: .66rem auto;
content: '';
background-size: 0.66rem auto;
content: "";
}
// Embedded SVG

3
docs/scss/themes/_docs.scss
View file

@ -9,7 +9,6 @@
// Can be forced with data-theme="light"
@import "docs/light";
// Dark theme (Auto)
// Automatically enabled if user has Dark mode enabled
@import "docs/dark";
@ -23,4 +22,4 @@
// Enabled if forced with data-theme="dark"
[data-theme="dark"] {
@include dark;
}
}

10
docs/scss/themes/docs/_dark.scss
View file

@ -1,9 +1,9 @@
// Dark theme [Additions for docs]
@mixin dark {
--invalid-color: #{rgba($red-900, .5)};
--valid-color: #{rgba($green-800, .5)};
--nav-background-color: #{rgba(darken($grey-900, 6%), .8)};
--nav-border-color: #{rgba($grey-500, .2)};
--invalid-color: #{rgba($red-900, 0.5)};
--valid-color: #{rgba($green-800, 0.5)};
--nav-background-color: #{rgba(darken($grey-900, 6%), 0.8)};
--nav-border-color: #{rgba($grey-500, 0.2)};
--nav-logo-color: #{mix($black, $grey-900)};
--article-code-background-color: var(--code-background-color);
}
}

4
docs/scss/themes/docs/_icons.scss
View file

@ -1,7 +1,7 @@
// Icons
// Source: https://feathericons.com/
:root {
--icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-500, .999)}' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
--icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-500, .999)}' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
--icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-check-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.75)' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
}

4
docs/scss/themes/docs/_light.scss
View file

@ -4,8 +4,8 @@
:root:not([data-theme="dark"]) {
--invalid-color: #{$red-800};
--valid-color: #{$green-700};
--nav-background-color: #{rgba($white, .7)};
--nav-border-color: #{rgba($grey-500, .2)};
--nav-background-color: #{rgba($white, 0.7)};
--nav-border-color: #{rgba($grey-500, 0.2)};
--nav-logo-color: #{$white};
--article-code-background-color: #{mix($grey-50, $white, 33%)};
}