How to use polythene-core-css - 10 common examples

background: "#fff",
      margin: "0 0 10px 0",

      " .bar": {
        position: "relative",
        width: "100%",
      },
      " .bar-row.pe-dark-tone": {
        background: "#3F51B5",
        padding: "4px 0"
      }
    }
  }
];

styler.add("test-menu-position", styles);

const createPositionContainer = ({ h, k, Menu, List, ListTile, Shadow, IconButton }) => ({
  oninit: vnode => {
    const show = stream(false);
    Object.assign(vnode.state, {
      show,
      redrawOnUpdate: stream.merge([show]) // for React
    });
  },
  view: vnode => {
    const state = vnode.state;
    const attrs = vnode.attrs;
    const show = state.show();
    return h(".position-container.layout.vertical",
      { key: attrs.id },
      [

const backdrop = (selector, vars) => // eslint-disable-line no-unused-vars
  sel(selector, {
    ".pe-dialog--visible .pe-dialog__backdrop": {
      display: "block",
      opacity: 1,
    }
  });

border_radius: (selector, vars) => [
    !vars.full_screen && sel(selector, {
      " .pe-dialog__content": {
        borderTopLeftRadius: vars.border_radius + "px",
        borderTopRightRadius: vars.border_radius + "px",
        borderBottomLeftRadius: vars.border_radius + "px",
        borderBottomRightRadius: vars.border_radius + "px",
      },
    }),
  ],
  // Theme vars

" .content": {
        padding: "20px",
        color: "#666",
        background: "#f0f0f0"
      },
      " h5": {
        margin: 0
      },
      " .text": {
        margin: "1rem 0 0 0"
      }
    }
  },
}];

styler.add("polythene-test-tabs-nested", styles);

const mainButtons = [
  { id: "new", label: "New" },
  { id: "favs", label: "Favs" },
  { id: "saved", label: "Saved" }
];

const subButtonsNew = [
  { id: "today", label: "Today" },
  { id: "weekly", label: "Weekly" }
];

const lorem = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";

const subTabsNew = ({ h, Tabs }) => {
  const tabs = subButtonsNew;

fontSize: "14px",
      color: rgba(vars.color_light_foreground, vars.blend_light_text_secondary)
    },
    " .pe-slider": {
      color: "#009688",
      margin: "13px 0 11px 0"
    }
  },
  " .pe-dark-tone.volume": {
    " .pe-header": {
      color: rgba(vars.color_dark_foreground, vars.blend_dark_text_secondary)
    }
  }
}];

styler.add("polythene-test-slider-volume", styles);

const volumeIconSVG = "<svg viewBox="\&quot;0" height="\&quot;24\&quot;" width="\&quot;24\&quot;"><path d="\&quot;M3"></path></svg>";
const alarmIconSVG = "<svg viewBox="\&quot;0" height="\&quot;24\&quot;" width="\&quot;24\&quot;"><path d="\&quot;M7.88"></path></svg>";
const headphonesIconSVG = "<svg xml:space="\&quot;preserve\&quot;" viewBox="\&quot;0" height="\&quot;24\&quot;" width="\&quot;24\&quot;"><path z="" d="\&quot;M" stroke-linejoin="\&quot;round\&quot;" stroke-width="\&quot;0.2\&quot;" fill-opacity="\&quot;1\&quot;" fill="\&quot;#000000\&quot;"></path></svg>";

export default ({ h, Slider, Icon }) =&gt; {

  const volumeIcon = h.trust(volumeIconSVG);
  const alarmIcon = h.trust(alarmIconSVG);
  const headphonesIcon = h.trust(headphonesIconSVG);
  const defaults = {
    min: 0,
    max: 10,
    stepSize: 0,
  };
  return {

width: trackWidth + "px"
      }
    },
    " .pe-textfield": {
      color: "#009688",
      width: inputWidth + "px",
      paddingBottom: 0,

      " .pe-textfield__input": {
        textAlign: "center"
      }
    }
  }
}];

styler.add("polythene-test-slider-rgb", styles);

class ColorSlider extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: this.props.defaultValue || 0,
      inputValue: (this.props.defaultValue || 0).toString(),
    };
    this.updateValue = this.updateValue.bind(this);
    this.updateInputValue = this.updateInputValue.bind(this);
  }

  componentDidMount() {
    this._mounted = true;
  }

width: trackWidth + "px"
      }
    },
    " .pe-textfield": {
      color: "#009688",
      width: inputWidth + "px",
      paddingBottom: 0,
      
      " .pe-textfield__input": {
        textAlign: "center"
      }
    }
  }
}];

styler.add("polythene-test-slider-rgb", styles);

const colorSlider = ({ h, k, Slider, TextField }) => {
  return {
    oninit: vnode => {
      const attrs = vnode.attrs;
      const value = stream(attrs.defaultValue);
      value.map(newValue => (
        attrs.onUpdateValue(newValue)
      ));
      Object.assign(vnode.state, {
        value
      });
    },
    view: vnode => {
      const state = vnode.state;
      const attrs = vnode.attrs;

import { styler } from 'polythene-core-css';
import flexStyle from './flex-style';
import commonStyle from './common-style';

styler.add('pe-layout', flexStyle, commonStyle);

import { styler } from 'polythene-core-css';
import flexStyle from './flex-style';
import commonStyle from './common-style';

styler.add('pe-layout', flexStyle, commonStyle);

export const addRoboto = () => (
  addWebFont('google', 'Roboto:400,500,700,400italic:latin'),
  styler.add("pe-roboto", robotoStyles)
);