riot-web/res/css/views/elements/_AccessibleButton.scss

168 lines
4.0 KiB
SCSS
Raw Normal View History

/*
Copyright 2017 Vector Creations Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_AccessibleButton {
cursor: pointer;
}
.mx_AccessibleButton_disabled {
cursor: default;
}
.mx_AccessibleButton_hasKind {
2019-01-24 22:41:00 +01:00
padding: 7px 18px;
text-align: center;
border-radius: 8px;
2021-03-09 00:28:54 +01:00
display: inline-flex;
align-items: center;
justify-content: center;
font-size: $font-14px;
border: none; // override default <button /> styles
}
.mx_AccessibleButton_kind_primary {
color: $button-primary-fg-color;
background-color: $accent;
border: 1px solid $accent; // account for size loss of no border
2019-04-15 17:11:26 +02:00
font-weight: 600;
}
.mx_AccessibleButton_kind_primary_outline {
color: $accent;
background-color: $button-secondary-bg-color;
border: 1px solid $accent;
font-weight: 600;
}
2019-04-15 17:11:26 +02:00
.mx_AccessibleButton_kind_secondary {
color: $accent;
2019-04-15 17:11:26 +02:00
font-weight: 600;
}
2020-03-31 04:23:34 +02:00
.mx_AccessibleButton_kind_primary.mx_AccessibleButton_disabled,
.mx_AccessibleButton_kind_primary_outline.mx_AccessibleButton_disabled {
2019-02-12 16:40:06 +01:00
opacity: 0.4;
}
2019-01-22 23:18:14 +01:00
2019-01-24 02:49:27 +01:00
.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_primary_sm {
padding: 5px 12px;
2019-01-22 23:18:14 +01:00
color: $button-primary-fg-color;
background-color: $accent;
2019-01-22 23:18:14 +01:00
}
.mx_AccessibleButton_kind_primary_sm.mx_AccessibleButton_disabled {
2019-02-12 16:40:06 +01:00
opacity: 0.4;
2019-01-22 23:18:14 +01:00
}
.mx_AccessibleButton_kind_danger {
color: $button-danger-fg-color;
background-color: $alert;
2019-01-22 23:18:14 +01:00
}
.mx_AccessibleButton_kind_danger_outline {
color: $alert;
background-color: transparent;
border: 1px solid $alert;
}
.mx_AccessibleButton_kind_danger.mx_AccessibleButton_disabled {
2019-01-22 23:18:14 +01:00
color: $button-danger-disabled-fg-color;
background-color: $button-danger-disabled-bg-color;
}
.mx_AccessibleButton_kind_danger_outline.mx_AccessibleButton_disabled {
color: $button-danger-disabled-bg-color;
border-color: $button-danger-disabled-bg-color;
}
2019-01-24 02:49:27 +01:00
.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_danger_sm {
padding: 5px 12px;
2019-01-22 23:18:14 +01:00
color: $button-danger-fg-color;
background-color: $alert;
2019-01-22 23:18:14 +01:00
}
.mx_AccessibleButton_kind_danger_sm.mx_AccessibleButton_disabled {
color: $button-danger-disabled-fg-color;
background-color: $button-danger-disabled-bg-color;
2019-02-12 16:40:06 +01:00
}
.mx_AccessibleButton_kind_link {
color: $accent;
}
.mx_AccessibleButton_kind_link.mx_AccessibleButton_disabled {
opacity: 0.4;
}
A11y - fix anchors-as-buttons (#7444) * add link_inline accessiblebutton variant * valid anchors in SecurityRoomSettingsTab Signed-off-by: Kerry Archibald <kerrya@element.io> * new room intro link button Signed-off-by: Kerry Archibald <kerrya@element.io> * replace anchor with button in rerequest encryption keys message Signed-off-by: Kerry Archibald <kerrya@element.io> * inline button in UrlPreviewSettings Signed-off-by: Kerry Archibald <kerrya@element.io> * ButtonResetDefault mixin Signed-off-by: Kerry Archibald <kerrya@element.io> * inline link buttons in TextForEvent Signed-off-by: Kerry Archibald <kerrya@element.io> * fix anchors in InviteDialog Signed-off-by: Kerry Archibald <kerrya@element.io> * fix anchors in DevToolsDialog Signed-off-by: Kerry Archibald <kerrya@element.io> * fix anchors in login/registration/reset pword flows Signed-off-by: Kerry Archibald <kerrya@element.io> * fix types after fixing anchors in devtools Signed-off-by: Kerry Archibald <kerrya@element.io> * fix anchors in MemberEventListSummary Signed-off-by: Kerry Archibald <kerrya@element.io> * fix anchors in ReactionsRow and RoomUpgrade Signed-off-by: Kerry Archibald <kerrya@element.io> * fix anchors in ReplyChain Signed-off-by: Kerry Archibald <kerrya@element.io> * fix more anchors Signed-off-by: Kerry Archibald <kerrya@element.io> * fix anchors in auth comps * stylelint fixes Signed-off-by: Kerry Archibald <kerrya@element.io> * remove ignore of jsx-a11y rule that is not added yet Signed-off-by: Kerry Archibald <kerrya@element.io> * devtools style important explainer Signed-off-by: Kerry Archibald <kerrya@element.io> * translate button alt in devtools dialog Signed-off-by: Kerry Archibald <kerrya@element.io> * AccessibleButton is reactionsrow Signed-off-by: Kerry Archibald <kerrya@element.io> * fix viewsourcevent button placement, use AccessibleButton Signed-off-by: Kerry Archibald <kerrya@element.io> * use AccessibleButton in EventTile Signed-off-by: Kerry Archibald <kerrya@element.io> * unignore jsx-a11y/anchor-is-valid Signed-off-by: Kerry Archibald <kerrya@element.io> * fix lint issue in test jsx Signed-off-by: Kerry Archibald <kerrya@element.io> * update coment Signed-off-by: Kerry Archibald <kerrya@element.io>
2022-01-07 10:40:53 +01:00
.mx_AccessibleButton_kind_link_inline {
color: $accent;
font-size: inherit;
padding: 0 2px;
}
.mx_AccessibleButton_kind_link_inline.mx_AccessibleButton_disabled {
opacity: 0.4;
}
.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_link_sm {
padding: 5px 12px;
color: $accent;
}
.mx_AccessibleButton_kind_link_sm.mx_AccessibleButton_disabled {
opacity: 0.4;
}
.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_confirm_sm {
background-color: $accent;
&::before {
mask-image: url('$(res)/img/feather-customised/check.svg');
}
}
.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_cancel_sm {
background-color: $alert;
&::before {
mask-image: url('$(res)/img/feather-customised/x.svg');
}
}
.mx_AccessibleButton_kind_confirm_sm,
.mx_AccessibleButton_kind_cancel_sm {
padding: 0px;
width: 16px;
height: 16px;
border-radius: 100%;
position: relative;
display: block;
&::before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #ffffff;
mask-repeat: no-repeat;
mask-position: center;
mask-size: 80%;
}
}