cacao-css 3.21.0 → 4.0.0

package/src/css/utils/size/size.css

@@ -1,182 +0,0 @@
-/* ==========================================================================
-   Size utilities
-   ========================================================================== */
-
-/** @define utilities */
-
-/* Proportional widths
-   ========================================================================== */
-
-/**
- * Specify the proportional width of an object.
- * Intentional redundancy build into each set of unit classes.
- * Supports: 2, 3, 4, 5, 6, 8, 10, 12 part
- */
-
-/* postcss-bem-linter: ignore */
-[class*='u-size'] {
-    flex-basis: auto !important; /* 1 */
-}
-
-.u-size1of12 {
-    width: calc(100% * 1 / 12) !important;
-}
-
-.u-size1of10 {
-    width: 10% !important;
-}
-
-.u-size1of8 {
-    width: 12.5% !important;
-}
-
-.u-size1of6,
-.u-size2of12 {
-    width: calc(100% * 1 / 6) !important;
-}
-
-.u-size1of5,
-.u-size2of10 {
-    width: 20% !important;
-}
-
-.u-size1of4,
-.u-size2of8,
-.u-size3of12 {
-    width: 25% !important;
-}
-
-.u-size3of10 {
-    width: 30% !important;
-}
-
-.u-size1of3,
-.u-size2of6,
-.u-size4of12 {
-    width: calc(100% * 1 / 3) !important;
-}
-
-.u-size3of8 {
-    width: 37.5% !important;
-}
-
-.u-size2of5,
-.u-size4of10 {
-    width: 40% !important;
-}
-
-.u-size5of12 {
-    width: calc(100% * 5 / 12) !important;
-}
-
-.u-size1of2,
-.u-size2of4,
-.u-size3of6,
-.u-size4of8,
-.u-size5of10,
-.u-size6of12 {
-    width: 50% !important;
-}
-
-.u-size7of12 {
-    width: calc(100% * 7 / 12) !important;
-}
-
-.u-size3of5,
-.u-size6of10 {
-    width: 60% !important;
-}
-
-.u-size5of8 {
-    width: 62.5% !important;
-}
-
-.u-size2of3,
-.u-size4of6,
-.u-size8of12 {
-    width: calc(100% * 2 / 3) !important;
-}
-
-.u-size7of10 {
-    width: 70% !important;
-}
-
-.u-size3of4,
-.u-size6of8,
-.u-size9of12 {
-    width: 75% !important;
-}
-
-.u-size4of5,
-.u-size8of10 {
-    width: 80% !important;
-}
-
-.u-size5of6,
-.u-size10of12 {
-    width: calc(100% * 5 / 6) !important;
-}
-
-.u-size7of8 {
-    width: 87.5% !important;
-}
-
-.u-size9of10 {
-    width: 90% !important;
-}
-
-.u-size11of12 {
-    width: calc(100% * 11 / 12) !important;
-}
-
-/* Intrinsic widths
-   ========================================================================== */
-
-/**
- * Make an element fill the remaining space.
- *
- * 1. Be explicit to work around IE10 bug with shorthand flex - http://git.io/vllC7
- * 2. IE10 ignores previous `flex-basis` value. Setting again here fixes - http://git.io/vllMt
- */
-
-.u-sizeFill {
-    flex: 1 1 0% !important; /* 1 */
-    flex-basis: 0% !important; /* 2 */
-}
-
-/**
- * An alternative method to make an element fill the remaining space.
- * Distributes space based on the initial width and height of the element
- *
- * http://www.w3.org/TR/css-flexbox/images/rel-vs-abs-flex.svg
- */
-
-.u-sizeFillAlt {
-    flex: 1 1 auto !important;
-    flex-basis: auto !important;
-}
-
-/**
- * Make an element the width of its parent.
- */
-
-.u-size1of1,
-.u-size12of12,
-.u-sizeFull {
-    display: block !important;
-    width: 100% !important;
-}
-
-/**
- * Size the item based on the content
- */
-
-.u-sizeAuto {
-    flex: 0 1 auto !important;
-    flex-basis: auto !important;
-}
-
-.u-sizeAutoAlt {
-    flex: 0 1 0% !important;
-    flex-basis: 0% !important;
-}

package/src/css/utils/size/width.css

