/* Variables */ @base-font-face: "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif; @alt-font-face: "Trebuchet MS", Helvetica, Arial, sans-serif; @base-font-size: 12px; @text-color: #343434; @swatch-blue: #4183C4; @swatch-grey: #666666; @link-color: @swatch-blue; @border-color: #CCCCCC; @msg-bg: #FFF6A9; @msg-bg-success: #D3FFD7; @msg-bg-error: #FFD3D3; @brand-color: #4F4F4F; @caption-color: #999999; @gradient-color-1: #FAFAFA; @gradient-color-2: #E7E7E7; @heading-input-radius: 5px; /* Mixins */ .rounded(@radius: 5px) { -moz-border-radius: @radius; -webkit-border-radius: @radius; border-radius: @radius; } .roundedTop(@radius: 5px) { -moz-border-radius-topleft: @radius; -moz-border-radius-topright: @radius; -webkit-border-top-right-radius: @radius; -webkit-border-top-left-radius: @radius; border-top-left-radius: @radius; border-top-right-radius: @radius; } .roundedLeftTop(@radius: 5px) { -moz-border-radius-topleft: @radius; -webkit-border-top-left-radius: @radius; border-top-left-radius: @radius; } .roundedRightTop(@radius: 5px) { -moz-border-radius-topright: @radius; -webkit-border-top-right-radius: @radius; border-top-right-radius: @radius; } .roundedBottom(@radius: 5px) { -moz-border-radius-bottomleft: @radius; -moz-border-radius-bottomright: @radius; -webkit-border-bottom-right-radius: @radius; -webkit-border-bottom-left-radius: @radius; border-bottom-left-radius: @radius; border-bottom-right-radius: @radius; } .roundedLeftBottom(@radius: 5px) { -moz-border-radius-bottomleft: @radius; -webkit-border-bottom-left-radius: @radius; border-bottom-left-radius: @radius; } .roundedRightBottom(@radius: 5px) { -moz-border-radius-bottomright: @radius; -webkit-border-bottom-right-radius: @radius; border-bottom-right-radius: @radius; } .shadow(@shadow: 0 17px 11px -1px #ced8d9) { -moz-box-shadow: @shadow; -webkit-box-shadow: @shadow; -o-box-shadow: @shadow; box-shadow: @shadow; } .gradient(@gradientFrom: #FFFFFF, @gradientTo: #EEEEEE){ background-image: -moz-linear-gradient(@gradientFrom, @gradientTo) !important; background-image: linear-gradient(@gradientFrom, @gradientTo) !important; background-image: -webkit-linear-gradient(@gradientFrom, @gradientTo) !important; background-image: -o-linear-gradient(@gradientFrom, @gradientTo) !important; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=@gradientFrom, endColorstr=@gradientTo) !important; -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=@gradientFrom, endColorstr=@gradientTo) !important; } .opacity(@opacity_percent:85) { filter: ~"alpha(opacity=85)"; -moz-opacity: @opacity_percent / 100 !important; -khtml-opacity:@opacity_percent / 100 !important; -o-opacity:@opacity_percent / 100 !important; opacity:@opacity_percent / 100 !important; } /* COLUMNS STUFF https://css-tricks.com/guide-responsive-friendly-css-columns/ */ .columnWidth(@width) { -webkit-column-width: @width; -moz-column-width: @width; column-width: @width; } .columnCount(@count) { -webkit-columns: @count; -moz-columns: @count; columns: @count; } .columnGap(@width) { -webkit-column-gap: @width; -moz-column-gap: @width; column-gap: @width; } .columnRule(@border) { -webkit-column-rule: @border; -moz-column-rule: @border; column-rule: @border; } .columnSpan(@what) { -webkit-column-span: @what; column-span: @what; }