tarifas acabado a falta de check duplicados y guardar tarifa acabado

httpdocs/themes/vuexy/css/datatables-editor/scss/bubble.scss

@@ -0,0 +1,130 @@
+
+// Bubble form editing
+// Very similar to the main form, but attached to a particular node and the
+// form layout is slightly different with the fields container and buttons
+// making up a table of a single row and two columns. This allows the buttons
+// to be removed from the display and under this condition the fields will
+// take up the full width available.
+div.DTE_Bubble {
+	position: absolute;
+	z-index: 11;
+	margin-top: -6px;
+	opacity: 0;
+	transition: top 0.5s ease-in-out 0s;
+
+	div.DTE_Bubble_Liner {
+		position: absolute;
+		bottom: 0;
+		border: 1px solid black;
+		width: 300px;
+		margin-left: -150px;
+		background-color: white;
+		box-shadow: 0 12px 30px 0 rgba(0,0,0,.5);
+		border-radius: 6px;
+		border: 1px solid #666;
+		padding: 1em;
+		background: #fcfcfc;
+		@include box-sizing(border-box);
+
+		div.DTE_Bubble_Table {
+			width: 100%;
+
+			> form {
+				div.DTE_Form_Content {
+					padding: 0;
+
+					div.DTE_Field {
+						position: relative;
+						margin-bottom: 0.5em;
+
+						&:last-child {
+							margin-bottom: 0;
+						}
+
+						> label {
+							padding-top: 0;
+							margin-bottom: 0;
+						}
+
+						> div {
+							padding: 0;
+
+							input {
+								margin: 0;
+							}
+						}
+					}
+				}
+			}
+			
+			div.DTE_Form_Buttons {
+				text-align: right;
+				margin-top: 1em;
+
+				button {
+					margin-bottom: 0;
+				}
+			}
+		}
+
+		div.DTE_Header {
+			border-top-left-radius: 5px;
+			border-top-right-radius: 5px;
+		}
+
+		div.DTE_Header + div.DTE_Form_Info,
+		div.DTE_Header + div.DTE_Bubble_Table {
+			padding-top: 42px;
+		}
+
+
+		div.DTE_Form_Error {
+			float: none;
+			display: none;
+			padding: 0;
+			margin-bottom: 0.5em;
+		}
+
+		div.DTE_Bubble_Close {
+			@include close-icon();
+		}
+	}
+
+	div.DTE_Bubble_Triangle {
+		position: absolute;
+		height: 10px;
+		width: 10px;
+		top: -6px;
+		background-color: white;
+		border: 1px solid #666;
+		border-top: none;
+		border-right: none;
+
+		-webkit-transform: rotate(-45deg);
+		   -moz-transform: rotate(-45deg);
+		    -ms-transform: rotate(-45deg);
+		     -o-transform: rotate(-45deg);
+		        transform: rotate(-45deg);
+	}
+
+	&.below {
+		div.DTE_Bubble_Liner {
+			top: 10px;
+			bottom: auto;
+		}
+
+		div.DTE_Bubble_Triangle {
+			top: 4px;
+			-webkit-transform: rotate(135deg);
+			   -moz-transform: rotate(135deg);
+			    -ms-transform: rotate(135deg);
+			     -o-transform: rotate(135deg);
+			        transform: rotate(135deg);
+		}
+	}
+}
+
+div.DTE_Bubble_Background {
+	@include overlay-background();
+}
+

httpdocs/themes/vuexy/css/datatables-editor/scss/datatable.scss

