falcon-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From peeyu...@apache.org
Subject [15/16] falcon git commit: FALCON-2118 Proposal for new UI changes
Date Mon, 22 Aug 2016 04:48:08 GMT
http://git-wip-us.apache.org/repos/asf/falcon/blob/76dc2e18/falcon-ui/app/css/jquery-ui.css
----------------------------------------------------------------------
diff --git a/falcon-ui/app/css/jquery-ui.css b/falcon-ui/app/css/jquery-ui.css
new file mode 100644
index 0000000..826c967
--- /dev/null
+++ b/falcon-ui/app/css/jquery-ui.css
@@ -0,0 +1,1225 @@
+/*! jQuery UI - v1.11.4 - 2015-03-11
+* http://jqueryui.com
+* Includes: core.css, accordion.css, autocomplete.css, button.css, datepicker.css, dialog.css, draggable.css, menu.css, progressbar.css, resizable.css, selectable.css, selectmenu.css, slider.css, sortable.css, spinner.css, tabs.css, tooltip.css, theme.css
+* To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Verdana%2CArial%2Csans-serif&fwDefault=normal&fsDefault=1.1em&cornerRadius=4px&bgColorHeader=cccccc&bgTextureHeader=highlight_soft&bgImgOpacityHeader=75&borderColorHeader=aaaaaa&fcHeader=222222&iconColorHeader=222222&bgColorContent=ffffff&bgTextureContent=flat&bgImgOpacityContent=75&borderColorContent=aaaaaa&fcContent=222222&iconColorContent=222222&bgColorDefault=e6e6e6&bgTextureDefault=glass&bgImgOpacityDefault=75&borderColorDefault=d3d3d3&fcDefault=555555&iconColorDefault=888888&bgColorHover=dadada&bgTextureHover=glass&bgImgOpacityHover=75&borderColorHover=999999&fcHover=212121&iconColorHover=454545&bgColorActive=ffffff&bgTextureActive=glass&bgImgOpacityActive=65&borderColorActive=aaaaaa&fcActive=212121&iconColorActive=454545&bgColorHighlight=fbf9ee&bgTextureHighlight=glass&bgImgOpacityHighlight=55&borderColorHighlight=fcefa1&fcHighlight=363636&iconColorHighlight=2e83ff&bgColorError=fef1ec&bgTextureE
 rror=glass&bgImgOpacityError=95&borderColorError=cd0a0a&fcError=cd0a0a&iconColorError=cd0a0a&bgColorOverlay=aaaaaa&bgTextureOverlay=flat&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=aaaaaa&bgTextureShadow=flat&bgImgOpacityShadow=0&opacityShadow=30&thicknessShadow=8px&offsetTopShadow=-8px&offsetLeftShadow=-8px&cornerRadiusShadow=8px
+* Copyright 2015 jQuery Foundation and other contributors; Licensed MIT */
+
+/* Layout helpers
+----------------------------------*/
+.ui-helper-hidden {
+	display: none;
+}
+.ui-helper-hidden-accessible {
+	border: 0;
+	clip: rect(0 0 0 0);
+	height: 1px;
+	margin: -1px;
+	overflow: hidden;
+	padding: 0;
+	position: absolute;
+	width: 1px;
+}
+.ui-helper-reset {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	outline: 0;
+	line-height: 1.3;
+	text-decoration: none;
+	font-size: 100%;
+	list-style: none;
+}
+.ui-helper-clearfix:before,
+.ui-helper-clearfix:after {
+	content: "";
+	display: table;
+	border-collapse: collapse;
+}
+.ui-helper-clearfix:after {
+	clear: both;
+}
+.ui-helper-clearfix {
+	min-height: 0; /* support: IE7 */
+}
+.ui-helper-zfix {
+	width: 100%;
+	height: 100%;
+	top: 0;
+	left: 0;
+	position: absolute;
+	opacity: 0;
+	filter:Alpha(Opacity=0); /* support: IE8 */
+}
+
+.ui-front {
+	z-index: 100;
+}
+
+
+/* Interaction Cues
+----------------------------------*/
+.ui-state-disabled {
+	cursor: default !important;
+}
+
+
+/* Icons
+----------------------------------*/
+
+/* states and images */
+.ui-icon {
+	display: block;
+	text-indent: -99999px;
+	overflow: hidden;
+	background-repeat: no-repeat;
+}
+
+
+/* Misc visuals
+----------------------------------*/
+
+/* Overlays */
+.ui-widget-overlay {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+.ui-accordion .ui-accordion-header {
+	display: block;
+	cursor: pointer;
+	position: relative;
+	margin: 2px 0 0 0;
+	padding: .5em .5em .5em .7em;
+	min-height: 0; /* support: IE7 */
+	font-size: 100%;
+}
+.ui-accordion .ui-accordion-icons {
+	padding-left: 2.2em;
+}
+.ui-accordion .ui-accordion-icons .ui-accordion-icons {
+	padding-left: 2.2em;
+}
+.ui-accordion .ui-accordion-header .ui-accordion-header-icon {
+	position: absolute;
+	left: .5em;
+	top: 50%;
+	margin-top: -8px;
+}
+.ui-accordion .ui-accordion-content {
+	padding: 1em 2.2em;
+	border-top: 0;
+	overflow: auto;
+}
+.ui-autocomplete {
+	position: absolute;
+	top: 0;
+	left: 0;
+	cursor: default;
+}
+.ui-button {
+	display: inline-block;
+	position: relative;
+	padding: 0;
+	line-height: normal;
+	margin-right: .1em;
+	cursor: pointer;
+	vertical-align: middle;
+	text-align: center;
+	overflow: visible; /* removes extra width in IE */
+}
+.ui-button,
+.ui-button:link,
+.ui-button:visited,
+.ui-button:hover,
+.ui-button:active {
+	text-decoration: none;
+}
+/* to make room for the icon, a width needs to be set here */
+.ui-button-icon-only {
+	width: 2.2em;
+}
+/* button elements seem to need a little more width */
+button.ui-button-icon-only {
+	width: 2.4em;
+}
+.ui-button-icons-only {
+	width: 3.4em;
+}
+button.ui-button-icons-only {
+	width: 3.7em;
+}
+
+/* button text element */
+.ui-button .ui-button-text {
+	display: block;
+	line-height: normal;
+}
+.ui-button-text-only .ui-button-text {
+	padding: .4em 1em;
+}
+.ui-button-icon-only .ui-button-text,
+.ui-button-icons-only .ui-button-text {
+	padding: .4em;
+	text-indent: -9999999px;
+}
+.ui-button-text-icon-primary .ui-button-text,
+.ui-button-text-icons .ui-button-text {
+	padding: .4em 1em .4em 2.1em;
+}
+.ui-button-text-icon-secondary .ui-button-text,
+.ui-button-text-icons .ui-button-text {
+	padding: .4em 2.1em .4em 1em;
+}
+.ui-button-text-icons .ui-button-text {
+	padding-left: 2.1em;
+	padding-right: 2.1em;
+}
+/* no icon support for input elements, provide padding by default */
+input.ui-button {
+	padding: .4em 1em;
+}
+
+/* button icon element(s) */
+.ui-button-icon-only .ui-icon,
+.ui-button-text-icon-primary .ui-icon,
+.ui-button-text-icon-secondary .ui-icon,
+.ui-button-text-icons .ui-icon,
+.ui-button-icons-only .ui-icon {
+	position: absolute;
+	top: 50%;
+	margin-top: -8px;
+}
+.ui-button-icon-only .ui-icon {
+	left: 50%;
+	margin-left: -8px;
+}
+.ui-button-text-icon-primary .ui-button-icon-primary,
+.ui-button-text-icons .ui-button-icon-primary,
+.ui-button-icons-only .ui-button-icon-primary {
+	left: .5em;
+}
+.ui-button-text-icon-secondary .ui-button-icon-secondary,
+.ui-button-text-icons .ui-button-icon-secondary,
+.ui-button-icons-only .ui-button-icon-secondary {
+	right: .5em;
+}
+
+/* button sets */
+.ui-buttonset {
+	margin-right: 7px;
+}
+.ui-buttonset .ui-button {
+	margin-left: 0;
+	margin-right: -.3em;
+}
+
+/* workarounds */
+/* reset extra padding in Firefox, see h5bp.com/l */
+input.ui-button::-moz-focus-inner,
+button.ui-button::-moz-focus-inner {
+	border: 0;
+	padding: 0;
+}
+.ui-datepicker {
+	width: 17em;
+	padding: .2em .2em 0;
+	display: none;
+}
+.ui-datepicker .ui-datepicker-header {
+	position: relative;
+	padding: .2em 0;
+}
+.ui-datepicker .ui-datepicker-prev,
+.ui-datepicker .ui-datepicker-next {
+	position: absolute;
+	top: 2px;
+	width: 1.8em;
+	height: 1.8em;
+}
+.ui-datepicker .ui-datepicker-prev-hover,
+.ui-datepicker .ui-datepicker-next-hover {
+	top: 1px;
+}
+.ui-datepicker .ui-datepicker-prev {
+	left: 2px;
+}
+.ui-datepicker .ui-datepicker-next {
+	right: 2px;
+}
+.ui-datepicker .ui-datepicker-prev-hover {
+	left: 1px;
+}
+.ui-datepicker .ui-datepicker-next-hover {
+	right: 1px;
+}
+.ui-datepicker .ui-datepicker-prev span,
+.ui-datepicker .ui-datepicker-next span {
+	display: block;
+	position: absolute;
+	left: 50%;
+	margin-left: -8px;
+	top: 50%;
+	margin-top: -8px;
+}
+.ui-datepicker .ui-datepicker-title {
+	margin: 0 2.3em;
+	line-height: 1.8em;
+	text-align: center;
+}
+.ui-datepicker .ui-datepicker-title select {
+	font-size: 1em;
+	margin: 1px 0;
+}
+.ui-datepicker select.ui-datepicker-month,
+.ui-datepicker select.ui-datepicker-year {
+	width: 45%;
+}
+.ui-datepicker table {
+	width: 100%;
+	font-size: .9em;
+	border-collapse: collapse;
+	margin: 0 0 .4em;
+}
+.ui-datepicker th {
+	padding: .7em .3em;
+	text-align: center;
+	font-weight: bold;
+	border: 0;
+}
+.ui-datepicker td {
+	border: 0;
+	padding: 1px;
+}
+.ui-datepicker td span,
+.ui-datepicker td a {
+	display: block;
+	padding: .2em;
+	text-align: right;
+	text-decoration: none;
+}
+.ui-datepicker .ui-datepicker-buttonpane {
+	background-image: none;
+	margin: .7em 0 0 0;
+	padding: 0 .2em;
+	border-left: 0;
+	border-right: 0;
+	border-bottom: 0;
+}
+.ui-datepicker .ui-datepicker-buttonpane button {
+	float: right;
+	margin: .5em .2em .4em;
+	cursor: pointer;
+	padding: .2em .6em .3em .6em;
+	width: auto;
+	overflow: visible;
+}
+.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
+	float: left;
+}
+
+/* with multiple calendars */
+.ui-datepicker.ui-datepicker-multi {
+	width: auto;
+}
+.ui-datepicker-multi .ui-datepicker-group {
+	float: left;
+}
+.ui-datepicker-multi .ui-datepicker-group table {
+	width: 95%;
+	margin: 0 auto .4em;
+}
+.ui-datepicker-multi-2 .ui-datepicker-group {
+	width: 50%;
+}
+.ui-datepicker-multi-3 .ui-datepicker-group {
+	width: 33.3%;
+}
+.ui-datepicker-multi-4 .ui-datepicker-group {
+	width: 25%;
+}
+.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
+.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
+	border-left-width: 0;
+}
+.ui-datepicker-multi .ui-datepicker-buttonpane {
+	clear: left;
+}
+.ui-datepicker-row-break {
+	clear: both;
+	width: 100%;
+	font-size: 0;
+}
+
+/* RTL support */
+.ui-datepicker-rtl {
+	direction: rtl;
+}
+.ui-datepicker-rtl .ui-datepicker-prev {
+	right: 2px;
+	left: auto;
+}
+.ui-datepicker-rtl .ui-datepicker-next {
+	left: 2px;
+	right: auto;
+}
+.ui-datepicker-rtl .ui-datepicker-prev:hover {
+	right: 1px;
+	left: auto;
+}
+.ui-datepicker-rtl .ui-datepicker-next:hover {
+	left: 1px;
+	right: auto;
+}
+.ui-datepicker-rtl .ui-datepicker-buttonpane {
+	clear: right;
+}
+.ui-datepicker-rtl .ui-datepicker-buttonpane button {
+	float: left;
+}
+.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,
+.ui-datepicker-rtl .ui-datepicker-group {
+	float: right;
+}
+.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
+.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
+	border-right-width: 0;
+	border-left-width: 1px;
+}
+.ui-dialog {
+	overflow: hidden;
+	position: absolute;
+	top: 0;
+	left: 0;
+	padding: .2em;
+	outline: 0;
+}
+.ui-dialog .ui-dialog-titlebar {
+	padding: .4em 1em;
+	position: relative;
+}
+.ui-dialog .ui-dialog-title {
+	float: left;
+	margin: .1em 0;
+	white-space: nowrap;
+	width: 90%;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+.ui-dialog .ui-dialog-titlebar-close {
+	position: absolute;
+	right: .3em;
+	top: 50%;
+	width: 20px;
+	margin: -10px 0 0 0;
+	padding: 1px;
+	height: 20px;
+}
+.ui-dialog .ui-dialog-content {
+	position: relative;
+	border: 0;
+	padding: .5em 1em;
+	background: none;
+	overflow: auto;
+}
+.ui-dialog .ui-dialog-buttonpane {
+	text-align: left;
+	border-width: 1px 0 0 0;
+	background-image: none;
+	margin-top: .5em;
+	padding: .3em 1em .5em .4em;
+}
+.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
+	float: right;
+}
+.ui-dialog .ui-dialog-buttonpane button {
+	margin: .5em .4em .5em 0;
+	cursor: pointer;
+}
+.ui-dialog .ui-resizable-se {
+	width: 12px;
+	height: 12px;
+	right: -5px;
+	bottom: -5px;
+	background-position: 16px 16px;
+}
+.ui-draggable .ui-dialog-titlebar {
+	cursor: move;
+}
+.ui-draggable-handle {
+	-ms-touch-action: none;
+	touch-action: none;
+}
+.ui-menu {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+	display: block;
+	outline: none;
+}
+.ui-menu .ui-menu {
+	position: absolute;
+}
+.ui-menu .ui-menu-item {
+	position: relative;
+	margin: 0;
+	padding: 3px 1em 3px .4em;
+	cursor: pointer;
+	min-height: 0; /* support: IE7 */
+	/* support: IE10, see #8844 */
+	list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
+}
+.ui-menu .ui-menu-divider {
+	margin: 5px 0;
+	height: 0;
+	font-size: 0;
+	line-height: 0;
+	border-width: 1px 0 0 0;
+}
+.ui-menu .ui-state-focus,
+.ui-menu .ui-state-active {
+	margin: -1px;
+}
+
+/* icon support */
+.ui-menu-icons {
+	position: relative;
+}
+.ui-menu-icons .ui-menu-item {
+	padding-left: 2em;
+}
+
+/* left-aligned */
+.ui-menu .ui-icon {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: .2em;
+	margin: auto 0;
+}
+
+/* right-aligned */
+.ui-menu .ui-menu-icon {
+	left: auto;
+	right: 0;
+}
+.ui-progressbar {
+	height: 2em;
+	text-align: left;
+	overflow: hidden;
+}
+.ui-progressbar .ui-progressbar-value {
+	margin: -1px;
+	height: 100%;
+}
+.ui-progressbar .ui-progressbar-overlay {
+	background: url("data:image/gif;base64,R0lGODlhKAAoAIABAAAAAP///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJAQABACwAAAAAKAAoAAACkYwNqXrdC52DS06a7MFZI+4FHBCKoDeWKXqymPqGqxvJrXZbMx7Ttc+w9XgU2FB3lOyQRWET2IFGiU9m1frDVpxZZc6bfHwv4c1YXP6k1Vdy292Fb6UkuvFtXpvWSzA+HycXJHUXiGYIiMg2R6W459gnWGfHNdjIqDWVqemH2ekpObkpOlppWUqZiqr6edqqWQAAIfkECQEAAQAsAAAAACgAKAAAApSMgZnGfaqcg1E2uuzDmmHUBR8Qil95hiPKqWn3aqtLsS18y7G1SzNeowWBENtQd+T1JktP05nzPTdJZlR6vUxNWWjV+vUWhWNkWFwxl9VpZRedYcflIOLafaa28XdsH/ynlcc1uPVDZxQIR0K25+cICCmoqCe5mGhZOfeYSUh5yJcJyrkZWWpaR8doJ2o4NYq62lAAACH5BAkBAAEALAAAAAAoACgAAAKVDI4Yy22ZnINRNqosw0Bv7i1gyHUkFj7oSaWlu3ovC8GxNso5fluz3qLVhBVeT/Lz7ZTHyxL5dDalQWPVOsQWtRnuwXaFTj9jVVh8pma9JjZ4zYSj5ZOyma7uuolffh+IR5aW97cHuBUXKGKXlKjn+DiHWMcYJah4N0lYCMlJOXipGRr5qdgoSTrqWSq6WFl2ypoaUAAAIfkECQEAAQAsAAAAACgAKAAAApaEb6HLgd/iO7FNWtcFWe+ufODGjRfoiJ2akShbueb0wtI50zm02pbvwfWEMWBQ1zKGlLIhskiEPm9R6vRXxV4ZzWT2yHOGpWMyorblKlNp8HmHEb/lCXjcW7bmtXP8Xt229OVWR1fod2eWqNfHuMjXCPkIGNileOiImVmCOEmoSfn3yXlJWmoHGhqp6ilYuWYpmTqKUgAAIfkEC
 QEAAQAsAAAAACgAKAAAApiEH6kb58biQ3FNWtMFWW3eNVcojuFGfqnZqSebuS06w5V80/X02pKe8zFwP6EFWOT1lDFk8rGERh1TTNOocQ61Hm4Xm2VexUHpzjymViHrFbiELsefVrn6XKfnt2Q9G/+Xdie499XHd2g4h7ioOGhXGJboGAnXSBnoBwKYyfioubZJ2Hn0RuRZaflZOil56Zp6iioKSXpUAAAh+QQJAQABACwAAAAAKAAoAAACkoQRqRvnxuI7kU1a1UU5bd5tnSeOZXhmn5lWK3qNTWvRdQxP8qvaC+/yaYQzXO7BMvaUEmJRd3TsiMAgswmNYrSgZdYrTX6tSHGZO73ezuAw2uxuQ+BbeZfMxsexY35+/Qe4J1inV0g4x3WHuMhIl2jXOKT2Q+VU5fgoSUI52VfZyfkJGkha6jmY+aaYdirq+lQAACH5BAkBAAEALAAAAAAoACgAAAKWBIKpYe0L3YNKToqswUlvznigd4wiR4KhZrKt9Upqip61i9E3vMvxRdHlbEFiEXfk9YARYxOZZD6VQ2pUunBmtRXo1Lf8hMVVcNl8JafV38aM2/Fu5V16Bn63r6xt97j09+MXSFi4BniGFae3hzbH9+hYBzkpuUh5aZmHuanZOZgIuvbGiNeomCnaxxap2upaCZsq+1kAACH5BAkBAAEALAAAAAAoACgAAAKXjI8By5zf4kOxTVrXNVlv1X0d8IGZGKLnNpYtm8Lr9cqVeuOSvfOW79D9aDHizNhDJidFZhNydEahOaDH6nomtJjp1tutKoNWkvA6JqfRVLHU/QUfau9l2x7G54d1fl995xcIGAdXqMfBNadoYrhH+Mg2KBlpVpbluCiXmMnZ2Sh4GBqJ+ckIOqqJ6LmKSllZmsoq6wpQAAAh+QQJAQABACwAAAAAKAAoAAAClYx/oLvoxuJDkU1a1YUZbJ59nSd2ZXhWqbRa2/gF8Gu2DY3iqs7yrq+xBYEkYvFSM8
 aSSObE+ZgRl1BHFZNr7pRCavZ5BW2142hY3AN/zWtsmf12p9XxxFl2lpLn1rseztfXZjdIWIf2s5dItwjYKBgo9yg5pHgzJXTEeGlZuenpyPmpGQoKOWkYmSpaSnqKileI2FAAACH5BAkBAAEALAAAAAAoACgAAAKVjB+gu+jG4kORTVrVhRlsnn2dJ3ZleFaptFrb+CXmO9OozeL5VfP99HvAWhpiUdcwkpBH3825AwYdU8xTqlLGhtCosArKMpvfa1mMRae9VvWZfeB2XfPkeLmm18lUcBj+p5dnN8jXZ3YIGEhYuOUn45aoCDkp16hl5IjYJvjWKcnoGQpqyPlpOhr3aElaqrq56Bq7VAAAOw==");
+	height: 100%;
+	filter: alpha(opacity=25); /* support: IE8 */
+	opacity: 0.25;
+}
+.ui-progressbar-indeterminate .ui-progressbar-value {
+	background-image: none;
+}
+.ui-resizable {
+	position: relative;
+}
+.ui-resizable-handle {
+	position: absolute;
+	font-size: 0.1px;
+	display: block;
+	-ms-touch-action: none;
+	touch-action: none;
+}
+.ui-resizable-disabled .ui-resizable-handle,
+.ui-resizable-autohide .ui-resizable-handle {
+	display: none;
+}
+.ui-resizable-n {
+	cursor: n-resize;
+	height: 7px;
+	width: 100%;
+	top: -5px;
+	left: 0;
+}
+.ui-resizable-s {
+	cursor: s-resize;
+	height: 7px;
+	width: 100%;
+	bottom: -5px;
+	left: 0;
+}
+.ui-resizable-e {
+	cursor: e-resize;
+	width: 7px;
+	right: -5px;
+	top: 0;
+	height: 100%;
+}
+.ui-resizable-w {
+	cursor: w-resize;
+	width: 7px;
+	left: -5px;
+	top: 0;
+	height: 100%;
+}
+.ui-resizable-se {
+	cursor: se-resize;
+	width: 12px;
+	height: 12px;
+	right: 1px;
+	bottom: 1px;
+}
+.ui-resizable-sw {
+	cursor: sw-resize;
+	width: 9px;
+	height: 9px;
+	left: -5px;
+	bottom: -5px;
+}
+.ui-resizable-nw {
+	cursor: nw-resize;
+	width: 9px;
+	height: 9px;
+	left: -5px;
+	top: -5px;
+}
+.ui-resizable-ne {
+	cursor: ne-resize;
+	width: 9px;
+	height: 9px;
+	right: -5px;
+	top: -5px;
+}
+.ui-selectable {
+	-ms-touch-action: none;
+	touch-action: none;
+}
+.ui-selectable-helper {
+	position: absolute;
+	z-index: 100;
+	border: 1px dotted black;
+}
+.ui-selectmenu-menu {
+	padding: 0;
+	margin: 0;
+	position: absolute;
+	top: 0;
+	left: 0;
+	display: none;
+}
+.ui-selectmenu-menu .ui-menu {
+	overflow: auto;
+	/* Support: IE7 */
+	overflow-x: hidden;
+	padding-bottom: 1px;
+}
+.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup {
+	font-size: 1em;
+	font-weight: bold;
+	line-height: 1.5;
+	padding: 2px 0.4em;
+	margin: 0.5em 0 0 0;
+	height: auto;
+	border: 0;
+}
+.ui-selectmenu-open {
+	display: block;
+}
+.ui-selectmenu-button {
+	display: inline-block;
+	overflow: hidden;
+	position: relative;
+	text-decoration: none;
+	cursor: pointer;
+}
+.ui-selectmenu-button span.ui-icon {
+	right: 0.5em;
+	left: auto;
+	margin-top: -8px;
+	position: absolute;
+	top: 50%;
+}
+.ui-selectmenu-button span.ui-selectmenu-text {
+	text-align: left;
+	padding: 0.4em 2.1em 0.4em 1em;
+	display: block;
+	line-height: 1.4;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+.ui-slider {
+	position: relative;
+	text-align: left;
+}
+.ui-slider .ui-slider-handle {
+	position: absolute;
+	z-index: 2;
+	width: 1.2em;
+	height: 1.2em;
+	cursor: default;
+	-ms-touch-action: none;
+	touch-action: none;
+}
+.ui-slider .ui-slider-range {
+	position: absolute;
+	z-index: 1;
+	font-size: .7em;
+	display: block;
+	border: 0;
+	background-position: 0 0;
+}
+
+/* support: IE8 - See #6727 */
+.ui-slider.ui-state-disabled .ui-slider-handle,
+.ui-slider.ui-state-disabled .ui-slider-range {
+	filter: inherit;
+}
+
+.ui-slider-horizontal {
+	height: .8em;
+}
+.ui-slider-horizontal .ui-slider-handle {
+	top: -.3em;
+	margin-left: -.6em;
+}
+.ui-slider-horizontal .ui-slider-range {
+	top: 0;
+	height: 100%;
+}
+.ui-slider-horizontal .ui-slider-range-min {
+	left: 0;
+}
+.ui-slider-horizontal .ui-slider-range-max {
+	right: 0;
+}
+
+.ui-slider-vertical {
+	width: .8em;
+	height: 100px;
+}
+.ui-slider-vertical .ui-slider-handle {
+	left: -.3em;
+	margin-left: 0;
+	margin-bottom: -.6em;
+}
+.ui-slider-vertical .ui-slider-range {
+	left: 0;
+	width: 100%;
+}
+.ui-slider-vertical .ui-slider-range-min {
+	bottom: 0;
+}
+.ui-slider-vertical .ui-slider-range-max {
+	top: 0;
+}
+.ui-sortable-handle {
+	-ms-touch-action: none;
+	touch-action: none;
+}
+.ui-spinner {
+	position: relative;
+	display: inline-block;
+	overflow: hidden;
+	padding: 0;
+	vertical-align: middle;
+}
+.ui-spinner-input {
+	border: none;
+	background: none;
+	color: inherit;
+	padding: 0;
+	margin: .2em 0;
+	vertical-align: middle;
+	margin-left: .4em;
+	margin-right: 22px;
+}
+.ui-spinner-button {
+	width: 16px;
+	height: 50%;
+	font-size: .5em;
+	padding: 0;
+	margin: 0;
+	text-align: center;
+	position: absolute;
+	cursor: default;
+	display: block;
+	overflow: hidden;
+	right: 0;
+}
+/* more specificity required here to override default borders */
+.ui-spinner a.ui-spinner-button {
+	border-top: none;
+	border-bottom: none;
+	border-right: none;
+}
+/* vertically center icon */
+.ui-spinner .ui-icon {
+	position: absolute;
+	margin-top: -8px;
+	top: 50%;
+	left: 0;
+}
+.ui-spinner-up {
+	top: 0;
+}
+.ui-spinner-down {
+	bottom: 0;
+}
+
+/* TR overrides */
+.ui-spinner .ui-icon-triangle-1-s {
+	/* need to fix icons sprite */
+	background-position: -65px -16px;
+}
+.ui-tabs {
+	position: relative;/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
+	padding: .2em;
+}
+.ui-tabs .ui-tabs-nav {
+	margin: 0;
+	padding: .2em .2em 0;
+}
+.ui-tabs .ui-tabs-nav li {
+	list-style: none;
+	float: left;
+	position: relative;
+	top: 0;
+	margin: 1px .2em 0 0;
+	border-bottom-width: 0;
+	padding: 0;
+	white-space: nowrap;
+}
+.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
+	float: left;
+	padding: .5em 1em;
+	text-decoration: none;
+}
+.ui-tabs .ui-tabs-nav li.ui-tabs-active {
+	margin-bottom: -1px;
+	padding-bottom: 1px;
+}
+.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
+.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,
+.ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
+	cursor: text;
+}
+.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
+	cursor: pointer;
+}
+.ui-tabs .ui-tabs-panel {
+	display: block;
+	border-width: 0;
+	padding: 1em 1.4em;
+	background: none;
+}
+.ui-tooltip {
+	padding: 8px;
+	position: absolute;
+	z-index: 9999;
+	max-width: 300px;
+	-webkit-box-shadow: 0 0 5px #aaa;
+	box-shadow: 0 0 5px #aaa;
+}
+body .ui-tooltip {
+	border-width: 2px;
+}
+
+/* Component containers
+----------------------------------*/
+.ui-widget {
+	font-family: Verdana,Arial,sans-serif;
+	font-size: 1.1em;
+}
+.ui-widget .ui-widget {
+	font-size: 1em;
+}
+.ui-widget input,
+.ui-widget select,
+.ui-widget textarea,
+.ui-widget button {
+	font-family: Verdana,Arial,sans-serif;
+	font-size: 1em;
+}
+.ui-widget-content {
+	border: 1px solid #aaaaaa;
+	background: #ffffff url("img/ui-bg_flat_75_ffffff_40x100.png") 50% 50% repeat-x;
+	color: #222222;
+}
+.ui-widget-content a {
+	color: #222222;
+}
+.ui-widget-header {
+	border: 1px solid #aaaaaa;
+	background: #cccccc url("img/ui-bg_highlight-soft_75_cccccc_1x100.png") 50% 50% repeat-x;
+	color: #222222;
+	font-weight: bold;
+}
+.ui-widget-header a {
+	color: #222222;
+}
+
+/* Interaction states
+----------------------------------*/
+.ui-state-default,
+.ui-widget-content .ui-state-default,
+.ui-widget-header .ui-state-default {
+	border: 1px solid #d3d3d3;
+	background: #e6e6e6 url("img/ui-bg_glass_75_e6e6e6_1x400.png") 50% 50% repeat-x;
+	font-weight: normal;
+	color: #555555;
+}
+.ui-state-default a,
+.ui-state-default a:link,
+.ui-state-default a:visited {
+	color: #555555;
+	text-decoration: none;
+}
+.ui-state-hover,
+.ui-widget-content .ui-state-hover,
+.ui-widget-header .ui-state-hover,
+.ui-state-focus,
+.ui-widget-content .ui-state-focus,
+.ui-widget-header .ui-state-focus {
+	border: 1px solid #999999;
+	background: #dadada url("img/ui-bg_glass_75_dadada_1x400.png") 50% 50% repeat-x;
+	font-weight: normal;
+	color: #212121;
+}
+.ui-state-hover a,
+.ui-state-hover a:hover,
+.ui-state-hover a:link,
+.ui-state-hover a:visited,
+.ui-state-focus a,
+.ui-state-focus a:hover,
+.ui-state-focus a:link,
+.ui-state-focus a:visited {
+	color: #212121;
+	text-decoration: none;
+}
+.ui-state-active,
+.ui-widget-content .ui-state-active,
+.ui-widget-header .ui-state-active {
+	border: 1px solid #aaaaaa;
+	background: #ffffff url("img/ui-bg_glass_65_ffffff_1x400.png") 50% 50% repeat-x;
+	font-weight: normal;
+	color: #212121;
+}
+.ui-state-active a,
+.ui-state-active a:link,
+.ui-state-active a:visited {
+	color: #212121;
+	text-decoration: none;
+}
+
+/* Interaction Cues
+----------------------------------*/
+.ui-state-highlight,
+.ui-widget-content .ui-state-highlight,
+.ui-widget-header .ui-state-highlight {
+	border: 1px solid #fcefa1;
+	background: #fbf9ee url("img/ui-bg_glass_55_fbf9ee_1x400.png") 50% 50% repeat-x;
+	color: #363636;
+}
+.ui-state-highlight a,
+.ui-widget-content .ui-state-highlight a,
+.ui-widget-header .ui-state-highlight a {
+	color: #363636;
+}
+.ui-state-error,
+.ui-widget-content .ui-state-error,
+.ui-widget-header .ui-state-error {
+	border: 1px solid #cd0a0a;
+	background: #fef1ec url("img/ui-bg_glass_95_fef1ec_1x400.png") 50% 50% repeat-x;
+	color: #cd0a0a;
+}
+.ui-state-error a,
+.ui-widget-content .ui-state-error a,
+.ui-widget-header .ui-state-error a {
+	color: #cd0a0a;
+}
+.ui-state-error-text,
+.ui-widget-content .ui-state-error-text,
+.ui-widget-header .ui-state-error-text {
+	color: #cd0a0a;
+}
+.ui-priority-primary,
+.ui-widget-content .ui-priority-primary,
+.ui-widget-header .ui-priority-primary {
+	font-weight: bold;
+}
+.ui-priority-secondary,
+.ui-widget-content .ui-priority-secondary,
+.ui-widget-header .ui-priority-secondary {
+	opacity: .7;
+	filter:Alpha(Opacity=70); /* support: IE8 */
+	font-weight: normal;
+}
+.ui-state-disabled,
+.ui-widget-content .ui-state-disabled,
+.ui-widget-header .ui-state-disabled {
+	opacity: .35;
+	filter:Alpha(Opacity=35); /* support: IE8 */
+	background-image: none;
+}
+.ui-state-disabled .ui-icon {
+	filter:Alpha(Opacity=35); /* support: IE8 - See #6059 */
+}
+
+/* Icons
+----------------------------------*/
+
+/* states and images */
+.ui-icon {
+	width: 16px;
+	height: 16px;
+}
+.ui-icon,
+.ui-widget-content .ui-icon {
+	background-image: url("img/ui-icons_222222_256x240.png");
+}
+.ui-widget-header .ui-icon {
+	background-image: url("img/ui-icons_222222_256x240.png");
+}
+.ui-state-default .ui-icon {
+	background-image: url("img/ui-icons_888888_256x240.png");
+}
+.ui-state-hover .ui-icon,
+.ui-state-focus .ui-icon {
+	background-image: url("img/ui-icons_454545_256x240.png");
+}
+.ui-state-active .ui-icon {
+	background-image: url("img/ui-icons_454545_256x240.png");
+}
+.ui-state-highlight .ui-icon {
+	background-image: url("img/ui-icons_2e83ff_256x240.png");
+}
+.ui-state-error .ui-icon,
+.ui-state-error-text .ui-icon {
+	background-image: url("img/ui-icons_cd0a0a_256x240.png");
+}
+
+/* positioning */
+.ui-icon-blank { background-position: 16px 16px; }
+.ui-icon-carat-1-n { background-position: 0 0; }
+.ui-icon-carat-1-ne { background-position: -16px 0; }
+.ui-icon-carat-1-e { background-position: -32px 0; }
+.ui-icon-carat-1-se { background-position: -48px 0; }
+.ui-icon-carat-1-s { background-position: -64px 0; }
+.ui-icon-carat-1-sw { background-position: -80px 0; }
+.ui-icon-carat-1-w { background-position: -96px 0; }
+.ui-icon-carat-1-nw { background-position: -112px 0; }
+.ui-icon-carat-2-n-s { background-position: -128px 0; }
+.ui-icon-carat-2-e-w { background-position: -144px 0; }
+.ui-icon-triangle-1-n { background-position: 0 -16px; }
+.ui-icon-triangle-1-ne { background-position: -16px -16px; }
+.ui-icon-triangle-1-e { background-position: -32px -16px; }
+.ui-icon-triangle-1-se { background-position: -48px -16px; }
+.ui-icon-triangle-1-s { background-position: -64px -16px; }
+.ui-icon-triangle-1-sw { background-position: -80px -16px; }
+.ui-icon-triangle-1-w { background-position: -96px -16px; }
+.ui-icon-triangle-1-nw { background-position: -112px -16px; }
+.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
+.ui-icon-triangle-2-e-w { background-position: -144px -16px; }
+.ui-icon-arrow-1-n { background-position: 0 -32px; }
+.ui-icon-arrow-1-ne { background-position: -16px -32px; }
+.ui-icon-arrow-1-e { background-position: -32px -32px; }
+.ui-icon-arrow-1-se { background-position: -48px -32px; }
+.ui-icon-arrow-1-s { background-position: -64px -32px; }
+.ui-icon-arrow-1-sw { background-position: -80px -32px; }
+.ui-icon-arrow-1-w { background-position: -96px -32px; }
+.ui-icon-arrow-1-nw { background-position: -112px -32px; }
+.ui-icon-arrow-2-n-s { background-position: -128px -32px; }
+.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
+.ui-icon-arrow-2-e-w { background-position: -160px -32px; }
+.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
+.ui-icon-arrowstop-1-n { background-position: -192px -32px; }
+.ui-icon-arrowstop-1-e { background-position: -208px -32px; }
+.ui-icon-arrowstop-1-s { background-position: -224px -32px; }
+.ui-icon-arrowstop-1-w { background-position: -240px -32px; }
+.ui-icon-arrowthick-1-n { background-position: 0 -48px; }
+.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
+.ui-icon-arrowthick-1-e { background-position: -32px -48px; }
+.ui-icon-arrowthick-1-se { background-position: -48px -48px; }
+.ui-icon-arrowthick-1-s { background-position: -64px -48px; }
+.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
+.ui-icon-arrowthick-1-w { background-position: -96px -48px; }
+.ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
+.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
+.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
+.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
+.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }
+.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }
+.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }
+.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }
+.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }
+.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }
+.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }
+.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }
+.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }
+.ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
+.ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
+.ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
+.ui-icon-arrowreturn-1-s { background-position: -112px -64px; }
+.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
+.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }
+.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
+.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }
+.ui-icon-arrow-4 { background-position: 0 -80px; }
+.ui-icon-arrow-4-diag { background-position: -16px -80px; }
+.ui-icon-extlink { background-position: -32px -80px; }
+.ui-icon-newwin { background-position: -48px -80px; }
+.ui-icon-refresh { background-position: -64px -80px; }
+.ui-icon-shuffle { background-position: -80px -80px; }
+.ui-icon-transfer-e-w { background-position: -96px -80px; }
+.ui-icon-transferthick-e-w { background-position: -112px -80px; }
+.ui-icon-folder-collapsed { background-position: 0 -96px; }
+.ui-icon-folder-open { background-position: -16px -96px; }
+.ui-icon-document { background-position: -32px -96px; }
+.ui-icon-document-b { background-position: -48px -96px; }
+.ui-icon-note { background-position: -64px -96px; }
+.ui-icon-mail-closed { background-position: -80px -96px; }
+.ui-icon-mail-open { background-position: -96px -96px; }
+.ui-icon-suitcase { background-position: -112px -96px; }
+.ui-icon-comment { background-position: -128px -96px; }
+.ui-icon-person { background-position: -144px -96px; }
+.ui-icon-print { background-position: -160px -96px; }
+.ui-icon-trash { background-position: -176px -96px; }
+.ui-icon-locked { background-position: -192px -96px; }
+.ui-icon-unlocked { background-position: -208px -96px; }
+.ui-icon-bookmark { background-position: -224px -96px; }
+.ui-icon-tag { background-position: -240px -96px; }
+.ui-icon-home { background-position: 0 -112px; }
+.ui-icon-flag { background-position: -16px -112px; }
+.ui-icon-calendar { background-position: -32px -112px; }
+.ui-icon-cart { background-position: -48px -112px; }
+.ui-icon-pencil { background-position: -64px -112px; }
+.ui-icon-clock { background-position: -80px -112px; }
+.ui-icon-disk { background-position: -96px -112px; }
+.ui-icon-calculator { background-position: -112px -112px; }
+.ui-icon-zoomin { background-position: -128px -112px; }
+.ui-icon-zoomout { background-position: -144px -112px; }
+.ui-icon-search { background-position: -160px -112px; }
+.ui-icon-wrench { background-position: -176px -112px; }
+.ui-icon-gear { background-position: -192px -112px; }
+.ui-icon-heart { background-position: -208px -112px; }
+.ui-icon-star { background-position: -224px -112px; }
+.ui-icon-link { background-position: -240px -112px; }
+.ui-icon-cancel { background-position: 0 -128px; }
+.ui-icon-plus { background-position: -16px -128px; }
+.ui-icon-plusthick { background-position: -32px -128px; }
+.ui-icon-minus { background-position: -48px -128px; }
+.ui-icon-minusthick { background-position: -64px -128px; }
+.ui-icon-close { background-position: -80px -128px; }
+.ui-icon-closethick { background-position: -96px -128px; }
+.ui-icon-key { background-position: -112px -128px; }
+.ui-icon-lightbulb { background-position: -128px -128px; }
+.ui-icon-scissors { background-position: -144px -128px; }
+.ui-icon-clipboard { background-position: -160px -128px; }
+.ui-icon-copy { background-position: -176px -128px; }
+.ui-icon-contact { background-position: -192px -128px; }
+.ui-icon-image { background-position: -208px -128px; }
+.ui-icon-video { background-position: -224px -128px; }
+.ui-icon-script { background-position: -240px -128px; }
+.ui-icon-alert { background-position: 0 -144px; }
+.ui-icon-info { background-position: -16px -144px; }
+.ui-icon-notice { background-position: -32px -144px; }
+.ui-icon-help { background-position: -48px -144px; }
+.ui-icon-check { background-position: -64px -144px; }
+.ui-icon-bullet { background-position: -80px -144px; }
+.ui-icon-radio-on { background-position: -96px -144px; }
+.ui-icon-radio-off { background-position: -112px -144px; }
+.ui-icon-pin-w { background-position: -128px -144px; }
+.ui-icon-pin-s { background-position: -144px -144px; }
+.ui-icon-play { background-position: 0 -160px; }
+.ui-icon-pause { background-position: -16px -160px; }
+.ui-icon-seek-next { background-position: -32px -160px; }
+.ui-icon-seek-prev { background-position: -48px -160px; }
+.ui-icon-seek-end { background-position: -64px -160px; }
+.ui-icon-seek-start { background-position: -80px -160px; }
+/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
+.ui-icon-seek-first { background-position: -80px -160px; }
+.ui-icon-stop { background-position: -96px -160px; }
+.ui-icon-eject { background-position: -112px -160px; }
+.ui-icon-volume-off { background-position: -128px -160px; }
+.ui-icon-volume-on { background-position: -144px -160px; }
+.ui-icon-power { background-position: 0 -176px; }
+.ui-icon-signal-diag { background-position: -16px -176px; }
+.ui-icon-signal { background-position: -32px -176px; }
+.ui-icon-battery-0 { background-position: -48px -176px; }
+.ui-icon-battery-1 { background-position: -64px -176px; }
+.ui-icon-battery-2 { background-position: -80px -176px; }
+.ui-icon-battery-3 { background-position: -96px -176px; }
+.ui-icon-circle-plus { background-position: 0 -192px; }
+.ui-icon-circle-minus { background-position: -16px -192px; }
+.ui-icon-circle-close { background-position: -32px -192px; }
+.ui-icon-circle-triangle-e { background-position: -48px -192px; }
+.ui-icon-circle-triangle-s { background-position: -64px -192px; }
+.ui-icon-circle-triangle-w { background-position: -80px -192px; }
+.ui-icon-circle-triangle-n { background-position: -96px -192px; }
+.ui-icon-circle-arrow-e { background-position: -112px -192px; }
+.ui-icon-circle-arrow-s { background-position: -128px -192px; }
+.ui-icon-circle-arrow-w { background-position: -144px -192px; }
+.ui-icon-circle-arrow-n { background-position: -160px -192px; }
+.ui-icon-circle-zoomin { background-position: -176px -192px; }
+.ui-icon-circle-zoomout { background-position: -192px -192px; }
+.ui-icon-circle-check { background-position: -208px -192px; }
+.ui-icon-circlesmall-plus { background-position: 0 -208px; }
+.ui-icon-circlesmall-minus { background-position: -16px -208px; }
+.ui-icon-circlesmall-close { background-position: -32px -208px; }
+.ui-icon-squaresmall-plus { background-position: -48px -208px; }
+.ui-icon-squaresmall-minus { background-position: -64px -208px; }
+.ui-icon-squaresmall-close { background-position: -80px -208px; }
+.ui-icon-grip-dotted-vertical { background-position: 0 -224px; }
+.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }
+.ui-icon-grip-solid-vertical { background-position: -32px -224px; }
+.ui-icon-grip-solid-horizontal { background-position: -48px -224px; }
+.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
+.ui-icon-grip-diagonal-se { background-position: -80px -224px; }
+
+
+/* Misc visuals
+----------------------------------*/
+
+/* Corner radius */
+.ui-corner-all,
+.ui-corner-top,
+.ui-corner-left,
+.ui-corner-tl {
+	border-top-left-radius: 4px;
+}
+.ui-corner-all,
+.ui-corner-top,
+.ui-corner-right,
+.ui-corner-tr {
+	border-top-right-radius: 4px;
+}
+.ui-corner-all,
+.ui-corner-bottom,
+.ui-corner-left,
+.ui-corner-bl {
+	border-bottom-left-radius: 4px;
+}
+.ui-corner-all,
+.ui-corner-bottom,
+.ui-corner-right,
+.ui-corner-br {
+	border-bottom-right-radius: 4px;
+}
+
+/* Overlays */
+.ui-widget-overlay {
+	background: #aaaaaa url("img/ui-bg_flat_0_aaaaaa_40x100.png") 50% 50% repeat-x;
+	opacity: .3;
+	filter: Alpha(Opacity=30); /* support: IE8 */
+}
+.ui-widget-shadow {
+	margin: -8px 0 0 -8px;
+	padding: 8px;
+	background: #aaaaaa url("img/ui-bg_flat_0_aaaaaa_40x100.png") 50% 50% repeat-x;
+	opacity: .3;
+	filter: Alpha(Opacity=30); /* support: IE8 */
+	border-radius: 8px;
+}

http://git-wip-us.apache.org/repos/asf/falcon/blob/76dc2e18/falcon-ui/app/css/main.less
----------------------------------------------------------------------
diff --git a/falcon-ui/app/css/main.less b/falcon-ui/app/css/main.less
index 3bb7393..8ccfbad 100644
--- a/falcon-ui/app/css/main.less
+++ b/falcon-ui/app/css/main.less
@@ -73,6 +73,8 @@
 //custom styles for the page
 @import "styles/mixins.less";
 @import "styles/common.less";
+@import "styles/ng-tags-input.less";
+//@import "styles/ng-tags-input.bootstrap.less";
 @import "styles/nav-header.less";
 @import "styles/entity-summary.less";
 @import "styles/entities-list.less";
@@ -81,6 +83,10 @@
 @import "styles/server-messages.less";
 @import "styles/chart.less";
 @import "styles/dataset-form.less";
+@import "styles/snapshot-form.less";
+@import "styles/feed-form.less";
+@import "styles/datasource-form.less";
 @import "styles/popover.less";
 @import "styles/animate.less";
+@import "styles/lineage.less";
 @import "styles/autocomplete-tags.less";
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/falcon/blob/76dc2e18/falcon-ui/app/css/styles/autocomplete-tags.less
----------------------------------------------------------------------
diff --git a/falcon-ui/app/css/styles/autocomplete-tags.less b/falcon-ui/app/css/styles/autocomplete-tags.less
index 4c6fc96..c2f5dc2 100644
--- a/falcon-ui/app/css/styles/autocomplete-tags.less
+++ b/falcon-ui/app/css/styles/autocomplete-tags.less
@@ -1,21 +1,3 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
 .top-buffer{
   padding-top:20px;
 }
