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

Improvements

Browse source 
- Add .contrast variant
- Separate _button-styles.scss
- Edit .secondary, mark, figcaption, hgroup, tooltips
- Docs: Add More about grids, External links icon, Second theme switcher
This commit is contained in:
Lucas 2019-11-30 12:43:20 +07:00
parent 066c0a04fd
commit 73237bdcd4
26 changed files with 516 additions and 229 deletions
Download patch file Download diff file Expand all files Collapse all files

2
scss/_variables.scss
View file

@ -4,7 +4,7 @@
// Enable <header>, <main>, <footer> inside <body> as a container
$enable-semantic-container: false !default;
// Enable ".container" as a container
// Enable .container and .container-fluid
$enable-class-container: true !default;
// Enable a centered viewport

6
scss/components/_nav.scss
View file

@ -48,6 +48,12 @@ nav {
&:focus {
text-decoration: none;
}
@if $enable-classes {
&.contrast:not([role="button"]) {
box-shadow: none;
}
}
}
}

8
scss/components/_tooltip.scss
View file

@ -22,8 +22,8 @@
overflow: hidden;
transform: translate(-50%, -.25rem);
border-radius: $round;
background: var(--secondary);
color: var(--secondary-inverse);
background: var(--contrast);
color: var(--contrast-inverse);
font-size: .85rem;
font-style: normal;
font-weight: normal;
@ -33,9 +33,9 @@
content: attr(data-tooltip);
opacity: 0;
pointer-events: none;
transition: opacity $transition;
}
// Caret
&::after {
padding: 0;
transform: translate(-50%, 0rem);
@ -44,7 +44,7 @@
border-left: .3rem solid transparent;
border-radius: 0;
background-color: transparent;
color: var(--secondary);
color: var(--contrast);
content: '';
}

111
scss/content/_button-styles.scss Normal file
View file

@ -0,0 +1,111 @@
@if $enable-classes {
/**
* Button Styles
*/
// Button .secondary
button.secondary,
input.secondary[type="submit"],
input[type="reset"],
a.secondary[role="button"] {
border: 1px solid var(--secondary);
background-color: var(--secondary);
color: var(--secondary-inverse);
&:hover,
&:active,
&:focus {
border: 1px solid var(--secondary-hover);
background-color: var(--secondary-hover);
}
&:focus {
box-shadow: 0 0 0 0.2rem var(--secondary-focus);
}
}
// Button .contrast
button.contrast,
input.contrast[type="submit"],
input.contrast[type="reset"],
a.contrast[role="button"] {
border: 1px solid var(--contrast);
background-color: var(--contrast);
color: var(--contrast-inverse);
&:hover,
&:active,
&:focus {
border: 1px solid var(--contrast-hover);
background-color: var(--contrast-hover);
}
&:focus {
box-shadow: 0 0 0 0.2rem var(--contrast-focus);
}
}
// Button .outline
button.outline,
input.outline[type="submit"],
a.outline[role="button"] {
border: 1px solid var(--primary);
background-color: transparent;
color: var(--primary);
&:hover,
&:active,
&:focus {
border: 1px solid var(--primary-hover);
color: var(--primary-hover);
}
}
// Button .outline.secondary
button.outline.secondary,
input.outline.secondary[type="submit"],
input.outline[type="reset"],
a.outline.secondary[role="button"] {
border: 1px solid var(--secondary);
background-color: transparent;
color: var(--secondary);
&:hover,
&:active,
&:focus {
border: 1px solid var(--secondary-hover);
color: var(--secondary-hover);
}
&:focus {
box-shadow: 0 0 0 0.2rem var(--secondary-focus);
}
}
// Button .outline.contrast
button.outline.contrast,
input.outline.contrast[type="submit"],
input.outline.contrast[type="reset"],
a.outline.contrast[role="button"] {
border: 1px solid var(--contrast);
background-color: transparent;
color: var(--contrast);
&:hover,
&:active,
&:focus {
border: 1px solid var(--contrast-hover);
color: var(--contrast-hover);
}
&:focus {
box-shadow: 0 0 0 0.2rem var(--contrast-focus);
}
}
}

