GDL - Global Design Language

Lister 

<div class="c-lister">
    <details>
        <summary>
            <div>
                Roma <small>provincia</small>
            </div>
            <svg class="o-icon o-icon--md" data-search-open="">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-down"></use>
            </svg>
        </summary>

        <details>
            <summary>
                Roma
                <svg class="o-icon o-icon--md" data-search-open="">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-down"></use>
                </svg>
            </summary>

            <details>
                <summary>
                    Cinema 1
                    <svg class="o-icon o-icon--md" data-search-open="">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-down"></use>
                    </svg>
                </summary>
                <div class="c-lister__content">

                    <span>
                        <svg class="o-icon o-icon--md">
                            <use xlink:href="#icon-clock"></use>
                        </svg>
                        18.10 (Sala 1)
                    </span>

                    <span>
                        <svg class="o-icon o-icon--md">
                            <use xlink:href="#icon-clock"></use>
                        </svg>
                        18.20 (Sala 2)
                    </span>

                    <span>
                        <svg class="o-icon o-icon--md">
                            <use xlink:href="#icon-clock"></use>
                        </svg>
                        18.30 (Sala 3)
                    </span>

                    <span>
                        <svg class="o-icon o-icon--md">
                            <use xlink:href="#icon-clock"></use>
                        </svg>
                        18.40 (Sala 4)
                    </span>

                </div>
            </details>

            <details>
                <summary>
                    Cinema 2
                    <svg class="o-icon o-icon--md" data-search-open="">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-down"></use>
                    </svg>
                </summary>
                <div class="c-lister__content">

                    <span>
                        <svg class="o-icon o-icon--md">
                            <use xlink:href="#icon-clock"></use>
                        </svg>
                        18.10 (Sala 1)
                    </span>

                    <span>
                        <svg class="o-icon o-icon--md">
                            <use xlink:href="#icon-clock"></use>
                        </svg>
                        18.20 (Sala 2)
                    </span>

                    <span>
                        <svg class="o-icon o-icon--md">
                            <use xlink:href="#icon-clock"></use>
                        </svg>
                        18.30 (Sala 3)
                    </span>

                    <span>
                        <svg class="o-icon o-icon--md">
                            <use xlink:href="#icon-clock"></use>
                        </svg>
                        18.40 (Sala 4)
                    </span>

                </div>
            </details>

        </details>

        <details>
            <summary>
                Roma
                <svg class="o-icon o-icon--md" data-search-open="">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-down"></use>
                </svg>
            </summary>

            <details>
                <summary>
                    Cinema 1
                    <svg class="o-icon o-icon--md" data-search-open="">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-down"></use>
                    </svg>
                </summary>
                <div class="c-lister__content">

                    <span>
                        <svg class="o-icon o-icon--md">
                            <use xlink:href="#icon-clock"></use>
                        </svg>
                        18.10 (Sala 1)
                    </span>

                    <span>
                        <svg class="o-icon o-icon--md">
                            <use xlink:href="#icon-clock"></use>
                        </svg>
                        18.20 (Sala 2)
                    </span>

                    <span>
                        <svg class="o-icon o-icon--md">
                            <use xlink:href="#icon-clock"></use>
                        </svg>
                        18.30 (Sala 3)
                    </span>

                    <span>
                        <svg class="o-icon o-icon--md">
                            <use xlink:href="#icon-clock"></use>
                        </svg>
                        18.40 (Sala 4)
                    </span>

                </div>
            </details>

            <details>
                <summary>
                    Cinema 2
                    <svg class="o-icon o-icon--md" data-search-open="">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-down"></use>
                    </svg>
                </summary>
                <div class="c-lister__content">

                    <span>
                        <svg class="o-icon o-icon--md">
                            <use xlink:href="#icon-clock"></use>
                        </svg>
                        18.10 (Sala 1)
                    </span>

                    <span>
                        <svg class="o-icon o-icon--md">
                            <use xlink:href="#icon-clock"></use>
                        </svg>
                        18.20 (Sala 2)
                    </span>

                    <span>
                        <svg class="o-icon o-icon--md">
                            <use xlink:href="#icon-clock"></use>
                        </svg>
                        18.30 (Sala 3)
                    </span>

                    <span>
                        <svg class="o-icon o-icon--md">
                            <use xlink:href="#icon-clock"></use>
                        </svg>
                        18.40 (Sala 4)
                    </span>

                </div>
            </details>

        </details>

    </details>
