diff --git a/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue
index 1d5c2115..d78f2c4c 100644
--- a/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue
+++ b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue
@@ -8,7 +8,7 @@
v-for="(tint, index) in tintSelectionOptions"
:key="index">
-
{{ `${partType} - ${tint}` }}
+
{{ `${partType} - ${tint}` }}
{
const regEx = new RegExp(exception, 'ig');
@@ -176,7 +176,8 @@ export default {
display: flex;
flex-direction: row;
justify-content: space-between;
- height: 2rem;
+ position: relative;
+ min-height: 2rem;
margin-top: .5rem;
margin-bottom: .25rem;
font-weight: 600;
@@ -185,19 +186,48 @@ export default {
@include media-breakpoint-up(md) {
justify-content: flex-start;
}
+
+ .tint-option-text {
+ padding-right: 2.5rem;
+ }
}
.radioQuestion {
:deep(.list-button) {
margin-bottom: 1rem;
}
+
+ &:not(:last-child) {
+ :deep(.form-test-error) {
+ display: none;
+ }
+ }
+
+ &:last-child {
+ :deep(.form-test-error) {
+ position: absolute;
+ margin: -10px 0 10px 10px;
+ font-weight: 600;
+ > * {
+ padding: 0;
+ }
+ }
+ }
}
.tint-image {
width: 2rem;
height: 2rem;
- margin-left: 1rem;
- margin-top: -.25rem;
background-repeat: no-repeat;
background-image: url(~@/assets/img/tints/GlassTint.png);
+ position: absolute;
+ top: -.25rem;
+ right: 1rem;
+
+ @include media-breakpoint-up(md) {
+ position: relative;
+ top: -.25rem;
+ right: 1.5rem;
+ float: left;
+ }
}
.blue-tint-green-shade {
background-position: -53px -53px;
diff --git a/src/styles/common-validation-styles.scss b/src/styles/common-validation-styles.scss
index 31eead8b..6e274fe5 100644
--- a/src/styles/common-validation-styles.scss
+++ b/src/styles/common-validation-styles.scss
@@ -7,11 +7,6 @@ html {
&.list-button,
&.list-button.list-group,
&.list-card &.option-label {
- border: 1px solid $red;
- position: relative;
- z-index: 4;
- border-radius: 60px;
-
.button-content {
border: 1px solid $red;
}