scss for Superfish

Submitted by admin on Mon, 01/09/2017 - 21:39

This is a scss file to generate css for Superfish

http://users.tpg.com.au/j_birch/plugins/superfish/

/*
 * Sample SCSS for adding Superfish styles to themes.
 *
 * Instructions:
 *
 * 1. Change the #block-superfish-1 (below) to the ID of your Superfish menu.
 *
 * 2. Add the SCSS to your theme, either as a separate SCSS file or as a part of the main SCSS file.
 *
 * 3. Note that by removing the .sf-style-default, the style will be applied to the menu regardless of
 *    the Style selected in the block configuration.
 *
 */
 
// You can add these variables to your _base.scss
 
$superfish-1-color: #fff; // links
$superfish-1-background-color-level-first: #A3BA54;
$superfish-1-background-color-level-second: #A3BA54;
$superfish-1-background-color-level-third: #A3BA54;
$superfish-1-background-color-level-fourth: #008a00; // hover
 
.sf-menu.sf-style-default {
  float: left;
  margin-bottom: 1em;
  padding: 0;
}
.sf-menu.sf-style-default.sf-navbar {
  width: 100%;
}
.sf-menu.sf-style-default ul {
  padding-left: 0;
}
.sf-menu.sf-style-default a,
.sf-menu.sf-style-default a:visited,
.sf-menu.sf-style-default span.nolink {
  border-left: 1px solid #fff;
  border-top: 1px solid #cfdeff;
  color: $superfish-1-color;
  padding: 0.75em 1em;
}
.sf-menu.sf-style-default a.sf-with-ul,
.sf-menu.sf-style-default span.nolink.sf-with-ul {
  padding-right: 2.25em;
}
.sf-menu.sf-style-default.rtl a.sf-with-ul,
.sf-menu.sf-style-default.rtl span.nolink.sf-with-ul {
  padding-left: 2.25em;
  padding-right: 1em;
}
.sf-menu.sf-style-default span.sf-description {
  color: $superfish-1-color;
  display: block;
  font-size: 0.833em;
  line-height: 1.5;
  margin: 5px 0 0 5px;
  padding: 0;
}
.sf-menu.sf-style-default.rtl span.sf-description {
  margin: 5px 5px 0 0;
}
.sf-menu.sf-style-default li,
.sf-menu.sf-style-default.sf-navbar {
  background: $superfish-1-background-color-level-first
}
.sf-menu.sf-style-default li li {
  background: $superfish-1-background-color-level-second;
}
.sf-menu.sf-style-default li li li {
  background: $superfish-1-background-color-level-third;
}
.sf-menu.sf-style-default li:hover,
.sf-menu.sf-style-default li.sfHover,
.sf-menu.sf-style-default a:focus,
.sf-menu.sf-style-default a:hover,
.sf-menu.sf-style-default a:active,
.sf-menu.sf-style-default span.nolink:hover {
  background: $superfish-1-background-color-level-fourth;
  outline: 0;
}
div.sf-accordion-toggle.sf-style-default a {
  background: $superfish-1-background-color-level-first;
  border-left: 1px solid #fff;
  border-top: 1px solid #cfdeff;
  color: $superfish-1-color;
  padding: 1em;
}
div.sf-accordion-toggle.sf-style-default a.sf-expanded,
.sf-menu.sf-style-default.sf-accordion li.sf-expanded {
  background-color: $superfish-1-background-color-level-fourth;
}
div.sf-accordion-toggle.sf-style-default a.sf-expanded,
.sf-menu.sf-style-default.sf-accordion li.sf-expanded > a,
.sf-menu.sf-style-default.sf-accordion li.sf-expanded > span.nolink {
  font-weight: bold;
}
.sf-menu.sf-style-default.sf-accordion li a.sf-accordion-button {
  font-weight: bold;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 499;
}
.sf-menu.sf-style-default.sf-accordion li li a,
.sf-menu.sf-style-default.sf-accordion li li span.nolink {
  padding-left: 2em;
}
.sf-menu.sf-style-default.sf-accordion li li li a,
.sf-menu.sf-style-default.sf-accordion li li li span.nolink {
  padding-left: 3em;
}
.sf-menu.sf-style-default.sf-accordion li li li li a,
.sf-menu.sf-style-default.sf-accordion li li li li span.nolink {
  padding-left: 4em;
}
.sf-menu.sf-style-default.sf-accordion li li li li li a,
.sf-menu.sf-style-default.sf-accordion li li li li li span.nolink {
  padding-left: 5em;
}
.sf-menu.sf-style-default.rtl.sf-accordion li li a,
.sf-menu.sf-style-default.rtl.sf-accordion li li span.nolink {
  padding-left: auto;
  padding-right: 2em;
}
.sf-menu.sf-style-default.rtl.sf-accordion li li li a,
.sf-menu.sf-style-default.rtl.sf-accordion li li li span.nolink {
  padding-left: auto;
  padding-right: 3em;
}
.sf-menu.sf-style-default.rtl.sf-accordion li li li li a,
.sf-menu.sf-style-default.rtl.sf-accordion li li li li span.nolink {
  padding-left: auto;
  padding-right: 4em;
}
.sf-menu.sf-style-default.rtl.sf-accordion li li li li li a,
.sf-menu.sf-style-default.rtl.sf-accordion li li li li li span.nolink {
  padding-left: auto;
  padding-right: 5em;
}
.sf-menu.sf-style-default ul.sf-megamenu li.sf-megamenu-wrapper ol,
.sf-menu.sf-style-default ul.sf-megamenu li.sf-megamenu-wrapper ol li {
  margin: 0;
  padding: 0;
}
.sf-menu.sf-style-default ul.sf-megamenu li.sf-megamenu-wrapper a.menuparent,
.sf-menu.sf-style-default ul.sf-megamenu li.sf-megamenu-wrapper span.nolink.menuparent {
  font-weight: bold;
}
.sf-menu.sf-style-default ul.sf-megamenu li.sf-megamenu-wrapper ol li.sf-megamenu-column {
  display: inline;
  float: left;
}
.sf-menu.sf-style-default.rtl ul.sf-megamenu li.sf-megamenu-wrapper ol li.sf-megamenu-column {
  float: right;
}

Etiquetas