Subversion Repositories SmartDukaan

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
15747 anikendra 1 
 
2 
/**
3 
 * Modals
4 
 * --------------------------------------------------
5 
 * Modals are independent windows that slide in from off-screen.
6 
 */
7 
 
8 
.modal-backdrop,
9 
.modal-backdrop-bg {
10 
  position: fixed;
11 
  top: 0;
12 
  left: 0;
13 
  z-index: $z-index-modal;
14 
  width: 100%;
15 
  height: 100%;
16 
}
17 
 
18 
.modal-backdrop-bg {
19 
  pointer-events: none;
20 
}
21 
 
22 
.modal {
23 
  display: block;
24 
  position: absolute;
25 
  top: 0;
26 
  z-index: $z-index-modal;
27 
  overflow: hidden;
28 
  min-height: 100%;
29 
  width: 100%;
30 
  background-color: $modal-bg-color;
31 
}
32 
 
33 
@media (min-width: $modal-inset-mode-break-point) {
34 
  // inset mode is when the modal doesn't fill the entire
35 
  // display but instead is centered within a large display
36 
  .modal {
37 
    top: $modal-inset-mode-top;
38 
    right: $modal-inset-mode-right;
39 
    bottom: $modal-inset-mode-bottom;
40 
    left: $modal-inset-mode-left;
41 
    min-height: $modal-inset-mode-min-height;
42 
    width: (100% - $modal-inset-mode-left - $modal-inset-mode-right);
43 
  }
44 
 
45 
  .modal.ng-leave-active {
46 
    bottom: 0;
47 
  }
48 
 
49 
  // remove ios header padding from inset header
50 
  .platform-ios.platform-cordova .modal-wrapper .modal {
51 
    .bar-header:not(.bar-subheader) {
52 
      height: $bar-height;
53 
      > * {
54 
        margin-top: 0;
55 
      }
56 
    }
57 
    .tabs-top > .tabs,
58 
    .tabs.tabs-top {
59 
      top: $bar-height;
60 
    }
61 
    .has-header,
62 
    .bar-subheader {
63 
      top: $bar-height;
64 
    }
65 
    .has-subheader {
66 
      top: $bar-height + $bar-subheader-height;
67 
    }
68 
    .has-header.has-tabs-top {
69 
      top: $bar-height + $tabs-height;
70 
    }
71 
    .has-header.has-subheader.has-tabs-top {
72 
      top: $bar-height + $bar-subheader-height + $tabs-height;
73 
    }
74 
  }
75 
 
76 
  .modal-backdrop-bg {
77 
    @include transition(opacity 300ms ease-in-out);
78 
    background-color: $modal-backdrop-bg-active;
79 
    opacity: 0;
80 
  }
81 
 
82 
  .active .modal-backdrop-bg {
83 
    opacity: 0.5;
84 
  }
85 
}
86 
 
87 
// disable clicks on all but the modal
88 
.modal-open {
89 
  pointer-events: none;
90 
 
91 
  .modal,
92 
  .modal-backdrop {
93 
    pointer-events: auto;
94 
  }
95 
  // prevent clicks on modal when loading overlay is active though
96 
  &.loading-active {
97 
    .modal,
98 
    .modal-backdrop {
99 
      pointer-events: none;
100 
    }
101 
  }
102 
}