liser
Version:
functional css help to optimizing design work and building responsive websites
205 lines (203 loc) • 9.59 kB
CSS
.t-all-ease { transition: all .5s ease; }
.t-opacity-ease { transition: opacity .5s ease; }
.t-margin-ease { transition: margin .5s ease; }
.t-padding-ease { transition: padding .5s ease; }
.t-height-ease { transition: height .5s ease; }
.t-width-ease { transition: width .5s ease; }
.t-color-ease { transition: color .5s ease; }
.t-background-ease { transition: background .5s ease; }
.t-box-shadow-ease { transition: box-shadow .5s ease; }
.t-text-shadow-ease { transition: text-shadow .5s ease; }
.t-none { transition: none; }
.t-vf { transition-duration: .15s; }
.t-f { transition-duration: .25s; }
.t-n { transition-duration: .5s; }
.t-s { transition-duration: 1s; }
.t-vs { transition-duration: 2s; }
.t-ease { transition-timing-function: ease; }
.t-ease-in { transition-timing-function: ease-in; }
.t-ease-out { transition-timing-function: ease-out; }
.t-ease-in-out { transition-timing-function: ease-in-out; }
.t-linear { transition-timing-function: linear; }
.t-step-start { transition-timing-function: step-start; }
.t-step-end { transition-timing-function: step-end; }
.t-all { transition-property: all; }
.t-opacity { transition-property: opacity; }
.t-margin { transition-property: margin; }
.t-padding { transition-property: padding; }
.t-height { transition-property: height; }
.t-width { transition-property: width; }
.t-color { transition-property: color; }
.t-background { transition-property: background; }
.t-border { transition-property: border; }
.t-box-shadow { transition-property: box-shadow; }
.t-text-shadow { transition-property: text-shadow; }
.t-delay-vf { transition-delay: .15s; }
.t-delay-f { transition-delay: .25s; }
.t-delay-n { transition-delay: .5s; }
.t-delay-s { transition-delay: 1s; }
.t-delay-vs { transition-delay: 2s; }
@media screen and (min-width: 30em) {
.t-all-ease-ns { transition: all .5s ease; }
.t-opacity-ease-ns { transition: opacity .5s ease; }
.t-margin-ease-ns { transition: margin .5s ease; }
.t-padding-ease-ns { transition: padding .5s ease; }
.t-height-ease-ns { transition: height .5s ease; }
.t-width-ease-ns { transition: width .5s ease; }
.t-color-ease-ns { transition: color .5s ease; }
.t-background-ease-ns { transition: background .5s ease; }
.t-box-shadow-ease-ns { transition: box-shadow .5s ease; }
.t-text-shadow-ease-ns { transition: text-shadow .5s ease; }
.t-none-ns { transition: none; }
.t-vf-ns { transition-duration: .15s; }
.t-f-ns { transition-duration: .25s; }
.t-n-ns { transition-duration: .5s; }
.t-s-ns { transition-duration: 1s; }
.t-vs-ns { transition-duration: 2s; }
.t-ease-ns { transition-timing-function: ease; }
.t-ease-in-ns { transition-timing-function: ease-in; }
.t-ease-out-ns { transition-timing-function: ease-out; }
.t-ease-in-out-ns { transition-timing-function: ease-in-out; }
.t-linear-ns { transition-timing-function: linear; }
.t-step-start-ns { transition-timing-function: step-start; }
.t-step-end-ns { transition-timing-function: step-end; }
.t-all-ns { transition-property: all; }
.t-opacity-ns { transition-property: opacity; }
.t-margin-ns { transition-property: margin; }
.t-padding-ns { transition-property: padding; }
.t-height-ns { transition-property: height; }
.t-width-ns { transition-property: width; }
.t-color-ns { transition-property: color; }
.t-background-ns { transition-property: background; }
.t-border-ns { transition-property: border; }
.t-box-shadow-ns { transition-property: box-shadow; }
.t-text-shadow-ns { transition-property: text-shadow; }
.t-delay-vf-ns { transition-delay: .15s; }
.t-delay-f-ns { transition-delay: .25s; }
.t-delay-n-ns { transition-delay: .5s; }
.t-delay-s-ns { transition-delay: 1s; }
.t-delay-vs-ns { transition-delay: 2s; }
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.t-all-ease-m { transition: all .5s ease; }
.t-opacity-ease-m { transition: opacity .5s ease; }
.t-margin-ease-m { transition: margin .5s ease; }
.t-padding-ease-m { transition: padding .5s ease; }
.t-height-ease-m { transition: height .5s ease; }
.t-width-ease-m { transition: width .5s ease; }
.t-color-ease-m { transition: color .5s ease; }
.t-background-ease-m { transition: background .5s ease; }
.t-box-shadow-ease-m { transition: box-shadow .5s ease; }
.t-text-shadow-ease-m { transition: text-shadow .5s ease; }
.t-none-m { transition: none; }
.t-vf-m { transition-duration: .15s; }
.t-f-m { transition-duration: .25s; }
.t-n-m { transition-duration: .5s; }
.t-s-m { transition-duration: 1s; }
.t-vs-m { transition-duration: 2s; }
.t-ease-m { transition-timing-function: ease; }
.t-ease-in-m { transition-timing-function: ease-in; }
.t-ease-out-m { transition-timing-function: ease-out; }
.t-ease-in-out-m { transition-timing-function: ease-in-out; }
.t-linear-m { transition-timing-function: linear; }
.t-step-start-m { transition-timing-function: step-start; }
.t-step-end-m { transition-timing-function: step-end; }
.t-all-m { transition-property: all; }
.t-opacity-m { transition-property: opacity; }
.t-margin-m { transition-property: margin; }
.t-padding-m { transition-property: padding; }
.t-height-m { transition-property: height; }
.t-width-m { transition-property: width; }
.t-color-m { transition-property: color; }
.t-background-m { transition-property: background; }
.t-border-m { transition-property: border; }
.t-box-shadow-m { transition-property: box-shadow; }
.t-text-shadow-m { transition-property: text-shadow; }
.t-delay-vf-m { transition-delay: .15s; }
.t-delay-f-m { transition-delay: .25s; }
.t-delay-n-m { transition-delay: .5s; }
.t-delay-s-m { transition-delay: 1s; }
.t-delay-vs-m { transition-delay: 2s; }
}
@media screen and (max-width: 60em) and (orientation: landscape) {
.t-all-ease-ml { transition: all .5s ease; }
.t-opacity-ease-ml { transition: opacity .5s ease; }
.t-margin-ease-ml { transition: margin .5s ease; }
.t-padding-ease-ml { transition: padding .5s ease; }
.t-height-ease-ml { transition: height .5s ease; }
.t-width-ease-ml { transition: width .5s ease; }
.t-color-ease-ml { transition: color .5s ease; }
.t-background-ease-ml { transition: background .5s ease; }
.t-box-shadow-ease-ml { transition: box-shadow .5s ease; }
.t-text-shadow-ease-ml { transition: text-shadow .5s ease; }
.t-none-ml { transition: none; }
.t-vf-ml { transition-duration: .15s; }
.t-f-ml { transition-duration: .25s; }
.t-n-ml { transition-duration: .5s; }
.t-s-ml { transition-duration: 1s; }
.t-vs-ml { transition-duration: 2s; }
.t-ease-ml { transition-timing-function: ease; }
.t-ease-in-ml { transition-timing-function: ease-in; }
.t-ease-out-ml { transition-timing-function: ease-out; }
.t-ease-in-out-ml { transition-timing-function: ease-in-out; }
.t-linear-ml { transition-timing-function: linear; }
.t-step-start-ml { transition-timing-function: step-start; }
.t-step-end-ml { transition-timing-function: step-end; }
.t-all-ml { transition-property: all; }
.t-opacity-ml { transition-property: opacity; }
.t-margin-ml { transition-property: margin; }
.t-padding-ml { transition-property: padding; }
.t-height-ml { transition-property: height; }
.t-width-ml { transition-property: width; }
.t-color-ml { transition-property: color; }
.t-background-ml { transition-property: background; }
.t-border-ml { transition-property: border; }
.t-box-shadow-ml { transition-property: box-shadow; }
.t-text-shadow-ml { transition-property: text-shadow; }
.t-delay-vf-ml { transition-delay: .15s; }
.t-delay-f-ml { transition-delay: .25s; }
.t-delay-n-ml { transition-delay: .5s; }
.t-delay-s-ml { transition-delay: 1s; }
.t-delay-vs-ml { transition-delay: 2s; }
}
@media screen and (min-width: 60em) {
.t-all-ease-l { transition: all .5s ease; }
.t-opacity-ease-l { transition: opacity .5s ease; }
.t-margin-ease-l { transition: margin .5s ease; }
.t-padding-ease-l { transition: padding .5s ease; }
.t-height-ease-l { transition: height .5s ease; }
.t-width-ease-l { transition: width .5s ease; }
.t-color-ease-l { transition: color .5s ease; }
.t-background-ease-l { transition: background .5s ease; }
.t-box-shadow-ease-l { transition: box-shadow .5s ease; }
.t-text-shadow-ease-l { transition: text-shadow .5s ease; }
.t-none-l { transition: none; }
.t-vf-l { transition-duration: .15s; }
.t-f-l { transition-duration: .25s; }
.t-n-l { transition-duration: .5s; }
.t-s-l { transition-duration: 1s; }
.t-vs-l { transition-duration: 2s; }
.t-ease-l { transition-timing-function: ease; }
.t-ease-in-l { transition-timing-function: ease-in; }
.t-ease-out-l { transition-timing-function: ease-out; }
.t-ease-in-out-l { transition-timing-function: ease-in-out; }
.t-linear-l { transition-timing-function: linear; }
.t-step-start-l { transition-timing-function: step-start; }
.t-step-end-l { transition-timing-function: step-end; }
.t-all-l { transition-property: all; }
.t-opacity-l { transition-property: opacity; }
.t-margin-l { transition-property: margin; }
.t-padding-l { transition-property: padding; }
.t-height-l { transition-property: height; }
.t-width-l { transition-property: width; }
.t-color-l { transition-property: color; }
.t-background-l { transition-property: background; }
.t-border-l { transition-property: border; }
.t-box-shadow-l { transition-property: box-shadow; }
.t-text-shadow-l { transition-property: text-shadow; }
.t-delay-vf-l { transition-delay: .15s; }
.t-delay-f-l { transition-delay: .25s; }
.t-delay-n-l { transition-delay: .5s; }
.t-delay-s-l { transition-delay: 1s; }
.t-delay-vs-l { transition-delay: 2s; }
}