Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
| d4f658c420 | |||
| 58f9de807d | |||
| 122b3aeaf0 | |||
| 532be6f0ad |
102 changed files with 6284 additions and 59 deletions
|
|
@ -13,7 +13,7 @@ jobs:
|
||||||
build:
|
build:
|
||||||
runs-on: docker
|
runs-on: docker
|
||||||
container:
|
container:
|
||||||
image: hugomods/hugo:exts-0.148.1
|
image: hugomods/hugo:exts-0.158.0
|
||||||
steps:
|
steps:
|
||||||
- name: Pipeline info
|
- name: Pipeline info
|
||||||
run: |
|
run: |
|
||||||
|
|
|
||||||
|
|
@ -34,6 +34,8 @@ Please note, that the website should be re-deployed at least daily to update the
|
||||||
### Add Pages
|
### Add Pages
|
||||||
|
|
||||||
To run a local version, just install HUGO by following the [instructions](https://gohugo.io/installation/) for your operating system.
|
To run a local version, just install HUGO by following the [instructions](https://gohugo.io/installation/) for your operating system.
|
||||||
|
Note that you also need to install the [Dart Sass compiler](https://sass-lang.com/dart-sass/).
|
||||||
|
|
||||||
To build the website and run a development webserver, execute:
|
To build the website and run a development webserver, execute:
|
||||||
```shell
|
```shell
|
||||||
hugo server
|
hugo server
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
baseURL = 'https://hamburg.ccc.de/'
|
baseURL = 'https://hamburg.ccc.de/'
|
||||||
languageCode = 'de-de'
|
locale = 'de-de'
|
||||||
defaultContentLanguage = 'de'
|
defaultContentLanguage = 'de'
|
||||||
timeZone = 'Europe/Berlin'
|
timeZone = 'Europe/Berlin'
|
||||||
title = 'CCC Hansestadt Hamburg e.V.'
|
title = 'CCC Hansestadt Hamburg e.V.'
|
||||||
|
|
|
||||||
21
themes/ccchh/assets/pico-1.5.13/LICENSE.md
Normal file
21
themes/ccchh/assets/pico-1.5.13/LICENSE.md
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
MIT License
|
||||||
|
|
||||||
|
Copyright (c) 2019-2023 Pico
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
4
themes/ccchh/assets/pico-1.5.13/scss/_functions.scss
Normal file
4
themes/ccchh/assets/pico-1.5.13/scss/_functions.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
// Output color in RGB format
|
||||||
|
@function to-rgb($color) {
|
||||||
|
@return unquote("rgb(#{red($color)}, #{green($color)}, #{blue($color)})");
|
||||||
|
}
|
||||||
69
themes/ccchh/assets/pico-1.5.13/scss/_variables.scss
Normal file
69
themes/ccchh/assets/pico-1.5.13/scss/_variables.scss
Normal file
|
|
@ -0,0 +1,69 @@
|
||||||
|
// Config
|
||||||
|
// ––––––––––––––––––––
|
||||||
|
|
||||||
|
// Set the root element for $enable-semantic-container and $enable-responsive-spacings
|
||||||
|
$semantic-root-element: "body" !default;
|
||||||
|
|
||||||
|
// Enable <header>, <main>, <footer> inside $semantic-root-element as containers
|
||||||
|
$enable-semantic-container: false !default;
|
||||||
|
|
||||||
|
// Enable .container and .container-fluid
|
||||||
|
$enable-class-container: true !default;
|
||||||
|
|
||||||
|
// Enable a centered viewport for <header>, <main>, <footer> inside $enable-semantic-container
|
||||||
|
// Fluid layout if disabled
|
||||||
|
$enable-viewport: true !default;
|
||||||
|
|
||||||
|
// Enable responsive spacings for <header>, <main>, <footer>, <section>, <article>
|
||||||
|
// Fixed spacings if disabled
|
||||||
|
$enable-responsive-spacings: true !default;
|
||||||
|
|
||||||
|
// Enable responsive typography
|
||||||
|
// Fixed root element size if disabled
|
||||||
|
$enable-responsive-typography: true !default;
|
||||||
|
|
||||||
|
// Enable .classes
|
||||||
|
// .classless version if disabled
|
||||||
|
$enable-classes: true !default;
|
||||||
|
|
||||||
|
// Enable .grid class
|
||||||
|
$enable-grid: true !default;
|
||||||
|
|
||||||
|
// Enable transitions
|
||||||
|
$enable-transitions: true !default;
|
||||||
|
|
||||||
|
// Enable overriding with !important
|
||||||
|
$enable-important: true !default;
|
||||||
|
|
||||||
|
// Responsive
|
||||||
|
// ––––––––––––––––––––
|
||||||
|
|
||||||
|
// xs: Extra small (portrait phones)
|
||||||
|
// sm: Small(landscape phones)
|
||||||
|
// md: Medium(tablets)
|
||||||
|
// lg: Large(desktops)
|
||||||
|
// xl: Extra large (large desktops)
|
||||||
|
|
||||||
|
// NOTE:
|
||||||
|
// To provide an easy and fine styling on each breakpoint
|
||||||
|
// we didn't use @each, @mixin or @include.
|
||||||
|
// That means you need to edit each CSS selector file to add a breakpoint
|
||||||
|
|
||||||
|
// Breakpoints
|
||||||
|
// 'null' disable the breakpoint
|
||||||
|
$breakpoints: (
|
||||||
|
xs: 0,
|
||||||
|
sm: 576px,
|
||||||
|
md: 768px,
|
||||||
|
lg: 992px,
|
||||||
|
xl: 1200px,
|
||||||
|
) !default;
|
||||||
|
|
||||||
|
// Viewports
|
||||||
|
$viewports: (
|
||||||
|
// 'null' disable the viewport on a breakpoint
|
||||||
|
sm: 510px,
|
||||||
|
md: 700px,
|
||||||
|
lg: 920px,
|
||||||
|
xl: 1130px
|
||||||
|
) !default;
|
||||||
116
themes/ccchh/assets/pico-1.5.13/scss/components/_accordion.scss
Normal file
116
themes/ccchh/assets/pico-1.5.13/scss/components/_accordion.scss
Normal file
|
|
@ -0,0 +1,116 @@
|
||||||
|
/**
|
||||||
|
* Accordion (<details>)
|
||||||
|
*/
|
||||||
|
|
||||||
|
details {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: var(--spacing);
|
||||||
|
padding-bottom: var(--spacing);
|
||||||
|
border-bottom: var(--border-width) solid var(--accordion-border-color);
|
||||||
|
|
||||||
|
summary {
|
||||||
|
line-height: 1rem;
|
||||||
|
list-style-type: none;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:not([role]) {
|
||||||
|
color: var(--accordion-close-summary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
@if $enable-transitions {
|
||||||
|
transition: color var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Reset marker
|
||||||
|
&::-webkit-details-marker {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::marker {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-moz-list-bullet {
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Marker
|
||||||
|
&::after {
|
||||||
|
display: block;
|
||||||
|
width: 1rem;
|
||||||
|
height: 1rem;
|
||||||
|
margin-inline-start: calc(var(--spacing, 1rem) * 0.5);
|
||||||
|
float: right;
|
||||||
|
transform: rotate(-90deg);
|
||||||
|
background-image: var(--icon-chevron);
|
||||||
|
background-position: right center;
|
||||||
|
background-size: 1rem auto;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
content: "";
|
||||||
|
|
||||||
|
@if $enable-transitions {
|
||||||
|
transition: transform var(--transition);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
outline: none;
|
||||||
|
|
||||||
|
&:not([role="button"]) {
|
||||||
|
color: var(--accordion-active-summary-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Type button
|
||||||
|
&[role="button"] {
|
||||||
|
width: 100%;
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
// Marker
|
||||||
|
&::after {
|
||||||
|
height: calc(1rem * var(--line-height, 1.5));
|
||||||
|
background-image: var(--icon-chevron-button);
|
||||||
|
}
|
||||||
|
|
||||||
|
@if $enable-classes {
|
||||||
|
// .contrast
|
||||||
|
&:not(.outline).contrast {
|
||||||
|
// Marker
|
||||||
|
&::after {
|
||||||
|
background-image: var(--icon-chevron-button-inverse);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Open
|
||||||
|
&[open] {
|
||||||
|
> summary {
|
||||||
|
margin-bottom: calc(var(--spacing));
|
||||||
|
|
||||||
|
&:not([role]) {
|
||||||
|
&:not(:focus) {
|
||||||
|
color: var(--accordion-open-summary-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
transform: rotate(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
[dir="rtl"] {
|
||||||
|
details {
|
||||||
|
summary {
|
||||||
|
text-align: right;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
float: left;
|
||||||
|
background-position: left center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
36
themes/ccchh/assets/pico-1.5.13/scss/components/_card.scss
Normal file
36
themes/ccchh/assets/pico-1.5.13/scss/components/_card.scss
Normal file
|
|
@ -0,0 +1,36 @@
|
||||||
|
/**
|
||||||
|
* Card (<article>)
|
||||||
|
*/
|
||||||
|
|
||||||
|
article {
|
||||||
|
margin: var(--block-spacing-vertical) 0;
|
||||||
|
padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
background: var(--card-background-color);
|
||||||
|
box-shadow: var(--card-box-shadow);
|
||||||
|
|
||||||
|
> header,
|
||||||
|
> footer {
|
||||||
|
margin-right: calc(var(--block-spacing-horizontal) * -1);
|
||||||
|
margin-left: calc(var(--block-spacing-horizontal) * -1);
|
||||||
|
padding: calc(var(--block-spacing-vertical) * 0.66)
|
||||||
|
var(--block-spacing-horizontal);
|
||||||
|
background-color: var(--card-sectionning-background-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
> header {
|
||||||
|
margin-top: calc(var(--block-spacing-vertical) * -1);
|
||||||
|
margin-bottom: var(--block-spacing-vertical);
|
||||||
|
border-bottom: var(--border-width) solid var(--card-border-color);
|
||||||
|
border-top-right-radius: var(--border-radius);
|
||||||
|
border-top-left-radius: var(--border-radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
> footer {
|
||||||
|
margin-top: var(--block-spacing-vertical);
|
||||||
|
margin-bottom: calc(var(--block-spacing-vertical) * -1);
|
||||||
|
border-top: var(--border-width) solid var(--card-border-color);
|
||||||
|
border-bottom-right-radius: var(--border-radius);
|
||||||
|
border-bottom-left-radius: var(--border-radius);
|
||||||
|
}
|
||||||
|
}
|
||||||
214
themes/ccchh/assets/pico-1.5.13/scss/components/_dropdown.scss
Normal file
214
themes/ccchh/assets/pico-1.5.13/scss/components/_dropdown.scss
Normal file
|
|
@ -0,0 +1,214 @@
|
||||||
|
/**
|
||||||
|
* Dropdown ([role="list"])
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Menu
|
||||||
|
details[role="list"],
|
||||||
|
li[role="list"] {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
details[role="list"] summary + ul,
|
||||||
|
li[role="list"] > ul {
|
||||||
|
display: flex;
|
||||||
|
z-index: 99;
|
||||||
|
position: absolute;
|
||||||
|
top: auto;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
flex-direction: column;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
border: var(--border-width) solid var(--dropdown-border-color);
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
background-color: var(--dropdown-background-color);
|
||||||
|
box-shadow: var(--card-box-shadow);
|
||||||
|
color: var(--dropdown-color);
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
li {
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 0;
|
||||||
|
padding: calc(var(--form-element-spacing-vertical) * 0.5)
|
||||||
|
var(--form-element-spacing-horizontal);
|
||||||
|
list-style: none;
|
||||||
|
|
||||||
|
&:first-of-type {
|
||||||
|
margin-top: calc(var(--form-element-spacing-vertical) * 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-of-type {
|
||||||
|
margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
display: block;
|
||||||
|
margin: calc(var(--form-element-spacing-vertical) * -0.5)
|
||||||
|
calc(var(--form-element-spacing-horizontal) * -1);
|
||||||
|
padding: calc(var(--form-element-spacing-vertical) * 0.5)
|
||||||
|
var(--form-element-spacing-horizontal);
|
||||||
|
overflow: hidden;
|
||||||
|
color: var(--dropdown-color);
|
||||||
|
text-decoration: none;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: var(--dropdown-hover-background-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Marker
|
||||||
|
details[role="list"] summary,
|
||||||
|
li[role="list"] > a {
|
||||||
|
&::after {
|
||||||
|
display: block;
|
||||||
|
width: 1rem;
|
||||||
|
height: calc(1rem * var(--line-height, 1.5));
|
||||||
|
margin-inline-start: 0.5rem;
|
||||||
|
float: right;
|
||||||
|
transform: rotate(0deg);
|
||||||
|
background-image: var(--icon-chevron);
|
||||||
|
background-position: right center;
|
||||||
|
background-size: 1rem auto;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Global dropdown only
|
||||||
|
details[role="list"] {
|
||||||
|
padding: 0;
|
||||||
|
border-bottom: none;
|
||||||
|
|
||||||
|
// Style <summary> as <select>
|
||||||
|
summary {
|
||||||
|
margin-bottom: 0;
|
||||||
|
|
||||||
|
&:not([role]) {
|
||||||
|
height: calc(
|
||||||
|
1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 +
|
||||||
|
var(--border-width) * 2
|
||||||
|
);
|
||||||
|
padding: var(--form-element-spacing-vertical)
|
||||||
|
var(--form-element-spacing-horizontal);
|
||||||
|
border: var(--border-width) solid var(--form-element-border-color);
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
background-color: var(--form-element-background-color);
|
||||||
|
color: var(--form-element-placeholder-color);
|
||||||
|
line-height: inherit;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
@if $enable-transitions {
|
||||||
|
transition: background-color var(--transition),
|
||||||
|
border-color var(--transition), color var(--transition),
|
||||||
|
box-shadow var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active,
|
||||||
|
&:focus {
|
||||||
|
border-color: var(--form-element-active-border-color);
|
||||||
|
background-color: var(--form-element-active-background-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Close for details[role="list"]
|
||||||
|
&[open] summary {
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
display: block;
|
||||||
|
z-index: 1;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
background: none;
|
||||||
|
content: "";
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// All Dropdowns inside <nav>
|
||||||
|
nav details[role="list"] summary,
|
||||||
|
nav li[role="list"] a {
|
||||||
|
display: flex;
|
||||||
|
direction: ltr;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav details[role="list"] summary + ul,
|
||||||
|
nav li[role="list"] > ul {
|
||||||
|
min-width: fit-content;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
|
||||||
|
li a {
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Dropdowns inside <nav> as nested <details>
|
||||||
|
nav details[role="list"] {
|
||||||
|
summary,
|
||||||
|
summary:not([role]) {
|
||||||
|
height: auto;
|
||||||
|
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
|
||||||
|
}
|
||||||
|
|
||||||
|
&[open] summary {
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
summary + ul {
|
||||||
|
margin-top: var(--outline-width);
|
||||||
|
margin-inline-start: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
summary[role="link"] {
|
||||||
|
margin-bottom: calc(var(--nav-link-spacing-vertical) * -1);
|
||||||
|
line-height: var(--line-height);
|
||||||
|
|
||||||
|
+ ul {
|
||||||
|
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
|
||||||
|
margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Dropdowns inside a <nav> without using <details>
|
||||||
|
li[role="list"] {
|
||||||
|
// Open on hover (for mobile)
|
||||||
|
// or on active/focus (for keyboard navigation)
|
||||||
|
&:hover > ul,
|
||||||
|
a:active ~ ul,
|
||||||
|
a:focus ~ ul {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
> ul {
|
||||||
|
display: none;
|
||||||
|
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
|
||||||
|
margin-inline-start: calc(
|
||||||
|
var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
> a::after {
|
||||||
|
background-image: var(--icon-chevron);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
label > details[role="list"] {
|
||||||
|
margin-top: calc(var(--spacing) * .25);
|
||||||
|
margin-bottom: var(--spacing);
|
||||||
|
}
|
||||||
168
themes/ccchh/assets/pico-1.5.13/scss/components/_modal.scss
Normal file
168
themes/ccchh/assets/pico-1.5.13/scss/components/_modal.scss
Normal file
|
|
@ -0,0 +1,168 @@
|
||||||
|
/**
|
||||||
|
* Modal (<dialog>)
|
||||||
|
*/
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--scrollbar-width: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
dialog {
|
||||||
|
display: flex;
|
||||||
|
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%;
|
||||||
|
padding: var(--spacing);
|
||||||
|
border: 0;
|
||||||
|
backdrop-filter: var(--modal-overlay-backdrop-filter);
|
||||||
|
background-color: var(--modal-overlay-background-color);
|
||||||
|
color: var(--color);
|
||||||
|
|
||||||
|
// Content
|
||||||
|
article {
|
||||||
|
$close-selector: if($enable-classes, ".close", "a[rel='prev']");
|
||||||
|
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");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@if map-get($breakpoints, "md") {
|
||||||
|
@media (min-width: map-get($breakpoints, "md")) {
|
||||||
|
max-width: map-get($viewports, "md");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> header,
|
||||||
|
> footer {
|
||||||
|
padding: calc(var(--block-spacing-vertical) * 0.5)
|
||||||
|
var(--block-spacing-horizontal);
|
||||||
|
}
|
||||||
|
|
||||||
|
> header {
|
||||||
|
#{$close-selector} {
|
||||||
|
margin: 0;
|
||||||
|
margin-left: var(--spacing);
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> footer {
|
||||||
|
text-align: right;
|
||||||
|
|
||||||
|
[role="button"] {
|
||||||
|
margin-bottom: 0;
|
||||||
|
|
||||||
|
&:not(:first-of-type) {
|
||||||
|
margin-left: calc(var(--spacing) * 0.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
&:last-of-type {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Close icon
|
||||||
|
#{$close-selector} {
|
||||||
|
display: block;
|
||||||
|
width: 1rem;
|
||||||
|
height: 1rem;
|
||||||
|
margin-top: calc(var(--block-spacing-vertical) * -0.5);
|
||||||
|
margin-bottom: var(--typography-spacing-vertical);
|
||||||
|
margin-left: auto;
|
||||||
|
background-image: var(--icon-close);
|
||||||
|
background-position: center;
|
||||||
|
background-size: auto 1rem;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
opacity: 0.5;
|
||||||
|
|
||||||
|
@if $enable-transitions {
|
||||||
|
transition: opacity var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:is([aria-current], :hover, :active, :focus) {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Closed state
|
||||||
|
&:not([open]),
|
||||||
|
&[open="false"] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Utilities
|
||||||
|
@if $enable-classes {
|
||||||
|
.modal-is-open {
|
||||||
|
padding-right: var(--scrollbar-width, 0px);
|
||||||
|
overflow: hidden;
|
||||||
|
pointer-events: none;
|
||||||
|
touch-action: none;
|
||||||
|
|
||||||
|
dialog {
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Animations
|
||||||
|
@if ($enable-classes and $enable-transitions) {
|
||||||
|
$animation-duration: 0.2s;
|
||||||
|
|
||||||
|
:where(.modal-is-opening, .modal-is-closing) {
|
||||||
|
dialog,
|
||||||
|
dialog > article {
|
||||||
|
animation-duration: $animation-duration;
|
||||||
|
animation-timing-function: ease-in-out;
|
||||||
|
animation-fill-mode: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
dialog {
|
||||||
|
animation-duration: ($animation-duration * 4);
|
||||||
|
animation-name: modal-overlay ;
|
||||||
|
|
||||||
|
> article {
|
||||||
|
animation-delay: $animation-duration;
|
||||||
|
animation-name: modal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-is-closing {
|
||||||
|
dialog,
|
||||||
|
dialog > article {
|
||||||
|
animation-delay: 0s;
|
||||||
|
animation-direction: reverse;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes modal-overlay {
|
||||||
|
from {
|
||||||
|
backdrop-filter: none;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes modal {
|
||||||
|
from {
|
||||||
|
transform: translateY(-100%);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
141
themes/ccchh/assets/pico-1.5.13/scss/components/_nav.scss
Normal file
141
themes/ccchh/assets/pico-1.5.13/scss/components/_nav.scss
Normal file
|
|
@ -0,0 +1,141 @@
|
||||||
|
/**
|
||||||
|
* Nav
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Reboot based on :
|
||||||
|
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||||
|
|
||||||
|
// Prevent VoiceOver from ignoring list semantics in Safari (opinionated)
|
||||||
|
:where(nav li)::before {
|
||||||
|
float: left;
|
||||||
|
content: "\200B";
|
||||||
|
}
|
||||||
|
|
||||||
|
// Pico
|
||||||
|
// ––––––––––––––––––––
|
||||||
|
|
||||||
|
// Horizontal Nav
|
||||||
|
nav,
|
||||||
|
nav ul {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
ol,
|
||||||
|
ul {
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
|
||||||
|
&:first-of-type {
|
||||||
|
margin-left: calc(var(--nav-element-spacing-horizontal) * -1);
|
||||||
|
}
|
||||||
|
&:last-of-type {
|
||||||
|
margin-right: calc(var(--nav-element-spacing-horizontal) * -1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0;
|
||||||
|
padding: var(--nav-element-spacing-vertical)
|
||||||
|
var(--nav-element-spacing-horizontal);
|
||||||
|
|
||||||
|
// Minimal support for buttons and forms elements
|
||||||
|
> * {
|
||||||
|
--spacing: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:where(a, [role="link"]) {
|
||||||
|
display: inline-block;
|
||||||
|
margin: calc(var(--nav-link-spacing-vertical) * -1)
|
||||||
|
calc(var(--nav-link-spacing-horizontal) * -1);
|
||||||
|
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:is([aria-current], :hover, :active, :focus) {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Breadcrumb
|
||||||
|
&[aria-label="breadcrumb"] {
|
||||||
|
align-items: center;
|
||||||
|
justify-content: start;
|
||||||
|
|
||||||
|
& ul li {
|
||||||
|
&:not(:first-child) {
|
||||||
|
margin-inline-start: var(--nav-link-spacing-horizontal);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:last-child) {
|
||||||
|
::after {
|
||||||
|
position: absolute;
|
||||||
|
width: calc(var(--nav-link-spacing-horizontal) * 2);
|
||||||
|
margin-inline-start: calc(var(--nav-link-spacing-horizontal) / 2);
|
||||||
|
content: "/";
|
||||||
|
color: var(--muted-color);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
& a[aria-current] {
|
||||||
|
background-color: transparent;
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Minimal support for role="button"
|
||||||
|
[role="button"] {
|
||||||
|
margin-right: inherit;
|
||||||
|
margin-left: inherit;
|
||||||
|
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Vertical Nav
|
||||||
|
aside {
|
||||||
|
nav,
|
||||||
|
ol,
|
||||||
|
ul,
|
||||||
|
li {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
padding: calc(var(--nav-element-spacing-vertical) * 0.5)
|
||||||
|
var(--nav-element-spacing-horizontal);
|
||||||
|
|
||||||
|
a {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Minimal support for links as buttons
|
||||||
|
[role="button"] {
|
||||||
|
margin: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Breadcrumb RTL
|
||||||
|
[dir="rtl"] {
|
||||||
|
nav {
|
||||||
|
&[aria-label="breadcrumb"] {
|
||||||
|
& ul li {
|
||||||
|
&:not(:last-child) {
|
||||||
|
::after {
|
||||||
|
content: "\\";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,89 @@
|
||||||
|
/**
|
||||||
|
* Progress
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Reboot 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
|
||||||
|
// ––––––––––––––––––––
|
||||||
|
|
||||||
|
// 1. Add the correct display in Edge 18- and IE
|
||||||
|
// 2. Add the correct vertical alignment in Chrome, Edge, and Firefox
|
||||||
|
progress {
|
||||||
|
display: inline-block; // 1
|
||||||
|
vertical-align: baseline; // 2
|
||||||
|
}
|
||||||
|
|
||||||
|
// Pico
|
||||||
|
// ––––––––––––––––––––
|
||||||
|
|
||||||
|
progress {
|
||||||
|
// Reset the default appearance
|
||||||
|
-webkit-appearance: none;
|
||||||
|
-moz-appearance: none;
|
||||||
|
|
||||||
|
// Styles
|
||||||
|
display: inline-block;
|
||||||
|
appearance: none;
|
||||||
|
width: 100%;
|
||||||
|
height: 0.5rem;
|
||||||
|
margin-bottom: calc(var(--spacing) * 0.5);
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
// Remove Firefox and Opera border
|
||||||
|
border: 0;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
background-color: var(--progress-background-color);
|
||||||
|
|
||||||
|
// IE10 uses `color` to set the bar background-color
|
||||||
|
color: var(--progress-color);
|
||||||
|
|
||||||
|
&::-webkit-progress-bar {
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
&[value]::-webkit-progress-value {
|
||||||
|
background-color: var(--progress-color);
|
||||||
|
}
|
||||||
|
&::-moz-progress-bar {
|
||||||
|
background-color: var(--progress-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Indeterminate state
|
||||||
|
@media (prefers-reduced-motion: no-preference) {
|
||||||
|
&:indeterminate {
|
||||||
|
background: var(--progress-background-color)
|
||||||
|
linear-gradient(
|
||||||
|
to right,
|
||||||
|
var(--progress-color) 30%,
|
||||||
|
var(--progress-background-color) 30%
|
||||||
|
)
|
||||||
|
top left / 150% 150% no-repeat;
|
||||||
|
animation: progress-indeterminate 1s linear infinite;
|
||||||
|
|
||||||
|
&[value]::-webkit-progress-value {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
&::-moz-progress-bar {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
[dir="rtl"] {
|
||||||
|
@media (prefers-reduced-motion: no-preference) {
|
||||||
|
progress:indeterminate {
|
||||||
|
animation-direction: reverse;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes progress-indeterminate {
|
||||||
|
0% {
|
||||||
|
background-position: 200% 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
background-position: -200% 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
183
themes/ccchh/assets/pico-1.5.13/scss/content/_button.scss
Normal file
183
themes/ccchh/assets/pico-1.5.13/scss/content/_button.scss
Normal file
|
|
@ -0,0 +1,183 @@
|
||||||
|
/**
|
||||||
|
* Button
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Reboot 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
|
||||||
|
// ––––––––––––––––––––
|
||||||
|
|
||||||
|
// 1. Change the font styles in all browsers
|
||||||
|
// 2. Remove the margin on controls in Safari
|
||||||
|
// 3. Show the overflow in Edge
|
||||||
|
button {
|
||||||
|
margin: 0; // 2
|
||||||
|
overflow: visible; // 3
|
||||||
|
font-family: inherit; // 1
|
||||||
|
text-transform: none; // 1
|
||||||
|
}
|
||||||
|
|
||||||
|
// Correct the inability to style buttons in iOS and Safari
|
||||||
|
button,
|
||||||
|
[type="button"],
|
||||||
|
[type="reset"],
|
||||||
|
[type="submit"] {
|
||||||
|
-webkit-appearance: button;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Pico
|
||||||
|
// ––––––––––––––––––––
|
||||||
|
|
||||||
|
button {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: var(--spacing);
|
||||||
|
}
|
||||||
|
|
||||||
|
[role="button"] {
|
||||||
|
display: inline-block;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
input[type="submit"],
|
||||||
|
input[type="button"],
|
||||||
|
input[type="reset"],
|
||||||
|
[role="button"] {
|
||||||
|
--background-color: var(--primary);
|
||||||
|
--border-color: var(--primary);
|
||||||
|
--color: var(--primary-inverse);
|
||||||
|
--box-shadow: var(--button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
|
||||||
|
padding: var(--form-element-spacing-vertical)
|
||||||
|
var(--form-element-spacing-horizontal);
|
||||||
|
border: var(--border-width) solid var(--border-color);
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
outline: none;
|
||||||
|
background-color: var(--background-color);
|
||||||
|
box-shadow: var(--box-shadow);
|
||||||
|
color: var(--color);
|
||||||
|
font-weight: var(--font-weight);
|
||||||
|
font-size: 1rem;
|
||||||
|
line-height: var(--line-height);
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
@if $enable-transitions {
|
||||||
|
transition: background-color var(--transition),
|
||||||
|
border-color var(--transition), color var(--transition),
|
||||||
|
box-shadow var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:is([aria-current], :hover, :active, :focus) {
|
||||||
|
--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 {
|
||||||
|
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
||||||
|
0 0 0 var(--outline-width) var(--primary-focus);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// .secondary, .contrast & .outline
|
||||||
|
@if $enable-classes {
|
||||||
|
|
||||||
|
// Secondary
|
||||||
|
:is(button, input[type="submit"], input[type="button"], [role="button"]).secondary,
|
||||||
|
input[type="reset"] {
|
||||||
|
--background-color: var(--secondary);
|
||||||
|
--border-color: var(--secondary);
|
||||||
|
--color: var(--secondary-inverse);
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:is([aria-current], :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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Contrast
|
||||||
|
:is(button, input[type="submit"], input[type="button"], [role="button"]).contrast {
|
||||||
|
--background-color: var(--contrast);
|
||||||
|
--border-color: var(--contrast);
|
||||||
|
--color: var(--contrast-inverse);
|
||||||
|
|
||||||
|
&:is([aria-current], :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)
|
||||||
|
:is(button, input[type="submit"], input[type="button"], [role="button"]).outline,
|
||||||
|
input[type="reset"].outline {
|
||||||
|
--background-color: transparent;
|
||||||
|
--color: var(--primary);
|
||||||
|
|
||||||
|
&:is([aria-current], :hover, :active, :focus) {
|
||||||
|
--background-color: transparent;
|
||||||
|
--color: var(--primary-hover);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Outline (secondary)
|
||||||
|
:is(button, input[type="submit"], input[type="button"], [role="button"]).outline.secondary,
|
||||||
|
input[type="reset"].outline {
|
||||||
|
--color: var(--secondary);
|
||||||
|
|
||||||
|
&:is([aria-current], :hover, :active, :focus) {
|
||||||
|
--color: var(--secondary-hover);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Outline (contrast)
|
||||||
|
:is(button, input[type="submit"], input[type="button"], [role="button"]).outline.contrast {
|
||||||
|
--color: var(--contrast);
|
||||||
|
|
||||||
|
&:is([aria-current], :hover, :active, :focus) {
|
||||||
|
--color: var(--contrast-hover);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@else {
|
||||||
|
// Secondary button without .class
|
||||||
|
input[type="reset"] {
|
||||||
|
--background-color: var(--secondary);
|
||||||
|
--border-color: var(--secondary);
|
||||||
|
--color: var(--secondary-inverse);
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:is([aria-current], :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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Button [disabled]
|
||||||
|
// Links without href are disabled by default
|
||||||
|
:where(button, [type="submit"], [type="button"], [type="reset"], [role="button"])[disabled],
|
||||||
|
:where(fieldset[disabled]) :is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]),
|
||||||
|
a[role="button"]:not([href]) {
|
||||||
|
opacity: 0.5;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
91
themes/ccchh/assets/pico-1.5.13/scss/content/_code.scss
Normal file
91
themes/ccchh/assets/pico-1.5.13/scss/content/_code.scss
Normal file
|
|
@ -0,0 +1,91 @@
|
||||||
|
/**
|
||||||
|
* Code
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Reboot 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
|
||||||
|
// ––––––––––––––––––––
|
||||||
|
|
||||||
|
// 1. Correct the inheritance and scaling of font size in all browsers
|
||||||
|
// 2. Correct the odd `em` font sizing in all browsers
|
||||||
|
pre,
|
||||||
|
code,
|
||||||
|
kbd,
|
||||||
|
samp {
|
||||||
|
font-size: 0.875em; // 2
|
||||||
|
font-family: var(--font-family); // 1
|
||||||
|
}
|
||||||
|
|
||||||
|
// Prevent overflow of the container in all browsers (opinionated)
|
||||||
|
pre {
|
||||||
|
-ms-overflow-style: scrollbar;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Pico
|
||||||
|
// ––––––––––––––––––––
|
||||||
|
|
||||||
|
pre,
|
||||||
|
code,
|
||||||
|
kbd {
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
background: var(--code-background-color);
|
||||||
|
color: var(--code-color);
|
||||||
|
font-weight: var(--font-weight);
|
||||||
|
line-height: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
code,
|
||||||
|
kbd {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0.375rem 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: var(--spacing);
|
||||||
|
overflow-x: auto;
|
||||||
|
|
||||||
|
> code {
|
||||||
|
display: block;
|
||||||
|
padding: var(--spacing);
|
||||||
|
background: none;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: var(--line-height);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Code Syntax
|
||||||
|
code {
|
||||||
|
// Tags
|
||||||
|
b {
|
||||||
|
color: var(--code-tag-color);
|
||||||
|
font-weight: var(--font-weight);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Properties
|
||||||
|
i {
|
||||||
|
color: var(--code-property-color);
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Values
|
||||||
|
u {
|
||||||
|
color: var(--code-value-color);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Comments
|
||||||
|
em {
|
||||||
|
color: var(--code-comment-color);
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// kbd
|
||||||
|
kbd {
|
||||||
|
background-color: var(--code-kbd-background-color);
|
||||||
|
color: var(--code-kbd-color);
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
48
themes/ccchh/assets/pico-1.5.13/scss/content/_embedded.scss
Normal file
48
themes/ccchh/assets/pico-1.5.13/scss/content/_embedded.scss
Normal file
|
|
@ -0,0 +1,48 @@
|
||||||
|
/**
|
||||||
|
* Embedded content
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Reboot 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
|
||||||
|
// ––––––––––––––––––––
|
||||||
|
|
||||||
|
// Change the alignment on media elements in all browsers (opinionated)
|
||||||
|
:where(audio, canvas, iframe, img, svg, video) {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add the correct display in IE 9-
|
||||||
|
audio,
|
||||||
|
video {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add the correct display in iOS 4-7
|
||||||
|
audio:not([controls]) {
|
||||||
|
display: none;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Remove the border on iframes in all browsers (opinionated)
|
||||||
|
:where(iframe) {
|
||||||
|
border-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 1. Remove the border on images inside links in IE 10.
|
||||||
|
// 2. Responsive by default
|
||||||
|
img {
|
||||||
|
max-width: 100%; // 2
|
||||||
|
height: auto; // 2
|
||||||
|
border-style: none; // 1
|
||||||
|
}
|
||||||
|
|
||||||
|
// Change the fill color to match the text color in all browsers (opinionated)
|
||||||
|
:where(svg:not([fill])) {
|
||||||
|
fill: currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Hide the overflow in IE
|
||||||
|
svg:not(:root) {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,286 @@
|
||||||
|
/**
|
||||||
|
* Form elements
|
||||||
|
* Alternatives input types (Not Checkboxes & Radios)
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Color
|
||||||
|
[type="color"] {
|
||||||
|
// Wrapper
|
||||||
|
@mixin color-wrapper {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-webkit-color-swatch-wrapper {
|
||||||
|
@include color-wrapper;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-moz-focus-inner {
|
||||||
|
@include color-wrapper;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Swatch
|
||||||
|
@mixin color-swatch {
|
||||||
|
border: 0;
|
||||||
|
border-radius: calc(var(--border-radius) * 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-webkit-color-swatch {
|
||||||
|
@include color-swatch;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-moz-color-swatch {
|
||||||
|
@include color-swatch;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Date & Time
|
||||||
|
// :not() are needed to add Specificity and avoid !important on padding
|
||||||
|
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
|
||||||
|
&:is([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"]
|
||||||
|
:is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Calendar icons are hidden in Firefox
|
||||||
|
@if $enable-important {
|
||||||
|
@-moz-document url-prefix() {
|
||||||
|
[type="date"],
|
||||||
|
[type="datetime-local"],
|
||||||
|
[type="month"],
|
||||||
|
[type="time"],
|
||||||
|
[type="week"] {
|
||||||
|
padding-right: var(--form-element-spacing-horizontal) !important;
|
||||||
|
background-image: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// File
|
||||||
|
[type="file"] {
|
||||||
|
--color: var(--muted-color);
|
||||||
|
padding: calc(var(--form-element-spacing-vertical) * 0.5) 0;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
background: none;
|
||||||
|
|
||||||
|
@mixin file-selector-button {
|
||||||
|
--background-color: var(--secondary);
|
||||||
|
--border-color: var(--secondary);
|
||||||
|
--color: var(--secondary-inverse);
|
||||||
|
margin-right: calc(var(--spacing) / 2);
|
||||||
|
margin-left: 0;
|
||||||
|
margin-inline-start: 0;
|
||||||
|
margin-inline-end: calc(var(--spacing) / 2);
|
||||||
|
padding: calc(var(--form-element-spacing-vertical) * 0.5)
|
||||||
|
calc(var(--form-element-spacing-horizontal) * 0.5);
|
||||||
|
border: var(--border-width) solid var(--border-color);
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
outline: none;
|
||||||
|
background-color: var(--background-color);
|
||||||
|
box-shadow: var(--box-shadow);
|
||||||
|
color: var(--color);
|
||||||
|
font-weight: var(--font-weight);
|
||||||
|
font-size: 1rem;
|
||||||
|
line-height: var(--line-height);
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
@if $enable-transitions {
|
||||||
|
transition: background-color var(--transition),
|
||||||
|
border-color var(--transition), color var(--transition),
|
||||||
|
box-shadow var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:is(:hover, :active, :focus) {
|
||||||
|
--background-color: var(--secondary-hover);
|
||||||
|
--border-color: var(--secondary-hover);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&::file-selector-button {
|
||||||
|
@include file-selector-button;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-webkit-file-upload-button {
|
||||||
|
@include file-selector-button;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-ms-browse {
|
||||||
|
@include file-selector-button;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Range
|
||||||
|
[type="range"] {
|
||||||
|
// Config
|
||||||
|
$height-track: 0.25rem;
|
||||||
|
$height-thumb: 1.25rem;
|
||||||
|
$border-thumb: 2px;
|
||||||
|
|
||||||
|
// Styles
|
||||||
|
-webkit-appearance: none;
|
||||||
|
-moz-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
width: 100%;
|
||||||
|
height: $height-thumb;
|
||||||
|
background: none;
|
||||||
|
|
||||||
|
// Slider Track
|
||||||
|
@mixin slider-track {
|
||||||
|
width: 100%;
|
||||||
|
height: $height-track;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
background-color: var(--range-border-color);
|
||||||
|
|
||||||
|
@if $enable-transitions {
|
||||||
|
transition: background-color var(--transition),
|
||||||
|
box-shadow var(--transition);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-webkit-slider-runnable-track {
|
||||||
|
@include slider-track;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-moz-range-track {
|
||||||
|
@include slider-track;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-ms-track {
|
||||||
|
@include slider-track;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Slider Thumb
|
||||||
|
@mixin slider-thumb {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
width: $height-thumb;
|
||||||
|
height: $height-thumb;
|
||||||
|
margin-top: #{(-($height-thumb * 0.5) + ($height-track * 0.5))};
|
||||||
|
border: $border-thumb solid var(--range-thumb-border-color);
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: var(--range-thumb-color);
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
@if $enable-transitions {
|
||||||
|
transition: background-color var(--transition),
|
||||||
|
transform var(--transition);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&::-webkit-slider-thumb {
|
||||||
|
@include slider-thumb;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-moz-range-thumb {
|
||||||
|
@include slider-thumb;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-ms-thumb {
|
||||||
|
@include slider-thumb;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
--range-border-color: var(--range-active-border-color);
|
||||||
|
--range-thumb-color: var(--range-thumb-hover-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
--range-thumb-color: var(--range-thumb-active-color);
|
||||||
|
|
||||||
|
// Slider Thumb
|
||||||
|
&::-webkit-slider-thumb {
|
||||||
|
transform: scale(1.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-moz-range-thumb {
|
||||||
|
transform: scale(1.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-ms-thumb {
|
||||||
|
transform: scale(1.25);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Search
|
||||||
|
// :not() are needed to add Specificity and avoid !important on padding
|
||||||
|
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
|
||||||
|
&[type="search"] {
|
||||||
|
padding-inline-start: 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;
|
||||||
|
|
||||||
|
&[aria-invalid] {
|
||||||
|
@if $enable-important {
|
||||||
|
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
|
||||||
|
}
|
||||||
|
@else {
|
||||||
|
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
|
||||||
|
}
|
||||||
|
background-position: center left 1.125rem, center right 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&[aria-invalid="false"] {
|
||||||
|
background-image: var(--icon-search), var(--icon-valid);
|
||||||
|
}
|
||||||
|
|
||||||
|
&[aria-invalid="true"] {
|
||||||
|
background-image: var(--icon-search), var(--icon-invalid);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Cancel button
|
||||||
|
[type="search"] {
|
||||||
|
&::-webkit-search-cancel-button {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
[dir="rtl"] {
|
||||||
|
:where(input) {
|
||||||
|
&:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
|
||||||
|
&[type="search"] {
|
||||||
|
background-position: center right 1.125rem;
|
||||||
|
|
||||||
|
&[aria-invalid] {
|
||||||
|
background-position: center right 1.125rem, center left 0.75rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,138 @@
|
||||||
|
/**
|
||||||
|
* Form elements
|
||||||
|
* Checkboxes & Radios
|
||||||
|
*/
|
||||||
|
|
||||||
|
[type="checkbox"],
|
||||||
|
[type="radio"] {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
-moz-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
width: 1.25em;
|
||||||
|
height: 1.25em;
|
||||||
|
margin-top: -0.125em;
|
||||||
|
margin-right: 0.375em;
|
||||||
|
margin-left: 0;
|
||||||
|
margin-inline-start: 0;
|
||||||
|
margin-inline-end: 0.375em;
|
||||||
|
border-width: var(--border-width);
|
||||||
|
font-size: inherit;
|
||||||
|
vertical-align: middle;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&::-ms-check {
|
||||||
|
display: none; // unstyle IE checkboxes
|
||||||
|
}
|
||||||
|
|
||||||
|
&:checked,
|
||||||
|
&:checked:active,
|
||||||
|
&:checked:focus {
|
||||||
|
--background-color: var(--primary);
|
||||||
|
--border-color: var(--primary);
|
||||||
|
background-image: var(--icon-checkbox);
|
||||||
|
background-position: center;
|
||||||
|
background-size: 0.75em auto;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
& ~ label {
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 0.375em;
|
||||||
|
margin-bottom: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Checkboxes
|
||||||
|
[type="checkbox"] {
|
||||||
|
&:indeterminate {
|
||||||
|
--background-color: var(--primary);
|
||||||
|
--border-color: var(--primary);
|
||||||
|
background-image: var(--icon-minus);
|
||||||
|
background-position: center;
|
||||||
|
background-size: 0.75em auto;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Radios
|
||||||
|
[type="radio"] {
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
&:checked,
|
||||||
|
&:checked:active,
|
||||||
|
&:checked:focus {
|
||||||
|
--background-color: var(--primary-inverse);
|
||||||
|
border-width: 0.35em;
|
||||||
|
background-image: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Switchs
|
||||||
|
[type="checkbox"][role="switch"] {
|
||||||
|
--background-color: var(--switch-background-color);
|
||||||
|
--border-color: var(--switch-background-color);
|
||||||
|
--color: var(--switch-color);
|
||||||
|
|
||||||
|
// Config
|
||||||
|
$switch-height: 1.25em;
|
||||||
|
$switch-width: 2.25em;
|
||||||
|
$switch-transition: 0.1s ease-in-out;
|
||||||
|
|
||||||
|
// Styles
|
||||||
|
width: $switch-width;
|
||||||
|
height: $switch-height;
|
||||||
|
border: var(--border-width) solid var(--border-color);
|
||||||
|
border-radius: $switch-height;
|
||||||
|
background-color: var(--background-color);
|
||||||
|
line-height: $switch-height;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
--background-color: var(--switch-background-color);
|
||||||
|
--border-color: var(--switch-background-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:checked {
|
||||||
|
--background-color: var(--switch-checked-background-color);
|
||||||
|
--border-color: var(--switch-checked-background-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
display: block;
|
||||||
|
width: calc(#{$switch-height} - (var(--border-width) * 2));
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: var(--color);
|
||||||
|
content: "";
|
||||||
|
|
||||||
|
@if $enable-transitions {
|
||||||
|
transition: margin $switch-transition;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:checked {
|
||||||
|
background-image: none;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
margin-left: calc(#{$switch-width * 0.5} - var(--border-width));
|
||||||
|
margin-inline-start: calc(#{$switch-width * 0.5} - var(--border-width));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Aria-invalid
|
||||||
|
[type="checkbox"],
|
||||||
|
[type="checkbox"]:checked,
|
||||||
|
[type="radio"],
|
||||||
|
[type="radio"]:checked,
|
||||||
|
[type="checkbox"][role="switch"],
|
||||||
|
[type="checkbox"][role="switch"]:checked {
|
||||||
|
|
||||||
|
&[aria-invalid="false"] {
|
||||||
|
--border-color: var(--form-element-valid-border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
&[aria-invalid="true"] {
|
||||||
|
--border-color: var(--form-element-invalid-border-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
352
themes/ccchh/assets/pico-1.5.13/scss/content/_form.scss
Normal file
352
themes/ccchh/assets/pico-1.5.13/scss/content/_form.scss
Normal file
|
|
@ -0,0 +1,352 @@
|
||||||
|
/**
|
||||||
|
* Form elements
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Reboot 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
|
||||||
|
// ––––––––––––––––––––
|
||||||
|
|
||||||
|
// 1. Change the font styles in all browsers
|
||||||
|
// 2. Remove the margin in Firefox and Safari
|
||||||
|
input,
|
||||||
|
optgroup,
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
margin: 0; // 2
|
||||||
|
font-size: 1rem; // 1
|
||||||
|
line-height: var(--line-height); // 1
|
||||||
|
font-family: inherit; // 1
|
||||||
|
letter-spacing: inherit; // 2
|
||||||
|
}
|
||||||
|
|
||||||
|
// Show the overflow in IE.
|
||||||
|
input {
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Remove the inheritance of text transform in Edge, Firefox, and IE
|
||||||
|
select {
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 1. Correct the text wrapping in Edge and IE
|
||||||
|
// 2. Correct the color inheritance from `fieldset` elements in IE
|
||||||
|
// 3. Remove the padding so developers are not caught out when they zero out
|
||||||
|
// `fieldset` elements in all browsers
|
||||||
|
legend {
|
||||||
|
max-width: 100%; // 1
|
||||||
|
padding: 0; // 3
|
||||||
|
color: inherit; // 2
|
||||||
|
white-space: normal; // 1
|
||||||
|
}
|
||||||
|
|
||||||
|
// 1. Remove the default vertical scrollbar in IE
|
||||||
|
textarea {
|
||||||
|
overflow: auto; // 1
|
||||||
|
}
|
||||||
|
|
||||||
|
// Remove the padding in IE 10
|
||||||
|
[type="checkbox"],
|
||||||
|
[type="radio"] {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Correct the cursor style of increment and decrement buttons in Safari
|
||||||
|
::-webkit-inner-spin-button,
|
||||||
|
::-webkit-outer-spin-button {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 1. Correct the odd appearance in Chrome and Safari
|
||||||
|
// 2. Correct the outline style in Safari
|
||||||
|
[type="search"] {
|
||||||
|
-webkit-appearance: textfield; // 1
|
||||||
|
outline-offset: -2px; // 2
|
||||||
|
}
|
||||||
|
|
||||||
|
// Remove the inner padding in Chrome and Safari on macOS
|
||||||
|
[type="search"]::-webkit-search-decoration {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 1. Correct the inability to style clickable types in iOS and Safari
|
||||||
|
// 2. Change font properties to `inherit` in Safari
|
||||||
|
::-webkit-file-upload-button {
|
||||||
|
-webkit-appearance: button; // 1
|
||||||
|
font: inherit; // 2
|
||||||
|
}
|
||||||
|
|
||||||
|
// Remove the inner border and padding of focus outlines in Firefox
|
||||||
|
::-moz-focus-inner {
|
||||||
|
padding: 0;
|
||||||
|
border-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Remove the focus outline in Firefox
|
||||||
|
:-moz-focusring {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Remove the additional :invalid styles in Firefox
|
||||||
|
:-moz-ui-invalid {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Change the inconsistent appearance in IE (opinionated)
|
||||||
|
::-ms-expand {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Remove the border and padding in all browsers (opinionated)
|
||||||
|
[type="file"],
|
||||||
|
[type="range"] {
|
||||||
|
padding: 0;
|
||||||
|
border-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Pico
|
||||||
|
// ––––––––––––––––––––
|
||||||
|
|
||||||
|
// Force height for alternatives input types
|
||||||
|
input:not([type="checkbox"], [type="radio"], [type="range"]) {
|
||||||
|
height: calc(
|
||||||
|
(1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) +
|
||||||
|
(var(--border-width) * 2)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fieldset
|
||||||
|
fieldset {
|
||||||
|
margin: 0;
|
||||||
|
margin-bottom: var(--spacing);
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Label & legend
|
||||||
|
label,
|
||||||
|
fieldset legend {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: calc(var(--spacing) * 0.25);
|
||||||
|
font-weight: var(--form-label-font-weight, var(--font-weight));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Blocks, 100%
|
||||||
|
input:not([type="checkbox"], [type="radio"]),
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Reset appearance (Not Checkboxes, Radios, Range and File)
|
||||||
|
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
appearance: none;
|
||||||
|
padding: var(--form-element-spacing-vertical)
|
||||||
|
var(--form-element-spacing-horizontal);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Commons styles
|
||||||
|
input,
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
--background-color: var(--form-element-background-color);
|
||||||
|
--border-color: var(--form-element-border-color);
|
||||||
|
--color: var(--form-element-color);
|
||||||
|
--box-shadow: none;
|
||||||
|
border: var(--border-width) solid var(--border-color);
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
outline: none;
|
||||||
|
background-color: var(--background-color);
|
||||||
|
box-shadow: var(--box-shadow);
|
||||||
|
color: var(--color);
|
||||||
|
font-weight: var(--font-weight);
|
||||||
|
|
||||||
|
@if $enable-transitions {
|
||||||
|
transition: background-color var(--transition),
|
||||||
|
border-color var(--transition), color var(--transition),
|
||||||
|
box-shadow var(--transition);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Active & Focus
|
||||||
|
input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [readonly]),
|
||||||
|
:where(select, textarea) {
|
||||||
|
&:is(:active, :focus) {
|
||||||
|
--background-color: var(--form-element-active-background-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Active & Focus
|
||||||
|
input:not([type="submit"], [type="button"], [type="reset"], [role="switch"], [readonly]),
|
||||||
|
:where(select, textarea) {
|
||||||
|
&:is(:active, :focus) {
|
||||||
|
--border-color: var(--form-element-active-border-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Focus
|
||||||
|
input:not([type="submit"], [type="button"], [type="reset"], [type="range"], [type="file"], [readonly]),
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
&:focus {
|
||||||
|
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Disabled
|
||||||
|
input:not([type="submit"], [type="button"], [type="reset"])[disabled],
|
||||||
|
select[disabled],
|
||||||
|
textarea[disabled],
|
||||||
|
:where(fieldset[disabled]) :is(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea) {
|
||||||
|
--background-color: var(--form-element-disabled-background-color);
|
||||||
|
--border-color: var(--form-element-disabled-border-color);
|
||||||
|
opacity: var(--form-element-disabled-opacity);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Aria-invalid
|
||||||
|
:where(input, select, textarea) {
|
||||||
|
&:not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
|
||||||
|
&[aria-invalid] {
|
||||||
|
@if $enable-important {
|
||||||
|
padding-right: calc(
|
||||||
|
var(--form-element-spacing-horizontal) + 1.5rem
|
||||||
|
) !important;
|
||||||
|
padding-left: var(--form-element-spacing-horizontal);
|
||||||
|
padding-inline-start: var(--form-element-spacing-horizontal) !important;
|
||||||
|
padding-inline-end: calc(
|
||||||
|
var(--form-element-spacing-horizontal) + 1.5rem
|
||||||
|
) !important;
|
||||||
|
}
|
||||||
|
@else {
|
||||||
|
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
||||||
|
padding-left: var(--form-element-spacing-horizontal);
|
||||||
|
padding-inline-start: var(--form-element-spacing-horizontal);
|
||||||
|
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
||||||
|
}
|
||||||
|
background-position: center right 0.75rem;
|
||||||
|
background-size: 1rem auto;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
&[aria-invalid="false"] {
|
||||||
|
background-image: var(--icon-valid);
|
||||||
|
}
|
||||||
|
|
||||||
|
&[aria-invalid="true"] {
|
||||||
|
background-image: var(--icon-invalid);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&[aria-invalid="false"] {
|
||||||
|
--border-color: var(--form-element-valid-border-color);
|
||||||
|
|
||||||
|
&:is(:active, :focus) {
|
||||||
|
@if $enable-important {
|
||||||
|
--border-color: var(--form-element-valid-active-border-color) !important;
|
||||||
|
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color) !important;
|
||||||
|
}
|
||||||
|
@else {
|
||||||
|
--border-color: var(--form-element-valid-active-border-color);
|
||||||
|
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&[aria-invalid="true"] {
|
||||||
|
--border-color: var(--form-element-invalid-border-color);
|
||||||
|
|
||||||
|
&:is(:active, :focus) {
|
||||||
|
@if $enable-important {
|
||||||
|
--border-color: var(--form-element-invalid-active-border-color) !important;
|
||||||
|
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color) !important;
|
||||||
|
}
|
||||||
|
@else {
|
||||||
|
--border-color: var(--form-element-invalid-active-border-color);
|
||||||
|
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
[dir="rtl"] {
|
||||||
|
:where(input, select, textarea) {
|
||||||
|
&:not([type="checkbox"], [type="radio"]) {
|
||||||
|
&:is([aria-invalid], [aria-invalid="true"], [aria-invalid="false"] ){
|
||||||
|
background-position: center left 0.75rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Placeholder
|
||||||
|
input::placeholder,
|
||||||
|
input::-webkit-input-placeholder,
|
||||||
|
textarea::placeholder,
|
||||||
|
textarea::-webkit-input-placeholder,
|
||||||
|
select:invalid {
|
||||||
|
color: var(--form-element-placeholder-color);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Margin bottom (Not Checkboxes and Radios)
|
||||||
|
input:not([type="checkbox"], [type="radio"]),
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
margin-bottom: var(--spacing);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Select
|
||||||
|
select {
|
||||||
|
// Unstyle the caret on `<select>`s in IE10+.
|
||||||
|
&::-ms-expand {
|
||||||
|
border: 0;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not([multiple], [size]) {
|
||||||
|
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
||||||
|
padding-left: var(--form-element-spacing-horizontal);
|
||||||
|
padding-inline-start: var(--form-element-spacing-horizontal);
|
||||||
|
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
||||||
|
background-image: var(--icon-chevron);
|
||||||
|
background-position: center right 0.75rem;
|
||||||
|
background-size: 1rem auto;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
[dir="rtl"] {
|
||||||
|
select {
|
||||||
|
&:not([multiple], [size]) {
|
||||||
|
background-position: center left 0.75rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Helper
|
||||||
|
$inputs: "input, select, textarea";
|
||||||
|
|
||||||
|
@if ($enable-classes and $enable-grid) {
|
||||||
|
$inputs: $inputs + ", .grid";
|
||||||
|
}
|
||||||
|
|
||||||
|
:where(#{$inputs}) {
|
||||||
|
+ small {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: calc(var(--spacing) * -0.75);
|
||||||
|
margin-bottom: var(--spacing);
|
||||||
|
color: var(--muted-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Styles for Input inside a label
|
||||||
|
label {
|
||||||
|
> :where(input, select, textarea) {
|
||||||
|
margin-top: calc(var(--spacing) * 0.25);
|
||||||
|
}
|
||||||
|
}
|
||||||
33
themes/ccchh/assets/pico-1.5.13/scss/content/_miscs.scss
Normal file
33
themes/ccchh/assets/pico-1.5.13/scss/content/_miscs.scss
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
/**
|
||||||
|
* Miscs
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Reboot 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
|
||||||
|
// ––––––––––––––––––––
|
||||||
|
|
||||||
|
// 1. Correct the inheritance of border color in Firefox
|
||||||
|
// 2. Add the correct box sizing in Firefox
|
||||||
|
hr {
|
||||||
|
height: 0; // 2
|
||||||
|
border: 0;
|
||||||
|
border-top: 1px solid var(--muted-border-color);
|
||||||
|
color: inherit; // 1
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add the correct display in IE 10+
|
||||||
|
[hidden],
|
||||||
|
template {
|
||||||
|
@if $enable-important {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
@else {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add the correct display in IE 9-
|
||||||
|
canvas {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
50
themes/ccchh/assets/pico-1.5.13/scss/content/_table.scss
Normal file
50
themes/ccchh/assets/pico-1.5.13/scss/content/_table.scss
Normal file
|
|
@ -0,0 +1,50 @@
|
||||||
|
/**
|
||||||
|
* Table
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Reboot 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
|
||||||
|
// ––––––––––––––––––––
|
||||||
|
|
||||||
|
// 1. Collapse border spacing in all browsers (opinionated)
|
||||||
|
// 2. Remove text indentation from table contents in Chrome, Edge, and Safari
|
||||||
|
:where(table) {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse; // 1
|
||||||
|
border-spacing: 0;
|
||||||
|
text-indent: 0; // 2
|
||||||
|
}
|
||||||
|
|
||||||
|
// Pico
|
||||||
|
// ––––––––––––––––––––
|
||||||
|
|
||||||
|
// Cells
|
||||||
|
th,
|
||||||
|
td {
|
||||||
|
padding: calc(var(--spacing) / 2) var(--spacing);
|
||||||
|
border-bottom: var(--border-width) solid var(--table-border-color);
|
||||||
|
color: var(--color);
|
||||||
|
font-weight: var(--font-weight);
|
||||||
|
font-size: var(--font-size);
|
||||||
|
text-align: left;
|
||||||
|
text-align: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue