Skip to content

Commit

Permalink
WIP Issue #15 #19: Fix IE11 weirdesses by a separate file
Browse files Browse the repository at this point in the history
  • Loading branch information
Zoltan Horvath committed Dec 5, 2018
1 parent 235acfe commit 13301f0
Show file tree
Hide file tree
Showing 4 changed files with 183 additions and 68 deletions.
1 change: 1 addition & 0 deletions claro.libraries.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ global-styling:
css/dist/components/field-ui.css: {}
css/dist/components/form.css: {}
css/dist/components/form--checkbox-radio.css: {}
css/dist/components/form--checkbox-radio--ie.css: {}
css/dist/components/form--select.css: {}
css/dist/components/form--text.css: {}
css/dist/components/help.css: {}
Expand Down
1 change: 1 addition & 0 deletions claro.theme
View file
Original file line number Diff line number Diff line change
Expand Up @@ -203,6 +203,7 @@ function claro_preprocess_form_element(&$variables) {
*/
function seven_preprocess_input(&$variables) {
if (
!empty($variables['element']['#title_display']) &&
$variables['element']['#title_display'] === 'attribute' &&
!empty((string) $variables['element']['#title'])
) {
Expand Down
158 changes: 158 additions & 0 deletions css/src/components/form--checkbox-radio--ie.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,158 @@
/**
* @file
* Checkbox and radio input elements styles for IE11 and below.
*/

input[type="checkbox"]::-ms-check,
input[type="radio"]::-ms-check {
transition: all var(--speed-transition) ease-in-out 0s, background-image 0s linear 0s;
border: 1px solid var(--color-input-border);
display: inline-block;
width: 18px;
height: 18px;
background: var(--color-input-bg) no-repeat 50% 50%;
background-image: url("data:image/svg+xml,%3Csvg width='12' height='10' viewBox='0 0 12 10'xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.18182 6.96572L1.97655 4.64855L1.79545 4.45826L1.61436 4.64855L0.818904 5.48437L0.654878 5.65672L0.818904 5.82907L4.00072 9.17235L4.18182 9.36263L4.36291 9.17235L11.1811 2.00817L11.3451 1.83582L11.1811 1.66347L10.3856 .827651L10.2045 .637365L10.0234 .82765L4.18182 6.96572Z' fill='white' /%3E%3C/svg%3E");
background-size: 100% 100%;
outline: none;
border-radius: 2px;
box-shadow: 0 0 0 4px transparent;
vertical-align: text-bottom;
box-sizing: border-box;
color: transparent; /* IE */
}
input[type="radio"]::-ms-check {
border-radius: 19px;
width: 19px;
height: 19px;
}
input[type="checkbox"]:focus::-ms-check,
input[type="radio"]:focus::-ms-check {
box-shadow: 0 0 0 4px var(--color-input-focus-shadow);
outline: none;
color: transparent; /* IE */
}
input[type="checkbox"]:hover::-ms-check,
input[type="radio"]:hover::-ms-check {
border-color: var(--color-input-fg);
box-shadow: inset 0 0 0 1px var(--color-input-fg);
}
input[type="checkbox"]:focus:hover::-ms-check,
input[type="radio"]:focus:hover::-ms-check {
outline: none;
box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-fg);
}
input[type="checkbox"]:checked::-ms-check {
background-color: var(--color-input-border-focus);
border-color: var(--color-input-border-focus);
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.7949219,7.095703 6.1816406,9.601563 12.205078,3.2753906 13.689453,4.8359375 6.1816406,12.724609 2.3105469,8.65625 Z' fill='%23fff'/%3E%3C/svg%3E");
color: transparent; /* IE */
}
input[type="radio"]:checked::-ms-check {
border-color: var(--color-input-border-focus);
background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23004adc'/%3E%3C/svg%3E");
box-shadow: inset 0 0 0 1px var(--color-input-border-focus);
color: transparent; /* IE */
outline: none;
}
input[type="radio"]:checked:focus::-ms-check {
border-color: var(--color-input-border-focus);
background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23004adc'/%3E%3C/svg%3E");
box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-border-focus);
outline: none;
}
input[type="checkbox"]:checked:hover::-ms-check {
background-color: var(--color-input-fg);
border-color: var(--color-input-fg);
}
input[type="radio"]:checked:hover::-ms-check {
border-color: var(--color-input-fg);
background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23222330'/%3E%3C/svg%3E");
box-shadow: inset 0 0 0 1px var(--color-input-fg);
}
input[type="checkbox"]:active::-ms-check {
box-shadow: 0 0 0 4px var(--color-input-focus-shadow);
}
input[type="checkbox"]:active:hover::-ms-check,
input[type="radio"]:active:hover::-ms-check,
input[type="radio"]:checked:active:hover::-ms-check {
box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-fg);
}
input[type="radio"]:checked:focus:hover::-ms-check {
border-color: var(--color-input-fg);
background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23222330'/%3E%3C/svg%3E");
box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-fg);
}

