JMT Alimentation Animal
Project version : 1.0.3

Wireframe: Header 

<div class="tag-inspector container">
    <header class="site-header">
        <div class="site-header__brand"></div>
        <div class="site-header__search"></div>
        <div class="site-header__shortcute"></div>

        <button id="js-toggle-menu"></button>

        <nav class="site-header__nav-product"></nav>
        <nav class="site-header__nav-community"></nav>
    </header>
</div>
 
<div class="tag-inspector container">
   <header class="site-header">
      <div class="site-header__brand"></div>
      <div class="site-header__search"></div>
      <div class="site-header__shortcute"></div>

      <button id="js-toggle-menu"></button>
      
      <nav class="site-header__nav-product"></nav>
      <nav class="site-header__nav-community"></nav>
   </header>
</div>
 
/* No context defined for this component. */
  • Content: 
    .tag-inspector {
   .tag-inspect-item {
      position: relative;
      background-color: rgba(0,0,0,.1);
      border: 4px solid rgba(0,0,0,.1);
      margin: var(--inspector-gap, 1rem);
      padding: calc(var(--inspector-gap, 1rem) * 2);
      
      &:before{
         position: absolute;
         top: -0.7rem;
         left: var(--gap, 1rem);
         padding: .2rem;
         background-color: black;
         color: white;
         content: attr(data-tag);
         font-weight: 700;
         line-height: 1;
         text-overflow: ellipsis;
         white-space: nowrap;
         max-width: calc(100% - (var(--inspector-gap, 1rem) * 2));
         overflow: hidden;
      }
   }

   li.tag-inspect-item{
      list-style: none;
   }

   svg.tag-inspect-item{
      height: 90px;
      display: inline-block;
   }

   /*** LAYOUT ***/
   :root{
      --inspector-gap: 1rem;
   }
}
  • URL: /components/raw/wireframe/wireframe.scss
  • Filesystem Path: components/10-wireframe/wireframe.scss
  • Size: 888 Bytes
  • Content: 
    function tagInspector(selector = '') {
	this.render(selector);
}
	
tagInspector.prototype.render = function(selector){
	let nodes = this.getNodes(selector)
	for (let node in nodes) {
		let tag = nodes[node].tagName;
		if (tag != undefined) 
			this.renderTag(nodes[node], tag);
	}
}
	
tagInspector.prototype.getNodes = function(selector) {
	if (selector === '')
		selector = 'body';
	return document.querySelectorAll(selector + " *");
}
	
tagInspector.prototype.renderTag = function(item, tag) {
	let classes = item.classList.toString();
	if (classes !== '') {
		classes = '.' + classes;
		classes = classes.replace(' ', ' .');
		classes = ' - ' + classes;
	}
	item.setAttribute('data-tag', tag + classes);
	item.setAttribute('title', tag + classes);
	item.classList.add('tag-inspect-item');
}

const tagInspect = new tagInspector('.tag-inspector');
  • URL: /components/raw/wireframe/wireframes.js
  • Filesystem Path: components/10-wireframe/wireframes.js
  • Size: 849 Bytes

There are no notes for this item.