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";
$icon-font-path: "../fonts/" !default;
$crm-wizard-active-bg-color: $gray-lighter;
$crm-wizard-active-font-color: $brand-primary;
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -5,7 +5,7 @@ var postcss = require('gulp-postcss');
var postcssPrefix = require('postcss-prefix-selector');
var postcssDiscardDuplicates = require('postcss-discard-duplicates');
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 bootstrapNamespace = '#bootstrap-theme';
......@@ -38,12 +38,13 @@ gulp.task('sass:civicrm', ['sass:sync'], function () {
.pipe(stripCssComments({ preserve: false }))
.pipe(postcss([postcssPrefix({
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]))
.pipe(gulp.dest('css/'));
});
gulp.task('sass:sync', function(){
gulp.task('sass:sync', function () {
civicrmScssRoot.updateSync();
});
......@@ -61,13 +62,13 @@ gulp.task('default', ['sass']);
* @param {string} selector the current selector to be transformed
* @return string
*/
function namespaceRootElements(selector) {
function namespaceRootElements (selector) {
var regex = /^(body|html)/;
if (regex.test(selector)) {
selector = selector.replace(regex, function (match) {
return match + bootstrapNamespace;
}) + ",\n" + selector.replace(regex, bootstrapNamespace);
}) + ',\n' + selector.replace(regex, bootstrapNamespace);
}
return selector;
......
......@@ -14,8 +14,8 @@
<url desc="Support">http://civicrm.stackexchange.com/</url>
<url desc="Licensing">http://www.gnu.org/licenses/agpl-3.0.html</url>
</urls>
<releaseDate>2017-10-13</releaseDate>
<version>0.1-alpha12</version>
<releaseDate>2017-11-27</releaseDate>
<version>0.1-alpha14</version>
<compatibility>
<ver>4.7</ver>
</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 @@
}
tbody {
background-color: $crm-brand-primary-light;
.btn {
background-color: inherit;
......@@ -24,10 +23,6 @@
outline: 0 none;
}
&:hover {
background: $crm-brand-primary-lighter;
}
&.active {
background-color: $brand-primary;
......
......@@ -2,11 +2,15 @@
display: block;
position: relative;
.crm-i {
opacity: 1;
}
.crm-editable-form {
button {
background-color: $gray-lighter;
border: 1px solid $crm-darker-grayblue;
border: 1px solid $crm-grayblue-darker;
border-radius: 0 0 0 $border-radius-base;
bottom: -29px;
color: $brand-primary;
......@@ -29,14 +33,14 @@
select {
background: $crm-white;
border: 1px solid $crm-darker-grayblue;
border: 1px solid $crm-grayblue-darker;
border-radius: $border-radius-base $border-radius-base 0px;
outline: none;
width: 100%;
}
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;
display: block;
outline: none;
......@@ -44,7 +48,7 @@
}
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;
display: block;
outline: none;
......@@ -53,13 +57,13 @@
}
&:not(.crm-editable-editing):hover {
border: 1px solid $crm-darker-grayblue;
border: 1px solid $crm-grayblue-darker;
border-radius: $border-radius-base;
padding: 1px 30px 1px 3px;
&:before {
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;
bottom: 0;
content: "";
......
.table {
&.table-transparent {
background-color: transparent;
border: 1px solid $crm-dark-grayblue;
border: 1px solid $crm-grayblue-dark;
th {
background-color: transparent;
......
......@@ -13,7 +13,7 @@ $crm-text-angular-min-height: 120px;
.btn {
background: transparent;
border: none;
color: #727E8A;
color: $crm-copy;
&.active {
color: $gray-darker;
......
......@@ -22,13 +22,13 @@
a,
a:active,
a:hover {
color: $brand-primary;
color: $crm-wizard-active-font-color;
padding: 15px 20px;
}
li.active a {
background: $gray-lighter;
color: $brand-primary;
background: $crm-wizard-active-bg-color;
color: $crm-wizard-active-font-color;
position: relative;
&:after,
......@@ -45,12 +45,12 @@
}
&:after {
border-left-color: $gray-lighter;
border-left-color: $crm-wizard-active-bg-color;
right: -7px;
}
&:before {
border-left-color: $crm-white;
border-left-color: #ffffff;
left: 0;
}
}
......@@ -64,7 +64,7 @@
&:after,
&:before {
background: $gray-lighter;
background: $crm-wizard-active-bg-color;
content: '';
height: 31px;
position: absolute;
......@@ -84,9 +84,13 @@
&:hover {
background: none;
color: $brand-primary;
color: $crm-wizard-active-font-color;
}
}
li.completed a {
color: #00B0B9;
}
}
.panel-body {
......
......@@ -23,13 +23,13 @@
}
.crm_notification-badge__success {
background: $brand-success;
color: $crm-white;
background: $btn-success-bg;
color: $gray-darker;
}
.crm_notification-badge__warning {
background: $brand-warning;
color: $crm-white;
background: $btn-warning-bg;
color: $gray-darker;
}
.crm_notification-badge__danger {
......
// 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;
background-image: none;
background-color: transparent;
border-color: $color;
border-color: $bg-color;
&:focus,
&.focus,
&:active,
&.active,
.open > &.dropdown-toggle {
color: #fff;
color: $crm-white;
background-color: $bg-color;
border-color: $color;
border-color: $bg-color;
}
@include hover {
color: #fff;
background-color: $bg-color;
border-color: $color;
color: $hover-color;
background-color: darken($bg-color, $crm-darken-percentage);
border-color: darken($bg-color, $crm-darken-percentage);
}
&.disabled,
......
@mixin page-header-variant($bg-color) {
@mixin page-header-variant($bg-color, $title-color: $crm-white, $sm-color: $crm-background) {
background: $bg-color;
> h1,
......@@ -7,6 +7,10 @@
> h4,
> h5,
> h6 {
color: $crm-white;
color: $title-color;
small {
color: $sm-color;
}
}
}
......@@ -13,14 +13,14 @@
/**
* Dropdown arrow
*/
@mixin dropdown-arrow() {
content: '\f0d7';
border-left: 1px solid $input-border;
@mixin search-icon() {
content: '\f002';
bottom: 0;
font-family: "FontAwesome";
display: inline-block;
height: 100%;
line-height: $input-height-base;
pointer-events: none;
position: absolute;
right: 0;
text-align: center;
......
......@@ -11,21 +11,10 @@ $crm-modal-footer-shadow: inset 0 8px 21px -6px rgba(148, 148, 148, 0.4);
//##
$crm-page-breakpoint-min: 1240px !default; // Unfortunately arbitrary
$crm-page-sidebar-bg: #fff !default;
$crm-page-sidebar-max-width: 170px !default;
$crm-page-main-max-width: 1004px !default;
$crm-page-main-padding: 16px !default;
$crm-page-topbar-bg: #586277 !default;
$crm-page-topbar-bg-light: #656C80;
$crm-page-topbar-color: #fff !default;
$crm-page-topbar-item-padding: 15px !default;
$crm-accordion-header-color: #f3f6f7;
$crm-dasboard-header: #5D677B;
$crm-h3-color: #525966;
$crm-wizard-border: #eff3f5;
//
// Variables override
......@@ -44,31 +33,49 @@ $os-font-path: "../fonts/open-sans" !default;
//
//## Gray and brand colors for use across Bootstrap.
$crm-background: #E8EEF0 !default;
$crm-copy: #727E8A !default;
$gray-darker: #4D5663 !default;
$gray-dark: $crm-copy !default;
$gray-light: $crm-background !default;
$crm-gray-clay: #222831 !default;
$crm-gray-bright: #393E46 !default;
$gray-darker: #464354 !default;
$gray-dark: #4D4D69 !default;
$gray-light: #E8EEF0 !default;
$gray-lighter: #F3F6F7 !default;
$crm-gray-lightest: #FAFAFB !default;
$crm-gray-matte: #9494A5 !default;
$brand-primary: #0071BD !default;
$brand-success: #44CB7E !default;
$brand-info: #0071BD !default;
$brand-warning: #E6AB5E !default;
$brand-danger: #CF3458 !default;
$crm-grayblue-dark: #D3DEE2 !default;
$crm-grayblue-darker: #C2CFD8 !default;
$crm-white: #FFFFFF !default;
$crm-black: #000000 !default;
//== CRM specific variables
//
//## colors & varialbes used for CiviCRM
$crm-copy: $gray-dark !default;
$crm-background: $gray-light !default;
$brand-primary: #42AFCB !default;
$brand-success: #8EC68A !default;
$brand-info: #5bc0de !default;
$brand-warning: #ECA67F !default;
$brand-danger: #E6807F !default;
$crm-help-success: #d1e5ce;
$crm-brand-primary-light: lighten(desaturate(adjust-hue($brand-primary, 4.9301), 34.7499), 45.6863) !default;
$crm-brand-primary-lighter: lighten(desaturate(adjust-hue(#3ab1c9, -10.0699), 36.9721), 48.2353) !default;
$crm-color-neutral: $crm-grayblue-darker !default;
$crm-placeholder: $crm-gray-matte !default;
$crm-page-topbar-color: $crm-white !default;
$crm-page-sidebar-bg: $crm-white !default;
$crm-page-topbar-bg: $crm-gray-clay !default;
$crm-color-neutral: #949caa !default; // gray shade
$crm-dark-blue: #586277 !default;
$crm-dark-grayblue: #D3DEE2 !default;
$crm-darker-grayblue: #C2CFD8 !default;
$crm-white: #FFF !default;
$crm-dialog-container-border: #d3dee2;
$crm-success-dark: darken(desaturate(adjust-hue($brand-success, -26), 23.44), 8.04) !default;
$crm-warning-dark: darken(saturate(adjust-hue($brand-warning, -6), 26.88), 26.08) !default;
$crm-accordion-header-color: $gray-lighter;
$crm-darken-percentage: 7% !default;
$crm-lighten-percentage: 30% !default;
//== Scaffolding
//
......@@ -76,7 +83,6 @@ $crm-dialog-container-border: #d3dee2;
$body-bg: $crm-background !default;
//== Typography
//
//## Font, line-height, and color for body text, headings, and more.
......@@ -119,33 +125,29 @@ $icon-font-path: "../vendor/bootstrap/fonts/bootstrap/" !default;
//
//## Common layout spacings, margins, and paddings
$crm-gap-small: 5px !default;
$crm-gap-small: 5px !default;
//== Components
//
//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
$padding-base-vertical: 4px !default;
$padding-small-vertical: 2px !default;
$padding-base-vertical: 4px !default;
$padding-small-vertical: 2px !default;
$padding-base-horizontal: 10px !default;
$padding-base-horizontal: 10px !default;
$border-radius-base: 2px !default;
$border-radius-small: $border-radius-base !default;
$border-radius-child: 4px !default;
$border-radius-base: 2px !default;
$border-radius-small: $border-radius-base !default;
$border-radius-child: 4px !default;
//== Tables
//
//## Customizes the `.table` component with basic values, each used across all table variations.
$table-cell-padding: 10px 20px !default;
$table-bg: $crm-white !default;
$table-bg-accent: $crm-brand-primary-light !default;
$table-border-color: $gray-light !default;
$crm-table-heading-bg: $gray-lighter !default;
$crm-table-heading-border-color: $crm-dark-grayblue !default;
$table-cell-padding: 10px 20px !default;
$table-bg: $crm-white !default;
$table-border-color: $gray-light !default;
//== Buttons
......@@ -161,8 +163,9 @@ $crm-btn-padding-small-vertical: 5px;
$btn-default-color: $gray-darker;
$btn-default-bg: $crm-white !default;
$btn-default-border: $btn-default-bg !default;
$crm-btn-border-color: #979797;
$btn-success-color: $gray-darker !default;
$btn-warning-color: $gray-darker !default;
//== Forms
//
......@@ -170,28 +173,26 @@ $crm-btn-border-color: #979797;
$input-bg-disabled: $gray-lighter !default;
$input-color: $gray-darker !default;
$input-border: $crm-darker-grayblue !default;
$input-border: $crm-grayblue-darker !default;
$input-border-radius-large: $border-radius-base !default;
$input-border-radius-small: $border-radius-base !default;
$crm-input-addon-color: $gray-darker !default;
//== Dropdowns
//
//## Dropdown menu container and contents.
$dropdown-link-hover-bg: $gray-lighter !default;
$dropdown-header-color: $gray-darker !default;
$dropdown-link-hover-bg: $gray-lighter !default;
$dropdown-header-color: $gray-darker !default;
$crm-dropdown-padding: 11px 20px;
$crm-dropdown-padding: 11px 20px;