@graupl/graupl 1.0.0-alpha.13 → 1.0.0-alpha.14

package/docs/components/alert.md

@@ -0,0 +1,130 @@
+# Alert
+
+Defaults
+
+```jsx
+// Alert selectors.
+$alert-selector: ".alert" !default;
+$alert-theme-selector-prefix: "." !default;
+$alert-body-selector: ".alert-body" !default;
+$alert-header-selector: ".alert-header" !default;
+$alert-footer-selector: ".alert-footer" !default;
+$alert-title-selector: ".alert-title" !default;
+$alert-dismisser-selector: ".dismisser" !default;
+$alert-hidden-selector: ".hide" !default;
+$alert-shown-selector: ".show" !default;
+$alert-transition-selector: ".transitioning" !default;
+```
+
+Variables
+
+Alert Properties
+
+```jsx
+--#{root-defaults.$prefix}-alert-padding-x
+--#{root-defaults.$prefix}-alert-padding-y
+```
+
+Alert Gap Properties
+
+```jsx
+--#{root-defaults.$prefix}-alert-column-gap
+--#{root-defaults.$prefix}-alert-row-gap
+--#{root-defaults.$prefix}-alert-gap
+```
+
+Alert Colour Properties
+
+```jsx
+--#{root-defaults.$prefix}-alert-background
+--#{root-defaults.$prefix}-alert-color
+--#{root-defaults.$prefix}-alert-link-color
+--#{root-defaults.$prefix}-alert-link-visited-color
+--#{root-defaults.$prefix}-alert-link-focus-color
+--#{root-defaults.$prefix}-alert-link-hover-color
+--#{root-defaults.$prefix}-alert-link-active-color
+--#{root-defaults.$prefix}-alert-link-disabled-color
+```
+
+Alert Border Properties
+
+```jsx
+--#{root-defaults.$prefix}-alert-border-color
+--#{root-defaults.$prefix}-alert-top-left-border-radius
+--#{root-defaults.$prefix}-alert-top-right-border-radius
+--#{root-defaults.$prefix}-alert-bottom-left-border-radius
+--#{root-defaults.$prefix}-alert-bottom-right-border-radius
+--#{root-defaults.$prefix}-alert-border-radius
+--#{root-defaults.$prefix}-alert-border-style
+--#{root-defaults.$prefix}-alert-border-width
+--#{root-defaults.$prefix}-alert-border
+```
+
+Alert Title Properties
+
+```jsx
+--#{root-defaults.$prefix}-alert-title-color
+--#{root-defaults.$prefix}-alert-title-font-size
+--#{root-defaults.$prefix}-alert-title-font-weight
+--#{root-defaults.$prefix}-alert-title-font-family
+--#{root-defaults.$prefix}-alert-title-line-height
+--#{root-defaults.$prefix}-alert-title-margin
+```
+
+Markup
+
+```jsx
+    <div class="py-10 full-width container">
+      <h2>Alerts</h2>
+      <div class="display-grid g-5">
+        <div class="alert">
+          <div class="alter-header">
+            <h3 class="alert-title">Alert</h3>
+          </div>
+          <div class="alert-body">
+            <p>This is some text that describes the alert.</p>
+          </div>
+          <div class="alert-footer">
+            <a href="#">Action</a>
+          </div>
+          <button class="alert-dismisser button">x</button>
+        </div>
+        <div class="alert primary">
+          <div class="alter-header">
+            <h3 class="alert-title">Primary Alert</h3>
+          </div>
+          <div class="alert-body">
+            <p>This is some text that describes the alert.</p>
+          </div>
+          <div class="alert-footer">
+            <a href="#">Primary Action</a>
+          </div>
+          <button class="alert-dismisser button primary">x</button>
+        </div>
+        <div class="alert secondary">
+          <div class="alter-header">
+            <h3 class="alert-title">Secondary Alert</h3>
+          </div>
+          <div class="alert-body">
+            <p>This is some text that describes the alert.</p>
+          </div>
+          <div class="alert-footer">
+            <a href="#">Secondary Action</a>
+          </div>
+          <button class="alert-dismisser button secondary">x</button>
+        </div>
+        <div class="alert tertiary">
+          <div class="alter-header">
+            <h3 class="alert-title">Tertiary Alert</h3>
+          </div>
+          <div class="alert-body">
+            <p>This is some text that describes the alert.</p>
+          </div>
+          <div class="alert-footer">
+            <a href="#">Tertiary Action</a>
+          </div>
+          <button class="alert-dismisser button tertiary">x</button>
+        </div>
+      </div>
+    </div>
+```

