sebnitu / vrembem

A CSS component library based on the BEM methodology.

Home Page:https://vrembem.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Standardize sizing and size modifier values for form controls

sebnitu opened this issue · comments

Problem

Vrembem has a number of form controls setup as their own components. For composability, they share similar styling patterns, one of which is their sizing. To help maintain these styles more consistently, we should look into creating core variables for handling form-control styles which would be inherited by the following components:

  • button
  • input
  • checkbox
  • radio
  • switch

A size variable example would be:

$form-control-size: 2.5rem !default; // 40px
$form-control-size-sm: 1.875rem !default; // 30px
$form-control-size-lg: 3.125rem !default; // 50px

It would also be nice to include size modifiers for checkbox, radio and switch components. Lastly, there should be a way to incorporate text as a form control (such as labels) that would inherit similar sizing patterns.

This feature was added in #599