Commit f12a2e22 authored by Gábor Hojtsy's avatar Gábor Hojtsy

Issue #3044250 by kjay, shaal, pawandubey, markconroy, Gábor Hojtsy, lauriii:...

Issue #3044250 by kjay, shaal, pawandubey, markconroy, Gábor Hojtsy, lauriii: Make the highlighted region in Umami more flexible so it adapts to its use with Layout Builder and could be used to demonstrate placement of other blocks

(cherry picked from commit be2f08e6)
parent 752ad1a4
/**
* @file
* Styles for help messages.
*/
.block-help {
margin-bottom: 1em;
padding: 1.26em;
word-wrap: break-word;
color: inherit;
border: 1px solid #b3daf0;
background-color: #eef5f9;
overflow-wrap: break-word;
}
.block-help__container {
padding-left: 24px; /* LTR */
background-image: url(/core/profiles/demo_umami/themes/umami/images/svg/help.svg);
background-repeat: no-repeat;
background-position: left 4px; /* LTR */
}
[dir=rtl] .block-help__container {
padding-right: 24px;
padding-left: 0;
background-position: right 4px;
}
.block-help__container > *:last-child {
margin-bottom: 0;
}
......@@ -4,6 +4,7 @@
*/
.messages {
margin-bottom: 1em;
padding: 20px;
word-wrap: break-word;
color: inherit;
......@@ -26,18 +27,21 @@
background-position: right;
}
.messages--status {
border: 1px solid #cbdebc;
background-color: #e6eee0;
}
.messages--status .messages__content {
background-image: url(/core/misc/icons/73b355/check.svg);
}
.messages--warning {
border: 1px solid #fae2a4;
background-color: #fcf1d4;
}
.messages--warning .messages__content {
background-image: url(/core/misc/icons/e29700/warning.svg);
}
.messages--error {
border: 1px solid #f8c8d5;
background-color: #f9e6eb;
}
.messages--error .messages__content {
......
/**
* @file
* This file is used to style the highlighted region.
*
*/
.layout-highlighted {
padding: 0 1.26em 1em;
background: #fff;
}
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0 -1)" fill="none" fill-rule="evenodd"><circle fill="#009FFA" cx="8" cy="9" r="8"/><text font-family="HelveticaNeue-Bold, Helvetica Neue" font-size="14" font-weight="bold" fill="#FFF"><tspan x="4" y="14">?</tspan></text></g></svg>
{#
/**
* @file
* Theme override for help messages.
*
* Available variables:
* - plugin_id: The ID of the block implementation.
* - label: The configured label of the block if visible.
* - configuration: A list of the block's configuration values.
* - label: The configured label for the block.
* - label_display: The display settings for the label.
* - provider: The module or other provider that provided this block plugin.
* - Block plugin specific settings will also be stored here.
* - content: The content of this block.
* - attributes: array of HTML attributes populated by modules, intended to
* be added to the main container tag of this template.
* - id: A valid HTML ID and guaranteed unique.
* - title_attributes: Same as attributes, except applied to the main title
* tag that appears in the template.
* - title_prefix: Additional output populated by modules, intended to be
* displayed in front of the main title tag that appears in the template.
* - title_suffix: Additional output populated by modules, intended to be
* displayed after the main title tag that appears in the template.
*
* @see template_preprocess_block()
*/
#}
{%
set classes = [
'block',
'block-' ~ configuration.provider|clean_class,
'block-' ~ plugin_id|clean_class,
]
%}
<div{{ attributes.addClass(classes) }}>
<div class="block-help__container">
{{ title_prefix }}
{% if label %}
<h2{{ title_attributes }}>{{ label }}</h2>
{% endif %}
{{ title_suffix }}
{% block content %}
{{ content }}
{% endblock %}
</div>
</div>
......@@ -59,8 +59,8 @@
{% endif %}
{% if page.highlighted %}
<div class="container">
<div class="layout-highlighted">
<div class="layout-highlighted">
<div class="container">
{{ page.highlighted }}
</div>
</div>
......
......@@ -7,6 +7,7 @@ global:
css/components/blocks/banner/banner.css: {}
css/components/blocks/branding/branding.css: {}
css/components/blocks/disclaimer/disclaimer.css: {}
css/components/blocks/help/help.css: {}
css/components/blocks/page-title/page-title.css: {}
css/components/blocks/footer-promo/footer-promo.css: {}
css/components/blocks/language-switcher/language-switcher.css: {}
......@@ -34,6 +35,7 @@ global:
css/components/regions/bottom/bottom.css: {}
css/components/regions/footer/footer.css: {}
css/components/regions/header/header.css: {}
css/components/regions/highlighted/highlighted.css: {}
css/components/regions/pre-header/pre-header.css: {}
css/components/toolbar/toolbar.css: {}
layout:
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment