Commit e2d4afa0 authored by jhodgdon's avatar jhodgdon

Issue #1216978 by cosmicdreams, jyve, mortendk, jessebeach, Jacine,...

Issue #1216978 by cosmicdreams, jyve, mortendk, jessebeach, Jacine, aspilicious: Clean up CSS for Contextual module
parent 9ab89f08
/**
* @file
* RTL base styles for the Contextual module.
*/
.contextual .trigger {
text-align: left;
}
/**
* @file
* Generic base styles for contextual module.
*/
/**
* Contextual links behavior.
*/
.contextual,
.contextual .contextual-links,
.contextual .trigger {
display: none;
}
.contextual-region:hover .contextual,
.contextual-region:hover .trigger,
.contextual-active .trigger,
.contextual-active .contextual-links {
display: block;
}
/**
* Contextual links structure.
*/
.contextual-region {
position: relative;
}
.contextual {
position: absolute;
z-index: 999;
}
.contextual .trigger {
overflow: hidden;
position: relative;
text-align: right; /* LTR */
z-index: 1;
}
...@@ -12,23 +12,23 @@ Drupal.contextualLinks = Drupal.contextualLinks || {}; ...@@ -12,23 +12,23 @@ Drupal.contextualLinks = Drupal.contextualLinks || {};
*/ */
Drupal.behaviors.contextualLinks = { Drupal.behaviors.contextualLinks = {
attach: function (context) { attach: function (context) {
$('div.contextual-links-wrapper', context).once('contextual-links', function () { $('div.contextual', context).once('contextual-links', function () {
var $wrapper = $(this); var $wrapper = $(this);
var $region = $wrapper.closest('.contextual-links-region'); var $region = $wrapper.closest('.contextual-region');
var $links = $wrapper.find('ul.contextual-links'); var $links = $wrapper.find('ul');
var $trigger = $('<a class="contextual-links-trigger" href="#" />').text(Drupal.t('Configure')).click( var $trigger = $('<a class="trigger" href="#" />').text(Drupal.t('Configure')).click(
function () { function () {
$links.stop(true, true).slideToggle(100); $links.stop(true, true).slideToggle(100);
$wrapper.toggleClass('contextual-links-active'); $wrapper.toggleClass('contextual-active');
return false; return false;
} }
); );
// Attach hover behavior to trigger and ul.contextual-links. // Attach hover behavior to trigger and ul.contextual-links.
$trigger.add($links).hover( $trigger.add($links).hover(
function () { $region.addClass('contextual-links-region-active'); }, function () { $region.addClass('contextual-region-active'); },
function () { $region.removeClass('contextual-links-region-active'); } function () { $region.removeClass('contextual-region-active'); }
); );
// Hide the contextual links when user clicks a link or rolls out of the .contextual-links-region. // Hide the contextual links when user clicks a link or rolls out of the .contextual-region.
$region.bind('mouseleave click', Drupal.contextualLinks.mouseleave); $region.bind('mouseleave click', Drupal.contextualLinks.mouseleave);
// Prepend the trigger. // Prepend the trigger.
$wrapper.prepend($trigger); $wrapper.prepend($trigger);
...@@ -41,8 +41,8 @@ Drupal.behaviors.contextualLinks = { ...@@ -41,8 +41,8 @@ Drupal.behaviors.contextualLinks = {
*/ */
Drupal.contextualLinks.mouseleave = function () { Drupal.contextualLinks.mouseleave = function () {
$(this) $(this)
.find('.contextual-links-active').removeClass('contextual-links-active') .find('.contextual-active').removeClass('contextual-active')
.find('ul.contextual-links').hide(); .find('.contextual-links').hide();
}; };
})(jQuery); })(jQuery);
...@@ -48,7 +48,8 @@ function contextual_library_info() { ...@@ -48,7 +48,8 @@ function contextual_library_info() {
$path . '/contextual.js' => array(), $path . '/contextual.js' => array(),
), ),
'css' => array( 'css' => array(
$path . '/contextual.css' => array(), $path . '/contextual.base.css' => array(),
$path . '/contextual.theme.css' => array(),
), ),
); );
return $libraries; return $libraries;
...@@ -62,11 +63,9 @@ function contextual_element_info() { ...@@ -62,11 +63,9 @@ function contextual_element_info() {
'#pre_render' => array('contextual_pre_render_links'), '#pre_render' => array('contextual_pre_render_links'),
'#theme' => 'links__contextual', '#theme' => 'links__contextual',
'#links' => array(), '#links' => array(),
'#prefix' => '<div class="contextual-links-wrapper">', '#prefix' => '<div class="contextual">',
'#suffix' => '</div>', '#suffix' => '</div>',
'#attributes' => array( '#attributes' => array('class' => array('contextual-links')),
'class' => array('contextual-links'),
),
'#attached' => array( '#attached' => array(
'library' => array( 'library' => array(
array('contextual', 'contextual-links'), array('contextual', 'contextual-links'),
...@@ -109,7 +108,7 @@ function contextual_preprocess(&$variables, $hook) { ...@@ -109,7 +108,7 @@ function contextual_preprocess(&$variables, $hook) {
'#element' => $element, '#element' => $element,
); );
// Mark this element as potentially having contextual links attached to it. // Mark this element as potentially having contextual links attached to it.
$variables['classes_array'][] = 'contextual-links-region'; $variables['classes_array'][] = 'contextual-region';
} }
} }
......
/** /**
* @file * @file
* Stylesheet specific to right-to-left languages. * RTL styling for contextual module.
*/ */
div.contextual-links-wrapper { .contextual {
left: 5px; left: 5px;
right: auto; right: auto;
} }
div.contextual-links-wrapper ul.contextual-links { .contextual .contextual-links {
-moz-border-radius: 0 4px 4px 4px; -moz-border-radius: 0 4px 4px 4px; /* FF3.6 */
border-radius: 0 4px 4px 4px; border-radius: 0 4px 4px 4px;
left: 0; left: 0;
right: auto; right: auto;
} }
a.contextual-links-trigger {
text-indent: -90px; .contextual-region .contextual .contextual-links a {
text-align: right;
padding: 0.4em 0.6em 0.4em 0.8em;
} }
/** /**
* @file * @file
* Stylesheet for the Contextual module. * Styling for contextual module.
*/ */
/** /**
* Contextual links regions. * Contextual links wrappers.
*/ */
.contextual-links-region { .contextual-region-active {
outline: none; outline: 1px dashed #d6d6d6;
position: relative; outline-offset: 1px;
} }
.contextual-links-region-active { .contextual {
outline: #999 dashed 1px; right: 2px; /* LTR */
top: 2px;
} }
/** /**
* Contextual links. * Contextual trigger.
*/ */
div.contextual-links-wrapper { .contextual .trigger {
display: none;
font-size: 90%;
position: absolute;
right: 5px; /* LTR */
top: 2px;
z-index: 999;
}
.js div.contextual-links-wrapper {
display: block;
}
a.contextual-links-trigger {
background: transparent url(images/gear-select.png) no-repeat 2px 0; background: transparent url(images/gear-select.png) no-repeat 2px 0;
border: 1px solid transparent; border: 1px solid transparent;
display: none;
height: 18px; height: 18px;
margin: 0; margin: 0;
padding: 0 2px;
outline: none; outline: none;
text-indent: 34px; /* LTR */
width: 28px;
overflow: hidden; overflow: hidden;
-moz-border-radius: 4px; padding: 0 2px;
border-radius: 4px; text-indent: 34px;
width: 28px;
} }
a.contextual-links-trigger:hover, .contextual .trigger:hover,
div.contextual-links-active a.contextual-links-trigger { .contextual-active .trigger {
background-position: 2px -18px; background-position: 2px -18px;
} }
div.contextual-links-active a.contextual-links-trigger { .contextual-active .trigger {
background-color: #fff; background-color: #ffffff;
border-color: #ccc;
border-bottom: none; border-bottom: none;
border-color: #d6d6d6;
-moz-border-radius: 4px 4px 0 0; /* FF3.6 */
border-radius: 4px 4px 0 0;
position: relative; position: relative;
z-index: 1; z-index: 1;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
} }
div.contextual-links-wrapper ul.contextual-links {
/**
* Contextual links.
*/
.contextual .contextual-links {
background-color: #fff; background-color: #fff;
border: 1px solid #ccc; border: 1px solid #d6d6d6;
display: none; -moz-border-radius: 4px 0 4px 4px; /* FF3.6 */
border-radius: 4px 0 4px 4px; /* LTR */
margin: 0; margin: 0;
padding: 0.25em 0; padding: 0.25em 0;
position: absolute; position: absolute;
right: 0; right: 0; /* LTR */
text-align: left; text-align: left;
top: 18px; top: 18px;
white-space: nowrap; white-space: nowrap;
-moz-border-radius: 4px 0 4px 4px; /* LTR */
border-radius: 4px 0 4px 4px; /* LTR */
} }
.contextual-links-region:hover a.contextual-links-trigger, /* Reset the li to prevent accidential overrides by a theme. */
div.contextual-links-active a.contextual-links-trigger, .contextual-region .contextual .contextual-links li {
div.contextual-links-active ul.contextual-links { background-color: #fff;
display: block; border: none;
}
ul.contextual-links li {
line-height: 100%;
list-style: none; list-style: none;
list-style-image: none; list-style-image: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
div.contextual-links-wrapper a { .contextual-region .contextual .contextual-links a {
text-decoration: none;
}
ul.contextual-links li a {
color: #333 !important;
display: block; display: block;
font-family: sans-serif;
font-size: small;
line-height: 0.8em;
margin: 0.25em 0; margin: 0.25em 0;
padding: 0.25em 1em 0.25em 0.5em; padding: 0.4em 0.8em 0.4em 0.6em; /* LTR */
}
.contextual-region .contextual .contextual-links a,
.contextual-region .contextual .contextual-links a:hover,
.contextual-region .contextual .contextual-links a:active,
.contextual-region .contextual .contextual-links a:focus {
background-color: #fff;
color: #333;
text-decoration: none;
} }
ul.contextual-links li a:hover { .contextual-region .contextual .contextual-links li a:hover {
background-color: #bfdcee; background-color: #bfdcee;
} }
...@@ -229,13 +229,8 @@ table ul.links li { ...@@ -229,13 +229,8 @@ table ul.links li {
margin: 0; margin: 0;
padding: 0 0 0.25em 1em; /* LTR */ padding: 0 0 0.25em 1em; /* LTR */
} }
.contextual-links-wrapper { .contextual-region .contextual .contextual-links a {
font-size: small !important;
}
ul.contextual-links {
font-size: 0.923em; font-size: 0.923em;
}
.contextual-links-wrapper a {
text-shadow: 0 0 0 !important; text-shadow: 0 0 0 !important;
} }
.item-list .pager { .item-list .pager {
......
Markdown is supported
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