@qhealth-design-system/core 1.0.38

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

@@ -0,0 +1,196 @@
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+// Direction Links
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+.qld__direction-link,
+a.qld__direction-link{
+
+	&--left{
+		&:before {
+			@include QLD-space( width, 1unit );
+			@include QLD-space( height, 1.5unit );
+			@include QLD-space( margin, 0 0.5unit 0 0.25unit );
+			content: '';
+			color: var(--QLD-color-light-alt-button);
+			text-decoration: none;
+			display: inline-block;
+			// background-repeat: no-repeat;
+			// background-size: contain;
+			// background-position: center;
+			vertical-align: text-top;
+			// background-image: QLD-svg-with-fill($QLD-icon-arrow-left, var(--QLD-color-light-alt-button));
+			mask-image: QLD-svguri($QLD-icon-arrow-left);
+			mask-repeat: no-repeat;
+			mask-position: center;
+			background-color: var(--QLD-color-light-alt-button);
+		}
+
+		&:disabled,
+		&[disabled] {
+			background-color: transparent;
+			border-color: transparent;
+			color: var(--QLD-color-light-text__muted);
+			text-decoration: none;
+
+			&::before{
+				// background-image: QLD-svg-with-fill($QLD-icon-arrow-left, var(--QLD-color-light-text__muted));
+				background-color: var(--QLD-color-light-text__muted);
+			}
+		}
+	}
+
+	&--right{
+		&:after {
+			@include QLD-space( width, 1unit );
+			@include QLD-space( height, 1.5unit );
+			@include QLD-space( margin, 0 0.25unit 0 0.5unit );
+			content: '';
+			color: var(--QLD-color-light-alt-button);
+			text-decoration: none;
+			display: inline-block;
+			// background-repeat: no-repeat;
+			// background-size: contain;
+			// background-position: center;
+			vertical-align: text-top;
+			// background-image: QLD-svg-with-fill($QLD-icon-arrow-right, var(--QLD-color-light-alt-button));
+			mask-image: QLD-svguri($QLD-icon-arrow-right);
+			mask-repeat: no-repeat;
+			mask-position: center;
+			background-color: var(--QLD-color-light-alt-button);
+			
+		}
+
+		&:disabled,
+		&[disabled] {
+			background-color: transparent;
+			border-color: transparent;
+			color: var(--QLD-color-light-text__muted);
+			text-decoration: none;
+
+			&::after{
+				// background-image: QLD-svg-with-fill($QLD-icon-arrow-left, var(--QLD-color-light-text__muted));
+				background-color: var(--QLD-color-light-text__muted);
+			}
+		}
+	}
+
+	&--up{
+		&:after {
+			@include QLD-space( width, 1unit );
+			@include QLD-space( height, 1.5unit );
+			@include QLD-space( margin, 0 0.25unit 0 0.5unit );
+			content: '';
+			color: var(--QLD-color-light-alt-button);
+			text-decoration: none;
+			display: inline-block;
+			// background-repeat: no-repeat;
+			// background-size: contain;
+			// background-position: center;
+			vertical-align: text-top;
+			// background-image: QLD-svg-with-fill($QLD-icon-arrow-up, var(--QLD-color-light-alt-button));
+			mask-image: QLD-svguri($QLD-icon-arrow-up);
+			mask-repeat: no-repeat;
+			mask-position: center;
+			background-color: var(--QLD-color-light-alt-button);
+		}
+
+		&:disabled,
+		&[disabled] {
+			background-color: transparent;
+			border-color: transparent;
+			color: var(--QLD-color-light-text__muted);
+			text-decoration: none;
+
+			&::after{
+				// background-image: QLD-svg-with-fill($QLD-icon-arrow-left, var(--QLD-color-light-text__muted));
+				background-color: var(--QLD-color-light-text__muted);
+			}
+		}
+	}
+
+	&--down{
+		&:after {
+			@include QLD-space( width, 1unit );
+			@include QLD-space( height, 1.5unit );
+			@include QLD-space( margin, 0 0.25unit 0 0.5unit );
+			content: '';
+			color: var(--QLD-color-light-alt-button);
+ 			text-decoration: none;
+			display: inline-block;
+			// background-repeat: no-repeat;
+			// background-size: contain;
+			// background-position: center;
+			vertical-align: text-top;
+			// background-image: QLD-svg-with-fill($QLD-icon-arrow-down, var(--QLD-color-light-alt-button));
+			mask-image: QLD-svguri($QLD-icon-arrow-down);
+			mask-repeat: no-repeat;
+			mask-position: center;
+			background-color: var(--QLD-color-light-alt-button);
+		}
+
+		&:disabled,
+		&[disabled] {
+			background-color: transparent;
+			border-color: transparent;
+			color: var(--QLD-color-light-text__muted);
+			text-decoration: none;
+
+			&::after{
+				// background-image: QLD-svg-with-fill($QLD-icon-arrow-down, var(--QLD-color-light-text__muted));
+				background-color: var(--QLD-color-light-text__muted);
+			}
+		}
+	}
+
+	.qld__body--dark &,
+	.qld__body--dark-alt &{
+		&--left{
+			&:before {
+				// background-image: QLD-svg-with-fill($QLD-icon-arrow-left, var(--QLD-color-dark-alt-button));
+				background-color: var(--QLD-color-dark-alt-button);
+			}
+		}
+		&--right{
+			&:after {
+				// background-image: QLD-svg-with-fill($QLD-icon-arrow-right, var(--QLD-color-dark-alt-button));
+				background-color: var(--QLD-color-dark-alt-button);
+			}
+		}
+		&--up{
+			&:after {
+				// background-image: QLD-svg-with-fill($QLD-icon-arrow-up, var(--QLD-color-dark-alt-button));
+				background-color: var(--QLD-color-dark-alt-button);
+			}
+		}
+		&--down{
+			&:after {
+				// background-image: QLD-svg-with-fill($QLD-icon-arrow-down, var(--QLD-color-dark-alt-button));
+				background-color: var(--QLD-color-dark-alt-button);
+			}
+		}
+	}
+
+}
+
+// Print styles
+@media print {
+	.qld__direction-link {
+		color: #000 !important;
+	}
+
+	.qld__direction-link__arrow--right:after {
+		content: '→' !important;
+	}
+
+	.qld__direction-link__arrow--left:before {
+		content: '←' !important;
+	}
+
+	.qld__direction-link__arrow--up:after {
+		content: '↑' !important;
+	}
+
+	.qld__direction-link__arrow--down:after {
+		content: '↓' !important;
+	}
+}

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

