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}