1
0
mirror of synced 2025-02-03 21:59:24 +03:00

Move most of the default CSS to partials/Sass.

This commit is contained in:
Florian Kissling 2015-04-28 01:15:49 +02:00
parent a2b31e2240
commit f73dc290fd
11 changed files with 447 additions and 327 deletions

View File

@ -18,330 +18,4 @@
<link href="vendor/css/font-awesome.min.css" type="text/css" rel="stylesheet" />
<link href="vendor/css/prettify.css" type="text/css" rel="stylesheet" />
<link href="vendor/css/anchor.css" type="text/css" rel="stylesheet" />
<style type="text/css">
/*
* Side navigation
*
* Scrollspy and affixed enhanced navigation to highlight sections and secondary
* sections of docs content.
*/
/* By default it's not affixed in mobile views, so undo that */
.s2-docs-sidebar.affix {
position: static;
}
@media (min-width: 768px) {
.s2-docs-sidebar {
padding-left: 20px;
}
}
/* First level of nav */
.s2-docs-sidenav {
margin-top: 20px;
margin-bottom: 20px;
}
/* All levels of nav */
.s2-docs-sidebar .nav > li > a {
margin-left: -1px;
display: block;
padding: 4px 20px;
font-size: 13px;
font-weight: 500;
color: #767676;
}
.s2-docs-sidebar .nav > li > a code {
background-color: inherit;
color: #666;
}
.s2-docs-sidebar .nav > li > a:hover,
.s2-docs-sidebar .nav > li > a:focus {
padding-left: 19px;
color: #428BCA;
text-decoration: none;
background-color: transparent;
border-left: 1px solid #428BCA;
}
.s2-docs-sidebar .nav > .active > a,
.s2-docs-sidebar .nav > .active:hover > a,
.s2-docs-sidebar .nav > .active:focus > a {
padding-left: 18px;
font-weight: bold;
color: #428BCA;
background-color: transparent;
border-left: 2px solid #428BCA;
}
/* Nav: second level (shown on .active) */
.s2-docs-sidebar .nav .nav {
display: none; /* Hide by default, but at >768px, show it */
padding-bottom: 10px;
}
.s2-docs-sidebar .nav .nav > li > a {
padding-top: 1px;
padding-bottom: 1px;
padding-left: 30px;
font-size: 12px;
font-weight: normal;
}
.s2-docs-sidebar .nav .nav > li > a:hover,
.s2-docs-sidebar .nav .nav > li > a:focus {
padding-left: 29px;
}
.s2-docs-sidebar .nav .nav > .active > a,
.s2-docs-sidebar .nav .nav > .active:hover > a,
.s2-docs-sidebar .nav .nav > .active:focus > a {
padding-left: 28px;
font-weight: 500;
}
/* Back to top (hidden on mobile) */
.back-to-top,
.s2-docs-theme-toggle {
display: none;
padding: 4px 10px;
margin-top: 10px;
margin-left: 10px;
font-size: 12px;
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;
}
@media (min-width: 768px) {
.back-to-top,
.s2-docs-theme-toggle {
display: block;
}
}
/* Show and affix the side nav when space allows it */
@media (min-width: 992px) {
.s2-docs-sidebar .s2-docs-sidenav {
border-left: 1px solid #eee;
padding-top: 40px;
}
.s2-docs-sidebar .nav > .active > ul {
display: block;
}
/* Widen the fixed sidebar */
.s2-docs-sidebar.affix,
.s2-docs-sidebar.affix-bottom {
width: 213px;
}
.s2-docs-sidebar.affix {
position: fixed; /* Undo the static from mobile first approach */
top: 0px;
}
.s2-docs-sidebar.affix-bottom {
position: absolute; /* Undo the static from mobile first approach */
}
.s2-docs-sidebar.affix-bottom .s2-docs-sidenav,
.s2-docs-sidebar.affix .s2-docs-sidenav {
margin-top: 0;
margin-bottom: 0;
}
}
@media (min-width: 1200px) {
/* Widen the fixed sidebar again */
.s2-docs-sidebar.affix-bottom,
.s2-docs-sidebar.affix {
width: 263px;
}
}
/* Footer */
.s2-docs-footer {
border-top: 1px solid #E5E5E5;
color: #767676;
padding-top: 40px;
padding-bottom: 40px;
margin-top: 100px;
text-align: center;
}
.s2-docs-footer-links {
padding-left: 0;
margin-top: 20px;
}
.s2-docs-footer-links li {
display: inline;
padding: 0 2px;
}
.s2-docs-footer-links li:after {
content: "·";
padding-left: 8px;
}
.s2-docs-footer-links li:first-child {
padding-left: 0;
}
.s2-docs-footer-links li:last-child:after {
content: "";
padding-left: 0;
}
@media (min-width: 768px) {
.s2-docs-footer p {
margin-bottom: 0;
}
}
section {
margin-bottom: 40px;
}
.btn-toolbar {
margin-bottom: 20px;
}
.jumbotron {
background-color: #fff;
border-bottom: 1px solid #eee;
}
.jumbotron h1 {
font-size: 48px;
}
.btn-outline-inverse {
color: #428BCA;
background-color: transparent;
border-color: #428BCA;
padding: 15px 30px;
font-size: 20px;
}
.btn-outline-inverse .fa {
margin-right: 8px;
}
.btn-outline-inverse:hover {
color: #fff;
border-color: #428BCA;
background-color: #428BCA;
}
.version {
color: #999;
}
.navbar {
background-color: #fff;
}
/* anchor.js */
.anchorjs-link {
float: left;
width: 1em;
height: 1em;
margin-left: -1.2em;
opacity: 0;
color: inherit;
text-align: center;
}
.anchorjs-link:link,
.anchorjs-link:visited {
text-decoration: none;
color: inherit;
}
.anchorjs-icon {
font-size: 60%;
vertical-align: .2em;
}
/* Inline code within headings retain the heading's background-color */
h2 code,
h3 code,
h4 code {
background-color: inherit;
}
/* Back to top (hidden on mobile) */
.back-to-top {
display: none;
padding: 4px 10px;
margin-top: 10px;
margin-left: 10px;
font-size: 12px;
font-weight: 500;
color: #999;
}
.back-to-top:hover {
color: #428BCA;
text-decoration: none;
}
@media (min-width: 768px) {
.back-to-top {
display: block;
}
}
.s2-docs-nav {
margin-bottom: 0;
}
.s2-docs-nav .navbar-brand {
font-weight: 500;
}
h1[id] {
padding-top: 20px;
margin-top: 0;
}
.alert {
background-color: transparent;
border-width: 2px;
}
@media (min-width: 768px) {
.alert {
padding: 30px;
}
}
/* Animated hamburger icon @see http://codepen.io/JulienMelissas/pen/LEBGLj */
.navbar-toggle {
border: none;
background: transparent !important;
}
.navbar-toggle:hover {
background: transparent !important;
}
.navbar-toggle .icon-bar {
width: 22px;
transition: all 0.2s;
}
.navbar-toggle .top-bar {
transform: rotate(45deg);
transform-origin: 10% 10%;
}
.navbar-toggle .middle-bar {
opacity: 0;
}
.navbar-toggle .bottom-bar {
transform: rotate(-45deg);
transform-origin: 10% 90%;
}
.navbar-toggle.collapsed .top-bar {
transform: rotate(0);
}
.navbar-toggle.collapsed .middle-bar {
opacity: 1;
}
.navbar-toggle.collapsed .bottom-bar {
transform: rotate(0);
}
</style>
<link href="css/s2-docs.css" rel="stylesheet" >

