144 lines
2.5 KiB
Sass
144 lines
2.5 KiB
Sass
.sidebar
|
|
padding: 0
|
|
height: 100%
|
|
float: left
|
|
min-height: 1px
|
|
overflow: auto
|
|
vertical-align: top
|
|
display: inline-block
|
|
padding-left: 10px
|
|
background-color: var(--bgdark)
|
|
|
|
@media (min-width: 768px)
|
|
width: 25%
|
|
|
|
&-scrolling
|
|
width: 100%
|
|
position: unset
|
|
|
|
&-fixed
|
|
position: fixed
|
|
bottom: 0px
|
|
width: 50%
|
|
|
|
@media (min-width: 768px)
|
|
width: calc(25% - 5px)
|
|
|
|
&-menu
|
|
list-style-type: none
|
|
padding-left: 20px
|
|
margin-bottom: 40px
|
|
|
|
li
|
|
font-size: 0.8rem
|
|
padding-top: 8px
|
|
padding-bottom: 8px
|
|
border: 1px solid var(--bgdark)
|
|
padding-left: 20px
|
|
margin: 0
|
|
cursor: pointer
|
|
|
|
a
|
|
color: var(--textlinkdark)
|
|
|
|
&:hover
|
|
border: 1px solid var(--accent)
|
|
|
|
&:before, a
|
|
color: var(--textlink)
|
|
|
|
&-content
|
|
background-color: var(--bgdark)
|
|
border-right: 5px solid var(--accent)
|
|
padding-top: 30px
|
|
padding-left: 10px
|
|
@media (min-width: 992px)
|
|
padding-left: 20px
|
|
padding-right: 20px
|
|
|
|
&-offcanvas
|
|
@media screen and (max-width: 767px)
|
|
left: -46% !important
|
|
|
|
hr
|
|
border-top: 1px solid var(--accent)
|
|
|
|
&-game-info
|
|
background-color: var(--bgdarker)
|
|
border: 1px solid var(--accent)
|
|
margin-bottom: 1rem
|
|
overflow: hidden
|
|
|
|
p
|
|
margin: 0
|
|
|
|
.sidebar-game-platform
|
|
position: absolute
|
|
display: inline-block
|
|
box-shadow: 0px 0px 10px rgba(0,0,0,0.9)
|
|
-webkit-transform: rotate(-45deg)
|
|
-moz-transform: rotate(-45deg)
|
|
-o-transform: rotate(-45deg)
|
|
-ms-transform: rotate(-45deg)
|
|
top: -50px
|
|
right: 20px
|
|
width: 25px
|
|
|
|
@media (min-width: 768px)
|
|
top: -60px
|
|
right: 35px
|
|
width: 40px
|
|
|
|
&-header img
|
|
float: right
|
|
|
|
&-heading
|
|
font-weight: bold
|
|
font-size: 1.1rem
|
|
letter-spacing: 0.1em
|
|
text-transform: uppercase
|
|
padding-top: 10px
|
|
padding-left: 10px
|
|
margin-top: 0
|
|
|
|
|
|
&-date
|
|
color: var(--textlinkdark)
|
|
font-size: 0.7rem
|
|
|
|
|
|
.row-offcanvas
|
|
@media screen and (max-width: 767px)
|
|
position: relative
|
|
transition: all 0.25s ease-out
|
|
opacity: 1
|
|
|
|
&-right
|
|
.sidebar-offcanvas
|
|
@media screen and (max-width: 767px)
|
|
right: -50%
|
|
@media screen and (max-width: 767px)
|
|
right: 0
|
|
|
|
&-left
|
|
.sidebar-offcanvas
|
|
@media screen and (max-width: 767px)
|
|
left: -48%
|
|
@media screen and (max-width: 767px)
|
|
left: 0
|
|
|
|
|
|
&-right.active
|
|
@media screen and (max-width: 767px)
|
|
right: 50%
|
|
&-left.active
|
|
@media screen and (max-width: 767px)
|
|
left: 50%
|
|
|
|
.sidebar-offcanvas
|
|
@media screen and (max-width: 767px)
|
|
position: absolute
|
|
top: 0
|
|
width: 50%
|
|
|