@nys-cui/cui-formpill 0.2.9 → 0.2.20

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

@@ -0,0 +1,489 @@
+$screen-width-small: 650px;
+$screen-width-large: 830px;
+$screen-width-max: 1175px;
+
+$start: 1;
+$end: 12;
+
+$_cui_field_components: 'cui-field',
+    'cui-text',
+    'cui-textarea',
+    'cui-date',
+    'cui-listbox',
+    'cui-radio-group',
+    'cui-checkbox',
+    'cui-check-group';
+
+.grid {
+    display: block;
+    width: 100%;
+
+    .grid {
+        margin-bottom: 0px;
+
+        .row {
+            .col:first-of-type {
+                padding-left: 0;
+            }
+
+            .col:last-of-type {
+                padding-right: 0;
+            }
+        }
+    }
+
+    .row {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        max-width: 100%;
+
+        &.scr-min-start {
+            justify-content: flex-start;
+        }
+
+        &.scr-min-center {
+            justify-content: center;
+        }
+
+        &.scr-min-end {
+            justify-content: flex-end;
+        }
+
+        &.scr-min-top {
+            align-items: flex-start;
+        }
+
+        &.scr-min-mid {
+            align-items: center;
+        }
+
+        &.scr-min-bot {
+            align-items: flex-end;
+        }
+
+        .col {
+            display: flex;
+            flex: 1 0 0px;
+            flex-basis: 100%;
+            max-width: 100%;
+
+            box-sizing: border-box;
+
+            @for $i from $start through $end {
+                &.scr-min-#{$i} {
+                    flex-basis: calc(calc(#{$i}/12) * 100%);
+                    max-width: calc(calc(#{$i}/12) * 100%);
+                }
+            }
+
+            @for $j from $start through $end {
+                &.offset-#{$j} {
+                    margin-left: calc(calc(#{$j}/12) * 100%);
+                }
+            }
+
+            &.push-right {
+                margin-left: 0%;
+            }
+
+            &.align-end {
+                justify-content: flex-end;
+            }
+
+            &.align-center {
+                justify-content: center;
+            }
+
+            &.sticky {
+                position: unset;
+                top: unset;
+            }
+        }
+
+        .col-full {
+            display: flex;
+            flex: 1 0 0px;
+            max-width: 100%;
+            flex-basis: 100%;
+
+            box-sizing: border-box;
+
+            &.align-end {
+                justify-content: flex-end;
+            }
+
+            &.align-center {
+                justify-content: center;
+            }
+        }
+    }
+}
+
+@media screen and (min-width: $screen-width-small) {
+    .grid .row {
+        &.scr-sm-start {
+            justify-content: flex-start;
+        }
+
+        &.scr-sm-center {
+            justify-content: center;
+        }
+
+        &.scr-sm-end {
+            justify-content: flex-end;
+        }
+
+        &.scr-sm-top {
+            align-items: flex-start;
+        }
+
+        &.scr-sm-mid {
+            align-items: center;
+        }
+
+        &.scr-sm-bot {
+            align-items: flex-end;
+        }
+
+        .col {
+            max-width: 100%;
+            flex-basis: 0px;
+
+            @for $i from $start through $end {
+                &.scr-sm-#{$i} {
+                    flex-basis: calc(calc(#{$i}/12) * 100%);
+                    max-width: calc(calc(#{$i}/12) * 100%);
+                }
+            }
+
+            @for $j from $start through $end {
+                &.scr-sm-offset-#{$j} {
+                    margin-left: calc(calc(#{$j}/12) * 100%);
+                }
+            }
+
+            &.push-right {
+                margin-left: 50%;
+            }
+
+            &.align-end {
+                justify-content: flex-end;
+            }
+
+            &.align-center {
+                justify-content: center;
+            }
+
+            &.sticky {
+                position: sticky;
+                top: 30%;
+            }
+        }
+    }
+}
+
+@media screen and (min-width: $screen-width-large) {
+    .grid .row {
+        &.scr-lg-start {
+            justify-content: flex-start;
+        }
+
+        &.scr-lg-center {
+            justify-content: center;
+        }
+
+        &.scr-lg-end {
+            justify-content: flex-end;
+        }
+
+        &.scr-lg-top {
+            align-items: flex-start;
+        }
+
+        &.scr-lg-mid {
+            align-items: center;
+        }
+
+        &.scr-lg-bot {
+            align-items: flex-end;
+        }
+
+        .col {
+            max-width: 100%;
+            flex-basis: 0px;
+
+            @for $i from $start through $end {
+                &.scr-lg-#{$i} {
+                    flex-basis: calc(calc(#{$i}/12) * 100%);
+                    max-width: calc(calc(#{$i}/12) * 100%);
+                }
+            }
+
+            @for $j from $start through $end {
+                &.scr-lg-offset-#{$j} {
+                    margin-left: calc(calc(#{$j}/12) * 100%);
+                }
+            }
+
+            &.push-right {
+                margin-left: 50%;
+            }
+
+            &.align-end {
+                justify-content: flex-end;
+            }
+
+            &.align-center {
+                justify-content: center;
+            }
+        }
+    }
+}
+
+@media screen and (min-width: $screen-width-max) {
+    .grid .row {
+        &.scr-max-start {
+            justify-content: flex-start;
+        }
+
+        &.scr-max-center {
+            justify-content: center;
+        }
+
+        &.scr-max-end {
+            justify-content: flex-end;
+        }
+
+        &.scr-max-top {
+            align-items: flex-start;
+        }
+
+        &.scr-max-mid {
+            align-items: center;
+        }
+
+        &.scr-max-bot {
+            align-items: flex-end;
+        }
+
+        .col {
+            max-width: 100%;
+            flex-basis: 0px;
+
+            @for $i from $start through $end {
+                &.scr-max-#{$i} {
+                    flex-basis: calc(calc(#{$i}/12) * 100%);
+                    max-width: calc(calc(#{$i}/12) * 100%);
+                }
+            }
+
+            @for $j from $start through $end {
+                &.scr-max-offset-#{$j} {
+                    margin-left: calc(calc(#{$j}/12) * 100%);
+                }
+            }
+
+            &.push-right {
+                margin-left: 50%;
+            }
+
+            &.align-end {
+                justify-content: flex-end;
+            }
+
+            &.align-center {
+                justify-content: center;
+            }
+        }
+    }
+}
+
+
+//OLD GRID FOR TESTING COMPATABILITY
+.grid-old {
+    display: block;
+    width: 100%;
+    padding-bottom: 10px;
+    .row {
+        display: grid;
+        grid-template-columns: repeat(12, 1fr);
+        gap: 1.5rem;
+        row-gap: 0;
+
+        &.height-row{
+            grid-template-rows: 40px;
+        }
+
+        .col, .col-full, .col-side-third-large, .col-middle-third-small{
+            grid-column: auto/span 12;
+            //margin-bottom: 10px;
+
+            .row {
+                width: 100%;
+            }
+
+            &.align-center {
+                display: flex;
+                justify-content: center;
+            }
+
+            &.align-end {
+                display: flex;
+                justify-content: flex-end;
+            }
+
+            cui-section {
+                width: 100%; 
+            }
+        }
+
+        .col-middle-third-small{
+            justify-self: center;
+        }
+        .mobile-hide{
+            display:none;
+        }
+        
+    }
+
+    &.button-row {
+        .col, .col-full {
+            margin-bottom: 0;
+        }
+    }
+
+}
+
+@media only screen and (max-width: 1174px) {
+
+    .grid-old {
+        .row {
+            &.height-row{
+                grid-template-rows: 60px;
+            }
+        }
+    }
+
+    cui-listbox{
+        &.center{
+            align-self:center!important;
+        }
+    }
+
+}
+
+@media only screen and (min-width: 710px) {
+
+    .grid-old {
+
+        &.check{
+
+            .row {
+        
+                .col, .col-full, .col-side-third-large, .col-middle-third-small {
+                    display: flex;
+                    
+                    &.center-content{
+                        flex-direction: column;
+                        justify-content: center;
+                    }
+                }
+
+                .col {
+                    grid-column: auto/span 6;
+                }
+        
+                .col-full {
+                    grid-column: auto/span 12;
+                }
+
+                .col.push-right {
+                    grid-column: 7/span 6;
+                }
+
+                .col-middle-third-small{
+                    grid-column: auto/span 2;
+                    justify-self: auto;
+                    > :not(cui-listbox) {
+                        align-self: center;
+                    }
+                    cui-listbox{
+                        align-self: flex-end;
+                    }
+                }
+
+                .col-side-third-large{
+                    grid-column: auto/span 5;
+
+                }
+
+                .mobile-hide{
+                    display:grid;
+                }
+
+        
+            }
+    }
+    
+    }
+    
+}
+
+
+@media only screen and (min-width: 650px) {
+
+    .grid-old {
+
+        &:not(.check){
+
+            .row {
+        
+                .col, .col-full, .col-side-third-large, .col-middle-third-small {
+                    display: flex;
+                    
+                    &.center-content{
+                        flex-direction: column;
+                        justify-content: center;
+                    }
+                }
+
+                .col {
+                    grid-column: auto/span 6;
+                }
+        
+                .col-full {
+                    grid-column: auto/span 12;
+                }
+
+                .col.push-right {
+                    grid-column: 7/span 6;
+                }
+
+                .col-middle-third-small{
+                    grid-column: auto/span 2;
+                    justify-self: auto;
+                    > :not(cui-listbox) {
+                        align-self: center;
+                    }
+                    cui-listbox{
+                        align-self: flex-end;
+                    }
+                }
+
+                .col-side-third-large{
+                    grid-column: auto/span 5;
+
+                }
+
+                .mobile-hide{
+                    display:grid;
+                }
+
+        
+            }
+        }
+    
+    }
+    
+}

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

@@ -0,0 +1,46 @@
+cui-help{
+	
+	.help-trigger{
+		display: inline-block;
+		white-space: nowrap;
+		overflow: hidden;
+		background-repeat: no-repeat;
+		background-color: transparent;
+		border:none;
+		text-indent: -9999em;
+
+		background-image: url(../images/help-circle.svg);
+		background-size: 24px 24px;
+		width: 24px; 
+		min-width: 24px; 
+		height: 24px;
+		padding:0px;
+		filter: invert(61%) sepia(21%) saturate(6725%) hue-rotate(164deg) brightness(94%) contrast(87%);
+		cursor:pointer;
+		margin:3px;
+
+	}
+
+}
+
+cui-popover.cui-help-popover{
+
+	.popover-body{
+		padding:.7em;
+		border: 1px solid #ffe366;
+		max-width:500px;
+		border-radius: 4px;
+		box-shadow:none;
+		background:#fff6cc;
+		min-width:40px;
+	}
+
+	&.arrow:before{
+		left:8px;
+		border: solid 1px;
+		border-color :#ffe366 transparent transparent #ffe366;
+		background:#fff6cc;
+		box-shadow: rgb(0,0,0,.2) -2px -2px 2px 0px;
+		top:-7px;
+	}
+}