+
+
-
-
-
+
+
+
+
+
+
+
-
-
-
-
- Select Vehicle Year
-
-
-
-
-
+
+
+
+
Select Vehicle Year
+
+
+
+
+
+
+
-
-
This is default body copy font size/weight
-
- This is small body copy using .small class
-
-
- This is also small using <small> tag
-
-
+
+
This is default body copy font size/weight
+
This is small body copy using .small class
+
This is also small using <small> tag
+
+
+
-
-
h1 Heading
-
+
+
h1 Heading
+
-
-
h2 Heading
-
+
+
h2 Heading
+
-
-
h3 Heading
-
+
+
h3 Heading
+
-
-
h4 Heading
-
+
+
h4 Heading
+
-
-
h5 Heading
-
+
+
h5 Heading
+
-
-
h6 Heading
-
+
+
h6 Heading
+
-
+
+
+
+
+
+
+
diff --git a/src/layouts/loader-demo/loader-demo.vue b/src/layouts/loader-demo/loader-demo.vue
new file mode 100644
index 000000000..4c19c4d21
--- /dev/null
+++ b/src/layouts/loader-demo/loader-demo.vue
@@ -0,0 +1,28 @@
+
+
+
+
+
diff --git a/src/router/index.js b/src/router/index.js
index 1042b093f..2b3d566a1 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -2,6 +2,7 @@ import { createWebHistory, createRouter } from "vue-router";
import { storeActions } from "@/constants/store-actions.js";
import { lazyLoadComponent } from "@/router/dynamic-routing/component-loader.js";
import ComponentTest from "@/layouts/component-test/component-test.vue";
+import LoaderDemo from "@/layouts/loader-demo/loader-demo.vue";
import NotFound from "@/layouts/not-found/not-found.vue";
import store from "@/store";
@@ -16,6 +17,11 @@ const routes = [
name: "ComponentTest",
component: ComponentTest,
},
+ {
+ path: "/loader-demo", // This is a temporary route for testing.
+ name: "LoaderDemo",
+ component: LoaderDemo,
+ },
{
path: "/",
beforeEnter(to, from, next) {
diff --git a/src/styles/common-radio-styles.scss b/src/styles/common-radio-styles.scss
index 953a75985..fccad8420 100644
--- a/src/styles/common-radio-styles.scss
+++ b/src/styles/common-radio-styles.scss
@@ -18,7 +18,7 @@
label {
position: relative;
background: $white;
- height: 3rem;
+ min-height: 3rem;
transition: all 150ms linear;
border-radius: $border-radius-lg;
border: 1px solid $gray-500;
@@ -37,23 +37,8 @@
color: $danger;
}
}
- &.button-loader {
- padding: 0 40px 0 12px;
- &:after {
- content: url(../../assets/img/icons/button-spinner-blue.svg);
- position: absolute;
- right: 14px;
- width: 16px;
- height: 16px;
- margin-left: 12px;
- animation: rotation 1s infinite linear;
- @keyframes rotation {
- 100% {
- transform:rotate(360deg);
- }
- }
- }
- }
+ //Add spinner. Specify width and height
+ @include loader();
}
}
}
diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss
index d47d79fa4..ab36e35c5 100644
--- a/src/styles/common-styles.scss
+++ b/src/styles/common-styles.scss
@@ -22,10 +22,3 @@ body {
cursor: pointer;
}
}
-
-//Custom Mixins
-
-//Blue gradient background mixin
-@mixin blue-gradient {
- background: linear-gradient(270deg, $blue-500 0%, $blue-700 100%);
-}
diff --git a/src/styles/mixins/customMixins.scss b/src/styles/mixins/customMixins.scss
new file mode 100644
index 000000000..ab4ba18a5
--- /dev/null
+++ b/src/styles/mixins/customMixins.scss
@@ -0,0 +1,69 @@
+//Custom Mixins
+
+//Blue gradient background mixin
+@mixin blue-gradient {
+ background: linear-gradient(270deg, $blue-500 0%, $blue-700 100%);
+}
+
+//Spinner
+//Choose color and position
+@mixin loader() {
+ .loader {
+ display: flex;
+ //Open an overlay to prevent page interaction
+ &:before {
+ content: '';
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background-color: transparent;
+ z-index: 9999;
+ cursor: default;
+ }
+ //Spinner basics
+ &:after {
+ content: '';
+ mask: url(../../assets/img/icons/spinner.svg);
+ mask-size: cover;
+ position: relative;
+ width: 100%;
+ height: 100%;
+ animation: rotation 1s infinite linear;
+ @keyframes rotation {
+ 100% {
+ transform:rotate(360deg);
+ }
+ }
+ }
+ //Spinner position
+ &.center {
+ left: 0;
+ right: 0;
+ margin: 0 auto;
+ }
+ &.right {
+ margin: 0 0 0 auto;
+ }
+ &.left {
+ margin: 0 auto 0 0;
+ }
+ //Spinner color
+ &:after { //Default spinner color (blue) if no other color is specified from the options below
+ background-color: $blue;
+ }
+ &.red:after {
+ background-color: $red;
+ }
+ &.green:after {
+ background-color: $green;
+ }
+ &.white:after {
+ background-color: $white;
+ }
+ &.black:after {
+ background-color: $black;
+ }
+ }
+}
diff --git a/src/ux-components/alert/alert.vue b/src/ux-components/alert/alert.vue
index b47d75f3c..811dcb133 100644
--- a/src/ux-components/alert/alert.vue
+++ b/src/ux-components/alert/alert.vue
@@ -51,6 +51,8 @@ export default {
}
svg {
fill: $blue-700;
+ width: 1rem;
+ height: 1rem;
}
}
&.alert-danger {
@@ -59,6 +61,8 @@ export default {
}
svg {
fill: $red-700;
+ width: 1rem;
+ height: 1rem;
}
}
&.alert-warning {
@@ -67,6 +71,8 @@ export default {
}
svg {
fill: $yellow-700;
+ width: 1rem;
+ height: 1rem;
}
}
&.alert-success {
@@ -75,6 +81,8 @@ export default {
}
svg {
fill: $green-700;
+ width: 1rem;
+ height: 1rem;
}
}
}
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 2580b0f83..5bad044b3 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -1,36 +1,48 @@
-
-
+ {{ this.buttonText }}
+
+
+
+