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

Initial commit 🚀

Browse source
This commit is contained in:
Lucas 2019-11-27 15:31:49 +07:00
commit 16c7596319
30 changed files with 5996 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

62
scss/components/_accordion.scss Normal file
View file

@ -0,0 +1,62 @@
/**
* Accordion (<details>)
* Inspiration: https://codepen.io/koca/pen/RyeLLV
*/
details {
display: block;
margin-bottom: $spacing-typography;
padding-bottom: $spacing-typography/2;
border-bottom: 1px solid var(--muted-border);
summary {
list-style-type: none;
cursor: pointer;
line-height: 1rem;
// Reset marker
&::-webkit-details-marker {
display: none;
}
&::marker {
display: none;
}
&::-moz-list-bullet {
list-style-type: none;
}
// Marker
&::after {
$caret-icon-color: "808080"; // Without '#' !important
display: inline-block;
width: 1rem;
height: 1rem;
float: right;
transform: rotate(-90deg);
// Source: https://feathericons.com/
background-image: 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='%23" + $caret-icon-color + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-position: center;
background-repeat: no-repeat;
background-size: 1rem auto;
content: '';
transition: transform $transition;
}
&:focus {
outline: none;
}
}
// Open
&[open] {
summary {
margin-bottom: $spacing-typography/4;
color: var(--muted-text);
&::after {
transform: rotate(0);
}
}
}
}

56
scss/components/_card.scss Normal file
View file

@ -0,0 +1,56 @@
/**
* Card (<article>)
*/
article {
margin: $spacing-block;
margin-right: -$spacing-gutter;
margin-left: -$spacing-gutter;
padding: $spacing-block $spacing-gutter;
background: var(--card-background);
box-shadow: var(--card-shadow);
@if map-get($breakpoints, "sm") {
@media (min-width: map-get($breakpoints, "sm")) {
@if map-get($spacing-factor, "sm") and $enable-responsive-spacings {
margin: ($spacing-block*map-get($spacing-factor, "sm")) 0;
padding: $spacing-block*map-get($spacing-factor, "sm");
}
@else {
margin: $spacing-block 0;
padding: $spacing-block;
}
border-radius: $round;
}
}
@if map-get($breakpoints, "md") and
map-get($spacing-factor, "md") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "md")) {
margin: ($spacing-block*map-get($spacing-factor, "md")) 0;
padding: $spacing-block*map-get($spacing-factor, "md");
}
}
@if map-get($breakpoints, "lg") and
map-get($spacing-factor, "lg") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "lg")) {
margin: ($spacing-block*map-get($spacing-factor, "lg")) 0;
padding: $spacing-block*map-get($spacing-factor, "lg");
}
}
@if map-get($breakpoints, "xl") and
map-get($spacing-factor, "xl") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "xl")) {
margin: ($spacing-block*map-get($spacing-factor, "xl")) 0;
padding: $spacing-block*map-get($spacing-factor, "xl");
}
}
}

71
scss/components/_nav.scss Normal file
View file

@ -0,0 +1,71 @@
/**
* Nav
*/
// Inline
nav,
nav ul {
display: flex;
}
nav {
justify-content: space-between;
ul {
align-items: center;
margin-bottom: 0;
padding: 0;
list-style: none;
&:first-of-type {
margin-left: -$spacing-gutter/2;
}
&:last-of-type {
margin-right: -$spacing-gutter/2;
}
}
li {
display: inline-block;
margin: 0;
padding: $spacing-gutter $spacing-gutter/2;
// HACK: Input & Button inside Nav
> *,
> input:not([type="checkbox"]):not([type="radio"]) {
margin-bottom: 0;
}
}
a {
display: block;
margin: -$spacing-gutter (-$spacing-gutter/2);
padding: $spacing-gutter $spacing-gutter/2;
border-radius: $round;
&:hover,
&:active,
&:focus {
text-decoration: none;
}
}
}
// Vertical Nav
aside {
nav,
ul,
li {
display: block;
}
li {
padding: $spacing-gutter/2;
a {
margin: -$spacing-gutter/2;
padding: $spacing-gutter/2;
}
}
}

59
scss/components/_tooltip.scss Normal file
View file

@ -0,0 +1,59 @@
/**
* Tooltip ([data-tooltip])
*/
[data-tooltip] {
position: relative;
&:not(a):not(button):not(input) {
border-bottom: 1px dotted;
text-decoration: none;
cursor: help;
}
&::before,
&::after {
display: block;
z-index: 99;
position: absolute;
bottom: 100%;
left: 50%;
padding: .25rem .5rem;
overflow: hidden;
transform: translate(-50%, -.25rem);
border-radius: $round;
background: var(--secondary);
color: var(--secondary-inverse);
font-size: .85rem;
font-style: normal;
font-weight: normal;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
content: attr(data-tooltip);
opacity: 0;
pointer-events: none;
transition: opacity $transition;
}
&::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;
color: var(--secondary);
content: '';
}
&:focus,
&:hover {
&::before,
&::after {
opacity: 1;
}
}
}