commit
This commit is contained in:
Kulbhushan Kaushik
parent
3077ad685c
commit
fc867ac32b
1 changed files with 47 additions and 122 deletions
|
|
@ -1,140 +1,65 @@
|
||||||
<template>
|
<template>
|
||||||
<button
|
<!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag -->
|
||||||
:aria-disabled="isDisabled"
|
<div class="form-check ui-checkbox" :class="[hasError ? 'has-error' : '']">
|
||||||
class="btn d-flex align-items-center py-3 px-4 delay"
|
<input
|
||||||
:class="[
|
class="form-check-input"
|
||||||
isPrimary ? 'btn-primary' : 'btn-secondary',
|
type="checkbox"
|
||||||
isFloat ? 'float-end' : '',
|
aria-checked="false"
|
||||||
isLoaderDisplayed ? 'has-loader' : '',
|
:name="checkboxName"
|
||||||
]"
|
:id="buttonID"
|
||||||
@click="clicked">
|
:tabindex="tabIndex"
|
||||||
<span class="m-0">{{ this.buttonText }}</span>
|
:aria-required="isRequired" />
|
||||||
<loader
|
<label class="d-flex align-items-start" :for="buttonID">
|
||||||
class="ms-2"
|
<p v-if="checkboxLabel" class="m-0">{{ checkboxLabel }}</p>
|
||||||
v-if="isLoaderDisplayed"
|
<span v-if="screenReaderOnlyText" class="sr-only">{{ screenReaderOnlyText }}</span>
|
||||||
v-bind:class="[this.loaderColor, this.loaderPosition]" />
|
</label>
|
||||||
</button>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import loader from "@/ux-components/loader/loader";
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "buttonMain",
|
name: "checkbox",
|
||||||
props: {
|
props: {
|
||||||
isPrimary: Boolean,
|
checkboxName: String,
|
||||||
buttonText: String,
|
buttonID: String,
|
||||||
isDisabled: Boolean,
|
tabIndex: Number,
|
||||||
loaderColor: String,
|
checkboxLabel: String,
|
||||||
loaderPosition: String,
|
screenReaderOnlyText: String,
|
||||||
isFloat: Boolean,
|
isRequired: Boolean,
|
||||||
},
|
hasError: Boolean,
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
isLoaderDisplayed: false,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
removeLoader() {
|
|
||||||
this.isLoaderDisplayed = false;
|
|
||||||
},
|
|
||||||
clicked() {
|
|
||||||
if (!this.isDisabled) {
|
|
||||||
this.isLoaderDisplayed = true;
|
|
||||||
this.$emit("click-event");
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
loader,
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss" scoped>
|
||||||
.btn {
|
.form-check {
|
||||||
&.btn-primary {
|
.form-check-input {
|
||||||
position: relative;
|
border: 1px solid $gray-500;
|
||||||
background: linear-gradient(270deg, $blue 0%, $blue-800 100%);
|
border-radius: 2px;
|
||||||
border: none;
|
&:checked {
|
||||||
border-radius: $border-radius-lg;
|
background-size: 125%;
|
||||||
color: $white;
|
border: 1px solid $blue;
|
||||||
justify-content: center;
|
+ label {
|
||||||
font-weight: 500;
|
p {
|
||||||
@media (hover: hover) {
|
font-weight: 500;
|
||||||
background: linear-gradient(270deg, $blue 0%, $blue-800 100%);
|
font-size: 0.875rem;
|
||||||
|
color: $black;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
&:focus {
|
&:focus {
|
||||||
box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700;
|
box-shadow: 0 0 0 2.5px $blue;
|
||||||
}
|
|
||||||
&:focus, // Mouse, touch, stylus focus
|
|
||||||
&:focus-visible {
|
|
||||||
// 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%);
|
|
||||||
}
|
|
||||||
&:disabled {
|
|
||||||
background: $gray-200 !important;
|
|
||||||
background: linear-gradient(270deg, $gray-200 0%, $gray-200 100%) !important;
|
|
||||||
color: $gray-600 !important;
|
|
||||||
font-weight: 400;
|
|
||||||
height: 48px;
|
|
||||||
border: none;
|
|
||||||
border-radius: $border-radius-lg;
|
|
||||||
cursor: pointer;
|
|
||||||
pointer-events: all;
|
|
||||||
}
|
|
||||||
&.has-loader {
|
|
||||||
color: $white;
|
|
||||||
background: $blue-700;
|
|
||||||
box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700;
|
|
||||||
}
|
|
||||||
&.delay {
|
|
||||||
// fixes flicker while transitioning between states
|
|
||||||
transition: background 0s 0s ease-in-out;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.btn-secondary {
|
&:hover {
|
||||||
position: relative;
|
.form-check-input {
|
||||||
background: transparent;
|
box-shadow: 0 0 0 4px $blue-300;
|
||||||
border: 1px solid $blue;
|
|
||||||
border-radius: $border-radius-lg;
|
|
||||||
color: $blue;
|
|
||||||
font-weight: 500;
|
|
||||||
transition: all 150ms linear;
|
|
||||||
height: 3rem;
|
|
||||||
&:hover {
|
|
||||||
color: $white;
|
|
||||||
@include blue-gradient;
|
|
||||||
}
|
|
||||||
&:focus, // Mouse, touch, stylus focus
|
|
||||||
&:focus-visible {
|
|
||||||
// Keyboard focus for accessibility
|
|
||||||
outline: none;
|
|
||||||
box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $blue-700;
|
|
||||||
color: $white;
|
|
||||||
@include blue-gradient;
|
|
||||||
}
|
|
||||||
&:disabled {
|
|
||||||
background: transparent;
|
|
||||||
color: $gray-550 !important;
|
|
||||||
font-weight: 400;
|
|
||||||
height: 48px;
|
|
||||||
border: 1px solid $gray-550;
|
|
||||||
border-radius: $border-radius-lg;
|
|
||||||
cursor: pointer;
|
|
||||||
pointer-events: all;
|
|
||||||
}
|
|
||||||
&.has-loader {
|
|
||||||
color: $white;
|
|
||||||
@include blue-gradient;
|
|
||||||
}
|
|
||||||
&.delay {
|
|
||||||
// fixes flicker while transitioning between states
|
|
||||||
transition: background 0s 0s ease-in-out;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
p {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: $gray-600;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue