bbfb0fea67
This is a presentational component for horizontal banks of icons (and sometimes other stuff). Convert <FileCard /> and <FileTile /> to use <IconSet /> Factor out "downloaded/published" icon into its own component Add Featured Content icon to file tiles Add alignment style for Featured Content icon Update CHANGELOG.md Handle featured content icon adjustment in _icons.scss Remove IconSet component Converted back to a presentational span and move positioning styles into card SCSS Fix spacing between price and icons in file tiles and cards Before, it would be missing the space if there was a "local file" icon but no featured content icon. Rewrite Icon component to use semantic icons Now you can pass in a constant that indicates the meaning of the icon within the interface, e.g. icons.FEATURED instead of "icon-rocket". Also adds the appropriate title. All icons should eventually be updated to use this. Remove IconFeatured and IconLocal in favor of new Icon component Add space between Featured and Local icons In the conversion to a generic Icon component, we lost the styles that added padding on the left for FeaturedIcon and LocalIcon. Fix how rocket icon position is adjusted Before, it was using a negative margin, which altered the shape of the bounding box. Changed to use relative positioning. Add support for styling LBRY icons Move style for Featured icon into icons.js Uses new class name format for LBRY icon styles
291 lines
No EOL
6.2 KiB
SCSS
291 lines
No EOL
6.2 KiB
SCSS
.card {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
max-width: var(--card-max-width);
|
|
background: var(--card-bg);
|
|
box-shadow: var(--box-shadow-layer);
|
|
border-radius: var(--card-radius);
|
|
margin-bottom: var(--card-margin);
|
|
overflow: auto;
|
|
|
|
//below added to prevent scrollbar on long titles when show page loads, would prefer a cleaner CSS solution
|
|
overflow-x: hidden;
|
|
}
|
|
.card--obscured
|
|
{
|
|
position: relative;
|
|
}
|
|
.card--obscured .card__inner {
|
|
filter: blur( var(--nsfw-blur-intensity) );
|
|
}
|
|
.card__title-primary,
|
|
.card__title-identity,
|
|
.card__content,
|
|
.card__subtext,
|
|
.card__actions {
|
|
padding: 0 var(--card-padding);
|
|
}
|
|
.card--small {
|
|
.card__title-primary,
|
|
.card__title-identity,
|
|
.card__actions,
|
|
.card__content,
|
|
.card__subtext {
|
|
padding: 0 calc(var(--card-padding) / 2);
|
|
}
|
|
}
|
|
.card__title-primary {
|
|
margin-top: var(--card-margin);
|
|
margin-bottom: var(--card-margin);
|
|
}
|
|
.card__title-primary .meta {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.card__title-identity {
|
|
margin-top: $spacing-vertical * 1/3;
|
|
margin-bottom: $spacing-vertical * 1/3;
|
|
}
|
|
.card__actions {
|
|
margin-top: var(--card-margin);
|
|
margin-bottom: var(--card-margin);
|
|
}
|
|
.card__actions--bottom {
|
|
margin-top: $spacing-vertical * 1/3;
|
|
margin-bottom: $spacing-vertical * 1/3;
|
|
}
|
|
.card__actions--form-submit {
|
|
margin-top: $spacing-vertical;
|
|
margin-bottom: var(--card-margin);
|
|
}
|
|
.card__action--right {
|
|
float: right;
|
|
}
|
|
.card__content {
|
|
margin-top: var(--card-margin);
|
|
margin-bottom: var(--card-margin);
|
|
table:not(:last-child) {
|
|
margin-bottom: var(--card-margin);
|
|
}
|
|
}
|
|
$font-size-subtext-multiple: 0.82;
|
|
.card__subtext {
|
|
color: var(--color-meta-light);
|
|
font-size: calc( var(--font-size-subtext-multiple) * 1.0em );
|
|
margin-top: $spacing-vertical * 1/3;
|
|
margin-bottom: $spacing-vertical * 1/3;
|
|
}
|
|
.card__subtext--allow-newlines {
|
|
white-space: pre-wrap;
|
|
}
|
|
.card__subtext--two-lines {
|
|
height: calc( var(--font-size) * var(--font-size-subtext-multiple) * var(--font-line-height) * 2); /*this is so one line text still has the proper height*/
|
|
}
|
|
.card-overlay {
|
|
position: absolute;
|
|
left: 0px;
|
|
right: 0px;
|
|
top: 0px;
|
|
bottom: 0px;
|
|
padding: 20px;
|
|
background-color: var(--color-dark-overlay);
|
|
color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.card__link {
|
|
display: block;
|
|
cursor: pointer;
|
|
}
|
|
.card--link {
|
|
transition: transform 120ms ease-in-out;
|
|
}
|
|
.card--link:hover {
|
|
position: relative;
|
|
z-index: 1;
|
|
box-shadow: var(--box-shadow-focus);
|
|
transform: scale(var(--card-link-scaling)) translateX(var(--card-hover-translate));
|
|
transform-origin: 50% 50%;
|
|
overflow-x: visible;
|
|
overflow-y: visible
|
|
}
|
|
.card--link:hover ~ .card--link {
|
|
transform: translateX(calc(var(--card-hover-translate) * 2));
|
|
}
|
|
|
|
.card__media {
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
background-position: 50% 50%;
|
|
}
|
|
|
|
.card__media--autothumb {
|
|
position: relative
|
|
}
|
|
.card__media--autothumb.purple {
|
|
background-color: #9c27b0
|
|
}
|
|
.card__media--autothumb.red {
|
|
background-color: #e53935
|
|
}
|
|
.card__media--autothumb.pink {
|
|
background-color: #e91e63
|
|
}
|
|
.card__media--autothumb.indigo {
|
|
background-color: #3f51b5
|
|
}
|
|
.card__media--autothumb.blue {
|
|
background-color: #2196f3
|
|
}
|
|
.card__media--autothumb.light-blue {
|
|
background-color: #039be5
|
|
}
|
|
.card__media--autothumb.cyan {
|
|
background-color: #00acc1
|
|
}
|
|
.card__media--autothumb.teal {
|
|
background-color: #009688
|
|
}
|
|
.card__media--autothumb.green {
|
|
background-color: #43a047
|
|
}
|
|
.card__media--autothumb.yellow {
|
|
background-color: #ffeb3b
|
|
}
|
|
.card__media--autothumb.orange {
|
|
background-color: #ffa726
|
|
}
|
|
|
|
.card__media--autothumb .card__autothumb__text {
|
|
font-size: 2.0em;
|
|
width: 100%;
|
|
color: #ffffff;
|
|
text-align: center;
|
|
position: absolute;
|
|
top: 36%
|
|
}
|
|
|
|
.card__indicators {
|
|
float: right;
|
|
}
|
|
|
|
.card--small {
|
|
width: var(--card-small-width);
|
|
overflow-x: hidden;
|
|
white-space: normal;
|
|
}
|
|
.card--small .card__media {
|
|
height: calc( var(--card-small-width) * 9 / 16);
|
|
}
|
|
|
|
.card--form {
|
|
width: calc( var(--input-width) + var(--card-padding) * 2);
|
|
}
|
|
|
|
.card__subtitle {
|
|
color: var(--color-help);
|
|
font-size: 0.85em;
|
|
line-height: calc( var(--font-line-height) * 1 / 0.85);
|
|
}
|
|
|
|
.card-series-submit
|
|
{
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
max-width: var(--card-max-width);
|
|
padding: $spacing-vertical / 2;
|
|
}
|
|
|
|
.card-row {
|
|
+ .card-row {
|
|
margin-top: $spacing-vertical * 1/3;
|
|
}
|
|
}
|
|
|
|
$padding-top-card-hover-hack: 20px;
|
|
$padding-right-card-hover-hack: 30px;
|
|
|
|
.card-row__items {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
|
|
/*hacky way to give space for hover */
|
|
padding-top: $padding-top-card-hover-hack;
|
|
margin-top: -1 * $padding-top-card-hover-hack;
|
|
padding-right: $padding-right-card-hover-hack;
|
|
margin-right: -1 * $padding-right-card-hover-hack;
|
|
> .card {
|
|
vertical-align: top;
|
|
display: inline-block;
|
|
}
|
|
> .card + .card {
|
|
margin-left: $spacing-vertical / 3;
|
|
}
|
|
}
|
|
|
|
.card-row--small {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
width: 100%;
|
|
min-width: var(--card-small-width);
|
|
margin-right: $spacing-vertical;
|
|
}
|
|
.card-row__header {
|
|
margin-bottom: $spacing-vertical / 3;
|
|
}
|
|
|
|
.card-row__scrollhouse {
|
|
position: relative;
|
|
/*hacky way to give space for hover */
|
|
padding-right: $padding-right-card-hover-hack;
|
|
}
|
|
|
|
.card-row__nav {
|
|
position: absolute;
|
|
padding: 0 var(--card-margin);
|
|
height: 100%;
|
|
top: calc( $padding-top-card-hover-hack - var(--card-margin) );
|
|
}
|
|
.card-row__nav .card-row__scroll-button {
|
|
background: var(--card-bg);
|
|
color: var(--color-help);
|
|
box-shadow: var(--box-shadow-layer);
|
|
padding: $spacing-vertical $spacing-vertical / 2;
|
|
position: absolute;
|
|
cursor: pointer;
|
|
left: 0;
|
|
top: 36%;
|
|
z-index: 2;
|
|
opacity: 0.8;
|
|
transition: transform 60ms ease-in-out;
|
|
|
|
&:hover {
|
|
opacity: 1.0;
|
|
transform: scale(calc( var(--card-link-scaling) * 1.1));
|
|
}
|
|
}
|
|
.card-row__nav--left {
|
|
left: 0;
|
|
}
|
|
.card-row__nav--right {
|
|
right: 0;
|
|
}
|
|
|
|
/*
|
|
if we keep doing things like this, we should add a real grid system, but I'm going to be a selective dick about it - Jeremy
|
|
*/
|
|
.card-grid {
|
|
$margin-card-grid: $spacing-vertical * 2/3;
|
|
display:flex;
|
|
flex-wrap: wrap;
|
|
> .card {
|
|
width: $width-page-constrained / 2 - $margin-card-grid / 2;
|
|
flex-grow:1;
|
|
}
|
|
> .card:nth-of-type(2n - 1):not(:last-child) {
|
|
margin-right: $margin-card-grid;
|
|
}
|
|
} |