@vitrosoftware/common-ui-ts 1.1.85 → 1.1.86

package/css/white/controls/date-time-picker/kendo-date-time-picker.css

@@ -0,0 +1,208 @@
+.vitro-control {
+  padding: 6px 0;
+  width: 100%;
+  position: relative;
+}
+
+.vitro-control > :global(.k-widget .k-picker-wrap) > input::-moz-selection {
+  background: #0097ff;
+}
+
+.vitro-control > :global(.k-widget .k-picker-wrap) > input::selection {
+  background: #0097ff;
+}
+
+.vitro-control input {
+  height: 32px !important;
+  font-size: 10pt !important;
+  background: #fff !important;
+  border: 1px solid #e0e0e0 !important;
+  border-right: none !important;
+  padding: 8px !important;
+  border-radius: 8px 0 0 8px !important;
+  color: #222d44 !important;
+}
+
+.vitro-control input:focus:not(:read-only) {
+  border-color: #0097ff !important;
+}
+
+.vitro-control.disabled > :global(.k-widget .k-picker-wrap.k-state-default > .k-select) {
+  background-color: rgb(245, 246, 250)
+}
+
+.vitro-control.disabled > :global(.k-widget .k-picker-wrap.k-state-default > .k-select > .k-icon) {
+  color: #222d44
+}
+
+.vitro-control > :global(.k-widget .k-picker-wrap.k-state-default > .k-select) {
+  border: 1px solid #e0e0e0;
+  border-left: none;
+  border-top-right-radius: 8px;
+  border-bottom-right-radius: 8px;
+  background: #fff;
+}
+
+.vitro-control:has(input:focus:not(:read-only)) :global(.k-widget .k-picker-wrap.k-state-default > .k-select) {
+  border-color: #0097ff !important;
+}
+
+.vitro-control > :global(.k-widget .k-picker-wrap.k-state-default > .k-select > .k-icon) {
+  color: #0097ff
+}
+
+.vitro-control > :global(.k-widget > .k-picker-wrap) {
+  border: none;
+  background: none;
+  border-radius: 8px;
+}
+
+.vitro-control-container {
+    position: relative;
+}
+
+:global(.k-time-header .k-time-now),
+:global(.k-action-buttons .k-primary),
+:global(.k-calendar .k-calendar-header .k-today),
+:global(.k-calendar .k-content .k-today),
+:global(.k-time-container .k-item:hover) {
+  color: #0097ff;
+}
+
+:global(.k-dateinput), :global(.k-datepicker), :global(.k-datetimepicker), :global(.k-timepicker) {
+    width: 100% !important;
+}
+
+:global(.k-animation-container), :global(.k-animation-container > div.k-timeselector), .vitro-control-container :global(.k-calendar-container) {
+  border-radius: 8px;
+  top: 6px;
+  min-width: 100% !important;
+}
+
+:global(.k-popup) {
+  border-bottom-left-radius: 8px !important;
+  border-bottom-right-radius: 8px !important;
+}
+
+:global(.k-dateinput),
+:global(.k-datepicker),
+:global(.k-datetimepicker),
+:global(.k-timepicker) {
+  width: 100% !important;
+}
+
+:global(.k-animation-container), :global(.k-animation-container > div.k-timeselector) {
+  width: 100% !important;
+}
+
+@media (min-width: 800px) {
+  :global(.k-animation-container), :global(.k-animation-container > div.k-timeselector) {
+    width: 100% !important;
+  }
+}
+
+:global(.k-dateinput), :global(.k-datepicker) {
+  width: 100%;
+}
+
+.vitro-control.disabled :global(.k-datepicker .k-picker-wrap) {
+  background: #F5F6FA;
+}
+
+:global(.k-calendar) {
+  border-radius: 8px;
+  padding: 6px 8px 8px;
+}
+
+:global(.k-calendar .k-calendar-view) {
+  height: auto;
+}
+
+:global(.k-calendar .k-footer .k-nav-today) {
+  display: none;
+}
+
+:global(.k-calendar .k-state-selected .k-link),
+:global(.k-calendar .k-state-selected.k-state-hover .k-link) {
+  border-color: #0097ff;
+  background-color: #0097ff;
+  color: #fff;
+  border-radius: 8px;
+  border-color: #fff;
+  box-shadow: none;
+}
+
+:global(.k-calendar td.k-link) {
+  border: none;
+}
+
+:global(.k-calendar .k-nav-next), :global(.k-calendar .k-nav-prev),
+:global(.k-calendar .k-nav-next):hover, :global(.k-calendar .k-nav-prev):hover {
+  background: #fff;
+  color: #BDBDBD;
+}
+
+:global(.k-calendar .k-link.k-nav-fast:hover) {
+  background: #fff;
+  color: #0097ff;
+}
+
+.vitro-control-container :global(.k-calendar-container) {
+  right: 0;
+}
+
+:global(.k-calendar .k-header) {
+  box-shadow: none;
+  border: none;
+  background: #fff;
+}
+
+:global(.k-datepicker) .vitro-control-container :global(.k-timepicker) .vitro-control-container {
+  z-index: 1010;
+  width: 100% !important;
+}
+
+:global(.k-datetimepicker), :global(.k-timepicker) {
+  width: 100%;
+}
+
+:global(.k-time-header) {
+  padding: 8px 8px 8px 16px;
+  line-height: 32px;
+}
+
+:global(.k-button.k-time-now) {
+  background: #0097ff !important;
+  border-radius: 8px;
+  color: #fff;
+  padding: 0 12px;
+  font-size: 10pt;
+  outline: none;
+}
+
+:global(.k-button.k-time-now:hover), :global(.k-button.k-time-now):active, :global(.k-button.k-time-now):focus {
+  background: rgba(0, 151, 255, .8);
+  color: #fff !important;
+}
+
+:global(.k-action-buttons .k-button) {
+  padding: 9px 16px;
+  font-size: 10pt;
+}
+
+:global(.k-action-buttons .k-button:not(.k-primary)) {
+  background: #fff;
+  border-bottom-left-radius: 8px;
+}
+
+:global(.k-action-buttons .k-primary) {
+  background: #0097ff;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 8px;
+  color: white;
+}
+
+:global(.k-action-buttons .k-primary:hover) {
+  background: rgba(0, 151, 255, .8);
+  border-color: rgba(0, 151, 255, .8);
+}

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

