Skip to content
Snippets Groups Projects
Verified Commit d256cf4a authored by Cristina Chumillas's avatar Cristina Chumillas
Browse files

Issue #3303549 by Aditya4478, Gauravvvv, Stanzin, smustgrave: Refactor Claro's... 

Issue #3303549 by Aditya4478, Gauravvvv, Stanzin, smustgrave: Refactor Claro's form--checkbox-radio stylesheet
parent e8568a29
No related branches found
No related tags found
42 merge requests!54479.5.x SF update,!5014Issue #3071143: Table Render Array Example Is Incorrect,!4868Issue #1428520: Improve menu parent link selection,!3878Removed unused condition head title for views,!38582585169-10.1.x,!3818Issue #2140179: $entity->original gets stale between updates,!3742Issue #3328429: Create item list field formatter for displaying ordered and unordered lists,!3731Claro: role=button on status report items,!3668Resolve #3347842 "Deprecate the trusted",!3651Issue #3347736: Create new SDC component for Olivero (header-search),!3546refactored dialog.pcss file,!3531Issue #3336994: StringFormatter always displays links to entity even if the user in context does not have access,!3502Issue #3335308: Confusing behavior with FormState::setFormState and FormState::setMethod,!3452Issue #3332701: Refactor Claro's tablesort-indicator stylesheet,!3451Issue #2410579: Allows setting the current language programmatically.,!3355Issue #3209129: Scrolling problems when adding a block via layout builder,!3226Issue #2987537: Custom menu link entity type should not declare "bundle" entity key,!3154Fixes #2987987 - CSRF token validation broken on routes with optional parameters.,!3147Issue #3328457: Replace most substr($a, $i) where $i is negative with str_ends_with(),!3146Issue #3328456: Replace substr($a, 0, $i) with str_starts_with(),!3133core/modules/system/css/components/hidden.module.css,!31312878513-10.1.x,!2964Issue #2865710 : Dependencies from only one instance of a widget are used in display modes,!2812Issue #3312049: [Followup] Fix Drupal.Commenting.FunctionComment.MissingReturnType returns for NULL,!2614Issue #2981326: Replace non-test usages of \Drupal::logger() with IoC injection,!2378Issue #2875033: Optimize joins and table selection in SQL entity query implementation,!2334Issue #3228209: Add hasRole() method to AccountInterface,!2062Issue #3246454: Add weekly granularity to views date sort,!1591Issue #3199697: Add JSON:API Translation experimental module,!1255Issue #3238922: Refactor (if feasible) uses of the jQuery serialize function to use vanillaJS,!1105Issue #3025039: New non translatable field on translatable content throws error,!1073issue #3191727: Focus states on mobile second level navigation items fixed,!10223132456: Fix issue where views instances are emptied before an ajax request is complete,!877Issue #2708101: Default value for link text is not saved,!844Resolve #3036010 "Updaters",!673Issue #3214208: FinishResponseSubscriber could create duplicate headers,!617Issue #3043725: Provide a Entity Handler for user cancelation,!579Issue #2230909: Simple decimals fail to pass validation,!560Move callback classRemove outside of the loop,!555Issue #3202493,!485Sets the autocomplete attribute for username/password input field on login form.,!30Issue #3182188: Updates composer usage to point at ./vendor/bin/composer
Hide whitespace changes
Inline Side-by-side
core/themes/claro/css/components/form--checkbox-radio.css
+ 32
− 46
View file @ d256cf4a
......@@ -15,47 +15,34 @@
*/
.form-type--boolean {
margin-left: var(--input--label-spacing); /* LTR */
margin-inline-start: var(--input--label-spacing);
line-height: var(--space-l);
}
[dir="rtl"] .form-type--boolean {
margin-right: var(--input--label-spacing);
margin-left: 0;
}
/**
* Radio and checkbox items that are the child of a form item.
*/
.form-type--boolean .form-boolean {
position: relative;
top: calc(var(--space-l) / 2);
inset-block-start: calc(var(--space-l) / 2);
float: left; /* LTR */
margin-left: calc(var(--input--label-spacing) * -1); /* LTR */
margin-inline-start: calc(var(--input--label-spacing) * -1);
transform: translateY(-50%);
}
[dir="rtl"] .form-type--boolean .form-boolean {
[dir="rtl"] :is(.form-type--boolean .form-boolean) {
float: right;
margin-right: calc(var(--input--label-spacing) * -1);
margin-left: 0;
}
.form-type--boolean.form-item--no-label {
margin-left: 0;
}
[dir="rtl"] .form-type--boolean.form-item--no-label {
margin-right: 0;
margin-inline-start: 0;
}
.form-type--boolean.form-item--no-label .form-boolean,
[dir="rtl"] .form-type--boolean.form-item--no-label .form-boolean {
.form-type--boolean.form-item--no-label .form-boolean {
position: static;
float: none;
margin-right: 0;
margin-left: 0;
margin-inline: 0;
transform: none;
}
......@@ -65,8 +52,7 @@
*/
.form-boolean-group .form-type--boolean {
margin-top: 0.4em;
margin-bottom: 0.4em;
margin-block: 0.4em;
}
/**
......@@ -88,19 +74,6 @@
appearance: none;
}
@media (forced-colors: active) {
.form-boolean {
-webkit-appearance: auto;
appearance: auto;
}
}
.form-boolean--type-radio {
width: 1.1875rem;
height: 1.1875rem;
border-radius: 1.1875rem;
}
.form-boolean:active,
.form-boolean:hover {
border-color: var(--input-fg-color);
......@@ -112,16 +85,17 @@
box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--input-fg-color);
}
.form-boolean--type-checkbox:checked {
border-color: var(--input--focus-border-color);
background-color: var(--input--focus-border-color);
background-image: url("data:image/svg+xml,%3csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3.795 7.096l2.387 2.506 6.023-6.327 1.484 1.56-7.507 7.89L2.31 8.656z' fill='%23fff'/%3e%3c/svg%3e");
@media (forced-colors: active) {
.form-boolean {
-webkit-appearance: auto;
appearance: auto;
}
}
.form-boolean--type-checkbox:checked:active,
.form-boolean--type-checkbox:checked:hover {
border-color: var(--input-fg-color);
background-color: var(--input-fg-color);
.form-boolean--type-radio {
width: 1.1875rem;
height: 1.1875rem;
border-radius: 1.1875rem;
}
.form-boolean--type-radio:checked {
......@@ -134,6 +108,11 @@
box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--input--focus-border-color);
}
.form-boolean--type-radio:checked:focus:active,
.form-boolean--type-radio:checked:focus:hover {
box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--input-fg-color);
}
.form-boolean--type-radio:checked:active,
.form-boolean--type-radio:checked:hover {
border-color: var(--input-fg-color);
......@@ -141,9 +120,16 @@
box-shadow: inset 0 0 0 1px var(--input-fg-color);
}
.form-boolean--type-radio:checked:focus:active,
.form-boolean--type-radio:checked:focus:hover {
box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--input-fg-color);
.form-boolean--type-checkbox:checked {
border-color: var(--input--focus-border-color);
background-color: var(--input--focus-border-color);
background-image: url("data:image/svg+xml,%3csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3.795 7.096l2.387 2.506 6.023-6.327 1.484 1.56-7.507 7.89L2.31 8.656z' fill='%23fff'/%3e%3c/svg%3e");
}
.form-boolean--type-checkbox:checked:active,
.form-boolean--type-checkbox:checked:hover {
border-color: var(--input-fg-color);
background-color: var(--input-fg-color);
}
/**
......
core/themes/claro/css/components/form--checkbox-radio.pcss.css
+ 64
− 68
View file @ d256cf4a
......@@ -7,42 +7,33 @@
* Form item modifiers.
*/
.form-type--boolean {
margin-left: var(--input--label-spacing); /* LTR */
margin-inline-start: var(--input--label-spacing);
line-height: var(--space-l);
}
[dir="rtl"] .form-type--boolean {
margin-right: var(--input--label-spacing);
margin-left: 0;
}
/**
* Radio and checkbox items that are the child of a form item.
*/
.form-type--boolean .form-boolean {
position: relative;
top: calc(var(--space-l) / 2);
inset-block-start: calc(var(--space-l) / 2);
float: left; /* LTR */
margin-left: calc(var(--input--label-spacing) * -1); /* LTR */
margin-inline-start: calc(var(--input--label-spacing) * -1);
transform: translateY(-50%);
}
[dir="rtl"] .form-type--boolean .form-boolean {
float: right;
margin-right: calc(var(--input--label-spacing) * -1);
margin-left: 0;
@nest [dir="rtl"] & {
float: right;
}
}
.form-type--boolean.form-item--no-label {
margin-left: 0;
}
[dir="rtl"] .form-type--boolean.form-item--no-label {
margin-right: 0;
margin-inline-start: 0;
}
.form-type--boolean.form-item--no-label .form-boolean,
[dir="rtl"] .form-type--boolean.form-item--no-label .form-boolean {
.form-type--boolean.form-item--no-label .form-boolean {
position: static;
float: none;
margin-right: 0;
margin-left: 0;
margin-inline: 0;
transform: none;
}
......@@ -51,8 +42,7 @@
* space between them.
*/
.form-boolean-group .form-type--boolean {
margin-top: 0.4em;
margin-bottom: 0.4em;
margin-block: 0.4em;
}
/**
......@@ -70,6 +60,17 @@
background-size: 100% 100%;
box-shadow: 0 0 0 4px transparent;
appearance: none;
&:active,
&:hover {
border-color: var(--input-fg-color);
box-shadow: inset 0 0 0 1px var(--input-fg-color);
}
&:focus:active,
&:focus:hover {
box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--input-fg-color);
}
}
@media (forced-colors: active) {
......@@ -82,43 +83,38 @@
width: 19px;
height: 19px;
border-radius: 19px;
}
.form-boolean:active,
.form-boolean:hover {
border-color: var(--input-fg-color);
box-shadow: inset 0 0 0 1px var(--input-fg-color);
}
.form-boolean:focus:active,
.form-boolean:focus:hover {
box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--input-fg-color);
&:checked {
border-color: var(--input--focus-border-color);
background-image: url(../../images/icons/003ecc/circle.svg);
box-shadow: inset 0 0 0 1px var(--input--focus-border-color);
&:focus {
box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--input--focus-border-color);
&:active,
&:hover {
box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--input-fg-color);
}
}
&:active,
&:hover {
border-color: var(--input-fg-color);
background-image: url(../../images/icons/000f33/circle.svg);
box-shadow: inset 0 0 0 1px var(--input-fg-color);
}
}
}
.form-boolean--type-checkbox:checked {
border-color: var(--input--focus-border-color);
background-color: var(--input--focus-border-color);
background-image: url(../../images/icons/ffffff/checkmark-sm.svg);
}
.form-boolean--type-checkbox:checked:active,
.form-boolean--type-checkbox:checked:hover {
border-color: var(--input-fg-color);
background-color: var(--input-fg-color);
}
.form-boolean--type-radio:checked {
border-color: var(--input--focus-border-color);
background-image: url(../../images/icons/003ecc/circle.svg);
box-shadow: inset 0 0 0 1px var(--input--focus-border-color);
}
.form-boolean--type-radio:checked:focus {
box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--input--focus-border-color);
}
.form-boolean--type-radio:checked:active,
.form-boolean--type-radio:checked:hover {
border-color: var(--input-fg-color);
background-image: url(../../images/icons/000f33/circle.svg);
box-shadow: inset 0 0 0 1px var(--input-fg-color);
}
.form-boolean--type-radio:checked:focus:active,
.form-boolean--type-radio:checked:focus:hover {
box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--input-fg-color);
&:active,
&:hover {
border-color: var(--input-fg-color);
background-color: var(--input-fg-color);
}
}
/**
......@@ -128,20 +124,20 @@
border-color: var(--input--error-border-color);
background-color: var(--input-bg-color);
box-shadow: inset 0 0 0 1px var(--input--error-border-color);
}
.form-boolean.error:active,
.form-boolean.error:hover {
box-shadow: inset 0 0 0 1px var(--input--error-border-color);
}
.form-boolean.error:focus,
.form-boolean.error:focus:active,
.form-boolean.error:focus:hover {
box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--input--error-border-color);
}
.form-boolean.error:checked:active,
.form-boolean.error:checked:hover {
border-color: var(--input--error-border-color);
background-color: var(--input-bg-color);
&:active,
&:hover {
box-shadow: inset 0 0 0 1px var(--input--error-border-color);
}
&:focus,
&:focus:active,
&:focus:hover {
box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--input--error-border-color);
}
&:checked:active,
&:checked:hover {
border-color: var(--input--error-border-color);
background-color: var(--input-bg-color);
}
}
.form-boolean--type-checkbox.error:checked,
.form-boolean--type-checkbox.error:checked:active,
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment