diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md index 3a28c22..6930c83 100644 --- a/docs/v2/DEVLOG.md +++ b/docs/v2/DEVLOG.md @@ -272,4 +272,8 @@ - Changed demo page structure to follow the ordering of modules in `core`. - Tweaked `progress` `inline` to `60vw` instead of `80vw`, should fit more screens properly. - Added a heading for the `utility` module section in demo page. -- Deployed demo page yet again. \ No newline at end of file +- Deployed demo page yet again. +- Created `mini-core/utility` for utilities and helper classes. +- Copied almost verbatim the mixins from *v1* for `make-border-generic` and `make-border-radial-style`. Added variables and calls for mixins in flavor. +- Copied and tweaked `make-breadcrumbs` mixin from *v1*'s extras. +- Dropped mixin for `make-btn-group`, opened issue (#23) to later build it. diff --git a/docs/v2/index.html b/docs/v2/index.html index a2370d8..7f11886 100644 --- a/docs/v2/index.html +++ b/docs/v2/index.html @@ -388,7 +388,9 @@ <progress class="nano" value="35" max="100"></progress> <hr> <h2>Utilities and Helpers <small>Useful classes for common problems</small></h2> - <p>Implementation pending...</p> + <p>The utilities provided with <strong>mini.css</strong> aim to solve common problems and allow ease of use whenever possible. Most of them are showcased below:</p> + <p><span class="bordered">Generic border (using black outline and opacity of 0.25)</span>, <span class="bordered rounded">Radial border style 1</span> & <span class="bordered circular"> 2 </span>.</p> + <ul class="breadcrumbs"><li><a href="#">These</a></li><li><a href="#">are</a></li><li><a href="#">breadcrumbs</a></li></ul> </div> </div> </div> diff --git a/flavors/v2/mini-default.css b/flavors/v2/mini-default.css index ea277a1..1cc8741 100644 --- a/flavors/v2/mini-default.css +++ b/flavors/v2/mini-default.css @@ -874,3 +874,21 @@ progress.nano { border-radius: 0; } progress.nano[value="100"]::-moz-progress-bar { border-radius: 0; } + +.bordered { + border: 1px solid rgba(0, 0, 0, 0.25) !important; } + +.rounded { + border-radius: 2px !important; } + +.circular { + border-radius: 50% !important; } + +ul.breadcrumbs { + list-style: none; } + ul.breadcrumbs > li { + display: inline-block; + padding-right: 0.125em; } + ul.breadcrumbs > li + li:before { + content: '\27e9'; + padding: 0.125em; } diff --git a/flavors/v2/mini-default.min.css b/flavors/v2/mini-default.min.css index 2783aa6..1986a87 100644 --- a/flavors/v2/mini-default.min.css +++ b/flavors/v2/mini-default.min.css @@ -1 +1 @@ -*,html{font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:1em;line-height:1.5;-webkit-text-size-adjust:100%}body{margin:0;color:#212121;background:#fafafa}article,aside,details,figcaption,figure,main,menu,section{display:block}summary{display:list-item}abbr[title]{border-bottom:none;text-decoration:underline}audio,video{display:inline-block}svg:not(:root){overflow:hidden}input{overflow:visible}img{width:100%;height:auto}h1,h2,h3,h4,h5,h6{line-height:1.2em;margin:0;font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#424242;display:block;margin-top:-.35em;font-size:45%}h1{font-size:2em}h2{font-size:1.5em}h3{font-size:1.15em}h4{font-size:1em}h5{font-size:.85em}h6{font-size:.75em}p{margin:1px 10px}b,strong{font-weight:700}hr{box-sizing:content-box;border:0;overflow:visible;line-height:1.2em;margin:.5em 4px;height:1px;background:-webkit-linear-gradient(to right,#bdbdbd,#616161,#bdbdbd);background:linear-gradient(to right,#bdbdbd,#616161,#bdbdbd)}code,kbd,pre,samp{font-family:monospace,monospace}code{border-radius:2px;background:#e0e0e0;padding:2px 4px}pre{overflow:auto;border-radius:0 2px 2px 0;background:#e0e0e0;padding:12px;margin:1px 10px;border-left:3px solid #1565c0}kbd{border-radius:2px;background:#212121;color:#fafafa;padding:2px 4px}small,sub,sup{font-size:75%}sup{top:-.5em}sub{bottom:-.25em}sub,sup{line-height:0;position:relative;vertical-align:baseline}a{color:#0277bd;text-decoration:underline;opacity:1;transition:all .3s ease 0s}a:visited{color:#01579b}a:active,a:focus,a:hover{opacity:.75}.container{margin:0 auto;padding:0 10px}.row{box-sizing:border-box;-webkit-box-flex:0;-webkit-box-orient:horizontal;-webkit-box-direction:normal;display:-webkit-flex;display:flex;-webkit-flex:0 1 auto;flex:0 1 auto;-webkit-flex-flow:row wrap;flex-flow:row wrap}.col-sm,[class^=col-sm-],[class^=col-sm-offset-]{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;flex:0 0 auto;padding:0 4px}.col-sm{-webkit-box-flex:1;max-width:100%;-webkit-flex-grow:1;flex-grow:1;-webkit-flex-basis:0;flex-basis:0}.col-sm-1{max-width:8.33333%;-webkit-flex-basis:8.33333%;flex-basis:8.33333%}.col-sm-2{max-width:16.66667%;-webkit-flex-basis:16.66667%;flex-basis:16.66667%}.col-sm-3{max-width:25%;-webkit-flex-basis:25%;flex-basis:25%}.col-sm-4{max-width:33.33333%;-webkit-flex-basis:33.33333%;flex-basis:33.33333%}.col-sm-5{max-width:41.66667%;-webkit-flex-basis:41.66667%;flex-basis:41.66667%}.col-sm-6{max-width:50%;-webkit-flex-basis:50%;flex-basis:50%}.col-sm-7{max-width:58.33333%;-webkit-flex-basis:58.33333%;flex-basis:58.33333%}.col-sm-8{max-width:66.66667%;-webkit-flex-basis:66.66667%;flex-basis:66.66667%}.col-sm-9{max-width:75%;-webkit-flex-basis:75%;flex-basis:75%}.col-sm-10{max-width:83.33333%;-webkit-flex-basis:83.33333%;flex-basis:83.33333%}.col-sm-11{max-width:91.66667%;-webkit-flex-basis:91.66667%;flex-basis:91.66667%}.col-sm-12{max-width:100%;-webkit-flex-basis:100%;flex-basis:100%}.col-sm-offset-0{margin-left:0}.col-sm-offset-1{margin-left:8.33333%}.col-sm-offset-2{margin-left:16.66667%}.col-sm-offset-3{margin-left:25%}.col-sm-offset-4{margin-left:33.33333%}.col-sm-offset-5{margin-left:41.66667%}.col-sm-offset-6{margin-left:50%}.col-sm-offset-7{margin-left:58.33333%}.col-sm-offset-8{margin-left:66.66667%}.col-sm-offset-9{margin-left:75%}.col-sm-offset-10{margin-left:83.33333%}.col-sm-offset-11{margin-left:91.66667%}@media only screen and (min-width:800px){.col-md,[class^=col-md-],[class^=col-md-offset-]{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;flex:0 0 auto;padding:0 4px}.col-md{-webkit-box-flex:1;max-width:100%;-webkit-flex-grow:1;flex-grow:1;-webkit-flex-basis:0;flex-basis:0}.col-md-1{max-width:8.33333%;-webkit-flex-basis:8.33333%;flex-basis:8.33333%}.col-md-2{max-width:16.66667%;-webkit-flex-basis:16.66667%;flex-basis:16.66667%}.col-md-3{max-width:25%;-webkit-flex-basis:25%;flex-basis:25%}.col-md-4{max-width:33.33333%;-webkit-flex-basis:33.33333%;flex-basis:33.33333%}.col-md-5{max-width:41.66667%;-webkit-flex-basis:41.66667%;flex-basis:41.66667%}.col-md-6{max-width:50%;-webkit-flex-basis:50%;flex-basis:50%}.col-md-7{max-width:58.33333%;-webkit-flex-basis:58.33333%;flex-basis:58.33333%}.col-md-8{max-width:66.66667%;-webkit-flex-basis:66.66667%;flex-basis:66.66667%}.col-md-9{max-width:75%;-webkit-flex-basis:75%;flex-basis:75%}.col-md-10{max-width:83.33333%;-webkit-flex-basis:83.33333%;flex-basis:83.33333%}.col-md-11{max-width:91.66667%;-webkit-flex-basis:91.66667%;flex-basis:91.66667%}.col-md-12{max-width:100%;-webkit-flex-basis:100%;flex-basis:100%}.col-md-offset-0{margin-left:0}.col-md-offset-1{margin-left:8.33333%}.col-md-offset-2{margin-left:16.66667%}.col-md-offset-3{margin-left:25%}.col-md-offset-4{margin-left:33.33333%}.col-md-offset-5{margin-left:41.66667%}.col-md-offset-6{margin-left:50%}.col-md-offset-7{margin-left:58.33333%}.col-md-offset-8{margin-left:66.66667%}.col-md-offset-9{margin-left:75%}.col-md-offset-10{margin-left:83.33333%}.col-md-offset-11{margin-left:91.66667%}}@media only screen and (min-width:1080px){.col-lg,[class^=col-lg-],[class^=col-lg-offset-]{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;flex:0 0 auto;padding:0 4px}.col-lg{-webkit-box-flex:1;max-width:100%;-webkit-flex-grow:1;flex-grow:1;-webkit-flex-basis:0;flex-basis:0}.col-lg-1{max-width:8.33333%;-webkit-flex-basis:8.33333%;flex-basis:8.33333%}.col-lg-2{max-width:16.66667%;-webkit-flex-basis:16.66667%;flex-basis:16.66667%}.col-lg-3{max-width:25%;-webkit-flex-basis:25%;flex-basis:25%}.col-lg-4{max-width:33.33333%;-webkit-flex-basis:33.33333%;flex-basis:33.33333%}.col-lg-5{max-width:41.66667%;-webkit-flex-basis:41.66667%;flex-basis:41.66667%}.col-lg-6{max-width:50%;-webkit-flex-basis:50%;flex-basis:50%}.col-lg-7{max-width:58.33333%;-webkit-flex-basis:58.33333%;flex-basis:58.33333%}.col-lg-8{max-width:66.66667%;-webkit-flex-basis:66.66667%;flex-basis:66.66667%}.col-lg-9{max-width:75%;-webkit-flex-basis:75%;flex-basis:75%}.col-lg-10{max-width:83.33333%;-webkit-flex-basis:83.33333%;flex-basis:83.33333%}.col-lg-11{max-width:91.66667%;-webkit-flex-basis:91.66667%;flex-basis:91.66667%}.col-lg-12{max-width:100%;-webkit-flex-basis:100%;flex-basis:100%}.col-lg-offset-0{margin-left:0}.col-lg-offset-1{margin-left:8.33333%}.col-lg-offset-2{margin-left:16.66667%}.col-lg-offset-3{margin-left:25%}.col-lg-offset-4{margin-left:33.33333%}.col-lg-offset-5{margin-left:41.66667%}.col-lg-offset-6{margin-left:50%}.col-lg-offset-7{margin-left:58.33333%}.col-lg-offset-8{margin-left:66.66667%}.col-lg-offset-9{margin-left:75%}.col-lg-offset-10{margin-left:83.33333%}.col-lg-offset-11{margin-left:91.66667%}}table{border-collapse:separate;border-spacing:0;border:1px solid #bdbdbd;border-radius:2px;margin:0 auto}caption{font-size:1.5em;margin:6px 0 12px}tr{padding:6px}td,th{padding:10px;border-left:1px solid #bdbdbd;border-top:1px solid #bdbdbd}th{border-top:0;background:#eceff1}td:first-child,th:first-child{border-left:0}@media only screen and (max-width:768px){table{border-collapse:collapse;border:0;width:100%}thead{border:0;height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%)}tr{display:block;border:1px solid #bdbdbd;border-radius:2px;margin-bottom:10px}td{display:block;border:0;border-bottom:1px solid #bdbdbd;text-align:right}td:before{content:attr(data-label);float:left;font-weight:700}td:last-child{border-bottom:0}}form{background:#eceff1;border:1px solid #90a4ae;border-radius:2px;margin:8px;padding:8px}fieldset{border:1px solid #b0bec5;border-radius:1px;margin:0;padding:4px 6px 8px}legend{box-sizing:border-box;display:table;max-width:100%;white-space:normal;font-weight:700;font-size:.85em;padding:4px}.input-group{display:inline-block}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}textarea{overflow:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}[type=email],[type=number],[type=password],[type=search],[type=tel],[type=text],[type=url],input:not([type]),select,textarea{box-sizing:border-box;background:#fafafa;color:#212121;border:1px solid #b0bec5;border-radius:1px;margin:2px;padding:6px 8px}[type=email]:focus,[type=number]:focus,[type=password]:focus,[type=search]:focus,[type=tel]:focus,[type=text]:focus,[type=url]:focus,input:not([type]):focus,select:focus,textarea:focus{border-color:#0288d1;box-shadow:none}[type=email][disabled],[type=number][disabled],[type=password][disabled],[type=search][disabled],[type=tel][disabled],[type=text][disabled],[type=url][disabled],input:not([type])[disabled],select[disabled],textarea[disabled]{cursor:not-allowed;opacity:.75}[type=email]:focus:invalid,[type=email]:focus:invalid:focus,[type=email]:invalid,[type=number]:focus:invalid,[type=number]:focus:invalid:focus,[type=number]:invalid,[type=password]:focus:invalid,[type=password]:focus:invalid:focus,[type=password]:invalid,[type=search]:focus:invalid,[type=search]:focus:invalid:focus,[type=search]:invalid,[type=tel]:focus:invalid,[type=tel]:focus:invalid:focus,[type=tel]:invalid,[type=text]:focus:invalid,[type=text]:focus:invalid:focus,[type=text]:invalid,[type=url]:focus:invalid,[type=url]:focus:invalid:focus,[type=url]:invalid,input:not([type]):focus:invalid,input:not([type]):focus:invalid:focus,input:not([type]):invalid,select:focus:invalid,select:focus:invalid:focus,select:invalid,textarea:focus:invalid,textarea:focus:invalid:focus,textarea:invalid{border-color:#d32f2f;box-shadow:none}[type=email][readonly],[type=number][readonly],[type=password][readonly],[type=search][readonly],[type=tel][readonly],[type=text][readonly],[type=url][readonly],input:not([type])[readonly],select[readonly],textarea[readonly]{background:#eceff1;border-color:#90a4ae}::-webkit-placeholder{color:#37474f}::-moz-placeholder{color:#37474f}::-ms-placeholder{color:#37474f}header{display:block;height:36px;background:#263238;color:#fafafa;padding:2px 8px;white-space:nowrap;overflow-x:auto;overflow-y:hidden}header .logo{color:#fafafa;font-size:1.75em;line-height:1.2;margin:1px 6px 1px 1px}header .button,header [type=button],header a.button,header button,header label.button{background:#263238;color:#fafafa;vertical-align:top;margin:2px 0 0}header .button:active,header .button:focus,header .button:hover,header [type=button]:active,header [type=button]:focus,header [type=button]:hover,header a.button:active,header a.button:focus,header a.button:hover,header button:active,header button:focus,header button:hover,header label.button:active,header label.button:focus,header label.button:hover{background:#37474f}header .logo,header a.button{text-decoration:none}nav{display:block;background:#eceff1;border-radius:1px;margin:2px;padding:4px 4px 4px 16px}nav a,nav a:visited{display:block;color:#0277bd}nav .sublink-1{padding-left:12px}nav .sublink-2{padding-left:24px}footer{display:block;background:#263238;color:#fafafa;padding:22px 10px 12px;font-size:85%}footer a,footer a:visited{color:#039be5}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button{overflow:visible;text-transform:none}.button,[type=button],[type=reset],[type=submit],a.button,button,label.button{display:inline-block;background:rgba(207,216,220,.75);color:#212121;border:0;border-radius:2px;padding:4px 6px;margin:4px;text-decoration:none;transition:all .3s ease 0s;cursor:pointer}.button:active,.button:focus,.button:hover,[type=button]:active,[type=button]:focus,[type=button]:hover,[type=reset]:active,[type=reset]:focus,[type=reset]:hover,[type=submit]:active,[type=submit]:focus,[type=submit]:hover,a.button:active,a.button:focus,a.button:hover,button:active,button:focus,button:hover,label.button:active,label.button:focus,label.button:hover{background:#cfd8dc;opacity:1}.button:disabled,.button[disabled],[type=button]:disabled,[type=button][disabled],[type=reset]:disabled,[type=reset][disabled],[type=submit]:disabled,[type=submit][disabled],a.button:disabled,a.button[disabled],button:disabled,button[disabled],label.button:disabled,label.button[disabled]{cursor:not-allowed;opacity:.65}input[type=file]{display:none}[type=checkbox],[type=radio]{height:1px;width:1px;margin:-1px;overflow:hidden;position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%)}.input-group [type=checkbox]+label,.input-group [type=radio]+label{position:relative;margin-left:21.25px}.input-group [type=checkbox]+label:before,.input-group [type=radio]+label:before{box-sizing:border-box;display:inline-block;position:absolute;top:0;left:0;width:17px;height:17px;content:'';border:1px solid #b0bec5;border-radius:1px;background:#fafafa;color:#212121;margin-left:-21.25px;vertical-align:text-bottom}.input-group [type=checkbox]+label:active:before,.input-group [type=checkbox]+label:focus:before,.input-group [type=checkbox]+label:hover:before,.input-group [type=checkbox]:focus+label:before,.input-group [type=radio]+label:active:before,.input-group [type=radio]+label:focus:before,.input-group [type=radio]+label:hover:before,.input-group [type=radio]:focus+label:before{border-color:#0288d1}.input-group [type=radio]+label:after,.input-group [type=radio]+label:before{border-radius:50%}.input-group [type=checkbox][disabled]+label,.input-group [type=radio][disabled]+label{cursor:not-allowed}.input-group [type=checkbox][disabled]+label:after,.input-group [type=checkbox][disabled]+label:before,.input-group [type=radio][disabled]+label:after,.input-group [type=radio][disabled]+label:before{opacity:.75}.input-group [type=checkbox]:checked+label:after,.input-group [type=radio]:checked+label:after{margin-left:-21.25px;position:absolute;top:3.83px;left:3.83px;width:9.35px;height:9.35px;background:#212121;content:''}mark{background:#0277bd;color:#fafafa;font-size:95%;line-height:1;padding:1px}progress{display:block;vertical-align:baseline;-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:10px;border:0;border-radius:1px;margin:1px auto;background:#f5f5f5;color:#01579b}progress::-webkit-progress-value{background:#01579b;border-top-left-radius:1px;border-bottom-left-radius:1px}progress::-webkit-progress-bar{background:#f5f5f5}progress::-moz-progress-bar{background:#01579b;border-top-left-radius:1px;border-bottom-left-radius:1px}progress[value="100"]::-webkit-progress-value{border-radius:1px}progress[value="100"]::-moz-progress-bar{border-radius:1px}.button.primary,[type=button].primary,[type=reset].primary,[type=submit].primary,button.primary{background:#1565c0;color:#fafafa}.button.primary:active,.button.primary:focus,.button.primary:hover,[type=button].primary:active,[type=button].primary:focus,[type=button].primary:hover,[type=reset].primary:active,[type=reset].primary:focus,[type=reset].primary:hover,[type=submit].primary:active,[type=submit].primary:focus,[type=submit].primary:hover,button.primary:active,button.primary:focus,button.primary:hover{background:rgba(21,101,192,.85)}.button.secondary,[type=button].secondary,[type=reset].secondary,[type=submit].secondary,button.secondary{background:rgba(198,40,40,.85);color:#fafafa}.button.secondary:active,.button.secondary:focus,.button.secondary:hover,[type=button].secondary:active,[type=button].secondary:focus,[type=button].secondary:hover,[type=reset].secondary:active,[type=reset].secondary:focus,[type=reset].secondary:hover,[type=submit].secondary:active,[type=submit].secondary:focus,[type=submit].secondary:hover,button.secondary:active,button.secondary:focus,button.secondary:hover{background:#c62828}.button.tertiary,[type=button].tertiary,[type=reset].tertiary,[type=submit].tertiary,button.tertiary{background:rgba(139,195,74,.8)}.button.tertiary:active,.button.tertiary:focus,.button.tertiary:hover,[type=button].tertiary:active,[type=button].tertiary:focus,[type=button].tertiary:hover,[type=reset].tertiary:active,[type=reset].tertiary:focus,[type=reset].tertiary:hover,[type=submit].tertiary:active,[type=submit].tertiary:focus,[type=submit].tertiary:hover,button.tertiary:active,button.tertiary:focus,button.tertiary:hover{background:#8bc34a}.button.small,[type=button].small,[type=reset].small,[type=submit].small,button.small{border-radius:1px;padding:1px 2px;margin:2px}.button.large,[type=button].large,[type=reset].large,[type=submit].large,button.large{border-radius:4px;padding:10px 15px;margin:7px}mark.secondary{background:#f44336}mark.tertiary{background:#558b2f}mark.tag{display:inline-block;border-radius:2px;padding:2px}mark.bubble{display:inline-block;border-radius:200px;padding:3px 5px}progress.inline{display:inline-block;vertical-align:middle;width:60vw}progress.secondary{color:#e53935}progress.secondary::-webkit-progress-value{background:#e53935}progress.secondary::-moz-progress-bar{background:#e53935}progress.tertiary{color:#689f38}progress.tertiary::-webkit-progress-value{background:#689f38}progress.tertiary::-moz-progress-bar{background:#689f38}progress.nano{height:2px;margin:0 auto 1px;border-radius:0}progress.nano::-webkit-progress-value{border-top-left-radius:0;border-bottom-left-radius:0}progress.nano::-moz-progress-bar{border-top-left-radius:0;border-bottom-left-radius:0}progress.nano[value="100"]::-webkit-progress-value{border-radius:0}progress.nano[value="100"]::-moz-progress-bar{border-radius:0} \ No newline at end of file +*,html{font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:1em;line-height:1.5;-webkit-text-size-adjust:100%}body{margin:0;color:#212121;background:#fafafa}article,aside,details,figcaption,figure,main,menu,section{display:block}summary{display:list-item}abbr[title]{border-bottom:none;text-decoration:underline}audio,video{display:inline-block}svg:not(:root){overflow:hidden}input{overflow:visible}img{width:100%;height:auto}h1,h2,h3,h4,h5,h6{line-height:1.2em;margin:0;font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#424242;display:block;margin-top:-.35em;font-size:45%}h1{font-size:2em}h2{font-size:1.5em}h3{font-size:1.15em}h4{font-size:1em}h5{font-size:.85em}h6{font-size:.75em}p{margin:1px 10px}b,strong{font-weight:700}hr{box-sizing:content-box;border:0;overflow:visible;line-height:1.2em;margin:.5em 4px;height:1px;background:-webkit-linear-gradient(to right,#bdbdbd,#616161,#bdbdbd);background:linear-gradient(to right,#bdbdbd,#616161,#bdbdbd)}code,kbd,pre,samp{font-family:monospace,monospace}code{border-radius:2px;background:#e0e0e0;padding:2px 4px}pre{overflow:auto;border-radius:0 2px 2px 0;background:#e0e0e0;padding:12px;margin:1px 10px;border-left:3px solid #1565c0}kbd{border-radius:2px;background:#212121;color:#fafafa;padding:2px 4px}small,sub,sup{font-size:75%}sup{top:-.5em}sub{bottom:-.25em}sub,sup{line-height:0;position:relative;vertical-align:baseline}a{color:#0277bd;text-decoration:underline;opacity:1;transition:all .3s ease 0s}a:visited{color:#01579b}a:active,a:focus,a:hover{opacity:.75}.container{margin:0 auto;padding:0 10px}.row{box-sizing:border-box;-webkit-box-flex:0;-webkit-box-orient:horizontal;-webkit-box-direction:normal;display:-webkit-flex;display:flex;-webkit-flex:0 1 auto;flex:0 1 auto;-webkit-flex-flow:row wrap;flex-flow:row wrap}.col-sm,[class^=col-sm-],[class^=col-sm-offset-]{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;flex:0 0 auto;padding:0 4px}.col-sm{-webkit-box-flex:1;max-width:100%;-webkit-flex-grow:1;flex-grow:1;-webkit-flex-basis:0;flex-basis:0}.col-sm-1{max-width:8.33333%;-webkit-flex-basis:8.33333%;flex-basis:8.33333%}.col-sm-2{max-width:16.66667%;-webkit-flex-basis:16.66667%;flex-basis:16.66667%}.col-sm-3{max-width:25%;-webkit-flex-basis:25%;flex-basis:25%}.col-sm-4{max-width:33.33333%;-webkit-flex-basis:33.33333%;flex-basis:33.33333%}.col-sm-5{max-width:41.66667%;-webkit-flex-basis:41.66667%;flex-basis:41.66667%}.col-sm-6{max-width:50%;-webkit-flex-basis:50%;flex-basis:50%}.col-sm-7{max-width:58.33333%;-webkit-flex-basis:58.33333%;flex-basis:58.33333%}.col-sm-8{max-width:66.66667%;-webkit-flex-basis:66.66667%;flex-basis:66.66667%}.col-sm-9{max-width:75%;-webkit-flex-basis:75%;flex-basis:75%}.col-sm-10{max-width:83.33333%;-webkit-flex-basis:83.33333%;flex-basis:83.33333%}.col-sm-11{max-width:91.66667%;-webkit-flex-basis:91.66667%;flex-basis:91.66667%}.col-sm-12{max-width:100%;-webkit-flex-basis:100%;flex-basis:100%}.col-sm-offset-0{margin-left:0}.col-sm-offset-1{margin-left:8.33333%}.col-sm-offset-2{margin-left:16.66667%}.col-sm-offset-3{margin-left:25%}.col-sm-offset-4{margin-left:33.33333%}.col-sm-offset-5{margin-left:41.66667%}.col-sm-offset-6{margin-left:50%}.col-sm-offset-7{margin-left:58.33333%}.col-sm-offset-8{margin-left:66.66667%}.col-sm-offset-9{margin-left:75%}.col-sm-offset-10{margin-left:83.33333%}.col-sm-offset-11{margin-left:91.66667%}@media only screen and (min-width:800px){.col-md,[class^=col-md-],[class^=col-md-offset-]{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;flex:0 0 auto;padding:0 4px}.col-md{-webkit-box-flex:1;max-width:100%;-webkit-flex-grow:1;flex-grow:1;-webkit-flex-basis:0;flex-basis:0}.col-md-1{max-width:8.33333%;-webkit-flex-basis:8.33333%;flex-basis:8.33333%}.col-md-2{max-width:16.66667%;-webkit-flex-basis:16.66667%;flex-basis:16.66667%}.col-md-3{max-width:25%;-webkit-flex-basis:25%;flex-basis:25%}.col-md-4{max-width:33.33333%;-webkit-flex-basis:33.33333%;flex-basis:33.33333%}.col-md-5{max-width:41.66667%;-webkit-flex-basis:41.66667%;flex-basis:41.66667%}.col-md-6{max-width:50%;-webkit-flex-basis:50%;flex-basis:50%}.col-md-7{max-width:58.33333%;-webkit-flex-basis:58.33333%;flex-basis:58.33333%}.col-md-8{max-width:66.66667%;-webkit-flex-basis:66.66667%;flex-basis:66.66667%}.col-md-9{max-width:75%;-webkit-flex-basis:75%;flex-basis:75%}.col-md-10{max-width:83.33333%;-webkit-flex-basis:83.33333%;flex-basis:83.33333%}.col-md-11{max-width:91.66667%;-webkit-flex-basis:91.66667%;flex-basis:91.66667%}.col-md-12{max-width:100%;-webkit-flex-basis:100%;flex-basis:100%}.col-md-offset-0{margin-left:0}.col-md-offset-1{margin-left:8.33333%}.col-md-offset-2{margin-left:16.66667%}.col-md-offset-3{margin-left:25%}.col-md-offset-4{margin-left:33.33333%}.col-md-offset-5{margin-left:41.66667%}.col-md-offset-6{margin-left:50%}.col-md-offset-7{margin-left:58.33333%}.col-md-offset-8{margin-left:66.66667%}.col-md-offset-9{margin-left:75%}.col-md-offset-10{margin-left:83.33333%}.col-md-offset-11{margin-left:91.66667%}}@media only screen and (min-width:1080px){.col-lg,[class^=col-lg-],[class^=col-lg-offset-]{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;flex:0 0 auto;padding:0 4px}.col-lg{-webkit-box-flex:1;max-width:100%;-webkit-flex-grow:1;flex-grow:1;-webkit-flex-basis:0;flex-basis:0}.col-lg-1{max-width:8.33333%;-webkit-flex-basis:8.33333%;flex-basis:8.33333%}.col-lg-2{max-width:16.66667%;-webkit-flex-basis:16.66667%;flex-basis:16.66667%}.col-lg-3{max-width:25%;-webkit-flex-basis:25%;flex-basis:25%}.col-lg-4{max-width:33.33333%;-webkit-flex-basis:33.33333%;flex-basis:33.33333%}.col-lg-5{max-width:41.66667%;-webkit-flex-basis:41.66667%;flex-basis:41.66667%}.col-lg-6{max-width:50%;-webkit-flex-basis:50%;flex-basis:50%}.col-lg-7{max-width:58.33333%;-webkit-flex-basis:58.33333%;flex-basis:58.33333%}.col-lg-8{max-width:66.66667%;-webkit-flex-basis:66.66667%;flex-basis:66.66667%}.col-lg-9{max-width:75%;-webkit-flex-basis:75%;flex-basis:75%}.col-lg-10{max-width:83.33333%;-webkit-flex-basis:83.33333%;flex-basis:83.33333%}.col-lg-11{max-width:91.66667%;-webkit-flex-basis:91.66667%;flex-basis:91.66667%}.col-lg-12{max-width:100%;-webkit-flex-basis:100%;flex-basis:100%}.col-lg-offset-0{margin-left:0}.col-lg-offset-1{margin-left:8.33333%}.col-lg-offset-2{margin-left:16.66667%}.col-lg-offset-3{margin-left:25%}.col-lg-offset-4{margin-left:33.33333%}.col-lg-offset-5{margin-left:41.66667%}.col-lg-offset-6{margin-left:50%}.col-lg-offset-7{margin-left:58.33333%}.col-lg-offset-8{margin-left:66.66667%}.col-lg-offset-9{margin-left:75%}.col-lg-offset-10{margin-left:83.33333%}.col-lg-offset-11{margin-left:91.66667%}}table{border-collapse:separate;border-spacing:0;border:1px solid #bdbdbd;border-radius:2px;margin:0 auto}caption{font-size:1.5em;margin:6px 0 12px}tr{padding:6px}td,th{padding:10px;border-left:1px solid #bdbdbd;border-top:1px solid #bdbdbd}th{border-top:0;background:#eceff1}td:first-child,th:first-child{border-left:0}@media only screen and (max-width:768px){table{border-collapse:collapse;border:0;width:100%}thead{border:0;height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%)}tr{display:block;border:1px solid #bdbdbd;border-radius:2px;margin-bottom:10px}td{display:block;border:0;border-bottom:1px solid #bdbdbd;text-align:right}td:before{content:attr(data-label);float:left;font-weight:700}td:last-child{border-bottom:0}}form{background:#eceff1;border:1px solid #90a4ae;border-radius:2px;margin:8px;padding:8px}fieldset{border:1px solid #b0bec5;border-radius:1px;margin:0;padding:4px 6px 8px}legend{box-sizing:border-box;display:table;max-width:100%;white-space:normal;font-weight:700;font-size:.85em;padding:4px}.input-group{display:inline-block}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}textarea{overflow:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}[type=email],[type=number],[type=password],[type=search],[type=tel],[type=text],[type=url],input:not([type]),select,textarea{box-sizing:border-box;background:#fafafa;color:#212121;border:1px solid #b0bec5;border-radius:1px;margin:2px;padding:6px 8px}[type=email]:focus,[type=number]:focus,[type=password]:focus,[type=search]:focus,[type=tel]:focus,[type=text]:focus,[type=url]:focus,input:not([type]):focus,select:focus,textarea:focus{border-color:#0288d1;box-shadow:none}[type=email][disabled],[type=number][disabled],[type=password][disabled],[type=search][disabled],[type=tel][disabled],[type=text][disabled],[type=url][disabled],input:not([type])[disabled],select[disabled],textarea[disabled]{cursor:not-allowed;opacity:.75}[type=email]:focus:invalid,[type=email]:focus:invalid:focus,[type=email]:invalid,[type=number]:focus:invalid,[type=number]:focus:invalid:focus,[type=number]:invalid,[type=password]:focus:invalid,[type=password]:focus:invalid:focus,[type=password]:invalid,[type=search]:focus:invalid,[type=search]:focus:invalid:focus,[type=search]:invalid,[type=tel]:focus:invalid,[type=tel]:focus:invalid:focus,[type=tel]:invalid,[type=text]:focus:invalid,[type=text]:focus:invalid:focus,[type=text]:invalid,[type=url]:focus:invalid,[type=url]:focus:invalid:focus,[type=url]:invalid,input:not([type]):focus:invalid,input:not([type]):focus:invalid:focus,input:not([type]):invalid,select:focus:invalid,select:focus:invalid:focus,select:invalid,textarea:focus:invalid,textarea:focus:invalid:focus,textarea:invalid{border-color:#d32f2f;box-shadow:none}[type=email][readonly],[type=number][readonly],[type=password][readonly],[type=search][readonly],[type=tel][readonly],[type=text][readonly],[type=url][readonly],input:not([type])[readonly],select[readonly],textarea[readonly]{background:#eceff1;border-color:#90a4ae}::-webkit-placeholder{color:#37474f}::-moz-placeholder{color:#37474f}::-ms-placeholder{color:#37474f}header{display:block;height:36px;background:#263238;color:#fafafa;padding:2px 8px;white-space:nowrap;overflow-x:auto;overflow-y:hidden}header .logo{color:#fafafa;font-size:1.75em;line-height:1.2;margin:1px 6px 1px 1px}header .button,header [type=button],header a.button,header button,header label.button{background:#263238;color:#fafafa;vertical-align:top;margin:2px 0 0}header .button:active,header .button:focus,header .button:hover,header [type=button]:active,header [type=button]:focus,header [type=button]:hover,header a.button:active,header a.button:focus,header a.button:hover,header button:active,header button:focus,header button:hover,header label.button:active,header label.button:focus,header label.button:hover{background:#37474f}header .logo,header a.button{text-decoration:none}nav{display:block;background:#eceff1;border-radius:1px;margin:2px;padding:4px 4px 4px 16px}nav a,nav a:visited{display:block;color:#0277bd}nav .sublink-1{padding-left:12px}nav .sublink-2{padding-left:24px}footer{display:block;background:#263238;color:#fafafa;padding:22px 10px 12px;font-size:85%}footer a,footer a:visited{color:#039be5}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button{overflow:visible;text-transform:none}.button,[type=button],[type=reset],[type=submit],a.button,button,label.button{display:inline-block;background:rgba(207,216,220,.75);color:#212121;border:0;border-radius:2px;padding:4px 6px;margin:4px;text-decoration:none;transition:all .3s ease 0s;cursor:pointer}.button:active,.button:focus,.button:hover,[type=button]:active,[type=button]:focus,[type=button]:hover,[type=reset]:active,[type=reset]:focus,[type=reset]:hover,[type=submit]:active,[type=submit]:focus,[type=submit]:hover,a.button:active,a.button:focus,a.button:hover,button:active,button:focus,button:hover,label.button:active,label.button:focus,label.button:hover{background:#cfd8dc;opacity:1}.button:disabled,.button[disabled],[type=button]:disabled,[type=button][disabled],[type=reset]:disabled,[type=reset][disabled],[type=submit]:disabled,[type=submit][disabled],a.button:disabled,a.button[disabled],button:disabled,button[disabled],label.button:disabled,label.button[disabled]{cursor:not-allowed;opacity:.65}input[type=file]{display:none}[type=checkbox],[type=radio]{height:1px;width:1px;margin:-1px;overflow:hidden;position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%)}.input-group [type=checkbox]+label,.input-group [type=radio]+label{position:relative;margin-left:21.25px}.input-group [type=checkbox]+label:before,.input-group [type=radio]+label:before{box-sizing:border-box;display:inline-block;position:absolute;top:0;left:0;width:17px;height:17px;content:'';border:1px solid #b0bec5;border-radius:1px;background:#fafafa;color:#212121;margin-left:-21.25px;vertical-align:text-bottom}.input-group [type=checkbox]+label:active:before,.input-group [type=checkbox]+label:focus:before,.input-group [type=checkbox]+label:hover:before,.input-group [type=checkbox]:focus+label:before,.input-group [type=radio]+label:active:before,.input-group [type=radio]+label:focus:before,.input-group [type=radio]+label:hover:before,.input-group [type=radio]:focus+label:before{border-color:#0288d1}.input-group [type=radio]+label:after,.input-group [type=radio]+label:before{border-radius:50%}.input-group [type=checkbox][disabled]+label,.input-group [type=radio][disabled]+label{cursor:not-allowed}.input-group [type=checkbox][disabled]+label:after,.input-group [type=checkbox][disabled]+label:before,.input-group [type=radio][disabled]+label:after,.input-group [type=radio][disabled]+label:before{opacity:.75}.input-group [type=checkbox]:checked+label:after,.input-group [type=radio]:checked+label:after{margin-left:-21.25px;position:absolute;top:3.83px;left:3.83px;width:9.35px;height:9.35px;background:#212121;content:''}mark{background:#0277bd;color:#fafafa;font-size:95%;line-height:1;padding:1px}progress{display:block;vertical-align:baseline;-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:10px;border:0;border-radius:1px;margin:1px auto;background:#f5f5f5;color:#01579b}progress::-webkit-progress-value{background:#01579b;border-top-left-radius:1px;border-bottom-left-radius:1px}progress::-webkit-progress-bar{background:#f5f5f5}progress::-moz-progress-bar{background:#01579b;border-top-left-radius:1px;border-bottom-left-radius:1px}progress[value="100"]::-webkit-progress-value{border-radius:1px}progress[value="100"]::-moz-progress-bar{border-radius:1px}.button.primary,[type=button].primary,[type=reset].primary,[type=submit].primary,button.primary{background:#1565c0;color:#fafafa}.button.primary:active,.button.primary:focus,.button.primary:hover,[type=button].primary:active,[type=button].primary:focus,[type=button].primary:hover,[type=reset].primary:active,[type=reset].primary:focus,[type=reset].primary:hover,[type=submit].primary:active,[type=submit].primary:focus,[type=submit].primary:hover,button.primary:active,button.primary:focus,button.primary:hover{background:rgba(21,101,192,.85)}.button.secondary,[type=button].secondary,[type=reset].secondary,[type=submit].secondary,button.secondary{background:rgba(198,40,40,.85);color:#fafafa}.button.secondary:active,.button.secondary:focus,.button.secondary:hover,[type=button].secondary:active,[type=button].secondary:focus,[type=button].secondary:hover,[type=reset].secondary:active,[type=reset].secondary:focus,[type=reset].secondary:hover,[type=submit].secondary:active,[type=submit].secondary:focus,[type=submit].secondary:hover,button.secondary:active,button.secondary:focus,button.secondary:hover{background:#c62828}.button.tertiary,[type=button].tertiary,[type=reset].tertiary,[type=submit].tertiary,button.tertiary{background:rgba(139,195,74,.8)}.button.tertiary:active,.button.tertiary:focus,.button.tertiary:hover,[type=button].tertiary:active,[type=button].tertiary:focus,[type=button].tertiary:hover,[type=reset].tertiary:active,[type=reset].tertiary:focus,[type=reset].tertiary:hover,[type=submit].tertiary:active,[type=submit].tertiary:focus,[type=submit].tertiary:hover,button.tertiary:active,button.tertiary:focus,button.tertiary:hover{background:#8bc34a}.button.small,[type=button].small,[type=reset].small,[type=submit].small,button.small{border-radius:1px;padding:1px 2px;margin:2px}.button.large,[type=button].large,[type=reset].large,[type=submit].large,button.large{border-radius:4px;padding:10px 15px;margin:7px}mark.secondary{background:#f44336}mark.tertiary{background:#558b2f}mark.tag{display:inline-block;border-radius:2px;padding:2px}mark.bubble{display:inline-block;border-radius:200px;padding:3px 5px}progress.inline{display:inline-block;vertical-align:middle;width:60vw}progress.secondary{color:#e53935}progress.secondary::-webkit-progress-value{background:#e53935}progress.secondary::-moz-progress-bar{background:#e53935}progress.tertiary{color:#689f38}progress.tertiary::-webkit-progress-value{background:#689f38}progress.tertiary::-moz-progress-bar{background:#689f38}progress.nano{height:2px;margin:0 auto 1px;border-radius:0}progress.nano::-webkit-progress-value{border-top-left-radius:0;border-bottom-left-radius:0}progress.nano::-moz-progress-bar{border-top-left-radius:0;border-bottom-left-radius:0}progress.nano[value="100"]::-webkit-progress-value{border-radius:0}progress.nano[value="100"]::-moz-progress-bar{border-radius:0}.bordered{border:1px solid rgba(0,0,0,.25)!important}.rounded{border-radius:2px!important}.circular{border-radius:50%!important}ul.breadcrumbs{list-style:none}ul.breadcrumbs>li{display:inline-block;padding-right:.125em}ul.breadcrumbs>li+li:before{content:'\27e9';padding:.125em} \ No newline at end of file diff --git a/flavors/v2/mini-default.scss b/flavors/v2/mini-default.scss index ee84f6b..09e490f 100644 --- a/flavors/v2/mini-default.scss +++ b/flavors/v2/mini-default.scss @@ -301,9 +301,16 @@ $progress-style1-height: 2px; // Height for <progress> style 1 $progress-style1-margin: 0 auto 1px; // Margin for <progress> style 1 $progress-style1-border-style: 0; // Border style for <progress> style 1 $progress-style1-border-radius: 0; // Border radius for <progress> style 1 +// Variables for core utilities and helper classes. +$border-generic-name: 'bordered'; // Class name for generic border style +$border-radial-style1-name: 'rounded'; // Class name for radial border style 1 +$border-radial-style1-radius: 2px; // Border radius for radial border style 1 +$border-radial-style2-name: 'circular'; // Class name for radial border style 2 +$border-radial-style2-radius: 50%; // Border radius for radial border style 2 +$breadcrumbs-name: 'breadcrumbs'; // Class name for breadcrumbs // Enable base @import '../../scss/v2/core'; -// Use mixins for button elements +// Use mixins for button elements. @include make-button-alt-color ($button-variant1-name, $button-variant1-back-color, $button-variant1-back-opacity, $button-variant1-hover-back-opacity, $button-variant1-fore-color); @include make-button-alt-color ($button-variant2-name, $button-variant2-back-color, @@ -314,19 +321,24 @@ $progress-style1-border-radius: 0; // Border radius for <progress> st $button-style1-border-radius, $button-style1-padding, $button-style1-margin); @include make-button-alt-style ($button-style2-name, $button-style2-border-style, $button-style2-border-radius, $button-style2-padding, $button-style2-margin); -// Custom button style demonstration (not enabled) +// Custom button style demonstration (not enabled). //@include make-button-alt-color ($button-custom-name, $button-custom-back-color, // $button-custom-back-opacity, $button-custom-hover-back-opacity); //@include make-button-alt-style ($button-custom-name, $button-custom-border-style, // $button-custom-border-radius, $button-custom-padding, $button-custom-margin); -// Use mixins for contextual background elements -@include make-mark-alt-color($mark-variant1-name, $mark-variant1-back-color); -@include make-mark-alt-color($mark-variant2-name, $mark-variant2-back-color); -@include make-mark-alt-style($mark-style1-name, $mark-style1-border-radius, $mark-style1-padding); -@include make-mark-alt-style($mark-style2-name, $mark-style2-border-radius, $mark-style2-padding); -// Use mixins for progress elements -@include make-progress-inline($progress-inline-name, $progress-inline-width); -@include make-progress-alt-color($progress-variant1-name, $progress-variant1-fore-color); -@include make-progress-alt-color($progress-variant2-name, $progress-variant2-fore-color); -@include make-progress-alt-style($progress-style1-name, $progress-style1-height, - $progress-style1-margin, $progress-style1-border-style, $progress-style1-border-radius); \ No newline at end of file +// Use mixins for contextual background elements. +@include make-mark-alt-color ($mark-variant1-name, $mark-variant1-back-color); +@include make-mark-alt-color ($mark-variant2-name, $mark-variant2-back-color); +@include make-mark-alt-style ($mark-style1-name, $mark-style1-border-radius, $mark-style1-padding); +@include make-mark-alt-style ($mark-style2-name, $mark-style2-border-radius, $mark-style2-padding); +// Use mixins for progress elements. +@include make-progress-inline ($progress-inline-name, $progress-inline-width); +@include make-progress-alt-color ($progress-variant1-name, $progress-variant1-fore-color); +@include make-progress-alt-color ($progress-variant2-name, $progress-variant2-fore-color); +@include make-progress-alt-style ($progress-style1-name, $progress-style1-height, + $progress-style1-margin, $progress-style1-border-style, $progress-style1-border-radius); +// Use mixins for core utilities and helper classes. +@include make-border-generic ($border-generic-name); +@include make-border-radial-style ($border-radial-style1-name, $border-radial-style1-radius); +@include make-border-radial-style ($border-radial-style2-name, $border-radial-style2-radius); +@include make-breadcrumbs($breadcrumbs-name); \ No newline at end of file diff --git a/scss/v2/_core.scss b/scss/v2/_core.scss index 3868922..4857789 100644 --- a/scss/v2/_core.scss +++ b/scss/v2/_core.scss @@ -363,4 +363,5 @@ a{ @import 'mini-core/checkbox'; @import 'mini-core/contextual'; @import 'mini-core/progress'; +@import 'mini-core/utility'; //=================================================== \ No newline at end of file diff --git a/scss/v2/mini-core/_utility.scss b/scss/v2/mini-core/_utility.scss new file mode 100644 index 0000000..7535676 --- /dev/null +++ b/scss/v2/mini-core/_utility.scss @@ -0,0 +1,44 @@ +// Definitions for utilities and helper classes. +// Note: most mixins need to be called separately to work. +// Generic border mixin. ATTENTION: Uses !important. +// Variables: +// - $border-generic-name : The name of the class used for the generic border. +@mixin make-border-generic ($border-generic-name) { +.#{$border-generic-name} { + border: 1px solid rgba(0,0,0, 0.25) !important; +} +} +// Generic radial border mixin. ATTENTION: Uses !important. +// Variables: +// - $border-radial-name : The name of the class used for the radial border. +// - $border-radial-radius : The border radius used for the radial border. +@mixin make-border-radial-style ($border-radial-name, $border-radial-radius) { +.#{$border-radial-name} { + border-radius: $border-radial-radius !important; +} +} +// Breadcrumb mixin. +// Variables: +// - $breadcrumbs-name : The name of the class used for the breadcrumbs. +// - $use-right-angle-symbol : Should the right angle symbol be used as a separator (`true`/`false`). +// Value is `true` by default. If `false` a forward slash will be used. +@mixin make-breadcrumbs($breadcrumbs-name, $use-right-angle-symbol : true){ +ul.#{$breadcrumbs-name}{ + list-style: none; +& > li{ + display: inline-block; +// Some padding is needed for the breacrumbs to appear properly. 2px should be enough. + padding-right: 0.125em; +& + li:before{ +@if $use-right-angle-symbol{ + content: '\27e9'; +} +@else { + content: '\002f'; +} +// Some padding is needed for the breacrumbs to appear properly. 2px should be enough. + padding: 0.125em; +} +} +} +} \ No newline at end of file