From aa575cba8610623f506a18fce117fbeeb5d3ee3c Mon Sep 17 00:00:00 2001 From: Yves Gatesoupe Date: Tue, 22 Dec 2015 18:02:30 +0100 Subject: [PATCH] fix(doc): boostwatch navbar buttons typography navs pagination indicators progress bars --- docs-orange/boostwatch/index.html | 1519 +++++++++++++---------------- docs-orange/favicon.ico | Bin 0 -> 3758 bytes scss/_o-pagination.scss | 6 +- scss/_o-variables.scss | 38 +- scss/_orange-css.scss | 87 +- 5 files changed, 779 insertions(+), 871 deletions(-) create mode 100644 docs-orange/favicon.ico diff --git a/docs-orange/boostwatch/index.html b/docs-orange/boostwatch/index.html index 3175f0bce3..9cd31e2595 100644 --- a/docs-orange/boostwatch/index.html +++ b/docs-orange/boostwatch/index.html @@ -15,893 +15,744 @@ -
-
-
-

Navbar

-
- -
-
-
- - Brand -
-
- -
- -
- -
-
- -
- -
+

Navbar

+ +
+ + +
+ + + + + +

Buttons

+

Default

+

+ + + + + + + +

+ +

Hover

+

+ + + + + + + +

+ +

Pressed

+

+ + + + + + + +

+ +

Disabled

+

+ + + + + + + +

+ +

Dropdowns

+
+
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+
+ +

Sizes

+

+ + + +

+ +

+ +

+ + +

+

+ Left + Middle + Right +
+

+ +

+

+
+ + + +
-
- - -
-
-
-
-

Buttons

-
-
+
+ + +
-
- -

Default

-

- - - - - - - -

-

Hover

- -

- - - - - - - -

-

Pressed

-

- - - - - - - -

-

Disabled

- -

- - - - - - - -

- -

Dropdowns

- -
-
-
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
-
+
+ +
+ +
- -

Sizes

-

- - - - -

- -

- -

- - -
-
- Left - Middle - Right -
-
- -
-
-
- - - - -
- -
- - - -
- -
- -
- - -
-
-
-
- -
-
- - - - -
-
- - -
-
- - -
-
-
-
-

Typography

-
-
- - - -
-
-
-

Heading 1

-

Heading 2

-

Heading 3

-

Heading 4

-
Heading 5
-
Heading 6
-

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

-
-
-
-
-

Example body text

-

Nullam quis risus eget urna mollis ornare - vel eu leo. Cum sociis natoque penatibus et magnis dis parturient +

+

+ +

+

+ + + + +
+

+ + + +

Typography

+ +
+
+

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

+
+ +
+

Example body text

+

Nullam quis risus eget urna mollis ornare +vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

-

This line of text is meant to be treated as fine print.

-

The following snippet of text is rendered as bold text.

-

The following snippet of text is rendered as italicized text.

-

An abbreviation of the word attribute is attr.

-
- -
-
-
-

Emphasis classes

-

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

-

Nullam id dolor id nibh ultricies vehicula ut id elit.

-

Etiam porta sem malesuada magna mollis euismod.

-

Donec ullamcorper nulla non metus auctor fringilla.

-

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

-

Maecenas sed diam eget risus varius blandit sit amet non magna.

-
- -
-
- - - -
-
-

Blockquotes

-
-
-
-
-
-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

- Someone famous in Source Title -
-
-
-
-
-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

- Someone famous in Source Title -
-
-
-
-
- - - -
-
-
-
-

Forms

-
-
-
- -
-
-
-
-
- Legend -
- -
- -
-
-
- -
- -
- -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
+

This line of text is meant to be treated as fine print.

+

The following snippet of text is rendered as bold text.

+

The following snippet of text is rendered as italicized text.

+

An abbreviation of the word attribute is attr.

+
+ +
+

Emphasis classes

+

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

+

Nullam id dolor id nibh ultricies vehicula ut id elit.

+

Etiam porta sem malesuada magna mollis euismod.

+

Donec ullamcorper nulla non metus auctor fringilla.

+

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

+

Maecenas sed diam eget risus varius blandit sit amet non magna.

+
+
+ +
+

Blockquotes

+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

+ Someone famous in Source Title +
+
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

+ Someone famous in Source Title +
+
+
+ + + + +

Forms

