Initial port

[editorial.git] / assets / main / sass / layout / _menu.scss

diff --git a/assets/main/sass/layout/_menu.scss b/assets/main/sass/layout/_menu.scss
new file mode 100644 (file)
index 0000000..06f1549
--- /dev/null
+++ b/assets/main/sass/layout/_menu.scss
@@ -0,0 +1,98 @@
+///\r
+/// Editorial by HTML5 UP\r
+/// html5up.net | @ajlkn\r
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)\r
+///\r
+\r
+/* Menu */\r
+\r
+       #menu {\r
+               ul {\r
+                       @include vendor('user-select', 'none');\r
+                       color: _palette(fg-bold);\r
+                       font-family: _font(family-heading);\r
+                       font-family: _font(weight-heading-alt);\r
+                       letter-spacing: _font(kerning-heading);\r
+                       list-style: none;\r
+                       margin-bottom: 0;\r
+                       padding: 0;\r
+                       text-transform: uppercase;\r
+\r
+                       a, span {\r
+                               border-bottom: 0;\r
+                               color: inherit;\r
+                               cursor: pointer;\r
+                               display: block;\r
+                               font-size: 0.9em;\r
+                               padding: 0.625em 0;\r
+\r
+                               &:hover {\r
+                                       color: _palette(accent);\r
+                               }\r
+\r
+                               &.opener {\r
+                                       @include vendor('transition', 'color #{_duration(transition)} ease-in-out');\r
+                                       @include icon;\r
+                                       -webkit-tap-highlight-color: rgba(255,255,255,0);\r
+                                       position: relative;\r
+\r
+                                       &:before {\r
+                                               @include vendor('transition', (\r
+                                                       'color #{_duration(transition)} ease-in-out',\r
+                                                       'transform #{_duration(transition)} ease-in-out'\r
+                                               ));\r
+                                               color: _palette(fg-light);\r
+                                               content: '\f078';\r
+                                               position: absolute;\r
+                                               right: 0;\r
+                                       }\r
+\r
+                                       &:hover {\r
+                                               &:before {\r
+                                                       color: _palette(accent);\r
+                                               }\r
+                                       }\r
+\r
+                                       &.active {\r
+                                               & + ul {\r
+                                                       display: block;\r
+                                               }\r
+\r
+                                               &:before {\r
+                                                       @include vendor('transform', 'rotate(-180deg)');\r
+                                               }\r
+                                       }\r
+                               }\r
+                       }\r
+               }\r
+\r
+               > ul {\r
+                       > li {\r
+                               border-top: solid 1px _palette(border);\r
+                               margin: 0.5em 0 0 0;\r
+                               padding: 0.5em 0 0 0;\r
+\r
+                               > ul {\r
+                                       color: _palette(fg-light);\r
+                                       display: none;\r
+                                       margin: 0.5em 0 1.5em 0;\r
+                                       padding-left: 1em;\r
+\r
+                                       a, span {\r
+                                               font-size: 0.8em;\r
+                                       }\r
+\r
+                                       > li {\r
+                                               margin: 0.125em 0 0 0;\r
+                                               padding: 0.125em 0 0 0;\r
+                                       }\r
+                               }\r
+\r
+                               &:first-child {\r
+                                       border-top: 0;\r
+                                       margin-top: 0;\r
+                                       padding-top: 0;\r
+                               }\r
+                       }\r
+               }\r
+       }
\ No newline at end of file