@nys-cui/cui-formpill 0.2.10 → 0.2.20

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

@@ -0,0 +1,219 @@
+cui-toaster {
+
+    &::part(toaster) {
+        padding: 0 5px;
+    }
+
+}
+
+cui-toast {
+
+    &::part(cui-toast) {
+        box-shadow: rgba(0, 0, 0, .75) 1px 1px 2px 0px;
+        padding: 12px 56px 12px 36px;
+    }
+
+    &::part(cui-toast-icon) {
+        color: #FFF;
+        left: 12px;
+    }
+
+    &::part(cui-toast-close) {
+        background-image: url(../images/message-error.svg);
+        background-size: 18px;
+        right: 15px;
+        top: 50%;
+    }
+
+    &::part(cui-toast-timer) {
+        height: 32px;
+        width: 32px;
+        top: calc(50% + 3px);
+    }
+
+    &::part(time-slot) {
+        height: 32px;
+        width: 16px;
+    }
+
+    &::part(timer-lt),
+    &::part(timer-rt) {
+        height: 18px;
+        width: 18px;
+        margin-left: -13px;
+        border-width: 4px;
+    }
+
+    p {
+        color: #FFF;
+        margin-left: 10px !important;
+    }
+
+    cui-icon {
+        svg {
+            display: block;
+            height: 24px;
+            width: 24px;
+        }
+    }
+
+    &.toast-warning {
+        cui-icon {
+            svg {
+                path {
+                    stroke: #222;
+                }
+            }
+        }
+
+        p {
+            color: #222;
+        }
+    }
+
+    &.toast-info {
+        cui-icon {
+            svg {
+                path {
+                    stroke: #FFF;
+
+                    &#dot {
+                        fill: #FFF;
+                    }
+                }
+            }
+        }
+    }
+
+    //will remove after using more elegant solution down the line
+    &.toast-info,
+    &.toast-success,
+    &.toast-error {
+        &::part(cui-toast-close) {
+            background-image: url(../images/message-error-white.svg);
+        }
+    }
+}
+
+
+
+cui-notification-toaster {
+
+    &::part(toaster) {
+        padding: 0 5px;
+    }
+
+}
+
+cui-notification-toast {
+
+    &::part(cui-notification) {
+        box-shadow: rgba(0, 0, 0, .75) 1px 1px 2px 0px;
+        padding: 15px 56px 16px 50px;
+    }
+
+    &::part(cui-notification-icon) {
+        color: #FFF;
+        left: 12px;
+    }
+
+    &::part(cui-notification-close) {
+        background-image: url(../images/close.svg);
+        background-size: 22px;
+        right: 10px;
+        top: 20px;
+    }
+
+    &::part(cui-notification-timer) {
+        height: 48px;
+        width: 32px;
+        top: 31px;
+    }
+
+    &::part(time-slot) {
+        height: 32px;
+        width: 16px;
+    }
+
+    &::part(timer-lt),
+    &::part(timer-rt) {
+        height: 18px;
+        width: 18px;
+        margin-left: -13px;
+        border-width: 4px;
+    }
+
+    p {
+        color: #a1a1a1;
+
+        &.cui-notification-time {
+            margin-top: 20px;
+        }
+    }
+
+
+    &.notification-toast-warning {
+        cui-icon {
+            svg {
+                fill: rgb(51, 153, 102);
+                display: block;
+                height: 34px;
+                width: 34px;
+            }
+        }
+    }
+
+    &.notification-toast-info {
+        cui-icon {
+            svg {
+                fill: #397dbb;
+                display: block;
+                height: 34px;
+                width: 34px;
+            }
+        }
+    }
+
+    &.notification-toast-success {
+        cui-icon {
+            svg {
+                fill: rgb(51, 153, 102);
+                display: block;
+                height: 34px;
+                width: 34px;
+            }
+        }
+    }
+
+    &.notification-toast-error {
+        cui-icon {
+            svg {
+                fill: #bd4e4e;
+                display: block;
+                height: 34px;
+                width: 34px;
+            }
+        }
+    }
+
+    &.notification-toast-share {
+        cui-icon {
+            svg {
+                fill: #397dbb;
+                display: block;
+                height: 34px;
+                width: 34px;
+                margin-left: -2px;
+            }
+        }
+    }
+
+    //will remove after using more elegant solution down the line
+    &.notification-toast-info,
+    &.notification-toast-success,
+    &.notification-toast-error {
+        &::part(cui-notification-close) {
+            background-image: url(../images/close.svg);
+        }
+    }
+}

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

