1  @import 'common/sass/variables';
  2  @import 'common/sass/mixins';
  3  
  4  @keyframes wallet-button-enter {
  5    0% {
  6      opacity: 0;
  7      transform: translateY(6px);
  8    }
  9    100% {
 10      opacity: 1;
 11      transform: translateY(0px);
 12    }
 13  }
 14  
 15  .WalletButton {
 16    position: relative;
 17    flex: 1;
 18    height: 155px;
 19    max-width: 230px;
 20    min-width: 200px;
 21    padding: 25px 15px;
 22    margin: 0 $space-md $space;
 23  
 24    background: color(control-bg);
 25    box-shadow: 0 1px 4px rgba(#000, 0.2);
 26    border-radius: 8px;
 27    text-align: center;
 28    cursor: pointer;
 29    transition: transform 150ms ease, box-shadow 150ms ease;
 30    animation: wallet-button-enter 400ms ease 1;
 31    animation-fill-mode: backwards;
 32  
 33    @for $i from 0 to 6 {
 34      &:nth-child(#{$i}) {
 35        animation-delay: 100ms + ($i * 60ms);
 36      }
 37    }
 38  
 39    &:not(.is-disabled) {
 40      &:hover,
 41      &:focus {
 42        transform: translateY(-2px);
 43        z-index: 2;
 44        box-shadow: 0 1px 4px rgba(#000, 0.12), 0 4px 6px rgba(#000, 0.12);
 45  
 46        .WalletButton-title {
 47          color: color(brand-primary);
 48  
 49          &-icon {
 50            opacity: 1;
 51          }
 52        }
 53      }
 54  
 55      &:active {
 56        transform: translateY(-1px);
 57        box-shadow: 0 1px 2px rgba(#000, 0.2), 0 3px 4px rgba(#000, 0.2);
 58      }
 59    }
 60  
 61    &.is-disabled {
 62      cursor: not-allowed;
 63      @include show-tooltip-on-hover;
 64  
 65      .WalletButton-inner {
 66        opacity: 0.3;
 67      }
 68    }
 69  
 70    &-inner {
 71      transition: opacity 200ms ease;
 72    }
 73  
 74    &-title {
 75      display: flex;
 76      justify-content: center;
 77      align-items: center;
 78      font-size: $font-size-medium;
 79      margin-bottom: $space * 1.25;
 80      transition: color 150ms ease;
 81  
 82      &-icon {
 83        margin-right: 8px;
 84        max-height: 26px;
 85        opacity: 0.8;
 86  
 87        @include theme(dark) {
 88          opacity: 1;
 89          filter: invert(1);
 90  
 91          // Kind of hacky, but we don't want to invert metamask
 92          &[src*="metamask"] {
 93            filter: none;
 94          }
 95        }
 96      }
 97    }
 98  
 99    &-description {
100      color: shade-dark(0.65);
101      font-size: $font-size-small;
102      font-weight: lighter;
103    }
104  
105    &-example {
106      font-size: $font-size-xs;
107      color: color(brand-danger-light);
108      @include ellipsis;
109    }
110  
111    &-icons {
112      position: absolute;
113      bottom: 5px;
114      right: 5px;
115  
116      &-icon {
117        position: relative;
118        margin-left: 8px;
119        @include show-tooltip-on-hover;
120  
121        .fa {
122          position: relative;
123          opacity: 0.6;
124          font-size: $font-size-medium;
125  
126          &:hover {
127            opacity: 0.9;
128          }
129  
130          &-shield {
131            color: color(brand-primary);
132          }
133  
134          &-exclamation-triangle {
135            color: color(brand-warning);
136          }
137  
138          &-question-circle,
139          &-eye {
140            color: shade-dark(0.5);
141          }
142  
143          &-question-circle:hover {
144            color: color(brand-primary);
145          }
146        }
147      }
148    }
149  
150    &--small {
151      height: 105px;
152      max-width: 180px;
153      min-width: 160px;
154      margin: 0 $space-sm $space-md;
155      padding: 20px 15px;
156  
157      .WalletButton {
158        &-title {
159          font-size: $font-size-bump;
160          margin-bottom: $space-sm;
161        }
162  
163        &-icons {
164          &-icon {
165            margin-left: 6px;
166  
167            .fa {
168              font-size: $font-size-bump;
169            }
170          }
171        }
172      }
173    }
174  
175    // Mobile handling
176    @media screen and (max-width: $screen-xs) {
177      padding: 16px;
178  
179      &,
180      &--small {
181        height: auto;
182        width: 100%;
183        min-width: 100%;
184        max-width: none;
185        margin-left: 0;
186        margin-right: 0;
187      }
188  
189      &-title {
190        justify-content: flex-start;
191        margin: 0;
192      }
193  
194      &-description,
195      &-example {
196        display: none;
197      }
198  
199      &-icons {
200        top: 0;
201        right: 0;
202        bottom: 0;
203  
204        &-icon {
205          float: left;
206          display: block;
207          height: 100%;
208          margin: 0;
209          width: 48px;
210          text-align: center;
211          border-left: 1px solid rgba(0, 0, 0, 0.1);
212  
213          a {
214            position: absolute;
215            top: 0;
216            left: 0;
217            right: 0;
218            bottom: 0;
219          }
220  
221          .fa {
222            position: absolute;
223            top: 50%;
224            left: 50%;
225            transform: translate(-50%, -50%);
226          }
227        }
228      }
229  
230      &--small {
231        padding: 12px;
232  
233        .WalletButton-title {
234          margin: 0;
235        }
236  
237        .WalletButton-icons {
238          &-icon {
239            margin: 0;
240          }
241        }
242      }
243    }
244  }