@graupl/graupl 1.0.0-beta.10 → 1.0.0-beta.11

package/docs/components/card.md

@@ -1,369 +0,0 @@
-# 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

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

package/docs/components/inputgroup.md

@@ -1,159 +0,0 @@
-# Input Group
-
-Defaults
-
-```jsx
-// Input group selectors.
-$input-group-selector: ".input-group" !default;
-$input-group-inline-selector: ".inline" !default;
-$input-group-help-text-selector: ".help-text" !default;
-
-// Grid names.
-$input-group-grid-label-name: label !default;
-$input-group-grid-input-name: input !default;
-$input-group-grid-help-name: help !default;
-
-// Input group properties.
-$input-group-grid-template-columns: 100% !default;
-$input-group-grid-template-rows: auto auto auto !default;
-
-// Inline input group properties.
-$input-group-inline-grid-template-columns: auto 1fr !default;
-$input-group-inline-grid-template-rows: auto auto !default;
-
-// Inner element properties.
-$input-group-label-grid-area: $input-group-grid-label-name !default;
-$input-group-input-grid-area: $input-group-grid-input-name !default;
-$input-group-help-grid-area: $input-group-grid-help-name !default;
-```
-
-Variables
-
-Input group properties
-
-```jsx
---#{root-defaults.$prefix}input-group-grid-template-areas
---#{root-defaults.$prefix}input-group-grid-template-columns
---#{root-defaults.$prefix}input-group-grid-template-rows
---#{root-defaults.$prefix}input-group-row-gap
---#{root-defaults.$prefix}input-group-column-gap
---#{root-defaults.$prefix}input-group-gap
-```
-
-Inline input group properties
-
-```jsx
---#{root-defaults.$prefix}input-group-inline-grid-template-areas
---#{root-defaults.$prefix}input-group-inline-grid-template-columns
---#{root-defaults.$prefix}input-group-inline-grid-template-rows
-```
-
-Inner element properties
-
-```jsx
---#{root-defaults.$prefix}input-group-label-grid-area
---#{root-defaults.$prefix}input-group-input-grid-area
---#{root-defaults.$prefix}input-group-help-grid-area
-```
-
-Markup
-
-```jsx
-    <div class="py-10 full-width container">
-      <h2>Form elements</h2>
-      <p>Graupl provides default styling for all form elements.</p>
-      <form class="full-width rg-4">
-        <div class="input-group">
-          <label for="input">Input</label>
-          <input type="text" placeholder="Input" id="input">
-          <small class="help-text">This is some help text to assist with knowing what the field is about.</small>
-        </div>
-        <div class="input-group inline"><label for="input-readonly">Readonly Input</label>
-          <input type="text" placeholder="Readonly Input" id="input-readonly" value="Readonly Input" readonly>
-          <small class="help-text">This is some help text to assist with knowing what the field is about.</small>
-        </div>
-        <div class="input-group"><label for="input-disabled">Disabled Input</label>
-          <input type="text" placeholder="Disabled Input" id="input-disabled" disabled>
-          <small class="help-text">This is some help text to assist with knowing what the field is about.</small>
-        </div>
-        <div class="input-group inline"><label for="textarea">Textarea</label>
-          <textarea class="textarea" placeholder="Textarea" id="textarea"></textarea>
-        </div>
-        <div class="input-group"><label for="textarea-readonly">Readonly Textarea</label>
-          <textarea class="textarea" placeholder="Readonly Textarea" id="textarea-readonly"
-            readonly>Readonly Textarea</textarea>
-        </div>
-        <div class="input-group"><label for="textarea-disabled">Disabled Textarea</label>
-          <textarea class="textarea" placeholder="Disabled Textarea" id="textarea-disabled" disabled></textarea>
-        </div>
-        <div class="input-group inline"><label for="select">Select</label>
-          <select id="select">
-            <option value="1">Option 1</option>
-            <option value="2">Option 2</option>
-            <optgroup label="Group 1">
-              <option value="3">Option 3</option>
-              <option value="4">Option 4</option>
-              <option value="5">Option 5</option>
-            </optgroup>
-          </select>
-        </div>
-        <div class="input-group"><label for="select-disabled">Disabled Select</label>
-          <select id="select-disabled" disabled>
-            <option value="1">Option 1</option>
-            <option value="2">Option 2</option>
-            <optgroup label="Group 1">
-              <option value="3">Option 3</option>
-              <option value="4">Option 4</option>
-              <option value="5">Option 5</option>
-            </optgroup>
-          </select>
-        </div>
-        <div class="input-group"><label for"multi-select">Multi-select</label>
-          <select id="multi-select" multiple>
-            <option value="1">Option 1</option>
-            <option value="2">Option 2</option>
-            <optgroup label="Group 1">
-              <option value="3">Option 3</option>
-              <option value="4">Option 4</option>
-              <option value="5">Option 5</option>
-            </optgroup>
-          </select>
-        </div>
-        <div class="input-group inline"><label for="multi-select-disabled">Disabled Multi-select</label>
-          <select id="multi-select-disabled" multiple disabled>
-            <option value="1">Option 1</option>
-            <option value="2">Option 2</option>
-            <optgroup label="Group 1">
-              <option value="3">Option 3</option>
-              <option value="4">Option 4</option>
-              <option value="5">Option 5</option>
-            </optgroup>
-          </select>
-        </div>
-        <fieldset>
-          <legend>Checkboxes</legend>
-          <label for="checkbox">
-            <input type="checkbox" id="checkbox"> Checkbox</label>
-          <label for="checkbox-checked">
-            <input type="checkbox" id="checkbox-checked" checked> Checked Checkbox</label>
-          <label for="checkbox-disabled">
-            <input type="checkbox" id="checkbox-disabled" disabled> Disabled Checkbox</label>
-        </fieldset>
-        <fieldset>
-          <legend>Radio Buttons</legend>
-          <label for="radio"><input type="radio" id="radio" name="radio"> Radio</label>
-          <label for="radio-checked"><input type="radio" id="radio-checked" name="radio" checked> Checked Radio</label>
-          <label for="radio-disabled"><input type="radio" id="radio-disabled" name="radio" disabled> Disabled
-            Radio</label>
-        </fieldset>
-        <fieldset disabled>
-          <legend>Disabled Fieldset</legend>
-          <label for="disabled-fieldset-checkbox">
-            <input type="checkbox" id="disabled-fieldset-checkbox"> Checkbox</label>
-        </fieldset>
-        <div class="input-group"><label for="range">Range</label>
-          <input type="range" class="range" id="range">
-        </div>
-      </form>
-    </div>
-```