cv-online/scss/nav.scss

193 lines
3.2 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(#{$ImgPath}/ui/bggray.png);
box-shadow: -4px 0px 10px $ClrBlack inset;
text-align: center;
font-size: large;
transition-property: left;
transition-duration: 0.2s;
transition-delay: 0.1s;
.arrow{
position: absolute;
right: 0;
top: 50%;
height: 35px;
transition-property: opacity;
transition-duration: 0.2s;
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;
}
img {
max-width: 80%;
border-radius: 0 0 50% 50%;
}
}
// <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;
border-radius: 3px;
color: $ClrWhite;
font-weight: bold;
text-decoration: none;
text-align: center;
font-size: 1.2em;
transition-property: border-color background-color;
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(#{$ImgPath}/ui/bgdark.png);
border-style: solid;
border-width: 0 1px 1px 1px;
border-color: $ClrTrueBlack;
text-align: center;
white-space: nowrap;
transition-property: top;
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;
text-shadow: 0 0 5px $ClrTrueBlack;
text-align: center;
img{
margin: 4px 4px 0 4px;
width: 128px;
height: 128px;
border-radius: 10px;
box-shadow: 0px 0px 10px $ClrTrueBlack;
}
figcaption{
width: 128px;
}
}
a:hover{
border-radius: 5px;
background-color: rgba(255,255,255,0.15);
}
}
nav#top:hover, nav#top:active
{
top: 0px !important;
}