You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@flex.apache.org by Erik de Bruin <er...@ixsoftware.nl> on 2014/10/03 11:38:49 UTC
Re: [3/3] git commit: [flex-sdk] [refs/heads/iso7skins] - Prepare dpi
specific styles for iOS7+
Ok, this is about as far as I can go without some artwork to serve as an
example. Is there a reference we’re following that I can look at?
EdB
On Fri, Oct 3, 2014 at 11:17 AM, <er...@apache.org> wrote:
> Prepare dpi specific styles for iOS7+
>
> Integrated the 'status bar' fix (FLEX-33949) into the new dpi specific
> styles copied from the Android section.
>
> Signed-off-by: Erik de Bruin <er...@ixsoftware.nl>
>
>
> Project: http://git-wip-us.apache.org/repos/asf/flex-sdk/repo
> Commit: http://git-wip-us.apache.org/repos/asf/flex-sdk/commit/cea42d7d
> Tree: http://git-wip-us.apache.org/repos/asf/flex-sdk/tree/cea42d7d
> Diff: http://git-wip-us.apache.org/repos/asf/flex-sdk/diff/cea42d7d
>
> Branch: refs/heads/iso7skins
> Commit: cea42d7da8e644fd392053e54fe14830e7249155
> Parents: b685eae
> Author: Erik de Bruin <er...@ixsoftware.nl>
> Authored: Fri Oct 3 11:14:20 2014 +0200
> Committer: Erik de Bruin <er...@ixsoftware.nl>
> Committed: Fri Oct 3 11:14:20 2014 +0200
>
> ----------------------------------------------------------------------
> frameworks/projects/mobiletheme/defaults.css | 240 ++++++++++++++++++----
> 1 file changed, 199 insertions(+), 41 deletions(-)
> ----------------------------------------------------------------------
>
>
>
> http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/cea42d7d/frameworks/projects/mobiletheme/defaults.css
> ----------------------------------------------------------------------
> diff --git a/frameworks/projects/mobiletheme/defaults.css
> b/frameworks/projects/mobiletheme/defaults.css
> index 0b78b0c..8e93db5 100644
> --- a/frameworks/projects/mobiletheme/defaults.css
> +++ b/frameworks/projects/mobiletheme/defaults.css
> @@ -931,48 +931,7 @@ global
> }
> }
>
> -/* ios 7 status bar
> -requires new os-version selector (cf FLEX-FLEX-33949)
> -*/
>
> -@media (application-dpi: 120) AND (os-platform:"IOS") AND
> (min-os-version: 7)
> -{
> - Application
> - {
> - osStatusBarHeight: 15;
> - }
> -}
> -
> -@media (application-dpi: 160) AND (os-platform:"IOS") AND
> (min-os-version: 7)
> -{
> - Application {
> - osStatusBarHeight: 20;
> - }
> -}
> -
> -@media (application-dpi: 240) AND (os-platform:"IOS") AND
> (min-os-version: 7)
> -{
> - Application
> - {
> - osStatusBarHeight: 30;
> - }
> -}
> -
> -@media (application-dpi: 320) AND (os-platform:"IOS") AND
> (min-os-version: 7)
> -{
> - Application
> - {
> - osStatusBarHeight: 40;
> - }
> -}
> -
> -@media (application-dpi: 480) AND (os-platform:"IOS") AND
> (min-os-version: 7)
> -{
> - Application
> - {
> - osStatusBarHeight: 60;
> - }
> -}
>
> /* ios 7+ new theme */
>
> @@ -1205,6 +1164,205 @@ requires new os-version selector (cf
> FLEX-FLEX-33949)
>
> }
>
> +@media (os-platform:"IOS") AND (min-os-version: 7) AND (application-dpi:
> 120)
> +{
> + global
> + {
> + fontSize: 12;
> + focusThickness: 2;
> + }
> +
> + ActionBar.beveled
> + {
> + paddingLeft: 4;
> + paddingRight: 4;
> + }
> +
> + ActionBar #titleDisplay
> + {
> + fontSize: 14;
> + }
> +
> + Application
> + {
> + osStatusBarHeight: 15;
> + }
> +
> + SpinnerListItemRenderer
> + {
> + paddingTop : 9;
> + paddingBottom : 9;
> + paddingLeft : 3;
> + paddingRight : 3;
> + }
> +
> + TabbedViewNavigator #tabBar
> + {
> + fontSize: 11;
> + }
> +}
> +
> +@media (os-platform:"IOS") AND (min-os-version: 7) AND (application-dpi:
> 160)
> +{
> + global
> + {
> + fontSize: 16;
> + focusThickness: 2;
> + }
> +
> + ActionBar
> + {
> + paddingBottom: 1;
> + paddingLeft: 0;
> + paddingRight: 0;
> + paddingTop: 1;
> + }
> +
> + ActionBar #titleDisplay
> + {
> + fontSize: 18;
> + }
> +
> + Application {
> + osStatusBarHeight: 20;
> + }
> +
> + SpinnerListItemRenderer
> + {
> + paddingTop : 12;
> + paddingBottom : 12;
> + paddingLeft : 4;
> + paddingRight : 4;
> + }
> +
> + TabbedViewNavigator #tabBar
> + {
> + fontSize: 14;
> + }
> +}
> +
> +@media (os-platform:"IOS") AND (min-os-version: 7) AND (application-dpi:
> 240)
> +{
> + Application
> + {
> + osStatusBarHeight: 30;
> + }
> +}
> +
> +@media (os-platform:"IOS") AND (min-os-version: 7) AND (application-dpi:
> 320)
> +{
> + global
> + {
> + fontSize: 32;
> + }
> +
> + ActionBar
> + {
> + paddingBottom: 2;
> + paddingLeft: 0;
> + paddingRight: 0;
> + paddingTop: 2;
> + }
> +
> + ActionBar #titleDisplay
> + {
> + fontSize: 36;
> + }
> +
> + Application
> + {
> + osStatusBarHeight: 40;
> + }
> +
> + SpinnerListItemRenderer
> + {
> + paddingTop : 24;
> + paddingBottom : 24;
> + paddingLeft : 8;
> + paddingRight : 8;
> + }
> +
> + TabbedViewNavigator #tabBar
> + {
> + fontSize: 28;
> + }
> +}
> +
> +@media (os-platform:"IOS") AND (min-os-version: 7) AND (application-dpi:
> 480)
> +{
> + global
> + {
> + fontSize: 48;
> + focusThickness: 6;
> + }
> +
> + ActionBar
> + {
> + paddingBottom: 4;
> + paddingLeft: 0;
> + paddingRight: 0;
> + paddingTop: 4;
> + }
> +
> + ActionBar #titleDisplay
> + {
> + fontSize: 54;
> + }
> +
> + Application
> + {
> + osStatusBarHeight: 60;
> + }
> +
> + SpinnerListItemRenderer
> + {
> + paddingTop : 36;
> + paddingBottom : 36;
> + paddingLeft : 12;
> + paddingRight : 12;
> + }
> +
> + TabbedViewNavigator #tabBar
> + {
> + fontSize: 42;
> + }
> +}
> +
> +@media (os-platform:"IOS") AND (min-os-version: 7) AND (application-dpi:
> 640)
> +{
> + global
> + {
> + fontSize: 64;
> + }
> +
> + ActionBar
> + {
> + paddingBottom: 4;
> + paddingLeft: 0;
> + paddingRight: 0;
> + paddingTop: 4;
> + }
> +
> + ActionBar #titleDisplay
> + {
> + fontSize: 72;
> + }
> +
> + SpinnerListItemRenderer
> + {
> + paddingTop : 48;
> + paddingBottom : 48;
> + paddingLeft : 16;
> + paddingRight : 16;
> + }
> +
> + TabbedViewNavigator #tabBar
> + {
> + fontSize: 56;
> + }
> +}
> +
> +
>
> /*
> Android 4.x specific Mobile Flex skins and styles. Defaults sizes are
> based on
>
>
--
Ix Multimedia Software
Jan Luykenstraat 27
3521 VB Utrecht
T. 06-51952295
I. www.ixsoftware.nl
Re: [3/3] git commit: [flex-sdk] [refs/heads/iso7skins] - Prepare dpi
specific styles for iOS7+
Posted by OmPrakash Muppirala <bi...@gmail.com>.
Did you take a look at the Button skin that I checked in last night? Is
that a good reference point?
Thanks,
Om
On Oct 3, 2014 2:39 AM, "Erik de Bruin" <er...@ixsoftware.nl> wrote:
> Ok, this is about as far as I can go without some artwork to serve as an
> example. Is there a reference we’re following that I can look at?
>
> EdB
>
>
>
> On Fri, Oct 3, 2014 at 11:17 AM, <er...@apache.org> wrote:
>
> > Prepare dpi specific styles for iOS7+
> >
> > Integrated the 'status bar' fix (FLEX-33949) into the new dpi specific
> > styles copied from the Android section.
> >
> > Signed-off-by: Erik de Bruin <er...@ixsoftware.nl>
> >
> >
> > Project: http://git-wip-us.apache.org/repos/asf/flex-sdk/repo
> > Commit: http://git-wip-us.apache.org/repos/asf/flex-sdk/commit/cea42d7d
> > Tree: http://git-wip-us.apache.org/repos/asf/flex-sdk/tree/cea42d7d
> > Diff: http://git-wip-us.apache.org/repos/asf/flex-sdk/diff/cea42d7d
> >
> > Branch: refs/heads/iso7skins
> > Commit: cea42d7da8e644fd392053e54fe14830e7249155
> > Parents: b685eae
> > Author: Erik de Bruin <er...@ixsoftware.nl>
> > Authored: Fri Oct 3 11:14:20 2014 +0200
> > Committer: Erik de Bruin <er...@ixsoftware.nl>
> > Committed: Fri Oct 3 11:14:20 2014 +0200
> >
> > ----------------------------------------------------------------------
> > frameworks/projects/mobiletheme/defaults.css | 240
> ++++++++++++++++++----
> > 1 file changed, 199 insertions(+), 41 deletions(-)
> > ----------------------------------------------------------------------
> >
> >
> >
> >
> http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/cea42d7d/frameworks/projects/mobiletheme/defaults.css
> > ----------------------------------------------------------------------
> > diff --git a/frameworks/projects/mobiletheme/defaults.css
> > b/frameworks/projects/mobiletheme/defaults.css
> > index 0b78b0c..8e93db5 100644
> > --- a/frameworks/projects/mobiletheme/defaults.css
> > +++ b/frameworks/projects/mobiletheme/defaults.css
> > @@ -931,48 +931,7 @@ global
> > }
> > }
> >
> > -/* ios 7 status bar
> > -requires new os-version selector (cf FLEX-FLEX-33949)
> > -*/
> >
> > -@media (application-dpi: 120) AND (os-platform:"IOS") AND
> > (min-os-version: 7)
> > -{
> > - Application
> > - {
> > - osStatusBarHeight: 15;
> > - }
> > -}
> > -
> > -@media (application-dpi: 160) AND (os-platform:"IOS") AND
> > (min-os-version: 7)
> > -{
> > - Application {
> > - osStatusBarHeight: 20;
> > - }
> > -}
> > -
> > -@media (application-dpi: 240) AND (os-platform:"IOS") AND
> > (min-os-version: 7)
> > -{
> > - Application
> > - {
> > - osStatusBarHeight: 30;
> > - }
> > -}
> > -
> > -@media (application-dpi: 320) AND (os-platform:"IOS") AND
> > (min-os-version: 7)
> > -{
> > - Application
> > - {
> > - osStatusBarHeight: 40;
> > - }
> > -}
> > -
> > -@media (application-dpi: 480) AND (os-platform:"IOS") AND
> > (min-os-version: 7)
> > -{
> > - Application
> > - {
> > - osStatusBarHeight: 60;
> > - }
> > -}
> >
> > /* ios 7+ new theme */
> >
> > @@ -1205,6 +1164,205 @@ requires new os-version selector (cf
> > FLEX-FLEX-33949)
> >
> > }
> >
> > +@media (os-platform:"IOS") AND (min-os-version: 7) AND (application-dpi:
> > 120)
> > +{
> > + global
> > + {
> > + fontSize: 12;
> > + focusThickness: 2;
> > + }
> > +
> > + ActionBar.beveled
> > + {
> > + paddingLeft: 4;
> > + paddingRight: 4;
> > + }
> > +
> > + ActionBar #titleDisplay
> > + {
> > + fontSize: 14;
> > + }
> > +
> > + Application
> > + {
> > + osStatusBarHeight: 15;
> > + }
> > +
> > + SpinnerListItemRenderer
> > + {
> > + paddingTop : 9;
> > + paddingBottom : 9;
> > + paddingLeft : 3;
> > + paddingRight : 3;
> > + }
> > +
> > + TabbedViewNavigator #tabBar
> > + {
> > + fontSize: 11;
> > + }
> > +}
> > +
> > +@media (os-platform:"IOS") AND (min-os-version: 7) AND (application-dpi:
> > 160)
> > +{
> > + global
> > + {
> > + fontSize: 16;
> > + focusThickness: 2;
> > + }
> > +
> > + ActionBar
> > + {
> > + paddingBottom: 1;
> > + paddingLeft: 0;
> > + paddingRight: 0;
> > + paddingTop: 1;
> > + }
> > +
> > + ActionBar #titleDisplay
> > + {
> > + fontSize: 18;
> > + }
> > +
> > + Application {
> > + osStatusBarHeight: 20;
> > + }
> > +
> > + SpinnerListItemRenderer
> > + {
> > + paddingTop : 12;
> > + paddingBottom : 12;
> > + paddingLeft : 4;
> > + paddingRight : 4;
> > + }
> > +
> > + TabbedViewNavigator #tabBar
> > + {
> > + fontSize: 14;
> > + }
> > +}
> > +
> > +@media (os-platform:"IOS") AND (min-os-version: 7) AND (application-dpi:
> > 240)
> > +{
> > + Application
> > + {
> > + osStatusBarHeight: 30;
> > + }
> > +}
> > +
> > +@media (os-platform:"IOS") AND (min-os-version: 7) AND (application-dpi:
> > 320)
> > +{
> > + global
> > + {
> > + fontSize: 32;
> > + }
> > +
> > + ActionBar
> > + {
> > + paddingBottom: 2;
> > + paddingLeft: 0;
> > + paddingRight: 0;
> > + paddingTop: 2;
> > + }
> > +
> > + ActionBar #titleDisplay
> > + {
> > + fontSize: 36;
> > + }
> > +
> > + Application
> > + {
> > + osStatusBarHeight: 40;
> > + }
> > +
> > + SpinnerListItemRenderer
> > + {
> > + paddingTop : 24;
> > + paddingBottom : 24;
> > + paddingLeft : 8;
> > + paddingRight : 8;
> > + }
> > +
> > + TabbedViewNavigator #tabBar
> > + {
> > + fontSize: 28;
> > + }
> > +}
> > +
> > +@media (os-platform:"IOS") AND (min-os-version: 7) AND (application-dpi:
> > 480)
> > +{
> > + global
> > + {
> > + fontSize: 48;
> > + focusThickness: 6;
> > + }
> > +
> > + ActionBar
> > + {
> > + paddingBottom: 4;
> > + paddingLeft: 0;
> > + paddingRight: 0;
> > + paddingTop: 4;
> > + }
> > +
> > + ActionBar #titleDisplay
> > + {
> > + fontSize: 54;
> > + }
> > +
> > + Application
> > + {
> > + osStatusBarHeight: 60;
> > + }
> > +
> > + SpinnerListItemRenderer
> > + {
> > + paddingTop : 36;
> > + paddingBottom : 36;
> > + paddingLeft : 12;
> > + paddingRight : 12;
> > + }
> > +
> > + TabbedViewNavigator #tabBar
> > + {
> > + fontSize: 42;
> > + }
> > +}
> > +
> > +@media (os-platform:"IOS") AND (min-os-version: 7) AND (application-dpi:
> > 640)
> > +{
> > + global
> > + {
> > + fontSize: 64;
> > + }
> > +
> > + ActionBar
> > + {
> > + paddingBottom: 4;
> > + paddingLeft: 0;
> > + paddingRight: 0;
> > + paddingTop: 4;
> > + }
> > +
> > + ActionBar #titleDisplay
> > + {
> > + fontSize: 72;
> > + }
> > +
> > + SpinnerListItemRenderer
> > + {
> > + paddingTop : 48;
> > + paddingBottom : 48;
> > + paddingLeft : 16;
> > + paddingRight : 16;
> > + }
> > +
> > + TabbedViewNavigator #tabBar
> > + {
> > + fontSize: 56;
> > + }
> > +}
> > +
> > +
> >
> > /*
> > Android 4.x specific Mobile Flex skins and styles. Defaults sizes are
> > based on
> >
> >
>
>
> --
> Ix Multimedia Software
>
> Jan Luykenstraat 27
> 3521 VB Utrecht
>
> T. 06-51952295
> I. www.ixsoftware.nl
>