Полимерная краска для каркасов и бумага

Я начинаю использовать polymer 0.5 для создания отзывчивого веб-сайта. Я знаю, что это не полностью закончено, но, тем не менее, я нахожу это довольно аккуратным и простым, чтобы быстро сделать вещи.

Теперь я использую core-scaffold как общий макет. Я знаю, как окрашивать боковую панель, но я не уверен, где я могу настроить основные настройки контента.

<html>
    <head>  
        <style>
            html,body {
                height: 100%;
                margin: 0;
                background-color: #E5E5E5;
                font-family: 'RobotoDraft', sans-serif;
            }

            core-toolbar {
                background: #E5E5E5;
                color: white;
            }

            paper-item.core-selected {
                color: #99182c;
                fill: #99182c;
            }
        </style>

    </head>

    <body unresolved touch-action="auto">

        <core-scaffold>

            <core-header-panel navigation flex mode="seamed">
                <core-toolbar style="background-color: #99182c; color:#fff;">Main site name</core-toolbar>
                <core-menu selected="0">
                    <paper-item icon="home" label="Home"></paper-item>
                    <paper-item icon="today" label="Activities"></paper-item>
                    <paper-item icon="account-box" label="People"></paper-item>
                    <paper-item icon="theaters" label="Pictures"></paper-item>
                    <paper-item icon="info" label="Info"></paper-item>
                    <paper-item icon="lock" label="Login"></paper-item>
                </core-menu>
            </core-header-panel>

            <div tool>Home</div>
        </core-scaffold>
    </body>
</html>

Итак, панель инструментов ядра - это стиль левой боковой панели, но как я могу создать основную страницу?

Другая проблема, с которой я столкнулась, - это то, что я хотел бы работать с бумажными элементами. Однако при использовании этого core-scaffold вы заметите, что когда экран достаточно мал, и на вкладке открывается открытая панель меню, это "нормальная" кнопка, а не бумажная. Поскольку это находится в core-scaffold, я не знаю, как это изменить (если это возможно). Любые идеи?

Ответ 1

Я столкнулся с той же проблемой, и оказалось, что вы можете стилизовать элементы (панель инструментов) внутри других элементов (ядро-леса) с помощью CSS со специальным синтаксисом для доступа к внутреннему компоненту (который находится внутри Shadow DOM) с использованием псевдоэлемента ::shadow.

Верхнее правило изменяет цвет фона заголовка, а второй меняет фон области содержимого.

core-scaffold::shadow core-toolbar {
  background: #E5E5E5;
  color: black;
}

core-scaffold::shadow core-header-panel {
  background: #FFF;
  color: black;
}

Источник: http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/#toc-style-cat-hat

Обновление. Это неправильно работает с Firefox из-за прокладок. Что добавили стили с директивой shim-shadowdom, которая интерпретируется только тогда, когда на нестандартной платформе non webcomponent/shadowdom:

<style shim-shadowdom>
  core-scaffold core-toolbar {
    background: #EEE;
    color: black;
  }

  core-scaffold #main core-header-panel {
    background: #FFF;
    color: black;
  }
</style>

Обратите внимание, что для изменения фона области содержимого мне также нужно было выбрать #main, поэтому для портирования правил ::shadow может потребоваться небольшая проверка...

Наконец, когда вам нужно правильно работать с Firefox и другими браузерами из элемента webcomponent/polymer, вы можете использовать polyfill-rule или polyfill-unscoped-rule.

Ответ 1

Ответ 2