comindware.core.ui
Version:
Comindware Core UI provides the basic components like editors, lists, dropdowns, popups that we so desperately need while creating Marionette-based single-page applications.
679 lines (586 loc) • 26.4 kB
CSS
/* General */
:root{
--theme-colors__background: #ffffff;
--demo-nav__i_selected: #11547f;
--demo-welcome__item-bg-clr: #0376b8;
--demo-welcome__item-box-sh1: rgba(0,0,0,0.16);
--demo-welcome__item-box-sh2: rgba(0,0,0,0.23);
--demo-welcome__item-hover-box-sh1: rgba(0,0,0,0.25);
--demo-welcome__item-hover-box-sh2: rgba(0,0,0,0.22);
--demo-box-sh1: rgba(0,0,0,0.12);
--demo-box-sh2: rgba(0,0,0,0.24);
--demo-welcome__item_dropdown-bgc: #669999;
--demo-welcome__item_dropdown-bgc-before: #2d7474;
--demo-welcome__item_list: #80669e;
--demo-welcome__item_list-before: #573f73;
--demo-welcome__item_other: #D49A6A;
--demo-welcome__item_other-before: #9b5b26;
--h3-demo-color: #182026;
--demo-list-container-brdr-color: #64aad0;
--demo-split-panel_left-bgc: rgba(236, 236, 236, .4);
--demo-split-panel_right-bgc: rgba(220, 220 ,220, .15);
--left-menu__resizer-b-color: #8f979c;
}
body {
display: flex;
}
.wrapper {
display: flex;
flex-direction: column;
flex: 1 1;
width: 100%;
overflow: hidden;
}
.app-region-container {
display: flex;
width: 100%;
}
.header-container {
width: 100%;
height: 40px;
z-index: 3;
}
.content-container {
height: 100%;
display: flex;
}
.popup-container {
position: absolute;
left: 0;
top: 0;
right: 0;
height: 100%;
}
.visually-hidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}
/* NavBar */
.demo-nav {
display: flex;
flex-flow: row nowrap;
flex: 0 0 auto;
justify-content: flex-start;
color: var(--theme-colors__main);
background: var(--theme-colors__primary);
line-height: 36px;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
overflow-x: auto;
height: 40px;
}
.demo-nav__i {
color: var(--theme-colors__main);
padding: 0 15px;
font-size: 15px;
}
.demo-nav__i:hover {
background-color: var(--theme-colors__primary_strong);
}
.demo-nav__i_selected {
background-color: var(--demo-nav__i_selected);
}
.demo-nav__i > a {
display: block;
padding: 0 50px;
line-height: inherit;
color: var(--theme-colors__main);
text-decoration: none;
cursor: pointer;
white-space: nowrap;
}
/* Index Page */
.demo-welcome {
display: flex;
flex-flow: column;
height: 100%;
width: 100%;
justify-content: center;
}
.demo-welcome__ribbon {
width: 100%;
display: flex;
flex-flow: row wrap;
justify-content: center;
padding: 20px;
}
.demo-welcome__doc-navi {
text-align: center;
width: 100%;
display: inline-block;
}
.demo-welcome__item {
display: flex;
height: 350px;
width: 270px;
padding: 15px;
margin: 20px;
justify-content: center;
align-items: flex-end;
background: var(--demo-welcome__item-bg-clr);
cursor: pointer;
color: var(--theme-colors__main);
font-weight: 500;
z-index: 1;
box-shadow: 0 3px 6px var(--demo-welcome__item-box-sh1), 0 3px 6px var(--demo-welcome__item-box-sh2);
position: relative;
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
text-decoration: none;
font-size: 1.5rem;
border-radius: 4px;
}
.demo-welcome__item:hover {
z-index: 2;
color: var(--theme-colors__main);
transform: scale(1.1);
text-decoration: none;
box-shadow: 0 14px 28px var(--demo-welcome__item-hover-box-sh1), 0 10px 10px var(--demo-welcome__item-hover-box-sh2);
}
.demo-welcome__item:active {
z-index: 2;
color: var(--theme-colors__main);
transform: scale(0.9);
text-decoration: none;
box-shadow: 0 1px 3px var(--demo-box-sh1), 0 1px 2px var(--demo-box-sh2);
}
.demo-welcome__item:after {
content: '';
position: absolute;
left:0;
right: 0;
top:0;
bottom: 0;
background: no-repeat 50% 42% url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABGCAYAAABxLuKEAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpDNjJCNTdCMDJGQjAxMUU1QjI5M0FGMkUzOEI3NUEyRiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpDNjJCNTdCMTJGQjAxMUU1QjI5M0FGMkUzOEI3NUEyRiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkM2MkI1N0FFMkZCMDExRTVCMjkzQUYyRTM4Qjc1QTJGIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkM2MkI1N0FGMkZCMDExRTVCMjkzQUYyRTM4Qjc1QTJGIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+ayJ3uQAAApxJREFUeNrsmstqFEEUhmc0MYHEZGVQUBASL4GIr5DsRhc+gE/g2oUbwbWQLLKRgHtxJ4yZCBp3yUbciEnMjKDCNBIVBUMIuRht/9IaLMa+VLqrYU7Nf+Cjm56ebvrj1KlLdzkMwxLj/yhTDMVQDMVQDMVQDMVQDMVQDMUwKIZiKKaYOJLwWwV8B2FO9sFzMOBLxlTBNYf3ug4e+pAxPY7vddKXpvTK8b1ugUkfmtINMFfAPT+D7Yjjx3LUoQH9/6jYBdPgjisxV8GCJ52M6gCO621uMRNgxRMxO2AIHLgQoy606YGUr+A2uO9ygKfGMcMW13kEZnXB3uqGke9rcCnlGk/BFT2Y64qRr4qmxTVmDCmXddaEHc5PEIC74GjkU6mMSWAuTI+z+tzT4EsoL25GPbuLjPmmt1PghMBWUymiKQVGsR0XWk62ixDTMPYvCBXzIouYIOX3dWP/olAxtSxiPuoKHhd1YyZ+TqCUd2A1i5gfYMMiY0ZBry/ZYiMmrTnVhTejah4xzYTpwoZgMWoeuFyEmLqxL7GrXtClwrmYdeFddS3PXClJTENwxqhMeZJXTFzxfaO3pyyXJjopltLWmlzUGInNqJp32aE1SWyfT6i10w+CC2/NhZio5vS29G/9VFpXrdax37sS00zoqqWJmbc5qRvFPC5STGsMMwjOCJLyCbx0KSaIyZjzoCys6P4qKmNCY3AnrUeatz0xi5im0X1Lqi/qbeSiazFBTOGVNLhb1HKcitkr/f1KoX3yOO5jMzqMGLM5tTJGvaiSspx5YDPazSqm0ZYx/aBPiJgHuqu2j5Q3kSZjYA2MGMeedfhbxk1wD/Qf4jn/wM9ZY4JiKIZiKIZiKIZiKIZiKIZiKIZBMRRDMQXFbwEGAARGJ0FLAirMAAAAAElFTkSuQmCC');
z-index: 3;
}
.demo-welcome__item_dropdown {
background-color: var(--demo-welcome__item_dropdown-bgc);
}
.demo-welcome__item_dropdown:before {
background-color: var(--demo-welcome__item_dropdown-bgc-before);
}
.demo-welcome__item_dropdown:after {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABGCAYAAABxLuKEAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpDQThBQUZDNzJGQjAxMUU1Qjg2RTgzMzBCNjIxOEUxOSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpDQThBQUZDODJGQjAxMUU1Qjg2RTgzMzBCNjIxOEUxOSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkNBOEFBRkM1MkZCMDExRTVCODZFODMzMEI2MjE4RTE5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkNBOEFBRkM2MkZCMDExRTVCODZFODMzMEI2MjE4RTE5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+fZy4RgAAAZdJREFUeNrs20FKw0AUxvHGjeBO3YvgMXKSHsClp3Hr3pO49QaKdV2ioN1V4gtEkJGamclL8mbm/+CDFNLX9EctX9VWbduumL9TAQMMMMAAAwwwwAADTDfHki/JXvl6zOw9iniQtaSRvPfHWmNqb8wrZis574+bX8djx9TeGBj3DpXSEzC1FxhggHGncW6fATNzj0kBpustJwPnfPzXa3KE6brKnQfMTnItuS8FZhvQgQ72mhxhQp9QBQwwy8BE9YISYKaaJGFG94IcYVR6QY4wKr0gRxiVBwIGGGDmgtHqR9nBTNWHkoSZoh/pXG8HM5DQWXlmLdl57Pvsz/Xduwm41qdDe5Z8xUzVj2rJreRy4LwXyY3kwdqPkun3rhJgTp3bb8CM6EfAAAPMbDAbyYXnRTxLrkqBUekFOcKY/kxjCSaqF5QAY+r3JsAAAwwwM/ej5GGm6kfJwyzVl5KD0epH2cHwf77AAJMfTMz3lV6dfqE1tvYG/CHrJ7XksU8dcf8k9vKdSMX3GGCAYYABBhhggLEw3wIMAEGAPGvWVe6yAAAAAElFTkSuQmCC');
}
.demo-welcome__item_list {
background-color: var(--demo-welcome__item_list);
}
.demo-welcome__item_list:before {
background-color: var(--demo-welcome__item_list-before);
}
.demo-welcome__item_list:after {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADkAAAA3CAYAAAC2EuL1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowMkRFQUYyNjRGM0QxMUU2QkQ3Qjg1QzA3RjI0MTlFRiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowMkRFQUYyNzRGM0QxMUU2QkQ3Qjg1QzA3RjI0MTlFRiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjAyREVBRjI0NEYzRDExRTZCRDdCODVDMDdGMjQxOUVGIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjAyREVBRjI1NEYzRDExRTZCRDdCODVDMDdGMjQxOUVGIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+gtbqnAAABZpJREFUeNrMmnuIV0UUx+9vLTVTk1Bho11i10ebuQlWS2VZasL6jxSiEAjZQxKzB7ElBUHWH7GrWalbQaVFEa5roZL+fOW6GllpD3ssuYa2rmW/KNtHmZt1OwPnwuE0z3tnfuyB7x+/uTNz7+d3586cc2ZycRxHGhsHagdpKwWyStBc0DTQBNBoUB+oAGoF3Qf606onAanQDaAu0JugAZp6vjUG1AT6J5bbH6DpLn2qLkwBdZOON4AGFgHwXtCZWG29oJtd+5UV3gjqkdzghcCA9bHeevDZoqyQN+G/JbOOgIDPGQC7cHRFWSFLQIc1NwoFeb8B8HfQ9Q795UxvshT0jeJmp0BlngEng84aAGsc+rsHVGfzTY4EHVDc9HuPoOIf/1QD+C9+Prb9LcI2B21n1xKcph8FLQSdCAA6wzBMXT6PBxEwxqXnQhtIrrEBQF8yQJ4Djbfop07S9oo0kAlop0fQA7HZfgBVaPp4QtHuurSQQuNAJz2BfhnbmRi2lZL2yzRtxmSBjHAI/egBdHdsbydwJCVtnzVMWBdkhfQF2hC7mXAI1oJaDfW+tp1dbXQ56KcMoFPiMPaMT0ihKnQS0oK2eQb8G1TO71OSMeZrw3ivgL8rQC2gMsv2WzzHoI2gDpd40kViXfrZ8Y1OxO/Ml30HGuYST6bRBFDBEvRS5lxktYLOcfAdUVxpAToK9K1HwE78g6NiQQpVa0AvAn3sEbAVI6eo2JAq0LGWDkAHhlg6+w30sG3uKWfI1mWxq0C7QCMd2hwC1YJ6QbNAM0ETMVN3Bmfz7aAmUI9tpyEhhU3C9OEwi7qHcTn61fdDlATOnZ4EdVrUOwKaEQIwNORloP2gKkM98SdMB/0S6kFCDddqUB5UaqjXBboadDTkcArxJqeC9loAChuOE0xY87x03GbIgKvivyXYXuRm1mFg/hbP1fjIu2bVQszL2Fie1RWgj0tSIntBQ/oL5JMOb+5dTEfeqfhTBPAhsuHTkhU0K5zwONY4AIoM/VDSfoEENI/X5pNrH2QBzQI4GLTRMVKokDjrnZKNnRqyy5XkU3elBU0LOAKHka31gW5hfQxh32Af802rSeI4se08SRUKstQhnZjYYkk/K8n11fjwefbmqyT51TyOomCQIu96zBHwVUVfLSxkGoRvt4WlIpMc6tOkfBvW9w55DQufbOwjzQ71YlZ3M9Ydzobxccwk8Le/1Xb32xZwpmL3WWenyMOptJy1acIZWwTXn5PydvxMxNLzCil/3wbUBvAOwx6izM46bH1z0HUIMwoTxYl9hWVix+0NUr7JBGp6gIfIFO5iSxy/9RWs/csIegm+xcQ+w7c8AA9rJPaeDlS3Qbo8Zd5lradzAyuwvBx3t+h3PhShtpDyjSpQ2c3Ox7M7aexgmnVMA7qMnO2hu2l7cCYWS8lOUt6Mz6+FHIwfc9rcZ7kHP3gl63cpSWAX2DIyEGH3SSYvKSRfjF1M+Ji3eoxoOOgDWD4JdJp9i+fhd/oJKV9PQX0ACnvMc1wq5oTnWWRyN16rYdsL7yDQxeyITlIeJR02K46XtFsANsvOzgQAPYfLmbg2Fc/YJfYaWXboTtnbAjRZB7ntJ5snizSAbeihhEpS5/C4GwW9nTgodP1eRfZZjpLy+ojNTondxY67/CWp000c6Cgw6IvM0ajFa7MZaAOWX0sjmkiRkn+d+ayy6H1OEQBVoGKoTsNr81jg3cgC+X2RJvG0Df3E05JrDUUEpKCryDP0kqMsCxSemXDuK0WFLxxn0h1xcQ/5ctDVbHKcjNeekswXZcnsutQBcI+P7JkH0DXMCall0YnwcUfTdVLkNo9YAO7uB4AUtFHxnB9ieuZ/Hk+F4STGhn4EqAPdKUtIc7fuEYzKu3EYbMWseK6fAVLQOnx79aoo5D8BBgAwEUe7YtuSDQAAAABJRU5ErkJggg==')
}
.demo-welcome__item_other {
background-color: var(--demo-welcome__item_other);
}
.demo-welcome__item_other:before {
background-color: var(--demo-welcome__item_other-before);
}
.demo-welcome__item_other:after {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABGCAYAAABxLuKEAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoyMDJCRjlGODJGQjExMUU1OEFENzlFRTczQzY2M0NCQiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoyMDJCRjlGOTJGQjExMUU1OEFENzlFRTczQzY2M0NCQiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjIwMkJGOUY2MkZCMTExRTU4QUQ3OUVFNzNDNjYzQ0JCIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjIwMkJGOUY3MkZCMTExRTU4QUQ3OUVFNzNDNjYzQ0JCIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+emlN5gAABVxJREFUeNrsm2loFVcUx8ctpIIaq1FTMbGoVWyC4o7Yihql1QZqGxUVoVqpC0W/adBaqKJdvrQFEVpRgta2VEytVSJaRYNLXKoYI/aDjSaaGvctMbRWX/+Hd8RhOvfOvDf3zgx4D/xg3mx35j93Oefc+1okEgnL2P+tpZHACGOEMcIYYYwwRhgjjBHGCBOGvQuOgUdgeRQP0DqGoqwEK3i7FnwXxUO0iFmsNAn8Ss8F7oAhoMY0Jcv6mEUh+zQqUeJWYwpAFW8/Ad3ADdP5WtYY23ZNlKLETZh823azGa6fWVfjx7jbi0YYd7tj274f9cPodvBeATPBW6AHuAp+A6XgrOPc1Xz+Q7DEcawzeI/9nF58n11gC/hTy5PTcK2BQrAbPEmI7RCYBV6Q3GcYKAXNgnvQ/Q+CGaClyndQ7ccMBl+BUSk2oa2ggkOA9mAgeIfv59fOcVy1g753XBy8tuBzsDAG/VYlmGdzFiMTpj8oA31j1JH/w+HFF+nWnqDCvAF+Au1imr6ggHQGaAxzuJ4KfhGIUhmBCKdd9hWBgyA7rFFpLPhbMFKcBpngbCI82w86gCuC42dAdirvmI4ofcBdyfD5Gp83EjwOQZRHIJ/LnOwhXoYuYdqAk5LCf3Ccvy4EYb52lPlzCucqE6ZEUmgTyHWcT9W7XqMo10GWo8zu4J6kRheqFqarpECyFYLrijUKM1dQ5kLJNee55isTZo2ksEvc4Yqu3aFBlBOSMID2H5ZcO0eVMK3BNUlBUzyu7wEeKBSFmsQIjzLzJSNntSphJnj09n7usVihMKU+y1wluccQ2bV+0w7jPYLAz3zcoxW76hn8+ziHEn5sLujtKHOpj+v+Zdze801wMqiDV6Ghj6BqPtxH2W97pC/StXIVaYe/QI4GN76WUwu3BMd7squfpansnkFjpU6a4ps8sMk2yWa3DA5QszSV3UlFEJmhMfibCEpc9lPKYKjGctuqEOahy77rYJ+VXJEQ1FaB0bbfk8EiBfelGc06H8n3tIW56LKPUg6FnH5oDPgCNGL9aCWnZV8GGwXNK9VZh7HcXPcI+pjAwpxy2fc0r7udq3xVwBchUb5X1K8cASM4F0Pv2NHlnBMq8jHzBEPeIId3TDHKxUR0VsleuD1UWCA4d7qK4Tqbh2yno7QNFLvUQqrC4zjbT8P8qxrmsG5ayVVXdfz1K1zmmGg4PsMzD3ZrAi9JJ/ZSCCLLBMoX+bi2VkPt2Okjd3RUcO1ar2dOJee7WpBx3+xw11O1deAb0GDbd4GnY94PcN813M84rZmPKc35bhJ8gQsgL80as8B2XmfQ0fZ7VJo1ZqbkuhIdM5E0h1xtuS/ZqGNn7ZzLsVxJH3NT0tYzuS8Q+VYNLvupfysXOKWH2V96rGOW4HVJnoNyLlM1zYf7fbYmwbNdBjk6ZwmI2R4R72ZHkwiDiaBRkhsuCGtSfw5YL3ESqYl8BDZwTkRkuZIJsdsCr9tpH4IvBc21nmdMq8NcBjJJMsdkTz5Pk+RnZVMsWzzKp0m0rZLrD4Bu6bxb0JUJtHhnOGfjRNaP46A/+Mt2UODctQEfcEdfLJjU/4RjuYYoFw5ROLDUZ8KbzvkWjOZalEqN6c7l1HjUkoJEzBYOkfu/jHO0mT7Ov8rDbi/BcVqOthd0AQOs5JJXUdR9jGtJuYoX0bUynF5kPnfQeRqTTU0c3a9VvcJC95J5+rojreTfbAo9vrhfuwL2c/+2U5BEi70wTiOPeRg3iz5WciVnDg/XrTgP84CH91vccV62kkvoqVn9znGUdovb33JiY+avf0YYI4wRxghjhDHCGGGMMEaY58P+E2AAPB7bHdBP69oAAAAASUVORK5CYII=');
}
/* Demo Page */
.demo-page {
width: 100%;
height: 100%;
display: flex;
position: relative;
}
.demo-content {
display: flex;
flex: 1;
overflow: hidden;
}
@media screen and (min-width: 1000px) {
.demo-content_container {
flex-direction: row;
padding: 1rem;
}
.demo-content__function {
max-width: 50%;
}
.demo-content__code {
margin-left: 15px;
}
}
@media screen and (max-width: 999px) {
.demo-content_container {
flex-direction: column;
padding: 1rem 0 0;
}
.demo-content__function {
max-width: 100%;
}
.demo-content__code {
margin-top: 15px;
}
}
/*-----------
--------------*/
.demo-content__present{
max-width: 100%;
position: relative;
flex: 1 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
.demo-content__present .toolbar-container {
flex: none;
}
/*-------------------------*/
.demo-content__attributes{
position: relative;
padding: 10px;
margin-top: 15px;
box-shadow: 0 1px 3px var(--demo-box-sh1), 0 1px 2px var(--demo-box-sh2);
overflow: auto;
flex: 1;
background-color: var(--theme-colors__main);
display: flex;
}
.demo-content__attributes:empty {
display: none ;
}
.demo-content_container {
flex: 1;
display: flex;
justify-content: space-between;
overflow: hidden;
}
.demo-content__function {
width: 100%;
max-width: 100%;
position: relative;
padding: 10px;
box-shadow: 0 1px 3px var(--demo-box-sh1), 0 1px 2px var(--demo-box-sh2);
overflow: auto;
flex: 1 1;
background-color: var(--theme-colors__main);
min-height: 30%;
}
.demo-content__description {
font-size: 1.5rem;
line-height: 1.5rem;
flex: 2;
}
.demo-content__toolbar {
flex: 1 0 40px;
overflow: hidden;
}
.demo-content__toolbar .toolbar-menu-actions{
margin-left: auto;
}
.demo-content__toolbar .toolbar-buttons_container__const{
margin-left: unset;
}
.demo-content__code {
max-width: 45%;
overflow: auto;
box-shadow: 0 1px 3px var(--demo-box-sh1), 0 1px 2px var(--demo-box-sh2);
flex: 1 1;
}
.demo-content__code pre {
margin: 0 ;
height: 100%;
}
.demo-content__code .code-editor,.demo-content__code .dev-codemirror {
height: 100%;
}
.demo-cases {
position: absolute;
right:0;
top:0;
width: 250px;
height: 100%;
overflow: auto;
padding: 20px;
border-left: solid 1px var(--theme-colors__main_strongest);
}
.h3-demo{
line-height: 14px;
font-size: 13px;
font-family: monospace;
font-weight: 500;
color: var(--h3-demo-color);
cursor: default;
position: relative;
}
.editor + .h3-demo{
margin-top: 1em;
}
.demo-list-canvas {
position: absolute;
left: 0;
top: 0;
right: 0;
height: 100%;
overflow-y: auto;
}
.demo-list-canvas__view {
position: relative;
height: 300px;
min-width: 400px;
}
.demo-list-canvas__view_search {
position: relative;
height: 300px;
}
.demo-list-scrollbar {
position: absolute;
right: 0;
top: 0;
width: 12px;
height: 100%;
}
.demo-list-search {
float: right;
width: 250px;
}
.demo-list-container {
border: solid thin var(--demo-list-container-brdr-color);
position: absolute;
top: 45px;
bottom: 0;
left: 0;
right: 0;
}
.demo-list-container__scrollbar {
position: absolute;
right: 0;
top: 0;
width: 12px;
bottom: 0;
}
.demo-list-container__search {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow-y: auto;
}
.l-field_textarea {
height: auto;
}
.demo-popup {
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 400px;
height: 100px;
background-color: var(--theme-colors__main);
}
.message-service__button {
display: block;
margin-top: 10px;
}
.localization__header {
font-size: 14px;
font-weight: 600;
margin: 10px 0;
}
.l-item {
font-weight: 500;
}
.loading-behavior-view {
height: 100%;
width: 100%;
}
.demo-view-region{
float: none ;
width: 100%;
height: 100%;
overflow: auto;
padding: 0 10px;
}
.demo-split-panel{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 300;
}
.demo-split-panel_left{
background: var(--demo-split-panel_left-bgc);
}
.demo-split-panel_right{
background: var(--demo-split-panel_right-bgc);
}
/* Views used on demo pages */
/* ------------------------------ Profile navigation bubble ------------------------------ */
.nav-profile_test {
width: 300px;
padding: 18px 20px 0;
}
.nav-profile {
width: 300px;
padding: 18px 20px 0;
position: fixed;
top: 53px;
right: 9px;
border: 1px solid var(--theme-colors__main_strongest);
background: var(--theme-colors__main);
z-index: 180;
display: none;
}
.nav-profile:before {
height: 10px;
background: no-repeat 0 100% url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAYCAYAAADzoH0MAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3FpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDoxYmNlMTA1YS1kOTcyLTE1NDctYjFhZC1iMTQxNjRiYzYyYjMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QURCN0IxNzE2RTVEMTFFNDk2QTdCMzNBN0RDNjU5NDciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QURCN0IxNzA2RTVEMTFFNDk2QTdCMzNBN0RDNjU5NDciIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjljNmMwOWQ3LWFlYzItZmE0YS05YWI3LTRmNjMyYTZlNDBlNSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoxYmNlMTA1YS1kOTcyLTE1NDctYjFhZC1iMTQxNjRiYzYyYjMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz64Ue/dAAABj0lEQVR42tySzUrDQBDHN5ttmq8mKcmmaW0PHj36ApYKHsWjID6AoHgQ8eLBkwi9CB6lF/E5VPoM3kPqsfRQeil+tOuMRCm2Iam5ObBksjP/38zujiSEIMrZI4lNkGwmvbU3vxz6O5BFPPtD0xLSYjRrYhKYZqyW2BVb5rwLE/AV8hglOe0fAFi3+5QLkPsVEucAOsNYMf59bTZbH5nvAMQyfMr1euMS1hX4bryXDoBE3LODoHaoafqxrhtH1WrtFIGLIHSB2OK8smua5jnnXMJlmqWTIKgeIDjOmQdAAOfe8Dy+bVnWNQhZoVAgjDECPgXIhe9X9rHALITOiHXHKW+UStaN67pFRVF+qiAIgRBrQ4Ed2DK/IXKr1USxCsF11/XuQOzruj53WbIsE4CyyWSyJUnS83g8fun1onekFOGi1kB87zjOimEYiW+uqirxPM+wbecWu8Wu4ZxKg3O/A+dehZU6OJqmEeiyDG4HhnCPhGH4MBgMxLI2Go1EFEUh6ff7Yjqdir/YcDgUnwIMAE9Vza6XoQGiAAAAAElFTkSuQmCC');
content: '';
width: 0;
position: absolute;
top: -27px;
right: 6px;
border: solid 13px rgba(0, 0, 0, 0);
border-bottom-color: rgba(0, 0, 0, .25);
}
.nav-profile:after {
display: none;
content: '';
width: 0;
position: absolute;
top: -26px;
right: 6px;
border: solid 13px rgba(0, 0, 0, 0);
border-bottom-color: var(--theme-colors__main);
}
.nav-profile__user {
padding: 0 0 15px 0;
overflow: hidden;
position: relative;
}
.nav-profile__avatar {
width: 100px;
height: 100px;
margin-right: 10px;
float: left;
}
.nav-profile__avatar .user-avatar {
top: 0;
left: 0;
}
.nav-profile__name {
margin: 18px 0 3px;
font-size: 16px;
font-weight: 500;
line-height: 20px;
color: var(--theme-colors__text);
}
.nav-profile__links {
padding: 10px 0;
border-top: 1px solid var(--theme-colors__main_strongest);
border-bottom: 1px solid var(--theme-colors__main_strongest);
}
.nav-profile__link {
font-size: 14px;
line-height: 28px;
font-weight: 500;
display: block;
}
.nav-profile__logout {
padding-left: 40px;
color: var(--theme-colors__primary);
font-size: 16px;
line-height: 60px;
display: inline-block;
cursor: pointer;
background: no-repeat 0 50% url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAYCAYAAAARfGZ1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAWtJREFUeNq0lkFnA0EYhrMzmlMISyml9NTfUHJaltLaQzWn/oPSU+iPCKXX/oAcqtUSDSWE9pJLf0IopZRSQq6jfb96NzaSlZnk6/AQZr8nM7PfvEm00XqpBIwfEPk+bCr/OMrkcaAn9pFbcAU6gfIO62yZXCZuwR5oBsqbrLsvfkFR3gZVcAQmgfIJ6yw9M/IEZOAUuBXfn2N9Rt9UfgnOwXjNBpH6M/r+5A1OPCl1YJ+7aBhu40a5xe/AoeH5DJTlsvoDkW+Dd2X5G9gxvF3fynLxxSb/oCwX31jkH7IFzyLfRNyVoxH5c970iiOVlyryB3CiLBdfV+RDZoLW6hP6hoa36QJcg/qa4jo94nOm0PQ95rJdUWxZ36NvJnJb3MUjqAWKa6xz9MzluUwcgxF4Zeb4jIzPj1g/jeyo5Nc/Zeg7htqAEfEFNnkvEnZFlWfcn7sUS/5apFzZPjNoC3zy4kmXdRdJ8/ErwACTxklVKUyU0QAAAABJRU5ErkJggg==);
}
.nav-profile__logout:hover {
color: var(--theme-colors__primary_fade);
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAYCAYAAAARfGZ1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAWtJREFUeNq0lkFnA0EUxzcz5BTCUkopPfUzlJyWpaT2UM2p36D0VPohSuk1HyCHSiREQwmhp1z6EUIppZQSch3t/8V/240kNZO8Pn4sM++3M7NvXlKKml9RQMjkku9kE/1jrJPHgZ7YR27BHWgFylvMs+vkMtAGh6ARKG8wr1t8QVF+A8rgBMwC5TPmWXoW5AnIwDlwG34/x/yMvh/5LbgE0y0LRPIv6JvLaxx4VKrAIXdRM9zGvXKJd0Dd8HxGynJZ/bHI98CrsvwF7Bverk9lufhikz8oy8U3FfmbbMEzybcjHsjRiPwpL3rFSOWjirwHzpTl4uuLfMyeoLX6hL6x4W26Bk1Q3VJcpUd8zhSKfsC+bDcUW+YP6FtouVfcxQOoBIorzHP0LPVzGTgFE/DMnuMTGedPmO9+63b1r3/Kpu/Y1EZsER9gh/ciYVWUecbD5Uvx91+LlCs7Yg/aBe+8eFJl/VXSPL4FGAArCkpvl7H8hwAAAABJRU5ErkJggg==);
}
.demo-content_wrapper {
display: flex;
flex-flow: column nowrap;
flex: 1 1 100%;
min-width: 0;
overflow: hidden;
width: 100%;
height: 100%;
background: var(--theme-colors__background);
}
/*-----//------*/
.editor_container, .canvas-wrap {
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
overflow: auto;
}
.editor-region-wrp{
max-height: 100%;
width: 100%;
flex: 0 1 auto;
display: flex;
}
.body-container {
display: flex;
flex-direction: column;
flex: 1;
width: 100%;
overflow: hidden;
}
.header-content {
display: flex;
flex-direction: row;
align-items: center;
padding: 1rem 1rem 0 1rem;
height: 3rem;
}
/* resizer */
.left-menu__resizer{
cursor: e-resize;
top: 0;
bottom: 0;
width: 1px;
padding-left: 5px;
right: 0;
position: absolute;
z-index: 5;
box-shadow: 0 1px 3px var(--demo-box-sh1), 0 1px 2px var(--demo-box-sh2);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.left-menu__resizer:before,
.left-menu__resizer:after{
content: '';
width: 1px;
height: 20px;
position: absolute;
left: 1px;
top:50%;
margin-top: -10px;
visibility: hidden;
}
.left-menu__resizer:after{
left: auto;
right: -5px;
}
.left-menu__resizer:hover:before,
.left-menu__resizer:hover:after{
visibility: visible;
}
.left-menu__resizer{
border-right: 1px solid transparent;
}
.left-menu__resizer:hover{
border-right-color: var(--left-menu__resizer-b-color);
}
.left-menu__resizer:before,
.left-menu__resizer:after{
background-color: var(--left-menu__resizer-b-color);
}
/* end of resizer */