@qhealth-design-system/core 1.0.38

package/src/components/_global/css/link_columns/component.scss

@@ -0,0 +1,194 @@
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+// Link List
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+.qld__link-columns {
+    // display: block;
+    display: flex;
+    flex-wrap: wrap;
+    list-style-type: none;
+    padding: 0;
+    @include QLD-fontgrid(sm);
+    font-weight: bold;
+    overflow: hidden;
+
+    * + &{
+        @include QLD-space(margin, 1.5unit 0);
+    }
+    &:last-child{
+        @include QLD-space(margin-bottom, 0);
+    }
+
+    > li{
+        @include QLD-space(padding,1unit .25unit 1unit .25unit );
+        box-shadow: 0 $QLD-border-width-thin 0 var(--QLD-color-light-border);
+        display: flex;
+        justify-content: space-between;
+        position: relative;
+        flex: 0 0 100%;
+
+        a{
+            text-decoration: none;
+
+            &:before {
+                content: "";
+                position: absolute;
+                top: 0;
+                right: 0;
+                bottom: 0;
+                left: 0;
+            }
+        }
+
+        &::after {
+            @include QLD-space(width, 1.25unit);
+            @include QLD-space(height, 1.25unit);
+            @include QLD-space( margin, 0 0.5unit 0 0.5unit );
+            content: "";
+            flex: 0 0 auto;
+            transition: margin 0.2s ease;
+            mask-image: QLD-svguri($QLD-icon-arrow-right) ;
+            mask-repeat: no-repeat;
+            mask-position: center;
+            background-color: var(--QLD-color-light-alt-button);
+            
+            .ie8 &,
+            .lt-ie8 & {
+                content: " → ";
+            }
+        }
+
+        &:hover{
+            a{
+                color: var(--QLD-color-light-link);
+                text-decoration: underline;
+            }
+
+            &::after{
+                @include QLD-space(margin, 0 0 0 1unit);
+                background-color: var(--QLD-color-light-alt-button__hover);
+            }
+        }
+
+        &.qld__link-columns__all-link {
+            @include QLD-fontgrid(sm);
+            @include QLD-space(font-size, 1unit);
+            font-weight: bold;
+            justify-content: flex-end;
+            box-shadow: inset 0 0 -$QLD-border-width-thin 0 transparent;
+            flex: 0 0 100% !important;
+
+    
+            &::after {
+                display: none;
+            }
+        }
+    }
+    @include QLD-media(lg) {
+        &.qld__link-columns--2-col{
+            @include QLD-space(column-gap, 2unit);
+
+            > li{
+                flex: 0 0 calc(50% - 16px);
+                align-self: flex-start;
+           
+            }
+
+            a {
+                break-inside: avoid;
+            }
+        }
+
+        &.qld__link-columns--3-col {
+            @include QLD-space(column-gap, 2unit);
+            column-count: 3;
+
+            > li{
+                flex: 0 0 calc(33.22% - 22px);
+                align-self: flex-start;
+           
+            }
+
+            a {
+                break-inside: avoid;
+            }
+        }
+    }
+    
+
+    .qld__body--alt &{
+        > li{
+            box-shadow:0 $QLD-border-width-thin 0 var(--QLD-color-light-alt-border);
+
+            &.qld__link-columns__all-link {
+                box-shadow:0 $QLD-border-width-thin 0 transparent;
+
+                &::after {
+                    display: none;
+                }
+            }
+        }
+    }
+
+    .qld__body--dark &,
+    .qld__main-nav--dark &{
+        > li{
+            box-shadow:0 $QLD-border-width-thin 0 var(--QLD-color-dark-border);
+            &:hover{
+                &::after{
+                    background-color: var(--QLD-color-dark-alt-button__hover);
+                }
+            }
+
+            &::after{
+                background-color: var(--QLD-color-dark-alt-button);
+
+                
+            }
+
+            &.qld__link-columns__all-link {
+                box-shadow:0 $QLD-border-width-thin 0 transparent;
+
+                &::after {
+                    display: none;
+                }
+            }
+        }
+    }
+
+    .qld__body--dark-alt &,
+    .qld__main-nav--dark-alt &{
+        > li{
+            box-shadow:0 $QLD-border-width-thin 0 var(--QLD-color-dark-alt-border);
+
+            &:hover{
+                &::after{
+                    background-color: var(--QLD-color-dark-alt-button__hover);
+                }
+            }
+
+            &::after{
+                background-color: var(--QLD-color-dark-alt-button);
+                
+            }
+
+            &.qld__link-columns__all-link {
+                box-shadow:0 $QLD-border-width-thin 0 transparent;
+
+                &::after {
+                    display: none;
+                }
+            }
+        }
+    }
+}
+
+.qld__body {
+    h1 + .qld__link-columns,
+    h2 + .qld__link-columns,
+    h3 + .qld__link-columns,
+    h4 + .qld__link-columns,
+    h5 + .qld__link-columns  {
+        @include QLD-space(margin-top, 1.5unit);
+    }
+}

