Skip to content

Commit

Permalink
feat(dropdown): support readonly variant
Browse files Browse the repository at this point in the history
The read-only checkbox still changed their cursor on hover confusing the user one could still change it.
While doing it i added support for read-only to the dropdown component as well

Removed cursor changes for read-only checkbox
Added "read-only" variant to dropdown similar to the existing variant for checkbox
  • Loading branch information
lubber-de authored Dec 21, 2020
1 parent 48c4716 commit 185e234
Show file tree
Hide file tree
Showing 3 changed files with 22 additions and 8 deletions.
18 changes: 10 additions & 8 deletions src/definitions/modules/checkbox.less
Original file line number Diff line number Diff line change
Expand Up @@ -349,14 +349,16 @@
color: @checkboxActiveFocusCheckColor;
}

& when (@variationCheckboxReadonly) {
/*--------------
Read-Only
---------------*/

/*--------------
Read-Only
---------------*/

.ui.read-only.checkbox,
.ui.read-only.checkbox label {
cursor: default;
.ui.read-only.checkbox,
.ui.read-only.checkbox label {
cursor: default;
pointer-events: none;
}
}

& when (@variationCheckboxDisabled) {
Expand All @@ -366,7 +368,7 @@

.ui.disabled.checkbox label,
.ui.checkbox input[disabled] ~ label {
cursor: default !important;
cursor: default;
opacity: @disabledCheckboxOpacity;
color: @disabledCheckboxLabelColor;
pointer-events: none;
Expand Down
10 changes: 10 additions & 0 deletions src/definitions/modules/dropdown.less
Original file line number Diff line number Diff line change
Expand Up @@ -1135,6 +1135,16 @@ select.ui.dropdown {
}
}

& when (@variationDropdownReadonly) {
/*--------------------
Read-Only
----------------------*/

.ui.read-only.dropdown {
cursor: default;
pointer-events: none;
}
}

/*******************************
Variations
Expand Down
2 changes: 2 additions & 0 deletions src/themes/default/globals/variation.variables
Original file line number Diff line number Diff line change
Expand Up @@ -378,6 +378,7 @@
/* Checkbox */
@variationCheckboxBox: false; //.box (instead of label) is an ancient fragment of sui v1 and not even documented in v2.x anymore
@variationCheckboxDisabled: true;
@variationCheckboxReadonly: true;
@variationCheckboxInverted: true;
@variationCheckboxRadio: true;
@variationCheckboxSlider: true;
Expand All @@ -401,6 +402,7 @@
/* Dropdown */
@variationDropdownInverted: true;
@variationDropdownDisabled: true;
@variationDropdownReadonly: true;
@variationDropdownLabel: true;
@variationDropdownButton: true;
@variationDropdownSelection: true;
Expand Down

0 comments on commit 185e234

Please sign in to comment.