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

Commit 64871c0

Browse files
authored
Fix broken buttons (#8133)
1 parent f92fcb7 commit 64871c0

File tree

1 file changed

+76
-82
lines changed

1 file changed

+76
-82
lines changed

res/css/views/elements/_AccessibleButton.scss

Lines changed: 76 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -20,15 +20,13 @@ limitations under the License.
2020
.mx_AccessibleButton_disabled {
2121
cursor: default;
2222

23-
&.mx_AccessibleButton_kind {
24-
.mx_AccessibleButton_kind_primary,
25-
.mx_AccessibleButton_kind_primary_outline,
26-
.mx_AccessibleButton_kind_primary_sm,
27-
.mx_AccessibleButton_kind_link,
28-
.mx_AccessibleButton_kind_link_inline,
29-
.mx_AccessibleButton_kind_link_sm {
30-
opacity: 0.4;
31-
}
23+
.mx_AccessibleButton_kind_primary,
24+
.mx_AccessibleButton_kind_primary_outline,
25+
.mx_AccessibleButton_kind_primary_sm,
26+
.mx_AccessibleButton_kind_link,
27+
.mx_AccessibleButton_kind_link_inline,
28+
.mx_AccessibleButton_kind_link_sm {
29+
opacity: 0.4;
3230
}
3331
}
3432

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

45-
&.mx_AccessibleButton_kind {
46-
.mx_AccessibleButton_kind_primary_sm,
47-
.mx_AccessibleButton_kind_danger_sm,
48-
.mx_AccessibleButton_kind_link_sm {
49-
padding: 5px 12px;
50-
}
43+
.mx_AccessibleButton_kind_primary_sm,
44+
.mx_AccessibleButton_kind_danger_sm,
45+
.mx_AccessibleButton_kind_link_sm {
46+
padding: 5px 12px;
47+
}
5148

52-
.mx_AccessibleButton_kind_primary_sm {
53-
color: $button-primary-fg-color;
54-
background-color: $accent;
55-
}
49+
.mx_AccessibleButton_kind_primary_sm {
50+
color: $button-primary-fg-color;
51+
background-color: $accent;
52+
}
5653

57-
.mx_AccessibleButton_kind_danger_sm {
58-
color: $button-danger-fg-color;
59-
background-color: $alert;
60-
}
54+
.mx_AccessibleButton_kind_danger_sm {
55+
color: $button-danger-fg-color;
56+
background-color: $alert;
57+
}
6158

62-
.mx_AccessibleButton_kind_link_sm {
63-
color: $accent;
64-
}
59+
.mx_AccessibleButton_kind_link_sm {
60+
color: $accent;
61+
}
6562

66-
.mx_AccessibleButton_kind_confirm_sm {
67-
background-color: $accent;
63+
.mx_AccessibleButton_kind_confirm_sm {
64+
background-color: $accent;
6865

69-
&::before {
70-
mask-image: url('$(res)/img/feather-customised/check.svg');
71-
}
66+
&::before {
67+
mask-image: url('$(res)/img/feather-customised/check.svg');
7268
}
69+
}
7370

74-
.mx_AccessibleButton_kind_cancel_sm {
75-
background-color: $alert;
71+
.mx_AccessibleButton_kind_cancel_sm {
72+
background-color: $alert;
7673

77-
&::before {
78-
mask-image: url('$(res)/img/feather-customised/x.svg');
79-
}
74+
&::before {
75+
mask-image: url('$(res)/img/feather-customised/x.svg');
8076
}
8177
}
8278
}
8379

84-
.mx_AccessibleButton_kind {
85-
.mx_AccessibleButton_kind_primary,
86-
.mx_AccessibleButton_kind_primary_outline,
87-
.mx_AccessibleButton_kind_secondary {
88-
font-weight: 600;
89-
}
80+
.mx_AccessibleButton_kind_primary,
81+
.mx_AccessibleButton_kind_primary_outline,
82+
.mx_AccessibleButton_kind_secondary {
83+
font-weight: 600;
84+
}
9085

91-
.mx_AccessibleButton_kind_primary,
92-
.mx_AccessibleButton_kind_primary_outline {
93-
border: 1px solid $accent;
94-
}
86+
.mx_AccessibleButton_kind_primary,
87+
.mx_AccessibleButton_kind_primary_outline {
88+
border: 1px solid $accent;
89+
}
9590

96-
.mx_AccessibleButton_kind_primary {
97-
color: $button-primary-fg-color;
98-
background-color: $accent;
99-
}
91+
.mx_AccessibleButton_kind_primary {
92+
color: $button-primary-fg-color;
93+
background-color: $accent;
94+
}
10095

101-
.mx_AccessibleButton_kind_primary_outline {
102-
color: $accent;
103-
background-color: $button-secondary-bg-color;
104-
}
96+
.mx_AccessibleButton_kind_primary_outline {
97+
color: $accent;
98+
background-color: $button-secondary-bg-color;
99+
}
105100

106-
.mx_AccessibleButton_kind_secondary {
107-
color: $accent;
108-
}
101+
.mx_AccessibleButton_kind_secondary {
102+
color: $accent;
103+
}
109104

110-
.mx_AccessibleButton_kind_danger {
111-
color: $button-danger-fg-color;
112-
background-color: $alert;
105+
.mx_AccessibleButton_kind_danger {
106+
color: $button-danger-fg-color;
107+
background-color: $alert;
113108

114-
&.mx_AccessibleButton_disabled {
115-
color: $button-danger-disabled-fg-color;
116-
background-color: $button-danger-disabled-bg-color;
117-
}
109+
&.mx_AccessibleButton_disabled {
110+
color: $button-danger-disabled-fg-color;
111+
background-color: $button-danger-disabled-bg-color;
112+
}
118113

119-
.mx_AccessibleButton_kind_danger_outline {
120-
color: $alert;
121-
background-color: transparent;
122-
border: 1px solid $alert;
114+
.mx_AccessibleButton_kind_danger_outline {
115+
color: $alert;
116+
background-color: transparent;
117+
border: 1px solid $alert;
123118

124-
&.mx_AccessibleButton_disabled {
125-
color: $button-danger-disabled-bg-color;
126-
border-color: $button-danger-disabled-bg-color;
127-
}
119+
&.mx_AccessibleButton_disabled {
120+
color: $button-danger-disabled-bg-color;
121+
border-color: $button-danger-disabled-bg-color;
128122
}
123+
}
129124

130-
.mx_AccessibleButton_kind_danger_sm {
131-
&.mx_AccessibleButton_disabled {
132-
color: $button-danger-disabled-fg-color;
133-
background-color: $button-danger-disabled-bg-color;
134-
}
125+
.mx_AccessibleButton_kind_danger_sm {
126+
&.mx_AccessibleButton_disabled {
127+
color: $button-danger-disabled-fg-color;
128+
background-color: $button-danger-disabled-bg-color;
135129
}
136130
}
137131

138132
.mx_AccessibleButton_kind_link {
139133
color: $accent;
140134
padding: 0;
135+
}
141136

142-
.mx_AccessibleButton_kind_link_inline {
143-
color: $accent;
144-
font-size: inherit;
145-
padding: 0 2px;
146-
}
137+
.mx_AccessibleButton_kind_link_inline {
138+
color: $accent;
139+
font-size: inherit;
140+
padding: 0 2px;
147141
}
148142

149143
.mx_AccessibleButton_kind_confirm_sm,

0 commit comments

Comments
 (0)