feat(card): disabled and loading variant

This PR adds the disabled and loading variant to the card view. It's basically a selector copy from segment
fomantic · Nov 13, 2020 · bedd965 · bedd965
1 parent 06fff10
commit bedd965
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 8 deletions.
diff --git a/src/definitions/elements/loader.less b/src/definitions/elements/loader.less
@@ -212,7 +212,7 @@ each(@colors, {
   .ui.@{color}.elastic.loader.loader:before,
   .ui.@{color}.basic.elastic.loading.button:before,
   .ui.@{color}.basic.elastic.loading.button:after,
-  .ui.@{color}.elastic.loading.loading.loading:not(.segment):before,
+  .ui.@{color}.elastic.loading.loading.loading:not(.segment):not(.card):before,
   .ui.@{color}.elastic.loading.loading.loading .input > i.icon:before,
   .ui.@{color}.elastic.loading.loading.loading.loading > i.icon:before,
   .ui.@{color}.loading.loading.loading.loading:not(.usual):not(.button):after,
@@ -222,7 +222,7 @@ each(@colors, {
     color: @c;
   }
   .ui.inverted.@{color}.elastic.loader:before,
-  .ui.inverted.@{color}.elastic.loading.loading.loading:not(.segment):before,
+  .ui.inverted.@{color}.elastic.loading.loading.loading:not(.segment):not(.card):before,
   .ui.inverted.@{color}.elastic.loading.loading.loading .input > i.icon:before,
   .ui.inverted.@{color}.elastic.loading.loading.loading > i.icon:before,
   .ui.inverted.@{color}.loading.loading.loading.loading:not(.usual):after,
@@ -295,11 +295,13 @@ each(@colors, {
 .ui.loader.loader.loader.loader.loader.loader:not(.double):after {
   border-bottom-color: transparent;
 }
+.ui.loading.loading.loading.loading.loading.loading.card:after,
 .ui.loading.loading.loading.loading.loading.loading.segment:after,
 .ui.loading.loading.loading.loading.loading.loading.form:after {
   border-left-color:@loaderFillColor;
   border-right-color:@loaderFillColor;
 }
+.ui.loading.loading.loading.loading.loading.loading.card:not(.double):after,
 .ui.loading.loading.loading.loading.loading.loading.segment:not(.double):after,
 .ui.loading.loading.loading.loading.loading.loading.form:not(.double):after {
   border-bottom-color: @loaderFillColor;
@@ -316,14 +318,14 @@ each(@colors, {
   .ui.inverted.dimmer > .ui.elastic.loader {
     color: @loaderLineColor;
   }
-  .ui.elastic.loading.loading:not(.form):not(.segment):after,
+  .ui.elastic.loading.loading:not(.form):not(.segment):not(.card):after,
   .ui.elastic.loading.loading .input > i.icon:after,
   .ui.elastic.loading.loading > i.icon:after,
   .ui.elastic.loader.loader:after {
     animation: loader 1s infinite cubic-bezier(.27, 1.05, .92, .61);
     animation-delay: 0.3s;
   }
-  .ui.elastic.loading.loading.loading:not(.form):not(.segment):before,
+  .ui.elastic.loading.loading.loading:not(.form):not(.segment):not(.card):before,
   .ui.elastic.loading.loading.loading .input > i.icon:before,
   .ui.elastic.loading.loading.loading > i.icon:before,
   .ui.elastic.loader.loader:before {
@@ -337,27 +339,27 @@ each(@colors, {
     }
   }
   & when (@variationLoaderSpeeds) {
-    .ui.slow.elastic.loading.loading:not(.form):not(.segment):after,
+    .ui.slow.elastic.loading.loading:not(.form):not(.segment):not(.card):after,
     .ui.slow.elastic.loading.loading .input > i.icon:after,
     .ui.slow.elastic.loading.loading > i.icon:after,
     .ui.slow.elastic.loader.loader:after {
       animation-duration: 1.5s;
       animation-delay: 0.45s;
     }
-    .ui.slow.elastic.loading.loading.loading:not(.form):not(.segment):before,
+    .ui.slow.elastic.loading.loading.loading:not(.form):not(.segment):not(.card):before,
     .ui.slow.elastic.loading.loading.loading .input > i.icon:before,
     .ui.slow.elastic.loading.loading.loading > i.icon:before,
     .ui.slow.elastic.loader.loader:before {
       animation-duration: 1.5s;
     }
-    .ui.fast.elastic.loading.loading:not(.form):not(.segment):after,
+    .ui.fast.elastic.loading.loading:not(.form):not(.segment):not(.card):after,
     .ui.fast.elastic.loading.loading .input > i.icon:after,
     .ui.fast.elastic.loading.loading > i.icon:after,
     .ui.fast.elastic.loader.loader:after {
       animation-duration: 0.66s;
       animation-delay: 0.20s;
     }
-    .ui.fast.elastic.loading.loading.loading:not(.form):not(.segment):before,
+    .ui.fast.elastic.loading.loading.loading:not(.form):not(.segment):not(.card):before,
     .ui.fast.elastic.loading.loading.loading .input > i.icon:before,
     .ui.fast.elastic.loading.loading.loading > i.icon:before,
     .ui.fast.elastic.loader.loader:before {

diff --git a/src/definitions/views/card.less b/src/definitions/views/card.less
@@ -419,6 +419,63 @@
   color: @extraLinkHoverColor;
 }
 
+/*******************************
+            States
+*******************************/
+
+& when (@variationCardDisabled) {
+  /*--------------
+      Disabled
+  ---------------*/
+
+  .ui.disabled.card {
+    opacity: @disabledOpacity;
+    color: @disabledTextColor;
+    pointer-events: none;
+  }
+}
+
+& when (@variationCardLoading) {
+  /*--------------
+      Loading
+  ---------------*/
+
+  .ui.loading.card {
+    position: relative;
+    cursor: default;
+    pointer-events: none;
+    transition: all 0s linear;
+  }
+  .ui.loading.card:before {
+    position: absolute;
+    content: '';
+    top: 0;
+    left: 0;
+    background: @loaderDimmerColor;
+    width: 100%;
+    height: 100%;
+    border-radius: @borderRadius;
+    z-index: @loaderDimmerZIndex;
+  }
+  .ui.loading.card:after {
+    position: absolute;
+    content: '';
+    top: 50%;
+    left: 50%;
+
+    margin: @loaderMargin;
+    width: @loaderSize;
+    height: @loaderSize;
+
+    animation: loader @loaderSpeed infinite linear;
+    border: @loaderLineWidth solid @loaderLineColor;
+    border-radius: @circularRadius;
+
+    box-shadow: 0 0 0 1px transparent;
+    visibility: visible;
+    z-index: @loaderLineZIndex;
+  }
+}
 
 /*******************************
            Variations
@@ -979,6 +1036,16 @@ each(@colors,{
   .ui.inverted.link.card:hover {
     background: @invertedLinkHoverBackground;
   }
+
+  & when (@variationCardLoading) {
+    /* Loading */
+    .ui.inverted.loading.card {
+      color: @invertedLoaderLineColor;
+    }
+    .ui.inverted.loading.card:before {
+      background: @loaderInvertedDimmerColor;
+    }
+  }
 }
 
 

diff --git a/src/themes/default/globals/variation.variables b/src/themes/default/globals/variation.variables
@@ -322,6 +322,8 @@
 
 /* Card */
 @variationCardInverted: true;
+@variationCardDisabled: true;
+@variationCardLoading: true;
 @variationCardHorizontal: true;
 @variationCardRaised: true;
 @variationCardCentered: true;

diff --git a/src/themes/default/views/card.variables b/src/themes/default/views/card.variables
@@ -143,6 +143,19 @@
 @buttonMargin: 0 -@borderWidth;
 @buttonWidth: e(%("calc(100%% + %d)", @borderWidth * 2));
 
+/*******************************
+            States
+*******************************/
+
+/* Loading Dimmer */
+@loaderDimmerColor: rgba(255, 255, 255, 0.8);
+@loaderInvertedDimmerColor: rgba(0, 0, 0 , 0.85);
+@loaderDimmerZIndex: 100;
+
+/* Loading Spinner */
+@loaderSize: 3em;
+@loaderLineZIndex: 101;
+
 /*-------------------
       Variations
 --------------------*/