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

Scss files organization

Browse source 
+ Slim version example
This commit is contained in:
Lucas 2019-12-02 11:52:26 +07:00
parent f8e51cb875
commit 434cbe02ac
28 changed files with 1329 additions and 300 deletions
Download patch file Download diff file Expand all files Collapse all files

3
scss/_variables.scss
View file

@ -23,6 +23,9 @@ $enable-responsive-typography: true !default;
// .classless version if disabled
$enable-classes: true !default;
// Enable validation states for inputs
$enable-input-states: true !default;
// Spacings
// ––––––––––––––––––––

2
scss/components/_card-sectioning.scss
View file

@ -1,5 +1,5 @@
/**
* Card sectionning (<article> > header, footer|pre)
* Card sectionning (<article> > header, footer, pre)
*/
article {

2
scss/content/_code.scss
View file

@ -82,7 +82,7 @@ pre {
}
}
// Code syntax
// Code Syntax highlighting
code {
// Tags

91
scss/content/_form-checkbox-radio.scss Normal file
View 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});
}
}
}

129
scss/content/_form.scss
View file

@ -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);

1
scss/content/_table.scss
View file

@ -22,7 +22,6 @@ td {
th,
thead td {
color: var(--text);
font-weight: bolder;
font-size: 1rem;
}

3
scss/content/_typography.scss
View file

@ -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);

2
scss/layout/_sectioning.scss
View file

@ -107,7 +107,5 @@ body {
}
}
}
}
}

9
scss/pico.scss
View file

@ -4,24 +4,23 @@
*/
// Config
@import "colors";
@import "variables";
// Theming
@import "themes/light";
@import "themes/dark";
@import "themes/default";
// Layout
@import "layout/document"; // html
@import "layout/sectioning"; // body, header, main, footer
@import "layout/container"; // .container, .container-fluid
@import "layout/section"; // main > section
@import "layout/section"; // section
@import "layout/grid"; // .grid
@import "layout/scroller"; // figure
// Content
@import "content/typography"; // a, headings, p, ul, blockquote ...
@import "content/form"; // label, input, select, ...
@import "content/form-checkbox-radio"; // type=checkbox, type=radio, role=switch
@import "content/button"; // button, a[role=button], ...
@import "content/button-styles"; // .secondary, .contrast, .outline
@import "content/table"; // table, tr, td, ...
@ -31,6 +30,6 @@
// Components
@import "components/accordion"; // details, summary
@import "components/card"; // article
@import "components/card-sectioning"; // article > header, footer|pre
@import "components/card-sectioning"; // article > header, footer, pre
@import "components/nav"; // nav
@import "components/tooltip"; // data-tooltip

41
scss/pico.slim.scss Normal file
View file

@ -0,0 +1,41 @@
/*!
* Pico.css v0.1.0 (https://picocss.com)
* Copyright 2019 - Licensed under MIT
*
* Slim version example
* You can export only the modules you need
*/
$enable-responsive-spacings: false;
$enable-input-states: false;
// Config
@import "variables";
// Theming
@import "themes/default";
// Layout
@import "layout/document"; // html
@import "layout/sectioning"; // body, header, main, footer
@import "layout/container"; // .container, .container-fluid
// @import "layout/section"; // section
@import "layout/grid"; // .grid
@import "layout/scroller"; // figure
// Content
@import "content/typography"; // a, headings, p, ul, blockquote ...
@import "content/form"; // label, input, select, ...
@import "content/form-checkbox-radio"; // type=checkbox, type=radio, role=switch
@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]
// Components
// @import "components/accordion"; // details, summary
// @import "components/card"; // article
// @import "components/card-sectioning"; // article > header, footer, pre
// @import "components/nav"; // nav
// @import "components/tooltip"; // data-tooltip

7
scss/themes/_default.scss Normal file
View file

@ -0,0 +1,7 @@
/**
* Theme: default
*/
@import "default/colors";
@import "default/light";
@import "default/dark";

0
scss/_colors.scss → scss/themes/default/_colors.scss
View file

64
scss/themes/_dark.scss → scss/themes/default/_dark.scss
View file

@ -1,8 +1,5 @@
/**
* Dark theme (Auto)
* Automatically enabled if user has Dark mode enabled
*/
// Dark theme (Auto)
// Automatically enabled if user has Dark mode enabled
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
@ -24,21 +21,18 @@
--primary-focus: #{rgba($primary-600, .25)};
--primary-inverse: #{$white};
@if $enable-classes {
// // Secondary Call-to-Action, links and kbd
--secondary: #{$grey-600};
--secondary-hover: #{$grey-500};
--secondary-focus: #{rgba($grey-600, .25)};
--secondary-inverse: #{$white};
// 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%)};
}
// 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%)};
@ -75,11 +69,8 @@
/**
* Dark theme (Forced)
* Enabled if forced with data-theme="dark"
*/
// Dark theme (Forced)
// Enabled if forced with data-theme="dark"
[data-theme="dark"] {
// Document
@ -100,21 +91,18 @@
--primary-focus: #{rgba($primary-600, .25)};
--primary-inverse: #{$white};
@if $enable-classes {
// Secondary Call-to-Action, links and kbd
--secondary: #{$grey-600};
--secondary-hover: #{$grey-500};
--secondary-focus: #{rgba($grey-600, .25)};
--secondary-inverse: #{$white};
// 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%)};
}
// 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%)};

36
scss/themes/_light.scss → scss/themes/default/_light.scss
View file

@ -1,8 +1,5 @@
/**
* Light theme (Default)
* Can be forced with data-theme="light"
*/
// Light theme (Default)
// Can be forced with data-theme="light"
[data-theme="light"],
:root:not([data-theme="dark"]) {
@ -24,20 +21,18 @@
--primary-focus: #{rgba($primary-600, .125)};
--primary-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};
// Secondary Call-to-Action, links and kbd
--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};
}
// 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};
@ -60,8 +55,9 @@
// Code
--code-background: #{lighten($grey-50, 2%)};
--code-inlined: #{$grey-50};
--code-color-2: #{hsl(330, 30%, 50%)};
--code-color-3: #{hsl(185, 30%, 40%)};
--code-color-1: #{$grey-500)};
--code-color-2: #{hsl(330, 40%, 50%)};
--code-color-3: #{hsl(185, 40%, 40%)};
--code-color-4: #{hsl(40, 20%, 50%)};
--code-color-5: #{mix($grey-300, $grey-400)};