Skip to content

Commit c685821

Browse files
ronilaukkarinenronilaukkarinen
committed
Improve default checkboxes and radio buttons, 9.1.1
1 parent a0e2d5c commit c685821

File tree

15 files changed

+234
-297
lines changed

15 files changed

+234
-297
lines changed

‎CHANGELOG.md

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
1-
### [Unreleased]
1+
### 9.1.1: 2022-09-06
22

3+
* Improve form checkbox and radiob button styles
4+
* Form checkboxes and radio buttons: Add bouncy check animation
5+
* Clarify reset for checkboxes and radio buttons for gravity forms
36
* Combine `--line-height-paragraphs-blog` and `--line-height-paragraphs` to one unified CSS variable: `--line-height-paragraph`
47

58
### 9.1.0: 2022-09-01

‎bin/tasks/additions.sh

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ chmod 777 ${PROJECT_PATH}/media
1010

1111
echo "${YELLOW}Generating default README.md...${TXTRESET}"
1212

13-
NEWEST_AIR_VERSION="9.1.0"
13+
NEWEST_AIR_VERSION="9.1.1"
1414
NEWEST_WORDPRESS_VERSION="6.0.2"
1515
NEWEST_PHP_VERSION="7.4"
1616
CURRENT_DATE=$(LC_TIME=en_US date '+%d %b %Y' |tr ' ' '_');

‎css/dev/global.css

Lines changed: 64 additions & 88 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/dev/gutenberg-editor-styles.css

Lines changed: 64 additions & 82 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/prod/global.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/prod/gutenberg-editor-styles.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎functions.php

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
*
88
* @Date: 2019-10-15 12:30:02
99
* @Last Modified by: Roni Laukkarinen
10-
* @Last Modified time: 2022-09-01 16:05:39
10+
* @Last Modified time: 2022-09-06 15:29:13
1111
*
1212
* @package air-light
1313
*/
@@ -17,7 +17,7 @@
1717
/**
1818
* The current version of the theme.
1919
*/
20-
define( 'AIR_LIGHT_VERSION', '9.1.0' );
20+
define( 'AIR_LIGHT_VERSION', '9.1.1' );
2121

