From 2b50a2da143f19a905aa1db2d45dde438647df34 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Wed, 7 Sep 2016 13:06:46 +0300 Subject: [PATCH] Extra component: Dropdown --- README.md | 2 +- docs/index.html | 18 +---------------- flavors/mini-default.css | 30 ++++++++++++++++++++++++++-- flavors/mini-default.min.css | 2 +- flavors/mini-default.scss | 12 +++++++++++- scss/flavor.scss | 12 +++++++++++- scss/mini-extra/_dropdown.scss | 36 ++++++++++++++++++++++++++++++++++ scss/mini/_nav.scss | 4 ++-- 8 files changed, 91 insertions(+), 25 deletions(-) create mode 100644 scss/mini-extra/_dropdown.scss diff --git a/README.md b/README.md index c50e426..804787d 100644 --- a/README.md +++ b/README.md @@ -17,10 +17,10 @@ A minimal Sass-y responsive mobile-first style-agnostic CSS framework. - **label**: label and badge styles `GZIPPED SIZE`: 208 bytes - **tab**: tabbed navigation `GZIPPED SIZE`: 347 bytes - **modal**: modal dialog prompts `GZIPPED SIZE`: 298 bytes +- **dropdown**: dropdown menu for the navigation bar `GZIPPED SIZE`: 136 bytes TODO: - Components - - Dropdowns (possibly checkbox-hack) - Collapse (checkbox based) - Also accordion (radio based) - Progress bar styles (maybe also spinners) diff --git a/docs/index.html b/docs/index.html index fd7ac51..0ee6f2c 100644 --- a/docs/index.html +++ b/docs/index.html @@ -24,22 +24,7 @@ -
- - -
- -
-

Modal title

-
-

Lorem ipsum etc.

-
- -
- -
- - +
@@ -169,7 +154,6 @@

Extra modules

Coming soon! In the meantime, why don't you check out the framework's Github page?

- diff --git a/flavors/mini-default.css b/flavors/mini-default.css index b918cb2..f8c3340 100644 --- a/flavors/mini-default.css +++ b/flavors/mini-default.css @@ -811,7 +811,7 @@ textarea { display: inline-block; margin: 0; white-space: nowrap; } - .nav ul li * { + .nav ul li > * { display: inline-block; padding: 8px; color: #ddd; @@ -826,7 +826,7 @@ textarea { display: block; } .nav.vertical ul li { display: block; } - .nav.vertical ul li * { + .nav.vertical ul li > * { width: 100%; padding: 8px 0; } .nav.fixed { @@ -1253,3 +1253,29 @@ img.thumb { position: absolute; top: 20px; right: 20px; } + +/* + Mixin for navigation bar's dropdown element. + Parameters: + - $nav-name : The class name for the navigation bar. [1] + - $nav-link-name : The class name for the navigation links of the navigation bar. [1] + - $dropdown-name : The class name for the dropdown element. [2] + - $dropdown-left-margin : The left margin of the dropdown element's contents. [3] + - $dropdown-font-size : The font size of the dropdown element's contents. + Notes: + - [1] : The values of $nav-name and $nav-link-name must match those specified in the navigation bar's + definition, otherwise the dropdown element will not work properly. + - [2] : The value of $dropdown-name is used in two distinct elements of the component, namely the + checkbox and the dropdown toggle. + - [3] : The value of $dropdown-left-margin will affect all open dropdown menus, as well as dropdown + menus on mobile screens. It is suggested that you set this value to something different than + 0 to visually represent the menu hierarchy in devices with smaller screens. +*/ +.nav .link.dropdown { + cursor: pointer; } +.nav input[type="checkbox"].dropdown + div { + display: none; } +.nav input[type="checkbox"]:checked.dropdown + div { + display: block; + font-size: 0.8em; + margin-left: 20px; } diff --git a/flavors/mini-default.min.css b/flavors/mini-default.min.css index 1fa966f..2575366 100644 --- a/flavors/mini-default.min.css +++ b/flavors/mini-default.min.css @@ -1 +1 @@ -html{font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:1em;line-height:1.5;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0;color:#222;background-color:#f5f5f5}article,aside,details,figcaption,figure,footer,header,img,main,menu,nav,section{display:block}figure{margin:1em 40px}h1,h2,h3,h4,h5,h6{line-height:1.2;margin:.7em 0;font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#555;font-weight:200}h1{font-size:2em}h2{font-size:1.5em}h3{font-size:1.15em}h4{font-size:1em}h5{font-size:.8em}h6{font-size:.7em}hr{box-sizing:content-box;line-height:1.2;margin:.7em 0;height:0;border:0;border-top:1px solid #cfcfcf}small,sub,sup{font-size:75%}p,pre{margin:0 0 .6em}ol,ul{margin-top:0;margin-bottom:.6em}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}code,kbd,pre{padding:2px 4px;border-radius:4px}code,pre{background-color:#dcdcdc}kbd{color:#fefefe;background-color:#222}pre{display:block;word-break:break-all;word-wrap:break-word}pre code{padding:0;font-size:inherit;color:inherit;white-space:pre-wrap;background-color:transparent;border-radius:0}a{background-color:transparent;text-decoration:none;color:#2678b3}a:active,a:hover{outline-width:0;color:#3793d5}a:visited{color:#1d5c89}a:visited:active,a:visited:hover{color:#2678b3}b,strong{font-weight:bolder}dfn{font-style:italic}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}mark{background-color:#ff3;color:#222}.hidden,[hidden],audio:not([controls]),template{display:none}audio:not([controls]){height:0}audio,progress,video{display:inline-block}progress,sub,sup{vertical-align:baseline}sub,sup{line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none;max-width:100%}svg:not(:root){overflow:hidden}button,hr,input{overflow:visible}button,input,optgroup,select,textarea{font-family:'"Helvetica Neue", Helvetica, sans-serif';font-size:100%;line-height:1.2;margin:0}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner,html [type=button]::-moz-focus-inner{border-style:none;padding:0}[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring,html [type=button]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid #cfcfcf;border-radius:4px;margin:0 2px;padding:.35em .65em .75em}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button,img{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}.btn,a.btn,a.btn:visited{display:inline-block;border:0;border-radius:4px;margin:2px 0;padding:6px 12px;color:#2a2a2a;background:#eaeaea;cursor:pointer}.btn:active,.btn:focus,.btn:hover,a.btn:active,a.btn:focus,a.btn:hover,a.btn:visited:active,a.btn:visited:focus,a.btn:visited:hover{background:#fdfdfd}.btn.disabled,.btn[disabled],.btnfieldset[disabled],a.btn.disabled,a.btn:visited.disabled,a.btn:visited[disabled],a.btn:visitedfieldset[disabled],a.btn[disabled],a.btnfieldset[disabled]{cursor:not-allowed;opacity:.65}.btn.blue,a.btn.blue,a.btn.blue:visited{color:#eee;background:#3f84b3}.btn.blue:active,.btn.blue:focus,.btn.blue:hover,a.btn.blue:active,a.btn.blue:focus,a.btn.blue:hover,a.btn.blue:visited:active,a.btn.blue:visited:focus,a.btn.blue:visited:hover{background:#5597c3}.btn.green,a.btn.green,a.btn.green:visited{color:#eee;background:#2db747}.btn.green:active,.btn.green:focus,.btn.green:hover,a.btn.green:active,a.btn.green:focus,a.btn.green:hover,a.btn.green:visited:active,a.btn.green:visited:focus,a.btn.green:visited:hover{background:#3bcf57}.btn.red,a.btn.red,a.btn.red:visited{color:#eee;background:#ea4848}.btn.red:active,.btn.red:focus,.btn.red:hover,a.btn.red:active,a.btn.red:focus,a.btn.red:hover,a.btn.red:visited:active,a.btn.red:visited:focus,a.btn.red:visited:hover{background:#ee6a6a}.btn.lg{padding:9px 15px;font-size:135%}.btn.sm{padding:4px 8px;font-size:80%}.grid-container{padding-right:0;padding-left:0;margin-right:auto;margin-left:auto;width:100%}.grid-container *{box-sizing:border-box}.row:after,.row:before{content:"";display:table;clear:both}.col{float:left;padding:12px}.xs-1{width:8.33333%}.xs-2{width:16.66667%}.xs-3{width:25%}.xs-4{width:33.33333%}.xs-5{width:41.66667%}.xs-6{width:50%}.xs-7{width:58.33333%}.xs-8{width:66.66667%}.xs-9{width:75%}.xs-10{width:83.33333%}.xs-11{width:91.66667%}.xs-12{width:100%}.lg-no,.md-no,.sm-no{display:block}.xs-no{display:none}@media (min-width:768px){.sm-1{width:8.33333%}.sm-2{width:16.66667%}.sm-3{width:25%}.sm-4{width:33.33333%}.sm-5{width:41.66667%}.sm-6{width:50%}.sm-7{width:58.33333%}.sm-8{width:66.66667%}.sm-9{width:75%}.sm-10{width:83.33333%}.sm-11{width:91.66667%}.sm-12{width:100%}.lg-no,.md-no,.xs-no{display:block}.sm-no{display:none}}@media (min-width:1024px){.md-1{width:8.33333%}.md-2{width:16.66667%}.md-3{width:25%}.md-4{width:33.33333%}.md-5{width:41.66667%}.md-6{width:50%}.md-7{width:58.33333%}.md-8{width:66.66667%}.md-9{width:75%}.md-10{width:83.33333%}.md-11{width:91.66667%}.md-12{width:100%}.lg-no,.sm-no,.xs-no{display:block}.md-no{display:none}}@media (min-width:1280px){.lg-1{width:8.33333%}.lg-2{width:16.66667%}.lg-3{width:25%}.lg-4{width:33.33333%}.lg-5{width:41.66667%}.lg-6{width:50%}.lg-7{width:58.33333%}.lg-8{width:66.66667%}.lg-9{width:75%}.lg-10{width:83.33333%}.lg-11{width:91.66667%}.lg-12{width:100%}.md-no,.sm-no,.xs-no{display:block}.lg-no{display:none}}.frm input:not([type]),.frm input[type$=time],.frm input[type=color],.frm input[type=email],.frm input[type=month],.frm input[type=number],.frm input[type=password],.frm input[type=search],.frm input[type=tel],.frm input[type=text],.frm input[type=url],.frm input[type=week],.frm input[type^=date],.frm select,.frm textarea{box-sizing:border-box;border:1px solid #ccc;border-radius:4px;box-shadow:none}.frm input,.frm select,.frm textarea{display:block;margin:.2em;padding:.3em}.frm input:focus,.frm select:focus,.frm textarea:focus{border-color:#2678b3}.frm input[disabled],.frm select[disabled],.frm textarea[disabled]{cursor:not-allowed;opacity:.65}.frm input:focus:invalid,.frm input:focus:invalid:focus,.frm input:invalid,.frm select:focus:invalid,.frm select:focus:invalid:focus,.frm select:invalid,.frm textarea:focus:invalid,.frm textarea:focus:invalid:focus,.frm textarea:invalid{border-color:#e9322d}.frm input[readonly],.frm select[readonly],.frm textarea[readonly]{background-color:#dcdcdc;border-color:#b5b5b5}.frm input[type=checkbox],.frm input[type=radio]{display:inline-block}.frm select{height:1.9em}.frm select[multiple]{height:auto}.frm label{margin:.5em 0 0 .2em}.frm.aligned input,.frm.aligned label,.frm.aligned select,.frm.aligned textarea,.frm.inline .ctrl-group,.frm.inline input,.frm.inline label,.frm.inline select,.frm.inline textarea{display:inline-block}.frm.aligned .ctrl-group label{text-align:right;vertical-align:middle;width:15em;margin-top:0}.frm .ctrl-group{margin:0 0 .3em}.tbl{border-collapse:collapse;border-spacing:0;empty-cells:show;border:1px solid #bdbdbd}.tbl td,.tbl th{overflow:visible;border-left:1px solid #bdbdbd;border-bottom:none;margin:0;padding:.5em}.tbl thead{background-color:#d9d9d9;color:#111;text-align:left}.tbl tbody{background-color:#f5f5f5;color:#111}.tbl tbody tr:nth-child(2n-1){background-color:#ececec}.tbl.hor td,.tbl.hor th{border-left:none;border-bottom:1px solid #bdbdbd}.tbl.bor td,.tbl.bor th{border-bottom:1px solid #bdbdbd}.nav{box-sizing:border-box;background-color:#272727}.nav .logo{font-size:135%;color:#ddd}.nav ul{display:inline-block;list-style:none;margin:0;padding:0}.nav ul li{display:inline-block;margin:0;white-space:nowrap}.nav ul li *{display:inline-block;padding:8px;color:#ddd;margin:0}.nav ul li .link:active,.nav ul li .link:focus,.nav ul li .link:hover{color:#ddd;background:#141414}.nav ul li .link.disabled,.nav ul li .link[disabled]{cursor:not-allowed;opacity:.65}.nav.vertical ul,.nav.vertical ul li{display:block}.nav.vertical ul li *{width:100%;padding:8px 0}.nav.fixed{position:fixed;left:0;top:0;z-index:999;width:100%}.nav.fixed.vertical{height:100%;width:16.66667%}.nav.fixed.vertical ul{width:100%}.nav.fixed.vertical ul li{display:block}.nav+label{display:none;font-weight:700;margin:10px;font-size:1.75em;padding:8px;color:#ddd;background-color:#272727;width:auto;position:fixed;z-index:1000;top:0;right:0}.nav+label:before{position:relative;content:'\2630'}.nav+label:active,.nav+label:focus,.nav+label:hover{background:#141414}@media (max-width:768px){.nav{overflow:auto}.nav.fixed{display:none}.nav.fixed+label{display:block}input[type=checkbox]:checked+.nav.fixed{display:block;width:100%;height:100%}input[type=checkbox]:checked+.nav.fixed ul,input[type=checkbox]:checked+.nav.fixed ul li{display:block}input[type=checkbox]:checked+.nav.fixed ul li *{width:100%;padding:8px 0}input[type=checkbox]:checked+.nav.fixed+label:before{content:'\00d7'}}img.thumb{padding:.25em;border:1px solid #ccc;border-radius:4px}.bordered{border:1px solid rgba(0,0,0,.25)!important}.rounded{border-radius:4px!important}.circle{border-radius:50%!important}.txt-blue{color:#3f84b3!important}.txt-green{color:#2db747!important}.txt-red{color:#ea4848!important}.bg-blue{background-color:#3f84b3!important}.bg-green{background-color:#2db747!important}.bg-red{background-color:#ea4848!important}.caret{display:inline-block;vertical-align:middle;line-height:1;width:0;height:0;border-left:.35em solid transparent;border-right:.35em solid transparent;border-top:.35em solid #222}.close{display:inline-block;vertical-align:middle;line-height:1;color:#aaa;font-size:1.3em;font-weight:700;cursor:pointer}.close:before{content:'\00d7'}.close:hover{color:#777}.drg-left{float:left!important}.drg-right{float:right!important}.ct-block{display:block;margin-left:auto;margin-right:auto}.cf:after,.cf:before{content:"";display:table;clear:both}.hidden{display:none!important}.lbl{display:inline;padding:6px 10px;color:#eee;background-color:#777;border-radius:4px}.lbl:empty{display:none}.lbl.blue{color:#eee;background:#3f84b3}.lbl.green{color:#eee;background:#2db747}.lbl.red{color:#eee;background:#ea4848}.bdg{display:inline;padding:3px 8px;color:#eee;background-color:#777;border-radius:8px}.bdg:empty{display:none}.bdg.blue{color:#eee;background:#3f84b3}.bdg.green{color:#eee;background:#2db747}.bdg.red{color:#eee;background:#ea4848}.tabs{position:relative;min-height:250px;width:100%}.tabs input[type=radio]{display:none}.tabs input[type=radio]+div{display:inline}.tabs input[type=radio]+div>label{position:reative;float:left;margin-right:3px;left:1px;height:40px;padding:8px 14px;color:#2678b3;background-color:#f5f5f5;border:1px solid #ccc;border-radius:4px 4px 0 0;cursor:pointer}.tabs input[type=radio]+div>label:active,.tabs input[type=radio]+div>label:focus,.tabs input[type=radio]+div>label:hover{background:#dcdcdc}.tabs input[type=radio]+div>label+div{position:absolute;z-index:-2;left:0;top:39px;bottom:0;right:0;padding:20px;background:#fff;border:1px solid #ccc}.tabs input[type=radio]:checked+div>label{color:#222;background:#fff;border-top:3px solid #2678b3;border-bottom:1px solid #fff}.tabs input[type=radio]:checked+div>label+div{position:absolute;z-index:-1}.modal{display:none}.modal+div{z-index:997;position:fixed;width:100%;height:0;opacity:0;transition:opacity .3s ease-out}.modal+div>div{z-index:998;position:relative;width:45%;color:#222;background-color:#f5f5f5;margin:8.5% auto 0;padding:18px;border:1px solid #ccc;border-radius:4px;box-shadow:0 5px 15px rgba(0,0,0,.5)}.modal:checked+div{height:100%;opacity:1}.modal:checked+div>label{background-color:rgba(0,0,0,.35);position:fixed;width:100%;height:100%;top:0}.modal+div>div .close{position:absolute;top:20px;right:20px} \ No newline at end of file +html{font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:1em;line-height:1.5;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0;color:#222;background-color:#f5f5f5}article,aside,details,figcaption,figure,footer,header,img,main,menu,nav,section{display:block}figure{margin:1em 40px}h1,h2,h3,h4,h5,h6{line-height:1.2;margin:.7em 0;font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#555;font-weight:200}h1{font-size:2em}h2{font-size:1.5em}h3{font-size:1.15em}h4{font-size:1em}h5{font-size:.8em}h6{font-size:.7em}hr{box-sizing:content-box;line-height:1.2;margin:.7em 0;height:0;border:0;border-top:1px solid #cfcfcf}small,sub,sup{font-size:75%}p,pre{margin:0 0 .6em}ol,ul{margin-top:0;margin-bottom:.6em}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}code,kbd,pre{padding:2px 4px;border-radius:4px}code,pre{background-color:#dcdcdc}kbd{color:#fefefe;background-color:#222}pre{display:block;word-break:break-all;word-wrap:break-word}pre code{padding:0;font-size:inherit;color:inherit;white-space:pre-wrap;background-color:transparent;border-radius:0}a{background-color:transparent;text-decoration:none;color:#2678b3}a:active,a:hover{outline-width:0;color:#3793d5}a:visited{color:#1d5c89}a:visited:active,a:visited:hover{color:#2678b3}b,strong{font-weight:bolder}dfn{font-style:italic}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}mark{background-color:#ff3;color:#222}.hidden,[hidden],audio:not([controls]),template{display:none}audio:not([controls]){height:0}audio,progress,video{display:inline-block}progress,sub,sup{vertical-align:baseline}sub,sup{line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none;max-width:100%}svg:not(:root){overflow:hidden}button,hr,input{overflow:visible}button,input,optgroup,select,textarea{font-family:'"Helvetica Neue", Helvetica, sans-serif';font-size:100%;line-height:1.2;margin:0}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner,html [type=button]::-moz-focus-inner{border-style:none;padding:0}[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring,html [type=button]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid #cfcfcf;border-radius:4px;margin:0 2px;padding:.35em .65em .75em}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button,img{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}.btn,a.btn,a.btn:visited{display:inline-block;border:0;border-radius:4px;margin:2px 0;padding:6px 12px;color:#2a2a2a;background:#eaeaea;cursor:pointer}.btn:active,.btn:focus,.btn:hover,a.btn:active,a.btn:focus,a.btn:hover,a.btn:visited:active,a.btn:visited:focus,a.btn:visited:hover{background:#fdfdfd}.btn.disabled,.btn[disabled],.btnfieldset[disabled],a.btn.disabled,a.btn:visited.disabled,a.btn:visited[disabled],a.btn:visitedfieldset[disabled],a.btn[disabled],a.btnfieldset[disabled]{cursor:not-allowed;opacity:.65}.btn.blue,a.btn.blue,a.btn.blue:visited{color:#eee;background:#3f84b3}.btn.blue:active,.btn.blue:focus,.btn.blue:hover,a.btn.blue:active,a.btn.blue:focus,a.btn.blue:hover,a.btn.blue:visited:active,a.btn.blue:visited:focus,a.btn.blue:visited:hover{background:#5597c3}.btn.green,a.btn.green,a.btn.green:visited{color:#eee;background:#2db747}.btn.green:active,.btn.green:focus,.btn.green:hover,a.btn.green:active,a.btn.green:focus,a.btn.green:hover,a.btn.green:visited:active,a.btn.green:visited:focus,a.btn.green:visited:hover{background:#3bcf57}.btn.red,a.btn.red,a.btn.red:visited{color:#eee;background:#ea4848}.btn.red:active,.btn.red:focus,.btn.red:hover,a.btn.red:active,a.btn.red:focus,a.btn.red:hover,a.btn.red:visited:active,a.btn.red:visited:focus,a.btn.red:visited:hover{background:#ee6a6a}.btn.lg{padding:9px 15px;font-size:135%}.btn.sm{padding:4px 8px;font-size:80%}.grid-container{padding-right:0;padding-left:0;margin-right:auto;margin-left:auto;width:100%}.grid-container *{box-sizing:border-box}.row:after,.row:before{content:"";display:table;clear:both}.col{float:left;padding:12px}.xs-1{width:8.33333%}.xs-2{width:16.66667%}.xs-3{width:25%}.xs-4{width:33.33333%}.xs-5{width:41.66667%}.xs-6{width:50%}.xs-7{width:58.33333%}.xs-8{width:66.66667%}.xs-9{width:75%}.xs-10{width:83.33333%}.xs-11{width:91.66667%}.xs-12{width:100%}.lg-no,.md-no,.sm-no{display:block}.xs-no{display:none}@media (min-width:768px){.sm-1{width:8.33333%}.sm-2{width:16.66667%}.sm-3{width:25%}.sm-4{width:33.33333%}.sm-5{width:41.66667%}.sm-6{width:50%}.sm-7{width:58.33333%}.sm-8{width:66.66667%}.sm-9{width:75%}.sm-10{width:83.33333%}.sm-11{width:91.66667%}.sm-12{width:100%}.lg-no,.md-no,.xs-no{display:block}.sm-no{display:none}}@media (min-width:1024px){.md-1{width:8.33333%}.md-2{width:16.66667%}.md-3{width:25%}.md-4{width:33.33333%}.md-5{width:41.66667%}.md-6{width:50%}.md-7{width:58.33333%}.md-8{width:66.66667%}.md-9{width:75%}.md-10{width:83.33333%}.md-11{width:91.66667%}.md-12{width:100%}.lg-no,.sm-no,.xs-no{display:block}.md-no{display:none}}@media (min-width:1280px){.lg-1{width:8.33333%}.lg-2{width:16.66667%}.lg-3{width:25%}.lg-4{width:33.33333%}.lg-5{width:41.66667%}.lg-6{width:50%}.lg-7{width:58.33333%}.lg-8{width:66.66667%}.lg-9{width:75%}.lg-10{width:83.33333%}.lg-11{width:91.66667%}.lg-12{width:100%}.md-no,.sm-no,.xs-no{display:block}.lg-no{display:none}}.frm input:not([type]),.frm input[type$=time],.frm input[type=color],.frm input[type=email],.frm input[type=month],.frm input[type=number],.frm input[type=password],.frm input[type=search],.frm input[type=tel],.frm input[type=text],.frm input[type=url],.frm input[type=week],.frm input[type^=date],.frm select,.frm textarea{box-sizing:border-box;border:1px solid #ccc;border-radius:4px;box-shadow:none}.frm input,.frm select,.frm textarea{display:block;margin:.2em;padding:.3em}.frm input:focus,.frm select:focus,.frm textarea:focus{border-color:#2678b3}.frm input[disabled],.frm select[disabled],.frm textarea[disabled]{cursor:not-allowed;opacity:.65}.frm input:focus:invalid,.frm input:focus:invalid:focus,.frm input:invalid,.frm select:focus:invalid,.frm select:focus:invalid:focus,.frm select:invalid,.frm textarea:focus:invalid,.frm textarea:focus:invalid:focus,.frm textarea:invalid{border-color:#e9322d}.frm input[readonly],.frm select[readonly],.frm textarea[readonly]{background-color:#dcdcdc;border-color:#b5b5b5}.frm input[type=checkbox],.frm input[type=radio]{display:inline-block}.frm select{height:1.9em}.frm select[multiple]{height:auto}.frm label{margin:.5em 0 0 .2em}.frm.aligned input,.frm.aligned label,.frm.aligned select,.frm.aligned textarea,.frm.inline .ctrl-group,.frm.inline input,.frm.inline label,.frm.inline select,.frm.inline textarea{display:inline-block}.frm.aligned .ctrl-group label{text-align:right;vertical-align:middle;width:15em;margin-top:0}.frm .ctrl-group{margin:0 0 .3em}.tbl{border-collapse:collapse;border-spacing:0;empty-cells:show;border:1px solid #bdbdbd}.tbl td,.tbl th{overflow:visible;border-left:1px solid #bdbdbd;border-bottom:none;margin:0;padding:.5em}.tbl thead{background-color:#d9d9d9;color:#111;text-align:left}.tbl tbody{background-color:#f5f5f5;color:#111}.tbl tbody tr:nth-child(2n-1){background-color:#ececec}.tbl.hor td,.tbl.hor th{border-left:none;border-bottom:1px solid #bdbdbd}.tbl.bor td,.tbl.bor th{border-bottom:1px solid #bdbdbd}.nav{box-sizing:border-box;background-color:#272727}.nav .logo{font-size:135%;color:#ddd}.nav ul{display:inline-block;list-style:none;margin:0;padding:0}.nav ul li{display:inline-block;margin:0;white-space:nowrap}.nav ul li>*{display:inline-block;padding:8px;color:#ddd;margin:0}.nav ul li .link:active,.nav ul li .link:focus,.nav ul li .link:hover{color:#ddd;background:#141414}.nav ul li .link.disabled,.nav ul li .link[disabled]{cursor:not-allowed;opacity:.65}.nav.vertical ul,.nav.vertical ul li{display:block}.nav.vertical ul li>*{width:100%;padding:8px 0}.nav.fixed{position:fixed;left:0;top:0;z-index:999;width:100%}.nav.fixed.vertical{height:100%;width:16.66667%}.nav.fixed.vertical ul{width:100%}.nav.fixed.vertical ul li{display:block}.nav+label{display:none;font-weight:700;margin:10px;font-size:1.75em;padding:8px;color:#ddd;background-color:#272727;width:auto;position:fixed;z-index:1000;top:0;right:0}.nav+label:before{position:relative;content:'\2630'}.nav+label:active,.nav+label:focus,.nav+label:hover{background:#141414}@media (max-width:768px){.nav{overflow:auto}.nav.fixed{display:none}.nav.fixed+label{display:block}input[type=checkbox]:checked+.nav.fixed{display:block;width:100%;height:100%}input[type=checkbox]:checked+.nav.fixed ul,input[type=checkbox]:checked+.nav.fixed ul li{display:block}input[type=checkbox]:checked+.nav.fixed ul li *{width:100%;padding:8px 0}input[type=checkbox]:checked+.nav.fixed+label:before{content:'\00d7'}}img.thumb{padding:.25em;border:1px solid #ccc;border-radius:4px}.bordered{border:1px solid rgba(0,0,0,.25)!important}.rounded{border-radius:4px!important}.circle{border-radius:50%!important}.txt-blue{color:#3f84b3!important}.txt-green{color:#2db747!important}.txt-red{color:#ea4848!important}.bg-blue{background-color:#3f84b3!important}.bg-green{background-color:#2db747!important}.bg-red{background-color:#ea4848!important}.caret{display:inline-block;vertical-align:middle;line-height:1;width:0;height:0;border-left:.35em solid transparent;border-right:.35em solid transparent;border-top:.35em solid #222}.close{display:inline-block;vertical-align:middle;line-height:1;color:#aaa;font-size:1.3em;font-weight:700;cursor:pointer}.close:before{content:'\00d7'}.close:hover{color:#777}.drg-left{float:left!important}.drg-right{float:right!important}.ct-block{display:block;margin-left:auto;margin-right:auto}.cf:after,.cf:before{content:"";display:table;clear:both}.hidden{display:none!important}.lbl{display:inline;padding:6px 10px;color:#eee;background-color:#777;border-radius:4px}.lbl:empty{display:none}.lbl.blue{color:#eee;background:#3f84b3}.lbl.green{color:#eee;background:#2db747}.lbl.red{color:#eee;background:#ea4848}.bdg{display:inline;padding:3px 8px;color:#eee;background-color:#777;border-radius:8px}.bdg:empty{display:none}.bdg.blue{color:#eee;background:#3f84b3}.bdg.green{color:#eee;background:#2db747}.bdg.red{color:#eee;background:#ea4848}.tabs{position:relative;min-height:250px;width:100%}.tabs input[type=radio]{display:none}.tabs input[type=radio]+div{display:inline}.tabs input[type=radio]+div>label{position:reative;float:left;margin-right:3px;left:1px;height:40px;padding:8px 14px;color:#2678b3;background-color:#f5f5f5;border:1px solid #ccc;border-radius:4px 4px 0 0;cursor:pointer}.tabs input[type=radio]+div>label:active,.tabs input[type=radio]+div>label:focus,.tabs input[type=radio]+div>label:hover{background:#dcdcdc}.tabs input[type=radio]+div>label+div{position:absolute;z-index:-2;left:0;top:39px;bottom:0;right:0;padding:20px;background:#fff;border:1px solid #ccc}.tabs input[type=radio]:checked+div>label{color:#222;background:#fff;border-top:3px solid #2678b3;border-bottom:1px solid #fff}.tabs input[type=radio]:checked+div>label+div{position:absolute;z-index:-1}.modal{display:none}.modal+div{z-index:997;position:fixed;width:100%;height:0;opacity:0;transition:opacity .3s ease-out}.modal+div>div{z-index:998;position:relative;width:45%;color:#222;background-color:#f5f5f5;margin:8.5% auto 0;padding:18px;border:1px solid #ccc;border-radius:4px;box-shadow:0 5px 15px rgba(0,0,0,.5)}.modal:checked+div{height:100%;opacity:1}.modal:checked+div>label{background-color:rgba(0,0,0,.35);position:fixed;width:100%;height:100%;top:0}.modal+div>div .close{position:absolute;top:20px;right:20px}.nav .link.dropdown{cursor:pointer}.nav input[type=checkbox].dropdown+div{display:none}.nav input[type=checkbox]:checked.dropdown+div{display:block;font-size:.8em;margin-left:20px} \ No newline at end of file diff --git a/flavors/mini-default.scss b/flavors/mini-default.scss index 69297ad..5af4246 100644 --- a/flavors/mini-default.scss +++ b/flavors/mini-default.scss @@ -297,4 +297,14 @@ $modal-border: 1px solid #ccc; // Border style for the modal // Use modal mixin to create modal with given specs. For more information // refer to the _modal.scss file to check the definitions. @include make-modal($modal-class-name, $modal-color, $modal-bg-color, 'enabled', 'enabled', $modal-border, 4px, 18px, 8.5%, 45%); -@include make-modal-close-support($modal-class-name, $close-class-name, 20px); \ No newline at end of file +@include make-modal-close-support($modal-class-name, $close-class-name, 20px); +//==================================================================== +// Variable definitions for the Dropdown module (_dropdown.scss) +//==================================================================== +// Dropdown class names. +$dropdown-class-name: dropdown; // Name for the modal class +// Enable dropdown (_dropdown.scss). (Use individual mixins below to use.) +@import '../scss/mini-extra/dropdown'; +// Use dropdown mixin to create dropdown with given specs. For more information +// refer to the _dropdown.scss file to check the definitions. +@include make-dropdown($navigation-class-name, $navigation-link-name,$dropdown-class-name, 20px, 0.8em); \ No newline at end of file diff --git a/scss/flavor.scss b/scss/flavor.scss index b8a0667..6f3fd9d 100644 --- a/scss/flavor.scss +++ b/scss/flavor.scss @@ -297,4 +297,14 @@ $modal-border: 1px solid #ccc; // Border style for the modal // Use modal mixin to create modal with given specs. For more information // refer to the _modal.scss file to check the definitions. @include make-modal($modal-class-name, $modal-color, $modal-bg-color, 'enabled', 'enabled', $modal-border, 4px, 18px, 8.5%, 45%); -@include make-modal-close-support($modal-class-name, $close-class-name, 20px); \ No newline at end of file +@include make-modal-close-support($modal-class-name, $close-class-name, 20px); +//==================================================================== +// Variable definitions for the Dropdown module (_dropdown.scss) +//==================================================================== +// Dropdown class names. +$dropdown-class-name: dropdown; // Name for the modal class +// Enable dropdown (_dropdown.scss). (Use individual mixins below to use.) +@import 'mini-extra/dropdown'; +// Use dropdown mixin to create dropdown with given specs. For more information +// refer to the _dropdown.scss file to check the definitions. +@include make-dropdown($navigation-class-name, $navigation-link-name,$dropdown-class-name, 20px, 0.8em); \ No newline at end of file diff --git a/scss/mini-extra/_dropdown.scss b/scss/mini-extra/_dropdown.scss new file mode 100644 index 0000000..477abaa --- /dev/null +++ b/scss/mini-extra/_dropdown.scss @@ -0,0 +1,36 @@ +/* + Mixin for navigation bar's dropdown element. + Parameters: + - $nav-name : The class name for the navigation bar. [1] + - $nav-link-name : The class name for the navigation links of the navigation bar. [1] + - $dropdown-name : The class name for the dropdown element. [2] + - $dropdown-left-margin : The left margin of the dropdown element's contents. [3] + - $dropdown-font-size : The font size of the dropdown element's contents. + Notes: + - [1] : The values of $nav-name and $nav-link-name must match those specified in the navigation bar's + definition, otherwise the dropdown element will not work properly. + - [2] : The value of $dropdown-name is used in two distinct elements of the component, namely the + checkbox and the dropdown toggle. + - [3] : The value of $dropdown-left-margin will affect all open dropdown menus, as well as dropdown + menus on mobile screens. It is suggested that you set this value to something different than + 0 to visually represent the menu hierarchy in devices with smaller screens. +*/ +@mixin make-dropdown($nav-name, $nav-link-name, $dropdown-name, $dropdown-left-margin, $dropdown-font-size){ + .#{$nav-name}{ + & .#{$nav-link-name}.#{$dropdown-name}{ + cursor: pointer; + } + & input[type="checkbox"]{ + &.#{$dropdown-name} + div{ + display: none; + } + &:checked.#{$dropdown-name}{ + + div{ + display: block; + font-size: $dropdown-font-size; + margin-left: $dropdown-left-margin; + } + } + } + } +} \ No newline at end of file diff --git a/scss/mini/_nav.scss b/scss/mini/_nav.scss index 5bd276d..f93879a 100644 --- a/scss/mini/_nav.scss +++ b/scss/mini/_nav.scss @@ -65,7 +65,7 @@ display: inline-block; margin: 0; white-space: nowrap; - * { + > * { display: inline-block; padding: #{$nav-padding}; color: #{$nav-color}; @@ -93,7 +93,7 @@ display: block; li{ display: block; - * { + > * { width: 100%; padding: #{$nav-padding} 0; }