@vitrosoftware/common-ui-ts 1.1.207 → 1.1.209

package/css/std/controls/activity-item/activity-message.css

@@ -9,10 +9,10 @@
 }
 
 .vitro-item {
-    display: flex;
-    grid-gap: 4px 0;
-    align-items: center;
-    white-space: nowrap;
+    position: relative;
+    display: inline-block;
+    max-height: 80px;
+    overflow: hidden;
 }
 
 .vitro-value {
@@ -53,14 +53,41 @@
     margin-right: 8px;
 }
 
-.vitro-separator {
-    width: 24px;
-    height: 24px;
-    min-width: 24px;
-    background-size: 100%;
-    background-position: center;
-    background-repeat: no-repeat;
-    margin: 0 4px;
-    white-space: nowrap;
-    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/activity-item/img/activity-arrow.svg');
+:global(.vitro-arrow-separator) {
+    margin: 0 10px;
+    background-color: #4A556C;
+    -webkit-mask-image: url('@vitrosoftware/common-ui-ts/css/std/controls/activity-item/img/activity-arrow.svg');
+    mask-image: url('@vitrosoftware/common-ui-ts/css/std/controls/activity-item/img/activity-arrow.svg');
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+    display: inline-block;
+    height: 12px;
+    width: 18px;
+    vertical-align: middle;
+}
+
+.vitro-ellipsis::after {
+    content: '...';
+    position: absolute;
+    right: 0;
+    bottom: 1px;
+    background: #f8f9fa;
+    padding: 0 1px;
+    display: block;
+    width: 32px;
+}
+
+.vitro-value-content {
+    max-height: 80px;
+    display: inline;
+    overflow: hidden;
 }
+
+.vitro-value-content p {
+    display: inline;
+}
+
+.vitro-value-tooltip {
+    margin-bottom: -4px;
+}

package/css/std/controls/activity-item/img/activity-arrow.svg

@@ -1,3 +1,3 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M15.1602 7.81641C14.8684 7.5247 14.8671 7.05213 15.1572 6.7588C15.4496 6.46318 15.9267 6.46186 16.2207 6.75587L20.7585 11.2936C21.1487 11.6839 21.149 12.3165 20.7592 12.7071L16.2204 17.255C15.9267 17.5494 15.4494 17.5483 15.157 17.2526C14.867 16.9595 14.8683 16.4871 15.1599 16.1956L18.5937 12.7617L3.2857 12.7729C2.87128 12.7732 2.53516 12.4373 2.53516 12.0229C2.53516 11.6089 2.87061 11.2732 3.28461 11.2729L18.6055 11.2617L15.1602 7.81641Z" fill="#4A556C"/>
+<svg width="20" height="12" viewBox="0 0 20 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.1602 1.81641C12.8684 1.5247 12.8671 1.05213 13.1572 0.758805C13.4496 0.463178 13.9267 0.46186 14.2207 0.755867L18.7585 5.29361C19.1487 5.68385 19.149 6.31647 18.7592 6.70711L14.2204 11.255C13.9267 11.5494 13.4494 11.5483 13.157 11.2526C12.867 10.9595 12.8683 10.4871 13.1599 10.1956L16.5937 6.76172L1.2857 6.77289C0.871276 6.77319 0.535156 6.43732 0.535156 6.02289C0.535156 5.60889 0.870609 5.27319 1.28461 5.27289L16.6055 5.26172L13.1602 1.81641Z" fill="#4A556C"/>
 </svg>

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

@@ -1,17 +1,27 @@
 .vitro-alert {
     border: 0;
+    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;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: 12px;
+}
+
+.vitro-position-absolute {
     z-index: 1000;
     position: absolute;
     right: 0;
     width: 450px;
-    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;
 }
 
 .vitro-alert :global(.alert) {
     margin-bottom: 0;
     padding: 12px;
     border-radius: 4px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
 }
 
 :global(#Timesheets) .vitro-alert {
@@ -48,7 +58,6 @@
     background-position: center;
     background-size: 100%;
     background-repeat: no-repeat;
-    align-self: center;
 }
 
 .vitro-text {
@@ -59,6 +68,7 @@
     color: #4A556C;
     flex-direction: column;
     overflow: hidden;
+    white-space: pre-wrap;
 }
 
 .vitro-text > strong {

package/css/std/controls/button/button.css

@@ -1,11 +1,5 @@
 .vitro-button {
-    font-family: 'InterMedium';
-    font-size: 14px;
     outline: none;
-    height: 32px;
-    min-width: 85px;
-    color: #fff;
-    background: #347FDE;
     border: none;
     border-radius: 4px;
     cursor: pointer;
@@ -13,8 +7,11 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    font-size: 14px;
     line-height: 16px;
-    padding: 4px 8px;
+    padding: 4px 16px;
+    height: 32px;
+    min-width: 85px;
 }
 
 .vitro-button > div {
@@ -23,28 +20,18 @@
     justify-content: center;
     flex: 1 1;
     overflow: hidden;
+    gap: 4px;
 }
 
 .vitro-button > div > div {
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
-}
-
-.vitro-button:hover, 
-.vitro-button:active,
-.vitro-button:focus {
-    background: #3274E0;
-}
-
-.vitro-button:disabled {
-    background: #E4E6EC;
 }
 
 .vitro-button :global(.vitro-image-default),
 .vitro-button :global(.vitro-image-hover),
 .vitro-button :global(.vitro-image) {
-    margin-right: 4px;
     height: 24px;
     width: 24px;
 }
@@ -73,4 +60,68 @@
 
 :global(.vitro-display-none) {
     display: none;
+}
+
+.vitro-button:global(.vitro-primary) {
+    font-family: 'InterMedium';
+    color: #fff;
+    background: #347FDE;
+}
+
+.vitro-button:global(.vitro-primary):hover,
+.vitro-button:global(.vitro-primary):active,
+.vitro-button:global(.vitro-primary):focus {
+    background: #3274E0;
+}
+
+.vitro-button:global(.vitro-primary):disabled {
+    background: #E4E6EC;
+}
+
+.vitro-button:global(.vitro-outline-primary) {
+    background: #fff;
+    border: 1px solid #0060D9;
+    color: #0060D9;
+    font-family: 'InterRegular';
+}
+
+.vitro-button:global(.vitro-outline-primary):hover,
+.vitro-button:global(.vitro-outline-primary):active,
+.vitro-button:global(.vitro-outline-primary):focus {
+    background: #3274E0;
+    border: 1px solid #3274E0;
+    color: #fff;
+}
+
+.vitro-button:global(.vitro-outline-primary):disabled {
+    background: #fff;
+    border: 1px solid #8E98A3;
+    color: #8E98A3;
+}
+
+.vitro-button:global(.vitro-outline-light) {
+    background: #fff;
+    color: #222D44;
+    border: 1px solid #E4E6EC;
+    font-family: 'InterRegular';
+}
+
+.vitro-button:global(.vitro-outline-light):hover,
+.vitro-button:global(.vitro-outline-light):active,
+.vitro-button:global(.vitro-outline-light):focus {
+    background: #F3F8FF;
+}
+
+.vitro-button:global(.vitro-light) {
+    background: #fff;
+    border: none;
+    color: #222D44;
+    font-family: 'InterRegular';
+    padding: 4px 8px;
+}
+
+.vitro-button:global(.vitro-light):hover,
+.vitro-button:global(.vitro-light):active,
+.vitro-button:global(.vitro-light):focus {
+    background: #F3F8FF;
 }

package/css/std/controls/command-menu/command-menu-button.css

@@ -1,25 +1,3 @@
-.vitro-command-menu-button {
-    font-family: 'InterRegular' !important;
-    border: none !important;
-    color: #222D44 !important;
-    background: #fff !important;
-    padding: 4px 8px !important;
-}
-
-.vitro-command-menu-button:hover,
-.vitro-command-menu-button:active {
-    background: #F3F8FF !important;
-}
-
-.vitro-command-menu-button > div {
-    gap: 4px;
-}
-
-.vitro-image {
-    width: 24px;
-    height: 24px;
-}
-
 @media (max-width: 800px) {
     .vitro-command-menu-button .vitro-image + div {
         display: none;

package/css/std/controls/command-menu/command-menu-dropdown-button.css

@@ -148,30 +148,30 @@
     margin-left: -8px;
 }
 
-:global(.vitro-button-active) {
+:global(.vitro-addon-button) {
     border: 1px solid #4292F7 !important;
 }
 
-:global(.vitro-button-active:hover),
-:global(.vitro-button-active:active) {
+:global(.vitro-addon-button:hover),
+:global(.vitro-addon-button:active) {
     border-color: #3274E0 !important;
     background: #3274E0;
     color: #fff;
 }
 
-:global(.vitro-button-context) {
+:global(.vitro-context-button) {
     padding: 0 !important;
     width: 24px;
     background-color: #fff !important;
 }
 
-:global(.vitro-button-context > div),
-:global(.vitro-button-context img) {
+:global(.vitro-context-button > div),
+:global(.vitro-context-button img) {
     margin: 0 !important;
 }
 
-:global(.vitro-button-context:hover),
-:global(.vitro-button-context:active) {
+:global(.vitro-context-button:hover),
+:global(.vitro-context-button:active) {
     border-color: #fff !important;
 }
 
@@ -179,6 +179,28 @@
     max-height: 288px;
 }
 
+.vitro-dropdown-button-container :global(.vitro-primary) {
+    font-family: 'InterMedium';
+    color: #fff;
+    background: #347FDE;
+}
+
+.vitro-dropdown-button-container :global(.vitro-primary) {
+    font-family: 'InterMedium';
+    color: #fff;
+    background: #347FDE;
+}
+
+.vitro-dropdown-button-container :global(.vitro-primary):hover,
+.vitro-dropdown-button-container :global(.vitro-primary):active,
+.vitro-dropdown-button-container :global(.vitro-primary):focus {
+    background: #3274E0;
+}
+
+.vitro-dropdown-button-container :global(.vitro-primary):disabled {
+    background: #E4E6EC;
+}
+
 @media (max-width: 800px) {
     .vitro-command-menu-dropdown-button .vitro-image + div {
         display: none;
@@ -192,7 +214,7 @@
         display: block;
     }
 
-    :global(.vitro-button-context) {
+    :global(.vitro-context-button) {
         min-width: 32px !important;
         width: 32px;
     }

package/css/std/controls/command-menu/command-menu-item.css

@@ -1,14 +1,4 @@
 .vitro-item {
     display: flex;
     align-items: center;
-}
-
-li:first-child .vitro-item {
-    background: #347FDE;
-    font-family: 'InterMedium';
-    color: #fff;
-}
-
-li:first-child .vitro-item:hover {
-    background: #3274E0;
 }

package/css/std/controls/tooltip/tooltip.css

@@ -13,13 +13,25 @@
     font-family: 'InterRegular';
     font-size: 14px;
     line-height: 21px;
-    padding: 8px 10px;
+    padding: 0;
     border-radius: 4px;
     background: #4A556C;
     box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 2px 6px 0px rgba(0, 0, 0, 0.10);
-    max-width: 224px;
+    max-width: 336px;
+  
     text-align: left;
     white-space: pre-wrap;
+    overflow: hidden;
+}
+
+.vitro-tooltip :global(.tooltip-inner) > :global(.ps) {
+    max-height: 224px;
+    padding: 8px 10px;
+}
+
+.vitro-tooltip :global(.tooltip-inner) > :global(.ps) > :global(.ps__rail-y) {
+    border: none;
+    background-color: #4A556C !important;
 }
 
 .vitro-tooltip :global(.tooltip-arrow)::before {
@@ -52,3 +64,12 @@
     left: -3px;
     transform: rotate(-90deg);
 }
+
+.vitro-tooltip :global(.vitro-arrow-separator) {
+    background-color: #fff;
+}
+
+.vitro-tooltip :global(.tooltip-inner) p, 
+.vitro-tooltip :global(.tooltip-inner) span {
+    color: #fff;
+}