#366: improve os instructions layout and font sizes.

This commit is contained in:
SleepWalker 2017-11-19 21:30:07 +02:00
parent 7de11df662
commit 5f4256634f

View File

@ -1,10 +1,17 @@
@import "~components/ui/fonts.scss"; @import "~components/ui/fonts.scss";
$boxHeight: 140px; $boxHeight: 110px;
$boxPadding: 15px;
@mixin media-old-ifphone {
@media screen and (max-width: 380px) {
@content
}
}
.instructionContainer { .instructionContainer {
position: relative; position: relative;
min-height: $boxHeight; min-height: $boxHeight + $boxPadding * 2;
background: #fff; background: #fff;
border: 1px #fff solid; border: 1px #fff solid;
@ -21,7 +28,7 @@ $boxHeight: 140px;
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
margin: 15px; margin: $boxPadding;
height: $boxHeight; height: $boxHeight;
} }
@ -49,15 +56,19 @@ $boxHeight: 140px;
height: 80px; height: 80px;
color: #444; color: #444;
@media screen and (max-width: 380px) { // for old iPhones @include media-old-ifphone {
height: 60px; height: 60px;
} }
} }
.osName { .osName {
font-size: 16px; font-size: 15px;
margin: 10px 0; margin: 10px 0;
white-space: nowrap; white-space: nowrap;
@include media-old-ifphone {
font-size: 11px;
}
} }
.androidTile { .androidTile {
@ -137,10 +148,14 @@ $boxHeight: 140px;
} }
.osInstruction { .osInstruction {
box-sizing: border-box;
position: relative; position: relative;
z-index: 1; z-index: 1;
margin: 15px;
margin-left: 30%; margin-left: 30%;
padding: 15px; padding-left: 15px;
padding-bottom: 15px;
min-height: $boxHeight;
} }
.instructionTitle { .instructionTitle {
@ -163,9 +178,10 @@ $boxHeight: 140px;
} }
} }
// TODO: прижать это к нижней части
.otherApps { .otherApps {
text-align: right; position: absolute;
right: 0;
bottom: 5px;
font-size: 10px; font-size: 10px;
a { a {