Subversion Repositories SmartDukaan

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
15747 anikendra 1 
 
2 
// Scroll refresher (for pull to refresh)
3 
.scroll-refresher {
4 
  position: absolute;
5 
  top: -60px;
6 
  right: 0;
7 
  left: 0;
8 
  overflow: hidden;
9 
  margin: auto;
10 
  height: 60px;
11 
  .ionic-refresher-content {
12 
    position: absolute;
13 
    bottom: 15px;
14 
    left: 0;
15 
    width: 100%;
16 
    color: $scroll-refresh-icon-color;
17 
    text-align: center;
18 
 
19 
    font-size: 30px;
20 
 
21 
    .text-refreshing,
22 
    .text-pulling {
23 
      font-size: 16px;
24 
      line-height: 16px;
25 
    }
26 
    &.ionic-refresher-with-text {
27 
      bottom: 10px;
28 
    }
29 
  }
30 
 
31 
  .icon-refreshing,
32 
  .icon-pulling {
33 
    width: 100%;
34 
    -webkit-backface-visibility: hidden;
35 
    backface-visibility: hidden;
36 
    -webkit-transform-style: preserve-3d;
37 
    transform-style: preserve-3d;
38 
  }
39 
  .icon-pulling {
40 
    @include animation-name(refresh-spin-back);
41 
    @include animation-duration(200ms);
42 
    @include animation-timing-function(linear);
43 
    @include animation-fill-mode(none);
44 
    -webkit-transform: translate3d(0,0,0) rotate(0deg);
45 
    transform: translate3d(0,0,0) rotate(0deg);
46 
  }
47 
  .icon-refreshing,
48 
  .text-refreshing {
49 
    display: none;
50 
  }
51 
  .icon-refreshing {
52 
    @include animation-duration(1.5s);
53 
  }
54 
 
55 
  &.active {
56 
    .icon-pulling:not(.pulling-rotation-disabled) {
57 
      @include animation-name(refresh-spin);
58 
      -webkit-transform: translate3d(0,0,0) rotate(-180deg);
59 
      transform: translate3d(0,0,0) rotate(-180deg);
60 
    }
61 
    &.refreshing {
62 
      @include transition(-webkit-transform .2s);
63 
      @include transition(transform .2s);
64 
      -webkit-transform: scale(1,1);
65 
      transform: scale(1,1);
66 
 
67 
      .icon-pulling,
68 
      .text-pulling {
69 
        display: none;
70 
      }
71 
      .icon-refreshing,
72 
      .text-refreshing {
73 
        display: block;
74 
      }
75 
      &.refreshing-tail {
76 
        -webkit-transform: scale(0,0);
77 
        transform: scale(0,0);
78 
      }
79 
    }
80 
  }
81 
}
82 
.overflow-scroll > .scroll{
83 
  &.overscroll{
84 
    position:fixed;
85 
  }
86 
  -webkit-overflow-scrolling:touch;
87 
  width:100%;
88 
}
89 
 
90 
@-webkit-keyframes refresh-spin {
91 
  0%   { -webkit-transform: translate3d(0,0,0) rotate(0); }
92 
  100% { -webkit-transform: translate3d(0,0,0) rotate(180deg); }
93 
}
94 
 
95 
@keyframes refresh-spin {
96 
  0%   { transform: translate3d(0,0,0) rotate(0); }
97 
  100% { transform: translate3d(0,0,0) rotate(180deg); }
98 
}
99 
 
100 
@-webkit-keyframes refresh-spin-back {
101 
  0%   { -webkit-transform: translate3d(0,0,0) rotate(180deg); }
102 
  100% { -webkit-transform: translate3d(0,0,0) rotate(0); }
103 
}
104 
 
105 
@keyframes refresh-spin-back {
106 
  0%   { transform: translate3d(0,0,0) rotate(180deg); }
107 
  100% { transform: translate3d(0,0,0) rotate(0); }
108 
}