// Generate `:hover` and `:focus` styles in one go. @mixin hocus { &:hover, &:focus, &:active { @content; } } // Hanldes placeholder text across browsers in one line // // usage, NOTE: input { is important otherwise // an errant space is generated before : // // input { @include placeholder { // font-style: italic; // }} @mixin placeholder { &::-webkit-input-placeholder {@content} &::-moz-placeholder {@content} &:-moz-placeholder {@content} &:-ms-input-placeholder {@content} } // Round the corners of a table by a specified radius // NOTE: default is to use $border-radius. Depends // on borders being present, and made by td's // Also needs border-collapese: seperate // // (outer type or class) { // Simple usage // @include round-table-corners(); // // Detailed Usage // @include round-table-corners(); // } @mixin round-table-corners($radius: $border-radius) { tr:first-of-type td:first-of-type { border-top-left-radius: $border-radius; } tr:first-of-type td:last-of-type { border-top-right-radius: $border-radius; } tr:last-of-type td:first-of-type { border-bottom-left-radius: $border-radius; } tr:last-of-type td:last-of-type { border-bottom-right-radius: $border-radius; } } // Simple truncation mixin to cut off text using an ellipsis after a certain // width. // // .simple-usage { // @include truncate(); // } // // .detailed-usage { // @include truncate(); // } @mixin truncate($width: 100%) { max-width: $width; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @mixin untrunc($width: 100%) { max-width: $width; white-space: normal; overflow: hidden; } @mixin word-wrap { -ms-word-break: break-all; overflow-wrap: break-word; } // // TRIGGER ARROW // // Can specify display (inline vs block) and arrow position @mixin trigger_arrow ( $display: block, $arrow-pos: $list-padding ) { &[aria-expanded='false']:after, &[aria-expanded='true']:after { color: inherit; font-family: 'octicons'; font-size: 14px; vertical-align: middle; @include hocus() { color: inherit; } @if ($display==block) { display: block; position: absolute; right: $arrow-pos; top: $arrow-pos; } @if ($display==inline) { display: inline-block; position: relative; margin-bottom: 2px; margin-left: 2px; } } &[aria-expanded='false']:after { content: '\f05a'; // triangle right } &[aria-expanded='true']:after { content: '\f05b'; // triangle down } } // // INPUT HANDLE // Used for toggles and ranges // @mixin input_handle($transition: true) { background-color: $white; border: $input-border-default; border-radius: 50%; bottom: 1px; content: ""; cursor: pointer; height: 18px; left: 1px; position: absolute; width: 18px; @if $transition == 'true' { transition: .4s; -webkit-transition: .4s; } } // // REFACTORED TRIGGER ARROW // Used for toggles and ranges // @mixin rf_trigger_arrow ( $arrow-pos: $list-padding ) { &[aria-expanded='false']:after, &[aria-expanded='true']:after { color: inherit; font-family: 'octicons'; font-size: 14px; vertical-align: middle; height: $arrow-height; width: $arrow-width; display: block; position: absolute; right: $list-padding; top: $arrow-pos + ($arrow-height/2); @include hocus() { color: inherit; } } &[aria-expanded='false']:after { content: '\f05a'; // triangle right } &[aria-expanded='true']:after { content: '\f05b'; // triangle down } }