Files
mobile-darmasaba/constants/Styles.ts
amel a22719780b upd: ui group
Deskripsi:
- ui page group
- ui tab button
- ui list data group
- ui modal bottom drawer
- ui menu item row
- ui tambah data

No Issues
2025-02-27 17:37:44 +08:00

330 lines
6.4 KiB
TypeScript

import { StyleSheet } from "react-native";
const Styles = StyleSheet.create({
wrapLogin: {
flex: 1,
justifyContent: "flex-start",
alignItems: "stretch",
padding: 20,
},
textDefault: {
fontSize: 15,
lineHeight: 24,
},
textDefaultSemiBold: {
fontSize: 15,
lineHeight: 24,
fontWeight: '600',
},
textMediumNormal: {
fontSize: 13,
lineHeight: 24,
},
textMediumSemiBold: {
fontSize: 13,
lineHeight: 24,
fontWeight: '600',
},
textTitle: {
fontSize: 32,
fontWeight: 'bold',
lineHeight: 32,
},
textSubtitle: {
fontSize: 20,
fontWeight: 'bold',
},
textLink: {
lineHeight: 30,
fontSize: 16,
color: '#0a7ea4',
},
textInformation: {
fontSize: 12,
fontWeight: 'light',
marginTop: 5,
},
cError: {
color: '#DB1514'
},
cGray: {
color: 'gray'
},
cWhite: {
color: 'white'
},
cBlack: {
color: 'black'
},
cDefault: {
color: '#19345E'
},
mb05: {
marginBottom: 5
},
mb10: {
marginBottom: 10
},
mb15: {
marginBottom: 15
},
mb30: {
marginBottom: 30
},
mb100: {
marginBottom: 100
},
mv05: {
marginVertical: 5
},
mv15: {
marginVertical: 15
},
mv10: {
marginVertical: 10
},
mt05: {
marginTop: 5
},
mt10: {
marginTop: 10
},
mr05: {
marginRight: 5
},
mr10: {
marginRight: 10
},
ml05: {
marginLeft: 5
},
ml10: {
marginLeft: 10
},
ph15: {
paddingHorizontal: 15,
},
p15: {
padding: 15
},
round30: {
borderRadius: 30
},
labelStatus: {
paddingHorizontal: 15,
borderRadius: 10
},
rowSpaceBetween: {
justifyContent: 'space-between',
flexDirection: 'row'
},
rowItemsCenter: {
flexDirection: 'row',
alignItems: 'center'
},
btnIconHeader: {
backgroundColor: '#384288',
padding: 7,
borderRadius: 100,
},
btnFiturMenu: {
backgroundColor: '#FCAA4B',
padding: 10,
borderRadius: 100,
},
btnRound: {
backgroundColor: '#19345E',
borderWidth: 0,
borderColor: '#19345E',
alignItems: 'center',
borderRadius: 30,
marginTop: 15,
paddingVertical: 10
},
btnTab: {
alignItems: 'center',
paddingVertical: 10,
paddingHorizontal: 15,
borderRadius: 20,
flexDirection: 'row',
justifyContent: 'center'
},
btnMenuRow: {
width: '33%',
alignItems: 'center'
},
inputRoundForm: {
borderRadius: 10,
borderColor: 'gray',
borderWidth: 1,
paddingVertical: 10,
paddingHorizontal: 15,
},
inputRoundFormLeft: {
flexDirection: 'row',
alignItems: 'center',
paddingVertical: 0,
},
inputRoundFormRight: {
flexDirection: 'row-reverse',
alignItems: 'center',
paddingVertical: 0,
justifyContent: 'space-between'
},
verificationCell: {
width: 50,
height: 50,
lineHeight: 45,
fontSize: 24,
borderWidth: 1,
borderRadius: 15,
borderColor: 'gray',
textAlign: 'center',
},
verificationFocusCell: {
borderColor: '#19345E',
},
caraoselContent: {
flex: 1,
borderWidth: 1,
justifyContent: "center",
marginHorizontal: 15,
borderRadius: 15,
backgroundColor: '#19345E',
display: 'flex',
},
wrapGridContent: {
shadowColor: '#171717',
shadowOffset: { width: -2, height: 4 },
shadowOpacity: 0.2,
shadowRadius: 3,
elevation: 10,
borderRadius: 15,
},
wrapGridCaraousel: {
width: '80%',
height: 200,
shadowColor: '#171717',
shadowOffset: { width: -2, height: 4 },
shadowOpacity: 0.2,
shadowRadius: 3,
elevation: 10,
borderRadius: 15,
},
headerPaperGrid: {
paddingVertical: 25,
alignItems: 'center',
borderTopStartRadius: 15,
borderTopEndRadius: 15
},
contentPaperGrid: {
backgroundColor: 'white',
height: 150,
borderBottomEndRadius: 15,
borderBottomStartRadius: 15,
paddingHorizontal: 20,
justifyContent: 'space-evenly'
},
wrapBar: {
height: 20,
backgroundColor: '#ccc',
borderRadius: 10,
margin: 10,
},
contentBar: {
height: 20,
backgroundColor: 'orange',
borderRadius: 10,
},
wrapPaper: {
padding: 15,
backgroundColor: 'white',
borderRadius: 15,
},
contentItemCenter: {
justifyContent: 'center',
alignItems: 'center'
},
itemEvent: {
padding: 10,
borderRadius: 10,
flexDirection: 'row',
alignContent: 'stretch',
marginBottom: 10
},
dividerEvent: {
width: 7,
borderRadius: 5,
marginRight: 10
},
wrapItemDiscussion: {
padding: 10,
borderRadius: 10,
borderColor: '#d6d8f6',
borderWidth: 1,
marginBottom: 10
},
wrapItemBorderBottom: {
padding: 10,
borderColor: '#d6d8f6',
borderBottomWidth: 1,
},
wrapItemBorderAll: {
padding: 10,
borderColor: '#d6d8f6',
borderWidth: 1,
borderRadius: 10,
marginBottom: 10
},
userProfileSmall: {
width: 48,
height: 48,
borderRadius: 100
},
userProfileBig: {
width: 100,
height: 100,
borderRadius: 100
},
iconContent: {
padding: 10,
borderRadius: 100,
},
wrapHeadViewMember: {
backgroundColor: '#19345E',
paddingVertical: 30,
alignItems: 'center',
borderBottomLeftRadius: 25,
borderBottomRightRadius: 25
},
modalBgTransparant: {
backgroundColor: 'rgba(0, 0, 0, 0.3)',
flex: 1
},
modalContent: {
width: '100%',
paddingBottom: 20,
backgroundColor: 'white',
borderTopRightRadius: 18,
borderTopLeftRadius: 18,
position: 'absolute',
bottom: 0,
},
titleContainer: {
backgroundColor: 'white',
borderTopRightRadius: 10,
borderTopLeftRadius: 10,
paddingHorizontal: 20,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingVertical: 10
},
contentContainer: {
paddingHorizontal: 20,
height: '80%'
},
})
export default Styles;