mirror of
https://github.com/fleetdm/fleet
synced 2026-05-12 03:28:48 +00:00
afc4cc5d23
relates to #22896 Implements the UI for the windows automatic migration. **new windows mdm page layout with automatic migration checkbox**  - [x] Changes file added for user-visible changes in `changes/`, `orbit/changes/` or `ee/fleetd-chrome/changes`. See [Changes files](https://github.com/fleetdm/fleet/blob/main/docs/Contributing/Committing-Changes.md#changes-files) for more information. - [ ] Added/updated tests - [x] Manual QA for all new/changed functionality
104 lines
2 KiB
SCSS
104 lines
2 KiB
SCSS
.fleet-checkbox {
|
|
@include clearfix;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
&:hover:not(.fleet-checkbox__label--disabled) {
|
|
svg {
|
|
.checkbox-state {
|
|
stroke: $core-vibrant-blue-over;
|
|
fill: $core-vibrant-blue-over;
|
|
}
|
|
.checkbox-unchecked-state {
|
|
stroke: $core-vibrant-blue-over;
|
|
}
|
|
}
|
|
}
|
|
|
|
// During click only
|
|
&:active:not(.fleet-checkbox__label--disabled) {
|
|
svg {
|
|
.checkbox-state {
|
|
stroke: $core-vibrant-blue-down;
|
|
fill: $core-vibrant-blue-down;
|
|
}
|
|
.checkbox-unchecked-state {
|
|
stroke: $core-vibrant-blue-down;
|
|
}
|
|
}
|
|
}
|
|
|
|
// When tabbing
|
|
&:focus-visible:not(.fleet-checkbox__label--disabled) {
|
|
outline: none;
|
|
|
|
svg {
|
|
outline: 2px solid $ui-vibrant-blue-25;
|
|
outline-offset: 1px;
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
|
|
&--disabled {
|
|
svg {
|
|
.checkbox-state {
|
|
stroke: $ui-fleet-black-25;
|
|
fill: $ui-fleet-black-25;
|
|
}
|
|
.checkbox-unchecked-state {
|
|
stroke: $ui-fleet-black-25;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__label {
|
|
font-size: $x-small;
|
|
padding-left: $pad-small;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
|
|
&--disabled {
|
|
color: $ui-fleet-black-50;
|
|
|
|
svg {
|
|
.checkbox-state {
|
|
stroke: $ui-fleet-black-25;
|
|
fill: $ui-fleet-black-25;
|
|
}
|
|
.checkbox-unchecked-state {
|
|
stroke: $ui-fleet-black-25;
|
|
fill: $ui-fleet-black-25;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&__label-tooltip {
|
|
font-size: $x-small;
|
|
padding-left: $pad-small;
|
|
display: inherit;
|
|
vertical-align: top;
|
|
}
|
|
|
|
&__help-text {
|
|
@include help-text;
|
|
}
|
|
}
|
|
|
|
.inverse {
|
|
flex-direction: row-reverse; // Switches the text to the left side of checkbox as all checkboxes are now display flex
|
|
|
|
.fleet-checkbox {
|
|
&__icon {
|
|
padding-left: $pad-small;
|
|
}
|
|
|
|
&__label {
|
|
float: left;
|
|
padding-left: 0;
|
|
font-weight: $bold;
|
|
font-size: $x-small;
|
|
}
|
|
}
|
|
}
|