State Key¶

Description: A state can be defined through an Object key that matches a <identifier>.

Edit


ctr('.test', {
  width: 200px
  active: {
    on: {
      opacity: 1
    }
    non: {
      opacity: 0.5
    }
  }
})


.test:
  width: 200px
  active:
    on:
      opacity: 1
    non:
      opacity: 0.5


.test {
  width: 200px;
}
.test:active {
  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(:active) {
  opacity: 0.5;
  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
  active: {
    on: {
      opacity: 1
    }
    non: {
      opacity: 0.5
    }
  }
})

.test {
  width: 200px;
}
.test:active {
  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(:active) {
  opacity: 0.5;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}

.test:
  width: 200px
  active:
    on:
      opacity: 1
    non:
      opacity: 0.5

Notes

Regex: ^hover$|^focus$|^active$|^checked$|^link$|^visited$|^valid$|^required$|^out-of-range$|^optional$|^invalid$|^in-range$|^enabled$|^disabled$/i
Matching identifiers:
- active - checked - disabled - enabled - focus - in-range - hover
- invalid - link - optional - out-of-range - required - valid - visited

Custom State¶

Description: A state can be defined through an Object key that matches customSt.

Edit


ctr('.test', {
  width: 200px
  customState: {
    key: 'focus'
    on: {
      opacity: 1
    }
    non: {
      opacity: 0.5
    }
  }
})


.test:
  width: 200px
  customState:
    key: focus
    on:
      opacity: 1
    non:
      opacity: 0.5


.test {
  width: 200px;
}
.test:focus {
  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(:focus) {
  opacity: 0.5;
  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
  customState: {
    key: 'focus'
    on: {
      opacity: 1
    }
    non: {
      opacity: 0.5
    }
  }
})

.test {
  width: 200px;
}
.test:focus {
  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(:focus) {
  opacity: 0.5;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}

.test:
  width: 200px
  customState:
    key: focus
    on:
      opacity: 1
    non:
      opacity: 0.5

Notes

Regex match: /^customSt/i
This syntax requires you to define a key property to specify the <identifier>

Hyphenated State¶

Description: A state <identifier> can be defined through a hyphenated Object key that matches state-<identifier>.

Edit


ctr('.test', {
  width: 200px
  state-hover: {
    on: {
      opacity: 1
    }
    non: {
      opacity: 0.5
    }
  }
})


.test:
  width: 200px
  state-hover:
    on:
      opacity: 1
    non:
      opacity: 0.5


.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.5;
  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
  state-hover: {
    on: {
      opacity: 1
    }
    non: {
      opacity: 0.5
    }
  }
})

.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.5;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}

.test:
  width: 200px
  state-hover:
    on:
      opacity: 1
    non:
      opacity: 0.5

Notes

Regex match: /^state-/i
A key value supersedes the hyphenated value
For reference, the state- part of the Object key is removed and what is remaining will be used as the <identifier>

Hyphenated Identifier¶

Description: A state <identifier> and its auxiliary state can be defined through a hyphenated Object key that matches <identifier>-<auxiliary>.

Edit


ctr('.test', {
  width: 200px
  hover-on: {
    opacity: 1
  }
  hover-non: {
    opacity: 0.5
  }
})


.test:
  width: 200px
  hover-on:
    opacity: 1
  hover-non:
    opacity: 0.5


.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.5;
  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
  hover-on: {
    opacity: 1
  }
  hover-non: {
    opacity: 0.5
  }
})

.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.5;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}

.test:
  width: 200px
  hover-on:
    opacity: 1
  hover-non:
    opacity: 0.5

Notes

Regex: ^hover-|^focus-|^active-|^checked-|^link-|^visited-|^valid-|^required-|^out-of-range-|^optional-|^invalid-|^in-range-|^enabled-|^disabled-/i
A key value supersedes the hyphenated value
Auxiliary states: on, non, common, and static

Multiple Key¶

Description: A List value for the key property generates an output for each <identifier> in the List.

Edit


ctr('.test', {
  width: 200px
  state: {
    option: {
      key: 'hover' 'focus'
      duration: 1s
    }
    on: {
      background: red
    }
    non: {
      background: blue
    }
  }
})


.test:
  width: 200px
  state:
    option:
      key: [hover, focus]
      duration: 1s
    on:
      background: red
    non:
      background: blue


