@vitrosoftware/common-ui-ts 1.1.88 → 1.1.90

package/css/std/controls/login/two-factor-authentication-form.css

@@ -0,0 +1,144 @@
+.vitro-two-factor-authentication-form {
+    width: 100%;
+    height: 486px;
+    max-height: 486px;
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.vitro-title {
+    color: #222D44;
+    text-align: center;
+    font-family: 'InterMedium';
+    font-size: 32px;
+    line-height: 135%;
+    margin-top: 32px;
+    margin-bottom: 25px;
+}
+
+.vitro-subtitle {
+    font-size: 16px;
+    line-height: 135%;
+    color: #222D44;
+    margin-bottom: 24px;
+    text-align: center;
+}
+
+.vitro-subtitle div {
+    text-align: center;
+    white-space: nowrap;
+}
+
+.vitro-subtitle span {
+    white-space: nowrap;
+    font-family: 'InterMedium';
+}
+
+.vitro-control {
+    margin-bottom: 8px;
+}
+
+.vitro-link-resend-code {
+    font-family: 'InterMedium';
+}
+
+.vitro-link-resend-code {
+    height: 40px;
+    margin-bottom: 18px;
+}
+
+.vitro-description,
+.vitro-resend-code-description {
+    font-family: 'InterMedium';
+    font-size: 14px;
+    line-height: 135%;
+    color: #6C757D;
+    width: fit-content;
+    max-width: 259px;
+    text-align: center;
+    display: flex;
+    align-items: center;
+}
+
+.vitro-resend-code-description {
+    height: 40px;
+    margin-bottom: 18px;
+}
+
+.vitro-flex {
+    display: flex;
+    flex-direction: column;
+    align-items: baseline;
+    justify-content: space-between;
+    width: 100%;
+    flex: 1 1;
+}
+
+.vitro-clock::before {
+    content: '';
+    display: block;
+    width: 24px;
+    height: 24px;
+    flex-shrink: 0;
+    margin-right: 8px;
+    background-size: 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/login/img/clock.svg');
+}
+
+.vitro-button {
+    margin-top: 16px;
+    margin-bottom: 32px;
+}
+
+.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-email {
+    white-space: nowrap;
+    align-items: center;
+    height: 22px;
+    display: inline-flex;
+}
+
+.vitro-hidden-symbol {
+    margin-right: 3px;
+    letter-spacing: -2px;
+    font-size: 18px;
+    margin-right: 3px;
+    display: flex;
+    align-items: baseline;
+}
+
+@media (max-width: 800px) {
+
+    .vitro-two-factor-authentication-form {
+        height: 452px;
+        max-height: 452px;
+    }
+
+    .vitro-title {
+        margin-bottom: 16px;
+        margin-top: 0;
+        font-size: 24px;
+    }
+
+    .vitro-subtitle div {
+        white-space: normal;
+    }
+
+}

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

@@ -20,14 +20,6 @@
     flex-wrap: wrap;
 }
 
-.vitro-focus .vitro-content {
-    border-color: #3274E0;
-}
-
-.vitro-focus .vitro-label {
-    color: #3274E0;
-}
-
 .vitro-read-only .vitro-content {
     color: #4A556C;
     font-size: 12px;
@@ -43,6 +35,14 @@
     color: #4A556C;
 }
 
+.vitro-focus .vitro-content {
+    border-color: #3274E0;
+}
+
+.vitro-focus .vitro-label {
+    color: #3274E0;
+}
+
 .vitro-error .vitro-content {
     border-color: #D13438;
 }
@@ -52,8 +52,13 @@
 }
 
 .vitro-label {
+    color: #4A556C;
     padding: 0 6px;
-    background: #fff;
+    background: transparent;
+    background-image: linear-gradient(#fff, #fff);
+    background-size: 100% 2px;
+    background-position: 0 calc(50% + 3px);
+    background-repeat: no-repeat;
     z-index: 1;
     position: absolute;
     left: 10px;

package/css/std/controls/main/main.css

@@ -26,7 +26,7 @@
         width: calc(100% - 24px);
         margin: 0 auto;
         border-radius: 4px 4px 0px 0px;
-        height: calc(100% - 130px);
+        height: calc(100% - 136px);
         padding-bottom: 16px;
     }
 }

package/css/std/controls/sidebar/img/bottom-menu-button-next.svg

@@ -0,0 +1,3 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 26L23 20L17 14" stroke="#4A556C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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

@@ -33,11 +33,8 @@
     width: fit-content;
     align-items: center;
     overflow: hidden;
