Button top, bottom icon margin has been changed
Demo custom button icon path has been changed
Change-Id: I21872c3c474d22f74ad283e1f00d3c65fa57c840
*Button Icon Position top, bottom (with inline)
<div data-role="button" data-icon="call" data-iconpos="top">PositionTop</div><br/>
<div data-role="button" data-icon="call" data-iconpos="bottom">PositionBottom</div><br/>
*Button Icon Position top, bottom (with inline)
<div data-role="button" data-icon="call" data-iconpos="top">PositionTop</div><br/>
<div data-role="button" data-icon="call" data-iconpos="bottom">PositionBottom</div><br/>
- <div data-role="button" data-icon="reveal" data-iconpos="top" data-inline="true">PositionTop</div>
- <div data-role="button" data-icon="reveal" data-iconpos="bottom" data-inline="true">PositionBottom</div><br/>
+ <div data-role="button" data-icon="call" data-iconpos="top" data-inline="true">PositionTop</div>
+ <div data-role="button" data-icon="call" data-iconpos="bottom" data-inline="true">PositionBottom</div><br/>
HTML Code:
<textarea style="width:80%;padding:1em;background-color:whitesmoke;color:black;border-style:inset"><div data-role="button" data-icon="call" data-iconpos="top">PositionTop</div>
<div data-role="button" data-icon="call" data-iconpos="bottom">PositionBottom</div>
HTML Code:
<textarea style="width:80%;padding:1em;background-color:whitesmoke;color:black;border-style:inset"><div data-role="button" data-icon="call" data-iconpos="top">PositionTop</div>
<div data-role="button" data-icon="call" data-iconpos="bottom">PositionBottom</div>
-<div data-role="button" data-icon="reveal" data-iconpos="top" data-inline="true">PositionTop</div>
-<div data-role="button" data-icon="reveal" data-iconpos="bottom" data-inline="true">PositionBottom</div></textarea><br/><br/>
+<div data-role="button" data-icon="call" data-iconpos="top" data-inline="true">PositionTop</div>
+<div data-role="button" data-icon="call" data-iconpos="bottom" data-inline="true">PositionBottom</div></textarea><br/><br/>
- <div data-role="button" data-inline="true" data-icon="test">Custom</div>
- <div data-role="button" data-inline="true" data-icon="test" data-iconpos="top">Custom Top</div>
- <div data-role="button" data-inline="true" data-icon="test" data-iconpos="bottom">Custom Bottom</div>
- <div data-role="button" data-inline="true" data-icon="test" style="width:150px;height:150px">Custom width,height</div>
- <div data-role="button" data-inline="true" data-icon="test2" data-style="circle"></div><br/>
+ <div data-role="button" data-inline="true" data-icon="call">Custom</div>
+ <div data-role="button" data-inline="true" data-icon="call" data-iconpos="top">Custom Top</div>
+ <div data-role="button" data-inline="true" data-icon="call" data-iconpos="bottom">Custom Bottom</div>
+ <div data-role="button" data-inline="true" data-icon="call" style="width:150px;height:150px">Custom width,height</div>
+ <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div><br/>
- <textarea style="width:80%;padding:1em;background-color:whitesmoke;color:black;border-style:inset"><div data-role="button" data-inline="true" data-icon="test">Custom</div>
-<div data-role="button" data-inline="true" data-icon="test" data-iconpos="top">Custom Top</div>
-<div data-role="button" data-inline="true" data-icon="test" data-iconpos="bottom">Custom Bottom</div>
-<div data-role="button" data-inline="true" data-icon="test" style="width:150px;height:150px">Custom width,height</div></textarea>
+ <textarea style="width:80%;padding:1em;background-color:whitesmoke;color:black;border-style:inset"><div data-role="button" data-inline="true" data-icon="call">Custom</div>
+<div data-role="button" data-inline="true" data-icon="call" data-iconpos="top">Custom Top</div>
+<div data-role="button" data-inline="true" data-icon="call" data-iconpos="bottom">Custom Bottom</div>
+<div data-role="button" data-inline="true" data-icon="call" style="width:150px;height:150px">Custom width,height</div></textarea>
CSS Code:<br/>
<textarea style="width:80%;padding:1em;background-color:whitesmoke;color:black;border-style:inset">.ui-icon-test{
background-size: 100% 100%;
CSS Code:<br/>
<textarea style="width:80%;padding:1em;background-color:whitesmoke;color:black;border-style:inset">.ui-icon-test{
background-size: 100% 100%;
- background-image: url(test.png);
+ background-image: url(00_button_call);
}
.ui-icon-test2{
background-position:0% 0%;
background-size:50% 50%;
}
.ui-icon-test2{
background-position:0% 0%;
background-size:50% 50%;
- background-image: url(test.png);
+ background-image: url(00_button_call);
}</textarea>
*Input Type = "Button"
<input type="button" value="test button"/>
}</textarea>
*Input Type = "Button"
<input type="button" value="test button"/>
}
.ui-btn-box-s.ui-btn-icon-top .ui-icon, .ui-btn-box-s.ui-btn-icon-bottom .ui-icon
{
}
.ui-btn-box-s.ui-btn-icon-top .ui-icon, .ui-btn-box-s.ui-btn-icon-bottom .ui-icon
{
- margin-left: -64 * @unit_base / 2;
+ margin-left: -32 * @unit_base / 2;
left: 50%;
}
.tizen-icon-common
left: 50%;
}
.tizen-icon-common