UI Utility Mixin And Functions

A collection of utility mixins and functions for layout, spacing, controls, and state management.

Marged

Applies margin styles to non-last children unless the element has .is-marginless.

Signature:

@mixin marged($except-last: BOOLEAN = true);

Example:

.list-item {
  @include termeh.marged {
    margin-bottom: 1rem;
  }
}

Marginless

Removes bottom margin from non-last, non-marginless elements.

Signature:

@mixin marginless();

Example:

.list-item {
  @include termeh.marginless;
}

Padded

Applies padding styles unless the element has .is-paddingless.

Signature:

@mixin padded();

Example:

.card {
  @include termeh.padded {
    padding: 1rem;
  }
}

Paddingless

Removes padding from elements with .is-paddingless.

Signature:

@mixin paddingless();

Example:

.card {
  @include termeh.paddingless;
}

Shadow

Generates a standard box-shadow with transparency based on offsets and base color.

Signature:

@function shadow($x: NUMBER, $y: NUMBER, $color: COLOR): LIST;

Example:

.panel {
  box-shadow: termeh.shadow(2px, 4px, #000);
}

Soft-Shadow

Generates a softer, more diffused shadow.

Signature:

@function soft-shadow($x: NUMBER, $y: NUMBER, $color: COLOR): LIST;

Example:

.panel {
  box-shadow: termeh.soft-shadow(2px, 6px, #000);
}

Flat-Shadow

Generates a flat, even drop shadow.

Signature:

@function flat-shadow($size: NUMBER, $color: COLOR): LIST;

Example:

.box {
  box-shadow: termeh.flat-shadow(10px, rgba(0, 0, 0, 0.2));
}

Child-Radius

Computes child border-radius given parent radius and inner padding.

Signature:

@function child-radius($parent-radius: NUMBER, $padding: NUMBER): NUMBER;

Example:

.card .media {
  border-radius: termeh.child-radius(16px, 8px);
}

Clearfix

Classic clearfix using ::after.

Signature:

@mixin clearfix();

Example:

.columns {
  @include termeh.clearfix;
}

Overflow-Touch

Enables momentum scrolling on iOS.

Signature:

@mixin overflow-touch();

Example:

.scroll-area {
  @include termeh.overflow-touch;
}

Locked

Disables pointer events and text selection.

Signature:

@mixin locked();

Example:

button {
  &.is-disabled,
  &.is-loading {
    @include termeh.locked;
  }
}

Unselectable

Disables text selection across browsers.

Signature:

@mixin unselectable();

Example:

.badge {
  @include termeh.unselectable;
}

Selectable

Re-enables text selection.

Signature:

@mixin selectable();

Example:

.non-disabled {
  @include termeh.selectable;
}

Placeholder

Cross-browser placeholder styling.

Signature:

@mixin placeholder();

Example:

input[type="text"] {
  @include termeh.placeholder {
    color: rgba(0, 0, 0, 0.45);
  }
}

Reset

Resets form-control styles to a clean baseline.

Signature:

@mixin reset();

Example:

input,
select,
textarea {
  @include termeh.reset;
}

Control

Base control styling (includes reset and focus/disabled normalization).

Signature:

@mixin control();

Example:

.input,
.select,
button {
  @include termeh.control;
}

Scrollbar

Customizes scrollbar width, track, thumb, and hover thumb color (WebKit).

Signature:

@mixin scrollbar(
  $width: NUMBER,
  $track: COLOR = null,
  $thumb: COLOR = null,
  $thumb-hover: COLOR = null
);

Example:

.table-wrapper {
  @include termeh.scrollbar(8px, #f6f6f6, #bfbfbf, #8c8c8c);
}

Scroll-Color

Updates only the scrollbar thumb hover color.

Signature:

@mixin scroll-color($color: COLOR);

Example:

.table-wrapper {
  &.is-dark {
    @include termeh.scroll-color(#666);
  }
}

Spinner

Base spinner element (intended for pseudo-elements).

Signature:

@mixin spinner($size: NUMBER, $color: COLOR, $width: NUMBER);

Example:

.button {
  &.is-loading::after {
    @include termeh.spinner(1.25rem, #3498db, 2px);
  }
}

Spinner-Color

Updates the spinner’s visible stroke color.

Signature:

@mixin spinner-color($color: COLOR);

Example:

.button {
  &.is-red {
    &.is-loading::after {
      @include termeh.spinner-color(#e74c3c);
    }
  }
}

Loader

Centered loading spinner via ::after.

Signature:

@mixin loader($size: NUMBER, $color: COLOR, $width: NUMBER);

Example:

.card {
  &.is-loading {
    @include termeh.loader(2rem, #555, 3px);
  }
}

Loader-Color

Updates the loader’s spinner color.

Signature:

@mixin loader-color($color: COLOR);

Example:

.card {
  &.is-red {
    &.is-loading {
      @include termeh.loader-color(#c0392b);
    }
  }
}

Overlay

Creates a full-cover overlay via ::before, with optional backdrop-filter.

Signature:

@mixin overlay($color: COLOR, $opacity: NUMBER, $filter: CSS-FILTER);

Example:

.dialog[aria-modal="true"] {
  @include termeh.overlay(black, 0.5, blur(6px));
}

Is-Ltr

LTR-only styles. Applies styles when the global direction is left-to-right, or the element has the .is-ltr class, or matches the :dir(ltr) selector.

Signature:

@mixin is-ltr();

Example:

.container {
  @include termeh.is-ltr {
    text-align: left;
    margin-left: auto;
  }
}

Dependencies

Global direction detected from the following Termeh global var():

Component	Variable	Type	Default
base	direction	ltr | rtl	ltr

Is-Rtl

RTL-only styles. Applies styles when the global direction is right-to-left, or the element has the .is-rtl class, or matches the :dir(rtl) selector.

Signature:

@mixin is-rtl();

Example:

.container {
  @include termeh.is-rtl {
    text-align: right;
    margin-right: auto;
  }
}

Dependencies

Global direction detected from the following Termeh global var():

Component	Variable	Type	Default
base	direction	ltr | rtl	ltr

Is-Invalid

Styles for invalid state (works for elements and within .field containers).

Signature:

@mixin is-invalid();

Example:

.input {
  @include termeh.is-invalid {
    border-color: #e74c3c;
  }
}

Is-Disabled

Styles for disabled state (element itself or within disabled fieldset/field).

Signature:

@mixin is-disabled();

Example:

.button {
  @include termeh.is-disabled {
    opacity: 0.6;
  }
}

Control-Padding

Returns the standard control padding as a shorthand list.

Signature:

@function control-padding(): LIST;

Example:

.input {
  padding: termeh.control-padding();
}

Dependencies

Control padding is calculated from the following Termeh global var():

Component	Variable	Type	Default
control	v-padding	NUMBER	0
control	h-padding	NUMBER	1.2em

Inline-Padding

Returns the standard inline element padding as a shorthand list.

Signature:

@function inline-padding(): LIST;

Example:

.input {
  padding: termeh.inline-padding();
}

Dependencies

Inline padding is calculated from the following Termeh global var():

Component	Variable	Type	Default
gap	micro	NUMBER	8px

Transition

Applies a standard transition using theme duration and easing.

Signature:

@mixin transition($fields: LIST);

Example:

.button {
  @include termeh.transition(background-color, color);
}

Dependencies

UI transitions are calculated from the following Termeh global var():

Component	Variable	Type	Default
transition	ease	easing	ease
transition	duration	duration	250ms

Disabled

Applies disabled theming to form controls (colors and borders).

Signature:

@mixin disabled();

Example:

.input[disabled],
.input.is-disabled {
  @include termeh.disabled;
}

Dependencies

The disabled style is derived from the following Termeh global var():

Component	Variable	Type	Default
input	disabled	color	null
input	disabled-foreground	color	null
input	disabled-border	color	null

Selection

Styles selection color pair based on a palette name (foreground & background).

Signature:

@mixin selection($name: STRING);

Example:

p,
.prose {
  @include termeh.selection("primary");
}

Scrollable

Provides a scrollable style with a themed scrollbar, where only the hover thumb color is applied directly.

Signature:

@mixin scrollable($color: COLOR);

Example:

.sidebar {
  @include termeh.scrollable(#7f8c8d);
}

Dependencies

The scrollbar style is derived from the following Termeh global var():

Component	Variable	Type	Default
scroll	size	color	1rem
scroll	track	color	null
scroll	thumb	color	null