diff --git a/src/_mixins.scss b/src/_mixins.scss index d35c7069..2b849ef5 100644 --- a/src/_mixins.scss +++ b/src/_mixins.scss @@ -17,10 +17,12 @@ ::selection { background: $background; /* WebKit/Blink Browsers */ color: $color; + text-shadow: none; } ::-moz-selection { background: $background; /* Gecko Browsers */ color: $color; + text-shadow: none; } } diff --git a/src/_settings.scss b/src/_settings.scss index 2f4132d8..06c5d71f 100644 --- a/src/_settings.scss +++ b/src/_settings.scss @@ -1,13 +1,3 @@ -/** - * Resources - */ - -$arwes-resource-background1: '/img/background.jpg' !default; -$arwes-resource-background1-medium: '/img/background-medium.jpg' !default; -$arwes-resource-background1-large: '/img/background-large.jpg' !default; -$arwes-resource-pattern1: '/img/glow.png' !default; - - /** * General */ diff --git a/src/components/Arwes/Readme.md b/src/components/Arwes/Readme.md deleted file mode 100644 index e69de29b..00000000 diff --git a/src/components/Arwes/_index.scss b/src/components/Arwes/_index.scss index f49d872d..7f93f24a 100644 --- a/src/components/Arwes/_index.scss +++ b/src/components/Arwes/_index.scss @@ -1,5 +1,6 @@ @mixin arwes-arwes () { .arwes { + display: block; background-size: cover; background-position: center; background-attachment: fixed; @@ -34,21 +35,13 @@ } &.arwes--ready { - &.arwes--resources { - background-image: url($arwes-resource-background1); - - @media #{$medium-and-up} { - background-image: url($arwes-resource-background1-medium); - } - - @media #{$large-and-up} { - background-image: url($arwes-resource-background1-large); - } - - .arwes__pattern { - background-image: url($arwes-resource-pattern1); - } - } + // + } + &.arwes--anim { + // + } + &.arwes--resources { + // } } } diff --git a/src/components/Arwes/index.js b/src/components/Arwes/index.js index 014e4070..3bb6aa24 100644 --- a/src/components/Arwes/index.js +++ b/src/components/Arwes/index.js @@ -1,33 +1,53 @@ -import React, { Component, PropTypes } from 'react'; +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; import classNames from 'classnames'; import docReady from 'doc-ready'; +import responsive from '../../tools/responsive'; +/** + * Application container. + */ export default class Arwes extends Component { constructor () { super(...arguments); this.state = { + bg: null, + pattern: null, ready: false, }; } componentDidMount () { - docReady(() => { - this.setState({ ready: true }); - }); + + docReady(() => this.setState({ ready: true })); + + this.onUpdateBG(); + } + + componentDidUpdate (prevProps) { + if (prevProps.resources !== this.props.resources) { + this.onupdate(); + } } render () { - const { resources, className, children, ...rest } = this.props; + const { anim, resources, className, children, ...rest } = this.props; const cls = classNames('arwes', { - 'arwes--resources': resources, 'arwes--ready': this.state.ready, + 'arwes--resources': resources, + 'arwes--anim': anim, }, className); + const { pattern } = resources || {}; + + const bg = this.state.bg; + const bgStyle = bg && { backgroundImage: `url(${bg})` }; + const patternStyle = pattern && { backgroundImage: `url(${pattern})` }; return ( -
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit esse.
+ diff --git a/src/components/Frame/_index.scss b/src/components/Frame/_index.scss index d8847173..e44b07d6 100644 --- a/src/components/Frame/_index.scss +++ b/src/components/Frame/_index.scss @@ -6,10 +6,6 @@ .arwes-frame__box { position: relative; - border-width: 1px; - border-style: solid; - border-color: $arwes-color1-dark; - box-shadow: 0 0 4px rgba($arwes-color1-dark, $arwes-color-alpha); transition: all $arwes-anim-time ease-out; } .arwes-frame__corner { @@ -25,23 +21,19 @@ height: 15px; &.arwes-frame__lt { - left: -2px; - top: -2px; + left: -2px; top: -2px; border-width: 1px 0 0 1px; } &.arwes-frame__lb { - left: -2px; - bottom: -2px; + left: -2px; bottom: -2px; border-width: 0 0 1px 1px; } &.arwes-frame__rt { - right: -2px; - top: -2px; + right: -2px; top: -2px; border-width: 1px 1px 0 0; } &.arwes-frame__rb { - right: -2px; - bottom: -2px; + right: -2px; bottom: -2px; border-width: 0 1px 1px 0; } } @@ -50,59 +42,93 @@ height: 30px; &.arwes-frame__lt { - left: -3px; - top: -3px; + left: -3px; top: -3px; border-width: 2px 0 0 2px; } &.arwes-frame__lb { - left: -3px; - bottom: -3px; + left: -3px; bottom: -3px; border-width: 0 0 2px 2px; } &.arwes-frame__rt { - right: -3px; - top: -3px; + right: -3px; top: -3px; border-width: 2px 2px 0 0; } &.arwes-frame__rb { - right: -3px; - bottom: -3px; + right: -3px; bottom: -3px; border-width: 0 2px 2px 0; } } + &.arwes-frame__corner--l3 { + width: 50px; + height: 50px; + + &.arwes-frame__lt { + left: -5px; top: -5px; + border-width: 4px 0 0 4px; + } + &.arwes-frame__lb { + left: -5px; bottom: -5px; + border-width: 0 0 4px 4px; + } + &.arwes-frame__rt { + right: -5px; top: -5px; + border-width: 4px 4px 0 0; + } + &.arwes-frame__rb { + right: -5px; bottom: -5px; + border-width: 0 4px 4px 0; + } + } } .arwes-frame__content { z-index: 2; position: relative; - background-color: rgba($arwes-color-background2, 0.9); + background-color: rgba($arwes-color-background1, 0.9); overflow: hidden; transition: all $arwes-anim-time ease-out; } - &.arwes-frame--corners1 { - padding: 1px; - } - &.arwes-frame--corners2 { - padding: 3px; - } &.arwes-frame--content { .arwes-frame__content { padding: $arwes-padding; } } - &.arwes-frame--border-down { + + &.arwes-frame--border { .arwes-frame__box { - border-color: $arwes-color1; - border-width: 0 0 4px 0; + border-width: 1px; + border-style: solid; + border-color: $arwes-color1-dark; + box-shadow: 0 0 4px rgba($arwes-color1-dark, $arwes-color-alpha); } } - &.arwes-frame--border-up { - .arwes-frame__box { - border-color: $arwes-color1; - border-width: 1px 0 0 0; + + &.arwes-frame--level1 { + .arwes-frame__content { + background-color: rgba($arwes-color-background2, 0.9); + } + } + &.arwes-frame--level2 { + .arwes-frame__content { + background-color: rgba($arwes-color-background3, 0.9); + } + } + &.arwes-frame--level3 { + .arwes-frame__content { + background-color: rgba($arwes-color-background4, 0.9); } } + &.arwes-frame--corners1 { + padding: 1px; + } + &.arwes-frame--corners2 { + padding: 3px; + } + &.arwes-frame--corners3 { + padding: 5px; + } + &[data-theme='success'] { color: $arwes-color-success; diff --git a/src/components/Frame/index.js b/src/components/Frame/index.js index b53401f7..669c7602 100644 --- a/src/components/Frame/index.js +++ b/src/components/Frame/index.js @@ -1,6 +1,10 @@ -import React, { Component, PropTypes } from 'react'; +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; import classNames from 'classnames'; +/** + * Base container. + */ export default class Frame extends Component { constructor () { @@ -10,8 +14,9 @@ export default class Frame extends Component { render () { const { - component, + node, border, + level, corners, content, theme, @@ -22,18 +27,22 @@ export default class Frame extends Component { const cls = classNames('arwes-frame', { 'arwes-frame--content': content, - 'arwes-frame--border-up': border === 'up', - 'arwes-frame--border-down': border === 'down', + 'arwes-frame--border': border, + 'arwes-frame--level1': level === 1, + 'arwes-frame--level2': level === 2, + 'arwes-frame--level3': level === 3, 'arwes-frame--corners1': corners === 1, 'arwes-frame--corners2': corners === 2, + 'arwes-frame--corners3': corners === 3, }, className); const clsCorners = classNames('arwes-frame__corner', `arwes-frame__corner--l${corners}`); + const boxStyle = border && { borderWidth: border === true ? '1px' : border }; return React.createElement( - component, + node, { className: cls, 'data-theme': theme, ...rest }, -