From b083c9639fd9012e5cba57d6c4088d43b3c3e57d Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Tue, 29 Sep 2020 18:33:00 +0300 Subject: Prepare v5.0.0-alpha2. (#31748) --- dist/css/bootstrap.css | 315 +++++++++++++++++++++++++++++++++---------------- 1 file changed, 211 insertions(+), 104 deletions(-) (limited to 'dist/css/bootstrap.css') diff --git a/dist/css/bootstrap.css b/dist/css/bootstrap.css index d8a732fbe0..3e1c69ed8e 100644 --- a/dist/css/bootstrap.css +++ b/dist/css/bootstrap.css @@ -1,5 +1,5 @@ /*! - * Bootstrap v5.0.0-alpha1 (https://getbootstrap.com/) + * Bootstrap v5.0.0-alpha2 (https://getbootstrap.com/) * Copyright 2011-2020 The Bootstrap Authors * Copyright 2011-2020 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) @@ -605,9 +605,10 @@ progress { .container-lg, .container-xl, .container-xxl { + --bs-gutter-x: 1.5rem; width: 100%; - padding-right: 1rem; - padding-left: 1rem; + padding-right: calc(var(--bs-gutter-x) / 2); + padding-left: calc(var(--bs-gutter-x) / 2); margin-right: auto; margin-left: auto; } @@ -1985,7 +1986,7 @@ progress { background-color: #fff; border-color: #8bbafe; outline: 0; - box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25); + box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); } .form-control::-webkit-input-placeholder { @@ -2082,7 +2083,7 @@ progress { .form-select:focus { border-color: #8bbafe; outline: 0; - box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25); + box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); } .form-select:focus::-ms-value { @@ -2173,7 +2174,7 @@ progress { .form-check-input:focus { border-color: #8bbafe; outline: 0; - box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25); + box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); } .form-check-input:checked { @@ -2253,7 +2254,7 @@ progress { .form-file-input:focus-within ~ .form-file-label { border-color: #8bbafe; - box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25); + box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); } .form-file-input[disabled] ~ .form-file-label .form-file-text, @@ -2328,7 +2329,7 @@ progress { .form-range { width: 100%; - height: 1.4rem; + height: 1.5rem; padding: 0; background-color: transparent; -webkit-appearance: none; @@ -2341,15 +2342,15 @@ progress { } .form-range:focus::-webkit-slider-thumb { - box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(13, 110, 253, 0.25); + box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(13, 110, 253, 0.25); } .form-range:focus::-moz-range-thumb { - box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(13, 110, 253, 0.25); + box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(13, 110, 253, 0.25); } .form-range:focus::-ms-thumb { - box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(13, 110, 253, 0.25); + box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(13, 110, 253, 0.25); } .form-range::-moz-focus-outer { @@ -2427,8 +2428,8 @@ progress { width: 1rem; height: 1rem; margin-top: 0; - margin-right: 0.2rem; - margin-left: 0.2rem; + margin-right: 0.25rem; + margin-left: 0.25rem; background-color: #0d6efd; border: 0; border-radius: 1rem; @@ -2637,7 +2638,7 @@ progress { .was-validated .form-control:valid:focus, .form-control.is-valid:focus { border-color: #198754; - box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25); + box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25); } .was-validated textarea.form-control:valid, textarea.form-control.is-valid { @@ -2655,7 +2656,7 @@ progress { .was-validated .form-select:valid:focus, .form-select.is-valid:focus { border-color: #198754; - box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25); + box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25); } .was-validated .form-check-input:valid, .form-check-input.is-valid { @@ -2667,7 +2668,7 @@ progress { } .was-validated .form-check-input:valid:focus, .form-check-input.is-valid:focus { - box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25); + box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25); } .was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label { @@ -2684,7 +2685,7 @@ progress { .was-validated .form-file-input:valid:focus ~ .form-file-label, .form-file-input.is-valid:focus ~ .form-file-label { border-color: #198754; - box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25); + box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25); } .invalid-feedback { @@ -2727,7 +2728,7 @@ progress { .was-validated .form-control:invalid:focus, .form-control.is-invalid:focus { border-color: #dc3545; - box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); + box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25); } .was-validated textarea.form-control:invalid, textarea.form-control.is-invalid { @@ -2745,7 +2746,7 @@ progress { .was-validated .form-select:invalid:focus, .form-select.is-invalid:focus { border-color: #dc3545; - box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); + box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25); } .was-validated .form-check-input:invalid, .form-check-input.is-invalid { @@ -2757,7 +2758,7 @@ progress { } .was-validated .form-check-input:invalid:focus, .form-check-input.is-invalid:focus { - box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); + box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25); } .was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label { @@ -2774,7 +2775,7 @@ progress { .was-validated .form-file-input:invalid:focus ~ .form-file-label, .form-file-input.is-invalid:focus ~ .form-file-label { border-color: #dc3545; - box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); + box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25); } .btn { @@ -2810,7 +2811,7 @@ progress { .btn-check:focus + .btn, .btn:focus { outline: 0; - box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25); + box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); } .btn:disabled, .btn.disabled, @@ -2835,7 +2836,7 @@ fieldset:disabled .btn { color: #fff; background-color: #025ce2; border-color: #0257d5; - box-shadow: 0 0 0 0.2rem rgba(49, 132, 253, 0.5); + box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5); } .btn-check:checked + .btn-primary, @@ -2849,7 +2850,7 @@ fieldset:disabled .btn { .btn-check:checked + .btn-primary:focus, .btn-check:active + .btn-primary:focus, .btn-primary:active:focus, .btn-primary.active:focus, .show > .btn-primary.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(49, 132, 253, 0.5); + box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5); } .btn-primary:disabled, .btn-primary.disabled { @@ -2874,7 +2875,7 @@ fieldset:disabled .btn { color: #fff; background-color: #5a6268; border-color: #545b62; - box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5); + box-shadow: 0 0 0 0.25rem rgba(130, 138, 145, 0.5); } .btn-check:checked + .btn-secondary, @@ -2888,7 +2889,7 @@ fieldset:disabled .btn { .btn-check:checked + .btn-secondary:focus, .btn-check:active + .btn-secondary:focus, .btn-secondary:active:focus, .btn-secondary.active:focus, .show > .btn-secondary.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5); + box-shadow: 0 0 0 0.25rem rgba(130, 138, 145, 0.5); } .btn-secondary:disabled, .btn-secondary.disabled { @@ -2913,7 +2914,7 @@ fieldset:disabled .btn { color: #fff; background-color: #136740; border-color: #115c39; - box-shadow: 0 0 0 0.2rem rgba(60, 153, 110, 0.5); + box-shadow: 0 0 0 0.25rem rgba(60, 153, 110, 0.5); } .btn-check:checked + .btn-success, @@ -2927,7 +2928,7 @@ fieldset:disabled .btn { .btn-check:checked + .btn-success:focus, .btn-check:active + .btn-success:focus, .btn-success:active:focus, .btn-success.active:focus, .show > .btn-success.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(60, 153, 110, 0.5); + box-shadow: 0 0 0 0.25rem rgba(60, 153, 110, 0.5); } .btn-success:disabled, .btn-success.disabled { @@ -2952,7 +2953,7 @@ fieldset:disabled .btn { color: #000; background-color: #2fd3f4; border-color: #23d0f3; - box-shadow: 0 0 0 0.2rem rgba(11, 172, 204, 0.5); + box-shadow: 0 0 0 0.25rem rgba(11, 172, 204, 0.5); } .btn-check:checked + .btn-info, @@ -2966,7 +2967,7 @@ fieldset:disabled .btn { .btn-check:checked + .btn-info:focus, .btn-check:active + .btn-info:focus, .btn-info:active:focus, .btn-info.active:focus, .show > .btn-info.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(11, 172, 204, 0.5); + box-shadow: 0 0 0 0.25rem rgba(11, 172, 204, 0.5); } .btn-info:disabled, .btn-info.disabled { @@ -2991,7 +2992,7 @@ fieldset:disabled .btn { color: #000; background-color: #ffcb2d; border-color: #ffc721; - box-shadow: 0 0 0 0.2rem rgba(217, 164, 6, 0.5); + box-shadow: 0 0 0 0.25rem rgba(217, 164, 6, 0.5); } .btn-check:checked + .btn-warning, @@ -3005,7 +3006,7 @@ fieldset:disabled .btn { .btn-check:checked + .btn-warning:focus, .btn-check:active + .btn-warning:focus, .btn-warning:active:focus, .btn-warning.active:focus, .show > .btn-warning.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(217, 164, 6, 0.5); + box-shadow: 0 0 0 0.25rem rgba(217, 164, 6, 0.5); } .btn-warning:disabled, .btn-warning.disabled { @@ -3030,7 +3031,7 @@ fieldset:disabled .btn { color: #fff; background-color: #c82333; border-color: #bd2130; - box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5); + box-shadow: 0 0 0 0.25rem rgba(225, 83, 97, 0.5); } .btn-check:checked + .btn-danger, @@ -3044,7 +3045,7 @@ fieldset:disabled .btn { .btn-check:checked + .btn-danger:focus, .btn-check:active + .btn-danger:focus, .btn-danger:active:focus, .btn-danger.active:focus, .show > .btn-danger.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5); + box-shadow: 0 0 0 0.25rem rgba(225, 83, 97, 0.5); } .btn-danger:disabled, .btn-danger.disabled { @@ -3069,7 +3070,7 @@ fieldset:disabled .btn { color: #000; background-color: white; border-color: white; - box-shadow: 0 0 0 0.2rem rgba(211, 212, 213, 0.5); + box-shadow: 0 0 0 0.25rem rgba(211, 212, 213, 0.5); } .btn-check:checked + .btn-light, @@ -3083,7 +3084,7 @@ fieldset:disabled .btn { .btn-check:checked + .btn-light:focus, .btn-check:active + .btn-light:focus, .btn-light:active:focus, .btn-light.active:focus, .show > .btn-light.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(211, 212, 213, 0.5); + box-shadow: 0 0 0 0.25rem rgba(211, 212, 213, 0.5); } .btn-light:disabled, .btn-light.disabled { @@ -3108,7 +3109,7 @@ fieldset:disabled .btn { color: #fff; background-color: #23272b; border-color: #1d2124; - box-shadow: 0 0 0 0.2rem rgba(82, 88, 93, 0.5); + box-shadow: 0 0 0 0.25rem rgba(82, 88, 93, 0.5); } .btn-check:checked + .btn-dark, @@ -3122,7 +3123,7 @@ fieldset:disabled .btn { .btn-check:checked + .btn-dark:focus, .btn-check:active + .btn-dark:focus, .btn-dark:active:focus, .btn-dark.active:focus, .show > .btn-dark.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(82, 88, 93, 0.5); + box-shadow: 0 0 0 0.25rem rgba(82, 88, 93, 0.5); } .btn-dark:disabled, .btn-dark.disabled { @@ -3143,7 +3144,7 @@ fieldset:disabled .btn { } .btn-check:focus + .btn-outline-primary, .btn-outline-primary:focus { - box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.5); + box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.5); } .btn-check:checked + .btn-outline-primary, @@ -3155,7 +3156,7 @@ fieldset:disabled .btn { .btn-check:checked + .btn-outline-primary:focus, .btn-check:active + .btn-outline-primary:focus, .btn-outline-primary:active:focus, .btn-outline-primary.active:focus, .btn-outline-primary.dropdown-toggle.show:focus { - box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.5); + box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.5); } .btn-outline-primary:disabled, .btn-outline-primary.disabled { @@ -3175,7 +3176,7 @@ fieldset:disabled .btn { } .btn-check:focus + .btn-outline-secondary, .btn-outline-secondary:focus { - box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5); + box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, 0.5); } .btn-check:checked + .btn-outline-secondary, @@ -3187,7 +3188,7 @@ fieldset:disabled .btn { .btn-check:checked + .btn-outline-secondary:focus, .btn-check:active + .btn-outline-secondary:focus, .btn-outline-secondary:active:focus, .btn-outline-secondary.active:focus, .btn-outline-secondary.dropdown-toggle.show:focus { - box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5); + box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, 0.5); } .btn-outline-secondary:disabled, .btn-outline-secondary.disabled { @@ -3207,7 +3208,7 @@ fieldset:disabled .btn { } .btn-check:focus + .btn-outline-success, .btn-outline-success:focus { - box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.5); + box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.5); } .btn-check:checked + .btn-outline-success, @@ -3219,7 +3220,7 @@ fieldset:disabled .btn { .btn-check:checked + .btn-outline-success:focus, .btn-check:active + .btn-outline-success:focus, .btn-outline-success:active:focus, .btn-outline-success.active:focus, .btn-outline-success.dropdown-toggle.show:focus { - box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.5); + box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.5); } .btn-outline-success:disabled, .btn-outline-success.disabled { @@ -3239,7 +3240,7 @@ fieldset:disabled .btn { } .btn-check:focus + .btn-outline-info, .btn-outline-info:focus { - box-shadow: 0 0 0 0.2rem rgba(13, 202, 240, 0.5); + box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.5); } .btn-check:checked + .btn-outline-info, @@ -3251,7 +3252,7 @@ fieldset:disabled .btn { .btn-check:checked + .btn-outline-info:focus, .btn-check:active + .btn-outline-info:focus, .btn-outline-info:active:focus, .btn-outline-info.active:focus, .btn-outline-info.dropdown-toggle.show:focus { - box-shadow: 0 0 0 0.2rem rgba(13, 202, 240, 0.5); + box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.5); } .btn-outline-info:disabled, .btn-outline-info.disabled { @@ -3271,7 +3272,7 @@ fieldset:disabled .btn { } .btn-check:focus + .btn-outline-warning, .btn-outline-warning:focus { - box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5); + box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.5); } .btn-check:checked + .btn-outline-warning, @@ -3283,7 +3284,7 @@ fieldset:disabled .btn { .btn-check:checked + .btn-outline-warning:focus, .btn-check:active + .btn-outline-warning:focus, .btn-outline-warning:active:focus, .btn-outline-warning.active:focus, .btn-outline-warning.dropdown-toggle.show:focus { - box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5); + box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.5); } .btn-outline-warning:disabled, .btn-outline-warning.disabled { @@ -3303,7 +3304,7 @@ fieldset:disabled .btn { } .btn-check:focus + .btn-outline-danger, .btn-outline-danger:focus { - box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5); + box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.5); } .btn-check:checked + .btn-outline-danger, @@ -3315,7 +3316,7 @@ fieldset:disabled .btn { .btn-check:checked + .btn-outline-danger:focus, .btn-check:active + .btn-outline-danger:focus, .btn-outline-danger:active:focus, .btn-outline-danger.active:focus, .btn-outline-danger.dropdown-toggle.show:focus { - box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5); + box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.5); } .btn-outline-danger:disabled, .btn-outline-danger.disabled { @@ -3335,7 +3336,7 @@ fieldset:disabled .btn { } .btn-check:focus + .btn-outline-light, .btn-outline-light:focus { - box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5); + box-shadow: 0 0 0 0.25rem rgba(248, 249, 250, 0.5); } .btn-check:checked + .btn-outline-light, @@ -3347,7 +3348,7 @@ fieldset:disabled .btn { .btn-check:checked + .btn-outline-light:focus, .btn-check:active + .btn-outline-light:focus, .btn-outline-light:active:focus, .btn-outline-light.active:focus, .btn-outline-light.dropdown-toggle.show:focus { - box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5); + box-shadow: 0 0 0 0.25rem rgba(248, 249, 250, 0.5); } .btn-outline-light:disabled, .btn-outline-light.disabled { @@ -3367,7 +3368,7 @@ fieldset:disabled .btn { } .btn-check:focus + .btn-outline-dark, .btn-outline-dark:focus { - box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5); + box-shadow: 0 0 0 0.25rem rgba(52, 58, 64, 0.5); } .btn-check:checked + .btn-outline-dark, @@ -3379,7 +3380,7 @@ fieldset:disabled .btn { .btn-check:checked + .btn-outline-dark:focus, .btn-check:active + .btn-outline-dark:focus, .btn-outline-dark:active:focus, .btn-outline-dark.active:focus, .btn-outline-dark.dropdown-toggle.show:focus { - box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5); + box-shadow: 0 0 0 0.25rem rgba(52, 58, 64, 0.5); } .btn-outline-dark:disabled, .btn-outline-dark.disabled { @@ -3710,6 +3711,42 @@ fieldset:disabled .btn { color: #212529; } +.dropdown-menu-dark { + color: #dee2e6; + background-color: #343a40; + border-color: rgba(0, 0, 0, 0.15); +} + +.dropdown-menu-dark .dropdown-item { + color: #dee2e6; +} + +.dropdown-menu-dark .dropdown-item:hover, .dropdown-menu-dark .dropdown-item:focus { + color: #fff; + background-color: rgba(255, 255, 255, 0.15); +} + +.dropdown-menu-dark .dropdown-item.active, .dropdown-menu-dark .dropdown-item:active { + color: #fff; + background-color: #0d6efd; +} + +.dropdown-menu-dark .dropdown-item.disabled, .dropdown-menu-dark .dropdown-item:disabled { + color: #adb5bd; +} + +.dropdown-menu-dark .dropdown-divider { + border-color: rgba(0, 0, 0, 0.15); +} + +.dropdown-menu-dark .dropdown-item-text { + color: #dee2e6; +} + +.dropdown-menu-dark .dropdown-header { + color: #adb5bd; +} + .btn-group, .btn-group-vertical { position: relative; @@ -3988,7 +4025,7 @@ fieldset:disabled .btn { .navbar-toggler:focus { text-decoration: none; outline: 0; - box-shadow: 0 0 0 0.2rem; + box-shadow: 0 0 0 0.25rem; } .navbar-toggler-icon { @@ -4486,7 +4523,7 @@ fieldset:disabled .btn { color: #024dbc; background-color: #e9ecef; outline: 0; - box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25); + box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); } .page-item:not(:first-child) .page-link { @@ -4590,15 +4627,14 @@ fieldset:disabled .btn { } .alert-dismissible { - padding-right: 3.5rem; + padding-right: 3rem; } -.alert-dismissible .close { +.alert-dismissible .btn-close { position: absolute; top: 0; right: 0; - padding: 1rem 1rem; - color: inherit; + padding: 1.25rem 1rem; } .alert-primary { @@ -5097,38 +5133,42 @@ fieldset:disabled .btn { border-color: #1b1e21; } -.close { - font-size: calc(1.275rem + 0.3vw); - font-weight: 700; - line-height: 1; +.btn-close { + box-sizing: content-box; + width: 1em; + height: 1em; + padding: 0.25em 0.25em; color: #000; - text-shadow: 0 1px 0 #fff; - opacity: .5; -} - -@media (min-width: 1200px) { - .close { - font-size: 1.5rem; - } + background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 16 16'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") no-repeat center center/1em auto; + background-clip: content-box; + border: 0; + border-radius: 0.25rem; + opacity: 0.5; } -.close:hover { +.btn-close:hover { color: #000; text-decoration: none; + opacity: 0.75; } -.close:hover, .close:focus { - opacity: .75; +.btn-close:focus { + outline: none; + box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); + opacity: 1; } -.close:disabled, .close.disabled { +.btn-close:disabled, .btn-close.disabled { pointer-events: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + opacity: 0.25; } -button.close { - padding: 0; - background-color: transparent; - border: 0; +.btn-close-white { + filter: invert(1) grayscale(100%) brightness(200%); } .toast { @@ -5162,7 +5202,7 @@ button.close { .toast-header { display: flex; align-items: center; - padding: 0.25rem 0.75rem; + padding: 0.5rem 0.75rem; color: #6c757d; background-color: rgba(255, 255, 255, 0.85); background-clip: padding-box; @@ -5171,6 +5211,11 @@ button.close { border-top-right-radius: calc(0.25rem - 1px); } +.toast-header .btn-close { + margin-right: -0.375rem; + margin-left: 0.75rem; +} + .toast-body { padding: 0.75rem; } @@ -5275,7 +5320,7 @@ button.close { .modal-header { display: flex; flex-shrink: 0; - align-items: flex-start; + align-items: center; justify-content: space-between; padding: 1rem 1rem; border-bottom: 1px solid #dee2e6; @@ -5283,9 +5328,9 @@ button.close { border-top-right-radius: calc(0.3rem - 1px); } -.modal-header .close { - padding: 1rem 1rem; - margin: -1rem -1rem -1rem auto; +.modal-header .btn-close { + padding: 0.5rem 0.5rem; + margin: -0.5rem -0.5rem -0.5rem auto; } .modal-title { @@ -5887,19 +5932,19 @@ button.close { .carousel-control-prev-icon, .carousel-control-next-icon { display: inline-block; - width: 20px; - height: 20px; + width: 2rem; + height: 2rem; background-repeat: no-repeat; background-position: 50%; background-size: 100% 100%; } .carousel-control-prev-icon { - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 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"); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e"); } .carousel-control-next-icon { - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e"); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); } .carousel-indicators { @@ -5954,6 +5999,19 @@ button.close { text-align: center; } +.carousel-dark .carousel-control-prev-icon, +.carousel-dark .carousel-control-next-icon { + filter: invert(1) grayscale(100); +} + +.carousel-dark .carousel-indicators li { + background-color: #000; +} + +.carousel-dark .carousel-caption { + color: #000; +} + @-webkit-keyframes spinner-border { to { transform: rotate(360deg); @@ -6091,21 +6149,18 @@ button.close { color: #121416; } -.embed-responsive { +.ratio { position: relative; width: 100%; } -.embed-responsive::before { +.ratio::before { display: block; + padding-top: var(--aspect-ratio); content: ""; } -.embed-responsive .embed-responsive-item, -.embed-responsive iframe, -.embed-responsive embed, -.embed-responsive object, -.embed-responsive video { +.ratio > * { position: absolute; top: 0; left: 0; @@ -6113,20 +6168,20 @@ button.close { height: 100%; } -.embed-responsive-21by9::before { - padding-top: 42.857143%; +.ratio-1x1 { + --aspect-ratio: 100%; } -.embed-responsive-16by9::before { - padding-top: 56.25%; +.ratio-4x3 { + --aspect-ratio: calc(3 / 4 * 100%); } -.embed-responsive-4by3::before { - padding-top: 75%; +.ratio-16x9 { + --aspect-ratio: calc(9 / 16 * 100%); } -.embed-responsive-1by1::before { - padding-top: 100%; +.ratio-21x9 { + --aspect-ratio: calc(9 / 21 * 100%); } .fixed-top { @@ -6343,6 +6398,58 @@ button.close { position: sticky !important; } +.top-0 { + top: 0 !important; +} + +.top-50 { + top: 50% !important; +} + +.top-100 { + top: 100% !important; +} + +.bottom-0 { + bottom: 0 !important; +} + +.bottom-50 { + bottom: 50% !important; +} + +.bottom-100 { + bottom: 100% !important; +} + +.left-0 { + left: 0 !important; +} + +.left-50 { + left: 50% !important; +} + +.left-100 { + left: 100% !important; +} + +.right-0 { + right: 0 !important; +} + +.right-50 { + right: 50% !important; +} + +.right-100 { + right: 100% !important; +} + +.translate-middle { + transform: translateX(-50%) translateY(-50%) !important; +} + .border { border: 1px solid #dee2e6 !important; } -- cgit v1.2.3