cacao-css 3.20.0 → 4.0.0

package/src/css/utils/flex/flex.css

@@ -1,253 +0,0 @@
-/* ==========================================================================
-   Flex utilities
-   ========================================================================== */
-
-/** @define utilities */
-
-/* Applies to flex container
-   ========================================================================== */
-
-/**
- * Container
- */
-
-.u-flex {
-    display: flex !important;
-}
-
-.u-flexInline {
-    display: inline-flex !important;
-}
-
-/**
- * Direction: row
- */
-
-.u-flexRow {
-    flex-direction: row !important;
-}
-
-.u-flexRowReverse {
-    flex-direction: row-reverse !important;
-}
-
-/**
- * Direction: column
- */
-
-.u-flexCol {
-    flex-direction: column !important;
-}
-
-.u-flexColReverse {
-    flex-direction: column-reverse !important;
-}
-
-/**
- * Wrap
- */
-
-.u-flexWrap {
-    flex-wrap: wrap !important;
-}
-
-.u-flexNoWrap {
-    flex-wrap: nowrap !important;
-}
-
-.u-flexWrapReverse {
-    flex-wrap: wrap-reverse !important;
-}
-
-/**
- * Align items along the main axis of the current line of the flex container
- */
-
-.u-flexJustifyStart {
-    justify-content: flex-start !important;
-}
-
-.u-flexJustifyEnd {
-    justify-content: flex-end !important;
-}
-
-.u-flexJustifyCenter {
-    justify-content: center !important;
-}
-
-.u-flexJustifyBetween {
-    justify-content: space-between !important;
-}
-
-.u-flexJustifyAround {
-    justify-content: space-around !important;
-}
-
-/**
- * Align items in the cross axis of the current line of the flex container
- * Similar to `justify-content` but in the perpendicular direction
- */
-
-.u-flexAlignItemsStart {
-    align-items: flex-start !important;
-}
-
-.u-flexAlignItemsEnd {
-    align-items: flex-end !important;
-}
-
-.u-flexAlignItemsCenter {
-    align-items: center !important;
-}
-
-.u-flexAlignItemsStretch {
-    align-items: stretch !important;
-}
-
-.u-flexAlignItemsBaseline {
-    align-items: baseline !important;
-}
-
-/**
- * Aligns items within the flex container when there is extra space in the
- * cross-axis
- *
- * Has no effect when there is only one line of flex items.
- */
-
-.u-flexAlignContentStart {
-    align-content: flex-start !important;
-}
-
-.u-flexAlignContentEnd {
-    align-content: flex-end !important;
-}
-
-.u-flexAlignContentCenter {
-    align-content: center !important;
-}
-
-.u-flexAlignContentStretch {
-    align-content: stretch !important;
-}
-
-.u-flexAlignContentBetween {
-    align-content: space-between !important;
-}
-
-.u-flexAlignContentAround {
-    align-content: space-around !important;
-}
-
-/**
- * 1. Set the flex-shrink default explicitly to fix IE10 - http://git.io/vllC7
- */
-
-/* postcss-bem-linter: ignore */
-
-.u-flex > *,
-.u-flexInline > * {
-    flex-shrink: 1; /* 1 */
-}
-
-/* Applies to flex items
-   ========================================================================== */
-
-/**
- * Override default alignment of single item when specified by `align-items`
- */
-
-.u-flexAlignSelfStart {
-    align-self: flex-start !important;
-}
-
-.u-flexAlignSelfEnd {
-    align-self: flex-end !important;
-}
-
-.u-flexAlignSelfCenter {
-    align-self: center !important;
-}
-
-.u-flexAlignSelfStretch {
-    align-self: stretch !important;
-}
-
-.u-flexAlignSelfBaseline {
-    align-self: baseline !important;
-}
-
-.u-flexAlignSelfAuto {
-    align-self: auto !important;
-}
-
-/**
- * Change order without editing underlying HTML
- */
-
-.u-flexOrderFirst {
-    order: -1 !important;
-}
-
-.u-flexOrderLast {
-    order: 1 !important;
-}
-
-.u-flexOrderNone {
-    order: 0 !important;
-}
-
-/**
- * Specify the flex grow factor, which determines how much the flex item will
- * grow relative to the rest of the flex items in the flex container.
- *
- * Supports 1-5 proportions
- *
- * 1. Provide all values to avoid IE10 bug with shorthand flex
- *    http://git.io/vllC7
- */
-
-.u-flexGrow1 {
-    flex: 1 1 auto !important; /* 1 */
-}
-
-.u-flexGrow2 {
-    flex: 2 1 auto !important;
-}
-
-.u-flexGrow3 {
-    flex: 3 1 auto !important;
-}
-
-.u-flexGrow4 {
-    flex: 4 1 auto !important;
-}
-
-.u-flexGrow5 {
-    flex: 5 1 auto !important;
-}
-
-/**
- * Aligning with `auto` margins
- * http://www.w3.org/TR/css-flexbox-1/#auto-margins
- */
-
-.u-flexExpand {
-    margin: auto !important;
-}
-
-.u-flexExpandLeft {
-    margin-left: auto !important;
-}
-
-.u-flexExpandRight {
-    margin-right: auto !important;
-}
-
-.u-flexExpandTop {
-    margin-top: auto !important;
-}
-
-.u-flexExpandBottom {
-    margin-bottom: auto !important;
-}

