Commit 93fda551 authored by Aegir user's avatar Aegir user

Merge branch 'master' of lab.civicrm.org:marketing-team/civicrm-website

parents 40556355 7b72e59c
deploy_production:
script:
- sudo -u aegir -- sh -c 'cd /var/aegir/platforms/civicrm-org/sites/civicrm.org/ && git pull && drush @civicrm.org cc all'
only:
- master
tags:
- www-prod-2
......@@ -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;
......@@ -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>
......
/**
* This script is responsible for any common UI tweaks needed via script.
*/
(function ($, _) {
// [ML] removed menu hack
}(CRM.$, CRM._));
(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;
......
table {
thead.sticky th > .sticky-header {
background: $crm-table-heading-bg;
border-bottom: 1px solid $crm-table-heading-border-color;
background: $gray-lighter;
border-bottom: 1px solid $crm-grayblue-dark;
height: auto;
// This makes the sticky header play nicely with admin header:
margin-top: 8px;
......
......@@ -13,9 +13,11 @@
}
.badge-success {
background: $brand-success;
background: $btn-success-bg;
color: $gray-darker;
}
.badge-warning {
background: $brand-warning;
background: $btn-warning-bg;
color: $gray-darker;
}
......@@ -16,12 +16,12 @@
// Adds missing border color on button hover:
&:hover {
border-color: $crm-darker-grayblue;
border-color: $crm-grayblue-darker;
}
&.active {
background-color: $gray;
color: #FFF;
color: $crm-white;
}
}
}
......@@ -60,45 +60,49 @@
.btn-primary {
&:hover {
background-color: lighten(desaturate(adjust-hue($btn-primary-bg, 0.6298), 0.0390), 5.4902);
background-color: darken($btn-primary-bg, $crm-darken-percentage);
}
}
.btn-success {
color: $gray-darker;
&:hover {
background-color: lighten(desaturate(adjust-hue($btn-success-bg, 0.6298), 0.0390), 5.4902);
background-color: darken($btn-success-bg, $crm-darken-percentage);
color: $crm-black;
}
}
.btn-info {
&:hover {
background-color: lighten(desaturate(adjust-hue($btn-info-bg, 0.6298), 0.0390), 5.4902);
background-color: darken($btn-info-bg, $crm-darken-percentage);
}
}
.btn-warning {
color: $gray-darker;
&:hover {
background-color: lighten(desaturate(adjust-hue($btn-warning-bg, 0.6298), 0.0390), 5.4902);
background-color: darken($btn-warning-bg, $crm-darken-percentage);
color: $crm-black;
}
}
.btn-danger {
&:hover {
background-color: lighten(desaturate(adjust-hue($btn-danger-bg, 0.6298), 0.0390), 5.4902);
background-color: darken($btn-danger-bg, $crm-darken-percentage);
}
}
//== From Bootstrap 4 alpha
.btn-secondary {
@include button-variant(#ffffff, $gray-dark, $gray-darker);
@include button-variant($crm-white, $gray-dark, $gray-dark);
@include button-remove-border-color();
&:hover {
background-color: lighten(desaturate(adjust-hue($gray-dark, 0.6298), 0.0390), 5.4902);
background-color: darken($crm-copy, $crm-darken-percentage);
}
}
......@@ -22,21 +22,21 @@ label {
&[disabled],
&[readonly],
fieldset[disabled] & {
color: $crm-darker-grayblue;
color: $crm-grayblue-darker;
}
&[type="text"] {
&::-webkit-input-placeholder {
color: $crm-dark-grayblue;
color: $crm-grayblue-dark;
}
&::-moz-placeholder {
color: $crm-dark-grayblue;
color: $crm-grayblue-dark;
opacity: 1;
}
&:-ms-input-placeholder {
color: $crm-dark-grayblue;
color: $crm-grayblue-dark;
}
}
}
......@@ -106,7 +106,7 @@ label {
// We also define "active" class that can be assigned to form group and give it the appropriate interactive style.
.form-inline-tabs {
.form-group {
border: 1px solid $crm-darker-grayblue;
border: 1px solid $crm-grayblue-darker;
box-shadow: $crm-form-control-shadow;
line-height: 1em;
min-width: 180px;
......@@ -145,6 +145,8 @@ label {
.checkbox-inline label {
color: $state-success-text;
}
@include form-control-validation($state-success-text, $state-success-border, $state-success-bg);
}
.has-warning {
......@@ -155,6 +157,8 @@ label {
.checkbox-inline label {
color: $state-warning-text;
}
@include form-control-validation($state-warning-text, $state-warning-border, $state-warning-bg);
}
.has-error {
......
.input-group-addon {
color: $crm-input-addon-color;
color: $gray-darker;
}
......@@ -2,3 +2,8 @@
font-size: 92.308%; // 12px as a standalone (not in a header) label
font-weight: 400;
}
.label-success,
.label-warning {
color: $gray-darker;
}
......@@ -3,7 +3,7 @@
> li {
> a {
color: $crm-nav-color;
color: $gray-darker;
font-weight: 600;
}
......@@ -99,7 +99,7 @@
// Contextual variations
.nav-pills-horizontal-default {
@include nav-pills-horizontal-variant($crm-nav-stacked-bg, $crm-nav-color, false);
@include nav-pills-horizontal-variant($crm-nav-stacked-bg, $gray-darker, false);
}
.nav-pills-horizontal-primary {
......@@ -107,7 +107,7 @@
}
.nav-pills-horizontal-success {
@include nav-pills-horizontal-variant($brand-success, $crm-white);
@include nav-pills-horizontal-variant($btn-success-bg, $gray-darker);
}
.nav-pills-horizontal-info {
......@@ -115,7 +115,7 @@
}
.nav-pills-horizontal-warning {
@include nav-pills-horizontal-variant($brand-warning, $crm-white);
@include nav-pills-horizontal-variant($btn-warning-bg, $gray-darker);
}
.nav-pills-horizontal-danger {
......@@ -161,7 +161,7 @@