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

   1 @import "config.less";
   2
   3 /* tickernoti */
   4
   5 @ticker-height: 100 * @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 }
  44
  45 .ui-ticker.show {
  46         display: block;
  47         -ms-animation: ui-ticker-show 0.8s 1 ease;
  48         -o-animation: ui-ticker-show 0.8s 1 ease;
  49         -moz-animation: ui-ticker-show 0.8s 1 ease;
  50         -webkit-animation: ui-ticker-show 0.8s 1 ease;
  51         top: 0;
  52 }
  53
  54 .ui-ticker.hide {
  55         display: block;
  56         -ms-animation: ui-ticker-hide 0.8s 1 ease;
  57         -o-animation: ui-ticker-hide 0.8s 1 ease;
  58         -ms-animation: ui-ticker-hide 0.8s 1 ease;
  59         -webkit-animation: ui-ticker-hide 0.8s 1 ease;
  60         top: -@ticker-height;
  61 }
  62
  63 .ui-ticker-btn {
  64         position: relative;
  65         height: 54 * @unit_base;
  66         margin-top: 23 * @unit_base;
  67         margin-left: 16 * @unit_base;
  68         margin-right: 16 * @unit_base;
  69         vertical-align: middle;
  70         float: right;
  71
  72         .ui-btn-inner {
  73                 padding: 0.3em 0.7em;
  74                 background: @color_ticker_btn;
  75         }
  76 }
  77
  78 .ui-ticker-icon {
  79         position: absolute;
  80         top: 0;
  81         height: 64 * @unit_base;
  82         width: 64 * @unit_base;
  83         margin-top: 18 * @unit_base;
  84         margin-bottom: 18 * @unit_base;
  85         margin-left: 16 * @unit_base;
  86         margin-right: 16 * @unit_base;
  87         vertical-align: middle;
  88 }
  89
  90 .ui-ticker-text1-bg {
  91         position: absolute;
  92         top: 0;
  93         height: 32 * @unit_base;
  94         left: 96 * @unit_base;
  95         margin-top: 16 * @unit_base;
  96         color: @color_ticker_text1;
  97 }
  98
  99 .ui-ticker-text2-bg {
 100         position: absolute;
 101         top: 0;
 102         height: 32 * @unit_base;
 103         left: 96 * @unit_base;
 104         margin-top: 52 * @unit_base;
 105         font-size: 0.9em;
 106         color: @color_ticker_text2;
 107 }
 108
 109 /* smallpopup */
 110
 111 @-webkit-keyframes ui-smallpopup-show {
 112         from {
 113                 opacity: 0;
 114                 -webkit-transform: scaleY(0);
 115         } to {
 116                 opacity: 1;
 117                 -webkit-transform: scaleY(1);
 118         }
 119 }
 120
 121 @-webkit-keyframes ui-smallpopup-hide {
 122         from {
 123                 opacity: 1;
 124                 left: 0;
 125                 -webkit-transform: scaleY(1);
 126         } to {
 127                 opacity: 0;
 128                 left: 0;
 129                 -webkit-transform: scaleY(0);
 130         }
 131 }
 132
 133 .ui-smallpopup {
 134         position: fixed;
 135         display: none;
 136         left: 0;
 137         width: 100%;
 138         z-index: @z_base_smallpopup;
 139         background: @color_smallpopup_bg;
 140         vertical-align: middle;
 141         word-break: break-all;
 142 }
 143
 144 .ui-smallpopup.fix {
 145         display: block;
 146 }
 147
 148 .ui-smallpopup.show {
 149         display: block;
 150         -moz-animation: ui-smallpopup-show 0.5s 1 ease;
 151         -ms-animation: ui-smallpopup-show 0.5s 1 ease;
 152         -o-animation: ui-smallpopup-show 0.5s 1 ease;
 153         -webkit-animation: ui-smallpopup-show 0.5s 1 ease;
 154 }
 155
 156 .ui-smallpopup.hide {
 157         display: block;
 158         left: -100%;
 159         -moz-animation: ui-smallpopup-hide 0.5s 1 ease;
 160         -ms-animation: ui-smallpopup-hide 0.5s 1 ease;
 161         -o-animation: ui-smallpopup-hide 0.5s 1 ease;
 162         -webkit-animation: ui-smallpopup-hide 0.5s 1 ease;
 163 }
 164
 165 .ui-smallpopup-text-bg {
 166         position: relative;
 167         margin-top: 6 * @unit_base;
 168         margin-bottom: 6 * @unit_base;
 169         margin-left: 16 * @unit_base;
 170         margin-right: 16 * @unit_base;
 171         color: @color_smallpopup_text;
 172 }