Improve checkboxes
dugo3number2
parent
b22c6c29a4
commit
3f8225e924
|
|
@ -0,0 +1,132 @@
|
||||||
|
.b-contain *,
|
||||||
|
.b-contain *::before,
|
||||||
|
.b-contain *::after {
|
||||||
|
box-sizing: content-box !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.b-contain input {
|
||||||
|
position: absolute;
|
||||||
|
z-index: -1;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.b-contain span {
|
||||||
|
line-height: 1.5;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-family: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.b-contain {
|
||||||
|
display: inline-table;
|
||||||
|
position: relative;
|
||||||
|
padding-left: 2rem;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-bottom: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.b-contain input[type="checkbox"] ~ .b-input {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 1.25rem;
|
||||||
|
width: 1.25rem;
|
||||||
|
background: #ffe4c4;
|
||||||
|
transition: background 250ms;
|
||||||
|
border: 1px solid #222222;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.b-contain input[type="radio"] ~ .b-input {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 1.25rem;
|
||||||
|
width: 1.25rem;
|
||||||
|
background: #ffe4c4;
|
||||||
|
transition: background 250ms;
|
||||||
|
border: 1px solid #222222;
|
||||||
|
border-radius: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.b-contain input[type="checkbox"] ~ .b-input::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
display: none;
|
||||||
|
left: 7px;
|
||||||
|
top: 3px;
|
||||||
|
width: 0.3rem;
|
||||||
|
height: 0.6rem;
|
||||||
|
border: solid #ffffff;
|
||||||
|
border-width: 0 2px 2px 0;
|
||||||
|
transition: background 250ms;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.b-contain input[type="radio"] ~ .b-input::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
display: none;
|
||||||
|
left: 4px;
|
||||||
|
top: 4px;
|
||||||
|
width: 0.75rem;
|
||||||
|
height: 0.75rem;
|
||||||
|
border-radius: 3rem;
|
||||||
|
background: #ffffff;
|
||||||
|
transition: background 250ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
.b-contain input[type="checkbox"]:disabled ~ .b-input::after {
|
||||||
|
border-color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.b-contain input:checked ~ .b-input::after {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.b-contain:hover input[type="checkbox"]:not([disabled]) ~ .b-input,
|
||||||
|
.b-contain input[type="checkbox"]:focus ~ .b-input {
|
||||||
|
background: #ddc2a2;
|
||||||
|
border-color: #222222;
|
||||||
|
}
|
||||||
|
|
||||||
|
.b-contain:hover input[type="radio"]:not([disabled]) ~ .b-input,
|
||||||
|
.b-contain input[type="radio"]:focus ~ .b-input {
|
||||||
|
background: #e2e8f0;
|
||||||
|
border-color: #64748b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.b-contain input:focus ~ .b-input {
|
||||||
|
box-shadow: 0 0 0 2px #60a5fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.b-contain input[type="checkbox"]:checked ~ .b-input {
|
||||||
|
background: #ddc2a2;
|
||||||
|
border-color: #222222;
|
||||||
|
}
|
||||||
|
|
||||||
|
.b-contain input[type="radio"]:checked ~ .b-input {
|
||||||
|
background: #3b82f6;
|
||||||
|
border-color: #1d4ed8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.b-contain input[type="checkbox"]:disabled ~ .b-input,
|
||||||
|
.b-contain input[type="radio"]:disabled ~ .b-input {
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.b-contain input[type="radio"]:disabled ~ .b-input::after {
|
||||||
|
background: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.b-contain:hover input[type="checkbox"]:not([disabled]):checked ~ .b-input,
|
||||||
|
.b-contain input[type="checkbox"]:checked:focus ~ .b-input {
|
||||||
|
background: #ccb191;
|
||||||
|
border-color: #222222;
|
||||||
|
}
|
||||||
|
|
||||||
|
.b-contain:hover input[type="radio"]:not([disabled]):checked ~ .b-input,
|
||||||
|
.b-contain input[type="radio"]:checked:focus ~ .b-input {
|
||||||
|
background: #2563eb;
|
||||||
|
border-color: #1e40af;
|
||||||
|
}
|
||||||
|
|
@ -210,21 +210,7 @@ select {
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type=checkbox] {
|
input[type=checkbox] {
|
||||||
width: 25px;
|
|
||||||
height: 25px;
|
|
||||||
background-color: #ffe4c4;
|
|
||||||
border-radius: 50%;
|
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
border: 2px solid #222222;
|
|
||||||
appearance: none;
|
|
||||||
-webkit-appearance: none;
|
|
||||||
-moz-appearance: none;
|
|
||||||
outline: none;
|
|
||||||
margin: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type=checkbox]:checked {
|
|
||||||
background-color: #222222;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.pumps {
|
.pumps {
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,7 @@
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Order - Beacon Blend</title>
|
<title>Order - Beacon Blend</title>
|
||||||
<link rel="stylesheet" href="../assets/css/main.css" />
|
<link rel="stylesheet" href="../assets/css/main.css" />
|
||||||
|
<link rel="stylesheet" href="../assets/css/checkbox.css" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
|
|
@ -87,18 +88,18 @@
|
||||||
<option value="almond">Almond milk</option>
|
<option value="almond">Almond milk</option>
|
||||||
</select>
|
</select>
|
||||||
<h2>Your add-ons</h2>
|
<h2>Your add-ons</h2>
|
||||||
<label><input type="checkbox" name="caramel" id="caramel" value="true" /> Salted Caramel</label><span id="caramelpumps" class="hidden"> - <input type="number" min="0.5" max="5" step="0.5" value="2" inputmode="decimal" required name="caramelpumps" class="pumps" /> pumps</span><br />
|
<label class="b-contain"><input type="checkbox" name="caramel" id="caramel" value="true" /><span>Salted Caramel</span><div class="b-input"></div></label><span id="caramelpumps" class="hidden"> - <input type="number" min="0.5" max="5" step="0.5" value="2" inputmode="decimal" required name="caramelpumps" class="pumps" /> pumps</span><br />
|
||||||
<label><input type="checkbox" name="pecan" id="pecan" value="true" /> Butter Pecan</label><span id="pecanpumps" class="hidden"> - <input type="number" min="0.5" max="5" step="0.5" value="2" inputmode="decimal" required name="pecanpumps" class="pumps" /> pumps</span><br />
|
<label class="b-contain"><input type="checkbox" name="pecan" id="pecan" value="true" /><span>Butter Pecan</span><div class="b-input"></div></label><span id="pecanpumps" class="hidden"> - <input type="number" min="0.5" max="5" step="0.5" value="2" inputmode="decimal" required name="pecanpumps" class="pumps" /> pumps</span><br />
|
||||||
<label><input type="checkbox" name="pumpkin" id="pumpkin" value="true" /> Pumpkin</label><span id="pumpkinpumps" class="hidden"> - <input type="number" min="0.5" max="5" step="0.5" value="2" inputmode="decimal" required name="pumpkinpumps" class="pumps" /> pumps</span><br />
|
<label class="b-contain"><input type="checkbox" name="pumpkin" id="pumpkin" value="true" /><span>Pumpkin</span><div class="b-input"></div></label><span id="pumpkinpumps" class="hidden"> - <input type="number" min="0.5" max="5" step="0.5" value="2" inputmode="decimal" required name="pumpkinpumps" class="pumps" /> pumps</span><br />
|
||||||
<label><input type="checkbox" name="sfvanilla" id="sfvanilla" value="true" /> Sugar-free Vanilla</label><span id="sfvanillapumps" class="hidden"> - <input type="number" min="0.5" max="5" step="0.5" value="2" inputmode="decimal" required name="sfvanillapumps" class="pumps" /> pumps</span><br />
|
<label class="b-contain"><input type="checkbox" name="sfvanilla" id="sfvanilla" value="true" /><span>Sugar-free Vanilla</span><div class="b-input"></div></label><span id="sfvanillapumps" class="hidden"> - <input type="number" min="0.5" max="5" step="0.5" value="2" inputmode="decimal" required name="sfvanillapumps" class="pumps" /> pumps</span><br />
|
||||||
<label><input type="checkbox" name="hazelnut" id="hazelnut" value="true" /> Hazelnut</label><span id="hazelnutpumps" class="hidden"> - <input type="number" min="0.5" max="5" step="0.5" value="2" inputmode="decimal" required name="hazelnutpumps" class="pumps" /> pumps</span><br />
|
<label class="b-contain"><input type="checkbox" name="hazelnut" id="hazelnut" value="true" /><span>Hazelnut</span><div class="b-input"></div></label><span id="hazelnutpumps" class="hidden"> - <input type="number" min="0.5" max="5" step="0.5" value="2" inputmode="decimal" required name="hazelnutpumps" class="pumps" /> pumps</span><br />
|
||||||
<label><input type="checkbox" name="peppermint" id="peppermint" value="true" /> Peppermint</label><span id="peppermintpumps" class="hidden"> - <input type="number" min="0.5" max="5" step="0.5" value="2" inputmode="decimal" required name="peppermintpumps" class="pumps" /> pumps</span><br />
|
<label class="b-contain"><input type="checkbox" name="peppermint" id="peppermint" value="true" /><span>Peppermint</span><div class="b-input"></div></label><span id="peppermintpumps" class="hidden"> - <input type="number" min="0.5" max="5" step="0.5" value="2" inputmode="decimal" required name="peppermintpumps" class="pumps" /> pumps</span><br />
|
||||||
<label><input type="checkbox" name="vanilla" id="vanilla" value="true" /> French Vanilla</label><span id="vanillapumps" class="hidden"> - <input type="number" min="0.5" max="5" step="0.5" value="2" inputmode="decimal" required name="vanillapumps" class="pumps" /> pumps</span><br />
|
<label class="b-contain"><input type="checkbox" name="vanilla" id="vanilla" value="true" /><span>French Vanilla</span><div class="b-input"></div></label><span id="vanillapumps" class="hidden"> - <input type="number" min="0.5" max="5" step="0.5" value="2" inputmode="decimal" required name="vanillapumps" class="pumps" /> pumps</span><br />
|
||||||
<label><input type="checkbox" name="sfmarshmallow" id="sfmarshmallow" value="true" /> Sugar-free Toasted Marshmallow</label><span id="sfmarshmallowpumps" class="hidden"> - <input type="number" min="0.5" max="5" step="0.5" value="2" inputmode="decimal" required name="sfmarshmallowpumps" class="pumps" /> pumps</span><br /><br />
|
<label class="b-contain"><input type="checkbox" name="sfmarshmallow" id="sfmarshmallow" value="true" /><span>Sugar-free Toasted Marshmallow</span><div class="b-input"></div></label><span id="sfmarshmallowpumps" class="hidden"> - <input type="number" min="0.5" max="5" step="0.5" value="2" inputmode="decimal" required name="sfmarshmallowpumps" class="pumps" /> pumps</span><br /><br />
|
||||||
<label><input type="checkbox" name="mocha" value="true"> Mocha Swirl</label><br />
|
<label class="b-contain"><input type="checkbox" name="mocha" value="true"><span>Mocha Swirl</span><div class="b-input"></div></label><br />
|
||||||
<label><input type="checkbox" name="whitemocha" value="true"> White Mocha Swirl</label><br />
|
<label class="b-contain"><input type="checkbox" name="whitemocha" value="true"><span>White Mocha Swirl</span><div class="b-input"></div></label><br />
|
||||||
<label><input type="checkbox" name="caramels" value="true"> Caramel Swirl</label><br />
|
<label class="b-contain"><input type="checkbox" name="caramels" value="true"><span>Caramel Swirl</span><div class="b-input"></div></label><br />
|
||||||
<label><input type="checkbox" name="whippedcream" value="true"> Whipped Cream</label><br /><br /><br />
|
<label class="b-contain"><input type="checkbox" name="whippedcream" value="true"><span>Whipped Cream</span><div class="b-input"></div></label><br /><br /><br />
|
||||||
<div class="button-container">
|
<div class="button-container">
|
||||||
<a href="#" class="button button-alt" id="step3back">Back</a>
|
<a href="#" class="button button-alt" id="step3back">Back</a>
|
||||||
<a href="#" class="button button-alt" id="step3next">Next</a>
|
<a href="#" class="button button-alt" id="step3next">Next</a>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue