mirror of
https://github.com/fleetdm/fleet
synced 2026-05-15 21:18:29 +00:00
53b08bfa99
## Addresses #14535 - Fix the issue - Dedupe and modularize styles while at it **Left: fix | Right: bug** <img width="1750" alt="Screenshot 2023-10-13 at 11 27 31 AM" src="https://github.com/fleetdm/fleet/assets/61553566/f13daf10-977c-45f1-bfcc-c294551ca18c"> - Also fix global alignment issue with checkboxes and their text: **Left: fix | Right: bug** <img width="868" alt="Screenshot 2023-10-13 at 11 46 42 AM" src="https://github.com/fleetdm/fleet/assets/61553566/33e92582-65b8-4c5d-aa46-45f8730ef439"> - [x] Manual QA for all new/changed functionality --------- Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
117 lines
2.3 KiB
SCSS
117 lines
2.3 KiB
SCSS
.fleet-checkbox {
|
|
@include clearfix;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
&__input {
|
|
opacity: 0;
|
|
width: 16px;
|
|
height: 16px;
|
|
margin: 2px;
|
|
|
|
&:focus + .fleet-checkbox__tick {
|
|
&::after {
|
|
border-color: $core-vibrant-blue;
|
|
}
|
|
}
|
|
|
|
&:checked + .fleet-checkbox__tick {
|
|
&::after {
|
|
background-color: $core-vibrant-blue;
|
|
border: solid 2px $core-vibrant-blue;
|
|
}
|
|
|
|
&::before {
|
|
@include position(absolute, 50% null null 50%);
|
|
transform: rotate(45deg);
|
|
box-sizing: border-box;
|
|
display: block;
|
|
width: 7px;
|
|
height: 13px;
|
|
margin: -8px 0 0 -3px;
|
|
border: 2px solid $core-white;
|
|
border-top: 0;
|
|
border-left: 0;
|
|
content: "";
|
|
}
|
|
}
|
|
}
|
|
|
|
&__tick {
|
|
@include size(20px);
|
|
@include position(absolute, 0 null null 0);
|
|
display: inline-block;
|
|
|
|
&::after {
|
|
@include size(20px);
|
|
transition: border 75ms ease-in-out, background 75ms ease-in-out;
|
|
border-radius: $border-radius;
|
|
border: solid 2px $ui-fleet-black-25;
|
|
content: "";
|
|
box-sizing: border-box;
|
|
display: block;
|
|
background-color: $core-white;
|
|
visibility: visible;
|
|
}
|
|
|
|
&--disabled {
|
|
&::after {
|
|
background-color: $ui-fleet-black-25;
|
|
}
|
|
}
|
|
|
|
&--indeterminate {
|
|
&::after {
|
|
background-color: $core-vibrant-blue;
|
|
border: solid 1px $core-vibrant-blue;
|
|
}
|
|
|
|
&::before {
|
|
@include position(absolute, 50% null null 50%);
|
|
box-sizing: border-box;
|
|
display: block;
|
|
width: 10px;
|
|
margin: -1px 0 0 -5px;
|
|
border: 2px solid $core-white;
|
|
border-top: 0;
|
|
border-left: 0;
|
|
content: "";
|
|
}
|
|
}
|
|
}
|
|
|
|
&__label {
|
|
font-size: $x-small;
|
|
padding-left: $pad-small;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
|
|
&__label-tooltip {
|
|
font-size: $x-small;
|
|
padding-left: $pad-small;
|
|
display: inherit;
|
|
vertical-align: top;
|
|
}
|
|
}
|
|
|
|
.inverse {
|
|
.fleet-checkbox {
|
|
&__input {
|
|
float: right;
|
|
}
|
|
|
|
&__tick {
|
|
left: initial;
|
|
right: -8px;
|
|
}
|
|
|
|
&__label {
|
|
float: left;
|
|
padding-left: 0;
|
|
font-weight: $bold;
|
|
font-size: $x-small;
|
|
}
|
|
}
|
|
}
|