From ed2e206aaca6c95816e799e67ab455ff5e71b7eb Mon Sep 17 00:00:00 2001 From: Jonathan Creamer Date: Fri, 3 Oct 2014 12:03:56 -0500 Subject: [PATCH 1/2] Change default of dropdown to hover --- css/barekit.css | 1099 +++++++++++++++++++++++++++++++++++- example.html | 2 +- js/barekit.min.js | 2 +- js/modules/dropdown-nav.js | 2 +- 4 files changed, 1096 insertions(+), 9 deletions(-) diff --git a/css/barekit.css b/css/barekit.css index be5273f..98f7dec 100644 --- a/css/barekit.css +++ b/css/barekit.css @@ -1,6 +1,1093 @@ -@charset "UTF-8";html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}input:focus,textarea:focus,.checkbox input[type="checkbox"]:focus+span:before,.radio input[type="radio"]:focus+span:before{outline:none;box-shadow:0 0 2px 2px #96c0e6}.left{float:left}.right{float:right}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}@media (min-width: 50em){.md-text-left{text-align:left}.md-text-center{text-align:center}.md-text-right{text-align:right}}@media (min-width: 64em){.lg-text-left{text-align:left}.lg-text-center{text-align:center}.lg-text-right{text-align:right}}.no-bullets{list-style:none;margin:0;padding:0}.clearfix:after,.row:after{content:"";display:table;clear:both}.show-md{display:none}@media (min-width: 50em){.show-md{display:block}} -.show-lg{display:none}@media (min-width: 64em){.show-lg{display:block}} -@media (min-width: 50em){.hide-md{display:none}} -@media (min-width: 64em){.hide-lg{display:none}} -/*! normalize.css v3.0.1 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;width:100%;height:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}.accordion dd{display:none}.accordion .accordion-panel--open{display:block}.dropdown-nav{list-style:none;margin:0;padding:0}.dropdown-nav li{position:relative;float:left}.dropdown-nav li ul{position:absolute;display:none;left:0;list-style:none;margin:0;padding:0}.dropdown-nav li:hover ul{display:block}.dropdown-nav li .dropdown--open{display:block}.dropdown-nav .dropdown-trigger--open:hover ul{display:block}.dropdown-nav .click-setting:hover ul{display:none}.dropdown-nav .click-setting:hover .dropdown--open{display:block}.checkbox,.radio{position:relative;padding-left:1.25em}.checkbox span:before,.radio span:before{content:"";position:absolute;left:0;line-height:1em;width:.813em;height:.813em;border:1px solid black}.checkbox input[type="checkbox"]{opacity:0;position:absolute}.checkbox input[type="checkbox"]:checked+span:before{content:"✓"}.radio input[type="radio"]{opacity:0;position:absolute}.radio input[type="radio"]:checked+span:after{background:black}.radio span:after{content:"";position:absolute;top:.188em;left:.188em;width:.438em;height:.438em;border-radius:50%}.radio span:before{border-radius:50%}.sm-1{width:8.33333%}.sm-1-half{width:12.5%}.sm-offset-1{margin-left:8.33333%}.sm-offset-1-half{margin-left:12.5%}.sm-2{width:16.66667%}.sm-2-half{width:20.83333%}.sm-offset-2{margin-left:16.66667%}.sm-offset-2-half{margin-left:20.83333%}.sm-3{width:25.0%}.sm-3-half{width:29.16667%}.sm-offset-3{margin-left:25.0%}.sm-offset-3-half{margin-left:29.16667%}.sm-4{width:33.33333%}.sm-4-half{width:37.5%}.sm-offset-4{margin-left:33.33333%}.sm-offset-4-half{margin-left:37.5%}.sm-5{width:41.66667%}.sm-5-half{width:45.83333%}.sm-offset-5{margin-left:41.66667%}.sm-offset-5-half{margin-left:45.83333%}.sm-6{width:50.0%}.sm-6-half{width:54.16667%}.sm-offset-6{margin-left:50.0%}.sm-offset-6-half{margin-left:54.16667%}.sm-7{width:58.33333%}.sm-7-half{width:62.5%}.sm-offset-7{margin-left:58.33333%}.sm-offset-7-half{margin-left:62.5%}.sm-8{width:66.66667%}.sm-8-half{width:70.83333%}.sm-offset-8{margin-left:66.66667%}.sm-offset-8-half{margin-left:70.83333%}.sm-9{width:75.0%}.sm-9-half{width:79.16667%}.sm-offset-9{margin-left:75.0%}.sm-offset-9-half{margin-left:79.16667%}.sm-10{width:83.33333%}.sm-10-half{width:87.5%}.sm-offset-10{margin-left:83.33333%}.sm-offset-10-half{margin-left:87.5%}.sm-11{width:91.66667%}.sm-11-half{width:95.83333%}.sm-offset-11{margin-left:91.66667%}.sm-offset-11-half{margin-left:95.83333%}.sm-12{width:100.0%}.sm-12-half{width:104.16667%}.sm-offset-12{margin-left:100.0%}.sm-offset-12-half{margin-left:104.16667%}@media (min-width: 50em){.md-1{width:8.33333%}.md-1-half{width:12.5%}.md-offset-1{margin-left:8.33333%}.md-offset-1-half{margin-left:12.5%}.md-2{width:16.66667%}.md-2-half{width:20.83333%}.md-offset-2{margin-left:16.66667%}.md-offset-2-half{margin-left:20.83333%}.md-3{width:25.0%}.md-3-half{width:29.16667%}.md-offset-3{margin-left:25.0%}.md-offset-3-half{margin-left:29.16667%}.md-4{width:33.33333%}.md-4-half{width:37.5%}.md-offset-4{margin-left:33.33333%}.md-offset-4-half{margin-left:37.5%}.md-5{width:41.66667%}.md-5-half{width:45.83333%}.md-offset-5{margin-left:41.66667%}.md-offset-5-half{margin-left:45.83333%}.md-6{width:50.0%}.md-6-half{width:54.16667%}.md-offset-6{margin-left:50.0%}.md-offset-6-half{margin-left:54.16667%}.md-7{width:58.33333%}.md-7-half{width:62.5%}.md-offset-7{margin-left:58.33333%}.md-offset-7-half{margin-left:62.5%}.md-8{width:66.66667%}.md-8-half{width:70.83333%}.md-offset-8{margin-left:66.66667%}.md-offset-8-half{margin-left:70.83333%}.md-9{width:75.0%}.md-9-half{width:79.16667%}.md-offset-9{margin-left:75.0%}.md-offset-9-half{margin-left:79.16667%}.md-10{width:83.33333%}.md-10-half{width:87.5%}.md-offset-10{margin-left:83.33333%}.md-offset-10-half{margin-left:87.5%}.md-11{width:91.66667%}.md-11-half{width:95.83333%}.md-offset-11{margin-left:91.66667%}.md-offset-11-half{margin-left:95.83333%}.md-12{width:100.0%}.md-12-half{width:104.16667%}.md-offset-12{margin-left:100.0%}.md-offset-12-half{margin-left:104.16667%}}@media (min-width: 64em){.lg-1{width:8.33333%}.lg-1-half{width:12.5%}.lg-offset-1{margin-left:8.33333%}.lg-offset-1-half{margin-left:12.5%}.lg-2{width:16.66667%}.lg-2-half{width:20.83333%}.lg-offset-2{margin-left:16.66667%}.lg-offset-2-half{margin-left:20.83333%}.lg-3{width:25.0%}.lg-3-half{width:29.16667%}.lg-offset-3{margin-left:25.0%}.lg-offset-3-half{margin-left:29.16667%}.lg-4{width:33.33333%}.lg-4-half{width:37.5%}.lg-offset-4{margin-left:33.33333%}.lg-offset-4-half{margin-left:37.5%}.lg-5{width:41.66667%}.lg-5-half{width:45.83333%}.lg-offset-5{margin-left:41.66667%}.lg-offset-5-half{margin-left:45.83333%}.lg-6{width:50.0%}.lg-6-half{width:54.16667%}.lg-offset-6{margin-left:50.0%}.lg-offset-6-half{margin-left:54.16667%}.lg-7{width:58.33333%}.lg-7-half{width:62.5%}.lg-offset-7{margin-left:58.33333%}.lg-offset-7-half{margin-left:62.5%}.lg-8{width:66.66667%}.lg-8-half{width:70.83333%}.lg-offset-8{margin-left:66.66667%}.lg-offset-8-half{margin-left:70.83333%}.lg-9{width:75.0%}.lg-9-half{width:79.16667%}.lg-offset-9{margin-left:75.0%}.lg-offset-9-half{margin-left:79.16667%}.lg-10{width:83.33333%}.lg-10-half{width:87.5%}.lg-offset-10{margin-left:83.33333%}.lg-offset-10-half{margin-left:87.5%}.lg-11{width:91.66667%}.lg-11-half{width:95.83333%}.lg-offset-11{margin-left:91.66667%}.lg-offset-11-half{margin-left:95.83333%}.lg-12{width:100.0%}.lg-12-half{width:104.16667%}.lg-offset-12{margin-left:100.0%}.lg-offset-12-half{margin-left:104.16667%}}.sm-half{width:4.16667%}.sm-offset-half{width:4.16667%}@media (min-width: 50em){.md-half{width:4.16667%}.md-offset-0{margin:0}.md-offset-half{margin-left:4.16667%}}@media (min-width: 64em){.lg-half{width:4.16667%}.lg-offset-0{margin-left:0}.lg-offset-half{margin-left:4.16667%}}.has-gutter{float:left;padding:0 10px}.row .row .has-gutter{padding:0}.modal{display:none}.modal-open{display:block;position:fixed;z-index:1;top:50%;right:0;left:0;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);margin:0 auto;width:100%;background:#fff}@media (min-width: 50em){.modal-open{width:50%}} -.modal-bg:after{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:#000;opacity:0.5}.off-canvas-contain{position:relative}.off-canvas-contain .off-canvas-left{left:-17.5em;transition:left .3s ease}.off-canvas-contain .off-canvas-right{right:-17.5em;transition:right .3s ease}.off-canvas-contain.off-canvas--open-left .off-canvas-left{left:0}.off-canvas-contain.off-canvas--open-left .off-canvas-left ~ .off-canvas-content{left:17.5em;right:auto}.off-canvas-contain.off-canvas--open-right .off-canvas-right{right:0}.off-canvas-contain.off-canvas--open-right .off-canvas-right ~ .off-canvas-content{left:-17.5em;right:17.5em}.off-canvas-left,.off-canvas-right{position:fixed;top:0;width:17.5em;height:100%;-webkit-transform:translateZ(0);transform:translateZ(0)}.off-canvas-content{position:relative;left:0;right:0;transition:left .3s ease, right .3s ease}.tabs-panels li{display:none}.tabs-panels .tab-panel--open{display:block}.toggle{display:none}.toggle-shown{display:block} +html { + -moz-box-sizing: border-box; + box-sizing: border-box; +} +*, +*:before, +*:after { + -moz-box-sizing: inherit; + box-sizing: inherit; +} +input:focus, +textarea:focus, +.checkbox input[type="checkbox"]:focus + span:before, +.radio input[type="radio"]:focus + span:before { + outline: none; + box-shadow: 0 0 2px 2px #96c0e6; +} +.left { + float: left; +} +.right { + float: right; +} +.text-left { + text-align: left; +} +.text-center { + text-align: center; +} +.text-right { + text-align: right; +} +@media (min-width: 50em) { + .md-text-left { + text-align: left; + } + .md-text-center { + text-align: center; + } + .md-text-right { + text-align: right; + } +} +@media (min-width: medium) { + .md-text-left { + text-align: left; + } + .md-text-center { + text-align: center; + } + .md-text-right { + text-align: right; + } +} +@media (min-width: 64em) { + .lg-text-left { + text-align: left; + } + .lg-text-center { + text-align: center; + } + .lg-text-right { + text-align: right; + } +} +.no-bullets { + list-style: none; + margin: 0; + padding: 0; +} +.clearfix:after, +.row:after { + content: ""; + display: table; + clear: both; +} +.show-md { + display: none; +} +@media (min-width: 50em) { + .show-md { + display: block; + } +} +@media (min-width: medium) { + .show-md { + display: block; + } +} +.show-lg { + display: none; +} +@media (min-width: 64em) { + .show-lg { + display: block; + } +} +@media (min-width: 50em) { + .hide-md { + display: none; + } +} +@media (min-width: medium) { + .hide-md { + display: none; + } +} +@media (min-width: 64em) { + .hide-lg { + display: none; + } +} +/* normalize.css v3.0.1 | MIT License | git.io/normalize */ +html { + font-family: sans-serif; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ + width: 100%; + height: 100%; +} +body { + margin: 0; +} +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +nav, +section, +summary { + display: block; +} +audio, +canvas, +progress, +video { + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ +} +audio:not([controls]) { + display: none; + height: 0; +} +[hidden], +template { + display: none; +} +a { + background: transparent; +} +a:active, +a:hover { + outline: 0; +} +abbr[title] { + border-bottom: 1px dotted; +} +b, +strong { + font-weight: bold; +} +dfn { + font-style: italic; +} +h1 { + font-size: 2em; + margin: 0.67em 0; +} +mark { + background: #ff0; + color: #000; +} +small { + font-size: 80%; +} +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} +sup { + top: -0.5em; +} +sub { + bottom: -0.25em; +} +img { + border: 0; +} +svg:not(:root) { + overflow: hidden; +} +figure { + margin: 1em 40px; +} +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; +} +pre { + overflow: auto; +} +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; +} +button, +input, +optgroup, +select, +textarea { + color: inherit; /* 1 */ + font: inherit; /* 2 */ + margin: 0; /* 3 */ +} +button { + overflow: visible; +} +button, +select { + text-transform: none; +} +button, +html input[type="button"], +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ +} +button[disabled], +html input[disabled] { + cursor: default; +} +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} +input { + line-height: normal; +} +input[type="checkbox"], +input[type="radio"] { + -moz-box-sizing: border-box; + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + height: auto; +} +input[type="search"] { + -webkit-appearance: textfield; /* 1 */ + -moz-box-sizing: content-box; /* 2 */ + box-sizing: content-box; +} +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} +legend { + border: 0; /* 1 */ + padding: 0; /* 2 */ +} +textarea { + overflow: auto; +} +optgroup { + font-weight: bold; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +td, +th { + padding: 0; +} +.accordion dd { + display: none; +} +.accordion .accordion-panel--open { + display: block; +} +.dropdown-nav { + list-style: none; + margin: 0; + padding: 0; +} +.dropdown-nav li { + position: relative; + float: left; +} +.dropdown-nav li ul { + position: absolute; + display: none; + left: 0; + list-style: none; + margin: 0; + padding: 0; +} +.dropdown-nav li:hover ul { + display: block; +} +.dropdown-nav li .dropdown--open { + display: block; +} +.dropdown-nav .dropdown-trigger--open:hover ul { + display: block; +} +.dropdown-nav .click-setting:hover ul { + display: none; +} +.dropdown-nav .click-setting:hover .dropdown--open { + display: block; +} +.checkbox, +.radio { + position: relative; + padding-left: 1.25em; +} +.checkbox span:before, +.radio span:before { + content: ""; + position: absolute; + left: 0; + line-height: 1em; + width: 0.813em; + height: 0.813em; + border: 1px solid #000; +} +.checkbox input[type="checkbox"] { + opacity: 0; + position: absolute; +} +.checkbox input[type="checkbox"]:checked + span:before { + content: "✓"; +} +.radio input[type="radio"] { + opacity: 0; + position: absolute; +} +.radio input[type="radio"]:checked + span:after { + background: #000; +} +.radio span:after { + content: ""; + position: absolute; + top: 0.188em; + left: 0.188em; + width: 0.438em; + height: 0.438em; + border-radius: 50%; +} +.radio span:before { + border-radius: 50%; +} +.sm-1 { + width: 8.3333333%; +} +.sm-1-half { + width: 12.49999995%; +} +.sm-offset-1 { + margin-left: 8.3333333%; +} +.sm-offset-1-half { + margin-left: 12.49999995%; +} +.sm-2 { + width: 16.6666666%; +} +.sm-2-half { + width: 20.83333325%; +} +.sm-offset-2 { + margin-left: 16.6666666%; +} +.sm-offset-2-half { + margin-left: 20.83333325%; +} +.sm-3 { + width: 24.9999999%; +} +.sm-3-half { + width: 29.16666655%; +} +.sm-offset-3 { + margin-left: 24.9999999%; +} +.sm-offset-3-half { + margin-left: 29.16666655%; +} +.sm-4 { + width: 33.3333332%; +} +.sm-4-half { + width: 37.499999849999995%; +} +.sm-offset-4 { + margin-left: 33.3333332%; +} +.sm-offset-4-half { + margin-left: 37.499999849999995%; +} +.sm-5 { + width: 41.6666665%; +} +.sm-5-half { + width: 45.83333315%; +} +.sm-offset-5 { + margin-left: 41.6666665%; +} +.sm-offset-5-half { + margin-left: 45.83333315%; +} +.sm-6 { + width: 49.9999998%; +} +.sm-6-half { + width: 54.166666449999994%; +} +.sm-offset-6 { + margin-left: 49.9999998%; +} +.sm-offset-6-half { + margin-left: 54.166666449999994%; +} +.sm-7 { + width: 58.3333331%; +} +.sm-7-half { + width: 62.49999975%; +} +.sm-offset-7 { + margin-left: 58.3333331%; +} +.sm-offset-7-half { + margin-left: 62.49999975%; +} +.sm-8 { + width: 66.6666664%; +} +.sm-8-half { + width: 70.83333305%; +} +.sm-offset-8 { + margin-left: 66.6666664%; +} +.sm-offset-8-half { + margin-left: 70.83333305%; +} +.sm-9 { + width: 74.99999969999999%; +} +.sm-9-half { + width: 79.16666634999999%; +} +.sm-offset-9 { + margin-left: 74.99999969999999%; +} +.sm-offset-9-half { + margin-left: 79.16666634999999%; +} +.sm-10 { + width: 83.333333%; +} +.sm-10-half { + width: 87.49999964999999%; +} +.sm-offset-10 { + margin-left: 83.333333%; +} +.sm-offset-10-half { + margin-left: 87.49999964999999%; +} +.sm-11 { + width: 91.6666663%; +} +.sm-11-half { + width: 95.83333295%; +} +.sm-offset-11 { + margin-left: 91.6666663%; +} +.sm-offset-11-half { + margin-left: 95.83333295%; +} +.sm-12 { + width: 99.9999996%; +} +.sm-12-half { + width: 104.16666624999999%; +} +.sm-offset-12 { + margin-left: 99.9999996%; +} +.sm-offset-12-half { + margin-left: 104.16666624999999%; +} +@media (min-width: 50em) { + .md-1 { + width: 8.3333333%; + } + .md-1-half { + width: 12.49999995%; + } + .md-offset-1 { + margin-left: 8.3333333%; + } + .md-offset-1-half { + margin-left: 12.49999995%; + } + .md-2 { + width: 16.6666666%; + } + .md-2-half { + width: 20.83333325%; + } + .md-offset-2 { + margin-left: 16.6666666%; + } + .md-offset-2-half { + margin-left: 20.83333325%; + } + .md-3 { + width: 24.9999999%; + } + .md-3-half { + width: 29.16666655%; + } + .md-offset-3 { + margin-left: 24.9999999%; + } + .md-offset-3-half { + margin-left: 29.16666655%; + } + .md-4 { + width: 33.3333332%; + } + .md-4-half { + width: 37.499999849999995%; + } + .md-offset-4 { + margin-left: 33.3333332%; + } + .md-offset-4-half { + margin-left: 37.499999849999995%; + } + .md-5 { + width: 41.6666665%; + } + .md-5-half { + width: 45.83333315%; + } + .md-offset-5 { + margin-left: 41.6666665%; + } + .md-offset-5-half { + margin-left: 45.83333315%; + } + .md-6 { + width: 49.9999998%; + } + .md-6-half { + width: 54.166666449999994%; + } + .md-offset-6 { + margin-left: 49.9999998%; + } + .md-offset-6-half { + margin-left: 54.166666449999994%; + } + .md-7 { + width: 58.3333331%; + } + .md-7-half { + width: 62.49999975%; + } + .md-offset-7 { + margin-left: 58.3333331%; + } + .md-offset-7-half { + margin-left: 62.49999975%; + } + .md-8 { + width: 66.6666664%; + } + .md-8-half { + width: 70.83333305%; + } + .md-offset-8 { + margin-left: 66.6666664%; + } + .md-offset-8-half { + margin-left: 70.83333305%; + } + .md-9 { + width: 74.99999969999999%; + } + .md-9-half { + width: 79.16666634999999%; + } + .md-offset-9 { + margin-left: 74.99999969999999%; + } + .md-offset-9-half { + margin-left: 79.16666634999999%; + } + .md-10 { + width: 83.333333%; + } + .md-10-half { + width: 87.49999964999999%; + } + .md-offset-10 { + margin-left: 83.333333%; + } + .md-offset-10-half { + margin-left: 87.49999964999999%; + } + .md-11 { + width: 91.6666663%; + } + .md-11-half { + width: 95.83333295%; + } + .md-offset-11 { + margin-left: 91.6666663%; + } + .md-offset-11-half { + margin-left: 95.83333295%; + } + .md-12 { + width: 99.9999996%; + } + .md-12-half { + width: 104.16666624999999%; + } + .md-offset-12 { + margin-left: 99.9999996%; + } + .md-offset-12-half { + margin-left: 104.16666624999999%; + } +} +@media (min-width: medium) { + .md-1 { + width: 8.3333333%; + } + .md-1-half { + width: 12.49999995%; + } + .md-offset-1 { + margin-left: 8.3333333%; + } + .md-offset-1-half { + margin-left: 12.49999995%; + } + .md-2 { + width: 16.6666666%; + } + .md-2-half { + width: 20.83333325%; + } + .md-offset-2 { + margin-left: 16.6666666%; + } + .md-offset-2-half { + margin-left: 20.83333325%; + } + .md-3 { + width: 24.9999999%; + } + .md-3-half { + width: 29.16666655%; + } + .md-offset-3 { + margin-left: 24.9999999%; + } + .md-offset-3-half { + margin-left: 29.16666655%; + } + .md-4 { + width: 33.3333332%; + } + .md-4-half { + width: 37.499999849999995%; + } + .md-offset-4 { + margin-left: 33.3333332%; + } + .md-offset-4-half { + margin-left: 37.499999849999995%; + } + .md-5 { + width: 41.6666665%; + } + .md-5-half { + width: 45.83333315%; + } + .md-offset-5 { + margin-left: 41.6666665%; + } + .md-offset-5-half { + margin-left: 45.83333315%; + } + .md-6 { + width: 49.9999998%; + } + .md-6-half { + width: 54.166666449999994%; + } + .md-offset-6 { + margin-left: 49.9999998%; + } + .md-offset-6-half { + margin-left: 54.166666449999994%; + } + .md-7 { + width: 58.3333331%; + } + .md-7-half { + width: 62.49999975%; + } + .md-offset-7 { + margin-left: 58.3333331%; + } + .md-offset-7-half { + margin-left: 62.49999975%; + } + .md-8 { + width: 66.6666664%; + } + .md-8-half { + width: 70.83333305%; + } + .md-offset-8 { + margin-left: 66.6666664%; + } + .md-offset-8-half { + margin-left: 70.83333305%; + } + .md-9 { + width: 74.99999969999999%; + } + .md-9-half { + width: 79.16666634999999%; + } + .md-offset-9 { + margin-left: 74.99999969999999%; + } + .md-offset-9-half { + margin-left: 79.16666634999999%; + } + .md-10 { + width: 83.333333%; + } + .md-10-half { + width: 87.49999964999999%; + } + .md-offset-10 { + margin-left: 83.333333%; + } + .md-offset-10-half { + margin-left: 87.49999964999999%; + } + .md-11 { + width: 91.6666663%; + } + .md-11-half { + width: 95.83333295%; + } + .md-offset-11 { + margin-left: 91.6666663%; + } + .md-offset-11-half { + margin-left: 95.83333295%; + } + .md-12 { + width: 99.9999996%; + } + .md-12-half { + width: 104.16666624999999%; + } + .md-offset-12 { + margin-left: 99.9999996%; + } + .md-offset-12-half { + margin-left: 104.16666624999999%; + } +} +@media (min-width: 64em) { + .lg-1 { + width: 8.3333333%; + } + .lg-1-half { + width: 12.49999995%; + } + .lg-offset-1 { + margin-left: 8.3333333%; + } + .lg-offset-1-half { + margin-left: 12.49999995%; + } + .lg-2 { + width: 16.6666666%; + } + .lg-2-half { + width: 20.83333325%; + } + .lg-offset-2 { + margin-left: 16.6666666%; + } + .lg-offset-2-half { + margin-left: 20.83333325%; + } + .lg-3 { + width: 24.9999999%; + } + .lg-3-half { + width: 29.16666655%; + } + .lg-offset-3 { + margin-left: 24.9999999%; + } + .lg-offset-3-half { + margin-left: 29.16666655%; + } + .lg-4 { + width: 33.3333332%; + } + .lg-4-half { + width: 37.499999849999995%; + } + .lg-offset-4 { + margin-left: 33.3333332%; + } + .lg-offset-4-half { + margin-left: 37.499999849999995%; + } + .lg-5 { + width: 41.6666665%; + } + .lg-5-half { + width: 45.83333315%; + } + .lg-offset-5 { + margin-left: 41.6666665%; + } + .lg-offset-5-half { + margin-left: 45.83333315%; + } + .lg-6 { + width: 49.9999998%; + } + .lg-6-half { + width: 54.166666449999994%; + } + .lg-offset-6 { + margin-left: 49.9999998%; + } + .lg-offset-6-half { + margin-left: 54.166666449999994%; + } + .lg-7 { + width: 58.3333331%; + } + .lg-7-half { + width: 62.49999975%; + } + .lg-offset-7 { + margin-left: 58.3333331%; + } + .lg-offset-7-half { + margin-left: 62.49999975%; + } + .lg-8 { + width: 66.6666664%; + } + .lg-8-half { + width: 70.83333305%; + } + .lg-offset-8 { + margin-left: 66.6666664%; + } + .lg-offset-8-half { + margin-left: 70.83333305%; + } + .lg-9 { + width: 74.99999969999999%; + } + .lg-9-half { + width: 79.16666634999999%; + } + .lg-offset-9 { + margin-left: 74.99999969999999%; + } + .lg-offset-9-half { + margin-left: 79.16666634999999%; + } + .lg-10 { + width: 83.333333%; + } + .lg-10-half { + width: 87.49999964999999%; + } + .lg-offset-10 { + margin-left: 83.333333%; + } + .lg-offset-10-half { + margin-left: 87.49999964999999%; + } + .lg-11 { + width: 91.6666663%; + } + .lg-11-half { + width: 95.83333295%; + } + .lg-offset-11 { + margin-left: 91.6666663%; + } + .lg-offset-11-half { + margin-left: 95.83333295%; + } + .lg-12 { + width: 99.9999996%; + } + .lg-12-half { + width: 104.16666624999999%; + } + .lg-offset-12 { + margin-left: 99.9999996%; + } + .lg-offset-12-half { + margin-left: 104.16666624999999%; + } +} +.sm-half { + width: 4.16666665%; +} +.sm-offset-half { + width: 4.16666665%; +} +@media (min-width: 50em) { + .md-half { + width: 4.16666665%; + } + .md-offset-0 { + margin: 0; + } + .md-offset-half { + margin-left: 4.16666665%; + } +} +@media (min-width: medium) { + .md-half { + width: 4.16666665%; + } + .md-offset-0 { + margin: 0; + } + .md-offset-half { + margin-left: 4.16666665%; + } +} +@media (min-width: 64em) { + .lg-half { + width: 4.16666665%; + } + .lg-offset-0 { + margin-left: 0; + } + .lg-offset-half { + margin-left: 4.16666665%; + } +} +.has-gutter { + float: left; + padding: 0 20px/2; +} +.row .row .has-gutter { + padding: 0; +} +.modal { + display: none; +} +.modal-open { + display: block; + position: fixed; + z-index: 1; + top: 50%; + right: 0; + left: 0; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); + margin: 0 auto; + width: 100%; + background: #fff; +} +@media (min-width: 50em) { + .modal-open { + width: 50%; + } +} +@media (min-width: medium) { + .modal-open { + width: 50%; + } +} +.modal-bg:after { + content: ""; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: #000; + opacity: 0.5; +} +.off-canvas-contain { + position: relative; +} +.off-canvas-contain .off-canvas-left { + left: -17.5em; + -webkit-transition: left 0.3s ease; + transition: left 0.3s ease; +} +.off-canvas-contain .off-canvas-right { + right: -17.5em; + -webkit-transition: right 0.3s ease; + transition: right 0.3s ease; +} +.off-canvas-contain.off-canvas--open-left .off-canvas-left { + left: 0; +} +.off-canvas-contain.off-canvas--open-left .off-canvas-left ~ .off-canvas-content { + left: 17.5em; + right: auto; +} +.off-canvas-contain.off-canvas--open-right .off-canvas-right { + right: 0; +} +.off-canvas-contain.off-canvas--open-right .off-canvas-right ~ .off-canvas-content { + left: -17.5em; + right: 17.5em; +} +.off-canvas-left, +.off-canvas-right { + position: fixed; + top: 0; + width: 17.5em; + height: 100%; + -webkit-transform: translateZ(0); + transform: translateZ(0); +} +.off-canvas-content { + position: relative; + left: 0; + right: 0; + -webkit-transition: left 0.3s ease, right 0.3s ease; + transition: left 0.3s ease, right 0.3s ease; +} +.tabs-panels li { + display: none; +} +.tabs-panels .tab-panel--open { + display: block; +} +.toggle { + display: none; +} +.toggle-shown { + display: block; +} diff --git a/example.html b/example.html index 1af1e43..d8155de 100644 --- a/example.html +++ b/example.html @@ -25,7 +25,7 @@

Accordion

Dropdown Navigation

-