<commit_before><template>
  <div class="buttons-page">
    <div class="row">
      <widget class="col-sm-12 primary-secondary-buttons" header-text="Primary & Secondary Buttons">
        <div class="row btn-margin-row">
          <div class="col-md-3 col-sm-6">
            <button class="btn btn-primary">
              BUTTON
            </button>
          </div>
          <div class="col-md-3 col-sm-6">
            <button class="btn btn-primary hover">
              HOVER
            </button>
          </div>
          <div class="col-md-3 col-sm-6">
            <button class="btn btn-primary focus">
              PRESSED
            </button>
          </div>
          <div class="col-md-3 col-sm-6">
            <button class="btn btn-primary" disabled>
              DISABLED
            </button>
          </div>
        </div>

        <div class="row btn-margin-row">
          <div class="col-md-3 col-sm-6">
            <button class="btn btn-secondary">
              BUTTON
            </button>
          </div>
          <div class="col-md-3 col-sm-6">
            <button class="btn btn-secondary hover">
              HOVER
            </button>
          </div>
          <div class="col-md-3 col-sm-6">
            <button class="btn btn-secondary focus">
              PRESSED
            </button>
          </div>
          <div class="col-md-3 col-sm-6">
            <button class="btn btn-secondary" disabled>
              DISABLED
            </button>
          </div>
        </div>

        <div class="row">
          <div class="col-sm-12 smaller-buttons">
            <button class="btn btn-primary btn-sm">
              SMALL
            </button>
            <button class="btn btn-primary btn-micro">
              MICRO
            </button>
          </div>
        </div>
      </widget>
    </div>

    <div class="row">
      <widget class="col-sm-12 color-buttons" header-text="Icons, Groups, Dropdowns">
        <div class="row">
          <div class="col-md-3 col-sm-6">
            <button class="btn btn-primary btn-with-icon">
              <div class="btn-with-icon-content">
                <i class="ion-android-close ion"></i>
                BUTTON
              </div>
            </button>
          </div>
          <div class="col-md-3 col-sm-6">
            <div class="dropdown" v-dropdown>
              <button class="btn btn-primary dropdown-toggle theme-toggle " type="button" id="dropdownMenuButton" data-toggle="dropdown">
                BUTTON
                <i class="ion-chevron-down arrow-down"></i>
              </button>
              <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </div>
          </div>
          <div class="col-md-4 col-sm-6">
            <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
              <div class="btn-group mr-2" role="group" aria-label="First group">
                <button type="button" class="btn btn-primary">1</button>
                <button type="button" class="btn btn-primary focus">2</button>
                <button type="button" class="btn btn-primary">3</button>
                <button type="button" class="btn btn-primary">4</button>
              </div>
            </div>
          </div>
          <div class="col-md-2">
            <button class="btn btn-primary btn-with-icon rounded-icon">
              <div class="btn-with-icon-content">
                <i class="ion-android-close ion"></i>
              </div>
            </button>
          </div>
        </div>
      </widget>
    </div>

    <div class="row">
      <widget class="col-sm-12 color-buttons" header-text="Colors">
        <div class="row btn-margin-row">
          <div class="col-md-3">
            <button class="btn btn-danger">
              BUTTON
            </button>
          </div>
          <div class="col-md-3 col-sm-6">
            <button class="btn btn-info">
              BUTTON
            </button>
          </div>
          <div class="col-md-3 col-sm-6">
            <button class="btn btn-dark">
              BUTTON
            </button>
          </div>
          <div class="col-md-3 col-sm-6">
            <button class="btn btn-warning">
              BUTTON
            </button>
          </div>
        </div>

        <div class="row">
          <div class="col-md-3 col-sm-6">
            <button class="btn btn-success">
              BUTTON
            </button>
          </div>
          <div class="col-md-3 col-sm-6">
            <button class="btn btn-pale">
              BUTTON
            </button>
          </div>
        </div>
      </widget>
    </div>
  </div>
</template>

<script>
  import Widget from 'components/common/widget/Widget'
  import Dropdown from 'directives/Dropdown'

  export default {
    name: 'buttons',
    components: {
      Widget
    },
    directives: {
      Dropdown
    }
  }
</script>