</div>
 
<div class="c-lister">
  <details>
    <summary> 
      <div>
        Roma <small>provincia</small>
      </div>
      <svg class="o-icon o-icon--md" data-search-open="">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-down"></use>
      </svg>
    </summary>
    {% for i in range(1,3) %}
    <details>
      <summary>
        Roma
        <svg class="o-icon o-icon--md" data-search-open="">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-down"></use>
        </svg>
      </summary>
      {% for i in range(1,3) %}
      <details>
        <summary>
          Cinema {{i}}
          <svg class="o-icon o-icon--md" data-search-open="">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-down"></use>
          </svg>
        </summary>
        <div class="c-lister__content">
          {% for i in range(1,5) %}
          <span>
            <svg class="o-icon o-icon--md">
              <use xlink:href="#icon-clock"></use>
            </svg>
            18.{{i}}0 (Sala {{i}})
          </span> 
          {% endfor %}
        </div>
      </details>
      {% endfor %}
    </details>
    {% endfor %}
  </details>
</div>
 
/* No context defined. */
  • Content: 
    @use '../../../assets/sass/settings/v7/colors.tokens' as *;
@use '../../../assets/sass/settings/v7/layout-standard' as *;
@use '../../../assets/sass/settings/v7/global' as *;
@use '../../../assets/sass/settings/v7/spacing.tokens' as *;
@use '../../../assets/sass/tools/v7/mq' as *;
@use '../../../assets/sass/tools/v7/zindex' as *;
@use '../../../assets/sass/tools/v7/typography' as *;

.c-lister {
	--lister: var(--background-color-gray);
	--lister-first-detail-bg: var(--background-color-negative);
	--lister-second-detail-bg: var(--background-color-darker);
	--lister-third-detail-bg: var(--background-color);

	max-height: 90vh;
	margin-top: $padding-base;
	overflow-y: auto;
	background-color: var(--lister);

	details {
		all: unset;
		position: relative;
		display: flex;
		flex-direction: column;
		color: var(--body-color-inverse);
		
		.c-lister__content {
			display: flex;
			flex-direction: row;
			gap: $base;
			overflow-x: auto;
			padding: $base $padding-xlarge;
			
			span {
				display: flex;
				gap: calc($base / 2);
				align-items: center;
				padding: $padding-base;
				background-color: var(--background-color);
				color: var(--body-color);
				width: max-content;
				min-width: 130px;
				border: 1px solid var(--divider-color);
				@include type(label-07);
				&.u-none {
					display: none;
				}
			}
		}


		summary {
			all: unset;
			position: sticky;
			top: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: $padding-base;
			background-color: var(--lister-first-detail-bg);
			color: var(--body-color-inverse);
			@include type(label-03);
			&{
				cursor: pointer;	
				font-weight: bold;
			}	
			&::before {
				all: unset;
			}
			@include z(cover);

			small {
				@include type(label-07);
			}
		}

		&[open]>summary{
			border-bottom: 2px solid var(--divider-color);
			.o-icon {
				transform: rotate(180deg);
				
			}
		}

		details {
			color: var(--body-color);
			&:not(:last-child){
				border-bottom: 1px solid var(--divider-color);
			}
			summary {
				top: 3rem;
				background-color: var(--lister-second-detail-bg);
				color: var(--body-color);
				padding-left: $padding-large;
				@include type(label-08);
				@include z(undercover);
			}
			&[open] summary {
				// --lister-second-detail-bg: var(--theme-color);
				color: var(--body-color);
			}
			
			details {
				color: var(--body-color);
				// &[open] summary {
				// 	color: var(--body-color);
				// }
				&:not(:last-child){
					border-bottom: 1px solid var(--divider-color);
				}
				border-bottom: 1px solid var(--divider-color);
				summary {
					top: 6rem;
					background-color: var(--lister-third-detail-bg);
					padding-left: $padding-xlarge;
					color: var(--body-color);
					@include z(base);
					span {
						@include type(label-08);
					}
				}

				
			}
		}
	}
	@include type(label-03);
}
  • URL: /components/raw/lister/_lister.scss
  • Filesystem Path: src/lib/components/lister/_lister.scss
  • Size: 2.9 KB

No notes defined.