-    flex-shrink: 0;
-}
-
-ul > li:last-child > ul > li:last-child .vitro-active {
-    background-color: transparent;
+    height: 100%;
+    flex-shrink: 1;
 }
 
 .vitro-item-text {
@@ -129,18 +126,28 @@ ul > li:last-child > ul > li:last-child .vitro-active {
     display: none;
 }
 
+:global(.vitro-bottom-menu) .vitro-item a > div,
+:global(.vitro-bottom-menu) .vitro-item button > div {
+    flex-direction: column;
+    height: 100%;
+}
+
 :global(.vitro-bottom-menu) .vitro-item-text {
-    display: block;
     color: #4A556C;
-    font-size: 12px;
-    line-height: 12px;
+    font-size: 11px;
+    line-height: 11px;
     text-align: center;
     overflow: visible;
     white-space: normal;
+    margin: auto;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
 }
 
 :global(.vitro-bottom-menu) .vitro-image {
     margin-right: 0;
+    margin-bottom: 4px;
 }
 
 :global(.vitro-bottom-menu) .vitro-active {
@@ -223,6 +230,10 @@ ul > li:last-child > ul > li:last-child .vitro-active {
     width: 100% !important;
 }
 
+.vitro-popup-item-list .vitro-item:last-child {
+    margin-bottom: 16px;
+}
+
 .vitro-popup-item-list .vitro-item > a,
 .vitro-popup-item-list .vitro-item > button {
     background-color: #fff;

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

@@ -34,19 +34,6 @@
     justify-content: space-between;
 }
 
-.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;
-}
-
 .vitro-scrollbar :global(.ps__rail-y) {
     background-color: transparent !important;
     border: none;
@@ -54,21 +41,42 @@
 
 .vitro-scrollbar > div:first-child {
     padding: 0 8px;
+    display: flex;
+    flex-direction: column;
 }
 
 .vitro-sidebar-section-list {
-    height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
+    flex: 1 0;
+}
+
+.vitro-sidebar-section-list > li::before {
+    display: block;
+    content: '';
+    background: #E4E6EC;
+    margin: 0 auto;
+    min-width: 40px;
+    width: calc(100% - 16px);
+    height: 1px;
+    margin-bottom: 4px;
+}
+
+.vitro-sidebar-section-list > li:first-child::before {
+    display: none;
+}
+
+:global(.vitro-bottom-menu) .vitro-sidebar-section-list > li::before {
+    display: none;
 }
 
 :global(.vitro-bottom-menu) {
     width: 100%;
     z-index: 2;
     flex-direction: row;
-    height: 60px;
-    padding: 0 21px !important;
+    height: 66px;
+    padding: 0 0 0 12px !important;
     background: #fff;
     bottom: 0;
     top: initial;
@@ -95,22 +103,69 @@
     transition: 1s all ease;
 }
 
-.vitro-button-more {
+.vitro-button-more,
+.vitro-button-more:hover,
+.vitro-button-more:active {
     display: block;
     width: 40px;
-    height: 40px;
+    height: 100%;
     min-width: 40px;
+    outline: none;
+    border-top-right-radius: 4px;
     border: none;
-    background-color: #fff;
+    border-left: 1px solid #E4E6EC;
+    background-color: #F7F9FC;
     background-size: 100%;
     background-position: center;
     background-repeat: no-repeat;
-    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/sidebar/img/bottom-menu-button-more.svg');
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/sidebar/img/bottom-menu-button-next.svg');
 }
 
-.vitro-button-more:hover,
-.vitro-button-more:active {
-    border: none;
-    background-color: #fff;
-    outline: none;
+.vitro-logo-container {
+    width: 100%;
+    height: 40px;
+    padding: 0 8px;
+    margin-bottom: 4px;
+}
+
+.vitro-logo-container::before {
+    display: block;
+    content: '';
+    background: #E4E6EC;
+    margin: 0 auto;
+    min-width: 40px;
+    width: calc(100% - 16px);
+    height: 1px;
+}
+
+.vitro-logo {
+    display: flex;
+    width: fit-content;
+    align-items: center;
+    width: 100%;
+    height: 40px;
+    padding: 8px;
+}
+
+.vitro-logo span {
+    color: #8D8D8D !important;
+    font-size: 10px !important;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+:global(.vitro-bottom-menu) .vitro-logo {
+    flex-direction: column;
+    justify-content: space-between;
+    height: 100%;
+    padding: 0;
+    margin-bottom: 0;
+}
+
+.vitro-scroll-content {
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+    transition: 1s all ease;
 }

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

@@ -48,18 +48,6 @@
     line-height: 16px;
 }
 
-.vitro-focus .vitro-label {
-    color: #3274E0;
-}
-
-.vitro-focus :global(.k-picker-wrap) {
-    border-color: #3274E0 !important;
-}
-
-.vitro-error :global(.k-picker-wrap) {
-    border-color: #D13438 !important;
-}
-
 .vitro-read-only input {
     color: #4A556C;
     font-size: 12px;
@@ -75,13 +63,30 @@
     display: none;
 }
 
+.vitro-focus .vitro-label {
+    color: #3274E0;
+}
+
+.vitro-focus :global(.k-picker-wrap) {
+    border-color: #3274E0 !important;
+}
+
+.vitro-error :global(.k-picker-wrap) {
+    border-color: #D13438 !important;
+}
+
 .vitro-error .vitro-label {
     color: #D13438;
 }
 
 .vitro-label {
+    color: #4A556C;
     padding: 0 6px;
-    background: #fff;
+    background: transparent;
+    background-image: linear-gradient(#fff, #fff);
+    background-size: 100% 2px;
+    background-position: 0 calc(50% + 3px);
+    background-repeat: no-repeat;
     z-index: 1;
     position: absolute;
     left: 10px;