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
parent
abd39c61b1
commit
46f07a8edb
|
@ -33,14 +33,8 @@ limitations under the License.
|
|||
|
||||
.mx_BaseCard_back {
|
||||
margin-inline-start: calc(var(--BaseCard_header_button-margin) - 4px);
|
||||
}
|
||||
|
||||
.mx_BaseCard_close {
|
||||
margin-inline-end: calc(var(--BaseCard_header_button-margin) - 4px);
|
||||
}
|
||||
}
|
||||
|
||||
.mx_BaseCard_back ~ .mx_ThreadPanel__header {
|
||||
~ .mx_ThreadPanel__header {
|
||||
width: calc(100% - 60px);
|
||||
margin-inline-start: var(--ThreadPanel_header-button-size);
|
||||
|
||||
|
@ -48,6 +42,11 @@ limitations under the License.
|
|||
margin-inline-start: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_BaseCard_close {
|
||||
margin-inline-end: calc(var(--BaseCard_header_button-margin) - 4px);
|
||||
}
|
||||
|
||||
.mx_ThreadPanel__header {
|
||||
width: calc(100% - 38px);
|
||||
|
@ -82,6 +81,30 @@ limitations under the License.
|
|||
mask-image: url("$(res)/img/element-icons/message/overflow-large.svg");
|
||||
}
|
||||
}
|
||||
|
||||
.mx_ThreadPanel_dropdown {
|
||||
padding: 3px $spacing-4 3px $spacing-8; // TODO: Use a spacing variable
|
||||
border-radius: 4px;
|
||||
line-height: 1.5;
|
||||
user-select: none;
|
||||
|
||||
&:hover,
|
||||
&[aria-expanded=true] {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_AutoHideScrollbar,
|
||||
|
@ -179,29 +202,6 @@ limitations under the License.
|
|||
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 {
|
||||
font-size: $font-12px;
|
||||
color: $secondary-content;
|
||||
|
|
Loading…
Reference in New Issue