Common components such as navigation and breadcrumb and pagination.

mixin-navigation.scss

//
// e.g.
//
// .main-navigation {
//     @include nav(fill);
//     > li {
//         @include nav__item(fill);
//         > a {
//             @include nav__link(fill, 12px);
//         }
//     }
// }
//
// .main-navigation {
//     display: table;
//     width: 100%;
//     padding-left: 0;
//     line-height: 1;
//     table-layout: fixed;
//     text-align: center;
// }
// .main-navigation > li {
//     display: table-cell;
// }
// .main-navigation > li > a {
//     display: block;
//     padding: 12px;
// }
//
@mixin nav($type) {
    padding-left: 0;
    @if $type == inline {
        list-style-type: none;
    }
    @if $type == centered {
        list-style-type: none;
        text-align: center;
    }
    @if $type == stacked {
        list-style-type: none;
    }
    @if $type == block {
      display: block;
        font-size: 0;
        line-height: 1;
    }
    @if $type == fill {
        display: table;
        width: 100%;
        line-height: 1;
        table-layout: fixed;
        text-align: center;
    }
}

@mixin nav__item($type) {
    @if $type == inline {
        display: inline-block;
    }
    @if $type == centered {
        display: inline-block;
    }
    @if $type == stacked {
    }
    @if $type == block {
        display: inline-block;
        font-size: 1rem;
    }
    @if $type == fill {
        display: table-cell;
    }
}

@mixin nav__link($type, $value: null) {
    @if $type == inline {
        display: inline-block;
        padding: $value;
    }
    @if $type == centered {
        display: inline-block;
        padding: $value;
    }
    @if $type == stacked {
        display: block;
        padding: $value;
    }
    @if $type == block {
        display: inline-block;
        padding: $value;
    }
    @if $type == fill {
        display: block;
        padding: $value;
    }
}


// e.g.
//
// .breadcrumb {
//     @include breadcrumb;
//     &__item {
//         @include breadcrumb__item;
//         @include breadcrumb__sep(arrow, single);
//     }
//     &__link {
//         @include breadcrumb__link;
//     }
// }
//
// .breadcrumb {
//     padding-left: 0;
//     list-style-type: none;
// }
// .breadcrumb__item {
//     display: inline-block;
// }
// .breadcrumb__item + .breadcrumb__item:before {
//     content: "\003E" "\00A0";
// }
// .breadcrumb__link {
//     display: inline-block;
// }
//
@mixin breadcrumb() {
    padding-left: 0;
    list-style-type: none;
}

@mixin breadcrumb__item() {
    display: inline-block;
}

@mixin breadcrumb__link($value: null) {
    display: inline-block;
    padding: $value;
}

@mixin breadcrumb__sep($type: arrow, $option: single) {
    @if $type == arrow {
        @if $option == single {
            & + &:before {
                content: '\003E' '\00A0';
            }
        }
        @if $option == double {
            & + &:before {
                content: '\00BB' "\00A0";
            }
        }
    }
    @if $type == slash {
        & + &:before {
            content: '\002F' '\00A0';
        }
    }
    @if $type == pipe {
        & + &:before {
            content: '\006C' '\00A0';
        }
    }
}


// e.g.
//
// .pagination {
//     @include pagination;
//     &__item {
//         @include pagination__item(1rem);
//         &--prev {
//             @include pagination__icon(prev, single);
//         }
//         &--next {
//             @include pagination__icon(next, single);
//         }
//     }
//     &__link {
//         @include pagination__link(1rem);
//     }
// }
//
// .pagination {
//     padding-left: 0;
//     font-size: 0;
//     line-height: 1;
//     text-align: center;
// }
// .pagination__item {
//     display: inline-block;
//     padding: 1rem;
//     font-size: 1rem;
// }
// .pagination__item--prev a:before {
//     content: "\003C" "\00A0";
// }
// .pagination__item--next a:after {
//     content: "\00A0" "\003E";
// }
// .pagination__link {
//     display: inline-block;
//     margin: -1rem;
//     padding: 1rem;
// }
//
@mixin pagination() {
    padding-left: 0;
    font-size: 0;
    line-height: 1;
    text-align: center;
}

@mixin pagination__item($value: 1rem) {
    display: inline-block;
    padding: $value;
    font-size: 1rem;
}

@mixin pagination__link($value: 1rem) {
    display: inline-block;
    margin: - $value;
    padding: $value;
}

@mixin pagination__icon($type: null, $option: single) {
    @if $option == single {
        @if $type == prev {
            & a:before {
                content: '\003C' '\00A0';
            }
        }
        @if $type == next {
            & a:after {
                content: '\00A0' '\003E';
            }
        }
    }
    @if $option == double {
        @if $type == prev {
            & a:before {
                content: '\00AB' '\00A0';
            }
        }
        @if $type == next {
            & a:after {
                content: '\00A0' '\00BB';
            }
        }
    }
}