1  // Use px and don't use variables here, we want the wallet to look
 2  // consistent regardless of theme or screen size.
 3  
 4  $wallet-width: 680px;
 5  $wallet-height: 280px;
 6  
 7  .PaperWallet {
 8    position: relative;
 9    margin: 0 auto;
10    width: $wallet-width;
11    height: $wallet-height;
12    border: 1px solid #163151;
13    user-select: none;
14    cursor: default;
15    background: #FFF;
16    color: #333;
17  
18    &-sidebar {
19      float: left;
20      height: 100%;
21      width: auto;
22    }
23  
24    &-block {
25      position: relative;
26      float: left;
27      width: 27.5%;
28      padding: 20px;
29  
30      &-box {
31        width: 150px;
32        height: 150px;
33  
34        &.is-shaded {
35          background: rgba(#000, 0.02);
36        }
37      }
38  
39      &-text {
40        position: absolute;
41        top: 50%;
42        left: 100%;
43        width: 100%;
44        margin: 0;
45        transform: translate(-50%, -50%) rotate(-90deg);
46        font-size: 13px;
47        font-weight: 600;
48        color: #0b7290;
49        text-align: center;
50        text-transform: uppercase;
51        letter-spacing: 1px;
52      }
53    }
54  
55    &-info {
56      float: left;
57      width: 85%;
58      padding: 0 20px;
59  
60      &-text {
61        margin: 0 0 5px;
62        text-align: left;
63        font-size: 14px;
64        font-family: 'Roboto Mono', 'Menlo', 'Monaco', 'Consolas', 'Courier New', monospace;
65        font-weight: 300;
66  
67        &-label {
68          font-weight: 600;
69        }
70      }
71    }
72  
73    &-identicon {
74      position: absolute;
75      right: 15px;
76      bottom: 45px;
77  
78      &-left {
79        float: left;
80      }
81  
82      &-text {
83        float: left;
84        width: 130px;
85        padding: 0 5px;
86        margin: 12px 0 0;
87        font-size: 9px;
88        text-align: center;
89      }
90    }
91  }