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

   1 @import "config.less";
   2
   3 @-webkit-keyframes ui-datetime-in {
   4         from {
   5                 -webkit-transform: translateY(14 * @unit_base) scale(.9);
   6         } to {
   7                 -webkit-transform: translateY(0) scale(1);
   8         }
   9 }
  10
  11 @-webkit-keyframes ui-datetime-out {
  12         from {
  13                 opacity: 0.8;
  14                 -webkit-transform: translateY(0) scale(.6);
  15         } to {
  16                 opacity: 0;
  17                 -webkit-transform: translateY(-14 * @unit_base) scale(.6);
  18         }
  19 }
  20
  21 .ui-datefield {
  22         .ui-datefield-seperator {
  23                 display: inline-block;
  24                 min-width: 10 * @unit_base;
  25                 text-align: center;
  26         }
  27
  28         .date,.time,.ui-datefield-tab {
  29                 display: inline-block;
  30         }
  31
  32         .ui-datefield-tab {
  33                 min-width: 20 * @unit_base;
  34         }
  35
  36         .ui-btn-box-s .ui-btn-inner.ui-btn-hastxt {
  37                 padding: 0.1em 0.5em;
  38         }
  39
  40         .ui-datefield-selected {
  41                 display: inline-block;
  42                 color: @color_timepicker_selector_color;
  43         }
  44         .ui-datefield-selected.in {
  45                 -ms-animation: ui-datetime-in 0.3s 1 ease;
  46                 -o-animation: ui-datetime-in 0.3s 1 ease;
  47                 -moz-animation: ui-datetime-in 0.3s 1 ease;
  48                 -webkit-animation: ui-datetime-in 0.3s 1 ease;
  49         }
  50         .ui-datefield-selected.out {
  51                 -ms-animation: ui-datetime-out 0.3s 1 ease;
  52                 -o-animation: ui-datetime-out 0.3s 1 ease;
  53                 -moz-animation: ui-datetime-out 0.3s 1 ease;
  54                 -webkit-animation: ui-datetime-out 0.3s 1 ease;
  55         }
  56 }
  57
  58 .ui-datetime {
  59         margin: 0;
  60         height: 36 * @unit_base;
  61 }
  62
  63 .ui-datetime-text-main {
  64         position: relative;
  65         font-size: @font_size_datetime_main_text;
  66         top: 0 ;
  67         text-overflow: ellipsis;
  68         overflow: hidden;
  69         white-space: nowrap;
  70         padding-top: 0.3em;
  71 }
  72
  73 .ui-datetime-text-main .ui-datefield-period.ui-btn {
  74         margin-top: -0.3em;
  75         height: 28 * @unit_base;
  76         right: auto;
  77         position: relative ! important;
  78 }
  79
  80 .ui-datetime-text-sub {
  81         top: 15 * @unit_base ! important;
  82         color: @color_list_divider_text ! important;
  83         background: transparent ! important;
  84         font-size: @font_size_datetime_sub_text ! important;
  85 }
  86
  87 .ui-datetimepicker-selector {
  88         ul {
  89                 padding: 0;
  90                 display: inline;
  91                 list-style: none;
  92                 vertical-align: middle;
  93                 margin: 0;
  94
  95                 li {
  96                         font-size: 22 * @unit_base;
  97                         float: left;
  98                         padding: 15 * @unit_base 4 * @unit_base 0 4 * @unit_base;
  99                         max-width: 120 * @unit_base;
 100                         min-width: 60 * @unit_base;
 101
 102                         a.ui-link {
 103                                 text-decoration: none;
 104                                 color: @color_ctxpopup_timepicker_text;
 105                         }
 106
 107                         a.ui-link:hover {
 108                                 color: @color_ctxpopup_timepicker_text;
 109                         }
 110                 }
 111
 112                 li.current {
 113                         a.ui-link {
 114                                 color: @color_ctxpopup_timepicker_text_focus;
 115                         }
 116                 }
 117         }
 118 }
 119
 120 .ui-datetimepicker {
 121         left: 0 !important;
 122         padding: 0;
 123
 124         .ui-popupwindow-padding {
 125                 background: @color_timepicker_selector_color !important;
 126                 border-radius: 0 !important;
 127                 -ms-border-radius: 0 !important;
 128                 -o-border-radius: 0 !important;
 129                 -moz-border-radius: 0 !important;
 130                 -webkit-border-radius: 0 !important;
 131                 box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.6) !important;
 132                 border-width: 0 !important;
 133                 text-align: center !important;
 134
 135                 div {
 136                         height: 53 * @unit_base;
 137                 }
 138         }
 139 }