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

Merge pull request #218 from Safelite/CSR-266-button-style-updates

Browse source 
CSR-266 refactor buttons per Rachel Figma update.
This commit is contained in:
bmauger 2022-02-16 08:11:24 -05:00 committed by GitHub
commit fb19cf9088
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 15 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,7 +1,7 @@
<template> <template>
<button <button
:aria-disabled="isDisabled" :aria-disabled="isDisabled"
class="btn d-flex align-items-center py-3 px-2" class="btn d-flex align-items-center py-3 px-2 delay"
:class="[isPrimary ? 'btn-primary' : 'btn-secondary',isFloat ? 'float-end' : '', isLoaderDisplayed ? 'has-loader' : '']" :class="[isPrimary ? 'btn-primary' : 'btn-secondary',isFloat ? 'float-end' : '', isLoaderDisplayed ? 'has-loader' : '']"
@click="clicked()" @click="clicked()"
> >
@ -51,12 +51,10 @@ export default {
.btn { .btn {
&.btn-primary { &.btn-primary {
position: relative; position: relative;
background: $blue-700; background: linear-gradient(270deg, $blue-500 0%, $blue-700 100%);
@include blue-gradient;
border: none; border: none;
border-radius: $border-radius-lg; border-radius: $border-radius-lg;
color: $white; color: $white;
transition: all 150ms linear;
justify-content: center; justify-content: center;
&:hover { &:hover {
background: linear-gradient( background: linear-gradient(
@ -71,7 +69,11 @@ export default {
outline: none; outline: none;
box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700; box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700;
color: $white; color: $white;
@include blue-gradient; background: linear-gradient(
270deg,
rgba(6, 87, 124, 1) 0%,
rgba(6, 87, 124, 1) 100%
);
} }
&:disabled { &:disabled {
background: $gray-100 !important; background: $gray-100 !important;
@ -89,6 +91,9 @@ export default {
color: $white; color: $white;
background: $blue-700; background: $blue-700;
} }
&.delay {// fixes flicker while transitioning between states
transition: background 0s 0s ease-in-out;
}
} }
&.btn-secondary { &.btn-secondary {
position: relative; position: relative;
@ -101,18 +106,13 @@ export default {
color: $white; color: $white;
@include blue-gradient; @include blue-gradient;
} }
&:active {
@include blue-gradient;
color: $white;
}
&:focus, // Mouse, touch, stylus focus &:focus, // Mouse, touch, stylus focus
&:focus-visible { &:focus-visible {
// Keyboard focus for accessibility // Keyboard focus for accessibility
outline: none; outline: none;
box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $blue-700; box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $blue-700;
color: $blue; color: $white;
//@include blue-gradient; @include blue-gradient;
background: $white;
} }
&:disabled { &:disabled {
background: transparent; background: transparent;
@ -125,6 +125,9 @@ export default {
color: $white; color: $white;
@include blue-gradient; @include blue-gradient;
} }
&.delay {// fixes flicker while transitioning between states
transition: background 0s 0s ease-in-out;
}
} }
} }
</style> </style>