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

Build CSS

Browse source
This commit is contained in:
github-actions[bot] 2024-12-31 05:18:39 +00:00
parent ddf41a191a
commit 951aae3801
77 changed files with 7702 additions and 7702 deletions
Download patch file Download diff file Expand all files Collapse all files

272
scss/components/_timeline.scss
View file

@ -1,136 +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;
}
}
}
}
}
@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;
}
}
}
}
}