Orbit: Touch Support

Swiping left and right should change the current slide. Swiping up and down to scroll the page should not be disrupted.

This content is here to make the page longer. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid facere architecto fugit voluptates, inventore est cum nihil vel dicta assumenda, illum. Ipsum non saepe similique repellat, enim blanditiis fuga eveniet.

-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam minima amet cupiditate pariatur doloribus, quo repudiandae facere odio ipsam laborum nihil, voluptate itaque perspiciatis dolorem aut nostrum! Autem, exercitationem, nesciunt!
-
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam minima amet cupiditate pariatur doloribus, quo repudiandae facere odio ipsam laborum nihil, voluptate itaque perspiciatis dolorem aut nostrum! Autem, exercitationem, nesciunt!
-
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam minima amet cupiditate pariatur doloribus, quo repudiandae facere odio ipsam laborum nihil, voluptate itaque perspiciatis dolorem aut nostrum! Autem, exercitationem, nesciunt!
-
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam minima amet cupiditate pariatur doloribus, quo repudiandae facere odio ipsam laborum nihil, voluptate itaque perspiciatis dolorem aut nostrum! Autem, exercitationem, nesciunt!
-

- -

+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam minima amet cupiditate pariatur doloribus, quo repudiandae facere odio ipsam laborum nihil, voluptate itaque perspiciatis dolorem aut nostrum! Autem, exercitationem, nesciunt!
+
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam minima amet cupiditate pariatur doloribus, quo repudiandae facere odio ipsam laborum nihil, voluptate itaque perspiciatis dolorem aut nostrum! Autem, exercitationem, nesciunt!
+
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam minima amet cupiditate pariatur doloribus, quo repudiandae facere odio ipsam laborum nihil, voluptate itaque perspiciatis dolorem aut nostrum! Autem, exercitationem, nesciunt!
+
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam minima amet cupiditate pariatur doloribus, quo repudiandae facere odio ipsam laborum nihil, voluptate itaque perspiciatis dolorem aut nostrum! Autem, exercitationem, nesciunt!
+

+ +

- +

diff --git a/test/visual/prototype/arrow.html b/test/visual/prototype/arrow.html index f5a3e34d8..2ed8f6cd4 100644 --- a/test/visual/prototype/arrow.html +++ b/test/visual/prototype/arrow.html @@ -9,13 +9,15 @@ -

Arrow

diff --git a/test/visual/prototype/border-box.html b/test/visual/prototype/border-box.html index 886e17d52..07ffb9837 100644 --- a/test/visual/prototype/border-box.html +++ b/test/visual/prototype/border-box.html @@ -24,35 +24,36 @@ -

Without Border Box

- This div is smaller (width is 300px and height is 100px and has no padding). -

Without Border Box

+ This div is smaller (width is 300px and height is 100px and has no padding). +

+ This div is bigger (width is 300px and height is 100px and has 3rem padding). +

- This div is bigger (width is 300px and height is 100px and has 3rem padding). -

With Border Box

- This div is same size to below (width is 300px and height is 100px and has no padding). -

- This div is same size to above (width is 300px and height is 100px and has 3rem padding). -

With Border Box

+ This div is same size to below (width is 300px and height is 100px and has no padding). +

+ This div is same size to above (width is 300px and height is 100px and has 3rem padding). +

diff --git a/test/visual/prototype/border-none.html b/test/visual/prototype/border-none.html index 7a3e394e1..2b22d4f54 100644 --- a/test/visual/prototype/border-none.html +++ b/test/visual/prototype/border-none.html @@ -9,36 +9,40 @@ -

Border None

- Hi! I am a Primary callout with no Borders -

Border None

+ Hi! I am a Primary callout with no Borders +

- Hi! I am a Secondary callout with no Borders -

+ Hi! I am a Secondary callout with no Borders +

- Hi! I am a Success callout with no Borders -

+ Hi! I am a Success callout with no Borders +

- Hi! I am a Warning callout with no Borders -

+ Hi! I am a Warning callout with no Borders +

- Hi! I am a Alert callout with no Borders +

+ Hi! I am a Alert callout with no Borders +

diff --git a/test/visual/prototype/component-styling.html b/test/visual/prototype/component-styling.html index 9e066dc8d..3fd8ed376 100644 --- a/test/visual/prototype/component-styling.html +++ b/test/visual/prototype/component-styling.html @@ -9,75 +9,79 @@ -

Rounded

These .radius, .rounded, .bordered & .shadow classes can be used independently or together to style the component by rounding its corners, giving light borders, and creating shadow to it respectively. Mostly used in buttons, cards, tables, images and many more.

- Sass Tip: You can use Shadow mixin to create something like shadow-hover-focus. Codepen example -

+ Sass Tip: You can use Shadow mixin to create something like shadow-hover-focus. Codepen example +

Buttons

- - - - - +

Buttons

+ + + + + -

Cards

- Styled Card -

This is a card.

It has an easy to override visual style, and is appropriately subdued.

Cards

+ Styled Card +

This is a card.

It has an easy to override visual style, and is appropriately subdued.

Tables

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Table Header	Table Header	Table Header	Table Header
Content Goes Here	This is longer content Donec id elit non mi porta gravida at eget metus.	Content Goes Here	Content Goes Here
Content Goes Here	This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.	Content Goes Here	Content Goes Here
Content Goes Here	This is longer content Donec id elit non mi porta gravida at eget metus.	Content Goes Here	Content Goes Here
Content Goes Here	This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.	Content Goes Here	Content Goes Here

Tables

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

Table Header	Table Header	Table Header	Table Header
Content Goes Here	This is longer content Donec id elit non mi porta gravida at eget metus.	Content Goes Here	Content Goes Here
Content Goes Here	This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.	Content Goes Here	Content Goes Here
Content Goes Here	This is longer content Donec id elit non mi porta gravida at eget metus.	Content Goes Here	Content Goes Here
Content Goes Here	This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.	Content Goes Here	Content Goes Here

Images

diff --git a/test/visual/prototype/display.html b/test/visual/prototype/display.html index 708360718..27ae25d50 100644 --- a/test/visual/prototype/display.html +++ b/test/visual/prototype/display.html @@ -28,40 +28,44 @@ -

Display None

- A span element. - My Debugged span. - Another span element -

Display Inline

- A span element. - My Debugged span. - Another span element -

Display Block

- A span element. - My Debugged span. - Another span element -

Display None

+ A span element. + My Debugged span. + Another span element +

Display Inline

+ A span element. + My Debugged span. + Another span element +

Display Block

+ A span element. + My Debugged span. + Another span element +

Display Inline Block

Floating box

Display Inline Block

Floating box

Another box, after the floating boxes...

diff --git a/test/visual/prototype/font-styling.html b/test/visual/prototype/font-styling.html index b783e61b5..e00f16e77 100644 --- a/test/visual/prototype/font-styling.html +++ b/test/visual/prototype/font-styling.html @@ -9,21 +9,25 @@ -

Font Wide

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Font Normal

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Font Bold

Perspiciatis tempore cumque, magni aspernatur, quidem. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

Font Italic

Lorem minus, placeat, cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.iure voluptas aliquam tempora neque?

Font Wide

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Font Normal

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Font Bold

Font Italic

diff --git a/test/visual/prototype/image-replacement.html b/test/visual/prototype/image-replacement.html index ce3a861c2..86e4fb0ac 100644 --- a/test/visual/prototype/image-replacement.html +++ b/test/visual/prototype/image-replacement.html @@ -9,12 +9,16 @@ -

Text Hide

- -

- Zurb - +

Text Hide

+ +

+ Zurb + +

diff --git a/test/visual/prototype/list-styling-ordered.html b/test/visual/prototype/list-styling-ordered.html index 0d9b28b0e..b5c7773b7 100644 --- a/test/visual/prototype/list-styling-ordered.html +++ b/test/visual/prototype/list-styling-ordered.html @@ -9,69 +9,73 @@ -

No Bullet

List item with a much longer description or more content.
List item
List item

List Decimal

List item with a much longer description or more content.
List item
List item

List Lower Alpha

List item with a much longer description or more content.
List item
List item

List Lower Latin

List item with a much longer description or more content.
List item
List item

List Lower Roman

List item with a much longer description or more content.
List item
List item

List Upper Alpha

List item with a much longer description or more content.
List item
List item

List Upper Latin

List item with a much longer description or more content.
List item
List item

List Upper Roman

List item with a much longer description or more content.
List item
List item

No Bullet

