1 .flip-x { 2 transform: scaleX(-1); 3 } 4 5 .hidden { 6 display: none; 7 } 8 9 /** 10 * Hides an element. 11 */ 12 .hide { 13 display: none !important; 14 } 15 16 .invisible { 17 visibility: hidden; 18 } 19 20 /** 21 * Shows an element. 22 */ 23 .show { 24 display: block !important; 25 } 26 27 /** 28 * resets default button styles, 29 * mostly intended to be used on interactive elements that 30 * differ from their default styles (e.g. <a>) or have custom styles 31 */ 32 .invisible-button { 33 background: none; 34 border: none; 35 color: inherit; 36 cursor: pointer; 37 padding: 0; 38 } 39 40 41 /** 42 * style an element the same as an <a> 43 * useful on some cases where we visually have a link but it's actually a <button> 44 */ 45 .as-link { 46 @extend .invisible-button; 47 48 display: inline; 49 color: #44A5FF; 50 text-decoration: none; 51 font-weight: bold; 52 53 &:focus, 54 &:hover, 55 &:active { 56 text-decoration: underline; 57 } 58 }