Skip to content

Instantly share code, notes, and snippets.

@robertlyall
Created March 27, 2015 12:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save robertlyall/0c260050d7395f04cd1b to your computer and use it in GitHub Desktop.
Save robertlyall/0c260050d7395f04cd1b to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<div class="container">
<div class="inputGroup">
<input type="text" class="inputField inputGroup__item">
<div class="inputGroup__btn">
<button class="btn">Button</button>
</div>
</div>
</div>
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----
*,
*:after,
*:before {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font: 400 14px/1 sans-serif;
}
.container {
margin: 0 auto;
max-width: 768px;
padding: 48px;
}
.btn {
-webkit-appearance: none;
-moz-appearance: none;
background: #ff6622;
color: white;
border: 1px solid #ff6622;
font: inherit;
padding: 9px 12px 7px;
}
.inputField {
-webkit-appearance: none;
-moz-appearance: none;
border: 1px solid #d7d7d7;
display: block;
font: inherit;
padding: 8px 12px;
width: 100%;
}
.inputGroup {
display: table;
width: 100%;
}
.inputGroup__item {
display: table-cell;
}
.inputGroup__item--main {
width: 99%;
}
.inputGroup__btn {
display: table-cell;
vertical-align: middle;
width: 1%;
}
*,
*:after,
*:before {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font: 400 14px/1 sans-serif;
}
.container {
margin: 0 auto;
max-width: 768px;
padding: 48px;
}
.btn {
-webkit-appearance: none;
-moz-appearance: none;
background: #ff6622;
color: white;
border: 1px solid #ff6622;
font: inherit;
padding: 9px 12px 7px;
}
.inputField {
-webkit-appearance: none;
-moz-appearance: none;
border: 1px solid #d7d7d7;
display: block;
font: inherit;
padding: 8px 12px;
width: 100%;
}
.inputGroup {
display: table;
width: 100%;
}
.inputGroup__item {
display: table-cell;
}
.inputGroup__item--main {
width: 99%;
}
.inputGroup__btn {
display: table-cell;
vertical-align: middle;
width: 1%;
}
<div class="container">
<div class="inputGroup">
<input type="text" class="inputField inputGroup__item">
<div class="inputGroup__btn">
<button class="btn">Button</button>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment