15 changed files with 409 additions and 71 deletions
@ -1,19 +1,92 @@
|
||||
@layer components { |
||||
|
||||
/** |
||||
* @file |
||||
* 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, |
||||
.image-button { |
||||
margin-right: 1em; |
||||
margin-left: 1em; |
||||
display: inline-block; |
||||
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, |
||||
.image-button:first-child { |
||||
margin-right: 0; |
||||
margin-left: 0; |
||||
.button[disabled]:hover, |
||||
.button.is-disabled:hover, |
||||
.image-button[disabled]:hover { |
||||
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 |
||||
* 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 { |
||||
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-decoration: none; |
||||
} |
||||
.pager__item { |
||||
display: inline; |
||||
padding: 0.5em; |
||||
.pager__item a:hover, |
||||
.pager__item a:focus { |
||||
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; |
||||
} |
||||
.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