Темы в angular material

Немного экзотичный кейс. В проекте использован angular material и, частично, его механизм темизации интерфейса. Есть несколько приложений, использующих общие стили. Часть стилей переопределяет стили из матириала. В одном из приложений имя темы указывается явно на все приложение, а другом не используются вообще, а применяются кастомные стили. Это дано.
Что надо? Чтобы в случае, если для приложения явно указана тема, отличная по оформлению от кастомных стилей, использовались кастомные стили, а не стили темы.
В angular material есть механизм указания темы для отдельных элементов библиотеки через атрибут md-theme. Так вот, если вам на каком-то элементе не нужно, чтобы использовалась тема приложения или даже дефолтная тема, оставьте значение этого атрибута пустым. ? пишите кастомные стили, какие вам нужны.

<md-radio-group ng-model="model" md-theme="">
  <md-radio-button ng-repeat="setting in settings" 
                      ng-value="setting.value"
                      class="app-color">
    <span ng-bind="setting.title"></span>
  </md-radio-button>
</md-radio-group>

Стили для скролбара

Часто дизайнеры рисуют скролбар так, чтобы он подходил под дизайн. Не задумываясь о том, как это будет сделано. Если дизайн скролбара критичен, то приходится использовать Javascript-решения, имитирующие браузерный скролбар. Но ведь это чисто оформительская задача, почему бы не использовать ля этих целей CSS, который как раз и отвечает за оформление сайта/интерфейса. Но, к сожалению, только браузеры на Webkit дают нам контроль над внешним видом скролбара. 


::-webkit-scrollbar { width: 3px; height: 3px;}
::-webkit-scrollbar-button {  background-color: #666; }
::-webkit-scrollbar-track {  background-color: #999;}
::-webkit-scrollbar-track-piece { background-color: #ffffff;}
::-webkit-scrollbar-thumb { height: 50px; background-color: #666; border-radius: 3px;}
::-webkit-scrollbar-corner { background-color: #999;}}
::-webkit-resizer { background-color: #666;}

Да еще ?Е позволяет частично перекрасить скролбар.


body{
    scrollbar-base-color: #C0C0C0;
    scrollbar-base-color: #C0C0C0;
    scrollbar-3dlight-color: #C0C0C0;
    scrollbar-highlight-color: #C0C0C0;
    scrollbar-track-color: #EBEBEB;
    scrollbar-arrow-color: black;
    scrollbar-shadow-color: #C0C0C0;
    scrollbar-dark-shadow-color: #C0C0C0;
}

А вот в Firefox такой возможности нет от слова совсем. ? на багзилле давным-давно заведен баг по этому поводу. ? есть возможность проголосовать за то, чтобы Firefox имплементировал возможность оформить скролбар средствами CSS.

Конец эпохи Firebug

Немного печальная новость, закрывается firebug. Каким событием было его появление в свое время, просто революция! Неоценимая помощь для разработчика!!!
Но все проходит. Firebug был первым и задал пути развития инструментов для разработчиков. А сейчас и Chrome DevTools, и Firefox Developer Tools предоставляют больше возможностей да и работают быстрее.
Король умер! Да здравствует король!!!

Стайл-гайд для SASS

Залез, работая с bourbon.io, в их исходники. ? там нашел короткий, но исчерпывающий стайл-гайд для написания кода в SASS. Просто процитирую:

SCSS Style Guide

  • Two spaces, no tabs.
  • Dashes instead of underscores or camel case: linear-gradient not linear_gradient or linearGradient
  • Names should be descriptive and written in full-words: $all-text-inputs-hover not $hover or $alltxthvr
  • Space between property and value: width: 20px not width:20px
  • Declarations within a block should be ordered alphabetically.
  • Blank lines between rules.
  • No trailing whitespace. Blank lines should not have any space.

Хочется подписаться под каждой строчкой! Всем красивого и легко читаемого кода.

Намасте!

Капелька типографики

А используете ли вы мягкий перенос ­ в своих текстах? Просто глас в пустыне :)
Это бывает очень удобно и при этом ваш текст начинает смотреться красиво! Например:

See the Pen Мягкий перенос с помощью символа ­ by Sergey Kirichenko (@oknechirik) on CodePen.


В первом варианте и текст лучше смотрится, и места текст меньше занимает. Сплошные плюсы!
Удачи всем!

Как спрятать «глаз» у поля пароля в IE

В браузерах от Microsoft для поля типа пароль (input type=password) есть возможность посмотреть, что вы ввели. Для этого в поле справа появляется «глаз», когда вы начинаете вводить пароль. При клике на «глаз» вы увидите пароль. Но не всегда этот «глаз» вписывается, в дизайн вашего сайта или приложения. Хочется или спрятать его, или заменить на свой.
Этот элемент — это псевдо-элемент ::-ms-reveal. ? им можно управлять через CSS. Например вот так:

::-ms-reveal {display: none;}

Вращение через CSS transform rotate

Забавная штука. Если вы вращаете элемент через CSS-transform, то вращение в Хроме будет в одну сторону, а в ФФ и ?Е в другую)
Чтобы вращение было в одну сторону надо установить начальное значение для rotate.

Немного боли от angular material (глас вопиющего)

О, создатели
Зачем, зачем, зачем вы делаете вот так?

md-select-menu.md-default-theme md-content md-option:not([disabled]):focus, 
md-select-menu md-content md-option:not([disabled]):focus, 
md-select-menu.md-default-theme md-content md-option:not([disabled]):hover, 
md-select-menu md-content md-option:not([disabled]):hover {
    background: rgb(238,238,238);
}

?ли так:

.md-chips md-chip ._md-chip-remove md-icon {}

Четверная вложенность и элементы в селекторах!
Вот и поди переопредели эти свойства при необходимости :'(

?спользуете ли вы Flexbox? Часть 2-я

В продолжение использования flexbox.
Поскольку в текущем проекте в качестве препроцессора мы используем SASS, то я для пущего удобства набросал миксин для генерации атрибутов со свойствами flexbox.
Выглядит это так. Сначала перечисляем в переменной нужные нам свойства:

$flex-properties: (
    justify-content: (flex-start flex-end center space-between space-around),
    align-items: (flex-start flex-end center baseline stretch),
    align-content: (flex-start flex-end center space-between space-around stretch)
);

Затем циклом перебираем все свойства:

@each $key, $properties in $flex-properties {
    @each $property in $properties {
        [#{$key}="#{$property}"] {
            #{$key}: #{$property};
        }
    }
}

? получаем на выходе вот такой CSS:
Читать далее ?спользуете ли вы Flexbox? Часть 2-я