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

Issue #3304920 by Aditya4478, Sakthivel M, rpayanm, Santosh_Verma,... 

Issue #3304920 by Aditya4478, Sakthivel M, rpayanm, Santosh_Verma, sasanikolic: Refactor Claro's form stylesheet
parent 10257183
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.css
+ 28
− 46
View file @ 4e12f074
......@@ -20,8 +20,7 @@
*/
.form-item {
margin-top: var(--space-l);
margin-bottom: var(--space-l);
margin-block: var(--space-l);
}
/**
......@@ -32,8 +31,7 @@
tr .form-item,
.container-inline .form-item {
margin-top: var(--space-s);
margin-bottom: var(--space-s);
margin-block: var(--space-s);
}
/**
......@@ -42,26 +40,12 @@ tr .form-item,
.form-item__label {
display: table;
margin-top: calc(var(--space-xs) / 2); /* 4px */
margin-bottom: calc(var(--space-xs) / 2); /* 4px */
margin-block: calc(var(--space-xs) / 2); /* 4px */
font-size: var(--font-size-s); /* ~14px */
font-weight: bold;
line-height: var(--line-height-form-label);
}
/* Multiple selectors used to ensure styling even if modules override markup. */
.form-item__label--multiple-value-form,
.field-multiple-table .field-label h4.label {
display: inline-block;
margin-top: 0;
margin-bottom: 0;
vertical-align: middle;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
}
.form-item__label[for] {
cursor: pointer;
}
......@@ -71,8 +55,6 @@ tr .form-item,
font-weight: normal;
}
/* Label states. */
.form-item__label.has-error {
color: var(--input--error-color);
}
......@@ -86,11 +68,22 @@ tr .form-item,
color: var(--input--disabled-fg-color);
}
/* Multiple selectors used to ensure styling even if modules override markup. */
.form-item__label--multiple-value-form,
.field-multiple-table .field-label h4.label {
display: inline-block;
margin-block: 0;
align-self: center;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
}
.form-item__label.form-required::after,
.fieldset__label.form-required::after {
display: inline-block;
margin-right: 0.15em;
margin-left: 0.15em;
margin-inline: 0.15em;
content: "*";
color: var(--color-maximumred);
font-size: 0.875rem;
......@@ -101,15 +94,12 @@ tr .form-item,
*/
.form-item__description {
margin-top: calc(6rem / 16); /* 6px */
margin-bottom: calc(6rem / 16); /* 6px */
margin-block: calc(6rem / 16); /* 6px */
color: var(--input-fg-color--description);
font-size: var(--font-size-xs); /* ~13px */
line-height: calc(17rem / 16); /* 17px */
}
/* Description states. */
.form-item__description.is-disabled {
color: var(--input--disabled-fg-color);
}
......@@ -119,8 +109,7 @@ tr .form-item,
*/
.form-item__error-message {
margin-top: calc(6rem / 16); /* 6px */
margin-bottom: calc(6rem / 16); /* 6px */
margin-block: calc(6rem / 16); /* 6px */
color: var(--input--error-color);
font-size: var(--font-size-xs); /* ~13px */
font-weight: normal;
......@@ -136,12 +125,7 @@ tr .form-item,
@media screen and (min-width: 37.5625rem) {
.form-item__suffix {
margin-left: var(--space-xs); /* LTR */
}
[dir="rtl"] .form-item__suffix {
margin-right: var(--space-xs);
margin-left: 0;
margin-inline-start: var(--space-xs);
}
}
......@@ -153,14 +137,12 @@ tr .form-item,
display: flex;
flex-wrap: wrap;
align-items: flex-start;
margin-top: var(--space-m);
margin-bottom: var(--space-m);
margin-block: var(--space-m);
}
.form-actions .button,
.form-actions .action-link {
margin-top: var(--space-m);
margin-bottom: var(--space-m);
margin-block: var(--space-m);
}
.form-actions .ajax-progress--throbber {
......@@ -205,15 +187,15 @@ tr .form-item,
.form-item--editor-format .form-item__label,
.form-item--editor-format .form-item__prefix,
.form-item--editor-format .form-item__suffix {
margin-right: var(--space-xs); /* LTR */
.form-item--editor-format .form-item__suffix,
.form-item--editor-format .form-element--editor-format {
min-width: 1px;
}
[dir="rtl"] .form-item--editor-format .form-item__label,
[dir="rtl"] .form-item--editor-format .form-item__prefix,
[dir="rtl"] .form-item--editor-format .form-item__suffix {
margin-right: 0;
margin-left: var(--space-xs);
.form-item--editor-format .form-item__label,
.form-item--editor-format .form-item__prefix,
.form-item--editor-format .form-item__suffix {
margin-inline-end: var(--space-xs);
}
.form-item--editor-format .form-item__description,
......
core/themes/claro/css/components/form.pcss.css
+ 69
− 75
View file @ 4e12f074
......@@ -12,8 +12,7 @@
* General form item.
*/
.form-item {
margin-top: var(--space-l);
margin-bottom: var(--space-l);
margin-block: var(--space-l);
}
/**
* When a table row or a container-inline has a single form item, prevent it
......@@ -22,8 +21,7 @@
*/
tr .form-item,
.container-inline .form-item {
margin-top: var(--space-s);
margin-bottom: var(--space-s);
margin-block: var(--space-s);
}
/**
......@@ -31,46 +29,48 @@ tr .form-item,
*/
.form-item__label {
display: table;
margin-top: calc(var(--space-xs) / 2); /* 4px */
margin-bottom: calc(var(--space-xs) / 2); /* 4px */
margin-block: calc(var(--space-xs) / 2); /* 4px */
font-size: var(--font-size-s); /* ~14px */
font-weight: bold;
line-height: var(--line-height-form-label);
&[for] {
cursor: pointer;
}
&.option {
display: inline;
font-weight: normal;
}
&.has-error {
color: var(--input--error-color);
}
&.option.has-error {
color: inherit;
}
&.is-disabled {
cursor: default; /* @todo ...or auto? */
color: var(--input--disabled-fg-color);
}
}
/* Multiple selectors used to ensure styling even if modules override markup. */
.form-item__label--multiple-value-form,
.field-multiple-table .field-label h4.label {
display: inline-block;
margin-top: 0;
margin-bottom: 0;
vertical-align: middle;
margin-block: 0;
align-self: center;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
}
.form-item__label[for] {
cursor: pointer;
}
.form-item__label.option {
display: inline;
font-weight: normal;
}
/* Label states. */
.form-item__label.has-error {
color: var(--input--error-color);
}
.form-item__label.option.has-error {
color: inherit;
}
.form-item__label.is-disabled {
cursor: default; /* @todo ...or auto? */
color: var(--input--disabled-fg-color);
}
.form-item__label.form-required::after,
.fieldset__label.form-required::after {
display: inline-block;
margin-right: 0.15em;
margin-left: 0.15em;
margin-inline: 0.15em;
content: "*";
color: var(--color-maximumred);
font-size: 0.875rem;
......@@ -80,23 +80,21 @@ tr .form-item,
* Form item description.
*/
.form-item__description {
margin-top: calc(6rem / 16); /* 6px */
margin-bottom: calc(6rem / 16); /* 6px */
margin-block: calc(6rem / 16); /* 6px */
color: var(--input-fg-color--description);
font-size: var(--font-size-xs); /* ~13px */
line-height: calc(17rem / 16); /* 17px */
}
/* Description states. */
.form-item__description.is-disabled {
color: var(--input--disabled-fg-color);
&.is-disabled {
color: var(--input--disabled-fg-color);
}
}
/**
* Error message (Inline form errors).
*/
.form-item__error-message {
margin-top: calc(6rem / 16); /* 6px */
margin-bottom: calc(6rem / 16); /* 6px */
margin-block: calc(6rem / 16); /* 6px */
color: var(--input--error-color);
font-size: var(--font-size-xs); /* ~13px */
font-weight: normal;
......@@ -111,12 +109,7 @@ tr .form-item,
/* Add some spacing so that the focus ring and suffix don't overlap. */
@media screen and (min-width: 601px) {
.form-item__suffix {
margin-left: var(--space-xs); /* LTR */
}
[dir="rtl"] .form-item__suffix {
margin-right: var(--space-xs);
margin-left: 0;
margin-inline-start: var(--space-xs);
}
}
......@@ -127,16 +120,16 @@ tr .form-item,
display: flex;
flex-wrap: wrap;
align-items: flex-start;
margin-top: var(--space-m);
margin-bottom: var(--space-m);
}
.form-actions .button,
.form-actions .action-link {
margin-top: var(--space-m);
margin-bottom: var(--space-m);
}
.form-actions .ajax-progress--throbber {
align-self: center;
margin-block: var(--space-m);
& .button,
& .action-link {
margin-block: var(--space-m);
}
& .ajax-progress--throbber {
align-self: center;
}
}
/**
......@@ -164,31 +157,32 @@ tr .form-item,
flex-wrap: wrap;
align-items: center;
max-width: 100%;
}
.form-item--editor-format .form-item__label,
.form-item--editor-format .form-item__prefix,
.form-item--editor-format .form-item__suffix,
.form-item--editor-format .form-element--editor-format {
min-width: 1px;
}
& .form-item__label,
& .form-item__prefix,
& .form-item__suffix,
& .form-element--editor-format {
min-width: 1px;
}
.form-item--editor-format .form-item__label,
.form-item--editor-format .form-item__prefix,
.form-item--editor-format .form-item__suffix {
margin-right: var(--space-xs); /* LTR */
}
[dir="rtl"] .form-item--editor-format .form-item__label,
[dir="rtl"] .form-item--editor-format .form-item__prefix,
[dir="rtl"] .form-item--editor-format .form-item__suffix {
margin-right: 0;
margin-left: var(--space-xs);
}
& .form-item__label,
& .form-item__prefix,
& .form-item__suffix,
& .form-element--editor-format {
min-width: 1px;
}
.form-item--editor-format .form-item__description,
.form-item--editor-format .form-item__error-message {
flex: 0 1 100%;
min-width: 1px;
& .form-item__label,
& .form-item__prefix,
& .form-item__suffix {
margin-inline-end: var(--space-xs);
}
& .form-item__description,
& .form-item__error-message {
flex: 0 1 100%;
min-width: 1px;
}
}
/**
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment