Skip to content
This repository has been archived by the owner on Mar 27, 2023. It is now read-only.

Commit

Permalink
Select Icon, checkbox, radio button cross browser fix
Browse files Browse the repository at this point in the history
  • Loading branch information
@saraf22
saraf22 committed Nov 6, 2019
1 parent 11d3688 commit a4ed67c
Show file tree
Hide file tree
Showing 10 changed files with 245 additions and 27 deletions.
131 changes: 117 additions & 14 deletions app/assets/stylesheets/member-facing/form.scss
View file
@@ -1,3 +1,4 @@
// .overflow-container::-webkit-scrollbar { width: 0 !important }
.form__group,
.sweet-placeholder {
input,
Expand All @@ -9,6 +10,8 @@
&.has-error {
.selectize-control.single .selectize-input {
border-color: $orange;
-webkit-appearance: none;
border-radius: 0;
}
}
}
Expand Down Expand Up @@ -45,7 +48,6 @@
.selectize-control.single .selectize-input,
.hosted-fields__host {
font-size: 18px;
line-height: 18px;
@include box-sizing(border-box);
border: 2px solid white;
background: #f9f9f9;
Expand All @@ -54,7 +56,6 @@
width: 100%;
outline: none;
box-shadow: none;

&.hosted-fields__host {
padding: 0 16px;
}
Expand All @@ -72,16 +73,73 @@
}
}
input[type='radio'] {
cursor: pointer;
margin-top: 0;
margin-right: 14px;
width: auto;
position: relative;
top: 0px;
float: left;
max-width: 30px;
max-height: 30px;
border: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-tap-highlight-color: transparent;
}

