Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Commit

Permalink
Fix broken buttons (#8133)
Browse files Browse the repository at this point in the history
  • Loading branch information
@luixxiul
luixxiul authored Mar 23, 2022
1 parent f92fcb7 commit 64871c0
Showing 1 changed file with 76 additions and 82 deletions.
158 changes: 76 additions & 82 deletions res/css/views/elements/_AccessibleButton.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,15 +20,13 @@ limitations under the License.
.mx_AccessibleButton_disabled {
cursor: default;

&.mx_AccessibleButton_kind {
.mx_AccessibleButton_kind_primary,
.mx_AccessibleButton_kind_primary_outline,
.mx_AccessibleButton_kind_primary_sm,
.mx_AccessibleButton_kind_link,
.mx_AccessibleButton_kind_link_inline,
.mx_AccessibleButton_kind_link_sm {
opacity: 0.4;
}
.mx_AccessibleButton_kind_primary,
.mx_AccessibleButton_kind_primary_outline,
.mx_AccessibleButton_kind_primary_sm,
.mx_AccessibleButton_kind_link,
.mx_AccessibleButton_kind_link_inline,
.mx_AccessibleButton_kind_link_sm {
opacity: 0.4;
}
}

Expand All @@ -42,108 +40,104 @@ limitations under the License.
font-size: $font-14px;
border: none; // override default <button /> styles

&.mx_AccessibleButton_kind {
.mx_AccessibleButton_kind_primary_sm,
.mx_AccessibleButton_kind_danger_sm,
.mx_AccessibleButton_kind_link_sm {
padding: 5px 12px;
}
.mx_AccessibleButton_kind_primary_sm,
.mx_AccessibleButton_kind_danger_sm,
.mx_AccessibleButton_kind_link_sm {
padding: 5px 12px;
}

.mx_AccessibleButton_kind_primary_sm {
color: $button-primary-fg-color;
background-color: $accent;
}
.mx_AccessibleButton_kind_primary_sm {
color: $button-primary-fg-color;
background-color: $accent;
}

.mx_AccessibleButton_kind_danger_sm {
color: $button-danger-fg-color;
background-color: $alert;
}
.mx_AccessibleButton_kind_danger_sm {
color: $button-danger-fg-color;
background-color: $alert;
}

.mx_AccessibleButton_kind_link_sm {
color: $accent;
}
.mx_AccessibleButton_kind_link_sm {
color: $accent;
}

.mx_AccessibleButton_kind_confirm_sm {
background-color: $accent;
.mx_AccessibleButton_kind_confirm_sm {
background-color: $accent;

&::before {
mask-image: url('$(res)/img/feather-customised/check.svg');
}
&::before {
mask-image: url('$(res)/img/feather-customised/check.svg');
}
}

.mx_AccessibleButton_kind_cancel_sm {
background-color: $alert;
.mx_AccessibleButton_kind_cancel_sm {
background-color: $alert;

&::before {
mask-image: url('$(res)/img/feather-customised/x.svg');
}
&::before {
mask-image: url('$(res)/img/feather-customised/x.svg');
}
}
}

.mx_AccessibleButton_kind {
.mx_AccessibleButton_kind_primary,
.mx_AccessibleButton_kind_primary_outline,
.mx_AccessibleButton_kind_secondary {
font-weight: 600;
}
.mx_AccessibleButton_kind_primary,
.mx_AccessibleButton_kind_primary_outline,
.mx_AccessibleButton_kind_secondary {
font-weight: 600;
}

.mx_AccessibleButton_kind_primary,
.mx_AccessibleButton_kind_primary_outline {
border: 1px solid $accent;
}
.mx_AccessibleButton_kind_primary,
.mx_AccessibleButton_kind_primary_outline {
border: 1px solid $accent;
}

.mx_AccessibleButton_kind_primary {
color: $button-primary-fg-color;
background-color: $accent;
}
.mx_AccessibleButton_kind_primary {
color: $button-primary-fg-color;
background-color: $accent;
}

.mx_AccessibleButton_kind_primary_outline {
color: $accent;
background-color: $button-secondary-bg-color;
}
.mx_AccessibleButton_kind_primary_outline {
color: $accent;
background-color: $button-secondary-bg-color;
}

.mx_AccessibleButton_kind_secondary {
color: $accent;
}
.mx_AccessibleButton_kind_secondary {
color: $accent;
}

.mx_AccessibleButton_kind_danger {
color: $button-danger-fg-color;
background-color: $alert;
.mx_AccessibleButton_kind_danger {
color: $button-danger-fg-color;
background-color: $alert;

&.mx_AccessibleButton_disabled {
color: $button-danger-disabled-fg-color;
background-color: $button-danger-disabled-bg-color;
}
&.mx_AccessibleButton_disabled {
color: $button-danger-disabled-fg-color;
background-color: $button-danger-disabled-bg-color;
}

.mx_AccessibleButton_kind_danger_outline {
color: $alert;
background-color: transparent;
border: 1px solid $alert;
.mx_AccessibleButton_kind_danger_outline {
color: $alert;
background-color: transparent;
border: 1px solid $alert;

&.mx_AccessibleButton_disabled {
color: $button-danger-disabled-bg-color;
border-color: $button-danger-disabled-bg-color;
}
&.mx_AccessibleButton_disabled {
color: $button-danger-disabled-bg-color;
border-color: $button-danger-disabled-bg-color;
}
}

.mx_AccessibleButton_kind_danger_sm {
&.mx_AccessibleButton_disabled {
color: $button-danger-disabled-fg-color;
background-color: $button-danger-disabled-bg-color;
}
.mx_AccessibleButton_kind_danger_sm {
&.mx_AccessibleButton_disabled {
color: $button-danger-disabled-fg-color;
background-color: $button-danger-disabled-bg-color;
}
}

.mx_AccessibleButton_kind_link {
color: $accent;
padding: 0;
}

.mx_AccessibleButton_kind_link_inline {
color: $accent;
font-size: inherit;
padding: 0 2px;
}
.mx_AccessibleButton_kind_link_inline {
color: $accent;
font-size: inherit;
padding: 0 2px;
}

.mx_AccessibleButton_kind_confirm_sm,
Expand Down

0 comments on commit 64871c0

Please sign in to comment.