mirror of
https://github.com/picocss/pico.git
synced 2025-04-26 03:06:14 -04:00
Scss files organization
+ Slim version example
This commit is contained in:
Lucas
parent
f8e51cb875
commit
434cbe02ac
28 changed files with 1329 additions and 300 deletions
|
|
@ -82,7 +82,7 @@ pre {
|
|||
}
|
||||
}
|
||||
|
||||
// Code syntax
|
||||
// Code Syntax highlighting
|
||||
code {
|
||||
|
||||
// Tags
|
||||
|
|
|
|||
91
scss/content/_form-checkbox-radio.scss
Normal file
91
scss/content/_form-checkbox-radio.scss
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
/**
|
||||
* Form elements
|
||||
*/
|
||||
|
||||
// Checkboxes & Radios
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: .375rem;
|
||||
margin-bottom: $spacing-label-input;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
|
||||
&::-ms-check {
|
||||
display: none; // unstyle IE checkboxes
|
||||
}
|
||||
|
||||
&:checked {
|
||||
border-color: var(--primary);
|
||||
background-color: var(--primary);
|
||||
// Source: https://feathericons.com/
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: .66rem auto;
|
||||
}
|
||||
|
||||
& ~ label {
|
||||
display: inline-block;
|
||||
margin-right: .375rem;
|
||||
margin-bottom: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
// Radios
|
||||
[type="radio"] {
|
||||
border-radius: 50%;
|
||||
|
||||
&:checked {
|
||||
border-width: .33rem;
|
||||
border-color: var(--primary);
|
||||
background-color: var(--primary-inverse);
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Switchs
|
||||
[type="checkbox"][role="switch"] {
|
||||
|
||||
// Config
|
||||
$switch-height: 1rem;
|
||||
$switch-width: 1.85rem;
|
||||
$switch-border: 2px;
|
||||
$switch-transition: .1s ease-in-out;
|
||||
|
||||
// Styles
|
||||
width: $switch-width;
|
||||
height: $switch-height;
|
||||
border: $switch-border solid var(--input-border);
|
||||
border-radius: $switch-height;
|
||||
background-color: var(--input-border);
|
||||
line-height: $switch-height;
|
||||
|
||||
&:before {
|
||||
display: block;
|
||||
width: calc(#{$switch-height} - #{$switch-border*2});
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background-color: var(--primary-inverse);
|
||||
content: '';
|
||||
transition: margin $switch-transition;
|
||||
}
|
||||
|
||||
&:checked {
|
||||
border-color: var(--primary);
|
||||
background-color: var(--primary);
|
||||
// Disable if check box icon is needed
|
||||
background-image: none;
|
||||
// Enable if check box icon is needed
|
||||
// background-position: center left $switch-width/6;
|
||||
// background-size: $switch-width/5 auto;
|
||||
|
||||
&::before {
|
||||
margin-right: 0;
|
||||
margin-left: calc(#{$switch-width/2} - #{$switch-border});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -172,27 +172,30 @@ textarea {
|
|||
margin-bottom: $spacing-typography;
|
||||
padding: $spacing-input-button;
|
||||
|
||||
// Validation states
|
||||
&[invalid]:not(:focus),
|
||||
&[valid]:not(:focus) {
|
||||
padding-right: 2rem;
|
||||
background-position: center right .75rem;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1rem auto;
|
||||
}
|
||||
@if $enable-input-states {
|
||||
|
||||
&[invalid]:not(:focus) {
|
||||
// Source: https://feathericons.com/
|
||||
$invalid-icon-color: "b94646"; // Without '#' !important
|
||||
border-bottom: 1px solid var(--invalid);
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23" + $invalid-icon-color + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
||||
}
|
||||
// Validation states
|
||||
&[invalid]:not(:focus),
|
||||
&[valid]:not(:focus) {
|
||||
padding-right: 2rem;
|
||||
background-position: center right .75rem;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1rem auto;
|
||||
}
|
||||
|
||||
&[valid]:not(:focus) {
|
||||
// Source: https://feathericons.com/
|
||||
$valid-icon-color: "288a6a"; // Without '#' !important
|
||||
border-bottom: 1px solid var(--valid);
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23" + $valid-icon-color + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
&[invalid]:not(:focus) {
|
||||
// Source: https://feathericons.com/
|
||||
$invalid-icon-color: "b94646"; // Without '#' !important
|
||||
border-bottom: 1px solid var(--invalid);
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23" + $invalid-icon-color + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
&[valid]:not(:focus) {
|
||||
// Source: https://feathericons.com/
|
||||
$valid-icon-color: "288a6a"; // Without '#' !important
|
||||
border-bottom: 1px solid var(--valid);
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23" + $valid-icon-color + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -218,94 +221,6 @@ select {
|
|||
}
|
||||
}
|
||||
|
||||
// Checkboxes & Radios
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: .375rem;
|
||||
margin-bottom: $spacing-label-input;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
|
||||
&::-ms-check {
|
||||
display: none; // unstyle IE checkboxes
|
||||
}
|
||||
|
||||
&:checked {
|
||||
border-color: var(--primary);
|
||||
background-color: var(--primary);
|
||||
// Source: https://feathericons.com/
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: .66rem auto;
|
||||
}
|
||||
|
||||
& ~ label {
|
||||
display: inline-block;
|
||||
margin-right: .375rem;
|
||||
margin-bottom: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
// Radios
|
||||
[type="radio"] {
|
||||
border-radius: 50%;
|
||||
|
||||
&:checked {
|
||||
border-width: .33rem;
|
||||
border-color: var(--primary);
|
||||
background-color: var(--primary-inverse);
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Switchs
|
||||
[type="checkbox"][role="switch"] {
|
||||
|
||||
// Config
|
||||
$switch-height: 1rem;
|
||||
$switch-width: 1.85rem;
|
||||
$switch-border: 2px;
|
||||
$switch-transition: .1s ease-in-out;
|
||||
|
||||
// Styles
|
||||
width: $switch-width;
|
||||
height: $switch-height;
|
||||
border: $switch-border solid var(--input-border);
|
||||
border-radius: $switch-height;
|
||||
background-color: var(--input-border);
|
||||
line-height: $switch-height;
|
||||
|
||||
&:before {
|
||||
display: block;
|
||||
width: calc(#{$switch-height} - #{$switch-border*2});
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background-color: var(--primary-inverse);
|
||||
content: '';
|
||||
transition: margin $switch-transition;
|
||||
}
|
||||
|
||||
&:checked {
|
||||
border-color: var(--primary);
|
||||
background-color: var(--primary);
|
||||
// Disable if check box icon is needed
|
||||
background-image: none;
|
||||
// Enable if check box icon is needed
|
||||
// background-position: center left $switch-width/6;
|
||||
// background-size: $switch-width/5 auto;
|
||||
|
||||
&::before {
|
||||
margin-right: 0;
|
||||
margin-left: calc(#{$switch-width/2} - #{$switch-border});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Helper
|
||||
form small {
|
||||
color: var(--muted-text);
|
||||
|
|
|
|||
|
|
@ -22,7 +22,6 @@ td {
|
|||
th,
|
||||
thead td {
|
||||
color: var(--text);
|
||||
font-weight: bolder;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -171,7 +171,6 @@ h6 {
|
|||
|
||||
// Increase headings font size inside <header>
|
||||
header {
|
||||
|
||||
h1 {
|
||||
font-size: 2rem*1.5;
|
||||
}
|
||||
|
|
@ -258,6 +257,7 @@ ol {
|
|||
margin-bottom: $spacing-typography/2;
|
||||
}
|
||||
}
|
||||
|
||||
ul li {
|
||||
list-style: square;
|
||||
}
|
||||
|
|
@ -305,6 +305,7 @@ ins {
|
|||
color: var(--valid);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// del
|
||||
del {
|
||||
color: var(--invalid);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue