Module: Tabs/styles.css
No edit summary |
(increase line height so when the tabs wrap on a narrow screen they have a bit of vertical space between then) |
||
(2 intermediate revisions by the same user not shown) | |||
Line 2: | Line 2: | ||
display: flex; | display: flex; | ||
justify-content: center; | justify-content: center; | ||
align-items: baseline; | |||
flex-wrap: wrap; | flex-wrap: wrap; | ||
margin: auto; | margin: auto; | ||
font-size: 1.2em; | font-size: 1.2em; | ||
line-height: 2em; | |||
padding: 2em 0; | padding: 2em 0; | ||
} | } | ||
Line 10: | Line 12: | ||
border-bottom: 8px solid #2e4e67; | border-bottom: 8px solid #2e4e67; | ||
text-align: center; | text-align: center; | ||
margin: 0 | margin: 0 12px; | ||
padding: 0 | padding: 0 24px; | ||
} | } | ||
.mdl-tabs-tab:nth-child(1) a { | .mdl-tabs-tab:nth-child(1) a { |
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;
}