Skip to content
Snippets Groups Projects
Commit f1eb81fb authored by Ronald te Brake's avatar Ronald te Brake
Browse files

DS-1326 by ronaldtebrake: Color settings from core color module

parent 964434b1
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
color/color.inc 0 → 100644
+ 70
− 0
View file @ f1eb81fb
<?php
/**
* @file
* Lists available colors and color schemes for the Social Blue theme.
*/
$info = array(
// Available colors and color labels used in theme.
'fields' => array(
'bg-primary' => t('Primary color'),
'brand-secondary' => t('Secondary color'),
'brand-accent' => t('Accent color'),
'text-primary' => t('Text primary color'),
'text-info' => t('Text secondary color'),
'text-accent' => t('Text accent color'),
),
// Pre-defined color schemes.
'schemes' => array(
'default' => array(
'title' => t('Social Blue (default)'),
'colors' => array(
'bg-primary' => '#29abe2',
'brand-secondary' => '#1f80aa',
'brand-accent' => '#ffc142',
'text-primary' => '#29abe2',
'text-info' => '#31708f',
'text-accent' => '#ffc142',
),
),
),
// CSS files (excluding @import) to rewrite with new color scheme.
// @TODO make sure we rewrite the correct color.css
'css' => array(
'assets/css/base.css',
),
// Files to copy.
// 'copy' => array(
// 'logo.svg',
// ),
// Gradient definitions.
'gradients' => array(
array(
// (x, y, width, height).
'dimension' => array(0, 0, 0, 0),
// Direction of gradient ('vertical' or 'horizontal').
'direction' => 'vertical',
// Keys of colors to use for the gradient.
'colors' => array('top', 'bottom'),
),
),
// Preview files. @todo Make sure we update the preview it will help
// Distro users / SaaS users a lot!
// 'preview_library' => 'socialbase/color.preview',
// 'preview_html' => 'color/preview.html',
// Attachments.
'#attached' => [
'drupalSettings' => [
'color' => [
// Put the logo path into JavaScript for the live preview.
'logo' => theme_get_setting('logo.url', 'socialblue'),
],
],
],
);
color/preview.css 0 → 100644
+ 208
− 0
View file @ f1eb81fb
/* ---------- Preview Styles ----------- */
.js .color-preview {
clear: both;
float: none !important;
}
.color-preview {
background-color: #fff;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
line-height: 1.5;
overflow: hidden;
word-wrap: break-word;
margin-bottom: 10px;
}
.color-preview-header {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
position: relative;
}
.color-preview-logo {
float: left;
padding: 15px;
}
.color-preview-site-name {
color: #686868;
font-weight: normal;
font-size: 1.821em;
line-height: 1;
margin-bottom: 30px;
margin-left: 15px; /* LTR */
padding-top: 34px;
}
[dir="rtl"] .color-preview-site-name {
margin-left: 0;
margin-right: 15px;
}
.color-preview-main-menu {
clear: both;
padding: 0 15px 3px;
}
.color-preview-main-menu-links a {
color: #d9d9d9;
padding: 0.6em 1em 0.4em;
}
.color-preview-main-menu-links {
font-size: 0.929em;
margin: 0;
padding: 0;
}
.color-preview-main-menu-links a {
color: #333;
background: #ccc;
background: rgba(255, 255, 255, 0.7);
text-shadow: 0 1px #eee;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.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;
}
.color-preview-main-menu-links li a.is-active {
background: #fff;
border-bottom: none;
}
.color-preview-main-menu-links li {
display: inline;
list-style-type: none;
padding: 0.6em 0 0.4em;
}
.color-preview-sidebar,
.color-preview-content {
display: inline;
float: left; /* LTR */
position: relative;
}
[dir="rtl"] .color-preview-sidebar,
[dir="rtl"] .color-preview-content {
float: right;
}
.color-preview-sidebar {
margin-left: 15px; /* LTR */
width: 210px;
}
[dir="rtl"] .color-preview-sidebar {
margin-left: 0;
margin-right: 15px;
}
.color-preview-content {
margin-left: 30px; /* LTR */
width: 26.5em;
}
[dir="rtl"] .color-preview-content {
margin-left: 0;
margin-right: 30px;
}
.color-preview-sidebar .preview-block {
border: 1px solid;
margin: 20px 0;
padding: 15px 20px;
}
.color-preview-sidebar h2 {
border-bottom: 1px solid #d6d6d6;
font-weight: normal;
margin-top: 0;
margin-right: 0;
margin-left: 0;
padding-bottom: 5px;
text-shadow: 0 1px 0 #fff;
}
.color-preview .preview-block .preview-content {
margin-top: 1em;
}
.color-preview .preview-block-menu .preview-content,
.color-preview .preview-block-menu .preview-content ul {
margin-top: 0;
}
.color-preview-main {
margin-bottom: 40px;
margin-top: 20px;
}
.color-preview-page-title {
font-size: 2em;
font-weight: normal;
line-height: 1;
margin: 1em 0 0.5em;
}
.color-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 {
color: #fcfcfc;
color: rgba(255, 255, 255, 0.8);
}
.color-preview-footer-wrapper a:hover,
.color-preview-footer-wrapper a:focus {
color: #fefefe;
color: rgba(255, 255, 255, 0.95);
text-decoration: underline;
}
.color-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 {
float: right;
}
.color-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 {
border: none;
margin: 0;
padding: 0;
}
.color-preview-footer-columns h2 {
border-bottom: 1px solid #555;
border-color: rgba(255, 255, 255, 0.15);
padding-bottom: 3px;
text-transform: uppercase;
}
.color-preview-footer-columns .preview-content {
margin-top: 0;
}
.color-preview-footer-columns .preview-content ul {
margin-left: 0; /* LTR */
padding-left: 0; /* LTR */
}
[dir="rtl"] .color-preview-footer-columns .preview-content ul {
margin-right: 0;
padding-right: 0;
}
.color-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 {
border-bottom: 1px solid #555;
border-color: rgba(255, 255, 255, 0.15);
display: block;
line-height: 1.2;
padding: 0.8em 2px 0.8em 20px; /* LTR */
text-indent: -15px;
}
[dir="rtl"] .color-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 {
background-color: #1f1f21;
background-color: rgba(255, 255, 255, 0.05);
text-decoration: none;
}
color/preview.html 0 → 100644
+ 65
− 0
View file @ f1eb81fb
<div class="color-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">
<li><a>Home</a></li>
<li><a>Te Quidne</a></li>
<li><a>Vel Torqueo Quae Erat</a></li>
</ul>
</div>
</div>
<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.
Laboris nisi ut aliquip ex ea.
</div>
</div>
</div>
<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
nostrud <a>exercitation ullamco</a> laboris nisi ut aliquip ex ea
commodo consequat. Maecenas id porttitor Ut enim ad minim veniam, quis nostr udfelis.
</div>
</div>
</div>
</div>
<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>
<div class="content">
Maecenas id porttitor Ut enim ad minim veniam, quis nostrudfelis.
Laboris nisi ut aliquip ex ea.
</div>
</div>
</div>
<div class="preview-footer-column">
<div class="preview-block preview-block-menu">
<h2>Erisus dolor</h2>
<div class="preview-content">
<ul>
<li><a>Donec placerat</a></li>
<li><a>Nullam nibh dolor</a></li>
<li><a>Blandit sed</a></li>
<li><a>Fermentum id</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
color/preview.js 0 → 100644
+ 49
− 0
View file @ f1eb81fb
/**
* @file
* Preview for the Bartik theme.
*/
(function ($, Drupal, drupalSettings) {
'use strict';
Drupal.color = {
logoChanged: false,
callback: function (context, settings, $form) {
// Change the logo to be the real one.
if (!this.logoChanged) {
$('.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('.color-preview-logo');
}
var $colorPreview = $form.find('.color-preview');
var $colorPalette = $form.find('.js-color-palette');
// Solid background.
$colorPreview.css('backgroundColor', $colorPalette.find('input[name="palette[bg]"]').val());
// Text preview.
$colorPreview.find('.color-preview-main h2, .color-preview .preview-content').css('color', $colorPalette.find('input[name="palette[text]"]').val());
$colorPreview.find('.color-preview-content a').css('color', $colorPalette.find('input[name="palette[link]"]').val());
// Sidebar block.
var $colorPreviewBlock = $colorPreview.find('.color-preview-sidebar .color-preview-block');
$colorPreviewBlock.css('background-color', $colorPalette.find('input[name="palette[sidebar]"]').val());
$colorPreviewBlock.css('border-color', $colorPalette.find('input[name="palette[sidebarborders]"]').val());
// Footer wrapper background.
$colorPreview.find('.color-preview-footer-wrapper').css('background-color', $colorPalette.find('input[name="palette[footer]"]').val());
// CSS3 Gradients.
var gradient_start = $colorPalette.find('input[name="palette[top]"]').val();
var gradient_end = $colorPalette.find('input[name="palette[bottom]"]').val();
$colorPreview.find('.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 + ');');
$colorPreview.find('.color-preview-site-name').css('color', $colorPalette.find('input[name="palette[titleslogan]"]').val());
}
};
})(jQuery, Drupal, drupalSettings);
socialblue.libraries.yml
+ 10
− 0
View file @ f1eb81fb
......@@ -147,3 +147,13 @@ page-node:
css:
component:
assets/css/page-node.css: {}
color.preview:
version: VERSION
css:
theme:
color/preview.css: {}
js:
color/preview.js: {}
dependencies:
- color/drupal.color
\ No newline at end of file
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