feat(card): refactor card styles and no > selectors

src/addons/card/_separator.less

@@ -0,0 +1,39 @@
+
+/**
+ * card-separator
+ */
+
+// generate
+
+& when not (@generate-card-group = false) {
+
+  // generate-card-horizontal-responsive
+
+  .generate-card-horizontal-responsive();
+  .generate-card-horizontal-responsive(@i: length(@generate-card-group)) when (@i > 0) {
+    .generate-card-horizontal-responsive(@i - 1);
+    @breakpoint: extract(@generate-card-group, @i);
+    & when (@breakpoint = none) {
+      .card-separator {
+        .card-group {
+          &.card-item-nested {
+            .card-separator-vertical() !important;
+          }
+        }
+      }
+    }
+    & when not (@breakpoint = none) {
+      @query-min: 'min-@{breakpoint}';
+      @media @@query-min {
+        .card-separator {
+          .card-group-@{breakpoint} {
+            &.card-item-nested {
+              .card-separator-vertical() !important;
+            }
+          }
+        }
+      }
+    }
+  }
+
+}

src/addons/card/collapse.less

@@ -3,44 +3,42 @@
  */
 
 .card-collapse {
-  .card-contents({
-    > .card-item {
-      padding: 0 !important;
-    }
-  });
+  .card-item {
+    padding: 0 !important;
+  }
 }
 
 // size
 
 .card-small {
   &.card-collapse {
-    > .card-inner > .card-content {
+    .card-content {
       padding: 1.5rem 2rem;
     }
-    .card-contents({
+    .card-content, .card-item-nested {
       .list-space(small);
-    });
+    }
   }
 }
 
 .card-medium {
   &.card-collapse {
-    > .card-inner > .card-content {
+    .card-content {
       padding: 2rem 2.5rem;
     }
-    .card-contents({
+    .card-content, .card-item-nested {
       .list-space(medium);
-    });
+    }
   }
 }
 
 .card-large {
   &.card-collapse {
-    > .card-inner > .card-content {
+    .card-content {
       padding: 3rem 3.5rem;
     }
-    .card-contents({
+    .card-content, .card-item-nested {
       .list-space(large);
-    });
+    }
   }
 }

src/addons/card/full.less

@@ -4,12 +4,12 @@
 
 .card {
   &.card-full {
-    > .card-inner > .card-content {
+    .card-content {
       padding: 0 !important;
     }
     // variant
     .text-default();
-    > .card-design {
+    .card-design {
       border-color: transparent;
       background: transparent;
     }
@@ -20,7 +20,7 @@
 
 .card-small {
   &.card-full {
-    > .card-design {
+    .card-design {
       top: -1.5rem;
       left: -2rem;
       bottom: -1.5rem;
@@ -31,7 +31,7 @@
 
 .card-medium {
   &.card-full {
-    > .card-design {
+    .card-design {
       top: -2rem;
       left: -2.5rem;
       bottom: -2rem;
@@ -42,7 +42,7 @@
 
 .card-large {
   &.card-full {
-    > .card-design {
+    .card-design {
       top: -3rem;
       left: -3.5rem;
       bottom: -3rem;

src/addons/card/interactive.less

@@ -7,31 +7,31 @@
 a.card-default, label.card-default {
   &:hover, &.hover {
     color: @text-dark;
-    > .card-design {
+    .card-design {
       border-color: @shade-200;
-      background: @white;
+      background: @shade-200;
     }
   }
   &:active, &.active {
     color: @text-dark;
-    > .card-design {
-      border-color: @shade-200;
-      background: @shade-200;
+    .card-design {
+      border-color: @shade-200-dark;
+      background: @shade-200-dark;
     }
   }
 }
 
 a.card-primary, label.card-primary {
   &:hover, &.hover {
     color: @text-inverse-dark;
-    > .card-design {
-      border-color: @accent-dark;
+    .card-design {
+      border-color: @accent;
       background: @accent;
     }
   }
   &:active, &.active {
     color: @text-inverse-dark;
-    > .card-design {
+    .card-design {
       border-color: @accent-dark;
       background: @accent-dark;
     }
@@ -41,16 +41,16 @@ a.card-primary, label.card-primary {
 // animation
 
 a.card, label.card {
-  > .card-design {
+  .card-design {
     transition: all @time-small @ease-out;
   }
   &:hover, &.hover {
-    > .card-design {
+    .card-design {
       transition: all @time-small @ease-in;
     }
   }
   &:active, &.active {
-    > .card-design {
+    .card-design {
       transition: all @time-small @ease-in;
     }
   }

src/addons/card/separator.less

@@ -1,40 +1,46 @@
+@import 'xtend-library/src/addons/card/_separator.less';
+
 /**
  * card-separator
  */
 
 .card {
   &.card-separator {
-    > .card-inner > .card-content {
-      > .card-item {
-        & + .card-item {
-          &:before {
-            content: '';
-            position: absolute;
-            top: 0;
-            bottom: auto;
-            left: 0;
-            right: 0;
-            width: auto;
-            height: 1px;
-          }
-        }
+    .card-item + .card-item,
+    .card-item + .card-asset,
+    .card-item + .card-content,
+    .card-asset + .card-asset,
+    .card-asset + .card-item,
+    .card-asset + .card-content,
+    .card-content + .card-content,
+    .card-content + .card-item,
+    .card-content + .card-asset {
+      &:before {
+        content: '';
+        z-index: @index-active + 1;
+        position: absolute;
+        top: 0;
+        bottom: auto;
+        left: 0;
+        right: 0;
+        width: auto;
+        height: 1px;
       }
     }
-    > .card-inner > .card-content > .card-item-nested {
-      > .card-item {
-        & + .card-item {
-          &:before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            bottom: 0;
-            right: auto;
-            width: 1px;
-            height: auto;
-          }
-        }
-      }
+  }
+}
+
+.card-separator-vertical {
+  .card-item + .card-item,
+  .card-asset + .card-item,
+  .card-item + .card-asset {
+    &:before {
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: auto;
+      width: 1px;
+      height: auto;
     }
   }
 }
@@ -43,49 +49,44 @@
 
 .card-default {
   &.card-separator {
-    .card-contents({
-      > .card-item {
-        & + .card-item {
-          &:before {
-            background: fade(@shade-900, 10%);
-          }
-        }
+    .card-item + .card-item,
+    .card-item + .card-asset,
+    .card-item + .card-content,
+    .card-asset + .card-asset,
+    .card-asset + .card-item,
+    .card-asset + .card-content,
+    .card-content + .card-content,
+    .card-content + .card-item,
+    .card-content + .card-asset {
+      &:before {
+        background: fade(@shade-900, 10%);
       }
-    });
+    }
   }
 }
 
 .card-primary {
   &.card-separator {
-    .card-contents({
-      > .card-item {
-        & + .card-item {
-          &:before {
-            background: fade(@shade-200, 10%);
-          }
-        }
+    .card-item + .card-item,
+    .card-item + .card-asset,
+    .card-item + .card-content,
+    .card-asset + .card-asset,
+    .card-asset + .card-item,
+    .card-asset + .card-content,
+    .card-content + .card-content,
+    .card-content + .card-item,
+    .card-content + .card-asset {
+      &:before {
+        background: fade(@shade-200, 10%);
       }
-    });
+    }
   }
 }
 
 // special
 
-.card-group, .card-horizontal {
+.card-horizontal {
   &.card-separator {
-    .card-contents({
-      > .card-item {
-        & + .card-item {
-          &:before {
-            top: 0;
-            left: 0;
-            bottom: 0;
-            right: auto;
-            width: 1px;
-            height: auto;
-          }
-        }
-      }
-    });
+    .card-separator-vertical();
   }
 }