package/src/css/utils/flex/index.css

@@ -1,2 +0,0 @@
-@import './flex';
-@import './flex-responsive.css';

package/src/css/utils/image/image.css

@@ -1,27 +0,0 @@
-/* ==========================================================================
-   Image utilities
-   ========================================================================== */
-
-/** @define utilities */
-
-/**
- * Make an image shrink to the width of it's containing element if the element
- * is smaller than the image's original width.
- */
-
-.u-img {
-    height: auto !important;
-    max-width: 100% !important;
-}
-
-/**
- * Make an image scale to the width of it's containing element regardless of
- * the image's original width.
- */
-
-.u-imgFull {
-    display: block !important;
-    height: auto !important;
-    width: 100% !important;
-}
-

package/src/css/utils/image/index.css

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

package/src/css/utils/index.css

@@ -1,16 +0,0 @@
-@import './align';
-@import './background';
-@import './content';
-@import './display';
-@import './flex';
-@import './image';
-@import './layout';
-@import './link';
-@import './margin';
-@import './padding';
-@import './position';
-@import './pull';
-@import './push';
-@import './radius';
-@import './size';
-@import './typography';

package/src/css/utils/layout/index.css

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

package/src/css/utils/layout/layout.css

@@ -1,71 +0,0 @@
-/* ==========================================================================
-   Layout utilities
-   ========================================================================== */
-
-/** @define utilities */
-
-/**
- * Clearfix
- *
- * Applied to elements to allow their heights to 'clear' or contain floats.
- * http://nicolasgallagher.com/micro-clearfix-hack/
- *
- * 1. The space content is one way to avoid an Opera bug when the
- *    contenteditable attribute is included anywhere else in the document.
- *    Otherwise it causes space to appear at the top and bottom of elements
- *    that are clearfixed.
- * 2. The use of `table` rather than `block` is only necessary if using
- *    `:before` to contain the top-margins of child elements.
- */
-
-.u-cf::before,
-.u-cf::after {
-    content: ' ' !important; /* 1 */
-    display: table !important; /* 2 */
-}
-
-.u-cf::after {
-    clear: both !important;
-}
-
-/**
- * Float positioning
- */
-
-.u-floatLeft {
-    float: left !important;
-}
-
-.u-floatRight {
-    float: right !important;
-}
-
-/**
- * New block formatting context
- *
- * This affords some useful properties to the element. It won't wrap under
- * floats. Will also contain any floated children.
- * N.B. This will clip overflow. Use the alternative method below if this is
- * problematic.
- */
-
-.u-nbfc {
-    overflow: hidden !important;
-}
-
-/**
- * New block formatting context (alternative)
- *
- * Alternative method when overflow must not be clipped.
- *
- * 1. Create a new block formatting context (NBFC).
- * 2. Avoid shrink-wrap behaviour of table-cell.
- *
- * N.B. This breaks down in some browsers when elements within this element
- * exceed its width.
- */
-
-.u-nbfcAlt {
-    display: table-cell !important; /* 1 */
-    width: 10000px !important; /* 2 */
-}

package/src/css/utils/link/index.css

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

package/src/css/utils/link/link.css

