mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-23 01:46:14 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge branch 'dev' into feat-modal

Browse source
This commit is contained in:
Lucas Larroche 2021-10-31 08:50:55 +07:00
commit 41ef519d32
35 changed files with 2121 additions and 2262 deletions
Download patch file Download diff file Expand all files Collapse all files

40
css/pico.classless.css
View file

@ -1,5 +1,5 @@
/*!
* Pico.css v1.4.0 (https://picocss.com)
* Pico.css v1.4.1 (https://picocss.com)
* Copyright 2019-2021 - Licensed under MIT
*/
/**
@ -1069,7 +1069,7 @@ textarea {
}
input:not([type=checkbox]):not([type=radio]):not([type=range]) {
height: calc( (1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) + (var(--border-width) * 2) );
height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
}
fieldset {
@ -1148,9 +1148,9 @@ textarea[disabled] {
opacity: var(--form-element-disabled-opacity);
}
input[aria-invalid],
select[aria-invalid],
textarea[aria-invalid] {
input:not([type=checkbox]):not([type=radio])[aria-invalid],
select:not([type=checkbox]):not([type=radio])[aria-invalid],
textarea:not([type=checkbox]):not([type=radio])[aria-invalid] {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
padding-left: var(--form-element-spacing-horizontal);
-webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
@ -1161,11 +1161,20 @@ textarea[aria-invalid] {
background-repeat: no-repeat;
background-size: 1rem auto;
}
input:not([type=checkbox]):not([type=radio])[aria-invalid=false],
select:not([type=checkbox]):not([type=radio])[aria-invalid=false],
textarea:not([type=checkbox]):not([type=radio])[aria-invalid=false] {
background-image: var(--icon-valid);
}
input:not([type=checkbox]):not([type=radio])[aria-invalid=true],
select:not([type=checkbox]):not([type=radio])[aria-invalid=true],
textarea:not([type=checkbox]):not([type=radio])[aria-invalid=true] {
background-image: var(--icon-invalid);
}
input[aria-invalid=false],
select[aria-invalid=false],
textarea[aria-invalid=false] {
--border-color: var(--form-element-valid-border-color);
background-image: var(--icon-valid);
}
input[aria-invalid=false]:active, input[aria-invalid=false]:focus,
select[aria-invalid=false]:active,
@ -1180,7 +1189,6 @@ input[aria-invalid=true],
select[aria-invalid=true],
textarea[aria-invalid=true] {
--border-color: var(--form-element-invalid-border-color);
background-image: var(--icon-invalid);
}
input[aria-invalid=true]:active, input[aria-invalid=true]:focus,
select[aria-invalid=true]:active,
@ -1350,6 +1358,22 @@ label > input, label > select, label > textarea {
-webkit-margin-start: calc(1.125em - var(--border-width));
margin-inline-start: calc(1.125em - var(--border-width));
}
[type=checkbox][role=switch][aria-invalid=false] {
--border-color: var(--form-element-valid-border-color);
}
[type=checkbox][role=switch][aria-invalid=false]:active, [type=checkbox][role=switch][aria-invalid=false]:focus {
--border-color: var(
--form-element-valid-active-border-color
) !important;
}
[type=checkbox][role=switch][aria-invalid=true] {
--border-color: var(--form-element-invalid-border-color);
}
[type=checkbox][role=switch][aria-invalid=true]:active, [type=checkbox][role=switch][aria-invalid=true]:focus {
--border-color: var(
--form-element-invalid-active-border-color
) !important;
}
/**
* Form elements
@ -2210,3 +2234,5 @@ textarea,
transition-duration: 0s !important;
}
}
/*# sourceMappingURL=pico.classless.css.map */

1
css/pico.classless.css.map Normal file
View file

File diff suppressed because one or more lines are too long

5
css/pico.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

1
css/pico.classless.min.css.map Normal file
View file

File diff suppressed because one or more lines are too long

40
css/pico.css
View file