@@ -0,0 +1,100 @@
+
+// Row highlighting on edit styles
+//
+// To change the colour of the highlight, simply modify the variable below and
+// recompile the SCSS stylesheet (if you don't have SASS installed, you can use
+// the online service at http://sassmeister.com/ .
+//
+// The DataTables styles below match the default DataTables stylesheet:
+// http://next.datatables.net/manual/styling/classes so you can retain the full
+// benefits of the DataTables styling options.
+
+$table-row-highlight: #FFFBCC;
+
+table.dataTable {
+	tbody {
+		tr.highlight {
+			background-color: $table-row-highlight !important;
+		}
+
+		tr.highlight,
+		tr.noHighlight,
+		tr.highlight td,
+		tr.noHighlight td {
+			@include background-transision();
+		}
+	}
+
+	&.stripe tbody,
+	&.display tbody {
+		tr.odd {
+			&.highlight {
+				background-color: shade($table-row-highlight, 2.35%);
+			}
+		}
+	}
+
+	// Hover classes - add "hover" class to the table to activate
+	&.hover tbody,
+	&.display tbody {
+		tr:hover,
+		tr.odd:hover,
+		tr.even:hover {
+			&.highlight {
+				background-color: shade($table-row-highlight, 3.6%);
+			}
+		}
+	}
+
+
+	// Sort column highlighting - add "hover" class to the table to activate
+	&.order-column,
+	&.display {
+		tbody {
+			tr.highlight>.sorting_1,
+			tr.highlight>.sorting_2,
+			tr.highlight>.sorting_3 {
+				background-color: shade($table-row-highlight, 2%);
+			}
+		}
+	}
+
+	&.display tbody,
+	&.order-column.stripe tbody {
+		tr.odd {
+			&.highlight {
+				>.sorting_1 { background-color: shade($table-row-highlight, 5.4%);}
+				>.sorting_2 { background-color: shade($table-row-highlight, 4.7%);}
+				>.sorting_3 { background-color: shade($table-row-highlight, 3.9%);}
+			}
+		}
+
+		tr.even {
+			&.highlight {
+				>.sorting_1 { background-color: shade($table-row-highlight, 2%); }
+				>.sorting_2 { background-color: shade($table-row-highlight, 1.2%); }
+				>.sorting_3 { background-color: shade($table-row-highlight, 0.4%); }
+			}
+		}
+	}
+
+	&.display tbody,
+	&.order-column.hover tbody {
+		tr:hover,
+		tr.odd:hover,
+		tr.even:hover {
+			&.highlight {
+				>.sorting_1 { background-color: shade($table-row-highlight, 8.2%); }
+				>.sorting_2 { background-color: shade($table-row-highlight, 7.5%); }
+				>.sorting_3 { background-color: shade($table-row-highlight, 6.3%); }
+			}
+		}
+	}
+
+	tr.dte-inlineAdd {
+		td,
+		th {
+			vertical-align: top;
+		}
+	}
+}

httpdocs/themes/vuexy/css/datatables-editor/scss/envelope.scss

@@ -0,0 +1,63 @@
+
+/*
+ * Namespace: DTED - DataTables Editor Display - Envelope
+ */
+
+div.DTED_Envelope_Wrapper {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 50%;
+	height: 100%;
+	z-index: 11;
+	display: none;
+	overflow: hidden;
+
+	// Create a shadow display at the top of the evelope to make it look like it has
+	// come from under the element that it is attached to/ Left and right to give a
+	// slight fade and the two ends
+	div.DTED_Envelope_Shadow {
+		position: absolute;
+		top: -10px;
+		left: 10px;
+		right: 10px;
+		height: 10px;
+		z-index: 10;
+		box-shadow: 0 0 20px black;
+	}
+
+	div.DTED_Envelope_Container {
+		position: absolute;
+		top: 0;
+		left: 5%;
+		width: 90%;
+
+		border-left: 1px solid #777;
+		border-right: 1px solid #777;
+		border-bottom: 1px solid #777;
+		box-shadow: 3px 3px 10px #555;
+		border-bottom-left-radius: 5px;
+		border-bottom-right-radius: 5px;
+		background-color: white;
+
+		div.DTE_Processing_Indicator {
+			right: 36px;
+		}
+
+		div.DTE_Footer {
+			border-bottom-left-radius: 5px;
+			border-bottom-right-radius: 5px;
+		}
+
+		div.DTED_Envelope_Close {
+			@include close-icon();
+		}
+	}
+}
+
+
+div.DTED_Envelope_Background {
+	@include overlay-background();
+}
+
+

httpdocs/themes/vuexy/css/datatables-editor/scss/fields.scss