+
+
+
+ +
+ Legend +
+ +
+ +
+
+
+ +
+ +
+
-
-
- -
- - A longer block of help text that breaks onto a new line and may extend beyond one line. +
+ +
-
-
- -
-
- -
-
- -
+
+ +
-
-
- -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
+
+ +
-
-
- -
- -
- +
+ +
-
-
-
- - +
+ +
-
-
- -
-
-
- -
-
- -
- +
- - + +
+ + A longer block of help text that breaks onto a new line and may extend beyond one line.
- -
- -
- -
- - +
+ +
+
+ +
+
+ +
- -
- -
-
- - + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
- -
- -
-
- - + +
+ +
+ +
-
- -
- $ - - - - -
+
+ +
- - -
+
+
+
-
- - -
+
+
-
-
-
-

Navs

-
-
+
+
+ +
-
-
-

Tabs

-
- -
-
-

Raw denim you probably haven't heard of them jean -shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master -cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. -Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater -eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia -cillum iphone. Seitan aliquip quis cardigan american apparel, butcher -voluptate nisi qui.

-
-
-

Food truck fixie locavore, accusamus mcsweeney's -marfa nulla single-origin coffee squid. Exercitation +1 labore velit, -blog sartorial PBR leggings next level wes anderson artisan four loko -farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim - craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo - nostrud organic, assumenda labore aesthetic magna delectus mollit.

-
- - -
-
-
-
-

Pills

-
- -
-
-
- -
-
+
+ +
- -
-
-

Breadcrumbs

-
-
    -
  • Home
    • -
- -
    -
  • Home
    • -
  • Library
    • -
- - -
-
-
-

Pager

-
- - - -
-
+
+ +
-
-
-

Pagination

-
- - - - +
+ + +
- -
-
+
+ + +
+
+ +
-
- -
+
+ + +
-
-
-
-

Indicators

-
-
+
+ +
-
-
-

Alerts

-
-
- -

Warning!

-

Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

-
+
+ +
+ $ + + + +
-
-
-
-
-
- - Oh snap! Change a few things up and try submitting again. -
-
-
-
-
-
- - Well done! You successfully read this important alert message. -
-
-
-
-
-
- - Heads up! This alert needs your attention, but it's not super important. -
+ +
+
+ + + +

Navs

+
+
+

Tabs

+ +
+
+

Raw denim you probably haven't heard of them jean + shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master + cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. + Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater + eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia + cillum iphone. Seitan aliquip quis cardigan american apparel, butcher + voluptate nisi qui.

+
+
+

Food truck fixie locavore, accusamus mcsweeney's + marfa nulla single-origin coffee squid. Exercitation +1 labore velit, + blog sartorial PBR leggings next level wes anderson artisan four loko + farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim + craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo + nostrud organic, assumenda labore aesthetic magna delectus mollit.

+
+ + -
-
-
-

Labels

-
- Default - Primary - Success - Warning - Danger - Info -
-
-
-

Badges

-
-
    +
+
+

Pills

+ +
+ +
+
+
+
+

Breadcrumbs

+
+
    +
  • Home
    • +
+ +
    +
  • Home
    • +
  • Library
    • +
+ + +
+
+
+ Pager + + +
+
+ +
+

Pagination

+ + + + + + + +
+ + + +

Indicators

+ +
+
+

Alerts

+
+ +

Warning!

+

Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

+
+
+
+
+
+
+ + Oh snap! Change a few things up and try submitting again. +
+
+
+
+ + Well done! You successfully read this important alert message. +
+
+
+
+ + Heads up! This alert needs your attention, but it's not super important. +
+
+
+
+
+

Labels

+
+ Default + Primary + Success + Warning + Danger + Info +
+
+
+ +

Badges

+ -
+
-
- - -
- -
-
-
-

Progress bars

-
- -

Basic

-
-
-
-
-
- -

Contextual alternatives

-
-
-
-
- -
-
-
- -
-
-
+
+
-
-
-
-
-

Striped

-
-
-
-
+ +

Progress bars

-
-
-
+

Basic

+60% -
-
-
+

Contextual alternatives

+20% +40% +60% +80% -
-
-
-
+

Striped

+20% +40% +60% +80% -

Animated

-
-
-
-
-
- -

Stacked

-
-
-
-
-
-
-
-
-
-
+

Animated

+45% -
+

Containers

-
+

Jumbotron

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

@@ -919,7 +770,7 @@

List groups

-
+
  • 14 @@ -937,7 +788,7 @@

    List groups

-
+
-
+

List group item heading

@@ -973,7 +824,7 @@

Panels

-
+
Basic panel @@ -996,7 +847,7 @@

Panels

-
+

Panel primary

@@ -1026,7 +877,7 @@

Panel warning

