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

CSR-241 WIP css cleanup.

Browse source
This commit is contained in:
bmauger 2021-12-17 06:35:43 -05:00
parent 8abe40c704
commit f26ab03cdb
1 changed files with 45 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -2,7 +2,7 @@
<div class="ui-checkbox d-flex"> <div class="ui-checkbox d-flex">
<input type="checkbox" :name="checkboxName" :id="buttonID" :tabindex="tabIndex" /> <input type="checkbox" :name="checkboxName" :id="buttonID" :tabindex="tabIndex" />
<label class="d-flex align-items-center" :for="buttonID"> <label class="d-flex align-items-center" :for="buttonID">
<p class="m-0 lh-1">{{checkboxLabel}}</p> <p v-if="checkboxLabel" class="m-0">{{checkboxLabel}}</p>
</label> </label>
</div> </div>
</template> </template>
@ -23,14 +23,16 @@ export default {
.ui-checkbox { .ui-checkbox {
position: relative; position: relative;
input[type='checkbox'] { input[type='checkbox'] {
position: absolute; position: absolute !important;
} height: 1px;
width: 1px;
input[type='checkbox'] + label { overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
+ label {
display: block; display: block;
position: relative; position: relative;
} }
input[type='checkbox'] + label::before { + label::before {
content: ''; content: '';
position: relative; position: relative;
display: inline-block; display: inline-block;
@ -41,13 +43,13 @@ export default {
border: 1px solid $gray-500; border: 1px solid $gray-500;
border-radius: 2px; border-radius: 2px;
} }
input[type='checkbox']:checked + label::before { &:checked + label::before {
background: $blue; background: $blue;
} }
input[type='checkbox']:checked + label::after { &:checked + label::after {
content: ''; content: '';
position: absolute; position: absolute;
top: 4px; top: 8px;
left: 2px; left: 2px;
border-left: 2px solid $white; border-left: 2px solid $white;
border-bottom: 2px solid $white; border-bottom: 2px solid $white;
@ -55,31 +57,21 @@ export default {
width: 12px; width: 12px;
transform: rotate(-45deg); transform: rotate(-45deg);
} }
input[type='checkbox']:hover + label::before { &:hover + label::before {
//outline: #5d9dd5 solid 1px;
box-shadow: 0 0 0 4px $blue-100; box-shadow: 0 0 0 4px $blue-100;
} }
input[type='checkbox']:focus + label::before { &:focus + label::before {
//outline: #5d9dd5 solid 1px;
box-shadow: 0 0 0 2px $blue; box-shadow: 0 0 0 2px $blue;
} }
input[type='checkbox']:focus:checked + label::before { &:focus:checked + label::before {
box-shadow: 0 0 0 2px transparent; box-shadow: 0 0 0 2px transparent;
} }
input[type='checkbox'] { &:disabled + label {
position: absolute !important; color: $gray-200;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
} }
input[type='checkbox']:disabled + label { &:disabled + label::before {
color: #575757; background: $gray-200;
} }
input[type='checkbox']:disabled + label::before {
background: #ddd;
} }
} }
</style> </style>