- System manifest (system.json) for Foundry v13 - Project structure with module/, templates/, styles/, lang/, packs/ - Docker Compose for local Foundry development environment - SCSS architecture with parchment theme and accessibility colors - Base system entry point with CONFIG and Handlebars helpers - English localization file with all game terms - Project roadmap with 98 tasks across 11 phases Phase 0 (Foundation) complete. Ready for Phase 1 (Data Models). 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
109 lines
2.0 KiB
SCSS
109 lines
2.0 KiB
SCSS
// Vagabond RPG - Button Styles
|
|
// =============================
|
|
|
|
.vagabond {
|
|
// Primary button
|
|
.btn-primary {
|
|
@include button-primary;
|
|
}
|
|
|
|
// Secondary button
|
|
.btn-secondary {
|
|
@include button-secondary;
|
|
}
|
|
|
|
// Small button variant
|
|
.btn-sm {
|
|
padding: $spacing-1 $spacing-2;
|
|
font-size: $font-size-xs;
|
|
}
|
|
|
|
// Large button variant
|
|
.btn-lg {
|
|
padding: $spacing-3 $spacing-6;
|
|
font-size: $font-size-lg;
|
|
}
|
|
|
|
// Icon button (square, for icons only)
|
|
.btn-icon {
|
|
@include button-base;
|
|
@include flex-center;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
padding: 0;
|
|
background-color: transparent;
|
|
border-color: transparent;
|
|
|
|
&:hover:not(:disabled) {
|
|
background-color: $color-parchment-dark;
|
|
}
|
|
|
|
i {
|
|
font-size: $font-size-base;
|
|
}
|
|
}
|
|
|
|
// Rollable button (for dice rolls)
|
|
.btn-roll {
|
|
@include button-base;
|
|
background-color: $color-parchment-light;
|
|
color: $color-text-primary;
|
|
border-color: $color-border;
|
|
|
|
&:hover:not(:disabled) {
|
|
background-color: $color-accent-highlight;
|
|
border-color: $color-accent-primary;
|
|
}
|
|
|
|
i {
|
|
margin-right: $spacing-2;
|
|
}
|
|
}
|
|
|
|
// Danger button
|
|
.btn-danger {
|
|
@include button-base;
|
|
background-color: $color-danger;
|
|
color: $color-text-inverse;
|
|
border-color: darken($color-danger, 10%);
|
|
|
|
&:hover:not(:disabled) {
|
|
background-color: darken($color-danger, 10%);
|
|
}
|
|
}
|
|
|
|
// Success button
|
|
.btn-success {
|
|
@include button-base;
|
|
background-color: $color-success;
|
|
color: $color-text-inverse;
|
|
border-color: darken($color-success, 10%);
|
|
|
|
&:hover:not(:disabled) {
|
|
background-color: darken($color-success, 10%);
|
|
}
|
|
}
|
|
|
|
// Button group
|
|
.btn-group {
|
|
display: inline-flex;
|
|
|
|
.btn-primary,
|
|
.btn-secondary {
|
|
border-radius: 0;
|
|
|
|
&:first-child {
|
|
border-radius: $radius-md 0 0 $radius-md;
|
|
}
|
|
|
|
&:last-child {
|
|
border-radius: 0 $radius-md $radius-md 0;
|
|
}
|
|
|
|
&:not(:last-child) {
|
|
border-right: none;
|
|
}
|
|
}
|
|
}
|
|
}
|