1
0
mirror of synced 2025-02-11 01:29:23 +03:00

Nesting, whitespace.

This commit is contained in:
Florian Kissling 2015-06-06 15:32:11 +02:00
parent b4a44ccfdf
commit 419242fc16
4 changed files with 62 additions and 38 deletions

View File

@ -24,9 +24,8 @@
position: relative; position: relative;
padding: 45px 15px 15px; padding: 45px 15px 15px;
margin: 0 -15px 15px; margin: 0 -15px 15px;
}
.s2-event-log:after { &:after {
content: "Event Log"; content: "Event Log";
position: absolute; position: absolute;
top: 15px; top: 15px;
@ -37,6 +36,7 @@
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 1px; letter-spacing: 1px;
} }
}
.s2-example { .s2-example {
position: relative; position: relative;
@ -47,6 +47,18 @@
border-color: #E5E5E5 #EEE #EEE; border-color: #E5E5E5 #EEE #EEE;
border-style: solid; border-style: solid;
border-width: 1px 0; 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) { @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;
}

View File

@ -1,4 +1,3 @@
/* Footer */
.s2-docs-footer { .s2-docs-footer {
border-top: 1px solid #eee; border-top: 1px solid #eee;
color: #767676; color: #767676;
@ -20,9 +19,11 @@
content: "·"; content: "·";
padding-left: 8px; padding-left: 8px;
} }
&:first-child { &:first-child {
padding-left: 0; padding-left: 0;
} }
&:last-child:after { &:last-child:after {
content: ""; content: "";
padding-left: 0; padding-left: 0;

View File

@ -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 { .navbar-toggle {
border: none; border: none;
background: transparent !important; background: transparent !important;
@ -6,28 +8,37 @@
&:hover { &:hover {
background: transparent !important; background: transparent !important;
} }
.icon-bar { .icon-bar {
width: 22px; width: 22px;
transition: all 0.2s; transition: all 0.2s;
} }
.top-bar { .top-bar {
transform: rotate(45deg); transform: rotate(45deg);
transform-origin: 10% 10%; transform-origin: 10% 10%;
} }
.middle-bar { .middle-bar {
opacity: 0; opacity: 0;
} }
.bottom-bar { .bottom-bar {
transform: rotate(-45deg); transform: rotate(-45deg);
transform-origin: 10% 90%; transform-origin: 10% 90%;
} }
&.collapsed .top-bar {
&.collapsed {
.top-bar {
transform: rotate(0); transform: rotate(0);
} }
&.collapsed .middle-bar {
.middle-bar {
opacity: 1; opacity: 1;
} }
&.collapsed .bottom-bar {
.bottom-bar {
transform: rotate(0); transform: rotate(0);
} }
} }
}

View File

@ -9,6 +9,7 @@
.s2-docs-sidebar.affix { .s2-docs-sidebar.affix {
position: static; position: static;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.s2-docs-sidebar { .s2-docs-sidebar {
padding-left: 20px; padding-left: 20px;
@ -33,10 +34,12 @@
border-left: 1px solid transparent; border-left: 1px solid transparent;
transition: color .2s, border-color .2s, border-width .2s; transition: color .2s, border-color .2s, border-width .2s;
} }
> li > a code { > li > a code {
background-color: inherit; background-color: inherit;
color: inherit; color: inherit;
} }
> li > a:hover, > li > a:hover,
> li > a:focus { > li > a:focus {
padding-left: 19px; padding-left: 19px;
@ -45,6 +48,7 @@
background-color: transparent; background-color: transparent;
border-left-color: #428BCA; border-left-color: #428BCA;
} }
> .active > a, > .active > a,
> .active:hover > a, > .active:hover > a,
> .active:focus > a { > .active:focus > a {
@ -60,6 +64,7 @@
display: none; /* Hide by default, but at >768px, show it */ display: none; /* Hide by default, but at >768px, show it */
padding-bottom: 10px; padding-bottom: 10px;
} }
.nav > li > a { .nav > li > a {
padding-top: 1px; padding-top: 1px;
padding-bottom: 1px; padding-bottom: 1px;
@ -67,10 +72,12 @@
font-size: 12px; font-size: 12px;
font-weight: normal; font-weight: normal;
} }
.nav > li > a:hover, .nav > li > a:hover,
.nav > li > a:focus { .nav > li > a:focus {
padding-left: 30px; padding-left: 30px;
} }
.nav > .active > a, .nav > .active > a,
.nav > .active:hover > a, .nav > .active:hover > a,
.nav > .active:focus > a { .nav > .active:focus > a {
@ -90,11 +97,13 @@
font-weight: 500; font-weight: 500;
color: #999; color: #999;
} }
.back-to-top:hover, .back-to-top:hover,
.s2-docs-theme-toggle:hover { .s2-docs-theme-toggle:hover {
color: #428BCA; color: #428BCA;
text-decoration: none; text-decoration: none;
} }
.s2-docs-theme-toggle { .s2-docs-theme-toggle {
margin-top: 0; margin-top: 0;
} }
@ -139,6 +148,7 @@
margin-bottom: 0; margin-bottom: 0;
} }
} }
@media (min-width: 1200px) { @media (min-width: 1200px) {
/* Widen the fixed sidebar again */ /* Widen the fixed sidebar again */
.s2-docs-sidebar.affix-bottom, .s2-docs-sidebar.affix-bottom,
@ -147,7 +157,6 @@
} }
} }
/* Back to top (hidden on mobile) */ /* Back to top (hidden on mobile) */
.back-to-top { .back-to-top {
display: none; display: none;
@ -157,11 +166,12 @@
font-size: 12px; font-size: 12px;
font-weight: 400; font-weight: 400;
color: #999; color: #999;
}
.back-to-top:hover { &:hover {
color: #428BCA; color: #428BCA;
text-decoration: none; text-decoration: none;
} }
}
@media (min-width: 768px) { @media (min-width: 768px) {
.back-to-top { .back-to-top {