--- /dev/null
+/*
+ * Sample SCSS for adding Superfish CSS to themes.
+ *
+ * Instructions:
+ *
+ * 1. Change the #YOUR-BLOCK-ID (below) to the ID of your Superfish block.
+ *
+ * 2. Add the SCSS to your theme.
+ *
+ * 3. Note that by removing the .sf-style-none, the style will be applied to the menu regardless of
+ * the "Style" selected in the Superfish block configuration.
+ *
+ */
+
+// You can add these variables to your _base.scss
+$superfish-1-color: #00f;
+$superfish-1-background-color-level-first: #f0f0f0;
+$superfish-1-background-color-level-second: #e0e0e0;
+$superfish-1-background-color-level-third: #d0d0d0;
+$superfish-1-background-color-level-fourth: #c0c0c0;
+
+#YOUR-BLOCK-ID {
+ .sf-style-none {
+ float: left;
+ margin: 0;
+ padding: 0;
+ &.sf-navbar {
+ width: 100%;
+ background: $superfish-1-background-color-level-first;
+ }
+ ul {
+ padding-left: 0;
+ &.sf-multicolumn li {
+ &.sf-multicolumn-wrapper {
+ background: $superfish-1-background-color-level-fourth;
+ li {
+ background: transparent;
+ }
+ }
+ }
+ }
+ a {
+ color: $superfish-1-color;
+ padding: 0.75em 1em;
+ &.sf-with-ul {
+ padding-right: 2.25em;
+ }
+ &:focus {
+ background: $superfish-1-background-color-level-fourth;
+ outline: 0;
+ }
+ &:hover {
+ background: $superfish-1-background-color-level-fourth;
+ outline: 0;
+ }
+ &:active {
+ background: $superfish-1-background-color-level-fourth;
+ outline: 0;
+ }
+ }
+ span {
+ &.nolink {
+ color: $superfish-1-color;
+ padding: 0.75em 1em;
+ &.sf-with-ul {
+ padding-right: 2.25em;
+ }
+ &:hover {
+ background: $superfish-1-background-color-level-fourth;
+ outline: 0;
+ }
+ }
+ &.sf-description {
+ color: $superfish-1-color;
+ display: block;
+ font-size: 0.833em;
+ line-height: 1.5;
+ margin: 5px 0 0 5px;
+ padding: 0;
+ }
+ }
+ &.rtl {
+ span {
+ &.sf-description {
+ margin: 5px 5px 0 0;
+ }
+ &.nolink.sf-with-ul {
+ padding-left: 2.25em;
+ padding-right: 1em;
+ }
+ }
+ a.sf-with-ul {
+ padding-left: 2.25em;
+ padding-right: 1em;
+ }
+ }
+ li {
+ background: $superfish-1-background-color-level-first;
+ li {
+ background: $superfish-1-background-color-level-second;
+ li {
+ background: $superfish-1-background-color-level-third;
+ }
+ }
+ &:hover {
+ background: $superfish-1-background-color-level-fourth;
+ outline: 0;
+ > ul {
+ top: 40px;
+ }
+ }
+ &.sfHover {
+ background: $superfish-1-background-color-level-fourth;
+ outline: 0;
+ > ul {
+ top: 40px;
+ }
+ }
+ }
+ .sf-sub-indicator {
+ background-image: url('../images/dropdown-arrows.png');
+ }
+ }
+ div.sf-accordion-toggle {
+ &.sf-style-none a {
+ background: $superfish-1-background-color-level-first;
+ color: $superfish-1-color;
+ padding: 1em;
+ &.sf-expanded {
+ background: $superfish-1-background-color-level-fourth;
+ font-weight: bold;
+ }
+ }
+ }
+ .sf-menu.sf-style-none {
+ &.rtl {
+ &.sf-accordion li {
+ li {
+ a {
+ padding-left: auto;
+ padding-right: 2em;
+ }
+ li {
+ a {
+ padding-left: auto;
+ padding-right: 3em;
+ }
+ li {
+ a {
+ padding-left: auto;
+ padding-right: 4em;
+ }
+ li {
+ a {
+ padding-left: auto;
+ padding-right: 5em;
+ }
+ span.nolink {
+ padding-left: auto;
+ padding-right: 5em;
+ }
+ }
+ span.nolink {
+ padding-left: auto;
+ padding-right: 4em;
+ }
+ }
+ span.nolink {
+ padding-left: auto;
+ padding-right: 3em;
+ }
+ }
+ span.nolink {
+ padding-left: auto;
+ padding-right: 2em;
+ }
+ }
+ }
+ ul.sf-multicolumn {
+ li.sf-multicolumn-wrapper {
+ ol li {
+ &.sf-multicolumn-column {
+ float: right;
+ }
+ }
+ }
+ }
+ }
+ &.sf-accordion li {
+ &.sf-expanded {
+ background: $superfish-1-background-color-level-fourth;
+ > {
+ a {
+ font-weight: bold;
+ }
+ span.nolink {
+ font-weight: bold;
+ }
+ }
+ }
+ li {
+ a {
+ padding-left: 2em;
+ }
+ li {
+ a {
+ padding-left: 3em;
+ }
+ li {
+ a {
+ padding-left: 4em;
+ }
+ li {
+ a {
+ padding-left: 5em;
+ }
+ span.nolink {
+ padding-left: 5em;
+ }
+ }
+ span.nolink {
+ padding-left: 4em;
+ }
+ }
+ span.nolink {
+ padding-left: 3em;
+ }
+ }
+ span.nolink {
+ padding-left: 2em;
+ }
+ }
+ a.sf-accordion-button {
+ font-weight: bold;
+ position: absolute;
+ right: 0;
+ top: 0;
+ z-index: 499;
+ }
+ }
+ ul.sf-multicolumn {
+ li.sf-multicolumn-wrapper {
+ ol {
+ margin: 0;
+ padding: 0;
+ li {
+ margin: 0;
+ padding: 0;
+ &.sf-multicolumn-column {
+ display: inline;
+ float: left;
+ }
+ }
+ }
+ a.menuparent {
+ font-weight: bold;
+ }
+ span.nolink {
+ &.menuparent {
+ font-weight: bold;
+ }
+ }
+ }
+ }
+ }
+}
\ No newline at end of file