Mercedes Pattern Library

Mercedes Sprint 1 - 27 

<header class="m-header">
    <a class="m-header__logo" href="#">
        <img src="/assets/images/m-logo.png" alt="">
    </a>

    <div class="m-header__nav">
        <div class="m-header__links">
            <a href="#" class="m-header__link  m-header__link--active">Proposte</a>
            <a href="#" class="m-header__link">Rifinanziamenti</a>
            <a href="#" class="m-header__link">myMobilityPass</a>
            <a href="#" class="m-header__link"><svg class="icon icon--user">
  <use xlink:href="../../assets/icons.svg#user" />
</svg>
</a>
        </div>
    </div>
</header>

<div class="m-sub-header">

    <div class="m-sub-header__img">
        <img src="/assets/images/sub-header-bg.jpeg" alt="">
    </div>

    <div class="m-sub-header__data-box">

        <div>
            <span>
					43
				</span> in lavorazione
        </div>

        <div>
            <span>
					43
				</span> in lavorazione
        </div>

        <div>
            <span>
					43
				</span> in lavorazione
        </div>

        <div>
            <span>
					43
				</span> in lavorazione
        </div>

    </div>

    <div class="m-sub-header__date">dicembre 2018</div>
    <a class="m-sub-header__cta" href="#">vedi statistiche</a>
</div>

<div class="l-main-wrapper  l-spacing--v-margin-small-auto">
    <div class="row l-bottom">
        <div class="col-12 m-filter-controlls">

            <a href="#" class="a-filter-button">
    <span class="a-filter-button--label">Tutte</span>
    <span class="a-filter-button--extra">
         
            (20)  
        
        

            <svg class="icon icon--filter">
  <use xlink:href="../../assets/icons.svg#filter" />
</svg>

            
            

        
    </span>
</a>

            <a href="#" class="a-filter-button">
    <span class="a-filter-button--label">Urgenti</span>
    <span class="a-filter-button--extra">
         
            (20)  
        
        

            <svg class="icon icon--chat">
  <use xlink:href="../../assets/icons.svg#chat" />
</svg>

            
            
                <span class="a-filter-button__notification">
                    
    <div class="a-notification bg-azure ">
        3
    </div>

                </span>
            

        
    </span>
</a>

            <a href="#" class="a-filter-button">
    <span class="a-filter-button--label">Assegnate a me</span>
    <span class="a-filter-button--extra">
         
            (20)  
        
        
    </span>
</a>

            <a href="#" class="a-filter-button">
    <span class="a-filter-button--icon">        
        <svg class="icon icon--pen">
  <use xlink:href="../../assets/icons.svg#pen" />
</svg>

    </span>
</a>

        </div>
    </div>
</div>

<div class="l-main-wrapper  l-spacing--v-margin-small-auto">
    <div class="m-filter-container ">

        <div class="m-filter-container__wrapper">

        </div>

        <div class="m-filter-container__controls">
            <div class="m-footer-controls">

                <div class="m-footer-controls__child">

                    <div class="a-button">
                        Azzera
                    </div>

                    <div class="a-button  a-button--azure">
                        Conferma
                    </div>

                </div>

            </div>

        </div>

    </div>
</div>

