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

Rebuild radio buttons.

Browse source
This commit is contained in:
bmauger 2022-02-18 12:23:22 -05:00
parent b97a97bfc3
commit 2dda277c75
2 changed files with 19 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/ux-components/checkbox/checkbox.vue
View file

@ -33,7 +33,7 @@ export default {
}; };
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.form-check { .form-check {
.form-check-input { .form-check-input {
border: 1px solid $gray-500; border: 1px solid $gray-500;

75
src/ux-components/radio/radio.vue
View file

@ -1,8 +1,9 @@
<template> <template>
<!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag and must contain tabindex --> <!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag and must contain tabindex -->
<div class="ui-radio d-flex" :class="[hasError ? 'has-error' : '']"> <div class="ui-radio d-flex form-check" :class="[hasError ? 'has-error' : '']">
<input <input
type="radio" type="radio"
class="form-check-input"
aria-checked="false" aria-checked="false"
:name="groupName" :name="groupName"
:id="buttonID" :id="buttonID"
@ -11,7 +12,7 @@
:v-model="checkValue" :v-model="checkValue"
@change="handleCheckChanged()" @change="handleCheckChanged()"
/> />
<label class="d-flex align-items-start radio-label" :for="buttonID"> <label class="d-flex align-items-start form-check-label" :for="buttonID">
<p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p> <p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>
<span v-if="screenReaderOnlyText" class="sr-only">{{ <span v-if="screenReaderOnlyText" class="sr-only">{{
screenReaderOnlyText screenReaderOnlyText
@ -77,71 +78,25 @@ export default {
}; };
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.ui-radio { .form-check {
position: relative; .form-check-input {
input[type="radio"] {
position: absolute!important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px,1px,1px,1px);
+ .radio-label {
&:before {
content: '';
background: $white;
border-radius: 100%;
border: 1px solid $gray-500; border: 1px solid $gray-500;
display: inline-block; border-radius: 100%;
width: 16px;
height: 16px;
position: relative;
margin-right: .5rem; margin-right: .5rem;
vertical-align: top;
cursor: pointer;
transition: all 250ms ease;
flex-shrink: 0;
top: .25rem;
}
}
&:checked { &:checked {
+ .radio-label { background-color: $white;
&:before { background-size: 71%;
background-color: $blue; border: 1px solid $blue;
box-shadow: inset 0 0 0 2px $white; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' xml:space='preserve'%3e%3ccircle cx='25' cy='25' r='25' fill='%231574A1'/%3e%3c/svg%3e");
} }
&:focus {
box-shadow: 0 0 0 4px $blue-300;
} }
} }
&:hover { &:hover {
+ label { .form-check-input {
cursor: pointer; box-shadow: 0 0 0 4px $blue-300;
&:before {
box-shadow: 0 0 0 4px #9fcee6;
}
}
}
&:focus {
+ label {
&:before {
box-shadow: 0 0 0 2px #1574a1;
}
}
}
&:disabled {
+ .radio-label {
&:before {
box-shadow: inset 0 0 0 4px $gray-550;
border-color: $gray-550;
background: $gray-550;
}
}
}
+ .radio-label {
&:empty {
&:before {
margin-right: 0;
}
}
} }
} }
} }