Skip to content
Snippets Groups Projects
Verified Commit 59050575 authored by Théodore Biadala's avatar Théodore Biadala
Browse files

Issue #3303548 by Aditya4478, Stanzin, Gauravvvv: Refactor Claro's fieldset stylesheet 

(cherry picked from commit f0ef38ff)
parent 035581b2
No related branches found
No related tags found
20 merge requests!8376Drupal views: adding more granularity to the ‘use ajax’ functionality,!8300Issue #3443586 View area displays even when parent view has no results.,!7567Issue #3153723 by quietone, Hardik_Patel_12: Change the scaffolding...,!7565Issue #3153723 by quietone, Hardik_Patel_12: Change the scaffolding...,!7509Change label "Block description" to "Block type",!7344Issue #3292350 by O'Briat, KlemenDEV, hswong3i, smustgrave, quietone: Update...,!6922Issue #3412959 by quietone, smustgrave, longwave: Fix 12 'un' words,!6848Issue #3417553 by longwave: Remove withConsecutive() in CacheCollectorTest,!6720Revert "Issue #3358581 by pfrenssen, _tarik_, a.dmitriiev, smustgrave:...,!6560Update ClaroPreRender.php, confirming classes provided are in array format,!6528Issue #3414261 by catch: Add authenticated user umami performance tests,!6501Issue #3263668 by omkar-pd, Wim Leers, hooroomoo: Re-enable inline form errors...,!6354Draft: Issue #3380392 by phma: Updating language weight from the overview reverts label if translated,!6324Issue #3416723 by Ludo.R: Provide a "node type" views default argument,!6119Issue #3405704 by Spokje, longwave: symfony/psr-http-message-bridge major version bump,!5950Issue #3403653 by alexpott, longwave: Incorporate improvements to how contrib runs PHPStan to core,!5858Issue #3401971 by fjgarlin: Test-only job shouldn't require constant rebases...,!5716Draft: Issue #3401102 by Spokje, longwave, smustgrave: Nightwatch artifacts on GitLab not retained,!5674Transaction autocommit during shutdown relies on unreliable object destruction order,!5644Issue #3395563 by nireneko, marvil07, lauriii, borisson_, smustgrave, Wim...
Pipeline #34548 failed
Stage: 🏗️ Build
Stage: 🪄 Lint
Stage: 🗜️ Test
Show whitespace changes
Inline Side-by-side
core/themes/claro/css/components/fieldset.css
+ 32
− 34
View file @ 59050575
......@@ -37,27 +37,27 @@
display: contents; /* For Firefox. */
float: left; /* iOS Safari, Android Chrome, Edge. */
width: 100%; /* iOS Safari, Android Chrome, Edge. */
margin-bottom: var(--space-m);
margin-block-end: var(--space-m);
color: var(--color-gray-800);
font-weight: bold;
}
@media screen and (min-width: 48em) {
.fieldset__legend {
margin-bottom: var(--space-l);
}
}
.fieldset__legend--composite {
float: none;
width: auto;
margin-top: calc(var(--space-xs) / 2); /* 4px */
margin-bottom: calc(var(--space-xs) / 2); /* 4px */
margin-block-start: calc(var(--space-xs) / 2); /* 4px */
margin-block-end: calc(var(--space-xs) / 2); /* 4px */
color: inherit;
font-size: var(--font-size-s); /* 14px */
line-height: calc(18rem / 16); /* 18px */
}
@media screen and (min-width: 48em) {
.fieldset__legend {
margin-bottom: var(--space-l);
}
}
/* This is used only on install configure form. */
.fieldset__legend--group {
......@@ -71,11 +71,12 @@
line-height: var(--space-m);
}
@media screen and (min-width: 48em) {
.fieldset__label {
padding-right: var(--space-l);
padding-left: var(--space-l);
.fieldset__label.is-disabled {
color: var(--input--disabled-fg-color);
}
.fieldset__label.has-error {
color: var(--input--error-color);
}
.fieldset__label--group {
......@@ -83,17 +84,16 @@
line-height: inherit;
}
.fieldset__label.is-disabled {
color: var(--input--disabled-fg-color);
@media screen and (min-width: 48em) {
.fieldset__label {
padding-right: var(--space-l);
padding-left: var(--space-l);
}
.fieldset__label.has-error {
color: var(--input--error-color);
}
.fieldset__description {
margin-top: calc(6rem / 16); /* 6px */
margin-bottom: calc(6rem / 16); /* 6px */
margin-block-start: calc(6rem / 16); /* 6px */
margin-block-end: calc(6rem / 16); /* 6px */
color: var(--input-fg-color--description);
font-size: var(--font-size-xs); /* ~13px */
line-height: calc(17rem / 16); /* 17px */
......@@ -106,8 +106,8 @@
/* Error message (Inline form errors). */
.fieldset__error-message {
margin-top: calc(6rem / 16); /* 6px */
margin-bottom: calc(6rem / 16); /* 6px */
margin-block-start: calc(6rem / 16); /* 6px */
margin-block-end: calc(6rem / 16); /* 6px */
color: var(--input--error-color);
font-size: var(--font-size-xs); /* ~13px */
font-weight: normal;
......@@ -116,6 +116,13 @@
.fieldset__wrapper {
margin: var(--space-m);
/**
* Remove the extra padding of container-inline wrapper if it's used inside a fieldset
*/
}
.fieldset__wrapper > .container-inline {
padding: 0;
}
@media screen and (min-width: 48em) {
......@@ -125,18 +132,9 @@
}
.fieldset__legend--visible ~ .fieldset__wrapper {
margin-top: 0;
margin-block-start: 0;
}
.fieldset__wrapper--group {
margin: 0;
}
/**
* Remove the unnecessary extra padding of container-inline wrapper if it's used
* inside a fieldset.
*/
.fieldset__wrapper > .container-inline {
padding: 0;
}
core/themes/claro/css/components/fieldset.pcss.css
+ 33
− 37
View file @ 59050575
......@@ -29,27 +29,27 @@
display: contents; /* For Firefox. */
float: left; /* iOS Safari, Android Chrome, Edge. */
width: 100%; /* iOS Safari, Android Chrome, Edge. */
margin-bottom: var(--space-m);
margin-block-end: var(--space-m);
color: var(--color-gray-800);
font-weight: bold;
}
@media screen and (min-width: 48em) {
.fieldset__legend {
margin-bottom: var(--space-l);
}
}
.fieldset__legend--composite {
float: none;
width: auto;
margin-top: calc(var(--space-xs) / 2); /* 4px */
margin-bottom: calc(var(--space-xs) / 2); /* 4px */
margin-block-start: calc(var(--space-xs) / 2); /* 4px */
margin-block-end: calc(var(--space-xs) / 2); /* 4px */
color: inherit;
font-size: var(--font-size-s); /* 14px */
line-height: calc(18rem / 16); /* 18px */
}
@media screen and (min-width: 48em) {
.fieldset__legend {
margin-bottom: var(--space-l);
}
}
/* This is used only on install configure form. */
.fieldset__legend--group {
text-transform: uppercase;
......@@ -60,12 +60,12 @@
display: block;
padding: var(--space-m);
line-height: var(--space-m);
&.is-disabled {
color: var(--input--disabled-fg-color);
}
@media screen and (min-width: 48em) {
.fieldset__label {
padding-right: var(--space-l);
padding-left: var(--space-l);
&.has-error {
color: var(--input--error-color);
}
}
......@@ -74,30 +74,28 @@
line-height: inherit;
}
.fieldset__label.is-disabled {
color: var(--input--disabled-fg-color);
@media screen and (min-width: 48em) {
.fieldset__label {
padding-right: var(--space-l);
padding-left: var(--space-l);
}
.fieldset__label.has-error {
color: var(--input--error-color);
}
.fieldset__description {
margin-top: calc(6rem / 16); /* 6px */
margin-bottom: calc(6rem / 16); /* 6px */
margin-block-start: calc(6rem / 16); /* 6px */
margin-block-end: calc(6rem / 16); /* 6px */
color: var(--input-fg-color--description);
font-size: var(--font-size-xs); /* ~13px */
line-height: calc(17rem / 16); /* 17px */
}
.fieldset__description.is-disabled {
&.is-disabled {
color: var(--input--disabled-fg-color);
}
}
/* Error message (Inline form errors). */
.fieldset__error-message {
margin-top: calc(6rem / 16); /* 6px */
margin-bottom: calc(6rem / 16); /* 6px */
margin-block-start: calc(6rem / 16); /* 6px */
margin-block-end: calc(6rem / 16); /* 6px */
color: var(--input--error-color);
font-size: var(--font-size-xs); /* ~13px */
font-weight: normal;
......@@ -106,6 +104,12 @@
.fieldset__wrapper {
margin: var(--space-m);
/**
* Remove the extra padding of container-inline wrapper if it's used inside a fieldset
*/
& > .container-inline{
padding: 0;
}
}
@media screen and (min-width: 48em) {
......@@ -115,17 +119,9 @@
}
.fieldset__legend--visible ~ .fieldset__wrapper {
margin-top: 0;
margin-block-start: 0;
}
.fieldset__wrapper--group {
margin: 0;
}
/**
* Remove the unnecessary extra padding of container-inline wrapper if it's used
* inside a fieldset.
*/
.fieldset__wrapper > .container-inline {
padding: 0;
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment