<body>
<div data-role="page">
<div data-role="header" data-position="fixed">
- <h1>Tizen UI</h1>
+ <h1>Tizen Web UI</h1>
</div>
<div data-role="content">
<p id="current_date"></p>
<p id="html_font_size"></p>
- <fieldset data-role="controlgroup" id="input-select-theme">
- <legend>Select theme</legend>
- <input type="radio" name="select-theme" id="select-theme-tizen-black" value="tizen-black"/>
- <label for="select-theme-tizen-black">tizen-black</label>
- <input type="radio" name="select-theme" id="select-theme-tizen-white" value="tizen-white" checked="true" />
- <label for="select-theme-tizen-white">tizen-white</label>
- </fieldset>
+
<script>
$( document ).one( "pagecreate", function ( ) {
$("#input-select-theme").find("input[name='select-theme']").bind( "change",
);
} );
</script>
- <ul data-role="listview" data-icon="1line-textonly">
+ <ul data-role="listview">
<li data-role="list-divider">Controls</li>
<li><a href="widgets/button/button.html">Button</a></li>
<li><a href="widgets/checkbox/checkbox.html">Check</a></li>
<li><a href="widgets/switch/switch.html">Switch</a></li>
<li><a href="widgets/radio/radio.html">Radio</a></li>
- <li><a href="widgets/colorpicker.html">Color picker</a></li>
+ <li><a href="widgets/searchbar.html">Searchbar</a></li>
+ <li><a href="widgets/entry.html">Entry</a></li>
<li><a href="widgets/datefield.html">Time picker</a></li>
+ <li><a href="widgets/controlbar/controlbar.html">Controlbar</a></li>
<li><a href="widgets/progressbar.html">Progressbar</a></li>
- <li><a href="widgets/entry.html">Entry</a></li>
- <li><a href="widgets/searchbar.html">Searchbar</a></li>
<li><a href="#slider-demo">Slider</a></li>
- <li><a href="widgets/day-selector.html" >Day Selector</a></li>
- <li><a href="#NavigationbarMain">Navigation Bar</a></li>
<li><a href="widgets/imageslider.html">ImageSlider</a></li>
- <li><a href="widgets/pagecontrol/pagecontrol.html">PageControl</a></li>
+ <li><a href="widgets/segmentctrl.html">Segment Control</a></li>
+ <li><a href="widgets/day-selector.html" >Day Selector</a></li>
<li><a href="widgets/selectioninfo.html">SelectionInfo</a></li>
+ <li><a href="widgets/pagecontrol/pagecontrol.html">PageControl</a></li>
<li><a href="#multibuttonentry">Multi-Button Entry</a></li>
+ <li><a href="widgets/colorpicker.html">Color picker</a></li>
+
+ <li data-role="list-divider">PageLayout</li>
+ <li><a href="widgets/naviframe/naviframe.html">Naviframe</a></li>
+ <li><a href="widgets/pagelayout/barcontrol.html">Header/Footer(fixed/non-fixed) Control</a></li>
+ <li><a href="widgets/pagelayout/backbutton-control.html">Back Button Control</a></li>
<li data-role="list-divider">Scrollview</li>
<li><a href="widgets/scrollview_x.html">Horizontal Scroll</a></li>
<li><a href="widgets/handler.html">Handler</a></li>
<li><a href="widgets/scroll_jump.html">Scroll Jump</a></li>
- <li data-role="list-divider">ControlBar</li>
- <li><a href="#controlbar-demo">ControlBar</a></li>
-
<li data-role="list-divider">List</li>
<li><a href="widgets/list/list.html">List</a></li>
<li><a href="widgets/auto-dividers.html">Auto-Dividers</a></li>
<li><a href="widgets/fast-scroll.html">Short cut scroll (aka fast-scroll)</a></li>
- <li data-role="list-divider">Navigation Bar</li>
- <li><a href="widgets/segmentctrl.html">Segment Control</a></li>
- <li><a href="#option-header-demo">Optional Header</a></li>
-
- <li data-role="list-divider">Popup</li>
+ <li data-role="list-divider">Additional Popup</li>
<li><a href="widgets/popupwindow/popup.html">Popup</a></li>
<li><a href="widgets/ctxpopup.html">CxtPopup</a></li>
+ <li><a href="#option-header-demo">Optional Header</a></li>
<li data-role="list-divider">Notification (ticker)</li>
<li><a href="widgets/tickernoti.html">TickerNoti</a></li>
<li><a href="widgets/grid/virtualgrid-auto.html">Virtual Grid - Auto</a></li>
<li data-role="list-divider">Multimedia view</li>
<li><a href="widgets/multimediaview/multimediaview.html">Multimedia view</a></li>
- <li data-role="list-divider">PageLayout</li>
- <li><a href="widgets/pagelayout/barcontrol.html">Header/Footer(fixed/non-fixed) Control</a></li>
- <li><a href="widgets/pagelayout/backbutton-control.html">Back Button Control</a></li>
<li data-role="list-divider">Programming Tips</li>
<li><a href="tips/generate-elements-dynamically.html">Generate Elements by JS</a></li>
</ul>
</div>
+ <div data-role="footer">
+ </div>
</div>
<div data-role="page" id="notImplemented">
</div>
</div>
- <div data-role="page" id="controlbar-demo" data-add-back-btn="true">
- <div data-role="header" data-position="fixed">
- <h1>ControlBar</h1>
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#Tabbar_Main">Tabbar Style</a></li>
- <li><a href="#Toolbar">Toolbar Style</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- </div>
-
- <!-- ControlBar Tabbar Style -->
- <div data-role="page" id="Tabbar_Main">
- <div data-role="header" data-position="fixed">
- <h1>Tabbar</h1>
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#TabbarInHeader">Tabbar in Header</a></li>
- <li><a href="#Tabbar2Items">2 Items Style</a></li>
- <li><a href="#Tabbar3Items">3 Items Style</a></li>
- <li><a href="#Tabbar4Items">4 Items Style</a></li>
- <li><a href="#Tabbar5Items">5 Items Style</a></li>
- <li><a href="#TabbarText">Only Text Style</a></li>
- <li><a href="#TabbarIcon">Only Icon Style</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- <div data-role="footer"data-position ="fixed">
- <div data-role="controlbar" data-style="tabbar" >
- <ul>
- <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
- <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
- <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
- <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
- <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
- </ul>
- </div>
- </div>
- </div>
- <div data-role="page" id="TabbarInHeader">
- <div data-role="header" data-position="fixed">
- <div data-role="controlbar" data-style="tabbar" >
- <ul>
- <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
- <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
- <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
- <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
- <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
- </ul>
- </div><!-- /navbar -->
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#">Test</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- <div data-role="footer"data-position ="fixed">
- </div>
- </div>
- <div data-role="page" id="Tabbar2Items">
- <div data-role="header" data-position="fixed">
- <h1>Tabbar</h1>
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#">2 Items Style List</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- <div data-role="footer"data-position ="fixed">
- <div data-role="controlbar" data-style="tabbar" >
- <ul>
- <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
- <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
- </ul>
- </div><!-- /controlbar -->
- </div>
- </div>
-
- <div data-role="page" id="Tabbar3Items">
- <div data-role="header" data-position="fixed">
- <h1>Tabbar</h1>
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#">3 Items Style List</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- <div data-role="footer"data-position ="fixed">
- <div data-role="controlbar" data-style="tabbar" >
- <ul>
- <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
- <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
- <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
- </ul>
- </div><!-- /controlbar -->
- </div>
- </div>
-
- <div data-role="page" id="Tabbar4Items">
- <div data-role="header" data-position="fixed">
- <h1>Tabbar</h1>
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#">4 Items Style List</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- <div data-role="footer"data-position ="fixed">
- <div data-role="controlbar" data-style="tabbar" >
- <ul>
- <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
- <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
- <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
- <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
- </ul>
- </div><!-- /controlbar -->
- </div>
- </div>
-
- <div data-role="page" id="Tabbar5Items">
- <div data-role="header" data-position="fixed">
- <h1>Tabbar</h1>
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#">5 Items Style List</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- <div data-role="footer"data-position ="fixed">
- <div data-role="controlbar" data-style="tabbar" >
- <ul>
- <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
- <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
- <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
- <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
- <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
- </ul>
- </div><!-- /controlbar -->
- </div>
- </div>
-
- <div data-role="page" id="TabbarText">
- <div data-role="header" data-position="fixed">
- <h1>Tabbar</h1>
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#">Text Style List</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- <div data-role="footer"data-position ="fixed">
- <div data-role="controlbar" data-style="tabbar" >
- <ul>
- <li><a href="#" class="ui-btn-active">Songs</a></li>
- <li><a href="#">Favorites</a></li>
- <li><a href="#">Group</a></li>
- <li><a href="#">Message</a></li>
- <li><a href="#">Contact</a></li>
- </ul>
- </div><!-- /controlbar -->
- </div>
- </div>
-
- <div data-role="page" id="TabbarIcon">
- <div data-role="header" data-position="fixed">
- <h1>Tabbar</h1>
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#">Icon Style List</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- <div data-role="footer"data-position ="fixed">
- <div data-role="controlbar" data-style="tabbar" >
- <ul>
- <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active"></a></li>
- <li><a href="#" data-icon="ctrlbar-save" ></a></li>
- <li><a href="#" data-icon="ctrlbar-share" ></a></li>
- <li><a href="#" data-icon="ctrlbar-timeline" ></a></li>
- <li><a href="#" data-icon="ctrlbar-world_clock" ></a></li>
- </ul>
- </div><!-- /controlbar -->
- </div>
- </div>
-
- <!-- Toolbar Style -->
- <div data-role="page" id="Toolbar">
- <div data-role="header" data-position="fixed">
- <h1>Toolbar</h1>
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#ToolbarInHeader">Toolbar in Header</a></li>
- <li><a href="#Toolbar2Items">2 Items Style</a></li>
- <li><a href="#Toolbar3Items">3 Items Style</a></li>
- <li><a href="#Toolbar4Items">4 Items Style</a></li>
- <li><a href="#Toolbar5Items">5 Items Style</a></li>
- <li><a href="#ToolbarText">Only Text Style</a></li>
- <li><a href="#ToolbarIcon">Only Icon Style</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- <div data-role="footer"data-position ="fixed">
- <div data-role="controlbar" data-style="toolbar" >
- <ul>
- <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
- <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
- <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
- <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
- <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
- </ul>
- </div><!-- /controlbar -->
- </div>
- </div>
-
- <div data-role="page" id="ToolbarInHeader">
- <div data-role="header" data-position="fixed">
- <div data-role="controlbar" data-style="toolbar" >
- <ul>
- <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
- <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
- <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
- <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
- <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
- </ul>
- </div><!-- /controlbar -->
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#">Test</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- <div data-role="footer"data-position ="fixed">
- </div>
- </div>
-
-
- <div data-role="page" id="Toolbar2Items">
- <div data-role="header" data-position="fixed">
- <h1>Toolbar</h1>
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#">2 Items Style</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- <div data-role="footer"data-position ="fixed">
- <div data-role="controlbar" data-style="toolbar" >
- <ul>
- <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
- <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
- </ul>
- </div><!-- /controlbar -->
- </div>
- </div>
-
- <div data-role="page" id="Toolbar3Items">
- <div data-role="header" data-position="fixed">
- <h1>Toolbar</h1>
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#">3 Items Style</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- <div data-role="footer"data-position ="fixed">
- <div data-role="controlbar" data-style="toolbar" >
- <ul>
- <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
- <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
- <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
- </ul>
- </div><!-- /controlbar -->
- </div>
- </div>
-
- <div data-role="page" id="Toolbar4Items">
- <div data-role="header" data-position="fixed">
- <h1>Toolbar</h1>
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#">4 Items Style</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- <div data-role="footer"data-position ="fixed">
- <div data-role="controlbar" data-style="toolbar" >
- <ul>
- <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
- <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
- <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
- <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
- </ul>
- </div><!-- /controlbar -->
- </div>
- </div>
-
- <div data-role="page" id="Toolbar5Items">
- <div data-role="header" data-position="fixed">
- <h1>Toolbar</h1>
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#">5 Items Style</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- <div data-role="footer"data-position ="fixed">
- <div data-role="controlbar" data-style="toolbar" >
- <ul>
- <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
- <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
- <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
- <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
- <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
- </ul>
- </div><!-- /controlbar -->
- </div>
- </div>
-
- <div data-role="page" id="ToolbarText">
- <div data-role="header" data-position="fixed">
- <h1>Toolbar</h1>
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#">Text Style</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- <div data-role="footer"data-position ="fixed">
- <div data-role="controlbar" data-style="toolbar" >
- <ul>
- <li><a href="#" class="ui-btn-active">Songs</a></li>
- <li><a href="#">Favorites</a></li>
- <li><a href="#">Group</a></li>
- <li><a href="#">Message</a></li>
- <li><a href="#">Contact</a></li>
- </ul>
- </div><!-- /controlbar -->
- </div>
- </div>
-
- <div data-role="page" id="ToolbarIcon">
- <div data-role="header" data-position="fixed">
- <h1>Toolbar</h1>
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#">Only Icon Style</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- <div data-role="footer"data-position ="fixed">
- <div data-role="controlbar" data-style="toolbar" >
- <ul>
- <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active"></a></li>
- <li><a href="#" data-icon="ctrlbar-save" ></a></li>
- <li><a href="#" data-icon="ctrlbar-share" ></a></li>
- <li><a href="#" data-icon="ctrlbar-timeline" ></a></li>
- <li><a href="#" data-icon="ctrlbar-world_clock" ></a></li>
- </ul>
- </div><!-- /controlbar -->
- </div>
- </div>
- <!-- Toolbar Style -->
<!-- Mixed Style -->
</div>
<!-- Mixed Style -->
- <!-- ControlBar Left Style -->
- <div data-role="page" id="ControlBarVerticalLeft" >
- <div data-role="header" data-position="fixed">
- <h1>Vertical Toolbar</h1>
- </div>
- <div data-role="content">
- <ul data-role="listview" data-icon="1line-textonly">
- <li><a href="#notImplemented" data-rel="dialog">AutoScroll</a></li>
- <li><a href="#notImplemented">Button</a></li>
- <li><a href="#notImplemented">Check</a></li>
- </ul>
- <div data-role="controlbar" data-style="left">
- <ul>
- <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
- <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
- <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
- <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
- <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
- </ul>
- </div><!-- /controlbar -->
- </div>
- </div>
- <!-- ControlBar Left Style -->
-
- <!-- ControlBar Right Style -->
- <div data-role="page" id="ControlBarVerticalRight" >
- <div data-role="header" data-position="fixed">
- <h1>Vertical Toolbar</h1>
- </div>
- <div data-role="content">
- <ul data-role="listview" data-icon="1line-textonly">
- <li><a href="#notImplemented" data-rel="dialog">AutoScroll</a></li>
- <li><a href="#notImplemented">Button</a></li>
- </ul>
- <div data-role="controlbar" data-style="right">
- <ul>
- <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
- <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
- <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
- <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
- <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
- </ul>
- </div><!-- /controlbar -->
- </div>
- </div>
- <!-- ControlBar Right Style -->
-
- <!-- ControlBar Animation -->
- <div data-role="page" id="ControlBarAnimation" >
- <div data-role="header" data-position="fixed">
- <h1>Vertical Toolbar</h1>
- </div>
- <div data-role="content">
- </div>
- <div data-role="footer"data-position ="fixed">
- <div data-role="controlbar" data-style="tabbar">
- <ul>
- <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
- <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
- <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
- <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
- <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
- </ul>
- </div><!-- /controlbar -->
- </div>
- </div>
- <!-- ControlBar Animation -->
-
- <div data-role="page" id="NavigationbarMain" data-add-back-btn="true">
- <div data-role="header" data-position="fixed">
- <h1>ControlBar</h1>
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#normalstyle">Normal style title</a></li>
- <li><a href="#extendedstyle">Extended style title</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- </div>
-
- <div data-role="page" id="normalstyle" data-add-back-btn="true">
- <div data-role="header" data-position="fixed">
- <h1>Normal Title</h1>
- </div>
- <div data-role="content">
- <ul data-role="listview">
- <li><a href="#normal1btn">Title 1 button</a></li>
- <li><a href="#normal2btn">Title 2 button</a></li>
- <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
- <li><a href="#normal3btn">Title 3 button</a></li>
- <li><a href="#iconTitle">Icon + Title</a></li>
- <li><a href="#customTitle1">Custom Title with button position: left</a></li>
- <li><a href="#customTitle2">Custom Title with button position: right</a></li>
- <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
- <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
- </ul>
- </div>
- </div>
-
- <div data-role="page" id="normal1btn">
- <div data-role="header" data-position="fixed">
- <h1>Normal Title - 1Btn</h1>
- <a>text1</a>
- </div>
- <div data-role="content">
- <ul data-role="listview">
- <li><a href="#normal1btn">Title 1 button</a></li>
- <li><a href="#normal2btn">Title 2 button</a></li>
- <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
- <li><a href="#normal3btn">Title 3 button</a></li>
- <li><a href="#iconTitle">Icon + Title</a></li>
- <li><a href="#customTitle1">Custom Title with button position: left</a></li>
- <li><a href="#customTitle2">Custom Title with button position: right</a></li>
- <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
- <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
- </ul>
- </div>
- </div>
-
- <div data-role="page" id="normal2btn">
- <div data-role="header" data-position="fixed">
- <h1>Normal Title - 2Btn</h1>
- <a>text1</a>
- <a>text2</a>
- </div>
- <div data-role="content">
- <ul data-role="listview">
- <li><a href="#normal1btn">Title 1 button</a></li>
- <li><a href="#normal2btn">Title 2 button</a></li>
- <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
- <li><a href="#normal3btn">Title 3 button</a></li>
- <li><a href="#iconTitle">Icon + Title</a></li>
- <li><a href="#customTitle1">Custom Title with button position: left</a></li>
- <li><a href="#customTitle2">Custom Title with button position: right</a></li>
- <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
- <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
- </ul>
- </div>
- </div>
-
- <div data-role="page" id="normal2btnicononly">
- <div data-role="header" data-position="fixed">
- <h1>Normal Title+2Buttons Icon only</h1>
- <a data-icon="plus"></a>
- <a data-icon="minus"></a>
- </div>
- <div data-role="content">
- <ul data-role="listview">
- <li><a href="#normal1btn">Title 1 button</a></li>
- <li><a href="#normal2btn">Title 2 button</a></li>
- <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
- <li><a href="#normal3btn">Title 3 button</a></li>
- <li><a href="#iconTitle">Icon + Title</a></li>
- <li><a href="#customTitle1">Custom Title with button position: left</a></li>
- <li><a href="#customTitle2">Custom Title with button position: right</a></li>
- <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
- <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
- </ul>
- </div>
- </div>
-
-
- <div data-role="page" id="normal3btn" data-add-back-btn="true">
- <div data-role="header" data-position="fixed">
- <h1>Normal Title - 3Btn</h1>
- <a>text1</a>
- <a>text2</a>
- <a>text3</a>
- </div>
- <div data-role="content">
- <ul data-role="listview">
- <li><a href="#normal1btn">Title 1 button</a></li>
- <li><a href="#normal2btn">Title 2 button</a></li>
- <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
- <li><a href="#normal3btn">Title 3 button</a></li>
- <li><a href="#iconTitle">Icon + Title</a></li>
- <li><a href="#customTitle1">Custom Title with button position: left</a></li>
- <li><a href="#customTitle2">Custom Title with button position: right</a></li>
- <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
- <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
- </ul>
- </div>
- </div>
-
- <div data-role="page" id="iconTitle">
- <div data-role="header" data-position="fixed">
- <img src="icon-tizen.png"/>
- <h1>Icon Title</h1>
- <a>text1</a>
- </div>
- <div data-role="content">
- <ul data-role="listview">
- <li><a href="#normal1btn">Title 1 button</a></li>
- <li><a href="#normal2btn">Title 2 button</a></li>
- <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
- <li><a href="#normal3btn">Title 3 button</a></li>
- <li><a href="#iconTitle">Icon + Title</a></li>
- <li><a href="#customTitle1">Custom Title with button position: left</a></li>
- <li><a href="#customTitle2">Custom Title with button position: right</a></li>
- <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
- <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
- </ul>
- </div>
- </div>
-
- <div data-role="page" id="customTitle1">
- <div data-role="header" data-position="fixed">
- <h1>Title with Left button</h1>
- <a class="ui-btn-left">Left1</a>
- <a class="ui-btn-left">Left2</a>
- <a class="ui-btn-left">Left3</a>
- </div>
- <div data-role="content">
- <ul data-role="listview">
- <li><a href="#normal1btn">Title 1 button</a></li>
- <li><a href="#normal2btn">Title 2 button</a></li>
- <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
- <li><a href="#normal3btn">Title 3 button</a></li>
- <li><a href="#iconTitle">Icon + Title</a></li>
- <li><a href="#customTitle1">Custom Title with button position: left</a></li>
- <li><a href="#customTitle2">Custom Title with button position: right</a></li>
- <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
- <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
- </ul>
- </div>
- </div>
-
- <div data-role="page" id="customTitle2">
- <div data-role="header" data-position="fixed">
- <h1>Title with Right button</h1>
- <a class="ui-btn-right">Right1</a>
- <a class="ui-btn-right">Right2</a>
- <a class="ui-btn-right">Right3</a>
- </div>
- <div data-role="content">
- <ul data-role="listview">
- <li><a href="#normal1btn">Title 1 button</a></li>
- <li><a href="#normal2btn">Title 2 button</a></li>
- <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
- <li><a href="#normal3btn">Title 3 button</a></li>
- <li><a href="#iconTitle">Icon + Title</a></li>
- <li><a href="#customTitle1">Custom Title with button position: left</a></li>
- <li><a href="#customTitle2">Custom Title with button position: right</a></li>
- <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
- <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
- </ul>
- </div>
- </div>
-
- <div data-role="page" id="customTitle3">
- <div data-role="header" data-position="fixed">
- <a class="ui-btn-left">Left</a>
- <h1>Title with Left/Right button</h1>
- <a class="ui-btn-right">Right1</a>
- <a class="ui-btn-right">Right2</a>
- </div>
- <div data-role="content">
- <ul data-role="listview">
- <li><a href="#normal1btn">Title 1 button</a></li>
- <li><a href="#normal2btn">Title 2 button</a></li>
- <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
- <li><a href="#normal3btn">Title 3 button</a></li>
- <li><a href="#iconTitle">Icon + Title</a></li>
- <li><a href="#customTitle1">Custom Title with button position: left</a></li>
- <li><a href="#customTitle2">Custom Title with button position: right</a></li>
- <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
- <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
- </ul>
- </div>
- </div>
-
-
-
-
-
- <div data-role="page" id="extendedstyle" data-add-back-btn="true">
- <div data-role="header" data-position="fixed">
- <h1>Extended Title</h1>
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#extendedstyle2btn">2 Button</a></li>
- <li><a href="#extendedstyle3btn">3 Button</a></li>
- <li><a href="#extendedstyle4btn">4 Button</a></li>
- <li><a href="#footerExtendedStyle">Footer Extended Style</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- </div>
-
- <div data-role="page" id="extendedstyle2btn">
- <div data-role="header" data-position="fixed">
- <h1>Extended Title 2 Button </h1>
- <div data-role="fieldcontain">
- <fieldset data-role="controlgroup" data-type="horizontal">
- <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment1" value="on" checked="checked" />
- <label for="segment1">All</label>
- <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment2" value="off" />
- <label for="segment2">Call</label>
- </fieldset>
- </div>
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#extendedstyle2btn">2 Button</a></li>
- <li><a href="#extendedstyle3btn">3 Button</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- </div>
-
- <div data-role="page" id="extendedstyle3btn">
- <div data-role="header" data-position="fixed">
- <h1>Extended Title 3 Button </h1>
- <div data-role="fieldcontain">
- <fieldset data-role="controlgroup" data-type="horizontal">
- <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment71" value="on" checked="checked" />
- <label for="segment71">All</label>
- <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment72" value="off" />
- <label for="segment72">Call</label>
- <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment73" value="off" />
- <label for="segment73">Message</label>
- </fieldset>
- </div>
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#extendedstyle2btn">2 Button</a></li>
- <li><a href="#extendedstyle3btn">3 Button</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- </div>
-
- <div data-role="page" id="extendedstyle4btn">
- <div data-role="header" data-position="fixed">
- <h1>Extended Title 4 Button </h1>
- <div data-role="fieldcontain">
- <fieldset data-role="controlgroup" data-type="horizontal">
- <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment71" value="on" checked="checked" />
- <label for="segment71">All</label>
- <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment72" value="off" />
- <label for="segment72">Call</label>
- <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment73" value="off" />
- <label for="segment73">Message</label>
- <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment74" value="off" />
- <label for="segment74">Contact</label>
- </fieldset>
- </div>
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#extendedstyle2btn">2 Button</a></li>
- <li><a href="#extendedstyle3btn">3 Button</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- </div>
-
- <div data-role="page" id="footerExtendedStyle">
- <div data-role="header" data-position="fixed">
- <h1>Extended Footer style</h1>
- </div>
- <div data-role="content">
- <p> test page </p>
- </div>
- <div data-role="footer" data-position="fixed">
- <div data-role="fieldcontain">
- <fieldset data-role="controlgroup" data-type="horizontal">
- <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment1" value="on" checked="checked" />
- <label for="segment1">All</label>
- <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment2" value="off" />
- <label for="segment2">Call</label>
- <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment3" value="off" />
- <label for="segment3">Contact</label>
- </fieldset>
- </div>
- <a>Edit</a>
- </div>
- </div>
<div data-role="page" id="multibuttonentry">
<div data-role="header" data-position="fixed">
});
$('#imageslider-del').bind('vmouseup', function ( e ) {
- $('#imageslider').imageslider('delete');
+ $('#imageslider').imageslider('remove');
});
$('#selectioninfo-demo').bind('vmouseup', function ( e ) {
background-size:50% 50%;
background-image: url(test.png);
}</textarea>
+ *Input Type = "Button"
+ <input type="button" value="test button"/>
+ HTML Code:
+ <textarea style="width:100%;padding:1em;background-color:whitesmoke;color:black;border-witth:3px;border-style:inset"><input type="button" value="test button"/></textarea>
+
</div>
</div>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" href="themes/default/" />
+ <script src="js/jquery.js"></script>
+ <script src="js/"></script>
+ <script src="theme.js"></script>
+ <script src="js/jquery.mobile.forms.button.extension.js"></script>
+ </head>
+<body>
+
+ <div data-role="page">
+ <div data-role="header" data-position="fixed">
+ <h1>ControlBar Demo</h1>
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li data-role="list-divider">Header</li>
+ <li><a href="controlbar_text.html">Tab(text) only</a></li>
+ <li><a href="controlbar_icon_text.html">Tab(icon + text) only</a></li>
+ <li><a href="controlbar_icon.html">Tab(icon) only</a></li>
+ <li><a href="controlbar_title_text.html">Title + Tab(text)</a></li>
+ <li><a href="controlbar_title_icon.html">Title Tab(icon) only</a></li>
+ <li><a href="controlbar_scrolling.html">Scrolling interation</a></li>
+ <li><a href="#Tabbar_Main">Persist toolbar</a></li>
+ <li data-role="list-divider">Footer</li>
+ <li><a href="controlbar_footer_icon.html">[Progressing...]Footer + Tab(text)</a></li>
+ <li><a href="controlbar_footer.html">[Progressing...]Footer + Tab(text)</a></li>
+ <li><a href="controlbar_footer_more.html">[Progressing...]Footer + more + Tab(text)</a></li>
+ <li><a href="controlbar_footer_segment.html">Footer + SegmentTab(text)</a></li>
+ <li><a href="controlbar_footer_segment_more.html">Footer + more + SegmentTab(text)</a></li>
+
+ <li data-role="list-divider">Old version</li>
+ <li><a href="#Tabbar_Main">Tabbar Style</a></li>
+ <li><a href="#Toolbar">Toolbar Style</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ </div>
+
+
+
+ <div data-role="page" id="controlbar-demo" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>ControlBar</h1>
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="#Tabbar_Main">Tabbar Style</a></li>
+ <li><a href="#Toolbar">Toolbar Style</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ </div>
+
+ <!-- ControlBar Tabbar Style -->
+ <div data-role="page" id="Tabbar_Main">
+ <div data-role="header" data-position="fixed">
+ <h1>Tabbar</h1>
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="#TabbarInHeader">Tabbar in Header</a></li>
+ <li><a href="#Tabbar2Items">2 Items Style</a></li>
+ <li><a href="#Tabbar3Items">3 Items Style</a></li>
+ <li><a href="#Tabbar4Items">4 Items Style</a></li>
+ <li><a href="#Tabbar5Items">5 Items Style</a></li>
+ <li><a href="#TabbarText">Only Text Style</a></li>
+ <li><a href="#TabbarIcon">Only Icon Style</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ <div data-role="footer"data-position ="fixed">
+ <div data-role="controlbar" data-style="tabbar" >
+ <ul>
+ <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
+ <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
+ <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
+ <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
+ <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ <div data-role="page" id="TabbarInHeader">
+ <div data-role="header" data-position="fixed">
+ <div data-role="controlbar" data-style="tabbar" >
+ <ul>
+ <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
+ <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
+ <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
+ <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
+ <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
+ </ul>
+ </div><!-- /navbar -->
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="#">Test</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ <div data-role="footer"data-position ="fixed">
+ </div>
+ </div>
+ <div data-role="page" id="Tabbar2Items">
+ <div data-role="header" data-position="fixed">
+ <h1>Tabbar</h1>
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="#">2 Items Style List</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ <div data-role="footer"data-position ="fixed">
+ <div data-role="controlbar" data-style="tabbar" >
+ <ul>
+ <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
+ <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
+ </ul>
+ </div><!-- /controlbar -->
+ </div>
+ </div>
+
+ <div data-role="page" id="Tabbar3Items">
+ <div data-role="header" data-position="fixed">
+ <h1>Tabbar</h1>
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="#">3 Items Style List</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ <div data-role="footer"data-position ="fixed">
+ <div data-role="controlbar" data-style="tabbar" >
+ <ul>
+ <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
+ <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
+ <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
+ </ul>
+ </div><!-- /controlbar -->
+ </div>
+ </div>
+
+ <div data-role="page" id="Tabbar4Items">
+ <div data-role="header" data-position="fixed">
+ <h1>Tabbar</h1>
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="#">4 Items Style List</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ <div data-role="footer"data-position ="fixed">
+ <div data-role="controlbar" data-style="tabbar" >
+ <ul>
+ <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
+ <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
+ <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
+ <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
+ </ul>
+ </div><!-- /controlbar -->
+ </div>
+ </div>
+
+ <div data-role="page" id="Tabbar5Items">
+ <div data-role="header" data-position="fixed">
+ <h1>Tabbar</h1>
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="#">5 Items Style List</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ <div data-role="footer"data-position ="fixed">
+ <div data-role="controlbar" data-style="tabbar" >
+ <ul>
+ <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
+ <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
+ <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
+ <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
+ <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
+ </ul>
+ </div><!-- /controlbar -->
+ </div>
+ </div>
+
+ <div data-role="page" id="TabbarText">
+ <div data-role="header" data-position="fixed">
+ <h1>Tabbar</h1>
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="#">Text Style List</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ <div data-role="footer"data-position ="fixed">
+ <div data-role="controlbar" data-style="tabbar" >
+ <ul>
+ <li><a href="#" class="ui-btn-active">Songs</a></li>
+ <li><a href="#">Favorites</a></li>
+ <li><a href="#">Group</a></li>
+ <li><a href="#">Message</a></li>
+ <li><a href="#">Contact</a></li>
+ </ul>
+ </div><!-- /controlbar -->
+ </div>
+ </div>
+
+ <div data-role="page" id="TabbarIcon">
+ <div data-role="header" data-position="fixed">
+ <h1>Tabbar</h1>
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="#">Icon Style List</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ <div data-role="footer"data-position ="fixed">
+ <div data-role="controlbar" data-style="tabbar" >
+ <ul>
+ <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active"></a></li>
+ <li><a href="#" data-icon="ctrlbar-save" ></a></li>
+ <li><a href="#" data-icon="ctrlbar-share" ></a></li>
+ <li><a href="#" data-icon="ctrlbar-timeline" ></a></li>
+ <li><a href="#" data-icon="ctrlbar-world_clock" ></a></li>
+ </ul>
+ </div><!-- /controlbar -->
+ </div>
+ </div>
+
+ <!-- Toolbar Style -->
+ <div data-role="page" id="Toolbar">
+ <div data-role="header" data-position="fixed">
+ <h1>Toolbar</h1>
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="#ToolbarInHeader">Toolbar in Header</a></li>
+ <li><a href="#Toolbar2Items">2 Items Style</a></li>
+ <li><a href="#Toolbar3Items">3 Items Style</a></li>
+ <li><a href="#Toolbar4Items">4 Items Style</a></li>
+ <li><a href="#Toolbar5Items">5 Items Style</a></li>
+ <li><a href="#ToolbarText">Only Text Style</a></li>
+ <li><a href="#ToolbarIcon">Only Icon Style</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ <div data-role="footer"data-position ="fixed">
+ <div data-role="controlbar" data-style="toolbar" >
+ <ul>
+ <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
+ <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
+ <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
+ <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
+ <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
+ </ul>
+ </div><!-- /controlbar -->
+ </div>
+ </div>
+
+ <div data-role="page" id="ToolbarInHeader">
+ <div data-role="header" data-position="fixed">
+ <div data-role="controlbar" data-style="toolbar" >
+ <ul>
+ <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
+ <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
+ <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
+ <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
+ <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
+ </ul>
+ </div><!-- /controlbar -->
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="#">Test</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ <div data-role="footer"data-position ="fixed">
+ </div>
+ </div>
+
+
+ <div data-role="page" id="Toolbar2Items">
+ <div data-role="header" data-position="fixed">
+ <h1>Toolbar</h1>
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="#">2 Items Style</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ <div data-role="footer"data-position ="fixed">
+ <div data-role="controlbar" data-style="toolbar" >
+ <ul>
+ <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
+ <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
+ </ul>
+ </div><!-- /controlbar -->
+ </div>
+ </div>
+
+ <div data-role="page" id="Toolbar3Items">
+ <div data-role="header" data-position="fixed">
+ <h1>Toolbar</h1>
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="#">3 Items Style</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ <div data-role="footer"data-position ="fixed">
+ <div data-role="controlbar" data-style="toolbar" >
+ <ul>
+ <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
+ <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
+ <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
+ </ul>
+ </div><!-- /controlbar -->
+ </div>
+ </div>
+
+ <div data-role="page" id="Toolbar4Items">
+ <div data-role="header" data-position="fixed">
+ <h1>Toolbar</h1>
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="#">4 Items Style</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ <div data-role="footer"data-position ="fixed">
+ <div data-role="controlbar" data-style="toolbar" >
+ <ul>
+ <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
+ <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
+ <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
+ <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
+ </ul>
+ </div><!-- /controlbar -->
+ </div>
+ </div>
+
+ <div data-role="page" id="Toolbar5Items">
+ <div data-role="header" data-position="fixed">
+ <h1>Toolbar</h1>
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="#">5 Items Style</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ <div data-role="footer"data-position ="fixed">
+ <div data-role="controlbar" data-style="toolbar" >
+ <ul>
+ <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
+ <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
+ <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
+ <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
+ <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
+ </ul>
+ </div><!-- /controlbar -->
+ </div>
+ </div>
+
+ <div data-role="page" id="ToolbarText">
+ <div data-role="header" data-position="fixed">
+ <h1>Toolbar</h1>
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="#">Text Style</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ <div data-role="footer"data-position ="fixed">
+ <div data-role="controlbar" data-style="toolbar" >
+ <ul>
+ <li><a href="#" class="ui-btn-active">Songs</a></li>
+ <li><a href="#">Favorites</a></li>
+ <li><a href="#">Group</a></li>
+ <li><a href="#">Message</a></li>
+ <li><a href="#">Contact</a></li>
+ </ul>
+ </div><!-- /controlbar -->
+ </div>
+ </div>
+
+ <div data-role="page" id="ToolbarIcon">
+ <div data-role="header" data-position="fixed">
+ <h1>Toolbar</h1>
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="#">Only Icon Style</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ <div data-role="footer"data-position ="fixed">
+ <div data-role="controlbar" data-style="toolbar" >
+ <ul>
+ <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active"></a></li>
+ <li><a href="#" data-icon="ctrlbar-save" ></a></li>
+ <li><a href="#" data-icon="ctrlbar-share" ></a></li>
+ <li><a href="#" data-icon="ctrlbar-timeline" ></a></li>
+ <li><a href="#" data-icon="ctrlbar-world_clock" ></a></li>
+ </ul>
+ </div><!-- /controlbar -->
+ </div>
+ </div>
+ <!-- Toolbar Style -->
+
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" href="themes/default/" />
+ <script src="js/jquery.js"></script>
+ <script src="js/"></script>
+ <script src="theme.js"></script>
+ <script src="js/jquery.mobile.forms.button.extension.js"></script>
+ </head>
+<body>
+<div data-role="page">
+ <div data-role="header" data-position="fixed">
+ <h1>Controlbar text with title</h1>
+ </div>
+
+ <div data-role="content">
+ </div>
+
+ <div data-role="footer">
+ <div data-role="controlbar">
+ <ul>
+ <li><a href="#"class="ui-btn-active">Menu</a></li>
+ <li><a href="#">Save</a></li>
+ <li><a href="#">Share</a></li>
+ </ul>
+ </div>
+ </div>
+</div>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" href="themes/default/" />
+ <script src="js/jquery.js"></script>
+ <script src="js/"></script>
+ <script src="theme.js"></script>
+ <script src="js/jquery.mobile.forms.button.extension.js"></script>
+ </head>
+<body>
+<div data-role="page">
+ <div data-role="header" data-position="fixed">
+ <h1>Controlbar text with title</h1>
+ </div>
+
+ <div data-role="content">
+ </div>
+
+ <div data-role="footer">
+ <div data-role="controlbar">
+ <ul>
+ <li><a href="#" data-icon="ctrl-edit" class="ui-btn-active">Menu</a></li>
+ <li><a href="#" data-icon="ctrl-edit" >Save</a></li>
+ <li><a href="#" data-icon="ctrl-edit" >Share</a></li>
+ </ul>
+ </div>
+ </div>
+</div>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" href="themes/default/" />
+ <script src="js/jquery.js"></script>
+ <script src="js/"></script>
+ <script src="theme.js"></script>
+ <script src="js/jquery.mobile.forms.button.extension.js"></script>
+ </head>
+<body>
+
+<div data-role="page">
+ <div data-role="header" data-position="fixed">
+ <h1>Controlbar text with title</h1>
+ </div>
+
+ <div data-role="content">
+ </div>
+
+ <div data-role="footer">
+ <a data-icon="naviframe-more"></a>
+ <div data-role="controlbar">
+ <ul>
+ <li><a href="#"class="ui-btn-active">Menu</a></li>
+ <li><a href="#">Save</a></li>
+ <li><a href="#">Share</a></li>
+
+ </ul>
+ </div>
+ </div>
+</div>
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" href="themes/default/" />
+ <script src="js/jquery.js"></script>
+ <script src="js/"></script>
+ <script src="theme.js"></script>
+ <script src="js/jquery.mobile.forms.button.extension.js"></script>
+ </head>
+<body>
+<div data-role="page">
+ <div data-role="header" data-position="fixed">
+ <h1>Controlbar text with title</h1>
+ </div>
+
+ <div data-role="content">
+ </div>
+
+ <div data-role="footer">
+ <div data-role="controlgroup" data-type="horizontal">
+ <a href="index.html" data-role="button">Yes</a>
+ <a href="index.html" data-role="button">No</a>
+ <a href="index.html" data-role="button">Maybe</a>
+ </div>
+ </div>
+</div>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" href="themes/default/" />
+ <script src="js/jquery.js"></script>
+ <script src="js/"></script>
+ <script src="theme.js"></script>
+ <script src="js/jquery.mobile.forms.button.extension.js"></script>
+ </head>
+<body>
+<div data-role="page">
+ <div data-role="header" data-position="fixed">
+ <h1>Controlbar text with title</h1>
+ </div>
+
+ <div data-role="content">
+ </div>
+
+ <div data-role="footer">
+ <a href="#pop_js" data-role="button" data-icon="naviframe-more" data-rel="popup"></a>
+
+ <div id="pop_js" data-role="popup" data-show-arrow="true">
+ <ul data-role="listview">
+ <li><a href="#" class="ui-btn-ctxpopup-close">Settings</a></li>
+ <li><a href="#" class="ui-btn-ctxpopup-close">Add to contact</a></li>
+ <li><a href="#" class="ui-btn-ctxpopup-close">Call log</a></li>
+ <li><a href="#" class="ui-btn-ctxpopup-close">Music</a></li>
+ <li><a href="#" class="ui-btn-ctxpopup-close">File manager</a></li>
+ </ul>
+
+ </div>
+ <div data-role="controlgroup" data-type="horizontal">
+ <a href="index.html" data-role="button">Yes</a>
+ <a href="index.html" data-role="button">No</a>
+ <a href="index.html" data-role="button">Maybe</a>
+ </div>
+ </div>
+</div>
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" href="themes/default/" />
+ <script src="js/jquery.js"></script>
+ <script src="js/"></script>
+ <script src="theme.js"></script>
+ <script src="js/jquery.mobile.forms.button.extension.js"></script>
+ </head>
+<body>
+
+<div data-role="page">
+ <div data-role="header" data-position="fixed">
+ <div data-role="controlbar">
+ <ul>
+ <li><a href="#" data-icon="ctrl-edit" class="ui-btn-active"></a></li>
+ <li><a href="#" data-icon="ctrl-edit" ></a></li>
+ <li><a href="#" data-icon="ctrl-edit" ></a></li>
+ </ul>
+ </div>
+ </div>
+
+ <div data-role="content">
+ </div>
+</div>
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" href="themes/default/" />
+ <script src="js/jquery.js"></script>
+ <script src="js/"></script>
+ <script src="theme.js"></script>
+ <script src="js/jquery.mobile.forms.button.extension.js"></script>
+ </head>
+<body>
+
+<div data-role="page">
+ <div data-role="header" data-position="fixed">
+ <div data-role="controlbar">
+ <ul>
+ <li><a href="#" data-icon="ctrl-edit" class="ui-btn-active">Menu</a></li>
+ <li><a href="#" data-icon="ctrl-edit" >Save</a></li>
+ <li><a href="#" data-icon="ctrl-edit" >Share</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+ <div data-role="content">
+
+ </div>
+</div>
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" href="themes/default/" />
+ <script src="js/jquery.js"></script>
+ <script src="js/"></script>
+ <script src="theme.js"></script>
+ <script src="js/jquery.mobile.forms.button.extension.js"></script>
+ </head>
+<body>
+
+<div data-role="page">
+ <div data-role="header" data-position="fixed">
+ <div data-role="controlbar">
+ <ul>
+ <li><a href="#"class="ui-btn-active">Menu</a></li>
+ <li><a href="#">Save</a></li>
+ <li><a href="#">Share</a></li>
+ <li><a href="#">Share2</a></li>
+ <li><a href="#">Share3</a></li>
+ <li><a href="#">Share4</a></li>
+ </ul>
+ </div>
+ </div>
+
+ <div data-role="content">
+
+ </div>
+</div>
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" href="themes/default/" />
+ <script src="js/jquery.js"></script>
+ <script src="js/"></script>
+ <script src="theme.js"></script>
+ <script src="js/jquery.mobile.forms.button.extension.js"></script>
+ </head>
+<body>
+
+<div data-role="page">
+ <div data-role="header" data-position="fixed">
+ <div data-role="controlbar">
+ <ul>
+ <li><a href="#"class="ui-btn-active">Menu</a></li>
+ <li><a href="#">Save</a></li>
+ <li><a href="#">Share</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+ <div data-role="content">
+
+ </div>
+</div>
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" href="themes/default/" />
+ <script src="js/jquery.js"></script>
+ <script src="js/"></script>
+ <script src="theme.js"></script>
+ <script src="js/jquery.mobile.forms.button.extension.js"></script>
+ </head>
+<body>
+
+<div data-role="page">
+ <div data-role="header" data-position="fixed">
+ <h1>Controlbar icon with title</h1>
+ <div data-role="controlbar">
+ <ul>
+ <li><a href="#" data-icon="ctrl-edit" class="ui-btn-active"></a></li>
+ <li><a href="#" data-icon="ctrl-edit" ></a></li>
+ <li><a href="#" data-icon="ctrl-edit" ></a></li>
+ </ul>
+ </div>
+ </div>
+
+ <div data-role="content">
+ </div>
+</div>
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" href="themes/default/" />
+ <script src="js/jquery.js"></script>
+ <script src="js/"></script>
+ <script src="theme.js"></script>
+ <script src="js/jquery.mobile.forms.button.extension.js"></script>
+ </head>
+<body>
+
+<div data-role="page">
+ <div data-role="header" data-position="fixed">
+ <h1>Controlbar text with title</h1>
+ <div data-role="controlbar">
+ <ul>
+ <li><a href="#"class="ui-btn-active">Menu</a></li>
+ <li><a href="#">Save</a></li>
+ <li><a href="#">Share</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+ <div data-role="content">
+ </div>
+</div>
+
+</body>
+</html>
</div>
<div data-role="content">
<ul data-role="listview">
+ <li data-role="list-divider" data-line="false" class="ui-datetime-text-sub" > Date/Time Picker(Custom) - <span id="selected-date1"><em>(select a date first)</em></span></li>
<li class="ui-li-dialogue ui-datetime">
<div class="ui-datetime-text-main">
<input type="datetime" name="demo-date" id="demo-date"
data-format="MMM dd yyyy hh:mm tt" value="2012-06-30T00:00:00+09:00" />
</div>
- <div class="ui-datetime-text-sub">
- Date/Time Picker(Custom) - <span id="selected-date1"><em>(select a date first)</em></span>
- </div>
</li>
+ <li data-role="list-divider" data-line="false" class="ui-datetime-text-sub" >Date/Time Picker - <span id="selected-date2"><em>(select a date first)</em></span></li>
<li class="ui-li-dialogue ui-datetime ui-datetime">
- <div class="ui-datetime-text-main ui-datetime-nosubtitle">
+ <div class="ui-datetime-text-main">
<input type="datetime" name="demo-date2" id="demo-date2" />
</div>
- <div class="ui-datetime-text-sub">
- Date/Time Picker - <span id="selected-date2"><em>(select a date first)</em></span>
- </div>
</li>
+ <li data-role="list-divider" data-line="false" class="ui-datetime-text-sub" >Date Picker - <span id="selected-date3"><em>(select a date first)</em></span></li>
<li class="ui-li-dialogue ui-datetime ui-datetime">
<div class="ui-datetime-text-main">
<input type="date" name="demo-date3" value="2012-06-30" id="demo-date3"/>
</div>
- <div class="ui-datetime-text-sub">
- Date Picker - <span id="selected-date3"><em>(select a date first)</em></span>
- </div>
</li>
+ <li data-role="list-divider" data-line="false" class="ui-datetime-text-sub" > Time Picker - <span id="selected-date4"><em>(select a date first)</em></span> </li>
<li class="ui-li-dialogue ui-datetime ui-datetime">
<div class="ui-datetime-text-main">
<input type="time" name="demo-date4" id="demo-date4" />
</div>
- <div class="ui-datetime-text-sub">
- Time Picker - <span id="selected-date4"><em>(select a date first)</em></span>
- </div>
- </li>
- <li class="ui-li-dialogue ui-datetime ui-datetime">
- <div class="ui-datetime-text-main ui-datetime-nosubtitle">
- <input type="datetime" name="demo-date2" id="demo-date2" />
- </div>
</li>
</ul>
</div><!-- /content -->
</div>
<div data-role="content">
<ul data-role="listview" data-style="bubble">
- <li class="ui-li-bubble-left">short left<span class="ui-li-bubble-time">9:20 PM</span></li>
- <li class="ui-li-bubble-right">But I have no choice. I have a big exam tomorrow. (bubble right)<span class="ui-li-bubble-time">9:26 PM</span></li>
+ <li class="ui-li-bubble-receive">short receive<span class="ui-li-bubble-time">9:20 PM</span></li>
+ <li class="ui-li-bubble-sent">But I have no choice. I have a big exam tomorrow. (bubble sent)<span class="ui-li-bubble-time">9:26 PM</span></li>
- <li class="ui-li-bubble-left">Don't worry... I'm free. You're gonna get sick. (bubble left)<span class="ui-li-bubble-time">9:30 PM</span></li>
- <li class="ui-li-bubble-date">2010. 05. 20 (bubble date)</li>
- <li class="ui-li-bubble-right">Sorry I'm late. (bubble right)<span class="ui-li-bubble-time">9:26 PM</span></li>
- <li class="ui-li-bubble-left ui-li-bubble-sos">Don't worry... I'm free. You're gonna get sick. (bubble sos)<span class="ui-li-bubble-time">9:30 PM</span></li>
- <li class="ui-li-bubble-
left"><p>Picture test</p><img src="list-bubble-sample1.png" /><span class="ui-li-bubble-time">9:40 PM</span></li>
+ <li class="ui-li-bubble-receive">Don't worry... I'm free. You're gonna get sick. (bubble receive)<span class="ui-li-bubble-time">9:30 PM</span></li>
+ <li class="ui-li-bubble-date"><span style="">2010. 05. 20 (bubble date)</span></li>
+ <li class="ui-li-bubble-sent">Sorry I'm late. (bubble sent)<span class="ui-li-bubble-time">9:26 PM</span></li>
+ <li class="ui-li-bubble-receive ui-li-bubble-sos">Don't worry... I'm free. You're gonna get sick. (bubble sos)<span class="ui-li-bubble-time">9:30 PM</span></li>
+ <li class="ui-li-bubble-
receive"><p>Picture test</p><img src="list-bubble-sample1.png" /><span class="ui-li-bubble-time">9:40 PM</span></li>
</ul>
</div>
</div>
</div>
<div class="content" data-role="content" data-scroll="y">
<ul data-role="listview">
- <li data-role="list-divider" data-style="check"><form><input type="checkbox" name="c2line-check1" /></form></li>
+ <li data-role="list-divider" data-style="check"><form><input type="checkbox" name="c2line-check1" /></form>Test</li>
<li class="ui-li-has-checkbox"><a href="#" ><form><input type="checkbox" name="c2line-check1" /></form>Normal lists</a></li>
<li class="ui-li-has-checkbox"><a href="#" ><form><input type="checkbox" name="c2line-check1" /></form>Normal lists</a></li>
<li class="ui-li-has-checkbox"><a href="#" ><form><input type="checkbox" name="c2line-check1" /></form>Normal lists</a></li>
- <li data-role="list-divider" data-style="check"><form><input type="checkbox" name="c2line-check1" /></form></li>
+ <li data-role="list-divider" data-style="check"><form><input type="checkbox" name="c2line-check1" /></form>ABC</li>
<li class="ui-li-has-checkbox"><a href="#" ><form><input type="checkbox" name="c2line-check1" /></form>Normal lists</a></li>
<li class="ui-li-has-checkbox"><a href="#" ><form><input type="checkbox" name="c2line-check1" /></form>Normal lists</a></li>
<li class="ui-li-has-checkbox"><a href="#" ><form><input type="checkbox" name="c2line-check1" /></form>Normal lists</a></li>
- <li data-role="list-divider" data-style="check"><form><input type="checkbox" name="c2line-check1" /></form></li>
+ <li data-role="list-divider" data-style="check"><form><input type="checkbox" name="c2line-check1" /></form>Divider</li>
<li class="ui-li-has-checkbox">Normal lists</li>
<li class="ui-li-has-checkbox">Normal lists</li>
<li class="ui-li-has-checkbox">Normal lists</li>
--- /dev/null
+<div data-role="page" id="genlist-normal" data-add-back-btn="true" data-fit-page-to-window="true">
+ <div data-role="header" data-position="fixed">
+ <h1>Normal lists</h1>
+ </div>
+ <div class="content" data-role="content" data-scroll="y">
+ <ul data-role="listview">
+ <li>
+ 1line-sub
+ <span class="ui-li-text-sub">subtext</span>
+ </li>
+
+ <li>
+ <input name="tesst" id="test" placeholder="Edit field" value="" />
+ </li>
+
+ <li>
+ 1line-btn1
+ <div data-role="button" data-inline="true">Text Button</div>
+ </li>
+ </ul>
+ </div>
+</div>
<li>
<a href="#">
1line-toggle
- <div data-role="toggleswitch"/></div>
+ <div data-role="toggleswitch" data-icon="true"/></div>
</a>
</li>
<a href="#">
2line-toggle-setting
<span class="ui-li-text-sub">Subtext</span>
- <div data-role="toggleswitch"/></div>
+ <div data-role="toggleswitch" data-icon="true"/></div>
</a>
</li>
<a href="#">
2line-thumb1
<span class="ui-li-text-sub">Subtext</span>
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <img src="large_thumbnail.jpg" class="ui-li-bigicon">
</a>
</li>
<a href="#">
<span class="ui-li-text-sub">Subtext</span>
2line-sub-main-bigicon1
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <img src="large_thumbnail.jpg" class="ui-li-bigicon">
</a>
</li>
<li class="ui-li-has-multiline ui-li-thumbnail-right">
2line-thumb1
<span class="ui-li-text-sub">Subtext</span>
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <img src="large_thumbnail.jpg" class="ui-li-bigicon">
</li>
<li class="ui-li-has-multiline ui-li-thumbnail-right">
2line-thumb2
<span><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png"></span>
<span class="ui-li-text-sub"><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png">Subtext</span>
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <img src="large_thumbnail.jpg" class="ui-li-bigicon">
</li>
<li class="ui-li-has-multiline ui-li-thumbnail-right">
<span class="ui-li-text-sub">Subtext</span>
2line-sub-main-bigicon1
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <img src="large_thumbnail.jpg" class="ui-li-bigicon">
</li>
<li class="ui-li-has-multiline">
<li><a href="list-divider_normal.html">Normal divider</a></li>
<li><a href="list-divider_groupped.html">Groupped divider</a></li>
<li><a href="list-divider_check.html">Check divider</a></li>
- <li><a href="list-divider_expandable.html">Expandable divider</a></li>
- <li><a href="list-divider_checkexpandable.html">CheckExpandable divider</a></li>
-
+
<li data-role="list-divider">Etc...</li>
+ <li><a href="list-edit_field.html">Edit field</a></li>
<li><a href="list-bubble.html">bubble</a></li>
<li><a href="list-expandable.html">expandable list</a></li>
<li><a href="list-radio.html">Radio Button list</a></li>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" href="themes/default/" />
+ <script src="js/jquery.js"></script>
+ <script src="js/"></script>
+ <script src="theme.js"></script>
+ <script src="js/jquery.mobile.forms.button.extension.js"></script>
+ </head>
+<body>
+
+ <div data-role="page" id="NavigationbarMain" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>Naviframe</h1>
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li data-role="list-divider">Simple Naviframe Header Style</li>
+ <li><a href="naviframe_title_text.html">Title text</a></li>
+ <li><a href="naviframe_title_text_2_btn.html">Title text Button 2</a></li>
+ <li><a href="naviframe_title_text_1_btn.html">Title text Button 1</a></li>
+ <li><a href="naviframe_title_text_src.html">Image Title text</a></li>
+ <li><a href="naviframe_title_text_multiline.html">Title text Multiline</a></li>
+ <li><a href="naviframe_title_text_multiline_src.html">Image Title text Multiline</a></li>
+ <li><a href="naviframe_title_text_multiline_src_2_btn.html">Image Title text Multiline Button 02</a></li>
+ <li data-role="list-divider">Simple Naviframe Footer Style</li>
+ <li><a href="naviframe_footer_more.html">Footer more</a></li>
+ <li><a href="naviframe_footer_more_button.html">Footer with button</a></li>
+ <li data-role="list-divider">Old version</li>
+ <li><a href="#normalstyle">Normal style title</a></li>
+ <li><a href="#extendedstyle">Extended style title</a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+
+ <div data-role="page" id="normalstyle" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>Normal Title</h1>
+ </div>
+ <div data-role="content">
+ <ul data-role="listview">
+ <li><a href="#normal1btn">Title 1 button</a></li>
+ <li><a href="#normal2btn">Title 2 button</a></li>
+ <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
+ <li><a href="#normal3btn">Title 3 button</a></li>
+ <li><a href="#iconTitle">Icon + Title</a></li>
+ <li><a href="#customTitle1">Custom Title with button position: left</a></li>
+ <li><a href="#customTitle2">Custom Title with button position: right</a></li>
+ <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
+ <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
+ </ul>
+ </div>
+ </div>
+
+ <div data-role="page" id="normal1btn">
+ <div data-role="header" data-position="fixed">
+ <h1>Normal Title - 1Btn</h1>
+ <a>text1</a>
+ </div>
+ <div data-role="content">
+ <ul data-role="listview">
+ <li><a href="#normal1btn">Title 1 button</a></li>
+ <li><a href="#normal2btn">Title 2 button</a></li>
+ <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
+ <li><a href="#normal3btn">Title 3 button</a></li>
+ <li><a href="#iconTitle">Icon + Title</a></li>
+ <li><a href="#customTitle1">Custom Title with button position: left</a></li>
+ <li><a href="#customTitle2">Custom Title with button position: right</a></li>
+ <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
+ <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
+ </ul>
+ </div>
+ </div>
+
+ <div data-role="page" id="normal2btn">
+ <div data-role="header" data-position="fixed">
+ <h1>Normal Title - 2Btn</h1>
+ <a>text1</a>
+ <a>text2</a>
+ </div>
+ <div data-role="content">
+ <ul data-role="listview">
+ <li><a href="#normal1btn">Title 1 button</a></li>
+ <li><a href="#normal2btn">Title 2 button</a></li>
+ <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
+ <li><a href="#normal3btn">Title 3 button</a></li>
+ <li><a href="#iconTitle">Icon + Title</a></li>
+ <li><a href="#customTitle1">Custom Title with button position: left</a></li>
+ <li><a href="#customTitle2">Custom Title with button position: right</a></li>
+ <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
+ <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
+ </ul>
+ </div>
+ </div>
+
+ <div data-role="page" id="normal2btnicononly">
+ <div data-role="header" data-position="fixed">
+ <h1>Normal Title+2Buttons Icon only</h1>
+ <a data-icon="plus"></a>
+ <a data-icon="minus"></a>
+ </div>
+ <div data-role="content">
+ <ul data-role="listview">
+ <li><a href="#normal1btn">Title 1 button</a></li>
+ <li><a href="#normal2btn">Title 2 button</a></li>
+ <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
+ <li><a href="#normal3btn">Title 3 button</a></li>
+ <li><a href="#iconTitle">Icon + Title</a></li>
+ <li><a href="#customTitle1">Custom Title with button position: left</a></li>
+ <li><a href="#customTitle2">Custom Title with button position: right</a></li>
+ <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
+ <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
+ </ul>
+ </div>
+ </div>
+
+
+ <div data-role="page" id="normal3btn" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>Normal Title - 3Btn</h1>
+ <a>text1</a>
+ <a>text2</a>
+ <a>text3</a>
+ </div>
+ <div data-role="content">
+ <ul data-role="listview">
+ <li><a href="#normal1btn">Title 1 button</a></li>
+ <li><a href="#normal2btn">Title 2 button</a></li>
+ <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
+ <li><a href="#normal3btn">Title 3 button</a></li>
+ <li><a href="#iconTitle">Icon + Title</a></li>
+ <li><a href="#customTitle1">Custom Title with button position: left</a></li>
+ <li><a href="#customTitle2">Custom Title with button position: right</a></li>
+ <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
+ <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
+ </ul>
+ </div>
+ </div>
+
+ <div data-role="page" id="iconTitle">
+ <div data-role="header" data-position="fixed">
+ <img src="icon-tizen.png"/>
+ <h1>Icon Title</h1>
+ <a>text1</a>
+ </div>
+ <div data-role="content">
+ <ul data-role="listview">
+ <li><a href="#normal1btn">Title 1 button</a></li>
+ <li><a href="#normal2btn">Title 2 button</a></li>
+ <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
+ <li><a href="#normal3btn">Title 3 button</a></li>
+ <li><a href="#iconTitle">Icon + Title</a></li>
+ <li><a href="#customTitle1">Custom Title with button position: left</a></li>
+ <li><a href="#customTitle2">Custom Title with button position: right</a></li>
+ <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
+ <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
+ </ul>
+ </div>
+ </div>
+
+ <div data-role="page" id="customTitle1">
+ <div data-role="header" data-position="fixed">
+ <h1>Title with Left button</h1>
+ <a class="ui-btn-left">Left1</a>
+ <a class="ui-btn-left">Left2</a>
+ <a class="ui-btn-left">Left3</a>
+ </div>
+ <div data-role="content">
+ <ul data-role="listview">
+ <li><a href="#normal1btn">Title 1 button</a></li>
+ <li><a href="#normal2btn">Title 2 button</a></li>
+ <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
+ <li><a href="#normal3btn">Title 3 button</a></li>
+ <li><a href="#iconTitle">Icon + Title</a></li>
+ <li><a href="#customTitle1">Custom Title with button position: left</a></li>
+ <li><a href="#customTitle2">Custom Title with button position: right</a></li>
+ <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
+ <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
+ </ul>
+ </div>
+ </div>
+
+ <div data-role="page" id="customTitle2">
+ <div data-role="header" data-position="fixed">
+ <h1>Title with Right button</h1>
+ <a class="ui-btn-right">Right1</a>
+ <a class="ui-btn-right">Right2</a>
+ <a class="ui-btn-right">Right3</a>
+ </div>
+ <div data-role="content">
+ <ul data-role="listview">
+ <li><a href="#normal1btn">Title 1 button</a></li>
+ <li><a href="#normal2btn">Title 2 button</a></li>
+ <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
+ <li><a href="#normal3btn">Title 3 button</a></li>
+ <li><a href="#iconTitle">Icon + Title</a></li>
+ <li><a href="#customTitle1">Custom Title with button position: left</a></li>
+ <li><a href="#customTitle2">Custom Title with button position: right</a></li>
+ <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
+ <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
+ </ul>
+ </div>
+ </div>
+
+ <div data-role="page" id="customTitle3">
+ <div data-role="header" data-position="fixed">
+ <a class="ui-btn-left">Left</a>
+ <h1>Title with Left/Right button</h1>
+ <a class="ui-btn-right">Right1</a>
+ <a class="ui-btn-right">Right2</a>
+ </div>
+ <div data-role="content">
+ <ul data-role="listview">
+ <li><a href="#normal1btn">Title 1 button</a></li>
+ <li><a href="#normal2btn">Title 2 button</a></li>
+ <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
+ <li><a href="#normal3btn">Title 3 button</a></li>
+ <li><a href="#iconTitle">Icon + Title</a></li>
+ <li><a href="#customTitle1">Custom Title with button position: left</a></li>
+ <li><a href="#customTitle2">Custom Title with button position: right</a></li>
+ <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
+ <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
+ </ul>
+ </div>
+ </div>
+
+
+
+
+
+ <div data-role="page" id="extendedstyle" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>Extended Title</h1>
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="#extendedstyle2btn">2 Button</a></li>
+ <li><a href="#extendedstyle3btn">3 Button</a></li>
+ <li><a href="#extendedstyle4btn">4 Button</a></li>
+ <li><a href="#footerExtendedStyle">Footer Extended Style</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ </div>
+
+ <div data-role="page" id="extendedstyle2btn">
+ <div data-role="header" data-position="fixed">
+ <h1>Extended Title 2 Button </h1>
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup" data-type="horizontal">
+ <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment1" value="on" checked="checked" />
+ <label for="segment1">All</label>
+ <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment2" value="off" />
+ <label for="segment2">Call</label>
+ </fieldset>
+ </div>
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="#extendedstyle2btn">2 Button</a></li>
+ <li><a href="#extendedstyle3btn">3 Button</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ </div>
+
+ <div data-role="page" id="extendedstyle3btn">
+ <div data-role="header" data-position="fixed">
+ <h1>Extended Title 3 Button </h1>
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup" data-type="horizontal">
+ <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment71" value="on" checked="checked" />
+ <label for="segment71">All</label>
+ <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment72" value="off" />
+ <label for="segment72">Call</label>
+ <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment73" value="off" />
+ <label for="segment73">Message</label>
+ </fieldset>
+ </div>
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="#extendedstyle2btn">2 Button</a></li>
+ <li><a href="#extendedstyle3btn">3 Button</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ </div>
+
+ <div data-role="page" id="extendedstyle4btn">
+ <div data-role="header" data-position="fixed">
+ <h1>Extended Title 4 Button </h1>
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup" data-type="horizontal">
+ <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment71" value="on" checked="checked" />
+ <label for="segment71">All</label>
+ <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment72" value="off" />
+ <label for="segment72">Call</label>
+ <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment73" value="off" />
+ <label for="segment73">Message</label>
+ <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment74" value="off" />
+ <label for="segment74">Contact</label>
+ </fieldset>
+ </div>
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="#extendedstyle2btn">2 Button</a></li>
+ <li><a href="#extendedstyle3btn">3 Button</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ </div>
+
+ <div data-role="page" id="footerExtendedStyle">
+ <div data-role="header" data-position="fixed">
+ <h1>Extended Footer style</h1>
+ </div>
+ <div data-role="content">
+ <p> test page </p>
+ </div>
+ <div data-role="footer" data-position="fixed">
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup" data-type="horizontal">
+ <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment1" value="on" checked="checked" />
+ <label for="segment1">All</label>
+ <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment2" value="off" />
+ <label for="segment2">Call</label>
+ <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment3" value="off" />
+ <label for="segment3">Contact</label>
+ </fieldset>
+ </div>
+ <a>Edit</a>
+ </div>
+ </div>
+
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" href="themes/default/" />
+ <script src="js/jquery.js"></script>
+ <script src="js/"></script>
+ <script src="theme.js"></script>
+ <script src="js/jquery.mobile.forms.button.extension.js"></script>
+ </head>
+<body>
+
+<div data-role="page">
+ <div data-role="header" data-position="fixed">
+ <h1>Footer more</h1>
+ </div>
+ <div data-role="content">
+ <p>Footer more sample</p>
+ </div>
+ <div data-role="footer">
+ <a href="#pop_js" data-role="button" data-icon="naviframe-more" data-rel="popupwindow"></a>
+
+ <div id="pop_js" data-role="popupwindow" data-show-arrow="true">
+ <ul data-role="listview">
+ <li><a href="#" class="ui-btn-ctxpopup-close">Settings</a></li>
+ <li><a href="#" class="ui-btn-ctxpopup-close">Add to contact</a></li>
+ <li><a href="#" class="ui-btn-ctxpopup-close">Call log</a></li>
+ <li><a href="#" class="ui-btn-ctxpopup-close">Music</a></li>
+ <li><a href="#" class="ui-btn-ctxpopup-close">File manager</a></li>
+ <li><a href="naviframe.html" class="ui-btn-ctxpopup-close">Internal Link</a></li>
+ </ul>
+ </div>
+</div>
+
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" href="themes/default/" />
+ <script src="js/jquery.js"></script>
+ <script src="js/"></script>
+ <script src="theme.js"></script>
+ <script src="js/jquery.mobile.forms.button.extension.js"></script>
+ </head>
+<body>
+
+<div data-role="page">
+ <div data-role="header" data-position="fixed">
+ <h1>Footer more</h1>
+ </div>
+ <div data-role="content">
+ <p>Footer more sample</p>
+ </div>
+ <div data-role="footer">
+ <a href="#pop_js" data-role="button" data-icon="naviframe-more" data-rel="popupwindow"></a>
+
+ <div data-role="button" data-inline="true">Button1</div>
+ <div data-role="button" data-inline="true">Button2</div>
+
+ <div id="pop_js" data-role="popupwindow" data-show-arrow="true">
+ <ul data-role="listview">
+ <li><a href="#" class="ui-btn-ctxpopup-close">Settings</a></li>
+ <li><a href="#" class="ui-btn-ctxpopup-close">Add to contact</a></li>
+ <li><a href="#" class="ui-btn-ctxpopup-close">Call log</a></li>
+ <li><a href="#" class="ui-btn-ctxpopup-close">Music</a></li>
+ <li><a href="#" class="ui-btn-ctxpopup-close">File manager</a></li>
+ </ul>
+ </div>
+</div>
+
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" href="themes/default/" />
+ <script src="js/jquery.js"></script>
+ <script src="js/"></script>
+ <script src="theme.js"></script>
+ <script src="js/jquery.mobile.forms.button.extension.js"></script>
+ </head>
+<body>
+
+ <div data-role="page">
+ <div data-role="header" data-position="fixed">
+ <h1>Title Text</h1>
+ </div>
+ <div data-role="content">
+ <p>title text sample</p>
+ </div>
+ </div>
+
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" href="themes/default/" />
+ <script src="js/jquery.js"></script>
+ <script src="js/"></script>
+ <script src="theme.js"></script>
+ <script src="js/jquery.mobile.forms.button.extension.js"></script>
+ </head>
+<body>
+ <div data-role="page">
+ <div data-role="header" data-position="fixed">
+ <h1>Title text Button 01</h1>
+ <a data-icon="naviframe-plus"></a>
+ </div>
+ <div data-role="content">
+ <p>Title text Button 01 sample</p>
+ </ul>
+ </div>
+ </div>
+
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" href="themes/default/" />
+ <script src="js/jquery.js"></script>
+ <script src="js/"></script>
+ <script src="theme.js"></script>
+ <script src="js/jquery.mobile.forms.button.extension.js"></script>
+ </head>
+<body>
+ <div data-role="page">
+ <div data-role="header" data-position="fixed">
+ <h1>Title text Button 02</h1>
+ <a data-icon="naviframe-edit"></a>
+ <a data-icon="naviframe-cancel"></a>
+ </div>
+ <div data-role="content">
+ <p>Title text Button 02 sample</p>
+ </ul>
+ </div>
+ </div>
+
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" href="themes/default/" />
+ <script src="js/jquery.js"></script>
+ <script src="js/"></script>
+ <script src="theme.js"></script>
+ <script src="js/jquery.mobile.forms.button.extension.js"></script>
+ </head>
+<body>
+
+ <div data-role="page">
+ <div data-role="header" data-position="fixed">
+ <h1>Title Text multiline</h1>
+ <span class="ui-title-text-sub">tizen@samsung.com</span>
+ </div>
+ <div data-role="content">
+ <p>Title text Multiline sample</p>
+ </div>
+ </div>
+
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" href="themes/default/" />
+ <script src="js/jquery.js"></script>
+ <script src="js/"></script>
+ <script src="theme.js"></script>
+ <script src="js/jquery.mobile.forms.button.extension.js"></script>
+ </head>
+<body>
+
+ <div data-role="page">
+ <div data-role="header" data-position="fixed">
+ <img src="icon-tizen.png"/>
+ <h1>Image Title Text multiline</h1>
+ <span class="ui-title-text-sub">tizen@samsung.com</span>
+ </div>
+ <div data-role="content">
+ <p>Image Title text Multiline sample</p>
+ </div>
+ </div>
+
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" href="themes/default/" />
+ <script src="js/jquery.js"></script>
+ <script src="js/"></script>
+ <script src="theme.js"></script>
+ <script src="js/jquery.mobile.forms.button.extension.js"></script>
+ </head>
+<body>
+
+ <div data-role="page">
+ <div data-role="header" data-position="fixed">
+ <img src="icon-tizen.png"/>
+ <h1>Image Title Text multiline Button 02</h1>
+ <span class="ui-title-text-sub">tizen@samsung.com</span>
+ <a data-icon="naviframe-more"></a>
+ <a data-icon="naviframe-edit"></a>
+ </div>
+ <div data-role="content">
+ <p>Image Title text Multiline Button 02 sample</p>
+ </div>
+ </div>
+
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" href="themes/default/" />
+ <script src="js/jquery.js"></script>
+ <script src="js/"></script>
+ <script src="theme.js"></script>
+ <script src="js/jquery.mobile.forms.button.extension.js"></script>
+ </head>
+<body>
+
+ <div data-role="page">
+ <div data-role="header" data-position="fixed">
+ <img src="icon-tizen.png"/>
+ <h1>Image Title Text multiline</h1>
+ </div>
+ <div data-role="content">
+ <p>Image Title text Multiline sample</p>
+ </div>
+ </div>
+
+
+</body>
+</html>
</div>
<div class="content" data-role="content">
<ul data-role="listview" data-icon="1line-textonly">
+ <li><a href="#center_social_style1" data-inline="true" data-rel="popup" data-position-to="window">Social Magazine style1</a></li>
+ <li><a href="#center_social_style2" data-inline="true" data-rel="popup" data-position-to="window">Social Magazine style2</a></li>
<li><a href="#center_info" data-inline="true" data-rel="popup" data-position-to="window">Center info popup</a></li>
<li><a href="#center_title" data-inline="true" data-rel="popup" data-position-to="window">Center title popup</a></li>
<li><a href="#center_basic_1btn" data-inline="true" data-rel="popup" data-position-to="window">Center basic 1 button popup</a></li>
<li><a href="#center_liststyle_3btn" data-inline="true" data-rel="popup" data-position-to="window">Center_list style 3 button popup</a></li>
</ul>
+
+
+ <!-- popup basic+text+1button -->
+ <div id="center_social_style1" data-role="popup" class="center_liststyle_2btn">
+ <p class="ui-popup-title">
+ Font Size
+ </p>
+ <div class="ui-popup-scroller-bg" data-scroll="y" style="height:auto">
+ <ul data-role="listview">
+ <li class="ui-li-has-radio" id="text_fontSmall">
+ <a href="#">
+ <input type="radio" name="radio-choice-1" id="fontSmall" value="choice-1"/>
+ text_Small</a>
+ </li>
+ <li class="ui-li-has-radio" id="text_fontMedium">
+ <a href="#">
+ <input type="radio" name="radio-choice-1" id="fontMedium" value="choice-2"/>
+ text_Medium</a>
+ </li>
+ <li class="ui-li-has-radio" id="text_fontLarge">
+ <a href="#">
+ <input type="radio" name="radio-choice-1" id="fontLarge" value="choice-3"/>
+ text_Large</a>
+ </li>
+ </ul>
+ </div>
+ <div class="ui-popup-button-bg">
+ <div data-role="button" data-inline="true">OK</div>
+ <div data-role="button" data-inline="true">Cancel</div>
+ <!--<input type="button" value="OK" id="popupFontSizeOKBtn" />
+ <input type="button" value="Cancel" id="popupfontSizeCancelBtn"/>-->
+ </div>
+ </div>
+
+ <div id="center_social_style2" data-role="popup" class="center_title_2btn">
+ <p class="ui-popup-title">
+ Create new category
+ </p>
+ <p class="ui-popup-text">
+ <input type="text" id="newCategoryPopupInput" name="newCategoryName" size="30" />
+ </p>
+ <div class="ui-popup-button-bg">
+ <div data-role="button" data-inline="true">OK</div>
+ <div data-role="button" data-inline="true">Cancel</div>
+<!-- <input type="button" id="createNewCategoryPopupOKBtn" value="OK"/>
+ <input type="button" id="createNewCategoryPopupCancelBtn" value="Cancel"/>-->
+ </div>
+ </div>
+
<!-- text only -->
<div id="center_info" data-role="popup" class="center_info">
<div class="ui-popup-text"> <p>
to the parent windows
</p>
<div class="ui-popup-button-bg">
- <input type="button" value="Text Button" />
- <input type="button" value="Text Button" />
+<!-- <input type="button" value="Text Button" />
+ <input type="button" value="Text Button" />-->
+ <div data-role="button" data-inline="true">Cancel</div>
+ <div data-role="button" data-inline="true">Cancel</div>
</div>
</div>
to the parent windows
</p>
<div class="ui-popup-button-bg">
- <input type="button" value="Button1" />
+<!-- <input type="button" value="Button1" />
<input type="button" value="Button2" />
- <input type="button" value="Button3" />
+ <input type="button" value="Button3" />-->
+ <div data-role="button" data-inline="true">Cancel</div>
+ <div data-role="button" data-inline="true">Cancel</div>
+ <div data-role="button" data-inline="true">Cancel</div>
</div>
</div>
to the parent windows
</p>
<div class="ui-popup-button-bg">
- <input type="button" value="Text Button" />
+<!-- <input type="button" value="Text Button" />-->
+ <div data-role="button" data-inline="true">Cancel</div>
</div>
</div>
to the parent windows
</p>
<div class="ui-popup-button-bg">
- <input type="button" value="Text Button" />
- <input type="button" value="Text Button" />
+<!-- <input type="button" value="Text Button" />
+ <input type="button" value="Text Button" />-->
+ <div data-role="button" data-inline="true">Cancel</div>
+ <div data-role="button" data-inline="true">Cancel</div>
</div>
</div>
to the parent windows
</p>
<div class="ui-popup-button-bg">
- <input type="button" value="Button1" />
+<!-- <input type="button" value="Button1" />
<input type="button" value="Button2" />
- <input type="button" value="Button3" />
+ <input type="button" value="Button3" />-->
+ <div data-role="button" data-inline="true">Cancel</div>
+ <div data-role="button" data-inline="true">Cancel</div>
+ <div data-role="button" data-inline="true">Cancel</div>
</div>
</div>
<h1>Switch</h1>
</div>
<div class="content" data-role="content">
- <div id="switch-1" data-role="toggleswitch" data-checked="false"></div>
- <p/>
+ <p>Normal switches:</p>
<div id="switch-2" data-role="toggleswitch"></div>
+ <br>
+ <p>Circle switches:</p>
+ <div id="switch-1" data-role="toggleswitch" data-icon="true" data-checked="false"></div>
+ <div id="switch-2" data-role="toggleswitch" data-icon="true" data-checked="true"></div>
+ <br>
<p>Coordinated switches:</p>
<div id="switch-1-coord" data-role="toggleswitch"></div>
+ <br>
<div id="switch-2-coord" data-role="toggleswitch"></div>
</div> <!-- /content -->
<div data-role="footer">
buttonClass += o.corners ? " ui-btn-corner-all" : "";
+ // To distinguish real buttons
-+ if( el.jqmData("role") == "button" || e.tagName == "BUTTON" || e.tagName == "A" ){
++ if( el.jqmData("role") == "button" || e.tagName == "BUTTON" || e.tagName == "DIV" ){
+ buttonClass += " ui-btn-box-" + o.theme;
+ }
+
+++ /dev/null
-From 351740d23e76316fd82cc6ae0736b37f8de0d16f Mon Sep 17 00:00:00 2001
-From: Minkyu Kang <mk7.kang@samsung.com>
-Date: Tue, 23 Oct 2012 18:14:15 +0900
-Subject: [PATCH] JQM: listview: don't trigger updatelayout when keyup event
- of filter
-
-Change-Id: I780a6bf3ff9bbeb7a421249ac33ff04da46d60b6
-Signed-off-by: Minkyu Kang <mk7.kang@samsung.com>
----
- .../js/jquery.mobile.listview.js | 3 ---
- 1 file changed, 3 deletions(-)
-
-diff --git a/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.listview.js b/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.listview.js
-index b72c8b8..bb73015 100644
---- a/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.listview.js
-+++ b/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.listview.js
-@@ -97,9 +97,6 @@ $.widget( "mobile.listview", $.mobile.widget, {
- .not(".ui-li-icon")
- .addClass( "ui-corner-bl" );
- }
-- if ( !create ) {
-- this.element.trigger( "updatelayout" );
-- }
- },
-
- // This is a generic utility method for finding the first
---
-1.7.9.5
-
Name: web-ui-fw
-Version: 0.1.57
+Version: 0.1.61
Release: 0
Summary: Tizen Web UI Framework Library
Group: Development/Other
Tizen Web UI Framework Theme : tizen-gray
###############################
-%package -n web-ui-fw-theme-tizen-black
-BuildArch: noarch
-Summary: Tizen Web UI Framework Theme : tizen-black
-%Description -n web-ui-fw-theme-tizen-black
- Tizen Web UI Framework Theme : tizen-black
-%files -n web-ui-fw-theme-tizen-black
-%manifest web-ui-fw-theme-tizen-black.manifest
-/usr/share/tizen-web-ui-fw/*/themes/tizen-black
-
-###############################
%package -n web-ui-fw-theme-tizen-white
BuildArch: noarch
Summary: Tizen Web UI Framework Theme : tizen-white
%files -n web-ui-fw-theme-tizen-white
%manifest web-ui-fw-theme-tizen-white.manifest
/usr/share/tizen-web-ui-fw/*/themes/tizen-white
+/usr/share/tizen-web-ui-fw/*/themes/tizen-tizen
###############################
%package -n web-ui-fw-theme-default
###############################
%changelog
+* Fri Nov 09 2012 Youmin Ha <youmin.ha@samsung.com> 0.1.61
+- FIX:
+ - Many widgets: New UX 0.6 theme implementation
+ - widgetex: init speed up
+ - scrollview: fix scrollbar and scale animation
+ - scrollview: fix scroll position when updatelayout is triggered
+ - header/footer: make textselection disable, except input type="text"
+
+* Wed Nov 07 2012 Youmin Ha <youmin.ha@samsung.com> 0.1.60
+- FIX:
+ - Remove tizen-black theme package description
+
+* Tue Nov 06 2012 Youmin Ha <youmin.ha@samsung.com> 0.1.59
+- FIX:
+ - Fix theme name to meet the change of system theme name: white->tizen
+ - Popupwindow: fix left position
+ - Remove black theme
+ - footer: remove label, legend drawing
+- Spec changes:
+ - UX guide v0.4 : button, layout
+
* Wed Oct 24 2012 Youmin Ha <youmin.ha@samsung.com> 0.1.57
- FIX:
- expandablelist: icon color fix
version: '0.1',
theme: "tizen-white",
viewportScale: false,
- defaultFontSize: 16,
+ defaultFontSize: 22,
minified: false
},
}
} );
},
- getScaleFactor: function ( ) {
- var factor = navigator.scale,
- width = 0,
- defaultWidth = 720;
-
- if ( !factor ) {
- width = screen.width < screen.height ? screen.width : screen.height;
- factor = width / defaultWidth;
- if ( factor > 1 ) {
- // NOTE: some targets(e.g iPad) need to set scale equal or less than 1.0
- factor = 1;
- }
- }
- console.log( "ScaleFactor: " + factor );
- return factor;
- },
isMobileBrowser: function ( ) {
var mobileIdx = window.navigator.appVersion.indexOf("Mobile"),
isMobile = -1 < mobileIdx;
/** Set viewport meta tag for mobile devices.
*
- * @param[in] viewportWidth Viewport width. 'device-dpi' is also allowed.
* @param[in] useAutoScale If true, cculate & use scale factor. otherwise, scale factor is 1.
- * @param[in] useDeviceDpi If true, add 'target-densityDpi=device-dpi' to viewport meta content.
*/
- setViewport: function ( viewportWidth, useAutoScale, useDeviceDpi ) {
+ setViewport: function ( useAutoScale ) {
var meta,
- scale = 1,
head,
content,
- ratio,
- threshold = 15,
- standardWidth = 360,
- screenWidth = screen.width;
+ screenWidth = window.outerWidth;
+ // TODO : Above code will be replaced by below codes. But screen.availWidth has a webkit bug at this moment.
+ // screenWidth = screen.availWidth;
// Do nothing if viewport setting code is already in the code.
$( "meta[name=viewport]" ).each( function ( ) {
});
if( meta ) {
content = $( meta ).prop( "content" );
- if ( content.indexOf( "device-width" ) > 0
- && content.indexOf( "device-dpi" ) > 0 ) {
- ratio = screenWidth > standardWidth ? ( screenWidth/standardWidth) : 1;
- $.vmouse.moveDistanceThreshold = threshold * ratio;
- $.vmouse.clickDistanceThreshold = threshold * ratio;
- }
return; // Ignore viewport setting, when viewport is already set.
}
// Set meta tag
meta = document.createElement( "meta" );
if ( meta ) {
- scale = useAutoScale ? this.util.getScaleFactor( ) : scale;
meta.name = "viewport";
- meta.content = "width=" + viewportWidth + ", initial-scale=" + scale + ", maximum-scale=" + scale + ", user-scalable=0";
- if ( useDeviceDpi ) {
- meta.content += ", target-densityDpi=device-dpi";
- }
+ meta.content = useAutoScale ? "width=" + screenWidth + ", user-scalable=no" : "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no";
console.log( meta.content );
head = document.getElementsByTagName( 'head' ).item( 0 );
head.insertBefore( meta, head.firstChild );
-
- // TODO : change threshold when scaleFactor is changed. Reference line 354-356
}
},
* param[in] desired font-size / base font-size.
*/
scaleBaseFontSize: function ( themeDefaultFontSize, ratio ) {
+ console.log( "themedefaultfont size: " + themeDefaultFontSize + ", ratio: " + ratio );
var scaledFontSize = Math.round( themeDefaultFontSize * ratio );
$( 'html.ui-mobile' ).css( { 'font-size': scaledFontSize + "px" } );
},
setScaling: function ( ) {
- var baseWidth = 720, // Winset GUI Guide is 720 HD.
- standardWidth = 360,
+ var baseWidth = 360,
+ screenWidth = window.outerWidth,
+ // TODO : Above code will be replaced by below codes. But screen.availWidth has a webkit bug at this moment.
+ // screenWidth = screen.availWidth,
themeDefaultFontSize;
+ // this.frameworkData.defaultFontSize is from theme.js
themeDefaultFontSize = this.frameworkData.defaultFontSize;
-
+ console.log( "setScaling themeDefaultFontSize: " + themeDefaultFontSize );
$( 'body' ).attr( 'data-tizen-theme-default-font-size', themeDefaultFontSize );
if ( this.frameworkData.viewportScale ) {
- // Use viewport scaling with base font-size
- // NOTE: No font-size setting is needed.
- this.setViewport( baseWidth, true, true );
- } else {
// Fixed viewport scale(=1.0) with scaled font size
- this.setViewport( "device-width", false, undefined );
- this.scaleBaseFontSize( themeDefaultFontSize, parseFloat( standardWidth / baseWidth ) );
+ this.setViewport( true );
+ this.scaleBaseFontSize( themeDefaultFontSize, parseFloat( screenWidth / baseWidth ) );
+ } else {
+ // Use base font-size (18px)
+ // NOTE: No font-size setting is needed.
+ this.setViewport( false );
}
}
};
@height_buttonEdit: 74 * @unit_base;
@width_buttonEdit: @height_buttonEdit;
-.ui-btn { display: block; text-align: center; cursor:pointer; position: relative; /*margin: .2em 0px;*/ padding: 0; vertical-align: middle; } /* wongi_1018 : For button align. */
+.ui-btn { display: block; text-align: center; cursor:pointer; position: relative; /*margin: .2em 0px; padding: 0; */ vertical-align: middle; } /* wongi_1018 : For button align. */
.ui-btn:focus, .ui-btn:active { outline: none; }
.ui-header .ui-btn, .ui-footer .ui-btn, .ui-bar .ui-btn { display: inline-block; font-size: 13 * @unit_base; margin: 0; }
.ui-btn-inline { display: inline-block; }
-.ui-btn-inner { padding: .5em 36 * @unit_base; display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; position: relative; zoom: 1; }
+.ui-btn-inner { padding: .5em 18 * @unit_base; display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; position: relative; zoom: 1; }
.ui-header .ui-btn-inner, .ui-footer .ui-btn-inner, .ui-bar .ui-btn-inner { padding: 0.7em 0 0.7em; } /* wongi_1024 : Button text middle align */
.ui-header .ui-btn-inner.ui-btn-icon-only , .ui-footer .ui-btn-inner, .ui-bar .ui-btn-inner.ui-btn-icon-only { padding: .4em 8 * @unit_base .5em; } /* wongi_1024 : Button text middle align */
.ui-btn-icon-notext { width: 24 * @unit_base; height: 24 * @unit_base; }
.ui-btn-icon-right .ui-icon { right: 10 * @unit_base; }
.ui-btn-icon-top .ui-icon { top: 0 * @unit_base; margin-top: 0; }
.ui-btn-icon-bottom .ui-icon { bottom: 0 * @unit_base; }
-.ui-header .ui-btn-icon-left .ui-icon,
-.ui-footer .ui-btn-icon-left .ui-icon,
-.ui-bar .ui-btn-icon-left .ui-icon { left: @style-back-btn-left; } /* SLP Default Footer : Jinhyuk */
.ui-header .ui-btn-icon-right .ui-icon,
.ui-footer .ui-btn-icon-right .ui-icon,
.ui-bar .ui-btn-icon-right .ui-icon { right: 4 * @unit_base; }
.ui-li .ui-btn.ui-btn-icon_only
{
top: 50%;
- margin-top: -32 * @unit_base;
+ margin-top: (-32 * 1/2) * @unit_base;
}
.ui-li .ui-btn .ui-btn-inner.ui-btn-hastxt
{
padding: 0.2em 0.5em;
}
+
+.ui-btn.ui-btn-box-s.ui-btn-down-s .ui-btn-inner
+{
+ .LESSbutton_inner_pressstyle;
+}
+
+.ui-header .ui-btn-box-s,
+.ui-header .ui-btn-box-s .ui-btn-inner,
+.ui-header .ui-btn.ui-btn-box-s.ui-btn-down-s .ui-btn-inner,
+.ui-btn.ui-btn-back.ui-btn-up-s .ui-btn-inner,
+.ui-btn.ui-btn-back.ui-btn-hover-s .ui-btn-inner,
+.ui-btn.ui-btn-back.ui-btn-down-s .ui-btn-inner
+{
+ background: transparent;
+ border: none;
+ box-shadow: none;
+}
+
+.ui-scroll-jump-top-bg .ui-btn-icon-left .ui-btn-inner
+{
+ padding-left: 0;
+}
+/* Circle Icon BG : data-iconbg = "circle" */
+.ui-btn.ui-btn-box-s.ui-btn-icon_only
+{
+/* background: transparent;
+ border: 0px;*/
+}
+.ui-btn.ui-btn-box-s .ui-btn-inner.ui-btn-corner-all.ui-btn-icon-only
+{
+ .LESSborder-radius-all(1.0em);
+}
.ui-btn-icon-top .ui-btn-inner.ui-btn-hastxt, .ui-li .ui-btn-icon-top .ui-btn-inner.ui-btn-hastxt
{
padding-top: 52 * @unit_base;
/* wongi_1017 : Icons */
/* icons sizing */
-.ui-btn .ui-icon { width: 64 * @unit_base; height: 64 * @unit_base; }
+.ui-btn .ui-icon { width: 32 * @unit_base ; height: 32 * @unit_base; }
.ui-btn.ui-btn-edit .ui-icon { width: @width_buttonEdit; height: @height_buttonEdit; }
/* Padding for Icon with text */
}
.ui-btn-box-s.ui-btn-icon-left .ui-icon, .ui-btn-box-s.ui-btn-icon-right .ui-icon
{
- margin-top: -64 * @unit_base / 2;
+ margin-top: -32 * @unit_base / 2;
top: 50%;
}
.ui-btn-box-s.ui-btn-icon-top .ui-icon, .ui-btn-box-s.ui-btn-icon-bottom .ui-icon
.ui-icon-bg {.tizen-icon-common; background-image: url(images/00_btn_circle_bg_normal.png); z-index:0; }
.ui-icon-reveal {.tizen-icon-common; background-image: url(images/00_button_reveal.png); }
-.ui-icon-reveal-left {.tizen-icon-common; background-image: url(images/00_button_reveal_left.png); }
+.ui-icon-reveal-left {.tizen-icon-common; background-image: url(images/00_button_reveal_left.png); }
.ui-icon-closed {.tizen-icon-common; background-image: url(images/00_button_expand_closed.png); }
.ui-icon-opened {.tizen-icon-common; background-image: url(images/00_button_expand_opened.png); }
.ui-icon-info {.tizen-icon-common; background-image: url(images/00_button_info.png); }
.ui-icon-rename {.tizen-icon-common; background-image: url(images/00_button_rename.png); }
.ui-icon-call {.tizen-icon-common; background-image: url(images/00_button_call.png); }
.ui-icon-warning {.tizen-icon-common; background-image: url(images/00_button_warning.png); }
-.ui-icon-plus {.tizen-icon-common; background-image: url(images/00_button_plus_normal.png); }
-.ui-icon-minus {.tizen-icon-common; background-image: url(images/00_button_minus_normal.png); }
+.ui-icon-plus {.tizen-icon-common; background-image: url(images/00_button_plus.png); }
+.ui-icon-minus {.tizen-icon-common; background-image: url(images/00_button_expand_minus.png); }
.ui-icon-cancel {.tizen-icon-common; background-image: url(images/00_button_cancel.png); }
.ui-icon-send {.tizen-icon-common; background-image: url(images/00_button_send.png); }
.ui-icon-favorite {.tizen-icon-common; background-image: url(images/00_winset_icon_favorite_on.png); }
.ui-icon-editminus {.tizen-icon-common; background-image: url(images/00_button_icon_minus.png); top : -@height_buttonEdit/2;}
.ui-icon-editplus {.tizen-icon-common; background-image: url(images/00_button_icon_plus.png); top : -@height_buttonEdit/2;}
-/* Header back btn : Jinjyuk */
-.ui-btn-up-s .ui-icon-header-back-btn{
- width: 56 * @unit_base;
- height: 56 * @unit_base;
-
- background-repeat: no-repeat;
- background-size: 100% 100%;
-
- .LESSbtn-arrow-position;
- background-image: url(images/00_winset_Back.png);
-}
-
-.ui-btn-down-s, .ui-btn-hover-s {
- .ui-icon-header-back-btn{
- width: 56 * @unit_base;
- height: 56 * @unit_base;
-
- background-repeat: no-repeat;
- background-size: 100% 100%;
-
- .LESSbtn-arrow-position;
- background-image: url(images/00_winset_Back.png);
- }
-}
-
-.ui-header {
- .ui-btn-down-s, .ui-btn-hover-s, .ui-btn-up-s {
- .ui-icon-header-back-btn {
- top : @style-back-btn-arrow-top;
- }
- }
-}
-
-.ui-icon-header-back-btn{
- .LESSbackground-size(48 * @unit_base, 38 * @unit_base);
- width: 48 * @unit_base;
- height: 38 * @unit_base;
-}
.ui-icon-expandable-divider-opened {
width: 42 * @unit_base;
.ui-btn-down-s .ui-icon-opened {.tizen-icon-common; background-image: url(images/00_button_expand_opened_press.png); }
.ui-btn-down-s .ui-icon-info {.tizen-icon-common; background-image: url(images/00_button_info_press.png); }
.ui-btn-down-s .ui-icon-rename {.tizen-icon-common; background-image: url(images/00_button_rename_press.png); }
-.ui-btn-down-s .ui-icon-call {.tizen-icon-common; background-image: url(images/00_button_call_press.png); }
+.ui-btn-down-s .ui-icon-call {.tizen-icon-common; background-image: url(images/00_button_call.png); }
.ui-btn-down-s .ui-icon-warning {.tizen-icon-common; background-image: url(images/00_button_warning_press.png); }
.ui-btn-down-s .ui-icon-plus {.tizen-icon-common; background-image: url(images/00_button_plus_press.png); }
.ui-btn-down-s .ui-icon-minus {.tizen-icon-common; background-image: url(images/00_button_minus_press.png); }
.ui-btn-inner.ui-btn-icon-only
{
- padding: 32 * @unit_base 32 * @unit_base;
+ padding: 16 * @unit_base 16 * @unit_base;
}
.ui-btn-icon-only .ui-btn-text
padding: @width_buttonEdit/2 @height_buttonEdit/2;
}
-/* Circle Icon BG : data-iconbg = "circle" */
-.ui-btn-corner-all.ui-btn-corner-circle
+.ui-btn.ui-btn-corner-all
{
- .LESSborder-radius-all(1.0em); //wongi_1018
+ .LESSborder-radius-all(0.3em);
}
/* No BG button : data-iconbg = "nobg" */
+
+.ui-btn.ui-btn-corner-all.ui-btn-icon_only
+{
+ .LESSborder-radius-all(1em);
+}
+
.ui-btn.ui-btn-icon-nobg, .ui-btn .ui-btn-icon-nobg
{
background: transparent;
//.ui-checkbox .ui-btn-icon-left .ui-icon, .ui-radio .ui-btn-icon-left .ui-icon {left: 15px; }
//.ui-checkbox .ui-btn-icon-right .ui-icon, .ui-radio .ui-btn-icon-right .ui-icon {right: 15px; }
-.ui-icon-radio-off {
- background-color: transparent;
-}
-
-//font size: 42....
-@checkbox-icon-left: (16*@unit_base); //16
+//font size: 21....
+@checkbox-radio-all-height: (32*@unit_base); //the biggest height.
-@checkbox-radio-all-height: (80*@unit_base); //on-off style is the biggest.
+@checkbox-radio-size-width: (32*@unit_base);
+@checkbox-radio-size-height: (32*@unit_base);
-@checkbox-radio-size-width: (42*@unit_base);
-@checkbox-radio-size-height: (42*@unit_base);
+@favorite-size-width: (32*@unit_base);
+@favorite-size-height: (32*@unit_base);
-@favorite-size-width: (64*@unit_base);
-@favorite-size-height: (64*@unit_base);
+@checkbox-radio-icon-internal-bottom: (-@checkbox-radio-size-height/2); //-icon size/2
+@favorite-icon-internal-bottom: (-@favorite-size-height/2); //-icon size/2
-@checkbox-radio-icon-internal-bottom: (-@checkbox-radio-size-height/2); //-icon size/2 (42/2)
-@favorite-icon-internal-bottom: (-@favorite-size-height/2); //-icon size/2 (64/2)
-
-@icon-left-margin: (16*@unit_base);
-@checkbox-radio-label-left: (@checkbox-radio-size-width + 2*@icon-left-margin); //16+42+16
-@favorite-label-left: (@favorite-size-width + 2*@icon-left-margin); //16+64+16
+@icon-left-margin: (8*@unit_base);
+@checkbox-radio-label-left: (@checkbox-radio-size-width/2 + @icon-left-margin);
+@favorite-label-left: (@favorite-size-width/2 + @icon-left-margin);
.ui-checkbox, .ui-radio {
- height: @checkbox-radio-all-height;
+ height: @checkbox-radio-all-height;
position: relative;
margin: 0;
- z-index: 1;
-
+
//clear btn basic setting
.LESSclear-btn-basic-setting();
input {
- position: absolute;
+ position: absolute;
left: -10000px;
height: 100%;
- outline: 0 !important;
- z-index: 0;
+ outline: 0 !important;
}
- .ui-btn {
+ .ui-btn {
height: 100%;
- margin: 0;
- text-align: left;
- z-index: 2;
+ margin: 0;
+ text-align: left;
}
- .ui-btn.ui-btn-icon-left {
+ .ui-btn.ui-btn-icon-left {
display: block;
.ui-btn-inner {
+ min-width: 40*@unit_base; // TODO: check this after layout done.
display: inline-block;
line-height: @checkbox-radio-all-height;
padding: 0 16*@unit_base 0 16*@unit_base;
.ui-btn-text {
display: inline-block;
vertical-align: middle;
- margin-left: 40 * @unit_base;
min-height: @checkbox-radio-size-height;
}
+ /* TODO : after button fixed, recheck! */
+ .ui-btn-text.ui-btn-text-padding-left {
+ padding-left: @checkbox-radio-label-left; //for test
+ }
.ui-icon {
- position: absolute;
+ position: absolute;
top: 50%;
- left: 16 * @unit_base;
- width: @checkbox-radio-size-width;
+ width: @checkbox-radio-size-width;
height: @checkbox-radio-size-height;
- margin-top: @checkbox-radio-icon-internal-bottom;
+ margin-top: @checkbox-radio-icon-internal-bottom;
}
}
}
left: -10000px;
height: 100%;
outline: 0 !important;
- z-index: 1;
}
.ui-btn.ui-btn-icon-left {
.ui-btn-text {
display: inline-block;
vertical-align: middle;
- margin-left: @favorite-label-left;
+ //margin-left: @favorite-label-left;
+ }
+ /* TODO : after button fixed, recheck! */
+ .ui-btn-text.ui-btn-text-padding-left {
+ padding-left: @favorite-label-left;
}
.ui-icon {
position: absolute;
top: 50%;
width: @favorite-size-width;
height: @favorite-size-height;
- margin-top: @favorite-icon-internal-bottom;
+ margin-top: @favorite-icon-internal-bottom;
}
}
}
}
-/* put img inside of checkbox(normal, favorite, on&off style) */
-@checkbox-radio-size-width: (42*@unit_base);
-@checkbox-radio-size-height: (42*@unit_base);
-
-@favorite-size-width: (64*@unit_base);
-@favorite-size-height: (64*@unit_base);
+/* put img inside of checkbox(normal, favorite style) */
.ui-icon-checkbox-off, .ui-icon-checkbox-on,
.favorite .ui-icon-checkbox-off, .favorite .ui-icon-checkbox-on,
.ui-icon-radio-off {
width: @checkbox-radio-size-width;
height: @checkbox-radio-size-height;
- background-image: url(images/00_button_radio_normal2.png);
+ background-image: url(images/00_button_radio.png);
}
.ui-icon-radio-on {
width: @checkbox-radio-size-width;
height: @checkbox-radio-size-height;
- background-image: url(images/00_button_radio_normal1.png);
+ background-image: url(images/00_button_radio_select.png), url(images/00_button_radio.png);
}
.ui-icon-radio-on-press {
width: @checkbox-radio-size-width;
height: @checkbox-radio-size-height;
- background-image: url(images/00_button_radio_press2.png);
+ background-image: url(images/00_button_radio.png);
}
.ui-icon-radio-off-press {
width: @checkbox-radio-size-width;
height: @checkbox-radio-size-height;
- background-image: url(images/00_button_radio_press1.png);
+ background-image: url(images/00_button_radio.png);
}
@search-bar-padding: (16*@unit_base);\r
\r
label.ui-input-text {\r
- font-size: 32 * @unit_base;\r
- line-height: 1.4;\r
+ font-size: 22 * @unit_base;\r
+ line-height: 1.2;\r
display: block;\r
font-weight: normal;\r
margin: 0 0 .3em;\r
background-image: none;\r
padding: .4em;\r
line-height: 1.4;\r
- font-size: 32 * @unit_base;\r
+ font-size: 16 * @unit_base;\r
display: block;\r
}\r
input.ui-input-text {\r
.ui-input-search {\r
position: relative;\r
\r
- padding-right : 74 * @unit_base;\r
- padding-left : 74 * @unit_base;\r
+ padding-right : 30 * @unit_base;\r
+ padding-left : 30 * @unit_base;\r
\r
input.ui-input-text {\r
width : 100%;\r
background: transparent none;\r
}\r
.ui-btn-icon-notext.ui-input-clear {\r
- width: 70 * @unit_base;\r
- height: 70 * @unit_base;\r
+ width: 30 * @unit_base;\r
+ height: 30 * @unit_base;\r
.ui-btn-inner {\r
- padding : 16 * @unit_base;\r
+ padding : 4 * @unit_base;\r
}\r
}\r
.ui-icon-deleteSearch {\r
- width: 38 * @unit_base;\r
- height: 38 * @unit_base;\r
+ width: 22 * @unit_base;\r
+ height: 22 * @unit_base;\r
}\r
\r
.ui-input-clear {\r
position: absolute;\r
top: 0px;\r
left: 0px;\r
- width : 42 * @unit_base;\r
- height : 42 * @unit_base;\r
- margin: 16 * @unit_base;\r
+ width : 22 * @unit_base;\r
+ height : 22 * @unit_base;\r
+ margin: 4 * @unit_base;\r
}\r
\r
\r
.LESSborder-radius-all(.3em);\r
}\r
.ui-input-search {\r
- font-size : 32 * @unit_base;\r
+ font-size : 16 * @unit_base;\r
display : block;\r
position: relative;\r
\r
background-color: @color_searchbar_input_field_bg;\r
.ui-input-text {\r
- height: 74 * @unit_base;\r
+ height: 30 * @unit_base;\r
padding : 0px;\r
\r
margin-right : 38 * @unit_base;\r
}\r
\r
.ui-header .input-search-bar {\r
- padding-top : 16 * @unit_base;\r
- padding-bottom : 16 * @unit_base;\r
+ padding-top : 13 * @unit_base;\r
+ padding-bottom : 13 * @unit_base;\r
}\r
\r
+.ui-image-search {\r
+ background-image: url(images/00_search_icon.png);\r
+ background-repeat: no-repeat;\r
+ background-size : 100% 100%;\r
+}\r
+\r
+.ui-icon-deleteSearch {\r
+ background-image: url(images/00_Edit_Field_clear.png);\r
+ background-repeat: no-repeat;\r
+ background-size : 100% 100%;\r
+}\r
@import "config.less";
/* Using font size */
-@list-font-size-main: 44 * @unit_base;
-@list-font-size-sub: 32 * @unit_base;
-@list-font-size-divider: 32 * @unit_base; // NOTE: defined in dialogue group
-
-/*
-@list-dialogue-font-size-main: 38 * @unit_base;
-@list-dialogue-font-size-sub: 32 * @unit_base;
-*/
+@list-font-size-main: 22 * @unit_base;
+@list-font-size-sub: 16 * @unit_base;
+@list-font-size-divider: 16 * @unit_base; // NOTE: defined in dialogue group
@list-font-weight: normal;
-/*
-@list-li-height: 112 * @unit_base;
-
-@list-li-2line-height: 128 * @unit_base;
-@list-li-3line-height: 160 * @unit_base;
-@list-li-top-padding: 10 * @unit_base;
-@list-li-main-line-height: 60 * @unit_base;
-@list-li-sub-line-height: 48 * @unit_base;
-*/
-@list-smallicon-size: 32 * @unit_base;
-@list-li-padding-horizontal: 16 * @unit_base;
-/*
-@list-li-divider-height: 32 * @unit_base;
+@list-smallicon-size: 17 * @unit_base;
+@list-li-padding-horizontal: 8 * @unit_base;
-*/
@list-bigicon-size: 64 * @unit_base;
@list-bigicon-size2: 72 * @unit_base;
-/*
-@list-checkbox-size: 42 * @unit_base;
-@list-progressbar-height: 16 * @unit_base;
-*/
-
// Bubble
-@list-li-bubble-font-size: 38 * @unit_base;
-@list-li-bubble-time-font-size: 26 * @unit_base;
-@list-li-bubble-date-font-size: @list-li-bubble-time-font-size;
-@list-li-bubble-corner-radius: 9 * @unit_base; // TODO: fit to 9px (picked from bg images)
+@list-li-bubble-font-size: 19 * @unit_base;
+@list-li-bubble-time-font-size: 11 * @unit_base;
+@list-li-bubble-date-font-size: 16 * @unit_base;
@list-li-sub-left-width: 187 * @unit_base;
@list-li-main-right-padding: 187 * @unit_base;
.ui-listview {
margin: 0;
counter-reset: listnumbering;
- border-top-width: 1px;
- border-top-style: solid;
+
+ border-top-color: @color_list_border_bottom;
li.ui-btn > .ui-btn-hastxt > .ui-btn-text.ui-btn-text-padding-right {
padding-right: 0 * @unit_base; // Clear default button padding-right
}
&> .ui-li {
- // list item separator line
- border-bottom-width: 1px;
- border-bottom-style: solid;
+ border-left-width : 0px;
+ border-right-width : 0px;
border-top-width: 0px;
+
+ > .ui-btn-inner {
+ border-bottom-width: 1px;
+ border-bottom-style: solid;
+ border-bottom-color: @color_list_border_bottom;
+ margin-left : 13 * @unit_base;
+ margin-right : 13 * @unit_base;
+ }
+ }
+
+ & > .ui-li-static {
+ background-color: @color_bg;
+
+ border-bottom-width: 1px;
+ border-bottom-style: solid;
+ border-bottom-color: @color_list_border_bottom;
+ margin-left : 13 * @unit_base;
+ margin-right : 13 * @unit_base;
}
+
&> .ui-li:not(.ui-li-divider) {
&:not(.ui-li-static) {
- min-height : 112 * @unit_base;
+ min-height : 55 * @unit_base;
}
}
&> .ui-li.ui-li-has-multiline:not(.ui-li-divider) {
&:not(.ui-li-static) {
- min-height : 128 * @unit_base;
+ min-height : 64 * @unit_base;
}
}
+
+ li.ui-btn-up-s, li.ui-btn-hover-s {
+ background: none;
+ background-color: @color_bg;
+ color: @color_text;
+ }
+ li.ui-btn-down-s {
+ background: none;
+ background-color: @color_list_press;
+ color: @color_text;
+ }
+ /* listview: fonts for li with a link */
+ li.ui-btn-up-s > .ui-li > .ui-btn-text > a.ui-link-inherit,
+ li.ui-btn-hover-s > .ui-li > .ui-btn-text > a.ui-link-inherit {
+ color: @color_list_main_text_unfocus;
+ }
+
+ li.ui-btn-down-s > .ui-li > .ui-btn-text > a.ui-link-inherit {
+ color: @color_list_main_text_focus;
+ }
}
.ui-content {
.ui-listview {
margin: 0;
}
-
}
.ui-listview-inset {
margin: 1em 0;
margin-bottom : 0px;
font-size : @list-font-size-main;
- min-height : 52 * @unit_base;
font-weight : normal;
}
.ui-btn-inner a.ui-link-inherit,
&.ui-li-static {
- padding-top : 30 * @unit_base;
- padding-bottom : 30 * @unit_base;
- padding-left : 16 * @unit_base;
- padding-right : 16 * @unit_base;
+ padding-top : 15 * @unit_base;
+ padding-bottom : 15 * @unit_base;
+/* padding-left : 13 * @unit_base;
+ padding-right : 13 * @unit_base;*/
display: block;
white-space: normal; // default: 1line
+
+ border-left-width : 0px;
+ border-right-width : 0px;
}
.ui-btn-inner a.ui-link-inherit {
.LESStext-no-ellipsis();
}
-
.ui-toggleswitch {
&:last-child {
top : 50%;
- margin-top : -40 * @unit_base;
+ margin-top : -20 * @unit_base;
display : inline-block;
position : absolute;
- right : 16 * @unit_base;
+ right : 0px;
+ }
+ }
+ .ui-toggleswitch.ui-toggleswitch-image-style {
+ &:last-child {
+ margin-top : -22 * @unit_base;
+
+ right : 0px;
}
}
[data-role="button"] {
&:last-child {
position : absolute;
- right : 16 * @unit_base;
+ right : 0px;
}
}
&:first-child{
position : absolute;
top : 50%;
- margin-top : -30 * @unit_base;
+ margin-top : -15 * @unit_base;
- left : 16 * @unit_base;
+ left : -4 * @unit_base;
- width : 60 * @unit_base;
- height : 60 * @unit_base;
+ width : 30 * @unit_base;
+ height : 30 * @unit_base;
.ui-btn-inner {
- padding : 10 * @unit_base 10 * @unit_base 10 * @unit_base 10 * @unit_base;
- line-height : 40 * @unit_base;
+ padding : 5 * @unit_base 5 * @unit_base 5 * @unit_base 5 * @unit_base;
+ line-height : 20 * @unit_base;
color : transparent;
img.ui-li-bigicon {
position : absolute;
+ width : 35 * @unit_base;
+ height : 35 * @unit_base;
+
top : 50%;
- margin-top : -36 * @unit_base;
+ margin-top : -18 * @unit_base;
&:first-child {
- left : 16 * @unit_base;
+ left : 0px;
}
&:nth-child(2) {
- left : 92 * @unit_base;
+ left : 36 * @unit_base;
}
&:last-child {
}
.ui-li-color-bar + img.ui-li-bigicon:nth-child(2) {
- left : 16 * @unit_base;
+ left : 0px;
}
.ui-li-color-bar {
position : absolute;
- width : 12 * @unit_base;
- height : 20 * @unit_base;
+ width : 3 * @unit_base;
+ height : 65 * @unit_base;
top : 0 * @unit_base;
- left : 0 * @unit_base;
+ left : -13 * @unit_base;
background-color : rgba(0, 0, 0, 1);
}
li.ui-li-thumbnail-right {
img.ui-li-bigicon.ui-li-thumb {
left : auto;
- right : 16 * @unit_base;
+ right : 0px;
+
+ width : 51 * @unit_base;
+ height : 51 * @unit_base;
+
+ margin-top : -25 * @unit_base;
}
}
.ui-li.ui-li-has-multiline {
.ui-btn-inner a.ui-link-inherit,
&.ui-li-static {
- padding-top : 10 * @unit_base;
- padding-bottom : 58 * @unit_base;
-
- min-height : 60 * @unit_base;
+ padding-top : 7 * @unit_base;
+ padding-bottom : 28 * @unit_base;
}
a {
.LESStext-ellipsis();
}
}
+
+/********************************************/
+/*************** Edit Field *****************/
+/********************************************/
+.ui-li {
+ > input {
+ border-style : none;
+ border-width : 0px;
+
+ outline-color : @color_list_bg;
+ font-size : 23 * @unit_base;
+ line-height : 1;
+
+ padding-top : 0px;
+ padding-bottom : 0px;
+ }
+}
+
/********************************************/
/*************** Divider ********************/
/********************************************/
-.ui-li-divider {
+
+.ui-listview li.ui-li-divider {
+ background: @color_list_divider_bg;
+ color: @color_list_divider_text;
+
+ border-bottom-width : 0px;
+ border-top-width : 0px;
+
cursor: default;
counter-reset: listnumbering;
font-weight: bold;
- font-size: @list-font-size-divider;
- padding-left: 16 * @unit_base;
- padding-top: 8 * @unit_base;
- padding-bottom: 8 * @unit_base;
-}
-.ui-listview .ui-li-divider {
+ height: 38 * @unit_base;
+
+
+ &.ui-btn {
+ top : 0px;
+ margin-top: 0 * @unit_base;
+ border-radius : 0px;
+
+ font-size : 16 * @unit_base;
+ .ui-btn-inner.ui-btn-hastxt {
+ height : 100%;
+ padding-left : 0px;
+ .ui-btn-text {
+ position : absolute;
+
+ top : 5 * @unit_base;
+ height : 18 * @unit_base;
+ padding-right : 10 * @unit_base;
+ }
+ }
+ }
+
&[data-style="dialogue"] {
- height: 32 * @unit_base;
+ height: 20 * @unit_base;
padding : 0px;
- .LESSdialogue-divider;
- background : @color_bg;
+ padding-top : 20 * @unit_base;
+ padding-bottom : 0 * @unit_base;
+ padding-left : 10 * @unit_base;
+
+ margin-left : 4 * @unit_base;
+ margin-right : 4 * @unit_base;
+
+
+ font-size : 16 * @unit_base;
+ font-weight : bold;
+ color : @color_dialogue_main_text;
+ background : @color_list_bg;
}
&[data-style="check"] {
- height: 60 * @unit_base;
+ height: 38 * @unit_base;
padding-top : 0px;
padding-bottom : 0px;
- padding-left : 92 * @unit_base;
- line-height : 60 * @unit_base;
+ padding-left : 0px;
+
+ label {
+ top : 0px;
+ margin : 0;
+
+ .ui-btn-inner {
+ z-index : 5;
+ position : absolute;
+ width : 32 * @unit_base;
+ height : 32 * @unit_base;
+ background : @color_list_bg;
+ padding : 0;
+ }
+ }
+ .ui-btn-text {
+ padding-left : 37 * @unit_base;
+ }
}
- &[data-style="checkexpandable"] {
- height: 60 * @unit_base;
- padding-top : 0px;
- padding-bottom : 0px;
+ .ui-divider-normal-line {
+ display : inline-block;
+ position : absolute;
- padding-left : 92 * @unit_base;
- line-height : 60 * @unit_base;
+ top : 23 * @unit_base;
+ width : 100%;
+ height : 2 * @unit_base;
+
+ background : @color_list_divider_text;
}
- &[data-style="expandable"] {
- height: 60 * @unit_base;
- padding-top : 0px;
- padding-bottom : 0px;
+ &.ui-btn-down-s {
+ background : @color_list_divider_text;
+ color : @color_list_bg;
+
+ .ui-divider-normal-line {
+ background : @color_list_bg;
+ }
+
+ label {
+ > .ui-btn-inner {
+ background : @color_list_divider_text;
+ }
+ }
+ }
- line-height : 60 * @unit_base;
+ + li.ui-li-dialogue {
+ border-top-left-radius : 3px;
+ border-top-right-radius : 3px;
}
}
border-left-color : @color_list_divider_expand_div;
}
-
.ui-li-has-thumb:not(.ui-li-thumbnail-right) {
.ui-btn-inner a.ui-link-inherit,
&.ui-li-static {
- min-height: 60 * @unit_base;
- padding-left: 104 * @unit_base;
+ padding-left: 45 * @unit_base;
}
.ui-li-text-sub {
- padding-left: 104 * @unit_base;
- padding-right: 16 * @unit_base; /* ellipsis for sub text */
+ padding-left: 45 * @unit_base;
+ padding-right: 0px; /* ellipsis for sub text */
}
}
.ui-li-has-radio{
.ui-btn-inner a.ui-link-inherit,
&.ui-li-static {
- min-height: 60 * @unit_base;
- padding-left: 92 * @unit_base;
+ padding-left: 36 * @unit_base;
}
.ui-li-text-sub {
- padding-left: 92 * @unit_base;
+ padding-left: 36 * @unit_base;
}
}
.ui-li-has-thumb.ui-li-has-radio {
.ui-btn-inner a.ui-link-inherit,
&.ui-li-static {
- min-height: 60 * @unit_base;
- padding-left: 180 * @unit_base;
+ padding-left: 78 * @unit_base;
}
.ui-li-text-sub {
- padding-left: 180 * @unit_base;
+ padding-left: 78 * @unit_base;
}
}
.ui-li.ui-li-has-right-circle-btn {
.ui-btn-inner a {
- padding-right : 96 * @unit_base;
+ padding-right : 48 * @unit_base;
}
}
-.ui-li.ui-li-has-right-btn {
+.ui-li.ui-li-has-right-btn:not(.ui-swipelist-item) {
.ui-btn-inner a {
- padding-right : 158 * @unit_base;
+ padding-right : 79 * @unit_base;
}
}
.ui-li.ui-li-thumbnail-right {
.ui-btn-inner a {
- padding-right : 104 * @unit_base;
+ padding-right : 52 * @unit_base;
}
}
.ui-li.ui-li-static.ui-li-has-right-circle-btn {
- padding-right : 96 * @unit_base;
+ padding-right : 48 * @unit_base;
}
-.ui-li.ui-li-static.ui-li-has-right-btn {
- padding-right : 158 * @unit_base;
+.ui-li.ui-li-static.ui-li-has-right-btn:not(.ui-swipelist-item) {
+ padding-right : 79 * @unit_base;
}
.ui-li.ui-li-static.ui-li-thumbnail-right {
- padding-right : 104 * @unit_base;
+ padding-right : 52 * @unit_base;
}
.ui-li-has-icon {
.ui-li-sub-setting {
float: right;
text-align: right;
- font-size: @font_size_list_sub_text;
+ font-size: 16 * @unit_base;
margin: .3em 0;
}
.ui-li-text-sub {
float: right;
text-align: right;
- font-size: @font_size_list_sub_text;
+ font-size: 16 * @unit_base;
color: @color_list_sub_text_default;
position : absolute;
- right : 16 * @unit_base;
- top : 16 * @unit_base;
+ right : 0px;
+ top : 20 * @unit_base;
width : 95%;
.LESStext-ellipsis();
.ui-li-text-sub2 {
float: right;
text-align: right;
- font-size: @font_size_list_sub_text;
+ font-size: 16 * @unit_base;
color: @color_list_sub_text_default;
position : absolute;
- right : 16 * @unit_base;
+ right : 0px;
top : 16 * @unit_base;
width : 60%;
top: 22 * @unit_base;
margin-top: 0px;
}*/
+
.ui-li-has-multiline .ui-li-text-sub {
position : absolute;
text-align: left;
right : auto;
- left : 16 * @unit_base;
- top: 70 * @unit_base;
+ left : 0px;
+ top: 35 * @unit_base;
margin-top: 0px;
width : 90%;
margin: 0 0;
}
.ui-li-icon-sub-right {
- right : 16 * @unit_base;
+ right : 8 * @unit_base;
}
// =========
.ui-listview {
&> li.ui-li-dialogue {
- margin-left: @style_list_li_dialogue_margin_left;
- margin-right : @style_list_li_dialogue_margin_left;
- border-left: @style_list_li_dialogue_border_left_width @color_dialogue_editor_border solid;
- //margin-left: @style_list_li_dialogue_margin_left;
- border-top-width: 0px;
+ margin-left: 4 * @unit_base;
+ margin-right : 4 * @unit_base;
+ padding-left : 10 * @unit_base;
+ padding-right : 10 * @unit_base;
+
+ border-style : solid;
+ border-color : @color_dialogue_border_right;
+ border-width : 1px;
+/* border-top-width : 0px;*/
- .LESSdialogue-border-style;
+ &:first-child {
+ border-top-width : 1px;
+ border-top-left-radius : 3px;
+ border-top-right-radius : 3px;
+ }
+ &:last-child {
+ border-bottom-left-radius : 3px;
+ border-bottom-right-radius : 3px;
+ }
}
&> li.ui-li-dialogue.ui-body-s,
}
}
&> li.ui-li-dialogue.ui-li-expanded {
- padding-left : 44 * @unit_base;
- min-height : 52 * @unit_base;
+ padding-left : 26 * @unit_base;
+ background : @color_list_expanded_bg;
}
-
&> li.ui-li-dialogue.ui-li-divider {
height: 32 * @unit_base;
padding : 0px;
&> li.ui-li-group-title span {
padding-left : 16 * @unit_base;
}
+
&> li.ui-li-dialogue-divider {
- .LESSdialogue-divider;
+ padding-top : 20 * @unit_base;
+ padding-bottom : 0 * @unit_base;
+ padding-left : 10 * @unit_base;
+
+ margin-left : 4 * @unit_base;
+ margin-right : 4 * @unit_base;
+
+ background : @color_list_dialogue_bg;
+ font-size : 16 * @unit_base;
+ font-weight : bold;
+ color : @color_dialogue_main_text;
}
}
// bubble li
// =========
.ui-listview {
+ .ui-li-static {
+ &.ui-li-bubble-receive,
+ &.ui-li-bubble-left {
+ color: @color_list_bubble_receive_text;
+ > .ui-li-bubble-time {
+ color: @color_list_bubble_time_receive_text;
+ }
+ }
+ &.ui-li-bubble-sent,
+ &.ui-li-bubble-right {
+ color: @color_list_bubble_sent_text;
+ > .ui-li-bubble-time {
+ color: @color_list_bubble_time_sent_text;
+ }
+ }
+ &.ui-li-bubble-sos {
+ color: @color_list_bubble_sos_text;
+ > .ui-li-bubble-time {
+ color: @color_list_bubble_time_sos_text;
+ }
+ }
+ &.ui-li-bubble-date {
+ background-color: @color_list_bubble_date_bg;
+ color: @color_list_bubble_date_text;
+ font-style: italic;
+ }
+ }
+
+ span.ui-li-bubble-time {
+ font-weight: bold;
+ }
+ // Common
+ .ui-li-bubble-receive,
.ui-li-bubble-left,
- .ui-li-bubble-right,
- .ui-li-bubble-sos {
+ .ui-li-bubble-sent,
+ .ui-li-bubble-right,
+ .ui-li-bubble-sos {
+ display: inline-block;
+ background-clip: padding-box;
+ max-width: 80%;
+ word-wrap: break-word;
+ font-size: @list-li-bubble-font-size;
+ p, span {
+ font-size: @list-li-bubble-font-size;
+ }
img {
position: relative;
min-width: 160 * @unit_base;
min-height: 160 * @unit_base;
}
}
+ .ui-li-bubble-receive,
.ui-li-bubble-left {
- word-wrap: break-word;
- .LESSborder-radius-topright(@list-li-bubble-corner-radius);
- .LESSborder-radius-bottomright(@list-li-bubble-corner-radius);
- font-size: @list-li-bubble-font-size;
- p, span {
- font-size: @list-li-bubble-font-size;
- }
- //margin: 12px 20% 12px 0%;
- margin-top: 12 * @unit_base;
- margin-bottom: 12 * @unit_base;
- margin-left: 0;
+ //float: left;
+ margin-left: 0px;
margin-right: auto;
- max-width: 80%;
- min-width: 30%;
- padding: 16px 22px 16px 16px;
+ border-image-source: url(images/00_messagebubble_bg_receive.9.png);
+ border-image-slice: 57 14 21 48 fill;
+ border-image-width: auto;
+ padding: 9px 14px 21px 48px;
+
+ > .ui-li-bubble-time {
+ position: absolute;
+ display: inline-block;
+ bottom: 8 * @unit_base;
+ left: 100%;
+ font-size: @list-li-bubble-time-font-size;
+ }
}
+ .ui-li-bubble-sent,
.ui-li-bubble-right {
- word-wrap: break-word;
- .LESSborder-radius-topleft(@list-li-bubble-corner-radius);
- .LESSborder-radius-bottomleft(@list-li-bubble-corner-radius);
- margin: 12px 0% 12px 20%;
- padding: 16px 16px 16px 22px;
- }
- .ui-li-bubble-sos {
+ //float: right;
+ margin-left: auto;
+ margin-right: 0px;
+ border-image-source: url(images/00_messagebubble_bg_sent.9.png);
+ border-image-slice: 55 47 20 13 fill;
+ border-image-width: auto;
+ padding: 9px 47px 20px 13px;
+
+ > .ui-li-bubble-time {
+ position: absolute;
+ display: inline-block;
+ bottom: 8 * @unit_base;
+ right: 100%;
+ font-size: @list-li-bubble-time-font-size;
+ }
}
.ui-li-bubble-date {
- height: 40 * @unit_base;
+ float: left;
+ width: 100%;
+ height: 24 * @unit_base;
+ background-image: url(images/00_messagebubble_date_bg.png);
+ background-repeat: repeat-x;
+ background-position: center center;
font-size: @list-li-bubble-date-font-size;
- margin: 12px 0%; // no horizontal margin
- padding: 0% 16px;
- padding-top: 15px;
+ margin: 20 * @unit_base 6 * @unit_base;
+ border: 0px none red;
+ padding: 0 0;
+ padding-top: 0.5em; // vertical text alignment to center
text-align: @style_list_bubble_date_text_align;
- }
- span.ui-li-bubble-time {
- margin-left: 12px;
- font-size: @list-li-bubble-time-font-size;
- display: inline-block;
+ & * {
+ display: inline-block;
+ background-color: @color_bg;
+ padding-left: 0.5em;
+ padding-right: 0.5em;
+ }
}
}
}
}
.ui-listview {
- .ui-li-expandable {
+ &> .ui-li-expanded {
+ background-color: @color_list_expandable_expanded_bg;
+ }
+ &> .ui-li-expanded .ui-li-expanded { // 3rd~ more depth
+ background-color: @color_list_expandable_expanded_bg;
}
.ui-li-expandable-shown {
// Down arrow
}
-.LESSimg-expand-icon(@right:@list-li-padding-horizontal, @size:@list-bigicon-size) {
+.LESSimg-expand-icon(@right:@list-li-padding-horizontal, @size:37*@unit_base) {
.ui-li-expand-icon {
- background-image: url(images/00_list_expand_closed.png);
+ background-image: url(images/00_button_expand_closed.png);
background-size: 100%;
position: absolute;
top: 50%;
- width: 64 * @unit_base;
- height: 64 * @unit_base;
+ width: 37 * @unit_base;
+ height: 37 * @unit_base;
margin-top: -(@size/2);
- right: 16 * @unit_base;
+ right: 18 * @unit_base;
}
}
-.LESSimg-expanded-icon(@right:@list-li-padding-horizontal, @size:@list-bigicon-size) {
+.LESSimg-expanded-icon(@right:@list-li-padding-horizontal, @size:37*@unit_base) {
.ui-li-expanded-icon {
- background-image: url(images/00_list_expand_opened.png);
+ background-image: url(images/00_button_expand_opened.png);
background-size: 100%;
position: absolute;
top: 50%;
- width: 64 * @unit_base;
- height: 64 * @unit_base;
+ width: 37 * @unit_base;
+ height: 37 * @unit_base;
margin-top: -(@size/2);
- right: 16 * @unit_base;
+ right: 18 * @unit_base;
}
}
@import "config.less";
-
+/*
.ui-controlgroup .ui-radio-on,
.ui-controlgroup .ui-radio-off.ui-btn-hover-s.ui-btn-down-s {
.LESSSegmentControlBtnBackground;
.ui-controlgroup .ui-radio-off {
.LESSSegmentControlBtnPressBackground;
}
+*/
+
+.ui-controlgroup {
+ .ui-btn-text {
+ font-size : 17 * @unit_base;
+ font-weight : bold;
+ color : rgba(58, 58, 58, 1);
+ }
+}
.ui-controlgroup .ui-btn-inner .ui-corner-left .ui-controlgroup-first {
-o-border-radius: .3em;
-ms-border-radius: .3em;
-/*!
-* jQuery Mobile Framework
-* Copyright (c) jQuery Project
-* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
-*/
@import "config.less";
-/* Swatches */
-
-/* S
------------------------------------------------------------------------------------------------------------*/
/***************************************************************************
Header / Footer
NavigationBar
***************************************************************************/
+
.ui-bar-s {
border: none;
- .LESSHeaderFooterBackground;
+ background : rgba(248, 246, 239, 1); // #F8F6EF /* Header Background */
color: @color_bar_title_text;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
- font-size : 36 * @unit_base;
+ font-size : 28 * @unit_base;
.ui-link-inherit {
color: @color_bar_title_text;
}
-
- .ui-btn.ui-btn-back.ui-btn-down-s {
- .ui-btn-inner {
- background : @color_bar_back_btn_press;
- }
- }
-
- > .ui-btn.ui-btn-footer-right{
- position : absolute;
- font-size : 32 * @unit_base;
-
- width : 104 * @unit_base;
- height : 74 * @unit_base;
- top : 20 * @unit_base;
-
- border-style : none;
- border-width : 0px;
- }
+
> .ui-btn.ui-btn-back {
- position : absolute;
- font-size : 32 * @unit_base;
- border-style : none;
- border-width : 0px;
- .LESSbtn-back;
- }
-
- > .ui-btn.ui-btn-footer-right {
- left : 10 * @unit_base;
- }
-
- .ui-btn.ui-btn-footer-right .ui-btn-inner {
- padding : 0;
-
- width : 104 * @unit_base;
- height : 74 * @unit_base;
- }
-
- .ui-btn.ui-btn-back .ui-btn-inner {
- padding : 0;
-
- .LESSbtn-back-inner;
- }
+ background : transparent;
+ position : absolute;
+ right : 0px;
+ .ui-icon-header-back-btn {
+ top : 8 * @unit_base;
+ left : auto;
+ right : 13 * @unit_base;
- .ui-btn.ui-btn-footer-right.ui-btn-down-s{
- .ui-btn-inner {
- background : @color_bar_btn_press;
- }
- }
- .ui-btn.ui-btn-footer-right{
- .ui-btn-inner {
- .ui-btn-text {
- line-height : 74 * @unit_base;
- }
- }
- }
-
- .ui-field-contain {
- margin-left : auto;
- margin-right : auto;
- height : 74 * @unit_base;
-
- font-size : 28 * @unit_base;
-
- .ui-extended-controlgroup {
- position : absolute;
- display : inline;
-
- margin-top : 0 * @unit_base;
- margin-bottom : 0 * @unit_base;
-
- label {
- .LESSextended-controlgroup-border;
- }
-
- .ui-radio {
- height : 74 * @unit_base;
- .ui-btn {
- width : 100%;
- }
-
- .ui-btn-inner {
- .ui-btn-text {
- text-align : center;
- font-weight : bold;
- }
- }
-
- .ui-radio-off {
- background: @color_bar_seg_btn_normal;
- .ui-btn-text{
- color : @color_bar_seg_text_normal;
- }
- }
- .ui-radio-on,
- .ui-radio-off.ui-btn-hover-s.ui-btn-down-s{
- background : @color_bar_seg_btn_press;
- .ui-btn-text{
- color : @color_bar_seg_text_press;
- }
- }
- }
- }
- .ui-title-extended-controlgroup {
- top : 5 * @unit_base; // scale change
- }
- .ui-footer-extended-controlgroup {
- .ui-btn-inner {
- line-height : 74 * @unit_base;
- padding : 0 * @unit_base;
- }
- }
- }
-
- .ui-title-extended-controlgroup-4btn {
- width : @style-title-extended-4btn-width;
- .ui-radio {
- width : @style-title-extended-4btn-radio-width;
- }
- }
- .ui-title-extended-controlgroup-3btn {
- width : @style-title-extended-3btn-width;
- .ui-radio {
- width : @style-title-extended-3btn-radio-width;
- }
- }
- .ui-title-extended-controlgroup-2btn {
- width : @style-title-extended-2btn-width;
- .ui-radio {
- width : @style-title-extended-2btn-radio-width;
- }
- }
-
- .ui-footer-extended-controlgroup-4btn {
- width : 682 * @unit_base;
- .ui-radio {
- width : 170 * @unit_base;
- }
- }
- .ui-footer-extended-controlgroup-3btn {
- width : 432 * @unit_base;
- .ui-radio {
- width : 143 * @unit_base;
- }
- }
- .ui-footer-extended-controlgroup-2btn {
- width : 328 * @unit_base;
- .ui-radio {
- width : 163 * @unit_base;
+ margin-top : 0px
}
}
}
+/* Header style */
.ui-header.ui-bar-s{
position : fixed;
top : 0px;
- .LESSColorBarTitleBackground;
- min-height : 100 * @unit_base;
-
- img {
- display: inline-block;
- height: 32 * @unit_base;
- width: 32 * @unit_base;
- margin-left: 16 * @unit_base;
- //margin-right: 16 * @unit_base; /* Title's left margin covers this. */
- //vertical-align: middle;
- }
+ min-height : 55 * @unit_base;
.ui-title {
display: inline-block;
color : @color_bar_title_text;
- min-height: @style-title-min-height;
- font-size : @style-title-font-size;
+ min-height : 28 * @unit_base;
+ max-height : 34 * @unit_base; /* temporary UX strange */
+ font-size : 28 * @unit_base;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
outline: 0 !important;
- .LESStitle-diff-style; /* different title style */
+ text-align: left;
+ margin: 16*@unit_base 8*@unit_base 5*@unit_base 8*@unit_base;
+
}
- .ui-btn{
- font-size : 28 * @unit_base;
- height : 74 * @unit_base;
+ /* header button position : need to press area more... */
+ >.ui-btn {
+ .ui-btn-inner.ui-btn-icon-only .ui-icon {
+ left : 0px;
+ top : 0px;
+ margin-top : 0px;
+ }
+ }
+
+ > .ui-btn.ui-btn-back {
+ right : 13 * @unit_base;
+ }
+
+ img {
+ display: inline-block;
+ height: 16 * @unit_base;
+ width: 16 * @unit_base;
+ margin-left: 8 * @unit_base;
}
- .ui-btn.ui-btn-left,
- .ui-btn.ui-btn-right {
- width : 114 * @unit_base;
+ .ui-title-text-sub {
+ position : absolute;
+ top : 36 * @unit_base;
+ left : 8 * @unit_base;
+
+ font-size : 12 * @unit_base;
+
+ img {
+ height: 16 * @unit_base;
+ width: 16 * @unit_base;
+ margin-left: 8 * @unit_base;
+ }
}
> .ui-btn{
position : absolute;
- top : 20 * @unit_base;
+ top : 19 * @unit_base;
margin-top : 0px;
- font-size : 28 * @unit_base;
- height : 60 * @unit_base;
-
- background: none;
- color : @color_bar_title_text;
+ height : 32 * @unit_base;
+ width : 32 * @unit_base;
- border-left-style: solid;
- border-left-width : 1px;
- border-left-color : @color_bar_title_btn_border;
+ background: transparent;
+ color : red;
- font-weight : bold;
- .LESSborder-radius-all(0px);
- span.ui-btn-inner {
- padding-top : 13 * @unit_base;
- padding-bottom : 13 * @unit_base;
- }
- span.ui-btn-inner.ui-btn-icon-only {
- padding-top : 0 * @unit_base;
- padding-bottom : 0 * @unit_base;
- }
}
> .ui-btn.ui-btn-right:nth-child(2) {
- right : 0px;
+ right : 11 * @unit_base;
}
> .ui-btn.ui-btn-right:nth-child(3) {
- right : 118 * @unit_base;
- }
-
- > .ui-btn.ui-btn-right:nth-child(4) {
- right : 236 * @unit_base;
- }
-
- > .ui-btn.ui-btn-down-s {
- background : @color_bar_btn_press;
- color : @color_bar_title_text;
+ right : 58 * @unit_base;
}
> img + h1 + a.ui-btn.ui-btn-right:nth-child(3) {
- right : 0px;
+ right : 11 * @unit_base;
}
> img + h1 + a.ui-btn.ui-btn-right:nth-child(4) {
- right : 118 * @unit_base;
+ right : 58 * @unit_base;
}
- > img + h1 + a.ui-btn.ui-btn-right:nth-child(5) {
- right : 236 * @unit_base;
+ > img + h1 + span.ui-title-text-sub + a.ui-btn.ui-btn-right:nth-child(4) {
+ right : 11 * @unit_base;
}
-}
-.ui-header.ui-bar-s.ui-title-extended-height {
- height : 136 * @unit_base;
-
- a {
- top : 50 * @unit_base;
+ > img + h1 + span.ui-title-text-sub + a.ui-btn.ui-btn-right:nth-child(5) {
+ right : 58 * @unit_base;
}
- .ui-title {
- font-size : 28 * @unit_base;
- top : 0 * @unit_base;
-
- padding-top : 11 * @unit_base;
- margin-top : 0 * @unit_base;
- margin-bottom : 0 * @unit_base;
+ > .ui-btn.ui-btn-down-s {
+ background : @color_bar_btn_press;
+ color : @color_bar_title_text;
}
+
+ &.ui-title-multiline {
+ .ui-title {
+ min-height : 24 * @unit_base;
+ max-height : 24 * @unit_base; /* temporary UX strange */
+ font-size : 22 * @unit_base;
- .ui-title-extended-segment-style {
- left : 0 * @unit_base;
- margin-top : 0 * @unit_base;
- top : @style-title-extended-margin; // scale change
+ margin: 9*@unit_base 8*@unit_base 22*@unit_base 8*@unit_base;
+ }
}
+
}
-.ui-header.ui-bar-s .ui-btn.ui-btn-back .ui-btn-inner {
- border-style : none;
- border-width : 0px;
-}
-
-.ui-header.ui-bar-s.ui-title-controlbar-height,
.ui-footer.ui-bar-s {
- height : 114 * @unit_base;
-}
-
-.ui-footer.ui-bar-s.ui-footer-fixed {
- background : @color_bar_footer_bg;
+ height : 49 * @unit_base;
+ text-align : center;
+
+ >.ui-btn.ui-btn-back,
+ >[data-icon="naviframe-more"] {
+ background : transparent;
- height : 114 * @unit_base;
- .ui-title{
- font-size : 32 * @unit_base;
+ .ui-btn-footer-right .ui-btn-icon-only .ui-icon {
+ left : 8 * @unit_base;
+ }
}
-}
-.ui-footer.ui-bar-s .ui-title-extended-controlgroup-4btn {
- margin-top : 20 * @unit_base;
-}
-.ui-footer.ui-bar-s {
- > .ui-btn {
- background-color : @color_bar_btn_bg;
- .LESSback-btn-background;
- }
+ [data-icon="naviframe-more"] {
+ position : absolute;
+ left : 0 * @unit_base;
+ top : 0 * @unit_base;
- > .ui-btn.ui-btn-down-s {
+ box-shadow : none;
+ border-width : 0px;
+
+ .ui-icon-naviframe-more {
+ left : 13 * @unit_base;
+ top : 8 * @unit_base;
+
+ margin-top : 0px;
+ }
.ui-btn-inner {
- background : @color_bar_back_btn_press;
+ border: none;
+ background: transparent;
}
}
- > .ui-btn-back {
- background-color : @color_bar_back_btn_bg;
- .LESSback-btn-background;
+ [data-role="controlgroup"] {
+ width : 245 * @unit_base; /* temp value */
+
+ margin-left : auto;
+ margin-right : auto;
+ margin-top : 6 * @unit_base; /* temp value */
+ margin-bottom : 6 * @unit_base; /* temp value */
+
+ [data-role="button"] {
+ background : transparent;
+
+ width : 77 * @unit_base;
+
+ border-style : solid;
+ border-color : black;
+ border-top-width : 0px;
+ border-bottom-width : 0px;
+ border-left-width : 1px;
+ border-right-width : 1px;
+
+ border-radius : 0px;
+ box-shadow : none;
+ .ui-btn-text {
+ font-size : 17 * @unit_base;
+ color : rgba(58, 58, 58, 1);
+ }
+
+ &.ui-corner-right {
+ border-right-width : 0px;
+ }
+
+ &.ui-corner-left {
+ border-left-width : 0px;
+ }
+ }
+ }
+
+ > [data-role="button"]:not([data-icon="naviframe-more"]) {
+ top : 6 * @unit_base;
}
}
/***************************************************************************
- Header / Footer
- NavigationBar
-***************************************************************************/
-/***************************************************************************
Content Top calculate
***************************************************************************/
-.ui-title-content-normal-height,
-.ui-title-content-option-header-collapsed-1line-height {
- position : relative;
- top : 100 * @unit_base;
-}
-
-.ui-title-content-no-height {
+.ui-content {
position : relative;
- top : 0 * @unit_base;
+ top : 55 * @unit_base;
}
-.ui-title-content-extended-height {
- position : relative;
- top : 136 * @unit_base;
+.ui-title-content-normal-height {
+ top : 55 * @unit_base;
}
-.ui-title-content-option-header-expanded-1line-height {
- position : relative;
- top : 195 * @unit_base;
+.ui-title-content-multi-controlbar-height {
+ top : 75 * @unit_base;
}
.ui-title-content-search {
- position : relative;
- top : 206 * @unit_base;
+ top : 111 * @unit_base;
}
-.ui-title-content-optionheader-search {
- position : relative;
- top : 219 * @unit_base;
-}
-.ui-title-content-controlbar-height {
- position : relative;
- top : 115 * @unit_base;
-}
/***************************************************************************
Content Top calculate
***************************************************************************/
-// NOTE: This class is applied to almost all JQM widgets!
+
.ui-body-s {
border: 1px solid #2a2a2a;
background: @color_bg;
.ui-link {
/* ui-body-link */
color: #2489CE;
- font-weight: bold;
+ font-weight: bold;
&:hover { color: #2489CE; }
&:active { color: #2489CE; }
&:visited { color: #2489CE; }
.ui-br {
}
-.ui-btn-up-s {
- font-weight: bold;
- a.ui-link-inherit {
- color: @color_button_text_normal;
- }
- .LESSbutton_up_style;
+.ui-btn-box-s {
+ padding: 1px;
+}
+.ui-btn-box-s.ui-btn-up-s {
+ .LESSbutton_box_style;
+ .LESSborder-radius-all( 0.3rem );
.LESSbutton_text1_style;
}
-.ui-btn-hover-s {
- font-weight: bold;
- a.ui-link-inherit {
- color: @color_button_text_normal;
+
+.ui-ctxpopup .ui-btn-box-s{
+ &.ui-btn-up-s,
+ &.ui-btn-hover-s {
+ background: transparent !important;
+ border: none;
+ box-shadow: none;
+ padding: 0;
+ color: white !important;
}
+ &.ui-btn-down-s {
+ background: @color_ctxbutton_press !important;
+ border: none;
+ box-shadow: none;
+ padding: 0;
+ color: white !important;
+ .LESSborder-radius-all( 0 );
+ }
+}
+
+.ui-ctxpopup .ui-btn-down-s {
+ background: @color_ctxbutton_press !important;
+}
+
+.ui-btn-box-s .ui-btn-inner {
+ border: 1px solid;
+ border-color: rgb(199, 197, 190);
+ .LESSborder-radius-all( 0.3rem );
+ .LESSbox-boxsizing( border-box );
+ .LESSbutton_inner_box_style;
+ height: 100%;
+}
+
+.ui-header .ui-btn-box-s,
+.ui-footer .ui-btn-box-s,
+.ui-btn-back.ui-btn-up-s,
+.ui-btn-back.ui-btn-hover-s,
+.ui-btn-back.ui-btn-down-s,
+.ui-popup-container .ui-btn-box-s {
+ font-weight: normal;
+ .LESSborder-radius-all( 0.9 rem );
+}
+/*
+.ui-btn-box-s.ui-btn-hover-s {
.LESSbutton_hover_style;
.LESSbutton_text1_style;
}
-.ui-btn-hover-s.ui-btn-corner-circle{
+.ui-btn-box-s.ui-btn-hover-s.ui-btn-corner-circle{
.LESScirclebutton_hover_style;
}
-
-.ui-btn-down-s {
- font-weight: bold;
- a.ui-link-inherit {
- color: @color_button_text_normal;
- }
+*/
+.ui-btn-box-s.ui-btn-down-s .ui-btn-inner {
.LESSbutton_down_style;
- .LESSbutton_text1_style;
}
+
.ui-btn-up-s,
.ui-btn-hover-s,
.ui-btn-down-s {
font-family: Helvetica, Arial, sans-serif;
text-decoration: none;
}
-
+/*
.ui-btn-down-s.ui-btn-corner-circle{
.LESScirclebutton_press_style;
}
-.ui-listview {
- border-top-color: @color_list_border_bottom;
- &> .ui-li {
- border-bottom-color: @color_list_border_bottom;
- }
- & > .ui-li-static {
- background-color: @color_bg;
- }
- li.ui-btn-up-s, li.ui-btn-hover-s {
- background: none;
- background-color: @color_bg;
- color: @color_text;
- }
- li.ui-btn-down-s {
- background: none;
- background-color: @color_list_press;
- color: @color_text;
- }
- /* listview: fonts for li with a link */
- li.ui-btn-up-s > .ui-li > .ui-btn-text > a.ui-link-inherit,
- li.ui-btn-hover-s > .ui-li > .ui-btn-text > a.ui-link-inherit {
- color: @color_list_main_text_unfocus;
- }
-
- li.ui-btn-down-s > .ui-li > .ui-btn-text > a.ui-link-inherit {
- color: @color_list_main_text_focus;
- }
- /* listview divider */
- /* NOTE: this divider has no swatch tag! */
- li.ui-li-divider {
- .LESSlistDivider_Background;
- color: @color_list_divider_text;
- }
- /* subitem */
- .ui-li-sub { color: @color_text_sub; }
- .ui-li-sub-setting { color: @color_text_setting; }
-
- // expandable list
- .ui-li-expandable {
-
- }
- &> .ui-li-expanded {
- background-color: @color_list_expandable_expanded_bg;
- }
- &> .ui-li-expanded .ui-li-expanded { // 3rd~ more depth
- background-color: @color_list_expandable_expanded_bg;
- }
-
- // bubble
- .ui-li-static {
- &.ui-li-bubble-left {
- // Color is picked from 00_MessageBubble_BG_receive.png
- background-color: @color_list_bubble_left_bg;
- .LESSbox-shadow(2px, 3px, 3px, @color_list_bubble_box_shadow);
- color: @color_list_bubble_left_text;
- }
- &.ui-li-bubble-right {
- // Color is picked from 00_MessageBubble_BG_sent.png
- background-color: @color_list_bubble_right_bg;
- .LESSbox-shadow(2px, 3px, 3px, @color_list_bubble_box_shadow);
- color: @color_list_bubble_right_text;
- }
- &.ui-li-bubble-sos {
- color: @color_list_bubble_sos_text;
- }
- &.ui-li-bubble-date {
- background-color: @color_list_bubble_date_bg;
- color: @color_list_bubble_date_text;
- }
- }
- span.ui-li-bubble-time {
- color: @color_list_bubble_time_text;
- }
-}
-
/* Structure */
/* links within "buttons"
-----------------------------------------------------------------------------------------------------------*/
//border : none;
}
-/***************************************************************************
- ControlBar
-***************************************************************************/
-.ui-controlbar-s, .ui-controlbar-left, .ui-controlbar-right {
- border: 1px solid @color_controlbar_btn_border;
- background: @color_controlbar_bg;
- color: @color_controlbar_btn_text;
- font-family: Helvetica, Arial, sans-serif;
- font-weight: bold;
- font-size : 36 * @unit_base;
-
- .ui-link-inherit, .ui-link {
- color: @color_controlbar_btn_text;
- font-weight: bold;
- &:hover { color: @color_controlbar_btn_text; }
- &:active { color: @color_controlbar_btn_text; }
- &:visited { color: @color_controlbar_btn_text; }
- }
-
- .ui-btn-text, .ui-btn {
- color: @color_controlbar_btn_text;
- font-weight: bold;
- text-decoration : none;
- }
-
- .ui-btn-down-s, .ui-btn-active {
- color: @color_controlbar_btn_text;
- }
-}
-
-.ui-controlbar-s.ui-navbar {
- position : absolute;
-
- height : 114 * @unit_base; /* temporary value */
- width : 100%;
- left : 0px;
-
- border-top : none;
- border-bottom : none;
-
- z-index: 50;
-
- li .ui-btn, .ui-navbar-toggle .ui-btn{
- font-size : 26 * @unit_base;
- }
-
- .ui-btn , .ui-btn-icon-top, .ui-btn-hover-s, .ui-btn-active, .ui-btn-up-s{
- .ui-btn-inner{
- padding-top : 79 * @unit_base;
- }
- }
- .ui-btn {
- .ui-icon {
- left : 50%;
- top : 12 * @unit_base;
- margin-left : -1.3em;
-
- width : 56 * @unit_base;
- height: 56 * @unit_base;
- }
- .ui-btn-text {
- padding-left : 0px;
- }
- }
- .ui-btn.ui-ctrlbar-icononly {
- padding-top : 20 * @unit_base;
- }
- .ui-btn-inner {
- z-index : 200;
- }
- .ui-btn-inner.ui-navbar-textonly {
- font-size : 28 * @unit_base;
-
- padding-top : 44 * @unit_base;
- padding-bottom : 45 * @unit_base;
- }
-}
-
-.ui-landscape-controlbar.ui-controlbar-s.ui-navbar {
- .ui-btn {
- .ui-icon {
- left : 20%;
- top : 30 * @unit_base;
- margin-left : -1.3em;
- }
- .ui-btn-text {
- padding-left : 35%;
- }
-
- .ui-navbar-textonly .ui-btn-text {
- padding-left : 0px;
- }
- }
-
- .ui-ctrlbar-icononly.ui-btn {
- padding-top : 0px;
-
- .ui-icon {
- left : 50%;
- top : 30 * @unit_base;
- margin-left : -29 * @unit_base;
- }
- }
-
- .ui-btn , .ui-btn-icon-top, .ui-btn-hover-s, .ui-btn-active, .ui-btn-up-s{
- .ui-btn-inner:not(.ui-btn-icon-only) {
- padding-top : 40 * @unit_base;
- padding-bottom : 39 * @unit_base;
- }
- }
-}
-
-.ui-tabbar-s {
- .ui-btn {
- background: @color_controlbar_tabbbar_bg;
- }
-
- .ui-btn-active, .ui-btn-show-style,
- .ui-btn.ui-btn-hover-s.ui-btn-down-s {
- background: @color_controlbar_btn_press;
- border-left-style: solid;
- border-right-style:solid;
- border-left-color: @color_controlbar_btn_border;
- border-right-color: @color_controlbar_btn_border;
- border-left-width: 1px;
- border-right-width: 1px;
- }
-
- .ui-btn-animation {
- background: @color_controlbar_btn_press;
- border-left-style: solid;
- border-right-style: solid;
- border-left-color: @color_controlbar_btn_border;
- border-right-color: @color_controlbar_btn_border;
- border-left-width: 1px;
- border-right-width: 1px;
- position : absolute;
- top : 0px;
- height : 123 * @unit_base;
- z-index : 100;
- }
-
- .ui-btn-hide-style {
- background: @color_bar_footer_bg;
- border : none;
- }
-}
-
-.ui-toolbar-s {
- .ui-btn, .ui-btn-up-s {
- background: @color_controlbar_toolbbar_bg;
-
- border-left-width : 1px;
- border-right-width : 1px;
- border-color : @color_controlbar_btn_border;
- border-style : solid;
- }
-
- .ui-btn-down-s {
- background : @color_controlbar_btn_press;
- }
-}
-
-.ui-header .ui-navbar.ui-tabbar-s,
-.ui-header .ui-navbar.ui-toolbar-s {
- a {
- width : 100%;
- height : 100%;
- }
-}
-
-.ui-controlbar-left.ui-navbar, .ui-controlbar-right.ui-navbar {
- position : fixed;
- z-index: 50;
-
- li .ui-btn, .ui-navbar-toggle .ui-btn{
- font-size : 20 * @unit_base;
- }
- .ui-btn {
- width : 100%;
- margin :0px 0em;
-
- background: @color_controlbar_bg;
- }
-
- .ui-btn-down-s, .ui-btn-active{
- color: @color_controlbar_btn_text;
- }
-
- li .ui-btn, .ui-navbar-toggle .ui-btn{
- font-size : 20 * @unit_base;
- }
-
- .ui-btn-inner {
- z-index : 200;
-
- padding-top : 126 * @unit_base;
- .ui-icon {
- left : 23%;
- top : 35 * @unit_base;
- width : 70 * @unit_base;
- height: 70 * @unit_base;
- }
- .ui-btn-text.ui-btn-text-padding-left {
- padding-left : 0px;
- }
- }
-
- .ui-btn-animation {
- position : fixed;
-
- background: @color_controlbar_bg;
- border-bottom-style: solid;
- border-top-style: solid;
- border-bottom-color: @color_controlbar_btn_border;
- border-top-color: @color_controlbar_btn_border;
- border-bottom-width: 1px;
- border-top-width: 1px;
-
- z-index : 100;
- }
-}
-
-.ui-controlbar-left {
- left : 0px;
- float : left;
-}
-
-.ui-controlbar-right {
- right : 0px;
- float :right;
-}
-
-.ui-btn-ani-startposition {
-}
-
-.ui-btn-ani-endposition {
- -ms-transition-property : left;
- -o-transition-property : left;
- -moz-transition-property : left;
- -webkit-transition-property : left;
-
- -ms-transition: all 0.3s ease-in-out;
- -o-transition: all 0.3s ease-in-out;
- -moz-transition: all 0.3s ease-in-out;
- -webkit-transition: all 0.3s ease-in-out;
-}
-
-.ui-btn-ani-verticalstartposition {
-}
-
-.ui-btn-ani-verticalendposition {
- -ms-transition-property : top;
- -o-transition-property : top;
- -moz-transition-property : top;
- -webkit-transition-property : top;
-
- -ms-transition: all 0.3s ease-in-out;
- -o-transition: all 0.3s ease-in-out;
- -moz-transition: all 0.3s ease-in-out;
- -webkit-transition: all 0.3s ease-in-out;
-}
-/***************************************************************************
- ControlBar
-***************************************************************************/
/* corner rounding classes
-----------------------------------------------------------------------------------------------------------*/
.ui-corner-tl {
- .LESSborder-radius-topleft(@style-corner-radius);
+ .LESSborder-radius-topleft(.3em);
}
.ui-corner-tr {
- .LESSborder-radius-topright(@style-corner-radius);
+ .LESSborder-radius-topright(.3em);
}
.ui-corner-bl {
- .LESSborder-radius-bottomleft(@style-corner-radius);
+ .LESSborder-radius-bottomleft(.3em);
}
.ui-corner-br {
- .LESSborder-radius-bottomright(@style-corner-radius);
+ .LESSborder-radius-bottomright(.3em);
}
.ui-corner-top {
- .LESSborder-radius-topleft(@style-corner-radius);
- .LESSborder-radius-topright(@style-corner-radius);
+ .LESSborder-radius-topleft(.3em);
+ .LESSborder-radius-topright(.3em);
}
.ui-corner-bottom {
- .LESSborder-radius-bottomleft(@style-corner-radius);
- .LESSborder-radius-bottomright(@style-corner-radius);
+ .LESSborder-radius-bottomleft(.3em);
+ .LESSborder-radius-bottomright(.3em);
}
.ui-corner-right {
- .LESSborder-radius-topright(@style-corner-radius);
- .LESSborder-radius-bottomright(@style-corner-radius);
+ .LESSborder-radius-topright(.3em);
+ .LESSborder-radius-bottomright(.3em);
}
.ui-corner-left {
- .LESSborder-radius-topleft(@style-corner-radius);
- .LESSborder-radius-bottomleft(@style-corner-radius);
+ .LESSborder-radius-topleft(.3em);
+ .LESSborder-radius-bottomleft(.3em);
}
.ui-corner-all {
- //.LESSborder-radius-all(@style-corner-radius);
+ //.LESSborder-radius-all(.3em);
}
.ui-corner-none {
.LESSborder-radius-all(0);
}
-/* Interaction cues
------------------------------------------------------------------------------------------------------------*/
-.ui-disabled {
- opacity: .3;
-}
-.ui-disabled,
-.ui-disabled a {
- cursor: default;
-}
-
-/* Icons
------------------------------------------------------------------------------------------------------------*/
-
-.ui-icon {
- /* global-icon */
- background-image: url(images/icons-18-white.png);
- background-repeat: no-repeat;
- // no radius for checkbox
- //.LESSborder-radius-all(9px);
-}
-
-.ui-image-search {
- background-image: url(images/00_search_icon.png);
- background-repeat: no-repeat;
- .LESSbackground-size(42 * @unit_base, 42 * @unit_base);
-}
-
-.ui-icon-deleteSearch {
- background-image: url(images/00_field_btn_Clear.png);
- background-repeat: no-repeat;
- .LESSbackground-size(38 * @unit_base, 38 * @unit_base);
-}
-
-
-/* Alt icon color
------------------------------------------------------------------------------------------------------------*/
-
-.ui-icon-alt {
- background: #fff;
- background: rgba(255,255,255,.3);
- background-image: url(images/icons-18-black.png);
- background-repeat: no-repeat;
-}
-
-/* HD/"retina" sprite
------------------------------------------------------------------------------------------------------------*/
-
-@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
- only screen and (min--moz-device-pixel-ratio: 1.5),
- only screen and (min-resolution: 240dpi) {
-
- .ui-icon-plus, .ui-icon-minus, .ui-icon-delete, .ui-icon-arrow-r,
- .ui-icon-arrow-l, .ui-icon-arrow-u, .ui-icon-arrow-d, .ui-icon-check,
- .ui-icon-gear, .ui-icon-refresh, .ui-icon-forward, .ui-icon-back,
- .ui-icon-grid, .ui-icon-star, .ui-icon-alert, .ui-icon-info, .ui-icon-home, .ui-icon-search, .ui-icon-searchfield:after,
- .ui-icon-checkbox-off, .ui-icon-checkbox-on, .ui-icon-radio-off, .ui-icon-radio-on {
- background-image: url(images/icons-36-white.png);
- .LESSbackground-size(776px, 18px);
- }
- .ui-icon-alt {
- background-image: url(images/icons-36-black.png);
- }
-}
-
-/* plus minus */
-.ui-icon-plus {
- background-position: -0 50%;
-}
-.ui-icon-minus {
- /*background-position: -36px 50%;*/ /* wongi_1018: Same name make problem. Later, origianl icons will be removed. */
-}
-
-/* arrows */
-.ui-icon-arrow-r {
- background-position: -108px 50%;
-}
-.ui-icon-arrow-l {
- background-position: -144px 50%;
-}
-.ui-icon-arrow-u {
- background-position: -180px 50%;
-}
-.ui-icon-arrow-d {
- background-position: -216px 50%;
-}
-
-/* misc */
-.ui-icon-check {
- background-position: -252px 50%;
-}
-.ui-icon-gear {
- background-position: -288px 50%;
-}
-.ui-icon-refresh {
- background-position: -324px 50%;
-}
-.ui-icon-forward {
- background-position: -360px 50%;
-}
-.ui-icon-back {
- background-position: -396px 50%;
-}
-.ui-icon-grid {
- background-position: -432px 50%;
-}
-.ui-icon-star {
- background-position: -468px 50%;
-}
-.ui-icon-alert {
- background-position: -504px 50%;
-}
-.ui-icon-info {
- background-position: -540px 50%;
-}
-.ui-icon-home {
- background-position: -576px 50%;
-}
-
-/* checks,radios */
-.ui-checkbox .ui-icon {
- .LESSborder-radius-all(3px);
-}
-//.ui-icon-checkbox-off,
-.ui-icon-radio-off {
- background-color: transparent;
-}
-.ui-checkbox-on .ui-icon,
-.ui-radio-on .ui-icon {
- /*Do not need bg color for icons..
- background-color: #4596ce;*/ /* NOTE: this hex should match the active state color. It's repeated here for cascade */
-}
-
-/* loading icon */
-.ui-icon-loading {
- background-image: url(images/ajax-loader.png);
- width: 40px;
- height: 40px;
- .LESSborder-radius-all(20px);
-}
-
-/* Add ctrl bar *//* TIZEN Default Footer */
- .ui-icon-ctrlbar-account_sign-up, .ui-icon-ctrlbar-accounts, .ui-icon-ctrlbar-add-to-bookmarks, .ui-icon-ctrlbar-add-to-calendar, .ui-icon-ctrlbar-alarm,
- .ui-icon-ctrlbar-albums, .ui-icon-ctrlbar-area, .ui-icon-ctrlbar-artist, .ui-icon-ctrlbar-attach, .ui-icon-ctrlbar-back,
- .ui-icon-ctrlbar-backward, .ui-icon-ctrlbar-bluetooth_preview, .ui-icon-ctrlbar-bookmarks, .ui-icon-ctrlbar-brightness, .ui-icon-ctrlbar-calendar,
- .ui-icon-ctrlbar-call, .ui-icon-ctrlbar-camera, .ui-icon-ctrlbar-category, .ui-icon-ctrlbar-change_group, .ui-icon-ctrlbar-chat,
- .ui-icon-ctrlbar-check, .ui-icon-ctrlbar-compose, .ui-icon-ctrlbar-composer, .ui-icon-ctrlbar-contacts, .ui-icon-ctrlbar-copy,
- .ui-icon-ctrlbar-create, .ui-icon-ctrlbar-create_folder, .ui-icon-ctrlbar-delete, .ui-icon-ctrlbar-dialer, .ui-icon-ctrlbar-DM,
- .ui-icon-ctrlbar-edit, .ui-icon-ctrlbar-editor, .ui-icon-ctrlbar-eng_eng_result, .ui-icon-ctrlbar-exchangs_register, .ui-icon-ctrlbar-Externalstorage,
- .ui-icon-ctrlbar-favorite, .ui-icon-ctrlbar-features, .ui-icon-ctrlbar-forward, .ui-icon-ctrlbar-genre, .ui-icon-ctrlbar-help,
- .ui-icon-ctrlbar-home, .ui-icon-ctrlbar-info, .ui-icon-ctrlbar-length, .ui-icon-ctrlbar-list_by, .ui-icon-ctrlbar-logs,
- .ui-icon-ctrlbar-map, .ui-icon-ctrlbar-memolist, .ui-icon-ctrlbar-MemoryCard, .ui-icon-ctrlbar-mention, .ui-icon-ctrlbar-menu,
- .ui-icon-ctrlbar-more, .ui-icon-ctrlbar-move, .ui-icon-ctrlbar-multiview, .ui-icon-ctrlbar-multiview_02, .ui-icon-ctrlbar-multiview_03,
- .ui-icon-ctrlbar-multiview_04, .ui-icon-ctrlbar-multiview_05, .ui-icon-ctrlbar-multiview_06, .ui-icon-ctrlbar-multiview_07, .ui-icon-ctrlbar-multiview_08,
- .ui-icon-ctrlbar-multiview_09, .ui-icon-ctrlbar-music_albums, .ui-icon-ctrlbar-pause, .ui-icon-ctrlbar-phone, .ui-icon-ctrlbar-Play,
- .ui-icon-ctrlbar-playlists, .ui-icon-ctrlbar-receive, .ui-icon-ctrlbar-reply, .ui-icon-ctrlbar-save, .ui-icon-ctrlbar-save_to_calender,
- .ui-icon-ctrlbar-scrap, .ui-icon-ctrlbar-search, .ui-icon-ctrlbar-send, .ui-icon-ctrlbar-set_as, .ui-icon-ctrlbar-settings,
- .ui-icon-ctrlbar-setup_wizard_previous, .ui-icon-ctrlbar-share, .ui-icon-ctrlbar-songs, .ui-icon-ctrlbar-stop_watch, .ui-icon-ctrlbar-store,
- .ui-icon-ctrlbar-synchronise_start_sync, .ui-icon-ctrlbar-synchronise_stop_01, .ui-icon-ctrlbar-synchronise_stop_02, .ui-icon-ctrlbar-synchronise_stop_03, .ui-icon-ctrlbar-view_result,
- .ui-icon-ctrlbar-tag, .ui-icon-ctrlbar-temp, .ui-icon-ctrlbar-timeline, .ui-icon-ctrlbar-timer, .ui-icon-ctrlbar-today,
- .ui-icon-ctrlbar-top, .ui-icon-ctrlbar-trim, .ui-icon-ctrlbar-TTS, .ui-icon-ctrlbar-update, .ui-icon-ctrlbar-upload_export,
- .ui-icon-ctrlbar-volume, .ui-icon-ctrlbar-world_clock, .ui-icon-ctrlbar-year, .ui-icon-ctrlbar-add_tag, .ui-icon-ctrlbar-add_to_contact,
- .ui-icon-ctrlbar-close, .ui-icon-ctrlbar-groups, .ui-icon-ctrlbar-year, .ui-icon-ctrlbar-unread_message, .ui-icon-ctrlbar-weight,
- .ui-icon-ctrlbar-3Dview, .ui-icon-ctrlbar-cancel, .ui-icon-ctrlbar-done, .ui-icon-ctrlbar-lock, .ui-icon-ctrlbar-next,
- .ui-icon-ctrlbar-previous, .ui-icon-ctrlbar-print, .ui-icon-ctrlbar-Ringtone, .ui-icon-ctrlbar-Save_the_word, .ui-icon-ctrlbar-Save_in_memo,
- .ui-icon-ctrlbar-scan, .ui-icon-ctrlbar-unlock, .ui-icon-ctrlbar-videocall, .ui-icon-ctrlbar-Voice_command, .ui-icon-ctrlbar-Add-buddy_to_chat,
- .ui-icon-ctrlbar-add_tag, .ui-icon-ctrlbar-Chat, .ui-icon-ctrlbar-view_file_history
- {
- background-color : transparent;
- .LESSborder-radius-all(0px);
- background-size: 100% 100%;
-
- .LESSbox-shadow(0px,0px,0, rgba(255,255,255,.4));
- }
-
- .ui-icon-ctrlbar-account_sign-up {
- background-image: url(images/controlbar/01_controlbar_icon_account_sign-up.png);
- }
- .ui-icon-ctrlbar-accounts {
- background-image: url(images/controlbar/01_controlbar_icon_accounts.png);
- }
- .ui-icon-ctrlbar-add-to-bookmarks {
- background-image: url(images/controlbar/01_controlbar_icon_add-to-bookmarks.png);
- }
- .ui-icon-ctrlbar-add-to-calendar {
- background-image: url(images/controlbar/01_controlbar_icon_add-to-calendar.png);
- }
- .ui-icon-ctrlbar-alarm {
- background-image: url(images/controlbar/01_controlbar_icon_alarm.png);
- }
- .ui-icon-ctrlbar-albums {
- background-image: url(images/controlbar/01_controlbar_icon_albums.png);
- }
- .ui-icon-ctrlbar-area {
- background-image: url(images/controlbar/01_controlbar_icon_area.png);
- }
- .ui-icon-ctrlbar-artist {
- background-image: url(images/controlbar/01_controlbar_icon_artist.png);
- }
- .ui-icon-ctrlbar-attach {
- background-image: url(images/controlbar/01_controlbar_icon_attach.png);
- }
- .ui-icon-ctrlbar-back {
- background-image: url(images/controlbar/01_controlbar_icon_back.png);
- }
- .ui-icon-ctrlbar-backward {
- background-image: url(images/controlbar/01_controlbar_icon_backward.png);
- }
- .ui-icon-ctrlbar-bluetooth_preview {
- background-image: url(images/controlbar/01_controlbar_icon_bluetooth_preview.png);
- }
- .ui-icon-ctrlbar-bookmarks {
- background-image: url(images/controlbar/01_controlbar_icon_bookmarks.png);
- }
- .ui-icon-ctrlbar-brightness {
- background-image: url(images/controlbar/01_controlbar_icon_brightness.png);
- }
- .ui-icon-ctrlbar-calendar {
- background-image: url(images/controlbar/01_controlbar_icon_calendar.png);
- }
- .ui-icon-ctrlbar-call {
- background-image: url(images/controlbar/01_controlbar_icon_call.png);
- }
- .ui-icon-ctrlbar-camera {
- background-image: url(images/controlbar/01_controlbar_icon_camera.png);
- }
- .ui-icon-ctrlbar-category {
- background-image: url(images/controlbar/01_controlbar_icon_category.png);
- }
- .ui-icon-ctrlbar-change_group {
- background-image: url(images/controlbar/01_controlbar_icon_change_group.png);
- }
- .ui-icon-ctrlbar-chat {
- background-image: url(images/controlbar/01_controlbar_icon_chat.png);
- }
- .ui-icon-ctrlbar-check {
- background-image: url(images/controlbar/01_controlbar_icon_check.png);
- }
- .ui-icon-ctrlbar-compose {
- background-image: url(images/controlbar/01_controlbar_icon_compose.png);
- }
- .ui-icon-ctrlbar-composer {
- background-image: url(images/controlbar/01_controlbar_icon_composer.png);
- }
- .ui-icon-ctrlbar-contacts {
- background-image: url(images/controlbar/01_controlbar_icon_contacts.png);
- }
- .ui-icon-ctrlbar-copy {
- background-image: url(images/controlbar/01_controlbar_icon_copy.png);
- }
- .ui-icon-ctrlbar-create {
- background-image: url(images/controlbar/01_controlbar_icon_create.png);
- }
- .ui-icon-ctrlbar-create_folder {
- background-image: url(images/controlbar/01_controlbar_icon_create_folder.png);
- }
- .ui-icon-ctrlbar-delete {
- background-image: url(images/controlbar/01_controlbar_icon_delete.png);
- }
- .ui-icon-ctrlbar-dialer {
- background-image: url(images/controlbar/01_controlbar_icon_dialer.png);
- }
- .ui-icon-ctrlbar-DM {
- background-image: url(images/controlbar/01_controlbar_icon_DM.png);
- }
- .ui-icon-ctrlbar-edit {
- background-image: url(images/controlbar/01_controlbar_icon_edit.png);
- }
- .ui-icon-ctrlbar-editor {
- background-image: url(images/controlbar/01_controlbar_icon_editor.png);
- }
- .ui-icon-ctrlbar-eng_eng_result {
- background-image: url(images/controlbar/01_controlbar_icon_eng_eng_result.png);
- }
- .ui-icon-ctrlbar-exchangs_register {
- background-image: url(images/controlbar/01_controlbar_icon_exchangs_register.png);
- }
- .ui-icon-ctrlbar-Externalstorage {
- background-image: url(images/controlbar/01_controlbar_icon_Externalstorage.png);
- }
- .ui-icon-ctrlbar-favorite {
- background-image: url(images/controlbar/01_controlbar_icon_favorite.png);
- }
- .ui-icon-ctrlbar-features {
- background-image: url(images/controlbar/01_controlbar_icon_features.png);
- }
- .ui-icon-ctrlbar-forward {
- background-image: url(images/controlbar/01_controlbar_icon_forward.png);
- }
- .ui-icon-ctrlbar-genre {
- background-image: url(images/controlbar/01_controlbar_icon_genre.png);
- }
- .ui-icon-ctrlbar-help {
- background-image: url(images/controlbar/01_controlbar_icon_help.png);
- }
- .ui-icon-ctrlbar-home {
- background-image: url(images/controlbar/01_controlbar_icon_home.png);
- }
- .ui-icon-ctrlbar-info {
- background-image: url(images/controlbar/01_controlbar_icon_info.png);
- }
- .ui-icon-ctrlbar-length {
- background-image: url(images/controlbar/01_controlbar_icon_length.png);
- }
- .ui-icon-ctrlbar-list_by {
- background-image: url(images/controlbar/01_controlbar_icon_list_by.png);
- }
- .ui-icon-ctrlbar-logs {
- background-image: url(images/controlbar/01_controlbar_icon_logs.png);
- }
- .ui-icon-ctrlbar-map {
- background-image: url(images/controlbar/01_controlbar_icon_map.png);
- }
- .ui-icon-ctrlbar-memolist {
- background-image: url(images/controlbar/01_controlbar_icon_memolist.png);
- }
- .ui-icon-ctrlbar-MemoryCard {
- background-image: url(images/controlbar/01_controlbar_icon_MemoryCard.png);
- }
- .ui-icon-ctrlbar-mention {
- background-image: url(images/controlbar/01_controlbar_icon_mention.png);
- }
- .ui-icon-ctrlbar-menu {
- background-image: url(images/controlbar/01_controlbar_icon_menu.png);
- }
- .ui-icon-ctrlbar-more {
- background-image: url(images/controlbar/01_controlbar_icon_more.png);
- }
- .ui-icon-ctrlbar-move {
- background-image: url(images/controlbar/01_controlbar_icon_move.png);
- }
- .ui-icon-ctrlbar-multiview {
- background-image: url(images/controlbar/01_controlbar_icon_multiview.png);
- }
- .ui-icon-ctrlbar-multiview_02 {
- background-image: url(images/controlbar/01_controlbar_icon_multiview_02.png);
- }
- .ui-icon-ctrlbar-multiview_03 {
- background-image: url(images/controlbar/01_controlbar_icon_multiview_03.png);
- }
- .ui-icon-ctrlbar-multiview_04 {
- background-image: url(images/controlbar/01_controlbar_icon_multiview_04.png);
- }
- .ui-icon-ctrlbar-multiview_05 {
- background-image: url(images/controlbar/01_controlbar_icon_multiview_05.png);
- }
- .ui-icon-ctrlbar-multiview_06 {
- background-image: url(images/controlbar/01_controlbar_icon_multiview_06.png);
- }
- .ui-icon-ctrlbar-multiview_07 {
- background-image: url(images/controlbar/01_controlbar_icon_multiview_07.png);
- }
- .ui-icon-ctrlbar-multiview_08 {
- background-image: url(images/controlbar/01_controlbar_icon_multiview_08.png);
- }
- .ui-icon-ctrlbar-multiview_09 {
- background-image: url(images/controlbar/01_controlbar_icon_multiview_09.png);
- }
- .ui-icon-ctrlbar-music_albums {
- background-image: url(images/controlbar/01_controlbar_icon_music_albums.png);
- }
- .ui-icon-ctrlbar-pause {
- background-image: url(images/controlbar/01_controlbar_icon_pause.png);
- }
- .ui-icon-ctrlbar-phone {
- background-image: url(images/controlbar/01_controlbar_icon_phone.png);
- }
- .ui-icon-ctrlbar-Play {
- background-image: url(images/controlbar/01_controlbar_icon_Play.png);
- }
- .ui-icon-ctrlbar-playlists {
- background-image: url(images/controlbar/01_controlbar_icon_playlists.png);
- }
- .ui-icon-ctrlbar-receive {
- background-image: url(images/controlbar/01_controlbar_icon_receive.png);
- }
- .ui-icon-ctrlbar-reply {
- background-image: url(images/controlbar/01_controlbar_icon_reply.png);
- }
- .ui-icon-ctrlbar-save {
- background-image: url(images/controlbar/01_controlbar_icon_save.png);
- }
- .ui-icon-ctrlbar-save_to_calender {
- background-image: url(images/controlbar/01_controlbar_icon_save_to_calender.png);
- }
- .ui-icon-ctrlbar-scrap {
- background-image: url(images/controlbar/01_controlbar_icon_scrap.png);
- }
- .ui-icon-ctrlbar-search {
- background-image: url(images/controlbar/01_controlbar_icon_search.png);
- }
- .ui-icon-ctrlbar-send {
- background-image: url(images/controlbar/01_controlbar_icon_send.png);
- }
- .ui-icon-ctrlbar-set_as {
- background-image: url(images/controlbar/01_controlbar_icon_set_as.png);
- }
- .ui-icon-ctrlbar-settings {
- background-image: url(images/controlbar/01_controlbar_icon_settings.png);
- }
- .ui-icon-ctrlbar-setup_wizard_previous {
- background-image: url(images/controlbar/01_controlbar_icon_setup_wizard_previous.png);
- }
- .ui-icon-ctrlbar-share {
- background-image: url(images/controlbar/01_controlbar_icon_share.png);
- }
- .ui-icon-ctrlbar-songs {
- background-image: url(images/controlbar/01_controlbar_icon_songs.png);
- }
- .ui-icon-ctrlbar-stop_watch {
- background-image: url(images/controlbar/01_controlbar_icon_stop_watch.png);
- }
- .ui-icon-ctrlbar-store {
- background-image: url(images/controlbar/01_controlbar_icon_store.png);
- }
- .ui-icon-ctrlbar-synchronise_start_sync {
- background-image: url(images/controlbar/01_controlbar_icon_synchronise_start_sync.png);
- }
- .ui-icon-ctrlbar-synchronise_stop_01 {
- background-image: url(images/controlbar/01_controlbar_icon_synchronise_stop_01.png);
- }
- .ui-icon-ctrlbar-synchronise_stop_02 {
- background-image: url(images/controlbar/01_controlbar_icon_synchronise_stop_02.png);
- }
- .ui-icon-ctrlbar-synchronise_stop_03 {
- background-image: url(images/controlbar/01_controlbar_icon_synchronise_stop_03.png);
- }
- .ui-icon-ctrlbar-synchronise_view_result {
- background-image: url(images/controlbar/01_controlbar_icon_synchronise_view_result.png);
- }
- .ui-icon-ctrlbar-tag {
- background-image: url(images/controlbar/01_controlbar_icon_tag.png);
- }
- .ui-icon-ctrlbar-temp {
- background-image: url(images/controlbar/01_controlbar_icon_temp.png);
- }
- .ui-icon-ctrlbar-timeline {
- background-image: url(images/controlbar/01_controlbar_icon_timeline.png);
- }
- .ui-icon-ctrlbar-timer {
- background-image: url(images/controlbar/01_controlbar_icon_timer.png);
- }
- .ui-icon-ctrlbar-today {
- background-image: url(images/controlbar/01_controlbar_icon_today.png);
- }
- .ui-icon-ctrlbar-top {
- background-image: url(images/controlbar/01_controlbar_icon_top.png);
- }
- .ui-icon-ctrlbar-trim {
- background-image: url(images/controlbar/01_controlbar_icon_trim.png);
- }
- .ui-icon-ctrlbar-TTS {
- background-image: url(images/controlbar/01_controlbar_icon_TTS.png);
- }
- .ui-icon-ctrlbar-update {
- background-image: url(images/controlbar/01_controlbar_icon_update.png);
- }
- .ui-icon-ctrlbar-upload_export {
- background-image: url(images/controlbar/01_controlbar_icon_upload_export.png);
- }
- .ui-icon-ctrlbar-volume {
- background-image: url(images/controlbar/01_controlbar_icon_volume.png);
- }
- .ui-icon-ctrlbar-world_clock {
- background-image: url(images/controlbar/01_controlbar_icon_world_clock.png);
- }
- .ui-icon-ctrlbar-year {
- background-image: url(images/controlbar/01_controlbar_icon_year.png);
- }
- .ui-icon-ctrlbar-add_tag {
- background-image: url(images/controlbar/01_controlbar_icon_add_tag.png);
- }
- .ui-icon-ctrlbar-add_to_contact {
- background-image: url(images/controlbar/01_controlbar_icon_add_to_contact.png);
- }
- .ui-icon-ctrlbar-close {
- background-image: url(images/controlbar/01_controlbar_icon_close.png);
- }
- .ui-icon-ctrlbar-groups {
- background-image: url(images/controlbar/01_controlbar_icon_groups.png);
- }
- .ui-icon-ctrlbar-unread_message {
- background-image: url(images/controlbar/01_controlbar_icon_unread_message.png);
- }
- .ui-icon-ctrlbar-weight {
- background-image: url(images/controlbar/01_controlbar_icon_weight.png);
- }
- .ui-icon-ctrlbar-3Dview {
- background-image: url(images/controlbar/01_controlbar_icon_3Dview.png);
- }
- .ui-icon-ctrlbar-cancel {
- background-image: url(images/controlbar/01_controlbar_icon_cancel.png);
- }
- .ui-icon-ctrlbar-done {
- background-image: url(images/controlbar/01_controlbar_icon_done.png);
- }
- .ui-icon-ctrlbar-lock {
- background-image: url(images/controlbar/01_controlbar_icon_lock.png);
- }
- .ui-icon-ctrlbar-next {
- background-image: url(images/controlbar/01_controlbar_icon_next.png);
- }
- .ui-icon-ctrlbar-previous {
- background-image: url(images/controlbar/01_controlbar_icon_previous.png);
- }
- .ui-icon-ctrlbar-print {
- background-image: url(images/controlbar/01_controlbar_icon_print.png);
- }
- .ui-icon-ctrlbar-Ringtone {
- background-image: url(images/controlbar/01_controlbar_icon_Ringtone.png);
- }
- .ui-icon-ctrlbar-Save_the_word {
- background-image: url(images/controlbar/01_controlbar_icon_Save_the_word.png);
- }
- .ui-icon-ctrlbar-Save_in_memo {
- background-image: url(images/controlbar/01_controlbar_icon_Save_in_memo.png);
- }
- .ui-icon-ctrlbar-scan {
- background-image: url(images/controlbar/01_controlbar_icon_scan.png);
- }
- .ui-icon-ctrlbar-unlock {
- background-image: url(images/controlbar/01_controlbar_icon_unlock.png);
- }
- .ui-icon-ctrlbar-videocall {
- background-image: url(images/controlbar/01_controlbar_icon_videocall.png);
- }
- .ui-icon-ctrlbar-Voice_command {
- background-image: url(images/controlbar/01_controlbar_icon_Voice_command.png);
- }
- .ui-icon-ctrlbar-Add_buddy_to_chat {
- background-image: url(images/controlbar/01_controlbar_icon_Add_buddy_to_chat.png);
- }
- .ui-icon-ctrlbar-add_tag {
- background-image: url(images/controlbar/01_controlbar_icon_add_tag.png);
- }
- .ui-icon-ctrlbar-Chat {
- background-image: url(images/controlbar/01_controlbar_icon_Chat.png);
- }
- .ui-icon-ctrlbar-view_file_history {
- background-image: url(images/controlbar/01_controlbar_icon_view_file_history.png);
+/***************************************************************************
+ Icon (Naviframe)
+***************************************************************************/
+.ui-header, .ui-footer {
+ .ui-btn .ui-btn-icon-only .ui-icon {
+ width: 32 * @unit_base;
+ height: 32 * @unit_base;
+
}
-/* ---------------------------------------------- */
-
-
-
-
-
-
-
-
-/* Button corner classes
------------------------------------------------------------------------------------------------------------*/
-
-.ui-btn-corner-tl {
- .LESSborder-radius-topleft(1em);
-}
-.ui-btn-corner-tr {
- .LESSborder-radius-topright(1em);
-}
-.ui-btn-corner-bl {
- .LESSborder-radius-bottomleft(1em);
-}
-.ui-btn-corner-br {
- .LESSborder-radius-bottomright(1em);
-}
-.ui-btn-corner-top {
- .LESSborder-radius-topleft(1em);
- .LESSborder-radius-topright(1em);
-}
-.ui-btn-corner-bottom {
- .LESSborder-radius-bottomleft(1em);
- .LESSborder-radius-bottomright(1em);
-}
-.ui-btn-corner-right {
- .LESSborder-radius-topright(1em);
- .LESSborder-radius-bottomright(1em);
-}
-.ui-btn-corner-left {
- .LESSborder-radius-topleft(1em);
- .LESSborder-radius-bottomleft(1em);
-}
-.ui-btn-corner-all {
- .LESSborder-radius-all(0.2em); //wongi_1013
-}
-
-/* radius clip workaround for cleaning up corner trapping */
-.ui-corner-tl,
-.ui-corner-tr,
-.ui-corner-bl,
-.ui-corner-br,
-.ui-corner-top,
-.ui-corner-bottom,
-.ui-corner-right,
-.ui-corner-left,
-.ui-corner-all,
-.ui-btn-corner-tl,
-.ui-btn-corner-tr,
-.ui-btn-corner-bl,
-.ui-btn-corner-br,
-.ui-btn-corner-top,
-.ui-btn-corner-bottom,
-.ui-btn-corner-right,
-.ui-btn-corner-left,
-.ui-btn-corner-all {
- -webkit-background-clip: padding-box;
- -moz-background-clip: padding;
- background-clip: padding-box;
-}
-
-/* Overlay / modal
------------------------------------------------------------------------------------------------------------*/
-
-.ui-overlay {
- background: #666;
- opacity: .5;
- filter: Alpha(Opacity=50);
- position: absolute;
- width: 100%;
- height: 100%;
-}
-.ui-overlay-shadow {
- //.LESSbox-shadow(0px, 0px, 12px, rgba(0,0,0,.6));
-}
-.ui-shadow {
- //.LESSbox-shadow(0px, 1px, 4px, rgba(0,0,0,.3));
-}
-.ui-bar-a .ui-shadow,
-.ui-bar-b .ui-shadow ,
-.ui-bar-c .ui-shadow {
- //.LESSbox-shadow(0px, 1px, 0, rgba(255,255,255,.3));
-}
-.ui-shadow-inset {
- //-moz-box-shadow: inset 0px 1px 4px rgba(0,0,0,.2);
- //-webkit-box-shadow: inset 0px 1px 4px rgba(0,0,0,.2);
- //box-shadow: inset 0px 1px 4px rgba(0,0,0,.2);
}
-.ui-icon-shadow {
- //.LESSbox-shadow(0px, 1px, 0, rgba(255,255,255,.4));
-}
-
-/* Focus state - set here for specificity
------------------------------------------------------------------------------------------------------------*/
-.ui-focus {
- /* global-active-background-color */
- //.LESSbox-shadow(0px, 1px, 12px, #387bbe);
- outline-color : #008cd2;
-}
+.ui-btn-back .ui-btn-inner .ui-icon-header-back-btn {
+ width: 32 * @unit_base;
+ height: 32 * @unit_base;
-/* unset box shadow in browsers that don't do it right
------------------------------------------------------------------------------------------------------------*/
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
-.ui-mobile-nosupport-boxshadow * {
- -ms-box-shadow: none !important;
- -o-box-shadow: none !important;
- -moz-box-shadow: none !important;
- -webkit-box-shadow: none !important;
- box-shadow: none !important;
}
-/* ...and bring back focus */
-.ui-mobile-nosupport-boxshadow .ui-focus {
- outline-width: 2px;
+.ui-btn-up-s {
+ .ui-icon-header-back-btn { background-image: url(images/00_icon_Back.png); }
+ .ui-icon-naviframe-more { background-image: url(images/00_icon_more.png); }
+ .ui-icon-naviframe-cancel { background-image: url(images/00_icon_cancel.png); }
+ .ui-icon-naviframe-edit { background-image: url(images/00_icon_edit.png); }
+ .ui-icon-naviframe-plus { background-image: url(images/00_icon_plus.png); }
+}
+
+.ui-btn-down-s, .ui-btn-hover-s {
+ .ui-icon-header-back-btn { background-image: url(images/00_icon_Back_press.png); }
+ .ui-icon-naviframe-more { background-image: url(images/00_icon_more_press.png); }
+ .ui-icon-naviframe-cancel { background-image: url(images/00_icon_cancel_press.png); }
+ .ui-icon-naviframe-edit { background-image: url(images/00_icon_edit_press.png); }
+ .ui-icon-naviframe-plus { background-image: url(images/00_icon_plus_press.png); }
}
--- /dev/null
+@import "config.less";
+
+/***************************************************************************
+ Controlbar
+***************************************************************************/
+.ui-controlbar {
+ background : @color_bg;
+ z-index : 1000;
+ &.ui-portrait-controlbar {
+ height : 55 * @unit_base;
+ }
+ &.ui-landscape-controlbar {
+ height : 55 * @unit_base;
+ }
+
+ a.ui-btn {
+ background : @color_bg;
+ color : rgba(153, 153, 153, 1);
+
+ .ui-icon {
+ width: 32 * @unit_base;
+ height: 32 * @unit_base;
+
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+ }
+ }
+
+ a.ui-btn.ui-btn-active {
+ color : rgba(59, 115, 182, 1);
+ }
+
+/* move concept strange */
+ a.ui-btn.ui-btn-active {
+ background : -webkit-linear-gradient(top, rgba(169,165,151,1) 0%,rgba(246,248,239,1) 100%);
+
+ }
+
+ .ui-btn-inner {
+ padding-top : 44 * @unit_base;
+ padding-bottom : 3 * @unit_base;
+
+ font-size : 15 * @unit_base;
+ font-weight : bold;
+
+ .ui-icon {
+ top : 10 * @unit_base;
+
+ left : 50%;
+ margin-left : -16 * @unit_base;
+ }
+ }
+
+/* .ui-ctrl-btn-style {
+ width : 196 * @unit_base;
+ }*/
+ &.ui-controlbar-noicons {
+ .ui-btn-inner {
+ padding-top : 19 * @unit_base;
+ padding-bottom : 18 * @unit_base;
+ }
+ }
+
+ &.ui-controlbar-notext {
+ .ui-btn-inner {
+ padding-top : 50 * @unit_base;
+ padding-bottom : 5 * @unit_base;
+
+ .ui-icon {
+ top : 11 * @unit_base;
+ }
+ }
+ }
+}
+
+/* title font size when title controlbar */
+.ui-header.ui-bar-s.ui-title-controlbar {
+ .ui-title {
+ font-size : 22 * @unit_base;
+ margin-top : 8 * @unit_base;
+ margin-bottom : 0 * @unit_base;
+ }
+
+ .ui-controlbar {
+ &.ui-controlbar-noicons {
+ .ui-btn-inner {
+ padding-top : 15 * @unit_base;
+ padding-bottom : 13 * @unit_base;
+ }
+ }
+
+ &.ui-controlbar-notext {
+ .ui-btn-inner {
+ padding-top : 47 * @unit_base;
+ padding-bottom : 0 * @unit_base;
+ }
+ }
+
+ &.ui-portrait-controlbar {
+ height : 47 * @unit_base;
+ }
+
+ &.ui-landscape-controlbar {
+ height : 40 * @unit_base;
+ }
+ }
+}
+
+.ui-header.ui-bar-s {
+ &.ui-title-controlbar-multiline {
+ height : 75 * @unit_base;
+ .ui-portrait-controlbar {
+ height : 75 * @unit_base;
+ .ui-btn-inner {
+ padding-top : 45 * @unit_base;
+ padding-bottom : 10 * @unit_base;
+ }
+ }
+ }
+}
+
+
+.ui-footer.ui-bar-s {
+ .ui-controlbar {
+ height : 49 * @unit_base;
+
+ margin-left : auto;
+ margin-right : auto;
+
+ .ui-btn-inner {
+ .ui-icon {
+ top : 7 * @unit_base;
+ }
+ }
+ }
+
+ .ui-controlbar.ui-controlbar-margin-back {
+ margin-right : 56 * @unit_base;
+ }
+
+ .ui-controlbar.ui-controlbar-margin-more {
+ margin-left : 56 * @unit_base;
+ }
+
+}
+
+.ui-controlbar-s.ui-navbar-noicons {
+ font-size : 22 * @unit_base;
+}
+
+.ui-btn-up-s {
+ .ui-icon-ctrl-edit { background-image: url(images/controlbar/00_ctrl_edit.png); }
+
+}
+
+.ui-btn-down-s, .ui-btn-hover-s, .ui-btn-active {
+ .ui-icon-ctrl-edit { background-image: url(images/controlbar/00_ctrl_edit_press.png); }
+}
\ No newline at end of file
.ui-listview > .ui-li {
color: @color_ctxpopup_text;
border-bottom-color: @color_ctxpopup_border_bottom;
- padding: 0 7 * @unit_base;
+ border-top-width: 1px;
+ border-top-color: @color_ctxpopup_border_top;
+ padding: 0 10 * @unit_base;
+ margin-left: 0;
+ margin-right: 0;
+ &:first-child, &:last-child {
+ border-top-width: 0px;
+ }
}
.ui-listview li.ui-btn-up-s > .ui-li > .ui-btn-text > a.ui-link-inherit, .ui-listview li.ui-btn-hover-s > .ui-li > .ui-btn-text > a.ui-link-inherit, .ui-listview li.ui-btn-down-s > .ui-li > .ui-btn-text > a.ui-link-inherit {
.horizontal {
color: @color_ctxpopup_text;
max-width: 648 * @unit_base;
-
.icon .ui-btn {
padding: 0;
- background: transparent;
-
+ background: transparent ! important;
.ui-btn-icon-only {
- width: 128 * @unit_base;
- height: 92 * @unit_base;
+ width: 96 * @unit_base;
+ height: 64 * @unit_base;
padding: 0;
}
.text {
padding: 0 20 * @unit_base;
- min-width: 128 * @unit_base;
+ min-width: 96 * @unit_base;
}
}
li {
- line-height: 92 * @unit_base;
- min-height: 92 * @unit_base;
- min-width: 128 * @unit_base;
+ line-height: 64 * @unit_base;
+ min-height: 64 * @unit_base;
+ min-width: 96 * @unit_base;
float: left;
display: inline-block;
}
li:active, td:active {
- background: @color_bar_back_btn_press;
+ background: @color_ctxbutton_press;
}
}
.ui-datetime {
margin: 0;
- height: 72 * @unit_base;
+ height: 36 * @unit_base;
}
.ui-datetime-text-main {
position: relative;
- font-size: @font_size_list_main_text;
- top: 28 * @unit_base;
+ font-size: @font_size_datetime_main_text;
+ top: 0 ;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
.ui-datetime-text-main .ui-datefield-period.ui-btn {
margin-top: -0.3em;
- height: 56 * @unit_base;
+ height: 28 * @unit_base;
right: auto;
position: relative;
}
-.ui-datetime-text-main.ui-datetime-nosubtitle {
- top : 0px;
-}
-
.ui-datetime-text-sub {
- position: absolute;
- top: 10 * @unit_base;
- color: @color_list_sub_text_default;
- font-size: @font_size_list_sub_text;
+ top: 15 * @unit_base ! important;
+ color: @color_list_divider_text ! important;
+ background: transparent ! important;
+ font-size: @font_size_datetime_sub_text ! important;
}
.ui-datetimepicker-selector {
margin: 0;
li {
- font-size: 44 * @unit_base;
+ font-size: 22 * @unit_base;
float: left;
- padding: 30 * @unit_base 8 * @unit_base 0 8 * @unit_base;
- max-width: 120 * @unit_base;
- min-width: 120 * @unit_base;
+ padding: 15 * @unit_base 4 * @unit_base 0 4 * @unit_base;
+ max-width: 60 * @unit_base;
+ min-width: 60 * @unit_base;
a.ui-link {
text-decoration: none;
text-align: center !important;
div {
- height: 106 * @unit_base;
+ height: 53 * @unit_base;
}
}
}
* 'config.less' in each theme must include this file.
*/
-@font_size_default: 36px; // Default unit font size. DO NOT USE THIS VALUE IN WIDGET CSS!
+@font_size_default: 22px; // Default unit font size. DO NOT USE THIS VALUE IN WIDGET CSS!
@rem_base: (1rem/@font_size_default);
@em_base: 1em/@font_size_default; // WARNING: Don't use em unit! This value is to be removed.
-webkit-box-shadow: @hshadow @vshadow @blur @color;
box-shadow: @hshadow @vshadow @blur @color;
}
+
+.LESSbox-shadow-line( @value ) {
+ -o-box-shadow: @value;
+ -ms-box-shadow: @value;
+ -moz-box-shadow: @value;
+ -webkit-box-shadow: @value;
+ box-shadow: @value;
+}
+
+.LESSbox-boxsizing( @value ) {
+ -o-box-sizing: @value;
+ -ms-box-sizing: @value;
+ -moz-box-sizing: @value;
+ -webkit-box-sizing: @value;
+ box-sizing: @value;
+}
+
.LESSdisplaybox() {
display:-moz-box;
display:-webkit-box;
.LESStext-no-ellipsis() {
white-space: normal;
overflow: visible !important;
-}
\ No newline at end of file
+}
@import "config.less";
-@img-width: 314 * @unit_base;
-@img-height: 310 * @unit_base;
+@img-width: 140 * @unit_base;
+@img-height: 140 * @unit_base;
.ui-nocontents {
position: relative;
left: 0;
width: 100%;
- height: 508 * @unit_base;
}
.ui-nocontents-icon-text,
display: block;
width: @img-width;
height: @img-height;
+ left: 50%;
+ margin-left: -(@img-width / 2);
background: url(images/00_Nocontents_text.png) no-repeat;
.LESSbackground-size(@img-width, @img-height);
.ui-nocontents-text {
position: absolute;
margin: 0;
- height: 46 * @unit_base;
+ height: 19 * @unit_base;
width: 100%;
+ font-size: 0.72rem;
text-align: center;
color: @color_nocontents_text;
}
/* tickernoti */
-@ticker-height: 100 * @unit_base;
+@ticker-height: 50 * @unit_base;
@-webkit-keyframes ui-ticker-show {
from {
.ui-ticker-btn {
position: relative;
- height: 54 * @unit_base;
- margin-top: 23 * @unit_base;
- margin-left: 16 * @unit_base;
- margin-right: 16 * @unit_base;
+ margin-top: 10 * @unit_base;
+ margin-left: 8 * @unit_base;
+ margin-right: 8 * @unit_base;
vertical-align: middle;
float: right;
.ui-btn-inner {
- padding: 0.3em 0.7em;
+ padding: 0.2rem 0 0 0;
+ height: 28 * @unit_base;
+ width: 77 * @unit_base;
+ font-size: 0.81rem;
background: @color_ticker_btn;
}
}
.ui-ticker-icon {
position: absolute;
top: 0;
- height: 64 * @unit_base;
- width: 64 * @unit_base;
- margin-top: 18 * @unit_base;
- margin-bottom: 18 * @unit_base;
- margin-left: 16 * @unit_base;
- margin-right: 16 * @unit_base;
+ height: 32 * @unit_base;
+ width: 32 * @unit_base;
+ margin-top: 9 * @unit_base;
+ margin-bottom: 9 * @unit_base;
+ margin-left: 8 * @unit_base;
+ margin-right: 8 * @unit_base;
vertical-align: middle;
}
.ui-ticker-text1-bg {
position: absolute;
top: 0;
- height: 32 * @unit_base;
- left: 96 * @unit_base;
- margin-top: 16 * @unit_base;
+ height: 18 * @unit_base;
+ left: 48 * @unit_base;
+ margin-top: 8 * @unit_base;
+ font-size: 0.68rem;
color: @color_ticker_text1;
}
.ui-ticker-text2-bg {
position: absolute;
top: 0;
- height: 32 * @unit_base;
- left: 96 * @unit_base;
- margin-top: 52 * @unit_base;
- font-size: 0.9em;
+ height: 16 * @unit_base;
+ left: 48 * @unit_base;
+ margin-top: 26 * @unit_base;
+ font-size: 0.54rem;
color: @color_ticker_text2;
}
z-index: @z_base_smallpopup;
background: @color_smallpopup_bg;
vertical-align: middle;
+ font-size: 0.72rem;
word-break: break-all;
}
.ui-smallpopup-text-bg {
position: relative;
- margin-top: 6 * @unit_base;
- margin-bottom: 6 * @unit_base;
- margin-left: 16 * @unit_base;
- margin-right: 16 * @unit_base;
+ margin-top: 4 * @unit_base;
+ margin-bottom: 4 * @unit_base;
+ margin-left: 8 * @unit_base;
+ margin-right: 8 * @unit_base;
color: @color_smallpopup_text;
}
.LESSpagecontrolIconCommonProperties(@imgUrl) {
background-image: url(@imgUrl);
- background-size: 52 * @unit_base;
+ background-size: 10 * @unit_base 9 * @unit_base;
// Transition
-ms-transition: background 0.5s ease;
&> div.page_n {
display: inline-block;
border: 0;
- width: 52 * @unit_base;
- height: 52 * @unit_base;
+ width: 10 * @unit_base;
+ height: 9 * @unit_base;
}
- &> div.page_n_margin_44 { .LESSpagecontrolIconMargin(22, 22); }
- // NOTE: Reduces 2 picels for each margin, to show properly with Tizen emulator.
- &> div.page_n_margin_35 { .LESSpagecontrolIconMargin(17, 16; }
- &> div.page_n_margin_26 { .LESSpagecontrolIconMargin(12, 12); }
- &> div.page_n_margin_19 { .LESSpagecontrolIconMargin(9, 8); }
+ &> div.page_n_margin_42 { .LESSpagecontrolIconMargin(11, 11); }
-
- &> div.page_n_dot {
- .LESSpagecontrolIconCommonProperties('images/00_mainmenu_page_bar_001.png');
+ &> div.page_n_unselected {
+ .LESSpagecontrolIconCommonProperties('images/00_page_indicator_02.png');
+ }
+ &> div.page_n_selected {
+ .LESSpagecontrolIconCommonProperties('images/00_page_indicator_01.png');
}
- &> div.page_n_1 { .LESSpagecontrolIconCommonProperties('images/00_mainmenu_page_bar_01.png'); }
- &> div.page_n_2 { .LESSpagecontrolIconCommonProperties('images/00_mainmenu_page_bar_02.png'); }
- &> div.page_n_3 { .LESSpagecontrolIconCommonProperties('images/00_mainmenu_page_bar_03.png'); }
- &> div.page_n_4 { .LESSpagecontrolIconCommonProperties('images/00_mainmenu_page_bar_04.png'); }
- &> div.page_n_5 { .LESSpagecontrolIconCommonProperties('images/00_mainmenu_page_bar_05.png'); }
- &> div.page_n_6 { .LESSpagecontrolIconCommonProperties('images/00_mainmenu_page_bar_06.png'); }
- &> div.page_n_7 { .LESSpagecontrolIconCommonProperties('images/00_mainmenu_page_bar_07.png'); }
- &> div.page_n_8 { .LESSpagecontrolIconCommonProperties('images/00_mainmenu_page_bar_08.png'); }
- &> div.page_n_9 { .LESSpagecontrolIconCommonProperties('images/00_mainmenu_page_bar_09.png'); }
- &> div.page_n_10 { .LESSpagecontrolIconCommonProperties('images/00_mainmenu_page_bar_10.png'); }
-
}
.ui-popup-screen {
background: #000000;
- opacity: 0.7;
+ opacity: 0;
position: absolute;
top: 0;
left: 0;
z-index: @z_base_popup;
}
+.ui-popup-scroller-bg {
+ width : 100%;
+}
+
.ui-popup-container {
position: absolute;
width: @popup-ratio;
width: 100%;
height: 100%;
font-size: @font_size_popup_basic_style_title;
- background: @color_popup_title_bg;
+ font-weight : bold;
+ color : @color_bar_title_text;
+
+ text-align : left;
+
}
p.ui-popup-title {
- color: @color_popup_font;
+ color: @color_bar_title_text;
margin: 0*@unit_base 0*@unit_base;
+ margin-left : 16 * @unit_base;
padding: 13*@unit_base 0*@unit_base;
}
}
}
+ .ui-popup-button-bg {
+ .ui-btn-inner {
+ padding-top: 5 * @unit_base;
+ padding-bottom: 5 * @unit_base;
+ padding-left : 20 * @unit_base;
+ padding-right : 20 * @unit_base;
+ }
+ }
+
+
+
// ----------------------------------------------------- //
.center_info {
.LESSbox-align(center);
.LESSbox-pack(center);
- text-align: center;
+ text-align: center;
- // .ui-popup-title
- // .ui-popup-text
}
.center_basic_1btn {
.ui-popup-button-bg {
font-size: @font_size_popup_button_text;
- background: @color_popup_button_bg;
width: 100%;
- padding-top: 11*@unit_base;
- padding-bottom: 11*@unit_base;
+ height : 57 * @unit_base;
+ .ui-btn-inner {
+ padding-top: 5 * @unit_base;
+ padding-bottom: 5 * @unit_base;
+ padding-left : 20 * @unit_base;
+ padding-right : 20 * @unit_base;
+ }
vertical-align: middle;
.ui-btn {
- width: 402*@unit_base;
- height: 74*@unit_base;
margin:auto;
-
}
}
}
font-size: @font_size_popup_button_text;
background: @color_popup_button_bg;
width: 100%;
- padding-top: 11*@unit_base;
- padding-bottom: 11*@unit_base;
+ height : 57 * @unit_base;
+ .ui-btn-inner {
+ padding-top: 5 * @unit_base;
+ padding-bottom: 5 * @unit_base;
+ padding-left : 20 * @unit_base;
+ padding-right : 20 * @unit_base;
+ }
vertical-align: middle;
.ui-btn {
- width: 274*@unit_base;
- height: 74*@unit_base;
+ height: 37*@unit_base;
+ width : 200 * @unit_base;
+ top : 5 * @unit_base;
margin-top: 0*@unit_base;
margin-bottom: 0*@unit_base;
margin-left: 5*@unit_base;
.ui-btn {
width: 186*@unit_base;
- height: 74*@unit_base;
+ height: 37*@unit_base;
margin-top: 0*@unit_base;
margin-bottom: 0*@unit_base;
margin-left: 5*@unit_base;
padding-top: 11*@unit_base;
padding-bottom: 11*@unit_base;
vertical-align: middle;
+ text-align : center;
.ui-btn {
width: 402*@unit_base;
- height: 74*@unit_base;
+ height: 37*@unit_base;
margin:auto;
}
.ui-popup-button-bg {
font-size: @font_size_popup_button_text;
- background: @color_popup_button_bg;
+/* background: @color_popup_button_bg;*/
width: 100%;
padding-top: 11*@unit_base;
padding-bottom: 11*@unit_base;
vertical-align: middle;
.ui-btn {
- width: 274*@unit_base;
- height: 74*@unit_base;
+ width: 130*@unit_base;
+ height: 37*@unit_base;
margin-top: 0*@unit_base;
margin-bottom: 0*@unit_base;
margin-left: 5*@unit_base;
margin-right: 5*@unit_base;
-
+ .ui-btn-inner {
+ padding-top: 5 * @unit_base;
+ padding-bottom: 5 * @unit_base;
+ padding-left : 20 * @unit_base;
+ padding-right : 20 * @unit_base;
+ }
display: inline-block;
}
}
.ui-btn {
width: 186*@unit_base;
- height: 74*@unit_base;
+ height: 37*@unit_base;
margin-top: 0*@unit_base;
margin-bottom: 0*@unit_base;
margin-left: 5*@unit_base;
.ui-btn {
width: 356*@unit_base;
- height: 74*@unit_base;
+ height: 37*@unit_base;
margin-top: 16*@unit_base;
margin-bottom: 0*@unit_base;
margin-left: auto;
vertical-align: middle;
.ui-btn {
- width: 274*@unit_base;
- height: 74*@unit_base;
+ width: 130*@unit_base;
+ height: 37*@unit_base;
margin-top: 0*@unit_base;
margin-bottom: 0*@unit_base;
margin-left: 5*@unit_base;
vertical-align: middle;
.ui-btn {
- width: 402*@unit_base;
- height: 74*@unit_base;
+ width: 201*@unit_base;
+ height: 37*@unit_base;
margin:auto;
}
vertical-align: middle;
.ui-btn {
- width: 274*@unit_base;
- height: 74*@unit_base;
+ width: 130*@unit_base;
+ height: 37*@unit_base;
margin-top: 0*@unit_base;
margin-bottom: 0*@unit_base;
margin-left: 5*@unit_base;
margin-right: 5*@unit_base;
display: inline-block;
+
+ .ui-btn-inner {
+ padding-top: 5 * @unit_base;
+ padding-bottom: 5 * @unit_base;
+ padding-left : 20 * @unit_base;
+ padding-right : 20 * @unit_base;
+ }
}
}
}
vertical-align: middle;
.ui-btn {
- width: 186*@unit_base;
- height: 74*@unit_base;
+ width: 93*@unit_base;
+ height: 37*@unit_base;
margin-top: 0*@unit_base;
margin-bottom: 0*@unit_base;
margin-left: 5*@unit_base;
vertical-align: middle;
.ui-btn {
- width: 402*@unit_base;
- height: 74*@unit_base;
+ width: 201*@unit_base;
+ height: 37*@unit_base;
margin:auto;
}
.ui-btn {
width: 402*@unit_base;
- height: 74*@unit_base;
+ height: 37*@unit_base;
margin:auto;
}
height: 100%;
}
}
+
+/*
.ui-btn{
.LESSpopup_button_style;
}
}
.ui-btn.ui-btn-down-s{
.LESSpopup_button_press_style;
- }
+ }*/
}
@import "config.less";
/* Progress - circle style */
-@img-height: 64 * @unit_base;
-@img-width: 64 * @unit_base;
-@bar-vmargin: 16 * @unit_base;
-@bar-hmargin: 1 * @unit_base;
+@img-height: 32 * @unit_base;
+@img-width: 32 * @unit_base;
@-webkit-keyframes ui-rotate-animation {
from {
.ui-progress-container-circle {
position: absolute;
- right: 16 * @unit_base;
+ right: 13 * @unit_base;
top: 25%;
}
height: @img-height;
width: @img-width;
- background: url(images/00_winset_list_process_01.png) no-repeat;
+ background: url(images/00_list_process_01.png) no-repeat;
.LESSbackground-size(@img-width, @img-height);
}
+
.ui-progress-circle-running {
-webkit-animation: ui-rotate-animation 1s infinite linear;
}
/* Progress - pending style */
-@bar-height: 16 * @unit_base;
-@bar-margin: 16 * @unit_base;
-@color_progress_bar1: rgb(0, 140, 210);
+@bar-height: 7 * @unit_base;
+@bar-margin: 21 * @unit_base;
@-webkit-keyframes ui-move-animation {
from {
}
}
-.ui-progress-container-pending {
+.ui-progress-pending-bg {
position: relative;
+ top: 0;
margin-left: @bar-margin;
margin-right: @bar-margin;
- height: @bar-height;
+ height: 18 * @unit_base;
+
+ //FIXME
+ //background-image: url(images/00_winset_list_progress_bg.png);
+ background-color: @color_progress_bar0;
+ .LESSborder-radius-all( 10 * @unit_base );
+}
+
+.ui-progress-container-pending {
+ position: relative;
overflow: hidden;
+
+ top: 5 * @unit_base;
+ height: @bar-height;
+ margin-left: 5 * @unit_base;
+ margin-right: 5 * @unit_base;
+
+ .LESSborder-radius-all( 10 * @unit_base );
+ border: 1px;
+ border-style: solid;
+ border-color: rgb(180, 180, 180);
+ .LESSbox-shadow(1px, -1px, 1px, rgb(180, 180, 180));
}
.ui-progress-pending {
background: -webkit-linear-gradient(-45deg,
transparent,
- transparent 25%,
- @color_progress_bar1 25%,
- @color_progress_bar1 50%,
+ transparent 10%,
+ @color_progress_bar1 10%,
+ @color_progress_bar1 20%,
+ transparent 20%,
+ transparent 30%,
+ @color_progress_bar1 30%,
+ @color_progress_bar1 40%,
+ transparent 40%,
transparent 50%,
- transparent 75%,
- @color_progress_bar1 75%);
+ @color_progress_bar1 50%,
+ @color_progress_bar1 60%,
+ transparent 60%,
+ transparent 70%,
+ @color_progress_bar1 70%,
+ @color_progress_bar1 80%,
+ transparent 80%,
+ transparent 90%,
+ @color_progress_bar1 90%);
background: -webkit-gradient(linear,
left top,
.LESSbackground-size(@bar-height * 2, @bar-height * 2);
}
+
.ui-progress-pending-running {
-webkit-animation: ui-move-animation 0.5s infinite linear;
}
-
@import "config.less";
-@bar-height: 16 * @unit_base;
-@bar-margin: 16 * @unit_base;
+@bar-height: 18 * @unit_base;
+@bar-margin: 21 * @unit_base;
@-webkit-keyframes ui-scale-animation {
from {
}
.ui-progressbar-value {
- background-image: url(images/00_winset_list_progress_bar.png);
height: 100%;
-}
-.ui-progressbar {
- position: relative;
- background-image: url(images/00_winset_list_progress_bg.png);
- margin-left: @bar-margin;
- margin-right: @bar-margin;
- height: @bar-height;
+ //FIXME
+ //background-image: url(images/00_winset_list_progress_bar.png);
+ background-color: @color_progress_bar1;
+ .LESSborder-radius-all( 10 * @unit_base );
}
.ui-progress-bg {
position: relative;
- top: 0;
- background-image: url(images/00_winset_list_progress_bg.png);
- width: 100%;
- height: @bar-height;
+ overflow: hidden;
+
+ top: 5 * @unit_base;
+ height: 7 * @unit_base;
+ margin-left: 5 * @unit_base;
+ margin-right: 5 * @unit_base;
+
+ .LESSborder-radius-all( 10 * @unit_base );
+ border: 1px;
+ border-style: solid;
+ border-color: rgb(180, 180, 180);
+ .LESSbox-shadow(1px, -1px, 1px, rgb(180, 180, 180));
}
-.ui-progress-bar {
+.ui-progressbar {
position: relative;
- top: -@bar-height;
- width: 100%;
+ margin-left: @bar-margin;
+ margin-right: @bar-margin;
height: @bar-height;
- background-image: url(images/00_winset_list_progress_bar.png);
-
- -webkit-animation: ui-scale-animation 5s infinite linear;
- -webkit-transform-origin: 0% 0%;
+ //FIXME
+ //background-image: url(images/00_winset_list_progress_bg.png);
+ background-color: @color_progress_bar0;
+ .LESSborder-radius-all( 10 * @unit_base );
}
top: 2 * @unit_base;
right: 2 * @unit_base;
bottom: 2 * @unit_base;
- width: 10 * @unit_base;
+ width: 8 * @unit_base;
}
.ui-scrollbar-x {
right: 2 * @unit_base;
bottom: 2 * @unit_base;
left: 2 * @unit_base;
- height: 10 * @unit_base;
+ height: 8 * @unit_base;
}
.ui-scrollbar-track {
}
.ui-scrollbar-y .ui-scrollbar-thumb {
- width: 10 * @unit_base;
+ width: 5 * @unit_base;
height: 100%;
+ .LESSborder-radius-all(2 * @unit_base);
+ .LESSbox-shadow(1 * @unit_base, 1 * @unit_base, 2 * @unit_base, rgb(148, 146, 140))
}
.ui-scrollbar-x .ui-scrollbar-thumb {
width: 100%;
- height: 10 * @unit_base;
+ height: 5 * @unit_base;
+ .LESSborder-radius-all(2 * @unit_base);
}
.ui-scroll-jump-top-bg {
position: absolute;
- top: 16 * @unit_base;
- right: 16 * @unit_base;
- width: 76 * @unit_base;
- height: 70 * @unit_base;
- background: url(images/00_scroll_jump_bg.png) no-repeat;
- .LESSbackground-size(76 * @unit_base, 70 * @unit_base);
+ top: 9 * @unit_base;
+ right: 13 * @unit_base;
+ width: 37 * @unit_base;
+ height: 37 * @unit_base;
}
.ui-scroll-jump-left-bg {
position: absolute;
- bottom: 16 * @unit_base;
- left: 16 * @unit_base;
- width: 76 * @unit_base;
- height: 70 * @unit_base;
- background: url(images/00_scroll_jump_bg.png) no-repeat;
- .LESSbackground-size(76 * @unit_base, 70 * @unit_base);
+ bottom: 9 * @unit_base;
+ left: 13 * @unit_base;
+ width: 37 * @unit_base;
+ height: 37 * @unit_base;
}
-.ui-scroll-jump-top,
-.ui-scroll-jump-left {
- position: relative;
- top: 14 * @unit_base;
- left: 17 * @unit_base;
- width: 42 * @unit_base;
- height: 42 * @unit_base;
- background: url(images/00_scroll_icon_jump.png) no-repeat;
- .LESSbackground-size(42 * @unit_base, 42 * @unit_base);
+.ui-icon-jumptop {
+ background: url(images/00_icon_jump.png) no-repeat;
+ .LESSbackground-size(19 * @unit_base, 19 * @unit_base);
+ background-position: 9 * @unit_base 9 * @unit_base;
+}
+
+.ui-icon-jumpleft {
+ background: url(images/00_icon_jump_left.png) no-repeat;
+ .LESSbackground-size(19 * @unit_base, 19 * @unit_base);
+ background-position: 9 * @unit_base 9 * @unit_base;
+}
+
+@-webkit-keyframes ui-overflow-show-lite {
+ from {
+ opacity: 0;
+ } to {
+ opacity: 0.2;
+ }
+}
+
+@-webkit-keyframes ui-overflow-show {
+ from {
+ opacity: 0;
+ } to {
+ opacity: 0.5;
+ }
+}
+
+@-webkit-keyframes ui-overflow-show-dark {
+ from {
+ opacity: 0;
+ } to {
+ opacity: 0.8;
+ }
}
-.ui-scroll-jump-left {
- background: url(images/00_scroll_icon_jump_left.png) no-repeat;
- .LESSbackground-size(42 * @unit_base, 42 * @unit_base);
+@-webkit-keyframes ui-overflow-hide-lite {
+ from {
+ opacity: 0.2;
+ } to {
+ opacity: 0;
+ }
+}
+
+@-webkit-keyframes ui-overflow-hide {
+ from {
+ opacity: 0.5;
+ } to {
+ opacity: 0;
+ }
+}
+
+@-webkit-keyframes ui-overflow-hide-dark {
+ from {
+ opacity: 0.8;
+ } to {
+ opacity: 0;
+ }
+}
+
+.ui-overflow-indicator-top {
+ position: absolute;
+ display: block;
+ top: 0;
+ width: 100%;
+ height: 5 * @unit_base;
+ opacity: 0;
+ background: -webkit-gradient(linear,
+ left bottom,
+ left top,
+ color-stop(0, rgb(255,255,255)),
+ color-stop(1, rgb(128,128,128)));
+}
+
+.ui-overflow-indicator-bottom {
+ position: absolute;
+ display: block;
+ bottom: 0;
+ width:100%;
+ height: 5 * @unit_base;
+ opacity: 0;
+ background: -webkit-gradient(linear,
+ left bottom,
+ left top,
+ color-stop(0, rgb(128,128,128)),
+ color-stop(1, rgb(255,255,255)));
}
/*
@import "config.less";
-@popup-size: 102 * @unit_base;
-@padding-size: 18 * @unit_base;
-@img-height: 80 * @unit_base;
-@img-width: 80 * @unit_base;
+@popup-height: 54 * @unit_base;
+@popup-width: 45 * @unit_base;
+@img-height: 37 * @unit_base;
+@img-width: 37 * @unit_base;
+@handle-height: 36 * @unit_base;
+@handle-width: 36 * @unit_base;
label.ui-slider {
display: block;
}
-input.ui-slider-input {
- display: inline-block;
- width: 50 * @unit_base;
-}
-
select.ui-slider-switch {
display: none;
}
.ui-slider-bg,
.ui-slider-icon-bg {
position: relative;
- margin-left: 32 * @unit_base;
- margin-right: 32 * @unit_base;
- margin-bottom: 0.2em;
vertical-align: middle;
+
+ margin-left: 16 * @unit_base;
+ margin-right: 16 * @unit_base;
}
.ui-slider-icon-bg {
- margin-left: 112 * @unit_base;
- margin-right: 112 * @unit_base;
+ margin-left: 58 * @unit_base;
+ margin-right: 58 * @unit_base;
}
.ui-slider-left-volume,
.ui-slider-left-bright {
position: absolute;
- top: -0.2em;
- left: -112 * @unit_base;
+ vertical-align: middle;
+
+ top: -0.35rem;
+ left: -50 * @unit_base;
height: @img-height;
width: @img-width;
- vertical-align: middle;
- background: url(images/00_slider_btn_brightness01.png) no-repeat;
+
+ background: url(images/00_slider_button_brightness_01.png) no-repeat;
.LESSbackground-size(@img-width, @img-height);
}
.ui-slider-left-volume {
- background: url(images/00_slider_btn_volume01.png) no-repeat;
+ background: url(images/00_slider_button_volume_01.png) no-repeat;
.LESSbackground-size(@img-width, @img-height);
}
.ui-slider-right-volume,
.ui-slider-right-bright {
position: absolute;
- top: -0.2em;
- right: -112 * @unit_base;
+
+ top: -0.35rem;
+ right: -50 * @unit_base;
height: @img-height;
width: @img-width;
+
vertical-align: middle;
- background: url(images/00_slider_btn_brightness02.png) no-repeat;
+
+ background: url(images/00_slider_button_brightness_02.png) no-repeat;
.LESSbackground-size(@img-width, @img-height);
}
.ui-slider-right-volume {
- background: url(images/00_slider_btn_volume02.png) no-repeat;
+ background: url(images/00_slider_button_volume_02.png) no-repeat;
.LESSbackground-size(@img-width, @img-height);
}
.ui-slider-left-text {
position: absolute;
- top: -0.2em;
- left: -112 * @unit_base;
- height: 80 * @unit_base;
- width: 80 * @unit_base;
+
+ top: -0.35rem;
+ left: -52 * @unit_base;
+ height: 37 * @unit_base;
+ width: 37 * @unit_base;
+
text-align: center;
color: rgb(100, 100, 100);
}
.ui-slider-right-text {
position: absolute;
- top: -0.2em;
- right: -112 * @unit_base;
- height: 80 * @unit_base;
- width: 80 * @unit_base;
+
+ top: -0.35rem;
+ right: -52 * @unit_base;
+ height: 37 * @unit_base;
+ width: 37 * @unit_base;
+
text-align: center;
color: rgb(100, 100, 100);
}
div.ui-slider {
display: inline-block;
overflow: visible;
- height: 16 * @unit_base;
+
+ height: 18 * @unit_base;
width: 100%;
- background-image: url(images/00_winset_list_progress_bg.png);
+
+ //FIXME
+ //background-image: url(images/00_progress_bg.9.png);
+ background-color: rgb(236,233,229);
.ui-btn {
- top: 0.15em !important;
+ top: -0.45rem;
+ margin-top: 0;
}
.ui-btn-inner {
- padding: 0.3em 0 * @unit_base;
+ padding: 0.3rem 0 0 0;
}
.ui-btn-text {
color: @color_slider_handle_text;
a.ui-slider-handle {
position: relative;
z-index: 10;
- top: -21 * @unit_base;
- width: 58 * @unit_base;
- height: 58 * @unit_base;
- margin-top: -29 * @unit_base;
- margin-left: -29 * @unit_base;
+
+ width: 36 * @unit_base;
+ height: 36 * @unit_base;
+ margin-left: -19 * @unit_base;
+
color: @color_slider_handle_text;
+ font-size: 0.95rem;
+
background: url(images/00_slider_handle.png) no-repeat;
- .LESSbackground-size(58 * @unit_base, 58 * @unit_base);
+ .LESSbackground-size(@handle-width, @handle-height);
}
.ui-slider-popup {
position: absolute !important;
- width: @popup-size;
- height: @popup-size;
- text-align: center;
- padding-top: 0.6em;
z-index: 100;
+
+ width: @popup-width;
+ height: @popup-height;
+ top: -56 * @unit_base;
+ padding-top: 0.1rem;
+
color: @color_slider_popup_text;
+ text-align: center;
+ font-size: 1.5rem;
+
background: url(images/00_slider_popup_bg.png) no-repeat;
- .LESSbackground-size(@popup-size, @popup-size);
+ .LESSbackground-size(@popup-width, @popup-height);
}
.ui-slider-bar {
position: relative;
- top: -0.85em;
- height: 16 * @unit_base;
+
+ top: -36 * @unit_base;
+ height: 18 * @unit_base;
width: 0;
- background-image: url(images/00_winset_list_progress_bar.png);
+
+ //FIXME
+ //background-image: url(images/00_progress_bar.9.png);
+ background-image: -webkit-gradient(
+ linear,
+ left bottom,
+ left top,
+ color-stop(0.2, rgb(236,233,229)),
+ color-stop(0.2, rgb(54,119,155)),
+ color-stop(0.8, rgb(54,119,195)),
+ color-stop(0.8, rgb(236,233,229))
+ );
}
.ui-slider-handle-press {
position: absolute;
z-index: 15;
- width: 58 * @unit_base;
- height: 58 * @unit_base;
+
+ width: 37 * @unit_base;
+ height: 37 * @unit_base;
+
+ //FIXME
background: url(images/00_slider_handle_press.png) no-repeat;
- .LESSbackground-size(58 * @unit_base, 58 * @unit_base);
+ .LESSbackground-size(@handle-width, @handle-height);
}
-webkit-user-select: none;
-user-select: none;
+ text-align : center;
+
.ui-btn {
margin-top: -1.5em !important;
}
padding-top : 30 * @unit_base;
padding-bottom : 30 * @unit_base;
padding-left : 16 * @unit_base;
-
+
width : 100%;
+ text-align : left;
+
.ui-li-text-sub {
position : absolute;
padding-right : 16 * @unit_base;
@import "config.less";
.ui-toggleswitch {
- height: 80 * @unit_base;
- width: 60 * @unit_base;
+ height: 40 * @unit_base;
+ width: 30 * @unit_base;
overflow: hidden;
.ui-toggleswitch-mover {
position: relative;
- font-size : 26 * @unit_base;
- line-height : 40 * @unit_base;
+ font-size : 13 * @unit_base;
+ line-height : 20 * @unit_base;
display: block;
.ui-toggleswitch-off {
border-radius: 5 * @unit_base;
color: @color_text_sub;
.LESStoggleswitch_off_style;
- height: 80 * @unit_base;
+ height: 40 * @unit_base;
.ui-toggleswitch-img{
width: 100%;
position: absolute;
padding-top: 7 * @unit_base;
.ui-toggleswitch-sign{
position: absolute;
- width: 4px;
- height: 12px;
- left: 50%;
+ width: 44 * @unit_base;
+ height: 44 * @unit_base;
+ /*left: 50%;*/
margin-left:-2px;
- background: url(images/00_switch_button_off.png) no-repeat;
+ background: url(images/00_button_off.png) no-repeat;
background-size: cover;
-ms-background-size: cover;
-webkit-background-size: cover;
display: none;
border-radius: 5 * @unit_base;
.LESStoggleswitch_on_style;
- height: 80 * @unit_base;
+ height: 40 * @unit_base;
color: white;
.ui-toggleswitch-img{
width: 100%;
text-align: center;
.ui-toggleswitch-sign{
position: absolute;
- width: 15px;
- height: 15px;
+ width: 44 * @unit_base;
+ height: 44 * @unit_base;
left: 50%;
margin-left:-7px;
- background: url(images/00_switch_button_on.png) no-repeat;
+ background: url(images/00_button_on.png) no-repeat;
background-size: cover;
-ms-background-size: cover;
-webkit-background-size: cover;
.ui-toggleswitch-reed {
position: absolute;
border-radius: 5 * @unit_base;
- width: 57 * @unit_base;
+ width: 28 * @unit_base;
.LESStoggleswitch_reed_style;
- top: 40 * @unit_base;
- height: 39 * @unit_base;
+ top: 20 * @unit_base;
+ height: 19 * @unit_base;
left: 1px;
}
}
.ui-toggleswitch-text {
- top: 40 * @unit_base;
+ top: 20 * @unit_base;
}
.ui-toggleswitch-img{
- top: 40 * @unit_base;
+ top: 20 * @unit_base;
}
.ui-toggleswitch-on {
display: block;
}
}
}
+
+.ui-toggleswitch.ui-toggleswitch-image-style {
+ display : inline-block;
+
+ width : 44 * @unit_base;
+ height : 44 * @unit_base;
+ .ui-toggleswitch-mover {
+
+ .ui-toggleswitch-off,
+ .ui-toggleswitch-on {
+ background-image : none;
+
+ height : 44 * @unit_base;
+ width : 44 * @unit_base;
+
+ .ui-toggleswitch-img {
+ padding-top : 0px;
+ top : 0px;
+
+ .ui-toggleswitch-sign {
+ left : 0px;
+ margin-left : 0px;
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
+++ /dev/null
-THEME_NAME=tizen-black
-
-THEME_OUTPUT_ROOT ?= .
-OUTPUT_DIR = ${THEME_OUTPUT_ROOT}/${THEME_NAME}
-
-CSS_OUTPUT = ${OUTPUT_DIR}/tizen-web-ui-fw-theme.css
-
-CSS_SRCS= ../common/jquery.mobile.theme.less.css \
- ../common/jquery.mobile.core.less.css \
- ../common/jquery.mobile.transitions.css \
- ../common/jquery.mobile.grids.css \
- ../common/jquery.mobile.headerfooter.less.css \
- ../common/jquery.mobile.navbar.css \
- ../common/jquery.mobile.button.less.css \
- ../common/jquery.mobile.collapsible.css \
- ../common/jquery.mobile.dialog.less.css \
- ../common/jquery.mobile.forms.checkboxradio.less.css \
- ../common/jquery.mobile.forms.fieldcontain.css \
- ../common/jquery.mobile.forms.select.css \
- ../common/jquery.mobile.forms.textinput.less.css \
- ../common/jquery.mobile.controlgroup.less.css \
- ../common/jquery.mobile.listview.less.css \
- ../common/jquery.mobile.segmentctrl.less.css \
- ../common/jquery.mobile.tizen.optionheader.less.css \
- ../common/jquery.mobile.tizen.virtuallistview.less.css \
- ../common/jquery.mobile.tizen.scrollview.less.css \
- ../common/jquery.mobile.tizen.hsvpicker.less.css \
- ../common/jquery.mobile.tizen.colorpalette.less.css \
- ../common/jquery.mobile.tizen.colortitle.less.css \
- ../common/jquery.mobile.tizen.datetimepicker.less.css \
- ../common/jquery.mobile.tizen.popupwindow.less.css \
- ../common/jquery.mobile.tizen.ctxpopup.less.css \
- ../common/jquery.mobile.tizen.progressbar.less.css \
- ../common/jquery.mobile.tizen.progress.less.css \
- ../common/jquery.mobile.tizen.slider.less.css \
- ../common/jquery.mobile.tizen.imageslider.less.css \
- ../common/jquery.mobile.tizen.notification.less.css \
- ../common/jquery.mobile.tizen.pagecontrol.less.css \
- ../common/jquery.mobile.tizen.swipelist.less.css \
- ../common/jquery.mobile.tizen.nocontents.less.css \
- ../common/jquery.mobile.tizen.shortcutscroll.less.css \
- ../common/jquery.mobile.tizen.dayselector.less.css \
- ../common/jquery.mobile.tizen.toggleswitch.less.css \
- ../common/jquery.mobile.tizen.huegradient.css \
- ../common/jquery.mobile.tizen.colorpicker.less.css \
- ../common/jquery.mobile.tizen.colorpickerbutton.less.css \
- ../common/jquery.mobile.tizen.triangle.less.css \
- ../common/jquery.mobile.tizen.multibuttonentry.less.css \
- ../common/jquery.mobile.tizen.scrollview.handler.less.css \
- ../common/jquery.mobile.tizen.virtualgridview.less.css \
- ../common/jquery.mobile.tizen.multimediaview.less.css \
- ../common/jquery.mobile.popup.css \
- ../common/jquery.mobile.tizen.popup.less.css \
- ../common/jquery.mobile.tizen.misc.less.css
-
-all: prepare css images js
-
-prepare:
- -mkdir -p ${OUTPUT_DIR}
-
-less: prepare
- # Compiling less to css...
- @for f in `find ../common -iname '*.less' | sort`; do \
- if test "config.less" = "$$f" ; then continue; fi; \
- echo " build $$f"; \
- lessc $$f > $$f.css; \
- done;
-
-css: prepare less
- # Creating tizen-black theme...
- @rm -f $(CSS_OUTPUT)
- @for src in $(CSS_SRCS); do \
- cat $$src >> $(CSS_OUTPUT) ; \
- done
-
-images: prepare
- # Copying tizen-black theme images...
- @cp -a images/ ${OUTPUT_DIR}/
-
-js: prepare
- @cp -a theme.js ${OUTPUT_DIR}
-
-clean:
- # Cleaning tizen-black theme...
- -rm -rf $(OUTPUT_DIR)
- -rm -f *.less.css
-
+++ /dev/null
-/****************************
- * Tizen Common Less Header *
- ****************************/
-@import "../common/jquery.mobile.tizen.less";
-@import "style.less";
+++ /dev/null
-// Basic color set
-@color_bg: rgb(0, 0, 0);
-@color_bg_sub: rgb(36, 36, 36); // 36 36 36 // TODO: used only in dialog group. Check more.
-
-@color_border: rgb(42, 42, 42); // 42 42 42
-@color_header: rgb(68, 68, 74); // 68 68 74
-
-@color_scrollbar: rgb(63, 63, 63);
-
-@color_text: rgb(249, 249, 249);
-@color_text_dim: rgb(108, 115, 118); // 108 115 118
-@color_text_focus: @color_text;
-@color_text_sub: rgb(102, 102, 102); // 102 102 102
-@color_text_setting: rgb(42, 109, 140); // 42 109 140
-@color_text_input: rgb(70, 70, 70); // 70 70 70
-@color_text_cursor: @color_text_setting;
-@color_text_segctrl: rgb(158, 195, 213); // 158 195 213 // TODO: used only in segctrl. Check more.
-
-//Dialogue color set
-@color_dialogue_main_text: rgba(249, 249, 249, 1);
-@color_dialogue_sub_text: rgb(146,146,146);
-@color_list_dialogue_bg : rgba(0, 0, 0, 1);
-@color_dialogue_border_right: rgba(68, 68, 68, 1);
-
-//Dialogue Editor color set
-@color_dialogue_editor_default_text: rgb(70, 70, 70);
-@color_dialogue_editor_bg: rgb(0, 0, 0);
-@color_dialogue_editor_border: rgb(37, 52, 78);
-/*************************
- Vars/Mixins for Widgets
-
- NOTE:
- * Color variables' name: @color_<widget name>_<identifier>
- * Color values: Use rgb() or rgba()
- *************************/
-
-
-/***************************************************************************
- List
-***************************************************************************/
-@color_list_main_text_focus: rgba(249, 249, 249, 1);
-@color_list_main_text_unfocus: rgba(249, 249, 249, 1);
-
-@color_list_border_bottom: rgb(68, 68, 68);
-@color_list_main_text_read: rgba(158, 158, 158, 1);
-@color_list_main_text_unread: rgba(249, 249, 249, 1);
-@color_list_sub_text_default: rgba(100, 100, 100, 1);
-@color_list_sub_text_settings: rgba(0, 140, 210, 1);
-@color_list_sub_text_focus: rgba(249, 249, 249, 1);
-@color_list_flexible_text_main: rgba(249, 249, 249, 1);
-@color_list_flexible_text_sub: rgba(149, 149, 149, 1);
-@color_list_index_list: rgba(164, 164, 164, 1);
-@color_list_editfield_text: rgba(70, 70, 70, 1);
-@color_list_editfield_text_cursor: rgba(0, 140, 210, 1);
-@color_list_multiline_text: rgba(149, 149, 149, 1);
-@color_list_3line_main_text: rgba(249, 249, 249, 1);
-@color_list_3line_main_text_read: rgba(249, 249, 249, 1);
-@color_list_3line_main_text_focus: rgba(249, 249, 249, 1);
-@color_list_3line_main_text2: rgba(104, 137, 152, 1);
-@color_list_3line_main_text2_focus: rgba(249, 249, 249, 1);
-@color_list_converter_style: rgba(249, 249, 249, 1);
-@color_list_converter_style_focus: rgba(249, 249, 249, 1);
-@color_list_unread_email: rgba(249, 249, 249, 1);
-@color_list_contents_text: rgba(210, 210, 210, 1);
-@color_list_name_text: rgba(129, 129, 129, 1);
-@color_list_name_text_dim: rgba(0, 140, 210, 1);
-@color_list_colorbar: rgba(80, 107, 207, 1); //Temp, not defined
-@color_list_bubble_box_shadow: rgb(78, 78, 78); // Not defined in GUI guide.
-@color_list_bubble_left_text: rgb(0, 0, 0);
-@color_list_bubble_left_bg: rgb(217, 230, 237); // Not defined in GUI guide. Picked from image.
-@color_list_bubble_right_text: rgb(96, 96, 96);
-@color_list_bubble_right_bg: rgb(217, 217, 217); // Not defined in GUI guide. Picked from image.
-@color_list_bubble_sos_text: rgb(211, 0, 0);
-@color_list_bubble_date_text: rgb(128, 128, 128);
-@color_list_bubble_date_bg: rgba(225, 225, 225, 0);
-@color_list_bubble_time_text: rgb(57, 166, 215);
-@color_list_bubble_link_text: rgb(34, 129, 157);
-@color_list_bubble_failed_text: rgb(211, 0, 0);
-@color_list_bubble_name_text: rgb(57, 166, 215);
-@color_list_bubble_help_text: rgb(146, 146, 146);
-
-@color_list_divider_bg : rgb(73,73,73);
-@color_list_divider_bg_start : rgb(73,73,73);
-@color_list_divider_bg_end : rgb(22,22,22);
-
-@color_list_divider_text : rgb(142, 174, 193); /* #005ea0 */
-@color_list_divider_expand_div : rgba(0, 0, 0, 0.5);
-@color_list_expandable_expanded_bg: rgb(26, 26, 26);
-@color_list_press : rgba(60, 100, 155, 1);
-
-@font_size_list_main_text: 44 * @unit_base; //1.375rem; /* 44 px */
-@font_size_list_sub_text: 32 * @unit_base; //1.0rem; /* 32 px */
-@font_size_list_flexible_text_main: 48 * @unit_base; //1.5rem; /* 48 px */
-@font_size_list_flexible_text_sub: 36 * @unit_base; //1.125rem; /* 36 px */
-@font_size_list_index_list: 32 * @unit_base; //1.0rem; /* 32 px */
-@font_size_list_editfield_text: 44 * @unit_base; //1.375rem; /* 44 px */
-@font_size_list_multiline_text: 32 * @unit_base; //1.0rem; /* 32 px */
-@font_size_list_3line_main_text: 42 * @unit_base; //1.3125rem; /* 42 px */
-@font_size_list_3line_main_text2: 36 * @unit_base; //1.125rem; /* 36 px */
-@font_size_list_converter_style: 40 * @unit_base; //1.3rem; /* 40 px */
-@font_size_list_unread_email: 44 * @unit_base; //1.375rem; /* 44 px */
-@font_size_list_contents_text: 30 * @unit_base; //0.94rem; /* 30 px */
-@font_size_list_name_text: 32 * @unit_base; //1.0rem; /* 32 px */
-
-@style_list_li_dialogue_margin_left: 16 * @unit_base;
-@style_list_li_dialogue_border_left_width: 10 * @unit_base;
-@style_list_bubble_date_height: 40 * @unit_base;
-@style_list_bubble_date_text_align: center;
-
-.LESSlistDivider_Background{
- .LESSbackground-with-gradient(top, @color_list_divider_bg_start, @color_list_divider_bg_end);
-}
-
-/***************************************************************************
- Shortcut Scroll
-***************************************************************************/
-@color_shortcutscroll_rollover_bg: none;
-@color_shortcutscroll_rollover_text: rgba(160, 172, 179, 1);
-@color_shortcutscroll_popup_bg: rgba(229, 229, 229, 1); // 00_fast_scroll_popup_bg.png
-@color_shortcutscroll_popup_shadow: rgba(199, 199, 199, 0.5);
-@color_shortcutscroll_popup_text: rgb(42, 137, 194);
-
-
-/***************************************************************************
- Popup
-***************************************************************************/
-@color_popup_center_progressbar_title: rgba(153, 153, 153, 1);
-@color_popup_text_progress_title: rgba(249, 249, 249, 1);
-/* TODO : ninepatch popup title */
-@color_popup_title_bg: rgba(39, 58, 90, 255); /* popup_title_bg.png */
-@color_popup_text_bg: rgba(38, 38, 38, 255); /* popup_bg.png */
-@color_popup_button_bg: rgba(56, 56, 56, 255); /* popup_button_bg.png */
-@color_popup_font: white;
-@color_popup_text_font: white;
-
-@color_popup_buttonbg: rgb(79, 79, 79);
-@color_popup_buttonbg_webkit: rgb(79, 79, 79);
-@color_popup_buttonbg_moz: rgb(79, 79, 79);
-@color_popup_buttontext: rgb(249, 249, 249);
-@color_popup_buttonbg_over: rgb(79, 79, 79); /* transparents */
-@color_popup_buttonbg_press: rgb(42, 137, 194);
-@color_popup_buttonbg_press_webkit: rgb(42, 137, 194);
-@color_popup_buttonbg_press_moz: rgb(42, 137, 194);
-
-@color_popup_scroller_bg: rgb(0, 0, 0);
-
-@font_size_popup_info_style: 42 * @unit_base; //1.3125rem; /* 42px */
-@font_size_popup_basic_style_title: 38 * @unit_base; //1.1875rem; /* 38px */
-@font_size_popup_center_progressbar_title: 26 * @unit_base; //0.8125rem; /* 26px */
-@font_size_popup_text_progress_title: 42 * @unit_base; //1.3125rem; /* 42px */
-@font_size_popup_button_text: 32 * @unit_base; //1.0rem; /* 32px */
-
-.LESSpopup_button_style{
- background: @color_popup_buttonbg;
- color: @color_popup_buttontext;
-}
-
-.LESSpopup_button_hover_style{
- background: @color_popup_buttonbg_over;
-}
-
-.LESSpopup_button_press_style{
- background: @color_popup_buttonbg_press;
-}
-
-.LESSpopup_padding_style{
- padding: 2 * @unit_base 2 * @unit_base;
-}
-
-/***************************************************************************
- Button
-***************************************************************************/
-
-@color_button_normal: rgb(53, 53, 57);
-@color_button_normal_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(53, 53, 57)), to(rgb(40, 41, 44)));
-@color_button_normal_moz: -moz-linear-gradient(top, rgb(53, 53, 57), rgb(40, 41, 44));
-
-@color_button_press: rgb(42, 137, 194);
-
-@color_button_hover: rgb(161, 171, 177);
-
-@color_button_text_normal: rgb(249, 249, 249);
-@color_button_text_white: rgb(249, 249, 249);
-@color_button_text_press: rgb(249, 249, 249);
-
-@color_circlebutton_hover: rgb(239, 119, 126);
-@color_circlebutton_hover_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(198, 78, 85)), to(rgb(166, 43, 45)));
-@color_circlebutton_hover_moz: -moz-linear-gradient(top, rgb(198, 78, 85), rgb(166,43,45));
-@color_circlebutton_press: rgb(42, 137, 194);
-
-@color_button_EditText: rgb(249, 249, 249);
-@color_button_EditTextPress: rgb(249, 249, 249);
-@color_button_EditBG: rgb(0, 0, 0);
-@color_button_EditBGPress: rgb(0, 140, 210);
-
-@color_button_switch_BGon: rgb(42, 126, 172);
-@color_button_switch_BGon_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(33, 116, 167)), to(rgb(75, 165, 219)));
-@color_button_switch_BGon_moz: -moz-linear-gradient(top, rgb(33, 116, 167), rgb(75, 165, 219));
-@color_button_switch_BGoff: rgb(151, 161, 167);
-@color_button_switch_BGoff_text_color: rgb(203, 203, 203);
-@color_button_switch_BGoff_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(114, 114, 114)), to(rgb(141, 141, 141)));
-@color_button_switch_BGoff_moz: -moz-linear-gradient(top, rgb(114, 114, 114), rgb(141, 141, 141));
-@color_button_switch_BGreed: rgb(253, 253, 253);
-@color_button_switch_BGreed_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(253, 253, 253)), to(rgb(231, 231, 231)));
-@color_button_switch_BGreed_moz: -moz-linear-gradient(top, rgb(253, 253, 253), rgb(231, 231, 231));
-
-@radius_button_switch: 4px;
-@radius_button_switch_reed: 2px;
-
-@color_button_edit: rgb(192, 82, 82);
-@color_button_edit_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(192, 82, 82)), to(rgb(162, 40, 40)));
-@color_button_edit_moz: -moz_linear-gradient(top, rgb(192, 88, 88), rgb(162, 40, 40));
-
-@color_button_edit_press: rgb(147, 24, 24);
-@color_button_edit_press_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(147, 24,24)), to(rgb(110, 23, 23)));
-@color_button_edit_press_moz: -moz-linear-gradient(top, rgb(147, 24, 24), rgb(110, 23, 23));
-
-.LESSbutton_up_style{
- background: @color_button_normal;
- background: @color_button_normal_webkit;
- background: @color_button_normal_moz;
- color: @color_button_text_normal;
-}
-
-.LESSbutton_hover_style{
- background: @color_button_hover;
- color: @color_button_text_white;
-}
-
-.LESSbutton_down_style{
- background: @color_button_press;
- color: @color_button_text_white;
-}
-
-.LESSbutton_text1_style{
- font-family: @font_family;
- font-weight: normal;
- font-size: 1.0rem;
- font-style:normal;
- color: @color_button_text_normal;
- &:hover {color: @color_button_text_press;}
-}
-
-.LESSbutton_box_style{
- color: @color_button_text_white;
- &:hover {color: @color_button_text_white;}
-}
-
-.LESScirclebutton_hover_style{
- border-width: 0px;
- background: @color_circlebutton_hover;
- background: @color_circlebutton_hover_webkit;
- backgronnd: @color_circlebutton_hover_moz;
-}
-
-.LESScirclebutton_press_style{
- border-width: 0px;
- background: @color_circlebutton_press;
-}
-
-.LESStoggleswitch_on_style{
- background: @color_button_switch_BGon;
- background: @color_button_switch_BGon_webkit;
- background: @color_button_switch_BGon_moz;
- border-radius: @radius_button_switch;
- -webkit-border-radius: @radius_button_switch;
- -moz-border-radius: @radius_button_switch;
-}
-
-.LESStoggleswitch_off_style{
- color: @color_button_switch_BGoff_text_color;
- background: @color_button_switch_BGoff;
- background: @color_button_switch_BGoff_webkit;
- background: @color_button_switch_BGoff_moz;
- border-radius: @radius_button_switch;
- -webkit-border-radius: @radius_button_switch;
- -moz-border-radius: @radius_button_switch;
-}
-
-.LESStoggleswitch_reed_style{
- background: @color_button_switch_BGreed;
- background: @color_button_switch_BGreed_webkit;
- background: @color_button_switch_BGreed_moz;
- border-radius: @radius_button_switch_reed;
- -webkit-border-radius: @radius_button_switch_reed;
- -moz-border-radius: @radius_button_switch_reed;
-}
-
-.LESSbutton_edit_style{
- background: @color_button_edit;
- background: @color_button_edit_webkit;
- background: @color_button_edit_moz;
- font-weight:bold;
- color: rgb(249, 249, 249);
-}
-
-.LESSbutton_editpress_style{
- background: @color_button_edit_press;
- background: @color_button_edit_press_webkit;
- background: @color_button_edit_press_moz;
-}
-
-.LESSbutton_edit_padding{
- padding: 0.5em 0.8em;
-}
-
-/***************************************************************************
- Date Time picker color set
-***************************************************************************/
-@color_timepicker_selector_color: rgb(42,137,194);
-
-/***************************************************************************
- Contextual Popup
-***************************************************************************/
-@color_ctxpopup_text: rgb(249, 249, 249);
-@color_ctxpopup_background: rgb(52, 52, 52);
-@color_ctxpopup_border_left: rgb(39, 39, 39);
-@color_ctxpopup_border_right: rgb(82, 82, 82);
-@color_ctxpopup_border_bottom: rgb(89, 89, 89);
-@color_ctxpopup_timepicker_text: rgba( 249, 249, 249, 0.7 );
-@color_ctxpopup_timepicker_text_focus: rgba( 249, 249, 249, 1 );
-
-/***************************************************************************
- DaySelector
-***************************************************************************/
-@color_dayselector_Btn_Sat: rgba(0, 168, 231, 1); /* #00a8e7 */
-@color_dayselector_Btn_Sun: rgba(240, 20, 2, 1); /* #f01402 */
-@color_dayselector_Btn_Mon_to_Fri: rgba(249, 249, 249, 1); /* #f9f9f9 */
-@color_dayselector_Btn_border: rgba(0, 0, 0, 0.1); /* #000000 */
-
-@color_dayselector_Btn_normal_start: rgb(48,65,95) 0%;
-@color_dayselector_Btn_normal_end: rgb(30,43,62) 100%;
-
-@color_dayselector_Btn_press_start: rgb(71,98,141) 0%;
-@color_dayselector_Btn_press_end: rgb(52,75,112) 100%;
-
-.LESSDayselectorButtonNormal{
- .LESSbackground-with-gradient(top, @color_dayselector_Btn_normal_start, @color_dayselector_Btn_normal_end);
-}
-
-.LESSDayaselectorButtonPress{
- .LESSbackground-with-gradient(top, @color_dayselector_Btn_press_start, @color_dayselector_Btn_press_end);
-}
-
-/***************************************************************************
- OptionHeader
-***************************************************************************/
-@color_optionheader_Background: rgba(55, 76, 111, 1);
-@color_optionheader_bt: -webkit-linear-gradient(top, rgb(85,113,160) 0%,rgb(68,95,139) 100%);
-@color_optionheader_bt_press: -webkit-linear-gradient(top, rgb(42,137,193) 0%,rgb(27,106,153) 100%);
-@color_optionheader_tab_text: rgba(249, 249, 249, 1); /* #f9f9f9 */
-
-
-/***************************************************************************
- SearchBar(forms.textinput)
-***************************************************************************/
-@color_searchbar_bg : rgba(47, 53, 64, 1);
-@color_searchbar_default_text : rgba(68, 93, 111, 1);
-@color_searchbar_input_field_bg : rgba(0, 0, 0, 1);
-
-
-/***************************************************************************
- SegmentControl
-***************************************************************************/
-@color_segmentcontrol_btn_normal_start : rgb(48,65,95);
-@color_segmentcontrol_btn_normal_end : rgb(30,43,62);
-
-@color_segmentcontrol_btn_press_start : rgb(71,98,141);
-@color_segmentcontrol_btn_press_end : rgb(52,75,112);
-
-@color_segmentcontrol_Seg_text : rgba(249, 249, 249, 1); /* #F9F9F9*/
-@color_segmentcontrol_Seg_text_pressed : rgba(249, 249, 249, 1); /* #F9F9F9*/
-
-.LESSSegmentControlBtnBackground
-{
- .LESSbackground-with-gradient(top,@color_segmentcontrol_btn_normal_start,@color_segmentcontrol_btn_normal_end);
-}
-
-.LESSSegmentControlBtnPressBackground
-{
- .LESSbackground-with-gradient(top,@color_segmentcontrol_btn_normal_start,@color_segmentcontrol_btn_normal_end);
-}
-/***************************************************************************
- ControlGroup
-***************************************************************************/
-@color_controlgroup_btn_border : rgba(0, 0, 0, 0.1); /* #000000 */
-
-
-/***************************************************************************
- Header / Footer
- NavigationBar / ControlBar
-***************************************************************************/
-@color_bar_bg : rgb(156,181,179);
-@color_bar_bg_start : rgb(156, 181, 179);
-@color_bar_bg_end : rgb(79, 116, 141);
-
-@color_bar_back_btn_press : rgba(26, 82, 116, 0.3); /* #1A5274 */
-@color_bar_btn_press : rgba(0, 0, 0, 0.1);
-@color_bar_btn_bg : transparent;
-@color_bar_back_btn_bg : transparent;
-
-@color_bar_seg_btn_border : rgba(0, 0, 0, 0.1);
-@color_bar_seg_text_press : rgba(249, 249, 249, 1);
-@color_bar_seg_text_normal : rgba(249, 249, 249, 1);
-@color_bar_seg_btn_press : -webkit-linear-gradient(top, rgb(94,120,160) 0%,rgb(61,88,131) 100%);
-@color_bar_seg_btn_normal : -webkit-linear-gradient(top, rgb(56,80,120) 0%,rgb(39,58,88) 100%);
-
-@color_bar_title_text : rgba(249, 249, 249, 1); /* #F9F9F9 */
-@color_bar_title_bg : rgb(68,88,120);
-@color_bar_title_bg_start : rgb(68,88,120);
-@color_bar_title_bg_end : rgb(24,37,56);
-
-@color_bar_title_btn_border : rgba(0, 0, 0, 0.2);
-
-@color_bar_footer_bg : rgb(43,54,71);
-@color_bar_footer_bg_start : rgb(43,54,71);
-@color_bar_footer_bg_end : rgb(17,24,35);
-@color_bar_footer_btn_bg : transparent;
-
-@color_controlbar_btn_border : rgba(0, 0, 0, 0.1); /* #000000 */
-@color_controlbar_tabbbar_bg : transparent;
-@color_controlbar_toolbbar_bg : transparent;
-@color_controlbar_bg : transparent;
-@color_controlbar_btn_text : rgba(249, 249, 249, 1); /* #F9F9F9 */
-@color_controlbar_btn_press : -webkit-linear-gradient(top, rgb(60,81,114) 0%,rgb(42,58,85) 100%);
-
-@color_border_top : rgba(255, 255, 255, 0.5);
-@color_border_bottom : rgba(0, 0, 0, 0.5);
-
-.LESSHeaderFooterBackground
-{
- .LESSbackground-with-gradient(top, @color_bar_bg_start, @color_bar_bg_end);
-}
-
-.LESSColorBarTitleBackground
-{
- .LESSbackground-with-gradient(top, @color_bar_title_bg_start, @color_bar_title_bg_end);
-}
-
-/***************************************************************************
- Tickernoti
-***************************************************************************/
-@color_ticker_bg: rgb(60, 84, 123);
-@color_ticker_text1: rgb(249, 249, 249);
-@color_ticker_text2: rgb(211, 216, 224);
-@color_ticker_btn: rgb(59, 81, 116);
-
-
-/***************************************************************************
- Smallpopup
-***************************************************************************/
-@color_smallpopup_bg: rgb(76, 81, 88);
-@color_smallpopup_text: rgb(249, 249, 249);
-
-
-/***************************************************************************
- No Contents
-***************************************************************************/
-@color_nocontents_text: rgb(102, 102, 102);
-
-
-/***************************************************************************
- Slider
-***************************************************************************/
-@color_slider_handle_text: rgb(42, 137, 194);
-@color_slider_popup_text: rgb(249, 249, 249);
-
-
-/***************************************************************************
- Progress
-***************************************************************************/
-@color_progress_bar0: rgb(178, 178, 178);
-@color_progress_bar1: rgb(42, 137, 194);
-
-
-/***************************************************************************
- Handler
-***************************************************************************/
-@color_scrollview_handler_bg : rgba(150, 150, 150, 0.5);
-
-/***************************************************************************
- multimediaview
-***************************************************************************/
-@color_multimediaview_bg : rgb(0, 0, 0);
-@color_multimediaview_control_bg : rgba(0, 0, 0, 0.5);
-@color_multimediaview_button_bg : rgb(36, 36, 36);
-@color_multimediaview_timestamp_text : rgb(42, 137, 194);
-@color_multimediaview_duration_text : rgb(128, 128, 128);
-@color_multimediaview_bar_gray : rgb(178, 178, 178);
-@color_multimediaview_bar_active : rgb(42, 137, 194);
-@color_multimediaview_bar_handle : rgb(249, 249, 249);
-
-/***************************************************************************
- Color widgets
-***************************************************************************/
-@color_widgets_title_bg: rgb(26, 26, 26);
-@color_widgets_basic_border: rgb(32, 32, 32);
-@color_widgets_left_border: rgb(45, 51, 74);
-
-.LESScolortitle_background_style{
- background-color: @color_widgets_title_bg;
- border: 1px solid;
- border-color: @color_widgets_basic_border;
- border-left: 6px solid;
- border-left-color: @color_widgets_left_border;
-}
-
-.LESShsvpicker_background_style{
- background-color: @color_widgets_title_bg;
- border: 1px solid;
- border-color: @color_widgets_basic_border;
- border-left: 6px solid;
- border-left-color: @color_widgets_left_border;
-}
-
-.LESSpalette_background_style{
- background-color: @color_widgets_title_bg;
- border: 1px solid;
- border-top: 6px solid;
- border-color: @color_widgets_left_border;
-}
-
-
-/***************************************************************************
- multibutton entry
-***************************************************************************/
-@color_multibuttonentry_bg : rgb(0, 0, 0);
-@color_multibuttonentry_block_text : rgb(255, 255, 255);
-@color_multibuttonentry_block_bg : rgb(60, 100, 155);
-@color_multibuttonentry_block_border : rgb(85, 131, 174);
-@color_multibuttonentry_press_bg : rgb(41, 137, 194);
-@color_multibuttonentry_press_border : rgb(93, 187, 244);
-@color_multibuttonentry_input_text : rgb(255, 255, 255);
-@color_multibuttonentry_link_bg : rgb(100, 100, 100);
-@color_multibuttonentry_link : rgb(249, 249, 249);
-
-/***************************************************************************
-***************************************************************************/
-
-/***************************************************************************
- virtualgrid
-***************************************************************************/
-@color_virtualgrid_bg : rgb(0, 0, 0);
-
-/***************************************************************************
-****************************************************************************
- Layout ( position, padding, margin etc...)
-****************************************************************************
-***************************************************************************/
-@style-title-font-size : 52 * @unit_base;
-
-@style-corner-radius : .3em;
-@style-title-extended-2btn-width : 688 * @unit_base;
-@style-title-extended-2btn-radio-width : 343 * @unit_base;
-@style-title-extended-3btn-width : 688 * @unit_base;
-@style-title-extended-3btn-radio-width : 229 * @unit_base;
-@style-title-extended-4btn-width : 688 * @unit_base;
-@style-title-extended-4btn-radio-width : 171 * @unit_base;
-
-@style-back-btn-left : 44 * @unit_base;
-@style-back-btn-arrow-top : 30 * @unit_base;
-
-@style-title-min-height : 62 * @unit_base;
-@style-title-extended-margin : -30 * @unit_base;
-/***************************************************************************
- Navigation
-***************************************************************************/
-
-.LESStitle-diff-style {
- text-align: left;
- margin: 19*@unit_base 135*@unit_base 19*@unit_base 16*@unit_base;
-}
-
-.LESSextended-controlgroup-border {
- border-style : solid;
- border-width : 1px;
- border-bottom-width: 2px;
-
- border-bottom-color: @color_border_bottom;
- border-top-color: @color_border_top;
- border-left-color: @color_bar_seg_btn_border;
- border-right-color: @color_bar_seg_btn_border;
-}
-
-.LESSback-btn-background {
- background : none;
-}
-
-.LESSbtn-back {
- width : 144 * @unit_base;
- height : 114 * @unit_base;
- top : 0 * @unit_base;
- right : 0 * @unit_base;
-}
-
-.LESSbtn-back-inner {
- width : 144 * @unit_base;
- height : 114 * @unit_base;
-}
-
-.LESSbtn-arrow-position {
- left : 20 * @unit_base;
- top : 30 * @unit_base;
-}
-
-.LESSdialogue-border-style {
- border-right-style : solid;
- border-right-color : @color_dialogue_border_right;
- border-right-width : 1px;
-}
-
-.LESSdialogue-divider {
- padding-top : 36 * @unit_base;
- padding-bottom : 10 * @unit_base;
- padding-left : 10 * @unit_base;
-
- margin-left : 16 * @unit_base;
- margin-right : 16 * @unit_base;
-
- background : @color_list_dialogue_bg;
- font-size : 32 * @unit_base;
- font-weight : bold;
- color : @color_dialogue_main_text;
-}
+++ /dev/null
-(function( $, undefined ) {
-//$.mobile.page.prototype.options.backBtnTheme = "s";
-
-// Clear default theme for child elements
-$.mobile.page.prototype.options.headerTheme = "s";
-$.mobile.page.prototype.options.footerTheme = "s";
-//$.mobile.page.prototype.options.contentTheme = "s";
-
-// clear listview
-$.mobile.listview.prototype.options.theme = "s";
-$.mobile.listview.prototype.options.countTheme = "s";
-$.mobile.listview.prototype.options.headerTheme = "s";
-$.mobile.listview.prototype.options.dividerTheme = "s";
-$.mobile.listview.prototype.options.splitTheme = "s";
-
-//clear button theme
-$.mobile.button.prototype.options.theme = "s";
-$.fn.buttonMarkup.defaults.theme = "s";
-
-// Default theme swatch
-$.mobile.page.prototype.options.theme = "s";
-
-// Default font size for this theme
-$.tizen.frameworkData.defaultFontSize = 36;
-
-})(jQuery);
../common/jquery.mobile.tizen.multimediaview.less.css \
../common/jquery.mobile.popup.css \
../common/jquery.mobile.tizen.popup.less.css \
- ../common/jquery.mobile.tizen.misc.less.css
+ ../common/jquery.mobile.tizen.misc.less.css \
+ ../common/jquery.mobile.tizen.controlbar.less.css
all: prepare css images js
prepare:
-mkdir -p ${OUTPUT_DIR}
+ -ln -sf ${THEME_NAME} ${THEME_OUTPUT_ROOT}/tizen-tizen
less: prepare
# Compiling less to css...
+/******************************************************************************************************/
+/**************** Define ColorCode Here ************* Start ****************************************/
+/******************************************************************************************************/
+
+
+
+/***************** Naviframe **********************************/
+@color_bar_title_text : rgba(59, 115, 182, 1); /* #3b73b6 */ /* title text */
+@color_bar_btn_press : rgba(0, 0, 0, 0.1);
+
+/***************** Body ***************************************/
+@color_bg: rgb(248, 246, 239); // #F8F6EF // Main Background color
+@color_text: rgb(0, 0, 0); // 0 0 0
+@color_text_sub: rgb(102, 102, 102); // 102 102 102
+@color_text_setting: rgb(42, 109, 140); // 42 109 140
+
+/***************** List ***************************************/
+@color_list_bg: rgba(248, 246, 239, 1); /* B0211 : List bg color */
+@color_list_press : rgba(87, 135, 194, 1); /* B041 : List Press color */
+@color_list_border_bottom: rgba(211, 209, 203, 0.5); /* B0221 : 1px line Code */
+@color_list_main_text_focus: rgba(249, 249, 249, 1);
+@color_list_main_text_unfocus: rgba(0, 0, 0, 1);
+@color_list_sub_text_default: rgba(100, 100, 100, 1);
+
+
+@color_list_divider_expand_div : rgba(0, 0, 0, 0.5);
+@color_list_divider_bg : rgba(248, 246, 239, 1); /* W021L1 : Index BG */
+@color_list_divider_text : rgba(59, 115, 182, 1); /* W021L2 : Index bar */
+
+@color_list_dialogue_bg : rgba(239, 237, 229, 1);
+@color_dialogue_main_text: rgba(59, 115, 182, 1);
+@color_dialogue_border_right: rgba(142, 154, 163, 1);
+
+@color_list_expandable_expanded_bg: rgb(215, 225, 232);
+@color_list_expanded_bg : rgba(220, 218, 211, 1);
+
+@color_list_bubble_sent_text: rgb(0, 0, 0);
+@color_list_bubble_receive_text: rgb(255, 255, 255);
+@color_list_bubble_sos_text: rgb(233, 73, 73);
+@color_list_bubble_date_text: rgb(104, 104, 104);
+@color_list_bubble_date_bg: rgba(225, 225, 225, 0);
+@color_list_bubble_time_sent_text: rgb(57, 166, 215);
+@color_list_bubble_time_receive_text: rgb(211, 0, 0);
+@color_list_bubble_time_sos_text: rgb(211, 0, 0);
+@color_list_bubble_name_text: rgb(139, 139, 139);
+@color_list_bubble_help_text: rgb(154, 154, 154);
+@color_list_bubble_link_text: rgb(34, 129, 157);
+
+
+/***************** SearchBar(forms.textinput) *****************/
+@color_searchbar_bg : rgba(248, 246, 239, 1);
+@color_searchbar_default_text : rgba(121, 131, 138, 1); /* Search default text */
+@color_searchbar_input_field_bg : rgba(255, 255, 255, 1); /* W301 : 00_search_edit_field_bg.png */
+
+/***************** Popup **************************************/
+@font_size_popup_info_style: 24 * @unit_base;
+@color_popup_text_bg: rgba(248, 246, 239, 1); /* B061L1 */
+
+
+/***************** Button *************************************/
+
+@color_button_EditText: rgb(61, 61, 61);
+@color_button_EditTextPress: rgb(61, 61, 61);
+
+@color_button_text_normal: rgb(54, 49, 51);
+@color_button_text_press: rgb(248, 246, 239);
+
+@color_button_normal: rgb(235, 232, 227);
+@color_button_normal_webkit: -webkit-linear-gradient(top, rgb(235, 232, 227), rgb(234, 231, 226));
+@color_button_normal_moz: -moz-linear-gradient(top, rgb(235, 232, 227), rgb(234, 231, 226));
+@color_button_normal_o: -o-linear-gradient(top, rgb(235, 232, 227), rgb(234, 231, 226));
+@color_button_normal_ms: -ms-linear-gradient(top, rgb(235, 232, 227), rgb(234, 231, 226));
+@color_button_press: rgb(59, 115, 182);
+
+@color_button_inner: rgb(247, 245, 238);
+@color_button_inner_webkit: -webkit-linear-gradient(top, rgb(250, 247, 242), rgb(248, 245, 240));
+@color_button_inner_moz: -moz-linear-gradient(top, rgb(250, 247, 242), rgb(248, 245, 240));
+@color_button_inner_o: -o-linear-gradient(top, rgb(250, 247, 242), rgb(248, 245, 240));
+@color_button_inner_ms: -ms-linear-gradient(top, rgb(250, 247, 242), rgb(248, 245, 240));
+
+@button_shadow_outer: 0 0 1px 1px rgba(255, 255, 255, 1);
+@button_shadow_inner: inset 0 0 3px rgba(255, 255, 255, 1);
+
+.LESSbutton_box_style{
+ color: @color_button_text_normal;
+}
+
+.LESSbutton_up_style{
+ background: @color_button_normal;
+ background: @color_button_normal_webkit;
+ background: @color_button_normal_moz;
+ background: @color_button_normal_o;
+ background: @color_button_normal_ms;
+}
+
+.LESSbutton_box_style{
+ background: @color_button_normal;
+ background: @color_button_normal_webkit;
+ background: @color_button_normal_moz;
+ background: @color_button_normal_o;
+ background: @color_button_normal_ms;
+ border: 1px solid;
+ border-color: rgba(220, 218, 211, 1);
+ .LESSbox-shadow-line( @button_shadow_outer );
+}
+.LESSbutton_inner_box_style{
+ background: @color_button_inner;
+ background: @color_button_inner_webkit;
+ background: @color_button_inner_ms;
+ background: @color_button_inner_o;
+ background: @color_button_inner_moz;
+ .LESSbox-shadow-line( @button_shadow_inner );
+}
+.LESSbutton_inner_pressstyle{
+ color: @color_button_text_press;
+}
+
+.LESSbutton_text1_style{
+ font-family: @font_family;
+ font-weight: normal;
+ font-size: 1.0rem;
+ font-style:normal;
+ color: @color_button_text_black;
+ &:hover {color: @color_button_text_normal;}
+}
+
+.LESSbutton_hover_style{
+ color: @color_button_text_normal;
+}
+
+.LESSbutton_down_style{
+ background: @color_button_press;
+ color: @color_button_text_press;
+}
+
+/***************** Datetime picker ****************************/
+
+@font_size_datetime_main_text: 22 * @unit_base;
+@font_size_datetime_sub_text: 16 * @unit_base;
+/***************************************************************************
+ contextual popup
+ ***************************************************************************/
+@color_ctxpopup_text: rgb(255, 255, 255);
+@color_ctxpopup_background: rgb(68, 68, 68);
+@color_ctxpopup_border_left: rgb(91, 91, 91);
+@color_ctxpopup_border_right: rgb(45, 45, 45);
+@color_ctxpopup_border_top: rgb(91, 91, 91);
+@color_ctxpopup_border_bottom: rgb(45, 45, 45);
+
+@color_ctxbutton_press: rgb(59, 115, 182);
+
+@color_ctxpopup_timepicker_text: rgba( 249, 249, 249, 0.4 );
+@color_ctxpopup_timepicker_text_focus: rgba( 249, 249, 249, 1 );
+
+/******************************************************************************************************/
+/**************** Define ColorCode Here ************* End ****************************************/
+/******************************************************************************************************/
+
+
+
+
+
+
+
+
+
+/************************** old color code ******************************/
+
// Basic color set
-@color_bg: rgb(249, 249, 249); // 249 249 249
+
@color_bg_sub: rgb(36, 36, 36); // 36 36 36 // TODO: used only in dialog group. Check more.
@color_border: rgb(42, 42, 42); // 42 42 42
@color_header: rgb(68, 68, 74); // 68 68 74
-@color_scrollbar: rgb(218, 218, 218);
+@color_scrollbar: rgb(198, 196, 190);
+
-@color_text: rgb(0, 0, 0); // 0 0 0
@color_text_dim: rgb(108, 115, 118); // 108 115 118
@color_text_focus: @color_text;
-@color_text_sub: rgb(102, 102, 102); // 102 102 102
-@color_text_setting: rgb(42, 109, 140); // 42 109 140
+
@color_text_input: rgb(70, 70, 70); // 70 70 70
@color_text_cursor: @color_text_setting;
@color_text_segctrl: rgb(158, 195, 213); // 158 195 213 // TODO: used only in segctrl. Check more.
//Dialogue color set
-@color_dialogue_main_text: rgba(92, 151, 187, 1);
+
@color_dialogue_sub_text: rgb(146,146,146);
-@color_list_dialogue_bg : rgba(236, 240, 242, 1);
-@color_dialogue_border_right: rgba(142, 154, 163, 1);
+
//Dialogue Editor color set
@color_dialogue_editor_default_text: rgb(70, 70, 70);
/***************************************************************************
List
***************************************************************************/
-@color_list_main_text_focus: rgba(249, 249, 249, 1);
-@color_list_main_text_unfocus: rgba(0, 0, 0, 1);
-@color_list_border_bottom: rgb(169, 169, 169);
+
@color_list_main_text_read: rgba(158, 158, 158, 1);
@color_list_main_text_unread: rgba(249, 249, 249, 1);
-@color_list_sub_text_default: rgba(100, 100, 100, 1);
+
@color_list_sub_text_settings: rgba(0, 140, 210, 1);
@color_list_sub_text_focus: rgba(249, 249, 249, 1);
@color_list_flexible_text_main: rgba(249, 249, 249, 1);
@color_list_name_text: rgba(129, 129, 129, 1);
@color_list_name_text_dim: rgba(0, 140, 210, 1);
@color_list_colorbar: rgba(80, 107, 207, 1); //Temp, not defined
-@color_list_bubble_box_shadow: rgb(78, 78, 78); // Not defined in GUI guide.
-@color_list_bubble_left_text: rgb(0, 0, 0);
-@color_list_bubble_left_bg: rgb(217, 230, 237); // Not defined in GUI guide. Picked from image.
-@color_list_bubble_right_text: rgb(96, 96, 96);
-@color_list_bubble_right_bg: rgb(217, 217, 217); // Not defined in GUI guide. Picked from image.
-@color_list_bubble_sos_text: rgb(211, 0, 0);
-@color_list_bubble_date_text: rgb(128, 128, 128);
-@color_list_bubble_date_bg: rgba(225, 225, 225, 0);
-@color_list_bubble_time_text: rgb(57, 166, 215);
-@color_list_bubble_link_text: rgb(34, 129, 157);
-@color_list_bubble_failed_text: rgb(211, 0, 0);
-@color_list_bubble_name_text: rgb(57, 166, 215);
-@color_list_bubble_help_text: rgb(146, 146, 146);
-@color_list_divider_bg : rgb(209, 227, 238); /* #d1e3ee */
-@color_list_divider_text : rgb(29, 100, 149);
-@color_list_divider_expand_div : rgba(0, 0, 0, 0.5);
-@color_list_expandable_expanded_bg: rgb(215, 225, 232);
-@color_list_press : rgba(42, 137, 194, 1);
+
+
+
+
+
@font_size_list_main_text: 44 * @unit_base; //1.375rem; /* 44 px */
@font_size_list_sub_text: 32 * @unit_base; //1.0rem; /* 32 px */
@font_size_list_contents_text: 30 * @unit_base; //0.94rem; /* 30 px */
@font_size_list_name_text: 32 * @unit_base; //1.0rem; /* 32 px */
-@style_list_li_dialogue_margin_left: 16 * @unit_base;
@style_list_li_dialogue_border_left_width: 10 * @unit_base;
@style_list_bubble_date_height: 40 * @unit_base;
@style_list_bubble_date_text_align: center;
-.LESSlistDivider_Background{
- background: @color_list_divider_bg;
-}
/***************************************************************************
Shortcut Scroll
@color_popup_text_progress_title: rgba(249, 249, 249, 1);
/* TODO : ninepatch popup title */
@color_popup_title_bg: rgba(80, 147, 182, 255); /* popup_title_bg.png */
-@color_popup_text_bg: rgba(236, 240, 242, 255); /* popup_bg.png */
-@color_popup_button_bg: rgba(209, 221, 228, 255); /* popup_button_bg.png */
+
+@color_popup_button_bg: rgba(248, 246, 239, 1);
@color_popup_font: white;
@color_popup_text_font: black;
@color_popup_buttonbg_press_ms: -ms-linear-gradient(top, rgb(67, 160, 217), rgb(56, 139, 185));
@color_popup_buttonbg_press_o: -o-linear-gradient(top, rgb(67, 160, 217), rgb(56, 139, 185));
-@color_popup_scroller_bg: rgb(249, 249, 249);
+@color_popup_scroller_bg: rgba(248, 246, 239, 1);
+
-@font_size_popup_info_style: 42 * @unit_base; //1.3125rem; /* 42px */
-@font_size_popup_basic_style_title: 38 * @unit_base; //1.1875rem; /* 38px */
+@font_size_popup_basic_style_title: 24 * @unit_base; //1.1875rem; /* 38px */
@font_size_popup_center_progressbar_title: 26 * @unit_base; //0.8125rem; /* 26px */
@font_size_popup_text_progress_title: 42 * @unit_base; //1.3125rem; /* 42px */
@font_size_popup_button_text: 32 * @unit_base; //1.0rem; /* 32px */
.LESSpopup_button_style{
- background: @color_popup_buttonbg;
+/* background: @color_popup_buttonbg;
background: @color_popup_buttonbg_webkit;
background: @color_popup_buttonbg_moz;
background: @color_popup_buttonbg_ms;
background: @color_popup_buttonbg_o;
- color: @color_popup_buttontext;
+ color: @color_popup_buttontext;*/
}
.LESSpopup_button_hover_style{
Button
***************************************************************************/
-@color_button_normal: rgb(151, 161, 167);
-@color_button_normal_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(151, 161, 167)), to(rgb(122, 132, 141)));
-@color_button_normal_moz: -moz-linear-gradient(top, rgb(151, 161, 167), rgb(122, 132, 141));
-
-@color_button_press: rgb(67, 160, 217);
@color_button_press_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(67, 160, 217)), to(rgb(56, 139, 185)));
@color_button_press_moz: -moz-linear-gradient(top, rgb(67, 160, 217), rgb(56, 139, 185));
@color_button_hover: rgb(161, 171, 177);
-@color_button_text_normal: rgb(249, 249, 249);
@color_button_text_black: rgb(0, 0, 0);
@color_button_text_white: rgb(249, 249, 249);
@color_button_text_press: rgb(249, 249, 249);
@color_button_edit_press_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(147, 24,24)), to(rgb(110, 23, 23)));
@color_button_edit_press_moz: -moz-linear-gradient(top, rgb(147, 24, 24), rgb(110, 23, 23));
-.LESSbutton_up_style{
- background: @color_button_normal;
- background: @color_button_normal_webkit;
- background: @color_button_normal_moz;
-}
-
-.LESSbutton_hover_style{
- background: @color_button_hover;
- color: @color_button_text_white;
-}
-
-.LESSbutton_down_style{
- background: @color_button_press;
- background: @color_button_press_webkit;
- background: @color_button_press_moz;
- color: @color_button_text_white;
-}
.LESSbutton_text1_style{
font-family: @font_family;
&:hover {color: @color_button_text_black;}
}
-.LESSbutton_box_style{
- color: @color_button_text_white;
- &:hover {color: @color_button_text_white;}
-}
-
.LESScirclebutton_hover_style{
border-width: 0px;
background: @color_circlebutton_hover;
background: @color_button_edit;
background: @color_button_edit_webkit;
background: @color_button_edit_moz;
- font-weight:bold;
color: rgb(249, 249, 249);
}
***************************************************************************/
@color_timepicker_selector_color: rgb(42,137,194);
-/***************************************************************************
- Contextual Popup
-***************************************************************************/
-@color_ctxpopup_text: rgb(19, 58, 83);
-@color_ctxpopup_background: rgb(219, 229, 239);
-@color_ctxpopup_border_left: rgb(225, 235, 241);
-@color_ctxpopup_border_right: rgb(174, 184, 190);
-@color_ctxpopup_border_bottom: rgb(153, 176, 195);
-@color_ctxpopup_timepicker_text: rgba( 249, 249, 249, 0.4 );
-@color_ctxpopup_timepicker_text_focus: rgba( 249, 249, 249, 1 );
/***************************************************************************
DaySelector
@color_optionheader_tab_text: rgba(249, 249, 249, 1); /* #f9f9f9 */
-/***************************************************************************
- SearchBar(forms.textinput)
-***************************************************************************/
-@color_searchbar_bg : rgba(215, 225, 232, 1); /* #242424 */
-@color_searchbar_default_text : rgba(121, 131, 138, 1); /* #828282 */
-@color_searchbar_input_field_bg : rgba(249, 249, 249, 1); /* #F9F9F9*/
/***************************************************************************
@color_segmentcontrol_Seg_text : rgba(249, 249, 249, 1); /* #F9F9F9*/
@color_segmentcontrol_Seg_text_pressed : rgba(249, 249, 249, 1); /* #F9F9F9*/
+
+/* delete */
+/*
.LESSSegmentControlBtnBackground
{
.LESSbackground-with-gradient(top, @color_segmentcontrol_btn_normal_start, @color_segmentcontrol_btn_normal_end);
{
.LESSbackground-with-gradient(top, @color_segmentcontrol_btn_press_start, @color_segmentcontrol_btn_press_end);
}
+*/
/***************************************************************************
ControlGroup
@color_bar_bg_end : rgb(79,116,141);
@color_bar_back_btn_press : rgba(26, 82, 116, 0.3); /* #1A5274 */
-@color_bar_btn_press : rgba(0, 0, 0, 0.1);
+
@color_bar_btn_bg : transparent;
@color_bar_back_btn_bg : transparent;
@color_bar_seg_btn_press : -webkit-linear-gradient(top, rgb(61,120,151) 0%,rgb(48,91,118) 100%);
@color_bar_seg_btn_normal : -webkit-linear-gradient(top, rgb(127,159,181) 0%,rgb(70,108,133) 100%);
-@color_bar_title_text : rgba(249, 249, 249, 1); /* #F9F9F9 */
-
@color_bar_title_bg : rgb(90, 153, 186);
@color_bar_title_bg_start : rgb(90, 153, 186);
@color_bar_title_bg_end : rgb(32, 84, 115);
.LESSColorBarTitleBackground
{
- .LESSbackground-with-gradient(top, @color_bar_title_bg_start, @color_bar_title_bg_end);
+ background : rgb(248, 246, 239); // #F8F6EF /* Header Background */
}
/***************************************************************************
Tickernoti
***************************************************************************/
-@color_ticker_bg: rgb(13, 60, 89);
-@color_ticker_text1: rgb(249, 249, 249);
-@color_ticker_text2: rgb(202, 211, 217);
-@color_ticker_btn: rgb(22, 76, 110);
+@color_ticker_bg: rgb(68, 68, 68);
+@color_ticker_text1: rgb(255, 255, 255);
+@color_ticker_text2: rgb(255, 255, 255);
+@color_ticker_btn: rgb(64, 64, 64);
/***************************************************************************
Smallpopup
***************************************************************************/
-@color_smallpopup_bg: rgb(215, 225, 232);
-@color_smallpopup_text: rgb(77, 77, 77);
+@color_smallpopup_bg: rgb(68, 68, 68);
+@color_smallpopup_text: rgb(255, 255, 255);
/***************************************************************************
No Contents
***************************************************************************/
-@color_nocontents_text: rgb(154, 145, 154);
+@color_nocontents_text: rgb(128, 128, 128);
/***************************************************************************
Slider
***************************************************************************/
-@color_slider_handle_text: rgb(42, 137, 194);
+@color_slider_handle_text: rgb(59, 115, 182);
@color_slider_popup_text: rgb(249, 249, 249);
/***************************************************************************
Progress
***************************************************************************/
-@color_progress_bar0: rgb(178, 178, 178);
-@color_progress_bar1: rgb(42, 137, 194);
+@color_progress_bar0: rgb(226, 223, 219);
+@color_progress_bar1: rgb(54, 119, 195);
/***************************************************************************
Layout ( position, padding, margin etc...)
****************************************************************************
***************************************************************************/
-@style-title-font-size : 52 * @unit_base;
+@style-title-font-size : 28 * @unit_base;
-@style-corner-radius : .3em;
@style-title-extended-2btn-width : 688 * @unit_base;
@style-title-extended-2btn-radio-width : 343 * @unit_base;
@style-title-extended-3btn-width : 688 * @unit_base;
@style-back-btn-left : 44 * @unit_base;
@style-back-btn-arrow-top : 30 * @unit_base;
-@style-title-min-height : 62 * @unit_base;
+@style-title-min-height : 30 * @unit_base;
@style-title-extended-margin : -30 * @unit_base;
/***************************************************************************
Navigation
.LESStitle-diff-style {
text-align: left;
- margin: 19*@unit_base 135*@unit_base 19*@unit_base 16*@unit_base;
+ margin: 20*@unit_base 8*@unit_base 12*@unit_base 8*@unit_base;
}
.LESSextended-controlgroup-border {
width : 144 * @unit_base;
height : 114 * @unit_base;
}
-
-.LESSbtn-arrow-position {
- left : 20 * @unit_base;
- top : 30 * @unit_base;
-}
-
-.LESSdialogue-border-style {
- border-right-style : solid;
- border-right-color : @color_dialogue_border_right;
- border-right-width : 1px;
-}
-
-.LESSdialogue-divider {
- padding-top : 36 * @unit_base;
- padding-bottom : 10 * @unit_base;
- padding-left : 10 * @unit_base;
-
- margin-left : 16 * @unit_base;
- margin-right : 16 * @unit_base;
-
- background : @color_list_dialogue_bg;
- font-size : 32 * @unit_base;
- font-weight : bold;
- color : @color_dialogue_main_text;
-}
$.mobile.page.prototype.options.theme = "s";
// Default font size for this theme
-$.tizen.frameworkData.defaultFontSize = 36;
+$.tizen.frameworkData.defaultFontSize = 22;
})(jQuery);
var ar = widget.split( "." ),
namespace,
widgetName,
+ source,
+ noSource = false,
htmlProto,
protoPath;
if ( ar.length == 2 ) {
namespace = ar[0];
widgetName = ar[1];
- htmlProto = $( "<div></div>" )
- .text( "Failed to load proto for widget " + namespace + "." + widgetName + "!" )
- .css( {background: "red", color: "blue", border: "1px solid black"} )
- .jqmData( "tizen.widgetex.ajax.fail", true );
// If htmlProto is defined
if ( $[namespace][widgetName].prototype._htmlProto !== undefined ) {
// If no source is defined, use the widget name
- if ( $[namespace][widgetName].prototype._htmlProto.source === undefined ) {
- $[namespace][widgetName].prototype._htmlProto.source = widgetName;
+ source = $[namespace][widgetName].prototype._htmlProto.source;
+ if ( source === undefined ) {
+ source = widgetName;
+ noSource = true;
}
// Load the HTML prototype via AJAX if not defined inline
- if ( typeof $[namespace][widgetName].prototype._htmlProto.source === "string" ) {
- // Establish the path for the proto file
- widget = $[namespace][widgetName].prototype._htmlProto.source;
- protoPath = getProtoPath();
-
- // Make the AJAX call
- $.ajax( {
- url: protoPath + "/" + widget + ".prototype.html",
- async: false,
- dataType: "html"
- }).success( function (data, textStatus, jqXHR ) {
- htmlProto = $( "<div></div>" ).html(data).jqmData( "tizen.widgetex.ajax.fail", false );
- } );
-
- // Assign the HTML proto to the widget prototype
- $[namespace][widgetName].prototype._htmlProto.source = htmlProto;
- } else { // Otherwise, use the inline definition
+ if ( typeof source === "string" ) {
+ if ( noSource ) { // use external htmlproto file
+ // Establish the path for the proto file
+ widget = source;
+ protoPath = getProtoPath();
+
+ // Make the AJAX call
+ $.ajax( {
+ url: protoPath + "/" + widget + ".prototype.html",
+ async: false,
+ dataType: "html"
+ }).success( function (data, textStatus, jqXHR ) {
+ source = $( "<div></div>" ).html(data).jqmData( "tizen.widgetex.ajax.fail", false );
+ } );
+
+ // Assign the HTML proto to the widget prototype
+ source = $( "<div></div>" )
+ .text( "Failed to load proto for widget " + namespace + "." + widgetName + "!" )
+ .css( {background: "red", color: "blue", border: "1px solid black"} )
+ .jqmData( "tizen.widgetex.ajax.fail", true );
+
+ } else {
+ // inline definition (string)
+ source = $( source ).jqmData( "tizen.widgetex.ajax.fail", false );
+ }
+
+ } else {
+ // inline definition (object)
// AJAX loading has trivially succeeded, since there was no AJAX loading at all
- $[namespace][widgetName].prototype._htmlProto.source.jqmData( "tizen.widgetex.ajax.fail", false );
- htmlProto = $[namespace][widgetName].prototype._htmlProto.source;
+ source.jqmData( "tizen.widgetex.ajax.fail", false );
}
+ htmlProto = source;
+ $[namespace][widgetName].prototype._htmlProto.source = source;
// If there's a "ui" portion in the HTML proto, copy it over to this instance, and
// replace the selectors with the selected elements from a copy of the HTML prototype
jQuery.extend(jQuery.mobile.tizen, {
disableSelection: function (element) {
var self = this;
- return self.enableSelection( element, 'none' );
+ $(element).find('*').each( function() {
+ if( $(this).get(0).tagName !== 'INPUT' &&
+ $(this).attr("type") !== 'text' ) {
+ self.enableSelection( this, 'none' );
+ }
+ } );
+ return true;
},
enableSelection: function (element, value) {
},
disableContextMenu: function(element) {
+ var self = this;
+ $(element).find('*').each( function() {
+ if( $(this).get(0).tagName !== 'INPUT'
+ && $(this).attr("type") !== 'text' ) {
+ self._disableContextMenu( this );
+ }
+ } );
+ },
+
+ _disableContextMenu: function(element) {
+
$(element).each( function() {
$(this).bind("contextmenu", function( event ) {
return false;
showScrollBars: true,
overshootEnable: false,
outerScrollEnable: true,
+ overflowEnable: true,
scrollJump: false,
},
this._add_event();
this._add_scrollbar();
this._add_scroll_jump();
+ this._add_overflow_indicator();
},
_startMScroll: function ( speedX, speedY ) {
this._stopMScroll();
this._showScrollBars();
+ this._showOverflowIndicator();
this._$clip.trigger( this.options.startEventName );
c = this._$clip.width();
v = this._$view.width();
+ if ( ( this._sx === 0 && speedX > 0 ) ||
+ ( this._sx === -(v - c) && speedX < 0 ) ) {
+ return;
+ }
+
ht.start( this._sx, speedX,
duration, (v > c) ? -(v - c) : 0, 0 );
keepGoing = !ht.done();
c = this._$clip.height();
v = this._getViewHeight();
+ if ( ( this._sy === 0 && speedY > 0 ) ||
+ ( this._sy === -(v - c) && speedY < 0 ) ) {
+ return;
+ }
+
vt.start( this._sy, speedY,
duration, (v > c) ? -(v - c) : 0, 0 );
keepGoing = keepGoing || !vt.done();
}
this._hideScrollBars();
+ this._hideOverflowIndicator();
},
_handleMomentumScroll: function () {
x = 0,
y = 0,
scroll_height = 0,
+ self = this,
+ bouncing = function ( dir ) {
+ setTimeout( function () {
+ self._bouncing_dir = dir;
+ self._setBouncing( self._$view, "in" );
+ }, 100 );
+
+ setTimeout( function () {
+ self._setBouncing( self._$view, "out" );
+ }, 350 );
+ },
vt = this._vTracker,
ht = this._hTracker;
if ( vt.isMin() ) {
this._outerScroll( y - vt.getRemained() / 3, scroll_height );
+
+ if ( scroll_height > 0 ) {
+ bouncing( 1 );
+ }
} else if ( vt.isMax() ) {
this._outerScroll( vt.getRemained() / 3, scroll_height );
+
+ if ( scroll_height > 0 ) {
+ bouncing( 0 );
+ }
}
}
}
var translate,
transition;
+ if ( this._bouncing ) {
+ return;
+ }
+
if ( !duration || duration === undefined ) {
transition = "none";
} else {
});
},
+ _setBouncing: function ( $ele, dir ) {
+ if ( dir === "in" ) {
+ if ( this._bouncing ) {
+ return;
+ }
+
+ this._bouncing = true;
+ this._bouncing_count = 1;
+
+ this._bouncing_org_x = 1;
+ this._bouncing_org_y = 1;
+
+ this._bouncing_x = 0.99;
+ this._bouncing_y = 0.99;
+
+ this._setOverflowIndicator( this._bouncing_dir );
+ } else if ( dir === "out" ) {
+ if ( !this._bouncing ) {
+ return;
+ }
+
+ this._bouncing = false;
+ this._bouncing_count = 1;
+
+ this._bouncing_org_x = this._bouncing_x;
+ this._bouncing_org_y = this._bouncing_y;
+
+ this._bouncing_x = 1;
+ this._bouncing_y = 1;
+ this._setOverflowIndicator( this._bouncing_dir );
+ } else {
+ return;
+ }
+
+ this._doBouncing( $ele, dir );
+ },
+
+ _doBouncing: function ( $ele, dir ) {
+ var translate,
+ origin,
+ x_rate,
+ y_rate,
+ frame = 10,
+ self = this;
+
+ if ( $.support.cssTransform3d ) {
+ translate = "translate3d(" + this._sx + "px," + this._sy + "px, 0px)";
+ } else {
+ translate = "translate(" + this._sx + "px," + this._sy + "px)";
+ }
+
+ if ( dir === "in" ) {
+ x_rate = this._bouncing_org_x - ( this._bouncing_org_x -
+ this._bouncing_x ) / frame * this._bouncing_count;
+ y_rate = this._bouncing_org_y - ( this._bouncing_org_y -
+ this._bouncing_y ) / frame * this._bouncing_count;
+
+ translate += " scale(" + x_rate + "," + y_rate + ")";
+ } else if ( dir === "out" ) {
+ x_rate = this._bouncing_org_x + ( this._bouncing_x -
+ this._bouncing_org_x ) / frame * this._bouncing_count;
+ y_rate = this._bouncing_org_y + ( this._bouncing_y -
+ this._bouncing_org_y ) / frame * this._bouncing_count;
+
+ translate += " scale(" + x_rate + "," + y_rate + ")";
+ } else {
+ return;
+ }
+
+ if ( this._bouncing_dir ) {
+ origin = "50% " + ( this._bouncing_y * 100 - 10 ) + "%";
+ } else {
+ origin = "50% 10%";
+ }
+
+ $ele.css({
+ "-moz-transform": translate,
+ "-webkit-transform": translate,
+ "-ms-transform": translate,
+ "-o-transform": translate,
+ "transform": translate,
+ "-webkit-transform-origin": origin,
+ });
+
+ this._bouncing_count++;
+
+ if ( this._bouncing_count > frame ) {
+ return;
+ }
+
+ setTimeout( function () {
+ self._doBouncing( $ele, dir );
+ }, this._timerInterval );
+ },
+
_setCalibration: function ( x, y ) {
if ( this.options.overshootEnable ) {
this._sx = x;
if ( y > 0 ) {
this._sy = 0;
+
+ if ( scroll_height > 0 ) {
+ this._bouncing_dir = 0;
+ this._setBouncing( this._$view, "in" );
+ }
} else if ( y < -scroll_height ) {
this._sy = -scroll_height;
+
+ if ( scroll_height > 0 ) {
+ this._bouncing_dir = 1;
+ this._setBouncing( this._$view, "in" );
+ }
} else {
this._sy = y;
}
$hsb = this._$hScrollBar,
$sbt;
+ if ( this._sx === x && this._sy === y ) {
+ return;
+ }
+
this._setCalibration( x, y );
x = this._sx;
}
if ( y > 0 ) {
- sy = -y;
+ sy = ( window.screenTop ? window.screenTop : -y );
} else if ( y < -scroll_height ) {
sy = -y - scroll_height;
} else {
_propagateDragMove: function ( sv, e, ex, ey, dir ) {
this._hideScrollBars();
+ this._hideOverflowIndicator();
this._disableTracking();
sv._handleDragStart( e, ex, ey );
sv._directionLock = dir;
this._setScrollPosition( newX, newY );
this._showScrollBars();
+ this._showOverflowIndicator();
},
_handleDragStop: function ( e ) {
y;
if ( sx || sy ) {
- this._startMScroll( sx, sy );
+ if ( !this._setGestureScroll( sx, sy ) ) {
+ this._startMScroll( sx, sy );
+ }
} else {
this._hideScrollBars();
+ this._hideOverflowIndicator();
}
this._disableTracking();
+ if ( this._bouncing ) {
+ this._setBouncing( this._$view, "out" );
+ this._hideScrollBars();
+ this._hideOverflowIndicator();
+ }
+
return !this._didDrag;
},
+ _setGestureScroll: function ( sx, sy ) {
+ var self = this,
+ reset = function () {
+ clearTimeout( self._gesture_timer );
+ self._gesture_dir = 0;
+ self._gesture_count = 0;
+ self._gesture_timer = undefined;
+ };
+
+ if ( !sy ) {
+ return false;
+ }
+
+ dir = sy > 0 ? 1 : -1;
+
+ if ( !this._gesture_timer ) {
+ this._gesture_count = 1;
+ this._gesture_dir = dir;
+
+ this._gesture_timer = setTimeout( function () {
+ reset();
+ }, 1000 );
+
+ return false;
+ }
+
+ if ( this._gesture_dir !== dir ) {
+ reset();
+ return false;
+ }
+
+ this._gesture_count++;
+
+ if ( this._gesture_count === 3 ) {
+ if ( dir > 0 ) {
+ this.scrollTo( 0, 0, this.options.overshootDuration );
+ } else {
+ this.scrollTo( 0, -( this._getViewHeight() - this._$clip.height() ),
+ this.options.overshootDuration );
+ }
+ reset();
+
+ return true;
+ }
+
+ return false;
+ },
+
_enableTracking: function () {
this._dragging = true;
},
this._scrollbar_showed = false;
},
+ _resetOverflowIndicator: function () {
+ if ( !this.options.overflowEnable || !this._overflowAvail ) {
+ return;
+ }
+
+ this._overflow_top.css( "-webkit-animation", "" );
+ this._overflow_bottom.css( "-webkit-animation", "" );
+ },
+
+ _setOverflowIndicator: function ( dir ) {
+ if ( dir === 1 ) {
+ this._opacity_top = "0.2";
+ this._opacity_bottom = "0.8";
+ } else if ( dir === 0 ) {
+ this._opacity_top = "0.8";
+ this._opacity_bottom = "0.2";
+ } else {
+ this._opacity_top = "0.5";
+ this._opacity_bottom = "0.5";
+ }
+ },
+
+ _getOverflowIndicator: function ( opacity ) {
+ if ( opacity === "0.2" ) {
+ return "-lite";
+ } else if ( opacity === "0.8" ) {
+ return "-dark";
+ }
+ return "";
+ },
+
+ _showOverflowIndicator: function () {
+ if ( !this.options.overflowEnable || !this._overflowAvail ) {
+ return;
+ }
+
+ this._overflow_top.css( "opacity", this._opacity_top );
+ this._overflow_bottom.css( "opacity", this._opacity_bottom );
+
+ if ( this._overflow_showed === true ) {
+ return;
+ }
+
+ this._overflow_top.css( "-webkit-animation", "ui-overflow-show" +
+ this._getOverflowIndicator( this._opacity_top ) + " 0.3s 1 ease" );
+ this._overflow_bottom.css( "-webkit-animation", "ui-overflow-show" +
+ this._getOverflowIndicator( this._opacity_bottom ) + " 0.3s 1 ease" );
+
+ this._overflow_showed = true;
+ },
+
+ _hideOverflowIndicator: function () {
+ var opacity_top,
+ opacity_bottom;
+
+ if ( !this.options.overflowEnable || !this._overflowAvail ) {
+ return;
+ }
+
+ if ( this._overflow_showed === false ) {
+ return;
+ }
+
+ opacity_top = this._overflow_top.css( "opacity" );
+ opacity_bottom = this._overflow_bottom.css( "opacity" );
+
+ this._overflow_top.css( "opacity", "0" );
+ this._overflow_bottom.css( "opacity", "0" );
+
+ this._overflow_top.css( "-webkit-animation", "ui-overflow-hide" +
+ this._getOverflowIndicator( opacity_top ) + " 0.5s 1 ease" );
+ this._overflow_bottom.css( "-webkit-animation", "ui-overflow-hide" +
+ this._getOverflowIndicator( opacity_bottom ) + " 0.5s 1 ease" );
+
+ this._overflow_showed = false;
+ this._setOverflowIndicator();
+ },
+
_add_event: function () {
var self = this,
$c = this._$clip,
}
if ( self._sy - sy <= -vh ) {
- self.scrollTo( 0, self._sy,
+ self.scrollTo( 0, sy,
self.options.snapbackDuration );
} else if ( self._sy - sy <= vh + self.options.moveThreshold ) {
self.scrollTo( 0, sy,
self._set_scrollbar_size();
self._setScrollPosition( self._sx, self._sy );
self._showScrollBars( 2000 );
+ self._resetOverflowIndicator();
}, 0 );
});
},
}
if ( this._vTracker ) {
- top_btn = $( '<div class="ui-scroll-jump-top-bg ui-btn" data-theme="s">' +
- '<div class="ui-scroll-jump-top"></div></div>' );
- $c.append( top_btn );
+ top_btn = $( '<div class="ui-scroll-jump-top-bg">' +
+ '<div data-role="button" data-inline="true" data-icon="jumptop" style="width:37px;height:37px">.</div></div>' );
+ $c.append( top_btn ).trigger("create");
top_btn.bind( "vclick", function () {
self.scrollTo( 0, 0, self.options.overshootDuration );
}
if ( this._hTracker ) {
- left_btn = $( '<div class="ui-scroll-jump-left-bg ui-btn" data-theme="s">' +
- '<div class="ui-scroll-jump-left"></div></div>' );
- $c.append( left_btn );
+ left_btn = $( '<div class="ui-scroll-jump-left-bg">' +
+ '<div data-role="button" data-inline="true" data-icon="jumpleft" style="width:37px;height:37px">.</div></div>' );
+ $c.append( left_btn ).trigger("create");
left_btn.bind( "vclick", function () {
self.scrollTo( 0, 0, self.options.overshootDuration );
}
},
+ _add_overflow_indicator: function () {
+ if ( !this.options.overflowEnable ) {
+ return;
+ }
+
+ this._overflow_top = $( '<div class="ui-overflow-indicator-top"></div>' );
+ this._overflow_bottom = $( '<div class="ui-overflow-indicator-bottom"></div>' );
+
+ this._$clip.append( this._overflow_top );
+ this._$clip.append( this._overflow_bottom );
+
+ this._opacity_top = "0.5";
+ this._opacity_bottom = "0.5";
+ this._overflow_showed = false;
+ },
+
_set_scrollbar_size: function () {
var $c = this._$clip,
$v = this._$view,
thumb = this._$vScrollBar.find(".ui-scrollbar-thumb");
thumb.css( "height", (ch >= vh ? "0" :
(Math.floor(ch / vh * 100) || 1) + "%") );
+
+ this._overflowAvail = !!thumb.height();
}
}
}
} else {
var st = $( this ).jqmData("scroll"),
dir = st && ( st.search(/^[xy]/) !== -1 ) ? st : null,
+ content = $(this).hasClass("ui-content"),
opts;
if ( st === "none" ) {
opts = {
direction: dir || undefined,
+ overflowEnable: content,
scrollMethod: $( this ).jqmData("scroll-method") || undefined,
scrollJump: $( this ).jqmData("scroll-jump") || undefined
};
_create: function () {
var $controlbar = this.element,
- $navbtns = $controlbar.find( "a" ),
- iconpos = $navbtns.filter( ":jqmData(icon)" ).length ?
+ $ctrlbtns = $controlbar.find( "a" ),
+ iconpos = $ctrlbtns.filter( ":jqmData(icon)" ).length ?
this.options.iconpos : undefined,
+ textpos = $ctrlbtns.html().length ? true : false,
theme = $.mobile.listview.prototype.options.theme, /* Get current theme */
- style = $controlbar.attr( "data-style" ),
ww = window.innerWidth || $( window ).width(),
wh = window.innerHeight || $( window ).height(),
isLandscape;
$controlbar.removeClass( "ui-landscape-controlbar" ).addClass( "ui-portrait-controlbar" );
}
- if ( style === "left" || style === "right" ) {
- $controlbar
- .parents( ".ui-content" )
- .css( 'padding', '0' );
- } else {
+
+/*
$controlbar
.addClass( "ui-navbar" )
.attr( "role", "navigation" )
.find( "ul" )
+
.grid( { grid: this.options.grid } );
+*/
+ $controlbar.addClass( "ui-navbar" )
+ .find( "ul" )
+ .grid( { grid: this.options.grid } );
+ if ( $controlbar.parents( ".ui-footer" ).length ) {
+ $controlbar.find( "li" ).addClass( "ui-ctrl-btn-style" );
+ }
+
+
+ /* title controlbar */
+ if ( $controlbar.siblings( ".ui-title" ).length ) {
+ $controlbar.parents( ".ui-header" ).addClass( "ui-title-controlbar" );
}
if ( !iconpos ) {
- $controlbar.addClass( "ui-navbar-noicons" );
+ $controlbar.addClass( "ui-controlbar-noicons" );
+ }
+ if ( !textpos ) {
+ $controlbar.addClass( "ui-controlbar-notext" );
+ }
+ if ( textpos && iconpos ) {
+ $controlbar.parents( ".ui-header" ).addClass( "ui-title-controlbar-multiline" );
}
- $navbtns.buttonMarkup({
+ $ctrlbtns.buttonMarkup({
corners: false,
shadow: false,
iconpos: iconpos
});
+ if ( $controlbar.find( ".ui-state-persist" ).length ) {
+ $controlbar.addClass( "ui-controlbar-persist" );
+ }
+
$controlbar.delegate( "a", "vclick", function ( event ) {
- $navbtns.not( ".ui-state-persist" ).removeClass( $.mobile.activeBtnClass );
+ $ctrlbtns.not( ".ui-state-persist" ).removeClass( $.mobile.activeBtnClass );
$( this ).addClass( $.mobile.activeBtnClass );
});
- if ( style === "tabbar" || style === "toolbar" ) {
$controlbar
- .addClass( "ui-controlbar-" + theme )
- .addClass( "ui-" + style + "-" + theme );
- } else {
- $controlbar
- .addClass( "ui-controlbar-" + style )
- .end();
- }
+ .addClass( "ui-controlbar");
+
$( document ).bind( "pagebeforeshow", function ( event, ui ) {
var footer_filter = $( event.target ).find( ":jqmData(role='footer')" ),
controlbar_filter = footer_filter.find( ":jqmData(role='controlbar')" ),
- style = controlbar_filter.jqmData( "style" );
+ $elFooterMore = controlbar_filter.siblings( ":jqmData(icon='naviframe-more')" ),
+ $elFooterBack = controlbar_filter.siblings( ".ui-btn-back" );
- if ( style == "toolbar" || style == "tabbar" ) {
- /* Need to add text only style */
+/*
if ( !(controlbar_filter.find(".ui-btn-inner").children().is(".ui-icon")) ) {
controlbar_filter.find( ".ui-btn-inner" ).addClass( "ui-navbar-textonly" );
} else {
controlbar_filter.find( ".ui-btn" ).addClass( "ui-ctrlbar-icononly" );
}
}
+ */
footer_filter
.css( "position", "fixed" )
.css( "bottom", 0 )
.css( "height", controlbar_filter.height() );
- if ( style == "toolbar" ) {
- controlbar_filter
- .css( "width", window.innerWidth - controlbar_filter.siblings(".ui-btn").width() - parseInt(controlbar_filter.siblings(".ui-btn").css("right"), 10) * 2 );
- }
- }
+ if ( $elFooterMore.length )
+ controlbar_filter.addClass( "ui-controlbar-margin-more" );
+ if ( $elFooterBack.length )
+ controlbar_filter.addClass( "ui-controlbar-margin-back" );
+
+
});
$( document ).bind( "pageshow", function ( e, ui ) {
* APIs
*
* add(file): add the image (parameter: url of iamge)
- * delete(index): delete the image (parameter: index of image)
- * refresh(index): refresh the widget, should be called after add or del. (parameter: start index)
+ * remove(index): remove the image (parameter: index of image)
+ * refresh(index): refresh the widget, should be called after add or remove. (parameter: start index)
*
* Events
*
* });
*
* $('#imageslider-del').bind('vmouseup', function ( e ) {
- * $('#imageslider').imageslider('delete');
+ * $('#imageslider').imageslider('remove');
* });
*
*/
this.images_hold.push( file );
},
- delete: function ( index ) {
+ remove: function ( index ) {
var temp_img;
if ( index === undefined ) {
/* ***************************************************************************
-
+* style : normal, check
+*
+*
*/
(function ( $, undefined ) {
$.widget( "tizen.listdivider", $.mobile.widget, {
options: {
- initSelector: ":jqmData(role='list-divider')"
+ initSelector: ":jqmData(role='list-divider')",
},
_create: function () {
var $listdivider = this.element,
openStatus = true,
- iconStatus,
expandSrc,
+ listDividerLine = true,
style = $listdivider.attr( "data-style" );
- if ( style === "expandable" || style === "checkexpandable" ) {
- iconStatus = openStatus ? "opened" : "closed";
- expandSrc = "<span class='ui-divider-expand-div'><span class='ui-icon-expandable-divider-" + iconStatus + "'/></span>";
-
- $( expandSrc ).appendTo( $listdivider );
+ if ( $listdivider.data("line") === false ) {
+ listDividerLine = false;
}
- $listdivider.children( ".ui-divider-expand-div" ).bind( "vclick", function ( event, ui ) {
- if ( openStatus ) {
- $( this ).children( "span" ).removeClass( "ui-icon-expandable-divider-opened" );
- $( this ).children( "span" ).addClass( "ui-icon-expandable-divider-closed" );
- openStatus = false;
- } else {
- $( this ).children( "span" ).removeClass( "ui-icon-expandable-divider-closed" );
- $( this ).children( "span" ).addClass( "ui-icon-expandable-divider-opened" );
- openStatus = true;
+ if ( style == undefined || style === "normal" || style === "check" ) {
+ $listdivider.buttonMarkup();
+
+ if ( listDividerLine ) {
+ expandSrc = "<span class='ui-divider-normal-line'></span>";
+ $( expandSrc ).appendTo( $listdivider.children( ".ui-btn-inner" ) );
}
+
+ }
+
+ $listdivider.bind( "vclick", function ( event, ui ) {
+ /* need to implement expand/collapse divider */
});
},
});
$view.append( inputbox );
// create a anchor tag.
- if ( option.listId === null || $.trim(option.listId).length < 1 ) {
+ if ( option.listId === null || $.trim( option.listId ).length < 1 || $( option.listId ).length === 0 ) {
className += "-dim";
}
- $( moreBlock ).text( "+" ).attr( "href", $.trim(option.listId) ).addClass( "ui-multibuttonentry-link-base" ).addClass( className );
+ $( moreBlock ).text( "+" ).attr( "href", $.trim( option.listId ) ).addClass( "ui-multibuttonentry-link-base" ).addClass( className );
// append default htmlelements to main widget.
$view.append( moreBlock );
moreBlock.click( function () {
if ( $( moreBlock ).hasClass( "ui-multibuttonentry-link-dim" ) ) {
- return ;
+ return;
}
- $(inputbox).hide();
+ $( inputbox ).hide();
$.mobile.changePage( option.listId, {
transition: "slide",
self._viewWidth = $view.innerWidth();
}
self._modifyInputBoxWidth();
- $(inputbox).show();
+ $( inputbox ).show();
});
$view.bind( "click", function ( event ) {
inputBox = $view.find( ".ui-multibuttonentry-input" );
if ( $view.width() === 0 ) {
- return ;
+ return;
}
for ( index = 0; index < blocks.length; index += 1 ) {
if ( blockWidth >= inputBoxWidth ) {
inputBoxWidth = self._viewWidth - blockWidth;
} else {
- inputBoxWidth = self._viewWidth ;
+ inputBoxWidth = self._viewWidth;
}
} else {
if ( blockWidth >= inputBoxWidth ) {
if ( lastIndex !== blocks.length ) {
statement = self._stringFormat( self.options.description, blocks.length - lastIndex - 1 );
- tempBlock = $( document.createElement( 'label' ));
+ tempBlock = $( document.createElement( 'label' ) );
tempBlock.text( statement );
tempBlock.addClass( "ui-multibuttonentry-desclabel" ).addClass( "ui-multibuttonentry-desclabel" );
$( blocks[lastIndex] ).after( tempBlock );
}
- // update foucs state
+ // update focus state
this._focusStatus = "focusOut";
$view.removeClass( "ui-multibuttonentry-focusin" ).addClass( "ui-multibuttonentry-focusout" );
},
if ( arguments.length === 0 ) {
// return a selected block.
lockBlock = $view.find( "div.ui-multibuttonentry-sblock" );
- if ( lockBlock) {
+ if ( lockBlock ) {
return lockBlock.text();
}
return null;
text_bg: null,
_get_height: function () {
- var $page = $('.ui-page'),
+ var $page = $('.ui-page-active'),
$content = $page.children('.ui-content'),
$header = $page.children('.ui-header'),
$footer = $page.children('.ui-footer'),
content_h = $( window ).height() - header_h - footer_h -
(padding_t + padding_b);
+ $content.height( content_h );
+
return content_h;
},
_align: function () {
var content_height = this._get_height(),
icon_height = this.icon_img.height(),
- icon_width = this.icon_img.width(),
text_height = 0,
content_gap = 0,
text_top = 0,
icon_top = content_gap;
}
- this.icon_img.css( 'left',
- ( $( window ).width() - icon_width ) / 2 );
this.icon_img.css( 'top', icon_top );
text_top = icon_top + icon_height + content_gap;
return false;
}
- this._getBtn( oldNum ).removeClass( 'page_n_' + oldNum )
- .addClass( 'page_n_dot' );
- this._getBtn( newNum ).removeClass( 'page_n_dot' )
- .addClass( 'page_n_' + newNum );
+ this._getBtn( oldNum ).removeClass( 'page_n_selected' )
+ .addClass( 'page_n_unselected' );
+ this._getBtn( newNum ).removeClass( 'page_n_unselected' )
+ .addClass( 'page_n_selected' );
},
_triggerChange: function ( event ) {
i = 0,
btn = null,
buf = null,
- page_margin_class = 'page_n_margin_44';
+ page_margin_class = 'page_n_margin_42';
// Set default values
// Set empty callback variable
self.changeCallback = null;
- // Calculate left/right margin
- if ( maxVal <= 7 ) {
- page_margin_class = 'page_n_margin_44';
- } else if ( maxVal == 8 ) {
- page_margin_class = 'page_n_margin_35';
- } else if ( maxVal == 9 ) {
- page_margin_class = 'page_n_margin_26';
- } else {
- page_margin_class = 'page_n_margin_19';
- }
-
-
- // Add dot icons
+ // Add icon classes
for ( i = 1; i <= maxVal; i++ ) {
- btn = $( '<div class="page_n page_n_dot ' + page_margin_class + '" data-value="' + i + '"></div>' );
+ btn = $( '<div class="page_n page_n_unselected ' + page_margin_class + '" data-value="' + i + '"></div>' );
e.append( btn );
if ( i == value ) {
- btn.removeClass( 'page_n_dot' )
- .addClass( 'page_n_' + i );
+ btn.removeClass( 'page_n_unselected' )
+ .addClass( 'page_n_selected' );
}
// bind vclick event to each icon
btn.bind( 'vclick', this._triggerChange );
.css( "position", "fixed" )
.css( "top", "0px" );
- if ( $elHeader.children().is(".ui-navbar") ) {
- $elHeader.addClass( "ui-title-controlbar-height" );
- $( event.target ).find( ".ui-content" ).addClass( "ui-title-content-controlbar-height" );
+ if ( $elHeader.is(".ui-title-controlbar-multiline") ) {
+ $( event.target ).find( ".ui-content" ).addClass( "ui-title-content-multi-controlbar-height" );
} else {
if ( $elHeader.length ) {
$( event.target ).find( ".ui-content" ).addClass( "ui-title-content-" + tStyle + "-height" );
}
}
+ /* set Title style */
+ /* newTheme */
+ if ( $elHeader.find("span.ui-title-text-sub").length ) {
+ $elHeader.addClass( "ui-title-multiline");
+ }
+
+
if ( $elHeader.children().is(".ui-option-header") ) {
$elContent.removeClass( "ui-title-content-" + tStyle + "-height" );
if ( $.tizen.optionheader.prototype.options.collapseOnInit == true ) {
$elFooterGroup = $elFooter.find( ":jqmData(role='fieldcontain')" );
gLength = $elFooterGroup.find( ".ui-radio" ).length;
+
+ if ( $elFooterGroup.find( "div" ).is( ".ui-controlgroup-label" ) ) {
+ $elFooterGroup.find( "div.ui-controlgroup-label" ).remove();
+ }
+
$elFooterGroup.find( ".ui-controlgroup" )
.addClass( "ui-extended-controlgroup" )
.addClass( "ui-footer-extended-controlgroup" )
headerBtnNum = $elHeader.children("a").length,
headerSrcNum = $elHeader.children("img").length;
- $elHeader.find( "h1" ).css( "width", window.innerWidth - $elHeader.children( "a" ).width() * headerBtnNum - $elHeader.children( "a" ).width() / 4 - $elHeader.children( "img" ).width() * headerSrcNum * 3 );
+ $elHeader.find( "h1" ).css( "width", window.innerWidth - $elHeader.children( "a" ).width() * headerBtnNum - $elHeader.children( "a" ).width() / 4 - $elHeader.children( "img" ).width() * headerSrcNum * 4 );
/* add half width for default space between text and button, and img tag area is too narrow, so multiply three for img width*/
},
maxwidth = parseFloat( this._ui.container.css( "max-width" ) );
newtop = ( screenHeight - menuHeight ) / 2;
- if ( menuWidth < maxwidth ) {
+ if ( !maxwidth || menuWidth < maxwidth ) {
newleft = ( screenWidth - menuWidth ) / 2;
} else {
newleft = x - menuWidth / 2;
this._ui.screen.css( "height", screenHeight );
},
-
- open: function ( x_where, y_where ) {
+ open: function ( x_where, y_where, backgroundclose ) {
var self = this,
zIndexMax = 0;
this._ui.screen.css( "height", $( window ).height() )
.removeClass("ui-screen-hidden");
- if ( this.options.fade ) {
- this._ui.screen.animate( {opacity: this.options.opacity}, "fast" );
+ if( backgroundclose ) {
+ this._ui.screen.css( "opacity", 0 );
} else {
- this._ui.screen.css( {opacity: this.options.opacity} );
+ if ( this.options.fade ) {
+ this._ui.screen.animate( {opacity: this.options.opacity}, "fast" );
+ } else {
+ this._ui.screen.css( {opacity: this.options.opacity} );
+ }
}
this._setPosition( x_where, y_where );
$( '.ui-popupwindow' ).css( 'background', 'none' );
}
- origOpen.call( this, x, y );
+ origOpen.call( this, x, y, true );
};
//auto self-init widgets
var self = this,
element = this.element,
style = element.jqmData( "style" ),
+ _html,
runningClass;
if ( style ) {
style = this.options.style;
}
- this.html = $( '<div class="ui-progress-container-' + style + '">' +
- '<div class="ui-progress-' + style + '"></div>' +
- '</div>' );
+ _html = '<div class="ui-progress-container-' + style + '">' +
+ '<div class="ui-progress-' + style + '"></div>' +
+ '</div>';
+
+ if ( style === "pending" ) {
+ _html = '<div class="ui-progress-pending-bg">' + _html + '</div>';
+ }
+
+ this.html = $( _html );
+
+ if ( style === "pending" ) {
+ this.html.wrap('<div class="ui-progress-bg"></div>');
+ }
runningClass = "ui-progress-" + style + "-running";
this.valueDiv = $( "<div class='ui-progressbar-value'></div>" )
.appendTo( this.element );
+ this.valueDiv.wrap("<div class='ui-progress-bg'></div>");
+
this.oldValue = this._value();
this._refreshValue();
},
// hide the slider input element proper
inputElement.hide();
- // FIXME: workaround for list elipse
- if ( inputElement.parent().hasClass("ui-li") ) {
- inputElement.parent().css( "overflow", "visible" );
- }
-
self.popup = $('<div class="ui-slider-popup"></div>');
// set the popup according to the html attribute
var dstOffset = this.handle.offset();
this.popup.offset({
- left: dstOffset.left + ( this.handle.width() - this.popup.width() ) / 2,
- top: dstOffset.top - this.popup.outerHeight() + 15
+ left: dstOffset.left + ( this.handle.width() - this.popup.width() ) / 2
});
this.handle_press.offset({
// show value on the handle and in popup
updateSlider: function () {
var font_size,
+ padding_size,
newValue;
- if ( this.popupVisible ) {
- this.positionPopup();
- }
-
// remove the title attribute from the handle (which is
// responsible for the annoying tooltip); NB we have
// to do it here as the jqm slider sets it every time
newValue = this.element.val();
+ if ( this.popupVisible ) {
+ this.positionPopup();
+
+ if ( newValue > 999 ) {
+ font_size = '0.8rem';
+ padding_size = '0.5rem';
+ } else if ( newValue > 99 ) {
+ font_size = '1rem';
+ padding_size = '0.5rem';
+ } else {
+ font_size = '1.5rem';
+ padding_size = '0.15rem';
+ }
+
+ this.popup.css({
+ "font-size": font_size,
+ "padding-top": padding_size
+ });
+ }
+
if ( newValue === this.currentValue ) {
return;
}
if ( newValue > 999 ) {
- font_size = '0.7em';
+ font_size = '0.5rem';
} else if ( newValue > 99 ) {
- font_size = '0.8em';
+ font_size = '0.7rem';
} else if ( newValue > 9 ) {
- font_size = '0.9em';
+ font_size = '0.85rem';
} else {
- font_size = '1em';
+ font_size = '0.95rem';
}
if ( font_size != this.handleText.css('font-size') ) {
var self = this;
this.element.hide().after( this._ui.container );
if ( this.element.jqmData("icon") ) {
+ this._ui.container.addClass("ui-toggleswitch-image-style");
this._ui.container.find(".ui-toggleswitch-text").hide();
+ this._ui.container.find(".ui-toggleswitch-reed").hide();
this._ui.container.find(".ui-toggleswitch-img").show();
} else {
this._ui.container.find(".ui-toggleswitch-img").hide();
}
else {
insideTag = 0;
- printf("\n
$( [ \"<div>");
+ printf("\n [ \"<div>");
while (1 == (getline inputLine < protoFile)) {
for (Nix1 = 1 ; Nix1 <= length(inputLine) ; Nix1++) {
theChar = substr(inputLine, Nix1, 1);
}
printf("\" ,\n \"");
}
- printf("</div>\" ].join(\"\"))");
+ printf("</div>\" ].join(\"\")");
close(protoFile);
}
}
projects / platform / framework / web / web-ui-fw.git / commitdiff
