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

346 lines
5.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);
position: relative;
2019-05-07 04:35:04 +02:00
border-radius: var(--card-radius);
2019-06-11 20:10:58 +02:00
overflow: hidden;
2020-03-18 18:11:37 +01:00
border: 1px solid var(--color-border);
2019-12-18 06:27:08 +01:00
~ .card {
2020-06-01 19:03:19 +02:00
margin-bottom: var(--spacing-m);
2019-12-18 06:27:08 +01:00
}
}
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;
2020-06-01 19:03:19 +02:00
padding: var(--spacing-l);
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);
2020-06-01 19:03:19 +02:00
margin-bottom: var(--spacing-m);
2019-10-03 23:40:54 +02:00
&:last-of-type {
margin-bottom: 0;
}
2019-09-26 18:07:11 +02:00
}
2020-05-04 18:55:10 +02:00
.card--highlighted {
background-color: var(--color-card-background-highlighted);
}
.card--claim-preview-wrap {
@extend .card;
2020-06-01 19:03:19 +02:00
margin: var(--spacing-xl) 0;
2019-09-27 20:56:15 +02:00
min-width: 35rem;
}
2020-03-18 18:11:37 +01:00
.card--data {
display: flex;
align-items: center;
}
.card--after-tabs {
@extend .card;
margin-top: var(--spacing-l);
}
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;
2020-06-01 19:03:19 +02:00
margin-top: var(--spacing-l);
2019-07-21 23:31:22 +02:00
&:only-child {
margin-top: 0;
}
> *:not(:last-child) {
2020-06-01 19:03:19 +02:00
margin-right: var(--spacing-m);
2018-10-09 17:01:54 +02:00
}
@media (max-width: $breakpoint-small) {
> * {
2020-06-01 19:03:19 +02:00
padding-bottom: var(--spacing-m);
}
flex-flow: wrap;
justify-content: space-between;
}
}
2018-03-26 23:32:43 +02:00
2020-05-21 17:38:28 +02:00
.card__title-section {
@extend .section__flex;
2020-06-01 19:03:19 +02:00
padding: var(--spacing-m) var(--spacing-l);
2020-04-03 18:33:48 +02:00
@media (max-width: $breakpoint-small) {
padding: 0;
}
}
2020-05-21 17:38:28 +02:00
.card__title-section--body-list {
2020-06-01 19:03:19 +02:00
padding: var(--spacing-m);
2020-05-21 17:38:28 +02:00
@media (max-width: $breakpoint-small) {
padding: 0;
}
}
2020-08-10 22:47:39 +02:00
.card__title-section--small {
padding: var(--spacing-s) var(--spacing-m);
}
2019-07-21 23:31:22 +02:00
.card__actions--inline {
@extend .card__actions;
margin-top: 0;
2020-05-11 21:54:07 +02:00
@media (max-width: $breakpoint-small) {
.button__content {
svg + .button__label {
display: none;
}
}
}
2019-07-21 23:31:22 +02:00
}
.card__actions--between {
@include between;
align-items: center;
width: 100%;
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-stack {
.card:not(:last-of-type) {
2020-06-01 19:03:19 +02:00
margin-bottom: var(--spacing-l);
}
}
2020-11-13 19:10:47 +01:00
.card ~ .card-stack {
margin-top: var(--spacing-l);
}
.card__list {
2019-01-08 20:16:07 +01:00
column-count: 2;
2020-06-01 19:03:19 +02:00
column-gap: var(--spacing-l);
2019-06-17 22:32:38 +02:00
display: block;
2019-01-08 20:16:07 +01:00
.card {
display: inline-block;
2020-06-01 19:03:19 +02:00
margin-bottom: var(--spacing-l);
2020-08-25 20:07:12 +02:00
width: 100%;
2019-12-18 06:27:08 +01:00
}
@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;
2020-06-01 19:03:19 +02:00
padding: var(--spacing-m) var(--spacing-m) var(--spacing-m) var(--spacing-l);
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 {
display: block;
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) {
2020-06-01 19:03:19 +02:00
margin-right: var(--spacing-m);
}
/* .badge rule inherited from file page prices, should be refactored */
.badge {
float: right;
2020-06-01 19:03:19 +02:00
margin-left: var(--spacing-s);
margin-top: 8px; // should be flex'd, but don't blame me! I just moved it down 3px
}
@media (max-width: $breakpoint-small) {
2020-08-10 22:47:39 +02:00
font-size: var(--font-large);
}
}
2020-08-10 22:47:39 +02:00
.card__title--small {
font-size: var(--font-body);
}
.card__title-actions {
2020-05-21 17:38:28 +02:00
align-self: flex-start;
2020-06-01 19:03:19 +02:00
padding: var(--spacing-m);
2020-10-23 00:11:22 +02:00
padding-right: var(--spacing-l);
@media (max-width: $breakpoint-small) {
padding: 0;
}
}
2021-04-08 17:21:45 +02:00
.card__title-actions--small {
padding: 0;
}
2019-11-22 22:13:00 +01:00
.card__title.card__title--deprecated {
2020-06-01 19:03:19 +02:00
margin-bottom: var(--spacing-s);
2019-11-22 22:13:00 +01:00
}
2019-07-21 23:31:22 +02:00
.card__title--between {
@extend .card__title;
justify-content: space-between;
width: 100%;
& > *:not(:last-child) {
margin-right: 0;
}
2020-08-21 21:44:54 +02:00
@media (max-width: $breakpoint-small) {
align-items: center;
}
}
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
}
2019-09-26 18:07:11 +02:00
.card__header {
position: relative;
display: flex;
align-items: flex-start;
2019-11-22 22:13:00 +01:00
.icon__wrapper {
2020-06-01 19:03:19 +02:00
margin-right: var(--spacing-l);
}
}
.card__header--between {
@extend .card__header;
justify-content: space-between;
align-items: center;
2020-05-21 17:38:28 +02:00
flex-wrap: wrap;
}
.card__header--nowrap {
@extend .card__header--between;
flex-wrap: nowrap;
}
.card__subtitle {
color: var(--color-text-subtitle);
2020-06-01 19:03:19 +02:00
margin: var(--spacing-s) 0;
font-size: var(--font-body);
}
2019-09-26 18:07:11 +02:00
.card__body {
2020-06-01 19:03:19 +02:00
padding: var(--spacing-l);
&:not(.card__body--no-title) {
padding-top: 0;
}
2020-04-29 21:31:11 +02:00
&.card__body--list {
padding: 0;
border-top: 1px solid var(--color-border);
}
@media (max-width: $breakpoint-small) {
2020-06-01 19:03:19 +02:00
padding: var(--spacing-l);
}
2019-09-26 18:07:11 +02:00
}
.card__main-actions {
2020-06-01 19:03:19 +02:00
padding: var(--spacing-l);
2019-11-22 22:13:00 +01:00
padding-bottom: 0;
2020-06-01 19:03:19 +02:00
margin-bottom: var(--spacing-l);
2019-11-22 22:13:00 +01:00
border-top: 1px solid var(--color-border);
&:only-child {
border-top: none;
}
2019-09-26 18:07:11 +02:00
}
.card__body-actions {
2020-06-01 19:03:19 +02:00
padding: var(--spacing-l);
2020-09-11 22:46:15 +02:00
@media (max-width: $breakpoint-small) {
2020-06-01 19:03:19 +02:00
padding: var(--spacing-s);
}
}
.card__header-actions {
border-top: 1px solid var(--color-border);
2020-06-01 19:03:19 +02:00
padding: var(--spacing-l);
width: 100%;
}
2019-09-26 18:07:11 +02:00
.card__body--with-icon,
.card__main-actions--with-icon {
padding-left: 7.5rem;
}
2020-03-18 18:11:37 +01:00
.card__data-subtitle {
display: flex;
align-items: center;
:not(:first-child) {
2020-06-01 19:03:19 +02:00
margin-left: var(--spacing-s);
2020-03-18 18:11:37 +01:00
}
}
.card__header,
.card__body,
.card__main-actions {
@media (max-width: $breakpoint-small) {
2020-06-01 19:03:19 +02:00
padding: var(--spacing-s);
padding-bottom: 0;
margin: 0;
2020-06-01 19:03:19 +02:00
margin-bottom: var(--spacing-s);
}
}
.card__bottom-gutter {
@extend .help;
display: flex;
align-items: center;
2020-06-01 19:03:19 +02:00
margin-top: var(--spacing-m);
&:only-child,
&:first-child {
margin-top: 0;
}
> *:not(:last-child) {
2020-06-01 19:03:19 +02:00
margin-right: var(--spacing-m);
}
}