Arreglos para time y date dropper.

_date-dropper.scss

//colors
$black_5: rgba(0,0,0,0.05);
$color_lochmara_approx: #08c;
$color_mine_shaft_approx: #333;
$color_lochmara_45_approx: rgba(0, 136, 204, 0.45);
$white: #ffffff;
$color_pattens_blue_approx: #e3f2fa;

//fonts
$font_0: dd-icon;
$font_1: dd-icon" !important;
$font_2: sans-serif;

//urls
$url_0: url(dd-icon/dd-icon.eot);
$url_1: url(dd-icon/dd-icon.eot?#iefix);
$url_2: url(dd-icon/dd-icon.woff);
$url_3: url(dd-icon/dd-icon.ttf);
$url_4: url(dd-icon/dd-icon.svg#dd-icon);

//@extend-elements
//original selectors
//[class^="dd-icon-"]:before, [class*=" dd-icon-"]:before
%extend_1 {
	font-family: $font_1;
	font-style: normal !important;
	font-weight: normal !important;
	font-variant: normal !important;
	text-transform: none !important;
	speak: none;
	line-height: 1;
}

//original selectors
//.dd-w .dd-s-b-s, .dd-w .dd-s-b-sub-y
%extend_2 {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	line-height: 46px;
	z-index: 2;
	display: none;
	cursor: pointer;
}


@charset "UTF-8";
@font-face {
	font-family: $font_0;
	src: $url_1 format("embedded-opentype"), $url_2 format("woff"), $url_3 format("truetype"), $url_4 format("svg");
	font-weight: normal;
	font-style: normal;
}
.dd-w {
	//Instead of the line below you could use @include box-sizing($bs)
	box-sizing: border-box;
	//Instead of the line below you could use @include user-select($select)
	user-select: none;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	font-family: $font_2;
	line-height: 0;
	font-size: 16px;
	font-weight: bold;
	display: none;
	z-index: 9999;
	* {
		//Instead of the line below you could use @include box-sizing($bs)
		box-sizing: border-box;
		//Instead of the line below you could use @include user-select($select)
		user-select: none;
	}
	.dd-trans {
		//Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
		transition: all 0.4s cubic-bezier(.7, 0, .175, 1);
	}
	.dd-b {
		//Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
		transition: all 0.6s cubic-bezier(.175,.885,.32,1.275) 0s;
		position: relative;
		overflow: hidden;
		z-index: 1;
		&:hover {
			//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
			transform: scale(1.12);
			.dd-n {
				display: block;
			}
		}
	}
	.dd-w-c {
		width: 124px;
	}
	.dd-ul {
		overflow-x: scroll;
		li {
			width: 124px;
		}
	}
	ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	li {
		float: left;
		cursor: pointer;
	}
	.dd-c {
		position: absolute;
		animation-fill-mode: both;
		.dd-m {
			line-height: 46px;
			height: 46px;
			font-size: 20px;
			ul {
				height: 46px;
			}
			.dd-n {
				line-height: 46px;
				height: 46px;
			}
			.dd-ul {
				height: 66px;
			}
		}
		.dd-y {
			line-height: 46px;
			height: 46px;
			ul {
				height: 46px;
			}
			.dd-n {
				line-height: 46px;
				height: 46px;
			}
			.dd-ul {
				height: 66px;
			}
		}
		.dd-s {
			height: 46px;
			line-height: 46px;
			height: 46px;
			cursor: pointer;
		}
		.dd-sub-y {
			line-height: 46px;
			height: 46px;
			.dd-n {
				line-height: 46px;
				height: 46px;
			}
			.dd-ul {
				height: 66px;
			}
		}
		.dd-d {
			height: 76px;
			line-height: 1;
			border-top: 1px solid $black_5;
			border-bottom: 1px solid $black_5;
			ul {
				height: 76px;
				line-height: 1;
				li {
					padding-top: 6px;
				}
			}
			.dd-n {
				height: 76px;
				line-height: 76px;
			}
			.dd-ul {
				height: 96px;
			}
			strong {
				font-size: 42px;
			}
			span {
				font-size: 14px;
			}
		}
		&:after {
			position: absolute;
			content: "";
			left: 50%;
			width: 16px;
			height: 16px;
			margin-left: -8px;
		}
		.dd-ul ul {
			overflow: hidden;
		}
	}
	.dd-y-section {
		height: 46px;
		overflow: hidden;
		position: relative;
	}
	.dd-o {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}
	.dd-n {
		position: absolute;
		top: 2px;
		font-size: 14px;
		color: $color_lochmara_approx;
		display: none;
		cursor: pointer;
		text-align: center;
		width: 40px;
		&:hover {
			opacity: .8;
		}
	}
	.dd-n-left {
		left: 0;
	}
	.dd-n-right {
		right: 0;
	}
	.dd-sub-y {
		z-index: 6;
		position: absolute;
		bottom: 0;
		width: 100%;
		display: none;
		//Instead of the line below you could use @include transform-origin($origin-x, $origin-y, $origin-z, $only3d)
		transform-origin: bottom;
	}
	.dd-s-b {
		opacity: 0;
		visibility: hidden;
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: scale(0);
		position: absolute;
		top: 0;
		left: -1px;
		right: -32px;
		bottom: 46px;
		overflow-x: hidden;
		z-index: 2;
		&.dd-show {
			opacity: 1;
			visibility: visible;
			//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
			transform: scale(1);
		}
		span {
			display: block;
			line-height: 1;
			font-size: 10px;
			text-transform: uppercase;
		}
	}
	.dd-s-b-s {
		@extend %extend_2;
	}
	.dd-s-b-sub-y {
		@extend %extend_2;
		i {
			display: inline-block;
			margin: 0 6px;
			font-size: 12px;
		}
		span {
			display: inline-block;
			margin: 0 12px;
		}
	}
	.dd-s-b-ul {
		ul {
			padding: 8px;
		}
		li {
			width: 50%;
			font-size: 16px;
			margin: 0;
			position: relative;
			padding: 14px 0;
			line-height: 1;
			border-bottom: 1px solid $black_5;
			//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
			border-radius: 4px;
			&.dd-on:after {
				position: absolute;
				content: "\64";
				font-family: $font_1;
				top: 50%;
				left: 50%;
				margin-left: -20px;
				margin-top: -20px;
				width: 40px;
				height: 40px;
				font-size: 42px;
				font-weight: normal;
			}
		}
	}
	.dd-clear {
		clear: both;
		float: none;
	}
	.dd-bounce {
		animation-name: dd-bounce;
		animation-duration: 1s;
	}
	.dd-fadein {
		animation-name: dd-fadein;
		animation-duration: .3s;
	}
	.dd-fadeout {
		animation-name: dd-fadeout;
		animation-duration: .3s;
	}
	.dd-dropdown {
		animation-name: dd-dropdown;
		animation-duration: .5s;
	}
	.dd-alert {
		animation-name: dd-alert;
		animation-duration: .5s;
	}
	.dd-icon-right:before {
		content: "\62";
	}
	.dd-icon-left:before {
		content: "\63";
	}
	.dd-icon-close:before {
		content: "\61";
	}
	.dd-icon-check:before {
		content: "\65";
	}
	.dd-icon-sign:before {
		content: "\64";
	}
	&.dd-top .dd-c:after {
		bottom: -8px;
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: rotate(-135deg);
		background: $color_pattens_blue_approx;
	}
	&.dd-bottom .dd-c:after {
		top: -8px;
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: rotate(45deg);
		background: $white;
	}
	.dd-s-b-d li {
		font-size: 18px;
	}
}
.dd-s-b-ul {
	ul {
		width: 124px;
	}
	li.dd-on {
		color: $color_lochmara_approx;
	}
}
.dd-w-c {
	overflow: hidden;
	//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
	border-radius: 8px;
	text-align: center;
	position: relative;
	color: $color_mine_shaft_approx;
	border: 1px solid $color_lochmara_approx;
	//Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
	box-shadow: 0 0 10px 0 $color_lochmara_45_approx;
	background: $white;
}
@-webkit-keyframes dd-bounce {
	0% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: scale3d(1, 1, 1);
	}
	20% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: scale3d(1.25, 0.75, 1);
	}
	30% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: scale3d(0.75, 1.25, 1);
	}
	60% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: scale3d(1.15, 0.85, 1);
	}
	70% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: scale3d(.95, 1.05, 1);
	}
	80% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: scale3d(1.05, .95, 1);
	}
	100% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: scale3d(1, 1, 1);
	}
}
@keyframes dd-bounce {
	0% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: scale3d(1, 1, 1);
	}
	20% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: scale3d(1.25, 0.75, 1);
	}
	30% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: scale3d(0.75, 1.25, 1);
	}
	60% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: scale3d(1.15, 0.85, 1);
	}
	70% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: scale3d(.95, 1.05, 1);
	}
	80% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: scale3d(1.05, .95, 1);
	}
	100% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: scale3d(1, 1, 1);
	}
}
@-webkit-keyframes dd-fadein {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes dd-fadein {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@-webkit-keyframes dd-fadeout {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes dd-fadeout {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@-webkit-keyframes dd-dropdown {
	0% {
		opacity: 0;
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: translate3d(0, -30%, 0);
	}
	100% {
		opacity: 1;
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: none;
	}
}
@keyframes dd-dropdown {
	0% {
		opacity: 0;
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: translate3d(0, -30%, 0);
	}
	100% {
		opacity: 1;
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: none;
	}
}
@-webkit-keyframes dd-alert {
	0% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: translate3d(0, 0, 0);
	}
	100% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: translate3d(0, 0, 0);
	}
	10% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: translate3d(-10px, 0, 0);
	}
	30% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: translate3d(-10px, 0, 0);
	}
	50% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: translate3d(-10px, 0, 0);
	}
	70% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: translate3d(-10px, 0, 0);
	}
	90% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: translate3d(-10px, 0, 0);
	}
	20% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: translate3d(10px, 0, 0);
	}
	40% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: translate3d(10px, 0, 0);
	}
	60% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: translate3d(10px, 0, 0);
	}
	80% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: translate3d(10px, 0, 0);
	}
}
@keyframes dd-alert {
	0% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: translate3d(0, 0, 0);
	}
	100% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: translate3d(0, 0, 0);
	}
	10% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: translate3d(-10px, 0, 0);
	}
	30% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: translate3d(-10px, 0, 0);
	}
	50% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: translate3d(-10px, 0, 0);
	}
	70% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: translate3d(-10px, 0, 0);
	}
	90% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: translate3d(-10px, 0, 0);
	}
	20% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: translate3d(10px, 0, 0);
	}
	40% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: translate3d(10px, 0, 0);
	}
	60% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: translate3d(10px, 0, 0);
	}
	80% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: translate3d(10px, 0, 0);
	}
}
.dd-s-b {
	background: $white;
}
.dd-c {
	&:after {
		background: $white;
		border-left: 1px solid $color_lochmara_approx;
		border-top: 1px solid $color_lochmara_approx;
	}
	.dd-s {
		background: $color_pattens_blue_approx;
		color: $color_lochmara_approx;
	}
}
.dd-n {
	color: $color_lochmara_approx;
}
.dd-sun {
	color: $color_lochmara_approx;
}
.dd-s-b-s {
	background: $color_pattens_blue_approx;
	color: $color_lochmara_approx;
}
.dd-s-b-sub-y {
	background: $color_pattens_blue_approx;
	color: $color_lochmara_approx;
}
.dd-sub-y {
	background: $color_pattens_blue_approx;
	color: $color_lochmara_approx;
}
[class^="dd-icon-"]:before {
	@extend %extend_1;
}
[class*=" dd-icon-"]:before {
	@extend %extend_1;
}
.dd-s-b-m li {
	font-size: 18px;
}

