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

   1 /*
   2  * Sample SCSS for adding 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 SCSS to your theme.
   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 // You can add these variables to your _base.scss
  16 $superfish-1-color: #00f;
  17 $superfish-1-background-color-level-first: #f0f0f0;
  18 $superfish-1-background-color-level-second: #e0e0e0;
  19 $superfish-1-background-color-level-third: #d0d0d0;
  20 $superfish-1-background-color-level-fourth: #c0c0c0;
  21
  22 #YOUR-BLOCK-ID {
  23   .sf-style-none {
  24     float: left;
  25     margin: 0;
  26     padding: 0;
  27     &.sf-navbar {
  28       width: 100%;
  29       background: $superfish-1-background-color-level-first;
  30     }
  31     ul {
  32       padding-left: 0;
  33       &.sf-multicolumn li {
  34         &.sf-multicolumn-wrapper {
  35           background: $superfish-1-background-color-level-fourth;
  36           li {
  37             background: transparent;
  38           }
  39         }
  40       }
  41     }
  42     a {
  43       color: $superfish-1-color;
  44       padding: 0.75em 1em;
  45       &.sf-with-ul {
  46         padding-right: 2.25em;
  47       }
  48       &:focus {
  49         background: $superfish-1-background-color-level-fourth;
  50         outline: 0;
  51       }
  52       &:hover {
  53         background: $superfish-1-background-color-level-fourth;
  54         outline: 0;
  55       }
  56       &:active {
  57         background: $superfish-1-background-color-level-fourth;
  58         outline: 0;
  59       }
  60     }
  61     span {
  62       &.nolink {
  63         color: $superfish-1-color;
  64         padding: 0.75em 1em;
  65         &.sf-with-ul {
  66           padding-right: 2.25em;
  67         }
  68         &:hover {
  69           background: $superfish-1-background-color-level-fourth;
  70           outline: 0;
  71         }
  72       }
  73       &.sf-description {
  74         color: $superfish-1-color;
  75         display: block;
  76         font-size: 0.833em;
  77         line-height: 1.5;
  78         margin: 5px 0 0 5px;
  79         padding: 0;
  80       }
  81     }
  82     &.rtl {
  83       span {
  84         &.sf-description {
  85           margin: 5px 5px 0 0;
  86         }
  87         &.nolink.sf-with-ul {
  88           padding-left: 2.25em;
  89           padding-right: 1em;
  90         }
  91       }
  92       a.sf-with-ul {
  93         padding-left: 2.25em;
  94         padding-right: 1em;
  95       }
  96     }
  97     li {
  98       background: $superfish-1-background-color-level-first;
  99       li {
 100         background: $superfish-1-background-color-level-second;
 101         li {
 102           background: $superfish-1-background-color-level-third;
 103         }
 104       }
 105       &:hover {
 106         background: $superfish-1-background-color-level-fourth;
 107         outline: 0;
 108         > ul {
 109           top: 40px;
 110         }
 111       }
 112       &.sfHover {
 113         background: $superfish-1-background-color-level-fourth;
 114         outline: 0;
 115         > ul {
 116           top: 40px;
 117         }
 118       }
 119     }
 120     .sf-sub-indicator {
 121       background-image: url('../images/dropdown-arrows.png');
 122     }
 123   }
 124   div.sf-accordion-toggle {
 125     &.sf-style-none a {
 126       background: $superfish-1-background-color-level-first;
 127       color: $superfish-1-color;
 128       padding: 1em;
 129       &.sf-expanded {
 130         background: $superfish-1-background-color-level-fourth;
 131         font-weight: bold;
 132       }
 133     }
 134   }
 135   .sf-menu.sf-style-none {
 136     &.rtl {
 137       &.sf-accordion li {
 138         li {
 139           a {
 140             padding-left: auto;
 141             padding-right: 2em;
 142           }
 143           li {
 144             a {
 145               padding-left: auto;
 146               padding-right: 3em;
 147             }
 148             li {
 149               a {
 150                 padding-left: auto;
 151                 padding-right: 4em;
 152               }
 153               li {
 154                 a {
 155                   padding-left: auto;
 156                   padding-right: 5em;
 157                 }
 158                 span.nolink {
 159                   padding-left: auto;
 160                   padding-right: 5em;
 161                 }
 162               }
 163               span.nolink {
 164                 padding-left: auto;
 165                 padding-right: 4em;
 166               }
 167             }
 168             span.nolink {
 169               padding-left: auto;
 170               padding-right: 3em;
 171             }
 172           }
 173           span.nolink {
 174             padding-left: auto;
 175             padding-right: 2em;
 176           }
 177         }
 178       }
 179       ul.sf-multicolumn {
 180         li.sf-multicolumn-wrapper {
 181           ol li {
 182             &.sf-multicolumn-column {
 183               float: right;
 184             }
 185           }
 186         }
 187       }
 188     }
 189     &.sf-accordion li {
 190       &.sf-expanded {
 191         background: $superfish-1-background-color-level-fourth;
 192         > {
 193           a {
 194             font-weight: bold;
 195           }
 196           span.nolink {
 197             font-weight: bold;
 198           }
 199         }
 200       }
 201       li {
 202         a {
 203           padding-left: 2em;
 204         }
 205         li {
 206           a {
 207             padding-left: 3em;
 208           }
 209           li {
 210             a {
 211               padding-left: 4em;
 212             }
 213             li {
 214               a {
 215                 padding-left: 5em;
 216               }
 217               span.nolink {
 218                 padding-left: 5em;
 219               }
 220             }
 221             span.nolink {
 222               padding-left: 4em;
 223             }
 224           }
 225           span.nolink {
 226             padding-left: 3em;
 227           }
 228         }
 229         span.nolink {
 230           padding-left: 2em;
 231         }
 232       }
 233       a.sf-accordion-button {
 234         font-weight: bold;
 235         position: absolute;
 236         right: 0;
 237         top: 0;
 238         z-index: 499;
 239       }
 240     }
 241     ul.sf-multicolumn {
 242       li.sf-multicolumn-wrapper {
 243         ol {
 244           margin: 0;
 245           padding: 0;
 246           li {
 247             margin: 0;
 248             padding: 0;
 249             &.sf-multicolumn-column {
 250               display: inline;
 251               float: left;
 252             }
 253           }
 254         }
 255         a.menuparent {
 256           font-weight: bold;
 257         }
 258         span.nolink {
 259           &.menuparent {
 260             font-weight: bold;
 261           }
 262         }
 263       }
 264     }
 265   }
 266 }