<h2>Demo form</h2>
<form action="" method="" class="generic-form">
<input name="" type="hidden" value="00D5t0000008hdL" />
<label for="first_name">First Name</label><input id="first_name" maxlength="40" name="first_name" size="20" type="text" />
<label for="last_name">Last Name</label><input id="last_name" maxlength="80" name="last_name" size="20" type="text" />
<label for="title">Title</label><input id="title" maxlength="40" name="title" size="20" type="text" placeholder="test placeholder" />
<label for="email">Email</label><input id="email" maxlength="80" value="email@example.com" name="email" size="20" type="text" />
<div class="spacer-3"></div>
<label for="00N5t000000qiTM">Are you the key contact for 360Giving?:</label>
<select id="00N5t000000qiTM" title="Are you the key contact for 360Giving?" name="00N5t000000qiTM">
<option value="">–None–</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="Don't know yet">Don’t know yet</option>
</select>
<label>How comfortable do you feel using data?:<span class="note">This is a note about this field</span>
<select id="00N5t000000qiTT" title="How comfortable do you feel using data?" name="00N5t000000qiTT">
<option value="">–None–</option>
<option value="Not comfortable. I know nothing about data.">Not comfortable. I know nothing about data.</option>
<option value="A bit comfortable. I know what data is - but I work with it rarely.">A bit comfortable. I know what data is – but I work with it rarely.</option>
<option value="Somewhat comfortable. I work with people who use data and manage them - but I am not directly involved in using data.">Somewhat comfortable. I work with people who use data and manage them – but I am not directly involved in using data.</option>
<option value="Comfortable. I occasionally work with data - mainly on small spreadsheets and using software like Excel.">Comfortable. I occasionally work with data – mainly on small spreadsheets and using software like Excel.</option>
<option value="Very comfortable. I work with data on a daily basis.">Very comfortable. I work with data on a daily basis.</option>
</select>
</label>
<label>How can we help you access support?:<textarea id="00N5t000000qiTS" name="00N5t000000qiTS" rows="3" wrap="soft"></textarea>
<span class="note">This is a note about this field</span>
</label>
<label>
<label for="company" class="required">Company</label><input id="company" maxlength="40" name="company" size="20" type="text" required aria-required="true" /></label>
<label>
<label for="url">Website</label><input id="url" maxlength="80" name="url" size="20" type="url" /></label>
<label>Charity Number:<input id="00N5t000000qiTN" maxlength="15" name="00N5t000000qiTN" size="20" type="text" /></label>
<label>Company Number:<input id="00N5t000000qiTO" maxlength="15" name="00N5t000000qiTO" size="20" type="text" /></label>
<label>Funder type:<select id="00N5t000000qiTQ" title="Funder type" name="00N5t000000qiTQ">
<option value="">–None–</option>
<option value="Family foundation">Family foundation</option>
<option value="Corporate foundation">Corporate foundation</option>
<option value="Community foundation">Community foundation</option>
<option value="Place-based funder">Place-based funder</option>
<option value="General independent foundation">General independent foundation</option>
<option value="Public appeal distributor">Public appeal distributor</option>
<option value="Lottery distributor">Lottery distributor</option>
<option value="Membership-based funder">Membership-based funder</option>
<option value="Livery company">Livery company</option>
<option value="Company giving">Company giving</option>
<option value="Housing association">Housing association</option>
<option value="Local authority">Local authority</option>
<option value="Arms Length Body">Arms Length Body</option>
<option value="Other public sector funder">Other public sector funder</option>
<option value="Operational charity making grants">Operational charity making grants</option>
<option value="NHS Charity">NHS Charity</option>
<option value="Donor advised fund">Donor advised fund</option>
<option value="Other">Other</option>
</select>
</label>
<label>Number of Staff:<select id="00N5t000000qiTV" title="Number of Staff" name="00N5t000000qiTV">
<option value="">–None–</option>
<option value="Voluntary run organisation">Voluntary run organisation</option>
<option value="1">1</option>
<option value="2 to 5">2 to 5</option>
<option value="6 to 9">6 to 9</option>
<option value="10 to 49">10 to 49</option>
<option value="50 to 249">50 to 249</option>
<option value="250 to 499">250 to 499</option>
<option value="500 or more">500 or more</option>
</select>
</label>
<label>Total value of grants awarded per year:<select id="00N5t000000qiTZ" title="Total value of grants awarded per year" name="00N5t000000qiTZ">
<option value="">–None–</option>
<option value="Up to £250,000">Up to £250,000</option>
<option value="£250,000 to £500,000">£250,000 to £500,000</option>
<option value="£500,001 to £1m">£500,001 to £1m</option>
<option value="£1m to £5m">£1m to £5m</option>
<option value="Over £5m">Over £5m</option>
</select>
</label>
<label>Number of grants awarded per year:<select id="00N5t000000qiTW" title="Number of grants awarded per year" name="00N5t000000qiTW">
<option value="">–None–</option>
<option value="up to 100">up to 100</option>
<option value="101 to 500">101 to 500</option>
<option value="501 to 1,000">501 to 1,000</option>
<option value="1,001 to 5,000">1,001 to 5,000</option>
<option value="Over 5,000">Over 5,000</option>
</select>
</label>
<label>Who qualifies for your grants?:<select id="00N5t000000qiTa" title="Who qualifies for your grants?" name="00N5t000000qiTa">
<option value="">–None–</option>
<option value="Organisations">Organisations</option>
<option value="Individuals">Individuals</option>
<option value="Both">Both</option>
</select>
</label>
<label>Data publishing scope:<select id="00N5t000000qiTP" title="Data publishing scope" name="00N5t000000qiTP">
<option value="">–None–</option>
<option value="Historical grants - covering the past 5 years or more">Historical grants – covering the past 5 years or more</option>
<option value="Recent grants - covering the past 3 years">Recent grants – covering the past 3 years</option>
<option value="Current grants - covering the past financial year">Current grants – covering the past financial year</option>
<option value="Forthcoming grants - covering the next financial year">Forthcoming grants – covering the next financial year</option>
<option value="Don't know">Don’t know</option>
</select>
</label>
<label>Grantmaking System (Select):<select id="00N5t000000qiTR" title="Grantmaking System (Select)" name="00N5t000000qiTR">
<option value="">–None–</option>
<option value="Benefactor">Benefactor</option>
<option value="Bespoke system">Bespoke system</option>
<option value="CC Grant Tracker">CC Grant Tracker</option>
<option value="Digits2">Digits2</option>
<option value="Flexi-grant">Flexi-grant</option>
<option value="Fluxx">Fluxx</option>
<option value="Blackbaud Grantmaking">Blackbaud Grantmaking</option>
<option value="GMCVO Databases">GMCVO Databases</option>
<option value="grantFlex">grantFlex</option>
<option value="Microsoft Dynamics">Microsoft Dynamics</option>
<option value="None">None</option>
<option value="Salesforce">Salesforce</option>
<option value="SmartSimple">SmartSimple</option>
<option value="Spreadsheets">Spreadsheets</option>
<option value="Don't know">Don’t know</option>
<option value="Other">Other</option>
</select>
</label>
<label>Reason to publish 360Giving data:<textarea id="00N5t000000qiTX" name="00N5t000000qiTX" rows="2" wrap="soft"></textarea>
</label>
<label>How did you hear about 360Giving?:<select id="00N5t000000qiTU" title="How did you hear about 360Giving?" name="00N5t000000qiTU">
<option value="">–None–</option>
<option value="Twitter">Twitter</option>
<option value="LinkedIn">LinkedIn</option>
<option value="Newsletter">Newsletter</option>
<option value="Website">Website</option>
<option value="Word of mouth">Word of mouth</option>
<option value="Attended 360Giving workshop">Attended 360Giving workshop</option>
<option value="Other">Other</option>
</select>
</label>
<label>Any information to help with publishing:<textarea class="full-width" id="00N5t000000qiTL" name="00N5t000000qiTL" rows="3" wrap="soft"></textarea>
</label>
<label><input id="lead_source" name="lead_source" type="hidden" value="Web" />
<input name="recordType" type="hidden" value="0125t0000008fRO" /></label>
<div class="g-recaptcha" data-sitekey="6LcNGYogAAAAADclFYm-xwcrTnUt4WhGW9yckdnG"></div>
<label><input name="submit" type="submit" class="button button--orange" /></label>
</form>
<h2>Checkboxes</h2>
<form class="generic-form">
<div class="checkbox">
<input id="00N5t000000qiTY" name="00N5t000000qiTY" type="checkbox" value="1" />
<label for="00N5t000000qiTY">Tick to sign up to our newsletter:
</label>
</div>
<div class="radio">
<input id="00N5t000000qiTX-1" name="00N5t000000qiTX" type="radio" value="value-1" />
<label for="00N5t000000qiTX-1">Radio value 1
</label>
</div>
<div class="radio">
<input id="00N5t000000qiTX-2" name="00N5t000000qiTX" type="radio" value="value-2" />
<label for="00N5t000000qiTX-2">Radio value 2
</label>
</div>
</form>
<h2>All form inputs</h2>
<form class="generic-form">
<label for="input-button">button</label><input id="title" maxlength="40" name="title" size="20" type="button" placeholder="test placeholder" value="button" />
<label for="input-checkbox">checkbox</label><input id="title" maxlength="40" name="title" size="20" type="checkbox" placeholder="test placeholder" value="checkbox" />
<label for="input-color">color</label><input id="title" maxlength="40" name="title" size="20" type="color" placeholder="test placeholder" value="color" />
<label for="input-date">date</label><input id="title" maxlength="40" name="title" size="20" type="date" placeholder="test placeholder" value="date" />
<label for="input-datetime-local">datetime-local</label><input id="title" maxlength="40" name="title" size="20" type="datetime-local" placeholder="test placeholder" value="datetime-local" />
<label for="input-email">email</label><input id="title" maxlength="40" name="title" size="20" type="email" placeholder="test placeholder" value="email" />
<label for="input-file">file</label><input id="title" maxlength="40" name="title" size="20" type="file" placeholder="test placeholder" value="file" />
<label for="input-hidden">hidden</label><input id="title" maxlength="40" name="title" size="20" type="hidden" placeholder="test placeholder" value="hidden" />
<label for="input-image">image</label><input id="title" maxlength="40" name="title" size="20" type="image" placeholder="test placeholder" value="image" />
<label for="input-month">month</label><input id="title" maxlength="40" name="title" size="20" type="month" placeholder="test placeholder" value="month" />
<label for="input-number">number</label><input id="title" maxlength="40" name="title" size="20" type="number" placeholder="test placeholder" value="number" />
<label for="input-password">password</label><input id="title" maxlength="40" name="title" size="20" type="password" placeholder="test placeholder" value="password" />
<label for="input-radio">radio</label><input id="title" maxlength="40" name="title" size="20" type="radio" placeholder="test placeholder" value="radio" />
<label for="input-range">range</label><input id="title" maxlength="40" name="title" size="20" type="range" placeholder="test placeholder" value="range" />
<label for="input-reset">reset</label><input id="title" maxlength="40" name="title" size="20" type="reset" placeholder="test placeholder" value="reset" />
<label for="input-search">search</label><input id="title" maxlength="40" name="title" size="20" type="search" placeholder="test placeholder" value="search" />
<label for="input-submit">submit</label><input id="title" maxlength="40" name="title" size="20" type="submit" placeholder="test placeholder" value="submit" />
<label for="input-tel">tel</label><input id="title" maxlength="40" name="title" size="20" type="tel" placeholder="test placeholder" value="tel" />
<label for="input-text">text</label><input id="title" maxlength="40" name="title" size="20" type="text" placeholder="test placeholder" value="text" />
<label for="input-time">time</label><input id="title" maxlength="40" name="title" size="20" type="time" placeholder="test placeholder" value="time" />
<label for="input-url">url</label><input id="title" maxlength="40" name="title" size="20" type="url" placeholder="test placeholder" value="url" />
<label for="input-week">week</label><input id="title" maxlength="40" name="title" size="20" type="week" placeholder="test placeholder" value="week" />
</form>
<h2>Demo form</h2>
<form action="" method="" class="generic-form">
<input name="" type="hidden" value="00D5t0000008hdL"/>
<label for="first_name">First Name</label><input id="first_name" maxlength="40" name="first_name" size="20" type="text"/>
<label for="last_name">Last Name</label><input id="last_name" maxlength="80" name="last_name" size="20" type="text"/>
<label for="title">Title</label><input id="title" maxlength="40" name="title" size="20" type="text" placeholder="test placeholder"/>
<label for="email">Email</label><input id="email" maxlength="80" value="email@example.com" name="email" size="20" type="text"/>
<div class="spacer-3"></div>
<label for="00N5t000000qiTM">Are you the key contact for 360Giving?:</label>
<select id="00N5t000000qiTM" title="Are you the key contact for 360Giving?" name="00N5t000000qiTM">
<option value="">–None–</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="Don't know yet">Don’t know yet</option>
</select>
<label>How comfortable do you feel using data?:<span class="note">This is a note about this field</span>
<select id="00N5t000000qiTT" title="How comfortable do you feel using data?" name="00N5t000000qiTT">
<option value="">–None–</option>
<option value="Not comfortable. I know nothing about data.">Not comfortable. I know nothing about data.</option>
<option value="A bit comfortable. I know what data is - but I work with it rarely.">A bit comfortable. I know what data is – but I work with it rarely.</option>
<option value="Somewhat comfortable. I work with people who use data and manage them - but I am not directly involved in using data.">Somewhat comfortable. I work with people who use data and manage them – but I am not directly involved in using data.</option>
<option value="Comfortable. I occasionally work with data - mainly on small spreadsheets and using software like Excel.">Comfortable. I occasionally work with data – mainly on small spreadsheets and using software like Excel.</option>
<option value="Very comfortable. I work with data on a daily basis.">Very comfortable. I work with data on a daily basis.</option>
</select>
</label>
<label>How can we help you access support?:<textarea id="00N5t000000qiTS" name="00N5t000000qiTS" rows="3" wrap="soft"></textarea>
<span class="note">This is a note about this field</span>
</label>
<label>
<label for="company" class="required">Company</label><input id="company" maxlength="40" name="company" size="20" type="text" required aria-required="true"/></label>
<label>
<label for="url">Website</label><input id="url" maxlength="80" name="url" size="20" type="url"/></label>
<label>Charity Number:<input id="00N5t000000qiTN" maxlength="15" name="00N5t000000qiTN" size="20" type="text"/></label>
<label>Company Number:<input id="00N5t000000qiTO" maxlength="15" name="00N5t000000qiTO" size="20" type="text"/></label>
<label>Funder type:<select id="00N5t000000qiTQ" title="Funder type" name="00N5t000000qiTQ">
<option value="">–None–</option>
<option value="Family foundation">Family foundation</option>
<option value="Corporate foundation">Corporate foundation</option>
<option value="Community foundation">Community foundation</option>
<option value="Place-based funder">Place-based funder</option>
<option value="General independent foundation">General independent foundation</option>
<option value="Public appeal distributor">Public appeal distributor</option>
<option value="Lottery distributor">Lottery distributor</option>
<option value="Membership-based funder">Membership-based funder</option>
<option value="Livery company">Livery company</option>
<option value="Company giving">Company giving</option>
<option value="Housing association">Housing association</option>
<option value="Local authority">Local authority</option>
<option value="Arms Length Body">Arms Length Body</option>
<option value="Other public sector funder">Other public sector funder</option>
<option value="Operational charity making grants">Operational charity making grants</option>
<option value="NHS Charity">NHS Charity</option>
<option value="Donor advised fund">Donor advised fund</option>
<option value="Other">Other</option>
</select>
</label>
<label>Number of Staff:<select id="00N5t000000qiTV" title="Number of Staff" name="00N5t000000qiTV">
<option value="">–None–</option>
<option value="Voluntary run organisation">Voluntary run organisation</option>
<option value="1">1</option>
<option value="2 to 5">2 to 5</option>
<option value="6 to 9">6 to 9</option>
<option value="10 to 49">10 to 49</option>
<option value="50 to 249">50 to 249</option>
<option value="250 to 499">250 to 499</option>
<option value="500 or more">500 or more</option>
</select>
</label>
<label>Total value of grants awarded per year:<select id="00N5t000000qiTZ" title="Total value of grants awarded per year" name="00N5t000000qiTZ">
<option value="">–None–</option>
<option value="Up to £250,000">Up to £250,000</option>
<option value="£250,000 to £500,000">£250,000 to £500,000</option>
<option value="£500,001 to £1m">£500,001 to £1m</option>
<option value="£1m to £5m">£1m to £5m</option>
<option value="Over £5m">Over £5m</option>
</select>
</label>
<label>Number of grants awarded per year:<select id="00N5t000000qiTW" title="Number of grants awarded per year" name="00N5t000000qiTW">
<option value="">–None–</option>
<option value="up to 100">up to 100</option>
<option value="101 to 500">101 to 500</option>
<option value="501 to 1,000">501 to 1,000</option>
<option value="1,001 to 5,000">1,001 to 5,000</option>
<option value="Over 5,000">Over 5,000</option>
</select>
</label>
<label>Who qualifies for your grants?:<select id="00N5t000000qiTa" title="Who qualifies for your grants?" name="00N5t000000qiTa">
<option value="">–None–</option>
<option value="Organisations">Organisations</option>
<option value="Individuals">Individuals</option>
<option value="Both">Both</option>
</select>
</label>
<label>Data publishing scope:<select id="00N5t000000qiTP" title="Data publishing scope" name="00N5t000000qiTP">
<option value="">–None–</option>
<option value="Historical grants - covering the past 5 years or more">Historical grants – covering the past 5 years or more</option>
<option value="Recent grants - covering the past 3 years">Recent grants – covering the past 3 years</option>
<option value="Current grants - covering the past financial year">Current grants – covering the past financial year</option>
<option value="Forthcoming grants - covering the next financial year">Forthcoming grants – covering the next financial year</option>
<option value="Don't know">Don’t know</option>
</select>
</label>
<label>Grantmaking System (Select):<select id="00N5t000000qiTR" title="Grantmaking System (Select)" name="00N5t000000qiTR">
<option value="">–None–</option>
<option value="Benefactor">Benefactor</option>
<option value="Bespoke system">Bespoke system</option>
<option value="CC Grant Tracker">CC Grant Tracker</option>
<option value="Digits2">Digits2</option>
<option value="Flexi-grant">Flexi-grant</option>
<option value="Fluxx">Fluxx</option>
<option value="Blackbaud Grantmaking">Blackbaud Grantmaking</option>
<option value="GMCVO Databases">GMCVO Databases</option>
<option value="grantFlex">grantFlex</option>
<option value="Microsoft Dynamics">Microsoft Dynamics</option>
<option value="None">None</option>
<option value="Salesforce">Salesforce</option>
<option value="SmartSimple">SmartSimple</option>
<option value="Spreadsheets">Spreadsheets</option>
<option value="Don't know">Don’t know</option>
<option value="Other">Other</option>
</select>
</label>
<label>Reason to publish 360Giving data:<textarea id="00N5t000000qiTX" name="00N5t000000qiTX" rows="2" wrap="soft"></textarea>
</label>
<label>How did you hear about 360Giving?:<select id="00N5t000000qiTU" title="How did you hear about 360Giving?" name="00N5t000000qiTU">
<option value="">–None–</option>
<option value="Twitter">Twitter</option>
<option value="LinkedIn">LinkedIn</option>
<option value="Newsletter">Newsletter</option>
<option value="Website">Website</option>
<option value="Word of mouth">Word of mouth</option>
<option value="Attended 360Giving workshop">Attended 360Giving workshop</option>
<option value="Other">Other</option>
</select>
</label>
<label>Any information to help with publishing:<textarea class="full-width" id="00N5t000000qiTL" name="00N5t000000qiTL" rows="3" wrap="soft"></textarea>
</label>
<label><input id="lead_source" name="lead_source" type="hidden" value="Web"/>
<input name="recordType" type="hidden" value="0125t0000008fRO"/></label>
<div class="g-recaptcha" data-sitekey="6LcNGYogAAAAADclFYm-xwcrTnUt4WhGW9yckdnG"></div>
<label><input name="submit" type="submit" class="button button--orange"/></label>
</form>
<h2>Checkboxes</h2>
<form class="generic-form">
<div class="checkbox">
<input id="00N5t000000qiTY" name="00N5t000000qiTY" type="checkbox" value="1"/>
<label for="00N5t000000qiTY">Tick to sign up to our newsletter:
</label>
</div>
<div class="radio">
<input id="00N5t000000qiTX-1" name="00N5t000000qiTX" type="radio" value="value-1"/>
<label for="00N5t000000qiTX-1">Radio value 1
</label>
</div>
<div class="radio">
<input id="00N5t000000qiTX-2" name="00N5t000000qiTX" type="radio" value="value-2"/>
<label for="00N5t000000qiTX-2">Radio value 2
</label>
</div>
</form>
<h2>All form inputs</h2>
<form class="generic-form">
{% for inputtype in inputtypes %}
<label for="input-{{ inputtype }}">{{ inputtype }}</label><input id="title" maxlength="40" name="title" size="20" type="{{ inputtype }}" placeholder="test placeholder" value="{{inputtype}}"/>
{% endfor %}
</form>
{
"inputtypes": [
"button",
"checkbox",
"color",
"date",
"datetime-local",
"email",
"file",
"hidden",
"image",
"month",
"number",
"password",
"radio",
"range",
"reset",
"search",
"submit",
"tel",
"text",
"time",
"url",
"week"
]
}
form.generic-form {
label {
font-size: 1.1875rem;
line-height: 1.3157894737;
font-weight: 400;
display: block;
margin-top: 1.3rem;
margin-bottom: 0rem;
}
&.fixed-width {
input[type=text],
input[type=email],
input[type=color],
input[type=url],
input[type=search],
input[type=tel],
input[type=number],
input[type=date],
input[type=datetime-local],
input[type=week],
input[type=time],
input[type=password],
input[type=month],
input[type=file],
textarea,
select {
width: 450px;
max-width: 100%;
}
}
input[type=text],
input[type=email],
input[type=color],
input[type=url],
input[type=search],
input[type=tel],
input[type=number],
input[type=date],
input[type=datetime-local],
input[type=week],
input[type=time],
input[type=password],
input[type=month],
input[type=file],
textarea,
select {
&:focus {
outline: 2px solid hsl(var(--yellow-hsl), 1);
outline-offset: 0;
-webkit-box-shadow: inset 0 0 0 2px;
box-shadow: inset 0 0 0 2px;
&:required {
outline: 2px solid hsl(var(--orange-hsl), 1);
}
}
font-size: 1.1875rem;
line-height: 1.3157894737;
margin-top: 5px;
padding: 5px;
width: auto;
min-width: 25%;
border: 2px solid hsl(var(--base-hsl), 1);
color: hsl(var(--base-hsl), 1);
background-color: #fff;
display: block;
&::placeholder {
color: hsl(var(--base-hsl), 0.7);
}
&.full-width {
width: 100%;
}
}
label.required::after {
content: " *";
color: hsl(var(--red-hsl), 1);
}
.note {
display: block;
margin-top: 0.3rem;
color: hsl(var(--base-hsl), 0.7);
}
input[type=search] {
border-radius: 8px;
}
input[type=color] {
width: 80px;
min-width: initial;
height: 38px;
padding: 2px;
}
/*********** Baseline, reset styles ***********/
input[type="range"] {
-webkit-appearance: none;
appearance: none;
background: transparent;
cursor: pointer;
}
/* Removes default focus */
input[type="range"]:focus {
outline: none;
}
/******** Chrome, Safari, Opera and Edge Chromium styles ********/
/* slider track */
input[type="range"]::-webkit-slider-runnable-track {
background-color: hsl(var(--teal-hsl), 1);
border-radius: 0.5rem;
height: 0.5rem;
}
/* slider thumb */
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
/* Override default look */
appearance: none;
margin-top: -4px;
/* Centers thumb on the track */
background-color: hsl(var(--base-hsl), 1);
border-radius: 0.5rem;
height: 1rem;
width: 1rem;
}
input[type="range"]:focus::-webkit-slider-thumb {
outline: 3px solid hsl(var(--yellow-hsl), 1);
outline-offset: 0.125rem;
}
/*********** Firefox styles ***********/
/* slider track */
input[type="range"]::-moz-range-track {
background-color: hsl(var(--teal-hsl), 1);
border-radius: 0.5rem;
height: 0.5rem;
}
/* slider thumb */
input[type="range"]::-moz-range-thumb {
background-color: hsl(var(--base-hsl), 1);
border: none;
/*Removes extra border that FF applies*/
border-radius: 0.5rem;
height: 1rem;
width: 1rem;
}
input[type="range"]:focus::-moz-range-thumb {
outline: 3px solid hsl(var(--yellow-hsl), 1);
outline-offset: 0.125rem;
}
.checkbox,
.radio {
display: block;
position: relative;
min-height: 40px;
margin-bottom: 10px;
padding-left: 40px;
clear: left;
input[type=checkbox],
input[type=radio] {
cursor: pointer;
position: absolute;
z-index: 1;
top: -2px;
left: -2px;
width: 44px;
height: 44px;
margin: 0;
opacity: 0;
}
label::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 34px;
height: 34px;
border: 2px solid hsl(var(--base-hsl), 1);
margin-right: 0.5rem;
background-color: #fff;
cursor: pointer;
}
input[type=checkbox]:checked+label::after,
input[type=radio]:checked+label::after {
opacity: 1;
}
label {
display: inline-block;
margin-top: 0;
margin-bottom: 0;
padding: 5px 6px 5px;
cursor: pointer;
-ms-touch-action: manipulation;
touch-action: manipulation;
}
label::after {
content: "";
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: absolute;
top: 12px;
left: 7px;
width: 19px;
height: 9px;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
border: solid;
border-top-color: currentcolor;
border-top-width: medium;
border-right-width: medium;
border-bottom-width: medium;
border-left-width: medium;
border-width: 0 0 5px 5px;
border-top-color: rgba(0, 0, 0, 0);
opacity: 0;
background: rgba(0, 0, 0, 0);
}
}
.radio {
label::before {
border-radius: 50%;
}
label::after {
content: "";
position: absolute;
top: 8px;
left: 8px;
width: 0;
height: 0;
border: 9px solid currentcolor;
border-radius: 50%;
opacity: 0;
background: currentcolor;
}
}
input[type=button],
input[type=reset],
button {
--border-color: hsla(var(--orange-hsl), 1);
--bg-color: #fff;
--text-color: hsla(var(--orange-hsl), 1);
@include button;
}
input[type=submit] {
--border-color: hsla(var(--orange-hsl), 1);
--text-color: #fff;
--bg-color: hsla(var(--orange-hsl), 1);
@include button;
}
}
No notes defined.