Content-Length: 4365 | pFad | http://www.weather.gov/css/tabs.css
ad /* ----------------------------------------------------------------------------- FONTS ----------------------------------------------------------------------------- */ @font-face { font-family: 'Oxygen'; font-style: normal; font-weight: 300; src: url("./fonts/oxygen/oxygen-v5-latin-300.eot"); src: local("Oxygen Light"), local("Oxygen-Light"), url("./fonts/oxygen/oxygen-v5-latin-300.eot?#iefix") format("embedded-opentype"), url("./fonts/oxygen/oxygen-v5-latin-300.woff2") format("woff2"), url("./fonts/oxygen/oxygen-v5-latin-300.woff") format("woff"), url("./fonts/oxygen/oxygen-v5-latin-300.ttf") format("truetype"), url("./fonts/oxygen/oxygen-v5-latin-300.svg#Oxygen") format("svg"); } @font-face { font-family: 'Oxygen'; font-style: normal; font-weight: 400; src: url("./fonts/oxygen/oxygen-v5-latin-regular.eot"); src: local("Oxygen"), local("Oxygen-Regular"), url("./fonts/oxygen/oxygen-v5-latin-regular.eot?#iefix") format("embedded-opentype"), url("./fonts/oxygen/oxygen-v5-latin-regular.woff2") format("woff2"), url("./fonts/oxygen/oxygen-v5-latin-regular.woff") format("woff"), url("./fonts/oxygen/oxygen-v5-latin-regular.ttf") format("truetype"), url("./fonts/oxygen/oxygen-v5-latin-regular.svg#Oxygen") format("svg"); } @font-face { font-family: 'Oxygen'; font-style: normal; font-weight: 700; src: url("./fonts/oxygen/oxygen-v5-latin-700.eot"); src: local("Oxygen Bold"), local("Oxygen-Bold"), url("./fonts/oxygen/oxygen-v5-latin-700.eot?#iefix") format("embedded-opentype"), url("./fonts/oxygen/oxygen-v5-latin-700.woff2") format("woff2"), url("./fonts/oxygen/oxygen-v5-latin-700.woff") format("woff"), url("./fonts/oxygen/oxygen-v5-latin-700.ttf") format("truetype"), url("./fonts/oxygen/oxygen-v5-latin-700.svg#Oxygen") format("svg"); } /* ----------------------------------------------------------------------------- TABS COMPONENT ----------------------------------------------------------------------------- */ /** * Tabs component * * A responsive tabs component that falls back to a linear conent display when * JavaScript is disabled. The following is the default suggested markup to play * nicely with the JavaScript. If you change it up, just make sure you pass in * the correct parameters to the tabs instance. * * */ .c-tabs { font-family: "Oxygen", Helvetica, sans-serif; font-size: 14px; line-height: 1.8; } /** * Tabs navigation */ .c-tabs-nav { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; list-style: none; margin: 0; padding: 0; } .c-tabs-nav__link { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; margin-right: 4px; padding: 12px; color: #0071bc; cursor: pointer; background-color: #FFFFFF; border-bottom:1px solid #0071bc; text-align: center; -webkit-transition: color 0.3s; transition: color 0.3s; } .c-tabs-nav__link:last-child { margin-right: 0; } .c-tabs-nav__link:hover { color: #9bdaf1; } .c-tabs-nav__link.is-active { color: #FFF; background-color: #0071bc; } .c-tabs-nav__link i, .c-tabs-nav__link span { margin: 0; padding: 0; line-height: 1; } .c-tabs-nav__link i { font-size: 18px; } .c-tabs-nav__link span { display: none; font-size: 18px; } @media all and (min-width: 720px) { .c-tabs-nav__link i { margin-bottom: 12px; font-size: 22px; } .c-tabs-nav__link span { display: block; } } /** * Tab */ .c-tab { display: none; background-color: #FFFFFF; } .c-tab.is-active { display: block; } .c-tab__content { padding: 1.5rem; } /** * Tabs no-js fallback */ .c-tabs.no-js .c-tabs-nav { display: none; } .c-tabs.no-js .c-tab { display: block; margin-bottom: 1.5rem; } .c-tabs.no-js .c-tab:last-child { margin-bottom: 0; }Fetched URL: http://www.weather.gov/css/tabs.css
Alternative Proxies: