CardClassSelectors

The stylesheet classes assigned to input fields by field state

Use this object to set the appearance of Card input fields by their current focus and input validity state. Note: font size has a maximum of 16px.

Media Queries can be used with valid CardClassSelectors. Syntax support for level 3 features

Properties

cardClassSelectors.js
JS
JavaScript

const cardClassSelectors = {

   input: {

      backgroundColor: '#F7F8F9',

      color: '#373F4A',

      fontFamily: 'Helvetica Neue',

      fontSize: '16px',

      fontWeight: 'normal'

   },

   'input.is-focus': {

      backgroundColor: '#F7F8F9',

      color: '#3X3F4A',

      fontFamily: 'Helvetica Neue',

      fontSize: '16px',

      fontWeight: 'normal'

   },

   '.input-container': {

      borderColor: 'lightgrey',

      borderWidth: '1px',

   },

   '.input-container.is-focus': {

      borderColor: '#cc0023',

      borderWidth: '0 0 2px 0',

   },

   '.input-container.is-error': {

      borderColor: '#006aff',

      borderWidth: '0 0 2px 0',

   },

   '.message-icon': {

      color: 'green',

   },

   // You can use media queries with valid selectors:

   '@media screen and (max-width: 600px)': {

      input: {

        'fontSize': '12px',

     }

   }

   '@media only screen and (orientation: portrait)': {

     '.message-text': {

       'color': 'transparent',

     }

   }

}