You've already forked matrix-react-sdk
mirror of
https://github.com/matrix-org/matrix-react-sdk.git
synced 2025-07-31 13:44:28 +03:00
extract reusable styled live beacon icon (#8103)
* extract reusable styles live beacon icon Signed-off-by: Kerry Archibald <kerrya@element.io> * add secondary live lcation color Signed-off-by: Kerry Archibald <kerrya@element.io>
This commit is contained in:
30
res/css/components/views/beacon/_StyledLiveBeaconIcon.scss
Normal file
30
res/css/components/views/beacon/_StyledLiveBeaconIcon.scss
Normal file
@ -0,0 +1,30 @@
|
||||
/*
|
||||
Copyright 2022 The Matrix.org Foundation C.I.C.
|
||||
|
||||
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_StyledLiveBeaconIcon {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
box-sizing: border-box;
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
|
||||
background-color: $location-live-color;
|
||||
border-color: $location-live-secondary-color;
|
||||
padding: 2px;
|
||||
// colors icon
|
||||
color: white;
|
||||
}
|
@ -83,19 +83,12 @@ limitations under the License.
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
|
||||
// Live is styled by StyledLiveBeaconIcon
|
||||
|
||||
&.Own {
|
||||
border-color: $accent;
|
||||
}
|
||||
|
||||
&.Live {
|
||||
background-color: $location-live-color;
|
||||
// 20% brightness $location-live-color
|
||||
border-color: #deddfd;
|
||||
padding: 2px;
|
||||
// colors icon
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.Pin {
|
||||
border-color: $accent;
|
||||
background-color: $accent;
|
||||
|
Reference in New Issue
Block a user