/* ==========================================================================
Outline Button family - IP-Outline-Buttons.md (2026-09-30)
==========================================================================
The ONE shared state set for every hollow (outline) control on the
public site. Shapes and sizes stay per control (in web.css /
flow-forms.css / contact-widget.css / the header partial); colors and
states live here and nowhere else. NOT loaded by the admin layout -
admin stays untouched until the owner asks (standing direction).
State Border Fill Text / icon
Default border, 1px fill (#fff) text (ink)
Hover unchanged hover (#eef3f7) unchanged
Active/selected unchanged active (#eef3f7) active-text (blue)
Pressed unchanged hover unchanged
Focus-visible unchanged unchanged 2px brand-blue outline, 2px offset
...on dark + 2px white inner ring (box-shadow) between control and outline
Disabled unchanged fill 40% opacity, no hover, not-allowed
Hard rules: the border never changes (nothing changes size between
states), hover and active share the same light blue (only the blue
text/icon marks the selected item), font weight never changes, and
hover applies on pointer devices only (@media (hover: hover)) so it
never sticks after a tap on phones.
Who uses it (add class="ip-outline" in markup):
- header nav tabs Kontakt / Zaloguj się / Moje konto / Cennik /
Dodaj wpis (.btn-default.nav-btn-light) - current page carries
aria-current="page"
- PL|EN language toggle segments (.ip-lang-toggle-seg + .ip-outline--seg,
aria-pressed) - desktop and phone copies
- Map / List / Map & List view switcher (.nav-tab, aria-pressed) on
the dark .footer-nav band (.ip-on-dark)
- listing-detail category/subcategory tags (.ulist li a)
- homepage expanded subcategory rows (.category-list li a)
- icon buttons: modal Close X (.ipflow-dialog-close), Copy
(.contact-widget-copy-btn)
- scroll-to-top (#back-to-top; .ip-outline--on-dark on the results
pages where it floats over the dark band)
Mapped here without a markup class:
- the Button component's Tertiary variant (.btn.btn-tertiary) - it IS
this family's button, so every Tertiary call site gets the states
without a second class
========================================================================== */
/* ---- 1. Base ------------------------------------------------------------ */
.ip-outline,
.btn.btn-tertiary {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--button-outline-border, #dedede);
background: var(--button-outline-fill, #ffffff);
color: var(--button-outline-text, #44555b);
cursor: pointer;
text-decoration: none;
transition: background-color .12s ease, color .12s ease;
}
/* Weight is fixed on the generic control (the language toggle's bold
active segment is what this rule retires). .btn.btn-tertiary is left
out on purpose: the Button component sets its own weight per size and
Tertiary must match Primary/Secondary beside it. */
.ip-outline {
font-weight: 400;
}
/* Segment inside a bordered track (PL|EN toggle): the track owns the
border, the segment keeps a transparent one so it stays the same size
in every state like everything else in the family. */
.ip-outline--seg {
border-color: transparent;
background: transparent;
}
/* ---- 2. Hover (pointer devices only) ------------------------------------ */
@media (hover: hover) {
.ip-outline:hover,
.btn.btn-tertiary:hover {
background: var(--button-outline-hover, #eef3f7);
color: var(--button-outline-text, #44555b);
text-decoration: none;
}
}
/* ---- 3. Pressed (mouse down) -------------------------------------------- */
.ip-outline:active,
.btn.btn-tertiary:active {
background: var(--button-outline-hover, #eef3f7);
color: var(--button-outline-text, #44555b);
text-decoration: none;
}
/* Plain (non-visible) focus, e.g. right after a click: keep the resting
look - the sitewide a:focus / a:hover link rules would otherwise leak
their link color + underline onto the -based controls. The same
sitewide rule sets `transition: all`, which would animate the focus
outline (and the white inner ring) in over 200ms on the -based
controls - restated here so only fill and text ever transition. */
.ip-outline:hover,
.ip-outline:focus,
.ip-outline:active,
.btn.btn-tertiary:hover,
.btn.btn-tertiary:focus,
.btn.btn-tertiary:active {
transition: background-color .12s ease, color .12s ease;
}
.ip-outline:focus,
.btn.btn-tertiary:focus {
color: var(--button-outline-text, #44555b);
text-decoration: none;
}
/* ---- 4. Active / selected ----------------------------------------------- */
/* After hover/pressed/focus in the cascade on purpose: a selected item
keeps its blue text while hovered or pressed. */
.ip-outline.is-active,
.ip-outline[aria-pressed="true"],
.ip-outline[aria-current="page"],
.btn.btn-tertiary.is-active,
.btn.btn-tertiary[aria-pressed="true"],
.btn.btn-tertiary[aria-current="page"] {
background: var(--button-outline-active, #eef3f7);
color: var(--button-outline-active-text, #3270a2);
}
/* ---- 5. Focus-visible --------------------------------------------------- */
.ip-outline:focus-visible,
.btn.btn-tertiary:focus-visible {
outline: 2px solid var(--focus-ring, #3270a2);
outline-offset: 2px;
}
/* On a dark band the 2px outline-offset gap is filled with a white ring
so the blue outline still reads (focus-ring alone is under 3:1 on
surface-inverse). .ip-on-dark goes on the band; .ip-outline--on-dark on
a lone control that floats over one. */
.ip-on-dark .ip-outline:focus-visible,
.ip-outline--on-dark:focus-visible {
box-shadow: 0 0 0 2px var(--focus-ring-inner, #ffffff);
}
/* ---- 6. Disabled (last: beats hover/pressed at equal specificity) ------- */
.ip-outline:disabled,
.ip-outline.is-disabled,
.ip-outline[aria-disabled="true"],
.btn.btn-tertiary:disabled,
.btn.btn-tertiary[disabled],
.btn.btn-tertiary.disabled {
opacity: .4;
cursor: not-allowed;
background: var(--button-outline-fill, #ffffff);
color: var(--button-outline-text, #44555b);
}