Skip to content
GitLab
Projects Groups Topics Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
  • Register
  • Sign in
  • D design
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributor statistics
    • Graph
    • Compare revisions
    • Locked files
  • Issues 20
    • Issues 20
    • List
    • Boards
    • Service Desk
    • Milestones
    • Iterations
    • Requirements
  • Merge requests 0
    • Merge requests 0
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Artifacts
    • Schedules
    • Test cases
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Container Registry
    • Model experiments
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • CI/CD
    • Code review
    • Insights
    • Issue
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • pubsweetpubsweet
  • design
  • Issues
  • #3

Form variables

The purpose of this issue is to come up with a common list of variables for theming form inputs in pubsweet applications.

Elife component name Image of Elife component Collabra component name Image of Collabra component Elife suggested variable Coko suggested variable Vanilla variable Notes
Button primary Button primary button Button $border-radius, $color-primary, $primary-text-color $button-background ,$button-borders, $button-border-radius, $button-border-color
Button primary small Button primary small na na $border-radius, $color-primary, $primary-text-color $button-background ,$button-borders, $button-border-radius, $button-border-color the only change in the css would be the font-size (as every size should be in em for the atoms, so their size will be set by their parent)
Button secondary Button secondary Button secondary button $border-radius, $border-width, $secondary-border-color $button-background ,$button-borders, $button-border-radius, $button-border-color
Text input Text input Text field text-field $border-radius, $border-width, $color-text-dividers $border-color, $border-width, $background
Text area Text area Text area Not in the style guide yet $border-radius, $border-width, $color-text-dividers
Select menu Select menu Menu Menu $border-radius, $border-width, $color-text-dividers
Check box Check box checkbox checkbox $border-radius, $border-width $color-primary, $color-text, checkboxes and radio buttons are a little tricky as it's using some specific css for collabra, and i think that elife ones relies on SVG. SVG could be a simple way to change element in the vanilla theme though.
Radio button Radio button radio radio $border-radius, $border-width $color-primary, $color-text
Edited Jan 15, 2018 by julientaq
Assignee
Assign to
Time tracking