@@ -0,0 +1,42 @@
+.vitro-dialog-button-close {
+  display: block;
+  position: absolute;
+  border: none;
+  background: 0 0;
+  outline: 0;
+  cursor: pointer;
+  padding: 0;
+  width: 32px;
+  height: 32px;
+  right: -48px;
+  top: 2px;
+}
+
+.vitro-dialog-button-close svg {
+  width: 32px;
+  height: 33px;
+  stroke: #F5F6FA;
+  stroke-width: 2px;
+}
+
+.vitro-button-close {
+  background: #fff;
+  color: #0097ff;
+  border: 1px solid #0097ff;
+}
+
+.vitro-button-close:not(:disabled):active, .vitro-button-close:not(:disabled):focus, .vitro-button-close:not(:disabled):hover {
+  background: #fff;
+  border-color: rgba(0, 151, 255, .8);
+  color: rgba(0, 151, 255, .8);
+}
+
+.vitro-button-close :global(.vitro-effect-ripple) {
+  background-color: rgba(0, 151, 255, .4);
+}
+
+@media (max-width: 650px) {
+  .vitro-dialog-button-close {
+    display: none;
+  }
+}

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

@@ -0,0 +1,26 @@
+.vitro-dialog-button:disabled {
+    background: #E0E0E0;
+}
+
+.vitro-dialog-button > div {
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+}
+
+.vitro-dialog-button:hover {
+    -webkit-transition: background-color 0.3s ease;
+    transition: background-color 0.3s ease;
+}
+
+.vitro-dialog-button:hover :global(.vitro-icon-default) {
+    display: none;
+}
+
+.vitro-dialog-button:hover :global(.vitro-icon-hover) {
+    display: block !important;
+}

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

@@ -0,0 +1,63 @@
+.vitro-dialog-content {
+    min-width: auto;
+    max-height: none !important;
+    overflow: visible;
+    flex: none;
+    margin-bottom: 16px;
+}
+
+.vitro-dialog-content:not(:has(:global(.k-widget), :global(.vitro-timesheet-resource))) {
+    max-height: 330px !important;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding-right: 8px;
+    margin-right: -8px;
+}
+
+.vitro-dialog-content::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+.vitro-dialog-content::-webkit-scrollbar-track {
+    background: #fff;
+    border-radius: 12px;
+}
+
+.vitro-dialog-content::-webkit-scrollbar-thumb {
+    background: #e0e0e0;
+    border-radius: 4px;
+}
+
+.vitro-dialog-content {
+    scrollbar-color: #e0e0e0 #fff;
+    scrollbar-width: thin;
+}
+
+.vitro-dialog-content::-webkit-scrollbar-thumb:hover {
+    background: #BDBDBD;
+}
+
+.vitro-dialog-content > div:first-child {
+    padding-top: 0;
+    margin-top: 0;
+}
+
+.vitro-dialog-content :global(.vitro-time-log-history) :global(.ps),
+:global(.vitro-timesheet) > :global(.ps) {
+    position: relative;
+    margin-right: -16px;
+    padding-right: 16px;
+}
+
+.vitro-dialog-content :global(.ps) object {
+    display: none !important;
+}
+
+.vitro-dialog-content textarea {
+    max-height: 237px;
+}
+
+.vitro-dialog-content:has(div[role=alert]) textarea {
+    max-height: 140px;
+}

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