@ -1,5 +1,5 @@
/*!
* Pico.css v1.4.0 (https://picocss.com)
* Pico.css v1.4.1 (https://picocss.com)
* Copyright 2019-2021 - Licensed under MIT
*/
/**
@ -1248,7 +1248,7 @@ textarea {
}
input:not([type=checkbox]):not([type=radio]):not([type=range]) {
height: calc( (1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) + (var(--border-width) * 2) );
height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
}
fieldset {
@ -1327,9 +1327,9 @@ textarea[disabled] {
opacity: var(--form-element-disabled-opacity);
}
input[aria-invalid],
select[aria-invalid],
textarea[aria-invalid] {
input:not([type=checkbox]):not([type=radio])[aria-invalid],
select:not([type=checkbox]):not([type=radio])[aria-invalid],
textarea:not([type=checkbox]):not([type=radio])[aria-invalid] {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
padding-left: var(--form-element-spacing-horizontal);
-webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
@ -1340,11 +1340,20 @@ textarea[aria-invalid] {
background-repeat: no-repeat;
background-size: 1rem auto;
}
input:not([type=checkbox]):not([type=radio])[aria-invalid=false],
select:not([type=checkbox]):not([type=radio])[aria-invalid=false],
textarea:not([type=checkbox]):not([type=radio])[aria-invalid=false] {
background-image: var(--icon-valid);
}
input:not([type=checkbox]):not([type=radio])[aria-invalid=true],
select:not([type=checkbox]):not([type=radio])[aria-invalid=true],
textarea:not([type=checkbox]):not([type=radio])[aria-invalid=true] {
background-image: var(--icon-invalid);
}
input[aria-invalid=false],
select[aria-invalid=false],
textarea[aria-invalid=false] {
--border-color: var(--form-element-valid-border-color);
background-image: var(--icon-valid);
}
input[aria-invalid=false]:active, input[aria-invalid=false]:focus,
select[aria-invalid=false]:active,
@ -1359,7 +1368,6 @@ input[aria-invalid=true],
select[aria-invalid=true],
textarea[aria-invalid=true] {
--border-color: var(--form-element-invalid-border-color);
background-image: var(--icon-invalid);
}
input[aria-invalid=true]:active, input[aria-invalid=true]:focus,
select[aria-invalid=true]:active,
@ -1529,6 +1537,22 @@ label > input, label > select, label > textarea {
-webkit-margin-start: calc(1.125em - var(--border-width));
margin-inline-start: calc(1.125em - var(--border-width));
}
[type=checkbox][role=switch][aria-invalid=false] {
--border-color: var(--form-element-valid-border-color);
}
[type=checkbox][role=switch][aria-invalid=false]:active, [type=checkbox][role=switch][aria-invalid=false]:focus {
--border-color: var(
--form-element-valid-active-border-color
) !important;
}
[type=checkbox][role=switch][aria-invalid=true] {
--border-color: var(--form-element-invalid-border-color);
}
[type=checkbox][role=switch][aria-invalid=true]:active, [type=checkbox][role=switch][aria-invalid=true]:focus {
--border-color: var(
--form-element-invalid-active-border-color
) !important;
}
/**
* Form elements
@ -2389,3 +2413,5 @@ textarea,
transition-duration: 0s !important;
}
}
/*# sourceMappingURL=pico.css.map */

1
css/pico.css.map Normal file
View file

File diff suppressed because one or more lines are too long

40
css/pico.fluid.classless.css
View file

@ -1,5 +1,5 @@
/*!
* Pico.css v1.4.0 (https://picocss.com)
* Pico.css v1.4.1 (https://picocss.com)
* Copyright 2019-2021 - Licensed under MIT
*/
/**
@ -1039,7 +1039,7 @@ textarea {
}
input:not([type=checkbox]):not([type=radio]):not([type=range]) {
height: calc( (1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) + (var(--border-width) * 2) );
height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
}
fieldset {
@ -1118,9 +1118,9 @@ textarea[disabled] {
opacity: var(--form-element-disabled-opacity);
}
input[aria-invalid],
select[aria-invalid],
textarea[aria-invalid] {
input:not([type=checkbox]):not([type=radio])[aria-invalid],
select:not([type=checkbox]):not([type=radio])[aria-invalid],
textarea:not([type=checkbox]):not([type=radio])[aria-invalid] {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
padding-left: var(--form-element-spacing-horizontal);
-webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
@ -1131,11 +1131,20 @@ textarea[aria-invalid] {
background-repeat: no-repeat;
background-size: 1rem auto;
}
input:not([type=checkbox]):not([type=radio])[aria-invalid=false],
select:not([type=checkbox]):not([type=radio])[aria-invalid=false],
textarea:not([type=checkbox]):not([type=radio])[aria-invalid=false] {
background-image: var(--icon-valid);
}
input:not([type=checkbox]):not([type=radio])[aria-invalid=true],
select:not([type=checkbox]):not([type=radio])[aria-invalid=true],
textarea:not([type=checkbox]):not([type=radio])[aria-invalid=true] {
background-image: var(--icon-invalid);
}
input[aria-invalid=false],
select[aria-invalid=false],
textarea[aria-invalid=false] {
--border-color: var(--form-element-valid-border-color);
background-image: var(--icon-valid);
}
input[aria-invalid=false]:active, input[aria-invalid=false]:focus,
select[aria-invalid=false]:active,
@ -1150,7 +1159,6 @@ input[aria-invalid=true],
select[aria-invalid=true],
textarea[aria-invalid=true] {
--border-color: var(--form-element-invalid-border-color);
background-image: var(--icon-invalid);
}
input[aria-invalid=true]:active, input[aria-invalid=true]:focus,
select[aria-invalid=true]:active,
@ -1320,6 +1328,22 @@ label > input, label > select, label > textarea {
-webkit-margin-start: calc(1.125em - var(--border-width));
margin-inline-start: calc(1.125em - var(--border-width));
}
[type=checkbox][role=switch][aria-invalid=false] {
--border-color: var(--form-element-valid-border-color);
}
[type=checkbox][role=switch][aria-invalid=false]:active, [type=checkbox][role=switch][aria-invalid=false]:focus {
--border-color: var(
--form-element-valid-active-border-color
) !important;
}
[type=checkbox][role=switch][aria-invalid=true] {
--border-color: var(--form-element-invalid-border-color);
}
[type=checkbox][role=switch][aria-invalid=true]:active, [type=checkbox][role=switch][aria-invalid=true]:focus {
--border-color: var(
--form-element-invalid-active-border-color
) !important;
}
/**
* Form elements
@ -2180,3 +2204,5 @@ textarea,
transition-duration: 0s !important;
}
}
/*# sourceMappingURL=pico.fluid.classless.css.map */

1
css/pico.fluid.classless.css.map Normal file
View file

File diff suppressed because one or more lines are too long

5
css/pico.fluid.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

1
css/pico.fluid.classless.min.css.map Normal file
View file

File diff suppressed because one or more lines are too long

5
css/pico.min.css vendored
View file

File diff suppressed because one or more lines are too long

1
css/pico.min.css.map Normal file
View file

File diff suppressed because one or more lines are too long

24
css/pico.slim.css
View file

@ -1,5 +1,5 @@
/*!
* Pico.css v1.4.0 (https://picocss.com)
* Pico.css v1.4.1 (https://picocss.com)
* Copyright 2019-2021 - Licensed under MIT
*
* Slim version example
@ -1168,7 +1168,7 @@ textarea {
}
input:not([type=checkbox]):not([type=radio]):not([type=range]) {
height: calc( (1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) + (var(--border-width) * 2) );
height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
}
fieldset {
@ -1246,9 +1246,9 @@ textarea[disabled] {
opacity: var(--form-element-disabled-opacity);
}
input[aria-invalid],
select[aria-invalid],
textarea[aria-invalid] {
input:not([type=checkbox]):not([type=radio])[aria-invalid],
select:not([type=checkbox]):not([type=radio])[aria-invalid],
textarea:not([type=checkbox]):not([type=radio])[aria-invalid] {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--form-element-spacing-horizontal);
-webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
@ -1259,11 +1259,20 @@ textarea[aria-invalid] {
background-repeat: no-repeat;
background-size: 1rem auto;
}
input:not([type=checkbox]):not([type=radio])[aria-invalid=false],
select:not([type=checkbox]):not([type=radio])[aria-invalid=false],
textarea:not([type=checkbox]):not([type=radio])[aria-invalid=false] {
background-image: var(--icon-valid);
}
input:not([type=checkbox]):not([type=radio])[aria-invalid=true],
select:not([type=checkbox]):not([type=radio])[aria-invalid=true],
textarea:not([type=checkbox]):not([type=radio])[aria-invalid=true] {
background-image: var(--icon-invalid);
}
input[aria-invalid=false],
select[aria-invalid=false],
textarea[aria-invalid=false] {
--border-color: var(--form-element-valid-border-color);
background-image: var(--icon-valid);
}
input[aria-invalid=false]:active, input[aria-invalid=false]:focus,
select[aria-invalid=false]:active,
@ -1276,7 +1285,6 @@ input[aria-invalid=true],
select[aria-invalid=true],
textarea[aria-invalid=true] {
--border-color: var(--form-element-invalid-border-color);
background-image: var(--icon-invalid);
}
input[aria-invalid=true]:active, input[aria-invalid=true]:focus,
select[aria-invalid=true]:active,
@ -1408,3 +1416,5 @@ textarea,
[dir=rtl] {
direction: rtl;
}
/*# sourceMappingURL=pico.slim.css.map */

