276 lines
No EOL
8.2 KiB
Sass
276 lines
No EOL
8.2 KiB
Sass
// HEADER BEGIN
|
|
header
|
|
display: flex
|
|
flex-direction: column
|
|
margin-bottom: 10px
|
|
background: var(--color-background)
|
|
nav
|
|
display: flex
|
|
width: 100%
|
|
justify-content: space-between //ajout
|
|
background-color: var(--primary-color)
|
|
@if $primary-color == white
|
|
border: 1px solid $secondary-color
|
|
>a:hover
|
|
color: black
|
|
.siteName
|
|
display: flex
|
|
justify-content: center
|
|
align-items: center
|
|
flex-grow: 1
|
|
|
|
color: $white
|
|
font-size: 2.5em
|
|
.navbarLeft
|
|
display: flex
|
|
justify-content: flex-end
|
|
min-width: 225px
|
|
.navbar //Background color of nav and hidden overflow
|
|
display: flex
|
|
flex-direction: row
|
|
justify-content: space-around
|
|
//flex-grow: 1
|
|
height: 59px
|
|
overflow: hidden
|
|
|
|
background: var(--primary-color)
|
|
a //Style of links in nav
|
|
display: flex
|
|
align-items: center
|
|
justify-content: center
|
|
flex-grow: 1
|
|
padding: 0 10px 0 10px
|
|
|
|
text-transform: uppercase
|
|
text-decoration: none
|
|
font-family: $font-stackNav
|
|
font-size: $font-size_navLaptop
|
|
color: $white
|
|
&.active
|
|
background: var(--secondary-color)
|
|
.icon //Hide the burger button in wide screen mode
|
|
display: none
|
|
.dropdown // Dropdown container - needed to position the dropdown content
|
|
overflow: hidden
|
|
border-radius: 50%
|
|
@if $primary-color == white
|
|
background: var(--secondary-color)
|
|
border: 1px solid $secondary-color
|
|
|
|
&:hover
|
|
background: var(--secondary-color)
|
|
transition: .8s
|
|
.dropbtn //Style the dropdown button to fit inside the topnav
|
|
border: none
|
|
outline: none
|
|
padding-bottom: 4px
|
|
font-family: inherit
|
|
color: white
|
|
background-color: inherit
|
|
|
|
img //Image login
|
|
width: 39px
|
|
margin: 12px 10px 0 10px
|
|
> .dropdown-content-mobile
|
|
display: none
|
|
transition: .8s
|
|
.dropdown-content //Style the dropdown content (hidden by default)
|
|
display: none
|
|
position: absolute
|
|
right: 0px
|
|
z-index: 1
|
|
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2)
|
|
background: var(--primary-color)
|
|
>a //Style the links inside the dropdown
|
|
padding: 8px
|
|
font-size: $font-size_small
|
|
font-weight: bold
|
|
color: black
|
|
background: $body-color
|
|
&:hover
|
|
background: var(--primary-color)
|
|
color: $white
|
|
transition: .8s
|
|
|
|
.surHeader
|
|
padding: 10px
|
|
width: 100%
|
|
display: flex
|
|
align-items: center
|
|
justify-content: flex-end
|
|
height: 52px
|
|
.greetings
|
|
color: $white
|
|
font-size: 1.5em
|
|
font-family: 'CreamyScript'
|
|
.logo
|
|
color: #fff
|
|
height: $height_nav
|
|
width: 225px
|
|
line-height: $height_nav
|
|
z-index: 2
|
|
p
|
|
display: none
|
|
img
|
|
position: absolute
|
|
top: 0
|
|
left: 10px
|
|
width: 200px
|
|
height: 130px
|
|
transform: unset
|
|
z-index: 1
|
|
transition: .8s
|
|
display: block
|
|
|
|
|
|
|
|
|
|
header
|
|
nav
|
|
.dropdown:hover
|
|
.dropdown-content //Show the dropdown menu when the user moves the mouse over the dropdown button
|
|
display: block
|
|
|
|
|
|
// Style employee ID
|
|
#matricule
|
|
display: flex
|
|
justify-content: center
|
|
border-bottom: solid 1px white
|
|
&:hover
|
|
background: $body-color
|
|
color: black
|
|
|
|
|
|
//For 4k screen
|
|
@media screen and (min-width: map-get($breakpoints,UHD))
|
|
header
|
|
.surHeader
|
|
.greetings
|
|
font-size: 2em
|
|
nav
|
|
.siteName
|
|
font-size: 3.5em
|
|
a
|
|
font-size: $font-size_nav4k
|
|
.dropdown
|
|
.dropdown-content
|
|
>a
|
|
font-size: $font-size_4k_normal
|
|
|
|
|
|
|
|
|
|
//For Mobiles
|
|
@media screen and (max-width: map-get($breakpoints, mobile))
|
|
header
|
|
margin-bottom: 0px
|
|
.surHeader
|
|
height: fit-content
|
|
nav
|
|
height: 40px
|
|
.siteName
|
|
display: none
|
|
.dropdown
|
|
.dropbtn
|
|
height: 100%
|
|
display: flex
|
|
align-items: center
|
|
img
|
|
width: 30px
|
|
margin-bottom: 7px
|
|
.navbar
|
|
justify-content: space-between
|
|
height: 40px
|
|
&-links
|
|
transition: .8s
|
|
>a //Remove full screen links
|
|
display: none
|
|
&.responsive //Responsive navbar
|
|
display: flex
|
|
flex-direction: column
|
|
position: absolute
|
|
top: 70px
|
|
z-index: 1
|
|
width: 100%
|
|
padding-bottom: 20px
|
|
background: var(--primary-color)
|
|
@if $primary-color == white
|
|
border-bottom: 1px solid $secondary-color
|
|
a
|
|
display: block
|
|
padding: 10px
|
|
font-size: $font-mobile-small
|
|
|
|
.icon
|
|
position: absolute
|
|
right: 0
|
|
top: 0
|
|
|
|
a.icon
|
|
display: flex
|
|
flex-grow: 0
|
|
padding: 10px
|
|
.logo
|
|
width: 0
|
|
p
|
|
display: block
|
|
font-size: 2.5em
|
|
left: 50%
|
|
transform: translateX(-50%)
|
|
width: 134px
|
|
height: 87px
|
|
position: absolute
|
|
top: 1.8%
|
|
z-index: 1
|
|
transition: .8s
|
|
img
|
|
left: 50%
|
|
transform: translateX(-50%)
|
|
width: 134px
|
|
height: 87px
|
|
&:hover
|
|
box-shadow: 3px 3px 2px 2px #ccc
|
|
transition: all 0.8s
|
|
.dropdown
|
|
.dropcontent a
|
|
display: none
|
|
header
|
|
nav
|
|
.dropdown
|
|
>.dropdown-content-mobile.resp
|
|
display: flex
|
|
flex-direction: column
|
|
position: absolute
|
|
//top: 70px
|
|
right: 0px
|
|
z-index: 1
|
|
width: 100%
|
|
//padding-bottom: 20px
|
|
background: var(--primary-color)
|
|
@if $primary-color == white
|
|
border-bottom: 1px solid $secondary-color
|
|
a
|
|
display: block
|
|
padding: 10px
|
|
font-size: $font-mobile-small
|
|
border-bottom: 1px white solid
|
|
.icon
|
|
position: absolute
|
|
right: 0
|
|
top: 0
|
|
&:hover
|
|
.dropdown-content //hide dropdown
|
|
display: none
|
|
#matricule
|
|
justify-content: start
|
|
&:hover
|
|
background: var(--primary-color)
|
|
color: $white
|
|
|
|
//For Mobiles small
|
|
@media screen and (max-width: map-get($breakpoints, mobile-small))
|
|
header
|
|
.surHeader
|
|
.greetings
|
|
font-size: medium |