65
scss/content/_button.scss
View file

@ -94,71 +94,6 @@ input[type="reset"] {
cursor: pointer;
}
// Button .secondary
@if $enable-classes {
button.secondary,
input.secondary[type="submit"],
input[type="reset"],
a.secondary[role="button"] {
border: 1px solid var(--secondary);
background-color: var(--secondary);
color: var(--secondary-inverse);
&:hover,
&:active,
&:focus {
border: 1px solid var(--secondary-hover);
background-color: var(--secondary-hover);
}
&:focus {
box-shadow: 0 0 0 0.2rem var(--secondary-focus);
}
}
}
// Button .outline
@if $enable-classes {
button.outline,
input.outline[type="submit"],
a.outline[role="button"] {
border: 1px solid var(--primary);
background-color: transparent;
color: var(--primary);
&:hover,
&:active,
&:focus {
border: 1px solid var(--primary-hover);
color: var(--primary-hover);
}
}
}
// Button .outline.secondary
@if $enable-classes {
button.outline.secondary,
input.outline.secondary[type="submit"],
input.outline[type="reset"],
a.outline.secondary[role="button"] {
border: 1px solid var(--secondary);
background-color: transparent;
color: var(--secondary);
&:hover,
&:active,
&:focus {
border: 1px solid var(--secondary-hover);
color: var(--secondary-hover);
}
&:focus {
box-shadow: 0 0 0 0.2rem var(--secondary-focus);
}
}
}
// Button [disabled]
button,
input[type="submit"],

22
scss/content/_typography.scss
View file

@ -103,6 +103,24 @@ a {
}
}
// Link .contrast
@if $enable-classes {
a.contrast:not([role="button"]) {
box-shadow: inset 0 -.33rem 0 var(--contrast-border);
color: var(--contrast);
&:hover,
&:active,
&:focus {
color: var(--contrast-hover);
}
&:focus {
background-color: var(--contrast-focus);
}
}
}
// Headings
// Because vertical margins can collapse, we avoid `margin-top`
h1,
@ -191,7 +209,7 @@ hgroup {
h6{
margin-bottom: 0;
}
*:last-child {
> *:last-child {
color: var(--muted-text);
font-size: 1.125rem;
font-weight: normal;
@ -248,7 +266,7 @@ ul li {
mark {
padding: .125rem .25rem;
background: var(--mark);
color: var(--text);
color: var(--mark-text);
vertical-align: middle;
}

4
scss/layout/_scroller.scss
View file

@ -13,7 +13,7 @@ figure {
figcaption {
color: var(--muted-text);
font-size: 87.5%;
padding: 0 $spacing-gutter ;
padding: ($spacing-gutter/2) $spacing-gutter;
}
@if map-get($breakpoints, "sm") {
@ -22,7 +22,7 @@ figure {
margin-left: 0;
figcaption {
padding: 0;
padding: ($spacing-gutter/2) 0;
}
}
}

1
scss/pico.scss
View file

@ -23,6 +23,7 @@
@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]

50
scss/themes/_dark.scss
View file

@ -17,19 +17,28 @@
--h4: #{$grey-300};
--h5: #{$grey-400};
--h6: #{$grey-500};
--mark: #{rgba($amber-200, .25)};
// Call-to-Action
// Primary Call-to-Action and links
--primary: #{$primary-600};
--primary-hover: #{$primary-500};
--primary-focus: #{rgba($primary-600, .25)};
--primary-inverse: #{$white};
// Secondary Call-to-Action
--secondary: #{$grey-200};
--secondary-hover: #{$grey-50};
--secondary-focus: #{rgba($grey-200, .25)};
--secondary-inverse: #{$grey-900};
@if $enable-classes {
// Secondary Call-to-Action and links
--secondary: #{$grey-600};
--secondary-hover: #{$grey-500};
--secondary-focus: #{rgba($grey-600, .25)};
--secondary-inverse: #{$white};
// Contrast Call-to-Action and Tooltips
--contrast: #{$grey-100};
--contrast-hover: #{$white};
--contrast-focus: #{rgba($grey-600, .25)};
--contrast-border: #{rgba($amber-200, .33)}; // For links
--contrast-inverse: #{darken($grey-900, 6%)};
}
// Form elements
--input-background: #{darken($grey-900, 6%)};
@ -38,6 +47,8 @@
// Utilities states
--valid: #{$green-700};
--invalid: #{$red-900};
--mark: #{rgba($amber-200, .5)};
--mark-text: #{$white};
--muted-text: #{$grey-500)};
--muted-background: #{darken($grey-900, 6%)};
--muted-border: #{mix($grey-800, $grey-900)};
@ -79,19 +90,28 @@
--h4: #{$grey-300};
--h5: #{$grey-400};
--h6: #{$grey-500};
--mark: #{rgba($amber-200, .25)};
// Call-to-Action
// Primary Call-to-Action and links
--primary: #{$primary-600};
--primary-hover: #{$primary-500};
--primary-focus: #{rgba($primary-600, .25)};
--primary-inverse: #{$white};
// Secondary Call-to-Action
--secondary: #{$grey-200};
--secondary-hover: #{$grey-50};
--secondary-focus: #{rgba($grey-200, .25)};
--secondary-inverse: #{$grey-900};
@if $enable-classes {
// Secondary Call-to-Action and links
--secondary: #{$grey-600};
--secondary-hover: #{$grey-500};
--secondary-focus: #{rgba($grey-600, .25)};
--secondary-inverse: #{$white};
// Contrast Call-to-Action and Tooltips
--contrast: #{$grey-100};
--contrast-hover: #{$white};
--contrast-focus: #{rgba($grey-600, .25)};
--contrast-border: #{rgba($amber-200, .33)}; // For links
--contrast-inverse: #{darken($grey-900, 6%)};
}
// Form elements
--input-background: #{darken($grey-900, 6%)};
@ -100,6 +120,8 @@
// Utilities states
--valid: #{$green-700};
--invalid: #{$red-900};
--mark: #{rgba($amber-200, .5)};
--mark-text: #{$white};
--muted-text: #{$grey-500)};
--muted-background: #{darken($grey-900, 6%)};
--muted-border: #{mix($grey-800, $grey-900)};

25
scss/themes/_light.scss
View file

@ -17,19 +17,28 @@
--h4: #{$grey-600};
--h5: #{$grey-500};
--h6: #{$grey-400};
--mark: #{rgba($amber-200, .5)};
// Primary Call-to-Action
// Primary Call-to-Action and links
--primary: #{$primary-600};
--primary-hover: #{$primary-700};
--primary-focus: #{rgba($primary-600, .125)};
--primary-inverse: #{$white};
// Secondary Call-to-Action
--secondary: #{mix($grey-700, $grey-800)};
--secondary-hover: #{mix($grey-800, $grey-900)};
--secondary-focus: #{rgba(mix($grey-700, $grey-800), .125)};
--secondary-inverse: #{$white};
@if $enable-classes {
// Secondary Call-to-Action and links
--secondary: #{$grey-500};
--secondary-hover: #{$grey-700};
--secondary-focus: #{rgba($grey-500, .125)};
--secondary-inverse: #{$white};
// Contrast Call-to-Action and Tooltips
--contrast: #{$grey-800};
--contrast-hover: #{mix($grey-900, $black)};
--contrast-focus: #{rgba($grey-500, .125)};
--contrast-border: #{rgba($amber-200, .5)}; // For links
--contrast-inverse: #{$white};
}
// Form elements
--input-background: #{$white};
@ -38,6 +47,8 @@
// Utilities states
--valid: #{$green-600};
--invalid: #{$red-700};
--mark: #{rgba($amber-200, .5)};
--mark-text: #{$grey-800};
--muted-text: #{mix($grey-400, $grey-500)};
--muted-background: #{$grey-50};
--muted-border: #{$grey-50};