mirror of
https://github.com/picocss/pico.git
synced 2025-04-24 18:26:14 -04:00
Merge branch 'dev' of https://github.com/picocss/pico into dev
This commit is contained in:
KiranMantha
commit
30ff7bc212
39 changed files with 1631 additions and 4738 deletions
|
|
@ -12,7 +12,6 @@ details {
|
|||
color: var(--accordion-close-summary-color);
|
||||
line-height: 1rem;
|
||||
list-style-type: none;
|
||||
list-style-type: none;
|
||||
cursor: pointer;
|
||||
|
||||
@if $enable-transitions {
|
||||
|
|
|
|||
|
|
@ -26,6 +26,9 @@ dialog {
|
|||
|
||||
// Content
|
||||
article {
|
||||
max-height: calc(100vh - var(--spacing) * 2);
|
||||
overflow: auto;
|
||||
|
||||
@if map-get($breakpoints, 'sm') {
|
||||
@media (min-width: map-get($breakpoints, 'sm')) {
|
||||
max-width: map-get($viewports, 'sm');
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ button {
|
|||
margin-bottom: var(--spacing);
|
||||
}
|
||||
|
||||
a[role="button"] {
|
||||
[role="button"] {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
@ -52,7 +52,7 @@ button,
|
|||
input[type="submit"],
|
||||
input[type="button"],
|
||||
input[type="reset"],
|
||||
a[role="button"] {
|
||||
[role="button"] {
|
||||
--background-color: var(--primary);
|
||||
--border-color: var(--primary);
|
||||
--color: var(--primary-inverse);
|
||||
|
|
@ -83,6 +83,7 @@ a[role="button"] {
|
|||
--background-color: var(--primary-hover);
|
||||
--border-color: var(--primary-hover);
|
||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
|
||||
--color: var(--primary-inverse);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
|
|
@ -91,116 +92,136 @@ a[role="button"] {
|
|||
}
|
||||
}
|
||||
|
||||
// Secondary button without .class
|
||||
input[type="reset"] {
|
||||
--background-color: var(--secondary);
|
||||
--border-color: var(--secondary);
|
||||
--color: var(--secondary-inverse);
|
||||
cursor: pointer;
|
||||
// .secondary, .contrast & .outline
|
||||
@if $enable-classes {
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
--background-color: var(--secondary-hover);
|
||||
--border-color: var(--secondary-hover);
|
||||
// Secondary
|
||||
button.secondary,
|
||||
input[type="submit"].secondary,
|
||||
input[type="button"].secondary,
|
||||
input[type="reset"],
|
||||
[role="button"].secondary {
|
||||
--background-color: var(--secondary);
|
||||
--border-color: var(--secondary);
|
||||
--color: var(--secondary-inverse);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
--background-color: var(--secondary-hover);
|
||||
--border-color: var(--secondary-hover);
|
||||
--color: var(--secondary-inverse);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
||||
0 0 0 var(--outline-width) var(--secondary-focus);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
||||
0 0 0 var(--outline-width) var(--secondary-focus);
|
||||
// Contrast
|
||||
button.contrast,
|
||||
input[type="submit"].contrast,
|
||||
input[type="button"].contrast,
|
||||
input[type="reset"].contrast,
|
||||
[role="button"].contrast {
|
||||
--background-color: var(--contrast);
|
||||
--border-color: var(--contrast);
|
||||
--color: var(--contrast-inverse);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
--background-color: var(--contrast-hover);
|
||||
--border-color: var(--contrast-hover);
|
||||
--color: var(--contrast-inverse);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
||||
0 0 0 var(--outline-width) var(--contrast-focus);
|
||||
}
|
||||
}
|
||||
|
||||
// Outline (primary)
|
||||
button.outline,
|
||||
input[type="submit"].outline,
|
||||
input[type="button"].outline,
|
||||
input[type="reset"].outline,
|
||||
[role="button"].outline {
|
||||
--background-color: transparent;
|
||||
--color: var(--primary);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
--background-color: transparent;
|
||||
--color: var(--primary-hover);
|
||||
}
|
||||
}
|
||||
|
||||
// Outline (secondary)
|
||||
button.outline.secondary,
|
||||
input[type="submit"].outline.secondary,
|
||||
input[type="button"].outline.secondary,
|
||||
input[type="reset"].outline.secondary,
|
||||
[role="button"].outline.secondary {
|
||||
--color: var(--secondary);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
--color: var(--secondary-hover);
|
||||
}
|
||||
}
|
||||
|
||||
// Outline (contrast)
|
||||
button.outline.contrast,
|
||||
input[type="submit"].outline.contrast,
|
||||
input[type="button"].outline.contrast,
|
||||
input[type="reset"].outline.contrast,
|
||||
[role="button"].outline.contrast {
|
||||
--color: var(--contrast);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
--color: var(--contrast-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// .secondary, .contrast & .outline
|
||||
@if $enable-classes {
|
||||
button,
|
||||
input[type="submit"],
|
||||
input[type="button"],
|
||||
input[type="reset"],
|
||||
a[role="button"] {
|
||||
// Secondary
|
||||
&.secondary {
|
||||
--background-color: var(--secondary);
|
||||
--border-color: var(--secondary);
|
||||
--color: var(--secondary-inverse);
|
||||
cursor: pointer;
|
||||
@else {
|
||||
// Secondary button without .class
|
||||
input[type="reset"] {
|
||||
--background-color: var(--secondary);
|
||||
--border-color: var(--secondary);
|
||||
--color: var(--secondary-inverse);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
--background-color: var(--secondary-hover);
|
||||
--border-color: var(--secondary-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
||||
0 0 0 var(--outline-width) var(--secondary-focus);
|
||||
}
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
--background-color: var(--secondary-hover);
|
||||
--border-color: var(--secondary-hover);
|
||||
}
|
||||
|
||||
// Contrast
|
||||
&.contrast {
|
||||
--background-color: var(--contrast);
|
||||
--border-color: var(--contrast);
|
||||
--color: var(--contrast-inverse);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
--background-color: var(--contrast-hover);
|
||||
--border-color: var(--contrast-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
||||
0 0 0 var(--outline-width) var(--contrast-focus);
|
||||
}
|
||||
}
|
||||
|
||||
// Outline (primary)
|
||||
&.outline {
|
||||
--background-color: transparent;
|
||||
--color: var(--primary);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
--background-color: transparent;
|
||||
--color: var(--primary-hover);
|
||||
}
|
||||
}
|
||||
|
||||
// Outline (secondary)
|
||||
&.outline.secondary {
|
||||
--color: var(--secondary);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
--color: var(--secondary-hover);
|
||||
}
|
||||
}
|
||||
|
||||
// Outline (contrast)
|
||||
&.outline.contrast {
|
||||
--color: var(--contrast);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
--color: var(--contrast-hover);
|
||||
}
|
||||
&:focus {
|
||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
||||
0 0 0 var(--outline-width) var(--secondary-focus);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Button [disabled]
|
||||
// 1. Links without href are disabled by default
|
||||
button[disabled],
|
||||
input[type="submit"][disabled],
|
||||
input[type="button"][disabled],
|
||||
input[type="reset"][disabled],
|
||||
a[role="button"]:not([href]),
|
||||
a[role="button"][disabled] {
|
||||
a[role="button"]:not([href]), // 1
|
||||
[role="button"][disabled] {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
|
@ -34,25 +34,49 @@
|
|||
}
|
||||
|
||||
// Date & Time
|
||||
:not([dir="rtl"]) {
|
||||
// :not() are needed to add Specificity and avoid !important on padding
|
||||
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]) {
|
||||
&[type="date"],
|
||||
&[type="datetime-local"],
|
||||
&[type="month"],
|
||||
&[type="time"],
|
||||
&[type="week"] {
|
||||
--icon-position: 0.75rem;
|
||||
--icon-width: 1rem;
|
||||
padding-right: calc(var(--icon-width) + var(--icon-position));
|
||||
background-image: var(--icon-date);
|
||||
background-position: center right var(--icon-position);
|
||||
background-size: var(--icon-width) auto;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
// Time
|
||||
&[type="time"] {
|
||||
background-image: var(--icon-time);
|
||||
}
|
||||
}
|
||||
|
||||
// Calendar picker
|
||||
[type="date"],
|
||||
[type="datetime-local"],
|
||||
[type="month"],
|
||||
[type="time"],
|
||||
[type="week"] {
|
||||
&::-webkit-calendar-picker-indicator {
|
||||
width: var(--icon-width);
|
||||
margin-right: calc(var(--icon-width) * -1);
|
||||
margin-left: var(--icon-position);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
[dir="rtl"] {
|
||||
[type="date"],
|
||||
[type="datetime-local"],
|
||||
[type="month"],
|
||||
[type="time"],
|
||||
[type="week"] {
|
||||
background-image: var(--icon-date);
|
||||
background-position: center right 0.75rem;
|
||||
background-size: 1rem auto;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
&::-webkit-calendar-picker-indicator {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Time
|
||||
[type="time"] {
|
||||
background-image: var(--icon-time);
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -213,20 +237,20 @@
|
|||
}
|
||||
|
||||
// Search
|
||||
[type="search"] {
|
||||
border-radius: 5rem;
|
||||
|
||||
@if $enable-important {
|
||||
padding-left: calc(
|
||||
var(--form-element-spacing-horizontal) + 1.75rem
|
||||
) !important;
|
||||
// :not() are needed to add Specificity and avoid !important on padding
|
||||
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]) {
|
||||
&[type="search"] {
|
||||
padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem);
|
||||
border-radius: 5rem;
|
||||
background-image: var(--icon-search);
|
||||
background-position: center left 1.125rem;
|
||||
background-size: 1rem auto;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
// Cancel button
|
||||
// Cancel button
|
||||
[type="search"] {
|
||||
&::-webkit-search-cancel-button {
|
||||
-webkit-appearance: none;
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -114,10 +114,8 @@
|
|||
background-image: none;
|
||||
|
||||
&::before {
|
||||
margin-right: 0;
|
||||
margin-left: calc(#{$switch-width * 0.5} - var(--border-width));
|
||||
margin-inline-start: calc(#{$switch-width * 0.5} - var(--border-width));
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,16 +33,20 @@ td {
|
|||
text-align: start;
|
||||
}
|
||||
|
||||
// Rows
|
||||
tr {
|
||||
background-color: var(--background-color);
|
||||
// Footer
|
||||
tfoot {
|
||||
th,
|
||||
td {
|
||||
border-top: var(--border-width) solid var(--table-border-color);
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Striped
|
||||
table {
|
||||
&[role="grid"] {
|
||||
tbody tr:nth-child(odd) {
|
||||
--background-color: var(--table-row-stripped-background-color);
|
||||
background-color: var(--table-row-stripped-background-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/*!
|
||||
* Pico.css v1.4.2 (https://picocss.com)
|
||||
* Pico.css v1.4.4 (https://picocss.com)
|
||||
* Copyright 2019-2021 - Licensed under MIT
|
||||
*/
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/*!
|
||||
* Pico.css v1.4.2 (https://picocss.com)
|
||||
* Pico.css v1.4.4 (https://picocss.com)
|
||||
* Copyright 2019-2021 - Licensed under MIT
|
||||
*
|
||||
* Slim version example
|
||||
|
|
|
|||
|
|
@ -211,14 +211,15 @@ h5 {
|
|||
}
|
||||
|
||||
// Table
|
||||
thead {
|
||||
thead,
|
||||
tfoot {
|
||||
th,
|
||||
td {
|
||||
--border-width: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
:not(thead) > * > td {
|
||||
:not(thead):not(tfoot) > * > td {
|
||||
--font-size: 0.875em;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue