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; +}
