@vitrosoftware/common-ui-ts 1.1.113 → 1.1.114

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

@@ -83,4 +83,38 @@
     max-height: 2000px;
     overflow: hidden;
     transition: max-height 0.4s ease;
+}
+
+@media (max-width: 800px) {
+    .vitro-result-item {
+        padding: 4px 0;
+    }
+
+    .vitro-result-item:nth-child(2) {
+        padding-top: 8px;
+    }
+
+    .vitro-error-message,
+    .vitro-success-message {
+        margin-top: 0;
+    }
+
+    .vitro-scrollbar > div:first-child {
+        padding-right: 12px;
+    }
+
+    .vitro-scrollbar :global(.ps__rail-y) {
+        border: none;
+        width: 8px !important;
+    }
+
+    .vitro-scrollbar :global(.ps__thumb-y) {
+        width: 2px !important;
+        right: 3px !important;
+    }
+
+    .vitro-action-result-list {
+        padding-left: 8px;
+    }
+
 }

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

@@ -12,6 +12,7 @@
 .vitro-image {
     height: 40px;
     width: 40px;
+    flex-shrink: 0;
     margin-right: 8px;
     background-size: 100%;
     background-repeat: no-repeat;

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

@@ -121,4 +121,24 @@
     background-repeat: no-repeat;
     background-position: center;
     background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/action-handler/img/save-blue.svg');
+}
+
+@media (max-width: 800px) {
+    .vitro-result-dialog {
+        width: calc(100% - 24px) !important;
+        max-width: 400px;
+        max-height: 48%;
+        right: 12px;
+        top: 12px;
+    }
+
+    .vitro-header {
+        padding: 8px 12px;
+    }
+
+    .vitro-result-dialog.vitro-success .vitro-header,
+    .vitro-result-dialog.vitro-error .vitro-header {
+        padding: 8px 12px 8px 8px;
+    }
+
 }

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

@@ -14,6 +14,7 @@
     width: 24px;
     height: 24px;
     margin-right: 4px;
+    flex-shrink: 0;
     cursor: pointer;
     appearance: none;
     -webkit-appearance: none;

package/css/std/controls/criterion/criterion.css

@@ -1,8 +1,6 @@
 .vitro-criterion-container {
     width: 100%;
     position: relative;
-    display: flex;
-    align-items: center;
     margin-bottom: 28px;
 }
 
@@ -36,8 +34,6 @@
     font-size: 12px;
     border-radius: 4px;
     background: #F7F9FC;
-    display: flex;
-    align-items: center;
     justify-content: center;
     position: relative;
 }
@@ -46,6 +42,7 @@
     display: inline-block;
     line-height: 16px;
     font-size: 12px;
+    color: #4A556C;
 }
 
 .vitro-operator-select::after {
@@ -60,10 +57,6 @@
 }
 
 .vitro-operator-list {
-    position: absolute;
-    z-index: 10;
-    top: calc(100% + 2px);
-    right: 0;
     width: fit-content;
     min-width: 100%;
     overflow: hidden;
@@ -76,7 +69,14 @@
 }
 
 .vitro-operator-list li {
-    padding: 8px 12px;
+    padding: 4px 12px;
+    line-height: 150%;
+    cursor: pointer;
+    border-bottom: 1px solid rgba(228, 230, 236, 0.5);
+}
+
+.vitro-operator-list li:last-child {
+    border-bottom: none;
 }
 
 .vitro-operator-list li:hover,
@@ -90,16 +90,10 @@
 }
 
 .vitro-button-cancel {
-    width: 20px;
-    height: 20px;
-    min-width: 20px;
+    flex-shrink: 0;
     margin-left: 2px;
     margin-top: -10px;
     align-self: flex-start;
-    border: none;
-    background-color: transparent;
-    background-size: 100%;
-    background-position: center;
     background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/criterion/img/cancel-grey.svg');
 }
 
@@ -149,18 +143,32 @@
 
 .vitro-condition-list-container,
 .vitro-operator-list-container {
-    position: absolute;
     z-index: 1000000;
 }
 