1
css/pico.slim.css.map Normal file
View file

File diff suppressed because one or more lines are too long

5
css/pico.slim.min.css vendored
View file

File diff suppressed because one or more lines are too long

1
css/pico.slim.min.css.map Normal file
View file

File diff suppressed because one or more lines are too long

2
css/themes/default.css
View file

@ -470,3 +470,5 @@ kbd {
--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='rgba(46, 125, 50, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--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='rgba(183, 28, 28, 0.999)' 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");
}
/*# sourceMappingURL=default.css.map */

1
css/themes/default.css.map Normal file
View file

File diff suppressed because one or more lines are too long

3
css/themes/default.min.css vendored
View file

File diff suppressed because one or more lines are too long

1
css/themes/default.min.css.map Normal file
View file

File diff suppressed because one or more lines are too long

2
docs/css/pico.docs.css
View file

@ -444,3 +444,5 @@ body > nav ul:first-of-type li:nth-of-type(2) {
right: var(--spacing);
}
}
/*# sourceMappingURL=pico.docs.css.map */

1
docs/css/pico.docs.css.map Normal file
View file

File diff suppressed because one or more lines are too long

1
docs/css/pico.docs.min.css vendored
View file

File diff suppressed because one or more lines are too long

1
docs/css/pico.docs.min.css.map Normal file
View file

File diff suppressed because one or more lines are too long

1
docs/index.html
View file

@ -1325,6 +1325,7 @@
</main><!-- ./ Main -->
<!-- JavaScript -->
<script src="https://unpkg.com/most-visible@1.5.0/dist/most-visible.min.js"></script>
<script src="js/pico.docs.min.js"></script>
</body>

2
docs/js/pico.docs.min.js vendored
View file

File diff suppressed because one or more lines are too long

151
docs/js/src/most-visible.js
View file

@ -1,151 +0,0 @@
/**
* Most Visible v1.5.0
*
* @author Andy Palmer <andy@andypalmer.me>
* @license MIT
*/
(function (root, factory) {
// Universal Module Definition
/* jshint strict:false */
/* global define: false, module: false */
if (typeof define === 'function' && define.amd) {
define([], function () {
return factory(root);
});
} else if (typeof module === 'object' && module.exports) {
module.exports = factory(root);
} else {
root.mostVisible = factory(root);
}
})(typeof self !== 'undefined' ? self : this, function (window) {
/* jshint unused: vars */
'use strict';
/**
* MostVisible constructor
*
* @param {NodeList|string} elements
* @param {{}} options
* @constructor
*/
function MostVisible(elements, options) {
if (!(this instanceof MostVisible)) {
return new MostVisible(elements, options).getMostVisible();
}
if (typeof elements === 'string') {
elements = document.querySelectorAll(elements);
}
this.elements = elements;
this.options = extend({}, MostVisible.defaults, options);
}
/**
* MostVisible default options
*
* @namespace
* @property {{}} defaults Default options hash.
* @property {boolean} defaults.percentage Whether to calculate visibility as a percentage of height.
* @property {number} defaults.offset An offset to take into account when calculating visibility.
*/
MostVisible.defaults = {
percentage: false,
offset: 0,
};
MostVisible.prototype = {
/**
* Returns the most visible element from the instance's NodeList.
*
* @returns {HTMLElement} Most visible element.
*/
getMostVisible: function () {
var _this = this;
var viewportHeight = document.documentElement.clientHeight;
return Array.prototype.reduce.call(
this.elements,
function (carry, element) {
var value = _this.getVisibleHeight(element, viewportHeight);
return value > carry[0] ? [value, element] : carry;
},
[0, null]
)[1];
},
/**
* Returns the visible height of an element.
*
* @param {HTMLElement} element Element to check the visibility of.
* @param {number} viewportHeight
* @returns {number} Visible height of the element in pixels or a percentage of the element's total height.
*/
getVisibleHeight: function (element, viewportHeight) {
var rect = element.getBoundingClientRect(),
rectTopOffset = rect.top - this.options.offset,
rectBottomOffset = rect.bottom - this.options.offset,
height = rect.bottom - rect.top,
visible = {
top: rectTopOffset >= 0 && rectTopOffset < viewportHeight,
bottom: rectBottomOffset > 0 && rectBottomOffset < viewportHeight,
};
var visiblePx = 0;
if (visible.top && visible.bottom) {
// Whole element is visible
visiblePx = height;
} else if (visible.top) {
visiblePx = viewportHeight - rect.top;
} else if (visible.bottom) {
visiblePx = rectBottomOffset;
} else if (height > viewportHeight && rectTopOffset < 0) {
var absTop = Math.abs(rectTopOffset);
if (absTop < height) {
// Part of the element is visible
visiblePx = height - absTop;
}
}
if (this.options.percentage) {
return (visiblePx / height) * 100;
}
return visiblePx;
},
};
MostVisible.makeJQueryPlugin = function ($) {
if (!$) {
return;
}
$.fn.mostVisible = function (options) {
var instance = new MostVisible(this.get(), options);
return this.filter(instance.getMostVisible());
};
}; // Try adding the jQuery plugin to window.jQuery
MostVisible.makeJQueryPlugin(window.jQuery);
/**
* Extends obj by adding the properties of all other objects passed to the function.
*
* @param {...{}} obj
* @returns {{}} The extended object.
*/
function extend(obj) {
for (var i = 1; i < arguments.length; i++) {
for (var key in arguments[i]) {
obj[key] = arguments[i][key];
}
}
return obj;
}
return MostVisible;
});

