forked from CCCHH/ccchh-website
Theme: Add picocss v1.5.11
This commit is contained in:
parent
fe6fab6f1e
commit
74cdb157fd
37 changed files with 3712 additions and 0 deletions
|
|
@ -0,0 +1,52 @@
|
|||
/**
|
||||
* Accessibility & User interaction
|
||||
*/
|
||||
|
||||
// Based on :
|
||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// Accessibility
|
||||
|
||||
// Change the cursor on control elements in all browsers (opinionated)
|
||||
[aria-controls] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Change the cursor on disabled, not-editable, or otherwise inoperable elements in all browsers (opinionated)
|
||||
[aria-disabled="true"],
|
||||
[disabled] {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
// Change the display on visually hidden accessible elements in all browsers (opinionated)
|
||||
[aria-hidden="false"][hidden] {
|
||||
display: initial;
|
||||
}
|
||||
|
||||
[aria-hidden="false"][hidden]:not(:focus) {
|
||||
clip: rect(0, 0, 0, 0);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
// User interaction
|
||||
// Remove the tapping delay in IE 10
|
||||
a,
|
||||
area,
|
||||
button,
|
||||
input,
|
||||
label,
|
||||
select,
|
||||
summary,
|
||||
textarea,
|
||||
[tabindex] {
|
||||
-ms-touch-action: manipulation;
|
||||
}
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
[dir="rtl"] {
|
||||
direction: rtl;
|
||||
}
|
||||
58
themes/ccchh/assets/pico-1.5.11/scss/utilities/_loading.scss
Normal file
58
themes/ccchh/assets/pico-1.5.11/scss/utilities/_loading.scss
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
/**
|
||||
* Loading ([aria-busy=true])
|
||||
*/
|
||||
|
||||
|
||||
// Cursor
|
||||
[aria-busy="true"] {
|
||||
cursor: progress;
|
||||
}
|
||||
|
||||
// Everyting except form elements
|
||||
[aria-busy="true"]:not(input, select, textarea, html) {
|
||||
|
||||
&::before {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
border: 0.1875em solid currentColor;
|
||||
border-radius: 1em;
|
||||
border-right-color: transparent;
|
||||
content: "";
|
||||
vertical-align: text-bottom;
|
||||
vertical-align: -.125em; // Visual alignment
|
||||
animation: spinner 0.75s linear infinite;
|
||||
opacity: var(--loading-spinner-opacity);
|
||||
}
|
||||
|
||||
&:not(:empty) {
|
||||
&::before {
|
||||
margin-right: calc(var(--spacing) * 0.5);
|
||||
margin-left: 0;
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: calc(var(--spacing) * 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
&:empty {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons and links
|
||||
button,
|
||||
input[type="submit"],
|
||||
input[type="button"],
|
||||
input[type="reset"],
|
||||
a {
|
||||
&[aria-busy="true"] {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Animation: rotate
|
||||
@keyframes spinner {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
@if $enable-transitions and $enable-important {
|
||||
/**
|
||||
* Reduce Motion Features
|
||||
*/
|
||||
|
||||
// Based on :
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// 1. Remove animations when motion is reduced (opinionated)
|
||||
// 2. Remove fixed background attachments when motion is reduced (opinionated)
|
||||
// 3. Remove timed scrolling behaviors when motion is reduced (opinionated)
|
||||
// 4. Remove transitions when motion is reduced (opinionated)
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*:not([aria-busy="true"]),
|
||||
:not([aria-busy="true"])::before,
|
||||
:not([aria-busy="true"])::after {
|
||||
background-attachment: initial !important; // 2
|
||||
animation-duration: 1ms !important; // 1
|
||||
animation-delay: -1ms !important; // 1
|
||||
animation-iteration-count: 1 !important; // 1
|
||||
scroll-behavior: auto !important; // 3
|
||||
transition-delay: 0s !important; // 4
|
||||
transition-duration: 0s !important; // 4
|
||||
}
|
||||
}
|
||||
}
|
||||
278
themes/ccchh/assets/pico-1.5.11/scss/utilities/_tooltip.scss
Normal file
278
themes/ccchh/assets/pico-1.5.11/scss/utilities/_tooltip.scss
Normal file
|
|
@ -0,0 +1,278 @@
|
|||
/**
|
||||
* Tooltip ([data-tooltip])
|
||||
*/
|
||||
|
||||
[data-tooltip] {
|
||||
position: relative;
|
||||
|
||||
&:not(a, button, input) {
|
||||
border-bottom: 1px dotted;
|
||||
text-decoration: none;
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
&[data-placement="top"]::before,
|
||||
&[data-placement="top"]::after,
|
||||
&::before,
|
||||
&::after {
|
||||
display: block;
|
||||
z-index: 99;
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
padding: .25rem .5rem;
|
||||
overflow: hidden;
|
||||
transform: translate(-50%, -.25rem);
|
||||
border-radius: var(--border-radius);
|
||||
background: var(--tooltip-background-color);
|
||||
content: attr(data-tooltip);
|
||||
color: var(--tooltip-color);
|
||||
font-style: normal;
|
||||
font-weight: var(--font-weight);
|
||||
font-size: .875rem;
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// Caret
|
||||
&[data-placement="top"]::after,
|
||||
&::after {
|
||||
padding: 0;
|
||||
transform: translate(-50%, 0rem);
|
||||
border-top: .3rem solid;
|
||||
border-right: .3rem solid transparent;
|
||||
border-left: .3rem solid transparent;
|
||||
border-radius: 0;
|
||||
background-color: transparent;
|
||||
content: "";
|
||||
color: var(--tooltip-background-color);
|
||||
}
|
||||
|
||||
&[data-placement="bottom"] {
|
||||
&::before,
|
||||
&::after {
|
||||
top: 100%;
|
||||
bottom: auto;
|
||||
transform: translate(-50%, .25rem);
|
||||
}
|
||||
|
||||
&:after{
|
||||
transform: translate(-50%, -.3rem);
|
||||
border: .3rem solid transparent;
|
||||
border-bottom: .3rem solid;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-placement="left"] {
|
||||
&::before,
|
||||
&::after {
|
||||
top: 50%;
|
||||
right: 100%;
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
transform: translate(-.25rem, -50%);
|
||||
}
|
||||
|
||||
&:after{
|
||||
transform: translate(.3rem, -50%);
|
||||
border: .3rem solid transparent;
|
||||
border-left: .3rem solid;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-placement="right"] {
|
||||
&::before,
|
||||
&::after {
|
||||
top: 50%;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
left: 100%;
|
||||
transform: translate(.25rem, -50%);
|
||||
}
|
||||
|
||||
&:after{
|
||||
transform: translate(-.3rem, -50%);
|
||||
border: .3rem solid transparent;
|
||||
border-right: .3rem solid;
|
||||
}
|
||||
}
|
||||
|
||||
// Display
|
||||
&:focus,
|
||||
&:hover {
|
||||
&::before,
|
||||
&::after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@if $enable-transitions {
|
||||
|
||||
// Animations, excluding touch devices
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
&[data-placement="bottom"]:focus,
|
||||
&[data-placement="bottom"]:hover
|
||||
&:focus,
|
||||
&:hover {
|
||||
&::before,
|
||||
&::after {
|
||||
animation-duration: .2s;
|
||||
animation-name: tooltip-slide-top;
|
||||
}
|
||||
|
||||
&::after {
|
||||
animation-name: tooltip-caret-slide-top;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-placement="bottom"] {
|
||||
&:focus,
|
||||
&:hover {
|
||||
&::before,
|
||||
&::after {
|
||||
animation-duration: .2s;
|
||||
animation-name: tooltip-slide-bottom;
|
||||
}
|
||||
|
||||
&::after {
|
||||
animation-name: tooltip-caret-slide-bottom;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[data-placement="left"] {
|
||||
&:focus,
|
||||
&:hover {
|
||||
&::before,
|
||||
&::after {
|
||||
animation-duration: .2s;
|
||||
animation-name: tooltip-slide-left;
|
||||
}
|
||||
|
||||
&::after {
|
||||
animation-name: tooltip-caret-slide-left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[data-placement="right"] {
|
||||
&:focus,
|
||||
&:hover {
|
||||
&::before,
|
||||
&::after {
|
||||
animation-duration: .2s;
|
||||
animation-name: tooltip-slide-right;
|
||||
}
|
||||
|
||||
&::after {
|
||||
animation-name: tooltip-caret-slide-right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes tooltip-slide-top {
|
||||
from {
|
||||
transform: translate(-50%, .75rem);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translate(-50%, -.25rem);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes tooltip-caret-slide-top {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: translate(-50%, -.25rem);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translate(-50%, 0rem);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes tooltip-slide-bottom {
|
||||
from {
|
||||
transform: translate(-50%, -.75rem);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translate(-50%, .25rem);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes tooltip-caret-slide-bottom {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: translate(-50%, -.5rem);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translate(-50%, -.3rem);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes tooltip-slide-left {
|
||||
from {
|
||||
transform: translate(.75rem, -50%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translate(-.25rem, -50%);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes tooltip-caret-slide-left {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: translate(.05rem, -50%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translate(.3rem, -50%);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes tooltip-slide-right {
|
||||
from {
|
||||
transform: translate(-.75rem, -50%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translate(.25rem, -50%);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes tooltip-caret-slide-right {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: translate(-.05rem, -50%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translate(-.3rem, -50%);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue