Animation¶

Description: animation can be used in media.

ctr('.test', {
  width: 200px
  media-md: {
    width: 400px
    // animation
    animation: {
      name: 'test'
      timeline: {
        '50%': {
          height: 400px
        }
      }
    }
  }
})

.test:
  width: 200px
  media-md:
    width: 400px
    # animation
    animation:
      name: test
      timeline:
        50%:
          height: 400px

.test {
  width: 200px;
}
@media (min-width: 600px) and (max-width: 800px) {
  .test {
    width: 400px;
    animation-delay: 0s;
    animation-name: test;
    animation-duration: 0.5s;
    animation-fill-mode: none;
    animation-direction: normal;
    animation-iteration-count: 1;
    animation-play-state: running;
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  }
}
@keyframes test {
  50% {
    height: 400px;
  }
}

ctr('.test', {
  width: 200px
  media-md: {
    width: 400px
    // animation
    animation: {
      name: 'test'
      timeline: {
        '50%': {
          height: 400px
        }
      }
    }
  }
})

.test {
  width: 200px;
}
@media (min-width: 600px) and (max-width: 800px) {
  .test {
    width: 400px;
    animation-delay: 0s;
    animation-name: test;
    animation-duration: 0.5s;
    animation-fill-mode: none;
    animation-direction: normal;
    animation-iteration-count: 1;
    animation-play-state: running;
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  }
}
@keyframes test {
  50% {
    height: 400px;
  }
}

.test:
  width: 200px
  media-md:
    width: 400px
    # animation
    animation:
      name: test
      timeline:
        50%:
          height: 400px

Attribute¶

Description: attribute can be used in media.

ctr('.test', {
  width: 200px
  media-md: {
    width: 400px
    // attribute
    attribute: {
      key: '[data-role="test"]'
      height: 400px
    }
  }
})

.test:
  width: 200px
  media-md:
    width: 400px
    # attribute
    attribute:
      key: '[data-role="test"]'
      height: 400px

.test {
  width: 200px;
}
@media (min-width: 600px) and (max-width: 800px) {
  .test {
    width: 400px;
  }
}
@media (min-width: 600px) and (max-width: 800px) {
  .test[data-role="test"] {
    height: 400px;
  }
}

ctr('.test', {
  width: 200px
  media-md: {
    width: 400px
    // attribute
    attribute: {
      key: '[data-role="test"]'
      height: 400px
    }
  }
})

.test {
  width: 200px;
}
@media (min-width: 600px) and (max-width: 800px) {
  .test {
    width: 400px;
  }
}
@media (min-width: 600px) and (max-width: 800px) {
  .test[data-role="test"] {
    height: 400px;
  }
}

.test:
  width: 200px
  media-md:
    width: 400px
    # attribute
    attribute:
      key: '[data-role="test"]'
      height: 400px

Component¶

Description: component can be used in media.

ctr('.test', {
  width: 200px
  media-md: {
    width: 400px
    // component
    component-span: {
      height: 400px
    }
  }
})

.test:
  width: 200px
  media-md:
    width: 400px
    # component
    component-span:
      height: 400px

.test {
  width: 200px;
}
@media (min-width: 600px) and (max-width: 800px) {
  .test {
    width: 400px;
  }
}
@media (min-width: 600px) and (max-width: 800px) {
  .test > span {
    height: 400px;
  }
}

ctr('.test', {
  width: 200px
  media-md: {
    width: 400px
    // component
    component-span: {
      height: 400px
    }
  }
})

.test {
  width: 200px;
}
@media (min-width: 600px) and (max-width: 800px) {
  .test {
    width: 400px;
  }
}
@media (min-width: 600px) and (max-width: 800px) {
  .test > span {
    height: 400px;
  }
}

.test:
  width: 200px
  media-md:
    width: 400px
    # component
    component-span:
      height: 400px

Element¶

Description: element can be used in media.

ctr('.test', {
  width: 200px
  media-md: {
    width: 400px
    // element
    before: {
      content: 'test'
    }
  }
})

.test:
  width: 200px
  media-md:
    width: 400px
    # element
    before:
      content: test

.test {
  width: 200px;
}
@media (min-width: 600px) and (max-width: 800px) {
  .test {
    width: 400px;
  }
}
@media (min-width: 600px) and (max-width: 800px) {
  .test::before {
    content: "test";
  }
}

ctr('.test', {
  width: 200px
  media-md: {
    width: 400px
    // element
    before: {
      content: 'test'
    }
  }
})

.test {
  width: 200px;
}
@media (min-width: 600px) and (max-width: 800px) {
  .test {
    width: 400px;
  }
}
@media (min-width: 600px) and (max-width: 800px) {
  .test::before {
    content: "test";
  }
}

.test:
  width: 200px
  media-md:
    width: 400px
    # element
    before:
      content: test

Grid¶

Description: element can be used in media.

ctr('.test', {
  width: 200px
  media-md: {
    width: 400px
    // grid
    grid: {
      column: '1/3'
    }
  }
})

.test:
  width: 200px
  media-md:
    width: 400px
    # grid
    grid:
      column: 1/3

.test {
  width: 200px;
}
@media (min-width: 600px) and (max-width: 800px) {
  .test {
    width: 400px;
    flex: 0 0 auto;
  }
}
@media (min-width: 600px) and (max-width: 800px) {
  .test:nth-child(1n) {
    margin-right: 30px;
  }
}
@media (min-width: 600px) and (max-width: 800px) {
  .test:last-child {
    margin-right: 0;
  }
}
@media (min-width: 600px) and (max-width: 800px) {
  .test:nth-child(3n) {
    float: right;
    margin-right: 0;
  }
}

