mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-06-19 04:35:08 -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

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;
}