<style lang="scss">
  .buttons-page {

    .btn, .btn-group {
      margin-bottom: 45px;
    }

    .btn-group .btn {
      margin-bottom: 0;
    }

    .smaller-buttons {<commit_msg>fix(buttons page): reposition menu item<commit_after><template>
  <div class="buttons-page">
    <div class="row">
      <widget class="col-sm-12 primary-secondary-buttons" header-text="Primary & Secondary Buttons">
        <div class="row btn-margin-row">
          <div class="col-md-3 col-sm-6">
            <button class="btn btn-primary">
              BUTTON
            </button>
          </div>
          <div class="col-md-3 col-sm-6">
            <button class="btn btn-primary hover">
              HOVER
            </button>
          </div>
          <div class="col-md-3 col-sm-6">
            <button class="btn btn-primary focus">
              PRESSED
            </button>
          </div>
          <div class="col-md-3 col-sm-6">
            <button class="btn btn-primary" disabled>
              DISABLED
            </button>
          </div>
        </div>

        <div class="row btn-margin-row">
          <div class="col-md-3 col-sm-6">
            <button class="btn btn-secondary">
              BUTTON
            </button>
          </div>
          <div class="col-md-3 col-sm-6">
            <button class="btn btn-secondary hover">
              HOVER
            </button>
          </div>
          <div class="col-md-3 col-sm-6">
            <button class="btn btn-secondary focus">
              PRESSED
            </button>
          </div>
          <div class="col-md-3 col-sm-6">
            <button class="btn btn-secondary" disabled>
              DISABLED
            </button>
          </div>
        </div>

        <div class="row">
          <div class="col-sm-12 smaller-buttons">
            <button class="btn btn-primary btn-sm">
              SMALL
            </button>
            <button class="btn btn-primary btn-micro">
              MICRO
            </button>
          </div>
        </div>
      </widget>
    </div>

    <div class="row">
      <widget class="col-sm-12 color-buttons" header-text="Icons, Groups, Dropdowns">
        <div class="row">
          <div class="col-md-3 col-sm-6">
            <button class="btn btn-primary btn-with-icon">
              <div class="btn-with-icon-content">
                <i class="ion-android-close ion"></i>
                BUTTON
              </div>
            </button>
          </div>
          <div class="col-md-3 col-sm-6">
            <div class="dropdown" v-dropdown>
              <button class="btn btn-primary dropdown-toggle theme-toggle " type="button" id="dropdownMenuButton" data-toggle="dropdown">
                BUTTON
                <i class="ion-chevron-down arrow-down"></i>
              </button>
              <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </div>
          </div>
          <div class="col-md-4 col-sm-6">
            <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
              <div class="btn-group mr-2" role="group" aria-label="First group">
                <button type="button" class="btn btn-primary">1</button>
                <button type="button" class="btn btn-primary focus">2</button>
                <button type="button" class="btn btn-primary">3</button>
                <button type="button" class="btn btn-primary">4</button>
              </div>
            </div>
          </div>
          <div class="col-md-2">
            <button class="btn btn-primary btn-with-icon rounded-icon">
              <div class="btn-with-icon-content">
                <i class="ion-android-close ion"></i>
              </div>
            </button>
          </div>
        </div>
      </widget>
    </div>

    <div class="row">
      <widget class="col-sm-12 color-buttons" header-text="Colors">
        <div class="row btn-margin-row">
          <div class="col-md-3">
            <button class="btn btn-danger">
              BUTTON
            </button>
          </div>
          <div class="col-md-3 col-sm-6">
            <button class="btn btn-info">
              BUTTON
            </button>
          </div>
          <div class="col-md-3 col-sm-6">
            <button class="btn btn-dark">
              BUTTON
            </button>
          </div>
          <div class="col-md-3 col-sm-6">
            <button class="btn btn-warning">
              BUTTON
            </button>
          </div>
        </div>

        <div class="row">
          <div class="col-md-3 col-sm-6">
            <button class="btn btn-success">
              BUTTON
            </button>
          </div>
          <div class="col-md-3 col-sm-6">
            <button class="btn btn-pale">
              BUTTON
            </button>
          </div>
        </div>
      </widget>
    </div>
  </div>
</template>

<script>
  import Widget from 'components/common/widget/Widget'
  import Dropdown from 'directives/Dropdown'

  export default {
    name: 'buttons',
    components: {
      Widget
    },
    directives: {
      Dropdown
    }
  }
</script>

<style lang="scss">
  .buttons-page {

    .btn, .btn-group {
      margin-bottom: 45px;
    }

    .btn-group .btn {
      margin-bottom: 0;
    }

    .dropdown-menu {
      margin-top: -43px;
    }

    .smaller-buttons {
{'fraction_non_alphanumeric': 0.15051469906334045, 'fraction_numerical': 0.009459334137067607, 'mean_word_length': 1.389541325060935, 'pattern_counts': {'":': 0, '<': 281, '<?xml version=': 0, '>': 281, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4902492', 'n_tokens_mistral': 3195, 'n_tokens_neox': 3114, 'n_words': 677}