Info Dot

No notes defined.

<!-- Disabled -->
<a href="#!" tabindex="0" class="sds-infoDot" disabled data-trigger="focus" data-container="body" data-placement="" data-toggle="popover" title="Popover title" data-content="Le détail de la / des transactions (bénéficiaire et communication) sera masqué dans les mouvements des transactions (sur S-Net Pro et dans les extraits de compte)">
    <span class="sds-icon sds-icon-infocirclefill"></span>
</a>

<!-- Left -->
<a href="#!" tabindex="0" class="sds-infoDot" data-trigger="focus" data-container="body" data-placement="left" data-toggle="popover" title="Popover title" data-content="Le détail de la / des transactions (bénéficiaire et communication) sera masqué dans les mouvements des transactions (sur S-Net Pro et dans les extraits de compte)">
    <span class="sds-icon sds-icon-infocirclefill"></span>
</a>

<!-- Top -->
<a href="#!" tabindex="0" class="sds-infoDot" data-trigger="focus" data-container="body" data-placement="top" data-toggle="popover" title="Popover title" data-content="Le détail de la / des transactions (bénéficiaire et communication) sera masqué dans les mouvements des transactions (sur S-Net Pro et dans les extraits de compte)">
    <span class="sds-icon sds-icon-infocirclefill"></span>
</a>

<!-- Bottom -->
<a href="#!" tabindex="0" class="sds-infoDot" data-trigger="focus" data-container="body" data-placement="bottom" data-toggle="popover" title="Popover title" data-content="Le détail de la / des transactions (bénéficiaire et communication) sera masqué dans les mouvements des transactions (sur S-Net Pro et dans les extraits de compte)">
    <span class="sds-icon sds-icon-infocirclefill"></span>
</a>

<!-- Right -->
<a href="#!" tabindex="0" class="sds-infoDot" data-trigger="focus" data-container="body" data-placement="right" data-toggle="popover" title="Popover title" data-content="Le détail de la / des transactions (bénéficiaire et communication) sera masqué dans les mouvements des transactions (sur S-Net Pro et dans les extraits de compte)">
    <span class="sds-icon sds-icon-infocirclefill"></span>
</a>

<!-- Small -->
<a href="#!" tabindex="0" class="sds-infoDot -small" data-trigger="focus" data-container="body" data-placement="right" data-toggle="popover" title="Popover title" data-content="Le détail de la / des transactions (bénéficiaire et communication) sera masqué dans les mouvements des transactions (sur S-Net Pro et dans les extraits de compte)">
    <span class="sds-icon sds-icon-infocirclefill"></span>
</a>

<!-- Modal -->
<button type="button" class="sds-infoDot" data-toggle="modal" data-target="#">
    <span class="sds-icon sds-icon-infocircleborder"></span>
</button>

<!-- Modal Small -->
<button type="button" class="sds-infoDot -small" data-toggle="modal" data-target="#">
    <span class="sds-icon sds-icon-infocircleborder"></span>
</button>

<!-- Disabled -->
<a href="#!" tabindex="0" class="{{ namespace }}infoDot{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}"{% if disabled %} disabled {% endif %}data-trigger="focus" data-container="body" data-placement="{{ placement }}" data-toggle="popover"{% if title %} title="{{ title }}"{% endif%} data-content="{{ text }}" >
	<span class="{{ namespace }}icon {{ namespace }}icon-{{ icon }}"></span>
</a>

<!-- Left -->
<a href="#!" tabindex="0" class="{{ namespace }}infoDot{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}"{% if disabled %} disabled {% endif %}data-trigger="focus" data-container="body" data-placement="{{ placement }}" data-toggle="popover"{% if title %} title="{{ title }}"{% endif%} data-content="{{ text }}" >
	<span class="{{ namespace }}icon {{ namespace }}icon-{{ icon }}"></span>
</a>

<!-- Top -->
<a href="#!" tabindex="0" class="{{ namespace }}infoDot{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}"{% if disabled %} disabled {% endif %}data-trigger="focus" data-container="body" data-placement="{{ placement }}" data-toggle="popover"{% if title %} title="{{ title }}"{% endif%} data-content="{{ text }}" >
	<span class="{{ namespace }}icon {{ namespace }}icon-{{ icon }}"></span>
