@vitrosoftware/common-ui-ts 1.1.84 → 1.1.86

package/css/white/controls/alert/alert.css

@@ -0,0 +1,180 @@
+.vitro-alert {
+    border: 0;
+    line-height: 12px;
+    z-index: 1000;
+    position: absolute;
+    right: 0;
+    width: 400px;
+    box-shadow: 0 4px 16px #bdbdbd;
+    border-radius: 4px;
+    padding: 16px !important;
+}
+
+:global(#Timesheets) .vitro-alert {
+  position: relative;
+  width: 100%;
+  margin-bottom: 6px !important;
+  top: 0 !important;
+  left: 0 !important;
+  transform: none !important;
+}
+
+.alert-content {
+    display: flex;
+    align-items: start;
+    height: auto;
+}
+
+.vitro-alert-close-button {
+    background-color: transparent;
+    border: 0;
+    outline: none;
+    padding: 0px;
+}
+
+.vitro-alert-close-button > svg {
+    width: 10px;
+    height: 10px;
+    stroke: #222d44;
+}
+
+.icon {
+    font-size: 24px;
+    display: flex;
+    flex-shrink: 0;
+    margin-right: 12px;
+}
+
+.text {
+    min-width: 0px;
+    display: flex;
+    flex-grow: 1;
+    -webkit-font-smoothing: antialiased;
+    font-size: 14px;
+    font-weight: 500;
+    margin: 4px 0 3px 0;
+    line-height: 20px;
+}
+
+.text a {
+    text-decoration: underline;
+}
+
+.text p {
+    margin: 0px;
+}
+
+.text strong {
+    display: block;
+}
+
+.vitro-alert-action-list {
+    display: flex;
+    flex-grow: 0;
+    flex-shrink: 0;
+    flex-basis: auto;
+    align-items: center;
+    margin-right: 6px;
+    margin-left: 8px;
+    padding: 0px;
+}
+
+:global(.vitro-alert-position-center) {
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.vitro-alert ul:global(.errorList) {
+    -webkit-font-smoothing: antialiased;
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 500;
+    list-style: disc;
+    max-height: 440px;
+    overflow: hidden;
+    display: block;
+}
+
+.vitro-alert > ul:global(.errorList) {
+    list-style: decimal;
+}
+
+.vitro-alert > ul:global(.errorList) > li a {
+    text-decoration: underline;
+}
+
+.vitro-alert a:global(.link) {
+    text-decoration: underline;
+    white-space: pre-wrap;
+}
+
+.vitro-alert button:global(.btn) {
+    margin-left: 8px;
+    background: white;
+    color: #616365;
+    font-size: 13px;
+    padding: 0.1rem 16px;
+    border: 1px solid rgb(138, 136, 134);
+    font-weight: 600;
+    min-width: 80px;
+    border-radius: 2px;
+}
+
+.vitro-alert :global(.btn):active, .vitro-alert :global(.btn):focus {
+  outline: none !important;
+}
+
+.vitro-alert > div :global(.header) {
+    font-weight: 500;
+    font-size: 15px;
+}
+
+.vitro-alert button:global(.close) {
+    position: relative;
+    padding: 0.2rem;
+}
+
+.vitro-alert button:global(.btn.error) {
+    margin-left: 8px;
+    font-size: 13px;
+    font-weight: bold;
+    padding: 0.1rem 0.75rem;
+    border-radius: 0;
+}
+
+.vitro-alert :global(.btn.danger),
+.vitro-alert :global(.btn.warning) {
+    margin: 5px;
+}
+
+.vitro-alert:global(.alert-danger) {
+    border: none;
+    background-color: #fff !important;
+    border-left: 4px solid #ff5b2d;
+    color: #222d44;
+}
+
+.vitro-alert:global(.alert-success) {
+    border: none;
+    background-color: #fff !important;
+    border-left: 4px solid #27ae60;
+    color: #222d44;
+}
+
+.vitro-alert:global(.alert-warning) {
+    border: none;
+    background-color: #fff !important;
+    border-left: 4px solid #bdbdbd;
+    color: #222d44;
+}
+
+@media screen and (max-width: 768px) {
+    .vitro-alert {
+        width: auto !important;
+    }
+
+    :global(.pinned) .vitro-alert {
+        margin-left: 60px;
+    }
+}

package/css/white/controls/avatar/avatar.css

@@ -0,0 +1,18 @@
+.vitro-avatar {
+    border-radius: 5px;
+    border: 0;
+    background: rgb(29, 201, 183);
+    margin-right: 8px;
+    color: #fff;
+    min-width: 32px;
+    height: 32px;
+    line-height: 32px;
+    position: relative;
+    text-align: center;
+    font-size: 16px;
+    padding-top: 1px;
+}
+
+.vitro-avatar.rounded {
+    border-radius: 50%;
+}

package/css/white/controls/button/button.css

@@ -0,0 +1,98 @@
+button:focus {
+    outline: none !important;
+}
+
+.vitro-button {
+    font-family: 'GraphikRegular';
+    font-size: 14px;
+    outline: none;
+    margin: 8px 0 0 8px;
+    height: 32px;
+    min-width: 96px;
+    font-weight: 500;
+    color: #fff;
+    background: #0097ff;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.3s ease 0s;
+    position: relative;
+    padding: 0;
+}
+
+.vitro-button > div {
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+    padding: 0 12px;
+    height: 32px;
+}
+
+.vitro-button > div > div {
+    position: relative;
+    z-index: 1;
+}
+
+.vitro-button:disabled {
+  background: #E0E0E0;
+}
+
+.vitro-button:hover {
+    -webkit-transition: background-color 0.3s ease;
+    transition: background-color 0.3s ease;
+}
+
+.vitro-button:hover :global(.vitro-icon-default) {
+    display: none;
+}
+
+.vitro-button:hover :global(.vitro-icon-hover) {
+    display: block;
+}
+
+.vitro-button:not(:disabled):active, .vitro-button:not(:disabled):focus, .vitro-button:not(:disabled):hover {
+    background: rgba(0, 151, 255, .8);
+    border-color: transparent;
+}
+
+.vitro-button:not(:disabled):focus:before {
+    opacity: .2;
+    visibility: visible;
+}
+
+.vitro-button:before {
+    content: '';
+    position: absolute;
+    border: 2px solid #0097ff;
+    border-radius: 10px;
+    left: -5px;
+    right: -5px;
+    top: -5px;
+    bottom: -5px;
+    opacity: 0;
+    visibility: hidden;
+    transition: .1s;
+}
+
+:global(.vitro-effect-ripple) {
+    position: absolute;
+    border-radius: 50%;
+    transform: scale(0);
+    animation: vitro-animation-ripple 600ms linear;
+    background-color: #0097ff;
+}
+
+:global(.vitro-display-none) {
+    display: none;
+}
+
+@keyframes vitro-animation-ripple {
+    to {
+        transform: scale(4);
+        opacity: 0;
+    }
+}

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

@@ -0,0 +1,11 @@
+.vitro-button-group {
+    display: flex;
+    justify-content: flex-start;
+    width: 100%;
+    padding: 0;
+    justify-content: flex-end;
+}
+
+.vitro-button-group > button:first-child {
+    margin-left: 0px;
+}

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

@@ -0,0 +1,3 @@
+.vitro-center {
+    flex: 1 1;
+}

package/css/white/controls/checkbox/checkbox.css

@@ -0,0 +1,31 @@
+.vitro-control {
+  padding: 6px 0;
+  width: 100%;
+  position: relative;
+}
+
+.vitro-checkbox-content {
+    width: 100%;
+    display: flex;
+    align-items: center;
+}
+
+.vitro-checkbox-content > label {
+    margin: 0px 5px;
+}
+
+.vitro-checkbox-content input {
+    width: 15px;
+    margin-right: 5px;
+    background: #fff;
+}
+
+.left-label {
+  display: flex;
+  align-items: center;
+}
+
+.left-label .vitro-label {
+  margin-right: 5px;
+  width: 300px;
+}

package/css/white/controls/command-menu/command-menu-button.css

@@ -0,0 +1,43 @@
+.vitro-command-menu-button {
+    font-family: "GraphikMedium";
+    border: 1px solid #e0e0e0;
+    color: #222d44;
+    line-height: unset;
+    height: 26px;
+    padding: 0;
+    margin: 0;
+    background: #fff;
+    border-radius: 4px;
+    outline: none;
+}
+
+.vitro-command-menu-button > div {
+    padding: 0 12px 0 12px;
+    height: auto;
+}
+
+.vitro-command-menu-button :global(.vitro-effect-ripple) {
+  display: none;
+}
+
+.vitro-command-menu-button:hover {
+    color: #FF5B2D;
+    background: #fff !important;
+}
+
+.vitro-command-menu-button:not(:disabled):active, .vitro-command-menu-button:not(:disabled):focus, .vitro-command-menu-button:not(:disabled):hover {
+  background: #fff !important;
+  border-color: #e0e0e0 !important;
+}
+
+.vitro-command-menu-button:not(:disabled):focus:before, .vitro-command-menu-button:before {
+  display: none;
+}
+
+.vitro-command-menu-button:hover :global(.vitro-icon-default) {
+  display: none;
+}
+
+.vitro-command-menu-button:hover :global(.vitro-icon-hover) {
+  display: block;
+}

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

@@ -0,0 +1,30 @@
+: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) :global(.dropdown-item):hover {
+    background: #F5F6FA;
+}
+
+:global(.dropdown-menu) :global(.dropdown-item),
+:global(.dropdown-menu) :global(.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: #222D44;
+}
+
+:global(.dropdown-item):global(.dropdown-item-empty) {
+  background: #fff;
+  color: #bdbdbd;
+  cursor: default;
+}

