110swag / flashy-frontend

Download as
Browse Code »

Commit f555fa186d714727cd8612d3da4a6ab66ba7a394

Authored by Andrew Buss
1 parent 1223a9a646
Exists in master and in 1 other branch ef9f9dd363e92d55eb4d80d036193be39572172b

animations for adding a card

Showing 1 changed file with 28 additions and 38 deletions Inline Diff

styles/flashy.css View file @ f555fa1
.no-user-select { 1 1 .no-user-select {
-moz-user-select: none; 2 2 -moz-user-select: none;
-webkit-user-select: none; 3 3 -webkit-user-select: none;
-ms-user-select: none; 4 4 -ms-user-select: none;
user-select: none; 5 5 user-select: none;
} 6 6 }
7 7
.angucomplete-dropdown { 8 8 .angucomplete-dropdown {
border-color: #ececec; 9 9 border-color: #ececec;
border-width: 1px; 10 10 border-width: 1px;
border-style: solid; 11 11 border-style: solid;
border-radius: 2px; 12 12 border-radius: 2px;
/*width: 250px;*/ 13 13 /*width: 250px;*/
padding: 6px; 14 14 padding: 6px;
cursor: pointer; 15 15 cursor: pointer;
z-index: 9999; 16 16 z-index: 9999;
position: absolute; 17 17 position: absolute;
/*top: 32px; 18 18 /*top: 32px;
left: 0px; 19 19 left: 0px;
*/ 20 20 */
margin-top: -6px; 21 21 margin-top: -6px;
background-color: #ffffff; 22 22 background-color: #ffffff;
} 23 23 }
24 24
.angucomplete-description { 25 25 .angucomplete-description {
font-size: 14px; 26 26 font-size: 14px;
} 27 27 }
28 28
.angucomplete-row { 29 29 .angucomplete-row {
padding: 5px; 30 30 padding: 5px;
color: #000000; 31 31 color: #000000;
margin-bottom: 4px; 32 32 margin-bottom: 4px;
clear: both; 33 33 clear: both;
} 34 34 }
35 35
.angucomplete-selected-row { 36 36 .angucomplete-selected-row {
background-color: #aaaaff; 37 37 background-color: #aaaaff;
} 38 38 }
39 39
/*.container .row {*/ 40 40 /*.container .row {*/
/*margin-left: 0;*/ 41 41 /*margin-left: 0;*/
/*margin-right: 0;*/ 42 42 /*margin-right: 0;*/
/*}*/ 43 43 /*}*/
44 44
/* Flashcard directive css */ 45 45 /* Flashcard directive css */
.card { 46 46 .card {
word-wrap: break-word; 47 47 word-wrap: break-word;
} 48 48 }
49 49
.card.flashy { 50 50 .card.flashy {
background-color: #fff; 51 51 background-color: #fff;
font-family: 'Titillium Web', sans-serif; 52 52 font-family: 'Titillium Web', sans-serif;
float: left; 53 53 float: left;
text-align: center; 54 54 text-align: center;
margin: 6px; 55 55 margin: 6px;
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1); 56 56 transition: all 0.2s cubic-bezier(0, 0, 0.6, 1);
} 57 57 }
58 58
.card.flashy.shrinky { 59 59 .card.flashy.shrinky {
height: 0; 60 60 height: 0;
opacity: 0; 61 61 opacity: 0;
overflow: hidden; 62 62 overflow: hidden;
} 63 63 }
64 64
.card-overlay { 65 65 .card-overlay {
cursor: pointer; 66 66 cursor: pointer;
left: 0; 67 67 left: 0;
opacity: 0; 68 68 opacity: 0;
position: absolute; 69 69 position: absolute;
top: 0; 70 70 top: 0;
transition: visibility 0s cubic-bezier(0, 0, 0.6, 1) 0.2s, 71 71 transition: visibility 0s cubic-bezier(0, 0, 0.6, 1) 0.2s,
opacity 0.2s cubic-bezier(0, 0, 0.6, 1); 72 72 opacity 0.2s cubic-bezier(0, 0, 0.6, 1);
/* animation effect to appear on off-hover */ 73 73 /* animation effect to appear on off-hover */
visibility: hidden; 74 74 visibility: hidden;
height: 100%; 75 75 height: 100%;
width: 100%; 76 76 width: 100%;
} 77 77 }
78 78
.card-overlay i { 79 79 .card-overlay i {
color: #FFF; 80 80 color: #FFF;
left: 50%; 81 81 left: 50%;
position: absolute; 82 82 position: absolute;
top: 50%; 83 83 top: 50%;
transform: translate(-50%, -50%); 84 84 transform: translate(-50%, -50%);
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s; 85 85 transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;
} 86 86 }
87 87
.center-me:hover i { 88 88 .center-me:hover i {
text-shadow: 0 0 15px rgba(255, 255, 255, 0.9); 89 89 text-shadow: 0 0 15px rgba(255, 255, 255, 0.9);
} 90 90 }
91 91
.card:hover .card-overlay { 92 92 .card:hover .card-overlay {
opacity: 1.0; 93 93 opacity: 1.0;
transition-delay: 0s; /* animation effect to appear on hover */ 94 94 transition-delay: 0s; /* animation effect to appear on hover */
visibility: visible; 95 95 visibility: visible;
} 96 96 }
97 97
.top-box { 98 98 .top-box {
background-color: rgba(0, 184, 76, 0.4); 99 99 background-color: rgba(0, 184, 76, 0.4);
height: 65%; 100 100 height: 65%;
position: relative; 101 101 position: relative;
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s; 102 102 transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;
width: 100%; 103 103 width: 100%;
} 104 104 }
105 105
.top-box:hover { 106 106 .top-box:hover {
background-color: rgba(0, 184, 76, 0.5); 107 107 background-color: rgba(0, 184, 76, 0.5);
} 108 108 }
109 109
.bottom-box { 110 110 .bottom-box {
height: 35%; 111 111 height: 35%;
width: 100%; 112 112 width: 100%;
} 113 113 }
114 114
.left-box { 115 115 .left-box {
background-color: rgba(119, 146, 255, 0.5); 116 116 background-color: rgba(119, 146, 255, 0.5);
float: left; 117 117 float: left;
position: relative; 118 118 position: relative;
height: 100%; 119 119 height: 100%;
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s; 120 120 transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;
width: 50%; 121 121 width: 50%;
} 122 122 }
123 123
.left-box:hover { 124 124 .left-box:hover {
background-color: rgba(119, 146, 255, 0.6); 125 125 background-color: rgba(119, 146, 255, 0.6);
} 126 126 }
127 127
.right-box { 128 128 .right-box {
background-color: rgba(255, 62, 76, 0.5); 129 129 background-color: rgba(255, 62, 76, 0.5);
float: right; 130 130 float: right;
height: 100%; 131 131 height: 100%;
position: relative; 132 132 position: relative;
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s; 133 133 transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;
width: 50%; 134 134 width: 50%;
} 135 135 }
136 136
.right-box:hover { 137 137 .right-box:hover {
background-color: rgba(255, 62, 76, 0.6); 138 138 background-color: rgba(255, 62, 76, 0.6);
} 139 139 }
140 140
.center-me { 141 141 .center-me {
height: 100%; 142 142 height: 100%;
margin: 0 auto; 143 143 margin: 0 auto;
text-align: center; 144 144 text-align: center;
vertical-align: middle; 145 145 vertical-align: middle;
width: 100%; 146 146 width: 100%;
} 147 147 }
148 148
/* Card Colors */ 149 149 /* Card Colors */
.card.flashy.cardcolor-blue { 150 150 .card.flashy.cardcolor-blue div {
background-color: (119, 158, 203, 0.5) !important; 151 151 background-color: rgba(119, 158, 203, 0.5) !important;
} 152 152 }
153 153
.cardcolor-red { 154 154 .cardcolor-red div {
background-color: rgba(255, 105, 97, 0.5) !important; 155 155 background-color: rgba(255, 105, 97, 0.5) !important;
} 156 156 }
157 157
.cardcolor-green { 158 158 .cardcolor-green div {
background-color: rgba(119, 190, 119, 0.5) !important; 159 159 background-color: rgba(119, 190, 119, 0.5) !important;
} 160 160 }
161 161
.cardcolor-yellow { 162 162 .cardcolor-yellow div {
background-color: rgba(253, 253, 150, 0.5) !important; 163 163 background-color: rgba(253, 253, 150, 0.5) !important;
} 164 164 }
165
/* Card Colors END */ 165 166 /* Card Colors END */
166 167
.modal.bottom-sheet { 167 168 .modal.bottom-sheet {
max-width: 600px; 168 169 max-width: 600px;
margin-left: auto; 169 170 margin-left: auto;
margin-right: auto; 170 171 margin-right: auto;
} 171 172 }
172 173
#newCard input[type=text] { 173 174 #newCard input[type=text] {
height: 3rem !important; 174 175 height: 3rem !important;
} 175 176 }
176 177
.input-field label { 177 178 .input-field label {
color: #00b3c2; 178 179 color: #00b3c2;
} 179 180 }
180 181
/* label focus color */ 181 182 /* label focus color */
.input-field input[type]:focus + label { 182 183 .input-field input[type]:focus + label {
color: #00b3c2; 183 184 color: #00b3c2;
} 184 185 }
185 186
/* label underline focus color */ 186 187 /* label underline focus color */
.input-field input[type]:focus { 187 188 .input-field input[type]:focus {
border-bottom: 1px solid #00b3c2; 188 189 border-bottom: 1px solid #00b3c2;
box-shadow: 0 1px 0 0 #b388ff; 189 190 box-shadow: 0 1px 0 0 #b388ff;
} 190 191 }
191 192
/* valid color */ 192 193 /* valid color */
.input-field input[type].valid { 193 194 .input-field input[type].valid {
border-bottom: 1px solid #00c28f; 194 195 border-bottom: 1px solid #00c28f;
box-shadow: 0 1px 0 0 #673ab7; 195 196 box-shadow: 0 1px 0 0 #673ab7;
} 196 197 }
197 198
/* invalid color */ 198 199 /* invalid color */
.input-field input[type].invalid { 199 200 .input-field input[type].invalid {
border-bottom: 1px solid #673ab7; 200 201 border-bottom: 1px solid #673ab7;
box-shadow: 0 1px 0 0 #673ab7; 201 202 box-shadow: 0 1px 0 0 #673ab7;
} 202 203 }
203 204
/* icon prefix focus color */ 204 205 /* icon prefix focus color */
.input-field .prefix.active { 205 206 .input-field .prefix.active {
color: #b388ff; 206 207 color: #b388ff;
} 207 208 }
208 209
/* label focus color */ 209 210 /* label focus color */
.input-field textarea[type]:focus + label { 210 211 .input-field textarea[type]:focus + label {
color: #b388ff; 211 212 color: #b388ff;
} 212 213 }
213 214
/* label underline focus color */ 214 215 /* label underline focus color */
.input-field textarea[type]:focus { 215 216 .input-field textarea[type]:focus {
border-bottom: 1px solid #00b3c2; 216 217 border-bottom: 1px solid #00b3c2;
box-shadow: 0 1px 0 0 #b388ff; 217 218 box-shadow: 0 1px 0 0 #b388ff;
} 218 219 }
219 220
body { 220 221 body {
background-color: #e8e8e8; 221 222 background-color: #e8e8e8;
overflow-x: hidden; 222 223 overflow-x: hidden;
font-family: 'Titillium Web', sans-serif; 223 224 font-family: 'Titillium Web', sans-serif;
} 224 225 }
225 226
html { 226 227 html {
background: transparent; 227 228 background: transparent;
} 228 229 }
229 230
.btn { 230 231 .btn {
background-color: #00b3c2; 231 232 background-color: #00b3c2;
} 232 233 }
233 234
.btn:hover { 234 235 .btn:hover {
background-color: #0097cb; 235 236 background-color: #0097cb;
} 236 237 }
237 238
.btn-floating { 238 239 .btn-floating {
background-color: #00b3c2; 239 240 background-color: #00b3c2;
} 240 241 }
241 242
.btn-floating:hover { 242 243 .btn-floating:hover {
background-color: #0097cb; 243 244 background-color: #0097cb;
} 244 245 }
245 246
#logo-container { 246 247 #logo-container {
margin-bottom: 18px; 247 248 margin-bottom: 18px;
} 248 249 }
249 250
#lean-overlay { 250 251 #lean-overlay {
display: none !important; 251 252 display: none !important;
} 252 253 }
253 254
nav { 254 255 nav {
background-color: #d2143f !important; 255 256 background-color: #d2143f !important;
} 256 257 }
257 258
main { 258 259 main {
min-height: 145px; 259 260 min-height: 145px;
} 260 261 }
261 262
.side-nav .collapsible-body { 262 263 .side-nav .collapsible-body {
width: 100%; 263 264 width: 100%;
} 264 265 }
265 266
.side-nav .collapsible-body li.active, .side-nav.fixed .collapsible-body li.active { 266 267 .side-nav .collapsible-body li.active, .side-nav.fixed .collapsible-body li.active {
background-color: #00b3c2; 267 268 background-color: #00b3c2;
} 268 269 }
269 270
nav .button-collapse { 270 271 nav .button-collapse {
margin: 0 20px; 271 272 margin: 0 20px;
} 272 273 }
273 274
.collapsible-body i { 274 275 .collapsible-body i {
font-size: 1rem !important; 275 276 font-size: 1rem !important;
} 276 277 }
277 278
.tabs .tab a { 278 279 .tabs .tab a {
color: #00b3c2; 279 280 color: #00b3c2;
} 280 281 }
281 282
.tabs .tab a:hover { 282 283 .tabs .tab a:hover {
color: #0041dd; 283 284 color: #0041dd;
} 284 285 }
285 286
.tabs .indicator { 286 287 .tabs .indicator {
border-bottom: 1px solid #00b3c2; 287 288 border-bottom: 1px solid #00b3c2;
} 288 289 }
289 290
h2 { 290 291 h2 {
text-align: center; 291 292 text-align: center;
} 292 293 }
293 294
md-content.md-default-theme { 294 295 md-content.md-default-theme {
background-color: rgba(255, 255, 255, 0); 295 296 background-color: rgba(255, 255, 255, 0);
border: 1px solid #fff; 296 297 border: 1px solid #fff;
} 297 298 }
298 299
/*#sidenav-overlay { 299 300 /*#sidenav-overlay {
background-color: rgba(0, 0, 0, 0) !important; 300 301 background-color: rgba(0, 0, 0, 0) !important;
}*/ 301 302 }*/
.card-content { 302 303 .card-content {
width: 100%; 303 304 width: 100%;
} 304 305 }
305 306
.valign-wrapper { 306 307 .valign-wrapper {
height: 100%; 307 308 height: 100%;
} 308 309 }
309 310
.toast { 310 311 .toast {
height: 100px; 311 312 height: 100px;
width: 300px; 312 313 width: 300px;
line-height: 20px; 313 314 line-height: 20px;
max-height: 100px; 314 315 max-height: 100px;
word-wrap: normal; 315 316 word-wrap: normal;
} 316 317 }
317 318
[ng-cloak] { 318 319 [ng-cloak] {
display: none !important; 319 320 display: none !important;
} 320 321 }
321 322
.cardColumn { 322 323 .cardColumn {
float: left; 323 324 float: left;
} 324 325 }
325 326
/* Animation CSS, https://docs.angularjs.org/guide/animations */ 326 327 /* Animation CSS, https://docs.angularjs.org/guide/animations */
.repeated-card.ng-enter, 327 328 .repeated-card.ng-enter,
329 .repeated-card.ng-enter > flashcard > .card,
.repeated-card.ng-leave, 328 330 .repeated-card.ng-leave,
.repeated-card.ng-move { 329 331 .repeated-card.ng-move,
332 .repeated-card.ng-move > flashcard > .card {
-webkit-transition: 0.5s all cubic-bezier(0, 0, 0.6, 1); 330 333 -webkit-transition: 0.5s all cubic-bezier(0, 0, 0.6, 1);
-moz-transition: 0.5s all cubic-bezier(0, 0, 0.6, 1); 331 334 -moz-transition: 0.5s all cubic-bezier(0, 0, 0.6, 1);
-o-transition: 0.5s all cubic-bezier(0, 0, 0.6, 1); 332 335 -o-transition: 0.5s all cubic-bezier(0, 0, 0.6, 1);
transition: 0.5s all cubic-bezier(0, 0, 0.6, 1); 333 336 transition: 1s all cubic-bezier(0, 0, 0.6, 1);
position: relative; 334 337 position: relative;
} 335 338 }