voodoocode

Styling native elements

Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element or the /deep/ path selector.

video::webkit-media-controls-timeline {
  background-color: lime;
}

video /deep/ input[type=range] {

voodoocode

atom-workspace-axis.vertical atom-pane {
  flex-direction: row-reverse;
  .tab-bar {
    box-shadow: inset -1px 0 0 #181a1f;
    resize: horizontal;
    height: auto;
    display: block;
    padding-right: 1px;
    padding-bottom: 3em;
    min-width: 14em;

voodoocode

javascript:(function()%7B%24('%23wrapper-content').css(%7Bopacity%3A%201%2Cfilter%3A%20'none'%2CpointerEvents%3A%20'all'%7D)%3B%24('.ua-detected').hide()%7D)()

voodoocode

// Mixin to quickly apply accessible hiding to elements.
@mixin hidden-visually() {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;

voodoocode

$teaser-colors: (
  "123": (
    "selector": "#anchor-teaser123",
    "type": "landingpageElement-anchor",
    "bg-color": "green",
    "text-color": "#efefef"
  ),
  "456": (
    "selector": "#anchor-teaser456",
    "type": "landingpageElement-anchor",

voodoocode

// remove space from string
@function str-replace($string, $search, $replace) {
  $index: str-index($string, $search);

  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace +
      str-replace(
        str-slice($string, $index + str-length($search)),
        $search,
        $replace

voodoocode

$teaser-colors: (
  "123": (
    "selector": "#anchor-teaser123",
    "type": "landingpageElement-anchor",
    "bg-color": "green",
    "text-color": "#ffffff"
  ),
  "456": (
    "selector": "#anchor-teaser456",
    "type": "landingpageElement-anchor",

voodoocode

// remove space from string
@function str-replace($string, $search, $replace) {
  $index: str-index($string, $search);

  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace +
      str-replace(
        str-slice($string, $index + str-length($search)),
        $search,
        $replace

voodoocode

// remove space from string
@function str-replace($string, $search, $replace) {
  $index: str-index($string, $search);

  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace +
      str-replace(
        str-slice($string, $index + str-length($search)),
        $search,
        $replace

voodoocode

// remove space from string
@function str-replace($string, $search, $replace) {
  $index: str-index($string, $search);

  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace +
      str-replace(
        str-slice($string, $index + str-length($search)),
        $search,
        $replace