diff --git a/docs/_sass/_examples.scss b/docs/_sass/_examples.scss index ce1440b4..16a74c52 100644 --- a/docs/_sass/_examples.scss +++ b/docs/_sass/_examples.scss @@ -23,19 +23,19 @@ color: white; position: relative; padding: 45px 15px 15px; - margin: 0 -15px 15px; -} + margin: 0 -15px 15px; -.s2-event-log:after { - content: "Event Log"; - position: absolute; - top: 15px; - left: 15px; - font-size: 12px; - font-weight: bold; - color: #BBB; - text-transform: uppercase; - letter-spacing: 1px; + &:after { + content: "Event Log"; + position: absolute; + top: 15px; + left: 15px; + font-size: 12px; + font-weight: bold; + color: #BBB; + text-transform: uppercase; + letter-spacing: 1px; + } } .s2-example { @@ -47,6 +47,18 @@ border-color: #E5E5E5 #EEE #EEE; border-style: solid; border-width: 1px 0; + + &:after { + content: "Example"; + position: absolute; + top: 15px; + left: 15px; + font-size: 12px; + font-weight: bold; + color: #BBB; + text-transform: uppercase; + letter-spacing: 1px; + } } @media (min-width: 768px) { @@ -70,14 +82,4 @@ } } -.s2-example:after { - content: "Example"; - position: absolute; - top: 15px; - left: 15px; - font-size: 12px; - font-weight: bold; - color: #BBB; - text-transform: uppercase; - letter-spacing: 1px; -} + diff --git a/docs/_sass/_footer.scss b/docs/_sass/_footer.scss index 132a985b..02d2b0f2 100644 --- a/docs/_sass/_footer.scss +++ b/docs/_sass/_footer.scss @@ -1,4 +1,3 @@ -/* Footer */ .s2-docs-footer { border-top: 1px solid #eee; color: #767676; @@ -20,9 +19,11 @@ content: "·"; padding-left: 8px; } + &:first-child { padding-left: 0; } + &:last-child:after { content: ""; padding-left: 0; diff --git a/docs/_sass/_hamburger.scss b/docs/_sass/_hamburger.scss index 4747efa0..b9db0e49 100644 --- a/docs/_sass/_hamburger.scss +++ b/docs/_sass/_hamburger.scss @@ -1,4 +1,6 @@ -/* Animated hamburger icon @see http://codepen.io/JulienMelissas/pen/LEBGLj */ +// animated hamburger icon +// @see http://codepen.io/JulienMelissas/pen/LEBGLj + .navbar-toggle { border: none; background: transparent !important; @@ -6,28 +8,37 @@ &:hover { background: transparent !important; } + .icon-bar { width: 22px; transition: all 0.2s; } + .top-bar { transform: rotate(45deg); transform-origin: 10% 10%; } + .middle-bar { opacity: 0; } + .bottom-bar { transform: rotate(-45deg); transform-origin: 10% 90%; } - &.collapsed .top-bar { - transform: rotate(0); - } - &.collapsed .middle-bar { - opacity: 1; - } - &.collapsed .bottom-bar { - transform: rotate(0); + + &.collapsed { + .top-bar { + transform: rotate(0); + } + + .middle-bar { + opacity: 1; + } + + .bottom-bar { + transform: rotate(0); + } } } diff --git a/docs/_sass/_sidenav.scss b/docs/_sass/_sidenav.scss index b6af974e..d5e5e8d2 100644 --- a/docs/_sass/_sidenav.scss +++ b/docs/_sass/_sidenav.scss @@ -9,6 +9,7 @@ .s2-docs-sidebar.affix { position: static; } + @media (min-width: 768px) { .s2-docs-sidebar { padding-left: 20px; @@ -33,10 +34,12 @@ border-left: 1px solid transparent; transition: color .2s, border-color .2s, border-width .2s; } + > li > a code { background-color: inherit; color: inherit; } + > li > a:hover, > li > a:focus { padding-left: 19px; @@ -45,6 +48,7 @@ background-color: transparent; border-left-color: #428BCA; } + > .active > a, > .active:hover > a, > .active:focus > a { @@ -60,6 +64,7 @@ display: none; /* Hide by default, but at >768px, show it */ padding-bottom: 10px; } + .nav > li > a { padding-top: 1px; padding-bottom: 1px; @@ -67,10 +72,12 @@ font-size: 12px; font-weight: normal; } + .nav > li > a:hover, .nav > li > a:focus { padding-left: 30px; } + .nav > .active > a, .nav > .active:hover > a, .nav > .active:focus > a { @@ -90,11 +97,13 @@ font-weight: 500; color: #999; } + .back-to-top:hover, .s2-docs-theme-toggle:hover { color: #428BCA; text-decoration: none; } + .s2-docs-theme-toggle { margin-top: 0; } @@ -139,6 +148,7 @@ margin-bottom: 0; } } + @media (min-width: 1200px) { /* Widen the fixed sidebar again */ .s2-docs-sidebar.affix-bottom, @@ -147,7 +157,6 @@ } } - /* Back to top (hidden on mobile) */ .back-to-top { display: none; @@ -157,10 +166,11 @@ font-size: 12px; font-weight: 400; color: #999; -} -.back-to-top:hover { - color: #428BCA; - text-decoration: none; + + &:hover { + color: #428BCA; + text-decoration: none; + } } @media (min-width: 768px) {