List item with a much longer description or more content.
List item
List item

List Decimal

List item with a much longer description or more content.
List item
List item

List Lower Alpha

List item with a much longer description or more content.
List item
List item

List Lower Latin

List item with a much longer description or more content.
List item
List item

List Lower Roman

List item with a much longer description or more content.
List item
List item

List Upper Alpha

List item with a much longer description or more content.
List item
List item

List Upper Latin

List item with a much longer description or more content.
List item
List item

List Upper Roman

List item with a much longer description or more content.
List item
List item

diff --git a/test/visual/prototype/list-styling-unordered.html b/test/visual/prototype/list-styling-unordered.html index dc0ecba63..dc52ae411 100644 --- a/test/visual/prototype/list-styling-unordered.html +++ b/test/visual/prototype/list-styling-unordered.html @@ -9,37 +9,41 @@ -

No Bullet

List item with a much longer description or more content.
List item
List item

List Disc

List item with a much longer description or more content.
List item
List item

List Circle

List item with a much longer description or more content.
List item
List item

List Square

List item with a much longer description or more content.
List item
List item

No Bullet

List item with a much longer description or more content.
List item
List item

List Disc

List item with a much longer description or more content.
List item
List item

List Circle

List item with a much longer description or more content.
List item
List item

List Square

List item with a much longer description or more content.
List item
List item

diff --git a/test/visual/prototype/overflow.html b/test/visual/prototype/overflow.html index b3c697ab7..0d2606c1d 100644 --- a/test/visual/prototype/overflow.html +++ b/test/visual/prototype/overflow.html @@ -16,192 +16,196 @@ -

Overflow Scroll

This first example uses text-nowrap also to show the scroll on both sides.

- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod - tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, - quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo - consequat. -

- Duis aute irure dolor in reprehenderit in voluptate velit esse - cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non - proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

Overflow Scroll

This first example uses text-nowrap also to show the scroll on both sides.

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, + quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. +

+ Duis aute irure dolor in reprehenderit in voluptate velit esse + cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non + proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

Overflow Hidden

Overflow Visible

diff --git a/test/visual/prototype/separator.html b/test/visual/prototype/separator.html index bc4945979..7f6eee0d8 100644 --- a/test/visual/prototype/separator.html +++ b/test/visual/prototype/separator.html @@ -9,16 +9,18 @@ -

Separator

Lorem

Ipsum Dolor

Tempor

diff --git a/test/visual/prototype/sizing-height.html b/test/visual/prototype/sizing-height.html index 26ee46860..631835a5d 100644 --- a/test/visual/prototype/sizing-height.html +++ b/test/visual/prototype/sizing-height.html @@ -33,23 +33,27 @@ +

Height

Height 25%

Height 50%

Height 75%

Height 100%

Height

Height 25%

Height 50%

Height 75%

Height 100%

- -

Max Height 100

Max Height = 100%

Max Height 100

Max Height = 100%

+ diff --git a/test/visual/prototype/text-decoration.html b/test/visual/prototype/text-decoration.html index c9dfe44e7..6f3ee92f4 100644 --- a/test/visual/prototype/text-decoration.html +++ b/test/visual/prototype/text-decoration.html @@ -9,17 +9,21 @@ -

Text Uppercase

This is a upper-cased text. Set in the year 0 F.E. ("Foundation Era"), The Psychohistorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire. Though the empire appears stable and powerful, it is slowly decaying in ways that parallel the decline of the Western Roman Empire.

Text Lowercase

This is a lower-cased text. Set in the year 0 F.E. ("Foundation Era"), The Psychohistorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire. Though the empire appears stable and powerful, it is slowly decaying in ways that parallel the decline of the Western Roman Empire.

Text capitalize

This is a caPitAlized teXt. Set in the yEar 0 F.E. ("Foundation Era"), The PsychohisTorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire. Though the empire appears stable and powerful, it is slowly decaying in ways that parallel the decline of the Western Roman Empire.

Text Uppercase

Text Lowercase

Text capitalize

diff --git a/test/visual/prototype/text-transformation.html b/test/visual/prototype/text-transformation.html index 766eb8ab3..6980442cc 100644 --- a/test/visual/prototype/text-transformation.html +++ b/test/visual/prototype/text-transformation.html @@ -9,17 +9,21 @@ -