diff --git a/Gruntfile.js b/Gruntfile.js index 09fc82f4e0..dca6f7ee26 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -520,7 +520,7 @@ module.exports = function (grunt) { }, docs: { /* boosted mod */ - files: ['docs/examples/**/*', 'docs/_includes/**/*', 'docs-orange/**/*', '!docs/assets/**/*'], + files: ['docs-orange/**/*'], tasks: ['dist-css', 'docs'] /* end mod */ } diff --git a/docs-orange/_data/nav.yml b/docs-orange/_data/nav.yml new file mode 100644 index 0000000000..d46775fcf7 --- /dev/null +++ b/docs-orange/_data/nav.yml @@ -0,0 +1,82 @@ +- title: Getting started + pages: + - title: Introduction + - title: Download + - title: Browsers & devices + - title: Options + - title: Flexbox + - title: Build tools + - title: Best practices + +- title: Layout + pages: + - title: Overview + - title: Grid + - title: Media object + - title: Responsive utilities + +- title: Content + pages: + - title: Reboot + - title: Typography + - title: Code + - title: Images + - title: Tables + - title: Figures + +- title: Components + pages: + - title: Buttons + - title: Button group + - title: Button dropdown + - title: Forms + - title: Input group + - title: Dropdowns + - title: Jumbotron + - title: Label + - title: Alerts + - title: Card + - title: Navs + - title: Navbar + # boosted mod + - title: Orange pointed tabs + - title: Local navigation + - title: Orange megamenu + - title: Orange footer + # end mod + - title: Breadcrumb + # boosted mod + - title: Stepbar + # end mod + - title: Pagination + # boosted mod + - title: Orange Pagination + # end mod + - title: Progress + - title: List group + - title: Modal + - title: Scrollspy + - title: Tooltips + - title: Popovers + - title: Collapse + # boosted mod + - title: Orange accordion + # end mod + - title: Carousel + - title: Utilities + +# - title: Extend +# pages: +# - title: Approach +# - title: Icon fonts + +- title: About + pages: + - title: History + - title: Team + - title: Accessibility + - title: Brand + - title: License + - title: Translations + +- title: Migration diff --git a/docs-orange/_includes/boostwatch/navLocal.html b/docs-orange/_includes/boostwatch/navLocal.html index 2ca29c0147..996acea5da 100644 --- a/docs-orange/_includes/boostwatch/navLocal.html +++ b/docs-orange/_includes/boostwatch/navLocal.html @@ -3,98 +3,85 @@

Local navigation bar

Default local navigation

-
-
+ + +
+

Two levels local navigation

