Investigate bootstrap update to 4.6.x
We currently tie the bootstrap version to 4.5.3. We should consider updating it to 4.6.2. The diff on the CSS is not as straight forward as I'd like it to be, so an upgrade with integration branches in GitLab & Customers GitLab seems like the way forward.
Diff on CSS
diff --git a/dist/index.css b/dist/index.css
index ec7b74f8..38044486 100644
--- a/dist/index.css
+++ b/dist/index.css
@@ -208,9 +208,8 @@ label {
button {
border-radius: 0;
}
-button:focus {
- outline: 1px dotted;
- outline: 5px auto -webkit-focus-ring-color;
+button:focus:not(:focus-visible) {
+ outline: 0;
}
button,
input,
@@ -644,48 +643,48 @@ pre code {
max-width: 100%;
}
.col-1 {
- flex: 0 0 8.3333333333%;
- max-width: 8.3333333333%;
+ flex: 0 0 8.33333333%;
+ max-width: 8.33333333%;
}
.col-2 {
- flex: 0 0 16.6666666667%;
- max-width: 16.6666666667%;
+ flex: 0 0 16.66666667%;
+ max-width: 16.66666667%;
}
.col-3 {
flex: 0 0 25%;
max-width: 25%;
}
.col-4 {
- flex: 0 0 33.3333333333%;
- max-width: 33.3333333333%;
+ flex: 0 0 33.33333333%;
+ max-width: 33.33333333%;
}
.col-5 {
- flex: 0 0 41.6666666667%;
- max-width: 41.6666666667%;
+ flex: 0 0 41.66666667%;
+ max-width: 41.66666667%;
}
.col-6 {
flex: 0 0 50%;
max-width: 50%;
}
.col-7 {
- flex: 0 0 58.3333333333%;
- max-width: 58.3333333333%;
+ flex: 0 0 58.33333333%;
+ max-width: 58.33333333%;
}
.col-8 {
- flex: 0 0 66.6666666667%;
- max-width: 66.6666666667%;
+ flex: 0 0 66.66666667%;
+ max-width: 66.66666667%;
}
.col-9 {
flex: 0 0 75%;
max-width: 75%;
}
.col-10 {
- flex: 0 0 83.3333333333%;
- max-width: 83.3333333333%;
+ flex: 0 0 83.33333333%;
+ max-width: 83.33333333%;
}
.col-11 {
- flex: 0 0 91.6666666667%;
- max-width: 91.6666666667%;
+ flex: 0 0 91.66666667%;
+ max-width: 91.66666667%;
}
.col-12 {
flex: 0 0 100%;
@@ -737,37 +736,37 @@ pre code {
order: 12;
}
.offset-1 {
- margin-left: 8.3333333333%;
+ margin-left: 8.33333333%;
}
.offset-2 {
- margin-left: 16.6666666667%;
+ margin-left: 16.66666667%;
}
.offset-3 {
margin-left: 25%;
}
.offset-4 {
- margin-left: 33.3333333333%;
+ margin-left: 33.33333333%;
}
.offset-5 {
- margin-left: 41.6666666667%;
+ margin-left: 41.66666667%;
}
.offset-6 {
margin-left: 50%;
}
.offset-7 {
- margin-left: 58.3333333333%;
+ margin-left: 58.33333333%;
}
.offset-8 {
- margin-left: 66.6666666667%;
+ margin-left: 66.66666667%;
}
.offset-9 {
margin-left: 75%;
}
.offset-10 {
- margin-left: 83.3333333333%;
+ margin-left: 83.33333333%;
}
.offset-11 {
- margin-left: 91.6666666667%;
+ margin-left: 91.66666667%;
}
@media (min-width: 576px) {
.col-sm {
@@ -805,48 +804,48 @@ pre code {
max-width: 100%;
}
.col-sm-1 {
- flex: 0 0 8.3333333333%;
- max-width: 8.3333333333%;
+ flex: 0 0 8.33333333%;
+ max-width: 8.33333333%;
}
.col-sm-2 {
- flex: 0 0 16.6666666667%;
- max-width: 16.6666666667%;
+ flex: 0 0 16.66666667%;
+ max-width: 16.66666667%;
}
.col-sm-3 {
flex: 0 0 25%;
max-width: 25%;
}
.col-sm-4 {
- flex: 0 0 33.3333333333%;
- max-width: 33.3333333333%;
+ flex: 0 0 33.33333333%;
+ max-width: 33.33333333%;
}
.col-sm-5 {
- flex: 0 0 41.6666666667%;
- max-width: 41.6666666667%;
+ flex: 0 0 41.66666667%;
+ max-width: 41.66666667%;
}
.col-sm-6 {
flex: 0 0 50%;
max-width: 50%;
}
.col-sm-7 {
- flex: 0 0 58.3333333333%;
- max-width: 58.3333333333%;
+ flex: 0 0 58.33333333%;
+ max-width: 58.33333333%;
}
.col-sm-8 {
- flex: 0 0 66.6666666667%;
- max-width: 66.6666666667%;
+ flex: 0 0 66.66666667%;
+ max-width: 66.66666667%;
}
.col-sm-9 {
flex: 0 0 75%;
max-width: 75%;
}
.col-sm-10 {
- flex: 0 0 83.3333333333%;
- max-width: 83.3333333333%;
+ flex: 0 0 83.33333333%;
+ max-width: 83.33333333%;
}
.col-sm-11 {
- flex: 0 0 91.6666666667%;
- max-width: 91.6666666667%;
+ flex: 0 0 91.66666667%;
+ max-width: 91.66666667%;
}
.col-sm-12 {
flex: 0 0 100%;
@@ -901,37 +900,37 @@ pre code {
margin-left: 0;
}
.offset-sm-1 {
- margin-left: 8.3333333333%;
+ margin-left: 8.33333333%;
}
.offset-sm-2 {
- margin-left: 16.6666666667%;
+ margin-left: 16.66666667%;
}
.offset-sm-3 {
margin-left: 25%;
}
.offset-sm-4 {
- margin-left: 33.3333333333%;
+ margin-left: 33.33333333%;
}
.offset-sm-5 {
- margin-left: 41.6666666667%;
+ margin-left: 41.66666667%;
}
.offset-sm-6 {
margin-left: 50%;
}
.offset-sm-7 {
- margin-left: 58.3333333333%;
+ margin-left: 58.33333333%;
}
.offset-sm-8 {
- margin-left: 66.6666666667%;
+ margin-left: 66.66666667%;
}
.offset-sm-9 {
margin-left: 75%;
}
.offset-sm-10 {
- margin-left: 83.3333333333%;
+ margin-left: 83.33333333%;
}
.offset-sm-11 {
- margin-left: 91.6666666667%;
+ margin-left: 91.66666667%;
}
}
@media (min-width: 768px) {
@@ -970,48 +969,48 @@ pre code {
max-width: 100%;
}
.col-md-1 {
- flex: 0 0 8.3333333333%;
- max-width: 8.3333333333%;
+ flex: 0 0 8.33333333%;
+ max-width: 8.33333333%;
}
.col-md-2 {
- flex: 0 0 16.6666666667%;
- max-width: 16.6666666667%;
+ flex: 0 0 16.66666667%;
+ max-width: 16.66666667%;
}
.col-md-3 {
flex: 0 0 25%;
max-width: 25%;
}
.col-md-4 {
- flex: 0 0 33.3333333333%;
- max-width: 33.3333333333%;
+ flex: 0 0 33.33333333%;
+ max-width: 33.33333333%;
}
.col-md-5 {
- flex: 0 0 41.6666666667%;
- max-width: 41.6666666667%;
+ flex: 0 0 41.66666667%;
+ max-width: 41.66666667%;
}
.col-md-6 {
flex: 0 0 50%;
max-width: 50%;
}
.col-md-7 {
- flex: 0 0 58.3333333333%;
- max-width: 58.3333333333%;
+ flex: 0 0 58.33333333%;
+ max-width: 58.33333333%;
}
.col-md-8 {
- flex: 0 0 66.6666666667%;
- max-width: 66.6666666667%;
+ flex: 0 0 66.66666667%;
+ max-width: 66.66666667%;
}
.col-md-9 {
flex: 0 0 75%;
max-width: 75%;
}
.col-md-10 {
- flex: 0 0 83.3333333333%;
- max-width: 83.3333333333%;
+ flex: 0 0 83.33333333%;
+ max-width: 83.33333333%;
}
.col-md-11 {
- flex: 0 0 91.6666666667%;
- max-width: 91.6666666667%;
+ flex: 0 0 91.66666667%;
+ max-width: 91.66666667%;
}
.col-md-12 {
flex: 0 0 100%;
@@ -1066,37 +1065,37 @@ pre code {
margin-left: 0;
}
.offset-md-1 {
- margin-left: 8.3333333333%;
+ margin-left: 8.33333333%;
}
.offset-md-2 {
- margin-left: 16.6666666667%;
+ margin-left: 16.66666667%;
}
.offset-md-3 {
margin-left: 25%;
}
.offset-md-4 {
- margin-left: 33.3333333333%;
+ margin-left: 33.33333333%;
}
.offset-md-5 {
- margin-left: 41.6666666667%;
+ margin-left: 41.66666667%;
}
.offset-md-6 {
margin-left: 50%;
}
.offset-md-7 {
- margin-left: 58.3333333333%;
+ margin-left: 58.33333333%;
}
.offset-md-8 {
- margin-left: 66.6666666667%;
+ margin-left: 66.66666667%;
}
.offset-md-9 {
margin-left: 75%;
}
.offset-md-10 {
- margin-left: 83.3333333333%;
+ margin-left: 83.33333333%;
}
.offset-md-11 {
- margin-left: 91.6666666667%;
+ margin-left: 91.66666667%;
}
}
@media (min-width: 992px) {
@@ -1135,48 +1134,48 @@ pre code {
max-width: 100%;
}
.col-lg-1 {
- flex: 0 0 8.3333333333%;
- max-width: 8.3333333333%;
+ flex: 0 0 8.33333333%;
+ max-width: 8.33333333%;
}
.col-lg-2 {
- flex: 0 0 16.6666666667%;
- max-width: 16.6666666667%;
+ flex: 0 0 16.66666667%;
+ max-width: 16.66666667%;
}
.col-lg-3 {
flex: 0 0 25%;
max-width: 25%;
}
.col-lg-4 {
- flex: 0 0 33.3333333333%;
- max-width: 33.3333333333%;
+ flex: 0 0 33.33333333%;
+ max-width: 33.33333333%;
}
.col-lg-5 {
- flex: 0 0 41.6666666667%;
- max-width: 41.6666666667%;
+ flex: 0 0 41.66666667%;
+ max-width: 41.66666667%;
}
.col-lg-6 {
flex: 0 0 50%;
max-width: 50%;
}
.col-lg-7 {
- flex: 0 0 58.3333333333%;
- max-width: 58.3333333333%;
+ flex: 0 0 58.33333333%;
+ max-width: 58.33333333%;
}
.col-lg-8 {
- flex: 0 0 66.6666666667%;
- max-width: 66.6666666667%;
+ flex: 0 0 66.66666667%;
+ max-width: 66.66666667%;
}
.col-lg-9 {
flex: 0 0 75%;
max-width: 75%;
}
.col-lg-10 {
- flex: 0 0 83.3333333333%;
- max-width: 83.3333333333%;
+ flex: 0 0 83.33333333%;
+ max-width: 83.33333333%;
}
.col-lg-11 {
- flex: 0 0 91.6666666667%;
- max-width: 91.6666666667%;
+ flex: 0 0 91.66666667%;
+ max-width: 91.66666667%;
}
.col-lg-12 {
flex: 0 0 100%;
@@ -1231,37 +1230,37 @@ pre code {
margin-left: 0;
}
.offset-lg-1 {
- margin-left: 8.3333333333%;
+ margin-left: 8.33333333%;
}
.offset-lg-2 {
- margin-left: 16.6666666667%;
+ margin-left: 16.66666667%;
}
.offset-lg-3 {
margin-left: 25%;
}
.offset-lg-4 {
- margin-left: 33.3333333333%;
+ margin-left: 33.33333333%;
}
.offset-lg-5 {
- margin-left: 41.6666666667%;
+ margin-left: 41.66666667%;
}
.offset-lg-6 {
margin-left: 50%;
}
.offset-lg-7 {
- margin-left: 58.3333333333%;
+ margin-left: 58.33333333%;
}
.offset-lg-8 {
- margin-left: 66.6666666667%;
+ margin-left: 66.66666667%;
}
.offset-lg-9 {
margin-left: 75%;
}
.offset-lg-10 {
- margin-left: 83.3333333333%;
+ margin-left: 83.33333333%;
}
.offset-lg-11 {
- margin-left: 91.6666666667%;
+ margin-left: 91.66666667%;
}
}
@media (min-width: 1200px) {
@@ -1300,48 +1299,48 @@ pre code {
max-width: 100%;
}
.col-xl-1 {
- flex: 0 0 8.3333333333%;
- max-width: 8.3333333333%;
+ flex: 0 0 8.33333333%;
+ max-width: 8.33333333%;
}
.col-xl-2 {
- flex: 0 0 16.6666666667%;
- max-width: 16.6666666667%;
+ flex: 0 0 16.66666667%;
+ max-width: 16.66666667%;
}
.col-xl-3 {
flex: 0 0 25%;
max-width: 25%;
}
.col-xl-4 {
- flex: 0 0 33.3333333333%;
- max-width: 33.3333333333%;
+ flex: 0 0 33.33333333%;
+ max-width: 33.33333333%;
}
.col-xl-5 {
- flex: 0 0 41.6666666667%;
- max-width: 41.6666666667%;
+ flex: 0 0 41.66666667%;
+ max-width: 41.66666667%;
}
.col-xl-6 {
flex: 0 0 50%;
max-width: 50%;
}
.col-xl-7 {
- flex: 0 0 58.3333333333%;
- max-width: 58.3333333333%;
+ flex: 0 0 58.33333333%;
+ max-width: 58.33333333%;
}
.col-xl-8 {
- flex: 0 0 66.6666666667%;
- max-width: 66.6666666667%;
+ flex: 0 0 66.66666667%;
+ max-width: 66.66666667%;
}
.col-xl-9 {
flex: 0 0 75%;
max-width: 75%;
}
.col-xl-10 {
- flex: 0 0 83.3333333333%;
- max-width: 83.3333333333%;
+ flex: 0 0 83.33333333%;
+ max-width: 83.33333333%;
}
.col-xl-11 {
- flex: 0 0 91.6666666667%;
- max-width: 91.6666666667%;
+ flex: 0 0 91.66666667%;
+ max-width: 91.66666667%;
}
.col-xl-12 {
flex: 0 0 100%;
@@ -1396,37 +1395,37 @@ pre code {
margin-left: 0;
}
.offset-xl-1 {
- margin-left: 8.3333333333%;
+ margin-left: 8.33333333%;
}
.offset-xl-2 {
- margin-left: 16.6666666667%;
+ margin-left: 16.66666667%;
}
.offset-xl-3 {
margin-left: 25%;
}
.offset-xl-4 {
- margin-left: 33.3333333333%;
+ margin-left: 33.33333333%;
}
.offset-xl-5 {
- margin-left: 41.6666666667%;
+ margin-left: 41.66666667%;
}
.offset-xl-6 {
margin-left: 50%;
}
.offset-xl-7 {
- margin-left: 58.3333333333%;
+ margin-left: 58.33333333%;
}
.offset-xl-8 {
- margin-left: 66.6666666667%;
+ margin-left: 66.66666667%;
}
.offset-xl-9 {
margin-left: 75%;
}
.offset-xl-10 {
- margin-left: 83.3333333333%;
+ margin-left: 83.33333333%;
}
.offset-xl-11 {
- margin-left: 91.6666666667%;
+ margin-left: 91.66666667%;
}
}
.table {
@@ -1715,10 +1714,6 @@ pre code {
background-color: initial;
border: 0;
}
-.form-control:-moz-focusring {
- color: transparent;
- text-shadow: 0 0 0 #525252;
-}
.form-control:focus {
color: #525252;
background-color: #fff;
@@ -1741,6 +1736,10 @@ input[type='month'].form-control,
input[type='time'].form-control {
appearance: none;
}
+select.form-control:-moz-focusring {
+ color: transparent;
+ text-shadow: 0 0 0 #525252;
+}
select.form-control:focus::-ms-value {
color: #525252;
background-color: #fff;
@@ -1874,6 +1873,10 @@ textarea.form-control {
background-color: #108548;
border-radius: 0.25rem;
}
+.form-row > .col > .valid-tooltip,
+.form-row > [class*='col-'] > .valid-tooltip {
+ left: 5px;
+}
.is-valid ~ .valid-feedback,
.is-valid ~ .valid-tooltip,
.was-validated :valid ~ .valid-feedback,
@@ -1883,7 +1886,7 @@ textarea.form-control {
.form-control.is-valid,
.was-validated .form-control:valid {
border-color: #108548;
- padding-right: calc(1.5em + 0.75rem);
+ padding-right: calc(1.5em + 0.75rem) !important;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath fill='%23108548' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right calc(0.375em + 0.1875rem) center;
@@ -1894,6 +1897,11 @@ textarea.form-control {
border-color: #108548;
box-shadow: 0 0 0 0.2rem rgba(16, 133, 72, 0.25);
}
+.was-validated select.form-control:valid,
+select.form-control.is-valid {
+ padding-right: 3rem !important;
+ background-position: right 1.5rem center;
+}
.was-validated textarea.form-control:valid,
textarea.form-control.is-valid {
padding-right: calc(1.5em + 0.75rem);
@@ -1902,11 +1910,12 @@ textarea.form-control.is-valid {
.custom-select.is-valid,
.was-validated .custom-select:valid {
border-color: #108548;
- padding-right: calc(0.75em + 2.3125rem);
+ padding-right: calc(0.75em + 2.3125rem) !important;
background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5'%3E%3Cpath fill='%23404040' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E")
- no-repeat right 0.75rem center/8px 10px,
- url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath fill='%23108548' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E")
- #fff no-repeat center right 1.75rem / calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
+ right 0.75rem center/8px 10px no-repeat,
+ #fff
+ url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath fill='%23108548' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E")
+ center right 1.75rem / calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) no-repeat;
}
.custom-select.is-valid:focus,
.was-validated .custom-select:valid:focus {
@@ -1973,6 +1982,10 @@ textarea.form-control.is-valid {
background-color: #dd2b0e;
border-radius: 0.25rem;
}
+.form-row > .col > .invalid-tooltip,
+.form-row > [class*='col-'] > .invalid-tooltip {
+ left: 5px;
+}
.is-invalid ~ .invalid-feedback,
.is-invalid ~ .invalid-tooltip,
.was-validated :invalid ~ .invalid-feedback,
@@ -1982,7 +1995,7 @@ textarea.form-control.is-valid {
.form-control.is-invalid,
.was-validated .form-control:invalid {
border-color: #dd2b0e;
- padding-right: calc(1.5em + 0.75rem);
+ padding-right: calc(1.5em + 0.75rem) !important;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dd2b0e'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3E%3Ccircle cx='6' cy='8.2' r='.6' fill='%23dd2b0e' stroke='none'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right calc(0.375em + 0.1875rem) center;
@@ -1993,6 +2006,11 @@ textarea.form-control.is-valid {
border-color: #dd2b0e;
box-shadow: 0 0 0 0.2rem rgba(221, 43, 14, 0.25);
}
+.was-validated select.form-control:invalid,
+select.form-control.is-invalid {
+ padding-right: 3rem !important;
+ background-position: right 1.5rem center;
+}
.was-validated textarea.form-control:invalid,
textarea.form-control.is-invalid {
padding-right: calc(1.5em + 0.75rem);
@@ -2001,11 +2019,12 @@ textarea.form-control.is-invalid {
.custom-select.is-invalid,
.was-validated .custom-select:invalid {
border-color: #dd2b0e;
- padding-right: calc(0.75em + 2.3125rem);
+ padding-right: calc(0.75em + 2.3125rem) !important;
background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5'%3E%3Cpath fill='%23404040' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E")
- no-repeat right 0.75rem center/8px 10px,
- url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dd2b0e'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3E%3Ccircle cx='6' cy='8.2' r='.6' fill='%23dd2b0e' stroke='none'/%3E%3C/svg%3E")
- #fff no-repeat center right 1.75rem / calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
+ right 0.75rem center/8px 10px no-repeat,
+ #fff
+ url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dd2b0e'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3E%3Ccircle cx='6' cy='8.2' r='.6' fill='%23dd2b0e' stroke='none'/%3E%3C/svg%3E")
+ center right 1.75rem / calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) no-repeat;
}
.custom-select.is-invalid:focus,
.was-validated .custom-select:invalid:focus {
@@ -2917,7 +2936,7 @@ input[type='submit'].btn-block {
.dropdown-item:hover {
color: #232323;
text-decoration: none;
- background-color: #dbdbdb;
+ background-color: #bfbfbf;
}
.dropdown-item.active,
.dropdown-item:active {
@@ -2927,7 +2946,7 @@ input[type='submit'].btn-block {
}
.dropdown-item.disabled,
.dropdown-item:disabled {
- color: #5e5e5e;
+ color: #666;
pointer-events: none;
background-color: initial;
}
@@ -3086,11 +3105,6 @@ input[type='submit'].btn-block {
.input-group > .custom-file .custom-file-input:focus {
z-index: 4;
}
-.input-group > .custom-select:not(:last-child),
-.input-group > .form-control:not(:last-child) {
- border-top-right-radius: 0;
- border-bottom-right-radius: 0;
-}
.input-group > .custom-select:not(:first-child),
.input-group > .form-control:not(:first-child) {
border-top-left-radius: 0;
@@ -3109,6 +3123,17 @@ input[type='submit'].btn-block {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
+.input-group.has-validation > .custom-file:nth-last-child(n + 3) .custom-file-label,
+.input-group.has-validation > .custom-file:nth-last-child(n + 3) .custom-file-label:after,
+.input-group.has-validation > .custom-select:nth-last-child(n + 3),
+.input-group.has-validation > .form-control:nth-last-child(n + 3),
+.input-group:not(.has-validation) > .custom-file:not(:last-child) .custom-file-label,
+.input-group:not(.has-validation) > .custom-file:not(:last-child) .custom-file-label:after,
+.input-group:not(.has-validation) > .custom-select:not(:last-child),
+.input-group:not(.has-validation) > .form-control:not(:last-child) {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+}
.input-group-append,
.input-group-prepend {
display: flex;
@@ -3191,10 +3216,12 @@ input[type='submit'].btn-block {
.input-group-sm > .custom-select {
padding-right: 1.75rem;
}
+.input-group.has-validation > .input-group-append:nth-last-child(n + 3) > .btn,
+.input-group.has-validation > .input-group-append:nth-last-child(n + 3) > .input-group-text,
+.input-group:not(.has-validation) > .input-group-append:not(:last-child) > .btn,
+.input-group:not(.has-validation) > .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),
-.input-group > .input-group-append:not(:last-child) > .btn,
-.input-group > .input-group-append:not(:last-child) > .input-group-text,
.input-group > .input-group-prepend > .btn,
.input-group > .input-group-prepend > .input-group-text {
border-top-right-radius: 0;
@@ -3274,7 +3301,7 @@ input[type='submit'].btn-block {
content: '';
}
.custom-control-label:after {
- background: no-repeat 50%/50% 50%;
+ background: 50%/50% 50% no-repeat;
}
.custom-checkbox .custom-control-label:before {
border-radius: 0.25rem;
@@ -3345,7 +3372,7 @@ input[type='submit'].btn-block {
vertical-align: middle;
background: #fff
url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5'%3E%3Cpath fill='%23404040' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E")
- no-repeat right 0.75rem center/8px 10px;
+ right 0.75rem center/8px 10px no-repeat;
border: 1px solid #868686;
border-radius: 0.25rem;
appearance: none;
@@ -3403,6 +3430,7 @@ input[type='submit'].btn-block {
.custom-file-input {
z-index: 2;
margin: 0;
+ overflow: hidden;
opacity: 0;
}
.custom-file-input:focus ~ .custom-file-label {
@@ -3423,6 +3451,7 @@ input[type='submit'].btn-block {
left: 0;
z-index: 1;
height: calc(1.5em + 0.75rem + 2px);
+ overflow: hidden;
font-weight: 400;
background-color: #fff;
border: 1px solid #868686;
@@ -3455,7 +3484,7 @@ input[type='submit'].btn-block {
appearance: none;
}
.custom-range:focus {
- outline: none;
+ outline: 0;
}
.custom-range:focus::-webkit-slider-thumb {
box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
@@ -3613,10 +3642,8 @@ input[type='submit'].btn-block {
.nav-tabs {
border-bottom: 1px solid #999;
}
-.nav-tabs .nav-item {
- margin-bottom: -1px;
-}
.nav-tabs .nav-link {
+ margin-bottom: -1px;
border: 1px solid transparent;
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
@@ -3738,8 +3765,11 @@ input[type='submit'].btn-block {
height: 1.5em;
vertical-align: middle;
content: '';
- background: no-repeat 50%;
- background-size: 100% 100%;
+ background: 50%/100% 100% no-repeat;
+}
+.navbar-nav-scroll {
+ max-height: 75vh;
+ overflow-y: auto;
}
@media (max-width: 575.98px) {
.navbar-expand-sm > .container,
@@ -3775,6 +3805,9 @@ input[type='submit'].btn-block {
.navbar-expand-sm > .container-xl {
flex-wrap: nowrap;
}
+ .navbar-expand-sm .navbar-nav-scroll {
+ overflow: visible;
+ }
.navbar-expand-sm .navbar-collapse {
display: flex !important;
flex-basis: auto;
@@ -3817,6 +3850,9 @@ input[type='submit'].btn-block {
.navbar-expand-md > .container-xl {
flex-wrap: nowrap;
}
+ .navbar-expand-md .navbar-nav-scroll {
+ overflow: visible;
+ }
.navbar-expand-md .navbar-collapse {
display: flex !important;
flex-basis: auto;
@@ -3859,6 +3895,9 @@ input[type='submit'].btn-block {
.navbar-expand-lg > .container-xl {
flex-wrap: nowrap;
}
+ .navbar-expand-lg .navbar-nav-scroll {
+ overflow: visible;
+ }
.navbar-expand-lg .navbar-collapse {
display: flex !important;
flex-basis: auto;
@@ -3901,6 +3940,9 @@ input[type='submit'].btn-block {
.navbar-expand-xl > .container-xl {
flex-wrap: nowrap;
}
+ .navbar-expand-xl .navbar-nav-scroll {
+ overflow: visible;
+ }
.navbar-expand-xl .navbar-collapse {
display: flex !important;
flex-basis: auto;
@@ -3940,6 +3982,9 @@ input[type='submit'].btn-block {
.navbar-expand > .container-xl {
flex-wrap: nowrap;
}
+.navbar-expand .navbar-nav-scroll {
+ overflow: visible;
+}
.navbar-expand .navbar-collapse {
display: flex !important;
flex-basis: auto;
@@ -4217,6 +4262,7 @@ input[type='submit'].btn-block {
margin-bottom: -1px;
}
.breadcrumb {
+ display: flex;
flex-wrap: wrap;
padding: 0.75rem 1rem;
margin-bottom: 1rem;
@@ -4224,15 +4270,11 @@ input[type='submit'].btn-block {
background-color: #bfbfbf;
border-radius: 0.25rem;
}
-.breadcrumb,
-.breadcrumb-item {
- display: flex;
-}
.breadcrumb-item + .breadcrumb-item {
padding-left: 0.5rem;
}
.breadcrumb-item + .breadcrumb-item:before {
- display: inline-block;
+ float: left;
padding-right: 0.5rem;
color: #5e5e5e;
content: '/';
@@ -5608,8 +5650,11 @@ a.close.disabled {
align-items: center;
justify-content: center;
width: 15%;
+ padding: 0;
color: #fff;
text-align: center;
+ background: none;
+ border: 0;
opacity: 0.5;
transition: opacity 0.15s ease;
}
@@ -5639,7 +5684,7 @@ a.close.disabled {
display: inline-block;
width: 20px;
height: 20px;
- background: no-repeat 50%/100% 100%;
+ background: 50%/100% 100% no-repeat;
}
.carousel-control-prev-icon {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3E%3C/svg%3E");
@@ -6086,7 +6131,7 @@ button.bg-dark:hover {
border: 0;
}
.embed-responsive-21by9:before {
- padding-top: 42.8571428571%;
+ padding-top: 42.85714286%;
}
.embed-responsive-16by9:before {
padding-top: 56.25%;
@@ -9878,12 +9923,10 @@ a.text-dark:hover {
blockquote,
pre {
border: 1px solid #666;
- page-break-inside: avoid;
- }
- thead {
- display: table-header-group;
}
+ blockquote,
img,
+ pre,
tr {
page-break-inside: avoid;
}
@@ -10077,7 +10120,7 @@ a.text-dark:hover {
.b-dropdown-form.disabled,
.b-dropdown-form:disabled {
outline: 0 !important;
- color: #5e5e5e;
+ color: #666;
pointer-events: none;
}
.b-dropdown-text {
Edited by Lukas Eipert