Merge pull request #158 from dabapps/layout-and-disabled-style-tweaks

Layout and disabled style tweaks

docs/src/less/index.less

@@ -33,3 +33,38 @@ h2 {
     }
   }
 }
+
+.atomic-position-demo {
+  height: 250px;
+  width: 100%;
+  position: relative;
+  border: @border-base;
+  border-color: @success;
+  background-color: @success-lighter;
+
+  .position-static {
+    border: @border-base;
+    border-color: @primary;
+    background-color: @primary-lighter;
+    bottom: 0;
+    right: 0;
+    padding: @padding-base;
+  }
+
+  .position-absolute {
+    border: @border-base;
+    border-color: @secondary;
+    background-color: @secondary-lighter;
+    bottom: 0;
+    right: 0;
+    padding: @padding-base;
+  }
+
+  .position-relative {
+    border: @border-base;
+    border-color: @tertiary;
+    background-color: @tertiary-lighter;
+    left: 30px;
+    padding: @padding-base;
+  }
+}

docs/src/ts/atomic-position.tsx

@@ -0,0 +1,91 @@
+import * as React from 'react';
+
+import {
+  Anchor,
+  CodeBlock,
+  Column,
+  Row,
+  Section
+} from '../../../src/ts';
+
+const AtomicPosition = () => (
+  <Section>
+    <Row>
+      <Column>
+        <h2>
+          <Anchor>
+            Atomic Position Classes
+          </Anchor>
+        </h2>
+      </Column>
+    </Row>
+    <Row>
+      <Column className="display-columns">
+        <h3>
+          Demo
+        </h3>
+        <div className="atomic-position-demo">
+          <p>This is a container div relatively positioned for purpose of this demo</p>
+
+          <div className="position-static">
+            class <strong>position-static</strong>. static positioning means that this element is unpositioned.
+             It is rendered where the element is by default according to the HTML.
+             It's not participating in all the positioning fun.
+          </div>
+          <div className="position-relative">
+            class <strong>position-relative</strong>. relative positioning means
+            the element is positioned relative to itself. Without using
+            the top, right, bottom, or left properties, it behaves like
+             a static element. Try adding properties to
+             move this element!
+          </div>
+          <div className="position-absolute">
+            class <strong>position-absolute</strong>. absolute means positioned relative
+             to its nearest positioned parent positioned
+             element. It is now positioned relative to its nearest relative ancestor.
+          </div>
+        </div>
+        <p>
+          <strong>Note</strong>: all the padding and colour above was just part of the demo.
+          There's also class <strong>.position-fixed</strong>, but not shown for this demo.
+        </p>
+      </Column>
+    </Row>
+    <Row>
+      <Column>
+        <h3>
+          Code
+        </h3>
+        <CodeBlock language="html" name="HTML">
+          {`
+            <div className="atomic-position-demo">
+              <p>This is a container div relatively positioned for purpose of this demo</p>
+
+              <div className="position-static">
+                class <strong>position-static</strong>. static positioning means that this element
+                 is unpositioned. It is rendered where the element is by default according to the HTML.
+                  It's not participating in all the positioning fun.
+              </div>
+
+              <div className="position-relative">
+                class <strong>position-relative</strong>. relative positioning means the element is
+                 positioned relative to itself. Without using
+                the top, right, bottom, or left properties, it behaves like a static element.
+                 Try adding properties to move this element!
+              </div>
+
+              <div className="position-absolute">
+                class <strong>position-absolute</strong>. absolute means positioned relative
+                 to its nearest positioned parent positioned element.
+                 It is now positioned relative to its nearest relative ancestor.
+              </div>
+
+            </div>
+          `}
+        </CodeBlock>
+      </Column>
+    </Row>
+  </Section>
+);
+
+export default AtomicPosition;

