import { StyleSheet , TextStyle , ViewStyle } from 'react-native' ; import { ResponsiveStyleSheet , ScaleByFactor } from '../../utils/responsive' ; export interface VocabularyDetailInfoStyles { container : ViewStyle ; title_container : ViewStyle ; title_text : TextStyle ; content_container : ViewStyle ; row_container : ViewStyle ; left_text : TextStyle ; right_text : TextStyle ; } export class VocabularyDetailInfoResponsiveStyles extends ResponsiveStyleSheet < VocabularyDetailInfoStyles > { public baseStyles ( scaleByFactor ) { return { container : { paddingTop : scaleByFactor ( 18 ) , } , title_container : { paddingHorizontal : scaleByFactor ( 16 ) , } , title_text : { fontSize : scaleByFactor ( 12 ) , color : '#999' , } , content_container : { marginTop : scaleByFactor ( 6 ) , backgroundColor : 'white' , borderTopColor : '#cecece' , borderTopWidth : StyleSheet . hairlineWidth , } , row_container : { paddingHorizontal : scaleByFactor ( 16 ) , paddingVertical : scaleByFactor ( 10 ) , borderBottomColor : '#cecece' , borderBottomWidth : StyleSheet . hairlineWidth , flexDirection : 'row' , justifyContent : 'space-between' , alignItems : 'center' , } , left_text : { fontSize : scaleByFactor ( 16 ) , color : '#333' , } , right_text : { fontSize : scaleByFactor ( 16 ) , color : '#888' , } , } ; } public lightStyles ( ) { return { } ; } public darkStyles ( ) { return { } ; } } export const vocabularyDetailInfoResponsiveStyles = new VocabularyDetailInfoResponsiveStyles ( ) ;