@vitrosoftware/common-ui-ts 1.1.85 → 1.1.86

package/css/white/controls/image/image.css

@@ -0,0 +1,17 @@
+.vitro-image > .vitro-image-hover {
+    display: none;
+}
+
+.vitro-image:hover > .vitro-image-hover {
+  display: block;
+}
+
+.vitro-image:hover > .vitro-image-default {
+  display: none;
+}
+
+:global(.vitro-display-none) {
+    display: none;
+}
+
+

package/css/white/controls/input/input.css

@@ -0,0 +1,103 @@
+.vitro-control {
+  padding: 6px 0;
+  width: 100%;
+  position: relative;
+}
+
+.vitro-control:has(> textarea) {
+  padding: 6px 0 1px 0;
+}
+
+.vitro-control textarea {
+    background: #fff;
+    border: 1px solid #e0e0e0;
+    padding: 8px;
+    border-radius: 8px;
+    width: 100%;
+    line-height: 16px;
+}
+
+.vitro-control textarea:focus:not(:read-only) {
+    border-color: #0097ff !important;
+}
+
+textarea:disabled {
+    background: rgb(241, 241, 241) !important;
+}
+
+.vitro-control input {
+    height: 32px;
+    background: #fff;
+    border: 1px solid #e0e0e0;
+    padding: 8px;
+    border-radius: 8px;
+    width: 100%;
+}
+
+.vitro-control input:focus:not(:read-only) {
+    border-color: #0097ff !important;
+}
+
+.vitro-icon-control {
+    border: 1px solid #E0E0E0;
+    padding: 0.2rem 0.5rem;
+    margin-right: 30px;
+    border-radius: 8px;
+    width: 100%;
+    min-height: 40px;
+    display: flex;
+    background: #fff;
+    cursor: pointer;
+}
+
+.vitro-icon-control input {
+    border: none !important;
+    padding: 0 0.5rem;
+    margin: 0px;
+    background: #fff;
+}
+
+.vitro-control.disabled, input:disabled, input:read-only {
+    background: rgb(241, 241, 241) !important;
+}
+
+.left-label {
+    display: flex;
+    align-items: center;
+}
+
+.left-label .vitro-label {
+    margin-right: 5px;
+    width: 300px;
+}
+
+textarea::-webkit-scrollbar {
+  width: 8px;
+}
+
+textarea::-webkit-scrollbar-track {
+  background: #fff;
+  border-radius: 8px;
+}
+
+textarea::-webkit-scrollbar-thumb {
+  background: #e0e0e0;
+  border-radius: 4px;
+}
+
+textarea::-webkit-scrollbar:hover {
+  background: #828282;
+}
+
+textarea {
+  scrollbar-color: #e0e0e0 #fff;
+  scrollbar-width: thin;
+}
+
+.vitro-control small {
+  color: #ff5b2d;
+}
+
+.vitro-control:has(> small) input {
+  border-color: #ff5b2d;
+}

package/css/white/controls/label/label.css

@@ -0,0 +1,8 @@
+.vitro-label {
+    font-size: inherit;
+    margin-left: 0;
+}
+
+.vitro-label .vitro-required {
+    color: red;
+}

package/css/white/controls/lookup-picker/lookup-picker-placeholder.css

@@ -0,0 +1,3 @@
+.vitro-placeholder-required {
+    color: #ff5b2d;
+}

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

@@ -0,0 +1,21 @@
+.vitro-selected-item {
+    display: inline;
+    margin: 0 6px 0 0;
+}
+
+.vitro-selected-item > svg {
+    margin-left: 2px;
+    width: 8px;
+    height: 8px;
+    cursor: pointer;
+    stroke: #222d44;
+}
+
+.vitro-selected-item > span {
+  vertical-align: bottom;
+}
+
+.vitro-selected-item > svg {
+  stroke: #ff5b2d;
+  stroke-width: 4 !important;
+}

package/css/white/controls/lookup-picker/lookup-picker-value-list.css

@@ -0,0 +1,59 @@
+.vitro-value-list {
+    position: absolute;
+    z-index: 1001;
+    min-width: 100%;
+    border-radius: 8px;
+    height: 300px;
+}
+
+.vitro-value-list > :global(.ps) {
+  padding-right: 0 !important;
+}
+
+.vitro-value-list > :global(.ps.ps--active-y),
+.vitro-value-list > :global(.ps:not(.ps--active-y)) > div {
+    background: #fff;
+    border: 1px solid #e0e0e0 !important;
+    border-radius: 8px;
+    box-shadow: rgb(0 0 0 / 13%) 0px 3.2px 7.2px 0px, rgb(0 0 0 / 11%) 0px 0.6px 1.8px 0px;
+}
+
+.vitro-value-list div.vitro-item {
+    padding: 4px 12px;
+    cursor: pointer;
+    border-radius: 0px;
+}
+
+.vitro-value-list div:nth-child(2) {
+    border-radius: 8px 8px 0 0;
+}
+
+.vitro-value-list div:last-child {
+    border-radius: 0 0 8px 8px;
+}
+
+.vitro-value-list div.vitro-item:hover {
+    background: #F5F6FA;
+}
+
+.vitro-value-list .vitro-placeholder-empty {
+    padding: 10px 20px;
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+    color: #e0e0e0
+}
+
+.vitro-value-list .vitro-placeholder-empty {
+    display: block;
+    text-align: center;
+}
+
+.vitro-keyword-highlight {
+    color: #ff5b2d;
+}
+
+.vitro-display-none {
+  display: none;
+}

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

@@ -0,0 +1,83 @@
+.vitro-lookup-picker {
+    padding: 6px 0;
+}
+
+.vitro-lookup-picker :global(.preview-roller-wrapper) {
+    height: 100px;
+    background: none;
+}
+
+.vitro-lookup-picker-disabled > .vitro-content {
+  background: #F5F6FA;
+}
+
+.vitro-content {
+    border: 1px solid #e0e0e0;
+    border-radius: 8px;
+    display: inline-block;
+    width: 100%;
+    flex-wrap: wrap;
+    align-items: center;
+    min-height: 32px;
+    padding: 4px 32px 4px 8px;
+    position: relative;
+}
+
+.vitro-content > input {
+    border: none;
+    background: transparent;
+    flex: 1 1;
+    min-width: 100px;
+}
+
+.vitro-content:has(input:focus) {
+    border-color: #0097ff;
+}
+
+.vitro-content > svg polyline {
+  fill: none;
+  stroke: #BDBDBD;
+  stroke-width: 2;
+  stroke-miterlimit: 10;
+}
+
+.vitro-content > .vitro-right {
+    position: absolute;
+    right: 8px;
+    top: calc(50% - 8px);
+    display: flex;
+}
+
+.vitro-content > .vitro-right > div {
+    margin-left: 8px;
+    line-height: 16px;
+}
+
+.vitro-content > .vitro-right svg {
+    cursor: pointer;
+    fill: none;
+    stroke: #BDBDBD;
+}
+
+.vitro-content > .vitro-right > .vitro-close > svg {
+    width: 8px;
+    height: 8px;
+}
+
+.vitro-content > .vitro-right > .vitro-close > svg {
+    stroke: #ff5b2d;
+    stroke-width: 4 !important;
+}
+
+.vitro-content > .vitro-right > .vitro-close > svg > path {
+    stroke-width: 4;
+}
+
+.vitro-toggle > svg > path {
+    stroke-width: 1;
+}
+
+.vitro-toggle > svg {
+    width: 12px;
+    height: 12px;
+}

package/css/white/controls/main/main.css