@@ -0,0 +1,15 @@
+.vitro-dialog-footer {
+    display: flex;
+    justify-content: flex-end;
+    z-index: 1000;
+    background: #fff;
+    position: absolute;
+    bottom: 24px;
+    right: 24px;
+    flex-direction: unset !important;
+}
+
+:global(.vitro-content) .vitro-dialog-footer {
+    bottom: 0;
+    right: 0;
+}

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

@@ -0,0 +1,6 @@
+.vitro-dialog-header {
+  font-size: 18px;
+  line-height: 24px;
+  font-weight: 500;
+  margin-bottom: 12px;
+}

package/css/white/controls/dialog/dialog.css

@@ -0,0 +1,52 @@
+.vitro-dialog {
+    position: fixed;
+    margin: 0 auto;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 10000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(34, 45, 68, .2);
+}
+
+.vitro-dialog > div {
+    border: 1px solid #c9cac8;
+    background: #fff;
+    position: absolute;
+    display: block;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    opacity: 1;
+    padding: 24px;
+    border-radius: 8px;
+    min-height: 200px;
+    width: 760px;
+}
+
+.vitro-dialog > div > div:has(div) {
+    display: flex;
+    flex-direction: column;
+}
+
+.vitro-dialog :global(.nav) + div {
+    min-height: 400px;
+}
+
+@media (max-width: 800px) {
+    .vitro-dialog > div {
+        width: calc(100% - 16px);
+    }
+}
+
+.vitro-dialog > div.modal-dialog {
+  width: auto;
+  min-width: auto !important;
+}
+
+.modal-dialog {
+  margin: 0;
+}

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

@@ -0,0 +1,107 @@
+.vitro-dropdown-button {
+    display: flex;
+    align-items: center;
+    font-family: "GraphikMedium";
+}
+
+.vitro-dropdown-button > :global(.dropdown) > button > svg {
+    margin-right: -10px;
+    fill: #e0e0e0 !important;
+}
+
+.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;
+}
+
+.vitro-dropdown-button button::after {
+    display: none;
+}
+
+.vitro-dropdown-button .vitro-text {
+    font-size: 10pt;
+}
+
+.vitro-dropdown-button .vitro-status {
+    border-radius: 50%;
+    width: 16px;
+    height: 16px;
+    vertical-align: sub;
+    margin-left: 10px;
+}
+
+.vitro-dropdown-button-item-overflow {
+    cursor: pointer;
+    white-space: nowrap;
+    display: flex;
+    padding: 0 0 0 6px;
+    font-size: 8pt;
+    color: #bdbdbd;
+}
+
+.vitro-dropdown-button-item-overflow .vitro-icon {
+    width: 15px;
+    height: 15px;
+    margin-right: 0;
+    margin-left: 6px;
+}
+
+.vitro-dropdown-button-item-overflow:hover {
+    color: #bdbdbd;
+    text-decoration: underline;
+}
+
+.vitro-dropdown-button-item-overflow > span {
+    padding-left: 6px;
+}
+
+:global(.dropdown-menu) {
+    box-shadow: 0 4px 16px rgb(0 0 0 / 10%);
+    box-shadow: rgb(0 0 0 / 13%) 0px 3.2px 7.2px 0px, rgb(0 0 0 / 11%) 0px 0.6px 1.8px 0px;
+    padding: 14px 0px;
+    border-radius: 8px;
+    border: none !important;
+    width: 234px;
+}
+
+:global(.dropdown-menu) a.dropdown-item:hover {
+    background: #F5F6FA;
+}
+
+:global(.dropdown-menu) a.dropdown-item,
+:global(.dropdown-menu) a.dropdown-item:focus {
+    outline: none;
+    box-shadow: none !important;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 10pt;
+    padding: 2px 16px 3px 16px;
+    color: #4F4F4F;
+}
+
+.dropdown-item:global(.dropdown-item-empty) {
+    background: #fff;
+    color: #bdbdbd;
+    cursor: default;
+}
+
+@media (max-width: 590px) {
+    .vitro-dropdown-button-item-overflow > span {
+        display: none;
+    }
+}

