PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Fix broken buttons (#8133)

Browse source
This commit is contained in:
Suguru Hirahara 2022-03-23 19:09:09 +00:00 committed by GitHub
parent f92fcb7945
commit 64871c057b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 86 additions and 92 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

178
res/css/views/elements/_AccessibleButton.scss
View file

@ -20,15 +20,13 @@ limitations under the License.
.mx_AccessibleButton_disabled { .mx_AccessibleButton_disabled {
cursor: default; cursor: default;
&.mx_AccessibleButton_kind { .mx_AccessibleButton_kind_primary,
.mx_AccessibleButton_kind_primary, .mx_AccessibleButton_kind_primary_outline,
.mx_AccessibleButton_kind_primary_outline, .mx_AccessibleButton_kind_primary_sm,
.mx_AccessibleButton_kind_primary_sm, .mx_AccessibleButton_kind_link,
.mx_AccessibleButton_kind_link, .mx_AccessibleButton_kind_link_inline,
.mx_AccessibleButton_kind_link_inline, .mx_AccessibleButton_kind_link_sm {
.mx_AccessibleButton_kind_link_sm { opacity: 0.4;
opacity: 0.4;
}
} }
} }
@ -42,108 +40,104 @@ limitations under the License.
font-size: $font-14px; font-size: $font-14px;
border: none; // override default <button /> styles border: none; // override default <button /> styles
&.mx_AccessibleButton_kind { .mx_AccessibleButton_kind_primary_sm,
.mx_AccessibleButton_kind_primary_sm, .mx_AccessibleButton_kind_danger_sm,
.mx_AccessibleButton_kind_danger_sm, .mx_AccessibleButton_kind_link_sm {
.mx_AccessibleButton_kind_link_sm { padding: 5px 12px;
padding: 5px 12px;
}
.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_link_sm {
color: $accent;
}
.mx_AccessibleButton_kind_confirm_sm {
background-color: $accent;
&::before {
mask-image: url('$(res)/img/feather-customised/check.svg');
}
}
.mx_AccessibleButton_kind_cancel_sm {
background-color: $alert;
&::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_sm {
.mx_AccessibleButton_kind_primary_outline {
border: 1px solid $accent;
}
.mx_AccessibleButton_kind_primary {
color: $button-primary-fg-color; color: $button-primary-fg-color;
background-color: $accent; background-color: $accent;
} }
.mx_AccessibleButton_kind_primary_outline { .mx_AccessibleButton_kind_danger_sm {
color: $accent;
background-color: $button-secondary-bg-color;
}
.mx_AccessibleButton_kind_secondary {
color: $accent;
}
.mx_AccessibleButton_kind_danger {
color: $button-danger-fg-color; color: $button-danger-fg-color;
background-color: $alert; background-color: $alert;
}
.mx_AccessibleButton_kind_link_sm {
color: $accent;
}
.mx_AccessibleButton_kind_confirm_sm {
background-color: $accent;
&::before {
mask-image: url('$(res)/img/feather-customised/check.svg');
}
}
.mx_AccessibleButton_kind_cancel_sm {
background-color: $alert;
&::before {
mask-image: url('$(res)/img/feather-customised/x.svg');
}
}
}
.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 {
color: $button-primary-fg-color;
background-color: $accent;
}
.mx_AccessibleButton_kind_primary_outline {
color: $accent;
background-color: $button-secondary-bg-color;
}
.mx_AccessibleButton_kind_secondary {
color: $accent;
}
.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_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_kind_danger_sm {
&.mx_AccessibleButton_disabled { &.mx_AccessibleButton_disabled {
color: $button-danger-disabled-fg-color; color: $button-danger-disabled-fg-color;
background-color: $button-danger-disabled-bg-color; background-color: $button-danger-disabled-bg-color;
} }
.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_kind_danger_sm {
&.mx_AccessibleButton_disabled {
color: $button-danger-disabled-fg-color;
background-color: $button-danger-disabled-bg-color;
}
}
} }
.mx_AccessibleButton_kind_link { .mx_AccessibleButton_kind_link {
color: $accent; color: $accent;
padding: 0; padding: 0;
}
.mx_AccessibleButton_kind_link_inline { .mx_AccessibleButton_kind_link_inline {
color: $accent; color: $accent;
font-size: inherit; font-size: inherit;
padding: 0 2px; padding: 0 2px;
}
} }
.mx_AccessibleButton_kind_confirm_sm, .mx_AccessibleButton_kind_confirm_sm,