bellmaker/src/less/operators.less

Responsive CSS media query library for LESS and SASS, with device-agnostic and device-specific breakpoints

// Operators
//
// sample usage
// .foo {
//     .bellmaker_offset(width,-10rem);
//     .bellmaker_factor(padding-left,0.5);
// }


.bellmaker_offset(width, @offset) {
    @media @da_small {  width: @pw_small + @offset;}
    @media @da_medium { width: @pw_medium + @offset;}
    @media @da_large {  width: @pw_large + @offset;}
    @media @da_x_large {width: @pw_x_large + @offset;}
}
.bellmaker_offset(height, @offset) {
    @media @da_small {  height: @pw_small + @offset;}
    @media @da_medium { height: @pw_medium + @offset;}
    @media @da_large {  height: @pw_large + @offset;}
    @media @da_x_large {height: @pw_x_large + @offset;}
}
.bellmaker_offset(top, @offset) {
    @media @da_small {  top: @pw_small + @offset;}
    @media @da_medium { top: @pw_medium + @offset;}
    @media @da_large {  top: @pw_large + @offset;}
    @media @da_x_large {top: @pw_x_large + @offset;}
}
.bellmaker_offset(right, @offset) {
    @media @da_small {  right: @pw_small + @offset;}
    @media @da_medium { right: @pw_medium + @offset;}
    @media @da_large {  right: @pw_large + @offset;}
    @media @da_x_large {right: @pw_x_large + @offset;}
}
.bellmaker_offset(bottom, @offset) {
    @media @da_small {  bottom: @pw_small + @offset;}
    @media @da_medium { bottom: @pw_medium + @offset;}
    @media @da_large {  bottom: @pw_large + @offset;}
    @media @da_x_large {bottom: @pw_x_large + @offset;}
}
.bellmaker_offset(left, @offset) {
    @media @da_small {  left: @pw_small + @offset;}
    @media @da_medium { left: @pw_medium + @offset;}
    @media @da_large {  left: @pw_large + @offset;}
    @media @da_x_large {left: @pw_x_large + @offset;}
}
.bellmaker_offset(padding-top, @offset) {
    @media @da_small {  padding-top: @pw_small + @offset;}
    @media @da_medium { padding-top: @pw_medium + @offset;}
    @media @da_large {  padding-top: @pw_large + @offset;}
    @media @da_x_large {padding-top: @pw_x_large + @offset;}
}
.bellmaker_offset(padding-right, @offset) {
    @media @da_small {  padding-right: @pw_small + @offset;}
    @media @da_medium { padding-right: @pw_medium + @offset;}
    @media @da_large {  padding-right: @pw_large + @offset;}
    @media @da_x_large {padding-right: @pw_x_large + @offset;}
}
.bellmaker_offset(padding-bottom, @offset) {
    @media @da_small {  padding-bottom: @pw_small + @offset;}
    @media @da_medium { padding-bottom: @pw_medium + @offset;}
    @media @da_large {  padding-bottom: @pw_large + @offset;}
    @media @da_x_large {padding-bottom: @pw_x_large + @offset;}
}
.bellmaker_offset(padding-left, @offset) {
    @media @da_small {  padding-left: @pw_small + @offset;}
    @media @da_medium { padding-left: @pw_medium + @offset;}
    @media @da_large {  padding-left: @pw_large + @offset;}
    @media @da_x_large {padding-left: @pw_x_large + @offset;}
}
.bellmaker_offset(margin-top, @offset) {
    @media @da_small {  margin-top: @pw_small + @offset;}
    @media @da_medium { margin-top: @pw_medium + @offset;}
    @media @da_large {  margin-top: @pw_large + @offset;}
    @media @da_x_large {margin-top: @pw_x_large + @offset;}
}
.bellmaker_offset(margin-right, @offset) {
    @media @da_small {  margin-right: @pw_small + @offset;}
    @media @da_medium { margin-right: @pw_medium + @offset;}
    @media @da_large {  margin-right: @pw_large + @offset;}
    @media @da_x_large {margin-right: @pw_x_large + @offset;}
}
.bellmaker_offset(margin-bottom, @offset) {
    @media @da_small {  margin-bottom: @pw_small + @offset;}
    @media @da_medium { margin-bottom: @pw_medium + @offset;}
    @media @da_large {  margin-bottom: @pw_large + @offset;}
    @media @da_x_large {margin-bottom: @pw_x_large + @offset;}
}
.bellmaker_offset(margin-left, @offset) {
    @media @da_small {  margin-left: @pw_small + @offset;}
    @media @da_medium { margin-left: @pw_medium + @offset;}
    @media @da_large {  margin-left: @pw_large + @offset;}
    @media @da_x_large {margin-left: @pw_x_large + @offset;}
}

