Integrate thread panel's header style declarations with those of BaseCard (#8651)

* Variable on mx_BaseCard_Header

- Use a variable for margin of buttons on mx_BaseCard_header
- Reduce default margin instead of setting negative left and right values
- Set margin to span in order to ensure spacing between the back button and the span (6px: 30px - 24px)

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

* Use the same variable to the mask button

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

* Use spacing variables

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

* Remove obsolete declarations - mx_ThreadPanel_button

mx_ThreadPanel_button does not seem to be used anywhere.

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
This commit is contained in:
Suguru Hirahara 2022-05-23 07:42:48 +00:00 committed by GitHub
parent 5446d5d6ba
commit 67b0078b33
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 38 deletions

View file

@ -25,7 +25,9 @@ limitations under the License.
flex: 1;
.mx_BaseCard_header {
margin: 4px 0;
--BaseCard_header_button-margin: $spacing-12;
margin: $spacing-4 0;
> h2 {
margin: 0 44px;
@ -36,12 +38,13 @@ limitations under the License.
white-space: nowrap;
}
.mx_BaseCard_back, .mx_BaseCard_close {
.mx_BaseCard_back,
.mx_BaseCard_close {
position: absolute;
background-color: rgba(141, 151, 165, 0.2);
height: 20px;
width: 20px;
margin: 12px;
margin: var(--BaseCard_header_button-margin);
top: 0;
border-radius: 50%;