mirror of https://github.com/explosion/spaCy.git
106 lines
3.2 KiB
Sass
106 lines
3.2 KiB
Sass
//- 💫 CSS > COMPONENTS > CHAT
|
|
|
|
.c-chat
|
|
@include position(fixed, top, left, 0, 60%)
|
|
bottom: 0
|
|
right: 0
|
|
display: flex
|
|
flex-flow: column nowrap
|
|
background: $color-back
|
|
transition: transform 0.3s cubic-bezier(0.16, 0.22, 0.22, 1.7)
|
|
box-shadow: -0.25rem 0 1rem 0 rgba($color-front, 0.25)
|
|
z-index: 100
|
|
|
|
@include breakpoint(min, md)
|
|
left: calc(100% - #{$aside-width} - #{$aside-padding})
|
|
|
|
@include breakpoint(max, sm)
|
|
left: 50%
|
|
|
|
@include breakpoint(max, xs)
|
|
left: 0
|
|
|
|
&.is-collapsed:not(.is-loading)
|
|
transform: translateX(110%)
|
|
|
|
&:before
|
|
@include position(absolute, top, left, 1.25rem, 2rem)
|
|
content: attr(data-title)
|
|
font: bold 1.4rem $font-secondary
|
|
text-transform: uppercase
|
|
color: $color-back
|
|
|
|
&:after
|
|
@include position(absolute, top, left, 0, 100%)
|
|
content: ""
|
|
z-index: -1
|
|
bottom: 0
|
|
right: -100%
|
|
background: $color-back
|
|
|
|
& > iframe
|
|
width: 100%
|
|
flex: 1 1 calc(100% - #{$nav-height})
|
|
border: 0
|
|
|
|
.gitter-chat-embed-loading-wrapper
|
|
@include position(absolute, top, left, 0, 0)
|
|
right: 0
|
|
bottom: 0
|
|
display: none
|
|
justify-content: center
|
|
align-items: center
|
|
|
|
.is-loading &
|
|
display: flex
|
|
|
|
.gitter-chat-embed-action-bar,
|
|
.gitter-chat-embed-action-bar-item
|
|
display: flex
|
|
|
|
.gitter-chat-embed-action-bar
|
|
align-items: center
|
|
justify-content: flex-end
|
|
background: $color-theme
|
|
padding: 0 1rem 0 2rem
|
|
flex: 0 0 $nav-height
|
|
|
|
.gitter-chat-embed-action-bar-item
|
|
@include size(40px)
|
|
padding: 0
|
|
opacity: 0.75
|
|
background-position: 50%
|
|
background-repeat: no-repeat
|
|
background-size: 22px 22px
|
|
border: 0
|
|
cursor: pointer
|
|
transition: all 0.2s ease
|
|
|
|
&:focus,
|
|
&:hover
|
|
opacity: 1
|
|
|
|
&.gitter-chat-embed-action-bar-item-pop-out
|
|
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTYgMmgtOC4wMjFjLTEuMDk5IDAtMS45NzkgMC44OC0xLjk3OSAxLjk4djguMDIwYzAgMS4xIDAuOSAyIDIgMmg4YzEuMSAwIDItMC45IDItMnYtOGMwLTEuMS0wLjktMi0yLTJ6TTE2IDEyaC04di04aDh2OHpNNCAxMGgtMnY2YzAgMS4xIDAuOSAyIDIgMmg2di0yaC02di02eiI+PC9wYXRoPjwvc3ZnPg==)
|
|
margin-right: -4px
|
|
|
|
&.gitter-chat-embed-action-bar-item-collapse-chat
|
|
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTguOTg0IDYuNDIybC01LjU3OCA1LjU3OCA1LjU3OCA1LjU3OC0xLjQwNiAxLjQwNi01LjU3OC01LjU3OC01LjU3OCA1LjU3OC0xLjQwNi0xLjQwNiA1LjU3OC01LjU3OC01LjU3OC01LjU3OCAxLjQwNi0xLjQwNiA1LjU3OCA1LjU3OCA1LjU3OC01LjU3OHoiPjwvcGF0aD48L3N2Zz4=)
|
|
|
|
.c-chat__button
|
|
@include position(fixed, bottom, right, 1.5rem, 1.5rem)
|
|
z-index: 5
|
|
color: $color-back
|
|
background: $color-front
|
|
border-radius: 1em
|
|
padding: 0.5rem 1.15rem 0.35rem
|
|
opacity: 0.7
|
|
transition: opacity 0.2s ease
|
|
|
|
&:hover
|
|
opacity: 1
|
|
|
|
|
|
.gitter-open-chat-button
|
|
display: none
|