www.aleph1.co.uk Git - yaffs-website/blob - vendor/mehrpadin/superfish/style/THEMES.txt

   1 /*
   2  * Sample CSS to add Superfish CSS to themes.
   3  *
   4  * Instructions:
   5  *
   6  * 1. Change the #YOUR-BLOCK-ID (below) to the ID of your Superfish block.
   7  *
   8  * 2. Add the CSS to your theme, either as a separate CSS file or as a part of the main CSS file.
   9  *
  10  * 3. Note that by removing the .sf-style-none, the style will be applied to the menu regardless of
  11  *    the "Style" selected in the Superfish block configuration.
  12  *
  13  */
  14
  15 #YOUR-BLOCK-ID .sf-style-none {
  16   float: left;
  17   margin: 0;
  18   padding: 0;
  19 }
  20 #YOUR-BLOCK-ID .sf-style-none.sf-navbar {
  21   width: 100%;
  22 }
  23 #YOUR-BLOCK-ID .sf-style-none ul {
  24   padding-left: 0;
  25 }
  26 #YOUR-BLOCK-ID .sf-style-none a,
  27 #YOUR-BLOCK-ID .sf-style-none span.nolink {
  28   color: #0000ff;
  29   padding: 0.75em 1em;
  30 }
  31 #YOUR-BLOCK-ID .sf-style-none a.sf-with-ul,
  32 #YOUR-BLOCK-ID .sf-style-none span.nolink.sf-with-ul {
  33   padding-right: 2.25em;
  34 }
  35 #YOUR-BLOCK-ID .sf-style-none.rtl a.sf-with-ul,
  36 #YOUR-BLOCK-ID .sf-style-none.rtl span.nolink.sf-with-ul {
  37   padding-left: 2.25em;
  38   padding-right: 1em;
  39 }
  40 #YOUR-BLOCK-ID .sf-style-none span.sf-description {
  41   color: #0000ff;
  42   display: block;
  43   font-size: 0.833em;
  44   line-height: 1.5;
  45   margin: 5px 0 0 5px;
  46   padding: 0;
  47 }
  48 #YOUR-BLOCK-ID .sf-style-none.rtl span.sf-description {
  49   margin: 5px 5px 0 0;
  50 }
  51 #YOUR-BLOCK-ID .sf-style-none li,
  52 #YOUR-BLOCK-ID .sf-style-none.sf-navbar {
  53   background: #f0f0f0;
  54 }
  55 #YOUR-BLOCK-ID .sf-style-none li li {
  56   background: #e0e0e0;
  57 }
  58 #YOUR-BLOCK-ID .sf-style-none li li li {
  59   background: #d0d0d0;
  60 }
  61 #YOUR-BLOCK-ID .sf-style-none li:hover,
  62 #YOUR-BLOCK-ID .sf-style-none li.sfHover,
  63 #YOUR-BLOCK-ID .sf-style-none a:focus,
  64 #YOUR-BLOCK-ID .sf-style-none a:hover,
  65 #YOUR-BLOCK-ID .sf-style-none a:active,
  66 #YOUR-BLOCK-ID .sf-style-none span.nolink:hover {
  67   background: #c0c0c0;
  68   outline: 0;
  69 }
  70 #YOUR-BLOCK-ID .sf-style-none li:hover > ul,
  71 #YOUR-BLOCK-ID .sf-style-none li.sfHover > ul {
  72   top: 40px;
  73 }
  74 #YOUR-BLOCK-ID .sf-sub-indicator:after {
  75   content: "▼";
  76 }
  77 #YOUR-BLOCK-ID ul .sf-sub-indicator:after,
  78 #YOUR-BLOCK-ID .sf-vertical .sf-sub-indicator:after {
  79   content: "►";
  80 }
  81 #YOUR-BLOCK-ID .sf-navbar ul .sf-sub-indicator:after,
  82 #YOUR-BLOCK-ID .sf-accordion .sf-sub-indicator:after,
  83 #YOUR-BLOCK-ID .sf-accordion.sf-accordion-with-buttons .sf-accordion-button:after {
  84   content: "▼";
  85 }
  86 #YOUR-BLOCK-ID .sf-navbar ul ul .sf-sub-indicator:after {
  87   content: "►";
  88 }
  89 #YOUR-BLOCK-ID .sf-accordion.sf-accordion-with-buttons li.sf-expanded > .sf-accordion-button:after {
  90   content: "▲";
  91 }
  92 #YOUR-BLOCK-ID .sf-horizontal.rtl ul .sf-sub-indicator:after,
  93 #YOUR-BLOCK-ID .sf-vertical.rtl .sf-sub-indicator:after,
  94 #YOUR-BLOCK-ID .sf-navbar.rtl ul ul .sf-sub-indicator:after {
  95   content: "◄";
  96 }
  97 #YOUR-BLOCK-ID div.sf-accordion-toggle.sf-style-none a {
  98   background: #f0f0f0;
  99   color: #0000ff;
 100   padding: 1em;
 101 }
 102 #YOUR-BLOCK-ID div.sf-accordion-toggle.sf-style-none a.sf-expanded,
 103 #YOUR-BLOCK-ID .sf-style-none.sf-accordion li.sf-expanded {
 104   background: #c0c0c0;
 105 }
 106 #YOUR-BLOCK-ID div.sf-accordion-toggle.sf-style-none a.sf-expanded,
 107 #YOUR-BLOCK-ID .sf-style-none.sf-accordion li.sf-expanded > a,
 108 #YOUR-BLOCK-ID .sf-style-none.sf-accordion li.sf-expanded > span.nolink {
 109   font-weight: bold;
 110 }
 111 #YOUR-BLOCK-ID .sf-style-none.sf-accordion li a.sf-accordion-button {
 112   font-weight: bold;
 113   position: absolute;
 114   right: 0;
 115   top: 0;
 116   z-index: 499;
 117 }
 118 #YOUR-BLOCK-ID .sf-style-none.sf-accordion li li a,
 119 #YOUR-BLOCK-ID .sf-style-none.sf-accordion li li span.nolink {
 120   padding-left: 2em;
 121 }
 122 #YOUR-BLOCK-ID .sf-style-none.sf-accordion li li li a,
 123 #YOUR-BLOCK-ID .sf-style-none.sf-accordion li li li span.nolink {
 124   padding-left: 3em;
 125 }
 126 #YOUR-BLOCK-ID .sf-style-none.sf-accordion li li li li a,
 127 #YOUR-BLOCK-ID .sf-style-none.sf-accordion li li li li span.nolink {
 128   padding-left: 4em;
 129 }
 130 #YOUR-BLOCK-ID .sf-style-none.sf-accordion li li li li li a,
 131 #YOUR-BLOCK-ID .sf-style-none.sf-accordion li li li li li span.nolink {
 132   padding-left: 5em;
 133 }
 134 #YOUR-BLOCK-ID .sf-style-none.rtl.sf-accordion li li a,
 135 #YOUR-BLOCK-ID .sf-style-none.rtl.sf-accordion li li span.nolink {
 136   padding-left: auto;
 137   padding-right: 2em;
 138 }
 139 #YOUR-BLOCK-ID .sf-style-none.rtl.sf-accordion li li li a,
 140 #YOUR-BLOCK-ID .sf-style-none.rtl.sf-accordion li li li span.nolink {
 141   padding-left: auto;
 142   padding-right: 3em;
 143 }
 144 #YOUR-BLOCK-ID .sf-style-none.rtl.sf-accordion li li li li a,
 145 #YOUR-BLOCK-ID .sf-style-none.rtl.sf-accordion li li li li span.nolink {
 146   padding-left: auto;
 147   padding-right: 4em;
 148 }
 149 #YOUR-BLOCK-ID .sf-style-none.rtl.sf-accordion li li li li li a,
 150 #YOUR-BLOCK-ID .sf-style-none.rtl.sf-accordion li li li li li span.nolink {
 151   padding-left: auto;
 152   padding-right: 5em;
 153 }
 154 #YOUR-BLOCK-ID .sf-style-none li.sf-multicolumn-wrapper ol,
 155 #YOUR-BLOCK-ID .sf-style-none li.sf-multicolumn-wrapper ol li {
 156   margin: 0;
 157   padding: 0;
 158 }
 159 #YOUR-BLOCK-ID .sf-style-none li.sf-multicolumn-wrapper a.menuparent,
 160 #YOUR-BLOCK-ID .sf-style-none li.sf-multicolumn-wrapper span.nolink.menuparent {
 161   font-weight: bold;
 162 }
 163 #YOUR-BLOCK-ID .sf-style-none li.sf-multicolumn-wrapper {
 164   background: #c0c0c0;
 165 }
 166 #YOUR-BLOCK-ID .sf-style-none li.sf-multicolumn-wrapper li {
 167   background: transparent;
 168 }