[update] source

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;
   }
 }
 

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
  */

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 {
+      //
     }
   }
 }

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 (
-      <div className={cls} {...rest}>
-        <div className="arwes__pattern">
+      <div className={cls} style={bgStyle} {...rest}>
+        <div className="arwes__pattern" style={patternStyle}>
           <div className="arwes__intern"></div>
           <div className="arwes__main">
             {children}
@@ -36,12 +56,58 @@ export default class Arwes extends Component {
       </div>
     );
   }
+
+  /**
+   * Update the background image based on viewport and provided resources.
+   */
+  onUpdateBG () {
+
+    const { resources } = this.props;
+    let bgs = resources && resources.bg;
+
+    responsive.off(this.onBgChange);
+
+    if (bgs) {
+      if (typeof bgs === 'string') {
+        this.setState({ bg: bgs });
+      } else {
+        this.onBgChange = responsive.on(dims => {
+          const bg = dims.small ? bgs.small : dims.medium ? bgs.medium : bgs.large;
+          this.setState({ bg });
+        });
+      }
+    }
+  }
 }
 
 Arwes.propTypes = {
-  resources: PropTypes.bool,
+
+  /**
+   * Resources to render.
+   */
+  resources: PropTypes.shape({
+
+    // Background
+    bg: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.shape({
+        small: PropTypes.string,
+        medium: PropTypes.string,
+        large: PropTypes.string,
+      }),
+    ]),
+
+    // Pattern
+    pattern: PropTypes.string,
+  }),
+
+  /**
+   * Animations enabled.
+   */
+  anim: PropTypes.bool,
 };
 
 Arwes.defaultProps = {
-  resources: false,
+  resources: null,
+  anim: false,
 };

src/components/Button/index.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 export default function Button (props) {

src/components/Card/index.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 export default class Card extends Component {

src/components/Frame/Readme.md

@@ -0,0 +1,5 @@
+    <Frame border content corners={2}>
+      <h3>Arwes Project</h3>
+      <p>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.</p>
+    </Frame>

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;