diff --git a/assets/Zed/sass/_action-buttons.scss b/assets/Zed/sass/_action-buttons.scss index 4195cc1..f26587f 100644 --- a/assets/Zed/sass/_action-buttons.scss +++ b/assets/Zed/sass/_action-buttons.scss @@ -51,3 +51,12 @@ .btn-remove { @include coloredButton(#ed5565, #ffffff); } + +.btn-naked { + background: none; + border: none; + + &:is(:hover, :focus) { + opacity: 0.8; + } +} diff --git a/assets/Zed/sass/_custom.scss b/assets/Zed/sass/_custom.scss index 059e078..6f70b79 100644 --- a/assets/Zed/sass/_custom.scss +++ b/assets/Zed/sass/_custom.scss @@ -1908,3 +1908,25 @@ a.label { } } } + +.form-wrapper-clickable-affix:has(.select2), +.form-wrapper-clickable-affix:has(.form-control) { + position: relative; + + .form-control, + .select2-selection { + padding-right: 43px; + } + + .form-wrapper-clickable-affix__trigger { + position: absolute; + right: 10px; + bottom: 6px; + width: 24px; + height: 24px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + } +} diff --git a/assets/Zed/sass/_popover.scss b/assets/Zed/sass/_popover.scss new file mode 100644 index 0000000..ac51198 --- /dev/null +++ b/assets/Zed/sass/_popover.scss @@ -0,0 +1,54 @@ +.modal-popover { + padding: 0; + border: none; + opacity: 0; + transition: all 0.3s allow-discrete; + + .modal { + display: block; + } + + &:popover-open { + opacity: 1; + + @starting-style { + opacity: 0; + } + + &::backdrop { + opacity: 0.5; + + @starting-style { + opacity: 0; + } + } + } + + &::backdrop { + opacity: 0; + background-color: $black; + transition: all 0.3s allow-discrete; + } + + &:has(.modal-backdrop):popover-open::backdrop { + opacity: 0; + } + + .modal-backdrop { + opacity: 0.5; + cursor: auto; + } +} + +body:has(.modal-popover:popover-open) { + overflow: hidden; + + * { + pointer-events: none; + } + + .modal-popover, + .modal-popover * { + pointer-events: auto; + } +} diff --git a/assets/Zed/sass/main.scss b/assets/Zed/sass/main.scss index 5cd92fb..510a740 100644 --- a/assets/Zed/sass/main.scss +++ b/assets/Zed/sass/main.scss @@ -34,3 +34,4 @@ $icon-font-path: '../../fonts/bootstrap/'; @import 'data-tables'; @import 'wave-loader'; @import 'product-item'; +@import 'popover';