<div class="l-main-wrapper  l-spacing--v-margin-small-auto">
    <table class="m-table-list  m-table-list--row-hover">

        <thead class="m-table-list__header">
            <tr class="m-table-list__row">

                <td class="m-table-list__col  m-table-list__col--label">

                    proposta

                </td>

                <td class="m-table-list__col  m-table-list__col--label">

                    contratto

                </td>

                <td class="m-table-list__col  m-table-list__col--label">

                    richiedente

                </td>

                <td class="m-table-list__col  m-table-list__col--label">

                    stato

                </td>

                <td class="m-table-list__col  m-table-list__col--label">

                    quantità

                </td>

                <td class="m-table-list__col  m-table-list__col--label">

                    data

                </td>

                <td class="m-table-list__col  m-table-list__col--label">

                    scadenza

                </td>

                <td class="m-table-list__col  m-table-list__col--label">

                    priorità

                </td>

                <td class="m-table-list__col  m-table-list__col--label">

                    venditore

                </td>

                <td class="m-table-list__col  m-table-list__col--label">

                </td>

            </tr>
        </thead>

        <tbody class="m-table-list__data">

            <tr class="m-table-list__row">

                <td class="m-table-list__col  m-table-list__col--label">

                    <div class="h-ellipsis" title="1002007462">
                        1002007462
                    </div>

                </td>

                <td class="m-table-list__col  m-table-list__col--label">

                    <div class="h-ellipsis" title="">

                    </div>

                </td>

                <td class="m-table-list__col  m-table-list__col--label">

                    <div class="h-ellipsis" title="Henry Richardson">
                        Henry Richardson
                    </div>

                </td>

                <td class="m-table-list__col  m-table-list__col--label">

                    <div class="h-ellipsis" title="0">
                        0
                    </div>

                </td>

                <td class="m-table-list__col  m-table-list__col--label">

                    <div class="h-ellipsis" title="1">
                        1
                    </div>

                </td>

                <td class="m-table-list__col  m-table-list__col--label">

                    <div class="h-ellipsis" title="01-12-2016">
                        01-12-2016
                    </div>

                </td>

                <td class="m-table-list__col  m-table-list__col--label">

                    <div class="h-ellipsis" title="01-12-2016">
                        01-12-2016
                    </div>

                </td>

                <td class="m-table-list__col  m-table-list__col--score">

                    <div class="l-center" title="C">
                        <span class="h-score">
                                C
                            </span>
                    </div>

                </td>

                <td class="m-table-list__col  m-table-list__col--label">

                    <div class="h-ellipsis" title="Alfie Wood">
                        Alfie Wood
                    </div>

                </td>

                <td class="m-table-list__col  m-table-list__col--actions">

                    <div class="m-action-controls">

                        <div class="m-action-controls__child">

                            <svg class="icon icon--loked">
  <use xlink:href="../../assets/icons.svg#loked" />
</svg>

                            <div class="m-action-controls__child__notification">

                                <div class="a-notification">
                                    3
                                </div>

                            </div>

                        </div>

                        <div class="m-action-controls__child">

                            <svg class="icon icon--notification">
  <use xlink:href="../../assets/icons.svg#notification" />
</svg>

                            <div class="m-action-controls__child__notification">

                                <div class="a-notification">
                                    2
                                </div>

                            </div>

                        </div>

                        <div class="m-action-controls__child">

                            <svg class="icon icon--switch">
  <use xlink:href="../../assets/icons.svg#switch" />
</svg>

                        </div>

                    </div>

                </td>

            </tr>

        </tbody>

    </table>

</div>
 
{% render '@header' %}

{% render '@sub-header' %}

{% render '@filter-controls' %}

<div class="l-main-wrapper  l-spacing--v-margin-small-auto">
    {% render '@filter-container', {
        "state": "closed"
    } %}
</div>

<div class="l-main-wrapper  l-spacing--v-margin-small-auto">
    {% render '@table-list--hover', tableList %}
</div>
 
{
  "tableList": {
    "header": [
      {
        "label": "proposta",
        "type": "label"
      },
      {
        "label": "contratto",
        "type": "label"
      },
      {
        "label": "richiedente",
        "type": "label"
      },
      {
        "label": "stato",
        "type": "label"
      },
      {
        "label": "quantità",
        "type": "label"
      },
      {
        "label": "data",
        "type": "label"
      },
      {
        "label": "scadenza",
        "type": "label"
      },
      {
        "label": "priorità",
        "type": "label"
      },
      {
        "label": "venditore",
        "type": "label"
      },
      {
        "label": null,
        "type": "label"
      }
    ],
    "data": [
      [
        {
          "label": 1002007462,
          "type": "label"
        },
        {
          "label": null,
          "type": "label"
        },
        {
          "label": "Henry Richardson",
          "type": "label"
        },
        {
          "label": "0",
          "type": "label"
        },
        {
          "label": "1",
          "type": "label"
        },
        {
          "label": "01-12-2016",
          "type": "label"
        },
        {
          "label": "01-12-2016",
          "type": "label"
        },
        {
          "label": "C",
          "type": "score"
        },
        {
          "label": "Alfie Wood",
          "type": "label"
        },
        {
          "label": null,
          "type": "actions",
          "actions": [
            {
              "icon": "loked",
              "count": 3
            },
            {
              "icon": "notification",
              "count": 2
            },
            {
              "icon": "switch"
            }
          ]
        }
      ]
    ]
  }
}

There are no notes for this item.