Skip to content

Commit c640857

Browse files
authored
MDCMigration: Style Settings button and Plugin picker for MDC migration. (#6618)
Style the "settings" button and the "scalars | images | histograms" plugin chooser button. We can do this by adjusting the global styles we recently introduced, meaning that other buttons we add in the future will also adhere to these styles: 1. Set letter-spacing to normal for all button text. 2. Reuse the .mat-icon styling we introduced even for non icon-button buttons. Sample screenshot: ![image](https://github.com/tensorflow/tensorboard/assets/17152369/23c3ecda-93d3-4c73-8774-03379e2f802c)
1 parent 5663200 commit c640857

File tree

1 file changed

+13
-11
lines changed

1 file changed

+13
-11
lines changed

Diff for: tensorboard/webapp/theme/_tb_theme.template.scss

+13-11
Original file line numberDiff line numberDiff line change
@@ -294,30 +294,32 @@ $tb-dark-theme: map_merge(
294294
body,
295295
body.dark-mode {
296296
a,
297-
button {
297+
button.mat-mdc-button-base {
298+
--tb-icon-size: 24px;
299+
--mdc-typography-button-letter-spacing: normal;
300+
298301
&[mat-icon-button].mat-mdc-icon-button {
299302
width: 40px;
300303
height: 40px;
301304
display: inline-flex;
302305
justify-content: center;
303306
align-items: center;
304-
--tb-icon-size: 24px;
305307

306308
.mat-mdc-button-touch-target {
307309
height: 100%;
308310
width: 100%;
309311
}
312+
}
310313

311-
mat-icon.mat-icon {
312-
flex-shrink: 0;
313-
}
314+
mat-icon.mat-icon {
315+
flex-shrink: 0;
316+
}
314317

315-
mat-icon.mat-icon,
316-
svg {
317-
width: var(--tb-icon-size);
318-
height: var(--tb-icon-size);
319-
line-height: var(--tb-icon-size);
320-
}
318+
mat-icon.mat-icon,
319+
svg {
320+
width: var(--tb-icon-size);
321+
height: var(--tb-icon-size);
322+
line-height: var(--tb-icon-size);
321323
}
322324
}
323325
}

0 commit comments

Comments
 (0)