Skip to content
Snippets Groups Projects

Issue #3506330: Improve the styling for vertical tabs.

Issue #3506330: Improve the styling for vertical tabs.
issue/gin-3506330:3506330-improve-the-styling into 4.0.x
6 open threads
Open
Utkarsh Kumar Singhrequested to merge
issue/gin-3506330:3506330-improve-the-styling into 4.0.x
6 open threads

Closes #3506330

Merge request reports

Loading
Loading

Activity

Filter activity
  • Approvals
  • Assignees & reviewers
  • Comments (from bots)
  • Comments (from users)
  • Commits & branches
  • Edits
  • Labels
  • Lock status
  • Mentions
  • Merge request status
  • Tracking
styles/components/tabs.scss
61 61 }
62 62
63 63 .tabs__link.is-active,
64 .claro-details__summary[aria-expanded=true],
64 .claro-details__summary[aria-expanded="true"],
  • Jürgen Haas
    Jürgen Haas @jurgenhaas started a thread on the diff
    • styles/components/tabs.scss
    100 100
    101 101 @include mq(small) {
    102 102 width: 100%;
    103 padding-block: .3125rem var(--gin-spacing-l);
    103 padding-block: 0.3125rem var(--gin-spacing-l);
  • Jürgen Haas
    Jürgen Haas @jurgenhaas started a thread on the diff
    • styles/components/tabs.scss
    100 100
    101 101 @include mq(small) {
    102 102 width: 100%;
    103 padding-block: .3125rem var(--gin-spacing-l);
    103 padding-block: 0.3125rem var(--gin-spacing-l);
    104 104 padding-inline: var(--gin-spacing-xs);
    105 105 margin-block-end: calc(var(--gin-spacing-xl) * -1);
    106 106 overflow-x: auto;
    107 107
    108 108 .gin--edit-form & {
    109 padding-block-start: .4rem;
    109 padding-block-start: 0.4rem;
  • Jürgen Haas
    Jürgen Haas @jurgenhaas started a thread on the diff
    • styles/components/tabs.scss
    294 294 border-radius: var(--gin-border-m) var(--gin-border-m) 0 0;
    295 295
    296 296 &::before {
    297 content: '';
    297 content: "";
  • Jürgen Haas
    Jürgen Haas @jurgenhaas started a thread on the diff
    • styles/components/tabs.scss
    355 355 .claro-details[open] > .claro-details__summary::before {
    356 356 inset-inline-start: 1.125rem;
    357 357 background: var(--gin-color-text);
    358 mask-image: icon('handle');
    358 mask-image: icon("handle");
  • Jürgen Haas
    Jürgen Haas @jurgenhaas started a thread on the diff
    • styles/components/tabs.scss
    503 504 }
    504 505 }
    505 506
    506 [open] > .claro-details__summary--vertical-tabs-item:not(:focus):not(:active)::after,
    507 [open] > .claro-details__summary--accordion-item:not(:focus):not(:active)::after {
    507 [open]
    508 > .claro-details__summary--vertical-tabs-item:not(:focus):not(:active)::after,
    509 [open]
    510 > .claro-details__summary--accordion-item:not(:focus):not(:active)::after {
    508 511 border-inline-start-width: 5px;
  • Jürgen Haas left review comments

    left review comments

    • Please register or sign in to reply