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 {
|
.mx_BaseCard_back {
|
||||||
margin-inline-start: calc(var(--BaseCard_header_button-margin) - 4px);
|
margin-inline-start: calc(var(--BaseCard_header_button-margin) - 4px);
|
||||||
}
|
|
||||||
|
|
||||||
.mx_BaseCard_close {
|
~ .mx_ThreadPanel__header {
|
||||||
margin-inline-end: calc(var(--BaseCard_header_button-margin) - 4px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.mx_BaseCard_back ~ .mx_ThreadPanel__header {
|
|
||||||
width: calc(100% - 60px);
|
width: calc(100% - 60px);
|
||||||
margin-inline-start: var(--ThreadPanel_header-button-size);
|
margin-inline-start: var(--ThreadPanel_header-button-size);
|
||||||
|
|
||||||
|
@ -48,6 +42,11 @@ limitations under the License.
|
||||||
margin-inline-start: 6px;
|
margin-inline-start: 6px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mx_BaseCard_close {
|
||||||
|
margin-inline-end: calc(var(--BaseCard_header_button-margin) - 4px);
|
||||||
|
}
|
||||||
|
|
||||||
.mx_ThreadPanel__header {
|
.mx_ThreadPanel__header {
|
||||||
width: calc(100% - 38px);
|
width: calc(100% - 38px);
|
||||||
|
@ -82,6 +81,30 @@ limitations under the License.
|
||||||
mask-image: url("$(res)/img/element-icons/message/overflow-large.svg");
|
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,
|
.mx_AutoHideScrollbar,
|
||||||
|
@ -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;
|
||||||
|
|
Loading…
Reference in New Issue