styles.scss (5881B)
1 .rtf { 2 box-sizing: border-box; 3 margin: 25px; 4 position: fixed; 5 white-space: nowrap; 6 z-index: 9998; 7 padding-left: 0; 8 list-style: none; 9 &.open { 10 .rtf--mb { 11 > * { 12 transform-origin: center center; 13 transform: none; 14 transition: ease-in-out transform 0.2s; 15 } 16 > ul { 17 list-style: none; 18 margin: 0; 19 padding: 0; 20 } 21 } 22 .rtf--ab__c { 23 &:hover { 24 25 > span { 26 transition: ease-in-out opacity 0.2s; 27 opacity: 0.9; 28 } 29 } 30 > span.always-show { 31 transition: ease-in-out opacity 0.2s; 32 opacity: 0.9; 33 } 34 &:nth-child(1) { 35 transform: translateY(-60px) scale(1); 36 transition-delay: 0.03s; 37 &.top { 38 transform: translateY(60px) scale(1); 39 } 40 } 41 &:nth-child(2) { 42 transform: translateY(-120px) scale(1); 43 transition-delay: 0.09s; 44 &.top { 45 transform: translateY(120px) scale(1); 46 } 47 } 48 &:nth-child(3) { 49 transform: translateY(-180px) scale(1); 50 transition-delay: 0.12s; 51 &.top { 52 transform: translateY(180px) scale(1); 53 } 54 } 55 &:nth-child(4) { 56 transform: translateY(-240px) scale(1); 57 transition-delay: 0.15s; 58 &.top { 59 transform: translateY(240px) scale(1); 60 } 61 } 62 &:nth-child(5) { 63 transform: translateY(-300px) scale(1); 64 transition-delay: 0.18s; 65 &.top { 66 transform: translateY(300px) scale(1); 67 } 68 } 69 &:nth-child(6) { 70 transform: translateY(-360px) scale(1); 71 transition-delay: 0.21s; 72 &.top { 73 transform: translateY(360px) scale(1); 74 } 75 } 76 } 77 } 78 } 79 80 .rtf--mb__c { 81 padding: 25px; 82 margin: -25px; 83 *:last-child { 84 margin-bottom: 0; 85 } 86 &:hover { 87 > span { 88 transition: ease-in-out opacity 0.2s; 89 opacity: 0.9; 90 } 91 } 92 > span.always-show { 93 transition: ease-in-out opacity 0.2s; 94 opacity: 0.9; 95 } 96 > span { 97 opacity: 0; 98 transition: ease-in-out opacity 0.2s; 99 position: absolute; 100 top: 50%; 101 transform: translateY(-50%); 102 margin-right: 6px; 103 margin-left: 4px; 104 background: rgba(0, 0, 0, 0.75); 105 padding: 2px 4px; 106 border-radius: 2px; 107 color: #fff; 108 font-size: 13px; 109 box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28); 110 &.right { 111 right: 100%; 112 } 113 } 114 } 115 116 .rtf--mb { 117 height: 56px; 118 width: 56px; 119 z-index: 9999; 120 background-color: #666; 121 display: inline-flex; 122 justify-content: center; 123 align-items: center; 124 position: relative; 125 border: none; 126 border-radius: 50%; 127 box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28); 128 cursor: pointer; 129 outline: none; 130 padding: 0; 131 -webkit-user-drag: none; 132 font-weight: bold; 133 color: #f1f1f1; 134 font-size: 18px; 135 > * { 136 transition: ease-in-out transform 0.2s; 137 } 138 } 139 140 .rtf--ab__c { 141 display: block; 142 position: absolute; 143 top: 0; 144 right: 1px; 145 padding: 10px 0; 146 margin: (-10px) 0; 147 transition: ease-in-out transform 0.2s; 148 > span { 149 opacity: 0; 150 transition: ease-in-out opacity 0.2s; 151 position: absolute; 152 top: 50%; 153 transform: translateY(-50%); 154 margin-right: 6px; 155 background: rgba(0, 0, 0, 0.75); 156 padding: 2px 4px; 157 border-radius: 2px; 158 color: #fff; 159 font-size: 13px; 160 box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28); 161 &.right { 162 right: 100%; 163 } 164 } 165 &:nth-child(1) { 166 transform: translateY(-60px) scale(0); 167 transition-delay: 0.21s; 168 &.top { 169 transform: translateY(60px) scale(0); 170 } 171 } 172 &:nth-child(2) { 173 transform: translateY(-120px) scale(0); 174 transition-delay: 0.18s; 175 &.top { 176 transform: translateY(120px) scale(0); 177 } 178 } 179 &:nth-child(3) { 180 transform: translateY(-180px) scale(0); 181 transition-delay: 0.15s; 182 &.top { 183 transform: translateY(180px) scale(0); 184 } 185 } 186 &:nth-child(4) { 187 transform: translateY(-240px) scale(0); 188 transition-delay: 0.12s; 189 &.top { 190 transform: translateY(240px) scale(0); 191 } 192 } 193 &:nth-child(5) { 194 transform: translateY(-300px) scale(0); 195 transition-delay: 0.09s; 196 &.top { 197 transform: translateY(300px) scale(0); 198 } 199 } 200 &:nth-child(6) { 201 transform: translateY(-360px) scale(0); 202 transition-delay: 0.03s; 203 &.top { 204 transform: translateY(360px) scale(0); 205 } 206 } 207 } 208 209 .rtf--ab { 210 height: 48px; 211 width: 48px; 212 background-color: #aaa; 213 display: inline-flex; 214 justify-content: center; 215 align-items: center; 216 position: relative; 217 border: none; 218 border-radius: 50%; 219 box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28); 220 cursor: pointer; 221 outline: none; 222 padding: 0; 223 -webkit-user-drag: none; 224 font-weight: bold; 225 color: #f1f1f1; 226 margin-right: 4px; 227 font-size: 16px; 228 z-index: 10000; 229 }