Appearance

Reset Styles ​

File Information ​

  • Path: app/assets/scss/base/_reset.scss
  • Purpose: CSS reset and base element normalization
  • Type: Base (outputs CSS)

Overview ​

The reset file normalizes browser defaults and establishes base styles for HTML elements. It ensures consistent rendering across different browsers and sets up the foundation for the application's styling.

Key Features ​

Global Reset ​

Resets margins, padding, borders, and outlines for all HTML elements:

scss
html, body, div, span, /* ... all elements ... */ {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  outline: none;
  outline-offset: 0;
  letter-spacing: normal;
}

HTML & Body Styles ​

  • Sets base font weight, size, and family
  • Prevents overflow (important for full-height layouts)
  • Sets minimum height to 100svh (small viewport height)
  • Removes default margins and padding
scss
html, body {
  font-weight: $font-weight-regular;
  font-size: $font-size-14;
  position: relative;
  overflow: hidden !important;
  min-height: 100svh;
  margin: 0px;
  padding: 0px;
}

Typography Base ​

Sets consistent typography for body and application:

  • Font family: Inter (body text)
  • Line height: 1.4
  • Color: Gray

Image Styles ​

  • max-width: 100% - Prevents images from overflowing
  • max-height: 100% - Maintains aspect ratio
  • height: auto - Preserves aspect ratio
  • Default color: Blue-500
  • Hover/Focus color: Blue-700
  • Smooth transitions
  • Removes text decoration

List Styles ​

Removes default list styling:

  • list-style: none for ul, ol, li

Strong/Bold Elements ​

  • font-weight: bold !important for b and strong tags

Main Container ​

scss
.main {
  position: relative;
  height: 100svh;
}

Vuetify Component Overrides ​

Divider ​

Customizes Vuetify divider component:

  • Border color: Gray-200
  • Border width: 1px
  • Margins: 16px top and bottom
  • Full opacity

Disabled Form Elements ​

Styles for disabled form controls:

  • Reduced opacity (0.5)
  • Label opacity (0.7)

Hidden Vuetify Overlays ​

Hides default Vuetify overlays and loaders:

  • Card loaders
  • Button overlays/underlays
  • Chip overlays/underlays
  • Input field loaders/overlays/outlines/details
  • Navigation drawer scrim
  • Snackbar underlay
  • List item spacers/overlays/underlays

Usage ​

This file is automatically imported in main.scss and applies globally. No additional imports needed.

Best Practices ​

  1. Don't override reset styles - The reset is foundational; override specific elements in component files instead
  2. Use semantic HTML - The reset works best with proper HTML structure
  3. Respect the overflow hidden - The body has overflow: hidden !important for full-height layouts
  • Typography - Typography styles that build on the reset
  • Utilities - Utility classes that work with the reset
  • Variables - Variables used in reset styles