| OLD | NEW |
| (Empty) |
| 1 [ng-cloak], .ng-cloak, .ng-hide { | |
| 2 display: none !important; | |
| 3 } | |
| 4 | |
| 5 html, body { | |
| 6 font-family: "Open Sans" sans-serif; | |
| 7 font-size: 14px; | |
| 8 color: #fafafa; | |
| 9 background-color: #303030; | |
| 10 margin: 0px; | |
| 11 padding: 0px; | |
| 12 box-shadow: inset 0 10px 10px rgba(0, 0, 0, .1); | |
| 13 width: 100%; | |
| 14 height: 100%; | |
| 15 } | |
| 16 | |
| 17 p { | |
| 18 max-width: 540px; | |
| 19 } | |
| 20 | |
| 21 button { | |
| 22 color: #303030; | |
| 23 background-color: #fafafa; | |
| 24 border: none; | |
| 25 border-radius: 2px; | |
| 26 margin: 5px 5px 5px 0; | |
| 27 height: 30px; | |
| 28 line-height: 30px; | |
| 29 padding: 0 20px; | |
| 30 } | |
| 31 | |
| 32 nav { | |
| 33 padding-left: 20px; | |
| 34 } | |
| 35 | |
| 36 nav button { | |
| 37 margin: 0 5px 5px; | |
| 38 } | |
| 39 | |
| 40 nav .current { | |
| 41 border-top: 5px solid #fafafa; | |
| 42 border-radius: 0 0 2px 2px; | |
| 43 height: 35px; | |
| 44 } | |
| 45 | |
| 46 .content { | |
| 47 margin: 0 30px; | |
| 48 } | |
| 49 | |
| 50 .demo { | |
| 51 position: absolute; | |
| 52 width: 100%; | |
| 53 } | |
| 54 | |
| 55 .demo.ng-enter { | |
| 56 transform: scale(.8, .8); | |
| 57 -webkit-transform: scale(.8, .8); | |
| 58 /* Chrome bug prevents putting opacity at 0 right now */ | |
| 59 opacity: 0.000001; | |
| 60 transition: all 218ms; | |
| 61 } | |
| 62 | |
| 63 .demo.ng-enter.ng-enter-active { | |
| 64 transform: scale(1.0, 1.0); | |
| 65 -webkit-transform: scale(1.0, 1.0); | |
| 66 /* Chrome bug prevents putting opacity at 0 right now */ | |
| 67 opacity: 1.0; | |
| 68 transition: all 218ms; | |
| 69 } | |
| 70 | |
| 71 .demo.ng-leave { | |
| 72 transform: scale(1.0, 1.0); | |
| 73 -webkit-transform: scale(1.0, 1.0); | |
| 74 /* Chrome bug prevents putting opacity at 0 right now */ | |
| 75 opacity: 1; | |
| 76 transition: all 218ms; | |
| 77 } | |
| 78 | |
| 79 .demo.ng-leave.ng-leave-active { | |
| 80 transform: scale(1.3, 1.3); | |
| 81 -webkit-transform: scale(1.3, 1.3); | |
| 82 /* Chrome bug prevents putting opacity at 0 right now */ | |
| 83 opacity: 0.0; | |
| 84 transition: all 218ms; | |
| 85 } | |
| 86 | |
| 87 .repeat-demo ul, .repeat-demo li { | |
| 88 list-style-type: none; | |
| 89 margin: 0; | |
| 90 padding: 0; | |
| 91 } | |
| 92 | |
| 93 .repeat-demo li li { | |
| 94 display: inline-block; | |
| 95 min-width: 30px; | |
| 96 margin: 0 5px 0 0; | |
| 97 padding: 0 5px; | |
| 98 font-size: 10px; | |
| 99 line-height: 15px; | |
| 100 border-radius: 2px; | |
| 101 background: #fafafa; | |
| 102 color: #303030; | |
| 103 } | |
| 104 | |
| 105 .repeat-demo li.ng-enter { | |
| 106 transform: scale(1.1, 1.1); | |
| 107 -webkit-transform: scale(1.1,1.1); | |
| 108 | |
| 109 opacity: 0; | |
| 110 transition: opacity 100ms linear, -webkit-transform 432ms linear; | |
| 111 } | |
| 112 | |
| 113 .repeat-demo li.ng-enter.ng-enter-active { | |
| 114 transform: scale(1.0, 1.0); | |
| 115 -webkit-transform: scale(1.0,1.0); | |
| 116 | |
| 117 opacity: 1; | |
| 118 } | |
| 119 | |
| 120 /* This will show you if one of the sub elements is | |
| 121 animating */ | |
| 122 .repeat-demo li li.ng-enter.ng-enter-active, | |
| 123 .repeat-demo li li.ng-leave.ng-leave-active { | |
| 124 background-color: #1080F0; | |
| 125 } | |
| 126 | |
| 127 | |
| 128 .repeat-demo li.ng-leave { | |
| 129 transform: scale(1.0, 1.0); | |
| 130 -webkit-transform: scale(1.0,1.0); | |
| 131 | |
| 132 opacity: 1; | |
| 133 transition: all 900ms; | |
| 134 } | |
| 135 | |
| 136 .repeat-demo li.ng-leave.ng-leave-active { | |
| 137 transform: scale(1.1, 1.1); | |
| 138 -webkit-transform: scale(1.1,1.1); | |
| 139 | |
| 140 opacity: 0; | |
| 141 } | |
| 142 | |
| 143 .visibility-demo div, | |
| 144 .visibility-demo p { | |
| 145 height: 50px; | |
| 146 margin: 0; | |
| 147 padding: 0; | |
| 148 } | |
| 149 | |
| 150 .visibility-demo div { | |
| 151 border-left: 5px solid #fbfbfb; | |
| 152 padding-left: 10px; | |
| 153 } | |
| 154 | |
| 155 .visibility-demo .ng-enter, | |
| 156 .visibility-demo .ng-hide-remove { | |
| 157 opacity: 0.0001; | |
| 158 height: 0; | |
| 159 transition: all 900ms ease; | |
| 160 } | |
| 161 | |
| 162 .visibility-demo .ng-enter.ng-enter-active, | |
| 163 .visibility-demo .ng-hide-remove.ng-hide-remove-active { | |
| 164 opacity: 1; | |
| 165 height: 50px; | |
| 166 } | |
| 167 | |
| 168 .visibility-demo .ng-leave, | |
| 169 .visibility-demo .ng-hide-add { | |
| 170 opacity: 1; | |
| 171 height: 50px; | |
| 172 transition: all 900ms ease; | |
| 173 } | |
| 174 | |
| 175 .visibility-demo .ng-leave.ng-leave-active, | |
| 176 .visibility-demo .ng-hide-add.ng-hide-add-active { | |
| 177 opacity: 0; | |
| 178 height: 0; | |
| 179 } | |
| 180 | |
| 181 .css-demo .active { | |
| 182 background-color: #1080F0; | |
| 183 } | |
| 184 | |
| 185 .css-demo .css-box { | |
| 186 width: 100px; | |
| 187 height: 100px; | |
| 188 background-color: #fbfbfb; | |
| 189 color: #303030; | |
| 190 margin: 100px auto; | |
| 191 text-align: center; | |
| 192 line-height: 100px; | |
| 193 font-weight: bold; | |
| 194 } | |
| 195 | |
| 196 | |
| 197 .css-demo .css-box.a { | |
| 198 width: 200px; | |
| 199 } | |
| 200 .css-demo .css-box.a-add { | |
| 201 transition: width 1200ms; | |
| 202 } | |
| 203 .css-demo .css-box.a-add.a-add-active { | |
| 204 width: 200px; | |
| 205 } | |
| 206 .css-demo .css-box.a-remove { | |
| 207 transition: width 1200ms; | |
| 208 } | |
| 209 .css-demo .css-box.a-remove.a-remove-active { | |
| 210 width: 100px; | |
| 211 } | |
| 212 | |
| 213 .css-demo .css-box.b { | |
| 214 background-color: #1080F0; | |
| 215 } | |
| 216 .css-demo .css-box.b-add { | |
| 217 background-color: #fbfbfb; | |
| 218 transition: all 500ms; | |
| 219 } | |
| 220 .css-demo .css-box.b-add.b-add-active { | |
| 221 background-color: #1080F0; | |
| 222 } | |
| 223 .css-demo .css-box.b-remove { | |
| 224 background-color: #1080F0; | |
| 225 transition: all 500ms; | |
| 226 } | |
| 227 .css-demo .css-box.b-remove.b-remove-active { | |
| 228 background-color: #fbfbfb; | |
| 229 } | |
| 230 | |
| 231 .css-demo .css-box.c { | |
| 232 transform: rotate(45deg); | |
| 233 -webkit-transform: rotate(45deg); | |
| 234 } | |
| 235 .css-demo .css-box.c-add { | |
| 236 transform: rotate(0deg); | |
| 237 -webkit-transform: rotate(0deg); | |
| 238 | |
| 239 transition: all 200ms; | |
| 240 } | |
| 241 .css-demo .css-box.c-add.c-add-active { | |
| 242 transform: rotate(45deg); | |
| 243 -webkit-transform: rotate(45deg); | |
| 244 } | |
| 245 .css-demo .css-box.c-remove { | |
| 246 transform: rotate(45deg); | |
| 247 -webkit-transform: rotate(45deg); | |
| 248 | |
| 249 transition: all 200ms; | |
| 250 } | |
| 251 .css-demo .css-box.c-remove.c-remove-active { | |
| 252 transform: rotate(0deg); | |
| 253 -webkit-transform: rotate(0deg); | |
| 254 } | |
| 255 | |
| 256 .stress-box { | |
| 257 display: inline-block; | |
| 258 width: 20px; | |
| 259 height: 20px; | |
| 260 margin: 5px 5px 0 0; | |
| 261 padding: 0; | |
| 262 background-color: #fbfbfb; | |
| 263 border-radius: 2px; | |
| 264 } | |
| 265 | |
| 266 .stress-box.ng-enter { | |
| 267 transform: scale(0, 0); | |
| 268 -webkit-transform: scale(0,0); | |
| 269 opacity: 0.000001; | |
| 270 | |
| 271 transition: all 500ms; | |
| 272 } | |
| 273 | |
| 274 .stress-box.ng-enter.ng-enter-active { | |
| 275 transform: scale(1, 1); | |
| 276 -webkit-transform: scale(1,1); | |
| 277 opacity: 1.0; | |
| 278 } | |
| 279 | |
| 280 .stress-box.ng-leave { | |
| 281 transform: scale(1, 1); | |
| 282 -webkit-transform: scale(1,1); | |
| 283 opacity: 1.0; | |
| 284 | |
| 285 transition: all 500ms; | |
| 286 } | |
| 287 | |
| 288 .stress-box.ng-leave.ng-leave-active { | |
| 289 transform: scale(0, 0); | |
| 290 -webkit-transform: scale(0,0); | |
| 291 opacity: 0.000001; | |
| 292 } | |
| OLD | NEW |