+.vitro-condition-list-container {
+    margin-top: 13px;
+    margin-left: -8px;
+}
+
+.vitro-condition-list-container[placement='top-start'] {
+    margin-bottom: 13px;
+}
+
+.vitro-condition-list-container[placement='top-start'] .vitro-condition-list::before {
+    bottom: -20px;
+    top: unset;
+    transform: rotate(180deg);
+}
+
+.vitro-operator-list-container {
+    margin-top: 4px;
+}
+
 .vitro-condition-list {
-    width: fit-content;
-    min-width: 270px;
+    min-width: 241px;
     border-radius: 4px;
     background: #fff;
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
     box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.18), 0px 0px 4px 0px rgba(0, 0, 0, 0.14);
 }
 
@@ -175,32 +183,58 @@
     background-repeat: no-repeat;
     position: absolute;
     top: -21px;
-    left: 12px;
+    left: 20px;
     background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/criterion/img/dropdown-menu-arrow.svg');
 }
 
-.vitro-condition-list li {
-    padding: 8px 12px;
+.vitro-condition {
+    padding: 0 12px;
+    height: 32px;
     cursor: pointer;
-    display: flex;
-    align-items: center;
-    grid-gap: 12px;
+    gap: 12px;
 }
 
-.vitro-condition-list li:first-child {
+.vitro-condition:first-child {
     border-radius: 4px 4px 0 0;
 }
 
-.vitro-condition-list li:last-child {
+.vitro-condition:last-child {
     border-radius: 0 0 4px 4px;
 }
 
-.vitro-condition-list li:hover,
-.vitro-condition-list li:active {
+.vitro-condition:hover,
+.vitro-condition:active {
     background: #F3F8FF;
 }
 
-.vitro-condition-list .vitro-image {
+.vitro-condition :global(.vitro-image) {
     height: 20px;
     width: 20px;
+}
+
+.vitro-criterion-container-mobile {
+    position: relative;
+    flex-direction: column-reverse;
+    align-items: flex-start;
+    gap: 22px;
+    margin-top: 12px;
+}
+
+.vitro-criterion-container-mobile {
+    position: relative;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 22px;
+    margin-top: 12px;
+}
+
+.vitro-criterion-container-mobile .vitro-control {
+    width: 100%;
+}
+
+.vitro-criterion-container-mobile .vitro-button-cancel {
+    position: absolute;
+    bottom: 40px;
+    right: 0;
+    margin: 0;
 }

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

@@ -16,7 +16,7 @@
 
 .vitro-button {
     min-width: 139px;
-    height: 40px !important;
+    height: 40px;
     font-size: 16px;
 }
 

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

@@ -1,13 +1,17 @@
+.vitro-image-button {
+    width: 20px;
+    height: 20px;
+}
+
 .vitro-image-button,
 .vitro-image-button:hover,
 .vitro-image-button:active {
-    width: 20px;
-    height: 20px;
     flex-shrink: 0;
     background-position: center;
     background-size: 100%;
     background-repeat: no-repeat;
     border: none;
     outline: none;
+    padding: 0;
     background-color: transparent;
 }

package/css/std/controls/list/list.css

@@ -0,0 +1,10 @@
+.vitro-list {
+    width: 100%;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+
+.vitro-list li {
+    cursor: pointer;
+}

package/css/std/controls/search/checkbox-list.css

@@ -1,7 +1,11 @@
 .vitro-checkbox-list {
     border-radius: 4px;
     background: #fff;
-    max-width: 307px;
+    max-width: 252px;
+}
+
+.vitro-search-value-list > div:first-child {
+    padding: 12px 12px 8px 12px;
 }
 
 .vitro-checkbox-list :global(.ps) > div:first-child {
@@ -10,19 +14,8 @@
 
 .vitro-checkbox-list .vitro-checkbox {
     margin-bottom: 4px;
-    height: 24px;
-}
-
-.vitro-checkbox-list .vitro-checkbox input {
-    width: 16px;
-    height: 16px;
 }
 
-.vitro-checkbox:last-child,
-.vitro-checkbox-list span {
-    margin-bottom: 8px;
-}
-
-.vitro-checkbox-list span {
-    display: block;
-}
+.vitro-checkbox:last-child {
+    padding-bottom: 8px;
+}

package/css/std/controls/search/search.css

@@ -17,27 +17,42 @@
     top: 36px;
     right: 0;
     z-index: 2;
+}
+
+.vitro-filter-container {
     padding: 24px 0 16px 12px;
     display: flex;
     flex-direction: column;
+    align-self: stretch;
+    width: 502px;
 }
 
 .vitro-filter {
-    width: 449px;
+    overflow: hidden;
 }
 
-.vitro-scrollbar {
-    max-height: 300px;
+.vitro-filter :global(.ps) {
+    max-height: 458px;
 }
 
-.vitro-scrollbar:global(.ps--active-y) {
+.vitro-filter :global(.ps.ps--active-y) {
     padding-right: 14px;
 }
 
+.vitro-filter :global(.ps) > div:first-child {
+    padding-top: 10px;
+}
+
+.vitro-filter :global(.vitro-block:last-child) > div > div {
+    margin-bottom: 0;
+}
+
+.vitro-filter :global(.vitro-block:nth-child(2)) {
+    margin-top: 0;
+}
+
 .vitro-add-field {
-    position: relative;
-    margin-bottom: 16px;
-    margin-top: 18px;
+    margin: 18px 0 16px 66px;
 }
 
 .vitro-add-field-button,
@@ -46,38 +61,45 @@
     font-family: 'InterRegular' !important;
     background: #fff !important;
     color: #326AD6 !important;
-    margin-left: 66px;
     padding: 0 !important;
     min-width: unset !important;
     height: 16px !important;
+    font-size: 12px;
+    line-height: 16px;
 }
 
 .vitro-add-field-dialog {
-    position: absolute;
-    z-index: 100;
-    top: 32px;
-    left: 0;
+    z-index: 10001;
+    overflow: hidden;
     border-radius: 4px;
     box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.18), 0px 0px 4px 0px rgba(0, 0, 0, 0.14);
 }
 
+.vitro-add-field-dialog[placement='right-start'] {
+    margin-top: -4px;
+    margin-left: 14px;
+}
+
 .vitro-add-field-dialog :global(.ps) > div:first-child {
     max-height: 204px;
+    max-width: 242px;
 }
 
-.vitro-footer {
-    display: flex;
-    grid-gap: 12px;
-    justify-content: flex-end;
+.vitro-button-group {
+    gap: 12px;
     padding: 0 24px;
     margin-top: auto;
 }
 
+.vitro-button,
+.vitro-button-cancel {
+    padding: 8px 16px;
+    font-family: 'InterRegular' !important;
+}
+
 .vitro-button-cancel {
     background: #fff !important;
     color: #222D44 !important;
-    font-family: 'InterRegular' !important;
-    border: 1px solid #E4E6EC !important;
 }
 
 .vitro-button-cancel:hover,
@@ -107,8 +129,77 @@
     background-color: #DCEEFF;
 }
 
-@media (max-width: 800px) {
-    .vitro-filter {
-        width: 100%;
-    }
+.vitro-search-mobile {
+    position: relative;
+    align-self: baseline; 
+    margin-left: auto;
+}
+
+.vitro-settings-dialog-mobile {
+    height: 100%;
+    width: 100%;
+    max-width: unset !important;
+    border: none !important;
+    border-radius: 0 !important;
+}
+
+.vitro-settings-dialog-mobile .vitro-filter-container {
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+    flex: 1 1;
+    padding: 0 0 0 15px;
 }
+
+.vitro-settings-dialog-header {
+    padding: 20px 15px 15px 15px;
+}
+
+.vitro-settings-dialog-footer {
+    border: none;
+    background-color: #fff;
+    height: unset;
+    padding: 28px 15px;
+}
+
+.vitro-settings-dialog-footer button {
+    height: 32px;
+}
+
+.vitro-settings-dialog-header h1 {
+    font-size: 18px !important;
+    line-height: 150% !important;
+}
+
+.vitro-settings-dialog-mobile .vitro-add-field {
+    margin: 18px 0 0 4px;
+}
+
+.vitro-settings-dialog-mobile .vitro-filter :global(.ps) {
+    max-height: unset;
+    padding-right: 15px;
+}
+
+.vitro-settings-dialog-mobile .vitro-filter :global(.ps) > div:first-child {
+    padding-top: 0;
+}
+
+.vitro-settings-dialog-mobile .vitro-filter :global(.vitro-block:last-child) > div > div {
+    margin-top: 12px;
+}
+
+.vitro-settings-dialog-mobile .vitro-filter :global(.ps) > div > div {
+    padding: 0;
+}
+
+.vitro-settings-dialog-mobile .vitro-scrollbar > div > div > :global(.vitro-block):first-child > div > div {
+    margin: 0;
+}
+
+.vitro-add-field-dialog[placement='bottom-start'] {
+    margin-top: 7px;
+}
+
+.vitro-add-field-dialog[placement='top-start'] {
+    margin-bottom: 7px;
+}

package/css/std/controls/search-input/img/search-blue.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.1303 20.8499C20.596 21.313 21.3149 20.5982 20.8491 20.1451L17.0525 16.3597C18.3843 14.8944 19.1205 12.9889 19.1179 11.0138C19.1179 6.59414 15.5035 3 11.0589 3C6.61438 3 3 6.59414 3 11.0138C3 15.4335 6.61438 19.0276 11.0589 19.0276C13.0636 19.0276 14.9163 18.2927 16.3337 17.0745L20.1303 20.8499ZM4.01142 11.0138C4.01142 7.14785 7.18032 4.00676 11.0579 4.00676C14.9457 4.00676 18.1044 7.14785 18.1044 11.0138C18.1044 14.8798 14.9457 18.0209 11.0579 18.0209C7.18032 18.0209 4.01142 14.8798 4.01142 11.0138Z" fill="#326AD6"/>
+</svg>

package/css/std/controls/search-input/search-input.css

@@ -3,8 +3,6 @@
     border-radius: 4px;
     border: 1px solid #C0CAD5;
     padding: 4px 8px;
-    display: flex;
-    align-items: center;
 }
 
 .vitro-search-input:global(.vitro-active) {
@@ -33,16 +31,9 @@
     overflow: hidden;
 }
 
-.vitro-search-input :global(.vitro-button-search),
-.vitro-search-input :global(.vitro-button-search):hover {
+.vitro-search-input :global(.vitro-button-search) {
     width: 24px;
     height: 24px;
-    border: none;
-    outline: none;
-    flex-shrink: 0;
-    background-color: transparent;
-    background-size: 100%;
-    background-position: center;
     margin-right: 8px;
     background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/search-input/img/search.svg');
 }
@@ -53,19 +44,10 @@
     background-color: #fff;
 }
 
-.vitro-button-cancel,
-.vitro-button-cancel:hover {
+.vitro-button-cancel {
     width: 24px;
     height: 24px;
-    flex-shrink: 0;
-    border: none;
-    background-size: 100%;
-    background-position: center;
     margin-left: 8px;
-    background-color: transparent;
-}
-
-.vitro-button-cancel {
     background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/search-input/img/cancel-black.svg');
 }
 
@@ -92,21 +74,20 @@
     background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/search-input/img/cancel-dark-grey.svg');
 }
 
-@media (max-width: 800px) {
-    .vitro-search-input,
-    .vitro-search-input:global(.vitro-active) {
-        border: none;
-        padding: 0;
-    }
+.vitro-search-input-mobile {
+    width: 32px;
+    height: 32px;
+}
 
-    .vitro-search-input :global(.vitro-button-search) {
-        margin: 0;
-        height: 32px;
-        width: 32px;
-        border-radius: 4px;
-    }
+.vitro-search-input-mobile :global(.vitro-button-search) {
+    width: 32px;
+    height: 32px;
+    border-radius: 4px;
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/search-input/img/search.svg');
+}
 
-    :global(.vitro-active):global(.vitro-button-search) {
-        background-color: #DCEEFF;
-    }
+.vitro-search-input-mobile:global(.vitro-active) :global(.vitro-button-search) {
+    background-color: #DCEEFF;
+    background-size: 24px;
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/search-input/img/search-blue.svg');
 }