diff --git a/core/modules/color/color.js b/core/modules/color/color.js
index 4423d56e94ba7e002495fd874034507617c0a63d..afb4dd4af9c028779c68bc83f3dcda22d0a4260d 100644
--- a/core/modules/color/color.js
+++ b/core/modules/color/color.js
@@ -23,8 +23,8 @@
var focused = null;
// Add Farbtastic.
- $('<div class="color-placeholder"></div>').once('color').prependTo(form);
- var farb = $.farbtastic('.color-placeholder');
+ $('<div id="placeholder"></div>').once('color').prependTo(form);
+ var farb = $.farbtastic('#placeholder');
// Decode reference colors to HSL.
var reference = settings.color.reference;
@@ -41,8 +41,8 @@
for (i in settings.gradients) {
if (settings.gradients.hasOwnProperty(i)) {
// Add element to display the gradient.
- $('.color-preview').once('color').append('<div id="gradient-' + i + '"></div>');
- var gradient = $('.color-preview #gradient-' + i);
+ $('#preview').once('color').append('<div id="gradient-' + i + '"></div>');
+ var gradient = $('#preview #gradient-' + i);
// Add height of current gradient to the list (divided by 10).
height.push(parseInt(gradient.css('height'), 10) / 10);
// Add width of current gradient to the list (divided by 10).
@@ -146,14 +146,14 @@
if (propagate) {
i = input.i;
for (j = i + 1; ; ++j) {
- if (!locks[j - 1] || $(locks[j - 1]).is('.is-unlocked')) {
+ if (!locks[j - 1] || $(locks[j - 1]).is('.unlocked')) {
break;
}
matched = shift_color(color, reference[input.key], reference[inputs[j].key]);
callback(inputs[j], matched, false);
}
for (j = i - 1; ; --j) {
- if (!locks[j] || $(locks[j]).is('.is-unlocked')) {
+ if (!locks[j] || $(locks[j]).is('.unlocked')) {
break;
}
matched = shift_color(color, reference[input.key], reference[inputs[j].key]);
@@ -201,7 +201,7 @@
}
// Initialize color fields.
- form.find('.js-color-palette input.form-text')
+ form.find('#palette input.form-text')
.each(function () {
// Extract palette field name
this.key = this.id.substring(13);
@@ -213,24 +213,24 @@
i = inputs.length;
if (inputs.length) {
var toggleClick = true;
- var lock = $('<button class="color-palette__lock link">' + Drupal.t('Unlock') + '</button>').on('click', function (e) {
+ var lock = $('<button class="lock link">' + Drupal.t('Unlock') + '</button>').on('click', function (e) {
e.preventDefault();
if (toggleClick) {
- $(this).addClass('is-unlocked').html(Drupal.t('Lock'));
+ $(this).addClass('unlocked').html(Drupal.t('Lock'));
$(hooks[i - 1]).attr('class',
- locks[i - 2] && $(locks[i - 2]).is(':not(.is-unlocked)') ? 'color-palette__hook is-up' : 'color-palette__hook'
+ locks[i - 2] && $(locks[i - 2]).is(':not(.unlocked)') ? 'hook up' : 'hook'
);
$(hooks[i]).attr('class',
- locks[i] && $(locks[i]).is(':not(.is-unlocked)') ? 'color-palette__hook is-down' : 'color-palette__hook'
+ locks[i] && $(locks[i]).is(':not(.unlocked)') ? 'hook down' : 'hook'
);
}
else {
- $(this).removeClass('is-unlocked').html(Drupal.t('Unlock'));
+ $(this).removeClass('unlocked').html(Drupal.t('Unlock'));
$(hooks[i - 1]).attr('class',
- locks[i - 2] && $(locks[i - 2]).is(':not(.is-unlocked)') ? 'color-palette__hook is-both' : 'color-palette__hook is-down'
+ locks[i - 2] && $(locks[i - 2]).is(':not(.unlocked)') ? 'hook both' : 'hook down'
);
$(hooks[i]).attr('class',
- locks[i] && $(locks[i]).is(':not(.is-unlocked)') ? 'color-palette__hook is-both' : 'color-palette__hook is-up'
+ locks[i] && $(locks[i]).is(':not(.unlocked)') ? 'hook both' : 'hook up'
);
}
toggleClick = !toggleClick;
@@ -240,17 +240,17 @@
}
// Add hook.
- var hook = $('<div class="color-palette__hook"></div>');
+ var hook = $('<div class="hook"></div>');
$(this).after(hook);
hooks.push(hook);
- $(this).parent().find('.color-palette__lock').trigger('click');
+ $(this).parent().find('.lock').trigger('click');
this.i = i;
inputs.push(this);
})
.on('focus', focus);
- form.find('.js-color-palette label');
+ form.find('#palette label');
// Focus first color.
inputs[0].focus();
diff --git a/core/modules/color/css/color.admin.css b/core/modules/color/css/color.admin.css
index 825d16328d6a2da5984d109a1aad60a46528560d..e904c85dc9fc429c7f9e32d3175b385cfe8f160b 100644
--- a/core/modules/color/css/color.admin.css
+++ b/core/modules/color/css/color.admin.css
@@ -9,9 +9,8 @@
margin: 0 auto;
}
.color-form .form-item {
+ overflow: hidden;
margin: 0.5em 0;
- height: 2em;
- padding: 0.5em;
}
.color-form label {
clear: left; /* LTR */
@@ -28,68 +27,57 @@
[dir="rtl"] .color-form .form-text {
float: right;
}
-.color-palette__hook {
+#palette .hook {
float: left; /* LTR */
width: 16px;
height: 16px;
}
-[dir="rtl"] .color-palette__hook {
+[dir="rtl"] #palette .hook {
float: right;
}
-.color-palette__hook.is-down,
-.color-palette__hook.is-up,
-.color-palette__hook.is-both {
+#palette .down,
+#palette .up,
+#palette .both {
background: url(../images/hook.png) no-repeat 100% 0; /* LTR */
}
-[dir="rtl"] .color-palette__hook.is-down,
-[dir="rtl"] .color-palette__hook.is-up,
-[dir="rtl"] .color-palette__hook.is-both {
+[dir="rtl"] #palette .down,
+[dir="rtl"] #palette .up,
+[dir="rtl"] #palette .both {
background: url(../images/hook-rtl.png) no-repeat 0 0;
}
-.color-palette__hook.is-up {
+#palette .up {
background-position: 100% -27px; /* LTR */
}
-[dir="rtl"] .color-palette__hook.is-up {
+[dir="rtl"] #palette .up {
background-position: 0 -27px;
}
-.color-palette__hook.is-both {
+#palette .both {
background-position: 100% -54px; /* LTR */
}
-[dir="rtl"] .color-palette__hook.is-both {
+[dir="rtl"] #palette .both {
background-position: 0 -54px;
}
-/**
- * The button also inherits from .link, which hides the background. Use a more
- * specific selector to overwrite.
- */
-button.color-palette__lock,
-.color-palette__lock {
+#palette .lock {
float: left; /* LTR */
width: 20px;
height: 19px;
background: url(../images/lock.png) no-repeat 50% 0;
cursor: pointer;
- position: relative;
- top: -1.7em;
- left: -10px;
- direction: ltr;
text-indent: -9999px;
}
-[dir="rtl"] .color-palette__lock {
+[dir="rtl"] #palette .lock {
float: right;
}
-/* Same as above .color-palette__lock rule. */
-button.is-unlocked,
-.is-unlocked {
+#palette .unlocked {
background-position: 50% -22px;
}
/* wide viewport. */
@media screen and (min-width: 37.5625em) { /* 601px */
- .color-placeholder {
+ #placeholder {
float: right; /* LTR */
}
- [dir="rtl"] .color-placeholder {
+ [dir="rtl"] #placeholder {
float: left;
}
.color-form .form-item {
@@ -116,18 +104,17 @@ button.is-unlocked,
[dir="rtl"] .color-form .form-select {
float: right;
}
- .color-palette__hook {
+ #palette .hook {
float: left; /* LTR */
margin-top: 3px;
}
- [dir="rtl"] .color-palette__hook {
+ [dir="rtl"] #palette .hook {
float: right;
}
- button.color-palette__lock,
- .color-palette__lock {
+ #palette .lock {
float: left; /* LTR */
}
- [dir="rtl"] .color-palette__lock {
+ [dir="rtl"] #palette .lock {
float: right;
}
}
@@ -136,20 +123,20 @@ button.is-unlocked,
}
/* Preview */
-.color-preview {
+#preview {
display: none;
}
-.js .color-preview {
+.js #preview {
display: block;
position: relative;
float: left; /* LTR */
}
-.js[dir="rtl"] .color-preview {
+.js[dir="rtl"] #preview {
float: right;
}
@media screen and (max-width: 30em) { /* 480px */
- .color-form .color-preview-sidebar,
- .color-form .color-preview-content {
+ .color-form #preview-sidebar,
+ .color-form #preview-content {
width: auto;
margin: 0;
}
diff --git a/core/modules/color/preview.html b/core/modules/color/preview.html
index d89edcb0d05c5b9cd384c538051b925cb143e749..e25b7add726984eff7e9363ee38ba5fdfb17ad8d 100644
--- a/core/modules/color/preview.html
+++ b/core/modules/color/preview.html
@@ -1,7 +1,7 @@
-<div class="color-preview">
+<div id="preview">
<div id="text">
<h2>Lorem ipsum dolor</h2>
<p>Sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud <a href="#">exercitation ullamco</a> laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="img"></div>
-</div>
+</div>
\ No newline at end of file
diff --git a/core/modules/color/preview.js b/core/modules/color/preview.js
index f121adec62ca5c011a93ce091f38f6c759b9f221..84cf2aa3f26d964ed751663ddafe155437ffdaf3 100644
--- a/core/modules/color/preview.js
+++ b/core/modules/color/preview.js
@@ -12,11 +12,11 @@
var accum;
var delta;
// Solid background.
- form.find('.color-preview').css('backgroundColor', form.find('.color-palette input[name="palette[base]"]').val());
+ form.find('#preview').css('backgroundColor', form.find('#palette input[name="palette[base]"]').val());
// Text preview
- form.find('#text').css('color', form.find('.color-palette input[name="palette[text]"]').val());
- form.find('#text a, #text h2').css('color', form.find('.color-palette input[name="palette[link]"]').val());
+ form.find('#text').css('color', form.find('#palette input[name="palette[text]"]').val());
+ form.find('#text a, #text h2').css('color', form.find('#palette input[name="palette[link]"]').val());
function gradientLineColor(i, element) {
for (var k in accum) {
@@ -32,8 +32,8 @@
var color_end;
for (var i in settings.gradients) {
if (settings.gradients.hasOwnProperty(i)) {
- color_start = farb.unpack(form.find('.color-palette input[name="palette[' + settings.gradients[i].colors[0] + ']"]').val());
- color_end = farb.unpack(form.find('.color-palette input[name="palette[' + settings.gradients[i].colors[1] + ']"]').val());
+ color_start = farb.unpack(form.find('#palette input[name="palette[' + settings.gradients[i].colors[0] + ']"]').val());
+ color_end = farb.unpack(form.find('#palette input[name="palette[' + settings.gradients[i].colors[1] + ']"]').val());
if (color_start && color_end) {
delta = [];
for (var j in color_start) {
diff --git a/core/modules/color/templates/color-scheme-form.html.twig b/core/modules/color/templates/color-scheme-form.html.twig
index 3c6fdd093659405fdbca02511bb466a4371a0a88..694c6f726afaac45c1d0bb40dddcff53028cffd7 100644
--- a/core/modules/color/templates/color-scheme-form.html.twig
+++ b/core/modules/color/templates/color-scheme-form.html.twig
@@ -17,7 +17,7 @@
#}
<div class="color-form clearfix">
{{ form.scheme }}
- <div class="clearfix color-palette js-color-palette">
+ <div id="palette" class="clearfix">
{{ form.palette }}
</div>
{{ form|without('scheme', 'palette') }}
diff --git a/core/themes/bartik/color/preview.css b/core/themes/bartik/color/preview.css
index 8c5f59169c4699ed2b9d8d46a7b3ef6f9b0fdb07..18af7f22a8cf89d249944d40f1cb158c6ecca25e 100644
--- a/core/themes/bartik/color/preview.css
+++ b/core/themes/bartik/color/preview.css
@@ -1,9 +1,9 @@
/* ---------- Preview Styles ----------- */
-.js .color-preview {
+.js #preview {
clear: both;
float: none !important;
}
-.color-preview {
+#preview {
background-color: #fff;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
@@ -12,15 +12,15 @@
word-wrap: break-word;
margin-bottom: 10px;
}
-.color-preview-header {
+#preview-header {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
position: relative;
}
-.color-preview-logo {
+#preview-logo {
float: left;
padding: 15px;
}
-.color-preview-site-name {
+#preview-site-name {
color: #686868;
font-weight: normal;
font-size: 1.821em;
@@ -29,24 +29,24 @@
margin-left: 15px; /* LTR */
padding-top: 34px;
}
-[dir="rtl"] .color-preview-site-name {
+[dir="rtl"] #preview-site-name {
margin-left: 0;
margin-right: 15px;
}
-.color-preview-main-menu {
+#preview-main-menu {
clear: both;
padding: 0 15px 3px;
}
-.color-preview-main-menu-links a {
+#preview-main-menu-links a {
color: #d9d9d9;
padding: 0.6em 1em 0.4em;
}
-.color-preview-main-menu-links {
+#preview-main-menu-links {
font-size: 0.929em;
margin: 0;
padding: 0;
}
-.color-preview-main-menu-links a {
+#preview-main-menu-links a {
color: #333;
background: #ccc;
background: rgba(255, 255, 255, 0.7);
@@ -54,54 +54,54 @@
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
-.color-preview-main-menu-links a:hover,
-.color-preview-main-menu-links a:focus {
+#preview-main-menu-links a:hover,
+#preview-main-menu-links a:focus {
background: #eee;
background: rgba(255, 255, 255, 0.95);
text-decoration: none;
cursor: pointer;
}
-.color-preview-main-menu-links li a.is-active {
+#preview-main-menu-links li a.is-active {
background: #fff;
border-bottom: none;
}
-.color-preview-main-menu-links li {
+#preview-main-menu-links li {
display: inline;
list-style-type: none;
padding: 0.6em 0 0.4em;
}
-.color-preview-sidebar,
-.color-preview-content {
+#preview-sidebar,
+#preview-content {
display: inline;
float: left; /* LTR */
position: relative;
}
-[dir="rtl"] .color-preview-sidebar,
-[dir="rtl"] .color-preview-content {
+[dir="rtl"] #preview-sidebar,
+[dir="rtl"] #preview-content {
float: right;
}
-.color-preview-sidebar {
+#preview-sidebar {
margin-left: 15px; /* LTR */
width: 210px;
}
-[dir="rtl"] .color-preview-sidebar {
+[dir="rtl"] #preview-sidebar {
margin-left: 0;
margin-right: 15px;
}
-.color-preview-content {
+#preview-content {
margin-left: 30px; /* LTR */
width: 26.5em;
}
-[dir="rtl"] .color-preview-content {
+[dir="rtl"] #preview-content {
margin-left: 0;
margin-right: 30px;
}
-.color-preview-sidebar .preview-block {
+#preview-sidebar .preview-block {
border: 1px solid;
margin: 20px 0;
padding: 15px 20px;
}
-.color-preview-sidebar h2 {
+#preview-sidebar h2 {
border-bottom: 1px solid #d6d6d6;
font-size: 1.071em;
font-weight: normal;
@@ -110,62 +110,62 @@
padding-bottom: 5px;
text-shadow: 0 1px 0 #fff;
}
-.color-preview .preview-block .preview-content {
+#preview .preview-block .preview-content {
margin-top: 1em;
}
-.color-preview .preview-block-menu .preview-content,
-.color-preview .preview-block-menu .preview-content ul {
+#preview .preview-block-menu .preview-content,
+#preview .preview-block-menu .preview-content ul {
margin-top: 0;
}
-.color-preview-main {
+#preview-main {
margin-bottom: 40px;
margin-top: 20px;
}
-.color-preview-page-title {
+#preview-page-title {
font-size: 2em;
font-weight: normal;
line-height: 1;
margin: 1em 0 0.5em;
}
-.color-preview-footer-wrapper {
+#preview-footer-wrapper {
color: #c0c0c0;
color: rgba(255, 255, 255, 0.65);
display: block !important;
font-size: 0.857em;
padding: 20px 20px 25px;
}
-.color-preview-footer-wrapper a {
+#preview-footer-wrapper a {
color: #fcfcfc;
color: rgba(255, 255, 255, 0.8);
}
-.color-preview-footer-wrapper a:hover,
-.color-preview-footer-wrapper a:focus {
+#preview-footer-wrapper a:hover,
+#preview-footer-wrapper a:focus {
color: #fefefe;
color: rgba(255, 255, 255, 0.95);
text-decoration: underline;
}
-.color-preview-footer-wrapper .preview-footer-column {
+#preview-footer-wrapper .preview-footer-column {
display: inline;
float: left; /* LTR */
padding: 0 10px;
position: relative;
width: 220px;
}
-[dir="rtl"] .color-preview-footer-wrapper .preview-footer-column {
+[dir="rtl"] #preview-footer-wrapper .preview-footer-column {
float: right;
}
-.color-preview-footer-wrapper .preview-block {
+#preview-footer-wrapper .preview-block {
border: 1px solid #444;
border-color: rgba(255, 255, 255, 0.1);
margin: 20px 0;
padding: 10px;
}
-.color-preview-footer-columns .preview-block-menu {
+#preview-footer-columns .preview-block-menu {
border: none;
margin: 0;
padding: 0;
}
-.color-preview-footer-columns h2 {
+#preview-footer-columns h2 {
border-bottom: 1px solid #555;
border-color: rgba(255, 255, 255, 0.15);
font-size: 1em;
@@ -173,24 +173,24 @@
padding-bottom: 3px;
text-transform: uppercase;
}
-.color-preview-footer-columns .preview-content {
+#preview-footer-columns .preview-content {
margin-top: 0;
}
-.color-preview-footer-columns .preview-content ul {
+#preview-footer-columns .preview-content ul {
margin-left: 0; /* LTR */
padding-left: 0; /* LTR */
}
-[dir="rtl"] .color-preview-footer-columns .preview-content ul {
+[dir="rtl"] #preview-footer-columns .preview-content ul {
margin-right: 0;
padding-right: 0;
}
-.color-preview-footer-columns .preview-content li {
+#preview-footer-columns .preview-content li {
list-style: none;
list-style-image: none;
margin: 0;
padding: 0;
}
-.color-preview-footer-columns .preview-content li a {
+#preview-footer-columns .preview-content li a {
border-bottom: 1px solid #555;
border-color: rgba(255, 255, 255, 0.15);
display: block;
@@ -198,12 +198,12 @@
padding: 0.8em 2px 0.8em 20px; /* LTR */
text-indent: -15px;
}
-[dir="rtl"] .color-preview-footer-columns .preview-content li a {
+[dir="rtl"] #preview-footer-columns .preview-content li a {
padding-left: 2px;
padding-right: 20px;
}
-.color-preview-footer-columns .preview-content li a:hover,
-.color-preview-footer-columns .preview-content li a:focus {
+#preview-footer-columns .preview-content li a:hover,
+#preview-footer-columns .preview-content li a:focus {
background-color: #1f1f21;
background-color: rgba(255, 255, 255, 0.05);
text-decoration: none;
diff --git a/core/themes/bartik/color/preview.html b/core/themes/bartik/color/preview.html
index 7031b08945dc4a91ed3e88d35128ad0460a9833e..39600391304ce9ec7f960d893040b31be34cd53e 100644
--- a/core/themes/bartik/color/preview.html
+++ b/core/themes/bartik/color/preview.html
@@ -1,10 +1,10 @@
-<div class="color-preview">
+<div id="preview">
- <div class="color-preview-header">
- <div class="color-preview-logo"><img src="../../../core/themes/bartik/logo.svg" alt="Site Logo" /></div>
- <div class="color-preview-site-name">Bartik</div>
- <div class="color-preview-main-menu">
- <ul class="color-preview-main-menu-links">
+ <div id="preview-header">
+ <div id="preview-logo"><img src="../../../core/themes/bartik/logo.svg" alt="Site Logo" /></div>
+ <div id="preview-site-name">Bartik</div>
+ <div id="preview-main-menu">
+ <ul id="preview-main-menu-links">
<li><a>Home</a></li>
<li><a>Te Quidne</a></li>
<li><a>Vel Torqueo Quae Erat</a></li>
@@ -12,9 +12,9 @@
</div>
</div>
- <div class="color-preview-main clearfix">
- <div class="color-preview-sidebar">
- <div class="color-preview-block preview-block">
+ <div id="preview-main" class="clearfix">
+ <div id="preview-sidebar">
+ <div id="preview-block" class="preview-block">
<h2>Etiam est risus</h2>
<div class="preview-content">
Maecenas id porttitor Ut enim ad minim veniam, quis nostrudfelis.
@@ -22,9 +22,9 @@ <h2>Etiam est risus</h2>
</div>
</div>
</div>
- <div class="color-preview-content">
- <h1 class="color-preview-page-title">Lorem ipsum dolor</h1>
- <div class="color-preview-node">
+ <div id="preview-content">
+ <h1 id="preview-page-title">Lorem ipsum dolor</h1>
+ <div id="preview-node">
<div class="preview-content">
Sit amet, <a>consectetur adipisicing elit</a>, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
@@ -35,8 +35,8 @@ <h1 class="color-preview-page-title">Lorem ipsum dolor</h1>
</div>
</div>
- <div class="color-preview-footer-wrapper">
- <div class="color-preview-footer-columns clearfix">
+ <div id="preview-footer-wrapper">
+ <div id="preview-footer-columns" class="clearfix">
<div class="preview-footer-column">
<div class="preview-block">
<h2>Etiam est risus</h2>
diff --git a/core/themes/bartik/color/preview.js b/core/themes/bartik/color/preview.js
index 7520f299e18236a6d850a60308898b77b6e05309..b9fb4d1299f5f20d2d329126b08e11a8d3cf0bcc 100644
--- a/core/themes/bartik/color/preview.js
+++ b/core/themes/bartik/color/preview.js
@@ -11,35 +11,35 @@
callback: function (context, settings, form, farb, height, width) {
// Change the logo to be the real one.
if (!this.logoChanged) {
- $('.color-preview .color-preview-logo img').attr('src', drupalSettings.color.logo);
+ $('#preview #preview-logo img').attr('src', drupalSettings.color.logo);
this.logoChanged = true;
}
// Remove the logo if the setting is toggled off.
if (drupalSettings.color.logo === null) {
- $('div').remove('.color-preview-logo');
+ $('div').remove('#preview-logo');
}
// Solid background.
- form.find('.color-preview').css('backgroundColor', $('.js-color-palette input[name="palette[bg]"]').val());
+ form.find('#preview').css('backgroundColor', $('#palette input[name="palette[bg]"]').val());
// Text preview.
- form.find('.color-preview .color-preview-main h2, .color-preview .preview-content').css('color', form.find('.js-color-palette input[name="palette[text]"]').val());
- form.find('.color-preview .color-preview-content a').css('color', form.find('.js-color-palette input[name="palette[link]"]').val());
+ form.find('#preview #preview-main h2, #preview .preview-content').css('color', form.find('#palette input[name="palette[text]"]').val());
+ form.find('#preview #preview-content a').css('color', form.find('#palette input[name="palette[link]"]').val());
// Sidebar block.
- form.find('.color-preview .color-preview-sidebar .color-preview-block').css('background-color', form.find('.js-color-palette input[name="palette[sidebar]"]').val());
- form.find('.color-preview .color-preview-sidebar .color-preview-block').css('border-color', form.find('.js-color-palette input[name="palette[sidebarborders]"]').val());
+ form.find('#preview #preview-sidebar #preview-block').css('background-color', form.find('#palette input[name="palette[sidebar]"]').val());
+ form.find('#preview #preview-sidebar #preview-block').css('border-color', form.find('#palette input[name="palette[sidebarborders]"]').val());
// Footer wrapper background.
- form.find('.color-preview .color-preview-footer-wrapper', form).css('background-color', form.find('.js-color-palette input[name="palette[footer]"]').val());
+ form.find('#preview #preview-footer-wrapper', form).css('background-color', form.find('#palette input[name="palette[footer]"]').val());
// CSS3 Gradients.
- var gradient_start = form.find('.js-color-palette input[name="palette[top]"]').val();
- var gradient_end = form.find('.js-color-palette input[name="palette[bottom]"]').val();
+ var gradient_start = form.find('#palette input[name="palette[top]"]').val();
+ var gradient_end = form.find('#palette input[name="palette[bottom]"]').val();
- form.find('.color-preview .color-preview-header').attr('style', "background-color: " + gradient_start + "; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(" + gradient_start + "), to(" + gradient_end + ")); background-image: -moz-linear-gradient(-90deg, " + gradient_start + ", " + gradient_end + ");");
+ form.find('#preview #preview-header').attr('style', "background-color: " + gradient_start + "; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(" + gradient_start + "), to(" + gradient_end + ")); background-image: -moz-linear-gradient(-90deg, " + gradient_start + ", " + gradient_end + ");");
- form.find('.color-preview .color-preview-site-name').css('color', form.find('.js-color-palette input[name="palette[titleslogan]"]').val());
+ form.find('#preview #preview-site-name').css('color', form.find('#palette input[name="palette[titleslogan]"]').val());
}
};
})(jQuery, Drupal, drupalSettings);
diff --git a/core/themes/bartik/css/colors.css b/core/themes/bartik/css/colors.css
index d56f24b38e50be46744a5218b4e698c9ff552483..b27b1088da3803be27b544ebeb4159bdb0951a1b 100644
--- a/core/themes/bartik/css/colors.css
+++ b/core/themes/bartik/css/colors.css
@@ -56,14 +56,14 @@ a:active,
/* ---------- Color Form ----------- */
-[dir="rtl"] .color-form .color-palette {
+[dir="rtl"] .color-form #palette {
margin-left: 0;
margin-right: 20px;
}
[dir="rtl"] .color-form .form-item label {
float: right;
}
-[dir="rtl"] .color-form .color-palette .lock {
+[dir="rtl"] .color-form #palette .lock {
right: -20px;
left: 0;
}