diff options
Diffstat (limited to 'syte/static/less/mixins.less')
-rw-r--r-- | syte/static/less/mixins.less | 250 |
1 files changed, 0 insertions, 250 deletions
diff --git a/syte/static/less/mixins.less b/syte/static/less/mixins.less deleted file mode 100644 index 44cc546..0000000 --- a/syte/static/less/mixins.less +++ /dev/null @@ -1,250 +0,0 @@ -/* mixins.less - * CSS Reset and base mixinis for LESS based development. - * Inspired by bootstrap.less initially created by Mark Dotto - * https://github.com/markdotto/preboot.less - **/ - -// Clearfix for clearing floats -.clearfix() { - zoom: 1; - &:before, &:after {display: table; content: "";} - &:after {clear: both;} -} - -// Center-align a block level element -.center-block() { - display: block; - margin: 0 auto; -} - -// Sizing Shortcuts -.size(@width: 5px, @height: 5px) { - height: @height; width: @width; -} - -.square(@size: 5px) { - .size(@size, @size); -} - -// Fonts -.font(@weight: normal, @size: 14px, @lineHeight: 20px) { - font-size: @size; - font-weight: @weight; - line-height: @lineHeight; -} - -.font-sans-serif(@weight: normal, @size: 14px, @lineHeight: 20px) { - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - .font(@weight, @size, @lineHeight); -} - -.font-serif(@weight: normal, @size: 14px, @lineHeight: 20px) { - font-family: "Georgia", Times New Roman, Times, serif; - .font(@weight, @size, @lineHeight); -} - -.font-monospace(@weight: normal, @size: 12px, @lineHeight: 20px) { - font-family: "Monaco", Courier New, monospace; - .font(@weight, @size, @lineHeight); -} - -// Border Radius -.border-radius(@radius: 5px) { - -webkit-border-radius: @radius; - -moz-border-radius: @radius; - border-radius: @radius; -} - -// Box Shadows -.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) { - -webkit-box-shadow: @shadow; - -moz-box-shadow: @shadow; - box-shadow: @shadow; -} - -.reset-box-shadow() { - -webkit-box-shadow: 0 0 0; - -moz-box-shadow: 0 0 0; - box-shadow: 0 0 0; -} - -// Transitions -.transition(@transition) { - -webkit-transition: @transition; - -moz-transition: @transition; - -o-transition: @transition; - transition: @transition; -} - -.rotate(@rotation) { - -webkit-transform: rotate(@rotation); - -moz-transform: rotate(@rotation); - -ms-transform: rotate(@rotation); - -o-transform: rotate(@rotation); - transform: rotate(@rotation); -} - - -// Background Clipping -.background-clip(@clip) { - -webkit-background-clip: @clip; - -moz-background-clip: @clip; - background-clip: @clip; -} - -// CSS3 Content Columns -.content-columns(@columnCount, @columnGap: 20px) { - -webkit-column-count: @columnCount; - -webkit-column-gap: @columnGap; - -moz-column-count: @columnCount; - -moz-column-gap: @columnGap; - column-count: @columnCount; - column-gap: @columnGap; -} - -// Add a transparency value to a background -.alpha-background(@color: @white, @alpha: 1) { - background-color: @color; - background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha); -} - -// Add a transparency value to a border -.alpha-border(@color: @white, @alpha: 1) { - border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha); - background-clip: padding-box; -} - -// Gradients -.gradient(@startColor: #555, @endColor: #333) { - background-color: @endColor; - background-repeat: repeat-x; - background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); // Konqueror - background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+ - background-image: -ms-linear-gradient(top, @startColor, @endColor); // IE10 - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+ - background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+ - background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10 - background-image: linear-gradient(top, @startColor, @endColor); // The standard - filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down -} - -.horizontal-gradient(@startColor: #555, @endColor: #333) { - background-color: @endColor; - background-repeat: repeat-x; - background-image: -khtml-gradient(linear, left top, right top, from(@startColor), to(@endColor)); // Konqueror - background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+ - background-image: -ms-linear-gradient(left, @startColor, @endColor); // IE10 - background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+ - background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+ - background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10 - background-image: linear-gradient(left, @startColor, @endColor); // Le standard - filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE9 and down -} - -.directional-gradient(@startColor: #555, @endColor: #333, @deg: 45deg) { - background-color: @endColor; - background-repeat: repeat-x; - background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+ - background-image: -ms-linear-gradient(@deg, @startColor, @endColor); // IE10 - background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+ - background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10 - background-image: linear-gradient(@deg, @startColor, @endColor); // The standard -} - -.vertical-gradient-3(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { - background-color: @endColor; - background-repeat: no-repeat; - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor)); - background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor); - background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor); - background-image: -ms-linear-gradient(@startColor, @midColor @colorStop, @endColor); - background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor); - background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor); - filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down, gets no color-stop at all for proper fallback -} - -.reset-ie-gradient() { - filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)")); -} - -// Opacity -.opacity(@opacity: 100) { - filter: e(%("alpha(opacity=%d)", @opacity)); - -khtml-opacity: @opacity / 100; - -moz-opacity: @opacity / 100; - opacity: @opacity / 100; -} - -// Word spacing wrap -.break-word() { - white-space: pre-wrap; - word-wrap: break-word; -} - -// PATTERN ANIMATIONS -// ------------------ -.fade { - .transition(opacity .15s linear); - opacity: 0; - &.in { - opacity: 1; - } -} - -.user-select(@select) { - -webkit-user-select: @select; - -khtml-user-select: @select; - -moz-user-select: @select; - -o-user-select: @select; - user-select: @select; -} - -//Arrows -.arrow-top(@arrow-size: 5px, @arrow-color: #000, @arrow-location: 50%) { - bottom: 0; - left: @arrow-location; - margin-left: -@arrow-size; - border-left: @arrow-size solid transparent; - border-right: @arrow-size solid transparent; - border-top: @arrow-size solid @arrow-color; - position: absolute; - width: 0; - height: 0; -} - -.arrow-right(@arrow-size: 5px, @arrow-color: #000, @arrow-location: 50%) { - top: @arrow-location; - left: 0; - margin-top: -@arrow-size; - border-top: @arrow-size solid transparent; - border-bottom: @arrow-size solid transparent; - border-right: @arrow-size solid @arrow-color; - position: absolute; - width: 0; - height: 0; -} - -.arrow-bottom(@arrow-size: 5px, @arrow-color: #000, @arrow-location: 50%) { - top: 0; - left: @arrow-location; - margin-left: -@arrow-size; - border-left: @arrow-size solid transparent; - border-right: @arrow-size solid transparent; - border-bottom: @arrow-size solid @arrow-color; - position: absolute; - width: 0; - height: 0; -} - -.arrow-left(@arrow-size: 5px, @arrow-color: #000, @arrow-location: 50%) { - top: @arrow-location; - right: 0; - margin-top: -@arrow-size; - border-top: @arrow-size solid transparent; - border-bottom: @arrow-size solid transparent; - border-left: @arrow-size solid @arrow-color; - position: absolute; - width: 0; - height: 0; -} - |