diff --git a/app/views/spree/admin/variants/_form.html.haml b/app/views/spree/admin/variants/_form.html.haml index 7f73095cd97e..5cd9cf130d9c 100644 --- a/app/views/spree/admin/variants/_form.html.haml +++ b/app/views/spree/admin/variants/_form.html.haml @@ -1,4 +1,4 @@ -%div{'data-controller': "edit-variant"} +%div{'data-controller': "edit-variant", id: "edit_variant"} .label-block.left.six.columns.alpha %script= render partial: "admin/shared/global_var_ofn", formats: :js, locals: { name: :available_units_sorted, value: WeightsAndMeasures.available_units_sorted } diff --git a/app/webpacker/css/admin_v3/all.scss b/app/webpacker/css/admin_v3/all.scss index 7ee27d28ac73..8ec13635fbb3 100644 --- a/app/webpacker/css/admin_v3/all.scss +++ b/app/webpacker/css/admin_v3/all.scss @@ -94,6 +94,7 @@ @import "../admin/dialog"; @import "../admin/disabled"; @import "components/dropdown"; // admin_v3 +@import "pages/edit_variant"; // admin_v3 @import "pages/enterprise_index_panels"; // admin_v3 @import "../admin/enterprises"; @import "../admin/filters_and_controls"; diff --git a/app/webpacker/css/admin_v3/pages/edit_variant.scss b/app/webpacker/css/admin_v3/pages/edit_variant.scss new file mode 100644 index 000000000000..694c72bd9325 --- /dev/null +++ b/app/webpacker/css/admin_v3/pages/edit_variant.scss @@ -0,0 +1,55 @@ +@import "unit_popout"; + +#edit_variant { + + .popout { + @include unit_popout; + + &__button { + // override popout button styles + &.popout__button { + // Reapplying button style from buttons.css + background-color: $color-btn-bg; + border: 1px solid $color-btn-bg; + color: $color-btn-text; + font-weight: bold; + + &:before { + font-family: FontAwesome; + text-decoration: inherit; + display: inline-block; + speak: none; + content: "\f078"; + + position: absolute; + top: 0; // Required for empty buttons + right: $border-radius; + font-size: 0.67em; + } + + // Reapplying button style from buttons.css + &:active, + &:focus { + outline: none; + border: 1px solid $color-btn-hover-border; + } + + &:active:focus { + box-shadow: none; + } + + &:hover { + background-color: $color-btn-hover-bg; + border: 1px solid $color-btn-hover-bg; + color: $color-btn-hover-text; + } + } + } + + &__container { + width: max-content; + top: auto; + left: auto; + } + } +}