2222
// We need to have some defaults as comments or empties so let's allow this:
2323
// phpcs:disable Squiz.Commenting.InlineComment.SpacingBefore, WordPress.Arrays.ArrayDeclarationSpacing.SpaceInEmptyArray

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "air-light",
3-
"version": "9.1.0",
3+
"version": "9.1.1",
44
"description": "A minimalist WordPress starter theme.",
55
"author": "Digitoimisto Dude Oy (moro@dude.fi)",
66
"devDependencies": {

‎readme.txt

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ Tags: one-column, accessibility-ready, translation-ready
1212

1313
Requires at least: 5.0
1414
Tested up to: 6.0.2
15-
Stable tag: 9.1.0
15+
Stable tag: 9.1.1
1616
License: MIT License
1717
License URI: https://opensource.org/licenses/MIT
1818

‎sass/features/_gravity-forms.scss

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ body *[aria-invalid="true"] {
7878
}
7979

8080
textarea,
81-
input {
81+
input:not([type="checkbox"]):not([type="radio"]) {
8282
width: 100%;
8383
}
8484

@@ -87,6 +87,18 @@ body *[aria-invalid="true"] {
8787
display: flex;
8888
}
8989

90+
// Checkboxes & radio buttons
91+
.gfield_radio,
92+
.gfield_checkbox {
93+
display: grid;
94+
gap: 1rem;
95+
}
96+
97+
.gchoice {
98+
display: flex;
99+
gap: 1rem;
100+
}
101+
90102
.gfield_label {
91103
display: inline-flex;
92104
font-weight: var(--font-weight-bold);

‎sass/layout/_forms.scss

Lines changed: 75 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -29,32 +29,6 @@
2929
}
3030
}
3131

32-
// Select drop downs
33-
select {
34-
// doiuse-disable
35-
appearance: none;
36-
background-image: url('../../svg/select.svg');
37-
background-position: right var(--gap-select-icon) center;
38-
background-repeat: no-repeat;
39-
background-size: 11px auto;
40-
border-color: var(--color-border-forms);
41-
border-radius: var(--border-radius-select);
42-
border-style: solid;
43-
border-width: var(--border-width-input-field);
44-
color: var(--color-form-text);
45-
font-size: var(--font-size-input-fields);
46-
line-height: var(--form-line-height);
47-
max-width: 100%;
48-
min-width: 0;
49-
padding-bottom: var(--form-padding-vertical);
50-
padding-left: var(--form-padding-horizontal);
51-
padding-right: var(--form-padding-horizontal);
52-
padding-top: var(--form-padding-vertical);
53-
text-indent: 1px;
54-
transition: none;
55-
width: 100%;
56-
}
57-
5832
// Labels
5933
legend,
6034
label {
@@ -109,108 +83,98 @@ input[type="search"] {
10983
}
11084
}
11185

112-
// Radio buttons and checkboxes
113-
input[type="radio"],
114-
input[type="checkbox"] {
86+
// Select drop downs
87+
select {
88+
// doiuse-disable
89+
appearance: none;
90+
background-image: url('data:image/svg+xml, %3Csvg width="12" height="9" viewBox="0 0 12 9" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M2.049 1.552L6.22 6.268a.188.188 0 00.28 0l4.173-4.716" stroke="%23212121" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cdefs%3E%3Cpath fill="none" transform="translate(.861 .45)" d="M0 0h10.544v7.95H0z"/%3E%3C/defs%3E%3C/svg%3E%0A');
91+
background-position: right var(--gap-select-icon) center;
92+
background-repeat: no-repeat;
93+
background-size: 11px auto;
94+
border-color: var(--color-border-forms);
95+
border-radius: var(--border-radius-select);
96+
border-style: solid;
97+
border-width: var(--border-width-input-field);
98+
color: var(--color-form-text);
11599
font-size: var(--font-size-input-fields);
116-
height: var(--size-radio-button);
117-
margin: 0;
118-
margin-top: calc((1em * var(--line-height-checkbox) - var(--size-radio-button)) / 2);
119-
opacity: 0;
120-
padding: 0;
121-
pointer-events: none;
122-
// Hide native buttons
123-
position: absolute;
124-
width: var(--size-radio-button);
125-
}
126-
127-
// Labels for radio buttons and checkboxes
128-
input[type="radio"] + label,
129-
input[type="checkbox"] + label {
130-
align-items: flex-start;
131-
cursor: pointer;
132-
display: inline-flex;
133-
line-height: var(--line-height-checkbox);
100+
line-height: var(--form-line-height);
101+
max-width: 100%;
102+
min-width: 0;
103+
padding-bottom: var(--form-padding-vertical);
104+
padding-left: var(--form-padding-horizontal);
105+
padding-right: var(--form-padding-horizontal);
106+
padding-top: var(--form-padding-vertical);
107+
text-indent: 1px;
108+
transition: none;
109+
width: 100%;
134110
}
135111

136-
// Custom buttons - basic style
137-
input[type="radio"] + label::before,
138-
input[type="checkbox"] + label::before {
139-
align-self: center;
140-
background-color: var(--color-white);
141-
background-position: center;
142-
background-repeat: no-repeat;
143-
border-color: var(--color-checkbox);
144-
border-style: solid;
145-
border-width: var(--border-width-checkbox);
146-
content: '';
147-
display: inline-flex;
148-
flex-shrink: 0;
149-
height: var(--size-radio-button);
150-
margin-right: var(--gap-checkbox);
151-
position: relative;
152-
top: calc(var(--border-width-checkbox) / 2);
153-
transition: transform .2s, border .2s;
154-
width: var(--size-radio-button);
112+
// Checkboxes & radio buttons
113+
// Learn about this technique:
114+
// @link https://moderncss.dev/pure-css-custom-checkbox-style/
115+
input[type="radio"],
116+
input[type="checkbox"] {
117+
appearance: none;
118+
background-color: var(--color-background-input-field);
119+
border: 1px solid var(--color-border-forms);
120+
color: currentColor;
121+
display: grid;
122+
// stylelint-disable-next-line property-disallowed-list
123+
font: inherit;
124+
height: var(--size-checkbox);
125+
margin: 0;
126+
place-content: center;
127+
width: var(--size-checkbox);
155128
}
156129

157-
// Radio only style
158-
input[type="radio"] + label::before {
130+
// Round style radio buttons
131+
input[type="radio"]::before,
132+
input[type="radio"] {
159133
border-radius: 50%;
160134
}
161135

162-
// Checkbox only style
163-
input[type="checkbox"] + label::before {
136+
// Square style checkboxes
137+
input[type="checkbox"]::before,
138+
input[type="checkbox"] {
164139
border-radius: var(--border-radius-checkbox);
165140
}
166141

167-
// Radio button and checkbox checked states
168-
input[type="radio"]:checked + label::before,
169-
input[type="checkbox"]:checked + label::before {
170-
background-color: var(--color-checkbox);
171-
border-color: var(--color-checkbox);
172-
box-shadow: none;
173-
transition: transform .2s;
174-
}
175-
176-
// Radio button and checkbox active states
177-
input[type="radio"]:active + label::before,
178-
input[type="checkbox"]:active + label::before {
142+
input[type="radio"]::before,
143+
input[type="checkbox"]::before {
144+
background-color: var(--color-checkbox-checked);
145+
// Change checkbox color by changing 7effe1 to something else below
146+
background-image: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" heighg="16"%3E%3Cg class="nc-icon-wrapper" stroke-width="3" fill="%237effe1" stroke="%237effe1"%3E%3Cpolyline fill="none" stroke="%237effe1" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="1, 9 5, 13 15, 3" data-cap="butt"%3E%3C/polyline%3E%3C/g%3E%3C/svg%3E%0A');
147+
background-position: center;
148+
background-size: var(--size-checkbox-marker) var(--size-checkbox-marker);
149+
border: 1px solid var(--color-checkbox-checked);
150+
content: '';
151+
height: var(--size-checkbox);
152+
opacity: 0;
179153
transform: scale(.8);
180154
transition: transform .2s;
155+
width: var(--size-checkbox);
181156
}
182157

183-
// Radio button icon
184-
input[type="radio"]:checked + label::before {
185-
background-image: url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg class='nc-icon-wrapper' fill='%23ffffff'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23ffffff'%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
186-
background-size: var(--size-radio-button-marker);
187-
}
188-
189-
// Checkbox button icon
190-
input[type="checkbox"]:checked + label::before {
191-
background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpolyline points='1 6.5 4 9.5 11 2.5' fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
192-
background-size: var(--size-checkbox-marker);
158+
input[type="radio"]:checked::before,
159+
input[type="checkbox"]:checked::before {
160+
opacity: 1;
161+
transform: scale(1);
193162
}
194163

195-
// Radio button and checkbox focus states
196-
input[type="radio"]:focus + label::before,
197-
input[type="checkbox"]:focus + label::before,
198-
input[type="radio"]:checked:active + label::before,
199-
input[type="checkbox"]:checked:active + label::before {
200-
border-color: var(--color-checkbox);
201-
box-shadow: var(--color-checkbox-outline);
164+
input[type="radio"]:checked,
165+
input[type="checkbox"]:checked {
166+
// Hide element visually on click so it creates a bouncy animation illusion
167+
background-color: transparent;
168+
border-color: transparent;
202169
}
203170

204-
// Radio button and checkbox checked + active states
205-
input[type="radio"]:checked:active + label::before,
206-
input[type="checkbox"]:checked:active + label::before {
207-
transform: none;
208-
transition: none;
209-
}
210-
211-
// Radio button and checkbox hovers
212-
// stylelint-disable-next-line selector-max-pseudo-class
213-
input[type="radio"]:not(:checked):not(:focus) + label:hover::before,
214-
input[type="checkbox"]:not(:checked):not(:focus) + label:hover::before {
215-
border-color: var(--color-checkbox-border-hover);
171+
input[type="radio"]:hover,
172+
input[type="radio"] + label:hover,
173+
input[type="radio"]:focus,
174+
input[type="radio"] + label:focus,
175+
input[type="checkbox"]:hover,
176+
input[type="checkbox"] + label:hover,
177+
input[type="checkbox"]:focus,
178+
input[type="checkbox"] + label:focus {
179+
cursor: pointer;
216180
}

‎sass/layout/_typography.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ table,
4141
tr,
4242
%default {
4343
font-size: var(--font-size-paragraphs);
44-
line-height: var(--line-height-paragraphs);
44+
line-height: var(--line-height-paragraph);
4545
}
4646

4747
// Heading defaults

‎sass/variables/_forms.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
--color-checkbox: var(--color-east-bay);
1515
--color-checkbox-outline: 0 0 0 3px rgb(84 87 115 / .2);
1616
--color-checkbox-border-hover: color.adjust(#545773, 15%);
17+
--color-checkbox-checked: var(--color-form-label-text);
1718
--color-placeholder: var(--color-paragraph);
1819
--color-placeholder-focus: var(--color-black);
1920
--opacity-placeholder: .4;
@@ -37,7 +38,7 @@
3738
--form-padding-horizontal: 1.5rem;
3839
--gap-checkbox: 10px;
3940
--gap-select-icon: 1.5rem;
40-
--line-height-checkbox: var(--line-height-paragraphs);
41+
--size-checkbox: 2.2rem;
4142
--size-checkbox-marker: 12px;
4243
--size-radio-button: 16px;
4344
--size-radio-button-marker: 8px;

‎style.css

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ Theme URI: https://github.com/digitoimistodude/air-light
44
Author: Digitoimisto Dude Oy
55
Author URI: https://www.dude.fi
66
Description: Hi. I'm a starter theme called <code>Air-light</code>, or <em>air</em>, if you like. I'm a theme based on Automattic's underscores and I'm meant for hacking so don't use me as a <em>Parent Theme</em> as-is. Instead try turning me into the next, most awesome, WordPress theme out there. That's what I'm here for.
7-
Version: 9.1.0
7+
Version: 9.1.1
88
99
------8<----------
1010
Please do this before your actual theme is ready to go live:
@@ -20,11 +20,11 @@ If you see this, contact the site admin.
2020
/*---------------------------------------------------------------
2121
>>> Air-light theme version information, only for AIR developers
2222
-----------------------------------------------------------------
23-
@version 2022-09-01
23+
@version 2022-09-06
2424
@since 2016-01-28
2525
26-
Tested up to: 5.9.3
27-
Requires PHP: 7.2
26+
Tested up to: 6.0.2
27+
Requires PHP: 7.4
2828
License: MIT License
2929
License URI: LICENSE
3030
Text Domain: air-light

‎svg/select.svg

Lines changed: 0 additions & 1 deletion
This file was deleted.

0 commit comments

Comments
 (0)