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

Improvements

Browse source 
- Remove Increase headings font size inside <header>
- Add $enable-transitions in _variables.scss
- Bigger Checkbox, Radio, switch
- Remove borders on button
This commit is contained in:
Lucas 2019-12-02 23:22:13 +07:00
parent 5f4b78a22c
commit 345053a956
17 changed files with 93 additions and 222 deletions
Download patch file Download diff file Expand all files Collapse all files

46
css/pico.classless.css
View file

@ -421,30 +421,6 @@ h6 {
font-size: 1rem;
}
header h1 {
font-size: 3rem;
}
header h2 {
font-size: 2.625rem;
}
header h3 {
font-size: 2.25rem;
}
header h4 {
font-size: 1.875rem;
}
header h5 {
font-size: 1.6875rem;
}
header h6 {
font-size: 1.5rem;
}
hgroup {
margin-bottom: 1.5rem;
}
@ -771,9 +747,10 @@ label > textarea {
*/
[type="checkbox"],
[type="radio"] {
font-size: 1.125rem;
display: inline-block;
width: 1rem;
height: 1rem;
width: 1em;
height: 1em;
margin-right: .375rem;
margin-bottom: 0.125rem;
vertical-align: middle;
@ -815,17 +792,17 @@ label > textarea {
}
[type="checkbox"][role="switch"] {
width: 1.85rem;
height: 1rem;
width: 1.85em;
height: 1em;
border: 2px solid var(--input-border);
border-radius: 1rem;
border-radius: 1em;
background-color: var(--input-border);
line-height: 1rem;
line-height: 1em;
}
[type="checkbox"][role="switch"]:before {
display: block;
width: calc(1rem - 4px);
width: calc(1em - 4px);
height: 100%;
border-radius: 50%;
background-color: var(--primary-inverse);
@ -841,7 +818,7 @@ label > textarea {
[type="checkbox"][role="switch"]:checked::before {
margin-right: 0;
margin-left: calc(0.925rem - 2px);
margin-left: calc(0.925em - 2px);
}
/**
@ -890,8 +867,8 @@ a[role="button"] {
button,
input[type="submit"],
a[role="button"] {
border: 1px solid transparent;
padding: 0.75rem 1rem;
border: 1px solid var(--primary);
border-radius: 0.25rem;
outline: none;
background-color: var(--primary);
@ -901,7 +878,7 @@ a[role="button"] {
line-height: 1.5;
text-align: center;
cursor: pointer;
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
button:hover, button:active, button:focus,
@ -911,7 +888,6 @@ input[type="submit"]:focus,
a[role="button"]:hover,
a[role="button"]:active,
a[role="button"]:focus {
border: 1px solid var(--primary-hover);
background-color: var(--primary-hover);
}

2
css/pico.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

56
css/pico.css
View file

@ -502,30 +502,6 @@ h6 {
font-size: 1rem;
}
header h1 {
font-size: 3rem;
}
header h2 {
font-size: 2.625rem;
}
header h3 {
font-size: 2.25rem;
}
header h4 {
font-size: 1.875rem;
}
header h5 {
font-size: 1.6875rem;
}
header h6 {
font-size: 1.5rem;
}
hgroup {
margin-bottom: 1.5rem;
}
@ -852,9 +828,10 @@ label > textarea {
*/
[type="checkbox"],
[type="radio"] {
font-size: 1.125rem;
display: inline-block;
width: 1rem;
height: 1rem;
width: 1em;
height: 1em;
margin-right: .375rem;
margin-bottom: 0.125rem;
vertical-align: middle;
@ -896,17 +873,17 @@ label > textarea {
}
[type="checkbox"][role="switch"] {
width: 1.85rem;
height: 1rem;
width: 1.85em;
height: 1em;
border: 2px solid var(--input-border);
border-radius: 1rem;
border-radius: 1em;
background-color: var(--input-border);
line-height: 1rem;
line-height: 1em;
}
[type="checkbox"][role="switch"]:before {
display: block;
width: calc(1rem - 4px);
width: calc(1em - 4px);
height: 100%;
border-radius: 50%;
background-color: var(--primary-inverse);
@ -922,7 +899,7 @@ label > textarea {
[type="checkbox"][role="switch"]:checked::before {
margin-right: 0;
margin-left: calc(0.925rem - 2px);
margin-left: calc(0.925em - 2px);
}
/**
@ -971,8 +948,8 @@ a[role="button"] {
button,
input[type="submit"],
a[role="button"] {
border: 1px solid transparent;
padding: 0.75rem 1rem;
border: 1px solid var(--primary);
border-radius: 0.25rem;
outline: none;
background-color: var(--primary);
@ -982,7 +959,7 @@ a[role="button"] {
line-height: 1.5;
text-align: center;
cursor: pointer;
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
button:hover, button:active, button:focus,
@ -992,7 +969,6 @@ input[type="submit"]:focus,
a[role="button"]:hover,
a[role="button"]:active,
a[role="button"]:focus {
border: 1px solid var(--primary-hover);
background-color: var(--primary-hover);
}
@ -1021,7 +997,6 @@ 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);
}
@ -1036,7 +1011,6 @@ input[type="reset"]:focus,
a.secondary[role="button"]:hover,
a.secondary[role="button"]:active,
a.secondary[role="button"]:focus {
border: 1px solid var(--secondary-hover);
background-color: var(--secondary-hover);
}
@ -1051,7 +1025,6 @@ 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);
}
@ -1066,7 +1039,6 @@ input.contrast[type="reset"]:focus,
a.contrast[role="button"]:hover,
a.contrast[role="button"]:active,
a.contrast[role="button"]:focus {
border: 1px solid var(--contrast-hover);
background-color: var(--contrast-hover);
}
@ -1080,7 +1052,6 @@ a.contrast[role="button"]:focus {
button.outline,
input.outline[type="submit"],
a.outline[role="button"] {
border: 1px solid var(--primary);
background-color: transparent;
color: var(--primary);
}
@ -1092,7 +1063,6 @@ input.outline[type="submit"]:focus,
a.outline[role="button"]:hover,
a.outline[role="button"]:active,
a.outline[role="button"]:focus {
border: 1px solid var(--primary-hover);
color: var(--primary-hover);
}
@ -1100,7 +1070,6 @@ 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);
}
@ -1115,7 +1084,6 @@ input.outline[type="reset"]:focus,
a.outline.secondary[role="button"]:hover,
a.outline.secondary[role="button"]:active,
a.outline.secondary[role="button"]:focus {
border: 1px solid var(--secondary-hover);
color: var(--secondary-hover);
}
@ -1130,7 +1098,6 @@ 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);
}
@ -1145,7 +1112,6 @@ input.outline.contrast[type="reset"]:focus,
a.outline.contrast[role="button"]:hover,
a.outline.contrast[role="button"]:active,
a.outline.contrast[role="button"]:focus {
border: 1px solid var(--contrast-hover);
color: var(--contrast-hover);
}

46
css/pico.fluid.classless.css
View file

@ -417,30 +417,6 @@ h6 {
font-size: 1rem;
}
header h1 {
font-size: 3rem;
}
header h2 {
font-size: 2.625rem;
}
header h3 {
font-size: 2.25rem;
}
header h4 {
font-size: 1.875rem;
}
header h5 {
font-size: 1.6875rem;
}
header h6 {
font-size: 1.5rem;
}
hgroup {
margin-bottom: 1.5rem;
}
@ -767,9 +743,10 @@ label > textarea {
*/
[type="checkbox"],
[type="radio"] {
font-size: 1.125rem;
display: inline-block;
width: 1rem;
height: 1rem;
width: 1em;
height: 1em;
margin-right: .375rem;
margin-bottom: 0.125rem;
vertical-align: middle;
@ -811,17 +788,17 @@ label > textarea {
}
[type="checkbox"][role="switch"] {
width: 1.85rem;
height: 1rem;
width: 1.85em;
height: 1em;
border: 2px solid var(--input-border);
border-radius: 1rem;
border-radius: 1em;
background-color: var(--input-border);
line-height: 1rem;
line-height: 1em;
}
[type="checkbox"][role="switch"]:before {
display: block;
width: calc(1rem - 4px);
width: calc(1em - 4px);
height: 100%;
border-radius: 50%;
background-color: var(--primary-inverse);
@ -837,7 +814,7 @@ label > textarea {
[type="checkbox"][role="switch"]:checked::before {
margin-right: 0;
margin-left: calc(0.925rem - 2px);
margin-left: calc(0.925em - 2px);
}
/**
@ -886,8 +863,8 @@ a[role="button"] {
button,
input[type="submit"],
a[role="button"] {
border: 1px solid transparent;
padding: 0.75rem 1rem;
border: 1px solid var(--primary);
border-radius: 0.25rem;
outline: none;
background-color: var(--primary);
@ -897,7 +874,7 @@ a[role="button"] {
line-height: 1.5;
text-align: center;
cursor: pointer;
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
button:hover, button:active, button:focus,
@ -907,7 +884,6 @@ input[type="submit"]:focus,
a[role="button"]:hover,
a[role="button"]:active,
a[role="button"]:focus {
border: 1px solid var(--primary-hover);
background-color: var(--primary-hover);
}

2
css/pico.fluid.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.min.css vendored
View file

File diff suppressed because one or more lines are too long

48
css/pico.slim.css
View file

@ -357,7 +357,6 @@ a {
background-color: transparent;
color: var(--primary);
text-decoration: none;
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, text-decoration 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
a:hover, a:active, a:focus {
@ -441,30 +440,6 @@ h6 {
font-size: 1rem;
}
header h1 {
font-size: 3rem;
}
header h2 {
font-size: 2.625rem;
}
header h3 {
font-size: 2.25rem;
}
header h4 {
font-size: 1.875rem;
}
header h5 {
font-size: 1.6875rem;
}
header h6 {
font-size: 1.5rem;
}
hgroup {
margin-bottom: 1.5rem;
}
@ -668,7 +643,6 @@ textarea {
color: var(--text);
font-weight: normal;
vertical-align: middle;
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
input::placeholder,
@ -766,9 +740,10 @@ label > textarea {
*/
[type="checkbox"],
[type="radio"] {
font-size: 1.125rem;
display: inline-block;
width: 1rem;
height: 1rem;
width: 1em;
height: 1em;
margin-right: .375rem;
margin-bottom: 0.125rem;
vertical-align: middle;
@ -810,22 +785,21 @@ label > textarea {
}
[type="checkbox"][role="switch"] {
width: 1.85rem;
height: 1rem;
width: 1.85em;
height: 1em;
border: 2px solid var(--input-border);
border-radius: 1rem;
border-radius: 1em;
background-color: var(--input-border);
line-height: 1rem;
line-height: 1em;
}
[type="checkbox"][role="switch"]:before {
display: block;
width: calc(1rem - 4px);
width: calc(1em - 4px);
height: 100%;
border-radius: 50%;
background-color: var(--primary-inverse);
content: '';
transition: margin 0.1s ease-in-out;
}
[type="checkbox"][role="switch"]:checked {
@ -836,7 +810,7 @@ label > textarea {
[type="checkbox"][role="switch"]:checked::before {
margin-right: 0;
margin-left: calc(0.925rem - 2px);
margin-left: calc(0.925em - 2px);
}
/**
@ -885,8 +859,8 @@ a[role="button"] {
button,
input[type="submit"],
a[role="button"] {
border: 1px solid transparent;
padding: 0.75rem 1rem;
border: 1px solid var(--primary);
border-radius: 0.25rem;
outline: none;
background-color: var(--primary);
@ -896,7 +870,6 @@ a[role="button"] {
line-height: 1.5;
text-align: center;
cursor: pointer;
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
button:hover, button:active, button:focus,
@ -906,7 +879,6 @@ input[type="submit"]:focus,
a[role="button"]:hover,
a[role="button"]:active,
a[role="button"]:focus {
border: 1px solid var(--primary-hover);
background-color: var(--primary-hover);
}

2
css/pico.slim.min.css vendored
View file

File diff suppressed because one or more lines are too long

1
docs/index.html
View file

@ -524,7 +524,6 @@
&lt;<b>p</b>&gt;Paragraph&lt;/<b>p</b>&gt;</code></pre>
</article>
<p>Inside a <code>&lt;<b>header</b>&gt;</code> all headings are 50% bigger.</p>
<p>Inside a <code>&lt;<b>hgroup</b>&gt;</code> all <code><i>margin-bottom</i></code> are collapsed and the <code>:last-child</code> is styled.</p>
<article>
<hgroup>

5
scss/_variables.scss
View file

@ -23,9 +23,12 @@ $enable-responsive-typography: true !default;
// .classless version if disabled
$enable-classes: true !default;
// Enable validation states for inputs
// Enable validation states for <input>
$enable-input-states: true !default;
// Enable transitions for <a>, <button>, <input>, <details>
$enable-transitions: true !default;
// Spacings
// ––––––––––––––––––––

5
scss/components/_accordion.scss
View file

@ -39,7 +39,10 @@ details {
background-repeat: no-repeat;
background-size: 1rem auto;
content: '';
transition: transform $transition;
@if $enable-transitions {
transition: transform $transition;
}
}
&:focus {

11
scss/content/_button-styles.scss
View file

@ -9,14 +9,12 @@
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);
}
@ -31,14 +29,12 @@
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);
}
@ -52,14 +48,12 @@
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);
}
}
@ -70,14 +64,12 @@
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);
}
@ -92,14 +84,12 @@
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);
}
@ -107,5 +97,4 @@
box-shadow: 0 0 0 0.2rem var(--contrast-focus);
}
}
}

15
scss/content/_button.scss
View file

@ -60,8 +60,8 @@ a[role="button"] {
button,
input[type="submit"],
a[role="button"] {
border: 1px solid transparent;
padding: $spacing-input-button;
border: 1px solid var(--primary);
border-radius: $round;
outline: none;
background-color: var(--primary);
@ -71,16 +71,17 @@ a[role="button"] {
line-height: $line-height;
text-align: center;
cursor: pointer;
transition:
background-color $transition,
border-color $transition,
color $transition,
box-shadow $transition;
@if $enable-transitions {
transition:
background-color $transition,
color $transition,
box-shadow $transition;
}
&:hover,
&:active,
&:focus {
border: 1px solid var(--primary-hover);
background-color: var(--primary-hover);
}

14
scss/content/_form-checkbox-radio.scss
View file

@ -5,9 +5,10 @@
// Checkboxes & Radios
[type="checkbox"],
[type="radio"] {
font-size: 1.125rem;
display: inline-block;
width: 1rem;
height: 1rem;
width: 1em;
height: 1em;
margin-right: .375rem;
margin-bottom: $spacing-label-input;
vertical-align: middle;
@ -51,8 +52,8 @@
[type="checkbox"][role="switch"] {
// Config
$switch-height: 1rem;
$switch-width: 1.85rem;
$switch-height: 1em;
$switch-width: 1.85em;
$switch-border: 2px;
$switch-transition: .1s ease-in-out;
@ -71,7 +72,10 @@
border-radius: 50%;
background-color: var(--primary-inverse);
content: '';
transition: margin $switch-transition;
@if $enable-transitions {
transition: margin $switch-transition;
}
}
&:checked {

15
scss/content/_form.scss
View file

@ -122,12 +122,15 @@ textarea {
color: var(--text);
font-weight: normal;
vertical-align: middle;
transition:
background-color $transition,
border-color $transition,
color $transition,
border-color $transition,
box-shadow $transition;
@if $enable-transitions {
transition:
background-color $transition,
border-color $transition,
color $transition,
border-color $transition,
box-shadow $transition;
}
&::placeholder {
color: var(--muted-text);

40
scss/content/_typography.scss
View file

@ -67,11 +67,14 @@ a {
background-color: transparent; // 1
color: var(--primary);
text-decoration: none;
transition:
background-color $transition,
color $transition,
text-decoration $transition,
box-shadow $transition;
@if $enable-transitions {
transition:
background-color $transition,
color $transition,
text-decoration $transition,
box-shadow $transition;
}
&:hover,
&:active,
@ -169,33 +172,6 @@ h6 {
font-size: 1rem;
}
// Increase headings font size inside <header>
header {
h1 {
font-size: 2rem*1.5;
}
h2 {
font-size: 1.75rem*1.5;
}
h3 {
font-size: 1.5rem*1.5;
}
h4 {
font-size: 1.25rem*1.5;
}
h5 {
font-size: 1.125rem*1.5;
}
h6 {
font-size: 1rem*1.5;
}
}
// Multi-level heading
hgroup {
margin-bottom: $spacing-typography;

5
scss/pico.slim.scss
View file

@ -13,9 +13,12 @@
// Enable responsive spacings for <header>, <main>, <footer>, <section>, <article>
$enable-responsive-spacings: false;
// Enable validation states for inputs
// Enable validation states for <input>
$enable-input-states: false;
// Enable transitions for <a>, <button>, <input>, <details>
$enable-transitions: false;
// Pico Lib
// --------------------