diff --git a/public/objects/animation/fade/ElementScrollFader.jsx b/public/objects/animation/fade/ElementScrollFader.jsx index dcf2746..fc190af 100644 --- a/public/objects/animation/fade/ElementScrollFader.jsx +++ b/public/objects/animation/fade/ElementScrollFader.jsx @@ -23,7 +23,9 @@ import React from 'react'; -class ElementScrollFader extends React.Component { +import Styles from './ElementScrollFader.scss'; + +export default class ElementScrollFader extends React.Component { constructor(props) { super(props); @@ -105,25 +107,17 @@ class ElementScrollFader extends React.Component { } render() { - let clazz = "o-element-scroll-fader"; + let newProps = {...this.props}; + let { from, visible, waiting, className } = this.props; - if(this.props.from) { - clazz += " from-" + this.props.from - } else { - clazz += " from-top"; - } - if(this.state.visible || this.state.waiting) { - clazz += " is-visible"; - } + from = from || "top"; - if(this.props.className) clazz += " " + this.props.className; + ["from","visible","waiting"].forEach(e => delete newProps[e]); - return ( -
- { this.props.children} -
- ); + let clazz = `o-element-scroll-fader from-${from}`; + if(visible || waiting) clazz += " is-visible"; + if(className) clazz += ` ${className}`; + + return
} } - -export default ElementScrollFader; diff --git a/public/styles/objects/_element-scroll-fader.scss b/public/objects/animation/fade/ElementScrollFader.scss similarity index 96% rename from public/styles/objects/_element-scroll-fader.scss rename to public/objects/animation/fade/ElementScrollFader.scss index 9d85af5..a427e90 100644 --- a/public/styles/objects/_element-scroll-fader.scss +++ b/public/objects/animation/fade/ElementScrollFader.scss @@ -10,6 +10,8 @@ * Version: * 1.0.0 - 2018/06/08 */ +@import '~@styles/global'; + $o-element-scroll-fader--speed: 0.75s; $o-element-scroll-fader--amount: 15%; diff --git a/public/objects/background/Background.jsx b/public/objects/background/Background.jsx index ef1a760..0ed9c79 100644 --- a/public/objects/background/Background.jsx +++ b/public/objects/background/Background.jsx @@ -23,6 +23,8 @@ import React from 'react'; +import Styles from './Background.scss'; + export default function(props) { let style = props.style || "test"; let styleClassPrefix = "o-background--style-"+style; diff --git a/public/objects/background/Background.scss b/public/objects/background/Background.scss new file mode 100644 index 0000000..e69de29