@@ -0,0 +1,280 @@
+
+$input-border: 1px solid #aaa;
+
+$input-border: 1px solid #aaa;
+
+// Generic field styling
+div.DTE_Field {
+	input,
+	textarea {
+		box-sizing: border-box;
+		background-color: white;
+		-webkit-transition: background-color ease-in-out .15s;
+		        transition: background-color ease-in-out .15s;
+	}
+
+	input:focus,
+	textarea:focus {
+		background-color: #ffffee; 
+	}
+
+	input[type="color"],
+	input[type="date"],
+	input[type="datetime"],
+	input[type="datetime-local"],
+	input[type="email"],
+	input[type="month"],
+	input[type="number"],
+	input[type="password"],
+	input[type="search"],
+	input[type="tel"],
+	input[type="text"],
+	input[type="time"],
+	input[type="url"],
+	input[type="week"] {
+		padding: 5px 4px;
+		width: 100%;
+
+		// Chrome 83 introduces some really ugly borders
+		border: $input-border;
+		border-radius: 3px;
+	}
+
+	input[type="checkbox"],
+	input[type="radio"] {
+		vertical-align: middle;
+	}
+
+	select {
+		padding: 5px 4px;
+		border-radius: 3px;
+		border: $input-border;
+		background: white;
+		max-width: 100%;
+	}
+
+	label div.DTE_Label_Info {
+		font-size: 0.85em;
+		margin-top: 0.25em;
+
+		&:empty {
+			margin-top: 0;
+		}
+	}
+
+	div.DTE_Field_Info,
+	div.DTE_Field_Message,
+	div.DTE_Field_Error {
+		font-size: 11px;
+		line-height: 1em;
+		margin-top: 5px;
+
+		&:empty {
+			margin-top: 0;
+		}
+	}
+
+	div.DTE_Field_Error {
+		display: none;
+		color: #b11f1f;
+	}
+
+	div.multi-value {
+		display: none;
+		border: 1px dotted #666;
+		border-radius: 3px;
+		padding: 5px;
+		background-color: #fafafa;
+		cursor: pointer;
+
+		span {
+			font-size: 0.8em;
+			line-height: 1.25em;
+			display: block;
+			color: #666;
+		}
+
+		&.multi-noEdit {
+			border: 1px solid #ccc;
+			cursor: auto;
+			background-color: #fcfcfc;
+
+			&:hover {
+				background-color: #fcfcfc;
+			}
+		}
+
+		&:hover {
+			background-color: #f1f1f1;
+		}
+	}
+
+	&.disabled {
+		color: grey;
+
+		div.multi-value {
+			cursor: default;
+			border: 1px dotted #aaa;
+			background-color: transparent;
+		}
+	}
+
+	div.multi-restore {
+		display: none;
+		margin-top: 0.5em;
+		font-size: 0.8em;
+		line-height: 1.25em;
+		color: #3879d9;
+
+		&:hover {
+			text-decoration: underline;
+			cursor: pointer;
+		}
+	}
+}
+
+// Specific field type styling
+div.DTE_Field_Type_textarea {
+	textarea {
+		padding: 3px;
+		width: 100%;
+		height: 80px;
+		border: $input-border;
+	}
+}
+
+div.DTE_Field.DTE_Field_Type_date {
+	img {
+		vertical-align: middle;
+		cursor: pointer;
+	}
+}
+
+div.DTE_Field_Type_checkbox,
+div.DTE_Field_Type_radio {
+	div.DTE_Field_Input {
+		padding-top: 1px;
+
+		> div > div {
+			margin-bottom: 0.25em;
+
+			&:last-child {
+				margin-bottom: 0;
+			}
+
+			input {
+			}
+
+			label {
+				margin-left: 0.75em;
+				vertical-align: middle;
+			}
+		}
+	}
+}
+
+div.DTE_Field_Type_datatable {
+	div.dataTables_info {
+		font-size: 0.8em;
+		line-height: 1.3em;
+		padding-right: 1em;
+		padding-bottom: 0.5em;
+
+		span.select-info {
+			display: block;
+		}
+	}
+
+	div.dataTables_filter {
+		padding-right: 1em;
+		padding-bottom: 0.5em;
+
+		input {
+			width: 100%;
+		}
+	}
+
+	div.dt-buttons {
+		padding-right: 1em;
+		padding-bottom: 0.5em;
+
+		button {
+			width: 100%;
+		}
+
+		&:empty {
+			padding-bottom: 0;
+		}
+	}
+
+	div.dataTables_paginate {
+		float: none;
+		text-align: center;
+		font-size: 0.8em;
+	}
+
+	table.dataTable {
+		&.no-footer {
+			border-bottom: 1px solid #aaa !important;
+		}
+
+		thead {
+			th, td {
+				font-weight: normal;
+				padding-top: 3px;
+				padding-bottom: 3px;
+				border-bottom: 1px solid #aaa;
+			}
+		}
+
+		tbody {
+			th:first-child,
+			td:first-child {
+				border-left: 1px solid #aaa;
+			}
+
+			th:last-child,
+			td:last-child {
+				border-right: 1px solid #aaa;
+			}
+		}
+
+		tfoot {
+			th, td {
+				font-weight: normal;
+				padding-top: 3px;
+				padding-bottom: 3px;
+				border-top: 1px solid #aaa;
+			}
+		}
+	}
+
+	div.dataTables_scrollHead {
+		table.dataTable,
+		table.dataTable thead th,
+		table.dataTable thead td {
+			border-bottom: none !important;
+		}
+	}
+
+	div.dataTables_scrollBody {
+		border: 1px solid #aaa !important;
+		border-radius: 3px;;
+
+		table.dataTable {
+			border-bottom: none !important;
+
+			tbody {
+				th:first-child,
+				td:first-child {
+					border-left: none;
+				}
+	
+				th:last-child,
+				td:last-child {
+					border-right: none;
+				}
+			}
+		}
+	}
+}

