Upgrade to Pro — share decks privately, control downloads, hide ads and more …

シンプルなRailsアプリケーションに一匙加えるちょい足しアニメーションレシピ

F64c0dbb089a95f2880c8c45f50e493d?s=47 Yu Ishihara
December 09, 2018

 シンプルなRailsアプリケーションに一匙加えるちょい足しアニメーションレシピ

Rails Developers Meetup 2018 Day4 ( https://techplay.jp/event/702297 ) 発表資料

F64c0dbb089a95f2880c8c45f50e493d?s=128

Yu Ishihara

December 09, 2018
Tweet

Transcript

  1. ͪΐ͍଍͠ΞχϝʔγϣϯϨγϐ Yu Ishihara (@is8r_) γϯϓϧͳ3BJMTΞϓϦέʔγϣϯʹҰ࡬Ճ͑Δ Rails Developers Meetup 2018 Day

    4 Nouvelle Vague - 2018/12/8
  2. ࣗݾ঺հ @is8r_ ͸͡Ί·ͯ͠ɻੴݪ༔ͱݴ͍·͢ ੴݪ༔ Yu Ishihara

  3. ϑϦʔϥϯεͰ3BJMT΍(PͷΞϓϦέʔγϣϯͷσβΠϯͱϑϩϯτͷ͓࢓ࣄΛ΍͓ͬͯΓ·͢ ࣗݾ঺հ @is8r_ ͦͷଞ͍Ζ͍Ζ || || %FTJHO 'SPOU

  4. ࠷ۙ͸Ϥʔάϧτͮ͘ΓʹϋϚͬͯ·͢ ࣗݾ঺հ μώϤʔάϧτ ΧεϐւϤʔάϧτ ϗʔ ϜϝΠ υέϑ Ο Ξ 3

    @is8r_
  5. 3VCZ,BJHJͷσβΠϯͷ࿩ʜ ࠓ೔͓࿩͍ͤͯͨͩ͘͜͠͞ͱ @is8r_

  6. Λ͠Α͏͔ͱ΋ࢥͬͨͷͰ͕͢ͷ࿩Λલճͷ3BJMT%.Ͱ͞Μ͕࿩͍ͯͨ͠ͷͰผͷ͓࿩Λʜ ࠓ೔͓࿩͍ͤͯͨͩ͘͜͠͞ͱ @is8r_

  7. ࠓ೔͓࿩͍ͤͯͨͩ͘͜͠͞ͱ $44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵ਺ܾΊ͍ͯΔ໰୊ ΠʔδϯάɺͲΕΛ࢖ͬͨΒΑ͍͔Θ͔Βͳ͍໰୊ 3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳͪΐ͍଍͠Ξχϝʔγϣϯ$44 @is8r_

  8. γϯϓϧͳ3BJMTΞϓϦέʔγϣϯʹҰ࡬Ճ͑Δɺͪΐ͍଍͠ΞχϝʔγϣϯϨγϐ $44ΞχϝʔγϣϯɺͳΜͱͳ͘ ඵ਺ܾΊ͍ͯΔ໰୊

  9. None
  10. None
  11. None
  12. $44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵ਺ܾΊ͍ͯΔ໰୊ ͪΐͬͱಈ͔ͯ͠Έ·͠ΐ͏ IUUQTQSPUFDUFEGPSFTUIFSPLVBQQDPNTQFFE 4QFFE

  13. $44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵ਺ܾΊ͍ͯΔ໰୊ ݁࿦͔Βݴ͏ͱTʙT͕ྑ͍ͱ͞Ε͍ͯ·͢ )PXGBTUTIPVMEZPVS6*BOJNBUJPOTCF "EPCFͷ6*Ξχϝʔγϣϯίϯαϧλϯτͷํͷϒϩάهࣄ IUUQTWBMIFBEDPNIPXGBTUTIPVMEZPVSVJBOJNBUJPOTCF 200ms to 500ms seconds is

    a good range to start with for interface animations.
  14. 0 200 500 1000ms $44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵ਺ܾΊ͍ͯΔ໰୊ ͱ͸͍͑݁ߏ෯͕͋ΔͷͰɺ΍͸Γ໎ͬͯ͠·͍·͢ΑͶ

  15. $44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵ਺ܾΊ͍ͯΔ໰୊ ϘλϯͳͲ͸ɺૢ࡞΁ͷϑΟʔυόοΫΛײͤ͡͞ΔͨΊͷಈ͖ͳͷͰɺಈ͖͕஗͍ͱअຐʹײ͡Δ͠ IUUQTQSPUFDUFEGPSFTUIFSPLVBQQDPNCVUUPO

  16. $44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵ਺ܾΊ͍ͯΔ໰୊ Ϣʔβʔ΁ͷ஫ҙשى͕໨తͷཁૉʹؔͯ͠͸ɺಈ͖͕ૣ͍ͱͦͷ໾ׂΛՌͨͤͳ͍ IUUQTQSPUFDUFEGPSFTUIFSPLVBQQDPNJOQVU

  17. $44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵ਺ܾΊ͍ͯΔ໰୊ Ϣʔβʔ΁ͷ஫ҙשى͕໨తͷཁૉʹؔͯ͠͸ɺಈ͖͕ૣ͍ͱͦͷ໾ׂΛՌͨͤͳ͍ IUUQTQSPUFDUFEGPSFTUIFSPLVBQQDPNOPUJDF

  18. $44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵ਺ܾΊ͍ͯΔ໰୊ ૢ࡞͕Ͱ͖ΔཁૉͰ͋ΔࣄΛࣔͨ͢Ί͚ͩͳͷ͔ ໨ΛҾ͖͍ͨཁૉ΁ͷࢹઢͷ༠ಋͳͷ͔ɺ ͋ͨΓΛҙࣝ͢ΔͱܾΊ΍͍͢Ͱ͢ 

  19. $44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵ਺ܾΊ͍ͯΔ໰୊ զʑ͸GQTͱGQTͷҧ͍͕Θ͔ΔͷͰɺ೴͕৘ใͷؒΛຒΊ͍ͯΔͱ͔͸͋Γͦ͏͚ͩͲ ਓ͕ೝࣝ͢Δʮ࿈ଓͨ͠ੈքʯ͸ݬͰ͋Δͱ͍͏ௐࠪ݁Ռ IUUQTHJHB[JOFOFUOFXTTQPUMJHIUPGBUUFOUJPO ਓؒͷ೴͸ඵؒʹ ճͷ஫ҙྗͷഥಈ͕͋Δ 4 1

  20. $44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵ਺ܾΊ͍ͯΔ໰୊ ౓ͷ৘ใߋ৽ʹ͸೴͸͍͍ͩͨNT͘Β͍࣌ؒΛ͔͚ͯͦ͏ 1000/4 = 250ms

  21. $44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵ਺ܾΊ͍ͯΔ໰୊ ͱ͍͏͜ͱ͸ 

  22. $44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵ਺ܾΊ͍ͯΔ໰୊ ૢ࡞ײΛମײͤ͞ΔͨΊ͚ͩͷ΋ͷʹؔͯ͠͸໨োΓʹͳΒͳ͍Α͏ʹɺ NTҎԼΛ໨҆ʹ͢Δͷ͕ྑͦ͞͏ ͜ͷลʁ 0 250 500 750 1000ms

  23. $44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵ਺ܾΊ͍ͯΔ໰୊ NTͩͱɺλΠϛϯάʹΑͬͯ͸ճͷ৘ใߋ৽ʹ౰ͨͬͯ͠·͏͔΋͠Εͳ͍ͷͰɺ NT͕ྑͦ͞͏ ms 0 250 500 750 1000

  24. $44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵ਺ܾΊ͍ͯΔ໰୊ ʮԿ͔ग़͖ͯͨࣄʯʮԿ͔ಈ͍ͨࣄʯͱ͍͏ࣄΛҙࣝతʹؾ͍ͮͯ΋Β͍͍ͨ΋ͷ͸ɺ NTҎ্͕ྑͦ͞͏ ͜ͷลʁ ms 0 250 500 750 1000

  25. $44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵ਺ܾΊ͍ͯΔ໰୊ ճͷ৘ใߋ৽Ͱ͸ݟಀ͢ࣄ΋ߟྀͯ͠ɺNT͕ྑͦ͞͏ͳͷͰ͸ ms 0 250 500 750 1000

  26. $44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵ਺ܾΊ͍ͯΔ໰୊  ͜Μͳײ͡Ͱ਺஋΁ͷཪ෇͚Λߟ͑ͯΈΔͱ ͢ΜͳΓܾΊΒΕͦ͏

  27. $44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵ਺ܾΊ͍ͯΔ໰୊  ͍͑΍ɺͰܾΊͯײ֮తʹͬ͘͠Γ͘Δඵ਺͕͋Ε͹ ͦΕͰେৎ෉Ͱ͕͢ɺ ΋͠໎ͬͨ࣌ʹ͸ͪΐͬͱࢥ͍ग़ͯ͠Έ͍ͯͩ͘͞

  28. γϯϓϧͳ3BJMTΞϓϦέʔγϣϯʹҰ࡬Ճ͑Δɺͪΐ͍଍͠ΞχϝʔγϣϯϨγϐ ΠʔδϯάɺͲΕΛ࢖ͬͨΒΑ͍͔ Θ͔Βͳ͍໰୊

  29. None
  30. None
  31. None
  32. ΠʔδϯάɺͲΕΛ࢖ͬͨΒΑ͍͔Θ͔Βͳ͍໰୊ ΠʔδϯάΧʔϒɺͨ͘͞Μͨ͘͞Μ͋Γ·͢ΑͶ IUUQTFBTJOHTOFUKB &BTJOH'VODUJPOૣݟද

  33. ΠʔδϯάɺͲΕΛ࢖ͬͨΒΑ͍͔Θ͔Βͳ͍໰୊ ͪΐͬͱಈ͔ͯ͠Έ·͠ΐ͏ IUUQTQSPUFDUFEGPSFTUIFSPLVBQQDPNFBTJOH &BTJOH'VODUJPOT

  34. ΠʔδϯάɺͲΕΛ࢖ͬͨΒΑ͍͔Θ͔Βͳ͍໰୊ DVCJDCF[JFSΛ׆༻ͨ͠Β௥ՃͰ͖Δ&BTJOHGVODUJPOT΋͋Γ·͢ IUUQTQSPUFDUFEGPSFTUIFSPLVBQQDPNFBTJOH $VTUPN&BTJOH'VODUJPOT

  35. ΠʔδϯάɺͲΕΛ࢖ͬͨΒΑ͍͔Θ͔Βͳ͍໰୊ #PVODF͸DVCJDCFTJFSͰ͸࣮ݱͰ͖ͳ͍Έ͍ͨͰ͢ // from: https://github.com/thoughtbot/bourbon/blob/master/core/bourbon/library/_timing-functions.scss // EASE IN $ease-in-quad: cubic-bezier(0.550,

    0.085, 0.680, 0.530); $ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190); $ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220); $ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060); $ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715); $ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035); $ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335); $ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045); // EASE OUT $ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940); $ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000); $ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000); $ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000); $ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000); $ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000); $ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000); $ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275); // EASE IN OUT $ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955); $ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000); $ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000); $ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000); $ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950); $ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000); $ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860); $ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550); // ͬͪ͜͸ͦΕͬΆ͍ಈ͖ͳ͚ͩ // (similar elastic). $ease-out-elastic: cubic-bezier(0.370, 1.650, 0.410, 0.780); $ease-in-elastic: cubic-bezier(0.370, 0.650, 0.410, -0.780);
  36. ΠʔδϯάɺͲΕΛ࢖ͬͨΒΑ͍͔Θ͔Βͳ͍໰୊ Ξχϝʔγϣϯʹ͓͚Δͷ๏ଇɻ4MPXJOBOETMPXPVUɺ5JNJOH͋ͨΓΛݟͯΈΔͱΘ͔Γ΍͍͢ QSJODJQMFTPGBOJNBUJPO IUUQUIFQSJODJQMFTUVNCMSDPN

  37. ΠʔδϯάɺͲΕΛ࢖ͬͨΒΑ͍͔Θ͔Βͳ͍໰୊ Կ͔ʹԡ͞Εͯಈ͖࢝ΊΔ΋ͷɺ ஍໘ͷ఍߅Λड͚ͯࢭ·Δ΋ͷɺ ࣗ෼Ͱಈ͖ग़ͯ͠ɺࢭ·Δ΋ͷɺ ͋ͨΓ͕ԡ͓͖͍͑ͯͨ͞ϙΠϯτͰ͢ɻ 

  38. ΠʔδϯάɺͲΕΛ࢖ͬͨΒΑ͍͔Θ͔Βͳ͍໰୊ ը໘͔Βফ͍͑ͯ͘ཁૉͱ͔ Կ͔ʹԡ͞Εͯಈ͖࢝ΊΔ΋ͷ FBTFJO

  39. ΠʔδϯάɺͲΕΛ࢖ͬͨΒΑ͍͔Θ͔Βͳ͍໰୊ ը໘ʹೖͬͯ͘Δཁૉͱ͔ɺϘλϯͱ͔ ஍໘ͳΜ͔ͷ఍߅Λड͚ͯࢭ·Δ΋ͷ FBTFPVU

  40. ΠʔδϯάɺͲΕΛ࢖ͬͨΒΑ͍͔Θ͔Βͳ͍໰୊ ৳ͼॖΈ͢ΔݕࡧϑΥʔϜͱ͔ ࣗ෼Ͱಈ͖ग़ͯ͠ɺࢭ·Δ΋ͷ FBTFJOPVU

  41. ΠʔδϯάɺͲΕΛ࢖ͬͨΒΑ͍͔Θ͔Βͳ͍໰୊ Tఔ౓ͷಈ͖Ͱ͸ҧ͍΋Θ͔Γʹ͍͘͠ʜ ͱ͍͍ͭͭ΋ɺ$44ͷΞχϝʔγϣϯͰ͸ TJOF΍FYQPͳͲͷΧʔϒͷҧ͍ʹ͍ͭͯ͸ ͋·Γؾʹ͍͍ͤͣͩͨ͸ϓϦηοτʹ͋Δ΍ͭ࢖͏ͷ͕ྑͦ͞͏

  42. ΠʔδϯάɺͲΕΛ࢖ͬͨΒΑ͍͔Θ͔Βͳ͍໰୊ ҰԠͬ͘͟Γͱઆ໌Λ͓ͯ͘͠ͱ ೋɺ ࡾɺ ࢛ɺ ޒ࣍ؔ਺ *-quad, *-cubic, *-quart, *-quint

    ࡾ֯ؔ਺ *-sine ٸܹͳ *-expo ԁ *-circ
  43. ΠʔδϯάɺͲΕΛ࢖ͬͨΒΑ͍͔Θ͔Βͳ͍໰୊ FBTFJORVBE͸෺͕མͪΔಈ͖ 2VBE མԼͷಈ͖

  44. ΠʔδϯάɺͲΕΛ࢖ͬͨΒΑ͍͔Θ͔Βͳ͍໰୊ RVBE͔Β RVJOU͸ڧ౓͕ͪΐͱUҧ͍·͢ ؇΍͔ ܹ͍͠ Quad Cubic Quart Quint

  45. ΠʔδϯάɺͲΕΛ࢖ͬͨΒΑ͍͔Θ͔Βͳ͍໰୊ FBTFJOPVUTJOF͸ৼΓࢠͷಈ͖ 4JOF ৼΓࢠͷಈ͖

  46. ΠʔδϯάɺͲΕΛ࢖ͬͨΒΑ͍͔Θ͔Βͳ͍໰୊ FBTFJOFYQPɺFBTFPVUFYQPɺFBTFJOPVUFYQP͸ٸܹͳಈ͖ &YQP ٸͳಈ͖

  47. ΠʔδϯάɺͲΕΛ࢖ͬͨΒΑ͍͔Θ͔Βͳ͍໰୊ Ҏ্Λ౿·͑ͯߟ͑ΔͱͲΕΛબͿͱྑ͍͔ܾΊ΍͘͢ͳΓ·͢ IUUQTQSPUFDUFEGPSFTUIFSPLVBQQDPNFBTJOH &BTJOH'VODUJPOT

  48. γϯϓϧͳ3BJMTΞϓϦέʔγϣϯʹҰ࡬Ճ͑Δɺͪΐ͍଍͠ΞχϝʔγϣϯϨγϐ 3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳ ͪΐ͍଍͠Ξχϝʔγϣϯ$44

  49. 3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳͪΐ͍଍͠Ξχϝʔγϣϯ$44 Ϙλϯཁૉ IUUQTQSPUFDUFEGPSFTUIFSPLVBQQDPNCVUUPO

  50. 3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳͪΐ͍଍͠Ξχϝʔγϣϯ$44 Ξχϝʔγϣϯͷ෦෼ʢݟ΍͍͢Α͏ʹσβΠϯ෦෼͸NJYJOʹ෼͚͓͖ͯ·ͨ͠ʣ .button { @include button-base; @include font; transition: all

    0.2s ease-out; }
  51. 3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳͪΐ͍଍͠Ξχϝʔγϣϯ$44 σβΠϯଆͷελΠϧ ݟӫ͑Λม͚͑ͨΕ͹ͪ͜ΒΛมߋ @mixin button-base { $c: #82ccdd; $t: .2rem;

    display: inline-block; position: relative; cursor: pointer; text-align: center; box-sizing: border-box; border: none; outline: none; margin: 0; padding: .5rem 2rem; border-radius: 4rem; transform: translateY(-$t); background-color: $c; color: #fff; box-shadow: 0 $t 0 darken($c, 5%); &:hover { color: #fff; text-decoration: none; transform: translateY(0); box-shadow: 0 0 0 $c; background-color: darken($c, 2%); } } @mixin font($size: 1rem, $line-height: normal, $weight: 400) { font-family: YuGothic, 'ᕟΰγοΫ', sans-serif; font-size: $size; font-weight: $weight; line-height: $line-height; }
  52. 3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳͪΐ͍଍͠Ξχϝʔγϣϯ$44 Πϯϓοτཁૉ IUUQTQSPUFDUFEGPSFTUIFSPLVBQQDPNJOQVU

  53. 3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳͪΐ͍଍͠Ξχϝʔγϣϯ$44 Ξχϝʔγϣϯ෦෼ @keyframes anim-shake { $m: .3rem; 0% { transform:

    translate(0, 0) rotate(0deg); } 25% { transform: translate(-$m, 0) rotate(0deg); } 50% { transform: translate(0, 0) rotate(0deg); } 75% { transform: translate($m, 0) rotate(0deg); } 100% { transform: translate(0, 0) rotate(0deg); } } .input { @include input-base; @include font(.9375rem); &.is-action { $c: $color-red; animation: anim-shake .2s linear 4; border-color: $c; &:focus { border-color: $c; } } }
  54. 3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳͪΐ͍଍͠Ξχϝʔγϣϯ$44 σβΠϯଆͷελΠϧ ݟӫ͑Λม͚͑ͨΕ͹ͪ͜ΒΛมߋ @mixin input-base { $c: #82ccdd; display: inline-block;

    box-sizing: border-box; appearance: none; border: none; outline: none; text-decoration: none; line-height: 1 !important; background-image: none; margin: 0; padding: .6rem .8rem; border: 1px solid #eee; border-radius: .2rem; width: 100%; background-color: #fff; &:focus { border: 1px solid $c; outline: none; } &::placeholder { font-size: inherit; color: #ddd; } }
  55. 3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳͪΐ͍଍͠Ξχϝʔγϣϯ$44 ༨ஊͰ͕͢ɺEFWJTFͷೝূը໘ͱ͔ɺखൈ͖͠Α͏ͱࢥͬͨΒSBJMTHEFWJTFWJFXT͠ͳͯ͘΋$44͚ͩ ͰશવσβΠϯ͕ೖΕΒΕ·͢ .field { input[type=text], input[type=email], input[type=password] { @extend

    .input; } } .actions { input { @extend .button; width: 100%; } }
  56. 3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳͪΐ͍଍͠Ξχϝʔγϣϯ$44 Τϥʔͱ͔Ͱ่ΕͨΓ͢Δͷͱ͔΋ɺ ͜ͷลʹεϖʔε͕Ͱ͖ͨΓ ͯ͠Δͷ͸ҙਤ͠ͳ͍CS͕ٸʹೖͬͯ͘ Δͷ͕໰୊

  57. 3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳͪΐ͍଍͠Ξχϝʔγϣϯ$44 $44͚ͩͰ΋Ҋ֎؆୯ʹௐ੔͢Δࣄ͕ՄೳͰ͢ .field { label { + br { display:

    none; } } input[type=checkbox] { + label { display: inline-block; } } i { + br { display: none; } } } .field_with_errors { i { display: block; } + em { display: inline-block; } + br { display: none; } }
  58. 3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳͪΐ͍଍͠Ξχϝʔγϣϯ$44 ͋ͱ͸ࡉ͔͍ௐ੔ΛೖΕ͓͍ͯͨΒʜʢޙͰHJUIVCʹΞοϓ͓͖ͯ͠·͢ʜʣ .field { margin-top: 1rem; label { padding-bottom: .2rem;

    display: block; + br { display: none; } } input[type=text], input[type=email], input[type=password] { @extend .input; } input[type=checkbox] { margin-right: .2rem; cursor: pointer; + label { display: inline-block; cursor: pointer; } } em { @include font(.875rem); } i { @include font(.875rem); padding-bottom: .4rem; display: block; + br { display: none; } } } .field_with_errors { $c: $color-red; label { color: $c; margin-bottom: 0; } i { @include font(.875rem); font-style: normal; color: $color-red; padding-bottom: .4rem; display: block; &::before { @include fa('\f071'); margin-right: .4rem; } } + em { display: inline-block; margin-bottom: .5rem; } + br { display: none; } } #error_explanation { $c: $color-red; background-color: lighten($c, 30%); border-bottom: 1px solid lighten($c, 28%); color: $c; margin-top: 1rem; padding: .5rem 1rem; h2 { @include font(.875rem, 1.2rem, bold); margin: 0; } ul { margin: .1rem 0 0 1.5rem; padding: 0; li { @include font(.9375rem); margin-top: .3rem; } } } .actions { margin-top: 1rem; text-align: center; input { @extend .button; width: 100%; } }
  59. 3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳͪΐ͍଍͠Ξχϝʔγϣϯ$44 ͜͏͍ͬͨͷ͕

  60. 3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳͪΐ͍଍͠Ξχϝʔγϣϯ$44 ͜Μͳ͔Μ͡ʹ IUUQTQSPUFDUFEGPSFTUIFSPLVBQQDPNVTFSTTJHO@VQ

  61. 3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳͪΐ͍଍͠Ξχϝʔγϣϯ$44 ௨஌ཁૉ IUUQTQSPUFDUFEGPSFTUIFSPLVBQQDPNOPUJDF

  62. 3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳͪΐ͍଍͠Ξχϝʔγϣϯ$44 Ξχϝʔγϣϯͷ෦෼ @keyframes anim-notice { 0% { transform: translateY(-100%); opacity:

    0; animation-timing-function: ease-out; } 20% { transform: translateY(0%); opacity: 1; } 80% { transform: translateY(0%); opacity: 1; animation-timing-function: ease-in; } 100% { transform: translateY(-100%); opacity: 0; } } .notice { @include font; @include notice-base; animation: anim-notice 3s; }
  63. 3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳͪΐ͍଍͠Ξχϝʔγϣϯ$44 σβΠϯͷ෦෼ @mixin notice-base($c: #82ccdd) { display: block; margin: 0;

    padding: 1rem; position: fixed; width: 300px; top: 1rem; left: calc(50% - 150px); text-align: center; background-color: lighten($c, 25%); border-bottom: 1px solid lighten($c, 28%); color: $c; transform: translateY(-100%); opacity: 0; box-shadow: 0 5px 10px rgba(darken($c, 30%), .1); border-radius: .4rem; &:empty { display: none; } }
  64. 3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳͪΐ͍଍͠Ξχϝʔγϣϯ$44 ͱ͍͏Θ͚Ͱ؆୯ʹ࢖͑Δ$44ΞχϝʔγϣϯͷখٕΛ ͝঺հ͍͖ͤͯͨͩ͞·ͨ͠ 

  65. 3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳͪΐ͍଍͠Ξχϝʔγϣϯ$44 ϦϙδτϦ͸ͪ͜Β  NJYJO͸͜ͷ͋ͨΓ IUUQTHJUIVCDPNJTSSBJMTENTBNQMFQSPKFDUCMPCNBTUFSBQQBTTFUTTUZMFTIFFUTTUZMFTDPOpH @NJYJOTTDTT IUUQTHJUIVCDPNJTSSBJMTENTBNQMFQSPKFDUCMPCNBTUFSBQQBTTFUTTUZMFTIFFUTBQQMJDBUJPOTDTT Ξχϝʔγϣϯؔ࿈͸͜ͷ͋ͨΓ IUUQTHJUIVCDPNJTSSBJMTENTBNQMFQSPKFDU

  66. 3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳͪΐ͍଍͠Ξχϝʔγϣϯ$44 ͓ࢼ͠Ͱ࡞ΔΞϓϦͷϓϩτλΠϐϯά΍ϋοΧιϯ΍ͳΜ͔ͷ εϐʔυউෛͷ৔Ͱ׆༂͢Δɺϋζ 

  67. ͍͞͝ʹ ීஈͷҊ݅Ͱ͸ϝϯςφϯεͷࣄΛߟ͑ͯ ͦΕͧΕͷαΠτʹ͋ͬͨॻ͖ํΛ͠·͢ 

  68. ͍͞͝ʹ ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