// Typography
$family-sans-serif: "Helvetica Neue", "Helvetica", "Arial", sans-serif
+$family-monospace: "Source Code Pro", "Monaco", "Inconsolata", monospace
$size-1: 48px
$size-2: 40px
@import messages
@import notifications
-.highlight
- font-size: 12px
- font-weight: normal
- max-width: 100%
- overflow: hidden
- padding: 0
- &:not(:last-child)
- margin-bottom: 20px
- pre
- overflow: auto
- max-width: 100%
-
.delete
background: rgba(black, 0.2)
border-radius: 290486px
cursor: pointer
display: block
height: $header-height
- padding: 19px 17px
position: relative
width: $header-height
span
background: $text
display: block
height: 1px
- left: 17px
+ left: 50%
+ margin-left: -7px
position: absolute
+ top: 50%
transition: none $speed $easing
transition-property: background, left, opacity, transform
width: 15px
&:nth-child(1)
- top: 19px
+ margin-top: -6px
&:nth-child(2)
- top: 24px
+ margin-top: -1px
&:nth-child(3)
- bottom: 20px
+ margin-top: 4px
&:hover
background: $background
&.is-active
span
background: $link
&:nth-child(1)
- left: 20px
+ margin-left: -5px
transform: rotate(45deg)
transform-origin: left top
&:nth-child(2)
opacity: 0
&:nth-child(3)
- left: 20px
+ margin-left: -5px
transform: rotate(-45deg)
transform-origin: left bottom
margin-bottom: 5px
text-transform: uppercase
+.highlight
+ font-size: 12px
+ font-weight: normal
+ max-width: 100%
+ overflow: hidden
+ padding: 0
+ &:not(:last-child)
+ margin-bottom: 20px
+ pre
+ overflow: auto
+ max-width: 100%
+
+.image
+ display: block
+ position: relative
+ vertical-align: top
+ img
+ +overlay
+ display: block
+ width: 100%
+ &.is-3x2
+ padding-top: 66.6666%
+
.loader
animation: spin-around 500ms infinite linear
border: 2px solid $border
@return $value
@function colorLuminance($color)
- $colors: ('red': red($color),'green': green($color),'blue': blue($color))
- @each $name, $value in $colors
+ $color-rgb: ('red': red($color),'green': green($color),'blue': blue($color))
+ @each $name, $value in $color-rgb
$adjusted: 0
$value: $value / 255
@if $value < 0.03928
@else
$value: ($value + .055) / 1.055
$value: powerNumber($value, 2)
- $colors: map-merge($colors, ($name: $value))
- @return (map-get($colors, 'red') * .2126) + (map-get($colors, 'green') * .7152) + (map-get($colors, 'blue') * .0722)
+ $color-rgb: map-merge($color-rgb, ($name: $value))
+ @return (map-get($color-rgb, 'red') * .2126) + (map-get($color-rgb, 'green') * .7152) + (map-get($color-rgb, 'blue') * .0722)
@function closestEvenNumber($number)
@if ($number % 2 == 0px)