mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-26 11:16:15 -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

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
// --------------------