From: harry Date: Thu, 22 Jun 2017 15:58:48 +0000 (+0530) Subject: Update visual test with xy grid classes part 5! X-Git-Tag: v6.4.0-rc5~11^2 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=refs%2Fpull%2F10233%2Fhead;p=thirdparty%2Ffoundation%2Ffoundation-sites.git Update visual test with xy grid classes part 5! --- diff --git a/test/visual/slider/nonzero-start.html b/test/visual/slider/nonzero-start.html index 73c1c22f5..592c79eef 100644 --- a/test/visual/slider/nonzero-start.html +++ b/test/visual/slider/nonzero-start.html @@ -8,31 +8,35 @@ -
-

Slider: Non-zero Start Value

+
+
+
+

Slider: Non-zero Start Value

-

Slider should be at left, since the initialStart is 50 and the scale is 50-100. (top: broken, bottom: expected)

+

Slider should be at left, since the initialStart is 50 and the scale is 50-100. (top: broken, bottom: expected)

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

Slider should cover 100%, since the initialStart is 50 and the scale is 50-100 (top: broken, bottom: expected)

-
- - - - - +

Slider should cover 100%, since the initialStart is 50 and the scale is 50-100 (top: broken, bottom: expected)

+
+ + + + + +
+
diff --git a/test/visual/tooltip/explicit-positioning.html b/test/visual/tooltip/explicit-positioning.html index 3c6f19368..655f90d62 100644 --- a/test/visual/tooltip/explicit-positioning.html +++ b/test/visual/tooltip/explicit-positioning.html @@ -8,88 +8,95 @@ -
-

Tooltips: Explicit Positioning Content - no offsets

+
+
+
+

Tooltips: Explicit Positioning Content - no offsets

-

These tooltips test various positioning and alignments. Valid - positions are left/right/top/bottom. Valid alignments are - left/right/top/bottom/center. Left align means left sides should line up. - Right align means right sides should line up. Center align means centers should line up. -

+

These tooltips test various positioning and alignments. Valid + positions are left/right/top/bottom. Valid alignments are + left/right/top/bottom/center. Left align means left sides should line up. + Right align means right sides should line up. Center align means centers should line up. +

-

Top and Bottom positioned

-
-
- -
+

Top and Bottom positioned

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

Left and Right Positioned

-
-
- -
-
- -
+

Left and Right Positioned

+
+
+ +
-
- -
-
- -
+
+ +
-
- -
-
- +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
diff --git a/test/visual/top-bar/stacking.html b/test/visual/top-bar/stacking.html index 094cd8d7b..87b270830 100644 --- a/test/visual/top-bar/stacking.html +++ b/test/visual/top-bar/stacking.html @@ -8,43 +8,45 @@ -
-

Top Bar: Stacking

- -

By default, a top bar stacks on the small breakpoint (< 640px).

- -
-
-

Left

+
+
+

Top Bar: Stacking

+ +

By default, a top bar stacks on the small breakpoint (< 640px).

+ +
+
+

Left

+
+
+

Right

+
-
-

Right

-
-
-
+
-

This top bar should stack on medium and down.

+

This top bar should stack on medium and down.

-
-
-

Left

+
+
+

Left

+
+
+

Right

+
-
-

Right

-
-
-
+
-

This top bar should stack on large and down.

+

This top bar should stack on large and down.

-
-
-

Left

-
-
-

Right

+
+
+

Left

+
+
+

Right

+
diff --git a/test/visual/triggers/containing-toggle.html b/test/visual/triggers/containing-toggle.html index ad76ee801..36f7fa9cc 100644 --- a/test/visual/triggers/containing-toggle.html +++ b/test/visual/triggers/containing-toggle.html @@ -8,25 +8,29 @@ -
-

Triggers: Contained

+
+
+
+

Triggers: Contained

-

This callout has a trigger inside of it with an id. Triggering it should toggle the type

+

This callout has a trigger inside of it with an id. Triggering it should toggle the type

-
-

You can toggle this

- -
+
+

You can toggle this

+ +
-

