diff --git a/docs/Gemfile b/docs/Gemfile index e782eeb..f5edf42 100644 --- a/docs/Gemfile +++ b/docs/Gemfile @@ -1,7 +1,7 @@ source('https://rubygems.org') gem('github-pages') -gem('hootstrap', '~> 0.1.6') +gem('hootstrap', '~> 0.3.0') gem('jekyll') gem('jekyll-assets') gem('jekyll-babel') diff --git a/docs/Gemfile.lock b/docs/Gemfile.lock index f773f4c..e093361 100644 --- a/docs/Gemfile.lock +++ b/docs/Gemfile.lock @@ -38,15 +38,15 @@ GEM addressable (2.5.2) public_suffix (>= 2.0.2, < 4.0) arel (6.0.4) - autoprefixer-rails (7.2.3) + autoprefixer-rails (8.2.0) execjs babel-source (5.8.35) babel-transpiler (0.7.0) babel-source (>= 4.0, < 6) execjs (~> 2.0) - bootstrap (4.0.0.beta2.1) + bootstrap (4.0.0) autoprefixer-rails (>= 6.0.3) - popper_js (>= 1.12.3, < 2) + popper_js (>= 1.12.9, < 2) sass (>= 3.5.2) builder (3.2.3) coffee-script (2.4.1) @@ -122,8 +122,8 @@ GEM typhoeus (~> 0.7) globalid (0.4.1) activesupport (>= 4.2.0) - hootstrap (0.1.6) - bootstrap (~> 4.0.0.beta) + hootstrap (0.3.0) + bootstrap (~> 4.0) rails (>= 4.2.0) sass-rails html-pipeline (2.7.1) @@ -251,7 +251,7 @@ GEM listen (3.0.6) rb-fsevent (>= 0.9.3) rb-inotify (>= 0.9.7) - loofah (2.1.1) + loofah (2.2.2) crass (~> 1.0.2) nokogiri (>= 1.5.9) mail (2.7.0) @@ -270,7 +270,7 @@ GEM sawyer (~> 0.8.0, >= 0.5.3) pathutil (0.16.0) forwardable-extended (~> 2.6) - popper_js (1.12.5) + popper_js (1.12.9) public_suffix (2.0.5) rack (1.6.8) rack-test (0.6.3) @@ -288,18 +288,18 @@ GEM sprockets-rails rails-deprecated_sanitizer (1.0.3) activesupport (>= 4.2.0.alpha) - rails-dom-testing (1.0.8) - activesupport (>= 4.2.0.beta, < 5.0) + rails-dom-testing (1.0.9) + activesupport (>= 4.2.0, < 5.0) nokogiri (~> 1.6) rails-deprecated_sanitizer (>= 1.0.1) - rails-html-sanitizer (1.0.3) - loofah (~> 2.0) + rails-html-sanitizer (1.0.4) + loofah (~> 2.2, >= 2.2.2) railties (4.2.9) actionpack (= 4.2.9) activesupport (= 4.2.9) rake (>= 0.8.7) thor (>= 0.18.1, < 2.0) - rake (12.3.0) + rake (12.3.1) rb-fsevent (0.10.2) rb-inotify (0.9.10) ffi (>= 0.5.0, < 2) @@ -345,10 +345,10 @@ PLATFORMS DEPENDENCIES github-pages - hootstrap (~> 0.1.6) + hootstrap (~> 0.3.0) jekyll jekyll-assets jekyll-babel BUNDLED WITH - 1.15.4 + 1.16.1 diff --git a/docs/_data/nav.yml b/docs/_data/nav.yml index e63cbbc..946eb2a 100644 --- a/docs/_data/nav.yml +++ b/docs/_data/nav.yml @@ -2,3 +2,4 @@ - title: Buttons - title: Badges - title: Cards +- title: Layout diff --git a/docs/_includes/icons/logo.svg b/docs/_includes/icons/logo.svg new file mode 100644 index 0000000..5f6e501 --- /dev/null +++ b/docs/_includes/icons/logo.svg @@ -0,0 +1 @@ + diff --git a/docs/_includes/icons/nest.svg b/docs/_includes/icons/nest.svg deleted file mode 100644 index 4d69389..0000000 --- a/docs/_includes/icons/nest.svg +++ /dev/null @@ -1,13 +0,0 @@ - - nest - - - - - - - - - - - diff --git a/docs/_includes/navbar.html b/docs/_includes/navbar.html index 5dd2a64..f46baf7 100644 --- a/docs/_includes/navbar.html +++ b/docs/_includes/navbar.html @@ -1,13 +1,13 @@
- - {% include icons/nest.svg width="34" height="34" class="align-middle" %} + + {% include icons/logo.svg width="34" height="34" class="align-middle" %} - ProctorU Nest + ProctorU Hootstrap
-
    +
    • Docs
      • diff --git a/docs/_layouts/docs.html b/docs/_layouts/docs.html index da9b3e7..6801f2f 100644 --- a/docs/_layouts/docs.html +++ b/docs/_layouts/docs.html @@ -12,11 +12,13 @@
-
- {{ page.title }} -
+
+

+ {{ page.title }} +

-

{{ page.description }}