-
+

Panel danger

@@ -1055,21 +906,21 @@

Wells

-
+
Look, I'm in a well!
-
+
Look, I'm in a small well!
-
+
Look, I'm in a large well!
@@ -1080,7 +931,7 @@

Wells

-
+
@@ -1092,7 +943,7 @@

Dialogs

Popovers

-
+
@@ -1103,7 +954,7 @@

Popovers

Tooltips

-
+
diff --git a/docs-orange/favicon.ico b/docs-orange/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..f5fcc32d7a31f4baca3b8175b03aaa8a1738f650 GIT binary patch literal 3758 zcmeHKZ%9*76hBrUq6oa1I;6nckxnlt0sSgiV?3W_|s>v4^sMt{f0F~naq9`Vn+CFLlFp8c8it`3UgwaNX z{q+bpdl2RxM94gk@N@{F_8vl52}0*H1Xzdg)`c*0FT(gOWE&7Rru#&Oo)-TZqAYt{ z@AaP1_ud)1L*uc$@lmXu&HEZayey)~Em0Ol6v&*a9$45xBkp~#cQz-KKbeuO$L{#< zI7>V}O_ra>WjUNH%M0ARyqdA?4J^f4#M)JjD)~W3a}BF;SQrcIuFIHD^95~4e~1uck7+d& z9q0VVnv%H_Bc!keNd=ifHkKR{Vhigka%fv4B=`4|H#64SATdYTL{{1u%Ge${8k^L_ zB-Ly_9~)v9>#YeZ54#SipSa?5m-}Sh;_O6cZd$>^s;UUmm!#z%cTW<38(R}|D!siQ zig4r8u>)#f{PfC-IllOh)w8Gg;`t_iUeWqjPrp9DQbzIn_3`WDOM(ABKUPffi3o4? zgx~l7D8TE?aB8X4Jay(is!6?perPZ@7vXRd!tzs8Yd%JZ+>MZT0io+TLK4-T=US+) z)FWK)pjz_-LU6HCXKD-{I4Cb89vlwE_ttIH%pgWp> zy8mc`&3@>S`Hsnz*PU(Zs_3bOCF>8|af_=^0;N#&)E#NJ2d z%YznEWbwNtn~Db(MK99S@7$y*q^<#Wbr~A|i0b$um1gRIH@Df5a<@%L2CC{_yex=$* zxxF4?=T(HsW+l)0xnFb+4ZO}dZ#;YGQnWg*R@c>|8!9y#jj`ReRj=APZl}Fb^z8WB VfBxHERMwHtQF0Tk-p=zUzAv{@bi@Dv literal 0 HcmV?d00001 diff --git a/scss/_o-pagination.scss b/scss/_o-pagination.scss index 7682b9d1a3..4245c253b9 100644 --- a/scss/_o-pagination.scss +++ b/scss/_o-pagination.scss @@ -18,7 +18,7 @@ text-decoration: none; color: $pagination-color; background-color: $pagination-bg; - border-right: 1px solid $pagination-border; + border-right: 1px solid $pagination-border-color; margin-left: 0; } &:first-child { @@ -45,7 +45,7 @@ &:focus { color: $pagination-active-color; background-color: $pagination-bg; - border-color: $pagination-border; + border-color: $pagination-border-color; text-decoration: underline; } } @@ -58,7 +58,7 @@ z-index: 2; color: $pagination-active-color; background-color: $pagination-bg; - border-color: $pagination-border; + border-color: $pagination-border-color; cursor: default; } } diff --git a/scss/_o-variables.scss b/scss/_o-variables.scss index 69fb8a40a7..c08e74a069 100644 --- a/scss/_o-variables.scss +++ b/scss/_o-variables.scss @@ -566,17 +566,26 @@ $o-wizard-step-bar-arrow-outer-color: fadein($o-wizard-step-bar-border $pagination-color: $brand-orange-black; $pagination-bg: $brand-orange-white; -$pagination-border: $brand-orange-black; +$pagination-border-color: $brand-orange-black; + $pagination-hover-color: $brand-orange-white; $pagination-hover-bg: $brand-orange-black; $pagination-hover-border: $brand-orange-black; + $pagination-active-color: $brand-orange; $pagination-active-bg: $brand-orange-black; $pagination-active-border: $brand-orange-black; + $pagination-disabled-color: $gray-before-light; $pagination-disabled-bg: $brand-orange-white; $pagination-disabled-border: $brand-orange-black; +$pagination-padding-x: 2rem; +$pagination-padding-y: 1rem; +$pagination-padding-x-sm: 1rem; +$pagination-padding-y-sm: .5rem; +$pagination-padding-x-lg: 2rem; +$pagination-padding-y-lg: 1.2rem; //== Pager // @@ -584,7 +593,7 @@ $pagination-disabled-border: $brand-orange-black; $pager-bg: $pagination-bg; -$pager-border: $pagination-border; +$pager-border-color: $pagination-border-color; $pager-border-radius: 0; $pager-hover-bg: $pagination-hover-bg; $pager-active-bg: $pagination-active-bg; @@ -757,22 +766,14 @@ $alert-danger-border: $brand-danger; // //## -//** Background color of the whole progress component $progress-bg: $gray-lighter; -//** Progress bar text color $progress-bar-color: $brand-orange-black; -//** Variable for setting rounded corners on progress bar. $progress-border-radius: $border-radius-base; -//** Default progress bar color $progress-bar-bg: $brand-primary; -//** Success progress bar color $progress-bar-success-bg: $brand-success; -//** Warning progress bar color $progress-bar-warning-bg: $brand-warning; -//** Danger progress bar color $progress-bar-danger-bg: $brand-danger; -//** Info progress bar color $progress-bar-info-bg: $brand-info; @@ -900,16 +901,13 @@ $badge-border-radius: 0; // //## -$breadcrumb-padding-vertical: 8px; -$breadcrumb-padding-horizontal: 15px; -//** Breadcrumb background color +$breadcrumb-padding-vertical: .8rem; +$breadcrumb-padding-horizontal: 1.5rem; + $breadcrumb-bg: $brand-orange-white; -//** Breadcrumb text color -$breadcrumb-color: $brand-orange-black; -//** Text color of current page in the breadcrumb +$breadcrumb-divider-color: $brand-orange-black; $breadcrumb-active-color: $brand-primary; -//** Textual separator for between breadcrumb elements -$breadcrumb-separator: ">"; +$breadcrumb-divider: ">"; //== Carousel @@ -1128,3 +1126,7 @@ $hr-border: $gray-lighter; @mixin focus { &:focus { @content } } + +@mixin active { + &:active { @content } +} diff --git a/scss/_orange-css.scss b/scss/_orange-css.scss index 838174e468..1123246bdd 100644 --- a/scss/_orange-css.scss +++ b/scss/_orange-css.scss @@ -5,17 +5,6 @@ html { font-weight: $brand-font-weight-normal; } -.navbar .nav-item { - // Orange brand All is bold - font-weight: $brand-font-weight-bold; -} - -// Navbar background -.navbar-light, -.navbar-dark { - background: $brand-orange-black; -} - // // Caret // -------------------------------------------------- @@ -44,11 +33,61 @@ html { margin-bottom: 0; } - -// Navbar toggle // -// Custom button for toggling the `.navbar-collapse`, powered by the collapse -// JavaScript plugin. +// Navbar +// + +.navbar { + padding: 0; + + &.navbar-light, + &.navbar-dark { + background: $brand-orange-black; + } + + .nav-item { + font-weight: $brand-font-weight-bold; + + .nav-link { + margin-top: 2.8rem; + padding: 1rem; + padding-bottom: 0; + } + + .dropdown-toggle { + @include hover-focus { + color: $brand-orange; + } + display: block; + margin-top: 2.8rem; + padding: 1rem; + padding-bottom: 0; + color: $brand-orange-white; + } + } + + .form-inline { + margin-top: 1.8rem; + margin-left: 1rem; + } + + .btn-inverse-outline { + @include hover-focus{ + color: $brand-orange; + border-color: $brand-orange; + } + + @include active { + color: $brand-orange-white; + background-color: $brand-orange; + border-color: $brand-orange; + } + + color: $brand-orange-white; + background-color: $brand-orange-black; + border-color: $brand-orange-white; + } +} .navbar-toggler { @include navbar-toggle-vertical-align($navbar-toggle-vertical-margin); @@ -57,7 +96,7 @@ html { padding: $nav-link-padding; margin-right: $navbar-padding-horizontal; background-color: transparent; - background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214 + background-image: none; border: 1px solid transparent; border-radius: $border-radius-base; @@ -185,6 +224,22 @@ a:focus { outline: dotted 1px $brand-orange-black; } +// +// Progress bar +// + +.progress.progress-default{ + &[value]::-webkit-progress-value { + background-color: $brand-orange; + } + + &[value]::-moz-progress-bar { + background-color: $brand-orange; + } +} + + + // // Carousel // --------------------------------------------------