Skip to content
GitLab
    • Explore Projects Groups Snippets
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • B bootstrap
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 263
    • Issues 263
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 114
    • Merge requests 114
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Bootstrap
  • bootstrap
  • Merge requests
  • !21679

Enhancement: btn-pill

  • Review changes

  • Download
  • Email patches
  • Plain diff
Closed Administrator requested to merge github/fork/copperdesign/copperdesign-btn-pill into v4-dev 8 years ago
  • Overview 0
  • Commits 7
  • Pipelines 0
  • Changes 3

Created by: copperdesign

In the fashion of .badge-pill, adding .btn-pill to .btn

Compare
  • v4-dev (base)

and
  • latest version
    8a572f29
    7 commits, 2 years ago

3 files
+ 19
- 0

    Preferences

    File browser
    Compare changes
docs/co‎mponents‎
butto‎ns.md‎ +8 -0
sc‎ss‎
_butto‎ns.scss‎ +10 -0
_variab‎les.scss‎ +1 -0
docs/components/buttons.md
+ 8
- 0
  • View file @ 8a572f29


@@ -70,6 +70,14 @@ In need of a button, but not the hefty background colors they bring? Replace the
<button type="button" class="btn btn-outline-danger">Danger</button>
{% endexample %}
## Pill buttons
In in the fashion of `.badge-pill`, you may want your buttons to look like pills. Add the class `.btn-pill` to the button.
{% example html %}
<button type="button" class="btn btn-primary btn-pill">Primary Pill</button>
{% endexample %}
## Sizes
scss/_buttons.scss
+ 10
- 0
  • View file @ 8a572f29


@@ -145,6 +145,16 @@ fieldset[disabled] a.btn {
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-border-radius-sm);
}
//
// Button Pill
//
.btn-pill {
@include border-radius($btn-pill-border-radius);
}
//
// Block button
scss/_variables.scss
+ 1
- 0
  • View file @ 8a572f29


@@ -366,6 +366,7 @@ $btn-font-weight: $font-weight-normal !default;
$btn-box-shadow: inset 0 1px 0 rgba($white,.15), 0 1px 1px rgba($black,.075) !default;
$btn-focus-box-shadow: 0 0 0 2px rgba($brand-primary, .25) !default;
$btn-active-box-shadow: inset 0 3px 5px rgba($black,.125) !default;
$btn-pill-border-radius: 10rem !default;
$btn-primary-color: $white !default;
$btn-primary-bg: $brand-primary !default;
0 Assignees
None
Assign to
0 Reviewers
None
Request review from
Labels
1
CLA Signed
1
CLA Signed
    Assign labels
  • Manage project labels

Milestone
No milestone
None
None
Time tracking
No estimate or time spent
Lock merge request
Unlocked
0
0 participants
Reference: facebook/create-react-app!979
Source branch: github/fork/copperdesign/copperdesign-btn-pill

Menu

Explore Projects Groups Snippets