Commit 867babda authored by Mathieu Lutfy's avatar Mathieu Lutfy Committed by Aegir user

shoreditch update

parent addbbb3c
...@@ -8,3 +8,6 @@ $bootstrap-namespace : "#bootstrap-theme"; ...@@ -8,3 +8,6 @@ $bootstrap-namespace : "#bootstrap-theme";
$icon-font-path: "../fonts/" !default; $icon-font-path: "../fonts/" !default;
$crm-wizard-active-bg-color: $gray-lighter;
$crm-wizard-active-font-color: $brand-primary;
...@@ -5,7 +5,7 @@ var postcss = require('gulp-postcss'); ...@@ -5,7 +5,7 @@ var postcss = require('gulp-postcss');
var postcssPrefix = require('postcss-prefix-selector'); var postcssPrefix = require('postcss-prefix-selector');
var postcssDiscardDuplicates = require('postcss-discard-duplicates'); var postcssDiscardDuplicates = require('postcss-discard-duplicates');
var stripCssComments = require('gulp-strip-css-comments'); var stripCssComments = require('gulp-strip-css-comments');
var transformSelectors = require("gulp-transform-selectors"); var transformSelectors = require('gulp-transform-selectors');
var civicrmScssRoot = require('civicrm-scssroot')(); var civicrmScssRoot = require('civicrm-scssroot')();
var bootstrapNamespace = '#bootstrap-theme'; var bootstrapNamespace = '#bootstrap-theme';
...@@ -38,12 +38,13 @@ gulp.task('sass:civicrm', ['sass:sync'], function () { ...@@ -38,12 +38,13 @@ gulp.task('sass:civicrm', ['sass:sync'], function () {
.pipe(stripCssComments({ preserve: false })) .pipe(stripCssComments({ preserve: false }))
.pipe(postcss([postcssPrefix({ .pipe(postcss([postcssPrefix({
prefix: '.crm-container ', prefix: '.crm-container ',
exclude: [/page-civicrm/, /crm-container/, /civicrm-menu/, /#root-menu-div/] exclude: [/^body/, /tooltip/, /page-civicrm/, /crm-container/,
/civicrm-menu/, /#root-menu-div/]
}), postcssDiscardDuplicates])) }), postcssDiscardDuplicates]))
.pipe(gulp.dest('css/')); .pipe(gulp.dest('css/'));
}); });
gulp.task('sass:sync', function(){ gulp.task('sass:sync', function () {
civicrmScssRoot.updateSync(); civicrmScssRoot.updateSync();
}); });
...@@ -61,13 +62,13 @@ gulp.task('default', ['sass']); ...@@ -61,13 +62,13 @@ gulp.task('default', ['sass']);
* @param {string} selector the current selector to be transformed * @param {string} selector the current selector to be transformed
* @return string * @return string
*/ */
function namespaceRootElements(selector) { function namespaceRootElements (selector) {
var regex = /^(body|html)/; var regex = /^(body|html)/;
if (regex.test(selector)) { if (regex.test(selector)) {
selector = selector.replace(regex, function (match) { selector = selector.replace(regex, function (match) {
return match + bootstrapNamespace; return match + bootstrapNamespace;
}) + ",\n" + selector.replace(regex, bootstrapNamespace); }) + ',\n' + selector.replace(regex, bootstrapNamespace);
} }
return selector; return selector;
......
...@@ -14,8 +14,8 @@ ...@@ -14,8 +14,8 @@
<url desc="Support">http://civicrm.stackexchange.com/</url> <url desc="Support">http://civicrm.stackexchange.com/</url>
<url desc="Licensing">http://www.gnu.org/licenses/agpl-3.0.html</url> <url desc="Licensing">http://www.gnu.org/licenses/agpl-3.0.html</url>
</urls> </urls>
<releaseDate>2017-10-13</releaseDate> <releaseDate>2017-11-27</releaseDate>
<version>0.1-alpha12</version> <version>0.1-alpha14</version>
<compatibility> <compatibility>
<ver>4.7</ver> <ver>4.7</ver>
</compatibility> </compatibility>
......
(function ($, _) {
$(document).ready(function () {
amendMarkupOfMenuItemsWithFontAwesomeIcons();
customizeQuickSearchField();
});
/**
* Amends the markup of any menu item with a FontAwesome icon
*/
function amendMarkupOfMenuItemsWithFontAwesomeIcons() {
menuItemsWithFontAwesomeIcon().each(function () {
var $menuItem = $(this);
$('.crm-i,.fa', $menuItem).addClass('menumain-icon');
wrapMenuItemLabelInHTML($menuItem);
});
}
/**
* Changes the placeholder text of the quicksearch field
*/
function changeQuickSearchFieldPlaceholder () {
$('#crm-qsearch .ui-autocomplete-input').attr('placeholder', 'Quick Search');
}
/**
* Customizes the quick search field
*/
function customizeQuickSearchField () {
changeQuickSearchFieldPlaceholder();
giveFocusToQuickSearchFieldWhenBlockGetsClick();
manageCustomClassOfQuickSearchField();
}
/**
* It gives focus to the quicksearch field when a click is registered on the
* whole block (= on the icon as well) rather than just the field itself
*/
function giveFocusToQuickSearchFieldWhenBlockGetsClick () {
$('#crm-qsearch').click(function () {
$('#sort_name_navigation').focus();
});
}
/**
* Checks if the user has clicked outside of the quick search field
* by analyzing the given click target
*
* @param {Element} target
* @return {boolean}
*/
function hasUserClickedOutsideQuickSearchField (target) {
var $target = $(target);
return !$target.is('#crm-qsearch') &&
!$target.is('#root-menu-div') &&
!$target.closest('#crm-qsearch, #root-menu-div').length;
}
/**
* Checks if the quick search field currently has any value
*
* @return {boolean}
*/
function isQuickSearchOnGoing () {
return !!$('#sort_name_navigation').val().trim();
}
/**
* Manages handlers that deals with the custom class
* that is used on the quick search field
*/
function manageCustomClassOfQuickSearchField () {
var customClass = 'search-ongoing';
toggleCustomClassToQuickSearchFieldOnHover(customClass);
removeCustomClassOnOutsideClick(customClass);
}
/**
* Gets the list of the menu items with a FontAwesome icon
*
* @return {array}
*/
function menuItemsWithFontAwesomeIcon () {
return $('.menumain[class*="crm"]').filter(function () {
return $('.crm-i,.fa', this).length > 0
});
}
/**
* Removes the given custom class when the user clicks
* outside the quick search field (if there is no ongoing search)
*
* @param {string} customClass
*/
function removeCustomClassOnOutsideClick (customClass) {
$(document).on('click', function (event) {
if (hasUserClickedOutsideQuickSearchField(event.target) && !isQuickSearchOnGoing()) {
$('#civicrm-menu').removeClass(customClass);
}
});
}
/**
* Toggles the given custom class to the quicksearch field
* so that custom behaviour can be applied to it
*
* The class is removed only when the element
* loses the hover AND it is empty (which means there is no ongoing search)
*
* @param {string} customClass
*/
function toggleCustomClassToQuickSearchFieldOnHover (customClass) {
$('#crm-qsearch').hover(
function () {
$('#civicrm-menu').addClass(customClass);
},
function () {
var isSearchCriteriaPanelOpen = $('.crm-quickSearchField:visible', '#root-menu-div').length;
if (!isQuickSearchOnGoing() && !isSearchCriteriaPanelOpen) {
$('#civicrm-menu').removeClass(customClass);
}
}
);
}
/**
* Creates an HTML element out of the text node of the given menu item
*
* @param {object} $menuItem
*/
function wrapMenuItemLabelInHTML ($menuItem) {
$menuItem.contents().filter(function () {
return this.nodeType === 3 && $(this).parent().is($menuItem);
}).wrap('<span class="menumain-label" />')
}
}(CRM.$, CRM._));
...@@ -9,7 +9,6 @@ ...@@ -9,7 +9,6 @@
} }
tbody { tbody {
background-color: $crm-brand-primary-light;
.btn { .btn {
background-color: inherit; background-color: inherit;
...@@ -24,10 +23,6 @@ ...@@ -24,10 +23,6 @@
outline: 0 none; outline: 0 none;
} }
&:hover {
background: $crm-brand-primary-lighter;
}
&.active { &.active {
background-color: $brand-primary; background-color: $brand-primary;
......
...@@ -2,11 +2,15 @@ ...@@ -2,11 +2,15 @@
display: block; display: block;
position: relative; position: relative;
.crm-i {
opacity: 1;
}
.crm-editable-form { .crm-editable-form {
button { button {
background-color: $gray-lighter; background-color: $gray-lighter;
border: 1px solid $crm-darker-grayblue; border: 1px solid $crm-grayblue-darker;
border-radius: 0 0 0 $border-radius-base; border-radius: 0 0 0 $border-radius-base;
bottom: -29px; bottom: -29px;
color: $brand-primary; color: $brand-primary;
...@@ -29,14 +33,14 @@ ...@@ -29,14 +33,14 @@
select { select {
background: $crm-white; background: $crm-white;
border: 1px solid $crm-darker-grayblue; border: 1px solid $crm-grayblue-darker;
border-radius: $border-radius-base $border-radius-base 0px; border-radius: $border-radius-base $border-radius-base 0px;
outline: none; outline: none;
width: 100%; width: 100%;
} }
input { input {
border: 1px solid $crm-darker-grayblue; border: 1px solid $crm-grayblue-darker;
border-radius: $border-radius-base $border-radius-base 0 $border-radius-base; border-radius: $border-radius-base $border-radius-base 0 $border-radius-base;
display: block; display: block;
outline: none; outline: none;
...@@ -44,7 +48,7 @@ ...@@ -44,7 +48,7 @@
} }
textarea { textarea {
border: 1px solid $crm-darker-grayblue; border: 1px solid $crm-grayblue-darker;
border-radius: $border-radius-base $border-radius-base 0 $border-radius-base; border-radius: $border-radius-base $border-radius-base 0 $border-radius-base;
display: block; display: block;
outline: none; outline: none;
...@@ -53,13 +57,13 @@ ...@@ -53,13 +57,13 @@
} }
&:not(.crm-editable-editing):hover { &:not(.crm-editable-editing):hover {
border: 1px solid $crm-darker-grayblue; border: 1px solid $crm-grayblue-darker;
border-radius: $border-radius-base; border-radius: $border-radius-base;
padding: 1px 30px 1px 3px; padding: 1px 30px 1px 3px;
&:before { &:before {
background-color: $crm-background; background-color: $crm-background;
border-left: 1px solid $crm-darker-grayblue; border-left: 1px solid $crm-grayblue-darker;
border-radius: 0 $border-radius-base $border-radius-base 0; border-radius: 0 $border-radius-base $border-radius-base 0;
bottom: 0; bottom: 0;
content: ""; content: "";
......
.table { .table {
&.table-transparent { &.table-transparent {
background-color: transparent; background-color: transparent;
border: 1px solid $crm-dark-grayblue; border: 1px solid $crm-grayblue-dark;
th { th {
background-color: transparent; background-color: transparent;
......
...@@ -13,7 +13,7 @@ $crm-text-angular-min-height: 120px; ...@@ -13,7 +13,7 @@ $crm-text-angular-min-height: 120px;
.btn { .btn {
background: transparent; background: transparent;
border: none; border: none;
color: #727E8A; color: $crm-copy;
&.active { &.active {
color: $gray-darker; color: $gray-darker;
......
...@@ -22,13 +22,13 @@ ...@@ -22,13 +22,13 @@
a, a,
a:active, a:active,
a:hover { a:hover {
color: $brand-primary; color: $crm-wizard-active-font-color;
padding: 15px 20px; padding: 15px 20px;
} }
li.active a { li.active a {
background: $gray-lighter; background: $crm-wizard-active-bg-color;
color: $brand-primary; color: $crm-wizard-active-font-color;
position: relative; position: relative;
&:after, &:after,
...@@ -45,12 +45,12 @@ ...@@ -45,12 +45,12 @@
} }
&:after { &:after {
border-left-color: $gray-lighter; border-left-color: $crm-wizard-active-bg-color;
right: -7px; right: -7px;
} }
&:before { &:before {
border-left-color: $crm-white; border-left-color: #ffffff;
left: 0; left: 0;
} }
} }
...@@ -64,7 +64,7 @@ ...@@ -64,7 +64,7 @@
&:after, &:after,
&:before { &:before {
background: $gray-lighter; background: $crm-wizard-active-bg-color;
content: ''; content: '';
height: 31px; height: 31px;
position: absolute; position: absolute;
...@@ -84,9 +84,13 @@ ...@@ -84,9 +84,13 @@
&:hover { &:hover {
background: none; background: none;
color: $brand-primary; color: $crm-wizard-active-font-color;
} }
} }
li.completed a {
color: #00B0B9;
}
} }
.panel-body { .panel-body {
......
...@@ -23,13 +23,13 @@ ...@@ -23,13 +23,13 @@
} }
.crm_notification-badge__success { .crm_notification-badge__success {
background: $brand-success; background: $btn-success-bg;
color: $crm-white; color: $gray-darker;
} }
.crm_notification-badge__warning { .crm_notification-badge__warning {
background: $brand-warning; background: $btn-warning-bg;
color: $crm-white; color: $gray-darker;
} }
.crm_notification-badge__danger { .crm_notification-badge__danger {
......
// From Bootstrap 4 alpha // From Bootstrap 4 alpha
@mixin button-outline-variant($color, $bg-color: $color) { @mixin button-outline-variant($color, $bg-color: $color, $hover-color: $crm-white) {
color: $color; color: $color;
background-image: none; background-image: none;
background-color: transparent; background-color: transparent;
border-color: $color; border-color: $bg-color;
&:focus, &:focus,
&.focus, &.focus,
&:active, &:active,
&.active, &.active,
.open > &.dropdown-toggle { .open > &.dropdown-toggle {
color: #fff; color: $crm-white;
background-color: $bg-color; background-color: $bg-color;
border-color: $color; border-color: $bg-color;
} }
@include hover { @include hover {
color: #fff; color: $hover-color;
background-color: $bg-color; background-color: darken($bg-color, $crm-darken-percentage);
border-color: $color; border-color: darken($bg-color, $crm-darken-percentage);
} }
&.disabled, &.disabled,
......
@mixin page-header-variant($bg-color) { @mixin page-header-variant($bg-color, $title-color: $crm-white, $sm-color: $crm-background) {
background: $bg-color; background: $bg-color;
> h1, > h1,
...@@ -7,6 +7,10 @@ ...@@ -7,6 +7,10 @@
> h4, > h4,
> h5, > h5,
> h6 { > h6 {
color: $crm-white; color: $title-color;
small {
color: $sm-color;
}
} }
} }
...@@ -13,14 +13,14 @@ ...@@ -13,14 +13,14 @@
/** /**
* Dropdown arrow * Dropdown arrow
*/ */
@mixin dropdown-arrow() { @mixin search-icon() {
content: '\f0d7'; content: '\f002';
border-left: 1px solid $input-border;
bottom: 0; bottom: 0;
font-family: "FontAwesome"; font-family: "FontAwesome";
display: inline-block; display: inline-block;
height: 100%; height: 100%;
line-height: $input-height-base; line-height: $input-height-base;
pointer-events: none;
position: absolute; position: absolute;
right: 0; right: 0;
text-align: center; text-align: center;
......
table { table {
thead.sticky th > .sticky-header { thead.sticky th > .sticky-header {
background: $crm-table-heading-bg; background: $gray-lighter;
border-bottom: 1px solid $crm-table-heading-border-color; border-bottom: 1px solid $crm-grayblue-dark;
height: auto; height: auto;
// This makes the sticky header play nicely with admin header: // This makes the sticky header play nicely with admin header:
margin-top: 8px; margin-top: 8px;
......
...@@ -13,9 +13,11 @@ ...@@ -13,9 +13,11 @@
} }
.badge-success { .badge-success {
background: $brand-success; background: $btn-success-bg;
color: $gray-darker;
} }
.badge-warning { .badge-warning {
background: $brand-warning; background: $btn-warning-bg;
color: $gray-darker;
} }