Appearance

Utilities ​

File Information ​

  • Path: app/assets/scss/base/_utilities.scss
  • Purpose: Utility classes for common styling patterns
  • Type: Base (outputs CSS)

Overview ​

The utilities file provides a comprehensive set of utility classes for spacing, positioning, scrollbars, and other common patterns. These classes can be applied directly to HTML elements for quick styling without writing custom CSS.

SVG Styles ​

Base SVG ​

scss
svg {
  outline: none;
  outline-offset: 0px;
}

Positioning Utilities ​

.relative ​

scss
position: relative;

.absolute ​

scss
position: absolute;

Custom Scrollbar ​

.customscrollbar ​

Custom scrollbar styling with hover effect:

  • Height: 100%
  • Overflow: Hidden X, Scroll Y
  • Z-index: 2
  • Position: Relative
  • Custom webkit scrollbar styling
  • Transparent by default, visible on hover

Usage:

html
<div class="customscrollbar">
  <!-- Scrollable content -->
</div>

Placeholder Text Color ​

Sets consistent placeholder text color:

  • Color: Gray ($gray-color)
  • Opacity: 1
  • Applies to all placeholder variants (webkit, moz, ms)

Vuetify Column Override ​

.v-col ​

scss
flex-basis: auto !important;

Overrides Vuetify's default column flex-basis.

Gap Utilities ​

Row/Column Gaps ​

  • .gap-4 - 4px gap
  • .gap-8 - 8px gap
  • .gap-12 - 12px gap
  • .gap-16 - 16px gap
  • .gap-24 - 24px gap

Row Gaps ​

  • .row-gap-4 through .row-gap-24

Column Gaps ​

  • .col-gap-4 through .col-gap-24

User Avatar Styles ​

.user-avatar ​

  • Font size: 22px
  • Color: White
  • Font weight: Extrabold
  • Box shadow: White border effect

Character Background Colors ​

Avatar backgrounds based on first character:

  • .char_a through .char_z - Each letter has a unique background color

Available Colors:

  • Red (#F44336), Green (#8BC34A), Purple (#9C27B0), Orange (#DE7959), Blue (#3F51B5), Cyan (#00BCD4), and more

Icon Button Hover States ​

.h-bg-red-light ​

  • Box shadow: None
  • Hover: Red-200 background

.h-bg-purple-light ​

  • Box shadow: None
  • Hover: Lavender-200 background
  • Active (aria-expanded): Lavender-200 background

General Utility Classes ​

.icon-rotated-180 ​

scss
transform: rotate(180deg);

.flex-center ​

scss
position: relative;
display: flex;
align-items: center;
justify-content: center;

.overflow-hidden ​

scss
overflow: hidden;

Responsive Column Classes ​

.column-xl-4 and .column-xl-6 ​

Responsive column width calculations for different breakpoints:

Breakpoints:

  • 460px+: 50% width (2 columns)
  • 768px+: 33.33% width (3 columns)
  • 960px+: 33.33% width (3 columns, 24px gap)
  • 1280px+: 25% width (4 columns for xl-6)
  • 1640px+: 25% width (4 columns)
  • 1920px+: 16.66% width (6 columns for xl-6)

Large Desktop Margin Utilities (1640px+) ​

Margin Classes ​

Comprehensive margin utility system for large desktops:

All Sides:

  • .ma-xl-0 through .ma-xl-16 - Margin all sides (0px to 64px)
  • .ma-xl-auto - Margin auto

Horizontal:

  • .mx-xl-0 through .mx-xl-16 - Margin left/right
  • .mx-xl-auto - Margin left/right auto

Vertical:

  • .my-xl-0 through .my-xl-16 - Margin top/bottom
  • .my-xl-auto - Margin top/bottom auto

Individual Sides:

  • .mt-xl-0 through .mt-xl-16 - Margin top
  • .mr-xl-0 through .mr-xl-16 - Margin right
  • .mb-xl-0 through .mb-xl-16 - Margin bottom
  • .ml-xl-0 through .ml-xl-16 - Margin left

Negative Margins:

  • .ma-xl-n1 through .ma-xl-n16 - Negative margins
  • Similar variants for mx, my, mt, mr, mb, ml

Large Desktop Padding Utilities (1640px+) ​

Padding Classes ​

Comprehensive padding utility system:

All Sides:

  • .pa-xl-0 through .pa-xl-16 - Padding all sides (0px to 64px)

Horizontal:

  • .px-xl-0 through .px-xl-16 - Padding left/right

Vertical:

  • .py-xl-0 through .py-xl-16 - Padding top/bottom

Individual Sides:

  • .pt-xl-0 through .pt-xl-16 - Padding top
  • .pr-xl-0 through .pr-xl-16 - Padding right
  • .pb-xl-0 through .pb-xl-16 - Padding bottom
  • .pl-xl-0 through .pl-xl-16 - Padding left

Large Desktop Column Utilities (1640px+) ​

Vuetify Column Classes ​

  • .v-col-xl-auto through .v-col-xl-12 - Grid column widths (8.33% to 100%)

Responsive Gap Adjustments ​

Mobile (max-width: 960.98px) ​

  • .gap-24 → 16px gap
  • .row-gap-24 → 16px row gap
  • .col-gap-24 → 16px column gap

Usage Examples ​

Spacing ​

html
<div class="gap-16">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

Positioning ​

html
<div class="relative">
  <div class="absolute">Positioned content</div>
</div>

Scrollable Container ​

html
<div class="customscrollbar" style="height: 400px;">
  <!-- Long content -->
</div>

User Avatar ​

html
<div class="user-avatar char_a">A</div>

Best Practices ​

  1. Use utility classes for common patterns - Reduces custom CSS
  2. Combine utilities - Multiple utility classes can be combined
  3. Use responsive variants - Large desktop utilities only apply at 1640px+
  4. Prefer semantic classes - Use utilities for spacing/positioning, not for component styling
  • Variables - Spacing and sizing variables used
  • Mixins - Mixins that provide similar functionality