httpdocs/themes/vuexy/css/datatables-editor/scss/inline.scss

@@ -0,0 +1,79 @@
+
+// Inline form editing
+// Hide the label and allow the field to take the full width
+div.DTE_Inline {
+	position: relative;
+	display: table;
+	width: 100%;
+
+	div.DTE_Inline_Field,
+	div.DTE_Inline_Buttons {
+		display: table-cell;
+		vertical-align: middle;
+
+		div.DTE_Field {
+			padding: 0;
+
+			>label {
+				display: none;
+			}
+
+			input[type="color"],
+			input[type="date"],
+			input[type="datetime"],
+			input[type="datetime-local"],
+			input[type="email"],
+			input[type="month"],
+			input[type="number"],
+			input[type="password"],
+			input[type="search"],
+			input[type="tel"],
+			input[type="text"],
+			input[type="time"],
+			input[type="url"],
+			input[type="week"] {
+				width: 100%;
+			}
+		}
+
+		div.DTE_Form_Buttons button {
+			margin: -6px 0 -6px 4px;
+			padding: 5px;
+		}
+	}
+
+	// Have the input types take up full space, taking into account the cell padding
+	div.DTE_Field input[type="color"],
+	div.DTE_Field input[type="date"],
+	div.DTE_Field input[type="datetime"],
+	div.DTE_Field input[type="datetime-local"],
+	div.DTE_Field input[type="email"],
+	div.DTE_Field input[type="month"],
+	div.DTE_Field input[type="number"],
+	div.DTE_Field input[type="password"],
+	div.DTE_Field input[type="search"],
+	div.DTE_Field input[type="tel"],
+	div.DTE_Field input[type="text"],
+	div.DTE_Field input[type="time"],
+	div.DTE_Field input[type="url"],
+	div.DTE_Field input[type="week"] {
+		margin: -6px 0;
+	}
+
+	div.DTE_Field_Error,
+	div.DTE_Form_Error {
+		font-size: 11px;
+		line-height: 1.2em;
+		padding: 0;
+		margin-top: 10px;
+
+		&:empty {
+			margin-top: 0;
+		}
+	}
+}
+
+// Responsive integration
+span.dtr-data div.DTE_Inline {
+	display: inline-table;
+}

httpdocs/themes/vuexy/css/datatables-editor/scss/lightbox.scss

