mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-23 01:35:49 +03:00
Code Issues Projects Releases Packages Wiki Activity

Fix wrong nesting of _AccessibleButton.scss (#8134)

Browse source
This commit is contained in:
Suguru Hirahara 2022-03-23 20:36:43 +00:00 committed by GitHub
parent 306ddd51e4
commit 6721d4fe9c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 68 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -17,20 +17,20 @@ limitations under the License.
.mx_AccessibleButton { .mx_AccessibleButton {
cursor: pointer; cursor: pointer;
.mx_AccessibleButton_disabled { &.mx_AccessibleButton_disabled {
cursor: default; cursor: default;
.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;
} }
} }
.mx_AccessibleButton_hasKind { &.mx_AccessibleButton_hasKind {
padding: 7px 18px; padding: 7px 18px;
text-align: center; text-align: center;
border-radius: 8px; border-radius: 8px;
@ -40,27 +40,27 @@ 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_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 { &.mx_AccessibleButton_kind_primary_sm {
color: $button-primary-fg-color; color: $button-primary-fg-color;
background-color: $accent; background-color: $accent;
} }
.mx_AccessibleButton_kind_danger_sm { &.mx_AccessibleButton_kind_danger_sm {
color: $button-danger-fg-color; color: $button-danger-fg-color;
background-color: $alert; background-color: $alert;
} }
.mx_AccessibleButton_kind_link_sm { &.mx_AccessibleButton_kind_link_sm {
color: $accent; color: $accent;
} }
.mx_AccessibleButton_kind_confirm_sm { &.mx_AccessibleButton_kind_confirm_sm {
background-color: $accent; background-color: $accent;
&::before { &::before {
@ -68,7 +68,7 @@ limitations under the License.
} }
} }
.mx_AccessibleButton_kind_cancel_sm { &.mx_AccessibleButton_kind_cancel_sm {
background-color: $alert; background-color: $alert;
&::before { &::before {
@ -77,32 +77,32 @@ limitations under the License.
} }
} }
.mx_AccessibleButton_kind_primary, &.mx_AccessibleButton_kind_primary,
.mx_AccessibleButton_kind_primary_outline, &.mx_AccessibleButton_kind_primary_outline,
.mx_AccessibleButton_kind_secondary { &.mx_AccessibleButton_kind_secondary {
font-weight: 600; font-weight: 600;
} }
.mx_AccessibleButton_kind_primary, &.mx_AccessibleButton_kind_primary,
.mx_AccessibleButton_kind_primary_outline { &.mx_AccessibleButton_kind_primary_outline {
border: 1px solid $accent; border: 1px solid $accent;
} }
.mx_AccessibleButton_kind_primary { &.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_primary_outline {
color: $accent; color: $accent;
background-color: $button-secondary-bg-color; background-color: $button-secondary-bg-color;
} }
.mx_AccessibleButton_kind_secondary { &.mx_AccessibleButton_kind_secondary {
color: $accent; color: $accent;
} }
.mx_AccessibleButton_kind_danger { &.mx_AccessibleButton_kind_danger {
color: $button-danger-fg-color; color: $button-danger-fg-color;
background-color: $alert; background-color: $alert;
@ -110,58 +110,58 @@ limitations under the License.
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 { &.mx_AccessibleButton_kind_danger_outline {
color: $alert; color: $alert;
background-color: transparent; background-color: transparent;
border: 1px solid $alert; border: 1px solid $alert;
&.mx_AccessibleButton_disabled { &.mx_AccessibleButton_disabled {
color: $button-danger-disabled-bg-color; color: $button-danger-disabled-bg-color;
border-color: $button-danger-disabled-bg-color; border-color: $button-danger-disabled-bg-color;
}
} }
}
.mx_AccessibleButton_kind_danger_sm { &.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_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,
.mx_AccessibleButton_kind_cancel_sm { &.mx_AccessibleButton_kind_cancel_sm {
padding: 0px; padding: 0px;
width: 16px; width: 16px;
height: 16px; height: 16px;
border-radius: 100%; border-radius: 100%;
position: relative; position: relative;
display: block;
&::before {
content: "";
display: block; display: block;
position: absolute;
&::before { top: 0;
content: ""; bottom: 0;
display: block; left: 0;
position: absolute; right: 0;
top: 0; background-color: #ffffff;
bottom: 0; mask-repeat: no-repeat;
left: 0; mask-position: center;
right: 0; mask-size: 80%;
background-color: #ffffff;
mask-repeat: no-repeat;
mask-position: center;
mask-size: 80%;
}
} }
} }
} }