@vitrosoftware/common-ui-ts 1.0.1 → 1.0.2

package/css/white/common.css

@@ -0,0 +1,3 @@
+@import url('@vitrosoftware/common-ui-ts/css/white/third-party/kendo.css');
+@import url('@vitrosoftware/common-ui-ts/css/white/third-party/treegrid.css');
+@import url('@vitrosoftware/common-ui-ts/css/white/third-party/jstree/style.min.css');

package/css/white/controls/breadcrumbs/breadcrumbs.css

@@ -0,0 +1,178 @@
+.vitro-breadcrumbs ::-webkit-scrollbar {
+    width: 4px;
+}
+
+.vitro-breadcrumbs ::-webkit-scrollbar-track {
+    background: #fff;
+    border-radius: 8px;
+}
+
+.vitro-breadcrumbs ::-webkit-scrollbar-thumb {
+    background: #e0e0e0;
+    border-radius: 2px;
+    height: 20px;
+}
+
+.vitro-breadcrumbs ::-webkit-scrollbar-thumb:hover {
+    background: #828282;
+}
+
+.vitro-breadcrumbs {
+    height: 28px;
+    display: flex;
+    flex-direction: column;
+    border-left: 1px solid #BDBDBD;
+    padding: 0 0 0 12px;
+    position: relative;
+}
+
+.vitro-breadcrumbs .vitro-breadcrumbs-list-wrap {
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+    flex-direction: row-reverse;
+    justify-content: flex-end;
+}
+
+.vitro-breadcrumbs .breadcrumbs-button {
+    height: 12px;
+    width: 12px;
+    cursor: pointer;
+    margin-right: 8px;
+    position: relative;
+}
+
+.vitro-breadcrumbs .breadcrumbs-button::after {
+    content: '<<';
+    color: #828282;
+    display: inline-block;
+    font-size: 13px;
+    line-height: 10px;
+    height: 10px;
+    position: absolute;
+    right: 0;
+    top: 0;
+}
+
+.vitro-breadcrumbs .vitro-breadcrumbs-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+
+.vitro-breadcrumbs .vitro-breadcrumbs-list > li {
+    margin-right: 6px;
+    color: #828282;
+    font-size: 10px;
+    line-height: 10px;
+    cursor: pointer;
+}
+
+.vitro-breadcrumbs .site-name {
+    font-size: 13px;
+    line-height: 13px;
+    color: #4F4F4F;
+    margin-bottom: 4px;
+    align-self: flex-start;
+    cursor: pointer;
+}
+
+.vitro-breadcrumbs .site-name::after {
+    content: '>';
+    display: inline-block;
+    margin-left: 8px;
+    font-size: 16px;
+    transform: rotate(90deg);
+}
+
+.vitro-breadcrumbs .site-name.opened::after {
+    display: inline-block;
+}
+
+.vitro-breadcrumbs .site-name.closed::after {
+    display: none;
+}
+
+.vitro-breadcrumbs .drop-down-list {
+    background: white;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    margin-top: 8px;
+    border-radius: 8px;
+    box-shadow: rgb(0 0 0 / 13%) 0px 3.2px 7.2px 0px, rgb(0 0 0 / 11%) 0px 0.6px 1.8px 0px;
+    padding: 0;
+    overflow: hidden;
+}
+
+.vitro-breadcrumbs .drop-down-list ul {
+    max-height: 172px;
+    padding: 0;
+    display: flex;
+    flex-direction: column-reverse;
+    list-style-type: none;
+    font-size: 10px;
+    color: #828282;
+    margin-bottom: 0px;
+    overflow-y: auto;
+}
+
+.vitro-breadcrumbs .drop-down-list ul > li {
+    line-height: 24px;
+    cursor: pointer;
+    padding: 0 12px;
+    white-space: nowrap;
+}
+
+.vitro-breadcrumbs .drop-down-list ul > li:hover {
+    background: #F5F6FA;
+}
+
+.vitro-breadcrumbs .vitro-breadcrumbs-list {
+    display: flex;
+}
+
+.vitro-breadcrumbs .vitro-breadcrumbs-list > li:not(:last-child)::after {
+    content: '>';
+    display: inline-block;
+    margin-left: 8px;
+    font-size: 13px;
+}
+
+.vitro-breadcrumbs .drop-down-list ul > li::after {
+    content: '>';
+    display: inline-block;
+    transform: rotate(-90deg);
+    margin-left: 8px;
+    font-size: 13px;
+}
+
+@media (max-width: 800px) {
+    .vitro-breadcrumbs .vitro-breadcrumbs-list-wrap {
+        flex-direction: row;
+        justify-content: space-between;
+    }
+
+    .vitro-breadcrumbs .breadcrumbs-button {
+        margin-right: 0;
+        /* archive.svg URL-encoder for SVG */
+        background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 20010904//EN' 'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'%3E%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='12.000000pt' height='12.000000pt' viewBox='0 0 512.000000 512.000000' preserveAspectRatio='xMidYMid meet'%3E%3Cg transform='translate(0.000000,512.000000) scale(0.100000,-0.100000)'%0Afill='%23000000' stroke='none'%3E%3Cpath d='M1485 4445 c-478 -117 -886 -222 -905 -232 -19 -10 -45 -36 -57 -58%0Al-23 -40 0 -1548 c0 -1298 2 -1553 14 -1581 22 -53 62 -83 135 -100 172 -41%0A2089 -426 2121 -426 42 0 92 30 124 73 19 26 21 45 24 187 l3 159 229 3 c251%0A3 254 4 304 72 21 27 21 36 24 911 l2 883 53 12 c78 17 177 28 320 36 l127 7%0A0 -94 c0 -76 4 -100 19 -123 42 -63 114 -74 177 -27 82 61 560 489 581 521 28%0A40 29 75 5 115 -25 40 -584 497 -627 512 -83 29 -155 -35 -155 -137 l0 -57%0A-67 -12 c-95 -17 -256 -72 -352 -120 l-80 -41 -3 399 c-3 386 -4 401 -24 427%0A-11 15 -33 37 -48 48 -27 20 -41 21 -446 24 l-419 3 -3 157 c-3 147 -5 159%0A-27 191 -26 36 -91 71 -131 70 -14 0 -416 -97 -895 -214z m923 -2192 c13 -18%0A90 -74 187 -135 l165 -103 0 -697 c0 -384 -2 -698 -4 -698 -2 0 -356 72 -787%0A159 -431 88 -902 184 -1046 213 l-263 53 0 1516 0 1516 333 81 c182 45 568%0A140 857 210 l525 128 5 -1105 5 -1106 23 -32z m912 1399 l0 -428 -46 -44%0Ac-105 -101 -205 -263 -252 -405 -25 -75 -52 -203 -52 -247 0 -49 32 -95 75%0A-107 69 -19 107 6 162 106 26 45 61 97 80 115 l33 32 0 -817 0 -817 -200 0%0A-199 0 -3 518 -3 517 -23 32 c-13 18 -90 74 -187 135 l-165 103 0 868 0 867%0A390 0 390 0 0 -428z m1050 -331 c118 -97 214 -181 213 -185 0 -5 -99 -95 -220%0A-201 l-218 -192 -5 71 c-9 126 -36 146 -197 146 -307 0 -554 -49 -691 -136%0Al-52 -34 26 53 c130 258 406 445 744 503 52 9 103 20 113 26 26 13 57 68 57%0A101 0 15 3 27 8 26 4 0 104 -80 222 -178z'/%3E%3C/g%3E%3C/svg%3E");
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: center center;
+    }
+
+    .vitro-breadcrumbs .breadcrumbs-button::after {
+        display: none;
+    }
+
+    .vitro-breadcrumbs .drop-down-list {
+        right: 0;
+    }
+}
+
+@media (max-width: 414px) {
+    .vitro-breadcrumbs {
+        margin-left: 20px;
+    }
+}

