@vitrosoftware/common-ui-ts 1.1.16 → 1.1.19

package/css/common.css

@@ -6,7 +6,7 @@
 @import url('@vitrosoftware/common-ui-ts/css/third-party/jquery-contextMenu/jquery.contextMenu.min.css');
 @import url('@vitrosoftware/common-ui-ts/css/third-party/jquery-svg/jquery.svg.css');
 @import url('@vitrosoftware/common-ui-ts/css/third-party/sweetalert2/sweetalert2.css');
-@import url('@vitrosoftware/common-ui-ts/css/white/controls/pdf-viewer/pdf-viewer.css');
+@import url('@vitrosoftware/common-ui-ts/css/std/controls/pdf-viewer/pdf-viewer.css');
 
 :global(.vitro-opacity-low) {
     opacity: .3;

package/css/std/controls/action-handler/action-handler.css

@@ -92,6 +92,12 @@
     overflow: hidden;
 }
 
+.vitro-action-handler-dialog-confirm {
+    top: 0;
+    left: 0;
+    box-sizing: border-box !important;
+}
+
 .vitro-content-container {
     padding: 16px;
     flex: 1 1;
@@ -125,6 +131,7 @@
     box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.16), 0px 0px 4px 0px rgba(0, 0, 0, 0.12);
     display: flex;
     flex-direction: column;