ctr('.test', {
  width: 200px
  media-md: {
    width: 400px
    // grid
    grid: {
      column: '1/3'
    }
  }
})

.test {
  width: 200px;
}
@media (min-width: 600px) and (max-width: 800px) {
  .test {
    width: 400px;
    flex: 0 0 auto;
  }
}
@media (min-width: 600px) and (max-width: 800px) {
  .test:nth-child(1n) {
    margin-right: 30px;
  }
}
@media (min-width: 600px) and (max-width: 800px) {
  .test:last-child {
    margin-right: 0;
  }
}
@media (min-width: 600px) and (max-width: 800px) {
  .test:nth-child(3n) {
    float: right;
    margin-right: 0;
  }
}

.test:
  width: 200px
  media-md:
    width: 400px
    # grid
    grid:
      column: 1/3

Media¶

Description: media can be used in media and then said media should be joined.

ctr('.test', {
  width: 200px
  media-md: {
    width: 400px
    // media
    media: {
      query: {
        min-height: 200px
        max-height: 500px
      }
      border-radius: 10px
    }
  }
})

.test:
  width: 200px
  media-md:
    width: 400px
    # media
    media:
      query:
        min-height: 200px
        max-height: 500px
      border-radius: 10px

.test {
  width: 200px;
}
@media (min-width: 600px) and (max-width: 800px) {
  .test {
    width: 400px;
  }
}
@media (min-width: 600px) and (max-width: 800px) and (min-height: 200px) and (max-height: 500px) {
  .test {
    border-radius: 10px;
  }
}

ctr('.test', {
  width: 200px
  media-md: {
    width: 400px
    // media
    media: {
      query: {
        min-height: 200px
        max-height: 500px
      }
      border-radius: 10px
    }
  }
})

.test {
  width: 200px;
}
@media (min-width: 600px) and (max-width: 800px) {
  .test {
    width: 400px;
  }
}
@media (min-width: 600px) and (max-width: 800px) and (min-height: 200px) and (max-height: 500px) {
  .test {
    border-radius: 10px;
  }
}

.test:
  width: 200px
  media-md:
    width: 400px
    # media
    media:
      query:
        min-height: 200px
        max-height: 500px
      border-radius: 10px

Notes

• Inception type shit

Non¶

Description: non can be used in media.

ctr('.test', {
  width: 200px
  media-md: {
    width: 400px
    // non
    non-span: {
      height: 400px
    }
  }
})

.test:
  width: 200px
  media-md:
    width: 400px
    # non
    non-span:
      height: 400px

.test {
  width: 200px;
}
@media (min-width: 600px) and (max-width: 800px) {
  .test {
    width: 400px;
  }
}
@media (min-width: 600px) and (max-width: 800px) {
  .test:not(span) {
    height: 400px;
  }
}

ctr('.test', {
  width: 200px
  media-md: {
    width: 400px
    // non
    non-span: {
      height: 400px
    }
  }
})

.test {
  width: 200px;
}
@media (min-width: 600px) and (max-width: 800px) {
  .test {
    width: 400px;
  }
}
@media (min-width: 600px) and (max-width: 800px) {
  .test:not(span) {
    height: 400px;
  }
}

.test:
  width: 200px
  media-md:
    width: 400px
    # non
    non-span:
      height: 400px

State¶

Description: state can be used in media.

ctr('.test', {
  width: 200px
  media-md: {
    width: 400px
    // state
    hover-on: {
      opacity: 0.5
    }
  }
})

.test:
  width: 200px
  media-md:
    width: 400px
    # state
    hover-on:
      opacity: 0.5

.test {
  width: 200px;
}
@media (min-width: 600px) and (max-width: 800px) {
  .test {
    width: 400px;
  }
}
@media (min-width: 600px) and (max-width: 800px) {
  .test: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
  media-md: {
    width: 400px
    // state
    hover-on: {
      opacity: 0.5
    }
  }
})

.test {
  width: 200px;
}
@media (min-width: 600px) and (max-width: 800px) {
  .test {
    width: 400px;
  }
}
@media (min-width: 600px) and (max-width: 800px) {
  .test: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
  media-md:
    width: 400px
    # state
    hover-on:
      opacity: 0.5

Transition¶

Description: transition can be used in media.

ctr('.test', {
  width: 200px
  media-md: {
    width: 400px
    // transition
    transition: {
      height: 400px
    }
  }
})

.test:
  width: 200px
  media-md:
    width: 400px
    # transition
    transition:
      height: 400px

.test {
  width: 200px;
}
@media (min-width: 600px) and (max-width: 800px) {
  .test {
    width: 400px;
    height: 400px;
    transition-delay: 0s;
    transition-duration: 0.5s;
    transition-property: height;
    transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  }
}

ctr('.test', {
  width: 200px
  media-md: {
    width: 400px
    // transition
    transition: {
      height: 400px
    }
  }
})

.test {
  width: 200px;
}
@media (min-width: 600px) and (max-width: 800px) {
  .test {
    width: 400px;
    height: 400px;
    transition-delay: 0s;
    transition-duration: 0.5s;
    transition-property: height;
    transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  }
}

.test:
  width: 200px
  media-md:
    width: 400px
    # transition
    transition:
      height: 400px