208 lines
3.5 KiB
SCSS
208 lines
3.5 KiB
SCSS
.card {
|
|
background-color: $lbry-white;
|
|
border: 1px solid $lbry-gray-1;
|
|
border-radius: 0.5rem;
|
|
margin-bottom: var(--spacing-vertical-large);
|
|
position: relative;
|
|
|
|
html[data-theme='dark'] & {
|
|
background-color: rgba($lbry-white, 0.1);
|
|
border-color: rgba($lbry-white, 0.1);
|
|
}
|
|
}
|
|
|
|
.card--disabled {
|
|
opacity: 0.3;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.card--link {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.card--section {
|
|
padding: var(--spacing-vertical-large);
|
|
|
|
.card__content:not(:last-of-type) {
|
|
margin-bottom: var(--spacing-vertical-large);
|
|
}
|
|
}
|
|
|
|
.card--space-between {
|
|
@include between;
|
|
}
|
|
|
|
.card--wallet-balance {
|
|
background-image: url('../../../static/img/stripe-background.png');
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
color: $lbry-white;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
// C A R D
|
|
// A C T I O N S
|
|
|
|
.card__actions {
|
|
font-size: 1.15rem;
|
|
|
|
> *:not(:last-child) {
|
|
margin-right: var(--spacing-vertical-large);
|
|
}
|
|
}
|
|
|
|
.card__actions--between {
|
|
@include between;
|
|
}
|
|
|
|
.card__actions--bottom-corner {
|
|
right: 2rem;
|
|
bottom: 2rem;
|
|
position: absolute;
|
|
}
|
|
|
|
.card__actions--center {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.card__actions--top-corner {
|
|
top: 0;
|
|
right: 0;
|
|
position: absolute;
|
|
}
|
|
|
|
.card__actions--top-space {
|
|
padding-top: var(--spacing-vertical-small);
|
|
}
|
|
|
|
// C A R D
|
|
// C O N T E N T
|
|
|
|
.card__content {
|
|
font-size: 1.15rem;
|
|
|
|
p:not(:last-child) {
|
|
margin-bottom: var(--spacing-vertical-medium);
|
|
}
|
|
}
|
|
|
|
// C A R D
|
|
// H E A D E R
|
|
|
|
.card__header {
|
|
position: relative;
|
|
|
|
+ .card__content {
|
|
margin-top: var(--spacing-vertical-medium);
|
|
}
|
|
|
|
&:not(.card__header--flat) {
|
|
margin-bottom: var(--spacing-vertical-small);
|
|
}
|
|
}
|
|
|
|
// C A R D
|
|
// I N T E R N A L
|
|
|
|
.card__internal-links {
|
|
top: 2rem;
|
|
right: 2rem;
|
|
position: absolute;
|
|
}
|
|
|
|
// C A R D
|
|
// L I S T
|
|
|
|
.card__list {
|
|
display: grid;
|
|
grid-gap: var(--spacing-vertical-medium);
|
|
}
|
|
|
|
.card__list--rewards {
|
|
column-count: 2;
|
|
column-gap: var(--spacing-vertical-medium);
|
|
margin-bottom: var(--spacing-vertical-large);
|
|
|
|
.card {
|
|
display: inline-block;
|
|
margin: 0 0 var(--spacing-vertical-medium);
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
// C A R D
|
|
// M E T A
|
|
|
|
.card__meta {
|
|
color: $lbry-gray-5;
|
|
padding-top: var(--spacing-vertical-medium);
|
|
padding-bottom: var(--spacing-vertical-medium);
|
|
}
|
|
|
|
// C A R D
|
|
// M E S S A G E
|
|
|
|
.card__message {
|
|
border-left: 0.5rem solid;
|
|
padding: var(--spacing-vertical-medium) var(--spacing-vertical-medium)
|
|
var(--spacing-vertical-medium) var(--spacing-vertical-large);
|
|
|
|
&:not(&--error):not(&--failure):not(&--success) {
|
|
background-color: rgba($lbry-teal-1, 0.1);
|
|
border-color: $lbry-teal-3;
|
|
}
|
|
}
|
|
|
|
.card__message--error {
|
|
background-color: rgba($lbry-orange-1, 0.1);
|
|
border-color: $lbry-orange-3;
|
|
}
|
|
|
|
.card__message--failure {
|
|
background-color: rgba($lbry-red-1, 0.1);
|
|
border-color: $lbry-red-3;
|
|
}
|
|
|
|
.card__message--success {
|
|
background-color: rgba($lbry-green-1, 0.1);
|
|
border-color: $lbry-green-3;
|
|
}
|
|
|
|
// C A R D
|
|
// S U B T I T L E
|
|
|
|
.card__subtitle {
|
|
font-size: 1.25rem;
|
|
margin-bottom: var(--spacing-vertical-small);
|
|
|
|
.badge {
|
|
bottom: -0.12rem;
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
// C A R D
|
|
// T I T L E
|
|
|
|
.card__title {
|
|
font-size: 2rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.card__title--flex {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.card__title + .btn,
|
|
.btn:not(:first-of-type) {
|
|
margin-left: var(--spacing-vertical-medium);
|
|
}
|
|
}
|
|
|
|
.card__title--flex-between {
|
|
display: flex;
|
|
@include between;
|
|
align-items: center;
|
|
}
|