@@ -0,0 +1,23 @@
+.vitro-main {
+    width: 100%;
+    overflow-x: hidden;
+    flex: 1 1;
+}
+
+.vitro-main > div {
+    background: #f5f6fa;
+    overflow-y: hidden;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+:global(.toggled.pinned) .vitro-main {
+    padding-left: 90px;
+}
+
+@media (max-width: 800px) {
+    :global(.toggled.pinned) .vitro-main {
+      padding-left: 0px;
+    }
+}

package/css/white/controls/message-input/message-input.css

@@ -0,0 +1,103 @@
+.vitro-message-input {
+    display: flex;
+    align-items: flex-start;
+    border-top: 1px solid #e0e0e0;
+    padding-top: 12px;
+}
+
+.vitro-message-input .vitro-control {
+    width: 100%;
+    position: relative;
+    padding: 0;
+    border-radius: 8px;
+    border: 1px solid #e0e0e0;
+}
+
+.vitro-icon-control {
+    display: flex;
+    align-items: flex-start;
+    min-height: 30px;
+    padding: 0;
+    cursor: auto;
+    padding: 2px 4px;
+}
+
+.vitro-icon-control textarea {
+    border: none !important;
+    padding: 0 0.5rem;
+    margin: 0px;
+    background: #fff;
+}
+
+.vitro-message-input :global(.vitro-icon) {
+    height: 22px;
+    width: 26px;
+    margin-top: 2px;
+    margin-left: -1px;
+    cursor: pointer;
+}
+
+.vitro-icon-control div[contenteditable="true"] p {
+    margin: 0;
+    min-height: 19px;
+    line-height: 26px;
+    margin-left: 4px;
+}
+
+:global(.vitro-input-upload-file) {
+    height: 24px;
+}
+
+:global(.vitro-input-upload-file) input {
+    display: none;
+}
+
+:global(.vitro-input-upload-file) label {
+    margin-bottom: 0px;
+}
+
+/* summernote */
+:global(.card-header), textarea:global(.note-codable), :global(.note-statusbar), :global(.note-table-popover.bottom), :global(.note-link-popover.bottom), :global(.note-dropzone) {
+    display: none;
+}
+
+:global(.note-editor) {
+    width: 100%;
+    border: none !important;
+}
+
+:global(.note-editable) {
+    color: #4F4F4F;
+}
+
+:global(.note-editable) img {
+    max-width: 200px;
+    display: block;
+}
+
+:global(.note-popover.popover) {
+    max-width: 440px;
+    max-height: 150px;
+    overflow-y: auto;
+    border: none;
+    background: #fff;
+    box-shadow: 0 4px 16px rgb(0 0 0 / 10%);
+    border-radius: 8px;
+    margin-bottom: 8px;
+}
+
+:global(.note-popover.popover div.note-hint-group) {
+    padding: 8px 0;
+}
+
+:global(.note-hint-item) {
+    padding: 4px 8px;
+    font-family: "GraphikRegular";
+    font-size: 10pt;
+    line-height: 11pt;
+    cursor: pointer;
+}
+
+:global(.note-hint-item):hover {
+    background: #F5F6FA;
+}

package/css/white/controls/page-layout/page-layout.css

@@ -0,0 +1,5 @@
+.vitro-page {
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+}

package/css/white/controls/product-title/product-title.css

@@ -0,0 +1,22 @@
+.vitro-product-title {
+    display: flex;
+    user-select: none;
+}
+
+.vitro-product-title img {
+    height: 27px;
+    margin: 0px 12px 0 30px;
+}
+
+.vitro-product-title h1 {
+    font-size: 24px;
+    color: #fff;
+    margin-bottom: 5px;
+}
+
+
+@media (max-width: 500px) {
+    .vitro-product-title {
+        display: none;
+    }
+}

package/css/white/controls/progress/progress.css

@@ -0,0 +1,121 @@
+.vitro-progress-container {
+    width: 100%;
+    height: 100%;
+    background: #fff;
+}
+
+.vitro-progress {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+}
+
+.lds-roller {
+    width: 64px;
+    height: 64px;
+}
+
+.lds-roller div {
+    animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+    transform-origin: 32px 32px;
+}
+
+.lds-roller div:after {
+    content: " ";
+    display: block;
+    position: absolute;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: #0097ff;
+    margin: -3px 0 0 -3px;
+}
+
+.lds-roller div:nth-child(1) {
+    animation-delay: -0.036s;
+}
+
+.lds-roller div:nth-child(1):after {
+    top: 50px;
+    left: 50px;
+}
+
+.lds-roller div:nth-child(2) {
+    animation-delay: -0.072s;
+}
+
+.lds-roller div:nth-child(2):after {
+    top: 54px;
+    left: 45px;
+}
+
+.lds-roller div:nth-child(3) {
+    animation-delay: -0.108s;
+}
+
+.lds-roller div:nth-child(3):after {
+    top: 57px;
+    left: 39px;
+}
+
+.lds-roller div:nth-child(4) {
+    animation-delay: -0.144s;
+}
+
+.lds-roller div:nth-child(4):after {
+    top: 58px;
+    left: 32px;
+}
+
+.lds-roller div:nth-child(5) {
+    animation-delay: -0.18s;
+}
+
+.lds-roller div:nth-child(5):after {
+    top: 57px;
+    left: 25px;
+}
+
+.lds-roller div:nth-child(6) {
+    animation-delay: -0.216s;
+}
+
+.lds-roller div:nth-child(6):after {
+    top: 54px;
+    left: 19px;
+}
+
+.lds-roller div:nth-child(7) {
+    animation-delay: -0.252s;
+}
+
+.lds-roller div:nth-child(7):after {
+    top: 50px;
+    left: 14px;
+}
+
+.lds-roller div:nth-child(8) {
+    animation-delay: -0.288s;
+}
+
+.lds-roller div:nth-child(8):after {
+    top: 45px;
+    left: 10px;
+}
+
+.vitro-placeholder {
+    color: #0097ff;
+    text-align: center;
+    margin-top: 6px;
+}
+
+@keyframes lds-roller {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}

package/css/white/controls/radio/radio.css

@@ -0,0 +1,19 @@
+.vitro-control {
+    padding: 6px 0;
+    width: 100%;
+    position: relative;
+}
+
+.vitro-radio-content {
+    width: 100%;
+    display: flex;
+    align-items: center;
+}
+
+.vitro-radio-content > input {
+    width: auto;
+}
+
+.vitro-radio-content .vitro-label {
+    margin: 0px 5px;
+}

package/css/white/controls/right-align-control-group/right-align-control-group.css

@@ -0,0 +1,10 @@
+.vitro-right {
+    padding-right: 0;
+    display: flex;
+    align-items: center;
+}
+
+.vitro-right > div {
+    display: flex;
+    align-items: center;
+}