lbry-desktop/ui/scss/component/_card.scss

166 lines
2.9 KiB
SCSS
Raw Normal View History

2017-04-10 14:32:40 +02:00
.card {
2019-11-22 22:13:00 +01:00
background-color: var(--color-card-background);
2019-06-17 22:32:38 +02:00
margin-bottom: var(--spacing-large);
position: relative;
2019-05-07 04:35:04 +02:00
border-radius: var(--card-radius);
2020-01-22 15:26:39 +01:00
box-shadow: var(--card-box-shadow);
2019-06-11 20:10:58 +02:00
overflow: hidden;
2019-12-18 06:27:08 +01:00
@media (max-width: $breakpoint-small) {
margin-bottom: var(--spacing-medium);
}
}
2018-10-17 19:14:24 +02:00
.card--disabled {
opacity: 0.3;
pointer-events: none;
2017-12-01 04:51:55 +01:00
}
2018-10-17 19:14:24 +02:00
.card--section {
2019-06-11 20:10:58 +02:00
position: relative;
padding: var(--spacing-large);
2018-10-17 19:14:24 +02:00
}
2019-06-17 22:32:38 +02:00
.card--reward-total {
background-repeat: no-repeat;
background-size: cover;
2019-11-25 17:54:28 +01:00
color: var(--color-white);
2019-11-22 22:13:00 +01:00
font-size: var(--font-large);
2019-11-07 20:39:22 +01:00
font-weight: var(--font-weight-bold);
2019-06-17 22:32:38 +02:00
}
2019-09-26 18:07:11 +02:00
.card--inline {
2019-11-25 17:54:28 +01:00
border: 1px solid var(--color-border);
2019-09-27 20:56:15 +02:00
border-radius: var(--card-radius);
2019-10-03 23:40:54 +02:00
margin-bottom: var(--spacing-medium);
&:last-of-type {
margin-bottom: 0;
}
2019-09-26 18:07:11 +02:00
}
.card--claim-preview-wrap {
@extend .card;
margin: var(--spacing-xlarge) 0;
2019-09-27 20:56:15 +02:00
min-width: 35rem;
}
2018-10-17 19:14:24 +02:00
.card__actions {
2019-05-01 07:16:12 +02:00
display: flex;
2019-06-17 22:32:38 +02:00
align-items: center;
margin-top: var(--spacing-large);
2019-07-21 23:31:22 +02:00
&:only-child {
margin-top: 0;
}
> *:not(:last-child) {
2019-06-11 20:10:58 +02:00
margin-right: var(--spacing-medium);
2018-10-09 17:01:54 +02:00
}
}
2018-03-26 23:32:43 +02:00
2019-07-21 23:31:22 +02:00
.card__actions--inline {
@extend .card__actions;
margin-top: 0;
}
.card__actions--between {
@include between;
2018-10-17 19:14:24 +02:00
}
.card__actions--center {
display: flex;
2018-03-26 23:32:43 +02:00
align-items: center;
2018-10-17 19:14:24 +02:00
justify-content: center;
}
2018-03-26 23:32:43 +02:00
.card__list {
2019-01-08 20:16:07 +01:00
column-count: 2;
2019-12-18 06:27:08 +01:00
column-gap: var(--spacing-large);
2019-06-17 22:32:38 +02:00
display: block;
2019-01-08 20:16:07 +01:00
.card {
display: inline-block;
2019-12-18 06:27:08 +01:00
margin: 0 0 var(--spacing-large);
}
@media (max-width: $breakpoint-small) {
column-count: 1;
.card {
display: block;
}
2019-01-08 20:16:07 +01:00
}
}
.card__message {
border-left: 0.5rem solid;
2019-06-11 20:10:58 +02:00
padding: var(--spacing-medium) var(--spacing-medium) var(--spacing-medium) var(--spacing-large);
2019-12-09 18:25:13 +01:00
background-color: var(--color-primary-alt);
border-color: var(--color-primary);
2018-07-17 19:43:43 +02:00
}
.card__message--error {
2019-12-09 18:25:13 +01:00
background-color: var(--color-error);
border-color: var(--color-text-error);
}
.card__message--failure {
2019-12-09 18:25:13 +01:00
background-color: var(--color-error);
border-color: var(--color-text-error);
2018-03-26 23:32:43 +02:00
}
.card__title {
2018-10-17 19:14:24 +02:00
display: flex;
2020-01-08 20:46:22 +01:00
flex-wrap: wrap;
align-items: center;
2019-11-22 22:13:00 +01:00
font-size: var(--font-title);
2019-11-07 20:39:22 +01:00
font-weight: var(--font-weight-light);
2019-05-01 07:16:12 +02:00
& > *:not(:last-child) {
2019-06-11 20:10:58 +02:00
margin-right: var(--spacing-medium);
}
}
2019-11-22 22:13:00 +01:00
.card__title.card__title--deprecated {
margin-bottom: var(--spacing-small);
}
2019-07-21 23:31:22 +02:00
.card__title--between {
@extend .card__title;
justify-content: space-between;
}
2019-08-13 07:35:13 +02:00
.card__media--nsfw {
2019-12-09 18:25:13 +01:00
background-color: black;
2019-08-13 07:35:13 +02:00
}
.card__media--disabled {
opacity: 0.5;
pointer-events: none;
}
2019-09-26 18:07:11 +02:00
.card__header {
2019-11-22 22:13:00 +01:00
margin: var(--spacing-medium) var(--spacing-large);
.section__subtitle {
margin-bottom: 0;
}
2019-09-26 18:07:11 +02:00
}
.card__body {
padding: var(--spacing-large);
padding-top: 0;
}
.card__main-actions {
padding: var(--spacing-large);
2019-11-22 22:13:00 +01:00
padding-bottom: 0;
margin-bottom: var(--spacing-large);
border-top: 1px solid var(--color-border);
2019-09-26 18:07:11 +02:00
}
.card__body--with-icon,
.card__main-actions--with-icon {
padding-left: 7.5rem;
}