OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Organize style rules of ThreadPanel header (#8672) 

* Move declarations for ThreadPanel_dropdown to '.ThreadPanel__header'

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

* Move declarations under '.mx_ThreadPanel_dropdown'

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

* Move '~ .mx_ThreadPanel__header'

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

* Move '.mx_ThreadPanel__header' under '.mx_BaseCard_header'

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

* Use spacing variables for dropdown

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

* yarn run link:style --fix

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
pull/28217/head
Suguru Hirahara 2022-06-08 08:22:43 +00:00 committed by GitHub
parent abd39c61b1
commit 46f07a8edb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 57 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
res/css/views/right_panel/_ThreadPanel.scss
View File

@ -33,53 +33,76 @@ limitations under the License.
.mx_BaseCard_back { .mx_BaseCard_back {
margin-inline-start: calc(var(--BaseCard_header_button-margin) - 4px); margin-inline-start: calc(var(--BaseCard_header_button-margin) - 4px);
~ .mx_ThreadPanel__header {
width: calc(100% - 60px);
margin-inline-start: var(--ThreadPanel_header-button-size);
span {
margin-inline-start: 6px;
}
}
} }
.mx_BaseCard_close { .mx_BaseCard_close {
margin-inline-end: calc(var(--BaseCard_header_button-margin) - 4px); margin-inline-end: calc(var(--BaseCard_header_button-margin) - 4px);
} }
}
.mx_BaseCard_back ~ .mx_ThreadPanel__header { .mx_ThreadPanel__header {
width: calc(100% - 60px); width: calc(100% - 38px);
margin-inline-start: var(--ThreadPanel_header-button-size); height: 24px;
display: flex;
flex: 1;
justify-content: space-between;
align-items: center;
span { span:first-of-type {
margin-inline-start: 6px; font-weight: 600;
} font-size: 15px;
} line-height: 18px;
color: $secondary-content;
}
.mx_ThreadPanel__header { .mx_AccessibleButton {
width: calc(100% - 38px); font-size: 12px;
height: 24px; color: $secondary-content;
display: flex; }
flex: 1;
justify-content: space-between;
align-items: center;
span:first-of-type { .mx_MessageActionBar_optionsButton {
font-weight: 600; position: relative;
font-size: 15px; }
line-height: 18px;
color: $secondary-content;
}
.mx_AccessibleButton { .mx_MessageActionBar_maskButton {
font-size: 12px; width: var(--ThreadPanel_header-button-size);
color: $secondary-content; height: var(--ThreadPanel_header-button-size);
}
.mx_MessageActionBar_optionsButton { &::after {
position: relative; mask-size: var(--ThreadPanel_header-button-size);
} mask-image: url("$(res)/img/element-icons/message/overflow-large.svg");
}
}
.mx_MessageActionBar_maskButton { .mx_ThreadPanel_dropdown {
width: var(--ThreadPanel_header-button-size); padding: 3px $spacing-4 3px $spacing-8; // TODO: Use a spacing variable
height: var(--ThreadPanel_header-button-size); border-radius: 4px;
line-height: 1.5;
user-select: none;
&::after { &:hover,
mask-size: var(--ThreadPanel_header-button-size); &[aria-expanded=true] {
mask-image: url("$(res)/img/element-icons/message/overflow-large.svg"); background: $quinary-content;
}
&::before {
content: "";
width: 18px;
height: 18px;
background: currentColor;
mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
mask-size: 100%;
mask-repeat: no-repeat;
float: right;
}
} }
} }
} }
@ -179,29 +202,6 @@ limitations under the License.
box-sizing: border-box; box-sizing: border-box;
} }
.mx_ThreadPanel_dropdown {
padding: 3px 4px 3px 8px;
border-radius: 4px;
line-height: 1.5;
user-select: none;
}
.mx_ThreadPanel_dropdown:hover,
.mx_ThreadPanel_dropdown[aria-expanded=true] {
background: $quinary-content;
}
.mx_ThreadPanel_dropdown::before {
content: "";
width: 18px;
height: 18px;
background: currentColor;
mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
mask-size: 100%;
mask-repeat: no-repeat;
float: right;
}
.mx_MessageTimestamp { .mx_MessageTimestamp {
font-size: $font-12px; font-size: $font-12px;
color: $secondary-content; color: $secondary-content;