/**
* Error states.
*/
input[type="checkbox"].error::-ms-check,
input[type="radio"].error::-ms-check {
background-color: var(--color-input-bg);
border-color: var(--color-input-border-error);
box-shadow: inset 0 0 0 1px var(--color-input-border-error);
}
input[type="checkbox"].error:focus::-ms-check,
input[type="radio"].error:focus::-ms-check {
box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-border-error);
}
input[type="checkbox"].error:hover::-ms-check,
input[type="radio"].error:hover::-ms-check {
box-shadow: inset 0 0 0 1px var(--color-input-border-error);
}
input[type="checkbox"].error:focus:hover::-ms-check,
input[type="radio"].error:focus:hover::-ms-check {
box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-border-error);
}
input[type="checkbox"].error:checked::-ms-check {
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.7949219,7.095703 6.1816406,9.601563 12.205078,3.2753906 13.689453,4.8359375 6.1816406,12.724609 2.3105469,8.65625 Z' fill='%23d72222'/%3E%3C/svg%3E");
}
input[type="radio"].error:checked::-ms-check,
input[type="radio"].error:checked:hover::-ms-check {
background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23d72222'/%3E%3C/svg%3E");
}
input[type="checkbox"].error:checked:hover::-ms-check,
input[type="radio"].error:checked:hover::-ms-check {
box-shadow: inset 0 0 0 1px var(--color-input-border-error);
background-color: var(--color-input-bg);
border-color: var(--color-input-border-error);
}
input[type="checkbox"].error:checked:focus:hover::-ms-check,
input[type="radio"].error:checked:focus::-ms-check,
input[type="radio"].error:checked:focus:hover::-ms-check {
box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-border-error);
border-color: var(--color-input-border-error);
}
input[type="checkbox"].error:active:hover::-ms-check,
input[type="radio"].error:active:hover::-ms-check,
input[type="radio"].error:checked:active:hover::-ms-check {
box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-border-error);
}

/**
* Disabled states.
*/
input[type="checkbox"][disabled]::-ms-check,
input[type="radio"][disabled]::-ms-check,
input[type="checkbox"][disabled]:hover::-ms-check,
input[type="radio"][disabled]:hover::-ms-check,
input[type="radio"][disabled]:focus:active::-ms-check,
input[type="radio"][disabled]:active:hover::-ms-check,
input[type="checkbox"][disabled].error::-ms-check,
input[type="radio"][disabled].error::-ms-check,
input[type="checkbox"][disabled].error:hover::-ms-check,
input[type="radio"][disabled].error:hover::-ms-check,
input[type="radio"][disabled].error:active:hover::-ms-check {
box-shadow: none;
background-color: var(--color-input-bg-disabled);
border-color: var(--color-input-border-disabled);
}
input[type="checkbox"][disabled]:checked::-ms-check {
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.7949219,7.095703 6.1816406,9.601563 12.205078,3.2753906 13.689453,4.8359375 6.1816406,12.724609 2.3105469,8.65625 Z' fill='%2382828c'/%3E%3C/svg%3E");
color: transparent; /* IE */
}
input[type="radio"][disabled]:checked::-ms-check,
input[type="radio"][disabled].error:checked::-ms-check {
background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%2382828c'/%3E%3C/svg%3E");
color: transparent; /* IE */
}
91 changes: 23 additions & 68 deletions css/src/components/form--checkbox-radio.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@