_time-dropper.scss

//colors
$color_emperor_approx: #4d4d4d;
$color_mariner_approx: #1977cc;
$black_5: rgba(0, 0, 0, 0.05);
$white: #fff;
$color_pattens_blue_approx: #dff3fa;

//fonts
$font_0: sans-serif;

//@extend-elements
//original selectors
//.td-wrap, .td-wrap *
%extend_1 {
	margin: 0;
	padding: 0;
	list-style: none;
	//Instead of the line below you could use @include box-sizing($bs)
	box-sizing: initial !important;
}

//original selectors
//.td-bulletpoint, .td-bulletpoint div, .td-lancette, .td-lancette div
%extend_2 {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}


.td-wrap {
	@extend %extend_1;
	display: none;
	font-family: $font_0;
	position: absolute;
	//Instead of the line below you could use @include user-select($select)
	user-select: none;
	outline: none;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 9999;
	color: $color_emperor_approx;
	* {
		@extend %extend_1;
	}
	svg {
		width: 100%;
	}
	&.td-show {
		display: block;
	}
}
.td-input {
	cursor: pointer;
}
.td-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.td-clock {
	width: 156px;
	height: 156px;
	//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
	border-radius: 156px;
	//Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
	box-shadow: 0 0 0 1px $color_mariner_approx, 0 0 0 8px $black_5;
	background: $white;
	margin: 0 auto;
	text-align: center;
	line-height: 156px;
	position: absolute;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	&:before {
		position: absolute;
		content: "";
		top: -10px;
		margin-left: -10px;
		left: 50%;
		width: 20px;
		height: 20px;
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: rotate(45deg);
		background: $white;
		border-left: 1px solid $color_mariner_approx;
		border-top: 1px solid $color_mariner_approx;
		//Instead of the line below you could use @include border-top-left-radius($radius)
		border-top-left-radius: 4px;
	}
	.td-time {
		font-weight: bold;
		position: relative;
		span {
			width: 42px;
			height: 42px;
			display: inline-block;
			vertical-align: middle;
			line-height: 42px;
			text-align: center;
			margin: 6px;
			position: relative;
			z-index: 2;
			cursor: pointer;
			font-size: 2em;
			//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
			border-radius: 6px;
			&.on {
				color: $color_mariner_approx;
			}
		}
	}
}
.td-svg {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
.td-svg-2 {
	position: absolute;
	top: 18px;
	left: 18px;
	bottom: 18px;
	right: 18px;
}
.td-deg {
	background-position: center;
	background-repeat: no-repeat;
	background-size: 80%;
	z-index: 1;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.td-medirian {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	span {
		width: 40px;
		height: 40px;
		//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
		border-radius: 40px;
		line-height: 40px;
		text-align: center;
		margin: 0;
		position: absolute;
		z-index: 2;
		left: 50%;
		margin-left: -20px;
		font-size: .8em;
		opacity: 0;
		font-weight: bold;
	}
	.td-icon-am {
		top: 40px;
		&.td-on {
			top: 26px;
			opacity: 1;
		}
	}
	.td-icon-pm {
		bottom: 40px;
		&.td-on {
			bottom: 26px;
			opacity: 1;
		}
	}
}
.td-select {
	position: absolute;
	top: 4px;
	left: 32px;
	right: 32px;
	bottom: 22px;
	svg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
	}
	&:after {
		position: absolute;
		background: $white;
		width: 36px;
		height: 36px;
		//Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
		box-shadow: 0 0 0 1px $color_mariner_approx;
		//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
		border-radius: 60px;
		top: -16px;
		left: 50%;
		margin-left: -18px;
		//Instead of the line below you could use @include border-bottom-left-radius($radius)
		border-bottom-left-radius: 0;
		content: "";
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: rotate(-45deg);
		cursor: pointer;
	}
}
.td-n {
	//Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
	transition: all 0.4s cubic-bezier(.7, 0, .175, 1) 0s;
}
.td-n2 {
	//Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
	transition: all 0.2s linear 0s;
}
@-webkit-keyframes td-alert {
	0% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: scale3d(1, 1, 1);
	}
	10% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
	}
	20% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
	}
	30% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
	}
	50% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
	}
	70% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
	}
	90% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
	}
	40% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
	}
	60% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
	}
	80% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
	}
	100% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: scale3d(1, 1, 1);
	}
}
@keyframes td-alert {
	0% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: scale3d(1, 1, 1);
	}
	10% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
	}
	20% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
	}
	30% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
	}
	50% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
	}
	70% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
	}
	90% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
	}
	40% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
	}
	60% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
	}
	80% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
	}
	100% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: scale3d(1, 1, 1);
	}
}
.td-alert {
	animation-name: td-alert;
	animation-duration: .8s;
	animation-fill-mode: both;
}
@-webkit-keyframes td-bounce {
	0% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: scale3d(1, 1, 1);
	}
	20% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: scale3d(1.25, 0.75, 1);
	}
	30% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: scale3d(0.75, 1.25, 1);
	}
	60% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: scale3d(1.15, 0.85, 1);
	}
	70% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: scale3d(.95, 1.05, 1);
	}
	80% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: scale3d(1.05, .95, 1);
	}
	100% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: scale3d(1, 1, 1);
	}
}
@keyframes td-bounce {
	0% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: scale3d(1, 1, 1);
	}
	20% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: scale3d(1.25, 0.75, 1);
	}
	30% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: scale3d(0.75, 1.25, 1);
	}
	60% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: scale3d(1.15, 0.85, 1);
	}
	70% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: scale3d(.95, 1.05, 1);
	}
	80% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: scale3d(1.05, .95, 1);
	}
	100% {
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: scale3d(1, 1, 1);
	}
}
.td-bounce {
	animation-name: td-bounce;
	animation-duration: 1s;
}
@-webkit-keyframes td-fadein {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes td-fadein {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
.td-fadein {
	animation-name: td-fadein;
	animation-duration: .3s;
}
@-webkit-keyframes td-fadeout {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes td-fadeout {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
.td-fadeout {
	animation: td-fadeout .3s forwards;
}
@-webkit-keyframes td-dropdown {
	0% {
		opacity: 0;
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: translate3d(0, -100px, 0);
	}
	100% {
		opacity: 1;
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: none;
	}
}
@keyframes td-dropdown {
	0% {
		opacity: 0;
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: translate3d(0, -100px, 0);
	}
	100% {
		opacity: 1;
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: none;
	}
}
.td-dropdown {
	animation-name: td-dropdown;
	animation-duration: .5s;
}
.td-bulletpoint {
	@extend %extend_2;
	div {
		@extend %extend_2;
		&:after {
			position: absolute;
			content: "";
			top: 14px;
			left: 50%;
			margin-left: -2px;
			width: 4px;
			height: 4px;
			//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
			border-radius: 10px;
		}
	}
}
.td-lancette {
	@extend %extend_2;
	border: 2px solid $color_pattens_blue_approx;
	//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
	border-radius: 100%;
	margin: 6px;
	div {
		@extend %extend_2;
		&:after {
			position: absolute;
			top: 20px;
			left: 50%;
			margin-left: -1px;
			width: 2px;
			bottom: 50%;
			//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
			border-radius: 10px;
			background: $color_pattens_blue_approx;
			content: "";
		}
		&:last-child:after {
			top: 36px;
		}
	}
}
.td-init .td-deg {
}

config.yml

# Your project's server will run on localhost:xxxx at this port
PORT: 3000

# Autoprefixer will make sure your CSS works with these browsers
COMPATIBILITY:
  - "last 2 versions"
  - "ie >= 9"

# UnCSS will use these settings
UNCSS_OPTIONS:
  html:
    - "src/**/*.html"
  ignore:
    - !!js/regexp .foundation-mq
    - !!js/regexp ^\.is-.*

# Gulp will reference these paths when it copies files
PATHS:
  # Path to source folder
  sources: "jet/static/jet_src"
  # Path to dist folder
  dist: "jet/static/jet"
  # Paths to static assets that aren't images, CSS, or JavaScript
  assets:
    - "jet/static/jet_src/**/*"
    - "!jet/static/jet_src/{img,js,scss,fonts}/**/*"
  # Paths to Sass libraries, which can then be loaded with @import
  sass:
    - "jet/static/jet_src/scss"
    - "jet/static/jet_src/scss/select2"
    - "node_modules/font-awesome/scss/"

  # Paths to sass themes, which will be build
  themes:
    - "jet/static/jet_src/scss/themes/"
    # - "jet/static/jet_src/scss/themes/default"
    # - "jet/static/jet_src/scss/themes/green"
    # - "jet/static/jet_src/scss/themes/blue"
    # - "jet/static/jet_src/scss/themes/light-blue"
    # - "jet/static/jet_src/scss/themes/light-gray"
    # - "jet/static/jet_src/scss/themes/light-green"
    # - "jet/static/jet_src/scss/themes/violet"
    # - "jet/static/jet_src/scss/themes/light-violet"
    # - "jet/static/jet_src/scss/themes/brown"
    # - "jet/static/jet_src/scss/themes/yellow"
    # - "jet/static/jet_src/scss/themes/red"
    # - "jet/static/jet_src/scss/themes/orange"

  # Paths to JavaScript libraries, which are compined into one file
  javascript:
    - "jet/static/jet_src/js/!(main).js"
    - "jet/static/jet_src/js/main.js"
    - "jet/static/jet_src/js/!(select2.jet).js"
    - "jet/static/jet_src/js/select2.jet.js"

  libraries:
    - "node_modules/jquery/dist/jquery.js"
    - "node_modules/jquery-ui/jquery-ui.js"
    - "node_modules/select2/js/select2.full.js"
    - "node_modules/perfect-scrollbar/js/perfect-scrollbar.js"
    - "node_modules/perfect-scrollbar/js/perfect-scrollbar.jquery.js"
    - "node_modules/js-cookie/js.cookie.js"

gulpfile.babel.js

'use strict';

import plugins  from 'gulp-load-plugins';
import yargs    from 'yargs';
import browser  from 'browser-sync';
import gulp     from 'gulp';
// import panini   from 'panini';
// import rimraf   from 'rimraf';
// import sherpa   from 'style-sherpa';
import yaml     from 'js-yaml';
import fs       from 'fs';

// Load all Gulp plugins into one variable
const $ = plugins();

// Check for --production flag
const PRODUCTION = !!(yargs.argv.production);

// Load settings from settings.yml
const { COMPATIBILITY, PORT, UNCSS_OPTIONS, PATHS } = loadConfig();

function loadConfig() {
  let ymlFile = fs.readFileSync('config.yml', 'utf8');
  return yaml.load(ymlFile);
}

function getFolders(dir) {
    return fs.readdirSync(dir)
      .filter(function(file) {
        return fs.statSync(path.join(dir, file)).isDirectory();
      });
}

// Build the "dist" folder by running all of the below tasks
gulp.task('build',
 gulp.series(clean, gulp.parallel(sass, javascript, images, copy)));

// Build the site, run the server, and watch for file changes
gulp.task('default',
  gulp.series('build', server, watch));

// Delete the "dist" folder
// This happens every time a build starts
function clean(done) {
  rimraf(PATHS.dist, done);
}

// Copy files out of the assets folder
// This task skips over the "img", "js", and "scss" folders, which are parsed separately
function copy() {
  return gulp.src(PATHS.assets)
    .pipe(gulp.dest(PATHS.dist));
}

// Compile Sass into CSS
// In production, the CSS is compressed
function sass() {
  var folders = getFolders(PATHS.themes);

  return folders.map(folder => {
    gulp.src(path.join(PATHS.themes, folder, '/**/*.scss'))
      .pipe($.sourcemaps.init())
      .pipe($.sass({
        includePaths: PATHS.sass
      })
          .on('error', $.sass.logError))
        .pipe($.autoprefixer({
          browsers: COMPATIBILITY
        }))
        // Comment in the pipe below to run UnCSS in production
        .pipe($.if(PRODUCTION, $.uncss(UNCSS_OPTIONS)))
        .pipe($.if(PRODUCTION, $.cssnano()))
        .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
        .pipe(gulp.dest(PATHS.dist + '/css/themes/'))
        .pipe(browser.reload({ stream: true }));
    });
}

// Combine JavaScript into one file
// In production, the file is minified
function javascript() {
    var js = gulp.src(PATHS.javascript)
    .pipe($.sourcemaps.init())
    .pipe($.babel())
    .pipe($.concat('main.js'))
    .pipe($.if(PRODUCTION, $.uglify()
      .on('error', e => { console.log(e); })
    ))
    .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
    .pipe(gulp.dest(PATHS.dist + '/js'));

    var libs = gulp.src(PATHS.libraries)
    .pipe($.sourcemaps.init())
    .pipe($.babel())
    .pipe($.concat('libraries.js'))
    .pipe($.if(PRODUCTION, $.uglify()
      .on('error', e => { console.log(e); })
    ))
    .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
    .pipe(gulp.dest(PATHS.dist + '/js'));

  return merge(js, libs);
}

// Copy images to the "dist" folder
// In production, the images are compressed
function images() {
  return gulp.src(PATHS.sources + '/img/**/*')
    .pipe($.if(PRODUCTION, $.imagemin({
      progressive: true
    })))
    .pipe(gulp.dest(PATHS.dist + '/img'));
}

// Copy fonts to the "dist" folder
function fonts() {
  return gulp.src(PATHS.sources + '/fonts/**/*')
    .pipe(gulp.dest(PATHS.dist + '/fonts'));
}

// Start a server with BrowserSync to preview the site in
function server(done) {
  browser.init({
    server: PATHS.dist, port: PORT
  });
  done();
}

// Reload the browser with BrowserSync
function reload(done) {
  browser.reload();
  done();
}

// Watch for changes to static assets, Sass, and JavaScript
function watch() {
  gulp.watch(PATHS.assets, copy);
  gulp.watch(PATHS.sources + '/scss/**/*.scss', sass);
  gulp.watch(PATHS.sources + '/js/**/*.js').on('change', gulp.series(javascript, browser.reload));
  gulp.watch(PATHS.sources + '/img/**/*').on('change', gulp.series(images, browser.reload));
  gulp.watch(PATHS.sources + '/fonts/**/*').on('change', gulp.series(fonts, browser.reload));
}

intrucciones.txt

En timedropper css:
- [] Donde aparece el color $white cambiar por $content-background-color
- [] Donde aparece el color $color_emperor_approx cambiar por $text-color
- [] Donde aparece $color_mariner_approx que es el primarycolor cambiar por $top-dropdown-contrast-background-color
- [] Donde aparece $color_pattens_blue_approx cambiar por $background-color
- [] Color de texto queda como $text-color