Skip to content

Instantly share code, notes, and snippets.

@decadecity decadecity/mixins.less
Last active Nov 15, 2016

Embed
What would you like to do?
Less mixins
// Helper functions used throughout the code base.
// The old IE versions can cause the browser to hang so commented out.
#gradient {
.linear(@color: #F5F5F5, @start: #EEE, @stop: #FFF) {
background-color: @color;
background-image: -webkit-gradient(linear, left top, left top, color-stop(0, @start), color-stop(1, @stop));
background-image: -webkit-linear-gradient(@start, @stop);
background-image: -ms-linear-gradient(top, @start, @stop);
//filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@start,@stop)); // IE6 & IE7
//-ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@start,@stop); // IE8+
background-image: -moz-linear-gradient(center top, @start 0%, @stop 100%);
background-image: -o-linear-gradient(center top, @start, @stop);
background-image: linear-gradient(center top, @start, @stop);
}
.linear-double(@color: #F5F5F5, @start: #EEE, @stop: #FFF){
background-color: @color;
background-image: -webkit-gradient(linear, left top, left top, color-stop(0, @start), color-stop(1, @stop));
background-image: -webkit-linear-gradient(@start, @start, @stop, @stop);
background-image: -ms-linear-gradient(top, @start, @start, @stop, @stop);
//filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@start,@stop)); // IE6 & IE7
//-ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@start,@stop); // IE8+
background-image: -moz-linear-gradient(center top, @start 0%, @stop 100%);
background-image: -o-linear-gradient(center top, @start, @start, @stop, @stop);
background-image: linear-gradient(center top, @start, @start, @stop, @stop);
}
.linear-half(@color: #F5F5F5, @start: #EEE, @stop: #FFF){
background-color: @color;
background-image: -webkit-gradient(linear, left top, left top, color-stop(0, @start), color-stop(0.5, @stop));
background-image: -webkit-linear-gradient(@start, @stop, @stop, @stop);
background-image: -ms-linear-gradient(top, @start, @stop, @stop, @stop);
//filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@start,@stop)); // IE6 & IE7
//-ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@start,@stop); // IE8+
background-image: -moz-linear-gradient(center top, @start 0%, @stop 50%);
background-image: -o-linear-gradient(center top, @start, @stop, @stop, @stop);
background-image: linear-gradient(center top, @start, @stop, @stop, @stop);
}
.linear-triple(@color: #F5F5F5, @start: #EEE, @stop: #FFF){
background-color: @color;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(1%, @start),(49% @start), color-stop(53%, @stop), color-stop(100%, @stop));
background-image: -webkit-linear-gradient(top,@start 1%,@start 49%,@stop 53%,@stop 100%);
background-image: -ms-linear-gradient(top, @start 1%,@start 49%,@stop 53%,@stop 100%);
background-image: -moz-linear-gradient(top, @start 1%,@start 49%,@stop 53%,@stop 100%);
background-image: -o-linear-gradient(top, @start 1%,@start 49%,@stop 53%,@stop 100%);
background-image: linear-gradient(top, @start 1%,@start 49%,@stop 53%,@stop 100%);
}
.linear-quintuple(@color: #F5F5F5, @start: #EEE, @middle1: #EEE, @middle2:#EEE, @middle3: #FFF, @stop: #FFF){
background-color: @color;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @start), color-stop(13%, @middle1),color-stop(31%, @middle2), color-stop(44%, @middle3), color-stop(100%, @stop));
background-image: -webkit-linear-gradient(top,@start 0%, @middle1 13%, @middle2 31%, @middle3 44%, @stop 100%);
background-image: -ms-linear-gradient(top,@start 0%, @middle1 13%, @middle2 31%, @middle3 44%, @stop 100%);
background-image: -moz-linear-gradient(top,@start 0%, @middle1 13%, @middle2 31%, @middle3 44%, @stop 100%);
background-image: -o-linear-gradient(top,@start 0%, @middle1 13%, @middle2 31%, @middle3 44%, @stop 100%);
background-image: linear-gradient(top,@start 0%, @middle1 13%, @middle2 31%, @middle3 44%, @stop 100%);
}
.radial(@color: #F5F5F5, @start: #EEE, @stop: #FFF, @coverage: 75%) {
background: -moz-radial-gradient(center, ellipse cover, @start 0%, @start 1%, @stop @coverage, @stop 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,@start), color-stop(1%,@start), color-stop(@coverage,@stop), color-stop(100%,@stop)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, @start 0%,@start 1%,@stop @coverage,@stop 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, @start 0%,@start 1%,@stop @coverage,@stop 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, @start 0%,@start 1%,@stop @coverage,@stop 100%); /* IE10+ */
background: radial-gradient(ellipse at center, @start 0%,@start 1%,@stop @coverage,@stop 100%); /* W3C */
}
.clear() {
background-color: transparent;
background-image: none;
}
.solid(@color: #F5F5F5) {
background-color: @color;
background-image: none;
}
}
#border {
.shadow(@arguments: 0 0 10px rgba(128, 128, 128, 0.25)) {
-webkit-box-shadow: @arguments;
-moz-box-shadow: @arguments;
box-shadow: @arguments;
}
.radius(@radius: 0) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
background-clip: padding-box;
}
}
#percentage {
.width(@numerator, @denominator: 100) {
width: @numerator / @denominator * 100%;
}
.height(@numerator, @denominator: 100) {
height: @numerator / @denominator * 100%;
}
.font-size(@numerator, @denominator: 16) {
font-size: @numerator / @denominator * 100%;
}
.margin-left(@numerator, @denominator: 100) {
margin-left: @numerator / @denominator * 100%;
}
.margin-right(@numerator, @denominator: 100) {
margin-right: @numerator / @denominator * 100%;
}
.margin-horizontal(@numerator, @denominator: 16) {
margin-left: @numerator / @denominator * 100%;
margin-right: @numerator / @denominator * 100%;
}
.padding-left(@numerator, @denominator: 100) {
padding-left: @numerator / @denominator * 100%;
}
.padding-right(@numerator, @denominator: 100) {
padding-right: @numerator / @denominator * 100%;
}
.padding-horizontal(@numerator, @denominator: 100) {
padding-left: @numerator / @denominator * 100%;
padding-right: @numerator / @denominator * 100%;
}
}
#em {
.padding(@numerator, @denominator: 16) {
padding: @numerator / @denominator * 1em;
}
.padding-vertical(@numerator, @denominator: 16) {
padding-top: @numerator / @denominator * 1em;
padding-bottom: @numerator / @denominator * 1em;
}
.padding-horizontal(@numerator, @denominator: 16) {
padding-left: @numerator / @denominator * 1em;
padding-right: @numerator / @denominator * 1em;
}
.padding-top(@numerator, @denominator: 16) {
padding-top: @numerator / @denominator * 1em;
}
.padding-bottom(@numerator, @denominator: 16) {
padding-bottom: @numerator / @denominator * 1em;
}
.padding-left(@numerator, @denominator: 16) {
padding-left: @numerator / @denominator * 1em;
}
.padding-right(@numerator, @denominator: 16) {
padding-right: @numerator / @denominator * 1em;
}
.margin-vertical(@numerator, @denominator: 16) {
margin-top: @numerator / @denominator * 1em;
margin-bottom: @numerator / @denominator * 1em;
}
.margin-horizontal(@numerator, @denominator: 16) {
margin-left: @numerator / @denominator * 1em;
margin-right: @numerator / @denominator * 1em;
}
.margin-left(@numerator, @denominator: 16) {
margin-left: @numerator / @denominator * 1em;
}
.margin-right(@numerator, @denominator: 16) {
margin-right: @numerator / @denominator * 1em;
}
.margin-top(@numerator, @denominator: 16) {
margin-top: @numerator / @denominator * 1em;
}
.margin-bottom(@numerator, @denominator: 16) {
margin-bottom: @numerator / @denominator * 1em;
}
.line-height(@numerator, @denominator: 16) {
line-height: @numerator / @denominator * 1em;
}
.font-size(@numerator, @denominator: 16) {
font-size: @numerator / @denominator * 1em;
}
.width(@numerator, @denominator: 16) {
width: @numerator / @denominator * 1em;
}
.max-width(@numerator, @denominator: 16) {
max-width: @numerator / @denominator * 1em;
}
.height(@numerator, @denominator: 16) {
height: @numerator / @denominator * 1em;
}
.min-height(@numerator, @denominator: 16) {
min-height: @numerator / @denominator * 1em;
}
.border-width(@numerator, @denominator: 16) {
border-width: @numerator / @denominator * 1em;
}
.tracking(@value, @font-size: 16) {
letter-spacing: @value * @font-size / 1000 / @font-size * 1em;
}
}
.opacity(@opacity) {
filter: ~"alpha(opacity=@{opacity})";
opacity: @opacity / 100;
}
.background-clip(@clip) {
-webkit-background-clip: @clip;
-moz-background-clip: @clip;
background-clip: @clip;
}
.transition(@transition) {
-webkit-transition: @transition;
-moz-transition: @transition;
-o-transition: @transition;
transition: @transition;
}
.placeholder(@color: #00000) {
input::-webkit-input-placeholder {
color: @color;
opacity: 1;
}
input:-moz-placeholder {
color: @color;
opacity: 1;
}
input::-moz-placeholder {
color: @color;
opacity: 1;
}
input:-ms-input-placeholder {
color: @color;
opacity: 1;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.