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

Improvements

Browse source 
- Edit code colors and add a color for comments
- Add ::selection
- Small edits for cards: last-child and overflow
- Add card-sectioning (header, footer, pre)
- Change global hue for Primary color
- Remove border for pre
- Add querySelectorAll() for theme-switcher.js
- Update docs
This commit is contained in:
Lucas 2019-12-01 16:35:38 +07:00
parent c3f9d8d8c8
commit 85e21d35de
23 changed files with 937 additions and 422 deletions
Download patch file Download diff file Expand all files Collapse all files

4
scss/_colors.scss
View file

@ -1,5 +1,5 @@
// Navy-Grey
$grey-hue: 200 !default;
$grey-hue: 205 !default;
$grey-50: hsl($grey-hue, 20%, 94%) !default;
$grey-100: hsl($grey-hue, 18%, 86%) !default;
$grey-200: hsl($grey-hue, 16%, 77%) !default;
@ -12,7 +12,7 @@ $grey-800: hsl($grey-hue, 25%, 23%) !default;
$grey-900: hsl($grey-hue, 30%, 15%) !default;
// Light Blue
$primary-hue: 200;
$primary-hue: 195;
$primary-50: hsl($primary-hue, 90%, 94%) !default;
$primary-100: hsl($primary-hue, 88%, 86%) !default;
$primary-200: hsl($primary-hue, 86%, 77%) !default;

145
scss/components/_card-sectioning.scss Normal file
View file

@ -0,0 +1,145 @@
/**
* Card sectionning (<article> > header, footer|pre)
*/
article {
> header,
> footer {
background-color: var(--card-sections);
}
> header,
> footer,
> pre {
margin: -$spacing-gutter;
padding: $spacing-block $spacing-gutter;
@if map-get($breakpoints, "sm") and
map-get($spacing-factor, "sm") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "sm")) {
margin: -$spacing-block*map-get($spacing-factor, "sm");
padding: $spacing-block ($spacing-block*map-get($spacing-factor, "sm"));
}
}
@if map-get($breakpoints, "md") and
map-get($spacing-factor, "md") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "md")) {
margin: -$spacing-block*map-get($spacing-factor, "md");
padding: $spacing-block ($spacing-block*map-get($spacing-factor, "md"));
}
}
@if map-get($breakpoints, "lg") and
map-get($spacing-factor, "lg") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "lg")) {
margin: -$spacing-block*map-get($spacing-factor, "lg");
padding: $spacing-block ($spacing-block*map-get($spacing-factor, "lg"));
}
}
@if map-get($breakpoints, "xl") and
map-get($spacing-factor, "xl") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "xl")) {
margin: -$spacing-block*map-get($spacing-factor, "xl");
padding: $spacing-block ($spacing-block*map-get($spacing-factor, "xl"));
}
}
}
> header {
margin-top: -$spacing-gutter*2;
margin-bottom: $spacing-block;
@if map-get($breakpoints, "sm") and
map-get($spacing-factor, "sm") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "sm")) {
margin-top: -($spacing-block*map-get($spacing-factor, "sm"));
margin-bottom: $spacing-block*map-get($spacing-factor, "sm");
}
}
@if map-get($breakpoints, "md") and
map-get($spacing-factor, "md") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "md")) {
margin-top: -($spacing-block*map-get($spacing-factor, "md"));
margin-bottom: $spacing-block*map-get($spacing-factor, "md");
}
}
@if map-get($breakpoints, "lg") and
map-get($spacing-factor, "lg") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "lg")) {
margin-top: -($spacing-block*map-get($spacing-factor, "lg"));
margin-bottom: $spacing-block*map-get($spacing-factor, "lg");
}
}
@if map-get($breakpoints, "xl") and
map-get($spacing-factor, "xl") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "xl")) {
margin-top: -($spacing-block*map-get($spacing-factor, "xl"));
margin-bottom: $spacing-block*map-get($spacing-factor, "xl");
}
}
}
> footer,
> pre {
margin-top: $spacing-block;
margin-bottom: -$spacing-gutter*2;
@if map-get($breakpoints, "sm") and
map-get($spacing-factor, "sm") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "sm")) {
margin-top: $spacing-block*map-get($spacing-factor, "sm");
margin-bottom: -($spacing-block*map-get($spacing-factor, "sm"));
}
}
@if map-get($breakpoints, "md") and
map-get($spacing-factor, "md") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "md")) {
margin-top: $spacing-block*map-get($spacing-factor, "md");
margin-bottom: -($spacing-block*map-get($spacing-factor, "md"));
}
}
@if map-get($breakpoints, "lg") and
map-get($spacing-factor, "lg") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "lg")) {
margin-top: $spacing-block*map-get($spacing-factor, "lg");
margin-bottom: -($spacing-block*map-get($spacing-factor, "lg"));
}
}
@if map-get($breakpoints, "xl") and
map-get($spacing-factor, "xl") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "xl")) {
margin-top: $spacing-block*map-get($spacing-factor, "xl");
margin-bottom: -($spacing-block*map-get($spacing-factor, "xl"));
}
}
}
}