package/src/components/_global/css/link_list/component.scss

@@ -0,0 +1,37 @@
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+// Link List
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+.qld__link-list {
+	@include QLD-fontgrid( sm );
+	display: block;
+	list-style-type: none;
+	margin: 0;
+	@include QLD-space( padding, 0.25unit 0 );
+
+	.qld__body & {
+		margin: 0;
+		@include QLD-space( padding, 0.25unit 0 );
+
+		
+	}
+
+	> li {
+		display: block;
+		@include QLD-space( margin, 0.25unit);
+	}
+
+	&.qld__link-list--inline {
+		display: inline-block;
+
+		> li {
+			display: inline-block;
+		}
+	}
+}
+
+.qld__body{
+	* + .qld__link-list {
+		@include QLD-space(margin-top, 2unit);
+	}
+}

package/src/components/_global/css/modal/component.scss

@@ -0,0 +1,182 @@
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+// .qld__modal
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+.qld__modal {
+    position: relative;
+    display: none;
+
+    &.active {
+        display: block;
+    }
+
+    .qld__modal__underlay {
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        background-color: rgba(20, 20, 20, 0.4);
+        z-index: 1;
+    }
+
+    &__body__content{
+        @include QLD-space(padding, 1.5unit  0);
+    }
+
+    &.qld__services-modal__set-location, &.qld__services-modal__update-location {
+        .qld__modal__body {
+            min-width: pxToRem(360);
+
+            @include QLD-media(md) {
+                min-width: pxToRem(654);
+            }
+
+            // .qld__search {
+
+            //     .qld__btn {
+            //         min-width: auto;
+            //         @include QLD-space( padding-left, 2px );
+            //         @include QLD-space( padding-right, 2px );
+
+            //         @include QLD-media(md) {
+            //             min-width: pxToRem(108);
+            //             @include QLD-space( padding-left, 1unit );
+            //             @include QLD-space( padding-right, 1unit );
+            //         }
+            //     }
+            // }
+        }
+    }
+
+	.qld__modal__body {
+        min-width: pxToRem(360);
+        max-width: pxToRem(654);
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -100%);
+        background-color: white;
+        padding: pxToRem(30) pxToRem(20);
+        border: 2px solid var(--QLD-color-light-border);
+        @include sq-border-radius(4px);
+        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+        z-index: 101;
+
+        @include QLD-media(md) {
+            padding: pxToRem(40) pxToRem(45);
+        }
+
+        .qld__modal__body__header {
+            display: flex;
+            justify-content: space-between;
+
+            
+        }
+        .qld__modal__close {
+            position: absolute;
+            top: 1rem;
+            right: 1rem;
+            background-color: transparent;
+            box-shadow: none;
+            color: var(--QLD-color-light-text);
+            border: 0;
+
+            // padding: 0;
+            // margin: 5px 0 0 0;
+            // width: pxToRem(17);
+            // height: pxToRem(20);
+            min-width: auto;
+            line-height: 0;
+
+            svg,
+            i {
+                color: var(--QLD-color-light-text);
+                font-size: 1.5rem;
+            }
+            &:hover{
+                background-color: var(--QLD-color-light-button__hover);
+                svg,
+                i {
+                    color: var(--QLD-color-dark-text);
+                }
+            }
+        }
+
+        // .qld__search {
+
+        //     .qld__btn {
+        //         span {
+        //             display: none;
+        //         }
+    
+        //         @include QLD-media(md) {
+        //             min-width: pxToRem(108);
+
+        //             span {
+        //                 display: inline-block;
+        //             }
+    
+        //             svg {
+        //                 display: none;
+        //             }
+        //         }
+        //     }
+        // }
+
+
+        .qld__modal__body__controls {
+            // margin-top: pxToRem(20);
+        }
+
+        // .qld__btn {
+        //     margin-right: pxToRem(10);
+        //     margin-bottom: 0;
+
+        //     @include QLD-media(md) {
+        //         min-width: pxToRem(118);
+        //     }
+        // }
+
+        // .qld__cta-btn {
+        //     border-color: var(--QLD-color-dark-alt-button);
+        //     background-color: white;
+        //     color: var(--QLD-color-light-text);
+            
+        //     &:not(:disabled) {
+        //         &:hover{
+        //             background-color: var(--QLD-color-dark-alt-button);
+        //             border-color: var(--QLD-color-dark-alt-button);
+        //             color: var(--QLD-color-light-text);
+        //         }
+        //     }
+        // }
+    }
+
+    &.qld__modal--small {
+        .qld__modal__body {
+            min-width: pxToRem(360);
+            max-width: pxToRem(360);
+        }
+    }
+
+    .qld__services-modal__content {
+        max-width: pxToRem(343);
+
+        .qld__modal__body__controls {
+            text-align: center;
+        }
+    }
+
+    // .qld__modal__close {
+    //     position: fixed;
+    //     top: pxToRem(20);
+    //     right: pxToRem(20);
+    //     z-index: 1;
+    //     font-size: pxToRem(30);
+    //     box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    //     padding: 0 pxToRem(10);
+    //     width: auto;
+    // }
+
+}

