cacao-css 3.21.0 → 4.1.0

package/src/css/components/navigation/footer.css

@@ -1,59 +0,0 @@
-/* =========================================================================== *\
-    Footer Navigation
-\* =========================================================================== */
-
-
-
-/** @define FooterNav */
-
-:root {
-    --FooterNav-fontSize: 15px;
-    --FooterNav-lineHeight: 1;
-    --FooterNav-link-color: #333;
-    --FooterNav-link-colorHover: #000;
-}
-
-/**
- * Base menu
- */
-
-.FooterNav {
-    display: inline-block;
-    font-size: var(--FooterNav-fontSize);
-    line-height: var(--FooterNav-lineHeight);
-    list-style: none;
-    margin: 0;
-    padding: 0;
-}
-
-/**
- * Items
- */
-
-.FooterNav-item {
-    border-left: 1px solid var(--FooterNav-link-color);
-    display: inline-block;
-    padding: 0 20px;
-}
-
-.FooterNav-item:first-child {
-    border-left: none;
-    margin-left: 0;
-}
-
-/**
- * Links
- */
-
-.FooterNav-link {
-    color: var(--FooterNav-link-color);
-    display: block;
-    text-decoration: none;
-}
-
-@media (hover: hover) and (pointer: fine) {
-    .FooterNav-link:hover {
-        color: var(--FooterNav-link-colorHover);
-        text-decoration: underline;
-    }
-}

package/src/css/components/navigation/index.css

@@ -1,7 +0,0 @@
-@import './bar';
-@import './dropdown';
-@import './footer';
-@import './mainnav';
-@import './responsive-pushdown';
-@import './sidebar';
-@import './small-screen-button';

package/src/css/components/navigation/mainnav.css

@@ -1,73 +0,0 @@
-/* ==========================================================================
-   Main Navigation
-   ========================================================================== */
-
-/** @define MainNav */
-
-:root {
-    --MainNav-fontFamily: inherit;
-    --MainNav-fontSize: 15px;
-    --MainNav-lineHeight: 1.5;
-    --MainNav-link-background: transparent;
-    --MainNav-link-backgroundHover: transparent;
-    --MainNav-link-color: #333;
-    --MainNav-link-colorHover: #000;
-}
-
-/**
- * Base menu
- */
-
-.MainNav {
-    display: inline-block;
-    font-family: var(--MainNav-fontFamily);
-    font-size: var(--MainNav-fontSize);
-    line-height: var(--MainNav-lineHeight);
-    list-style: none;
-    margin: 0 0 0 -1em;
-    padding: 0;
-}
-
-/**
- * Items
- */
-
-.MainNav-item {
-    display: inline-block;
-    margin-left: 1em;
-}
-
-/** Item that should only be shown in the small screen navigation **/
-
-.MainNav-item--smallScreen {
-    display: none;
-}
-
-@media (--c-bp-smallScreenNav) {
-    .MainNav-item--smallScreen {
-        display: block;
-    }
-}
-
-/**
- * Links
- */
-
-.MainNav-link {
-    background: var(--MainNav-link-background);
-    color: var(--MainNav-link-color);
-    display: block;
-    padding: .5em 1.5rem;
-    position: relative;
-    text-decoration: none;
-}
-
-@media (--c-bp-largeScreenNav) {
-    .MainNav-item.is-current > .MainNav-link,
-    .MainNav-item.is-currentParent > .MainNav-link,
-    .MainNav-item:hover > .MainNav-link {
-        background: var(--MainNav-link-backgroundHover);
-        color: var(--MainNav-link-colorHover);
-        text-decoration: none;
-    }
-}

package/src/css/components/navigation/responsive-overlay.css

@@ -1,129 +0,0 @@
-/* =========================================================================== *\
-    Responsive navigation style that when expanded overlays the contents of
-    the page.
-    This will override certain styles for mainnav.css and dropdown.css for
-    smaller screens.
-\* =========================================================================== */
-
-
-@media (--c-bp-smallScreenNav) {
-
-    /**
-     * Main Navigation
-     */
-
-    .MainNav {
-        background: #ddd;
-        display: none;
-        font-size: var(--MainNav-fontSize);
-        height: 300px;
-        left: 0;
-        margin: 0;
-        overflow: auto;
-        position: absolute;
-        top: 0;
-        width: 100%;
-    }
-
-    .MainNav-item {
-        border-right: none;
-        display: block;
-        flex: 0 0 auto;
-        text-align: left;
-    }
-
-    .MainNav-link {
-        display: block;
-    }
-
-    .MainNav-link.is-dropdown::after {
-        border: 5px solid transparent;
-        border-left-color: #fff;
-        content: '';
-        display: block;
-        opacity: .7;
-        position: absolute;
-        right: 10px;
-        top: 50%;
-        transform: translateY(-50%);
-    }
-
-    .MainNav-link.is-dropdown.is-active::after {
-        right: 13px;
-        top: 60%;
-        transform: translateY(-50%) rotate(90deg);
-    }
-
-    @media (hover: hover) and (pointer: fine) {
-        .MainNav-link:hover {
-            background: rgba(0, 0, 0, .1);
-            color: inherit;
-            text-decoration: none;
-        }
-    }
-
-    .MainNav-link.is-active,
-    .MainNav-link:focus-visible {
-        background: rgba(0, 0, 0, .1);
-        color: inherit;
-        text-decoration: none;
-    }
-
-    /**
-     * Dropdown
-     */
-
-    .Dropdown-menu {
-        box-shadow: none;
-        position: relative;
-        top: auto;
-    }
-
-    .Dropdown.is-active > .Dropdown-menu,
-    .Dropdown-item.is-active > .Dropdown-menu {
-        display: block;
-    }
-
-    .Dropdown-item {
-        padding-left: 15px;
-    }
-
-    .Dropdown-link {
-        border: none;
-        padding: var(--Dropdown-item-padding-small-screen);
-        white-space: normal;
-    }
-
-    @media (hover: hover) and (pointer: fine) {
-        .Dropdown-link:hover {
-            color: var(--Dropdown-link-color);
-            text-decoration: none;
-        }
-    }
-
-    .Dropdown-link:focus-visible {
-        color: var(--Dropdown-link-color);
-        text-decoration: none;
-    }
-
-    @media (hover: hover) and (pointer: fine) {
-        .Dropdown-link--parent:hover {
-            background: rgba(0, 0, 0, .1);
-            color: inherit;
-            text-decoration: none;
-        }
-    }
-
-    .Dropdown-link--parent.is-active,
-    .Dropdown-link--parent:focus-visible,
-    .Dropdown-link--parent.is-active + .Dropdown-menu {
-        background: rgba(0, 0, 0, .1);
-        color: inherit;
-        text-decoration: none;
-    }
-
-    .Dropdown-link--parent.is-active::before {
-        right: 19px;
-        transform-origin: 0 50%;
-    }
-}

package/src/css/components/navigation/responsive-pushdown.css

@@ -1,131 +0,0 @@
-/* =========================================================================== *\
-    Responsive navigation style that when expanded pushes down the contents of
-    the page.
-    This will override certain styles for mainnav.css and dropdown.css for
-    smaller screens.
-\* =========================================================================== */
-
-
-@media (--c-bp-smallScreenNav) {
-
-    /**
-     * Main Navigation
-     */
-
-    .MainNav {
-        display: none;
-        font-size: var(--MainNav-fontSize);
-        margin: 0;
-    }
-
-    .MainNav-item {
-        border-right: none;
-        display: block;
-        flex: 0 0 auto;
-        text-align: left;
-    }
-
-    .MainNav-item:first-child {
-        padding-top: 10px;
-    }
-
-    .MainNav-item:last-child {
-        padding-bottom: 10px;
-    }
-
-    .MainNav-link {
-        display: block;
-        padding: .8em 1.5rem;
-    }
-
-    .MainNav-link.is-dropdown::after {
-        border: 5px solid transparent;
-        border-left-color: #fff;
-        content: '';
-        display: block;
-        opacity: .7;
-        position: absolute;
-        right: 10px;
-        top: 50%;
-        transform: translateY(-50%);
-    }
-
-    .MainNav-link.is-dropdown.is-active::after {
-        right: 13px;
-        top: 60%;
-        transform: translateY(-50%) rotate(90deg);
-    }
-
-    @media (hover: hover) and (pointer: fine) {
-        .MainNav-link:hover {
-            background: rgba(0, 0, 0, .1);
-            color: inherit;
-            text-decoration: none;
-        }
-    }
-
-    .MainNav-link.is-active,
-    .MainNav-link:focus-visible {
-        background: rgba(0, 0, 0, .1);
-        color: inherit;
-        text-decoration: none;
-    }
-
-    /**
-     * Dropdown
-     */
-
-    .Dropdown-menu {
-        box-shadow: none;
-        position: relative;
-        top: auto;
-    }
-
-    .Dropdown.is-active > .Dropdown-menu,
-    .Dropdown-item.is-active > .Dropdown-menu {
-        display: block;
-    }
-
-    .Dropdown-item {
-        padding-left: 15px;
-    }
-
-    .Dropdown-link {
-        border: none;
-        padding: var(--Dropdown-item-padding-small-screen);
-        white-space: normal;
-    }
-
-    @media (hover: hover) and (pointer: fine) {
-        .Dropdown-link:hover {
-            color: var(--Dropdown-link-color);
-            text-decoration: none;
-        }
-    }
-
-    .Dropdown-link:focus-visible {
-        color: var(--Dropdown-link-color);
-        text-decoration: none;
-    }
-
-    @media (hover: hover) and (pointer: fine) {
-        .Dropdown-link--parent:hover {
-            background: rgba(0, 0, 0, .1);
-            color: inherit;
-            text-decoration: none;
-        }
-    }
-
-    .Dropdown-link--parent.is-active,
-    .Dropdown-link--parent:focus-visible,
-    .Dropdown-link--parent.is-active + .Dropdown-menu {
-        background: rgba(0, 0, 0, .1);
-        color: inherit;
-        text-decoration: none;
-    }
-
-    .Dropdown-link--parent.is-active::before {
-        right: 19px;
-        transform-origin: 0 50%;
-    }
-}

