Add v5.0.0 docs (#33648)

2026-06-14 18:42:30 +03:00 · 2021-05-05 22:46:33 +03:00
parent 6c2ff8d371
commit d1334cc7ac
178 changed files with 10190 additions and 5238 deletions
@@ -1,5 +1,5 @@
 /*!
- * Bootstrap Grid v5.0.0-beta3 (https://getbootstrap.com/)
+ * Bootstrap Grid v5.0.0 (https://getbootstrap.com/)
 * Copyright 2011-2021 The Bootstrap Authors
 * Copyright 2011-2021 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
@@ -1,5 +1,5 @@
 /*!
- * Bootstrap Grid v5.0.0-beta3 (https://getbootstrap.com/)
+ * Bootstrap Grid v5.0.0 (https://getbootstrap.com/)
 * Copyright 2011-2021 The Bootstrap Authors
 * Copyright 2011-2021 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
@@ -1,5 +1,5 @@
 /*!
- * Bootstrap Grid v5.0.0-beta3 (https://getbootstrap.com/)
+ * Bootstrap Grid v5.0.0 (https://getbootstrap.com/)
 * Copyright 2011-2021 The Bootstrap Authors
 * Copyright 2011-2021 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
@@ -1,5 +1,5 @@
 /*!
- * Bootstrap Grid v5.0.0-beta3 (https://getbootstrap.com/)
+ * Bootstrap Grid v5.0.0 (https://getbootstrap.com/)
 * Copyright 2011-2021 The Bootstrap Authors
 * Copyright 2011-2021 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
@@ -1,5 +1,5 @@
 /*!
- * Bootstrap Reboot v5.0.0-beta3 (https://getbootstrap.com/)
+ * Bootstrap Reboot v5.0.0 (https://getbootstrap.com/)
 * Copyright 2011-2021 The Bootstrap Authors
 * Copyright 2011-2021 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
@@ -1,5 +1,5 @@
 /*!
- * Bootstrap Reboot v5.0.0-beta3 (https://getbootstrap.com/)
+ * Bootstrap Reboot v5.0.0 (https://getbootstrap.com/)
 * Copyright 2011-2021 The Bootstrap Authors
 * Copyright 2011-2021 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
@@ -1,5 +1,5 @@
 /*!
- * Bootstrap Reboot v5.0.0-beta3 (https://getbootstrap.com/)
+ * Bootstrap Reboot v5.0.0 (https://getbootstrap.com/)
 * Copyright 2011-2021 The Bootstrap Authors
 * Copyright 2011-2021 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
@@ -1,5 +1,5 @@
 /*!
- * Bootstrap Reboot v5.0.0-beta3 (https://getbootstrap.com/)
+ * Bootstrap Reboot v5.0.0 (https://getbootstrap.com/)
 * Copyright 2011-2021 The Bootstrap Authors
 * Copyright 2011-2021 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
@@ -1,5 +1,5 @@
 /*!
- * Bootstrap Utilities v5.0.0-beta3 (https://getbootstrap.com/)
+ * Bootstrap Utilities v5.0.0 (https://getbootstrap.com/)
 * Copyright 2011-2021 The Bootstrap Authors
 * Copyright 2011-2021 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
@@ -1,5 +1,5 @@
 /*!
- * Bootstrap Utilities v5.0.0-beta3 (https://getbootstrap.com/)
+ * Bootstrap Utilities v5.0.0 (https://getbootstrap.com/)
 * Copyright 2011-2021 The Bootstrap Authors
 * Copyright 2011-2021 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
@@ -1,5 +1,5 @@
 /*!
- * Bootstrap Utilities v5.0.0-beta3 (https://getbootstrap.com/)
+ * Bootstrap Utilities v5.0.0 (https://getbootstrap.com/)
 * Copyright 2011-2021 The Bootstrap Authors
 * Copyright 2011-2021 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
@@ -1,5 +1,5 @@
 /*!
- * Bootstrap Utilities v5.0.0-beta3 (https://getbootstrap.com/)
+ * Bootstrap Utilities v5.0.0 (https://getbootstrap.com/)
 * Copyright 2011-2021 The Bootstrap Authors
 * Copyright 2011-2021 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
@@ -1,6 +1,6 @@
@charset "UTF-8";
 /*!
- * Bootstrap v5.0.0-beta3 (https://getbootstrap.com/)
+ * Bootstrap v5.0.0 (https://getbootstrap.com/)
 * Copyright 2011-2021 The Bootstrap Authors
 * Copyright 2011-2021 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
@@ -2169,7 +2169,10 @@ progress {
 .form-control[type=file] {
  overflow: hidden;
 }
-.form-control[type=file]:not(:disabled):not([readonly]) {
+.form-control[type=file]:not(:disabled):not(:-moz-read-only) {
+  cursor: pointer;
+}
+.form-control[type=file]:not(:disabled):not(:read-only) {
  cursor: pointer;
 }
 .form-control:focus {
@@ -2190,7 +2193,11 @@ progress {
  color: #6c757d;
  opacity: 1;
 }
-.form-control:disabled, .form-control[readonly] {
+.form-control:-moz-read-only {
+  background-color: #e9ecef;
+  opacity: 1;
+}
+.form-control:disabled, .form-control:read-only {
  background-color: #e9ecef;
  opacity: 1;
 }
@@ -2214,7 +2221,10 @@ progress {
    transition: none;
  }
 }
-.form-control:hover:not(:disabled):not([readonly])::file-selector-button {
+.form-control:hover:not(:disabled):not(:-moz-read-only)::file-selector-button {
+  background-color: #dde0e3;
+}
+.form-control:hover:not(:disabled):not(:read-only)::file-selector-button {
  background-color: #dde0e3;
 }
 .form-control::-webkit-file-upload-button {
@@ -2239,7 +2249,7 @@ progress {
    transition: none;
  }
 }
-.form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
+.form-control:hover:not(:disabled):not(:read-only)::-webkit-file-upload-button {
  background-color: #dde0e3;
 }

@@ -2312,7 +2322,10 @@ textarea.form-control-lg {
  height: auto;
  padding: 0.375rem;
 }
-.form-control-color:not(:disabled):not([readonly]) {
+.form-control-color:not(:disabled):not(:-moz-read-only) {
+  cursor: pointer;
+}
+.form-control-color:not(:disabled):not(:read-only) {
  cursor: pointer;
 }
 .form-control-color::-moz-color-swatch {
@@ -2759,6 +2772,8 @@ textarea.form-control-lg {

 .was-validated .form-select:valid, .form-select.is-valid {
  border-color: #198754;
+}
+.was-validated .form-select:valid:not([multiple]):not([size]), .was-validated .form-select:valid:not([multiple])[size="1"], .form-select.is-valid:not([multiple]):not([size]), .form-select.is-valid:not([multiple])[size="1"] {
  padding-right: 4.125rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' 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-position: right 0.75rem center, center right 2.25rem;
@@ -2841,6 +2856,8 @@ textarea.form-control-lg {

 .was-validated .form-select:invalid, .form-select.is-invalid {
  border-color: #dc3545;
+}
+.was-validated .form-select:invalid:not([multiple]):not([size]), .was-validated .form-select:invalid:not([multiple])[size="1"], .form-select.is-invalid:not([multiple]):not([size]), .form-select.is-invalid:not([multiple])[size="1"] {
  padding-right: 4.125rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%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='%23dc3545' stroke='none'/%3e%3c/svg%3e");
  background-position: right 0.75rem center, center right 2.25rem;
@@ -3427,7 +3444,6 @@ textarea.form-control-lg {

 .dropdown-menu {
  position: absolute;
-  top: 100%;
  z-index: 1000;
  display: none;
  min-width: 10rem;
@@ -3443,6 +3459,7 @@ textarea.form-control-lg {
  border-radius: 0.25rem;
 }
 .dropdown-menu[data-bs-popper] {
+  top: 100%;
  left: 0;
  margin-top: 0.125rem;
 }
@@ -3568,12 +3585,10 @@ textarea.form-control-lg {
  margin-left: 0;
 }

-.dropend .dropdown-menu {
+.dropend .dropdown-menu[data-bs-popper] {
  top: 0;
  right: auto;
  left: 100%;
-}
-.dropend .dropdown-menu[data-bs-popper] {
  margin-top: 0;
  margin-left: 0.125rem;
 }
@@ -3594,12 +3609,10 @@ textarea.form-control-lg {
  vertical-align: 0;
 }

-.dropstart .dropdown-menu {
+.dropstart .dropdown-menu[data-bs-popper] {
  top: 0;
  right: 100%;
  left: auto;
-}
-.dropstart .dropdown-menu[data-bs-popper] {
  margin-top: 0;
  margin-right: 0.125rem;
 }
@@ -3818,6 +3831,7 @@ textarea.form-control-lg {
 .nav-link {
  display: block;
  padding: 0.5rem 1rem;
+  color: #0d6efd;
  text-decoration: none;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
 }
@@ -3826,6 +3840,9 @@ textarea.form-control-lg {
    transition: none;
  }
 }
+.nav-link:hover, .nav-link:focus {
+  color: #0a58ca;
+}
 .nav-link.disabled {
  color: #6c757d;
  pointer-events: none;
@@ -4404,7 +4421,7 @@ textarea.form-control-lg {
 }
 .accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
-  transform: rotate(180deg);
+  transform: rotate(-180deg);
 }
 .accordion-button::after {
  flex-shrink: 0;
@@ -4437,7 +4454,6 @@ textarea.form-control-lg {
 }

 .accordion-item {
-  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.125);
 }
@@ -4449,8 +4465,10 @@ textarea.form-control-lg {
  border-top-left-radius: calc(0.25rem - 1px);
  border-top-right-radius: calc(0.25rem - 1px);
 }
+.accordion-item:not(:first-of-type) {
+  border-top: 0;
+}
 .accordion-item:last-of-type {
-  margin-bottom: 0;
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
 }
@@ -5261,7 +5279,7 @@ textarea.form-control-lg {
  position: fixed;
  top: 0;
  left: 0;
-  z-index: 1050;
+  z-index: 1040;
  width: 100vw;
  height: 100vh;
  background-color: #000;
@@ -5314,14 +5332,6 @@ textarea.form-control-lg {
  margin: 0.25rem;
 }

-.modal-scrollbar-measure {
-  position: absolute;
-  top: -9999px;
-  width: 50px;
-  height: 50px;
-  overflow: scroll;
-}
-
@media (min-width: 576px) {
  .modal-dialog {
    max-width: 500px;
@@ -5934,7 +5944,7 @@ textarea.form-control-lg {
  display: inline-block;
  width: 2rem;
  height: 2rem;
-  vertical-align: text-bottom;
+  vertical-align: -0.125em;
  border: 0.25em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
@@ -5971,7 +5981,7 @@ textarea.form-control-lg {
  display: inline-block;
  width: 2rem;
  height: 2rem;
-  vertical-align: text-bottom;
+  vertical-align: -0.125em;
  background-color: currentColor;
  border-radius: 50%;
  opacity: 0;
@@ -5994,7 +6004,7 @@ textarea.form-control-lg {
 .offcanvas {
  position: fixed;
  bottom: 0;
-  z-index: 1040;
+  z-index: 1050;
  display: flex;
  flex-direction: column;
  max-width: 100%;
@@ -6012,6 +6022,7 @@ textarea.form-control-lg {

 .offcanvas-header {
  display: flex;
+  align-items: center;
  justify-content: space-between;
  padding: 1rem 1rem;
 }
@@ -6047,6 +6058,16 @@ textarea.form-control-lg {
  transform: translateX(100%);
 }

+.offcanvas-top {
+  top: 0;
+  right: 0;
+  left: 0;
+  height: 30vh;
+  max-height: 100%;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+  transform: translateY(-100%);
+}
+
 .offcanvas-bottom {
  right: 0;
  left: 0;
@@ -6060,17 +6081,6 @@ textarea.form-control-lg {
  transform: none;
 }

-.offcanvas-backdrop::before {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 1039;
-  width: 100vw;
-  height: 100vh;
-  content: "";
-  background-color: rgba(0, 0, 0, 0.5);
-}
-
 .clearfix::after {
  display: block;
  clear: both;
@@ -1,6 +1,6 @@
@charset "UTF-8";
 /*!
- * Bootstrap v5.0.0-beta3 (https://getbootstrap.com/)
+ * Bootstrap v5.0.0 (https://getbootstrap.com/)
 * Copyright 2011-2021 The Bootstrap Authors
 * Copyright 2011-2021 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
@@ -2167,7 +2167,10 @@ progress {
 .form-control[type=file] {
  overflow: hidden;
 }
-.form-control[type=file]:not(:disabled):not([readonly]) {
+.form-control[type=file]:not(:disabled):not(:-moz-read-only) {
+  cursor: pointer;
+}
+.form-control[type=file]:not(:disabled):not(:read-only) {
  cursor: pointer;
 }
 .form-control:focus {
@@ -2188,7 +2191,11 @@ progress {
  color: #6c757d;
  opacity: 1;
 }
-.form-control:disabled, .form-control[readonly] {
+.form-control:-moz-read-only {
+  background-color: #e9ecef;
+  opacity: 1;
+}
+.form-control:disabled, .form-control:read-only {
  background-color: #e9ecef;
  opacity: 1;
 }
@@ -2212,7 +2219,10 @@ progress {
    transition: none;
  }
 }
-.form-control:hover:not(:disabled):not([readonly])::file-selector-button {
+.form-control:hover:not(:disabled):not(:-moz-read-only)::file-selector-button {
+  background-color: #dde0e3;
+}
+.form-control:hover:not(:disabled):not(:read-only)::file-selector-button {
  background-color: #dde0e3;
 }
 .form-control::-webkit-file-upload-button {
@@ -2237,7 +2247,7 @@ progress {
    transition: none;
  }
 }
-.form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
+.form-control:hover:not(:disabled):not(:read-only)::-webkit-file-upload-button {
  background-color: #dde0e3;
 }

@@ -2310,7 +2320,10 @@ textarea.form-control-lg {
  height: auto;
  padding: 0.375rem;
 }
-.form-control-color:not(:disabled):not([readonly]) {
+.form-control-color:not(:disabled):not(:-moz-read-only) {
+  cursor: pointer;
+}
+.form-control-color:not(:disabled):not(:read-only) {
  cursor: pointer;
 }
 .form-control-color::-moz-color-swatch {
@@ -2757,6 +2770,8 @@ textarea.form-control-lg {

 .was-validated .form-select:valid, .form-select.is-valid {
  border-color: #198754;
+}
+.was-validated .form-select:valid:not([multiple]):not([size]), .was-validated .form-select:valid:not([multiple])[size="1"], .form-select.is-valid:not([multiple]):not([size]), .form-select.is-valid:not([multiple])[size="1"] {
  padding-left: 4.125rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' 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-position: left 0.75rem center, center left 2.25rem;
@@ -2839,6 +2854,8 @@ textarea.form-control-lg {

 .was-validated .form-select:invalid, .form-select.is-invalid {
  border-color: #dc3545;
+}
+.was-validated .form-select:invalid:not([multiple]):not([size]), .was-validated .form-select:invalid:not([multiple])[size="1"], .form-select.is-invalid:not([multiple]):not([size]), .form-select.is-invalid:not([multiple])[size="1"] {
  padding-left: 4.125rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%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='%23dc3545' stroke='none'/%3e%3c/svg%3e");
  background-position: left 0.75rem center, center left 2.25rem;
@@ -3425,7 +3442,6 @@ textarea.form-control-lg {

 .dropdown-menu {
  position: absolute;
-  top: 100%;
  z-index: 1000;
  display: none;
  min-width: 10rem;
@@ -3441,6 +3457,7 @@ textarea.form-control-lg {
  border-radius: 0.25rem;
 }
 .dropdown-menu[data-bs-popper] {
+  top: 100%;
  right: 0;
  margin-top: 0.125rem;
 }
@@ -3566,12 +3583,10 @@ textarea.form-control-lg {
  margin-right: 0;
 }

-.dropend .dropdown-menu {
+.dropend .dropdown-menu[data-bs-popper] {
  top: 0;
  left: auto;
  right: 100%;
-}
-.dropend .dropdown-menu[data-bs-popper] {
  margin-top: 0;
  margin-right: 0.125rem;
 }
@@ -3592,12 +3607,10 @@ textarea.form-control-lg {
  vertical-align: 0;
 }

-.dropstart .dropdown-menu {
+.dropstart .dropdown-menu[data-bs-popper] {
  top: 0;
  left: 100%;
  right: auto;
-}
-.dropstart .dropdown-menu[data-bs-popper] {
  margin-top: 0;
  margin-left: 0.125rem;
 }
@@ -3816,6 +3829,7 @@ textarea.form-control-lg {
 .nav-link {
  display: block;
  padding: 0.5rem 1rem;
+  color: #0d6efd;
  text-decoration: none;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
 }
@@ -3824,6 +3838,9 @@ textarea.form-control-lg {
    transition: none;
  }
 }
+.nav-link:hover, .nav-link:focus {
+  color: #0a58ca;
+}
 .nav-link.disabled {
  color: #6c757d;
  pointer-events: none;
@@ -4402,7 +4419,7 @@ textarea.form-control-lg {
 }
 .accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
-  transform: rotate(-180deg);
+  transform: rotate(180deg);
 }
 .accordion-button::after {
  flex-shrink: 0;
@@ -4435,7 +4452,6 @@ textarea.form-control-lg {
 }

 .accordion-item {
-  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.125);
 }
@@ -4447,8 +4463,10 @@ textarea.form-control-lg {
  border-top-right-radius: calc(0.25rem - 1px);
  border-top-left-radius: calc(0.25rem - 1px);
 }
+.accordion-item:not(:first-of-type) {
+  border-top: 0;
+}
 .accordion-item:last-of-type {
-  margin-bottom: 0;
  border-bottom-left-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
 }
@@ -5259,7 +5277,7 @@ textarea.form-control-lg {
  position: fixed;
  top: 0;
  right: 0;
-  z-index: 1050;
+  z-index: 1040;
  width: 100vw;
  height: 100vh;
  background-color: #000;
@@ -5312,14 +5330,6 @@ textarea.form-control-lg {
  margin: 0.25rem;
 }

-.modal-scrollbar-measure {
-  position: absolute;
-  top: -9999px;
-  width: 50px;
-  height: 50px;
-  overflow: scroll;
-}
-
@media (min-width: 576px) {
  .modal-dialog {
    max-width: 500px;
@@ -5919,7 +5929,7 @@ textarea.form-control-lg {
  display: inline-block;
  width: 2rem;
  height: 2rem;
-  vertical-align: text-bottom;
+  vertical-align: -0.125em;
  border: 0.25em solid currentColor;
  border-left-color: transparent;
  border-radius: 50%;
@@ -5956,7 +5966,7 @@ textarea.form-control-lg {
  display: inline-block;
  width: 2rem;
  height: 2rem;
-  vertical-align: text-bottom;
+  vertical-align: -0.125em;
  background-color: currentColor;
  border-radius: 50%;
  opacity: 0;
@@ -5979,7 +5989,7 @@ textarea.form-control-lg {
 .offcanvas {
  position: fixed;
  bottom: 0;
-  z-index: 1040;
+  z-index: 1050;
  display: flex;
  flex-direction: column;
  max-width: 100%;
@@ -5997,6 +6007,7 @@ textarea.form-control-lg {

 .offcanvas-header {
  display: flex;
+  align-items: center;
  justify-content: space-between;
  padding: 1rem 1rem;
 }
@@ -6032,6 +6043,16 @@ textarea.form-control-lg {
  transform: translateX(-100%);
 }

+.offcanvas-top {
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 30vh;
+  max-height: 100%;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+  transform: translateY(-100%);
+}
+
 .offcanvas-bottom {
  left: 0;
  right: 0;
@@ -6045,17 +6066,6 @@ textarea.form-control-lg {
  transform: none;
 }

-.offcanvas-backdrop::before {
-  position: fixed;
-  top: 0;
-  right: 0;
-  z-index: 1039;
-  width: 100vw;
-  height: 100vh;
-  content: "";
-  background-color: rgba(0, 0, 0, 0.5);
-}
-
 .clearfix::after {
  display: block;
  clear: both;