package/src/components/_global/css/slick/component.scss

@@ -0,0 +1,25 @@
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+// Slick Slider
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+.slick-slider{
+    .slick-track{
+        display: flex !important;
+    }
+
+    .slick-slide{
+        height: inherit;
+
+        > div{
+            height: 100%;
+        }
+
+        li{
+            height: 100%;
+        }
+        .qld__card{
+            height: 100%;
+        }
+    }
+
+}

package/src/components/_global/css/table/component.scss

@@ -0,0 +1,211 @@
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+// table module
+// Used to display tabular data
+//
+// Content:
+// - sass-versioning
+// - globals
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+.qld__table {
+    border-collapse: collapse;
+    border-spacing: 0;
+
+    .qld__table__caption,
+    caption {
+        @include QLD-fontgrid( md, heading);
+        font-weight: bold;
+        text-align: left;
+        display: table-caption;
+        @include QLD-space( padding-bottom, 0.5unit);
+    }
+
+    .qld__table__head,
+    thead{
+        display: table-header-group;
+    }
+    
+    .qld__table__header,
+    th{
+        @include QLD-standard-space(padding, 5 4 5 4);
+        box-shadow: inset 0 0 -$QLD-border-width-default 0 var(--QLD-color-light-designAccent);
+        color: var(--QLD-color-light-heading);
+        font-weight: bold;
+        @include QLD-fontgrid( md, heading);
+        
+    }
+
+    .qld__table__cell,
+    td{
+        @include QLD-standard-space(padding, 3);
+        box-shadow: inset 0 0 -$QLD-border-width-thin 0 var(--QLD-color-light-border);
+    }
+
+    .qld__table__row,
+    tr {
+        display: table-row;
+    }
+
+    //Dark and Alt dark styles
+	.qld__body--dark &,
+	.qld__body--dark-alt &{
+
+        .qld__table__header,
+        th{
+            color: var(--QLD-color-dark-heading);
+            box-shadow: inset 0 0 -$QLD-border-width-default 0 var(--QLD-color-dark-border);
+        }
+
+        .qld__table__cell,
+        td{
+            box-shadow: inset 0 0 -$QLD-border-width-thin 0 var(--QLD-color-dark-border);
+        }
+    }
+}
+
+.qld__table.qld__table--striped{
+
+    .qld__table__body,
+    tbody{
+        .qld__table__row:nth-last-child(odd),
+        tr:nth-last-child(odd) {
+            background-color: var(--QLD-color-light-background__shade);
+        }
+    }
+
+    //Dark and Alt dark styles
+	.qld__body--dark &,
+	.qld__body--dark-alt &{
+        .qld__table__body,
+        tbody{
+            .qld__table__row:nth-last-child(odd),
+            tr:nth-last-child(odd) {
+                background-color: var(--QLD-color-dark-background__shade);
+            }
+        }
+    }
+}
+    
+
+
+ 
+// .qld__table {
+//     @include QLD-fontgrid( sm, 'default');
+//     font-family: $QLD-font;
+//     width: 100%;
+//     border-collapse: collapse;
+//     border-spacing: 0;
+        
+//     .qld__table__head {
+//         display: table-header-group;
+//         @include QLD-space( 'border-bottom', 0.25unit solid var(--QLD-color-light-designAccent));
+        
+//         .qld__table__header {
+//             text-align: left;
+//             @include QLD-space( padding, 0.75unit);
+            
+//             // header widths
+//             &.qld__table__header--width-10 {
+//                 width: 10%;
+//             }
+           
+//             &.qld__table__header--width-20 {
+//                 width: 20%;
+//             }
+            
+//             &.qld__table__header--width-25 {
+//                 width: 25%;
+//             }
+            
+//             &.qld__table__header--width-33 {
+//                 width: 33%;
+//             }
+            
+//             &.qld__table__header--width-50 {
+//                 width: 50%;
+//             }
+            
+//             &.qld__table__header--width-75 {
+//                 width: 75%;
+//             }
+            
+//             &.qld__table__header--numeric {
+//                 text-align: right;
+//             }
+            
+//             &:focus {
+//                 outline: 3px solid var(--QLD-color-light-focus);
+//             }
+//         }
+//     }
+    
+    
+//     .qld__table__cell {
+//         @include QLD-space( padding, 0.75unit);
+//         text-align: left;
+//         border-bottom: 1px solid var(--QLD-color-light-designAccent);
+        
+//         &:focus {
+//             outline: 3px solid var(--QLD-color-light-focus);
+//         }
+        
+//         //numeric cells should be aligned right and have monospaced digits
+//         &.qld__table__cell--numeric {
+//             text-align: right;
+//             font-variant: tabular-nums;
+//         }
+//     }
+    
+//     &.qld__table--striped .qld__table__body {
+//         .qld__table__row:nth-last-child( odd) {
+//             background-color: var(--QLD-color-light-background__shade);
+//         }
+//     }
+    
+//     //Alternate themes
+//     .qld__body--alt &{
+//         &.qld__table--striped .qld__table__body {
+//             .qld__table__row:nth-last-child( odd) {
+//                 background-color: var(--QLD-color-light-alt-background__shade);
+//             }
+//         }
+//     }
+    
+//     .qld__body--dark &{
+//         .qld__table__head{
+//             @include QLD-space( 'border-bottom', 0.25unit solid var(--QLD-color-dark-designAccent));
+//         } 
+        
+//         .qld__table__header,
+//         .qld__table__cell{
+//             border-bottom: 1px solid var(--QLD-color-dark-designAccent);
+//         }
+        
+//         &.qld__table--striped .qld__table__body {
+//             .qld__table__row:nth-last-child( odd) {
+//                 background-color: var(--QLD-color-dark-background__shade);
+//             }
+//         }
+//     }
+    
+//     .qld__body--dark-alt &{
+//         .qld__table__head{
+//             @include QLD-space( 'border-bottom', 0.25unit solid var(--QLD-color-dark-designAccent));
+//         } 
+        
+//         .qld__table__header,
+//         .qld__table__cell{
+//             border-bottom: 1px solid var(--QLD-color-dark-designAccent);
+//         }
+        
+//         &.qld__table--striped .qld__table__body {
+//             .qld__table__row:nth-last-child( odd) {
+//                 background-color: var(--QLD-color-dark-alt-background__shade);
+//             }
+//         }
+//     }
+// }
+
+// .qld__table__wrapper {
+//     overflow-x: auto;
+// }

package/src/components/_global/css/tabs/component.scss

@@ -0,0 +1,43 @@
+.qld__tab_panel {
+    &.qld__tab--closed,
+    &[hidden] {
+        display:none !important;
+    }
+}
+
+.qld__tab {
+    cursor:pointer;
+    background-color:var(--QLD-color-light-background) !important;
+    
+    &[aria-selected="true"] {
+        background-color:var(--QLD-color-light-background__shade) !important;
+    }
+}
+
+.qld__content-tabs {
+    border-bottom: 1px solid var(--QLD-color-light-alt-border);
+    margin-top: pxToRem(30);
+    margin-bottom: pxToRem(24);
+
+    .qld__tab {
+        cursor:pointer;
+        background-color: transparent !important;
+        border: 0;
+        line-height: pxToRem(32);
+        padding: pxToRem(15) pxToRem(15);
+        
+        &[aria-selected="true"] {
+            background-color: transparent !important;
+            font-weight: 700;
+            border-bottom: 8px solid var(--QLD-color-dark-alt-button);
+        }
+
+        &:hover {
+            font-weight: 700;
+        }
+    }
+
+    .qld__tab + .qld__tab {
+
+    }
+}