From bc488339255cfa45eb32ce70f55f10081fa0d05e Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Thu, 5 Jun 2014 15:12:44 -0500 Subject: [PATCH] test(css): reorganize css tests for snapshots --- .../contacts/test.scenario.js | 11 - demos/directive/list/reorderDelete/index.html | 2 +- demos/directive/tabs/tabsAndNav/index.html | 18 +- test/css/actionsheet.html | 76 - test/css/bars-clear.html | 1 + test/css/biglists.html | 1294 ----------------- test/css/button-bar.html | 21 +- test/css/buttons-borderless.html | 52 + test/css/buttons-button-block-clear.html | 36 + test/css/buttons-button-block.html | 34 + test/css/buttons-button-outline.html | 36 + test/css/buttons-clear.html | 45 + test/css/buttons-default.html | 50 + test/css/buttons-full.html | 42 + test/css/buttons-large.html | 47 + test/css/buttons-link-block-clear.html | 36 + test/css/buttons-link-block.html | 34 + test/css/buttons-link-outline.html | 36 + test/css/buttons-misc.html | 38 + test/css/buttons-outline.html | 49 + test/css/buttons-pseudo-icon-compare.html | 45 + test/css/buttons-small.html | 48 + test/css/buttons.html | 448 ------ test/css/cards-header-footer.html | 32 + test/css/cards-item-avatar.html | 47 + test/css/cards-item-body.html | 52 + test/css/cards-item-icon.html | 44 + test/css/cards-item-thumbnail.html | 58 + test/css/cards-text.html | 60 + test/css/cards.html | 190 --- test/css/colors.html | 3 +- test/css/footers.html | 2 +- test/css/grid.html | 11 +- test/css/headers.html | 31 +- test/css/input-checkbox.html | 10 +- test/css/input-radio.html | 10 +- test/css/input-range.html | 17 +- test/css/input-select.html | 10 +- test/css/input-text.html | 1 + test/css/input-textarea.html | 1 + test/css/input-toggle.html | 81 +- test/css/lists-avatar.html | 57 + test/css/lists-buttons.html | 115 ++ test/css/lists-colors.html | 36 + test/css/lists-icons.html | 89 ++ test/css/lists-text.html | 91 ++ test/css/lists-thumbnails.html | 56 + test/css/lists.html | 585 -------- test/css/loading.html | 24 - test/css/modals.html | 59 - test/css/progress.html | 13 +- test/css/scroll.html | 4 +- .../css/{search-ios7.html => search-ios.html} | 1 + test/css/search.html | 1 + test/css/side-menus.html | 56 - test/css/{splitPane.html => split-pane.html} | 3 +- test/css/status-bar.html | 1 + test/css/tabs-and-cards.html | 16 +- test/css/{tab-bars.html => tabs-default.html} | 22 +- ...ons-bottom.html => tabs-icons-bottom.html} | 37 +- ...s-icons-left.html => tabs-icons-left.html} | 24 +- ...icons-right.html => tabs-icons-right.html} | 24 +- ...-bars-no-icons.html => tabs-no-icons.html} | 23 +- ...s-only-icons.html => tabs-only-icons.html} | 23 +- ...with-footer.html => tabs-with-footer.html} | 5 +- test/css/test.scenario.js | 36 + test/css/tree_bark.png | Bin 42360 -> 0 bytes test/css/type.html | 3 +- 68 files changed, 1531 insertions(+), 3032 deletions(-) delete mode 100644 test/css/actionsheet.html delete mode 100644 test/css/biglists.html create mode 100644 test/css/buttons-borderless.html create mode 100644 test/css/buttons-button-block-clear.html create mode 100644 test/css/buttons-button-block.html create mode 100644 test/css/buttons-button-outline.html create mode 100644 test/css/buttons-clear.html create mode 100644 test/css/buttons-default.html create mode 100644 test/css/buttons-full.html create mode 100644 test/css/buttons-large.html create mode 100644 test/css/buttons-link-block-clear.html create mode 100644 test/css/buttons-link-block.html create mode 100644 test/css/buttons-link-outline.html create mode 100644 test/css/buttons-misc.html create mode 100644 test/css/buttons-outline.html create mode 100644 test/css/buttons-pseudo-icon-compare.html create mode 100644 test/css/buttons-small.html delete mode 100644 test/css/buttons.html create mode 100644 test/css/cards-header-footer.html create mode 100644 test/css/cards-item-avatar.html create mode 100644 test/css/cards-item-body.html create mode 100644 test/css/cards-item-icon.html create mode 100644 test/css/cards-item-thumbnail.html create mode 100644 test/css/cards-text.html delete mode 100644 test/css/cards.html create mode 100644 test/css/lists-avatar.html create mode 100644 test/css/lists-buttons.html create mode 100644 test/css/lists-colors.html create mode 100644 test/css/lists-icons.html create mode 100644 test/css/lists-text.html create mode 100644 test/css/lists-thumbnails.html delete mode 100644 test/css/lists.html delete mode 100644 test/css/loading.html delete mode 100644 test/css/modals.html rename test/css/{search-ios7.html => search-ios.html} (98%) delete mode 100644 test/css/side-menus.html rename test/css/{splitPane.html => split-pane.html} (99%) rename test/css/{tab-bars.html => tabs-default.html} (60%) rename test/css/{tab-bars-icons-bottom.html => tabs-icons-bottom.html} (60%) rename test/css/{tab-bars-icons-left.html => tabs-icons-left.html} (56%) rename test/css/{tab-bars-icons-right.html => tabs-icons-right.html} (57%) rename test/css/{tab-bars-no-icons.html => tabs-no-icons.html} (52%) rename test/css/{tab-bars-only-icons.html => tabs-only-icons.html} (56%) rename test/css/{tab-with-footer.html => tabs-with-footer.html} (96%) create mode 100644 test/css/test.scenario.js delete mode 100644 test/css/tree_bark.png diff --git a/demos/directive/collectionRepeat/contacts/test.scenario.js b/demos/directive/collectionRepeat/contacts/test.scenario.js index ce3032b79e..2571edca98 100644 --- a/demos/directive/collectionRepeat/contacts/test.scenario.js +++ b/demos/directive/collectionRepeat/contacts/test.scenario.js @@ -2,17 +2,6 @@ name: contacts component: collectionRepeat --- -it('should scroll to the bottom', function(){ - var ele = element(by.css('.bar-header .button')); - ele.click(); - browser.sleep(200); -}); - -it('should scroll to the top', function(){ - var ele = element(by.css('.bar-header')); - ele.click(); - browser.sleep(200); -}); it('should filter by juan', function(){ var ele = element(by.model('search')); diff --git a/demos/directive/list/reorderDelete/index.html b/demos/directive/list/reorderDelete/index.html index c1502edba9..c8e0d08a93 100644 --- a/demos/directive/list/reorderDelete/index.html +++ b/demos/directive/list/reorderDelete/index.html @@ -18,7 +18,7 @@ component: ionList - +

Item {{item}}

Here's an item description.

-

+ +

Almost every mobile application has some form of tab bar interface.

+ +

Ionic has a built-in ion-tabs directive that we can use in order to build our tabbed interface. Create the ion-tabs directive and we can start filling it with tabs. The directive to create a tab is just the ion-tab directive. This takes a title, and this specifies what the title of our tab will be.

+ +

When we save this, we now have a tab that pops up with the text of “Home tab”.

+ +

Let’s add a second tab, because a single-tabbed app is pretty boring. I’m just going to call this one “About”. I’m going to create some equally interesting content.

+ +

We can now swap between our tabs, and see that things happen! We may want to change the color scheme of our tabs. Ionic ships with several colors that are detailed in the documentation in the notes, but if we want to update that, we can set a class of ion-tabs.

+ +

Now, if we look in the documentation, the colors are unprefixed. If we want the blue color, we use the positive class. However, in the case of tabs, we want those to be able to be sub-customizable. For this, we have to prefix this class with ‘tabs-‘. Saving, we now see the nice color.

+ +

Let’s add a header. This can be added with the ion-header-bar directive. Inside, we can set what we want the title to be. Let’s set a color on it. This is interesting, but what if we want a different title for each section of the application?

+ +

You can set a navigation system up, which is detailed in more advanced videos and formulas. For the sake of simplicity in this video, we will create an ion-header-bar in each tab of our app. Copy the header bar, change the titles, and save. We now have updating headers across our tabs!

+ diff --git a/test/css/actionsheet.html b/test/css/actionsheet.html deleted file mode 100644 index d0965deb3f..0000000000 --- a/test/css/actionsheet.html +++ /dev/null @@ -1,76 +0,0 @@ - - - - Action Sheets - - - - - -
- -
-

Action Sheets

-
- -
-
- Open Sheet -

Homepage

-
-
- -
- -
-
-
Do you like ice cream?
- - -
-
- -
-
- -
-
- - - - - - diff --git a/test/css/bars-clear.html b/test/css/bars-clear.html index edb12447b0..beb618ed7b 100644 --- a/test/css/bars-clear.html +++ b/test/css/bars-clear.html @@ -1,3 +1,4 @@ + diff --git a/test/css/biglists.html b/test/css/biglists.html deleted file mode 100644 index 65a55c89d9..0000000000 --- a/test/css/biglists.html +++ /dev/null @@ -1,1294 +0,0 @@ - - - - Big Lists - - - - - - -
-

Lists

-
- -
- -
-
- -
- Work -
- - - - Check mail - - - - - Call Ma - - - -
- Work -
- - - - Check mail - 5 - - - - - Call Ma - - Cell - - - - - - Record album - - Grammy - - - - - - Breaking Bad - - Blue, yellow, pink - - - -
- Leisure -
- - - - Games - - Super Mario - - - - - - Music - - JT - - - - - - Shopping - - Bag - - - - - - Friends - 0 - - - -
- List Header -
- -
- Not a link so no default right arrow -
- - -
- Auto Right side arrow cuz its a link -
- - - -
- Processing Icon - -
- - -
- List Divider -
- - -
- Computers - Badge -
-
- -
- - - -
- Monitors - 6 -
-
- -
- - - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
- Multiple Badges - 62 - 4 - 143 -
-
- -
- - -
-
- Homepage -
-
- - -
- - - - - - - - diff --git a/test/css/button-bar.html b/test/css/button-bar.html index 8b8d22e6f5..25f927e219 100644 --- a/test/css/button-bar.html +++ b/test/css/button-bar.html @@ -1,3 +1,4 @@ + @@ -12,7 +13,7 @@
- +

One @@ -20,7 +21,7 @@ Three

- +

One @@ -28,7 +29,7 @@ Three

- +

One @@ -36,7 +37,7 @@ Three

- +

One @@ -44,7 +45,7 @@ Three

- +

One @@ -52,7 +53,7 @@ Three

- +

One @@ -60,7 +61,7 @@ Three

- +

One @@ -68,7 +69,7 @@ Three

- +

One @@ -76,7 +77,7 @@ Three

- +

One @@ -84,7 +85,7 @@ Three

- +

One diff --git a/test/css/buttons-borderless.html b/test/css/buttons-borderless.html new file mode 100644 index 0000000000..8f957400dd --- /dev/null +++ b/test/css/buttons-borderless.html @@ -0,0 +1,52 @@ + + + + + Buttons + + + + + + +
+

Buttons: borderless

+
+ +
+ +

a.button-icon (Borderless, 32px)

+

+
+ .button-clear Next .button-icon +

+ +
+ +

button.button-icon (Borderless, 32px)

+

+ +

+ +
+ +

a.button-block.button-icon (Borderless, 32px)

+

+ +

+ +
+ +

button.button-block.button-icon (Borderless, 32px)

+

+ +

+ +
+ + + diff --git a/test/css/buttons-button-block-clear.html b/test/css/buttons-button-block-clear.html new file mode 100644 index 0000000000..4b7aca7dc1 --- /dev/null +++ b/test/css/buttons-button-block-clear.html @@ -0,0 +1,36 @@ + + + + + Buttons + + + + + + +
+

Buttons: <button> block clear w/ padding

+
+ +
+ + + + + + + + + + + + +
+ + + diff --git a/test/css/buttons-button-block.html b/test/css/buttons-button-block.html new file mode 100644 index 0000000000..146e88a6c9 --- /dev/null +++ b/test/css/buttons-button-block.html @@ -0,0 +1,34 @@ + + + + + Buttons + + + + + + +
+

Buttons: <button> block w/ padding

+
+ +
+ + + + + + + + + + +
+ + + diff --git a/test/css/buttons-button-outline.html b/test/css/buttons-button-outline.html new file mode 100644 index 0000000000..996e90f37f --- /dev/null +++ b/test/css/buttons-button-outline.html @@ -0,0 +1,36 @@ + + + + + Buttons + + + + + + +
+

Buttons: <button> outline w/ padding

+
+ +
+ + + + + + + + + + + + +
+ + + diff --git a/test/css/buttons-clear.html b/test/css/buttons-clear.html new file mode 100644 index 0000000000..e4caee9fe2 --- /dev/null +++ b/test/css/buttons-clear.html @@ -0,0 +1,45 @@ + + + + + Buttons + + + + + + +
+

Buttons: clear

+
+ +
+ Default + .button-light + .button-stable + .button-positive + .button-calm + .button-balanced + + + .button-royal + .button-dark + + + + + + + + + + + +
+ + + diff --git a/test/css/buttons-default.html b/test/css/buttons-default.html new file mode 100644 index 0000000000..f98b2e8d24 --- /dev/null +++ b/test/css/buttons-default.html @@ -0,0 +1,50 @@ + + + + + Buttons + + + + + + +
+

Buttons: default

+
+ +
+ + + + + + + + + + + + +
+ + Default + .button-light + .button-stable + .button-positive + .button-calm + .button-balanced + + .button-energized + .button-royal + .button-dark + Login + +
+ + + diff --git a/test/css/buttons-full.html b/test/css/buttons-full.html new file mode 100644 index 0000000000..9c5142ce24 --- /dev/null +++ b/test/css/buttons-full.html @@ -0,0 +1,42 @@ + + + + + Buttons + + + + + + +
+

Buttons: full

+
+ +
+ +

+ + + + + + + + + + +

+ +

+ w/ parent .button-full +

+ +
+ + + diff --git a/test/css/buttons-large.html b/test/css/buttons-large.html new file mode 100644 index 0000000000..f8a088d6ca --- /dev/null +++ b/test/css/buttons-large.html @@ -0,0 +1,47 @@ + + + + + Buttons + + + + + + +
+

Buttons: large

+
+ +
+ + + + + + + + + + + +
+ + Default + .button-light + .button-stable + .button-positive + .button-calm + .button-balanced + + + .button-royal + .button-dark +
+ + + diff --git a/test/css/buttons-link-block-clear.html b/test/css/buttons-link-block-clear.html new file mode 100644 index 0000000000..6eb4603b58 --- /dev/null +++ b/test/css/buttons-link-block-clear.html @@ -0,0 +1,36 @@ + + + + + Buttons + + + + + + +
+

Buttons: <a> block clear w/ padding

+
+ +
+ + Default + .button-light + .button-stable + .button-positive + .button-calm + .button-balanced + .button-assertive + .button-energized + .button-royal + .button-dark + +
+ + + diff --git a/test/css/buttons-link-block.html b/test/css/buttons-link-block.html new file mode 100644 index 0000000000..046781721a --- /dev/null +++ b/test/css/buttons-link-block.html @@ -0,0 +1,34 @@ + + + + + Buttons + + + + + + +
+

Buttons: <link> block w/ padding

+
+ +
+ Default + .button-light + .button-stable + .button-positive + .button-calm + .button-balanced + .button-assertive + .button-energized + .button-royal + .button-dark +
+ + + diff --git a/test/css/buttons-link-outline.html b/test/css/buttons-link-outline.html new file mode 100644 index 0000000000..92a3635364 --- /dev/null +++ b/test/css/buttons-link-outline.html @@ -0,0 +1,36 @@ + + + + + Buttons + + + + + + +
+

Buttons: <link> outline w/ padding

+
+ +
+ + Default + .button-light + .button-stable + .button-positive + .button-calm + .button-balanced + .button-assertive + .button-energized + .button-royal + .button-dark + +
+ + + diff --git a/test/css/buttons-misc.html b/test/css/buttons-misc.html new file mode 100644 index 0000000000..a268b6d6b7 --- /dev/null +++ b/test/css/buttons-misc.html @@ -0,0 +1,38 @@ + + + + + Buttons + + + + + + +
+

Buttons: Misc.

+
+ +
+ +

+ Disabled By ClassName + Disabled By Attribute +

+ +
+ +

+ + + link element +

+ +
+ + + diff --git a/test/css/buttons-outline.html b/test/css/buttons-outline.html new file mode 100644 index 0000000000..4b25f25d86 --- /dev/null +++ b/test/css/buttons-outline.html @@ -0,0 +1,49 @@ + + + + + Buttons + + + + + + +
+

Buttons: outline

+
+ +
+ + + + + + + + + + + + +
+ + Default + .button-light + .button-stable + .button-positive + .button-calm + .button-balanced + .button-assertive + .button-energized + .button-royal + .button-dark + +
+ + + diff --git a/test/css/buttons-pseudo-icon-compare.html b/test/css/buttons-pseudo-icon-compare.html new file mode 100644 index 0000000000..1bab6c4cd9 --- /dev/null +++ b/test/css/buttons-pseudo-icon-compare.html @@ -0,0 +1,45 @@ + + + + + Buttons + + + + + + +
+

Buttons: pseudo and <i> icon compare

+
+ +
+ + .button.icon-left.ion-home
+ .button > .icon.ion-home
+ + .button.icon-right.ion-home
+ .button > .icon.ion-home
+ .button.icon-left.ion-home
+ .button > .icon.ion-home
+ + .button.button-small.icon-left.ion-home
+ .button.button-small > .icon.ion-home
+ + .button.button-large.icon-left.ion-home
+ .button.button-large > .icon.ion-home
+ + .button.icon.ion-home
+ .button > .icon.ion-home
+ + .button.button-icon.ion-home
+ .button > .button-icon.ion-home
+ +
+ + + diff --git a/test/css/buttons-small.html b/test/css/buttons-small.html new file mode 100644 index 0000000000..fb5123efb7 --- /dev/null +++ b/test/css/buttons-small.html @@ -0,0 +1,48 @@ + + + + + Buttons + + + + + + +
+

Buttons: small

+
+ +
+ + + + + + + + + + + +
+ + Default + .button-light + .button-stable + .button-positive + .button-calm + .button-balanced + + + .button-royal + .button-dark + +
+ + + diff --git a/test/css/buttons.html b/test/css/buttons.html deleted file mode 100644 index c0d3b03362..0000000000 --- a/test/css/buttons.html +++ /dev/null @@ -1,448 +0,0 @@ - - - - Buttons - - - - - - - - -
-

Buttons

-
- - - -
- -

icon classnames assigned to the button

-

- .button.icon-left.ion-home
- .button > .icon.ion-home
- - .button.icon-right.ion-home
- .button > .icon.ion-home
- .button.icon-left.ion-home
- .button > .icon.ion-home
- - .button.button-small.icon-left.ion-home
- .button.button-small > .icon.ion-home
- - .button.button-large.icon-left.ion-home
- .button.button-large > .icon.ion-home
- - .button.icon.ion-home
- .button > .icon.ion-home
- - .button.button-icon.ion-home
- .button > .button-icon.ion-home
- -

- -
- -

a.button default

-

- Default - .button-light - .button-stable - .button-positive - .button-calm - .button-balanced - - .button-energized - .button-royal - .button-dark - Login -

- -
- -

button.button default

-

- - - - - - - - - - -

- -
- -

a.button.button-large default

-

- Default - .button-light - .button-stable - .button-positive - .button-calm - .button-balanced - - - .button-royal - .button-dark -

- -
- -

button.button. button-large default

-

- - - - - - - - - - -

- -
- -

a.button.button-small default

-

- Default - .button-light - .button-stable - .button-positive - .button-calm - .button-balanced - - - .button-royal - .button-dark -

- -
- -

button.button.button-small

-

- - - - - - - - - - -

- -
- -

a.button.button-clear (Mixed in with others)

-

- Default - .button-light - .button-stable - .button-positive - .button-calm - .button-balanced - - - .button-royal - .button-dark -

- -
- -

button.button.button-clear default

-

- - - - - - - - - - -

- -
- -

a.button-block (parent w/ padding)

-

- Default - .button-light - .button-stable - .button-positive - .button-calm - .button-balanced - .button-assertive - .button-energized - .button-royal - .button-dark -

- -
- -

button.button-block (parent w/ padding)

-

- - - - - - - - - - -

- -
- -

a.button-icon (Borderless, 32px)

-

- - .button-clear Next .button-icon -

- -
- -

button.button-icon (Borderless, 32px)

-

- -

- -
- -

a.button-block.button-icon (Borderless, 32px)

-

- -

- -
- -

button.button-block.button-icon (Borderless, 32px)

-

- -

- -
- -

a.button-outline

-

- Default - .button-light - .button-stable - .button-positive - .button-calm - .button-balanced - .button-assertive - .button-energized - .button-royal - .button-dark -

- -
- -

button.button-outline

-

- - - - - - - - - - -

- -
- -

a.button-block.button-outline (parent w/ padding)

-

- Default - .button-light - .button-stable - .button-positive - .button-calm - .button-balanced - .button-assertive - .button-energized - .button-royal - .button-dark -

- -
- -

button.button-block.button-outline (parent w/ padding)

-

- - - - - - - - - - -

- -
- -

a.button-clear

-

- Default - .button-light - .button-stable - .button-positive - .button-calm - .button-balanced - .button-assertive - .button-energized - .button-royal - .button-dark -

- -
- -

button.button-clear

-

- - - - - - - - - - -

- -
- -

a.button-block.button-clear (parent w/ padding)

-

- Default - .button-light - .button-stable - .button-positive - .button-calm - .button-balanced - .button-assertive - .button-energized - .button-royal - .button-dark -

- -
- -

button.button-block.button-clear (parent w/ padding)

-

- - - - - - - - - - -

- -
- -
- -

a.button-block (parent w/out padding)

-

- Default - .button-light - .button-stable - .button-positive - .button-calm - .button-balanced - .button-assertive - .button-energized - .button-royal - .button-dark -

- -
- -

a.button-block (.button-full on the parent)

-

- Default - .button-light - .button-stable - .button-positive - .button-calm - .button-balanced - .button-assertive - .button-energized - .button-royal - .button-dark -

- -
- -

button.button-block.button-full on each button and nothing on the parent

-

- - - - - - - - - - -

- -
- -

- Disabled By ClassName - Disabled By Attribute -

- -
- -

- - -

- -

- All CSS Tests -

- -
- - - - - diff --git a/test/css/cards-header-footer.html b/test/css/cards-header-footer.html new file mode 100644 index 0000000000..0a7bbc327a --- /dev/null +++ b/test/css/cards-header-footer.html @@ -0,0 +1,32 @@ + + + + + Cards + + + + + +
+

Cards: Header/Footer

+
+ +
+ +
+
+ I'm a Header in a Card! +
+
+ This is a basic Card with some text. +
+
+ I'm a Footer in a Card! +
+
+ +
+ + + diff --git a/test/css/cards-item-avatar.html b/test/css/cards-item-avatar.html new file mode 100644 index 0000000000..6bde69bca2 --- /dev/null +++ b/test/css/cards-item-avatar.html @@ -0,0 +1,47 @@ + + + + + Cards + + + + + +
+

Cards: Item Avatar

+
+ +
+ +
+ +
+ +

Pretty Hate Machine

+

Nine Inch Nails

+
+ +
+ + +

Pretty Hate Machine, .item-complex

+

Nine Inch Nails

+ +
+ +
+ +
+ + + + Start listening + + +
+ +
+ + + diff --git a/test/css/cards-item-body.html b/test/css/cards-item-body.html new file mode 100644 index 0000000000..3b3567b957 --- /dev/null +++ b/test/css/cards-item-body.html @@ -0,0 +1,52 @@ + + + + + Cards + + + + + +
+

Cards: Item Body

+
+ +
+ +
+ +
+ +

+ This is a "Facebook" styled Card. The header is created from a Thumbnail List item, + the content is from a card-body consisting of an image and paragraph text. The footer + consists of a Tab Bar, icons aligned left, within the card-footer. +

+

+ 1 Like + 5 Comments +

+
+ +
+ + + Like + + + + Comment + + + + Share + +
+ +
+ +
+ + + diff --git a/test/css/cards-item-icon.html b/test/css/cards-item-icon.html new file mode 100644 index 0000000000..625461a60b --- /dev/null +++ b/test/css/cards-item-icon.html @@ -0,0 +1,44 @@ + + + + + Cards + + + + + +
+

Cards: Item Icon

+
+ +
+ +
+ + + + Enter home address + + + + + Enter phone number + + + + + Enter wireless password + + + + + Enter card information + + +
+ +
+ + + diff --git a/test/css/cards-item-thumbnail.html b/test/css/cards-item-thumbnail.html new file mode 100644 index 0000000000..975c425472 --- /dev/null +++ b/test/css/cards-item-thumbnail.html @@ -0,0 +1,58 @@ + + + + + Cards + + + + + +
+

Cards: Item Thumbnail

+
+ +
+ +
+ +
+ +

.item.item-avatar

+

November 05, 1955

+
+ +
+ +

.item.item-thumbnail-left

+

November 05, 1955

+
+ +
+ + +

.item.item-thumbnail-left.item-complex .item-content

+

November 05, 1955

+ +
+ +
+ +

.item.item-thumbnail-right

+

November 05, 1955

+
+ +
+ + +

.item.item-thumbnail-right.item-complex .item-content

+

November 05, 1955

+ +
+ +
+ +
+ + + diff --git a/test/css/cards-text.html b/test/css/cards-text.html new file mode 100644 index 0000000000..c171ff4723 --- /dev/null +++ b/test/css/cards-text.html @@ -0,0 +1,60 @@ + + + + + Cards + + + + + +
+

Cards: Text

+
+ +
+ +
+
+ .card .item.item-text-wrap + This is a basic Card with some wrapping text. + This is a basic Card with some wrapping text. + This is a basic Card with some wrapping text. +
+
+ +
+
+ .card.item-text-wrap .item + This is a basic Card with some wrapping text. + This is a basic Card with some wrapping text. + This is a basic Card with some wrapping text. +
+
+ +
+
+
+ .card .item item-complex.item-text-wrap .item-content + This is a basic Card with some wrapping text. + This is a basic Card with some wrapping text. + This is a basic Card with some wrapping text. +
+
+
+ +
+
+
+ .card.item-text-wrap .item.item-complex .item-content + This is a basic Card with some wrapping text. + This is a basic Card with some wrapping text. + This is a basic Card with some wrapping text. +
+
+
+ +
+ + + diff --git a/test/css/cards.html b/test/css/cards.html deleted file mode 100644 index d783011be9..0000000000 --- a/test/css/cards.html +++ /dev/null @@ -1,190 +0,0 @@ - - - - Cards - - - - - - - -
-

Cards

-
- - - -
-
- This is a basic Card with some wrapping text. - This is a basic Card with some wrapping text. - This is a basic Card with some wrapping text. -
-
- -
-
- This is a basic Card with some wrapping text. - This is a basic Card with some wrapping text. - This is a basic Card with some wrapping text. -
-
- -
-
-
- This is a basic Card with some wrapping text. - This is a basic Card with some wrapping text. - This is a basic Card with some wrapping text. -
-
-
- -
-
-
- This is a basic Card with some wrapping text. - This is a basic Card with some wrapping text. - This is a basic Card with some wrapping text. -
-
-
- -
-
- I'm a Header in a Card! -
-
- This is a basic Card with some text. -
-
- I'm a Footer in a Card! -
-
- -
- - - - Enter home address - - - - - Enter phone number - - - - - Enter wireless password - - - - - Enter card information - - -
- -
- -
- -

Pretty Hate Machine

-

Nine Inch Nails

-
- -
- - -

Pretty Hate Machine, .item-complex

-

Nine Inch Nails

- -
- -
- -
- - - - Start listening - - -
- -
- -
- -

Marty McFly

-

November 05, 1955

-
- -
- -

Marty McFly

-

November 05, 1955

-
- -
- - -

Marty McFly, .item-complex

-

November 05, 1955

- -
- -
- -

Marty McFly

-

November 05, 1955

-
- -
- - -

Marty McFly, .item-complex

-

November 05, 1955

- -
- -
- -

- This is a "Facebook" styled Card. The header is created from a Thumbnail List item, - the content is from a card-body consisting of an image and paragraph text. The footer - consists of a Tab Bar, icons aligned left, within the card-footer. -

-

- 1 Like - 5 Comments -

-
- -
- - - Like - - - - Comment - - - - Share - -
- -
- -

All CSS Tests

- - - - - diff --git a/test/css/colors.html b/test/css/colors.html index 8e2a28f5f1..c40b703424 100644 --- a/test/css/colors.html +++ b/test/css/colors.html @@ -1,3 +1,4 @@ + @@ -22,7 +23,7 @@
- +
  • positive diff --git a/test/css/footers.html b/test/css/footers.html index 5374c1d238..5aba716b0a 100644 --- a/test/css/footers.html +++ b/test/css/footers.html @@ -1,3 +1,4 @@ + @@ -72,7 +73,6 @@ Content
    Content

    -

    All CSS Tests