package/docs/components/button.md

@@ -0,0 +1,84 @@
+# Button
+
+Default Values
+
+```jsx
+// Button selectors.
+$button-selector: ".button" !default;
+$button-link-selector: ".link" !default;
+$button-theme-selector-prefix: "." !default;
+
+// Button properties.
+$button-transform: none !default;
+$button-visited-transform: $button-transform !default;
+$button-focus-transform: $button-transform !default;
+$button-hover-transform: $button-transform !default;
+$button-active-transform: scale(0.95) !default;
+$button-disabled-transform: $button-transform !default;
+```
+
+Button Properties
+
+```jsx
+--#{root-defaults.$prefix}-button-min-width
+--#{root-defaults.$prefix}-button-min-height
+--#{root-defaults.$prefix}-button-padding-x
+--#{root-defaults.$prefix}-button-padding-y
+--#{root-defaults.$prefix}-button-padding
+--#{root-defaults.$prefix}-button-font-size
+--#{root-defaults.$prefix}-button-transition
+--#{root-defaults.$prefix}-button-transition-reduced-motion
+```
+
+Transform Properties
+
+```jsx
+--#{root-defaults.$prefix}-button-transform
+--#{root-defaults.$prefix}-button-visited-transform
+--#{root-defaults.$prefix}-button-focus-transform
+--#{root-defaults.$prefix}-button-hover-transform
+--#{root-defaults.$prefix}-button-active-transform
+--#{root-defaults.$prefix}-button-disabled-transform
+```
+
+Background Properties
+
+```jsx
+--#{root-defaults.$prefix}-button-background
+--#{root-defaults.$prefix}-button-visited-background
+--#{root-defaults.$prefix}-button-focus-background
+--#{root-defaults.$prefix}-button-hover-background
+--#{root-defaults.$prefix}-button-active-background
+--#{root-defaults.$prefix}-button-disabled-background
+```
+
+Text Properties
+
+```jsx
+--#{root-defaults.$prefix}-button-color
+--#{root-defaults.$prefix}-button-visited-color
+--#{root-defaults.$prefix}-button-focus-color
+--#{root-defaults.$prefix}-button-hover-color
+--#{root-defaults.$prefix}-button-active-color
+--#{root-defaults.$prefix}-button-disabled-color
+```
+
+Border Properties
+
+```jsx
+--#{root-defaults.$prefix}-button-border-width
+--#{root-defaults.$prefix}-botton-border-style
+--#{root-defaults.$prefix}-button-border
+--#{root-defaults.$prefix}-button-border-radius
+```
+
+Border Colour Properties
+
+```jsx
+--#{root-defaults.$prefix}-button-border-color
+--#{root-defaults.$prefix}-button-visited-border-color
+--#{root-defaults.$prefix}-button-focus-border-color
+--#{root-defaults.$prefix}-button-hover-border-color
+--#{root-defaults.$prefix}-button-active-border-color
+--#{root-defaults.$prefix}-button-disabled-border-color
+```

package/docs/components/card.md

