diff --git a/docs/_sass/_alert.scss b/docs/_sass/_alert.scss index fe0edae5..cb5d54fd 100644 --- a/docs/_sass/_alert.scss +++ b/docs/_sass/_alert.scss @@ -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; } } } - diff --git a/docs/_sass/_anchorjs.scss b/docs/_sass/_anchorjs.scss index e44bedc4..04a4cca0 100644 --- a/docs/_sass/_anchorjs.scss +++ b/docs/_sass/_anchorjs.scss @@ -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; } + diff --git a/docs/_sass/_buttons.scss b/docs/_sass/_buttons.scss index a2af9b13..1ad81769 100644 --- a/docs/_sass/_buttons.scss +++ b/docs/_sass/_buttons.scss @@ -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; } diff --git a/docs/_sass/_code.scss b/docs/_sass/_code.scss new file mode 100644 index 00000000..e751e85a --- /dev/null +++ b/docs/_sass/_code.scss @@ -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; +} diff --git a/docs/_sass/_examples.scss b/docs/_sass/_examples.scss index 16a74c52..68c7666c 100644 --- a/docs/_sass/_examples.scss +++ b/docs/_sass/_examples.scss @@ -1,29 +1,51 @@ -.s2-example + pre, -.s2-event-log + pre { - margin: -15px -15px 15px; - border-radius: 0; - border-width: 0 0 1px; -} - -@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; - } +// 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 + +.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; - font-family: Menlo, 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', Monaco, Consolas, monospace; color: white; - position: relative; - padding: 45px 15px 15px; + 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,50 +58,33 @@ 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) { + margin-left: 0; + margin-right: 0; + margin-top: -15px; + border-width: 1px; + border-color: #eee; + box-shadow: none; } } -@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-example + pre, +.s2-event-log + pre { + margin: -15px -15px 15px; + border-radius: 0; + border-width: 0 0 1px; - .s2-event-log { - margin-left: 0; - margin-right: 0; - margin-top: -15px; - border-width: 1px; - border-color: #eee; - box-shadow: none; - } + @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; +} diff --git a/docs/_sass/_featurette.scss b/docs/_sass/_featurette.scss new file mode 100644 index 00000000..56eedf8c --- /dev/null +++ b/docs/_sass/_featurette.scss @@ -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; + } +} diff --git a/docs/_sass/_footer.scss b/docs/_sass/_footer.scss index 02d2b0f2..dfe5d40e 100644 --- a/docs/_sass/_footer.scss +++ b/docs/_sass/_footer.scss @@ -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 { - margin-bottom: 0; + @media (min-width: 768px) { + p { + margin-bottom: 0; + } } } + + diff --git a/docs/_sass/_hamburger.scss b/docs/_sass/_hamburger.scss index b9db0e49..759c53fc 100644 --- a/docs/_sass/_hamburger.scss +++ b/docs/_sass/_hamburger.scss @@ -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; diff --git a/docs/_sass/_home.scss b/docs/_sass/_home.scss index eebc1863..98530802 100644 --- a/docs/_sass/_home.scss +++ b/docs/_sass/_home.scss @@ -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 { - margin-bottom: 0; - color: #000; - h1 { +.s2-docs-home { + .jumbotron { + margin-bottom: 0; color: #000; - margin-top: 20px; - } -} -#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; + h1 { + color: #000; + margin-top: 20px; + } } - h4 { - margin: 30px 0 15px; + .lead { + text-align: center; + max-width: 800px; + margin: 0 auto 40px; + } + + .notice-previous { + background: #f6f6f6; + color: #666; + border-bottom: 1px solid #eee; + padding: 15px 20px; + } + + .half-rule { + width: 100px; + margin: 40px auto; } } diff --git a/docs/_sass/_jumbotron.scss b/docs/_sass/_jumbotron.scss index 5ee8243f..7b3cc5ee 100644 --- a/docs/_sass/_jumbotron.scss +++ b/docs/_sass/_jumbotron.scss @@ -1,3 +1,7 @@ +// Jumbotron +// +// Modify Bootstrap's default `.jumbotron` styles. + .jumbotron { background-color: #F6F6F6; border-bottom: 1px solid #eee; diff --git a/docs/_sass/_layout.scss b/docs/_sass/_layout.scss index 7a0f4455..e53a648e 100644 --- a/docs/_sass/_layout.scss +++ b/docs/_sass/_layout.scss @@ -1,3 +1,5 @@ +// Layout + .s2-docs-container { line-height: 1.6; } diff --git a/docs/_sass/_nav.scss b/docs/_sass/_nav.scss index 5e11eecb..27779c43 100644 --- a/docs/_sass/_nav.scss +++ b/docs/_sass/_nav.scss @@ -1,3 +1,7 @@ +// Main navigation +// +// Styles for the top `.navbar` and its dropdowns. + .s2-docs-nav { margin-bottom: 0; border-color: #eee; diff --git a/docs/_sass/_prettify.scss b/docs/_sass/_prettify.scss index 830860d4..bfe8249e 100644 --- a/docs/_sass/_prettify.scss +++ b/docs/_sass/_prettify.scss @@ -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 { - padding-left: 12px; - color: #bebebe; - line-height: 18px; + + li { + padding-left: 12px; + color: #bebebe; + line-height: 18px; + } } diff --git a/docs/_sass/_result-repository.scss b/docs/_sass/_result-repository.scss index e790f1fc..a4e256af 100644 --- a/docs/_sass/_result-repository.scss +++ b/docs/_sass/_result-repository.scss @@ -1,3 +1,5 @@ +// Styles accompanying the "Loading remote data" example `templateResult + .select2-result-repository { padding-top: 4px; padding-bottom: 3px; diff --git a/docs/_sass/_sidenav.scss b/docs/_sass/_sidenav.scss index d5e5e8d2..f7829483 100644 --- a/docs/_sass/_sidenav.scss +++ b/docs/_sass/_sidenav.scss @@ -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 { - position: static; -} +// First level of nav +.s2-docs-sidenav { + margin-top: 20px; + margin-bottom: 20px; -@media (min-width: 768px) { - .s2-docs-sidebar { + // By default it is not affixed in mobile views, so undo that + &.affix { + position: static; + } + + @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; } } diff --git a/docs/_sass/_social.scss b/docs/_sass/_social.scss index b34db8a7..0e8d0736 100644 --- a/docs/_sass/_social.scss +++ b/docs/_sass/_social.scss @@ -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; + + li { + display: inline-block; + padding: 5px 8px; + line-height: 1; + } + + .twitter-follow-button { + width: 225px !important; + } + + .twitter-share-button { + width: 98px !important; + } } -.s2-docs-social-buttons li { - display: inline-block; - padding: 5px 8px; - line-height: 1; -} -.s2-docs-social-buttons .twitter-follow-button { - width: 225px !important; -} -.s2-docs-social-buttons .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; diff --git a/docs/_sass/_typography.scss b/docs/_sass/_typography.scss new file mode 100644 index 00000000..1046c994 --- /dev/null +++ b/docs/_sass/_typography.scss @@ -0,0 +1,6 @@ +// Typography + +h1[id] { + padding-top: 20px; + margin-top: 0; +} diff --git a/docs/css/s2-docs.scss b/docs/css/s2-docs.scss index 6eb25de8..c50570f2 100644 --- a/docs/css/s2-docs.scss +++ b/docs/css/s2-docs.scss @@ -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" diff --git a/docs/index.html b/docs/index.html index 87436225..605f546c 100644 --- a/docs/index.html +++ b/docs/index.html @@ -32,61 +32,64 @@ slug: home
-
-
- -

