fomantic-ui 2.9.0-beta.273 → 2.9.0-beta.276

package/src/definitions/modules/slider.less

@@ -206,7 +206,7 @@
     transform: translate(-50%, 100%);
   }
   & when (@variationSliderTicked) {
-    .ui.labeled.ticked.slider > .labels .label:after {
+    .ui.labeled.ticked.slider > .labels .label::after {
       content: ' ';
       height: @labelHeight;
       width: @labelWidth;
@@ -215,11 +215,11 @@
       top: 100%;
       left: 50%;
     }
-    .ui.bottom.aligned.labeled.ticked.slider > .labels .label:after {
+    .ui.bottom.aligned.labeled.ticked.slider > .labels .label::after {
       top: auto;
       bottom: 100%;
     }
-    .ui.labeled.ticked.slider > .labels .halftick.label:after {
+    .ui.labeled.ticked.slider > .labels .halftick.label::after {
       height: (@labelHeight / 2);
     }
   }
@@ -240,13 +240,13 @@
       transform: translate(-100%, -50%);
     }
 
-    .ui.labeled.vertical.slider > .labels .label:after {
+    .ui.labeled.vertical.slider > .labels .label::after {
       width: @labelHeight;
       height: @labelWidth;
       left: 100%;
       top: 50%;
     }
-    .ui.labeled.vertical.slider > .labels .halftick.label:after {
+    .ui.labeled.vertical.slider > .labels .halftick.label::after {
       width: (@labelHeight / 2);
       height: @labelWidth;
     }
@@ -386,10 +386,10 @@
      }
      & when (@variationSliderLabeled) {
        .ui.@{value}.labeled.slider:not(.vertical) > .labels,
-       .ui.@{value}.labeled.slider:not(.vertical) > .labels .label:after {
+       .ui.@{value}.labeled.slider:not(.vertical) > .labels .label::after {
          height: @@lh;
        }
-       .ui.@{value}.labeled.slider:not(.vertical) > .labels .halftick.label:after {
+       .ui.@{value}.labeled.slider:not(.vertical) > .labels .halftick.label::after {
          height: (@@lh / 2);
        }
      }
@@ -405,10 +405,10 @@
        }
        & when (@variationSliderLabeled) {
          .ui.@{value}.labeled.vertical.slider> .labels,
-         .ui.@{value}.labeled.vertical.slider> .labels .label:after {
+         .ui.@{value}.labeled.vertical.slider> .labels .label::after {
            width: @@lh;
          }
-         .ui.@{value}.labeled.vertical.slider> .labels .halftick.label:after {
+         .ui.@{value}.labeled.vertical.slider> .labels .halftick.label::after {
            width: (@@lh / 2);
          }
        }

package/src/definitions/modules/tab.less

@@ -55,8 +55,8 @@
     left: @loadingContentOffset !important;
   }
 
-  .ui.tab.loading:before,
-  .ui.tab.loading.segment:before {
+  .ui.tab.loading::before,
+  .ui.tab.loading.segment::before {
     position: absolute;
     content: '';
     top: @loaderDistanceFromTop;
@@ -69,8 +69,8 @@
     border-radius: @circularRadius;
     border: @loaderLineWidth solid @loaderFillColor;
   }
-  .ui.tab.loading:after,
-  .ui.tab.loading.segment:after {
+  .ui.tab.loading::after,
+  .ui.tab.loading.segment::after {
     position: absolute;
     content: '';
     top: @loaderDistanceFromTop;

package/src/definitions/views/ad.less

@@ -271,7 +271,7 @@
     position: relative;
     background: @testBackground;
   }
-  .ui.test.ad:after {
+  .ui.test.ad::after {
     position: absolute;
     top: 50%;
     left: 50%;
@@ -285,11 +285,11 @@
     font-weight: @testFontWeight;
   }
   & when (@variationAdMobile) {
-    .ui.mobile.test.ad:after {
+    .ui.mobile.test.ad::after {
       font-size: @testMobileFontSize;
     }
   }
-  .ui.test.ad[data-text]:after {
+  .ui.test.ad[data-text]::after {
     content: attr(data-text);
   }
 }

package/src/definitions/views/card.less

@@ -77,8 +77,8 @@
 }
 
 /* Clearing */
-.ui.cards:after,
-.ui.card:after {
+.ui.cards::after,
+.ui.card::after {
   display: block;
   content: ' ';
   height: 0;
@@ -157,8 +157,8 @@
   border-radius: @contentBorderRadius;
 }
 
-.ui.cards > .card > .content:after,
-.ui.card > .content:after {
+.ui.cards > .card > .content::after,
+.ui.card > .content::after {
   display: block;
   content: ' ';
   height: 0;
@@ -358,6 +358,28 @@
   }
 }
 
+& when (@variationCardBasic) {
+  /*--------------
+     Basic
+  ---------------*/
+  .ui.cards:not(.raised) > .basic.card:not(.raised),
+  .ui.ui.ui.basic.cards:not(.raised) > .card:not(.raised),
+  .ui.ui.ui.basic.card:not(.raised) {
+    box-shadow: none;
+    & > .buttons,
+      > .button {
+      margin: 0;
+      width: 100%;
+    }
+  }
+  & when (@variationCardLink) {
+    .ui.ui.ui.ui.ui.basic.card:not(.raised):hover,
+    .ui.ui.ui.ui.ui.basic.cards:not(.raised) .card:not(.raised):hover {
+      box-shadow: none;
+    }
+  }
+}
+
 /*--------------
       Dimmer
 ---------------*/
@@ -473,7 +495,7 @@
     pointer-events: none;
     transition: all 0s linear;
   }
-  .ui.loading.card:before {
+  .ui.loading.card::before {
     position: absolute;
     content: '';
     top: 0;
@@ -484,7 +506,7 @@
     border-radius: @borderRadius;
     z-index: @loaderDimmerZIndex;
   }
-  .ui.loading.card:after {
+  .ui.loading.card::after {
     position: absolute;
     content: '';
     top: 50%;
@@ -561,6 +583,7 @@
          Raised
   --------------------*/
 
+  .ui.cards > .raised.card,
   .ui.raised.cards > .card,
   .ui.raised.card {
     box-shadow: @raisedShadow;
@@ -573,6 +596,24 @@
       box-shadow: @raisedShadowHover;
     }
   }
+  & when (@variationCardBasic) {
+    .ui.basic.cards > .raised.card,
+    .ui.basic.raised.cards > .card,
+    .ui.raised.cards > .basic.card,
+    .ui.basic.raised.card {
+      box-shadow: @basicRaisedShadow;
+    }
+    & when (@variationCardLink) {
+      .ui.basic.raised.cards a.card:hover,
+      .ui.link.cards .basic.raised.card:hover,
+      .ui.link.basic.cards .raised.card:hover,
+      .ui.link.basic.raised.cards .card:hover,
+      a.ui.basic.raised.card:hover,
+      .ui.link.basic.raised.card:hover {
+        box-shadow: @basicRaisedShadowHover;
+      }
+    }
+  }
 }
 
 & when (@variationCardCentered) {
@@ -636,6 +677,7 @@
     @h: @colors[@@color][hover];
     @l: @colors[@@color][light];
     @lh: @colors[@@color][lightHover];
+    @isVeryDark: @colors[@@color][isVeryDark];
 
     .ui.@{color}.cards > .card,
     .ui.cards > .@{color}.card,
@@ -645,14 +687,49 @@
             0 @coloredShadowDistance 0 0 @c,
             @shadowBoxShadow
       ;
-      &:hover {
-      box-shadow:
-            @borderShadow,
-            0 @coloredShadowDistance 0 0 @h,
-            @shadowHoverBoxShadow
+    }
+    & when (@variationCardLink) {
+      .ui.cards a.@{color}.card:hover,
+      .ui.@{color}.cards a.card:hover,
+      .ui.link.@{color}.cards .card:not(.icon):hover,
+      .ui.link.cards .@{color}.card:not(.icon):hover,
+      a.ui.@{color}.card:hover,
+      .ui.link.@{color}.card:hover {
+        box-shadow:
+              @borderShadow,
+              0 @coloredShadowDistance 0 0 @h,
+              @shadowHoverBoxShadow
       ;
       }
     }
+    & when (@variationCardBasic) {
+      .ui.cards > .basic.@{color}.card,
+      .ui.basic.@{color}.cards > .card,
+      .ui.basic.cards > .@{color}.card,
+      .ui.basic.@{color}.card {
+        background: @l;
+        &  when (@isVeryDark) {
+          & .header,
+            .content,
+            .meta,
+            .description {
+            color: @white;
+          }
+        }
+      }
+      & when (@variationCardLink) {
+        .ui.basic.cards a.@{color}.card:hover,
+        .ui.cards a.basic.@{color}.card:hover,
+        .ui.basic.@{color}.cards a.card:hover,
+        .ui.link.cards .basic.@{color}.card:not(.icon):hover,
+        .ui.link.basic.@{color}.cards .card:not(.icon):hover,
+        .ui.link.basic.cards .@{color}.card:not(.icon):hover,
+        a.ui.basic.@{color}.card:hover,
+        .ui.link.basic.@{color}.card:hover {
+          background: @lh;
+        }
+      }
+    }
     & when (@variationCardInverted) {
       .ui.inverted.@{color}.cards > .card,
       .ui.inverted.cards > .@{color}.card,
@@ -662,14 +739,41 @@
               0 @coloredShadowDistance 0 0 @l,
               0 0 0 @borderWidth @solidWhiteBorderColor
         ;
-        &:hover {
-        box-shadow:
-              0 @shadowDistance 3px 0 @solidWhiteBorderColor,
-              0 @coloredShadowDistance 0 0 @lh,
-              0 0 0 @borderWidth @solidWhiteBorderColor
+      }
+      & when (@variationCardLink) {
+        .ui.inverted.cards a.@{color}.card:hover,
+        .ui.inverted.@{color}.cards a.card:hover,
+        .ui.link.inverted.@{color}.cards .card:not(.icon):hover,
+        .ui.link.inverted.cards .@{color}.card:not(.icon):hover,
+        a.ui.inverted.@{color}.card:hover,
+        .ui.link.inverted.@{color}.card:hover {
+          box-shadow:
+                  0 @shadowDistance 3px 0 @solidWhiteBorderColor,
+                  0 @coloredShadowDistance 0 0 @lh,
+                  0 0 0 @borderWidth @solidWhiteBorderColor
         ;
         }
       }
+      & when (@variationCardBasic) {
+        .ui.inverted.cards > .basic.@{color}.card,
+        .ui.basic.inverted.@{color}.cards > .card,
+        .ui.basic.inverted.cards > .@{color}.card,
+        .ui.basic.inverted.@{color}.card {
+          background: @c;
+        }
+        & when (@variationCardLink) {
+          .ui.inverted.cards a.basic.@{color}.card:hover,
+          .ui.basic.inverted.cards a.@{color}.card:hover,
+          .ui.basic.inverted.@{color}.cards a.card:hover,
+          .ui.link.inverted.cards .basic.@{color}.card:not(.icon):hover,
+          .ui.link.basic.inverted.@{color}.cards .card:not(.icon):hover,
+          .ui.link.basic.inverted.cards .@{color}.card:not(.icon):hover,
+          a.ui.basic.inverted.@{color}.card:hover,
+          .ui.link.basic.inverted.@{color}.card:hover {
+            background: @h;
+          }
+        }
+      }
     }
   })
 }
@@ -1083,7 +1187,7 @@
     .ui.inverted.loading.card {
       color: @invertedLoaderLineColor;
     }
-    .ui.inverted.loading.card:before {
+    .ui.inverted.loading.card::before {
       background: @loaderInvertedDimmerColor;
     }
   }

package/src/definitions/views/comment.less

@@ -66,7 +66,7 @@
   margin: @nestedCommentsMargin;
   padding: @nestedCommentsPadding;
 }
-.ui.comments .comment > .comments:before{
+.ui.comments .comment > .comments::before{
   position: absolute;
   top: 0;
   left: 0;

package/src/definitions/views/feed.less

@@ -226,7 +226,7 @@
     position: relative;
     margin-left: @metadataElementSpacing;
   }
-  .ui.feed > .event > .content .meta > *:after {
+  .ui.feed > .event > .content .meta > *::after {
     content: @metadataDivider;
     color: @metadataDividerColor;
     top: 0;

package/src/definitions/views/item.less

@@ -62,7 +62,7 @@
       Item
 ---------------*/
 
-.ui.items > .item:after {
+.ui.items > .item::after {
   display: block;
   content: ' ';
   height: 0;
@@ -123,7 +123,7 @@
   border: @contentBorder;
   border-radius: @contentBorderRadius;
 }
-.ui.items > .item > .content:after {
+.ui.items > .item > .content::after {
   display: block;
   content: ' ';
   height: 0;
@@ -341,7 +341,7 @@
     }
   }
 
-  .ui.items > .item .extra:after {
+  .ui.items > .item .extra::after {
     display: block;
     content: ' ';
     height: 0;

package/src/definitions/views/statistic.less

@@ -65,7 +65,7 @@
 }
 
 /* Clearing */
-.ui.statistics:after {
+.ui.statistics::after {
   display: block;
   content: ' ';
   height: 0;