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 @@
---
- Three
-
+ Three
+
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`.
---
Addon - Appended
Addon - Prepended
http://
-
+
Button - Appended
-
-
+
+
@@ -25,6 +25,6 @@
Addon - Prepended & Button - Appended
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;
}
}