secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

More polished form fields

Browse Source
This commit is contained in:
James Barnsley
2018-05-23 13:55:14 +12:00
parent e3189212b7
commit e92a43d202
5 changed files with 25422 additions and 23460 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
src/scss/global/_forms.scss
View File

@ -39,6 +39,66 @@ select {
}
}
input[type="radio"]{
& + .label:before {
content: ' ';
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
position: absolute;
background: rgba(255,255,255,0.1);
top: 4px;
left: 0;
}
&:checked + .label:after {
content: ' ';
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
position: absolute;
top: 12px;
left: 7px;
background: $white;
}
&:focus + .label:before,
&:active + .label:before {
background: rgba(255,255,255,0.3);
}
}
input[type="checkbox"]{
& + .label:before {
font-family: "Material Icons";
font-size: 14px;
content: '';
color: $white;
background: rgba(255,255,255,0.1);
display: inline-block;
padding: 0.2em;
height: 1.1em;
width: 1.1em;
text-align: center;
position: absolute;
top: 3px;
left: 0;
border-radius: 3px;
}
&:checked + .label:before {
content: '\e5ca';
}
&:focus + .label:before,
&:active + .label:before {
background: rgba(255,255,255,0.3);
}
}
select {
max-width: 100%;
@ -222,6 +282,7 @@ input[type="submit"] {
.field {
@include clearfix();
@include noselect();
display: block;
padding-bottom: 12px;
@ -286,48 +347,6 @@ input[type="submit"] {
}
}
&.radio {
input + .label:before {
content: ' ';
display: inline-block;
width: 14px;
height: 14px;
border-radius: 50%;
border: 2px solid $mid_grey;
position: absolute;
top: 4px;
left: 0;
}
input:checked + .label:before {
background: $mid_grey;
box-shadow: inset 0px 0px 0px 4px #222222;
}
}
&.checkbox {
input + .label:before {
font-family: "Material Icons";
font-size: 14px;
content: '';
color: $white;
background: $grey;
display: inline-block;
padding: 0.2em;
height: 1.1em;
width: 1.1em;
text-align: center;
position: absolute;
top: 3px;
left: 0;
border-radius: 3px;
}
input:checked + .label:before {
content: '\e5ca';
}
}
&.range {
position: relative;