@@ -0,0 +1,174 @@
+
+
+div.DTED_Lightbox_Wrapper {
+	position: fixed;
+	top: 0;
+	left: 50%;
+	margin-left: -390px;
+	width: 780px;
+	height: 100%;
+	z-index: 11;
+
+	div.DTED_Lightbox_Container {
+		display: table;
+		height: 100%;
+		width: 100%;
+
+		div.DTED_Lightbox_Content_Wrapper {
+			display: table-cell;
+			vertical-align: middle;
+			width: 100%;
+
+			div.DTED_Lightbox_Content {
+				position: relative;
+				box-shadow: 0 12px 30px 0 rgba(0,0,0,.5);
+				border-radius: 6px;
+				@include box-sizing(border-box);
+
+				div.DTE {
+					background: white;
+					border-radius: 6px;
+					border: 1px solid #666;
+					background: #fcfcfc;
+					@include box-sizing(border-box);
+
+					div.DTE_Header {
+						right: 0;
+						width: auto;
+						border-top-left-radius: 6px;
+						border-top-right-radius: 6px;
+					}
+					
+					div.DTE_Body_Content {
+						box-sizing: border-box;
+						background: #fcfcfc;
+					}
+
+					div.DTE_Footer {
+						right: 0;
+						width: auto;
+						border-bottom-left-radius: 6px;
+						border-bottom-right-radius: 6px;
+					}
+				}
+
+				div.DTED_Lightbox_Close {
+					@include close-icon();
+				}
+			}
+		}
+	}
+}
+
+div.DTED_Lightbox_Wrapper {
+	div.DTE_Footer {
+		display: flex;
+		justify-content: flex-end;
+	}
+
+	div.DTE_Footer_Content {
+		display: none;
+	}
+
+	div.DTE.inFormError div.DTE_Footer {
+		justify-content: space-between;
+	}
+}
+
+
+div.DTED_Lightbox_Background {
+	@include overlay-background();
+}
+
+
+body.DTED_Lightbox_Mobile {
+	div.DTED_Lightbox_Background {
+		height: 0;
+	}
+
+	div.DTED_Lightbox_Shown {
+		display: none;
+	}
+
+	div.DTED_Lightbox_Wrapper {
+		position: fixed;
+		top: 0px;
+		left: 0px;
+		right: 0px;
+		bottom: 0px;
+		width: auto;
+		height: auto;
+		margin-left: 0;
+		-webkit-overflow-scrolling: touch;
+
+		div.DTED_Lightbox_Container {
+			display: block;
+			height: 100%;
+
+			div.DTED_Lightbox_Content_Wrapper {
+				display: block;
+				height: 100%;
+
+				div.DTED_Lightbox_Content {
+					border-radius: 0;
+					box-shadow: none;
+					height: 100% !important;
+
+					div.DTE {
+						border-radius: 0;
+						height: 100%;
+
+						div.DTE_Header {
+							border-top-left-radius: 0;
+							border-top-right-radius: 0;
+						}
+
+						div.DTE_Body_Content {
+							padding-bottom: 52px;
+						}
+
+						div.DTE_Footer {
+							border-bottom-left-radius: 0;
+							border-bottom-right-radius: 0;
+						}
+					}
+
+					div.DTED_Lightbox_Close {
+						top: 11px;
+						right: 15px;
+
+						background-color: transparent;
+						border: none;
+						box-shadow: none;
+					}
+				}
+			}
+		}
+	}
+}
+
+@media only screen 
+and (max-width: 780px) {
+	body div.DTED_Lightbox_Wrapper {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 90%;
+		margin-left: 5%;
+	}
+}
+
+@media only screen
+and (max-width: 580px) {
+	body div.DTED_Lightbox_Wrapper {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		margin-left: 0;
+	}
+}
+
+
+
+

httpdocs/themes/vuexy/css/datatables-editor/scss/main.scss

@@ -0,0 +1,180 @@
+
+
+// The main form.
+// Most of the styles for display of the main form come from the display
+// controller (lightbox and envelope are the two built in options).
+div.DTE_Body {
+	padding: 52px 0; // space for hte header and footer which are position: absolute
+	
+	div.DTE_Body_Content {
+		position: relative;
+		overflow: auto;
+
+		div.DTE_Form_Info {
+			padding: 1em 1em 0 1em;
+			margin: 0;
+		}
+
+		div.DTE_Field {
+			position: relative;
+			
+			clear: both;
+			padding: 5px 10%;
+			border: 1px solid transparent;
+
+			&:after {
+				display: block;
+				content: ".";
+				height: 0;
+				line-height: 0;
+				clear: both;
+				visibility: hidden;
+			}
+
+			&:hover {
+				background-color: #f9f9f9;
+				border: 1px solid #f3f3f3;
+			}
+
+			>label {
+				float: left;
+				width: 33%;
+				padding-top: 3px;
+			}
+
+			>div.DTE_Field_Input {
+				float: right;
+				width: 66%;
+			}
+
+			// Field in error state
+			&.DTE_Field_StateError { }
+
+			&.full {
+				padding: 5px 0 5px 10%;
+			}
+
+			&.block {
+				>div.DTE_Field_Input {
+					float: none;
+					clear: both;
+					width: 100%;
+				}
+			}
+		}
+	}
+}
+
+html[dir="rtl"] {
+	div.DTE_Body div.DTE_Body_Content div.DTE_Field {
+		> label {
+			float: right;
+		}
+
+		>div.DTE_Field_Input {
+			float: left;
+		}
+	}
+	
+	div.DTE div.DTE_Form_Buttons button {
+		float: left;
+	}
+}
+
+// iPad in portrait 
+@media only screen 
+and (max-width : 768px) {
+	div.DTE_Body {
+		div.DTE_Body_Content {
+			div.DTE_Field {
+				padding: 5px 10%;
+
+				&.full {
+					padding: 5px 0 5px 10%;
+
+					>label {
+						width: 35.5%;
+					}
+
+					>div.DTE_Field_Input {
+						width: 64.5%;
+					}
+				}
+
+				&.block {
+					>div.DTE_Field_Input {
+						width: 100%;
+					}
+				}
+			}
+		}
+	}
+}
+
+@media only screen 
+and (max-width : 640px) {
+	div.DTE_Body {
+		div.DTE_Body_Content {
+			div.DTE_Field {
+				padding: 5px 0;
+
+				&.full {
+					padding: 5px 0%;
+
+					>label {
+						width: 40%;
+					}
+
+					>div.DTE_Field_Input {
+						width: 60%;
+					}
+				}
+
+				&.block {
+					>div.DTE_Field_Input {
+						width: 100%;
+					}
+				}
+			}
+		}
+	}
+}
+
+// For devices with smaller screens, the fields should be shown stacked
+@media only screen 
+and (max-width : 580px) {
+	div.DTE_Body {
+		div.DTE_Body_Content {
+			div.DTE_Field {
+				position: relative;
+				
+				clear: both;
+				padding: 5px 0;
+
+				>label {
+					float: none;
+					width: auto;
+					padding-top: 0;
+				}
+
+				>div.DTE_Field_Input {
+					float: none;
+					width: auto;
+					margin-top: 4px;
+					margin-bottom: 6px;
+				}
+
+				&.full,
+				&.block {
+					padding: 5px 0;
+
+					>label,
+					>div.DTE_Field_Input {
+						width: 100%;
+					}
+				}
+			}
+		}
+	}
+}
+

