SCSS-миксины

// Традиционное обнуление @mixin clearfix() { &:after { content: ""; display: table; clear: both; } } // Скрываем текст @mixin hide-text() { font-size: 0; color: transparent; text-shadow: none; background-color: transparent; border: 0; } @mixin text-hide() { @include hide-text; } // Скрываем выходящий за границы текст и ставим многоточия // !!! Работает ТОЛЬКО с однострочным текстом !!! @mixin text-overflow() { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } // Нулевое центрирование для картинок @mixin zero-centering() { display: block; max-width: 100%; max-height: 100%; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } // Тени через запятую @mixin box-shadow($shadows...) { box-shadow: $shadows; } // Обнуляем списки @mixin list-clear() { margin: 0; padding: 0; list-style-type: none; } // Дефолтный тразнишн @mixin trz($smth: all, $dur: .1s, $ttf: ease-in-out) { transition: $smth $dur $ttf; } // Опасити ховер @mixin opacity-hvr() { opacity: 1; &:hover { opacity: .8; } &:active { opacity: .6; } } // Стилизация placeholder'ов @mixin placeholder($color: #000) { &::-moz-placeholder { color: $color; opacity: 1; // See https://github.com/twbs/bootstrap/pull/11526 } &:-ms-input-placeholder { color: $color; } &::-webkit-input-placeholder { color: $color; } } // Без подчеркиваний @mixin tdn($value: underline) { text-decoration: none; &:hover { text-decoration: $value; } &:active { text-decoration: $value; } } // С подчеркиваниями @mixin tdr() { text-decoration: underline; &:hover { text-decoration: none; } &:active { text-decoration: none; } } // shadow-in-hvr(color: #000, tension: 3px, percent: 10%) // box-shadow inset 0 0 0 tension color // &:hover // box-shadow inset 0 0 0 tension lighten(color, percent) // &:active // box-shadow inset 0 0 0 tension darken(color, percent) // border-hvr(color: #000, percent: 10%) // border-color color // &:hover // border-color lighten(color, percent) // &:active // border-color darken(color, percent) // Ховерим текст @mixin color-hvr($color: $c_base, $percent: 10%) { color: $color; &:hover { color: lighten($color, $percent); } &:active { color: darken($color, $percent); } } // Ховерим бэкграунд @mixin bg-hvr($bg-c: #000, $percent: 10%) { background-color: $bg-c; &:hover { background-color: lighten($bg-c, $percent); } &:active { background-color: darken($bg-c, $percent); } } // Альтернативный ховер бекграунда @mixin bg-hvr--dark($bg-c: #f5f5f5, $percent: 7%) { background-color: $bg-c; &:hover { background-color: darken($bg-c, $percent); } &:active { background-color: darken($bg-c, $percent+5%); } }