<!-- BUTTON-GROUP Component -->
<div class="kx-btngroup kx-flex kx-flex-wrap kx-btngroup--fit-tight" role="group" aria-label="Aria label example">
    <!-- BUTTON Component -->
    <button class="kx-btn kx-btn--skin-primary kx-btn--size-large">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">Primary</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">Secondary</span>
    </span>
</button>
    <!-- BUTTON Component -->
    <button class="kx-btn kx-btn--skin-link kx-btn--size-large">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">Link</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">Secondary</span>
    </span>
</button>
    <!-- BUTTON Component -->
    <button class="kx-btn kx-btn--skin-link kx-btn--size-large">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">Link</span>
    </span>
</button>
    <!-- BUTTON Component -->
    <button class="kx-btn kx-btn--skin-primary kx-btn--size-large">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">Primary</span>
    </span>
</button>
    <!-- DROPDOWN Component -->
    <div class="kx-dropdown" role="group">
        <button id="--86372" class="kx-dropdown__toggle kx-btn kx-btn--skin-secondary kx-btn--size-large kx-js-dropdown__toggle" aria-haspopup="true" aria-expanded="false">
        <span class="kx-btn__inner">
                <span class="kx-btn__txt">Dropdown</span>
                <!-- ICON Component -->
<i class="kx-icon kx-icon--size-small kx-dropdown__caret">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-down"></use>
    </svg>
</i>
                </span>
    </button>
        <div class="kx-dropdown__menu kx-js-dropdown__menu" aria-labelledby="--86372">
            <ul class="kx-dropdown__list">
                <li class="kx-dropdown__item">
                    <a class="kx-dropdown__link" href="#">
                            <span class="kx-dropdown__item__txt">Support</span>
                            </a>
                </li>
                <li class="kx-dropdown__item">
                    <a class="kx-dropdown__link" href="#">
                            <span class="kx-dropdown__item__txt">Give feedback</span>
                            </a>
                </li>
                <li class="kx-dropdown__item">
                    <a class="kx-dropdown__link" href="#">
                            <span class="kx-dropdown__item__txt">Community</span>
                            </a>
                </li>
                <li class="kx-dropdown__item">
                    <a class="kx-dropdown__link" href="#">
                            <span class="kx-dropdown__item__txt">Privacy policy</span>
                            </a>
                </li>
                <li class="kx-dropdown__item">
                    <a class="kx-dropdown__link" href="#">
                            <span class="kx-dropdown__item__txt">About Kognifai</span>
                            </a>
                </li>
            </ul>
        </div>
    </div>

</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": [
    "tight"
  ],
  "align": [],
  "ariaLabel": "Aria label example",
  "buttons": [
    {
      "context": {
        "text": "Primary",
        "skin": "primary",
        "size": "large"
      }
    },
    {
      "context": {
        "text": "Secondary",
        "skin": "secondary",
        "size": "large"
      }
    },
    {
      "context": {
        "text": "Link",
        "skin": "link",
        "size": "large"
      }
    },
    {
      "context": {
        "text": "Secondary",
        "skin": "secondary",
        "size": "large"
      }
    },
    {
      "context": {
        "text": "Link",
        "skin": "link",
        "size": "large"
      }
    },
    {
      "context": {
        "text": "Primary",
        "skin": "primary",
        "size": "large"
      }
    },
    {
      "context": {
        "text": "Dropdown",
        "skin": "secondary",
        "size": "large",
        "items": [
          {
            "text": "Support",
            "href": "#"
          },
          {
            "text": "Give feedback",
            "href": "#"
          },
          {
            "text": "Community",
            "href": "#"
          },
          {
            "text": "Privacy policy",
            "href": "#"
          },
          {
            "text": "About Kognifai",
            "href": "#"
          }
        ],
        "caret": true
      }
    }
  ],
  "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.