breadcrumb scss 추가
This commit is contained in:
현성필
@@ -0,0 +1,212 @@
|
||||
// -----------------------------------------------------------------------------
|
||||
// Breadcrumb Navigation Component
|
||||
// Based on Figma: node 1339-3649
|
||||
// Background: #e9f8ff, Height: 60px
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
.breadcrumb-container {
|
||||
background-color: #e9f8ff;
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
max-width: $container-max-width;
|
||||
margin: 0 auto;
|
||||
padding: 0 $spacing-lg;
|
||||
width: 100%;
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
gap: 12px;
|
||||
padding: 0 $spacing-md;
|
||||
}
|
||||
|
||||
// Home icon
|
||||
&-home {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
flex-shrink: 0;
|
||||
|
||||
svg {
|
||||
width: 18px;
|
||||
height: 17px;
|
||||
fill: #8c959f;
|
||||
transition: $transition-fast;
|
||||
}
|
||||
|
||||
&:hover svg {
|
||||
fill: $primary-blue;
|
||||
}
|
||||
}
|
||||
|
||||
// Separator arrow icon
|
||||
&-separator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
flex-shrink: 0;
|
||||
|
||||
svg {
|
||||
width: 6.5px;
|
||||
height: 12px;
|
||||
fill: #5f666c;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
||||
svg {
|
||||
width: 5px;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Breadcrumb item (text link)
|
||||
&-item {
|
||||
font-family: $font-family-primary;
|
||||
font-size: 16px;
|
||||
font-weight: $font-weight-regular;
|
||||
line-height: 1;
|
||||
color: #5f666c;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
transition: $transition-fast;
|
||||
|
||||
&:hover {
|
||||
color: $primary-blue;
|
||||
}
|
||||
|
||||
// Current/Active item (last item)
|
||||
&--active {
|
||||
font-weight: $font-weight-bold;
|
||||
color: #212529;
|
||||
|
||||
&:hover {
|
||||
color: #212529;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Alternative: Using list structure
|
||||
.breadcrumb-nav {
|
||||
background-color: #e9f8ff;
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.breadcrumb-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
max-width: $container-max-width;
|
||||
margin: 0 auto;
|
||||
padding: 0 $spacing-3xl;
|
||||
height: 100%;
|
||||
list-style: none;
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
gap: 12px;
|
||||
padding: 0 $spacing-md;
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb-list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
// Add separator after each item except last
|
||||
&:not(:last-child)::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 6.5px;
|
||||
height: 12px;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='12' viewBox='0 0 7 12' fill='none'%3E%3Cpath d='M1 1L6 6L1 11' stroke='%235F666C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
width: 5px;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
font-family: $font-family-primary;
|
||||
font-size: 16px;
|
||||
font-weight: $font-weight-regular;
|
||||
line-height: 1;
|
||||
color: #5f666c;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
transition: $transition-fast;
|
||||
|
||||
&:hover {
|
||||
color: $primary-blue;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
// Current page (last item)
|
||||
&:last-child a {
|
||||
font-weight: $font-weight-bold;
|
||||
color: #212529;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// Home icon styling
|
||||
&:first-child a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
font-size: 0; // Hide text, show only icon
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 18px;
|
||||
height: 17px;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='17' viewBox='0 0 18 17' fill='none'%3E%3Cpath d='M1 6.5L9 1L17 6.5V15C17 15.5304 16.7893 16.0391 16.4142 16.4142C16.0391 16.7893 15.5304 17 15 17H3C2.46957 17 1.96086 16.7893 1.58579 16.4142C1.21071 16.0391 1 15.5304 1 15V6.5Z' stroke='%238C959F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
transition: $transition-fast;
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='17' viewBox='0 0 18 17' fill='none'%3E%3Cpath d='M1 6.5L9 1L17 6.5V15C17 15.5304 16.7893 16.0391 16.4142 16.4142C16.0391 16.7893 15.5304 17 15 17H3C2.46957 17 1.96086 16.7893 1.58579 16.4142C1.21071 16.0391 1 15.5304 1 15V6.5Z' stroke='%230049B4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user