Josep Piguillem
c2b5291a74
Laravel-based OAuth/IAM service with Passport, Vue 3 frontend, and Docker Compose setup for local and production deployment. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
69 lines
1.4 KiB
SCSS
69 lines
1.4 KiB
SCSS
@use '../abstracts/variables' as *;
|
|
|
|
.bar-list {
|
|
background: var(--color-surface);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: $radius-xl;
|
|
padding: $space-5;
|
|
}
|
|
|
|
.bar-list__title {
|
|
font-size: $font-sm;
|
|
font-weight: 500;
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.bar-list__empty {
|
|
margin-top: $space-3;
|
|
font-size: $font-sm;
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.bar-list__items {
|
|
margin-top: $space-4;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $space-3;
|
|
}
|
|
|
|
.bar-list__row-head {
|
|
margin-bottom: $space-1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-size: $font-xs;
|
|
}
|
|
|
|
.bar-list__label {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.bar-list__value {
|
|
margin-left: $space-2;
|
|
flex-shrink: 0;
|
|
color: var(--color-text-secondary);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.bar-list__track {
|
|
height: 0.875rem;
|
|
width: 100%;
|
|
border-radius: $radius-full;
|
|
background: var(--color-surface-muted);
|
|
}
|
|
|
|
.bar-list__fill {
|
|
height: 0.875rem;
|
|
border-radius: 0 $radius-full $radius-full 0;
|
|
background: var(--series-1, var(--color-accent));
|
|
transition: filter 100ms;
|
|
}
|
|
|
|
.bar-list__row:hover .bar-list__fill,
|
|
.bar-list__row:focus-within .bar-list__fill {
|
|
filter: brightness(1.1);
|
|
}
|