Button Group: Align Center 

<!-- BUTTON-GROUP Component -->
<div class="kx-btngroup kx-flex kx-flex-wrap kx-align-items-center" role="group" aria-label="Aria label example">
    <!-- BUTTON Component -->
    <button class="kx-btn kx-btn--skin-secondary kx-btn--size-tiny">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">First</span>
    </span>
</button>
    <!-- BUTTON Component -->
    <button class="kx-btn kx-btn--skin-secondary kx-btn--size-base">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">Second</span>
    </span>
</button>
    <!-- BUTTON Component -->
    <button class="kx-btn kx-btn--skin-secondary kx-btn--size-large">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">Third</span>
    </span>
</button>
</div>
 
<!-- BUTTON-GROUP Component -->
<div class="kx-btngroup kx-flex kx-flex-wrap{% for class in fit %} kx-btngroup--fit-{{ class }}{% endfor %}{% for class in align %} {{ class }}{% endfor %}{% for class in classes %} {{ class }}{% endfor %}" role="group" aria-label="{{ ariaLabel }}">
    {%- for button in buttons -%}
        {% if button.context.items -%}
        {% render '@dropdown', button.context %}
        {% else -%}
        {% render '@button', button.context %}
        {% endif -%}
    {% endfor -%}
</div>
 
{
  "fit": [],
  "align": [
    "kx-align-items-center"
  ],
  "ariaLabel": "Aria label example",
  "buttons": [
    {
      "context": {
        "text": "First",
        "skin": "secondary",
        "size": "tiny"
      }
    },
    {
      "context": {
        "text": "Second",
        "skin": "secondary",
        "size": "base"
      }
    },
    {
      "context": {
        "text": "Third",
        "skin": "secondary",
        "size": "large"
      }
    }
  ],
  "classes": null
}
  • Content: 
    // ==========================================================================
// Component: button-group
// ==========================================================================

// Elements (children)
// ==========================================================================

// Block (parent)
// ==========================================================================
.kx-btngroup {
    @include reset-list;
    @include flex;
    @include flex-wrap;
    //margin-top: -8px;

    > .kx-btn,
    > .kx-dropdown {
        //@include mt(mini);

        + .kx-btn,
        + .kx-dropdown {
            @include ml(mini);
        }
    }

    //&:not([class*='kx-justify-content-end']) {
    //    > .kx-btn,
    //    > .kx-dropdown {
    //        @include mr(mini);
    //
    //        + .kx-btn,
    //        + .kx-dropdown {
    //            @include mr(mini);
    //        }
    //    }
    //}
    //
    //&[class*='kx-justify-content-end'] {
    //    > .kx-btn,
    //    > .kx-dropdown {
    //        + .kx-btn,
    //        + .kx-dropdown {
    //            @include ml(mini);
    //        }
    //    }
    //}
}

// Modifiers
// ==========================================================================

.kx-btngroup--fit-stretch {
    > .kx-btn,
    > .kx-dropdown {
        flex: 1 1 auto;
    }

    > .kx-dropdown {
        .kx-btn {
            flex-grow: 1;
        }
    }
}

.kx-btngroup--fit-tight {

    > .kx-btn {
        &:first-child {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }

        &:not(:first-child):not(:last-child) {
            border-radius: 0;
        }

        &:last-child {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }
    }

    > .kx-dropdown {
        &:first-child {
            .kx-btn {
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
            }
        }

        &:not(:first-child):not(:last-child) {
            .kx-btn {
                border-radius: 0;
            }
        }

        &:last-child {
            .kx-btn {
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
            }
        }
    }

    > .kx-btn,
    > .kx-dropdown {
        + .kx-btn,
        + .kx-dropdown {
            margin-left: rem-calc(-1);
        }

        + .kx-btn--skin-link {
            @include ml(mini);

            + .kx-btn,
            + .kx-dropdown {
                @include ml(mini);
            }
        }
    }
}
  • URL: /components/raw/button-group/_button-group.scss
  • Filesystem Path: src\components\01-button-group\_button-group.scss
  • Size: 2.7 KB

There are no notes for this item.