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