In your language

-

- Select2 comes with support for - RTL environments, - searching with diacritics and - over 40 languages built-in. -

+ +
+
+
+ +

In your language

+

+ Select2 comes with support for + RTL environments, + searching with diacritics and + over 40 languages built-in. +

+
+ +
+ +

Remote data support

+

+ Using AJAX you can efficiently + search large lists of items. +

+
+ +
+ +

Fits in with your theme

+

+ Fully skinnable, CSS built with Sass and an + optional theme for Bootstrap 3. +

+
-
- -

Remote data support

-

- Using AJAX you can efficiently - search large lists of items. -

-
+
+
+ +

Fully extensible

+

+ The plugin system + allows you to easily customize Select2 to work exactly how you want it + to. +

+
-
- -

Fits in with your theme

-

- Fully skinnable, CSS built with Sass and an - optional theme for Bootstrap 3. -

-
-
+
+ +

Dynamic item creation

+

+ Allow users to type in a new option and + add it on the fly. +

+
-
-
- -

Fully extensible

-

- The plugin system - allows you to easily customize Select2 to work exactly how you want it - to. -

-
- -
- -

Dynamic item creation

-

- Allow users to type in a new option and - add it on the fly. -

-
- -
- -

Full browser support

-

Support for both modern and legacy browsers is built-in, even including Internet Explorer 8.

+
+ +

Full browser support

+

Support for both modern and legacy browsers is built-in, even including Internet Explorer 8.

+