.tribe-common { /* ----------------------------------------------------------------------------- * * Button: Icon * * Example: * * ... * * ----------------------------------------------------------------------------- */ .tribe-common-c-btn-icon { &:before { background-repeat: no-repeat; background-size: contain; content: ''; display: block; } } /* ----------------------------------------------------------------------------- * * Button: Icon Border * * Example: * * ... * * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * Button: Icon Caret Left * ----------------------------------------------------------------------------- */ .tribe-common-c-btn-icon--caret-left { &:before { background-image: svg-inline(caret-left-secondary); height: 20px; width: 12px; } &:active, &:hover, &:focus { &:before { background-image: svg-inline(caret-left); } } &:disabled { &:before { background-image: svg-inline(caret-left-disabled); } } } /* ----------------------------------------------------------------------------- * Button: Icon Caret Right * ----------------------------------------------------------------------------- */ .tribe-common-c-btn-icon--caret-right { &:before { background-image: svg-inline(caret-right-secondary); height: 20px; width: 12px; } &:active, &:hover, &:focus { &:before { background-image: svg-inline(caret-right); } } &:disabled { &:before { background-image: svg-inline(caret-right-disabled); } } } /* ----------------------------------------------------------------------------- * Button: Icon Filters * ----------------------------------------------------------------------------- */ .tribe-common-c-btn-icon--filters { &:before { background-image: svg-inline(filters); height: 20px; width: 24px; } &:active, &:hover, &:focus { &:before { background-image: svg-inline(filters-active); } } &:disabled { &:before { background-image: svg-inline(filters-disabled); } } } /* ----------------------------------------------------------------------------- * Button: Icon Search * ----------------------------------------------------------------------------- */ .tribe-common-c-btn-icon--search { &:before { background-image: svg-inline(search); height: 20px; width: 20px; } &:active, &:hover, &:focus { &:before { background-image: svg-inline(search-active); } } &:disabled { &:before { background-image: svg-inline(search-disabled); } } } /* ------------------------------------------------------------------------- * * Button: Icon Border - Theme Overrides * * ------------------------------------------------------------------------- */ }