<!-- BUTTON-GROUP Component -->
<div class="kx-btngroup kx-flex kx-flex-wrap kx-align-items-start" 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-start"
  ],
  "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.