Commit e9d408d1 authored by Martin Leblanc's avatar Martin Leblanc Committed by Kevin Paxman
Browse files

additional css for icon pattern

parent 23499ab0
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -511,4 +511,4 @@ $gesso: (
xxl: 96px,
),
gutter-width: 40px,
);
);
\ No newline at end of file
......@@ -44,15 +44,6 @@
padding:rem(gesso-spacing(xxs)) rem(gesso-spacing(xxs));
}
}
.button--icon{
font-size: rem(gesso-font-size(-3));
max-width: 5rem;
padding:rem(gesso-spacing(xxs)) rem(gesso-spacing(xxs));
&:hover,
&:focus {
padding:rem(gesso-spacing(xxs)) rem(gesso-spacing(xxs));
}
}
// Drupal outputs this class on buttons that can delete content.
.button--primary {
......
......@@ -5,7 +5,7 @@
'is_demo': false,
'url': '#offcanvasbutton',
'text': 'Close X',
'modifier_classes': 'button--icon view-filters__close',
'modifier_classes': 'icon--button view-filters__close',
} %}
</div>
<h2>Filters:</h2>
......
// @file
// Styles for an icon.
.uw-icon {
background-position: left; // LTR
background-repeat: no-repeat;
background-size:cover;
color: gesso-brand(org-default,uw-black,'primary');
display:inline-block;
// Fixes delayed transitions in Chrome.
* {
......@@ -13,19 +9,4 @@
&-link{
display:inline-block;
}
&__messages-status{
@include svg-background(messages-status);
height:2rem;
width:2rem;
}
&__messages-warning{
@include svg-background(messages-warning);
height:2rem;
width:2rem;
}
&__messages-error{
@include svg-background(messages-error);
height:2rem;
width:2rem;
}
}
//.icon--button{
// font-size: rem(gesso-font-size(-3));
// max-width: 5rem;
// padding:rem(gesso-spacing(xxs)) rem(gesso-spacing(xxs));
// &:hover,
// &:focus {
// padding:rem(gesso-spacing(xxs)) rem(gesso-spacing(xxs));
// }
//}
{% if icons %}
{% for icon in icons %}
{% if icon.url %}
<a {% if icon.aria %} aria-{{ icon.aria_type_name }}="{{ icon.aria_type_value}}" {% endif %} {% if icon.data_type_name %} data-{{ icon.data_type_name }}="{{ icon.data_type_value }}"{% endif %} {% if icon.btn_id %} id="{{ icon.btn_id }}" {% endif %} href="{{ icon.url }}" class="uw-icon-link {{ modifier_classes }}">
{% endif %}
{% include '@components/icon/icon.twig' with {
name: icon.name,
modifier_classes: icon.modifier_classes,
}
%}
{% if icon.text %}
<span {% if icon.is_hidden %} class="off-screen" {% endif %}>
{{ icon.text|lower }}
</span>
{% endif %}
{% if icon.url %}
</a>
{% endif %}
{% endfor %}
{% else %}
{% if url %}
<a {% if aria %} aria-{{ aria_type_name }}="{{ aria_type_value}}" {% endif %} {% if data_type_name %} data-{{ data_type_name }}="{{ data_type_value }}"{% endif %} {% if btn_id %} id="{{ btn_id }}" {% endif %} href="{{ url }}" class="uw-icon-link {{ modifier_classes }}">
{% endif %}
{% include '@components/icon/icon.twig' with {
name: name,
icon_modifier_classes: icon_modifier_classes,
}
%}
{% if text %}
<span {% if is_hidden %} class="off-screen" {% endif %}>
{{ text|lower }}
</span>
{% endif %}
{% if url %}
</a>
{% endif %}
{% endif %}
name: 'messages-error'
text: 'error'
url: '#'
is_hidden: true
btn_id: ''
icon_modifier_classes: 'icon--small'
#icons:
# - name: 'messages-status'
# text: 'Status'
# url: '#'
# is_hidden: false
# btn_id: ''
# modifier_classes: 'icon--button'
# - name: 'messages-warning'
# text: 'warning'
# url: '#'
# is_hidden: false
# btn_id: ''
# modifier_classes: 'icon--button'
# - name: 'messages-error'
# text: 'error'
# url: '#'
# is_hidden: false
# btn_id: ''
# modifier_classes: 'icon--button'
{% if is_demo %}
{% for icon in icons %}
{% if icon.url %}
<a href="{{ icon.url }}" class="uw-icon-link">
{% endif %}
<i class="uw-icon uw-icon__{{ icon.text|lower }}"></i>
<span {% if icon.is_hidden %} class="off-screen" {% endif %}>
{{ icon.text|lower }}
</span>
{% if icon.url %}
</a>
{% endif %}
{% endfor %}
{% else %}
{% if icon.url %}
<a href="{{ icon.url }}" class="uw-icon-link">
{% endif %}
<i class="uw-icon uw-icon__{{ icon.text|lower }}"></i>
<span {% if icon.is_hidden %} class="off-screen" {% endif %}>
{{ icon.text|lower }}
</span>
{% if icon.url %}
</a>
{% endif %}
{% endif %}
<img class="uw-icon {{ icon_modifier_classes }}" src="../../../source/images/icons/{{ name|lower}}.svg"/>
---
is_demo: true
icons:
- text: 'messages-status'
url: '#'
is_hidden: false
- text: 'messages-warning'
url: '#'
is_hidden: false
- text: 'messages-error'
url: '#'
is_hidden: false
- text: 'facebook'
url: '#'
is_hidden: false
name: 'messages-error'
text: 'error'
url: '#'
is_hidden: false
btn_id: ''
icon_modifier_classes: 'icon--small'
......@@ -36,7 +36,6 @@ $sidebar-width: 18.75rem;
display: flex;
gap:0.5rem;
justify-content:flex-end;
padding:0;
.button{
margin:0;
}
......@@ -127,10 +126,12 @@ $sidebar-width: 18.75rem;
width: $sidebar-width;
~ .view-content {
@include uw-flex-grid();
align-self: flex-start;
grid-column:1/2;
grid-row:1/2;
&--message{
align-self: flex-start;
display:block;
grid-column:1/2;
grid-row:1/2;
......
<div class="view-interact">
{% if exposed %}
{# Print button when filters are present #}
{% include '@components/button/button.twig' with {
'is_button_tag': false,
'is_demo': false,
{% include '@components/icon/icon--button/icon--button.twig' with {
'url': '#view-filters',
'btn_id': 'offcanvasbutton',
'text': 'Filters',
'modifier_classes': 'button--icon icon--filters view-filters__open',
'name': 'filters',
'modifier_classes': 'icon--button view-filters__open',
} %}
{% endif %}
{% if calendar %}
{% include '@components/button/button.twig' with {
'is_button_tag': false,
'is_demo': false,
{% include '@components/icon/icon--button/icon--button.twig' with {
'url': '#',
'text': 'Calendar',
'modifier_classes': 'button--icon icon--calendar',
'text': 'Ical',
'name': 'calendar',
'modifier_classes': 'icon--button',
} %}
{% endif %}
{% if rss_feed %}
{% include '@components/button/button.twig' with {
'is_button_tag': false,
'is_demo': false,
{% include '@components/icon/icon--button/icon--button.twig' with {
'url': '#',
'text': 'rss',
'modifier_classes': 'button--icon icon--rss',
'name': 'rss',
'modifier_classes': 'icon--button icon--rss',
} %}
{% endif %}
{% if feed_icons %}
......
Supports Markdown
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