Skip to content
GitLab
Commit 05dd9dd9 authored by Martin Leblanc's avatar Martin Leblanc Committed by Kevin Paxman
Browse files

additional patterns for svg inline

parent c101b9bc
Hide whitespace changes
Inline Side-by-side
css/styles.css
View file @ 05dd9dd9
......@@ -4171,6 +4171,16 @@ button {
.uw-date {
width: 100%; }
.node--type-uw-ct-event .uw-date,
.node--type-uw-ct-blog .uw-date,
.node--type-uw-ct-news-item .uw-date {
margin-left: -1rem;
width: auto; }
@media (min-width: 63.1875rem) {
.node--type-uw-ct-event .uw-date,
.node--type-uw-ct-blog .uw-date,
.node--type-uw-ct-news-item .uw-date {
margin-left: inherit; } }
.uw-date-details {
background-color: #fdd54f;
......@@ -5157,7 +5167,7 @@ fieldset,
padding: 0 !important; }
.views-exposed-form .form-actions {
display: flex;
gap: 1rem; }
gap: 2rem; }
.views-exposed-form .form-actions .button.js-form-submit.form-submit {
font-weight: inherit; }
......@@ -5696,12 +5706,40 @@ fieldset,
left: 35%;
right: 10%; } }
.uw-icon {
display: inline-block; }
.uw-icon * {
transition: none; }
.uw-icon-link {
display: inline-block; }
.uw-icon * {
transition: none; }
.icon--button {
align-items: center;
background: none;
border: 1px solid #000;
display: flex;
font-family: "BureauGrot Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif;
font-size: 0.79rem;
font-weight: normal;
gap: 0.5rem;
height: 2rem;
padding: 0.25rem 0.5rem;
text-transform: uppercase;
transition: background 200ms cubic-bezier(0.4, 0, 1, 1); }
.icon--button .uw-icon svg {
fill: #000;
width: 1rem; }
.icon--button.uw-icon-link {
color: #000;
text-decoration: none; }
.icon--button.uw-icon-link:visited {
color: #000; }
.icon--button.uw-icon-link:hover, .icon--button.uw-icon-link:focus {
color: #757575;
text-decoration: none; }
.icon--button.uw-icon-link:active {
color: #757575; }
.icon--button.uw-icon-link:hover, .icon--button.uw-icon-link:focus {
background: #000;
color: #fff; }
.icon--button.uw-icon-link:hover .uw-icon svg, .icon--button.uw-icon-link:focus .uw-icon svg {
fill: #fff; }
.uw-image__wrapper.uw-contained-width {
margin-left: auto;
......@@ -7802,6 +7840,9 @@ picture {
speak: none;
text-transform: none; }
.uw-svg svg:hover {
fill: #353535; }
.uw-tableau__placeholder {
position: relative; }
......@@ -8285,7 +8326,8 @@ html:not(.js) .uw-tabcontent[role="tabpanel"][hidden] {
padding: 0 16px;
display: flex;
gap: 0.5rem;
justify-content: flex-end; }
justify-content: flex-end;
padding: 0; }
@media (min-width: 75rem) {
.view-interact {
padding-left: 0;
......@@ -8399,6 +8441,11 @@ html:not(.js) .uw-tabcontent[role="tabpanel"][hidden] {
.view-filters__close {
display: none; } }
.view-filters .uw-icon {
display: inline-block;
float: left;
margin-right: 0.25rem; }
.view-filters form {
width: 100%; }
.view-filters form ul, .view-filters form li {
......
css/styles.min.css
View file @ 05dd9dd9
This source diff could not be displayed because it is too large. You can view the blob instead.
js/component_scripts.min.js
View file @ 05dd9dd9
/**
* @file
* Ckeditor Modal.
*/
(function ($, Drupal) {
if ($.ui && $.ui.dialog) {
orig_allowInteraction = $.ui.dialog.prototype._allowInteraction;
$.ui.dialog.prototype._allowInteraction = function (event) {
if ($(event.target).closest('.cke_dialog').length) {
return true;
}
return orig_allowInteraction.apply(this, arguments);
};
}
})(jQuery, Drupal);
/**
* @file
*/
......@@ -47,6 +64,58 @@
* @file
*/
/**
* @file
*/
(function ($, Drupal) {
Drupal.behaviors.factfigure = {
attach: function (context, settings) {
$(document).ready(function () {
// Step through each FF on the page.
$('.uw-ff').each(function () {
var result = $(this).find('.uw-ff__has-carousel-settings').length;
// Get the id to reference the individual FF.
// Need this to ensure that if more than one FF on the page,
// that all FFs get the carousel added.
var id = '#uw-ff-' + $(this).data('id');
// Get the number of items for the carousel, if any.
var num_of_items = $(id).data('num-per-carousel') !== '' ? $(this).data('num-per-carousel') : 3;
// Add the carousel to the FF using the id.
$(id + ' .owl-carousel').owlCarousel({
margin: 10,
nav: true,
navContainerClass: 'uw-owl-nav',
navText:[
'‹ prev',
'next ›'
],
responsiveClass: true,
responsive: {
0: {
items: 1
},
600: {
items: num_of_items <= 2 ? (num_of_items - 1 > 0) ? num_of_items - 1 : 1 : 2
},
1000: {
items: num_of_items
}
}
});
});
});
}
};
})(jQuery, Drupal);
/**
* @file
*/
......@@ -117,58 +186,6 @@
};
})(jQuery, Drupal);
/**
* @file
*/
(function ($, Drupal) {
Drupal.behaviors.factfigure = {
attach: function (context, settings) {
$(document).ready(function () {
// Step through each FF on the page.
$('.uw-ff').each(function () {
var result = $(this).find('.uw-ff__has-carousel-settings').length;
// Get the id to reference the individual FF.
// Need this to ensure that if more than one FF on the page,
// that all FFs get the carousel added.
var id = '#uw-ff-' + $(this).data('id');
// Get the number of items for the carousel, if any.
var num_of_items = $(id).data('num-per-carousel') !== '' ? $(this).data('num-per-carousel') : 3;
// Add the carousel to the FF using the id.
$(id + ' .owl-carousel').owlCarousel({
margin: 10,
nav: true,
navContainerClass: 'uw-owl-nav',
navText:[
'‹ prev',
'next ›'
],
responsiveClass: true,
responsive: {
0: {
items: 1
},
600: {
items: num_of_items <= 2 ? (num_of_items - 1 > 0) ? num_of_items - 1 : 1 : 2
},
1000: {
items: num_of_items
}
}
});
});
});
}
};
})(jQuery, Drupal);
/**
* @file
*/
......@@ -373,23 +390,6 @@ else {
};
})(jQuery);
/**
* @file
* Ckeditor Modal.
*/
(function ($, Drupal) {
if ($.ui && $.ui.dialog) {
orig_allowInteraction = $.ui.dialog.prototype._allowInteraction;
$.ui.dialog.prototype._allowInteraction = function (event) {
if ($(event.target).closest('.cke_dialog').length) {
return true;
}
return orig_allowInteraction.apply(this, arguments);
};
}
})(jQuery, Drupal);
/**
* @file
*/
......
source/_patterns/04-components/date/_date.scss
View file @ 05dd9dd9
.uw-date {
width: 100%
width: 100%;
// On node page make the date width auto
// On phone make date touch left
.node--type-uw-ct-event &,
.node--type-uw-ct-blog &,
.node--type-uw-ct-news-item &{
margin-left: -1rem;
width:auto;
@include large {
margin-left:inherit;
}
}
}
.uw-date-details{
......
source/_patterns/04-components/filters/_filters.scss
View file @ 05dd9dd9
......@@ -9,7 +9,7 @@
padding:0 !important;
.form-actions{
display:flex;
gap:1rem;
gap:2rem;
.button.js-form-submit.form-submit{
font-weight:inherit;
&:last-of-type{
......
source/_patterns/04-components/filters/filters.twig
View file @ 05dd9dd9
......@@ -5,10 +5,15 @@
'is_demo': false,
'url': '#offcanvasbutton',
'text': 'Close X',
'modifier_classes': 'icon--button view-filters__close',
'modifier_classes': 'button view-filters__close',
} %}
</div>
<h2>Filters:</h2>
<h2>
{% include '@components/icon/icon.twig' with {
'name': 'filter',
} %}
Filter by:
</h2>
{% block exposed %}
{{ exposed }}
{% endblock %}
......
source/_patterns/04-components/icon/_icon.scss
View file @ 05dd9dd9
// @file
// Styles for an icon.
.uw-icon {
display:inline-block;
// Fixes delayed transitions in Chrome.
* {
transition: none;
}
&-link{
display:inline-block;
}
}
source/_patterns/04-components/icon/icon--button/_icon--button.scss
View file @ 05dd9dd9
//.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));
// }
//}
// @file
$faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat', 'org-sci', 'org-school';
$icon-font-family-small: gesso-font-family(book) !default;
$icon-font-family-normal: gesso-font-family(book) !default;
$icon-font-size-normal: rem(gesso-font-size(-2)) !default;
$icon-font-size-small: rem(gesso-font-size(-3)) !default;
.icon--button {
align-items:center;
background:none;
border: 1px solid gesso-brand(org-default,uw-black,'primary');
display: flex;
font-family: $icon-font-family-small;
font-size: $icon-font-size-normal;
font-weight:normal;
gap:0.5rem;
height:2rem;
padding: 0.25rem 0.5rem;
text-transform: uppercase;
transition:background gesso-duration(short) gesso-easing(ease-in);
.uw-icon {
svg {
fill: gesso-brand(org-default,uw-black,'primary');
width:1rem;
}
}
&.uw-icon-link {
@include link-no-underline(
$card-link-color,
$card-link-color-hover
);
&:hover,
&:focus {
background: gesso-brand(org-default,uw-black,'primary');
color: gesso-brand(org-default,uw-white,'primary');
.uw-icon {
svg{
fill: gesso-brand(org-default,uw-white,'primary');
}
}
}
}
}
source/_patterns/04-components/icon/icon.twig
View file @ 05dd9dd9
{% if pattern_lab %}
<img class="uw-icon {{ icon_modifier_classes }}" src="../../../source/images/icons/{{ name|lower}}.svg"/>
{% else %}
{% set front_path = '/profiles/uw_base_profile/modules/custom/uw_wcms_gesso/source/images/icons/' %}
<img class="uw-icon {{ icon_modifier_classes }}" src="{{ front_path }}{{ name|lower}}.svg"/>
{% endif %}
{% include '@components/svg/_svg.twig' with{
'svg_name': name,
}%}
source/_patterns/04-components/icon/icon.yml
View file @ 05dd9dd9
---
svg_name: 'messages-error'
is_demo: true
name: 'messages-error'
text: 'error'
......
source/_patterns/04-components/svg/_svg.scss 0 → 100644
View file @ 05dd9dd9
.uw-svg {
svg:hover {
fill:#353535;
}
}
\ No newline at end of file
source/_patterns/04-components/svg/_svg.twig 0 → 100644
View file @ 05dd9dd9
<div class="uw-icon uw-svg uw-svg__{{ svg_name }}">
{% include '@components/svg/icons/_' ~ svg_name ~ '.svg.twig' %}
</div>
source/_patterns/04-components/svg/icons/_IE.svg.twig 0 → 100644
View file @ 05dd9dd9
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>IE</title>
<path d="M22.944 19.651h7.377c0.057-0.512 0.080-1.034 0.080-1.569 0-2.507-0.673-4.858-1.848-6.883 1.215-3.228 1.172-5.968-0.455-7.606-1.547-1.54-5.697-1.29-10.388 0.787-0.347-0.026-0.697-0.040-1.051-0.040-6.439 0-11.841 4.431-13.335 10.402 2.020-2.586 4.145-4.461 6.984-5.826-0.258 0.242-1.764 1.739-2.018 1.993-7.486 7.484-9.847 17.26-7.306 19.8 1.931 1.93 5.43 1.604 9.449-0.364 1.869 0.952 3.984 1.488 6.226 1.488 6.035 0 11.15-3.885 13.003-9.295h-7.433c-1.023 1.887-3.023 3.171-5.319 3.171s-4.296-1.284-5.319-3.171c-0.455-0.852-0.716-1.83-0.716-2.864v-0.023h12.071zM10.884 16.025c0.171-3.035 2.694-5.456 5.774-5.456s5.604 2.421 5.774 5.456h-11.548zM28.030 5.119c1.048 1.059 1.021 3.007 0.125 5.438-1.535-2.341-3.766-4.186-6.4-5.239 2.816-1.207 5.106-1.367 6.274-0.199zM2.921 30.227c-1.337-1.337-0.934-4.144 0.788-7.526 1.072 3.008 3.161 5.534 5.854 7.161-2.982 1.354-5.423 1.584-6.643 0.365z"></path>
</svg>
source/_patterns/04-components/svg/icons/_add-to-calendar.svg.twig 0 → 100644
View file @ 05dd9dd9
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>add-to-calendar</title>
<path d="M9.573 10.021c0.735 0 1.332-0.597 1.332-1.333h-0.001v-4.362c0-0.736-0.597-1.332-1.332-1.332s-1.332 0.596-1.331 1.332v4.362c0 0.736 0.596 1.333 1.332 1.333zM21.908 10.021c0.735 0 1.331-0.597 1.331-1.333v-4.362c0-0.736-0.596-1.332-1.332-1.332-0.737 0-1.334 0.596-1.333 1.332v4.362c0 0.736 0.597 1.333 1.334 1.333zM29.001 21.571h-4.53v-4.531c0-0.002 0-0.002-0.006 0l-2.052 0.031c0 0-0.001-0.002-0.002 0l0.001 4.5h-4.37l0.030 2.062 4.34-0.004v4.34l2.060 0.033v-4.373h4.501l0.028-2.051c0.002-0.006 0.002-0.006 0-0.007zM29.517 17.527v-8.495c-0.001-1.741-1.302-3.149-2.907-3.149l-0-0h-2.619v2.69c0 1.15-0.932 2.084-2.083 2.084-0.575 0-1.097-0.232-1.474-0.612-0.376-0.377-0.611-0.9-0.611-1.473v-2.689h-8.167v2.69c0 1.15-0.931 2.084-2.082 2.084-0.574 0-1.096-0.232-1.474-0.612-0.376-0.377-0.61-0.899-0.61-1.472v-2.69h-2.56c-1.606 0-2.908 1.409-2.908 3.149v16.961c0 1.739 1.301 3.151 2.908 3.151h13.819c1.282 0.871 2.829 1.381 4.492 1.381 4.421 0 8.017-3.599 8.017-8.019 0-1.88-0.651-3.611-1.739-4.98zM23.489 29.11c-3.637 0-6.601-2.963-6.601-6.602s2.963-6.6 6.601-6.6c3.64 0 6.601 2.961 6.601 6.6s-2.96 6.602-6.601 6.602z"></path>
</svg>
source/_patterns/04-components/svg/icons/_android.svg.twig 0 → 100644
View file @ 05dd9dd9
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>android</title>
<path d="M27 10c-1.1 0-2 0.9-2 2v8c0 1.1 0.9 2 2 2s2-0.9 2-2v-8c0-1.1-0.9-2-2-2zM3 10c-1.1 0-2 0.9-2 2v8c0 1.1 0.9 2 2 2s2-0.9 2-2v-8c0-1.1-0.9-2-2-2zM6 23c0 1.657 1.343 3 3 3h1v4c0 1.1 0.9 2 2 2s2-0.9 2-2v-4h2v4c0 1.1 0.9 2 2 2s2-0.9 2-2v-4h1c1.657 0 3-1.343 3-3v-11h-18v11zM18.706 2.797l1.266-2.431c0.064-0.122 0.016-0.274-0.106-0.337s-0.274-0.016-0.337 0.106l-1.285 2.468c-1.006-0.389-2.1-0.603-3.244-0.603s-2.237 0.214-3.244 0.603l-1.285-2.468c-0.063-0.122-0.215-0.17-0.337-0.106s-0.17 0.215-0.106 0.337l1.266 2.432c-2.832 1.282-4.883 3.987-5.238 7.203h17.889c-0.355-3.216-2.406-5.921-5.238-7.203zM11 8.45c-0.801 0-1.45-0.649-1.45-1.45s0.649-1.45 1.45-1.45 1.45 0.649 1.45 1.45c-0 0.801-0.649 1.45-1.45 1.45zM19 8.45c-0.801 0-1.45-0.649-1.45-1.45s0.649-1.45 1.45-1.45 1.45 0.649 1.45 1.45c0 0.801-0.649 1.45-1.45 1.45z"></path>
</svg>
source/_patterns/04-components/svg/icons/_apple.svg.twig 0 → 100644
View file @ 05dd9dd9
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>apple</title>
<path d="M24.734 17.003c-0.040-4.053 3.305-5.996 3.454-6.093-1.88-2.751-4.808-3.127-5.851-3.171-2.492-0.252-4.862 1.467-6.127 1.467-1.261 0-3.213-1.43-5.28-1.392-2.716 0.040-5.221 1.579-6.619 4.012-2.822 4.897-0.723 12.151 2.028 16.123 1.344 1.944 2.947 4.127 5.051 4.049 2.026-0.081 2.793-1.311 5.242-1.311s3.138 1.311 5.283 1.271c2.18-0.041 3.562-1.981 4.897-3.931 1.543-2.255 2.179-4.439 2.216-4.551-0.048-0.022-4.252-1.632-4.294-6.473zM20.705 5.11c1.117-1.355 1.871-3.235 1.665-5.11-1.609 0.066-3.559 1.072-4.713 2.423-1.036 1.199-1.942 3.113-1.699 4.951 1.796 0.14 3.629-0.913 4.747-2.264z"></path>
</svg>
source/_patterns/04-components/svg/icons/_arrow-right.svg.twig 0 → 100644
View file @ 05dd9dd9
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>arrow-right</title>
<path d="M12 24l8-8-8-8z"></path>
</svg>
source/_patterns/04-components/svg/icons/_arrow.svg.twig 0 → 100644
View file @ 05dd9dd9
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<path d="M23.702 15.419l-12.925-12.926c-0.312-0.309-0.732-0.485-1.168-0.485-0.438 0-0.858 0.176-1.17 0.485-0.653 0.657-0.653 1.72 0 2.369l11.72 11.724-11.72 11.724c-0.653 0.653-0.653 1.712 0 2.366 0.648 0.65 1.691 0.65 2.339 0l12.925-12.923c0.309-0.312 0.481-0.729 0.481-1.167 0-0.434-0.172-0.858-0.481-1.166z"></path>
</svg>
source/_patterns/04-components/svg/icons/_binoculars.svg.twig 0 → 100644
View file @ 05dd9dd9
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>binoculars</title>
<path d="M30 14h-2l-2-10h-2.5l0.5-4h-6l0.5 4h-5l0.5-4h-6l0.5 4h-2.5l-2 10h-2l-2 16v2h12v-18h2v-2h4v2h2v18h12v-2z"></path>
</svg>
source/_patterns/04-components/svg/icons/_bubble.svg.twig 0 → 100644
View file @ 05dd9dd9
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>bubble</title>
<path d="M26.125 2h-20.25c-3.231 0-5.875 2.644-5.875 5.875v22.125l6-6h20.125c3.231 0 5.875-2.644 5.875-5.875v-10.25c0-3.231-2.644-5.875-5.875-5.875zM28 7.875v0.375h-24v-0.375c0-0.042 0.002-0.084 0.005-0.125h23.99c0.003 0.041 0.005 0.083 0.005 0.125zM27.995 18.25h-23.995v-0.5h24v0.375c0 0.042-0.002 0.084-0.005 0.125zM4 20v-0.25h23.044c-0.273 0.158-0.588 0.25-0.919 0.25h-22.125zM4 19.25v-0.5h23.888c-0.066 0.18-0.16 0.349-0.275 0.5h-23.613zM4 17.25v-0.5h24v0.5h-24zM4 16.25v-0.5h24v0.5h-24zM4 15.25v-0.5h24v0.5h-24zM4 14.25v-0.5h24v0.5h-24zM4 13.25v-0.5h24v0.5h-24zM4 12.25v-0.5h24v0.5h-24zM4 11.25v-0.5h24v0.5h-24zM4 10.25v-0.5h24v0.5h-24zM4 9.25v-0.5h24v0.5h-24zM26.125 6c0.331 0 0.646 0.092 0.919 0.25h-22.089c0.274-0.158 0.588-0.25 0.919-0.25h20.25zM27.613 6.75c0.116 0.151 0.209 0.32 0.275 0.5h-23.776c0.066-0.18 0.16-0.349 0.275-0.5h23.226z"></path>
</svg>
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