started theming header
This commit is contained in:
parent
69be45a55c
commit
9f17d68e79
|
@ -8,8 +8,8 @@ dependencies:
|
|||
- materiotheme
|
||||
id: sitebranding
|
||||
theme: materiotheme
|
||||
region: header
|
||||
weight: -2
|
||||
region: header_left
|
||||
weight: -1
|
||||
provider: null
|
||||
plugin: system_branding_block
|
||||
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
|
||||
|
||||
@import 'base/reset';
|
||||
@import 'base/variables';
|
||||
@import 'base/colors';
|
||||
@import 'base/grid';
|
||||
@import 'base/layout';
|
||||
|
@ -21,3 +22,41 @@ html{
|
|||
aside.messages{
|
||||
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{
|
||||
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:
|
||||
header: Header
|
||||
header_left: Header left
|
||||
header_middle: Header middle
|
||||
header_right: Header right
|
||||
content: Content
|
||||
footer_left: 'Footer Left'
|
||||
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"> #}
|
||||
|
||||
<header role="banner">
|
||||
<div class="wrapper">
|
||||
<div class="wrapper row">
|
||||
{{ 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>
|
||||
</header>
|
||||
|
||||
<main role="main">
|
||||
{% if page.content.messages %}
|
||||
<aside class="messages">
|
||||
{{ page.content.messages }}
|
||||
</aside>
|
||||
{% endif %}
|
||||
|
||||
<main role="main">
|
||||
<div class="layout-content">
|
||||
<div class="row">
|
||||
{{ page.content|without('messages') }}
|
||||
</div>
|
||||
</div>{# /.layout-content #}
|
||||
</main>
|
||||
|
||||
|
|
|
@ -19,7 +19,7 @@
|
|||
]
|
||||
%}
|
||||
{% if content %}
|
||||
<div{{ attributes.addClass(classes) }}>
|
||||
<!-- <div{{ attributes.addClass(classes) }}> -->
|
||||
{{ content }}
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
{% endif %}
|
||||
|
|
Loading…
Reference in New Issue