Subversion Repositories SmartDukaan

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
13542 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 
  }
78 
 
79 
  .popover,
80 
  .popover .bar-header {
81 
    border-radius: $popover-border-radius-ios;
82 
  }
83 
  .popover .scroll-content {
84 
    margin: 8px 0;
85 
    border-radius: $popover-border-radius-ios;
86 
  }
87 
  .popover .scroll-content.has-header {
88 
    margin-top: 0;
89 
  }
90 
  .popover-arrow {
91 
    position: absolute;
92 
    display: block;
93 
    top: -17px;
94 
    width: 30px;
95 
    height: 19px;
96 
    overflow: hidden;
97 
 
98 
    &:after {
99 
      position: absolute;
100 
      top: 12px;
101 
      left: 5px;
102 
      width: 20px;
103 
      height: 20px;
104 
      background-color: $popover-bg-color;
105 
      border-radius: 3px;
106 
      content: '';
107 
      @include rotate(-45deg);
108 
    }
109 
  }
110 
  .popover-bottom .popover-arrow {
111 
    top: auto;
112 
    bottom: -10px;
113 
    &:after {
114 
      top: -6px;
115 
    }
116 
  }
117 
}
118 
 
119 
 
120 
// Android Popover
121 
.platform-android {
122 
 
123 
  .popover {
124 
    margin-top: -32px;
125 
    background-color: $popover-bg-color-android;
126 
    box-shadow: $popover-box-shadow-android;
127 
 
128 
    .item {
129 
      border-color: $popover-bg-color-android;
130 
      background-color: $popover-bg-color-android;
131 
      color: #4d4d4d;
132 
    }
133 
    &.popover-bottom {
134 
      margin-top: 32px;
135 
    }
136 
  }
137 
 
138 
  .popover-backdrop,
139 
  .popover-backdrop.active {
140 
    background-color: transparent;
141 
  }
142 
}
143 
 
144 
 
145 
// disable clicks on all but the popover
146 
.popover-open {
147 
  pointer-events: none;
148 
 
149 
  .popover,
150 
  .popover-backdrop {
151 
    pointer-events: auto;
152 
  }
153 
  // prevent clicks on popover when loading overlay is active though
154 
  &.loading-active {
155 
    .popover,
156 
    .popover-backdrop {
157 
      pointer-events: none;
158 
    }
159 
  }
160 
}
161 
 
162 
 
163 
// wider popover on larger viewports
164 
@media (min-width: $popover-large-break-point) {
165 
  .popover {
166 
    width: $popover-large-width;
167 
  }
168 
}