UNPKG

@c8y/style

Version:

Styles for Cumulocity IoT applications

132 lines (118 loc) 2.85 kB
// Vendor prefixes are now handled automatically by Autoprefixer. // These mixins remain for backward compatibility but no longer add vendor prefixes. // Animations .animation(@animation) { animation: @animation; } .animation-name(@name) { animation-name: @name; } .animation-duration(@duration) { animation-duration: @duration; } .animation-timing-function(@timing-function) { animation-timing-function: @timing-function; } .animation-delay(@delay) { animation-delay: @delay; } .animation-iteration-count(@iteration-count) { animation-iteration-count: @iteration-count; } .animation-direction(@direction) { animation-direction: @direction; } .animation-fill-mode(@fill-mode) { animation-fill-mode: @fill-mode; } // Backface visibility // Prevent browsers from flickering when using CSS 3D transforms. // Default value is `visible`, but can be changed to `hidden` .backface-visibility(@visibility) { backface-visibility: @visibility; } // Drop shadows .box-shadow(@shadow) { box-shadow: @shadow; } // Box sizing .box-sizing(@boxmodel) { box-sizing: @boxmodel; } // CSS3 Content Columns .content-columns(@column-count; @column-gap: @grid-gutter-width) { column-count: @column-count; column-gap: @column-gap; } // Optional hyphenation .hyphens(@mode: auto) { overflow-wrap: break-word; hyphens: @mode; } // Placeholder text - REMOVED: Duplicate mixin, use placeholder() from _forms.scss instead // Transformations .scale(@ratioX) { transform: scale(@ratioX); } .scale(@ratioX; @ratioY) { transform: scale(@ratioX; @ratioY); } .scaleX(@ratio) { transform: scaleX(@ratio); } .scaleY(@ratio) { transform: scaleY(@ratio); } .skew(@x; @y) { transform: skewX(@x) skewY(@y); } .translate(@x:0; @y:0) { transform: translate(@x, @y); } .translate3d(@x; @y; @z) { transform: translate3d(@x, @y, @z); } .rotate(@degrees) { transform: rotate(@degrees); } .rotateX(@degrees) { transform: rotateX(@degrees); } .rotateY(@degrees) { transform: rotateY(@degrees); } .perspective(@perspective) { perspective: @perspective; } .perspective-origin(@perspective) { perspective-origin: @perspective; } .transform-origin(@origin) { transform-origin: @origin; } // Transitions .transition(@transition) { transition: @transition; } .transition-property(@transition-property) { transition-property: @transition-property; } .transition-delay(@transition-delay) { transition-delay: @transition-delay; } .transition-duration(@transition-duration) { transition-duration: @transition-duration; } .transition-timing-function(@timing-function) { transition-timing-function: @timing-function; } .transition-transform(@transition) { transition: transform @transition; } // User select for selecting text on the page .user-select(@select) { user-select: @select; } .filter(@filter) { filter: @filter; }