package/css/white/controls/table-view/table-view.css

@@ -0,0 +1,57 @@
+#TableView {
+    border-radius: 8px;
+    padding: 6px;
+}
+
+#TableView, .vitro-table-view {
+    height: 100%;
+}
+
+.vitro-table-view {
+    width: 100%;
+    flex: 1 1;
+    background: #fff;
+    position: relative;
+}
+
+.vitro-table-view-status .vitro-status {
+    border-radius: 50%;
+    display: inline-block;
+    min-height: 12px;
+    min-width: 12px;
+    height: 12px;
+    width: 12px;
+    vertical-align: sub;
+    margin-right: 6px;
+    border: 1px solid transparent;
+}
+
+.TWEnumHeaderLeft .vitro-table-view-status > span:not(.vitro-status) {
+    display: none;
+}
+
+.vitro-table-view .TWClassReadOnly .vitro-readonly-cell {
+    color: #BDBDBD;
+}
+
+.vitro-table-view .vitro-editable-cell {
+    font-weight: bold;
+}
+
+.vitro-tableview-progress-message {
+    border: none !important;
+    box-shadow: none !important;
+    /* ico-preloader.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24px' height='24px' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid' style='margin: auto; background-image: none; display: block; shape-rendering: auto; background-position: initial initial; background-repeat: initial initial;' class='ng-star-inserted'%3E%3Cg transform='rotate(0 50 50)'%3E%3Crect x='46' y='6' rx='3.84' ry='3.84' width='8' height='24' fill='%23FF5B2D'%3E%3Canimate attributeName='opacity' values='1;0' keyTimes='0;1' dur='1s' begin='-0.875s' repeatCount='indefinite'%3E%3C/animate%3E%3C/rect%3E%3C/g%3E%3Cg transform='rotate(45 50 50)'%3E%3Crect x='46' y='6' rx='3.84' ry='3.84' width='8' height='24' fill='%23FF5B2D'%3E%3Canimate attributeName='opacity' values='1;0' keyTimes='0;1' dur='1s' begin='-0.75s' repeatCount='indefinite'%3E%3C/animate%3E%3C/rect%3E%3C/g%3E%3Cg transform='rotate(90 50 50)'%3E%3Crect x='46' y='6' rx='3.84' ry='3.84' width='8' height='24' fill='%23FF5B2D'%3E%3Canimate attributeName='opacity' values='1;0' keyTimes='0;1' dur='1s' begin='-0.625s' repeatCount='indefinite'%3E%3C/animate%3E%3C/rect%3E%3C/g%3E%3Cg transform='rotate(135 50 50)'%3E%3Crect x='46' y='6' rx='3.84' ry='3.84' width='8' height='24' fill='%23FF5B2D'%3E%3Canimate attributeName='opacity' values='1;0' keyTimes='0;1' dur='1s' begin='-0.5s' repeatCount='indefinite'%3E%3C/animate%3E%3C/rect%3E%3C/g%3E%3Cg transform='rotate(180 50 50)'%3E%3Crect x='46' y='6' rx='3.84' ry='3.84' width='8' height='24' fill='%23FF5B2D'%3E%3Canimate attributeName='opacity' values='1;0' keyTimes='0;1' dur='1s' begin='-0.375s' repeatCount='indefinite'%3E%3C/animate%3E%3C/rect%3E%3C/g%3E%3Cg transform='rotate(225 50 50)'%3E%3Crect x='46' y='6' rx='3.84' ry='3.84' width='8' height='24' fill='%23FF5B2D'%3E%3Canimate attributeName='opacity' values='1;0' keyTimes='0;1' dur='1s' begin='-0.25s' repeatCount='indefinite'%3E%3C/animate%3E%3C/rect%3E%3C/g%3E%3Cg transform='rotate(270 50 50)'%3E%3Crect x='46' y='6' rx='3.84' ry='3.84' width='8' height='24' fill='%23FF5B2D'%3E%3Canimate attributeName='opacity' values='1;0' keyTimes='0;1' dur='1s' begin='-0.125s' repeatCount='indefinite'%3E%3C/animate%3E%3C/rect%3E%3C/g%3E%3Cg transform='rotate(315 50 50)'%3E%3Crect x='46' y='6' rx='3.84' ry='3.84' width='8' height='24' fill='%23FF5B2D'%3E%3Canimate attributeName='opacity' values='1;0' keyTimes='0;1' dur='1s' begin='0s' repeatCount='indefinite'%3E%3C/animate%3E%3C/rect%3E%3C/g%3E%3C/svg%3E");
+    background-position: center 20px;
+    background-size: 24px 24px;
+    padding-top: 56px !important;
+    text-align: center !important;
+    font-family: "GraphikRegular" !important;
+    font-size: 10pt !important;
+}
+
+.vitro-tableview-progress-message.vitro-table-view-export-message {
+    background-color: #fff;
+    border: 1px solid #ff5b2d !important;
+}

package/css/white/controls/top-level-menu/top-level-menu.css

@@ -0,0 +1,89 @@
+.vitro-top-level-menu {
+    display: flex;
+    justify-content: space-between;
+    padding: 0;
+    margin: 0;
+    margin-right: auto;
+    border-left: 1px solid #BDBDBD;
+    font-size: 14px;
+    font-family: 'GraphikRegular';
+}
+
+.vitro-top-level-menu li {
+    list-style-type: none;
+    cursor: pointer;
+}
+
+.vitro-top-level-menu > li {
+    margin: 0 17px;
+    white-space: nowrap;
+}
+
+.vitro-top-level-menu > li:hover > a {
+    color: #0097ff;
+}
+
+.vitro-top-level-menu > li:last-child:hover {
+    color: #0097ff;
+}
+
+.vitro-top-level-menu > li:last-child {
+    position: relative;
+}
+
+.vitro-top-level-menu ul {
+    padding: 0;
+    margin-left: 0;
+    left: -12px;
+    top: 24px;
+    position: absolute;
+    background: #fff;
+    z-index: 5;
+    box-shadow: 0 4px 16px rgb(0 0 0 / 10%);
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+.vitro-top-level-menu ul > li {
+    display: flex;
+}
+
+.vitro-top-level-menu ul > li:hover {
+    background: #F5F6FA;
+}
+
+.vitro-top-level-menu ul > li:hover a {
+    color: #222d44;
+}
+
+.vitro-top-level-menu ul > li > a {
+    color: #222d44;
+    padding: 12px 12px;
+    width: 100%;
+}
+
+.vitro-top-level-menu a {
+    color: #222d44;
+}
+
+.vitro-top-level-menu a:hover {
+    text-decoration: none;
+    color: inherit;
+}
+
+.vitro-top-level-menu .vitro-active a {
+    color: #0097ff;
+}
+
+.vitro-top-level-menu #all-services::after {
+    content: '';
+    width: 20px;
+    height: 20px;
+    display: inline-block;
+    vertical-align: middle;
+    margin-left: 24px;
+    background-position: center center !important;
+    background-repeat: no-repeat;
+    /* menu.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 16 16' style='enable-background:new 0 0 16 16;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23BDBDBD;%7D%0A%3C/style%3E%3Cg%3E%3Ccircle class='st0' cx='1.8' cy='1.8' r='1.8'/%3E%3Ccircle class='st0' cx='8.2' cy='7.8' r='1.8'/%3E%3Ccircle class='st0' cx='1.8' cy='7.8' r='1.8'/%3E%3Ccircle class='st0' cx='1.8' cy='14.2' r='1.8'/%3E%3Ccircle class='st0' cx='8.2' cy='14.2' r='1.8'/%3E%3Ccircle class='st0' cx='8.2' cy='1.8' r='1.8'/%3E%3Ccircle class='st0' cx='14.2' cy='1.8' r='1.8'/%3E%3Ccircle class='st0' cx='14.2' cy='7.8' r='1.8'/%3E%3Ccircle class='st0' cx='14.2' cy='14.2' r='1.8'/%3E%3C/g%3E%3C/svg%3E%0A");
+}

package/css/white/controls/tree-view/tree-view-context-menu.css

@@ -0,0 +1,77 @@
+.vakata-context, .vakata-context ul {
+    background: white;
+    border: none;
+    box-shadow: 0 4px 16px rgb(0 0 0 / 10%);
+    border-radius: 8px;
+    z-index: 30;
+    padding: 0;
+}
+
+.vakata-context > li {
+    box-shadow: none;
+    position: relative;
+}
+
+.vakata-context > li:hover {
+    box-shadow: none;
+}
+
+.vakata-context li > a {
+    line-height: 40px;
+    padding: 0 20px;
+}
+
+.vakata-context li > a.vakata-context-parent {
+    background-image: none;
+}
+
+.vakata-context li > a.vakata-context-parent::after {
+    content: '';
+    position: absolute;
+    right: 12px;
+    top: 15px;
+    width: 10px;
+    height: 10px;
+    display: inline-block;
+    background-position: center center !important;
+    background-size: 8px;
+    background-repeat: no-repeat;
+    /* closed.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 16 16' style='enable-background:new 0 0 16 16;' xml:space='preserve'%3E%3Cpath d='M5.3,0.3l6.9,6.9c0.2,0.2,0.3,0.5,0.3,0.8v0c0,0.3-0.1,0.6-0.3,0.8l-6.9,6.9c-0.4,0.4-1.1,0.4-1.6,0h0 c-0.4-0.4-0.4-1.1,0-1.6l6-6.1c0,0,0,0,0,0l-6-6c-0.4-0.4-0.4-1.2,0-1.6l0,0C4.2-0.1,4.9-0.1,5.3,0.3z'/%3E%3C/svg%3E%0A") !important;
+}
+
+.vakata-context li > a:hover {
+    border: none;
+    background: #F5F6FA;
+    box-shadow: none;
+}
+
+.vakata-context .vakata-context-hover > a {
+    border: none;
+    background: #F5F6FA;
+    box-shadow: none;
+}
+
+.vakata-context > li:first-child > a {
+    border-radius: 8px 8px 0 0;
+}
+
+.vakata-context > li:last-child > a {
+    border-radius: 0 0 8px 8px;
+}
+
+.vakata-context ul > li:first-child > a {
+    border-radius: 8px 8px 0 0;
+}
+
+.vakata-context ul > li:last-child > a {
+    border-radius: 0 0 8px 8px;
+}
+
+.vakata-context li > a .vakata-contextmenu-sep {
+    display: none;
+}
+
+.vakata-context li > a i {
+    display: none;
+}

package/css/white/controls/tree-view/tree-view.css

@@ -0,0 +1,109 @@
+:global(#TreeView) {
+    padding: 20px 24px;
+}
+
+.vitro-tree-view :global(.jstree-anchor) {
+    line-height: 28px;
+    height: 28px;
+}
+
+.vitro-tree-view :global(.jstree-wholerow) {
+    height: 28px;
+}
+
+.vitro-tree-view :global(.jstree-wholerow-hovered) {
+    background: #F4F4F4;
+    box-shadow: none;
+}
+
+.vitro-tree-view :global(.jstree-wholerow-clicked) {
+    background: #E0E0E0;
+    box-shadow: none;
+}
+
+.vitro-tree-view :global(.jstree-wholerow-clicked.jstree-wholerow-hovered) {
+    background: #E0E0E0;
+    box-shadow: none;
+}
+
+.vitro-tree-view :global(.jstree-themeicon) {
+    margin-right: 10px;
+}
+
+.vitro-tree-view :global(.jstree-themeicon.folder) {
+    /* folder.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 11 16'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:url(%23linear-gradient);%7D.cls-2%7Bfill:url(%23linear-gradient-2);%7D.cls-3%7Bfill:%23fddd76;%7D.cls-4%7Bfill:%23ffeeb6;%7D%3C/style%3E%3ClinearGradient id='linear-gradient' x1='3' y1='6.71' x2='14' y2='6.71' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0.22' stop-color='%23e8c462'/%3E%3Cstop offset='1' stop-color='%23fee388'/%3E%3C/linearGradient%3E%3ClinearGradient id='linear-gradient-2' x1='4.87' y1='16' x2='4.87' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ffe086'/%3E%3Cstop offset='0.82' stop-color='%23ffeaa5'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ctitle%3Efolder%3C/title%3E%3Cpath class='cls-1' d='M14,9.15l0-.05a7.61,7.61,0,0,1-.72-.76l-.15-.19V.27A.27.27,0,0,0,12.81,0H3V13.42H13.71a.29.29,0,0,0,.29-.28V9.21A.16.16,0,0,0,14,9.15Z' transform='translate(-3)'/%3E%3Cpath class='cls-2' d='M6.45,11.7a.1.1,0,0,0,0,.05v4.17a.08.08,0,0,1-.12.06L3,13.42H3V0L6.65,2.8A.24.24,0,0,1,6.74,3v8.19a.1.1,0,0,1,0,.05Z' transform='translate(-3)'/%3E%3Crect class='cls-3' x='0.23' y='0.66' width='0.08' height='12.46'/%3E%3Crect class='cls-3' x='0.46' y='0.88' width='0.08' height='12.46'/%3E%3Crect class='cls-4' x='0.31' y='0.74' width='0.08' height='12.46'/%3E%3Crect class='cls-4' x='0.53' y='0.96' width='0.08' height='12.46'/%3E%3C/svg%3E");
+    background-size: 12px !important;
+    background-position: center 6px;
+}
+
+.vitro-tree-view :global(.jstree-themeicon.file) {
+    /* file.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 16 16' style='enable-background:new 0 0 16 16;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:url(%23SVGID_1_);%7D .st1%7Bfill:url(%23SVGID_2_);%7D%0A%3C/style%3E%3ClinearGradient id='SVGID_1_' gradientUnits='userSpaceOnUse' x1='7.9844' y1='0.5' x2='7.9844' y2='15.5'%3E%3Cstop offset='0.3911' style='stop-color:%23FFFFFF'/%3E%3Cstop offset='0.6764' style='stop-color:%23FCFCFC'/%3E%3Cstop offset='0.8777' style='stop-color:%23F3F4F3'/%3E%3Cstop offset='0.9059' style='stop-color:%23F1F2F1'/%3E%3Cstop offset='0.9876' style='stop-color:%23FFFFFF'/%3E%3C/linearGradient%3E%3Cpath class='st0' d='M13.5,15.5h-11v-15h6l5,4.5V15.5z'/%3E%3ClinearGradient id='SVGID_2_' gradientUnits='userSpaceOnUse' x1='8' y1='0' x2='8' y2='16'%3E%3Cstop offset='0' style='stop-color:%23BEBEBE'/%3E%3Cstop offset='0.4778' style='stop-color:%23BCBCBC'/%3E%3Cstop offset='0.6499' style='stop-color:%23B5B6B6'/%3E%3Cstop offset='0.7726' style='stop-color:%23AAAAAB'/%3E%3Cstop offset='0.8717' style='stop-color:%23999A9C'/%3E%3Cstop offset='0.9557' style='stop-color:%23838589'/%3E%3Cstop offset='1' style='stop-color:%2374767B'/%3E%3C/linearGradient%3E%3Cpath class='st1' d='M8.7,0H2v16h12V6V5V4.8L8.7,0z M13,15H3V1h5v4v1h1h4V15z M9,5V1.6L12.8,5H9z'/%3E%3C/svg%3E%0A");
+    background-size: 14px !important;
+    background-position: center center;
+}
+
+.vitro-tree-view :global(.jstree-icon) {
+    height: 28px !important;
+    line-height: 28px !important;
+}
+
+.vitro-tree-view :global(.jstree-open > .jstree-icon.jstree-ocl) {
+    /* opened.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 16 16' style='enable-background:new 0 0 16 16;' xml:space='preserve'%3E%3Cpath d='M15.7,5.3l-6.9,6.9c-0.2,0.2-0.5,0.3-0.8,0.3h0c-0.3,0-0.6-0.1-0.8-0.3L0.3,5.4c-0.4-0.4-0.4-1.1,0-1.6l0,0 c0.4-0.4,1.1-0.4,1.6,0l6.1,6c0,0,0,0,0,0l6-6c0.4-0.4,1.2-0.4,1.6,0l0,0C16.1,4.2,16.1,4.9,15.7,5.3z'/%3E%3C/svg%3E%0A");
+    background-repeat: no-repeat;
+    background-position: center center !important;
+    background-size: 8px;
+}
+
+.vitro-tree-view :global(.jstree-closed > .jstree-icon.jstree-ocl) {
+    /* closed.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 16 16' style='enable-background:new 0 0 16 16;' xml:space='preserve'%3E%3Cpath d='M5.3,0.3l6.9,6.9c0.2,0.2,0.3,0.5,0.3,0.8v0c0,0.3-0.1,0.6-0.3,0.8l-6.9,6.9c-0.4,0.4-1.1,0.4-1.6,0h0 c-0.4-0.4-0.4-1.1,0-1.6l6-6.1c0,0,0,0,0,0l-6-6c-0.4-0.4-0.4-1.2,0-1.6l0,0C4.2-0.1,4.9-0.1,5.3,0.3z'/%3E%3C/svg%3E%0A");
+    background-repeat: no-repeat;
+    background-position: center center !important;
+    background-size: 8px;
+}
+
+:global(#jstree-dnd .jstree-er) {
+    background-image: none !important;
+}
+
+:global(#jstree-dnd .jstree-er:before) {
+    content: '';
+    width: inherit;
+    height: inherit;
+    display: block;
+    background-position: center center !important;
+    background-size: 14px;
+    background-repeat: no-repeat;
+    /* dnd-nok.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 16 16' style='enable-background:new 0 0 16 16;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:url(%23SVGID_1_);%7D%0A%3C/style%3E%3ClinearGradient id='SVGID_1_' gradientUnits='userSpaceOnUse' x1='1.8438' y1='14.25' x2='14.25' y2='1.8438'%3E%3Cstop offset='0' style='stop-color:%23B61414'/%3E%3Cstop offset='0.1223' style='stop-color:%23BC1212'/%3E%3Cstop offset='0.28' style='stop-color:%23CC0D0D'/%3E%3Cstop offset='0.4566' style='stop-color:%23E60404'/%3E%3Cstop offset='0.5173' style='stop-color:%23F10000'/%3E%3Cstop offset='0.5293' style='stop-color:%23F31414'/%3E%3Cstop offset='0.5525' style='stop-color:%23F73434'/%3E%3Cstop offset='0.5777' style='stop-color:%23FA4E4E'/%3E%3Cstop offset='0.6053' style='stop-color:%23FC6363'/%3E%3Cstop offset='0.6363' style='stop-color:%23FE7171'/%3E%3Cstop offset='0.6738' style='stop-color:%23FF7979'/%3E%3Cstop offset='0.7351' style='stop-color:%23FF7C7C'/%3E%3Cstop offset='0.7409' style='stop-color:%23FF7F7F'/%3E%3Cstop offset='0.7848' style='stop-color:%23FC9393'/%3E%3Cstop offset='0.8348' style='stop-color:%23FAA1A1'/%3E%3Cstop offset='0.896' style='stop-color:%23F8AAAA'/%3E%3Cstop offset='1' style='stop-color:%23F8ACAC'/%3E%3C/linearGradient%3E%3Cpolygon class='st0' points='16,12.5 11.5,8 16,3.6 12.4,0 8,4.5 3.6,0.1 0.1,3.6 4.5,8 0,12.4 3.6,16 8,11.5 12.5,16 '/%3E%3C/svg%3E%0A") !important;
+}
+
+:global(#jstree-dnd .jstree-ok) {
+    background-image: none !important;
+}
+
+:global(#jstree-dnd .jstree-ok:before) {
+    content: '';
+    width: inherit;
+    height: inherit;
+    display: block;
+    background-position: center center !important;
+    background-size: 16px;
+    background-repeat: no-repeat;
+    /* dnd-ok.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 16 16' style='enable-background:new 0 0 16 16;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:url(%23SVGID_1_);%7D%0A%3C/style%3E%3ClinearGradient id='SVGID_1_' gradientUnits='userSpaceOnUse' x1='7.95' y1='14.1166' x2='7.95' y2='1.6057' gradientTransform='matrix(1 0 0 -1 0 16)'%3E%3Cstop offset='0' style='stop-color:%23D6F8BA'/%3E%3Cstop offset='0.1436' style='stop-color:%23ACF078'/%3E%3Cstop offset='0.2094' style='stop-color:%23A3EB6F'/%3E%3Cstop offset='0.318' style='stop-color:%238ADC57'/%3E%3Cstop offset='0.4556' style='stop-color:%2361C430'/%3E%3Cstop offset='0.6015' style='stop-color:%232FA600'/%3E%3Cstop offset='0.8433' style='stop-color:%2334971F'/%3E%3Cstop offset='1' style='stop-color:%2336902E'/%3E%3C/linearGradient%3E%3Cpolygon class='st0' points='15.9,5.4 12.4,1.9 6.9,7.3 3.5,3.9 0,7.5 7,14.4 '/%3E%3C/svg%3E%0A") !important;
+}
+
+:global(.jstree-rename-input) {
+    height: 28px !important;
+    line-height: 28px !important;
+}
+
+@media (max-width: 800px) {
+    .vitro-tree-view {
+        display: none !important;
+    }
+}

package/css/white/controls/uploader/uploader.css

@@ -0,0 +1,74 @@
+.vitro-uploader {
+    width: 100%;
+    padding-left: 7px;
+    padding-right: 29px;
+    position: absolute;
+    bottom: 41px;
+}
+
+.button-close, .show, .hide {
+    background-position: center center;
+    background-size: 100%;
+    background-color: transparent;
+    position: absolute;
+    cursor: pointer;
+    z-index: 100;
+    background-repeat: no-repeat;
+    border: none;
+    outline: none;
+    width: 12px;
+}
+
+.vitro-uploader .button-close {
+    /* upload-close.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' width='25.4mm' height='25.4mm' version='1.1' style='shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd'%0AviewBox='0 0 2540 2540' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cstyle type='text/css'%3E%3C!%5BCDATA%5B .fil0 %7Bfill:%23AFAFAF%7D %5D%5D%3E%3C/style%3E%3C/defs%3E%3Cg id='Слой_x0020_1'%3E%3Cmetadata id='CorelCorpID_0Corel-Layer'/%3E%3Cpath class='fil0' d='M1037.01 1269.02l-65.07 68.01c-22.73,22.73 -42.77,44.73 -65.56,67.52l-567.53 567.56c-11.37,11.36 -21.3,23.27 -33.76,32.78l-267.64 266.63c-86,85.02 -11.35,267.65 97.38,267.65l3.45 0c71.7,-0.04 99.32,-1.73 148.73,-47.43 6.14,-5.67 11.3,-10.82 16.12,-17.15 14.62,-19.16 193.57,-194.72 232.41,-233.37l73.46 -75.27c7.86,-9.41 18.64,-15.38 26.04,-24.85 18.68,-23.94 75.68,-77.05 99.13,-100.5l441.21 -439.45c3.48,-2.91 5.69,-5.49 8.9,-8.72l67.54 -65.54c6.49,-6 10.99,-12.4 18.08,-17.15 12.04,3.22 24.89,23.47 35.23,31.31l142.2 139.61c8.13,8.69 15.41,18.01 25.27,25.62 11.21,8.65 19.36,21.18 33.52,33.02 12.65,10.58 21.23,23.22 33.27,33.27 11.13,9.3 21.43,22.21 33.38,33.16 11.44,10.49 21.52,23.8 33.14,33.4 12.39,10.24 20.34,23.84 33.02,33.52 12.96,9.89 20.35,23.56 32.73,33.81 14.82,12.28 20.73,21.99 33.15,33.38 22.47,20.6 17.94,18.27 33.26,33.29 6.47,6.34 11.56,8.62 17.65,15.62 3.39,3.89 3.47,4.92 6.87,8.78 7.96,9.05 18.45,15.73 26.43,24.46l16.61 18.61c89.27,89.13 176.96,176.97 266.15,266.17l99.17 100.45c9.77,12.67 23.16,21.61 33.02,33.52 15.05,18.17 47.9,49.41 67.31,65.77 35.06,29.55 70.72,32.44 113.54,32.66l22.1 0c35.12,0 72.82,-29 95.43,-53.3 23.17,-24.91 37.89,-71.68 37.65,-115.86 -0.13,-23.15 -4.37,-45.58 -13.65,-63.79 -21.02,-41.27 -61.35,-73.96 -93.5,-106.11l-83.17 -83.18c-2.9,-2.93 -4.76,-5.1 -7.92,-7.74l-373.7 -371.94c-5.98,-5.97 -10.53,-10.81 -16.62,-16.64l-34.3 -32.24c-6.61,-6.57 -9.44,-11.63 -15.54,-17.73 -6.12,-6.12 -11.12,-8.93 -17.7,-15.57 -8.32,-8.41 -15.01,-17.85 -24.11,-24.82 -4.17,-3.19 -5.62,-4.88 -9.16,-8.45l-49.54 -50.27c-6.64,-8.7 -9.72,-8.92 -17.02,-16.25l-33.22 -33.32c-11.56,-10.17 -20.54,-24.45 -32.81,-33.74l-12.61 -12.82c-31.05,-37.27 -105.49,-104.45 -144.46,-145.18 -13.15,-13.74 -51.12,-51.54 -56.23,-61.2 14.78,-7.82 55.89,-48.24 69.07,-64.01l735.75 -737.91c37.19,-37.19 105.95,-111.81 142.66,-141.1 3.63,-2.9 5.64,-5.21 9.01,-8.61 5.99,-6.04 10.61,-10.62 16.63,-16.64l23.49 -25.44c33.92,-36.46 38.65,-79.29 38.65,-129.66 0,-71.77 -84.81,-144.82 -154.61,-144.82 -44.7,0 -77.96,8.95 -111.55,35.22 -13.43,10.52 -22.62,19.49 -34.77,31.77l-364.95 366.98c-6.66,6.59 -9.45,11.57 -15.58,17.7 -6.1,6.11 -11.16,8.93 -17.72,15.55l-433.42 435.51c-6.49,6.54 -11.62,8.92 -17.67,15.59 -20.91,23.07 -112.26,108.6 -117.88,116.98 -22.75,-15.24 -39.71,-40.14 -59.84,-55.63 -26.85,-20.66 -144.25,-149.21 -183.9,-182.06 -9.62,-7.97 -15.62,-17.54 -24.83,-26.05 -6.6,-6.1 -11.29,-8.42 -17.63,-15.65 -14.89,-17.02 -20.44,-19.75 -33.32,-33.22l-24.33 -24.59c-9.46,-7.91 -15.76,-17.84 -24.5,-26.39 -6.3,-6.16 -11.13,-8.94 -17.7,-15.56 -6.4,-6.44 -9.09,-11.19 -15.59,-17.69 -6.51,-6.51 -11.6,-9.17 -17.71,-15.55l-464.72 -468.79c-6.03,-6.02 -10.62,-10.61 -16.64,-16.64l-66.57 -66.51c-12.13,-12.07 -19.46,-21.5 -33.85,-32.68 -15.37,-11.95 -21.74,-17.07 -40.62,-25.92 -38.58,-18.09 -95.51,-15.37 -133.14,2.6 -25.84,12.34 -45.48,29.26 -63.3,50.21 -20.52,24.13 -32.16,47.65 -32.51,83.84 -0.47,49.66 7.36,90.81 32.41,118.6l364.06 367.88c18.96,17.14 32.33,33.12 38.12,38.21 22.31,19.61 61.36,63.54 76.84,75.81l337.01 338.17c4.17,4.11 7.15,5.47 10.63,8.94l18.75 20.39c7.03,7.12 13.22,10.3 19.58,17.61l19.38 19.76c27.5,21.93 51.5,53.21 77.55,77.05 12.1,11.07 28.49,29.85 41.53,36.75z'/%3E%3C/g%3E%3C/svg%3E%0A");
+    right: 39px;
+    height: 12px;
+    top: 77px;
+}
+
+.show {
+    /* show.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' width='25.4mm' height='14.478mm' version='1.1' style='shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd'%0AviewBox='0 0 2540 1447.8' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cstyle type='text/css'%3E%3C!%5BCDATA%5B .fil0 %7Bfill:%23AFAFAF%7D %5D%5D%3E%3C/style%3E%3C/defs%3E%3Cg id='Слой_x0020_1'%3E%3Cmetadata id='CorelCorpID_0Corel-Layer'/%3E%3Cpath class='fil0' d='M1261.53 -0.86c33.91,0 62.68,3.49 88.88,19.14 56.44,33.71 95.27,79.94 141.69,126.34 312.77,312.11 625.73,623.79 937.27,936.88 81.09,81.05 162.84,190.94 68.07,299.02 -16.07,18.33 -32.79,33.87 -54.53,45.48 -114.25,60.97 -198.43,-16.95 -275.73,-94.42 -34.6,-38.13 -77.31,-77.5 -113.92,-114.1 -249.83,-250.22 -498.09,-501.99 -750.21,-749.91 -6.61,-6.66 -29.64,-28.92 -35.52,-30.49 -13.63,9.13 -110.64,105.71 -122.88,119.14 -260.49,252.75 -516.22,516.09 -772.64,773.49 -88.82,90.76 -188.26,172.16 -308.54,74.97 -79.28,-64.05 -81.22,-173.77 -22.87,-252.27 27.05,-36.38 78.63,-82.44 111.11,-114.9 297.9,-298.52 587.54,-606.4 895.26,-894.89 33.17,-33.34 65.6,-68.17 102.07,-97.95 4.4,-3.59 7.89,-6.38 12.18,-9.82 30.09,-24.05 55.74,-35.71 100.31,-35.71z'/%3E%3C/g%3E%3C/svg%3E%0A");
+    right: 67px;
+    height: 10px;
+    top: 79px;
+}
+
+.hide {
+    /* hide.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' width='25.4mm' height='14.478mm' version='1.1' style='shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd'%0AviewBox='0 0 2540 1447.8' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cstyle type='text/css'%3E%3C!%5BCDATA%5B .fil0 %7Bfill:%23AFAFAF%7D %5D%5D%3E%3C/style%3E%3C/defs%3E%3Cg id='Слой_x0020_1'%3E%3Cmetadata id='CorelCorpID_0Corel-Layer'/%3E%3Cpath class='fil0' d='M1261.53 1448.66c33.91,0 62.68,-3.49 88.88,-19.14 56.44,-33.71 95.27,-79.94 141.69,-126.34 312.77,-312.11 625.73,-623.79 937.27,-936.88 81.09,-81.05 162.84,-190.94 68.07,-299.02 -16.07,-18.33 -32.79,-33.87 -54.53,-45.48 -114.25,-60.97 -198.43,16.95 -275.73,94.42 -34.6,38.13 -77.31,77.5 -113.92,114.1 -249.83,250.22 -498.09,501.99 -750.21,749.91 -6.61,6.66 -29.64,28.92 -35.52,30.49 -13.63,-9.13 -110.64,-105.71 -122.88,-119.14 -260.49,-252.75 -516.22,-516.09 -772.64,-773.49 -88.82,-90.76 -188.26,-172.16 -308.54,-74.97 -79.28,64.05 -81.22,173.77 -22.87,252.27 27.05,36.38 78.63,82.44 111.11,114.9 297.9,298.52 587.54,606.4 895.26,894.89 33.17,33.34 65.6,68.17 102.07,97.95 4.4,3.59 7.89,6.38 12.18,9.82 30.09,24.05 55.74,35.71 100.31,35.71z'/%3E%3C/g%3E%3C/svg%3E%0A");
+    right: 67px;
+    height: 10px;
+    top: 79px;
+}
+
+.vitro-uploader :global(.k-upload .k-dropzone .k-upload-status) {
+    margin-right: 60px !important;
+}
+
+.hidden :global(.k-upload-files) {
+    display: none;
+}
+
+.vitro-uploader :global(.k-dropzone) {
+    height: 100px;
+}
+
+.vitro-uploader :global(.k-upload .k-dropzone .k-dropzone-hint),
+.vitro-uploader :global(.k-upload .k-dropzone .k-upload-status) {
+    margin-right: 0;
+}
+
+.vitro-uploader :global(.k-upload .k-dropzone .k-dropzone-hint) {
+    flex: unset;
+}
+
+.vitro-uploader :global(.k-upload .k-dropzone) {
+    position: relative;
+    align-items: flex-end;
+}
+
+:global(#TableViewContainer .splitter:last-child > .pane.primary):has(.vitro-uploader) {
+    position: relative;
+}