Subversion Repositories SmartDukaan

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
15747 anikendra 1 
/**
2 
 * Action Sheets
3 
 * --------------------------------------------------
4 
 */
5 
 
6 
.action-sheet-backdrop {
7 
  @include transition(background-color 150ms ease-in-out);
8 
  position: fixed;
9 
  top: 0;
10 
  left: 0;
11 
  z-index: $z-index-action-sheet;
12 
  width: 100%;
13 
  height: 100%;
14 
  background-color: rgba(0,0,0,0);
15 
 
16 
  &.active {
17 
    background-color: rgba(0,0,0,0.4);
18 
  }
19 
}
20 
 
21 
.action-sheet-wrapper {
22 
  @include translate3d(0, 100%, 0);
23 
  @include transition(all cubic-bezier(.36, .66, .04, 1) 500ms);
24 
  position: absolute;
25 
  bottom: 0;
26 
  left: 0;
27 
  right: 0;
28 
  width: 100%;
29 
  max-width: 500px;
30 
  margin: auto;
31 
}
32 
 
33 
.action-sheet-up {
34 
  @include translate3d(0, 0, 0);
35 
}
36 
 
37 
.action-sheet {
38 
  margin-left: $sheet-margin;
39 
  margin-right: $sheet-margin;
40 
  width: auto;
41 
  z-index: $z-index-action-sheet;
42 
  overflow: hidden;
43 
 
44 
  .button {
45 
    display: block;
46 
    padding: 1px;
47 
    width: 100%;
48 
    border-radius: 0;
49 
    border-color: $sheet-options-border-color;
50 
    background-color: transparent;
51 
 
52 
    color: $sheet-options-text-color;
53 
    font-size: 21px;
54 
 
55 
    &:hover {
56 
      color: $sheet-options-text-color;
57 
    }
58 
    &.destructive {
59 
      color: #ff3b30;
60 
      &:hover {
61 
        color: #ff3b30;
62 
      }
63 
    }
64 
  }
65 
 
66 
  .button.active, .button.activated {
67 
    box-shadow: none;
68 
    border-color: $sheet-options-border-color;
69 
    color: $sheet-options-text-color;
70 
    background: $sheet-options-bg-active-color;
71 
  }
72 
}
73 
 
74 
.action-sheet-has-icons .icon {
75 
  position: absolute;
76 
  left: 16px;
77 
}
78 
 
79 
.action-sheet-title {
80 
  padding: $sheet-margin * 2;
81 
  color: #8f8f8f;
82 
  text-align: center;
83 
  font-size: 13px;
84 
}
85 
 
86 
.action-sheet-group {
87 
  margin-bottom: $sheet-margin;
88 
  border-radius: $sheet-border-radius;
89 
  background-color: #fff;
90 
  overflow: hidden;
91 
 
92 
  .button {
93 
    border-width: 1px 0px 0px 0px;
94 
  }
95 
  .button:first-child:last-child {
96 
    border-width: 0;
97 
  }
98 
}
99 
 
100 
.action-sheet-options {
101 
  background: $sheet-options-bg-color;
102 
}
103 
 
104 
.action-sheet-cancel {
105 
  .button {
106 
    font-weight: 500;
107 
  }
108 
}
109 
 
110 
.action-sheet-open {
111 
  pointer-events: none;
112 
 
113 
  &.modal-open .modal {
114 
    pointer-events: none;
115 
  }
116 
 
117 
  .action-sheet-backdrop {
118 
    pointer-events: auto;
119 
  }
120 
}
121 
 
122 
 
123 
.platform-android {
124 
 
125 
  .action-sheet-backdrop.active {
126 
    background-color: rgba(0,0,0,0.2);
127 
  }
128 
 
129 
  .action-sheet {
130 
    margin: 0;
131 
 
132 
    .action-sheet-title,
133 
    .button {
134 
      text-align: left;
135 
      border-color: transparent;
136 
      font-size: 16px;
137 
      color: inherit;
138 
    }
139 
 
140 
    .action-sheet-title {
141 
      font-size: 14px;
142 
      padding: 16px;
143 
      color: #666;
144 
    }
145 
 
146 
    .button.active,
147 
    .button.activated {
148 
      background: #e8e8e8;
149 
    }
150 
  }
151 
 
152 
  .action-sheet-group {
153 
    margin: 0;
154 
    border-radius: 0;
155 
    background-color: #fafafa;
156 
  }
157 
 
158 
  .action-sheet-cancel {
159 
    display: none;
160 
  }
161 
 
162 
  .action-sheet-has-icons {
163 
 
164 
    .button {
165 
      padding-left: 56px;
166 
    }
167 
 
168 
  }
169 
 
170 
}