jason/DigitalConsumer.ISS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

updates for continue button

Browse source
This commit is contained in:
Bill Richardson 2025-12-04 16:13:12 -05:00
parent ac6cf184b2
commit 825b197259
3 changed files with 43 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/iss-components/site-footer/site-footer.vue
View file

@ -125,14 +125,12 @@ export default {
justify-content: center;
}
.col,
.col-auto,
.col button {
.col-auto {
width: 100%;
}
@media only screen and (min-width: 340px) {
.col,
.col-auto,
.col button {
.col-auto {
width: auto;
justify-content: flex-end;
}

25
src/styles/common-error-styles.scss
View file

@ -202,23 +202,24 @@ html {
}
.form-test-invalid {
// Disable Gray coloring to match Heritage
&.btn.btn-primary {
color: $gray-600;
background: $gray-200;
//color: $gray-600;
//background: $gray-200;
cursor: pointer;
pointer-events: all;
font-weight: $font-weight-normal;
}
&.btn.btn-primary:hover,
&.btn.btn-primary:focus {
color: $gray-600;
background: $gray-200;
box-shadow: none;
}
//&.btn.btn-primary:hover,
//&.btn.btn-primary:focus {
//color: $gray-600;
//background: $gray-200;
//box-shadow: none;
//}
&.btn.btn-primary:focus-visible {
box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $gray-700;
}
//&.btn.btn-primary:focus-visible {
// box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $gray-700;
//}
}
}

49
src/ux-components/button-main/button-main.vue
View file

@ -56,42 +56,51 @@ export default {
</script>
<style lang="scss" scoped>
$border-radius-heritage: 1.40625rem; // 22.5px
$button-height-heritage: 2.8125rem; // 45px
$button-width-heritage: 9.0625rem; // 145px
.btn {
&.btn-primary {
position: relative;
background: linear-gradient(270deg, $blue 0%, $blue-800 100%);
background: #0c7e47;
padding-left: 2rem;
padding-right: 2rem;
min-height: $button-height-heritage;
min-width: $button-width-heritage;
border: none;
border-radius: $border-radius-lg;
border-radius: $border-radius-heritage;
color: $white;
justify-content: center;
font-weight: 500;
font-weight: 600;
letter-spacing: inherit;
@media (hover: hover) {
background: linear-gradient(270deg, $blue 0%, $blue-800 100%);
}
// Mouse, touch, stylus focus
&:focus-visible {
&:focus {
// Keyboard focus for accessibility
outline: none;
box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700;
color: $white;
background: linear-gradient(270deg, rgba(6, 87, 124, 1) 0%, rgba(6, 87, 124, 1) 100%);
box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px #0c7e47;
}
&:hover {
// Keyboard focus for accessibility
color: #fff;
background-color: #084f2d;
border-color: #042f1a;
}
&:active {
outline: none;
background-color: #0c7e47;
box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px #0c7e47;
}
&:disabled {
background: $gray-200 !important;
background: linear-gradient(270deg, $gray-200 0%, $gray-200 100%) !important;
background: red;
color: $gray-600 !important;
font-weight: 400;
height: 48px;
border: none;
border-radius: $border-radius-lg;
border-radius: $border-radius-heritage;
cursor: pointer;
pointer-events: all;
}
&.has-loader {
color: $white;
background: $blue-700;
}
&.delay {
// fixes flicker while transitioning between states
@ -102,11 +111,10 @@ export default {
position: relative;
background: transparent;
border: 1px solid $blue;
border-radius: $border-radius-lg;
border-radius: $border-radius-heritage;
color: $blue;
font-weight: 500;
transition: all 150ms linear;
height: 3rem;
&:hover {
color: $white;
@include blue-gradient;
@ -123,9 +131,8 @@ export default {
background: transparent;
color: $gray-550 !important;
font-weight: 400;
height: 48px;
border: 1px solid $gray-550;
border-radius: $border-radius-lg;
border-radius: $border-radius-heritage;
cursor: pointer;
pointer-events: all;
}