aboutsummaryrefslogtreecommitdiffstats
path: root/syte/static/less/mixins.less
diff options
context:
space:
mode:
Diffstat (limited to 'syte/static/less/mixins.less')
-rw-r--r--syte/static/less/mixins.less250
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;
-}
-