input[type='radio']::before {
width: 15px;
height: 15px;
border-radius: 15px;
top: -18px;
left: -1px;
position: relative;
background-color: #d1d3d1;
content: '';
display: inline-block;
visibility: visible;
border: 2px solid white;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

input[type='radio']:checked::before {
width: 15px;
height: 15px;
border-radius: 15px;
top: -18px;
left: -1px;
position: relative;
background-color: #00c0cf;
content: '';
display: inline-block;
visibility: visible;
border: 2px solid white;
transition: all 0.2s;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
// input[type='radio'] {
// margin-top: 0;
// margin-right: 14px;
// width: auto;
// float: left;
// border-radius: 50%;
// border: 2px solid #00c0cf;
// transform: scale(0.5);
// }
select {
min-height: 58px;
border-radius: 4px;
background-color: #f9f9f9;
font-weight: 200;
font-weight: 400;
padding-top: 25px;
-webkit-appearance: none;
border-radius: 0;
font-family: 'Montserrat', sans-serif;
}
@media (max-width: 420px) {
input:not([type='checkbox']):not([type='radio']) {
Expand All @@ -104,7 +162,6 @@
label.checkbox-label {
background: transparent;
padding: 0;
padding-left: 25px;
margin: 20px 0;
}
textarea {
Expand All @@ -115,6 +172,8 @@
.selectize-dropdown.single {
border: $teal 2px solid;
border-top: none;
-webkit-appearance: none;
border-radius: 0;
.option.active {
background-color: $teal;
color: white;
Expand All @@ -123,6 +182,8 @@

.selectize-control {
height: 60px;
-webkit-appearance: none;
border-radius: 0;
}
}

Expand All @@ -137,15 +198,51 @@ label.checkbox-label {
padding-left: 20px;
position: relative;
input[type='checkbox'] {
width: 14px;
height: 14px;
padding: 0;
margin: 0;
top: 0;
left: 0;
cursor: pointer;
position: relative;
left: -5px;
float: left;
max-width: 30px;
max-height: 30px;
border: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: transparent;
-webkit-tap-highlight-color: transparent;
}
input[type='checkbox']:before {
width: 15px;
height: 15px;
position: relative;
background-color: #d1d3d1;
content: '';
position: absolute;
vertical-align: bottom;
*overflow: hidden;
top: -4px;
right: 0;
display: flex;
align-items: center;
justify-content: center;
visibility: visible;
border: 2px solid white;
}
input[type='checkbox']:checked:before {
width: 15px;
height: 15px;
content: '\2713\0020';
position: absolute;
top: -4px;
line-height: 0.8;
right: 0;
color: #00c0cf;
font-size: 14px;
background: transparent;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
visibility: visible;
border: 2px solid;
}
}

Expand All @@ -160,7 +257,8 @@ label.checkbox-label {
}
label {
margin-top: 15px;
display: block;
display: flex;
width: 100%;
}
}

Expand Down Expand Up @@ -212,12 +310,17 @@ label.checkbox-label {
padding: 24px 18px 12px;
font-size: 18px;
line-height: 21px;
-webkit-appearance: none;
border-radius: 0;
font-family: 'Montserrat', sans-serif;
}
}
.form--big .sweet-placeholder .selectize-control.single .selectize-input {
padding: 23px 18px 11px;
font-size: 18px;
line-height: 21px;
-webkit-appearance: none;
border-radius: 0;
}
a {
cursor: pointer;
Expand Down
11 changes: 7 additions & 4 deletions app/assets/stylesheets/member-facing/fundraiser.scss
View file
Expand Up @@ -261,6 +261,8 @@
.selectize-input,
div.BraintreeCardFields__hosted-field,
.SweetSelect .Select > .Select-control {
-webkit-appearance: none;
border-radius: 0;
&.braintree-hosted-fields-focused,
&:focus {
border-color: $teal;
Expand Down Expand Up @@ -323,16 +325,17 @@
}
.selectize-input {
border: #b2b5ba;
-webkit-appearance: none;
border-radius: 0;
}
.Checkbox {
line-height: 16px;
margin: 0;
}
label.Checkbox__label {
font-size: 16px;
input {
position: relative;
}
display: block;
padding-left: 20px;
position: relative;
}
}
}
Expand Down
12 changes: 11 additions & 1 deletion app/assets/stylesheets/member-facing/petition.scss
View file
Expand Up @@ -56,7 +56,6 @@ $mobile-width: 700px;
box-shadow: 0 6px 18px 0 rgba(0, 0, 0, 0.07);
border: solid 0.4px #dfdfdf;
position: absolute;
overflow: visible;
width: 100%;
@include box-sizing(border-box);
}
Expand Down Expand Up @@ -88,6 +87,7 @@ $mobile-width: 700px;
&__submit-button {
margin-top: 15px;
float: left;
margin-bottom: 30px;
}
&__submit-button:focus {
background: #f73415;
Expand Down Expand Up @@ -188,6 +188,16 @@ $mobile-width: 700px;
top: 10px;
cursor: pointer;
z-index: 100;
background: white;
position: fixed;
height: 20px;
width: 20px;
padding: 5px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
}
}

Expand Down
2 changes: 2 additions & 0 deletions app/assets/stylesheets/member-facing/registration.scss
View file
Expand Up @@ -41,6 +41,8 @@
input,
select,
textarea {
-webkit-appearance: none;
border-radius: 0;
border-color: $overcast-gray;
&.has-error {
border-color: $orange;
Expand Down
4 changes: 4 additions & 0 deletions app/assets/stylesheets/member-facing/survey.scss
View file
Expand Up @@ -53,6 +53,8 @@
.form--big textarea,
.form--big .selectize-control.single .selectize-input,
.form--big .hosted-fields__host {
-webkit-appearance: none;
border-radius: 0;
&.has-error {
border-color: $orange;
}
Expand All @@ -70,6 +72,8 @@
}
.form--big .has-error .selectize-control.single .selectize-input {
border-color: $orange;
-webkit-appearance: none;
border-radius: 0;
}
.form__group {
margin-bottom: 32px;
Expand Down
52 changes: 46 additions & 6 deletions app/javascript/components/Checkbox/Checkbox.scss
View file
Expand Up @@ -11,11 +11,51 @@
display: inline;
cursor: pointer;
font-weight: 400;
}

&__label input {
cursor: pointer;
max-width: 16px;
padding: 0;
input[type='checkbox'] {
cursor: pointer;
position: relative;
top: -20px;
left: -5px;
float: left;
max-width: 30px;
max-height: 30px;
border: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: transparent;
-webkit-tap-highlight-color: transparent;
}
input[type='checkbox']:before {
width: 15px;
height: 15px;
position: relative;
background-color: #d1d3d1;
content: '';
position: absolute;
right: 0;
display: flex;
align-items: center;
justify-content: center;
visibility: visible;
border: 2px solid white;
}
input[type='checkbox']:checked:before {
width: 15px;
height: 15px;
content: '\2713\0020';
position: absolute;
line-height: 0.8;
right: 0;
color: #00c0cf;
font-size: 14px;
background: transparent;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
visibility: visible;
border: 2px solid;
}
}
}

0 comments on commit a4ed67c

Please sign in to comment.