@@ -1,95 +0,0 @@
-/* ==========================================================================
-   Link utilities
-   ========================================================================== */
-
-/** @define utilities */
-
-/**
- * Clean links
- * Reset all link styles
- */
-
-@media (hover: hover) and (pointer: fine) {
-    .u-linkClean:hover {
-        color: inherit !important;
-        text-decoration: none !important;
-    }
-}
-
-.u-linkClean,
-.u-linkClean:focus-visible {
-    color: inherit !important;
-    text-decoration: none !important;
-}
-
-/**
- * Obvious links
- * Ensure the link has an underline in order to standout as an obvious link.
- */
-
-.u-linkObvious {
-    text-decoration: underline !important;
-}
-
-/**
- * Natural links
- * Link will inherit the text color of it's parent but will have an underline
- * to standout as an obvious link.
- */
-
-.u-linkNatural {
-    color: inherit !important;
-    text-decoration: underline !important;
-}
-
-/**
- * Subtle links
- * Similar to a natural link but the underline is only shown on hover.
- */
-
-.u-linkSubtle {
-    color: inherit !important;
-    text-decoration: none !important;
-}
-
-@media (hover: hover) and (pointer: fine) {
-    .u-linkSubtle:hover {
-        text-decoration: underline !important;
-    }
-}
-
-/**
- * Link complex
- *
- * A common pattern is to have a link with several pieces of text and/or an
- * icon, where only one piece of text should display the underline when the
- * link is the subject of user interaction.
- *
- * Example HTML:
- *
- * <a class="u-linkComplex" href="#">
- *   Link complex
- *   <span class="u-linkComplexTarget">target</span>
- * </a>
- */
-
-@media (hover: hover) and (pointer: fine) {
-    .u-linkComplex:hover {
-        text-decoration: none !important;
-    }
-}
-
-.u-linkComplex,
-.u-linkComplex:focus-visible {
-    text-decoration: none !important;
-}
-
-@media (hover: hover) and (pointer: fine) {
-    .u-linkComplex:hover .u-linkComplexTarget {
-        text-decoration: underline !important;
-    }
-}
-
-.u-linkComplex:focus-visible .u-linkComplexTarget {
-    text-decoration: underline !important;
-}

package/src/css/utils/margin/gutters.css

@@ -1,120 +0,0 @@
-/* ==========================================================================
-   Gutter utilities
-   ========================================================================== */
-
-/** @define utilities */
-
-/**
- * Add side gutters of various sizes. Difference with the padding gutters is that this
- * uses margins instead of padding
- */
-
-:root {
-    --utils-margin-gutter: 10px;
-}
-
-.u-guttersMarg0 {
-    margin-left: 0 !important;
-    margin-right: 0 !important;
-}
-
-.u-guttersMarg1 {
-    margin-left: var(--utils-margin-gutter) !important;
-    margin-right: var(--utils-margin-gutter) !important;
-}
-
-.u-guttersMarg2 {
-    margin-left: calc(var(--utils-margin-gutter) * 2) !important;
-    margin-right: calc(var(--utils-margin-gutter) * 2) !important;
-}
-
-.u-guttersMarg3 {
-    margin-left: calc(var(--utils-margin-gutter) * 3) !important;
-    margin-right: calc(var(--utils-margin-gutter) * 3) !important;
-}
-
-.u-guttersMarg4 {
-    margin-left: calc(var(--utils-margin-gutter) * 4) !important;
-    margin-right: calc(var(--utils-margin-gutter) * 4) !important;
-}
-
-@media (--c-bp-lg) {
-    .u-lg-guttersMarg0 {
-        margin-left: 0 !important;
-        margin-right: 0 !important;
-    }
-
-    .u-lg-guttersMarg1 {
-        margin-left: var(--utils-margin-gutter) !important;
-        margin-right: var(--utils-margin-gutter) !important;
-    }
-
-    .u-lg-guttersMarg2 {
-        margin-left: calc(var(--utils-margin-gutter) * 2) !important;
-        margin-right: calc(var(--utils-margin-gutter) * 2) !important;
-    }
-
-    .u-lg-guttersMarg3 {
-        margin-left: calc(var(--utils-margin-gutter) * 3) !important;
-        margin-right: calc(var(--utils-margin-gutter) * 3) !important;
-    }
-
-    .u-lg-guttersMarg4 {
-        margin-left: calc(var(--utils-margin-gutter) * 4) !important;
-        margin-right: calc(var(--utils-margin-gutter) * 4) !important;
-    }
-}
-
-@media (--c-bp-md) {
-    .u-md-guttersMarg0 {
-        margin-left: 0 !important;
-        margin-right: 0 !important;
-    }
-
-    .u-md-guttersMarg1 {
-        margin-left: var(--utils-margin-gutter) !important;
-        margin-right: var(--utils-margin-gutter) !important;
-    }
-
-    .u-md-guttersMarg2 {
-        margin-left: calc(var(--utils-margin-gutter) * 2) !important;
-        margin-right: calc(var(--utils-margin-gutter) * 2) !important;
-    }
-
-    .u-md-guttersMarg3 {
-        margin-left: calc(var(--utils-margin-gutter) * 3) !important;
-        margin-right: calc(var(--utils-margin-gutter) * 3) !important;
-    }
-
-    .u-md-guttersMarg4 {
-        margin-left: calc(var(--utils-margin-gutter) * 4) !important;
-        margin-right: calc(var(--utils-margin-gutter) * 4) !important;
-    }
-}
-
-@media (--c-bp-sm) {
-    .u-sm-guttersMarg0 {
-        margin-left: 0 !important;
-        margin-right: 0 !important;
-    }
-
-    .u-sm-guttersMarg1 {
-        margin-left: var(--utils-margin-gutter) !important;
-        margin-right: var(--utils-margin-gutter) !important;
-    }
-
-    .u-sm-guttersMarg2 {
-        margin-left: calc(var(--utils-margin-gutter) * 2) !important;
-        margin-right: calc(var(--utils-margin-gutter) * 2) !important;
-    }
-
-    .u-sm-guttersMarg3 {
-        margin-left: calc(var(--utils-margin-gutter) * 3) !important;
-        margin-right: calc(var(--utils-margin-gutter) * 3) !important;
-    }
-
-    .u-sm-guttersMarg4 {
-        margin-left: calc(var(--utils-margin-gutter) * 4) !important;
-        margin-right: calc(var(--utils-margin-gutter) * 4) !important;
-    }
-}

package/src/css/utils/margin/index.css

@@ -1,21 +0,0 @@
-@import './gutters';
-@import './marg-bottom';
-@import './marg-bottom-lg';
-@import './marg-bottom-md';
-@import './marg-bottom-sm';
-@import './marg-top';
-@import './marg-top-lg';
-@import './marg-top-md';
-@import './marg-top-sm';
-@import './marg-right';
-@import './marg-right-lg';
-@import './marg-right-md';
-@import './marg-right-sm';
-@import './marg-left';
-@import './marg-left-lg';
-@import './marg-left-md';
-@import './marg-left-sm';
-@import './spaced';
-@import './spaced-lg';
-@import './spaced-md';
-@import './spaced-sm';

package/src/css/utils/margin/marg-bottom-lg.css

@@ -1,35 +0,0 @@
-/* ==========================================================================
-   Bottom margin utilities
-   ========================================================================== */
-
-/** @define utilities */
-
-:root {
-    --utils-margin-lg-bottom: 10px;
-}
-
-@media (--c-bp-lg) {
-    .u-lg-margBottom0 {
-        margin-bottom: 0 !important;
-    }
-
-    .u-lg-margBottom1 {
-        margin-bottom: var(--utils-margin-lg-bottom) !important;
-    }
-
-    .u-lg-margBottom2 {
-        margin-bottom: calc(var(--utils-margin-lg-bottom) * 2) !important;
-    }
-
-    .u-lg-margBottom3 {
-        margin-bottom: calc(var(--utils-margin-lg-bottom) * 3) !important;
-    }
-
-    .u-lg-margBottom4 {
-        margin-bottom: calc(var(--utils-margin-lg-bottom) * 4) !important;
-    }
-
-    .u-lg-margBottom5 {
-        margin-bottom: calc(var(--utils-margin-lg-bottom) * 5) !important;
-    }
-}

package/src/css/utils/margin/marg-bottom-md.css

@@ -1,35 +0,0 @@
-/* ==========================================================================
-   Bottom margin utilities
-   ========================================================================== */
-
-/** @define utilities */
-
-:root {
-    --utils-margin-md-bottom: 10px;
-}
-
-@media (--c-bp-md) {
-    .u-md-margBottom0 {
-        margin-bottom: 0 !important;
-    }
-
-    .u-md-margBottom1 {
-        margin-bottom: var(--utils-margin-md-bottom) !important;
-    }
-
-    .u-md-margBottom2 {
-        margin-bottom: calc(var(--utils-margin-md-bottom) * 2) !important;
-    }
-
-    .u-md-margBottom3 {
-        margin-bottom: calc(var(--utils-margin-md-bottom) * 3) !important;
-    }
-
-    .u-md-margBottom4 {
-        margin-bottom: calc(var(--utils-margin-md-bottom) * 4) !important;
-    }
-
-    .u-md-margBottom5 {
-        margin-bottom: calc(var(--utils-margin-md-bottom) * 5) !important;
-    }
-}