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