From 3dbdc27c55225d248eb9cb0cfdbfa5bed7cb2c29 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Sat, 8 Oct 2016 12:00:46 +0300 Subject: [PATCH] Bootstrap flavor - buttons --- flavors/mini-bootstrap.css | 187 ++++++++++++++++++--------------- flavors/mini-bootstrap.min.css | 2 +- flavors/mini-bootstrap.scss | 85 +++++++++------ 3 files changed, 154 insertions(+), 120 deletions(-) diff --git a/flavors/mini-bootstrap.css b/flavors/mini-bootstrap.css index d1a4d5a..9a37aef 100644 --- a/flavors/mini-bootstrap.css +++ b/flavors/mini-bootstrap.css @@ -484,42 +484,61 @@ textarea { display: inline-block; border: 0; border-radius: 4px; - margin: 2px 0; + margin: 5px 0; padding: 6px 12px; - color: #2a2a2a; - background: #eaeaea; + color: #333; + background: #fff; 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: #fdfdfd; } + background: #ececec; } .btn.disabled, .btn[disabled], .btn:disabled, a.btn.disabled, a.btn[disabled], a.btn:disabled, a.btn:visited.disabled, a.btn:visited[disabled], a.btn:visited:disabled { cursor: not-allowed; opacity: 0.65; } -.btn.blue, a.btn.blue, a.btn.blue:visited { - color: #eeeeee; - background: #3f84b3; } - .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: #5597c3; } +.btn.btn-primary, a.btn.btn-primary, a.btn.btn-primary:visited { + color: #fff; + background: #337ab7; } + .btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus, a.btn.btn-primary:hover, a.btn.btn-primary:active, a.btn.btn-primary:focus, a.btn.btn-primary:visited:hover, a.btn.btn-primary:visited:active, a.btn.btn-primary:visited:focus { + background: #2b6699; } -.btn.green, a.btn.green, a.btn.green:visited { - color: #eeeeee; - background: #2db747; } - .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: #3bcf57; } +.btn.btn-success, a.btn.btn-success, a.btn.btn-success:visited { + color: #fff; + background: #5cb85c; } + .btn.btn-success:hover, .btn.btn-success:active, .btn.btn-success:focus, a.btn.btn-success:hover, a.btn.btn-success:active, a.btn.btn-success:focus, a.btn.btn-success:visited:hover, a.btn.btn-success:visited:active, a.btn.btn-success:visited:focus { + background: #48a648; } -.btn.red, a.btn.red, a.btn.red:visited { - color: #eeeeee; - background: #ea4848; } - .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: #ee6a6a; } +.btn.btn-info, a.btn.btn-info, a.btn.btn-info:visited { + color: #fff; + background: #5bc0de; } + .btn.btn-info:hover, .btn.btn-info:active, .btn.btn-info:focus, a.btn.btn-info:hover, a.btn.btn-info:active, a.btn.btn-info:focus, a.btn.btn-info:visited:hover, a.btn.btn-info:visited:active, a.btn.btn-info:visited:focus { + background: #3bb4d8; } -.btn.lg { - padding: 9px 15px; - font-size: 135%; } +.btn.btn-warning, a.btn.btn-warning, a.btn.btn-warning:visited { + color: #fff; + background: #f0ad4e; } + .btn.btn-warning:hover, .btn.btn-warning:active, .btn.btn-warning:focus, a.btn.btn-warning:hover, a.btn.btn-warning:active, a.btn.btn-warning:focus, a.btn.btn-warning:visited:hover, a.btn.btn-warning:visited:active, a.btn.btn-warning:visited:focus { + background: #ed9d2b; } -.btn.sm { - padding: 4px 8px; - font-size: 80%; } +.btn.btn-danger, a.btn.btn-danger, a.btn.btn-danger:visited { + color: #fff; + background: #d9534f; } + .btn.btn-danger:hover, .btn.btn-danger:active, .btn.btn-danger:focus, a.btn.btn-danger:hover, a.btn.btn-danger:active, a.btn.btn-danger:focus, a.btn.btn-danger:visited:hover, a.btn.btn-danger:visited:active, a.btn.btn-danger:visited:focus { + background: #d23430; } + +.btn.btn-lg { + padding: 10px 16px; + font-size: 128.6%; } + +.btn.btn-sm { + padding: 5px 10px; + font-size: 85.7%; } + +.btn.btn-xs { + padding: 1px 5px; + font-size: 85.7%; } + +.btn { + border: 1px solid rgba(0, 0, 0, 0.25) !important; } /* Mixin for responsive, mobile-first grid. @@ -1001,22 +1020,22 @@ img.thumb { border-radius: 50% !important; } .txt-blue { - color: #3f84b3 !important; } + color: #337ab7 !important; } .txt-green { - color: #2db747 !important; } + color: #5cb85c !important; } .txt-red { - color: #ea4848 !important; } + color: #5bc0de !important; } .bg-blue { - background-color: #3f84b3 !important; } + background-color: #337ab7 !important; } .bg-green { - background-color: #2db747 !important; } + background-color: #5cb85c !important; } .bg-red { - background-color: #ea4848 !important; } + background-color: #5bc0de !important; } .caret { display: inline-block; @@ -1086,44 +1105,44 @@ img.thumb { .lbl { display: inline-block; padding: 6px 10px; - color: #eeeeee; + color: #fff; background-color: #777; border-radius: 4px; } .lbl:empty { display: none; } .lbl.blue { - color: #eeeeee; - background-color: #3f84b3; } + color: #fff; + background-color: #337ab7; } .lbl.green { - color: #eeeeee; - background-color: #2db747; } + color: #fff; + background-color: #5cb85c; } .lbl.red { - color: #eeeeee; - background-color: #ea4848; } + color: #fff; + background-color: #5bc0de; } .bdg { display: inline-block; padding: 3px 8px; - color: #eeeeee; + color: #fff; background-color: #777; border-radius: 8px; } .bdg:empty { display: none; } .bdg.blue { - color: #eeeeee; - background-color: #3f84b3; } + color: #fff; + background-color: #337ab7; } .bdg.green { - color: #eeeeee; - background-color: #2db747; } + color: #fff; + background-color: #5cb85c; } .bdg.red { - color: #eeeeee; - background-color: #ea4848; } + color: #fff; + background-color: #5bc0de; } /* Mixin for tab system. @@ -1408,18 +1427,18 @@ input[type="radio"]:checked.acrd + label { float: left; width: 0; height: 100%; - color: #eeeeee; - background-color: #3f84b3; + color: #fff; + background-color: #337ab7; text-align: center; font-size: 0.8em; } .prg > span.green { - color: #eeeeee; - background-color: #2db747; } + color: #fff; + background-color: #5cb85c; } .prg > span.red { - color: #eeeeee; - background-color: #ea4848; } + color: #fff; + background-color: #5bc0de; } /* Mixin for dotted spinner component. @@ -1664,10 +1683,10 @@ input[type="radio"]:checked.acrd + label { padding: 20px; } .alert-blue + div { - border: 1px solid #32688d; + border: 1px solid #285f8f; border-radius: 4px; - background-color: #5e9cc7; - color: #244c68; + background-color: #4f93ce; + color: #1d4567; padding: 20px; } input[type="checkbox"].alert-blue { @@ -1678,25 +1697,25 @@ input[type="checkbox"].alert-blue { input[type="checkbox"].alert-blue + div a { font-weight: 700; text-decoration: none; - color: #173142; } + color: #122a3f; } input[type="checkbox"].alert-blue + div a:hover, input[type="checkbox"].alert-blue + div a:active, input[type="checkbox"].alert-blue + div a:focus { text-decoration: underline; } input[type="checkbox"].alert-blue + div .close { position: absolute; top: 20px; right: 20px; - color: #244c68; } + color: #1d4567; } input[type="checkbox"].alert-blue + div .close:hover, input[type="checkbox"].alert-blue + div .close:active, input[type="checkbox"].alert-blue + div .close:focus { - color: #173142; } + color: #122a3f; } input[type="checkbox"]:checked.alert-blue + div { display: block; } .alert-green + div { - border: 1px solid #238e37; + border: 1px solid #449d44; border-radius: 4px; - background-color: #46d160; - color: #196527; + background-color: #80c780; + color: #357935; padding: 20px; } input[type="checkbox"].alert-green { @@ -1707,25 +1726,25 @@ input[type="checkbox"].alert-green { input[type="checkbox"].alert-green + div a { font-weight: 700; text-decoration: none; - color: #0f3c17; } + color: #255625; } input[type="checkbox"].alert-green + div a:hover, input[type="checkbox"].alert-green + div a:active, input[type="checkbox"].alert-green + div a:focus { text-decoration: underline; } input[type="checkbox"].alert-green + div .close { position: absolute; top: 20px; right: 20px; - color: #196527; } + color: #357935; } input[type="checkbox"].alert-green + div .close:hover, input[type="checkbox"].alert-green + div .close:active, input[type="checkbox"].alert-green + div .close:focus { - color: #0f3c17; } + color: #255625; } input[type="checkbox"]:checked.alert-green + div { display: block; } .alert-red + div { - border: 1px solid #e51a1a; + border: 1px solid #31b0d5; border-radius: 4px; - background-color: #ef7676; - color: #b71515; + background-color: #85d0e7; + color: #2390b0; padding: 20px; } input[type="checkbox"].alert-red { @@ -1736,16 +1755,16 @@ input[type="checkbox"].alert-red { input[type="checkbox"].alert-red + div a { font-weight: 700; text-decoration: none; - color: #891010; } + color: #1b6d85; } input[type="checkbox"].alert-red + div a:hover, input[type="checkbox"].alert-red + div a:active, input[type="checkbox"].alert-red + div a:focus { text-decoration: underline; } input[type="checkbox"].alert-red + div .close { position: absolute; top: 20px; right: 20px; - color: #b71515; } + color: #2390b0; } input[type="checkbox"].alert-red + div .close:hover, input[type="checkbox"].alert-red + div .close:active, input[type="checkbox"].alert-red + div .close:focus { - color: #891010; } + color: #1b6d85; } input[type="checkbox"]:checked.alert-red + div { display: block; } @@ -1833,38 +1852,38 @@ input[type="checkbox"]:checked.popover-bottom + label > .popover-bottom { .btn-grp .btn:last-child { border-radius: 0 4px 4px 0; } -.btn-grp .btn.blue { - border: 1px solid #32688d; +.btn-grp .btn.btn-primary { + border: 1px solid #285f8f; margin: 0; } - .btn-grp .btn.blue:not(:first-child):not(:last-child) { + .btn-grp .btn.btn-primary:not(:first-child):not(:last-child) { border-radius: 0; border-right: 0; } - .btn-grp .btn.blue:first-child { + .btn-grp .btn.btn-primary:first-child { border-radius: 4px 0 0 4px; border-right: 0; } - .btn-grp .btn.blue:last-child { + .btn-grp .btn.btn-primary:last-child { border-radius: 0 4px 4px 0; } -.btn-grp .btn.green { - border: 1px solid #238e37; +.btn-grp .btn.btn-success { + border: 1px solid #449d44; margin: 0; } - .btn-grp .btn.green:not(:first-child):not(:last-child) { + .btn-grp .btn.btn-success:not(:first-child):not(:last-child) { border-radius: 0; border-right: 0; } - .btn-grp .btn.green:first-child { + .btn-grp .btn.btn-success:first-child { border-radius: 4px 0 0 4px; border-right: 0; } - .btn-grp .btn.green:last-child { + .btn-grp .btn.btn-success:last-child { border-radius: 0 4px 4px 0; } -.btn-grp .btn.red { - border: 1px solid 1px solid #e51a1a; +.btn-grp .btn.btn-info { + border: 1px solid 1px solid #31b0d5; margin: 0; } - .btn-grp .btn.red:not(:first-child):not(:last-child) { + .btn-grp .btn.btn-info:not(:first-child):not(:last-child) { border-radius: 0; border-right: 0; } - .btn-grp .btn.red:first-child { + .btn-grp .btn.btn-info:first-child { border-radius: 4px 0 0 4px; border-right: 0; } - .btn-grp .btn.red:last-child { + .btn-grp .btn.btn-info:last-child { border-radius: 0 4px 4px 0; } diff --git a/flavors/mini-bootstrap.min.css b/flavors/mini-bootstrap.min.css index 097c32d..fd290d2 100644 --- a/flavors/mini-bootstrap.min.css +++ b/flavors/mini-bootstrap.min.css @@ -1 +1 @@ -pre{border:1px solid rgba(0,0,0,.25)}html{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0;color:#333;background-color:#fff}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.1;margin:0;font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#777;font-weight:400}h1{font-size:36px}h2{font-size:30px}h3{font-size:24px}h4{font-size:18px}h5{font-size:14px}h6{font-size:12px}hr{box-sizing:content-box;line-height:1.14286;margin:.7em 0;height:0;border:0;border-top:1px solid #d9d9d9}small,sub,sup{font-size:80%}p,pre{margin:0 0 10px}ol,ul{margin-top:0;margin-bottom:10px}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}code,kbd,pre,samp{font-family:Menlo,Monaco,Consolas,"Courier New",monospace;font-size:14px}code,kbd,pre{padding:2px 4px;border-radius:4px}code,pre{background-color:#f9f2f4}kbd{color:#fff;background-color:#333}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:#337ab7}a:active,a:hover{outline-width:0;color:#23527c}a:visited{color:#337ab7}a:visited:active,a:visited:hover{color:#23527c}b,strong{font-weight:bolder}dfn{font-style:italic}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}mark{background-color:#fcf8e3;color:#333}.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,Arial,sans-serif;font-size:100%;line-height:1.14286;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:0;border-radius:0;margin:0;padding:0}[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,.btn[disabled],a.btn.disabled,a.btn:disabled,a.btn:visited.disabled,a.btn:visited:disabled,a.btn:visited[disabled],a.btn[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:#e6e6e6;border-color:#bfbfbf}.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,.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;cursor:pointer}img.thumb:focus,img.thumb:hover,img.thumbactive{border-color:#337ab7}.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:.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:active,.close:focus,.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-block;padding:6px 10px;color:#eee;background-color:#777;border-radius:4px}.lbl:empty{display:none}.lbl.blue{color:#eee;background-color:#3f84b3}.lbl.green{color:#eee;background-color:#2db747}.lbl.red{color:#eee;background-color:#ea4848}.bdg{display:inline-block;padding:3px 8px;color:#eee;background-color:#777;border-radius:8px}.bdg:empty{display:none}.bdg.blue{color:#eee;background-color:#3f84b3}.bdg.green{color:#eee;background-color:#2db747}.bdg.red{color:#eee;background-color:#ea4848}.tabs{position:relative;min-height:250px;width:100%}.tabs input[type=radio]{display:none}.tabs input[type=radio]+div{display:inline}.tabs input[type=radio]+div>label{position:reative;float:left;margin-right:3px;left:1px;height:40px;padding:8px 14px;color:#337ab7;background-color:#fff;border:1px solid #ccc;border-radius:4px 4px 0 0;cursor:pointer}.tabs input[type=radio]+div>label:active,.tabs input[type=radio]+div>label:focus,.tabs input[type=radio]+div>label:hover{background:#e6e6e6}.tabs input[type=radio]+div>label+div{position:absolute;z-index:-2;left:0;top:39px;bottom:0;right:0;padding:20px;background:#fff;border:1px solid #ccc}.tabs input[type=radio]:checked+div>label{color:#333;background:#fff;border-top:3px solid #337ab7;border-bottom:1px solid #fff}.tabs input[type=radio]:checked+div>label+div{position:absolute;z-index:-1}.modal{display:none}.modal+div{z-index:997;position:fixed;width:100%;height:0;opacity:0;display:none;transition:opacity .3s ease-out}.modal+div>div{z-index:998;position:relative;width:45%;color:#333;background-color:#fff;margin:8.5% auto 0;padding:18px;border:1px solid #ccc;border-radius:4px;box-shadow:0 5px 15px rgba(0,0,0,.5)}.modal:checked+div{height:100%;opacity:1;display:block}.modal:checked+div>label{background-color:rgba(0,0,0,.35);position:fixed;width:100%;height:100%;top:0}.modal+div>div .close{position:absolute;top:20px;right:20px}.nav .link.dropdown{cursor:pointer}.nav input[type=checkbox],.nav input[type=checkbox].dropdown+div,.nav input[type=radio],.nav input[type=radio].dropdown+div{display:none}.nav input[type=checkbox]:checked.dropdown+div,.nav input[type=radio]:checked.dropdown+div{display:block;font-size:.8em;margin-left:20px}input[type=checkbox].clps{display:none}input[type=checkbox].clps+div{display:none;color:#333;background-color:#eee;padding:10px;margin-top:5px;border:1px solid #ccc;border-radius:4px}input[type=checkbox]:checked.clps+div{display:block}input[type=radio].acrd{display:none}input[type=radio].acrd+label{width:100%;display:block;color:#333;background-color:#eee;padding:8px;margin-bottom:5px;border:1px solid #ccc;border-radius:4px;cursor:pointer}input[type=radio].acrd+label:active,input[type=radio].acrd+label:focus,input[type=radio].acrd+label:hover{background-color:#dbdbdb}input[type=radio].acrd+label+div{display:none;color:#333;background-color:#fff;padding:10px;margin-top:-1px;margin-bottom:5px;border:1px solid #ccc;border-radius:0 0 4px 4px}input[type=radio]:checked.acrd+label{border-radius:4px 4px 0 0;margin-bottom:0}input[type=radio]:checked.acrd+label+div{display:block}.prg{position:relative;overflow:hidden;height:20px;background-color:#d7d7d7;border-radius:4px}.prg>span{float:left;width:0;height:100%;color:#eee;background-color:#3f84b3;text-align:center;font-size:.8em}.prg>span.green{color:#eee;background-color:#2db747}.prg>span.red{color:#eee;background-color:#ea4848}.spinner-dots{display:inline-block;overflow:hidden;height:1.5em;vertical-align:bottom}.spinner-dots:after{display:inline-table;white-space:pre;content:"\A.\A..\A...";animation:spin-dots 1.5s steps(4) infinite}@keyframes spin-dots{to{transform:translateY(-6em)}}.spinner-round{display:inline-block;border:.4em solid rgba(34,34,34,.2);border-left:.4em solid #222;transform:translateZ(0);animation:spin-round 1.5s infinite linear}.spinner-round,.spinner-round:after{border-radius:50%;width:1.5em;height:1.5em}@keyframes spin-round{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.carousel{position:relative;width:80%;height:500px;overflow:hidden;text-align:center;margin:auto;border:1px solid #ccc;border-radius:4px}.carousel input[type=radio]{display:none}.carousel input[type=radio]+div{display:none;position:absolute;width:100%;height:100%;left:0;top:0;padding:10px;background-color:#e7e7e7}.carousel input[type=radio]+div>img{max-width:100%;max-height:100%;margin:auto}.carousel input[type=radio]+div>div{position:absolute;width:100%;height:160px;overflow:auto;left:0;top:340px;background-color:#333;color:#fff;opacity:.1}.carousel input[type=radio]+div>div:active,.carousel input[type=radio]+div>div:focus,.carousel input[type=radio]+div>div:hover{opacity:.8}.carousel input[type=radio]+div+label{position:relative;z-index:998;cursor:pointer;top:450px;color:#fafafa;font-size:1.8em}.carousel input[type=radio]+div+label:before{content:'\25cb'}.carousel input[type=radio]:checked+div{display:block}.carousel input[type=radio]:checked+div+label:before{content:'\25cf'}.brdcrmb{list-style:none}.brdcrmb>li{display:inline-block}.brdcrmb>li+li:before{content:'\27e9\00a0'}.well{border:1px solid #ccc;border-radius:4px;background-color:#e7e7e7;color:#333;padding:20px}.alert-blue+div{border:1px solid #32688d;border-radius:4px;background-color:#5e9cc7;color:#244c68;padding:20px}input[type=checkbox].alert-blue{display:none}input[type=checkbox].alert-blue+div{display:none;position:relative}input[type=checkbox].alert-blue+div a{font-weight:700;text-decoration:none;color:#173142}input[type=checkbox].alert-blue+div a:active,input[type=checkbox].alert-blue+div a:focus,input[type=checkbox].alert-blue+div a:hover{text-decoration:underline}input[type=checkbox].alert-blue+div .close{position:absolute;top:20px;right:20px;color:#244c68}input[type=checkbox].alert-blue+div .close:active,input[type=checkbox].alert-blue+div .close:focus,input[type=checkbox].alert-blue+div .close:hover{color:#173142}input[type=checkbox]:checked.alert-blue+div{display:block}.alert-green+div{border:1px solid #238e37;border-radius:4px;background-color:#46d160;color:#196527;padding:20px}input[type=checkbox].alert-green{display:none}input[type=checkbox].alert-green+div{display:none;position:relative}input[type=checkbox].alert-green+div a{font-weight:700;text-decoration:none;color:#0f3c17}input[type=checkbox].alert-green+div a:active,input[type=checkbox].alert-green+div a:focus,input[type=checkbox].alert-green+div a:hover{text-decoration:underline}input[type=checkbox].alert-green+div .close{position:absolute;top:20px;right:20px;color:#196527}input[type=checkbox].alert-green+div .close:active,input[type=checkbox].alert-green+div .close:focus,input[type=checkbox].alert-green+div .close:hover{color:#0f3c17}input[type=checkbox]:checked.alert-green+div{display:block}.alert-red+div{border:1px solid #e51a1a;border-radius:4px;background-color:#ef7676;color:#b71515;padding:20px}input[type=checkbox].alert-red{display:none}input[type=checkbox].alert-red+div{display:none;position:relative}input[type=checkbox].alert-red+div a{font-weight:700;text-decoration:none;color:#891010}input[type=checkbox].alert-red+div a:active,input[type=checkbox].alert-red+div a:focus,input[type=checkbox].alert-red+div a:hover{text-decoration:underline}input[type=checkbox].alert-red+div .close{position:absolute;top:20px;right:20px;color:#b71515}input[type=checkbox].alert-red+div .close:active,input[type=checkbox].alert-red+div .close:focus,input[type=checkbox].alert-red+div .close:hover{color:#891010}input[type=checkbox]:checked.alert-red+div{display:block}.panel{border:1px solid #ccc;border-radius:4px;background-color:#fff;color:#333;padding:0}.panel>*{padding:10px}.panel .head{border:0;border-bottom:1px solid #ccc;color:#333;background-color:#e7e7e7;padding:10px;margin:0}input[type=checkbox].popover-top{display:none}input[type=checkbox].popover-top+label{position:relative}input[type=checkbox].popover-top+label>.popover-top{position:absolute;display:none;background-color:#333;color:#fff;border-radius:5px;padding:7px 10px;z-index:998;width:auto;bottom:49px}input[type=checkbox].popover-top+label>.popover-top:before{position:absolute;display:block;border-top:7px solid #333;border-right:7px solid transparent;border-left:7px solid transparent;bottom:-7px;content:'';left:50%;margin-left:-7px}input[type=checkbox]:checked.popover-top+label>.popover-top{display:block}input[type=checkbox].popover-bottom{display:none}input[type=checkbox].popover-bottom+label{position:relative}input[type=checkbox].popover-bottom+label>.popover-bottom{position:absolute;display:none;background-color:#333;color:#fff;border-radius:4px;padding:7px 10px;z-index:998;width:auto;top:49px}input[type=checkbox].popover-bottom+label>.popover-bottom:before{position:absolute;display:block;border-bottom:7px solid #333;border-right:7px solid transparent;border-left:7px solid transparent;top:-7px;content:'';left:50%;margin-left:-7px}input[type=checkbox]:checked.popover-bottom+label>.popover-bottom{display:block}.btn-grp .btn{border:1px solid #ccc;margin:0}.btn-grp .btn:not(:first-child):not(:last-child){border-radius:0;border-right:0}.btn-grp .btn:first-child{border-radius:4px 0 0 4px;border-right:0}.btn-grp .btn:last-child{border-radius:0 4px 4px 0}.btn-grp .btn.blue{border:1px solid #32688d;margin:0}.btn-grp .btn.blue:not(:first-child):not(:last-child){border-radius:0;border-right:0}.btn-grp .btn.blue:first-child{border-radius:4px 0 0 4px;border-right:0}.btn-grp .btn.blue:last-child{border-radius:0 4px 4px 0}.btn-grp .btn.green{border:1px solid #238e37;margin:0}.btn-grp .btn.green:not(:first-child):not(:last-child){border-radius:0;border-right:0}.btn-grp .btn.green:first-child{border-radius:4px 0 0 4px;border-right:0}.btn-grp .btn.green:last-child{border-radius:0 4px 4px 0}.btn-grp .btn.red{border:1px solid 1px solid #e51a1a;margin:0}.btn-grp .btn.red:not(:first-child):not(:last-child){border-radius:0;border-right:0}.btn-grp .btn.red:first-child{border-radius:4px 0 0 4px;border-right:0}.btn-grp .btn.red:last-child{border-radius:0 4px 4px 0} \ No newline at end of file +pre{border:1px solid rgba(0,0,0,.25)}html{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0;color:#333;background-color:#fff}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.1;margin:0;font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#777;font-weight:400}h1{font-size:36px}h2{font-size:30px}h3{font-size:24px}h4{font-size:18px}h5{font-size:14px}h6{font-size:12px}hr{box-sizing:content-box;line-height:1.14286;margin:.7em 0;height:0;border:0;border-top:1px solid #d9d9d9}small,sub,sup{font-size:80%}p,pre{margin:0 0 10px}ol,ul{margin-top:0;margin-bottom:10px}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}code,kbd,pre,samp{font-family:Menlo,Monaco,Consolas,"Courier New",monospace;font-size:14px}code,kbd,pre{padding:2px 4px;border-radius:4px}code,pre{background-color:#f9f2f4}kbd{color:#fff;background-color:#333}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:#337ab7}a:active,a:hover{outline-width:0;color:#23527c}a:visited{color:#337ab7}a:visited:active,a:visited:hover{color:#23527c}b,strong{font-weight:bolder}dfn{font-style:italic}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}mark{background-color:#fcf8e3;color:#333}.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,Arial,sans-serif;font-size:100%;line-height:1.14286;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:0;border-radius:0;margin:0;padding:0}[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:5px 0;padding:6px 12px;color:#333;background:#fff;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:#ececec}.btn.disabled,.btn:disabled,.btn[disabled],a.btn.disabled,a.btn:disabled,a.btn:visited.disabled,a.btn:visited:disabled,a.btn:visited[disabled],a.btn[disabled]{cursor:not-allowed;opacity:.65}.btn.btn-primary,a.btn.btn-primary,a.btn.btn-primary:visited{color:#fff;background:#337ab7}.btn.btn-primary:active,.btn.btn-primary:focus,.btn.btn-primary:hover,a.btn.btn-primary:active,a.btn.btn-primary:focus,a.btn.btn-primary:hover,a.btn.btn-primary:visited:active,a.btn.btn-primary:visited:focus,a.btn.btn-primary:visited:hover{background:#2b6699}.btn.btn-success,a.btn.btn-success,a.btn.btn-success:visited{color:#fff;background:#5cb85c}.btn.btn-success:active,.btn.btn-success:focus,.btn.btn-success:hover,a.btn.btn-success:active,a.btn.btn-success:focus,a.btn.btn-success:hover,a.btn.btn-success:visited:active,a.btn.btn-success:visited:focus,a.btn.btn-success:visited:hover{background:#48a648}.btn.btn-info,a.btn.btn-info,a.btn.btn-info:visited{color:#fff;background:#5bc0de}.btn.btn-info:active,.btn.btn-info:focus,.btn.btn-info:hover,a.btn.btn-info:active,a.btn.btn-info:focus,a.btn.btn-info:hover,a.btn.btn-info:visited:active,a.btn.btn-info:visited:focus,a.btn.btn-info:visited:hover{background:#3bb4d8}.btn.btn-warning,a.btn.btn-warning,a.btn.btn-warning:visited{color:#fff;background:#f0ad4e}.btn.btn-warning:active,.btn.btn-warning:focus,.btn.btn-warning:hover,a.btn.btn-warning:active,a.btn.btn-warning:focus,a.btn.btn-warning:hover,a.btn.btn-warning:visited:active,a.btn.btn-warning:visited:focus,a.btn.btn-warning:visited:hover{background:#ed9d2b}.btn.btn-danger,a.btn.btn-danger,a.btn.btn-danger:visited{color:#fff;background:#d9534f}.btn.btn-danger:active,.btn.btn-danger:focus,.btn.btn-danger:hover,a.btn.btn-danger:active,a.btn.btn-danger:focus,a.btn.btn-danger:hover,a.btn.btn-danger:visited:active,a.btn.btn-danger:visited:focus,a.btn.btn-danger:visited:hover{background:#d23430}.btn.btn-lg{padding:10px 16px;font-size:128.6%}.btn.btn-sm{padding:5px 10px;font-size:85.7%}.btn.btn-xs{padding:1px 5px;font-size:85.7%}.btn{border:1px solid rgba(0,0,0,.25)!important}.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:#e6e6e6;border-color:#bfbfbf}.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,.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;cursor:pointer}img.thumb:focus,img.thumb:hover,img.thumbactive{border-color:#337ab7}.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:#5bc0de!important}.bg-blue{background-color:#337ab7!important}.bg-green{background-color:#5cb85c!important}.bg-red{background-color:#5bc0de!important}.caret{display:inline-block;vertical-align:middle;line-height:1;width:0;height:0;border:.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:active,.close:focus,.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-block;padding:6px 10px;color:#fff;background-color:#777;border-radius:4px}.lbl:empty{display:none}.lbl.blue{color:#fff;background-color:#337ab7}.lbl.green{color:#fff;background-color:#5cb85c}.lbl.red{color:#fff;background-color:#5bc0de}.bdg{display:inline-block;padding:3px 8px;color:#fff;background-color:#777;border-radius:8px}.bdg:empty{display:none}.bdg.blue{color:#fff;background-color:#337ab7}.bdg.green{color:#fff;background-color:#5cb85c}.bdg.red{color:#fff;background-color:#5bc0de}.tabs{position:relative;min-height:250px;width:100%}.tabs input[type=radio]{display:none}.tabs input[type=radio]+div{display:inline}.tabs input[type=radio]+div>label{position:reative;float:left;margin-right:3px;left:1px;height:40px;padding:8px 14px;color:#337ab7;background-color:#fff;border:1px solid #ccc;border-radius:4px 4px 0 0;cursor:pointer}.tabs input[type=radio]+div>label:active,.tabs input[type=radio]+div>label:focus,.tabs input[type=radio]+div>label:hover{background:#e6e6e6}.tabs input[type=radio]+div>label+div{position:absolute;z-index:-2;left:0;top:39px;bottom:0;right:0;padding:20px;background:#fff;border:1px solid #ccc}.tabs input[type=radio]:checked+div>label{color:#333;background:#fff;border-top:3px solid #337ab7;border-bottom:1px solid #fff}.tabs input[type=radio]:checked+div>label+div{position:absolute;z-index:-1}.modal{display:none}.modal+div{z-index:997;position:fixed;width:100%;height:0;opacity:0;display:none;transition:opacity .3s ease-out}.modal+div>div{z-index:998;position:relative;width:45%;color:#333;background-color:#fff;margin:8.5% auto 0;padding:18px;border:1px solid #ccc;border-radius:4px;box-shadow:0 5px 15px rgba(0,0,0,.5)}.modal:checked+div{height:100%;opacity:1;display:block}.modal:checked+div>label{background-color:rgba(0,0,0,.35);position:fixed;width:100%;height:100%;top:0}.modal+div>div .close{position:absolute;top:20px;right:20px}.nav .link.dropdown{cursor:pointer}.nav input[type=checkbox],.nav input[type=checkbox].dropdown+div,.nav input[type=radio],.nav input[type=radio].dropdown+div{display:none}.nav input[type=checkbox]:checked.dropdown+div,.nav input[type=radio]:checked.dropdown+div{display:block;font-size:.8em;margin-left:20px}input[type=checkbox].clps{display:none}input[type=checkbox].clps+div{display:none;color:#333;background-color:#eee;padding:10px;margin-top:5px;border:1px solid #ccc;border-radius:4px}input[type=checkbox]:checked.clps+div{display:block}input[type=radio].acrd{display:none}input[type=radio].acrd+label{width:100%;display:block;color:#333;background-color:#eee;padding:8px;margin-bottom:5px;border:1px solid #ccc;border-radius:4px;cursor:pointer}input[type=radio].acrd+label:active,input[type=radio].acrd+label:focus,input[type=radio].acrd+label:hover{background-color:#dbdbdb}input[type=radio].acrd+label+div{display:none;color:#333;background-color:#fff;padding:10px;margin-top:-1px;margin-bottom:5px;border:1px solid #ccc;border-radius:0 0 4px 4px}input[type=radio]:checked.acrd+label{border-radius:4px 4px 0 0;margin-bottom:0}input[type=radio]:checked.acrd+label+div{display:block}.prg{position:relative;overflow:hidden;height:20px;background-color:#d7d7d7;border-radius:4px}.prg>span{float:left;width:0;height:100%;color:#fff;background-color:#337ab7;text-align:center;font-size:.8em}.prg>span.green{color:#fff;background-color:#5cb85c}.prg>span.red{color:#fff;background-color:#5bc0de}.spinner-dots{display:inline-block;overflow:hidden;height:1.5em;vertical-align:bottom}.spinner-dots:after{display:inline-table;white-space:pre;content:"\A.\A..\A...";animation:spin-dots 1.5s steps(4) infinite}@keyframes spin-dots{to{transform:translateY(-6em)}}.spinner-round{display:inline-block;border:.4em solid rgba(34,34,34,.2);border-left:.4em solid #222;transform:translateZ(0);animation:spin-round 1.5s infinite linear}.spinner-round,.spinner-round:after{border-radius:50%;width:1.5em;height:1.5em}@keyframes spin-round{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.carousel{position:relative;width:80%;height:500px;overflow:hidden;text-align:center;margin:auto;border:1px solid #ccc;border-radius:4px}.carousel input[type=radio]{display:none}.carousel input[type=radio]+div{display:none;position:absolute;width:100%;height:100%;left:0;top:0;padding:10px;background-color:#e7e7e7}.carousel input[type=radio]+div>img{max-width:100%;max-height:100%;margin:auto}.carousel input[type=radio]+div>div{position:absolute;width:100%;height:160px;overflow:auto;left:0;top:340px;background-color:#333;color:#fff;opacity:.1}.carousel input[type=radio]+div>div:active,.carousel input[type=radio]+div>div:focus,.carousel input[type=radio]+div>div:hover{opacity:.8}.carousel input[type=radio]+div+label{position:relative;z-index:998;cursor:pointer;top:450px;color:#fafafa;font-size:1.8em}.carousel input[type=radio]+div+label:before{content:'\25cb'}.carousel input[type=radio]:checked+div{display:block}.carousel input[type=radio]:checked+div+label:before{content:'\25cf'}.brdcrmb{list-style:none}.brdcrmb>li{display:inline-block}.brdcrmb>li+li:before{content:'\27e9\00a0'}.well{border:1px solid #ccc;border-radius:4px;background-color:#e7e7e7;color:#333;padding:20px}.alert-blue+div{border:1px solid #285f8f;border-radius:4px;background-color:#4f93ce;color:#1d4567;padding:20px}input[type=checkbox].alert-blue{display:none}input[type=checkbox].alert-blue+div{display:none;position:relative}input[type=checkbox].alert-blue+div a{font-weight:700;text-decoration:none;color:#122a3f}input[type=checkbox].alert-blue+div a:active,input[type=checkbox].alert-blue+div a:focus,input[type=checkbox].alert-blue+div a:hover{text-decoration:underline}input[type=checkbox].alert-blue+div .close{position:absolute;top:20px;right:20px;color:#1d4567}input[type=checkbox].alert-blue+div .close:active,input[type=checkbox].alert-blue+div .close:focus,input[type=checkbox].alert-blue+div .close:hover{color:#122a3f}input[type=checkbox]:checked.alert-blue+div{display:block}.alert-green+div{border:1px solid #449d44;border-radius:4px;background-color:#80c780;color:#357935;padding:20px}input[type=checkbox].alert-green{display:none}input[type=checkbox].alert-green+div{display:none;position:relative}input[type=checkbox].alert-green+div a{font-weight:700;text-decoration:none;color:#255625}input[type=checkbox].alert-green+div a:active,input[type=checkbox].alert-green+div a:focus,input[type=checkbox].alert-green+div a:hover{text-decoration:underline}input[type=checkbox].alert-green+div .close{position:absolute;top:20px;right:20px;color:#357935}input[type=checkbox].alert-green+div .close:active,input[type=checkbox].alert-green+div .close:focus,input[type=checkbox].alert-green+div .close:hover{color:#255625}input[type=checkbox]:checked.alert-green+div{display:block}.alert-red+div{border:1px solid #31b0d5;border-radius:4px;background-color:#85d0e7;color:#2390b0;padding:20px}input[type=checkbox].alert-red{display:none}input[type=checkbox].alert-red+div{display:none;position:relative}input[type=checkbox].alert-red+div a{font-weight:700;text-decoration:none;color:#1b6d85}input[type=checkbox].alert-red+div a:active,input[type=checkbox].alert-red+div a:focus,input[type=checkbox].alert-red+div a:hover{text-decoration:underline}input[type=checkbox].alert-red+div .close{position:absolute;top:20px;right:20px;color:#2390b0}input[type=checkbox].alert-red+div .close:active,input[type=checkbox].alert-red+div .close:focus,input[type=checkbox].alert-red+div .close:hover{color:#1b6d85}input[type=checkbox]:checked.alert-red+div{display:block}.panel{border:1px solid #ccc;border-radius:4px;background-color:#fff;color:#333;padding:0}.panel>*{padding:10px}.panel .head{border:0;border-bottom:1px solid #ccc;color:#333;background-color:#e7e7e7;padding:10px;margin:0}input[type=checkbox].popover-top{display:none}input[type=checkbox].popover-top+label{position:relative}input[type=checkbox].popover-top+label>.popover-top{position:absolute;display:none;background-color:#333;color:#fff;border-radius:5px;padding:7px 10px;z-index:998;width:auto;bottom:49px}input[type=checkbox].popover-top+label>.popover-top:before{position:absolute;display:block;border-top:7px solid #333;border-right:7px solid transparent;border-left:7px solid transparent;bottom:-7px;content:'';left:50%;margin-left:-7px}input[type=checkbox]:checked.popover-top+label>.popover-top{display:block}input[type=checkbox].popover-bottom{display:none}input[type=checkbox].popover-bottom+label{position:relative}input[type=checkbox].popover-bottom+label>.popover-bottom{position:absolute;display:none;background-color:#333;color:#fff;border-radius:4px;padding:7px 10px;z-index:998;width:auto;top:49px}input[type=checkbox].popover-bottom+label>.popover-bottom:before{position:absolute;display:block;border-bottom:7px solid #333;border-right:7px solid transparent;border-left:7px solid transparent;top:-7px;content:'';left:50%;margin-left:-7px}input[type=checkbox]:checked.popover-bottom+label>.popover-bottom{display:block}.btn-grp .btn{border:1px solid #ccc;margin:0}.btn-grp .btn:not(:first-child):not(:last-child){border-radius:0;border-right:0}.btn-grp .btn:first-child{border-radius:4px 0 0 4px;border-right:0}.btn-grp .btn:last-child{border-radius:0 4px 4px 0}.btn-grp .btn.btn-primary{border:1px solid #285f8f;margin:0}.btn-grp .btn.btn-primary:not(:first-child):not(:last-child){border-radius:0;border-right:0}.btn-grp .btn.btn-primary:first-child{border-radius:4px 0 0 4px;border-right:0}.btn-grp .btn.btn-primary:last-child{border-radius:0 4px 4px 0}.btn-grp .btn.btn-success{border:1px solid #449d44;margin:0}.btn-grp .btn.btn-success:not(:first-child):not(:last-child){border-radius:0;border-right:0}.btn-grp .btn.btn-success:first-child{border-radius:4px 0 0 4px;border-right:0}.btn-grp .btn.btn-success:last-child{border-radius:0 4px 4px 0}.btn-grp .btn.btn-info{border:1px solid 1px solid #31b0d5;margin:0}.btn-grp .btn.btn-info:not(:first-child):not(:last-child){border-radius:0;border-right:0}.btn-grp .btn.btn-info:first-child{border-radius:4px 0 0 4px;border-right:0}.btn-grp .btn.btn-info:last-child{border-radius:0 4px 4px 0} \ No newline at end of file diff --git a/flavors/mini-bootstrap.scss b/flavors/mini-bootstrap.scss index 9626dd5..9e853c8 100644 --- a/flavors/mini-bootstrap.scss +++ b/flavors/mini-bootstrap.scss @@ -112,30 +112,45 @@ $fieldset-padding: 0; // Padding for fieldset //==================================================================== // Colors and styles (you can remove things you don't need or define more // colors if you need them). -$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: #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 +// --- NOTES: --- +// Button styles use approximations for some colors (mainly hover colors). +// Button border is built using utility module's generic mixin. +// Buttons differ from Bootstrap's in terms of line height. +// Button size variant font sizes are approximate. +// ------------------- +$btn-default-color: $body-color; // Default text color for buttons +$btn-alt-color: $body-bg-color; // Alternative text color for buttons +$btn-default-bg-color: $body-bg-color; // Default background color for buttons +$btn-p-bg-color: #337ab7; // Color for button style 1 +$btn-s-bg-color: #5cb85c; // Color for button style 2 +$btn-i-bg-color: #5bc0de; // Color for button style 3 +$btn-w-bg-color: #f0ad4e; // Color for button style 4 +$btn-d-bg-color: #d9534f; // Color for button style 5 // Button class names (you can remove things you don't need or define more // classes if you need them). $btn-class-name: btn; // Name for the base button class -$btn-style1-name: 'blue'; // Name for button style 1 class -$btn-style2-name: 'green'; // Name for button style 2 class -$btn-style3-name: 'red'; // Name for button style 3 class -$btn-size1-name: lg; // Name for the button size 1 class -$btn-size2-name: sm; // Name for the button size 2 class +$btn-style1-name: btn-primary; // Name for button style 1 class +$btn-style2-name: btn-success; // Name for button style 2 class +$btn-style3-name: btn-info; // Name for button style 3 class +$btn-style4-name: btn-warning; // Name for button style 4 class +$btn-style5-name: btn-danger; // Name for button style 5 class +$btn-size1-name: btn-lg; // Name for the button size 1 class +$btn-size2-name: btn-sm; // Name for the button size 2 class +$btn-size3-name: btn-xs; // Name for the button size 3 class // Enable buttons (_button.scss). (Use individual mixins below to use.) @import '../scss/mini/button'; // Use button mixins to create buttons with given specs. For more information // refer to the _button.scss file to check the definitions. -@include make-btn($btn-class-name, 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-class-name, $btn-style1-name, $btn-alt-color, $btn-b-bg-color); -@include make-btn-style($btn-class-name, $btn-style2-name, $btn-alt-color, $btn-g-bg-color); -@include make-btn-style($btn-class-name, $btn-style3-name, $btn-alt-color, $btn-r-bg-color); -@include make-btn-size($btn-class-name, $btn-size1-name, 9px 15px, 135%); -@include make-btn-size($btn-class-name, $btn-size2-name, 4px 8px, 80%); +@include make-btn($btn-class-name, 0, 4px, 5px 0, 6px 12px, $btn-default-color, $btn-default-bg-color, darken, 7.5%, pointer, not-allowed, .65); +@include make-btn-style($btn-class-name, $btn-style1-name, $btn-alt-color, $btn-p-bg-color, darken); +@include make-btn-style($btn-class-name, $btn-style2-name, $btn-alt-color, $btn-s-bg-color, darken); +@include make-btn-style($btn-class-name, $btn-style3-name, $btn-alt-color, $btn-i-bg-color, darken); +@include make-btn-style($btn-class-name, $btn-style4-name, $btn-alt-color, $btn-w-bg-color, darken); +@include make-btn-style($btn-class-name, $btn-style5-name, $btn-alt-color, $btn-d-bg-color, darken); +@include make-btn-size($btn-class-name, $btn-size1-name, 10px 16px, 128.6%); +@include make-btn-size($btn-class-name, $btn-size2-name, 5px 10px, 85.7%); +@include make-btn-size($btn-class-name, $btn-size3-name, 1px 5px, 85.7%); +@include make-border-generic($btn-class-name); //==================================================================== // Variable definitions for the Grid module (_grid.scss) //==================================================================== @@ -234,12 +249,12 @@ $hidden-class-name: hidden; // Name for the hidden class $thumbnail-hover-color: $a-color; // Border color of the thumbnail when hovering over it $bordered-radial-radius: 4px; // Border radius of rounded borders $bordered-radial2-radius: 50%; // Border radius of the alternative rounded borders -$colored-text1-color: $btn-b-bg-color; // Text color for the colored text style 1 class -$colored-text2-color: $btn-g-bg-color; // Text color for the colored text style 2 class -$colored-text3-color: $btn-r-bg-color; // Text color for the colored text style 3 class -$colored-bg-text1-bg-color: $btn-b-bg-color; // Background color for the colored text style 1 class -$colored-bg-text2-bg-color: $btn-g-bg-color; // Background color for the colored text style 2 class -$colored-bg-text3-bg-color: $btn-r-bg-color; // Background color for the colored text style 3 class +$colored-text1-color: $btn-p-bg-color; // Text color for the colored text style 1 class +$colored-text2-color: $btn-s-bg-color; // Text color for the colored text style 2 class +$colored-text3-color: $btn-i-bg-color; // Text color for the colored text style 3 class +$colored-bg-text1-bg-color: $btn-p-bg-color; // Background color for the colored text style 1 class +$colored-bg-text2-bg-color: $btn-s-bg-color; // Background color for the colored text style 2 class +$colored-bg-text3-bg-color: $btn-i-bg-color; // Background color for the colored text style 3 class // Enable utilities (_utility.scss). (Use individual mixins below to use.) // @import '../scss/mini/utility'; // Use utility mixins to create utility classes with given specs. For more information @@ -271,9 +286,9 @@ $colored-bg-text3-bg-color: $btn-r-bg-color; // Background color for the // 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 +$lbl-b-bg-color: $btn-p-bg-color; // Color for labels/badges style 1 +$lbl-g-bg-color: $btn-s-bg-color; // Color for labels/badges style 2 +$lbl-r-bg-color: $btn-i-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 @@ -375,9 +390,9 @@ $progress-bg-color: #d7d7d7; // Background color for the progress ba $progress-bar-color: $btn-alt-color; // Color for the text of the progress bar $progress-bar-style1-color: $btn-alt-color; // Color for the text of the style 1 progress bar $progress-bar-style2-color: $btn-alt-color; // Color for the text of the style 2 progress bar -$progress-bar-bg-color: $btn-b-bg-color; // Background color for the progress bar -$progress-bar-style1-bg-color: $btn-g-bg-color; // Background color for the style 1 progress bar -$progress-bar-style2-bg-color: $btn-r-bg-color; // Background color for the style 2 progress bar +$progress-bar-bg-color: $btn-p-bg-color; // Background color for the progress bar +$progress-bar-style1-bg-color: $btn-s-bg-color; // Background color for the style 1 progress bar +$progress-bar-style2-bg-color: $btn-i-bg-color; // Background color for the style 2 progress bar // Enable progress (_progress.scss). (Use individual mixins below to use.) @import '../scss/mini-extra/progress'; // Use progress mixins to create progress bars with given specs. For more @@ -447,9 +462,9 @@ $popover-bg-color: $body-color; // Background color for the popover // information refer to the _utility.scss file to check the definitions. @include make-breadcrumbs($breadcrumbs-class-name); @include make-generic-container($well-class-name, $well-color, $well-bg-color, 1px solid #ccc, 4px, 20px); -@include make-alert($alert-style1-class, darken($btn-b-bg-color,20%), lighten($btn-b-bg-color, 10%) , 1px solid darken($btn-b-bg-color, 10%), 4px, 20px, close); -@include make-alert($alert-style2-class, darken($btn-g-bg-color,20%), lighten($btn-g-bg-color, 10%) , 1px solid darken($btn-g-bg-color, 10%), 4px, 20px, close); -@include make-alert($alert-style3-class, darken($btn-r-bg-color,20%), lighten($btn-r-bg-color, 10%) , 1px solid darken($btn-r-bg-color, 10%), 4px, 20px, close); +@include make-alert($alert-style1-class, darken($btn-p-bg-color,20%), lighten($btn-p-bg-color, 10%) , 1px solid darken($btn-p-bg-color, 10%), 4px, 20px, close); +@include make-alert($alert-style2-class, darken($btn-s-bg-color,20%), lighten($btn-s-bg-color, 10%) , 1px solid darken($btn-s-bg-color, 10%), 4px, 20px, close); +@include make-alert($alert-style3-class, darken($btn-i-bg-color,20%), lighten($btn-i-bg-color, 10%) , 1px solid darken($btn-i-bg-color, 10%), 4px, 20px, close); @include make-panel(panel, $panel-color, $panel-bg-color, 1px solid #ccc, 4px, 10px, $panel-header-name, $panel-header-color, $panel-header-bg-color, 10px); @include make-popover($popover-above-name, top, 5px, 45px, $popover-color, $popover-bg-color, 7px 10px); @include make-popover($popover-below-name, bottom, 4px, 45px, $popover-color, $popover-bg-color, 7px 10px); @@ -458,8 +473,8 @@ $popover-bg-color: $body-color; // Background color for the popover //@include make-button-states($button-states-class-name); // This mixin is unstable and buggy, we suggest you disable it. // The folowing mixin is considered stable, you can disable it if you need to. @include make-btn-group($button-group-class-name, $btn-class-name, 1px solid #ccc, 4px); -@include make-btn-group(btn-grp, $btn-class-name+'.'+$btn-style1-name, 1px solid darken($btn-b-bg-color, 10%), 4px); -@include make-btn-group(btn-grp, $btn-class-name+'.'+$btn-style2-name, 1px solid darken($btn-g-bg-color, 10%), 4px); -@include make-btn-group(btn-grp, $btn-class-name+'.'+$btn-style3-name, 1px solid 1px solid darken($btn-r-bg-color, 10%), 4px); +@include make-btn-group(btn-grp, $btn-class-name+'.'+$btn-style1-name, 1px solid darken($btn-p-bg-color, 10%), 4px); +@include make-btn-group(btn-grp, $btn-class-name+'.'+$btn-style2-name, 1px solid darken($btn-s-bg-color, 10%), 4px); +@include make-btn-group(btn-grp, $btn-class-name+'.'+$btn-style3-name, 1px solid 1px solid darken($btn-i-bg-color, 10%), 4px); //==================================================================== //==================================================================== \ No newline at end of file