float-labels.scss

/*!
 * Float Labels
 * @version: 3.3.9
 * @author: Paul Ryley (http://geminilabs.io)
 * @url: https://pryley.github.io/float-labels.js
 * @license: MIT
 */

$float-labels: () !default;

$float-labels-defaults: (
	base-height             : 24px,
	base-padding            : 6px,
	border-radius           : 3px,
	border-width            : 1px,
	margin-bottom           : 24px,
	color-background        : #fff,
	color-background-active : #fff,
	color-background-focus  : #fff,
	color-border            : #dfdfdf,
	color-border-active     : #dfdfdf,
	color-border-focus      : #1976D2,
	color-placeholder       : #bbb,
	color-required          : #D32F2F,
	color-text              : #444,
	color-text-focus        : #1976D2,
	line-height             : 1.5,
	font-size               : 16px,
	font-size-small         : 12px,
	font-weight             : 400,
	parent                  : '',
	prefix                  : 'fl-',
	transition-easing       : ease-in-out,
	transition-speed        : 0.2s,
);

@function fl($value) {
	@return map-get(map-merge($float-labels-defaults, $float-labels), $value);
}

@function str-replace($string, $search, $replace: '') {
	$index: str-index($string, $search);
	@if $index {
		@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
	}
	@return $string;
}

@mixin fl-style-1 {
	input.#{fl(prefix)}input,
	select.#{fl(prefix)}select,
	textarea.#{fl(prefix)}textarea {
		padding: fl(base-padding) fl(base-padding)*2;
	}
	select.#{fl(prefix)}select {
		height: fl(base-height) + fl(base-padding)*2 + fl(border-width)*2;
	}
	.#{fl(prefix)}is-active input.#{fl(prefix)}input,
	.#{fl(prefix)}is-active select.#{fl(prefix)}select,
	.#{fl(prefix)}is-active textarea.#{fl(prefix)}textarea {
		padding: fl(base-padding) fl(base-padding)*2;
	}
	label.#{fl(prefix)}label {
		top: fl(border-width);
		left: fl(border-width) + fl(base-padding)*1.5;
		background-color: transparent;
		padding: fl(base-padding)*2 fl(base-padding)/2;
	}
	label.#{fl(prefix)}label:before {
		content: '';
		display: block;
		position: absolute;
		top: fl(border-width) + fl(base-padding) + fl(font-size-small);
		left: 0;
		right: 0;
		height: fl(border-width);
		background-color: fl(color-background);
		z-index: -1;
	}
	$label-top: round((fl(base-padding) + fl(font-size-small))/2);
	.#{fl(prefix)}is-active label.#{fl(prefix)}label {
		top: - $label-top;
		padding: fl(base-padding)/2;
	}
	.#{fl(prefix)}is-active label.#{fl(prefix)}label:before {
		top: $label-top;
	}
}

@mixin fl-style-2 {
	input.#{fl(prefix)}input,
	select.#{fl(prefix)}select,
	textarea.#{fl(prefix)}textarea {
		padding: fl(base-padding)*2;
	}
	select.#{fl(prefix)}select {
		height: fl(base-height) + fl(base-padding)*4 + fl(border-width)*2;
	}
	.#{fl(prefix)}is-active input.#{fl(prefix)}input,
	.#{fl(prefix)}is-active select.#{fl(prefix)}select,
	.#{fl(prefix)}is-active textarea.#{fl(prefix)}textarea {
		padding: fl(base-padding)*3 fl(base-padding)*2 fl(base-padding)*1;
	}
	label.#{fl(prefix)}label {
		top: fl(border-width);
		left: fl(border-width) + fl(base-padding)*1.5;
		padding: fl(base-padding) fl(base-padding)/2 fl(base-padding)/2;
	}
	.#{fl(prefix)}is-required:before {
		padding-top: fl(base-padding)*2;
	}
}

#{fl(parent)}.#{fl(prefix)}form .#{fl(prefix)}wrap {
	position: relative;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

#{fl(parent)}.#{fl(prefix)}form input.#{fl(prefix)}input,
#{fl(parent)}.#{fl(prefix)}form select.#{fl(prefix)}select,
#{fl(parent)}.#{fl(prefix)}form textarea.#{fl(prefix)}textarea {
	width: 100%;
	outline: 0;
	font-size: fl(font-size);
	line-height: fl(line-height);
	border-radius: fl(border-radius);
	border: fl(border-width) solid fl(color-border);
	background-color: fl(color-background);
	box-sizing: border-box;
	transition: all fl(transition-speed) fl(transition-easing);
	margin-bottom: fl(margin-bottom);

	&:-moz-placeholder {
		color: fl(color-placeholder);
	}
	&::-moz-placeholder {
		color: fl(color-placeholder);
	}
	&:-ms-input-placeholder {
		color: fl(color-placeholder);
	}
	&::-webkit-input-placeholder {
		color: fl(color-placeholder);
	}
}

