Skip to content

Commit

Permalink
adjust font size - convert to sass
Browse files Browse the repository at this point in the history
  • Loading branch information
@jmealing
jmealing committed Aug 20, 2019
1 parent 6661905 commit dc84403
Show file tree
Hide file tree
Showing 2 changed files with 122 additions and 204 deletions.
8 changes: 4 additions & 4 deletions working-on/selectors-radios-checks/custom-3.css
View file
Expand Up @@ -5,14 +5,14 @@
}

.checkbox-small label {
font-size: 17px !important; /* important needed for now, will rmv later */
font-size: 18px !important; /* important needed for now, will rmv later */
}
/* increase field flow sizing */

.wb-fieldflow-form legend.h5 {
margin-top: 0px !important; /*will not use important tags on PR, will correct source */
font-size: 22px !important; /*will not use important tags on PR, will correct source */
margin-bottom: 15px !important; /*will not use important tags on PR, will correct source */
margin-top: 0px; /*will not use important tags on PR, will correct source */
font-size: 22px; /*will not use important tags on PR, will correct source */
margin-bottom: 15px; /*will not use important tags on PR, will correct source */
}

.wb-fieldflow-form .btn {
Expand Down
318 changes: 118 additions & 200 deletions working-on/selectors-radios-checks/sass.css
View file
@@ -1,232 +1,150 @@

/* bigger label */
label {
font-size: 20px !important; /*will not use important tags on PR, will correct source - 1em(?) assign to this pattern only */
}

.checkbox-small label {
font-size: 17px !important; /* important needed for now, will rmv later */
.wb-fieldflow-form legend.h5 {
margin-top: 0px;
font-size: 22px;
margin-bottom: 15px;
}
/* increase field flow sizing */

legend.h5 {
margin-top: 0px !important; /*will not use important tags on PR, will correct source */
font-size: 22px !important; /*will not use important tags on PR, will correct source */
margin-bottom: 15px !important; /*will not use important tags on PR, will correct source */
}

.btn {
.wb-fieldflow-form .btn {
font-size: 20px !important; /*will not use important tags on PR, will correct source */
font-variant-ligatures: no-common-ligatures;
}

.pagedetails .btn {
font-size: 16px !important; /*will not use important tags on PR, will correct source */
font-variant-ligatures: no-common-ligatures;
}

input[type="reset"], input[type="button"], input[type="submit"]
.wb-fieldflow-form input[type="reset"], input[type="button"], input[type="submit"]

{
height: 50px;
}

/* better focus on buttons */

.btn-primary:focus, .btn-primary.focus {
box-shadow: 0 0 5pt 4pt rgb(59, 153, 252);
outline: 2px solid white;
}
/* custom checkboxes */

.gc-form input {
position: absolute;
opacity: 0;
}

.gc-form {
clear: both;
padding-top: 6px;
}

.gc-form .checkbox,
.gc-form .radio,
.gc-form .form-checkbox,
.gc-form .form-radio {

position: relative;
cursor: pointer;
font-weight: normal;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

}

.gc-form .checkbox,
.gc-form .radio {

padding-left: 30px;
margin-bottom: 35px;

}

.gc-form .checkbox-small {
padding-left: 16px;
margin-bottom: 25px;
}

.gc-form .form-checkbox,
.gc-form .form-radio {

margin-right: 30px;
margin-bottom: 25px;
min-width: 26%; /* prevents weird overlapping */

}


.gc-form .form-checkbox label,
.gc-form .form-radio label {
padding-left: 50px;

}

.gc-form .checkbox label::before,
.gc-form .radio label::before,
.gc-form .form-checkbox label::before,
.gc-form .form-radio label::before {
content: "";
box-sizing: border-box;
position: absolute;
display: inline-block;
top: 0;
left: 0;
width: 36px;
height: 36px;
border: 2px solid #333;
margin-top: -4px;

}

.gc-form .checkbox-small label::before {
content: "";
box-sizing: border-box;
position: absolute;
display: inline-block;
top: 0;
left: 0;
width: 24px;
height: 24px;
border: 2px solid #333;
margin-top: 0;
.gc-form {

label {
font-size: 20px;
}
.checkbox-small label {
font-size: 18px !important;
}
input {
position: absolute;
opacity: 0;
}
.checkbox, .radio, .form-checkbox, .form-radio {
position: relative;
cursor: pointer;
font-weight: normal;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.checkbox, .radio {
padding-left: 30px;
margin-bottom: 35px;
}
.checkbox-small {
padding-left: 16px;
margin-bottom: 25px;
}
.form-checkbox, .form-radio {
margin-right: 30px;
margin-bottom: 25px;
min-width: 26%; /* prevents weird overlapping */
}
.form-checkbox label, .form-radio label {
padding-left: 50px;
}
.checkbox label::before, .radio label::before, .form-checkbox label::before, .form-radio label::before {
content: "";
box-sizing: border-box;
position: absolute;
display: inline-block;
top: 0;
left: 0;
width: 36px;
height: 36px;
border: 2px solid #333;
margin-top: -4px;
}
.checkbox-small label::before {
content: "";
box-sizing: border-box;
position: absolute;
display: inline-block;
top: 0;
left: 0;
width: 24px;
height: 24px;
border: 2px solid #333;
margin-top: 0;
}
radio label::before, .form-radio label::before {
content: "";
border-radius: 50%;
}
.checkbox label::after, .form-checkbox label::after {
content: "";
display: inline-block;
position: absolute;
left: 12px;
top: 0px;
width: 13px;
height: 22px;
border: solid #333;
border-width: 0 5px 5px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.checkbox-small label::after {
content: "";
display: inline-block;
position: absolute;
left: 8px;
top: 2px;
width: 8px;
height: 14px;
border: solid #333;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.radio label::after, .form-radio label::after {
content: "";
display: inline-block;
position: absolute;
top: 4px;
left: 8px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #333;
}


.gc-form .radio label::before,
.gc-form .form-radio label::before {
content: "";
border-radius: 50%;
}


.gc-form .checkbox label::after,
.gc-form .form-checkbox label::after {
content: "";
display: inline-block;
position: absolute;
left: 12px;
top: 0px;
width: 13px;
height: 22px;
border: solid #333;
border-width: 0 5px 5px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);

}

.gc-form .checkbox-small label::after {
content: "";
display: inline-block;
position: absolute;
left: 8px;
top: 2px;
width: 8px;
height: 14px;
border: solid #333;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);

}

.gc-form .radio label::after,
.gc-form .form-radio label::after {
content: "";
display: inline-block;
position: absolute;
top: 4px;
left: 8px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #333;
}

/* hide the check also SASSED */
/* .gc-form .form-checkbox input[type="checkbox"] + label::after,
.gc-form .form-radio input[type="radio"] + label::after,
.gc-form .checkbox input[type="checkbox"] + label::after,
.gc-form .radio input[type="radio"] + label::after {
content: none;
} */

/* sass example gc-form? */

.gc-form {
.form-checkbox input[type="checkbox"] + label::after, .form-radio input[type="radio"] + label::after, .checkbox input[type="checkbox"] + label::after, .radio input[type="radio"] + label::after {
content: none;
}
.radio input[type="radio"]:checked + label::after, .checkbox input[type="checkbox"]:checked + label::after, .form-radio input[type="radio"]:checked + label::after, .form-checkbox input[type="checkbox"]:checked + label::after, {
content: "";
}
}

/* unhide check when checked SASSED above */
/* .gc-form .form-checkbox input[type="checkbox"]:checked + label::after,
.gc-form .form-radio input[type="radio"]:checked + label::after,
.gc-form .checkbox input[type="checkbox"]:checked + label::after,
.gc-form .radio input[type="radio"]:checked + label::after {
content: "";
} */

/* add focus */
.gc-form .checkbox input[type="checkbox"]:focus + label::before,
.gc-form .form-checkbox input[type="checkbox"]:focus + label::before,
.gc-form .form-radio input[type="radio"]:focus + label::before,
.gc-form .radio input[type="radio"]:focus + label::before {
.checkbox input[type="checkbox"]:focus + label::before, .form-checkbox input[type="checkbox"]:focus + label::before, .form-radio input[type="radio"]:focus + label::before, .radio input[type="radio"]:focus + label::before {
box-shadow: 0 0 3pt 2pt rgb(59, 153, 252);
}
.checkbox-green label::after {
content: "";
border: solid white;
border-width: 0 5px 5px 0;
}
.checkbox-green input[type="checkbox"]:checked + label:before {
background-color: #318000;
}
}


/* for green checks */

.gc-form .checkbox-green label::after {
content: "";
border: solid white;
border-width: 0 5px 5px 0;
}

/* for green checks */
.gc-form .checkbox-green input[type="checkbox"]:checked + label:before {
background-color: #318000;
}

@media only screen and (max-width: 1200px) {

.gc-form .form-checkbox,
Expand Down

0 comments on commit dc84403

Please sign in to comment.