Skip to content

Instantly share code, notes, and snippets.

@R3TSU R3TSU/dabblet.css
Created Feb 18, 2014

Embed
What would you like to do?
Pass Container
/**
* Pass Container
*/
/*background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;*/
* {
box-sizing: border-box;
}
.container {
position: relative;
width: 100%;
min-height: 100px;
background: red;
}
.content {
min-height:100px;
height: 100px;
border-left: 20px solid yellow;
}
.qty-selector {
background: gray;
}
.qty-selector{
display: block;
}
.qty-selector-container {
height: 50px;
font-size: 0;
}
button, input {
line-spacing:
display: inline-block;
vertical-align: middle;
}
button {
border: none;
background: none;
width: 10%;
height: inherit;
color: blue;
font-weight: bold;
font-size: 20px;
}
input {
width: 80%;
text-align: center;
vertical-align: middle;
background: none;
border:none;
}
.qty-minus {
}
.qty-plus {
}
@media (min-width: 768px) {
.qty-selector {
position: absolute;
top: 0;
right: 0;
width:300px;
bottom: 0;
background: gray;
}
.qty-selector-container {
display: inline-block;
vertical-align: middle;
height:100px;
width: 100%;
}
button {
width: 10%;
height: inherit;
}
input {
width: 80%;
display: inline-block;
}
.qty-minus {
}
.qty-plus {
}
}
/
/
<div class="container">
<div class="content">
something
</div>
<div class="qty-selector">
<div class="qty-selector-container">
<button class="qty-minus" value="-">-</button>
<input>
<button class="qty-plus">+</button>
</div>
</div>
</div>
// alert('Hello world!');
{"view":"separate","fontsize":"70","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.