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

libraries/it-osu-pl-drupal/01-atoms/05-form-elements/select/select.twig

-{% if not attributes %}
-<div class="form-item">
-  <label for="select" class="form-item__label form-item__label--textfield">{{field_label}}</label>
-  <div class="form-item__dropdown">
-    <select class="form-item__select">
-      <optgroup label="{{dropdown_label}}">
-{% endif %}
-        {% for select_item in list_items %}
-          {% include "@atoms/05-form-elements/select/_select-item.twig" %}
-        {% endfor %}
-{% if not attributes %}
-      </optgroup>
-    </select>
-  </div>
-</div>
-{% endif %}

libraries/it-osu-pl-drupal/01-atoms/05-form-elements/textarea/_textarea.scss

-.form-item__textarea {
-  font-family: $font;
-  font-size: 0.9em;
-
-  &:focus {
-    border: 2px solid $gray;
-    outline: none;
-  }
-}

libraries/it-osu-pl-drupal/01-atoms/05-form-elements/textarea/textarea.twig

-{#
-/**
- * @file
- * Theme override for a 'textarea' #type form element.
- *
- * Available variables
- * - wrapper_attributes: A list of HTML attributes for the wrapper element.
- * - attributes: A list of HTML attributes for the textarea element.
- * - resizable: An indicator for whether the textarea is resizable.
- * - required: An indicator for whether the textarea is required.
- * - value: The textarea content.
- *
- * @see template_preprocess_textarea()
- */
-#}
-
-<div{{ wrapper_attributes }}>
-  <textarea class="form-item__textarea">{{ value }}</textarea>
-</div>

libraries/it-osu-pl-drupal/01-atoms/05-form-elements/textfield/_textfield.scss

-/* Styling for the text areas */
-
-.form-item__textfield {
-  border: 1px solid $gray-lighter;
-  padding: 0.625em 1em;
-  margin-bottom: 1em;
-  font-size: rem-calc(14);
-  line-height: 1.5;
-  width: 100%;
-
-  &:focus {
-    border: 2px solid $gray;
-    outline: none;
-  }
-
-  &.has-placeholder {
-    &:not(:placeholder-shown):invalid {
-      border: 2px solid $red;
-    }
-
-    &:not(:placeholder-shown):valid {
-      border: 2px solid $teal;
-    }
-  }
-
-  &::-webkit-input-placeholder {
-    color: $gray-light;
-  }
-
-  &:-moz-placeholder {
-    color: $gray-light;
-  }
-
-  &::-moz-placeholder {
-    color: $gray;
-  }
-
-  &:-ms-input-placeholder {
-    color: $gray;
-  }
-
-  &:-moz-ui-invalid {
-    box-shadow: none;
-  }
-}

libraries/it-osu-pl-drupal/01-atoms/05-form-elements/textfield/textfield.twig

-{#
-/**
- * @file
- * Theme override for a form element text field..
- *
- * Available variables:
- * - field_base_class - the base class name
- * - field_modifiers - array of modifiers to add to the base classname
- * - field_attributes - array of attribute,value pairs
- * - field_placeholder - placeholder text for the field
- *
- * @see template_preprocess_form_element_label()
- */
-#}
-
-{% set field_base_class = field_base_class|default('form-item__textfield') %}
-{% set classes_array = [field_base_class] %}
-
-{% if field_modifiers is defined or field_placeholder %}
-  {% for field_modifier in field_modifiers %}
-    {% set classes_array = classes_array|merge(["#{field_base_class}--#{field_modifier}"]) %}
-  {% endfor %}
-
-  {% if field_placeholder %}
-    {% set classes_array = classes_array|merge(["has-placeholder"]) %}
-  {% endif %}
-
-  {% set field_classes = classes_array|join(' ') %}
-
-{% else %}
-  {% set field_classes = field_base_class %}
-{% endif %}
-
-
-<label for="{{ field_id }}" class="form-item__label form-item__label--textfield" aria-required="{{ textfield_data.aria-required }}">{{ field_label }}</label>
-
-<input
-  class="{{ field_classes }}" id="{{ field_id }}"
-  {% for attribute,value in field_attributes %}
-    {{ attribute }}="{{ value }}"
-  {% endfor %}
-  placeholder="{{ field_placeholder }}"
->
-
-{% if field_description %}
-  <div class="form-item__description">
-    {{ field_description }}
-  </div>
-{% endif %}

libraries/it-osu-pl-drupal/01-atoms/06-images/00-responsive-image/responsive-image.twig

-{#
-/**
- * @file
- * Default theme implementation of a responsive image.
- *
- * Available variables:
- * - sources: The attributes of the <source> tags for this <picture> tag.
- * - img_element: The controlling image, with the fallback image in srcset.
- * - output_image_tag: Whether or not to output an <img> tag instead of a
- *   <picture> tag.
- *
- * @see template_preprocess()
- * @see template_preprocess_responsive_image()
- *
- * @ingroup themeable
- */
-#}
-{% set responsive_image_base_class = responsive_image_base_class|default('image') %}
-
-{% if output_image_tag %}
-  {% include "@atoms/06-images/_image.twig" with {
-    image_base_class: responsive_image_base_class,
-    image_modifiers: responsive_image_modifiers,
-    image_blockname: responsive_image_blockname,
-    img_srcset: img_srcset|default(img_element['#attributes'].srcset),
-    img_sizes: img_sizes|default(img_element['#attributes'].sizes),
-    img_src: img_src|default(img_element['#uri']),
-    img_alt: img_alt|default(img_element['#alt']),
-    img_title: img_title|default(img_element['#title']),
-  } %}
-{% else %}
-  {% include "@atoms/06-images/_picture.twig" with {
-    picture_base_class: responsive_image_base_class,
-    picture_modifiers: responsive_image_modifiers,
-    picture_blockname: responsive_image_blockname,
-    img_srcset: img_srcset|default(img_element['#attributes'].srcset),
-    img_sizes: img_sizes|default(img_element['#attributes'].sizes),
-    img_src: img_src|default(img_element['#uri']),
-    img_alt: img_alt|default(img_element['#alt']),
-    img_title: img_title|default(img_element['#title']),
-  } %}
-{% endif %}

libraries/it-osu-pl-drupal/01-atoms/06-images/_image.scss

-@mixin img {
-  display: block;
-  height: auto;
-  max-width: 100%;
-}
-
-img,
-picture {
-  @include img;
-}
-
-img {
-  border: 1px solid $gray;
-}
-
-figure {
-  margin: 0; //override normalize
-}
-
-.figure__caption {
-  font-style: italic;
-}

libraries/it-osu-pl-drupal/01-atoms/06-images/_image.twig

-{% set image_base_class = image_base_class|default('img') %}
-{% set classes_array = [img_base_class] %}
-
-{% if img_modifiers is defined %}
-  {% for img_modifier in img_modifiers %}
-    {% set classes_array = classes_array|merge(["#{img_base_class}--#{img_modifier}"]) %}
-  {% endfor %}
-  {% set img_classes = classes_array|join(' ') %}
-{% else %}
-  {% set img_classes = img_base_class %}
-{% endif %}
-
-<img
-  class="{{ img_classes }}"
-  {% if img_srcset %}
-    srcset="{{ img_srcset }}"
-  {% endif %}
-  {% if img_sizes %}
-    sizes="{{ img_sizes }}"
-  {% endif %}
-  src="{{ img_src }}"
-  {% if img_alt %}
-    alt="{{ img_alt }}"
-  {% endif %}
-  {% if img_title %}
-    title="{{ img_title }}"
-  {% endif %}
-/>

libraries/it-osu-pl-drupal/01-atoms/06-images/_picture.twig

-{% set picture_base_class = picture_base_class|default('picture') %}
-{% set classes_array = [picture_base_class] %}
-
-{% if picture_modifiers is defined %}
-  {% for picture_modifier in picture_modifiers %}
-    {% set classes_array = classes_array|merge(["#{picture_base_class}--#{picture_modifier}"]) %}
-  {% endfor %}
-  {% set picture_classes = classes_array|join(' ') %}
-{% else %}
-  {% set picture_classes = picture_base_class %}
-{% endif %}
-
-
-<picture class="{{ picture_classes }}">
-  {% if sources %}
-    {#
-    Internet Explorer 9 doesn't recognise source elements that are wrapped in
-    picture tags. See http://scottjehl.github.io/picturefill/#ie9
-    #}
-    <!--[if IE 9]><video style="display: none;"><![endif]-->
-    {% for source_attributes in sources %}
-      <source{{ source_attributes }}/>
-    {% endfor %}
-    <!--[if IE 9]></video><![endif]-->
-  {% endif %}
-  {# The controlling image, with the fallback image in srcset. #}
-  {% include "@atoms/06-images/_image.twig" with {
-    image_blockname: picture_image_blockname|default(picture_blockname),
-  } %}
-</picture>

libraries/it-osu-pl-drupal/01-atoms/07-video/_video.scss

-// Responsive Video using CSS only
-.video {
-  height: 0;
-  overflow: hidden;
-  padding-top: 35px;
-  padding-bottom: 56.25%; // 56.25% = 16x9
-  position: relative;
-
-  &--full {
-    padding-bottom: 75%; // 75% = 4x3
-  }
-
-  iframe {
-    height: 100%;
-    left: 0;
-    position: absolute;
-    top: 0;
-    width: 100%;
-  }
-}

libraries/it-osu-pl-drupal/01-atoms/07-video/video.twig

-{#
-/**
- * Available variables:
- * - video_modifiers - array of modifiers to add to the base classname
- * - video_content - the content of the video (typically an iframe)
- *   the "|raw" filter is applied so that the iframe is rendered instead
- *   of simply passing the iframe as plain text.
- *
- * Available blocks:
- * - video_content - used to replace the content of the video with something other than the typical iframe
- *   for example: to insert an html5 video component
- */
-#}
-{% set video_base_class = video_base_class|default('video') %}
-{% set classes_array = [video_base_class] %}
-
-{% if video_modifiers is defined %}
-  {% for video_modifier in video_modifiers %}
-    {% set classes_array = classes_array|merge(["#{video_base_class}--#{video_modifier}"]) %}
-  {% endfor %}
-  {% set video_classes = classes_array|join(' ') %}
-{% else %}
-  {% set video_classes = video_base_class %}
-{% endif %}
-
-<div class="{{ video_classes }}">
-  {% block video_content %}
-    {{ video_content|raw }}
-  {% endblock %}
-</div>

libraries/it-osu-pl-drupal/02-molecules/address-block/_address-block.scss

-.address-block__wordmark {
-  margin-bottom: 0.5em;
-
-  img {
-    width: 280px;
-    border: none;
-  }
-}
-.address-block__address {
-  p {
-    margin: 0;
-    font-size: 0.875rem;
-    line-height: 1.375;
-    font-weight: 300;
-  }
-
-  .site-name {
-    font-weight: 600;
-    font-size: 1rem;
-    margin-bottom: 2px;
-  }
-
-  .pipe {
-    font-size: 120%;
-    vertical-align: -2%;
-  }
-
-  span.mailto {
-    display: none;
-  }
-}

libraries/it-osu-pl-drupal/02-molecules/address-block/address-block.twig

-{#
-/**
- * @file
- * Pattern for address-block.
- *
- */
-#}
-
-<div class="address-block">
-  <div class="address-block__wordmark">
-    <a href="http://osu.edu" target="_blank"><img src="{{ base_path ~ directory }}/images/osu-logos/wordmark/osu-footer-wordmark-{{ footer_color }}.svg" alt="The Ohio State University" /></a>
-  </div>
-  <address class="address-block__address">
-    <p class="site-name">{{ site_name_prefix }} {{ site_name }}</p>
-
-    <p class="address-line">
-      {% if address_1|length and address_2|length %}
-        {{ address_1 }}<span class="pipe"> | </span>{{ address_2 }}
-      {% else %}
-        {{ address_1 }}{{ address_2 }}
-      {% endif %}
-
-      {% if city|length and state|length %}
-        <span class="pipe"> | </span>{{ city }}, {{ state }} {{ zip }}
-      {% elseif  city|length or state|length or zip|length %}
-        <span class="pipe"> | </span>{{ city }} {{ state }} {{ zip }}
-      {% endif %}
-    </p>
-
-    {% if phone|length or fax|length or tty|length %}
-      <p class="phone-line">
-        {% if phone|length %}
-          Phone: <a href="tel:{{ phone }}">{{ phone }}</a>
-          {% if fax|length or tty|length %}
-            <span class="pipe"> | </span>
-          {% endif %}
-        {% endif %}{# end phone length #}
-        {% if fax|length %}
-          Fax: {{ fax }}
-          {% if tty|length %}
-            <span class="pipe"> | </span>
-          {% endif %}
-        {% endif %} {# end fax length #}
-        {% if tty|length %}
-          Text Telephone for the Deaf: <a href="tel:+1{{ tty }}" data-rel="external">{{ tty }}</a>
-        {% endif %} {# end tty length #}
-      </p>
-    {% endif %} {# end all three #}
-
-    {% if contact_email|length %}
-      <p>Email: <a href="mailto:{{ contact_email }}">{{ contact_email }}</a></p>
-    {% endif %}
-
-  </address>
-</div>

libraries/it-osu-pl-drupal/02-molecules/callout/_callout.scss

-@mixin callout($color: $gray-light) {
-  border: 1px solid $color;
-  margin: 2em 0.625em;
-  display: flex;
-  align-items: stretch;
-
-  .callout__icon {
-    float: left;
-    background: $color;
-    color: white;
-    text-align: center;
-    display: flex;
-    align-items: center;
-  }
-
-  .svg-inline--fa {
-    font-size: 1.5em;
-    margin: 0 0.5em;
-
-    &.fa-exclamation {
-      font-size: 1.625em;
-      margin: 0 0.6875em;
-    }
-  }
-
-  .callout__body {
-    margin: 1em 1.25em 1em 1.5em;
-    line-height: 1.4;
-  }
-}
-
-.callout {
-  @include callout();
-}
-
-.callout--caution {
-  @include callout($orange);
-}
-
-.callout--ux-tip {
-  @include callout($violet);
-}
-
-.callout {
-  p:last-child {
-    margin-bottom: 0;
-  }
-}

libraries/it-osu-pl-drupal/02-molecules/callout/callout.twig

-<div class="callout callout--{{ callout_type }}">
-  <div class="callout__icon">
-    <i class="fas {{ callout_icon }}"></i>
-  </div>
-  <div class="callout__body">
-    {{ content }}
-  </div>
-</div>

libraries/it-osu-pl-drupal/02-molecules/card/_card.scss

-/* Card styling */
-
-.card {
-  display: inline-block;
-  margin-bottom: $grid-margin-after;
-  overflow: hidden;
-  background-color: $white;
-  box-shadow: $drop-shadow;
-  width: 100%;
-}
-
-.card__inner {
-  padding: $padding-y $padding-x $padding-y-bottom;
-}
-
-.card__image {
-  border: none;
-  height: 200px;
-  width: 100%;
-  margin-left: auto;
-  margin-right: auto;
-  object-fit: cover;
-}
-
-.card__title {
-  @include heading(26);
-  margin-bottom: $header-margin-after-less;
-}
-
-.card__content {
-  font-weight: 400;
-}
-
-.card button {
-  margin-top: $space-y-half;
-}
-
-// Card sizes.
-// Adjust a bit based on breakpoints.
-@include breakpoint(medium) {
-  .card--small {
-    max-width: 320px;
-  }
-
-  .card--medium {
-    max-width: 440px;
-  }
-}
-@include breakpoint(large) {
-  .card--large {
-    max-width: 640px;
-  }
-}

libraries/it-osu-pl-drupal/02-molecules/card/card.twig

-{#
-/**
- *
- * Pattern for the card molecule
- *
- * Available variables:
- * - card_modifiers: array of modifiers to add to the base classname
- * - card_size: card size, either small, medium or large
- * - card_extra_classes: string of extra classes to add to main div
- * - card_image: url for the card's header image
- * - card_title: text string for the card's title
- * - card_text: text string for the card's content
- * - card_button_content: text string for the button label
- * - card_button_modifiers: modifiers for the button class, defaults to "alt"
- *
- */
-#}
-
-{% set card_base_class = card_base_class|default('card') %}
-{% set classes_array = [card_base_class] %}
-
-{% if (card_modifiers is defined) or (card_size is defined)  %}
-  {% if card_modifiers is defined %}
-    {% for card_modifier in card_modifiers %}
-      {% set classes_array = classes_array|merge(["#{card_base_class}--#{card_modifier}"]) %}
-    {% endfor %}
-  {% endif %}
-  {% set card_classes = classes_array|join(' ') %}
-  {% if card_size is defined %}
-    {% set classes_array = classes_array|merge(["#{card_base_class}--#{card_size}"]) %}
-  {% endif %}
-  {% set card_classes = classes_array|join(' ') %}
-{% else %}
-  {% set card_classes = card_base_class %}
-{% endif %}
-
-<div class="{{ card_classes }} {{ card_extra_classes }}">
-  <img class="card__image" alt="Card Image" src="{{ card_image }}"/>
-  <div class="{{card_base_class}}__inner">
-    <h2 class="card__title">{{ card_title }}</h2>
-    <p class="card__content">{{ card_text }}</p>
-
-    {# Card button #}
-    {%
-      include "@atoms/02-buttons/01-button.twig" with {
-        "button_content": card_button_content,
-        "button_url": card_button_url,
-        "button_modifiers": card_button_modifiers|default(['alt']),
-      } %}
-  </div>
-</div>

libraries/it-osu-pl-drupal/02-molecules/details/_details.scss

-// Details-item.
-details,
-.details-item {
-  margin-bottom: 3px;
-  border: 1px solid $gray-lightest;
-
-  summary {
-    background: $gray-lightest;
-    padding: 0.675em 1em;
-    font-size: rem-calc(18);
-    font-weight: 600;
-
-    &:hover,
-    &[aria-expanded='true'] {
-      background: darken($gray-lightest, 5%);
-    }
-
-    &:focus {
-      outline: 1px dotted $teal;
-    }
-  }
-
-  .details__inner {
-    padding: 1em;
-  }
-}
-
-// Plus variation.
-.details-item--plus {
-  summary {
-    // Hide arrows.
-    list-style: none;
-    list-style-image: none;
-    &::-webkit-details-marker {
-      display: none;
-    }
-
-    .summary__inner {
-      display: flex;
-      align-items: center;
-      position: relative;
-    }
-
-    // Plus/Minus.
-    .summary__controls {
-      position: absolute;
-      right: 18px;
-
-      .pm-control {
-        position: relative;
-        height: 24px;
-        width: 2px;
-
-        &.plus {
-          background: $gray-darkest;
-          -webkit-transition: all 0.8s ease;
-          -moz-transition: all 0.8s ease;
-          -o-transition: all 0.8s ease;
-          transition: all 0.8s ease;
-        }
-
-        &.minus {
-          background: $clear;
-          -webkit-transition: all 0.4s ease;
-          -moz-transition: all 0.4s ease;
-          -o-transition: all 0.4s ease;
-          transition: all 0.4s ease;
-        }
-
-        &:after {
-          background: $gray-darkest;
-          content: '';
-          position: absolute;
-          height: 2px;
-          width: 24px;
-          left: -11px;
-          top: 11px;
-        }
-      }
-    }
-  }
-}
-
-// If icon.
-.summary__icon {
-  display: inline-block;
-  width: 36px;
-  line-height: 1;
-  margin-right: 16px;
-  text-align: center;
-
-  .svg-inline--fa {
-    font-size: 26px;
-    color: $red;
-  }
-}

libraries/it-osu-pl-drupal/02-molecules/details/details-item.twig

-{% if variant %}
-  <details{{ attributes }} class="details-item details-item--{{ variant }}">
-{% else %}
-  <details{{ attributes }} class="details-item">
-{% endif %}
-
-  {%
-    set summary_classes = [
-      required ? 'js-form-required',
-      required ? 'form-required',
-    ]
-  %}
-  {%- if title -%}
-    {% if variant == 'plus' %}
-      <summary{{ summary_attributes.addClass(summary_classes) }} class="summary--plus">
-        <div class="summary__inner">
-          {% if details_icon %}
-            <span class="summary__icon"><i class="{{ details_icon }}"></i></span>
-          {% endif %}
-          <span class="summary__text">{{ details_summary }}</span>
-          <div class="summary__controls">
-            <div class="pm-control plus"></div>
-          </div>
-        </div>
-      </summary>
-    {% else %}
-      <summary{{ summary_attributes.addClass(summary_classes) }}>{{ details_summary }}</summary>
-    {% endif %}
-  {%- endif -%}
-
-  {% if errors %}
-    <div>
-      {{ errors }}
-    </div>
-  {% endif %}
-  <div class="details__inner">
-    {{ details_content }}
-  </div>
-</details>
\ No newline at end of file

libraries/it-osu-pl-drupal/02-molecules/forms/_forms.scss

-input {
-  margin-bottom: 5px !important;
-}
-
-legend {
-  font-weight: 600;
-}
-
-.label {
-  background: none;
-  color: inherit;
-  padding: 0;
-  font-size: inherit;
-}
-
-.form-item label {
-  @extend .form-item__label;
-}
-
-.form-item {
-  max-width: none;
-}
-
-.form-fieldset {
-  border: 0;
-  margin: 2em 0 1em;
-  padding: 1em 1.5em;
-  background-color: $gray-lightest;
-
-  legend {
-    text-transform: uppercase;
-  }
-
-  .button {
-    margin-top: 0.5em;
-    margin-bottom: 0.5em;
-  }
-}
-
-//reusable classes
-.form-options-list {
-  line-height: 160%;
-
-  input {
-    margin: 0 4px 0 1px;
-  }
-}
-
-// If in PL
-.sg-main {
-  .form-fieldset {
-    max-width: 600px;
-  }
-}