diff --git a/src/App.vue b/src/App.vue index 75e80355f..aef77fcb0 100644 --- a/src/App.vue +++ b/src/App.vue @@ -23,4 +23,5 @@ export default { @import "@/styles/common-typography-styles.scss"; @import "@/styles/common-error-styles.scss"; @import "@/styles/common-animations.scss"; +@import "@/styles/shared-input-button-styles.scss"; diff --git a/src/router/index.js b/src/router/index.js index 6350edf5d..02e0def4c 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -289,6 +289,11 @@ function navigateToUrl(url, optionalQuery = {}) { externalUrl.searchParams.append(queryKey, optionalQuery[queryKey]); } + externalUrl.searchParams.append( + "experiments", + "ConceptFunnel=ConceptFunnel_V1=ConceptFunnel_TEST=true" + ); + window.location.assign(externalUrl); } diff --git a/src/styles/common-error-styles.scss b/src/styles/common-error-styles.scss index d497ae6ce..9befb1eb0 100644 --- a/src/styles/common-error-styles.scss +++ b/src/styles/common-error-styles.scss @@ -37,11 +37,14 @@ html { } &.list-button-horizontal { color: $red; - label { - border: 1px solid $red; - &:hover { - box-shadow: 0px 0px 0px 4px $red-200; - } + // label { + // border: 1px solid $red; + // &:hover { + // @include box-shadow-lg-hover($red-200); + // } + // } + &:hover { + @include box-shadow-lg-hover($red-200); } input[type="checkbox"]:focus + label, input[type="radio"]:focus + label { diff --git a/src/styles/mixins/customMixins.scss b/src/styles/mixins/customMixins.scss index 8620968f0..e9954b2a2 100644 --- a/src/styles/mixins/customMixins.scss +++ b/src/styles/mixins/customMixins.scss @@ -4,3 +4,7 @@ @mixin blue-gradient { background: linear-gradient(270deg, $blue 0%, $blue-800 100%); } + +@mixin box-shadow-lg-hover($color) { + box-shadow: 0 0 0 4px $color; +} diff --git a/src/styles/shared-input-button-styles.scss b/src/styles/shared-input-button-styles.scss new file mode 100644 index 000000000..e64faee71 --- /dev/null +++ b/src/styles/shared-input-button-styles.scss @@ -0,0 +1,7 @@ +.base-input-button { + &:hover { + cursor: pointer; + @include box-shadow-lg-hover($blue-300); + border: 1px solid transparent; + } +} diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue index 1b4232c4c..4537ce5bb 100644 --- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue +++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue @@ -2,7 +2,7 @@ @@ -86,18 +86,6 @@ export default { width: 100%; color: $gray-600; - &:hover { - @include media-breakpoint-up(sm) { - box-shadow: 0 0 0 4px $blue-300; - cursor: pointer; - z-index: 4 !important; - } - } - - + p { - display: none; - } - span { font-size: 0.875rem; } diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue index 4f7d34ae9..031805509 100644 --- a/src/ux-components/list-button/list-button.vue +++ b/src/ux-components/list-button/list-button.vue @@ -1,7 +1,7 @@