diff --git a/templates/Instance/settings.php b/templates/Instance/settings.php index 766e0d0..0e9adf6 100644 --- a/templates/Instance/settings.php +++ b/templates/Instance/settings.php @@ -267,14 +267,19 @@ function getResolvableID($sectionName, $panelName=false) const $settingToFocus = $(referencedID) const pageNavID = $(referencedID).closest('.tab-pane').attr('aria-labelledby') const $navController = $(`#${pageNavID}`) + const $settingGroup = $settingToFocus.closest('.settings-group') $navController .on('shown.bs.tab.after-redirect', () => { $settingToFocus[0].scrollIntoView() const inputID = $settingToFocus.parent().attr('for') $settingToFocus.closest('.setting-group').find(`#${inputID}`).focus() $navController.off('shown.bs.tab.after-redirect') + $settingGroup.addClass(['to-be-slided', 'slide-in']) }) .tab('show') + $settingGroup.on('webkitAnimationEnd oanimationend msAnimationEnd animationend', function() { + $(this).removeClass(['to-be-slided', 'slide-in']) + }); } diff --git a/webroot/css/main.css b/webroot/css/main.css index 7556ac7..17ba67a 100644 --- a/webroot/css/main.css +++ b/webroot/css/main.css @@ -85,25 +85,12 @@ input[type="checkbox"]:disabled.change-cursor { border-bottom-right-radius: 0; } -.select2-selection__choice { /* Our app do not have the same font size */ - padding-left: 1.5em !important; -} -.picker-container .select2-selection { - border-top-right-radius: 0 !important; - border-bottom-right-radius: 0 !important; -} -.picker-container .picker-action .btn:first-child { - border-top-left-radius: 0 !important; - border-bottom-left-radius: 0 !important; -} - .select2-container { - /* z-index: 1060; */ - z-index: 1038; + z-index: 1056; } .select2-container--bootstrap-5 { - color: black; + color: var(--bs-body-color); } .grow-on-hover { @@ -117,4 +104,22 @@ input[type="checkbox"]:disabled.change-cursor { -moz-transform: translateZ(0) scale(1.03, 1.03); transform: translateZ(0) scale(1.03, 1.03); box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%) !important; +} + +.settings-group.to-be-slided { + opacity: 0; + transform: translateX(-15%); + -webkit-transform: translateX(-15%); +} + +.settings-group.to-be-slided.slide-in { + animation: slide-in 0.2s forwards; + animation-delay: 0.1s; + -webkit-animation: slide-in 0.2s forwards; + -webkit-animation-delay: 0.1s; +} + +@keyframes slide-in { + 50% { opacity: 0.3; } + 100% { transform: translateX(0%); opacity: 1; } } \ No newline at end of file