|
| 1 | +/* |
| 2 | +
|
| 3 | +DISCLAIMER: |
| 4 | +Do not change this file because it is core styling. |
| 5 | +Customizing core files will make updating Atlas much more difficult in the future. |
| 6 | +To customize any core styling, copy the part you want to customize to styles/native/app/ so the core styling is overwritten. |
| 7 | +
|
| 8 | +*/ |
| 9 | +// == Flex layout |
| 10 | +export const flexMain = { |
| 11 | + container: { |
| 12 | + // flex 1 will take all available space not taken by flexItems. |
| 13 | + flex: 1 |
| 14 | + } |
| 15 | +}; |
| 16 | +export const flexItem = { |
| 17 | + container: { |
| 18 | + // When flex is -1, the component is normally sized according width and height. |
| 19 | + // However, if there's not enough space, the component will shrink to its minWidth and minHeight |
| 20 | + flex: -1 |
| 21 | + } |
| 22 | +}; |
| 23 | +export const flexRow = { |
| 24 | + container: { |
| 25 | + flexDirection: "row" |
| 26 | + } |
| 27 | +}; |
| 28 | +export const flexColumn = { |
| 29 | + container: { |
| 30 | + flexDirection: "column" |
| 31 | + } |
| 32 | +}; |
| 33 | +export const flexRowReverse = { |
| 34 | + container: { |
| 35 | + flexDirection: "row-reverse" |
| 36 | + } |
| 37 | +}; |
| 38 | +export const flexColumnReverse = { |
| 39 | + container: { |
| 40 | + flexDirection: "column-reverse" |
| 41 | + } |
| 42 | +}; |
| 43 | +export const flexWrap = { |
| 44 | + container: { |
| 45 | + // flexWrap controls whether children can wrap around after they hit the end of a flex container. |
| 46 | + flexWrap: "wrap" |
| 47 | + } |
| 48 | +}; |
| 49 | +export const justifyContentStart = { |
| 50 | + container: { |
| 51 | + // justifyContent aligns children in the main direction. |
| 52 | + // For example, if children are flowing vertically, justifyContent controls how they align vertically. |
| 53 | + justifyContent: "flex-start" |
| 54 | + } |
| 55 | +}; |
| 56 | +export const justifyContentCenter = { |
| 57 | + container: { |
| 58 | + // justifyContent aligns children in the main direction. |
| 59 | + // For example, if children are flowing vertically, justifyContent controls how they align vertically. |
| 60 | + justifyContent: "center" |
| 61 | + } |
| 62 | +}; |
| 63 | +export const justifyContentEnd = { |
| 64 | + container: { |
| 65 | + // justifyContent aligns children in the main direction. |
| 66 | + // For example, if children are flowing vertically, justifyContent controls how they align vertically. |
| 67 | + justifyContent: "flex-end" |
| 68 | + } |
| 69 | +}; |
| 70 | +export const justifyContentSpaceBetween = { |
| 71 | + container: { |
| 72 | + // justifyContent aligns children in the main direction. |
| 73 | + // For example, if children are flowing vertically, justifyContent controls how they align vertically. |
| 74 | + justifyContent: "space-between" |
| 75 | + } |
| 76 | +}; |
| 77 | +export const justifyContentSpaceAround = { |
| 78 | + container: { |
| 79 | + // justifyContent aligns children in the main direction. |
| 80 | + // For example, if children are flowing vertically, justifyContent controls how they align vertically. |
| 81 | + justifyContent: "space-around" |
| 82 | + } |
| 83 | +}; |
| 84 | +export const justifyContentSpaceEvenly = { |
| 85 | + container: { |
| 86 | + // justifyContent aligns children in the main direction. |
| 87 | + // For example, if children are flowing vertically, justifyContent controls how they align vertically. |
| 88 | + justifyContent: "space-evenly" |
| 89 | + } |
| 90 | +}; |
| 91 | +export const alignChildrenStart = { |
| 92 | + container: { |
| 93 | + // alignItems aligns children in the cross direction. |
| 94 | + // For example, if children are flowing vertically, alignItems controls how they align horizontally. |
| 95 | + alignItems: "flex-start" |
| 96 | + } |
| 97 | +}; |
| 98 | +export const alignChildrenCenter = { |
| 99 | + container: { |
| 100 | + // alignItems aligns children in the cross direction. |
| 101 | + // For example, if children are flowing vertically, alignItems controls how they align horizontally. |
| 102 | + alignItems: "center" |
| 103 | + } |
| 104 | +}; |
| 105 | +export const alignChildrenEnd = { |
| 106 | + container: { |
| 107 | + // alignItems aligns children in the cross direction. |
| 108 | + // For example, if children are flowing vertically, alignItems controls how they align horizontally. |
| 109 | + alignItems: "flex-end" |
| 110 | + } |
| 111 | +}; |
| 112 | +export const alignChildrenStretch = { |
| 113 | + container: { |
| 114 | + // alignItems aligns children in the cross direction. |
| 115 | + // For example, if children are flowing vertically, alignItems controls how they align horizontally. |
| 116 | + alignItems: "stretch" |
| 117 | + } |
| 118 | +}; |
| 119 | +export const alignChildrenBaseline = { |
| 120 | + container: { |
| 121 | + // alignContent aligns children in the cross direction. |
| 122 | + // For example, if children are flowing vertically, alignContent controls how they align horizontally. |
| 123 | + alignItems: "baseline" |
| 124 | + } |
| 125 | +}; |
| 126 | +export const childrenCenter = { |
| 127 | + container: { |
| 128 | + ...justifyContentCenter.container, |
| 129 | + ...alignChildrenCenter.container |
| 130 | + } |
| 131 | +}; |
| 132 | +export const alignContentStart = { |
| 133 | + container: { |
| 134 | + // alignContent aligns rows of children in the cross direction. |
| 135 | + // For example, if children are flowing vertically, alignContent controls how they align horizontally. |
| 136 | + alignContent: "flex-start" |
| 137 | + } |
| 138 | +}; |
| 139 | +export const alignContentCenter = { |
| 140 | + container: { |
| 141 | + // alignContent aligns rows of children in the cross direction. |
| 142 | + // For example, if children are flowing vertically, alignContent controls how they align horizontally. |
| 143 | + alignContent: "center" |
| 144 | + } |
| 145 | +}; |
| 146 | +export const alignContentEnd = { |
| 147 | + container: { |
| 148 | + // alignContent aligns rows of children in the cross direction. |
| 149 | + // For example, if children are flowing vertically, alignContent controls how they align horizontally. |
| 150 | + alignContent: "flex-end" |
| 151 | + } |
| 152 | +}; |
| 153 | +export const alignContentStretch = { |
| 154 | + container: { |
| 155 | + // alignContent aligns rows of children in the cross direction. |
| 156 | + // For example, if children are flowing vertically, alignContent controls how they align horizontally. |
| 157 | + alignContent: "stretch" |
| 158 | + } |
| 159 | +}; |
| 160 | +export const alignContentSpaceAround = { |
| 161 | + container: { |
| 162 | + // alignContent aligns rows of children in the cross direction. |
| 163 | + // For example, if children are flowing vertically, alignContent controls how they align horizontally. |
| 164 | + alignContent: "space-around" |
| 165 | + } |
| 166 | +}; |
| 167 | +export const alignContentSpaceBetween = { |
| 168 | + container: { |
| 169 | + // alignContent aligns rows of children in the cross direction. |
| 170 | + // For example, if children are flowing vertically, alignContent controls how they align horizontally. |
| 171 | + alignContent: "space-between" |
| 172 | + } |
| 173 | +}; |
| 174 | +export const alignSelfStart = { |
| 175 | + container: { |
| 176 | + // controls how a child aligns in the cross direction, overriding the alignItems of the parent. |
| 177 | + alignSelf: "flex-start" |
| 178 | + } |
| 179 | +}; |
| 180 | +export const alignSelfCenter = { |
| 181 | + container: { |
| 182 | + // controls how a child aligns in the cross direction, overriding the alignItems of the parent. |
| 183 | + alignSelf: "center" |
| 184 | + } |
| 185 | +}; |
| 186 | +export const alignSelfEnd = { |
| 187 | + container: { |
| 188 | + // controls how a child aligns in the cross direction, overriding the alignItems of the parent. |
| 189 | + alignSelf: "flex-end" |
| 190 | + } |
| 191 | +}; |
| 192 | +export const alignSelfStretch = { |
| 193 | + container: { |
| 194 | + // controls how a child aligns in the cross direction, overriding the alignItems of the parent. |
| 195 | + alignSelf: "stretch" |
| 196 | + } |
| 197 | +}; |
| 198 | +export const alignSelfBaseline = { |
| 199 | + container: { |
| 200 | + // controls how a child aligns in the cross direction, overriding the alignItems of the parent. |
| 201 | + alignSelf: "baseline" |
| 202 | + } |
| 203 | +}; |
0 commit comments