diff --git a/docs/demo/materials/03-molecules/02-button-groups.html b/docs/demo/materials/03-molecules/02-button-groups.html index 6411673c..654c2676 100644 --- a/docs/demo/materials/03-molecules/02-button-groups.html +++ b/docs/demo/materials/03-molecules/02-button-groups.html @@ -12,24 +12,24 @@ ---
- - + - - +
- Primary - + Primary +
- - +
diff --git a/docs/demo/materials/03-molecules/04-input-groups.html b/docs/demo/materials/03-molecules/04-input-groups.html index d7c5dd88..144efea6 100644 --- a/docs/demo/materials/03-molecules/04-input-groups.html +++ b/docs/demo/materials/03-molecules/04-input-groups.html @@ -1,23 +1,23 @@ --- notes: | - Create input groups by using `.dc-input-group` to wrap inputs with the class `.dc-input-group__input`, addons with the class `.dc-input-addon` and buttons with the class `dc-btn--grouped`. + Create input groups by using `.dc-input-group` to wrap inputs with the class `.dc-input--in-input-group`, addons with the class `.dc-input-addon` and buttons with the class `dc-btn--grouped`. ---
- +
http:// - +
- -
@@ -25,6 +25,6 @@
User 1 - - Add + + Add
diff --git a/src/styles/atoms/_btn.scss b/src/styles/atoms/_btn.scss index ecac7dc7..ad0faacd 100644 --- a/src/styles/atoms/_btn.scss +++ b/src/styles/atoms/_btn.scss @@ -176,7 +176,7 @@ // = GROUPED BUTTON // --------------------------------------------------------------------------- -@mixin dc-btn--grouped { +@mixin _dc-btn--grouped { margin-right: 0; margin-bottom: 0; border-left-width: 0; @@ -231,10 +231,6 @@ .dc-btn--block { @include dc-btn--block; } - - .dc-btn--grouped { - @include dc-btn--grouped; - } } diff --git a/src/styles/molecules/_btn-group.scss b/src/styles/molecules/_btn-group.scss index b35e6924..73919b19 100644 --- a/src/styles/molecules/_btn-group.scss +++ b/src/styles/molecules/_btn-group.scss @@ -19,6 +19,10 @@ float: left; } +@mixin dc-btn--in-btn-group { + @include _dc-btn--grouped; +} + @mixin dc-btn-group-selectors { .dc-btn-group { @@ -32,4 +36,8 @@ .dc-btn-group--in-row { @include dc-btn-group--in-row; } + + .dc-btn--in-btn-group { + @include dc-btn--in-btn-group; + } } diff --git a/src/styles/molecules/_input-group.scss b/src/styles/molecules/_input-group.scss index 391c7071..778b2f70 100644 --- a/src/styles/molecules/_input-group.scss +++ b/src/styles/molecules/_input-group.scss @@ -27,7 +27,7 @@ } } -@mixin dc-input-group__input { +@mixin dc-input--in-input-group { margin-right: 0; margin-bottom: 0; margin-left: 0; @@ -44,6 +44,10 @@ } } +@mixin dc-btn--in-input-group { + @include _dc-btn--grouped; +} + @mixin dc-input-group-selectors { .dc-input-group { @@ -54,8 +58,12 @@ @include dc-input-addon; } - .dc-input-group__input { - @include dc-input-group__input; + .dc-input--in-input-group { + @include dc-input--in-input-group; + } + + .dc-btn--in-input-group { + @include dc-btn--in-input-group; } }