Skip to content

Commit

Permalink
feat: adapt css to new classes
Browse files Browse the repository at this point in the history
  • Loading branch information
@nowseemee
Christian Pajung authored and nowseemee committed Jul 19, 2021
1 parent 3f4264b commit dcea072
Show file tree
Hide file tree
Showing 2 changed files with 55 additions and 58 deletions.
104 changes: 50 additions & 54 deletions packages/components/src/components/checkbox/checkbox.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,120 +109,116 @@ scale-checkbox {
position: absolute;
}

.checkbox input:disabled ~ .checkbox__label {
/* same as .checkbox--disabled .checkbox__label, (see rule further downwards)
.checkbox input:disabled ~ .checkbox__label {
color: var(--color-disabled);
}
.checkbox input:checked:disabled ~ .checkbox__label {
} */

.checkbox--disabled.checkbox--checked .checkbox__label {
color: var(--color-disabled);
}
.checkbox
input:checked:disabled
~ .checkbox__control-wrapper
.checkbox--disabled.checkbox--checked
.checkbox__control-wrapper
.checkbox__control {
background: var(--color-disabled);
}
.checkbox
input:checked:disabled
~ .checkbox__control-wrapper
.icon {
.checkbox--disabled.checkbox--checked
.checkbox__control-wrapper
.checkbox__icon {
color: var(--color-icon-checked-disabled);
}
.checkbox
input:checked:not([disabled]):hover
.checkbox--enabled.checkbox--checked
input:hover
~ .checkbox__control-wrapper
.checkbox__control,
.checkbox__control/* ,
.checkbox
input:checked:not([disabled])
~ .checkbox__control-wrapper:hover
.checkbox__control {
.checkbox__control */{
box-shadow: none;
border-color: var(--color-primary-hover);
background: var(--color-primary-hover);
}
.checkbox
input:checked:not([disabled]):active
.checkbox--checked.checkbox--eanabled
input:active
~ .checkbox__control-wrapper
.checkbox__control,
.checkbox__control/* ,
.checkbox
input:checked:not([disabled])
~ .checkbox__control-wrapper:active
.checkbox__control {
.checkbox__control */{
border-color: var(--color-primary-active);
background: var(--color-primary-active);
}
.checkbox
input:checked:not([disabled]):active
.checkbox--enabled.checkbox--checked
input:active
~ .checkbox__control-wrapper
.icon,
.checkbox__icon/* ,
.checkbox
input:checked:not([disabled])
~ .checkbox__control-wrapper:active
.icon {
.checkbox__icon */ {
color: var(--color-icon-checked-active);
}
.checkbox
input:checked:not([disabled])
~ .checkbox__control-wrapper
.checkbox__control {

.checkbox--enabled.checkbox--checked
.checkbox__control-wrapper
.checkbox__control {
border: var(--scl-spacing-1) solid var(--color-primary);
background: var(--color-primary);
}
.checkbox input:disabled ~ .checkbox__control-wrapper .checkbox__control {
.checkbox.checkbox--disabled .checkbox__control-wrapper .checkbox__control {
border-color: var(--color-disabled);
}
.checkbox input:focus ~ .checkbox__control-wrapper .checkbox__control {
box-shadow: 0 0 0 var(--scl-spacing-2) var(--color-focus);
}
.checkbox
input:not([disabled]):hover
.checkbox--enabled
input:hover
~ .checkbox__control-wrapper
.checkbox__control,
.checkbox__control/* ,
.checkbox
input:not([disabled])
~ .checkbox__control-wrapper:hover
.checkbox__control {
.checkbox__control */ {
box-shadow: none;
border-color: var(--color-primary-hover);
}
.checkbox
input:not([disabled]):hover
.checkbox--enabled
input:hover
~ .checkbox__control-wrapper
~ .checkbox__label,
~ .checkbox__label/* ,
.checkbox
input:not([disabled])
~ .checkbox__control-wrapper:hover
~ .checkbox__label {
~ .checkbox__label */{
color: var(--color-primary-hover);
}
.checkbox
input:not([disabled]):active
.checkbox.checkbox--enabled
input:active
~ .checkbox__control-wrapper
.checkbox__control,
.checkbox__control/* ,
.checkbox
input:not([disabled])
~ .checkbox__control-wrapper:active
.checkbox__control {
.checkbox__control */{
border-color: var(--color-primary-active);
background: var(--color-primary-active);
}
.checkbox
input:not([disabled]):active
~ .checkbox__control-wrapper
.icon,
.checkbox
input:not([disabled])
~ .checkbox__control-wrapper:active
.icon {

/* .checkbox input:not([disabled]):active ~ .checkbox__control-wrapper .checkbox__icon,
.checkbox input:not([disabled]) ~ .checkbox__control-wrapper:active .checkbox__icon {
color: var(--color-primary-active);
}
.checkbox
input:not([disabled]):active
} */

.checkbox.checkbox--enabled
input:active
~ .checkbox__control-wrapper
~ .checkbox__label,
~ .checkbox__label/* ,
.checkbox
input:not([disabled])
~ .checkbox__control-wrapper:active
~ .checkbox__label {
~ .checkbox__label */ {
color: var(--color-primary-active);
}
.checkbox .checkbox__control-wrapper .checkbox__control {
Expand All @@ -234,7 +230,7 @@ scale-checkbox {
border: var(--border-width-control) solid var(--color-text);
background: var(--color-standard);
}
.checkbox .checkbox__control-wrapper .icon {
.checkbox .checkbox__control-wrapper .checkbox__icon {
top: var(--top-icon);
left: var(--left-icon);
width: var(--width-icon);
Expand All @@ -244,7 +240,7 @@ scale-checkbox {
user-select: none;
color: var(--color-standard);
}
.checkbox .checkbox__control-wrapper .icon svg {
.checkbox .checkbox__control-wrapper .checkbox__icon svg {
width: var(--width-icon);
height: var(--height-icon);
}
Expand Down
9 changes: 5 additions & 4 deletions packages/components/src/components/checkbox/checkbox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,12 +92,12 @@ export class Checkbox {
{/* Accessibility: rendering the icon *only* when checked, otherwise is always visible in HCM */}
{this.checked && (
<scale-icon-action-success
class="icon"
class="checkbox__icon"
decorative
></scale-icon-action-success>
)}
{this.indeterminate && (
<scale-icon-action-play class="icon"></scale-icon-action-play>
<scale-icon-action-play class="checkbox__icon"></scale-icon-action-play>
)}
</div>
<span class="checkbox__label">
Expand All @@ -122,8 +122,9 @@ export class Checkbox {
getCssClassMap() {
return classNames(
'checkbox',
this.checked && `checkbox--checked`,
this.disabled && `checkbox--disabled`,
this.checked ? `checkbox--checked` : `checkbox--not-checked`,
this.indeterminate && `checkbox--indeterminate`,
this.disabled ? `checkbox--disabled` : `checkbox--enabled`,
this.status && `checkbox--status-${this.status}`
);
}
Expand Down

0 comments on commit dcea072

Please sign in to comment.