@vitrosoftware/common-ui-ts 1.1.12 → 1.1.14

package/css/std/controls/login/login.css

@@ -0,0 +1,230 @@
+.vitro-login-layout {
+    width: 100vw;
+    height: 100vh;
+    background: #347FDE;
+    position: relative;
+    background-size: cover;
+    background-position: center;
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/login/img/login-background.png');
+}
+
+.vitro-login-layout::after {
+    content: '';
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    z-index: 10;
+    top: 0;
+    left: 0;
+    opacity: 0.3;
+    background: #000;
+}
+
+.vitro-form-login {
+    width: 468px;
+    height: 658px;
+    padding: 52px 36px 24px 36px;
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: #fff;
+    position: absolute;
+    z-index: 100;
+    top: calc(50% - 329px);
+    left: calc(50% - 234px);
+    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.18), 0px 0px 4px 0px rgba(0, 0, 0, 0.14);
+}
+
+.vitro-logo {
+    width: 165px;
+    height: 57px;
+    margin-bottom: 66px;
+    background-size: 100%;
+    background-position: center;
+    /* vitro-logo.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 165 57' fill='none'%3E%3Cpath d='M10.7049 0L24.7238 44.8652H25.2762L39.2688 0H50L31.01 57H18.9637L0 0H10.7049Z' fill='%231E1E1E'/%3E%3Cpath d='M55 0C55 0 59.1261 0 60.1967 0C61.5233 0 65 0 65 0C65 0 65 3.9151 65 5.41879C65 6.90414 65 10 65 10L55 0Z' fill='%231E1E1E'/%3E%3Cpath d='M55 57V13H65V57H55Z' fill='%2331C1FF'/%3E%3Cpath d='M92.2323 13.3214V21.1746H74.0005V13.3214H92.2323ZM74.0004 3H83.9252V43.444C83.9252 44.809 84.1262 45.8561 84.5283 46.5853C84.9487 47.2959 85.497 47.782 86.1733 48.0438C86.8496 48.3056 87.599 48.4364 88.4215 48.4364C89.92 48.4364 91.9277 48.4257 93.3276 48.0438L94 55.9812C91.9592 56.7011 89.313 56.9336 87.1603 56.9908C84.6745 57.0656 82.4355 56.6823 80.4433 55.8409C78.451 54.9808 76.87 53.6532 75.7002 51.8582C74.5488 50.0632 73.9822 47.8194 74.0004 45.1269V3Z' fill='%2331C1FF'/%3E%3Cpath d='M100 57V13.6213H109.216V20.8511H109.636C110.371 18.347 111.631 16.4172 113.417 15.0616C115.22 13.6872 117.276 13 119.587 13C120.112 13 120.698 13.0282 121.346 13.0847C122.011 13.1224 122.562 13.1883 123 13.2824V22.6868C122.597 22.5362 121.959 22.4044 121.083 22.2914C120.226 22.1596 119.394 22.0937 118.589 22.0937C116.856 22.0937 115.298 22.4985 113.916 23.3081C112.55 24.0988 111.474 25.2003 110.686 26.6123C109.898 28.0244 109.505 29.653 109.505 31.4981V57H100Z' fill='%231E1E1E'/%3E%3Cpath d='M145.5 57C141.526 57 138.082 56.0845 135.167 54.2535C132.253 52.4224 129.992 49.8609 128.385 46.5687C126.795 43.2766 126 39.4296 126 35.0277C126 30.6259 126.795 26.7696 128.385 23.459C129.992 20.1484 132.253 17.5776 135.167 15.7465C138.082 13.9155 141.526 13 145.5 13C149.474 13 152.918 13.9155 155.833 15.7465C158.747 17.5776 160.999 20.1484 162.589 23.459C164.196 26.7696 165 30.6259 165 35.0277C165 39.4296 164.196 43.2766 162.589 46.5687C160.999 49.8609 158.747 52.4224 155.833 54.2535C152.918 56.0845 149.474 57 145.5 57ZM145.553 48.9546C147.708 48.9546 149.51 48.335 150.958 47.0958C152.406 45.8382 153.484 44.1551 154.19 42.0467C154.914 39.9382 155.276 37.5893 155.276 35C155.276 32.3922 154.914 30.034 154.19 27.9256C153.484 25.7987 152.406 24.1063 150.958 22.8487C149.51 21.591 147.708 20.9622 145.553 20.9622C143.345 20.9622 141.508 21.591 140.042 22.8487C138.594 24.1063 137.507 25.7987 136.783 27.9256C136.077 30.034 135.724 32.3922 135.724 35C135.724 37.5893 136.077 39.9382 136.783 42.0467C137.507 44.1551 138.594 45.8382 140.042 47.0958C141.508 48.335 143.345 48.9546 145.553 48.9546Z' fill='%231E1E1E'/%3E%3C/svg%3E");
+}
+
+.vitro-title {
+    color: #222D44;
+    text-align: center;
+    font-family: 'InterMedium';
+    font-size: 32px;
+    line-height: 135%;
+    margin-bottom: 62px;
+}
+
+.vitro-flex {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 24px;
+    margin-top: 11px;
+}
+
+.vitro-link, .vitro-link:visited {
+    color: #347FDE;
+    text-align: center;
+    font-size: 16px;
+    line-height: 135%;
+    white-space: nowrap;
+    cursor: pointer;
+}
+
+.vitro-link:hover {
+    color: #3274E0;
+}
+
+.vitro-separator {
+    margin-bottom: 20px;
+    color: #4A556C;
+    text-align: center;
+    font-size: 18px;
+    line-height: 135%;
+    width: fit-content;
+    margin-top: auto;
+}
+
+.vitro-separator::before,
+.vitro-separator::after {
+    content: '';
+    display: inline-block;
+    height: 1px;
+    width: 150px;
+    background: #E4E6EC;
+    vertical-align: middle;
+}
+
+.vitro-separator::before {
+    margin-right: 30px;
+}
+
+.vitro-separator::after {
+    margin-left: 30px;
+}
+
+.vitro-login-control {
+    width: 100%;
+    position: relative;
+}
+
+.vitro-login-control.vitro-error + .vitro-login-control.vitro-error > div,
+.vitro-login-control + .vitro-login-control.vitro-error > div {
+    margin-bottom: 0px !important;
+}
+
+.vitro-control > div {
+    font-size: 16px !important;
+    line-height: 27px !important;
+    top: -16px !important;
+}
+
+.vitro-control input {
+    height: 48px !important;
+    font-size: 18px !important;
+    line-height: 135% !important;
+    padding: 12px 44px 12px 20px !important;
+    box-shadow: 0px 2px 6px 0px rgba(19, 18, 66, 0.07);
+}
+
+.vitro-control input::placeholder {
+    color: #6C757D;
+    font-family: 'InterRegular';
+    font-size: 18px;
+    font-weight: 400;
+    line-height: 135%;
+}
+
+.vitro-button {
+    font-family: 'InterMedium' !important;
+    width: 100%;
+    height: 48px !important;
+    font-size: 18px !important;
+    line-height: 135%;
+    box-shadow: 0px 4px 16px 0px rgba(52, 117, 199, 0.15);
+}
+
+.vitro-button-show-password, 
+.vitro-button-hide-password {
+    position: absolute;
+    top: 12px;
+    right: 20px;
+    width: 24px;
+    height: 24px;
+    background-size: 100%;
+    background-position: center;
+    cursor: pointer;
+}
+
+.vitro-button-show-password {
+    /* show-password.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='visible--eye-eyeball-open-view'%3E%3Cpath id='Vector' d='M22.6767 10.7074C22.961 11.0618 23.1183 11.5222 23.1183 11.9995C23.1183 12.4769 22.961 12.9373 22.6767 13.2917C20.8767 15.471 16.7795 19.7139 11.9967 19.7139C7.21381 19.7139 3.11667 15.471 1.31667 13.2917C1.03237 12.9373 0.875 12.4769 0.875 11.9995C0.875 11.5222 1.03237 11.0618 1.31667 10.7074C3.11667 8.52807 7.21381 4.28516 11.9967 4.28516C16.7795 4.28516 20.8767 8.52807 22.6767 10.7074Z' stroke='%238E98A3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath id='Vector_2' d='M11.9989 15.4275C13.8924 15.4275 15.4275 13.8924 15.4275 11.9989C15.4275 10.1053 13.8924 8.57031 11.9989 8.57031C10.1053 8.57031 8.57031 10.1053 8.57031 11.9989C8.57031 13.8924 10.1053 15.4275 11.9989 15.4275Z' stroke='%238E98A3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E%0A");
+}
+
+.vitro-button-hide-password {
+    /* hide-password.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M22.6767 10.7074C22.961 11.0618 23.1183 11.5222 23.1183 11.9995C23.1183 12.4769 22.961 12.9373 22.6767 13.2917C20.8767 15.471 16.7795 19.7139 11.9967 19.7139C7.21381 19.7139 3.11667 15.471 1.31667 13.2917C1.03237 12.9373 0.875 12.4769 0.875 11.9995C0.875 11.5222 1.03237 11.0618 1.31667 10.7074C3.11667 8.52807 7.21381 4.28516 11.9967 4.28516C16.7795 4.28516 20.8767 8.52807 22.6767 10.7074Z' stroke='%238E98A3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3.96875 20L19.9687 4' stroke='%238E98A3' stroke-linecap='round'/%3E%3Cpath d='M11.9989 15.4275C13.8924 15.4275 15.4275 13.8924 15.4275 11.9989C15.4275 10.1053 13.8924 8.57031 11.9989 8.57031C10.1053 8.57031 8.57031 10.1053 8.57031 11.9989C8.57031 13.8924 10.1053 15.4275 11.9989 15.4275Z' stroke='%238E98A3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+}
+
+.vitro-footer {
+    position: absolute;
+    bottom: 12px;
+    left: 0;
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    z-index: 101;
+}
+
+.vitro-link-list {
+    display: flex;
+    align-items: center;
+    list-style: none;
+    margin-bottom: 0;
+    padding: 0;
+}
+
+.vitro-link-list > li, .vitro-copyright {
+    color: #fff;
+    text-align: center;
+    font-size: 14px;
+    line-height: 135%; 
+    white-space: nowrap;
+    margin-right: 24px;
+    display: flex;
+    align-items: center
+}
+
+.vitro-link-list a,
+.vitro-link-list a:visited, 
+.vitro-link-list a:hover {
+    color: #fff;
+    cursor: pointer;
+}
+
+.vitro-language {
+    height: 24px;
+    width: 24px;
+    margin-right: 24px;
+    background-size: 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+    /* ru.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Frame 1947'%3E%3Cg clip-path='url(%23clip0_952_30237)'%3E%3Cpath id='Vector' d='M0 5.45312H22V10.544H0V5.45312Z' fill='%231B75BB'/%3E%3Cpath id='Vector_2' d='M18.5625 0H3.4375C1.15947 0 0 1.79091 0 4V5.45455H22V4C22 1.79091 20.8405 0 18.5625 0Z' fill='white'/%3E%3Cpath id='Vector_3' d='M0 12.0014C0 14.2105 1.15947 16.0014 3.4375 16.0014H18.5625C20.8405 16.0014 22 14.2105 22 12.0014V10.5469H0V12.0014Z' fill='%23D13438'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_952_30237'%3E%3Crect width='22' height='16' rx='4' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
+}
+
+.vitro-copyright::before {
+    content: '';
+    display: inline-block;
+    margin-right: 4px;
+    height: 14px;
+    width: 14px;
+    background-position: center;
+    background-size: 100%;
+    background-repeat: no-repeat;
+    /* copyright.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.98598 5.63043H9.12827C9.07755 5.38373 8.98878 5.167 8.86197 4.98024C8.73746 4.79348 8.58529 4.63669 8.40545 4.50988C8.22791 4.38076 8.03078 4.28393 7.81404 4.21937C7.59731 4.15481 7.37136 4.12253 7.13618 4.12253C6.70732 4.12253 6.31882 4.2309 5.97066 4.44763C5.62481 4.66436 5.34929 4.9837 5.14408 5.40563C4.94119 5.82757 4.83974 6.34519 4.83974 6.9585C4.83974 7.5718 4.94119 8.08943 5.14408 8.51136C5.34929 8.9333 5.62481 9.25264 5.97066 9.46937C6.31882 9.6861 6.70732 9.79447 7.13618 9.79447C7.37136 9.79447 7.59731 9.76219 7.81404 9.69763C8.03078 9.63307 8.22791 9.53738 8.40545 9.41057C8.58529 9.28146 8.73746 9.12352 8.86197 8.93676C8.98878 8.74769 9.07755 8.53096 9.12827 8.28656H9.98598C9.92142 8.64855 9.80383 8.9725 9.63321 9.2584C9.46259 9.5443 9.25047 9.78755 8.99685 9.98814C8.74323 10.1864 8.45848 10.3375 8.1426 10.4412C7.82903 10.545 7.49356 10.5968 7.13618 10.5968C6.53209 10.5968 5.99487 10.4493 5.52452 10.1542C5.05416 9.85903 4.6841 9.43939 4.41434 8.89526C4.14458 8.35112 4.0097 7.70553 4.0097 6.9585C4.0097 6.21146 4.14458 5.56588 4.41434 5.02174C4.6841 4.4776 5.05416 4.05797 5.52452 3.76285C5.99487 3.46772 6.53209 3.32016 7.13618 3.32016C7.49356 3.32016 7.82903 3.37204 8.1426 3.47579C8.45848 3.57955 8.74323 3.73172 8.99685 3.93231C9.25047 4.1306 9.46259 4.37269 9.63321 4.6586C9.80383 4.94219 9.92142 5.26614 9.98598 5.63043ZM6.99784 13.6126C6.26233 13.6126 5.56141 13.5008 4.89507 13.2772C4.23104 13.0535 3.62119 12.7376 3.06553 12.3295C2.51217 11.9237 2.03144 11.443 1.62333 10.8874C1.21754 10.334 0.902812 9.7253 0.679163 9.06126C0.455513 8.39493 0.343688 7.69401 0.343688 6.9585C0.343688 6.22299 0.455513 5.52322 0.679163 4.85919C0.902812 4.19285 1.21754 3.583 1.62333 3.02964C2.03144 2.47398 2.51217 1.99325 3.06553 1.58745C3.62119 1.17935 4.23104 0.863472 4.89507 0.639822C5.56141 0.416173 6.26233 0.304348 6.99784 0.304348C7.73335 0.304348 8.43312 0.416173 9.09715 0.639822C9.76348 0.863472 10.3733 1.17935 10.9267 1.58745C11.4824 1.99325 11.9631 2.47398 12.3689 3.02964C12.777 3.583 13.0929 4.19285 13.3165 4.85919C13.5402 5.52322 13.652 6.22299 13.652 6.9585C13.652 7.69401 13.5402 8.39493 13.3165 9.06126C13.0929 9.7253 12.777 10.334 12.3689 10.8874C11.9631 11.443 11.4824 11.9237 10.9267 12.3295C10.3733 12.7376 9.76348 13.0535 9.09715 13.2772C8.43312 13.5008 7.73335 13.6126 6.99784 13.6126ZM6.99784 12.8103C7.64573 12.8103 8.26134 12.7111 8.84468 12.5128C9.43032 12.3169 9.96638 12.039 10.4529 11.6793C10.9417 11.322 11.3648 10.9 11.7221 10.4135C12.0818 9.92474 12.3597 9.38867 12.5556 8.80534C12.7516 8.2197 12.8496 7.60408 12.8496 6.9585C12.8496 6.31061 12.7516 5.69499 12.5556 5.11166C12.3597 4.52602 12.0818 3.98995 11.7221 3.50346C11.3648 3.01466 10.9417 2.59157 10.4529 2.23419C9.96638 1.87451 9.43032 1.59667 8.84468 1.40069C8.26134 1.20471 7.64573 1.10672 6.99784 1.10672C6.34995 1.10672 5.73318 1.20471 5.14754 1.40069C4.56421 1.59667 4.02814 1.87451 3.53934 2.23419C3.05285 2.59157 2.62976 3.01466 2.27007 3.50346C1.91269 3.98995 1.63601 4.52602 1.44003 5.11166C1.24405 5.69499 1.14606 6.31061 1.14606 6.9585C1.14606 7.60408 1.24405 8.2197 1.44003 8.80534C1.63601 9.38867 1.91269 9.92474 2.27007 10.4135C2.62976 10.9 3.05285 11.322 3.53934 11.6793C4.02814 12.039 4.56421 12.3169 5.14754 12.5128C5.73318 12.7111 6.34995 12.8103 6.99784 12.8103Z' fill='white'/%3E%3C/svg%3E%0A");
+}

package/css/std/controls/lookup-picker/lookup-picker-selected-item.css

@@ -0,0 +1,4 @@
+.vitro-selected-item {
+    display: inline;
+    margin: 0 6px 0 0;
+}

package/css/std/controls/lookup-picker/lookup-picker-value-list.css

@@ -0,0 +1,52 @@
+.vitro-value-list {
+    position: absolute;
+    z-index: 1001;
+    width: 100%;
+    border-radius: 4px;
+    margin-top: 4px;
+    max-height: 300px;
+    background: #fff;
+    border-radius: 4px;
+    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.18), 0px 0px 4px 0px rgba(0, 0, 0, 0.14);
+}
+
+.vitro-value-list > :global(.ps) {
+    padding-right: 0 !important;
+}
+
+.vitro-value-list div.vitro-item {
+    padding: 8px 12px;
+    cursor: pointer;
+    border-radius: 0px;
+}
+
+.vitro-value-list div:last-child {
+    border-radius: 0 0 4px 4px;
+}
+
+.vitro-value-list div:first-child {
+    border-radius: 4px 4px 0 0;
+    padding: 0 !important;
+}
+
+.vitro-value-list div.vitro-item:hover {
+    background: #F3F8FF;
+}
+
+.vitro-value-list .vitro-placeholder-empty {
+    padding: 10px 20px;
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+    color: #C0CAD5;
+    text-align: center;
+}
+
+.vitro-keyword-highlight {
+    color: #3274E0;
+}
+
+.vitro-display-none {
+    display: none;
+}

package/css/std/controls/lookup-picker/lookup-picker.css

@@ -0,0 +1,144 @@
+.vitro-lookup-picker {
+    position: relative;
+    margin-bottom: 22px;
+}
+
+.vitro-content {
+    border: 1px solid #C0CAD5;
+    border-radius: 4px;
+    display: flex;
+    width: 100%;
+    flex-wrap: wrap;
+    align-items: center;
+    height: 40px;
+    padding: 8px 32px 8px 16px;
+    position: relative;
+}
+
+.vitro-focus .vitro-content {
+    border-color: #3274E0;
+}
+
+.vitro-focus .vitro-label {
+    color: #3274E0;
+}
+
+.vitro-read-only .vitro-content {
+    color: #4A556C;
+    font-size: 12px;
+    user-select: none;
+}
+
+.vitro-read-only input::selection {
+    background: white;
+    color: #4A556C;
+}
+
+.vitro-error .vitro-content {
+    border-color: #D13438;
+}
+
+.vitro-error .vitro-label {
+    color: #D13438;
+}
+
+.vitro-label {
+    padding: 0 6px;
+    background: #fff;
+    z-index: 1000;
+    position: absolute;
+    left: 10px;
+    top: -10px;
+}
+
+.vitro-error-text {
+    display: flex;
+    align-items: center;
+    color: #D13438;
+    font-size: 14px;
+    line-height: 135%;
+    margin-top: 2px;
+}
+
+.vitro-focus .vitro-error-text {
+    display: none;
+}
+
+.vitro-error-text::before {
+    content: '';
+    display: inline-block;
+    height: 16px;
+    width: 16px;
+    margin-right: 4px;
+    background-size: 100%;
+    background-position: center;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 17' fill='none'%3E%3Cpath d='M7.99888 1.07255C12.1016 1.07255 15.4275 4.39843 15.4275 8.50112C15.4275 12.6038 12.1016 15.9297 7.99888 15.9297C3.8962 15.9297 0.570312 12.6038 0.570312 8.50112C0.570312 4.39843 3.8962 1.07255 7.99888 1.07255Z' stroke='%23D13438' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 9.5L8 4.5' stroke='%23D13438' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.00446 11.6434C7.84667 11.6434 7.71875 11.7713 7.71875 11.9291C7.71875 12.0869 7.84667 12.2148 8.00446 12.2148' stroke='%23D13438' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.00781 11.6434C8.16561 11.6434 8.29353 11.7713 8.29353 11.9291C8.29353 12.0869 8.16561 12.2148 8.00781 12.2148' stroke='%23D13438' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+}
+
+.vitro-button-copy {
+    height: 16px;
+    width: 16px;
+    display: inline-block;
+    position: absolute;
+    right: 8px;
+    top: calc(50% - 8px);
+    /* copy.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='copy-icon'%3E%3Cpath id='Vector' d='M4.33594 4.14517V3.27214C4.33594 2.0877 4.75567 1.66797 5.9401 1.66797H12.7318C13.9162 1.66797 14.3359 2.0877 14.3359 3.27214V10.0638C14.3359 11.2482 13.9162 11.668 12.7318 11.668H11.8414' stroke='%238E98A3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath id='Vector_2' d='M10.0599 4.33203H3.26823C2.0838 4.33203 1.66406 4.75176 1.66406 5.9362V12.7279C1.66406 13.9123 2.0838 14.332 3.26823 14.332H10.0599C11.2443 14.332 11.6641 13.9123 11.6641 12.7279V5.9362C11.6641 4.75176 11.2443 4.33203 10.0599 4.33203Z' stroke='%238E98A3' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E%0A");
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 100%;
+    cursor: pointer;
+}
+
+.vitro-content > input {
+    border: none;
+    background: transparent;
+    flex: 1 1;
+    min-width: 100px;
+    color: #222D44;
+    font-size: 14px;
+    line-height: 16px;
+}
+
+.vitro-right {
+    position: absolute;
+    right: 16px;
+    top: calc(50% - 12px);
+    display: flex;
+}
+
+.vitro-button-close,
+.vitro-button-collapse-up,
+.vitro-button-collapse-bottom {
+    width: 24px;
+    height: 24px;
+    margin-left: 4px;
+    background-size: 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+.vitro-button-close {
+    /* close-red.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='iconoir:cancel'%3E%3Cpath id='Vector' d='M6.75781 17.2438L12.0008 12.0008L17.2438 17.2438M17.2438 6.75781L11.9998 12.0008L6.75781 6.75781' stroke='%23D13438' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E%0A");
+}
+
+.vitro-button-collapse-bottom {
+    /* collapse-bottom.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Chevron-dropdown-Big'%3E%3Cpath id='Vector 9' d='M19.5 9L12 16.5L4.5 9' stroke='%234A556C' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E%0A");
+}
+
+.vitro-button-collapse-up {
+    /* collapse-up.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 16.5L12 9L19.5 16.5' stroke='%234A556C' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+}
+
+.vitro-focus .vitro-button-collapse-up {
+    /* collapse-up-blue.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Chevron-dropdown-Big'%3E%3Cpath id='Vector 9' d='M4.5 16.5L12 9L19.5 16.5' stroke='%233274E0' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E%0A");
+}
+
+.vitro-error .vitro-button-collapse-bottom {
+    /* collapse-bottom-red.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Chevron-dropdown-Big'%3E%3Cpath id='Vector 9' d='M19.5 9L12 16.5L4.5 9' stroke='%23D13438' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E%0A");
+}

package/css/std/controls/sidebar/sidebar-item.css

@@ -0,0 +1,110 @@
+.vitro-active {
+    background-color: #DCEEFF;
+}
+
+ul > li:last-child > ul > li:last-child .vitro-active {
+    background-color: transparent;
+}
+
+.vitro-icon-text {
+    display: none;
+    color: #222D44;
+    font-size: 14px;
+    margin-left: 16px;
+}
+
+:global(.toggled.pinned) .vitro-icon-text {
+    display: inline-block;
+}
+
+.vitro-item-text {
+    display: none;
+}
+
+.vitro-active .vitro-icon-text,
+.vitro-active .vitro-item-text {
+    color: #326AD6;
+    font-weight: 500;
+    font-family: 'InterMedium';
+}
+
+.vitro-icon {
+    width: 24px;
+    height: 24px;
+}
+
+:global(.toggled.pinned) .vitro-item a {
+    width: 100%;
+}
+
+.vitro-item a > div {
+    display: flex;
+    width: fit-content;
+    align-items: center;
+}
+
+.vitro-item a {
+    text-decoration: none;
+    height: 40px;
+    width: 40px;
+    border-radius: 8px;
+    padding: 8px;
+    cursor: pointer;
+    margin-bottom: 8px;
+    display: block;
+}
+
+.vitro-active {
+    background-color: #DCEEFF;
+}
+
+:global(.vitro-bottom-menu) .vitro-item-text {
+    display: block;
+    color: #4A556C;
+    font-size: 12px;
+    line-height: 12px;
+    text-align: center;
+}
+
+:global(.vitro-bottom-menu) .vitro-icon-text {
+    display: none;
+}
+
+:global(.vitro-bottom-menu) .vitro-active {
+    background: transparent;
+    position: relative;
+}
+
+:global(.vitro-bottom-menu) .vitro-active::after {
+    content: '';
+    display: block;
+    position: absolute;
+    height: 2px;
+    border-radius: 2px;
+    background: #4292F7;
+    width: 32px;
+    bottom: -8px;
+}
+
+.vitro-active .vitro-item-text {
+    color: #4A556C;
+    font-family: 'InterRegular' !important;
+}
+
+.vitro-item {
+    display: flex;
+    justify-content: center;
+}
+
+:global(.vitro-bottom-menu) .vitro-item > a {
+    background: transparent;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    width: fit-content;
+    height: 100%;
+    padding: 0;
+    margin-bottom: 0;
+}

package/css/std/controls/sidebar/sidebar.css

@@ -0,0 +1,104 @@
+.vitro-sidebar {
+    height: 100%;
+    position: fixed;
+    overflow: hidden;
+    background-color: #F7F9FC;
+    display: flex;
+    align-items: center;
+    width: 56px;
+    align-items: center;
+    flex-direction: column;
+    padding-top: 80px !important;
+    padding: 0 8px;
+    top: 0;
+}
+
+:global(.toggled) .vitro-sidebar {
+    width: 56px;
+}
+
+:global(.toggled.pinned) .vitro-sidebar {
+    width: 208px;
+}
+
+.vitro-sidebar ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+}
+
+.vitro-sidebar > ul {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.vitro-sidebar ul > li:last-child > ul > li:last-child a {
+    margin-bottom: 0;
+}
+
+.vitro-sidebar ul > li:last-child > ul > li:last-child a:hover {
+    background-color: transparent;
+}
+
+.vitro-sidebar ul > li:last-child > ul > li:last-child span {
+    color: #8D8D8D;
+    font-size: 10px;
+}
+
+.vitro-sidebar ul > li:last-child > ul > li:last-child span:hover {
+    font-weight: 400 !important;
+}
+
+:global(.vitro-bottom-menu) {
+    width: 100%;
+    z-index: 10000;
+    flex-direction: row;
+    height: 60px;
+    padding: 0 21px !important;
+    background: #fff;
+    bottom: 0;
+    top: initial;
+    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.18), 0px 0px 4px 0px rgba(0, 0, 0, 0.14);
+    border-radius: 4px 4px 0 0;
+}
+
+:global(.vitro-bottom-menu) ul {
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+}
+
+.vitro-scroll-container {
+    height: 100%;
+    flex: 0 1 auto;
+    overflow: hidden;
+    padding: 8px 0;
+}
+
+.vitro-scroll-container > ul {
+    transition: 1s all ease;
+}
+
+.vitro-button-more {
+    display: block;
+    width: 40px;
+    height: 40px;
+    min-width: 40px;
+    border: none;
+    background-color: #fff;
+    background-size: 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+    /* bottom-menu-button-more.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 41 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10.5' cy='20' r='2.5' transform='rotate(-90 10.5 20)' fill='%234A556C'/%3E%3Ccircle cx='20.5' cy='20' r='2.5' transform='rotate(-90 20.5 20)' fill='%234A556C'/%3E%3Ccircle cx='30.5' cy='20' r='2.5' transform='rotate(-90 30.5 20)' fill='%234A556C'/%3E%3C/svg%3E%0A");
+}
+
+.vitro-button-more:hover,
+.vitro-button-more:active {
+    border: none;
+    background-color: #fff;
+    outline: none;
+}