Bulma Overrides¶

MetrePay's catalog and payment forms are built with Bulma CSS. Use these variable overrides to align Bulma's default styles with the MetrePay design system.

Bulma SCSS Variable Overrides¶

Place these overrides before importing Bulma:

// =============================================
// MetrePay Bulma Variable Overrides
// =============================================

// --- Colors ---
$primary:        #6E96FF;   // --mp-color-blue
$link:           #6E96FF;
$info:           #6E96FF;
$success:        #1a7f4b;
$warning:        #92400e;
$danger:         #c80000;

// --- Typography ---
$family-sans-serif: 'Cabin', sans-serif;
$family-primary:    'Cabin', sans-serif;
$body-size:         14px;
$body-color:        #666666;
$text:              #666666;
$text-strong:       #333333;

// --- Inputs ---
$input-border-color:        #92A3C8;
$input-focus-border-color:  #6E96FF;
$input-color:               #555555;
$input-placeholder-color:   #999999;
$input-radius:              8px;
$input-height:              42px;
$input-shadow:              none;

// --- Buttons ---
$button-border-width:  0;
$button-padding-horizontal: 20px;

// --- Cards ---
$card-radius:       10px;
$card-shadow:       0px 0px 6px 3px rgba(127, 146, 189, 0.1);
$card-background-color: #FAFAFA;
$card-content-padding: 24px;

// --- Radius ---
$radius-small:  4px;
$radius:        8px;
$radius-medium: 10px;
$radius-large:  16px;

// --- Spacing ---
$gap: 32px;

// --- Navbar ---
$navbar-background-color: #FFFFFF;
$navbar-item-color:        #666666;
$navbar-item-hover-color:  #6E96FF;

// --- Now import Bulma ---
@import "bulma/bulma";

CSS-only Override (No SCSS)¶

If you're using the pre-compiled Bulma CSS, override with CSS custom properties after the Bulma import:

/* Import Bulma first */
@import url('https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css');

/* Then override */
:root {
  --bulma-primary: #6E96FF;
  --bulma-link:    #6E96FF;
}

/* Font override */
body, .title, .subtitle, .label, .button, .input, .select select, .textarea {
  font-family: 'Cabin', sans-serif !important;
}

/* Input override */
.input, .textarea, .select select {
  border-color: #92A3C8;
  border-radius: 8px;
  color: #555555;
  height: 42px;
}

.input:focus, .textarea:focus, .select select:focus {
  border-color: #6E96FF;
  box-shadow: 0 0 0 3px rgba(110, 150, 255, 0.15);
}

/* Button override */
.button.is-primary {
  background-color: #6E96FF;
  border-color: transparent;
  border-radius: 8px;
  font-weight: 600;
}

.button.is-primary:hover {
  background-color: #6687DC;
}

/* Card override */
.card {
  border-radius: 10px;
  box-shadow: 0px 0px 6px 3px rgba(127, 146, 189, 0.1);
  background: #FAFAFA;
}

Bulma Component Mapping¶

Bulma Class	MetrePay Override	Notes
`.button.is-primary`	Blue `#6E96FF`	Single payment CTA
`.button.is-link`	Blue `#6E96FF`	Same as primary
`.button.is-info`	Blue `#6E96FF`	Informational actions
`.button.is-success`	`#1a7f4b`	Confirmation actions
`.button.is-danger`	`#c80000`	Destructive actions
`.input`	Border `#92A3C8`, radius `8px`	All text inputs
`.card`	Radius `10px`, shadow `--mp-shadow-card`	Product cards
`.tag`	Radius `9999px`	Status tags
`.notification.is-danger`	Error background	Form validation
`.notification.is-success`	Success background	Payment confirmation

Bulma Form Pattern (MetrePay Style)¶

<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/css2?family=Cabin:wght@400;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
  <style>
    body { font-family: 'Cabin', sans-serif; background: #F1F1F1; }
    .input, .button { font-family: 'Cabin', sans-serif; }
    .input { border-color: #92A3C8; border-radius: 8px; height: 42px; }
    .input:focus { border-color: #6E96FF; box-shadow: 0 0 0 3px rgba(110,150,255,0.15); }
    .button.is-primary { background: #6E96FF; border-radius: 8px; font-weight: 600; }
    .button.is-primary:hover { background: #6687DC; }
    .checkout-card { max-width: 720px; margin: 40px auto; background: white; border-radius: 10px; padding: 32px; box-shadow: 0px 0px 6px 3px rgba(127,146,189,0.1); }
    .label { font-weight: 600; color: #333; font-size: 14px; }
  </style>
</head>
<body>
  <div class="checkout-card">
    <h2 class="title is-4" style="color:#333;">Complete your payment</h2>

    <div class="field">
      <label class="label">Full name</label>
      <div class="control">
        <input class="input" type="text" placeholder="John Smith">
      </div>
    </div>

    <div class="field">
      <label class="label">Email</label>
      <div class="control">
        <input class="input" type="email" placeholder="john@example.com">
      </div>
    </div>

    <div class="field mt-5">
      <div class="control">
        <button class="button is-primary is-fullwidth">
          Pay Now
        </button>
      </div>
    </div>
  </div>
</body>
</html>

Notes¶

Bulma version

These overrides are tested with Bulma 0.9.x. Bulma 1.x uses a different CSS variable system — check the Bulma 1.x migration guide if upgrading.

SCSS is preferred

When possible, use the SCSS variable overrides rather than CSS overrides. SCSS overrides are cleaner and produce smaller output.