Sha256: f0b6d1a350307d01199faf4a0029a2030273a8b35ae97dede17d0be22d3dc250
Contents?: true
Size: 1.79 KB
Versions: 3
Compression:
Stored size: 1.79 KB
Contents
$quickview-z: 35 !default
$quickview-header-height: 3.25em !default
$quickview-footer-height: 4rem !default
$quickview-shadow: 5px 0px 13px 3px rgba( 0, 0, 0, 0.1 ) !default
$quickview-divider: 1px solid $grey-lighter !default
.quickview
display: flex
flex-direction: column
background-color: $white
max-width: calc( 100% - 50px )
&.is-marginless
max-width: 100%
position: fixed
top: 0
bottom: 0
z-index: $quickview-z
transform: translateZ( 0 )
transition: .3s ease
backface-visibility: hidden
perspective: 1000
will-change: transform
+mobile
width: 100%
right: -100%
+tablet
width: 50%
right: -50%
+desktop
width: 35%
right: -35%
+widescreen
width: 30%
right: -30%
+fullhd
width: 25%
right: -25%
&.is-left
+mobile
left: -100%
+tablet
left: -50%
+desktop
left: -35%
+widescreen
left: -30%
+fullhd
left: -25%
&.is-active
right: 0
box-shadow: $quickview-shadow
&.is-left
left: 0
.quickview-header
display: flex
justify-content: space-between
align-items: center
padding: 0 1rem
min-height: $quickview-header-height !important
border-bottom: $quickview-divider
@each $name, $pair in $colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
&.is-#{$name}
background-color: $color
.title
color: $color-invert
.title
font-size: $size-6
font-weight: $weight-light
margin-bottom: 0
img
max-height: 2em
.quickview-body
-webkit-box-flex: 1
flex: 1 1 0%
overflow-y: auto
.quickview-footer
display: flex
justify-content: space-between
align-items: center
padding: 0 1rem
min-height: $quickview-footer-height
background-color: $white-ter
border-top: $quickview-divider
> *
margin: 0 .4rem
Version data entries
3 entries across 2 versions & 1 rubygems