package/css/white/controls/command-menu/command-menu-item.css

@@ -0,0 +1,89 @@
+.vitro-item {
+    background: #fff;
+    border: 1px solid #e0e0e0 !important;
+    border-radius: 4px;
+    color: #222d44;
+    cursor: pointer;
+    display: flex;
+    font-family: GraphikMedium;
+    font-size: 14px;
+    height: 26px;
+    padding: 0 12px;
+    align-items: center;
+}
+
+.vitro-item:hover {
+    border: 1px solid #ff5b2d;
+}
+
+.vitro-item .overflow {
+    min-width: 44px;
+}
+
+.vitro-item img {
+    height: 15px;
+    margin: 0 5px;
+}
+
+.vitro-item > svg {
+    height: 12px;
+    width: 12px;
+    margin-left: 8px;
+}
+
+.vitro-item > svg > path {
+    stroke-width: 1px;
+}
+
+.vitro-item:hover {
+    color: #FF5B2D;
+}
+
+.vitro-item:hover svg path, :global(.nav-item) :global(.dropdown-toggle):hover .vitro-item svg path {
+  stroke: #FF5B2D;
+}
+
+:global(.nav-item) :global(.dropdown-toggle) .vitro-item svg path {
+  stroke: #222d44;
+}
+
+.vitro-icon > :global(.vitro-icon-hover) {
+  display: none;
+}
+
+.vitro-icon:hover > :global(.vitro-icon-hover) {
+  display: block;
+}
+
+.vitro-icon:hover > :global(.vitro-icon-default) {
+  display: none;
+}
+
+.vitro-icon {
+  width: 16px;
+  height: 16px;
+  margin-right: 8px;
+  margin-bottom: 1px;
+}
+
+:global(.nav-item) :global(.dropdown-toggle):hover .vitro-item :global(.vitro-icon-default) {
+  display: none;
+}
+
+.vitro-item:hover svg path, :global(.nav-item) :global(.dropdown-toggle):hover .vitro-item :global(.vitro-icon-hover) {
+  display: block;
+}
+
+.vitro-display-none {
+  display: none;
+}
+
+@media (max-width: 568px) {
+    .vitro-item {
+        padding: 0 8px;
+    }
+
+    .vitro-item img {
+        display: none;
+    }
+}

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

