From 110f62a210e4afd19b5d384bc26dffc427f3af96 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Thu, 8 Sep 2016 10:55:22 +0300 Subject: [PATCH] Extra components: collapses and accordions --- README.md | 3 +- docs/index.html | 2 - flavors/mini-default.css | 80 ++++++++++++++++++++++++ flavors/mini-default.min.css | 2 +- flavors/mini-default.scss | 26 +++++++- scss/flavor.scss | 26 +++++++- scss/mini-extra/_collapse.scss | 108 +++++++++++++++++++++++++++++++++ 7 files changed, 240 insertions(+), 7 deletions(-) create mode 100644 scss/mini-extra/_collapse.scss diff --git a/README.md b/README.md index 804787d..defe563 100644 --- a/README.md +++ b/README.md @@ -18,11 +18,10 @@ A minimal Sass-y responsive mobile-first style-agnostic CSS framework. - **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 +- **collapse**: collapse and accordion components `GZIPPED SIZE`: 286 bytes TODO: - Components - - Collapse (checkbox based) - - Also accordion (radio based) - Progress bar styles (maybe also spinners) - Button groups (maybe) - Button states (checkbox based) diff --git a/docs/index.html b/docs/index.html index 0ee6f2c..1d76a58 100644 --- a/docs/index.html +++ b/docs/index.html @@ -155,8 +155,6 @@

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 f8c3340..3e0ffa3 100644 --- a/flavors/mini-default.css +++ b/flavors/mini-default.css @@ -1279,3 +1279,83 @@ img.thumb { display: block; font-size: 0.8em; margin-left: 20px; } + +/* + Mixin for collapse component. + Parameters: + - $collapse-name : The class name of the collapse component. + - $collapse-border : The border style of the collapse contents. + - $collapse-border-radius : The border radius of the collapse contents. + - $collapse-padding : The padding of the collapse contents. + - $collapse-margin-top : The margin above the collapse contents. [1] + - $collapse-color : The collapse contents' text color. + - $collapse-bg-color : The collapse contents' background color. + Notes: + - [1] : The value of $collapse-margin-top is used for spacing between the button label that is usually + above the collapsed contents and the contents themselves. +*/ +/* + Mixin for accordion component. + Parameters: + - $accordion-name : The class name of the accordion component. + - $accordion-border : The border style of the accordion component. + - $accordion-border-radius : The border radius of the accordion component. [1] + - $accordion-padding : The padding of the accordion's contents. + - $accordion-margin : The margin between accordion's parts. [2] + - $accordion-color : The accordion contents' text color. + - $accordion-bg-color : The accordion contents' background color. + - $accordion-label-color : The accordion labels' text color. + - $accordion-label-bg-color : The accordion labels' background color. + - $accordion-label-padding : The padding of the accordion's labels. + - $accordion-hover-style : Hover/active/focus style of the accordion's labels. [3] + - $accordion-hover-style-percentage : Hover/active/focus style of the accordion's labels percentage modifier. + Notes: + - [1] : The value of $accordion-border-radius will be applied to labels along with their contents. + Closed labels will have the border-radius applied to all of their corners, while open labels will + change accordingly to combine their border with the shown contents. + - [2] : The value of $accordion-margin will be applied only to margin-bottom of all parts in order + to space them out evenly. This does not apply to label and related content margins. + - [3] : The values that $accordion-hover-style can take are `lighten` and `darken`. The inside condition only + checks if the value is `lighten` and acts accordingly. Invalid values are treated as `darken`. +*/ +input[type="checkbox"].clps { + display: none; } + input[type="checkbox"].clps + div { + display: none; + color: #222; + background-color: #eeeeee; + padding: 10px; + margin-top: 5px; + border: 1px solid #ccc; + border-radius: 4px; } +input[type="checkbox"]:checked.clps + div { + display: block; } + +input[type="radio"].acrd { + display: none; } + input[type="radio"].acrd + label { + width: 100%; + display: block; + color: #222; + background-color: #eeeeee; + padding: 8px; + margin-bottom: 5px; + border: 1px solid #ccc; + border-radius: 4px; + cursor: pointer; } + input[type="radio"].acrd + label:hover, input[type="radio"].acrd + label:active, input[type="radio"].acrd + label:focus { + background: #dbdbdb; } + input[type="radio"].acrd + label + div { + display: none; + color: #222; + background-color: #f5f5f5; + padding: 10px; + margin-top: -1px; + margin-bottom: 5px; + border: 1px solid #ccc; + border-radius: 0 0 4px 4px; } +input[type="radio"]:checked.acrd + label { + border-radius: 4px 4px 0 0; + margin-bottom: 0; } + input[type="radio"]:checked.acrd + label + div { + display: block; } diff --git a/flavors/mini-default.min.css b/flavors/mini-default.min.css index 2575366..8df8192 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}.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 +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}input[type=checkbox].clps{display:none}input[type=checkbox].clps+div{display:none;color:#222;background-color:#eee;padding:10px;margin-top:5px;border:1px solid #ccc;border-radius:4px}input[type=checkbox]:checked.clps+div{display:block}input[type=radio].acrd{display:none}input[type=radio].acrd+label{width:100%;display:block;color:#222;background-color:#eee;padding:8px;margin-bottom:5px;border:1px solid #ccc;border-radius:4px;cursor:pointer}input[type=radio].acrd+label:active,input[type=radio].acrd+label:focus,input[type=radio].acrd+label:hover{background:#dbdbdb}input[type=radio].acrd+label+div{display:none;color:#222;background-color:#f5f5f5;padding:10px;margin-top:-1px;margin-bottom:5px;border:1px solid #ccc;border-radius:0 0 4px 4px}input[type=radio]:checked.acrd+label{border-radius:4px 4px 0 0;margin-bottom:0}input[type=radio]:checked.acrd+label+div{display:block} \ No newline at end of file diff --git a/flavors/mini-default.scss b/flavors/mini-default.scss index 5af4246..3ee8d74 100644 --- a/flavors/mini-default.scss +++ b/flavors/mini-default.scss @@ -307,4 +307,28 @@ $dropdown-class-name: dropdown; // Name for the modal class @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 +@include make-dropdown($navigation-class-name, $navigation-link-name,$dropdown-class-name, 20px, 0.8em); +//==================================================================== +// Variable definitions for the Collapse module (_collapse.scss) +//==================================================================== +// Collapse and accordion class names. +$collapse-class-name: clps; // Name for the collapse class +$accordion-class-name: acrd; // Name for the accordion class +// Collapse colors and styles (you can remove things you don't need or +// define more colors if you need them). +$collapse-border: 1px solid #ccc; // Border style for the collapse +$collapse-color: $body-color; // Color for the text in the collapse +$collapse-bg-color: #eeeeee; // Background color for the collapse +// Accordion colors and styles (you can remove things you don't need or +// define more colors if you need them). +$accordion-border: $collapse-border; // Border style for the accordion +$accordion-color: $collapse-color; // Color for the text in the accordion +$accordion-bg-color: $body-bg-color; // Background color for the accordion +$accordion-label-color: $collapse-color; // Color for the text in the accordion's label +$accordion-label-bg-color: $collapse-bg-color; // Background color for the accordion's label +// Enable collapse (_collapse.scss). (Use individual mixins below to use.) +@import '../scss/mini-extra/collapse'; +// Use collapse and accordion mixins to create components wit the given specs. +// For more information refer to the _collapse.scss file to check the definitions. +@include make-collapse($collapse-class-name, $collapse-border, 4px, 10px, 5px, $collapse-color, $collapse-bg-color); +@include make-accordion($accordion-class-name, $accordion-border, 4px, 10px, 5px, $accordion-color, $accordion-bg-color, $accordion-label-color, $accordion-label-bg-color, 8px, 'darken', 7.5%); \ No newline at end of file diff --git a/scss/flavor.scss b/scss/flavor.scss index 6f3fd9d..1138bb4 100644 --- a/scss/flavor.scss +++ b/scss/flavor.scss @@ -307,4 +307,28 @@ $dropdown-class-name: dropdown; // Name for the modal class @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 +@include make-dropdown($navigation-class-name, $navigation-link-name,$dropdown-class-name, 20px, 0.8em); +//==================================================================== +// Variable definitions for the Collapse module (_collapse.scss) +//==================================================================== +// Collapse and accordion class names. +$collapse-class-name: clps; // Name for the collapse class +$accordion-class-name: acrd; // Name for the accordion class +// Collapse colors and styles (you can remove things you don't need or +// define more colors if you need them). +$collapse-border: 1px solid #ccc; // Border style for the collapse +$collapse-color: $body-color; // Color for the text in the collapse +$collapse-bg-color: #eeeeee; // Background color for the collapse +// Accordion colors and styles (you can remove things you don't need or +// define more colors if you need them). +$accordion-border: $collapse-border; // Border style for the accordion +$accordion-color: $collapse-color; // Color for the text in the accordion +$accordion-bg-color: $body-bg-color; // Background color for the accordion +$accordion-label-color: $collapse-color; // Color for the text in the accordion's label +$accordion-label-bg-color: $collapse-bg-color; // Background color for the accordion's label +// Enable collapse (_collapse.scss). (Use individual mixins below to use.) +@import 'mini-extra/collapse'; +// Use collapse and accordion mixins to create components wit the given specs. +// For more information refer to the _collapse.scss file to check the definitions. +@include make-collapse($collapse-class-name, $collapse-border, 4px, 10px, 5px, $collapse-color, $collapse-bg-color); +@include make-accordion($accordion-class-name, $accordion-border, 4px, 10px, 5px, $accordion-color, $accordion-bg-color, $accordion-label-color, $accordion-label-bg-color, 8px, 'darken', 7.5%); \ No newline at end of file diff --git a/scss/mini-extra/_collapse.scss b/scss/mini-extra/_collapse.scss new file mode 100644 index 0000000..871841c --- /dev/null +++ b/scss/mini-extra/_collapse.scss @@ -0,0 +1,108 @@ +/* + Mixin for collapse component. + Parameters: + - $collapse-name : The class name of the collapse component. + - $collapse-border : The border style of the collapse contents. + - $collapse-border-radius : The border radius of the collapse contents. + - $collapse-padding : The padding of the collapse contents. + - $collapse-margin-top : The margin above the collapse contents. [1] + - $collapse-color : The collapse contents' text color. + - $collapse-bg-color : The collapse contents' background color. + Notes: + - [1] : The value of $collapse-margin-top is used for spacing between the button label that is usually + above the collapsed contents and the contents themselves. +*/ +@mixin make-collapse( $collapse-name, $collapse-border, $collapse-border-radius, $collapse-padding, + $collapse-margin-top, $collapse-color, $collapse-bg-color ){ + input[type="checkbox"]{ + &.#{$collapse-name}{ + display: none; + & + div{ + display: none; + color: $collapse-color; + background-color: $collapse-bg-color; + padding: $collapse-padding; + margin-top: $collapse-margin-top; + border: $collapse-border; + border-radius: $collapse-border-radius; + } + } + &:checked.#{$collapse-name}{ + & + div{ + display: block; + } + } + } +} +/* + Mixin for accordion component. + Parameters: + - $accordion-name : The class name of the accordion component. + - $accordion-border : The border style of the accordion component. + - $accordion-border-radius : The border radius of the accordion component. [1] + - $accordion-padding : The padding of the accordion's contents. + - $accordion-margin : The margin between accordion's parts. [2] + - $accordion-color : The accordion contents' text color. + - $accordion-bg-color : The accordion contents' background color. + - $accordion-label-color : The accordion labels' text color. + - $accordion-label-bg-color : The accordion labels' background color. + - $accordion-label-padding : The padding of the accordion's labels. + - $accordion-hover-style : Hover/active/focus style of the accordion's labels. [3] + - $accordion-hover-style-percentage : Hover/active/focus style of the accordion's labels percentage modifier. + Notes: + - [1] : The value of $accordion-border-radius will be applied to labels along with their contents. + Closed labels will have the border-radius applied to all of their corners, while open labels will + change accordingly to combine their border with the shown contents. + - [2] : The value of $accordion-margin will be applied only to margin-bottom of all parts in order + to space them out evenly. This does not apply to label and related content margins. + - [3] : The values that $accordion-hover-style can take are `lighten` and `darken`. The inside condition only + checks if the value is `lighten` and acts accordingly. Invalid values are treated as `darken`. +*/ +@mixin make-accordion( $accordion-name, $accordion-border, $accordion-border-radius, $accordion-padding, + $accordion-margin, $accordion-color, $accordion-bg-color, $accordion-label-color, + $accordion-label-bg-color, $accordion-label-padding, $accordion-hover-style, + $accordion-hover-style-percentage ){ + input[type="radio"]{ + &.#{$accordion-name}{ + display: none; + & + label{ + width: 100%; + display: block; + color: $accordion-label-color; + background-color: $accordion-label-bg-color; + padding: $accordion-label-padding; + margin-bottom: $accordion-margin; + border: $accordion-border; + border-radius: $accordion-border-radius; + cursor: pointer; + &:hover, &:active, &:focus{ + @if $accordion-hover-style == 'lighten'{ + background: lighten($accordion-label-bg-color, $accordion-hover-style-percentage); + } + @else{ + background: darken($accordion-label-bg-color, $accordion-hover-style-percentage); + } + } + & + div{ + display: none; + color: $accordion-color; + background-color: $accordion-bg-color; + padding: $accordion-padding; + margin-top: -1px; + margin-bottom: $accordion-margin; + border: $accordion-border; + border-radius: 0 0 $accordion-border-radius $accordion-border-radius; + } + } + } + &:checked.#{$accordion-name}{ + & + label{ + border-radius: $accordion-border-radius $accordion-border-radius 0 0; + margin-bottom: 0; + & + div{ + display: block; + } + } + } + } +} \ No newline at end of file