Basic

Description: The states Object groups state instances together in which each child Object is treated as a separate state instance. If the key property is not defined in the state instance, its Object key is used as the <identifier>.

Edit
ctr('.test', {
width: 200px
states: {
hover: {
on: {
opacity: 1
}
non: {
opacity: 0.75
}
}
active: {
color: red
}
myCoolLink: {
option: {
// specified key
key: 'link'
}
on: {
color: green
}
non: {
color: purple
}
}
}
})
.test:
width: 200px
states:
hover:
on:
opacity: 1
non:
opacity: 0.75
active:
color: red
myCoolLink:
option:
# specified key
key: link
on:
color: green
non:
color: purple
.test {
width: 200px;
}
.test:hover {
opacity: 1;
transition-delay: 0s;
transition-duration: 0.5s;
transition-property: opacity;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:not(:hover) {
opacity: 0.75;
transition-delay: 0s;
transition-duration: 0.5s;
transition-property: opacity;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:active {
color: #f00;
transition-delay: 0s;
transition-duration: 0.5s;
transition-property: color;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:not(:active) {
transition-delay: 0s;
transition-duration: 0.5s;
transition-property: color;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:link {
color: #008000;
}
.test:not(:link) {
color: #800080;
}
ctr('.test', {
  width: 200px
  states: {
    hover: {
      on: {
        opacity: 1
      }
      non: {
        opacity: 0.75
      }
    }
    active: {
      color: red
    }
    myCoolLink: {
      option: {
        // specified key
        key: 'link'
      }
      on: {
        color: green
      }
      non: {
        color: purple
      }
    }
  }
})
.test {
  width: 200px;
}
.test:hover {
  opacity: 1;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:not(:hover) {
  opacity: 0.75;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:active {
  color: #f00;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: color;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:not(:active) {
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: color;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:link {
  color: #008000;
}
.test:not(:link) {
  color: #800080;
}
.test:
  width: 200px
  states:
    hover:
      on:
        opacity: 1
      non:
        opacity: 0.75
    active:
      color: red
    myCoolLink:
      option:
        # specified key
        key: link
      on:
        color: green
      non:
        color: purple

Notes

Common Key

Description: A common Object can be defined in the states Object to specify common values used by all state instances.

Edit
ctr('.test', {
width: 200px
states: {
hover: {
on: {
opacity: 1
}
non: {
option: {
duration: 0.5s
}
opacity: 0.75
}
}
active: {
color: red
}
// merged into each state
common: {
option: {
duration: 1.25s
delay: 0.25s
}
}
}
})
.test:
width: 200px
states:
hover:
on:
opacity: 1
non:
option:
duration: 0.5s
opacity: 0.75
active:
color: red
# merged into each state
common:
option:
duration: 1.25s
delay: 0.25s
.test {
width: 200px;
}
.test:hover {
opacity: 1;
transition-delay: 0.25s;
transition-duration: 1.25s;
transition-property: opacity;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:not(:hover) {
opacity: 0.75;
transition-delay: 0.25s;
transition-duration: 0.5s;
transition-property: opacity;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:active {
color: #f00;
transition-delay: 0.25s;
transition-property: color;
transition-duration: 1.25s;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:not(:active) {
transition-delay: 0.25s;
transition-property: color;
transition-duration: 1.25s;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
ctr('.test', {
  width: 200px
  states: {
    hover: {
      on: {
        opacity: 1
      }
      non: {
        option: {
          duration: 0.5s
        }
        opacity: 0.75
      }
    }
    active: {
      color: red
    }
    // merged into each state
    common: {
      option: {
        duration: 1.25s
        delay: 0.25s
      }
    }
  }
})
.test {
  width: 200px;
}
.test:hover {
  opacity: 1;
  transition-delay: 0.25s;
  transition-duration: 1.25s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:not(:hover) {
  opacity: 0.75;
  transition-delay: 0.25s;
  transition-duration: 0.5s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:active {
  color: #f00;
  transition-delay: 0.25s;
  transition-property: color;
  transition-duration: 1.25s;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:not(:active) {
  transition-delay: 0.25s;
  transition-property: color;
  transition-duration: 1.25s;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:
  width: 200px
  states:
    hover:
      on:
        opacity: 1
      non:
        option:
          duration: 0.5s
        opacity: 0.75
    active:
      color: red
    # merged into each state
    common:
      option:
        duration: 1.25s
        delay: 0.25s

Notes

Omit

Description: A List value for the omit option property in an Object state instance omits specific common values from being merged into the instance. The omit value is defined by the property path relative to the common Object.

Edit
ctr('.test', {
width: 200px
states: {
common: {
option: {
duration: 2s
ease: 'ease-in'
}
on: {
opacity: 1
}
}
hover: {
non: {
opacity: 0.75
}
}
focus: {
option: {
// omits duration
omit: 'option.duration'
}
on: {
height: 400px
}
non: {
opacity: 0.25
}
}
}
})
.test:
width: 200px
states:
common:
option:
duration: 2s
ease: ease-in
on:
opacity: 1
hover:
non:
opacity: 0.75
focus:
option:
# omits duration
omit: option.duration
on:
height: 400px
non:
opacity: 0.25
.test {
width: 200px;
}
.test:hover {
opacity: 1;
transition-delay: 0s;
transition-duration: 2s;
transition-property: opacity;
transition-timing-function: ease-in;
}
.test:not(:hover) {
opacity: 0.75;
transition-delay: 0s;
transition-duration: 0.5s;
transition-property: opacity;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:focus {
opacity: 1;
height: 400px;
transition-delay: 0s, 0s;
transition-duration: 2s, 2s;
transition-property: height, opacity;
transition-timing-function: ease-in, ease-in;
}
.test:not(:focus) {
opacity: 0.25;
transition-delay: 0s;
transition-duration: 0.5s;
transition-property: opacity;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
ctr('.test', {
  width: 200px
  states: {
    common: {
      option: {
        duration: 2s
        ease: 'ease-in'
      }
      on: {
        opacity: 1
      }
    }
    hover: {
      non: {
        opacity: 0.75
      }
    }
    focus: {
      option: {
        // omits duration
        omit: 'option.duration'
      }
      on: {
        height: 400px
      }
      non: {
        opacity: 0.25
      }
    }
  }
})
.test {
  width: 200px;
}
.test:hover {
  opacity: 1;
  transition-delay: 0s;
  transition-duration: 2s;
  transition-property: opacity;
  transition-timing-function: ease-in;
}
.test:not(:hover) {
  opacity: 0.75;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:focus {
  opacity: 1;
  height: 400px;
  transition-delay: 0s, 0s;
  transition-duration: 2s, 2s;
  transition-property: height, opacity;
  transition-timing-function: ease-in, ease-in;
}
.test:not(:focus) {
  opacity: 0.25;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:
  width: 200px
  states:
    common:
      option:
        duration: 2s
        ease: ease-in
      on:
        opacity: 1
    hover:
      non:
        opacity: 0.75
    focus:
      option:
        # omits duration
        omit: option.duration
      on:
        height: 400px
      non:
        opacity: 0.25

Notes

Pick

Description: A List value for the pick option property in an Object state instance picks specific common values to be merged into the instance. The pick value is defined by the property path relative to the common Object.

Edit
ctr('.test', {
width: 200px
states: {
common: {
option: {
duration: 2s
ease: 'ease-in'
}
on: {
opacity: 1
}
}
hover: {
non: {
opacity: 0.75
}
}
focus: {
option: {
// picks on + ease
pick: 'on' 'option.ease'
}
on: {
height: 400px
}
non: {
opacity: 0.25
}
}
}
})
.test:
width: 200px
states:
common:
option:
duration: 2s
ease: ease-in
on:
opacity: 1
hover:
non:
opacity: 0.75
focus:
option:
# picks on + ease
pick: [on, option.ease]
on:
height: 400px
non:
opacity: 0.25
.test {
width: 200px;
}
.test:hover {
opacity: 1;
transition-delay: 0s;
transition-duration: 2s;
transition-property: opacity;
transition-timing-function: ease-in;
}
.test:not(:hover) {
opacity: 0.75;
transition-delay: 0s;
transition-duration: 0.5s;
transition-property: opacity;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:focus {
opacity: 1;
height: 400px;
transition-delay: 0s, 0s;
transition-duration: 2s, 2s;
transition-property: height, opacity;
transition-timing-function: ease-in, ease-in;
}
.test:not(:focus) {
opacity: 0.25;
transition-delay: 0s;
transition-duration: 0.5s;
transition-property: opacity;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
ctr('.test', {
  width: 200px
  states: {
    common: {
      option: {
        duration: 2s
        ease: 'ease-in'
      }
      on: {
        opacity: 1
      }
    }
    hover: {
      non: {
        opacity: 0.75
      }
    }
    focus: {
      option: {
        // picks on + ease
        pick: 'on' 'option.ease'
      }
      on: {
        height: 400px
      }
      non: {
        opacity: 0.25
      }
    }
  }
})
.test {
  width: 200px;
}
.test:hover {
  opacity: 1;
  transition-delay: 0s;
  transition-duration: 2s;
  transition-property: opacity;
  transition-timing-function: ease-in;
}
.test:not(:hover) {
  opacity: 0.75;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:focus {
  opacity: 1;
  height: 400px;
  transition-delay: 0s, 0s;
  transition-duration: 2s, 2s;
  transition-property: height, opacity;
  transition-timing-function: ease-in, ease-in;
}
.test:not(:focus) {
  opacity: 0.25;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:
  width: 200px
  states:
    common:
      option:
        duration: 2s
        ease: ease-in
      on:
        opacity: 1
    hover:
      non:
        opacity: 0.75
    focus:
      option:
        # picks on + ease
        pick: [on, option.ease]
      on:
        height: 400px
      non:
        opacity: 0.25

Notes

Target

Description: A List value for the target option property in the common Object specifies specific state instances to merge with.

Edit
ctr('.test', {
width: 200px
states: {
common: {
option: {
duration: 2s
ease: 'ease-in'
// only merges with "hover"
target: 'hover'
}
on: {
opacity: 1
}
}
hover: {
non: {
opacity: 0.75
}
}
focus: {
on: {
height: 400px
}
non: {
opacity: 0.25
}
}
}
})
.test:
width: 200px
states:
common:
option:
duration: 2s
ease: ease-in
# only merges with "hover"
target: hover
on:
opacity: 1
hover:
non:
opacity: 0.75
focus:
on:
height: 400px
non:
opacity: 0.25
.test {
width: 200px;
}
.test:hover {
opacity: 1;
transition-delay: 0s;
transition-duration: 2s;
transition-property: opacity;
transition-timing-function: ease-in;
}
.test:not(:hover) {
opacity: 0.75;
transition-delay: 0s;
transition-duration: 0.5s;
transition-property: opacity;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:focus {
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(:focus) {
opacity: 0.25;
transition-delay: 0s;
transition-duration: 0.5s;
transition-property: opacity;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
ctr('.test', {
  width: 200px
  states: {
    common: {
      option: {
        duration: 2s
        ease: 'ease-in'
        // only merges with "hover"
        target: 'hover'
      }
      on: {
        opacity: 1
      }
    }
    hover: {
      non: {
        opacity: 0.75
      }
    }
    focus: {
      on: {
        height: 400px
      }
      non: {
        opacity: 0.25
      }
    }
  }
})
.test {
  width: 200px;
}
.test:hover {
  opacity: 1;
  transition-delay: 0s;
  transition-duration: 2s;
  transition-property: opacity;
  transition-timing-function: ease-in;
}
.test:not(:hover) {
  opacity: 0.75;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:focus {
  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(:focus) {
  opacity: 0.25;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:
  width: 200px
  states:
    common:
      option:
        duration: 2s
        ease: ease-in
        # only merges with "hover"
        target: hover
      on:
        opacity: 1
    hover:
      non:
        opacity: 0.75
    focus:
      on:
        height: 400px
      non:
        opacity: 0.25

Notes

True Value

Description: A true Boolean value for an Object state instance inherits the common Object value.

Edit
ctr('.test', {
width: 200px
states: {
common: {
option: {
duration: 2s
ease: 'ease-in'
}
on: {
opacity: 1
}
}
hover: {
non: {
opacity: 0.75
}
}
// inherits common
focus: true
}
})
.test:
width: 200px
states:
common:
option:
duration: 2s
ease: ease-in
on:
opacity: 1
hover:
non:
opacity: 0.75
# inherits common
focus: true
.test {
width: 200px;
}
.test:hover {
opacity: 1;
transition-delay: 0s;
transition-duration: 2s;
transition-property: opacity;
transition-timing-function: ease-in;
}
.test:not(:hover) {
opacity: 0.75;
transition-delay: 0s;
transition-duration: 0.5s;
transition-property: opacity;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:focus {
opacity: 1;
transition-delay: 0s;
transition-duration: 2s;
transition-property: opacity;
transition-timing-function: ease-in;
}
ctr('.test', {
  width: 200px
  states: {
    common: {
      option: {
        duration: 2s
        ease: 'ease-in'
      }
      on: {
        opacity: 1
      }
    }
    hover: {
      non: {
        opacity: 0.75
      }
    }
    // inherits common
    focus: true
  }
})
.test {
  width: 200px;
}
.test:hover {
  opacity: 1;
  transition-delay: 0s;
  transition-duration: 2s;
  transition-property: opacity;
  transition-timing-function: ease-in;
}
.test:not(:hover) {
  opacity: 0.75;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:focus {
  opacity: 1;
  transition-delay: 0s;
  transition-duration: 2s;
  transition-property: opacity;
  transition-timing-function: ease-in;
}
.test:
  width: 200px
  states:
    common:
      option:
        duration: 2s
        ease: ease-in
      on:
        opacity: 1
    hover:
      non:
        opacity: 0.75
    # inherits common
    focus: true