From cda3c6f5efff8c601c5e562fec1697acb34e70be Mon Sep 17 00:00:00 2001 From: "CORP\\gjjones" Date: Wed, 7 Jan 2015 08:15:47 -0500 Subject: [PATCH 1/7] The mixin file contains utility classes that are also used as mixins. --- edna.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/edna.less b/edna.less index 1d46c9f..93ad956 100644 --- a/edna.less +++ b/edna.less @@ -3,11 +3,11 @@ ****************/ // REFERENCE FILES -@import (reference) 'less/_mixins.less'; @import (reference) 'less/_variables.less'; // BASE FILES @import 'less/_normalize.less'; +@import 'less/_mixins.less'; @import 'less/_autocomplete.less'; @import 'less/_breadcrumb.less'; @import 'less/_carousel.less'; From f18205ee3f4a10f9f27f4d9c28edbfd28cc38d59 Mon Sep 17 00:00:00 2001 From: "CORP\\gjjones" Date: Wed, 7 Jan 2015 08:40:08 -0500 Subject: [PATCH 2/7] Adds lighten mixin for other shades of colors objects. Conflicts: less/_mixins.less --- less/_mixins.less | 94 +++++++++++++++++++++++++---------------------- 1 file changed, 51 insertions(+), 43 deletions(-) diff --git a/less/_mixins.less b/less/_mixins.less index e45de60..dfea362 100644 --- a/less/_mixins.less +++ b/less/_mixins.less @@ -2,10 +2,18 @@ //----- MIXINS FOR MIXINS -----------------------------// +//----- COLOR -----------------------------------------// + +.overlay-white(@percent, @color) { + @white: rgba(255, 255, 255, @percent); + @overlay-white: screen(@color, @white); +} + + //----- CLEAR -----------------------------------------// .clear() { - clear: both; + clear: both; } @@ -13,18 +21,18 @@ // ie7 .clearfix() { - *zoom: 1; + *zoom: 1; &:before, &:after, &::before, &::after { - display: table; - line-height: 0; - content: ""; + display: table; + line-height: 0; + content: ""; } &:after, &::after { - clear: both; + clear: both; } } @@ -57,12 +65,12 @@ //----- BUTTON GRADIENT ----------------------------// .btngrade(@top, @bottom) { - background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, @bottom), color-stop(1, @top)); - background-image: -moz-linear-gradient(center bottom, @bottom 0%, @top 100%); - background-image: -ms-linear-gradient(bottom, @bottom, @top); - background-image: -o-linear-gradient(@top, @bottom); - background-image: linear-gradient(@top, @bottom); - filter: e(%("progid:DXImageTransform.Microsoft.newgradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@top,@bottom)); + background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, @bottom), color-stop(1, @top)); + background-image: -moz-linear-gradient(center bottom, @bottom 0%, @top 100%); + background-image: -ms-linear-gradient(bottom, @bottom, @top); + background-image: -o-linear-gradient(@top, @bottom); + background-image: linear-gradient(@top, @bottom); + filter: e(%("progid:DXImageTransform.Microsoft.newgradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@top,@bottom)); } @@ -117,7 +125,7 @@ h@{index} { - + margin-top: 0; & when (@index = 1) { @@ -132,7 +140,7 @@ margin-bottom: 10px; } - + .fontsize(@sizeVal); & when (@index = 1), (@index = 2), (@index = 3), (@index = 4), (@index = 5), (@index = 6) { font-weight: bold; @@ -148,21 +156,21 @@ > a:visited, > a:focus, > a:active { - + color: @link-color; text-decoration: @link-decoration; } > a:visited { - + color: @link-color-visited; text-decoration: @link-decoration-visited; } > a:hover { - + color: @link-color-hover; } > a:focus { - + text-decoration: @link-decoration-focus; } } @@ -174,15 +182,15 @@ .box(@sizing) { & when (@sizing = content), (@sizing = border) { - // should take either CONTENT or BORDER - -webkit-box-sizing: escape("@{sizing}-box"); // Safari/Chrome, other WebKit - -moz-box-sizing: escape("@{sizing}-box"); // Firefox, other Gecko - box-sizing: escape("@{sizing}-box"); // Opera/IE 8+ + // should take either CONTENT or BORDER + -webkit-box-sizing: escape("@{sizing}-box"); // Safari/Chrome, other WebKit + -moz-box-sizing: escape("@{sizing}-box"); // Firefox, other Gecko + box-sizing: escape("@{sizing}-box"); // Opera/IE 8+ } & when (@sizing = inherit) { - -webkit-box-sizing: escape("@{sizing}"); // Safari/Chrome, other WebKit - -moz-box-sizing: escape("@{sizing}"); // Firefox, other Gecko - box-sizing: escape("@{sizing}"); // Opera/IE 8+ + -webkit-box-sizing: escape("@{sizing}"); // Safari/Chrome, other WebKit + -moz-box-sizing: escape("@{sizing}"); // Firefox, other Gecko + box-sizing: escape("@{sizing}"); // Opera/IE 8+ } } @@ -239,7 +247,7 @@ .column(@n: 1) { -webkit-column-count: @n; -moz-column-count: @n; - column-count: @n; + column-count: @n; } @@ -324,7 +332,7 @@ //----- RTL ---------------------------------------------// .international(@dir, @uni) { - + direction: @dir; unicode-bidi: @uni; } @@ -337,28 +345,28 @@ .fixedCol(@w, @s) { &.fixed-@{s} { - + clear: both; > .col { & when (@s = r) { - + width: 63%; } &.fw@{w} { - + width: unit(@w + @p, px); - + & when (@s = r) { - + float: right; padding-right: 0; margin-left: unit(-(@w + @p), px); } & when (@s = l) { - + float: left; padding-right: unit(@p, px); padding-left: 0; @@ -367,12 +375,12 @@ + .col { & when (@s = r) { - + padding-right: unit(@w + @p, px); } & when (@s = l) { - + width: 100%; padding-left: unit(@w + @p, px); } @@ -389,22 +397,22 @@ @arrayVal: extract(@list, @index); &.msg-@{arrayVal} { - + background-color: ~"@{msg-@{arrayVal}-bgcolor}"; border-color: ~"@{msg-@{arrayVal}-bordercolor}"; .icon { - + display: inline-block; width: 20px; height: 20px; - + background-image: url(~"@{msg-@{arrayVal}-icon}"); background-repeat: no-repeat; } > .txt { - + color: ~"@{msg-@{arrayVal}-color}"; } } @@ -416,7 +424,7 @@ .inactive() { &.inactive:after, &.inactive::after { - + color: @transport-inactive; cursor: default; &:hover { @@ -430,11 +438,11 @@ //----- TRANSPORTS --------------------------------------// .transMix() { > .@{val} { - + margin-@{val}: @transport-width-short; margin-@{opp}: @transport-width-short; - + border-@{val}-width: 0; border-@{opp}-color: @transport-color; border-@{opp}-style: solid; @@ -469,7 +477,7 @@ .modalWidth(@width) { @w: unit(@width, px); - + width: @w !important; margin-left: ceil(-(@w / 2)); } From bfcf515a89d7adaf437cad2705828df56ae47aef Mon Sep 17 00:00:00 2001 From: "CORP\\gjjones" Date: Wed, 7 Jan 2015 08:51:54 -0500 Subject: [PATCH 3/7] Adds black overlay to mix black into colors. --- less/_mixins.less | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/less/_mixins.less b/less/_mixins.less index dfea362..cab5219 100644 --- a/less/_mixins.less +++ b/less/_mixins.less @@ -9,6 +9,11 @@ @overlay-white: screen(@color, @white); } +.overlay-black(@percent, @color) { + @black: rgba(0, 0, 0, @percent); + @overlay-black: screen(@color, @black); +} + //----- CLEAR -----------------------------------------// From 264dd8bc4e950bbdd80e46a6d17c12b497ce3866 Mon Sep 17 00:00:00 2001 From: "CORP\\gjjones" Date: Wed, 7 Jan 2015 09:08:12 -0500 Subject: [PATCH 4/7] Uses the correct blending function to add black to a color. --- less/_mixins.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/less/_mixins.less b/less/_mixins.less index cab5219..e0984f3 100644 --- a/less/_mixins.less +++ b/less/_mixins.less @@ -11,7 +11,7 @@ .overlay-black(@percent, @color) { @black: rgba(0, 0, 0, @percent); - @overlay-black: screen(@color, @black); + @overlay-black: multiply(@color, @black); } From d793f275bd5091182b6d741b5281ef483f7d0b5a Mon Sep 17 00:00:00 2001 From: "CORP\\gjjones" Date: Wed, 7 Jan 2015 13:54:25 -0500 Subject: [PATCH 5/7] Adds support for using mixin multiple times within a scope. --- less/_mixins.less | 30 ++++++++++++++++++++++++++---- 1 file changed, 26 insertions(+), 4 deletions(-) diff --git a/less/_mixins.less b/less/_mixins.less index e0984f3..53c13a5 100644 --- a/less/_mixins.less +++ b/less/_mixins.less @@ -4,14 +4,36 @@ //----- COLOR -----------------------------------------// -.overlay-white(@percent, @color) { +.overlay-white(@percent; @color; @shade: none) { @white: rgba(255, 255, 255, @percent); - @overlay-white: screen(@color, @white); + + .get-output(@shade) when (@shade = lighter) { + @overlay-white-lighter: screen(@color, @white); + } + .get-output(@shade) when (@shade = darker) { + @overlay-white-darker: screen(@color, @white); + } + .get-output(@shade) when (default()) { + @overlay-white: screen(@color, @white); + } + + .get-output(@shade); } -.overlay-black(@percent, @color) { +.overlay-black(@percent; @color; @shade: none) { @black: rgba(0, 0, 0, @percent); - @overlay-black: multiply(@color, @black); + + .get-output(@shade) when (@shade = lighter) { + @overlay-black-lighter: multiply(@color, @black); + } + .get-output(@shade) when (@shade = darker) { + @overlay-black-darker: multiply(@color, @black); + } + .get-output(@shade) when (default()) { + @overlay-black: multiply(@color, @black); + } + + .get-output(@shade); } From 294ccb27ef617ceb8ee1e53f1f1d1ca7e40edee1 Mon Sep 17 00:00:00 2001 From: "CORP\\gjjones" Date: Wed, 7 Jan 2015 14:32:15 -0500 Subject: [PATCH 6/7] Adds back spaces where aligning prefixes. It looks prettier on github. Conflicts: less/_mixins.less --- less/_mixins.less | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/less/_mixins.less b/less/_mixins.less index 53c13a5..e36e08b 100644 --- a/less/_mixins.less +++ b/less/_mixins.less @@ -212,12 +212,12 @@ // should take either CONTENT or BORDER -webkit-box-sizing: escape("@{sizing}-box"); // Safari/Chrome, other WebKit -moz-box-sizing: escape("@{sizing}-box"); // Firefox, other Gecko - box-sizing: escape("@{sizing}-box"); // Opera/IE 8+ + box-sizing: escape("@{sizing}-box"); // Opera/IE 8+ } & when (@sizing = inherit) { -webkit-box-sizing: escape("@{sizing}"); // Safari/Chrome, other WebKit -moz-box-sizing: escape("@{sizing}"); // Firefox, other Gecko - box-sizing: escape("@{sizing}"); // Opera/IE 8+ + box-sizing: escape("@{sizing}"); // Opera/IE 8+ } } @@ -228,11 +228,11 @@ @radius-sd: px; .radius(@n: unit(@radius); @s: @radius-sd) when (@n = 0) { -moz-border-radius: @n; - border-radius: @n; + border-radius: @n; } .radius(@n: unit(@radius); @s: @radius-sd) when not (@n = 0) { -moz-border-radius: unit(@n, @s); - border-radius: unit(@n, @s); + border-radius: unit(@n, @s); } //----- TRANSPORT -------------------------------------// @@ -274,7 +274,7 @@ .column(@n: 1) { -webkit-column-count: @n; -moz-column-count: @n; - column-count: @n; + column-count: @n; } @@ -292,9 +292,9 @@ filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=@IE8rot); // IE8 and lower -webkit-transform: rotate(unit(@num, deg)); // Safari -moz-transform: rotate( unit(@num, deg) ); // Mozilla - -ms-transform: rotate( unit(@num, deg) ); // IE 9 and higher - -o-transform: rotate( unit(@num, deg) ); // Opera - transform: rotate( unit(@num, deg) ); + -ms-transform: rotate( unit(@num, deg) ); // IE 9 and higher + -o-transform: rotate( unit(@num, deg) ); // Opera + transform: rotate( unit(@num, deg) ); } @@ -334,7 +334,7 @@ -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; - -ms-user-select: none; + -ms-user-select: none; } From 52b9b417eaa186910f5614d02a180b0fb3ca4947 Mon Sep 17 00:00:00 2001 From: "CORP\\gjjones" Date: Thu, 8 Jan 2015 15:06:39 -0500 Subject: [PATCH 7/7] adding selector for strong element inside of an anchor in the autocomplete. Fixes problem where half the text was white, and half was black. Also fixes the problem for keyboard navigation -MPivnick --- less/_autocomplete.less | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/less/_autocomplete.less b/less/_autocomplete.less index 51fe3ac..8cf0ea4 100644 --- a/less/_autocomplete.less +++ b/less/_autocomplete.less @@ -40,6 +40,9 @@ color: @ac-result-color-hover; background-color: @ac-result-bgcolor-hover; + > strong { + color: @ac-result-color-hover; + } } } &:hover a { @@ -47,6 +50,9 @@ text-decoration: none; background-color: @ac-result-bgcolor-hover; + > strong { + color: @ac-result-color-hover; + } } &:first-child { margin-top: 0;