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; }