pro/2022_WEBSITE_kosmopolit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

navbar en iframe ok

Browse Source
This commit is contained in:
ethylotest
2021-03-22 14:48:17 +01:00
parent b81b2a0023
commit 13f2418356
12 changed files with 120 additions and 239 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
styles/nav.css
View File

@@ -1,38 +1,41 @@
/*---------------------------------------------*/
/*NAVBAR*/
nav {
border-bottom: 1px solid var(--color-lines-4);
.navbar {
flex-direction: row;
/*we have to set the height to use the height % for childs elements*/
height: var(--nav-height);
background-color: var(--color-back-base);
}
nav * {
.navbar * {
display: flex;
flex-direction: row;
margin: auto;
height: 100%;
}
/* nav_left is used for links to pages*/
nav .nav_left {
.navbar .nav_left {
margin-left: 0px;
}
nav .nav_left a {
.navbar .nav_left a {
padding: 0px 20px;
}
nav .nav_left #nav_logo {
.navbar .nav_left #nav_logo {
padding-left: 40px;
padding-right: 40px;
}
nav a p {
.navbar a p {
/*to center vertically the text*/
height: auto;
}
nav .nav_left img {
.navbar .nav_left img {
height: calc(100% - 4px);
}
nav a:not(#nav_logo):hover, nav a:not(#nav_logo):focus {
.navbar a:not(#nav_logo):hover, nav a:not(#nav_logo):focus {
background-color: var(--color-back-dark);
}
/* nav_right is used for actions such as connection, search or language*/
nav .nav_right {
.navbar .nav_right {
margin-right: 2px;
}
@@ -50,17 +53,17 @@ nav .nav_right {
.drop
.drop
*/
nav .nav_right .dropdown {
.navbar .nav_right .dropdown {
position: relative;
height: 100%;
flex-direction: column;
}
nav .nav_right .dropdown .drop {
.navbar .nav_right .dropdown .drop {
position: relative;
padding: 0px 20px;
background-color: var(--color-back-base);
}
nav .nav_right .dropdown .drop_items {
.navbar .nav_right .dropdown .drop_items {
position: absolute;
top: 100%;
left: 0px;
@@ -69,23 +72,23 @@ nav .nav_right .dropdown .drop_items {
display: none;
}
/* horizontal space between flag and name*/
nav .nav_right .dropdown .drop > * {
.navbar .nav_right .dropdown .drop > * {
margin: auto 3px;
}
/*flag size*/
nav .nav_right .dropdown img.flag {
.navbar .nav_right .dropdown img.flag {
height: 12px;
}
/*flag size*/
nav .nav_right .dropdown .drop p {
.navbar .nav_right .dropdown .drop p {
font-size: 1.6em;
}
/*the menu appears when focus on an element inside*/
nav .nav_right .dropdown:focus-within * {
.navbar .nav_right .dropdown:focus-within * {
display: flex;
}
/*a rectangle cover the div when focus, so you can click on it to unfocus*/
nav .nav_right .dropdown:focus-within:after {
.navbar .nav_right .dropdown:focus-within:after {
content: "";
position: absolute;
top: 0px;
@@ -94,7 +97,7 @@ nav .nav_right .dropdown:focus-within:after {
height: 100%;
}
/*the little arrow point down*/
nav .nav_right .dropdown .drop_title:after {
.navbar .nav_right .dropdown .drop_title:after {
content: "▼"; /* ▲ */
content: "v";
position: absolute;
@@ -103,7 +106,7 @@ nav .nav_right .dropdown .drop_title:after {
transform: translateY(-50%);
}
/*the little arrow point up*/
nav .nav_right .dropdown .drop_title:focus:after {
.navbar .nav_right .dropdown .drop_title:focus:after {
transform: rotate(180deg) translateY(20%);
}