diff --git a/src/Funnel1.vue b/src/Funnel1.vue index bf4720119..297fda23c 100644 --- a/src/Funnel1.vue +++ b/src/Funnel1.vue @@ -38,6 +38,29 @@ ariaLabel="Back glass" /> +
+ + + +
diff --git a/src/assets/scss/_CustomVariables.scss b/src/assets/scss/_CustomVariables.scss index c7b586303..165e799e9 100644 --- a/src/assets/scss/_CustomVariables.scss +++ b/src/assets/scss/_CustomVariables.scss @@ -5,7 +5,7 @@ $white: #FFFFFF; $gray-100: #F4F4F4; $gray-200: #CACBCC; $gray-300: #B3B4B5; -$gray-400: #525656;//Default Gray (Gray 400) +$gray-400: #B0B3B3;//Default Gray (Gray 400) $black: #000; // scss-docs-end gray-color-variables @@ -21,6 +21,7 @@ $grays: ( // fusv-enable // scss-docs-start color-variables +$blue-100: #E4F1F7; $blue-200: #E7F1F6; $blue-300: #B9D7E6; $blue-400: #125B7E; diff --git a/src/assets/scss/components/_radio-card.scss b/src/assets/scss/components/_radio-card.scss new file mode 100644 index 000000000..8c59c9e68 --- /dev/null +++ b/src/assets/scss/components/_radio-card.scss @@ -0,0 +1,30 @@ +.radio-card { + input[type=radio] { + position: absolute; + opacity: 0; + &:focus + label { + box-shadow: 0px 0px 0px 4px $blue-600; + } + } + input[type="radio"]:checked + label { + background-color: $blue-100; + border: 1px solid $blue-600; + // &:focus { + // border: 2px solid $blue-600; + // } + } + label { + display: flex; + align-items: center; + flex-direction: column; + background: $white; + border: 1px solid $gray-400; + border-radius: 8px; + padding: 8px; + width: 100%; + &:hover { + cursor: pointer; + box-shadow: 0px 0px 0px 10px $blue-100; + } + } +} diff --git a/src/assets/scss/custom.scss b/src/assets/scss/custom.scss index d27b60a05..214b5b0ec 100644 --- a/src/assets/scss/custom.scss +++ b/src/assets/scss/custom.scss @@ -20,3 +20,4 @@ @import "./components/_navbar"; @import "./components/_buttons"; @import "./components/_vehicle-image"; +@import "./components/_radio-card"; diff --git a/src/components/forms/radioCard.vue b/src/components/forms/radioCard.vue new file mode 100644 index 000000000..c322dea82 --- /dev/null +++ b/src/components/forms/radioCard.vue @@ -0,0 +1,23 @@ + + + + +