Skip to content
Snippets Groups Projects
Commit f990ca63 authored by Alex Pott's avatar Alex Pott
Browse files

Revert "Issue #2470069 by wadmiraal, Manjit.Singh, pjbaert, zakxxi,... 

Revert "Issue #2470069 by wadmiraal, Manjit.Singh, pjbaert, zakxxi, LewisNyman: Refactor color module CSS inline with our CSS standards"

This reverts commit 1ea7b90a.
parent 1ea7b90a
No related branches found
No related tags found
2 merge requests!7452Issue #1797438. HTML5 validation is preventing form submit and not fully...,!789Issue #3210310: Adjust Database API to remove deprecated Drupal 9 code in Drupal 10
Hide whitespace changes
Inline Side-by-side
Showing
with 126 additions and 139 deletions
core/modules/color/color.js
+ 17
− 17
View file @ f990ca63
...@@ -23,8 +23,8 @@ ...@@ -23,8 +23,8 @@
var focused = null; var focused = null;
// Add Farbtastic. // Add Farbtastic.
$('<div class="color-placeholder"></div>').once('color').prependTo(form); $('<div id="placeholder"></div>').once('color').prependTo(form);
var farb = $.farbtastic('.color-placeholder'); var farb = $.farbtastic('#placeholder');
// Decode reference colors to HSL. // Decode reference colors to HSL.
var reference = settings.color.reference; var reference = settings.color.reference;
...@@ -41,8 +41,8 @@ ...@@ -41,8 +41,8 @@
for (i in settings.gradients) { for (i in settings.gradients) {
if (settings.gradients.hasOwnProperty(i)) { if (settings.gradients.hasOwnProperty(i)) {
// Add element to display the gradient. // Add element to display the gradient.
$('.color-preview').once('color').append('<div id="gradient-' + i + '"></div>'); $('#preview').once('color').append('<div id="gradient-' + i + '"></div>');
var gradient = $('.color-preview #gradient-' + i); var gradient = $('#preview #gradient-' + i);
// Add height of current gradient to the list (divided by 10). // Add height of current gradient to the list (divided by 10).
height.push(parseInt(gradient.css('height'), 10) / 10); height.push(parseInt(gradient.css('height'), 10) / 10);
// Add width of current gradient to the list (divided by 10). // Add width of current gradient to the list (divided by 10).
...@@ -146,14 +146,14 @@ ...@@ -146,14 +146,14 @@
if (propagate) { if (propagate) {
i = input.i; i = input.i;
for (j = i + 1; ; ++j) { 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; break;
} }
matched = shift_color(color, reference[input.key], reference[inputs[j].key]); matched = shift_color(color, reference[input.key], reference[inputs[j].key]);
callback(inputs[j], matched, false); callback(inputs[j], matched, false);
} }
for (j = i - 1; ; --j) { for (j = i - 1; ; --j) {
if (!locks[j] || $(locks[j]).is('.is-unlocked')) { if (!locks[j] || $(locks[j]).is('.unlocked')) {
break; break;
} }
matched = shift_color(color, reference[input.key], reference[inputs[j].key]); matched = shift_color(color, reference[input.key], reference[inputs[j].key]);
...@@ -201,7 +201,7 @@ ...@@ -201,7 +201,7 @@
} }
// Initialize color fields. // Initialize color fields.
form.find('.js-color-palette input.form-text') form.find('#palette input.form-text')
.each(function () { .each(function () {
// Extract palette field name // Extract palette field name
this.key = this.id.substring(13); this.key = this.id.substring(13);
...@@ -213,24 +213,24 @@ ...@@ -213,24 +213,24 @@
i = inputs.length; i = inputs.length;
if (inputs.length) { if (inputs.length) {
var toggleClick = true; 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(); e.preventDefault();
if (toggleClick) { if (toggleClick) {
$(this).addClass('is-unlocked').html(Drupal.t('Lock')); $(this).addClass('unlocked').html(Drupal.t('Lock'));
$(hooks[i - 1]).attr('class', $(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', $(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 { else {
$(this).removeClass('is-unlocked').html(Drupal.t('Unlock')); $(this).removeClass('unlocked').html(Drupal.t('Unlock'));
$(hooks[i - 1]).attr('class', $(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', $(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; toggleClick = !toggleClick;
...@@ -240,17 +240,17 @@ ...@@ -240,17 +240,17 @@
} }
// Add hook. // Add hook.
var hook = $('<div class="color-palette__hook"></div>'); var hook = $('<div class="hook"></div>');
$(this).after(hook); $(this).after(hook);
hooks.push(hook); hooks.push(hook);
$(this).parent().find('.color-palette__lock').trigger('click'); $(this).parent().find('.lock').trigger('click');
this.i = i; this.i = i;
inputs.push(this); inputs.push(this);
}) })
.on('focus', focus); .on('focus', focus);
form.find('.js-color-palette label'); form.find('#palette label');
// Focus first color. // Focus first color.
inputs[0].focus(); inputs[0].focus();
......
core/modules/color/css/color.admin.css
+ 27
− 40
View file @ f990ca63
...@@ -9,9 +9,8 @@ ...@@ -9,9 +9,8 @@
margin: 0 auto; margin: 0 auto;
} }
.color-form .form-item { .color-form .form-item {
overflow: hidden;
margin: 0.5em 0; margin: 0.5em 0;
height: 2em;
padding: 0.5em;
} }
.color-form label { .color-form label {
clear: left; /* LTR */ clear: left; /* LTR */
...@@ -28,68 +27,57 @@ ...@@ -28,68 +27,57 @@
[dir="rtl"] .color-form .form-text { [dir="rtl"] .color-form .form-text {
float: right; float: right;
} }
.color-palette__hook { #palette .hook {
float: left; /* LTR */ float: left; /* LTR */
width: 16px; width: 16px;
height: 16px; height: 16px;
} }
[dir="rtl"] .color-palette__hook { [dir="rtl"] #palette .hook {
float: right; float: right;
} }
.color-palette__hook.is-down, #palette .down,
.color-palette__hook.is-up, #palette .up,
.color-palette__hook.is-both { #palette .both {
background: url(../images/hook.png) no-repeat 100% 0; /* LTR */ background: url(../images/hook.png) no-repeat 100% 0; /* LTR */
} }
[dir="rtl"] .color-palette__hook.is-down, [dir="rtl"] #palette .down,
[dir="rtl"] .color-palette__hook.is-up, [dir="rtl"] #palette .up,
[dir="rtl"] .color-palette__hook.is-both { [dir="rtl"] #palette .both {
background: url(../images/hook-rtl.png) no-repeat 0 0; background: url(../images/hook-rtl.png) no-repeat 0 0;
} }
.color-palette__hook.is-up { #palette .up {
background-position: 100% -27px; /* LTR */ background-position: 100% -27px; /* LTR */
} }
[dir="rtl"] .color-palette__hook.is-up { [dir="rtl"] #palette .up {
background-position: 0 -27px; background-position: 0 -27px;
} }
.color-palette__hook.is-both { #palette .both {
background-position: 100% -54px; /* LTR */ background-position: 100% -54px; /* LTR */
} }
[dir="rtl"] .color-palette__hook.is-both { [dir="rtl"] #palette .both {
background-position: 0 -54px; background-position: 0 -54px;
} }
/** #palette .lock {
* The button also inherits from .link, which hides the background. Use a more
* specific selector to overwrite.
*/
button.color-palette__lock,
.color-palette__lock {
float: left; /* LTR */ float: left; /* LTR */
width: 20px; width: 20px;
height: 19px; height: 19px;
background: url(../images/lock.png) no-repeat 50% 0; background: url(../images/lock.png) no-repeat 50% 0;
cursor: pointer; cursor: pointer;
position: relative;
top: -1.7em;
left: -10px;
direction: ltr;
text-indent: -9999px; text-indent: -9999px;
} }
[dir="rtl"] .color-palette__lock { [dir="rtl"] #palette .lock {
float: right; float: right;
} }
/* Same as above .color-palette__lock rule. */ #palette .unlocked {
button.is-unlocked,
.is-unlocked {
background-position: 50% -22px; background-position: 50% -22px;
} }
/* wide viewport. */ /* wide viewport. */
@media screen and (min-width: 37.5625em) { /* 601px */ @media screen and (min-width: 37.5625em) { /* 601px */
.color-placeholder { #placeholder {
float: right; /* LTR */ float: right; /* LTR */
} }
[dir="rtl"] .color-placeholder { [dir="rtl"] #placeholder {
float: left; float: left;
} }
.color-form .form-item { .color-form .form-item {
...@@ -116,18 +104,17 @@ button.is-unlocked, ...@@ -116,18 +104,17 @@ button.is-unlocked,
[dir="rtl"] .color-form .form-select { [dir="rtl"] .color-form .form-select {
float: right; float: right;
} }
.color-palette__hook { #palette .hook {
float: left; /* LTR */ float: left; /* LTR */
margin-top: 3px; margin-top: 3px;
} }
[dir="rtl"] .color-palette__hook { [dir="rtl"] #palette .hook {
float: right; float: right;
} }
button.color-palette__lock, #palette .lock {
.color-palette__lock {
float: left; /* LTR */ float: left; /* LTR */
} }
[dir="rtl"] .color-palette__lock { [dir="rtl"] #palette .lock {
float: right; float: right;
} }
} }
...@@ -136,20 +123,20 @@ button.is-unlocked, ...@@ -136,20 +123,20 @@ button.is-unlocked,
} }
/* Preview */ /* Preview */
.color-preview { #preview {
display: none; display: none;
} }
.js .color-preview { .js #preview {
display: block; display: block;
position: relative; position: relative;
float: left; /* LTR */ float: left; /* LTR */
} }
.js[dir="rtl"] .color-preview { .js[dir="rtl"] #preview {
float: right; float: right;
} }
@media screen and (max-width: 30em) { /* 480px */ @media screen and (max-width: 30em) { /* 480px */
.color-form .color-preview-sidebar, .color-form #preview-sidebar,
.color-form .color-preview-content { .color-form #preview-content {
width: auto; width: auto;
margin: 0; margin: 0;
} }
......
core/modules/color/preview.html
+ 2
− 2
View file @ f990ca63
<div class="color-preview"> <div id="preview">
<div id="text"> <div id="text">
<h2>Lorem ipsum dolor</h2> <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> <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>
<div id="img"></div> <div id="img"></div>
</div> </div>
\ No newline at end of file
core/modules/color/preview.js
+ 5
− 5
View file @ f990ca63
...@@ -12,11 +12,11 @@ ...@@ -12,11 +12,11 @@
var accum; var accum;
var delta; var delta;
// Solid background. // 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 // Text preview
form.find('#text').css('color', form.find('.color-palette input[name="palette[text]"]').val()); form.find('#text').css('color', form.find('#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 a, #text h2').css('color', form.find('#palette input[name="palette[link]"]').val());
function gradientLineColor(i, element) { function gradientLineColor(i, element) {
for (var k in accum) { for (var k in accum) {
...@@ -32,8 +32,8 @@ ...@@ -32,8 +32,8 @@
var color_end; var color_end;
for (var i in settings.gradients) { for (var i in settings.gradients) {
if (settings.gradients.hasOwnProperty(i)) { if (settings.gradients.hasOwnProperty(i)) {
color_start = farb.unpack(form.find('.color-palette input[name="palette[' + settings.gradients[i].colors[0] + ']"]').val()); color_start = farb.unpack(form.find('#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_end = farb.unpack(form.find('#palette input[name="palette[' + settings.gradients[i].colors[1] + ']"]').val());
if (color_start && color_end) { if (color_start && color_end) {
delta = []; delta = [];
for (var j in color_start) { for (var j in color_start) {
......
core/modules/color/templates/color-scheme-form.html.twig
+ 1
− 1
View file @ f990ca63
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
#} #}
<div class="color-form clearfix"> <div class="color-form clearfix">
{{ form.scheme }} {{ form.scheme }}
<div class="clearfix color-palette js-color-palette"> <div id="palette" class="clearfix">
{{ form.palette }} {{ form.palette }}
</div> </div>
{{ form|without('scheme', 'palette') }} {{ form|without('scheme', 'palette') }}
......
core/themes/bartik/color/preview.css
+ 46
− 46
View file @ f990ca63
/* ---------- Preview Styles ----------- */ /* ---------- Preview Styles ----------- */
.js .color-preview { .js #preview {
clear: both; clear: both;
float: none !important; float: none !important;
} }
.color-preview { #preview {
background-color: #fff; background-color: #fff;
font-family: Georgia, "Times New Roman", Times, serif; font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px; font-size: 14px;
...@@ -12,15 +12,15 @@ ...@@ -12,15 +12,15 @@
word-wrap: break-word; word-wrap: break-word;
margin-bottom: 10px; margin-bottom: 10px;
} }
.color-preview-header { #preview-header {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
position: relative; position: relative;
} }
.color-preview-logo { #preview-logo {
float: left; float: left;
padding: 15px; padding: 15px;
} }
.color-preview-site-name { #preview-site-name {
color: #686868; color: #686868;
font-weight: normal; font-weight: normal;
font-size: 1.821em; font-size: 1.821em;
...@@ -29,24 +29,24 @@ ...@@ -29,24 +29,24 @@
margin-left: 15px; /* LTR */ margin-left: 15px; /* LTR */
padding-top: 34px; padding-top: 34px;
} }
[dir="rtl"] .color-preview-site-name { [dir="rtl"] #preview-site-name {
margin-left: 0; margin-left: 0;
margin-right: 15px; margin-right: 15px;
} }
.color-preview-main-menu { #preview-main-menu {
clear: both; clear: both;
padding: 0 15px 3px; padding: 0 15px 3px;
} }
.color-preview-main-menu-links a { #preview-main-menu-links a {
color: #d9d9d9; color: #d9d9d9;
padding: 0.6em 1em 0.4em; padding: 0.6em 1em 0.4em;
} }
.color-preview-main-menu-links { #preview-main-menu-links {
font-size: 0.929em; font-size: 0.929em;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.color-preview-main-menu-links a { #preview-main-menu-links a {
color: #333; color: #333;
background: #ccc; background: #ccc;
background: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.7);
...@@ -54,54 +54,54 @@ ...@@ -54,54 +54,54 @@
border-top-left-radius: 8px; border-top-left-radius: 8px;
border-top-right-radius: 8px; border-top-right-radius: 8px;
} }
.color-preview-main-menu-links a:hover, #preview-main-menu-links a:hover,
.color-preview-main-menu-links a:focus { #preview-main-menu-links a:focus {
background: #eee; background: #eee;
background: rgba(255, 255, 255, 0.95); background: rgba(255, 255, 255, 0.95);
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
} }
.color-preview-main-menu-links li a.is-active { #preview-main-menu-links li a.is-active {
background: #fff; background: #fff;
border-bottom: none; border-bottom: none;
} }
.color-preview-main-menu-links li { #preview-main-menu-links li {
display: inline; display: inline;
list-style-type: none; list-style-type: none;
padding: 0.6em 0 0.4em; padding: 0.6em 0 0.4em;
} }
.color-preview-sidebar, #preview-sidebar,
.color-preview-content { #preview-content {
display: inline; display: inline;
float: left; /* LTR */ float: left; /* LTR */
position: relative; position: relative;
} }
[dir="rtl"] .color-preview-sidebar, [dir="rtl"] #preview-sidebar,
[dir="rtl"] .color-preview-content { [dir="rtl"] #preview-content {
float: right; float: right;
} }
.color-preview-sidebar { #preview-sidebar {
margin-left: 15px; /* LTR */ margin-left: 15px; /* LTR */
width: 210px; width: 210px;
} }
[dir="rtl"] .color-preview-sidebar { [dir="rtl"] #preview-sidebar {
margin-left: 0; margin-left: 0;
margin-right: 15px; margin-right: 15px;
} }
.color-preview-content { #preview-content {
margin-left: 30px; /* LTR */ margin-left: 30px; /* LTR */
width: 26.5em; width: 26.5em;
} }
[dir="rtl"] .color-preview-content { [dir="rtl"] #preview-content {
margin-left: 0; margin-left: 0;
margin-right: 30px; margin-right: 30px;
} }
.color-preview-sidebar .preview-block { #preview-sidebar .preview-block {
border: 1px solid; border: 1px solid;
margin: 20px 0; margin: 20px 0;
padding: 15px 20px; padding: 15px 20px;
} }
.color-preview-sidebar h2 { #preview-sidebar h2 {
border-bottom: 1px solid #d6d6d6; border-bottom: 1px solid #d6d6d6;
font-size: 1.071em; font-size: 1.071em;
font-weight: normal; font-weight: normal;
...@@ -110,62 +110,62 @@ ...@@ -110,62 +110,62 @@
padding-bottom: 5px; padding-bottom: 5px;
text-shadow: 0 1px 0 #fff; text-shadow: 0 1px 0 #fff;
} }
.color-preview .preview-block .preview-content { #preview .preview-block .preview-content {
margin-top: 1em; margin-top: 1em;
} }
.color-preview .preview-block-menu .preview-content, #preview .preview-block-menu .preview-content,
.color-preview .preview-block-menu .preview-content ul { #preview .preview-block-menu .preview-content ul {
margin-top: 0; margin-top: 0;
} }
.color-preview-main { #preview-main {
margin-bottom: 40px; margin-bottom: 40px;
margin-top: 20px; margin-top: 20px;
} }
.color-preview-page-title { #preview-page-title {
font-size: 2em; font-size: 2em;
font-weight: normal; font-weight: normal;
line-height: 1; line-height: 1;
margin: 1em 0 0.5em; margin: 1em 0 0.5em;
} }
.color-preview-footer-wrapper { #preview-footer-wrapper {
color: #c0c0c0; color: #c0c0c0;
color: rgba(255, 255, 255, 0.65); color: rgba(255, 255, 255, 0.65);
display: block !important; display: block !important;
font-size: 0.857em; font-size: 0.857em;
padding: 20px 20px 25px; padding: 20px 20px 25px;
} }
.color-preview-footer-wrapper a { #preview-footer-wrapper a {
color: #fcfcfc; color: #fcfcfc;
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.8);
} }
.color-preview-footer-wrapper a:hover, #preview-footer-wrapper a:hover,
.color-preview-footer-wrapper a:focus { #preview-footer-wrapper a:focus {
color: #fefefe; color: #fefefe;
color: rgba(255, 255, 255, 0.95); color: rgba(255, 255, 255, 0.95);
text-decoration: underline; text-decoration: underline;
} }
.color-preview-footer-wrapper .preview-footer-column { #preview-footer-wrapper .preview-footer-column {
display: inline; display: inline;
float: left; /* LTR */ float: left; /* LTR */
padding: 0 10px; padding: 0 10px;
position: relative; position: relative;
width: 220px; width: 220px;
} }
[dir="rtl"] .color-preview-footer-wrapper .preview-footer-column { [dir="rtl"] #preview-footer-wrapper .preview-footer-column {
float: right; float: right;
} }
.color-preview-footer-wrapper .preview-block { #preview-footer-wrapper .preview-block {
border: 1px solid #444; border: 1px solid #444;
border-color: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.1);
margin: 20px 0; margin: 20px 0;
padding: 10px; padding: 10px;
} }
.color-preview-footer-columns .preview-block-menu { #preview-footer-columns .preview-block-menu {
border: none; border: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.color-preview-footer-columns h2 { #preview-footer-columns h2 {
border-bottom: 1px solid #555; border-bottom: 1px solid #555;
border-color: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.15);
font-size: 1em; font-size: 1em;
...@@ -173,24 +173,24 @@ ...@@ -173,24 +173,24 @@
padding-bottom: 3px; padding-bottom: 3px;
text-transform: uppercase; text-transform: uppercase;
} }
.color-preview-footer-columns .preview-content { #preview-footer-columns .preview-content {
margin-top: 0; margin-top: 0;
} }
.color-preview-footer-columns .preview-content ul { #preview-footer-columns .preview-content ul {
margin-left: 0; /* LTR */ margin-left: 0; /* LTR */
padding-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; margin-right: 0;
padding-right: 0; padding-right: 0;
} }
.color-preview-footer-columns .preview-content li { #preview-footer-columns .preview-content li {
list-style: none; list-style: none;
list-style-image: none; list-style-image: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.color-preview-footer-columns .preview-content li a { #preview-footer-columns .preview-content li a {
border-bottom: 1px solid #555; border-bottom: 1px solid #555;
border-color: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.15);
display: block; display: block;
...@@ -198,12 +198,12 @@ ...@@ -198,12 +198,12 @@
padding: 0.8em 2px 0.8em 20px; /* LTR */ padding: 0.8em 2px 0.8em 20px; /* LTR */
text-indent: -15px; 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-left: 2px;
padding-right: 20px; padding-right: 20px;
} }
.color-preview-footer-columns .preview-content li a:hover, #preview-footer-columns .preview-content li a:hover,
.color-preview-footer-columns .preview-content li a:focus { #preview-footer-columns .preview-content li a:focus {
background-color: #1f1f21; background-color: #1f1f21;
background-color: rgba(255, 255, 255, 0.05); background-color: rgba(255, 255, 255, 0.05);
text-decoration: none; text-decoration: none;
......
core/themes/bartik/color/preview.html
+ 14
− 14
View file @ f990ca63
<div class="color-preview"> <div id="preview">
<div class="color-preview-header"> <div id="preview-header">
<div class="color-preview-logo"><img src="../../../core/themes/bartik/logo.svg" alt="Site Logo" /></div> <div id="preview-logo"><img src="../../../core/themes/bartik/logo.svg" alt="Site Logo" /></div>
<div class="color-preview-site-name">Bartik</div> <div id="preview-site-name">Bartik</div>
<div class="color-preview-main-menu"> <div id="preview-main-menu">
<ul class="color-preview-main-menu-links"> <ul id="preview-main-menu-links">
<li><a>Home</a></li> <li><a>Home</a></li>
<li><a>Te Quidne</a></li> <li><a>Te Quidne</a></li>
<li><a>Vel Torqueo Quae Erat</a></li> <li><a>Vel Torqueo Quae Erat</a></li>
...@@ -12,9 +12,9 @@ ...@@ -12,9 +12,9 @@
</div> </div>
</div> </div>
<div class="color-preview-main clearfix"> <div id="preview-main" class="clearfix">
<div class="color-preview-sidebar"> <div id="preview-sidebar">
<div class="color-preview-block preview-block"> <div id="preview-block" class="preview-block">
<h2>Etiam est risus</h2> <h2>Etiam est risus</h2>
<div class="preview-content"> <div class="preview-content">
Maecenas id porttitor Ut enim ad minim veniam, quis nostrudfelis. Maecenas id porttitor Ut enim ad minim veniam, quis nostrudfelis.
...@@ -22,9 +22,9 @@ <h2>Etiam est risus</h2> ...@@ -22,9 +22,9 @@ <h2>Etiam est risus</h2>
</div> </div>
</div> </div>
</div> </div>
<div class="color-preview-content"> <div id="preview-content">
<h1 class="color-preview-page-title">Lorem ipsum dolor</h1> <h1 id="preview-page-title">Lorem ipsum dolor</h1>
<div class="color-preview-node"> <div id="preview-node">
<div class="preview-content"> <div class="preview-content">
Sit amet, <a>consectetur adipisicing elit</a>, sed do eiusmod tempor Sit amet, <a>consectetur adipisicing elit</a>, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 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> ...@@ -35,8 +35,8 @@ <h1 class="color-preview-page-title">Lorem ipsum dolor</h1>
</div> </div>
</div> </div>
<div class="color-preview-footer-wrapper"> <div id="preview-footer-wrapper">
<div class="color-preview-footer-columns clearfix"> <div id="preview-footer-columns" class="clearfix">
<div class="preview-footer-column"> <div class="preview-footer-column">
<div class="preview-block"> <div class="preview-block">
<h2>Etiam est risus</h2> <h2>Etiam est risus</h2>
......
core/themes/bartik/color/preview.js
+ 12
− 12
View file @ f990ca63
...@@ -11,35 +11,35 @@ ...@@ -11,35 +11,35 @@
callback: function (context, settings, form, farb, height, width) { callback: function (context, settings, form, farb, height, width) {
// Change the logo to be the real one. // Change the logo to be the real one.
if (!this.logoChanged) { 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; this.logoChanged = true;
} }
// Remove the logo if the setting is toggled off. // Remove the logo if the setting is toggled off.
if (drupalSettings.color.logo === null) { if (drupalSettings.color.logo === null) {
$('div').remove('.color-preview-logo'); $('div').remove('#preview-logo');
} }
// Solid background. // 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. // 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('#preview #preview-main h2, #preview .preview-content').css('color', form.find('#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-content a').css('color', form.find('#palette input[name="palette[link]"]').val());
// Sidebar block. // 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('#preview #preview-sidebar #preview-block').css('background-color', form.find('#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('border-color', form.find('#palette input[name="palette[sidebarborders]"]').val());
// Footer wrapper background. // 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. // CSS3 Gradients.
var gradient_start = form.find('.js-color-palette input[name="palette[top]"]').val(); var gradient_start = form.find('#palette input[name="palette[top]"]').val();
var gradient_end = form.find('.js-color-palette input[name="palette[bottom]"]').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); })(jQuery, Drupal, drupalSettings);
core/themes/bartik/css/colors.css
+ 2
− 2
View file @ f990ca63
...@@ -56,14 +56,14 @@ a:active, ...@@ -56,14 +56,14 @@ a:active,
/* ---------- Color Form ----------- */ /* ---------- Color Form ----------- */
[dir="rtl"] .color-form .color-palette { [dir="rtl"] .color-form #palette {
margin-left: 0; margin-left: 0;
margin-right: 20px; margin-right: 20px;
} }
[dir="rtl"] .color-form .form-item label { [dir="rtl"] .color-form .form-item label {
float: right; float: right;
} }
[dir="rtl"] .color-form .color-palette .lock { [dir="rtl"] .color-form #palette .lock {
right: -20px; right: -20px;
left: 0; left: 0;
} }
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment