diff --git a/docs-theme/css/base.css b/docs-theme/css/base.css index 6fc5eed..53d868c 100644 --- a/docs-theme/css/base.css +++ b/docs-theme/css/base.css @@ -1114,7 +1114,7 @@ html { body { font-family: "HelsinkiGrotesk", Arial, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-size: 16px; - line-height: 1.428571429; + line-height: 1.5; color: #000000; background-color: #fff; } @@ -1127,7 +1127,7 @@ textarea { line-height: inherit; } a { - color: #0072c6; + color: #000000; text-decoration: none; } a:hover, a:focus { color: #0072c6; @@ -1151,10 +1151,10 @@ img { border-radius: 0; } .img-thumbnail { - padding: 4px; - line-height: 1.428571429; + padding: 5px; + line-height: 1.5; background-color: #fff; - border: 1px solid #ddd; + border: 1px solid #000000; border-radius: 0; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; @@ -1167,8 +1167,8 @@ img { border-radius: 50%; } hr { - margin-top: 22px; - margin-bottom: 22px; + margin-top: 24px; + margin-bottom: 24px; border: 0; border-top: 1px solid #ebedf1; } @@ -1220,8 +1220,8 @@ h1, h2, h3, h4, h5, h6, h1, .h1, h2, .h2, h3, .h3 { - margin-top: 22px; - margin-bottom: 11px; } + margin-top: 24px; + margin-bottom: 12px; } h1 small, h1 .small, .h1 small, .h1 .small, @@ -1236,8 +1236,8 @@ h3, .h3 { h4, .h4, h5, .h5, h6, .h6 { - margin-top: 11px; - margin-bottom: 11px; } + margin-top: 12px; + margin-bottom: 12px; } h4 small, h4 .small, .h4 small, .h4 .small, @@ -1250,28 +1250,28 @@ h6, .h6 { font-size: 75%; } h1, .h1 { - font-size: 41px; } + font-size: 42px; } h2, .h2 { - font-size: 34px; } + font-size: 36px; } h3, .h3 { font-size: 28px; } h4, .h4 { - font-size: 20px; } + font-size: 24px; } h5, .h5 { - font-size: 16px; } + font-size: 20px; } h6, .h6 { - font-size: 14px; } + font-size: 16px; } p { - margin: 0 0 11px; } + margin: 0 0 12px; } .lead { - margin-bottom: 22px; + margin-bottom: 24px; font-size: 18px; font-weight: 300; line-height: 1.4; } @@ -1285,7 +1285,7 @@ small, mark, .mark { - background-color: #ffc61e; + background-color: #ffe977; padding: .2em; } .text-left { @@ -1344,11 +1344,11 @@ a.text-warning:focus { color: black; } .text-danger { - color: #ffffff; } + color: #000000; } a.text-danger:hover, a.text-danger:focus { - color: #e6e5e5; } + color: black; } .bg-primary { color: #fff; } @@ -1361,11 +1361,11 @@ a.bg-primary:focus { background-color: #005593; } .bg-success { - background-color: #009246; } + background-color: #00d7a7; } a.bg-success:hover, a.bg-success:focus { - background-color: #005f2e; } + background-color: #00a47f; } .bg-info { background-color: #9fc9eb; } @@ -1375,28 +1375,28 @@ a.bg-info:focus { background-color: #75b1e2; } .bg-warning { - background-color: #ffc61e; } + background-color: #ffe977; } a.bg-warning:hover, a.bg-warning:focus { - background-color: #eaaf00; } + background-color: #ffe144; } .bg-danger { - background-color: #fd4f00; } + background-color: #f5a3c7; } a.bg-danger:hover, a.bg-danger:focus { - background-color: #ca3f00; } + background-color: #f075ab; } .page-header { - padding-bottom: 10px; - margin: 44px 0 22px; + padding-bottom: 11px; + margin: 48px 0 24px; border-bottom: 1px solid #ebedf1; } ul, ol { margin-top: 0; - margin-bottom: 11px; } + margin-bottom: 12px; } ul ul, ul ol, ol ul, @@ -1418,11 +1418,11 @@ ol { dl { margin-top: 0; - margin-bottom: 22px; } + margin-bottom: 24px; } dt, dd { - line-height: 1.428571429; } + line-height: 1.5; } dt { font-weight: bold; } @@ -1458,8 +1458,8 @@ abbr[data-original-title] { font-size: 90%; } blockquote { - padding: 11px 22px; - margin: 0 0 22px; + padding: 12px 24px; + margin: 0 0 24px; font-size: 20px; border-left: 5px solid #ebedf1; } blockquote p:last-child, @@ -1471,7 +1471,7 @@ blockquote { blockquote .small { display: block; font-size: 80%; - line-height: 1.428571429; + line-height: 1.5; color: #abb2bd; } blockquote footer:before, blockquote small:before, @@ -1501,9 +1501,9 @@ blockquote.pull-right { content: '\00A0 \2014'; } address { - margin-bottom: 22px; + margin-bottom: 24px; font-style: normal; - line-height: 1.428571429; } + line-height: 1.5; } code, kbd, @@ -1533,10 +1533,10 @@ kbd { pre { display: block; - padding: 10.5px; - margin: 0 0 11px; + padding: 11.5px; + margin: 0 0 12px; font-size: 15px; - line-height: 1.428571429; + line-height: 1.5; word-break: break-all; word-wrap: break-word; color: #000000; @@ -2090,7 +2090,7 @@ th { .table { width: 100%; max-width: 100%; - margin-bottom: 22px; } + margin-bottom: 24px; } .table > thead > tr > th, .table > thead > tr > td, .table > tbody > tr > th, @@ -2098,12 +2098,12 @@ th { .table > tfoot > tr > th, .table > tfoot > tr > td { padding: 8px; - line-height: 1.428571429; + line-height: 1.5; vertical-align: top; - border-top: 1px solid #ddd; } + border-top: 1px solid #525a65; } .table > thead > tr > th { vertical-align: bottom; - border-bottom: 2px solid #ddd; } + border-bottom: 2px solid #525a65; } .table > caption + thead > tr:first-child > th, .table > caption + thead > tr:first-child > td, .table > colgroup + thead > tr:first-child > th, @@ -2112,7 +2112,7 @@ th { .table > thead:first-child > tr:first-child > td { border-top: 0; } .table > tbody + tbody { - border-top: 2px solid #ddd; } + border-top: 2px solid #525a65; } .table .table { background-color: #fff; } @@ -2125,14 +2125,14 @@ th { padding: 5px; } .table-bordered { - border: 1px solid #ddd; } + border: 1px solid #525a65; } .table-bordered > thead > tr > th, .table-bordered > thead > tr > td, .table-bordered > tbody > tr > th, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > th, .table-bordered > tfoot > tr > td { - border: 1px solid #ddd; } + border: 1px solid #525a65; } .table-bordered > thead > tr > th, .table-bordered > thead > tr > td { border-bottom-width: 2px; } @@ -2141,7 +2141,7 @@ th { background-color: #ebedf1; } .table-hover > tbody > tr:hover { - background-color: #abb2bd; } + background-color: #dce0e7; } table col[class*="col-"] { position: static; @@ -2166,14 +2166,14 @@ table th[class*="col-"] { .table > tfoot > tr > th.active, .table > tfoot > tr.active > td, .table > tfoot > tr.active > th { - background-color: #abb2bd; } + background-color: #dce0e7; } .table-hover > tbody > tr > td.active:hover, .table-hover > tbody > tr > th.active:hover, .table-hover > tbody > tr.active:hover > td, .table-hover > tbody > tr:hover > .active, .table-hover > tbody > tr.active:hover > th { - background-color: #9da5b2; } + background-color: #cdd2dc; } .table > thead > tr > td.success, .table > thead > tr > th.success, @@ -2187,14 +2187,14 @@ table th[class*="col-"] { .table > tfoot > tr > th.success, .table > tfoot > tr.success > td, .table > tfoot > tr.success > th { - background-color: #009246; } + background-color: #00d7a7; } .table-hover > tbody > tr > td.success:hover, .table-hover > tbody > tr > th.success:hover, .table-hover > tbody > tr.success:hover > td, .table-hover > tbody > tr:hover > .success, .table-hover > tbody > tr.success:hover > th { - background-color: #00793a; } + background-color: #00be93; } .table > thead > tr > td.info, .table > thead > tr > th.info, @@ -2229,14 +2229,14 @@ table th[class*="col-"] { .table > tfoot > tr > th.warning, .table > tfoot > tr.warning > td, .table > tfoot > tr.warning > th { - background-color: #ffc61e; } + background-color: #ffe977; } .table-hover > tbody > tr > td.warning:hover, .table-hover > tbody > tr > th.warning:hover, .table-hover > tbody > tr.warning:hover > td, .table-hover > tbody > tr:hover > .warning, .table-hover > tbody > tr.warning:hover > th { - background-color: #ffc005; } + background-color: #ffe55e; } .table > thead > tr > td.danger, .table > thead > tr > th.danger, @@ -2250,14 +2250,14 @@ table th[class*="col-"] { .table > tfoot > tr > th.danger, .table > tfoot > tr.danger > td, .table > tfoot > tr.danger > th { - background-color: #fd4f00; } + background-color: #f5a3c7; } .table-hover > tbody > tr > td.danger:hover, .table-hover > tbody > tr > th.danger:hover, .table-hover > tbody > tr.danger:hover > td, .table-hover > tbody > tr:hover > .danger, .table-hover > tbody > tr.danger:hover > th { - background-color: #e44700; } + background-color: #f38cb9; } .table-responsive { overflow-x: auto; @@ -2265,10 +2265,10 @@ table th[class*="col-"] { @media screen and (max-width: 767px) { .table-responsive { width: 100%; - margin-bottom: 16.5px; + margin-bottom: 18px; overflow-y: hidden; -ms-overflow-style: -ms-autohiding-scrollbar; - border: 1px solid #ddd; } + border: 1px solid #525a65; } .table-responsive > .table { margin-bottom: 0; } .table-responsive > .table > thead > tr > th, @@ -2310,7 +2310,7 @@ legend { display: block; width: 100%; padding: 0; - margin-bottom: 22px; + margin-bottom: 24px; font-size: 24px; line-height: inherit; color: #000000; @@ -2355,20 +2355,20 @@ output { display: block; padding-top: 7px; font-size: 16px; - line-height: 1.428571429; + line-height: 1.5; color: #525a65; } .form-control { display: block; width: 100%; - height: 36px; + height: 38px; padding: 6px 12px; font-size: 16px; - line-height: 1.428571429; + line-height: 1.5; color: #525a65; - background-color: #fff; + background-color: transparent; background-image: none; - border: 1px solid #abb2bd; + border: 1px solid #000000; border-radius: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); @@ -2376,17 +2376,17 @@ output { -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; } .form-control:focus { - border-color: #00d7a7; + border-color: #000000; outline: 0; - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 215, 167, 0.6); - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 215, 167, 0.6); } + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 0, 0, 0.6); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 0, 0, 0.6); } .form-control::-moz-placeholder { - color: #999; + color: #abb2bd; opacity: 1; } .form-control:-ms-input-placeholder { - color: #999; } + color: #abb2bd; } .form-control::-webkit-input-placeholder { - color: #999; } + color: #abb2bd; } .form-control::-ms-expand { border: 0; background-color: transparent; } @@ -2409,7 +2409,7 @@ input[type="search"] { input[type="time"].form-control, input[type="datetime-local"].form-control, input[type="month"].form-control { - line-height: 36px; } + line-height: 38px; } input[type="date"].input-sm, .input-group-sm > input[type="date"].form-control, .input-group-sm > input[type="date"].input-group-addon, .input-group-sm > .input-group-btn > input[type="date"].btn, @@ -2458,7 +2458,7 @@ input[type="search"] { line-height: 49px; } } .form-group { - margin-bottom: 15px; } + margin-bottom: 24px; } .radio, .checkbox { @@ -2468,7 +2468,7 @@ input[type="search"] { margin-bottom: 10px; } .radio label, .checkbox label { - min-height: 22px; + min-height: 24px; padding-left: 20px; margin-bottom: 0; font-weight: normal; @@ -2527,7 +2527,7 @@ fieldset[disabled] padding-top: 7px; padding-bottom: 7px; margin-bottom: 0; - min-height: 38px; } + min-height: 40px; } .form-control-static.input-lg, .input-group-lg > .form-control-static.form-control, .input-group-lg > .form-control-static.input-group-addon, .input-group-lg > .input-group-btn > .form-control-static.btn, .form-control-static.input-sm, .input-group-sm > .form-control-static.form-control, @@ -2543,7 +2543,7 @@ fieldset[disabled] padding: 5px 10px; font-size: 14px; line-height: 1.5; - border-radius: 4px; } + border-radius: 0; } select.input-sm, .input-group-sm > select.form-control, .input-group-sm > select.input-group-addon, @@ -2565,7 +2565,7 @@ select[multiple].input-sm, padding: 5px 10px; font-size: 14px; line-height: 1.5; - border-radius: 4px; } + border-radius: 0; } .form-group-sm select.form-control { height: 33px; @@ -2577,7 +2577,7 @@ select[multiple].input-sm, .form-group-sm .form-control-static { height: 33px; - min-height: 36px; + min-height: 38px; padding: 6px 10px; font-size: 14px; line-height: 1.5; } @@ -2623,7 +2623,7 @@ select[multiple].input-lg, .form-group-lg .form-control-static { height: 49px; - min-height: 42px; + min-height: 44px; padding: 11px 16px; font-size: 20px; line-height: 1.3333333; } @@ -2631,7 +2631,7 @@ select[multiple].input-lg, .has-feedback { position: relative; } .has-feedback .form-control { - padding-right: 45px; } + padding-right: 47.5px; } .form-control-feedback { position: absolute; @@ -2639,9 +2639,9 @@ select[multiple].input-lg, right: 0; z-index: 2; display: block; - width: 36px; - height: 36px; - line-height: 36px; + width: 38px; + height: 38px; + line-height: 38px; text-align: center; pointer-events: none; } @@ -2687,7 +2687,7 @@ select[multiple].input-lg, .has-success .input-group-addon { color: #000000; border-color: #000000; - background-color: #009246; } + background-color: #00d7a7; } .has-success .form-control-feedback { color: #000000; } @@ -2716,7 +2716,7 @@ select[multiple].input-lg, .has-warning .input-group-addon { color: #000000; border-color: #000000; - background-color: #ffc61e; } + background-color: #ffe977; } .has-warning .form-control-feedback { color: #000000; } @@ -2731,27 +2731,27 @@ select[multiple].input-lg, .has-error.checkbox label, .has-error.radio-inline label, .has-error.checkbox-inline label { - color: #ffffff; } + color: #000000; } .has-error .form-control { - border-color: #ffffff; + border-color: #000000; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } .has-error .form-control:focus { - border-color: #e6e5e5; - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px white; - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px white; } + border-color: black; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #333333; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #333333; } .has-error .input-group-addon { - color: #ffffff; - border-color: #ffffff; - background-color: #fd4f00; } + color: #000000; + border-color: #000000; + background-color: #f5a3c7; } .has-error .form-control-feedback { - color: #ffffff; } + color: #000000; } .has-feedback label ~ .form-control-feedback { - top: 27px; } + top: 29px; } .has-feedback label.sr-only ~ .form-control-feedback { top: 0; } @@ -2811,7 +2811,7 @@ select[multiple].input-lg, .form-horizontal .radio, .form-horizontal .checkbox { - min-height: 29px; } + min-height: 31px; } .form-horizontal .form-group { margin-left: -15px; @@ -2854,7 +2854,7 @@ select[multiple].input-lg, white-space: nowrap; padding: 6px 12px; font-size: 16px; - line-height: 1.428571429; + line-height: 1.5; border-radius: 0; -webkit-user-select: none; -moz-user-select: none; @@ -2864,7 +2864,7 @@ select[multiple].input-lg, outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } .btn:hover, .btn:focus, .btn.focus { - color: #0072c6; + color: #000000; text-decoration: none; } .btn:active, .btn.active { outline: 0; @@ -2884,29 +2884,29 @@ fieldset[disabled] a.btn { pointer-events: none; } .btn-default { - color: #0072c6; + color: #000000; background-color: transparent; - border-color: #0072c6; } + border-color: #000000; } .btn-default:focus, .btn-default.focus { - color: #0072c6; + color: #000000; background-color: transparent; - border-color: #002947; } + border-color: black; } .btn-default:hover { - color: #0072c6; + color: #000000; background-color: transparent; - border-color: #004f89; } + border-color: black; } .btn-default:active, .btn-default.active, .open > .btn-default.dropdown-toggle { - color: #0072c6; + color: #000000; background-color: transparent; - border-color: #004f89; } + border-color: black; } .btn-default:active:hover, .btn-default:active:focus, .btn-default:active.focus, .btn-default.active:hover, .btn-default.active:focus, .btn-default.active.focus, .open > .btn-default.dropdown-toggle:hover, .open > .btn-default.dropdown-toggle:focus, .open > .btn-default.dropdown-toggle.focus { - color: #0072c6; + color: #000000; background-color: transparent; - border-color: #002947; } + border-color: black; } .btn-default:active, .btn-default.active, .open > .btn-default.dropdown-toggle { background-image: none; } @@ -2915,35 +2915,35 @@ fieldset[disabled] a.btn { fieldset[disabled] .btn-default:focus, fieldset[disabled] .btn-default.focus { background-color: transparent; - border-color: #0072c6; } + border-color: #000000; } .btn-default .badge { color: transparent; - background-color: #0072c6; } + background-color: #000000; } .btn-primary { color: #fff; - background-color: #0072c6; - border-color: #0072c6; } + background-color: #000000; + border-color: #000000; } .btn-primary:focus, .btn-primary.focus { color: #fff; - background-color: #005593; - border-color: #002947; } + background-color: black; + border-color: black; } .btn-primary:hover { color: #fff; - background-color: #005593; - border-color: #004f89; } + background-color: black; + border-color: black; } .btn-primary:active, .btn-primary.active, .open > .btn-primary.dropdown-toggle { color: #fff; - background-color: #005593; - border-color: #004f89; } + background-color: black; + border-color: black; } .btn-primary:active:hover, .btn-primary:active:focus, .btn-primary:active.focus, .btn-primary.active:hover, .btn-primary.active:focus, .btn-primary.active.focus, .open > .btn-primary.dropdown-toggle:hover, .open > .btn-primary.dropdown-toggle:focus, .open > .btn-primary.dropdown-toggle.focus { color: #fff; - background-color: #00406f; - border-color: #002947; } + background-color: black; + border-color: black; } .btn-primary:active, .btn-primary.active, .open > .btn-primary.dropdown-toggle { background-image: none; } @@ -2951,10 +2951,10 @@ fieldset[disabled] a.btn { fieldset[disabled] .btn-primary:hover, fieldset[disabled] .btn-primary:focus, fieldset[disabled] .btn-primary.focus { - background-color: #0072c6; - border-color: #0072c6; } + background-color: #000000; + border-color: #000000; } .btn-primary .badge { - color: #0072c6; + color: #000000; background-color: #fff; } .btn-success { @@ -2995,29 +2995,29 @@ fieldset[disabled] a.btn { background-color: #009246; } .btn-info { - color: #9fc9eb; + color: #0072c6; background-color: transparent; - border-color: #9fc9eb; } + border-color: #0072c6; } .btn-info:focus, .btn-info.focus { - color: #9fc9eb; + color: #0072c6; background-color: transparent; - border-color: #358ed5; } + border-color: #002947; } .btn-info:hover { - color: #9fc9eb; + color: #0072c6; background-color: transparent; - border-color: #6cade0; } + border-color: #004f89; } .btn-info:active, .btn-info.active, .open > .btn-info.dropdown-toggle { - color: #9fc9eb; + color: #0072c6; background-color: transparent; - border-color: #6cade0; } + border-color: #004f89; } .btn-info:active:hover, .btn-info:active:focus, .btn-info:active.focus, .btn-info.active:hover, .btn-info.active:focus, .btn-info.active.focus, .open > .btn-info.dropdown-toggle:hover, .open > .btn-info.dropdown-toggle:focus, .open > .btn-info.dropdown-toggle.focus { - color: #9fc9eb; + color: #0072c6; background-color: transparent; - border-color: #358ed5; } + border-color: #002947; } .btn-info:active, .btn-info.active, .open > .btn-info.dropdown-toggle { background-image: none; } @@ -3026,10 +3026,10 @@ fieldset[disabled] a.btn { fieldset[disabled] .btn-info:focus, fieldset[disabled] .btn-info.focus { background-color: transparent; - border-color: #9fc9eb; } + border-color: #0072c6; } .btn-info .badge { color: transparent; - background-color: #9fc9eb; } + background-color: #0072c6; } .btn-warning { color: #ffc61e; @@ -3106,7 +3106,7 @@ fieldset[disabled] a.btn { background-color: #fd4f00; } .btn-link { - color: #0072c6; + color: #000000; font-weight: normal; border-radius: 0; } .btn-link, .btn-link:active, .btn-link.active, .btn-link[disabled], @@ -3229,7 +3229,7 @@ tbody.collapse.in { left: auto; } .dropdown-menu .divider { height: 1px; - margin: 10px 0; + margin: 11px 0; overflow: hidden; background-color: #e5e5e5; } .dropdown-menu > li > a { @@ -3237,20 +3237,20 @@ tbody.collapse.in { padding: 3px 20px; clear: both; font-weight: normal; - line-height: 1.428571429; + line-height: 1.5; color: #000000; white-space: nowrap; } .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { text-decoration: none; color: black; - background-color: #ffc61e; } + background-color: #00d7a7; } .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus { color: #000000; text-decoration: none; outline: 0; - background-color: #00d7a7; } + background-color: #ffc61e; } .dropdown-menu > .disabled > a, .dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus { color: #abb2bd; } @@ -3280,7 +3280,7 @@ tbody.collapse.in { display: block; padding: 3px 20px; font-size: 14px; - line-height: 1.428571429; + line-height: 1.5; color: #abb2bd; white-space: nowrap; } @@ -3528,14 +3528,14 @@ tbody.collapse.in { color: #525a65; text-align: center; background-color: #ebedf1; - border: 1px solid #abb2bd; + border: 1px solid #000000; border-radius: 0; } .input-group-addon.input-sm, .input-group-sm > .input-group-addon, .input-group-sm > .input-group-btn > .input-group-addon.btn { padding: 5px 10px; font-size: 14px; - border-radius: 4px; } + border-radius: 0; } .input-group-addon.input-lg, .input-group-lg > .input-group-addon, .input-group-lg > .input-group-btn > .input-group-addon.btn { @@ -3618,31 +3618,31 @@ tbody.collapse.in { cursor: not-allowed; } .nav .open > a, .nav .open > a:hover, .nav .open > a:focus { background-color: transparent; - border-color: #0072c6; } + border-color: #000000; } .nav .nav-divider { height: 1px; - margin: 10px 0; + margin: 11px 0; overflow: hidden; background-color: #e5e5e5; } .nav > li > a > img { max-width: none; } .nav-tabs { - border-bottom: 1px solid #ddd; } + border-bottom: 1px solid #525a65; } .nav-tabs > li { float: left; margin-bottom: -1px; } .nav-tabs > li > a { margin-right: 2px; - line-height: 1.428571429; + line-height: 1.5; border: 1px solid transparent; border-radius: 0 0 0 0; } .nav-tabs > li > a:hover { - border-color: #ebedf1 #ebedf1 #ddd; } + border-color: #abb2bd #abb2bd #525a65; } .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { - color: #525a65; + color: #000000; background-color: #fff; - border: 1px solid #ddd; + border: 1px solid #000000; border-bottom-color: transparent; cursor: default; } @@ -3654,7 +3654,7 @@ tbody.collapse.in { margin-left: 2px; } .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus { color: #000000; - background-color: #00d7a7; } + background-color: #ffc61e; } .nav-stacked > li { float: none; } @@ -3687,10 +3687,10 @@ tbody.collapse.in { .nav-tabs-justified > .active > a, .nav-tabs.nav-justified > .active > a, .nav-tabs-justified > .active > a:hover, .nav-tabs.nav-justified > .active > a:hover, .nav-tabs-justified > .active > a:focus, .nav-tabs.nav-justified > .active > a:focus { - border: 1px solid #ddd; } + border: 1px solid #000000; } @media (min-width: 768px) { .nav-tabs-justified > li > a, .nav-tabs.nav-justified > li > a { - border-bottom: 1px solid #ddd; + border-bottom: 1px solid #000000; border-radius: 0 0 0 0; } .nav-tabs-justified > .active > a, .nav-tabs.nav-justified > .active > a, .nav-tabs-justified > .active > a:hover, .nav-tabs.nav-justified > .active > a:hover, @@ -3711,7 +3711,7 @@ tbody.collapse.in { .navbar { position: relative; min-height: 60px; - margin-bottom: 22px; + margin-bottom: 24px; border: 1px solid transparent; } .navbar:before, .navbar:after { content: " "; @@ -3816,9 +3816,9 @@ tbody.collapse.in { .navbar-brand { float: left; - padding: 19px 15px; + padding: 18px 15px; font-size: 20px; - line-height: 22px; + line-height: 24px; height: 60px; } .navbar-brand:hover, .navbar-brand:focus { text-decoration: none; } @@ -3854,11 +3854,11 @@ tbody.collapse.in { display: none; } } .navbar-nav { - margin: 9.5px -15px; } + margin: 9px -15px; } .navbar-nav > li > a { padding-top: 10px; padding-bottom: 10px; - line-height: 22px; } + line-height: 24px; } @media (max-width: 991px) { .navbar-nav .open .dropdown-menu { position: static; @@ -3872,7 +3872,7 @@ tbody.collapse.in { .navbar-nav .open .dropdown-menu .dropdown-header { padding: 5px 15px 5px 25px; } .navbar-nav .open .dropdown-menu > li > a { - line-height: 22px; } + line-height: 24px; } .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-nav .open .dropdown-menu > li > a:focus { background-image: none; } } @media (min-width: 992px) { @@ -3882,8 +3882,8 @@ tbody.collapse.in { .navbar-nav > li { float: left; } .navbar-nav > li > a { - padding-top: 19px; - padding-bottom: 19px; } } + padding-top: 18px; + padding-bottom: 18px; } } .navbar-form { margin-left: -15px; @@ -3893,8 +3893,8 @@ tbody.collapse.in { border-bottom: 1px solid transparent; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); - margin-top: 12px; - margin-bottom: 12px; } + margin-top: 11px; + margin-bottom: 11px; } @media (min-width: 768px) { .navbar-form .form-group { display: inline-block; @@ -3962,8 +3962,8 @@ tbody.collapse.in { border-bottom-left-radius: 0; } .navbar-btn { - margin-top: 12px; - margin-bottom: 12px; } + margin-top: 11px; + margin-bottom: 11px; } .navbar-btn.btn-sm, .btn-group-sm > .navbar-btn.btn { margin-top: 13.5px; margin-bottom: 13.5px; } @@ -3972,8 +3972,8 @@ tbody.collapse.in { margin-bottom: 19px; } .navbar-text { - margin-top: 19px; - margin-bottom: 19px; } + margin-top: 18px; + margin-bottom: 18px; } @media (min-width: 992px) { .navbar-text { float: left; @@ -3993,19 +3993,19 @@ tbody.collapse.in { background-color: #ffffff; border-color: transparent; } .navbar-default .navbar-brand { - color: #0072c6; } + color: #000000; } .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { - color: #0000bf; + color: #000000; background-color: transparent; } .navbar-default .navbar-text { - color: #0072c6; } + color: #000000; } .navbar-default .navbar-nav > li > a { - color: #0072c6; } + color: #000000; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { - color: #0000bf; + color: #000000; background-color: transparent; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { - color: #0072c6; + color: #000000; background-color: transparent; } .navbar-default .navbar-nav > .disabled > a, .navbar-default .navbar-nav > .disabled > a:hover, .navbar-default .navbar-nav > .disabled > a:focus { color: #525a65; @@ -4015,52 +4015,52 @@ tbody.collapse.in { .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: transparent; } .navbar-default .navbar-toggle .icon-bar { - background-color: #0072c6; } + background-color: #000000; } .navbar-default .navbar-collapse, .navbar-default .navbar-form { border-color: transparent; } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { background-color: transparent; - color: #0072c6; } + color: #000000; } @media (max-width: 991px) { .navbar-default .navbar-nav .open .dropdown-menu > li > a { - color: #0072c6; } + color: #000000; } .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { - color: #0000bf; + color: #000000; background-color: transparent; } .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus { - color: #0072c6; + color: #000000; background-color: transparent; } .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a, .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus { color: #525a65; background-color: transparent; } } .navbar-default .navbar-link { - color: #0072c6; } + color: #000000; } .navbar-default .navbar-link:hover { - color: #0000bf; } + color: #000000; } .navbar-default .btn-link { - color: #0072c6; } + color: #000000; } .navbar-default .btn-link:hover, .navbar-default .btn-link:focus { - color: #0000bf; } + color: #000000; } .navbar-default .btn-link[disabled]:hover, .navbar-default .btn-link[disabled]:focus, fieldset[disabled] .navbar-default .btn-link:hover, fieldset[disabled] .navbar-default .btn-link:focus { color: #525a65; } .navbar-inverse { - background-color: #0072c6; + background-color: #000000; border-color: transparent; } .navbar-inverse .navbar-brand { color: #ffffff; } .navbar-inverse .navbar-brand:hover, .navbar-inverse .navbar-brand:focus { - color: #00d7a7; + color: #ffffff; background-color: transparent; } .navbar-inverse .navbar-text { color: #ffffff; } .navbar-inverse .navbar-nav > li > a { color: #ffffff; } .navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus { - color: #00d7a7; + color: #ffffff; background-color: transparent; } .navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus { color: #ffffff; @@ -4076,7 +4076,7 @@ tbody.collapse.in { background-color: #ffffff; } .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form { - border-color: #005da2; } + border-color: black; } .navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:hover, .navbar-inverse .navbar-nav > .open > a:focus { background-color: transparent; color: #ffffff; } @@ -4088,7 +4088,7 @@ tbody.collapse.in { .navbar-inverse .navbar-nav .open .dropdown-menu > li > a { color: #ffffff; } .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus { - color: #00d7a7; + color: #ffffff; background-color: transparent; } .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a, .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus { color: #ffffff; @@ -4099,11 +4099,11 @@ tbody.collapse.in { .navbar-inverse .navbar-link { color: #ffffff; } .navbar-inverse .navbar-link:hover { - color: #00d7a7; } + color: #ffffff; } .navbar-inverse .btn-link { color: #ffffff; } .navbar-inverse .btn-link:hover, .navbar-inverse .btn-link:focus { - color: #00d7a7; } + color: #ffffff; } .navbar-inverse .btn-link[disabled]:hover, .navbar-inverse .btn-link[disabled]:focus, fieldset[disabled] .navbar-inverse .btn-link:hover, fieldset[disabled] .navbar-inverse .btn-link:focus { @@ -4111,23 +4111,23 @@ tbody.collapse.in { .breadcrumb { padding: 8px 15px; - margin-bottom: 22px; + margin-bottom: 24px; list-style: none; - background-color: #f5f5f5; + background-color: #ebedf1; border-radius: 0; } .breadcrumb > li { display: inline-block; } .breadcrumb > li + li:before { content: "/ "; padding: 0 5px; - color: #ccc; } + color: #0072c6; } .breadcrumb > .active { - color: #abb2bd; } + color: #525a65; } .pagination { display: inline-block; padding-left: 0; - margin: 22px 0; + margin: 24px 0; border-radius: 0; } .pagination > li { display: inline; } @@ -4136,11 +4136,11 @@ tbody.collapse.in { position: relative; float: left; padding: 6px 12px; - line-height: 1.428571429; + line-height: 1.5; text-decoration: none; - color: #0072c6; - background-color: #fff; - border: 1px solid #abb2bd; + color: #000000; + background-color: transparent; + border: 1px solid #525a65; margin-left: -1px; } .pagination > li:first-child > a, .pagination > li:first-child > span { @@ -4156,16 +4156,16 @@ tbody.collapse.in { .pagination > li > span:focus { z-index: 2; color: #0072c6; - background-color: #ebedf1; - border-color: #abb2bd; } + background-color: inherit; + border-color: #525a65; } .pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > a:focus, .pagination > .active > span, .pagination > .active > span:hover, .pagination > .active > span:focus { z-index: 3; - color: #0072c6; + color: #000000; background-color: #ffc61e; - border-color: #abb2bd; + border-color: #525a65; cursor: default; } .pagination > .disabled > span, .pagination > .disabled > span:hover, @@ -4175,7 +4175,7 @@ tbody.collapse.in { .pagination > .disabled > a:focus { color: #abb2bd; background-color: #fff; - border-color: #abb2bd; + border-color: #525a65; cursor: not-allowed; } .pagination-lg > li > a, @@ -4212,7 +4212,7 @@ tbody.collapse.in { .pager { padding-left: 0; - margin: 22px 0; + margin: 24px 0; list-style: none; text-align: center; } .pager:before, .pager:after { @@ -4226,13 +4226,13 @@ tbody.collapse.in { .pager li > span { display: inline-block; padding: 5px 14px; - background-color: #fff; - border: 1px solid #abb2bd; + background-color: transparent; + border: 1px solid #525a65; border-radius: 15px; } .pager li > a:hover, .pager li > a:focus { text-decoration: none; - background-color: #ebedf1; } + background-color: inherit; } .pager .next > a, .pager .next > span { float: right; } @@ -4244,7 +4244,7 @@ tbody.collapse.in { .pager .disabled > a:focus, .pager .disabled > span { color: #abb2bd; - background-color: #fff; + background-color: transparent; cursor: not-allowed; } .label { @@ -4280,9 +4280,9 @@ a.label:hover, a.label:focus { background-color: #eaaf00; } .label-success { - background-color: #009246; } + background-color: #00d7a7; } .label-success[href]:hover, .label-success[href]:focus { - background-color: #005f2e; } + background-color: #00a47f; } .label-info { background-color: #9fc9eb; } @@ -4290,14 +4290,14 @@ a.label:hover, a.label:focus { background-color: #75b1e2; } .label-warning { - background-color: #ffc61e; } + background-color: #ffe977; } .label-warning[href]:hover, .label-warning[href]:focus { - background-color: #eaaf00; } + background-color: #ffe144; } .label-danger { - background-color: #fd4f00; } + background-color: #f5a3c7; } .label-danger[href]:hover, .label-danger[href]:focus { - background-color: #ca3f00; } + background-color: #f075ab; } .badge { display: inline-block; @@ -4310,7 +4310,7 @@ a.label:hover, a.label:focus { vertical-align: middle; white-space: nowrap; text-align: center; - background-color: #abb2bd; + background-color: #525a65; border-radius: 10px; } .badge:empty { display: none; } @@ -4323,7 +4323,7 @@ a.label:hover, a.label:focus { padding: 1px 5px; } .list-group-item.active > .badge, .nav-pills > .active > a > .badge { - color: #0072c6; + color: #000000; background-color: #fff; } .list-group-item > .badge { float: right; } @@ -4373,11 +4373,11 @@ a.badge:hover, a.badge:focus { .thumbnail { display: block; - padding: 4px; - margin-bottom: 22px; - line-height: 1.428571429; + padding: 5px; + margin-bottom: 24px; + line-height: 1.5; background-color: #fff; - border: 1px solid #ddd; + border: 1px solid #000000; border-radius: 0; -webkit-transition: border 0.2s ease-in-out; -o-transition: border 0.2s ease-in-out; @@ -4396,11 +4396,11 @@ a.badge:hover, a.badge:focus { a.thumbnail:hover, a.thumbnail:focus, a.thumbnail.active { - border-color: #0072c6; } + border-color: #000000; } .alert { padding: 15px; - margin-bottom: 22px; + margin-bottom: 24px; border: 1px solid transparent; border-radius: 0; } .alert h4 { @@ -4425,7 +4425,7 @@ a.thumbnail.active { color: inherit; } .alert-success { - background-color: #009246; + background-color: #00d7a7; border-color: transparent; color: #000000; } .alert-success hr { @@ -4443,7 +4443,7 @@ a.thumbnail.active { color: black; } .alert-warning { - background-color: #ffc61e; + background-color: #ffe977; border-color: transparent; color: #000000; } .alert-warning hr { @@ -4452,13 +4452,13 @@ a.thumbnail.active { color: black; } .alert-danger { - background-color: #fd4f00; + background-color: #f5a3c7; border-color: transparent; - color: #ffffff; } + color: #000000; } .alert-danger hr { border-top-color: transparent; } .alert-danger .alert-link { - color: #e6e5e5; } + color: black; } @-webkit-keyframes progress-bar-stripes { from { @@ -4474,8 +4474,8 @@ a.thumbnail.active { .progress { overflow: hidden; - height: 22px; - margin-bottom: 22px; + height: 24px; + margin-bottom: 24px; background-color: #ebedf1; border-radius: 6px; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); @@ -4486,7 +4486,7 @@ a.thumbnail.active { width: 0%; height: 100%; font-size: 14px; - line-height: 22px; + line-height: 24px; color: #fff; text-align: center; background-color: #0072c6; @@ -4517,7 +4517,7 @@ a.thumbnail.active { background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } .progress-bar-info { - background-color: #9fc9eb; } + background-color: #0072c6; } .progress-striped .progress-bar-info { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); @@ -4593,7 +4593,7 @@ a.thumbnail.active { padding: 10px 15px; margin-bottom: -1px; background-color: #fff; - border: 1px solid #ddd; } + border: 1px solid #abb2bd; } .list-group-item:first-child { border-top-right-radius: 0; border-top-left-radius: 0; } @@ -4631,8 +4631,8 @@ button.list-group-item { .list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus { z-index: 2; color: #000000; - background-color: #00d7a7; - border-color: #ddd; } + background-color: #ffc61e; + border-color: #abb2bd; } .list-group-item.active .list-group-item-heading, .list-group-item.active .list-group-item-heading > small, .list-group-item.active .list-group-item-heading > .small, .list-group-item.active:hover .list-group-item-heading, @@ -4646,7 +4646,7 @@ button.list-group-item { .list-group-item-success { color: #000000; - background-color: #009246; } + background-color: #00d7a7; } a.list-group-item-success, button.list-group-item-success { @@ -4658,7 +4658,7 @@ button.list-group-item-success { button.list-group-item-success:hover, button.list-group-item-success:focus { color: #000000; - background-color: #00793a; } + background-color: #00be93; } a.list-group-item-success.active, a.list-group-item-success.active:hover, a.list-group-item-success.active:focus, button.list-group-item-success.active, button.list-group-item-success.active:hover, @@ -4692,7 +4692,7 @@ button.list-group-item-info { .list-group-item-warning { color: #000000; - background-color: #ffc61e; } + background-color: #ffe977; } a.list-group-item-warning, button.list-group-item-warning { @@ -4704,7 +4704,7 @@ button.list-group-item-warning { button.list-group-item-warning:hover, button.list-group-item-warning:focus { color: #000000; - background-color: #ffc005; } + background-color: #ffe55e; } a.list-group-item-warning.active, a.list-group-item-warning.active:hover, a.list-group-item-warning.active:focus, button.list-group-item-warning.active, button.list-group-item-warning.active:hover, @@ -4714,27 +4714,27 @@ button.list-group-item-warning { border-color: #000000; } .list-group-item-danger { - color: #ffffff; - background-color: #fd4f00; } + color: #000000; + background-color: #f5a3c7; } a.list-group-item-danger, button.list-group-item-danger { - color: #ffffff; } + color: #000000; } a.list-group-item-danger .list-group-item-heading, button.list-group-item-danger .list-group-item-heading { color: inherit; } a.list-group-item-danger:hover, a.list-group-item-danger:focus, button.list-group-item-danger:hover, button.list-group-item-danger:focus { - color: #ffffff; - background-color: #e44700; } + color: #000000; + background-color: #f38cb9; } a.list-group-item-danger.active, a.list-group-item-danger.active:hover, a.list-group-item-danger.active:focus, button.list-group-item-danger.active, button.list-group-item-danger.active:hover, button.list-group-item-danger.active:focus { color: #fff; - background-color: #ffffff; - border-color: #ffffff; } + background-color: #000000; + border-color: #000000; } .list-group-item-heading { margin-top: 0; @@ -4745,7 +4745,7 @@ button.list-group-item-danger { line-height: 1.3; } .panel { - margin-bottom: 22px; + margin-bottom: 24px; background-color: #fff; border: 1px solid transparent; border-radius: 0; @@ -4782,8 +4782,8 @@ button.list-group-item-danger { .panel-footer { padding: 10px 15px; - background-color: #f5f5f5; - border-top: 1px solid #ddd; + background-color: #ebedf1; + border-top: 1px solid transparent; border-bottom-right-radius: -1; border-bottom-left-radius: -1; } @@ -4887,7 +4887,7 @@ button.list-group-item-danger { .panel > .panel-body + .table-responsive, .panel > .table + .panel-body, .panel > .table-responsive + .panel-body { - border-top: 1px solid #ddd; } + border-top: 1px solid #525a65; } .panel > .table > tbody:first-child > tr:first-child th, .panel > .table > tbody:first-child > tr:first-child td { @@ -4946,7 +4946,7 @@ button.list-group-item-danger { margin-bottom: 0; } .panel-group { - margin-bottom: 22px; } + margin-bottom: 24px; } .panel-group .panel { margin-bottom: 0; border-radius: 0; } @@ -4956,25 +4956,25 @@ button.list-group-item-danger { border-bottom: 0; } .panel-group .panel-heading + .panel-collapse > .panel-body, .panel-group .panel-heading + .panel-collapse > .list-group { - border-top: 1px solid #ddd; } + border-top: 1px solid transparent; } .panel-group .panel-footer { border-top: 0; } .panel-group .panel-footer + .panel-collapse .panel-body { - border-bottom: 1px solid #ddd; } + border-bottom: 1px solid transparent; } .panel-default { - border-color: #ddd; } + border-color: transparent; } .panel-default > .panel-heading { color: #000000; - background-color: #f5f5f5; - border-color: #ddd; } + background-color: #ebedf1; + border-color: transparent; } .panel-default > .panel-heading + .panel-collapse > .panel-body { - border-top-color: #ddd; } + border-top-color: transparent; } .panel-default > .panel-heading .badge { - color: #f5f5f5; + color: #ebedf1; background-color: #000000; } .panel-default > .panel-footer + .panel-collapse > .panel-body { - border-bottom-color: #ddd; } + border-bottom-color: transparent; } .panel-primary { border-color: #0072c6; } @@ -4994,12 +4994,12 @@ button.list-group-item-danger { border-color: transparent; } .panel-success > .panel-heading { color: #000000; - background-color: #009246; + background-color: #00d7a7; border-color: transparent; } .panel-success > .panel-heading + .panel-collapse > .panel-body { border-top-color: transparent; } .panel-success > .panel-heading .badge { - color: #009246; + color: #00d7a7; background-color: #000000; } .panel-success > .panel-footer + .panel-collapse > .panel-body { border-bottom-color: transparent; } @@ -5022,12 +5022,12 @@ button.list-group-item-danger { border-color: transparent; } .panel-warning > .panel-heading { color: #000000; - background-color: #ffc61e; + background-color: #ffe977; border-color: transparent; } .panel-warning > .panel-heading + .panel-collapse > .panel-body { border-top-color: transparent; } .panel-warning > .panel-heading .badge { - color: #ffc61e; + color: #ffe977; background-color: #000000; } .panel-warning > .panel-footer + .panel-collapse > .panel-body { border-bottom-color: transparent; } @@ -5035,14 +5035,14 @@ button.list-group-item-danger { .panel-danger { border-color: transparent; } .panel-danger > .panel-heading { - color: #ffffff; - background-color: #fd4f00; + color: #000000; + background-color: #f5a3c7; border-color: transparent; } .panel-danger > .panel-heading + .panel-collapse > .panel-body { border-top-color: transparent; } .panel-danger > .panel-heading .badge { - color: #fd4f00; - background-color: #ffffff; } + color: #f5a3c7; + background-color: #000000; } .panel-danger > .panel-footer + .panel-collapse > .panel-body { border-bottom-color: transparent; } @@ -5193,7 +5193,7 @@ button.close { .modal-title { margin: 0; - line-height: 1.428571429; } + line-height: 1.5; } .modal-body { position: relative; @@ -5246,7 +5246,7 @@ button.close { font-weight: normal; letter-spacing: normal; line-break: auto; - line-height: 1.428571429; + line-height: 1.5; text-align: left; text-align: start; text-decoration: none; @@ -5359,7 +5359,7 @@ button.close { font-weight: normal; letter-spacing: normal; line-break: auto; - line-height: 1.428571429; + line-height: 1.5; text-align: left; text-align: start; text-decoration: none; @@ -5871,21 +5871,52 @@ button.close { .hidden-print { display: none !important; } } +a, a:active, a:hover, a:visited { + text-decoration: underline; } + +a:active, a:hover { + color: #0072c6; } + +.navbar a, +.btn, +.nav li a, +.dropdown a, +.dropdown-menu a, +.breadcrumb a, +.pager a, +.panel-title a, +a.list-group-item { + text-decoration: none; } + +.btn.btn-link { + text-decoration: underline; + color: #0072c6; } + +.breadcrumb a:hover { + color: #000000; + text-decoration: underline; } + +dl dd, dl dt { + margin-bottom: 12px; } + .btn-default:hover { - border-color: #0087ea; - color: #0087ea; } + border-color: #121212; + color: #121212; } + +.btn { + border-width: 2px; } .btn-primary:hover { - border-color: #0087ea; - background-color: #0087ea; } + border-color: #121212; + background-color: #121212; } .btn-success:hover { border-color: #00b657; color: #00b657; } .btn-info:hover { - border-color: #bddaf1; - color: #bddaf1; } + border-color: #0087ea; + color: #0087ea; } .btn-warning:hover { border-color: #ffcf42; @@ -5914,21 +5945,21 @@ button.close { .select:before { width: 30px; position: absolute; - top: 1px; - right: 1px; - bottom: 1px; + top: 2px; + right: 2px; + bottom: 2px; background: #ebedf1; content: ''; pointer-events: none; } .select:hover:after { border-color: #0072c6 transparent transparent transparent; } .select select { + border-width: 2px; box-shadow: none; cursor: pointer; outline: none; padding-right: 35px; padding-left: 15px; - border-bottom-width: 1px; -moz-appearance: none; -webkit-appearance: none; } .select select:-moz-focusring { @@ -5937,6 +5968,9 @@ button.close { .select select::-ms-expand { display: none; } +select.form-control:focus { + border-color: #000000; } + @media all and (min-width: 0\0) and (min-resolution: 0.001dpcm) { .select select { padding-right: 0; } @@ -5944,10 +5978,25 @@ button.close { display: none; } } @media (min-width: 992px) { - .navbar-default .navbar-nav > .active > a { - border-bottom: solid 3px #0072c6; } - .navbar-inverse .navbar-nav > .active > a { - border-bottom: solid 3px #00d7a7; } } + .navbar-nav > li > a { + position: relative; + padding-left: 0; + padding-right: 0; + margin-right: 15px; + margin-left: 15px; + font-weight: 500; + font-size: 15px; } + .navbar-nav > .active > a:after, .navbar-nav > li > a:hover:after { + content: ""; + border-bottom: solid 3px #000000; + position: absolute; + bottom: 12px; + margin-left: auto; + margin-right: auto; + left: 0; + right: 0; } + .navbar-inverse .navbar-nav > .active > a:after, .navbar-inverse .navbar-nav > li > a:hover:after { + border-bottom: solid 3px #ffffff; } } @media (max-width: 992px) { .navbar-collapse .nav { @@ -5956,8 +6005,9 @@ button.close { border-bottom: 1px solid #0081e0; } .navbar-nav > .active > a { font-weight: bold; } - .navbar-nav > .active > a:after { - content: "\000A0 \02022"; } } + .navbar-nav > .active > a:before { + content: "\000A0"; + border-left: 3px solid #000000; } } .navbar-collapse { box-shadow: none; @@ -5967,22 +6017,107 @@ button.close { border: 0; } .navbar-inverse .navbar-collapse { border-top-color: #0081e0; } + .navbar-inverse .navbar-form .form-control { + border-color: #ffffff; + color: #ffffff; } + .navbar-inverse .btn-default { + border-color: #ffffff; + color: #ffffff; } + .navbar-inverse .btn-default:active { + border-color: #ebedf1; + color: #ebedf1; } -.navbar-default { - border-bottom: 1px solid #0072c6; } - .navbar-default .navbar-collapse { - border-top-color: #ebedf1; } +.navbar-default .navbar-collapse { + border-top-color: #ebedf1; } .navbar-brand { - font-weight: bold; + font-weight: 700; font-size: 16px; } .help-block { font-size: 0.9em; color: #525a65; } +.form-group label { + margin-bottom: 0; } + .form-control { - border-bottom-width: 2px; } + border-width: 0 0 2px 0; + box-shadow: none; + height: 40px; + padding: 6px 0; } + +textarea.form-control { + border-width: 2px; + padding: 6px 12px; } + textarea.form-control:focus { + border-color: #0000bf; } + +textarea:focus, +input[type="text"]:focus, +input[type="password"]:focus, +input[type="datetime"]:focus, +input[type="datetime-local"]:focus, +input[type="date"]:focus, +input[type="month"]:focus, +input[type="time"]:focus, +input[type="week"]:focus, +input[type="number"]:focus, +input[type="email"]:focus, +input[type="url"]:focus, +input[type="search"]:focus, +input[type="tel"]:focus, +input[type="color"]:focus, +.form-control:focus, +.uneditable-input:focus { + border-bottom-color: #0000bf; + box-shadow: none; } + +.input-group .form-control { + border-width: 2px; + padding: 6px 12px; } + .input-group .form-control:focus { + border-bottom-color: #000000; } + +.input-group .form-control:first-child, +.input-group-addon:first-child, +.input-group-btn:first-child > .btn, +.input-group-btn:first-child > .btn-group > .btn, +.input-group-btn:first-child > .dropdown-toggle, +.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle), +.input-group-btn:last-child > .btn-group:not(:last-child) > .btn { + border-right-width: 0; } + +.input-group .form-control:last-child, +.input-group-addon:last-child, +.input-group-btn:last-child > .btn, +.input-group-btn:last-child > .btn-group > .btn, +.input-group-btn:last-child > .dropdown-toggle, +.input-group-btn:first-child > .btn:not(:first-child), +.input-group-btn:first-child > .btn-group:not(:first-child) > .btn { + border-left-width: 0; } + +.input-group-addon { + border-width: 2px; + color: #000000; } + +.btn-group .btn + .btn, +.btn-group .btn + .btn-group, +.btn-group .btn-group + .btn, +.btn-group .btn-group + .btn-group { + margin-left: -2px; } + +.btn-group-vertical > .btn + .btn, +.btn-group-vertical > .btn + .btn-group, +.btn-group-vertical > .btn-group + .btn, +.btn-group-vertical > .btn-group + .btn-group { + margin-top: -2px; } + +.form-control[disabled], +.form-control[readonly], +fieldset[disabled] .form-control { + padding: 6px 12px; + border-color: #abb2bd; } .has-warning .help-block, .has-warning .control-label, @@ -5997,10 +6132,13 @@ button.close { color: #ffc61e; } .has-warning .form-control { - border-color: #ffc61e; } + border-color: #ffc61e; + box-shadow: none; } .has-warning .form-control:focus { + padding: 6px 12px; border-color: #ffc61e; - box-shadow: 0 0 0 1px #ffc61e; } + background-color: #fffadd; + box-shadow: none; } .has-error .help-block, .has-error .control-label, @@ -6015,10 +6153,13 @@ button.close { color: #fd4f00; } .has-error .form-control { - border-color: #fd4f00; } + border-color: #fd4f00; + box-shadow: none; } .has-error .form-control:focus { + padding: 6px 12px; border-color: #fd4f00; - box-shadow: 0 0 0 1px #fd4f00; } + background-color: #fde8f1; + box-shadow: none; } .has-success .help-block, .has-success .control-label, @@ -6033,31 +6174,19 @@ button.close { color: #009246; } .has-success .form-control { - border-color: #009246; } + border-color: #009246; + box-shadow: none; } .has-success .form-control:focus { + padding: 6px 12px; border-color: #009246; - box-shadow: 0 0 0 1px #009246; } + background-color: #d7fff6; + box-shadow: none; } -textarea:focus, -input[type="text"]:focus, -input[type="password"]:focus, -input[type="datetime"]:focus, -input[type="datetime-local"]:focus, -input[type="date"]:focus, -input[type="month"]:focus, -input[type="time"]:focus, -input[type="week"]:focus, -input[type="number"]:focus, -input[type="email"]:focus, -input[type="url"]:focus, -input[type="search"]:focus, -input[type="tel"]:focus, -input[type="color"]:focus, -.form-control:focus, -.uneditable-input:focus { - border-color: #abb2bd; - border-bottom-color: #000000; - box-shadow: none; } +.panel { + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); } + +.pager li > a { + border-width: 2px; } .bs-component { margin-bottom: 2em; } @@ -6200,25 +6329,25 @@ input[type="color"]:focus, color: #ffffff; } .logo-test { - margin-bottom: 22px; } + margin-bottom: 24px; } .logo-test--black { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 495 230'%3E%3Cstyle type='text/css'%3E .lc%7Bfill:%23000000;%7D%3C/style%3E%3Cpath class='lc' d='M479.8 14.9v131.5c0 25.1-20.7 45.6-46.2 45.6H292.9c-16.9 0-32.9 6.1-45.4 17.4C235 198.2 219 192 202.1 192h-141c-25.3 0-45.8-20.4-45.8-45.6V14.9H479.8zM255 221.9c10.1-10.1 23.6-15.7 38-15.7h140.6c33.3 0 60.4-26.8 60.4-59.8V0.6H1v145.7c0 33 26.9 59.8 60.1 59.8h141c14.3 0 27.8 5.6 38 15.7l7.5 7.5L255 221.9z'/%3E%3Cpath class='lc' d='M425.7 74.8c0 4.4-3.5 7.6-7.9 7.6s-7.9-3.2-7.9-7.6 3.5-7.6 7.9-7.6C422.2 67 425.7 70.2 425.7 74.8M410.9 136.9h13.7V88.2h-13.7V136.9zM386.3 107.5l17.9 29.4h-14.9l-12-19.5 -6.5 8.2v11.3h-13.6v-70h13.6v32.3c0 6-0.7 12-0.7 12h0.3c0 0 3.2-5.3 5.9-9.1l10.4-13.9h16L386.3 107.5zM343.4 105.7c0-12.1-5.9-18.7-15.3-18.7 -8 0-12.2 4.7-14.6 9.2h-0.3l0.7-8h-13.6v48.7h13.6V108c0-5.6 3.3-9.5 8.4-9.5s7.3 3.4 7.3 9.9v28.5h13.7L343.4 105.7 343.4 105.7zM287.2 74.8c0 4.4-3.5 7.6-7.9 7.6s-7.9-3.2-7.9-7.6 3.5-7.6 7.9-7.6C283.8 67 287.2 70.2 287.2 74.8M272.4 136.9h13.7V88.2h-13.7V136.9zM248.8 123.3c0-3.9-5.4-4.7-11.7-6.5 -7.3-1.9-16.5-5.6-16.5-14.9 0-9.2 8.8-15 19.2-15 9.7 0 18.6 4.6 22.3 11.1l-11.7 6.6c-1.2-4.3-4.8-7.7-10.2-7.7 -3.5 0-6.4 1.5-6.4 4.4 0 3.7 6.4 4.1 13.6 6.4 7.6 2.4 14.6 5.9 14.6 14.8 0 9.8-9.1 15.6-19.6 15.6 -11.4 0-20.4-4.8-24.4-12.6l11.9-6.7c1.5 5.3 5.8 9.3 12.3 9.3C246.1 128.1 248.8 126.5 248.8 123.3M205.5 67.3h-13.7v56.1c0 5 1.1 8.7 3.2 11 2.2 2.3 5.6 3.4 10.3 3.4 1.6 0 3.3-0.2 4.9-0.5 1.7-0.4 3-0.9 4.1-1.5l1.2-9.2c-1.1 0.4-2 0.7-2.9 0.8 -0.8 0.2-1.8 0.2-2.9 0.2 -1.8 0-2.6-0.5-3.2-1.4 -0.7-0.9-1-2.5-1-4.8V67.3zM159.9 96.8c-5 0-9.1 3.6-10.2 10.2h19.2C169 101.2 165.2 96.8 159.9 96.8M181 116.2h-31.5c0.6 7.9 5 11.8 10.7 11.8 5.1 0 8.6-3.4 9.4-8l11.5 6.5c-3.4 6.2-10.7 11.6-20.9 11.6 -13.6 0-23.6-9.5-23.6-25.5 0-15.9 10.2-25.5 23.3-25.5s21.8 9.3 21.8 22.5C181.6 113.5 181 116.2 181 116.2M111.3 136.9h14.2V69.9h-14.2v26.5H84.6V70H70.4v66.9h14.2v-27.7h26.7V136.9z'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; - height: 88px; } + height: 96px; } .logo-test--copper { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 495 230'%3E%3Cstyle type='text/css'%3E .lc%7Bfill:%2300d7a7;%7D%3C/style%3E%3Cpath class='lc' d='M479.8 14.9v131.5c0 25.1-20.7 45.6-46.2 45.6H292.9c-16.9 0-32.9 6.1-45.4 17.4C235 198.2 219 192 202.1 192h-141c-25.3 0-45.8-20.4-45.8-45.6V14.9H479.8zM255 221.9c10.1-10.1 23.6-15.7 38-15.7h140.6c33.3 0 60.4-26.8 60.4-59.8V0.6H1v145.7c0 33 26.9 59.8 60.1 59.8h141c14.3 0 27.8 5.6 38 15.7l7.5 7.5L255 221.9z'/%3E%3Cpath class='lc' d='M425.7 74.8c0 4.4-3.5 7.6-7.9 7.6s-7.9-3.2-7.9-7.6 3.5-7.6 7.9-7.6C422.2 67 425.7 70.2 425.7 74.8M410.9 136.9h13.7V88.2h-13.7V136.9zM386.3 107.5l17.9 29.4h-14.9l-12-19.5 -6.5 8.2v11.3h-13.6v-70h13.6v32.3c0 6-0.7 12-0.7 12h0.3c0 0 3.2-5.3 5.9-9.1l10.4-13.9h16L386.3 107.5zM343.4 105.7c0-12.1-5.9-18.7-15.3-18.7 -8 0-12.2 4.7-14.6 9.2h-0.3l0.7-8h-13.6v48.7h13.6V108c0-5.6 3.3-9.5 8.4-9.5s7.3 3.4 7.3 9.9v28.5h13.7L343.4 105.7 343.4 105.7zM287.2 74.8c0 4.4-3.5 7.6-7.9 7.6s-7.9-3.2-7.9-7.6 3.5-7.6 7.9-7.6C283.8 67 287.2 70.2 287.2 74.8M272.4 136.9h13.7V88.2h-13.7V136.9zM248.8 123.3c0-3.9-5.4-4.7-11.7-6.5 -7.3-1.9-16.5-5.6-16.5-14.9 0-9.2 8.8-15 19.2-15 9.7 0 18.6 4.6 22.3 11.1l-11.7 6.6c-1.2-4.3-4.8-7.7-10.2-7.7 -3.5 0-6.4 1.5-6.4 4.4 0 3.7 6.4 4.1 13.6 6.4 7.6 2.4 14.6 5.9 14.6 14.8 0 9.8-9.1 15.6-19.6 15.6 -11.4 0-20.4-4.8-24.4-12.6l11.9-6.7c1.5 5.3 5.8 9.3 12.3 9.3C246.1 128.1 248.8 126.5 248.8 123.3M205.5 67.3h-13.7v56.1c0 5 1.1 8.7 3.2 11 2.2 2.3 5.6 3.4 10.3 3.4 1.6 0 3.3-0.2 4.9-0.5 1.7-0.4 3-0.9 4.1-1.5l1.2-9.2c-1.1 0.4-2 0.7-2.9 0.8 -0.8 0.2-1.8 0.2-2.9 0.2 -1.8 0-2.6-0.5-3.2-1.4 -0.7-0.9-1-2.5-1-4.8V67.3zM159.9 96.8c-5 0-9.1 3.6-10.2 10.2h19.2C169 101.2 165.2 96.8 159.9 96.8M181 116.2h-31.5c0.6 7.9 5 11.8 10.7 11.8 5.1 0 8.6-3.4 9.4-8l11.5 6.5c-3.4 6.2-10.7 11.6-20.9 11.6 -13.6 0-23.6-9.5-23.6-25.5 0-15.9 10.2-25.5 23.3-25.5s21.8 9.3 21.8 22.5C181.6 113.5 181 116.2 181 116.2M111.3 136.9h14.2V69.9h-14.2v26.5H84.6V70H70.4v66.9h14.2v-27.7h26.7V136.9z'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; - height: 66px; } + height: 72px; } .logo-test--bus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 495 230'%3E%3Cstyle type='text/css'%3E .lc%7Bfill:%230000bf;%7D%3C/style%3E%3Cpath class='lc' d='M479.8 14.9v131.5c0 25.1-20.7 45.6-46.2 45.6H292.9c-16.9 0-32.9 6.1-45.4 17.4C235 198.2 219 192 202.1 192h-141c-25.3 0-45.8-20.4-45.8-45.6V14.9H479.8zM255 221.9c10.1-10.1 23.6-15.7 38-15.7h140.6c33.3 0 60.4-26.8 60.4-59.8V0.6H1v145.7c0 33 26.9 59.8 60.1 59.8h141c14.3 0 27.8 5.6 38 15.7l7.5 7.5L255 221.9z'/%3E%3Cpath class='lc' d='M425.7 74.8c0 4.4-3.5 7.6-7.9 7.6s-7.9-3.2-7.9-7.6 3.5-7.6 7.9-7.6C422.2 67 425.7 70.2 425.7 74.8M410.9 136.9h13.7V88.2h-13.7V136.9zM386.3 107.5l17.9 29.4h-14.9l-12-19.5 -6.5 8.2v11.3h-13.6v-70h13.6v32.3c0 6-0.7 12-0.7 12h0.3c0 0 3.2-5.3 5.9-9.1l10.4-13.9h16L386.3 107.5zM343.4 105.7c0-12.1-5.9-18.7-15.3-18.7 -8 0-12.2 4.7-14.6 9.2h-0.3l0.7-8h-13.6v48.7h13.6V108c0-5.6 3.3-9.5 8.4-9.5s7.3 3.4 7.3 9.9v28.5h13.7L343.4 105.7 343.4 105.7zM287.2 74.8c0 4.4-3.5 7.6-7.9 7.6s-7.9-3.2-7.9-7.6 3.5-7.6 7.9-7.6C283.8 67 287.2 70.2 287.2 74.8M272.4 136.9h13.7V88.2h-13.7V136.9zM248.8 123.3c0-3.9-5.4-4.7-11.7-6.5 -7.3-1.9-16.5-5.6-16.5-14.9 0-9.2 8.8-15 19.2-15 9.7 0 18.6 4.6 22.3 11.1l-11.7 6.6c-1.2-4.3-4.8-7.7-10.2-7.7 -3.5 0-6.4 1.5-6.4 4.4 0 3.7 6.4 4.1 13.6 6.4 7.6 2.4 14.6 5.9 14.6 14.8 0 9.8-9.1 15.6-19.6 15.6 -11.4 0-20.4-4.8-24.4-12.6l11.9-6.7c1.5 5.3 5.8 9.3 12.3 9.3C246.1 128.1 248.8 126.5 248.8 123.3M205.5 67.3h-13.7v56.1c0 5 1.1 8.7 3.2 11 2.2 2.3 5.6 3.4 10.3 3.4 1.6 0 3.3-0.2 4.9-0.5 1.7-0.4 3-0.9 4.1-1.5l1.2-9.2c-1.1 0.4-2 0.7-2.9 0.8 -0.8 0.2-1.8 0.2-2.9 0.2 -1.8 0-2.6-0.5-3.2-1.4 -0.7-0.9-1-2.5-1-4.8V67.3zM159.9 96.8c-5 0-9.1 3.6-10.2 10.2h19.2C169 101.2 165.2 96.8 159.9 96.8M181 116.2h-31.5c0.6 7.9 5 11.8 10.7 11.8 5.1 0 8.6-3.4 9.4-8l11.5 6.5c-3.4 6.2-10.7 11.6-20.9 11.6 -13.6 0-23.6-9.5-23.6-25.5 0-15.9 10.2-25.5 23.3-25.5s21.8 9.3 21.8 22.5C181.6 113.5 181 116.2 181 116.2M111.3 136.9h14.2V69.9h-14.2v26.5H84.6V70H70.4v66.9h14.2v-27.7h26.7V136.9z'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; - height: 44px; } + height: 48px; } .partition-test { color: #ffffff; diff --git a/docs/bootstrap_test.md b/docs/bootstrap_test.md index 8f2f6c9..ba9bf9c 100644 --- a/docs/bootstrap_test.md +++ b/docs/bootstrap_test.md @@ -880,7 +880,7 @@
- +
@@ -983,6 +983,10 @@
+
+ + +
diff --git a/docs/brand.md b/docs/brand.md index 7474d80..b89407f 100644 --- a/docs/brand.md +++ b/docs/brand.md @@ -1,8 +1,8 @@ -# Helsinki Brand Elements +#Helsinki Brand Elements ---- -# Brand Colors +##Brand Colors
@@ -160,18 +160,117 @@
-#Helsinki logo +##Font + +City of Helsinki uses bespoke typeface Helsinki Grotesk. The font license covers usage on City of Helsinki web interfaces. + +
+
Helsinki Grotesk Regular
+
+ ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ
+ abcdefghijklmnopqrstuvwxyzåäö
+ 1234567890!"#€%&/()=
+
+
+ font-weight 400; font-style: normal; +
+
+ +
+
Helsinki Grotesk Regular Italic
+
+ ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ
+ abcdefghijklmnopqrstuvwxyzåäö
+ 1234567890!"#€%&/()=
+
+
+ font-weight 400; font-style: italic; +
+
+ +
+
Helsinki Grotesk Medium
+
+ ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ
+ abcdefghijklmnopqrstuvwxyzåäö
+ 1234567890!"#€%&/()=
+
+
+ font-weight 500; font-style: normal; +
+
+ +
+
Helsinki Grotesk Medium Italic
+
+ ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ
+ abcdefghijklmnopqrstuvwxyzåäö
+ 1234567890!"#€%&/()=
+
+
+ font-weight 500; font-style: italic; +
+
+ +
+
Helsinki Grotesk Bold Italic
+
+ ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ
+ abcdefghijklmnopqrstuvwxyzåäö
+ 1234567890!"#€%&/()=
+
+
+ font-weight 700; font-style: normal; +
+
+ +
+
Helsinki Grotesk Bold Italic
+
+ ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ
+ abcdefghijklmnopqrstuvwxyzåäö
+ 1234567890!"#€%&/()=
+
+
+ font-weight 700; font-style: italic; +
+
+ +
+
Helsinki Grotesk Black
+
+ ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ
+ abcdefghijklmnopqrstuvwxyzåäö
+ 1234567890!"#€%&/()=
+
+
+ font-weight 900; font-style: normal; +
+
+ +
+
Helsinki Grotesk Black Italic
+
+ ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ
+ abcdefghijklmnopqrstuvwxyzåäö
+ 1234567890!"#€%&/()=
+
+
+ font-weight 900; font-style: italic; +
+
+##Helsinki logo ###CSS SVG background mixin -Theme mixin ``helsinki-logo()`` can create a Helsinki logo svg background image of any color. Background +Theme mixin ``helsinki-logo()`` can create a Helsinki logo svg background image of any color. -### Usage +###Usage ``@mixin helsinki-logo($_color)`` where ``$_color`` can be any color -### Examples +###Examples
@@ -209,7 +308,7 @@ Theme mixin ``helsinki-logo()`` can create a Helsinki logo svg background image ``` -#Koros +##Koros The brand koro-shapes can be used to divide page sections. Theme mixin ``koro()`` can create a svg background image of any color or koro variation. @@ -285,7 +384,7 @@ There are five different shapes. Basic, Pulse, Beat, Storm and Wave.
----- -# Color Contrasts +##Color Contrasts
diff --git a/docs/index.md b/docs/index.md index c0082b9..b2dba11 100644 --- a/docs/index.md +++ b/docs/index.md @@ -1,8 +1,6 @@ # City of Helsinki Bootstrap 3 Theme -:bangbang: :bangbang: :bangbang: Under development. For setup testing purposes only :bangbang: :bangbang: :bangbang: - -This is the documentation for City of Helsinki [Bootstrap](https://getboostrap.com) theme. We are currently testing the best ways to deliver theming documentation and files. +City of Helsinki [Bootstrap](https://getboostrap.com) theme. **Beta** ## Contents @@ -15,18 +13,12 @@ Install or add Bootstrap sass theme to your application ``` npm install hel-bootstrap-3 ``` -(Not yet published install from Github repo instead) - -## Use as it is +NOTE: This probably [fails](https://github.com/City-of-Helsinki/hel-bootstrap-3/issues/10) on most enviroments as the sass files can not find each other or their dependencies. So importing individual files recommended for now: -You can now either import the default theme with all components -``` -@import hel-bootstrap-theme; -``` +## Use customised -## Use as customised +Import the sass files in this order. Customise the theme for your application and exclude the Bootstrap components you are not using. -Or customise the theme for your application and exclude the Bootstrap components you are not using ``` @import helsinki-variables; @@ -39,6 +31,8 @@ Or customise the theme for your application and exclude the Bootstrap components @import theme-custom-styles; ``` + + ## Files `` @@ -74,4 +68,4 @@ Compatible with [React-Bootstrap](https://react-bootstrap.github.io) components. * Clone this repository * ``pip install requirements.txt`` * ``npm install`` -* ``grunt dev`` \ No newline at end of file +* ``grunt dev`` diff --git a/package.json b/package.json index b26e58f..777360b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "hel-bootstrap-3", - "version": "1.0.0-beta.2", + "version": "1.0.0-beta.3", "description": "City of Helsinki themed Boostrap 3 SASS library", "style": "src/sass/_hel-bootstrap-theme.scss", "sass": "src/sass/_hel-bootstrap-theme.scss", diff --git a/readme.md b/readme.md index c0082b9..cd85d14 100644 --- a/readme.md +++ b/readme.md @@ -1,8 +1,8 @@ # City of Helsinki Bootstrap 3 Theme -:bangbang: :bangbang: :bangbang: Under development. For setup testing purposes only :bangbang: :bangbang: :bangbang: +[![npm version](https://img.shields.io/npm/v/hel-bootstrap-3.svg?style=flat-square)](https://www.npmjs.com/package/hel-bootstrap-3) -This is the documentation for City of Helsinki [Bootstrap](https://getboostrap.com) theme. We are currently testing the best ways to deliver theming documentation and files. +City of Helsinki [Bootstrap](https://getboostrap.com) theme. **Beta** ## Contents @@ -15,18 +15,12 @@ Install or add Bootstrap sass theme to your application ``` npm install hel-bootstrap-3 ``` -(Not yet published install from Github repo instead) +NOTE: This probably [fails](https://github.com/City-of-Helsinki/hel-bootstrap-3/issues/10) on most enviroments as the sass files can not find each other or their dependencies. So importing individual files recommended for now: -## Use as it is +## Use customised -You can now either import the default theme with all components -``` -@import hel-bootstrap-theme; -``` - -## Use as customised +Import the sass files in this order. Customise the theme for your application and exclude the Bootstrap components you are not using. -Or customise the theme for your application and exclude the Bootstrap components you are not using ``` @import helsinki-variables; @@ -39,6 +33,8 @@ Or customise the theme for your application and exclude the Bootstrap components @import theme-custom-styles; ``` + + ## Files `` @@ -74,4 +70,4 @@ Compatible with [React-Bootstrap](https://react-bootstrap.github.io) components. * Clone this repository * ``pip install requirements.txt`` * ``npm install`` -* ``grunt dev`` \ No newline at end of file +* ``grunt dev`` diff --git a/src/assets/helsinki-logo-black-fi-sv.svg b/src/assets/helsinki-logo-black-fi-sv.svg new file mode 100644 index 0000000..f2107d1 --- /dev/null +++ b/src/assets/helsinki-logo-black-fi-sv.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/helsinki-logo-black-sv.svg b/src/assets/helsinki-logo-black-sv.svg new file mode 100644 index 0000000..dedd2b4 --- /dev/null +++ b/src/assets/helsinki-logo-black-sv.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/helsinki-logo-black.svg b/src/assets/helsinki-logo-black.svg index 0d17ea6..627c3b0 100644 --- a/src/assets/helsinki-logo-black.svg +++ b/src/assets/helsinki-logo-black.svg @@ -1,23 +1 @@ - - - + \ No newline at end of file diff --git a/src/assets/helsinki-logo-white-fi-sv.svg b/src/assets/helsinki-logo-white-fi-sv.svg new file mode 100644 index 0000000..c221c23 --- /dev/null +++ b/src/assets/helsinki-logo-white-fi-sv.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/helsinki-logo-white-sv.svg b/src/assets/helsinki-logo-white-sv.svg new file mode 100644 index 0000000..afc3d52 --- /dev/null +++ b/src/assets/helsinki-logo-white-sv.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/helsinki-logo-white.svg b/src/assets/helsinki-logo-white.svg index 373d514..4dc4257 100644 --- a/src/assets/helsinki-logo-white.svg +++ b/src/assets/helsinki-logo-white.svg @@ -1,26 +1 @@ - - - + \ No newline at end of file diff --git a/src/sass/_application-variables.scss b/src/sass/_application-variables.scss index 80ce844..ee1da28 100644 --- a/src/sass/_application-variables.scss +++ b/src/sass/_application-variables.scss @@ -19,10 +19,14 @@ $dark-gray: #525a65; $medium-gray: #abb2bd; $black: #000000; -$theme-success: $hel-tram; -$theme-info: $hel-fog; -$theme-warning: $hel-summer; -$theme-danger: $hel-metro; +$theme-success: $hel-tram; +$theme-success-light: $hel-copper; +$theme-info: $hel-coat; +$theme-info-light: $hel-fog; +$theme-warning: $hel-summer; +$theme-warning-light: $hel-engel; +$theme-danger: $hel-metro; +$theme-danger-light: $hel-suomenlinna; $icon-font-path: "../fonts/bootstrap/"; diff --git a/src/sass/_theme-bootstrap-variables.scss b/src/sass/_theme-bootstrap-variables.scss index ea7d148..3015791 100644 --- a/src/sass/_theme-bootstrap-variables.scss +++ b/src/sass/_theme-bootstrap-variables.scss @@ -32,7 +32,7 @@ $body-bg: #fff !default; $text-color: $gray-dark !default; //** Global textual link color. -$link-color: $theme-primary-dark; +$link-color: $black; //** Link hover color set via `darken()` function. $link-hover-color: $theme-primary-dark; //** Link hover decoration. @@ -53,18 +53,18 @@ $font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !def $font-family-base: $font-family-sans-serif !default; $font-size-base: 16px; -$font-size-large: ceil(($font-size-base * 1.25)) !default; // ~18px -$font-size-small: ceil(($font-size-base * 0.85)) !default; // ~12px +$font-size-large: ceil(($font-size-base * 1.25)) !default; // ~18px +$font-size-small: ceil(($font-size-base * 0.85)) !default; // ~12px -$font-size-h1: floor(($font-size-base * 2.6)) !default; // ~36px -$font-size-h2: floor(($font-size-base * 2.15)) !default; // ~30px -$font-size-h3: ceil(($font-size-base * 1.7)) !default; // ~24px -$font-size-h4: ceil(($font-size-base * 1.25)) !default; // ~18px -$font-size-h5: $font-size-base !default; -$font-size-h6: ceil(($font-size-base * 0.85)) !default; // ~12px +$font-size-h1: 42px ; // ~42px +$font-size-h2: 36px ; // ~34px +$font-size-h3: 28px ; // ~28px +$font-size-h4: 24px ; // ~24px +$font-size-h5: 20px ; // ~20px +$font-size-h6: 16px ; // ~16px //** Unit-less `line-height` for use in components like buttons. -$line-height-base: 1.428571429 !default; // 20/14 +$line-height-base: 1.5 !default; // 16/24 //** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc. $line-height-computed: floor(($font-size-base * $line-height-base)) !default; // ~20px @@ -117,7 +117,7 @@ $border-radius-small: 4px; //** Global color for active items (e.g., navs or dropdowns). $component-active-color: $black; //** Global background color for active items (e.g., navs or dropdowns). -$component-active-bg: $theme-highlight-light; +$component-active-bg: $theme-primary-light; //** Width of the `border` for generating carets that indicate dropdowns. $caret-width-base: 4px !default; @@ -139,11 +139,11 @@ $table-bg: transparent !default; //** Background color used for `.table-striped`. $table-bg-accent: $gray-lighter; //** Background color used for `.table-hover`. -$table-bg-hover: $gray-light; +$table-bg-hover: darken($gray-lighter, 5%); $table-bg-active: $table-bg-hover !default; //** Border color for table and cell borders. -$table-border-color: #ddd !default; +$table-border-color: $gray; //== Buttons @@ -152,13 +152,13 @@ $table-border-color: #ddd !default; $btn-font-weight: 500; -$btn-default-color: $theme-primary-dark; +$btn-default-color: $black; $btn-default-bg: transparent; -$btn-default-border: $theme-primary-dark; +$btn-default-border: $black; $btn-primary-color: #fff !default; -$btn-primary-bg: $theme-primary-dark; -$btn-primary-border: $theme-primary-dark; +$btn-primary-bg: $black; +$btn-primary-border: $black; $btn-success-color: $brand-success; $btn-success-bg: transparent; @@ -189,29 +189,29 @@ $btn-border-radius-small: $border-radius-small !default; //## //** `` background color -$input-bg: #fff !default; +$input-bg: transparent; //** `` background color $input-bg-disabled: $gray-lighter !default; //** Text color for ``s $input-color: $gray !default; //** `` border color -$input-border: $gray-light; +$input-border: $black; // TODO: Rename `$input-border-radius` to `$input-border-radius-base` in v4 //** Default `.form-control` border radius // This has no effect on ``s in CSS. -$input-border-radius: $border-radius-base !default; +$input-border-radius: 0; //** Large `.form-control` border radius -$input-border-radius-large: $border-radius-large !default; +$input-border-radius-large: 0; //** Small `.form-control` border radius -$input-border-radius-small: $border-radius-small !default; +$input-border-radius-small: 0; //** Border color for inputs on focus -$input-border-focus: $theme-highlight-light; +$input-border-focus: $black; //** Placeholder text color -$input-color-placeholder: #999 !default; +$input-color-placeholder: $gray-light; //** Default `.form-control` height $input-height-base: ($line-height-computed + ($padding-base-vertical * 2) + 2) !default; @@ -221,7 +221,7 @@ $input-height-large: (ceil($font-size-large * $line-height-large) + $input-height-small: (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2) !default; //** `.form-group` margin -$form-group-margin-bottom: 15px !default; +$form-group-margin-bottom: $line-height-computed; $legend-color: $gray-dark !default; $legend-border-color: #e5e5e5 !default; @@ -253,7 +253,7 @@ $dropdown-link-color: $gray-dark !default; //** Hover color for dropdown links. $dropdown-link-hover-color: darken($gray-dark, 5%) !default; //** Hover background for dropdown links. -$dropdown-link-hover-bg: $theme-primary-light; +$dropdown-link-hover-bg: $theme-highlight-light; //** Active dropdown menu item text color. $dropdown-link-active-color: $component-active-color !default; @@ -372,39 +372,39 @@ $navbar-padding-horizontal: floor(($grid-gutter-width / 2)) !default; $navbar-padding-vertical: (($navbar-height - $line-height-computed) / 2) !default; $navbar-collapse-max-height: 340px !default; -$navbar-default-color: $theme-primary-dark; +$navbar-default-color: $black; $navbar-default-bg: $white; $navbar-default-border: transparent; // Navbar links -$navbar-default-link-color: $theme-primary-dark; -$navbar-default-link-hover-color: $theme-highlight-dark; +$navbar-default-link-color: $black; +$navbar-default-link-hover-color: $black; $navbar-default-link-hover-bg: transparent !default; -$navbar-default-link-active-color: $theme-primary-dark; +$navbar-default-link-active-color: $black; $navbar-default-link-active-bg: transparent; $navbar-default-link-disabled-color: $gray; $navbar-default-link-disabled-bg: transparent !default; // Navbar brand label $navbar-default-brand-color: $navbar-default-link-color !default; -$navbar-default-brand-hover-color: $theme-highlight-dark; +$navbar-default-brand-hover-color: $black; $navbar-default-brand-hover-bg: transparent !default; // Navbar toggle $navbar-default-toggle-hover-bg: transparent; -$navbar-default-toggle-icon-bar-bg: $theme-primary-dark; +$navbar-default-toggle-icon-bar-bg: $black; $navbar-default-toggle-border-color: transparent; //=== Inverted navbar // Reset inverted navbar basics $navbar-inverse-color: $white; -$navbar-inverse-bg: $theme-primary-dark; +$navbar-inverse-bg: $black; $navbar-inverse-border: transparent; // Inverted navbar links $navbar-inverse-link-color: $white; -$navbar-inverse-link-hover-color: $theme-highlight-light; +$navbar-inverse-link-hover-color: $white; $navbar-inverse-link-hover-bg: transparent !default; $navbar-inverse-link-active-color: $white; $navbar-inverse-link-active-bg: transparent; @@ -413,7 +413,7 @@ $navbar-inverse-link-disabled-bg: transparent !default; // Inverted navbar brand label $navbar-inverse-brand-color: $navbar-inverse-link-color !default; -$navbar-inverse-brand-hover-color: $theme-highlight-light; +$navbar-inverse-brand-hover-color: $white; $navbar-inverse-brand-hover-bg: transparent !default; // Inverted navbar toggle @@ -434,15 +434,15 @@ $nav-disabled-link-color: $gray-light !default; $nav-disabled-link-hover-color: $gray-light !default; //== Tabs -$nav-tabs-border-color: #ddd !default; +$nav-tabs-border-color: $gray; -$nav-tabs-link-hover-border-color: $gray-lighter !default; +$nav-tabs-link-hover-border-color: $gray-light; $nav-tabs-active-link-hover-bg: $body-bg !default; -$nav-tabs-active-link-hover-color: $gray !default; -$nav-tabs-active-link-hover-border-color: #ddd !default; +$nav-tabs-active-link-hover-color: $black; +$nav-tabs-active-link-hover-border-color: $black; -$nav-tabs-justified-link-border-color: #ddd !default; +$nav-tabs-justified-link-border-color: $black; $nav-tabs-justified-active-link-border-color: $body-bg !default; //== Pills @@ -456,14 +456,14 @@ $nav-pills-active-link-hover-color: $component-active-color !default; //## $pagination-color: $link-color !default; -$pagination-bg: #fff !default; -$pagination-border: $gray-light; +$pagination-bg: transparent; +$pagination-border: $gray; $pagination-hover-color: $brand-primary; -$pagination-hover-bg: $gray-lighter !default; +$pagination-hover-bg: inherit; $pagination-hover-border: $pagination-border; -$pagination-active-color: $theme-primary-dark; +$pagination-active-color: $black; $pagination-active-bg: $theme-primary-light; $pagination-active-border: $pagination-border; @@ -505,19 +505,19 @@ $jumbotron-heading-font-size: ceil(($font-size-base * 4.5)) !default; //## Define colors for form feedback states and, by default, alerts. $state-success-text: $black; -$state-success-bg: $brand-success; +$state-success-bg: $theme-success-light; $state-success-border: transparent; $state-info-text: $black; -$state-info-bg: $brand-info; +$state-info-bg: $theme-info-light; $state-info-border: transparent; $state-warning-text: $black; -$state-warning-bg: $brand-warning; +$state-warning-bg: $theme-warning-light; $state-warning-border: transparent; -$state-danger-text: $white; -$state-danger-bg: $brand-danger; +$state-danger-text: $black; +$state-danger-bg: $theme-danger-light; $state-danger-border: transparent; @@ -577,13 +577,13 @@ $label-default-bg: $gray-light !default; //** Primary label background color $label-primary-bg: $theme-primary-light; //** Success label background color -$label-success-bg: $brand-success !default; +$label-success-bg: $theme-success-light; //** Info label background color -$label-info-bg: $brand-info !default; +$label-info-bg: $theme-info-light; //** Warning label background color -$label-warning-bg: $brand-warning !default; +$label-warning-bg: $theme-warning-light; //** Danger label background color -$label-danger-bg: $brand-danger !default; +$label-danger-bg: $theme-danger-light; //** Default label text color $label-color: $black; @@ -679,7 +679,7 @@ $progress-bar-info-bg: $brand-info; //** Background color on `.list-group-item` $list-group-bg: #fff !default; //** `.list-group-item` border color -$list-group-border: #ddd !default; +$list-group-border: $gray-light; //** List group border radius $list-group-border-radius: $border-radius-base !default; @@ -717,12 +717,12 @@ $panel-footer-padding: $panel-heading-padding !default; $panel-border-radius: $border-radius-base !default; //** Border color for elements within panels -$panel-inner-border: #ddd !default; -$panel-footer-bg: #f5f5f5 !default; +$panel-inner-border: transparent; +$panel-footer-bg: $gray-lighter; $panel-default-text: $gray-dark !default; -$panel-default-border: #ddd !default; -$panel-default-heading-bg: #f5f5f5 !default; +$panel-default-border: transparent; +$panel-default-heading-bg: $gray-lighter; $panel-primary-text: #fff !default; $panel-primary-border: $brand-primary !default; @@ -750,11 +750,11 @@ $panel-danger-heading-bg: $state-danger-bg !default; //## //** Padding around the thumbnail image -$thumbnail-padding: 4px !default; +$thumbnail-padding: 5px; //** Thumbnail background color $thumbnail-bg: $body-bg !default; //** Thumbnail border color -$thumbnail-border: #ddd !default; +$thumbnail-border: $black; //** Thumbnail border radius $thumbnail-border-radius: $border-radius-base !default; @@ -779,7 +779,7 @@ $well-border: transparent; $badge-color: #fff !default; //** Linked badge text color on hover $badge-link-hover-color: #fff !default; -$badge-bg: $gray-light !default; +$badge-bg: $gray; //** Badge text color in active nav link $badge-active-color: $link-color !default; @@ -798,11 +798,11 @@ $badge-border-radius: 10px !default; $breadcrumb-padding-vertical: 8px !default; $breadcrumb-padding-horizontal: 15px !default; //** Breadcrumb background color -$breadcrumb-bg: #f5f5f5 !default; +$breadcrumb-bg: $gray-lighter; //** Breadcrumb text color -$breadcrumb-color: #ccc !default; +$breadcrumb-color: $theme-primary-dark; //** Text color of current page in the breadcrumb -$breadcrumb-active-color: $gray-light !default; +$breadcrumb-active-color: $gray; //** Textual separator for between breadcrumb elements $breadcrumb-separator: "/" !default; diff --git a/src/sass/_theme-custom-styles.scss b/src/sass/_theme-custom-styles.scss index 4d7d907..2463fa2 100644 --- a/src/sass/_theme-custom-styles.scss +++ b/src/sass/_theme-custom-styles.scss @@ -46,6 +46,47 @@ // **** Bootstrap overrides // **** (theme style changes that can not be achieved through variables only) +// Have content links underlined + +$a-tags: 'a, a:active, a:hover, a:visited'; +$a-tags-hover: 'a:active, a:hover'; + +#{$a-tags} { + text-decoration: underline; +} + +#{$a-tags-hover} { + color: $theme-primary-dark; +} + +.navbar a, +.btn, +.nav li a, +.dropdown a, +.dropdown-menu a, +.breadcrumb a, +.pager a, +.panel-title a, +a.list-group-item { + text-decoration: none +} + +.btn.btn-link { + text-decoration: underline; + color: $theme-primary-dark; +} + +.breadcrumb a:hover { + color: $black; + text-decoration: underline; +} + +// Lists + +dl dd, dl dt { + margin-bottom: $line-height-computed / 2; +} + // Button overrides .btn-default { @@ -55,6 +96,10 @@ } } +.btn { + border-width: 2px; +} + .btn-primary { &:hover { border-color: lighten($btn-primary-border, 7%); @@ -114,9 +159,9 @@ &:before { width: 30px; position: absolute; - top: 1px; - right: 1px; - bottom: 1px; + top: 2px; + right: 2px; + bottom: 2px; background: $gray-lighter; content: ''; pointer-events: none; @@ -129,12 +174,12 @@ } select { + border-width: 2px; box-shadow: none; cursor: pointer; outline: none; padding-right: 35px; padding-left: 15px; - border-bottom-width: 1px; // Firefox style reset -moz-appearance: none; @@ -154,6 +199,10 @@ } } +select.form-control:focus { + border-color: $black; +} + // IE 9 only @media all and (min-width:0\0) and (min-resolution:.001dpcm){ .select{ @@ -171,12 +220,34 @@ // Styles when navbar is not collapsed @media (min-width: $screen-md-min) { - .navbar-default .navbar-nav > .active > a { - border-bottom: solid 3px $theme-primary-dark; + .navbar-nav > li > a { + position: relative; + padding-left: 0; + padding-right: 0; + margin-right: 15px; + margin-left: 15px; + font-weight: 500; + font-size: 15px; } - .navbar-inverse .navbar-nav > .active > a { - border-bottom: solid 3px $theme-highlight-light; + .navbar-nav > .active > a, .navbar-nav > li > a:hover { + &:after { + content: ""; + border-bottom: solid 3px $black; + position: absolute; + bottom: 12px; + margin-left: auto; + margin-right: auto; + left: 0; + right: 0; + } + } + + .navbar-inverse .navbar-nav > .active > a , .navbar-inverse .navbar-nav > li > a:hover { + + &:after { + border-bottom: solid 3px $white; + } } } @@ -193,8 +264,9 @@ .navbar-nav > .active > a { font-weight: bold; - &:after { - content: "\000A0 \02022"; + &:before { + content: "\000A0"; + border-left: 3px solid $black; } } } @@ -210,10 +282,25 @@ .navbar-collapse { border-top-color: lighten($theme-primary-dark, 5%); } + + .navbar-form .form-control { + border-color: $white; + color: $white; + } + + .btn-default { + border-color: $white; + color: $white; + + &:active { + border-color: $gray-lighter; + color: $gray-lighter; + } + } } .navbar-default { - border-bottom: 1px solid $theme-primary-dark; + //border-bottom: 1px solid $theme-primary-dark; .navbar-collapse { border-top-color: $gray-lighter; @@ -221,7 +308,7 @@ } .navbar-brand { - font-weight: bold; + font-weight: 700; font-size: $font-size-base; } @@ -232,8 +319,108 @@ color: $gray; } +.form-group label { + margin-bottom: 0; +} + .form-control { - border-bottom-width: 2px; + border-width: 0 0 2px 0; + box-shadow: none; + height: 40px; + padding: 6px 0; +} + +textarea.form-control { + border-width: 2px; + padding: 6px 12px; + &:focus { + border-color: $theme-highlight-dark; + } +} + +// form element focus style +textarea:focus, +input[type="text"]:focus, +input[type="password"]:focus, +input[type="datetime"]:focus, +input[type="datetime-local"]:focus, +input[type="date"]:focus, +input[type="month"]:focus, +input[type="time"]:focus, +input[type="week"]:focus, +input[type="number"]:focus, +input[type="email"]:focus, +input[type="url"]:focus, +input[type="search"]:focus, +input[type="tel"]:focus, +input[type="color"]:focus, +.form-control:focus, +.uneditable-input:focus { + border-bottom-color: $theme-highlight-dark; + box-shadow: none; +} + +// input group when button border is 2px + +.input-group .form-control { + border-width: 2px; + padding: 6px 12px; + + &:focus { + border-bottom-color: $black; + } +} + +.input-group .form-control:first-child, +.input-group-addon:first-child, +.input-group-btn:first-child > .btn, +.input-group-btn:first-child > .btn-group > .btn, +.input-group-btn:first-child > .dropdown-toggle, +.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle), +.input-group-btn:last-child > .btn-group:not(:last-child) > .btn { + border-right-width: 0; +} +.input-group .form-control:last-child, +.input-group-addon:last-child, +.input-group-btn:last-child > .btn, +.input-group-btn:last-child > .btn-group > .btn, +.input-group-btn:last-child > .dropdown-toggle, +.input-group-btn:first-child > .btn:not(:first-child), +.input-group-btn:first-child > .btn-group:not(:first-child) > .btn { + border-left-width: 0; +} + + +.input-group-addon { + border-width: 2px; + color: $black; +} + +// accommodate 2px border width in groups +.btn-group { + .btn + .btn, + .btn + .btn-group, + .btn-group + .btn, + .btn-group + .btn-group { + margin-left: -2px; + } +} + +// accommodate 2px border width in groups +.btn-group-vertical { + > .btn + .btn, + > .btn + .btn-group, + > .btn-group + .btn, + > .btn-group + .btn-group { + margin-top: -2px; + } +} + +.form-control[disabled], +.form-control[readonly], +fieldset[disabled] .form-control { + padding: 6px 12px; + border-color: $gray-light; } .has-warning { @@ -252,9 +439,12 @@ .form-control { border-color: $theme-warning; + box-shadow: none; &:focus { + padding: 6px 12px; border-color: $theme-warning; - box-shadow: 0 0 0 1px $theme-warning; + background-color: lighten($theme-warning-light, 20%); + box-shadow: none; } } } @@ -275,9 +465,12 @@ .form-control { border-color: $theme-danger; + box-shadow: none; &:focus { + padding: 6px 12px; border-color: $theme-danger; - box-shadow: 0 0 0 1px $theme-danger; + background-color: lighten($theme-danger-light, 15%); + box-shadow: none; } } } @@ -298,32 +491,25 @@ .form-control { border-color: $theme-success; + box-shadow: none; &:focus { + padding: 6px 12px; border-color: $theme-success; - box-shadow: 0 0 0 1px $theme-success; + background-color: lighten($theme-success-light, 50%); + box-shadow: none; } } } -// form element focus style -textarea:focus, -input[type="text"]:focus, -input[type="password"]:focus, -input[type="datetime"]:focus, -input[type="datetime-local"]:focus, -input[type="date"]:focus, -input[type="month"]:focus, -input[type="time"]:focus, -input[type="week"]:focus, -input[type="number"]:focus, -input[type="email"]:focus, -input[type="url"]:focus, -input[type="search"]:focus, -input[type="tel"]:focus, -input[type="color"]:focus, -.form-control:focus, -.uneditable-input:focus { - border-color: $input-border; - border-bottom-color: $black; - box-shadow: none; + +// Panels + +.panel { + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); +} + +// Pagers + +.pager li > a { + border-width: 2px; } \ No newline at end of file