.test {
  width: 200px;
}
.test:hover {
  background: #f00;
  transition-delay: 0s;
  transition-duration: 1s;
  transition-property: background;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:not(:hover) {
  background: #00f;
  transition-delay: 0s;
  transition-duration: 1s;
  transition-property: background;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:focus {
  background: #f00;
  transition-delay: 0s;
  transition-duration: 1s;
  transition-property: background;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:not(:focus) {
  background: #00f;
  transition-delay: 0s;
  transition-duration: 1s;
  transition-property: background;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}

ctr('.test', {
  width: 200px
  state: {
    option: {
      key: 'hover' 'focus'
      duration: 1s
    }
    on: {
      background: red
    }
    non: {
      background: blue
    }
  }
})

.test {
  width: 200px;
}
.test:hover {
  background: #f00;
  transition-delay: 0s;
  transition-duration: 1s;
  transition-property: background;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:not(:hover) {
  background: #00f;
  transition-delay: 0s;
  transition-duration: 1s;
  transition-property: background;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:focus {
  background: #f00;
  transition-delay: 0s;
  transition-duration: 1s;
  transition-property: background;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:not(:focus) {
  background: #00f;
  transition-delay: 0s;
  transition-duration: 1s;
  transition-property: background;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}

.test:
  width: 200px
  state:
    option:
      key: [hover, focus]
      duration: 1s
    on:
      background: red
    non:
      background: blue

Multiple Key Merge¶

Description: Like state, Objects with the same <identifier> in the same scope are merged.

Edit


ctr('.test', {
  width: 200px
  customStateOptions: {
    option: {
      duration: 1s
      key: 'hover' 'active'
    }
    on: {
      opacity: 1
    }
    non: {
      opacity: 0.75
      background: red
    }
  }
  hover-on: {
    background: green
  }
  active-on: {
    background: blue
  }
})


.test:
  width: 200px
  customStateOptions:
    option:
      duration: 1s
      key: [hover, active]
    on:
      opacity: 1
    non:
      opacity: 0.75
      background: red
  hover-on:
    background: green
  active-on:
    background: blue


.test {
  width: 200px;
}
.test:hover {
  opacity: 1;
  background: #008000;
  transition-delay: 0s, 0s;
  transition-duration: 1s, 0.5s;
  transition-property: opacity, background;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}
.test:not(:hover) {
  opacity: 0.75;
  background: #f00;
  transition-delay: 0s, 0s;
  transition-duration: 1s, 1s;
  transition-property: opacity, background;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}
.test:active {
  opacity: 1;
  background: #00f;
  transition-delay: 0s, 0s;
  transition-duration: 1s, 0.5s;
  transition-property: opacity, background;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}
.test:not(:active) {
  opacity: 0.75;
  background: #f00;
  transition-delay: 0s, 0s;
  transition-duration: 1s, 1s;
  transition-property: opacity, background;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}

ctr('.test', {
  width: 200px
  customStateOptions: {
    option: {
      duration: 1s
      key: 'hover' 'active'
    }
    on: {
      opacity: 1
    }
    non: {
      opacity: 0.75
      background: red
    }
  }
  hover-on: {
    background: green
  }
  active-on: {
    background: blue
  }
})

.test {
  width: 200px;
}
.test:hover {
  opacity: 1;
  background: #008000;
  transition-delay: 0s, 0s;
  transition-duration: 1s, 0.5s;
  transition-property: opacity, background;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}
.test:not(:hover) {
  opacity: 0.75;
  background: #f00;
  transition-delay: 0s, 0s;
  transition-duration: 1s, 1s;
  transition-property: opacity, background;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}
.test:active {
  opacity: 1;
  background: #00f;
  transition-delay: 0s, 0s;
  transition-duration: 1s, 0.5s;
  transition-property: opacity, background;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}
.test:not(:active) {
  opacity: 0.75;
  background: #f00;
  transition-delay: 0s, 0s;
  transition-duration: 1s, 1s;
  transition-property: opacity, background;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}

.test:
  width: 200px
  customStateOptions:
    option:
      duration: 1s
      key: [hover, active]
    on:
      opacity: 1
    non:
      opacity: 0.75
      background: red
  hover-on:
    background: green
  active-on:
    background: blue

State Key¶

Custom State¶

Hyphenated State¶

Hyphenated Identifier¶

Multiple Key¶

Multiple Key Merge¶

Compile Status: valid

Help

Resourses

Account

State Key¶

Custom State¶

Hyphenated State¶

Hyphenated Identifier¶

Multiple Key¶

Multiple Key Merge¶

Compile Status: valid

Social

Help

Resourses

Account