@@ -0,0 +1,64 @@
+.no-margin {
+    margin: 0 !important;
+}
+
+.no-margin-top {
+    margin-top: 0 !important;
+}
+
+.no-margin-bottom {
+    margin-bottom: 0 !important;
+}
+
+.no-margin-right {
+    margin-right: 0 !important;
+}
+.no-margin-left {
+    margin-left: 0 !important;
+}
+
+.hidden {
+    display: none;
+}
+
+.cui-hide-from-screen{
+
+    text-indent: -9999em;
+
+    white-space: nowrap;
+
+    overflow: hidden;
+
+    display: inline-block;
+
+}
+
+.caret-container{
+    display:flex;
+    gap: 6px;
+    justify-content: center;
+}
+
+.hide-label{
+
+    &::part(label-wrapper) {
+        display:none;
+    }
+}
+
+.vcr-width{
+        @media screen and (min-width: 1175px){
+            &::part(label-wrapper) {
+                min-width: auto;
+                max-width: max-content;
+        }
+
+    }
+
+}
+
+.print-key{
+    display:flex;
+    align-items: center;
+    
+}

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

@@ -0,0 +1,58 @@
+// Generic Colors
+$black: #000;
+$charcoal: #333;
+$white: #FFF;
+
+// Style Guild Colors
+$defaultBackground: #F6F6F6;
+$activeRegionBackground: $white;
+$contextBackground: #EDEDED;
+$contextBorderColor: #8C8C8C;
+$defaultFooterBackground: #7FA9AE;
+
+// Page
+$pageTitleTextColor: #A1A1A1;
+$pageTitleIconColor: #A1A1A1;
+$pageTextColor: $charcoal;
+$pageHoverColor: #787878;
+
+// Sections
+$sectionBackground: $activeRegionBackground;
+$sectionHeaderBorderColor: #CCC;
+$sectionHeaderButtonHoverColor: #CCC;
+$sectionHeaderTextColor: #A1A1A1;
+$sectionHeaderIconColor: #A1A1A1;
+$sectionShadowBoxColor: rgba(0, 0, 0, 0.2);
+$sectionShadowBoxX: 0;
+$sectionShadowBoxY: 1px;
+$sectionShadowBoxBlur: 2px;
+
+// Buttons
+$buttonBorderRadius: 5px;
+$primaryButtonBackground: #397DBB;
+$primaryButtonTextColor: #FFF;
+$secondaryButtonBackground: #F6F3F4;
+$secondaryButtonBorderColor: #A1A1A1;
+$secondaryButtonTextColor: #333;
+
+// Table 
+$tableBorderColor: #A1A1A1;
+$tableHeaderBackground: #CCCCCC;
+$tableBodyBackgroundColorEven: #FFF;
+$tableBodyBackgroundColorOdd: #EBEBEB;
+$tableBodyBackgroundColorEditable: #FFF;
+$tableBodyBackgroundColorUneditable: #EBEBEB;
+$tableBodyTextColor: #333;
+
+// Inputs
+$inputBorderColor: #8C8C8C;
+$inputBorderRadius: 5px;
+$inputLabelTextColor: #333333;
+
+// Menus
+$menuSeperatorColor: #DDD;
+$menuHeaderColor: #A1A1A1;
+
+// Messaging Colors
+$errorColor: #F06359;
+$successColor: #339966;