- client: fix guide tab styles

This commit is contained in:
Ildar Kamalov 2020-08-01 17:12:29 +03:00
parent 3cecd6f090
commit b9aa969a56
3 changed files with 32 additions and 3 deletions

View file

@ -13,3 +13,17 @@
margin-bottom: 20px;
font-size: 15px;
}
.guide__address {
display: block;
margin-bottom: 7px;
font-size: 13px;
font-weight: 700;
}
@media screen and (min-width: 768px) {
.guide__address {
display: list-item;
font-size: 15px;
}
}

View file

@ -24,8 +24,8 @@ const SetupGuide = ({
<div className="mt-1">
<Trans>install_devices_address</Trans>:
</div>
<div className="mt-2 font-weight-bold">
{dnsAddresses.map((ip) => <li key={ip}>{ip}</li>)}
<div className="mt-3">
{dnsAddresses.map((ip) => <li key={ip} className="guide__address">{ip}</li>)}
</div>
</div>
<Guide dnsAddresses={dnsAddresses} />

View file

@ -2,8 +2,16 @@
display: flex;
justify-content: space-between;
margin-bottom: 15px;
padding: 15px 0;
padding: 10px 0;
border-bottom: 1px solid #e8e8e8;
overflow: auto;
}
@media screen and (min-width: 768px) {
.tabs__controls {
padding: 15px 0;
overflow: initial;
}
}
.tabs__controls--form {
@ -26,11 +34,18 @@
align-items: center;
min-width: 70px;
font-size: 13px;
white-space: nowrap;
color: #555555;
cursor: pointer;
opacity: 0.6;
}
@media screen and (min-width: 768px) {
.tab__control {
white-space: normal;
}
}
.tab__control:hover,
.tab__control:focus {
opacity: 1;