imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Replace Sass variables with custom properties - mx_Indicator (#10808)

Browse source
This commit is contained in:
Suguru Hirahara 2023-05-16 10:12:45 +00:00 • committed by GitHub
parent 9bab356e20
commit ae692f712a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 16 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

16
res/css/structures/_RightPanel.pcss
View file

@ -82,10 +82,6 @@ limitations under the License.
mask-position: center; mask-position: center;
} }
$dot-size: 8px;
$dot-offset: -3px;
$pulse-color: $alert;
.mx_RightPanel_pinnedMessagesButton { .mx_RightPanel_pinnedMessagesButton {
&::before { &::before {
mask-image: url("$(res)/img/element-icons/room/pin.svg"); mask-image: url("$(res)/img/element-icons/room/pin.svg");
@ -95,11 +91,11 @@ $pulse-color: $alert;
.mx_RightPanel_headerButton_unreadIndicator_bg { .mx_RightPanel_headerButton_unreadIndicator_bg {
position: absolute; position: absolute;
right: $dot-offset; right: var(--RoomHeader-indicator-dot-offset);
top: $dot-offset; top: var(--RoomHeader-indicator-dot-offset);
margin: 4px; margin: 4px;
width: $dot-size; width: var(--RoomHeader-indicator-dot-size);
height: $dot-size; height: var(--RoomHeader-indicator-dot-size);
border-radius: 50%; border-radius: 50%;
transform: scale(1.6); transform: scale(1.6);
transform-origin: center center; transform-origin: center center;
@ -108,8 +104,8 @@ $pulse-color: $alert;
.mx_RightPanel_headerButton_unreadIndicator { .mx_RightPanel_headerButton_unreadIndicator {
position: absolute; position: absolute;
right: $dot-offset; right: var(--RoomHeader-indicator-dot-offset);
top: $dot-offset; top: var(--RoomHeader-indicator-dot-offset);
margin: 4px; margin: 4px;
&.mx_Indicator_red { &.mx_Indicator_red {

8
res/css/structures/_RoomView.pcss
View file

@ -262,12 +262,12 @@ limitations under the License.
position: absolute; position: absolute;
right: -3px; right: -3px;
top: -3px; top: -3px;
width: $dot-size; width: var(--RoomHeader-indicator-dot-size);
height: $dot-size; height: var(--RoomHeader-indicator-dot-size);
border-radius: 50%; border-radius: 50%;
transform: scale(1); transform: scale(1);
background: rgba($pulse-color, 1); background: rgba(var(--RoomHeader-indicator-pulseColor), 1);
box-shadow: 0 0 0 0 rgba($pulse-color, 1); box-shadow: 0 0 0 0 rgba(var(--RoomHeader-indicator-pulseColor), 1);
animation: mx_Indicator_pulse 2s infinite; animation: mx_Indicator_pulse 2s infinite;
animation-iteration-count: 1; animation-iteration-count: 1;

6
res/css/views/rooms/_RoomHeader.pcss
View file

@ -14,6 +14,12 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
:root {
--RoomHeader-indicator-dot-size: 8px;
--RoomHeader-indicator-dot-offset: -3px;
--RoomHeader-indicator-pulseColor: $alert;
}
.mx_RoomHeader { .mx_RoomHeader {
flex: 0 0 50px; flex: 0 0 50px;
border-bottom: 1px solid $primary-hairline-color; border-bottom: 1px solid $primary-hairline-color;