Add flexbox cards to default theme

src/definitions/views/card.less

@@ -30,11 +30,13 @@
 ---------------*/
 
 .ui.cards {
+  display: @groupDisplay;
   margin: @groupCardsMargin;
+  flex-wrap: wrap;
 }
 
 .ui.cards > .card {
-  display: @groupDisplay;
+  display: @groupCardDisplay;
   margin: @groupCardMargin;
   float: @groupFloat;
 }
@@ -69,6 +71,7 @@
   max-width: 100%;
   position: relative;
   display: @display;
+  flex-direction: column;
 
   width: @width;
   min-height: @minHeight;
@@ -136,10 +139,7 @@
 
 .ui.cards > .card > .content,
 .ui.card > .content {
-
-}
-.ui.cards > .card > .content,
-.ui.card > .content {
+  flex-grow: 1;
   background: @contentBackground;
   margin: @contentMargin;
   padding: @contentPadding;
@@ -360,6 +360,7 @@
 .ui.card > .extra {
   max-width: 100%;
   min-height: 0em !important;
+  flex-grow: 0;
   position: @extraPosition;
   background: @extraBackground;
   width: @extraWidth;

src/themes/default/views/card.variables

@@ -11,9 +11,9 @@
 @shadowBoxShadow: 0px @shadowDistance 0px 0px @solidBorderColor;
 
 /* Item */
+@display: flex;
 @background: #FFFFFF;
 @borderRadius: @defaultBorderRadius;
-@display: block;
 @margin: 1em 0em;
 @minHeight: 0px;
 @padding: 0em;
@@ -29,9 +29,10 @@
 @transition: box-shadow @transitionDuration @transitionEasing;
 
 /* Item Group */
-@groupDisplay: block;
-@groupFloat: left;
-@horizontalSpacing: 0.5em;
+@groupDisplay: flex;
+@groupCardDisplay: flex;
+@groupFloat: none;
+@horizontalSpacing: 1em;
 @rowSpacing: 1.5em;
 @groupCardsMargin: 1em -@horizontalSpacing 0em;
 @groupCardMargin: 0em @horizontalSpacing @rowSpacing;
@@ -123,8 +124,8 @@
 @extraLinkHoverColor: @linkHoverColor;
 
 /* Buttons */
-@buttonMargin: 0em -@borderWidth -@shadowDistance;
-@buttonWidth: ~"calc(100% + "(@borderWidth * 2)~")";
+@buttonMargin: 0em 0em -1px;
+@buttonWidth: 100%;
 
 /*-------------------
       Variations