Module: Tabs/styles.css
(align-items: baseline, so line height doesn't spoil the alignment of the coloured bars) |
(increase line height so when the tabs wrap on a narrow screen they have a bit of vertical space between then) |
||
| Line 6: | Line 6: | ||
margin: auto; | margin: auto; | ||
font-size: 1.2em; | font-size: 1.2em; | ||
line-height: 2em; | |||
padding: 2em 0; | padding: 2em 0; | ||
} | } | ||
Latest revision as of 08:21, 18 April 2024
.mdl-tabs {
display: flex;
justify-content: center;
align-items: baseline;
flex-wrap: wrap;
margin: auto;
font-size: 1.2em;
line-height: 2em;
padding: 2em 0;
}
.mdl-tabs-tab a {
border-bottom: 8px solid #2e4e67;
text-align: center;
margin: 0 12px;
padding: 0 24px;
}
.mdl-tabs-tab:nth-child(1) a {
border-color: #2a4b8d;
}
.mdl-tabs-tab:nth-child(2) a {
border-color: #b32424;
}
.mdl-tabs-tab:nth-child(3) a {
border-color: #14866d;
}
.mdl-tabs-tab:nth-child(4) a {
border-color: #ac6600;
}
.mdl-tabs-tab:nth-child(5) a {
border-color: #72777d;
}