21
docs/_sass/_anchorjs.scss Normal file
View File

@ -0,0 +1,21 @@
/* anchor.js */
.anchorjs-link {
float: left;
width: 1em;
height: 1em;
margin-left: -1.2em;
opacity: 0;
color: inherit;
text-align: center;
&:link,
&:visited {
text-decoration: none;
color: inherit;
}
}
.anchorjs-icon {
font-size: 60%;
vertical-align: .2em;
}

View File

@ -0,0 +1,12 @@
.jumbotron {
background-color: #F6F6F6;
border-bottom: 1px solid #eee;
color: #777;
padding-left: 0;
padding-right: 0;
h1 {
font-size: 36px;
color: #777;
}
}

View File

@ -0,0 +1,32 @@
.alert
padding: 20px
margin: 20px 0
border: 1px solid #eee
border-left-width: 5px
border-radius: 3px
background: #fff
color: #333
h4
margin-top: 0
margin-bottom: 5px
font-size: 18px
&-danger
border-left-color: #CE4844
h4
color: #CE4844
&-info
border-left-color: #1B809E
h4
color: #1B809E
&-warning
border-left-color: #AA6708
h4
color: #AA6708
@media (min-width: 768px)
.alert
padding: 20px

View File

@ -0,0 +1,37 @@
/* Footer */
.s2-docs-footer {
border-top: 1px solid #E5E5E5;
color: #767676;
padding-top: 40px;
padding-bottom: 40px;
margin-top: 100px;
text-align: center;
&-links {
padding-left: 0;
margin-top: 20px;
}
&-links li {
display: inline;
padding: 0 2px;
&:after {
content: "·";
padding-left: 8px;
}
&:first-child {
padding-left: 0;
}
&:last-child:after {
content: "";
padding-left: 0;
}
}
}
@media (min-width: 768px) {
.s2-docs-footer p {
margin-bottom: 0;
}
}

