@qhealth-design-system/core 1.0.38

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

@@ -0,0 +1,897 @@
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+// Body module
+//
+// Content:
+// - Body styles
+//   - body
+//   - anchor (a)
+//   - mark
+//   - ::selection (highlight colour)
+//   - paragraphs
+//   - sorted and unsorted lists
+//   - list items
+//   - definition lists, terms and definitions
+//   - emphasis, bolding, etc.
+//   - editorial markup (eg. ins and del)
+//   - strong and small
+//   - first definition (dfn)
+//   - abbreviations (abbr)
+//   - variables (var) and nested indices (sup and sub)
+//   - pre-formatted text and nested code, kbd, samp
+//   - code
+//   - keyboard strokes (kbd)
+//   - horizontal rules (hr)
+//
+// Thinking: primarily we want to target these: https://w3c.github.io/html/textlevel-semantics.html
+//
+// From there:
+// - provide good, legible basics
+// - provide a vertical rhythm based on content size
+// - cater for a common and semantic nesting
+// - keep styling to a minimum
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+// BODY STYLES
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+main,
+#main_form,
+#content,
+form {
+     .qld__body {
+        @include QLD-container-padding($QLD-container-padding-mobile);
+
+        + .pb-0 {
+            @include QLD-space(padding-bottom, 0); 
+        }
+
+        + .pt-0 {
+            @include QLD-space(padding-top, 0); 
+        }
+
+        /**
+        * Reduce padding top if the following section has the same background
+        */
+        + .qld__body,
+        + data + .qld__body,
+        + h1.sr-only + .qld__body,
+        + h1.sr-only + data + .qld__body {
+            padding-top: 0;
+            
+            &.qld__body--alt{
+                @include QLD-container-padding($QLD-container-padding-mobile);
+                @include QLD-media(lg) {
+                    @include QLD-container-padding($QLD-container-padding-desktop);
+                }
+            }
+            &.qld__body--dark{
+                @include QLD-container-padding($QLD-container-padding-mobile);
+                @include QLD-media(lg) {
+                    @include QLD-container-padding($QLD-container-padding-desktop);
+                }
+            }
+            &.qld__body--dark-alt{
+                @include QLD-container-padding($QLD-container-padding-mobile);
+                @include QLD-media(lg) {
+                    @include QLD-container-padding($QLD-container-padding-desktop);
+                }
+            }
+        }
+        &.qld__body--alt{
+            + .qld__body.qld__body--alt,
+            + data + .qld__body--alt,
+            + h1.sr-only + .qld__body--alt,
+            + h1.sr-only + data + .qld__body--alt {
+                padding-top: 0 !important;
+            }
+            + .qld__body,
+            + data + .qld__body,
+            + h1.sr-only + .qld__body,
+            + h1.sr-only + data + .qld__body {
+                @include QLD-container-padding($QLD-container-padding-mobile);
+                @include QLD-media(lg) {
+                    @include QLD-container-padding($QLD-container-padding-desktop);
+                }
+            }
+        }
+        &.qld__body--dark{
+            + .qld__body.qld__body--dark,
+            + data + .qld__body.qld__body--dark,
+            + h1.sr-only + .qld__body--dark,
+            + h1.sr-only + data + .qld__body--dark{
+                padding-top: 0 !important;
+            }
+            + .qld__body,
+            + data + .qld__body,
+            + h1.sr-only + .qld__body,
+            + h1.sr-only + data + .qld__body {
+                @include QLD-container-padding($QLD-container-padding-mobile);
+                @include QLD-media(lg) {
+                    @include QLD-container-padding($QLD-container-padding-desktop);
+                }
+            }
+        }
+        &.qld__body--dark-alt{
+            + .qld__body.qld__body--dark-alt,
+            + data + .qld__body.qld__body--dark-alt,
+            + h1.sr-only + .qld__body--dark-alt,
+            + h1.sr-only + data + .qld__body--dark-alt{
+                padding-top: 0 !important;
+            }
+            + .qld__body,
+            + data + .qld__body,
+            + h1.sr-only + .qld__body,
+            + h1.sr-only + data + .qld__body {
+                @include QLD-container-padding($QLD-container-padding-mobile);
+                @include QLD-media(lg) {
+                    @include QLD-container-padding($QLD-container-padding-desktop);
+                }
+            }
+        }
+        @include QLD-media(lg) {
+            @include QLD-container-padding($QLD-container-padding-desktop);
+        }
+                
+        
+        &--example {
+            @include QLD-space(padding, 1.5unit);
+        }
+        
+        //Align the body when within a two col layout/ content page
+        #content[class^="col-"] > .qld__body {
+            @include QLD-container-margin($QLD-grid-gutter-sm, neg, horizontal );
+            @include QLD-container-padding($QLD-container-padding-mobile);
+
+            @include QLD-media(md) {
+                @include QLD-container-margin($QLD-grid-gutter-md, neg, horizontal );
+                @include QLD-container-padding($QLD-grid-gutter-sm, horizontal );
+                
+            }
+
+            @include QLD-media(lg) {
+                @include QLD-container-margin($QLD-grid-gutter-sm, neg, horizontal );
+                @include QLD-container-padding($QLD-container-padding-mobile);
+            }
+
+            &:first-of-type{
+                @include QLD-space(padding-top, 0);
+
+                &:last-of-type{
+                    @include QLD-space(padding-top, 2.5unit);
+                    @include QLD-media(lg) {
+                        @include QLD-space(padding-top, 4.5unit);
+                    }
+                }
+
+
+                &.qld__body--alt,
+                &.qld__body--dark,
+                &.qld__body--dark-alt{
+                    @include QLD-container-padding($QLD-container-padding-mobile);
+
+                    @include QLD-media(lg) {
+                        @include QLD-container-padding($QLD-container-padding-desktop);
+                    }
+                }
+            }
+            &:last-of-type{
+                @include QLD-space(padding-bottom, 0);
+                
+                &.qld__body--alt,
+                &.qld__body--dark,
+                &.qld__body--dark-alt{
+                    @include QLD-container-padding($QLD-container-padding-mobile, !important);
+
+                    @include QLD-media(lg) {
+                        @include QLD-container-padding($QLD-container-padding-desktop !important);
+                    }
+                }
+                
+            }
+
+            .container-fluid {
+                @include QLD-container-padding($QLD-grid-inner-container-mobile, horizontal );
+                @include QLD-media(lg) {
+                    @include QLD-container-padding($QLD-grid-inner-container-desktop, horizontal );
+                }
+            }
+
+            + .qld__body,
+            + data + .qld__body{
+                padding-top: 0;
+                
+                &.qld__body--alt{
+                    @include QLD-container-padding($QLD-container-padding-mobile);
+                    @include QLD-media(lg) {
+                        @include QLD-container-padding($QLD-container-padding-desktop);
+                    }
+                }
+                &.qld__body--dark{
+                    @include QLD-container-padding($QLD-container-padding-mobile);
+                    @include QLD-media(lg) {
+                        @include QLD-container-padding($QLD-container-padding-desktop);
+                    }
+                }
+                &.qld__body--dark-alt{
+                    @include QLD-container-padding($QLD-container-padding-mobile);
+                    @include QLD-media(lg) {
+                        @include QLD-container-padding($QLD-container-padding-desktop);
+                    }
+                }
+            }
+            &.qld__body--alt{
+                + .qld__body.qld__body--alt,
+                + data + .qld__body--alt{
+                    padding-top: 0 !important;
+                }
+                + .qld__body,
+                + data + .qld__body{
+                    @include QLD-container-padding($QLD-container-padding-mobile);
+                    @include QLD-media(lg) {
+                        @include QLD-container-padding($QLD-container-padding-desktop);
+                    }
+                }
+            }
+            &.qld__body--dark{
+                + .qld__body.qld__body--dark,
+                + data + .qld__body.qld__body--dark{
+                    padding-top: 0 !important;
+                }
+                + .qld__body,
+                + data + .qld__body{
+                    @include QLD-container-padding($QLD-container-padding-mobile);
+                    @include QLD-media(lg) {
+                        @include QLD-container-padding($QLD-container-padding-desktop);
+                    }
+                }
+            }
+            &.qld__body--dark-alt{
+                + .qld__body.qld__body--dark-alt,
+                + data + .qld__body.qld__body--dark-alt{
+                    padding-top: 0 !important;
+                }
+                + .qld__body,
+                + data + .qld__body{
+                    @include QLD-container-padding($QLD-container-padding-mobile);
+                    @include QLD-media(lg) {
+                        @include QLD-container-padding($QLD-container-padding-desktop);
+                    }
+                }
+            }
+        }
+        //-----END:Reduce padding top if the following section has the same background----
+    }
+    &.content {
+        .qld__body--breadcrumb {
+            @include QLD-space(padding-bottom, 3unit);
+        }
+        
+    }
+    .qld__body--breadcrumb {
+        @include QLD-space(padding-top, 1unit);
+        @include QLD-space(padding-bottom, 1.5unit);
+        @include QLD-media(md) {
+            @include QLD-space(padding-top, 2.5unit);
+        }
+        @include QLD-media(lg) {
+            @include QLD-space(padding-top, 3unit);
+            @include QLD-space(padding-bottom, 2unit);
+        }
+           
+    }
+
+}
+
+.qld__body,
+.qld__footer {
+    @include QLD-fontgrid(sm) ;
+    @include QLD-space(font-size, 1.063unit);
+    margin: 0;
+    text-size-adjust: 100%;
+    font-family: $QLD-font;
+    color: var(--QLD-color-light-text);
+    background-color: var(--QLD-color-light-background);
+
+
+    a {
+        color: var(--QLD-color-light-link);
+        text-decoration: underline;
+        text-decoration-skip-ink: auto;
+        @include QLD-space(max-width, $QLD-font-maxwidth);
+       
+        &:hover {
+            // color: var(--QLD-color-light-text);
+            text-decoration: none;
+        }
+       
+        @include QLD-focus();
+    }
+
+    p {
+        margin: 0;
+        @include QLD-space(max-width, $QLD-font-maxwidth);
+        
+        // &.abstract {
+        //     @include QLD-fontgrid(lg, h3);
+        // }
+    }
+
+    *:not([type="hidden"]) {
+        + p {
+        @include QLD-space(margin-top, 1unit);
+
+            @include QLD-media(lg) {
+                @include QLD-space(margin-top, 1.5unit);
+            }
+        }
+    }
+
+    img {
+        max-width: 100%;
+	    height: auto;
+    }
+    
+    /**
+	 * Highlighting in-page sections that are in focus
+	 */
+    [tabindex="0"]:focus {
+        @include QLD-outline();
+    }
+    
+    /**
+	 * `mark` styling.
+	 */
+    mark {
+        color: var(--QLD-color-dark-text);
+        background-color: var(--QLD-color-dark-background);
+    }
+
+    /**
+	 * Text selection styling
+	 */
+    ::selection {
+        color: var(--QLD-color-dark-text);
+       
+        background-color: var(--QLD-color-dark-background);
+        opacity: .99;
+        // Why RGBA 0.99? https://stackoverflow.com/a/7224621
+    }
+
+    // Decrease the opacity for certain elements
+    img::selection,
+    video::selection,
+    iframe::selection {
+        background-color: var(--QLD-color-light-link);
+        opacity: .75;
+    }
+
+    ul:not([class]),
+    ol:not([class]),
+    dl:not([class]),
+    pre {
+        margin: 0; //reset defaults
+    }
+
+    pre {
+        white-space: pre-wrap;
+    }
+    
+    * + ul:not([class]),
+    * + ol:not([class]),
+    * + dl:not([class]),
+    * + pre {
+        @include QLD-space(margin-top, 1unit);
+    }
+
+    ul:not([class]),
+    ol:not([class]) {
+        > li {
+            @include QLD-space(margin-top, .5unit);
+            
+            > ul:not([class]),
+            > ol:not([class]) {
+                @include QLD-space(margin-top, 1unit);
+                
+                > li {
+                    list-style-type: disc;
+                }
+            }
+            
+            &:first-child {
+                @include QLD-space(margin-top, 0unit);
+            }
+        }
+        
+        > ul:not([class]) {
+            list-style-type: disc;
+        }
+    }
+    
+    dl:not([class]) {
+        > dd {
+            @include QLD-space(margin-top, 0.5unit);
+            @include QLD-space(padding-left, 0.5unit);
+            margin-left: 0;
+            border-left: solid 1px;
+        }
+        
+        > dt {
+            @include QLD-space(margin-top, 1.5unit);
+            font-weight: bold;
+            
+            &:first-of-type {
+                margin-top: 0;
+            }
+        }
+    }
+
+    .written-by:after {
+        content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEiIHZpZXdCb3g9IjAgMCA2NTggMTgiPjx0ZXh0IHg9IjEzIiB5PSIxMyIgZm9udC1zaXplPSIxMyI+TWVzc3JzLCBEb20sIFBhZ2V5LCBUcmViLCBQYXQgYW5kIEtsZXBhcyBhcmUgcHJvdWQgdG8gcHJlc2VudCB0aGUgR09MRCBkZXNpZ24gc3lzdGVtLiAtIE1pc2NoaWVmIG1hbmFnZWQ8L3RleHQ+PC9zdmc+");
+        color: #bada55;
+    }
+
+    /**
+	 * `small`: for less important information (not stylistic purposes).
+	 */
+    small {
+        @include QLD-fontgrid(xs, small);
+    }
+
+    /**
+	 * `s`: represents contents no longer accurate/relevant.
+	 * del` & `ins`: editorial markup.
+	 */
+    s,
+    del {
+        text-decoration: line-through;
+    }
+
+    ins {
+        text-decoration-line: underline;
+        text-decoration-style: dashed; //Waiting on Chrome.
+        text-decoration-skip-ink: auto;
+    }
+
+    /**
+	 * Defining definition of a term.
+	 *
+	 * The paragraph, description list group, or section that is the nearest
+	 * ancestor of the `dfn` element must also contain the definition(s) for the term
+	 * given by the `dfn` element.
+	 *
+	 * Note: `abbr` can be nested inside `dfn`.
+	 */
+    dfn {
+        font-style: normal;
+    }
+
+    /**
+	 * Abbreviations/acronyms.
+	 */
+    abbr,
+    abbr[title] {
+        border-bottom: none;
+        text-decoration: underline;
+        text-decoration: underline dotted;
+    }
+
+    abbr[title] {
+        cursor: help;
+    }
+
+    a abbr {
+        padding-bottom: 1px;
+    }
+
+    /**
+	 * Variables, eg. as used in mathematical expressions.
+	 *
+	 * We also provide semantic support for nested vars, and things like indices.
+	 */
+    var {
+        padding: 0 1px;
+        font-style: italic;
+        font-family: serif; //We want mathematical notation to use serif vars per convention.
+        
+        sup,
+        sub {
+            font-family: $QLD-font;
+            font-style: normal;
+            padding: 0 1px;
+        }
+    }
+
+    /**
+	 * Prevent `sub` and `sup` elements from affecting the line height in
+	 * all browsers.
+	 * https://github.com/necolas/normalize.css/blob/master/normalize.css#L174
+	 */
+    sub,
+    sup {
+        @include QLD-fontgrid(xs, nospace);
+        position: relative;
+        vertical-align: baseline;
+    }
+    
+    sub {
+        bottom: -0.25em;
+    }
+    
+    sup {
+        top: -0.5em;
+    }
+    
+    /**
+	 * Keyboard strokes.
+	 * Code snippets and code blocks.
+	 */
+    kbd,
+    samp {
+        @include QLD-fontgrid(xs);
+        @include QLD-space(line-height, 1.25unit);
+        @include QLD-space(padding, 0.125unit 0.25unit);
+        @include QLD-space(margin, 0unit 0.125unit);
+        font-family: $QLD-font-monospace;
+        display: inline-block;
+        border-radius: $QLD-border-radius-xs;
+        background-color: var(--QLD-color-light-background__shade);
+        color: var(--QLD-color-light-text);
+    }
+
+    code {
+        background-color: var(--QLD-color-dark-alt-background__shade);
+        color: var(--QLD-color-dark-text);
+        display: block;
+        font-family: $QLD-font-monospace;
+        white-space: pre-wrap;
+        @include QLD-space('font-size', .875unit);
+        @include QLD-space('padding', .125unit .5unit);
+        @include QLD-space('margin', 0);
+
+        .token {
+            pointer-events: none;
+
+            &.comment {
+                color: #B3CBDE;
+            }
+    
+            &.tag {
+                color: #A7E5FF;
+            }
+    
+            &.attr-name {
+                color: #C78DF7;
+            }
+    
+            &.attr-value {
+                color: #6BBE26;
+            }
+        }
+    }
+
+    pre {
+        font-family: $QLD-font-monospace;
+    }
+
+    pre code {
+        @include QLD-space(padding, 1unit);
+        display: block;
+        tab-size: 4;
+    }
+    
+    /**
+	 * Blockquote
+	 */
+    blockquote {
+
+        .qld__quote-text {
+            // @extend .qld__display-lg;
+            font-weight: 700;
+            color: var(--QLD-color-light-heading);
+        }
+
+        .qld__quote-source {
+            font-size: pxToRem(20);
+            color: var(--QLD-color-light-text__muted);
+            margin-top: 10px;
+        }
+    }
+
+    /**
+	 * Horizontal rule, used for paragraph-level thematic breaks.
+	 */
+    hr {
+        box-sizing: content-box;
+        @include QLD-space(height, 0.063unit);
+        overflow: visible;
+        border: none;
+        background-color: var(--QLD-color-light-border);
+        @include QLD-space(margin-top, 1.25unit);
+        @include QLD-space(margin-bottom, 1.188unit);
+        width: 100%;
+
+    }
+
+    &.qld__body--alt {
+        background: var(--QLD-color-light-alt-background);
+
+        hr {
+            background-color: var(--QLD-color-light-alt-border);
+        }
+        
+        code,
+        kbd,
+        samp {
+            background-color: var(--QLD-color-light-alt-background__shade);
+        }
+    }
+    
+    &.qld__body--dark {
+        background: var(--QLD-color-dark-background);
+        color: var(--QLD-color-dark-text);
+        
+        ::selection {
+            color: var(--QLD-color-dark-background);
+            background-color: var(--QLD-color-dark-link);
+            // Why RGBA 0.99? https://stackoverflow.com/a/7224621
+        }
+        
+        // Decrease the opacity for certain elements
+        img::selection,
+        video::selection,
+        iframe::selection {
+            background-color: var(--QLD-color-dark-link);
+        }
+        
+        a{
+            color: var(--QLD-color-dark-text);
+            
+            &:hover {
+                color: var(--QLD-color-dark-text);
+            }
+
+            @include QLD-focus("dark");
+        }
+        
+        [tabindex="0"]:focus{
+            @include QLD-outline("dark");
+        }
+        
+        mark {
+            background-color: var(--QLD-color-dark-link);
+            color: var(--QLD-color-dark-background);
+        }
+        
+        hr {
+            background-color: var(--QLD-color-dark-border);
+        }
+        
+        code,
+        kbd,
+        samp {
+            color: var(--QLD-color-dark-text);
+            background-color: var(--QLD-color-dark-background__shade);
+        }
+    }
+    
+    &.qld__body--dark-alt {
+        background: var(--QLD-color-dark-alt-background);
+        color: var(--QLD-color-dark-text);
+        
+        ::selection {
+            color: var(--QLD-color-dark-background);
+            background-color: var(--QLD-color-dark-link);
+            // Why RGBA 0.99? https://stackoverflow.com/a/7224621
+        }
+        
+        // Decrease the opacity for certain elements
+        img::selection,
+        video::selection,
+        iframe::selection {
+            background-color: var(--QLD-color-dark-link);
+        }
+        
+        a {
+            color: var(--QLD-color-dark-text);
+            
+            &:hover {
+                color: var(--QLD-color-dark-text);
+            }
+
+            @include QLD-focus("dark");
+        }
+
+        [tabindex="0"]:focus{
+            @include QLD-outline("dark");
+        }
+
+        mark {
+            background-color: var(--QLD-color-dark-link);
+            color: var(--QLD-color-dark-alt-background);
+        }
+
+        hr {
+            background-color: var(--QLD-color-dark-border);
+        }
+
+        code,
+        kbd,
+        samp {
+            color: var(--QLD-color-dark-text);
+            background-color: var(--QLD-color-dark-alt-background__shade);
+        }
+    }
+
+    &.qld__body--half-width {
+        .container-fluid{
+            div{
+                width: 50%;
+            }
+        }
+    }
+}
+
+// .qld__body{
+//     p{
+//         @include QLD-space(font-size, 1.063unit);
+//     }
+// }
+
+
+@media print {
+	.qld__body {
+        *,
+        & {
+            text-shadow: none !important;
+            color: #000 !important;
+            background-color: transparent !important;
+            box-shadow: none !important;
+            border-color: #000 !important;
+        }
+
+        a,
+        a:visited {
+            text-decoration: underline;
+        }
+
+        // Add the URL after the link on print
+        a[href]:after {
+            content: " (" attr(href) ")" !important;
+            display: inline !important;
+        }
+
+        // Do not add the URL if it's a javascript or anchor
+        a[href^="javascript:"]:after,
+        a[href^="#"]:after {
+            content: "" !important;
+        }
+
+        // Add the abbreviation expanded on print
+        abbr[title]:after {
+            content: " (" attr(title) ")";
+        }
+
+        pre,
+        blockquote {
+            border: 1px solid #000;
+            padding: 6px;
+            page-break-inside: avoid;
+        }
+
+        thead {
+            display: table-header-group;
+        }
+
+        tr,
+        img {
+            page-break-inside: avoid;
+        }
+
+        img {
+            max-width: 100% !important;
+        }
+
+        p,
+        h2,
+        h3 {
+            orphans: 3;
+            widows: 3;
+        }
+
+        h2,
+        h3 {
+            page-break-after: avoid;
+        }
+
+        p a {
+            word-wrap: break-word;
+        }
+
+        select {
+            background: #fff !important;
+        }
+	}
+}
+
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+// Body module
+//
+//
+// Content:
+// - print styles
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+
+@media print {
+	.qld__body {
+        *,
+        & {
+            text-shadow: none !important;
+            color: #000 !important;
+            background-color: transparent !important;
+            box-shadow: none !important;
+            border-color: #000 !important;
+        }
+
+        a,
+        a:visited {
+            text-decoration: underline;
+        }
+
+        // Add the URL after the link on print
+        a[href]:after {
+            content: " (" attr(href) ")" !important;
+            display: inline !important;
+        }
+
+        // Do not add the URL if it's a javascript or anchor
+        a[href^="javascript:"]:after,
+        a[href^="#"]:after {
+            content: "" !important;
+        }
+
+        // Add the abbreviation expanded on print
+        abbr[title]:after {
+            content: " (" attr(title) ")";
+        }
+
+        pre,
+        blockquote {
+            border: 1px solid #000;
+            padding: 6px;
+            page-break-inside: avoid;
+        }
+
+        thead {
+            display: table-header-group;
+        }
+
+        tr,
+        img {
+            page-break-inside: avoid;
+        }
+
+        img {
+            max-width: 100% !important;
+        }
+
+        p,
+        h2,
+        h3 {
+            orphans: 3;
+            widows: 3;
+        }
+
+        h2,
+        h3 {
+            page-break-after: avoid;
+        }
+
+        p a {
+            word-wrap: break-word;
+        }
+
+        select {
+            background: #fff !important;
+        }
+	}
+}