@@ -1,25 +0,0 @@
-/* =========================================================================== *\
-    Width utilities
-\* =========================================================================== */
-
-.u-widthFull {
-    width: 100% !important;
-}
-
-@media (--c-bp-lg) {
-    .u-lg-widthFull {
-        width: 100% !important;
-    }
-}
-
-@media (--c-bp-md) {
-    .u-md-widthFull {
-        width: 100% !important;
-    }
-}
-
-@media (--c-bp-sm) {
-    .u-sm-widthFull {
-        width: 100% !important;
-    }
-}

package/src/css/utils/typography/index.css

@@ -1,4 +0,0 @@
-@import './typography';
-@import './typography-lg';
-@import './typography-md';
-@import './typography-sm';

package/src/css/utils/typography/typography-lg.css

@@ -1,17 +0,0 @@
-/* ==========================================================================
-   Typography utilities for large breakpoint
-   ========================================================================== */
-
-@media (--c-bp-lg) {
-    .u-lg-textLeft {
-        text-align: left !important;
-    }
-
-    .u-lg-textRight {
-        text-align: right !important;
-    }
-
-    .u-lg-textCenter {
-        text-align: center !important;
-    }
-}

package/src/css/utils/typography/typography-md.css

@@ -1,17 +0,0 @@
-/* ==========================================================================
-   Typography utilities for medium breakpoint
-   ========================================================================== */
-
-@media (--c-bp-md) {
-    .u-md-textLeft {
-        text-align: left !important;
-    }
-
-    .u-md-textRight {
-        text-align: right !important;
-    }
-
-    .u-md-textCenter {
-        text-align: center !important;
-    }
-}

package/src/css/utils/typography/typography-sm.css

@@ -1,17 +0,0 @@
-/* ==========================================================================
-   Typography utilities for small breakpoint
-   ========================================================================== */
-
-@media (--c-bp-sm) {
-    .u-sm-textLeft {
-        text-align: left !important;
-    }
-
-    .u-sm-textRight {
-        text-align: right !important;
-    }
-
-    .u-sm-textCenter {
-        text-align: center !important;
-    }
-}

package/src/css/utils/typography/typography.css

