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