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: 100%
		max-width: $screen-lg-min

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

		+clearfix

@mixin button($mixin-color, $roundness, $filled: false)
	display: inline-flex
	align-items: center
	justify-content: center
	padding: 5px 12px
	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
		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
		outline: none
		border-color: $mixin-color
		background-color: $mixin-color
		color: white

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

	&:disabled
		cursor: not-allowed
		color: $color-text-dark-secondary
		border-color: $color-text-dark-hint

		&:hover
			@if $filled
				background: rgba($color-text-dark-hint, .2)
			@else
				background-color: rgba($color-text-dark-hint, .1)

		@if $filled
			background: rgba($color-text-dark-hint, .1)
			text-shadow: none


=disabled-stripes
	color: $color-text-dark
	cursor: not-allowed
	background: repeating-linear-gradient(-45deg, lighten($color-text-dark-hint, 15%), lighten($color-text-dark-hint, 15%) 10px, lighten($color-text-dark-hint, 5%) 10px, lighten($color-text-dark-hint, 5%) 20px)
	border-color: darken($color-text-dark-hint, 5%)
	pointer-events: none
	opacity: .6


@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
		iteration-count: infinite
		timing-function: linear

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

=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
	// padding: 5px 5px 5px 0
	color: $color-text-dark
	background-color: transparent

	&:hover
		border-bottom-color: $color-background

	&:focus
		outline: 0
		border-color: $primary
		box-shadow: none

=label-generic
	color: $color-text-dark-primary
	font-weight: normal
	font-size: .9em
	margin: 0

@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)

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

.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 wiggle
	0
		transform: rotate(0deg)
	25%
		transform: rotate(25deg)
	75%
		transform: rotate(-25deg)
	100%
		transform: rotate(0deg)

@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
	+clearfix
	color: darken($color-text-dark, 5%)
	font:
		weight: 300
		size: 1.2em

	word-break: break-word

	+media-xs
		font-size: 1.1em

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

		&:hover
			color: $color-primary

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

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

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

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

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

		&.emoji
			display: inline-block
			padding: initial

	h2
		margin-bottom: 15px

		+media-xs
			font-size: 1.5em

	/* e.g. YouTube embed */
	iframe
		height: auto
		margin: 15px auto
		max-width: 100%
		min-height: 500px
		width: 100%

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

	iframe[src^="https://www.youtube"]
		+media-xs
			iframe
				min-height: 420px
		min-height: 500px

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

	+list-bullets

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

		li
			margin-bottom: 7px

			img
				display: block
				padding:
					bottom: 10px
					top: 25px

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

	code, kbd, pre, samp
		background-color: rgba($color-primary, .05)
		color: darken($color-primary, 15%)
		font-size: inherit
		white-space: pre-line

		code
			background-color: transparent

	kbd
		border:
			color: rgba($color-primary, .33)
			radius: 3px
			style: solid
			width: 2px
		cursor: default
		display: inline-block
		font:
			size: .9em
			weight: bold
		margin: 2px
		min-width: 15px
		padding: 0 3px
		text:
			align: center
			transform: uppercase

=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: $background-color
	box-shadow: 0.5em 0 0 $background-color,-0.5em 0 0 $background-color
	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

/* Set the color for a specified property
 * 1: $property: e.g. background-color
 * 2: $where: ':before', ' .class-name', etc.
 * 3: $variation: 'light', 'dark', or empty
 * e.g. @include status-color-property(background-color, ':before', 'light')
 */
@mixin status-color-property($property, $where: false, $variation: false)

	@if not ($where)
		$where: ''

	&.status
		&-invalid#{$where}
			@if ($variation == 'light')
				#{$property}: $color-status-invalid-light
			@else if ($variation == 'dark')
				#{$property}: $color-status-invalid-dark
			@else
				#{$property}: $color-status-invalid
		&-todo#{$where}
			@if ($variation == 'light')
				#{$property}: $color-status-todo-light
			@else if ($variation == 'dark')
				#{$property}: $color-status-todo-dark
			@else
				#{$property}: $color-status-todo
		&-in_progress#{$where}
			@if ($variation == 'light')
				#{$property}: $color-status-in_progress-light
			@else if ($variation == 'dark')
				#{$property}: $color-status-in_progress-dark
			@else
				#{$property}: $color-status-in_progress
		&-on_hold#{$where}
			@if ($variation == 'light')
				#{$property}: $color-status-on_hold-light
			@else if ($variation == 'dark')
				#{$property}: $color-status-on_hold-dark
			@else
				#{$property}: $color-status-on_hold
		&-approved#{$where}
			@if ($variation == 'light')
				#{$property}: $color-status-approved-light
			@else if ($variation == 'dark')
				#{$property}: $color-status-approved-dark
			@else
				#{$property}: $color-status-approved
		&-cbb#{$where}
			@if ($variation == 'light')
				#{$property}: $color-status-cbb-light
			@else if ($variation == 'dark')
				#{$property}: $color-status-cbb-dark
			@else
				#{$property}: $color-status-cbb
		&-final#{$where}
			@if ($variation == 'light')
				#{$property}: $color-status-final-light
			@else if ($variation == 'dark')
				#{$property}: $color-status-final-dark
			@else
				#{$property}: $color-status-final
		&-review#{$where}
			@if ($variation == 'light')
				#{$property}: $color-status-review-light
			@else if ($variation == 'dark')
				#{$property}: $color-status-review-dark
			@else
				#{$property}: $color-status-review

=sidebar-button-active
	background-color: $color-background-nav
	box-shadow: inset 2px 0 0 $color-primary
	color: white

.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

.cursor-pointer
	cursor: pointer

.user-select-none
	user-select: none