Test update

Author: oleersoy

package.json

@@ -1,6 +1,6 @@
 {
   "name": "superfly-css-component-button",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "description": "CSS Button Component.",
   "main": "src/main/css/index.css",
   "scripts": {
@@ -27,8 +27,8 @@
   "homepage": "https://github.com/superfly-css/superfly-css-component-button#readme",
   "devDependencies": {
     "gulp": "^3.9.1",
-    "superfly-css-component-site": "0.0.3",
-    "superfly-css-component-test": "0.0.12",
+    "superfly-css-component-site": "0.1.0",
+    "superfly-css-component-test": "0.1.2",
     "superfly-css-foundation": "0.0.8",
     "superfly-css-pli": "0.0.9",
     "superfly-css-task-build": "^0.3.2",
@@ -39,6 +39,6 @@
     "superfly-css-utilities-effects": "0.0.14",
     "superfly-css-utilities-fonts": "0.0.19",
     "superfly-css-utilities-icons": "0.0.2",
-    "superfly-css-utilities-layout": "0.1.8"
+    "superfly-css-utilities-layout": "0.3.1"
   }
 }

src/test/css/index.css

@@ -41,12 +41,10 @@ body {
 }
 
 .Site {
-  @apply(--Site);
   @apply(--u-background-color-soft-white);
 }
 
 .Site_header {
-    @apply(--Site_header);
     @apply(--u-font-weight-200);
     @apply(--u-font-size-500);
     @apply(--u-flex);
@@ -56,18 +54,15 @@ body {
 }
 
 .Test {
-  @apply(--Test);
   @apply(--u-background-color-444);
 }
 
 
 .Test_when {
-  @apply(--Test_when);
   @apply(--u-text-color-444);
 }
 
 .Test_then {
-  @apply(--Test_when);
   @apply(--u-text-color-444);
 }
 
@@ -80,12 +75,12 @@ body {
 }
 
 .Test_container {
-    @apply(--Test_container);
     @apply(--u-background-color-silver-grey);
+    @apply(--u-padding-bottom-2x);
+    @apply(--u-padding-left-2x);
 }
 
 .Test_counter {
-  @apply(--Test_counter);
   @apply(--u-text-color-tomato);
 }
 

src/test/html/index.html

@@ -82,7 +82,7 @@
         <span class="Test_counter"></span>
         <span class="Test_component">Button</span>
 
-        <div class="Test_container">
+        <div class="Test_container u-md-flex-justify-around u-md-flex-row u-md-flex-align-items-start">
         <div class="Test_input">
             <div class="Test_when"></div>
             <div class="Test_description">A button's border and background color are not specified.</div>
@@ -114,7 +114,7 @@
         <span class="Test_counter"></span>
         <span class="Test_component">Button</span>
 
-        <div class="Test_container">
+        <div class="Test_container u-md-flex-justify-around u-md-flex-row u-md-flex-align-items-start">
         <div class="Test_input">
             <div class="Test_when"></div>
             <div class="Test_description">A button's focus, hover, or active state is triggered.</div>
@@ -150,7 +150,7 @@
         <span class="Test_counter"></span>
         <span class="Test_component">Button</span>
 
-        <div class="Test_container">
+        <div class="Test_container u-md-flex-justify-around u-md-flex-row u-md-flex-align-items-start">
         <div class="Test_input">
             <div class="Test_when"></div>
             <div class="Test_description">Buttons are marked up inline.</div>
@@ -196,7 +196,7 @@
         <span class="Test_counter"></span>
         <span class="Test_component">Button</span>
 
-        <div class="Test_container">
+        <div class="Test_container u-md-flex-justify-around u-md-flex-row u-md-flex-align-items-start">
         <div class="Test_input">
             <div class="Test_when"></div>
             <div class="Test_description">The button is disabled.</div>
@@ -231,7 +231,7 @@
         <span class="Test_counter"></span>
         <span class="Test_component">Button</span>
 
-        <div class="Test_container">
+        <div class="Test_container u-md-flex-justify-around u-md-flex-row u-md-flex-align-items-start">
         <div class="Test_input">
             <div class="Test_when"></div>
             <div class="Test_description">Text color is not specified.</div>
@@ -267,7 +267,7 @@
         <span class="Test_counter"></span>
         <span class="Test_component">Button</span>
 
-        <div class="Test_container">
+        <div class="Test_container u-md-flex-justify-around u-md-flex-row u-md-flex-align-items-start">
         <div class="Test_input">
             <div class="Test_when"></div>
             <div class="Test_description">Font is not specified.</div>
@@ -301,7 +301,7 @@
         <span class="Test_counter"></span>
         <span class="Test_component">Button</span>
 
-        <div class="Test_container">
+        <div class="Test_container u-md-flex-justify-around u-md-flex-row u-md-flex-align-items-start">
         <div class="Test_input">
             <div class="Test_when"></div>
             <div class="Test_description">Text color is not specified.</div>
@@ -335,7 +335,7 @@
         <span class="Test_counter"></span>
         <span class="Test_component">Button</span>
 
-        <div class="Test_container">
+        <div class="Test_container u-md-flex-justify-around u-md-flex-row u-md-flex-align-items-start">
         <div class="Test_input">
             <div class="Test_when"></div>
             <div class="Test_description">The button is not wide enough.</div>
@@ -369,7 +369,7 @@
         <span class="Test_counter"></span>
         <span class="Test_component">Button</span>
 
-        <div class="Test_container">
+        <div class="Test_container u-md-flex-justify-around u-md-flex-row u-md-flex-align-items-start">
         <div class="Test_input">
             <div class="Test_when"></div>
             <div class="Test_description">Buttons with different heights are inlined.</div>