@@ -1,241 +0,0 @@
-/* ==========================================================================
-   Typography utilities
-   ========================================================================== */
-
-/** @define utilities */
-
-:root {
-    --utils-typography-fontSize-1: 12px;
-    --utils-typography-fontSize-2: 14px;
-    --utils-typography-fontSize-3: 16px;
-    --utils-typography-fontSize-4: 18px;
-    --utils-typography-fontSize-5: 20px;
-    --utils-typography-fontSize-6: 24px;
-    --utils-typography-fontSize-7: 32px;
-    --utils-typography-fontSize-8: 42px;
-    --utils-typography-fontSize-9: 48px;
-    --utils-typography-fontSize-10: 56px;
-    --utils-typography-lineHeight-1: 12px;
-    --utils-typography-lineHeight-2: 24px;
-    --utils-typography-lineHeight-3: 24px;
-    --utils-typography-lineHeight-4: 24px;
-    --utils-typography-lineHeight-5: 24px;
-    --utils-typography-lineHeight-6: 24px;
-    --utils-typography-lineHeight-7: 36px;
-    --utils-typography-lineHeight-8: 48px;
-    --utils-typography-lineHeight-9: 60px;
-    --utils-typography-lineHeight-10: 60px;
-}
-
-/* Transforms
-   ========================================================================== */
-
-.u-textUpper {
-    text-transform: uppercase !important;
-}
-
-.u-textNoTransform {
-    text-transform: none !important;
-}
-
-/* Style
-   ========================================================================== */
-
-.u-styleNone {
-    font-style: unset !important;
-}
-
-.u-styleEm {
-    font-style: italic !important;
-}
-
-/* Horizontal Alignment
-   ========================================================================== */
-
-.u-textLeft {
-    text-align: left !important;
-}
-
-.u-textRight {
-    text-align: right !important;
-}
-
-.u-textCenter {
-    text-align: center !important;
-}
-
-/* Weight
-   ========================================================================== */
-
-.u-weightNormal {
-    font-weight: 400 !important;
-}
-
-.u-weightLight {
-    font-weight: 300 !important;
-}
-
-.u-weightBold {
-    font-weight: 700 !important;
-}
-
-.u-weightLighter {
-    font-weight: lighter !important;
-}
-
-.u-weightBolder {
-    font-weight: bolder !important;
-}
-
-.u-weightLightest {
-    font-weight: 100 !important;
-}
-
-.u-weightBoldest {
-    font-weight: 900 !important;
-}
-
-/* Font Scale
-   ========================================================================== */
-
-.u-fontSize1 {
-    font-size: var(--utils-typography-fontSize-1) !important;
-    line-height: var(--utils-typography-lineHeight-1) !important;
-}
-
-.u-fontSize2 {
-    font-size: var(--utils-typography-fontSize-2) !important;
-    line-height: var(--utils-typography-lineHeight-2) !important;
-}
-
-.u-fontSize3 {
-    font-size: var(--utils-typography-fontSize-3) !important;
-    line-height: var(--utils-typography-lineHeight-3) !important;
-}
-
-.u-fontSize4 {
-    font-size: var(--utils-typography-fontSize-4) !important;
-    line-height: var(--utils-typography-lineHeight-4) !important;
-}
-
-.u-fontSize5 {
-    font-size: var(--utils-typography-fontSize-5) !important;
-    line-height: var(--utils-typography-lineHeight-5) !important;
-}
-
-.u-fontSize6 {
-    font-size: var(--utils-typography-fontSize-6) !important;
-    line-height: var(--utils-typography-lineHeight-6) !important;
-}
-
-.u-fontSize7 {
-    font-size: var(--utils-typography-fontSize-7) !important;
-    line-height: var(--utils-typography-lineHeight-7) !important;
-}
-
-.u-fontSize8 {
-    font-size: var(--utils-typography-fontSize-8) !important;
-    line-height: var(--utils-typography-lineHeight-8) !important;
-}
-
-.u-fontSize9 {
-    font-size: var(--utils-typography-fontSize-9) !important;
-    line-height: var(--utils-typography-lineHeight-9) !important;
-}
-
-.u-fontSize10 {
-    font-size: var(--utils-typography-fontSize-10) !important;
-    line-height: var(--utils-typography-lineHeight-10) !important;
-}
-
-.u-fontSizeH1 {
-    font-size: var(--base-typography-h1-fontSize) !important;
-    line-height: var(--base-typography-h1-lineHeight) !important;
-}
-
-.u-fontSizeH2 {
-    font-size: var(--base-typography-h2-fontSize) !important;
-    line-height: var(--base-typography-h2-lineHeight) !important;
-}
-
-.u-fontSizeH3 {
-    font-size: var(--base-typography-h3-fontSize) !important;
-    line-height: var(--base-typography-h3-lineHeight) !important;
-}
-
-.u-fontSizeH4 {
-    font-size: var(--base-typography-h4-fontSize) !important;
-    line-height: var(--base-typography-h4-lineHeight) !important;
-}
-
-.u-fontSizeH5 {
-    font-size: var(--base-typography-h5-fontSize) !important;
-    line-height: var(--base-typography-h5-lineHeight) !important;
-}
-
-.u-fontSizeH6 {
-    font-size: var(--base-typography-h6-fontSize) !important;
-    line-height: var(--base-typography-h6-lineHeight) !important;
-}
-
-/* Misc
-   ========================================================================== */
-
-/**
- * Inherit the ancestor's text color.
- */
-
-.u-textInheritColor {
-    color: inherit !important;
-}
-
-/**
- * Break strings when their length exceeds the width of their container.
- */
-
-.u-textBreak {
-    overflow-wrap: break-word !important;
-}
-
-/**
- * Prevent whitespace wrapping
- */
-
-.u-textNoWrap {
-    white-space: nowrap !important;
-}
-
-/**
- * Enables font kerning in all browsers.
- * http://blog.typekit.com/2014/02/05/kerning-on-the-web/
- *
- * 1. Chrome (not Windows), Firefox, Safari 6+, iOS, Android
- * 2. Chrome (not Windows), Firefox, IE 10+
- * 3. Safari 7 and future browsers
- */
-
-.u-textKern {
-    font-feature-settings: 'kern' 1; /* 2 */
-    font-kerning: normal; /* 3 */
-    text-rendering: optimizeLegibility; /* 1 */
-}
-
-/**
- * Text truncation
- *
- * Prevent text from wrapping onto multiple lines, and truncate with an
- * ellipsis.
- *
- * 1. Ensure that the node has a maximum width after which truncation can
- *    occur.
- * 2. Fix for IE 8/9 if `word-wrap: break-word` is in effect on ancestor
- *    nodes.
- */
-
-.u-textTruncate {
-    max-width: 100%; /* 1 */
-    overflow: hidden !important;
-    text-overflow: ellipsis !important;
-    white-space: nowrap !important;
-    word-wrap: normal !important; /* 2 */
-}