2575c5d448
* Add ordering Icons * Refactor doCollectionEdit - It required claims as parameter, when only uris are used to populate the collection, so that was changed to pass down the uris instead. - There were unused and mostly unnecessary functions inside, for example the parameter claimIds was never used so it would never enter the claimSearch function which again would be used to generate uris, so it's better to just use uris as parameter * Add List Reordering changes * Add toggle button for list editing * Add toggle on content page collection sidebar * Enable drag-n-drop to re-order list items https://www.youtube.com/watch?v=aYZRRyukuIw * Allow removing all unavailable claims from a List * Fix <g> on icons * Fix section buttons positioning * Move preventDefault and stopPropagation to buttons div instead of each button, preventing clicking even if disabled opening the claim * Change dragging cursor * Fix sizing * Fix dragging component * Restrict dragging to vertical axis * Ignore shuffle state for ordering * Fix console errors * Mobile fixes * Fix sidebar spacing * Fix grey on mobile after click
902 lines
16 KiB
SCSS
902 lines
16 KiB
SCSS
.claim-list {
|
|
.claim-preview__wrapper {
|
|
border-bottom: 1px solid var(--color-border);
|
|
}
|
|
}
|
|
|
|
.claim-list__header {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
margin: var(--spacing-m) 0;
|
|
margin-top: 0;
|
|
font-size: var(--font-body);
|
|
|
|
.spinner {
|
|
margin-left: var(--spacing-m);
|
|
}
|
|
}
|
|
|
|
.claim-list__dropdown {
|
|
padding: 0 var(--spacing-m);
|
|
padding-right: var(--spacing-xl);
|
|
background-position: right var(--spacing-m) center;
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
.claim-list__header-label {
|
|
position: absolute;
|
|
transform: translateY(-130%);
|
|
font-size: var(--font-xsmall);
|
|
color: var(--color-text-subtitle);
|
|
overflow: visible;
|
|
|
|
.icon {
|
|
margin-right: var(--spacing-xs);
|
|
stroke: var(--color-text-subtitle);
|
|
}
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
position: static;
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
.claim-list__conjuction {
|
|
color: var(--color-text-subtitle);
|
|
font-size: var(--font-small);
|
|
}
|
|
|
|
.claim-list__alt-controls {
|
|
align-self: flex-start;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: auto;
|
|
|
|
& > * {
|
|
margin-left: var(--spacing-s);
|
|
}
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.claim-list__alt-controls--wrap {
|
|
@extend .claim-list__alt-controls;
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
}
|
|
|
|
.claim-preview__wrapper {
|
|
@include font-sans;
|
|
padding: var(--spacing-m);
|
|
list-style: none;
|
|
|
|
&:hover {
|
|
.claim__menu-button {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.claim-preview__wrapper--notice {
|
|
background-color: var(--color-notice);
|
|
}
|
|
|
|
.claim-preview__wrapper--inline {
|
|
padding: 0;
|
|
}
|
|
|
|
.claim-preview__wrapper--small {
|
|
padding: var(--spacing-s);
|
|
|
|
.button--uri-indicator {
|
|
max-width: 12rem;
|
|
}
|
|
}
|
|
|
|
.claim-preview {
|
|
flex: 1;
|
|
display: flex;
|
|
position: relative;
|
|
overflow: visible;
|
|
|
|
&:not(.claim-preview--inline):not(.claim-preview--pending):not(.claim-preview--inactive) {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.media__thumb {
|
|
overflow: hidden;
|
|
$width: var(--file-list-thumbnail-width);
|
|
width: $width;
|
|
@include handleClaimListGifThumbnail($width);
|
|
|
|
flex-shrink: 0;
|
|
margin-right: var(--spacing-m);
|
|
}
|
|
|
|
.media__thumb-placeholder-text {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: var(--spacing-m);
|
|
}
|
|
|
|
.channel-thumbnail {
|
|
@include handleChannelGif(6rem);
|
|
}
|
|
|
|
// show watch later button and duration divs when hovered
|
|
&:hover {
|
|
.claim-preview__hover-actions {
|
|
display: block;
|
|
}
|
|
.claim-preview__file-property-overlay {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
font-size: 14px;
|
|
|
|
.channel-thumbnail {
|
|
@include handleChannelGif(4rem);
|
|
}
|
|
}
|
|
}
|
|
|
|
.claim-preview__empty {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.claim-preview--large {
|
|
border: none;
|
|
min-height: 8rem;
|
|
|
|
&:hover {
|
|
background-color: transparent;
|
|
}
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
min-height: 4rem;
|
|
}
|
|
|
|
.media__thumb {
|
|
width: 14rem;
|
|
@include handleClaimListGifThumbnail(14rem);
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
min-height: 5rem;
|
|
width: 8rem;
|
|
}
|
|
}
|
|
|
|
.channel-thumbnail {
|
|
width: 7.5rem;
|
|
@include handleChannelGif(7.5rem);
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
width: 5rem;
|
|
@include handleChannelGif(5rem);
|
|
}
|
|
}
|
|
|
|
.claim-preview__text {
|
|
height: 7.5rem;
|
|
}
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
.channel-thumbnail {
|
|
@include handleChannelGif(6rem);
|
|
}
|
|
|
|
.claim-preview__text {
|
|
height: 3.5rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.claim-preview--small {
|
|
.channel-thumbnail {
|
|
@include handleChannelGif(4rem);
|
|
}
|
|
|
|
.media__subtitle {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
.claim-preview--collection-mine {
|
|
padding-left: 9rem;
|
|
position: relative;
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
padding-left: 6.5rem;
|
|
}
|
|
}
|
|
|
|
.claim-preview--pending {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.claim-preview--padded {
|
|
padding: var(--spacing-s);
|
|
}
|
|
|
|
.claim-preview--inline {
|
|
.channel-thumbnail {
|
|
@include handleChannelGif(3rem);
|
|
|
|
@media (min-width: $breakpoint-small) {
|
|
@include handleChannelGif(var(--channel-thumbnail-width--small));
|
|
}
|
|
}
|
|
|
|
.claim-preview__actions {
|
|
align-self: flex-end;
|
|
margin-bottom: auto;
|
|
width: auto;
|
|
}
|
|
|
|
.claim-preview__text {
|
|
width: 100%;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
}
|
|
|
|
@media (max-width: $breakpoint-xsmall) {
|
|
.claim-preview__actions {
|
|
.claim-preview__primary-actions {
|
|
.button {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.claim-preview__text {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.claim-preview__title {
|
|
font-weight: var(--font-weight-bold);
|
|
font-size: var(--font-body);
|
|
margin-right: var(--spacing-l);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
max-width: 100%;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.claim-preview__channel-sub-count {
|
|
color: var(--color-text-subtitle);
|
|
font-size: var(--font-small);
|
|
}
|
|
|
|
.claim-preview__custom-properties {
|
|
text-align: right;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.claim-preview-metadata {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
}
|
|
|
|
.claim-preview-metadata-sub-upload {
|
|
position: relative;
|
|
//margin-left: 4px;
|
|
display: flex;
|
|
text-align: left;
|
|
}
|
|
|
|
.claim-preview-info {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.claim-preview-info,
|
|
.claim-preview-properties {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.claim-preview__actions {
|
|
align-self: flex-end;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
|
|
@media (min-width: $breakpoint-small) {
|
|
flex-direction: row;
|
|
}
|
|
}
|
|
|
|
.claim-preview__primary-actions {
|
|
@extend .section__actions;
|
|
margin-right: 0;
|
|
margin-top: var(--spacing-s);
|
|
|
|
&:first-child {
|
|
.button {
|
|
margin-top: var(--spacing-s);
|
|
}
|
|
}
|
|
}
|
|
|
|
.claim-preview__actions--header {
|
|
@extend .claim-preview__actions;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.claim-preview__button {
|
|
margin-left: 2rem;
|
|
}
|
|
|
|
.claim-preview-properties {
|
|
align-items: flex-end;
|
|
flex: 1;
|
|
font-size: var(--font-small);
|
|
color: var(--color-text-subtitle);
|
|
}
|
|
|
|
.claim-upload {
|
|
flex: 1;
|
|
display: flex;
|
|
position: relative;
|
|
overflow: visible;
|
|
padding: var(--spacing-m);
|
|
|
|
.media__thumb {
|
|
width: var(--file-list-thumbnail-width);
|
|
flex-shrink: 0;
|
|
margin-right: var(--spacing-m);
|
|
}
|
|
}
|
|
|
|
.claim-upload__progress--label {
|
|
font-size: var(--font-small);
|
|
color: var(--color-text-subtitle);
|
|
}
|
|
|
|
.claim-upload__progress--outer {
|
|
width: 100%;
|
|
}
|
|
|
|
.claim-upload__progress--inner {
|
|
background: var(--color-primary-alt);
|
|
padding: var(--spacing-xxs);
|
|
height: 2.4rem;
|
|
}
|
|
|
|
.claim-upload__progress--inner-text {
|
|
position: absolute;
|
|
width: 80%;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
//
|
|
// The _other_ way to view claims
|
|
// A grid of tiles
|
|
// It should probably go into it's own file once we add more to it
|
|
//
|
|
.claim-grid {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
list-style: none;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.claim-grid__wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
&:not(:first-of-type) {
|
|
margin-top: var(--spacing-l);
|
|
}
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
&:not(:first-of-type) {
|
|
margin-top: var(--spacing-m);
|
|
}
|
|
}
|
|
}
|
|
|
|
.claim-grid__header {
|
|
margin-bottom: var(--spacing-m);
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.button {
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
.icon__wrapper {
|
|
width: 0.5rem;
|
|
height: 0.5rem;
|
|
background-color: var(--color-primary-alt);
|
|
margin-right: var(--spacing-m);
|
|
|
|
.icon {
|
|
stroke: var(--color-primary);
|
|
}
|
|
|
|
@media (min-width: $breakpoint-small) {
|
|
height: 1.5rem;
|
|
width: 1.5rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.claim-grid__header--between {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.claim-grid__title {
|
|
font-weight: 300;
|
|
font-size: var(--font-large);
|
|
margin-right: var(--spacing-m);
|
|
display: flex;
|
|
}
|
|
|
|
.claim-grid__title-span {
|
|
display: flex;
|
|
}
|
|
|
|
.claim-grid__title--empty {
|
|
color: var(--color-text-help);
|
|
margin-left: var(--spacing-s);
|
|
}
|
|
|
|
.claim-grid__title--first {
|
|
text-align: center;
|
|
width: 100%;
|
|
margin-bottom: var(--spacing-l);
|
|
|
|
.no-evil {
|
|
font-size: var(--font-heading);
|
|
}
|
|
}
|
|
|
|
.claim-grid__title--secondary {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.claim-grid__help {
|
|
margin-bottom: 12px;
|
|
|
|
svg {
|
|
stroke: var(--color-text-subtitle);
|
|
}
|
|
}
|
|
|
|
.claim-preview--tile {
|
|
margin-bottom: var(--spacing-m);
|
|
margin-right: 0;
|
|
margin-top: 0;
|
|
margin-left: var(--spacing-m);
|
|
justify-content: flex-start;
|
|
list-style: none;
|
|
|
|
.media__thumb {
|
|
border-bottom-right-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
}
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
|
|
.claim__menu-button {
|
|
opacity: 1;
|
|
}
|
|
.collection-preview__overlay-thumbs {
|
|
opacity: 1;
|
|
transition: 0.3s;
|
|
}
|
|
}
|
|
|
|
@media (min-width: $breakpoint-large) {
|
|
$width: calc((100% - var(--spacing-m) * 5) / 6);
|
|
width: $width;
|
|
@include handleClaimTileGifThumbnail($width);
|
|
|
|
&:first-child,
|
|
&:nth-child(6n + 1) {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
@media (max-width: $breakpoint-large) and (min-width: $breakpoint-medium) {
|
|
$width: calc((100% - var(--spacing-m) * 3) / 4);
|
|
width: $width;
|
|
@include handleClaimTileGifThumbnail($width);
|
|
|
|
&:first-child,
|
|
&:nth-child(4n + 1) {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
@media (max-width: $breakpoint-medium) and (min-width: $breakpoint-small) {
|
|
$width: calc((100vw - var(--side-nav-width--micro) - var(--spacing-xl) * 3) / 3);
|
|
width: $width;
|
|
@include handleClaimTileGifThumbnail($width);
|
|
|
|
&:first-child,
|
|
&:nth-child(3n + 1) {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
$width: 100%;
|
|
width: $width;
|
|
@include handleClaimTileGifThumbnail($width);
|
|
margin-left: 0;
|
|
|
|
&:not(:first-child) {
|
|
margin-top: var(--spacing-s);
|
|
}
|
|
}
|
|
}
|
|
|
|
.claim-preview--horizontal-tile {
|
|
&:not(:first-child) {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
.claim-tile__title {
|
|
position: relative;
|
|
padding: var(--spacing-s);
|
|
padding-right: var(--spacing-xl);
|
|
padding-bottom: 0;
|
|
margin-bottom: var(--spacing-s);
|
|
|
|
font-weight: 600;
|
|
color: var(--color-text);
|
|
font-size: var(--font-small);
|
|
min-height: 3.2rem;
|
|
|
|
@media (min-width: $breakpoint-small) {
|
|
min-height: 2.5rem;
|
|
}
|
|
}
|
|
|
|
.claim-tile__info {
|
|
display: flex;
|
|
margin-top: var(--spacing-s);
|
|
border-top: 1px solid var(--color-border);
|
|
color: var(--color-subtitle);
|
|
padding: var(--spacing-s);
|
|
|
|
.channel-thumbnail {
|
|
@include handleChannelGif(2.1rem);
|
|
margin-right: var(--spacing-s);
|
|
}
|
|
}
|
|
|
|
.claim-tile-collection__info {
|
|
display: flex;
|
|
color: var(--color-subtitle);
|
|
|
|
.channel-thumbnail {
|
|
@include handleChannelGif(2.1rem);
|
|
margin-right: var(--spacing-s);
|
|
}
|
|
}
|
|
|
|
.claim-tile__about {
|
|
font-size: var(--font-xsmall);
|
|
color: var(--color-text-subtitle);
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
|
|
> * {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.claim-tile__publishes {
|
|
font-size: var(--font-xsmall);
|
|
}
|
|
|
|
.claim-tile__about--channel {
|
|
@extend .claim-tile__about;
|
|
flex: 1;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: var(--font-body);
|
|
}
|
|
|
|
.claim-tile__about--counts {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.claim-preview__file-property-overlay {
|
|
position: absolute;
|
|
bottom: var(--spacing-xxs);
|
|
right: var(--spacing-xxs);
|
|
background-color: var(--color-black);
|
|
padding: 0.3rem;
|
|
border-radius: var(--border-radius);
|
|
z-index: 2;
|
|
opacity: 0.7;
|
|
|
|
// show full opacity for touch devices
|
|
@media (pointer: fine), (pointer: coarse) {
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.file-properties {
|
|
color: var(--color-white);
|
|
}
|
|
|
|
.file-price {
|
|
padding: 0.1rem;
|
|
}
|
|
}
|
|
|
|
.claim-preview__claim-property-overlay {
|
|
position: absolute;
|
|
bottom: var(--spacing-xxs);
|
|
right: var(--spacing-xxs);
|
|
background-color: var(--color-black);
|
|
padding: 0.3rem;
|
|
border-radius: var(--border-radius);
|
|
opacity: 0.7;
|
|
z-index: 2;
|
|
|
|
.claim-preview__overlay-properties {
|
|
color: var(--color-white);
|
|
}
|
|
|
|
.file-price {
|
|
padding: 0.1rem;
|
|
}
|
|
}
|
|
|
|
.claim-preview__collection-wrapper {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
left: 0;
|
|
z-index: 2;
|
|
overflow: hidden;
|
|
}
|
|
|
|
// show duration and watch later button when hovered
|
|
.claim-preview--tile {
|
|
&:hover {
|
|
.claim-preview__hover-actions {
|
|
display: block;
|
|
}
|
|
.claim-preview__file-property-overlay {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.claim-preview__repost-author {
|
|
transform: translateY(calc(var(--spacing-xs) * -1));
|
|
font-size: var(--font-xsmall);
|
|
color: var(--color-text-subtitle);
|
|
}
|
|
|
|
.claim-preview__repost-icon {
|
|
margin-right: var(--spacing-xxs);
|
|
margin-bottom: -1px; // Offset it slightly because it doesn't look aligned next to all lowercase text + the @ from a channel
|
|
}
|
|
|
|
.claim-tile__repost-author {
|
|
margin: var(--spacing-s);
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
// div that displays watch later button
|
|
.claim-preview__hover-actions {
|
|
// if the user is using a mouse
|
|
@media (pointer: fine) {
|
|
display: none;
|
|
}
|
|
|
|
// if the user doesn't have a pointer (mouse etc) hide watch later button
|
|
@media (pointer: none), (pointer: coarse) {
|
|
display: none !important;
|
|
}
|
|
|
|
position: relative;
|
|
float: right;
|
|
top: var(--spacing-xxs);
|
|
margin-right: var(--spacing-xxs);
|
|
|
|
& > * {
|
|
color: var(--color-text);
|
|
background-color: var(--color-black);
|
|
border-radius: var(--border-radius);
|
|
padding: var(--spacing-xxs);
|
|
margin-right: 0;
|
|
&:hover {
|
|
background-color: var(--color-button-alt-bg);
|
|
}
|
|
}
|
|
|
|
.button--file-action,
|
|
.download-text {
|
|
display: block;
|
|
margin: 0 0;
|
|
padding: var(--spacing-xxs) var(--spacing-xxs);
|
|
height: unset;
|
|
|
|
// label (with 'Add' text) hidden by default
|
|
.button__label {
|
|
color: var(--color-text);
|
|
font-size: var(--font-small);
|
|
display: none;
|
|
}
|
|
|
|
// show the additional watch later text (Add) when hovered
|
|
&:hover {
|
|
.button__label {
|
|
display: inline;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.claim-preview__active {
|
|
background-color: var(--color-card-background-highlighted);
|
|
}
|
|
|
|
.claim-preview__live {
|
|
.claim-preview__file-property-overlay {
|
|
opacity: 1; // The original 0.7 is not visible over bright thumbnails
|
|
color: var(--color-white-alt);
|
|
background-color: var(--color-live);
|
|
}
|
|
|
|
.file-properties {
|
|
font-weight: var(--font-weight-bold);
|
|
margin-top: 2px; // Even out bottom spacing due to all caps "LIVE".
|
|
}
|
|
}
|
|
|
|
.claim-link {
|
|
@include font-sans;
|
|
position: relative;
|
|
}
|
|
|
|
.claim-preview__null-label {
|
|
margin: auto;
|
|
}
|
|
|
|
.claim-preview__channel-staked {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.channel-thumbnail {
|
|
@include handleChannelGif(1.4rem);
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
.claim-tile__header {
|
|
position: relative;
|
|
|
|
.claim__menu-button {
|
|
right: 0.2rem;
|
|
}
|
|
}
|
|
|
|
.menu__button {
|
|
&.claim__menu-button {
|
|
position: absolute;
|
|
top: var(--spacing-xs);
|
|
right: var(--spacing-xs);
|
|
}
|
|
|
|
&.claim__menu-button--inline {
|
|
position: relative;
|
|
@extend .button--alt;
|
|
width: var(--height-button);
|
|
padding: 0;
|
|
border-radius: var(--border-radius);
|
|
align-self: flex-end;
|
|
}
|
|
}
|
|
|
|
@media (min-width: $breakpoint-small) {
|
|
.claim-preview--tile:not(:hover),
|
|
.claim-preview__wrapper:not(:hover) {
|
|
.claim__menu-button:not(:focus):not([aria-expanded='true']) {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.claim-preview__overlay-properties {
|
|
display: flex;
|
|
position: relative;
|
|
align-items: center;
|
|
color: var(--color-text-help);
|
|
white-space: nowrap;
|
|
font-size: var(--font-xsmall);
|
|
line-height: 1.2;
|
|
margin-left: 0;
|
|
margin-top: auto;
|
|
|
|
& > *:not(:last-child) {
|
|
margin-right: var(--spacing-xxs);
|
|
}
|
|
}
|
|
|
|
.claim-preview__overlay-properties--small {
|
|
line-height: 0.9;
|
|
font-size: var(--font-xxsmall);
|
|
}
|
|
|
|
.claim__tags {
|
|
font-size: var(--font-xsmall);
|
|
line-height: 1.2;
|
|
margin-left: 0;
|
|
margin-top: auto;
|
|
position: relative;
|
|
|
|
.tag {
|
|
@media (max-width: $breakpoint-xsmall) {
|
|
display: none;
|
|
}
|
|
font-size: var(--font-xsmall);
|
|
}
|
|
|
|
& > *:not(:last-child) {
|
|
margin-right: var(--spacing-xxs);
|
|
}
|
|
}
|
|
|
|
.claim__tags--large {
|
|
flex-wrap: wrap;
|
|
margin-left: 0;
|
|
|
|
& > * {
|
|
margin-top: var(--spacing-s);
|
|
}
|
|
}
|
|
|
|
.web-upload-item.claim-preview {
|
|
@media (max-width: $breakpoint-small) {
|
|
display: block;
|
|
|
|
.media__thumb {
|
|
margin-bottom: var(--spacing-s);
|
|
}
|
|
|
|
.claim-preview-metadata {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|