theshell.ch/site/_sass/_header.scss

120 lines
1.8 KiB
SCSS
Raw Normal View History

/*------- GLOBAL ------*/
header {
text-align:center;
}
span {
display:inline-block;
}
/*------- MENU ------*/
.menuDesktop {
background-color: #131313;
position: relative;
text-align: justify;
}
.boxTitle {
padding: .5em;
}
.title {
color: green;
padding: 20px 0px;
}
.boxItem {
position: absolute;
right: 1em;
top: 0;
height: calc(50px + 1em);
display: inline-table;
}
.boxItem {
div, code {
display: table-cell;
vertical-align: middle;
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
font-size: 20px;
padding: 0 5px;
ul {
/* TODO: if possible, insert a padding-top to move the submenu down such that
the text of the first element starts at the bottom border of the .menuDesktop
*/
display: none;
position: absolute;
list-style: none;
margin-left: -10px;
background-color: #131313;
width: CALC(100% + 20px);
li {
color: #FFFFFF;
margin: 10px;
}
li:hover {
color: #66aa66;
}
}
ul:hover {
display: block;
}
}
code{
cursor: default;
}
div{
cursor: pointer;
}
div:hover{
color: #66aa66;
ul {
display: block;
}
}
}
.box-search{
width: 350px;
height: calc(50px + 1em);
float:right;
left: 60%;
}
.box-search input{
background-color: #131313;
border: none;
height: 20px;
transition: 500ms;
border-bottom: 2px solid white;
position: absolute;
top: calc(50% - 12px);
margin-left:calc(18% + 22px);
opacity:0;
}
.box-search img{
vertical-align: middle;
cursor: pointer;
width: 22px;
position: absolute;
left: calc(100% - 210px);
top: calc(50% - 12px);
}
.anim-search{
margin-left:0;
opacity:1;
}