15 changed files with 409 additions and 71 deletions
@ -1,19 +1,92 @@ |
|||||||
@layer components { |
|
||||||
|
|
||||||
/** |
/** |
||||||
* @file |
* @file |
||||||
* Visual styles for buttons. |
* Visual styles for buttons. |
||||||
|
* |
||||||
|
* Drupal applies .button — and typically .button--primary for the main |
||||||
|
* action — automatically to <input type="submit">, <button>, and |
||||||
|
* <a class="button"> via core RenderElement processing. |
||||||
|
* |
||||||
|
* Variants commonly emitted by core/contrib: |
||||||
|
* .button — base, neutral |
||||||
|
* .button--primary — primary action (form submit defaults to this) |
||||||
|
* .button--danger — destructive action |
||||||
|
* .button--small — compact size |
||||||
|
* .button[disabled] — disabled state (.is-disabled in some contexts) |
||||||
*/ |
*/ |
||||||
|
@layer components { |
||||||
|
|
||||||
.button, |
.button, |
||||||
.image-button { |
.image-button { |
||||||
margin-right: 1em; |
display: inline-block; |
||||||
margin-left: 1em; |
padding: var(--size-2) var(--size-3); |
||||||
|
border: 1px solid var(--text-2); |
||||||
|
border-radius: var(--radius-2); |
||||||
|
background-color: var(--surface-1); |
||||||
|
color: var(--text-1); |
||||||
|
font: inherit; |
||||||
|
line-height: 1.2; |
||||||
|
text-decoration: none; |
||||||
|
cursor: pointer; |
||||||
|
transition: |
||||||
|
background-color 0.15s var(--ease-out-2), |
||||||
|
border-color 0.15s var(--ease-out-2), |
||||||
|
color 0.15s var(--ease-out-2); |
||||||
|
} |
||||||
|
.button:not(:first-child), |
||||||
|
.image-button:not(:first-child) { |
||||||
|
margin-inline-start: var(--size-3); |
||||||
|
} |
||||||
|
.button:hover, |
||||||
|
.image-button:hover { |
||||||
|
background-color: var(--surface-2); |
||||||
|
border-color: var(--text-1); |
||||||
|
} |
||||||
|
.button:focus, |
||||||
|
.image-button:focus { |
||||||
|
outline: 2px solid var(--upei-red); |
||||||
|
outline-offset: 2px; |
||||||
|
} |
||||||
|
|
||||||
|
/* Primary — brand-colored. Form submits typically get this class. */ |
||||||
|
.button--primary { |
||||||
|
background-color: var(--upei-red); |
||||||
|
border-color: var(--upei-red); |
||||||
|
color: white; |
||||||
|
} |
||||||
|
.button--primary:hover { |
||||||
|
background-color: var(--upei-dark-red); |
||||||
|
border-color: var(--upei-dark-red); |
||||||
|
} |
||||||
|
|
||||||
|
/* Danger — destructive action. Outlined by default, fills on hover. */ |
||||||
|
.button--danger { |
||||||
|
background-color: var(--surface-1); |
||||||
|
border-color: var(--upei-red); |
||||||
|
color: var(--upei-red); |
||||||
|
} |
||||||
|
.button--danger:hover { |
||||||
|
background-color: var(--upei-red); |
||||||
|
color: white; |
||||||
|
} |
||||||
|
|
||||||
|
/* Small variant. */ |
||||||
|
.button--small { |
||||||
|
padding: var(--size-1) var(--size-2); |
||||||
|
font-size: 0.875em; |
||||||
|
} |
||||||
|
|
||||||
|
/* Disabled. */ |
||||||
|
.button[disabled], |
||||||
|
.button.is-disabled, |
||||||
|
.image-button[disabled] { |
||||||
|
opacity: 0.5; |
||||||
|
cursor: not-allowed; |
||||||
} |
} |
||||||
.button:first-child, |
.button[disabled]:hover, |
||||||
.image-button:first-child { |
.button.is-disabled:hover, |
||||||
margin-right: 0; |
.image-button[disabled]:hover { |
||||||
margin-left: 0; |
background-color: var(--surface-1); |
||||||
|
border-color: var(--text-2); |
||||||
} |
} |
||||||
|
|
||||||
} |
} |
||||||
|
|||||||
@ -0,0 +1,25 @@ |
|||||||
|
/** |
||||||
|
* @file |
||||||
|
* Site footer — visual styling. |
||||||
|
* |
||||||
|
* Padding lives in css/layout.css alongside <main>'s page padding |
||||||
|
* (footer is a structural region, treated symmetrically with main). |
||||||
|
* This file handles the skin: dark surface, light text and links. |
||||||
|
*/ |
||||||
|
@layer components { |
||||||
|
|
||||||
|
.footer { |
||||||
|
background-color: var(--surface-dark); |
||||||
|
color: var(--text-on-dark); |
||||||
|
|
||||||
|
a { |
||||||
|
color: var(--text-on-dark); |
||||||
|
} |
||||||
|
a:hover, |
||||||
|
a.is-active { |
||||||
|
color: var(--upei-yellow); |
||||||
|
text-decoration: underline; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
@ -1,20 +1,58 @@ |
|||||||
@layer components { |
|
||||||
|
|
||||||
/** |
/** |
||||||
* @file |
* @file |
||||||
* Visual styles for pager. |
* Visual styles for the pager. |
||||||
|
* |
||||||
|
* Markup hooks from templates/navigation/pager.html.twig: |
||||||
|
* .pager — outer <nav> |
||||||
|
* .pager__items — <ul> |
||||||
|
* .pager__item — each <li> |
||||||
|
* .pager__item--first — "First" link |
||||||
|
* .pager__item--previous — "Previous" link |
||||||
|
* .pager__item--next — "Next" link |
||||||
|
* .pager__item--last — "Last" link |
||||||
|
* .pager__item--ellipsis — gap between non-adjacent page ranges |
||||||
|
* .is-active — added to the current page <li> |
||||||
*/ |
*/ |
||||||
|
@layer components { |
||||||
|
|
||||||
|
.pager { |
||||||
|
margin-block: var(--size-4); |
||||||
|
} |
||||||
.pager__items { |
.pager__items { |
||||||
clear: both; |
margin: 0; |
||||||
|
padding: 0; |
||||||
|
list-style: none; |
||||||
|
display: flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
justify-content: center; |
||||||
|
gap: var(--size-1); |
||||||
|
} |
||||||
|
.pager__item a { |
||||||
|
display: inline-block; |
||||||
|
min-width: 2.5em; |
||||||
|
padding: var(--size-1) var(--size-2); |
||||||
|
border: 1px solid var(--surface-2); |
||||||
|
border-radius: var(--radius-2); |
||||||
|
color: var(--text-1); |
||||||
|
line-height: 1.4; |
||||||
text-align: center; |
text-align: center; |
||||||
|
text-decoration: none; |
||||||
} |
} |
||||||
.pager__item { |
.pager__item a:hover, |
||||||
display: inline; |
.pager__item a:focus { |
||||||
padding: 0.5em; |
background-color: var(--surface-2); |
||||||
|
border-color: var(--text-2); |
||||||
} |
} |
||||||
.pager__item.is-active { |
.pager__item.is-active a { |
||||||
|
background-color: var(--upei-red); |
||||||
|
border-color: var(--upei-red); |
||||||
|
color: white; |
||||||
font-weight: bold; |
font-weight: bold; |
||||||
} |
} |
||||||
|
.pager__item--ellipsis { |
||||||
|
align-self: center; |
||||||
|
padding: var(--size-1) var(--size-2); |
||||||
|
color: var(--text-2); |
||||||
|
} |
||||||
|
|
||||||
} |
} |
||||||
|
|||||||
@ -0,0 +1,64 @@ |
|||||||
|
# druid.icons.yml — declares an icon pack for the druid theme. |
||||||
|
# |
||||||
|
# ───────────────────────────────────────────────────────────────────────── |
||||||
|
# How to add a new icon |
||||||
|
# ───────────────────────────────────────────────────────────────────────── |
||||||
|
# |
||||||
|
# 1. Drop the SVG into <theme>/icons/<name>.svg. |
||||||
|
# Tips: |
||||||
|
# - Use currentColor for stroke / fill so CSS can recolor it via |
||||||
|
# the `color` property on the parent element. |
||||||
|
# - Strip width / height from the <svg> root (keep viewBox); let |
||||||
|
# CSS size the icon. |
||||||
|
# - Source: lucide.dev is the easiest free, currentColor-ready set. |
||||||
|
# phosphoricons.com and tablericons.com also work. |
||||||
|
# |
||||||
|
# 2. Reference it in any Twig template: |
||||||
|
# |
||||||
|
# {{ icon('druid', 'name') }} |
||||||
|
# |
||||||
|
# where 'name' matches the filename (without .svg). Example: |
||||||
|
# icons/arrow-right.svg → {{ icon('druid', 'arrow-right') }}. |
||||||
|
# |
||||||
|
# 3. Clear cache: |
||||||
|
# |
||||||
|
# drush cr |
||||||
|
# |
||||||
|
# This is required after ADDING a new file (Drupal's icon discovery |
||||||
|
# caches the file list). Editing an SVG file's contents does NOT |
||||||
|
# require a cache clear during development. |
||||||
|
# |
||||||
|
# ───────────────────────────────────────────────────────────────────────── |
||||||
|
# Prerequisites |
||||||
|
# ───────────────────────────────────────────────────────────────────────── |
||||||
|
# |
||||||
|
# The Icon API ships with Drupal core. On Drupal 11.0 it lived in the |
||||||
|
# `experimental_icon` module and needed enabling. On 11.1+ it's stable |
||||||
|
# and on by default. If `{{ icon('druid', '…') }}` errors with |
||||||
|
# "Unknown function icon", enable the core Icon module at |
||||||
|
# /admin/modules. |
||||||
|
# |
||||||
|
# Schema reference: |
||||||
|
# https://www.drupal.org/docs/develop/theming-drupal/using-the-icon-api |
||||||
|
# |
||||||
|
# ───────────────────────────────────────────────────────────────────────── |
||||||
|
# The pack |
||||||
|
# ───────────────────────────────────────────────────────────────────────── |
||||||
|
# |
||||||
|
# The top-level key ("druid") is the pack id — the first argument to |
||||||
|
# every icon() call. Don't rename it without grep-replacing every usage. |
||||||
|
|
||||||
|
druid: |
||||||
|
label: 'Druid theme icons' |
||||||
|
description: 'Theme-local SVG icon set. Add new icons by dropping SVGs into the theme''s icons/ directory.' |
||||||
|
license: |
||||||
|
name: 'ISC' |
||||||
|
url: 'https://lucide.dev/license' |
||||||
|
extractor: svg |
||||||
|
# `template` is INLINE Twig source (not a file path). Wraps each icon's |
||||||
|
# parsed inner SVG content in an outer <svg> that re-applies the |
||||||
|
# original root attributes (viewBox, fill, stroke, …) via {{ attributes }}. |
||||||
|
template: '<svg{{ attributes.addClass("icon").setAttribute("aria-hidden", "true") }}>{{ content|raw }}</svg>' |
||||||
|
config: |
||||||
|
sources: |
||||||
|
- icons/{icon_id}.svg |
||||||
Loading…
Reference in new issue