Commit be2f08e6 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
parent 3d7ea45c
/**
* @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="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