started theming header
This commit is contained in:
parent
69be45a55c
commit
9f17d68e79
|
@ -8,8 +8,8 @@ dependencies:
|
||||||
- materiotheme
|
- materiotheme
|
||||||
id: sitebranding
|
id: sitebranding
|
||||||
theme: materiotheme
|
theme: materiotheme
|
||||||
region: header
|
region: header_left
|
||||||
weight: -2
|
weight: -1
|
||||||
provider: null
|
provider: null
|
||||||
plugin: system_branding_block
|
plugin: system_branding_block
|
||||||
settings:
|
settings:
|
||||||
|
|
|
@ -0,0 +1,20 @@
|
||||||
|
uuid: 4b88457a-625e-45dd-be43-dbf029e174f5
|
||||||
|
langcode: en
|
||||||
|
status: true
|
||||||
|
dependencies:
|
||||||
|
module:
|
||||||
|
- user
|
||||||
|
theme:
|
||||||
|
- materiotheme
|
||||||
|
id: userlogin
|
||||||
|
theme: materiotheme
|
||||||
|
region: header_right
|
||||||
|
weight: 0
|
||||||
|
provider: null
|
||||||
|
plugin: user_login_block
|
||||||
|
settings:
|
||||||
|
id: user_login_block
|
||||||
|
label: 'Member Access'
|
||||||
|
provider: user
|
||||||
|
label_display: visible
|
||||||
|
visibility: { }
|
File diff suppressed because one or more lines are too long
|
@ -7,6 +7,7 @@
|
||||||
// @License: GPL-V3
|
// @License: GPL-V3
|
||||||
|
|
||||||
@import 'base/reset';
|
@import 'base/reset';
|
||||||
|
@import 'base/variables';
|
||||||
@import 'base/colors';
|
@import 'base/colors';
|
||||||
@import 'base/grid';
|
@import 'base/grid';
|
||||||
@import 'base/layout';
|
@import 'base/layout';
|
||||||
|
@ -21,3 +22,41 @@ html{
|
||||||
aside.messages{
|
aside.messages{
|
||||||
border:none;
|
border:none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// _ _ _
|
||||||
|
// | || |___ __ _ __| |___ _ _
|
||||||
|
// | __ / -_) _` / _` / -_) '_|
|
||||||
|
// |_||_\___\__,_\__,_\___|_|
|
||||||
|
|
||||||
|
header[role="banner"]{
|
||||||
|
#block-sitebranding{
|
||||||
|
h1{
|
||||||
|
margin:0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#block-userlogin{
|
||||||
|
h2{
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
&>section{
|
||||||
|
background-color: #fff;
|
||||||
|
overflow: hidden;
|
||||||
|
height:1px;
|
||||||
|
padding:0.01em 1em;
|
||||||
|
box-sizing:content-box;
|
||||||
|
transition: all 0.4s ease-in-out;
|
||||||
|
// outline: 1px solid blue;
|
||||||
|
transition-delay: 2s;
|
||||||
|
}
|
||||||
|
&:hover{
|
||||||
|
&>section{
|
||||||
|
transition-delay: 0s;
|
||||||
|
height:16em;
|
||||||
|
padding:1em 1em;
|
||||||
|
box-shadow: 0 0 10px #ccc;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -11,3 +11,40 @@ body, html{
|
||||||
body.toolbar-horizontal.toolbar-themes.toolbar-no-tabs{
|
body.toolbar-horizontal.toolbar-themes.toolbar-no-tabs{
|
||||||
padding-top: 24px!important;
|
padding-top: 24px!important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// _ _ _
|
||||||
|
// | || |___ __ _ __| |___ _ _
|
||||||
|
// | __ / -_) _` / _` / -_) '_|
|
||||||
|
// |_||_\___\__,_\__,_\___|_|
|
||||||
|
|
||||||
|
header[role="banner"]{
|
||||||
|
background-color: #fff;
|
||||||
|
overflow: visible;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 10;
|
||||||
|
width:100vw;
|
||||||
|
// outline: 1px solid blue;
|
||||||
|
height: $header_height;
|
||||||
|
.wrapper{
|
||||||
|
.header-block{
|
||||||
|
min-height: 15px;
|
||||||
|
font-size: 0;
|
||||||
|
&>*{
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: top;
|
||||||
|
font-size: $base_font_size;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// __ __ _
|
||||||
|
// | \/ |__ _(_)_ _
|
||||||
|
// | |\/| / _` | | ' \
|
||||||
|
// |_| |_\__,_|_|_||_|
|
||||||
|
|
||||||
|
main[role="main"]{
|
||||||
|
padding-top: $header_height;
|
||||||
|
}
|
||||||
|
|
|
@ -0,0 +1,3 @@
|
||||||
|
$base_font_size:16px;
|
||||||
|
|
||||||
|
$header_height: 80px;
|
|
@ -10,6 +10,9 @@ libraries:
|
||||||
|
|
||||||
regions:
|
regions:
|
||||||
header: Header
|
header: Header
|
||||||
|
header_left: Header left
|
||||||
|
header_middle: Header middle
|
||||||
|
header_right: Header right
|
||||||
content: Content
|
content: Content
|
||||||
footer_left: 'Footer Left'
|
footer_left: 'Footer Left'
|
||||||
footer_center: 'Footer Center'
|
footer_center: 'Footer Center'
|
||||||
|
|
|
@ -0,0 +1,46 @@
|
||||||
|
{#
|
||||||
|
/**
|
||||||
|
* @file
|
||||||
|
* Theme override to display a block.
|
||||||
|
*
|
||||||
|
* 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) }}>
|
||||||
|
{{ title_prefix }}
|
||||||
|
{% if label %}
|
||||||
|
<h2{{ title_attributes }}>{{ label }}</h2>
|
||||||
|
{% endif %}
|
||||||
|
{{ title_suffix }}
|
||||||
|
<section>
|
||||||
|
{% block content %}
|
||||||
|
{{ content }}
|
||||||
|
{% endblock %}
|
||||||
|
</section>
|
||||||
|
</div>
|
|
@ -0,0 +1,44 @@
|
||||||
|
{#
|
||||||
|
/**
|
||||||
|
* @file
|
||||||
|
* Theme override to display a block.
|
||||||
|
*
|
||||||
|
* 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) }}>
|
||||||
|
{{ title_prefix }}
|
||||||
|
{% if label %}
|
||||||
|
<h2{{ title_attributes }}>{{ label }}</h2>
|
||||||
|
{% endif %}
|
||||||
|
{{ title_suffix }}
|
||||||
|
{% block content %}
|
||||||
|
{{ content }}
|
||||||
|
{% endblock %}
|
||||||
|
</div>
|
|
@ -39,22 +39,35 @@
|
||||||
{# <div class="layout-container"> #}
|
{# <div class="layout-container"> #}
|
||||||
|
|
||||||
<header role="banner">
|
<header role="banner">
|
||||||
<div class="wrapper">
|
<div class="wrapper row">
|
||||||
{{ page.header }}
|
{{ page.header }}
|
||||||
|
<div class="header-block header-left col-4">
|
||||||
|
{% if page.header_left %}
|
||||||
|
{{ page.header_left}}
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
<div class="header-block header-middle col-4">
|
||||||
|
{% if page.header_middle %}
|
||||||
|
{{ page.header_middle}}
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
<div class="header-block header-right col-4">
|
||||||
|
{% if page.header_right %}
|
||||||
|
{{ page.header_right}}
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
{% if page.content.messages %}
|
<main role="main">
|
||||||
<aside class="messages">
|
{% if page.content.messages %}
|
||||||
{{ page.content.messages }}
|
<aside class="messages">
|
||||||
</aside>
|
{{ page.content.messages }}
|
||||||
{% endif %}
|
</aside>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
<main role="main">
|
|
||||||
<div class="layout-content">
|
<div class="layout-content">
|
||||||
<div class="row">
|
{{ page.content|without('messages') }}
|
||||||
{{ page.content|without('messages') }}
|
|
||||||
</div>
|
|
||||||
</div>{# /.layout-content #}
|
</div>{# /.layout-content #}
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
|
|
@ -19,7 +19,7 @@
|
||||||
]
|
]
|
||||||
%}
|
%}
|
||||||
{% if content %}
|
{% if content %}
|
||||||
<div{{ attributes.addClass(classes) }}>
|
<!-- <div{{ attributes.addClass(classes) }}> -->
|
||||||
{{ content }}
|
{{ content }}
|
||||||
</div>
|
<!-- </div> -->
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
Loading…
Reference in New Issue