#
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',
}
}
}