airen

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] {

airen

PPEyRp

Forked from Captain Anonymous's Pen qOpJqG.

A Pen by Airen on CodePen.

License.

airen

<ul>
  <li><div>1</div></li>
  <li><div>2</div></li>
  <li><div>3</div></li>
  <li><div>4</div></li>
  <li><div>5</div></li>
  <li><div>6</div></li>
  <li><div>7</div></li>
  <li><div>8</div></li>
  <li><div>9</div></li>

airen

// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----

.a {
  color: red;
  
  .b {
    color: green;

airen

// ----
// libsass (v3.2.5)
// ----

@mixin keyframes($name:test){
  @-webkit-key-frames($name){
    @content;
  }
}

airen

// ----
// libsass (v3.2.5)
// ----

.box {
  color: red;
  &:before{
    color:green;  
  }
}

airen

// ----
// libsass (v3.2.5)
// ----

$breakpoints: (
  small : 480px,
  medium: 700px, // Previously 640px
  large : 1024px
);

airen

// ----
// libsass (v3.2.5)
// ----

$breakpoints: (
  small : 480px,
  medium: 700px,
  large : 1024px
);

airen

// ----
// libsass (v3.2.5)
// ----

$p-font-sizes: (
  null  : 15px,
  480px : 16px,
  640px : 17px,
  1024px: 19px
);

airen

// ----
// libsass (v3.2.5)
// ----

.a{
  color: red;
}
.b {
  color: green;
}