diff --git a/src/extensions/default/edge-code-kuler/KulerInlineColorEditor.js b/src/extensions/default/edge-code-kuler/KulerInlineColorEditor.js
index 563fbabdbbf..83a7fe11f5c 100644
--- a/src/extensions/default/edge-code-kuler/KulerInlineColorEditor.js
+++ b/src/extensions/default/edge-code-kuler/KulerInlineColorEditor.js
@@ -258,13 +258,12 @@ define(function (require, exports, module) {
var $title = $theme.find(".kuler-swatch-title"),
$anchor;
- $title.wrap("");
+ $title.wrap("");
$anchor = $title.parent();
$anchor.on("click", function () {
NativeApp.openURLInDefaultBrowser(getUrl());
return false;
});
- $anchor.attr("tabindex", -1);
});
});
returnVal = true;
diff --git a/src/extensions/default/edge-code-kuler/html/KulerThemeTemplate.html b/src/extensions/default/edge-code-kuler/html/KulerThemeTemplate.html
index 91042ad972f..846dae336c7 100644
--- a/src/extensions/default/edge-code-kuler/html/KulerThemeTemplate.html
+++ b/src/extensions/default/edge-code-kuler/html/KulerThemeTemplate.html
@@ -2,7 +2,7 @@
{{#swatches}}
-
+
{{/swatches}}
diff --git a/src/extensions/default/edge-code-kuler/styles/kuler.less b/src/extensions/default/edge-code-kuler/styles/kuler.less
index d67bce58c24..21f536895f2 100644
--- a/src/extensions/default/edge-code-kuler/styles/kuler.less
+++ b/src/extensions/default/edge-code-kuler/styles/kuler.less
@@ -4,6 +4,7 @@
@heading-color: #454545;
@link-color: #0083e8;
@menu-highlight-color: rgba(224, 240, 250, 1);
+@focus-highlight-color: #65aeed;
/* Typography */
@font-weight-semibold: 500;
@@ -58,23 +59,9 @@
}
}
-// trying to colorize the kuler links on hover - end
-
// Used to avoid overlapping CM scrollbar - TODO (#3460): need a cleaner way to do this
@scrollbar-wid: 17px;
-.border-fixer-upper {
- &:first-child {
- border-top-left-radius: 3px;
- border-bottom-left-radius: 3px;
- }
-
- &:last-child {
- border-top-right-radius: 3px;
- border-bottom-right-radius: 3px;
- }
-}
-
/* Right-hand column */
.kuler-content {
position: absolute;
@@ -170,6 +157,7 @@
width: 120px;
height: 20px;
margin-bottom: -6px;
+ margin-right: 4px;
.kuler-swatch {
position: absolute;
@@ -184,62 +172,39 @@
&:focus {
outline: none;
- box-shadow: inset 0 0 0 2px rgba(111, 181, 241, 0.7);
+ box-shadow: inset 0 0 0 2px @focus-highlight-color;
border-radius: 2px;
}
}
- .kuler-block-1 {
- width: 100%;
- .border-fixer-upper;
- }
-
- .kuler-block-2 {
- width: 100%/2;
- .border-fixer-upper;
- }
-
- .kuler-block-3 {
- width: 100%/3;
- .border-fixer-upper;
- }
-
- .kuler-block-4 {
- width: 100%/4;
- .border-fixer-upper;
- }
-
- .kuler-block-5 {
- width: 100%/5;
- .border-fixer-upper;
- }
-
- .kuler-block-6 {
- width: 100%/6;
- .border-fixer-upper;
+ .kuler-block {
+ width: 20%;
+
+ &:first-child {
+ border-top-left-radius: 3px;
+ border-bottom-left-radius: 3px;
+ }
+
+ &:last-child {
+ border-top-right-radius: 3px;
+ border-bottom-right-radius: 3px;
+ }
}
-
}
}
+ .kuler-swatch-title {
+ padding: 2px;
+ }
+
a {
color: inherit;
text-decoration: none;
&:focus {
outline: none;
- box-shadow: none;
- border-radius: 0;
- }
- }
-
- .kuler-swatch-title {
- padding-left: 6px;
-
- &:focus {
- outline: none;
- box-shadow: none;
- border-radius: 0;
+ box-shadow: 0 0 0 2px @focus-highlight-color;
+ border-radius: 2px;
}
}
}