src/themes/tizen/common/jquery.mobile.tizen.notification.less

   1 @import "config.less";
   2
   3 /* tickernoti */
   4
   5 @ticker-height: 50 * @unit_base;
   6
   7 @-webkit-keyframes ui-ticker-show {
   8         from {
   9                 opacity: 0;
  10                 -webkit-transform: translateY(-@ticker-height);
  11                 top: -@ticker-height;
  12         } to {
  13                 opacity: 1;
  14                 -webkit-transform: translateY(0);
  15                 top: 0;
  16         }
  17 }
  18
  19 @-webkit-keyframes ui-ticker-hide {
  20         from {
  21                 opacity: 1;
  22                 -webkit-transform: translateY(0);
  23                 top: 0;
  24         } to {
  25                 opacity: 0;
  26                 -webkit-transform: translateY(-@ticker-height);
  27                 top: -@ticker-height;
  28         }
  29 }
  30
  31 .ui-ticker {
  32         position: fixed;
  33         display: none;
  34         left: 0;
  35         width: 100%;
  36         height: @ticker-height;
  37         z-index: @z_base_tickernoti;
  38         background: @color_ticker_bg;
  39 }
  40
  41 .ui-ticker.fix{
  42         display: block;
  43         top: 0;
  44 }
  45
  46 .ui-ticker.show {
  47         display: block;
  48         -ms-animation: ui-ticker-show 0.8s 1 ease;
  49         -o-animation: ui-ticker-show 0.8s 1 ease;
  50         -moz-animation: ui-ticker-show 0.8s 1 ease;
  51         -webkit-animation: ui-ticker-show 0.8s 1 ease;
  52         top: 0;
  53 }
  54
  55 .ui-ticker.hide {
  56         display: block;
  57         -ms-animation: ui-ticker-hide 0.8s 1 ease;
  58         -o-animation: ui-ticker-hide 0.8s 1 ease;
  59         -ms-animation: ui-ticker-hide 0.8s 1 ease;
  60         -webkit-animation: ui-ticker-hide 0.8s 1 ease;
  61         top: -@ticker-height;
  62 }
  63
  64 .ui-ticker-btn {
  65         position: relative;
  66         margin-top: 10 * @unit_base;
  67         margin-left: 8 * @unit_base;
  68         margin-right: 8 * @unit_base;
  69         vertical-align: middle;
  70         float: right;
  71
  72         .ui-btn-inner {
  73                 padding: 0.15rem 0 0 0;
  74
  75                 height: 28 * @unit_base;
  76                 width: 77 * @unit_base;
  77
  78                 font-size: 0.81rem;
  79                 color: @color_ticker_text1;
  80
  81                 background: @color_ticker_btn;
  82
  83                 border: 1px;
  84                 border-color: @color_ticker_btn_border;
  85                 box-shadow: 0 0 1px 1px @color_ticker_btn_border;
  86         }
  87
  88         .ui-btn-box-s.ui-btn-up-s {
  89                 background: @color_ticker_btn;
  90                 box-shadow: 0 0 1px 1px @color_ticker_btn_border;
  91                 border-color: @color_ticker_btn_border;
  92         }
  93
  94         .ui-btn-box-s.ui-btn-hover-s {
  95                 background: @color_ticker_btn;
  96                 box-shadow: 0 0 1px 1px @color_ticker_btn_border;
  97                 border-color: @color_ticker_btn_border;
  98         }
  99 }
 100
 101 .ui-ticker-icon {
 102         position: absolute;
 103         top: 0;
 104         height: 32 * @unit_base;
 105         width: 32 * @unit_base;
 106         margin-top: 9 * @unit_base;
 107         margin-bottom: 9 * @unit_base;
 108         margin-left: 8 * @unit_base;
 109         margin-right: 8 * @unit_base;
 110         vertical-align: middle;
 111 }
 112
 113 .ui-ticker-text1-bg {
 114         position: absolute;
 115         top: 0;
 116         height: 18 * @unit_base;
 117         left: 48 * @unit_base;
 118         margin-top: 8 * @unit_base;
 119         font-size: 0.68rem;
 120         color: @color_ticker_text1;
 121 }
 122
 123 .ui-ticker-text2-bg {
 124         position: absolute;
 125         top: 0;
 126         height: 16 * @unit_base;
 127         left: 48 * @unit_base;
 128         margin-top: 26 * @unit_base;
 129         font-size: 0.54rem;
 130         color: @color_ticker_text2;
 131 }
 132
 133 /* smallpopup */
 134
 135 @-webkit-keyframes ui-smallpopup-show {
 136         from {
 137                 opacity: 0;
 138                 -webkit-transform: scaleY(0);
 139         } to {
 140                 opacity: 1;
 141                 -webkit-transform: scaleY(1);
 142         }
 143 }
 144
 145 @-webkit-keyframes ui-smallpopup-hide {
 146         from {
 147                 opacity: 1;
 148                 left: 0;
 149                 -webkit-transform: scaleY(1);
 150         } to {
 151                 opacity: 0;
 152                 left: 0;
 153                 -webkit-transform: scaleY(0);
 154         }
 155 }
 156
 157 .ui-smallpopup {
 158         position: fixed;
 159         display: none;
 160         left: 0;
 161         width: 100%;
 162         z-index: @z_base_smallpopup;
 163         background: @color_smallpopup_bg;
 164         vertical-align: middle;
 165         font-size: 0.72rem;
 166         word-break: break-all;
 167 }
 168
 169 .ui-smallpopup.fix {
 170         display: block;
 171 }
 172
 173 .ui-smallpopup.show {
 174         display: block;
 175         -moz-animation: ui-smallpopup-show 0.5s 1 ease;
 176         -ms-animation: ui-smallpopup-show 0.5s 1 ease;
 177         -o-animation: ui-smallpopup-show 0.5s 1 ease;
 178         -webkit-animation: ui-smallpopup-show 0.5s 1 ease;
 179 }
 180
 181 .ui-smallpopup.hide {
 182         display: block;
 183         left: -100%;
 184         -moz-animation: ui-smallpopup-hide 0.5s 1 ease;
 185         -ms-animation: ui-smallpopup-hide 0.5s 1 ease;
 186         -o-animation: ui-smallpopup-hide 0.5s 1 ease;
 187         -webkit-animation: ui-smallpopup-hide 0.5s 1 ease;
 188 }
 189
 190 .ui-smallpopup-text-bg {
 191         position: relative;
 192         margin-top: 4 * @unit_base;
 193         margin-bottom: 4 * @unit_base;
 194         margin-left: 8 * @unit_base;
 195         margin-right: 8 * @unit_base;
 196         padding-top: 8 * @unit_base;
 197         color: @color_smallpopup_text;
 198 }