6
scss/components/_card.scss
View file

@ -7,6 +7,7 @@ article {
margin-right: -$spacing-gutter;
margin-left: -$spacing-gutter;
padding: $spacing-block $spacing-gutter;
overflow: hidden;
background: var(--card-background);
box-shadow: var(--card-shadow);
@ -53,4 +54,9 @@ article {
padding: $spacing-block*map-get($spacing-factor, "xl");
}
}
// Remove last-child margin bottom
> *:not(footer):not(pre):last-child {
margin-bottom: 0;
}
}

15
scss/content/_code.scss
View file

@ -24,7 +24,7 @@ pre,
code,
kbd {
background: var(--code-inlined);
color: var(--muted-text);
color: var(--code-color-1);
font-size: 85%;
font-weight: 400;
line-height: 1;
@ -66,7 +66,6 @@ pre {
margin-left: -$spacing-gutter;
padding: $spacing-block $spacing-gutter;
overflow-x: auto;
border-left: .25rem solid var(--code-border);
background: var(--code-background);
@media (min-width: map-get($breakpoints, "sm")) {
@ -88,21 +87,27 @@ code {
// Tags
b {
color: var(--code-color-1);
color: var(--code-color-2);
font-weight: normal;
}
// Properties
i {
color: var(--code-color-2);
color: var(--code-color-3);
font-style: normal;
}
// Values
u {
color: var(--text);
color: var(--code-color-4);
text-decoration: none;
}
// Comments
em {
color: var(--code-color-5);
font-style: normal;
}
}
// kbd

5
scss/content/_typography.scss
View file

@ -309,3 +309,8 @@ ins {
del {
color: var(--invalid);
}
// selection
::selection {
background-color: var(--primary-focus);
}

35
scss/pico.scss
View file

@ -12,24 +12,25 @@
@import "themes/dark";
// Layout
@import "layout/document"; // html
@import "layout/sectioning"; // body, header, main, footer
@import "layout/container"; // .container, .container-fluid
@import "layout/section"; // main > section
@import "layout/grid"; // .grid
@import "layout/scroller"; // figure
@import "layout/document"; // html
@import "layout/sectioning"; // body, header, main, footer
@import "layout/container"; // .container, .container-fluid
@import "layout/section"; // main > section
@import "layout/grid"; // .grid
@import "layout/scroller"; // figure
// Content
@import "content/typography"; // a, headings, p, ul, blockquote ...
@import "content/form"; // label, input, select, ...
@import "content/button"; // button, a[role=button], ...
@import "content/button-styles"; // .secondary, .contrast, .outline
@import "content/table"; // table, tr, td, ...
@import "content/code"; // pre, code, ...
@import "content/miscs"; // hr, progress, template, [hidden]
@import "content/typography"; // a, headings, p, ul, blockquote ...
@import "content/form"; // label, input, select, ...
@import "content/button"; // button, a[role=button], ...
@import "content/button-styles"; // .secondary, .contrast, .outline
@import "content/table"; // table, tr, td, ...
@import "content/code"; // pre, code, ...
@import "content/miscs"; // hr, progress, template, [hidden]
// Components
@import "components/accordion"; // details, summary
@import "components/card"; // article
@import "components/nav"; // nav
@import "components/tooltip"; // data-tooltip
@import "components/accordion"; // details, summary
@import "components/card"; // article
@import "components/card-sectioning"; // article > header, footer|pre
@import "components/nav"; // nav
@import "components/tooltip"; // data-tooltip

22
scss/themes/_dark.scss
View file

@ -55,18 +55,21 @@
// Card
--card-background: #{darken($grey-900, 2%)};
--card-sections: #{darken($grey-900, 4%)};
--card-shadow: 0 0.125rem 1rem #{rgba($black, 0.06)}, 0 0.125rem 2rem #{rgba($black, 0.12)}, 0 0 0 0.0625rem #{rgba($black, 0.09)};
// Code
--code-background: #{darken($grey-900, 4%)};
--code-border: #{mix($grey-800, $grey-900)};
--code-inlined: #{rgba($grey-700, .25)};
--code-color-1: #{desaturate($red-700, 10%)};
--code-color-2: #{desaturate($primary-500, 40%)};
--code-color-1: #{$grey-500)};
--code-color-2: #{hsl(330, 30%, 50%)};
--code-color-3: #{hsl(185, 30%, 50%)};
--code-color-4: #{hsl(40, 10%, 50%)};
--code-color-5: #{mix($grey-600, $grey-700)};
// Table
--table-border: #{darken($grey-900, 6%)};
--table-stripping: #{rgba($grey-50,.033)};
--table-stripping: #{rgba($grey-50,.02)};
}
}
@ -128,16 +131,19 @@
// Card
--card-background: #{darken($grey-900, 2%)};
--card-sections: #{darken($grey-900, 4%)};
--card-shadow: 0 0.125rem 1rem #{rgba($black, 0.06)}, 0 0.125rem 2rem #{rgba($black, 0.12)}, 0 0 0 0.0625rem #{rgba($black, 0.09)};
// Code
--code-background: #{darken($grey-900, 4%)};
--code-border: #{mix($grey-800, $grey-900)};
--code-inlined: #{rgba($grey-700, .25)};
--code-color-1: #{desaturate($red-700, 10%)};
--code-color-2: #{desaturate($primary-500, 40%)};
--code-color-1: #{$grey-500)};
--code-color-2: #{hsl(330, 30%, 50%)};
--code-color-3: #{hsl(185, 30%, 50%)};
--code-color-4: #{hsl(40, 10%, 50%)};
--code-color-5: #{mix($grey-600, $grey-700)};
// Table
--table-border: #{darken($grey-900, 6%)};
--table-stripping: #{rgba($grey-50,.033)};
--table-stripping: #{rgba($grey-50,.02)};
}

11
scss/themes/_light.scss
View file

@ -25,7 +25,6 @@
--primary-inverse: #{$white};
@if $enable-classes {
// Secondary Call-to-Action and links
--secondary: #{$grey-500};
--secondary-hover: #{$grey-700};
@ -55,16 +54,18 @@
// Card
--card-background: #{$white};
--card-sections: #{lighten($grey-50, 2%)};
--card-shadow: 0 0.125rem 1rem #{rgba($grey-900, 0.04)}, 0 0.125rem 2rem #{rgba($grey-900, 0.08)}, 0 0 0 0.0625rem #{rgba($grey-900, 0.024)};
// Code
--code-background: #{lighten($grey-50, 2%)};
--code-border: #{$grey-100};
--code-inlined: #{$grey-50};
--code-color-1: #{desaturate($red-700, 20%)};
--code-color-2: #{desaturate($primary-600, 30%)};
--code-color-2: #{hsl(330, 30%, 50%)};
--code-color-3: #{hsl(185, 30%, 40%)};
--code-color-4: #{hsl(40, 20%, 50%)};
--code-color-5: #{mix($grey-300, $grey-400)};
// Table
--table-border: #{rgba($grey-50, .75)};
--table-stripping: #{rgba($grey-900,.033)};
--table-stripping: #{rgba($grey-900,.02)};
}