httpdocs/themes/vuexy/css/datatables-editor/scss/mixins.scss

@@ -0,0 +1,178 @@
+
+
+@function tint( $color, $percent ) {
+	@return mix(white, $color, $percent);
+}
+
+@function shade( $color, $percent ) {
+	@return mix(black, $color, $percent);
+}
+
+
+@mixin border-radius ( $radius ) {
+	-webkit-border-radius: $radius;
+	   -moz-border-radius: $radius;
+	    -ms-border-radius: $radius;
+	     -o-border-radius: $radius;
+	        border-radius: $radius;
+}
+
+@mixin box-sizing($box-model) {
+  -webkit-box-sizing: $box-model; // Safari <= 5
+     -moz-box-sizing: $box-model; // Firefox <= 19
+          box-sizing: $box-model;
+}
+
+@mixin box-shadow($top, $left, $blur, $color, $inset: false) {
+  @if $inset {
+    -webkit-box-shadow:inset $top $left $blur $color;
+    -moz-box-shadow:inset $top $left $blur $color;
+    box-shadow:inset $top $left $blur $color;
+  } @else {
+    -webkit-box-shadow: $top $left $blur $color;
+    -moz-box-shadow: $top $left $blur $color;
+    box-shadow: $top $left $blur $color;
+  }
+}
+
+@mixin two-stop-gradient($fromColor, $toColor) {
+	background-color: $toColor; /* Fallback */
+	background-image: -webkit-linear-gradient(top, $fromColor 0%, $toColor 100%); /* Chrome 10+, Saf5.1+, iOS 5+ */
+	background-image:    -moz-linear-gradient(top, $fromColor 0%, $toColor 100%); /* FF3.6 */
+	background-image:     -ms-linear-gradient(top, $fromColor 0%, $toColor 100%); /* IE10 */
+	background-image:      -o-linear-gradient(top, $fromColor 0%, $toColor 100%); /* Opera 11.10+ */
+	background-image:         linear-gradient(to bottom, $fromColor 0%, $toColor 100%);
+	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#{nth( $fromColor, 1 )}', EndColorStr='#{nth( $toColor, 1 )}');
+}
+
+@mixin three-stop-gradient($fromColor, $middleColor, $toColor) {
+	background-color: $toColor; /* Fallback */
+	background-image: -webkit-linear-gradient(top, $fromColor, $middleColor, $toColor); /* Chrome 10+, Saf5.1+, iOS 5+ */
+	background-image:    -moz-linear-gradient(top, $fromColor, $middleColor, $toColor); /* FF3.6 */
+	background-image:     -ms-linear-gradient(top, $fromColor, $middleColor, $toColor); /* IE10 */
+	background-image:      -o-linear-gradient(top, $fromColor, $middleColor, $toColor); /* Opera 11.10+ */
+	background-image:         linear-gradient(to bottom, $fromColor, $middleColor, $toColor);
+	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#{nth( $fromColor, 1 )}', EndColorStr='#{nth( $toColor, 1 )}');
+}
+
+@mixin radial-gradient ($fromColor, $toColor ) {
+	background: $toColor; /* Fallback */
+	background:     -ms-radial-gradient(center, ellipse farthest-corner, $fromColor 0%, $toColor 100%); /* IE10 Consumer Preview */ 
+	background:    -moz-radial-gradient(center, ellipse farthest-corner, $fromColor 0%, $toColor 100%); /* Firefox */ 
+	background:      -o-radial-gradient(center, ellipse farthest-corner, $fromColor 0%, $toColor 100%); /* Opera */ 
+	background: -webkit-gradient(radial, center center, 0, center center, 497, color-stop(0, $fromColor), color-stop(1, $toColor)); /* Webkit (Safari/Chrome 10) */ 
+	background: -webkit-radial-gradient(center, ellipse farthest-corner, $fromColor 0%, $toColor 100%); /* Webkit (Chrome 11+) */ 
+	background: radial-gradient(ellipse farthest-corner at center, $fromColor 0%, $toColor 100%); /* W3C Markup, IE10 Release Preview */ 
+}
+
+@mixin keyframe ($animation_name) {
+    @-webkit-keyframes #{$animation_name} {
+        @content;
+    }
+ 
+    @-moz-keyframes #{$animation_name} {
+        @content;
+    }
+ 
+    @-o-keyframes #{$animation_name} {
+        @content;
+    }
+ 
+    @keyframes #{$animation_name} {
+        @content;
+    }
+}
+
+@mixin animation ($duration, $animation) {
+	-webkit-animation-duration: $duration;
+	-webkit-animation-name: $animation;
+	-webkit-animation-fill-mode: forwards;
+	-webkit-animation-iteration-count: infinite;
+	-webkit-animation-timing-function: linear;
+	-webkit-animation-direction: alternate;
+
+	-moz-animation-duration: $duration;
+	-moz-animation-name: $animation;
+	-moz-animation-fill-mode: forwards;
+	-moz-animation-iteration-count: infinite;
+	-moz-animation-timing-function: linear;
+	-moz-animation-direction: alternate;
+	
+	-o-animation-duration: $duration;
+	-o-animation-name: $animation;
+	-o-animation-fill-mode: forwards;
+	-o-animation-iteration-count: infinite;
+	-o-animation-timing-function: linear;
+	-o-animation-direction: alternate;
+	
+	animation-duration: $duration;
+	animation-name: $animation;
+	animation-fill-mode: forwards;
+	animation-iteration-count: infinite;
+	animation-timing-function: linear;
+	animation-direction: alternate;
+}
+
+@mixin close-icon () {
+	position: absolute;
+	top: 19px;
+	right: 19px;
+	cursor: pointer;
+	z-index: 12;
+
+	&:after {
+		content: '\00d7';
+		color: rgba(0, 0, 0, 0.5);
+		font-weight: bold;
+		font-size: 22px;
+		font-family: 'Courier New', Courier, monospace;
+	}
+
+	&:hover {
+		&:after {
+			color: black;
+		}
+	}
+}
+
+@mixin overlay-background () {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+
+	@include radial-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7) );
+
+	z-index: 10;
+
+	// IE8- doesn't support RGBA and jQuery uses `filter:` for the fade-in
+	// animation, so we need a child element that is used just for the display
+	>div {
+		position: absolute;
+		top: 0;
+		right: 0;
+		left: 0;
+		bottom: 0;
+
+		// IE7-
+		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
+		
+		// IE8
+		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
+	}
+
+	// IE9 has both filter and rgba support, so we need a hack to disable the filter
+	>div:not([dummy]) {
+		filter: progid:DXImageTransform.Microsoft.gradient(enabled='false');
+	}
+}
+
+@mixin background-transision () {
+	-webkit-transition: background-color 500ms linear;
+	   -moz-transition: background-color 500ms linear;
+	    -ms-transition: background-color 500ms linear;
+	     -o-transition: background-color 500ms linear;
+	transition: background-color 500ms linear;
+}
+

