34 行
929 B
SCSS
34 行
929 B
SCSS
|
/* #Display
|
||
|
|
-------------------------------------------------------------------------- */
|
||
|
|
/*doc
|
||
|
|
---
|
||
|
|
title: display
|
||
|
|
name: display
|
||
|
|
categories: [utility]
|
||
|
|
---
|
||
|
|
|
||
|
|
表示非表示を切り替えます。改行位置のコントロールもできます。
|
||
|
|
|
||
|
|
```block
|
||
|
|
<p class="u-dn-md"><code>$-md</code>以降は非表示になります。</p>
|
||
|
|
<p class="u-dn u-db-md"><code>$-md</code>以降は表示されます。</p>
|
||
|
|
<p>基本はなりゆきでウィンドウサイズが狭くなると、<span class="u-dib">ここから改行されます。</span></p>
|
||
|
|
<p><code>$-md</code>以降になると、<span class="u-db-md">ここから改行されます。</span></p>
|
||
|
|
```
|
||
|
|
*/
|
||
|
|
@include _responsive(".u-dn") {
|
||
|
|
display: none !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
@include _responsive(".u-db") {
|
||
|
|
display: block !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
@include _responsive(".u-di") {
|
||
|
|
display: inline !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
@include _responsive(".u-dib") {
|
||
|
|
display: inline-block !important;
|
||
|
|
}
|