Issue #2470069 by wadmiraal, Manjit.Singh, pjbaert, zakxxi, LewisNyman: Refactor color module CSS inline with our CSS standards
Alex Pott
parent
9166525d98
commit
1ea7b90adc
|
|
@ -23,8 +23,8 @@
|
|||
var focused = null;
|
||||
|
||||
// Add Farbtastic.
|
||||
$('<div id="placeholder"></div>').once('color').prependTo(form);
|
||||
var farb = $.farbtastic('#placeholder');
|
||||
$('<div class="color-placeholder"></div>').once('color').prependTo(form);
|
||||
var farb = $.farbtastic('.color-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.
|
||||
$('#preview').once('color').append('<div id="gradient-' + i + '"></div>');
|
||||
var gradient = $('#preview #gradient-' + i);
|
||||
$('.color-preview').once('color').append('<div id="gradient-' + i + '"></div>');
|
||||
var gradient = $('.color-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('.unlocked')) {
|
||||
if (!locks[j - 1] || $(locks[j - 1]).is('.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('.unlocked')) {
|
||||
if (!locks[j] || $(locks[j]).is('.is-unlocked')) {
|
||||
break;
|
||||
}
|
||||
matched = shift_color(color, reference[input.key], reference[inputs[j].key]);
|
||||
|
|
@ -201,7 +201,7 @@
|
|||
}
|
||||
|
||||
// Initialize color fields.
|
||||
form.find('#palette input.form-text')
|
||||
form.find('.js-color-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="lock link">' + Drupal.t('Unlock') + '</button>').on('click', function (e) {
|
||||
var lock = $('<button class="color-palette__lock link">' + Drupal.t('Unlock') + '</button>').on('click', function (e) {
|
||||
e.preventDefault();
|
||||
if (toggleClick) {
|
||||
$(this).addClass('unlocked').html(Drupal.t('Lock'));
|
||||
$(this).addClass('is-unlocked').html(Drupal.t('Lock'));
|
||||
$(hooks[i - 1]).attr('class',
|
||||
locks[i - 2] && $(locks[i - 2]).is(':not(.unlocked)') ? 'hook up' : 'hook'
|
||||
locks[i - 2] && $(locks[i - 2]).is(':not(.is-unlocked)') ? 'color-palette__hook is-up' : 'color-palette__hook'
|
||||
);
|
||||
$(hooks[i]).attr('class',
|
||||
locks[i] && $(locks[i]).is(':not(.unlocked)') ? 'hook down' : 'hook'
|
||||
locks[i] && $(locks[i]).is(':not(.is-unlocked)') ? 'color-palette__hook is-down' : 'color-palette__hook'
|
||||
);
|
||||
}
|
||||
else {
|
||||
$(this).removeClass('unlocked').html(Drupal.t('Unlock'));
|
||||
$(this).removeClass('is-unlocked').html(Drupal.t('Unlock'));
|
||||
$(hooks[i - 1]).attr('class',
|
||||
locks[i - 2] && $(locks[i - 2]).is(':not(.unlocked)') ? 'hook both' : 'hook down'
|
||||
locks[i - 2] && $(locks[i - 2]).is(':not(.is-unlocked)') ? 'color-palette__hook is-both' : 'color-palette__hook is-down'
|
||||
);
|
||||
$(hooks[i]).attr('class',
|
||||
locks[i] && $(locks[i]).is(':not(.unlocked)') ? 'hook both' : 'hook up'
|
||||
locks[i] && $(locks[i]).is(':not(.is-unlocked)') ? 'color-palette__hook is-both' : 'color-palette__hook is-up'
|
||||
);
|
||||
}
|
||||
toggleClick = !toggleClick;
|
||||
|
|
@ -240,17 +240,17 @@
|
|||
}
|
||||
|
||||
// Add hook.
|
||||
var hook = $('<div class="hook"></div>');
|
||||
var hook = $('<div class="color-palette__hook"></div>');
|
||||
$(this).after(hook);
|
||||
hooks.push(hook);
|
||||
|
||||
$(this).parent().find('.lock').trigger('click');
|
||||
$(this).parent().find('.color-palette__lock').trigger('click');
|
||||
this.i = i;
|
||||
inputs.push(this);
|
||||
})
|
||||
.on('focus', focus);
|
||||
|
||||
form.find('#palette label');
|
||||
form.find('.js-color-palette label');
|
||||
|
||||
// Focus first color.
|
||||
inputs[0].focus();
|
||||
|
|
|
|||
|
|
@ -9,8 +9,9 @@
|
|||
margin: 0 auto;
|
||||
}
|
||||
.color-form .form-item {
|
||||
overflow: hidden;
|
||||
margin: 0.5em 0;
|
||||
height: 2em;
|
||||
padding: 0.5em;
|
||||
}
|
||||
.color-form label {
|
||||
clear: left; /* LTR */
|
||||
|
|
@ -27,57 +28,68 @@
|
|||
[dir="rtl"] .color-form .form-text {
|
||||
float: right;
|
||||
}
|
||||
#palette .hook {
|
||||
.color-palette__hook {
|
||||
float: left; /* LTR */
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
[dir="rtl"] #palette .hook {
|
||||
[dir="rtl"] .color-palette__hook {
|
||||
float: right;
|
||||
}
|
||||
#palette .down,
|
||||
#palette .up,
|
||||
#palette .both {
|
||||
.color-palette__hook.is-down,
|
||||
.color-palette__hook.is-up,
|
||||
.color-palette__hook.is-both {
|
||||
background: url(../images/hook.png) no-repeat 100% 0; /* LTR */
|
||||
}
|
||||
[dir="rtl"] #palette .down,
|
||||
[dir="rtl"] #palette .up,
|
||||
[dir="rtl"] #palette .both {
|
||||
[dir="rtl"] .color-palette__hook.is-down,
|
||||
[dir="rtl"] .color-palette__hook.is-up,
|
||||
[dir="rtl"] .color-palette__hook.is-both {
|
||||
background: url(../images/hook-rtl.png) no-repeat 0 0;
|
||||
}
|
||||
#palette .up {
|
||||
.color-palette__hook.is-up {
|
||||
background-position: 100% -27px; /* LTR */
|
||||
}
|
||||
[dir="rtl"] #palette .up {
|
||||
[dir="rtl"] .color-palette__hook.is-up {
|
||||
background-position: 0 -27px;
|
||||
}
|
||||
#palette .both {
|
||||
.color-palette__hook.is-both {
|
||||
background-position: 100% -54px; /* LTR */
|
||||
}
|
||||
[dir="rtl"] #palette .both {
|
||||
[dir="rtl"] .color-palette__hook.is-both {
|
||||
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 */
|
||||
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"] #palette .lock {
|
||||
[dir="rtl"] .color-palette__lock {
|
||||
float: right;
|
||||
}
|
||||
#palette .unlocked {
|
||||
/* Same as above .color-palette__lock rule. */
|
||||
button.is-unlocked,
|
||||
.is-unlocked {
|
||||
background-position: 50% -22px;
|
||||
}
|
||||
|
||||
/* wide viewport. */
|
||||
@media screen and (min-width: 37.5625em) { /* 601px */
|
||||
#placeholder {
|
||||
.color-placeholder {
|
||||
float: right; /* LTR */
|
||||
}
|
||||
[dir="rtl"] #placeholder {
|
||||
[dir="rtl"] .color-placeholder {
|
||||
float: left;
|
||||
}
|
||||
.color-form .form-item {
|
||||
|
|
@ -104,17 +116,18 @@
|
|||
[dir="rtl"] .color-form .form-select {
|
||||
float: right;
|
||||
}
|
||||
#palette .hook {
|
||||
.color-palette__hook {
|
||||
float: left; /* LTR */
|
||||
margin-top: 3px;
|
||||
}
|
||||
[dir="rtl"] #palette .hook {
|
||||
[dir="rtl"] .color-palette__hook {
|
||||
float: right;
|
||||
}
|
||||
#palette .lock {
|
||||
button.color-palette__lock,
|
||||
.color-palette__lock {
|
||||
float: left; /* LTR */
|
||||
}
|
||||
[dir="rtl"] #palette .lock {
|
||||
[dir="rtl"] .color-palette__lock {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
|
@ -123,20 +136,20 @@
|
|||
}
|
||||
|
||||
/* Preview */
|
||||
#preview {
|
||||
.color-preview {
|
||||
display: none;
|
||||
}
|
||||
.js #preview {
|
||||
.js .color-preview {
|
||||
display: block;
|
||||
position: relative;
|
||||
float: left; /* LTR */
|
||||
}
|
||||
.js[dir="rtl"] #preview {
|
||||
.js[dir="rtl"] .color-preview {
|
||||
float: right;
|
||||
}
|
||||
@media screen and (max-width: 30em) { /* 480px */
|
||||
.color-form #preview-sidebar,
|
||||
.color-form #preview-content {
|
||||
.color-form .color-preview-sidebar,
|
||||
.color-form .color-preview-content {
|
||||
width: auto;
|
||||
margin: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<div id="preview">
|
||||
<div class="color-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>
|
||||
|
|
|
|||
|
|
@ -12,11 +12,11 @@
|
|||
var accum;
|
||||
var delta;
|
||||
// Solid background.
|
||||
form.find('#preview').css('backgroundColor', form.find('#palette input[name="palette[base]"]').val());
|
||||
form.find('.color-preview').css('backgroundColor', form.find('.color-palette input[name="palette[base]"]').val());
|
||||
|
||||
// Text preview
|
||||
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());
|
||||
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());
|
||||
|
||||
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('#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());
|
||||
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());
|
||||
if (color_start && color_end) {
|
||||
delta = [];
|
||||
for (var j in color_start) {
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
#}
|
||||
<div class="color-form clearfix">
|
||||
{{ form.scheme }}
|
||||
<div id="palette" class="clearfix">
|
||||
<div class="clearfix color-palette js-color-palette">
|
||||
{{ form.palette }}
|
||||
</div>
|
||||
{{ form|without('scheme', 'palette') }}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
/* ---------- Preview Styles ----------- */
|
||||
.js #preview {
|
||||
.js .color-preview {
|
||||
clear: both;
|
||||
float: none !important;
|
||||
}
|
||||
#preview {
|
||||
.color-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;
|
||||
}
|
||||
#preview-header {
|
||||
.color-preview-header {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
position: relative;
|
||||
}
|
||||
#preview-logo {
|
||||
.color-preview-logo {
|
||||
float: left;
|
||||
padding: 15px;
|
||||
}
|
||||
#preview-site-name {
|
||||
.color-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"] #preview-site-name {
|
||||
[dir="rtl"] .color-preview-site-name {
|
||||
margin-left: 0;
|
||||
margin-right: 15px;
|
||||
}
|
||||
#preview-main-menu {
|
||||
.color-preview-main-menu {
|
||||
clear: both;
|
||||
padding: 0 15px 3px;
|
||||
}
|
||||
#preview-main-menu-links a {
|
||||
.color-preview-main-menu-links a {
|
||||
color: #d9d9d9;
|
||||
padding: 0.6em 1em 0.4em;
|
||||
}
|
||||
#preview-main-menu-links {
|
||||
.color-preview-main-menu-links {
|
||||
font-size: 0.929em;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#preview-main-menu-links a {
|
||||
.color-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;
|
||||
}
|
||||
#preview-main-menu-links a:hover,
|
||||
#preview-main-menu-links a:focus {
|
||||
.color-preview-main-menu-links a:hover,
|
||||
.color-preview-main-menu-links a:focus {
|
||||
background: #eee;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
#preview-main-menu-links li a.is-active {
|
||||
.color-preview-main-menu-links li a.is-active {
|
||||
background: #fff;
|
||||
border-bottom: none;
|
||||
}
|
||||
#preview-main-menu-links li {
|
||||
.color-preview-main-menu-links li {
|
||||
display: inline;
|
||||
list-style-type: none;
|
||||
padding: 0.6em 0 0.4em;
|
||||
}
|
||||
#preview-sidebar,
|
||||
#preview-content {
|
||||
.color-preview-sidebar,
|
||||
.color-preview-content {
|
||||
display: inline;
|
||||
float: left; /* LTR */
|
||||
position: relative;
|
||||
}
|
||||
[dir="rtl"] #preview-sidebar,
|
||||
[dir="rtl"] #preview-content {
|
||||
[dir="rtl"] .color-preview-sidebar,
|
||||
[dir="rtl"] .color-preview-content {
|
||||
float: right;
|
||||
}
|
||||
#preview-sidebar {
|
||||
.color-preview-sidebar {
|
||||
margin-left: 15px; /* LTR */
|
||||
width: 210px;
|
||||
}
|
||||
[dir="rtl"] #preview-sidebar {
|
||||
[dir="rtl"] .color-preview-sidebar {
|
||||
margin-left: 0;
|
||||
margin-right: 15px;
|
||||
}
|
||||
#preview-content {
|
||||
.color-preview-content {
|
||||
margin-left: 30px; /* LTR */
|
||||
width: 26.5em;
|
||||
}
|
||||
[dir="rtl"] #preview-content {
|
||||
[dir="rtl"] .color-preview-content {
|
||||
margin-left: 0;
|
||||
margin-right: 30px;
|
||||
}
|
||||
#preview-sidebar .preview-block {
|
||||
.color-preview-sidebar .preview-block {
|
||||
border: 1px solid;
|
||||
margin: 20px 0;
|
||||
padding: 15px 20px;
|
||||
}
|
||||
#preview-sidebar h2 {
|
||||
.color-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;
|
||||
}
|
||||
#preview .preview-block .preview-content {
|
||||
.color-preview .preview-block .preview-content {
|
||||
margin-top: 1em;
|
||||
}
|
||||
#preview .preview-block-menu .preview-content,
|
||||
#preview .preview-block-menu .preview-content ul {
|
||||
.color-preview .preview-block-menu .preview-content,
|
||||
.color-preview .preview-block-menu .preview-content ul {
|
||||
margin-top: 0;
|
||||
}
|
||||
#preview-main {
|
||||
.color-preview-main {
|
||||
margin-bottom: 40px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
#preview-page-title {
|
||||
.color-preview-page-title {
|
||||
font-size: 2em;
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
margin: 1em 0 0.5em;
|
||||
}
|
||||
#preview-footer-wrapper {
|
||||
.color-preview-footer-wrapper {
|
||||
color: #c0c0c0;
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
display: block !important;
|
||||
font-size: 0.857em;
|
||||
padding: 20px 20px 25px;
|
||||
}
|
||||
#preview-footer-wrapper a {
|
||||
.color-preview-footer-wrapper a {
|
||||
color: #fcfcfc;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
#preview-footer-wrapper a:hover,
|
||||
#preview-footer-wrapper a:focus {
|
||||
.color-preview-footer-wrapper a:hover,
|
||||
.color-preview-footer-wrapper a:focus {
|
||||
color: #fefefe;
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
text-decoration: underline;
|
||||
}
|
||||
#preview-footer-wrapper .preview-footer-column {
|
||||
.color-preview-footer-wrapper .preview-footer-column {
|
||||
display: inline;
|
||||
float: left; /* LTR */
|
||||
padding: 0 10px;
|
||||
position: relative;
|
||||
width: 220px;
|
||||
}
|
||||
[dir="rtl"] #preview-footer-wrapper .preview-footer-column {
|
||||
[dir="rtl"] .color-preview-footer-wrapper .preview-footer-column {
|
||||
float: right;
|
||||
}
|
||||
#preview-footer-wrapper .preview-block {
|
||||
.color-preview-footer-wrapper .preview-block {
|
||||
border: 1px solid #444;
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
margin: 20px 0;
|
||||
padding: 10px;
|
||||
}
|
||||
#preview-footer-columns .preview-block-menu {
|
||||
.color-preview-footer-columns .preview-block-menu {
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#preview-footer-columns h2 {
|
||||
.color-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;
|
||||
}
|
||||
#preview-footer-columns .preview-content {
|
||||
.color-preview-footer-columns .preview-content {
|
||||
margin-top: 0;
|
||||
}
|
||||
#preview-footer-columns .preview-content ul {
|
||||
.color-preview-footer-columns .preview-content ul {
|
||||
margin-left: 0; /* LTR */
|
||||
padding-left: 0; /* LTR */
|
||||
}
|
||||
[dir="rtl"] #preview-footer-columns .preview-content ul {
|
||||
[dir="rtl"] .color-preview-footer-columns .preview-content ul {
|
||||
margin-right: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
#preview-footer-columns .preview-content li {
|
||||
.color-preview-footer-columns .preview-content li {
|
||||
list-style: none;
|
||||
list-style-image: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#preview-footer-columns .preview-content li a {
|
||||
.color-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"] #preview-footer-columns .preview-content li a {
|
||||
[dir="rtl"] .color-preview-footer-columns .preview-content li a {
|
||||
padding-left: 2px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
#preview-footer-columns .preview-content li a:hover,
|
||||
#preview-footer-columns .preview-content li a:focus {
|
||||
.color-preview-footer-columns .preview-content li a:hover,
|
||||
.color-preview-footer-columns .preview-content li a:focus {
|
||||
background-color: #1f1f21;
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
text-decoration: none;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<div id="preview">
|
||||
<div class="color-preview">
|
||||
|
||||
<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">
|
||||
<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">
|
||||
<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 id="preview-main" class="clearfix">
|
||||
<div id="preview-sidebar">
|
||||
<div id="preview-block" class="preview-block">
|
||||
<div class="color-preview-main clearfix">
|
||||
<div class="color-preview-sidebar">
|
||||
<div class="color-preview-block 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 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="preview-content">
|
||||
<h1 id="preview-page-title">Lorem ipsum dolor</h1>
|
||||
<div id="preview-node">
|
||||
<div class="color-preview-content">
|
||||
<h1 class="color-preview-page-title">Lorem ipsum dolor</h1>
|
||||
<div class="color-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 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div id="preview-footer-wrapper">
|
||||
<div id="preview-footer-columns" class="clearfix">
|
||||
<div class="color-preview-footer-wrapper">
|
||||
<div class="color-preview-footer-columns clearfix">
|
||||
<div class="preview-footer-column">
|
||||
<div class="preview-block">
|
||||
<h2>Etiam est risus</h2>
|
||||
|
|
|
|||
|
|
@ -11,35 +11,35 @@
|
|||
callback: function (context, settings, form, farb, height, width) {
|
||||
// Change the logo to be the real one.
|
||||
if (!this.logoChanged) {
|
||||
$('#preview #preview-logo img').attr('src', drupalSettings.color.logo);
|
||||
$('.color-preview .color-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('#preview-logo');
|
||||
$('div').remove('.color-preview-logo');
|
||||
}
|
||||
|
||||
// Solid background.
|
||||
form.find('#preview').css('backgroundColor', $('#palette input[name="palette[bg]"]').val());
|
||||
form.find('.color-preview').css('backgroundColor', $('.js-color-palette input[name="palette[bg]"]').val());
|
||||
|
||||
// Text preview.
|
||||
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());
|
||||
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());
|
||||
|
||||
// Sidebar block.
|
||||
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());
|
||||
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());
|
||||
|
||||
// Footer wrapper background.
|
||||
form.find('#preview #preview-footer-wrapper', form).css('background-color', form.find('#palette input[name="palette[footer]"]').val());
|
||||
form.find('.color-preview .color-preview-footer-wrapper', form).css('background-color', form.find('.js-color-palette input[name="palette[footer]"]').val());
|
||||
|
||||
// CSS3 Gradients.
|
||||
var gradient_start = form.find('#palette input[name="palette[top]"]').val();
|
||||
var gradient_end = form.find('#palette input[name="palette[bottom]"]').val();
|
||||
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();
|
||||
|
||||
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-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-site-name').css('color', form.find('#palette input[name="palette[titleslogan]"]').val());
|
||||
form.find('.color-preview .color-preview-site-name').css('color', form.find('.js-color-palette input[name="palette[titleslogan]"]').val());
|
||||
}
|
||||
};
|
||||
})(jQuery, Drupal, drupalSettings);
|
||||
|
|
|
|||
|
|
@ -56,14 +56,14 @@ a:active,
|
|||
|
||||
/* ---------- Color Form ----------- */
|
||||
|
||||
[dir="rtl"] .color-form #palette {
|
||||
[dir="rtl"] .color-form .color-palette {
|
||||
margin-left: 0;
|
||||
margin-right: 20px;
|
||||
}
|
||||
[dir="rtl"] .color-form .form-item label {
|
||||
float: right;
|
||||
}
|
||||
[dir="rtl"] .color-form #palette .lock {
|
||||
[dir="rtl"] .color-form .color-palette .lock {
|
||||
right: -20px;
|
||||
left: 0;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue