Basic

Description: By default, a feature defined in state inherits the options of the state. The feature option Object then controls both the state options and the feature options.

Edit
ctr('.test', {
width: 200px
before: {
content: 'hello'
}
hover-on: {
option: {
duration: 2s
delay: 0.5s
ease: 'ease-in'
}
height: 400px
// inherits options
element: {
// option Object becomes both the element
// and the state option
option: {
// element key
key: 'before'
// override 2s duration
shorthand: {
font-size: 1s
}
}
color: red
font-size: 1em
}
}
})
.test:
width: 200px
before:
content: hello
hover-on:
option:
duration: 2s
delay: 0.5s
ease: ease-in
height: 400px
# inherits options
element:
# option Object becomes both the element
# and the state option
option:
# element key
key: before
# override 2s duration
shorthand:
font-size: 1s
color: red
font-size: 1em
.test {
width: 200px;
}
.test::before {
content: "hello";
}
.test:hover {
height: 400px;
transition-delay: 0.5s;
transition-duration: 2s;
transition-property: height;
transition-timing-function: ease-in;
}
.test:hover::before {
color: #f00;
font-size: 1em;
transition-duration: 1s, 2s;
transition-delay: 0.5s, 0.5s;
transition-property: font-size, color;
transition-timing-function: ease-in, ease-in;
}
ctr('.test', {
  width: 200px
  before: {
    content: 'hello'
  }
  hover-on: {
    option: {
      duration: 2s
      delay: 0.5s
      ease: 'ease-in'
    }
    height: 400px

    // inherits options
    element: {
      // option Object becomes both the element
      // and the state option
      option: {
        // element key
        key: 'before'
        // override 2s duration
        shorthand: {
          font-size: 1s
        }
      }
      color: red
      font-size: 1em
    }
  }
})
.test {
  width: 200px;
}
.test::before {
  content: "hello";
}
.test:hover {
  height: 400px;
  transition-delay: 0.5s;
  transition-duration: 2s;
  transition-property: height;
  transition-timing-function: ease-in;
}
.test:hover::before {
  color: #f00;
  font-size: 1em;
  transition-duration: 1s, 2s;
  transition-delay: 0.5s, 0.5s;
  transition-property: font-size, color;
  transition-timing-function: ease-in, ease-in;
}
.test:
  width: 200px
  before:
    content: hello
  hover-on:
    option:
      duration: 2s
      delay: 0.5s
      ease: ease-in
    height: 400px
    # inherits options
    element:
      # option Object becomes both the element
      # and the state option
      option:
        # element key
        key: before
        # override 2s duration
        shorthand:
          font-size: 1s
      color: red
      font-size: 1em

Notes

inheritOption

Description: The value of false for the inheritOption option property in a feature defined in a state will not inherit the set options of said state.

Edit
ctr('.test', {
width: 200px
before: {
content: 'hello'
}
hover-on: {
option: {
duration: 2s
delay: 0.5s
ease: 'ease-in'
}
height: 400px
// inherits options
element: {
// option Object becomes both the element
// and the state option
option: {
// element key
key: 'before'
// reset to global defaults
inheritOption: false
}
color: red
font-size: 1em
}
}
})
.test:
width: 200px
before:
content: hello
hover-on:
option:
duration: 2s
delay: 0.5s
ease: ease-in
height: 400px
# inherits options
element:
# option Object becomes both the element
# and the state option
option:
# element key
key: before
# reset to global defaults
inheritOption: false
color: red
font-size: 1em
.test {
width: 200px;
}
.test::before {
content: "hello";
}
.test:hover {
height: 400px;
transition-delay: 0.5s;
transition-duration: 2s;
transition-property: height;
transition-timing-function: ease-in;
}
.test:hover::before {
color: #f00;
font-size: 1em;
transition-delay: 0s, 0s;
transition-duration: 0.5s, 0.5s;
transition-property: color, font-size;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}
ctr('.test', {
  width: 200px
  before: {
    content: 'hello'
  }
  hover-on: {
    option: {
      duration: 2s
      delay: 0.5s
      ease: 'ease-in'
    }
    height: 400px

    // inherits options
    element: {
      // option Object becomes both the element
      // and the state option
      option: {
        // element key
        key: 'before'
        // reset to global defaults
        inheritOption: false
      }
      color: red
      font-size: 1em
    }
  }
})
.test {
  width: 200px;
}
.test::before {
  content: "hello";
}
.test:hover {
  height: 400px;
  transition-delay: 0.5s;
  transition-duration: 2s;
  transition-property: height;
  transition-timing-function: ease-in;
}
.test:hover::before {
  color: #f00;
  font-size: 1em;
  transition-delay: 0s, 0s;
  transition-duration: 0.5s, 0.5s;
  transition-property: color, font-size;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}
.test:
  width: 200px
  before:
    content: hello
  hover-on:
    option:
      duration: 2s
      delay: 0.5s
      ease: ease-in
    height: 400px
    # inherits options
    element:
      # option Object becomes both the element
      # and the state option
      option:
        # element key
        key: before
        # reset to global defaults
        inheritOption: false
      color: red
      font-size: 1em

Notes

inheritProperty

Description: The inheritProperty option property is a media specific option. It controls whether or not the state transition properties are regenerated due to an introduction of a new CSS property or option value in a media feature.

Edit
ctr('.test', {
width: 200px
hover: {
on: {
height: 400px
media: {
'md': {
// No need to regenerate of transition properties
// for media since it can inherit the parents
height: 300px
}
'sm': {
height: 200px
// Due to a different option the transition
// properties will need to be regenerate
option: {
duration: 2s
}
}
}
}
}
})
.test:
width: 200px
hover:
on:
height: 400px
media:
md:
# No need to regenerate of transition properties
# for media since it can inherit the parents
height: 300px
sm:
height: 200px
# Due to a different option the transition
# properties will need to be regenerate
option:
duration: 2s
.test {
width: 200px;
}
.test:hover {
height: 400px;
transition-delay: 0s;
transition-duration: 0.5s;
transition-property: height;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
@media (min-width: 600px) and (max-width: 800px) {
.test:hover {
height: 300px;
}
}
@media (min-width: 400px) and (max-width: 600px) {
.test:hover {
height: 200px;
transition-delay: 0s;
transition-duration: 2s;
transition-property: height;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
}
ctr('.test', {
  width: 200px
  hover: {
    on: {
      height: 400px

      media: {
        'md': {
          // No need to regenerate of transition properties
          // for media since it can inherit the parents
          height: 300px
        }
        'sm': {
          height: 200px
          // Due to a different option the transition
          // properties will need to be regenerate
          option: {
            duration: 2s
          }
        }
      }
    }
  }
})
.test {
  width: 200px;
}
.test:hover {
  height: 400px;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: height;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
@media (min-width: 600px) and (max-width: 800px) {
  .test:hover {
    height: 300px;
  }
}
@media (min-width: 400px) and (max-width: 600px) {
  .test:hover {
    height: 200px;
    transition-delay: 0s;
    transition-duration: 2s;
    transition-property: height;
    transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  }
}
.test:
  width: 200px
  hover:
    on:
      height: 400px
      media:
        md:
          # No need to regenerate of transition properties
          # for media since it can inherit the parents
          height: 300px
        sm:
          height: 200px
          # Due to a different option the transition
          # properties will need to be regenerate
          option:
            duration: 2s
Edit
ctr('.test', {
width: 200px
hover: {
on: {
height: 400px
media: {
'md': {
// Pulls in the parent properties to make a
// new transition since color is not declared
// in the parent
color: red
}
}
}
non: {
height: 200px
media: {
'md': {
option: {
// Overrides the default and the parent
// properties are not pulled in to make
// a new transition
inheritProperty: false
}
color: blue
}
}
}
}
})
.test:
width: 200px
hover:
on:
height: 400px
media:
md:
# Pulls in the parent properties to make a
# new transition since color is not declared
# in the parent
color: red
non:
height: 200px
media:
md:
option:
# Overrides the default and the parent
# properties are not pulled in to make
# a new transition
inheritProperty: false
color: blue
.test {
width: 200px;
}
.test:hover {
height: 400px;
transition-delay: 0s;
transition-duration: 0.5s;
transition-property: height;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:not(:hover) {
height: 200px;
transition-delay: 0s;
transition-duration: 0.5s;
transition-property: height;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
@media (min-width: 600px) and (max-width: 800px) {
.test:hover {
color: #f00;
height: 400px;
transition-delay: 0s, 0s;
transition-duration: 0.5s, 0.5s;
transition-property: color, height;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}
}
@media (min-width: 600px) and (max-width: 800px) {
.test:not(:hover) {
color: #00f;
transition-delay: 0s;
transition-duration: 0.5s;
transition-property: color;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
}
ctr('.test', {
  width: 200px
  hover: {
    on: {
      height: 400px

      media: {
        'md': {
          // Pulls in the parent properties to make a
          // new transition since color is not declared
          // in the parent
          color: red
        }
      }
    }
    non: {
      height: 200px

      media: {
        'md': {
          option: {
            // Overrides the default and the parent
            // properties are not pulled in to make
            // a new transition
            inheritProperty: false
          }
          color: blue
        }
      }
    }
  }
})
.test {
  width: 200px;
}
.test:hover {
  height: 400px;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: height;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:not(:hover) {
  height: 200px;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: height;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
@media (min-width: 600px) and (max-width: 800px) {
  .test:hover {
    color: #f00;
    height: 400px;
    transition-delay: 0s, 0s;
    transition-duration: 0.5s, 0.5s;
    transition-property: color, height;
    transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
  }
}
@media (min-width: 600px) and (max-width: 800px) {
  .test:not(:hover) {
    color: #00f;
    transition-delay: 0s;
    transition-duration: 0.5s;
    transition-property: color;
    transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  }
}
.test:
  width: 200px
  hover:
    on:
      height: 400px
      media:
        md:
          # Pulls in the parent properties to make a
          # new transition since color is not declared
          # in the parent
          color: red
    non:
      height: 200px
      media:
        md:
          option:
            # Overrides the default and the parent
            # properties are not pulled in to make
            # a new transition
            inheritProperty: false
          color: blue

Notes

Inherit

Description: The inherit option property controls both the inheritOption and inheritProperty option properties.

Edit
ctr('.test', {
width: 200px
hover: {
on: {
option: {
delay: 1s
}
height: 400px
media: {
'md': {
height: 300px
color: red
}
'sm': {
// inherit === inheritOption && inheritProperty
option: {
inherit: false
}
height: 200px
color: blue
}
}
}
}
})
.test:
width: 200px
hover:
on:
option:
delay: 1s
height: 400px
media:
md:
height: 300px
color: red
sm:
# inherit === inheritOption && inheritProperty
option:
inherit: false
height: 200px
color: blue
.test {
width: 200px;
}
.test:hover {
height: 400px;
transition-delay: 1s;
transition-duration: 0.5s;
transition-property: height;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
@media (min-width: 600px) and (max-width: 800px) {
.test:hover {
color: #f00;
height: 300px;
transition-delay: 1s, 1s;
transition-duration: 0.5s, 0.5s;
transition-property: height, color;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}
}
@media (min-width: 400px) and (max-width: 600px) {
.test:hover {
color: #00f;
height: 200px;
transition-delay: 0s, 0s;
transition-duration: 0.5s, 0.5s;
transition-property: height, color;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}
}
ctr('.test', {
  width: 200px
  hover: {
    on: {
      option: {
        delay: 1s
      }
      height: 400px

      media: {
        'md': {
          height: 300px
          color: red
        }
        'sm': {
          // inherit === inheritOption && inheritProperty
          option: {
            inherit: false
          }
          height: 200px
          color: blue
        }
      }
    }
  }
})
.test {
  width: 200px;
}
.test:hover {
  height: 400px;
  transition-delay: 1s;
  transition-duration: 0.5s;
  transition-property: height;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
@media (min-width: 600px) and (max-width: 800px) {
  .test:hover {
    color: #f00;
    height: 300px;
    transition-delay: 1s, 1s;
    transition-duration: 0.5s, 0.5s;
    transition-property: height, color;
    transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
  }
}
@media (min-width: 400px) and (max-width: 600px) {
  .test:hover {
    color: #00f;
    height: 200px;
    transition-delay: 0s, 0s;
    transition-duration: 0.5s, 0.5s;
    transition-property: height, color;
    transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
  }
}
.test:
  width: 200px
  hover:
    on:
      option:
        delay: 1s
      height: 400px
      media:
        md:
          height: 300px
          color: red
        sm:
          # inherit === inheritOption && inheritProperty
          option:
            inherit: false
          height: 200px
          color: blue

Notes