Web Design Guide 2023-12-11 10:29:21 | 2.0.0

Hide 

<p>Hide element by adding <code class="code-inline-preview">-hide</code> to an element.</p>

<pre class="code-preview">&lt;div class&#x3D;&quot;-hide&quot;&gt;
  ...
&lt;/div&gt;</pre>

<p>Can also be used as a mixin include</p>

<pre class="code-preview">.element {
  @include hide;
}</pre>
 
<p>Hide element by adding <code class="code-inline-preview">-hide</code> to an element.</p>

{{render '@helper-code-preview' parent}}

<p>Can also be used as a mixin include</p>

{{render '@helper-code-preview' mixin}}
 
{
  "parent": {
    "snippet": "<div class=\"-hide\">\n  ...\n</div>"
  },
  "mixin": {
    "snippet": ".element {\n  @include hide;\n}"
  }
}
  • Content: 
    /* Hide  */

.-hide {
  @include hide();

  @at-root .-mobile &-mobile-small {
    @include breakpoint(pre-medium down) {
      @include hide();
    }
  }

  &-pre-medium-down {
    @include breakpoint(pre-medium down) {
      @include hide();
    }
  }

  &-medium {
    @include breakpoint(medium) {
      @include hide();
    }
  }
}
  • URL: /components/raw/hide/_hide.scss
  • Filesystem Path: src/components/03-css-utilities/02-helpers/hide/_hide.scss
  • Size: 337 Bytes

There are no notes for this item.