spee.ch/client/scss/asset-display/_asset-display.scss

95 lines
1.5 KiB
SCSS
Raw Normal View History

2018-06-09 02:23:11 +02:00
.asset-display {
display: flex;
2018-07-20 18:58:18 +02:00
flex: 1 0 auto;
flex-direction: column;
2018-07-20 18:58:18 +02:00
justify-content: center;
2018-10-11 21:51:34 +02:00
2018-10-21 21:52:10 +02:00
background: #F6F6F6;
2018-10-11 21:51:34 +02:00
width: 100%;
position: relative;
&:before,
&:after {
content: '';
position: absolute;
2018-10-21 21:52:10 +02:00
box-shadow: inset 0 1px 2px 2px rgba(169, 173, 186, 0.2);
2018-10-11 21:51:34 +02:00
width: 100%;
height: 1px;
background: transparent;
left: 0;
top: 0;
}
&:after {
top: auto;
bottom: 0;
}
2018-06-09 02:23:11 +02:00
}
2018-10-11 21:51:34 +02:00
.asset-title {
2018-10-11 21:51:34 +02:00
margin-top: 40px;
font-weight: normal;
font-size: 26px;
color: #2E2F31;
letter-spacing: 0;
text-align: center;
line-height: 32px;
}
2018-06-09 02:23:11 +02:00
.asset-image, .asset-video {
2018-10-11 21:51:34 +02:00
margin : 60px 0;
2018-06-09 02:23:11 +02:00
max-width: 100%;
max-height: 100%;
object-fit: contain;
object-position: center;
2018-06-09 02:23:11 +02:00
}
.asset-video {
2018-07-20 18:58:18 +02:00
border: 1px solid #d0d0d0;
margin: 16px;
padding: 6px;
}
2018-10-11 21:51:34 +02:00
// .vertical-split .asset-display {
// height: 90vh;
// }
.visible-content {
width: 100%;
margin: 0 0 40px;
padding-bottom: 25px;
box-shadow: 0 1px 3px 2px rgba(169, 173, 186, 0.2);
&.closed {
box-shadow: none;
}
2018-10-11 21:51:34 +02:00
}
.asset-information-wrap {
max-width: 800px;
.horizontal-split {
justify-content: center;
.column {
&:first-child {
padding-right: 40px;
}
&:last-child {
padding-left: 40px;
2018-10-21 21:59:43 +02:00
border-left: 1px solid #9095a54d;
}
}
}
p.asset-description {
white-space: pre-line;
font-size: 14px;
color: #2E2F31;
letter-spacing: 0;
line-height: 18px;
2018-10-11 22:36:16 +02:00
width: 360px;
}
.asset-information {
width: 341px;
}
}