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 579 deletions
libraries/it-osu-pl-drupal/01-atoms/03-lists/01-ol.twig deleted 100644 → 0
+ 0
− 47
View file @ 1577fc48
{#
/**
* Available variables:
* - ol_base_class - the base classname
* - ol_modifiers - array of modifiers to add to the base classname
*
* - listItems - TBD
*/
#}
{% set ol_base_class = ol_base_class|default('ol') %}
{% set classes_array = [ol_base_class] %}
{% if ol_modifiers is defined %}
{% for ol_modifier in ol_modifiers %}
{% set classes_array = classes_array|merge(["#{ol_base_class}--#{ol_modifier}"]) %}
{% endfor %}
{% set ol_classes = classes_array|join(' ') %}
{% else %}
{% set ol_classes = ol_base_class %}
{% endif %}
<ol class="{{ ol_classes }}">
{% for ol_item in ol_items %}
{% include "@atoms/03-lists/_list-item.twig" with {
"list_item_label": ol_item.label,
"list_item_content": ol_item.content,
"li_base_class": ol_item.li_base_class,
"li_base_class": ol_item.li_base_class,
"li_modifiers": ol_item.li_modifiers,
} %}
{% endfor %}
</ol>
</br>
<b>Another Sample List with levels</b>
<ol>
<li class="list-item">Snackwave synth affogato, la croix slow-carb cronut neutra green juice yuccie pitchfork. </li>
<ol>
<li class="list-item">Man bun tumblr chia gluten-free flannel photo booth humblebrag.</li>
<li class="list-item">Schlitz fixie post-ironic green juice cornhole, migas hoodie. </li>
<ol>
<li class="list-item">Knausgaard pickled cornhole palo Santo hexagon.</li>
<li class="list-item">Bicycle rights ugh neutra sartorial artisan coloring book migas prism.</li>
</ol>
</ol>
<li class="list-item">Forage shabby chic narwhal put a bird on it, venmo before they sold out vaporware VHS ugh.</li>
</ol>
libraries/it-osu-pl-drupal/01-atoms/03-lists/02-dl.twig deleted 100644 → 0
+ 0
− 33
View file @ 1577fc48
{#
/**
* Available variables:
* - dl_base_class - the base classname
* - dl_modifiers - array of modifiers to add to the base classname
*
* - listItems - TBD
*/
#}
{% set dl_base_class = dl_base_class|default('dl') %}
{% set classes_array = [dl_base_class] %}
{% if dl_modifiers is defined %}
{% for dl_modifier in dl_modifiers %}
{% set classes_array = classes_array|merge(["#{dl_base_class}--#{dl_modifier}"]) %}
{% endfor %}
{% set dl_classes = classes_array|join(' ') %}
{% else %}
{% set dl_classes = dl_base_class %}
{% endif %}
<dl class="{{ dl_classes }}">
{% for dl_item in dl_items %}
{% include "@atoms/03-lists/_list-item-definition.twig" with {
"dl_term": dl_item.dl_term,
"dl_def": dl_item.dl_def,
"dl_term_base_class": dl_item.dl_term_base_class,
"dl_def_base_class": dl_item.dl_def_base_class,
"dl_term_modifiers": dl_item.dl_term_modifiers,
"dl_def_modifiers": dl_item.dl_def_modifiers,
} %}
{% endfor %}
</dl>
libraries/it-osu-pl-drupal/01-atoms/03-lists/_list-item-definition.twig deleted 100644 → 0
+ 0
− 5
View file @ 1577fc48
{% set dl_term_base_class = dl_term_base_class|default('dl-term') %}
{% set dl_def_base_class = dl_def_base_class|default('dl-def') %}
<dt class="{{ dl_term_base_class }}">{{ dl_term }}</dt>
<dd class="{{ dl_def_base_class }}">{{ dl_def }}</dd>
libraries/it-osu-pl-drupal/01-atoms/03-lists/_list-item.twig deleted 100644 → 0
+ 0
− 31
View file @ 1577fc48
{#
/**
* Available variables:
* - li_base_class - the base classname
* - li_modifiers - array of modifiers to add to the base classname
* - list_item_label - (optional) a <strong> label before the list item itself
* - list_item_content - the content of the list_item (typically text)
*
* Available blocks:
* - list_item_content - used to replace the content of the list_item with something other than text
* for example: to insert the image and/or link components
*/
#}
{% set li_base_class = li_base_class|default('list-item') %}
{% set classes_array = [li_base_class] %}
{% if li_modifiers is defined %}
{% for li_modifier in li_modifiers %}
{% set classes_array = classes_array|merge(["#{li_base_class}--#{li_modifier}"]) %}
{% endfor %}
{% set li_classes = classes_array|join(' ') %}
{% else %}
{% set li_classes = li_base_class %}
{% endif %}
<li class="{{ li_classes }}">
{% block list_item_content %}
{% if list_item_label %}<strong>{{ list_item_label }}</strong> {% endif %}
{{ list_item_content }}
{% endblock %}
</li>
libraries/it-osu-pl-drupal/01-atoms/03-lists/_lists.scss deleted 100644 → 0
+ 0
− 52
View file @ 1577fc48
/// Mixin - list-reset
/// Reset list item defaults when no margin, padding, list styles needed
@mixin list-reset {
list-style: none;
margin: 0;
padding: 0;
}
.list-item {
margin-bottom: $space-y-third;
padding-left: $space-x-quarter;
}
.dl-term {
font-weight: 700;
margin-bottom: 0;
}
.dl-def {
margin-left: $space-x-half;
margin-bottom: $space-y-half;
}
ul,
ol {
padding-left: $space-x-third;
}
ul {
list-style-type: disc;
}
ol {
list-style-type: decimal;
}
ol ol {
list-style-type: lower-alpha;
}
ol ol ol {
list-style-type: lower-roman;
}
.field--type-text-long {
ol,
ul {
li {
@extend .list-item;
}
}
}
libraries/it-osu-pl-drupal/01-atoms/04-tables/_tables.scss deleted 100644 → 0
+ 0
− 11
View file @ 1577fc48
.table__caption {
text-align: left;
margin-bottom: 0.5em;
}
.table__heading-cell {
font-weight: 700;
&[scope='row'] {
text-align: left;
}
}
libraries/it-osu-pl-drupal/01-atoms/04-tables/tables.twig deleted 100644 → 0
+ 0
− 38
View file @ 1577fc48
{#
/**
* This is strictly an exmaple file to demonstrate markup in Pattern Lab.
* It is not intended to be included in any other component.
*/
#}
<table class="table">
<caption class="table__caption">This is a table caption.</caption>
<thead>
<tr>
<th scope="col" class="table__heading-cell">Column 1</th>
<th scope="col" class="table__heading-cell">Column 2</th>
<th scope="col" class="table__heading-cell">Column 3</th>
</tr>
</thead>
<tbody>
<tr class="table__row">
<th scope="row" class="table__heading-cell">Row 1</th>
<td class="table__cell">Information about something</td>
<td class="table__cell">And this is important</td>
</tr>
<tr class="table__row">
<th scope="row" class="table__heading-cell">Row 2</th>
<td class="table__cell">Information about something</td>
<td class="table__cell">And this is important</td>
</tr>
<tr class="table__row">
<th scope="row" class="table__heading-cell">Row 3</th>
<td class="table__cell">Information about something</td>
<td class="table__cell">And this is important</td>
</tr>
<tr class="table__row">
<th scope="row" class="table__heading-cell">Row 4</th>
<td class="table__cell">Information about something</td>
<td class="table__cell">And this is important</td>
</tr>
</tbody>
</table>
libraries/it-osu-pl-drupal/01-atoms/05-form-elements/_fieldset.twig deleted 100644 → 0
+ 0
− 48
View file @ 1577fc48
{#
/**
* @file
* Theme override for a fieldset element and its children.
*
* Available variables:
* - attributes: HTML attributes for the fieldset element.
* - errors: (optional) Any errors for this fieldset element, may not be set.
* - required: Boolean indicating whether the fieldeset element is required.
* - legend: The legend element containing the following properties:
* - title: Title of the fieldset, intended for use as the text of the legend.
* - attributes: HTML attributes to apply to the legend.
* - description: The description element containing the following properties:
* - content: The description content of the fieldset.
* - attributes: HTML attributes to apply to the description container.
* - children: The rendered child elements of the fieldset.
* - prefix: The content to add before the fieldset children.
* - suffix: The content to add after the fieldset children.
*
* @see template_preprocess_fieldset()
*/
#}
<fieldset{{ attributes.addClass('form-fieldset') }}>
{%
set legend_classes = [
'h2',
required ? 'js-form-required',
required ? 'form-required',
]
%}
{# Always wrap fieldset legends in a SPAN for CSS positioning. #}
<legend{{ legend.attributes.addClass(legend_classes) }}>{{ legend.title }}</legend>
{% if errors %}
<div>
{{ errors }}
</div>
{% endif %}
{% if prefix %}
<span class="field-prefix">{{ prefix }}</span>
{% endif %}
{{ children }}
{% if suffix %}
<span class="field-suffix">{{ suffix }}</span>
{% endif %}
{% if description.content %}
<div{{ description.attributes.addClass('description') }}>{{ description.content }}</div>
{% endif %}
</fieldset>
libraries/it-osu-pl-drupal/01-atoms/05-form-elements/_form-elements.scss deleted 100644 → 0
+ 0
− 37
View file @ 1577fc48
//common styles for all form elements
.form-item {
color: $gray-darker;
margin-bottom: 0.5em;
@include clearfix;
}
.form-item__label {
display: block;
font-weight: 600;
// @include xs {
// display: block;
// margin-right: 2%;
// padding: 0.6em 0 0.3em 0;
// }
}
.form-item__description {
font-size: rem-calc(14);
margin-top: -0.5em;
margin-bottom: 1.5em;
}
// Styling for the required fields
[aria-required='true']:before {
content: '*';
color: $red;
padding-right: 5px;
}
// Remove margin on the second of nested form-items.
.form-item > .form-item {
margin-bottom: 0;
}
libraries/it-osu-pl-drupal/01-atoms/05-form-elements/_form-elements.twig deleted 100644 → 0
+ 0
− 88
View file @ 1577fc48
{#
/**
* @file
* Theme override for a form element.
*
* Available variables:
* - attributes: HTML attributes for the containing element.
* - errors: (optional) Any errors for this form element, may not be set.
* - prefix: (optional) The form element prefix, may not be set.
* - suffix: (optional) The form element suffix, may not be set.
* - required: The required marker, or empty if the associated form element is
* not required.
* - type: The type of the element.
* - name: The name of the element.
* - label: A rendered label element.
* - label_display: Label display setting. It can have these values:
* - before: The label is output before the element. This is the default.
* The label includes the #title and the required marker, if #required.
* - after: The label is output after the element. For example, this is used
* for radio and checkbox #type elements. If the #title is empty but the
* field is #required, the label will contain only the required marker.
* - invisible: Labels are critical for screen readers to enable them to
* properly navigate through forms but can be visually distracting. This
* property hides the label for everyone except screen readers.
* - attribute: Set the title attribute on the element to create a tooltip but
* output no label element. This is supported only for checkboxes and radios
* in \Drupal\Core\Render\Element\CompositeFormElementTrait::preRenderCompositeFormElement().
* It is used where a visual label is not needed, such as a table of
* checkboxes where the row and column provide the context. The tooltip will
* include the title and required marker.
* - description: (optional) A list of description properties containing:
* - content: A description of the form element, may not be set.
* - attributes: (optional) A list of HTML attributes to apply to the
* description content wrapper. Will only be set when description is set.
* - description_display: Description display setting. It can have these values:
* - before: The description is output before the element.
* - after: The description is output after the element. This is the default
* value.
* - invisible: The description is output after the element, hidden visually
* but available to screen readers.
* - disabled: True if the element is disabled.
* - title_display: Title display setting.
*
* @see template_preprocess_form_element()
*/
#}
{%
set classes = [
'js-form-item',
'form-item',
]
%}
{%
set description_classes = [
'form-item__description',
description_display == 'invisible' ? 'visually-hidden',
]
%}
<div{{ attributes.addClass(classes) }}>
{% if label_display in ['before', 'invisible'] %}
{{ label }}
{% endif %}
{% if prefix is not empty %}
<span class="field-prefix">{{ prefix }}</span>
{% endif %}
{% if description_display == 'before' and description.content %}
<div{{ description.attributes }}>
{{ description.content }}
</div>
{% endif %}
{{ children }}
{% if suffix is not empty %}
<span class="field-suffix">{{ suffix }}</span>
{% endif %}
{% if label_display == 'after' %}
{{ label }}
{% endif %}
{% if errors %}
<div class="form-item--error-message">
{{ errors }}
</div>
{% endif %}
{% if description_display in ['after', 'invisible'] and description.content %}
<div{{ description.attributes.addClass(description_classes) }}>
{{ description.content }}
</div>
{% endif %}
</div>
libraries/it-osu-pl-drupal/01-atoms/05-form-elements/_form-label.twig deleted 100644 → 0
+ 0
− 26
View file @ 1577fc48
{#
/**
* @file
* Theme override for a form element label.
*
* Available variables:
* - title: The label's text.
* - title_display: Elements title_display setting.
* - required: An indicator for whether the associated form element is required.
* - attributes: A list of HTML attributes for the label.
*
* @see template_preprocess_form_element_label()
*/
#}
{%
set classes = [
title_display == 'after' ? 'option',
title_display == 'invisible' ? 'visually-hidden',
required ? 'js-form-required',
required ? 'form-required',
'form-item__label',
]
%}
{% if title is not empty or required -%}
<label{{ attributes.addClass(classes) }}>{{ title }}</label>
{%- endif %}
libraries/it-osu-pl-drupal/01-atoms/05-form-elements/_multi-value.twig deleted 100644 → 0
+ 0
− 36
View file @ 1577fc48
{#
/**
* @file
* Theme override for an individual form element.
*
* Available variables for all fields:
* - multiple: Whether there are multiple instances of the field.
*
* Available variables for single cardinality fields:
* - elements: Form elements to be rendered.
*
* Available variables when there are multiple fields.
* - table: Table of field items.
* - description: The description element containing the following properties:
* - content: The description content of the form element.
* - attributes: HTML attributes to apply to the description container.
* - button: "Add another item" button.
*
* @see template_preprocess_field_multiple_value_form()
*/
#}
{% if multiple %}
<div class="js-form-item form-item">
{{ table }}
{% if description.content %}
<div{{ description.attributes.addClass('form-item__description') }} >{{ description.content }}</div>
{% endif %}
{% if button %}
{{ button }}
{% endif %}
</div>
{% else %}
{% for element in elements %}
{{ element }}
{% endfor %}
{% endif %}
libraries/it-osu-pl-drupal/01-atoms/05-form-elements/checkbox/_checkbox-item.twig deleted 100644 → 0
+ 0
− 5
View file @ 1577fc48
<li class="form-item--checkbox__item">
<label for="checkbox{{ key }}">
<input id="checkbox{{ key }}" name="checkbox" type="checkbox" checked="checked"> {{ checkbox_item }}
</label>
</li>
libraries/it-osu-pl-drupal/01-atoms/05-form-elements/checkbox/_checkbox.scss deleted 100644 → 0
+ 0
− 6
View file @ 1577fc48
.form-item--checkboxes,
.form-item--checkbox__item {
@include list-reset;
@extend .form-options-list;
}
libraries/it-osu-pl-drupal/01-atoms/05-form-elements/checkbox/checkbox.twig deleted 100644 → 0
+ 0
− 14
View file @ 1577fc48
{% if not attributes %}
<div class="form-item form-item--checkbox">
<legend>Options as Checkboxes</legend>
<ul class="form-item--checkboxes">
{% endif %}
{% for key, listItem in listItems.four %}
{% include "@atoms/05-form-elements/checkbox/_checkbox-item.twig" with {
"checkbox_item": listItem.title
} %}
{% endfor %}
{% if not attributes %}
</ul>
</div>
{% endif %}
libraries/it-osu-pl-drupal/01-atoms/05-form-elements/radio/_radio-item.twig deleted 100644 → 0
+ 0
− 5
View file @ 1577fc48
<li class="form-item--radio__item">
<label for="radio{{ key }}">
<input id="radio{{ key }}" name="radio" type="radio" class="radio" checked="checked"> {{ radio_item }}
</label>
</li>
libraries/it-osu-pl-drupal/01-atoms/05-form-elements/radio/_radio.scss deleted 100644 → 0
+ 0
− 6
View file @ 1577fc48
.form-item--radios,
.form-item--radio__item {
@include list-reset;
@extend .form-options-list;
}
libraries/it-osu-pl-drupal/01-atoms/05-form-elements/radio/radio.twig deleted 100644 → 0
+ 0
− 14
View file @ 1577fc48
{% if not attributes %}
<div class="form-item form-item--radio">
<legend>Options as Radio Buttons</legend>
<ul class="form-item--radios">
{% endif %}
{% for key, listItem in listItems.four %}
{% include "@atoms/05-form-elements/radio/_radio-item.twig" with {
"radio_item": listItem.title
} %}
{% endfor %}
{% if not attributes %}
</ul>
</div>
{% endif %}
libraries/it-osu-pl-drupal/01-atoms/05-form-elements/select/_select-item.twig deleted 100644 → 0
+ 0
− 1
View file @ 1577fc48
<option>{{ select_item.option }}</option>
libraries/it-osu-pl-drupal/01-atoms/05-form-elements/select/_select.scss deleted 100644 → 0
+ 0
− 76
View file @ 1577fc48
// CSS-only select styling (from https://github.com/filamentgroup/select-css)
.form-item__dropdown {
border: 1px solid $gray-lighter;
background-color: $white;
display: block;
position: relative;
&::after {
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 9px solid $gray;
content: ' ';
position: absolute;
top: 41%;
right: 1em;
z-index: 2;
/* These hacks make the select behind the arrow clickable in some browsers */
pointer-events: none;
display: none;
}
&:hover {
border-color: $gray-light;
&::after {
border-top: 9px solid $gray-dark;
}
}
}
.form-item__select {
border: 1px solid $gray-lightest;
font-size: rem-calc(14);
margin: 0;
outline: none;
padding: 0.63em 0.8em;
width: 100%;
:focus {
border-color: $color-link--hover;
border-radius: 0;
border-style: dotted;
border-width: 1px;
}
}
@supports (-webkit-appearance: none) or (appearance: none) or
((-moz-appearance: none) and (mask-type: alpha)) {
/* Show custom arrow */
.form-item__dropdown::after {
display: block;
}
/* Remove select styling */
.form-item__select {
padding-right: 2em; /* Match-01 */
/* inside @supports so that iOS <= 8 display the native arrow */
background: none; /* Match-04 */
/* inside @supports so that Android <= 4.3 display the native arrow */
border: 1px solid transparent; /* Match-05 */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
&:focus {
border-color: $color-link--hover;
border-radius: 0;
border-style: dotted;
border-width: 2px;
}
}
}
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