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

274 lines
5.7 KiB
SCSS
Raw Normal View History

2017-04-10 14:32:40 +02:00
@import "../global";
$padding-card-horizontal: $spacing-vertical * 2/3;
$translate-card-hover: 10px;
2017-07-29 20:12:13 +02:00
$width-card-small: $spacing-vertical * 10;
2017-04-10 14:32:40 +02:00
.card {
margin-left: auto;
margin-right: auto;
2017-04-13 20:52:26 +02:00
max-width: $width-page-constrained;
2017-04-10 14:32:40 +02:00
background: $color-bg;
box-shadow: $box-shadow-layer;
2017-04-10 14:32:40 +02:00
border-radius: 2px;
margin-bottom: $spacing-vertical * 2/3;
overflow: auto;
}
.card--obscured
{
position: relative;
}
.card--obscured .card__inner {
filter: blur($blur-intensity-nsfw);
2017-04-10 14:32:40 +02:00
}
2017-07-20 00:13:19 +02:00
.card__title-primary,
.card__title-identity,
.card__content,
2017-08-26 05:21:26 +02:00
.card__subtext,
.card__actions {
padding-left: $padding-card-horizontal;
padding-right: $padding-card-horizontal;
2017-07-20 00:13:19 +02:00
}
.card--small {
.card__title-primary,
.card__title-identity,
.card__actions,
.card__content,
.card__subtext {
padding: 0 $padding-card-horizontal / 2;
}
}
.card__title-primary {
2017-06-08 02:56:52 +02:00
margin-top: $spacing-vertical * 2/3;
2017-08-26 05:21:26 +02:00
margin-bottom: $spacing-vertical * 2/3;
2017-04-10 14:32:40 +02:00
}
.card__title-identity {
margin-top: $spacing-vertical * 1/3;
margin-bottom: $spacing-vertical * 1/3;
}
.card__actions {
margin-top: $spacing-vertical * 2/3;
margin-bottom: $spacing-vertical * 2/3;
}
.card__content {
margin-top: $spacing-vertical * 2/3;
margin-bottom: $spacing-vertical * 2/3;
}
2017-07-29 20:12:13 +02:00
$font-size-subtext-multiple: 0.82;
2017-04-10 14:32:40 +02:00
.card__subtext {
2017-07-20 00:13:19 +02:00
color: $color-meta-light;
2017-07-29 20:12:13 +02:00
font-size: $font-size-subtext-multiple * 1.0em;
2017-07-17 16:50:07 +02:00
margin-top: $spacing-vertical * 1/3;
margin-bottom: $spacing-vertical * 1/3;
2017-04-10 14:32:40 +02:00
}
2017-04-13 20:52:26 +02:00
.card__subtext--allow-newlines {
white-space: pre-wrap;
}
2017-04-10 14:32:40 +02:00
.card__subtext--two-lines {
2017-07-29 20:12:13 +02:00
height: $font-size * $font-size-subtext-multiple * $font-line-height * 2; /*this is so one line text still has the proper height*/
2017-04-10 14:32:40 +02:00
}
.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;
}
2017-04-12 04:01:45 +02:00
$card-link-scaling: 1.1;
.card__link {
2017-04-10 14:32:40 +02:00
display: block;
2017-04-12 04:01:45 +02:00
}
2017-07-11 21:41:37 +02:00
.card--link {
transition: transform 120ms ease-in-out;
}
2017-04-12 04:01:45 +02:00
.card--link:hover {
position: relative;
z-index: 1;
box-shadow: $box-shadow-focus;
2017-07-31 21:45:15 +02:00
transform: scale($card-link-scaling) translateX($translate-card-hover);
2017-04-12 04:01:45 +02:00
transform-origin: 50% 50%;
overflow-x: visible;
overflow-y: visible
}
.card--link:hover ~ .card--link {
transform: translateX($translate-card-hover * 2);
2017-04-12 04:01:45 +02:00
}
.card__media {
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
2017-04-10 14:32:40 +02:00
}
2017-07-14 01:18:28 +02:00
.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%
}
2017-07-29 20:12:13 +02:00
2017-04-12 04:01:45 +02:00
2017-04-10 14:32:40 +02:00
.card--small {
width: $width-card-small;
2017-04-12 04:01:45 +02:00
overflow-x: hidden;
white-space: normal;
2017-04-10 14:32:40 +02:00
}
.card--small .card__media {
2017-04-12 04:01:45 +02:00
height: $width-card-small * 9 / 16;
2017-04-10 14:32:40 +02:00
}
2017-07-19 01:00:13 +02:00
.card--form {
width: $width-input-text + $padding-card-horizontal * 2;
}
2017-04-10 14:32:40 +02:00
.card__subtitle {
2017-04-10 20:12:07 +02:00
color: $color-help;
2017-04-10 14:32:40 +02:00
font-size: 0.85em;
2017-04-10 20:12:07 +02:00
line-height: $font-line-height * 1 / 0.85;
2017-04-10 14:32:40 +02:00
}
.card-series-submit
{
margin-left: auto;
margin-right: auto;
2017-04-13 20:52:26 +02:00
max-width: $width-page-constrained;
2017-04-10 14:32:40 +02:00
padding: $spacing-vertical / 2;
}
.card-row {
+ .card-row {
margin-top: $spacing-vertical * 1/3;
}
}
2017-07-29 20:12:13 +02:00
$padding-top-card-hover-hack: 20px;
2017-07-29 20:34:02 +02:00
$padding-right-card-hover-hack: 30px;
.card-row__items {
2017-07-29 20:12:13 +02:00
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;
2017-07-29 20:34:02 +02:00
padding-right: $padding-right-card-hover-hack;
margin-right: -1 * $padding-right-card-hover-hack;
2017-04-10 14:32:40 +02:00
> .card {
vertical-align: top;
display: inline-block;
}
2017-07-29 20:12:13 +02:00
> .card + .card {
margin-left: $spacing-vertical / 3;
2017-04-10 14:32:40 +02:00
}
}
2017-07-29 20:34:02 +02:00
2017-04-12 04:01:45 +02:00
.card-row--small {
overflow: hidden;
2017-04-12 04:01:45 +02:00
white-space: nowrap;
2017-07-29 20:34:02 +02:00
/*hacky way to give space for hover */
padding-right: $padding-right-card-hover-hack;
2017-04-12 04:01:45 +02:00
}
2017-04-10 14:32:40 +02:00
.card-row__header {
margin-bottom: $spacing-vertical / 3;
}
2017-07-29 20:12:13 +02:00
.card-row__scrollhouse {
position: relative;
}
.card-row__nav {
position: absolute;
2017-07-29 20:12:13 +02:00
padding: 0 $spacing-vertical * 2 / 3;
height: 100%;
top: $padding-top-card-hover-hack - $spacing-vertical * 2 / 3;
}
.card-row__nav .card-row__scroll-button {
background: $color-bg;
color: $color-help;
box-shadow: $box-shadow-layer;
padding: $spacing-vertical $spacing-vertical / 2;
position: absolute;
cursor: pointer;
left: 0;
top: 36%;
z-index: 2;
2017-07-29 20:12:13 +02:00
opacity: 0.8;
transition: transform 60ms ease-in-out;
&:hover {
opacity: 1.0;
transform: scale($card-link-scaling * 1.1)
}
}
2017-07-29 20:12:13 +02:00
.card-row__nav--left {
left: 0;
}
2017-07-29 20:12:13 +02:00
.card-row__nav--right {
2017-07-29 20:34:02 +02:00
right: -1 * $padding-right-card-hover-hack;
}
2017-07-30 00:56:08 +02:00
.card__icon-featured-content {
color: orangered;
2017-08-26 05:21:26 +02:00
}
/*
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;
}
2017-08-31 15:12:03 +02:00
> .card:nth-of-type(2n - 1):not(:last-child) {
2017-08-26 05:21:26 +02:00
margin-right: $margin-card-grid;
}
2017-07-30 00:56:08 +02:00
}