Subversion Repositories SmartDukaan

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
15747 anikendra 1 
 
2 
/**
3 
 * Popovers
4 
 * --------------------------------------------------
5 
 * Popovers are independent views which float over content
6 
 */
7 
 
8 
.popover-backdrop {
9 
  position: fixed;
10 
  top: 0;
11 
  left: 0;
12 
  z-index: $z-index-popover;
13 
  width: 100%;
14 
  height: 100%;
15 
  background-color: $popover-backdrop-bg-inactive;
16 
 
17 
  &.active {
18 
    background-color: $popover-backdrop-bg-active;
19 
  }
20 
}
21 
 
22 
.popover {
23 
  position: absolute;
24 
  top: 25%;
25 
  left: 50%;
26 
  z-index: $z-index-popover;
27 
  display: block;
28 
  margin-top: 12px;
29 
  margin-left: -$popover-width / 2;
30 
  height: $popover-height;
31 
  width: $popover-width;
32 
  background-color: $popover-bg-color;
33 
  box-shadow: $popover-box-shadow;
34 
  opacity: 0;
35 
 
36 
  .item:first-child {
37 
    border-top: 0;
38 
  }
39 
 
40 
  .item:last-child {
41 
    border-bottom: 0;
42 
  }
43 
 
44 
  &.popover-bottom {
45 
    margin-top: -12px;
46 
  }
47 
}
48 
 
49 
 
50 
// Set popover border-radius
51 
.popover,
52 
.popover .bar-header {
53 
  border-radius: $popover-border-radius;
54 
}
55 
.popover .scroll-content {
56 
  z-index: 1;
57 
  margin: 2px 0;
58 
}
59 
.popover .bar-header {
60 
  border-bottom-right-radius: 0;
61 
  border-bottom-left-radius: 0;
62 
}
63 
.popover .has-header {
64 
  border-top-right-radius: 0;
65 
  border-top-left-radius: 0;
66 
}
67 
.popover-arrow {
68 
  display: none;
69 
}
70 
 
71 
 
72 
// iOS Popover
73 
.platform-ios {
74 
 
75 
  .popover {
76 
    box-shadow: $popover-box-shadow-ios;
77 
    border-radius: $popover-border-radius-ios;
78 
  }
79 
  .popover .bar-header {
80 
    @include border-top-radius($popover-border-radius-ios);
81 
  }
82 
  .popover .scroll-content {
83 
    margin: 8px 0;
84 
    border-radius: $popover-border-radius-ios;
85 
  }
86 
  .popover .scroll-content.has-header {
87 
    margin-top: 0;
88 
  }
89 
  .popover-arrow {
90 
    position: absolute;
91 
    display: block;
92 
    top: -17px;
93 
    width: 30px;
94 
    height: 19px;
95 
    overflow: hidden;
96 
 
97 
    &:after {
98 
      position: absolute;
99 
      top: 12px;
100 
      left: 5px;
101 
      width: 20px;
102 
      height: 20px;
103 
      background-color: $popover-bg-color;
104 
      border-radius: 3px;
105 
      content: '';
106 
      @include rotate(-45deg);
107 
    }
108 
  }
109 
  .popover-bottom .popover-arrow {
110 
    top: auto;
111 
    bottom: -10px;
112 
    &:after {
113 
      top: -6px;
114 
    }
115 
  }
116 
}
117 
 
118 
 
119 
// Android Popover
120 
.platform-android {
121 
 
122 
  .popover {
123 
    margin-top: -32px;
124 
    background-color: $popover-bg-color-android;
125 
    box-shadow: $popover-box-shadow-android;
126 
 
127 
    .item {
128 
      border-color: $popover-bg-color-android;
129 
      background-color: $popover-bg-color-android;
130 
      color: #4d4d4d;
131 
    }
132 
    &.popover-bottom {
133 
      margin-top: 32px;
134 
    }
135 
  }
136 
 
137 
  .popover-backdrop,
138 
  .popover-backdrop.active {
139 
    background-color: transparent;
140 
  }
141 
}
142 
 
143 
 
144 
// disable clicks on all but the popover
145 
.popover-open {
146 
  pointer-events: none;
147 
 
148 
  .popover,
149 
  .popover-backdrop {
150 
    pointer-events: auto;
151 
  }
152 
  // prevent clicks on popover when loading overlay is active though
153 
  &.loading-active {
154 
    .popover,
155 
    .popover-backdrop {
156 
      pointer-events: none;
157 
    }
158 
  }
159 
}
160 
 
161 
 
162 
// wider popover on larger viewports
163 
@media (min-width: $popover-large-break-point) {
164 
  .popover {
165 
    width: $popover-large-width;
166 
  }
167 
}