From 1fc15a9ded3b78f5756d850f7abbad60f1afd9ed Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Fri, 26 Aug 2016 12:10:27 +0300 Subject: [PATCH] Quick demo page, default flavor built, cleanup needed --- css/mini-full.css | 9 +- css/mini-full.min.css | 2 +- docs/favicon.png | Bin 0 -> 2890 bytes docs/index.html | 93 +++ flavors/mini-default.css | 1050 ++++++++++++++++++++++++++++++++++ flavors/mini-default.min.css | 1 + flavors/mini-default.scss | 93 +++ scss/mini/_nav.scss | 5 +- scss/mini/_variables.scss | 2 +- testpage.html | 2 +- 10 files changed, 1250 insertions(+), 7 deletions(-) create mode 100644 docs/favicon.png create mode 100644 flavors/mini-default.css create mode 100644 flavors/mini-default.min.css create mode 100644 flavors/mini-default.scss diff --git a/css/mini-full.css b/css/mini-full.css index bd3c6f1..8d5518f 100644 --- a/css/mini-full.css +++ b/css/mini-full.css @@ -381,10 +381,10 @@ textarea { margin: 2px 0; padding: 6px 12px; color: #2a2a2a; - background: #c2c2c2; + background: #eaeaea; cursor: pointer; } .btn:hover, .btn:active, .btn:focus, a.btn:hover, a.btn:active, a.btn:focus, a.btn:visited:hover, a.btn:visited:active, a.btn:visited:focus { - background: #d5d5d5; } + background: #fdfdfd; } .btn.disabled, .btn[disabled], .btnfieldset[disabled], a.btn.disabled, a.btn[disabled], a.btnfieldset[disabled], a.btn:visited.disabled, a.btn:visited[disabled], a.btn:visitedfieldset[disabled] { cursor: not-allowed; opacity: 0.65; } @@ -966,7 +966,8 @@ img.thumb { box-sizing: border-box; background-color: #ddd; } .nav .logo { - font-size: 135%; } + font-size: 135%; + color: #272727; } .nav ul { display: inline-block; list-style: none; @@ -982,6 +983,7 @@ img.thumb { color: #272727; margin: 0; } .nav ul li .link:hover, .nav ul li .link:active, .nav ul li .link:focus { + color: #272727; background: #cacaca; } .nav ul li .link.disabled, .nav ul li .link[disabled] { cursor: not-allowed; @@ -1012,6 +1014,7 @@ img.thumb { margin: 10px; font-size: 1.75em; padding: 8px; + color: #272727; background-color: #ddd; width: auto; position: fixed; diff --git a/css/mini-full.min.css b/css/mini-full.min.css index cd24099..0e0efe4 100644 --- a/css/mini-full.min.css +++ b/css/mini-full.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:#c2c2c2;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:#d5d5d5}.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}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}.nav{box-sizing:border-box;background-color:#ddd}.nav .logo{font-size:135%}.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:#272727;margin:0}.nav ul li .link:active,.nav ul li .link:focus,.nav ul li .link:hover{background:#cacaca}.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;background-color:#ddd;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:#cacaca}@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'}} \ 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}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}.nav{box-sizing:border-box;background-color:#ddd}.nav .logo{font-size:135%;color:#272727}.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:#272727;margin:0}.nav ul li .link:active,.nav ul li .link:focus,.nav ul li .link:hover{color:#272727;background:#cacaca}.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:#272727;background-color:#ddd;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:#cacaca}@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'}} \ No newline at end of file diff --git a/docs/favicon.png b/docs/favicon.png new file mode 100644 index 0000000000000000000000000000000000000000..20445299d07950af6e7de762f7b16a0e819b8b08 GIT binary patch literal 2890 zcmeH}Sx^&37{@m;s9X_=1Ij6aK}te6MC3k10xATg$|08sMaAJrDt9o7S`j5JASw~? zDo_=|Q9ubbi6B@4ff~jD2@*x*DssdIA%Qf!v@?ui`_Ml5u=C&h+u8rl{=Q6aFRZeH zh5`UU*~8s+KLAi!6$;iaNvg)Ka+yE~`>`&df~_?wYrvwMJ)HrlA}dM`%gNgEaqa;G z0N_na1=1Q@76E|5fQPH|*GVB0e4iKuPu0mMNmr?v5Vp7~%q{I^l+nTFtv%*dG~&J4 zK$ix#di;UnnyTA;YAI(_5!g#<5_Qr>2)LjMNZVGBGTLIOlVkcAjA1Z9UubA-V0XY( zwgTV-1s@Ue;+7tJdNg3D=``LTLO;9vN|C>et!T`@zMirr=VxXbbRDS)uf_GDSN-1e zlS~~t5VeKF?^q=VrvyVNAjv?-NO*Q(t2b?&lKArG7M9u@H%r~I%qg*WTJCu+{f*du-IY&%@x&} zN4wiT_dx|2i=Gk!oVtC;#j})~haFi>jLYUwjCNI0t=?9y(|0h(jwFr`7>WK^v#PgXPA9)f=og(mBnj^2hHhe& zD9w`i$oldfTC9c+VWajDdkyT6P8Q#&qE5W2Tdn=Qw^q)nnZEdd7j*NgQj4yPoyE$n zgNP8z?W}n%LaGVJ4qEzpy)AB1!tLei@0-lLgtr@h6;JEvsxEqM=a!qMuuH4mEa|p3 z@>oD;WD(hd`IFrOu71>gB1i?RK1y)lY}A0?+Q|ciw$5WF69M zpH+!M&UBl!or9j}K-X-km!d?q8k&!C&Csniw40iHt1xfpQ)~)NFjU&~g;P?|_{>;b zfywU#4#D1YjPH?Xf_k?F~)h3;XP8>lC<2R2t zu4m1UFzPupP2Qv730&}m9vc6g-Pyq_W^pxpUQv6P3gW)QIRq<9t6$*ss7xF=w9_Kp(9UxKj&GQ9`)rTL9k*` zgcZy3K02ED-7vL<7}0xubVGSsiaI@jt=`5?yck)f4LN!pAKs6O%E&*NTx*~UjWI3w zKHl$m9mKa{F|pUv(-6oHn&c%iDUt6=@)y{|wGUf@vSa793yzZ_s|+DKtA)qxT29N} zY5vnin4l7#04Ed6{napfp!E$5j(--J48^LDR@sd85`5Uz-G_t(0o^?BjhdFMA7{x9}^Fk@hmcv!7sJjXX_{X*Weo*5r29TSVDZqGREk(4 z1Sx7J;IcC;3?wR4%0UEcx8r4JJPUxUJY!69=$HyCTx}Ue{0nryf`4Xd5Di-?aP#p zAGPz#*$ imi~>E<@r^Nbj`qn;8}@*N|r4D1s=P-Tq|6{&io0g*<_#q literal 0 HcmV?d00001 diff --git a/docs/index.html b/docs/index.html index e69de29..5e407fb 100644 --- a/docs/index.html +++ b/docs/index.html @@ -0,0 +1,93 @@ + + + + mini.css - A minimal Sass-y responsive mobile-first style-agnostic CSS framework + + + + + + + + + + +
+ + +
+ +
+
+
+
+
+

mini.css a minimal Sass-y responsive mobile-first style-agnostic CSS framework

+

If you want to create your own flavor, get involved or report an issue, head over to mini.css's Github page. If you want to give mini.css a try using the default flavor, paste the following code inside your HTML page's <head> tag:

+ 
<link rel="stylesheet" href="https://github.com/Chalarangelo/mini.css/tree/master/flavors/mini-default.min.css">
+ + +
+ +

Why mini.css?

+

mini.css is a very light framework without any Javascript or excessive styling, that allows you to quickly build your own styles exactly the way you want them. Also, it works great on mobile devices. So, the three main reasons to give it a try are

+
    +
  • Size
    • +
  • Responsiveness
    • +
  • Customization
    • +
+

mini.css is tiny

+

mini.css is really small, just below 3KB gzipped, making it ideal if you want to build a page that load really fast. Comparing this to Twitter Bootstrap, one of the most popular frameworks out there which is about 100KB gzipped, you can probably see why you might want to try out mini.css.

+ +

mini.css is mobile-friendly

+

Mobile devices are becoming more and more important when designing for web and mini.css knows that. In fact, it is built with mobile devices as a priority, not an afterthought. What this means is that your websites will work well on mobile devices without a lot of tweaking.* If you are not convinced, open this page in your phone.

+ (*): We do not want to claim that any website will ever instantly work 100% the way you want on mobile, but mini.css eliminates a lot of the tedious work of making your websites mobile-friendly, so you can focus on the interesting parts that actually need your attention. + +

mini.css is style-agnostic

+

mini.css does not force you to use some default colors that make all websites look similar. In fact it does not force you to use any styling that is preset by the author of the framework. It comes in flavors. That's right, everything is customizable to the point that you can make it look entirely different from almost any other website built with mini.css. How? Well, using the very powerful features that Sass (SCSS) provides and by having a well-documented Wiki to help you customize it as much as you like.

+
+ +

Core modules

+

Frameworks are all about modules. Some are important, others not so much. This is why mini.css allows you to pick which modules you want in your custom flavor. We have already separated them into core modules and extras, so that you can easily choose what you like. What we think is vital to the core experience:

+ +

Base

+

By using a modified version of normalize.css combined with a long list of variables, a customized base is created that makes your pages work well in all browsers and devices. The base is usually about 1.2KB* making it so tiny you'll hardly even notice it in page loading. Also, the framework's base contains your customized typography rules and colors.

+ +

Responsive grid

+

mini.css comes with a reponsive grid that lets you build pages that look great on all devices without having to constantly tweak your page's layout. It can be customized to as many columns as you like, too, and it's only about 450 bytes.*

+ +

Navigation

+

Navigation is made simple with the navigation bar module, that lets you build customized navigation bars that work great in mobile devices. These navigation elements are probably one of the heavier modules at about 530 bytes.*

+ +

Tables

+

Instead of the old-school default tables that you usually see, you can style them the way you like them without overloading your page. The tables module is about 250 bytes* and allows you to utilise a variety of styles for your tables.

+ +

Forms

+

Custom styling for forms is also available as a module and it allows you to make pretty forms the way you like them, without a lot of effort. Another reasonably heavy component in comparison to some other, with its size being about 520 bytes.*

+ +

Buttons

+

Button styles are tiny and they work great without excessive fluff. You can have as many as you like and they almost do not affect your page's performance, as their size is about 430 bytes.*

+ +

Utilities and helper classes

+

Lots of things that you might use quite often are not included in the framework's base module. This is where the utilities module comes in with a variety of classes for quick floats, centering content, making generic borders and simple icons or just hiding elements. This module is entirely customizable, allowing you to pick any pieces you like, but in total its size is about 450 bytes.*

+ + (*): Size metrics are based on gzipped size of each module for the default flavor. Your flavor might be larger or smaller, depending on how you use the variables provided. However, for most cases, the provided metrics are representative of your final size. Combining all modules might make your final gzipped CSS file smaller than the sum of the modules' sizes. +

+ +

Customization

+

mini.css does not force you to use a default style, instead it claims to be style-agnostic and wears this title like a badge, allowing you to create unique flavors that you can use any way you like. You can customize virtually anything using the provided Sass mixins and variables, so that you include exactly what you want in your stylesheet without any excessive styles. Or you can build a bunch of flavors and change them on the fly to see what fits better. It's up to you, the developer, to design a great website and we do not want to take that away from you. We just provide the tools and you can use them in any way you see fit. by the way, the wiki is a great place for you to start customizing your flavor!

+
+ +

Extra modules

+

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

+ +
+
+
+ + \ No newline at end of file diff --git a/flavors/mini-default.css b/flavors/mini-default.css new file mode 100644 index 0000000..4c16b38 --- /dev/null +++ b/flavors/mini-default.css @@ -0,0 +1,1050 @@ +/* + Set font-family, line-height, prevent adjustments of font size after orientation changes in IE and iOS. + Set body colors and margin. +*/ +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; } + +/* + Correct display in IE 9-. + Give images display: block to be responsive. +*/ +article, aside, footer, header, nav, section, figcaption, figure, main, details, menu, img { + display: block; } + +/* + Correct margin in IE 8. +*/ +figure { + margin: 1em 40px; } + +/* + Styles for headers. +*/ +h1, h2, h3, h4, h5, h6 { + line-height: 1.2; + margin: 0.7em 0; + font-weight: 500; } + h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { + color: #555555; + font-weight: 200; } + +h1 { + font-size: 2em; } + +h2 { + font-size: 1.5em; } + +h3 { + font-size: 1.15em; } + +h4 { + font-size: 1em; } + +h5 { + font-size: 0.8em; } + +h6 { + font-size: 0.7em; } + +/* + Correct box-sizing in Firefox. + Style for horizontal rule. +*/ +hr { + box-sizing: content-box; + line-height: 1.2; + margin: 0.7em 0; + height: 0; + border: 0; + border-top: 1px solid #cfcfcf; } + +/* + Style for all small text and size for sub and sup. +*/ +small, sub, sup { + font-size: 75%; } + +/* + Style for paragraph and preformatted elements. +*/ +p, pre { + margin: 0 0 0.6em; } + +/* + Style for lists. +*/ +ul, ol { + margin-top: 0; + margin-bottom: 0.6em; } + ul ul, ul ol, ol ul, ol ol { + margin-bottom: 0; } + +/* + Styles for code and preformatted. +*/ +samp, kbd, code, pre { + font-family: monospace, monospace; + font-size: 1em; } + +kbd, code, pre { + padding: 2px 4px; + border-radius: 4px; } + +code, pre { + background-color: gainsboro; } + +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; } + +/* + Style for hyperlinks, remove underline. + Remove gray background on active links in IE 10. + Remove outline on focused links when they are also active or hovered. +*/ +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; } + +/* + Prevent the duplicate application of `bolder` in Safari 6. +*/ +b, strong { + font-weight: inherit; } + +/* + Correct font weight in Chrome, Edge, Safari. +*/ +b, strong { + font-weight: bolder; } + +/* + Correct font style in Android 4.3-. +*/ +dfn { + font-style: italic; } + +/* + Remove botom border in Firefox 39-. + Correct text decoration in Chrome, Edge, IE, Opera, and Safari. +*/ +abbr[title] { + border-bottom: none; + text-decoration: underline; + text-decoration: underline dotted; } + +/* + Style for mark. +*/ +mark { + background-color: #ffff33; + color: #222; } + +/* + Styling for hidden elements. + Correct display for template in IE. + Correct display for audio:not([controls]) in iOS 4-7. +*/ +[hidden], .hidden, template, audio:not([controls]) { + display: none; } + +audio:not([controls]) { + height: 0; } + +/* + Correct display in IE 9-. +*/ +audio, video, progress { + display: inline-block; } + +/* + Styles for sub and sup. + Prevent `sub` and `sup` elements from affecting the line height. + Correct vertical alignment of progress in Chrome, Firefox, and Opera. +*/ +sub, sup, progress { + vertical-align: baseline; } + +sub, sup { + line-height: 0; + position: relative; } + +sub { + bottom: -0.25em; } + +sup { + top: -0.5em; } + +/* + Remove the border on images inside links in IE 10-. + Make images responsive. +*/ +img { + border-style: none; + max-width: 100%; } + +/* + Hide the overflow in IE. +*/ +svg:not(:root) { + overflow: hidden; } + +/* + Show the overflow in IE and Edge. +*/ +button, input, hr { + overflow: visible; } + +/* + Style for buttons and input elements. +*/ +button, input, optgroup, select, textarea { + font-family: '"Helvetica Neue", Helvetica, sans-serif'; + font-size: 100%; + line-height: 1.2; + margin: 0; } + +/* + Remove the inheritance of text transform in Edge, Firefox, and IE. +*/ +button, select { + text-transform: none; } + +/* + Correct styling for iOS, Safari and Firefox. +*/ +button, html [type="button"], [type="reset"], [type="submit"] { + -webkit-appearance: button; } + button::-moz-focus-inner, html [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; } + button:-moz-focusring, html [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; } + +/* + Style for fieldset. +*/ +fieldset { + border: 1px solid #cfcfcf; + border-radius: 4px; + margin: 0 2px; + padding: 0.35em 0.65em 0.75em; } + +/* + Add correct box sizing and remove padding in IE 10-. +*/ +[type="checkbox"], [type="radio"], legend { + box-sizing: border-box; + padding: 0; } + +/* + + Correct text wrapping and color inheritance from `fieldset` elements in Edge and IE. + Remove the padding so developers are not caught out when they zero out `fieldset` + elements in all browsers. +*/ +legend { + color: inherit; + display: table; + max-width: 100%; + white-space: normal; } + +/* + Remove the default vertical scrollbar in IE. +*/ +textarea { + overflow: auto; } + +/* + Correct the cursor style of increment and decrement buttons in Chrome. + Make images responsive. +*/ +[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button, img { + height: auto; } + +/* + Correct styling in Chrome and Safari. + Remove the inner padding and cancel buttons in Chrome and Safari on OS X. +*/ +[type="search"] { + -webkit-appearance: textfield; + outline-offset: -2px; } + [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { + -webkit-appearance: none; } + +/* + Correct the inability to style clickable types in iOS and Safari. + Change font properties to `inherit` in Safari. +*/ +::-webkit-file-upload-button { + -webkit-appearance: button; + font: inherit; } + +/* + Mixin for button color variant. + Parameters: + - $btn-variant-color : The text color of the button variant. + - $btn-variant-bg-color : The background color of the button variant. + - $btn-variant-hover-style : Hover/active/focus style of the button variant. [1] + - $btn-variant-hover-style-percentage : Hover/active/focus style of the button variant percentage modifier. + Notes: + - [1] : The values that $btn-variant-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`. + - [2] : Do not use this mixin directly, use `make-btn-style` instead. +*/ +/* + Mixin for the buttons. + Parameters: + - $btn-name : The class name of the buttons. + - $btn-border : The border of the buttons. + - $btn-border-radius : The border-radius of the buttons. + - $btn-margin : The margin of the buttons. + - $btn-padding : The padding of the buttons. + - $btn-color : The text color of the buttons. + - $btn-bg-color : The background color of the buttons. + - $btn-hover-style : Hover/active/focus style of the buttons. [1] + - $btn-hover-style-percentage : Hover/active/focus style of the buttons percentage modifier. + - $btn-cursor : The cursor style when hovering over the buttons. + - $btn-disabled-cursor : The cursor style when hovering over the buttons whie disabled. + - $btn-disabled-opacity : The opacity of the buttons when disabled. + Notes: + - [1] : The values that $btn-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`. + - [2] : This only creates a basic button style. For more styles use `make-btn-style`. +*/ +/* + Mixin for button styles. + Parameters: + - $btn-name : The class name of the buttons. [1] + - $btn-style-name : The class name of the button style. + - $btn-style-color : The text color of the button style. + - $btn-style-bg-color : The background color of the button style. + - $btn-style-hover-style : Hover/active/focus style of the button style. [2][3] + - $btn-style-hover-style-percentage : Hover/active/focus style of the button style percentage modifier.[3] + Notes: + - [1] : The value of $btn-name must be the same as the value specified when using `make-btn`, otherwise + the specified style will not work correctly. + - [2] : The values that $btn-style-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`. + - [3] : The values of $btn-style-hover-style and $btn-style-hover-style-percentage default to `lighten` + and `7.5%` if not specified. + - [4] : This mixin should be used in combination with `make-btn` and is suggested that you use it after + `make-btn`. +*/ +/* + Mixin for button sizes. + Parameters: + - $btn-name : The class name of the buttons. [1] + - $btn-size-name : The class name of the button size. + - $btn-size-padding : The padding of the button size. + - $btn-size-font-size : The font-size of the button size. + Notes: + - [1] : The value of $btn-name must be the same as the value specified when using `make-btn`, otherwise + the specified style will not work correctly. + - [2] : This mixin should be used in combination with `make-btn` and is suggested that you use it after + `make-btn`. +*/ +.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:hover, .btn:active, .btn:focus, a.btn:hover, a.btn:active, a.btn:focus, a.btn:visited:hover, a.btn:visited:active, a.btn:visited:focus { + background: #d7d7d7; } + .btn.disabled, .btn[disabled], .btnfieldset[disabled], a.btn.disabled, a.btn[disabled], a.btnfieldset[disabled], a.btn:visited.disabled, a.btn:visited[disabled], a.btn:visitedfieldset[disabled] { + cursor: not-allowed; + opacity: 0.65; } + +.btn.blue, a.btn.blue, a.btn.blue:visited { + color: #eeeeee; + background: #337ab7; } + .btn.blue:hover, .btn.blue:active, .btn.blue:focus, a.btn.blue:hover, a.btn.blue:active, a.btn.blue:focus, a.btn.blue:visited:hover, a.btn.blue:visited:active, a.btn.blue:visited:focus { + background: #2b6699; } + +.btn.green, a.btn.green, a.btn.green:visited { + color: #eeeeee; + background: #5cb85c; } + .btn.green:hover, .btn.green:active, .btn.green:focus, a.btn.green:hover, a.btn.green:active, a.btn.green:focus, a.btn.green:visited:hover, a.btn.green:visited:active, a.btn.green:visited:focus { + background: #48a648; } + +.btn.red, a.btn.red, a.btn.red:visited { + color: #eeeeee; + background: #d9534f; } + .btn.red:hover, .btn.red:active, .btn.red:focus, a.btn.red:hover, a.btn.red:active, a.btn.red:focus, a.btn.red:visited:hover, a.btn.red:visited:active, a.btn.red:visited:focus { + background: #d23430; } + +.btn.lg { + padding: 9px 15px; + font-size: 135%; } + +.btn.sm { + padding: 4px 8px; + font-size: 80%; } + +/* + Mixin for responsive, mobile-first grid. + Parameters: + - $container-name : The class name of the container for the grid. + - $container-padding : The left and right padding of the container. [1] + - $row-name : The class name of the grid's rows. + - $col-name : The class name of the grid's columns. + - $col-number : The amount of columns in the grid. + - $xs-prefix : Class prefix for extra small screens. + - $sm-prefix : Class prefix for small screens. + - $md-prefix : Class prefix for medium screens. + - $lg-prefix : Class prefix for large screens. + - $hide-suffix : Class suffix for hidden columns. [2] + - $sm-breakpoint : Breakpoint for small screens. + - $md-breakpoint : Breakpoint for medium screens. + - $lg-breakpoint : Breakpoint for large screens. + Notes: + - [1] : The padding of the container might cause the page to grow by $container-padding to the right. This + can be fixed either via @media queries or setting the padding to 0. + - [2] : Columns with the $hide-suffix will be only hidden in the screen size specified. + - [3] : Refer to https://github.com/Chalarangelo/mini.css/wiki/Grid for additional information. +*/ +.grid-container { + padding-right: 0; + padding-left: 0; + margin-right: auto; + margin-left: auto; + width: 100%; } + .grid-container * { + box-sizing: border-box; } + +.row:before, .row:after { + 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%; } + +.sm-no, +.md-no, +.lg-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%; } + + .xs-no, + .md-no, + .lg-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%; } + + .xs-no, + .sm-no, + .lg-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%; } + + .xs-no, + .sm-no, + .md-no { + display: block; } + + .lg-no { + display: none; } } +/* + Mixin for the forms. + Parameters: + - $frm-name : The class name of the form. + - $frm-border : The border of the form elements. + - $frm-border-radius : The border-radius of the form elements. + - $frm-margin : The margin of the form elements. + - $frm-padding : The padding of the form elements. + - $frm-focus-color : The color used to mark the focused form element. + - $frm-invalid-color : The color used to mark an invalid form element. + - $frm-disabled-cursor : The cursor style when hovering over disabled form elements. + - $frm-disabled-opacity : The opacity of the form elements when disabled. + - $frm-readonly-bg-color : The background color of the form elements when they are readonly. + - $frm-readonly-border-color : The border color of the form elements when they are readonly. + - $frm-select-height : The height for non-multiline select elements in the form. + - $frm-label-margin : The margin for the form's label elements. + - $frm-ctrl-group-name : The class name of the control groups in the form. + - $frm-ctl-group-margin : The margin for control groups inside the form. + - $frm-inline-name : The class name for forms with inline style. + - $frm-aligned-name : The class name for forms with aligned style. + - $frm-aligned-label-width : The width of labels in forms with aligned style. + Notes: + - [1] : Input elements with button-like style (i.e. submit, reset, button etc.) are not affected by form styling. + Please use the button styles and mixins provided to properly style them to your liking. +*/ +.frm input[type="color"], .frm input[type^="date"], .frm input[type$="time"], .frm input[type="email"], +.frm input[type="month"], .frm input[type="week"], .frm input[type="text"], .frm input[type="password"], +.frm input[type="url"], .frm input[type="number"], .frm input[type="search"], .frm input[type="tel"], +.frm select, .frm textarea { + box-sizing: border-box; + border: 1px solid #ccc; + border-radius: 4px; + box-shadow: none; } +.frm input:not([type]) { + box-sizing: border-box; + border: 1px solid #ccc; + border-radius: 4px; + box-shadow: none; } +.frm input, .frm select, .frm textarea { + display: block; + margin: 0.2em; + padding: 0.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: 0.65; } + .frm input:invalid, .frm input:focus:invalid, .frm input:focus:invalid:focus, .frm select:invalid, .frm select:focus:invalid, .frm select:focus:invalid:focus, .frm textarea:invalid, .frm textarea:focus:invalid, .frm textarea:focus:invalid:focus { + border-color: #e9322d; } + .frm input[readonly], .frm select[readonly], .frm textarea[readonly] { + background-color: gainsboro; + 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: 0.5em 0 0 0.2em; } +.frm.inline input, .frm.inline select, .frm.inline textarea, .frm.inline label, .frm.aligned input, .frm.aligned select, .frm.aligned textarea, .frm.aligned label { + display: inline-block; } +.frm.inline .ctrl-group { + 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 0.3em 0; } + +/* + Mixin for the tables. + Parameters: + - $tbl-name : The class name of the table. + - $tbl-border : The border of the table and cells. [1] + - $tbl-margin : The margin of the table cells. + - $tbl-padding : The padding of the table cells. + - $tbl-head-bg-color : The color of the thead background. + - $tbl-head-color : The color of the thead text. + - $tbl-body-bg-color : The color of the even-numbered rows in tbody. + - $tbl-body-alt-bg-color : The color of the odd-numbered rows in tbody. + - $tbl-body-color : The color of the text in tbody. + - $tbl-horizontal-name : The class name for the horizontal style table. + - $tbl-bordered-name : The class name for the bordered style table. + Notes: + - [1] : This style will apply to the table and cells. All styles applied to + the table (horizontal, bordered) will use the same style of border. +*/ +.tbl { + border-collapse: collapse; + border-spacing: 0; + empty-cells: show; + border: 1px solid #777; } + .tbl td, .tbl th { + overflow: visible; + border-left: 1px solid #777; + border-bottom: none; + margin: 0; + padding: 0.5em; } + .tbl thead { + background-color: #4e4e4e; + color: #f5f5f5; + text-align: left; } + .tbl tbody { + background-color: #ddd; + color: #111; } + .tbl tbody tr:nth-child(2n-1) { + background-color: #f4f4f4; } + .tbl.hor td, .tbl.hor th { + border-left: none; + border-bottom: 1px solid #777; } + .tbl.bor td, .tbl.bor th { + border-bottom: 1px solid #777; } + +/* + Image thumbnail style mixin. [1] + Parameters: + - $thumb-name : The class name for the thumbnail style. + - $thumb-padding : The padding between the image and the border. + - $thumb-border : The style of the thumbnail's border. + - $thumb-border-radius : The border radius of the thumbnail. + Notes: + - [1] : This style only applies to `img` elements with the class specified in + `$thumb-name`. +*/ +/* + Mixin for generic border style. + Parameters: + - $border-generic-name : The class name for the generic border. + Notes: + - [1] : The border style uses rgba to create a 1px solid border with 0.25 + opacity around an element, which makes it look properly bordered. + Might be incompatible with older browsers. + - [2] : The border style overwrites any border style as it uses + `!important`, exercise caution when using. +*/ +/* + Mixin for generic border radius styles. + Parameters: + - $border-style-name : The class name for the generic border radius style. + - $border-style-radius : The radius for the generic border radius style. + Notes: + - [1] : The border style overwrites any border style as it uses + `!important`, exercise caution when using. +*/ +/* + Mixin for generic contextual color text styles. + Parameters: + - $colored-text-name : The class name for the contextual color text style. + - $colored-text-color : The color for the contextual color text style. + Notes: + - [1] : The contextual color text style overwrites any text color as it uses + `!important`, exercise caution when using. +*/ +/* + Mixin for generic contextual background text styles. + Parameters: + - $colored-bg-text-name : The class name for the contextual background text style. + - $colored-bg-text-color : The background color for the contextual background text style. + Notes: + - [1] : The contextual background text style overwrites any text color as it + uses `!important`, exercise caution when using. +*/ +/* + Mixin for simple caret utility class. + Parameters: + - $caret-name : The class name for caret utility class. + - $caret-size : The size of the caret utility element. [1] + - $caret-color : The color of the caret utility element. + Notes: + - [1] : The caret is built using the border trick. Sizes can be specified + in either `px` or `em`, but they might take a bit of tweaking to + get right. +*/ +/* + Mixin for simple close sign utility class. + Parameters: + - $close-name : The class name for close utility class. + - $close-color : The color of the close utility element. + - $close-cursor : The cursor for the close utility element. + - $close-font-size : The font-size for the close utility element. + - $close-font-weight : The font-weight for the close utility element. + - $close-hover-color : The color of the close utility element when hovering over it. +*/ +/* + Mixin for quick float classes. [1] + Parameters: + - $drag-left-name : The class name for left drags. + - $drag-right-name : The class name for right drags. + Notes: + - [1] : These classes use `!important` to set the float properties, + exercise caution when using. +*/ +/* + Mixin for center block class. + Parameters: + - $center-block-name : The class name for center block class. +*/ +/* + Mixin for clearfix class. + Parameters: + - $clearfix-name : The class name for the clearfix class. +*/ +/* + Mixin for hidden class. [1] + Parameters: + - $hidden-name : The class name for hidden elements. + Notes: + - [1] : This class uses `!important` to set the display property, + exercise caution when using. +*/ +img.thumb { + padding: 0.25em; + border: 1px solid #ccc; + border-radius: 4px; } + +.bordered { + border: 1px solid rgba(0, 0, 0, 0.25) !important; } + +.rounded { + border-radius: 4px !important; } + +.circle { + border-radius: 50% !important; } + +.txt-blue { + color: #337ab7 !important; } + +.txt-green { + color: #5cb85c !important; } + +.txt-red { + color: #d9534f !important; } + +.bg-blue { + background-color: #337ab7 !important; } + +.bg-green { + background-color: #5cb85c !important; } + +.bg-red { + background-color: #d9534f !important; } + +.caret { + display: inline-block; + vertical-align: middle; + line-height: 1; + width: 0; + height: 0; + border-left: 0.35em solid transparent; + border-right: 0.35em solid transparent; + border-top: 0.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:before, .cf:after { + content: ""; + display: table; + clear: both; } + +.hidden { + display: none !important; } + +/* + Mixin for navigation bar and complementary styles. + Parameters: + - $nav-name : The class name for the navigation bar. + - $nav-vertical-name : The class name for the vertical style of the navigation bar. + - $nav-fixed-name : The class name for the fixed style of the navigation bar. + - $nav-logo-name : The class name for the logo item of the navigation bar. + - $nav-logo-size : The font-size of the logo item of the navigation bar. + - $nav-link-name : The class name for the navigation links of the navigation bar. + - $nav-padding : The padding of the elements of the navigation bar. [1] + - $nav-color : The text color of the navigation elements. + - $nav-bg-color : The background color of the navigation bar. + - $nav-hover-style : Hover/active/focus style of the navigation elements. [2] + - $nav-hover-style-percentage : Hover/active/focus style of the navigation elements percentage modifier. + - $nav-disabled-cursor : The cursor style when hovering over the navigation elements whie disabled. + - $nav-disabled-opacity : The opacity of the navigation elements when disabled. + - $nav-fixed-left-right : The orientation of the fixed navigation bar. [3][4] + - $grid-columns-total : Total amount fo columns in the used grid. [5] + - $grid-coloumns-count-for-nav-fixed-vertical : Desired amount of columns occupied by the vertical navigation bar in the grid. [5] + - $nav-fixed-collapse-breakpoint : The breakpoint below which fixed navigation bars will collapse to a menu toggle button. + - $nav-fixed-collapse-label-location : Location of the collapsed menu button label. [6] + - $nav-fixed-collapse-label-margin : The margin for the collapsed menu button label. + - $nav-fixed-collapse-label-font-size : The font size of the collapsed menu button label. + Notes: + - [1] : This padding applies to all elements of the navigation bar and all styles(e.g. vertical or fixed). + For vertical styles it adapts to apply properly. It also adapts to apply properly to the collapse + label of the navigation bar. Please specify only a single padding value (i.e. 6px, 1.25em etc.) to + avoid CSS errors and ultimately the style not being applied to some elements. + - [2] : The values that $nav-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`. + - [3] : The values of $nav-fixed-left-right recognizes are `left` and `right`. However if invalid values + are provided, due to the inside condition only checking for `left`, `right` will be used as the + default value. + - [4]: The values of $nav-fixed-left-right will apply to all fixed navigation bars. The horizontal bars + should not be affected as they are 100% width, meaning that anchoring to left or right should have + the same result. + - [5] : These values are used to make the navigation bar work better with the grid system. Values do not have + to be the same as the grid or integer values, meaning that values like 12 and 1.5 could work great leaving + a small gap just before the third column in the grid. If no grid is specified, you can use percentage + values like 100 and 15 to get a 15% width for example. + - [6] : The value $nav-fixed-collapse-label-location recognizes are `top-left`, `top-right`, `bottom-left` + and `bottom-right`. Due to the way the conditional checking is implemented, `bottom-right` will be + used as a default if no valid value is specified. +*/ +.nav { + box-sizing: border-box; + background-color: #222; } + .nav .logo { + font-size: 135%; + color: #fff; } + .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: 10px; + color: #fff; + margin: 0; } + .nav ul li .link:hover, .nav ul li .link:active, .nav ul li .link:focus { + color: #fff; + background: #353535; } + .nav ul li .link.disabled, .nav ul li .link[disabled] { + cursor: not-allowed; + opacity: 0.65; } + .nav.vertical ul { + display: block; } + .nav.vertical ul li { + display: block; } + .nav.vertical ul li * { + width: 100%; + padding: 10px 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: 10px; + color: #fff; + background-color: #222; + width: auto; + position: fixed; + z-index: 1000; + top: 0; + right: 0; } + .nav + label:before { + position: relative; + content: '\2630'; } + .nav + label:hover, .nav + label:active, .nav + label:focus { + background: #353535; } + +@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 { + display: block; } + input[type="checkbox"]:checked + .nav.fixed ul li { + display: block; } + input[type="checkbox"]:checked + .nav.fixed ul li * { + width: 100%; + padding: 10px 0; } + input[type="checkbox"]:checked + .nav.fixed + label:before { + content: '\00d7'; } } diff --git a/flavors/mini-default.min.css b/flavors/mini-default.min.css new file mode 100644 index 0000000..20eeca0 --- /dev/null +++ b/flavors/mini-default.min.css @@ -0,0 +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:#d7d7d7}.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:#337ab7}.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:#2b6699}.btn.green,a.btn.green,a.btn.green:visited{color:#eee;background:#5cb85c}.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:#48a648}.btn.red,a.btn.red,a.btn.red:visited{color:#eee;background:#d9534f}.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:#d23430}.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 #777}.tbl td,.tbl th{overflow:visible;border-left:1px solid #777;border-bottom:none;margin:0;padding:.5em}.tbl thead{background-color:#4e4e4e;color:#f5f5f5;text-align:left}.tbl tbody{background-color:#ddd;color:#111}.tbl tbody tr:nth-child(2n-1){background-color:#f4f4f4}.tbl.hor td,.tbl.hor th{border-left:none;border-bottom:1px solid #777}.tbl.bor td,.tbl.bor th{border-bottom:1px solid #777}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:#337ab7!important}.txt-green{color:#5cb85c!important}.txt-red{color:#d9534f!important}.bg-blue{background-color:#337ab7!important}.bg-green{background-color:#5cb85c!important}.bg-red{background-color:#d9534f!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}.nav{box-sizing:border-box;background-color:#222}.nav .logo{font-size:135%;color:#fff}.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:10px;color:#fff;margin:0}.nav ul li .link:active,.nav ul li .link:focus,.nav ul li .link:hover{color:#fff;background:#353535}.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:10px 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:10px;color:#fff;background-color:#222;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:#353535}@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:10px 0}input[type=checkbox]:checked+.nav.fixed+label:before{content:'\00d7'}} \ No newline at end of file diff --git a/flavors/mini-default.scss b/flavors/mini-default.scss new file mode 100644 index 0000000..7e61faa --- /dev/null +++ b/flavors/mini-default.scss @@ -0,0 +1,93 @@ +// Base +$base-fonts: "\"Helvetica Neue\", Helvetica, sans-serif"; // Font-family +$base-font-size: 1em; // Font-size +$base-line-height: 1.5; // Line-height +$body-margin: 0; // Margin for body +$body-bg-color: #f5f5f5; // Body background color +$body-color: #222; // Body text color +$header-line-height-multiplier: 0.8; // Multiplier for line height of headers +$header-margin: 0.7em 0; // Margin for headers +$header-font-weight: 500; // Font weight for headers +$h1-multiplier: 2; // Header 1 font-sze multiplier +$h2-multiplier: 1.5; // Header 2 font-sze multiplier +$h3-multiplier: 1.15; // Header 3 font-sze multiplier +$h4-multiplier: 1; // Header 4 font-sze multiplier +$h5-multiplier: 0.8; // Header 5 font-sze multiplier +$h6-multiplier: 0.7; // Header 6 font-sze multiplier +$header-small-color: lighten($body-color, 20%); // Header small text color +$header-small-font-weight: 200; // Header small font weight +$hr-line-height-multiplier: 0.8; // Multiplier for line height of horizontal rule +$hr-margin: 0.7em 0; // Margin for horizontal rule +$hr-border-style: 1px solid darken($body-bg-color, 15%); // Color and style of horizontal rule +$small-font-size: 75%; // Font size for small, sub and sup elements +$p-margin: 0 0 0.6em; // Margin for paragraph and pre elements +$list-margin-top: 0; // Top margin for lists +$list-margin-bottom: 0.6em; // Bottom margin for lists +$code-fonts: monospace, monospace; // Font-family for code, pre, kbd, samp elements +$code-padding: 2px 4px; // Padding for code and pre elements +$code-bg-color: darken($body-bg-color, 10%); // Code and pre background color +$code-border-radius: 4px; // Border radius for code, pre and kbd elements +$kbd-bg-color: $body-color; // Kbd background color +$kbd-color: lighten($body-bg-color, 3.5%); // Kbd text color +$a-color: #2678b3; // Hyperlink text color +$a-hover-color: lighten($a-color, 10%); // Hyperlink hover text color +$a-visited-color: darken($a-color, 10%); // Hyperlink visited text color +$a-visited-hover-color: $a-color; // Hyperlink visited hover text color +$mark-bg-color: #ffff33; // Mark background color +$mark-color: $body-color; // Mark text color +$sub-bottom: -0.25em; // Sub bottom +$sup-top: -0.5em; // Sup top +$button-fonts: $base-fonts; // Font-family for buttons and inputs +$button-font-size: 100%; // Font size for buttons and inputs +$button-line-height-multiplier: 0.8; // Multiplier for line height of buttons and inputs +$button-margin: 0; // Margin for buttons and inputs +$fieldset-border: 1px solid darken($body-bg-color, 15%); // Border style for fieldset +$fieldset-border-radius: 4px; // Border radius for fieldset +$fieldset-margin: 0 2px; // Margin for fieldset +$fieldset-padding: 0.35em 0.65em 0.75em; // Padding for fieldset +// Button default colors +$btn-default-color: #2a2a2a; // Default text color for buttons +$btn-alt-color: #eeeeee; // Alternative text color for buttons +$btn-default-bg-color: #eaeaea; // Default background color for buttons +$btn-b-bg-color: #337ab7; // Color for button style 1 +$btn-g-bg-color: #5cb85c; // Color for button style 2 +$btn-r-bg-color: #d9534f; // Color for button style 3 +@import '../scss/mini/base'; +@import '../scss/mini/button'; +// Use button mixins to create buttons with default specs. +@include make-btn(btn, 0, 4px, 2px 0, 6px 12px, $btn-default-color, $btn-default-bg-color, darken, 7.5%, pointer, not-allowed, .65); +@include make-btn-style(btn, 'blue', $btn-alt-color, $btn-b-bg-color, darken, 7.5%); +@include make-btn-style(btn, 'green', $btn-alt-color, $btn-g-bg-color, darken, 7.5%); +@include make-btn-style(btn, 'red', $btn-alt-color, $btn-r-bg-color, darken, 7.5%); +@include make-btn-size(btn, lg, 9px 15px, 135%); +@include make-btn-size(btn, sm, 4px 8px, 80%); +@import '../scss/mini/grid'; +// Use grid mixin to create grid with default specs. +@include make-grid(grid-container, 0, row, col, 12, 12px, xs, sm, md, lg, no, 768px, 1024px, 1280px); +@import '../scss/mini/form'; +// Use form mixin to create form with default specs. +@include make-frm(frm, 1px solid #ccc, 4px, 0.2em, 0.3em, #2678b3, #e9322d, not-allowed, .65, darken($body-bg-color,10%), darken($body-bg-color,25%), 1.9em, 0.5em 0 0 0.2em, ctrl-group, 0 0 0.3em 0, inline, aligned,15em); +@import '../scss/mini/table'; +// Use table mixin to create table with default specs. +@include make-tbl(tbl, 1px solid #777, 0, 0.5em, #4e4e4e, #f5f5f5, #ddd, #f4f4f4, #111, hor, bor); +@import '../scss/mini/utility'; +// Use utility mixins to create utility classes with default specs. +@include make-thumb(thumb, 0.25em, 1px solid #ccc, 4px); +@include make-border-generic(bordered); +@include make-border-radial-style(rounded, 4px); +@include make-border-radial-style(circle, 50%); +@include make-colored-text(txt-blue, $btn-b-bg-color); +@include make-colored-text(txt-green, $btn-g-bg-color); +@include make-colored-text(txt-red, $btn-r-bg-color); +@include make-colored-bg-text(bg-blue, $btn-b-bg-color); +@include make-colored-bg-text(bg-green, $btn-g-bg-color); +@include make-colored-bg-text(bg-red, $btn-r-bg-color); +@include make-caret-down(caret, 0.35em, #222); +@include make-close(close, #aaa, pointer, 1.3em, 700, #777); +@include make-drags(drg-left, drg-right); +@include make-center-block(ct-block); +@include make-clearfix(cf); +@include make-hidden(hidden); +@import '../scss/mini/nav'; +// Use nav mixin to create nav with default specs. +@include make-nav(nav, vertical, fixed, logo, 135%, link, 10px, #fff, #222, lighten, 7.5%, not-allowed, .65, left, 12, 2, 768px, top-right, 10px, 1.75em); \ No newline at end of file diff --git a/scss/mini/_nav.scss b/scss/mini/_nav.scss index 9b5f439..5bd276d 100644 --- a/scss/mini/_nav.scss +++ b/scss/mini/_nav.scss @@ -54,6 +54,7 @@ background-color: #{$nav-bg-color}; .#{$nav-logo-name}{ font-size: $nav-logo-size; + color: #{$nav-color}; } ul{ display: inline-block; @@ -70,8 +71,9 @@ color: #{$nav-color}; margin: 0; } - & .#{$nav-link-name}{ + .#{$nav-link-name}{ &:hover, &:active, &:focus{ + color: #{$nav-color}; @if $nav-hover-style == 'lighten'{ background: lighten($nav-bg-color, $nav-hover-style-percentage); } @@ -126,6 +128,7 @@ margin: $nav-fixed-collapse-label-margin; font-size: $nav-fixed-collapse-label-font-size; padding: #{$nav-padding}; + color: #{$nav-color}; background-color: $nav-bg-color; width: auto; position: fixed; diff --git a/scss/mini/_variables.scss b/scss/mini/_variables.scss index 205bb6d..fecf573 100644 --- a/scss/mini/_variables.scss +++ b/scss/mini/_variables.scss @@ -48,7 +48,7 @@ $fieldset-padding: 0.35em 0.65em 0.75em; // Padding for fieldset // Button default colors $btn-default-color: #2a2a2a; // Default text color for buttons $btn-alt-color: #eeeeee; // Alternative text color for buttons -$btn-default-bg-color: #c2c2c2; // Default background color for buttons +$btn-default-bg-color: #eaeaea; // Default background color for buttons $btn-b-bg-color: #3f84b3; // Color for button style 1 $btn-g-bg-color: #2db747; // Color for button style 2 $btn-r-bg-color: #ea4848; // Color for button style 3 \ No newline at end of file diff --git a/testpage.html b/testpage.html index 1e7d9a3..7a19445 100644 --- a/testpage.html +++ b/testpage.html @@ -5,7 +5,7 @@ - +

Heading 1 smaller