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

Added a Timeline feature, removed the margin-bottom from article > header > h[1-6] And added the border-color for dark theme on the article > header

Browse source
This commit is contained in:
Yohn 2024-11-12 04:59:34 -05:00
parent 26e82a693d
commit 359e51ee06
245 changed files with 14516 additions and 947 deletions
Download patch file Download diff file Expand all files Collapse all files

9
scss/components/_card.scss
View file

@ -31,6 +31,15 @@
var(#{$css-var-prefix}card-border-color);
border-top-right-radius: var(#{$css-var-prefix}border-radius);
border-top-left-radius: var(#{$css-var-prefix}border-radius);
> h1,
> h2,
> h3,
> h4,
> h5,
> h6 {
margin-bottom: 0;
}
}
> footer {

136
scss/components/_timeline.scss Normal file
View file

@ -0,0 +1,136 @@
@use "sass:string";
@use "sass:map";
@use "sass:math";
@use "../settings" as *; // for spacing, breakpoints, and if columns are defined.
@if map.get($modules, "components/timeline") {
// The actual timeline (the vertical ruler)
#{$parent-selector} .timeline {
position: relative;
max-width: 100%;
margin: 0 auto;
&::after {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 6px;
margin-left: -3px;
background-color: var(#{$css-var-prefix}timeline-line-color);
content: "";
}
// Point around content
> .point {
position: relative;
width: 50%;
padding: 10px 25px;
background-color: inherit;
// circle
&::after {
z-index: 1;
position: absolute;
top: 13px;
right: -13px;
width: 25px;
height: 25px;
border: 4px solid var(#{$css-var-prefix}timeline-dot-border-color);
border-radius: 50%;
background-color: var(#{$css-var-prefix}timeline-dot-background-color);
content: "";
}
// Place the container to the left
&.left {
left: 0;
&::before {
z-index: 1;
position: absolute;
top: 15px;
right: 15px;
width: 0;
height: 0;
border: medium solid var(#{$css-var-prefix}timeline-arrow-color);
border-width: 10px 0 10px 10px;
border-color: transparent
transparent
transparent
var(#{$css-var-prefix}timeline-arrow-color);
content: " ";
}
}
// Place the container to the right
&.right {
left: 50%;
&::before {
z-index: 1;
position: absolute;
top: 15px;
left: 15px;
width: 0;
height: 0;
border: medium solid var(#{$css-var-prefix}timeline-arrow-color);
border-width: 10px 10px 10px 0;
border-color: transparent
var(#{$css-var-prefix}timeline-arrow-color)
transparent
transparent;
content: " ";
}
&::after {
left: -13px;
}
}
}
}
// Media queries - Responsive timeline on screens less than 600px wide
@media screen and (max-width: 600px) {
// Place the timelime to the left
#{$parent-selector} .timeline {
// the line
&::after {
left: 13px;
}
// after = dot
// before = arrow
> .point {
// Full-width containers
width: 100%;
padding-right: 25px;
padding-left: 40px;
// Make all right containers behave like the left ones
&.right {
left: 0;
}
// after = dot
&::after,
&.left::after,
&.right::after {
left: 0;
}
// before = arrow
// Make sure that all arrows are pointing leftwards
// &::before,
&.left::before,
&.right::before {
//left: 60px;
top: 16px;
left: 30px;
border-width: 10px 10px 10px 0;
border-color: transparent var(#{$css-var-prefix}timeline-arrow-color) transparent
transparent;
}
}
}
}
}