pillar/src/styles/_utils.sass

/* Collection of mixins that can be plugged everywhere */

=clearfix
	clear: both

	&:after
		// Basically same as .clearfix from bootstrap
		clear: both
		display: block
		content: ' '

=container-behavior
	width: 100%

	+media-lg
		width: $screen-lg-min

		margin-left: auto
		margin-right: auto
		box-sizing: border-box

		+clearfix

@mixin button-rounded($mixin-color, $roundness, $filled: false)
	font-family: $font-body
	text-transform: uppercase
	opacity: .9
	padding:
		left: 20px
		right: 20px
	border-radius: $roundness

	@if $filled
		background: linear-gradient(lighten($mixin-color, 2%), $mixin-color)
		color: white
		border: thin solid darken($mixin-color, 5%)
		text-shadow: 1px 1px 0 rgba(black, .15)
	@else
		background-color: transparent
		color: $mixin-color
		border: thin solid $mixin-color
		text-shadow: none

	transition: color 350ms ease-out, border 150ms ease-in-out, opacity 150ms ease-in-out, background-color 150ms ease-in-out

	&:hover
		opacity: 1
		cursor: pointer
		text-decoration: none

		@if $filled
			background: linear-gradient(lighten($mixin-color, 5%), lighten($mixin-color, 5%))
			color: white
			border-color: lighten($mixin-color, 5%)
		@else
			background-color: rgba($mixin-color, .1)
			color: $mixin-color
			border-color: $mixin-color

	&:active, &:focus
		outline: none
		border-color: $mixin-color
		background-color: $mixin-color
		color: white

	i
		margin-right: 10px
	small
		font-size: .6em

@mixin button-rounded-filled($mixin-color, $roundness)
	font-family: $font-body
	text-transform: uppercase
	opacity: .9
	padding:
		left: 20px
		right: 20px
	color: white
	border: thin solid darken($mixin-color, 5%)
	border-radius: $roundness
	background: linear-gradient(lighten($mixin-color, 2%), $mixin-color)
	text-shadow: 1px 1px 0 rgba(black, .15)

	transition: color 150ms ease-out, opacity 100ms ease-in-out, background 100ms ease-out


	&:hover
		opacity: 1
		cursor: pointer
		color: white
		border-color: lighten($mixin-color, 5%)
		background: linear-gradient(lighten($mixin-color, 5%), lighten($mixin-color, 5%))
		text-decoration: none

	&:active, &:focus
		outline: none
		box-shadow: none
		border-color: lighten($mixin-color, 5%)
		background: $mixin-color
		color: white

	i
		margin-right: 10px
	small
		font-size: .6em

@mixin overlay($from-color, $from-percentage, $to-color, $to-percentage)
	position: absolute
	top: 0
	left: 0
	right: 0
	bottom: 0
	background: linear-gradient(to bottom, $from-color $from-percentage, $to-color $to-percentage)


@mixin stripes($color-light, $color-dark, $deg, $size)
	background-size: $size $size
	background-image: linear-gradient($deg, $color-light 25%, $color-dark 25%, $color-dark 50%, $color-light 50%, $color-light 75%, $color-dark 75%, $color-dark)

=stripes-animate
	animation:
		name: background-slide
		duration: 1s
		delay: 0s
		// fill-mode: forwards
		iteration-count: infinite
		timing-function: linear

=container-box
	position: relative
	background-color: white
	border-radius: 3px
	box-shadow: 0 0 0 1px rgba(black, .1), 1px 1px 2px rgba(black, .1)

=text-overflow-ellipsis
	overflow: hidden
	white-space: nowrap
	text-overflow: ellipsis

=position-center-translate
	position: absolute
	top: 50%
	left: 50%
	transform: translate(-50%, -50%)

=input-generic
	color: $color-text-dark
	box-shadow: none
	font-family: $font-body
	border-radius: 3px
	border-color: $color-background-dark
	background-color: $color-background-light

	&:focus
		border-color: $color-info
		box-shadow: none

=label-generic
	color: $color-text-dark-primary
	font-weight: normal

