@vitrosoftware/common-ui-ts 1.1.87 → 1.1.89

package/css/std/controls/alert/alert.css

@@ -26,7 +26,7 @@
 
 .vitro-alert-content {
     display: flex;
-    align-items: start;
+    align-items: flex-start;
     height: auto;
 }
 

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

@@ -238,7 +238,7 @@
         margin: 0 16px;
         width: -moz-available !important;
         width: -webkit-fill-available !important;
-        width: fill-available !important;
+        width: stretch !important;
         left: 0 !important;
         padding: 71px 12px 24px 12px !important;
     }

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/message-input/message-input.css

@@ -4,7 +4,7 @@
     width: calc(100% - 32px);
     max-width: calc(100% - 32px);
     bottom: 0;
-    align-items: end;
+    align-items: flex-end;
     background: #fff;
     bottom: 1px;
 }

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/dist/index.css

@@ -2797,7 +2797,7 @@ html, body {
         margin: 0 16px;
         width: -moz-available !important;
         width: -webkit-fill-available !important;
-        width: fill-available !important;
+        width: stretch !important;
         left: 0 !important;
         padding: 71px 12px 24px 12px !important;
     }
@@ -4114,11 +4114,8 @@ li:first-child ._command-menu-item_vitro-item_2pVhk23:hover {
     width: fit-content;
     align-items: center;
     overflow: hidden;
-    flex-shrink: 0;
-}
-
-ul > li:last-child > ul > li:last-child ._sidebar-item_vitro-active_7p5iOhY {
-    background-color: transparent;
+    height: 100%;
+    flex-shrink: 1;
 }
 
 ._sidebar-item_vitro-item-text_1kK_aIZ {
@@ -4210,18 +4207,28 @@ ul > li:last-child > ul > li:last-child ._sidebar-item_vitro-active_7p5iOhY {
     display: none;
 }
 
+.vitro-bottom-menu ._sidebar-item_vitro-item_1BR_7F0 a > div,
+.vitro-bottom-menu ._sidebar-item_vitro-item_1BR_7F0 button > div {
+    flex-direction: column;
+    height: 100%;
+}
+
 .vitro-bottom-menu ._sidebar-item_vitro-item-text_1kK_aIZ {
-    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;
 }
 
 .vitro-bottom-menu ._sidebar-item_vitro-image_2A82YI0 {
     margin-right: 0;
+    margin-bottom: 4px;
 }
 
 .vitro-bottom-menu ._sidebar-item_vitro-active_7p5iOhY {
@@ -4306,6 +4313,10 @@ ul > li:last-child > ul > li:last-child ._sidebar-item_vitro-active_7p5iOhY {
     width: 100% !important;
 }
 
+._sidebar-item_vitro-popup-item-list_JUwcoZB ._sidebar-item_vitro-item_1BR_7F0:last-child {
+    margin-bottom: 16px;
+}
+
 ._sidebar-item_vitro-popup-item-list_JUwcoZB ._sidebar-item_vitro-item_1BR_7F0 > a,
 ._sidebar-item_vitro-popup-item-list_JUwcoZB ._sidebar-item_vitro-item_1BR_7F0 > button {
     background-color: #fff;
@@ -4390,19 +4401,6 @@ ul > li:last-child > ul > li:last-child ._sidebar-item_vitro-active_7p5iOhY {
     justify-content: space-between;
 }
 
-._sidebar_vitro-sidebar_1IxGYiU ul > li:last-child > ul > li:last-child a:hover {
-    background-color: transparent;
-}
-
-._sidebar_vitro-sidebar_1IxGYiU ul > li:last-child > ul > li:last-child span {
-    color: #8D8D8D;
-    font-size: 10px;
-}
-
-._sidebar_vitro-sidebar_1IxGYiU ul > li:last-child > ul > li:last-child span:hover {
-    font-weight: 400 !important;
-}
-
 ._sidebar_vitro-scrollbar_2PtQGQD .ps__rail-y {
     background-color: transparent !important;
     border: none;
@@ -4410,21 +4408,42 @@ ul > li:last-child > ul > li:last-child ._sidebar-item_vitro-active_7p5iOhY {
 
 ._sidebar_vitro-scrollbar_2PtQGQD > div:first-child {
     padding: 0 8px;
+    display: flex;
+    flex-direction: column;
 }
 
 ._sidebar_vitro-sidebar-section-list_1nGto5m {
-    height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
+    flex: 1 0;
+}
+
+._sidebar_vitro-sidebar-section-list_1nGto5m > li::before {
+    display: block;
+    content: '';
+    background: #E4E6EC;
+    margin: 0 auto;
+    min-width: 40px;
+    width: calc(100% - 16px);
+    height: 1px;
+    margin-bottom: 4px;
+}
+
+._sidebar_vitro-sidebar-section-list_1nGto5m > li:first-child::before {
+    display: none;
+}
+
+.vitro-bottom-menu ._sidebar_vitro-sidebar-section-list_1nGto5m > li::before {
+    display: none;
 }
 
 .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;
@@ -4451,24 +4470,72 @@ ul > li:last-child > ul > li:last-child ._sidebar-item_vitro-active_7p5iOhY {
     transition: 1s all ease;
 }
 
-._sidebar_vitro-button-more_3s9oZY9 {
+._sidebar_vitro-button-more_3s9oZY9,
+._sidebar_vitro-button-more_3s9oZY9:hover,
+._sidebar_vitro-button-more_3s9oZY9: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');
 }
 
-._sidebar_vitro-button-more_3s9oZY9:hover,
-._sidebar_vitro-button-more_3s9oZY9:active {
-    border: none;
-    background-color: #fff;
-    outline: none;
+._sidebar_vitro-logo-container_31O5Ly- {
+    width: 100%;
+    height: 40px;
+    padding: 0 8px;
+    margin-bottom: 4px;
+}
+
+._sidebar_vitro-logo-container_31O5Ly-::before {
+    display: block;
+    content: '';
+    background: #E4E6EC;
+    margin: 0 auto;
+    min-width: 40px;
+    width: calc(100% - 16px);
+    height: 1px;
+}
+
+._sidebar_vitro-logo_1qxi8L_ {
+    display: flex;
+    width: -moz-fit-content;
+    width: fit-content;
+    align-items: center;
+    width: 100%;
+    height: 40px;
+    padding: 8px;
+}
+
+._sidebar_vitro-logo_1qxi8L_ span {
+    color: #8D8D8D !important;
+    font-size: 10px !important;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.vitro-bottom-menu ._sidebar_vitro-logo_1qxi8L_ {
+    flex-direction: column;
+    justify-content: space-between;
+    height: 100%;
+    padding: 0;
+    margin-bottom: 0;
+}
+
+._sidebar_vitro-scroll-content_2RUBhZd {
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+    transition: 1s all ease;
 }
 ._activity-item_vitro-item_3Tprske {
     margin-bottom: 16px;
@@ -4706,7 +4773,7 @@ ul > li:last-child > ul > li:last-child ._sidebar-item_vitro-active_7p5iOhY {
 
 ._alert_vitro-alert-content_10fW1n4 {
     display: flex;
-    align-items: start;
+    align-items: flex-start;
     height: auto;
 }
 
@@ -5212,7 +5279,7 @@ ul > li:last-child > ul > li:last-child ._sidebar-item_vitro-active_7p5iOhY {
     width: calc(100% - 32px);
     max-width: calc(100% - 32px);
     bottom: 0;
-    align-items: end;
+    align-items: flex-end;
     background: #fff;
     bottom: 1px;
 }
@@ -6186,7 +6253,7 @@ ul > li:last-child > ul > li:last-child ._sidebar-item_vitro-active_7p5iOhY {
         width: calc(100% - 24px);
         margin: 0 auto;
         border-radius: 4px 4px 0px 0px;
-        height: calc(100% - 130px);
+        height: calc(100% - 136px);
         padding-bottom: 16px;
     }
 }