#{fl(parent)}.#{fl(prefix)}form select.#{fl(prefix)}select {
	position: relative;
	color: fl(color-placeholder);
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	&::-ms-expand {
		display: none;
	}
}

#{fl(parent)}.#{fl(prefix)}form .#{fl(prefix)}is-active input.#{fl(prefix)}input,
#{fl(parent)}.#{fl(prefix)}form .#{fl(prefix)}is-active select.#{fl(prefix)}select,
#{fl(parent)}.#{fl(prefix)}form .#{fl(prefix)}is-active textarea.#{fl(prefix)}textarea {
	color: fl(color-text);
	background-color: fl(color-background-active);
	border-color: fl(color-border-active);
}

#{fl(parent)}.#{fl(prefix)}form .#{fl(prefix)}has-focus input.#{fl(prefix)}input,
#{fl(parent)}.#{fl(prefix)}form .#{fl(prefix)}has-focus select.#{fl(prefix)}select,
#{fl(parent)}.#{fl(prefix)}form .#{fl(prefix)}has-focus textarea.#{fl(prefix)}textarea {
	background-color: fl(color-background-focus);
	border-color: fl(color-border-focus);
}

#{fl(parent)}.#{fl(prefix)}form label.#{fl(prefix)}label {
	opacity: 0;
	visibility: hidden;
	display: block;
	position: absolute;
	top: - fl(font-size-small);
	left: 0;
	font-size: fl(font-size-small);
	font-weight: fl(font-weight);
	line-height: 1;
	color: fl(color-placeholder);
	border-top-left-radius: fl(border-radius);
	transition: all fl(transition-speed) fl(transition-easing);
	z-index: 1;
}

body[dir=rtl] #{fl(parent)}.#{fl(prefix)}form label.#{fl(prefix)}label {
	left: unset;
	right: 0;
}

#{fl(parent)}.#{fl(prefix)}form .#{fl(prefix)}is-active label.#{fl(prefix)}label {
	opacity: 1;
	visibility: visible;
}

#{fl(parent)}.#{fl(prefix)}form .#{fl(prefix)}has-focus label.#{fl(prefix)}label {
	color: fl(color-text-focus);
}

#{fl(parent)}.#{fl(prefix)}form .#{fl(prefix)}is-required:before {
	opacity: 1;
	content: '*';
	display: block;
	position: absolute;
	top: fl(border-width);
	right: fl(base-height)/2 + fl(base-padding)/2;
	font-size: fl(font-size);
	line-height: 1.75;
	color: fl(color-required);
	transition: all fl(transition-speed) fl(transition-easing);
	padding: fl(base-padding) 0 0;
	z-index: 1;
}

body[dir=rtl] #{fl(parent)}.#{fl(prefix)}form .#{fl(prefix)}is-required:before {
	right: unset;
	left: fl(base-height)/2 + fl(base-padding)/2;
}

#{fl(parent)}.#{fl(prefix)}form .#{fl(prefix)}is-required.#{fl(prefix)}is-active:before {
	opacity: 0;
}

#{fl(parent)}.#{fl(prefix)}form.#{fl(prefix)}style-1 {
	@include fl-style-1;
}

body[dir=rtl] #{fl(parent)}.#{fl(prefix)}form.#{fl(prefix)}style-1 label.#{fl(prefix)}label {
	left: unset;
	right: fl(border-width) + fl(base-padding)*1.5;
}

#{fl(parent)}.#{fl(prefix)}form.#{fl(prefix)}style-2 {
	@include fl-style-2;
}

body[dir=rtl] #{fl(parent)}.#{fl(prefix)}form.#{fl(prefix)}style-2 label.#{fl(prefix)}label {
	left: unset;
	right: fl(border-width) + fl(base-padding)*1.5;
}

#{fl(parent)}.#{fl(prefix)}form .#{fl(prefix)}wrap-select:after {
	content: '';
	position: absolute;
	display: block;
	top: fl(border-width);
	right: 6px;
	height: calc(100% - #{fl(border-width)*2});
	width: fl(base-height)/2;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 16'%3E%3Cpath fill='#{str-replace(#{fl(color-placeholder)},'#','%23')}' d='M 4 0 L 0 6.5 L 8 6.5 L 4 0 z M 0 9.5 L 4 16 L 4 16 L 8 9.5 z'/%3E%3C/svg%3E") no-repeat;
	background-position: 100% 50%;
	background-size: 7px 14px;
	z-index: 2;
}

body[dir=rtl] #{fl(parent)}.#{fl(prefix)}form .#{fl(prefix)}wrap-select:after {
	right: unset;
	left: 6px;
}