Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Apply new checkbox and radio styles #63

Open
wants to merge 10 commits into
base: master
Choose a base branch
from
Open

Apply new checkbox and radio styles #63

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
459a69f
Issue #15 #19: Checkbox styles
Nov 12, 2018
dd9c2d3
Issue #15 #19: Checkbox and radio styles: basic theming for webkit ex…
Nov 13, 2018
c5a8bb7
Issue #15 #19: Style input elements directly rather than using pseudos
Nov 16, 2018
a7dd321
Issue #15 #19: Fix IE11 weirdesses by a separate file
Nov 21, 2018
93fc4f4
Issue #15 #19: Move checkboxes and radios error message below the set.
Nov 29, 2018
90f14b8
Issue #15 #19: Fixup for theme rename
Dec 6, 2018
0052cdd
Issue #15 #19: BEM module for checkbox and radio styles
Dec 13, 2018
96f52dc
Issue #15 #19: Add error class for composite fieldset if needed (chec…
Dec 13, 2018
effd4e7
Issue #15 #19: Change appearance of checked checkboxes with error
Dec 19, 2018
ccd24d2
Issue #15 #19: Remove transitions and ensure that fieldset type is de…
Jan 8, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions claro.libraries.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ global-styling:
css/dist/components/entity-meta.css: {}
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
36 changes: 35 additions & 1 deletion claro.theme
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -202,6 +202,14 @@ function claro_preprocess_form_element(&$variables) {
* Implements template_preprocess_HOOK() for input.
*/
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'];
}

$type_api = $variables['element']['#type'];
$type_html = $variables['attributes']['type'];
$text_types_html = [
Expand All @@ -226,6 +234,11 @@ function claro_preprocess_input(&$variables) {
$variables['attributes']['class'][] = Html::getClass('form-element--type-' . $type_html);
$variables['attributes']['class'][] = Html::getClass('form-element--api-' . $type_api);
}

if (in_array($type_html, ['checkbox', 'radio'])) {
$variables['attributes']['class'][] = 'form-boolean';
$variables['attributes']['class'][] = Html::getClass('form-boolean--type-' . $type_html);
}
}

/**
Expand Down Expand Up @@ -258,11 +271,32 @@ function claro_preprocess_datetime_wrapper(&$variables) {
* Implements template_preprocess_HOOK() for fieldset.
*/
function claro_preprocess_fieldset(&$variables) {
if (!empty($variables['element']['#disabled'])) {
$element = $variables['element'];
$composite_types = ['checkboxes', 'radios'];

if (in_array($element['#type'], $composite_types) && !empty($variables['element']['#children_errors'])) {
$variables['legend_span']['attributes']->addClass('has-error');
}

if (!empty($element['#disabled'])) {
$variables['legend_span']['attributes']->addClass('is-disabled');

if (!empty($variables['description']) && !empty($variables['description']['attributes'])) {
$variables['description']['attributes']->addClass('is-disabled');
}
}
}

/**
* Implements template_preprocess_HOOK() for checkboxes.
*/
function claro_preprocess_checkboxes(&$variables) {
$variables['attributes']['class'][] = 'form-boolean-group';
}

/**
* Implements template_preprocess_HOOK() for radios.
*/
function claro_preprocess_radios(&$variables) {
$variables['attributes']['class'][] = 'form-boolean-group';
}
142 changes: 142 additions & 0 deletions css/src/components/form--checkbox-radio--ie.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,142 @@
/**
* @file
* Checkbox and radio input elements styles for IE11 and below.
*/

.form-boolean::-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 */
}
.form-boolean--type-radio::-ms-check {
border-radius: 19px;
width: 19px;
height: 19px;
}
.form-boolean:focus::-ms-check {
box-shadow: 0 0 0 4px var(--color-input-focus-shadow);
outline: none;
color: transparent; /* IE */
}
.form-boolean:hover::-ms-check {
border-color: var(--color-input-fg);
box-shadow: inset 0 0 0 1px var(--color-input-fg);
}
.form-boolean: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);
}
.form-boolean--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 */
}
.form-boolean--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;
}
.form-boolean--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;
}
.form-boolean--type-checkbox:checked:hover::-ms-check {
background-color: var(--color-input-fg);
border-color: var(--color-input-fg);
}
.form-boolean--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);
}
.form-boolean--type-checkbox:active::-ms-check {
box-shadow: 0 0 0 4px var(--color-input-focus-shadow);
}
.form-boolean:active:hover::-ms-check,
.form-boolean--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);
}
.form-boolean--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.
*/
.form-boolean.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);
}
.form-boolean.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);
}
.form-boolean.error:hover::-ms-check {
box-shadow: inset 0 0 0 1px var(--color-input-border-error);
}
.form-boolean.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);
}
.form-boolean--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");
}
.form-boolean--type-radio.error:checked::-ms-check,
.form-boolean--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");
}
.form-boolean.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);
}
.form-boolean.error:checked:focus::-ms-check,
.form-boolean--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);
}
.form-boolean.error:active:hover::-ms-check,
.form-boolean--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.
*/
.form-boolean[disabled]::-ms-check,
.form-boolean[disabled]:hover::-ms-check,
.form-boolean[disabled].error::-ms-check,
.form-boolean[disabled].error:hover::-ms-check,
.form-boolean--type-radio[disabled]:focus:active::-ms-check,
.form-boolean--type-radio[disabled]:active:hover::-ms-check,
.form-boolean--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);
}
.form-boolean--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 */
}
.form-boolean--type-radio[disabled]:checked::-ms-check,
.form-boolean--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