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

Use MessageActionBar style declarations on pinned message card (#8757)

Browse source 
* Refer mx_MessageActionBar on pinned messages card

Normalize mx_MessageActionBar style rules

- Allow the varaible (--MessageActionBar-size-button) to be used
- Remove redundant declarations

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Use variables for normalization

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Set class name

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Readd the comment

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Use Heading size='h4'

- Use size='h4' instead of 'h2' as 15px has been specified as the font-size of the header
- Use logical values following _Heading.scss
- Remove line-height declaration in favor of the default value

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
This commit is contained in:
Suguru Hirahara 2022-06-08 10:52:25 +00:00 • committed by GitHub
parent 911150846e
commit 36f2f3e2ce
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 25 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

9
res/css/views/messages/_MessageActionBar.scss
View file

@ -18,6 +18,9 @@ limitations under the License.
.mx_MessageActionBar {
--MessageActionBar-size-button: 28px;
--MessageActionBar-size-box: 32px; // 28px + 2px (margin) * 2
--MessageActionBar-item-hover-background: $panel-actions;
--MessageActionBar-item-hover-borderRadius: 6px;
--MessageActionBar-item-hover-zIndex: 1;
position: absolute;
visibility: hidden;
@ -59,9 +62,9 @@ limitations under the License.
margin: 2px;
&:hover {
background: $panel-actions;
border-radius: 6px;
z-index: 1;
background: var(--MessageActionBar-item-hover-background);
border-radius: var(--MessageActionBar-item-hover-borderRadius);
z-index: var(--MessageActionBar-item-hover-zIndex);
}
}
}

36
res/css/views/right_panel/_PinnedMessagesCard.scss
View file

@ -33,37 +33,33 @@ limitations under the License.
}
}
.mx_PinnedMessagesCard_empty {
.mx_PinnedMessagesCard_empty_wrapper {
display: flex;
height: 100%;
> div {
.mx_PinnedMessagesCard_empty {
height: max-content;
text-align: center;
margin: auto 40px;
.mx_PinnedMessagesCard_MessageActionBar {
pointer-events: none;
display: flex;
height: 32px;
line-height: $font-24px;
border-radius: 8px;
background: $background;
border: 1px solid $input-border-color;
padding: 1px;
width: max-content;
margin: 0 auto;
box-sizing: border-box;
.mx_MessageActionBar_maskButton {
display: inline-block;
position: relative;
// Cancel the default values for non-interactivity
position: unset;
visibility: visible;
cursor: unset;
&::before {
content: unset;
}
.mx_MessageActionBar_optionsButton {
background: $panel-actions;
border-radius: 6px;
z-index: 1;
background: var(--MessageActionBar-item-hover-background);
border-radius: var(--MessageActionBar-item-hover-borderRadius);
z-index: var(--MessageActionBar-item-hover-zIndex);
&::after {
background-color: $primary-content;
@ -71,13 +67,9 @@ limitations under the License.
}
}
> h2 {
font-weight: $font-semi-bold;
font-size: $font-15px;
line-height: $font-24px;
.mx_PinnedMessagesCard_empty_header {
color: $primary-content;
margin-top: 24px;
margin-bottom: 20px;
margin-block: $spacing-24 $spacing-20;
}
> span {