Subversion Repositories SmartDukaan

Rev

Details | Last modification | View Log | RSS feed

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