roleypoly/v1
1
0
Fork 0
mirror of https://github.com/roleypoly/roleypoly-v1.git synced 2025-04-25 12:19:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(UI/wrapper): convert inline styles to sass

Browse source
This commit is contained in:
Katalina / stardust 2017-12-31 23:19:04 -06:00
parent 8a47fc85b1
commit 7613353918
4 changed files with 49 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
UI/src/components/wrapper/index.js
View file

@ -1,33 +1,35 @@
import React, { Component } from 'react' import React, { Component } from 'react'
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
import Scrollbars from 'react-custom-scrollbars'
import Logotype from '../logotype' import Logotype from '../logotype'
import styles from './styles' import './wrapper.sass'
import './wrapper.css'
class Wrapper extends Component { class Wrapper extends Component {
render () { render () {
return <div style={styles.root}> return <div className='wrapper'>
<div style={styles.background} /> <Scrollbars autoHeight autoHeightMax='100vh'>
<div style={styles.container}> <div className='wrapper__background' />
<nav uk-navbar='' style={styles.nav} className='uk-navbar-transparent'> <div className='wrapper__container'>
<div className='uk-navbar-left'> <nav uk-navbar='' className='wrapper__nav' className='uk-navbar-transparent'>
<Link to="/"> <div className='uk-navbar-left'>
<Logotype style={{ height: '2rem' }} className='wrapper__logotype' /> <Link to="/">
</Link> <Logotype style={{ height: '2rem' }} className='wrapper__logotype' />
</div> </Link>
<div className='uk-navbar-right'> </div>
<ul className='uk-navbar-nav'> <div className='uk-navbar-right'>
<li><Link to='/start'>Get Started</Link></li> <ul className='uk-navbar-nav'>
<li><a href='https://discord.gg/PWQUVsd'>Support Discord</a></li> <li><Link to='/start'>Get Started</Link></li>
</ul> <li><a href='https://discord.gg/PWQUVsd'>Support Discord</a></li>
</div> </ul>
</nav> </div>
<main> </nav>
{ <main className="wrapper__content">
this.props.children {
} this.props.children
</main> }
</div> </main>
</div>
</Scrollbars>
</div> </div>
} }
} }

25
UI/src/components/wrapper/styles.js
View file

@ -1,25 +0,0 @@
export default {
root: {
backgroundColor: 'var(--c-1)'
},
container: {
width: 960,
margin: '0 auto'
},
background: {
position: 'fixed',
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: 'var(--c-1)',
zIndex: -1000
},
nav: {
padding: '0 20px'
}
}

4
UI/src/components/wrapper/wrapper.css
View file

@ -1,4 +0,0 @@
.wrapper__logo:hover mask {
/* transform: translate 1s ease-in-out repeat; */
transform: rotate(30deg)
}

23
UI/src/components/wrapper/wrapper.sass Normal file
View file

@ -0,0 +1,23 @@
// .wrapper__logo:hover mask
// /* transform: translate 1s ease-in-out repeat; */
// transform: rotate(30deg)
.wrapper
&__background
background-color: var(--c-1)
position: fixed
top: 0
left: 0
right: 0
bottom: 0
z-index: -1000
&__container
width: 960px
margin: 0 auto
&__nav
padding: 0 20px