lbry-desktop/ui/scss/component/_card.scss
2017-08-17 23:37:35 -06:00

256 lines
5.4 KiB
SCSS

@import "../global";
.card {
margin-left: auto;
margin-right: auto;
max-width: var(--card-max-width);
background: var(--card-bg);
box-shadow: var(--card-shadow);
border-radius: var(--card-radius);
margin-bottom: var(--card-margin);
overflow: auto;
}
.card--obscured
{
position: relative;
}
.card--obscured .card__inner {
filter: blur( var(--nsfw-blur-intensity) );
}
.card__title-primary,
.card__title-identity,
.card__actions,
.card__content,
.card__subtext {
padding: 0 var(--card-padding);
}
.card--small {
.card__title-primary,
.card__title-identity,
.card__actions,
.card__content,
.card__subtext {
padding: 0 cacl(var(--card-padding) / 2);
}
}
.card__title-primary {
margin-top: var(--card-margin);
}
.card__title-identity {
margin-top: $spacing-vertical * 1/3;
margin-bottom: $spacing-vertical * 1/3;
}
.card__actions {
margin-top: 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__content {
margin-top: var(--card-margin);
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: rgba(128, 128, 128, 0.8);
color: #fff;
display: flex;
align-items: center;
font-weight: 600;
}
.card__link {
display: block;
}
.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(--translate-card-hover) * 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--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: calc(var(--vertical-spacing) / 2);
}
.card-row {
+ .card-row {
margin-top: calc(var(--vertical-spacing) * 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;
/*hacky way to give space for hover */
padding-right: $padding-right-card-hover-hack;
}
.card-row__header {
margin-bottom: $spacing-vertical;
}
.card-row__scrollhouse {
position: relative;
}
.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: -1 * $padding-right-card-hover-hack;
}
.card__icon-featured-content {
color: orangered;
}