archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #86 from adamwathan/overflow-improvements

Browse Source 
Add .mask and .overflow-scroll-y utilities, and overflow docs
This commit is contained in:
Adam Wathan 2017-08-21 11:24:24 -04:00 committed by GitHub
commit fce200c6d8
3 changed files with 56 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/source/_layouts/master.blade.php
View File

@ -57,6 +57,7 @@
<li class="mb-2"><a class="{{ $page->getUrl() === '/flexbox' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/flexbox">Flexbox</a></li>
<li class="mb-2"><a class="{{ $page->getUrl() === '/grid' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/grid">Grid</a></li>
<li class="mb-2"><a class="{{ $page->getUrl() === '/images' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/images">Images</a></li>
<li class="mb-2"><a class="{{ $page->getUrl() === '/overflow' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/overflow">Overflow</a></li>
<li class="mb-2"><a class="{{ $page->getUrl() === '/position' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/position">Position</a></li>
<li class="mb-2"><a class="{{ $page->getUrl() === '/shadows' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/shadows">Shadows</a></li>
<li class="mb-2"><a class="{{ $page->getUrl() === '/spacing' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/spacing">Spacing</a></li>

50
docs/source/overflow.md Normal file
View File

@ -0,0 +1,50 @@
---
extends: _layouts.markdown
title: "Overflow"
---
# Overflow
The overflow utilities are simply `overflow` property helpers.
```html
<div class="overflow-auto"></div>
<div class="overflow-hidden"></div>
<div class="overflow-visible"></div>
<div class="overflow-scroll"></div>
<div class="overflow-scroll-x"></div>
<div class="overflow-scroll-y"></div>
<div class="mask"></div>
```
```less
div {
.overflow-auto;
.overflow-hidden;
.overflow-visible;
.overflow-scroll;
.overflow-scroll-x;
.overflow-scroll-y;
.mask;
}
```
Note that `.overflow-hidden` is available in a shorthand called `.mask`.
## Responsive
The display utitlies can also be used with <a href="/responsive">responsive</a> prefixes:
```html
<div class="overflow-auto sm:overflow-hidden md:overflow-visible lg:overflow-scroll"></div>
```
```less
div {
.screen(lg, {
.overflow-scroll;
});
}
```

9
src/utilities/overflow.less
View File

@ -1,16 +1,17 @@
.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.mask { overflow: hidden; }
.overflow-visible { overflow: visible; }
.overflow-scroll { overflow: scroll; }
.overflow-scroll-x {
overflow-x: auto;
-ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057
}
.overflow-scroll-x { overflow-x: auto; -ms-overflow-style: -ms-autohiding-scrollbar; }
.overflow-scroll-y { overflow-y: auto; -ms-overflow-style: -ms-autohiding-scrollbar; }
.responsive({
&overflow-auto { .overflow-auto; }
&overflow-hidden { .overflow-hidden; }
&mask { .mask; }
&overflow-visible { .overflow-visible; }
&overflow-scroll { .overflow-scroll; }
&overflow-scroll-x { .overflow-scroll-x; }
&overflow-scroll-y { .overflow-scroll-y; }
});