spaCy/website/assets/css/_components/_misc.sass
2016-04-01 01:24:48 +11:00

89 lines
2.4 KiB
Sass

// Misc - Variables
// ============================================================================
$x-terminal-background : color(grey)
$x-terminal-border-radius : $border-radius * 2
$x-terminal-color : color(black)
$x-terminal-cursor-animation : blink 0.9s infinite
$x-terminal-cursor : '\258B'
$x-terminal-icon-colors : color(red), color(green), color(yellow)
$x-terminal-icon-size : 1em
$x-terminal-padding : 0.75em
$x-bubble-size : 35px
$x-bubble-margin : 1rem
// Misc - Style
// ============================================================================
// Terminal window illustration to display code
// .x-terminal - terminal window
// .x-terminal-title - title of terminal window
// .x-terminal-icons - container for toolbar icons
// .x-terminal-code - code box
// .x-terminal-code:after - cursor in last line
// %x-terminal-icon - general style of toolbar icons
.x-terminal
background: $x-terminal-background
border-radius: $x-terminal-border-radius
color: $x-terminal-color
width: 100%
&--cursor
.code:after
animation: $x-terminal-cursor-animation
opacity: 1
content: $x-terminal-cursor
.x-terminal-title
text-align: center
padding: $x-terminal-padding
.x-terminal-icons
padding: $x-terminal-padding
position: absolute
&:before
@extend %x-terminal-icon
content: ''
background: nth($x-terminal-icon-colors, 1)
span
@extend %x-terminal-icon
background: nth($x-terminal-icon-colors, 2)
&:after
@extend %x-terminal-icon
content: ''
background: nth($x-terminal-icon-colors, 3)
.x-terminal-code
@extend .code-block-dark
border-bottom-left-radius: $x-terminal-border-radius
border-bottom-right-radius: $x-terminal-border-radius
padding: $x-terminal-padding * 2
max-width: 100%
width: 100%
white-space: pre-wrap
&.code-block
margin-bottom: 0
%x-terminal-icon
@include size($x-terminal-icon-size)
display: inline-block
float: left
border-radius: 50%
margin-right: $x-terminal-padding
// Bubble to display colors
.x-bubble
@include size($x-bubble-size)
border-radius: 50%
cursor: pointer
margin-right: $x-bubble-margin