Tidy and simplify CSS; add very basic documentation.
This commit is contained in:
Florian Kissling
parent
14e1c4d5f9
commit
691dfe5340
@ -1,40 +1,47 @@
|
||||
// Alerts
|
||||
//
|
||||
// Modify Bootstrap's default alert styles to mimick
|
||||
// the `.bs-callout` styles from Bootstrap's docs.
|
||||
//
|
||||
// @see https://github.com/twbs/bootstrap/blob/master/docs/assets/css/src/docs.css#L711
|
||||
// @see https://github.com/twbs/bootstrap/blob/master/less/alerts.less
|
||||
|
||||
.alert {
|
||||
padding: 20px;
|
||||
margin: 20px 0;
|
||||
background: #fff;
|
||||
border: 1px solid #eee;
|
||||
border-left-width: 5px;
|
||||
border-radius: 3px;
|
||||
background: #fff;
|
||||
color: #333;
|
||||
margin: 20px 0;
|
||||
padding: 20px;
|
||||
|
||||
h4 {
|
||||
font-size: 18px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 5px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
&-danger {
|
||||
border-left-color: #CE4844;
|
||||
border-left-color: #ce4844;
|
||||
|
||||
h4 {
|
||||
color: #CE4844;
|
||||
color: #ce4844;
|
||||
}
|
||||
}
|
||||
|
||||
&-info {
|
||||
border-left-color: #1B809E;
|
||||
border-left-color: #1b809e;
|
||||
|
||||
h4 {
|
||||
color: #1B809E;
|
||||
color: #1b809e;
|
||||
}
|
||||
}
|
||||
|
||||
&-warning {
|
||||
border-left-color: #AA6708;
|
||||
border-left-color: #aa6708;
|
||||
|
||||
h4 {
|
||||
color: #AA6708;
|
||||
color: #aa6708;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,4 +1,9 @@
|
||||
/* anchor.js */
|
||||
// AnchorJS Styles
|
||||
//
|
||||
// Styles for AnchorJS elements following the Bootstrap docs styles.
|
||||
//
|
||||
// @see https://github.com/twbs/bootstrap/blob/master/docs/assets/css/src/docs.css#L1599
|
||||
|
||||
.anchorjs-link {
|
||||
float: left;
|
||||
width: 1em;
|
||||
@ -13,9 +18,26 @@
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
*:hover > .anchorjs-link {
|
||||
opacity: .5;
|
||||
-webkit-transition: all .16s linear;
|
||||
-o-transition: all .16s linear;
|
||||
transition: all .16s linear;
|
||||
}
|
||||
|
||||
*:hover > .anchorjs-link:hover,
|
||||
.anchorjs-link:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.anchorjs-icon {
|
||||
font-size: 60%;
|
||||
vertical-align: .2em;
|
||||
}
|
||||
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
// Buttons
|
||||
|
||||
.btn-outline-inverse {
|
||||
color: #428BCA;
|
||||
background-color: transparent;
|
||||
@ -11,8 +13,8 @@
|
||||
border-color: #428BCA;
|
||||
background-color: #428BCA;
|
||||
}
|
||||
|
||||
.fa {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-toolbar {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
16
docs/_sass/_code.scss
Normal file
16
docs/_sass/_code.scss
Normal file
@ -0,0 +1,16 @@
|
||||
// Code (inline and block)
|
||||
|
||||
// Inline code within headings retain the heading's background-color
|
||||
h2 code,
|
||||
h3 code,
|
||||
h4 code {
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
// Modify Bootstrap's styles for blocks of code
|
||||
pre {
|
||||
padding: 9px 14px;
|
||||
margin-bottom: 14px;
|
||||
background-color: #f7f7f9;
|
||||
border: 1px solid #e1e1e8;
|
||||
}
|
||||
@ -1,29 +1,51 @@
|
||||
.s2-example + pre,
|
||||
.s2-event-log + pre {
|
||||
margin: -15px -15px 15px;
|
||||
border-radius: 0;
|
||||
border-width: 0 0 1px;
|
||||
}
|
||||
// Examples
|
||||
//
|
||||
// Styles for the Select2 examples, largely copied
|
||||
// from Bootstrap's docs styles.
|
||||
//
|
||||
// @see https://github.com/twbs/bootstrap/blob/master/docs/assets/css/src/docs.css#L533
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.s2-example + pre,
|
||||
.s2-event-log + pre {
|
||||
margin-top: -16px;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
border-width: 1px;
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.s2-event-log {
|
||||
background: #002451;
|
||||
font-family: Menlo, 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', Monaco, Consolas, monospace;
|
||||
color: white;
|
||||
.s2-example {
|
||||
position: relative;
|
||||
padding: 45px 15px 15px;
|
||||
margin: 0 -15px 15px;
|
||||
background-color: #fafafa;
|
||||
box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.05);
|
||||
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) {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
background-color: #fff;
|
||||
border-width: 1px;
|
||||
border-color: #eee;
|
||||
border-radius: 4px 4px 0 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
// styles for the event log in the "DOM events" section of the docs
|
||||
.s2-event-log {
|
||||
background: #002451;
|
||||
color: white;
|
||||
font-family: Menlo, 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', Monaco, Consolas, monospace;
|
||||
margin: 0 -15px 15px;
|
||||
padding: 45px 15px 15px;
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
content: "Event Log";
|
||||
@ -36,43 +58,8 @@
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.s2-example {
|
||||
position: relative;
|
||||
padding: 45px 15px 15px;
|
||||
margin: 0 -15px 15px;
|
||||
background-color: #FAFAFA;
|
||||
box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.05);
|
||||
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) {
|
||||
.s2-example {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
background-color: #FFF;
|
||||
border-width: 1px;
|
||||
border-color: #eee;
|
||||
border-radius: 4px 4px 0 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.s2-event-log {
|
||||
@media (min-width: 768px) {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
margin-top: -15px;
|
||||
@ -82,4 +69,22 @@
|
||||
}
|
||||
}
|
||||
|
||||
.s2-example + pre,
|
||||
.s2-event-log + pre {
|
||||
margin: -15px -15px 15px;
|
||||
border-radius: 0;
|
||||
border-width: 0 0 1px;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
margin-top: -16px;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
border-width: 1px;
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.s2-example + .s2-event-log {
|
||||
margin-top: -15px;
|
||||
}
|
||||
|
||||
16
docs/_sass/_featurette.scss
Normal file
16
docs/_sass/_featurette.scss
Normal file
@ -0,0 +1,16 @@
|
||||
// Homepage featurettes
|
||||
|
||||
.s2-docs-featurette {
|
||||
color: #777;
|
||||
padding: 15px 0;
|
||||
text-align: center;
|
||||
|
||||
h4 {
|
||||
margin: 30px 0 15px;
|
||||
}
|
||||
|
||||
.fa {
|
||||
font-size: 28px;
|
||||
color: #777;
|
||||
}
|
||||
}
|
||||
@ -1,3 +1,5 @@
|
||||
// Footer
|
||||
|
||||
.s2-docs-footer {
|
||||
border-top: 1px solid #eee;
|
||||
color: #767676;
|
||||
@ -29,10 +31,12 @@
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.s2-docs-footer p {
|
||||
@media (min-width: 768px) {
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -1,5 +1,10 @@
|
||||
// animated hamburger icon
|
||||
// Animated hamburger icon
|
||||
//
|
||||
// Add an animation to Bootstrap's `.navbar-toggle` hamburger icon,
|
||||
// courtesy of Julien Melissas.
|
||||
//
|
||||
// @see http://codepen.io/JulienMelissas/pen/LEBGLj
|
||||
// @see http://julienmelissas.com/animated-x-icon-for-the-bootstrap-navbar-toggle/
|
||||
|
||||
.navbar-toggle {
|
||||
border: none;
|
||||
|
||||
@ -1,36 +1,31 @@
|
||||
.notice-previous {
|
||||
background: #f6f6f6;
|
||||
color: #666;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding: 15px 20px;
|
||||
}
|
||||
// Homepage-specific styles
|
||||
|
||||
.s2-docs-home .jumbotron {
|
||||
.s2-docs-home {
|
||||
.jumbotron {
|
||||
margin-bottom: 0;
|
||||
color: #000;
|
||||
|
||||
h1 {
|
||||
color: #000;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#lead {
|
||||
.lead {
|
||||
text-align: center;
|
||||
max-width: 800px;
|
||||
margin: 0 auto 40px;
|
||||
}
|
||||
|
||||
.s2-docs-featurette {
|
||||
color: #777;
|
||||
text-align: center;
|
||||
padding: 15px 0;
|
||||
|
||||
.fa {
|
||||
font-size: 28px;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin: 30px 0 15px;
|
||||
.notice-previous {
|
||||
background: #f6f6f6;
|
||||
color: #666;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding: 15px 20px;
|
||||
}
|
||||
|
||||
.half-rule {
|
||||
width: 100px;
|
||||
margin: 40px auto;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
// Jumbotron
|
||||
//
|
||||
// Modify Bootstrap's default `.jumbotron` styles.
|
||||
|
||||
.jumbotron {
|
||||
background-color: #F6F6F6;
|
||||
border-bottom: 1px solid #eee;
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
// Layout
|
||||
|
||||
.s2-docs-container {
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
// Main navigation
|
||||
//
|
||||
// Styles for the top `.navbar` and its dropdowns.
|
||||
|
||||
.s2-docs-nav {
|
||||
margin-bottom: 0;
|
||||
border-color: #eee;
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
// Google Code Prettify styles
|
||||
|
||||
.com {
|
||||
color: #999;
|
||||
}
|
||||
@ -29,6 +31,7 @@
|
||||
margin-bottom: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #eee;
|
||||
|
||||
&.linenums {
|
||||
-webkit-box-shadow: inset 40px 0 0 #fbfbfb, inset 41px 0 0 #f6f6f6;
|
||||
-moz-box-shadow: inset 40px 0 0 #fbfbfb, inset 41px 0 0 #f6f6f6;
|
||||
@ -36,12 +39,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Specify class=linenums on a pre to get line numbering */
|
||||
// Specify class=linenums on a pre to get line numbering
|
||||
ol.linenums {
|
||||
margin: 0 0 0 -12px;
|
||||
}
|
||||
ol.linenums li {
|
||||
|
||||
li {
|
||||
padding-left: 12px;
|
||||
color: #bebebe;
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
// Styles accompanying the "Loading remote data" example `templateResult
|
||||
|
||||
.select2-result-repository {
|
||||
padding-top: 4px;
|
||||
padding-bottom: 3px;
|
||||
|
||||
@ -1,28 +1,24 @@
|
||||
/*
|
||||
* Side navigation
|
||||
*
|
||||
* Scrollspy and affixed enhanced navigation to highlight sections and secondary
|
||||
* sections of docs content.
|
||||
*/
|
||||
// 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 {
|
||||
// First level of nav
|
||||
.s2-docs-sidenav {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
// By default it is not affixed in mobile views, so undo that
|
||||
&.affix {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.s2-docs-sidebar {
|
||||
@media (min-width: 768px) {
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* First level of nav */
|
||||
.s2-docs-sidenav {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* All levels of nav */
|
||||
// All levels of nav
|
||||
.s2-docs-sidebar .nav {
|
||||
> li > a {
|
||||
margin-left: -1px;
|
||||
@ -59,9 +55,9 @@
|
||||
border-left: 2px solid #428BCA;
|
||||
}
|
||||
|
||||
/* Nav: second level (shown on .active) */
|
||||
// Nav: second level (shown on .active)
|
||||
.nav {
|
||||
display: none; /* Hide by default, but at >768px, show it */
|
||||
display: none; // Hide by default, but at >768px, show it
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
@ -86,36 +82,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* 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 */
|
||||
// Show and affix the side nav when space allows it
|
||||
@media (min-width: 992px) {
|
||||
.s2-docs-sidebar .s2-docs-sidenav {
|
||||
padding-top: 40px;
|
||||
@ -130,18 +97,25 @@
|
||||
.s2-docs-sidebar .nav > .active > ul {
|
||||
display: block;
|
||||
}
|
||||
/* Widen the fixed sidebar */
|
||||
|
||||
// Widen the fixed sidebar
|
||||
.s2-docs-sidebar.affix,
|
||||
.s2-docs-sidebar.affix-bottom {
|
||||
width: 213px;
|
||||
}
|
||||
|
||||
// Undo the static from mobile first approach
|
||||
.s2-docs-sidebar.affix {
|
||||
position: fixed; /* Undo the static from mobile first approach */
|
||||
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
// Undo the static from mobile first approach
|
||||
.s2-docs-sidebar.affix-bottom {
|
||||
position: absolute; /* Undo the static from mobile first approach */
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.s2-docs-sidebar.affix-bottom .s2-docs-sidenav,
|
||||
.s2-docs-sidebar.affix .s2-docs-sidenav {
|
||||
margin-top: 0;
|
||||
@ -150,7 +124,7 @@
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
/* Widen the fixed sidebar again */
|
||||
// Widen the fixed sidebar again
|
||||
.s2-docs-sidebar.affix-bottom,
|
||||
.s2-docs-sidebar.affix {
|
||||
width: 263px;
|
||||
@ -171,10 +145,8 @@
|
||||
color: #428BCA;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.back-to-top {
|
||||
@media (min-width: 768px) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,31 +1,34 @@
|
||||
/*
|
||||
* Social buttons
|
||||
*
|
||||
* Twitter and GitHub social action buttons (for homepage and footer).
|
||||
*/
|
||||
// Social buttons
|
||||
//
|
||||
// Twitter and GitHub social action buttons.
|
||||
|
||||
.s2-docs-social {
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.s2-docs-social-buttons {
|
||||
display: inline-block;
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.s2-docs-social-buttons li {
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
padding: 5px 8px;
|
||||
line-height: 1;
|
||||
}
|
||||
.s2-docs-social-buttons .twitter-follow-button {
|
||||
}
|
||||
|
||||
.twitter-follow-button {
|
||||
width: 225px !important;
|
||||
}
|
||||
.s2-docs-social-buttons .twitter-share-button {
|
||||
}
|
||||
|
||||
.twitter-share-button {
|
||||
width: 98px !important;
|
||||
}
|
||||
}
|
||||
/* Style the GitHub buttons via CSS instead of inline attributes */
|
||||
|
||||
// Style the GitHub buttons via CSS instead of inline attributes
|
||||
.github-btn {
|
||||
overflow: hidden;
|
||||
border: 0;
|
||||
|
||||
6
docs/_sass/_typography.scss
Normal file
6
docs/_sass/_typography.scss
Normal file
@ -0,0 +1,6 @@
|
||||
// Typography
|
||||
|
||||
h1[id] {
|
||||
padding-top: 20px;
|
||||
margin-top: 0;
|
||||
}
|
||||
@ -3,6 +3,8 @@
|
||||
@import "result-repository";
|
||||
@import "sidenav";
|
||||
@import "hamburger";
|
||||
@import "code";
|
||||
@import "featurette";
|
||||
@import "layout";
|
||||
@import "nav";
|
||||
@import "footer";
|
||||
@ -14,32 +16,4 @@
|
||||
@import "anchorjs";
|
||||
@import "jumbotron";
|
||||
@import "prettify";
|
||||
|
||||
.btn-toolbar {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
.half-rule {
|
||||
width: 100px;
|
||||
margin: 40px auto;
|
||||
}
|
||||
@import "typography"
|
||||
|
||||
@ -32,7 +32,9 @@ slug: home
|
||||
|
||||
<hr class="half-rule">
|
||||
|
||||
<div class="row s2-docs-featurette">
|
||||
|
||||
<div class="s2-docs-featurette">
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<i class="fa fa-language"></i>
|
||||
<h4>In your language</h4>
|
||||
@ -63,7 +65,7 @@ slug: home
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row s2-docs-featurette">
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<i class="fa fa-plug"></i>
|
||||
<h4>Fully extensible</h4>
|
||||
@ -89,6 +91,7 @@ slug: home
|
||||
<p>Support for both modern and legacy browsers is built-in, even including Internet Explorer 8.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="half-rule">
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user