feat: Add a breadcrumb

This commit is contained in:
kbe
2025-08-19 09:54:49 +02:00
parent 90340d03aa
commit 686ece4479
55 changed files with 24172 additions and 2 deletions

View File

@@ -0,0 +1,228 @@
//
// Accordion styles //
//
.accordion {
list-style-type: none;
padding: 0;
li {
border: 0;
margin-bottom: 8px;
padding: 0;
@include transition(linear 0.1s);
&:last-child {
margin-bottom: 0;
}
.accordion-title {
position: relative;
border: 1px solid get-color("dark", 0.1);
padding: 14px 24px;
cursor: pointer;
@include transition(linear 0.1s);
&:before, &:after {
content: '';
position: absolute;
top: 50%;
@include transform(translateY(-50%));
background: black;
}
&:before {
right: 24px;
width: 11px;
height: 1px;
}
&:after {
right: 29px;
width: 1px;
height: 11px;
@include transition(linear 0.1s);
}
h1,h2,h3,h4,h5,h6 {
margin: 0;
}
* {
@include transition(linear 0.1s);
}
}
.accordion-content {
overflow: hidden;
max-height: 0;
padding: 0 25px;
@include transition(ease-out 0.2s);
&:before {
content: '';
display: block;
width: 100%;
height: 20px;
}
&:after {
content: '';
display: block;
width: 100%;
height: 12px;
}
ul, ol {
li {
border: 0;
padding: 0;
&:last-child {
border: 0;
}
}
}
ul {
list-style-type: disc;
ul { list-style-type: circle; }
}
ol {
&.list-ordered {
li {
margin-bottom: 8px;
padding-left: 34px;
&:last-child {
margin: 0;
}
}
}
}
.nav {
list-style-type: none;
}
}
&.active {
.accordion-title {
border-color: get-color("dark", 0.9);
&:after {
@include transform(translateY(-50%) rotate(-90deg));
}
}
}
}
//
// Accordion - Style 2 //
//
&.style-2 {
li {
margin-bottom: 14px;
padding: 0;
&:last-child {
margin-bottom: 0;
}
.accordion-title {
border: 0;
border-bottom: 1px solid get-color("dark", 0.2);
padding: 0 0 10px;
@include transition(linear 0.1s);
&:before, &:after {
margin-top: -6px;
}
&:before { right: 0; }
&:after { right: 5px; }
}
.accordion-content {
padding: 0 20px;
}
&.active {
.accordion-title {
border-bottom-color: get-color("dark", 0.9);
}
}
}
}
//
// Accordion - Style 3 //
//
&.style-3 {
li {
.accordion-title {
background: $bg-gray-lighter;
border: 0;
}
.accordion-content {
padding: 0 24px;
}
&.active {
.accordion-title {
background: $bg-dark;
color: get-color("white", 0.8);
&:before, &:after {
background: white;
}
h1,h2,h3,h4,h5,h6 {
color: white;
}
}
}
}
}
//
// Border Radius //
//
&.border-radius {
&:not(.style-2) {
li {
.accordion-title {
border-radius: 0.375em;
}
}
}
}
&.rounded {
&:not(.style-2) {
li {
.accordion-title {
border-radius: 50px;
}
}
}
}
}
[class*='bg-gray'] {
.accordion {
&.style-3 {
li {
.accordion-title {
background: white;
}
}
}
}
}
.bg-black,
[class*='bg-dark'],
[class*='bg-gradient-'],
[class*='bg-color-'] {
.accordion {
li {
.accordion-title {
border-color: get-color("white", 0.2);
&:before, &:after {
background: white;
}
}
&.active {
.accordion-title {
border-color: white;
}
}
}
&.style-3 {
li {
.accordion-title {
background: get-color("white", 0.1);
}
&.active {
.accordion-title {
background: white;
color: $color-primary;
&:before, &:after {
background: black;
}
h1,h2,h3,h4,h5,h6 {
color: black;
}
}
}
}
}
}
}