V5 requests, pre, currentColor, absolute position, pointer events

[bnjmnrsh]

tachyons-css/tachyons#211 (comment)

.overflow-scrolling-touch { -webkit-overflow-scrolling: touch; }
.b--currentColor { border-color: currentColor; }
.bg-currentColor { background-color: currentColor; }
.touch-action-none { touch-action: none; }
.top-100 { top: 100%; }
.right-100 { right: 100%; }
.bottom-100 { bottom: 100%; }
.left-100 { left: 100%; }

tachyons-css/tachyons#211 (comment)

// RESIZE
// Useful for textarea
.resize-h { resize: horizontal; }
.resize-v { resize: vertical; }
.resize-none { resize: none; }

// SVG
// Mix with tachyons color you can apply tachyons color to svg
.fill {
    fill: currentColor;
}

// OVERFLOW WRAP
// Very useful when you deal with a lot of text
.overflow-wrap {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

// WHITE-SPACE
// Very useful when you deal with a lot of text
.pre-wrap {
    white-space: pre-wrap;
}
.pre-line {
    white-space: pre-line;
}

// ABSOLUTE POSITION 100%
.top-100    { top:    100%; }
.right-100  { right:  100%; }
.bottom-100 { bottom: 100%; }
.left-100   { left:   100%; }

// ABSOLUTE POSITION 50%
.top-50    { top:    50%; }
.right-50  { right:  50%; }
.bottom-50 { bottom: 50%; }
.left-50   { left:   50%; }

// BORDER-ONLY
// Useful to create separator or material design input like
@mixin generate_border_only($name, $position) {
    $positions: "top", "right", "bottom", "left";

    .b#{$name}--only {
        @each $p in $positions {
            @if($p == $position) {
                border-#{$p}-style: solid;
                border-#{$p}-width: 1px;
            } @else {
                border-#{$p}-style: none;
                border-#{$p}-width: 0;
            }
        }
    }
}
@include generate_border_only("t", "top")
@include generate_border_only("r", "right")
@include generate_border_only("b", "bottom")
@include generate_border_only("l", "left")

// VISIBILITY
.v-hidden { visibility: hidden; }

// POINTER EVENTS
.pe-none { pointer-events: none; }