httpdocs/themes/vuexy/css/datatables-editor/scss/processing.scss

@@ -0,0 +1,106 @@
+
+div.DTE {
+	div.DTE_Processing_Indicator {
+		position: absolute;
+		top: 17px;
+		right: 42px;
+		height: 2em;
+		width: 2em;
+		z-index: 20;
+		font-size: 12px;
+		display: none;
+
+		-webkit-transform: translateZ(0);
+		-ms-transform: translateZ(0);
+		transform: translateZ(0);
+	}
+
+	&.processing {
+		div.DTE_Processing_Indicator {
+			display: block;
+		}
+
+		div.DTE_Field div.DTE_Processing_Indicator {
+			display: none;
+		}
+	}
+
+	div.DTE_Field div.DTE_Processing_Indicator {
+		top: 13px;
+		right: 0;
+		font-size: 8px;
+	}
+
+	&.DTE_Inline {
+		div.DTE_Processing_Indicator {
+			top: 5px;
+			right: 6px;
+			font-size: 6px;
+		}
+	}
+
+	&.DTE_Bubble {
+		div.DTE_Processing_Indicator {
+			top: 10px;
+			right: 14px;
+			font-size: 8px;
+		}
+	}
+
+	div.DTE_Processing_Indicator span,
+	div.DTE_Processing_Indicator:before,
+	div.DTE_Processing_Indicator:after {
+		display: block;
+		background: black;
+		width: 0.5em;
+		height: 1.5em;
+		border: 1px solid rgba( 0, 0, 0, 0.4 );
+		background-color: rgba( 0, 0, 0, 0.1 );
+
+		-webkit-animation: editorProcessing 0.9s infinite ease-in-out;
+		animation: editorProcessing 0.9s infinite ease-in-out;
+	}
+	
+	div.DTE_Processing_Indicator:before,
+	div.DTE_Processing_Indicator:after {
+		position: absolute;
+		top: 0;
+		content: '';
+	}
+	
+	div.DTE_Processing_Indicator:before {
+		left: -1em;
+		-webkit-animation-delay: -0.3s;
+		animation-delay: -0.3s;
+	}
+
+	div.DTE_Processing_Indicator span {
+		-webkit-animation-delay: -0.15s;
+		animation-delay: -0.15s;
+	}
+	
+	div.DTE_Processing_Indicator:after {
+		left: 1em;
+	}
+
+	@-webkit-keyframes editorProcessing {
+		0%,
+		80%,
+		100% {
+			transform: scale(1, 1);
+		}
+		40% {
+			transform: scale(1, 1.5);
+		}
+	}
+	@keyframes editorProcessing {
+		0%,
+		80%,
+		100% {
+			transform: scale(1, 1);
+		}
+		40% {
+		 transform: scale(1, 1.5);
+		}
+	}
+}

