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

   1 @import "config.less";
   2
   3 /* Progress - circle style */
   4 @img-height: 32 * @unit_base;
   5 @img-width: 32 * @unit_base;
   6
   7 @-webkit-keyframes ui-rotate-animation {
   8         from {
   9                 -webkit-transform: rotate(0deg);
  10         } to {
  11                 -webkit-transform: rotate(360deg);
  12         }
  13 }
  14
  15 .ui-progress-container-circle {
  16         position: absolute;
  17 }
  18
  19 .ui-li .ui-progress-container-circle {
  20         top: 22%;
  21 }
  22
  23 .ui-progress-circle {
  24         position: relative;
  25         top: 0;
  26
  27         height: @img-height;
  28         width: @img-width;
  29
  30         background: url(images/00_list_process_01.png) no-repeat;
  31         .LESSbackground-size(@img-width, @img-height);
  32 }
  33
  34 .ui-progress-circle-running {
  35         -webkit-animation: ui-rotate-animation 1s infinite linear;
  36 }
  37
  38 /* Progress - pending style */
  39 @bar-height: 7 * @unit_base;
  40 @bar-margin: 21 * @unit_base;
  41
  42 @-webkit-keyframes ui-move-animation {
  43         from {
  44                 -webkit-transform: translateY(-@bar-height * 2);
  45         } to {
  46                 -webkit-transform: translateY(0);
  47         }
  48 }
  49
  50 .ui-progress-pending {
  51         position: relative;
  52         top: 0;
  53         width: 100%;
  54         height: @bar-height * 3;
  55         padding-top: 0;
  56         padding-bottom: 0;
  57
  58         background: -webkit-gradient(linear,
  59                                 left top,
  60                                 right bottom,
  61                                 color-stop(0%,  rgba(0,0,0,0)),
  62                                 color-stop(25%, rgba(0,0,0,0)),
  63                                 color-stop(25%, @color_progress_value0),
  64                                 color-stop(50%, @color_progress_value0),
  65                                 color-stop(50%, rgba(0,0,0,0)),
  66                                 color-stop(75%, rgba(0,0,0,0)),
  67                                 color-stop(75%, @color_progress_value0));
  68
  69         background-color: @color_progress_bar0;
  70
  71         .LESSbackground-size(@bar-height * 2, @bar-height * 2);
  72 }
  73
  74 .ui-progress-pending-running {
  75         -webkit-animation: ui-move-animation 0.5s infinite linear;
  76 }