Skip to content

Commit d669589

Browse files
zombieFoxzombieFox
committed
[design] improve form grid styles
1 parent 1596362 commit d669589

File tree

2 files changed

+48
-83
lines changed

2 files changed

+48
-83
lines changed

‎src/css/form.css‎

Lines changed: 44 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -421,7 +421,7 @@ input[type="radio"]:checked:focus+label:before{
421421

422422
input[type="checkbox"]:disabled+label:before,
423423
input[type="radio"]:disabled+label:before{
424-
color:rgb(var(--forform-icon-disabled));
424+
color:rgb(var(--form-icon-disabled));
425425
cursor: default;
426426
}
427427

@@ -948,7 +948,6 @@ input[type="range"]:disabled::-moz-range-progress{
948948
background-color:rgb(var(--form-grid-background));
949949
padding:calc(var(--layout-line-width) *4);
950950
display: inline-grid;
951-
grid-gap:var(--layout-line-width);
952951
overflow: hidden;
953952
transition: background-color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
954953
}
@@ -997,103 +996,69 @@ input[type="range"]:disabled::-moz-range-progress{
997996

998997
.form-gridinput[type="checkbox"]+label,
999998
.form-gridinput[type="radio"]+label{
1000-
background-color:rgb(var(--form-grid-input-background));
1001999
background-color: transparent;
10021000
display: block;
1003-
width:1.5em;
1004-
height:1.5em;
1005-
border-radius:50%;
1001+
width:2.5em;
1002+
height:2.5em;
10061003
position: relative;
10071004
transition: none;
10081005
z-index:1;
1009-
transform:scale(1);
1010-
transition: background-color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
1011-
}
1012-
1013-
.form-gridinput[type="checkbox"]:focus+label,
1014-
.form-gridinput[type="checkbox"]:hover+label,
1015-
.form-gridinput[type="radio"]:focus+label,
1016-
.form-gridinput[type="radio"]:hover+label{
1017-
background-color:rgb(var(--form-grid-input-background-focus-hover));
1018-
box-shadow:var(--form-hover-ring);
1019-
z-index:2;
10201006
}
10211007

1022-
.form-gridinput[type="checkbox"]:active+label,
1023-
.form-gridinput[type="radio"]:active+label{
1024-
background-color:rgb(var(--form-grid-input-background-active));
1025-
box-shadow:var(--form-focus-ring-accent);
1026-
z-index:2;
1027-
}
1028-
1029-
.form-gridinput[type="checkbox"]:checked+label,
1030-
.form-gridinput[type="radio"]:checked+label{
1031-
background-color:rgb(var(--form-grid-input-background-checked));
1032-
z-index:2;
1008+
.form-gridinput[type="checkbox"]+label:before,
1009+
.form-gridinput[type="radio"]+label:before{
1010+
content:"";
1011+
background-color:rgb(var(--form-grid-input-background));
1012+
margin:0;
1013+
display: block;
1014+
border-radius:50%;
1015+
position: absolute;
1016+
top:50%;
1017+
left:50%;
1018+
width:0.5em;
1019+
height:0.5em;
1020+
transform:scale(1) translate(-50%,-50%);
1021+
transition: background-color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast), width var(--layout-timing-extra-fast), height var(--layout-timing-extra-fast), top var(--layout-timing-extra-fast), left var(--layout-timing-extra-fast);
10331022
}
10341023

1035-
.form-gridinput[type="checkbox"]:checked:focus+label,
1036-
.form-gridinput[type="checkbox"]:checked:hover+label,
1037-
.form-gridinput[type="radio"]:checked:focus+label,
1038-
.form-gridinput[type="radio"]:checked:hover+label{
1024+
.form-gridinput[type="checkbox"]:focus+label:before,
1025+
.form-gridinput[type="checkbox"]:hover+label:before,
1026+
.form-gridinput[type="radio"]:focus+label:before,
1027+
.form-gridinput[type="radio"]:hover+label:before{
10391028
background-color:rgb(var(--form-grid-input-background-focus-hover));
10401029
box-shadow:var(--form-hover-ring);
1041-
z-index:2;
1030+
transform:scale(1) translate(-50%,-50%);
10421031
}
10431032

1044-
.form-gridinput[type="checkbox"]:checked:active+label,
1045-
.form-gridinput[type="radio"]:checked:active+label{
1033+
.form-gridinput[type="checkbox"]:active+label:before,
1034+
.form-gridinput[type="radio"]:active+label:before{
10461035
background-color:rgb(var(--form-grid-input-background-active));
10471036
box-shadow:var(--form-focus-ring-accent);
1048-
z-index:2;
1037+
transform:scale(1) translate(-50%,-50%);
10491038
}
10501039

1051-
.form-gridinput[type="checkbox"]:disabled:focus+label,
1052-
.form-gridinput[type="checkbox"]:disabled:hover+label,
1053-
.form-gridinput[type="radio"]:disabled:focus+label,
1054-
.form-gridinput[type="radio"]:disabled:hover+label{
1055-
background-color: transparent;
1040+
.form-gridinput[type="checkbox"]:checked+label:before,
1041+
.form-gridinput[type="radio"]:checked+label:before{
1042+
background-color:rgb(var(--form-grid-input-background-checked));
1043+
width:1em;
1044+
height:1em;
1045+
transform:scale(1) translate(-50%,-50%);
1046+
}
1047+
1048+
.form-gridinput[type="checkbox"]:disabled+label:before,
1049+
.form-gridinput[type="checkbox"]:disabled:focus+label:before,
1050+
.form-gridinput[type="checkbox"]:disabled:hover+label:before,
1051+
.form-gridinput[type="checkbox"]:disabled:active+label:before,
1052+
.form-gridinput[type="checkbox"]:disabled:checked+label:before,
1053+
.form-gridinput[type="radio"]:disabled+label:before,
1054+
.form-gridinput[type="radio"]:disabled:focus+label:before,
1055+
.form-gridinput[type="radio"]:disabled:hover+label:before,
1056+
.form-gridinput[type="radio"]:disabled:active+label:before,
1057+
.form-gridinput[type="radio"]:disabled:checked+label:before{
1058+
background-color:rgb(var(--form-grid-input-background-disabled));
10561059
box-shadow: none;
10571060
}
10581061

1059-
.form-gridinput[type="checkbox"]:disabled:active+label,
1060-
.form-gridinput[type="radio"]:disabled:active+label{
1061-
background-color: transparent;
1062-
}
1063-
1064-
.form-gridinput[type="checkbox"]:disabled:checked+label,
1065-
.form-gridinput[type="radio"]:disabled:checked+label{
1066-
background-color:rgb(var(--form-checkbox-radio-disabled-label));
1067-
}
1068-
1069-
.form-gridinput[type="checkbox"]:disabled+label,
1070-
.form-gridinput[type="checkbox"]:disabled:focus+label,
1071-
.form-gridinput[type="checkbox"]:disabled:hover+label,
1072-
.form-gridinput[type="checkbox"]:disabled:active+label,
1073-
.form-gridinput[type="radio"]:disabled+label,
1074-
.form-gridinput[type="radio"]:disabled:focus+label,
1075-
.form-gridinput[type="radio"]:disabled:hover+label,
1076-
.form-gridinput[type="radio"]:disabled:active+label{
1077-
background-color: transparent;
1078-
}
1079-
1080-
.form-gridinput[type="checkbox"]:disabled:checked+label,
1081-
.form-gridinput[type="radio"]:disabled:checked+label{
1082-
background-color:rgb(var(--form-checkbox-radio-disabled-label));
1083-
}
1084-
1085-
.form-gridinput[type="checkbox"]+label:before,
1086-
.form-gridinput[type="radio"]+label:before{
1087-
content: none;
1088-
}
1089-
1090-
.form-gridinput[type="checkbox"]:focus+label:before,
1091-
.form-gridinput[type="checkbox"]:hover+label:before,
1092-
.form-gridinput[type="radio"]:focus+label:before,
1093-
.form-gridinput[type="radio"]:hover+label:before{
1094-
transform:scale(1);
1095-
}
1096-
10971062
.form-indent{
10981063
margin-left:2.25em;
10991064
}

‎src/css/variables.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -134,14 +134,14 @@
134134
--form-range-progress-background-focus-hover:var(--theme-accent);
135135
--form-range-progress-background-active:var(--theme-accent);
136136
--form-range-progress-background-disabled:var(--theme-gray-02);
137-
--form-grid-input-background:var(--theme-gray-12);
137+
--form-grid-input-background:var(--theme-gray-03);
138138
--form-grid-input-background-focus-hover:var(--theme-gray-16);
139139
--form-grid-input-background-active:var(--theme-style-text);
140140
--form-grid-input-background-checked:var(--theme-gray-14);
141-
--form-grid-input-background-disabled:var(--theme-gray-04);
141+
--form-grid-input-background-disabled:var(--theme-gray-03);
142142
--form-grid-background:var(--theme-gray-02);
143-
--form-grid-background-hover:var(--theme-gray-02);
144-
--form-grid-background-focus:var(--theme-gray-02);
143+
--form-grid-background-hover:var(--theme-gray-01);
144+
--form-grid-background-focus:var(--theme-gray-01);
145145
--form-grid-background-disabled:var(--theme-gray-01);
146146
--form-grid-border:var(--theme-gray-08);
147147
--form-grid-border-hover-focus:var(--theme-gray-20);

0 commit comments

Comments
(0)