From 84d5f92ed5a9c132f358235d344074e1b842cf01 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Mon, 5 Sep 2016 19:30:04 +0300 Subject: [PATCH] Extra component: labels --- README.md | 27 ++++++++---- docs/index.html | 4 +- flavors/mini-default.css | 82 ++++++++++++++++++++++++++++++++---- flavors/mini-default.min.css | 2 +- flavors/mini-default.scss | 42 +++++++++++++++++- scss/flavor.scss | 42 +++++++++++++++++- scss/mini-extra/_label.scss | 44 +++++++++++++++++++ scss/mini-full.scss | 40 ------------------ scss/mini/_button.scss | 2 +- 9 files changed, 220 insertions(+), 65 deletions(-) create mode 100644 scss/mini-extra/_label.scss delete mode 100644 scss/mini-full.scss diff --git a/README.md b/README.md index 8ad47a5..7582279 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ # mini.css A minimal, responsive pure CSS framework to get you started. -## Components +## Core Components - **base**: normalize.css & basic typography `GZIPPED SIZE`: 1,195 bytes - **button**: button styles `GZIPPED SIZE`: 427 bytes @@ -11,26 +11,35 @@ A minimal, responsive pure CSS framework to get you started. - **table**: table styles `GZIPPED SIZE`: 243 bytes - **helper and utility classes**: classes for quick floats, border styling, contextual text and more `GZIPPED SIZE`: 441 bytes +## Extra Components + +- **label**: label and badge styles `GZIPPED SIZE`: 208 bytes + TODO: - Tabbed navigation (radio button based) - Dropdowns (checkbox based) - Modals (checkbox based) -- Labels and badges - Pure css progress bars +- Maybe breadcrumbs +- Maybe button groups (with radios maybe? - use first and last to style borders) +- Alerts with checkbox? +- Add more utilities for Media objects +- Possibly panels +- Responsive embed? +- Are tooltips even doable? (they are on-click as popovers for sure with checkboxes) +- Buttons with states (implemented using a checkbox) +- Checbox collapses +- Is a Pure CSS Carousel even possible? - - -HOMEWORK FOR AFTER THE HOLIDAYS: - +ON A MORE SERIOUS NOTE: - Make a set of pages for the live version like base-modules, customization, extra-modules to showcase the modules and not clutter the main page -- Link to said pages from main page (move the grid's stuff to the other page and also the minimal note with th two **) -- Move variables to a main file, cleanup the mini-default.scss and flavored csses etc, make it more consistent +- Link to said pages from main page (move the grid's stuff to the other page and also the minimal note with the two **) - Update wiki with changes, write missing pages (documentation etc.) - Add the missing extra components, try to stay below 5KB - Add images and make two live pages to showcase vastly different flavors - Make NiteOwl flavor (dark flavor, like the thing that cquanu (my star in html template) has for github, colors look cool) +- Make a Bootstrap flavor to ease the transition from that framework - Make more flavors -- Update wiki punchline footer and README! - Promote in reddit etc. - Write a blog post about it - Use it \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index 9a96142..ed0d416 100644 --- a/docs/index.html +++ b/docs/index.html @@ -9,8 +9,8 @@ - - + + diff --git a/flavors/mini-default.css b/flavors/mini-default.css index d455854..6406acc 100644 --- a/flavors/mini-default.css +++ b/flavors/mini-default.css @@ -798,10 +798,10 @@ textarea { */ .nav { box-sizing: border-box; - background-color: #ddd; } + background-color: #272727; } .nav .logo { font-size: 135%; - color: #272727; } + color: #ddd; } .nav ul { display: inline-block; list-style: none; @@ -814,11 +814,11 @@ textarea { .nav ul li * { display: inline-block; padding: 8px; - color: #272727; + color: #ddd; margin: 0; } .nav ul li .link:hover, .nav ul li .link:active, .nav ul li .link:focus { - color: #272727; - background: #cacaca; } + color: #ddd; + background: #141414; } .nav ul li .link.disabled, .nav ul li .link[disabled] { cursor: not-allowed; opacity: 0.65; } @@ -848,8 +848,8 @@ textarea { margin: 10px; font-size: 1.75em; padding: 8px; - color: #272727; - background-color: #ddd; + color: #ddd; + background-color: #272727; width: auto; position: fixed; z-index: 1000; @@ -859,7 +859,7 @@ textarea { position: relative; content: '\2630'; } .nav + label:hover, .nav + label:active, .nav + label:focus { - background: #cacaca; } + background: #141414; } @media (max-width: 768px) { .nav { @@ -1052,3 +1052,69 @@ img.thumb { .hidden { display: none !important; } + +/* + Mixin for the labels/badges. + Parameters: + - $lbl-name : The class name of the labels/badges. + - $lbl-bg-color : The background color of the labels/badges. + - $lbl-color : The text color of the labels/badges. + - $lbl-border-radius : The border-radius of the labels/badges. + - $lbl-padding : The padding of the labels/badges. + - $lbl-hide-on-empty : Style of the label/badges when empty. [1] + Notes: + - [1] : The values that $lbl-hide-on-empty can take are `hide` or `show`. The inside condition only + checks if the value is `hide` and acts accordingly. Invalid values are treated as `show`. +*/ +/* + Mixin for labels/badges styles. + Parameters: + - $lbl-name : The class name of the labels/badges. [1] + - $lbl-style-name : The class name of the labels/badges style. + - $lbl-style-color : The text color of the labels/badges style. + - $lbl-style-bg-color : The background color of the labels/badges style. + Notes: + - [1] : The value of $lbl-name must be the same as the value specified when using `make-lbl`, otherwise + the specified style will not work correctly. +*/ +.lbl { + display: inline; + padding: 6px 10px; + color: #eeeeee; + background-color: #777; + border-radius: 4px; } + .lbl:empty { + display: none; } + +.lbl.blue { + color: #eeeeee; + background: #3f84b3; } + +.lbl.green { + color: #eeeeee; + background: #2db747; } + +.lbl.red { + color: #eeeeee; + background: #ea4848; } + +.bdg { + display: inline; + padding: 3px 8px; + color: #eeeeee; + background-color: #777; + border-radius: 8px; } + .bdg:empty { + display: none; } + +.bdg.blue { + color: #eeeeee; + background: #3f84b3; } + +.bdg.green { + color: #eeeeee; + background: #2db747; } + +.bdg.red { + color: #eeeeee; + background: #ea4848; } diff --git a/flavors/mini-default.min.css b/flavors/mini-default.min.css index 50bd94c..7762c70 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:#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'}}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} \ 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} \ No newline at end of file diff --git a/flavors/mini-default.scss b/flavors/mini-default.scss index 0b6e1c0..59854c5 100644 --- a/flavors/mini-default.scss +++ b/flavors/mini-default.scss @@ -14,6 +14,11 @@ Author: Angelos Chalaris (chalarangelo@gmail.com) mini.css version: v1.0 (September, 2016) */ +//==================================================================== +// +// CORE COMPONENTS (located in `mini`): +// +//==================================================================== // Variable definitions for the Base module (_base.scss) //==================================================================== // Basic rules for body @@ -172,7 +177,7 @@ $navigation-fixed-collapse-breakpoint: 768px; // Breakpoint for fixed na @import '../scss/mini/nav'; // Use nav mixin to create nav with default specs. For more information // refer to the _nav.scss file to check the definitions. -@include make-nav($navigation-class-name, $navigation-vertical-name, $navigation-fixed-name, $navigation-logo-name, 135%, $navigation-link-name, 8px, $navigation-bg-color, $navigation-color, darken, 7.5%, not-allowed, .65, left, 12, 2, $navigation-fixed-collapse-breakpoint, top-right, 10px, 1.75em); +@include make-nav($navigation-class-name, $navigation-vertical-name, $navigation-fixed-name, $navigation-logo-name, 135%, $navigation-link-name, 8px, $navigation-color, $navigation-bg-color, darken, 7.5%, not-allowed, .65, left, 12, 2, $navigation-fixed-collapse-breakpoint, top-right, 10px, 1.75em); //==================================================================== // Variable definitions for the Utilities and Helper Classes module (_utility.scss) //==================================================================== @@ -224,4 +229,37 @@ $colored-bg-text3-bg-color: $btn-r-bg-color; // Background color for the @include make-drags($drag-left-name, $drag-right-name); @include make-center-block($center-block-name); @include make-clearfix($clearfix-class-name); -@include make-hidden($hidden-class-name); \ No newline at end of file +@include make-hidden($hidden-class-name); +//==================================================================== +// +// EXTRA COMPONENTS (located in `mini-extra`): +// +//==================================================================== +// Variable definitions for the Label module (_label.scss) +//==================================================================== +// Colors and styles (you can remove things you don't need or define more +// colors if you need them). +$lbl-default-color: $btn-alt-color; // Default text color for labels/badges +$lbl-default-bg-color: #777; // Default background color for labels/badges +$lbl-b-bg-color: $btn-b-bg-color; // Color for labels/badges style 1 +$lbl-g-bg-color: $btn-g-bg-color; // Color for labels/badges style 2 +$lbl-r-bg-color: $btn-r-bg-color; // Color for labels/badges style 3 +// Label class names (you can remove things you don't need or define more +// classes if you need them). +$lbl-class-name: lbl; // Name for the base labels class +$lbl-style1-name: 'blue'; // Name for labels/badges style 1 class +$lbl-style2-name: 'green'; // Name for labels/badges style 2 class +$lbl-style3-name: 'red'; // Name for labels/badges style 3 class +$badge-class-name: bdg; // Name for the base badges class +// Enable labels (_label.scss). (Use individual mixins below to use.) +@import '../scss/mini-extra/label'; +// Use label mixins to create labels with given specs. For more information +// refer to the _label.scss file to check the definitions. +@include make-lbl($lbl-class-name, $lbl-default-bg-color, $lbl-default-color, 4px, 6px 10px, hide); +@include make-lbl-style($lbl-class-name, $lbl-style1-name, $lbl-default-color, $lbl-b-bg-color); +@include make-lbl-style($lbl-class-name, $lbl-style2-name, $lbl-default-color, $lbl-g-bg-color); +@include make-lbl-style($lbl-class-name, $lbl-style3-name, $lbl-default-color, $lbl-r-bg-color); +@include make-lbl($badge-class-name, $lbl-default-bg-color, $lbl-default-color, 8px, 3px 8px, hide); +@include make-lbl-style($badge-class-name, $lbl-style1-name, $lbl-default-color, $lbl-b-bg-color); +@include make-lbl-style($badge-class-name, $lbl-style2-name, $lbl-default-color, $lbl-g-bg-color); +@include make-lbl-style($badge-class-name, $lbl-style3-name, $lbl-default-color, $lbl-r-bg-color); \ No newline at end of file diff --git a/scss/flavor.scss b/scss/flavor.scss index 307fcc0..c70df5d 100644 --- a/scss/flavor.scss +++ b/scss/flavor.scss @@ -14,6 +14,11 @@ Author: Angelos Chalaris (chalarangelo@gmail.com) mini.css version: v1.0 (September, 2016) */ +//==================================================================== +// +// CORE COMPONENTS (located in `mini`): +// +//==================================================================== // Variable definitions for the Base module (_base.scss) //==================================================================== // Basic rules for body @@ -172,7 +177,7 @@ $navigation-fixed-collapse-breakpoint: 768px; // Breakpoint for fixed na @import 'mini/nav'; // Use nav mixin to create nav with default specs. For more information // refer to the _nav.scss file to check the definitions. -@include make-nav($navigation-class-name, $navigation-vertical-name, $navigation-fixed-name, $navigation-logo-name, 135%, $navigation-link-name, 8px, $navigation-bg-color, $navigation-color, darken, 7.5%, not-allowed, .65, left, 12, 2, $navigation-fixed-collapse-breakpoint, top-right, 10px, 1.75em); +@include make-nav($navigation-class-name, $navigation-vertical-name, $navigation-fixed-name, $navigation-logo-name, 135%, $navigation-link-name, 8px, $navigation-color, $navigation-bg-color, darken, 7.5%, not-allowed, .65, left, 12, 2, $navigation-fixed-collapse-breakpoint, top-right, 10px, 1.75em); //==================================================================== // Variable definitions for the Utilities and Helper Classes module (_utility.scss) //==================================================================== @@ -224,4 +229,37 @@ $colored-bg-text3-bg-color: $btn-r-bg-color; // Background color for the @include make-drags($drag-left-name, $drag-right-name); @include make-center-block($center-block-name); @include make-clearfix($clearfix-class-name); -@include make-hidden($hidden-class-name); \ No newline at end of file +@include make-hidden($hidden-class-name); +//==================================================================== +// +// EXTRA COMPONENTS (located in `mini-extra`): +// +//==================================================================== +// Variable definitions for the Label module (_label.scss) +//==================================================================== +// Colors and styles (you can remove things you don't need or define more +// colors if you need them). +$lbl-default-color: $btn-alt-color; // Default text color for labels/badges +$lbl-default-bg-color: #777; // Default background color for labels/badges +$lbl-b-bg-color: $btn-b-bg-color; // Color for labels/badges style 1 +$lbl-g-bg-color: $btn-g-bg-color; // Color for labels/badges style 2 +$lbl-r-bg-color: $btn-r-bg-color; // Color for labels/badges style 3 +// Label class names (you can remove things you don't need or define more +// classes if you need them). +$lbl-class-name: lbl; // Name for the base labels class +$lbl-style1-name: 'blue'; // Name for labels/badges style 1 class +$lbl-style2-name: 'green'; // Name for labels/badges style 2 class +$lbl-style3-name: 'red'; // Name for labels/badges style 3 class +$badge-class-name: bdg; // Name for the base badges class +// Enable labels (_label.scss). (Use individual mixins below to use.) +@import 'mini-extra/label'; +// Use label mixins to create labels with given specs. For more information +// refer to the _label.scss file to check the definitions. +@include make-lbl($lbl-class-name, $lbl-default-bg-color, $lbl-default-color, 4px, 6px 10px, hide); +@include make-lbl-style($lbl-class-name, $lbl-style1-name, $lbl-default-color, $lbl-b-bg-color); +@include make-lbl-style($lbl-class-name, $lbl-style2-name, $lbl-default-color, $lbl-g-bg-color); +@include make-lbl-style($lbl-class-name, $lbl-style3-name, $lbl-default-color, $lbl-r-bg-color); +@include make-lbl($badge-class-name, $lbl-default-bg-color, $lbl-default-color, 8px, 3px 8px, hide); +@include make-lbl-style($badge-class-name, $lbl-style1-name, $lbl-default-color, $lbl-b-bg-color); +@include make-lbl-style($badge-class-name, $lbl-style2-name, $lbl-default-color, $lbl-g-bg-color); +@include make-lbl-style($badge-class-name, $lbl-style3-name, $lbl-default-color, $lbl-r-bg-color); \ No newline at end of file diff --git a/scss/mini-extra/_label.scss b/scss/mini-extra/_label.scss new file mode 100644 index 0000000..53ac0bb --- /dev/null +++ b/scss/mini-extra/_label.scss @@ -0,0 +1,44 @@ +/* + Mixin for the labels/badges. + Parameters: + - $lbl-name : The class name of the labels/badges. + - $lbl-bg-color : The background color of the labels/badges. + - $lbl-color : The text color of the labels/badges. + - $lbl-border-radius : The border-radius of the labels/badges. + - $lbl-padding : The padding of the labels/badges. + - $lbl-hide-on-empty : Style of the label/badges when empty. [1] + Notes: + - [1] : The values that $lbl-hide-on-empty can take are `hide` or `show`. The inside condition only + checks if the value is `hide` and acts accordingly. Invalid values are treated as `show`. +*/ +@mixin make-lbl($lbl-name, $lbl-bg-color, $lbl-color, $lbl-border-radius, $lbl-padding, $lbl-hide-on-empty){ + .#{$lbl-name}{ + display: inline; + padding: $lbl-padding; + color: $lbl-color; + background-color: $lbl-bg-color; + border-radius: $lbl-border-radius; + @if $lbl-hide-on-empty == 'hide'{ + &:empty{ + display: none; + } + } + } +} +/* + Mixin for labels/badges styles. + Parameters: + - $lbl-name : The class name of the labels/badges. [1] + - $lbl-style-name : The class name of the labels/badges style. + - $lbl-style-color : The text color of the labels/badges style. + - $lbl-style-bg-color : The background color of the labels/badges style. + Notes: + - [1] : The value of $lbl-name must be the same as the value specified when using `make-lbl`, otherwise + the specified style will not work correctly. +*/ +@mixin make-lbl-style($lbl-name, $lbl-style-name, $lbl-style-color, $lbl-style-bg-color){ + .#{$lbl-name}.#{$lbl-style-name}{ + color: $lbl-style-color; + background: $lbl-style-bg-color; + } +} \ No newline at end of file diff --git a/scss/mini-full.scss b/scss/mini-full.scss deleted file mode 100644 index 3d0cafc..0000000 --- a/scss/mini-full.scss +++ /dev/null @@ -1,40 +0,0 @@ -@import 'mini/variables'; -@import 'mini/base'; -@import '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, lighten, 7.5%, pointer, not-allowed, .65); -@include make-btn-style(btn, 'blue', $btn-alt-color, $btn-b-bg-color); -@include make-btn-style(btn, 'green', $btn-alt-color, $btn-g-bg-color); -@include make-btn-style(btn, 'red', $btn-alt-color, $btn-r-bg-color); -@include make-btn-size(btn, lg, 9px 15px, 135%); -@include make-btn-size(btn, sm, 4px 8px, 80%); -@import '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 '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 'mini/table'; -// Use table mixin to create table with default specs. -@include make-tbl(tbl, 1px solid #bdbdbd, 0, 0.5em, #d9d9d9, #111, #f5f5f5, #ececec, #111, hor, bor); -@import '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 'mini/nav'; -// Use nav mixin to create nav with default specs. -@include make-nav(nav, vertical, fixed, logo, 135%, link, 8px, #272727, #ddd, darken, 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/_button.scss b/scss/mini/_button.scss index dfab69b..48acc8c 100644 --- a/scss/mini/_button.scss +++ b/scss/mini/_button.scss @@ -82,7 +82,7 @@ */ @mixin make-btn-style($btn-name, $btn-style-name, $btn-style-color, $btn-style-bg-color, $btn-style-hover-style: lighten, $btn-style-hover-style-percentage: 7.5%){ .#{$btn-name}.#{$btn-style-name}, a.#{$btn-name}.#{$btn-style-name}, a.#{$btn-name}.#{$btn-style-name}:visited{ - @include btn-variant($btn-alt-color, $btn-style-bg-color, $btn-style-hover-style, $btn-style-hover-style-percentage); + @include btn-variant($btn-style-color, $btn-style-bg-color, $btn-style-hover-style, $btn-style-hover-style-percentage); } } /*