5
docs/js/src/scrollspy.js
View file

@ -8,12 +8,7 @@
* Copyright 2019-2021 - Licensed under MIT
*/
import * as MostVisible from './most-visible.js';
export const scrollspy = {
mostVisible() {
new MostVisible();
},
// Config
minWidth: '992px',

3643
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

49
package.json
View file

@ -1,7 +1,7 @@
{
"name": "@picocss/pico",
"version": "1.4.0",
"description": "Graceful & Minimal CSS design system in pure semantic HTML",
"version": "1.4.1",
"description": "Minimal CSS Framework for semantic HTML",
"author": "Lucas Larroche",
"main": "css/pico.min.css",
"homepage": "https://picocss.com",
@ -27,33 +27,38 @@
"url": "https://github.com/picocss/pico/issues"
},
"scripts": {
"css:compile": "sass --style expanded --no-source-map --no-error-css scss/:css/",
"css:compile:docs": "sass --style expanded --no-source-map --no-error-css docs/scss/:docs/css/",
"css:prefix": "postcss css/*.css css/*/*.css docs/css/*.css !css/*.min.css !docs/css/*.min.css --use autoprefixer --no-map --replace",
"css:minify": "cleancss -O1 --batch --batch-suffix '.min' css/*.css css/*/*.css docs/css/*.css !css/*.min.css !css/*/*.min.css !docs/css/*.min.css",
"js:bundle": "rollup docs/js/pico.docs.js --file docs/js/pico.docs.min.js --format iife",
"watch": "npm-run-all --parallel watch:scss watch:scss:docs watch:js:docs",
"build": "npm-run-all build:css build:js info:postbuild",
"build:css": "npm-run-all info:build:css css:compile css:compile:docs css:prefix info:css:minify css:minify",
"build:js": "npm-run-all info:build:js js:bundle js:babel info:js:minify js:minify",
"css:compile": "sass --style expanded --source-map --embed-sources --no-error-css scss/:css/",
"css:compile:docs": "sass --style expanded --source-map --embed-sources --no-error-css docs/scss/:docs/css/",
"css:prefix": "postcss --config postcss.config.js --replace css/*.css css/*/*.css docs/css/*.css !css/*.min.css !docs/css/*.min.css",
"css:minify": "cleancss -O1 --with-rebase --source-map --source-map-inline-sources --batch --batch-suffix .min css/*.css css/*/*.css docs/css/*.css !css/*.min.css !css/*/*.min.css !docs/css/*.min.css",
"js:bundle": "rollup docs/js/pico.docs.js --file docs/js/pico.docs.min.js --format iife --silent",
"js:babel": "babel docs/js/pico.docs.min.js --out-file docs/js/pico.docs.min.js --presets=@babel/preset-env",
"js:minify": "uglifyjs docs/js/pico.docs.min.js --compress --mangle --output docs/js/pico.docs.min.js",
"build:css": "npm-run-all css:compile css:compile:docs css:prefix css:minify",
"build:js": "npm-run-all js:bundle js:babel js:minify",
"build": "npm-run-all build:css build:js",
"watch:scss": "nodemon --watch scss/ --ext scss --exec 'npm run build:css'",
"watch:scss:docs": "nodemon --watch docs/scss/ --ext scss --exec 'npm run build:css'",
"watch:js:docs": "nodemon --watch docs/js/ --ext js --ignore 'docs/js/pico.docs.min.js' --exec 'npm run build:js'",
"watch": "npm-run-all --parallel watch:scss watch:scss:docs watch:js:docs"
"info:build:css": "echo '\\033[32m[picocss/pico] Compile .css files\\033[0m'",
"info:css:minify": "echo '\\033[32m[picocss/pico] Minify .css files\\033[0m'",
"info:build:js": "echo '\\033[32m[picocss/pico] Bundle .js files\\033[0m'",
"info:js:minify": "echo '\\033[32m[picocss/pico] Minify .js file\\033[0m'",
"info:postbuild": "echo '\\033[32m[picocss/pico] Done\\033[0m\n'"
},
"devDependencies": {
"@babel/cli": "^7.15.4",
"@babel/core": "^7.15.5",
"@babel/preset-env": "^7.15.6",
"autoprefixer": "^10.3.4",
"clean-css-cli": "^5.3.3",
"nodemon": "^2.0.12",
"@babel/cli": "^7.16.0",
"@babel/core": "^7.16.0",
"@babel/preset-env": "^7.16.0",
"autoprefixer": "^10.4.0",
"clean-css-cli": "^5.4.2",
"nodemon": "^2.0.14",
"npm-run-all": "^4.1.5",
"postcss": "^8.3.6",
"postcss-cli": "^8.3.1",
"rollup": "^2.56.3",
"sass": "^1.39.0",
"uglify-js": "^3.14.1"
"postcss": "^8.3.11",
"postcss-cli": "^9.0.1",
"rollup": "^2.58.3",
"sass": "^1.43.4",
"uglify-js": "^3.14.2"
}
}

