adding button

7 years ago · 5abba2af3d
--- a/demo/index.html
+++ b/demo/index.html
@ -45,7 +45,7 @@
        </style>
    </head>
    <body>
        <header class="header">
        <header id="header" class="header">
            <div class="container">
                <div class="grid">
                    <div class="col-12">
@ -58,7 +58,7 @@
                </div>
            </div>
        </header>
        <button class="button button--up">b</button>
        <a class="button button--up" href="#header">b</a>
        <div class="container">
            <div class="grid">
                <div class="col-2">
--- a/dest/css/crispy.css
+++ b/dest/css/crispy.css
--- a/dest/css/crispy.min.css
+++ b/dest/css/crispy.min.css
--- a/src/scss/components/_button.scss
+++ b/src/scss/components/_button.scss
@ -10,7 +10,7 @@ $crispy__button__padding: pxToEm(10px) pxToEm(25px) !default;
 $crispy__button__border: 0 !default;

 $crispy__button__up-margin: pxToEm(20px) !default;
 $crispy__button__up-padding: pxToEm(5px) !default;
 $crispy__button__up-padding: pxToEm(8px) pxToEm(13px) !default;

 $crispy__button__font-sizes: (
    'default': $crispy__body__font-size,
@ -49,6 +49,7 @@ $crispy__button__colors: (
    .button {
        position: relative;
        display: inline-block;
        text-decoration: none;

        vertical-align: middle;
        appearance: none;
@ -137,6 +138,7 @@ $crispy__button__colors: (
        background-color: $background-color;

        &:hover {
            color: $text-color;
            background-color: darken($background-color, 10%);
        }
    }
--- a/src/scss/helpers/_visibilty.scss
+++ b/src/scss/helpers/_visibilty.scss
@ -1,156 +0,0 @@
 /**
 * visibilty
 *
 *
 * @author Björn Hase
 *
 */

@mixin crispy__visibilty() {
    .hide {
        display: none;
    }

    .hide {
        &--xs {
            @include crispy__media-xs() {
                display: none;
            }
        }

        &--sm {
            @include crispy__media-sm() {
                display: none;
            }
        }

        &--md {
            @include crispy__media-md() {
                display: none;
            }
        }

        &--lg {
            @include crispy__media-lg() {
                display: none;
            }
        }

        &--xlg {
            @include crispy__media-xlg() {
                display: none;
            }
        }
    }

    .show {
        display: block;

        &--inline {
            display: inline;
        }

        &--inline-block {
            display: inline-block;
        }
    }

    // block
    .show {
        &--xs {
            @include crispy__media-xs() {
                display: block;
            }
        }

        &--sm {
            @include crispy__media-sm() {
                display: block;
            }
        }

        &--md {
            @include crispy__media-md() {
                display: block;
            }
        }

        &--lg {
            @include crispy__media-lg() {
                display: block;
            }
        }

        &--xlg {
            @include crispy__media-xlg() {
                display: block;
            }
        }
    }

    // show inline
    .show {
        &--inline-xs {
            @include crispy__media-xs() {
                display: inline;
            }
        }

        &--inline-sm {
            @include crispy__media-sm() {
                display: inline;
            }
        }

        &--inline-md {
            @include crispy__media-md() {
                display: inline;
            }
        }

        &--inline-lg {
            @include crispy__media-lg() {
                display: inline;
            }
        }

        &--inline-xlg {
            @include crispy__media-xlg() {
                display: inline;
            }
        }
    }

    // show inline block
    .show {
        &--inline-block-xs {
            @include crispy__media-xs() {
                display: inline-block;
            }
        }

        &--inline-block-sm {
            @include crispy__media-sm() {
                display: inline-block;
            }
        }

        &--inline-block-md {
            @include crispy__media-md() {
                display: inline-block;
            }
        }

        &--inline-block-lg {
            @include crispy__media-lg() {
                display: inline-block;
            }
        }

        &--inline-block-xlg {
            @include crispy__media-xlg() {
                display: inline-block;
            }
        }
    }
 }