-
-
- +
-
diff --git a/docs-orange/_includes/boostwatch/ofooter.html b/docs-orange/_includes/boostwatch/ofooter.html index 064fc99c7f..6b73da37f7 100644 --- a/docs-orange/_includes/boostwatch/ofooter.html +++ b/docs-orange/_includes/boostwatch/ofooter.html @@ -1,6 +1,5 @@ - + + diff --git a/docs-orange/_includes/nav-boostwatch.html b/docs-orange/_includes/nav-boostwatch.html index 1f87644a03..83b068db1a 100644 --- a/docs-orange/_includes/nav-boostwatch.html +++ b/docs-orange/_includes/nav-boostwatch.html @@ -10,7 +10,7 @@ Bullet point
- Local navigation bar + Local navigation
Accordions diff --git a/docs-orange/_includes/nav-docs.html b/docs-orange/_includes/nav-docs.html new file mode 100644 index 0000000000..2155318fa8 --- /dev/null +++ b/docs-orange/_includes/nav-docs.html @@ -0,0 +1,63 @@ +
+ +
+ + +
+ + + + + +
diff --git a/docs-orange/assets/img/logo-orange.png b/docs-orange/assets/img/logo-orange.png new file mode 100644 index 0000000000..7e4340b335 Binary files /dev/null and b/docs-orange/assets/img/logo-orange.png differ diff --git a/docs-orange/assets/scss/_boosted-docs.scss b/docs-orange/assets/scss/_boosted-docs.scss index 417a4b9de0..d5ef2418de 100644 --- a/docs-orange/assets/scss/_boosted-docs.scss +++ b/docs-orange/assets/scss/_boosted-docs.scss @@ -1,8 +1,10 @@ .bd-masthead { background-color: $brand-orange-black; color: $brand-orange-white; - border: 2px solid $gray-dark; + border: none; + border-top: 2px solid $gray-dark; padding-top: 4rem; + background-image: none; .lead { font-size: 2.1rem; @@ -20,13 +22,14 @@ } .btn { - font-size: $font-size-base; + font-size: $font-size-lg; + font-weight: $btn-font-weight; color: $brand-orange; text-decoration: none; &.btn-lg { font-size: $font-size-lg; - padding: 1.2rem 2rem; + padding: $btn-padding-y-lg $btn-padding-x-lg; } &:active, @@ -189,12 +192,14 @@ } .scrollup { - width: 40px; - height: 40px; + width: 0; + height: 0; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 30px solid #ccc; position: fixed; bottom: 50px; right: 20rem; display: none; - background-color: #ccc; z-index: 100; } \ No newline at end of file diff --git a/docs-orange/components/local-navigation.md b/docs-orange/components/local-navigation.md new file mode 100644 index 0000000000..1a42426674 --- /dev/null +++ b/docs-orange/components/local-navigation.md @@ -0,0 +1,87 @@ +--- +layout: docs +title: Local navigation +group: components +--- + +## Default local navigation + +Add the `.nav-local` class to the nav tag, `.local` onto the nav links content, and a `div` tag with the class `arrow` with the `attribute aria-hidden='true'` to switch from classic navbar to Orange local navigation. + +{% example html %} + +{% endexample %} + +## Two level local navigation + +{% example html %} + +{% endexample %} diff --git a/docs-orange/components/orange-accordion.md b/docs-orange/components/orange-accordion.md new file mode 100644 index 0000000000..71f940d2a0 --- /dev/null +++ b/docs-orange/components/orange-accordion.md @@ -0,0 +1,135 @@ +--- +layout: docs +title: Orange accordion +group: components +--- + +Extend the default collapse behavior to create an accordion with the panel component. + +### Default accordion + +{% example html %} +
+
+ +
+
Anim pariatur cliche reprehenderit, + enim eiusmod high life accusamus terry richardson ad squid. 3 wolf + moon officia aute, non cupidatat test focus 1 skateboard dolor brunch. Food + truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, + sunt aliqua put a bird on it squid single-origin coffee nulla + assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer + labore wes anderson cred nesciunt test focus 2 sapiente ea proident. Ad vegan + excepteur butcher vice lomo. Leggings occaecat craft beer + farm-to-table, raw denim aesthetic synth nesciunt you probably + haven't heard of them accusamus labore sustainable VHS.
+
+
+
+
+

+ Collapsible Group Item #2 +

+
+
+
Anim pariatur cliche reprehenderit, + enim eiusmod high life accusamus terry richardson ad squid. 3 wolf + moon officia aute, non cupidatat skateboard dolor brunch. Food + truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, + sunt aliqua put a bird on it squid single-origin coffee nulla + assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer + labore wes anderson cred nesciunt sapiente ea proident. Ad vegan test focus 3 + excepteur butcher vice lomo. Leggings occaecat craft beer + farm-to-table, raw denim aesthetic synth nesciunt you probably + haven't heard of them accusamus labore sustainable VHS.
+
+
+
+
+

+ Collapsible Group Item #3 +

+
+
+
Anim pariatur cliche reprehenderit, + enim eiusmod high life accusamus terry richardson ad squid. 3 wolf + moon officia aute, non cupidatat skateboard dolor brunch. Food + truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, + sunt aliqua put a bird on it squid single-origin coffee nulla + assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer + labore wes anderson cred nesciunt sapiente ea proident. Ad vegan + excepteur butcher vice lomo. Leggings occaecat craft beer + farm-to-table, raw denim aesthetic synth nesciunt you probably + haven't heard of them accusamus labore sustainable VHS.
+
+
+
+{% endexample %} + +### Orange version + +{% example html %} +
+
+
+

+ Collapsible Group Item #1 +

+
+
+
Anim pariatur cliche reprehenderit, + enim eiusmod high life accusamus terry richardson ad squid. 3 wolf + moon officia aute, non cupidatat test focus 1 skateboard dolor brunch. Food + truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, + sunt aliqua put a bird on it squid single-origin coffee nulla + assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer + labore wes anderson cred nesciunt test focus 2 sapiente ea proident. Ad vegan + excepteur butcher vice lomo. Leggings occaecat craft beer + farm-to-table, raw denim aesthetic synth nesciunt you probably + haven't heard of them accusamus labore sustainable VHS.
+
+
+
+
+

+ Collapsible Group Item #2 +

+
+
+
Anim pariatur cliche reprehenderit, + enim eiusmod high life accusamus terry richardson ad squid. 3 wolf + moon officia aute, non cupidatat skateboard dolor brunch. Food + truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, + sunt aliqua put a bird on it squid single-origin coffee nulla + assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer + labore wes anderson cred nesciunt sapiente ea proident. Ad vegan test focus 3 + excepteur butcher vice lomo. Leggings occaecat craft beer + farm-to-table, raw denim aesthetic synth nesciunt you probably + haven't heard of them accusamus labore sustainable VHS.
+
+
+
+
+

+ Collapsible Group Item #3 +

+
+
+
Anim pariatur cliche reprehenderit, + enim eiusmod high life accusamus terry richardson ad squid. 3 wolf + moon officia aute, non cupidatat skateboard dolor brunch. Food + truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, + sunt aliqua put a bird on it squid single-origin coffee nulla + assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer + labore wes anderson cred nesciunt sapiente ea proident. Ad vegan + excepteur butcher vice lomo. Leggings occaecat craft beer + farm-to-table, raw denim aesthetic synth nesciunt you probably + haven't heard of them accusamus labore sustainable VHS.
+
+
+
+{% endexample %} \ No newline at end of file diff --git a/docs-orange/components/orange-footer.md b/docs-orange/components/orange-footer.md new file mode 100644 index 0000000000..1518ae72c6 --- /dev/null +++ b/docs-orange/components/orange-footer.md @@ -0,0 +1,99 @@ +--- +layout: docs +title: Orange footer +group: components +--- + +Structure it with `o-footer` class and `o-footer-top` & `o-footer-bottom` to obtain two different parts. On top part, with bootstrap classes (`col-*`), you can have 6 columns to diplay content. Put an `ul` (or `ol`) to obtain one colum. The first element of each column need to be an header tag (`hx`) and it will be displayed in bold. On the bottom part, just put an `ul` (or `ol`) list to have more information links (disclaimer etc). These links will be center on the page and displayed in line. + +According to the brand, Orange pages need to have only black footer. + +{% example html %} + +{% endexample %} \ No newline at end of file diff --git a/docs-orange/components/orange-forms.md b/docs-orange/components/orange-forms.md new file mode 100644 index 0000000000..05633fa691 --- /dev/null +++ b/docs-orange/components/orange-forms.md @@ -0,0 +1,10 @@ +--- +layout: docs +title: Orange forms +group: components +--- + +### Title + +{% example html %} +{% endexample %} \ No newline at end of file diff --git a/docs-orange/components/orange-megamenu.md b/docs-orange/components/orange-megamenu.md new file mode 100644 index 0000000000..24094058ed --- /dev/null +++ b/docs-orange/components/orange-megamenu.md @@ -0,0 +1,167 @@ +--- +layout: docs +title: Orange megamenu +group: components +--- + +Add the `.mega-menu` class to the nav tag, `.nav-menu` onto the nav links container. Each item with a sub menu will have the same classes as the [dropdowns](/components/dropdowns/) + +{% example html %} + +{% endexample %} \ No newline at end of file diff --git a/docs-orange/components/orange-modal.md b/docs-orange/components/orange-modal.md new file mode 100644 index 0000000000..35273a59ef --- /dev/null +++ b/docs-orange/components/orange-modal.md @@ -0,0 +1,10 @@ +--- +layout: docs +title: Orange modal +group: components +--- + +### Title + +{% example html %} +{% endexample %} \ No newline at end of file diff --git a/docs-orange/components/orange-pagination.md b/docs-orange/components/orange-pagination.md new file mode 100644 index 0000000000..623c505117 --- /dev/null +++ b/docs-orange/components/orange-pagination.md @@ -0,0 +1,23 @@ +--- +layout: docs +title: Orange pagination +group: components +--- + +Provide pagination links Orange branded. [Orange Brand pagination](http://interaction.brand.orange.com/styleguides/web-guideline/navigating/pagination). + +Just replace the `.pagination` by `.o-pagination` to switch the display mode. The Orange pagination tool is usually displayed at the bottom of the listed data, but can also be duplicated at the top. Users can navigate page by page by using the ‘previous’ and ‘next’ links, or go to specific pages using the numbered links. The current page status must be highlighted within the pagination tool, so that the user can easily identify their location within the sequence. + +{% example html %} + +{% endexample %} \ No newline at end of file diff --git a/docs-orange/components/orange-pointed-tabs.md b/docs-orange/components/orange-pointed-tabs.md new file mode 100644 index 0000000000..97c4e1f51c --- /dev/null +++ b/docs-orange/components/orange-pointed-tabs.md @@ -0,0 +1,47 @@ +--- +layout: docs +title: Orange pointed tabs +group: components +--- + +{% example html %} + +
+
Lorem ipsum dolor sit + amet, consectetur adipiscing elit. In iaculis volutpat quam, non + suscipit arcu accumsan at. Aliquam pellentesque.
+
Sed ut perspiciatis unde omnis iste natus error sit + voluptatem accusantium doloremque laudantium, totam rem aperiam, + eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. + Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, + sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. + Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, + adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore + magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem + ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? + Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil + molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? +
+
At vero eos et accusamus et iusto odio dignissimos ducimus + qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas + molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa + qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem + rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est + eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, + omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et + aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae + sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, + ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus + asperiores repellat +
+
Lorem ipsum dolor sit + amet, consectetur adipiscing elit. In iaculis volutpat quam, non + suscipit arcu accumsan at. Aliquam pellentesque. +
+
+{% endexample %} \ No newline at end of file diff --git a/docs-orange/components/orange-stepbar.md b/docs-orange/components/orange-stepbar.md new file mode 100644 index 0000000000..76de6a620d --- /dev/null +++ b/docs-orange/components/orange-stepbar.md @@ -0,0 +1,51 @@ +--- +layout: docs +title: Stepbar +group: components +--- + +Indicate the current step within a sequential navigation. + +## Default stepbar + +Declare a list, each item need to contain a first `
` with class `.arrow` and attribute `aria-hidden="true"`, next add the correct css classes. Add the `o-wizard-step-bar` class on the `ul` element (root of your list). Then, to design steps, add `visited`, `on` or `next` classes if yout want a visited step, the current step or a futur step. These classes are to be added to the list items (`li` tag). +The number of steps can be adjusted using the special attribute `data-step` (present on the `ul` tag of the component). 5 steps max. + +{% example html %} + +{% endexample %} \ No newline at end of file diff --git a/docs-orange/components/orange-tables.md b/docs-orange/components/orange-tables.md new file mode 100644 index 0000000000..42888e6f0d --- /dev/null +++ b/docs-orange/components/orange-tables.md @@ -0,0 +1,10 @@ +--- +layout: docs +title: Orange tables +group: components +--- + +### Title + +{% example html %} +{% endexample %} \ No newline at end of file diff --git a/docs-orange/examples/orange-news/index.html b/docs-orange/examples/orange-news/index.html index 9169c8ca2a..e4eba1e400 100644 --- a/docs-orange/examples/orange-news/index.html +++ b/docs-orange/examples/orange-news/index.html @@ -132,11 +132,11 @@
  • Dropdown
  • diff --git a/docs-orange/index.html b/docs-orange/index.html index 906103a5b9..977919eff1 100644 --- a/docs-orange/index.html +++ b/docs-orange/index.html @@ -19,116 +19,18 @@

    All the core components of Bootstrap accessible and Orange branded.

    And also specific components only available in Boosted.

    • - - diff --git a/scss/_o-pagination.scss b/scss/_o-pagination.scss index c4b50a1928..9381aa1eed 100644 --- a/scss/_o-pagination.scss +++ b/scss/_o-pagination.scss @@ -1,16 +1,19 @@ // -// Pagination (multiple pages) -// -------------------------------------------------- +// Orange pagination +// +.o-pagination .page-link { + border: none; +} + .o-pagination { display: inline-block; padding-left: 0; margin: $line-height-computed 0; border-radius: $border-radius-base; - > li { + > .page-item { display: inline; // Remove list-style and block-level defaults - > a, - > span { + > .page-link { position: relative; float: left; // Collapse white-space padding: $padding-base-vertical $padding-base-horizontal; @@ -22,16 +25,14 @@ margin-left: 0; } &:first-child { - > a, - > span { + > .page-link { margin-left: 0; @include border-left-radius($border-radius-base); margin-right: -1px; } } &:last-child { - > a, - > span { + > .page-link { @include border-right-radius($border-radius-base); border-right: 0; margin-left: -1px; @@ -39,8 +40,7 @@ } } - > li > a, - > li > span { + > .page-item > .page-link { &:hover, &:focus { color: $pagination-active-color; @@ -50,8 +50,7 @@ } } - > .active > a, - > .active > span { + > .active .page-link { &, &:hover, &:focus { @@ -64,12 +63,9 @@ } > .disabled { - > span, - > span:hover, - > span:focus, - > a, - > a:hover, - > a:focus { + > .page-link:hover, + > .page-link:focus, + > .page-link { color: $pagination-disabled-color; background-color: $pagination-disabled-bg; border-color: $pagination-disabled-border; diff --git a/scss/_o-special_font-size.scss b/scss/_o-special_font-size.scss deleted file mode 100644 index 91b1f2c395..0000000000 --- a/scss/_o-special_font-size.scss +++ /dev/null @@ -1,26 +0,0 @@ -.lead { - font-size: (floor(($font-size-base * 1.15)*10)/10); - - @media (min-width: $screen-sm-min) { - font-size: ($font-size-base * 1.5); - } -} -pre { - font-size: ($font-size-base - 0.1); // Xrem to X-0.1rem -} -.panel-title { - font-size: (ceil(($font-size-base * 1.125)*10)/10); -} -@media screen and (min-width: $screen-sm-min) { - .carousel-control { - .glyphicon-chevron-left, - .glyphicon-chevron-right, - .icon-prev, - .icon-next { - font-size: 3.0rem; - } - } -} -.popover-title { - line-height: 1.8rem; -} \ No newline at end of file diff --git a/scss/_orange-css.scss b/scss/_orange-css.scss index 07b4dc7f24..cd9f7d2363 100644 --- a/scss/_orange-css.scss +++ b/scss/_orange-css.scss @@ -589,29 +589,29 @@ caption { // bits from bootstrap-orange2015.less -// a { -// color: $link-color; -// text-decoration: underline; -// -// &:hover, -// &:focus { -// color: $link-hover-color; -// text-decoration: $link-hover-decoration; -// } -// +a { + color: $link-color; + text-decoration: underline; + + &:hover, + &:focus { + color: $link-hover-color; + text-decoration: $link-hover-decoration; + } + // &:focus { // @include tab-focus(); // } -// } -// -// nav a, -// .dropdown-menu a, -// .dropdown a, -// .navbar a, -// .nav a, -// a.btn { -// text-decoration: none; -// } +} + +nav a, +.dropdown-menu a, +.dropdown a, +.navbar a, +.nav a, +a.btn { + text-decoration: none; +} // Horizontal forms //