@vitrosoftware/common-ui-ts 1.1.22 → 1.1.25

package/css/common.css

@@ -34,6 +34,7 @@
     margin-right: 12px;
     margin-bottom: 0;
     padding-bottom: 12px;
+    margin-bottom: 8px;
 }
 
 @media (max-width: 800px) {

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

@@ -6,7 +6,12 @@
     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;
-    padding: 12px !important;
+}
+
+.vitro-alert :global(.alert) {
+    margin-bottom: 0;
+    padding: 12px;
+    border-radius: 4px;
 }
 
 :global(#Timesheets) .vitro-alert {
@@ -148,37 +153,37 @@
     margin: 5px;
 }
 
-.vitro-alert:global(.alert-danger),
-.vitro-alert:global(.alert-success),
-.vitro-alert:global(.alert-warning) {
+.vitro-alert :global(.alert-danger),
+.vitro-alert :global(.alert-success),
+.vitro-alert :global(.alert-warning) {
     border: none;
     background-color: #fff !important;
     color: #222d44;
 }
 
-.vitro-alert:global(.alert-danger) {
+.vitro-alert :global(.alert-danger) {
     border-left: 4px solid #D13438;
 }
 
-.vitro-alert:global(.alert-success) {
+.vitro-alert :global(.alert-success) {
     border-left: 4px solid #198754;
 }
 
-.vitro-alert:global(.alert-warning) {
+.vitro-alert :global(.alert-warning) {
     border-left: 4px solid #F3AD4A;
 }
 
-.vitro-alert:global(.alert-danger) .vitro-icon {
+.vitro-alert :global(.alert-danger) .vitro-icon {
     /* error.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='check-one /Line/Black'%3E%3Cpath id='Vector' d='M12 22.0039C14.7614 22.0039 17.2614 20.8846 19.071 19.075C20.8807 17.2653 22 14.7653 22 12.0039C22 9.24251 20.8807 6.74251 19.071 4.93284C17.2614 3.1232 14.7614 2.00391 12 2.00391C9.2386 2.00391 6.7386 3.1232 4.92893 4.93284C3.11929 6.74251 2 9.24251 2 12.0039C2 14.7653 3.11929 17.2653 4.92893 19.075C6.7386 20.8846 9.2386 22.0039 12 22.0039Z' fill='%23D13438'/%3E%3Cpath id='Vector_2' d='M9 15L12 12L15 15M15 9L11.9994 12L9 9' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E%0A");
 }
 
-.vitro-alert:global(.alert-success) .vitro-icon {
+.vitro-alert :global(.alert-success) .vitro-icon {
     /* success.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='check-one /Line/Black'%3E%3Crect width='24' height='24' fill='white'/%3E%3Cpath id='Vector' d='M12 22C14.7614 22 17.2614 20.8807 19.0711 19.0711C20.8807 17.2614 22 14.7614 22 12C22 9.2386 20.8807 6.7386 19.0711 4.92893C17.2614 3.11929 14.7614 2 12 2C9.2386 2 6.7386 3.11929 4.92893 4.92893C3.11929 6.7386 2 9.2386 2 12C2 14.7614 3.11929 17.2614 4.92893 19.0711C6.7386 20.8807 9.2386 22 12 22Z' fill='%23198754'/%3E%3Cpath id='Vector_2' d='M8 12L11 15L16 10' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E%0A");
 }
 
-.vitro-alert:global(.alert-warning) .vitro-icon {
+.vitro-alert :global(.alert-warning) .vitro-icon {
     /* warning.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='check-one /Line/Black'%3E%3Cpath id='Vector' d='M12 22.0039C14.7614 22.0039 17.2614 20.8846 19.071 19.075C20.8807 17.2653 22 14.7653 22 12.0039C22 9.24251 20.8807 6.74251 19.071 4.93284C17.2614 3.1232 14.7614 2.00391 12 2.00391C9.2386 2.00391 6.7386 3.1232 4.92893 4.93284C3.11929 6.74251 2 9.24251 2 12.0039C2 14.7653 3.11929 17.2653 4.92893 19.075C6.7386 20.8846 9.2386 22.0039 12 22.0039Z' fill='%23F3AD4A'/%3E%3Cg id='Vector_2'%3E%3Cpath d='M12 6V12Z' fill='white'/%3E%3Cpath d='M12 6V12' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Ccircle id='Ellipse 135' cx='12' cy='17' r='1' fill='white'/%3E%3C/g%3E%3C/svg%3E%0A");
 }

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

@@ -111,11 +111,15 @@
 .vitro-dropdown-button-container :global(.dropdown-item) .vitro-icon {
     width: 20px;
     height: 20px;
-    background-size: 20px !important;
     margin-right: 12px;
     margin-left: 0;
 }
 
+.vitro-dropdown-button-container :global(.dropdown-item) .vitro-icon img {
+    width: 20px;
+    height: 20px;
+}
+
 .vitro-button-collapse-bottom {
     width: 24px;
     height: 24px;
@@ -150,7 +154,8 @@
     width: 24px;
 }
 
-:global(.vitro-button-context > div) {
+:global(.vitro-button-context > div),
+:global(.vitro-button-context img) {
     margin: 0 !important;
 }
 

package/css/std/controls/dialog/dialog-button-close.css

@@ -6,9 +6,9 @@
     outline: 0;
     cursor: pointer;
     padding: 0;
-    width: 32px;
-    height: 32px;
-    right: -48px;
+    width: 26px;
+    height: 26px;
+    right: -42px;
     top: 2px;
     /* close.svg URL-encoder for SVG */
     background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' fill='none' stroke='%23fff' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 32.333l16-16m0 0l-16-16m16 16l16 16m-16-16l16-16'%3E%3C/path%3E%3C/svg%3E");
@@ -18,8 +18,6 @@
     background: #fff !important;
     color: #222D44 !important;
     border: none;
-    margin-left: 12px;
-    font-family: 'InterRegular' !important;
 }
 
 .vitro-button-close:hover,

package/css/std/controls/dialog/dialog-button.css

@@ -1,3 +1,7 @@
+.vitro-dialog-button {
+    margin-left: 12px;
+}
+
 .vitro-dialog-button:disabled {
     background: #E0E0E0;
 }

package/css/std/controls/dialog/dialog-content.css

@@ -1,29 +1,17 @@
 .vitro-dialog-content {
     min-width: auto;
-    overflow: visible;
-    flex: none;
+    overflow: hidden;
     display: flex;
     flex-direction: column;
+    flex-grow: 1;
+    flex-shrink: 1;
 }
 
-.vitro-dialog-content > div:first-child {
-    margin-top: 26px;
+.vitro-dialog-content :global(.ps) {
+    padding-top: 12px;
+    padding-left: 16px;
 }
 
-.vitro-dialog-content {
-    max-height: 360px !important;
-    height: 360px;
-}
-
-.vitro-dialog-content textarea {
-    max-height: 200px;
-}
-
-.vitro-dialog-content:has(div[role=alert]) textarea {
-    max-height: 125px;
-}
-
-:global(.vitro-time-log-history) {
-    height: 100%;
-    margin: 0 !important;
-}
+.vitro-dialog-content > div {
+    max-height: 100%;
+}

package/css/std/controls/dialog/dialog-footer.css

@@ -1,9 +1,10 @@
 .vitro-dialog-footer {
     display: flex;
     justify-content: flex-end;
-    z-index: 1000;
     background: #fff;
-    position: absolute;
-    bottom: 0;
-    right: 0;
-}
+    width: 100%;
+    padding: 16px;
+    border-top: 1px solid #E4E6EC;
+    margin-top: auto;
+    border-radius: 0 0 4px 4px;
+}

package/css/std/controls/dialog/dialog-header.css

@@ -1,5 +1,29 @@
 .vitro-dialog-header {
-    font-size: 18px;
-    line-height: 150%;
-    margin-bottom: 12px;
+    padding: 20px 16px;
+    border-bottom: 1px solid #E4E6EC;
+    background: #fff;
+    border-radius: 4px 4px 0 0;
+    display: flex;
+    align-items: center;
 }
+
+.vitro-title {
+    color: #222D44;
+    font-size: 20px;
+    line-height: 24px;
+    margin-bottom: 0;
+}
+
+.vitro-description {
+    color: #4A556C;
+    font-size: 14px;
+    line-height: 16px;
+    margin-top: 7px;
+    margin-bottom: 0;
+}
+
+.vitro-icon {
+    width: 38px;
+    height: 38px;
+    margin-right: 16px;
+}

package/css/std/controls/dialog/dialog.css

@@ -18,18 +18,13 @@
     border: 1px solid #C0CAD5;
     background: #fff;
     position: absolute;
-    display: block;
+    overflow: visible;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     opacity: 1;
-    padding: 24px;
     border-radius: 4px;
-    min-height: 514px;
+    height: 534px;
     width: 760px;
     box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.18), 0px 0px 4px 0px rgba(0, 0, 0, 0.14);
-}
-
-.vitro-dialog :global(.vitro-content) {
-    height: 400px;
-}
+}

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

@@ -1,6 +1,7 @@
 .vitro-lookup-picker {
     position: relative;
     margin-bottom: 22px;
+    width: 100%;
 }
 
 .vitro-content {