@@ -85,4 +67,4 @@
 }
 .suggestions-list:focus{
   outline:none;
-}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/falcon/blob/76dc2e18/falcon-ui/app/css/styles/common.less
----------------------------------------------------------------------
diff --git a/falcon-ui/app/css/styles/common.less b/falcon-ui/app/css/styles/common.less
index 1ce62f7..17552a8 100644
--- a/falcon-ui/app/css/styles/common.less
+++ b/falcon-ui/app/css/styles/common.less
@@ -20,7 +20,7 @@
   display: none !important;
 }
 html, body { height: 100%; }
-body { background-color: rgba(246, 246, 246, 1); }
+body { background-color: @body-bg; }
 
 .color-success{
   color: #3c763d !important;
@@ -34,9 +34,6 @@ body { background-color: rgba(246, 246, 246, 1); }
 .color-danger{
   color: #a94442 !important;
 }
-.error{
-  color: #ff3333 !important;
-}
 
 //--------------------VALIDATION---------------------//
 @shadow-valid: rgba(0, 255, 0, .6);
@@ -125,7 +122,7 @@ input {
     input[type="radio"] {
       border-width: 0;
       box-shadow: unset!important;
-      vertical-align: bottom;
+      vertical-align: middle;
     }
   }
   .validationMessageGral {
@@ -154,9 +151,7 @@ input {
 }
 //------nameCheck ------------------//
 .nameInputDisplay {
-  position: absolute;
-  top:27px;
-  right:10px;
+  /*position: absolute;*/
   z-index:2;
 }
 //----------------mozilla outline hack-------------------//
@@ -167,24 +162,24 @@ input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focu
 //-------------------------------------------------------//
 .mainUIView {
   //padding: 10px 0 30px 0;
-  padding-top: 10px;
+  /*padding-top: 10px;*/
   padding-bottom: 30px;
 }
 //-----------------------------------------//
 //----------------FILE UPLOAD---------------------//
 .btn-file {
   cursor: pointer;
-  position: relative;
-  overflow: hidden;
+  /*position: relative;
+  overflow: hidden;*/
   // margin: 40px 0 40px 30px;
 }
 .btn-file input[type=file] {
   position: absolute;
   top: 0;
-  right: 0;
-  min-width: 100%;
-  min-height: 100%;
-  font-size: 100px;
+  /*right: 0;*/
+  width: 32px;
+  height: 32px;
+  /*font-size: 100px;*/
   text-align: right;
   filter: alpha(opacity=0);
   opacity: 0;
@@ -220,7 +215,7 @@ input[type="password"]{
   padding: 0;
 }
 .dynamic-table-spacer {
-  margin-top: 5px;
+  margin-bottom: 5px;
 }
 .buttonsWrapper {
   text-align: center;
@@ -269,7 +264,7 @@ input[type="password"]{
   }
 }
 
-@keyframes blink-success {
+/*@keyframes blink-success {
   0% { color: @summarySuccess; }
   100% { color: black; }
 }
@@ -323,6 +318,22 @@ input[type="password"]{
   -webkit-animation: blink-notification 1s linear infinite;
   -moz-animation: blink-notification 1s linear infinite;
   animation: blink-notification 1s linear infinite;
+}*/
+
+.blink-success {
+  color: @green-light;
+}
+
+.blink-warning {
+  color: @summaryWarning;
+}
+
+.blink-danger {
+  color: @summaryWarning;
+}
+
+.blink-notification {
+  color: #ffff00;
 }
 
 .text-success {
@@ -342,16 +353,26 @@ input[type="password"]{
 .border-right{
   border-right: 2px solid @gray-lighter;
 }
-
+.pt15px {
+	padding-top:15px;
+}
+.border0px {
+	border: 0px;
+}
+.border1px {
+	border: 1px solid #666666;
+}
+.p10px {
+	padding : 10px;
+}
 .summaryBox {
-  border-radius: 5px;
-  border: 1px solid @gray-light2;
-  margin: 5px 0;
-  padding: 15px 5px;
+  border: 1px solid @detail-border-color;
+  padding: 15px 5px 8px;
   font-size: 12px;
-  background-color: #ffffff;
+  color: @detail-color;
+  background-color: transparent;
   h4 {
-    font-weight: bold;
+    /*font-weight: bold;*/
     margin:5px 0;
   }
   h5 {
@@ -370,7 +391,7 @@ input[type="password"]{
   textarea {
     width: 100%;
   }
-  &.processCluster {
+  /*&.processCluster {
     padding: 15px 4%;
     margin: 5px auto;
     h5 {
@@ -379,13 +400,19 @@ input[type="password"]{
         margin-top:0;
       }
     }
-  }
+  }*/
   .detailsBox{
     margin-left: 10px;
   }
+  .light {
+    font-weight: normal;
+  }
 }
 
 /*************************************** SEARCH **************************************/
+@searchIconTop:  8px;
+@searchFontSize:  13px;
+
 .search {
   height: 45px;
   font-weight: 400;
@@ -395,7 +422,8 @@ input[type="password"]{
 }
 
 .searchBoxContainer{
-  margin: 25px 0;
+  padding-top: 4px;
+  /*margin: 10px -5px;*/
   .popover{
     right: 5px !important;
     width: 400px;
@@ -408,55 +436,56 @@ input[type="password"]{
 .search-icon {
   cursor: pointer;
   position: absolute;
-  top: 13px;
-  left: 13px;
-  z-index: 2;
+  top: @searchIconTop;
+  right: 44px;
+  /*z-index: 2;*/
   display: block;
   line-height: 23px;
   text-align: center;
-  font-size: 26px;
-  color: #777;
+  font-size: @searchFontSize;
+  color: @search-icon-color;
 }
 
 .search-loading-icon {
   cursor: pointer;
   position: absolute;
-  top: 15px;
-  left: 15px;
+  background: transparent;
+  top: @searchIconTop;
+  right: 48px;
   z-index: 2;
   display: block;
   line-height: 23px;
   text-align: center;
-  font-size: 26px;
-  color: #777;
-  margin-right: 40px;
+  font-size: @searchFontSize;
+  color: @search-icon-color;
+  width: 23px;
 }
 
 .remove-icon {
   cursor: pointer;
   position: absolute;
-  top: 13px;
-  right: 14px;
+  top: @searchIconTop;
+  right: 64px;
 //  z-index: 2;
   display: block;
   line-height: 23px;
   text-align: center;
-  font-size: 26px;
-  color: #777;
+  font-size: @searchFontSize;
+  color: @search-icon-color;
 }
 
 .question-icon {
   cursor: pointer;
   position: absolute;
-  top: 13px;
-  right: 40px;
+  top: @searchIconTop;
+  right: 9px;
 //  z-index: 2;
   display: block;
   line-height: 23px;
   text-align: center;
-  font-size: 26px;
-  color: #777;
-  margin-right: 5px;
+  font-size: @searchFontSize;
+  color: @search-icon-color;
+  margin-right: 15px;
 }
 
 .searchBox {
@@ -491,150 +520,15 @@ input[type="password"]{
   }
 }
 
-tags-input {
-  display: block;
-  height: 40px;
-}
-tags-input *, tags-input *:before, tags-input *:after {
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-}
-tags-input .host {
-  position: relative;
-  margin-top: 5px;
-  margin-bottom: 5px;
-  height: 100%;
-}
-tags-input .host:active {
-  outline: none;
-}
-
-tags-input .tags {
-  -moz-appearance: textfield;
-  -webkit-appearance: textfield;
-  padding: 1px;
-  overflow: hidden;
-  word-wrap: break-word;
-  cursor: text;
-  background-color: white;
-//  border: 1px solid darkgray;
-//  box-shadow: 1px 1px 1px 0 lightgray inset;
-  height: 100%;
-  padding-left: 40px;
-}
-tags-input .tags.focused {
-  outline: none;
-  -webkit-box-shadow: 0 0 3px 1px rgba(5, 139, 242, 0.6);
-  -moz-box-shadow: 0 0 3px 1px rgba(5, 139, 242, 0.6);
-  box-shadow: 0 0 3px 1px rgba(5, 139, 242, 0.6);
-}
-tags-input .tags .tag-list {
-  margin: 0;
-  padding: 0;
-  list-style-type: none;
-}
-tags-input .tags .tag-item {
-  margin: 3px;
-  padding: 3px;
-  display: inline-block;
-  float: left;
-  font: 18px cabin, Arial, sans-serif;
-  height: 32px;
-  line-height: 25px;
-  border: 1px solid #acacac;
-  border-radius: 3px;
-  background: -webkit-linear-gradient(top, #ede4e4 0%, #d5cccc 47%, #bcb2b2 100%);
-  background: linear-gradient(to bottom, #ede4e4 0%, #d5cccc 47%, #bcb2b2 100%);
-}
-tags-input .tags .tag-item.selected {
-  background: -webkit-linear-gradient(top, #febbbb 0%, #fe9090 45%, #ff5c5c 100%);
-  background: linear-gradient(to bottom, #febbbb 0%, #fe9090 45%, #ff5c5c 100%);
-}
-tags-input .tags .tag-item .remove-button {
-  margin: 0 0 0 5px;
-  padding: 0;
-  border: none;
-  background: none;
-  cursor: pointer;
-  vertical-align: middle;
-  font: bold 18px cabin, Arial, sans-serif;
-  color: #585858;
-}
-tags-input .tags .tag-item .remove-button:active {
-  color: red;
-}
-tags-input .tags .input {
-  border: 0;
-  outline: none;
-  margin: 2px;
-  padding: 0;
-  padding-left: 5px;
-  float: left;
-  height: 32px;
-  font: 18px cabin, Arial, sans-serif;
-}
-tags-input .tags .input.invalid-tag {
-  color: red;
-}
-tags-input .tags .input::-ms-clear {
-  display: none;
-}
-tags-input.ng-invalid .tags {
-  -webkit-box-shadow: 0 0 3px 1px rgba(255, 0, 0, 0.6);
-  -moz-box-shadow: 0 0 3px 1px rgba(255, 0, 0, 0.6);
-  box-shadow: 0 0 3px 1px rgba(255, 0, 0, 0.6);
-}
-
-tags-input .autocomplete {
-  margin-top: 5px;
-  position: absolute;
-  padding: 5px 0;
-  z-index: 999;
-  width: 100%;
-  background-color: white;
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-}
-tags-input .autocomplete .suggestion-list {
-  margin: 0;
-  padding: 0;
-  list-style-type: none;
-}
-tags-input .autocomplete .suggestion-item {
-  padding: 5px 10px;
-  cursor: pointer;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font: 16px cabin, Arial, sans-serif;
-  color: black;
-  background-color: white;
-}
-tags-input .autocomplete .suggestion-item.selected {
-  color: white;
-  background-color: #0097cf;
-}
-tags-input .autocomplete .suggestion-item.selected em {
-  color: white;
-  background-color: #0097cf;
-}
-tags-input .autocomplete .suggestion-item em {
-  font: normal bold 16px cabin, Arial, sans-serif;
-  color: black;
-  background-color: white;
+.searchResultContainer {
+  background-color: @body-bg;
+  margin-top: 25px;
 }
 
 .tag-striked{
   text-decoration: line-through;
 }
 
-.pagination {
-  margin: 10px 0 5px 0;
-}
-
 .pagDisabled{
   cursor: default !important;
   background-color: #eee !important;
@@ -647,8 +541,10 @@ tags-input .autocomplete .suggestion-item em {
 .buttonsRow {
   height: 43px;
   td {
-    border-top: none;
-    border-bottom: 1px solid @gray-lighter;
+    /*border-top: none !important;*/
+    border-width: @table-header-border-width;
+    border-style: solid;
+    border-color: @table-header-border-color;
   }
   margin-bottom: 8px;
 }
@@ -670,9 +566,12 @@ tags-input .autocomplete .suggestion-item em {
 }
 
 .btn-gray {
-  color: #333;
-  background-color: #ccc;
-  border-color: #ccc;
+  color: #FFFFFF;
+  background-color: transparent;
+  border-color: transparent;
+  &:hover {
+    color: #FFFFFF;
+  }
 }
 
 .btn-big {
@@ -710,6 +609,10 @@ tags-input .autocomplete .suggestion-item em {
   padding: 0 10px;
 }
 
+.filtersSearchBox {
+  line-height: 2.3em;
+}
+
 .vertical-align {
   min-height: 5vh;
   display: -webkit-box;
@@ -727,18 +630,17 @@ tags-input .autocomplete .suggestion-item em {
 
 .dependencies-graph{
   text-align: center;
+  padding: 10px 0;
+  /*border: 1px solid @detail-border-color;*/
+  svg {
+    padding: 8px;
+  }
 }
 
 /**
   DEPENDENCIES & LINEAGE GRAPHS
 **/
 
-.node {
-  .foreignObject {
-    padding: 5px;
-  }
-}
-
 .node-name:before {
   font-family: 'Glyphicons Halflings';
   -webkit-font-smoothing: antialiased;
@@ -764,31 +666,34 @@ tags-input .autocomplete .suggestion-item em {
 }
 
 .node rect {
-  stroke-width: 0.5px;
-  stroke: #999;
-  fill: @gray-dark;
-  fill-opacity: 5%;
-  &:hover {
-    fill-opacity: 10%;
-  }
+  stroke-width: 1px;
+  stroke: @lineage-rect-stroke-color;
+  fill: @lineage-rect-fill-color;
+  fill-opacity: 20%;
 }
 
 .edge path {
   fill: none;
-  stroke: #333;
-  stroke-width: 1px;
+  stroke: @lineage-path-stroke-color;
+  stroke-width: 2px;
+}
+
+marker {
+  fill: @lineage-marker-fill-color;
 }
 
 .node-name {
-  font-size: 12px;
   vertical-align: middle;
   margin: 10px;
+  font-size: 15px;
+  padding-top: 18px;
+  color: @lineage-node-text-color;
 }
 
 .lineage-link {
   fill: none;
-  stroke: #eee;
-  stroke-width: 1.5px;
+  stroke: @lineage-path-stroke-color;
+  stroke-width: 2px;
 }
 
 .lineage-node, .lineage-href {
@@ -811,6 +716,7 @@ tags-input .autocomplete .suggestion-item em {
   font-size: 8pt;
   fill: #fff;
   word-wrap: break-word;
+  color: @lineage-node-text-color;
 }
 
 .lineage-node-feed-instance {
@@ -877,4 +783,81 @@ ul.lineage-legend li:before {
 
 .prettyXml{
   min-height: 800px;
-}
\ No newline at end of file
+}
+
+
+.auth
+{
+  color:#69be28;
+}
+
+.entities-tooltip-theme {
+  display: none;
+  position: absolute;
+  z-index: 100;
+  margin-top: -3px;
+}
+
+.entities-tooltip {
+  -webkit-box-shadow: 0 0.3125rem 0.625rem rgba(0,0,0,0.2);
+  -moz-box-shadow: 0 0.3125rem 0.625rem rgba(0,0,0,0.2);
+  box-shadow: 0 0.3125rem 0.625rem rgba(0,0,0,0.2);
+  border: solid 1px #d2d2d2;
+  border-radius: 3px;
+  box-sizing: border-box;
+  background-color: #fff;
+  padding: 5px 7px;
+  margin-left: -3px;
+  margin-top: 6px;
+  font-weight: normal;
+}
+
+.arrow-up {
+  content: "";
+  display: block;
+  width: 0;
+  height: 0;
+  border: solid 5px;
+  border-color: transparent;
+  position: absolute;
+  border-bottom-color: #d2d2d2;
+  top: -3px;
+  margin-left: 4px;
+}
+
+.arrow-up::after {
+  top: -9px;
+  margin-left: -10px;
+  content: " ";
+  position: absolute;
+  display: block;
+  width: 0;
+  height: 0;
+  border: solid 10px;
+  border-color: transparent;
+  border-bottom-color: #fff;
+}
+
+.accordion-toggle {
+  text-decoration: none !important;
+}
+
+.advancedOption {
+  cursor: pointer;
+  .glyphicon {
+    top : 3px;
+  }
+}
+
+.align-top {
+  vertical-align: top !important;
+}
+
+.no-entity {
+  position: absolute;
+  margin-top:25px;
+  left:15%;
+  padding: 10px;
+  overflow: auto;
+  border: 1px solid @green-light;
+}

http://git-wip-us.apache.org/repos/asf/falcon/blob/76dc2e18/falcon-ui/app/css/styles/dataset-form.less
----------------------------------------------------------------------
diff --git a/falcon-ui/app/css/styles/dataset-form.less b/falcon-ui/app/css/styles/dataset-form.less
index 1416dba..3774e1c 100644
--- a/falcon-ui/app/css/styles/dataset-form.less
+++ b/falcon-ui/app/css/styles/dataset-form.less
@@ -50,7 +50,7 @@ input[type="checkbox"]:focus,
 .tr { text-align: right; }
 
 .pointer{ cursor: pointer; }
-.db { display: block; }
+/*.db { display: block; }*/
 
 //-----------------------------------------//
 
@@ -59,28 +59,27 @@ input[type="checkbox"]:focus,
 
 #sourceClusterSelect, #targetClusterSelect {
   display: block;
-  margin-bottom: 8px;
 }
 #formBox {
   padding: 0 2%;
   .dateInput {
     padding-right:0!important;
   }
-  .formBoxWrapper {
+  /*.formBoxWrapper {
     width: 500px;
     margin:0 auto;
-  }
-  .locationBox {
+  }*/
+  /*.locationBox {
     label { margin:0 0 10px 0 };
-  }
+  }*/
 
-  label {
+  /*label {
     font-weight: normal;
     font-size: 11px;
     max-width: none;
 
-  }
-  input[type="text"], select {
+  }*/
+  /*input[type="text"], select {
     .p0;
     padding-left: 1px;
     font-size: 13px;
@@ -92,7 +91,7 @@ input[type="checkbox"]:focus,
     padding-left: 1px;
     font-size: 13px;
     line-height: 15px;
-  }
+  }*/
   .tablesTextArea {
     height: 50px;
   }
@@ -100,7 +99,7 @@ input[type="checkbox"]:focus,
     height: 97px;
   }
 
-  a {
+  /*a {
     line-height: 30px;
     cursor: pointer;
     margin: 5px 15px;
@@ -109,13 +108,13 @@ input[type="checkbox"]:focus,
     &:focus {
       color: red;
     }
-  }
+  }*/
   h4 {
     font-size: 14px;
     font-weight: 700;
   }
 
-  .formTitol {
+  /*.formTitol {
     width: 500px;
     margin:0 auto;
     padding-top: 10px;
@@ -131,12 +130,10 @@ input[type="checkbox"]:focus,
       margin:0;
       letter-spacing: 0.5px;
     }
-  }
+  }*/
   .tagsBox, .alertsBox {
     .btn {
-      border-radius: 5px;
       padding: 1px;
-      border-color: @gray;
       height: 25px;
       width: 65px;
       line-height: 23px;
@@ -149,7 +146,7 @@ input[type="checkbox"]:focus,
     }
   }
 
-  .typeButtonsBox {
+  /*.typeButtonsBox {
     background-color: @gray-lighter;
     width: 264px;
     padding:5px;
@@ -164,7 +161,7 @@ input[type="checkbox"]:focus,
         color: white;
       }
     }
-  }
+  }*/
 
   .formBoxWrapper {
     border: 1px solid @gray-lighter;
@@ -173,32 +170,36 @@ input[type="checkbox"]:focus,
   }
 
   .clusterBox {
-    border: 1px solid @gray-light;
-    border-radius: 5px;
-    .mt20;
-    .mb10;
-    padding-top: 15px;
-    padding-bottom: 15px;
+    border-top: 1px solid #aaa;
+    padding: 10px 0px 15px;
+    margin-left: 5px;
+    margin: 35px 10px 10px 0px;
+    border-radius: 0px;
 
     h3, .runJobOnBox {
       .pa;
-      background-color: white;
-      padding: 0 5px;
+      color: inherit;
+      background-color: #FFFFFF;
+      border: 1px solid #aaa;
+      border-radius: 0px;
+      padding: 6px 6px;
     }
 
     h3 {
-      font-size: 16px;
-      font-weight: 700;
       display: inline-block;
-      top: -30px;
-
+      border: none;
+      top: -47px;
+      font-size: 13px;
     }
     .runJobOnBox {
-      width: 110px;
+      width: 111px;
       right: 5px;
-      top: -13px;
+      top: -17px;
+      input[type=radio] {
+        margin-right: 5px;
+      }
     }
-    .hiveDatabasesTitol {
+    /*.hiveDatabasesTitol {
       font-size: 12px;
       padding-left: 5px;
     }
@@ -207,9 +208,9 @@ input[type="checkbox"]:focus,
       input {
         margin-left: 5px;
       }
-    }
+    }*/
   }
-  .alertsBox {
+  /*.alertsBox {
     .mt10;
     h4 {
       margin: 0;
@@ -245,21 +246,22 @@ input[type="checkbox"]:focus,
         margin-right: 4px;
       }
     }
-  }
+  }*/
 
 }
 .advancedOptionsButton {
-  cursor: pointer;
-  hr {
+  /*cursor: pointer;*/
+  /*hr {
     width: 67%;
     margin-top: -7px;
     margin-bottom:0;
     margin-left: 128px;
     border-top: 1px solid @gray-dark;
-  }
+  }*/
   span.entypo {
-    float: right;
-    margin: 7px 5px;
+    color: #FFFFFF;
+    /*float: right;
+    margin: 7px 5px;*/
     font-size: 50px;
   }
 }
@@ -270,6 +272,9 @@ input[type="checkbox"]:focus,
   &.expanded {
     max-height: 850px;
   }
+  h4 {
+    margin: 15px 0px;
+  }
   .frequencyBox {
     width: 36%;
     display: inline-block;
@@ -277,12 +282,6 @@ input[type="checkbox"]:focus,
     input, select {
       display: inline-block;
     }
-    input {
-      width: 20px;
-    }
-    select {
-      width: 80px;
-    }
     label {
       margin:0;
     }
@@ -290,12 +289,11 @@ input[type="checkbox"]:focus,
 
   .allocationBox {
     >div>div {
-      width: 24%;
       display: inline-block;
     }
-
   }
-  .retryBox {
+
+  /*.retryBox {
     .policyBox {
       width: 45%;
       select {
@@ -324,11 +322,37 @@ input[type="checkbox"]:focus,
         padding-right: 20px;
       }
     }
+  }*/
+
+
+  .retryBox {
+    .policyBox {
+      select {
+        position: inherit;
+      }
+    }
+    > div {
+      label {
+        margin-top: 0px;
+        font-weight: normal;
+        width: 95%;
+        input {
+          margin-right: 10px;
+        }
+        select {
+          position: relative;
+          left: 50px;
+        }
+      }
+      display: inline-block;
+      vertical-align: top;
+    }
   }
 
   .hiveOptBox {
     label {
       display: block;
+      margin-top: 10px;
     }
   }
 }
@@ -338,18 +362,18 @@ input[type="checkbox"]:focus,
 
 #formSummaryBox {
   font-size: 12px;
+  padding: 0 5px;
   h4 {
     margin-bottom:0;
-    font-size: 12px;
+  }
+  .locationBox {
+    margin-top: 5px !important;
   }
   h5 {
     font-size: 12px;
     font-weight: bold;
     display: inline-block;
   }
-  span {
-    font-weight: bold;
-  }
   .lightSubtitle {
     color: @gray-light;
     font-weight: bold;
@@ -363,13 +387,14 @@ input[type="checkbox"]:focus,
     margin-top: 15px;
 
     h3 {
-      font-size: 18px;
+      font-size: 14px;
       margin-top: -25px;
       margin-left: -10px;
       padding: 0 5px;
       background-color: white;
       display: inline-block;
       position: absolute;
+      color: #777;
     }
     h4 {
       margin-top:0;
@@ -394,6 +419,7 @@ input[type="checkbox"]:focus,
 
 //////////////////////////////
 
+/*
 #formBox {
   .progressBox {
     height: 75px;
@@ -491,4 +517,4 @@ input[type="checkbox"]:focus,
       h6 { font-weight: bold; }
     }
   }
-}
\ No newline at end of file
+}*/

http://git-wip-us.apache.org/repos/asf/falcon/blob/76dc2e18/falcon-ui/app/css/styles/datasource-form.less
----------------------------------------------------------------------
diff --git a/falcon-ui/app/css/styles/datasource-form.less b/falcon-ui/app/css/styles/datasource-form.less
new file mode 100644
index 0000000..9122855
--- /dev/null
+++ b/falcon-ui/app/css/styles/datasource-form.less
@@ -0,0 +1,90 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+//----------------mozilla outline hack-------------------//
+.datasourceConnectionBox {
+  border: 1px solid #d2d2d2;
+  border-radius: 5px;
+  padding: 15px 10px 41px;
+  color: @gray-light;
+  margin-top: 25px;
+
+  h3 {
+    font-size: 14px;
+    display: inline-block;
+    top: -7px;
+    position: absolute;
+    border-radius: 2px;
+    padding: 5px 9px;
+    background-color: #fff;
+  }
+
+  span {
+    padding-left: 10px;
+  }
+}
+
+#datasourceFormGeneralStep {
+  input[type="radio"], input[type="checkbox"] {
+    margin-left: 20px;
+  }
+}
+
+.datasourceForm {
+  .btn-browse {
+    padding: 0px 12px;
+    background: #f5f5f5;
+    color: #777;
+  }
+}
+.btn-sharp {
+  border-radius: 0;
+}
+
+.datasource-link {
+  margin: 0px !important;
+  color: @green-light !important;
+  font-style: italic;
+  line-height: 26px !important;
+}
+.driver-jar-link {
+    margin: 0px !important;
+    color: @green-light !important;
+    font-style: italic;
+    line-height: 26px !important;
+}
+
+.btn-datasource {
+  font-size: 12px;
+  line-height: 25px;
+  width: 100px;
+  padding: 0px;
+  border-radius: 4px;
+}
+
+.interface-endpoint {
+  margin: 0 10px;
+}
+
+.ml0 {
+  margin-left: 0 !important;
+}
+
+.mt5 {
+  margin-top: 5px !important;
+}
+//---------------SUMMARY------------------//

http://git-wip-us.apache.org/repos/asf/falcon/blob/76dc2e18/falcon-ui/app/css/styles/default.less
----------------------------------------------------------------------
diff --git a/falcon-ui/app/css/styles/default.less b/falcon-ui/app/css/styles/default.less
new file mode 100644
index 0000000..324ebaf
--- /dev/null
+++ b/falcon-ui/app/css/styles/default.less
@@ -0,0 +1,72 @@
+@body-bg: @white;
+@header1Border: @gray-light;
+@header2NavBG: @gray-lighter;
+@header3NavBG: @white;
+@header2Border:@gray-light;
+/** Menu */
+/*
+@header-menu-color: @green-light;
+*/
+
+/** Search */
+@search-box-border: @gray-light;
+@search-input-color: @gray-light;
+@search-icon-color: @gray-light;
+
+/** Search:Popover */
+@popover-text-color: @gray-light;
+@popover-header-color: @gray-light;
+
+/* Entity Detail Screen */
+@entity-detail-background-color: @white;
+
+/* Detail Screen */
+@detail-header-color: @gray-light;
+@detail-header-button-background-color: @gray-lighter;
+@detail-background-color: @white;
+@detail-border-color: @gray-light;
+@detail-color: @gray-light;
+
+/* Lineage Graph*/
+@lineage-path-stroke-color: @gray-light;
+@lineage-rect-fill-color: @gray-lighter;
+@lineage-rect-stroke-color: @gray-light;
+@lineage-node-text-color: @gray-light;
+@lineage-marker-fill-color: @gray-light;
+
+/* Controls */
+@input-background-color:@gray-light; /* light gray for table instance  */
+@input-color: @cool-gray;
+@form-input-background-color: @white;
+@details-box-dt-bg : @white;
+@form-box-clusterBox-runJobOnBox : @cool-gray;
+@form-table-color :@gray-light;
+@details-form-border :@gray-light;
+@form-nxt-btn: @gray-lightest;
+
+@progress-div-active-bg:@gray-light;
+@progress-div-active-color: @white;
+@progress-div-completed-bg :@cool-gray;
+@progress-div-completed-color: @gray-lightest;
+@progress-div-border : @cool-gray;
+@progress-div-color : @cool-gray;
+@progress-div-bottom-border: transparent;
+
+/** Table */
+@table-header-color: @gray-light;
+@table-header-background-color: @gray-lighter;
+@table-border-color: @gray-light;
+@table-header-border-color: @gray-light;
+@table-header-border-width: 0px 0px 1px;
+@table-header-button-color: @gray-dark;
+@table-header-button-hover-color: @gray-light;
+@table-cell-color:              #000;
+@table-cell-hover-color:        @gray-dark;
+@table-row-selected-background-color: @gray-lighter;
+@table-inactive-bg: @gray-lighter;
+
+/** Pagination */
+@pagination-active-bg:                 @white;
+@pagination-active-color:              @gray-light;
+@pagination-disabled-bg:               @gray-light;
+@pagination-disabled-color:            @white;

http://git-wip-us.apache.org/repos/asf/falcon/blob/76dc2e18/falcon-ui/app/css/styles/entities-list.less
----------------------------------------------------------------------
diff --git a/falcon-ui/app/css/styles/entities-list.less b/falcon-ui/app/css/styles/entities-list.less
index 6ea757f..e442c67 100644
--- a/falcon-ui/app/css/styles/entities-list.less
+++ b/falcon-ui/app/css/styles/entities-list.less
@@ -22,15 +22,30 @@
   }
 }
 
+@listTbodyBackground: transparent;
+
 .listTable {
   margin-top: 5px;
   border-collapse: separate;
-  border-radius: 4px;
-  //border: 1px solid @gray;
+  /*border-radius: 4px;*/
+  border: 1px solid @table-border-color;
   width: 100%;
   min-height: 140px;
   overflow: hidden;
   position: relative;
+  font-size: 12px;
+  .ptb5px {
+	padding: 5px 0;
+  }
+  input , select {
+	background-color: @input-background-color;
+	padding-left: 4px;
+	color: @input-color;
+    font-weight: normal;
+  }
+  .border0px {
+	border: 0px;
+  }
   .spinner {
     .transition (all, 1s, linear);
     display: none;
@@ -46,7 +61,7 @@
       display: block;
       position: absolute;
       z-index: 2;
-      .background-opacity(black, 0.8);
+      .background-opacity(@table-inactive-bg, 0.8);
       width: 100%;
       height: 100%;
       top: 0;
@@ -70,17 +85,22 @@
   thead {
     padding: 5px;
     text-align: left;
-    background-color: @gray-dark;
-    color: white;
-    tr > th { border-bottom: none; }
+    background-color: @table-header-background-color;
+    color: @table-header-color;
+    tr > th { border: none; }
   }
   tbody {
     padding: 5px;
     display: table-row-group;
-    background-color: white;
+    background-color: @listTbodyBackground;
+	tr > th { border: none; }
+  }
+  tbody:nth-child(2) {
+    border-bottom: 20px solid transparent;
   }
   tr {
     width: 100%;
+    height: 24px;
   }
   .filtersBox {
     font-weight: normal;
@@ -107,28 +127,47 @@
 
   .entityRow {
     &:hover, &.rowSelected {
-      background: #F2F2F2;
+      background: @table-row-selected-background-color;
+	  color: @table-cell-hover-color;
       td {
-        border-color: #E2E2E2;
+        color: @table-cell-hover-color;
       }
     }
 
     td {
-      padding: 3px 3px;
+      padding: 0;
       line-height: 22px;
-      border-top: 1px solid transparent;
-      border-bottom: 1px solid transparent;
+      border-top: 0;
+      border-bottom: 0;
       vertical-align: middle;
+      color: @table-cell-color;
     }
-    &.firstEntityRow {
-      td { padding-top: 6px; }
-    }
+
     &.lastEntityRow {
       td {
         padding-bottom: 6px;
       }
     }
   }
+  .paginationRow td {
+    background-color: @table-header-background-color;
+    .pagination {
+      border-radius: 0px;
+      li {
+        a {
+          background-color: @pagination-active-bg;
+          color: @pagination-active-color;
+          border: none;
+          border-radius: inherit;
+          &.pagDisabled {
+            background-color: @pagination-disabled-bg !important;
+            text-decoration: underline;
+            color: @pagination-disabled-color;
+          }
+        }
+      }
+    }
+  }
   label {
     font-weight: normal;
     font-size: 10px;
@@ -136,6 +175,9 @@
   .checkboxCell {
     width: 20px;
     text-align: center;
+	  input[type="radio"], input[type="checkbox"] {
+	    vertical-align: middle;
+	  }
   }
   .stateCell {
     width: 120px;
@@ -148,13 +190,27 @@
 
   .nameCell {
     cursor: pointer;
+	.entypo {
+	  font-size: 1.4em;
+	}
     &:hover {
       text-decoration: underline;
     }
+    button {
+      color: @green-light;
+	  padding: 0 6px;
+      border: none;
+      background-color: transparent;
+      font-size: 12px;
+    }
   }
 }
 .buttons-to-show {
   margin:2px 0;
+  color: @table-header-button-color;
+  &:hover {
+    color: @table-header-button-hover-color;
+  }
 }
 /* LOGIN */
 .login {
@@ -188,11 +244,14 @@
   }
 }
 
-.tag:hover {
-  cursor: pointer;
-  color: #fff;
-  background-color: #5fa33e;
-  font-weight: bold;
+.tag {
+  padding: 0px 3px;
+  &:hover {
+    cursor: pointer;
+    color: #fff;
+    background-color: #5fa33e;
+    /*font-weight: bold;*/
+  }
 }
 
 

http://git-wip-us.apache.org/repos/asf/falcon/blob/76dc2e18/falcon-ui/app/css/styles/feed-form.less
----------------------------------------------------------------------
diff --git a/falcon-ui/app/css/styles/feed-form.less b/falcon-ui/app/css/styles/feed-form.less
new file mode 100644
index 0000000..356d3e6
--- /dev/null
+++ b/falcon-ui/app/css/styles/feed-form.less
@@ -0,0 +1,40 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+#feedFormGeneralStep {
+  .clusterBox {
+      border-top: 1px solid #aaa;
+      padding: 0px 0px 15px;
+      margin-left: 5px;
+      margin: 35px 10px 10px 0px;
+      border-radius: 0px;
+
+      h3 {
+        color: inherit;
+        background-color: #FFFFFF;
+        border: none;
+        border-radius: 0px;
+        padding: 6px 6px;
+        top: -47px;
+        font-size: 13px;
+      }
+  }
+
+  .advancedOtptions {
+    margin-top: -30px;
+  }
+}

http://git-wip-us.apache.org/repos/asf/falcon/blob/76dc2e18/falcon-ui/app/css/styles/form-pages.less
----------------------------------------------------------------------
diff --git a/falcon-ui/app/css/styles/form-pages.less b/falcon-ui/app/css/styles/form-pages.less
index 957e148..4cbe178 100644
--- a/falcon-ui/app/css/styles/form-pages.less
+++ b/falcon-ui/app/css/styles/form-pages.less
@@ -20,46 +20,138 @@
 .mt1 {
   margin-top: 1px;
 }
+.mt3 {
+  margin-top: 3px;
+}
 .mt5 {
   margin-top: 5px;
 }
+.mt8 {
+  margin-top: 8px;
+}
 .mt10 {
   margin-top: 10px;
 }
+.mt15 {
+  margin-top: 15px !important;
+}
 .mt20 {
   margin-top: 20px;
 }
+.mt25 {
+  margin-top: 25px;
+}
+.mt30 {
+  margin-top: 30px;
+}
+.mt35 {
+  margin-top: 35px;
+}
+.mb0 {
+  margin-bottom: 0px !important;
+}
+.mb5 {
+  margin-bottom: 5px;
+}
+.mb7 {
+  margin-bottom: 7px;
+}
 .mb10 {
   margin-bottom: 10px;
 }
-.formViewContainer {
-  .mt10;
+.mr20 {
+  margin-right: 20px;
+}
+.ml20{
+  margin-left: 20px;
+}
+.pt15px{
+  padding-top:15px;
+}
+.pt35px{
+  padding-top:35px;
+}
+.pt5px{
+  padding-top:5px;
+}
+.pt3px{
+  padding-top:3px;
+}
+.pb5px{
+  padding-bottom:5px;
+}
+.pl0px{
+  padding-left: 8px;
+}
+.p0px{
+  padding: 0px;
+}
+.plr0px{
+  padding-left: 0px;
+  padding-right: 0px;
+}
 
+.pl5 {
+  padding-left: 5px;
 }
+
 //-----------------next and previous buttons----------//
-@nextBtnBackground: #666666;
+@nextBtnBackground: #69be28;
 @prevBtnBackground: #CCCCCC;
-.nextBtn, .prevBtn {
+.nextBtn, .prevBtn ,.cnclBtn {
+  .transition(background, 0.3s, ease);
+  border: 0px none;
+  width: 100px;
+  font-size: 12px;
+  line-height: 1.3em;
+}
+.advancedSaveBtn {
   .transition(background, 0.3s, ease);
   border: 0px none;
-  width: 90px;
-  border-radius: 7px!important;
-  padding: 10px;
+  font-size: 12px;
+  line-height: 1.3em;
+  width: 180px;
+}
+.datasourceBtn {
+  .transition(background, 0.3s, ease);
+  border: 0px none;
+  width: 120px;
+  font-size: 12px;
+  line-height: 1.3em;
+}
+a.cnclBtn {
+	height:24px;
+	background-color:#cccccc;
+	/*border-radius:7px;*/
+	margin:0px;
+	line-height: 1.3em;
+  &:hover {
+    background: darken(#cccccc, 10%);
+    color: #232323;
+    outline: hidden;
+    /*border-radius: 7px!important;*/
+  }
+  &:focus, &:active, &:visited {
+    background: darken(#cccccc, 10%);
+    color: #232323;
+    outline: hidden;
+	/*border-radius: 7px!important;*/
+  }
 }
 .nextBtn {
-  background: @nextBtnBackground;
-  color: white;
+  background: @form-nxt-btn;
+  color: @progress-div-active-color;
+  /*line-height: 1.3em;*/
   &:hover {
-    background: darken(@nextBtnBackground, 10%);
-    color: white;
+    background: darken(@form-nxt-btn, 10%);
+    color: @progress-div-active-color;
     outline: hidden;
-    border-radius: 7px!important;
+    /*border-radius: 7px!important;*/
   }
   &:focus, &:active, &:visited {
-    background: darken(@nextBtnBackground, 10%);
-    color: white;
+    background: darken(@form-nxt-btn, 10%);
+    color: @progress-div-active-color;
     outline: hidden;
-    border-radius: 10px!important;
   }
 }
 .prevBtn {
@@ -67,17 +159,46 @@
   &:hover {
     background: darken(@prevBtnBackground, 10%);
     outline: hidden;
-    border-radius: 7px!important;
+    /*border-radius: 7px!important;*/
   }
   &:focus, &:active, &:visited {
     background: darken(@prevBtnBackground, 10%);
     outline: hidden;
-    border-radius: 10px!important;
+    /*border-radius: 10px!important;*/
+  }
+}
+.advancedSaveBtn {
+  background: @form-nxt-btn;
+  color: @progress-div-active-color;
+  &:hover {
+    background: darken(@form-nxt-btn, 10%);
+    color: @progress-div-active-color;
+    outline: hidden;
+  }
+  &:focus, &:active, &:visited {
+    background: darken(@form-nxt-btn, 10%);
+    color: @progress-div-active-color;
+    outline: hidden;
+  }
+}
+.datasourceBtn {
+  background: @form-nxt-btn;
+  color: @progress-div-active-color;
+  /*line-height: 1.3em;*/
+  &:hover {
+    background: darken(@form-nxt-btn, 10%);
+    color: @progress-div-active-color;
+    outline: hidden;
+    /*border-radius: 7px!important;*/
+  }
+  &:focus, &:active, &:visited {
+    background: darken(@form-nxt-btn, 10%);
+    color: @progress-div-active-color;
+    outline: hidden;
   }
 }
 //-----------------------------------------------------//
 .aclBox {
-  .mt10;
 
   > div {
     label {
@@ -90,9 +211,23 @@
     vertical-align: top;
   }
 }
+.formBoxContainer {
+  .customContainer{
+	overflow:auto;
+	border:1px solid @details-form-border;
+	margin-left:0px;
+	margin-right:0px;
+  }
+}
 .dt {
   //display: table;
 }
+/*.xmlPreviewContainer {
+  position: absolute;
+  left: 530px;
+  top: 55px;
+  right: 0;
+}
 @media screen and (max-width: @grid-float-breakpoint) {
   .xmlPreviewContainer {
     position: relative;
@@ -100,18 +235,43 @@
     top:0;
     width: 500px;
   }
-}
+}*/
 .formPage {
 
   h3 {
     font-weight: bold;
   }
+  a.cnclBtn {
+	height:24px;
+	background-color:#cccccc;
+	/*border-radius:7px;*/
+	margin:0px;
+	text-decoration: none;
+	text-align: center;
+	line-height: 1.3em;
+	&:hover {
+		background: darken(#cccccc, 10%);
+		color: #232323;
+		outline: hidden;
+		/*border-radius: 7px!important;*/
+	  }
+	  &:focus, &:active, &:visited {
+		background: darken(#cccccc, 10%);
+		color: #232323;
+		outline: hidden;
+		/*border-radius: 7px!important;*/
+	  }
+	}
   .entypo {
     font-size: 22px;
+	color: #000;
    /* line-height: 14px;*/
     /*vertical-align: top;
     display: inline-table;*/
   }
+  .addTag {
+	background-color:#cccccc;
+  }
   h4 {
     font-size: 14px;
     font-weight: bold;
@@ -130,6 +290,9 @@
     line-height: 12px;
     margin: 10px 0 2px 0;
   }
+  .font11px {
+    font-size: 11px;
+  }
   .light {
     font-weight: normal;
   }
@@ -165,7 +328,7 @@ select {
     &:last-child { margin-right:0;}
   }
   input[type="text"] {
-    width: 20px;
+    width: 43px;
     //height: 18px;
     //line-height: 18px;
     vertical-align: top;
@@ -178,7 +341,6 @@ select {
     margin:0;
     vertical-align: middle;
   }
-  div { margin-bottom: 5px;}
   #availInput {
     width: 60px;
   }
@@ -196,16 +358,43 @@ select {
   }
 
 }
-.clusterSummaryRow {
+
+#clusterSummaryStep, #feedSummaryStep, #processSummaryStep, #formSummaryBox, #datasourceSummaryStep {
   padding: 0 10px;
+  h4 {
+    margin-top: 25px;
+    margin-bottom: 0px;
+  }
 }
-.clusterForm, .feedForm, .entityForm {
-  input {
+
+.clusterForm, .feedForm, .entityForm, .datasetForm, .snapshotForm, .datasourceForm {
+  input, input[disabled],textarea, textarea[disabled] {
     padding-left: 1px;
     border-width: 1px;
+    background-color:@form-input-background-color;
+    color:#333333;
+    &.form-control {
+      background-color:@form-input-background-color;
+    }
+    &[disabled] {
+      background-color:@input-bg-disabled;
+    }
+  }
+  input:active,input:focus,input:visited,
+  select:active,select:focus,select:visited,
+  textarea:active,textarea:focus,textarea:visited {
+    background-color:#ffffff;
+    color:#333333;
   }
   select {
-    background-color: white;
+    background-color: @form-input-background-color;
+    color:#333333;
+  }
+  select[disabled] {
+    background-color:@input-bg-disabled;
+  }
+  .p0px{
+	padding:0px;
   }
   > div {
     &:first-child {
@@ -226,16 +415,41 @@ select {
     margin-top: 10px;
   }
   label {
-    font-size: 12px;
     margin:0;
   }
   input[type="checkbox"] {
-    vertical-align: sub;
+    vertical-align: middle;
+  }
+}
+#clusterLocationBox {
+  label {
+    margin:0;
   }
 }
 //---------------------------------//
-.feedForm, .entityForm {
+.clusterForm, .feedForm, .entityForm, .datasetForm, .snapshotForm, .datasourceForm {
+  .pullOver {
+
+    button {
+      transform: rotate(90deg);
+      height:auto!important;
+      position: absolute;
+      right: -61px;
+      top: 57px;
+
+    }
+  }
+  .pullOverXml {
+
 
+    button {
+      transform: rotate(90deg);
+      height:auto!important;
+      position: absolute;
+      right: -88px;
+      top: 57px;
+    }
+  }
   .small {
     display: inline-block;
     width: 30px;
@@ -250,6 +464,30 @@ select {
   .freqTitle {
     margin: 0 0 5px 0;
   }
+  .title {
+	font-size: 14px;
+	color: @form-label-color;
+    .mb0;
+  }
+  .pb15px {
+	padding-bottom:15px;
+  }
+  .pb30px {
+	padding-bottom:30px;
+  }
+  .bb1pxw {
+	border-bottom: 1px solid #666666;
+  }
+  input,select,button,textarea {
+	height:24px;
+	border-color:#cccccc;
+  }
+  .labelCheckBox  {
+    height:17px;
+  }
+  input[type="radio"] {
+    height: auto
+  }
   .top-buffer {
     margin-top: 8px;
   }
@@ -361,9 +599,9 @@ select {
       margin-top: 0;
     }
   }
-  .TZSelect {
+  /*.TZSelect {
     margin: 5px 0;
-  }
+  }*/
   .addProperty {
     margin: 12px 5px;
     display: inline-block;
@@ -373,16 +611,21 @@ select {
 
 //----old entity details------------------//
 .detailsHeaders {
-  h3 { display: inline-block;}
-  small{
+  /*h3 { display: inline-block;}
+  small {
     color: @gray-light;
     display: block;
     margin-bottom: -2px;
-  }
+  }*/
   .btn {
     margin-top: -2px;
-    background-color: @gray;
-    color: white;
+    background-color: @detail-header-button-background-color;
+    color: @detail-header-color;
+  }
+  .entityName {
+    color: @detail-header-color;
+    font-size: 15px;
+    padding-left: 5px;
   }
 }
 
@@ -391,34 +634,106 @@ select {
     float:none!important;
   }
 }
+.entityDetailsBox {
+	background-color: @entity-detail-background-color;
+	color: @detail-color;
+    border: 1px solid @detail-border-color;
+}
+
+.instanceDetails {
+  .detailsBox {
+    border: 1px solid @detail-border-color;
+    margin: 5px;
+    padding: 15px;
+  }
+}
+
 .detailsBox {
-  border-radius: 5px;
-  border: 1px solid @gray-light2;
-  margin: 5px 0;
-  padding: 15px 5px;
+  /*border-radius: 5px;
+  border: 1px solid @gray-light2;*/
+  margin: 0px;
+  padding: 0px;
   font-size: 12px;
-  background-color: #ffffff;
+  background-color: @detail-background-color;
   h4 {
     font-weight: bold;
     margin:5px 0;
+    color: @form-label-color;
   }
   h5 {
     font-weight: bold;
     margin-top:2px;
+	color:  @form-label-color;
   }
   table {
     width: 100%;
     border-spacing: 5px;
     border-collapse: separate;
   }
+  .blink-success {
+	color: #69be28;
+  }
+  .blink-warning {
+	color: #E6DD00;
+  }
+  .blink-danger {
+    color: #E6DD00;
+  }
+  .blink-notification {
+	color: #ffff00;
+  }
+  .text-success {
+	color: #3c763d;
+  }
+  table.properties {
+	color: @form-table-color;
+	border-collapse: collapse;
+    .mb0;
+  }
+  .no-border-top {
+	border-top:0px;
+  }
+  .no-border-bottom {
+	border-bottom:0px;
+  }
+
+  .editXMLBtn {
+	backgorund-color:#cccccc;
+	color:#232323;
+	font-size:12px;
+  }
   .tableHeader {
     width: 70px;
     font-weight: bold;
   }
-  textarea {
+  label, span {
+    color: @form-label-color;
+  }
+  label {
+    margin-top: 15px;
+  }
+  label.custom-danger {
+	color: #f33;
+  }
+  textarea.form-control {
     width: 100%;
+	/*background-color:#232323;
+	color:#ffffff;
+	border:0px;
+	font-size:12px;*/
   }
-  &.processCluster {
+  .dt {
+	background-color: @details-box-dt-bg;
+	border:1px solid #666666;
+  }
+
+  .processCluster {
+    border-radius: 5px;
+    border: 1px solid #a6a6a6;
+    padding: 15px 4%;
+    margin: 10px auto;
+  }
+  /*&.processCluster {
     padding: 15px 4%;
     margin: 5px auto;
     h5 {
@@ -427,6 +742,14 @@ select {
         margin-top:0;
       }
     }
+  }*/
+  &.xmlPreviewContainer {
+    margin-left: 25px;
+    margin-right: -25px;
+    textarea[disabled] {
+      border: none;
+      background-color: transparent;
+    }
   }
 }
 
@@ -449,35 +772,36 @@ select {
 ///////VALIDITY BOXES//////////////////////////
 ///////////////////////////////////////////////
 .validityBox {
-  label, input, button {
+  /*label, input, button {
     font-weight: normal;
-  }
+  }*/
 
-  > div {
+  /*> div {
     display: inline-block;
     margin: 0 2px;
-  }
+  }*/
 
   h4 {
     margin-top: 5px;
     margin-bottom: 0;
   }
   .startDateBox, .endDateBox {
-    width: 20%;
+    /*width: 20%;*/
     vertical-align: top;
+    margin-right: 5px;
   }
   .startTimeBox, .endTimeBox {
-    width: 15%;
+    /*width: 15%;*/
     vertical-align: top;
-    padding-left:0;
     input {
-      //width: 20px;
-      //margin:0;
+      width: 45px;
+      margin-right: 5px;
+      /*margin:0 auto;*/
     }
     button {
       border-radius: 0;
       width: 25px;
-      height: 25px;
+      /*height: 25px;*/
       padding:0;
       margin-left: 1px;
     }
@@ -504,17 +828,90 @@ select {
   .endTimeBox {
 
   }
-  .tzBox {
+  /* Date-picker */
+  ul.dropdown-menu {
+    color: @gray-dark;
+    span, label {
+      color: @gray-dark;
+    }
+    button {
+      height: auto;
+    }
+  }
+  /*.tzBox {
     width: 22%;
     //padding-top: 20px;
-  }
+  }*/
 }
 
-.feedForm, .entityForm {
-  .validityBox {
+.clusterForm, .feedForm, .entityForm, .datasetForm, .snapshotForm, .datasourceForm {
+  margin-top: 25px;
+  /*.validityBox {
     .startDateBox, .endDateBox { width: 27%;}
     .startTimeBox, .endTimeBox {width: 17%;}
     .endDateBox { margin-left: 20px;}
-    .error_input { border:1px solid red !important;}
-  }
-}
\ No newline at end of file
+  }*/
+}
+
+.feedFormClusters {
+  padding-top: 50px;
+}
+
+.feedForm .clusterSelect {
+  display: inline;
+  width: auto;
+}
+
+.feedForm .clusterAddBtn {
+  margin: 0px 0px 1px 8px;
+}
+
+.feedForm .sourceClusterList, .feedForm .targetClusterList {
+  padding-top: 7px;
+}
+
+.feedForm .clusterListLabel {
+  font-size: 13px;
+  margin-bottom: 7px;
+}
+
+.feedForm .panel-heading {
+  padding: 1px;
+}
+
+.feedForm .panel-group .panel {
+  border-radius: 0px;
+  margin-top: -1px;
+}
+
+.feedForm .panel-group .panel .panel-collapse {
+  padding: 0px;
+}
+
+.feedFormInputBorder {
+  border: 1px solid @input-border;
+}
+
+.feedForm .partition-panel-body {
+  padding: 5px 5px 30px 5px;
+}
+
+.aclPermission {
+  min-width: 250px;
+}
+
+.endpointDefault {
+  color : @form-label-color !important;
+}
+
+.endpointChanged {
+  color: @gray-darker !important;
+}
+
+.clusterBoxEndLine {
+  border-top: 1px solid #aaa;
+}
+
+.disabledEditBtn {
+  pointer-events: auto !important;
+}

http://git-wip-us.apache.org/repos/asf/falcon/blob/76dc2e18/falcon-ui/app/css/styles/gray.less
----------------------------------------------------------------------
diff --git a/falcon-ui/app/css/styles/gray.less b/falcon-ui/app/css/styles/gray.less
new file mode 100644
index 0000000..b48affa
--- /dev/null
+++ b/falcon-ui/app/css/styles/gray.less
@@ -0,0 +1,65 @@
+@body-bg: @white;
+@header1Border: @gray-light;
+@header2NavBG: @gray-lighter;
+@header3NavBG: @white;
+@header2Border:@gray-light;
+/** Menu */
+/*
+@header-menu-color: @green-light;
+*/
+
+/** Search */
+@search-box-border: @gray-light;
+@search-input-color: @gray-light;
+@search-icon-color: @gray-light;
+
+/** Search:Popover */
+@popover-text-color: @gray-light;
+@popover-header-color: @gray-light;
+
+/* Entity Detail Screen */
+@entity-detail-background-color: @white;
+
+/* Detail Screen */
+@detail-header-color: @gray-light;
+@detail-header-button-background-color: @gray-lighter;
+@detail-background-color: @white;
+@detail-border-color: @gray-light;
+@detail-color: @gray-light;
+
+/* Lineage Graph*/
+@lineage-path-stroke-color: @gray-light;
+@lineage-rect-fill-color: @gray-lighter;
+@lineage-rect-stroke-color: @gray-light;
+@lineage-node-text-color: @gray-light;
+@lineage-marker-fill-color: @gray-light;
+
+/* Controls */
+@input-background-color:@gray-light; /* light gray for table instance  */
+@input-color: @white;
+@form-input-background-color: @green-light;
+@details-box-dt-bg : @green-light;
+@form-box-clusterBox-runJobOnBox : @cool-gray;
+@form-table-color :@green-light;
+@details-form-border :@gray-light;
+@progress-div-bottom-border : transparent;
+@progress-div-completed-bg: @gray-lighter;
+
+/** Table */
+@table-header-color: @gray-light;
+@table-header-background-color: @gray-lighter;
+@table-border-color: @gray-light;
+@table-header-border-color: @gray-light;
+@table-header-border-width: 0px 0px 1px;
+@table-header-button-color: @gray-dark;
+@table-header-button-hover-color: @gray-light;
+@table-cell-color:              #000;
+@table-cell-hover-color:        @gray-dark;
+@table-row-selected-background-color: @gray-lighter;
+@table-inactive-bg: @gray-lighter;
+
+/** Pagination */
+@pagination-active-bg:                 @white;
+@pagination-active-color:              @gray-light;
+@pagination-disabled-bg:               @gray-light;
+@pagination-disabled-color:            @white;

http://git-wip-us.apache.org/repos/asf/falcon/blob/76dc2e18/falcon-ui/app/css/styles/lineage.less
----------------------------------------------------------------------
diff --git a/falcon-ui/app/css/styles/lineage.less b/falcon-ui/app/css/styles/lineage.less
new file mode 100644
index 0000000..e3225d2
--- /dev/null
+++ b/falcon-ui/app/css/styles/lineage.less
@@ -0,0 +1,50 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.link {
+  fill: none;
+  stroke: green;
+  stroke-width: 2px;
+}
+g {
+  text {
+    pointer-events: none;
+    text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
+    text-align: center;
+    font-size: 15px !important;
+  }
+}
+.d3-tip {
+  pre {
+    max-width: 400px;
+  }
+}
+div.lineage {
+  border-bottom: 2px solid #006600;
+}
+.edgePath {
+  path {
+    stroke: #333;
+    fill: #333;
+    stroke-width: 1.5px;
+  }
+}
+.lineage-viz {
+  margin: 0 auto;
+  overflow: auto;
+}


Mime
View raw message