LBRYCommunity/spee.ch
1
0
Fork 0
Code Issues 95 Pull requests 2 Projects Releases 4 Packages Wiki Activity

Added spacing between selectors.

Browse source
This commit is contained in:
Minesh Mitha 2018-10-25 19:57:54 +01:00
parent 8ade24f501
commit fe2bc7de69
1 changed files with 16 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
client/scss/asset-display/_asset-display.scss
View file

@ -40,6 +40,7 @@
max-height: 100%; max-height: 100%;
object-fit: contain; object-fit: contain;
object-position: center; object-position: center;
@media (max-width: $break-point-small) { @media (max-width: $break-point-small) {
max-width: calc(100% - 30px); max-width: calc(100% - 30px);
} }
@ -55,12 +56,15 @@
margin: 0; margin: 0;
padding-bottom: 30px; padding-bottom: 30px;
position: relative; position: relative;
&.closed { &.closed {
box-shadow: none; box-shadow: none;
&:after { &:after {
box-shadow: none; box-shadow: none;
} }
} }
&:before{ &:before{
content: ''; content: '';
width: 100%; width: 100%;
@ -69,6 +73,7 @@
z-index: 100; z-index: 100;
box-shadow: inset 2px 3px 3px 2px rgba(169, 173, 186, 0.2); box-shadow: inset 2px 3px 3px 2px rgba(169, 173, 186, 0.2);
} }
&:after { &:after {
content: ''; content: '';
width: 100%; width: 100%;
@ -78,11 +83,11 @@
z-index: 100; z-index: 100;
box-shadow: 0px 2px 3px 2px rgba(169, 173, 186, 0.2); box-shadow: 0px 2px 3px 2px rgba(169, 173, 186, 0.2);
} }
} }
.asset-information-wrap { .asset-information-wrap {
max-width: 800px; max-width: 800px;
@media (max-width: $break-point-tablet) { @media (max-width: $break-point-tablet) {
max-width: 100%; max-width: 100%;
margin: 0px auto; margin: 0px auto;
@ -95,12 +100,15 @@
.horizontal-split { .horizontal-split {
justify-content: center; justify-content: center;
.column { .column {
padding-top: 40px; padding-top: 40px;
&:first-child { &:first-child {
padding-right: 40px; padding-right: 40px;
margin-right: -1px; margin-right: -1px;
border-right: 1px solid $grey-alt; border-right: 1px solid $grey-alt;
@media (max-width: $break-point-tablet) { @media (max-width: $break-point-tablet) {
order: 2; order: 2;
border: none; border: none;
@ -108,16 +116,17 @@
margin: 0; margin: 0;
} }
} }
&:last-child { &:last-child {
padding-left: 60px; padding-left: 60px;
border-left: 1px solid $grey-alt; border-left: 1px solid $grey-alt;
@media (max-width: $break-point-tablet) { @media (max-width: $break-point-tablet) {
border: none; border: none;
padding: 40px 0 0 0; padding: 40px 0 0 0;
margin: 0; margin: 0;
} }
} }
} }
} }
@ -129,6 +138,7 @@
line-height: 18px; line-height: 18px;
width: 360px; width: 360px;
padding-bottom: 80px; padding-bottom: 80px;
@media (max-width: $break-point-tablet) { @media (max-width: $break-point-tablet) {
padding: 0; padding: 0;
width: 100%; width: 100%;
@ -136,8 +146,10 @@
margin: 22px 0 60px; margin: 22px 0 60px;
} }
} }
.asset-information { .asset-information {
width: 320px; width: 320px;
@media (max-width: $break-point-tablet) { @media (max-width: $break-point-tablet) {
min-width: 100%; min-width: 100%;
width: 100%; width: 100%;
@ -152,12 +164,14 @@
padding-top: 30px; padding-top: 30px;
border-top: 1px solid $grey-alt; border-top: 1px solid $grey-alt;
padding-bottom: 80px; padding-bottom: 80px;
@media (max-width: $break-point-tablet) { @media (max-width: $break-point-tablet) {
padding-top: 22px; padding-top: 22px;
padding-bottom: 0; padding-bottom: 0;
} }
.claim-address { .claim-address {
.link--brand { .link--brand {
font-size: 14px; font-size: 14px;
font-weight: 300; font-weight: 300;