purgetss/docs/whats-new/v3.2.0.md

A package that simplifies mobile app creation for Titanium developers.

# What's new in v3.2.0

- [What's new in v3.2.0](#whats-new-in-v320)
  - [Android](#android)
    - [elevation-{spacing}](#elevation-spacing)
    - [max-elevation-{spacing}](#max-elevation-spacing)
    - [use-compat-padding and dont-use-compat-padding](#use-compat-padding-and-dont-use-compat-padding)
    - [prevent-corner-overlap and dont-prevent-corner-overlap](#prevent-corner-overlap-and-dont-prevent-corner-overlap)
    - [shadow-{size} for Android are set with `elevation` property](#shadow-size-for-android-are-set-with-elevation-property)
  - [Refactored shadow-{size} and shadow-{color} classes are now iOS only](#refactored-shadow-size-and-shadow-color-classes-are-now-ios-only)
    - [shadow-{size} for iOS are set with `viewShadowOffset`, `viewShadowRadius`, `viewShadowColor` properties](#shadow-size-for-ios-are-set-with-viewshadowoffset-viewshadowradius-viewshadowcolor-properties)
    - [shadow-{colors} are for iOS only](#shadow-colors-are-for-ios-only)

## Android

### elevation-{spacing}
```css
// Component(s): Ti.UI.Android.CardView, Ti.UI.Animation, Ti.UI.View
// Property(ies): elevation - Android Only
'.elevation-1[platform=android]': { elevation: 2 }
'.elevation-2[platform=android]': { elevation: 4 }
'.elevation-3[platform=android]': { elevation: 6 }
'.elevation-4[platform=android]': { elevation: 8 }
'.elevation-5[platform=android]': { elevation: 10 }
'.elevation-6[platform=android]': { elevation: 12 }
'.elevation-7[platform=android]': { elevation: 14 }
'.elevation-8[platform=android]': { elevation: 16 }
'.elevation-9[platform=android]': { elevation: 18 }
'.elevation-10[platform=android]': { elevation: 20 }
'.elevation-11[platform=android]': { elevation: 22 }
'.elevation-12[platform=android]': { elevation: 24 }
'.elevation-14[platform=android]': { elevation: 28 }
'.elevation-16[platform=android]': { elevation: 32 }
'.elevation-20[platform=android]': { elevation: 40 }
'.elevation-24[platform=android]': { elevation: 48 }
'.elevation-28[platform=android]': { elevation: 56 }
'.elevation-32[platform=android]': { elevation: 64 }
'.elevation-36[platform=android]': { elevation: 72 }
'.elevation-40[platform=android]': { elevation: 80 }
'.elevation-44[platform=android]': { elevation: 88 }
'.elevation-48[platform=android]': { elevation: 96 }
'.elevation-52[platform=android]': { elevation: 104 }
'.elevation-56[platform=android]': { elevation: 112 }
'.elevation-60[platform=android]': { elevation: 120 }
'.elevation-64[platform=android]': { elevation: 128 }
'.elevation-72[platform=android]': { elevation: 144 }
'.elevation-80[platform=android]': { elevation: 160 }
'.elevation-96[platform=android]': { elevation: 192 }
'.elevation-px[platform=android]': { elevation: '1px' }
'.elevation-0.5[platform=android]': { elevation: 1 }
'.elevation-1.5[platform=android]': { elevation: 3 }
'.elevation-2.5[platform=android]': { elevation: 5 }
'.elevation-3.5[platform=android]': { elevation: 7 }
```

### max-elevation-{spacing}
```css
// Component(s): Ti.UI.Android.CardView
// Property(ies): maxElevation - Android Only
'.max-elevation-1[platform=android]': { maxElevation: 2 }
'.max-elevation-2[platform=android]': { maxElevation: 4 }
'.max-elevation-3[platform=android]': { maxElevation: 6 }
'.max-elevation-4[platform=android]': { maxElevation: 8 }
'.max-elevation-5[platform=android]': { maxElevation: 10 }
'.max-elevation-6[platform=android]': { maxElevation: 12 }
'.max-elevation-7[platform=android]': { maxElevation: 14 }
'.max-elevation-8[platform=android]': { maxElevation: 16 }
'.max-elevation-9[platform=android]': { maxElevation: 18 }
'.max-elevation-10[platform=android]': { maxElevation: 20 }
'.max-elevation-11[platform=android]': { maxElevation: 22 }
'.max-elevation-12[platform=android]': { maxElevation: 24 }
'.max-elevation-14[platform=android]': { maxElevation: 28 }
'.max-elevation-16[platform=android]': { maxElevation: 32 }
'.max-elevation-20[platform=android]': { maxElevation: 40 }
'.max-elevation-24[platform=android]': { maxElevation: 48 }
'.max-elevation-28[platform=android]': { maxElevation: 56 }
'.max-elevation-32[platform=android]': { maxElevation: 64 }
'.max-elevation-36[platform=android]': { maxElevation: 72 }
'.max-elevation-40[platform=android]': { maxElevation: 80 }
'.max-elevation-44[platform=android]': { maxElevation: 88 }
'.max-elevation-48[platform=android]': { maxElevation: 96 }
'.max-elevation-52[platform=android]': { maxElevation: 104 }
'.max-elevation-56[platform=android]': { maxElevation: 112 }
'.max-elevation-60[platform=android]': { maxElevation: 120 }
'.max-elevation-64[platform=android]': { maxElevation: 128 }
'.max-elevation-72[platform=android]': { maxElevation: 144 }
'.max-elevation-80[platform=android]': { maxElevation: 160 }
'.max-elevation-96[platform=android]': { maxElevation: 192 }
'.max-elevation-px[platform=android]': { maxElevation: '1px' }
'.max-elevation-0.5[platform=android]': { maxElevation: 1 }
'.max-elevation-1.5[platform=android]': { maxElevation: 3 }
'.max-elevation-2.5[platform=android]': { maxElevation: 5 }
'.max-elevation-3.5[platform=android]': { maxElevation: 7 }
```

### use-compat-padding and dont-use-compat-padding
```css
// Component(s): Ti.UI.Android.CardView
// Property(ies): useCompatPadding - Android Only
'.use-compat-padding[platform=android]': { useCompatPadding: true }
'.dont-use-compat-padding[platform=android]': { useCompatPadding: false }
```

### prevent-corner-overlap and dont-prevent-corner-overlap
```css
// Component(s): Ti.UI.Android.CardView
// Property(ies): preventCornerOverlap - Android Only
'.prevent-corner-overlap[platform=android]': { preventCornerOverlap: true }
'.dont-prevent-corner-overlap[platform=android]': { preventCornerOverlap: false }
```

### shadow-{size} for Android are set with `elevation` property
```css
// Component(s): Ti.UI.Android.CardView, Ti.UI.Animation, Ti.UI.View
// Property(ies): elevation - Box Shadow Effect in Tailwind - Android Only
'.shadow-xs[platform=android]': { elevation: 4 }
'.shadow-sm[platform=android]': { elevation: 8 }
'.shadow[platform=android]': { elevation: 16 }
'.shadow-md[platform=android]': { elevation: 24 }
'.shadow-lg[platform=android]': { elevation: 26 }
'.shadow-xl[platform=android]': { elevation: 34 }
'.shadow-2xl[platform=android]': { elevation: 38 }
'.shadow-inner[platform=android]': { elevation: 0 }
'.shadow-outline[platform=android]': { elevation: 16 }
'.shadow-none[platform=android]': { elevation: 0 }
```

## Refactored shadow-{size} and shadow-{color} classes are now iOS only

### shadow-{size} for iOS are set with `viewShadowOffset`, `viewShadowRadius`, `viewShadowColor` properties
```css
// Component(s): Ti.UI.View
// Property(ies): viewShadowOffset, viewShadowRadius, viewShadowColor - Box Shadow Effect in Tailwind - iOS Only
'.shadow-xs[platform=ios]': { viewShadowOffset: { x: 0, y: 0 }, viewShadowRadius: 1, viewShadowColor: '#80000000' }
'.shadow-sm[platform=ios]': { viewShadowOffset: { x: 0, y: 1 }, viewShadowRadius: 2, viewShadowColor: '#80000000' }
'.shadow[platform=ios]': { viewShadowOffset: { x: 0, y: 2 }, viewShadowRadius: 4, viewShadowColor: '#80000000' }
'.shadow-md[platform=ios]': { viewShadowOffset: { x: 0, y: 3 }, viewShadowRadius: 6, viewShadowColor: '#80000000' }
'.shadow-lg[platform=ios]': { viewShadowOffset: { x: 0, y: 4 }, viewShadowRadius: 8, viewShadowColor: '#80000000' }
'.shadow-xl[platform=ios]': { viewShadowOffset: { x: 0, y: 6 }, viewShadowRadius: 12, viewShadowColor: '#80000000' }
'.shadow-2xl[platform=ios]': { viewShadowOffset: { x: 0, y: 8 }, viewShadowRadius: 14, viewShadowColor: '#80000000' }
'.shadow-inner[platform=ios]': { viewShadowOffset: { x: 0, y: 0 }, viewShadowRadius: null, viewShadowColor: null }
'.shadow-outline[platform=ios]': { viewShadowOffset: { x: 0, y: 0 }, viewShadowRadius: 4, viewShadowColor: '#80000000' }
'.shadow-none[platform=ios]': { viewShadowOffset: { x: 0, y: 0 }, viewShadowRadius: null, viewShadowColor: null }
```


### shadow-{colors} are for iOS only
```css
// Component(s): Ti.UI.View
// Property(ies): viewShadowColor - Box Shadow Color in Tailwind - iOS Only
'.shadow-transparent[platform=ios]': { viewShadowColor: 'transparent' }
'.shadow-black[platform=ios]': { viewShadowColor: '#000000' }
'.shadow-white[platform=ios]': { viewShadowColor: '#ffffff' }
'.shadow-slate-50[platform=ios]': { viewShadowColor: '#f8fafc' }
'.shadow-slate-100[platform=ios]': { viewShadowColor: '#f1f5f9' }
'.shadow-slate-200[platform=ios]': { viewShadowColor: '#e2e8f0' }
'.shadow-slate-300[platform=ios]': { viewShadowColor: '#cbd5e1' }
'.shadow-slate-400[platform=ios]': { viewShadowColor: '#94a3b8' }
'.shadow-slate-500[platform=ios]': { viewShadowColor: '#64748b' }
// ...
```