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

Local option Object always supersedes parent option Object

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

Default value: true
All options revert to the global defaults
inheritOption: alias inheritOpts

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

The only time inheritProperty defaults to true is in a media feature, otherwise the default is false
Admittedly, this option will make no sense if you are not deeply familiar with the perils of creating a state with media conditions
- Rule of thumb, ctr takes care of everything for you thus you probably will never need this option
- If you are a l33t C$S haxx0r you may once or twice find this option handy
inheritProperty alias: inheritProps

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

inherit: <boolean> is equal to
- inheritOption: <boolean>
- inheritProperty: <boolean>

Basic¶

inheritOption¶

inheritProperty¶

Inherit¶

Compile Status: valid

Help

Resourses

Account

Basic¶

inheritOption¶

inheritProperty¶

Inherit¶

Compile Status: valid

Social

Help

Resourses

Account