191 lines
4.0 KiB
Sass
191 lines
4.0 KiB
Sass
|
|
.pagenav
|
|
display: flex
|
|
align-content: flex-start
|
|
align-items: flex-start
|
|
flex-flow: row wrap
|
|
padding: 0 0 10px 0
|
|
margin: -5px -5px 20px -5px
|
|
border-bottom: 1px solid #eee
|
|
list-style: none
|
|
|
|
.pagenav-item__expand-radio
|
|
display: none
|
|
|
|
.pagenav-item__link
|
|
display: block
|
|
padding: 6px 10px
|
|
background-color: white
|
|
|
|
&:hover
|
|
background-color: var(--color-grey-light)
|
|
|
|
a.pagenav-item__link, .pagenav-item__link a
|
|
text-decoration: none
|
|
|
|
.pagenav__list-item
|
|
position: relative
|
|
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.6)
|
|
margin: 5px
|
|
padding: 0
|
|
display: grid
|
|
grid-template-areas: "label expand"
|
|
grid-template-columns: auto minmax(0, auto)
|
|
flex: 0 0 auto
|
|
|
|
& > *
|
|
grid-area: label
|
|
place-self: stretch / stretch
|
|
line-height: 20px
|
|
|
|
&.pagenav-item__children-wrapper
|
|
grid-column: label-start / expand-end
|
|
|
|
& > .pagenav-item__expand-label
|
|
display: flex
|
|
justify-content: center
|
|
align-items: center
|
|
grid-area: expand
|
|
background-color: white
|
|
transition: background-color 0.2s ease
|
|
padding: 6px 10px
|
|
cursor: pointer
|
|
|
|
.fas
|
|
line-height: 20px
|
|
|
|
&:hover
|
|
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.9)
|
|
|
|
& > .pagenav-item__expand-label
|
|
background-color: var(--color-grey-light)
|
|
|
|
.pagenav-item__link:hover ~ .pagenav-item__expand-label
|
|
background-color: white
|
|
|
|
.pagenav-item__expand-radio:checked ~ .pagenav-item__expand-label
|
|
background-color: var(--color-grey-light)
|
|
|
|
.pagenav-secondary &
|
|
grid-template-areas: "expand"
|
|
& > .pagenav-item__children-wrapper
|
|
grid-column: exand-start / exand-end
|
|
|
|
|
|
.pagenav-item__children
|
|
flex: 1 0 auto
|
|
list-style: none
|
|
margin: 0
|
|
padding: 0
|
|
display: grid
|
|
grid-template-rows: auto
|
|
justify-items: stretch
|
|
grid-auto-columns: max-content
|
|
|
|
.pagenav-item__link
|
|
max-width: 250px
|
|
|
|
& > li
|
|
display: flex
|
|
|
|
& > *
|
|
flex: 1 0 auto
|
|
|
|
.pagenav-item__close-label
|
|
display: none
|
|
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.6)
|
|
padding: 6px 10px
|
|
transition: all 0.2s ease
|
|
position: absolute
|
|
top: 100%
|
|
right: 0
|
|
background-color: white
|
|
z-index: -1
|
|
cursor: pointer
|
|
|
|
.fas
|
|
transition: all 0.2s ease
|
|
opacity: 0.5
|
|
transform: rotate(0.5turn)
|
|
line-height: 20px
|
|
|
|
&:hover
|
|
background-color: var(--color-grey-light)
|
|
.fas
|
|
transform: rotate(0)
|
|
opacity: 1
|
|
|
|
.pagenav-item__children-wrapper
|
|
display: none
|
|
position: absolute
|
|
right: 0
|
|
top: 100%
|
|
background-color: white
|
|
z-index: 21
|
|
margin: 0
|
|
padding: 0
|
|
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.6)
|
|
|
|
.pagenav-item__expand-radio:checked ~ &, .pagenav-item__expand-label:hover ~ &, &:hover
|
|
display: flex
|
|
|
|
.pagenav__list-item:hover &
|
|
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.9)
|
|
|
|
.pagenav-item__expand-radio:checked ~ &
|
|
.pagenav-item__close-label:not(.pagenav-item__close-label--hidden)
|
|
display: block
|
|
|
|
/* .pagenav__link-wrapper
|
|
/* flex: 1
|
|
/* padding: 10px 10px 12px
|
|
/* text-decoration: none !important
|
|
|
|
/* &:hover
|
|
/* background-color: var(--color-grey-light)
|
|
|
|
/* @media (max-width: 1024px)
|
|
/* .pagenav
|
|
/* flex-direction: column
|
|
|
|
/* @media (min-width: 1025px)
|
|
/* .pagenav-secondary
|
|
/* position: relative
|
|
/* overflow: visible
|
|
/* padding-top: 10px
|
|
|
|
/* &::after
|
|
/* content: '\2026'
|
|
/* display: inline-block
|
|
/* padding: 10px 10px 12px
|
|
/* width: 40px
|
|
/* box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.6)
|
|
/* box-sizing: border-box
|
|
/* text-align: center
|
|
/* transition: box-shadow 0.2s ease
|
|
|
|
/* &:hover
|
|
/* &::after
|
|
/* box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.8)
|
|
|
|
/* .pagenav-secondary__list
|
|
/* display: block
|
|
|
|
/* .pagenav-secondary__list
|
|
/* position: absolute
|
|
/* display: none
|
|
/* right: 0
|
|
/* top: 50px
|
|
/* width: 250px
|
|
/* background-color: white
|
|
/* box-shadow: 0 0 6px 3px var(--color-grey-light)
|
|
/* z-index: 18
|
|
|
|
/* .pagenav__list-item--secondary
|
|
/* display: flex
|
|
/* box-shadow: none
|
|
/* margin: 0
|
|
|
|
/* &:hover
|
|
/* background-color: var(--color-grey-light)
|