@qhealth-design-system/core 1.0.38

package/src/components/_global/css/grid-12/component.scss

@@ -0,0 +1,331 @@
+/*! @gov.au/grid-12 v2.1.0 */
+
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+// grid-12 module globals
+// Implementation of the Bootstrap 3 grid.
+//
+// Content:
+// - Sass versioning
+// - Global variables: none so far
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+// GLOBAL VARIABLES
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+$QLD-grid-12-columns: 12 !default;        //column amounts
+// $QLD-grid-12-gutter-width: 32px !default; //gutter space
+
+
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+// Mixins and grid class generation
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+/**
+ * Iterates through all 12 columns (≥2) to calculate the correct amount of left
+ * and right padding for each of the classes.
+ */
+@mixin QLD-grid-12-make-grid-columns( $i: 1, $list: ".col-xs-#{ $i }, .col-sm-#{ $i }, .col-md-#{ $i }, .col-lg-#{ $i }, .col-xl-#{ $i }" ) {
+	@for $i from ( 1 + 1 ) through $QLD-grid-12-columns {
+	    $list: "#{ $list }, .col-xs-#{ $i }, .col-sm-#{ $i }, .col-md-#{ $i }, .col-lg-#{ $i }, .col-xl-#{ $i }";
+	}
+
+	#{ $list } {
+        box-sizing: border-box; //we can’t assume that has been added on * {}
+        position: relative;
+        // padding-left:  ceil( ( $QLD-grid-12-gutter-width / 2 ) );
+        // padding-right: floor( ( $QLD-grid-12-gutter-width / 2 ) );
+        @include QLD-container-padding($QLD-grid-gutter-sm, horizontal);
+        flex: 0 0 auto;
+
+        @include QLD-media(md) {
+            @include QLD-container-padding($QLD-grid-gutter-sm, horizontal);
+        }
+        
+        @include QLD-media(lg) {
+            // @include QLD-container-padding($QLD-grid-gutter-lg, horizontal);
+        }
+	}
+}
+
+/**
+ * Iterates through the columns to create a new list and then sets the float.
+ */
+@mixin QLD-grid-12-float-grid-columns( $class, $i: 1, $list: ".col-#{ $class }-#{ $i }" ) {
+	@for $i from ( 1 + 1 ) through $QLD-grid-12-columns {
+	    $list: "#{ $list }, .col-#{ $class }-#{ $i }";
+	}
+
+	#{ $list } {
+	    // float: left;
+	}
+}
+
+/**
+ * Calculates the correct widths as a percentage based on the column count,
+ * column breakpoint class, and type (pull or offset).
+ */
+@mixin QLD-grid-12-calc-grid-column( $index, $class, $type ) {
+	@if ( $type == width ) and ( $index > 0 ) {
+        .col-#{ $class }-#{ $index } {
+            width: percentage( ( $index / $QLD-grid-12-columns ) );
+        }
+	}
+
+	@if ( $type == push ) and ( $index > 0 ) {
+        .col-#{ $class }-push-#{ $index } {
+            left: percentage( ( $index / $QLD-grid-12-columns ) );
+        }
+	}
+
+	@if ( $type == push ) and ( $index == 0 ) {
+        .col-#{ $class }-push-0 {
+            left: auto;
+        }
+	}
+
+	@if ($type == pull) and ( $index > 0 ) {
+        .col-#{ $class }-pull-#{ $index } {
+            right: percentage( ( $index / $QLD-grid-12-columns ) );
+        }
+	}
+
+	@if ($type == pull) and ( $index == 0 ) {
+        .col-#{ $class }-pull-0 {
+            right: auto;
+        }
+	}
+
+	@if ($type == offset) {
+        .col-#{ $class }-offset-#{ $index } {
+            margin-left: percentage( ( $index / $QLD-grid-12-columns ) );
+        }
+	}
+}
+
+/**
+ * Calls the above mixins and combines them.
+ */
+@mixin QLD-grid-12-loop-grid-columns( $columns, $class, $type ) {
+	@for $i from 0 through $columns {
+	    @include QLD-grid-12-calc-grid-column( $i, $class, $type );
+	}
+}
+
+
+/**
+ * Finally, we create the grid and all the necessary classes.
+ */
+@mixin QLD-grid-12-make-grid( $class ) {
+	@include QLD-grid-12-float-grid-columns( $class );
+	@include QLD-grid-12-loop-grid-columns( $QLD-grid-12-columns, $class, width );
+	@include QLD-grid-12-loop-grid-columns( $QLD-grid-12-columns, $class, pull );
+	@include QLD-grid-12-loop-grid-columns( $QLD-grid-12-columns, $class, push );
+	@include QLD-grid-12-loop-grid-columns( $QLD-grid-12-columns, $class, offset );
+}
+
+
+// Slight grid changes for container fluid
+.qld__grid .container-fluid {
+    @include QLD-space(max-width, $QLD-grid-maxwidth);
+    margin-left: auto;
+    margin-right: auto;
+    @include QLD-container-padding($QLD-grid-gutter-sm, horizontal);
+
+    @include QLD-media(md) {
+        @include QLD-container-padding($QLD-grid-gutter-sm, horizontal); 
+
+    }
+
+    @include QLD-media(lg) {
+        @include QLD-container-padding($QLD-grid-gutter-sm, horizontal);
+    }
+
+}
+
+.qld__grid {
+
+    .qld__global_alert > .container-fluid,
+    .qld__header > div > .container-fluid,
+    .qld__main-nav > .container-fluid,
+    main > section > .container-fluid,
+    main > div > .container-fluid,
+    main  > div > div > .container-fluid,
+    main  > div > section > .container-fluid,
+    .qld__footer > .container-fluid{
+
+        @include QLD-media(md) {
+            @include QLD-container-padding($QLD-grid-gutter-md, horizontal); 
+        }
+        @include QLD-media(lg) {
+            @include QLD-container-padding($QLD-grid-gutter-lg, horizontal); 
+        }
+        
+
+    }
+
+    
+    
+}
+
+.qld__grid {
+    //create container that snaps to breakpoints
+    .container {
+        box-sizing: border-box;
+    }
+    //create both containers
+    .container,
+    .container-fluid {
+        box-sizing: border-box;
+        @include QLD-clearfix;
+        
+        .container,
+        .container-fluid:not(.qld__example__inline &) {
+            padding: 0;
+            
+            @include QLD-media(md) {
+                padding: 0;
+            }
+            
+            @include QLD-media(lg) {
+                padding: 0;
+            }
+            
+            @include QLD-media(xl) {
+                padding: 0;
+            }
+            
+            @include QLD-media(xxl) {
+                padding: 0;
+            }
+        }
+    }
+
+    //create row and clear floats inside
+    .row { 
+        display: flex;
+        flex-wrap: wrap;
+        flex-direction: row;
+        clear: both;
+        @include QLD-clearfix;
+        @include QLD-container-margin($QLD-grid-gutter-sm, neg, horizontal );
+
+        @include QLD-media(md) {
+            @include QLD-container-margin($QLD-grid-gutter-sm, neg, horizontal);
+        }
+        
+        @include QLD-media(lg) {
+            // @include QLD-container-margin($QLD-grid-gutter-md, neg, horizontal);
+        }
+
+        
+        // &--section {
+        //     * + & {
+        //         @include QLD-space(margin-top, 3unit);
+        //     }
+        // }
+        
+        &--heading-paragraph-columns {
+            * + h2 {
+                @include QLD-space(margin-top, 1.5unit);
+            }
+            
+            * + h3 {
+                @include QLD-space(margin-top, 1.5unit);
+            }
+            
+            * + p {
+                @include QLD-space(margin-top, 1unit);
+
+            }
+            div[class^="col-"]{
+                @include QLD-space(margin-top, 1unit);
+                // @include QLD-space(margin-bottom, 1unit);
+                // &:last-child{
+                //     @include QLD-space(margin-bottom, 0unit);
+                // }
+                @include QLD-media(lg) {
+                    @include QLD-space(margin-top, 0unit);
+                    // @include QLD-space(margin-bottom, 0unit);
+                }
+
+                
+
+            }
+            
+            .qld__callout {
+                + p {
+                    @include QLD-space(margin-top, 1.5unit);
+                }
+            }
+            
+            @include QLD-media(lg) {
+                * + & {
+                    @include QLD-space(margin-top, 1.5unit);
+                }
+                
+                h2,
+                h3,
+                p {
+                    &:first-child {
+                        margin-top: 0;
+                    }
+                }
+            }
+        }
+        
+        #content{
+            @include QLD-media(md) {
+                @include QLD-container-padding($QLD-grid-gutter-sm, horizontal);
+            }
+        }
+    }
+    main > {
+        // div > section > .container-fluid > .row,
+        // section > .container-fluid > .row{
+        //     // @include QLD-container-margin($QLD-grid-gutter-md, neg, horizontal);
+        //     @include QLD-media(md) {
+        //         @include QLD-container-margin($QLD-grid-gutter-md, neg, horizontal);
+        //     }
+        //     @include QLD-media(lg) {
+        //         @include QLD-container-margin($QLD-grid-gutter-lg, neg, horizontal);
+        //     }
+        // }
+        .qld__body > .container-fluid {
+            > .row{
+                @include QLD-media(lg) {
+                    @include QLD-container-margin($QLD-grid-gutter-lg, neg, horizontal);
+                }
+            }
+            > .row> div[class^="col-"],
+            > .row> div[class^="col-"]#content{
+                @include QLD-media(lg) {
+                    @include QLD-container-padding($QLD-grid-gutter-md, horizontal ) ;
+                }
+            }
+            
+        }
+    }
+    
+    //create all classes
+    @include QLD-grid-12-make-grid-columns;
+    //create xs classes
+    @include QLD-grid-12-make-grid(xs);
+    
+    //create sm classes
+    @include QLD-media(sm) {
+        @include QLD-grid-12-make-grid(sm);
+    }
+    
+    //create md classes
+    @include QLD-media(md) {
+        @include QLD-grid-12-make-grid(md);
+    }
+    
+    //create lg classes
+    @include QLD-media(lg) {
+        @include QLD-grid-12-make-grid(lg);
+    }
+    //create xl classes
+    @include QLD-media(xl) {
+        @include QLD-grid-12-make-grid(xl);
+    }
+}

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

