@vitrosoftware/common-ui-ts 1.1.84 → 1.1.86

package/css/white/controls/table-view-detail/table-view-detail.css

@@ -0,0 +1,147 @@
+:global(#TableViewDetail) {
+    height: 100%;
+    position: relative;
+}
+
+.vitro-table-view-detail {
+    width: 100%;
+    height: 100%;
+    padding: 6px;
+}
+
+.vitro-table-view-detail > div {
+    background-color: white;
+    height: 100%;
+    position: relative;
+}
+
+.vitro-table-view-detail > div div:has(:global(.nav)) {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+/**/
+.vitro-table-view-detail > div div:has(:global(.nav)) :global(.nav) {
+    margin-right: 18px;
+}
+
+.vitro-table-view-detail:not(:has(:global(.vitro-planner-control-group))) :global(.vitro-content) {
+    padding-right: 18px;
+}
+
+.vitro-table-view-detail :global(.ps) > div:has(> :global(.vitro-flex-full)) {
+    padding: 18px 18px 5px 18px;
+}
+/**/
+.vitro-table-view-detail > div div:has(:global(.nav)) :global(.content) {
+    height: 100%;
+    flex: 1 1;
+    overflow: auto;
+}
+
+.vitro-table-view-detail > div :global(.vitro-product-data) {
+    padding: 5px 14px 15px 14px;
+    overflow-y: auto;
+    height: calc(100vh - 330px);
+}
+
+.vitro-table-view-detail > div :global(.vitro-product-data) :global(.vitro-control) {
+    padding: 2px 0 !important;
+}
+
+.vitro-table-view-detail > div :global(.vitro-detail-data) {
+    padding: 5px 15px;
+}
+
+.vitro-table-view-detail > div :global(.vitro-table-view-detail-product) :global(.vitro-bottom) {
+    position: absolute;
+    bottom: 0;
+    margin-left: -1px;
+    margin-right: -1px;
+    height: auto;
+    width: 100%;
+}
+
+.vitro-table-view-detail > :global(.ps) > div {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    /*padding: 18px 18px 5px 18px;*/
+    padding: 18px 0px 5px 18px;
+}
+
+.vitro-table-view-detail :global(.ps) > div:has(:global(.vitro-planner-control-group)) {
+    padding: 0px;
+}
+
+.vitro-table-view-detail > :global(.ps .vitro-flex-full) {
+    flex: 1 1;
+}
+
+.vitro-table-view-detail :global(.vitro-flex-full)::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+.vitro-table-view-detail :global(.vitro-flex-full)::-webkit-scrollbar-track {
+    background: #fff;
+    border-radius: 12px;
+}
+
+.vitro-table-view-detail :global(.vitro-flex-full)::-webkit-scrollbar-thumb {
+    background: #e0e0e0;
+    border-radius: 4px;
+}
+
+.vitro-table-view-detail :global(.vitro-flex-full)::-webkit-scrollbar-thumb:hover {
+    background: #BDBDBD;
+}
+
+:global(.vitro-audit-data) {
+    margin-top: 16px;
+    display: flex;
+    font-size: 9pt;
+    align-items: center;
+    justify-content: space-between;
+    margin-right: 18px;
+}
+
+:global(.vitro-audit-data .vitro-icon) {
+    width: 22px;
+    height: 22px;
+}
+
+:global(.vitro-audit-data a:hover .vitro-icon-default) {
+    display: none;
+}
+
+:global(.vitro-audit-data a:hover .vitro-icon-hover) {
+    display: block !important;
+}
+
+:global(.vitro-task-detail-group .vitro-title) {
+    margin-bottom: 8px;
+    padding-bottom: 8px;
+    font-size: 16px;
+    font-family: 'GraphikMedium';
+    color: #0097ff;
+    text-align: center;
+    border-bottom: 2px solid #0097ff;
+}
+
+.vitro-table-view-detail :global(.vitro-button-close) {
+    width: 18px;
+    height: 18px;
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    z-index: 1000;
+    border: none;
+    background-color: transparent;
+    background-size: contain;
+    background-repeat: no-repeat;
+    /* ico-close.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' width='38.1mm' height='38.1mm' version='1.1' style='shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd'%0AviewBox='0 0 3810 3810' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cstyle type='text/css'%3E%3C!%5BCDATA%5B .str1 %7Bstroke:%234F4F4F;stroke-width:211.67;stroke-miterlimit:22.9256%7D .str0 %7Bstroke:%234F4F4F;stroke-width:211.67;stroke-linecap:round;stroke-miterlimit:22.9256%7D .fil0 %7Bfill:none%7D %5D%5D%3E%3C/style%3E%3C/defs%3E%3Cmetadata id='CorelCorpID_0Corel-Layer'/%3E%3Cpath class='fil0 str0' d='M1171.61 1171.61l1466.78 1466.78m-1466.78 0l1466.78 -1466.78'/%3E%3Ccircle class='fil0 str1' cx='1905' cy='1905' r='1799.16'/%3E%3C/svg%3E%0A");
+}

package/css/white/controls/task-tile/task-tile.css

@@ -0,0 +1,89 @@
+.vitro-task-tile {
+    position: relative;
+    background-color: #fff;
+    border: 1px solid #e0e0e0;
+    border-radius: 8px;
+    padding: 20px 16px;
+    margin: 12px 0;
+}
+
+.vitro-task-tile.vitro-active {
+    background: #F5F6FA;
+}
+
+.vitro-content {
+    margin-top: 2px;
+    margin-bottom: -3px;
+}
+
+.vitro-description, .vitro-comment {
+    color: #bdbdbd;
+    font-size: 8pt;
+    margin-top: -3px;
+    padding-right: 10px;
+}
+
+.vitro-comment {
+    margin-top: 20px;
+}
+
+.vitro-title {
+    color: #222d44;
+    font-size: 10pt;
+    margin-bottom: 14px;
+    line-height: 12pt;
+    padding-right: 10px;
+}
+
+.vitro-top-right {
+    position: absolute;
+    right: 23px;
+    top: 17px;
+}
+
+.vitro-dropdown-button {
+    margin-right: -1px;
+}
+
+.vitro-bottom-right {
+    position: absolute;
+    right: 23px;
+    bottom: 16px;
+    font-weight: 500;
+    font-size: 9pt;
+    color: #bdbdbd;
+    text-align: right;
+    margin-top: 6px;
+    margin-right: 0px;
+}
+
+
+@media (max-width: 800px) {
+    .vitro-bottom-right {
+        position: relative;
+        margin-right: 8px;
+        right: 0;
+        bottom: 0;
+    }
+}
+
+.vitro-task-tile :global(.vitro-task-tile-status-indicator) {
+    height: 2px;
+    position: absolute;
+    top: 0;
+    left: 4px;
+    right: 4px;
+}
+
+.vitro-task-tile :global(.vitro-task-tile-expired-indicator) {
+    width: 2px;
+    position: absolute;
+    top: 4px;
+    left: 0;
+    bottom: 4px;
+    background: #ff5b2d;
+}
+
+:global(.vitro-time-log-history) .vitro-task-tile:first-child {
+    margin-top: 0px;
+}

package/css/white/controls/task-user-list/task-user-list.css

@@ -0,0 +1,23 @@
+.vitro-task-user-list {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    max-width: 80%;
+    margin: 16px 0 0 0;
+}
+
+.vitro-task-user-list :global(.vitro-content) p {
+    margin-block-start: 0px;
+    margin-block-end: 0px;
+    margin-top: 4px;
+    font-size: 8pt;
+    color: #bdbdbd;
+    line-height: 12px;
+    margin-bottom: 0px;
+}
+
+@media (max-width: 800px) {
+    .vitro-task-user-list {
+      max-width: 100%;
+    }
+}

package/css/white/controls/user-profile/user-profile.css

@@ -0,0 +1,127 @@
+.vitro-user-profile div > span {
+    padding-right: 16px;
+    color: #222d44;
+    white-space: nowrap;
+    font-weight: 500;
+    cursor: pointer;
+    font-family: GraphikMedium;
+}
+
+.vitro-user-profile > button > div {
+    display: flex;
+    align-items: center;
+}
+
+.vitro-user-profile > button > div > div {
+    margin-right: 0px;
+}
+
+.vitro-user-profile img {
+    height: 40px;
+    border-radius: 50%;
+    border: 1px solid rgba(0, 0, 0, 0.125);
+    margin: 0 8px;
+}
+
+.dropdown-item:active {
+    background: #fff;
+    border: none;
+ }
+
+.dropdown-item,
+.dropdown-item:active,
+.dropdown-item:visited,
+.dropdown-item:hover {
+    text-decoration: none;
+}
+
+.dropdown-item:hover {
+    color: #222D44;
+    background: #F5F6FA;
+}
+
+.dropdown-item,
+.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;
+}
+
+.dropdown-item:global(.dropdown-item-empty) {
+    background: #fff;
+    color: #bdbdbd;
+    cursor: default;
+}
+
+: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;
+}
+
+span.vitro-text-color-white {
+    color: #bdbdbd;
+}
+
+.vitro-user-profile > :global(button.btn),
+.vitro-user-profile > :global(button.btn):active,
+.vitro-user-profile > :global(button.btn):focus {
+    outline: none !important;
+    border: none !important;
+    background: none !important;
+    display: flex;
+    height: 100%;
+    box-shadow: none !important;
+    padding: 0;
+    align-items: center;
+}
+
+.vitro-user-profile :global(.dropdown-toggle)::after {
+    display: none;
+}
+
+.vitro-user-profile :global(.dropdown-menu.show) {
+    position: absolute !important;
+    top: 31px !important;
+    right: 0 !important;
+    left: auto !important;
+    -webkit-transform: none !important;
+    transform: none !important;
+    width: 100%;
+    z-index: 1150;
+}
+
+.vitro-user-profile :global(.dropdown-menu) {
+    font-size: 14px;
+    padding: 0;
+    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: 8px;
+    outline: transparent;
+    border: 0;
+}
+
+.vitro-user-profile :global(.dropdown-menu.show) .dropdown-item {
+    padding: 8px;
+    display: flex;
+    border-radius: 8px;
+}
+
+.vitro-user-profile :global(.dropdown-menu.show) i {
+    margin-right: 10px;
+}
+
+@media (max-width: 568px) {
+    .vitro-user-profile div > span {
+        display: none;
+    }
+}