.form-type--checkbox input,
.form-type--radio input {
float: left;
float: left; /* LTR */
margin-left: -24px; /* LTR */
position: relative;
top: 0.75em;
Expand Down Expand Up @@ -59,7 +59,7 @@

input[type="checkbox"],
input[type="radio"] {
transition: all 0.1s ease-in-out 0s, background-image 0s linear 0s;
transition: all var(--speed-transition) ease-in-out 0s, background-image 0s linear 0s;
appearance: none;
border: 1px solid var(--color-input-border);
display: inline-block;
Expand All @@ -74,63 +74,29 @@ input[type="radio"] {
vertical-align: text-bottom;
box-sizing: border-box;
}
input[type="checkbox"]:focus,
input[type="radio"]:focus {
box-shadow: 0 0 0 4px var(--color-input-focus-shadow);
}
input[type="checkbox"]:hover {
border-color: var(--color-input-fg);
box-shadow: inset 0 0 0 1px var(--color-input-fg);
}
input[type="checkbox"]:focus:hover {
box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-fg);
}
input[type="checkbox"]:checked {
background-color: var(--color-input-border-focus);
border-color: var(--color-input-border-focus);
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.7949219,7.095703 6.1816406,9.601563 12.205078,3.2753906 13.689453,4.8359375 6.1816406,12.724609 2.3105469,8.65625 Z' fill='%23fff'/%3E%3C/svg%3E");
}
/* input[type="checkbox"]:checked:focus {
background-color: var(--color-input-fg);
border-color: var(--color-input-fg);
} */
input[type="checkbox"]:checked:hover {
background-color: var(--color-input-fg);
border-color: var(--color-input-fg);
}
input[type="checkbox"]:active {
box-shadow: 0 0 0 4px var(--color-input-focus-shadow);
}
input[type="checkbox"]:active:hover,
input[type="radio"]:active:hover,
input[type="radio"]:checked:active:hover {
box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-fg);
}








/**
* Radio.
*/
input[type="radio"] {
border-radius: 19px;
width: 19px;
height: 19px;
}
input[type="checkbox"]:focus,
input[type="radio"]:focus {
box-shadow: 0 0 0 4px var(--color-input-focus-shadow);
}
input[type="checkbox"]:hover,
input[type="radio"]:hover {
border-color: var(--color-input-fg);
box-shadow: inset 0 0 0 1px var(--color-input-fg);
}
input[type="checkbox"]:focus:hover,
input[type="radio"]:focus:hover {
box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-fg);
}
input[type="checkbox"]:checked {
background-color: var(--color-input-border-focus);
border-color: var(--color-input-border-focus);
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.7949219,7.095703 6.1816406,9.601563 12.205078,3.2753906 13.689453,4.8359375 6.1816406,12.724609 2.3105469,8.65625 Z' fill='%23fff'/%3E%3C/svg%3E");
}
input[type="radio"]:checked {
border-color: var(--color-input-border-focus);
background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23004adc'/%3E%3C/svg%3E");
Expand All @@ -141,26 +107,29 @@ input[type="radio"]:checked:focus {
background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23004adc'/%3E%3C/svg%3E");
box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-border-focus);
}
input[type="checkbox"]:checked:hover {
background-color: var(--color-input-fg);
border-color: var(--color-input-fg);
}
input[type="radio"]:checked:hover {
border-color: var(--color-input-fg);
background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23222330'/%3E%3C/svg%3E");
box-shadow: inset 0 0 0 1px var(--color-input-fg);
}
input[type="checkbox"]:active {
box-shadow: 0 0 0 4px var(--color-input-focus-shadow);
}
input[type="checkbox"]:active:hover,
input[type="radio"]:active:hover,
input[type="radio"]:checked:active:hover {
box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-fg);
}
input[type="radio"]:checked:focus:hover {
border-color: var(--color-input-fg);
background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23222330'/%3E%3C/svg%3E");
box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-fg);
}










/**
* Error states.
*/
Expand Down Expand Up @@ -207,12 +176,6 @@ input[type="radio"].error:checked:active:hover {
box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-border-error);
}







/**
* Disabled states.
*/
Expand All @@ -239,14 +202,6 @@ input[type="radio"][disabled].error:checked {
background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%2382828c'/%3E%3C/svg%3E");
}









@media screen and (max-width: 600px) {
input[type="checkbox"] {
width: 18px;
Expand Down

0 comments on commit 13301f0

Please sign in to comment.