.wrap
|
max-width: 1240px
|
@media screen and (min-width: 1640px)
|
max-width: 1600px
|
&, &
|
width: 100%
|
padding: 0 25px
|
margin: 0 auto
|
|
@for $i from 1 through 8
|
$size: $i * 1.5rem
|
$x-size: $size * 0.5
|
.pt-#{$i}
|
padding-top: $size
|
|
.pb-#{$i}
|
padding-bottom: $size
|
|
.mt-#{$i}
|
margin-top: $size
|
|
.mb-#{$i}
|
margin-bottom: $size
|
|
%grid
|
display: grid
|
grid-template-columns: 1fr
|
|
[class*='grid-']
|
grid-gap: 2rem
|
|
.grid-2, .grid-3, .grid-4, .grid-auto, .grid-reverse
|
@extend %grid
|
|
@media screen and (min-width: 42rem)
|
.grid-auto
|
grid-template-columns: 2fr 5fr
|
|
.grid-reverse
|
grid-template-columns: 3fr 1fr
|
|
.grid-2
|
grid-template-columns: repeat(2, 1fr)
|
|
.grid-3
|
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr))
|
|
.grid-4
|
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr))
|
|
.active
|
color: var(--theme)
|
|
.is
|
background: var(--theme)
|
color: var(--light)
|
|
.toggle
|
svg
|
fill: var(--text)
|
display: inline-block
|
transform-origin: 50% 50%
|
transform: scale(1.2)
|
cursor: pointer
|
margin: 0
|
|
.scrollable
|
width: 100%
|
overflow-x: hidden
|
max-width: calc(100vw - 48px)
|
@media screen and (min-width: 768px)
|
max-width: 100%
|
&:hover
|
overflow-x: auto
|
|
.chart
|
display: grid
|
grid-gap: 1.5rem
|
min-width: 0
|
max-width: 98vw !important
|
max-height: 98vw !important
|
|
|
.link
|
display: inline-flex
|
align-items: center
|
width: 2.5rem
|
margin: 0 0.25rem 0 0
|
padding: 0 0.25rem
|
opacity: 0
|
transform: translate(-0.33rem, 0.33rem)
|
transition: opacity 0.3s cubic-bezier(0.39, 0.575, 0.565, 1)
|
svg, img
|
width: 1.5rem
|
height: 1.5rem
|
fill: var(--theme)
|
&_owner:hover &
|
opacity: 1
|
|
.copy
|
cursor: pointer
|
|
.standardize-input
|
appearance: none
|
-webkit-appearance: none
|
