@qhealth-design-system/core 1.16.5 → 1.17.0

package/src/components/card_single_action/css/component.scss

@@ -10,27 +10,26 @@
         outline: 3px solid var(--QLD-color-light__focus);
         outline-offset: 2px;
     }
-        
-    &:hover{
+
+    &:hover {
         box-shadow: none;
     }
 
     @include QLD-media(lg) {
         box-shadow: none;
 
-        &:hover{
+        &:hover {
             @include QLD-box-shadow(4);
         }
     }
-    
-    //Card image 
-    &.qld__card--image{
 
-        &:hover{
-            .qld__responsive-media-img--bg::before{
-                content: '';
+    //Card image
+    &.qld__card--image {
+        &:hover {
+            .qld__responsive-media-img--bg::before {
+                content: "";
                 background-color: var(--QLD-color-dark__background);
-                opacity: .1;
+                opacity: 0.1;
                 position: absolute;
                 left: 0;
                 right: 0;
@@ -41,87 +40,79 @@
                 border-bottom-right-radius: 6.0882800608828% 10.81081081081081%;
                 border-bottom-left-radius: 0px;
             }
-        } 
+        }
     }
 
     //Card Icon
     &.qld__card--icon {
-        .qld__card__icon{
+        .qld__card__icon {
             i,
-            svg{
+            svg {
                 color: var(--QLD-color-light__action--secondary);
             }
-        }  
-        &:hover{
-            .qld__card__icon{
+        }
+        &:hover {
+            .qld__card__icon {
                 i,
-                svg{
+                svg {
                     color: var(--QLD-color-light__action--secondary-hover);
                 }
-            }    
+            }
         }
     }
 
     &.qld__card--dark,
-    &.qld__card--dark-alt{
-
+    &.qld__card--dark-alt {
         &.qld__card--icon {
-            .qld__card__icon{
+            .qld__card__icon {
                 i,
-                svg{
+                svg {
                     color: var(--QLD-color-dark__action--secondary);
                 }
-            } 
-            &:hover{
-                .qld__card__icon{
+            }
+            &:hover {
+                .qld__card__icon {
                     i,
-                    svg{
+                    svg {
                         color: var(--QLD-color-dark__action--secondary-hover);
                     }
-                }    
+                }
             }
         }
     }
- 
 }
 
 .qld__card.qld__card--arrow {
-    .qld__card__content{
+    .qld__card__content {
         display: flex;
         justify-content: space-between;
 
-        .qld__card__arrow{
-            @include QLD-space(width, 1.375unit);
-            @include QLD-space(height, 1.5unit);
+        .qld__card--arrow-icon {
             flex: 0 0 auto;
             transition: margin 0.2s ease;
             color: var(--QLD-color-light__action--secondary);
             display: inline-block;
-            mask-image: QLD-svguri($QLD-icon-arrow-right);
-            mask-repeat: no-repeat;
-            mask-position: center;
-            background-color: var(--QLD-color-light__action--secondary);
             @include QLD-space(margin, auto 0 auto 1unit);
         }
 
-        &:hover{
-            .qld__card__arrow{
-                background-color: var(--QLD-color-light__action--secondary-hover);
-                @include QLD-space(margin-right, -.25unit);
+        &:hover {
+            .qld__card--arrow-icon {
+                color: var(--QLD-color-light__action--secondary-hover);
+                @include QLD-space(margin-right, -0.25unit);
                 @include QLD-space(margin-left, 1.25unit);
             }
         }
     }
 
     &.qld__card--dark,
-    &.qld__card--dark-alt{
-        .qld__card__arrow{
-            background-color: var(--QLD-color-dark__action--secondary);
+    &.qld__card--dark-alt {
+        .qld__card--arrow-icon {
+            color: var(--QLD-color-dark__action--secondary);
         }
-        &:hover{
-            .qld__card__arrow{
-                background-color: var(--QLD-color-dark__action--secondary-hover);
+        &:hover {
+            .qld__card--arrow-icon {
+                color: var(--QLD-color-dark__action--secondary-hover);
             }
         }
     }
-}
+}

package/src/components/card_single_action/html/component.hbs

@@ -125,7 +125,7 @@
                                         {{/if}}
                                     </div>
                                     {{#ifCond ../component.data.metadata.show_arrow.value '==' 'true'}}
-                                    <div class="qld__card__arrow"></div>
+                                        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" class="qld__card--arrow-icon qld__icon qld__icon--md"><use href="{{@root.site.metadata.coreSiteIcons.value}}#arrow-right"></use></svg>
                                     {{/ifCond}}
                                 </div>
                                 {{#ifCond metadata.cardDisplayFooter.value '==' 'true'}}

package/src/components/code/css/component.scss

@@ -1,6 +1,7 @@
 //--------------------------------------------------------------------------------------------------------------------------------------------------------------
-// {{component_name}}
+// Code component
 //--------------------------------------------------------------------------------------------------------------------------------------------------------------
+
 .qld__body .qld__code {
     display: block;
 
@@ -9,12 +10,10 @@
         min-width: initial;
         position: relative;
         text-decoration: none;
-        
 
         &-text {
-            @include QLD-space('margin-left', .5unit);
-            
-            
+            @include QLD-space("margin-left", 0.5unit);
+
             @include QLD-media(sm, down) {
                 display: none;
             }
@@ -22,19 +21,10 @@
 
         .clean {
             display: flex;
-
-            i {
-                @include QLD-space('font-size', 1.25unit);
-                @include QLD-space('margin', 0.125unit);
-            }
         }
 
         .dirty {
             display: none;
-
-            i {
-                @include QLD-space('font-size', 1.5unit);   
-            }
         }
 
         &.copied {
@@ -42,10 +32,6 @@
             border-color: $QLD-color-neutral--lightest;
             color: var(--QLD-color-light__text);
 
-            i {
-                color: $QLD-color-status__success;
-            }
-
             .clean {
                 display: none;
             }
@@ -61,10 +47,9 @@
             text-decoration: none;
 
             .qld__code-copy--button-text {
-                @include QLD-underline('dark','noUnderline','buttonText');
+                @include QLD-underline("dark", "noUnderline", "buttonText");
             }
 
-            
             @include QLD-media(sm, down) {
                 text-decoration: underline;
                 .qld__code-tooltip {
@@ -81,22 +66,26 @@
         display: flex;
         width: 100%;
         justify-content: space-between;
-        @include QLD-space('padding', .75unit 1unit);
-        @include QLD-space('border-bottom', solid var(--QLD-color-dark__border--alt) 0.0625unit);
+        @include QLD-space("padding", 0.75unit 1unit);
+        @include QLD-space("border-bottom", solid var(--QLD-color-dark__border--alt) 0.0625unit);
 
         &-left {
             display: flex;
             align-items: center;
 
             a {
-                display: inline-block;
+                display: inline-flex;
                 border-radius: $QLD-border-radius-xs;
-                @include QLD-space('margin-left', 1.25unit);
+                @include QLD-space("margin-left", 1.25unit);
+                text-decoration: none;
 
-                i {
+                span {
+                    text-decoration: underline;
+                }
+
+                .qld__icon {
                     color: var(--QLD-color-dark__action--secondary);
-                    @include QLD-space('font-size', 1.25unit);
-                    @include QLD-space('margin-left', .5unit);
+                    @include QLD-space("margin-left", 0.5unit);
                 }
 
                 text-underline-offset: var(--QLD-underline__offset);
@@ -106,9 +95,21 @@
                 text-decoration-thickness: var(--QLD-underline__thickness-thin);
 
                 &:hover {
+                    span {
+                        text-underline-offset: var(--QLD-underline__offset);
+                        -webkit-text-decoration-color: var(--QLD-color-dark__underline--hover);
+                        text-decoration-color: var(--QLD-color-dark__underline--hover);
+                        text-decoration-thickness: var(--QLD-underline__thickness-thick);
+                    }
+                }
+            }
+        }
+
+        &-right {
+            button.qld__code-copy--button:hover {
+                span {
+                    text-decoration: underline;
                     text-underline-offset: var(--QLD-underline__offset);
-                    -webkit-text-decoration-color: var(--QLD-color-dark__underline--hover);
-                    text-decoration-color: var(--QLD-color-dark__underline--hover);
                     text-decoration-thickness: var(--QLD-underline__thickness-thick);
                 }
             }
@@ -133,23 +134,24 @@
         &.qld__body--dark {
             background-color: var(--QLD-color-dark__background);
         }
-        
+
         &.qld__body--dark-alt {
             background-color: var(--QLD-color-dark__background--alt);
         }
 
         &-button {
+            display: flex;
+            flex-direction: row;
             background-color: var(--QLD-color-dark__background--alt-shade);
             border: 0;
             border-radius: $QLD-border-radius-xs $QLD-border-radius-xs 0 0;
             color: var(--QLD-color-dark__text);
             cursor: pointer;
-            @include QLD-space('padding', .75unit 1unit);
+            @include QLD-space("padding", 0.75unit 1unit);
 
-            i {
+            .qld__icon {
                 color: var(--QLD-color-dark__action--secondary);
-                @include QLD-space('font-size', 1.25unit);
-                @include QLD-space('margin-left', .5unit);
+                @include QLD-space("margin-left", 0.5unit);
                 transition: transform 0.25s ease-in;
             }
 
@@ -183,7 +185,7 @@
             margin: 0;
 
             @include QLD-media(md) {
-                @include QLD-container-padding($QLD-grid__gutter--media-lg, horizontal); 
+                @include QLD-container-padding($QLD-grid__gutter--media-lg, horizontal);
             }
         }
 
@@ -193,16 +195,16 @@
             border-radius: 0 $QLD-border-radius-xs 0 0;
             color: var(--QLD-color-light__text);
             width: 100%;
-            @include QLD-space('padding', 1.0625unit 0.875unit);
+            @include QLD-space("padding", 1.0625unit 0.875unit);
 
             @include QLD-media(md) {
                 display: flex;
-                @include QLD-space('padding', 1.0625unit 1unit);
+                @include QLD-space("padding", 1.0625unit 1unit);
             }
 
             &-label {
                 font-weight: 600;
-                @include QLD-space('padding-right', 0.75unit);
+                @include QLD-space("padding-right", 0.75unit);
             }
 
             ul {
@@ -210,22 +212,22 @@
                 flex-wrap: wrap;
                 list-style: none;
                 padding-left: 0;
-                @include QLD-space('margin-top', 0.625unit);
+                @include QLD-space("margin-top", 0.625unit);
 
                 @include QLD-media(md) {
-                    @include QLD-space('margin-top', 0);
+                    @include QLD-space("margin-top", 0);
                 }
 
                 li {
                     display: flex;
                     align-items: center;
-                    @include QLD-space('margin', 0.1875unit 1unit 0.1875unit 0);
+                    @include QLD-space("margin", 0.1875unit 1unit 0.1875unit 0);
 
                     label {
                         color: var(--QLD-color-light__text);
                         font-weight: 400;
-                        @include QLD-space('margin', 0);
-                        @include QLD-space('padding-left', 2.5unit);
+                        @include QLD-space("margin", 0);
+                        @include QLD-space("padding-left", 2.5unit);
                     }
                 }
             }
@@ -239,12 +241,10 @@
             font-weight: 600;
             display: inline-block;
             position: absolute;
-            @include QLD-space('font-size', 0.875unit);
-            @include QLD-space('line-height', 1unit);
-            @include QLD-space('padding', 0.25unit 1unit);
+            @include QLD-space("font-size", 0.875unit);
+            @include QLD-space("line-height", 1unit);
+            @include QLD-space("padding", 0.25unit 1unit);
         }
-
-
     }
 
     // Single line type
@@ -260,7 +260,7 @@
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
-            @include QLD-space('padding', .625unit 1unit);
+            @include QLD-space("padding", 0.625unit 1unit);
         }
 
         .qld__code-copy--button {
@@ -273,20 +273,21 @@
         display: flex;
         flex-direction: column;
         width: 100%;
-        
-        @include QLD-space('max-width', 65unit);
+
+        @include QLD-space("max-width", 65unit);
 
         &.with-preview {
             display: inline-grid;
             background-color: $QLD-color-neutral--white;
             border-radius: $QLD-border-radius-xs;
             @include QLD-box-shadow(2);
-            @include QLD-space('margin-top', 1.5unit);
+            @include QLD-space("margin-top", 1.5unit);
         }
 
         &:not(.with-preview) {
             .qld__code-toggle-button,
-            .qld__code-header, code {
+            .qld__code-header,
+            code {
                 @include QLD-box-shadow(2);
             }
         }
@@ -296,8 +297,7 @@
             overflow: hidden;
             position: relative;
             transition: max-height 0.5s ease-in-out;
-            @include QLD-space('padding', 1.25unit 1unit);
-            
+            @include QLD-space("padding", 1.25unit 1unit);
         }
 
         &:not(.show_less) {
@@ -309,7 +309,6 @@
 
         &.show_less {
             code {
-
                 &:before {
                     background: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(2, 42, 80, 0.2) 86.21%);
                     bottom: 0;
@@ -317,11 +316,11 @@
                     left: 0;
                     position: absolute;
                     width: 100%;
-                    @include QLD-space('height', 3.75unit);
+                    @include QLD-space("height", 3.75unit);
                 }
             }
 
-            .qld__code-toggle-button i {
+            .qld__code-toggle-button .qld__icon {
                 transform: rotate(-180deg);
             }
         }
@@ -340,22 +339,22 @@
         text-align: left;
         background-color: $QLD-color-neutral--lightest;
         color: var(--QLD-color-light__text);
-        @include QLD-space('padding', .125unit .5unit);
+        @include QLD-space("padding", 0.125unit 0.5unit);
 
         .token.attr-value {
-            color: #052C53;
+            color: #052c53;
         }
-        
+
         .token.punctuation {
             color: var(--QLD-color-light__text--lighter);
         }
-        
+
         .token.attr-name {
             color: #006400;
         }
-        
+
         .token.tag {
-            color: #09549F;
+            color: #09549f;
         }
 
         &:focus,
@@ -369,22 +368,22 @@
             .token.attr-value {
                 color: var(--QLD-color-light__link--on-action);
             }
-            
+
             .token.punctuation {
                 color: var(--QLD-color-light__link--on-action);
             }
-            
+
             .token.attr-name {
                 color: var(--QLD-color-light__link--on-action);
             }
-            
+
             .token.tag {
                 color: var(--QLD-color-light__link--on-action);
             }
         }
 
         &:focus {
-            @include QLD-space('border', solid var(--QLD-color-light__focus) 0.125unit);
+            @include QLD-space("border", solid var(--QLD-color-light__focus) 0.125unit);
         }
     }
 }
@@ -398,7 +397,7 @@
     left: 50%;
     transform: translateX(-50%);
     z-index: 2;
-    @include QLD-space('padding', .25unit 1.5unit);
+    @include QLD-space("padding", 0.25unit 1.5unit);
     @include QLD-box-shadow(3);
 
     &:before {
@@ -416,13 +415,13 @@
 }
 
 main .qld__body #content .qld__code .qld__code-preview-body.qld__body {
-    @include QLD-space('margin', 0);
-    @include QLD-space('padding-bottom', 1.5unit);
+    @include QLD-space("margin", 0);
+    @include QLD-space("padding-bottom", 1.5unit);
 
     &.qld__body--light,
     &.qld__body--alt,
     &.qld__body--dark,
     &.qld__body--dark-alt {
-        @include QLD-space('padding-bottom', 1.5unit);
+        @include QLD-space("padding-bottom", 1.5unit);
     }
-}
+}