httpdocs/themes/vuexy/css/datatables-editor/scss/upload.scss

@@ -0,0 +1,143 @@
+
+div.DTE div.editor_upload {
+	padding-top: 4px;
+
+	div.eu_table {
+		display: table;
+		width: 100%;
+	}
+
+	div.row {
+		display: table-row;
+	}
+
+	div.cell {
+		display: table-cell;
+		position: relative;
+		width: 50%;
+		vertical-align: top;
+	}
+
+	div.cell + div.cell {
+		padding-left: 10px;
+	}
+
+	div.row + div.row {
+		div.cell {
+			padding-top: 10px;
+		}
+	}
+
+	button.btn,
+	input[type=file] {
+		width: 100%;
+		height: 2.3em;
+		font-size: 0.8em;
+		text-align: center;
+		line-height: 1em;
+		margin: 0;
+	}
+
+	input[type=file] {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		opacity: 0;
+	}
+
+	div.drop {
+		position: relative;
+		box-sizing: border-box;
+		width: 100%;
+		height: 100%;
+		border: 3px dashed #ccc;
+		border-radius: 6px;
+		min-height: 4em;
+		color: #999;
+		text-align: center;
+		padding: 1em 2em;
+	    line-height: 1.1em;
+
+		&.over {
+			border: 3px dashed #111;
+			color: #111;
+		}
+
+		span {
+			max-width: 75%;
+			font-size: 0.85em;
+			line-height: 1em;
+		}
+	}
+
+	div.rendered {
+		img {
+			max-width: 8em;
+			margin: 0 auto;
+		}
+	}
+
+	&.noDrop {
+		div.drop {
+			display: none;
+		}
+
+		div.row.second {
+			display: none;
+		}
+
+		div.rendered {
+			margin-top: 10px;
+		}
+	}
+
+	&.noClear {
+		div.clearValue button {
+			display: none;
+		}
+	}
+
+	&.multi {
+		div.cell {
+			display: block;
+			width: 100%;
+
+			div.drop {
+				min-height: 0;
+			}
+		}
+
+		div.clearValue {
+			display: none;
+		}
+
+		ul {
+			list-style-type: none;
+			margin: 0;
+			padding: 0;
+
+			li {
+				position: relative;
+				margin-top: 0.5em;
+
+				&:first-child {
+					margin-top: 0;
+				}
+
+				img {
+					vertical-align: middle;
+				}
+
+				button {
+					position: absolute;
+					width: 40px;
+					right: 0;
+					top: 50%;
+					margin-top: -1.5em;
+				}
+			}
+		}
+	}
+}
+