45 lines
948 B
Sass
45 lines
948 B
Sass
$show-hide-toggle-size: 6px
|
|
|
|
.show-hide__toggle
|
|
position: relative
|
|
cursor: pointer
|
|
|
|
&:hover
|
|
background-color: var(--color-grey-lighter)
|
|
cursor: pointer
|
|
|
|
.show-hide__toggle::before
|
|
content: ''
|
|
position: absolute
|
|
width: $show-hide-toggle-size
|
|
height: $show-hide-toggle-size
|
|
left: -15px
|
|
top: 50%
|
|
color: var(--color-primary)
|
|
border-right: 2px solid currentColor
|
|
border-top: 2px solid currentColor
|
|
transition: transform .2s ease
|
|
transform: translateY(2px) translateY(-50%) rotate(-45deg)
|
|
|
|
@media (max-width: 768px)
|
|
left: auto
|
|
right: 20px
|
|
color: var(--color-font)
|
|
|
|
.show-hide__toggle--right::before
|
|
left: auto
|
|
right: 20px
|
|
color: var(--color-font)
|
|
|
|
.show-hide--collapsed
|
|
.show-hide__toggle::before
|
|
transform: translateY(-2px) translateY(-50%) rotate(135deg)
|
|
|
|
& > :not(.show-hide__toggle)
|
|
display: block
|
|
height: 0
|
|
margin: 0
|
|
padding: 0
|
|
max-height: 0
|
|
overflow-y: hidden
|