Instantly share code, notes, and snippets.
Last active
February 22, 2017 13:07
-
Star
(0)
0
You must be signed in to star a gist -
Fork
(0)
0
You must be signed in to fork a gist
-
Save markocupic/4eed872173ebf9209663127af6f5753b to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .sidebar-navigation { | |
| padding: 15px 0; | |
| margin: 40px 0 0 0; | |
| text-align: left; | |
| } | |
| .sidebar-navigation * { | |
| text-decoration: none !important; | |
| } | |
| .sidebar-navigation ul { | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .sidebar-navigation li { | |
| display: block; | |
| position: relative; | |
| margin: 0; | |
| padding: 0; | |
| overflow: hidden; | |
| } | |
| .sidebar-navigation li > a, | |
| .sidebar-navigation li > span { | |
| color: #ddd !important; | |
| } | |
| .sidebar-navigation li > span.active { | |
| color: #FD7F01 !important; | |
| } | |
| .sidebar-navigation li:hover > a, .sidebar-navigation li:hover > span { | |
| color: #FD7F01 !important; | |
| } | |
| .sidebar-navigation ul.level_1 { | |
| display: block; | |
| } | |
| .sidebar-navigation ul.level_1 ul { | |
| display: none; | |
| } | |
| .sidebar-navigation ul.level_1 > li:before { | |
| font-family: FontAwesome; | |
| position: absolute; | |
| top: 0; | |
| left: 16px; | |
| color: #ddd; | |
| } | |
| .sidebar-navigation ul.level_1 > li.picture-o:before { | |
| content: "\f03e"; | |
| } | |
| .sidebar-navigation ul.level_1 > li.newspaper-o:before { | |
| content: "\f1ea"; | |
| } | |
| .sidebar-navigation ul.level_1 > li.users:before { | |
| content: "\f0c0"; | |
| } | |
| .sidebar-navigation ul.level_1 > li.bolt:before { | |
| content: "\f0e7"; | |
| } | |
| .sidebar-navigation ul.level_1 > li.wrench:before { | |
| content: "\f0ad"; | |
| } | |
| .sidebar-navigation ul.level_1 > li.newspaper-o:before { | |
| content: "\f1ea "; | |
| } | |
| .sidebar-navigation ul.level_1 > li.cogs:before { | |
| content: "\f085"; | |
| } | |
| .sidebar-navigation ul.level_1 > li.flask:before { | |
| content: "\f0c3"; | |
| } | |
| .sidebar-navigation ul.level_1 li.submenu > .toggle-submenu { | |
| font-size: 16px; | |
| vertical-align: middle; | |
| margin-right: 10px; | |
| width: 30px; | |
| text-align: center; | |
| position: absolute; | |
| top: 0; | |
| cursor: pointer; | |
| } | |
| .sidebar-navigation ul.level_1 li.submenu > .toggle-submenu:before { | |
| font-family: FontAwesome; | |
| color: #ddd; | |
| content: "\f067"; | |
| font-size: 12px; | |
| font-style: normal; | |
| } | |
| .sidebar-navigation ul.level_1 li.submenu > .toggle-submenu:hover:before { | |
| color: #FF7F00; | |
| } | |
| .sidebar-navigation ul.level_1 li.submenu.expanded > .toggle-submenu { | |
| background-color: transparent; | |
| } | |
| .sidebar-navigation ul.level_1 li.submenu.expanded > .toggle-submenu:before { | |
| content: "\f068"; | |
| color: #FF7F00; | |
| } | |
| .sidebar-navigation ul.level_1 > li { | |
| padding: 0; | |
| line-height: 40px; | |
| background-color: transparent; | |
| } | |
| .sidebar-navigation ul.level_1 > li > .toggle-submenu { | |
| right: 0; | |
| } | |
| .sidebar-navigation ul.level_1 > li > a, .sidebar-navigation ul.level_1 > li span { | |
| padding-left: 42px; | |
| font-size: 16px; | |
| color: #ddd; | |
| } | |
| .sidebar-navigation ul.level_1 > li span.active { | |
| color: #FD7F01 !important; | |
| } | |
| .sidebar-navigation ul.level_2 { | |
| background-color: #222; | |
| } | |
| .sidebar-navigation ul.level_2 > li { | |
| padding: 0; | |
| line-height: 34px; | |
| background-color: transparent; | |
| } | |
| .sidebar-navigation ul.level_2 > li > .toggle-submenu { | |
| right: 0; | |
| } | |
| .sidebar-navigation ul.level_2 > li > a, .sidebar-navigation ul.level_2 > li span { | |
| padding-left: 50px; | |
| font-size: 13px; | |
| color: #ddd; | |
| } | |
| .sidebar-navigation ul.level_2 > li span.active { | |
| color: #FD7F01 !important; | |
| } | |
| .sidebar-navigation ul.level_3 > li { | |
| padding: 0; | |
| line-height: 30px; | |
| background-color: transparent; | |
| } | |
| .sidebar-navigation ul.level_3 > li > .toggle-submenu { | |
| right: 0; | |
| } | |
| .sidebar-navigation ul.level_3 > li > a, .sidebar-navigation ul.level_3 > li span { | |
| padding-left: 58px; | |
| font-size: 13px; | |
| color: #ddd; | |
| } | |
| .sidebar-navigation ul.level_3 > li span.active { | |
| color: #FD7F01 !important; | |
| } | |
| .sidebar-navigation ul.level_4 > li { | |
| padding: 0; | |
| line-height: 28px; | |
| background-color: transparent; | |
| } | |
| .sidebar-navigation ul.level_4 > li > .toggle-submenu { | |
| right: 0; | |
| } | |
| .sidebar-navigation ul.level_4 > li > a, .sidebar-navigation ul.level_4 > li span { | |
| padding-left: 66px; | |
| font-size: 13px; | |
| color: #ddd; | |
| } | |
| .sidebar-navigation ul.level_4 > li span.active { | |
| color: #FD7F01 !important; | |
| } | |
| .sidebar-navigation ul.level_1 li.trail > ul { | |
| display: block; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ---- | |
| // Sass (v3.4.21) | |
| // Compass (v1.0.3) | |
| // ---- | |
| // Variables | |
| $nav-font-color: #ddd; | |
| // Left offset | |
| $level-1-offset: 42px; | |
| $level-2-offset: 50px; | |
| $level-3-offset: 58px; | |
| $level-4-offset: 66px; | |
| .sidebar-navigation { | |
| padding: 15px 0; | |
| margin: 40px 0 0 0; | |
| text-align: left; | |
| * { | |
| text-decoration: none !important; | |
| } | |
| ul { | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| li { | |
| display: block; | |
| position: relative; | |
| margin: 0; | |
| padding: 0; | |
| overflow: hidden; | |
| > a, | |
| > span { | |
| color: $nav-font-color !important; | |
| } | |
| > span.active { | |
| color: #FD7F01 !important; | |
| } | |
| &:hover { | |
| > a, > span { | |
| color: #FD7F01 !important; | |
| } | |
| } | |
| } | |
| // Hide Submenus | |
| ul.level_1 { | |
| display: block; | |
| ul { | |
| display: none; | |
| } | |
| } | |
| // Iconfont for level_1 | |
| ul.level_1 { | |
| > li:before { | |
| font-family: FontAwesome; | |
| position: absolute; | |
| top: 0; | |
| left: 16px; | |
| color: $nav-font-color; | |
| } | |
| > li.picture-o:before { | |
| content: "\f03e"; | |
| } | |
| > li.newspaper-o:before { | |
| content: "\f1ea"; | |
| } | |
| > li.users:before { | |
| content: "\f0c0"; | |
| } | |
| > li.bolt:before { | |
| content: "\f0e7"; | |
| } | |
| > li.wrench:before { | |
| content: "\f0ad"; | |
| } | |
| > li.newspaper-o:before { | |
| content: "\f1ea "; | |
| } | |
| > li.cogs:before { | |
| content: "\f085"; | |
| } | |
| > li.flask:before { | |
| content: "\f0c3"; | |
| } | |
| } | |
| // Borders | |
| ul.level_1 { | |
| > li { | |
| // border-bottom: 1px solid $gray-light; | |
| } | |
| } | |
| // Expand Icon for items with submenus | |
| ul.level_1 { | |
| li.submenu { | |
| > .toggle-submenu { | |
| font-size: 16px; | |
| vertical-align: middle; | |
| margin-right: 10px; | |
| width: 30px; | |
| text-align: center; | |
| position: absolute; | |
| top: 0; | |
| cursor: pointer; | |
| // background-color: #444; | |
| } | |
| > .toggle-submenu:before { | |
| font-family: FontAwesome; | |
| color: $nav-font-color; | |
| content: "\f067"; | |
| font-size: 12px; | |
| font-style: normal; | |
| } | |
| > .toggle-submenu:hover:before { | |
| color: #FF7F00; | |
| } | |
| &.expanded { | |
| > .toggle-submenu { | |
| background-color: transparent; | |
| } | |
| > .toggle-submenu:before { | |
| content: "\f068"; | |
| color: #FF7F00; | |
| } | |
| } | |
| } | |
| } | |
| // Level 1 | |
| ul.level_1 { | |
| > li { | |
| padding: 0; | |
| line-height: 40px; | |
| background-color: transparent; | |
| > .toggle-submenu { | |
| right: 0; | |
| } | |
| > a, span { | |
| padding-left: $level-1-offset; | |
| font-size: 16px; | |
| color: $nav-font-color; | |
| } | |
| span.active { | |
| color: #FD7F01 !important; | |
| } | |
| } | |
| } | |
| // Level 2 | |
| ul.level_2 { | |
| background-color: #222; | |
| > li { | |
| padding: 0; | |
| line-height: 34px; | |
| background-color: transparent; | |
| > .toggle-submenu { | |
| right: 0; | |
| } | |
| > a, span { | |
| padding-left: $level-2-offset; | |
| font-size: 13px; | |
| color: $nav-font-color; | |
| } | |
| span.active { | |
| color: #FD7F01 !important; | |
| } | |
| } | |
| } | |
| // Level 3 | |
| ul.level_3 { | |
| > li { | |
| padding: 0; | |
| line-height: 30px; | |
| background-color: transparent; | |
| > .toggle-submenu { | |
| right: 0; | |
| } | |
| > a, span { | |
| padding-left: $level-3-offset; | |
| font-size: 13px; | |
| color: $nav-font-color; | |
| } | |
| span.active { | |
| color: #FD7F01 !important; | |
| } | |
| } | |
| } | |
| // Level 4 | |
| ul.level_4 { | |
| > li { | |
| padding: 0; | |
| line-height: 28px; | |
| background-color: transparent; | |
| > .toggle-submenu { | |
| right: 0; | |
| } | |
| > a, span { | |
| padding-left: $level-4-offset; | |
| font-size: 13px; | |
| color: $nav-font-color; | |
| } | |
| span.active { | |
| color: #FD7F01 !important; | |
| } | |
| } | |
| } | |
| // Show active submenus | |
| ul.level_1 li.trail > ul { | |
| display: block; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment