Contextual menu

In review

Info
Notes
HTML
SCSS

Handle: @contextual-menu
Variants (4): Default , Active , Right , Bottom
Preview:
- With layout
- Component only
Filesystem Path: components/02-atoms/14-contextual-menu/contextual-menu.hbs
Referenced by (4): @form-element, @form-element--selected, @form-element--error, @form-element--error-selected

There are no notes for this item.


        
        
            <!-- Default -->
<button type="button" class="contextual-menu contextual-menu--default">
  <span class="icon__info"></span>
  <span class="tooltip tooltip--large tooltip--contextual tooltip--top">
    Information about the item of the left of the icon
  </span>
</button>

<script>
    var triggerContextual = document.getElementsByClassName("contextual-menu");
    var triggerContextualOne = triggerContextual[0];
    var triggerContextualTwo = triggerContextual[1];
    var triggerContextualThree = triggerContextual[2];
    var triggerContextualFour = triggerContextual[3];
    triggerContextualOne.onclick = function() {
        this.classList.toggle("contextual-menu--active");
    };
    triggerContextualTwo.onclick = function() {
        this.classList.toggle("contextual-menu--active");
    };
    triggerContextualThree.onclick = function() {
        this.classList.toggle("contextual-menu--active");
    };
    triggerContextualFour.onclick = function() {
        this.classList.toggle("contextual-menu--active");
    };
</script>


        
            <!-- Active -->
<button type="button" class="contextual-menu contextual-menu--active">
  <span class="icon__info"></span>
  <span class="tooltip tooltip--large tooltip--contextual tooltip--top">
    Information about the item of the left of the icon
  </span>
</button>

<script>
    var triggerContextual = document.getElementsByClassName("contextual-menu");
    var triggerContextualOne = triggerContextual[0];
    var triggerContextualTwo = triggerContextual[1];
    var triggerContextualThree = triggerContextual[2];
    var triggerContextualFour = triggerContextual[3];
    triggerContextualOne.onclick = function() {
        this.classList.toggle("contextual-menu--active");
    };
    triggerContextualTwo.onclick = function() {
        this.classList.toggle("contextual-menu--active");
    };
    triggerContextualThree.onclick = function() {
        this.classList.toggle("contextual-menu--active");
    };
    triggerContextualFour.onclick = function() {
        this.classList.toggle("contextual-menu--active");
    };
</script>


        
            <!-- Right -->
<button type="button" class="contextual-menu contextual-menu--active">
  <span class="icon__info"></span>
  <span class="tooltip tooltip--large tooltip--contextual tooltip--right">
    Information about the item of the left of the icon
  </span>
</button>

<script>
    var triggerContextual = document.getElementsByClassName("contextual-menu");
    var triggerContextualOne = triggerContextual[0];
    var triggerContextualTwo = triggerContextual[1];
    var triggerContextualThree = triggerContextual[2];
    var triggerContextualFour = triggerContextual[3];
    triggerContextualOne.onclick = function() {
        this.classList.toggle("contextual-menu--active");
    };
    triggerContextualTwo.onclick = function() {
        this.classList.toggle("contextual-menu--active");
    };
    triggerContextualThree.onclick = function() {
        this.classList.toggle("contextual-menu--active");
    };
    triggerContextualFour.onclick = function() {
        this.classList.toggle("contextual-menu--active");
    };
</script>


        
            <!-- Bottom -->
<button type="button" class="contextual-menu contextual-menu--active">
  <span class="icon__info"></span>
  <span class="tooltip tooltip--large tooltip--contextual tooltip--bottom">
    Information about the item of the left of the icon
  </span>
</button>

<script>
    var triggerContextual = document.getElementsByClassName("contextual-menu");
    var triggerContextualOne = triggerContextual[0];
    var triggerContextualTwo = triggerContextual[1];
    var triggerContextualThree = triggerContextual[2];
    var triggerContextualFour = triggerContextual[3];
    triggerContextualOne.onclick = function() {
        this.classList.toggle("contextual-menu--active");
    };
    triggerContextualTwo.onclick = function() {
        this.classList.toggle("contextual-menu--active");
    };
    triggerContextualThree.onclick = function() {
        this.classList.toggle("contextual-menu--active");
    };
    triggerContextualFour.onclick = function() {
        this.classList.toggle("contextual-menu--active");
    };
</script>

File:

Content:


                                /*------------------------------------*\
    #CONTEXTUAL MENU
\*------------------------------------*/

// Check Tooltip CSS

.contextual-menu {
  border: 0;
  background-color: transparent;
  cursor: pointer;
  position: relative;
}