package/src/css/components/navigation/sidebar.css

@@ -1,44 +0,0 @@
-/* =========================================================================== *\
-    SIDEBAR NAVIGATION
-\* =========================================================================== */
-
-
-/** @define SidebarNav */
-
-.SidebarNav {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-}
-
-.SidebarNav-item {
-    margin: 2px 0;
-    padding: 0;
-}
-
-.SidebarNav-link {
-    color: #333;
-    display: block;
-    font-weight: 300;
-    padding: 4px 8px;
-    position: relative;
-    text-decoration: none;
-}
-
-@media (hover: hover) and (pointer: fine) {
-    .SidebarNav-link:hover {
-        color: #333;
-        text-decoration: none;
-    }
-}
-
-.SidebarNav-link:focus-visible {
-    color: #333;
-    text-decoration: none;
-}
-
-.SidebarNav-link.is-current,
-.SidebarNav-link.is-currentParent {
-    color: #333;
-    text-decoration: none;
-}

package/src/css/components/navigation/small-screen-button.css

@@ -1,99 +0,0 @@
-/* =========================================================================== *\
-    SMALL SCREEN NAVIGATION BUTTON
-\* =========================================================================== */
-
-
-/** @define SmScBtn **/
-
-.SmScBtn {
-    background: rgba(0, 0, 0, .1);
-    border: none;
-    color: #fff;
-    display: none;
-    font-size: 16px;
-    line-height: 45px;
-    padding: 0 10px 0 18px;
-    text-align: center;
-    text-decoration: none;
-}
-
-@media (--c-bp-smallScreenNav) {
-    .SmScBtn {
-        display: inline-block;
-    }
-}
-
-@media (--c-bp-sm) {
-    .SmScBtn {
-        display: block;
-        width: 100%;
-    }
-}
-
-/* Only show hover states if supported */
-@media (hover: hover) and (pointer: fine) {
-    .SmScBtn:hover {
-        color: #fff;
-        text-decoration: none;
-    }
-}
-
-.SmScBtn:focus-visible {
-    color: #fff;
-    text-decoration: none;
-}
-
-.SmScBtn-icon {
-    bottom: 5px;
-    display: inline-block;
-    left: -7px;
-    position: relative;
-}
-
-.SmScBtn-icon,
-.SmScBtn-icon::before,
-.SmScBtn-icon::after {
-    background-color: #fff;
-    border-radius: 4px;
-    height: 2px;
-    transition-duration: .1s;
-    transition-property: all;
-    transition-timing-function: cubic-bezier(.55, .055, .675, .19);
-    width: 12px;
-}
-
-.SmScBtn-icon::before,
-.SmScBtn-icon::after {
-    content: '';
-    display: block;
-    position: absolute;
-}
-
-.SmScBtn-icon::before {
-    top: -4px;
-    transform: none;
-}
-
-.SmScBtn-icon::after {
-    bottom: -4px;
-    transform: none;
-}
-
-.SmScBtn.is-active .SmScBtn-icon {
-    transform: rotate(45deg);
-    transition-delay: .14s;
-    transition-timing-function: cubic-bezier(.215, .61, .355, 1);
-}
-
-
-.SmScBtn.is-active .SmScBtn-icon::before {
-    opacity: 0;
-    top: 0;
-    transition: top .1s ease, opacity .1s .14s ease;
-}
-
-.SmScBtn.is-active .SmScBtn-icon::after {
-    bottom: 0;
-    transform: rotate(-90deg);
-    transition: bottom .1s ease, transform .1s .14s cubic-bezier(.215, .61, .355, 1);
-}

