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         max-width: 90%;
  71         padding-top: 0.3em;
  72 }
  73
  74 .ui-datetime-text-main .ui-datefield-period.ui-btn {
  75         margin-top: -0.3em;
  76         height: 28 * @unit_base;
  77         right: auto;
  78         position: relative ! important;
  79 }
  80
  81 .ui-datetime-text-sub {
  82         top: 15 * @unit_base ! important;
  83         color: @color_list_divider_text ! important;
  84         background: transparent ! important;
  85         font-size: @font_size_datetime_sub_text ! important;
  86 }
  87
  88 .ui-datetimepicker-selector {
  89         ul {
  90                 padding: 0;
  91                 display: inline;
  92                 list-style: none;
  93                 vertical-align: middle;
  94                 margin: 0;
  95
  96                 li {
  97                         font-size: 22 * @unit_base;
  98                         float: left;
  99                         padding: 15 * @unit_base 4 * @unit_base 0 4 * @unit_base;
 100                         max-width: 120 * @unit_base;
 101                         min-width: 60 * @unit_base;
 102
 103                         a.ui-link {
 104                                 text-decoration: none;
 105                                 color: @color_ctxpopup_timepicker_text;
 106                         }
 107
 108                         a.ui-link:hover {
 109                                 color: @color_ctxpopup_timepicker_text;
 110                         }
 111                 }
 112
 113                 li.current {
 114                         a.ui-link {
 115                                 color: @color_ctxpopup_timepicker_text_focus;
 116                         }
 117                 }
 118         }
 119 }
 120
 121 .ui-datetimepicker {
 122         left: 0 !important;
 123         padding: 0;
 124
 125         .ui-popupwindow-padding {
 126                 background: @color_timepicker_selector_color !important;
 127                 border-radius: 0 !important;
 128                 -ms-border-radius: 0 !important;
 129                 -o-border-radius: 0 !important;
 130                 -moz-border-radius: 0 !important;
 131                 -webkit-border-radius: 0 !important;
 132                 box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.6) !important;
 133                 border-width: 0 !important;
 134                 text-align: center !important;
 135
 136                 div {
 137                         height: 53 * @unit_base;
 138                 }
 139         }
 140 }