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

Padding setting of link button & nesting structure of _AccessibleButton.scss (#8091)

Browse source
This commit is contained in:
Suguru Hirahara 2022-03-23 17:15:15 +00:00 committed by GitHub
parent 1495c23a14
commit 86691550df
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
21 changed files with 148 additions and 160 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
res/css/structures/_SpaceHierarchy.scss
View file

@ -16,7 +16,6 @@ limitations under the License.
.mx_SpaceRoomView_landing { .mx_SpaceRoomView_landing {
.mx_AccessibleButton_kind_link { .mx_AccessibleButton_kind_link {
padding: 0;
font-size: inherit; font-size: inherit;
} }

1
res/css/structures/_ToastContainer.scss
View file

@ -159,7 +159,6 @@ limitations under the License.
.mx_AccessibleButton_kind_link { .mx_AccessibleButton_kind_link {
font-size: inherit; font-size: inherit;
padding: 0;
} }
a { a {

1
res/css/structures/_UserMenu.scss
View file

@ -146,7 +146,6 @@ limitations under the License.
.mx_AccessibleButton_kind_link { .mx_AccessibleButton_kind_link {
font-weight: normal; font-weight: normal;
font-size: inherit; font-size: inherit;
padding: 0;
} }
} }
} }

1
res/css/structures/auth/_Login.scss
View file

@ -90,7 +90,6 @@ div.mx_AccessibleButton_kind_link.mx_Login_forgot {
margin: 0 auto; margin: 0 auto;
// style it as a link // style it as a link
font-size: inherit; font-size: inherit;
padding: 0;
&.mx_AccessibleButton_disabled { &.mx_AccessibleButton_disabled {
cursor: not-allowed; cursor: not-allowed;

5
res/css/views/dialogs/_AddExistingToSpaceDialog.scss
View file

@ -54,7 +54,6 @@ limitations under the License.
font-size: $font-12px; font-size: $font-12px;
line-height: $font-15px; line-height: $font-15px;
margin-top: 8px; margin-top: 8px;
padding: 0;
} }
} }
@ -136,10 +135,6 @@ limitations under the License.
left: 0; left: 0;
} }
} }
.mx_AccessibleButton_kind_link {
padding: 0;
}
} }
} }

2
res/css/views/dialogs/_BugReportDialog.scss
View file

@ -17,7 +17,7 @@ limitations under the License.
.mx_BugReportDialog { .mx_BugReportDialog {
.mx_BugReportDialog_download { .mx_BugReportDialog_download {
.mx_AccessibleButton_kind_link { .mx_AccessibleButton_kind_link {
padding-left: 0; margin-right: 18px; // Space between "Downloading logs..."
} }
} }
} }

4
res/css/views/dialogs/_CreateSubspaceDialog.scss
View file

@ -73,9 +73,5 @@ limitations under the License.
margin-left: 16px; margin-left: 16px;
padding: 8px 36px; padding: 8px 36px;
} }
.mx_AccessibleButton_kind_link {
padding: 0;
}
} }
} }

1
res/css/views/dialogs/_FeedbackDialog.scss
View file

@ -59,7 +59,6 @@ limitations under the License.
} }
.mx_AccessibleButton_kind_link { .mx_AccessibleButton_kind_link {
padding: 0;
font-size: inherit; font-size: inherit;
} }

1
res/css/views/dialogs/_GenericFeatureFeedbackDialog.scss
View file

@ -23,7 +23,6 @@ limitations under the License.
} }
.mx_AccessibleButton_kind_link { .mx_AccessibleButton_kind_link {
padding: 0;
font-size: inherit; font-size: inherit;
line-height: inherit; line-height: inherit;
} }

5
res/css/views/dialogs/_InviteDialog.scss
View file

@ -96,6 +96,11 @@ limitations under the License.
> span { > span {
color: $primary-content; color: $primary-content;
} }
.mx_InviteDialog_section_showMore {
margin: 7px 18px;
display: inline;
}
} }
.mx_InviteDialog_section_hidden_suggestions_disclaimer { .mx_InviteDialog_section_hidden_suggestions_disclaimer {

9
res/css/views/dialogs/_SpaceSettingsDialog.scss
View file

@ -76,11 +76,12 @@ limitations under the License.
} }
.mx_AccessibleButton_hasKind { .mx_AccessibleButton_hasKind {
padding: 8px 22px; &.mx_AccessibleButton_kind_link {
margin: 7px 18px;
&.mx_SettingsTab_showAdvanced { &.mx_SettingsTab_showAdvanced {
margin: 16px 0; margin: 18px 0;
padding: 0; }
} }
} }

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

@ -16,152 +16,158 @@ limitations under the License.
.mx_AccessibleButton { .mx_AccessibleButton {
cursor: pointer; cursor: pointer;
}
.mx_AccessibleButton_disabled { &_disabled {
cursor: default; cursor: default;
}
.mx_AccessibleButton_hasKind { &.mx_AccessibleButton_kind {
padding: 7px 18px; &_primary,
text-align: center; &_primary_outline,
border-radius: 8px; &_primary_sm,
display: inline-flex; &_link,
align-items: center; &_link_inline,
justify-content: center; &_link_sm {
font-size: $font-14px; opacity: 0.4;
border: none; // override default <button /> styles }
} }
}
.mx_AccessibleButton_kind_primary { &_hasKind {
color: $button-primary-fg-color; padding: 7px 18px;
background-color: $accent; text-align: center;
border: 1px solid $accent; // account for size loss of no border border-radius: 8px;
font-weight: 600; display: inline-flex;
} align-items: center;
justify-content: center;
font-size: $font-14px;
border: none; // override default <button /> styles
.mx_AccessibleButton_kind_primary_outline { &.mx_AccessibleButton_kind {
color: $accent; &_primary_sm,
background-color: $button-secondary-bg-color; &_danger_sm,
border: 1px solid $accent; &_link_sm {
font-weight: 600; padding: 5px 12px;
} }
.mx_AccessibleButton_kind_secondary { &_primary_sm {
color: $accent; color: $button-primary-fg-color;
font-weight: 600; background-color: $accent;
} }
.mx_AccessibleButton_kind_primary.mx_AccessibleButton_disabled, &_danger_sm {
.mx_AccessibleButton_kind_primary_outline.mx_AccessibleButton_disabled { color: $button-danger-fg-color;
opacity: 0.4; background-color: $alert;
} }
.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_primary_sm { &_link_sm {
padding: 5px 12px; color: $accent;
color: $button-primary-fg-color; }
background-color: $accent;
}
.mx_AccessibleButton_kind_primary_sm.mx_AccessibleButton_disabled { &_confirm_sm {
opacity: 0.4; background-color: $accent;
}
.mx_AccessibleButton_kind_danger { &::before {
color: $button-danger-fg-color; mask-image: url('$(res)/img/feather-customised/check.svg');
background-color: $alert; }
} }
.mx_AccessibleButton_kind_danger_outline { &_cancel_sm {
color: $alert; background-color: $alert;
background-color: transparent;
border: 1px solid $alert;
}
.mx_AccessibleButton_kind_danger.mx_AccessibleButton_disabled { &::before {
color: $button-danger-disabled-fg-color; mask-image: url('$(res)/img/feather-customised/x.svg');
background-color: $button-danger-disabled-bg-color; }
} }
}
}
.mx_AccessibleButton_kind_danger_outline.mx_AccessibleButton_disabled { &_kind {
color: $button-danger-disabled-bg-color; &_primary,
border-color: $button-danger-disabled-bg-color; &_primary_outline,
} &_secondary {
font-weight: 600;
}
.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_danger_sm { &_primary,
padding: 5px 12px; &_primary_outline {
color: $button-danger-fg-color; border: 1px solid $accent;
background-color: $alert; }
}
.mx_AccessibleButton_kind_danger_sm.mx_AccessibleButton_disabled { &_primary {
color: $button-danger-disabled-fg-color; color: $button-primary-fg-color;
background-color: $button-danger-disabled-bg-color; background-color: $accent;
} }
.mx_AccessibleButton_kind_link { &_primary_outline {
color: $accent; color: $accent;
} background-color: $button-secondary-bg-color;
}
.mx_AccessibleButton_kind_link.mx_AccessibleButton_disabled { &_secondary {
opacity: 0.4; color: $accent;
} }
.mx_AccessibleButton_kind_link_inline { &_danger {
color: $accent; color: $button-danger-fg-color;
font-size: inherit; background-color: $alert;
padding: 0 2px;
}
.mx_AccessibleButton_kind_link_inline.mx_AccessibleButton_disabled { &.mx_AccessibleButton_disabled {
opacity: 0.4; color: $button-danger-disabled-fg-color;
} background-color: $button-danger-disabled-bg-color;
}
.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_link_sm { &_outline {
padding: 5px 12px; color: $alert;
color: $accent; background-color: transparent;
} border: 1px solid $alert;
.mx_AccessibleButton_kind_link_sm.mx_AccessibleButton_disabled { &.mx_AccessibleButton_disabled {
opacity: 0.4; color: $button-danger-disabled-bg-color;
} border-color: $button-danger-disabled-bg-color;
}
}
.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_confirm_sm { &_sm {
background-color: $accent; &.mx_AccessibleButton_disabled {
color: $button-danger-disabled-fg-color;
background-color: $button-danger-disabled-bg-color;
}
}
}
&::before { &_link {
mask-image: url('$(res)/img/feather-customised/check.svg'); color: $accent;
} padding: 0;
}
&_inline {
.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_cancel_sm { color: $accent;
background-color: $alert; font-size: inherit;
padding: 0 2px;
&::before { }
mask-image: url('$(res)/img/feather-customised/x.svg'); }
}
} &_confirm_sm,
&_cancel_sm {
.mx_AccessibleButton_kind_confirm_sm, padding: 0px;
.mx_AccessibleButton_kind_cancel_sm { width: 16px;
padding: 0px; height: 16px;
width: 16px; border-radius: 100%;
height: 16px; position: relative;
border-radius: 100%; display: block;
position: relative;
display: block; &::before {
content: "";
&::before { display: block;
content: ""; position: absolute;
display: block; top: 0;
position: absolute; bottom: 0;
top: 0; left: 0;
bottom: 0; right: 0;
left: 0; background-color: #ffffff;
right: 0; mask-repeat: no-repeat;
background-color: #ffffff; mask-position: center;
mask-repeat: no-repeat; mask-size: 80%;
mask-position: center; }
mask-size: 80%; }
} }
} }

1
res/css/views/right_panel/_RoomSummaryCard.scss
View file

@ -235,7 +235,6 @@ limitations under the License.
} }
.mx_AccessibleButton_kind_link { .mx_AccessibleButton_kind_link {
padding: 0;
margin-top: 12px; margin-top: 12px;
margin-bottom: 12px; margin-bottom: 12px;
font-size: $font-13px; font-size: $font-13px;

1
res/css/views/rooms/_NewRoomIntro.scss
View file

@ -24,7 +24,6 @@ limitations under the License.
} }
.mx_AccessibleButton_kind_link { .mx_AccessibleButton_kind_link {
padding: 0;
font-size: inherit; font-size: inherit;
} }