This callout has a trigger inside of it WITHOUT an id. Triggering it should also toggle the type

+

This callout has a trigger inside of it WITHOUT an id. Triggering it should also toggle the type

-
-

You can toggle this

- +
+

You can toggle this

+ +
+
diff --git a/test/visual/triggers/programmatic.html b/test/visual/triggers/programmatic.html index 29f958fc9..92817c8a5 100644 --- a/test/visual/triggers/programmatic.html +++ b/test/visual/triggers/programmatic.html @@ -8,25 +8,29 @@ -
-

Triggers: Programmatic

+
+
+
+

Triggers: Programmatic

-

This callout uses a close button with data-close. Clicking it should close the callout.

+

This callout uses a close button with data-close. Clicking it should close the callout.

-
-

You can so totally close this!

- -
+
+

You can so totally close this!

+ +
-

This callout uses a close button with a manual event handler that uses jQuery's .trigger() function.

+

This callout uses a close button with a manual event handler that uses jQuery's .trigger() function.

-
-

You can so totally close this!

- +
+

You can so totally close this!

+ +
+
diff --git a/test/visual/typography-helpers/responsive-text-alignment.html b/test/visual/typography-helpers/responsive-text-alignment.html index 8907d067d..28b11d709 100644 --- a/test/visual/typography-helpers/responsive-text-alignment.html +++ b/test/visual/typography-helpers/responsive-text-alignment.html @@ -8,12 +8,16 @@ -
-

Typography Helpers: Responsive Alignment Classes

+
+
+
+

Typography Helpers: Responsive Alignment Classes

-
-
-

This text should be left-aligned on medium screens and up, and center-aligned on small screens.

+
+
+

This text should be left-aligned on medium screens and up, and center-aligned on small screens.

+
+
diff --git a/test/visual/vertical-rhythm/vertical-rhythm.html b/test/visual/vertical-rhythm/vertical-rhythm.html index 62f076912..2848fbdf2 100644 --- a/test/visual/vertical-rhythm/vertical-rhythm.html +++ b/test/visual/vertical-rhythm/vertical-rhythm.html @@ -44,118 +44,93 @@ -
-
- This is a first visual overview on the current Foundation 6 settings with respect to a vertical rhythm. -
-
-
-
- -
-

Normal Text

-

- 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. -

-

Small Text

- - 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. - - +
+
+
+
This is a first visual overview on the current Foundation 6 settings with respect to a vertical rhythm.
+
- - -
- -

Header 1

-

Header 2

-

Header 3

-

Header 4

-
Header 5
-
Header 6
- -

- 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. -

- -
    -
  • List item
    • -
  • List item
    • -
  • List item +
    +
    +

    Normal Text

    +

    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.

    +

    Small Text

    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. +
    +
    +

    Header 1

    Header 2

    Header 3

    +

    Header 4

    +
    Header 5
    +
    Header 6
    +

    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.

      -
    • Nested list item
      • -
    • Nested list item
      • -
    • Nested list item
      • +
    • List item
      • +
    • List item
      • +
    • List item +
        +
      • Nested list item
        • +
      • Nested list item
        • +
      • Nested list item
        • +
      +
      • +
    • List item
      • +
    • List item
      • +
    • List item
    -
    • -
  • List item
    • -
  • List item
    • -
  • List item
    • -
- -
-
-
Other Stuff
-
Buttons
- So Tiny - So Small - So Basic - So Large - Such Expand - Wow, Small Expand -
Form elements
-
- -

Here's how you use this input field!

- - - -
-
- Choose Your Favorite - - - -
-
-
-
- Check these out - - - -
-
-
- -
-
- -
+
+
Other Stuff
+
Buttons
So Tiny So Small So Basic So Large Such Expand Wow, Small Expand +
Form elements
+ + +

Here's how you use this input field!

+ + + +
+
+ Choose Your Favorite + + + + + + +
+
+
+
+ Check these out + + + + + + +
+
+
+
+ +
+
+
+
+
$ + Submit
+
-
- $ - - Submit -
- -