cacao-css 3.21.0 → 4.0.0

package/src/css/components/constrain/README.md

@@ -1,65 +0,0 @@
-# Constrain
-
-Constrains an image of unknown size to the specified aspect ratio.
-The image is potentially cropped using the specified gravity.
-Similar to `FlexEmbed` but meant to be used specifically with images.
-
-This method will be used until the `object-fit` and `object-position`
-properties are well supported. <http://caniuse.com/#feat=object-fit>
-
-Basic visual tests are in [`test/modules/constrain.html`](http://aptuitiv.github.io/cacao/test/modules/constrain.html).
-
-
-## Available classes
-
-* `Constrain`: The base component.
-* `Constrain--contain`: Contains the image within the ratio rather than filling
-  the ratio and potentially cropping.
-* `Constrain--5by4`: The modifier class for 5:4 aspect ratio image.
-* `Constrain--4by3`: The modifier class for 4:3 aspect ratio image.
-* `Constrain--3by2`: The modifier class for 3:2 aspect ratio image,
-* `Constrain--8by5` / `Constrain--16by10`: The modifier class for 8:5/16:10 
-  aspect ratio image.
-* `Constrain--16by9`: The modifier class for 16:9 aspect ratio image.
-* `Constrain--top`: Sets the image to gravitate towards the top edge.
-* `Constrain--bottom`: Sets the image to gravitate towards the bottom edge.
-* `Constrain--left`: Sets the image to gravitate towards the left edge.
-* `Constrain--right`: Sets the image to gravitate towards the right edge.
-* `Constrain--topLeft`: Sets the image to gravitate towards the top left 
-  corner.
-* `Constrain--topRight`: Sets the image to gravitate towards the top right 
-  corner.
-* `Constrain--bottomLeft`: Sets the image to gravitate towards the bottom 
-  left corner.
-* `Constrain--bottomRight`: Sets the image to gravitate towards the bottom 
-  right corner.
-
-
-## Usage
-
-The image must be applied to the element via the `background-image` property,
-either by applying a custom class or using inline styles.
-
-```html
-<div class="Constrain Constrain--16by9" style="background-image: url('...');"></div>
-```
-
-You can add custom aspect ratios. For example, to create a 2.35:1 aspect
-ratio:
-
-```css
-/**
- * Modifier: 47:20 aspect ratio
- */
-
-.Constrain--47by20 {
-  padding-bottom: 42.55%;
-}
-```
-
-Alternatively, aspect ratios can be calculated programmatically and the
-corresponding `padding-bottom` value applied using an inline style.
-
-```html
-<div class="Constrain Constrain--16by9" style="background-image: url('...'); padding-bottom: 42.55%;"></div>
-```

package/src/css/components/constrain/constrain.css

@@ -1,162 +0,0 @@
-/* ==========================================================================
-   Constrain
-   ========================================================================== */
-
-/** @define Constrain */
-
-/**
- * Constrains an image of unknown size to the specified aspect ratio.
- * The image is potentially cropped using the specified gravity.
- * Similar to FlexEmbed but meant to be used specifically with images.
- *
- * This method will be used until the `object-fit` and `object-position`
- * properties are well supported. http://caniuse.com/#feat=object-fit
- */
-
-/**
- * Constrained image container
-
- * Apply `background-image` inline or with another class.
- * Constrain ratio is set to 1:1 by default. Use a modifier to change it.
- * Gravity is set to center by default. Use a modifier to change it.
- */
-
-.Constrain {
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: cover;
-    display: block;
-    padding-bottom: 100%;
-    width: 100%;
-}
-
-/**
- * Contain images instead of cropping them to fit
- */
-
-.Constrain--contain {
-    background-size: contain;
-}
-
-/* Square constrain ratio
-   ========================================================================== */
-
-.Constrain--1by1 {
-    padding-bottom: 100%;
-}
-
-/* Landscape constrain ratios
-   ========================================================================== */
-
-.Constrain--5by4 {
-    padding-bottom: 80%;
-}
-
-.Constrain--4by3 {
-    padding-bottom: 75%;
-}
-
-.Constrain--3by2 {
-    padding-bottom: 66.66667%;
-}
-
-.Constrain--8by5,
-.Constrain--16by10 {
-    padding-bottom: 62.5%;
-}
-
-.Constrain--5by3 {
-    padding-bottom: 60%;
-}
-
-.Constrain--16by9 {
-    padding-bottom: 56.25%;
-}
-
-.Constrain--2by1 {
-    padding-bottom: 50%;
-}
-
-.Constrain--3by1 {
-    padding-bottom: 33.333333%;
-}
-
-/* Portrait constrain ratios
-   ========================================================================== */
-
-.Constrain--4by5 {
-    padding-bottom: 125%;
-}
-
-.Constrain--3by4 {
-    padding-bottom: 133.333333%;
-}
-
-.Constrain--2by3 {
-    padding-bottom: 150%;
-}
-
-.Constrain--5by8,
-.Constrain--10by16 {
-    padding-bottom: 160%;
-}
-
-.Constrain--3by5 {
-    padding-bottom: 166.666666%;
-}
-
-.Constrain--9by16 {
-    padding-bottom: 177.777777%;
-}
-
-.Constrain--1by2 {
-    padding-bottom: 200%;
-}
-
-.Constrain--1by3 {
-    padding-bottom: 300%;
-}
-
-/* Crop gravities
-   ========================================================================== */
-
-/**
- * Gravitate towards edge
- */
-
-.Constrain--top {
-    background-position: top center;
-}
-
-.Constrain--bottom {
-    background-position: bottom center;
-}
-
-.Constrain--left {
-    background-position: left center;
-}
-
-.Constrain--right {
-    background-position: right center;
-}
-
-/**
- * Gravitate towards corner
- */
-
-.Constrain--topLeft {
-    background-position: top left;
-}
-
-.Constrain--topRight {
-    background-position: top right;
-}
-
-.Constrain--bottomLeft {
-    background-position: bottom left;
-}
-
-.Constrain--bottomRight {
-    background-position: bottom right;
-}
-

package/src/css/components/constrain/image.css

@@ -1,29 +0,0 @@
-/* =========================================================================== *\
-    Image constrain
-\* =========================================================================== */
-
-/**
- * Constrains an image of unknown size to the specified aspect ratio.
- * 
- * Used in combination with .Constrain classes. An example would be:
- * <div class="ImageConstrain Constrain--16by9"><img src="/my/image/here"></div>
- */
-
-/** @define ImageConstrain */
-
-.ImageConstrain {
-    display: block;
-    position: relative;
-    width: 100%;
-}
-
-/* postcss-bem-linter: ignore */
-.ImageConstrain img {
-    height: 100%;
-    image-orientation: none;
-    left: 0;
-    object-fit: cover;
-    position: absolute;
-    top: 0;
-    width: 100%;
-}

package/src/css/components/constrain/index.css

@@ -1,2 +0,0 @@
-@import './constrain';
-@import './image';

package/src/css/components/container/README.md

@@ -1,28 +0,0 @@
-# Container
-
-Page content container.
-
-Basic visual tests are in [`test/modules/container.html`](http://aptuitiv.github.io/cacao/test/modules/container.html).
-
-
-## Available classes
-
-* `Container`: The base component.
-* `Container--fixedWidth`: Fix the width of the component so that it is no 
-  longer fluid
-* `Container--alignLeft`: Align component to the left.
-* `Container--alignRight`: Align component to the right.
-
-
-## Configurable variables
-
-* `--Container-width`: Width of the component.
-
-
-## Usage
-
-```html
-<div class="Container">
-    <!-- child content -->
-</div>
-```

package/src/css/components/container/container.css

@@ -1,48 +0,0 @@
-/* ==========================================================================
-   Container
-   ========================================================================== */
-
-/** @define Container */
-
-/**
- * Used as a page container that will keep it's content constrained to a
- * certain width.
- */
-
-:root {
-    --Container-width: 1200px;
-}
-
-/**
- * Fluid and centered by default.
- */
-
-.Container {
-    margin-left: auto;
-    margin-right: auto;
-    max-width: var(--Container-width);
-}
-
-/**
- * Modifier: Non-fluid, fixed container
- */
-
-.Container--widthFixed {
-    width: var(--Container-width);
-}
-
-/**
- * Modifier: Position container to the left
- */
-
-.Container--alignLeft {
-    margin-left: 0;
-}
-
-/**
- * Modifier: Position container to the right
- */
-
-.Container--alignRight {
-    margin-right: 0;
-}

package/src/css/components/container/index.css

@@ -1 +0,0 @@
-@import './container';

package/src/css/components/content/index.css

@@ -1 +0,0 @@
-@import './content';

package/src/css/components/flexembed/README.md

@@ -1,65 +0,0 @@
-# FlexEmbed
-
-CSS for responsive, intrinsic ratio embeds.
-
-Basic visual tests are in [`test/modules/flexembed.html`](http://aptuitiv.github.io/cacao/test/modules/flexembed.html).
-
-
-## Available classes
-
-* `FlexEmbed`: The root node.
-* `FlexEmbed-ratio`: The element that provides the aspect ratio (1:1 by default).
-* `FlexEmbed-ratio--3by1`: The modifier class for 3:1 aspect ratio embed.
-* `FlexEmbed-ratio--2by1`: The modifier class for 2:1 aspect ratio embed,
-* `FlexEmbed-ratio--16by9`: The modifier class for 16:9 aspect ratio embed.
-* `FlexEmbed-ratio--4by3`: The modifier class for 4:3 aspect ratio embed.
-* `FlexEmbed-content`: The descendent class for the content that is being displayed.
-
-
-## Usage
-
-Example:
-
-```html
-<div class="FlexEmbed">
-  <div class="FlexEmbed-ratio FlexEmbed-ratio--16by9"></div>
-  <iframe class="FlexEmbed-content" src="..."></iframe>
-</div>
-```
-
-If the child content has a width and height of 100% you can also nest it within
-`FlexEmbed-content`.
-
-```html
-<div class="FlexEmbed">
-  <div class="FlexEmbed-ratio FlexEmbed-ratio--16by9"></div>
-  <div class="FlexEmbed-content">
-    <!-- child content -->
-  </div>
-</div>
-```
-
-You can add custom aspect ratios. For example, to create a 2.35:1 aspect
-ratio:
-
-```css
-/**
- * Modifier: 47:20 aspect ratio
- */
-
-.FlexEmbed-ratio--47by20 {
-  padding-bottom: 42.55%;
-}
-```
-
-Alternatively, aspect ratios can be calculated programmatically and the
-corresponding `padding-bottom` value applied using an inline style.
-
-```html
-<div class="FlexEmbed">
-  <div class="FlexEmbed-ratio" style="padding-bottom:{{percentage}}%"></div>
-  <div class="FlexEmbed-content">
-    <!-- child content -->
-  </div>
-</div>
-```

package/src/css/components/flexembed/flexembed.css

@@ -1,82 +0,0 @@
-/* ==========================================================================
-   FlexEmbed
-   ========================================================================== */
-
-/** @define FlexEmbed */
-
-/**
- * Responsive, intrinsic ratio embeds
- *
- * For use with media embeds – such as videos or slideshows that need to
- * retain a specific aspect ratio but adapt to the width of their containing
- * element.
- *
- * Based on: http://alistapart.com/article/creating-intrinsic-ratios-for-video
- */
-
-.FlexEmbed {
-    display: block;
-    overflow: hidden;
-    position: relative;
-}
-
-/**
- * The aspect-ratio hack is applied to an empty element because it allows
- * the component to respect `max-height`. Default aspect ratio is 1:1.
- */
-
-.FlexEmbed-ratio {
-    display: block;
-    padding-bottom: 100%;
-    width: 100%;
-}
-
-/**
- * Modifiers: aspect ratios
- */
-
-.FlexEmbed-ratio--5by4 {
-    padding-bottom: 80%;
-}
-
-.FlexEmbed-ratio--4by3 {
-    padding-bottom: 75%;
-}
-
-.FlexEmbed-ratio--3by2 {
-    padding-bottom: 66.66667%;
-}
-
-.FlexEmbed-ratio--8by5,
-.FlexEmbed-ratio--16by10 {
-    padding-bottom: 62.5%;
-}
-
-.FlexEmbed-ratio--5by3 {
-    padding-bottom: 60%;
-}
-
-.FlexEmbed-ratio--16by9 {
-    padding-bottom: 56.25%;
-}
-
-.FlexEmbed-ratio--2by1 {
-    padding-bottom: 50%;
-}
-
-.FlexEmbed-ratio--3by1 {
-    padding-bottom: 33.333333%;
-}
-
-/**
- * Fit the content to the aspect ratio
- */
-
-.FlexEmbed-content {
-    bottom: 0;
-    height: 100%;
-    left: 0;
-    position: absolute;
-    top: 0;
-    width: 100%;
-}

package/src/css/components/flexembed/index.css

@@ -1 +0,0 @@
-@import './flexembed';

package/src/css/components/footer/index.css

@@ -1 +0,0 @@
-@import './footer';

package/src/css/components/form/error.css

@@ -1,21 +0,0 @@
-/* =========================================================================== *\
-    FORM ERROR MESSAGE
-\* =========================================================================== */
-
-/** @define FormError */
-
-.FormError {
-    background: #da3e37;
-    border-radius: 4px;
-    color: #fff;
-    margin-bottom: 30px;
-    padding: 20px;
-}
-
-.FormError-list {
-
-}
-
-.FormError-listItem {
-    margin: 6px 10px;
-}

package/src/css/components/form/index.css

@@ -1,6 +0,0 @@
-@import './error.css';
-@import './label.css';
-@import './required.css';
-@import './selectmenu.css';
-@import './success.css';
-@import './textinput.css';

package/src/css/components/form/selectmenu.css

@@ -1,92 +0,0 @@
-/* ==========================================================================
-   SelectInput
-   ========================================================================== */
-
-/** @define SelectInput; weak */
-
-/**
- * Provides custom styles for select menu input fields.
- * Any <select> that is a child of a `.SelectInput` element will be styled.
- */
-
-:root {
-    --SelectInput-background: #fff;
-    --SelectInput-border: 1px solid #777;
-    --SelectInput-color: inherit;
-    --SelectInput-errorColor: #f00;
-    --SelectInput-successColor: #0f0;
-}
-
-/**
- * Field wrapper that theme is applied to
- */
-
-.SelectInput {
-    background: var(--SelectInput-background);
-    border: var(--SelectInput-border);
-    color: var(--SelectInput-color);
-    display: inline-block;
-    outline: none;
-    position: relative;
-}
-
-/**
- * Dropdown arrow element
- */
-
-.SelectInput::before {
-    background: none;
-    border: 6px solid;
-    border-color: #777 transparent transparent transparent;
-    content: '';
-    height: 0;
-    padding: 0;
-    position: absolute;
-    right: .6rem;
-    top: 50%;
-    transform: translateY(-25%);
-    width: 0;
-}
-
-/**
- * 1. Select input reset
- * 2. Appear above the `.SelectInput::before` element to allow for clicking.
- */
-
-.SelectInput > select {
-    appearance: none; /* 1 */
-    background: transparent; /* 1 */
-    border: 0; /* 1 */
-    display: block;
-    font-family: inherit;
-    margin: 0; /* 1 */
-    outline: 0; /* 1 */
-    padding: 0 2.3rem 0 .35rem;
-    position: relative; /* 2 */
-    width: 100%;
-}
-
-/**
- * If you set a specific color for the select text above then
- * some browsers (Chrome on Windows) will keep that select color. That could
- * be problematic if you set the text color to white. This sets the text color back
- * to a readable color when the field has focus.
- */
-
-.SelectInput > select:focus {
-    color: #333;
-}
-
-/**
- * UI states
- */
-
-.SelectInput.is-invalid {
-    color: var(--SelectInput-errorColor);
-    outline: 1px solid var(--SelectInput-errorColor);
-}
-
-.SelectInput.is-valid {
-    color: var(--SelectInput-successColor);
-    outline: 1px solid var(--SelectInput-successColor);
-}

package/src/css/components/form/textinput.css

@@ -1,60 +0,0 @@
-/* ==========================================================================
-   TextInput
-   ========================================================================== */
-
-/** @define TextInput */
-
-/**
- * Provides custom styling for text input fields and textareas
- */
-
-:root {
-    --TextInput-background: #fff;
-    --TextInput-border: 1px solid #777;
-    --TextInput-padding: .25em .5em;
-    --TextInput-color: inherit;
-    --TextInput-errorColor: #f00;
-    --TextInput-successColor: #0f0;
-}
-
-.TextInput {
-    background: var(--TextInput-background);
-    border: var(--TextInput-border);
-    border-radius: 0;
-    color: var(--TextInput-color);
-    outline: none;
-    padding: var(--TextInput-padding);
-}
-
-/**
- * UI states
- */
-
-.TextInput.is-invalid {
-    color: var(--TextInput-errorColor);
-    outline: 1px solid var(--TextInput-errorColor);
-}
-
-.TextInput.is-valid {
-    color: var(--TextInput-successColor);
-    outline: 1px solid var(--TextInput-successColor);
-}
-
-/**
- * Sizes
- */
-
-/* postcss-bem-linter: ignore */
-.TextInput.small {
-    width: 40%;
-}
-
-/* postcss-bem-linter: ignore */
-.TextInput.medium {
-    width: 60%;
-}
-
-/* postcss-bem-linter: ignore */
-.TextInput.large {
-    width: 100%;
-}