cv-online/scss/nav.scss

189 lines
3.3 KiB
SCSS

$NavLeft_Width: 230px;
$NavLeft_HiddenWidth: 20px;
nav#left{
position: fixed;
left: $NavLeft_HiddenWidth - $NavLeft_Width;
width: $NavLeft_Width;
top: 0;
bottom: 0;
direction: rtl;
overflow-x: hidden;
overflow-y: auto;
z-index: 1;
border-style: solid;
border-width: 0 1px 0 0;
border-color: $ClrTrueBlack;
background-image: url(../img/ui/bggray.png);
@include box-shadow(-4px 0px 10px $ClrBlack inset);
text-align: center;
font-size: large;
@include transition-property(left);
@include transition-duration(0.2s);
@include transition-delay(0.1s);
.arrow{
position: absolute;
right: 0;
top: 50%;
height: 35px;
@include transition-property(opacity);
@include transition-duration(0.2s);
@include transition-delay(0.1s);
}
// <figure> =====================================
figure{
margin: 20px 0 10px 0;
figcaption{
color: $ClrWhite;
font-family: $FontTitle;
font-weight: bold;
font-style: italic;
font-size: 1.2em;
text-decoration: none;
}
}
// <a> =====================================
a{
outline: none !important;
display: block;
padding: 5px;
margin: 7px 20px 7px 20px;
background-color: #303030;
border-style: solid;
border-width: 1px;
border-color: #000;
@include border-radius(3px);
color: $ClrWhite;
font-weight: bold;
text-decoration: none;
text-align: center;
font-size: 1.2em;
@include transition-property(border-color background-color);
@include transition-duration(0.1s);
}
a:hover{
background-color: #383838;
border-color: #202020;
}
a:active, a.active{
background-color: #215D9C;
}
a.external:after{
content: "";
}
a.external:hover{
border-color: #013D6C;
}
a.logo{
display: inline-block;
border-style: none;
background: none;
img{
height: 48px;
}
}
// <footer> =====================================
footer{
margin-top: 20px;
}
}
nav#left:hover, nav#left:active{
left: 0px;
.arrow{
opacity: 0;
}
}
//==========================================================================
$NavTop_Height: 190px;
$NavTop_HiddenHeight: 10px;
nav#top
{
position: fixed;
display: inline-block;
top: 0px;
height: $NavTop_Height;
width: 100%;
color: #5F5F5F;
padding: 4px 0px;
overflow: auto;
background-image: url(../img/ui/bgdark.png);
border-style: solid;
border-width: 0 1px 1px 1px;
border-color: $ClrTrueBlack;
text-align: center;
white-space: nowrap;
@include transition-property(top);
@include transition-duration(0.1s);
.arrow{
position: absolute;
left: calc(50% - 13px);
bottom: 3px;
width: 26px;
}
a{
outline: none !important;
width: auto;
height: auto;
padding: 5px;
margin: 4px 0px 4px 0px;
display: inline-block;
color: $ClrWhite;
font-family: $FontTitle;
font-size: 18px;
font-style: italic;
text-decoration: none;
@include text-shadow(0 0 5px $ClrTrueBlack);
text-align: center;
img{
margin: 4px 4px 0 4px;
width: 128px;
height: 128px;
@include border-radius(10px);
@include box-shadow(0px 0px 10px $ClrTrueBlack);
}
figcaption{
width: 128px;
}
}
a:hover{
@include border-radius(5px);
background-color: rgba(255,255,255,0.15);
}
}
nav#top:hover, nav#top:active
{
top: 0px !important;
}