View File

@ -0,0 +1,33 @@
/* Animated hamburger icon @see http://codepen.io/JulienMelissas/pen/LEBGLj */
.navbar-toggle {
border: none;
background: transparent !important;
&: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);
}
}

View File

@ -0,0 +1,8 @@
.s2-docs-container {
line-height: 1.6;
//font-size: 16px;
}
section {
margin-bottom: 40px;
}

View File

@ -0,0 +1,19 @@
.s2-docs-nav {
margin-bottom: 0;
border-color: #eee;
background-color: #fff;
}
.s2-docs-nav .navbar-brand {
font-weight: 500;
img {
margin-right: 4px;
}
}
.s2-docs-nav .navbar-nav > .active > a,
.s2-docs-nav .navbar-nav > .active > a:hover,
.s2-docs-nav .navbar-nav > .active > a:focus {
background-color: #f6f6f6;
color: #333;
}

View File

@ -0,0 +1,170 @@
/*
* Side navigation
*
* Scrollspy and affixed enhanced navigation to highlight sections and secondary
* sections of docs content.
*/
/* By default it's not affixed in mobile views, so undo that */
.s2-docs-sidebar.affix {
position: static;
}
@media (min-width: 768px) {
.s2-docs-sidebar {
padding-left: 20px;
}
}
/* First level of nav */
.s2-docs-sidenav {
margin-top: 20px;
margin-bottom: 20px;
}
/* All levels of nav */
.s2-docs-sidebar .nav {
> li > a {
margin-left: -1px;
display: block;
padding: 4px 20px;
font-size: 13px;
font-weight: 500;
color: #767676;
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;
color: #428BCA;
text-decoration: none;
background-color: transparent;
border-left-color: #428BCA;
}
> .active > a,
> .active:hover > a,
> .active:focus > a {
padding-left: 18px;
font-weight: bold;
color: #428BCA;
background-color: transparent;
border-left: 2px solid #428BCA;
}
/* Nav: second level (shown on .active) */
.nav {
display: none; /* Hide by default, but at >768px, show it */
padding-bottom: 10px;
}
.nav > li > a {
padding-top: 1px;
padding-bottom: 1px;
padding-left: 30px;
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 {
padding-left: 30px;
font-weight: 400;
}
}
/* Back to top (hidden on mobile) */
.back-to-top,
.s2-docs-theme-toggle {
display: none;
padding: 4px 10px;
margin-top: 10px;
margin-left: 10px;
font-size: 12px;
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;
}
@media (min-width: 768px) {
.back-to-top,
.s2-docs-theme-toggle {
display: block;
}
}
/* Show and affix the side nav when space allows it */
@media (min-width: 992px) {
.s2-docs-sidebar .s2-docs-sidenav {
padding-top: 40px;
transition: border-color .2s;
border-left: 1px solid transparent;
}
.s2-docs-sidebar.affix .s2-docs-sidenav {
border-left-color: #eee;
}
.s2-docs-sidebar .nav > .active > ul {
display: block;
}
/* Widen the fixed sidebar */
.s2-docs-sidebar.affix,
.s2-docs-sidebar.affix-bottom {
width: 213px;
}
.s2-docs-sidebar.affix {
position: fixed; /* Undo the static from mobile first approach */
top: 0px;
}
.s2-docs-sidebar.affix-bottom {
position: absolute; /* Undo the static from mobile first approach */
}
.s2-docs-sidebar.affix-bottom .s2-docs-sidenav,
.s2-docs-sidebar.affix .s2-docs-sidenav {
margin-top: 0;
margin-bottom: 0;
}
}
@media (min-width: 1200px) {
/* Widen the fixed sidebar again */
.s2-docs-sidebar.affix-bottom,
.s2-docs-sidebar.affix {
width: 263px;
}
}
/* Back to top (hidden on mobile) */
.back-to-top {
display: none;
padding: 4px 10px;
margin-top: 10px;
margin-left: 10px;
font-size: 12px;
font-weight: 400;
color: #999;
}
.back-to-top:hover {
color: #428BCA;
text-decoration: none;
}
@media (min-width: 768px) {
.back-to-top {
display: block;
}
}

View File

@ -0,0 +1,47 @@
.select2-result-repository
padding-top: 4px
padding-bottom: 3px
&__avatar
float: left
width: 60px
margin-right: 10px
img
width: 100%
height: auto
border-radius: 2px
&__meta
margin-left: 70px
&__title
color: black
font-weight: bold
word-wrap: break-word
line-height: 1.1
margin-bottom: 4px
&__forks,
&__stargazers
margin-right: 1em
&__forks,
&__stargazers,
&__watchers
display: inline-block
color: #aaa
font-size: 11px
&__description
font-size: 13px
color: #777
margin-top: 4px
.select2-results__option--highlighted &
&__title
color: white
&__forks,
&__stargazers,
&__description,
&__watchers
color: mix(#428BCA, white, 30%)

67
docs/css/s2-docs.scss Normal file
View File

@ -0,0 +1,67 @@
---
---
@import "s2-result-repository";
@import "s2-docs-sidenav";
@import "s2-docs-hamburger";
@import "s2-docs-layout";
@import "s2-docs-nav";
@import "s2-docs-footer";
@import "s2-docs-alert";
@import "anchorjs";
@import "jumbotron";
.btn-toolbar {
margin-bottom: 20px;
}
.btn-outline-inverse {
color: #428BCA;
background-color: transparent;
border-color: #428BCA;
padding: 15px 30px;
font-size: 20px;
}
.btn-outline-inverse .fa {
margin-right: 8px;
}
.btn-outline-inverse:hover {
color: #fff;
border-color: #428BCA;
background-color: #428BCA;
}
.version {
color: #999;
}
/* Inline code within headings retain the heading's background-color */
h2 code,
h3 code,
h4 code {
background-color: inherit;
}
h1[id] {
padding-top: 20px;
margin-top: 0;
}
/* pre */
pre {
padding: 9px 14px;
margin-bottom: 14px;
background-color: #f7f7f9;
border: 1px solid #e1e1e8;
}
.s2-docs-headline-example {
font-size: 12px;
font-weight: 700;
color: #959595;
text-transform: uppercase;
letter-spacing: 1px;
}