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

98
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>
@ -22,64 +22,56 @@ export default {
<style lang="scss"> <style lang="scss">
.ui-checkbox { .ui-checkbox {
position: relative; position: relative;
input[type='checkbox'] {
position: absolute;
}
input[type='checkbox'] + label {
display: block;
position: relative;
}
input[type='checkbox'] + label::before {
content: '';
position: relative;
display: inline-block;
margin-right: 10px;
width: 16px;
height: 16px;
background: white;
border: 1px solid $gray-500;
border-radius: 2px;
}
input[type='checkbox']:checked + label::before {
background: $blue;
}
input[type='checkbox']:checked + label::after {
content: '';
position: absolute;
top: 4px;
left: 2px;
border-left: 2px solid $white;
border-bottom: 2px solid $white;
height: 6px;
width: 12px;
transform: rotate(-45deg);
}
input[type='checkbox']:hover + label::before {
//outline: #5d9dd5 solid 1px;
box-shadow: 0 0 0 4px $blue-100;
}
input[type='checkbox']:focus + label::before {
//outline: #5d9dd5 solid 1px;
box-shadow: 0 0 0 2px $blue;
}
input[type='checkbox']:focus:checked + label::before {
box-shadow: 0 0 0 2px transparent;
}
input[type='checkbox'] { input[type='checkbox'] {
position: absolute !important; position: absolute !important;
height: 1px; height: 1px;
width: 1px; width: 1px;
overflow: hidden; overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px); clip: rect(1px, 1px, 1px, 1px);
} + label {
input[type='checkbox']:disabled + label { display: block;
color: #575757; position: relative;
} }
+ label::before {
input[type='checkbox']:disabled + label::before { content: '';
background: #ddd; position: relative;
display: inline-block;
margin-right: 10px;
width: 16px;
height: 16px;
background: white;
border: 1px solid $gray-500;
border-radius: 2px;
}
&:checked + label::before {
background: $blue;
}
&:checked + label::after {
content: '';
position: absolute;
top: 8px;
left: 2px;
border-left: 2px solid $white;
border-bottom: 2px solid $white;
height: 6px;
width: 12px;
transform: rotate(-45deg);
}
&:hover + label::before {
box-shadow: 0 0 0 4px $blue-100;
}
&:focus + label::before {
box-shadow: 0 0 0 2px $blue;
}
&:focus:checked + label::before {
box-shadow: 0 0 0 2px transparent;
}
&:disabled + label {
color: $gray-200;
}
&:disabled + label::before {
background: $gray-200;
}
} }
} }
</style> </style>