Zelda64Recomp/assets/scss/styles/components/SubtitleTitle.scss

72 lines
1.4 KiB
SCSS

/*
Example layout:
<button class="subtitle-title" disabled>
<h3>Zelda 64: Recompiled</h3>
<h1>Ocarina of Time</h1>
<div class="subtitle-title__disclaimer">Coming Soon™</div>
</button>
- Variants:
.subtitle-title--right (align to right side)
- Optional:
- <div class="subtitle-title__disclaimer">Coming Soon™</div>
*/
.subtitle-title {
display: block;
position: relative;
width: auto;
height: auto;
flex-direction: column;
align-items: flex-start;
align-content: flex-start;
background-color: rgba(0, 0, 0, 0);
color: $color-text-dim;
cursor: pointer;
text-align: left;
padding: 0;
&--right {
align-content: flex-end;
}
&--right, &--right > * {
text-align: right;
}
&[selected] {
color: $color-text;
cursor: default;
}
&:focus:not(:disabled, [disabled]),
&:hover:not(:disabled, [disabled], [selected]) {
color: $color-primary;
}
&:not(:disabled, [disabled]) {
@extend %nav-all;
}
&:disabled, &[disabled] {
opacity: 0.5;
cursor: default;
tab-index: none;
}
h3 {
margin-bottom: space(6);
}
h1 {
margin-top: space(6);
}
&__disclaimer {
@extend .label-sm;
margin-top: space(16);
}
}