<% variation_modifiers = { "single_column" => "single-column", "multi_column" => "multi-column", } background_image_enabled = !s["background_image"].nil? background_image_style = background_image_enabled ? "background-image: url('#{s["background_image"]["src"]}');" : "" background_color_enabled = !s["background_color"].nil? variation_modifier = variation_modifiers[s["variation"]] background_color_style = background_color_enabled ? "background-color: rgb(#{s["background_color"].join(",")});" : ""; background_image_modifier = background_image_enabled && s["background_image_variation"] == "light" ? "light" : "dark" section_style_modifier = if background_image_enabled "background-image--#{background_image_modifier}" elsif background_color_enabled "background-color" elsif second_wo_background "zebra" else "blank" end button_modifier = if background_image_enabled "" elsif background_color_enabled "--inverted" else "--ghost" end %> <% content_for :info_css do %> <% if s["button_color"] %> .<%= section_id %>__info__button { background-color: rgb(<%= s["button_color"]["value"].join(",") %>); } .<%= section_id %>__info__button--ghost { color: rgb(<%= s["button_color"]["value"].join(",") %>); border-color: rgb(<%= s["button_color"]["value"].join(",") %>); } .<%= section_id %>__info__button--inverted { color: rgb(<%= s["button_color"]["value"].join(",") %>); } .<%= section_id %>__info__button--inverted:hover { color: #FFF; background-color: rgb(<%= s["button_color_hover"]["value"].join(",") %>); } <% end %> <% if s["button_color_hover"] %> .<%= section_id %>__info__button--ghost:hover, .<%= section_id %>__info__button:hover { background-color: rgb(<%= s["button_color_hover"]["value"].join(",") %>); border-color: rgb(<%= s["button_color_hover"]["value"].join(",") %>); } <% end %> <% if s["variation"] == "multi_column" && s["icon_color"] %> .<%= section_id %>__info__column-icon > svg g, .<%= section_id %>__info__column-icon > svg circle, .<%= section_id %>__info__column-icon > svg path { stroke: rgb(<%= s["icon_color"]["value"].join(",") %>); } .<%= section_id %>__info__column-icon > svg .icon-no-stroke { stroke: none; } .<%= section_id %>__info__column-icon > svg .icon-custom-color-fill { fill: rgb(<%= s["icon_color"]["value"].join(",") %>); } <% end %> <% end %>

<%= s["title"] %>

<% case s["variation"] %> <% when "single_column" %> <% paragraphs = if s["paragraph"] s["paragraph"].is_a?(Array) ? s["paragraph"] : [s["paragraph"]] else [] end %> <% paragraphs.each do |p| %>

<%= p %>

<% end %> <% if s["button_title"] %> "><%= s["button_title"] %> <% end %> <% when "multi_column" %> <% multi_column_modifiers = { 2 => "two-columns", 3 => "three-columns" } multi_column_modifier = multi_column_modifiers[s["columns"].length] %>

<% s["columns"].each do |c| %>

<% if c["icon"] %>

<%= render partial: "icon", locals: { icon: c["icon"] } %>

<% end %>

<%= c["title"] %>

<% paragraphs = if c["paragraph"] c["paragraph"].is_a?(Array) ? c["paragraph"] : [c["paragraph"]] else [] end %> <% paragraphs.each do |p| %>

<%= p %>

<% end %>

<% if c["button_title"] %> <%= c["button_title"]%> <% end %>

<% end %>