The following style modifiers are available for the component:
<!-- Primary -->
<a href="" class="sds-btnLabelOutside">
<span class="sds-btn -iconBtn -btnPrimary sds-btnLabelOutside__icon stretched-link" aria-labelledby="btn-label">
<span class="sds-icon sds-icon-plus"></span>
</span>
<span class="sds-btnLabelOutside__text" id="btn-label">Prendre rendez-vous</span>
</a>
<!-- Secondary -->
<a href="" class="sds-btnLabelOutside">
<span class="sds-btn -iconBtn -btnSecondary sds-btnLabelOutside__icon stretched-link" aria-labelledby="btn-label-secondary">
<span class="sds-icon sds-icon-arrownext"></span>
</span>
<span class="sds-btnLabelOutside__text" id="btn-label-secondary">Prendre rendez-vous</span>
</a>
<!-- Secondary Inverse -->
<a href="" class="sds-btnLabelOutside">
<span class="sds-btn -iconBtn -btnSecondary -btnInverse sds-btnLabelOutside__icon stretched-link" aria-labelledby="btn-label-secondary-inverse">
<span class="sds-icon sds-icon-arrownext"></span>
</span>
<span class="sds-btnLabelOutside__text" id="btn-label-secondary-inverse">Prendre rendez-vous</span>
</a>
{% set btnProps = {
eltType: "span",
icon: icon,
classes: [namespace + "btnLabelOutside__icon", "stretched-link"],
attrs: {
"aria-labelledby": id
}
} %}
<a href="{{ href }}" class="{{ namespace }}btnLabelOutside{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
{% if btnType === "primary" %}
{% render "@icon-btn-primary", btnProps ,true %}
{% elseif btnType === "secondary" %}
{% render "@icon-btn-secondary", btnProps ,true %}
{% elseif btnType === "secondaryInverse" %}
{% render "@icon-btn-secondary-inverse", btnProps ,true %}
{% endif %}
<span class="{{ namespace }}btnLabelOutside__text" id="{{ id }}">{{ text }}</span>
</a>
/* variables specific to current element */
$element-specific-variables: "";
.#{$namespace}btnLabelOutside {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
display: inline-flex;
align-items: center;
@include spacer-component-inline("md");
position: relative;
@include custom-prop-fallback("color", "sys-color-text-primary-vivid");
/* 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 */
// btnLabelOutside__text
&__text {
// follows same logic as parent
font-weight: map-deep-get($token-font-weight-map, "semi-bold");
}
/* modifiers */
// btnLabelOutside -altStyle
&.-primary {
// follows same logic as base element
#{$self}__icon {
@include custom-prop-fallback("background-color", "sys-color-background-secondary-100");
@include custom-prop-fallback("background-image", "sys-color-background-secondary-gradient");
@include custom-prop-fallback("color", "sys-color-text-neutral-inverse");
}
&:hover {
@media (hover: hover) {
#{$self}__icon {
@include custom-prop-fallback("background-color", "sys-color-background-secondary-100");
background-image: none;
}
}
}
}
&.-truncated {
@include truncate-text();
#{$self}__text {
@include truncate-text();
}
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus-visible {
//outline: map-deep-get($design-tokens, "comp-button")
}
&:active {
}
&:focus,
&:active {
}
}