20/06/2017, 18:11:19
Bonjour,
Quelqu'un a-t-il réussi à faire fonctionner Foundation Motion UI avec CSSPreprocessor ?
Le CSS généré pour Foundation est bon, mais il est incomplet pour ce qui concerne Motion UI.
Toutes mes dépendances SCSS se chargent correctement avec les instructions suivantes :
@import 'settings';
@import 'foundation';
@include foundation-everything(true);
@import 'motion-ui';
Exemple pour une transition:
Le CSS obtenu est :
Il manque le sélecteur ID. Le CSS devrait être :
Exemple pour une animation :
Le CSS obtenu est :
Il manque le poucentage pour des 1ere et 2eme keyframes. Le CSS devrait être :
Si quelqu'un a une piste, je prends.
Merci.
Quelqu'un a-t-il réussi à faire fonctionner Foundation Motion UI avec CSSPreprocessor ?
Le CSS généré pour Foundation est bon, mais il est incomplet pour ce qui concerne Motion UI.
Toutes mes dépendances SCSS se chargent correctement avec les instructions suivantes :
@import 'settings';
@import 'foundation';
@include foundation-everything(true);
@import 'motion-ui';
Exemple pour une transition:
Code :
[== CSS ==]
#logo { @include mui-fade (in, $ duration: 4s); }
Le CSS obtenu est :
Code :
[== CSS ==]
.mui-enter { transition-duration: 500ms; transition-timing-function: linear; transition-duration: 4s; opacity: 0; transition-property: opacity; } .mui-enter.mui-enter-active { opacity: 1; }
Il manque le sélecteur ID. Le CSS devrait être :
Code :
[== CSS ==]
#logo.mui-enter { transition-duration: 500ms; transition-timing-function: linear; transition-duration: 4s; opacity: 0; transition-property: opacity; } #logo.mui-enter.mui-enter-active { opacity: 1; }
Exemple pour une animation :
Code :
[== CSS ==]
h1 { @include mui-animation(fade(0, 1)); animation-duration: 4s; }
Le CSS obtenu est :
Code :
[== CSS ==]
h1 { animation-name: fade-0-to-100; animation-duration: 4s; }
@keyframes fade-0-to-100 { { opacity: 0; } { opacity: 1; } }
Il manque le poucentage pour des 1ere et 2eme keyframes. Le CSS devrait être :
Code :
[== CSS ==]
@keyframes fade-0-to-100 { 0% { opacity: 0; } 100% { opacity: 1; } }
Si quelqu'un a une piste, je prends.
Merci.