196 lines
5.1 KiB
Sass
196 lines
5.1 KiB
Sass
@charset "utf-8"
|
|
|
|
@import url('https://fonts.googleapis.com/css?family=Nunito:200,400&display=swap')
|
|
$family-sans-serif: "Nunito", sans-serif
|
|
|
|
$navbar-breakpoint: 0
|
|
|
|
|
|
@import "/home/justi/Documents/HTML/SASS/Bulma 8.0/utilities/_all.sass"
|
|
@import "/home/justi/Documents/HTML/SASS/Bulma 8.0/base/_all.sass"
|
|
@import "/home/justi/Documents/HTML/SASS/Bulma 8.0/components/navbar.sass"
|
|
@import "/home/justi/Documents/HTML/SASS/Bulma 8.0/elements/box.sass"
|
|
@import "/home/justi/Documents/HTML/SASS/Bulma 8.0/elements/button.sass"
|
|
@import "/home/justi/Documents/HTML/SASS/Bulma 8.0/elements/container.sass"
|
|
@import "/home/justi/Documents/HTML/SASS/Bulma 8.0/elements/icon.sass"
|
|
@import "/home/justi/Documents/HTML/SASS/Bulma 8.0/elements/title.sass"
|
|
@import "/home/justi/Documents/HTML/SASS/Bulma 8.0/elements/content.sass"
|
|
@import "/home/justi/Documents/HTML/SASS/Bulma 8.0/elements/other.sass"
|
|
@import "/home/justi/Documents/HTML/SASS/Bulma 8.0/grid/columns.sass"
|
|
@import "/home/justi/Documents/HTML/SASS/Bulma 8.0/layout/hero.sass"
|
|
|
|
.is-big-headed
|
|
padding: 2rem 0 0
|
|
.is-big-chinned
|
|
padding: 0 0 2rem
|
|
.has-background
|
|
background-image: url("/images/bg.jpg")
|
|
background-size: cover
|
|
background-position: center
|
|
|
|
|
|
$divider-background-color: $grey-lighter !default
|
|
$divider-thickness: .1rem !default
|
|
$divider-font-size: $size-7 !default
|
|
$divider-color: $grey-light !default
|
|
$divider-content-background-color : $white !default
|
|
|
|
.is-divider, .is-divider-vertical
|
|
display: block
|
|
position: relative
|
|
border-top: $divider-thickness solid $divider-background-color
|
|
height: $divider-thickness
|
|
margin: 0 0 2rem
|
|
text-align: center
|
|
|
|
.is-divider[data-content]::after, .is-divider-vertical[data-content]::after
|
|
background: $divider-content-background-color
|
|
color: $divider-color
|
|
content: attr(data-content)
|
|
display: inline-block
|
|
font-size: $divider-font-size
|
|
padding: .4rem .8rem
|
|
-webkit-transform: translateY(-1.1rem)
|
|
-ms-transform: translateY(-1.1rem)
|
|
transform: translateY(-1.1rem)
|
|
text-align: center
|
|
|
|
.is-divider-vertical
|
|
+tablet
|
|
display: block
|
|
flex: none
|
|
width: auto
|
|
height: auto
|
|
padding: 2rem
|
|
margin: 0
|
|
position: relative
|
|
border-top: none
|
|
min-height: 2rem
|
|
&::before
|
|
border-left: $divider-thickness solid $divider-background-color
|
|
bottom: 1rem
|
|
content: ""
|
|
display: block
|
|
left: 50%
|
|
position: absolute
|
|
top: 1rem
|
|
-webkit-transform: translateX(-50%)
|
|
-ms-transform: translateX(-50%)
|
|
transform: translateX(-50%)
|
|
&[data-content]::after
|
|
position: absolute
|
|
left: 50%
|
|
top: 50%
|
|
padding: .1rem
|
|
-webkit-transform: translateY(-50%) translateX(-50%)
|
|
-ms-transform: translateY(-50%) translateX(-50%)
|
|
transform: translateY(-50%) translateX(-50%)
|
|
|
|
.is-divider,
|
|
.is-divider-vertical
|
|
@each $name, $pair in mergeColorMaps($colors, $shades)
|
|
$color: nth($pair, 1)
|
|
$color-invert: nth($pair, 2)
|
|
&.is-#{$name}
|
|
border-top-color: $color
|
|
|
|
&[data-content]::after, &[data-content]::after
|
|
background: $color-invert
|
|
color: $color
|
|
|
|
&::before
|
|
border-left-color: $color
|
|
|
|
|
|
$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
|
|
word-break: break-word
|
|
+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-4
|
|
|
|
margin-bottom: 0
|
|
img
|
|
max-height: 2em
|
|
|
|
.quickview-body
|
|
-webkit-box-flex: 1
|
|
flex: 1 1 0%
|
|
overflow-y: auto
|
|
padding: 0.5rem 1rem
|
|
margin: 0 !important
|
|
|
|
.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
|
|
> * |