MatthieuScarset · July 17, 2023 14:56 · Jul 17, 2023 · Jul 17, 2023 · Jul 17, 2023 · Apr 25, 2022
diff --git a/fullclick.scss b/fullclick.scss
@@ -23,7 +23,7 @@
 ///   </a>
 /// </div>
 
-@mixin fullclick($element: 'a', $wrapper: '>') {
+@mixin fullclick($element: 'a', $wrapper: '') {
   position: relative;
 
   & #{$wrapper} #{$element}:first-of-type:before {

diff --git a/fullclick.scss b/fullclick.scss
@@ -23,10 +23,10 @@
 ///   </a>
 /// </div>
 
-@mixin fullclick($element: 'a', $wrapper: '') {
+@mixin fullclick($element: 'a', $wrapper: '>') {
   position: relative;
 
-  & > #{$wrapper} #{$element}:first-of-type:before {
+  & #{$wrapper} #{$element}:first-of-type:before {
     display: block;
     content: '';
     position: absolute;
@@ -45,5 +45,5 @@
 
 // Example: a div with multiple buttons.
 .node--view-mode--teaser {
-  @include fullclick('.button--readmore', '.actions');
+  @include fullclick('.button--readmore', '> .actions');
 }
diff --git a/fullclick.scss b/fullclick.scss
@@ -45,5 +45,5 @@
 
 // Example: a div with multiple buttons.
 .node--view-mode--teaser {
-  @include fullclick('.button--readmore', 'actions');
+  @include fullclick('.button--readmore', '.actions');
 }
diff --git a/fullclick.scss b/fullclick.scss
@@ -1,6 +1,9 @@
 /// Make element fully-clickable.
 /// @author Matthieu Scarset
-/// @param $wrapper
+/// @param string $element
+///   (optional) The button element which should get the click. Default: 'a'.
+/// @param string $wrapper
+///   (optional) The element's HTML wrapper(s), useful if convoluted markup. Default: empty string.
 /// @link https://gist.github.com/MatthieuScarset/397da3b000ce6d9523dd50f525eabaf0
 ///
 /// @example Simple card div with the link directly inside.

diff --git a/fullclick.scss b/fullclick.scss
@@ -4,14 +4,14 @@
 /// @link https://gist.github.com/MatthieuScarset/397da3b000ce6d9523dd50f525eabaf0
 ///
 /// @example Simple card div with the link directly inside.
-/// <div class="fullclick node node--view-mode--teaser">
+/// <div class="fullclick">
 ///   <h2>I am a title</h2>
 ///   <p>I am a description and you should read me.</p>
 ///   <a href="https://matthieuscarset.com">Click me somewhere on this card</a>
 /// </div>
 ///
 /// @example Card div with multiple links.
-/// <div class="fullclick node node--view-mode--teaser">
+/// <div class="node node--view-mode--teaser">
 ///   <h2>I am a title</h2>
 ///   <p>I am a description and you should read me.</p>
 ///   <div class="actions">
@@ -35,6 +35,12 @@
   }
 }
 
+// Utility CSS class.
 .fullclick {
   @include fullclick;
 }
+
+// Example: a div with multiple buttons.
+.node--view-mode--teaser {
+  @include fullclick('.button--readmore', 'actions');
+}
diff --git a/fullclick.scss b/fullclick.scss
@@ -1,16 +1,29 @@
 /// Make element fully-clickable.
 /// @author Matthieu Scarset
+/// @param $wrapper
 /// @link https://gist.github.com/MatthieuScarset/397da3b000ce6d9523dd50f525eabaf0
-/// @example
+///
+/// @example Simple card div with the link directly inside.
 /// <div class="fullclick node node--view-mode--teaser">
 ///   <h2>I am a title</h2>
 ///   <p>I am a description and you should read me.</p>
 ///   <a href="https://matthieuscarset.com">Click me somewhere on this card</a>
 /// </div>
-@mixin fullclick {
+///
+/// @example Card div with multiple links.
+/// <div class="fullclick node node--view-mode--teaser">
+///   <h2>I am a title</h2>
+///   <p>I am a description and you should read me.</p>
+///   <div class="actions">
+///      <a class="button button--share" href="#">Share</a>
+///      <a class="button button--readmore" href="https://matthieuscarset.com">Read more</a>
+///   </a>
+/// </div>
+
+@mixin fullclick($element: 'a', $wrapper: '') {
   position: relative;
 
-  &>a:first-of-type:before {
+  & > #{$wrapper} #{$element}:first-of-type:before {
     display: block;
     content: '';
     position: absolute;
@@ -22,7 +35,6 @@
   }
 }
 
-// Use this class somewhere else in your stylesheets.
 .fullclick {
   @include fullclick;
-}
+}
diff --git a/fullclick.scss b/fullclick.scss
@@ -1,13 +1,12 @@
-/// SCSS - Make element fully-clickable.
+/// Make element fully-clickable.
 /// @author Matthieu Scarset
 /// @link https://gist.github.com/MatthieuScarset/397da3b000ce6d9523dd50f525eabaf0
-/// @code
+/// @example
 /// <div class="fullclick node node--view-mode--teaser">
 ///   <h2>I am a title</h2>
 ///   <p>I am a description and you should read me.</p>
 ///   <a href="https://matthieuscarset.com">Click me somewhere on this card</a>
 /// </div>
-/// @endcode 
 @mixin fullclick {
   position: relative;
 
@@ -23,6 +22,7 @@
   }
 }
 
+// Use this class somewhere else in your stylesheets.
 .fullclick {
   @include fullclick;
 }
diff --git a/fullclick.scss b/fullclick.scss
@@ -1,10 +1,17 @@
-/// Make an element fully clickable.
+/// SCSS - Make element fully-clickable.
 /// @author Matthieu Scarset
-/// @see https://matthieuscarset.com
+/// @link https://gist.github.com/MatthieuScarset/397da3b000ce6d9523dd50f525eabaf0
+/// @code
+/// <div class="fullclick node node--view-mode--teaser">
+///   <h2>I am a title</h2>
+///   <p>I am a description and you should read me.</p>
+///   <a href="https://matthieuscarset.com">Click me somewhere on this card</a>
+/// </div>
+/// @endcode 
 @mixin fullclick {
   position: relative;
 
-  & > a:first-of-type:before {
+  &>a:first-of-type:before {
     display: block;
     content: '';
     position: absolute;

diff --git a/fullclick.scss b/fullclick.scss
@@ -0,0 +1,21 @@
+/// Make an element fully clickable.
+/// @author Matthieu Scarset
+/// @see https://matthieuscarset.com
+@mixin fullclick {
+  position: relative;
+
+  & > a:first-of-type:before {
+    display: block;
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    margin: auto;
+  }
+}
+
+.fullclick {
+  @include fullclick;
+}