Skip to content
Snippets Groups Projects
Commit 0facdb51 authored by M Miller's avatar M Miller
Browse files

remove it-osu-web/it-osu-pl-drupal

parent 1577fc48
No related branches found
No related tags found
1 merge request!3Theme in progress.
Hide whitespace changes
Inline Side-by-side
Showing
with 0 additions and 1344 deletions
libraries/it-osu-pl-drupal/02-molecules/forms/form-address/form-address.twig deleted 100644 → 0
+ 0
− 32
View file @ 1577fc48
<form>
<fieldset class="form-fieldset form-fieldset--address ">
<legend>Address</legend>
<div class="form-item cell">
{% include "@atoms/05-form-elements/textfield/textfield.twig"
with {field_label:address_field.field_label,
field_placeholder:address_field.field_placeholder
} %}
</div>
<div class="form-items--inline grid-x grid-margin-x">
<div class="form-item form-item--inline cell medium-3">
{% include "@atoms/05-form-elements/textfield/textfield.twig"
with {field_label:zip_field.field_label,
field_placeholder:zip_field.field_placeholder
} %}
</div>
<div class="form-item form-item--inline cell medium-4">
{% include "@atoms/05-form-elements/select/select.twig"
with {field_label:state_dropdown.field_label,
list_items:state_dropdown.list_items
} %}
</div>
</div>
{% include "@atoms/02-buttons/01-button.twig" %}
</fieldset>
</form>
libraries/it-osu-pl-drupal/02-molecules/forms/form-drupal-login/_form-drupal-login.scss deleted 100644 → 0
+ 0
− 29
View file @ 1577fc48
.login-box {
background: $gray-lightest;
padding: 1em 1.25em 0.5em;
}
.login-box--osu {
margin-bottom: 1.25em;
}
.login-box__header {
font-size: rem-calc(20);
margin-bottom: 0.5em;
}
.login-box__header--drupal {
display: inline;
}
.login-form {
padding-top: 0.5em;
.button {
margin-top: 0.5em;
margin-bottom: 0;
}
}
.details__inner--drupal {
background-color: $gray-lightest;
}
// Hide SAML login link because it is already displayed further up the page.
#edit-simplesamlphp-auth-login-link {
display: none;
}
libraries/it-osu-pl-drupal/02-molecules/forms/form-drupal-login/form-drupal-login.twig deleted 100644 → 0
+ 0
− 42
View file @ 1577fc48
{#
/**
* @file
* Theme override for a 'form' element.
*
* Available variables
* - attributes: A list of HTML attributes for the wrapper element.
* - children: The child elements of the form.
*
* @see template_preprocess_form()
*/
#}
<form{{ attributes }}>
<div class="login-box login-box--osu">
<h2 class="login-box__header login-box__header--osu">Ohio State Users</h2>
<a class="button" href="/saml_login">Log in with your Ohio State credentials</a>
</div>
<details class="details-item login-box--drupal">
<summary>
<h2 class="login-box__header login-box__header--drupal">Non-Ohio State Users</h2>
</summary>
<div class="details__inner details__inner--drupal">
{% if pl == '1' %}
<div class="login-form">
{% include "@atoms/05-form-elements/textfield/textfield.twig"
with {
field_label:user_field.field_label,
field_description: user_field.field_description
} %}
{% include "@atoms/05-form-elements/textfield/textfield.twig"
with {
field_label:password_field.field_label,
field_description: password_field.field_description
} %}
{% include "@atoms/02-buttons/01-button.twig" %}
</div>
{% else %}
<div class="login-form">{{ children }}</div>
{% endif %}
</div>
</details>
</form>
\ No newline at end of file
libraries/it-osu-pl-drupal/02-molecules/forms/form-login/form-login.twig deleted 100644 → 0
+ 0
− 23
View file @ 1577fc48
<form>
<fieldset class="form-fieldset">
<legend>Login Form</legend>
<div class="form-item">
{% include "@atoms/05-form-elements/textfield/textfield.twig"
with {field_label:email_field.field_label,
field_placeholder:email_field.field_placeholder
} %}
</div>
<div class="form-item">
{% include "@atoms/05-form-elements/textfield/textfield.twig"
with {field_label:password_field.field_label,
field_placeholder:password_field.field_placeholder
} %}
</div>
{% include "@atoms/02-buttons/01-button.twig" %}
</fieldset>
</form>
libraries/it-osu-pl-drupal/02-molecules/info-box/_info-box.scss deleted 100644 → 0
+ 0
− 42
View file @ 1577fc48
@mixin info-box($background: $gray-lightest, $color: $gray-darkest) {
background-color: $background;
color: $color;
margin-bottom: $grid-margin-after;
padding: $padding-y $padding-x $padding-y-bottom;
width: 100%;
.info-box__title {
@include heading(26);
color: $color;
margin-bottom: $header-margin-after-less;
}
@if $background == $white {
border: 1px solid $gray-lightest;
}
}
.info-box {
@include info-box();
}
.info-box--white {
@include info-box($white);
}
// Infobox sizes.
// Adjust a bit based on breakpoints.
@include breakpoint(medium) {
.info-box--small {
max-width: 320px;
}
.info-box--medium {
max-width: 440px;
}
}
@include breakpoint(large) {
.info-box--large {
max-width: 640px;
}
}
libraries/it-osu-pl-drupal/02-molecules/info-box/info-box.twig deleted 100644 → 0
+ 0
− 47
View file @ 1577fc48
{#
/**
*
* Pattern for the card molecule
*
* Available variables:
* - infobox_modifiers - array of modifiers to add to the base classname
* - infobox_size: card size, either small, medium or large
* - infobox_extra_classes: string of extra classes to add to main div
* - infobox_heading_level: defaults to 2
* - infobox_title: title
* - infobox_link: link from title (leave blank for no link)
* - infobox_text: the content of the paragraph(s)
#}
{% set infobox_base_class = infobox_base_class|default('info-box') %}
{% set classes_array = [infobox_base_class] %}
{% if (infobox_modifiers is defined) or (infobox_size is defined) %}
{% if infobox_modifiers is defined %}
{% for infobox_modifier in infobox_modifiers %}
{% set classes_array = classes_array|merge(["#{infobox_base_class}--#{infobox_modifier}"]) %}
{% endfor %}
{% endif %}
{% set infobox_classes = classes_array|join(' ') %}
{% if infobox_size is defined %}
{% set classes_array = classes_array|merge(["#{infobox_base_class}--#{infobox_size}"]) %}
{% endif %}
{% set infobox_classes = classes_array|join(' ') %}
{% else %}
{% set infobox_classes = infobox_base_class %}
{% endif %}
<div class="{{ infobox_classes }} {{ infobox_extra_classes }}">
<div class="info-box__title">
{% include "@atoms/00-text/00-headings/_heading.twig" with {
"heading_level": infobox_heading_level|default(2),
"heading": infobox_title,
} %}
</div>
<div class="info-box__body">
{% include "@atoms/00-text/04-paragraph/paragraph.twig" with {
"paragraph_content": infobox_text,
} %}
</div>
</div>
libraries/it-osu-pl-drupal/02-molecules/menus/_menu-item.twig deleted 100644 → 0
+ 0
− 38
View file @ 1577fc48
{% if not item_modifiers %}
{% set item_modifiers = [] %}
{% endif %}
{# Pass original item modifiers down to children #}
{% set original_item_modifiers = item_modifiers %}
{% if item.in_active_trail == TRUE %}
{% set item_modifiers = item_modifiers|merge(['active']) %}
{% endif %}
{% if menu_level > 0 %}
{% set item_modifiers = item_modifiers|merge(['sub', 'sub-' ~ menu_level]) %}
{% endif %}
{% if item.below %}
{% set item_modifiers = item_modifiers|merge(['with-sub']) %}
{% endif %}
{# below could maybe be done without a loop? #}
{% for modifier in item.modifiers %}
{% set item_modifiers = item_modifiers|merge([modifier]) %}
{% endfor %}
{% embed "@atoms/03-lists/_list-item.twig" with {
"list_item_label": item_label,
"li_base_class": item_base_class|default(menu_class ~ '__item'),
"li_modifiers": item_modifiers,
"li_blockname": item_blockname,
} %}
{% block list_item_content %}
{% include "@atoms/01-links/link/link.twig" with {
"link_content": item.title,
"link_url": item.url,
"link_base_class": item_base_class|default(menu_class ~ '__link'),
"link_modifiers": item_modifiers,
} %}
{% if item.below %}
<span class="expand-sub"></span>
{{ menus.menu_links(item.below, attributes, menu_level + 1, menu_class, menu_modifiers, menu_blockname, item_base_class, original_item_modifiers, item_blockname) }}
{% endif %}
{% endblock %}
{% endembed %}
libraries/it-osu-pl-drupal/02-molecules/menus/_menu.twig deleted 100644 → 0
+ 0
− 59
View file @ 1577fc48
{#
/**
* @file
* Theme override to display a menu.
*
* Available variables:
* - menu_name: The machine name of the menu.
* - items: A nested list of menu items. Each menu item contains:
* - attributes: HTML attributes for the menu item.
* - below: The menu item child items.
* - title: The menu link title.
* - url: The menu link url, instance of \Drupal\Core\Url
* - localized_options: Menu link localized options.
* - is_expanded: TRUE if the link has visible children within the current
* menu tree.
* - is_collapsed: TRUE if the link has children within the current menu tree
* that are not currently visible.
* - in_active_trail: TRUE if the link is in the active trail.
*/
#}
{% import _self as menus %}
{#
We call a macro which calls itself to render the full tree.
@see http://twig.sensiolabs.org/doc/tags/macro.html
#}
{{ menus.menu_links(items, attributes, 0, menu_class, menu_modifiers, menu_blockname, item_base_class, item_modifiers, item_blockname) }}
{% macro menu_links(items, attributes, menu_level, menu_class, menu_modifiers, menu_blockname, item_base_class, item_modifiers, item_blockname) %}
{% import _self as menus %}
{% if items %}
{# Set classes #}
{% set menu_class = menu_class|default('menu') %}
{% if not menu_modifiers %}
{% set menu_modifiers = [] %}
{% endif %}
{% if menu_level > 0 %}
{% set menu_modifiers = menu_modifiers|merge(['sub', 'sub-' ~ menu_level]) %}
{% endif %}
{# List #}
{% embed "@atoms/03-lists/00-ul.twig" with {
ul_base_class: menu_class,
ul_modifiers: menu_modifiers,
ul_blockname: menu_blockname
} %}
{% block list_content %}
{% for item in items %}
{% include "@molecules/menus/_menu-item.twig" with {
li_base_class: item_base_class,
li_modifiers: item_modifiers,
li_blockname: item_blockname,
} %}
{% endfor %}
{% endblock %}
{% endembed %}
{% endif %}
{% endmacro %}
libraries/it-osu-pl-drupal/02-molecules/menus/breadcrumbs/_breadcrumbs.scss deleted 100644 → 0
+ 0
− 44
View file @ 1577fc48
.breadcrumb {
@include list-reset;
padding: $space-y-half 0 $space-y;
}
.breadcrumb__item,
.breadcrumb__link,
.breadcrumb__link:link,
.breadcrumb__link:visited,
.breadcrumb__link:focus {
color: $gray;
font-weight: 400;
text-decoration: none;
}
.breadcrumb__link:hover {
text-decoration: underline;
color: $gray-darkest;
}
.breadcrumb__item {
display: inline-block;
font-size: rem-calc(14);
font-weight: 400;
&::after {
content: '|';
color: $red;
font-weight: 700;
margin: 0 3px;
}
&:last-child {
color: $gray-darkest;
&::after {
content: none;
}
}
}
.breadcrumb_link:active {
color: $red;
}
libraries/it-osu-pl-drupal/02-molecules/menus/breadcrumbs/breadcrumbs.twig deleted 100644 → 0
+ 0
− 25
View file @ 1577fc48
{#
/**
* @file
* Theme override for a breadcrumb trail.
*
* Available variables:
* - breadcrumb: Breadcrumb trail items.
*/
#}
{% if breadcrumb %}
<nav role="navigation" aria-labelledby="system-breadcrumb">
<h2 class="visually-hidden">{{ 'Breadcrumb'|t }}</h2>
<ol class="breadcrumb">
{% for item in breadcrumb %}
<li class="breadcrumb__item">
{% if item.url %}
<a class="breadcrumb__link" href="{{ item.url }}">{{ item.text }}</a>
{% else %}
{{ item.text }}
{% endif %}
</li>
{% endfor %}
</ol>
</nav>
{% endif %}
libraries/it-osu-pl-drupal/02-molecules/menus/main-menu/_main-menu.scss deleted 100644 → 0
+ 0
− 504
View file @ 1577fc48
//adapted from https://code.osu.edu/ocio_odee_web/a11y-navbar
//translate variables for this theme
$lt-gray: $gray-lightest;
$md-gray: $gray;
$dk-gray: $gray-darkest;
//from original sass/mixins/_visually-hidden.scss
// Hide only visually, but have it available for screenreaders: h5bp.com/v
@mixin visually-hidden($focusable: false) {
border: 0 !important;
clip: rect(0 0 0 0) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important;
// Extends the `visually-hidden` class to allow the element to be focusable
// when navigated to via the keyboard: h5bp.com/p
@if $focusable == true {
&:active,
&:focus {
clip: auto !important;
height: auto !important;
margin: 0 !important;
overflow: visible !important;
position: static !important;
width: auto !important;
}
}
}
//from original sass/reset/_button-reset.scss
@mixin button-reset {
padding: 0;
border: none;
font: inherit;
color: inherit;
background-color: transparent;
cursor: pointer;
}
//excerpt from original sass/reset/_reset-src.scss
@mixin element-reset {
border: 0;
font-size: 100%;
vertical-align: baseline;
}
// from original sass/base/_navbar.scss -- altered for this theme
nav.a11y-navbar {
@include element-reset();
/*
Reset potentially nested elements.
*/
div,
span,
ul,
ol,
li,
a,
p {
@include element-reset();
}
ul,
ol,
li {
@include list-reset();
}
font-family: $proxima;
display: block;
position: relative;
width: 100%;
overflow: visible;
ul.a11y-navbar-menubar {
background-color: $lt-gray;
list-style-type: none;
li {
list-style-type: none;
position: relative;
a[role='menuitem'] {
color: $dk-gray;
text-decoration: none;
background-color: $lt-gray;
line-height: 2.25rem;
padding: 0 1rem;
display: block;
height: 2.25rem;
text-transform: uppercase;
position: relative;
z-index: 99;
margin-bottom: 1px;
&:focus,
&:hover {
color: $lt-gray;
background-color: $dk-gray;
outline-offset: -1px;
outline-color: white;
z-index: 999;
}
}
ul[role='menu'] {
opacity: 0;
&.a11y-navbar-menu-open {
display: block;
min-width: 10rem;
width: 100%;
position: absolute;
opacity: 1;
transition: opacity 0.4s linear;
z-index: 9999;
li {
display: block;
width: 100%;
a[aria-haspopup='true'] {
&::after {
// Right arrows
content: '';
width: 0;
height: 0;
border-top: 0.25rem solid transparent;
border-bottom: 0.25rem solid transparent;
border-left: 0.25rem solid $dk-gray;
position: absolute;
right: 0.5rem;
top: 0.75rem;
}
&:focus::after,
&:hover::after {
border-left: 0.25rem solid $lt-gray;
}
}
}
}
&.a11y-navbar-menu-closed {
@include visually-hidden();
}
}
}
&.a11y-navbar-orientation-horizontal {
li {
display: inline-block;
a[role='menuitem'] {
&.a11y-navbar-menuitem {
border-bottom: none;
&[aria-haspopup='true'] {
padding-right: 1.5rem;
&::after {
// Down arrows
content: '';
width: 0;
height: 0;
border-top: 0.25rem solid $dk-gray;
border-right: 0.25rem solid transparent;
border-left: 0.25rem solid transparent;
position: absolute;
right: 0.5rem;
top: 1rem;
}
&:focus::after,
&:hover::after {
border-top: 0.25rem solid $lt-gray;
}
}
}
}
ul[role='menu'] {
&.a11y-navbar-menu-open {
top: 2.325rem;
left: 0;
background: white;
li {
a[role='menuitem'] {
// Second-level menu items
background-color: darken($lt-gray, 10%);
&:focus,
&:hover {
background-color: $dk-gray;
}
}
ul[role='menu'] {
top: 0;
left: 100%;
li {
a[role='menuitem'] {
// Third-level menu items
background-color: darken($lt-gray, 20%);
&:focus,
&:hover {
background-color: $dk-gray;
}
}
}
}
}
}
}
}
}
&.a11y-navbar-orientation-vertical {
width: 10rem;
a[role='menuitem'] {
&[aria-haspopup='true'] {
&::after {
// Right arrows
content: '';
width: 0;
height: 0;
border-top: 0.25rem solid transparent;
border-bottom: 0.25rem solid transparent;
border-left: 0.25rem solid $dk-gray;
position: absolute;
right: 0.25rem;
top: 0.5rem;
}
}
}
li {
border: 1px solid $md-gray;
border-bottom: none;
&:last-child {
border-bottom: 1px solid $md-gray;
}
ul[role='menu'] {
&.a11y-navbar-menu-open {
top: -1px;
left: 100%;
}
}
}
}
}
&.a11y-navbar-responsive {
& div.a11y-navbar-instructions-show {
// Keep instructions visually hidden in responsive menu.
@include visually-hidden();
}
ul.a11y-navbar-menubar {
// Responsive menu should be identical whether vertical or horizontal initially.
border-top: 1px solid white;
background: white;
&.a11y-navbar-orientation-horizontal,
&.a11y-navbar-orientation-vertical {
// Undo aria-orientation="vertical" ul[role=menubar] width setting.
width: auto;
li {
// Undo aria-orientation="vertical" li border setting.
border: none;
display: block;
a[role='menuitem'] {
&.a11y-navbar-menuitem {
color: $dk-gray;
background-color: darken($lt-gray, 7%);
border-right: none;
position: relative;
z-index: 99;
height: 2.5rem;
line-height: 2.5;
margin-bottom: 1px;
}
&:focus,
&:hover {
outline: 2px dotted $teal;
outline-offset: -2px;
z-index: 999;
}
&[aria-haspopup='true'] {
padding-right: 1.5rem;
&::after {
// Down arrows
content: '';
width: 0;
height: 0;
border-top: 0.25rem solid transparent; //should be transparent when using responsiveSubmenuToggles
border-right: 0.25rem solid transparent;
border-left: 0.25rem solid transparent;
position: absolute;
right: 1.325rem;
top: 1rem;
}
&:focus::after,
&:hover::after {
border-top: 0.25rem solid transparent; //should be transparent when using responsiveSubmenuToggles
}
}
}
ul[role='menu'] {
opacity: 1;
max-height: 0;
overflow: hidden;
position: static;
width: 100%;
&.a11y-navbar-menu-open {
max-height: 9999px;
transition: max-height 1s ease-in;
}
li {
a[role='menuitem'] {
// Second-level menuitems.
color: $dk-gray;
background-color: darken($lt-gray, 15%);
padding-left: 1.875rem;
height: 2.5rem;
line-height: 2.5;
margin-bottom: 1px;
&:focus,
&:hover {
background-color: darken($lt-gray, 15%);
outline: 2px dotted $teal;
outline-offset: -2px;
}
// Override default right arrows on submenus.
&[aria-haspopup='true'] {
padding-right: 1.5rem;
&::after {
// Down arrows
content: '';
width: 0;
height: 0;
border-top: 0.25rem solid transparent; //should be transparent when using responsiveSubmenuToggles
border-right: 0.25rem solid transparent;
border-left: 0.25rem solid transparent;
position: absolute;
right: 1.325rem;
top: 1rem;
}
&:focus::after,
&:hover::after {
border-top: 0.25rem solid transparent; //should be transparent when using responsiveSubmenuToggles
}
}
}
ul[role='menu'] {
li {
a[role='menuitem'] {
// Third-level menuitems.
color: darken($dk-gray, 10%);
background-color: darken($lt-gray, 25%);
padding-left: 2.75rem;
&:focus,
&:hover {
color: darken($dk-gray, 10%);
background-color: darken($lt-gray, 25%);
}
}
}
}
}
}
button.a11y-navbar-submenu-toggle {
position: absolute;
right: 0.75rem;
top: 0.1875rem;
height: 2.125rem;
width: 2.125rem;
z-index: 9999;
box-shadow: none;
border: none;
border-radius: 0;
background-color: transparent;
padding: 0;
&:focus {
outline: 1px dotted $dk-gray;
}
span {
@include visually-hidden();
}
&::after {
// Pure CSS Chevron.
content: '';
display: inline-block;
border-right: 2px solid $dk-gray;
border-bottom: 2px solid $dk-gray;
width: 10px;
height: 10px;
background-color: transparent;
position: relative;
}
&[aria-expanded='true'] {
&::after {
transform: rotate(225deg);
top: 3px;
}
}
&[aria-expanded='false'] {
&::after {
transform: rotate(45deg);
top: -2px;
}
}
}
}
}
}
}
&.a11y-navbar-closed {
@include visually-hidden();
}
div.a11y-navbar-instructions {
@include visually-hidden();
}
}
button.a11y-navbar-toggle {
@include button-reset();
font-family: $proxima;
background-color: $lt-gray;
color: $dk-gray;
width: 100%;
padding: 0.5rem 1.125rem;
text-align: left;
position: relative;
text-transform: uppercase;
&:focus {
outline: 2px dotted $teal;
outline-offset: -2px;
z-index: 999;
}
// Hamburger icon.
span {
position: absolute;
right: 1.125rem;
top: 45%;
&,
&::after,
&::before {
cursor: pointer;
border-radius: 1px;
height: 3px;
width: 20px;
background: $dk-gray;
position: absolute;
display: block;
content: '';
}
&::before {
top: -5px;
}
&::after {
bottom: -5px;
}
}
}
libraries/it-osu-pl-drupal/02-molecules/menus/main-menu/main-menu.twig deleted 100644 → 0
+ 0
− 93
View file @ 1577fc48
{#
/**
* @file
* Theme override to display a menu.
*
* Available variables:
* - menu_name: The machine name of the menu.
* - items: A nested list of menu items. Each menu item contains:
* - attributes: HTML attributes for the menu item.
* - below: The menu item child items.
* - title: The menu link title.
* - url: The menu link url, instance of \Drupal\Core\Url
* - localized_options: Menu link localized options.
* - is_expanded: TRUE if the link has visible children within the current
* menu tree.
* - is_collapsed: TRUE if the link has children within the current menu tree
* that are not currently visible.
* - in_active_trail: TRUE if the link is in the active trail.
*/
#}
{% if pl == '1' %}
<nav id="main-nav">
<div class="main-nav--inner">
<ul>
<li><a href="/toolsets" data-drupal-link-system-path="toolsets">Toolsets</a>
<ul>
<li><a href="/toolsets/mediasite" data-drupal-link-system-path="node/28">Mediasite</a>
</li>
<li><a href="/toolsets/top-hat" data-drupal-link-system-path="node/33">Top Hat</a>
</li>
</ul>
</li>
<li><a href="/learning-topics" data-drupal-link-system-path="learning-topics">Learning Topics</a>
</li>
<li><a href="#">Item 3</a>
<ul>
<li><a href="#">Item 3.1 Longer Title</a></li>
<li><a href="#">Item 3.2</a>
<ul>
<li><a href="#">Item 3.2.1</a></li>
<li><a href="#">Item 3.2.2</a></li>
</ul>
</li>
<li><a href="#">Item 3.3</a></li>
<li><a href="#">Item 3.4</a></li>
<li><a href="#">Item 3.5</a></li>
</ul>
</li>
</ul>
</div>
</nav>
{% else %}
<nav id="main-nav">
<div class="main-nav--inner">
{% import _self as menus %}
{#
We call a macro which calls itself to render the full tree.
@see http://twig.sensiolabs.org/doc/tags/macro.html
#}
{{ menus.menu_links(items, attributes, 0) }}
{% macro menu_links(items, attributes, menu_level) %}
{% import _self as menus %}
{% if items %}
<ul>
{% for item in items %}
{%
set classes = [
'menu-item',
item.in_active_trail ? 'menu-item--active-trail',
]
%}
<li{{ item.attributes.addClass(classes) }}>
{{ link(item.title, item.url) }}
{% if item.below %}
{{ menus.menu_links(item.below, attributes, menu_level + 1) }}
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
{% endmacro %}
</div>
</nav>
{% endif %}
libraries/it-osu-pl-drupal/02-molecules/pager/_pager.scss deleted 100644 → 0
+ 0
− 43
View file @ 1577fc48
.pager {
margin: 2em 0;
}
.pager__items {
@include list-reset;
text-align: center;
}
.pager__item {
display: inline-block;
margin: 0 0.75em;
}
.pager__link,
.pager__link:link,
.pager__link:visited {
border: 1px solid $red;
font-weight: 600;
text-decoration: none;
line-height: 1;
padding: 8px;
display: block;
min-width: 36px;
&.is-active,
&:hover {
color: $white;
background: $red;
}
&:focus {
outline: 2px dotted $gray-darkest;
outline-offset: 0;
border-color: $clear;
}
}
.pager__link--prev {
svg {
transform: rotate(180deg);
}
}
libraries/it-osu-pl-drupal/02-molecules/pager/pager.twig deleted 100644 → 0
+ 0
− 80
View file @ 1577fc48
{#
/**
* @file
* Theme override to display a pager.
*
* Available variables:
* - items: List of pager items.
* The list is keyed by the following elements:
* - first: Item for the first page; not present on the first page of results.
* - previous: Item for the previous page; not present on the first page
* of results.
* - next: Item for the next page; not present on the last page of results.
* - last: Item for the last page; not present on the last page of results.
* - pages: List of pages, keyed by page number.
* Sub-sub elements:
* items.first, items.previous, items.next, items.last, and each item inside
* items.pages contain the following elements:
* - href: URL with appropriate query parameters for the item.
* - attributes: A keyed list of HTML attributes for the item.
* - text: The visible text used for the item link, such as "‹ Previous"
* or "Next ›".
* - current: The page number of the current page.
* - ellipses: If there are more pages than the quantity allows, then an
* ellipsis before or after the listed pages may be present.
* - previous: Present if the currently visible list of pages does not start
* at the first page.
* - next: Present if the visible list of pages ends before the last page.
*
* @see template_preprocess_pager()
*/
#}
{% if items %}
<nav class="pager" role="navigation" aria-labelledby="pagination-heading">
<h4 id="pagination-heading" class="visually-hidden">{{ 'Pagination'|t }}</h4>
<ul class="pager__items js-pager__items">
{# Print previous item if we are not on the first page. #}
{% if items.previous %}
<li class="pager__item pager__item--previous">
<a class="pager__link pager__link--prev" href="{{ items.previous.href }}" title="{{ 'Go to previous page'|t }}" rel="prev"{{ items.previous.attributes|without('href', 'title', 'rel') }}>
<span class="visually-hidden">{{ 'Previous page'|t }}</span>
<span aria-hidden="true"><i class="fas fa-chevron-right"></i></span>
</a>
</li>
{% endif %}
{# Add an ellipsis if there are further previous pages. #}
{% if ellipses.previous %}
<li class="pager__item pager__item--ellipsis" role="presentation">&hellip;</li>
{% endif %}
{# Now generate the actual pager piece. #}
{% for key, item in items.pages %}
<li class="pager__item{{ current == key ? ' is-active' : '' }}">
{% if current == key %}
{% set title = 'Current page'|t %}
{% else %}
{% set title = 'Go to page @key'|t({'@key': key}) %}
{% endif %}
<a class="pager__link{{ current == key ? ' is-active' : '' }}" href="{{ item.href }}" title="{{ title }}"{{ item.attributes|without('href', 'title') }}>
<span class="visually-hidden">
{{ current == key ? 'Current page'|t : 'Page'|t }}
</span>
{{- key -}}
</a>
</li>
{% endfor %}
{# Add an ellipsis if there are further next pages. #}
{% if ellipses.next %}
<li class="pager__item pager__item--ellipsis" role="presentation">&hellip;</li>
{% endif %}
{# Print next item if we are not on the last page. #}
{% if items.next %}
<li class="pager__item pager__item--next">
<a class="pager__link pager__link--next" href="{{ items.next.href }}" title="{{ 'Go to next page'|t }}" rel="next"{{ items.next.attributes|without('href', 'title', 'rel') }}>
<span class="visually-hidden">{{ 'Next page'|t }}</span>
<span aria-hidden="true"><i class="fas fa-chevron-right"></i></span>
</a>
</li>
{% endif %}
</ul>
</nav>
{% endif %}
libraries/it-osu-pl-drupal/02-molecules/social-media-links/_social-media-links.scss deleted 100644 → 0
+ 0
− 5
View file @ 1577fc48
.social-media-links__list {
list-style: none;
padding: 0;
margin: 0;
}
libraries/it-osu-pl-drupal/02-molecules/social-media-links/social-media-links.twig deleted 100644 → 0
+ 0
− 28
View file @ 1577fc48
{#
/**
* @file
* Pattern for a block of social-media-links.
*
*/
#}
{% if pl != '1' %}
{% set social_links = [
{ 'name':'Twitter', 'url': twitter, 'icon': 'twitter', 'prefix': 'fab' },
{ 'name':'Facebook', 'url': facebook, 'icon': 'facebook-f', 'prefix': 'fab' },
{ 'name':'LinkedIn', 'url': linkedin, 'icon': 'linkedin-in', 'prefix': 'fab' },
{ 'name':'YouTube', 'url': youtube, 'icon': 'youtube', 'prefix': 'fab' },
{ 'name':'Instagram', 'url': instagram, 'icon': 'instagram', 'prefix': 'fab' },
{ 'name':'Photo-sharing', 'url': photos, 'icon': 'camera', 'prefix': 'fas' }
] %}
{% endif %}
<div class="social-media-links">
<ul class="social-media-links__list">
{% for social_link in social_links %}
{% if social_link.url is not empty %}
{% include "@atoms/01-links/social-media-link/social-media-link.twig" %}
{% endif %}
{% endfor %}
</ul>
</div>
libraries/it-osu-pl-drupal/02-molecules/status-message/_status-message.scss deleted 100644 → 0
+ 0
− 48
View file @ 1577fc48
$statuses: (
'status': $teal,
'warning': $orange-dark,
'error': $violet,
) !default;
@each $status-type, $color in $statuses {
.status--#{$status-type} {
background: $color;
color: $white;
font-size: 1rem;
font-weight: 600;
display: block;
margin-bottom: 2em;
padding: 1.5em;
a {
color: $gray-lighter;
font-weight: 600;
text-decoration: underline;
&:focus,
&:hover {
color: $white;
}
}
ul {
padding: 0;
margin: 0;
}
.icon {
float: left;
margin-right: 1.25em;
}
.svg-inline--fa {
font-size: 2rem;
margin-top: -0.1375em;
}
.placeholder {
font-style: normal;
font-weight: 700;
}
}
}
libraries/it-osu-pl-drupal/02-molecules/status-message/status-message.twig deleted 100644 → 0
+ 0
− 59
View file @ 1577fc48
{#
/**
* @file
* Theme override for status messages.
*
* Displays status, error, and warning messages, grouped by type.
*
* An invisible heading identifies the messages for assistive technology.
* Sighted users see a colored box. See http://www.w3.org/TR/WCAG-TECHS/H69.html
* for info.
*
* Add an ARIA label to the contentinfo area so that assistive technology
* user agents will better describe this landmark.
*
* Available variables:
* - message_list: List of messages to be displayed, grouped by type.
* - status_headings: List of all status types.
* - display: (optional) May have a value of 'status' or 'error' when only
* displaying messages of that specific type.
* - attributes: HTML attributes for the element, including:
* - class: HTML classes.
*/
#}
{% set error_icon = 'fas fa-times-circle' %}
{% set warning_icon = 'fas fa-exclamation-triangle' %}
{% set status_icon = 'fas fa-info-circle' %}
{% for type, messages in message_list %}
{% if type == 'error' %}
{% set icon = error_icon %}
{% elseif type == 'warning' %}
{% set icon = warning_icon %}
{% else %}
{% set icon = status_icon %}
{% endif %}
<div class="status-box" role="contentinfo" aria-label="{{ status_headings[type] }}"{{ attributes|without('role', 'aria-label') }}>
{% if type == 'error' %}
<div role="alert">
{% endif %}
{% if status_headings[type] %}
<h2 class="visually-hidden">{{ status_headings[type] }}</h2>
{% endif %}
{% if messages|length > 1 %}
<ul>
{% for message in messages %}
<li class="status status--{{ type }}">{{ message }}</li>
{% endfor %}
</ul>
{% else %}
<div class="status status--{{ type }}"><div class="icon"><i class="{{ icon }}"></i></div>{{ messages|first }}</div>
{% endif %}
{% if type == 'error' %}
</div>
{% endif %}
</div>
{% endfor %}
libraries/it-osu-pl-drupal/02-molecules/tile/_tile.scss deleted 100644 → 0
+ 0
− 50
View file @ 1577fc48
@mixin tile($background: $gray-lightest, $color: $gray-darkest) {
background-color: $background;
color: $color;
margin-bottom: $grid-margin-after;
padding: $padding-y $padding-x $padding-y-bottom;
width: 100%;
text-align: center;
display: block;
text-decoration: none;
color: $color;
&:hover {
background: darken($background, 2%);
}
.tile__icon {
max-width: rem-calc(100);
height: auto;
margin: $space-y-half auto $space-y;
}
.tile__title {
color: $color;
margin-top: 3px;
h2,
h3,
h4 {
@include heading(26, 700);
margin-bottom: $header-margin-after-less;
}
}
.tile__body {
font-family: $capita;
font-style: italic;
font-weight: 300;
}
@if $background == $white {
border: 1px solid $gray-lightest;
}
}
a.tile {
@include tile();
}
a.tile--white {
@include tile($white);
}
libraries/it-osu-pl-drupal/02-molecules/tile/_tile.twig deleted 100644 → 0
+ 0
− 53
View file @ 1577fc48
{#
/**
* Available variables:
* - tile_modifiers - array of modifiers to add to the base classname
* - tile_extra_classes - string of extra classes to add to main div
* - tile_heading_level - defaults to 2
* - tile_title - title
* - tile_link - link from title (leave blank for no link)
* - tile_text - the content of the paragraph
#}
{% set tile_base_class = tile_base_class|default('tile') %}
{% set classes_array = [tile_base_class] %}
{% if (tile_modifiers is defined) or (tile_icon is defined) %}
{% if tile_icon is defined %}
{% set classes_array = classes_array|merge(["#{tile_base_class}--with-icon"]) %}
{% endif %}
{% if tile_modifiers is defined %}
{% for tile_modifier in tile_modifiers %}
{% set classes_array = classes_array|merge(["#{tile_base_class}--#{tile_modifier}"]) %}
{% endfor %}
{% endif %}
{% set tile_classes = classes_array|join(' ') %}
{% else %}
{% set tile_classes = tile_base_class %}
{% endif %}
<a href="{{ tile_link }}" class="{{ tile_classes }} {{ tile_extra_classes }}">
{% if tile_icon %}
<div class="tile__icon">
<img src="{{ tile_icon }}" alt="{{ tile_icon_alt }}" />
</div>
{% endif %}
<div class="tile__title">
{% include "@atoms/00-text/00-headings/_heading.twig" with {
"heading_level": tile_heading_level|default(2),
"heading": tile_title,
} %}
</div>
{% if tile_text %}
<div class="tile__body">
{% include "@atoms/00-text/04-paragraph/paragraph.twig" with {
"paragraph_content": tile_text,
} %}
</div>
{% endif %}
</a>
\ No newline at end of file
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