@mixin badge($mixin-color, $roundness)
	padding:
		left: 10px
		right: 10px

	text-transform: uppercase

	color: $mixin-color
	border: 1px solid $mixin-color
	border-radius: $roundness

	i
		margin-right: 10px

/* Smallest, like phones on portrait.
 **  Menu is collapsed, columns stack, no brand */
=media-xs
	@media (max-width: #{$screen-tablet - 1px})
		@content

/* Small but wide: phablets, iPads
 **  Menu is collapsed, columns stack, no brand */
=media-sm
	@media (min-width: #{$screen-tablet}) and (max-width: #{$screen-desktop - 1px})
		@content

/* Tablets portrait.
 **  Menu is expanded, but columns stack, brand is shown */
=media-md
	@media (min-width: #{$screen-desktop})
		@content

=media-lg
	@media (min-width: #{$screen-lg-desktop})
		@content

=media-print
	@media print
		@content

=spin
	animation:
		name: spin-once
		duration: 1s
		delay: 0s
		fill-mode: forwards
		iteration-count: infinite
		timing-function: linear

=spin-once
	+spin
	animation:
		iteration-count: 1

=pulse
	animation:
		name: pulse
		duration: 1s
		delay: 0s
		fill-mode: forwards
		iteration-count: infinite

=pulse-75
	animation:
		name: pulse-75
		duration: 1s
		delay: 0
		fill-mode: forwards
		iteration-count: infinite

@mixin badge($mixin-color, $roundness)

=anim-grow-bounce
	animation:
		name: grow-bounce
		duration: .25s
		delay: 0s
		fill-mode: forwards
		iteration-count: 1
		timing-function: linear

.anim-grow-bounce
	+anim-grow-bounce

.spin
	position: relative
	+spin
	&:before, &:after
		+spin
		margin:
			left: 0 !important
			right: 0 !important

.spinner
	position: relative
	+spin
	&:before, &:after
		+spin

@keyframes spin-once
	from
		transform: rotate(0deg)
	to
		transform: rotate(360deg)

@keyframes pulse
	0
		opacity: 1
	50%
		opacity: 0
	100%
		opacity: 1

@keyframes pulse-75
	0
		opacity: 1
	50%
		opacity: .8
	100%
		opacity: 1

@keyframes background-fill-left-right
	from
		background-position: right bottom
	to
		background-position: left bottom

@keyframes grow-bounce-in
	0
		transform: scale(0.8)
		opacity: 0
	50%
		transform: scale(1.05)
		opacity: 1
	85%
		transform: scale(1.0)
	90%
		transform: scale(0.99)
	100%
		transform: scale(1.0)

@keyframes grow-bounce-out
	0
		transform: scale(1.0)
		opacity: 1
	100%
		transform: scale(0.9)
		opacity: 0

@keyframes background-slide
	from
		background-position: 0 0
	to
		background-position: 50px 50px

@keyframes grow-bounce
	0
		transform: scale(1.0)
		opacity: 1
	50%
		transform: scale(1.01)
		opacity: .9
	85%
		transform: scale(1.0)
	90%
		transform: scale(0.99)
		opacity: 1
	100%
		transform: scale(1.0)

@keyframes grow-bounce-heartbeat
	0
		transform: scale(1.0)
	85%
		transform: scale(1.0)
	90%
		transform: scale(1.15)
	94%
		transform: scale(0.9)
	96%
		transform: scale(1.05)
	100%
		transform: scale(1.0)

=list-bullets
	ul
		padding-left: 20px
		list-style: none

		li:before
			content: '·'
			font-weight: 400
			position: relative
			left: -10px


=node-details-description
	padding: 15px 0 25px 0
	color: darken($color-text-dark, 5%)
	font:
		family: $font-body
		weight: 300
		size: 1.2em

	word-break: break-word
	clear: both
	+clearfix

	+media-xs
		font-size: 1.1em

	strong, b
		font-weight: 400

	a:not([class])
		color: $color-text-dark-primary
		text-decoration: underline

		&:hover
			color: $color-primary

	p
		padding:
			left: 20px
			right: 20px
		margin-bottom: 20px
		line-height: 1.5em
		word-wrap: break-word

	h1, h2, h3, h4, h5, h6
		padding:
			top: 20px
			left: 20px
			right: 20px

	blockquote
		background-color: lighten($color-background, 5%)
		text-shadow: 1px 1px 0 rgba(white, .2)
		margin:
			left: 20px
			right: 20px
			bottom: 30px
		font-size: 1em

		p
			padding: 0
			margin: 0
	ul li blockquote
		margin:
			left: 0
			top: 15px

	img,
	p img,
	ul li img
		max-width: 100%
		padding:
			top: 25px
			// bottom: 10px
			bottom: 25px

	h2
		margin-bottom: 15px

		+media-xs
			font-size: 1.5em

	/* e.g. YouTube embed */
	iframe
		margin-top: 20px
		width: 100%
		max-width: 100%
		height: auto
		min-height: 354px

	+media-sm
		iframe
			min-height: 314px
	+media-xs
		iframe
			min-height: 314px

	iframe[src^="https://w.soundcloud"]
		min-height: auto

	+list-bullets

	ul
		padding-left: 40px
		margin-bottom: 25px

		li
			margin-bottom: 7px
			img
				display: block
				padding:
					top: 25px
					bottom: 10px

			ul, ul li ul
				margin-top: 15px
				padding-left: 20px

	code, kbd, pre, samp
		font-size: 1.3rem

	pre
		background-color: lighten($color-background, 5%)
		border-color: $color-background
		border-radius: 3px
		color: $color-text

		/* when <pre> is outside <p> */
		margin:
			left: 20px
			right: 20px
	pre+p
		margin-top: 30px

	p+pre
		/* a <pre> right after a <p> usually are related, remove some spacing */
		margin-top: -10px

	p
		pre
			/* We already have spacing on the sides inside <p> */
			margin:
				left: 0
				right: 0


=markdown-preview-container
	border:
		top: 1px solid $color-background
		bottom: 1px solid $color-background
	position: relative
	margin: 40px auto 25px auto
	padding: 10px 10px 25px 10px
	color: $color-text-dark-primary
	cursor: default
	transition: all 150ms ease-in-out

	+node-details-description

	// Funny, normalize.css doesn't normalize when it's outside
	h1
		font-size: 2.8em
	h2
		margin-bottom: 15px


=ribbon
	background-color: $color-success
	cursor: default
	overflow: hidden
	white-space: nowrap
	position: absolute
	right: -40px
	top: 10px
	-webkit-transform: rotate(45deg)
	-moz-transform: rotate(45deg)
	-ms-transform: rotate(45deg)
	-o-transform: rotate(45deg)
	transform: rotate(45deg)

	span
		border: thin dashed rgba(white, .5)
		color: white
		display: block
		font-size: 70%
		margin: 1px 0
		padding: 3px 50px
		text:
			align: center
			transform: uppercase

@mixin text-background($text-color, $background-color, $roundness, $padding)
	border-radius: $roundness
	padding: $padding
	background-color: rgba($background-color, .9)
	box-shadow: 0.5em 0 0 rgba($background-color, .9),-0.5em 0 0 rgba($background-color, .9)
	box-decoration-break: clone
	color: $text-color

=list-meta
	margin: 0
	padding: 0
	list-style: none
	color: $color-text-dark-primary

	li
		display: inline-block
		padding-left: 15px
		position: relative

		&:before
			content: '·'
			position: relative
			top: 1px
			left: -7px
			color: $color-text-dark-secondary

		&:first-child
			padding-left: 0

			&:before
				content: ''
	a
		color: $color-text-dark-secondary
		&:hover
			color: $color-primary

/* Bootstrap's img-responsive class */
=img-responsive
	display: block
	max-width: 100%
	height: auto


.flash-on
	background-color: lighten($color-success, 50%) !important
	border-color: lighten($color-success, 40%) !important
	color: $color-success !important
	text-shadow: 1px 1px 0 white
	transition: all .1s ease-in
	img
		transition: all .1s ease-in
		opacity: .8

.flash-off
	transition: all 1s ease-out
	img
		transition: all 1s ease-out