package/src/css/components/pagination/index.css

@@ -1 +0,0 @@
-@import './pagination.css';

package/src/css/components/pagination/pagination.css

@@ -1,41 +0,0 @@
-/* =========================================================================== *\
-    PAGINATION
-\* =========================================================================== */
-
-
-/**  @define Pagination */
-
-.Pagination {
-    margin-top: 30px;
-    text-align: center;
-}
-
-.Pagination-item {
-    display: inline-block;
-    margin: 0 4px;
-    padding: 0 12px;
-    text-decoration: none;
-}
-
-@media (hover: hover) and (pointer: fine) {
-    .Pagination-item:hover {
-        background: #666;
-        color: #fff;
-        text-decoration: none;
-    }
-}
-
-.Pagination-item:focus-visible {
-    background: #666;
-    color: #fff;
-    text-decoration: none;
-}
-
-.Pagination-item--previous {
-    margin-left: 0;
-}
-
-.Pagination-item--isActive {
-    background: #333;
-    color: #fff;
-}

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

@@ -1,22 +0,0 @@
-# Triangle
-
-A simple inline CSS triangle that scales with font size. Must be used with 
-one and only one direction modifier.
-
-Basic visual tests are in [`test/modules/triangle.html`](http://aptuitiv.github.io/cacao/test/modules/triangle.html).
-
-
-## Available classes
-
-* `Triangle`: The base component.
-* `Triangle--up`: Point the triangle in the up direction.
-* `Triangle--down`: Point the triangle in the up direction.
-* `Triangle--left`: Point the triangle in the down direction.
-* `Triangle--right`: Point the triangle in the right direction.
-
-
-## Usage
-
-```html
-<p><span class="Triangle Triangle--right"></span> Lorem ipsum...</p>
-```

package/src/css/components/triangle/index.css

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

package/src/css/components/triangle/triangle.css

@@ -1,59 +0,0 @@
-/* ==========================================================================
-   Triangle
-   ========================================================================== */
-
-/** @define Triangle */
-
-/**
- * Inline triangle element
- *
- * Scales with font size and inherits parent element's foreground color.
- * Must be used with a modifier to specify direction.
- *
- * 1. Attempt to align to true vertical middle instead of middle of text.
- */
-
-.Triangle {
-    background: transparent;
-    border: 0 solid transparent;
-    display: inline-block;
-    height: 0;
-    vertical-align: -10%; /* 1 */
-    width: 0;
-}
-
-/**
- * Direction modifiers
- *
- * 1. Only apply border width if the triangle is used correctly (has at least
- *    one direction modifier).
- * 2. Translating the element by 25% in the direction it is pointing will
- *    center it.
- */
-
-.Triangle--up,
-.Triangle--down,
-.Triangle--left,
-.Triangle--right {
-    border-width: .5em; /* 1 */
-}
-
-.Triangle--up {
-    border-bottom-color: inherit;
-    transform: translateY(-25%); /* 2 */
-}
-
-.Triangle--down {
-    border-top-color: inherit;
-    transform: translateY(25%); /* 2 */
-}
-
-.Triangle--left {
-    border-right-color: inherit;
-    transform: translateX(-25%); /* 2 */
-}
-
-.Triangle--right {
-    border-left-color: inherit;
-    transform: translateX(25%); /* 2 */
-}

package/src/css/config.css

@@ -1,18 +0,0 @@
-/* =========================================================================== *\
-    GLOBAL VARIABLE CONFIGURATIONS
-\* =========================================================================== */
-
-/* ------------------------------------ *\
-    #BREAKPOINTS
-\* ------------------------------------ */
-
-@custom-media --c-bp-xl (max-width: 1200px);
-@custom-media --c-bp-lg (max-width: 1050px);
-@custom-media --c-bp-md (max-width: 800px);
-@custom-media --c-bp-sm (max-width: 600px);
-@custom-media --c-bp-xs (max-width: 425px);
-
-/* Primary navigation breakpoints */
-
-@custom-media --c-bp-smallScreenNav (max-width: 1050px);
-@custom-media --c-bp-largeScreenNav (min-width: 1051px);

package/src/css/main.css

@@ -1,4 +0,0 @@
-@import './base';
-@import './components';
-@import './utils';
-@import './config';