@nys-cui/cui-formpill 0.2.9 → 0.2.20

package/component-base/src/assets/scss/_globalNotes.scss

@@ -0,0 +1,419 @@
+#globalNotes {
+    
+    &::part(modal) {
+        min-width: 75vw;
+        max-width: 90vw;
+        max-height: 90vh;
+    }
+
+    &::part(modal-header) {
+        border: 0;
+        padding: 0;
+    }
+
+    cui-section {
+        margin-bottom: 0;
+        max-width: initial;
+
+        div[slot="section-contents"] {
+            margin: 0;
+            position: relative;
+
+            .close-icon {
+                background: rgba(0, 0, 0, 0);
+                border: 0;
+                border-radius: 32px;
+                display: block;
+                height: 32px;
+                position: absolute;
+                right: 10px;
+                width: 32px;
+                top: -55px;
+
+                cui-icon {
+                    position: relative;
+
+                    svg {
+                        height: 24px;
+                        left: -11px;
+                        position: relative;
+                        width: 24px;
+
+                        line {
+                            //fill: #a1a1a1 !important;
+                            stroke: #a1a1a1 !important;
+                        }
+
+                    }
+                }
+
+                &:hover {
+                    background: #ccc;
+                    cui-icon {
+                        svg {
+                            line {
+                                stroke: #787878 !important;
+                            }
+                        }
+                    }
+                }
+            }
+
+        }
+
+        &::part(section-title) {
+            margin-top: 0;
+        }
+
+        &::part(root-section) {
+            box-shadow: initial;
+        }
+
+        .grid {
+            padding: 0 1em;
+        }
+
+        .grid.button-row {
+            cui-button {
+                button {
+                    margin-bottom: 0;
+                } 
+
+                & + cui-button {
+                    margin-right: 0;
+                }
+            }
+        }
+
+    }
+
+    cui-form {
+        div[slot="form-contents"] {
+            margin: 0 1em;
+        }
+    }
+
+    .existing-notes {
+        border-top: 1px solid #CCC;
+        margin-top: 1em;
+        padding-top: 1em;
+
+        cui-section {
+            max-width: initial;
+
+            &::part(section-header),
+            &::part(root-section) {
+                border: 0;
+            }
+
+            &::part(section-header) {
+                margin-bottom: 10px;
+            }
+
+            .notes-list {
+                list-style-type: none;
+                margin: 0 1em;
+                padding: 0;
+
+                li {
+                    .note {
+                        display: flex;
+
+                        .user-icon-container {
+                            flex: 0 0 50px;
+
+                            rpso-usericon {
+                                display: flex;
+                                justify-content: center;
+                                margin-top: 7px;
+                            }
+                        }
+
+                        .note-info {
+                            border-bottom: 1px solid #CCC;
+                            display: flex;
+                            flex-direction: column;
+                            flex: 1;
+                            margin-bottom: 10px;
+                            margin-left: 10px;
+                            padding-bottom: 10px;
+                            padding-left: 10px;
+                            width: 100%;
+
+                            .note-to-row {
+                                padding-bottom: 10px;
+                                
+                                span {
+                                    display: inline-block;
+                                    margin-right: 1em;
+
+                                    &.note-date {
+                                        font-weight: 600;
+                                        color: #A1A1A1;
+                                    }
+
+                                }
+
+                                
+                            }
+
+                            .note-text {
+                                p {
+                                    font-weight: 600;
+                                }
+                            }
+                        }
+
+                    }
+
+                    &:last-child {
+                        margin-bottom: 1.5em;
+
+                        .note {
+                            .note-info {
+                                border: 0;
+                                margin-bottom: 0;
+                                padding-bottom: 0;
+                            }
+                        }
+
+                    }
+                }
+            }
+
+            .no-notes {
+                font-size: 16px;
+                text-align: center;
+                margin-bottom: 2em;
+            }
+
+        }
+
+    }
+
+}
+
+#globalFinalist
+{
+    &::part(modal) {
+        min-width: 30vw;
+        max-width: 100vw;
+        max-height: 90vh;
+    }
+
+    cui-section {
+        margin-bottom: 0;
+        max-width: initial;
+
+        div[slot="section-text"] {
+            position: relative;
+
+            .close-icon {
+                background: rgba(0,0,0,0);
+                border: 0;
+                border-radius: 32px;
+                display: block;
+                height: 32px;
+                position: absolute;
+                right: 10px;
+                width: 32px;
+                top: -55px;
+
+                cui-icon {
+                    position: relative;
+
+                    svg {
+                        height: 24px;
+                        left: -11px;
+                        position: relative;
+                        width: 24px;
+
+                        line {
+                            stroke: #a1a1a1 !important
+                        }
+                    }
+                }
+
+                &:hover {
+                    background: #ccc;
+                    cui-icon {
+                        svg {
+                            line {
+                                stroke: #787878 !important;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        div[slot="section-contents"]
+        {
+            margin-bottom: 15px;
+        }
+    }
+}
+
+#shareDialog {
+    &::part(modal) {
+        min-width: 25vw;
+        max-height: 50vh;
+    }
+
+    .descRow {
+        margin-bottom: 10px;
+        display: flex;
+        flex-direction: column;
+    }
+}
+
+#saveOptions {
+    &::part(modal) {
+        min-width: 20vw;
+        width: fit-content;
+        // max-height: 90vh;
+    }
+
+    cui-text::part(label-wrapper) {
+        min-width: 0px;
+    }
+
+    #instructions {
+        padding-right: 5px;
+    }
+}
+
+#copyFrom {
+    &::part(modal) {
+        min-width: 40vw;
+        // max-height: 90vh;
+    }
+}
+#saveOptions,
+#shareDialog,
+#copyFrom
+{
+    &::part(modal) {
+        overflow: visible;
+        display: block;
+        height: fit-content;
+    }
+
+    cui-section {
+        margin-bottom: 0;
+        max-width: initial;
+
+        div[slot="section-text"] {
+            position: relative;
+
+            .close-icon {
+                background: rgba(0,0,0,0);
+                border: 0;
+                border-radius: 32px;
+                display: block;
+                height: 32px;
+                position: absolute;
+                right: 10px;
+                width: 32px;
+                top: -55px;
+
+                cui-icon {
+                    position: relative;
+
+                    svg {
+                        height: 24px;
+                        left: -11px;
+                        position: relative;
+                        width: 24px;
+
+                        line {
+                            stroke: #a1a1a1 !important
+                        }
+                    }
+                }
+
+                &:hover {
+                    background: #ccc;
+                    cui-icon {
+                        svg {
+                            line {
+                                stroke: #787878 !important;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        div[slot="section-contents"]
+        {
+            #instructions
+            {
+                margin-bottom: 10px;
+                margin-left: 5px;
+            }
+        }
+
+        &::part(root-section) {
+            box-shadow: unset;
+        }
+    }
+}
+
+// Prototype max width
+@media screen and (min-width: 950px) {
+
+    #globalNotes {
+    
+        &::part(modal) {
+            max-height: 50vh;
+        }
+
+    }
+}
+
+#extendSession {
+
+    div {
+        
+        display:flex;
+        flex-direction:column;
+        align-items:center;
+        gap:10px;
+        padding-top:12px;
+        padding-inline:20px;
+    }
+}
+
+@media screen and (min-width: 1175px) {
+    #copyFrom,
+    #saveOptions,
+    #shareDialog {
+        cui-text::part(label-wrapper),
+        cui-radio-group::part(label-wrapper),
+        cui-listbox::part(label-wrapper)
+        {
+            min-width: 0px;
+            margin-left: 5px;
+        }
+
+        cui-listbox::part(label-wrapper)
+        {
+            flex-basis: unset;
+        }
+
+        .descRow {
+            flex-direction: row !important;
+
+            .shareDescLabel {
+                margin-left: 5px;
+            }
+
+            .shareDesc {
+                margin-left: 10px;
+            }
+        }
+
+        
+    }
+}