+    box-sizing: border-box;
 }
 
 .vitro-action-handler-dialog {
@@ -168,12 +175,16 @@
 }
 
 .vitro-small {
+    display: inline-block;
     color: #4A556C;
     font-size: 14px;
     line-height: 150% !important;
-    margin-left: 59px;
-    flex: 1 1;
+    padding-left: 59px;
     margin-top: -5px;
+    max-width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .vitro-button-close {
@@ -191,8 +202,8 @@
 .vitro-success .vitro-button-close,
 .vitro-warning .vitro-button-close,
 .vitro-error .vitro-button-close {
-    /* close.svg URL-encoder for SVG */
     margin-left: 8px;
+    /* close.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='%234A556C' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E%0A");
 }
 

package/css/std/controls/avatar/avatar.css

@@ -8,6 +8,9 @@
     height: 24px;
     min-width: 24px;
     text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
     font-size: 12px;
     line-height: 24px;
 }

package/css/std/controls/checkbox/checkbox.css

@@ -0,0 +1,54 @@
+.vitro-control {
+    width: 100%;
+    position: relative;
+    margin-bottom: 32px;
+}
+
+.vitro-checkbox-content {
+    width: 100%;
+    display: flex;
+    align-items: center;
+}
+
+.vitro-checkbox-content input {
+    width: 24px;
+    height: 24px;
+    margin-right: 6px;
+    cursor: pointer;
+}
+
+.vitro-checkbox-content input::before,
+.vitro-checkbox-content input:checked::before {
+    content: '';
+    display: block;
+    width: 24px;
+    height: 24px;
+    background: #fff;
+    background-size: 100%;
+    background-position: center;
+}
+
+.vitro-checkbox-content input::before {
+    /* checkbox-big-empty.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='Checkbox-big'%3E%3Crect id='Background' x='2.5' y='2.5' width='19' height='19' rx='3.5' stroke='%23C0CAD5'/%3E%3C/g%3E%3C/svg%3E%0A");
+}
+
+.vitro-checkbox-content input:checked::before {
+    /* checkbox-big-active.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%3Crect x='2' y='2' width='20' height='20' rx='2.5' fill='%234292F7'/%3E%3Cpath d='M16.7062 8.50593C17.0826 8.86144 17.0996 9.45479 16.7441 9.83121L11.4316 15.4562C11.2577 15.6404 11.0166 15.7463 10.7634 15.7499C10.5101 15.7535 10.2662 15.6545 10.0871 15.4754L7.27459 12.6629C6.90847 12.2968 6.90847 11.7032 7.27459 11.3371C7.6407 10.971 8.2343 10.971 8.60041 11.3371L10.7308 13.4675L15.3809 8.54379C15.7364 8.16737 16.3298 8.15042 16.7062 8.50593Z' fill='white'/%3E%3C/svg%3E%0A");
+}
+
+.vitro-label {
+    color: #222D44;
+    font-size: 14px;
+    line-height: 135%;
+}
+
+.vitro-left-label {
+    display: flex;
+    align-items: center;
+}
+
+.vitro-left-label .vitro-label {
+    margin-right: 6px;
+}

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

@@ -37,7 +37,7 @@
     position: absolute;
     z-index: 1150;
     top: calc(100% + 6px);
-    right: -18px;
+    left: -20px;
 }
 
 .vitro-dropdown-button-container :global(.dropdown-toggle):after,
@@ -54,7 +54,7 @@
     background-size: 100%;
     background-repeat: no-repeat;
     position: absolute;
-    right: 26px;
+    left: 24px;
     top: -11px;
     /* dropdown-arrow.svg URL-encoder for SVG */
     background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.31554 1.65838L0.382812 11H15.6249L9.69214 1.65838C8.90651 0.421336 7.10117 0.421335 6.31554 1.65838Z' fill='white'/%3E%3C/svg%3E%0A");
@@ -64,8 +64,12 @@
     left: 0;
 }
 
-.vitro-dropdown-button-container:first-child :global(.dropdown-menu::before) {
-    left: 20px;
+.vitro-dropdown-button-container:last-child :global(.dropdown-menu) {
+    right: -20px;
+}
+
+.vitro-dropdown-button-container:last-child :global(.dropdown-menu::before) {
+    right: 25px;
 }
 
 .vitro-dropdown-button-container :global(.dropdown-item) {
@@ -87,6 +91,7 @@
 }
 
 .vitro-dropdown-button-container :global(.dropdown-item):hover,
+.vitro-dropdown-button-container :global(.dropdown-item):focus,
 .vitro-dropdown-button-container :global(.dropdown-item):active {
     background: #F3F8FF;
 }

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

@@ -61,7 +61,7 @@
 }
 
 .vitro-read-only :global(.k-picker-wrap .k-select) {
-    display: none;
+    display: none !important;
 }
 
 .vitro-error .vitro-label {
@@ -89,12 +89,16 @@
 }
 
 .vitro-error-text {
-    display: flex;
-    align-items: center;
+    display: inline-block;
+    vertical-align: text-top;
     color: #D13438;
     font-size: 14px;
     line-height: 135%;
     margin-top: 2px;
+    width: 100%;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
 }
 
 .vitro-focus .vitro-error-text {
@@ -104,8 +108,11 @@
 .vitro-error-text::before {
     content: '';
     display: inline-block;
+    vertical-align: text-top;
     height: 16px;
     width: 16px;
+    min-width: 16px;
+    min-height: 16px;
     margin-right: 4px;
     background-size: 100%;
     background-position: center;
@@ -159,8 +166,11 @@
 }
 
 :global(.k-i-calendar) {
-    width: 20px;
-    height: 20px;
+    height: 20px !important;
+    width: 20px !important;
+    display: flex !important;
+    align-items: center;
+    justify-content: center;
 }
 
 :global(.k-i-calendar)::before {
@@ -172,7 +182,7 @@
     background-size: 100%;
     background-position: center;
     /* date-picker.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%3Cg id='Vector'%3E%3Cpath d='M9.49725 6.25275C9.53799 6.29339 9.57032 6.34167 9.59237 6.39482C9.61443 6.44797 9.62578 6.50495 9.62578 6.5625C9.62578 6.62005 9.61443 6.67703 9.59237 6.73018C9.57032 6.78333 9.53799 6.83161 9.49725 6.87225L6.87225 9.49725C6.83161 9.53799 6.78333 9.57032 6.73018 9.59237C6.67703 9.61443 6.62005 9.62578 6.5625 9.62578C6.50495 9.62578 6.44797 9.61443 6.39482 9.59237C6.34167 9.57032 6.29339 9.53799 6.25275 9.49725L4.94025 8.18475C4.89957 8.14407 4.86731 8.09578 4.84529 8.04264C4.82328 7.98949 4.81195 7.93253 4.81195 7.875C4.81195 7.81747 4.82328 7.76051 4.84529 7.70736C4.86731 7.65422 4.89957 7.60593 4.94025 7.56525C5.0224 7.4831 5.13382 7.43695 5.25 7.43695C5.30753 7.43695 5.36449 7.44828 5.41764 7.47029C5.47078 7.49231 5.51907 7.52457 5.55975 7.56525L6.5625 8.56888L8.87775 6.25275C8.91839 6.21201 8.96667 6.17968 9.01982 6.15763C9.07297 6.13557 9.12995 6.12422 9.1875 6.12422C9.24505 6.12422 9.30203 6.13557 9.35518 6.15763C9.40833 6.17968 9.45661 6.21201 9.49725 6.25275Z' fill='%234A556C'/%3E%3Cpath d='M3.0625 0C3.17853 0 3.28981 0.0460936 3.37186 0.128141C3.45391 0.210188 3.5 0.321468 3.5 0.4375V0.875H10.5V0.4375C10.5 0.321468 10.5461 0.210188 10.6281 0.128141C10.7102 0.0460936 10.8215 0 10.9375 0C11.0535 0 11.1648 0.0460936 11.2469 0.128141C11.3289 0.210188 11.375 0.321468 11.375 0.4375V0.875H12.25C12.7141 0.875 13.1592 1.05937 13.4874 1.38756C13.8156 1.71575 14 2.16087 14 2.625V12.25C14 12.7141 13.8156 13.1592 13.4874 13.4874C13.1592 13.8156 12.7141 14 12.25 14H1.75C1.28587 14 0.840752 13.8156 0.512563 13.4874C0.184375 13.1592 0 12.7141 0 12.25V2.625C0 2.16087 0.184375 1.71575 0.512563 1.38756C0.840752 1.05937 1.28587 0.875 1.75 0.875H2.625V0.4375C2.625 0.321468 2.67109 0.210188 2.75314 0.128141C2.83519 0.0460936 2.94647 0 3.0625 0ZM0.875 3.5V12.25C0.875 12.4821 0.967187 12.7046 1.13128 12.8687C1.29538 13.0328 1.51794 13.125 1.75 13.125H12.25C12.4821 13.125 12.7046 13.0328 12.8687 12.8687C13.0328 12.7046 13.125 12.4821 13.125 12.25V3.5H0.875Z' fill='%234A556C'/%3E%3C/g%3E%3C/svg%3E%0A");
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Vector'%3E%3Cpath d='M12.1216 8.06594C12.1725 8.11674 12.2129 8.17709 12.2405 8.24353C12.268 8.30997 12.2822 8.38119 12.2822 8.45312C12.2822 8.52506 12.268 8.59628 12.2405 8.66272C12.2129 8.72916 12.1725 8.78951 12.1216 8.84031L8.84031 12.1216C8.78951 12.1725 8.72916 12.2129 8.66272 12.2405C8.59628 12.268 8.52506 12.2822 8.45312 12.2822C8.38119 12.2822 8.30997 12.268 8.24353 12.2405C8.17709 12.2129 8.11674 12.1725 8.06594 12.1216L6.42531 10.4809C6.37447 10.4301 6.33413 10.3697 6.30661 10.3033C6.2791 10.2369 6.26493 10.1657 6.26493 10.0938C6.26493 10.0218 6.2791 9.95064 6.30661 9.88421C6.33413 9.81777 6.37447 9.75741 6.42531 9.70656C6.528 9.60387 6.66728 9.54618 6.8125 9.54618C6.88441 9.54618 6.95561 9.56035 7.02204 9.58786C7.08848 9.61538 7.14884 9.65572 7.19969 9.70656L8.45312 10.9611L11.3472 8.06594C11.398 8.01501 11.4583 7.9746 11.5248 7.94703C11.5912 7.91946 11.6624 7.90527 11.7344 7.90527C11.8063 7.90527 11.8775 7.91946 11.944 7.94703C12.0104 7.9746 12.0708 8.01501 12.1216 8.06594Z' fill='%234A556C'/%3E%3Cpath d='M4.07812 0.25C4.22317 0.25 4.36227 0.307617 4.46482 0.410176C4.56738 0.512735 4.625 0.651835 4.625 0.796875V1.34375H13.375V0.796875C13.375 0.651835 13.4326 0.512735 13.5352 0.410176C13.6377 0.307617 13.7768 0.25 13.9219 0.25C14.0669 0.25 14.206 0.307617 14.3086 0.410176C14.4111 0.512735 14.4688 0.651835 14.4688 0.796875V1.34375H15.5625C16.1427 1.34375 16.6991 1.57422 17.1093 1.98445C17.5195 2.39469 17.75 2.95109 17.75 3.53125V15.5625C17.75 16.1427 17.5195 16.6991 17.1093 17.1093C16.6991 17.5195 16.1427 17.75 15.5625 17.75H2.4375C1.85734 17.75 1.30094 17.5195 0.890704 17.1093C0.480468 16.6991 0.25 16.1427 0.25 15.5625V3.53125C0.25 2.95109 0.480468 2.39469 0.890704 1.98445C1.30094 1.57422 1.85734 1.34375 2.4375 1.34375H3.53125V0.796875C3.53125 0.651835 3.58887 0.512735 3.69143 0.410176C3.79398 0.307617 3.93308 0.25 4.07812 0.25ZM1.34375 4.625V15.5625C1.34375 15.8526 1.45898 16.1308 1.6641 16.3359C1.86922 16.541 2.14742 16.6562 2.4375 16.6562H15.5625C15.8526 16.6562 16.1308 16.541 16.3359 16.3359C16.541 16.1308 16.6562 15.8526 16.6562 15.5625V4.625H1.34375Z' fill='%234A556C'/%3E%3C/g%3E%3C/svg%3E%0A");
 }
 
 :global(.k-picker-wrap.k-state-default > .k-select) {

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

@@ -0,0 +1,126 @@
+.vitro-dropdown-button {
+    display: flex;
+    align-items: center;
+    font-family: 'InterRegular';
+}
+
+.vitro-dropdown-button button,
+.vitro-dropdown-button button:hover,
+.vitro-dropdown-button button:active,
+.vitro-dropdown-button button:focus {
+    padding: 0 !important;
+    margin: 0 !important;
+    background-color: transparent !important;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    outline: none;
+    box-shadow: none !important;
+    color: #E0E0E0;
+    font-family: inherit !important;
+    font-size: inherit !important;
+    font-weight: normal !important;
+    width: 24px;
+    height: 24px;
+}
+
+.vitro-dropdown-button button::after {
+    display: none;
+}
+
+.vitro-dropdown-icon {
+    height: 24px;
+    width: 24px;
+    background-size: 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+    /* more.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 23 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11.5' cy='6' r='1.5' fill='%23222D44'/%3E%3Ccircle cx='11.5' cy='12' r='1.5' fill='%23222D44'/%3E%3Ccircle cx='11.5' cy='18' r='1.5' fill='%23222D44'/%3E%3C/svg%3E%0A");
+}
+
+.vitro-dropdown-button .vitro-text {
+    font-size: 14px;
+}
+
+.vitro-dropdown-button-item-overflow {
+    cursor: pointer;
+    white-space: nowrap;
+    display: flex;
+    font-size: 14px;
+    color: #4A556C;
+}
+
+.vitro-icon {
+    width: 20px;
+    height: 20px;
+    background-size: 20px;
+    margin-right: 12px;
+}
+
+.vitro-dropdown-button :global(.dropdown-menu) {
+    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.18), 0px 0px 4px 0px rgba(0, 0, 0, 0.14);
+    background: #fff;
+    border-radius: 4px;
+    border: none !important;
+    outline: none;
+    min-width: 241px;
+    width: -moz-fit-content;
+    width: -webkit-fit-content;
+    width: fit-content;
+    font-size: 14px;
+    padding: 0px;
+    font-weight: 400;
+    box-sizing: border-box;
+    -webkit-transform: none !important;
+    transform: none !important;
+    position: absolute;
+    z-index: 1150;
+    top: calc(100% + 6px) !important;
+    right: -4px !important;
+}
+
+.vitro-dropdown-button :global(.dropdown-menu)::before {
+    content: '';
+    display: block;
+    height: 11px;
+    width: 16px;
+    background-position: center;
+    background-size: 100%;
+    background-repeat: no-repeat;
+    position: absolute;
+    right: 8px;
+    top: -11px;
+    background-image: url(data:image/svg+xml,%3Csvg viewBox=%270 0 16 11%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M6.31554 1.65838L0.382812 11H15.6249L9.69214 1.65838C8.90651 0.421336 7.10117 0.421335 6.31554 1.65838Z%27 fill=%27white%27/%3E%3C/svg%3E%0A);
+}
+
+.vitro-dropdown-button :global(.dropdown-item) {
+    display: flex;
+    align-items: center;
+    height: 37px;
+    padding: 8px 12px;
+    border: none;
+    box-shadow: none;
+    outline: none;
+    box-sizing: border-box;
+}
+
+.vitro-dropdown-button :global(.dropdown-item):first-child {
+    border-radius: 4px 4px 0 0;
+}
+
+.vitro-dropdown-button :global(.dropdown-item):last-child {
+    border-radius: 0 0 4px 4px;
+}
+
+.vitro-dropdown-button :global(.dropdown-menu) :global(.dropdown-item):hover,
+.vitro-dropdown-button :global(.dropdown-menu) :global(.dropdown-item):focus,
+.vitro-dropdown-button :global(.dropdown-menu) :global(.dropdown-item):active {
+    background: #F3F8FF;
+}
+
+.dropdown-item:global(.dropdown-item-empty) {
+    background: #fff;
+    color: #bdbdbd;
+    cursor: default;
+}

package/css/std/controls/input/input.css

@@ -106,12 +106,15 @@
 }
 
 .vitro-error-text {
-    display: flex;
-    align-items: center;
+    display: inline-block;
     color: #D13438;
     font-size: 14px;
     line-height: 135%;
     margin-top: 2px;
+    width: 100%;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
 }
 
 .vitro-focus .vitro-error-text {
@@ -121,8 +124,11 @@
 .vitro-error-text::before {
     content: '';
     display: inline-block;
+    vertical-align: text-top;
     height: 16px;
     width: 16px;
+    min-width: 16px;
+    min-height: 16px;
     margin-right: 4px;
     background-size: 100%;
     background-position: center;

package/css/std/controls/issue-tile/issue-tile-footer.css

@@ -0,0 +1,31 @@
+.vitro-issue-tile-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 6px;
+    padding-bottom: 20px;
+    border-bottom: 1px solid #E4E6EC;
+}
+
+.vitro-issue-tile-status {
+    display: flex;
+    align-items: center;
+}
+
+.vitro-status-color {
+    margin-right: 8px;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+}
+
+.vitro-button-more {
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+    background-size: 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+    /* more-detail.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon_line/maximize'%3E%3Cpath id='Vector' d='M7.62169 16.6641H3.33594M3.33594 16.6641V12.3783M3.33594 16.6641L8.33596 11.6641' stroke='%234A556C' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath id='Vector_2' d='M12.4974 3.33594H16.664M16.664 3.33594V7.5026M16.664 3.33594L11.6641 8.33594' stroke='%234A556C' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E%0A") !important;
+}

package/css/std/controls/issue-tile/issue-tile-header.css

@@ -0,0 +1,62 @@
+.vitro-issue-tile-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 22px;
+}
+
+.vitro-link {
+    padding: 4px 8px;
+    background: rgba(228, 230, 236, 0.50);
+    font-size: 14px;
+    line-height: 16px;
+    color: #326AD6;
+    border-radius: 4px;
+}
+
+.vitro-user-info {
+    display: flex;
+    align-items: center;
+    margin-left: 16px;
+}
+
+.vitro-user-info::after {
+    content: '';
+    display: block;
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    background: #4A556C;
+    margin-left: 16px;
+    margin-right: 16px;
+}
+
+.vitro-user-info > div:last-child {
+    display: flex;
+    flex-direction: column;
+}
+
+.vitro-avatar {
+    width: 28px;
+    height: 28px;
+    min-width: 28px;
+    line-height: 28px;
+    font-size: 14px;
+    margin-right: 8px;
+}
+
+.vitro-user-info > div span:last-child {
+    color: #4A556C;
+    font-size: 11px;
+    line-height: 11px;
+}
+
+.vitro-user-info > div span:first-child {
+    color: #222D44;
+    font-size: 14px;
+    line-height: 14px;
+    margin-bottom: 3px;
+}
+
+.vitro-dropdown-button {
+    margin-left: auto;
+}

package/css/std/controls/issue-tile/issue-tile.css

@@ -0,0 +1,24 @@
+.vitro-issue-tile {
+    cursor: pointer;
+    width: 100%;
+    padding: 20px 16px 0 16px;
+    box-sizing: border-box !important;
+}
+
+.vitro-control {
+    margin: 0;
+    padding: 0;
+}
+
+.vitro-control textarea {
+    box-sizing: border-box !important;
+}
+
+.vitro-issue-tile:global(.vitro-active) {
+    background: #F3F8FF;
+}
+
+.vitro-issue-tile:global(.vitro-active) .vitro-control div,
+.vitro-issue-tile:global(.vitro-active) .vitro-control textarea {
+    background: #F3F8FF;
+}

package/css/std/controls/label/label.css

@@ -1,8 +1,14 @@
 .vitro-label {
     font-size: inherit;
     margin-left: 0;
+    display: inline-block;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    max-width: calc(100% - 20px);
 }
 
 .vitro-label .vitro-required {
     color: red;
+    margin-left: 2px;
 }

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

@@ -137,6 +137,14 @@
     line-height: 135%;
 }
 
+.vitro-login-checkbox {
+    margin-bottom: 0;
+}
+
+.vitro-login-checkbox div {
+    font-size: 16px;
+}
+
 .vitro-button {
     font-family: 'InterMedium' !important;
     width: 100%;

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

@@ -1,6 +1,5 @@
 .vitro-selected-item {
     display: inline;
     margin: 0 6px 0 0;
-    display: flex;
-    align-items: center;
+    white-space: nowrap;
 }

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

@@ -8,7 +8,7 @@
     border-radius: 4px;
     display: flex;
     width: 100%;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
     align-items: center;
     height: 40px;
     padding: 8px 32px 8px 16px;
@@ -52,12 +52,16 @@
 }
 
 .vitro-error-text {
-    display: flex;
+    display: inline-block;
     align-items: center;
     color: #D13438;
     font-size: 14px;
     line-height: 135%;
     margin-top: 2px;
+    width: 100%;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
 }
 
 .vitro-focus .vitro-error-text {
@@ -67,8 +71,11 @@
 .vitro-error-text::before {
     content: '';
     display: inline-block;
+    vertical-align: text-top;
     height: 16px;
     width: 16px;
+    min-width: 16px;
+    min-height: 16px;
     margin-right: 4px;
     background-size: 100%;
     background-position: center;
@@ -76,13 +83,11 @@
 }
 
 .vitro-button-copy {
-    height: 16px;
-    width: 16px;
+    height: 24px;
+    width: 20px;
     display: inline-block;
-    position: absolute;
-    right: 8px;
-    top: calc(50% - 8px);
-    /* copy.svg URL-encoder for SVG */
+    right: 0;
+    /* 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;