@@ -0,0 +1,54 @@
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+// Example styles
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+.qld__body {
+    .qld__example {
+        @include QLD-space(margin-top, 2unit);    
+        
+        @include QLD-media(lg) {
+            @include QLD-space(margin-top, 0.1875unit);
+        }
+        
+        &__title {
+            background-color: var(--QLD-color-light-background__shade);
+            display: inline-block;
+            @include QLD-space(
+                border,
+                solid var(--QLD-color-light-border) 0.0625unit
+            );
+            @include QLD-space(padding, 0.375unit 0.5unit);
+            font-weight: normal;
+        }
+        
+        &__iframe,
+        &__inline {
+            display: block;
+            width: 100%;
+            @include QLD-space(
+                border,
+                solid 0.0625unit var(--QLD-color-light-alt-border)
+            );
+        }
+        
+        &__inline {
+            @include QLD-space(padding, 1unit);
+
+            .qld__body{
+                margin-left: 0 !important;
+                margin-right: 0 !important;
+            }
+        }
+        
+        &__html {
+            @include QLD-space(padding, 1unit 0);
+        }
+    }
+   
+    * + .qld__example {
+        @include QLD-space(margin-top, 2unit);
+        @include QLD-space(margin-bottom, 2unit);
+
+    }
+}
+

package/src/components/_global/css/forms/control_inputs/component.scss

@@ -0,0 +1,349 @@
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+// Control inputs - Checkbox or Radio
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+
+//Custom checkbox - hides the native checkbox
+input[type='checkbox'],
+.sq-form-field[type='checkbox'],
+.sq-form-question-tickbox-list input{
+	@extend .sr-only;
+
+	+ label {
+		cursor: pointer;
+		position: relative;
+		vertical-align: bottom;
+		@include QLD-space(line-height, 1.25unit);
+		@include QLD-space(padding-left, 2.5unit);
+		@include QLD-space(margin-bottom, 0.375unit);
+
+		@include QLD-media (lg) {
+			@include QLD-space(line-height, 2unit);
+			// @include QLD-space(padding-left, 3.25unit);
+		}
+
+		&:before,
+		&:after {
+			@include QLD-space(width, 1.25unit);
+			@include QLD-space(height, 1.25unit);
+			visibility: visible;
+			content: ' ';
+			display: block;
+			position: absolute;
+			box-sizing: border-box;
+			background-repeat: no-repeat;
+			z-index: 100;
+			@include QLD-space(left, 0unit);
+			border: $QLD-border-width-default solid transparent;
+			top: 0;
+
+			@include QLD-media (lg) {
+				@include QLD-space(width, 2unit);
+				@include QLD-space(height, 2unit);
+			}
+
+			.qld__control-input--small & {
+				@include QLD-space( width, 1.25unit );
+				@include QLD-space( height, 1.25unit );
+			}
+		}
+		&:before {
+			background-color: transparent;
+			border-color: var(--QLD-color-light-alt-border);
+			background-image: none !important;
+
+			
+		}
+
+		&:after {
+			z-index: 101;
+			
+
+		}
+	}
+	
+	.qld__control-input--small &{
+		+ label {
+			line-height: 20px;
+		}
+	}
+
+	// hover
+	&:hover {
+		+ label:before {
+			background-color: var(--QLD-color-light-alt-background__shade);
+		}
+	}
+
+	// normal checked
+	&:checked {
+		+ label:after {
+			@include QLD-getControlShape( 'checkbox', 'foreground', var(--QLD-color-light-text)  );
+			@include QLD-space(background-size, 1.25unit);
+			background-position: -2px -2px;
+
+			@include QLD-media (lg) {
+				@include QLD-space(background-size, 1.85unit);
+			}
+		}
+	}
+
+	// Focus
+	&:focus + label:before {
+		box-shadow: none;
+		@include QLD-outline();
+		outline-offset: 2px;
+	}
+
+	// disabled
+	&:disabled {
+		+ label:before {
+			background-color: transparent;
+		}
+
+		&:checked + label:after {
+			@include QLD-getControlShape( 'checkbox', 'foreground', var(--QLD-color-light-text__muted) );
+		}
+	}
+
+	&.qld__input--valid{
+		+ label:before {
+			@include QLD-space( box-shadow, 0 0 0 0.0625unit $QLD-color-success );
+			border-color: var(--QLD-color-light-text);
+
+			@include QLD-media (lg) {
+				box-shadow: 0 0 0 3px $QLD-color-success;
+			}
+		}
+	}
+
+	&.qld__input--error{
+		+ label:before {
+			@include QLD-space( box-shadow, 0 0 0 0.0625unit $QLD-color-error );
+			border-color: var(--QLD-color-light-text);
+
+			@include QLD-media (lg) {
+				box-shadow: 0 0 0 3px $QLD-color-error;
+			}
+		}
+	}
+
+	.qld__body--dark &,
+	.qld__body--dark-alt & {
+
+		+ label:before {
+			background-color: transparent;
+			border-color: var(--QLD-color-dark-heading);
+			background-image: none !important;
+		}
+
+		// hover
+		&:hover {
+			+ label:before {
+				background-color: var(--QLD-color-dark-background__shade);
+			}
+		}
+
+		// normal checked
+		&:checked {
+			+ label:after {
+				@include QLD-getControlShape( 'checkbox', 'foreground', var(--QLD-color-dark-heading)  );
+			}
+		}
+
+		// Focus
+		&:focus + label:before {
+			@include QLD-focus(dark);
+		}
+
+		// disabled
+		&:disabled {
+			+ label:before {
+				background-color: transparent;
+			}
+
+			&:checked + label:after {
+				@include QLD-getControlShape( 'checkbox', 'foreground', var(--QLD-color-light-text__muted) );
+			}
+		}
+
+		&.qld__input--valid{
+			+ label:before {
+				border-color: var(--QLD-color-dark-text);
+			}
+		}
+	
+		&.qld__input--error{
+			+ label:before {
+				border-color: var(--QLD-color-dark-text);
+			}
+		}
+	}
+}
+
+input[type='radio'],
+.sq-form-field[type='radio'],
+.sq-form-question-option-list input{
+	@extend .sr-only;
+
+	+ label {
+		font-weight: 400;
+		cursor: pointer;
+		position: relative;
+		@include QLD-space(line-height, 1.25unit);
+		@include QLD-space(padding-left, 2.5unit);
+		@include QLD-space(margin-bottom, 0.375unit);
+
+		@include QLD-media (lg) {
+			@include QLD-space(line-height, 2unit);
+			// @include QLD-space(padding-left, 3.25unit);
+		}
+
+		&:before,
+		&:after {
+			@include QLD-space(width, 1.25unit);
+			@include QLD-space(height, 1.25unit);
+			visibility: visible;
+			content: ' ';
+			display: block;
+			position: absolute;
+			box-sizing: border-box;
+			background-repeat: no-repeat;
+			z-index: 100;
+			@include QLD-space(left, 0unit);
+			border: $QLD-border-width-default solid transparent;
+			border-radius: 50%;
+			top: 0;
+
+			@include QLD-media (lg) {
+				@include QLD-space(width, 1.85unit);
+				@include QLD-space(height, 1.85unit);
+			}
+
+			.qld__control-input--small & {
+				@include QLD-space( width, 1.25unit );
+				@include QLD-space( height, 1.25unit );
+			}
+		}
+
+		&:before {
+			background-color: transparent;
+			border-color: var(--QLD-color-light-alt-border);
+			background-image: none !important;
+		}
+	
+		&:after {
+			z-index: 101;
+			@include QLD-media (lg) {
+				height: 29px;
+				width: 29px;
+			}
+		}
+	}
+
+	.qld__control-input--small &{
+		+ label {
+			line-height: 20px;
+			@include QLD-space( padding-left, 1.5unit );
+		}
+
+	}
+
+	// hover
+	&:hover {
+		+ label:before {
+			background-color: var(--QLD-color-light-alt-background__shade);
+		}
+	}
+
+	// normal checked
+	&:checked {
+		+ label:after {
+			@include QLD-getControlShape( 'radio', 'foreground', var(--QLD-color-light-text) );
+		}
+	}
+
+	// Focus
+	&:focus + label:before {
+		box-shadow: none;
+		@include QLD-outline();
+		outline-offset: 2px;
+	}
+
+	// disabled
+	&:disabled {
+		+ label:before {
+			background-color: transparent;
+		}
+
+		&:checked + label:after {
+			@include QLD-getControlShape( 'radio', 'foreground', var(--QLD-color-light-text__muted) );
+		}
+	}
+
+	&.qld__input--valid{
+		+ label:before {
+			@include QLD-space( box-shadow, 0 0 0 0.0625unit $QLD-color-success );
+		}
+	}
+
+	&.qld__input--error{
+		+ label:before {
+			@include QLD-space( box-shadow, 0 0 0 0.0625unit $QLD-color-error );
+		}
+	}
+
+	.qld__body--dark &,
+	.qld__body--dark-alt & {
+
+		+ label:before {
+			background-color: transparent;
+			border-color: var(--QLD-color-dark-heading);
+			background-image: none !important;
+		}
+
+		// hover
+		&:hover {
+			+ label:before {
+				background-color: var(--QLD-color-dark-background__shade);
+			}
+		}
+
+		// normal checked
+		&:checked {
+			+ label:after {
+				@include QLD-getControlShape( 'radio', 'foreground', var(--QLD-color-dark-heading) );
+			}
+		}
+
+		// Focus
+		&:focus{
+			+ label:before {
+				@include QLD-focus(dark);
+			}
+		}
+
+		// disabled
+		&:disabled {
+			+ label:before {
+				background-color: transparent;
+			}
+
+			&:checked + label:after {
+				@include QLD-getControlShape( 'radio', 'foreground', var(--QLD-color-light-text__muted) );
+			}
+		}
+	}
+}
+
+// Print styles
+@media print {
+	.qld__control-input__text {
+		color: #000 !important;
+
+		&:before,
+		&:after {
+			display: none !important;
+		}
+	}
+}