.bellmaker_factor(width, @factor) {
    @media @da_small {  width: @pw_small * @factor;}
    @media @da_medium { width: @pw_medium * @factor;}
    @media @da_large {  width: @pw_large * @factor;}
    @media @da_x_large {width: @pw_x_large * @factor;}
}
.bellmaker_factor(height, @factor) {
    @media @da_small {  height: @pw_small * @factor;}
    @media @da_medium { height: @pw_medium * @factor;}
    @media @da_large {  height: @pw_large * @factor;}
    @media @da_x_large {height: @pw_x_large * @factor;}
}
.bellmaker_factor(top, @factor) {
    @media @da_small {  top: @pw_small * @factor;}
    @media @da_medium { top: @pw_medium * @factor;}
    @media @da_large {  top: @pw_large * @factor;}
    @media @da_x_large {top: @pw_x_large * @factor;}
}
.bellmaker_factor(right, @factor) {
    @media @da_small {  right: @pw_small * @factor;}
    @media @da_medium { right: @pw_medium * @factor;}
    @media @da_large {  right: @pw_large * @factor;}
    @media @da_x_large {right: @pw_x_large * @factor;}
}
.bellmaker_factor(bottom, @factor) {
    @media @da_small {  bottom: @pw_small * @factor;}
    @media @da_medium { bottom: @pw_medium * @factor;}
    @media @da_large {  bottom: @pw_large * @factor;}
    @media @da_x_large {bottom: @pw_x_large * @factor;}
}
.bellmaker_factor(left, @factor) {
    @media @da_small {  left: @pw_small * @factor;}
    @media @da_medium { left: @pw_medium * @factor;}
    @media @da_large {  left: @pw_large * @factor;}
    @media @da_x_large {left: @pw_x_large * @factor;}
}
.bellmaker_factor(padding-top, @factor) {
    @media @da_small {  padding-top: @pw_small * @factor;}
    @media @da_medium { padding-top: @pw_medium * @factor;}
    @media @da_large {  padding-top: @pw_large * @factor;}
    @media @da_x_large {padding-top: @pw_x_large * @factor;}
}
.bellmaker_factor(padding-right, @factor) {
    @media @da_small {  padding-right: @pw_small * @factor;}
    @media @da_medium { padding-right: @pw_medium * @factor;}
    @media @da_large {  padding-right: @pw_large * @factor;}
    @media @da_x_large {padding-right: @pw_x_large * @factor;}
}
.bellmaker_factor(padding-bottom, @factor) {
    @media @da_small {  padding-bottom: @pw_small * @factor;}
    @media @da_medium { padding-bottom: @pw_medium * @factor;}
    @media @da_large {  padding-bottom: @pw_large * @factor;}
    @media @da_x_large {padding-bottom: @pw_x_large * @factor;}
}
.bellmaker_factor(padding-left, @factor) {
    @media @da_small {  padding-left: @pw_small * @factor;}
    @media @da_medium { padding-left: @pw_medium * @factor;}
    @media @da_large {  padding-left: @pw_large * @factor;}
    @media @da_x_large {padding-left: @pw_x_large * @factor;}
}
.bellmaker_factor(margin-top, @factor) {
    @media @da_small {  margin-top: @pw_small * @factor;}
    @media @da_medium { margin-top: @pw_medium * @factor;}
    @media @da_large {  margin-top: @pw_large * @factor;}
    @media @da_x_large {margin-top: @pw_x_large * @factor;}
}
.bellmaker_factor(margin-right, @factor) {
    @media @da_small {  margin-right: @pw_small * @factor;}
    @media @da_medium { margin-right: @pw_medium * @factor;}
    @media @da_large {  margin-right: @pw_large * @factor;}
    @media @da_x_large {margin-right: @pw_x_large * @factor;}
}
.bellmaker_factor(margin-bottom, @factor) {
    @media @da_small {  margin-bottom: @pw_small * @factor;}
    @media @da_medium { margin-bottom: @pw_medium * @factor;}
    @media @da_large {  margin-bottom: @pw_large * @factor;}
    @media @da_x_large {margin-bottom: @pw_x_large * @factor;}
}
.bellmaker_factor(margin-left, @factor) {
    @media @da_small {  margin-left: @pw_small * @factor;}
    @media @da_medium { margin-left: @pw_medium * @factor;}
    @media @da_large {  margin-left: @pw_large * @factor;}
    @media @da_x_large {margin-left: @pw_x_large * @factor;}
}