diff --git a/core/modules/contextual/contextual-rtl.css b/core/modules/contextual/contextual-rtl.css deleted file mode 100644 index aecbee0..0000000 --- a/core/modules/contextual/contextual-rtl.css +++ /dev/null @@ -1,20 +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; - -webkit-border-top-left-radius: 0; - -webkit-border-top-right-radius: 4px; - border-radius: 0 4px 4px 4px; - left: 0; - right: auto; -} -a.contextual-links-trigger { - text-indent: -90px; -} diff --git a/core/modules/contextual/contextual.base-rtl.css b/core/modules/contextual/contextual.base-rtl.css new file mode 100644 index 0000000..5f5b40c --- /dev/null +++ b/core/modules/contextual/contextual.base-rtl.css @@ -0,0 +1,13 @@ + +/** + * @file + * RTL base styles for the Contextual module. + */ + +.contextual { + left: 0; + right: auto; +} +.contextual .trigger { + text-align: left; +} \ No newline at end of file diff --git a/core/modules/contextual/contextual.base.css b/core/modules/contextual/contextual.base.css new file mode 100644 index 0000000..1e5ca45 --- /dev/null +++ b/core/modules/contextual/contextual.base.css @@ -0,0 +1,39 @@ + +/** + * @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; + right: 0; /* LTR */ + top: 0; + z-index: 999; +} +.contextual .trigger { + overflow: hidden; + position: relative; + text-align: right; /* LTR */ + z-index: 1; +} \ No newline at end of file diff --git a/core/modules/contextual/contextual.css b/core/modules/contextual/contextual.css deleted file mode 100644 index 3829328..0000000 --- a/core/modules/contextual/contextual.css +++ /dev/null @@ -1,103 +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; -} -html.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; - -khtml-border-radius: 4px; - -moz-border-radius: 4px; - -webkit-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; - -webkit-border-bottom-left-radius: 0; - -webkit-border-bottom-right-radius: 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 */ - -webkit-border-bottom-left-radius: 4px; - -webkit-border-bottom-right-radius: 4px; - -webkit-border-top-right-radius: 0; /* LTR */ - -webkit-border-top-left-radius: 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; -} diff --git a/core/modules/contextual/contextual.js b/core/modules/contextual/contextual.js index ebe5091..b01c907 100644 --- a/core/modules/contextual/contextual.js +++ b/core/modules/contextual/contextual.js @@ -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 = $('').text(Drupal.t('Configure')).click( + var $region = $wrapper.closest('.contextual-region'); + var $links = $wrapper.find('ul'); + var $trigger = $('').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. + // Attach hover behavior to trigger and ul.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); diff --git a/core/modules/contextual/contextual.module b/core/modules/contextual/contextual.module index 7b14a3f..96b6869 100644 --- a/core/modules/contextual/contextual.module +++ b/core/modules/contextual/contextual.module @@ -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' => '
', + '#prefix' => '
', '#suffix' => '
', - '#attributes' => array( - 'class' => array('contextual-links'), - ), + '#attributes' => array('class'=>'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'; } } diff --git a/core/modules/contextual/contextual.theme-rtl.css b/core/modules/contextual/contextual.theme-rtl.css new file mode 100644 index 0000000..64346e8 --- /dev/null +++ b/core/modules/contextual/contextual.theme-rtl.css @@ -0,0 +1,15 @@ + +/** + * @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; +} diff --git a/core/modules/contextual/contextual.theme.css b/core/modules/contextual/contextual.theme.css new file mode 100644 index 0000000..17f2080 --- /dev/null +++ b/core/modules/contextual/contextual.theme.css @@ -0,0 +1,91 @@ + +/** + * @file + * Styling for contextual module. + */ + +/** + * Contextual links wrappers. + */ +.contextual-region-active { + *border: 1px dashed #D6D6D6; /* IE7 */ + outline: 1px dashed #D6D6D6; + outline-offset: 1px; +} +.contextual { + right: 5px; /* 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: #FFF; + border-bottom: none; + border-color: #D6D6D6; + position: relative; + z-index: 1; + -moz-border-radius: 4px 4px 0 0; /* FF3.6 */ + border-radius: 4px 4px 0 0; +} + +/** + * Contextual links. + */ +.contextual .contextual-links { + background-color: #FFF; + border: 1px solid #D6D6D6; + margin: 0; + padding: 0.25em 0; + position: absolute; + right: 0; /* LTR */ + text-align: left; + top: 18px; + white-space: nowrap; + -moz-border-radius: 4px 0 4px 4px; /* FF3.6 */ + border-radius: 4px 0 4px 4px; /* LTR */ +} +/* Reset the li to prevent accedential overrides by a theme. */ +.contextual ul.contextual-links li { + background-color: #FFF; + border: none; + list-style: none; + list-style-image: none; + margin: 0; + padding: 0; +} +.contextual .contextual-links a { + display: block; + font-family: sans-serif; + font-size: small; + line-height: normal; + margin: 0.25em 0; + padding: 0.25em 1em; +} +.contextual .contextual-links a, +.contextual .contextual-links a:hover, +.contextual .contextual-links a:active, +.contextual .contextual-links a:focus { + background-color: #FFF; + color: #333; + text-decoration: none; +} +.contextual .contextual-links li a:hover { + background-color: #BFDCEE; +}