Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update template CSS variables #1091

Merged
merged 42 commits into from
Jan 12, 2022
Merged

Update template CSS variables #1091

Show file tree
Hide file tree
Changes from 41 commits
Commits
Show all changes
42 commits
Select commit Hold shift + click to select a range
766d320
Add theme level grid setting (#885)
martinamarien Nov 16, 2021
227ffe7
Settings popup and drawer (#865)
sofiamatulis Nov 16, 2021
640f1dd
Add media settings to non-card non-textbox elements (#893)
kmeleta Nov 16, 2021
ee84459
Text boxes global settings setup (#889)
tyleralsbury Nov 16, 2021
2055496
Add global sections settings (#891)
kmeleta Nov 16, 2021
c4a45f0
Global settings - buttons, inputs (#844)
tyleralsbury Nov 16, 2021
00ae007
Added back section settings tmeporarily (#899)
tyleralsbury Nov 17, 2021
31dcc63
Add global settings cards (#886)
KaichenWang Nov 17, 2021
2ea4756
update secondary button background color (#903)
martinamarien Nov 17, 2021
8681a5a
Clean up popup drawer feed (#902)
sofiamatulis Nov 18, 2021
810b429
Revert global section settings (#911)
kmeleta Nov 18, 2021
e769b89
Remove text box padding setting (#912)
kmeleta Nov 19, 2021
0175d42
Image with text section - Apply global textbox and media settings (#918)
KaichenWang Nov 22, 2021
91524b0
Split popup and drawer settings (#917)
kmeleta Nov 22, 2021
5f42ace
Update global setting range values (#954)
KaichenWang Dec 1, 2021
e178756
Fix section vertical spacing (#976)
KaichenWang Dec 10, 2021
9f8fdb3
Move card shadow to pseudo element (#1012)
kmeleta Dec 14, 2021
8387c7f
Move product/card media shadows to pseudo element (#1013)
kmeleta Dec 14, 2021
8fe9ac2
Add variant pills settings (#1005)
martinamarien Dec 14, 2021
9fd8434
Image with text border/corner/shadow updates (#1003) + rebase merge c…
kmeleta Dec 14, 2021
c1f1376
Multicolumn shadow updates (#1023)
kmeleta Dec 16, 2021
5cfd35a
fix rebase issues
martinamarien Dec 16, 2021
2349416
Section padding settings (#1006)
tyleralsbury Dec 17, 2021
48d60e8
Blog cards update (#1036)
kmeleta Dec 17, 2021
183dfca
Fix collage section product and collection card image size (#1014)
KaichenWang Dec 20, 2021
112cc4b
Slider spacing fixes (#1037)
kmeleta Dec 20, 2021
ff0b590
Update the high level order of the global settings (#1029)
melissaperreault Dec 20, 2021
72a68a5
add border radius to dynamic checkout buttons (#1024)
ludoboludo Dec 20, 2021
5e97b2e
Update global settings range values (#1042)
melissaperreault Dec 20, 2021
8b6cfc1
Pill shadow updates (#1052)
kmeleta Dec 21, 2021
3d0580d
Settings content naming update (#1044)
melissaperreault Dec 21, 2021
259b99f
Update layout range and values for mobile (#1055)
KaichenWang Dec 22, 2021
f375286
Add content container to sections and update styling (#1050)
martinamarien Dec 23, 2021
0b47eb1
Revise range values (#1069)
melissaperreault Dec 23, 2021
0089907
Refactor button styles (#1064)
kmeleta Dec 23, 2021
ec8d982
Fix content container shadow when set to transparent (#1075)
ludoboludo Dec 23, 2021
cc24607
New section - Collapsible content (#956)
sofiamatulis Dec 23, 2021
2db95b6
Update 13 translation files
translation-platform[bot] Jan 5, 2022
f46b337
Update template CSS variables for password and gift card
KaichenWang Jan 5, 2022
f0858c2
Merge branch 'main' of https://github.com/Shopify/dawn into update-te…
KaichenWang Jan 5, 2022
91e1420
Remove drawer variables from password page
KaichenWang Jan 10, 2022
f04b9cd
Remove popup variables from password page
KaichenWang Jan 11, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 46 additions & 8 deletions layout/password.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,9 +63,46 @@
--gradient-base-accent-1: {% if settings.gradient_accent_1 != blank %}{{ settings.gradient_accent_1 }}{% else %}{{ settings.colors_accent_1 }}{% endif %};
--gradient-base-accent-2: {% if settings.gradient_accent_2 != blank %}{{ settings.gradient_accent_2 }}{% else %}{{ settings.colors_accent_2 }}{% endif %};

--media-padding: {{ settings.media_padding }}px;
--media-border-opacity: {{ settings.media_border_opacity | divided_by: 100.0 }};
--media-border-width: {{ settings.media_border_thickness }}px;
--media-radius: {{ settings.media_radius }}px;
--media-shadow-opacity: {{ settings.media_shadow_opacity | divided_by: 100.0 }};
--media-shadow-horizontal-offset: {{ settings.media_shadow_horizontal_offset }}px;
--media-shadow-vertical-offset: {{ settings.media_shadow_vertical_offset }}px;
--media-shadow-blur-radius: {{ settings.media_shadow_blur }}px;

--page-width: {{ settings.page_width | divided_by: 10 }}rem;
--page-width-margin: {% if settings.page_width == '1600' %}2{% else %}0{% endif %}rem;

--card-image-padding: {{ settings.card_image_padding | divided_by: 10.0 }}rem;
--card-corner-radius: {{ settings.card_corner_radius | divided_by: 10.0 }}rem;
--card-text-alignment: {{ settings.card_text_alignment }};
--card-border-width: {{ settings.card_border_thickness | divided_by: 10.0 }}rem;
--card-border-opacity: {{ settings.card_border_opacity | divided_by: 100.0 }};
--card-shadow-opacity: {{ settings.card_shadow_opacity | divided_by: 100.0 }};
--card-shadow-horizontal-offset: {{ settings.card_shadow_horizontal_offset | divided_by: 10.0 }}rem;
--card-shadow-vertical-offset: {{ settings.card_shadow_vertical_offset | divided_by: 10.0 }}rem;
--card-shadow-blur-radius: {{ settings.card_shadow_blur | divided_by: 10.0 }}rem;

--badge-corner-radius: {{ settings.badge_corner_radius | divided_by: 10.0 }}rem;

--popup-border-width: {{ settings.popup_border_thickness }}px;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same with popup. Do we need it? It seems to be only used in the cart, search, filter, footer, product page and header which dont exist in the password page

Copy link
Contributor Author

@KaichenWang KaichenWang Jan 10, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The featured product section add-to-cart should in theory trigger a cart notification, which is a popup, but that functionality is currently not working on password page. Opening an issue #1144

Copy link
Contributor

@sofiamatulis sofiamatulis Jan 10, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe the reason it doesn't work is because technically if a site is password protected, it means we cant access the other pages. So even though we allow merchants to add any section to the password page, it's not encouraged to add the featured product (?). So I am not sure if I would consider that an issue

cc @melissaperreault @Oliviammarcello

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hum, @nicklepine might have more context on that one, I don't remember. 🤔

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@sofiamatulis given the site is behind a password, adding to cart from a featured product section should not work on the password page.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed the -popup variables from password page f04b9cd

--popup-border-opacity: {{ settings.popup_border_opacity | divided_by: 100.0 }};
--popup-corner-radius: {{ settings.popup_corner_radius }}px;
--popup-shadow-opacity: {{ settings.popup_shadow_opacity | divided_by: 100.0 }};
--popup-shadow-horizontal-offset: {{ settings.popup_shadow_horizontal_offset }}px;
--popup-shadow-vertical-offset: {{ settings.popup_shadow_vertical_offset }}px;
--popup-shadow-blur-radius: {{ settings.popup_shadow_blur }}px;

--spacing-sections-desktop: {{ settings.spacing_sections }}px;
--spacing-sections-mobile: {% if settings.spacing_sections < 24 %}{{ settings.spacing_sections }}{% else %}{{ settings.spacing_sections | times: 0.7 | round | at_least: 20 }}{% endif %}px;

--grid-desktop-vertical-spacing: {{ settings.spacing_grid_vertical }}px;
--grid-desktop-horizontal-spacing: {{ settings.spacing_grid_horizontal }}px;
--grid-mobile-vertical-spacing: {{ settings.spacing_grid_vertical | divided_by: 2 }}px;
--grid-mobile-horizontal-spacing: {{ settings.spacing_grid_horizontal | divided_by: 2 }}px;

--text-boxes-border-opacity: {{ settings.text_boxes_border_opacity | divided_by: 100.0 }};
--text-boxes-border-width: {{ settings.text_boxes_border_thickness }}px;
--text-boxes-radius: {{ settings.text_boxes_radius }}px;
Expand All @@ -75,12 +112,13 @@
--text-boxes-shadow-blur-radius: {{ settings.text_boxes_shadow_blur }}px;

--buttons-radius: {{ settings.buttons_radius }}px;
--buttons-border-width: {{ settings.buttons_border_thickness }}px;
--buttons-border-width: {% if settings.buttons_border_opacity > 0 %}{{ settings.buttons_border_thickness }}{% else %}0{% endif %}px;
--buttons-border-opacity: {{ settings.buttons_border_opacity | divided_by: 100.0 }};
--buttons-shadow-opacity: {{ settings.buttons_shadow_opacity | divided_by: 100.0 }};
--buttons-shadow-horizontal-offset: {{ settings.buttons_shadow_horizontal_offset }}px;
--buttons-shadow-vertical-offset: {{ settings.buttons_shadow_vertical_offset }}px;
--buttons-shadow-blur-radius: {{ settings.buttons_shadow_blur }}px;
--buttons-border-offset: {% if settings.buttons_radius > 0 or settings.buttons_shadow_opacity > 0 %}0.3{% else %}0{% endif %}px;

--inputs-radius: {{ settings.inputs_radius }}px;
--inputs-border-width: {{ settings.inputs_border_thickness }}px;
Expand All @@ -90,13 +128,13 @@
--inputs-shadow-vertical-offset: {{ settings.inputs_shadow_vertical_offset }}px;
--inputs-shadow-blur-radius: {{ settings.inputs_shadow_blur }}px;

--spacing-sections-desktop: {{ settings.spacing_sections }}px;
--spacing-sections-mobile: {% if settings.spacing_sections < 24 %}{{ settings.spacing_sections }}{% else %}{{ settings.spacing_sections | times: 0.7 | round | at_least: 20 }}{% endif %}px;

--grid-desktop-vertical-spacing: {{ settings.spacing_grid_vertical }}px;
--grid-desktop-horizontal-spacing: {{ settings.spacing_grid_horizontal }}px;
--grid-mobile-vertical-spacing: {{ settings.spacing_grid_vertical | divided_by: 2 }}px;
--grid-mobile-horizontal-spacing: {{ settings.spacing_grid_horizontal | divided_by: 2 }}px;
--variant-pills-radius: {{ settings.variant_pills_radius }}px;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same with variants. They seem to only exist in the product page.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe variant pills can exist in a featured-product section on the password page as well

--variant-pills-border-width: {{ settings.variant_pills_border_thickness }}px;
--variant-pills-border-opacity: {{ settings.variant_pills_border_opacity | divided_by: 100.0 }};
--variant-pills-shadow-opacity: {{ settings.variant_pills_shadow_opacity | divided_by: 100.0 }};
--variant-pills-shadow-horizontal-offset: {{ settings.variant_pills_shadow_horizontal_offset }}px;
--variant-pills-shadow-vertical-offset: {{ settings.variant_pills_shadow_vertical_offset }}px;
--variant-pills-shadow-blur-radius: {{ settings.variant_pills_shadow_blur }}px;
}
{% endstyle %}

Expand Down
3 changes: 2 additions & 1 deletion templates/gift_card.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,12 +66,13 @@
--page-width-margin: {% if settings.page_width == '1600' %}2{% else %}0{% endif %}rem;

--buttons-radius: {{ settings.buttons_radius }}px;
--buttons-border-width: {{ settings.buttons_border_thickness }}px;
--buttons-border-width: {% if settings.buttons_border_opacity > 0 %}{{ settings.buttons_border_thickness }}{% else %}0{% endif %}px;
--buttons-border-opacity: {{ settings.buttons_border_opacity | divided_by: 100.0 }};
--buttons-shadow-opacity: {{ settings.buttons_shadow_opacity | divided_by: 100.0 }};
--buttons-shadow-horizontal-offset: {{ settings.buttons_shadow_horizontal_offset }}px;
--buttons-shadow-vertical-offset: {{ settings.buttons_shadow_vertical_offset }}px;
--buttons-shadow-blur-radius: {{ settings.buttons_shadow_blur }}px;
--buttons-border-offset: {% if settings.buttons_radius > 0 or settings.buttons_shadow_opacity > 0 %}0.3{% else %}0{% endif %}px;

--inputs-radius: {{ settings.inputs_radius }}px;
--inputs-border-width: {{ settings.inputs_border_thickness }}px;
Expand Down