Skip to content

Commit

Permalink
Add stying for the unit pop out
Browse files Browse the repository at this point in the history
  • Loading branch information
rioug committed Aug 14, 2024
1 parent 3ed891f commit 14df2e6
Show file tree
Hide file tree
Showing 3 changed files with 57 additions and 1 deletion.
2 changes: 1 addition & 1 deletion app/views/spree/admin/variants/_form.html.haml
Original file line number Diff line number Diff line change
@@ -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 }
Expand Down
1 change: 1 addition & 0 deletions app/webpacker/css/admin_v3/all.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
55 changes: 55 additions & 0 deletions app/webpacker/css/admin_v3/pages/edit_variant.scss
Original file line number Diff line number Diff line change
@@ -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;
}
}
}

0 comments on commit 14df2e6

Please sign in to comment.