</a>

<!-- Bottom -->
<a href="#!" tabindex="0" class="{{ namespace }}infoDot{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}"{% if disabled %} disabled {% endif %}data-trigger="focus" data-container="body" data-placement="{{ placement }}" data-toggle="popover"{% if title %} title="{{ title }}"{% endif%} data-content="{{ text }}" >
	<span class="{{ namespace }}icon {{ namespace }}icon-{{ icon }}"></span>
</a>

<!-- Right -->
<a href="#!" tabindex="0" class="{{ namespace }}infoDot{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}"{% if disabled %} disabled {% endif %}data-trigger="focus" data-container="body" data-placement="{{ placement }}" data-toggle="popover"{% if title %} title="{{ title }}"{% endif%} data-content="{{ text }}" >
	<span class="{{ namespace }}icon {{ namespace }}icon-{{ icon }}"></span>
</a>

<!-- Small -->
<a href="#!" tabindex="0" class="{{ namespace }}infoDot{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}"{% if disabled %} disabled {% endif %}data-trigger="focus" data-container="body" data-placement="{{ placement }}" data-toggle="popover"{% if title %} title="{{ title }}"{% endif%} data-content="{{ text }}" >
	<span class="{{ namespace }}icon {{ namespace }}icon-{{ icon }}"></span>
</a>

<!-- Modal -->
<button type="button" class="{{ namespace }}infoDot{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}"{% if disabled %} disabled {% endif %} data-toggle="modal" data-target="#{{ target}}">
	<span class="{{ namespace }}icon {{ namespace }}icon-{{ icon }}"></span>
</button>

<!-- Modal Small -->
<button type="button" class="{{ namespace }}infoDot{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}"{% if disabled %} disabled {% endif %} data-toggle="modal" data-target="#{{ target }}">
    <span class="{{ namespace }}icon {{ namespace }}icon-{{ icon }}"></span>
</button>
  • Content:
    /* variables specific to current element */
    
    $element-specific-variables: "";
    
    .#{$namespace}infoDot {
    
    	/* Save root element context for easy access if nesting is needed */
    
    	$self: &;
    
    	/* properties of current element  + media queries */
    	display: inline-flex;
    	align-items: center;
    	justify-content: center;
    	@include custom-prop-fallback("color", "comp-info-dot-background-color");
    	line-height: 1;
    	
    	* + & {
    
    		margin-left: 0.5em;
    
    	}
    
    	/* Pseudo Elements */
    
    	&::before {
    	}
    
    	&::after {
    	}
    
    	/*
    	Include elements that are linked to the current element but have to reside at the root level of the stylesheet
    	(e.g: keyframes)
    	*/
    	@at-root {
    	}
    
    
    	/* children - write selector in full in comments in order to facilitate search */
    
    	// infoDot__childElement
    	&__childElement {
    
    		// follows same logic as parent
    
    	}
    
    
    	/* modifiers */
    
    	// infoDot -small
    	&.-small {
    
    		// follows same logic as base element
    
    		[class*="icon"] {
    			&::before {
    				font-size: map-deep-get($design-tokens, "comp-info-dot-small-size");
    			}
    		}
    
    	}
    
    	&[disabled] {
    
    		@include custom-prop-fallback("color", "comp-info-dot-disabled-background-color");
    		pointer-events: none;
    		cursor: not-allowed;
    
    	}
    
    	/* random parent element */
    	/* 
    	*
    	*   Syntax : .randomParentElt & {}
    	*
    	*/
    
    	/* Pseudo Classes */
    
    	&:hover {
    		@media (hover: hover) {
    			@include custom-prop-fallback("color", "comp-info-dot-background-color");
    		}
    	}
    
    	&:focus {
    	}
    
    	&:active {
    	}
    
    	&:focus,
    	&:active {
    	}
    
    }
  • URL: /components/raw/info-dot/_info-dot.scss
  • Filesystem Path: components/token-based/actions-and-inputs/info-dot/_info-dot.scss
  • Size: 1.5 KB