Tizen 2.0 Release

[platform/framework/web/web-ui-fw.git] / src / themes / tizen / common / jquery.mobile.tizen.notification.less

diff --git a/src/themes/tizen/common/jquery.mobile.tizen.notification.less b/src/themes/tizen/common/jquery.mobile.tizen.notification.less
index fc0b2da..08e689d 100644 (file)
--- a/src/themes/tizen/common/jquery.mobile.tizen.notification.less
+++ b/src/themes/tizen/common/jquery.mobile.tizen.notification.less
@@ -2,7 +2,7 @@
 
 /* tickernoti */
 
-@ticker-height: 100px;
+@ticker-height: 50 * @unit_base;
 
 @-webkit-keyframes ui-ticker-show {
        from {
@@ -40,72 +40,98 @@
 
 .ui-ticker.fix{
        display: block;
+       top: 0;
 }
 
 .ui-ticker.show {
        display: block;
+       -ms-animation: ui-ticker-show 0.8s 1 ease;
+       -o-animation: ui-ticker-show 0.8s 1 ease;
+       -moz-animation: ui-ticker-show 0.8s 1 ease;
        -webkit-animation: ui-ticker-show 0.8s 1 ease;
-       top: 0px;
+       top: 0;
 }
 
 .ui-ticker.hide {
        display: block;
+       -ms-animation: ui-ticker-hide 0.8s 1 ease;
+       -o-animation: ui-ticker-hide 0.8s 1 ease;
+       -ms-animation: ui-ticker-hide 0.8s 1 ease;
        -webkit-animation: ui-ticker-hide 0.8s 1 ease;
        top: -@ticker-height;
 }
 
 .ui-ticker-btn {
        position: relative;
-       height: 54px;
-       margin-top: 23px;
-       margin-left: 16px;
-       margin-right: 16px;
+       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.15rem 0 0 0;
+
+               height: 28 * @unit_base;
+               width: 77 * @unit_base;
+
+               font-size: 0.81rem;
+               color: @color_ticker_text1;
+
+               background: @color_ticker_btn;
+
+               border: 1px;
+               border-color: @color_ticker_btn_border;
+               box-shadow: 0 0 1px 1px @color_ticker_btn_border;
+       }
+
+       .ui-btn-box-s.ui-btn-up-s {
+               background: @color_ticker_btn;
+               box-shadow: 0 0 1px 1px @color_ticker_btn_border;
+               border-color: @color_ticker_btn_border;
+       }
+
+       .ui-btn-box-s.ui-btn-hover-s {
+               background: @color_ticker_btn;
+               box-shadow: 0 0 1px 1px @color_ticker_btn_border;
+               border-color: @color_ticker_btn_border;
        }
 }
 
 .ui-ticker-icon {
        position: absolute;
        top: 0;
-       height: 64px;
-       width: 64px;
-       margin-top: 18px;
-       margin-bottom: 18px;
-       margin-left: 16px;
-       margin-right: 16px;
+       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;
-
-       /* FIXME: please fix this image file */
-       background: url(images/00_button_call.png) no-repeat;
 }
 
 .ui-ticker-text1-bg {
        position: absolute;
        top: 0;
-       height: 28px;
-       left: 96px;
-       margin-top: 20px;
-       font-size: 0.8em;
+       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: 32px;
-       left: 96px;
-       margin-top: 48px;
+       height: 16 * @unit_base;
+       left: 48 * @unit_base;
+       margin-top: 26 * @unit_base;
+       font-size: 0.54rem;
        color: @color_ticker_text2;
 }
 
 /* smallpopup */
 
-@smallpopup-height: 48px;
-
 @-webkit-keyframes ui-smallpopup-show {
        from {
                opacity: 0;
@@ -119,12 +145,10 @@
 @-webkit-keyframes ui-smallpopup-hide {
        from {
                opacity: 1;
-               height: @smallpopup-height;
                left: 0;
                -webkit-transform: scaleY(1);
        } to {
                opacity: 0;
-               height: 0;
                left: 0;
                -webkit-transform: scaleY(0);
        }
@@ -133,13 +157,13 @@
 .ui-smallpopup {
        position: fixed;
        display: none;
-       top: 0;
        left: 0;
        width: 100%;
-       height: @smallpopup-height;
        z-index: @z_base_smallpopup;
        background: @color_smallpopup_bg;
        vertical-align: middle;
+       font-size: 0.72rem;
+       word-break: break-all;
 }
 
 .ui-smallpopup.fix {
@@ -148,20 +172,26 @@
 
 .ui-smallpopup.show {
        display: block;
-
+       -moz-animation: ui-smallpopup-show 0.5s 1 ease;
+       -ms-animation: ui-smallpopup-show 0.5s 1 ease;
+       -o-animation: ui-smallpopup-show 0.5s 1 ease;
        -webkit-animation: ui-smallpopup-show 0.5s 1 ease;
 }
 
 .ui-smallpopup.hide {
        display: block;
        left: -100%;
-
+       -moz-animation: ui-smallpopup-hide 0.5s 1 ease;
+       -ms-animation: ui-smallpopup-hide 0.5s 1 ease;
+       -o-animation: ui-smallpopup-hide 0.5s 1 ease;
        -webkit-animation: ui-smallpopup-hide 0.5s 1 ease;
 }
 
 .ui-smallpopup-text-bg {
        position: relative;
-       margin-top: 6px;
-       margin-left: 16px;
+       margin-top: 4 * @unit_base;
+       margin-bottom: 4 * @unit_base;
+       margin-left: 8 * @unit_base;
+       margin-right: 8 * @unit_base;
        color: @color_smallpopup_text;
 }