1
res/css/views/rooms/_PinnedEventTile.scss
View file

@ -91,7 +91,6 @@ limitations under the License.
} }
.mx_AccessibleButton_kind_link { .mx_AccessibleButton_kind_link {
padding: 0;
margin-left: 12px; margin-left: 12px;
font-size: inherit; font-size: inherit;
line-height: inherit; line-height: inherit;

2
res/css/views/settings/_ProfileSettings.scss
View file

@ -61,8 +61,6 @@ limitations under the License.
margin-bottom: 28px; margin-bottom: 28px;
> .mx_AccessibleButton_kind_link { > .mx_AccessibleButton_kind_link {
padding-left: 0; // to align with left side
padding-right: 0;
margin-right: 10px; margin-right: 10px;
} }
} }

1
res/css/views/settings/tabs/room/_NotificationSettingsTab.scss
View file

@ -52,7 +52,6 @@ limitations under the License.
margin-right: 32px; margin-right: 32px;
.mx_AccessibleButton_kind_link { .mx_AccessibleButton_kind_link {
padding: 0;
font-size: inherit; font-size: inherit;
} }
} }

1
res/css/views/settings/tabs/user/_PreferencesUserSettingsTab.scss
View file

@ -34,7 +34,6 @@ limitations under the License.
} }
.mx_AccessibleButton_kind_link { .mx_AccessibleButton_kind_link {
padding: 0;
font-size: inherit; font-size: inherit;
} }
} }

4
res/css/views/spaces/_SpaceBasicSettings.scss
View file

@ -63,8 +63,7 @@ limitations under the License.
> .mx_AccessibleButton_kind_link { > .mx_AccessibleButton_kind_link {
display: inline-block; display: inline-block;
padding: 0; margin: auto 18px;
margin: auto 16px;
color: #368bd6; color: #368bd6;
} }
@ -74,7 +73,6 @@ limitations under the License.
} }
.mx_AccessibleButton_hasKind { .mx_AccessibleButton_hasKind {
padding: 8px 22px;
margin-left: auto; margin-left: auto;
display: block; display: block;
width: min-content; width: min-content;

2
res/css/views/spaces/_SpaceCreateMenu.scss
View file

@ -94,7 +94,6 @@ $spacePanelWidth: 68px;
} }
.mx_AccessibleButton_kind_link { .mx_AccessibleButton_kind_link {
padding: 0;
font-size: inherit; font-size: inherit;
} }
@ -119,7 +118,6 @@ $spacePanelWidth: 68px;
.mx_AccessibleButton_kind_link { .mx_AccessibleButton_kind_link {
color: $accent; color: $accent;
position: relative; position: relative;
padding: 0;
font-size: inherit; font-size: inherit;
line-height: inherit; line-height: inherit;
} }

8
src/components/views/dialogs/InviteDialog.tsx
View file

@ -1166,9 +1166,11 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
let showMore = null; let showMore = null;
if (hasMore) { if (hasMore) {
showMore = ( showMore = (
<AccessibleButton onClick={showMoreFn} kind="link"> <div className="mx_InviteDialog_section_showMore">
{ _t("Show more") } <AccessibleButton onClick={showMoreFn} kind="link">
</AccessibleButton> { _t("Show more") }
</AccessibleButton>
</div>
); );
} }