@nys-cui/cui-formpill 0.2.10 → 0.2.20

package/component-base/src/assets/scss/_sidebar-context.scss

@@ -0,0 +1,896 @@
+// Remove the regular page footer in lue for the version that accepts the sidenav
+// body #app-root .app-main-region #app-footer {
+//     display: none;
+// }
+
+div#app-screen-container > div[data-rc] {
+    height: 100%;
+}
+
+div#main-data > div[data-rc] {
+    height: 100%;
+
+    & > div {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+    }
+}
+
+div[data-rc="sidebar-context-lvc"],
+div[data-rc="search-sidebar-context-lvc"],
+div[data-rc="fileex-sidenav-lvc"] {
+    height: 100%;
+}
+
+
+#sideNavContextLayout {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    height: 100%;
+
+    .side-nav {
+        background: #cfcfcf;
+
+        .side-nav-contents {
+            display: flex;
+            overflow-y: auto;
+            overflow-x: hidden;
+            flex-direction: column;
+
+            cui-tree {
+                width: 100%;
+
+                cui-tree-branch,
+                cui-tree-leaf {
+                    min-height: 28px;
+
+                    &::part(fullRow) {
+                        min-height: 28px;
+                    }
+
+                    &:not(.currentScr)::part(infoRow):hover {
+                        background: #e4ebef;
+                        border-radius: 5px;
+                    }
+
+                    &.currentScr {
+                        &::part(infoRow) {
+                            background: #397dbb;
+                            border-radius: 5px;
+                        }
+                        
+                        
+                        a {
+                            color: #ffffff;
+                        }
+
+                        button {
+                            color: #ffffff;
+                        }
+
+                        cui-icon svg path {
+                            stroke: #ffffff;
+                        }
+                    }
+
+                }
+
+                cui-tree-leaf {
+                    padding-left: 0.5em;
+
+                    cui-link {
+                        align-items: center;
+                        display: flex;
+                        margin-left: 0.75em;
+                        min-height: 28px;
+
+                        a {
+                            color: #222;
+                            display: inline-block;
+                            text-decoration: none;
+                            padding: 0 .25em 0 1em;
+                            text-indent: -1em;
+                            word-break: break-word;
+
+                            &:hover {
+                                text-decoration: underline;
+                            }
+
+                        }
+
+                        &.create-new {
+                            a {
+                                font-style: italic;
+                            }
+                        }
+                    }
+
+                    &.back-link {
+                        button {
+                            padding-left: 30px;
+
+                            &::before {
+                                content: " ";
+                                position: absolute;
+                                border-right: 5px solid black;
+                                border-top: 5px solid transparent;
+                                border-bottom: 5px solid transparent;
+                                margin-left: -12px;
+                                margin-top: 2px;
+                            }
+                        }
+                    }
+
+                    &.fake-link {
+                        button {
+                            &:hover {
+                                text-decoration: underline;
+                            }
+                        }
+                    }
+
+                    cui-button-menu {
+                        align-items: center;
+                        display: flex;
+                        min-height: 28px;
+                        margin-left: -5px;
+
+                        button {
+                            background: transparent;
+                            border: 0;
+                            margin-bottom: 0;
+                            padding: 5px;
+
+                            &:hover {
+                                background: #efefef;
+                            }
+
+                            cui-icon {
+                                margin: 0 !important;
+
+                                svg {
+                                    circle {
+                                        fill: #787878;
+                                    }
+                                }
+
+                                &:hover {
+                                    svg {
+                                        circle {
+                                            fill: #333;
+                                        }
+                                    }
+                                }
+                            }
+                        }
+
+                    }
+
+                    cui-button {
+                        button {
+                            background: none;
+                            border: none;
+                            margin-bottom: 0px;
+                            text-align: left;
+                            padding: 0 20px;
+                            text-indent: -15px;
+                            word-break: break-word;
+                        }
+                    }
+
+                    &[divider] {
+                        border-bottom: 1px solid #CCC;
+                        padding-bottom: .25em;
+
+                        &+cui-tree-branch,
+                        &+cui-tree-leaf {
+                            margin-top: 3px;
+                        }
+
+                    }
+
+                    &::part(leafControls) {
+                        display: flex;
+                        flex-wrap: nowrap;
+                        flex-direction: column;
+                        min-width: 30px;
+                        margin-right: 5px;
+                    }
+
+                    &::part(fullRow) {
+                        margin-left: 0.5em;
+                        width: 100%;
+                    }
+
+                    &::part(infoRow) {
+                        width: 100%;
+                    }
+
+                }
+
+                &>cui-tree-leaf {
+
+                    &::part(fullRow) {
+                        margin-left: 1em;
+                    }
+
+                }
+
+                cui-tree-branch {
+                    // padding-left: 0.5em;
+
+                    &::part(branchControls) {
+                        display: flex;
+                        flex-wrap: nowrap;
+                        flex-direction: column;
+                        min-width: 30px;
+                        margin-right: 5px;
+                    }
+
+                    &::part(infoRow) {
+                        width: 100%;
+
+                        &:before {
+                            position: relative;
+                            left: 1em;
+                        }
+
+                    }
+
+                    button.expandBtn {
+                        padding-left: 1.5em;
+                        padding-right: 5px;
+                    }
+
+                    &> {
+                        cui-tree-branch {
+                            padding-left: .5em;
+                        }
+
+                        cui-tree-leaf {
+                            padding-left: 1.5em;
+                        }
+
+                    }
+                }
+
+            }
+
+            //for download all button
+            cui-button {
+                justify-content: center;
+                display: flex;
+
+                &.downloadAll {
+                    margin-top: auto;
+                }
+            }
+
+        }
+
+        &.hide-sidenav {
+            display: none;
+        }
+
+    }
+
+    .main-data {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+
+        .page-body {
+            display: flex;
+            flex-direction: column;
+            flex: 1;
+
+            .page-body-container {
+                flex: 1;
+            }
+        }
+    }
+}
+
+rpso-contextheader {
+
+    &.hide-header {
+        display: none;
+    }
+
+    .ref-table-header {
+        color: #767676;
+        font-size: 2em;
+        font-weight: 600;
+        padding: 0.5em 2em 0.25em 0.25em;
+        margin: 0 1em;
+        border-bottom: 1px solid #CCC;
+    }
+
+    .grid {
+        padding: 1em 1em 0;
+
+        .row {
+
+            &.hidden {
+                display: none;
+            }
+
+            cui-text::part(outer-wrapper) {
+                display: flex;
+            }
+
+            cui-text::part(data-wrapper) {
+                margin-left: 10px;
+            }
+
+            cui-text,
+            cui-radio-group {
+                margin-bottom: 0;
+            }
+
+            cui-listbox {
+                margin-bottom: 0;
+
+                // &::part(outer-wrapper) {
+                //     // flex-direction: row;
+                // }
+
+                &[readonly]::part(listbox-value-container) {
+                    background-color: rgb(237, 237, 237);
+                }
+
+            }
+
+            .col,
+            .col-full {
+                margin-bottom: 10px;
+            }
+
+            .col-full {
+                width: 100%;
+            }
+        }
+
+    }
+
+    .year-decorator,
+    .parcel-state-decorator,
+    .auv-decorator {
+        align-content: center;
+        align-items: center;
+        color: #444;
+        display: inline-flex;
+        font-weight: bold;
+        height: 100%;
+
+        span {
+            color: #FFF;
+            background-color: #AAA;
+            border-radius: 5px;
+            box-shadow: rgba(0, 0, 0, .2) 0 1px 2px;
+            font-size: 11px;
+            font-weight: 400;
+            padding: 0 7px 1px;
+        }
+
+        .year-deco,
+        .state-deco,
+        .auv-deco {
+            display: none;
+        }
+
+        .state-deco {
+            &.pending-state {
+                background: #ffeb95;
+                color: #333;
+            }
+        }
+
+        .show-deco {
+            display: inline;
+        }
+    }
+
+    .auv-decorator {
+        padding-left: 5px;
+    }
+
+    cui-button {
+        button {
+            margin-bottom: 0;
+        }
+    }
+
+    button.arrow {
+        padding: 5px 8px;
+    }
+
+    .print-key {
+        padding-left: 28px;
+
+        cui-text::part(label-wrapper) {
+            flex-basis: unset;
+            min-width: unset;
+        }
+    }
+
+    cui-text::part(data-contents) {
+        align-items: center;
+    }
+
+    div[slot="always-visible-content"] {
+        .grid {
+            padding-top: 10px;
+            padding-bottom: 0;
+        }
+    }
+
+    div[slot="collapsable-contents"] {
+        height: auto;
+
+        .grid {
+            padding-top: 0;
+            padding-bottom: 0;
+        }
+
+        &.collapsed {
+            height: 0;
+            overflow: hidden;
+        }
+
+        ::part(tabList) {
+            width: 100%;
+            text-wrap: nowrap;
+            margin-top: 20px;
+            flex-wrap: unset;
+            align-items: flex-end;
+        }
+
+        ::part(tabList)::after {
+            content: "";
+            left: 100%;
+            width: 100%;
+            height: 1px;
+            margin-top: -1px;
+            background: #ccc;
+
+        }
+
+        ::part(tabBar) {
+            background: none;
+            // border-bottom: 1px solid #ccc;
+            margin-left: 30px;
+            margin-right: 30px;
+        }
+
+        ::part(innerTabWrapper) {
+            border-top-left-radius: 5px;
+            border-top-right-radius: 5px;
+            border-top: 0.7px solid #767676;
+            border-right: 0.7px solid #767676;
+            border-left: 0.7px solid #767676;
+            flex: 0;
+        }
+
+        ::part(innerTabButton) {
+            border-top-left-radius: 5px;
+            border-top-right-radius: 5px;
+            cursor: pointer;
+            min-width: 50px;
+            padding: 2px 4px;
+
+        }
+
+        .tabContents {
+            background-color: transparent;
+            border: none;
+            padding: 0;
+            margin: 0;
+
+            .grid {
+                padding-right: 10px;
+            }
+        }
+
+    }
+
+    .parcel-state-decorator {
+        align-self: center;
+        margin-left: 7px;
+    }
+
+    div[slot="form-contents"] {
+        padding-top: 1em;
+        max-width: 1162px;
+
+        cui-listbox {
+
+            &::part(outer-wrapper) {
+                display: flex !important;
+            }
+
+        }
+
+    }
+
+    .parcel-context-header {
+
+        cui-listbox[componentkey="rollYear"] {
+
+            label {
+                margin-top: 0;
+            }
+
+            &::part(outer-wrapper) {
+                display: flex;
+            }
+
+            &::part(psuedo-input) {
+                min-height: auto;
+            }
+
+            &::part(data-wrapper) {
+                margin-left: 10px;
+            }
+
+            &::part(listbox-arrow) {
+                &:before {
+                    top: -3px;
+                }
+            }
+        }
+
+    }
+
+    #ref-table-context-header,
+    #search-table-context-header {
+
+        cui-listbox::part(label-wrapper) {
+            align-items: center;
+            display: flex;
+            flex: 0 0 var(--cui-field-label-flex-width);
+            justify-content: flex-start;
+        }
+
+        cui-radio-group::part(label-wrapper) {
+            display: flex;
+            // justify-content: flex-end;
+            min-width: 150px;
+        }
+
+        cui-radio-group::part(outer-wrapper) {
+            display: flex;
+        }
+
+        cui-input-group::part(input-group-outer) {
+            flex-direction: column;
+        }
+
+        cui-input-group::part(legend-wrapper) {
+            align-items: center;
+            display: flex;
+            //justify-content: flex-end;
+            min-width: 150px;
+        }
+
+        cui-input-group::part(input-group-outer) {
+            display: flex;
+        }
+
+        // cui-input-group::part(data-wrapper) {
+        //     margin-left: 0px;
+        // }
+
+        cui-listbox::part(data-wrapper) {
+            margin-left: 0px;
+        }
+
+        cui-formpill::part(label-wrapper) {
+            min-width: 0px;
+            flex-basis: 0px;
+        }
+
+        cui-formpill::part(outer-wrapper) {
+            flex-direction: column;
+            align-items: flex-start;
+        }
+    }
+
+    &.collapsed {
+
+        div[slot="collapsable-contents"] {
+            height: 0;
+            overflow: hidden;
+        }
+    }
+
+
+}
+
+rpso-offcanvas {
+    overflow: hidden;
+    z-index: 100;
+
+    .off-canvas-nav-slot {
+        position: absolute;
+        width: 100%;
+        z-index: 100;
+        pointer-events: none;
+        height: 100%;
+
+        overflow-y: auto;
+        display: inherit;
+
+        nav {
+            background: #FFF;
+            height: 100%;
+            position: absolute;
+            left: -250px;
+            transition: all 0.3 ease-out;
+            width: 250px;
+            height: calc(100% - 60px);
+            
+        }
+
+    }
+
+    &.forced-open {
+        position: unset;
+        .off-canvas-nav-slot {
+            background: rgba(0, 0, 0, 0.5);
+            pointer-events: all;
+
+            nav {
+                left: 0;
+                z-index: 100;
+                padding: 5px 0px;
+                border-right: 1px solid #8c8c8c;
+                border-bottom: 1px solid #8c8c8c;
+                height: fit-content;
+            }
+        }
+    }
+}
+
+.context-spinner {
+    display: inline-block;
+    position: relative;
+    width: 80px;
+    height: 80px;
+
+    & div {
+        box-sizing: border-box;
+        display: block;
+        position: absolute;
+        width: 64px;
+        height: 64px;
+        margin: 8px;
+        border: 8px solid #fff;
+        border-radius: 50%;
+        animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+        border-color: #fff transparent transparent transparent;
+
+        &:nth-child(1) {
+            animation-delay: -0.45s;
+        }
+
+        &:nth-child(2) {
+            animation-delay: -0.3s;
+        }
+
+        &:nth-child(3) {
+            animation-delay: -0.15s;
+        }
+
+    }
+
+}
+
+.button-menu.saved-option-menu {
+    .popover-contents {
+        border-radius: 5px;
+
+        .popover-body {
+            padding: 5px 0;
+
+            ul {
+
+                li {
+
+                    &:last-child {
+
+                        cui-button {
+                            border-bottom: 0;
+                            margin-bottom: 0;
+                        }
+
+                    }
+                }
+            }
+        }
+    }
+}
+
+@keyframes context-spinner {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+
+@media screen and (min-width: 650px) {
+
+    rpso-contextheader {
+        .grid {
+
+            .row {
+                margin-bottom: 10px;
+
+                .col,
+                .col-full {
+                    margin-bottom: 0;
+                }
+            }
+
+            &.button-row {
+                padding-right: 0;
+
+                .row {
+                    margin-bottom: 0;
+                }
+            }
+
+        }
+
+    }
+
+    rpso-offcanvas {
+        &.forced-open {
+            position: unset;
+        }
+    }
+
+}
+
+@media screen and (min-width: 700px) {
+
+    #sideNavContextLayout {
+        flex-direction: row;
+
+
+        .side-nav {
+            background: var(--section-background-color);
+            border-right: 1px solid var(--context-header-border-color);
+            flex: 0 0 65px;
+            max-width: 65px;
+
+        }
+
+        .main-data {
+            width: 100%;
+        }
+    }
+
+    rpso-offcanvas {
+        position: absolute;
+        height: 100%;
+
+        .off-canvas-nav-slot {
+            height: calc(100% - 60px);
+        }
+
+        
+
+        &.forced-open {
+            position: sticky;
+            border-right: 1px solid #8C8C8C;
+            width: 250px;
+
+            .off-canvas-nav-slot {
+                nav {
+                    padding: unset;
+                    border-bottom: unset;
+                }
+            }
+        }
+
+    }
+
+}
+
+@media screen and (min-width: 830px) {
+
+    rpso-contextheader {
+
+        #ref-table-context-header,
+        #search-table-context-header {
+            cui-listbox::part(label-wrapper) {
+                justify-content: flex-end;
+            }
+
+            cui-listbox::part(data-wrapper) {
+                margin-left: 10px;
+            }
+
+            cui-input-group::part(input-group-outer) {
+                flex-direction: row;
+            }
+
+            cui-formpill::part(label-wrapper) {
+                min-width: var(--cui-field-label-flex-width);
+                flex-basis: var(--cui-field-label-flex-width);
+            }
+
+            cui-formpill::part(outer-wrapper) {
+                flex-direction: row;
+                align-items: center;
+            }
+        }
+
+        &::part(collapsable-container) {
+            max-width: 1175px;
+        }
+    }
+
+
+    rpso-contextheader {
+
+        cui-listbox {
+
+            &::part(label-wrapper) {
+                flex: 0 0 150px;
+            }
+
+        }
+
+    }
+}
+
+@media screen and (min-width: 1175px) {
+    #sideNavContextLayout {
+        flex-direction: row;
+
+        .side-nav {
+            flex: 0 0 250px;
+            max-width: 250px;
+        }
+
+        .main-data {
+            width: 100%;
+        }
+    }
+
+    rpso-offcanvas {
+        position: relative;
+
+        &::part(mobile-control) {
+            display: none;
+        }
+
+        .off-canvas-nav-slot {
+            pointer-events: all;
+            position: relative;
+            height: 100%;
+
+            nav {
+                left: 0;
+                padding-top: 10px;
+                height: 100%;
+            }
+
+        }
+
+        &.forced-open .off-canvas-nav-slot nav {
+            left: 0;
+            padding-top: 10px;
+            height: 100%;
+        }
+
+    }
+}