No notes defined.
<div class="sds-transactionBlock sds-box ">
<div class="sds-transactionBlock__inner">
<div class="sds-transactionBlock__row -first">
<div class="sds-transactionBlock__rowOuter sds-staticStackMd w-100">
<div class="sds-transactionBlock__rowInner">
<div class="sds-transactionBlock__mainInfo">
<div class="sds-transactionBlock__mainInfoAccount">
<div class="sds-avatar centeredBgi -avatarSm">
<img class="img-fluid" src="../../media/snet/avatars/avatarCactus.png" alt="">
</div>
<div class="sds-stackXxs">
<div>Compte Epicerie Fournisseurs</div>
<div class="sds-transactionBlock__meta sds-textHelper">
LU63 0000 2200 3300 4400
</div>
<div class="sds-amount -amountPositive -amountLg">
<div class="sds-amount__body">
<span class="sds-amount__value">{+#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
</div>
</div>
<div class="d-flex justify-content-between flex-grow-1">
<div class="sds-transactionBlock__col sds-stackXxs">
<div class="sds-transactionBlock__meta sds-textHelper">Encodeur</div>
<div class="sds-avatarText -small">
<div class="sds-avatar centeredBgi -xtraSmall">
<img class="img-fluid" src="../../media/snet/avatars/avatarUser.png" alt="">
</div>
<div class="sds-avatarText__content">
<div class="sds-textSemiBold">Jil Schmit</div>
</div>
</div>
</div>
<div class="sds-transactionBlock__col sds-stackXxs text-right -dateEdit">
<div>
<div class="sds-transactionBlock__meta sds-textHelper">
Date d'exécution
</div>
<div class="sds-textSemiBold">23.03.2022</div>
</div>
<button type="button" class="sds-btn -iconBtn -btnSecondary">
<span aria-hidden="true" class="sds-icon sds-icon-edit"></span>
</button>
</div>
</div>
</div>
</div>
<div class="sds-transactionBlock__rowContent sds-staticStackMd">
</div>
</div>
</div>
<div class="sds-transactionBlock__row -total">
<div class="sds-transactionBlock__rowOuter sds-staticStackMd w-100">
<div class="sds-transactionBlock__rowInner">
<div class="sds-transactionBlock__colWrapperFixed">
<span class="sds-itemConnector sds-transactionBlock__itemConnector">
</span>
<button type="button" class="sds-btn -iconBtn -btnSecondary -btnSmall sds-transactionBlock__collapseToggle" data-toggle="collapse" data-target="#transactionBlockCollapse-date-edit" aria-expanded="true">
<span aria-hidden="true" class="sds-icon sds-icon-plus"></span>
</button>
<div class="sds-transactionBlock__col -amount">
<div class="sds-amount -amountNeutral -amountXl">
<div class="sds-amount__body">
<span class="sds-amount__value">{#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
</div>
<div class="sds-transactionBlock__col -transactions">
<span class="sds-numberCircle">
2
</span>
<div class="h4">Transactions</div>
</div>
</div>
</div>
</div>
</div>
<div class="sds-transactionBlock__collapse collapse show" id="transactionBlockCollapse-date-edit">
<div class="sds-transactionBlock__collapseInner">
<div class="sds-transactionBlock__row">
<div class="sds-transactionBlock__rowOuter sds-staticStackMd w-100">
<div class="sds-transactionBlock__rowInner">
<div class="sds-transactionBlock__colWrapperFixed">
<span class="sds-itemConnector sds-transactionBlock__itemConnector">
</span>
<div class="sds-transactionBlock__col -amount">
<div class="sds-arrowAmount sds-transactionBlock__arrowAmount">
<div class="sds-arrowAmount__bg">
<div class="sds-amount -amountNeutral -amountMd">
<div class="sds-amount__body">
<span class="sds-amount__value">{#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
</div>
</div>
</div>
<div class="sds-transactionBlock__col -account">
<div class="sds-accountInfo">
<div class="sds-avatar centeredBgi -avatarSm">
<img class="img-fluid" src="../../media/snet/avatars/avatarCactus.png" alt="">
</div>
<div class="sds-accountInfo__content">
<p class="sds-accountInfo__title">
<span class="text-truncate">
Kant Institution
</span>
</p>
<p class="sds-accountInfo__meta">LU## #### #### #### ####</p>
</div>
</div>
</div>
</div>
<div class="sds-transactionBlock__col -communication">
<div>MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM</div>
<div>Facture 239284</div>
<div>Facture 239284</div>
<div>Facture 239284</div>
</div>
</div>
<div class="sds-transactionBlock__rowContent">
<div class="sds-transactionBlock__meta sds-textHelper">Réf. : { ############### } ・Transaction validée par {user} le {dd.mm.yyyy} à {hh:mm}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% if rowRejected %}
{% set hasItemCircle = true %}
{% set itemConnectorClasses = [namespace + "transactionBlock__itemConnector", "-noBranching"] %}
{% set itemConnectorIconCircleOptions = {
classes: ["-primary100", "-smaller"],
icon: ["icon-cross"]
} %}
{% elseif rowAccepted %}
{% set hasItemCircle = true %}
{% set itemConnectorClasses = [namespace + "transactionBlock__itemConnector", "-noBranching"] %}
{% set itemConnectorIconCircleOptions = {
classes: ["-success100", "-smaller"],
icon: ["icon-check"]
} %}
{% else %}
{% set hasItemCircle = false %}
{% set itemConnectorClasses = [namespace + "transactionBlock__itemConnector"] %}
{% endif %}
<div class="{{ namespace }}transactionBlock {{ namespace }}box {% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<div class="{{ namespace }}transactionBlock__inner">
<div class="{{ namespace }}transactionBlock__row -first{% if accountRowRejected%} -rejected{% elseif accountRowAccepted %} -accepted{% endif %}">
<div class="{{ namespace }}transactionBlock__rowOuter {{ namespace }}staticStackMd w-100">
<div class="{{ namespace }}transactionBlock__rowInner">
<div class="{{ namespace }}transactionBlock__mainInfo">
<div class="{{ namespace }}transactionBlock__mainInfoAccount">
{% render "@avatar--image-small",{
img: "/snet/avatars/avatarCactus.png"
},true %}
<div class="{{ namespace }}stackXxs">
<div>Compte Epicerie Fournisseurs</div>
<div class="{{ namespace }}transactionBlock__meta {{ namespace }}textHelper">
LU63 0000 2200 3300 4400
</div>
{% render "@amount-body--positive-lg" %}
</div>
</div>
<div class="d-flex justify-content-between flex-grow-1">
<div class="{{ namespace }}transactionBlock__col {{ namespace }}stackXxs">
<div class="{{ namespace }}transactionBlock__meta {{ namespace }}textHelper">Encodeur</div>
{% render "@snet-avatar-text--extra-small" %}
</div>
<div class="{{ namespace }}transactionBlock__col {{ namespace }}stackXxs text-right{% if dateEdit %} -dateEdit{% endif %}">
<div>
<div class="{{ namespace }}transactionBlock__meta {{ namespace }}textHelper">
Date d'exécution
</div>
<div class="{{ namespace }}textSemiBold">23.03.2022</div>
</div>
{% if dateEdit %}{% render "@icon-btn-secondary",{claases: [namespace+"transactionBlock__dateEdit"],icon: "icon-edit"},true %}{% endif %}
</div>
</div>
</div>
</div>
{% if additionalContent %}
<div class="{{ namespace }}transactionBlock__rowContent {{ namespace }}staticStackMd">
{% if alert %}
{% render "@snet-alert--primary-30",{
text: "Le compte séléctionné n’est pas {error notification}",
dismissible: false
},true %}
{% endif %}
</div>
{% endif %}
</div>
</div>
<div class="{{ namespace }}transactionBlock__row -total">
<div class="{{ namespace }}transactionBlock__rowOuter {{ namespace }}staticStackMd w-100">
<div class="{{ namespace }}transactionBlock__rowInner">
<div class="{{ namespace }}transactionBlock__colWrapperFixed">
{% render "@snet-item-connector",{classes: [namespace + "transactionBlock__itemConnector"]},true %}
{% set expanded = false %}
{% if shown %}
{% set expanded = true %}
{% else %}
{% set expanded = false %}
{% endif %}
{% render "@icon-btn-secondary--small",{
icon: "icon-plus",
classes: [namespace + "transactionBlock__collapseToggle"],
attrs: {
"data-toggle": "collapse",
"data-target": "#transactionBlockCollapse-"+transactionBlockCollapseID,
"aria-expanded": expanded
}
}, true %}
<div class="{{ namespace }}transactionBlock__col -amount">
{% render "@amount-body--neutral-xl" %}
</div>
<div class="{{ namespace }}transactionBlock__col -transactions">
{% render "@snet-number-circle",{text: "2"},true %}
<div class="h4">Transactions</div>
</div>
</div>
{% if totalActions %}
<div class="{{ namespace }}transactionBlock__col -alignEnd">
<ul class="{{ namespace }}btnGroup">
<li>
{% render "@icon-btn-secondary",{
icon: "icon-edit",
classes: [namespace + "transactionBlock__edit"]
}, true %}
</li>
<li>
{% render "@icon-btn-secondary",{
icon: "icon-cross",
classes: [namespace + "transactionBlock__cancel"]
}, true %}
</li>
<li>
{% render "@icon-btn-secondary",{
icon: "icon-check",
classes: [namespace + "transactionBlock__validate"]
}, true %}
</li>
</ul>
</div>
{% endif %}
</div>
</div>
</div>
<div class="{{ namespace }}transactionBlock__collapse collapse{% if shown %} show{% endif %}" id="transactionBlockCollapse-{{ transactionBlockCollapseID }}">
<div class="{{ namespace }}transactionBlock__collapseInner">
<div class="{{ namespace }}transactionBlock__row{% if rowRejected %} -rejected{% elseif rowAccepted %} -accepted{% endif %}">
<div class="{{ namespace }}transactionBlock__rowOuter {{ namespace }}staticStackMd w-100">
<div class="{{ namespace }}transactionBlock__rowInner">
<div class="{{ namespace }}transactionBlock__colWrapperFixed">
{% render "@snet-item-connector",{
classes: itemConnectorClasses,
iconCircle: hasItemCircle,
iconCircleOptions: itemConnectorIconCircleOptions
},true %}
<div class="{{ namespace }}transactionBlock__col -amount">
{% render "@snet-arrow-amount",{classes: [namespace + "transactionBlock__arrowAmount"]},true %}
</div>
<div class="{{ namespace }}transactionBlock__col -account">
{% render "@snet-account-info--small" %}
</div>
</div>
{% if communication %}
<div class="{{ namespace }}transactionBlock__col -communication">
<div>MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM</div>
<div>Facture 239284</div>
<div>Facture 239284</div>
<div>Facture 239284</div>
</div>
{% endif %}
{% if additionalRowActions %}
<div class="{{ namespace }}transactionBlock__col -alignEnd">
<ul class="{{ namespace }}btnGroup">
<li>
{% render "@icon-btn-secondary",{
icon: "icon-edit",
classes: [namespace + "transactionBlock__edit"]
}, true %}
</li>
<li>
{% render "@icon-btn-secondary",{
icon: "icon-cross",
classes: [namespace + "transactionBlock__cancel"]
}, true %}
</li>
</ul>
</div>
{% endif %}
</div>
{% if additionalContent or rowRejected %}
<div class="{{ namespace }}transactionBlock__rowContent">
{% if alert %}
{% render "@snet-alert--primary-30",{
text: "Le compte séléctionné n’est pas {error notification}",
dismissible: false
},true %}
{% endif %}
{% if reference %}
<div class="{{ namespace }}transactionBlock__meta {{ namespace }}textHelper">Réf. : { ############### } ・Transaction validée par {user} le {dd.mm.yyyy} à {hh:mm}</div>
{% endif %}
</div>
{% endif %}
</div>
</div>
{% if additionalTransaction %}
<div class="{{ namespace }}transactionBlock__row">
<div class="{{ namespace }}transactionBlock__rowOuter {{ namespace }}staticStackMd w-100">
<div class="{{ namespace }}transactionBlock__rowInner">
<div class="{{ namespace }}transactionBlock__colWrapperFixed">
{% render "@snet-item-connector",{
classes: itemConnectorClasses,
iconCircle: hasItemCircle,
iconCircleOptions: itemConnectorIconCircleOptions
},true %}
<div class="{{ namespace }}transactionBlock__col -amount">
{% render "@snet-arrow-amount",{classes: [namespace + "transactionBlock__arrowAmount"]},true %}
</div>
<div class="{{ namespace }}transactionBlock__col -account">
{% render "@snet-account-info--small" %}
</div>
</div>
<div class="{{ namespace }}transactionBlock__col">
Facture 239284
</div>
{% if additionalRowActions %}
<div class="{{ namespace }}transactionBlock__col -alignEnd">
<ul class="{{ namespace }}btnGroup">
<li>
{% render "@icon-btn-secondary",{
icon: "icon-edit",
classes: [namespace + "transactionBlock__edit"]
}, true %}
</li>
<li>
{% render "@icon-btn-secondary",{
icon: "icon-cross",
classes: [namespace + "transactionBlock__cancel"]
}, true %}
</li>
</ul>
</div>
{% endif %}
</div>
{% if additionalContent or rowRejected %}
<div class="{{ namespace }}transactionBlock__rowContent">
{% if alert %}
{% render "@snet-alert--primary-30",{
text: "Le compte séléctionné n’est pas {error notification}",
dismissible: false
},true %}
{% endif %}
{% if reference %}
<div class="{{ namespace }}transactionBlock__meta {{ namespace }}textHelper">Réf. : { ############### } ・Transaction validée par {user} le {dd.mm.yyyy} à {hh:mm}</div>
{% endif %}
</div>
{% endif %}
</div>
</div>
{% endif %}
</div>
</div>
</div>
{% if isTransactionChainItem %}
<div class="js-transactionChainOperations collapse{% if transactionBlockTransactionChaincollapsesShown %}{% else %} show{% endif %}">
<div class="{{ namespace }}transactionBlock__footer">
<div class="row no-bottom-gutter">
<div class="col-12">
<div class="d-flex justify-content-end">
{% render "@btn-secondary--icon-left",{
icon: "icon-plus",
text: "Ajouter transaction",
attrs: transactionBlockTransactionChainAttrs
},true %}
</div>
</div>
</div>
</div>
</div>
{% endif %}
</div>
/* variables specific to current element */
$transaction-block-amount-price-col: $transaction-block-amount-price-col-global;
$transaction-block-account-info-col: $transaction-block-account-info-col-global;
$transaction-block-padding-mobile: $transaction-block-padding-mobile-global;
$transaction-block-padding-desktop: $transaction-block-padding-desktop-global;
$transaction-block-negative-margin: $transaction-block-negative-margin-global;
$transaction-block-row-padding: $transaction-block-row-padding-global;
$transaction-block-row-fixed-col-total-width: $transaction-block-row-fixed-col-total-width-global;
$transaction-block-row-account-avatar-spacing: "md";
$transaction-block-row-has-state-top-spacing: map-deep-get($token-spacer-stack-max-map, "sm");
.#{$namespace}transactionBlock {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
@include custom-prop-fallback("padding", "sys-space-inset-horizontal-1000");
@include media-breakpoint-up(lg) {
@include custom-prop-fallback("padding", "sys-space-inset-horizontal-1500");
}
/* 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 */
// transactionBlock__inner
&__inner {
margin: -($transaction-block-negative-margin);
border-radius: map-deep-get($token-radius-map, "8");
}
&__row,
&__rowInner {
display: flex;
align-items: flex-start;
@include spacer-component-inline("lg");
}
&__row {
position: relative;
z-index: z("zero");
padding: $transaction-block-row-padding;
border-radius: map-deep-get($token-radius-map, "16");
&::before {
content: "";
position: absolute;
z-index: z("negative");
top: 0;
bottom: 0;
left: map-deep-get($token-spacer-unit-map, "24");
transform: translateX(-50%);
width: $border-width*2;
@include custom-prop-fallback("background-color", "sys-color-border-primary-moderate");
}
&.-first.-first {
&::before {
height: auto;
top: map-deep-get($token-spacer-stack-max-map, "xxl");
}
}
&:last-child {
&::before {
height: $item-connector-dimensions-global + $border-width;
bottom: auto;
}
}
&.-total {
#{$self}__itemConnector {
display: none;
}
&::before {
bottom: 50%;
}
}
&.-first.-first,
&.-total.-total {
z-index: z("high");
}
&.-infoHeader {
&,
#{$self}__rowInner {
align-items: center;
border-bottom: $border-width solid;
@include custom-prop-fallback("border-color", "sys-color-border-primary-moderate");
padding-bottom: map-deep-get($token-spacer-inset-map, "lg");
padding-left: 0;
padding-right: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
margin-bottom: map-deep-get($token-spacer-inset-map, "sm");
margin-left: map-deep-get($token-spacer-inset-map, "sm");
margin-right: map-deep-get($token-spacer-inset-map, "sm");
@include spacer-component-inline("md");
}
#{$self}__rowInner {
padding: 0;
border-bottom: none;
margin: 0;
}
&::before {
content: none;
}
}
&.-detailFullHeight {
&::before {
height: calc(100% - #{map-deep-get($token-spacer-unit-map,"8")});
}
#{$self}__itemConnector {
align-self: flex-end;
&::before {
top: auto;
bottom: 0;
transform: translate(-50%, 0);
}
&::after {
content: none;
}
}
}
&:not(.-total):not(.-detailFullHeight):not(.-infoHeader):not(.-first):hover {
@media (hover: hover) {
@include custom-prop-fallback("background-color", "sys-color-background-primary-6");
#{$self}__arrowAmount {
.#{$namespace}amount {
@include custom-prop-fallback("background-color", "sys-color-background-primary-6");
}
}
}
}
&.-rejected,
&.-accepted {
& + & {
margin-top: $transaction-block-row-has-state-top-spacing;
}
&::before {
top: -($transaction-block-row-has-state-top-spacing);
}
}
&.-rejected {
// follows same logic as base element
@include custom-prop-fallback("background-color", "sys-color-background-secondary-6");
#{$self}__arrowAmount .#{$namespace}amount {
@include custom-prop-fallback("background-color", "sys-color-background-secondary-6");
}
#{$self}__edit,
#{$self}__validate {
visibility: hidden;
}
#{$self}__cancel {
@include custom-prop-fallback("background-color", "sys-color-background-secondary-100");
@include custom-prop-fallback("color", "sys-color-text-neutral-inverse");
}
}
// transactionBlock -dateEdit
// transactionBlock -accepted
&.-accepted {
// follows same logic as base element
@include custom-prop-fallback("background-color", "sys-color-background-status-success-6");
#{$self}__arrowAmount .#{$namespace}amount {
@include custom-prop-fallback("background-color", "sys-color-background-status-success-6");
}
#{$self}__edit,
#{$self}__cancel {
visibility: hidden;
}
#{$self}__validate {
@include custom-prop-fallback("background-color", "sys-color-background-status-success-100");
@include custom-prop-fallback("color", "sys-color-text-neutral-inverse");
}
}
}
&__rowInner {
&:not(:has(#{$self}__col.-communication)) {
.#{$namespace}accountInfo__meta {
overflow: visible;
text-overflow: inherit;
}
}
}
&__rowContent {
padding-left: $avatar-small-dimensions-global + map-deep-get($token-spacer-inline-map, $transaction-block-row-account-avatar-spacing);
padding-bottom: map-deep-get($token-spacer-inset-map, "sm");
}
&__mainInfo {
// follows same logic as parent
display: flex;
align-items: flex-start;
justify-content: space-between;
@include spacer-component-inline("lg");
width: 100%;
}
&__mainInfoAccount {
display: flex;
align-items: center;
@include spacer-component-inline($transaction-block-row-account-avatar-spacing);
position: relative;
width: $transaction-block-row-fixed-col-total-width;
flex-shrink: 0;
}
&__meta {
@include custom-prop-fallback("color", "sys-color-text-primary-muted");
}
&__itemConnector {
margin-right: map-deep-get($token-spacer-inline-map, "md");
}
&__misc {
text-align: right;
}
&__headerInfo {
@include spacer-component-inline("lg");
}
&__collapseInner {
padding-top: map-deep-get($token-spacer-unit-map,"8");
#{$self}__row {
&:first-child {
&::before {
top: -(map-deep-get($token-spacer-unit-map,"8"));
}
}
}
}
&__collapseToggle {
margin-right: map-deep-get($token-spacer-inline-map, "md") !important;
&::after {
content: "";
position: absolute;
z-index: z("negative");
top: 50%;
bottom: 0;
left: map-deep-get($token-spacer-unit-map, "24");
transform: translateX(-50%) scaleY(0);
width: $border-width*2;
@include custom-prop-fallback("background-color", "sys-color-border-primary-moderate");
transition: transform 0.025s linear;
transition-delay: $transition-collapse-duration;
}
&[aria-expanded="true"] {
> * {
&::before {
content: map-deep-get($token-icon-map, "minus")
}
}
&::after {
transform: translateX(-50%) scaleY(1);
transition-delay: 0s;
}
}
}
&__arrowAmount {
.#{$namespace}amount {
@include custom-prop-fallback("background-color", "comp-box-background-color");
padding-left: 0;
}
}
&__colWrapperFixed {
display: flex;
align-items: center;
width: $transaction-block-row-fixed-col-total-width;
> * + * {
margin-right: $transaction-block-row-element-horizontal-margin-global;
&:last-child {
margin-right: 0;
}
}
}
&__col {
&.-amount {
width: $transaction-block-amount-price-col;
@include spacer-component-inline("md");
flex-shrink: 0;
}
&.-account {
width: $transaction-block-account-info-col;
//margin-right: map-deep-get($token-spacer-inline-map, "lg");
}
&.-alignEnd {
margin-left: auto;
}
&.-transactions {
display: flex;
align-items: center;
@include spacer-component-inline("md");
}
&.-dateEdit {
display: flex;
@include spacer-component-inline("lg");
}
&.-communication {
min-width: 0;
> * {
@include text-truncate;
}
}
}
&__transactionDataIcon {
margin-left: 0.225em;
}
&__infoTable {
flex-grow: 1;
}
&__footer {
margin-top: map-deep-get($token-spacer-unit-map, "24");
}
/* modifiers */
// transactionBlock -rejected
&.-rejected {
// follows same logic as base element
#{$self}__inner,
#{$self}__arrowAmount .#{$namespace}amount {
@include custom-prop-fallback("background-color", "sys-color-background-secondary-6");
}
#{$self}__edit,
#{$self}__validate {
visibility: hidden;
}
#{$self}__cancel {
@include custom-prop-fallback("background-color", "sys-color-background-secondary-100");
@include custom-prop-fallback("color", "sys-color-text-neutral-inverse");
}
}
// transactionBlock -dateEdit
// transactionBlock -accepted
&.-accepted {
// follows same logic as base element
#{$self}__inner,
#{$self}__arrowAmount .#{$namespace}amount {
@include custom-prop-fallback("background-color", "sys-color-background-status-success-6");
}
#{$self}__edit,
#{$self}__cancel {
visibility: hidden;
}
#{$self}__validate {
@include custom-prop-fallback("background-color", "sys-color-background-secondary-100");
@include custom-prop-fallback("color", "sys-color-text-neutral-inverse");
}
}
&.-notCollapsible {
#{$self}__row.-total {
#{$self}__itemConnector {
display: inline-flex;
}
#{$self}__collapseToggle {
display: none;
}
#{$self}__edit {
display: none;
}
}
}
&.-noValidation {
#{$self}__cancel {
margin-right: 0;
}
#{$self}__validate {
display: none;
}
}
&.-fluidTransactions {
#{$self}__colWrapperFixed {
width: auto;
}
#{$self}__col {
&.-amount {
width: $transaction-block-amount-price-col-global;
}
}
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}