Color cleanup 8 (#7108)
* $accent-color -> $accent Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Remove $accent-bg-color Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * $notice-primary-color -> $alert Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Remove $notice-primary-bg-color Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Remove $accent-50pct Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * $warning-color -> $alert Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Remove $accent-darker Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Remove $orange-warning-color Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Remove $warning-bg-color Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Remove $info-bg-color Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Šimon Brandner
GitHub
parent
5ad3261cb2
commit
9abb2f5ff4
111 changed files with 271 additions and 306 deletions
|
|
@ -35,20 +35,20 @@ limitations under the License.
|
|||
|
||||
.mx_AccessibleButton_kind_primary {
|
||||
color: $button-primary-fg-color;
|
||||
background-color: $accent-color;
|
||||
border: 1px solid $accent-color; // account for size loss of no border
|
||||
background-color: $accent;
|
||||
border: 1px solid $accent; // account for size loss of no border
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.mx_AccessibleButton_kind_primary_outline {
|
||||
color: $accent-color;
|
||||
color: $accent;
|
||||
background-color: $button-secondary-bg-color;
|
||||
border: 1px solid $accent-color;
|
||||
border: 1px solid $accent;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.mx_AccessibleButton_kind_secondary {
|
||||
color: $accent-color;
|
||||
color: $accent;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
|
@ -60,7 +60,7 @@ limitations under the License.
|
|||
.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_primary_sm {
|
||||
padding: 5px 12px;
|
||||
color: $button-primary-fg-color;
|
||||
background-color: $accent-color;
|
||||
background-color: $accent;
|
||||
}
|
||||
|
||||
.mx_AccessibleButton_kind_primary_sm.mx_AccessibleButton_disabled {
|
||||
|
|
@ -69,13 +69,13 @@ limitations under the License.
|
|||
|
||||
.mx_AccessibleButton_kind_danger {
|
||||
color: $button-danger-fg-color;
|
||||
background-color: $notice-primary-color;
|
||||
background-color: $alert;
|
||||
}
|
||||
|
||||
.mx_AccessibleButton_kind_danger_outline {
|
||||
color: $notice-primary-color;
|
||||
color: $alert;
|
||||
background-color: transparent;
|
||||
border: 1px solid $notice-primary-color;
|
||||
border: 1px solid $alert;
|
||||
}
|
||||
|
||||
.mx_AccessibleButton_kind_danger.mx_AccessibleButton_disabled {
|
||||
|
|
@ -91,7 +91,7 @@ limitations under the License.
|
|||
.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_danger_sm {
|
||||
padding: 5px 12px;
|
||||
color: $button-danger-fg-color;
|
||||
background-color: $notice-primary-color;
|
||||
background-color: $alert;
|
||||
}
|
||||
|
||||
.mx_AccessibleButton_kind_danger_sm.mx_AccessibleButton_disabled {
|
||||
|
|
@ -100,7 +100,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_AccessibleButton_kind_link {
|
||||
color: $accent-color;
|
||||
color: $accent;
|
||||
}
|
||||
|
||||
.mx_AccessibleButton_kind_link.mx_AccessibleButton_disabled {
|
||||
|
|
@ -109,7 +109,7 @@ limitations under the License.
|
|||
|
||||
.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_link_sm {
|
||||
padding: 5px 12px;
|
||||
color: $accent-color;
|
||||
color: $accent;
|
||||
}
|
||||
|
||||
.mx_AccessibleButton_kind_link_sm.mx_AccessibleButton_disabled {
|
||||
|
|
@ -117,7 +117,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_confirm_sm {
|
||||
background-color: $accent-color;
|
||||
background-color: $accent;
|
||||
|
||||
&::before {
|
||||
mask-image: url('$(res)/img/feather-customised/check.svg');
|
||||
|
|
@ -125,7 +125,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_cancel_sm {
|
||||
background-color: $notice-primary-color;
|
||||
background-color: $alert;
|
||||
|
||||
&::before {
|
||||
mask-image: url('$(res)/img/feather-customised/x.svg');
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ limitations under the License.
|
|||
max-height: 116px;
|
||||
overflow-y: auto;
|
||||
border-radius: 3px;
|
||||
border: solid 1px $accent-color;
|
||||
border: solid 1px $accent;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,8 +28,8 @@ limitations under the License.
|
|||
|
||||
.mx_AddressTile.mx_AddressTile_error {
|
||||
background-color: rgba(255, 0, 100, 0.1);
|
||||
color: $warning-color;
|
||||
border-color: $warning-color;
|
||||
color: $alert;
|
||||
border-color: $alert;
|
||||
}
|
||||
|
||||
.mx_AddressTile_network {
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ limitations under the License.
|
|||
&.mx_desktopCapturerSourcePicker_source_thumbnail_selected,
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-color: $accent-color;
|
||||
border-color: $accent;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_DirectorySearchBox_clear {
|
||||
background-color: $warning-color;
|
||||
background-color: $alert;
|
||||
mask: url('$(res)/img/cancel.svg');
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ limitations under the License.
|
|||
height: 14px;
|
||||
mask-image: url('$(res)/img/feather-customised/cancel.svg');
|
||||
mask-repeat: no-repeat;
|
||||
background-color: $warning-color;
|
||||
background-color: $alert;
|
||||
mask-size: 100%;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_EventListSummary_toggle {
|
||||
color: $accent-color;
|
||||
color: $accent;
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
margin-right: 10px;
|
||||
|
|
|
|||
|
|
@ -152,24 +152,24 @@ limitations under the License.
|
|||
.mx_Field_valid {
|
||||
&.mx_Field,
|
||||
&.mx_Field:focus-within {
|
||||
border-color: $accent-color;
|
||||
border-color: $accent;
|
||||
}
|
||||
|
||||
&.mx_Field label,
|
||||
&.mx_Field:focus-within label {
|
||||
color: $accent-color;
|
||||
color: $accent;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_Field_invalid {
|
||||
&.mx_Field,
|
||||
&.mx_Field:focus-within {
|
||||
border-color: $warning-color;
|
||||
border-color: $alert;
|
||||
}
|
||||
|
||||
&.mx_Field label,
|
||||
&.mx_Field:focus-within label {
|
||||
color: $warning-color;
|
||||
color: $alert;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ limitations under the License.
|
|||
font-size: 10pt;
|
||||
line-height: 1.5em;
|
||||
border-radius: 5px;
|
||||
background-color: $accent-color;
|
||||
background-color: $accent;
|
||||
color: $accent-fg-color;
|
||||
text-align: center;
|
||||
z-index: 1000;
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ progress.mx_ProgressBar {
|
|||
border: none;
|
||||
|
||||
@mixin ProgressBarBorderRadius 6px;
|
||||
@mixin ProgressBarColour $accent-color;
|
||||
@mixin ProgressBarColour $accent;
|
||||
@mixin ProgressBarBgColour $progressbar-bg-color;
|
||||
::-webkit-progress-value {
|
||||
transition: width 1s;
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ limitations under the License.
|
|||
margin-right: 0;
|
||||
margin-bottom: 8px;
|
||||
padding: 0 10px;
|
||||
border-left: 2px solid $accent-color;
|
||||
border-left: 2px solid $accent;
|
||||
border-radius: 2px;
|
||||
|
||||
.mx_ReplyChain_show {
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ a.mx_Pill {
|
|||
}
|
||||
|
||||
.mx_UserPill_selected {
|
||||
background-color: $accent-color !important;
|
||||
background-color: $accent !important;
|
||||
}
|
||||
|
||||
/* More specific to override `.markdown-body a` color */
|
||||
|
|
@ -57,7 +57,7 @@ a.mx_Pill {
|
|||
.mx_EventTile_content .mx_AtRoomPill,
|
||||
.mx_MessageComposer_input .mx_AtRoomPill {
|
||||
color: $accent-fg-color;
|
||||
background-color: $warning-color;
|
||||
background-color: $alert;
|
||||
}
|
||||
|
||||
/* More specific to override `.markdown-body a` color */
|
||||
|
|
|
|||
|
|
@ -46,13 +46,13 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_SSOButton_default {
|
||||
color: $accent-color;
|
||||
color: $accent;
|
||||
background-color: $button-secondary-bg-color;
|
||||
border-color: $accent-color;
|
||||
border-color: $accent;
|
||||
}
|
||||
.mx_SSOButton_default.mx_SSOButton_primary {
|
||||
color: $button-primary-fg-color;
|
||||
background-color: $accent-color;
|
||||
background-color: $accent;
|
||||
}
|
||||
|
||||
.mx_SSOButton_mini {
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ limitations under the License.
|
|||
position: absolute;
|
||||
width: $slider-selection-dot-size;
|
||||
height: $slider-selection-dot-size;
|
||||
background-color: $accent-color;
|
||||
background-color: $accent;
|
||||
border-radius: 50%;
|
||||
z-index: 10;
|
||||
}
|
||||
|
|
@ -72,7 +72,7 @@ limitations under the License.
|
|||
|
||||
.mx_Slider_selection > hr {
|
||||
margin: 0;
|
||||
border: 0.2em solid $accent-color;
|
||||
border: 0.2em solid $accent;
|
||||
}
|
||||
|
||||
.mx_Slider_dot {
|
||||
|
|
@ -84,7 +84,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_Slider_dotActive {
|
||||
background-color: $accent-color;
|
||||
background-color: $accent;
|
||||
}
|
||||
|
||||
.mx_Slider_dotValue {
|
||||
|
|
|
|||
|
|
@ -87,18 +87,18 @@ limitations under the License.
|
|||
}
|
||||
|
||||
&:checked + label > .mx_Checkbox_background {
|
||||
background: $accent-color;
|
||||
border-color: $accent-color;
|
||||
background: $accent;
|
||||
border-color: $accent;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_Checkbox.mx_Checkbox_kind_outline input[type=checkbox] {
|
||||
& + label > .mx_Checkbox_background .mx_Checkbox_checkmark {
|
||||
background: $accent-color;
|
||||
background: $accent;
|
||||
}
|
||||
|
||||
&:checked + label > .mx_Checkbox_background {
|
||||
background: transparent;
|
||||
border-color: $accent-color;
|
||||
border-color: $accent;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ limitations under the License.
|
|||
|
||||
.mx_StyledRadioButton {
|
||||
$radio-circle-color: $quaternary-content;
|
||||
$active-radio-circle-color: $accent-color;
|
||||
$active-radio-circle-color: $accent;
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
|
|
@ -126,5 +126,5 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_StyledRadioButton_checked {
|
||||
border-color: $accent-color;
|
||||
border-color: $accent;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_ToggleSwitch.mx_ToggleSwitch_on {
|
||||
background-color: $accent-color;
|
||||
background-color: $accent;
|
||||
|
||||
> .mx_ToggleSwitch_ball {
|
||||
left: calc(100% - $font-20px);
|
||||
|
|
|
|||
|
|
@ -50,20 +50,20 @@ limitations under the License.
|
|||
}
|
||||
|
||||
&.mx_Validation_valid {
|
||||
color: $accent-color;
|
||||
color: $accent;
|
||||
|
||||
&::before {
|
||||
mask-image: url('$(res)/img/feather-customised/check.svg');
|
||||
background-color: $accent-color;
|
||||
background-color: $accent;
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_Validation_invalid {
|
||||
color: $warning-color;
|
||||
color: $alert;
|
||||
|
||||
&::before {
|
||||
mask-image: url('$(res)/img/feather-customised/x.svg');
|
||||
background-color: $warning-color;
|
||||
background-color: $alert;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue