home | career | drupal | java | mac | mysql | perl | php | scala | uml | unix

Drupal example source code file (contextual.css)

This example Drupal source code file (contextual.css) is included in the DevDaily.com "Drupal Source Code Warehouse" project. The intent of this project is to help you "Learn Drupal by Example".

PHP - Drupal tags/keywords

18px, 1px, 2px, 4px, background-color, border-radius, display, ltr, margin, moz-border-radius, none, outline, padding, position

The contextual.css Drupal example source code

/* $Id: contextual.css,v 1.9 2011/01/03 07:04:48 webchick Exp $ */

/**
 * 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-position: 2px -18px;
  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;
}

Other Drupal examples (source code examples)

Here is a short list of links related to this Drupal contextual.css source code file:

new blog posts

"Drupal" is a registered trademark of Dries Buytaert.

my drupal tutorials and examples  

Copyright 1998-2016 Alvin Alexander, alvinalexander.com
All Rights Reserved.

Beginning in 2016, a portion of the proceeds from pages under the '/drupal-code-examples/' URI will be donated to charity.