12
postcss.config.js Normal file
View file

@ -0,0 +1,12 @@
module.exports = {
map: {
inline: false,
annotation: true,
sourcesContent: true
},
plugins: {
autoprefixer: {
cascade: false
}
}
}

31
scss/content/_form-checkbox-radio.scss
View file

@ -119,4 +119,35 @@
margin-inline-start: calc(#{$switch-width * 0.5} - var(--border-width));
}
}
// Aria-invalid
&[aria-invalid="false"] {
--border-color: var(--form-element-valid-border-color);
&:active,
&:focus {
@if $enable-important {
--border-color: var(
--form-element-valid-active-border-color
) !important;
} @else {
--border-color: var(--form-element-valid-active-border-color);
}
}
}
&[aria-invalid="true"] {
--border-color: var(--form-element-invalid-border-color);
&:active,
&:focus {
@if $enable-important {
--border-color: var(
--form-element-invalid-active-border-color
) !important;
} @else {
--border-color: var(--form-element-invalid-active-border-color);
}
}
}
}

15
scss/content/_form.scss
View file

@ -211,10 +211,12 @@ textarea {
}
}
// Aria-valid
// Aria-invalid
input,
select,
textarea {
&:not([type="checkbox"]):not([type="radio"]) {
&[aria-invalid] {
@if $enable-important {
padding-right: calc(
@ -237,8 +239,16 @@ textarea {
}
&[aria-invalid="false"] {
--border-color: var(--form-element-valid-border-color);
background-image: var(--icon-valid);
}
&[aria-invalid="true"] {
background-image: var(--icon-invalid);
}
}
&[aria-invalid="false"] {
--border-color: var(--form-element-valid-border-color);
&:active,
&:focus {
@ -254,7 +264,6 @@ textarea {
&[aria-invalid="true"] {
--border-color: var(--form-element-invalid-border-color);
background-image: var(--icon-invalid);
&:active,
&:focus {

2
scss/pico.scss
View file

@ -1,5 +1,5 @@
/*!
* Pico.css v1.4.0 (https://picocss.com)
* Pico.css v1.4.1 (https://picocss.com)
* Copyright 2019-2021 - Licensed under MIT
*/

2
scss/pico.slim.scss
View file

@ -1,5 +1,5 @@
/*!
* Pico.css v1.4.0 (https://picocss.com)
* Pico.css v1.4.1 (https://picocss.com)
* Copyright 2019-2021 - Licensed under MIT
*
* Slim version example