react-native-persian-calendar-modal/main/main.css.js

Persian Calendar Modal Component for React Native

import EStyleSheet from 'react-native-extended-stylesheet';


// export const mainCss = EStyleSheet.create({});
EStyleSheet.build({
    $themeColor: "#2874f0",


});

export const persianCalendarCss = EStyleSheet.create({
    containerType: {
        flexDirection: 'row-reverse',
        justifyContent: 'flex-start',
    },
    viewType: {
        height: 50,
        width: 160,
        flexDirection: 'row-reverse',
        backgroundColor: 'gray',
        borderTopRightRadius: 15,
        borderTopLeftRadius: 15,

    },
    typeJalali: {
        width: 80,
        backgroundColor: '#fff',
        borderTopRightRadius: 15,
        justifyContent: 'center',
        alignItems: 'center',
    },
    typeMiladi: {
        width: 80,
        backgroundColor: '#fff',
        borderTopLeftRadius: 15,
        justifyContent: 'center',
        alignItems: 'center',
    },
    containerJalali: {
        backgroundColor: 'white',
        justifyContent: 'center',
        alignItems: 'center',
        // height:400,
        padding: 10,
        // backgroundColor:'rgba(200,100,20,0.3)'
    },
    selectedDate: {
        height: 50,
        flexDirection: 'row-reverse',
        justifyContent: 'center',
        alignItems: 'center',
        width: '100%',
        // top:0
    },
    footerJalali: {
        flexDirection: 'row-reverse',
        height: 50,
        width: '100%',


        // backgroundColor:'rgba(200,123,234,0.2)'
    },
    footerRow: {
        flex: 1,
        flexDirection: 'row-reverse',
        justifyContent: 'space-between',
        alignItems:'center',
        // backgroundColor:'tomato'
    },
    itemYear: {
        height: 45,
        width: 80,
        marginBottom: 15,
        justifyContent: 'center',
        alignItems: 'center',

    },
    viewYear: {
        height: 230,
        width: 260,

        // backgroundColor:'rgba(200,128,45,0.3)',
    },
    yearsList: {
        height: '90%'
    },
    touchBackYear: {
        width: '50%',
        alignItems: 'center',
        justifyContent: 'center'
    },
    TouchCalYear: {
        width: '25%',
        alignItems: 'center',
        justifyContent: 'center',
        // backgroundColor:'rgba(134,32,267,0.3)',
    },
    iconBackYear: {
        color: 'red'
    },
    iconCheck: {
        color: '#41A317'
    },
    iconClose: {
        color: '#E42217'
    },
    textDarkBlue: {
        color: '#1a3b78'
    },
    containerTitle: {
        width: '100%',
        height: 50,

        // backgroundColor: 'rgba(123,200,200,0.2)'
    },
    containerFooter: {
        width: '100%',
        height: 50,
        // marginTop: 5,
        // backgroundColor: 'rgba(123,230,230,0.2)',

    },
    rowMonth: {
        flexDirection: 'row-reverse',
        justifyContent: 'space-between',
        //   backgroundColor:'rgba(230,134,234,0.2)',
        //  width:100
    },
    textError: {
        color: 'tomato'
    },
    viewErrorYear: {
        width: '100%', marginTop: 15
    },
    viewMainpersian: {
        // backgroundColor:'green',
        width: '100%',
        flexDirection: 'row',
        justifyContent: 'center',
    },
    containerYear:{
        alignItems: 'center',
        justifyContent: 'center',
        height: '100%'
    },
    viewYear1:{
        borderColor: 'gray',
        borderWidth: 1, width: '100%'
    },
    row:{
        flexDirection:'row-reverse'
    },
    touchMonth:{
        flexDirection:'row-reverse',
        justifyContent:'flex-start',
        width:80
    },
    viewBack:{
        flexDirection:'row-reverse',
        justifyContent:'flex-end',
        alignItems:'center',
        width:'100%',

    },
    touchBack:{
        marginLeft:10
    },
    iconBack:{
        color:'gray'
    }
});