@@ -0,0 +1,172 @@
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+// headings module
+// Class styles for display headings.
+//
+// Content:
+// - Basic styles for all headings
+// - Default spacing
+// - Unique styles for individual headings
+// - Typographic spacing for .qld__body only
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+// HEADINGS/DISPLAY STYLES
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+/**
+ * Basic styles for all headings
+ */
+// .qld__header,
+.qld__body,
+.qld__footer,
+.qld__banner,
+.qld__main-nav{
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    .qld__display-xxxl,
+    .qld__display-xxl,
+    .qld__display-xl,
+    .qld__display-lg,
+    .qld__display-md,
+    .qld__display-sm,
+    .qld__display-xs{
+        font-family: $QLD-font;
+        font-weight: bold;
+        margin: 0;
+        // color: var(--QLD-color-light-heading);
+        color: var(--QLD-color-light-heading);
+        @include QLD-space(max-width, $QLD-font-maxwidth);
+    }
+
+    &.qld__body--dark,
+    &.qld__body--dark-alt {
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6,
+        .qld__display-xxxl,
+        .qld__display-xxl,
+        .qld__display-xl,
+        .qld__display-lg,
+        .qld__display-md,
+        .qld__display-sm,
+        .qld__display-xs{
+           color: var(--QLD-color-dark-heading);
+        }
+    }
+
+    /**
+    * Typographic spacing for QLD-body only
+    * Larger space for larger headings has been added to improve legibility in large blocks of text.
+    * This provides area's of eye-rest and uses spacing to create visual sections
+    * Also ref. https://github.com/govau/design-system-components/issues/282
+    */
+
+    .qld__display-xxxl {
+        @include QLD-fontgrid(xxxl, heading);
+    }
+
+    h1{
+        @include QLD-fontgrid(xl, heading);
+
+        @include QLD-media(lg) {
+            @include QLD-fontgrid(xxl, heading);
+        }
+    }
+
+    h2,
+    .qld__display-xl{
+        @include QLD-space(font-size, 1.75unit); 
+        @include QLD-space(line-height, 2.25unit);
+
+        @include QLD-media(lg) {
+            @include QLD-fontgrid(xl, heading);
+        }
+    }
+
+    h3,
+    .qld__display-lg{
+        @include QLD-fontgrid(lg, heading);
+    }
+
+    h4,
+    .qld__display-md{
+        @include QLD-fontgrid(md, heading);
+    }
+
+    h5,
+    .qld__display-sm{
+        @include QLD-fontgrid(md, heading);
+    }
+
+    h6,
+    .qld__display-xs{
+        @include QLD-fontgrid(sm, heading);
+    }
+
+    /**
+    * Default margin-top
+    */
+
+    *:not([type="hidden"]){
+        + .qld__display-xxxl{
+            @include QLD-space(margin-top, 2.25unit);
+
+            @include QLD-media(md) {
+                @include QLD-space(margin-top, 3.5unit);
+            }
+        }
+
+        + h1,
+        + .qld__display-xl{
+            @include QLD-space(margin-top, 2unit);
+
+            @include QLD-media(md) {
+                @include QLD-space(margin-top, 3unit);
+            }
+        }
+
+        + .qld__display-lg,
+        + h2{
+            @include QLD-space(margin-top, 2unit);
+
+            @include QLD-media(md) {
+                @include QLD-space(margin-top, 3unit);
+            }
+        }
+
+        + .qld__display-md,
+        + h3{
+            @include QLD-space(margin-top, 2unit);
+
+            @include QLD-media(md) {
+                @include QLD-space(margin-top, 2.25unit);
+            }
+        }
+
+        + .qld__display-sm,
+        + h4{
+            @include QLD-space(margin-top, 1unit);
+
+            @include QLD-media(md) {
+                @include QLD-space(margin-top, 2unit);
+            }
+        }
+
+        + .qld__display-xs,
+        + h5,
+        + h6{
+            @include QLD-space(margin-top, 1unit);
+
+            @include QLD-media(md) {
+                @include QLD-space(margin-top, 1.5unit);
+            }
+        }
+    }
+}
+

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

@@ -0,0 +1,29 @@
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+// Icons
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+.qld__icon{
+    height: $QLD-icon-size-xs;
+    width: $QLD-icon-size-xs;
+    vertical-align: middle;
+    align-self: center;
+
+    &--sm{
+        height: $QLD-icon-size-sm;
+        width: $QLD-icon-size-sm;
+    }
+    &--md{
+        height: $QLD-icon-size-md;
+        width: $QLD-icon-size-md;
+    }
+    &--lg{
+        height: $QLD-icon-size-lg;
+        width: $QLD-icon-size-lg;
+    }
+
+    &--xl{
+        height: $QLD-icon-size-xl;
+        width: $QLD-icon-size-xl;
+    }
+}
+