@@ -0,0 +1,48 @@
+.vitro-item-lookup-picker {
+  padding: 0px !important;
+  margin: 0;
+}
+
+.vitro-command-menu-lookup-picker {
+    width: 250px;
+}
+
+.vitro-command-menu-lookup-picker input {
+    min-width: 20px !important;
+}
+
+.vitro-command-menu-lookup-picker > div.vitro-content {
+    border: none !important;
+    min-height: initial;
+    padding: 4px 10px;
+}
+
+.vitro-command-menu-lookup-picker > div.vitro-value-list {
+    height: 450px;
+}
+
+.vitro-command-menu-lookup-picker > div.vitro-value-list > .ps.ps--active-y,
+.vitro-command-menu-lookup-picker > div.vitro-value-list > .ps:not(.ps--active-y) > div {
+    border-radius: 0;
+    box-shadow: none;
+}
+
+.vitro-command-menu-lookup-picker > div.vitro-content > .vitro-selected-item {
+    max-width: 190px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.vitro-command-menu-lookup-picker > div.vitro-value-list div.vitro-item {
+    border: none !important;
+    white-space: nowrap;
+}
+
+.vitro-command-menu-lookup-picker > div.vitro-content > .vitro-right svg path {
+    stroke: #222d44;
+}
+
+.vitro-command-menu-lookup-picker > div.vitro-content > div.vitro-right {
+    top: 10px;
+}

package/css/white/controls/command-menu/command-menu.css

@@ -0,0 +1,83 @@
+.vitro-command-menu {
+    -webkit-font-smoothing: antialiased;
+    font-size: 10pt;
+    font-weight: 400;
+    display: flex;
+    height: auto;
+    background: #F5F6FA;
+    padding: 0px !important;
+    color: rgb(98, 99, 103);
+    z-index: 800;
+    margin-bottom: 6px;
+}
+
+.vitro-command-menu :global(.dropdown-menu.show) {
+    font-size: 14px;
+    padding: 0px;
+    font-weight: 400;
+    box-sizing: border-box;
+    box-shadow: rgba(0, 0, 0, 0.133) 0px 3.2px 7.2px 0px, rgba(0, 0, 0, 0.11) 0px 0.6px 1.8px 0px;
+    border-radius: 4px;
+    border: none;
+    outline: transparent;
+    position: absolute !important;
+    right: 0px !important;
+    transform: none !important;
+    min-width: 210px;
+    width: fit-content;
+    z-index: 1150;
+    top: 28px !important;
+    left: 0px !important;
+    overflow: hidden;
+}
+
+.vitro-command-menu :global(.dropdown-toggle):after, .vitro-command-menu :global(.dropdown-menu):before {
+    display: none;
+}
+
+.vitro-command-menu :global(.dropdown) :global(.dropdown-toggle):hover {
+    color: #FF5B2D;
+}
+
+.vitro-command-menu :global(.dropdown) :global(.dropdown-item) {
+    display: flex;
+}
+
+.vitro-command-menu :global(.dropdown) :global(.dropdown-item):active {
+    background: transparent;
+    border: none;
+    box-shadow: none;
+    color: transparent;
+    outline: none;
+}
+
+.vitro-command-menu :global(.dropdown) :global(.dropdown-item) span {
+    margin-left: 6px;
+    font-family: "GraphikRegular";
+    font-size: 10pt;
+}
+
+.vitro-command-menu :global(.dropdown-item) {
+    padding: 4px 9px;
+    outline: none;
+    color: #222d44 !important;
+}
+
+.vitro-command-menu ul:global(.nav) {
+    flex-wrap: wrap;
+}
+
+.vitro-command-menu > ul:global(.nav) > li {
+    margin: 6px 0 0 6px;
+}
+
+.vitro-command-menu > ul:global(.nav) > div:has(> li) {
+    height: fit-content;
+    width: fit-content;
+    padding: 6px 0 0 6px;
+}
+
+.vitro-command-menu :global(.nav-link) {
+    color: #1e1e1e !important;
+    padding: 0px !important;
+}