diff options
| -rw-r--r-- | src/themes/tizen/common/jquery.mobile.theme.less | 116 | ||||
| -rw-r--r-- | src/themes/tizen/common/jquery.mobile.tizen.tabbar.less | 101 |
2 files changed, 217 insertions, 0 deletions
diff --git a/src/themes/tizen/common/jquery.mobile.theme.less b/src/themes/tizen/common/jquery.mobile.theme.less index cb2340ce..83c3f107 100644 --- a/src/themes/tizen/common/jquery.mobile.theme.less +++ b/src/themes/tizen/common/jquery.mobile.theme.less @@ -620,3 +620,119 @@ a.ui-link-inherit { pointer-events: none; } + + +/************************************************************************ + Landscape mode +************************************************************************/ +@media all and (orientation:landscape) and (device-aspect-ratio : 16/9) { +.ui-bar-s { + > .ui-btn.ui-btn-back, + > .ui-btn.ui-btn-footer-down { + .ui-icon-header-back-btn { + top : 5 * @unit_base; + } + } +} + +.ui-header.ui-bar-s{ + min-height : 45 * @unit_base; + + .ui-title { + min-height : 25 * @unit_base; + max-height : 29 * @unit_base; /* tuning UX guide(title height too large)*/ + font-size : 25 * @unit_base; + + margin: 12*@unit_base 8*@unit_base 4*@unit_base 8*@unit_base;/* tuning UX guide(title height too large)*/ + } + + >.ui-btn:not(.ui-btn-icon_only), + >.naviframe-button.ui-btn:not(.ui-btn-icon_only) { + width : 53 * @unit_base; + height : 18 * @unit_base; + + bottom : 10 * @unit_base; + } + + > .ui-btn.ui-btn-back, + > .ui-btn.ui-btn-footer-down { + right : 13 * @unit_base; + } + + img { + margin-top : 16 * @unit_base; + height: 22 * @unit_base; + width: 22 * @unit_base; + } + + .ui-title-text-sub { + top : 26 * @unit_base; + } + + > .ui-btn, + > .naviframe-button.ui-btn { + top : 8 * @unit_base; + + height : 34 * @unit_base; + width : 34 * @unit_base; + } + &.ui-title-tabbar >.ui-btn { + top: 8 * @unit_base; + } + + &.ui-title-multiline { + img { + margin-top : 12 * @unit_base; + } + + .ui-title { + min-height : 21 * @unit_base; + max-height : 21 * @unit_base; /* temporary UX strange */ + font-size : 19 * @unit_base; + margin: 5*@unit_base 8*@unit_base 19*@unit_base 8*@unit_base; + + display : block; + } + } +} + +.ui-footer.ui-bar-s { + height : 42 * @unit_base; + >.ui-btn.ui-btn-back, + >.ui-btn.ui-btn-footer-down, + >[data-icon="naviframe-more"] { + >.ui-btn-icon-only { + width : 56 * @unit_base; + height : 42 * @unit_base; + } + .ui-icon-down { + top : 5 * @unit_base; + } + } + + [data-icon="naviframe-more"] { + .ui-icon-naviframe-more { + top : 5 * @unit_base; + } + } + + [data-role="controlgroup"] { + margin-top : 6 * @unit_base; /* temp value */ + margin-bottom : 6 * @unit_base; /* temp value */ + padding-left : 58 * @unit_base; + padding-right : 58 * @unit_base; + + + [data-role="button"] { + padding : 0px; + margin-left : -4 * @unit_base; + margin-right : -5 * @unit_base; + top : -4 * @unit_base; + } + } + + > [data-role="button"]:not([data-icon="naviframe-more"]) { + top : 3 * @unit_base; + } +} +} diff --git a/src/themes/tizen/common/jquery.mobile.tizen.tabbar.less b/src/themes/tizen/common/jquery.mobile.tizen.tabbar.less index 712fd277..711212ae 100644 --- a/src/themes/tizen/common/jquery.mobile.tizen.tabbar.less +++ b/src/themes/tizen/common/jquery.mobile.tizen.tabbar.less @@ -270,3 +270,104 @@ right : 0px; background-image: url(images/00_effect_title_tab_bounce_right.png); } + + +/************************************************************************ + Landscape mode +************************************************************************/ +@media all and (orientation:landscape) and (device-aspect-ratio : 16/9) { + +.ui-tabbar { + a.ui-btn { + padding-top : 14 * @unit_base; + padding-bottom : 14 * @unit_base; + } + + .ui-btn-inner { + .ui-icon { + top : 10 * @unit_base; + } + } + + &.ui-tabbar-notext { + a.ui-btn { + padding-top : 6 * @unit_base; + padding-bottom : 5 * @unit_base; + } + .ui-btn-inner { + height : 34 * @unit_base; + } + } +} + +/* title font size when title tabbar */ +.ui-header.ui-bar-s.ui-title-tabbar { + .ui-title { + font-size : 19 * @unit_base; + margin-top : 8 * @unit_base; + } + + .ui-tabbar { + &.ui-tabbar-noicons { + a.ui-btn { + padding-top : 10 * @unit_base; + padding-bottom : 8 * @unit_base; + } + } + + &.ui-tabbar-notext { + a.ui-btn { + padding-top : 3 * @unit_base; + padding-bottom : 2 * @unit_base; + } + } + } +} + +.ui-header.ui-bar-s { + &.ui-title-tabbar-multiline { + .ui-tabbar { + a.ui-btn { + padding-top : 6 * @unit_base; + padding-bottom : 5 * @unit_base; + .ui-btn-inner { + height : 54 * @unit_base; + .ui-btn-text { + line-height : 15 * @unit_base; + } + } + } + } + } +} + +.ui-footer.ui-bar-s { + .ui-tabbar { + height : 42 * @unit_base; + + a.ui-btn { + padding-top : 13 * @unit_base; + padding-bottom : 12 * @unit_base; + } + + &.ui-tabbar-notext { + a.ui-btn { + padding-top : 4 * @unit_base; + padding-bottom : 4 * @unit_base; + } + } + } +} + +.ui-tabbar-s.ui-navbar-noicons { + font-size : 19 * @unit_base; +} + +/* Scrollable tabbar */ + +.ui-tabbar-divider { + width : 81 * @unit_base; + height : 55 * @unit_base; +} + +} |