.contextual-menu--active .icon__info {
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%2212px%22%20height%3D%2212px%22%20viewBox%3D%220%200%2012%2012%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%2042%20%2836781%29%20-%20http%3A//www.bohemiancoding.com/sketch%20--%3E%0A%20%20%20%20%3Ctitle%3Einformation-solid%3C/title%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%0A%20%20%20%20%3Cdefs%3E%3C/defs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22information-solid%22%20fill-rule%3D%22nonzero%22%20fill%3D%22%231493E6%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Page-1%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22information-solid%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M5%2C2%20C5%2C1.44771525%205.44386482%2C1%206%2C1%20C6.55228475%2C1%207%2C1.44386482%207%2C2%20C7%2C2.55228475%206.55613518%2C3%206%2C3%20C5.44771525%2C3%205%2C2.55613518%205%2C2%20Z%20M5%2C5.00292933%20C5%2C4.44902676%205.44386482%2C4%206%2C4%20C6.55228475%2C4%207%2C4.43788135%207%2C5.00292933%20L7%2C9.99707067%20C7%2C10.5509732%206.55613518%2C11%206%2C11%20C5.44771525%2C11%205%2C10.5621186%205%2C9.99707067%20L5%2C5.00292933%20Z%20M1.75735932%2C10.2426407%20C4.10050507%2C12.5857864%207.89949495%2C12.5857864%2010.2426407%2C10.2426407%20C12.5857864%2C7.89949495%2012.5857864%2C4.10050507%2010.2426407%2C1.75735932%20C7.89949495%2C-0.585786439%204.10050507%2C-0.585786439%201.75735932%2C1.75735932%20C-0.585786439%2C4.10050507%20-0.585786439%2C7.89949495%201.75735932%2C10.2426407%20Z%22%20id%3D%22Combined-Shape%22%3E%3C/path%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E');
}

.tooltip--error.tooltip--contextual:after,
.contextual-menu--active .tooltip--contextual:after {
  content: "";
  display: block;
  position: absolute;
  border-style: solid;
  z-index: 4;
}

.tooltip--error.tooltip--contextual:before,
.contextual-menu--active .tooltip--contextual:before {
  content: "";
  display: block;
  position: absolute;
  border-style: solid;
  z-index: 3;
}

.tooltip--contextual.tooltip--top:after,
.tooltip--contextual.tooltip--top-left:after,
.tooltip--contextual.tooltip--top-right:after {
  border-width: 7px 5px 0 5px;
  border-color: $border-tooltip-inner transparent transparent;
  bottom: -7px;
}

.tooltip--contextual.tooltip--top:after,
.tooltip--contextual.tooltip--top-right:after {
  left: 5px;
}

.tooltip--contextual.tooltip--top-left:after {
  right: 5px;
}

.tooltip--contextual.tooltip--top:before,
.tooltip--contextual.tooltip--top-left:before,
.tooltip--contextual.tooltip--top-right:before {
  border-width: 8px 6px 0 6px;
  border-color: $border-tooltip transparent transparent;
  bottom: -8px;
}

.tooltip--contextual.tooltip--top:before,
.tooltip--contextual.tooltip--top-right:before {
  left: 4px;
}

.tooltip--contextual.tooltip--top-left:before {
  right: 4px;
}

.tooltip--contextual.tooltip--right:after {
  border-width: 5px 7px 5px 0;
  border-color: transparent $border-tooltip-inner transparent transparent;
  top: 6px;
  right: 100%;
}

.tooltip--contextual.tooltip--right:before {
  border-width: 6px 8px 6px 0;
  border-color: transparent $border-tooltip transparent transparent;
  top: 5px;
  right: 100%;
}

.tooltip--contextual.tooltip--bottom:after,
.tooltip--contextual.tooltip--bottom-left:after,
.tooltip--contextual.tooltip--bottom-right:after {
  border-width: 0 5px 7px 5px;
  border-color: transparent transparent $border-tooltip-inner;
  top: -7px;
}

.tooltip--contextual.tooltip--bottom:after,
.tooltip--contextual.tooltip--bottom-right:after {
  left: 5px;
}

.tooltip--contextual.tooltip--bottom-left:after {
  right: 5px;
}

.tooltip--contextual.tooltip--bottom:before,
.tooltip--contextual.tooltip--bottom-left:before,
.tooltip--contextual.tooltip--bottom-right:before {
  border-width: 0 6px 8px 6px;
  border-color: transparent transparent $border-tooltip;
  top: -8px;
}

.tooltip--contextual.tooltip--bottom:before,
.tooltip--contextual.tooltip--bottom-right:before {
  left: 4px;
}

.tooltip--contextual.tooltip--bottom-left:before {
  right: 4px;
}

.tooltip--contextual.tooltip--left:after {
  border-width: 5px 0 5px 7px;
  border-color: transparent transparent transparent $border-tooltip-inner;
  top: 6px;
  left: 100%;
}

.tooltip--contextual.tooltip--left:before {
  border-width: 6px 0 6px 8px;
  border-color: transparent transparent transparent $border-tooltip;
  top: 5px;
  left: 100%;
}

URL: /components/raw/contextual-menu/contextual-menu.scss
Filesystem Path: components/02-atoms/14-contextual-menu/contextual-menu.scss
Size: 5.2 KB