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

   1 @import "config.less";
   2
   3 /* Progress - circle style */
   4 @img-height: 64 * @unit_base;
   5 @img-width: 64 * @unit_base;
   6 @bar-vmargin: 16 * @unit_base;
   7 @bar-hmargin: 1 * @unit_base;
   8
   9 @-webkit-keyframes ui-rotate-animation {
  10         from {
  11                 -webkit-transform: rotate(0deg);
  12         } to {
  13                 -webkit-transform: rotate(360deg);
  14         }
  15 }
  16
  17 .ui-progress-container-circle-bg {
  18         position: relative;
  19         margin-top: @bar-hmargin;
  20         margin-bottom: @bar-hmargin;
  21         width: 100%;
  22         height: @img-height;
  23 }
  24
  25 .ui-progress-container-circle {
  26         position: relative;
  27         margin-left: @bar-vmargin;
  28         margin-right: @bar-vmargin;
  29         height: @img-height;
  30         width: @img-width;
  31         float: right;
  32         vertical-align: middle;
  33 }
  34
  35 .ui-progress-circle {
  36         position: relative;
  37         top: 0;
  38
  39         height: @img-height;
  40         width: @img-width;
  41
  42         background: url(images/process/00_winset_list_process_01.png) no-repeat;
  43         .LESSbackground-size(@img-height, @img-width);
  44 }
  45 .ui-progress-circle-running {
  46         -webkit-animation: ui-rotate-animation 1s infinite linear;
  47 }
  48
  49 /* Progress - pending style */
  50 @bar-height: 16 * @unit_base;
  51 @bar-margin: 16 * @unit_base;
  52 @bar-color0: rgb(55, 55, 55);
  53 @bar-color1: rgb(0, 140, 210);
  54
  55 @-webkit-keyframes ui-move-animation {
  56         from {
  57                 -webkit-transform: translateY(-@bar-height * 2);
  58         } to {
  59                 -webkit-transform: translateY(0);
  60         }
  61 }
  62
  63 .ui-progress-container-pending {
  64         position: relative;
  65         margin-left: @bar-margin;
  66         margin-right: @bar-margin;
  67         height: @bar-height;
  68         overflow: hidden;
  69 }
  70
  71 .ui-progress-pending {
  72         position: relative;
  73         top: 0;
  74         width: 100%;
  75         height: @bar-height * 3;
  76         padding-top: 0;
  77         padding-bottom: 0;
  78
  79         background: -webkit-linear-gradient(-45deg,
  80                                 transparent,
  81                                 transparent 25%,
  82                                 @bar-color1 25%,
  83                                 @bar-color1 50%,
  84                                 transparent 50%,
  85                                 transparent 75%,
  86                                 @bar-color1 75%);
  87
  88         background: -webkit-gradient(linear,
  89                                 left top,
  90                                 right bottom,
  91                                 color-stop(0%,  rgba(0,0,0,0)),
  92                                 color-stop(25%, rgba(0,0,0,0)),
  93                                 color-stop(25%, @bar-color1),
  94                                 color-stop(50%, @bar-color1),
  95                                 color-stop(50%, rgba(0,0,0,0)),
  96                                 color-stop(75%, rgba(0,0,0,0)),
  97                                 color-stop(75%, @bar-color1));
  98
  99         background-color: @bar-color0;
 100
 101         .LESSbackground-size(@bar-height * 2, @bar-height * 2);
 102 }
 103 .ui-progress-pending-running {
 104         -webkit-animation: ui-move-animation 0.5s infinite linear;
 105 }
 106