Skip to content

Commit

Permalink
Issue #15 #19: Fixup for theme rename
Browse files Browse the repository at this point in the history
  • Loading branch information
Zoltan Horvath committed Dec 13, 2018
1 parent 93fc4f4 commit 90f14b8
Show file tree
Hide file tree
Showing 3 changed files with 136 additions and 131 deletions.
9 changes: 2 additions & 7 deletions claro.theme
View file
Original file line number Diff line number Diff line change
Expand Up @@ -199,22 +199,17 @@ function claro_preprocess_form_element(&$variables) {
}

/**
* Implements hook_preprocess_HOOK() for input.
* Implements template_preprocess_HOOK() for input.
*/
function seven_preprocess_input(&$variables) {
function claro_preprocess_input(&$variables) {
if (
!empty($variables['element']['#title_display']) &&
$variables['element']['#title_display'] === 'attribute' &&
!empty((string) $variables['element']['#title'])
) {
$variables['attributes']['title'] = (string) $variables['element']['#title'];
}
}

/**
* Implements template_preprocess_HOOK() for input.
*/
function claro_preprocess_input(&$variables) {
$type_api = $variables['element']['#type'];
$type_html = $variables['attributes']['type'];
$text_types_html = [
Expand Down
104 changes: 52 additions & 52 deletions css/src/components/form--checkbox-radio--ie.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
* Checkbox and radio input elements styles for IE11 and below.
*/

input[type="checkbox"]::-ms-check,
input[type="radio"]::-ms-check {
.form-element--type-checkbox::-ms-check,
.form-element--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;
Expand All @@ -20,64 +20,64 @@ input[type="radio"]::-ms-check {
box-sizing: border-box;
color: transparent; /* IE */
}
input[type="radio"]::-ms-check {
.form-element--type-radio::-ms-check {
border-radius: 19px;
width: 19px;
height: 19px;
}
input[type="checkbox"]:focus::-ms-check,
input[type="radio"]:focus::-ms-check {
.form-element--type-checkbox:focus::-ms-check,
.form-element--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 {
.form-element--type-checkbox:hover::-ms-check,
.form-element--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 {
.form-element--type-checkbox:focus:hover::-ms-check,
.form-element--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 {
.form-element--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 {
.form-element--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 {
.form-element--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 {
.form-element--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 {
.form-element--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 {
.form-element--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 {
.form-element--type-checkbox:active:hover::-ms-check,
.form-element--type-radio:active:hover::-ms-check,
.form-element--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 {
.form-element--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);
Expand All @@ -86,73 +86,73 @@ input[type="radio"]:checked:focus:hover::-ms-check {
/**
* Error states.
*/
input[type="checkbox"].error::-ms-check,
input[type="radio"].error::-ms-check {
.form-element--type-checkbox.error::-ms-check,
.form-element--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 {
.form-element--type-checkbox.error:focus::-ms-check,
.form-element--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 {
.form-element--type-checkbox.error:hover::-ms-check,
.form-element--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 {
.form-element--type-checkbox.error:focus:hover::-ms-check,
.form-element--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 {
.form-element--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 {
.form-element--type-radio.error:checked::-ms-check,
.form-element--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 {
.form-element--type-checkbox.error:checked:hover::-ms-check,
.form-element--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 {
.form-element--type-checkbox.error:checked:focus:hover::-ms-check,
.form-element--type-radio.error:checked:focus::-ms-check,
.form-element--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 {
.form-element--type-checkbox.error:active:hover::-ms-check,
.form-element--type-radio.error:active:hover::-ms-check,
.form-element--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 {
.form-element--type-checkbox[disabled]::-ms-check,
.form-element--type-radio[disabled]::-ms-check,
.form-element--type-checkbox[disabled]:hover::-ms-check,
.form-element--type-radio[disabled]:hover::-ms-check,
.form-element--type-radio[disabled]:focus:active::-ms-check,
.form-element--type-radio[disabled]:active:hover::-ms-check,
.form-element--type-checkbox[disabled].error::-ms-check,
.form-element--type-radio[disabled].error::-ms-check,
.form-element--type-checkbox[disabled].error:hover::-ms-check,
.form-element--type-radio[disabled].error:hover::-ms-check,
.form-element--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 {
.form-element--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 {
.form-element--type-radio[disabled]:checked::-ms-check,
.form-element--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 */
}
Loading

0 comments on commit 90f14b8

Please sign in to comment.