mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
Merge pull request #92 from adamwathan/flex-utilities
Rename and provide more comprehensive flex utilities
This commit is contained in:
Adam Wathan
GitHub
commit
eb74e8568e
@ -11,9 +11,9 @@
|
||||
<body class="pb-12">
|
||||
<div class="bg-gradient-brand h-3"></div>
|
||||
<header class="container">
|
||||
<div class="py-6 flex-y-center flex-spaced">
|
||||
<div class="flex-y-center">
|
||||
<div class="pill h-12 w-12 bg-light p-2 flex-center flex-inline shadow-2 mr-4">
|
||||
<div class="py-6 flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<div class="pill h-12 w-12 bg-light p-2 inline-flex items-center justify-center shadow-2 mr-4">
|
||||
<svg class="fit w-full" viewBox="0 0 60 36" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="0%" y1="0%" y2="100%" id="a"><stop stop-color="#2383AE" offset="0%"></stop><stop stop-color="#6DD7B9" offset="100%"></stop></linearGradient></defs><path d="M15 12c2-8 7-12 15-12 12 0 13.5 9 19.5 10.5 4 1 7.5-.5 10.5-4.5-2 8-7 12-15 12-12 0-13.5-9-19.5-10.5-4-1-7.5.5-10.5 4.5zM0 30c2-8 7-12 15-12 12 0 13.5 9 19.5 10.5 4 1 7.5-.5 10.5-4.5-2 8-7 12-15 12-12 0-13.5-9-19.5-10.5-4-1-7.5.5-10.5 4.5z" fill="url(#a)" fill-rule="evenodd"></path></svg>
|
||||
</div>
|
||||
<svg class="h-4" viewBox="0 0 136 19" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Tailwind CSS">
|
||||
|
||||
@ -17,7 +17,7 @@ title: "Borders"
|
||||
|
||||
Construct border size utilities using the `.border{-side?}{-width?}` syntax. For example, `.border` would add a `1px` border to all sides of the element, where `.border-b-4` would add a `4px` border to the bottom of the element. By default, borders are `solid`, and use the `@default-border-color`.
|
||||
|
||||
<div class="flex flex-top mt-8 text-sm leading-none">
|
||||
<div class="flex items-start mt-8 text-sm leading-none">
|
||||
<div class="pr-12">
|
||||
<div class="mb-3 text-dark-soft text-uppercase">Class</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">border</code></div>
|
||||
|
||||
@ -93,9 +93,9 @@
|
||||
<div class="rounded-l w-128 text-center overflow-hidden">
|
||||
<img class="h-64" src="/img/card-left.jpg" alt="">
|
||||
</div>
|
||||
<div class="border-t border-r border-b border-dark-softer rounded-r p-4 flex-col flex-spaced">
|
||||
<div class="border-t border-r border-b border-dark-softer rounded-r p-4 flex flex-col justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-dark-softer flex-y-center">
|
||||
<p class="text-sm text-dark-softer flex items-center">
|
||||
<svg class="text-dark-softest w-3 h-3 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M4 8V6a6 6 0 1 1 12 0v2h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-8c0-1.1.9-2 2-2h1zm5 6.73V17h2v-2.27a2 2 0 1 0-2 0zM7 6v2h6V6a3 3 0 0 0-6 0z"/></svg>
|
||||
Members only
|
||||
</p>
|
||||
@ -104,7 +104,7 @@
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex-y-center">
|
||||
<div class="flex items-center">
|
||||
<img class="w-10 h-10 pill mr-4" src="https://pbs.twimg.com/profile_images/885868801232961537/b1F6H4KC_400x400.jpg" alt="">
|
||||
<div class="text-sm">
|
||||
<p class="text-dark leading-none">Jonathan Reinink</p>
|
||||
|
||||
@ -15,7 +15,7 @@ title: "Spacing"
|
||||
|
||||
The syntax below is combined to create a system for padding and margins. For example, `.pt-2` would add padding to the top of the element to the value of `0.5rem` and `.mx-0` would make the horizontal margin zero.
|
||||
|
||||
<div class="flex flex-top mt-8 text-sm">
|
||||
<div class="flex items-start mt-8 text-sm">
|
||||
<div class="pr-12">
|
||||
<div class="mb-3 text-dark-soft text-uppercase">Class</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">p</code> Padding</div>
|
||||
|
||||
@ -1,77 +1,60 @@
|
||||
// Parent utilities
|
||||
.flex { display: flex; }
|
||||
.flex-top { align-items: flex-start; }
|
||||
|
||||
.flex-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.flex-reverse {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flex-y-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flex-x-center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.flex-y-end {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.flex-y-baseline {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.flex-right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.flex-spaced {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.flex-around {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.flex-fill { max-width: 100%; flex: 1; }
|
||||
.flex-no-shrink { flex-shrink: 0; }
|
||||
.flex-inline { display: inline-flex; }
|
||||
|
||||
.flex-reverse { flex-direction: row-reverse; }
|
||||
.inline-flex { display: inline-flex; }
|
||||
.flex-row { flex-direction: row; }
|
||||
.flex-row-reverse { flex-direction: row-reverse; }
|
||||
.flex-col { flex-direction: column; }
|
||||
.flex-col-reverse { flex-direction: column-reverse; }
|
||||
.flex-wrap { flex-wrap: wrap; }
|
||||
.flex-wrap-reverse { flex-wrap: wrap-reverse; }
|
||||
.flex-nowrap { flex-wrap: nowrap; }
|
||||
|
||||
.items-start { align-items: flex-start; }
|
||||
.items-end { align-items: flex-end; }
|
||||
.items-center { align-items: center; }
|
||||
.items-baseline { align-items: baseline; }
|
||||
.items-stretch { align-items: stretch; }
|
||||
|
||||
.justify-start { justify-content: flex-start; }
|
||||
.justify-end { justify-content: flex-end; }
|
||||
.justify-center { justify-content: center; }
|
||||
.justify-between { justify-content: space-between; }
|
||||
.justify-around { justify-content: space-around; }
|
||||
|
||||
// Child utilities
|
||||
.flex-auto { flex: auto; }
|
||||
.flex-initial { flex: initial; }
|
||||
.flex-none { flex: none; }
|
||||
.flex-grow { flex-grow: 1; }
|
||||
.flex-shrink { flex-shrink: 1; }
|
||||
.flex-no-grow { flex-grow: 0; }
|
||||
.flex-no-shrink { flex-shrink: 0; }
|
||||
|
||||
.responsive({
|
||||
&flex { .flex; }
|
||||
&flex-top { .flex-top; }
|
||||
&inline-flex { .inline-flex; }
|
||||
&flex-row { .flex-row; }
|
||||
&flex-row-reverse { .flex-row-reverse; }
|
||||
&flex-col { .flex-col; }
|
||||
&flex-center { .flex-center; }
|
||||
&flex-y-center { .flex-y-center; }
|
||||
&flex-x-center { .flex-x-center; }
|
||||
&flex-y-end { .flex-y-end; }
|
||||
&flex-y-baseline { .flex-y-baseline; }
|
||||
&flex-right { .flex-right; }
|
||||
&flex-spaced { .flex-spaced; }
|
||||
&flex-around { .flex-around; }
|
||||
&flex-fill { .flex-fill; }
|
||||
&flex-no-shrink { .flex-no-shrink; }
|
||||
&flex-inline { .flex-inline; }
|
||||
&flex-reverse { .flex-reverse; }
|
||||
&flex-col-reverse { .flex-col-reverse; }
|
||||
&flex-wrap { .flex-wrap; }
|
||||
&flex-wrap-reverse { .flex-wrap-reverse; }
|
||||
&flex-nowrap { .flex-nowrap; }
|
||||
&items-start { .items-start; }
|
||||
&items-end { .items-end; }
|
||||
&items-center { .items-center; }
|
||||
&items-baseline { .items-baseline; }
|
||||
&items-stretch { .items-stretch; }
|
||||
&justify-start { .justify-start; }
|
||||
&justify-end { .justify-end; }
|
||||
&justify-center { .justify-center; }
|
||||
&justify-between { .justify-between; }
|
||||
&justify-around { .justify-around; }
|
||||
&flex-auto { .flex-auto; }
|
||||
&flex-initial { .flex-initial; }
|
||||
&flex-none { .flex-none; }
|
||||
&flex-grow { .flex-grow; }
|
||||
&flex-shrink { .flex-shrink; }
|
||||
&flex-no-grow { .flex-no-grow; }
|
||||
&flex-no-shrink { .flex-no-shrink; }
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user