+
{{ page.description }}
+
{{ content }}
diff --git a/docs/_site/assets/.sprockets-manifest-ab537dabb02070d2a9458c54e828bde8.json b/docs/_site/assets/.sprockets-manifest-ab537dabb02070d2a9458c54e828bde8.json index 6a1ef42..06f127c 100644 --- a/docs/_site/assets/.sprockets-manifest-ab537dabb02070d2a9458c54e828bde8.json +++ b/docs/_site/assets/.sprockets-manifest-ab537dabb02070d2a9458c54e828bde8.json @@ -1 +1 @@ -{"files":{"hootstrap-216e42084f484d38539852320d1697946dc278a04cb9374ac4941c2badb754e6.js":{"mtime":"2017-12-06T18:31:15-06:00","logical_path":"hootstrap.js","integrity":"sha256-IW5CCE9ITThTmFIyDRaXlG3CeKBMuTdKxJQcK623VOY=","digest":"216e42084f484d38539852320d1697946dc278a04cb9374ac4941c2badb754e6","size":34651},"hootstrap-39cedbb5dbf62ab6756501e6b716b59ff042a3a9fdb78614a919dfd4d8473deb.js":{"mtime":"2018-01-05T09:08:39-06:00","logical_path":"hootstrap.js","integrity":"sha256-Oc7btdv2KrZ1ZQHmtxa1n/BCo6n9t4YUqRnf1NhHPes=","digest":"39cedbb5dbf62ab6756501e6b716b59ff042a3a9fdb78614a919dfd4d8473deb","size":34662}},"assets":{"hootstrap.js":"hootstrap-39cedbb5dbf62ab6756501e6b716b59ff042a3a9fdb78614a919dfd4d8473deb.js"}} \ No newline at end of file +{"files":{"hootstrap-216e42084f484d38539852320d1697946dc278a04cb9374ac4941c2badb754e6.js":{"mtime":"2017-12-06T18:31:15-06:00","logical_path":"hootstrap.js","integrity":"sha256-IW5CCE9ITThTmFIyDRaXlG3CeKBMuTdKxJQcK623VOY=","digest":"216e42084f484d38539852320d1697946dc278a04cb9374ac4941c2badb754e6","size":34651},"hootstrap-39cedbb5dbf62ab6756501e6b716b59ff042a3a9fdb78614a919dfd4d8473deb.js":{"mtime":"2018-03-23T08:29:25-05:00","logical_path":"hootstrap.js","integrity":"sha256-Oc7btdv2KrZ1ZQHmtxa1n/BCo6n9t4YUqRnf1NhHPes=","digest":"39cedbb5dbf62ab6756501e6b716b59ff042a3a9fdb78614a919dfd4d8473deb","size":34662}},"assets":{"hootstrap.js":"hootstrap-39cedbb5dbf62ab6756501e6b716b59ff042a3a9fdb78614a919dfd4d8473deb.js"}} \ No newline at end of file diff --git a/docs/_site/assets/scss/docs.css b/docs/_site/assets/scss/docs.css index 1b17efc..efe8b6f 100644 --- a/docs/_site/assets/scss/docs.css +++ b/docs/_site/assets/scss/docs.css @@ -1,27 +1,19 @@ -.page-title { - border-bottom: 1px solid #e9ecef; - font-size: 2em; - font-weight: 600; - line-height: 1.2; - margin-bottom: 1rem; - padding-bottom: 0.3em; } - -.nest-example { +.hootstrap-example { background-color: #fff; border-radius: .25rem .25rem 0 0; border: 1px solid #e9ecef; padding: 1rem; position: relative; } -.nest-example::before, -.nest-example::after { +.hootstrap-example::before, +.hootstrap-example::after { content: ""; display: table; } -.nest-example .alert { +.hootstrap-example .alert { margin-bottom: 0; } -.nest-example + .highlight { +.hootstrap-example + .highlight { background-color: #fff; border-radius: 0 0 .25rem .25rem; border: 1px solid #e9ecef; diff --git a/docs/_site/assets/scss/docs.scss b/docs/_site/assets/scss/docs.scss new file mode 100644 index 0000000..616ed41 --- /dev/null +++ b/docs/_site/assets/scss/docs.scss @@ -0,0 +1,219 @@ +--- --- .hootstrap-example { + background-color: #fff; + border-radius: 0.25rem 0.25rem 0 0; + border: 1px solid #e9ecef; + padding: 1rem; + position: relative; +} + +.hootstrap-example::before, +.hootstrap-example::after { + content: ""; + display: table; +} + +.hootstrap-example .alert { + margin-bottom: 0; +} + +.hootstrap-example + .highlight { + background-color: #fff; + border-radius: 0 0 0.25rem 0.25rem; + border: 1px solid #e9ecef; + margin-bottom: 1rem; + margin-top: -1px; +} + +.highlight pre { + background-color: #fff; + border-radius: 3px; + font-size: 85%; + line-height: 1.45; + margin-bottom: 0; + overflow: auto; + padding: 1rem; +} + +/** + * Syntax + */ +.hll { + background-color: #ffc; +} +.c { + color: #999; +} +.k { + color: #069; +} +.o { + color: #555; +} +.cm { + color: #999; +} +.cp { + color: #099; +} +.c1 { + color: #999; +} +.cs { + color: #999; +} +.gd { + background-color: #fcc; + border: 1px solid #c00; +} +.ge { + font-style: italic; +} +.gr { + color: #f00; +} +.gh { + color: #030; +} +.gi { + background-color: #cfc; + border: 1px solid #0c0; +} +.go { + color: #aaa; +} +.gp { + color: #009; +} +.gu { + color: #030; +} +.gt { + color: #9c6; +} +.kc { + color: #069; +} +.kd { + color: #069; +} +.kn { + color: #069; +} +.kp { + color: #069; +} +.kr { + color: #069; +} +.kt { + color: #078; +} +.m { + color: #f60; +} +.s { + color: #d44950; +} +.na { + color: #4f9fcf; +} +.nb { + color: #366; +} +.nc { + color: #0a8; +} +.no { + color: #360; +} +.nd { + color: #99f; +} +.ni { + color: #999; +} +.ne { + color: #c00; +} +.nf { + color: #c0f; +} +.nl { + color: #99f; +} +.nn { + color: #0cf; +} +.nt { + color: #2f6f9f; +} +.nv { + color: #033; +} +.ow { + color: #000; +} +.w { + color: #bbb; +} +.mf { + color: #f60; +} +.mh { + color: #f60; +} +.mi { + color: #f60; +} +.mo { + color: #f60; +} +.sb { + color: #c30; +} +.sc { + color: #c30; +} +.sd { + font-style: italic; + color: #c30; +} +.s2 { + color: #c30; +} +.se { + color: #c30; +} +.sh { + color: #c30; +} +.si { + color: #a00; +} +.sx { + color: #c30; +} +.sr { + color: #3aa; +} +.s1 { + color: #c30; +} +.ss { + color: #fc3; +} +.bp { + color: #366; +} +.vc { + color: #033; +} +.vg { + color: #033; +} +.vi { + color: #033; +} +.il { + color: #f60; +} diff --git a/docs/_site/assets/scss/main.css b/docs/_site/assets/scss/main.css index c482a9f..bffb145 100644 --- a/docs/_site/assets/scss/main.css +++ b/docs/_site/assets/scss/main.css @@ -1,11 +1,12 @@ +@charset "UTF-8"; /*! - * Bootstrap v4.0.0-beta.2 (https://getbootstrap.com) - * Copyright 2011-2017 The Bootstrap Authors - * Copyright 2011-2017 Twitter, Inc. + * Bootstrap v4.0.0 (https://getbootstrap.com) + * Copyright 2011-2018 The Bootstrap Authors + * Copyright 2011-2018 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */ :root { - --blue: #11b3e3; + --blue: #0072b1; --indigo: #6610f2; --purple: #6f42c1; --pink: #e83e8c; @@ -18,7 +19,7 @@ --white: #fff; --gray: #868e96; --gray-dark: #343a40; - --primary: #11b3e3; + --primary: #0072b1; --secondary: #868e96; --success: #008761; --info: #bfdbf7; @@ -35,60 +36,6 @@ --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; --font-family-monospace: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } -@media print { - *, - *::before, - *::after { - text-shadow: none !important; - box-shadow: none !important; } - - a, - a:visited { - text-decoration: underline; } - - abbr[title]::after { - content: " (" attr(title) ")"; } - - pre { - white-space: pre-wrap !important; } - - pre, - blockquote { - border: 1px solid #999; - page-break-inside: avoid; } - - thead { - display: table-header-group; } - - tr, - img { - page-break-inside: avoid; } - - p, - h2, - h3 { - orphans: 3; - widows: 3; } - - h2, - h3 { - page-break-after: avoid; } - - .navbar { - display: none; } - - .badge { - border: 1px solid #000; } - - .table { - border-collapse: collapse !important; } - .table td, - .table th { - background-color: #fff !important; } - - .table-bordered th, - .table-bordered td { - border: 1px solid #ddd !important; } } *, *::before, *::after { @@ -118,7 +65,7 @@ body { background-color: #f5f7fa; } [tabindex="-1"]:focus { - outline: none !important; } + outline: 0 !important; } hr { box-sizing: content-box; @@ -191,21 +138,18 @@ sup { top: -.5em; } a { - color: #11b3e3; + color: #0072b1; text-decoration: none; background-color: transparent; -webkit-text-decoration-skip: objects; } a:hover { - color: #0c7b9c; + color: #004165; text-decoration: underline; } a:not([href]):not([tabindex]) { color: inherit; text-decoration: none; } - a:not([href]):not([tabindex]):focus { - color: inherit; - text-decoration: none; } - a:not([href]):not([tabindex]):hover { + a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus { color: inherit; text-decoration: none; } a:not([href]):not([tabindex]):focus { @@ -234,17 +178,6 @@ img { svg:not(:root) { overflow: hidden; } -a, -area, -button, -[role="button"], -input:not([type="range"]), -label, -select, -summary, -textarea { - touch-action: manipulation; } - table { border-collapse: collapse; } @@ -355,7 +288,8 @@ output { display: inline-block; } summary { - display: list-item; } + display: list-item; + cursor: pointer; } template { display: none; } @@ -466,7 +400,6 @@ mark, background-color: #f5f7fa; border: 1px solid #ddd; border-radius: 0.25rem; - transition: all 0.2s ease-in-out; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075); max-width: 100%; height: auto; } @@ -489,15 +422,11 @@ samp { font-family: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } code { - padding: 0.2rem 0.4rem; font-size: 90%; color: #bd4147; - background-color: #f5f7fa; - border-radius: 0.25rem; } + word-break: break-word; } a > code { - padding: 0; - color: inherit; - background-color: inherit; } + color: inherit; } kbd { padding: 0.2rem 0.4rem; @@ -514,16 +443,12 @@ kbd { pre { display: block; - margin-top: 0; - margin-bottom: 1rem; font-size: 90%; color: #212529; } pre code { - padding: 0; font-size: inherit; color: inherit; - background-color: transparent; - border-radius: 0; } + word-break: normal; } .pre-scrollable { max-height: 340px; @@ -642,6 +567,12 @@ pre { .order-first { order: -1; } +.order-last { + order: 13; } + +.order-0 { + order: 0; } + .order-1 { order: 1; } @@ -773,6 +704,12 @@ pre { .order-sm-first { order: -1; } + .order-sm-last { + order: 13; } + + .order-sm-0 { + order: 0; } + .order-sm-1 { order: 1; } @@ -906,6 +843,12 @@ pre { .order-md-first { order: -1; } + .order-md-last { + order: 13; } + + .order-md-0 { + order: 0; } + .order-md-1 { order: 1; } @@ -1039,6 +982,12 @@ pre { .order-lg-first { order: -1; } + .order-lg-last { + order: 13; } + + .order-lg-0 { + order: 0; } + .order-lg-1 { order: 1; } @@ -1172,6 +1121,12 @@ pre { .order-xl-first { order: -1; } + .order-xl-last { + order: 13; } + + .order-xl-0 { + order: 0; } + .order-xl-1 { order: 1; } @@ -1283,13 +1238,13 @@ pre { .table-primary, .table-primary > th, .table-primary > td { - background-color: #bceaf7; } + background-color: #b8d8e9; } .table-hover .table-primary:hover { - background-color: #a5e3f4; } + background-color: #a5cde3; } .table-hover .table-primary:hover > td, .table-hover .table-primary:hover > th { - background-color: #a5e3f4; } + background-color: #a5cde3; } .table-secondary, .table-secondary > th, @@ -1413,41 +1368,41 @@ pre { .table-dark.table-hover tbody tr:hover { background-color: rgba(255, 255, 255, 0.075); } -@media (max-width: 575px) { +@media (max-width: 575.98px) { .table-responsive-sm { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; } - .table-responsive-sm.table-bordered { + .table-responsive-sm > .table-bordered { border: 0; } } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .table-responsive-md { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; } - .table-responsive-md.table-bordered { + .table-responsive-md > .table-bordered { border: 0; } } -@media (max-width: 991px) { +@media (max-width: 991.98px) { .table-responsive-lg { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; } - .table-responsive-lg.table-bordered { + .table-responsive-lg > .table-bordered { border: 0; } } -@media (max-width: 1199px) { +@media (max-width: 1199.98px) { .table-responsive-xl { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; } - .table-responsive-xl.table-bordered { + .table-responsive-xl > .table-bordered { border: 0; } } .table-responsive { display: block; @@ -1455,7 +1410,7 @@ pre { overflow-x: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; } - .table-responsive.table-bordered { + .table-responsive > .table-bordered { border: 0; } .form-control { @@ -1466,7 +1421,6 @@ pre { line-height: 1.5; color: #495057; background-color: #fff; - background-image: none; background-clip: padding-box; border: 1px solid #ced4da; border-radius: 0.25rem; @@ -1478,9 +1432,9 @@ pre { .form-control:focus { color: #495057; background-color: #fff; - border-color: #11b3e3; - outline: none; - box-shadow: inset 0 1px 2px rgba(216, 221, 230, 0.4), 0 0 0 0.2rem rgba(17, 179, 227, 0.25); } + border-color: #0072b1; + outline: 0; + box-shadow: inset 0 1px 2px rgba(216, 221, 230, 0.4), 0 0 0 0.15rem rgba(0, 114, 177, 0.25); } .form-control::placeholder { color: #868e96; opacity: 1; } @@ -1496,12 +1450,14 @@ select.form-control:focus::-ms-value { .form-control-file, .form-control-range { - display: block; } + display: block; + width: 100%; } .col-form-label { padding-top: calc(0.375rem + 1px); padding-bottom: calc(0.375rem + 1px); margin-bottom: 0; + font-size: inherit; line-height: 1.5; } .col-form-label-lg { @@ -1516,13 +1472,9 @@ select.form-control:focus::-ms-value { font-size: 0.875rem; line-height: 1.5; } -.col-form-legend { - padding-top: 0.375rem; - padding-bottom: 0.375rem; - margin-bottom: 0; - font-size: 1rem; } - .form-control-plaintext { + display: block; + width: 100%; padding-top: 0.375rem; padding-bottom: 0.375rem; margin-bottom: 0; @@ -1531,37 +1483,49 @@ select.form-control:focus::-ms-value { border: solid transparent; border-width: 1px 0; } .form-control-plaintext.form-control-sm, .input-group-sm > .form-control-plaintext.form-control, - .input-group-sm > .form-control-plaintext.input-group-addon, - .input-group-sm > .input-group-btn > .form-control-plaintext.btn, .form-control-plaintext.form-control-lg, .input-group-lg > .form-control-plaintext.form-control, - .input-group-lg > .form-control-plaintext.input-group-addon, - .input-group-lg > .input-group-btn > .form-control-plaintext.btn { + .input-group-sm > .input-group-prepend > .form-control-plaintext.input-group-text, + .input-group-sm > .input-group-append > .form-control-plaintext.input-group-text, + .input-group-sm > .input-group-prepend > .form-control-plaintext.btn, + .input-group-sm > .input-group-append > .form-control-plaintext.btn, .form-control-plaintext.form-control-lg, .input-group-lg > .form-control-plaintext.form-control, + .input-group-lg > .input-group-prepend > .form-control-plaintext.input-group-text, + .input-group-lg > .input-group-append > .form-control-plaintext.input-group-text, + .input-group-lg > .input-group-prepend > .form-control-plaintext.btn, + .input-group-lg > .input-group-append > .form-control-plaintext.btn { padding-right: 0; padding-left: 0; } .form-control-sm, .input-group-sm > .form-control, -.input-group-sm > .input-group-addon, -.input-group-sm > .input-group-btn > .btn { +.input-group-sm > .input-group-prepend > .input-group-text, +.input-group-sm > .input-group-append > .input-group-text, +.input-group-sm > .input-group-prepend > .btn, +.input-group-sm > .input-group-append > .btn { padding: 0.25rem 0.5rem; font-size: 0.875rem; line-height: 1.5; border-radius: 0.2rem; } select.form-control-sm:not([size]):not([multiple]), .input-group-sm > select.form-control:not([size]):not([multiple]), -.input-group-sm > select.input-group-addon:not([size]):not([multiple]), -.input-group-sm > .input-group-btn > select.btn:not([size]):not([multiple]) { +.input-group-sm > .input-group-prepend > select.input-group-text:not([size]):not([multiple]), +.input-group-sm > .input-group-append > select.input-group-text:not([size]):not([multiple]), +.input-group-sm > .input-group-prepend > select.btn:not([size]):not([multiple]), +.input-group-sm > .input-group-append > select.btn:not([size]):not([multiple]) { height: calc(1.8125rem + 2px); } .form-control-lg, .input-group-lg > .form-control, -.input-group-lg > .input-group-addon, -.input-group-lg > .input-group-btn > .btn { +.input-group-lg > .input-group-prepend > .input-group-text, +.input-group-lg > .input-group-append > .input-group-text, +.input-group-lg > .input-group-prepend > .btn, +.input-group-lg > .input-group-append > .btn { padding: 0.5rem 1rem; font-size: 1.25rem; line-height: 1.5; border-radius: 0.3rem; } select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.form-control:not([size]):not([multiple]), -.input-group-lg > select.input-group-addon:not([size]):not([multiple]), -.input-group-lg > .input-group-btn > select.btn:not([size]):not([multiple]) { +.input-group-lg > .input-group-prepend > select.input-group-text:not([size]):not([multiple]), +.input-group-lg > .input-group-append > select.input-group-text:not([size]):not([multiple]), +.input-group-lg > .input-group-prepend > select.btn:not([size]):not([multiple]), +.input-group-lg > .input-group-append > select.btn:not([size]):not([multiple]) { height: calc(2.875rem + 2px); } .form-group { @@ -1584,29 +1548,34 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for .form-check { position: relative; display: block; - margin-bottom: 0.5rem; } - .form-check.disabled .form-check-label { - color: #868e96; } - -.form-check-label { - padding-left: 1.25rem; - margin-bottom: 0; } + padding-left: 1.25rem; } .form-check-input { position: absolute; margin-top: 0.25rem; margin-left: -1.25rem; } + .form-check-input:disabled ~ .form-check-label { + color: #868e96; } + +.form-check-label { + margin-bottom: 0; } .form-check-inline { - display: inline-block; + display: inline-flex; + align-items: center; + padding-left: 0; margin-right: 0.75rem; } - .form-check-inline .form-check-label { - vertical-align: middle; } + .form-check-inline .form-check-input { + position: static; + margin-top: 0; + margin-right: 0.3125rem; + margin-left: 0; } .valid-feedback { display: none; - margin-top: .25rem; - font-size: .875rem; + width: 100%; + margin-top: 0.25rem; + font-size: 80%; color: #008761; } .valid-tooltip { @@ -1614,7 +1583,7 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for top: 100%; z-index: 5; display: none; - width: 250px; + max-width: 100%; padding: .5rem; margin-top: .1rem; font-size: .875rem; @@ -1630,7 +1599,8 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for .was-validated .form-control:valid:focus, .form-control.is-valid:focus, .was-validated .custom-select:valid:focus, .custom-select.is-valid:focus { - box-shadow: 0 0 0 0.2rem rgba(0, 135, 97, 0.25); } + border-color: #008761; + box-shadow: 0 0 0 0.15rem rgba(0, 135, 97, 0.25); } .was-validated .form-control:valid ~ .valid-feedback, .was-validated .form-control:valid ~ .valid-tooltip, .form-control.is-valid ~ .valid-feedback, .form-control.is-valid ~ .valid-tooltip, @@ -1640,25 +1610,42 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for .custom-select.is-valid ~ .valid-tooltip { display: block; } -.was-validated .form-check-input:valid + .form-check-label, .form-check-input.is-valid + .form-check-label { +.was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label { color: #008761; } +.was-validated .form-check-input:valid ~ .valid-feedback, +.was-validated .form-check-input:valid ~ .valid-tooltip, .form-check-input.is-valid ~ .valid-feedback, +.form-check-input.is-valid ~ .valid-tooltip { + display: block; } -.was-validated .custom-control-input:valid ~ .custom-control-indicator, .custom-control-input.is-valid ~ .custom-control-indicator { - background-color: rgba(0, 135, 97, 0.25); } -.was-validated .custom-control-input:valid ~ .custom-control-description, .custom-control-input.is-valid ~ .custom-control-description { +.was-validated .custom-control-input:valid ~ .custom-control-label, .custom-control-input.is-valid ~ .custom-control-label { color: #008761; } + .was-validated .custom-control-input:valid ~ .custom-control-label::before, .custom-control-input.is-valid ~ .custom-control-label::before { + background-color: #08ffb9; } +.was-validated .custom-control-input:valid ~ .valid-feedback, +.was-validated .custom-control-input:valid ~ .valid-tooltip, .custom-control-input.is-valid ~ .valid-feedback, +.custom-control-input.is-valid ~ .valid-tooltip { + display: block; } +.was-validated .custom-control-input:valid:checked ~ .custom-control-label::before, .custom-control-input.is-valid:checked ~ .custom-control-label::before { + background-color: #00ba86; } +.was-validated .custom-control-input:valid:focus ~ .custom-control-label::before, .custom-control-input.is-valid:focus ~ .custom-control-label::before { + box-shadow: 0 0 0 1px #f5f7fa, 0 0 0 0.15rem rgba(0, 135, 97, 0.25); } -.was-validated .custom-file-input:valid ~ .custom-file-control, .custom-file-input.is-valid ~ .custom-file-control { +.was-validated .custom-file-input:valid ~ .custom-file-label, .custom-file-input.is-valid ~ .custom-file-label { border-color: #008761; } - .was-validated .custom-file-input:valid ~ .custom-file-control::before, .custom-file-input.is-valid ~ .custom-file-control::before { + .was-validated .custom-file-input:valid ~ .custom-file-label::before, .custom-file-input.is-valid ~ .custom-file-label::before { border-color: inherit; } -.was-validated .custom-file-input:valid:focus, .custom-file-input.is-valid:focus { - box-shadow: 0 0 0 0.2rem rgba(0, 135, 97, 0.25); } +.was-validated .custom-file-input:valid ~ .valid-feedback, +.was-validated .custom-file-input:valid ~ .valid-tooltip, .custom-file-input.is-valid ~ .valid-feedback, +.custom-file-input.is-valid ~ .valid-tooltip { + display: block; } +.was-validated .custom-file-input:valid:focus ~ .custom-file-label, .custom-file-input.is-valid:focus ~ .custom-file-label { + box-shadow: 0 0 0 0.15rem rgba(0, 135, 97, 0.25); } .invalid-feedback { display: none; - margin-top: .25rem; - font-size: .875rem; + width: 100%; + margin-top: 0.25rem; + font-size: 80%; color: #e21c2c; } .invalid-tooltip { @@ -1666,7 +1653,7 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for top: 100%; z-index: 5; display: none; - width: 250px; + max-width: 100%; padding: .5rem; margin-top: .1rem; font-size: .875rem; @@ -1682,7 +1669,8 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for .was-validated .form-control:invalid:focus, .form-control.is-invalid:focus, .was-validated .custom-select:invalid:focus, .custom-select.is-invalid:focus { - box-shadow: 0 0 0 0.2rem rgba(226, 28, 44, 0.25); } + border-color: #e21c2c; + box-shadow: 0 0 0 0.15rem rgba(226, 28, 44, 0.25); } .was-validated .form-control:invalid ~ .invalid-feedback, .was-validated .form-control:invalid ~ .invalid-tooltip, .form-control.is-invalid ~ .invalid-feedback, .form-control.is-invalid ~ .invalid-tooltip, @@ -1692,20 +1680,36 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for .custom-select.is-invalid ~ .invalid-tooltip { display: block; } -.was-validated .form-check-input:invalid + .form-check-label, .form-check-input.is-invalid + .form-check-label { +.was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label { color: #e21c2c; } +.was-validated .form-check-input:invalid ~ .invalid-feedback, +.was-validated .form-check-input:invalid ~ .invalid-tooltip, .form-check-input.is-invalid ~ .invalid-feedback, +.form-check-input.is-invalid ~ .invalid-tooltip { + display: block; } -.was-validated .custom-control-input:invalid ~ .custom-control-indicator, .custom-control-input.is-invalid ~ .custom-control-indicator { - background-color: rgba(226, 28, 44, 0.25); } -.was-validated .custom-control-input:invalid ~ .custom-control-description, .custom-control-input.is-invalid ~ .custom-control-description { +.was-validated .custom-control-input:invalid ~ .custom-control-label, .custom-control-input.is-invalid ~ .custom-control-label { color: #e21c2c; } + .was-validated .custom-control-input:invalid ~ .custom-control-label::before, .custom-control-input.is-invalid ~ .custom-control-label::before { + background-color: #f18d95; } +.was-validated .custom-control-input:invalid ~ .invalid-feedback, +.was-validated .custom-control-input:invalid ~ .invalid-tooltip, .custom-control-input.is-invalid ~ .invalid-feedback, +.custom-control-input.is-invalid ~ .invalid-tooltip { + display: block; } +.was-validated .custom-control-input:invalid:checked ~ .custom-control-label::before, .custom-control-input.is-invalid:checked ~ .custom-control-label::before { + background-color: #e84956; } +.was-validated .custom-control-input:invalid:focus ~ .custom-control-label::before, .custom-control-input.is-invalid:focus ~ .custom-control-label::before { + box-shadow: 0 0 0 1px #f5f7fa, 0 0 0 0.15rem rgba(226, 28, 44, 0.25); } -.was-validated .custom-file-input:invalid ~ .custom-file-control, .custom-file-input.is-invalid ~ .custom-file-control { +.was-validated .custom-file-input:invalid ~ .custom-file-label, .custom-file-input.is-invalid ~ .custom-file-label { border-color: #e21c2c; } - .was-validated .custom-file-input:invalid ~ .custom-file-control::before, .custom-file-input.is-invalid ~ .custom-file-control::before { + .was-validated .custom-file-input:invalid ~ .custom-file-label::before, .custom-file-input.is-invalid ~ .custom-file-label::before { border-color: inherit; } -.was-validated .custom-file-input:invalid:focus, .custom-file-input.is-invalid:focus { - box-shadow: 0 0 0 0.2rem rgba(226, 28, 44, 0.25); } +.was-validated .custom-file-input:invalid ~ .invalid-feedback, +.was-validated .custom-file-input:invalid ~ .invalid-tooltip, .custom-file-input.is-invalid ~ .invalid-feedback, +.custom-file-input.is-invalid ~ .invalid-tooltip { + display: block; } +.was-validated .custom-file-input:invalid:focus ~ .custom-file-label, .custom-file-input.is-invalid:focus ~ .custom-file-label { + box-shadow: 0 0 0 0.15rem rgba(226, 28, 44, 0.25); } .form-inline { display: flex; @@ -1738,9 +1742,6 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for align-items: center; justify-content: center; width: auto; - margin-top: 0; - margin-bottom: 0; } - .form-inline .form-check-label { padding-left: 0; } .form-inline .form-check-input { position: relative; @@ -1748,17 +1749,10 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for margin-right: 0.25rem; margin-left: 0; } .form-inline .custom-control { - display: flex; align-items: center; - justify-content: center; - padding-left: 0; } - .form-inline .custom-control-indicator { - position: static; - display: inline-block; - margin-right: 0.25rem; - vertical-align: text-bottom; } - .form-inline .has-feedback .form-control-feedback { - top: 0; } } + justify-content: center; } + .form-inline .custom-control-label { + margin-bottom: 0; } } .btn { display: inline-block; @@ -1768,237 +1762,249 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for vertical-align: middle; user-select: none; border: 1px solid transparent; - padding: 0.375rem 0.75rem; + padding: 0.4375rem 0.8125rem; font-size: 1rem; line-height: 1.5; border-radius: 0.25rem; transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } - .btn:focus { - text-decoration: none; } - .btn:hover { + .btn:hover, .btn:focus { text-decoration: none; } .btn:focus, .btn.focus { outline: 0; - box-shadow: 0 0 0 0.2rem rgba(17, 179, 227, 0.25); } + box-shadow: 0 0 0 3px rgba(0, 114, 177, 0.25); } .btn.disabled, .btn:disabled { - opacity: .65; + opacity: 0.65; box-shadow: none; } - .btn:not([disabled]):not(.disabled):active, .btn:not([disabled]):not(.disabled).active { + .btn:not(:disabled):not(.disabled) { + cursor: pointer; } + .btn:not(:disabled):not(.disabled):active, .btn:not(:disabled):not(.disabled).active { background-image: none; - box-shadow: 0 0 0 0.2rem rgba(17, 179, 227, 0.25), inset 0 3px 5px rgba(0, 0, 0, 0.125); } + box-shadow: 0 3px 5px rgba(0, 0, 0, 0.125); } + .btn:not(:disabled):not(.disabled):active:focus, .btn:not(:disabled):not(.disabled).active:focus { + box-shadow: 0 0 0 3px rgba(0, 114, 177, 0.25), 0 3px 5px rgba(0, 0, 0, 0.125); } a.btn.disabled, -fieldset[disabled] a.btn { +fieldset:disabled a.btn { pointer-events: none; } .btn-primary { color: #fff; - background: #11b3e3 linear-gradient(180deg, #33bde6, #11b3e3) repeat-x; - border-color: #11b3e3; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); } + background-color: #0072b1; + border-color: #0072b1; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); } .btn-primary:hover { color: #fff; - background: #0e97bf linear-gradient(180deg, #31a5c8, #0e97bf) repeat-x; - border-color: #0d8eb4; } + background-color: #00598b; + border-color: #00517e; } .btn-primary:focus, .btn-primary.focus { - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.2rem rgba(17, 179, 227, 0.5); } + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.15rem rgba(0, 114, 177, 0.5); } .btn-primary.disabled, .btn-primary:disabled { - background-color: #11b3e3; - border-color: #11b3e3; } - .btn-primary:not([disabled]):not(.disabled):active, .btn-primary:not([disabled]):not(.disabled).active, .show > .btn-primary.dropdown-toggle { color: #fff; - background-color: #0d8eb4; - background-image: none; - border-color: #0d84a8; - box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.2rem rgba(17, 179, 227, 0.5); } + background-color: #0072b1; + border-color: #0072b1; } + .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle { + color: #fff; + background-color: #00517e; + border-color: #004971; } + .btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-primary.dropdown-toggle:focus { + box-shadow: 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.15rem rgba(0, 114, 177, 0.5); } .btn-secondary { color: #fff; - background: #868e96 linear-gradient(180deg, #979ea5, #868e96) repeat-x; + background-color: #868e96; border-color: #868e96; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); } + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); } .btn-secondary:hover { color: #fff; - background: #727b84 linear-gradient(180deg, #868e96, #727b84) repeat-x; + background-color: #727b84; border-color: #6c757d; } .btn-secondary:focus, .btn-secondary.focus { - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.2rem rgba(134, 142, 150, 0.5); } + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.15rem rgba(134, 142, 150, 0.5); } .btn-secondary.disabled, .btn-secondary:disabled { + color: #fff; background-color: #868e96; border-color: #868e96; } - .btn-secondary:not([disabled]):not(.disabled):active, .btn-secondary:not([disabled]):not(.disabled).active, .show > .btn-secondary.dropdown-toggle { + .btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active, .show > .btn-secondary.dropdown-toggle { color: #fff; background-color: #6c757d; - background-image: none; - border-color: #666e76; - box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.2rem rgba(134, 142, 150, 0.5); } + border-color: #666e76; } + .btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus, .show > .btn-secondary.dropdown-toggle:focus { + box-shadow: 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.15rem rgba(134, 142, 150, 0.5); } .btn-success { color: #fff; - background: #008761 linear-gradient(180deg, #259878, #008761) repeat-x; + background-color: #008761; border-color: #008761; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); } + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); } .btn-success:hover { color: #fff; - background: #006146 linear-gradient(180deg, #257861, #006146) repeat-x; + background-color: #006146; border-color: #00543c; } .btn-success:focus, .btn-success.focus { - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.2rem rgba(0, 135, 97, 0.5); } + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.15rem rgba(0, 135, 97, 0.5); } .btn-success.disabled, .btn-success:disabled { + color: #fff; background-color: #008761; border-color: #008761; } - .btn-success:not([disabled]):not(.disabled):active, .btn-success:not([disabled]):not(.disabled).active, .show > .btn-success.dropdown-toggle { + .btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active, .show > .btn-success.dropdown-toggle { color: #fff; background-color: #00543c; - background-image: none; - border-color: #004733; - box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.2rem rgba(0, 135, 97, 0.5); } + border-color: #004733; } + .btn-success:not(:disabled):not(.disabled):active:focus, .btn-success:not(:disabled):not(.disabled).active:focus, .show > .btn-success.dropdown-toggle:focus { + box-shadow: 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.15rem rgba(0, 135, 97, 0.5); } .btn-info { - color: #111; - background: #bfdbf7 linear-gradient(180deg, #c7dff7, #bfdbf7) repeat-x; + color: #212529; + background-color: #bfdbf7; border-color: #bfdbf7; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); } + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); } .btn-info:hover { - color: #111; - background: #9dc8f3 linear-gradient(180deg, #aacff4, #9dc8f3) repeat-x; + color: #212529; + background-color: #9dc8f3; border-color: #92c2f1; } .btn-info:focus, .btn-info.focus { - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.2rem rgba(191, 219, 247, 0.5); } + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.15rem rgba(191, 219, 247, 0.5); } .btn-info.disabled, .btn-info:disabled { + color: #212529; background-color: #bfdbf7; border-color: #bfdbf7; } - .btn-info:not([disabled]):not(.disabled):active, .btn-info:not([disabled]):not(.disabled).active, .show > .btn-info.dropdown-toggle { - color: #111; + .btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled).active, .show > .btn-info.dropdown-toggle { + color: #212529; background-color: #92c2f1; - background-image: none; - border-color: #86bbf0; - box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.2rem rgba(191, 219, 247, 0.5); } + border-color: #86bbf0; } + .btn-info:not(:disabled):not(.disabled):active:focus, .btn-info:not(:disabled):not(.disabled).active:focus, .show > .btn-info.dropdown-toggle:focus { + box-shadow: 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.15rem rgba(191, 219, 247, 0.5); } .btn-warning { - color: #111; - background: #f3bf51 linear-gradient(180deg, #f3c76a, #f3bf51) repeat-x; + color: #212529; + background-color: #f3bf51; border-color: #f3bf51; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); } + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); } .btn-warning:hover { - color: #111; - background: #f1b22d linear-gradient(180deg, #f2bc4c, #f1b22d) repeat-x; + color: #212529; + background-color: #f1b22d; border-color: #f0ad21; } .btn-warning:focus, .btn-warning.focus { - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.2rem rgba(243, 191, 81, 0.5); } + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.15rem rgba(243, 191, 81, 0.5); } .btn-warning.disabled, .btn-warning:disabled { + color: #212529; background-color: #f3bf51; border-color: #f3bf51; } - .btn-warning:not([disabled]):not(.disabled):active, .btn-warning:not([disabled]):not(.disabled).active, .show > .btn-warning.dropdown-toggle { - color: #111; + .btn-warning:not(:disabled):not(.disabled):active, .btn-warning:not(:disabled):not(.disabled).active, .show > .btn-warning.dropdown-toggle { + color: #212529; background-color: #f0ad21; - background-image: none; - border-color: #efa915; - box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.2rem rgba(243, 191, 81, 0.5); } + border-color: #efa915; } + .btn-warning:not(:disabled):not(.disabled):active:focus, .btn-warning:not(:disabled):not(.disabled).active:focus, .show > .btn-warning.dropdown-toggle:focus { + box-shadow: 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.15rem rgba(243, 191, 81, 0.5); } .btn-danger { color: #fff; - background: #e21c2c linear-gradient(180deg, #e53d4b, #e21c2c) repeat-x; + background-color: #e21c2c; border-color: #e21c2c; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); } + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); } .btn-danger:hover { color: #fff; - background: #c01825 linear-gradient(180deg, #c83945, #c01825) repeat-x; + background-color: #c01825; border-color: #b51623; } .btn-danger:focus, .btn-danger.focus { - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.2rem rgba(226, 28, 44, 0.5); } + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.15rem rgba(226, 28, 44, 0.5); } .btn-danger.disabled, .btn-danger:disabled { + color: #fff; background-color: #e21c2c; border-color: #e21c2c; } - .btn-danger:not([disabled]):not(.disabled):active, .btn-danger:not([disabled]):not(.disabled).active, .show > .btn-danger.dropdown-toggle { + .btn-danger:not(:disabled):not(.disabled):active, .btn-danger:not(:disabled):not(.disabled).active, .show > .btn-danger.dropdown-toggle { color: #fff; background-color: #b51623; - background-image: none; - border-color: #a91521; - box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.2rem rgba(226, 28, 44, 0.5); } + border-color: #a91521; } + .btn-danger:not(:disabled):not(.disabled):active:focus, .btn-danger:not(:disabled):not(.disabled).active:focus, .show > .btn-danger.dropdown-toggle:focus { + box-shadow: 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.15rem rgba(226, 28, 44, 0.5); } .btn-light { - color: #111; - background: #f5f7fa linear-gradient(180deg, #f5f7fa, #f5f7fa) repeat-x; + color: #212529; + background-color: #f5f7fa; border-color: #f5f7fa; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); } + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); } .btn-light:hover { - color: #111; - background: #dce3ed linear-gradient(180deg, #e0e6ef, #dce3ed) repeat-x; + color: #212529; + background-color: #dce3ed; border-color: #d3dce9; } .btn-light:focus, .btn-light.focus { - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.2rem rgba(245, 247, 250, 0.5); } + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.15rem rgba(245, 247, 250, 0.5); } .btn-light.disabled, .btn-light:disabled { + color: #212529; background-color: #f5f7fa; border-color: #f5f7fa; } - .btn-light:not([disabled]):not(.disabled):active, .btn-light:not([disabled]):not(.disabled).active, .show > .btn-light.dropdown-toggle { - color: #111; + .btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled).active, .show > .btn-light.dropdown-toggle { + color: #212529; background-color: #d3dce9; - background-image: none; - border-color: #cbd5e5; - box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.2rem rgba(245, 247, 250, 0.5); } + border-color: #cbd5e5; } + .btn-light:not(:disabled):not(.disabled):active:focus, .btn-light:not(:disabled):not(.disabled).active:focus, .show > .btn-light.dropdown-toggle:focus { + box-shadow: 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.15rem rgba(245, 247, 250, 0.5); } .btn-dark { color: #fff; - background: #343a40 linear-gradient(180deg, #51565c, #343a40) repeat-x; + background-color: #343a40; border-color: #343a40; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); } + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); } .btn-dark:hover { color: #fff; - background: #23272b linear-gradient(180deg, #43464a, #23272b) repeat-x; + background-color: #23272b; border-color: #1d2124; } .btn-dark:focus, .btn-dark.focus { - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.2rem rgba(52, 58, 64, 0.5); } + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.15rem rgba(52, 58, 64, 0.5); } .btn-dark.disabled, .btn-dark:disabled { + color: #fff; background-color: #343a40; border-color: #343a40; } - .btn-dark:not([disabled]):not(.disabled):active, .btn-dark:not([disabled]):not(.disabled).active, .show > .btn-dark.dropdown-toggle { + .btn-dark:not(:disabled):not(.disabled):active, .btn-dark:not(:disabled):not(.disabled).active, .show > .btn-dark.dropdown-toggle { color: #fff; background-color: #1d2124; - background-image: none; - border-color: #171a1d; - box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.2rem rgba(52, 58, 64, 0.5); } + border-color: #171a1d; } + .btn-dark:not(:disabled):not(.disabled):active:focus, .btn-dark:not(:disabled):not(.disabled).active:focus, .show > .btn-dark.dropdown-toggle:focus { + box-shadow: 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.15rem rgba(52, 58, 64, 0.5); } .btn-alert { color: #fff; - background: #e21c2c linear-gradient(180deg, #e53d4b, #e21c2c) repeat-x; + background-color: #e21c2c; border-color: #e21c2c; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); } + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); } .btn-alert:hover { color: #fff; - background: #c01825 linear-gradient(180deg, #c83945, #c01825) repeat-x; + background-color: #c01825; border-color: #b51623; } .btn-alert:focus, .btn-alert.focus { - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.2rem rgba(226, 28, 44, 0.5); } + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.15rem rgba(226, 28, 44, 0.5); } .btn-alert.disabled, .btn-alert:disabled { + color: #fff; background-color: #e21c2c; border-color: #e21c2c; } - .btn-alert:not([disabled]):not(.disabled):active, .btn-alert:not([disabled]):not(.disabled).active, .show > .btn-alert.dropdown-toggle { + .btn-alert:not(:disabled):not(.disabled):active, .btn-alert:not(:disabled):not(.disabled).active, .show > .btn-alert.dropdown-toggle { color: #fff; background-color: #b51623; - background-image: none; - border-color: #a91521; - box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.2rem rgba(226, 28, 44, 0.5); } + border-color: #a91521; } + .btn-alert:not(:disabled):not(.disabled):active:focus, .btn-alert:not(:disabled):not(.disabled).active:focus, .show > .btn-alert.dropdown-toggle:focus { + box-shadow: 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.15rem rgba(226, 28, 44, 0.5); } .btn-outline-primary { - color: #11b3e3; + color: #0072b1; background-color: transparent; background-image: none; - border-color: #11b3e3; } + border-color: #0072b1; } .btn-outline-primary:hover { color: #fff; - background-color: #11b3e3; - border-color: #11b3e3; } + background-color: #0072b1; + border-color: #0072b1; } .btn-outline-primary:focus, .btn-outline-primary.focus { - box-shadow: 0 0 0 0.2rem rgba(17, 179, 227, 0.5); } + box-shadow: 0 0 0 0.15rem rgba(0, 114, 177, 0.5); } .btn-outline-primary.disabled, .btn-outline-primary:disabled { - color: #11b3e3; + color: #0072b1; background-color: transparent; } - .btn-outline-primary:not([disabled]):not(.disabled):active, .btn-outline-primary:not([disabled]):not(.disabled).active, .show > .btn-outline-primary.dropdown-toggle { + .btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active, .show > .btn-outline-primary.dropdown-toggle { color: #fff; - background-color: #11b3e3; - border-color: #11b3e3; - box-shadow: 0 0 0 0.2rem rgba(17, 179, 227, 0.5); } + background-color: #0072b1; + border-color: #0072b1; } + .btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-primary.dropdown-toggle:focus { + box-shadow: 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.15rem rgba(0, 114, 177, 0.5); } .btn-outline-secondary { color: #868e96; @@ -2010,15 +2016,16 @@ fieldset[disabled] a.btn { background-color: #868e96; border-color: #868e96; } .btn-outline-secondary:focus, .btn-outline-secondary.focus { - box-shadow: 0 0 0 0.2rem rgba(134, 142, 150, 0.5); } + box-shadow: 0 0 0 0.15rem rgba(134, 142, 150, 0.5); } .btn-outline-secondary.disabled, .btn-outline-secondary:disabled { color: #868e96; background-color: transparent; } - .btn-outline-secondary:not([disabled]):not(.disabled):active, .btn-outline-secondary:not([disabled]):not(.disabled).active, .show > .btn-outline-secondary.dropdown-toggle { + .btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active, .show > .btn-outline-secondary.dropdown-toggle { color: #fff; background-color: #868e96; - border-color: #868e96; - box-shadow: 0 0 0 0.2rem rgba(134, 142, 150, 0.5); } + border-color: #868e96; } + .btn-outline-secondary:not(:disabled):not(.disabled):active:focus, .btn-outline-secondary:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-secondary.dropdown-toggle:focus { + box-shadow: 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.15rem rgba(134, 142, 150, 0.5); } .btn-outline-success { color: #008761; @@ -2030,15 +2037,16 @@ fieldset[disabled] a.btn { background-color: #008761; border-color: #008761; } .btn-outline-success:focus, .btn-outline-success.focus { - box-shadow: 0 0 0 0.2rem rgba(0, 135, 97, 0.5); } + box-shadow: 0 0 0 0.15rem rgba(0, 135, 97, 0.5); } .btn-outline-success.disabled, .btn-outline-success:disabled { color: #008761; background-color: transparent; } - .btn-outline-success:not([disabled]):not(.disabled):active, .btn-outline-success:not([disabled]):not(.disabled).active, .show > .btn-outline-success.dropdown-toggle { + .btn-outline-success:not(:disabled):not(.disabled):active, .btn-outline-success:not(:disabled):not(.disabled).active, .show > .btn-outline-success.dropdown-toggle { color: #fff; background-color: #008761; - border-color: #008761; - box-shadow: 0 0 0 0.2rem rgba(0, 135, 97, 0.5); } + border-color: #008761; } + .btn-outline-success:not(:disabled):not(.disabled):active:focus, .btn-outline-success:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-success.dropdown-toggle:focus { + box-shadow: 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.15rem rgba(0, 135, 97, 0.5); } .btn-outline-info { color: #bfdbf7; @@ -2046,19 +2054,20 @@ fieldset[disabled] a.btn { background-image: none; border-color: #bfdbf7; } .btn-outline-info:hover { - color: #fff; + color: #212529; background-color: #bfdbf7; border-color: #bfdbf7; } .btn-outline-info:focus, .btn-outline-info.focus { - box-shadow: 0 0 0 0.2rem rgba(191, 219, 247, 0.5); } + box-shadow: 0 0 0 0.15rem rgba(191, 219, 247, 0.5); } .btn-outline-info.disabled, .btn-outline-info:disabled { color: #bfdbf7; background-color: transparent; } - .btn-outline-info:not([disabled]):not(.disabled):active, .btn-outline-info:not([disabled]):not(.disabled).active, .show > .btn-outline-info.dropdown-toggle { - color: #fff; + .btn-outline-info:not(:disabled):not(.disabled):active, .btn-outline-info:not(:disabled):not(.disabled).active, .show > .btn-outline-info.dropdown-toggle { + color: #212529; background-color: #bfdbf7; - border-color: #bfdbf7; - box-shadow: 0 0 0 0.2rem rgba(191, 219, 247, 0.5); } + border-color: #bfdbf7; } + .btn-outline-info:not(:disabled):not(.disabled):active:focus, .btn-outline-info:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-info.dropdown-toggle:focus { + box-shadow: 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.15rem rgba(191, 219, 247, 0.5); } .btn-outline-warning { color: #f3bf51; @@ -2066,19 +2075,20 @@ fieldset[disabled] a.btn { background-image: none; border-color: #f3bf51; } .btn-outline-warning:hover { - color: #fff; + color: #212529; background-color: #f3bf51; border-color: #f3bf51; } .btn-outline-warning:focus, .btn-outline-warning.focus { - box-shadow: 0 0 0 0.2rem rgba(243, 191, 81, 0.5); } + box-shadow: 0 0 0 0.15rem rgba(243, 191, 81, 0.5); } .btn-outline-warning.disabled, .btn-outline-warning:disabled { color: #f3bf51; background-color: transparent; } - .btn-outline-warning:not([disabled]):not(.disabled):active, .btn-outline-warning:not([disabled]):not(.disabled).active, .show > .btn-outline-warning.dropdown-toggle { - color: #fff; + .btn-outline-warning:not(:disabled):not(.disabled):active, .btn-outline-warning:not(:disabled):not(.disabled).active, .show > .btn-outline-warning.dropdown-toggle { + color: #212529; background-color: #f3bf51; - border-color: #f3bf51; - box-shadow: 0 0 0 0.2rem rgba(243, 191, 81, 0.5); } + border-color: #f3bf51; } + .btn-outline-warning:not(:disabled):not(.disabled):active:focus, .btn-outline-warning:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-warning.dropdown-toggle:focus { + box-shadow: 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.15rem rgba(243, 191, 81, 0.5); } .btn-outline-danger { color: #e21c2c; @@ -2090,15 +2100,16 @@ fieldset[disabled] a.btn { background-color: #e21c2c; border-color: #e21c2c; } .btn-outline-danger:focus, .btn-outline-danger.focus { - box-shadow: 0 0 0 0.2rem rgba(226, 28, 44, 0.5); } + box-shadow: 0 0 0 0.15rem rgba(226, 28, 44, 0.5); } .btn-outline-danger.disabled, .btn-outline-danger:disabled { color: #e21c2c; background-color: transparent; } - .btn-outline-danger:not([disabled]):not(.disabled):active, .btn-outline-danger:not([disabled]):not(.disabled).active, .show > .btn-outline-danger.dropdown-toggle { + .btn-outline-danger:not(:disabled):not(.disabled):active, .btn-outline-danger:not(:disabled):not(.disabled).active, .show > .btn-outline-danger.dropdown-toggle { color: #fff; background-color: #e21c2c; - border-color: #e21c2c; - box-shadow: 0 0 0 0.2rem rgba(226, 28, 44, 0.5); } + border-color: #e21c2c; } + .btn-outline-danger:not(:disabled):not(.disabled):active:focus, .btn-outline-danger:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-danger.dropdown-toggle:focus { + box-shadow: 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.15rem rgba(226, 28, 44, 0.5); } .btn-outline-light { color: #f5f7fa; @@ -2110,15 +2121,16 @@ fieldset[disabled] a.btn { background-color: #f5f7fa; border-color: #f5f7fa; } .btn-outline-light:focus, .btn-outline-light.focus { - box-shadow: 0 0 0 0.2rem rgba(245, 247, 250, 0.5); } + box-shadow: 0 0 0 0.15rem rgba(245, 247, 250, 0.5); } .btn-outline-light.disabled, .btn-outline-light:disabled { color: #f5f7fa; background-color: transparent; } - .btn-outline-light:not([disabled]):not(.disabled):active, .btn-outline-light:not([disabled]):not(.disabled).active, .show > .btn-outline-light.dropdown-toggle { + .btn-outline-light:not(:disabled):not(.disabled):active, .btn-outline-light:not(:disabled):not(.disabled).active, .show > .btn-outline-light.dropdown-toggle { color: #212529; background-color: #f5f7fa; - border-color: #f5f7fa; - box-shadow: 0 0 0 0.2rem rgba(245, 247, 250, 0.5); } + border-color: #f5f7fa; } + .btn-outline-light:not(:disabled):not(.disabled):active:focus, .btn-outline-light:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-light.dropdown-toggle:focus { + box-shadow: 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.15rem rgba(245, 247, 250, 0.5); } .btn-outline-dark { color: #343a40; @@ -2130,15 +2142,16 @@ fieldset[disabled] a.btn { background-color: #343a40; border-color: #343a40; } .btn-outline-dark:focus, .btn-outline-dark.focus { - box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5); } + box-shadow: 0 0 0 0.15rem rgba(52, 58, 64, 0.5); } .btn-outline-dark.disabled, .btn-outline-dark:disabled { color: #343a40; background-color: transparent; } - .btn-outline-dark:not([disabled]):not(.disabled):active, .btn-outline-dark:not([disabled]):not(.disabled).active, .show > .btn-outline-dark.dropdown-toggle { + .btn-outline-dark:not(:disabled):not(.disabled):active, .btn-outline-dark:not(:disabled):not(.disabled).active, .show > .btn-outline-dark.dropdown-toggle { color: #fff; background-color: #343a40; - border-color: #343a40; - box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5); } + border-color: #343a40; } + .btn-outline-dark:not(:disabled):not(.disabled):active:focus, .btn-outline-dark:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-dark.dropdown-toggle:focus { + box-shadow: 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.15rem rgba(52, 58, 64, 0.5); } .btn-outline-alert { color: #e21c2c; @@ -2150,26 +2163,28 @@ fieldset[disabled] a.btn { background-color: #e21c2c; border-color: #e21c2c; } .btn-outline-alert:focus, .btn-outline-alert.focus { - box-shadow: 0 0 0 0.2rem rgba(226, 28, 44, 0.5); } + box-shadow: 0 0 0 0.15rem rgba(226, 28, 44, 0.5); } .btn-outline-alert.disabled, .btn-outline-alert:disabled { color: #e21c2c; background-color: transparent; } - .btn-outline-alert:not([disabled]):not(.disabled):active, .btn-outline-alert:not([disabled]):not(.disabled).active, .show > .btn-outline-alert.dropdown-toggle { + .btn-outline-alert:not(:disabled):not(.disabled):active, .btn-outline-alert:not(:disabled):not(.disabled).active, .show > .btn-outline-alert.dropdown-toggle { color: #fff; background-color: #e21c2c; - border-color: #e21c2c; - box-shadow: 0 0 0 0.2rem rgba(226, 28, 44, 0.5); } + border-color: #e21c2c; } + .btn-outline-alert:not(:disabled):not(.disabled):active:focus, .btn-outline-alert:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-alert.dropdown-toggle:focus { + box-shadow: 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.15rem rgba(226, 28, 44, 0.5); } .btn-link { font-weight: 400; - color: #11b3e3; + color: #0072b1; background-color: transparent; } .btn-link:hover { - color: #0c7b9c; + color: #004165; text-decoration: underline; background-color: transparent; border-color: transparent; } .btn-link:focus, .btn-link.focus { + text-decoration: underline; border-color: transparent; box-shadow: none; } .btn-link:disabled, .btn-link.disabled { @@ -2190,9 +2205,8 @@ fieldset[disabled] a.btn { .btn-block { display: block; width: 100%; } - -.btn-block + .btn-block { - margin-top: 0.5rem; } + .btn-block + .btn-block { + margin-top: 0.5rem; } input[type="submit"].btn-block, input[type="reset"].btn-block, @@ -2277,6 +2291,51 @@ tbody.collapse.show { .dropup .dropdown-toggle:empty::after { margin-left: 0; } +.dropright .dropdown-menu { + margin-top: 0; + margin-left: 0.125rem; } +.dropright .dropdown-toggle::after { + display: inline-block; + width: 0; + height: 0; + margin-left: 0.255em; + vertical-align: 0.255em; + content: ""; + border-top: 0.3em solid transparent; + border-bottom: 0.3em solid transparent; + border-left: 0.3em solid; } +.dropright .dropdown-toggle:empty::after { + margin-left: 0; } +.dropright .dropdown-toggle::after { + vertical-align: 0; } + +.dropleft .dropdown-menu { + margin-top: 0; + margin-right: 0.125rem; } +.dropleft .dropdown-toggle::after { + display: inline-block; + width: 0; + height: 0; + margin-left: 0.255em; + vertical-align: 0.255em; + content: ""; } +.dropleft .dropdown-toggle::after { + display: none; } +.dropleft .dropdown-toggle::before { + display: inline-block; + width: 0; + height: 0; + margin-right: 0.255em; + vertical-align: 0.255em; + content: ""; + border-top: 0.3em solid transparent; + border-right: 0.3em solid; + border-bottom: 0.3em solid transparent; } +.dropleft .dropdown-toggle:empty::after { + margin-left: 0; } +.dropleft .dropdown-toggle::before { + vertical-align: 0; } + .dropdown-divider { height: 0; margin: 0.5rem 0; @@ -2292,24 +2351,19 @@ tbody.collapse.show { color: #212529; text-align: inherit; white-space: nowrap; - background: none; + background-color: transparent; border: 0; } - .dropdown-item:focus { - color: #16181b; - text-decoration: none; - background: #f5f7fa linear-gradient(180deg, #f5f7fa, #f5f7fa) repeat-x; } - .dropdown-item:hover { + .dropdown-item:hover, .dropdown-item:focus { color: #16181b; text-decoration: none; - background: #f5f7fa linear-gradient(180deg, #f5f7fa, #f5f7fa) repeat-x; } + background-color: #f5f7fa; } .dropdown-item.active, .dropdown-item:active { color: #fff; text-decoration: none; - background: #11b3e3 linear-gradient(180deg, #33bde6, #11b3e3) repeat-x; } + background-color: #0072b1; } .dropdown-item.disabled, .dropdown-item:disabled { color: #868e96; - background-color: transparent; - background-image: none; } + background-color: transparent; } .dropdown-menu.show { display: block; } @@ -2333,12 +2387,12 @@ tbody.collapse.show { flex: 0 1 auto; } .btn-group > .btn:hover, .btn-group-vertical > .btn:hover { - z-index: 2; } + z-index: 1; } .btn-group > .btn:focus, .btn-group > .btn:active, .btn-group > .btn.active, .btn-group-vertical > .btn:focus, .btn-group-vertical > .btn:active, .btn-group-vertical > .btn.active { - z-index: 2; } + z-index: 1; } .btn-group .btn + .btn, .btn-group .btn + .btn-group, .btn-group .btn-group + .btn, @@ -2356,39 +2410,21 @@ tbody.collapse.show { .btn-toolbar .input-group { width: auto; } -.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) { - border-radius: 0; } - .btn-group > .btn:first-child { margin-left: 0; } - .btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) { - border-top-right-radius: 0; - border-bottom-right-radius: 0; } - -.btn-group > .btn:last-child:not(:first-child), -.btn-group > .dropdown-toggle:not(:first-child) { - border-top-left-radius: 0; - border-bottom-left-radius: 0; } - -.btn-group > .btn-group { - float: left; } - -.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn { - border-radius: 0; } - -.btn-group > .btn-group:first-child:not(:last-child) > .btn:last-child, -.btn-group > .btn-group:first-child:not(:last-child) > .dropdown-toggle { +.btn-group > .btn:not(:last-child):not(.dropdown-toggle), +.btn-group > .btn-group:not(:last-child) > .btn { border-top-right-radius: 0; border-bottom-right-radius: 0; } - -.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child { +.btn-group > .btn:not(:first-child), +.btn-group > .btn-group:not(:first-child) > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; } -.btn + .dropdown-toggle-split { - padding-right: 0.5625rem; - padding-left: 0.5625rem; } - .btn + .dropdown-toggle-split::after { +.dropdown-toggle-split { + padding-right: 0.609375rem; + padding-left: 0.609375rem; } + .dropdown-toggle-split::after { margin-left: 0; } .btn-sm + .dropdown-toggle-split, .btn-group-sm > .btn + .dropdown-toggle-split { @@ -2400,7 +2436,7 @@ tbody.collapse.show { padding-left: 0.75rem; } .btn-group.show .dropdown-toggle { - box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); } + box-shadow: 0 3px 5px rgba(0, 0, 0, 0.125); } .btn-group.show .dropdown-toggle.btn-link { box-shadow: none; } @@ -2417,63 +2453,97 @@ tbody.collapse.show { .btn-group-vertical > .btn-group + .btn-group { margin-top: -1px; margin-left: 0; } - .btn-group-vertical > .btn:not(:first-child):not(:last-child) { - border-radius: 0; } - .btn-group-vertical > .btn:first-child:not(:last-child) { + .btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle), + .btn-group-vertical > .btn-group:not(:last-child) > .btn { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } - .btn-group-vertical > .btn:last-child:not(:first-child) { - border-top-left-radius: 0; - border-top-right-radius: 0; } - .btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn { - border-radius: 0; } - .btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child, - .btn-group-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle { - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; } - .btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child { + .btn-group-vertical > .btn:not(:first-child), + .btn-group-vertical > .btn-group:not(:first-child) > .btn { border-top-left-radius: 0; border-top-right-radius: 0; } -[data-toggle="buttons"] > .btn input[type="radio"], -[data-toggle="buttons"] > .btn input[type="checkbox"], -[data-toggle="buttons"] > .btn-group > .btn input[type="radio"], -[data-toggle="buttons"] > .btn-group > .btn input[type="checkbox"] { - position: absolute; - clip: rect(0, 0, 0, 0); - pointer-events: none; } +.btn-group-toggle > .btn, +.btn-group-toggle > .btn-group > .btn { + margin-bottom: 0; } + .btn-group-toggle > .btn input[type="radio"], + .btn-group-toggle > .btn input[type="checkbox"], + .btn-group-toggle > .btn-group > .btn input[type="radio"], + .btn-group-toggle > .btn-group > .btn input[type="checkbox"] { + position: absolute; + clip: rect(0, 0, 0, 0); + pointer-events: none; } .input-group { position: relative; display: flex; + flex-wrap: wrap; align-items: stretch; width: 100%; } - .input-group .form-control { + .input-group > .form-control, + .input-group > .custom-select, + .input-group > .custom-file { position: relative; - z-index: 2; flex: 1 1 auto; width: 1%; margin-bottom: 0; } - .input-group .form-control:focus, .input-group .form-control:active { - z-index: 3; } - .input-group .form-control:hover { + .input-group > .form-control:focus, + .input-group > .custom-select:focus, + .input-group > .custom-file:focus { z-index: 3; } + .input-group > .form-control + .form-control, + .input-group > .form-control + .custom-select, + .input-group > .form-control + .custom-file, + .input-group > .custom-select + .form-control, + .input-group > .custom-select + .custom-select, + .input-group > .custom-select + .custom-file, + .input-group > .custom-file + .form-control, + .input-group > .custom-file + .custom-select, + .input-group > .custom-file + .custom-file { + margin-left: -1px; } + .input-group > .form-control:not(:last-child), + .input-group > .custom-select:not(:last-child) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; } + .input-group > .form-control:not(:first-child), + .input-group > .custom-select:not(:first-child) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; } + .input-group > .custom-file { + display: flex; + align-items: center; } + .input-group > .custom-file:not(:last-child) .custom-file-label, .input-group > .custom-file:not(:last-child) .custom-file-label::before { + border-top-right-radius: 0; + border-bottom-right-radius: 0; } + .input-group > .custom-file:not(:first-child) .custom-file-label, .input-group > .custom-file:not(:first-child) .custom-file-label::before { + border-top-left-radius: 0; + border-bottom-left-radius: 0; } + +.input-group-prepend, +.input-group-append { + display: flex; } + .input-group-prepend .btn, + .input-group-append .btn { + position: relative; + z-index: 2; } + .input-group-prepend .btn + .btn, + .input-group-prepend .btn + .input-group-text, + .input-group-prepend .input-group-text + .input-group-text, + .input-group-prepend .input-group-text + .btn, + .input-group-append .btn + .btn, + .input-group-append .btn + .input-group-text, + .input-group-append .input-group-text + .input-group-text, + .input-group-append .input-group-text + .btn { + margin-left: -1px; } -.input-group-addon, -.input-group-btn, -.input-group .form-control { - display: flex; - align-items: center; } - .input-group-addon:not(:first-child):not(:last-child), - .input-group-btn:not(:first-child):not(:last-child), - .input-group .form-control:not(:first-child):not(:last-child) { - border-radius: 0; } +.input-group-prepend { + margin-right: -1px; } -.input-group-addon, -.input-group-btn { - white-space: nowrap; } +.input-group-append { + margin-left: -1px; } -.input-group-addon { +.input-group-text { + display: flex; + align-items: center; padding: 0.375rem 0.75rem; margin-bottom: 0; font-size: 1rem; @@ -2481,150 +2551,115 @@ tbody.collapse.show { line-height: 1.5; color: #495057; text-align: center; + white-space: nowrap; background-color: #e9ecef; border: 1px solid #ced4da; border-radius: 0.25rem; } - .input-group-addon.form-control-sm, - .input-group-sm > .input-group-addon, - .input-group-sm > .input-group-btn > .input-group-addon.btn { - padding: 0.25rem 0.5rem; - font-size: 0.875rem; - border-radius: 0.2rem; } - .input-group-addon.form-control-lg, - .input-group-lg > .input-group-addon, - .input-group-lg > .input-group-btn > .input-group-addon.btn { - padding: 0.5rem 1rem; - font-size: 1.25rem; - border-radius: 0.3rem; } - .input-group-addon input[type="radio"], - .input-group-addon input[type="checkbox"] { + .input-group-text input[type="radio"], + .input-group-text input[type="checkbox"] { margin-top: 0; } -.input-group .form-control:not(:last-child), -.input-group-addon:not(:last-child), -.input-group-btn:not(:last-child) > .btn, -.input-group-btn:not(:last-child) > .btn-group > .btn, -.input-group-btn:not(:last-child) > .dropdown-toggle, -.input-group-btn:not(:first-child) > .btn:not(:last-child):not(.dropdown-toggle), -.input-group-btn:not(:first-child) > .btn-group:not(:last-child) > .btn { +.input-group > .input-group-prepend > .btn, +.input-group > .input-group-prepend > .input-group-text, +.input-group > .input-group-append:not(:last-child) > .btn, +.input-group > .input-group-append:not(:last-child) > .input-group-text, +.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle), +.input-group > .input-group-append:last-child > .input-group-text:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } -.input-group-addon:not(:last-child) { - border-right: 0; } - -.input-group .form-control:not(:first-child), -.input-group-addon:not(:first-child), -.input-group-btn:not(:first-child) > .btn, -.input-group-btn:not(:first-child) > .btn-group > .btn, -.input-group-btn:not(:first-child) > .dropdown-toggle, -.input-group-btn:not(:last-child) > .btn:not(:first-child), -.input-group-btn:not(:last-child) > .btn-group:not(:first-child) > .btn { +.input-group > .input-group-append > .btn, +.input-group > .input-group-append > .input-group-text, +.input-group > .input-group-prepend:not(:first-child) > .btn, +.input-group > .input-group-prepend:not(:first-child) > .input-group-text, +.input-group > .input-group-prepend:first-child > .btn:not(:first-child), +.input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } -.form-control + .input-group-addon:not(:first-child) { - border-left: 0; } - -.input-group-btn { - position: relative; - align-items: stretch; - font-size: 0; - white-space: nowrap; } - .input-group-btn > .btn { - position: relative; } - .input-group-btn > .btn + .btn { - margin-left: -1px; } - .input-group-btn > .btn:focus, .input-group-btn > .btn:active { - z-index: 3; } - .input-group-btn > .btn:hover { - z-index: 3; } - .input-group-btn:first-child > .btn + .btn { - margin-left: 0; } - .input-group-btn:not(:last-child) > .btn, - .input-group-btn:not(:last-child) > .btn-group { - margin-right: -1px; } - .input-group-btn:not(:first-child) > .btn, - .input-group-btn:not(:first-child) > .btn-group { - z-index: 2; - margin-left: 0; } - .input-group-btn:not(:first-child) > .btn:first-child, - .input-group-btn:not(:first-child) > .btn-group:first-child { - margin-left: -1px; } - .input-group-btn:not(:first-child) > .btn:focus, .input-group-btn:not(:first-child) > .btn:active, - .input-group-btn:not(:first-child) > .btn-group:focus, - .input-group-btn:not(:first-child) > .btn-group:active { - z-index: 3; } - .input-group-btn:not(:first-child) > .btn:hover, - .input-group-btn:not(:first-child) > .btn-group:hover { - z-index: 3; } - .custom-control { position: relative; - display: inline-flex; + display: block; min-height: 1.5rem; - padding-left: 1.5rem; + padding-left: 1.5rem; } + +.custom-control-inline { + display: inline-flex; margin-right: 1rem; } .custom-control-input { position: absolute; z-index: -1; opacity: 0; } - .custom-control-input:checked ~ .custom-control-indicator { + .custom-control-input:checked ~ .custom-control-label::before { color: #fff; - background: #11b3e3 linear-gradient(180deg, #33bde6, #11b3e3) repeat-x; + background-color: #0072b1; box-shadow: none; } - .custom-control-input:focus ~ .custom-control-indicator { - box-shadow: 0 0 0 1px #f5f7fa, 0 0 0 3px #11b3e3; } - .custom-control-input:active ~ .custom-control-indicator { + .custom-control-input:focus ~ .custom-control-label::before { + box-shadow: 0 0 0 1px #f5f7fa, 0 0 0 3px #0072b1; } + .custom-control-input:active ~ .custom-control-label::before { color: #fff; - background: #aee8f9 linear-gradient(180deg, #b9eaf9, #aee8f9) repeat-x; + background-color: #65c8ff; box-shadow: none; } - .custom-control-input:disabled ~ .custom-control-indicator { - background-color: #e9ecef; } - .custom-control-input:disabled ~ .custom-control-description { + .custom-control-input:disabled ~ .custom-control-label { color: #868e96; } + .custom-control-input:disabled ~ .custom-control-label::before { + background-color: #e9ecef; } -.custom-control-indicator { - position: absolute; - top: 0.25rem; - left: 0; - display: block; - width: 1rem; - height: 1rem; - pointer-events: none; - user-select: none; - background-color: #ddd; - background-repeat: no-repeat; - background-position: center center; - background-size: 50% 50%; - box-shadow: inset 0 0.25rem 0.25rem rgba(0, 0, 0, 0.1); } +.custom-control-label { + margin-bottom: 0; } + .custom-control-label::before { + position: absolute; + top: 0.25rem; + left: 0; + display: block; + width: 1rem; + height: 1rem; + pointer-events: none; + content: ""; + user-select: none; + background-color: #ddd; + box-shadow: inset 0 0.25rem 0.25rem rgba(0, 0, 0, 0.1); } + .custom-control-label::after { + position: absolute; + top: 0.25rem; + left: 0; + display: block; + width: 1rem; + height: 1rem; + content: ""; + background-repeat: no-repeat; + background-position: center center; + background-size: 50% 50%; } -.custom-checkbox .custom-control-indicator { +.custom-checkbox .custom-control-label::before { border-radius: 0.25rem; } -.custom-checkbox .custom-control-input:checked ~ .custom-control-indicator { +.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before { + background-color: #0072b1; } +.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"); } -.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-indicator { - background-color: #11b3e3; - background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='%23fff' d='M0 2h4'/%3E%3C/svg%3E"); +.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before { + background-color: #0072b1; box-shadow: none; } - -.custom-radio .custom-control-indicator { +.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::after { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='%23fff' d='M0 2h4'/%3E%3C/svg%3E"); } +.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before { + background-color: rgba(0, 114, 177, 0.5); } +.custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before { + background-color: rgba(0, 114, 177, 0.5); } + +.custom-radio .custom-control-label::before { border-radius: 50%; } -.custom-radio .custom-control-input:checked ~ .custom-control-indicator { +.custom-radio .custom-control-input:checked ~ .custom-control-label::before { + background-color: #0072b1; } +.custom-radio .custom-control-input:checked ~ .custom-control-label::after { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E"); } - -.custom-controls-stacked { - display: flex; - flex-direction: column; } - .custom-controls-stacked .custom-control { - margin-bottom: 0.25rem; } - .custom-controls-stacked .custom-control + .custom-control { - margin-left: 0; } +.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before { + background-color: rgba(0, 114, 177, 0.5); } .custom-select { display: inline-block; - max-width: 100%; + width: 100%; height: calc(2.25rem + 2px); padding: 0.375rem 1.75rem 0.375rem 0.75rem; line-height: 1.5; @@ -2636,14 +2671,15 @@ tbody.collapse.show { border-radius: 0.25rem; appearance: none; } .custom-select:focus { - border-color: #7edaf5; - outline: none; - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(126, 218, 245, 0.5); } + border-color: #0072b1; + outline: 0; + box-shadow: 0 0 0 0.15rem rgba(0, 114, 177, 0.25); } .custom-select:focus::-ms-value { color: #495057; background-color: #fff; } - .custom-select[multiple] { + .custom-select[multiple], .custom-select[size]:not([size="1"]) { height: auto; + padding-right: 0.75rem; background-image: none; } .custom-select:disabled { color: #868e96; @@ -2657,56 +2693,63 @@ tbody.collapse.show { padding-bottom: 0.375rem; font-size: 75%; } +.custom-select-lg { + height: calc(2.875rem + 2px); + padding-top: 0.375rem; + padding-bottom: 0.375rem; + font-size: 125%; } + .custom-file { position: relative; display: inline-block; - max-width: 100%; + width: 100%; height: calc(2.25rem + 2px); margin-bottom: 0; } .custom-file-input { - min-width: 14rem; - max-width: 100%; + position: relative; + z-index: 2; + width: 100%; height: calc(2.25rem + 2px); margin: 0; opacity: 0; } .custom-file-input:focus ~ .custom-file-control { - box-shadow: 0 0 0 0.075rem #fff, 0 0 0 0.2rem #11b3e3; } + border-color: #0072b1; + box-shadow: 0 0 0 0.075rem #fff, 0 0 0 0.2rem #0072b1; } + .custom-file-input:focus ~ .custom-file-control::before { + border-color: #0072b1; } + .custom-file-input:lang(en) ~ .custom-file-label::after { + content: "Browse"; } -.custom-file-control { +.custom-file-label { position: absolute; top: 0; right: 0; left: 0; - z-index: 5; + z-index: 1; height: calc(2.25rem + 2px); padding: 0.375rem 0.75rem; line-height: 1.5; color: #495057; - pointer-events: none; - user-select: none; background-color: #fff; border: 1px solid #ced4da; border-radius: 0.25rem; box-shadow: inset 0 1px 2px rgba(216, 221, 230, 0.4); } - .custom-file-control:lang(en):empty::after { - content: "Choose file..."; } - .custom-file-control::before { + .custom-file-label::after { position: absolute; - top: -1px; - right: -1px; - bottom: -1px; - z-index: 6; + top: 0; + right: 0; + bottom: 0; + z-index: 3; display: block; - height: calc(2.25rem + 2px); + height: calc(calc(2.25rem + 2px) - 1px * 2); padding: 0.375rem 0.75rem; line-height: 1.5; color: #495057; - background: #e9ecef linear-gradient(180deg, #ebeef1, #e9ecef) repeat-x; - border: 1px solid #ced4da; + content: "Browse"; + background-color: #e9ecef; + border-left: 1px solid #ced4da; border-radius: 0 0.25rem 0.25rem 0; } - .custom-file-control:lang(en)::before { - content: "Browse"; } .nav { display: flex; @@ -2718,9 +2761,7 @@ tbody.collapse.show { .nav-link { display: block; padding: 0.5rem 1rem; } - .nav-link:focus { - text-decoration: none; } - .nav-link:hover { + .nav-link:hover, .nav-link:focus { text-decoration: none; } .nav-link.disabled { color: #868e96; } @@ -2733,10 +2774,8 @@ tbody.collapse.show { border: 1px solid transparent; border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; } - .nav-tabs .nav-link:focus { - border-color: #e9ecef #e9ecef #ddd; } - .nav-tabs .nav-link:hover { - border-color: #e9ecef #e9ecef #ddd; } + .nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus { + border-color: #e9ecef; } .nav-tabs .nav-link.disabled { color: #868e96; background-color: transparent; @@ -2745,7 +2784,7 @@ tbody.collapse.show { .nav-tabs .nav-item.show .nav-link { color: #495057; background-color: #f5f7fa; - border-color: #ddd #ddd #f5f7fa; } + border-color: #ddd; } .nav-tabs .dropdown-menu { margin-top: -1px; border-top-left-radius: 0; @@ -2756,7 +2795,7 @@ tbody.collapse.show { .nav-pills .nav-link.active, .nav-pills .show > .nav-link { color: #fff; - background-color: #11b3e3; } + background-color: #0072b1; } .nav-fill .nav-item { flex: 1 1 auto; @@ -2794,9 +2833,7 @@ tbody.collapse.show { font-size: 1.25rem; line-height: inherit; white-space: nowrap; } - .navbar-brand:focus { - text-decoration: none; } - .navbar-brand:hover { + .navbar-brand:hover, .navbar-brand:focus { text-decoration: none; } .navbar-nav { @@ -2826,13 +2863,13 @@ tbody.collapse.show { padding: 0.25rem 0.75rem; font-size: 1.25rem; line-height: 1; - background: transparent; + background-color: transparent; border: 1px solid transparent; border-radius: 0.25rem; } - .navbar-toggler:focus { - text-decoration: none; } - .navbar-toggler:hover { + .navbar-toggler:hover, .navbar-toggler:focus { text-decoration: none; } + .navbar-toggler:not(:disabled):not(.disabled) { + cursor: pointer; } .navbar-toggler-icon { display: inline-block; @@ -2843,7 +2880,7 @@ tbody.collapse.show { background: no-repeat center center; background-size: 100% 100%; } -@media (max-width: 575px) { +@media (max-width: 575.98px) { .navbar-expand-sm > .container, .navbar-expand-sm > .container-fluid { padding-right: 0; @@ -2860,8 +2897,8 @@ tbody.collapse.show { right: 0; left: auto; } .navbar-expand-sm .navbar-nav .nav-link { - padding-right: .5rem; - padding-left: .5rem; } + padding-right: 0.5rem; + padding-left: 0.5rem; } .navbar-expand-sm > .container, .navbar-expand-sm > .container-fluid { flex-wrap: nowrap; } @@ -2873,7 +2910,7 @@ tbody.collapse.show { .navbar-expand-sm .dropup .dropdown-menu { top: auto; bottom: 100%; } } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .navbar-expand-md > .container, .navbar-expand-md > .container-fluid { padding-right: 0; @@ -2890,8 +2927,8 @@ tbody.collapse.show { right: 0; left: auto; } .navbar-expand-md .navbar-nav .nav-link { - padding-right: .5rem; - padding-left: .5rem; } + padding-right: 0.5rem; + padding-left: 0.5rem; } .navbar-expand-md > .container, .navbar-expand-md > .container-fluid { flex-wrap: nowrap; } @@ -2903,7 +2940,7 @@ tbody.collapse.show { .navbar-expand-md .dropup .dropdown-menu { top: auto; bottom: 100%; } } -@media (max-width: 991px) { +@media (max-width: 991.98px) { .navbar-expand-lg > .container, .navbar-expand-lg > .container-fluid { padding-right: 0; @@ -2920,8 +2957,8 @@ tbody.collapse.show { right: 0; left: auto; } .navbar-expand-lg .navbar-nav .nav-link { - padding-right: .5rem; - padding-left: .5rem; } + padding-right: 0.5rem; + padding-left: 0.5rem; } .navbar-expand-lg > .container, .navbar-expand-lg > .container-fluid { flex-wrap: nowrap; } @@ -2933,7 +2970,7 @@ tbody.collapse.show { .navbar-expand-lg .dropup .dropdown-menu { top: auto; bottom: 100%; } } -@media (max-width: 1199px) { +@media (max-width: 1199.98px) { .navbar-expand-xl > .container, .navbar-expand-xl > .container-fluid { padding-right: 0; @@ -2950,8 +2987,8 @@ tbody.collapse.show { right: 0; left: auto; } .navbar-expand-xl .navbar-nav .nav-link { - padding-right: .5rem; - padding-left: .5rem; } + padding-right: 0.5rem; + padding-left: 0.5rem; } .navbar-expand-xl > .container, .navbar-expand-xl > .container-fluid { flex-wrap: nowrap; } @@ -2978,8 +3015,8 @@ tbody.collapse.show { right: 0; left: auto; } .navbar-expand .navbar-nav .nav-link { - padding-right: .5rem; - padding-left: .5rem; } + padding-right: 0.5rem; + padding-left: 0.5rem; } .navbar-expand > .container, .navbar-expand > .container-fluid { flex-wrap: nowrap; } @@ -2994,15 +3031,11 @@ tbody.collapse.show { .navbar-light .navbar-brand { color: #343a40; } - .navbar-light .navbar-brand:focus { - color: #343a40; } - .navbar-light .navbar-brand:hover { + .navbar-light .navbar-brand:hover, .navbar-light .navbar-brand:focus { color: #343a40; } .navbar-light .navbar-nav .nav-link { color: #868e96; } - .navbar-light .navbar-nav .nav-link:focus { - color: #495057; } - .navbar-light .navbar-nav .nav-link:hover { + .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus { color: #495057; } .navbar-light .navbar-nav .nav-link.disabled { color: rgba(0, 0, 0, 0.3); } @@ -3020,22 +3053,16 @@ tbody.collapse.show { color: #868e96; } .navbar-light .navbar-text a { color: #343a40; } - .navbar-light .navbar-text a:focus { - color: #343a40; } - .navbar-light .navbar-text a:hover { + .navbar-light .navbar-text a:hover, .navbar-light .navbar-text a:focus { color: #343a40; } .navbar-dark .navbar-brand { color: white; } - .navbar-dark .navbar-brand:focus { - color: white; } - .navbar-dark .navbar-brand:hover { + .navbar-dark .navbar-brand:hover, .navbar-dark .navbar-brand:focus { color: white; } .navbar-dark .navbar-nav .nav-link { color: rgba(255, 255, 255, 0.5); } - .navbar-dark .navbar-nav .nav-link:focus { - color: rgba(255, 255, 255, 0.75); } - .navbar-dark .navbar-nav .nav-link:hover { + .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus { color: rgba(255, 255, 255, 0.75); } .navbar-dark .navbar-nav .nav-link.disabled { color: rgba(255, 255, 255, 0.25); } @@ -3053,9 +3080,7 @@ tbody.collapse.show { color: rgba(255, 255, 255, 0.5); } .navbar-dark .navbar-text a { color: white; } - .navbar-dark .navbar-text a:focus { - color: white; } - .navbar-dark .navbar-text a:hover { + .navbar-dark .navbar-text a:hover, .navbar-dark .navbar-text a:focus { color: white; } .card { @@ -3167,43 +3192,51 @@ tbody.collapse.show { .card-group { display: flex; flex-direction: column; } - .card-group .card { + .card-group > .card { margin-bottom: 15px; } @media (min-width: 576px) { .card-group { flex-flow: row wrap; } - .card-group .card { + .card-group > .card { flex: 1 0 0%; margin-bottom: 0; } - .card-group .card + .card { + .card-group > .card + .card { margin-left: 0; border-left: 0; } - .card-group .card:first-child { + .card-group > .card:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; } - .card-group .card:first-child .card-img-top { + .card-group > .card:first-child .card-img-top, + .card-group > .card:first-child .card-header { border-top-right-radius: 0; } - .card-group .card:first-child .card-img-bottom { + .card-group > .card:first-child .card-img-bottom, + .card-group > .card:first-child .card-footer { border-bottom-right-radius: 0; } - .card-group .card:last-child { + .card-group > .card:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; } - .card-group .card:last-child .card-img-top { + .card-group > .card:last-child .card-img-top, + .card-group > .card:last-child .card-header { border-top-left-radius: 0; } - .card-group .card:last-child .card-img-bottom { + .card-group > .card:last-child .card-img-bottom, + .card-group > .card:last-child .card-footer { border-bottom-left-radius: 0; } - .card-group .card:only-child { + .card-group > .card:only-child { border-radius: 0.25rem; } - .card-group .card:only-child .card-img-top { + .card-group > .card:only-child .card-img-top, + .card-group > .card:only-child .card-header { border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; } - .card-group .card:only-child .card-img-bottom { + .card-group > .card:only-child .card-img-bottom, + .card-group > .card:only-child .card-footer { border-bottom-right-radius: 0.25rem; border-bottom-left-radius: 0.25rem; } - .card-group .card:not(:first-child):not(:last-child):not(:only-child) { + .card-group > .card:not(:first-child):not(:last-child):not(:only-child) { border-radius: 0; } - .card-group .card:not(:first-child):not(:last-child):not(:only-child) .card-img-top, - .card-group .card:not(:first-child):not(:last-child):not(:only-child) .card-img-bottom { + .card-group > .card:not(:first-child):not(:last-child):not(:only-child) .card-img-top, + .card-group > .card:not(:first-child):not(:last-child):not(:only-child) .card-img-bottom, + .card-group > .card:not(:first-child):not(:last-child):not(:only-child) .card-header, + .card-group > .card:not(:first-child):not(:last-child):not(:only-child) .card-footer { border-radius: 0; } } .card-columns .card { @@ -3244,6 +3277,27 @@ tbody.collapse.show { list-style: none; border-radius: 0.25rem; } +.page-link { + position: relative; + display: block; + padding: 0.5rem 0.75rem; + margin-left: -1px; + line-height: 1.25; + color: #0072b1; + background-color: #fff; + border: 1px solid #ddd; } + .page-link:hover { + color: #004165; + text-decoration: none; + background-color: #e9ecef; + border-color: #ddd; } + .page-link:focus { + z-index: 2; + outline: 0; + box-shadow: 0 0 0 0.15rem rgba(0, 114, 177, 0.25); } + .page-link:not(:disabled):not(.disabled) { + cursor: pointer; } + .page-item:first-child .page-link { margin-left: 0; border-top-left-radius: 0.25rem; @@ -3252,36 +3306,17 @@ tbody.collapse.show { border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; } .page-item.active .page-link { - z-index: 2; + z-index: 1; color: #fff; - background-color: #11b3e3; - border-color: #11b3e3; } + background-color: #0072b1; + border-color: #0072b1; } .page-item.disabled .page-link { color: #868e96; pointer-events: none; + cursor: auto; background-color: #fff; border-color: #ddd; } -.page-link { - position: relative; - display: block; - padding: 0.5rem 0.75rem; - margin-left: -1px; - line-height: 1.25; - color: #11b3e3; - background-color: #fff; - border: 1px solid #ddd; } - .page-link:focus { - color: #0c7b9c; - text-decoration: none; - background-color: #e9ecef; - border-color: #ddd; } - .page-link:hover { - color: #0c7b9c; - text-decoration: none; - background-color: #e9ecef; - border-color: #ddd; } - .pagination-lg .page-link { padding: 0.75rem 1.5rem; font-size: 1.25rem; @@ -3328,24 +3363,16 @@ tbody.collapse.show { .badge-primary { color: #fff; - background-color: #11b3e3; } - .badge-primary[href]:focus { - color: #fff; - text-decoration: none; - background-color: #0d8eb4; } - .badge-primary[href]:hover { + background-color: #0072b1; } + .badge-primary[href]:hover, .badge-primary[href]:focus { color: #fff; text-decoration: none; - background-color: #0d8eb4; } + background-color: #00517e; } .badge-secondary { color: #fff; background-color: #868e96; } - .badge-secondary[href]:focus { - color: #fff; - text-decoration: none; - background-color: #6c757d; } - .badge-secondary[href]:hover { + .badge-secondary[href]:hover, .badge-secondary[href]:focus { color: #fff; text-decoration: none; background-color: #6c757d; } @@ -3353,71 +3380,47 @@ tbody.collapse.show { .badge-success { color: #fff; background-color: #008761; } - .badge-success[href]:focus { - color: #fff; - text-decoration: none; - background-color: #00543c; } - .badge-success[href]:hover { + .badge-success[href]:hover, .badge-success[href]:focus { color: #fff; text-decoration: none; background-color: #00543c; } .badge-info { - color: #111; + color: #212529; background-color: #bfdbf7; } - .badge-info[href]:focus { - color: #111; - text-decoration: none; - background-color: #92c2f1; } - .badge-info[href]:hover { - color: #111; + .badge-info[href]:hover, .badge-info[href]:focus { + color: #212529; text-decoration: none; background-color: #92c2f1; } .badge-warning { - color: #111; + color: #212529; background-color: #f3bf51; } - .badge-warning[href]:focus { - color: #111; - text-decoration: none; - background-color: #f0ad21; } - .badge-warning[href]:hover { - color: #111; + .badge-warning[href]:hover, .badge-warning[href]:focus { + color: #212529; text-decoration: none; background-color: #f0ad21; } .badge-danger { color: #fff; background-color: #e21c2c; } - .badge-danger[href]:focus { - color: #fff; - text-decoration: none; - background-color: #b51623; } - .badge-danger[href]:hover { + .badge-danger[href]:hover, .badge-danger[href]:focus { color: #fff; text-decoration: none; background-color: #b51623; } .badge-light { - color: #111; + color: #212529; background-color: #f5f7fa; } - .badge-light[href]:focus { - color: #111; - text-decoration: none; - background-color: #d3dce9; } - .badge-light[href]:hover { - color: #111; + .badge-light[href]:hover, .badge-light[href]:focus { + color: #212529; text-decoration: none; background-color: #d3dce9; } .badge-dark { color: #fff; background-color: #343a40; } - .badge-dark[href]:focus { - color: #fff; - text-decoration: none; - background-color: #1d2124; } - .badge-dark[href]:hover { + .badge-dark[href]:hover, .badge-dark[href]:focus { color: #fff; text-decoration: none; background-color: #1d2124; } @@ -3425,11 +3428,7 @@ tbody.collapse.show { .badge-alert { color: #fff; background-color: #e21c2c; } - .badge-alert[href]:focus { - color: #fff; - text-decoration: none; - background-color: #b51623; } - .badge-alert[href]:hover { + .badge-alert[href]:hover, .badge-alert[href]:focus { color: #fff; text-decoration: none; background-color: #b51623; } @@ -3461,25 +3460,27 @@ tbody.collapse.show { .alert-link { font-weight: 600; } -.alert-dismissible .close { - position: absolute; - top: 0; - right: 0; - padding: 0.75rem 1.25rem; - color: inherit; } +.alert-dismissible { + padding-right: 4rem; } + .alert-dismissible .close { + position: absolute; + top: 0; + right: 0; + padding: 0.75rem 1.25rem; + color: inherit; } .alert-primary { - color: #095d76; - background: #cff0f9 linear-gradient(180deg, #d5f1f9, #cff0f9) repeat-x; - border-color: #bceaf7; } + color: #003b5c; + background-color: #cce3ef; + border-color: #b8d8e9; } .alert-primary hr { - border-top-color: #a5e3f4; } + border-top-color: #a5cde3; } .alert-primary .alert-link { - color: #053847; } + color: #001a29; } .alert-secondary { color: #464a4e; - background: #e7e8ea linear-gradient(180deg, #e9eaec, #e7e8ea) repeat-x; + background-color: #e7e8ea; border-color: #dddfe2; } .alert-secondary hr { border-top-color: #cfd2d6; } @@ -3488,7 +3489,7 @@ tbody.collapse.show { .alert-success, .alert-notice { color: #004632; - background: #cce7df linear-gradient(180deg, #d2e9e3, #cce7df) repeat-x; + background-color: #cce7df; border-color: #b8ddd3; } .alert-success hr, .alert-notice hr { border-top-color: #a7d5c8; } @@ -3497,7 +3498,7 @@ tbody.collapse.show { .alert-info { color: #637280; - background: #f2f8fd linear-gradient(180deg, #f2f8fd, #f2f8fd) repeat-x; + background-color: #f2f8fd; border-color: #edf5fd; } .alert-info hr { border-top-color: #d6e8fa; } @@ -3506,7 +3507,7 @@ tbody.collapse.show { .alert-warning { color: #7e632a; - background: #fdf2dc linear-gradient(180deg, #fcf3e1, #fdf2dc) repeat-x; + background-color: #fdf2dc; border-color: #fcedce; } .alert-warning hr { border-top-color: #fbe4b6; } @@ -3515,7 +3516,7 @@ tbody.collapse.show { .alert-danger, .alert-alert { color: #760f17; - background: #f9d2d5 linear-gradient(180deg, #f8d8db, #f9d2d5) repeat-x; + background-color: #f9d2d5; border-color: #f7bfc4; } .alert-danger hr, .alert-alert hr { border-top-color: #f4a8af; } @@ -3524,7 +3525,7 @@ tbody.collapse.show { .alert-light { color: #7f8082; - background: #fdfdfe linear-gradient(180deg, #fcfcfd, #fdfdfe) repeat-x; + background-color: #fdfdfe; border-color: #fcfdfe; } .alert-light hr { border-top-color: #e9f0f8; } @@ -3533,7 +3534,7 @@ tbody.collapse.show { .alert-dark { color: #1b1e21; - background: #d6d8d9 linear-gradient(180deg, #dbddde, #d6d8d9) repeat-x; + background-color: #d6d8d9; border-color: #c6c8ca; } .alert-dark hr { border-top-color: #b9bbbe; } @@ -3542,7 +3543,7 @@ tbody.collapse.show { .alert-alert { color: #760f17; - background: #f9d2d5 linear-gradient(180deg, #f8d8db, #f9d2d5) repeat-x; + background-color: #f9d2d5; border-color: #f7bfc4; } .alert-alert hr { border-top-color: #f4a8af; } @@ -3560,14 +3561,17 @@ tbody.collapse.show { overflow: hidden; font-size: 0.75rem; background-color: #e9ecef; - border-radius: 0.25rem; } + border-radius: 0.25rem; + box-shadow: inset 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1); } .progress-bar { display: flex; - align-items: center; + flex-direction: column; justify-content: center; color: #fff; - background-color: #11b3e3; } + text-align: center; + background-color: #0072b1; + transition: width 0.6s ease; } .progress-bar-striped { 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); @@ -3593,11 +3597,7 @@ tbody.collapse.show { width: 100%; color: #495057; text-align: inherit; } - .list-group-item-action:focus { - color: #495057; - text-decoration: none; - background-color: #f5f7fa; } - .list-group-item-action:hover { + .list-group-item-action:hover, .list-group-item-action:focus { color: #495057; text-decoration: none; background-color: #f5f7fa; } @@ -3619,9 +3619,8 @@ tbody.collapse.show { margin-bottom: 0; border-bottom-right-radius: 0.25rem; border-bottom-left-radius: 0.25rem; } - .list-group-item:focus { - text-decoration: none; } - .list-group-item:hover { + .list-group-item:hover, .list-group-item:focus { + z-index: 1; text-decoration: none; } .list-group-item.disabled, .list-group-item:disabled { color: #868e96; @@ -3629,8 +3628,8 @@ tbody.collapse.show { .list-group-item.active { z-index: 2; color: #fff; - background-color: #11b3e3; - border-color: #11b3e3; } + background-color: #0072b1; + border-color: #0072b1; } .list-group-flush .list-group-item { border-right: 0; @@ -3642,43 +3641,23 @@ tbody.collapse.show { border-bottom: 0; } .list-group-item-primary { - color: #095d76; - background-color: #bceaf7; } - -a.list-group-item-primary, -button.list-group-item-primary { - color: #095d76; } - a.list-group-item-primary:focus, - button.list-group-item-primary:focus { - color: #095d76; - background-color: #a5e3f4; } - a.list-group-item-primary:hover, - button.list-group-item-primary:hover { - color: #095d76; - background-color: #a5e3f4; } - a.list-group-item-primary.active, - button.list-group-item-primary.active { + color: #003b5c; + background-color: #b8d8e9; } + .list-group-item-primary.list-group-item-action:hover, .list-group-item-primary.list-group-item-action:focus { + color: #003b5c; + background-color: #a5cde3; } + .list-group-item-primary.list-group-item-action.active { color: #fff; - background-color: #095d76; - border-color: #095d76; } + background-color: #003b5c; + border-color: #003b5c; } .list-group-item-secondary { color: #464a4e; background-color: #dddfe2; } - -a.list-group-item-secondary, -button.list-group-item-secondary { - color: #464a4e; } - a.list-group-item-secondary:focus, - button.list-group-item-secondary:focus { - color: #464a4e; - background-color: #cfd2d6; } - a.list-group-item-secondary:hover, - button.list-group-item-secondary:hover { + .list-group-item-secondary.list-group-item-action:hover, .list-group-item-secondary.list-group-item-action:focus { color: #464a4e; background-color: #cfd2d6; } - a.list-group-item-secondary.active, - button.list-group-item-secondary.active { + .list-group-item-secondary.list-group-item-action.active { color: #fff; background-color: #464a4e; border-color: #464a4e; } @@ -3686,20 +3665,10 @@ button.list-group-item-secondary { .list-group-item-success { color: #004632; background-color: #b8ddd3; } - -a.list-group-item-success, -button.list-group-item-success { - color: #004632; } - a.list-group-item-success:focus, - button.list-group-item-success:focus { + .list-group-item-success.list-group-item-action:hover, .list-group-item-success.list-group-item-action:focus { color: #004632; background-color: #a7d5c8; } - a.list-group-item-success:hover, - button.list-group-item-success:hover { - color: #004632; - background-color: #a7d5c8; } - a.list-group-item-success.active, - button.list-group-item-success.active { + .list-group-item-success.list-group-item-action.active { color: #fff; background-color: #004632; border-color: #004632; } @@ -3707,20 +3676,10 @@ button.list-group-item-success { .list-group-item-info { color: #637280; background-color: #edf5fd; } - -a.list-group-item-info, -button.list-group-item-info { - color: #637280; } - a.list-group-item-info:focus, - button.list-group-item-info:focus { + .list-group-item-info.list-group-item-action:hover, .list-group-item-info.list-group-item-action:focus { color: #637280; background-color: #d6e8fa; } - a.list-group-item-info:hover, - button.list-group-item-info:hover { - color: #637280; - background-color: #d6e8fa; } - a.list-group-item-info.active, - button.list-group-item-info.active { + .list-group-item-info.list-group-item-action.active { color: #fff; background-color: #637280; border-color: #637280; } @@ -3728,20 +3687,10 @@ button.list-group-item-info { .list-group-item-warning { color: #7e632a; background-color: #fcedce; } - -a.list-group-item-warning, -button.list-group-item-warning { - color: #7e632a; } - a.list-group-item-warning:focus, - button.list-group-item-warning:focus { + .list-group-item-warning.list-group-item-action:hover, .list-group-item-warning.list-group-item-action:focus { color: #7e632a; background-color: #fbe4b6; } - a.list-group-item-warning:hover, - button.list-group-item-warning:hover { - color: #7e632a; - background-color: #fbe4b6; } - a.list-group-item-warning.active, - button.list-group-item-warning.active { + .list-group-item-warning.list-group-item-action.active { color: #fff; background-color: #7e632a; border-color: #7e632a; } @@ -3749,20 +3698,10 @@ button.list-group-item-warning { .list-group-item-danger { color: #760f17; background-color: #f7bfc4; } - -a.list-group-item-danger, -button.list-group-item-danger { - color: #760f17; } - a.list-group-item-danger:focus, - button.list-group-item-danger:focus { - color: #760f17; - background-color: #f4a8af; } - a.list-group-item-danger:hover, - button.list-group-item-danger:hover { + .list-group-item-danger.list-group-item-action:hover, .list-group-item-danger.list-group-item-action:focus { color: #760f17; background-color: #f4a8af; } - a.list-group-item-danger.active, - button.list-group-item-danger.active { + .list-group-item-danger.list-group-item-action.active { color: #fff; background-color: #760f17; border-color: #760f17; } @@ -3770,20 +3709,10 @@ button.list-group-item-danger { .list-group-item-light { color: #7f8082; background-color: #fcfdfe; } - -a.list-group-item-light, -button.list-group-item-light { - color: #7f8082; } - a.list-group-item-light:focus, - button.list-group-item-light:focus { - color: #7f8082; - background-color: #e9f0f8; } - a.list-group-item-light:hover, - button.list-group-item-light:hover { + .list-group-item-light.list-group-item-action:hover, .list-group-item-light.list-group-item-action:focus { color: #7f8082; background-color: #e9f0f8; } - a.list-group-item-light.active, - button.list-group-item-light.active { + .list-group-item-light.list-group-item-action.active { color: #fff; background-color: #7f8082; border-color: #7f8082; } @@ -3791,20 +3720,10 @@ button.list-group-item-light { .list-group-item-dark { color: #1b1e21; background-color: #c6c8ca; } - -a.list-group-item-dark, -button.list-group-item-dark { - color: #1b1e21; } - a.list-group-item-dark:focus, - button.list-group-item-dark:focus { + .list-group-item-dark.list-group-item-action:hover, .list-group-item-dark.list-group-item-action:focus { color: #1b1e21; background-color: #b9bbbe; } - a.list-group-item-dark:hover, - button.list-group-item-dark:hover { - color: #1b1e21; - background-color: #b9bbbe; } - a.list-group-item-dark.active, - button.list-group-item-dark.active { + .list-group-item-dark.list-group-item-action.active { color: #fff; background-color: #1b1e21; border-color: #1b1e21; } @@ -3812,20 +3731,10 @@ button.list-group-item-dark { .list-group-item-alert { color: #760f17; background-color: #f7bfc4; } - -a.list-group-item-alert, -button.list-group-item-alert { - color: #760f17; } - a.list-group-item-alert:focus, - button.list-group-item-alert:focus { + .list-group-item-alert.list-group-item-action:hover, .list-group-item-alert.list-group-item-action:focus { color: #760f17; background-color: #f4a8af; } - a.list-group-item-alert:hover, - button.list-group-item-alert:hover { - color: #760f17; - background-color: #f4a8af; } - a.list-group-item-alert.active, - button.list-group-item-alert.active { + .list-group-item-alert.list-group-item-action.active { color: #fff; background-color: #760f17; border-color: #760f17; } @@ -3838,18 +3747,16 @@ button.list-group-item-alert { color: #000; text-shadow: 0 1px 0 #fff; opacity: .5; } - .close:focus { - color: #000; - text-decoration: none; - opacity: .75; } - .close:hover { + .close:hover, .close:focus { color: #000; text-decoration: none; opacity: .75; } + .close:not(:disabled):not(.disabled) { + cursor: pointer; } button.close { padding: 0; - background: transparent; + background-color: transparent; border: 0; -webkit-appearance: none; } @@ -3866,26 +3773,31 @@ button.close { display: none; overflow: hidden; outline: 0; } - .modal.fade .modal-dialog { - transition: transform 0.3s ease-out; - transform: translate(0, -25%); } - .modal.show .modal-dialog { - transform: translate(0, 0); } - -.modal-open .modal { - overflow-x: hidden; - overflow-y: auto; } + .modal-open .modal { + overflow-x: hidden; + overflow-y: auto; } .modal-dialog { position: relative; width: auto; margin: 10px; pointer-events: none; } + .modal.fade .modal-dialog { + transition: transform 0.3s ease-out; + transform: translate(0, -25%); } + .modal.show .modal-dialog { + transform: translate(0, 0); } + +.modal-dialog-centered { + display: flex; + align-items: center; + min-height: calc(100% - (10px * 2)); } .modal-content { position: relative; display: flex; flex-direction: column; + width: 100%; pointer-events: auto; background-color: #fff; background-clip: padding-box; @@ -3951,6 +3863,9 @@ button.close { max-width: 500px; margin: 30px auto; } + .modal-dialog-centered { + min-height: calc(100% - (30px * 2)); } + .modal-content { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); } @@ -3988,46 +3903,50 @@ button.close { display: block; width: 5px; height: 5px; } - .tooltip .arrow::before { - position: absolute; - border-color: transparent; - border-style: solid; } - .tooltip.bs-tooltip-top, .tooltip.bs-tooltip-auto[x-placement^="top"] { - padding: 5px 0; } - .tooltip.bs-tooltip-top .arrow, .tooltip.bs-tooltip-auto[x-placement^="top"] .arrow { - bottom: 0; } - .tooltip.bs-tooltip-top .arrow::before, .tooltip.bs-tooltip-auto[x-placement^="top"] .arrow::before { - margin-left: -3px; + .tooltip .arrow::before { + position: absolute; content: ""; - border-width: 5px 5px 0; + border-color: transparent; + border-style: solid; } + +.bs-tooltip-top, .bs-tooltip-auto[x-placement^="top"] { + padding: 5px 0; } + .bs-tooltip-top .arrow, .bs-tooltip-auto[x-placement^="top"] .arrow { + bottom: 0; } + .bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before { + top: 0; + border-width: 5px 2.5px 0; border-top-color: #495057; } - .tooltip.bs-tooltip-right, .tooltip.bs-tooltip-auto[x-placement^="right"] { - padding: 0 5px; } - .tooltip.bs-tooltip-right .arrow, .tooltip.bs-tooltip-auto[x-placement^="right"] .arrow { - left: 0; } - .tooltip.bs-tooltip-right .arrow::before, .tooltip.bs-tooltip-auto[x-placement^="right"] .arrow::before { - margin-top: -3px; - content: ""; - border-width: 5px 5px 5px 0; + +.bs-tooltip-right, .bs-tooltip-auto[x-placement^="right"] { + padding: 0 5px; } + .bs-tooltip-right .arrow, .bs-tooltip-auto[x-placement^="right"] .arrow { + left: 0; + width: 5px; + height: 5px; } + .bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before { + right: 0; + border-width: 2.5px 5px 2.5px 0; border-right-color: #495057; } - .tooltip.bs-tooltip-bottom, .tooltip.bs-tooltip-auto[x-placement^="bottom"] { - padding: 5px 0; } - .tooltip.bs-tooltip-bottom .arrow, .tooltip.bs-tooltip-auto[x-placement^="bottom"] .arrow { - top: 0; } - .tooltip.bs-tooltip-bottom .arrow::before, .tooltip.bs-tooltip-auto[x-placement^="bottom"] .arrow::before { - margin-left: -3px; - content: ""; - border-width: 0 5px 5px; + +.bs-tooltip-bottom, .bs-tooltip-auto[x-placement^="bottom"] { + padding: 5px 0; } + .bs-tooltip-bottom .arrow, .bs-tooltip-auto[x-placement^="bottom"] .arrow { + top: 0; } + .bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before { + bottom: 0; + border-width: 0 2.5px 5px; border-bottom-color: #495057; } - .tooltip.bs-tooltip-left, .tooltip.bs-tooltip-auto[x-placement^="left"] { - padding: 0 5px; } - .tooltip.bs-tooltip-left .arrow, .tooltip.bs-tooltip-auto[x-placement^="left"] .arrow { - right: 0; } - .tooltip.bs-tooltip-left .arrow::before, .tooltip.bs-tooltip-auto[x-placement^="left"] .arrow::before { - right: 0; - margin-top: -3px; - content: ""; - border-width: 5px 0 5px 5px; + +.bs-tooltip-left, .bs-tooltip-auto[x-placement^="left"] { + padding: 0 5px; } + .bs-tooltip-left .arrow, .bs-tooltip-auto[x-placement^="left"] .arrow { + right: 0; + width: 5px; + height: 5px; } + .bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before { + left: 0; + border-width: 2.5px 0 2.5px 5px; border-left-color: #495057; } .tooltip-inner { @@ -4070,89 +3989,89 @@ button.close { position: absolute; display: block; width: 10px; - height: 5px; } - .popover .arrow::before, - .popover .arrow::after { - position: absolute; - display: block; - border-color: transparent; - border-style: solid; } - .popover .arrow::before { - content: ""; - border-width: 10px; } - .popover .arrow::after { - content: ""; - border-width: 10px; } - .popover.bs-popover-top, .popover.bs-popover-auto[x-placement^="top"] { - margin-bottom: 10px; } - .popover.bs-popover-top .arrow, .popover.bs-popover-auto[x-placement^="top"] .arrow { - bottom: 0; } - .popover.bs-popover-top .arrow::before, .popover.bs-popover-auto[x-placement^="top"] .arrow::before, - .popover.bs-popover-top .arrow::after, - .popover.bs-popover-auto[x-placement^="top"] .arrow::after { - border-bottom-width: 0; } - .popover.bs-popover-top .arrow::before, .popover.bs-popover-auto[x-placement^="top"] .arrow::before { - bottom: -10px; - margin-left: -10px; - border-top-color: rgba(0, 0, 0, 0.25); } - .popover.bs-popover-top .arrow::after, .popover.bs-popover-auto[x-placement^="top"] .arrow::after { - bottom: calc((10px - 1px) * -1); - margin-left: -10px; - border-top-color: #fff; } - .popover.bs-popover-right, .popover.bs-popover-auto[x-placement^="right"] { - margin-left: 10px; } - .popover.bs-popover-right .arrow, .popover.bs-popover-auto[x-placement^="right"] .arrow { - left: 0; } - .popover.bs-popover-right .arrow::before, .popover.bs-popover-auto[x-placement^="right"] .arrow::before, - .popover.bs-popover-right .arrow::after, - .popover.bs-popover-auto[x-placement^="right"] .arrow::after { - margin-top: -10px; - border-left-width: 0; } - .popover.bs-popover-right .arrow::before, .popover.bs-popover-auto[x-placement^="right"] .arrow::before { - left: -10px; - border-right-color: rgba(0, 0, 0, 0.25); } - .popover.bs-popover-right .arrow::after, .popover.bs-popover-auto[x-placement^="right"] .arrow::after { - left: calc((10px - 1px) * -1); - border-right-color: #fff; } - .popover.bs-popover-bottom, .popover.bs-popover-auto[x-placement^="bottom"] { - margin-top: 10px; } - .popover.bs-popover-bottom .arrow, .popover.bs-popover-auto[x-placement^="bottom"] .arrow { - top: 0; } - .popover.bs-popover-bottom .arrow::before, .popover.bs-popover-auto[x-placement^="bottom"] .arrow::before, - .popover.bs-popover-bottom .arrow::after, - .popover.bs-popover-auto[x-placement^="bottom"] .arrow::after { - margin-left: -10px; - border-top-width: 0; } - .popover.bs-popover-bottom .arrow::before, .popover.bs-popover-auto[x-placement^="bottom"] .arrow::before { - top: -10px; - border-bottom-color: rgba(0, 0, 0, 0.25); } - .popover.bs-popover-bottom .arrow::after, .popover.bs-popover-auto[x-placement^="bottom"] .arrow::after { - top: calc((10px - 1px) * -1); - border-bottom-color: #fff; } - .popover.bs-popover-bottom .popover-header::before, .popover.bs-popover-auto[x-placement^="bottom"] .popover-header::before { + height: 5px; + margin: 0 0.3rem; } + .popover .arrow::before, .popover .arrow::after { position: absolute; - top: 0; - left: 50%; display: block; - width: 20px; - margin-left: -10px; content: ""; - border-bottom: 1px solid #f7f7f7; } - .popover.bs-popover-left, .popover.bs-popover-auto[x-placement^="left"] { - margin-right: 10px; } - .popover.bs-popover-left .arrow, .popover.bs-popover-auto[x-placement^="left"] .arrow { - right: 0; } - .popover.bs-popover-left .arrow::before, .popover.bs-popover-auto[x-placement^="left"] .arrow::before, - .popover.bs-popover-left .arrow::after, - .popover.bs-popover-auto[x-placement^="left"] .arrow::after { - margin-top: -10px; - border-right-width: 0; } - .popover.bs-popover-left .arrow::before, .popover.bs-popover-auto[x-placement^="left"] .arrow::before { - right: -10px; - border-left-color: rgba(0, 0, 0, 0.25); } - .popover.bs-popover-left .arrow::after, .popover.bs-popover-auto[x-placement^="left"] .arrow::after { - right: calc((10px - 1px) * -1); - border-left-color: #fff; } + border-color: transparent; + border-style: solid; } + +.bs-popover-top, .bs-popover-auto[x-placement^="top"] { + margin-bottom: 5px; } + .bs-popover-top .arrow, .bs-popover-auto[x-placement^="top"] .arrow { + bottom: calc((5px + 1px) * -1); } + .bs-popover-top .arrow::before, .bs-popover-auto[x-placement^="top"] .arrow::before, + .bs-popover-top .arrow::after, + .bs-popover-auto[x-placement^="top"] .arrow::after { + border-width: 5px 5px 0; } + .bs-popover-top .arrow::before, .bs-popover-auto[x-placement^="top"] .arrow::before { + bottom: 0; + border-top-color: rgba(0, 0, 0, 0.25); } + .bs-popover-top .arrow::after, .bs-popover-auto[x-placement^="top"] .arrow::after { + bottom: 1px; + border-top-color: #fff; } + +.bs-popover-right, .bs-popover-auto[x-placement^="right"] { + margin-left: 5px; } + .bs-popover-right .arrow, .bs-popover-auto[x-placement^="right"] .arrow { + left: calc((5px + 1px) * -1); + width: 5px; + height: 10px; + margin: 0.3rem 0; } + .bs-popover-right .arrow::before, .bs-popover-auto[x-placement^="right"] .arrow::before, + .bs-popover-right .arrow::after, + .bs-popover-auto[x-placement^="right"] .arrow::after { + border-width: 5px 5px 5px 0; } + .bs-popover-right .arrow::before, .bs-popover-auto[x-placement^="right"] .arrow::before { + left: 0; + border-right-color: rgba(0, 0, 0, 0.25); } + .bs-popover-right .arrow::after, .bs-popover-auto[x-placement^="right"] .arrow::after { + left: 1px; + border-right-color: #fff; } + +.bs-popover-bottom, .bs-popover-auto[x-placement^="bottom"] { + margin-top: 5px; } + .bs-popover-bottom .arrow, .bs-popover-auto[x-placement^="bottom"] .arrow { + top: calc((5px + 1px) * -1); } + .bs-popover-bottom .arrow::before, .bs-popover-auto[x-placement^="bottom"] .arrow::before, + .bs-popover-bottom .arrow::after, + .bs-popover-auto[x-placement^="bottom"] .arrow::after { + border-width: 0 5px 5px 5px; } + .bs-popover-bottom .arrow::before, .bs-popover-auto[x-placement^="bottom"] .arrow::before { + top: 0; + border-bottom-color: rgba(0, 0, 0, 0.25); } + .bs-popover-bottom .arrow::after, .bs-popover-auto[x-placement^="bottom"] .arrow::after { + top: 1px; + border-bottom-color: #fff; } + .bs-popover-bottom .popover-header::before, .bs-popover-auto[x-placement^="bottom"] .popover-header::before { + position: absolute; + top: 0; + left: 50%; + display: block; + width: 10px; + margin-left: -5px; + content: ""; + border-bottom: 1px solid #f7f7f7; } + +.bs-popover-left, .bs-popover-auto[x-placement^="left"] { + margin-right: 5px; } + .bs-popover-left .arrow, .bs-popover-auto[x-placement^="left"] .arrow { + right: calc((5px + 1px) * -1); + width: 5px; + height: 10px; + margin: 0.3rem 0; } + .bs-popover-left .arrow::before, .bs-popover-auto[x-placement^="left"] .arrow::before, + .bs-popover-left .arrow::after, + .bs-popover-auto[x-placement^="left"] .arrow::after { + border-width: 5px 0 5px 5px; } + .bs-popover-left .arrow::before, .bs-popover-auto[x-placement^="left"] .arrow::before { + right: 0; + border-left-color: rgba(0, 0, 0, 0.25); } + .bs-popover-left .arrow::after, .bs-popover-auto[x-placement^="left"] .arrow::after { + right: 1px; + border-left-color: #fff; } .popover-header { padding: 8px 14px; @@ -4233,26 +4152,19 @@ button.close { color: #fff; text-align: center; opacity: 0.5; } - .carousel-control-prev:focus, + .carousel-control-prev:hover, .carousel-control-prev:focus, + .carousel-control-next:hover, .carousel-control-next:focus { color: #fff; text-decoration: none; outline: 0; opacity: .9; } - .carousel-control-prev:hover, - .carousel-control-next:hover { - color: #fff; - text-decoration: none; - outline: 0; - opacity: .9; } .carousel-control-prev { - left: 0; - background: linear-gradient(90deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.001)); } + left: 0; } .carousel-control-next { - right: 0; - background: linear-gradient(270deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.001)); } + right: 0; } .carousel-control-prev-icon, .carousel-control-next-icon { @@ -4338,103 +4250,76 @@ button.close { vertical-align: text-top !important; } .bg-primary { - background-color: #11b3e3 !important; } + background-color: #0072b1 !important; } -a.bg-primary:focus { - background-color: #0d8eb4 !important; } -a.bg-primary:hover { - background-color: #0d8eb4 !important; } +a.bg-primary:hover, a.bg-primary:focus, +button.bg-primary:hover, +button.bg-primary:focus { + background-color: #00517e !important; } .bg-secondary { background-color: #868e96 !important; } -a.bg-secondary:focus { - background-color: #6c757d !important; } -a.bg-secondary:hover { +a.bg-secondary:hover, a.bg-secondary:focus, +button.bg-secondary:hover, +button.bg-secondary:focus { background-color: #6c757d !important; } .bg-success { background-color: #008761 !important; } -a.bg-success:focus { - background-color: #00543c !important; } -a.bg-success:hover { +a.bg-success:hover, a.bg-success:focus, +button.bg-success:hover, +button.bg-success:focus { background-color: #00543c !important; } .bg-info { background-color: #bfdbf7 !important; } -a.bg-info:focus { - background-color: #92c2f1 !important; } -a.bg-info:hover { +a.bg-info:hover, a.bg-info:focus, +button.bg-info:hover, +button.bg-info:focus { background-color: #92c2f1 !important; } .bg-warning { background-color: #f3bf51 !important; } -a.bg-warning:focus { - background-color: #f0ad21 !important; } -a.bg-warning:hover { +a.bg-warning:hover, a.bg-warning:focus, +button.bg-warning:hover, +button.bg-warning:focus { background-color: #f0ad21 !important; } .bg-danger { background-color: #e21c2c !important; } -a.bg-danger:focus { - background-color: #b51623 !important; } -a.bg-danger:hover { +a.bg-danger:hover, a.bg-danger:focus, +button.bg-danger:hover, +button.bg-danger:focus { background-color: #b51623 !important; } .bg-light { background-color: #f5f7fa !important; } -a.bg-light:focus { - background-color: #d3dce9 !important; } -a.bg-light:hover { +a.bg-light:hover, a.bg-light:focus, +button.bg-light:hover, +button.bg-light:focus { background-color: #d3dce9 !important; } .bg-dark { background-color: #343a40 !important; } -a.bg-dark:focus { - background-color: #1d2124 !important; } -a.bg-dark:hover { +a.bg-dark:hover, a.bg-dark:focus, +button.bg-dark:hover, +button.bg-dark:focus { background-color: #1d2124 !important; } .bg-alert { background-color: #e21c2c !important; } -a.bg-alert:focus { +a.bg-alert:hover, a.bg-alert:focus, +button.bg-alert:hover, +button.bg-alert:focus { background-color: #b51623 !important; } -a.bg-alert:hover { - background-color: #b51623 !important; } - -.bg-gradient-primary { - background: #11b3e3 linear-gradient(180deg, #33bde6, #11b3e3) repeat-x !important; } - -.bg-gradient-secondary { - background: #868e96 linear-gradient(180deg, #979ea5, #868e96) repeat-x !important; } - -.bg-gradient-success { - background: #008761 linear-gradient(180deg, #259878, #008761) repeat-x !important; } - -.bg-gradient-info { - background: #bfdbf7 linear-gradient(180deg, #c7dff7, #bfdbf7) repeat-x !important; } - -.bg-gradient-warning { - background: #f3bf51 linear-gradient(180deg, #f3c76a, #f3bf51) repeat-x !important; } - -.bg-gradient-danger { - background: #e21c2c linear-gradient(180deg, #e53d4b, #e21c2c) repeat-x !important; } - -.bg-gradient-light { - background: #f5f7fa linear-gradient(180deg, #f5f7fa, #f5f7fa) repeat-x !important; } - -.bg-gradient-dark { - background: #343a40 linear-gradient(180deg, #51565c, #343a40) repeat-x !important; } - -.bg-gradient-alert { - background: #e21c2c linear-gradient(180deg, #e53d4b, #e21c2c) repeat-x !important; } .bg-white { background-color: #fff !important; } @@ -4445,6 +4330,18 @@ a.bg-alert:hover { .border { border: 1px solid #e9ecef !important; } +.border-top { + border-top: 1px solid #e9ecef !important; } + +.border-right { + border-right: 1px solid #e9ecef !important; } + +.border-bottom { + border-bottom: 1px solid #e9ecef !important; } + +.border-left { + border-left: 1px solid #e9ecef !important; } + .border-0 { border: 0 !important; } @@ -4461,7 +4358,7 @@ a.bg-alert:hover { border-left: 0 !important; } .border-primary { - border-color: #11b3e3 !important; } + border-color: #0072b1 !important; } .border-secondary { border-color: #868e96 !important; } @@ -4655,28 +4552,33 @@ a.bg-alert:hover { .d-xl-inline-flex { display: inline-flex !important; } } -.d-print-block { - display: none !important; } - @media print { - .d-print-block { - display: block !important; } } +@media print { + .d-print-none { + display: none !important; } -.d-print-inline { - display: none !important; } - @media print { - .d-print-inline { - display: inline !important; } } + .d-print-inline { + display: inline !important; } -.d-print-inline-block { - display: none !important; } - @media print { - .d-print-inline-block { - display: inline-block !important; } } + .d-print-inline-block { + display: inline-block !important; } -@media print { - .d-print-none { - display: none !important; } } + .d-print-block { + display: block !important; } + + .d-print-table { + display: table !important; } + + .d-print-table-row { + display: table-row !important; } + + .d-print-table-cell { + display: table-cell !important; } + + .d-print-flex { + display: flex !important; } + .d-print-inline-flex { + display: inline-flex !important; } } .embed-responsive { position: relative; display: block; @@ -6592,75 +6494,57 @@ a.bg-alert:hover { color: #fff !important; } .text-primary { - color: #11b3e3 !important; } + color: #0072b1 !important; } -a.text-primary:focus { - color: #0d8eb4 !important; } -a.text-primary:hover { - color: #0d8eb4 !important; } +a.text-primary:hover, a.text-primary:focus { + color: #00517e !important; } .text-secondary { color: #868e96 !important; } -a.text-secondary:focus { - color: #6c757d !important; } -a.text-secondary:hover { +a.text-secondary:hover, a.text-secondary:focus { color: #6c757d !important; } .text-success { color: #008761 !important; } -a.text-success:focus { - color: #00543c !important; } -a.text-success:hover { +a.text-success:hover, a.text-success:focus { color: #00543c !important; } .text-info { color: #bfdbf7 !important; } -a.text-info:focus { - color: #92c2f1 !important; } -a.text-info:hover { +a.text-info:hover, a.text-info:focus { color: #92c2f1 !important; } .text-warning { color: #f3bf51 !important; } -a.text-warning:focus { - color: #f0ad21 !important; } -a.text-warning:hover { +a.text-warning:hover, a.text-warning:focus { color: #f0ad21 !important; } .text-danger { color: #e21c2c !important; } -a.text-danger:focus { - color: #b51623 !important; } -a.text-danger:hover { +a.text-danger:hover, a.text-danger:focus { color: #b51623 !important; } .text-light { color: #f5f7fa !important; } -a.text-light:focus { - color: #d3dce9 !important; } -a.text-light:hover { +a.text-light:hover, a.text-light:focus { color: #d3dce9 !important; } .text-dark { color: #343a40 !important; } -a.text-dark:focus { - color: #1d2124 !important; } -a.text-dark:hover { +a.text-dark:hover, a.text-dark:focus { color: #1d2124 !important; } .text-alert { color: #e21c2c !important; } -a.text-alert:focus { - color: #b51623 !important; } -a.text-alert:hover { +a.text-alert:hover, a.text-alert:focus { color: #b51623 !important; } .text-muted { @@ -6679,29 +6563,84 @@ a.text-alert:hover { .invisible { visibility: hidden !important; } +@media print { + *, + *::before, + *::after { + text-shadow: none !important; + box-shadow: none !important; } + + a:not(.btn) { + text-decoration: underline; } + + abbr[title]::after { + content: " (" attr(title) ")"; } + + pre { + white-space: pre-wrap !important; } + + pre, + blockquote { + border: 1px solid #999; + page-break-inside: avoid; } + + thead { + display: table-header-group; } + + tr, + img { + page-break-inside: avoid; } + + p, + h2, + h3 { + orphans: 3; + widows: 3; } + + h2, + h3 { + page-break-after: avoid; } + + @page { + size: a3; } + body { + min-width: 992px !important; } + + .container { + min-width: 992px !important; } + + .navbar { + display: none; } + + .badge { + border: 1px solid #000; } + + .table { + border-collapse: collapse !important; } + .table td, + .table th { + background-color: #fff !important; } + + .table-bordered th, + .table-bordered td { + border: 1px solid #ddd !important; } } html { position: relative; min-height: 100%; } .alert-primary.alert-dismissible .close { - color: #095d76; + color: #003b5c; opacity: 0.75; text-shadow: none; } - .alert-primary.alert-dismissible .close:focus { - color: #095d76; - opacity: 1; } - .alert-primary.alert-dismissible .close:hover { - color: #095d76; + .alert-primary.alert-dismissible .close:hover, .alert-primary.alert-dismissible .close:focus { + color: #003b5c; opacity: 1; } .alert-secondary.alert-dismissible .close { color: #464a4e; opacity: 0.75; text-shadow: none; } - .alert-secondary.alert-dismissible .close:focus { - color: #464a4e; - opacity: 1; } - .alert-secondary.alert-dismissible .close:hover { + .alert-secondary.alert-dismissible .close:hover, .alert-secondary.alert-dismissible .close:focus { color: #464a4e; opacity: 1; } @@ -6709,10 +6648,7 @@ html { color: #004632; opacity: 0.75; text-shadow: none; } - .alert-success.alert-dismissible .close:focus, .alert-dismissible.alert-notice .close:focus { - color: #004632; - opacity: 1; } - .alert-success.alert-dismissible .close:hover, .alert-dismissible.alert-notice .close:hover { + .alert-success.alert-dismissible .close:hover, .alert-dismissible.alert-notice .close:hover, .alert-success.alert-dismissible .close:focus, .alert-dismissible.alert-notice .close:focus { color: #004632; opacity: 1; } @@ -6720,10 +6656,7 @@ html { color: #637280; opacity: 0.75; text-shadow: none; } - .alert-info.alert-dismissible .close:focus { - color: #637280; - opacity: 1; } - .alert-info.alert-dismissible .close:hover { + .alert-info.alert-dismissible .close:hover, .alert-info.alert-dismissible .close:focus { color: #637280; opacity: 1; } @@ -6731,10 +6664,7 @@ html { color: #7e632a; opacity: 0.75; text-shadow: none; } - .alert-warning.alert-dismissible .close:focus { - color: #7e632a; - opacity: 1; } - .alert-warning.alert-dismissible .close:hover { + .alert-warning.alert-dismissible .close:hover, .alert-warning.alert-dismissible .close:focus { color: #7e632a; opacity: 1; } @@ -6742,10 +6672,7 @@ html { color: #760f17; opacity: 0.75; text-shadow: none; } - .alert-danger.alert-dismissible .close:focus, .alert-dismissible.alert-alert .close:focus { - color: #760f17; - opacity: 1; } - .alert-danger.alert-dismissible .close:hover, .alert-dismissible.alert-alert .close:hover { + .alert-danger.alert-dismissible .close:hover, .alert-dismissible.alert-alert .close:hover, .alert-danger.alert-dismissible .close:focus, .alert-dismissible.alert-alert .close:focus { color: #760f17; opacity: 1; } @@ -6753,10 +6680,7 @@ html { color: #7f8082; opacity: 0.75; text-shadow: none; } - .alert-light.alert-dismissible .close:focus { - color: #7f8082; - opacity: 1; } - .alert-light.alert-dismissible .close:hover { + .alert-light.alert-dismissible .close:hover, .alert-light.alert-dismissible .close:focus { color: #7f8082; opacity: 1; } @@ -6764,10 +6688,7 @@ html { color: #1b1e21; opacity: 0.75; text-shadow: none; } - .alert-dark.alert-dismissible .close:focus { - color: #1b1e21; - opacity: 1; } - .alert-dark.alert-dismissible .close:hover { + .alert-dark.alert-dismissible .close:hover, .alert-dark.alert-dismissible .close:focus { color: #1b1e21; opacity: 1; } @@ -6775,10 +6696,7 @@ html { color: #760f17; opacity: 0.75; text-shadow: none; } - .alert-alert.alert-dismissible .close:focus { - color: #760f17; - opacity: 1; } - .alert-alert.alert-dismissible .close:hover { + .alert-alert.alert-dismissible .close:hover, .alert-alert.alert-dismissible .close:focus { color: #760f17; opacity: 1; } @@ -6787,219 +6705,201 @@ html { .btn-primary { color: #fff; - background: linear-gradient(to right, #11b3e3, #1fbfee); - background-color: #11b3e3; - border-color: #11b3e3; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); } + background-color: #0072b1; + border-color: #0072b1; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); } .btn-primary:hover { color: #fff; - background: linear-gradient(to right, #0e97bf, #11b3e3); - background-color: #0e97bf; - border-color: #0d8eb4; } + background-color: #00598b; + border-color: #00517e; } .btn-primary:focus, .btn-primary.focus { - background-color: #0e97bf; - box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(14, 151, 191, 0.25); } + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.15rem rgba(0, 114, 177, 0.5); } .btn-primary.disabled, .btn-primary:disabled { - background-color: #11b3e3; - border-color: #11b3e3; - pointer-events: none; } - .btn-primary:active, .btn-primary.active, .show > .btn-primary.dropdown-toggle { - background-color: #0e97bf; - background-image: none; - border-color: #0d8eb4; - box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); } + color: #fff; + background-color: #0072b1; + border-color: #0072b1; } + .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle { + color: #fff; + background-color: #00517e; + border-color: #004971; } + .btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-primary.dropdown-toggle:focus { + box-shadow: 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.15rem rgba(0, 114, 177, 0.5); } .btn-secondary { color: #fff; - background: linear-gradient(to right, #868e96, #949ba2); background-color: #868e96; border-color: #868e96; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); } + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); } .btn-secondary:hover { color: #fff; - background: linear-gradient(to right, #727b84, #868e96); background-color: #727b84; border-color: #6c757d; } .btn-secondary:focus, .btn-secondary.focus { - background-color: #727b84; - box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(114, 123, 132, 0.25); } + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.15rem rgba(134, 142, 150, 0.5); } .btn-secondary.disabled, .btn-secondary:disabled { + color: #fff; background-color: #868e96; - border-color: #868e96; - pointer-events: none; } - .btn-secondary:active, .btn-secondary.active, .show > .btn-secondary.dropdown-toggle { - background-color: #727b84; - background-image: none; - border-color: #6c757d; - box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); } + border-color: #868e96; } + .btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active, .show > .btn-secondary.dropdown-toggle { + color: #fff; + background-color: #6c757d; + border-color: #666e76; } + .btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus, .show > .btn-secondary.dropdown-toggle:focus { + box-shadow: 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.15rem rgba(134, 142, 150, 0.5); } .btn-success { color: #fff; - background: linear-gradient(to right, #008761, #00a173); background-color: #008761; border-color: #008761; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); } + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); } .btn-success:hover { color: #fff; - background: linear-gradient(to right, #006146, #008761); background-color: #006146; border-color: #00543c; } .btn-success:focus, .btn-success.focus { - background-color: #006146; - box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(0, 97, 70, 0.25); } + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.15rem rgba(0, 135, 97, 0.5); } .btn-success.disabled, .btn-success:disabled { + color: #fff; background-color: #008761; - border-color: #008761; - pointer-events: none; } - .btn-success:active, .btn-success.active, .show > .btn-success.dropdown-toggle { - background-color: #006146; - background-image: none; - border-color: #00543c; - box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); } + border-color: #008761; } + .btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active, .show > .btn-success.dropdown-toggle { + color: #fff; + background-color: #00543c; + border-color: #004733; } + .btn-success:not(:disabled):not(.disabled):active:focus, .btn-success:not(:disabled):not(.disabled).active:focus, .show > .btn-success.dropdown-toggle:focus { + box-shadow: 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.15rem rgba(0, 135, 97, 0.5); } .btn-info { - color: #111; - background: linear-gradient(to right, #bfdbf7, #d6e8fa); + color: #212529; background-color: #bfdbf7; border-color: #bfdbf7; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); } + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); } .btn-info:hover { - color: #111; - background: linear-gradient(to right, #9dc8f3, #bfdbf7); + color: #212529; background-color: #9dc8f3; border-color: #92c2f1; } .btn-info:focus, .btn-info.focus { - background-color: #9dc8f3; - box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(157, 200, 243, 0.25); } + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.15rem rgba(191, 219, 247, 0.5); } .btn-info.disabled, .btn-info:disabled { + color: #212529; background-color: #bfdbf7; - border-color: #bfdbf7; - pointer-events: none; } - .btn-info:active, .btn-info.active, .show > .btn-info.dropdown-toggle { - background-color: #9dc8f3; - background-image: none; - border-color: #92c2f1; - box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); } + border-color: #bfdbf7; } + .btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled).active, .show > .btn-info.dropdown-toggle { + color: #212529; + background-color: #92c2f1; + border-color: #86bbf0; } + .btn-info:not(:disabled):not(.disabled):active:focus, .btn-info:not(:disabled):not(.disabled).active:focus, .show > .btn-info.dropdown-toggle:focus { + box-shadow: 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.15rem rgba(191, 219, 247, 0.5); } .btn-warning { - color: #111; - background: linear-gradient(to right, #f3bf51, #f5c869); + color: #212529; background-color: #f3bf51; border-color: #f3bf51; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); } + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); } .btn-warning:hover { - color: #111; - background: linear-gradient(to right, #f1b22d, #f3bf51); + color: #212529; background-color: #f1b22d; border-color: #f0ad21; } .btn-warning:focus, .btn-warning.focus { - background-color: #f1b22d; - box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(241, 178, 45, 0.25); } + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.15rem rgba(243, 191, 81, 0.5); } .btn-warning.disabled, .btn-warning:disabled { + color: #212529; background-color: #f3bf51; - border-color: #f3bf51; - pointer-events: none; } - .btn-warning:active, .btn-warning.active, .show > .btn-warning.dropdown-toggle { - background-color: #f1b22d; - background-image: none; - border-color: #f0ad21; - box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); } + border-color: #f3bf51; } + .btn-warning:not(:disabled):not(.disabled):active, .btn-warning:not(:disabled):not(.disabled).active, .show > .btn-warning.dropdown-toggle { + color: #212529; + background-color: #f0ad21; + border-color: #efa915; } + .btn-warning:not(:disabled):not(.disabled):active:focus, .btn-warning:not(:disabled):not(.disabled).active:focus, .show > .btn-warning.dropdown-toggle:focus { + box-shadow: 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.15rem rgba(243, 191, 81, 0.5); } .btn-danger { color: #fff; - background: linear-gradient(to right, #e21c2c, #e63240); background-color: #e21c2c; border-color: #e21c2c; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); } + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); } .btn-danger:hover { color: #fff; - background: linear-gradient(to right, #c01825, #e21c2c); background-color: #c01825; border-color: #b51623; } .btn-danger:focus, .btn-danger.focus { - background-color: #c01825; - box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(192, 24, 37, 0.25); } + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.15rem rgba(226, 28, 44, 0.5); } .btn-danger.disabled, .btn-danger:disabled { + color: #fff; background-color: #e21c2c; - border-color: #e21c2c; - pointer-events: none; } - .btn-danger:active, .btn-danger.active, .show > .btn-danger.dropdown-toggle { - background-color: #c01825; - background-image: none; - border-color: #b51623; - box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); } + border-color: #e21c2c; } + .btn-danger:not(:disabled):not(.disabled):active, .btn-danger:not(:disabled):not(.disabled).active, .show > .btn-danger.dropdown-toggle { + color: #fff; + background-color: #b51623; + border-color: #a91521; } + .btn-danger:not(:disabled):not(.disabled):active:focus, .btn-danger:not(:disabled):not(.disabled).active:focus, .show > .btn-danger.dropdown-toggle:focus { + box-shadow: 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.15rem rgba(226, 28, 44, 0.5); } .btn-light { - color: #111; - background: linear-gradient(to right, #f5f7fa, white); + color: #212529; background-color: #f5f7fa; border-color: #f5f7fa; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); } + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); } .btn-light:hover { - color: #111; - background: linear-gradient(to right, #dce3ed, #f5f7fa); + color: #212529; background-color: #dce3ed; border-color: #d3dce9; } .btn-light:focus, .btn-light.focus { - background-color: #dce3ed; - box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(220, 227, 237, 0.25); } + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.15rem rgba(245, 247, 250, 0.5); } .btn-light.disabled, .btn-light:disabled { + color: #212529; background-color: #f5f7fa; - border-color: #f5f7fa; - pointer-events: none; } - .btn-light:active, .btn-light.active, .show > .btn-light.dropdown-toggle { - background-color: #dce3ed; - background-image: none; - border-color: #d3dce9; - box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); } + border-color: #f5f7fa; } + .btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled).active, .show > .btn-light.dropdown-toggle { + color: #212529; + background-color: #d3dce9; + border-color: #cbd5e5; } + .btn-light:not(:disabled):not(.disabled):active:focus, .btn-light:not(:disabled):not(.disabled).active:focus, .show > .btn-light.dropdown-toggle:focus { + box-shadow: 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.15rem rgba(245, 247, 250, 0.5); } .btn-dark { color: #fff; - background: linear-gradient(to right, #343a40, #3f474e); background-color: #343a40; border-color: #343a40; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); } + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); } .btn-dark:hover { color: #fff; - background: linear-gradient(to right, #23272b, #343a40); background-color: #23272b; border-color: #1d2124; } .btn-dark:focus, .btn-dark.focus { - background-color: #23272b; - box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(35, 39, 43, 0.25); } + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.15rem rgba(52, 58, 64, 0.5); } .btn-dark.disabled, .btn-dark:disabled { + color: #fff; background-color: #343a40; - border-color: #343a40; - pointer-events: none; } - .btn-dark:active, .btn-dark.active, .show > .btn-dark.dropdown-toggle { - background-color: #23272b; - background-image: none; - border-color: #1d2124; - box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); } + border-color: #343a40; } + .btn-dark:not(:disabled):not(.disabled):active, .btn-dark:not(:disabled):not(.disabled).active, .show > .btn-dark.dropdown-toggle { + color: #fff; + background-color: #1d2124; + border-color: #171a1d; } + .btn-dark:not(:disabled):not(.disabled):active:focus, .btn-dark:not(:disabled):not(.disabled).active:focus, .show > .btn-dark.dropdown-toggle:focus { + box-shadow: 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.15rem rgba(52, 58, 64, 0.5); } .btn-alert { color: #fff; - background: linear-gradient(to right, #e21c2c, #e63240); background-color: #e21c2c; border-color: #e21c2c; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); } + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); } .btn-alert:hover { color: #fff; - background: linear-gradient(to right, #c01825, #e21c2c); background-color: #c01825; border-color: #b51623; } .btn-alert:focus, .btn-alert.focus { - background-color: #c01825; - box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(192, 24, 37, 0.25); } + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.15rem rgba(226, 28, 44, 0.5); } .btn-alert.disabled, .btn-alert:disabled { + color: #fff; background-color: #e21c2c; - border-color: #e21c2c; - pointer-events: none; } - .btn-alert:active, .btn-alert.active, .show > .btn-alert.dropdown-toggle { - background-color: #c01825; - background-image: none; - border-color: #b51623; - box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); } + border-color: #e21c2c; } + .btn-alert:not(:disabled):not(.disabled):active, .btn-alert:not(:disabled):not(.disabled).active, .show > .btn-alert.dropdown-toggle { + color: #fff; + background-color: #b51623; + border-color: #a91521; } + .btn-alert:not(:disabled):not(.disabled):active:focus, .btn-alert:not(:disabled):not(.disabled).active:focus, .show > .btn-alert.dropdown-toggle:focus { + box-shadow: 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.15rem rgba(226, 28, 44, 0.5); } .form-control { transition: all 150ms ease-in-out; } @@ -7052,7 +6952,7 @@ select.form-control { .loader { animation: loader 0.95s infinite linear; border-bottom: 0.25rem solid transparent; - border-left: 0.25rem solid #11b3e3; + border-left: 0.25rem solid #0072b1; border-right: 0.25rem solid transparent; border-top: 0.25rem solid transparent; position: relative; @@ -7251,6 +7151,22 @@ button[data-toggle="tooltip"] { .navbar { box-shadow: 0 0 0 1px rgba(62, 64, 64, 0.05), 0 1px 3px rgba(62, 64, 64, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05); } +.page-header { + padding-bottom: 3rem; + padding-top: 3rem; + text-align: center; } + +.page-title { + background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+"); + background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 62%, rgba(255, 244, 1, 0.94) 79%, #fff401 80%, rgba(255, 244, 1, 0) 98%); + color: inherit; + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00fff401', GradientType=0 ); + display: inline-block; } + +.page-subtitle { + color: #868e96; + margin-bottom: 0; } + .search-group { display: flex; flex: 100%; @@ -7267,7 +7183,7 @@ button[data-toggle="tooltip"] { @media (min-width: 992px) { .search-group .search-group-button { min-width: 130px; } } - @media (max-width: 991px) { + @media (max-width: 991.98px) { .search-group .search-group-input { display: block; margin: 0 0 0.5rem !important; @@ -7299,11 +7215,11 @@ button[data-toggle="tooltip"] { margin-left: 0.25rem; } .toast-primary { - color: #095d76; - background-color: #cff0f9; - border-color: #bceaf7; } + color: #003b5c; + background-color: #cce3ef; + border-color: #b8d8e9; } .toast-primary .close { - color: #095d76; + color: #003b5c; opacity: 0.75; text-shadow: none; } .toast-primary .close:hover, .toast-primary .close:focus { @@ -7399,7 +7315,7 @@ button[data-toggle="tooltip"] { .bg-primary-hover:hover { transition: all 0.2s ease-in-out; - background-color: #11b3e3 !important; } + background-color: #0072b1 !important; } .bg-secondary-hover:hover { transition: all 0.2s ease-in-out; @@ -7439,7 +7355,7 @@ button[data-toggle="tooltip"] { .o-75 { opacity: 0.75; } -@media (max-width: 575px) { +@media (max-width: 575.98px) { .w-25 { width: 25% !important; } @@ -7463,7 +7379,7 @@ button[data-toggle="tooltip"] { .h-100 { height: 100% !important; } } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .w-sm-25 { width: 25% !important; } @@ -7487,7 +7403,7 @@ button[data-toggle="tooltip"] { .h-sm-100 { height: 100% !important; } } -@media (max-width: 991px) { +@media (max-width: 991.98px) { .w-md-25 { width: 25% !important; } @@ -7511,7 +7427,7 @@ button[data-toggle="tooltip"] { .h-md-100 { height: 100% !important; } } -@media (max-width: 1199px) { +@media (max-width: 1199.98px) { .w-lg-25 { width: 25% !important; } diff --git a/docs/_site/content/alerts.html b/docs/_site/content/alerts.html index 7f284a6..aac0439 100644 --- a/docs/_site/content/alerts.html +++ b/docs/_site/content/alerts.html @@ -14,27 +14,15 @@
- - - nest - - - - - - - - - - - - - - ProctorU Nest + + + + + ProctorU Hootstrap
-
-
- Alerts -
+
+

+ Alerts +

-

Flash messages, or alerts, inform users of successful or pending actions. Use them sparingly. Don’t show more than one at a time.

+
Flash messages, or alerts, inform users of successful or pending actions. Use them sparingly. Don’t show more than one at a time.
+
-

Default alerts

+
Default alerts

Alerts are available for any length of text. For proper styling, use one of the 5 required contextual classes (e.g., .alert-success).

-
+
@@ -95,7 +90,7 @@

Default alerts

This is a primary alert. </div> -
+
@@ -105,7 +100,7 @@

Default alerts

This is a secondary alert. </div> -
+
@@ -115,7 +110,7 @@

Default alerts

This is a success alert. </div> -
+
@@ -125,7 +120,7 @@

Default alerts

This is a danger alert. </div> -
+
@@ -135,12 +130,12 @@

Default alerts

This is a warning alert. </div> - +

Use the .alert-link utility class to quickly provide matching colored links within any alert.

-
+
@@ -150,7 +145,7 @@ This is a primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div> -
+
@@ -160,7 +155,7 @@ This is a secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div> -
+
@@ -170,7 +165,7 @@ This is a success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div> -
+
@@ -180,7 +175,7 @@ This is a danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div> -
+
@@ -190,12 +185,12 @@ This is a warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div> -

Additional content

+
Additional content

Alerts can also contain additional HTML elements like headings, paragraphs and dividers.

-
+