stylie.tabs
Version:
100% width tabbed content with some example media queries for smaller screens.
225 lines (192 loc) • 4.82 kB
text/less
@import "../../node_modules/stylie/resources/stylesheets/stylie.less";
/* General Blueprint Style */
/*@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);*/
// @font-face {
// font-family: 'bpicons';
// src:url('../fonts/bpicons/bpicons.eot');
// src:url('../fonts/bpicons/bpicons.eot?#iefix') format('embedded-opentype'),
// url('../fonts/bpicons/bpicons.woff') format('woff'),
// url('../fonts/bpicons/bpicons.ttf') format('truetype'),
// url('../fonts/bpicons/bpicons.svg#bpicons') format('svg');
// font-weight: normal;
// font-style: normal;
// } /* Made with http://icomoon.io/ */
// @font-face {
// font-family: 'icomoon';
// src:url('../fonts/icomoon/icomoon.eot?pvm5gj');
// src:url('../fonts/icomoon/icomoon.eot?#iefixpvm5gj') format('embedded-opentype'),
// url('../fonts/icomoon/icomoon.woff?pvm5gj') format('woff'),
// url('../fonts/icomoon/icomoon.ttf?pvm5gj') format('truetype'),
// url('../fonts/icomoon/icomoon.svg?pvm5gj#icomoon') format('svg');
// font-weight: normal;
// font-style: normal;
// } /* Icons created with icomoon.io/app */
// *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
// body, html { font-size: 100%; padding: 0; margin: 0;}
// Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/
// .clearfix:before, .clearfix:after { content: " "; display: table; }
// .clearfix:after { clear: both; }
// body {
// font-family: 'Lato', Calibri, Arial, sans-serif;
// color: #47a3da;
// }
// a {
// color: #ccc;
// text-decoration: none;
// outline: none;
// }
// a:hover {
// color: #000;
// }
// .container > header {
// width: 90%;
// max-width: 69em;
// margin: 0 auto;
// padding: 2.875em 1.875em 1.875em;
// }
// .container > header h1 {
// font-size: 2.125em;
// line-height: 1.3;
// margin: 0 0 0.6em 0;
// float: left;
// font-weight: 400;
// width:100%;
// }
// .container > header > span {
// display: block;
// position: relative;
// z-index: 9999;
// font-weight: 700;
// text-transform: uppercase;
// letter-spacing: 0.5em;
// padding: 0 0 0.6em 0.1em;
// }
// .container > header > span span:after {
// width: 30px;
// height: 30px;
// left: -12px;
// font-size: 50%;
// top: -8px;
// font-size: 75%;
// position: relative;
// }
// .container > header > span span:hover:before {
// content: attr(data-content);
// text-transform: none;
// text-indent: 0;
// letter-spacing: 0;
// font-weight: 300;
// font-size: 110%;
// padding: 0.8em 1em;
// line-height: 1.2;
// text-align: left;
// left: auto;
// margin-left: 4px;
// position: absolute;
// color: #fff;
// background: #47a3da;
// }
// .container > header nav {
// float: right;
// text-align: center;
// }
// .container > header nav a {
// display: inline-block;
// position: relative;
// text-align: left;
// width: 2.5em;
// height: 2.5em;
// background: #fff;
// border-radius: 50%;
// margin: 0 0.1em;
// border: 4px solid #47a3da;
// }
// .container > header nav a > span {
// display: none;
// }
// .container > header nav a:hover:before {
// content: attr(data-info);
// color: #47a3da;
// position: absolute;
// width: 600%;
// top: 120%;
// text-align: right;
// right: 0;
// pointer-events: none;
// }
// .container > header nav a:hover {
// background: #47a3da;
// }
// .bp-icon:after {
// font-family: 'bpicons';
// speak: none;
// font-style: normal;
// font-weight: normal;
// font-variant: normal;
// text-transform: none;
// text-align: center;
// color: #47a3da;
// -webkit-font-smoothing: antialiased;
// }
// .container > header nav .bp-icon:after {
// position: absolute;
// top: 0;
// left: 0;
// width: 100%;
// height: 100%;
// line-height: 2;
// text-indent: 0;
// }
// .container > header nav a:hover:after {
// color: #fff;
// }
// .bp-icon-next:after {
// content: "\e000";
// }
// .bp-icon-drop:after {
// content: "\e001";
// }
// .bp-icon-archive:after {
// content: "\e002";
// }
// .bp-icon-about:after {
// content: "\e003";
// }
// .bp-icon-prev:after {
// content: "\e004";
// }
// .icon-food:before {
// content: "\e600";
// }
// .icon-lab:before {
// content: "\e601";
// }
// .icon-cup:before {
// content: "\e602";
// }
// .icon-truck:before {
// content: "\e603";
// }
// .icon-shop:before {
// content: "\e604";
// }
// p.info {
// text-align: center;
// padding: 20px;
// }
// @media screen and (max-width: 55em) {
// .container > header h1,
// .container > header nav {
// float: none;
// }
// .container > header > span,
// .container > header h1 {
// text-align: center;
// }
// .container > header nav {
// margin: 0 auto;
// }
// .container > header > span {
// text-indent: 30px;
// }
// }