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
picocss/docs/basics.css

89 lines
4.3 KiB
CSS
Raw Normal View History

- Updated form validation to not validate when form[novalidate] - Updated tooltips to go multiline, max width of 250px. -Updated card footer, to remove the margin from the last element if they are buttons or groups when in the footer - Made container, grid, and row classes to have a parent class, so they will not effect rest of page. This will only work if you use that style css. - Added tabs - Added floating labels - Added responsive nav hamburger menu Let me know if you find any bugs or have ideas for improvements!
2024-12-10 12:30:06 -05:00
/**
* Yohn's PicoCSS basics
*
* I'm starting this here, for now, and will probably add it to the main releases when I build up enough
* useful universal classes.
*
* @author John Brittain III
* @link https://yohn.github.io/PicoCSS
*/
Typo fixed in docs for the table Added basic padding and margin classes: 0 for none, 1 for half the spacing size, 2 for normal spacing, and 3 for 1.5 spacing Minor clean up on the accordion.scss
2025-02-06 03:12:10 -05:00
:host, :root {
--yoco-spacing-block-1: calc(var(--pico-block-spacing-vertical) * .5);
--yoco-spacing-inline-1: calc(var(--pico-block-spacing-horizontal) * .5);
--yoco-spacing-block-2: var(--pico-block-spacing-vertical);
--yoco-spacing-inline-2: var(--pico-block-spacing-horizontal);
--yoco-spacing-block-3: calc(var(--pico-block-spacing-vertical) * 1.5);
--yoco-spacing-inline-3: calc(var(--pico-block-spacing-horizontal) * 1.5);
}
.m-0 { margin: 0 !important; }
.mt-0 { margin-block-start: 0 !important; }
.mb-0 { margin-block-end: 0 !important; }
.my-0 { margin-block: 0 !important; }
.ms-0 { margin-inline-start: 0 !important; }
.me-0 { margin-inline-end: 0 !important; }
.mx-0 { margin-inline: 0 !important; }
.m-1 { margin: var(--yoco-spacing-block-1) var(--yoco-spacing-inline-1) !important; }
.mt-1 { margin-block-start: var(--yoco-spacing-block-1) !important; }
.mb-1 { margin-block-end: var(--yoco-spacing-block-1) !important; }
.my-1 { margin-block: var(--yoco-spacing-block-1) !important; }
.ms-1 { margin-inline-start: var(--yoco-spacing-inline-1) !important; }
.me-1 { margin-inline-end: var(--yoco-spacing-inline-1) !important; }
.mx-1 { margin-inline: var(--yoco-spacing-inline-1) !important; }
.m-2 { margin: var(--yoco-spacing-block-2) var(--yoco-spacing-inline-2) !important; }
.mt-2 { margin-block-start: var(--yoco-spacing-block-2) !important; }
.mb-2 { margin-block-end: var(--yoco-spacing-block-2) !important; }
.my-2 { margin-block: var(--yoco-spacing-block-2) !important; }
.ms-2 { margin-inline-start: var(--yoco-spacing-inline-2) !important; }
.me-2 { margin-inline-end: var(--yoco-spacing-inline-2) !important; }
.mx-2 { margin-inline: var(--yoco-spacing-inline-2) !important; }
.m-3 { margin: var(--yoco-spacing-block-3) var(--yoco-spacing-inline-3) !important; }
.mt-3 { margin-block-start: var(--yoco-spacing-block-3) !important; }
.mb-3 { margin-block-end: var(--yoco-spacing-block-3) !important; }
.my-3 { margin-block: var(--yoco-spacing-block-3) !important; }
.ms-3 { margin-inline-start: var(--yoco-spacing-inline-3) !important; }
.me-3 { margin-inline-end: var(--yoco-spacing-inline-3) !important; }
.mx-3 { margin-inline: var(--yoco-spacing-inline-3) !important; }
.p-0 { padding: 0 !important; }
.pt-0 { padding-block-start: 0 !important; }
.pb-0 { padding-block-end: 0 !important; }
.py-0 { padding-block: 0 !important; }
.ps-0 { padding-inline-start: 0 !important; }
.pe-0 { padding-inline-end: 0 !important; }
.px-0 { padding-inline: 0 !important; }
.p-1 { padding: var(--yoco-spacing-block-1) var(--yoco-spacing-inline-1) !important; }
.pt-1 { padding-block-start: var(--yoco-spacing-block-1) !important; }
.pb-1 { padding-block-end: var(--yoco-spacing-block-1) !important; }
.py-1 { padding-block: var(--yoco-spacing-block-1) !important; }
.ps-1 { padding-inline-start: var(--yoco-spacing-inline-1) !important; }
.pe-1 { padding-inline-end: var(--yoco-spacing-inline-1) !important; }
.px-1 { padding-inline: var(--yoco-spacing-inline-1) !important; }
.p-2 { padding: var(--yoco-spacing-block-2) var(--yoco-spacing-inline-2) !important; }
.pt-2 { padding-block-start: var(--yoco-spacing-block-2) !important; }
.pb-2 { padding-block-end: var(--yoco-spacing-block-2) !important; }
.py-2 { padding-block: var(--yoco-spacing-block-2) !important; }
.ps-2 { padding-inline-start: var(--yoco-spacing-inline-2) !important; }
.pe-2 { padding-inline-end: var(--yoco-spacing-inline-2) !important; }
.px-2 { padding-inline: var(--yoco-spacing-inline-2) !important; }
.p-3 { padding: var(--yoco-spacing-block-3) var(--yoco-spacing-inline-3) !important; }
.pt-3 { padding-block-start: var(--yoco-spacing-block-3) !important; }
.pb-3 { padding-block-end: var(--yoco-spacing-block-3) !important; }
.py-3 { padding-block: var(--yoco-spacing-block-3) !important; }
.ps-3 { padding-inline-start: var(--yoco-spacing-inline-3) !important; }
.pe-3 { padding-inline-end: var(--yoco-spacing-inline-3) !important; }
.px-3 { padding-inline: var(--yoco-spacing-inline-3) !important; }
- Updated form validation to not validate when form[novalidate] - Updated tooltips to go multiline, max width of 250px. -Updated card footer, to remove the margin from the last element if they are buttons or groups when in the footer - Made container, grid, and row classes to have a parent class, so they will not effect rest of page. This will only work if you use that style css. - Added tabs - Added floating labels - Added responsive nav hamburger menu Let me know if you find any bugs or have ideas for improvements!
2024-12-10 12:30:06 -05:00
.fw-n { font-weight: normal !important; }
article > header > h6 {color: var(--pico-primary);}
Reference in a new issue Copy permalink