@@ -0,0 +1,369 @@
+# Card
+
+Defaults
+
+```jsx
+// Card selectors.
+$card-selector: ".card" !default;
+$card-image-selector: ".card-image" !default;
+$card-content-selector: ".card-content" !default;
+$card-body-selector: ".card-body" !default;
+$card-header-selector: ".card-header" !default;
+$card-footer-selector: ".card-footer" !default;
+$card-title-selector: ".card-title" !default;
+$horizontal-card-selector: ".horizontal" !default;
+$horizontal-card-left-selector: ".left" !default;
+$horizontal-card-right-selector: ".right" !default;
+$vertical-card-top-selector: ".top" !default;
+$vertical-card-bottom-selector: ".bottom" !default;
+$inverse-card-selector: ".inverse" !default;
+
+// Card properties.
+$card-transform: none !default;
+$card-hover-transform: $card-transform !default;
+
+// Card layout properties.
+$card-content-ratio: 1fr !default;
+$card-image-ratio: auto !default;
+$horizontal-card-content-ratio: 3fr !default;
+$horizontal-card-image-ratio: 2fr !default;
+```
+
+Variables
+
+Card Properties
+
+```jsx
+--#{root-defaults.$prefix}-card-padding-x
+--#{root-defaults.$prefix}-card-padding-y
+--#{root-defaults.$prefix}-card-padding
+--#{root-defaults.$prefix}-card-transition
+--#{root-defaults.$prefix}-card-transition-reduced-motion
+```
+
+Card transform properties
+
+```jsx
+--#{root-defaults.$prefix}-card-transform
+--#{root-defaults.$prefix}-card-hover-transform
+```
+
+Card gap properties
+
+```jsx
+--#{root-defaults.$prefix}-card-column-gap
+--#{root-defaults.$prefix}-card-row-gap
+--#{root-defaults.$prefix}-card-gap
+```
+
+Card color properties
+
+```jsx
+--#{root-defaults.$prefix}-card-background
+--#{root-defaults.$prefix}-card-color
+```
+
+Card border-properties
+
+```jsx
+--#{root-defaults.$prefix}-card-border-color
+--#{root-defaults.$prefix}-card-top-left-border-radius
+--#{root-defaults.$prefix}-card-top-right-border-radius
+--#{root-defaults.$prefix}-card-bottom-left-border-radius
+--#{root-defaults.$prefix}-card-bottom-right-border-radius
+--#{root-defaults.$prefix}-card-border-radius
+--#{root-defaults.$prefix}-card-border-style
+--#{root-defaults.$prefix}-card-border-width
+--#{root-defaults.$prefix}-card-border
+```
+
+Card layout properties
+
+```jsx
+--#{root-defaults.$prefix}-card-content-ratio
+--#{root-defaults.$prefix}-card-image-ratio
+--#{root-defaults.$prefix}-horizontal-card-content-ratio
+--#{root-defaults.$prefix}-horizontal-card-image-ratio
+```
+
+Card Image Properties
+
+```jsx
+--#{root-defaults.$prefix}-card-image-padding-x
+--#{root-defaults.$prefix}-card-image-padding-y
+--#{root-defaults.$prefix}-card-image-padding
+```
+
+Card content properties
+
+```jsx
+--#{root-defaults.$prefix}-card-content-padding-x
+--#{root-defaults.$prefix}-card-content-padding-y
+--#{root-defaults.$prefix}-card-content-padding
+```
+
+Card content gap properties
+
+```jsx
+--#{root-defaults.$prefix}-card-content-column-gap
+--#{root-defaults.$prefix}-card-content-row-gap
+--#{root-defaults.$prefix}-card-content-gap
+```
+
+Card title properties
+
+```jsx
+--#{root-defaults.$prefix}-card-title-color
+--#{root-defaults.$prefix}-card-title-font-size
+--#{root-defaults.$prefix}-card-title-font-weight
+--#{root-defaults.$prefix}-card-title-font-family
+--#{root-defaults.$prefix}-card-title-line-height
+```
+
+Markup
+
+```jsx
+    <div class="py-10 full-width container">
+      <h2>Cards</h2>
+      <p>Cards using the <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.top</span> class will have the image placed on the top while cards using the <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.bottom</span> class will have the image placed on the bottom.</p>
+      <div class="columns">
+        <div class="card">
+          <div class="card-image">
+            <img src="https://unsplash.it/1000/400" alt="Card image">
+          </div>
+          <div class="card-content">
+            <div class="card-header">
+              <h3 class="card-title">Title</h3>
+            </div>
+            <div class="card-body">
+              <p>This is some text that describes the card.</p>
+            </div>
+            <div class="card-footer">
+              <a class="button primary stretched" href="#">Card Action</a>
+            </div>
+          </div>
+        </div>
+        <div class="card">
+          <div class="card-image">
+            <img src="https://unsplash.it/1000/400" alt="Card image">
+          </div>
+          <div class="card-content">
+            <div class="card-header">
+              <h3 class="card-title">Title</h3>
+            </div>
+            <div class="card-body">
+              <p>This is some text that describes the card.</p>
+            </div>
+            <div class="card-footer">
+              <a class="button primary stretched" href="#">Card Action</a>
+            </div>
+          </div>
+        </div>
+        <div class="card">
+          <div class="card-image">
+            <img src="https://unsplash.it/1000/400" alt="Card image">
+          </div>
+          <div class="card-content">
+            <div class="card-header">
+              <h3 class="card-title">Title</h3>
+            </div>
+            <div class="card-body">
+              <p>This is some text that describes the card.</p>
+            </div>
+            <div class="card-footer">
+              <a class="button primary stretched" href="#">Card Action</a>
+            </div>
+          </div>
+        </div>
+        <div class="card bottom">
+          <div class="card-image">
+            <img src="https://unsplash.it/1000/400" alt="Card image">
+          </div>
+          <div class="card-content">
+            <div class="card-header">
+              <h3 class="card-title">Title</h3>
+            </div>
+            <div class="card-body">
+              <p>This is some text that describes the card.</p>
+            </div>
+            <div class="card-footer">
+              <a class="button primary stretched" href="#">Card Action</a>
+            </div>
+          </div>
+        </div>
+        <div class="card bottom">
+          <div class="card-image">
+            <img src="https://unsplash.it/1000/400" alt="Card image">
+          </div>
+          <div class="card-content">
+            <div class="card-header">
+              <h3 class="card-title">Title</h3>
+            </div>
+            <div class="card-body">
+              <p>This is some text that describes the card.</p>
+            </div>
+            <div class="card-footer">
+              <a class="button primary stretched" href="#">Card Action</a>
+            </div>
+          </div>
+        </div>
+        <div class="card bottom">
+          <div class="card-image">
+            <img src="https://unsplash.it/1000/400" alt="Card image">
+          </div>
+          <div class="card-content">
+            <div class="card-header">
+              <h3 class="card-title">Title</h3>
+            </div>
+            <div class="card-body">
+              <p>This is some text that describes the card.</p>
+            </div>
+            <div class="card-footer">
+              <a class="button primary stretched" href="#">Card Action</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="py-10 full-width container">
+      <h2>Horizontal Cards</h2>
+      <p>Cards using the <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.right</span> class will have the image placed on the right while cards using the <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.left</span> class will have the image placed on the left.</p>
+      <div class="columns count-2">
+        <div class="card horizontal">
+          <div class="card-image">
+            <img src="https://unsplash.it/1000/400" alt="Card image">
+          </div>
+          <div class="card-content">
+            <div class="card-header">
+              <h3 class="card-title">Title</h3>
+            </div>
+            <div class="card-body">
+              <p>This is some text that describes the card.</p>
+            </div>
+            <div class="card-footer">
+              <a class="button primary stretched" href="#">Card Action</a>
+            </div>
+          </div>
+        </div>
+        <div class="card horizontal right">
+          <div class="card-image">
+            <img src="https://unsplash.it/1000/400" alt="Card image">
+          </div>
+          <div class="card-content">
+            <div class="card-header">
+              <h3 class="card-title">Title</h3>
+            </div>
+            <div class="card-body">
+              <p>This is some text that describes the card.</p>
+            </div>
+            <div class="card-footer">
+              <a class="button primary stretched" href="#">Card Action</a>
+            </div>
+          </div>
+        </div>
+        <div class="card horizontal">
+          <div class="card-image">
+            <img src="https://unsplash.it/1000/400" alt="Card image">
+          </div>
+          <div class="card-content">
+            <div class="card-header">
+              <h3 class="card-title">Title</h3>
+            </div>
+            <div class="card-body">
+              <p>This is some text that describes the card.</p>
+            </div>
+            <div class="card-footer">
+              <a class="button primary stretched" href="#">Card Action</a>
+            </div>
+          </div>
+        </div>
+        <div class="card horizontal right">
+          <div class="card-image">
+            <img src="https://unsplash.it/1000/400" alt="Card image">
+          </div>
+          <div class="card-content">
+            <div class="card-header">
+              <h3 class="card-title">Title</h3>
+            </div>
+            <div class="card-body">
+              <p>This is some text that describes the card.</p>
+            </div>
+            <div class="card-footer">
+              <a class="button primary stretched" href="#">Card Action</a>
+            </div>
+          </div>
+        </div>
+        <div class="card horizontal">
+          <div class="card-image">
+            <img src="https://unsplash.it/1000/400" alt="Card image">
+          </div>
+          <div class="card-content">
+            <div class="card-header">
+              <h3 class="card-title">Title</h3>
+            </div>
+            <div class="card-body">
+              <p>This is some text that describes the card.</p>
+            </div>
+            <div class="card-footer">
+              <a class="button primary stretched" href="#">Card Action</a>
+            </div>
+          </div>
+        </div>
+        <div class="card horizontal right">
+          <div class="card-image">
+            <img src="https://unsplash.it/1000/400" alt="Card image">
+          </div>
+          <div class="card-content">
+            <div class="card-header">
+              <h3 class="card-title">Title</h3>
+            </div>
+            <div class="card-body">
+              <p>This is some text that describes the card.</p>
+            </div>
+            <div class="card-footer">
+              <a class="button primary stretched" href="#">Card Action</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="py-10 full-width container">
+      <h2>Inverse Cards</h2>
+      <p>Cards using the <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.inverse</span> class will have the image placed on the right if it is a horizontal card and on the bottom if it is a vertical card.</p>
+      <p>This is mainly to provide a shortcut for horiztonal cards that you'd like to use the <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.bottom .right</span> classes on when the card is forced to be vertical.</p>
+      <div class="columns count-2">
+        <div class="card horizontal inverse">
+          <div class="card-image">
+            <img src="https://unsplash.it/1000/400" alt="Card image">
+          </div>
+          <div class="card-content">
+            <div class="card-header">
+              <h3 class="card-title">Title</h3>
+            </div>
+            <div class="card-body">
+              <p>This is some text that describes the card.</p>
+            </div>
+            <div class="card-footer">
+              <a class="button primary stretched" href="#">Card Action</a>
+            </div>
+          </div>
+        </div>
+        <div class="card horizontal inverse">
+          <div class="card-image">
+            <img src="https://unsplash.it/1000/400" alt="Card image">
+          </div>
+          <div class="card-content">
+            <div class="card-header">
+              <h3 class="card-title">Title</h3>
+            </div>
+            <div class="card-body">
+              <p>This is some text that describes the card.</p>
+            </div>
+            <div class="card-footer">
+              <a class="button primary stretched" href="#">Card Action</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+```

package/docs/components/index.md

@@ -0,0 +1 @@
+# Components