Make flag CSS a bit more common between normal and mobile layouts

This commit is contained in:
2017-11-27 12:41:30 -08:00
committed by Andrew Cassidy
parent 3116807a30
commit c2766d316c
2 changed files with 144 additions and 147 deletions

View File

@ -1,3 +1,3 @@
$mobile-width: 800px;
$mobile-width: 600px;
$mobile-header-height: 70px;

View File

@ -74,20 +74,19 @@ $animate-time: 0.03s;
size: 20px;
weight: 600;
}
position: absolute;
position: relative;
line-height: normal;
text-align: center;
float: right;
width: 160px;
right:0;
top:15px;
top:12px;
color: $sidebar-text;
}
@media screen and (min-width: $mobile-width) {
#navFlags {
.flag {
display: inline-block;
position: relative;
@ -107,7 +106,6 @@ $animate-time: 0.03s;
float: left;
height: 50px;
width: 160px;
border-radius: 0 5px 5px 0;
@ -189,7 +187,6 @@ $animate-time: 0.03s;
mask-image: url('../svg/fold.svg');
-webkit-mask-image: url('../svg/fold.svg');
}
}
.flag:hover {
@ -213,8 +210,6 @@ $animate-time: 0.03s;
}
}
}
}
@media screen and (max-width: $mobile-width) {
#sidebar{
@ -236,17 +231,19 @@ $animate-time: 0.03s;
li {
flex-grow: 1;
flex-shrink: 0;
width: 120px;
}
}
#navLinks {
display: none;
}
.flag {
text-decoration: none;
display: block;
flex-shrink: 0;
flex-grow: 1;
margin: 5px;
//text-decoration: none;
.flagPoint, .flagFold {
display: none;
}
@ -255,19 +252,19 @@ $animate-time: 0.03s;
border-radius: 5px;
display: block;
height: 50px;
padding: {
left: 10px;
right: 10px;
}
}
.flagText {
display: block;
position: relative;
width: 100%;
}
}
}
}
#navLinks {
display: none;
.flag:hover a {
text-decoration: underline;
}
}