docs/src/ts/hrs.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+
+import {
+  Anchor,
+  CodeBlock,
+  Column,
+  DabIpsum,
+  Row,
+  Section
+} from '../../../src/ts';
+
+const Hrs = () => (
+  <Section>
+    <Row>
+      <Column>
+        <h2>
+          <Anchor>
+            Horizontal Rules
+          </Anchor>
+        </h2>
+        <DabIpsum count={2} />
+        <hr/>
+        <DabIpsum count={2} />
+        <hr className="fade"/>
+        <DabIpsum count={2} />
+      </Column>
+    </Row>
+    <Row>
+      <Column>
+        <h3>
+          Code
+        </h3>
+        <CodeBlock language="html" name="HTML">
+          {`
+            <DabIpsum count={2} />
+
+            <hr/>
+
+            <DabIpsum count={2} />
+
+            <hr className="fade"/>
+
+            <DabIpsum count={2} />
+          `}
+        </CodeBlock>
+      </Column>
+    </Row>
+  </Section>
+);
+
+export default Hrs;

docs/src/ts/index.tsx

@@ -17,13 +17,15 @@ import {
 import Alerts from './alerts';
 import AtomicFloats from './atomic-floats';
 import AtomicHides from './atomic-hides';
+import AtomicPosition from './atomic-position';
 import AtomicSpacing from './atomic-spacing';
 import AtomicText from './atomic-text';
 import AtomicTextAlign from './atomic-text-align';
 import Buttons from './buttons';
 import CodeBlocks from './code-blocks';
 import ContentBoxes from './content-boxes';
 import Grid from './grid';
+import Hrs from './hrs';
 import Inputs from './inputs';
 import Ipsum from './ipsum';
 import Modals from './modals';
@@ -59,9 +61,11 @@ class App extends React.Component<{}, void> {
         <AtomicFloats />
         <AtomicHides />
         <AtomicSpacing />
+        <AtomicPosition />
         <AtomicText />
         <AtomicTextAlign />
         <Alerts />
+        <Hrs />
         <Buttons />
         <CodeBlocks />
         <ContentBoxes />

docs/src/ts/modals.tsx

@@ -181,7 +181,7 @@ class Modals extends React.Component<{}, IState> {
         <Modal {...props} onClickOutside={this.onClickCloseModal}>
           <ModalHeader>
             <ModalCloseIcon onClick={this.onClickCloseModal}>
-              X
+              {String.fromCharCode(215)}
             </ModalCloseIcon>
             <h5>
               Header

package.json

@@ -1,6 +1,6 @@
 {
   "name": "roe",
-  "version": "0.8.22",
+  "version": "0.8.23",
   "description": "A Collection of React Components for Project Development",
   "main": "dist/js/index.js",
   "types": "dist/js/index.d.ts",

src/less/layout.less

@@ -16,3 +16,19 @@
     border-bottom: @border-none;
   }
 }
+
+.position-relative {
+  position: relative;
+}
+
+.position-absolute {
+  position: absolute;
+}
+
+.position-fixed {
+  position: fixed;
+}
+
+.position-static {
+  position: static;
+}

src/less/overrides.less

@@ -242,6 +242,8 @@ select {
   }
 }
 
+a,
+tr,
 button,
 input,
 select,
@@ -250,7 +252,7 @@ datalist,
 keygen {
   &[disabled],
   &.disabled {
-    cursor: no-drop;
+    cursor: not-allowed;
   }
 }
 
@@ -302,3 +304,21 @@ tbody {
     }
   }
 }
+
+hr {
+  height: 1px;
+  border-width: 0;
+  background-color: @grey-light;
+  margin: @margin-base 0;
+
+  &.fade {
+    background-color: @grey-lighter;
+  }
+}
+
+@supports (background-image: linear-gradient(transparent, transparent)) {
+  hr.fade {
+    background-color: transparent;
+    background-image: linear-gradient(to right, transparent, fade(@grey-light, 100%), transparent);
+  }
+}

src/less/tables.less

@@ -39,7 +39,8 @@
         transition: ease-in-out 0.1s background-color;
       }
 
-      &:hover {
+      &:hover:not([disabled]),
+      &:hover:not(.disabled) {
         .table-header,
         .table-cell {
           background-color: @table-hover;