mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-20 08:45:06 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions
picocss/css/pico.conditional.blue.css

4601 lines
163 KiB
CSS
Raw Normal View History

fix: build theme script
2024-01-28 20:28:27 +07:00
@charset "UTF-8";
/*!
Build CSS
2025-01-17 10:01:20 +00:00
* Pico CSS ✨ v2.2.5 (https://github.com/Yohn/PicoCSS)
Build CSS
2025-01-11 03:36:02 +00:00
* Copyright 2019-2025 - Licensed under MIT
fix: build theme script
2024-01-28 20:28:27 +07:00
*/
/**
* Styles
*/
rebuilt css files, For some reason was having issues with the line endings, hopefully the editorconfig will fix it.
2024-12-03 14:27:56 -05:00
:root,
:host {
fix: build theme script
2024-01-28 20:28:27 +07:00
--pico-font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--pico-font-family-sans-serif: system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif, var(--pico-font-family-emoji);
--pico-font-family-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace, var(--pico-font-family-emoji);
--pico-font-family: var(--pico-font-family-sans-serif);
--pico-line-height: 1.5;
--pico-font-weight: 400;
--pico-font-size: 100%;
--pico-text-underline-offset: 0.1rem;
--pico-border-radius: 0.25rem;
--pico-border-width: 0.0625rem;
--pico-outline-width: 0.125rem;
--pico-transition: 0.2s ease-in-out;
--pico-spacing: 1rem;
Got the file validation and previewer lines up nicer
2024-11-13 07:26:10 -05:00
--pico-icon-red-close: 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='rgb(183.25, 63.5, 59)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
fix: build theme script
2024-01-28 20:28:27 +07:00
--pico-typography-spacing-vertical: 1rem;
--pico-block-spacing-vertical: var(--pico-spacing);
--pico-block-spacing-horizontal: var(--pico-spacing);
--pico-grid-column-gap: var(--pico-spacing);
--pico-grid-row-gap: var(--pico-spacing);
Changed spacing on form elements to be a tad smaller. It was just too big for my liking, and I feel this way is a lot easier. Added cursor back on button - it was just an arrow. Added parent-selector to the notifications, and corrected readbility of notifications. updated the version within the css files made rows only show up on css files where classes are enabled made the tooltips have a dark background - even for dark themes.
2024-12-07 19:56:51 -05:00
--pico-form-element-spacing-vertical: calc(var(--pico-spacing) * 0.5);
--pico-form-element-spacing-horizontal: calc(var(--pico-spacing) * 0.75);
fix: build theme script
2024-01-28 20:28:27 +07:00
--pico-group-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
--pico-group-box-shadow-focus-with-input: 0 0 0 0.0625rem var(--pico-form-element-border-color);
--pico-modal-overlay-backdrop-filter: blur(0.375rem);
--pico-nav-element-spacing-vertical: 1rem;
--pico-nav-element-spacing-horizontal: 0.5rem;
--pico-nav-link-spacing-vertical: 0.5rem;
--pico-nav-link-spacing-horizontal: 0.5rem;
--pico-nav-breadcrumb-divider: ">";
--pico-icon-checkbox: 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='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-minus: 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='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
--pico-icon-chevron: 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='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-date: 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='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--pico-icon-time: 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='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-search: 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='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--pico-icon-close: 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='rgb(136, 145, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
--pico-icon-loading: url("data:image/svg+xml,%3Csvg fill='none' height='24' width='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='rgb(136, 145, 164)' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E");
}
@media (min-width: 576px) {
rebuilt css files, For some reason was having issues with the line endings, hopefully the editorconfig will fix it.
2024-12-03 14:27:56 -05:00
:root,
:host {
fix: build theme script
2024-01-28 20:28:27 +07:00
--pico-font-size: 106.25%;
}
}
@media (min-width: 768px) {
rebuilt css files, For some reason was having issues with the line endings, hopefully the editorconfig will fix it.
2024-12-03 14:27:56 -05:00
:root,
:host {
fix: build theme script
2024-01-28 20:28:27 +07:00
--pico-font-size: 112.5%;
}
}
@media (min-width: 1024px) {
rebuilt css files, For some reason was having issues with the line endings, hopefully the editorconfig will fix it.
2024-12-03 14:27:56 -05:00
:root,
:host {
fix: build theme script
2024-01-28 20:28:27 +07:00
--pico-font-size: 118.75%;
}
}
@media (min-width: 1280px) {
rebuilt css files, For some reason was having issues with the line endings, hopefully the editorconfig will fix it.
2024-12-03 14:27:56 -05:00
:root,
:host {
fix: build theme script
2024-01-28 20:28:27 +07:00
--pico-font-size: 125%;
}
}
@media (min-width: 1536px) {
rebuilt css files, For some reason was having issues with the line endings, hopefully the editorconfig will fix it.
2024-12-03 14:27:56 -05:00
:root,
:host {
fix: build theme script
2024-01-28 20:28:27 +07:00
--pico-font-size: 131.25%;
}
}
a {
--pico-text-decoration: underline;
}
a.secondary, a.contrast {
--pico-text-decoration: underline;
}
small {
--pico-font-size: 0.875em;
}
h1,
h2,
h3,
h4,
h5,
h6 {
--pico-font-weight: 700;
}
h1 {
--pico-font-size: 2rem;
--pico-line-height: 1.125;
--pico-typography-spacing-top: 3rem;
}
h2 {
--pico-font-size: 1.75rem;
--pico-line-height: 1.15;
--pico-typography-spacing-top: 2.625rem;
}
h3 {
--pico-font-size: 1.5rem;
--pico-line-height: 1.175;
--pico-typography-spacing-top: 2.25rem;
}
h4 {
--pico-font-size: 1.25rem;
--pico-line-height: 1.2;
--pico-typography-spacing-top: 1.874rem;
}
h5 {
--pico-font-size: 1.125rem;
--pico-line-height: 1.225;
--pico-typography-spacing-top: 1.6875rem;
}
h6 {
--pico-font-size: 1rem;
--pico-line-height: 1.25;
--pico-typography-spacing-top: 1.5rem;
}
Build CSS
2025-01-17 08:51:24 +00:00
table > caption {
--pico-font-weight: 600;
}
fix: build theme script
2024-01-28 20:28:27 +07:00
thead th,
thead td,
tfoot th,
tfoot td {
--pico-font-weight: 600;
--pico-border-width: 0.1875rem;
}
pre,
code,
kbd,
samp {
--pico-font-family: var(--pico-font-family-monospace);
}
kbd {
--pico-font-weight: bolder;
}
input:not([type=submit],
[type=button],
[type=reset],
[type=checkbox],
[type=radio],
[type=file]),
:where(select, textarea) {
--pico-outline-width: 0.0625rem;
}
[type=search] {
--pico-border-radius: 5rem;
}
[type=checkbox],
[type=radio] {
--pico-border-width: 0.125rem;
}
[type=checkbox][role=switch] {
--pico-border-width: 0.1875rem;
}
details.dropdown summary:not([role=button]) {
--pico-outline-width: 0.0625rem;
}
nav details.dropdown summary:focus-visible {
--pico-outline-width: 0.125rem;
}
[role=search] {
--pico-border-radius: 5rem;
}
[role=search]:has(button.secondary:focus,
[type=submit].secondary:focus,
[type=button].secondary:focus,
[role=button].secondary:focus),
[role=group]:has(button.secondary:focus,
[type=submit].secondary:focus,
[type=button].secondary:focus,
[role=button].secondary:focus) {
--pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus);
}
[role=search]:has(button.contrast:focus,
[type=submit].contrast:focus,
[type=button].contrast:focus,
[role=button].contrast:focus),
[role=group]:has(button.contrast:focus,
[type=submit].contrast:focus,
[type=button].contrast:focus,
[role=button].contrast:focus) {
--pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width) var(--pico-contrast-focus);
}
[role=search] button,
[role=search] [type=submit],
[role=search] [type=button],
[role=search] [role=button],
[role=group] button,
[role=group] [type=submit],
[role=group] [type=button],
[role=group] [role=button] {
--pico-form-element-spacing-horizontal: 2rem;
}
Version 2.2.1
2024-12-21 05:48:33 -05:00
[role=tablist] {
--pico-tab-animation: showTab;
}
fix: build theme script
2024-01-28 20:28:27 +07:00
/**
* Color schemes
*/
[data-theme=light],
rebuilt css files, For some reason was having issues with the line endings, hopefully the editorconfig will fix it.
2024-12-03 14:27:56 -05:00
:root:not([data-theme=dark]),
:host(:not([data-theme=dark])) {
chore: build
2024-08-18 13:13:30 -04:00
color-scheme: light;
fix: build theme script
2024-01-28 20:28:27 +07:00
--pico-background-color: #fff;
--pico-color: #373c44;
--pico-text-selection-color: rgba(116, 139, 248, 0.25);
--pico-muted-color: #646b79;
surpressimg sass warnings
2024-11-10 11:27:44 -05:00
--pico-muted-border-color: rgb(231, 234, 239.5);
fix: build theme script
2024-01-28 20:28:27 +07:00
--pico-primary: #2060df;
--pico-primary-background: #2060df;
--pico-primary-border: var(--pico-primary-background);
--pico-primary-underline: rgba(32, 96, 223, 0.5);
--pico-primary-hover: #184eb8;
--pico-primary-hover-background: #1d59d0;
--pico-primary-hover-border: var(--pico-primary-hover-background);
--pico-primary-hover-underline: var(--pico-primary-hover);
--pico-primary-focus: rgba(116, 139, 248, 0.5);
--pico-primary-inverse: #fff;
--pico-secondary: #5d6b89;
--pico-secondary-background: #525f7a;
--pico-secondary-border: var(--pico-secondary-background);
--pico-secondary-underline: rgba(93, 107, 137, 0.5);
--pico-secondary-hover: #48536b;
--pico-secondary-hover-background: #48536b;
--pico-secondary-hover-border: var(--pico-secondary-hover-background);
--pico-secondary-hover-underline: var(--pico-secondary-hover);
--pico-secondary-focus: rgba(93, 107, 137, 0.25);
--pico-secondary-inverse: #fff;
--pico-contrast: #181c25;
--pico-contrast-background: #181c25;
--pico-contrast-border: var(--pico-contrast-background);
--pico-contrast-underline: rgba(24, 28, 37, 0.5);
--pico-contrast-hover: #000;
--pico-contrast-hover-background: #000;
--pico-contrast-hover-border: var(--pico-contrast-hover-background);
--pico-contrast-hover-underline: var(--pico-secondary-hover);
--pico-contrast-focus: rgba(93, 107, 137, 0.25);
--pico-contrast-inverse: #fff;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015);
Version 2.2.1
2024-12-21 05:48:33 -05:00
--pico-accent-bg-color: var(--pico-background-color);
--pico-accent-section-bg-color: rgb(251, 251.5, 252.25);
--pico-accent-border-color: var(--pico-muted-border-color);
--pico-accent-box-shadow: var(--pico-box-shadow);
fix: build theme script
2024-01-28 20:28:27 +07:00
--pico-h1-color: #2d3138;
--pico-h2-color: #373c44;
--pico-h3-color: #424751;
--pico-h4-color: #4d535e;
--pico-h5-color: #5c6370;
--pico-h6-color: #646b79;
surpressimg sass warnings
2024-11-10 11:27:44 -05:00
--pico-mark-background-color: rgb(252.5, 230.5, 191.5);
fix: build theme script
2024-01-28 20:28:27 +07:00
--pico-mark-color: #0f1114;
surpressimg sass warnings
2024-11-10 11:27:44 -05:00
--pico-ins-color: rgb(28.5, 105.5, 84);
--pico-del-color: rgb(136, 56.5, 53);
fix: build theme script
2024-01-28 20:28:27 +07:00
--pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
surpressimg sass warnings
2024-11-10 11:27:44 -05:00
--pico-code-background-color: rgb(243, 244.5, 246.75);
fix: build theme script
2024-01-28 20:28:27 +07:00
--pico-code-color: #646b79;
--pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color);
surpressimg sass warnings
2024-11-10 11:27:44 -05:00
--pico-form-element-background-color: rgb(251, 251.5, 252.25);
fix: build theme script
2024-01-28 20:28:27 +07:00
--pico-form-element-selected-background-color: #dfe3eb;
--pico-form-element-border-color: #cfd5e2;
--pico-form-element-color: #23262c;
--pico-form-element-placeholder-color: var(--pico-muted-color);
--pico-form-element-active-background-color: #fff;
--pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5;
surpressimg sass warnings
2024-11-10 11:27:44 -05:00
--pico-form-element-invalid-border-color: rgb(183.5, 105.5, 106.5);
--pico-form-element-invalid-active-border-color: rgb(200.25, 79.25, 72.25);
fix: build theme script
2024-01-28 20:28:27 +07:00
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
surpressimg sass warnings
2024-11-10 11:27:44 -05:00
--pico-form-element-valid-border-color: rgb(76, 154.5, 137.5);
--pico-form-element-valid-active-border-color: rgb(39, 152.75, 118.75);
fix: build theme script
2024-01-28 20:28:27 +07:00
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #bfc7d9;
--pico-switch-checked-background-color: var(--pico-primary-background);
--pico-switch-color: #fff;
--pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-range-border-color: #dfe3eb;
--pico-range-active-border-color: #bfc7d9;
--pico-range-thumb-border-color: var(--pico-background-color);
--pico-range-thumb-color: var(--pico-secondary-background);
--pico-range-thumb-active-color: var(--pico-primary-background);
--pico-accordion-border-color: var(--pico-muted-border-color);
--pico-accordion-active-summary-color: var(--pico-primary-hover);
--pico-accordion-close-summary-color: var(--pico-color);
--pico-accordion-open-summary-color: var(--pico-muted-color);
--pico-card-background-color: var(--pico-background-color);
--pico-card-border-color: var(--pico-muted-border-color);
--pico-card-box-shadow: var(--pico-box-shadow);
surpressimg sass warnings
2024-11-10 11:27:44 -05:00
--pico-card-sectioning-background-color: rgb(251, 251.5, 252.25);
fix: build theme script
2024-01-28 20:28:27 +07:00
--pico-dropdown-background-color: #fff;
--pico-dropdown-border-color: #eff1f4;
--pico-dropdown-box-shadow: var(--pico-box-shadow);
--pico-dropdown-color: var(--pico-color);
--pico-dropdown-hover-background-color: #eff1f4;
--pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75);
--pico-progress-background-color: #dfe3eb;
--pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse);
surpressimg sass warnings
2024-11-10 11:27:44 -05:00
--pico-icon-valid: 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='rgb(76, 154.5, 137.5)' 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");
--pico-icon-invalid: 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='rgb(200.25, 79.25, 72.25)' 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");
Added a Timeline feature, removed the margin-bottom from `article > header > h[1-6]` And added the border-color for dark theme on the article > header
2024-11-12 04:59:34 -05:00
--pico-timeline-line-color: var(--pico-primary-background);
--pico-timeline-dot-background-color: var(--pico-primary-inverse);
--pico-timeline-dot-border-color: var(--pico-primary-background);
--pico-timeline-arrow-color: var(--pico-card-sectioning-background-color);
fix: build theme script
2024-01-28 20:28:27 +07:00
}
corrected dropdown arrow colors for secondary, contrast, and primary. Also enabled the turning of the arrow when the dropdowns are open or closed
2024-12-14 21:13:13 -05:00
[data-theme=light] .pico details summary[role=button]:not(.outline, .contrast, .secondary)::after,
:root:not([data-theme=dark]) .pico details summary[role=button]:not(.outline, .contrast, .secondary)::after,
:host(:not([data-theme=dark])) .pico details summary[role=button]:not(.outline, .contrast, .secondary)::after {
filter: brightness(100) invert(0);
}
[data-theme=light] .pico details summary.secondary[role=button]::after,
:root:not([data-theme=dark]) .pico details summary.secondary[role=button]::after,
:host(:not([data-theme=dark])) .pico details summary.secondary[role=button]::after {
filter: brightness(100) invert(1);
}
[data-theme=light] .pico details summary.contrast[role=button]::after,
:root:not([data-theme=dark]) .pico details summary.contrast[role=button]::after,
:host(:not([data-theme=dark])) .pico details summary.contrast[role=button]::after {
filter: brightness(100) invert(0);
}
[data-theme=light] .pico [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before,
:root:not([data-theme=dark]) .pico [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before,
:host(:not([data-theme=dark])) .pico [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before {
filter: brightness(100) invert(0);
RTL Dropdown Nav corrected thanks to @64bitint Added popovers to possibly replace the notifications. Started adding popover toasts
2024-12-13 19:43:12 -05:00
}
fix: build theme script
2024-01-28 20:28:27 +07:00
[data-theme=light] input:is([type=submit],
[type=button],
[type=reset],
[type=checkbox],
[type=radio],
[type=file]),
:root:not([data-theme=dark]) input:is([type=submit],
[type=button],
[type=reset],
[type=checkbox],
[type=radio],
rebuilt css files, For some reason was having issues with the line endings, hopefully the editorconfig will fix it.
2024-12-03 14:27:56 -05:00
[type=file]),
:host(:not([data-theme=dark])) input:is([type=submit],
[type=button],
[type=reset],
[type=checkbox],
[type=radio],
fix: build theme script
2024-01-28 20:28:27 +07:00
[type=file]) {
--pico-form-element-focus-color: var(--pico-primary-focus);
}
@media only screen and (prefers-color-scheme: dark) {
rebuilt css files, For some reason was having issues with the line endings, hopefully the editorconfig will fix it.
2024-12-03 14:27:56 -05:00
:root:not([data-theme]),
:host(:not([data-theme])) {
chore: build
2024-08-18 13:13:30 -04:00
color-scheme: dark;
surpressimg sass warnings
2024-11-10 11:27:44 -05:00
--pico-background-color: rgb(19, 22.5, 30.5);
fix: build theme script
2024-01-28 20:28:27 +07:00
--pico-color: #c2c7d0;
--pico-text-selection-color: rgba(137, 153, 249, 0.1875);
--pico-muted-color: #7b8495;
--pico-muted-border-color: #202632;
--pico-primary: #8999f9;
--pico-primary-background: #2060df;
--pico-primary-border: var(--pico-primary-background);
--pico-primary-underline: rgba(137, 153, 249, 0.5);
--pico-primary-hover: #aeb5fb;
--pico-primary-hover-background: #3c71f7;
--pico-primary-hover-border: var(--pico-primary-hover-background);
--pico-primary-hover-underline: var(--pico-primary-hover);
--pico-primary-focus: rgba(137, 153, 249, 0.375);
--pico-primary-inverse: #fff;
--pico-secondary: #969eaf;
--pico-secondary-background: #525f7a;
--pico-secondary-border: var(--pico-secondary-background);
--pico-secondary-underline: rgba(150, 158, 175, 0.5);
--pico-secondary-hover: #b3b9c5;
--pico-secondary-hover-background: #5d6b89;
--pico-secondary-hover-border: var(--pico-secondary-hover-background);
--pico-secondary-hover-underline: var(--pico-secondary-hover);
--pico-secondary-focus: rgba(144, 158, 190, 0.25);
--pico-secondary-inverse: #fff;
--pico-contrast: #dfe3eb;
--pico-contrast-background: #eff1f4;
--pico-contrast-border: var(--pico-contrast-background);
--pico-contrast-underline: rgba(223, 227, 235, 0.5);
--pico-contrast-hover: #fff;
--pico-contrast-hover-background: #fff;
--pico-contrast-hover-border: var(--pico-contrast-hover-background);
--pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000;
surpressimg sass warnings
2024-11-10 11:27:44 -05:00
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
Version 2.2.1
2024-12-21 05:48:33 -05:00
--pico-accent-bg-color: #181c25;
--pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
--pico-accent-border-color: var(--pico-muted-border-color);
--pico-accent-box-shadow: var(--pico-box-shadow);
fix: build theme script
2024-01-28 20:28:27 +07:00
--pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0;
--pico-h4-color: #b3b9c5;
--pico-h5-color: #a4acba;
--pico-h6-color: #8891a4;
--pico-mark-background-color: #014063;
--pico-mark-color: #fff;
--pico-ins-color: #62af9a;
surpressimg sass warnings
2024-11-10 11:27:44 -05:00
--pico-del-color: rgb(205.5, 126, 123);
fix: build theme script
2024-01-28 20:28:27 +07:00
--pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
surpressimg sass warnings
2024-11-10 11:27:44 -05:00
--pico-code-background-color: rgb(26, 30.5, 40.25);
fix: build theme script
2024-01-28 20:28:27 +07:00
--pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color);
surpressimg sass warnings
2024-11-10 11:27:44 -05:00
--pico-form-element-background-color: rgb(28, 33, 43.5);
fix: build theme script
2024-01-28 20:28:27 +07:00
--pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4;
surpressimg sass warnings
2024-11-10 11:27:44 -05:00
--pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
fix: build theme script
2024-01-28 20:28:27 +07:00
--pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5;
surpressimg sass warnings
2024-11-10 11:27:44 -05:00
--pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
fix: build theme script
2024-01-28 20:28:27 +07:00
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f;
surpressimg sass warnings
2024-11-10 11:27:44 -05:00
--pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
fix: build theme script
2024-01-28 20:28:27 +07:00
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background);
--pico-switch-color: #fff;
--pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-range-border-color: #202632;
--pico-range-active-border-color: #2a3140;
--pico-range-thumb-border-color: var(--pico-background-color);
--pico-range-thumb-color: var(--pico-secondary-background);
--pico-range-thumb-active-color: var(--pico-primary-background);
--pico-accordion-border-color: var(--pico-muted-border-color);
--pico-accordion-active-summary-color: var(--pico-primary-hover);
--pico-accordion-close-summary-color: var(--pico-color);
--pico-accordion-open-summary-color: var(--pico-muted-color);
--pico-card-background-color: #181c25;
Added a Timeline feature, removed the margin-bottom from `article > header > h[1-6]` And added the border-color for dark theme on the article > header
2024-11-12 04:59:34 -05:00
--pico-card-border-color: var(--pico-muted-border-color);
fix: build theme script
2024-01-28 20:28:27 +07:00
--pico-card-box-shadow: var(--pico-box-shadow);
surpressimg sass warnings
2024-11-10 11:27:44 -05:00
--pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
fix: build theme script
2024-01-28 20:28:27 +07:00
--pico-dropdown-background-color: #181c25;
--pico-dropdown-border-color: #202632;
--pico-dropdown-box-shadow: var(--pico-box-shadow);
--pico-dropdown-color: var(--pico-color);
--pico-dropdown-hover-background-color: #202632;
--pico-loading-spinner-opacity: 0.5;
surpressimg sass warnings
2024-11-10 11:27:44 -05:00
--pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
fix: build theme script
2024-01-28 20:28:27 +07:00
--pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background);
Changed spacing on form elements to be a tad smaller. It was just too big for my liking, and I feel this way is a lot easier. Added cursor back on button - it was just an arrow. Added parent-selector to the notifications, and corrected readbility of notifications. updated the version within the css files made rows only show up on css files where classes are enabled made the tooltips have a dark background - even for dark themes.
2024-12-07 19:56:51 -05:00
--pico-tooltip-background-color: var(--pico-contrast-inverse);
--pico-tooltip-color: var(--pico-contrast-background);
fix: build theme script
2024-01-28 20:28:27 +07:00
--pico-icon-valid: 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='rgb(42, 123, 111)' 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");
surpressimg sass warnings
2024-11-10 11:27:44 -05:00
--pico-icon-invalid: 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='rgb(149.5, 74, 80)' 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");
Added a Timeline feature, removed the margin-bottom from `article > header > h[1-6]` And added the border-color for dark theme on the article > header
2024-11-12 04:59:34 -05:00
--pico-timeline-line-color: var(--pico-primary-background);
--pico-timeline-dot-background-color: var(--pico-primary-inverse);
--pico-timeline-dot-border-color: var(--pico-primary-background);
--pico-timeline-arrow-color: var(--pico-card-sectioning-background-color);
}
:root:not([data-theme]) .pico [aria-busy=true]:not(input, select, textarea).contrast:is(button,
[type=submit],
[type=button],
[type=reset],
rebuilt css files, For some reason was having issues with the line endings, hopefully the editorconfig will fix it.
2024-12-03 14:27:56 -05:00
[role=button]):not(.outline)::before,
:host(:not([data-theme])) .pico [aria-busy=true]:not(input, select, textarea).contrast:is(button,
[type=submit],
[type=button],
[type=reset],
Added a Timeline feature, removed the margin-bottom from `article > header > h[1-6]` And added the border-color for dark theme on the article > header
2024-11-12 04:59:34 -05:00
[role=button]):not(.outline)::before {
filter: brightness(0);
fix: build theme script
2024-01-28 20:28:27 +07:00
}
:root:not([data-theme]) input:is([type=submit],
[type=button],
[type=reset],
[type=checkbox],
[type=radio],
rebuilt css files, For some reason was having issues with the line endings, hopefully the editorconfig will fix it.
2024-12-03 14:27:56 -05:00
[type=file]),
:host(:not([data-theme])) input:is([type=submit],
[type=button],
[type=reset],
[type=checkbox],
[type=radio],
fix: build theme script
2024-01-28 20:28:27 +07:00
[type=file]) {
--pico-form-element-focus-color: var(--pico-primary-focus);
}
corrected dropdown arrow colors for secondary, contrast, and primary. Also enabled the turning of the arrow when the dropdowns are open or closed
2024-12-14 21:13:13 -05:00
:root:not([data-theme]) .pico details summary[role=button]:not(.outline, .contrast, .secondary)::after,
:host(:not([data-theme])) .pico details summary[role=button]:not(.outline, .contrast, .secondary)::after {
filter: brightness(100) invert(0);
}
:root:not([data-theme]) .pico details summary.secondary[role=button]::after,
:host(:not([data-theme])) .pico details summary.secondary[role=button]::after {
filter: brightness(100) invert(0);
}
:root:not([data-theme]) .pico details summary.contrast[role=button]::after,
:host(:not([data-theme])) .pico details summary.contrast[role=button]::after {
filter: brightness(100) invert(1);
}
:root:not([data-theme]) .pico [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before,
:host(:not([data-theme])) .pico [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before {
filter: brightness(100) invert(1);
fix: build theme script
2024-01-28 20:28:27 +07:00
}
}
[data-theme=dark] {
chore: build
2024-08-18 13:13:30 -04:00
color-scheme: dark;
surpressimg sass warnings
2024-11-10 11:27:44 -05:00
--pico-background-color: rgb(19, 22.5, 30.5);
fix: build theme script
2024-01-28 20:28:27 +07:00
--pico-color: #c2c7d0;
--pico-text-selection-color: rgba(137, 153, 249, 0.1875);
--pico-muted-color: #7b8495;
--pico-muted-border-color: #202632;
--pico-primary: #8999f9;
--pico-primary-background: #2060df;
--pico-primary-border: var(--pico-primary-background);
--pico-primary-underline: rgba(137, 153, 249, 0.5);
--pico-primary-hover: #aeb5fb;
--pico-primary-hover-background: #3c71f7;
--pico-primary-hover-border: var(--pico-primary-hover-background);
--pico-primary-hover-underline: var(--pico-primary-hover);
--pico-primary-focus: rgba(137, 153, 249, 0.375);
--pico-primary-inverse: #fff;
--pico-secondary: #969eaf;
--pico-secondary-background: #525f7a;
--pico-secondary-border: var(--pico-secondary-background);
--pico-secondary-underline: rgba(150, 158, 175, 0.5);
--pico-secondary-hover: #b3b9c5;
--pico-secondary-hover-background: #5d6b89;
--pico-secondary-hover-border: var(--pico-secondary-hover-background);
--pico-secondary-hover-underline: var(--pico-secondary-hover);
--pico-secondary-focus: rgba(144, 158, 190, 0.25);
--pico-secondary-inverse: #fff;
--pico-contrast: #dfe3eb;
--pico-contrast-background: #eff1f4;
--pico-contrast-border: var(--pico-contrast-background);
--pico-contrast-underline: rgba(223, 227, 235, 0.5);
--pico-contrast-hover: #fff;
--pico-contrast-hover-background: #fff;
--pico-contrast-hover-border: var(--pico-contrast-hover-background);
--pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000;
surpressimg sass warnings
2024-11-10 11:27:44 -05:00
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
Version 2.2.1
2024-12-21 05:48:33 -05:00
--pico-accent-bg-color: #181c25;
--pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
--pico-accent-border-color: var(--pico-muted-border-color);
--pico-accent-box-shadow: var(--pico-box-shadow);
fix: build theme script
2024-01-28 20:28:27 +07:00
--pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0;
--pico-h4-color: #b3b9c5;
--pico-h5-color: #a4acba;
--pico-h6-color: #8891a4;
--pico-mark-background-color: #014063;
--pico-mark-color: #fff;
--pico-ins-color: #62af9a;
surpressimg sass warnings
2024-11-10 11:27:44 -05:00
--pico-del-color: rgb(205.5, 126, 123);
fix: build theme script
2024-01-28 20:28:27 +07:00
--pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
surpressimg sass warnings
2024-11-10 11:27:44 -05:00
--pico-code-background-color: rgb(26, 30.5, 40.25);
fix: build theme script
2024-01-28 20:28:27 +07:00
--pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color);
surpressimg sass warnings
2024-11-10 11:27:44 -05:00
--pico-form-element-background-color: rgb(28, 33, 43.5);
fix: build theme script
2024-01-28 20:28:27 +07:00
--pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4;
surpressimg sass warnings
2024-11-10 11:27:44 -05:00
--pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
fix: build theme script
2024-01-28 20:28:27 +07:00
--pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5;
surpressimg sass warnings
2024-11-10 11:27:44 -05:00
--pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
fix: build theme script
2024-01-28 20:28:27 +07:00
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f;
surpressimg sass warnings
2024-11-10 11:27:44 -05:00
--pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
fix: build theme script
2024-01-28 20:28:27 +07:00
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background);
--pico-switch-color: #fff;
--pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-range-border-color: #202632;
--pico-range-active-border-color: #2a3140;
--pico-range-thumb-border-color: var(--pico-background-color);
--pico-range-thumb-color: var(--pico-secondary-background);
--pico-range-thumb-active-color: var(--pico-primary-background);
--pico-accordion-border-color: var(--pico-muted-border-color);
--pico-accordion-active-summary-color: var(--pico-primary-hover);
--pico-accordion-close-summary-color: var(--pico-color);
--pico-accordion-open-summary-color: var(--pico-muted-color);
--pico-card-background-color: #181c25;
Added a Timeline feature, removed the margin-bottom from `article > header > h[1-6]` And added the border-color for dark theme on the article > header
2024-11-12 04:59:34 -05:00
--pico-card-border-color: var(--pico-muted-border-color);
fix: build theme script
2024-01-28 20:28:27 +07:00
--pico-card-box-shadow: var(--pico-box-shadow);
surpressimg sass warnings
2024-11-10 11:27:44 -05:00
--pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
fix: build theme script
2024-01-28 20:28:27 +07:00
--pico-dropdown-background-color: #181c25;
--pico-dropdown-border-color: #202632;
--pico-dropdown-box-shadow: var(--pico-box-shadow);
--pico-dropdown-color: var(--pico-color);
--pico-dropdown-hover-background-color: #202632;
--pico-loading-spinner-opacity: 0.5;
surpressimg sass warnings
2024-11-10 11:27:44 -05:00
--pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
fix: build theme script
2024-01-28 20:28:27 +07:00
--pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background);
Changed spacing on form elements to be a tad smaller. It was just too big for my liking, and I feel this way is a lot easier. Added cursor back on button - it was just an arrow. Added parent-selector to the notifications, and corrected readbility of notifications. updated the version within the css files made rows only show up on css files where classes are enabled made the tooltips have a dark background - even for dark themes.
2024-12-07 19:56:51 -05:00
--pico-tooltip-background-color: var(--pico-contrast-inverse);
--pico-tooltip-color: var(--pico-contrast-background);
fix: build theme script
2024-01-28 20:28:27 +07:00
--pico-icon-valid: 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='rgb(42, 123, 111)' 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");
surpressimg sass warnings
2024-11-10 11:27:44 -05:00
--pico-icon-invalid: 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='rgb(149.5, 74, 80)' 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");
Added a Timeline feature, removed the margin-bottom from `article > header > h[1-6]` And added the border-color for dark theme on the article > header
2024-11-12 04:59:34 -05:00
--pico-timeline-line-color: var(--pico-primary-background);
--pico-timeline-dot-background-color: var(--pico-primary-inverse);
--pico-timeline-dot-border-color: var(--pico-primary-background);
--pico-timeline-arrow-color: var(--pico-card-sectioning-background-color);
}
[data-theme=dark] .pico [aria-busy=true]:not(input, select, textarea).contrast:is(button,
[type=submit],
[type=button],
[type=reset],
[role=button]):not(.outline)::before {
filter: brightness(0);
fix: build theme script
2024-01-28 20:28:27 +07:00
}
[data-theme=dark] input:is([type=submit],
[type=button],
[type=reset],
[type=checkbox],
[type=radio],
[type=file]) {
--pico-form-element-focus-color: var(--pico-primary-focus);
}
corrected dropdown arrow colors for secondary, contrast, and primary. Also enabled the turning of the arrow when the dropdowns are open or closed
2024-12-14 21:13:13 -05:00
[data-theme=dark] .pico details summary[role=button]:not(.outline, .contrast, .secondary)::after {
filter: brightness(100) invert(0);
}
[data-theme=dark] .pico details summary.secondary[role=button]::after {
filter: brightness(100) invert(0);
}
[data-theme=dark] .pico details summary.contrast[role=button]::after {
filter: brightness(100) invert(1);
}
[data-theme=dark] .pico [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before {
filter: brightness(100) invert(1);
fix: build theme script
2024-01-28 20:28:27 +07:00
}
.pico progress,
.pico [type=checkbox],
.pico [type=radio],
.pico [type=range] {
accent-color: var(--pico-primary);
}
/**
* Document
* Content-box & Responsive typography
*/
*,
*::before,
*::after {
box-sizing: border-box;
background-repeat: no-repeat;
}
::before,
::after {
text-decoration: inherit;
vertical-align: inherit;
}
rebuilt css files, For some reason was having issues with the line endings, hopefully the editorconfig will fix it.
2024-12-03 14:27:56 -05:00
:where(:root),
:where(:host) {
fix: build theme script
2024-01-28 20:28:27 +07:00
-webkit-tap-highlight-color: transparent;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
text-size-adjust: 100%;
background-color: var(--pico-background-color);
color: var(--pico-color);
font-weight: var(--pico-font-weight);
font-size: var(--pico-font-size);
line-height: var(--pico-line-height);
font-family: var(--pico-font-family);
text-underline-offset: var(--pico-text-underline-offset);
text-rendering: optimizeLegibility;
overflow-wrap: break-word;
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
-moz-tab-size: 2;
-o-tab-size: 2;
tab-size: 2;
fix: build theme script
2024-01-28 20:28:27 +07:00
}
/**
* Landmarks
*/
Added a Timeline feature, removed the margin-bottom from `article > header > h[1-6]` And added the border-color for dark theme on the article > header
2024-11-12 04:59:34 -05:00
html {
scroll-behavior: smooth;
}
fix: build theme script
2024-01-28 20:28:27 +07:00
body {
width: 100%;
margin: 0;
}
main {
display: block;
}
.pico body > header,
.pico body > main,
.pico body > footer {
padding-block: var(--pico-block-spacing-vertical);
}
refactor: files structure
2024-01-29 23:31:37 +07:00
/**
* Section
*/
.pico section {
margin-bottom: var(--pico-block-spacing-vertical);
}
fix: build theme script
2024-01-28 20:28:27 +07:00
/**
* Container
*/
- 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
.pico .container,
.pico .container-fluid {
fix: build theme script
2024-01-28 20:28:27 +07:00
width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: var(--pico-spacing);
padding-left: var(--pico-spacing);
}
@media (min-width: 576px) {
- 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
.pico .container {
fix: build theme script
2024-01-28 20:28:27 +07:00
max-width: 510px;
padding-right: 0;
padding-left: 0;
}
}
@media (min-width: 768px) {
- 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
.pico .container {
fix: build theme script
2024-01-28 20:28:27 +07:00
max-width: 700px;
}
}
@media (min-width: 1024px) {
- 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
.pico .container {
fix: build theme script
2024-01-28 20:28:27 +07:00
max-width: 950px;
}
}
@media (min-width: 1280px) {
- 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
.pico .container {
fix: build theme script
2024-01-28 20:28:27 +07:00
max-width: 1200px;
}
}
@media (min-width: 1536px) {
- 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
.pico .container {
fix: build theme script
2024-01-28 20:28:27 +07:00
max-width: 1450px;
}
}
/**
* Grid
* Minimal grid system with auto-layout columns
*/
- 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
.pico .grid {
fix: build theme script
2024-01-28 20:28:27 +07:00
grid-column-gap: var(--pico-grid-column-gap);
grid-row-gap: var(--pico-grid-row-gap);
display: grid;
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
- 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
.pico .grid {
fix: build theme script
2024-01-28 20:28:27 +07:00
grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
}
}
- 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
.pico .grid > * {
fix: build theme script
2024-01-28 20:28:27 +07:00
min-width: 0;
}
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
/* Source inspired by https://github.com/sophie-thomas/CSS-Grid/blob/main/assets/scss/grid.scss */
/*--- CSS Grid ---*/
- 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
.pico .row-fluid,
.pico .row {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: var(--pico-grid-row-gap) var(--pico-grid-column-gap);
}
- 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
.pico .row-fluid.align-center,
.pico .row.align-center {
Added <label> compatibility to groups
2024-11-11 22:10:47 -05:00
align-items: center;
}
- 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
.pico .row-fluid.align-start,
.pico .row.align-start {
Added <label> compatibility to groups
2024-11-11 22:10:47 -05:00
align-items: start;
}
- 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
.pico .row-fluid.align-end,
.pico .row.align-end {
Added <label> compatibility to groups
2024-11-11 22:10:47 -05:00
align-items: end;
}
- 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
.pico .row-fluid > [class*=col] > *,
.pico .row-fluid > [class|=col] > *,
.pico .row-fluid > [class~=col] > *,
.pico .row > [class*=col] > *,
.pico .row > [class|=col] > *,
.pico .row > [class~=col] > * {
margin: var(--pico-block-spacing-vertical) auto;
Added <label> compatibility to groups
2024-11-11 22:10:47 -05:00
}
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
- 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
.pico .row {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
max-width: 1200px;
margin: 0 auto;
}
/* Defining columns spans and offsets */
- 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
.pico .col-1 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 1;
}
- 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
.pico .col-2 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 2;
}
- 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
.pico .col-3 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 3;
}
- 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
.pico .col-4 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 4;
}
- 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
.pico .col-5 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 5;
}
- 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
.pico .col-6 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 6;
}
- 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
.pico .col-7 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 7;
}
- 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
.pico .col-8 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 8;
}
- 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
.pico .col-9 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 9;
}
- 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
.pico .col-10 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 10;
}
- 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
.pico .col-11 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 11;
}
- 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
.pico .col-12 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 12;
}
- 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
.pico .offset-0 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 1;
}
- 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
.pico .offset-1 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 2;
}
- 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
.pico .offset-2 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 3;
}
- 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
.pico .offset-3 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 4;
}
- 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
.pico .offset-4 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 5;
}
- 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
.pico .offset-5 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 6;
}
- 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
.pico .offset-6 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 7;
}
- 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
.pico .offset-7 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 8;
}
- 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
.pico .offset-8 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 9;
}
- 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
.pico .offset-9 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 10;
}
- 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
.pico .offset-10 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 11;
}
- 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
.pico .offset-11 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 12;
}
Added <label> compatibility to groups
2024-11-11 22:10:47 -05:00
@media (min-width: 510px) {
- 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
.pico .col-sm-1 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 1;
}
- 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
.pico .col-sm-2 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 2;
}
- 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
.pico .col-sm-3 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 3;
}
- 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
.pico .col-sm-4 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 4;
}
- 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
.pico .col-sm-5 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 5;
}
- 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
.pico .col-sm-6 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 6;
}
- 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
.pico .col-sm-7 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 7;
}
- 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
.pico .col-sm-8 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 8;
}
- 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
.pico .col-sm-9 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 9;
}
- 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
.pico .col-sm-10 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 10;
}
- 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
.pico .col-sm-11 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 11;
}
- 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
.pico .col-sm-12 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 12;
}
- 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
.pico .offset-sm-0 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 1;
}
- 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
.pico .offset-sm-1 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 2;
}
- 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
.pico .offset-sm-2 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 3;
}
- 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
.pico .offset-sm-3 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 4;
}
- 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
.pico .offset-sm-4 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 5;
}
- 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
.pico .offset-sm-5 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 6;
}
- 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
.pico .offset-sm-6 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 7;
}
- 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
.pico .offset-sm-7 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 8;
}
- 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
.pico .offset-sm-8 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 9;
}
- 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
.pico .offset-sm-9 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 10;
}
- 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
.pico .offset-sm-10 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 11;
}
- 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
.pico .offset-sm-11 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 12;
}
}
Added <label> compatibility to groups
2024-11-11 22:10:47 -05:00
@media (min-width: 700px) {
- 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
.pico .col-md-1 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 1;
}
- 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
.pico .col-md-2 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 2;
}
- 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
.pico .col-md-3 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 3;
}
- 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
.pico .col-md-4 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 4;
}
- 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
.pico .col-md-5 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 5;
}
- 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
.pico .col-md-6 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 6;
}
- 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
.pico .col-md-7 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 7;
}
- 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
.pico .col-md-8 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 8;
}
- 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
.pico .col-md-9 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 9;
}
- 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
.pico .col-md-10 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 10;
}
- 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
.pico .col-md-11 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 11;
}
- 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
.pico .col-md-12 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 12;
}
- 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
.pico .offset-md-0 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 1;
}
- 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
.pico .offset-md-1 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 2;
}
- 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
.pico .offset-md-2 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 3;
}
- 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
.pico .offset-md-3 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 4;
}
- 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
.pico .offset-md-4 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 5;
}
- 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
.pico .offset-md-5 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 6;
}
- 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
.pico .offset-md-6 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 7;
}
- 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
.pico .offset-md-7 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 8;
}
- 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
.pico .offset-md-8 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 9;
}
- 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
.pico .offset-md-9 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 10;
}
- 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
.pico .offset-md-10 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 11;
}
- 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
.pico .offset-md-11 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 12;
}
}
Added <label> compatibility to groups
2024-11-11 22:10:47 -05:00
@media (min-width: 950px) {
- 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
.pico .col-lg-1 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 1;
}
- 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
.pico .col-lg-2 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 2;
}
- 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
.pico .col-lg-3 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 3;
}
- 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
.pico .col-lg-4 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 4;
}
- 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
.pico .col-lg-5 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 5;
}
- 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
.pico .col-lg-6 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 6;
}
- 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
.pico .col-lg-7 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 7;
}
- 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
.pico .col-lg-8 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 8;
}
- 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
.pico .col-lg-9 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 9;
}
- 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
.pico .col-lg-10 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 10;
}
- 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
.pico .col-lg-11 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 11;
}
- 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
.pico .col-lg-12 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 12;
}
- 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
.pico .offset-lg-0 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 1;
}
- 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
.pico .offset-lg-1 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 2;
}
- 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
.pico .offset-lg-2 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 3;
}
- 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
.pico .offset-lg-3 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 4;
}
- 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
.pico .offset-lg-4 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 5;
}
- 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
.pico .offset-lg-5 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 6;
}
- 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
.pico .offset-lg-6 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 7;
}
- 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
.pico .offset-lg-7 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 8;
}
- 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
.pico .offset-lg-8 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 9;
}
- 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
.pico .offset-lg-9 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 10;
}
- 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
.pico .offset-lg-10 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 11;
}
- 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
.pico .offset-lg-11 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 12;
}
}
Added <label> compatibility to groups
2024-11-11 22:10:47 -05:00
@media (min-width: 1200px) {
- 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
.pico .col-xl-1 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 1;
}
- 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
.pico .col-xl-2 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 2;
}
- 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
.pico .col-xl-3 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 3;
}
- 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
.pico .col-xl-4 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 4;
}
- 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
.pico .col-xl-5 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 5;
}
- 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
.pico .col-xl-6 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 6;
}
- 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
.pico .col-xl-7 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 7;
}
- 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
.pico .col-xl-8 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 8;
}
- 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
.pico .col-xl-9 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 9;
}
- 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
.pico .col-xl-10 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 10;
}
- 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
.pico .col-xl-11 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 11;
}
- 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
.pico .col-xl-12 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 12;
}
- 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
.pico .offset-xl-0 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 1;
}
- 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
.pico .offset-xl-1 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 2;
}
- 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
.pico .offset-xl-2 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 3;
}
- 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
.pico .offset-xl-3 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 4;
}
- 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
.pico .offset-xl-4 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 5;
}
- 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
.pico .offset-xl-5 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 6;
}
- 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
.pico .offset-xl-6 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 7;
}
- 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
.pico .offset-xl-7 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 8;
}
- 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
.pico .offset-xl-8 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 9;
}
- 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
.pico .offset-xl-9 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 10;
}
- 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
.pico .offset-xl-10 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 11;
}
- 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
.pico .offset-xl-11 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 12;
}
}
Added <label> compatibility to groups
2024-11-11 22:10:47 -05:00
@media (min-width: 1450px) {
- 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
.pico .col-xxl-1 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 1;
}
- 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
.pico .col-xxl-2 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 2;
}
- 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
.pico .col-xxl-3 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 3;
}
- 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
.pico .col-xxl-4 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 4;
}
- 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
.pico .col-xxl-5 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 5;
}
- 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
.pico .col-xxl-6 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 6;
}
- 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
.pico .col-xxl-7 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 7;
}
- 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
.pico .col-xxl-8 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 8;
}
- 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
.pico .col-xxl-9 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 9;
}
- 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
.pico .col-xxl-10 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 10;
}
- 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
.pico .col-xxl-11 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 11;
}
- 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
.pico .col-xxl-12 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 12;
}
- 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
.pico .offset-xxl-0 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 1;
}
- 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
.pico .offset-xxl-1 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 2;
}
- 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
.pico .offset-xxl-2 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 3;
}
- 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
.pico .offset-xxl-3 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 4;
}
- 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
.pico .offset-xxl-4 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 5;
}
- 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
.pico .offset-xxl-5 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 6;
}
- 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
.pico .offset-xxl-6 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 7;
}
- 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
.pico .offset-xxl-7 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 8;
}
- 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
.pico .offset-xxl-8 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 9;
}
- 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
.pico .offset-xxl-9 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 10;
}
- 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
.pico .offset-xxl-10 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 11;
}
- 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
.pico .offset-xxl-11 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-start: 12;
}
}
/* CSS Grid Media Queries */
@media (max-width: 510px) {
- 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
.col-1, .pico .col-2, .pico .col-3, .pico .col-4, .pico .col-5, .pico .col-6, .pico .col-7, .pico .col-8, .pico .col-9, .pico .col-10, .pico .col-11, .pico .col-12, .pico .col-md-1, .pico .col-md-2, .pico .col-md-3, .pico .col-md-4, .pico .col-md-5, .pico .col-md-6, .pico .col-md-7, .pico .col-md-8, .pico .col-md-9, .pico .col-md-10, .pico .col-md-11, .pico .col-md-12, .pico .col-lg-1, .pico .col-lg-2, .pico .col-lg-3, .pico .col-lg-4, .pico .col-lg-5, .pico .col-lg-6, .pico .col-lg-7, .pico .col-lg-8, .pico .col-lg-9, .pico .col-lg-10, .pico .col-lg-11, .pico .col-lg-12, .pico .col-xl-1, .pico .col-xl-2, .pico .col-xl-3, .pico .col-xl-4, .pico .col-xl-5, .pico .col-xl-6, .pico .col-xl-7, .pico .col-xl-8, .pico .col-xl-9, .pico .col-xl-10, .pico .col-xl-11, .pico .col-xl-12, .pico .col-xxl-1, .pico .col-xxl-2, .pico .col-xxl-3, .pico .col-xxl-4, .pico .col-xxl-5, .pico .col-xxl-6, .pico .col-xxl-7, .pico .col-xxl-8, .pico .col-xxl-9, .pico .col-xxl-10, .pico .col-xxl-11, .pico .col-xxl-12 {
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
2024-11-10 16:43:55 -05:00
grid-column-end: span 12;
}
.offset-0, .offset-1, .offset-2, .offset-3, .offset-4, .offset-5, .offset-6, .offset-7, .offset-8, .offset-9, .offset-10, .offset-11, .offset-md-0, .offset-md-1, .offset-md-2, .offset-md-3, .offset-md-4, .offset-md-5, .offset-md-6, .offset-md-7, .offset-md-8, .offset-md-9, .offset-md-10, .offset-md-11, .offset-lg-0, .offset-lg-1, .offset-lg-2, .offset-lg-3, .offset-lg-4, .offset-lg-5, .offset-lg-6, .offset-lg-7, .offset-lg-8, .offset-lg-9, .offset-lg-10, .offset-lg-11, .offset-xl-0, .offset-xl-1, .offset-xl-2, .offset-xl-3, .offset-xl-4, .offset-xl-5, .offset-xl-6, .offset-xl-7, .offset-xl-8, .offset-xl-9, .offset-xl-10, .offset-xl-11, .offset-xxl-0, .offset-xxl-1, .offset-xxl-2, .offset-xxl-3, .offset-xxl-4, .offset-xxl-5, .offset-xxl-6, .offset-xxl-7, .offset-xxl-8, .offset-xxl-9, .offset-xxl-10, .offset-xxl-11 {
grid-column-start: 1;
}
}
fix: build theme script
2024-01-28 20:28:27 +07:00
/**
* Overflow auto
*/
.pico .overflow-auto {
overflow: auto;
}
/**
* Typography
*/
.pico b,
.pico strong {
font-weight: bolder;
}
.pico sub,
.pico sup {
position: relative;
font-size: 0.75em;
line-height: 0;
vertical-align: baseline;
}
.pico sub {
bottom: -0.25em;
}
.pico sup {
top: -0.5em;
}
.pico address,
.pico blockquote,
.pico dl,
.pico ol,
.pico p,
.pico pre,
.pico table,
.pico ul {
margin-top: 0;
margin-bottom: var(--pico-typography-spacing-vertical);
color: var(--pico-color);
font-style: normal;
font-weight: var(--pico-font-weight);
}
.pico h1,
.pico h2,
.pico h3,
.pico h4,
.pico h5,
.pico h6 {
margin-top: 0;
margin-bottom: var(--pico-typography-spacing-vertical);
color: var(--pico-color);
font-weight: var(--pico-font-weight);
font-size: var(--pico-font-size);
line-height: var(--pico-line-height);
font-family: var(--pico-font-family);
}
.pico h1 {
--pico-color: var(--pico-h1-color);
}
.pico h2 {
--pico-color: var(--pico-h2-color);
}
.pico h3 {
--pico-color: var(--pico-h3-color);
}
.pico h4 {
--pico-color: var(--pico-h4-color);
}
.pico h5 {
--pico-color: var(--pico-h5-color);
}
.pico h6 {
--pico-color: var(--pico-h6-color);
}
.pico :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
margin-top: var(--pico-typography-spacing-top);
}
.pico p {
margin-bottom: var(--pico-typography-spacing-vertical);
}
.pico hgroup {
margin-bottom: var(--pico-typography-spacing-vertical);
}
.pico hgroup > * {
margin-top: 0;
margin-bottom: 0;
}
.pico hgroup > *:not(:first-child):last-child {
--pico-color: var(--pico-muted-color);
--pico-font-weight: unset;
font-size: 1rem;
}
.pico :where(ol, ul) li {
margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.25);
}
.pico :where(dl, ol, ul) :where(dl, ol, ul) {
margin: 0;
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.25);
}
.pico ul li {
list-style: square;
}
.pico mark {
padding: 0.125rem 0.25rem;
background-color: var(--pico-mark-background-color);
color: var(--pico-mark-color);
vertical-align: baseline;
}
.pico blockquote {
display: block;
margin: var(--pico-typography-spacing-vertical) 0;
padding: var(--pico-spacing);
border-right: none;
border-left: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
border-inline-end: none;
}
.pico blockquote footer {
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.5);
color: var(--pico-blockquote-footer-color);
}
.pico abbr[title] {
border-bottom: 1px dotted;
text-decoration: none;
cursor: help;
}
.pico ins {
color: var(--pico-ins-color);
text-decoration: none;
}
.pico del {
color: var(--pico-del-color);
}
.pico ::-moz-selection {
background-color: var(--pico-text-selection-color);
}
.pico ::selection {
background-color: var(--pico-text-selection-color);
}
/**
refactor: files structure
2024-01-29 23:31:37 +07:00
* Link
fix: build theme script
2024-01-28 20:28:27 +07:00
*/
refactor: files structure
2024-01-29 23:31:37 +07:00
.pico :where(a:not([role=button])),
.pico [role=link] {
--pico-color: var(--pico-primary);
--pico-background-color: transparent;
--pico-underline: var(--pico-primary-underline);
outline: none;
background-color: var(--pico-background-color);
color: var(--pico-color);
-webkit-text-decoration: var(--pico-text-decoration);
text-decoration: var(--pico-text-decoration);
text-decoration-color: var(--pico-underline);
text-underline-offset: 0.125em;
transition: background-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition), -webkit-text-decoration var(--pico-transition);
transition: background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition);
transition: background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition), -webkit-text-decoration var(--pico-transition);
fix: build theme script
2024-01-28 20:28:27 +07:00
}
refactor: files structure
2024-01-29 23:31:37 +07:00
.pico :where(a:not([role=button])):is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
.pico [role=link]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
--pico-color: var(--pico-primary-hover);
--pico-underline: var(--pico-primary-hover-underline);
--pico-text-decoration: underline;
fix: build theme script
2024-01-28 20:28:27 +07:00
}
refactor: files structure
2024-01-29 23:31:37 +07:00
.pico :where(a:not([role=button])):focus-visible,
.pico [role=link]:focus-visible {
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
fix: build theme script
2024-01-28 20:28:27 +07:00
}
refactor: files structure
2024-01-29 23:31:37 +07:00
.pico :where(a:not([role=button])).secondary,
.pico [role=link].secondary {
--pico-color: var(--pico-secondary);
--pico-underline: var(--pico-secondary-underline);
fix: build theme script
2024-01-28 20:28:27 +07:00
}
refactor: files structure
2024-01-29 23:31:37 +07:00
.pico :where(a:not([role=button])).secondary:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
.pico [role=link].secondary:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
--pico-color: var(--pico-secondary-hover);
--pico-underline: var(--pico-secondary-hover-underline);
fix: build theme script
2024-01-28 20:28:27 +07:00
}
refactor: files structure
2024-01-29 23:31:37 +07:00
.pico :where(a:not([role=button])).contrast,
.pico [role=link].contrast {
--pico-color: var(--pico-contrast);
--pico-underline: var(--pico-contrast-underline);
}
.pico :where(a:not([role=button])).contrast:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
.pico [role=link].contrast:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
--pico-color: var(--pico-contrast-hover);
--pico-underline: var(--pico-contrast-hover-underline);
fix: build theme script
2024-01-28 20:28:27 +07:00
}
refactor: files structure
2024-01-29 23:31:37 +07:00
.pico a[role=button] {
display: inline-block;
fix: build theme script
2024-01-28 20:28:27 +07:00
}
/**
* Button
*/
.pico button {
margin: 0;
overflow: visible;
font-family: inherit;
text-transform: none;
}
.pico button,
.pico [type=submit],
.pico [type=reset],
.pico [type=button] {
-webkit-appearance: button;
}
.pico button,
.pico [type=submit],
.pico [type=reset],
.pico [type=button],
.pico [type=file]::file-selector-button,
.pico [role=button] {
--pico-background-color: var(--pico-primary-background);
--pico-border-color: var(--pico-primary-border);
--pico-color: var(--pico-primary-inverse);
--pico-box-shadow: var(--pico-button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
border: var(--pico-border-width) solid var(--pico-border-color);
border-radius: var(--pico-border-radius);
outline: none;
background-color: var(--pico-background-color);
box-shadow: var(--pico-box-shadow);
color: var(--pico-color);
font-weight: var(--pico-font-weight);
font-size: 1rem;
line-height: var(--pico-line-height);
text-align: center;
text-decoration: none;
Changed spacing on form elements to be a tad smaller. It was just too big for my liking, and I feel this way is a lot easier. Added cursor back on button - it was just an arrow. Added parent-selector to the notifications, and corrected readbility of notifications. updated the version within the css files made rows only show up on css files where classes are enabled made the tooltips have a dark background - even for dark themes.
2024-12-07 19:56:51 -05:00
cursor: pointer;
fix: build theme script
2024-01-28 20:28:27 +07:00
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
}
.pico button:is([aria-current]:not([aria-current=false])), .pico button:is(:hover, :active, :focus),
.pico [type=submit]:is([aria-current]:not([aria-current=false])),
.pico [type=submit]:is(:hover, :active, :focus),
.pico [type=reset]:is([aria-current]:not([aria-current=false])),
.pico [type=reset]:is(:hover, :active, :focus),
.pico [type=button]:is([aria-current]:not([aria-current=false])),
.pico [type=button]:is(:hover, :active, :focus),
.pico [type=file]::file-selector-button:is([aria-current]:not([aria-current=false])),
.pico [type=file]::file-selector-button:is(:hover, :active, :focus),
.pico [role=button]:is([aria-current]:not([aria-current=false])),
.pico [role=button]:is(:hover, :active, :focus) {
--pico-background-color: var(--pico-primary-hover-background);
--pico-border-color: var(--pico-primary-hover-border);
--pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
--pico-color: var(--pico-primary-inverse);
}
.pico button:focus, .pico button:is([aria-current]:not([aria-current=false])):focus,
.pico [type=submit]:focus,
.pico [type=submit]:is([aria-current]:not([aria-current=false])):focus,
.pico [type=reset]:focus,
.pico [type=reset]:is([aria-current]:not([aria-current=false])):focus,
.pico [type=button]:focus,
.pico [type=button]:is([aria-current]:not([aria-current=false])):focus,
.pico [type=file]::file-selector-button:focus,
.pico [type=file]::file-selector-button:is([aria-current]:not([aria-current=false])):focus,
.pico [role=button]:focus,
.pico [role=button]:is([aria-current]:not([aria-current=false])):focus {
--pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
}
.pico [type=submit],
.pico [type=reset],
.pico [type=button] {
margin-bottom: var(--pico-spacing);
}
.pico :is(button, [type=submit], [type=button], [role=button]).secondary,
.pico [type=reset],
.pico [type=file]::file-selector-button {
--pico-background-color: var(--pico-secondary-background);
--pico-border-color: var(--pico-secondary-border);
--pico-color: var(--pico-secondary-inverse);
cursor: pointer;
}
.pico :is(button, [type=submit], [type=button], [role=button]).secondary:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
.pico [type=reset]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
.pico [type=file]::file-selector-button:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
--pico-background-color: var(--pico-secondary-hover-background);
--pico-border-color: var(--pico-secondary-hover-border);
--pico-color: var(--pico-secondary-inverse);
}
.pico :is(button, [type=submit], [type=button], [role=button]).secondary:focus, .pico :is(button, [type=submit], [type=button], [role=button]).secondary:is([aria-current]:not([aria-current=false])):focus,
.pico [type=reset]:focus,
.pico [type=reset]:is([aria-current]:not([aria-current=false])):focus,
.pico [type=file]::file-selector-button:focus,
.pico [type=file]::file-selector-button:is([aria-current]:not([aria-current=false])):focus {
--pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus);
}
.pico :is(button, [type=submit], [type=button], [role=button]).contrast {
--pico-background-color: var(--pico-contrast-background);
--pico-border-color: var(--pico-contrast-border);
--pico-color: var(--pico-contrast-inverse);
}
.pico :is(button, [type=submit], [type=button], [role=button]).contrast:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
--pico-background-color: var(--pico-contrast-hover-background);
--pico-border-color: var(--pico-contrast-hover-border);
--pico-color: var(--pico-contrast-inverse);
}
.pico :is(button, [type=submit], [type=button], [role=button]).contrast:focus, .pico :is(button, [type=submit], [type=button], [role=button]).contrast:is([aria-current]:not([aria-current=false])):focus {
--pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-contrast-focus);
}
.pico :is(button, [type=submit], [type=button], [role=button]).outline,
[type=reset].outline {
--pico-background-color: transparent;
--pico-color: var(--pico-primary);
--pico-border-color: var(--pico-primary);
}
.pico :is(button, [type=submit], [type=button], [role=button]).outline:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
[type=reset].outline:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
--pico-background-color: transparent;
--pico-color: var(--pico-primary-hover);
--pico-border-color: var(--pico-primary-hover);
}
.pico :is(button, [type=submit], [type=button], [role=button]).outline.secondary,
[type=reset].outline {
--pico-color: var(--pico-secondary);
--pico-border-color: var(--pico-secondary);
}
.pico :is(button, [type=submit], [type=button], [role=button]).outline.secondary:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
[type=reset].outline:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
--pico-color: var(--pico-secondary-hover);
--pico-border-color: var(--pico-secondary-hover);
}
.pico :is(button, [type=submit], [type=button], [role=button]).outline.contrast {
--pico-color: var(--pico-contrast);
--pico-border-color: var(--pico-contrast);
}
.pico :is(button, [type=submit], [type=button], [role=button]).outline.contrast:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
--pico-color: var(--pico-contrast-hover);
--pico-border-color: var(--pico-contrast-hover);
}
.pico :where(button, [type=submit], [type=reset], [type=button], [role=button])[disabled],
.pico :where(fieldset[disabled]) :is(button, [type=submit], [type=button], [type=reset], [role=button]) {
opacity: 0.5;
pointer-events: none;
}
enhanced the tooltip to have a width of `max-content` and a max width of 250px. This will allow for the tooltips to not always be 250px wide even when the tooltip is short. Added the ghost buttons from discussion #29
2025-01-13 21:02:05 -05:00
/* Base ghost button style */
.pico :is(button, [type=button], [type=submit], [type=reset], [role=button]).ghost {
--pico-background-color: transparent;
--pico-border-color: transparent;
--pico-color: var(--pico-primary);
}
.pico :is(button, [type=button], [type=submit], [type=reset], [role=button]).ghost:is(:hover, :focus, :active, [aria-current]:not([aria-current=false])) {
--pico-background-color: transparent;
--pico-border-color: transparent;
--pico-color: var(--pico-primary-hover);
}
/* Secondary ghost button */
.pico :is(button, [type=button], [type=submit], [type=reset], [role=button]).ghost.secondary {
--pico-color: var(--pico-secondary);
}
.pico :is(button, [type=button], [type=submit], [type=reset], [role=button]).ghost.secondary:is(:hover, :focus, :active, [aria-current]:not([aria-current=false])) {
--pico-color: var(--pico-secondary-hover);
}
/* Contrast ghost button */
.pico :is(button, [type=button], [type=submit], [type=reset], [role=button]).ghost.contrast {
--pico-color: var(--pico-contrast);
}
.pico :is(button, [type=button], [type=submit], [type=reset], [role=button]).ghost.contrast:is(:hover, :focus, :active, [aria-current]:not([aria-current=false])) {
--pico-color: var(--pico-contrast-hover);
}
fix: build theme script
2024-01-28 20:28:27 +07:00
/**
* Table
*/
.pico :where(table) {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
text-indent: 0;
}
Build CSS
2025-01-17 08:51:24 +00:00
.pico table th,
.pico table td {
fix: build theme script
2024-01-28 20:28:27 +07:00
padding: calc(var(--pico-spacing) / 2) var(--pico-spacing);
border-bottom: var(--pico-border-width) solid var(--pico-table-border-color);
background-color: var(--pico-background-color);
color: var(--pico-color);
font-weight: var(--pico-font-weight);
text-align: left;
text-align: start;
}
Build CSS
2025-01-17 08:51:24 +00:00
.pico table > caption {
margin-block: calc(var(--pico-block-spacing-vertical) * 0.5);
padding: calc(var(--pico-spacing) / 2) var(--pico-spacing);
background-color: var(--pico-table-row-stripped-background-color);
color: var(--pico-h3-color);
font-weight: var(--pico-font-weight);
font-size: 1.25rem;
text-align: center;
}
.pico table > tfoot th,
.pico table > tfoot td {
fix: build theme script
2024-01-28 20:28:27 +07:00
border-top: var(--pico-border-width) solid var(--pico-table-border-color);
border-bottom: 0;
}
Build CSS
2025-01-17 08:51:24 +00:00
.pico table > caption {
margin-block: calc(var(--pico-block-spacing-vertical) * 0.5);
fix: build theme script
2024-01-28 20:28:27 +07:00
background-color: var(--pico-table-row-stripped-background-color);
Build CSS
2025-01-17 08:51:24 +00:00
color: var(--pico-h3-color);
font-weight: var(--pico-font-weight);
font-size: 1.25rem;
text-align: center;
}
.pico table.striped > tbody > tr:nth-child(odd) > th,
.pico table.striped > tbody > tr:nth-child(odd) > td {
background: var(--pico-table-row-stripped-background-color);
}
.pico table.striped > tbody > tr:nth-child(even) > th,
.pico table.striped > tbody > tr:nth-child(even) > td {
background: var(--pico-background-color);
}
.pico table.striped > tbody > tr[hidden] {
display: none;
}
.pico table.striped > tbody > tr[hidden] ~ tr:nth-child(odd) > th,
.pico table.striped > tbody > tr[hidden] ~ tr:nth-child(odd) > td {
background: var(--pico-background-color);
}
.pico table.striped > tbody > tr[hidden] ~ tr:nth-child(even) > th,
.pico table.striped > tbody > tr[hidden] ~ tr:nth-child(even) > td {
background: var(--pico-table-row-stripped-background-color);
}
.pico table.striped > tbody > tr[hidden] ~ tr[hidden] ~ tr:nth-child(odd) > th,
.pico table.striped > tbody > tr[hidden] ~ tr[hidden] ~ tr:nth-child(odd) > td {
background: var(--pico-table-row-stripped-background-color);
}
.pico table.striped > tbody > tr[hidden] ~ tr[hidden] ~ tr:nth-child(even) > th,
.pico table.striped > tbody > tr[hidden] ~ tr[hidden] ~ tr:nth-child(even) > td {
background: var(--pico-background-color);
}
.pico table.striped > tbody > tr[hidden] ~ tr[hidden] ~ tr[hidden] ~ tr:nth-child(odd) > th,
.pico table.striped > tbody > tr[hidden] ~ tr[hidden] ~ tr[hidden] ~ tr:nth-child(odd) > td {
background: var(--pico-background-color);
}
.pico table.striped > tbody > tr[hidden] ~ tr[hidden] ~ tr[hidden] ~ tr:nth-child(even) > th,
.pico table.striped > tbody > tr[hidden] ~ tr[hidden] ~ tr[hidden] ~ tr:nth-child(even) > td {
background: var(--pico-table-row-stripped-background-color);
}
.pico table.striped > tbody > tr[hidden] ~ tr[hidden] ~ tr[hidden] ~ tr[hidden] ~ tr:nth-child(odd) > th,
.pico table.striped > tbody > tr[hidden] ~ tr[hidden] ~ tr[hidden] ~ tr[hidden] ~ tr:nth-child(odd) > td {
background: var(--pico-table-row-stripped-background-color);
}
.pico table.striped > tbody > tr[hidden] ~ tr[hidden] ~ tr[hidden] ~ tr[hidden] ~ tr:nth-child(even) > th,
.pico table.striped > tbody > tr[hidden] ~ tr[hidden] ~ tr[hidden] ~ tr[hidden] ~ tr:nth-child(even) > td {
background: var(--pico-background-color);
fix: build theme script
2024-01-28 20:28:27 +07:00
}
refactor: files structure
2024-01-29 23:31:37 +07:00
/**
* Embedded content
*/
.pico :where(audio, canvas, iframe, img, svg, video) {
vertical-align: middle;
}
.pico audio,
.pico video {
display: inline-block;
}
.pico audio:not([controls]) {
display: none;
height: 0;
}
.pico :where(iframe) {
border-style: none;
}
.pico img {
max-width: 100%;
height: auto;
border-style: none;
}
.pico :where(svg:not([fill])) {
fill: currentColor;
}
rebuilt css files, For some reason was having issues with the line endings, hopefully the editorconfig will fix it.
2024-12-03 14:27:56 -05:00
.pico svg:not(:root),
.pico svg:not(:host) {
refactor: files structure
2024-01-29 23:31:37 +07:00
overflow: hidden;
}
fix: build theme script
2024-01-28 20:28:27 +07:00
/**
* Code
*/
.pico pre,
.pico code,
.pico kbd,
.pico samp {
font-size: 0.875em;
font-family: var(--pico-font-family);
}
.pico pre code {
font-size: inherit;
font-family: inherit;
}
.pico pre {
-ms-overflow-style: scrollbar;
overflow: auto;
}
.pico pre,
.pico code,
.pico kbd {
border-radius: var(--pico-border-radius);
background: var(--pico-code-background-color);
color: var(--pico-code-color);
font-weight: var(--pico-font-weight);
line-height: initial;
}
.pico code,
.pico kbd {
display: inline-block;
Build CSS
2025-01-14 17:25:36 +00:00
padding: 0.125rem 0.375rem;
vertical-align: middle;
fix: build theme script
2024-01-28 20:28:27 +07:00
}
.pico pre {
display: block;
margin-bottom: var(--pico-spacing);
}
.pico pre > code {
display: block;
padding: var(--pico-spacing);
Build CSS
2025-01-14 17:25:36 +00:00
overflow-x: auto;
fix: build theme script
2024-01-28 20:28:27 +07:00
background: none;
line-height: var(--pico-line-height);
}
.pico kbd {
background-color: var(--pico-code-kbd-background-color);
color: var(--pico-code-kbd-color);
vertical-align: baseline;
}
/**
* Figure
*/
.pico figure {
display: block;
margin: 0;
padding: 0;
}
.pico figure figcaption {
padding: calc(var(--pico-spacing) * 0.5) 0;
color: var(--pico-muted-color);
}
/**
Fix several typos throughout the project
2024-09-27 23:45:54 +03:00
* Misc
fix: build theme script
2024-01-28 20:28:27 +07:00
*/
.pico hr {
height: 0;
margin: var(--pico-typography-spacing-vertical) 0;
border: 0;
border-top: 1px solid var(--pico-muted-border-color);
color: inherit;
}
.pico [hidden],
.pico template {
display: none !important;
}
.pico canvas {
display: inline-block;
}
/**
* Basics form elements
*/
.pico input,
.pico optgroup,
.pico select,
Added <label> compatibility to groups
2024-11-11 22:10:47 -05:00
.pico textarea,
Closes Legend element not styled in `role="group"` Yohn/PicoCSS#23 Added compatability with `.dropdown` to the `role=group` Put a dropdown submenu in the group examples Improved borders on `[role=group] > label, [role=group] > legend` to ensure the same size as other group elements
2024-12-31 00:16:26 -05:00
.pico [role=group] > label,
.pico [role=group] > legend {
fix: build theme script
2024-01-28 20:28:27 +07:00
margin: 0;
font-size: 1rem;
line-height: var(--pico-line-height);
font-family: inherit;
letter-spacing: inherit;
}
.pico input {
overflow: visible;
}
.pico select {
text-transform: none;
}
Build CSS
2025-01-11 03:36:02 +00:00
.pico *:not([role=group]) legend {
fix: build theme script
2024-01-28 20:28:27 +07:00
max-width: 100%;
padding: 0;
color: inherit;
white-space: normal;
}
.pico textarea {
overflow: auto;
}
.pico [type=checkbox],
.pico [type=radio] {
padding: 0;
}
.pico ::-webkit-inner-spin-button,
.pico ::-webkit-outer-spin-button {
height: auto;
}
.pico [type=search] {
-webkit-appearance: textfield;
outline-offset: -2px;
}
.pico [type=search]::-webkit-search-decoration {
-webkit-appearance: none;
}
.pico ::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit;
}
.pico ::-moz-focus-inner {
padding: 0;
border-style: none;
}
.pico :-moz-focusring {
outline: none;
}
.pico :-moz-ui-invalid {
box-shadow: none;
}
.pico ::-ms-expand {
display: none;
}
.pico [type=file],
.pico [type=range] {
padding: 0;
border-width: 0;
}
Closes Legend element not styled in `role="group"` Yohn/PicoCSS#23 Added compatability with `.dropdown` to the `role=group` Put a dropdown submenu in the group examples Improved borders on `[role=group] > label, [role=group] > legend` to ensure the same size as other group elements
2024-12-31 00:16:26 -05:00
.pico input:not([type=checkbox], [type=radio], [type=range], [type=date]) {
fix: build theme script
2024-01-28 20:28:27 +07:00
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
}
.pico fieldset {
width: 100%;
margin: 0;
margin-bottom: var(--pico-spacing);
padding: 0;
border: 0;
}
Build CSS
2025-01-11 03:36:02 +00:00
.pico *:not([role=group]) > label,
.pico fieldset:not([role=group]) > legend {
fix: build theme script
2024-01-28 20:28:27 +07:00
display: block;
margin-bottom: calc(var(--pico-spacing) * 0.375);
color: var(--pico-color);
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
}
Build CSS
2025-01-11 03:36:02 +00:00
.pico fieldset:not([role=group]) > legend {
fix: build theme script
2024-01-28 20:28:27 +07:00
margin-bottom: calc(var(--pico-spacing) * 0.5);
}
.pico input:not([type=checkbox], [type=radio]),
.pico button[type=submit],
.pico select,
.pico textarea {
width: 100%;
}
.pico input:not([type=checkbox], [type=radio], [type=range], [type=file]),
.pico select,
Added <label> compatibility to groups
2024-11-11 22:10:47 -05:00
.pico textarea,
Closes Legend element not styled in `role="group"` Yohn/PicoCSS#23 Added compatability with `.dropdown` to the `role=group` Put a dropdown submenu in the group examples Improved borders on `[role=group] > label, [role=group] > legend` to ensure the same size as other group elements
2024-12-31 00:16:26 -05:00
.pico [role=group] > label,
.pico [role=group] > legend {
fix: build theme script
2024-01-28 20:28:27 +07:00
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
}
.pico input,
.pico select,
Added <label> compatibility to groups
2024-11-11 22:10:47 -05:00
.pico textarea,
Closes Legend element not styled in `role="group"` Yohn/PicoCSS#23 Added compatability with `.dropdown` to the `role=group` Put a dropdown submenu in the group examples Improved borders on `[role=group] > label, [role=group] > legend` to ensure the same size as other group elements
2024-12-31 00:16:26 -05:00
.pico [role=group] > label,
.pico [role=group] > legend {
fix: build theme script
2024-01-28 20:28:27 +07:00
--pico-background-color: var(--pico-form-element-background-color);
--pico-border-color: var(--pico-form-element-border-color);
--pico-color: var(--pico-form-element-color);
--pico-box-shadow: none;
border: var(--pico-border-width) solid var(--pico-border-color);
border-radius: var(--pico-border-radius);
outline: none;
background-color: var(--pico-background-color);
box-shadow: var(--pico-box-shadow);
color: var(--pico-color);
font-weight: var(--pico-font-weight);
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
}
.pico input:not([type=submit],
[type=button],
[type=reset],
[type=checkbox],
[type=radio],
[readonly]):is(:active, :focus),
.pico :where(select, textarea):not([readonly]):is(:active, :focus) {
--pico-background-color: var(--pico-form-element-active-background-color);
}
.pico input:not([type=submit], [type=button], [type=reset], [role=switch], [readonly]):is(:active, :focus),
.pico :where(select, textarea):not([readonly]):is(:active, :focus) {
--pico-border-color: var(--pico-form-element-active-border-color);
}
.pico input:not([type=submit],
[type=button],
[type=reset],
[type=range],
[type=file],
[readonly]):focus,
.pico :where(select, textarea):not([readonly]):focus {
--pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
}
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
.pico select[disabled],
.pico textarea[disabled],
.pico label[aria-disabled=true],
Build CSS
2025-01-11 03:36:02 +00:00
.pico [role=group] > label[aria-disabled=true],
.pico [role=group] > legend[aria-disabled=true],
fix: build theme script
2024-01-28 20:28:27 +07:00
.pico :where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
opacity: var(--pico-form-element-disabled-opacity);
pointer-events: none;
}
Build CSS
2025-01-11 03:36:02 +00:00
.pico label[aria-disabled=true] input[disabled] {
fix: build theme script
2024-01-28 20:28:27 +07:00
opacity: 1;
}
- 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
.pico :not([novalidate]) :where(input, select, textarea):not([type=checkbox],
fix: build theme script
2024-01-28 20:28:27 +07:00
[type=radio],
[type=date],
[type=datetime-local],
[type=month],
[type=time],
[type=week],
[type=range])[aria-invalid] {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal) !important;
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
background-position: center right 0.75rem;
background-size: 1rem auto;
background-repeat: no-repeat;
}
- 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
.pico :not([novalidate]) :where(input, select, textarea):not([type=checkbox],
fix: build theme script
2024-01-28 20:28:27 +07:00
[type=radio],
[type=date],
[type=datetime-local],
[type=month],
[type=time],
[type=week],
[type=range])[aria-invalid=false]:not(select) {
background-image: var(--pico-icon-valid);
}
- 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
.pico :not([novalidate]) :where(input, select, textarea):not([type=checkbox],
fix: build theme script
2024-01-28 20:28:27 +07:00
[type=radio],
[type=date],
[type=datetime-local],
[type=month],
[type=time],
[type=week],
[type=range])[aria-invalid=true]:not(select) {
background-image: var(--pico-icon-invalid);
}
- 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
.pico :not([novalidate]) :where(input, select, textarea)[aria-invalid=false] {
fix: build theme script
2024-01-28 20:28:27 +07:00
--pico-border-color: var(--pico-form-element-valid-border-color);
}
- 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
.pico :not([novalidate]) :where(input, select, textarea)[aria-invalid=false]:is(:active, :focus) {
fix: build theme script
2024-01-28 20:28:27 +07:00
--pico-border-color: var(--pico-form-element-valid-active-border-color) !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
.pico :not([novalidate]) :where(input, select, textarea)[aria-invalid=false]:is(:active, :focus):not([type=checkbox], [type=radio]) {
fix: build theme script
2024-01-28 20:28:27 +07:00
--pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-valid-focus-color) !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
.pico :not([novalidate]) :where(input, select, textarea)[aria-invalid=true] {
fix: build theme script
2024-01-28 20:28:27 +07:00
--pico-border-color: var(--pico-form-element-invalid-border-color);
}
- 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
.pico :not([novalidate]) :where(input, select, textarea)[aria-invalid=true]:is(:active, :focus) {
fix: build theme script
2024-01-28 20:28:27 +07:00
--pico-border-color: var(--pico-form-element-invalid-active-border-color) !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
.pico :not([novalidate]) :where(input, select, textarea)[aria-invalid=true]:is(:active, :focus):not([type=checkbox], [type=radio]) {
fix: build theme script
2024-01-28 20:28:27 +07:00
--pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-invalid-focus-color) !important;
}
[dir=rtl] .pico :where(input, select, textarea):not([type=checkbox], [type=radio]):is([aria-invalid], [aria-invalid=true], [aria-invalid=false]) {
background-position: center left 0.75rem;
}
.pico input::placeholder,
.pico input::-webkit-input-placeholder,
.pico textarea::placeholder,
.pico textarea::-webkit-input-placeholder,
Added <label> compatibility to groups
2024-11-11 22:10:47 -05:00
.pico select:invalid,
Closes Legend element not styled in `role="group"` Yohn/PicoCSS#23 Added compatability with `.dropdown` to the `role=group` Put a dropdown submenu in the group examples Improved borders on `[role=group] > label, [role=group] > legend` to ensure the same size as other group elements
2024-12-31 00:16:26 -05:00
.pico [role=group] > label,
.pico [role=group] > legend {
fix: build theme script
2024-01-28 20:28:27 +07:00
color: var(--pico-form-element-placeholder-color);
opacity: 1;
}
.pico input:not([type=checkbox], [type=radio]),
.pico select,
Added <label> compatibility to groups
2024-11-11 22:10:47 -05:00
.pico textarea,
Closes Legend element not styled in `role="group"` Yohn/PicoCSS#23 Added compatability with `.dropdown` to the `role=group` Put a dropdown submenu in the group examples Improved borders on `[role=group] > label, [role=group] > legend` to ensure the same size as other group elements
2024-12-31 00:16:26 -05:00
.pico [role=group] > label,
.pico [role=group] > legend {
fix: build theme script
2024-01-28 20:28:27 +07:00
margin-bottom: var(--pico-spacing);
}
.pico select::-ms-expand {
border: 0;
background-color: transparent;
}
.pico select:not([multiple], [size]) {
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--pico-form-element-spacing-horizontal);
padding-inline-start: var(--pico-form-element-spacing-horizontal);
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
background-image: var(--pico-icon-chevron);
background-position: center right 0.75rem;
background-size: 1rem auto;
background-repeat: no-repeat;
}
.pico select[multiple] option:checked {
background: var(--pico-form-element-selected-background-color);
chore: build
2024-03-03 11:35:04 +07:00
color: var(--pico-form-element-color);
fix: build theme script
2024-01-28 20:28:27 +07:00
}
[dir=rtl] .pico select:not([multiple], [size]) {
background-position: center left 0.75rem;
}
.pico textarea {
display: block;
resize: vertical;
}
.pico textarea[aria-invalid] {
--pico-icon-height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
background-position: top right 0.75rem !important;
background-size: 1rem var(--pico-icon-height) !important;
}
surpressimg sass warnings
2024-11-10 11:27:44 -05:00
.pico :where(input, select, textarea, fieldset, .grid, .dropdown) + small {
fix: build theme script
2024-01-28 20:28:27 +07:00
display: block;
width: 100%;
margin-top: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing);
color: var(--pico-muted-color);
}
surpressimg sass warnings
2024-11-10 11:27:44 -05:00
.pico :where(input, select, textarea, fieldset, .grid, .dropdown)[aria-invalid=false] + small {
fix: build theme script
2024-01-28 20:28:27 +07:00
color: var(--pico-ins-color);
}
surpressimg sass warnings
2024-11-10 11:27:44 -05:00
.pico :where(input, select, textarea, fieldset, .grid, .dropdown)[aria-invalid=true] + small {
fix: build theme script
2024-01-28 20:28:27 +07:00
color: var(--pico-del-color);
}
.pico label > :where(input, select, textarea) {
margin-top: calc(var(--pico-spacing) * 0.25);
}
/**
* Checkboxes, Radios and Switches
*/
.pico label:has([type=checkbox], [type=radio]) {
width: -moz-fit-content;
width: fit-content;
cursor: pointer;
}
.pico [type=checkbox],
.pico [type=radio] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 1.25em;
height: 1.25em;
margin-top: -0.125em;
margin-inline-end: 0.5em;
border-width: var(--pico-border-width);
vertical-align: middle;
cursor: pointer;
}
.pico [type=checkbox]::-ms-check,
.pico [type=radio]::-ms-check {
display: none;
}
.pico [type=checkbox]:checked, .pico [type=checkbox]:checked:active, .pico [type=checkbox]:checked:focus,
.pico [type=radio]:checked,
.pico [type=radio]:checked:active,
.pico [type=radio]:checked:focus {
--pico-background-color: var(--pico-primary-background);
--pico-border-color: var(--pico-primary-border);
background-image: var(--pico-icon-checkbox);
background-position: center;
background-size: 0.75em auto;
background-repeat: no-repeat;
}
.pico [type=checkbox] ~ label,
.pico [type=radio] ~ label {
display: inline-block;
margin-bottom: 0;
cursor: pointer;
}
.pico [type=checkbox] ~ label:not(:last-of-type),
.pico [type=radio] ~ label:not(:last-of-type) {
margin-inline-end: 1em;
}
.pico [type=checkbox]:indeterminate {
--pico-background-color: var(--pico-primary-background);
--pico-border-color: var(--pico-primary-border);
background-image: var(--pico-icon-minus);
background-position: center;
background-size: 0.75em auto;
background-repeat: no-repeat;
}
.pico [type=radio] {
border-radius: 50%;
}
.pico [type=radio]:checked, .pico [type=radio]:checked:active, .pico [type=radio]:checked:focus {
--pico-background-color: var(--pico-primary-inverse);
border-width: 0.35em;
background-image: none;
}
.pico [type=checkbox][role=switch] {
--pico-background-color: var(--pico-switch-background-color);
--pico-color: var(--pico-switch-color);
width: 2.25em;
height: 1.25em;
border: var(--pico-border-width) solid var(--pico-border-color);
border-radius: 1.25em;
background-color: var(--pico-background-color);
line-height: 1.25em;
}
.pico [type=checkbox][role=switch]:not([aria-invalid]) {
--pico-border-color: var(--pico-switch-background-color);
}
.pico [type=checkbox][role=switch]:before {
display: block;
fix: switch aspect ratio and border
2024-03-03 22:04:36 +07:00
aspect-ratio: 1;
fix: build theme script
2024-01-28 20:28:27 +07:00
height: 100%;
border-radius: 50%;
background-color: var(--pico-color);
box-shadow: var(--pico-switch-thumb-box-shadow);
content: "";
transition: margin 0.1s ease-in-out;
}
.pico [type=checkbox][role=switch]:focus {
--pico-background-color: var(--pico-switch-background-color);
--pico-border-color: var(--pico-switch-background-color);
}
.pico [type=checkbox][role=switch]:checked {
--pico-background-color: var(--pico-switch-checked-background-color);
--pico-border-color: var(--pico-switch-checked-background-color);
background-image: none;
}
.pico [type=checkbox][role=switch]:checked::before {
fix: switch aspect ratio and border
2024-03-03 22:04:36 +07:00
margin-inline-start: calc(2.25em - 1.25em);
fix: build theme script
2024-01-28 20:28:27 +07:00
}
.pico [type=checkbox][role=switch][disabled] {
--pico-background-color: var(--pico-border-color);
}
New switch light / dark mode toggle
2025-01-11 02:16:13 -05:00
.pico [type=checkbox][role=switch][name=color-mode-toggle]:before {
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;
-webkit-mask-size: contain; /* For WebKit browsers */
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
transition: margin 0.1s ease-in-out, background-color 0.1s ease-in-out;
}
.pico [type=checkbox][role=switch][name=color-mode-toggle]:checked::before {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M6 .278a.77.77 0 0 1 .08.858 7.2 7.2 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277q.792-.001 1.533-.16a.79.79 0 0 1 .81.316.73.73 0 0 1-.031.893A8.35 8.35 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.75.75 0 0 1 6 .278'/%3E%3Cpath d='M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.73 1.73 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.73 1.73 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.73 1.73 0 0 0 1.097-1.097zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.16 1.16 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.16 1.16 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732z'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M6 .278a.77.77 0 0 1 .08.858 7.2 7.2 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277q.792-.001 1.533-.16a.79.79 0 0 1 .81.316.73.73 0 0 1-.031.893A8.35 8.35 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.75.75 0 0 1 6 .278'/%3E%3Cpath d='M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.73 1.73 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.73 1.73 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.73 1.73 0 0 0 1.097-1.097zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.16 1.16 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.16 1.16 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732z'/%3E%3C/svg%3E");
background-color: var(--pico-primary-inverse);
}
.pico [type=checkbox][role=switch][name=color-mode-toggle]:not(:checked)::before {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0m9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0m9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708'/%3E%3C/svg%3E");
background-color: var(--pico-primary-inverse);
}
fix: build theme script
2024-01-28 20:28:27 +07:00
- 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
.pico :not([novalidate]) [type=checkbox][aria-invalid=false]:checked, .pico :not([novalidate]) [type=checkbox][aria-invalid=false]:checked:active, .pico :not([novalidate]) [type=checkbox][aria-invalid=false]:checked:focus,
.pico :not([novalidate]) [type=checkbox][role=switch][aria-invalid=false]:checked,
.pico :not([novalidate]) [type=checkbox][role=switch][aria-invalid=false]:checked:active,
.pico :not([novalidate]) [type=checkbox][role=switch][aria-invalid=false]:checked:focus {
fix: build theme script
2024-01-28 20:28:27 +07:00
--pico-background-color: var(--pico-form-element-valid-border-color);
}
- 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
.pico :not([novalidate]) [type=checkbox]:checked[aria-invalid=true], .pico :not([novalidate]) [type=checkbox]:checked:active[aria-invalid=true], .pico :not([novalidate]) [type=checkbox]:checked:focus[aria-invalid=true],
.pico :not([novalidate]) [type=checkbox][role=switch]:checked[aria-invalid=true],
.pico :not([novalidate]) [type=checkbox][role=switch]:checked:active[aria-invalid=true],
.pico :not([novalidate]) [type=checkbox][role=switch]:checked:focus[aria-invalid=true] {
fix: build theme script
2024-01-28 20:28:27 +07:00
--pico-background-color: var(--pico-form-element-invalid-border-color);
}
- 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
.pico :not([novalidate]) [type=checkbox][aria-invalid=false]:checked, .pico :not([novalidate]) [type=checkbox][aria-invalid=false]:checked:active, .pico :not([novalidate]) [type=checkbox][aria-invalid=false]:checked:focus,
.pico :not([novalidate]) [type=radio][aria-invalid=false]:checked,
.pico :not([novalidate]) [type=radio][aria-invalid=false]:checked:active,
.pico :not([novalidate]) [type=radio][aria-invalid=false]:checked:focus,
.pico :not([novalidate]) [type=checkbox][role=switch][aria-invalid=false]:checked,
.pico :not([novalidate]) [type=checkbox][role=switch][aria-invalid=false]:checked:active,
.pico :not([novalidate]) [type=checkbox][role=switch][aria-invalid=false]:checked:focus {
fix: build theme script
2024-01-28 20:28:27 +07:00
--pico-border-color: var(--pico-form-element-valid-border-color);
}
- 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
.pico :not([novalidate]) [type=checkbox]:checked[aria-invalid=true], .pico :not([novalidate]) [type=checkbox]:checked:active[aria-invalid=true], .pico :not([novalidate]) [type=checkbox]:checked:focus[aria-invalid=true],
.pico :not([novalidate]) [type=radio]:checked[aria-invalid=true],
.pico :not([novalidate]) [type=radio]:checked:active[aria-invalid=true],
.pico :not([novalidate]) [type=radio]:checked:focus[aria-invalid=true],
.pico :not([novalidate]) [type=checkbox][role=switch]:checked[aria-invalid=true],
.pico :not([novalidate]) [type=checkbox][role=switch]:checked:active[aria-invalid=true],
.pico :not([novalidate]) [type=checkbox][role=switch]:checked:focus[aria-invalid=true] {
fix: build theme script
2024-01-28 20:28:27 +07:00
--pico-border-color: var(--pico-form-element-invalid-border-color);
}
/**
* Input type color
*/
.pico [type=color]::-webkit-color-swatch-wrapper {
padding: 0;
}
.pico [type=color]::-moz-focus-inner {
padding: 0;
}
.pico [type=color]::-webkit-color-swatch {
border: 0;
border-radius: calc(var(--pico-border-radius) * 0.5);
}
.pico [type=color]::-moz-color-swatch {
border: 0;
border-radius: calc(var(--pico-border-radius) * 0.5);
}
/**
* Input type datetime
*/
.pico input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
--pico-icon-position: 0.75rem;
--pico-icon-width: 1rem;
padding-right: calc(var(--pico-icon-width) + var(--pico-icon-position));
background-image: var(--pico-icon-date);
background-position: center right var(--pico-icon-position);
background-size: var(--pico-icon-width) auto;
background-repeat: no-repeat;
}
.pico input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
background-image: var(--pico-icon-time);
}
.pico [type=date]::-webkit-calendar-picker-indicator,
.pico [type=datetime-local]::-webkit-calendar-picker-indicator,
.pico [type=month]::-webkit-calendar-picker-indicator,
.pico [type=time]::-webkit-calendar-picker-indicator,
.pico [type=week]::-webkit-calendar-picker-indicator {
width: var(--pico-icon-width);
margin-right: calc(var(--pico-icon-width) * -1);
margin-left: var(--pico-icon-position);
opacity: 0;
}
@-moz-document url-prefix() {
.pico [type=date],
.pico [type=datetime-local],
.pico [type=month],
.pico [type=time],
.pico [type=week] {
padding-right: var(--pico-form-element-spacing-horizontal) !important;
background-image: none !important;
}
}
[dir=rtl] .pico :is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
text-align: right;
}
/**
* Input type file
*/
.pico [type=file] {
--pico-color: var(--pico-muted-color);
margin-left: calc(var(--pico-outline-width) * -1);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0;
padding-left: var(--pico-outline-width);
border: 0;
border-radius: 0;
background: none;
}
.pico [type=file]::file-selector-button {
margin-right: calc(var(--pico-spacing) / 2);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
}
.pico [type=file]:is(:hover, :active, :focus)::file-selector-button {
--pico-background-color: var(--pico-secondary-hover-background);
--pico-border-color: var(--pico-secondary-hover-border);
}
.pico [type=file]:focus::file-selector-button {
--pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus);
}
/**
* Input type range
*/
.pico [type=range] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
height: 1.25rem;
background: none;
}
.pico [type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 0.375rem;
border-radius: var(--pico-border-radius);
background-color: var(--pico-range-border-color);
-webkit-transition: background-color var(--pico-transition), box-shadow var(--pico-transition);
transition: background-color var(--pico-transition), box-shadow var(--pico-transition);
}
.pico [type=range]::-moz-range-track {
width: 100%;
height: 0.375rem;
border-radius: var(--pico-border-radius);
background-color: var(--pico-range-border-color);
-moz-transition: background-color var(--pico-transition), box-shadow var(--pico-transition);
transition: background-color var(--pico-transition), box-shadow var(--pico-transition);
}
.pico [type=range]::-ms-track {
width: 100%;
height: 0.375rem;
border-radius: var(--pico-border-radius);
background-color: var(--pico-range-border-color);
-ms-transition: background-color var(--pico-transition), box-shadow var(--pico-transition);
transition: background-color var(--pico-transition), box-shadow var(--pico-transition);
}
.pico [type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 1.25rem;
height: 1.25rem;
margin-top: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%;
background-color: var(--pico-range-thumb-color);
cursor: pointer;
-webkit-transition: background-color var(--pico-transition), transform var(--pico-transition);
transition: background-color var(--pico-transition), transform var(--pico-transition);
}
.pico [type=range]::-moz-range-thumb {
-webkit-appearance: none;
width: 1.25rem;
height: 1.25rem;
margin-top: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%;
background-color: var(--pico-range-thumb-color);
cursor: pointer;
-moz-transition: background-color var(--pico-transition), transform var(--pico-transition);
transition: background-color var(--pico-transition), transform var(--pico-transition);
}
.pico [type=range]::-ms-thumb {
-webkit-appearance: none;
width: 1.25rem;
height: 1.25rem;
margin-top: -0.4375rem;
border: 2px solid var(--pico-range-thumb-border-color);
border-radius: 50%;
background-color: var(--pico-range-thumb-color);
cursor: pointer;
-ms-transition: background-color var(--pico-transition), transform var(--pico-transition);
transition: background-color var(--pico-transition), transform var(--pico-transition);
}
.pico [type=range]:active, .pico [type=range]:focus-within {
--pico-range-border-color: var(--pico-range-active-border-color);
--pico-range-thumb-color: var(--pico-range-thumb-active-color);
}
.pico [type=range]:active::-webkit-slider-thumb {
transform: scale(1.25);
}
.pico [type=range]:active::-moz-range-thumb {
transform: scale(1.25);
}
.pico [type=range]:active::-ms-thumb {
transform: scale(1.25);
}
/**
* Input type search
*/
.pico input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search] {
padding-inline-start: calc(var(--pico-form-element-spacing-horizontal) + 1.75rem);
background-image: var(--pico-icon-search);
yarn build
2024-02-14 19:46:01 +01:00
background-position: center left calc(var(--pico-form-element-spacing-horizontal) + 0.125rem);
fix: build theme script
2024-01-28 20:28:27 +07:00
background-size: 1rem auto;
background-repeat: no-repeat;
}
.pico input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid] {
padding-inline-start: calc(var(--pico-form-element-spacing-horizontal) + 1.75rem) !important;
background-position: center left 1.125rem, center right 0.75rem;
}
.pico input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid=false] {
background-image: var(--pico-icon-search), var(--pico-icon-valid);
}
.pico input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid=true] {
background-image: var(--pico-icon-search), var(--pico-icon-invalid);
}
[dir=rtl] .pico :where(input):not([type=checkbox], [type=radio], [type=range], [type=file])[type=search] {
background-position: center right 1.125rem;
}
[dir=rtl] .pico :where(input):not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid] {
background-position: center right 1.125rem, center left 0.75rem;
}
Build CSS
2025-01-11 03:36:02 +00:00
.pico form:not([novalidate]) {
/* File list when selected from the file input */
}
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
- 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
padding-right: calc(1.5em + 0.75rem);
background-position: right calc(0.375em + 0.1875rem) center;
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
background-repeat: no-repeat;
}
Build CSS
2025-01-11 03:36:02 +00:00
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
Added form validation
2024-11-13 03:42:58 -05:00
padding-right: calc(1.5em + 0.75rem);
background-position: right calc(0.375em + 0.1875rem) center;
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
background-repeat: no-repeat;
}
- 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
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
Added form validation
2024-11-13 03:42:58 -05:00
padding-right: calc(1.5em + 0.75rem);
padding-right: 4.2rem;
background-position: right 0.75rem center, center right 2.25rem;
background-repeat: no-repeat;
}
- 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
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
Added form validation
2024-11-13 03:42:58 -05:00
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
}
- 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
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) {
Added form validation
2024-11-13 03:42:58 -05:00
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
}
- 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
.pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
padding-right: calc(1.5em + 0.75rem);
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
background-repeat: no-repeat;
}
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
Added form validation
2024-11-13 03:42:58 -05:00
padding-right: calc(1.5em + 0.75rem);
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
background-repeat: no-repeat;
}
Build CSS
2025-01-11 03:36:02 +00:00
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
- 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
border-color: var(--pico-form-element-invalid-border-color);
background-image: var(--pico-icon-invalid);
}
Build CSS
2025-01-11 03:36:02 +00:00
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
- 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
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]),
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
Added form validation
2024-11-13 03:42:58 -05:00
border-color: var(--pico-form-element-invalid-border-color);
background-image: var(--pico-icon-invalid);
}
Build CSS
2025-01-11 03:36:02 +00:00
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
- 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
border-color: var(--pico-form-element-invalid-active-border-color);
}
Build CSS
2025-01-11 03:36:02 +00:00
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
- 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
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
border-color: var(--pico-form-element-invalid-active-border-color);
}
Build CSS
2025-01-11 03:36:02 +00:00
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
- 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
border-color: var(--pico-form-element-valid-border-color);
background-image: var(--pico-icon-valid);
}
Build CSS
2025-01-11 03:36:02 +00:00
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
- 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
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
Added form validation
2024-11-13 03:42:58 -05:00
border-color: var(--pico-form-element-valid-border-color);
background-image: var(--pico-icon-valid);
}
Build CSS
2025-01-11 03:36:02 +00:00
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
- 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
border-color: var(--pico-form-element-valid-active-border-color);
}
Build CSS
2025-01-11 03:36:02 +00:00
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
- 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
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
border-color: var(--pico-form-element-valid-active-border-color);
}
.pico form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
Added form validation
2024-11-13 03:42:58 -05:00
border-color: var(--pico-form-element-invalid-border-color);
}
Build CSS
2025-01-11 03:36:02 +00:00
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
- 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
content: attr(data-valid);
color: var(--pico-form-element-valid-border-color);
}
Build CSS
2025-01-11 03:36:02 +00:00
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after,
- 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
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
Added form validation
2024-11-13 03:42:58 -05:00
content: attr(data-valid);
color: var(--pico-form-element-valid-border-color);
}
Build CSS
2025-01-11 03:36:02 +00:00
.pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after {
- 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
content: attr(data-invalid);
color: var(--pico-form-element-invalid-border-color);
}
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
Build CSS
2025-01-11 03:36:02 +00:00
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
- 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
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
Added form validation
2024-11-13 03:42:58 -05:00
content: attr(data-invalid);
color: var(--pico-form-element-invalid-border-color);
}
Build CSS
2025-01-11 03:36:02 +00:00
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
- 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
display: block;
}
Build CSS
2025-01-11 03:36:02 +00:00
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after,
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
- 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
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
.pico form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
Added form validation
2024-11-13 03:42:58 -05:00
display: block;
}
- 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
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
Added form validation
2024-11-13 03:42:58 -05:00
position: relative;
top: -2rem;
}
- 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
.pico form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
Added form validation
2024-11-13 03:42:58 -05:00
border-color: var(--pico-form-element-invalid-border-color);
background-color: var(--pico-form-element-invalid-border-color);
}
Build CSS
2025-01-11 03:36:02 +00:00
.pico form:not([novalidate]) .file-list {
Added form validation
2024-11-13 03:42:58 -05:00
padding-left: 0;
}
Build CSS
2025-01-11 03:36:02 +00:00
.pico form:not([novalidate]) .file-list li {
Got the file validation and previewer lines up nicer
2024-11-13 07:26:10 -05:00
display: flex;
align-items: center;
justify-content: space-between;
Added form validation
2024-11-13 03:42:58 -05:00
list-style-type: none;
Got the file validation and previewer lines up nicer
2024-11-13 07:26:10 -05:00
text-align: center;
Added form validation
2024-11-13 03:42:58 -05:00
}
Build CSS
2025-01-11 03:36:02 +00:00
.pico form:not([novalidate]) .file-list li:nth-child(2n) {
Added form validation
2024-11-13 03:42:58 -05:00
background-color: #1b1b1b;
}
Build CSS
2025-01-11 03:36:02 +00:00
.pico form:not([novalidate]) .file-list li:hover {
Added form validation
2024-11-13 03:42:58 -05:00
background-color: var(--pico-muted-border-color);
}
Build CSS
2025-01-11 03:36:02 +00:00
.pico form:not([novalidate]) .file-list li .btn-file-rm {
Got the file validation and previewer lines up nicer
2024-11-13 07:26:10 -05:00
display: inline-block;
width: 1rem;
height: 1rem;
margin-right: 10px;
padding: 0;
padding-top: calc(var(--pico-spacing) * 0.25);
border: none;
background-image: var(--pico-icon-red-close);
background-position: center;
background-size: 1rem;
background-repeat: no-repeat;
background-color: transparent;
color: var(--pico-element-invalid-border-color);
opacity: 0.5;
transition: opacity var(--pico-transition);
}
Build CSS
2025-01-11 03:36:02 +00:00
.pico form:not([novalidate]) .file-list li .btn-file-rm:hover {
Got the file validation and previewer lines up nicer
2024-11-13 07:26:10 -05:00
opacity: 1;
}
Added form validation
2024-11-13 03:42:58 -05:00
- 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
.pico section[role=form] {
position: relative;
margin-bottom: 0;
}
.pico section[role=form] > input::-moz-placeholder, .pico section[role=form] > textarea::-moz-placeholder {
color: rgba(0, 0, 0, 0);
-moz-transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.pico section[role=form] > input::placeholder,
.pico section[role=form] > textarea::placeholder {
color: rgba(0, 0, 0, 0);
transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.pico section[role=form] > input:focus::-moz-placeholder, .pico section[role=form] > textarea:focus::-moz-placeholder {
color: var(--pico-form-element-placeholder-color);
}
.pico section[role=form] > input:focus::placeholder,
.pico section[role=form] > textarea:focus::placeholder {
color: var(--pico-form-element-placeholder-color);
}
.pico section[role=form] > input + label,
.pico section[role=form] > textarea + label,
.pico section[role=form] > select + label {
position: absolute;
top: 35%;
left: 0.8rem;
transform: translateY(-50%);
background: var(--pico-form-element-background-color);
color: var(--pico-form-element-placeholder-color);
cursor: text;
transition: 0.3s ease;
}
.pico section[role=form] > input:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
top: -5%;
Build CSS
2025-01-11 03:36:02 +00:00
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
transform: translateY(-55%) scale(0.8);
- 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
color: var(--pico-form-element-active-border-color);
Build CSS
2025-01-11 03:36:02 +00:00
font-size: var(--pico-font-size);
line-height: 1.15;
- 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
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.pico section[role=form] > input:not(:placeholder-shown) + label,
.pico section[role=form] > input:focus + label,
.pico section[role=form] > textarea:not(:placeholder-shown) + label,
.pico section[role=form] > textarea:focus + label,
.pico section[role=form] > select:focus + label,
Build CSS
2025-01-11 03:36:02 +00:00
.pico section[role=form] > select:has(option:checked:not([disabled])) + label {
- 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
top: -5%;
Build CSS
2025-01-11 03:36:02 +00:00
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
transform: translateY(-55%) scale(0.8);
- 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
color: var(--pico-form-element-active-border-color);
Build CSS
2025-01-11 03:36:02 +00:00
font-size: var(--pico-font-size);
line-height: 1.15;
- 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
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.pico section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
color: var(--pico-form-element-invalid-border-color);
}
.pico section[role=form] > input:user-invalid:not(:placeholder-shown) + label,
.pico section[role=form] > textarea:user-invalid:not(:placeholder-shown) + label {
color: var(--pico-form-element-invalid-border-color);
}
.pico section[role=form] > input:user-valid:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:user-valid:not(:-moz-placeholder-shown) + label {
color: var(--pico-form-element-valid-border-color);
}
.pico section[role=form] > input:user-valid:not(:placeholder-shown) + label,
.pico section[role=form] > textarea:user-valid:not(:placeholder-shown) + label {
color: var(--pico-form-element-valid-border-color);
}
fix: build theme script
2024-01-28 20:28:27 +07:00
/**
* Accordion (<details>)
*/
.pico details {
display: block;
margin-bottom: var(--pico-spacing);
}
.pico details summary {
line-height: 1rem;
list-style-type: none;
cursor: pointer;
}
.pico details summary:not([role]) {
color: var(--pico-accordion-close-summary-color);
}
.pico details summary::-webkit-details-marker {
display: none;
}
.pico details summary::marker {
display: none;
}
.pico details summary::-moz-list-bullet {
list-style-type: none;
}
.pico details summary::after {
display: block;
width: 1rem;
height: 1rem;
margin-inline-start: calc(var(--pico-spacing, 1rem) * 0.5);
float: right;
transform: rotate(-90deg);
background-image: var(--pico-icon-chevron);
background-position: right center;
background-size: 1rem auto;
background-repeat: no-repeat;
content: "";
corrected dropdown arrow colors for secondary, contrast, and primary. Also enabled the turning of the arrow when the dropdowns are open or closed
2024-12-14 21:13:13 -05:00
transition: transform var(--pico-transition);
fix: build theme script
2024-01-28 20:28:27 +07:00
}
.pico details summary:focus {
outline: none;
}
.pico details summary:focus:not([role]) {
color: var(--pico-accordion-active-summary-color);
}
.pico details summary:focus-visible:not([role]) {
outline: var(--pico-outline-width) solid var(--pico-primary-focus);
outline-offset: calc(var(--pico-spacing, 1rem) * 0.5);
color: var(--pico-primary);
}
.pico details summary[role=button] {
width: 100%;
text-align: left;
}
.pico details summary[role=button]::after {
height: calc(1rem * var(--pico-line-height, 1.5));
}
.pico details[open] > summary {
margin-bottom: var(--pico-spacing);
}
.pico details[open] > summary:not([role]):not(:focus) {
color: var(--pico-accordion-open-summary-color);
}
corrected dropdown arrow colors for secondary, contrast, and primary. Also enabled the turning of the arrow when the dropdowns are open or closed
2024-12-14 21:13:13 -05:00
.pico details[open] > summary::after {
transform: rotate(0);
}
fix: build theme script
2024-01-28 20:28:27 +07:00
[dir=rtl] .pico details summary {
text-align: right;
}
[dir=rtl] .pico details summary::after {
float: left;
Merged RTL pull request into css files, and updated docs for hamburger menu. Will create new versioning soon, I have something else I'd like to include.
2024-12-12 21:12:39 -05:00
transform: rotate(90deg);
fix: build theme script
2024-01-28 20:28:27 +07:00
background-position: left center;
}
Merged RTL pull request into css files, and updated docs for hamburger menu. Will create new versioning soon, I have something else I'd like to include.
2024-12-12 21:12:39 -05:00
[dir=rtl] .pico details[open] > summary::after {
transform: rotate(0);
}
fix: build theme script
2024-01-28 20:28:27 +07:00
/**
rebuilt css files, For some reason was having issues with the line endings, hopefully the editorconfig will fix it.
2024-12-03 14:27:56 -05:00
* Card (<article>, role="article")
fix: build theme script
2024-01-28 20:28:27 +07:00
*/
Cards keep style with form tag wrapped around header and footer in article
2024-12-15 11:51:19 -05:00
.pico article:not(:has(> form)),
.pico [role=article]:not(:has(> form)),
.pico article > form,
.pico [role=article] > form {
fix: build theme script
2024-01-28 20:28:27 +07:00
margin-bottom: var(--pico-block-spacing-vertical);
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
border-radius: var(--pico-border-radius);
background: var(--pico-card-background-color);
box-shadow: var(--pico-card-box-shadow);
}
Cards keep style with form tag wrapped around header and footer in article
2024-12-15 11:51:19 -05:00
.pico article:not(:has(> form)) > header,
.pico article:not(:has(> form)) > footer,
.pico [role=article]:not(:has(> form)) > header,
.pico [role=article]:not(:has(> form)) > footer,
.pico article > form > header,
.pico article > form > footer,
.pico [role=article] > form > header,
.pico [role=article] > form > footer {
fix: build theme script
2024-01-28 20:28:27 +07:00
margin-right: calc(var(--pico-block-spacing-horizontal) * -1);
margin-left: calc(var(--pico-block-spacing-horizontal) * -1);
padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal);
background-color: var(--pico-card-sectioning-background-color);
}
Cards keep style with form tag wrapped around header and footer in article
2024-12-15 11:51:19 -05:00
.pico article:not(:has(> form)) > header,
.pico [role=article]:not(:has(> form)) > header,
.pico article > form > header,
.pico [role=article] > form > header {
fix: build theme script
2024-01-28 20:28:27 +07:00
margin-top: calc(var(--pico-block-spacing-vertical) * -1);
margin-bottom: var(--pico-block-spacing-vertical);
border-bottom: var(--pico-border-width) solid var(--pico-card-border-color);
border-top-right-radius: var(--pico-border-radius);
border-top-left-radius: var(--pico-border-radius);
}
Cards keep style with form tag wrapped around header and footer in article
2024-12-15 11:51:19 -05:00
.pico article:not(:has(> form)) > header > h1,
.pico article:not(:has(> form)) > header > h2,
.pico article:not(:has(> form)) > header > h3,
.pico article:not(:has(> form)) > header > h4,
.pico article:not(:has(> form)) > header > h5,
.pico article:not(:has(> form)) > header > h6,
.pico [role=article]:not(:has(> form)) > header > h1,
.pico [role=article]:not(:has(> form)) > header > h2,
.pico [role=article]:not(:has(> form)) > header > h3,
.pico [role=article]:not(:has(> form)) > header > h4,
.pico [role=article]:not(:has(> form)) > header > h5,
.pico [role=article]:not(:has(> form)) > header > h6,
.pico article > form > header > h1,
.pico article > form > header > h2,
.pico article > form > header > h3,
.pico article > form > header > h4,
.pico article > form > header > h5,
.pico article > form > header > h6,
.pico [role=article] > form > header > h1,
.pico [role=article] > form > header > h2,
.pico [role=article] > form > header > h3,
.pico [role=article] > form > header > h4,
.pico [role=article] > form > header > h5,
.pico [role=article] > form > header > h6 {
Added a Timeline feature, removed the margin-bottom from `article > header > h[1-6]` And added the border-color for dark theme on the article > header
2024-11-12 04:59:34 -05:00
margin-bottom: 0;
}
Cards keep style with form tag wrapped around header and footer in article
2024-12-15 11:51:19 -05:00
.pico article:not(:has(> form)) > header > hgroup > h1,
.pico article:not(:has(> form)) > header > hgroup > h2,
.pico article:not(:has(> form)) > header > hgroup > h3,
.pico article:not(:has(> form)) > header > hgroup > h4,
.pico article:not(:has(> form)) > header > hgroup > h5,
.pico article:not(:has(> form)) > header > hgroup > h6,
.pico [role=article]:not(:has(> form)) > header > hgroup > h1,
.pico [role=article]:not(:has(> form)) > header > hgroup > h2,
.pico [role=article]:not(:has(> form)) > header > hgroup > h3,
.pico [role=article]:not(:has(> form)) > header > hgroup > h4,
.pico [role=article]:not(:has(> form)) > header > hgroup > h5,
.pico [role=article]:not(:has(> form)) > header > hgroup > h6,
.pico article > form > header > hgroup > h1,
.pico article > form > header > hgroup > h2,
.pico article > form > header > hgroup > h3,
.pico article > form > header > hgroup > h4,
.pico article > form > header > hgroup > h5,
.pico article > form > header > hgroup > h6,
.pico [role=article] > form > header > hgroup > h1,
.pico [role=article] > form > header > hgroup > h2,
.pico [role=article] > form > header > hgroup > h3,
.pico [role=article] > form > header > hgroup > h4,
.pico [role=article] > form > header > hgroup > h5,
.pico [role=article] > form > header > hgroup > h6 {
margin-bottom: 0;
}
.pico article:not(:has(> form)) > footer,
.pico [role=article]:not(:has(> form)) > footer,
.pico article > form > footer,
.pico [role=article] > form > footer {
fix: build theme script
2024-01-28 20:28:27 +07:00
margin-top: var(--pico-block-spacing-vertical);
margin-bottom: calc(var(--pico-block-spacing-vertical) * -1);
border-top: var(--pico-border-width) solid var(--pico-card-border-color);
border-bottom-right-radius: var(--pico-border-radius);
border-bottom-left-radius: var(--pico-border-radius);
}
Cards keep style with form tag wrapped around header and footer in article
2024-12-15 11:51:19 -05:00
.pico article:not(:has(> form)) > footer [type=submit],
.pico article:not(:has(> form)) > footer [type=reset],
.pico article:not(:has(> form)) > footer [type=button],
.pico article:not(:has(> form)) > footer [role=group],
.pico article:not(:has(> form)) > footer p,
.pico article:not(:has(> form)) > footer nav,
.pico article:not(:has(> form)) > footer ul,
.pico article:not(:has(> form)) > footer ol,
.pico [role=article]:not(:has(> form)) > footer [type=submit],
.pico [role=article]:not(:has(> form)) > footer [type=reset],
.pico [role=article]:not(:has(> form)) > footer [type=button],
.pico [role=article]:not(:has(> form)) > footer [role=group],
.pico [role=article]:not(:has(> form)) > footer p,
.pico [role=article]:not(:has(> form)) > footer nav,
.pico [role=article]:not(:has(> form)) > footer ul,
.pico [role=article]:not(:has(> form)) > footer ol,
.pico article > form > footer [type=submit],
.pico article > form > footer [type=reset],
.pico article > form > footer [type=button],
.pico article > form > footer [role=group],
.pico article > form > footer p,
.pico article > form > footer nav,
.pico article > form > footer ul,
.pico article > form > footer ol,
.pico [role=article] > form > footer [type=submit],
.pico [role=article] > form > footer [type=reset],
.pico [role=article] > form > footer [type=button],
.pico [role=article] > form > footer [role=group],
.pico [role=article] > form > footer p,
.pico [role=article] > form > footer nav,
.pico [role=article] > form > footer ul,
.pico [role=article] > form > footer ol {
- 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
margin-bottom: 0px;
/* Also remove if next input after button is a hidden input */
}
Cards keep style with form tag wrapped around header and footer in article
2024-12-15 11:51:19 -05:00
.pico article:not(:has(> form)) > footer [type=submit]:last-child,
.pico article:not(:has(> form)) > footer [type=reset]:last-child,
.pico article:not(:has(> form)) > footer [type=button]:last-child,
.pico article:not(:has(> form)) > footer [role=group]:last-child,
.pico article:not(:has(> form)) > footer p:last-child,
.pico article:not(:has(> form)) > footer nav:last-child,
.pico article:not(:has(> form)) > footer ul:last-child,
.pico article:not(:has(> form)) > footer ol:last-child,
.pico [role=article]:not(:has(> form)) > footer [type=submit]:last-child,
.pico [role=article]:not(:has(> form)) > footer [type=reset]:last-child,
.pico [role=article]:not(:has(> form)) > footer [type=button]:last-child,
.pico [role=article]:not(:has(> form)) > footer [role=group]:last-child,
.pico [role=article]:not(:has(> form)) > footer p:last-child,
.pico [role=article]:not(:has(> form)) > footer nav:last-child,
.pico [role=article]:not(:has(> form)) > footer ul:last-child,
.pico [role=article]:not(:has(> form)) > footer ol:last-child,
.pico article > form > footer [type=submit]:last-child,
.pico article > form > footer [type=reset]:last-child,
.pico article > form > footer [type=button]:last-child,
.pico article > form > footer [role=group]:last-child,
.pico article > form > footer p:last-child,
.pico article > form > footer nav:last-child,
.pico article > form > footer ul:last-child,
.pico article > form > footer ol:last-child,
.pico [role=article] > form > footer [type=submit]:last-child,
.pico [role=article] > form > footer [type=reset]:last-child,
.pico [role=article] > form > footer [type=button]:last-child,
.pico [role=article] > form > footer [role=group]:last-child,
.pico [role=article] > form > footer p:last-child,
.pico [role=article] > form > footer nav:last-child,
.pico [role=article] > form > footer ul:last-child,
.pico [role=article] > form > footer ol:last-child {
- 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
margin-bottom: 0px;
}
Cards keep style with form tag wrapped around header and footer in article
2024-12-15 11:51:19 -05:00
.pico article:not(:has(> form)) > footer [type=submit]:has(+ [type=hidden]),
.pico article:not(:has(> form)) > footer [type=reset]:has(+ [type=hidden]),
.pico article:not(:has(> form)) > footer [type=button]:has(+ [type=hidden]),
.pico article:not(:has(> form)) > footer [role=group]:has(+ [type=hidden]),
.pico article:not(:has(> form)) > footer p:has(+ [type=hidden]),
.pico article:not(:has(> form)) > footer nav:has(+ [type=hidden]),
.pico article:not(:has(> form)) > footer ul:has(+ [type=hidden]),
.pico article:not(:has(> form)) > footer ol:has(+ [type=hidden]),
.pico [role=article]:not(:has(> form)) > footer [type=submit]:has(+ [type=hidden]),
.pico [role=article]:not(:has(> form)) > footer [type=reset]:has(+ [type=hidden]),
.pico [role=article]:not(:has(> form)) > footer [type=button]:has(+ [type=hidden]),
.pico [role=article]:not(:has(> form)) > footer [role=group]:has(+ [type=hidden]),
.pico [role=article]:not(:has(> form)) > footer p:has(+ [type=hidden]),
.pico [role=article]:not(:has(> form)) > footer nav:has(+ [type=hidden]),
.pico [role=article]:not(:has(> form)) > footer ul:has(+ [type=hidden]),
.pico [role=article]:not(:has(> form)) > footer ol:has(+ [type=hidden]),
.pico article > form > footer [type=submit]:has(+ [type=hidden]),
.pico article > form > footer [type=reset]:has(+ [type=hidden]),
.pico article > form > footer [type=button]:has(+ [type=hidden]),
.pico article > form > footer [role=group]:has(+ [type=hidden]),
.pico article > form > footer p:has(+ [type=hidden]),
.pico article > form > footer nav:has(+ [type=hidden]),
.pico article > form > footer ul:has(+ [type=hidden]),
.pico article > form > footer ol:has(+ [type=hidden]),
.pico [role=article] > form > footer [type=submit]:has(+ [type=hidden]),
.pico [role=article] > form > footer [type=reset]:has(+ [type=hidden]),
.pico [role=article] > form > footer [type=button]:has(+ [type=hidden]),
.pico [role=article] > form > footer [role=group]:has(+ [type=hidden]),
.pico [role=article] > form > footer p:has(+ [type=hidden]),
.pico [role=article] > form > footer nav:has(+ [type=hidden]),
.pico [role=article] > form > footer ul:has(+ [type=hidden]),
.pico [role=article] > form > footer ol:has(+ [type=hidden]) {
- 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
margin-bottom: 0px;
}
fix: build theme script
2024-01-28 20:28:27 +07:00
/**
* Dropdown (details.dropdown)
*/
.pico details.dropdown {
position: relative;
border-bottom: none;
}
corrected dropdown arrow colors for secondary, contrast, and primary. Also enabled the turning of the arrow when the dropdowns are open or closed
2024-12-14 21:13:13 -05:00
.pico details.dropdown[open] > summary::after,
.pico details.dropdown[open] > button::after,
.pico details.dropdown[open] > a::after {
transform: rotate(0deg);
}
surpressimg sass warnings
2024-11-10 11:27:44 -05:00
.pico details.dropdown > summary::after,
fix: build theme script
2024-01-28 20:28:27 +07:00
.pico details.dropdown > button::after,
.pico details.dropdown > a::after {
display: block;
width: 1rem;
height: calc(1rem * var(--pico-line-height, 1.5));
margin-inline-start: 0.25rem;
float: right;
corrected dropdown arrow colors for secondary, contrast, and primary. Also enabled the turning of the arrow when the dropdowns are open or closed
2024-12-14 21:13:13 -05:00
transform: rotate(-90deg);
fix: build theme script
2024-01-28 20:28:27 +07:00
background-image: var(--pico-icon-chevron);
background-position: right center;
background-size: 1rem auto;
background-repeat: no-repeat;
content: "";
}
surpressimg sass warnings
2024-11-10 11:27:44 -05:00
.pico details.dropdown > summary:not([role]) {
fix: build theme script
2024-01-28 20:28:27 +07:00
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
border-radius: var(--pico-border-radius);
background-color: var(--pico-form-element-background-color);
color: var(--pico-form-element-placeholder-color);
line-height: inherit;
Build CSS
2025-01-11 08:57:11 +00:00
text-align: inherit;
fix: build theme script
2024-01-28 20:28:27 +07:00
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
}
surpressimg sass warnings
2024-11-10 11:27:44 -05:00
.pico details.dropdown > summary:not([role]):active, .pico details.dropdown > summary:not([role]):focus {
fix: build theme script
2024-01-28 20:28:27 +07:00
border-color: var(--pico-form-element-active-border-color);
background-color: var(--pico-form-element-active-background-color);
}
surpressimg sass warnings
2024-11-10 11:27:44 -05:00
.pico details.dropdown > summary:not([role]):focus {
fix: build theme script
2024-01-28 20:28:27 +07:00
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
}
surpressimg sass warnings
2024-11-10 11:27:44 -05:00
.pico details.dropdown > summary:not([role]):focus-visible {
fix: build theme script
2024-01-28 20:28:27 +07:00
outline: none;
}
surpressimg sass warnings
2024-11-10 11:27:44 -05:00
.pico details.dropdown > summary:not([role])[aria-invalid=false] {
fix: build theme script
2024-01-28 20:28:27 +07:00
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
}
surpressimg sass warnings
2024-11-10 11:27:44 -05:00
.pico details.dropdown > summary:not([role])[aria-invalid=true] {
fix: build theme script
2024-01-28 20:28:27 +07:00
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
}
surpressimg sass warnings
2024-11-10 11:27:44 -05:00
.pico details.dropdown > summary + ul {
fix: build theme script
2024-01-28 20:28:27 +07:00
display: flex;
z-index: 99;
position: absolute;
left: 0;
flex-direction: column;
width: 100%;
Build CSS
2025-01-11 08:57:11 +00:00
min-width: 200px;
fix: build theme script
2024-01-28 20:28:27 +07:00
min-width: -moz-fit-content;
min-width: fit-content;
margin: 0;
margin-top: var(--pico-outline-width);
padding: 0;
border: var(--pico-border-width) solid var(--pico-dropdown-border-color);
border-radius: var(--pico-border-radius);
background-color: var(--pico-dropdown-background-color);
box-shadow: var(--pico-dropdown-box-shadow);
color: var(--pico-dropdown-color);
white-space: nowrap;
opacity: 0;
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
}
surpressimg sass warnings
2024-11-10 11:27:44 -05:00
.pico details.dropdown > summary + ul[dir=rtl] {
fix: build theme script
2024-01-28 20:28:27 +07:00
right: 0;
left: auto;
}
surpressimg sass warnings
2024-11-10 11:27:44 -05:00
.pico details.dropdown > summary + ul li {
fix: build theme script
2024-01-28 20:28:27 +07:00
width: 100%;
margin-bottom: 0;
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
list-style: none;
}
surpressimg sass warnings
2024-11-10 11:27:44 -05:00
.pico details.dropdown > summary + ul li:first-of-type {
fix: build theme script
2024-01-28 20:28:27 +07:00
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
}
surpressimg sass warnings
2024-11-10 11:27:44 -05:00
.pico details.dropdown > summary + ul li:last-of-type {
fix: build theme script
2024-01-28 20:28:27 +07:00
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
}
Corrected Dropdown > Submenu formatting and alignment
2024-12-14 21:41:12 -05:00
.pico details.dropdown > summary + ul li details {
Build CSS
2025-01-11 08:57:11 +00:00
width: 100%;
Corrected Dropdown > Submenu formatting and alignment
2024-12-14 21:41:12 -05:00
margin-bottom: 0;
}
.pico details.dropdown > summary + ul li details > summary {
line-height: var(--pico-line-height);
}
surpressimg sass warnings
2024-11-10 11:27:44 -05:00
.pico details.dropdown > summary + ul li a {
fix: build theme script
2024-01-28 20:28:27 +07:00
display: block;
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
overflow: hidden;
border-radius: 0;
color: var(--pico-dropdown-color);
text-decoration: none;
text-overflow: ellipsis;
}
surpressimg sass warnings
2024-11-10 11:27:44 -05:00
.pico details.dropdown > summary + ul li a:hover, .pico details.dropdown > summary + ul li a:focus, .pico details.dropdown > summary + ul li a:active, .pico details.dropdown > summary + ul li a:focus-visible, .pico details.dropdown > summary + ul li a[aria-current]:not([aria-current=false]) {
fix: build theme script
2024-01-28 20:28:27 +07:00
background-color: var(--pico-dropdown-hover-background-color);
}
surpressimg sass warnings
2024-11-10 11:27:44 -05:00
.pico details.dropdown > summary + ul li label {
fix: build theme script
2024-01-28 20:28:27 +07:00
width: 100%;
}
surpressimg sass warnings
2024-11-10 11:27:44 -05:00
.pico details.dropdown > summary + ul li:has(label):hover {
fix: build theme script
2024-01-28 20:28:27 +07:00
background-color: var(--pico-dropdown-hover-background-color);
}
surpressimg sass warnings
2024-11-10 11:27:44 -05:00
.pico details.dropdown[open] > summary {
fix: build theme script
2024-01-28 20:28:27 +07:00
margin-bottom: 0;
}
surpressimg sass warnings
2024-11-10 11:27:44 -05:00
.pico details.dropdown[open] > summary::before {
fix: build theme script
2024-01-28 20:28:27 +07:00
display: block;
z-index: 1;
position: fixed;
width: 100vw;
height: 100vh;
inset: 0;
background: none;
content: "";
cursor: default;
}
Version 2.2.1
2024-12-21 05:48:33 -05:00
.pico details.dropdown[open] > summary + ul {
transform: scaleY(1);
opacity: 1;
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
}
.pico nav details.dropdown {
display: inline;
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
margin-bottom: 0;
}
.pico nav details.dropdown > summary:not([role]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
}
.pico nav details.dropdown > summary:not([role]):focus-visible {
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
}
fix: build theme script
2024-01-28 20:28:27 +07:00
.pico label > details.dropdown {
margin-top: calc(var(--pico-spacing) * 0.25);
}
/**
* Group ([role="group"], [role="search"])
*/
Closes Legend element not styled in `role="group"` Yohn/PicoCSS#23 Added compatability with `.dropdown` to the `role=group` Put a dropdown submenu in the group examples Improved borders on `[role=group] > label, [role=group] > legend` to ensure the same size as other group elements
2024-12-31 00:16:26 -05:00
.pico fieldset[role=group] > legend {
float: left;
}
fix: build theme script
2024-01-28 20:28:27 +07:00
.pico [role=search],
.pico [role=group] {
display: inline-flex;
position: relative;
width: 100%;
margin-bottom: var(--pico-spacing);
border-radius: var(--pico-border-radius);
box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
vertical-align: middle;
transition: box-shadow var(--pico-transition);
}
Added <label> compatibility to groups
2024-11-11 22:10:47 -05:00
.pico [role=search] > label,
Closes Legend element not styled in `role="group"` Yohn/PicoCSS#23 Added compatability with `.dropdown` to the `role=group` Put a dropdown submenu in the group examples Improved borders on `[role=group] > label, [role=group] > legend` to ensure the same size as other group elements
2024-12-31 00:16:26 -05:00
.pico [role=search] > legend,
.pico [role=group] > label,
.pico [role=group] > legend {
border-color: var(--pico-secondary-background);
Added <label> compatibility to groups
2024-11-11 22:10:47 -05:00
background-color: var(--pico-secondary-background);
color: var(--pico-secondary-inverse);
}
fix: build theme script
2024-01-28 20:28:27 +07:00
.pico [role=search] > *,
.pico [role=search] input:not([type=checkbox], [type=radio]),
.pico [role=search] select,
Closes Legend element not styled in `role="group"` Yohn/PicoCSS#23 Added compatability with `.dropdown` to the `role=group` Put a dropdown submenu in the group examples Improved borders on `[role=group] > label, [role=group] > legend` to ensure the same size as other group elements
2024-12-31 00:16:26 -05:00
.pico [role=search] > label,
.pico [role=search] > legend,
.pico [role=search] > details,
fix: build theme script
2024-01-28 20:28:27 +07:00
.pico [role=group] > *,
.pico [role=group] input:not([type=checkbox], [type=radio]),
Added <label> compatibility to groups
2024-11-11 22:10:47 -05:00
.pico [role=group] select,
Closes Legend element not styled in `role="group"` Yohn/PicoCSS#23 Added compatability with `.dropdown` to the `role=group` Put a dropdown submenu in the group examples Improved borders on `[role=group] > label, [role=group] > legend` to ensure the same size as other group elements
2024-12-31 00:16:26 -05:00
.pico [role=group] > label,
.pico [role=group] > legend,
.pico [role=group] > details {
fix: build theme script
2024-01-28 20:28:27 +07:00
position: relative;
flex: 1 1 auto;
margin-bottom: 0;
}
.pico [role=search] > *:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=search] select:not(:first-child),
Closes Legend element not styled in `role="group"` Yohn/PicoCSS#23 Added compatability with `.dropdown` to the `role=group` Put a dropdown submenu in the group examples Improved borders on `[role=group] > label, [role=group] > legend` to ensure the same size as other group elements
2024-12-31 00:16:26 -05:00
.pico [role=search] > label:not(:first-child),
.pico [role=search] > legend:not(:first-child),
.pico [role=search] > details:not(:first-child),
fix: build theme script
2024-01-28 20:28:27 +07:00
.pico [role=group] > *:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
Added <label> compatibility to groups
2024-11-11 22:10:47 -05:00
.pico [role=group] select:not(:first-child),
Closes Legend element not styled in `role="group"` Yohn/PicoCSS#23 Added compatability with `.dropdown` to the `role=group` Put a dropdown submenu in the group examples Improved borders on `[role=group] > label, [role=group] > legend` to ensure the same size as other group elements
2024-12-31 00:16:26 -05:00
.pico [role=group] > label:not(:first-child),
.pico [role=group] > legend:not(:first-child),
.pico [role=group] > details:not(:first-child) {
fix: build theme script
2024-01-28 20:28:27 +07:00
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.pico [role=search] > *:not(:last-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
.pico [role=search] select:not(:last-child),
Closes Legend element not styled in `role="group"` Yohn/PicoCSS#23 Added compatability with `.dropdown` to the `role=group` Put a dropdown submenu in the group examples Improved borders on `[role=group] > label, [role=group] > legend` to ensure the same size as other group elements
2024-12-31 00:16:26 -05:00
.pico [role=search] > label:not(:last-child),
.pico [role=search] > legend:not(:last-child),
.pico [role=search] > details:not(:last-child),
fix: build theme script
2024-01-28 20:28:27 +07:00
.pico [role=group] > *:not(:last-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
Added <label> compatibility to groups
2024-11-11 22:10:47 -05:00
.pico [role=group] select:not(:last-child),
Closes Legend element not styled in `role="group"` Yohn/PicoCSS#23 Added compatability with `.dropdown` to the `role=group` Put a dropdown submenu in the group examples Improved borders on `[role=group] > label, [role=group] > legend` to ensure the same size as other group elements
2024-12-31 00:16:26 -05:00
.pico [role=group] > label:not(:last-child),
.pico [role=group] > legend:not(:last-child),
.pico [role=group] > details:not(:last-child) {
fix: build theme script
2024-01-28 20:28:27 +07:00
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.pico [role=search] > *:focus,
.pico [role=search] input:not([type=checkbox], [type=radio]):focus,
.pico [role=search] select:focus,
Closes Legend element not styled in `role="group"` Yohn/PicoCSS#23 Added compatability with `.dropdown` to the `role=group` Put a dropdown submenu in the group examples Improved borders on `[role=group] > label, [role=group] > legend` to ensure the same size as other group elements
2024-12-31 00:16:26 -05:00
.pico [role=search] > label:focus,
.pico [role=search] > legend:focus,
.pico [role=search] > details:focus,
fix: build theme script
2024-01-28 20:28:27 +07:00
.pico [role=group] > *:focus,
.pico [role=group] input:not([type=checkbox], [type=radio]):focus,
Added <label> compatibility to groups
2024-11-11 22:10:47 -05:00
.pico [role=group] select:focus,
Closes Legend element not styled in `role="group"` Yohn/PicoCSS#23 Added compatability with `.dropdown` to the `role=group` Put a dropdown submenu in the group examples Improved borders on `[role=group] > label, [role=group] > legend` to ensure the same size as other group elements
2024-12-31 00:16:26 -05:00
.pico [role=group] > label:focus,
.pico [role=group] > legend:focus,
.pico [role=group] > details:focus {
fix: build theme script
2024-01-28 20:28:27 +07:00
z-index: 2;
}
Closes Legend element not styled in `role="group"` Yohn/PicoCSS#23 Added compatability with `.dropdown` to the `role=group` Put a dropdown submenu in the group examples Improved borders on `[role=group] > label, [role=group] > legend` to ensure the same size as other group elements
2024-12-31 00:16:26 -05:00
.pico [role=search] > details:not(:first-child) > summary,
.pico [role=group] > details:not(:first-child) > summary {
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.pico [role=search] > details:not(:last-child) > summary,
.pico [role=group] > details:not(:last-child) > summary {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.pico [role=search] > details > summary,
.pico [role=search] > details > summary:not([role]),
.pico [role=group] > details > summary,
.pico [role=group] > details > summary:not([role]) {
height: 100% !important;
}
fix: build theme script
2024-01-28 20:28:27 +07:00
.pico [role=search] button:not(:first-child),
.pico [role=search] [type=submit]:not(:first-child),
.pico [role=search] [type=reset]:not(:first-child),
.pico [role=search] [type=button]:not(:first-child),
.pico [role=search] [role=button]:not(:first-child),
.pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
.pico [role=search] select:not(:first-child),
Closes Legend element not styled in `role="group"` Yohn/PicoCSS#23 Added compatability with `.dropdown` to the `role=group` Put a dropdown submenu in the group examples Improved borders on `[role=group] > label, [role=group] > legend` to ensure the same size as other group elements
2024-12-31 00:16:26 -05:00
.pico [role=search] > label:not(:first-child),
.pico [role=search] > legend:not(:first-child),
.pico [role=search] > details > summary:not(:first-child),
fix: build theme script
2024-01-28 20:28:27 +07:00
.pico [role=group] button:not(:first-child),
.pico [role=group] [type=submit]:not(:first-child),
.pico [role=group] [type=reset]:not(:first-child),
.pico [role=group] [type=button]:not(:first-child),
.pico [role=group] [role=button]:not(:first-child),
.pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
Added <label> compatibility to groups
2024-11-11 22:10:47 -05:00
.pico [role=group] select:not(:first-child),
Closes Legend element not styled in `role="group"` Yohn/PicoCSS#23 Added compatability with `.dropdown` to the `role=group` Put a dropdown submenu in the group examples Improved borders on `[role=group] > label, [role=group] > legend` to ensure the same size as other group elements
2024-12-31 00:16:26 -05:00
.pico [role=group] > label:not(:first-child),
.pico [role=group] > legend:not(:first-child),
.pico [role=group] > details > summary:not(:first-child) {
fix: build theme script
2024-01-28 20:28:27 +07:00
margin-left: calc(var(--pico-border-width) * -1);
}
.pico [role=search] button,
.pico [role=search] [type=submit],
.pico [role=search] [type=reset],
.pico [role=search] [type=button],
.pico [role=search] [role=button],
Closes Legend element not styled in `role="group"` Yohn/PicoCSS#23 Added compatability with `.dropdown` to the `role=group` Put a dropdown submenu in the group examples Improved borders on `[role=group] > label, [role=group] > legend` to ensure the same size as other group elements
2024-12-31 00:16:26 -05:00
.pico [role=search] > label,
.pico [role=search] > legend,
.pico [role=search] > details > summary,
fix: build theme script
2024-01-28 20:28:27 +07:00
.pico [role=group] button,
.pico [role=group] [type=submit],
.pico [role=group] [type=reset],
.pico [role=group] [type=button],
Added <label> compatibility to groups
2024-11-11 22:10:47 -05:00
.pico [role=group] [role=button],
Closes Legend element not styled in `role="group"` Yohn/PicoCSS#23 Added compatability with `.dropdown` to the `role=group` Put a dropdown submenu in the group examples Improved borders on `[role=group] > label, [role=group] > legend` to ensure the same size as other group elements
2024-12-31 00:16:26 -05:00
.pico [role=group] > label,
.pico [role=group] > legend,
.pico [role=group] > details > summary {
fix: build theme script
2024-01-28 20:28:27 +07:00
width: auto;
}
@supports selector(:has(*)) {
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus),
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) {
--pico-group-box-shadow: var(--pico-group-box-shadow-focus-with-button);
}
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select,
Closes Legend element not styled in `role="group"` Yohn/PicoCSS#23 Added compatability with `.dropdown` to the `role=group` Put a dropdown submenu in the group examples Improved borders on `[role=group] > label, [role=group] > legend` to ensure the same size as other group elements
2024-12-31 00:16:26 -05:00
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > label,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > legend,
.pico [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > details > summary,
fix: build theme script
2024-01-28 20:28:27 +07:00
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
Added <label> compatibility to groups
2024-11-11 22:10:47 -05:00
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select,
Closes Legend element not styled in `role="group"` Yohn/PicoCSS#23 Added compatability with `.dropdown` to the `role=group` Put a dropdown submenu in the group examples Improved borders on `[role=group] > label, [role=group] > legend` to ensure the same size as other group elements
2024-12-31 00:16:26 -05:00
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > label,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > legend,
.pico [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > details > summary {
fix: build theme script
2024-01-28 20:28:27 +07:00
border-color: transparent;
}
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus),
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) {
--pico-group-box-shadow: var(--pico-group-box-shadow-focus-with-input);
}
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) button,
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=submit],
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button],
Added <label> compatibility to groups
2024-11-11 22:10:47 -05:00
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) label,
Closes Legend element not styled in `role="group"` Yohn/PicoCSS#23 Added compatability with `.dropdown` to the `role=group` Put a dropdown submenu in the group examples Improved borders on `[role=group] > label, [role=group] > legend` to ensure the same size as other group elements
2024-12-31 00:16:26 -05:00
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) > legend,
.pico [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) > details > summary,
fix: build theme script
2024-01-28 20:28:27 +07:00
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) button,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=submit],
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
Added <label> compatibility to groups
2024-11-11 22:10:47 -05:00
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button],
Closes Legend element not styled in `role="group"` Yohn/PicoCSS#23 Added compatability with `.dropdown` to the `role=group` Put a dropdown submenu in the group examples Improved borders on `[role=group] > label, [role=group] > legend` to ensure the same size as other group elements
2024-12-31 00:16:26 -05:00
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) label,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) > legend,
.pico [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) > details > summary {
fix: build theme script
2024-01-28 20:28:27 +07:00
--pico-button-box-shadow: 0 0 0 var(--pico-border-width) var(--pico-primary-border);
--pico-button-hover-box-shadow: 0 0 0 var(--pico-border-width) var(--pico-primary-hover-border);
}
.pico [role=search] button:focus,
.pico [role=search] [type=submit]:focus,
.pico [role=search] [type=reset]:focus,
.pico [role=search] [type=button]:focus,
.pico [role=search] [role=button]:focus,
Added <label> compatibility to groups
2024-11-11 22:10:47 -05:00
.pico [role=search] label:focus,
Closes Legend element not styled in `role="group"` Yohn/PicoCSS#23 Added compatability with `.dropdown` to the `role=group` Put a dropdown submenu in the group examples Improved borders on `[role=group] > label, [role=group] > legend` to ensure the same size as other group elements
2024-12-31 00:16:26 -05:00
.pico [role=search] > legend:focus,
.pico [role=search] > details > summary:focus,
fix: build theme script
2024-01-28 20:28:27 +07:00
.pico [role=group] button:focus,
.pico [role=group] [type=submit]:focus,
.pico [role=group] [type=reset]:focus,
.pico [role=group] [type=button]:focus,
Added <label> compatibility to groups
2024-11-11 22:10:47 -05:00
.pico [role=group] [role=button]:focus,
Closes Legend element not styled in `role="group"` Yohn/PicoCSS#23 Added compatability with `.dropdown` to the `role=group` Put a dropdown submenu in the group examples Improved borders on `[role=group] > label, [role=group] > legend` to ensure the same size as other group elements
2024-12-31 00:16:26 -05:00
.pico [role=group] label:focus,
.pico [role=group] > legend:focus,
.pico [role=group] > details > summary:focus {
fix: build theme script
2024-01-28 20:28:27 +07:00
box-shadow: none;
}
}
.pico [role=search] > *:first-child {
border-top-left-radius: 5rem;
border-bottom-left-radius: 5rem;
}
.pico [role=search] > *:last-child {
border-top-right-radius: 5rem;
border-bottom-right-radius: 5rem;
}
Merged RTL pull request into css files, and updated docs for hamburger menu. Will create new versioning soon, I have something else I'd like to include.
2024-12-12 21:12:39 -05:00
[dir=rtl] .pico [role=search] > *:not(:first-child),
[dir=rtl] .pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
[dir=rtl] .pico [role=search] select:not(:first-child),
[dir=rtl] .pico [role=search] label:not(:first-child),
Closes Legend element not styled in `role="group"` Yohn/PicoCSS#23 Added compatability with `.dropdown` to the `role=group` Put a dropdown submenu in the group examples Improved borders on `[role=group] > label, [role=group] > legend` to ensure the same size as other group elements
2024-12-31 00:16:26 -05:00
[dir=rtl] .pico [role=search] > legend:not(:first-child),
[dir=rtl] .pico [role=search] > details > summary:not(:first-child),
Merged RTL pull request into css files, and updated docs for hamburger menu. Will create new versioning soon, I have something else I'd like to include.
2024-12-12 21:12:39 -05:00
[dir=rtl] .pico [role=group] > *:not(:first-child),
[dir=rtl] .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[dir=rtl] .pico [role=group] select:not(:first-child),
Closes Legend element not styled in `role="group"` Yohn/PicoCSS#23 Added compatability with `.dropdown` to the `role=group` Put a dropdown submenu in the group examples Improved borders on `[role=group] > label, [role=group] > legend` to ensure the same size as other group elements
2024-12-31 00:16:26 -05:00
[dir=rtl] .pico [role=group] label:not(:first-child),
[dir=rtl] .pico [role=group] > legend:not(:first-child),
[dir=rtl] .pico [role=group] > details > summary:not(:first-child) {
Merged RTL pull request into css files, and updated docs for hamburger menu. Will create new versioning soon, I have something else I'd like to include.
2024-12-12 21:12:39 -05:00
margin-right: 0;
margin-left: auto;
border-top-right-radius: 0;
border-top-left-radius: var(--pico-border-radius);
border-bottom-right-radius: 0;
border-bottom-left-radius: var(--pico-border-radius);
}
[dir=rtl] .pico [role=search] > *:not(:last-child),
[dir=rtl] .pico [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
[dir=rtl] .pico [role=search] select:not(:last-child),
[dir=rtl] .pico [role=search] label:not(:last-child),
Closes Legend element not styled in `role="group"` Yohn/PicoCSS#23 Added compatability with `.dropdown` to the `role=group` Put a dropdown submenu in the group examples Improved borders on `[role=group] > label, [role=group] > legend` to ensure the same size as other group elements
2024-12-31 00:16:26 -05:00
[dir=rtl] .pico [role=search] > legend:not(:last-child),
[dir=rtl] .pico [role=search] > details > summary:not(:last-child),
Merged RTL pull request into css files, and updated docs for hamburger menu. Will create new versioning soon, I have something else I'd like to include.
2024-12-12 21:12:39 -05:00
[dir=rtl] .pico [role=group] > *:not(:last-child),
[dir=rtl] .pico [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
[dir=rtl] .pico [role=group] select:not(:last-child),
Closes Legend element not styled in `role="group"` Yohn/PicoCSS#23 Added compatability with `.dropdown` to the `role=group` Put a dropdown submenu in the group examples Improved borders on `[role=group] > label, [role=group] > legend` to ensure the same size as other group elements
2024-12-31 00:16:26 -05:00
[dir=rtl] .pico [role=group] label:not(:last-child),
[dir=rtl] .pico [role=group] > legend:not(:last-child),
[dir=rtl] .pico [role=group] > details > summary:not(:last-child) {
Merged RTL pull request into css files, and updated docs for hamburger menu. Will create new versioning soon, I have something else I'd like to include.
2024-12-12 21:12:39 -05:00
border-top-right-radius: var(--pico-border-radius);
border-top-left-radius: 0;
border-bottom-right-radius: var(--pico-border-radius);
border-bottom-left-radius: 0;
}
Build CSS
2025-01-02 00:43:03 +00:00
[dir=rtl] .pico [role=search] button:not(:first-child),
[dir=rtl] .pico [role=search] [type=submit]:not(:first-child),
[dir=rtl] .pico [role=search] [type=reset]:not(:first-child),
[dir=rtl] .pico [role=search] [type=button]:not(:first-child),
[dir=rtl] .pico [role=search] [role=button]:not(:first-child),
[dir=rtl] .pico [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
[dir=rtl] .pico [role=search] select:not(:first-child),
[dir=rtl] .pico [role=search] label:not(:first-child),
[dir=rtl] .pico [role=search] > legend:not(:first-child),
[dir=rtl] .pico [role=search] > details > summary:not(:first-child),
[dir=rtl] .pico [role=group] button:not(:first-child),
[dir=rtl] .pico [role=group] [type=submit]:not(:first-child),
[dir=rtl] .pico [role=group] [type=reset]:not(:first-child),
[dir=rtl] .pico [role=group] [type=button]:not(:first-child),
[dir=rtl] .pico [role=group] [role=button]:not(:first-child),
[dir=rtl] .pico [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[dir=rtl] .pico [role=group] select:not(:first-child),
[dir=rtl] .pico [role=group] label:not(:first-child),
[dir=rtl] .pico [role=group] > legend:not(:first-child),
[dir=rtl] .pico [role=group] > details > summary:not(:first-child) {
Merged RTL pull request into css files, and updated docs for hamburger menu. Will create new versioning soon, I have something else I'd like to include.
2024-12-12 21:12:39 -05:00
margin-right: calc(var(--pico-border-width) * -1);
margin-left: auto;
}
Build CSS
2025-01-11 03:36:02 +00:00
.pico [role=group] > section[role=form] {
flex: 1;
}
.pico [role=group] > section[role=form] > *:focus,
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
.pico [role=group] > section[role=form] > select:focus,
.pico [role=group] > section[role=form] > label:focus,
.pico [role=group] > section[role=form] > legend:focus,
.pico [role=group] > section[role=form] > details:focus {
z-index: 4;
}
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
.pico [role=group] > section[role=form] > select:focus {
z-index: 10;
}
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]) + label,
.pico [role=group] > section[role=form] > select + label {
z-index: 10;
margin-top: 5px;
}
.pico [role=group] > section[role=form]:not(:first-child) > *,
.pico [role=group] > section[role=form]:not(:first-child) > input:not([type=checkbox], [type=radio]),
.pico [role=group] > section[role=form]:not(:first-child) > select,
.pico [role=group] > section[role=form]:not(:first-child) > label,
.pico [role=group] > section[role=form]:not(:first-child) > legend,
.pico [role=group] > section[role=form]:not(:first-child) > details > summary {
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.pico [role=group] > section[role=form]:not(:last-child) > *,
.pico [role=group] > section[role=form]:not(:last-child) > input:not([type=checkbox], [type=radio]),
.pico [role=group] > section[role=form]:not(:last-child) > select,
.pico [role=group] > section[role=form]:not(:last-child) > label,
.pico [role=group] > section[role=form]:not(:last-child) > legend,
.pico [role=group] > section[role=form]:not(:last-child) > details > summary {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
fix: build theme script
2024-01-28 20:28:27 +07:00
/**
* Loading ([aria-busy=true])
*/
surpressimg sass warnings
2024-11-10 11:27:44 -05:00
.pico [aria-busy=true]:not(input, select, textarea, html, form) {
fix: build theme script
2024-01-28 20:28:27 +07:00
white-space: nowrap;
}
surpressimg sass warnings
2024-11-10 11:27:44 -05:00
.pico [aria-busy=true]:not(input, select, textarea, html, form)::before {
fix: build theme script
2024-01-28 20:28:27 +07:00
display: inline-block;
width: 1em;
height: 1em;
background-image: var(--pico-icon-loading);
chore: build
2024-03-03 11:47:41 +07:00
background-size: 1em auto;
fix: build theme script
2024-01-28 20:28:27 +07:00
background-repeat: no-repeat;
content: "";
vertical-align: -0.125em;
}
surpressimg sass warnings
2024-11-10 11:27:44 -05:00
.pico [aria-busy=true]:not(input, select, textarea, html, form):not(:empty)::before {
fix: build theme script
2024-01-28 20:28:27 +07:00
margin-inline-end: calc(var(--pico-spacing) * 0.5);
}
surpressimg sass warnings
2024-11-10 11:27:44 -05:00
.pico [aria-busy=true]:not(input, select, textarea, html, form):empty {
fix: build theme script
2024-01-28 20:28:27 +07:00
text-align: center;
}
.pico button[aria-busy=true],
.pico [type=submit][aria-busy=true],
.pico [type=button][aria-busy=true],
.pico [type=reset][aria-busy=true],
.pico [role=button][aria-busy=true],
.pico a[aria-busy=true] {
pointer-events: none;
}
/**
* Modal (<dialog>)
*/
rebuilt css files, For some reason was having issues with the line endings, hopefully the editorconfig will fix it.
2024-12-03 14:27:56 -05:00
:root,
:host {
fix: build theme script
2024-01-28 20:28:27 +07:00
--pico-scrollbar-width: 0px;
}
.pico dialog {
surpressimg sass warnings
2024-11-10 11:27:44 -05:00
display: grid;
fix: build theme script
2024-01-28 20:28:27 +07:00
z-index: 999;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
align-items: center;
justify-content: center;
width: inherit;
min-width: 100%;
height: inherit;
min-height: 100%;
surpressimg sass warnings
2024-11-10 11:27:44 -05:00
padding: var(--pico-spacing);
fix: build theme script
2024-01-28 20:28:27 +07:00
border: 0;
-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
background-color: var(--pico-modal-overlay-background-color);
color: var(--pico-color);
surpressimg sass warnings
2024-11-10 11:27:44 -05:00
transform: scale(1);
transition: transform var(--pico-transition);
fix: build theme script
2024-01-28 20:28:27 +07:00
}
Cards keep style with form tag wrapped around header and footer in article
2024-12-15 11:51:19 -05:00
.pico dialog > article:not(:has(> form)),
.pico dialog > article > form {
fix: build theme script
2024-01-28 20:28:27 +07:00
width: 100%;
}
@media (min-width: 576px) {
Cards keep style with form tag wrapped around header and footer in article
2024-12-15 11:51:19 -05:00
.pico dialog > article:not(:has(> form)),
.pico dialog > article > form {
fix: build theme script
2024-01-28 20:28:27 +07:00
max-width: 510px;
}
}
@media (min-width: 768px) {
Cards keep style with form tag wrapped around header and footer in article
2024-12-15 11:51:19 -05:00
.pico dialog > article:not(:has(> form)),
.pico dialog > article > form {
fix: build theme script
2024-01-28 20:28:27 +07:00
max-width: 700px;
}
}
Cards keep style with form tag wrapped around header and footer in article
2024-12-15 11:51:19 -05:00
.pico dialog > article:not(:has(> form)) > header > *,
.pico dialog > article > form > header > * {
fix: build theme script
2024-01-28 20:28:27 +07:00
margin-bottom: 0;
}
Cards keep style with form tag wrapped around header and footer in article
2024-12-15 11:51:19 -05:00
.pico dialog > article:not(:has(> form)) > header .close, .pico dialog > article:not(:has(> form)) > header :is(a, button)[rel=prev],
.pico dialog > article > form > header .close,
.pico dialog > article > form > header :is(a, button)[rel=prev] {
fix: build theme script
2024-01-28 20:28:27 +07:00
margin: 0;
margin-left: var(--pico-spacing);
fix: modal close button
2024-02-17 10:51:18 +07:00
padding: 0;
fix: build theme script
2024-01-28 20:28:27 +07:00
float: right;
}
Cards keep style with form tag wrapped around header and footer in article
2024-12-15 11:51:19 -05:00
.pico dialog > article:not(:has(> form)) > footer,
.pico dialog > article > form > footer {
fix: build theme script
2024-01-28 20:28:27 +07:00
text-align: right;
}
Cards keep style with form tag wrapped around header and footer in article
2024-12-15 11:51:19 -05:00
.pico dialog > article:not(:has(> form)) > footer button,
.pico dialog > article:not(:has(> form)) > footer [role=button],
.pico dialog > article > form > footer button,
.pico dialog > article > form > footer [role=button] {
fix: build theme script
2024-01-28 20:28:27 +07:00
margin-bottom: 0;
}
Cards keep style with form tag wrapped around header and footer in article
2024-12-15 11:51:19 -05:00
.pico dialog > article:not(:has(> form)) > footer button:not(:first-of-type),
.pico dialog > article:not(:has(> form)) > footer [role=button]:not(:first-of-type),
.pico dialog > article > form > footer button:not(:first-of-type),
.pico dialog > article > form > footer [role=button]:not(:first-of-type) {
fix: build theme script
2024-01-28 20:28:27 +07:00
margin-left: calc(var(--pico-spacing) * 0.5);
}
Cards keep style with form tag wrapped around header and footer in article
2024-12-15 11:51:19 -05:00
.pico dialog > article:not(:has(> form)) .close, .pico dialog > article:not(:has(> form)) :is(a, button)[rel=prev],
.pico dialog > article > form .close,
.pico dialog > article > form :is(a, button)[rel=prev] {
fix: build theme script
2024-01-28 20:28:27 +07:00
display: block;
width: 1rem;
height: 1rem;
margin-top: calc(var(--pico-spacing) * -1);
margin-bottom: var(--pico-spacing);
margin-left: auto;
feat: modal Accept `button[rel=prev]` as modal closing item
2024-02-13 17:27:13 +01:00
border: none;
fix: build theme script
2024-01-28 20:28:27 +07:00
background-image: var(--pico-icon-close);
background-position: center;
background-size: auto 1rem;
background-repeat: no-repeat;
feat: modal Accept `button[rel=prev]` as modal closing item
2024-02-13 17:27:13 +01:00
background-color: transparent;
fix: build theme script
2024-01-28 20:28:27 +07:00
opacity: 0.5;
transition: opacity var(--pico-transition);
}
Cards keep style with form tag wrapped around header and footer in article
2024-12-15 11:51:19 -05:00
.pico dialog > article:not(:has(> form)) .close:is([aria-current]:not([aria-current=false]), :hover, :active, :focus), .pico dialog > article:not(:has(> form)) :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
.pico dialog > article > form .close:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
.pico dialog > article > form :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
fix: build theme script
2024-01-28 20:28:27 +07:00
opacity: 1;
}
.pico dialog:not([open]), .pico dialog[open=false] {
surpressimg sass warnings
2024-11-10 11:27:44 -05:00
visibility: hidden;
opacity: 0;
}
.pico dialog:not([open]) article, .pico dialog[open=false] article {
transform: scale(0.7);
fix: build theme script
2024-01-28 20:28:27 +07:00
}
.modal-is-open {
padding-right: var(--pico-scrollbar-width, 0px);
overflow: hidden;
pointer-events: none;
touch-action: none;
}
.modal-is-open dialog {
pointer-events: auto;
touch-action: auto;
}
Build CSS
2025-01-11 08:57:11 +00:00
dialog.modal-sm > article {
width: 90vw;
max-width: 400px;
}
dialog.modal-md > article {
width: 90vw;
max-width: 600px;
}
dialog.modal-lg > article {
width: 90vw;
max-width: 800px;
}
dialog.modal-xlg > article {
width: 95vw;
max-width: 1000px;
}
dialog.modal-fs {
padding: 0;
}
dialog.modal-fs > article {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100vw;
max-width: 100vw;
height: 100vh;
max-height: 100vh;
margin: 0;
overflow-y: auto;
}
dialog.modal-fs > article > footer {
display: flex;
justify-content: flex-end;
margin-top: auto;
}
@media (max-width: 576px) {
dialog:not(.modal-fs) > article {
width: 95vw;
}
}
surpressimg sass warnings
2024-11-10 11:27:44 -05:00
body:has(dialog[open]) {
overflow: hidden;
}
fix: build theme script
2024-01-28 20:28:27 +07:00
:where(.modal-is-opening, .modal-is-closing) dialog,
:where(.modal-is-opening, .modal-is-closing) dialog > article {
animation-duration: 0.2s;
animation-timing-function: ease-in-out;
animation-fill-mode: both;
}
:where(.modal-is-opening, .modal-is-closing) dialog {
animation-duration: 0.8s;
animation-name: modal-overlay;
}
:where(.modal-is-opening, .modal-is-closing) dialog > article {
animation-delay: 0.2s;
animation-name: modal;
}
.modal-is-closing dialog,
.modal-is-closing dialog > article {
animation-delay: 0s;
animation-direction: reverse;
}
@keyframes modal-overlay {
from {
-webkit-backdrop-filter: none;
backdrop-filter: none;
background-color: transparent;
}
}
@keyframes modal {
from {
transform: translateY(-100%);
opacity: 0;
}
}
/**
* Nav
*/
tweaks to safari bug with nav dropdowns
2024-12-13 20:12:54 -05:00
:where(nav li)::before {
float: none;
Final iOS 18.2 bug fix for [dir=rtl] dropdowns Added Azure to theme build list
2024-12-14 11:08:38 -05:00
content: " ";
tweaks to safari bug with nav dropdowns
2024-12-13 20:12:54 -05:00
}
fix: build theme script
2024-01-28 20:28:27 +07:00
.pico nav,
.pico nav ul {
display: flex;
}
.pico nav {
justify-content: space-between;
overflow: visible;
}
.pico nav ol,
.pico nav ul {
align-items: center;
margin-bottom: 0;
padding: 0;
list-style: none;
}
.pico nav ol:first-of-type,
.pico nav ul:first-of-type {
margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1);
}
.pico nav ol:last-of-type,
.pico nav ul:last-of-type {
margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1);
}
.pico nav li {
display: inline-block;
margin: 0;
padding: var(--pico-nav-element-spacing-vertical) var(--pico-nav-element-spacing-horizontal);
}
.pico nav li :where(a, [role=link]) {
display: inline-block;
margin: calc(var(--pico-nav-link-spacing-vertical) * -1) calc(var(--pico-nav-link-spacing-horizontal) * -1);
padding: var(--pico-nav-link-spacing-vertical) var(--pico-nav-link-spacing-horizontal);
border-radius: var(--pico-border-radius);
}
.pico nav li :where(a, [role=link]):not(:hover) {
text-decoration: none;
}
.pico nav li button,
.pico nav li [role=button],
chore: build
2024-03-03 17:25:50 +07:00
.pico nav li [type=button],
fix: build theme script
2024-01-28 20:28:27 +07:00
.pico nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]),
.pico nav li select {
height: auto;
margin-right: inherit;
margin-bottom: 0;
margin-left: inherit;
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
}
.pico nav[aria-label=breadcrumb] {
align-items: center;
justify-content: start;
}
.pico nav[aria-label=breadcrumb] ul li:not(:first-child) {
margin-inline-start: var(--pico-nav-link-spacing-horizontal);
}
.pico nav[aria-label=breadcrumb] ul li a {
margin: calc(var(--pico-nav-link-spacing-vertical) * -1) 0;
margin-inline-start: calc(var(--pico-nav-link-spacing-horizontal) * -1);
}
.pico nav[aria-label=breadcrumb] ul li:not(:last-child)::after {
display: inline-block;
position: absolute;
width: calc(var(--pico-nav-link-spacing-horizontal) * 4);
margin: 0 calc(var(--pico-nav-link-spacing-horizontal) * -1);
content: var(--pico-nav-breadcrumb-divider);
color: var(--pico-muted-color);
text-align: center;
text-decoration: none;
white-space: nowrap;
}
.pico nav[aria-label=breadcrumb] a[aria-current]:not([aria-current=false]) {
background-color: transparent;
color: inherit;
text-decoration: none;
pointer-events: none;
}
.pico aside nav,
.pico aside ol,
.pico aside ul,
.pico aside li {
display: block;
}
.pico aside li {
padding: calc(var(--pico-nav-element-spacing-vertical) * 0.5) var(--pico-nav-element-spacing-horizontal);
}
.pico aside li a {
display: block;
}
.pico aside li [role=button] {
margin: inherit;
}
[dir=rtl] .pico nav[aria-label=breadcrumb] ul li:not(:last-child) ::after {
content: "\\";
}
- 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
/**
* Nav hamburger menu
* modified from https: //codepen.io/brentarias/pen/gOQybod
*/
.pico nav[role=navigation] {
z-index: 1;
align-items: center;
width: 100%;
Added submenus to work with hamburger menu
2025-01-17 04:45:55 -05:00
overflow: visible;
- 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
}
.pico nav[role=navigation][data-position=start] {
/* remove the 'flex-direction' to move menu to the right */
flex-direction: row-reverse;
}
.pico nav[role=navigation] > input[type=checkbox] {
display: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.pico nav[role=navigation] > label {
display: none;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
@media (max-width: 510px) {
.pico nav[role=navigation] {
flex-wrap: wrap;
Added submenus to work with hamburger menu
2025-01-17 04:45:55 -05:00
overflow: hidden;
}
.pico nav[role=navigation]:has(input[type=checkbox]:checked) {
overflow: visible;
- 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
}
.pico nav[role=navigation] label {
display: block;
}
.pico nav[role=navigation] > [role=list] {
flex-direction: column;
align-items: flex-start;
width: 90vw;
max-height: 0;
margin: 0 auto;
background-color: var(--pico-muted-border-color);
box-shadow: var(--pico-box-shadow);
transition: max-height var(--pico-transition);
}
.pico nav[role=navigation] > [role=list] li {
width: calc(100% - var(--pico-nav-link-spacing-vertical) * 2);
margin: calc(var(--pico-nav-link-spacing-vertical) * 0.5) var(--pico-nav-link-spacing-vertical);
padding: 0;
}
.pico nav[role=navigation] > [role=list] a {
display: block;
margin: 0;
border-bottom: 1px solid transparent;
border-radius: 0;
transition: border-color var(--pico-transition), color var(--pico-transition);
}
.pico nav[role=navigation] > [role=list] a:hover {
border-bottom-color: var(--pico-underline);
text-decoration: none;
}
.pico nav[role=navigation] input[type=checkbox]:checked ~ [role=list] {
max-height: 100vh;
}
}
@media (max-width: 700px) {
.pico nav[role=navigation][data-breakpoint=md] {
flex-wrap: wrap;
Added submenus to work with hamburger menu
2025-01-17 04:45:55 -05:00
overflow: hidden;
}
.pico nav[role=navigation][data-breakpoint=md]:has(input[type=checkbox]:checked) {
overflow: visible;
- 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
}
.pico nav[role=navigation][data-breakpoint=md] label {
display: block;
}
.pico nav[role=navigation][data-breakpoint=md] > [role=list] {
flex-direction: column;
align-items: flex-start;
width: 90vw;
max-height: 0;
margin: 0 auto;
background-color: var(--pico-muted-border-color);
box-shadow: var(--pico-box-shadow);
transition: max-height var(--pico-transition);
}
.pico nav[role=navigation][data-breakpoint=md] > [role=list] li {
width: calc(100% - var(--pico-nav-link-spacing-vertical) * 2);
margin: calc(var(--pico-nav-link-spacing-vertical) * 0.5) var(--pico-nav-link-spacing-vertical);
padding: 0;
}
.pico nav[role=navigation][data-breakpoint=md] > [role=list] a {
display: block;
margin: 0;
border-bottom: 1px solid transparent;
border-radius: 0;
transition: border-color var(--pico-transition), color var(--pico-transition);
}
.pico nav[role=navigation][data-breakpoint=md] > [role=list] a:hover {
border-bottom-color: var(--pico-underline);
text-decoration: none;
}
.pico nav[role=navigation][data-breakpoint=md] input[type=checkbox]:checked ~ [role=list] {
max-height: 100vh;
}
}
@media (max-width: 950px) {
.pico nav[role=navigation][data-breakpoint=lg] {
flex-wrap: wrap;
Added submenus to work with hamburger menu
2025-01-17 04:45:55 -05:00
overflow: hidden;
}
.pico nav[role=navigation][data-breakpoint=lg]:has(input[type=checkbox]:checked) {
overflow: visible;
- 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
}
.pico nav[role=navigation][data-breakpoint=lg] label {
display: block;
}
.pico nav[role=navigation][data-breakpoint=lg] > [role=list] {
flex-direction: column;
align-items: flex-start;
width: 90vw;
max-height: 0;
margin: 0 auto;
background-color: var(--pico-muted-border-color);
box-shadow: var(--pico-box-shadow);
transition: max-height var(--pico-transition);
}
.pico nav[role=navigation][data-breakpoint=lg] > [role=list] li {
width: calc(100% - var(--pico-nav-link-spacing-vertical) * 2);
margin: calc(var(--pico-nav-link-spacing-vertical) * 0.5) var(--pico-nav-link-spacing-vertical);
padding: 0;
}
.pico nav[role=navigation][data-breakpoint=lg] > [role=list] a {
display: block;
margin: 0;
border-bottom: 1px solid transparent;
border-radius: 0;
transition: border-color var(--pico-transition), color var(--pico-transition);
}
.pico nav[role=navigation][data-breakpoint=lg] > [role=list] a:hover {
border-bottom-color: var(--pico-underline);
text-decoration: none;
}
.pico nav[role=navigation][data-breakpoint=lg] input[type=checkbox]:checked ~ [role=list] {
max-height: 100vh;
}
}
@media (max-width: 1200px) {
.pico nav[role=navigation][data-breakpoint=xl] {
flex-wrap: wrap;
Added submenus to work with hamburger menu
2025-01-17 04:45:55 -05:00
overflow: hidden;
}
.pico nav[role=navigation][data-breakpoint=xl]:has(input[type=checkbox]:checked) {
overflow: visible;
- 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
}
.pico nav[role=navigation][data-breakpoint=xl] label {
display: block;
}
.pico nav[role=navigation][data-breakpoint=xl] > [role=list] {
flex-direction: column;
align-items: flex-start;
width: 90vw;
max-height: 0;
margin: 0 auto;
background-color: var(--pico-muted-border-color);
box-shadow: var(--pico-box-shadow);
transition: max-height var(--pico-transition);
}
.pico nav[role=navigation][data-breakpoint=xl] > [role=list] li {
width: calc(100% - var(--pico-nav-link-spacing-vertical) * 2);
margin: calc(var(--pico-nav-link-spacing-vertical) * 0.5) var(--pico-nav-link-spacing-vertical);
padding: 0;
}
.pico nav[role=navigation][data-breakpoint=xl] > [role=list] a {
display: block;
margin: 0;
border-bottom: 1px solid transparent;
border-radius: 0;
transition: border-color var(--pico-transition), color var(--pico-transition);
}
.pico nav[role=navigation][data-breakpoint=xl] > [role=list] a:hover {
border-bottom-color: var(--pico-underline);
text-decoration: none;
}
.pico nav[role=navigation][data-breakpoint=xl] input[type=checkbox]:checked ~ [role=list] {
max-height: 100vh;
}
}
@media (max-width: 1450px) {
.pico nav[role=navigation][data-breakpoint=xxl] {
flex-wrap: wrap;
Added submenus to work with hamburger menu
2025-01-17 04:45:55 -05:00
overflow: hidden;
}
.pico nav[role=navigation][data-breakpoint=xxl]:has(input[type=checkbox]:checked) {
overflow: visible;
- 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
}
.pico nav[role=navigation][data-breakpoint=xxl] label {
display: block;
}
.pico nav[role=navigation][data-breakpoint=xxl] > [role=list] {
flex-direction: column;
align-items: flex-start;
width: 90vw;
max-height: 0;
margin: 0 auto;
background-color: var(--pico-muted-border-color);
box-shadow: var(--pico-box-shadow);
transition: max-height var(--pico-transition);
}
.pico nav[role=navigation][data-breakpoint=xxl] > [role=list] li {
width: calc(100% - var(--pico-nav-link-spacing-vertical) * 2);
margin: calc(var(--pico-nav-link-spacing-vertical) * 0.5) var(--pico-nav-link-spacing-vertical);
padding: 0;
}
.pico nav[role=navigation][data-breakpoint=xxl] > [role=list] a {
display: block;
margin: 0;
border-bottom: 1px solid transparent;
border-radius: 0;
transition: border-color var(--pico-transition), color var(--pico-transition);
}
.pico nav[role=navigation][data-breakpoint=xxl] > [role=list] a:hover {
border-bottom-color: var(--pico-underline);
text-decoration: none;
}
.pico nav[role=navigation][data-breakpoint=xxl] input[type=checkbox]:checked ~ [role=list] {
max-height: 100vh;
}
}
fix: build theme script
2024-01-28 20:28:27 +07:00
/**
* Progress
*/
.pico progress {
display: inline-block;
vertical-align: baseline;
}
.pico progress {
-webkit-appearance: none;
-moz-appearance: none;
display: inline-block;
appearance: none;
width: 100%;
height: 0.5rem;
margin-bottom: calc(var(--pico-spacing) * 0.5);
overflow: hidden;
border: 0;
border-radius: var(--pico-border-radius);
background-color: var(--pico-progress-background-color);
color: var(--pico-progress-color);
}
.pico progress::-webkit-progress-bar {
border-radius: var(--pico-border-radius);
background: none;
}
.pico progress[value]::-webkit-progress-value {
background-color: var(--pico-progress-color);
-webkit-transition: inline-size var(--pico-transition);
transition: inline-size var(--pico-transition);
}
.pico progress::-moz-progress-bar {
background-color: var(--pico-progress-color);
}
@media (prefers-reduced-motion: no-preference) {
.pico progress:indeterminate {
background: var(--pico-progress-background-color) linear-gradient(to right, var(--pico-progress-color) 30%, var(--pico-progress-background-color) 30%) top left/150% 150% no-repeat;
animation: progress-indeterminate 1s linear infinite;
}
.pico progress:indeterminate[value]::-webkit-progress-value {
background-color: transparent;
}
.pico progress:indeterminate::-moz-progress-bar {
background-color: transparent;
}
}
@media (prefers-reduced-motion: no-preference) {
[dir=rtl] .pico progress:indeterminate {
animation-direction: reverse;
}
}
@keyframes progress-indeterminate {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
/**
* Tooltip ([data-tooltip])
*/
.pico [data-tooltip] {
position: relative;
}
Enabled multiline tooltips, and disabled dotted lines for tooltips when child elements contain links of form elements.
2024-11-30 18:00:11 -05:00
.pico [data-tooltip]:not(:has(a, button, input, [role=button])):not(a, button, input, [role=button]) {
fix: build theme script
2024-01-28 20:28:27 +07:00
border-bottom: 1px dotted;
text-decoration: none;
cursor: help;
}
.pico [data-tooltip][data-placement=top]::before, .pico [data-tooltip][data-placement=top]::after, .pico [data-tooltip]::before, .pico [data-tooltip]::after {
Enabled multiline tooltips, and disabled dotted lines for tooltips when child elements contain links of form elements.
2024-11-30 18:00:11 -05:00
display: inline-block;
fix: build theme script
2024-01-28 20:28:27 +07:00
z-index: 99;
position: absolute;
bottom: 100%;
left: 50%;
enhanced the tooltip to have a width of `max-content` and a max width of 250px. This will allow for the tooltips to not always be 250px wide even when the tooltip is short. Added the ghost buttons from discussion #29
2025-01-13 21:02:05 -05:00
width: -moz-max-content;
width: max-content;
- 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
max-width: 250px;
fix: build theme script
2024-01-28 20:28:27 +07:00
padding: 0.25rem 0.5rem;
overflow: hidden;
transform: translate(-50%, -0.25rem);
border-radius: var(--pico-border-radius);
background: var(--pico-tooltip-background-color);
content: attr(data-tooltip);
color: var(--pico-tooltip-color);
font-style: normal;
font-weight: var(--pico-font-weight);
font-size: 0.875rem;
- 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
text-align: center;
fix: build theme script
2024-01-28 20:28:27 +07:00
text-decoration: none;
text-overflow: ellipsis;
- 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
white-space: normal;
fix: build theme script
2024-01-28 20:28:27 +07:00
opacity: 0;
pointer-events: none;
}
.pico [data-tooltip][data-placement=top]::after, .pico [data-tooltip]::after {
Build CSS
2025-01-11 08:04:41 +00:00
width: 0;
fix: build theme script
2024-01-28 20:28:27 +07:00
padding: 0;
transform: translate(-50%, 0rem);
border-top: 0.3rem solid;
border-right: 0.3rem solid transparent;
border-left: 0.3rem solid transparent;
border-radius: 0;
background-color: transparent;
content: "";
color: var(--pico-tooltip-background-color);
}
.pico [data-tooltip][data-placement=bottom]::before, .pico [data-tooltip][data-placement=bottom]::after {
top: 100%;
bottom: auto;
transform: translate(-50%, 0.25rem);
}
.pico [data-tooltip][data-placement=bottom]:after {
transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent;
border-bottom: 0.3rem solid;
}
.pico [data-tooltip][data-placement=left]::before, .pico [data-tooltip][data-placement=left]::after {
top: 50%;
right: 100%;
bottom: auto;
left: auto;
transform: translate(-0.25rem, -50%);
}
.pico [data-tooltip][data-placement=left]:after {
transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent;
border-left: 0.3rem solid;
}
.pico [data-tooltip][data-placement=right]::before, .pico [data-tooltip][data-placement=right]::after {
top: 50%;
right: auto;
bottom: auto;
left: 100%;
transform: translate(0.25rem, -50%);
}
.pico [data-tooltip][data-placement=right]:after {
transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent;
border-right: 0.3rem solid;
}
.pico [data-tooltip]:focus::before, .pico [data-tooltip]:focus::after, .pico [data-tooltip]:hover::before, .pico [data-tooltip]:hover::after {
opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
.pico [data-tooltip]:focus::before, .pico [data-tooltip]:focus::after, .pico [data-tooltip]:hover::before, .pico [data-tooltip]:hover::after {
--pico-tooltip-slide-to: translate(-50%, -0.25rem);
transform: translate(-50%, 0.75rem);
animation-duration: 0.2s;
animation-fill-mode: forwards;
animation-name: tooltip-slide;
opacity: 0;
}
.pico [data-tooltip]:focus::after, .pico [data-tooltip]:hover::after {
--pico-tooltip-caret-slide-to: translate(-50%, 0rem);
transform: translate(-50%, -0.25rem);
animation-name: tooltip-caret-slide;
}
.pico [data-tooltip][data-placement=bottom]:focus::before, .pico [data-tooltip][data-placement=bottom]:focus::after, .pico [data-tooltip][data-placement=bottom]:hover::before, .pico [data-tooltip][data-placement=bottom]:hover::after {
--pico-tooltip-slide-to: translate(-50%, 0.25rem);
transform: translate(-50%, -0.75rem);
animation-name: tooltip-slide;
}
.pico [data-tooltip][data-placement=bottom]:focus::after, .pico [data-tooltip][data-placement=bottom]:hover::after {
--pico-tooltip-caret-slide-to: translate(-50%, -0.3rem);
transform: translate(-50%, -0.5rem);
animation-name: tooltip-caret-slide;
}
.pico [data-tooltip][data-placement=left]:focus::before, .pico [data-tooltip][data-placement=left]:focus::after, .pico [data-tooltip][data-placement=left]:hover::before, .pico [data-tooltip][data-placement=left]:hover::after {
--pico-tooltip-slide-to: translate(-0.25rem, -50%);
transform: translate(0.75rem, -50%);
animation-name: tooltip-slide;
}
.pico [data-tooltip][data-placement=left]:focus::after, .pico [data-tooltip][data-placement=left]:hover::after {
--pico-tooltip-caret-slide-to: translate(0.3rem, -50%);
transform: translate(0.05rem, -50%);
animation-name: tooltip-caret-slide;
}
.pico [data-tooltip][data-placement=right]:focus::before, .pico [data-tooltip][data-placement=right]:focus::after, .pico [data-tooltip][data-placement=right]:hover::before, .pico [data-tooltip][data-placement=right]:hover::after {
--pico-tooltip-slide-to: translate(0.25rem, -50%);
transform: translate(-0.75rem, -50%);
animation-name: tooltip-slide;
}
.pico [data-tooltip][data-placement=right]:focus::after, .pico [data-tooltip][data-placement=right]:hover::after {
--pico-tooltip-caret-slide-to: translate(-0.3rem, -50%);
transform: translate(-0.05rem, -50%);
animation-name: tooltip-caret-slide;
}
}
@keyframes tooltip-slide {
to {
transform: var(--pico-tooltip-slide-to);
opacity: 1;
}
}
@keyframes tooltip-caret-slide {
50% {
opacity: 0;
}
to {
transform: var(--pico-tooltip-caret-slide-to);
opacity: 1;
}
}
- 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
/**
Version 2.2.1
2024-12-21 05:48:33 -05:00
* Tabs
* styling help from: https://codepen.io/mikestreety/pen/yVNNNm
- 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
*/
Version 2.2.1
2024-12-21 05:48:33 -05:00
@keyframes showTab {
from {
scale: 0.75;
opacity: 0;
}
to {
scale: 1;
opacity: 1;
}
}
.pico [role=tablist] {
- 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
display: flex;
flex-wrap: wrap;
padding-bottom: 0;
}
Build CSS
2025-01-14 22:25:02 +00:00
.pico [role=tablist] > button[role=tab] {
- 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
flex-grow: 1;
Version 2.2.1
2024-12-21 05:48:33 -05:00
order: 1;
padding: calc(var(--pico-spacing) * 0.625);
border: 0;
border-bottom: 1px solid var(--pico-primary-background);
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
background: transparent;
color: var(--pico-contrast);
font-weight: bold;
cursor: pointer;
transition: background-color var(--pico-transition);
- 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
}
Build CSS
2025-01-14 22:25:02 +00:00
.pico [role=tablist] > button[role=tab][aria-selected=true] {
Version 2.2.1
2024-12-21 05:48:33 -05:00
background: var(--pico-primary-background);
color: var(--pico-primary-inverse);
- 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
}
Build CSS
2025-01-14 22:25:02 +00:00
.pico [role=tablist] > button[role=tab]:hover {
Version 2.2.1
2024-12-21 05:48:33 -05:00
background: var(--pico-primary-hover-background);
color: var(--pico-primary-inverse);
- 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
}
Version 2.2.1
2024-12-21 05:48:33 -05:00
.pico [role=tablist] [role=tabpanel] {
flex-grow: 1;
order: 99;
width: 100%;
padding: var(--pico-spacing) calc(var(--pico-spacing) * 0.75);
background: var(--pico-accent-section-bg-color);
animation: var(--pico-tab-animation) var(--pico-transition);
- 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
}
Version 2.2.1
2024-12-21 05:48:33 -05:00
.pico [role=tablist] [role=tabpanel]:not([hidden]) {
display: block;
- 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
}
Version 2.2.1
2024-12-21 05:48:33 -05:00
.pico [role=tablist] [role=tabpanel][hidden] {
display: none;
- 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
}
Version 2.2.1
2024-12-21 05:48:33 -05:00
.pico [role=tablist] [role=tabpanel] > *:last-of-type {
margin-bottom: 0;
- 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
}
Version 2.2.1
2024-12-21 05:48:33 -05:00
@media (max-width: 45em) {
.pico [role=tablist] [role=tabpanel],
.pico [role=tablist] button,
.pico [role=tablist] label {
order: initial;
}
.pico [role=tablist] label,
.pico [role=tablist] [role=tabpanel],
.pico [role=tablist] button {
width: 100%;
margin-top: 0.2rem;
margin-right: 0;
}
}
RTL Dropdown Nav corrected thanks to @64bitint Added popovers to possibly replace the notifications. Started adding popover toasts
2024-12-13 19:43:12 -05:00
.pico [popover] {
border-color: var(--pico-primary);
}
.pico [popover]:popover-open {
margin: auto auto;
}
.pico [popover]::backdrop {
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
background: rgba(0, 0, 0, 0.7);
}
.pico [popover] button {
margin-top: -10px;
padding: 0;
border: 0 none;
background: transparent;
color: var(--pico-primary);
font-size: 1.5em;
opacity: 0.8;
}
Added a Timeline feature, removed the margin-bottom from `article > header > h[1-6]` And added the border-color for dark theme on the article > header
2024-11-12 04:59:34 -05:00
.pico .timeline {
position: relative;
max-width: 100%;
margin: 0 auto;
}
.pico .timeline::after {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 6px;
margin-left: -3px;
background-color: var(--pico-timeline-line-color);
content: "";
}
.pico .timeline > .point {
position: relative;
width: 50%;
padding: 10px 25px;
background-color: inherit;
}
.pico .timeline > .point::after {
z-index: 1;
position: absolute;
top: 13px;
right: -13px;
width: 25px;
height: 25px;
border: 4px solid var(--pico-timeline-dot-border-color);
border-radius: 50%;
background-color: var(--pico-timeline-dot-background-color);
content: "";
}
.pico .timeline > .point.left {
left: 0;
}
.pico .timeline > .point.left::before {
z-index: 1;
position: absolute;
top: 15px;
right: 15px;
width: 0;
height: 0;
border: medium solid var(--pico-timeline-arrow-color);
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent var(--pico-timeline-arrow-color);
content: " ";
}
.pico .timeline > .point.right {
left: 50%;
}
.pico .timeline > .point.right::before {
z-index: 1;
position: absolute;
top: 15px;
left: 15px;
width: 0;
height: 0;
border: medium solid var(--pico-timeline-arrow-color);
border-width: 10px 10px 10px 0;
border-color: transparent var(--pico-timeline-arrow-color) transparent transparent;
content: " ";
}
.pico .timeline > .point.right::after {
left: -13px;
}
@media screen and (max-width: 600px) {
.pico .timeline::after {
left: 13px;
}
.pico .timeline > .point {
width: 100%;
padding-right: 25px;
padding-left: 40px;
}
.pico .timeline > .point.right {
left: 0;
}
.pico .timeline > .point::after, .pico .timeline > .point.left::after, .pico .timeline > .point.right::after {
left: 0;
}
.pico .timeline > .point.left::before, .pico .timeline > .point.right::before {
top: 16px;
left: 30px;
border-width: 10px 10px 10px 0;
border-color: transparent var(--pico-timeline-arrow-color) transparent transparent;
}
}
fix: build theme script
2024-01-28 20:28:27 +07:00
/**
* Accessibility & User interaction
*/
.pico [aria-controls] {
cursor: pointer;
}
.pico [aria-disabled=true],
.pico [disabled] {
cursor: not-allowed;
}
.pico [aria-hidden=false][hidden] {
display: initial;
}
.pico [aria-hidden=false][hidden]:not(:focus) {
clip: rect(0, 0, 0, 0);
position: absolute;
}
.pico a,
.pico area,
.pico button,
.pico input,
.pico label,
.pico select,
.pico summary,
.pico textarea,
.pico [tabindex] {
-ms-touch-action: manipulation;
}
.pico [dir=rtl] {
direction: rtl;
}
/**
* Reduce Motion Features
*/
@media (prefers-reduced-motion: reduce) {
.pico *:not([aria-busy=true]),
.pico :not([aria-busy=true])::before,
.pico :not([aria-busy=true])::after {
background-attachment: initial !important;
animation-duration: 1ms !important;
animation-delay: -1ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-delay: 0s !important;
transition-duration: 0s !important;
}
}
Reference in a new issue Copy permalink