package/css/white/controls/expand-control-group/expand-control-group.css

@@ -0,0 +1,48 @@
+.vitro-title {
+    cursor: pointer;
+    color: #222d44;
+    font-size: 12pt;
+    padding: 2px 0 8px 0;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    position: relative;
+}
+
+.vitro-button-collapse,
+.vitro-button-expand {
+    vertical-align: middle;
+    margin-right: 8px;
+    margin-top: -2px;
+    width: 12px;
+    height: 12px;
+}
+
+.vitro-button-collapse {
+    background-image: url('@vitrosoftware/common-ui-ts/css/white/controls/expand-control-group/img/ico-collapse.svg');
+}
+
+.vitro-button-expand {
+    background-image: url('@vitrosoftware/common-ui-ts/css/white/controls/expand-control-group/img/ico-expand.svg');
+}
+
+.vitro-expand-control-group > .vitro-content {
+    margin: 8px 0 16px 0;
+}
+
+.vitro-display-none {
+    display: none;
+}
+
+.vitro-right.vitro-button-collapse,
+.vitro-right.vitro-button-expand {
+    vertical-align: middle;
+    width: 12px;
+    height: 12px;
+    margin-right: 35px !important;
+    margin-top: 2px !important;
+    float: right !important;
+}

package/css/white/controls/expand-control-group/img/ico-collapse.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 12 8" style="enable-background:new 0 0 12 8;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#BDBDBD;stroke-width:2;stroke-miterlimit:10;}
+</style>
+<polyline class="st0" points="11.3,7.3 6,1.5 0.7,7.3 "/>
+</svg>

package/css/white/controls/expand-control-group/img/ico-expand.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 12 8" style="enable-background:new 0 0 12 8;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#BDBDBD;stroke-width:2;stroke-miterlimit:10;}
+</style>
+<polyline class="st0" points="0.7,0.7 6,6.5 11.3,0.7 "/>
+</svg>

package/css/white/controls/header/header-customer-logo.css

@@ -0,0 +1,9 @@
+.vitro-customer-logo {
+    /* customer-logo.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='1024px' height='556px' viewBox='0 0 1024 556' enable-background='new 0 0 1024 556' xml:space='preserve'%3E%3Cimage id='image0' width='1024' height='556' x='0' y='0' href='data:image/png;base64,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%0AMDA6MDDR6mKcAAAAAElFTkSuQmCC' /%3E%3C/svg%3E%0A");
+    height: 16px;
+    min-width: 40px;
+    background-position: center center;
+    background-size: 140%;
+    margin-right: 20px;
+}

package/css/white/controls/header/header-nav-bar-sidebar-button.css

@@ -0,0 +1,22 @@
+.vitro-nav-bar-sidebar-button {
+    height: 32px;
+    padding: 6px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    cursor: pointer;
+}
+
+.vitro-nav-bar-sidebar-button svg {
+    width: 20px;
+    height: 20px;
+}
+
+:global(div.pinned:not(.toggled)) .vitro-nav-bar-sidebar-button {
+    background: #F5F6FA;
+}
+
+.vitro-nav-bar-sidebar-button svg {
+    fill: #BDBDBD;
+}

package/css/white/controls/header/header-nav-bar.css

@@ -0,0 +1,21 @@
+.vitro-nav-bar {
+    border-top: 1px solid #e0e0e0;
+    border-bottom: 1px solid #e0e0e0;
+    border-radius: 0 0 8px 8px;
+    padding: 0 36px 0 29px;
+    width: 100%;
+    height: 50px;
+    background-color: #fff;
+}
+
+@media (max-width: 800px) {
+    .vitro-nav-bar {
+      padding-right: 20px;
+    }
+}
+
+@media (max-width: 500px) {
+    .vitro-nav-bar {
+        padding: 0 24px 0 28px
+    }
+}

package/css/white/controls/header/header-nav-service.css

@@ -0,0 +1,14 @@
+.vitro-nav-service {
+    background: #fff;
+    height: 34px;
+    padding: 0 36px 0 26px !important;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+@media (max-width: 800px) {
+  .vitro-nav-service {
+    padding-right: 20px;
+  }
+}

package/css/white/controls/header/header.css

@@ -0,0 +1,6 @@
+.vitro-header {
+    position: relative;
+    width: 100%;
+    z-index: 1000;
+    background-color: #f5f6fa;
+}