Merge branch 'master' into remove-outdated-docs
# Conflicts: # docs/source/_layouts/master.blade.php
This commit is contained in:
David Hemphill
commit
58aa6ee56e
95 changed files with 1481 additions and 13238 deletions
|
|
@ -555,7 +555,6 @@ input::placeholder {
|
|||
|
||||
button,
|
||||
[role=button] {
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
@ -2245,96 +2244,40 @@ button,
|
|||
border-radius: .25rem;
|
||||
}
|
||||
|
||||
.rounded-t {
|
||||
border-top-left-radius: .25rem;
|
||||
border-top-right-radius: .25rem;
|
||||
}
|
||||
|
||||
.rounded-r {
|
||||
border-top-right-radius: .25rem;
|
||||
border-bottom-right-radius: .25rem;
|
||||
}
|
||||
|
||||
.rounded-b {
|
||||
border-bottom-right-radius: .25rem;
|
||||
border-bottom-left-radius: .25rem;
|
||||
}
|
||||
|
||||
.rounded-l {
|
||||
border-bottom-left-radius: .25rem;
|
||||
border-top-left-radius: .25rem;
|
||||
}
|
||||
|
||||
.rounded-sm {
|
||||
border-radius: .125rem;
|
||||
}
|
||||
|
||||
.rounded-t-sm {
|
||||
border-top-left-radius: .125rem;
|
||||
border-top-right-radius: .125rem;
|
||||
}
|
||||
|
||||
.rounded-r-sm {
|
||||
border-top-right-radius: .125rem;
|
||||
border-bottom-right-radius: .125rem;
|
||||
}
|
||||
|
||||
.rounded-b-sm {
|
||||
border-bottom-right-radius: .125rem;
|
||||
border-bottom-left-radius: .125rem;
|
||||
}
|
||||
|
||||
.rounded-l-sm {
|
||||
border-bottom-left-radius: .125rem;
|
||||
border-top-left-radius: .125rem;
|
||||
}
|
||||
|
||||
.rounded-lg {
|
||||
border-radius: .5rem;
|
||||
}
|
||||
|
||||
.rounded-t-lg {
|
||||
border-top-left-radius: .5rem;
|
||||
border-top-right-radius: .5rem;
|
||||
}
|
||||
|
||||
.rounded-r-lg {
|
||||
border-top-right-radius: .5rem;
|
||||
border-bottom-right-radius: .5rem;
|
||||
}
|
||||
|
||||
.rounded-b-lg {
|
||||
border-bottom-right-radius: .5rem;
|
||||
border-bottom-left-radius: .5rem;
|
||||
}
|
||||
|
||||
.rounded-l-lg {
|
||||
border-bottom-left-radius: .5rem;
|
||||
border-top-left-radius: .5rem;
|
||||
}
|
||||
|
||||
.rounded-pill {
|
||||
.rounded-full {
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.rounded-t-pill {
|
||||
border-top-left-radius: 9999px;
|
||||
border-top-right-radius: 9999px;
|
||||
.rounded-none {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.rounded-r-pill {
|
||||
border-top-right-radius: 9999px;
|
||||
border-bottom-right-radius: 9999px;
|
||||
.rounded-t {
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.rounded-b-pill {
|
||||
border-bottom-right-radius: 9999px;
|
||||
border-bottom-left-radius: 9999px;
|
||||
.rounded-r {
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
.rounded-l-pill {
|
||||
border-bottom-left-radius: 9999px;
|
||||
border-top-left-radius: 9999px;
|
||||
.rounded-b {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
.rounded-l {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.block {
|
||||
|
|
@ -3715,6 +3658,11 @@ button,
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
.example {
|
||||
font-weight: 700;
|
||||
color: #e3342f;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.sm\:input-reset {
|
||||
appearance: none;
|
||||
|
|
@ -5374,96 +5322,40 @@ button,
|
|||
border-radius: .25rem;
|
||||
}
|
||||
|
||||
.sm\:rounded-t {
|
||||
border-top-left-radius: .25rem;
|
||||
border-top-right-radius: .25rem;
|
||||
}
|
||||
|
||||
.sm\:rounded-r {
|
||||
border-top-right-radius: .25rem;
|
||||
border-bottom-right-radius: .25rem;
|
||||
}
|
||||
|
||||
.sm\:rounded-b {
|
||||
border-bottom-right-radius: .25rem;
|
||||
border-bottom-left-radius: .25rem;
|
||||
}
|
||||
|
||||
.sm\:rounded-l {
|
||||
border-bottom-left-radius: .25rem;
|
||||
border-top-left-radius: .25rem;
|
||||
}
|
||||
|
||||
.sm\:rounded-sm {
|
||||
border-radius: .125rem;
|
||||
}
|
||||
|
||||
.sm\:rounded-t-sm {
|
||||
border-top-left-radius: .125rem;
|
||||
border-top-right-radius: .125rem;
|
||||
}
|
||||
|
||||
.sm\:rounded-r-sm {
|
||||
border-top-right-radius: .125rem;
|
||||
border-bottom-right-radius: .125rem;
|
||||
}
|
||||
|
||||
.sm\:rounded-b-sm {
|
||||
border-bottom-right-radius: .125rem;
|
||||
border-bottom-left-radius: .125rem;
|
||||
}
|
||||
|
||||
.sm\:rounded-l-sm {
|
||||
border-bottom-left-radius: .125rem;
|
||||
border-top-left-radius: .125rem;
|
||||
}
|
||||
|
||||
.sm\:rounded-lg {
|
||||
border-radius: .5rem;
|
||||
}
|
||||
|
||||
.sm\:rounded-t-lg {
|
||||
border-top-left-radius: .5rem;
|
||||
border-top-right-radius: .5rem;
|
||||
}
|
||||
|
||||
.sm\:rounded-r-lg {
|
||||
border-top-right-radius: .5rem;
|
||||
border-bottom-right-radius: .5rem;
|
||||
}
|
||||
|
||||
.sm\:rounded-b-lg {
|
||||
border-bottom-right-radius: .5rem;
|
||||
border-bottom-left-radius: .5rem;
|
||||
}
|
||||
|
||||
.sm\:rounded-l-lg {
|
||||
border-bottom-left-radius: .5rem;
|
||||
border-top-left-radius: .5rem;
|
||||
}
|
||||
|
||||
.sm\:rounded-pill {
|
||||
.sm\:rounded-full {
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.sm\:rounded-t-pill {
|
||||
border-top-left-radius: 9999px;
|
||||
border-top-right-radius: 9999px;
|
||||
.sm\:rounded-none {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.sm\:rounded-r-pill {
|
||||
border-top-right-radius: 9999px;
|
||||
border-bottom-right-radius: 9999px;
|
||||
.sm\:rounded-t {
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.sm\:rounded-b-pill {
|
||||
border-bottom-right-radius: 9999px;
|
||||
border-bottom-left-radius: 9999px;
|
||||
.sm\:rounded-r {
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
.sm\:rounded-l-pill {
|
||||
border-bottom-left-radius: 9999px;
|
||||
border-top-left-radius: 9999px;
|
||||
.sm\:rounded-b {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
.sm\:rounded-l {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.sm\:block {
|
||||
|
|
@ -6843,6 +6735,11 @@ button,
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.sm\:example {
|
||||
font-weight: 700;
|
||||
color: #e3342f;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
|
|
@ -8504,96 +8401,40 @@ button,
|
|||
border-radius: .25rem;
|
||||
}
|
||||
|
||||
.md\:rounded-t {
|
||||
border-top-left-radius: .25rem;
|
||||
border-top-right-radius: .25rem;
|
||||
}
|
||||
|
||||
.md\:rounded-r {
|
||||
border-top-right-radius: .25rem;
|
||||
border-bottom-right-radius: .25rem;
|
||||
}
|
||||
|
||||
.md\:rounded-b {
|
||||
border-bottom-right-radius: .25rem;
|
||||
border-bottom-left-radius: .25rem;
|
||||
}
|
||||
|
||||
.md\:rounded-l {
|
||||
border-bottom-left-radius: .25rem;
|
||||
border-top-left-radius: .25rem;
|
||||
}
|
||||
|
||||
.md\:rounded-sm {
|
||||
border-radius: .125rem;
|
||||
}
|
||||
|
||||
.md\:rounded-t-sm {
|
||||
border-top-left-radius: .125rem;
|
||||
border-top-right-radius: .125rem;
|
||||
}
|
||||
|
||||
.md\:rounded-r-sm {
|
||||
border-top-right-radius: .125rem;
|
||||
border-bottom-right-radius: .125rem;
|
||||
}
|
||||
|
||||
.md\:rounded-b-sm {
|
||||
border-bottom-right-radius: .125rem;
|
||||
border-bottom-left-radius: .125rem;
|
||||
}
|
||||
|
||||
.md\:rounded-l-sm {
|
||||
border-bottom-left-radius: .125rem;
|
||||
border-top-left-radius: .125rem;
|
||||
}
|
||||
|
||||
.md\:rounded-lg {
|
||||
border-radius: .5rem;
|
||||
}
|
||||
|
||||
.md\:rounded-t-lg {
|
||||
border-top-left-radius: .5rem;
|
||||
border-top-right-radius: .5rem;
|
||||
}
|
||||
|
||||
.md\:rounded-r-lg {
|
||||
border-top-right-radius: .5rem;
|
||||
border-bottom-right-radius: .5rem;
|
||||
}
|
||||
|
||||
.md\:rounded-b-lg {
|
||||
border-bottom-right-radius: .5rem;
|
||||
border-bottom-left-radius: .5rem;
|
||||
}
|
||||
|
||||
.md\:rounded-l-lg {
|
||||
border-bottom-left-radius: .5rem;
|
||||
border-top-left-radius: .5rem;
|
||||
}
|
||||
|
||||
.md\:rounded-pill {
|
||||
.md\:rounded-full {
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.md\:rounded-t-pill {
|
||||
border-top-left-radius: 9999px;
|
||||
border-top-right-radius: 9999px;
|
||||
.md\:rounded-none {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.md\:rounded-r-pill {
|
||||
border-top-right-radius: 9999px;
|
||||
border-bottom-right-radius: 9999px;
|
||||
.md\:rounded-t {
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.md\:rounded-b-pill {
|
||||
border-bottom-right-radius: 9999px;
|
||||
border-bottom-left-radius: 9999px;
|
||||
.md\:rounded-r {
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
.md\:rounded-l-pill {
|
||||
border-bottom-left-radius: 9999px;
|
||||
border-top-left-radius: 9999px;
|
||||
.md\:rounded-b {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
.md\:rounded-l {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.md\:block {
|
||||
|
|
@ -9973,6 +9814,11 @@ button,
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.md\:example {
|
||||
font-weight: 700;
|
||||
color: #e3342f;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
|
|
@ -11634,96 +11480,40 @@ button,
|
|||
border-radius: .25rem;
|
||||
}
|
||||
|
||||
.lg\:rounded-t {
|
||||
border-top-left-radius: .25rem;
|
||||
border-top-right-radius: .25rem;
|
||||
}
|
||||
|
||||
.lg\:rounded-r {
|
||||
border-top-right-radius: .25rem;
|
||||
border-bottom-right-radius: .25rem;
|
||||
}
|
||||
|
||||
.lg\:rounded-b {
|
||||
border-bottom-right-radius: .25rem;
|
||||
border-bottom-left-radius: .25rem;
|
||||
}
|
||||
|
||||
.lg\:rounded-l {
|
||||
border-bottom-left-radius: .25rem;
|
||||
border-top-left-radius: .25rem;
|
||||
}
|
||||
|
||||
.lg\:rounded-sm {
|
||||
border-radius: .125rem;
|
||||
}
|
||||
|
||||
.lg\:rounded-t-sm {
|
||||
border-top-left-radius: .125rem;
|
||||
border-top-right-radius: .125rem;
|
||||
}
|
||||
|
||||
.lg\:rounded-r-sm {
|
||||
border-top-right-radius: .125rem;
|
||||
border-bottom-right-radius: .125rem;
|
||||
}
|
||||
|
||||
.lg\:rounded-b-sm {
|
||||
border-bottom-right-radius: .125rem;
|
||||
border-bottom-left-radius: .125rem;
|
||||
}
|
||||
|
||||
.lg\:rounded-l-sm {
|
||||
border-bottom-left-radius: .125rem;
|
||||
border-top-left-radius: .125rem;
|
||||
}
|
||||
|
||||
.lg\:rounded-lg {
|
||||
border-radius: .5rem;
|
||||
}
|
||||
|
||||
.lg\:rounded-t-lg {
|
||||
border-top-left-radius: .5rem;
|
||||
border-top-right-radius: .5rem;
|
||||
}
|
||||
|
||||
.lg\:rounded-r-lg {
|
||||
border-top-right-radius: .5rem;
|
||||
border-bottom-right-radius: .5rem;
|
||||
}
|
||||
|
||||
.lg\:rounded-b-lg {
|
||||
border-bottom-right-radius: .5rem;
|
||||
border-bottom-left-radius: .5rem;
|
||||
}
|
||||
|
||||
.lg\:rounded-l-lg {
|
||||
border-bottom-left-radius: .5rem;
|
||||
border-top-left-radius: .5rem;
|
||||
}
|
||||
|
||||
.lg\:rounded-pill {
|
||||
.lg\:rounded-full {
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.lg\:rounded-t-pill {
|
||||
border-top-left-radius: 9999px;
|
||||
border-top-right-radius: 9999px;
|
||||
.lg\:rounded-none {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.lg\:rounded-r-pill {
|
||||
border-top-right-radius: 9999px;
|
||||
border-bottom-right-radius: 9999px;
|
||||
.lg\:rounded-t {
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.lg\:rounded-b-pill {
|
||||
border-bottom-right-radius: 9999px;
|
||||
border-bottom-left-radius: 9999px;
|
||||
.lg\:rounded-r {
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
.lg\:rounded-l-pill {
|
||||
border-bottom-left-radius: 9999px;
|
||||
border-top-left-radius: 9999px;
|
||||
.lg\:rounded-b {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
.lg\:rounded-l {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.lg\:block {
|
||||
|
|
@ -13103,6 +12893,11 @@ button,
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.lg\:example {
|
||||
font-weight: 700;
|
||||
color: #e3342f;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
|
|
@ -14764,96 +14559,40 @@ button,
|
|||
border-radius: .25rem;
|
||||
}
|
||||
|
||||
.xl\:rounded-t {
|
||||
border-top-left-radius: .25rem;
|
||||
border-top-right-radius: .25rem;
|
||||
}
|
||||
|
||||
.xl\:rounded-r {
|
||||
border-top-right-radius: .25rem;
|
||||
border-bottom-right-radius: .25rem;
|
||||
}
|
||||
|
||||
.xl\:rounded-b {
|
||||
border-bottom-right-radius: .25rem;
|
||||
border-bottom-left-radius: .25rem;
|
||||
}
|
||||
|
||||
.xl\:rounded-l {
|
||||
border-bottom-left-radius: .25rem;
|
||||
border-top-left-radius: .25rem;
|
||||
}
|
||||
|
||||
.xl\:rounded-sm {
|
||||
border-radius: .125rem;
|
||||
}
|
||||
|
||||
.xl\:rounded-t-sm {
|
||||
border-top-left-radius: .125rem;
|
||||
border-top-right-radius: .125rem;
|
||||
}
|
||||
|
||||
.xl\:rounded-r-sm {
|
||||
border-top-right-radius: .125rem;
|
||||
border-bottom-right-radius: .125rem;
|
||||
}
|
||||
|
||||
.xl\:rounded-b-sm {
|
||||
border-bottom-right-radius: .125rem;
|
||||
border-bottom-left-radius: .125rem;
|
||||
}
|
||||
|
||||
.xl\:rounded-l-sm {
|
||||
border-bottom-left-radius: .125rem;
|
||||
border-top-left-radius: .125rem;
|
||||
}
|
||||
|
||||
.xl\:rounded-lg {
|
||||
border-radius: .5rem;
|
||||
}
|
||||
|
||||
.xl\:rounded-t-lg {
|
||||
border-top-left-radius: .5rem;
|
||||
border-top-right-radius: .5rem;
|
||||
}
|
||||
|
||||
.xl\:rounded-r-lg {
|
||||
border-top-right-radius: .5rem;
|
||||
border-bottom-right-radius: .5rem;
|
||||
}
|
||||
|
||||
.xl\:rounded-b-lg {
|
||||
border-bottom-right-radius: .5rem;
|
||||
border-bottom-left-radius: .5rem;
|
||||
}
|
||||
|
||||
.xl\:rounded-l-lg {
|
||||
border-bottom-left-radius: .5rem;
|
||||
border-top-left-radius: .5rem;
|
||||
}
|
||||
|
||||
.xl\:rounded-pill {
|
||||
.xl\:rounded-full {
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.xl\:rounded-t-pill {
|
||||
border-top-left-radius: 9999px;
|
||||
border-top-right-radius: 9999px;
|
||||
.xl\:rounded-none {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.xl\:rounded-r-pill {
|
||||
border-top-right-radius: 9999px;
|
||||
border-bottom-right-radius: 9999px;
|
||||
.xl\:rounded-t {
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.xl\:rounded-b-pill {
|
||||
border-bottom-right-radius: 9999px;
|
||||
border-bottom-left-radius: 9999px;
|
||||
.xl\:rounded-r {
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
.xl\:rounded-l-pill {
|
||||
border-bottom-left-radius: 9999px;
|
||||
border-top-left-radius: 9999px;
|
||||
.xl\:rounded-b {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
.xl\:rounded-l {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.xl\:block {
|
||||
|
|
@ -16233,4 +15972,9 @@ button,
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.xl\:example {
|
||||
font-weight: 700;
|
||||
color: #e3342f;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,450 @@
|
|||
@import "normalize.css";
|
||||
/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
/* Document
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Correct the line height in all browsers.
|
||||
* 2. Prevent adjustments of font size after orientation changes in
|
||||
* IE on Windows Phone and in iOS.
|
||||
*/
|
||||
|
||||
html {
|
||||
line-height: 1.15; /* 1 */
|
||||
-ms-text-size-adjust: 100%; /* 2 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/* Sections
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the margin in all browsers (opinionated).
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 9-.
|
||||
*/
|
||||
|
||||
article,
|
||||
aside,
|
||||
footer,
|
||||
header,
|
||||
nav,
|
||||
section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the font size and margin on `h1` elements within `section` and
|
||||
* `article` contexts in Chrome, Firefox, and Safari.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 9-.
|
||||
* 1. Add the correct display in IE.
|
||||
*/
|
||||
|
||||
figcaption,
|
||||
figure,
|
||||
main { /* 1 */
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct margin in IE 8.
|
||||
*/
|
||||
|
||||
figure {
|
||||
margin: 1em 40px;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in Firefox.
|
||||
* 2. Show the overflow in Edge and IE.
|
||||
*/
|
||||
|
||||
hr {
|
||||
box-sizing: content-box; /* 1 */
|
||||
height: 0; /* 1 */
|
||||
overflow: visible; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Remove the gray background on active links in IE 10.
|
||||
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
|
||||
*/
|
||||
|
||||
a {
|
||||
background-color: transparent; /* 1 */
|
||||
-webkit-text-decoration-skip: objects; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove the bottom border in Chrome 57- and Firefox 39-.
|
||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: none; /* 1 */
|
||||
text-decoration: underline; /* 2 */
|
||||
text-decoration: underline dotted; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font style in Android 4.3-.
|
||||
*/
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct background and color in IE 9-.
|
||||
*/
|
||||
|
||||
mark {
|
||||
background-color: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` elements from affecting the line height in
|
||||
* all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 9-.
|
||||
*/
|
||||
|
||||
audio,
|
||||
video {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in iOS 4-7.
|
||||
*/
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the border on images inside links in IE 10-.
|
||||
*/
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Hide the overflow in IE.
|
||||
*/
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Change the font styles in all browsers (opinionated).
|
||||
* 2. Remove the margin in Firefox and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: sans-serif; /* 1 */
|
||||
font-size: 100%; /* 1 */
|
||||
line-height: 1.15; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the overflow in IE.
|
||||
* 1. Show the overflow in Edge.
|
||||
*/
|
||||
|
||||
button,
|
||||
input { /* 1 */
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||
* 1. Remove the inheritance of text transform in Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select { /* 1 */
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
|
||||
* controls in Android 4.
|
||||
* 2. Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
html [type="button"], /* 1 */
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner border and padding in Firefox.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Restore the focus styles unset by the previous rule.
|
||||
*/
|
||||
|
||||
button:-moz-focusring,
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the padding in Firefox.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
padding: 0.35em 0.75em 0.625em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the text wrapping in Edge and IE.
|
||||
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||
* 3. Remove the padding so developers are not caught out when they zero out
|
||||
* `fieldset` elements in all browsers.
|
||||
*/
|
||||
|
||||
legend {
|
||||
box-sizing: border-box; /* 1 */
|
||||
color: inherit; /* 2 */
|
||||
display: table; /* 1 */
|
||||
max-width: 100%; /* 1 */
|
||||
padding: 0; /* 3 */
|
||||
white-space: normal; /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct display in IE 9-.
|
||||
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
|
||||
progress {
|
||||
display: inline-block; /* 1 */
|
||||
vertical-align: baseline; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the default vertical scrollbar in IE.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in IE 10-.
|
||||
* 2. Remove the padding in IE 10-.
|
||||
*/
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
*/
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the odd appearance in Chrome and Safari.
|
||||
* 2. Correct the outline style in Safari.
|
||||
*/
|
||||
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
outline-offset: -2px; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
|
||||
*/
|
||||
|
||||
[type="search"]::-webkit-search-cancel-button,
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||
* 2. Change font properties to `inherit` in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/* Interactive
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Add the correct display in IE 9-.
|
||||
* 1. Add the correct display in Edge, IE, and Firefox.
|
||||
*/
|
||||
|
||||
details, /* 1 */
|
||||
menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Add the correct display in all browsers.
|
||||
*/
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
/* Scripting
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 9-.
|
||||
*/
|
||||
|
||||
canvas {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE.
|
||||
*/
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hidden
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10-.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Manually forked from SUIT CSS Base: https://github.com/suitcss/base
|
||||
|
|
@ -81,6 +527,7 @@ iframe {
|
|||
/**
|
||||
* Tailwind custom reset styles
|
||||
*/
|
||||
|
||||
textarea { resize: vertical; }
|
||||
|
||||
img { max-width: 100%; }
|
||||
|
|
@ -95,6 +542,5 @@ input::placeholder {
|
|||
}
|
||||
|
||||
button, [role=button] {
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,10 @@
|
|||
@tailwind reset;
|
||||
|
||||
@tailwind utilities;
|
||||
|
||||
@responsive {
|
||||
.example {
|
||||
@apply .font-bold;
|
||||
color: config('colors.red');
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ View the full documentation at https://tailwindcss.com.
|
|||
|
||||
/*
|
||||
|-------------------------------------------------------------------------------
|
||||
| Colors https://tailwindcss.com/docs/color
|
||||
| Colors https://tailwindcss.com/docs/colors
|
||||
|-------------------------------------------------------------------------------
|
||||
|
|
||||
| Here you can specify the colors used in your project. To get you started,
|
||||
|
|
@ -145,7 +145,7 @@ module.exports = {
|
|||
|
||||
/*
|
||||
|-----------------------------------------------------------------------------
|
||||
| Colors https://tailwindcss.com/docs/color-palette
|
||||
| Colors https://tailwindcss.com/docs/colors
|
||||
|-----------------------------------------------------------------------------
|
||||
|
|
||||
| The color palette defined above is also assigned to the "colors" key of
|
||||
|
|
@ -161,7 +161,7 @@ module.exports = {
|
|||
|
||||
/*
|
||||
|-----------------------------------------------------------------------------
|
||||
| Screens https://tailwindcss.com/docs/responsive
|
||||
| Screens https://tailwindcss.com//docs/responsive-design
|
||||
|-----------------------------------------------------------------------------
|
||||
|
|
||||
| Screens in Tailwind are essentially CSS media queries. They define the
|
||||
|
|
@ -240,7 +240,7 @@ module.exports = {
|
|||
|
||||
/*
|
||||
|-----------------------------------------------------------------------------
|
||||
| Text sizes https://tailwindcss.com/docs/text-sizes
|
||||
| Text sizes https://tailwindcss.com/docs/text-sizing
|
||||
|-----------------------------------------------------------------------------
|
||||
|
|
||||
| Here is where you define your text sizes. Name these in whatever way
|
||||
|
|
@ -272,7 +272,7 @@ module.exports = {
|
|||
|
||||
/*
|
||||
|-----------------------------------------------------------------------------
|
||||
| Font weights https://tailwindcss.com/docs/font-weights
|
||||
| Font weights https://tailwindcss.com/docs/font-weight
|
||||
|-----------------------------------------------------------------------------
|
||||
|
|
||||
| Here is where you define your font weights. We've provided a list of
|
||||
|
|
@ -299,7 +299,7 @@ module.exports = {
|
|||
|
||||
/*
|
||||
|-----------------------------------------------------------------------------
|
||||
| Leading (line height) https://tailwindcss.com/docs/text-leading
|
||||
| Leading (line height) https://tailwindcss.com/docs/line-height
|
||||
|-----------------------------------------------------------------------------
|
||||
|
|
||||
| Here is where you define your line height values, or as we call
|
||||
|
|
@ -319,7 +319,7 @@ module.exports = {
|
|||
|
||||
/*
|
||||
|-----------------------------------------------------------------------------
|
||||
| Tracking (letter spacing) https://tailwindcss.com/docs/text-tracking
|
||||
| Tracking (letter spacing) https://tailwindcss.com/docs/letter-spacing
|
||||
|-----------------------------------------------------------------------------
|
||||
|
|
||||
| Here is where you define your letter spacing values, or as we call
|
||||
|
|
@ -338,7 +338,7 @@ module.exports = {
|
|||
|
||||
/*
|
||||
|-----------------------------------------------------------------------------
|
||||
| Text colors https://tailwindcss.com/docs/text-colors
|
||||
| Text colors https://tailwindcss.com/docs/text-color
|
||||
|-----------------------------------------------------------------------------
|
||||
|
|
||||
| Here is where you define your text colors. By default these use the
|
||||
|
|
@ -354,7 +354,7 @@ module.exports = {
|
|||
|
||||
/*
|
||||
|-----------------------------------------------------------------------------
|
||||
| Background colors https://tailwindcss.com/docs/background-colors
|
||||
| Background colors https://tailwindcss.com/docs/background-color
|
||||
|-----------------------------------------------------------------------------
|
||||
|
|
||||
| Here is where you define your background colors. By default these use
|
||||
|
|
@ -370,7 +370,7 @@ module.exports = {
|
|||
|
||||
/*
|
||||
|-----------------------------------------------------------------------------
|
||||
| Border widths https://tailwindcss.com/docs/border-widths
|
||||
| Border widths https://tailwindcss.com/docs/border-width
|
||||
|-----------------------------------------------------------------------------
|
||||
|
|
||||
| Here is where you define your border widths. Take note that border
|
||||
|
|
@ -392,7 +392,7 @@ module.exports = {
|
|||
|
||||
/*
|
||||
|-----------------------------------------------------------------------------
|
||||
| Border colors https://tailwindcss.com/docs/border-colors
|
||||
| Border colors https://tailwindcss.com/docs/border-color
|
||||
|-----------------------------------------------------------------------------
|
||||
|
|
||||
| Here is where you define your border colors. By default these use the
|
||||
|
|
@ -427,7 +427,8 @@ module.exports = {
|
|||
default: '.25rem',
|
||||
'sm': '.125rem',
|
||||
'lg': '.5rem',
|
||||
'pill': '9999px',
|
||||
'full': '9999px',
|
||||
'none': '0',
|
||||
},
|
||||
|
||||
|
||||
|
|
|
|||
476
dist/tailwind.css
vendored
476
dist/tailwind.css
vendored
|
|
@ -555,7 +555,6 @@ input::placeholder {
|
|||
|
||||
button,
|
||||
[role=button] {
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
@ -2245,96 +2244,40 @@ button,
|
|||
border-radius: .25rem;
|
||||
}
|
||||
|
||||
.rounded-t {
|
||||
border-top-left-radius: .25rem;
|
||||
border-top-right-radius: .25rem;
|
||||
}
|
||||
|
||||
.rounded-r {
|
||||
border-top-right-radius: .25rem;
|
||||
border-bottom-right-radius: .25rem;
|
||||
}
|
||||
|
||||
.rounded-b {
|
||||
border-bottom-right-radius: .25rem;
|
||||
border-bottom-left-radius: .25rem;
|
||||
}
|
||||
|
||||
.rounded-l {
|
||||
border-bottom-left-radius: .25rem;
|
||||
border-top-left-radius: .25rem;
|
||||
}
|
||||
|
||||
.rounded-sm {
|
||||
border-radius: .125rem;
|
||||
}
|
||||
|
||||
.rounded-t-sm {
|
||||
border-top-left-radius: .125rem;
|
||||
border-top-right-radius: .125rem;
|
||||
}
|
||||
|
||||
.rounded-r-sm {
|
||||
border-top-right-radius: .125rem;
|
||||
border-bottom-right-radius: .125rem;
|
||||
}
|
||||
|
||||
.rounded-b-sm {
|
||||
border-bottom-right-radius: .125rem;
|
||||
border-bottom-left-radius: .125rem;
|
||||
}
|
||||
|
||||
.rounded-l-sm {
|
||||
border-bottom-left-radius: .125rem;
|
||||
border-top-left-radius: .125rem;
|
||||
}
|
||||
|
||||
.rounded-lg {
|
||||
border-radius: .5rem;
|
||||
}
|
||||
|
||||
.rounded-t-lg {
|
||||
border-top-left-radius: .5rem;
|
||||
border-top-right-radius: .5rem;
|
||||
}
|
||||
|
||||
.rounded-r-lg {
|
||||
border-top-right-radius: .5rem;
|
||||
border-bottom-right-radius: .5rem;
|
||||
}
|
||||
|
||||
.rounded-b-lg {
|
||||
border-bottom-right-radius: .5rem;
|
||||
border-bottom-left-radius: .5rem;
|
||||
}
|
||||
|
||||
.rounded-l-lg {
|
||||
border-bottom-left-radius: .5rem;
|
||||
border-top-left-radius: .5rem;
|
||||
}
|
||||
|
||||
.rounded-pill {
|
||||
.rounded-full {
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.rounded-t-pill {
|
||||
border-top-left-radius: 9999px;
|
||||
border-top-right-radius: 9999px;
|
||||
.rounded-none {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.rounded-r-pill {
|
||||
border-top-right-radius: 9999px;
|
||||
border-bottom-right-radius: 9999px;
|
||||
.rounded-t {
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.rounded-b-pill {
|
||||
border-bottom-right-radius: 9999px;
|
||||
border-bottom-left-radius: 9999px;
|
||||
.rounded-r {
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
.rounded-l-pill {
|
||||
border-bottom-left-radius: 9999px;
|
||||
border-top-left-radius: 9999px;
|
||||
.rounded-b {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
.rounded-l {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.block {
|
||||
|
|
@ -3715,6 +3658,11 @@ button,
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
.example {
|
||||
font-weight: 700;
|
||||
color: #e3342f;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.sm\:input-reset {
|
||||
appearance: none;
|
||||
|
|
@ -5374,96 +5322,40 @@ button,
|
|||
border-radius: .25rem;
|
||||
}
|
||||
|
||||
.sm\:rounded-t {
|
||||
border-top-left-radius: .25rem;
|
||||
border-top-right-radius: .25rem;
|
||||
}
|
||||
|
||||
.sm\:rounded-r {
|
||||
border-top-right-radius: .25rem;
|
||||
border-bottom-right-radius: .25rem;
|
||||
}
|
||||
|
||||
.sm\:rounded-b {
|
||||
border-bottom-right-radius: .25rem;
|
||||
border-bottom-left-radius: .25rem;
|
||||
}
|
||||
|
||||
.sm\:rounded-l {
|
||||
border-bottom-left-radius: .25rem;
|
||||
border-top-left-radius: .25rem;
|
||||
}
|
||||
|
||||
.sm\:rounded-sm {
|
||||
border-radius: .125rem;
|
||||
}
|
||||
|
||||
.sm\:rounded-t-sm {
|
||||
border-top-left-radius: .125rem;
|
||||
border-top-right-radius: .125rem;
|
||||
}
|
||||
|
||||
.sm\:rounded-r-sm {
|
||||
border-top-right-radius: .125rem;
|
||||
border-bottom-right-radius: .125rem;
|
||||
}
|
||||
|
||||
.sm\:rounded-b-sm {
|
||||
border-bottom-right-radius: .125rem;
|
||||
border-bottom-left-radius: .125rem;
|
||||
}
|
||||
|
||||
.sm\:rounded-l-sm {
|
||||
border-bottom-left-radius: .125rem;
|
||||
border-top-left-radius: .125rem;
|
||||
}
|
||||
|
||||
.sm\:rounded-lg {
|
||||
border-radius: .5rem;
|
||||
}
|
||||
|
||||
.sm\:rounded-t-lg {
|
||||
border-top-left-radius: .5rem;
|
||||
border-top-right-radius: .5rem;
|
||||
}
|
||||
|
||||
.sm\:rounded-r-lg {
|
||||
border-top-right-radius: .5rem;
|
||||
border-bottom-right-radius: .5rem;
|
||||
}
|
||||
|
||||
.sm\:rounded-b-lg {
|
||||
border-bottom-right-radius: .5rem;
|
||||
border-bottom-left-radius: .5rem;
|
||||
}
|
||||
|
||||
.sm\:rounded-l-lg {
|
||||
border-bottom-left-radius: .5rem;
|
||||
border-top-left-radius: .5rem;
|
||||
}
|
||||
|
||||
.sm\:rounded-pill {
|
||||
.sm\:rounded-full {
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.sm\:rounded-t-pill {
|
||||
border-top-left-radius: 9999px;
|
||||
border-top-right-radius: 9999px;
|
||||
.sm\:rounded-none {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.sm\:rounded-r-pill {
|
||||
border-top-right-radius: 9999px;
|
||||
border-bottom-right-radius: 9999px;
|
||||
.sm\:rounded-t {
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.sm\:rounded-b-pill {
|
||||
border-bottom-right-radius: 9999px;
|
||||
border-bottom-left-radius: 9999px;
|
||||
.sm\:rounded-r {
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
.sm\:rounded-l-pill {
|
||||
border-bottom-left-radius: 9999px;
|
||||
border-top-left-radius: 9999px;
|
||||
.sm\:rounded-b {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
.sm\:rounded-l {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.sm\:block {
|
||||
|
|
@ -6843,6 +6735,11 @@ button,
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.sm\:example {
|
||||
font-weight: 700;
|
||||
color: #e3342f;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
|
|
@ -8504,96 +8401,40 @@ button,
|
|||
border-radius: .25rem;
|
||||
}
|
||||
|
||||
.md\:rounded-t {
|
||||
border-top-left-radius: .25rem;
|
||||
border-top-right-radius: .25rem;
|
||||
}
|
||||
|
||||
.md\:rounded-r {
|
||||
border-top-right-radius: .25rem;
|
||||
border-bottom-right-radius: .25rem;
|
||||
}
|
||||
|
||||
.md\:rounded-b {
|
||||
border-bottom-right-radius: .25rem;
|
||||
border-bottom-left-radius: .25rem;
|
||||
}
|
||||
|
||||
.md\:rounded-l {
|
||||
border-bottom-left-radius: .25rem;
|
||||
border-top-left-radius: .25rem;
|
||||
}
|
||||
|
||||
.md\:rounded-sm {
|
||||
border-radius: .125rem;
|
||||
}
|
||||
|
||||
.md\:rounded-t-sm {
|
||||
border-top-left-radius: .125rem;
|
||||
border-top-right-radius: .125rem;
|
||||
}
|
||||
|
||||
.md\:rounded-r-sm {
|
||||
border-top-right-radius: .125rem;
|
||||
border-bottom-right-radius: .125rem;
|
||||
}
|
||||
|
||||
.md\:rounded-b-sm {
|
||||
border-bottom-right-radius: .125rem;
|
||||
border-bottom-left-radius: .125rem;
|
||||
}
|
||||
|
||||
.md\:rounded-l-sm {
|
||||
border-bottom-left-radius: .125rem;
|
||||
border-top-left-radius: .125rem;
|
||||
}
|
||||
|
||||
.md\:rounded-lg {
|
||||
border-radius: .5rem;
|
||||
}
|
||||
|
||||
.md\:rounded-t-lg {
|
||||
border-top-left-radius: .5rem;
|
||||
border-top-right-radius: .5rem;
|
||||
}
|
||||
|
||||
.md\:rounded-r-lg {
|
||||
border-top-right-radius: .5rem;
|
||||
border-bottom-right-radius: .5rem;
|
||||
}
|
||||
|
||||
.md\:rounded-b-lg {
|
||||
border-bottom-right-radius: .5rem;
|
||||
border-bottom-left-radius: .5rem;
|
||||
}
|
||||
|
||||
.md\:rounded-l-lg {
|
||||
border-bottom-left-radius: .5rem;
|
||||
border-top-left-radius: .5rem;
|
||||
}
|
||||
|
||||
.md\:rounded-pill {
|
||||
.md\:rounded-full {
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.md\:rounded-t-pill {
|
||||
border-top-left-radius: 9999px;
|
||||
border-top-right-radius: 9999px;
|
||||
.md\:rounded-none {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.md\:rounded-r-pill {
|
||||
border-top-right-radius: 9999px;
|
||||
border-bottom-right-radius: 9999px;
|
||||
.md\:rounded-t {
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.md\:rounded-b-pill {
|
||||
border-bottom-right-radius: 9999px;
|
||||
border-bottom-left-radius: 9999px;
|
||||
.md\:rounded-r {
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
.md\:rounded-l-pill {
|
||||
border-bottom-left-radius: 9999px;
|
||||
border-top-left-radius: 9999px;
|
||||
.md\:rounded-b {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
.md\:rounded-l {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.md\:block {
|
||||
|
|
@ -9973,6 +9814,11 @@ button,
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.md\:example {
|
||||
font-weight: 700;
|
||||
color: #e3342f;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
|
|
@ -11634,96 +11480,40 @@ button,
|
|||
border-radius: .25rem;
|
||||
}
|
||||
|
||||
.lg\:rounded-t {
|
||||
border-top-left-radius: .25rem;
|
||||
border-top-right-radius: .25rem;
|
||||
}
|
||||
|
||||
.lg\:rounded-r {
|
||||
border-top-right-radius: .25rem;
|
||||
border-bottom-right-radius: .25rem;
|
||||
}
|
||||
|
||||
.lg\:rounded-b {
|
||||
border-bottom-right-radius: .25rem;
|
||||
border-bottom-left-radius: .25rem;
|
||||
}
|
||||
|
||||
.lg\:rounded-l {
|
||||
border-bottom-left-radius: .25rem;
|
||||
border-top-left-radius: .25rem;
|
||||
}
|
||||
|
||||
.lg\:rounded-sm {
|
||||
border-radius: .125rem;
|
||||
}
|
||||
|
||||
.lg\:rounded-t-sm {
|
||||
border-top-left-radius: .125rem;
|
||||
border-top-right-radius: .125rem;
|
||||
}
|
||||
|
||||
.lg\:rounded-r-sm {
|
||||
border-top-right-radius: .125rem;
|
||||
border-bottom-right-radius: .125rem;
|
||||
}
|
||||
|
||||
.lg\:rounded-b-sm {
|
||||
border-bottom-right-radius: .125rem;
|
||||
border-bottom-left-radius: .125rem;
|
||||
}
|
||||
|
||||
.lg\:rounded-l-sm {
|
||||
border-bottom-left-radius: .125rem;
|
||||
border-top-left-radius: .125rem;
|
||||
}
|
||||
|
||||
.lg\:rounded-lg {
|
||||
border-radius: .5rem;
|
||||
}
|
||||
|
||||
.lg\:rounded-t-lg {
|
||||
border-top-left-radius: .5rem;
|
||||
border-top-right-radius: .5rem;
|
||||
}
|
||||
|
||||
.lg\:rounded-r-lg {
|
||||
border-top-right-radius: .5rem;
|
||||
border-bottom-right-radius: .5rem;
|
||||
}
|
||||
|
||||
.lg\:rounded-b-lg {
|
||||
border-bottom-right-radius: .5rem;
|
||||
border-bottom-left-radius: .5rem;
|
||||
}
|
||||
|
||||
.lg\:rounded-l-lg {
|
||||
border-bottom-left-radius: .5rem;
|
||||
border-top-left-radius: .5rem;
|
||||
}
|
||||
|
||||
.lg\:rounded-pill {
|
||||
.lg\:rounded-full {
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.lg\:rounded-t-pill {
|
||||
border-top-left-radius: 9999px;
|
||||
border-top-right-radius: 9999px;
|
||||
.lg\:rounded-none {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.lg\:rounded-r-pill {
|
||||
border-top-right-radius: 9999px;
|
||||
border-bottom-right-radius: 9999px;
|
||||
.lg\:rounded-t {
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.lg\:rounded-b-pill {
|
||||
border-bottom-right-radius: 9999px;
|
||||
border-bottom-left-radius: 9999px;
|
||||
.lg\:rounded-r {
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
.lg\:rounded-l-pill {
|
||||
border-bottom-left-radius: 9999px;
|
||||
border-top-left-radius: 9999px;
|
||||
.lg\:rounded-b {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
.lg\:rounded-l {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.lg\:block {
|
||||
|
|
@ -13103,6 +12893,11 @@ button,
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.lg\:example {
|
||||
font-weight: 700;
|
||||
color: #e3342f;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
|
|
@ -14764,96 +14559,40 @@ button,
|
|||
border-radius: .25rem;
|
||||
}
|
||||
|
||||
.xl\:rounded-t {
|
||||
border-top-left-radius: .25rem;
|
||||
border-top-right-radius: .25rem;
|
||||
}
|
||||
|
||||
.xl\:rounded-r {
|
||||
border-top-right-radius: .25rem;
|
||||
border-bottom-right-radius: .25rem;
|
||||
}
|
||||
|
||||
.xl\:rounded-b {
|
||||
border-bottom-right-radius: .25rem;
|
||||
border-bottom-left-radius: .25rem;
|
||||
}
|
||||
|
||||
.xl\:rounded-l {
|
||||
border-bottom-left-radius: .25rem;
|
||||
border-top-left-radius: .25rem;
|
||||
}
|
||||
|
||||
.xl\:rounded-sm {
|
||||
border-radius: .125rem;
|
||||
}
|
||||
|
||||
.xl\:rounded-t-sm {
|
||||
border-top-left-radius: .125rem;
|
||||
border-top-right-radius: .125rem;
|
||||
}
|
||||
|
||||
.xl\:rounded-r-sm {
|
||||
border-top-right-radius: .125rem;
|
||||
border-bottom-right-radius: .125rem;
|
||||
}
|
||||
|
||||
.xl\:rounded-b-sm {
|
||||
border-bottom-right-radius: .125rem;
|
||||
border-bottom-left-radius: .125rem;
|
||||
}
|
||||
|
||||
.xl\:rounded-l-sm {
|
||||
border-bottom-left-radius: .125rem;
|
||||
border-top-left-radius: .125rem;
|
||||
}
|
||||
|
||||
.xl\:rounded-lg {
|
||||
border-radius: .5rem;
|
||||
}
|
||||
|
||||
.xl\:rounded-t-lg {
|
||||
border-top-left-radius: .5rem;
|
||||
border-top-right-radius: .5rem;
|
||||
}
|
||||
|
||||
.xl\:rounded-r-lg {
|
||||
border-top-right-radius: .5rem;
|
||||
border-bottom-right-radius: .5rem;
|
||||
}
|
||||
|
||||
.xl\:rounded-b-lg {
|
||||
border-bottom-right-radius: .5rem;
|
||||
border-bottom-left-radius: .5rem;
|
||||
}
|
||||
|
||||
.xl\:rounded-l-lg {
|
||||
border-bottom-left-radius: .5rem;
|
||||
border-top-left-radius: .5rem;
|
||||
}
|
||||
|
||||
.xl\:rounded-pill {
|
||||
.xl\:rounded-full {
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.xl\:rounded-t-pill {
|
||||
border-top-left-radius: 9999px;
|
||||
border-top-right-radius: 9999px;
|
||||
.xl\:rounded-none {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.xl\:rounded-r-pill {
|
||||
border-top-right-radius: 9999px;
|
||||
border-bottom-right-radius: 9999px;
|
||||
.xl\:rounded-t {
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.xl\:rounded-b-pill {
|
||||
border-bottom-right-radius: 9999px;
|
||||
border-bottom-left-radius: 9999px;
|
||||
.xl\:rounded-r {
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
.xl\:rounded-l-pill {
|
||||
border-bottom-left-radius: 9999px;
|
||||
border-top-left-radius: 9999px;
|
||||
.xl\:rounded-b {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
.xl\:rounded-l {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.xl\:block {
|
||||
|
|
@ -16233,6 +15972,11 @@ button,
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.xl\:example {
|
||||
font-weight: 700;
|
||||
color: #e3342f;
|
||||
}
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=tailwind.css.map */
|
||||
2
dist/tailwind.css.map
vendored
2
dist/tailwind.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/tailwind.min.css
vendored
2
dist/tailwind.min.css
vendored
File diff suppressed because one or more lines are too long
2
docs/.gitignore
vendored
2
docs/.gitignore
vendored
|
|
@ -2,4 +2,6 @@
|
|||
/node_modules/
|
||||
/vendor/
|
||||
/source/css/
|
||||
/source/js/
|
||||
/source/mix-manifest.json
|
||||
/tailwind.json
|
||||
|
|
|
|||
|
|
@ -1,4 +1,32 @@
|
|||
<?php
|
||||
|
||||
use Illuminate\Support\Str;
|
||||
use Illuminate\Support\HtmlString;
|
||||
|
||||
/** @var $container \Illuminate\Container\Container */
|
||||
/** @var $jigsaw \TightenCo\Jigsaw\Jigsaw */
|
||||
/** @var $jigsaw \TightenCo\Jigsaw\Jigsaw */
|
||||
|
||||
function mix($path, $manifestDirectory = '')
|
||||
{
|
||||
static $manifests = [];
|
||||
if (! Str::startsWith($path, '/')) {
|
||||
$path = "/{$path}";
|
||||
}
|
||||
if ($manifestDirectory && ! Str::startsWith($manifestDirectory, '/')) {
|
||||
$manifestDirectory = "/{$manifestDirectory}";
|
||||
}
|
||||
|
||||
$manifestPath = public_path($manifestDirectory.'/mix-manifest.json');
|
||||
|
||||
if (! isset($manifests[$manifestPath])) {
|
||||
if (! file_exists($manifestPath)) {
|
||||
throw new Exception('The Mix manifest does not exist.');
|
||||
}
|
||||
$manifests[$manifestPath] = json_decode(file_get_contents($manifestPath), true);
|
||||
}
|
||||
$manifest = $manifests[$manifestPath];
|
||||
if (! isset($manifest[$path])) {
|
||||
throw new InvalidArgumentException("Unable to locate Mix file: {$path}.");
|
||||
}
|
||||
return new HtmlString($manifestDirectory.$manifest[$path]);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,6 +7,10 @@ return [
|
|||
'config' => json_decode(file_get_contents(__DIR__ . '/tailwind.json'), true),
|
||||
'colors' => ['red', 'orange', 'yellow', 'green', 'teal', 'blue', 'indigo', 'purple', 'pink'],
|
||||
'active' => function ($page, $path) {
|
||||
return str_contains($page->getPath(), $path);
|
||||
$pages = collect(array_wrap($page));
|
||||
|
||||
return $pages->contains(function ($page) use ($path) {
|
||||
return str_contains($page->getPath(), $path);
|
||||
});
|
||||
}
|
||||
];
|
||||
|
|
|
|||
|
|
@ -1,4 +0,0 @@
|
|||
{
|
||||
"/source/js/app.js": "/source/js/app.js",
|
||||
"/source/css/main.css": "/source/css/main.css"
|
||||
}
|
||||
|
|
@ -15,6 +15,7 @@
|
|||
"cross-env": "^3.2.3",
|
||||
"escape-html": "^1.0.3",
|
||||
"laravel-mix": "^1.5.1",
|
||||
"prismjs": "^1.8.3",
|
||||
"vue": "^2.5.2"
|
||||
},
|
||||
"dependencies": {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
const anchorJS = require('anchor-js')
|
||||
const Prism = require('./prism')
|
||||
|
||||
window.anchors = new anchorJS()
|
||||
window.Vue = require('vue')
|
||||
|
|
@ -8,3 +9,7 @@ Vue.component('responsive-code-sample', require('./components/ResponsiveCodeSamp
|
|||
const app = new Vue({
|
||||
el: '#app'
|
||||
})
|
||||
|
||||
Prism.highlightAll()
|
||||
anchors.options = { placement: 'left', class: 'text-slate-light' };
|
||||
anchors.add();
|
||||
|
|
|
|||
|
|
@ -79,6 +79,22 @@
|
|||
@apply .text-lg;
|
||||
}
|
||||
|
||||
> h4, h4& {
|
||||
@apply .mt-8;
|
||||
@apply .mb-0;
|
||||
@apply .text-slate-darker;
|
||||
@apply .leading-none;
|
||||
@apply .font-semibold;
|
||||
@apply .text-base;
|
||||
}
|
||||
|
||||
> h1 > code,
|
||||
> h2 > code,
|
||||
> h3 > code,
|
||||
> h4 > code {
|
||||
@apply .font-mono;
|
||||
}
|
||||
|
||||
> p, p&, > blockquote > p {
|
||||
@apply .text-slate-dark;
|
||||
@apply .mt-4;
|
||||
|
|
@ -104,7 +120,7 @@
|
|||
@apply .text-slate-dark;
|
||||
}
|
||||
|
||||
> :not(pre) > code[class*="language-"], > pre[class*="language-"], pre[class*="language-"]& {
|
||||
> :not(pre):not(h1):not(h2):not(h3):not(h4) > code, > pre, pre& {
|
||||
@apply .bg-smoke-lighter;
|
||||
@apply .text-sm;
|
||||
@apply .leading-normal;
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ code[class*="language-"]::selection, code[class*="language-"] ::selection {
|
|||
}
|
||||
|
||||
/* Code blocks */
|
||||
pre[class*="language-"] {
|
||||
pre {
|
||||
padding: 1em;
|
||||
margin: .5em 0;
|
||||
overflow: auto;
|
||||
|
|
|
|||
|
|
@ -19,9 +19,9 @@
|
|||
@import url("https://use.typekit.net/iqy1okj.css");
|
||||
</style>
|
||||
{{-- <link rel="stylesheet" href="https://use.typekit.net/iqy1okj.css"> --}}
|
||||
<link rel="stylesheet" href="/css/main.css">
|
||||
<link rel="stylesheet" href="{{ mix('/css/main.css') }}">
|
||||
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
|
||||
<script src="/js/nav.js"></script>
|
||||
<script src="{{ mix('/js/nav.js') }}"></script>
|
||||
</head>
|
||||
<body data-sidebar-visible="true" class="font-sans font-normal text-slate-darker leading-normal">
|
||||
<div class="min-h-screen">
|
||||
|
|
@ -44,40 +44,40 @@
|
|||
<div class="mb-8">
|
||||
<p class="mb-4 text-slate-light uppercase tracking-wide font-bold text-xs">Introduction</p>
|
||||
<ul>
|
||||
<li class="mb-3"><a class="{{ $page->active('/what-is-tailwind') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/what-is-tailwind">What is Tailwind?</a></li>
|
||||
<li class="mb-3"><a class="{{ $page->active('/docs/what-is-tailwind') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/docs/what-is-tailwind">What is Tailwind?</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mb-8">
|
||||
<p class="mb-4 text-slate-light uppercase tracking-wide font-bold text-xs">Getting Started</p>
|
||||
<ul>
|
||||
<li class="mb-3"><a class="{{ $page->active('/installation') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/installation">Installation</a></li>
|
||||
<li class="mb-3"><a class="{{ $page->active('/docs/installation') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/docs/installation">Installation</a></li>
|
||||
<li class="mb-3">
|
||||
<a class="{{ $page->active('/configuration') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/configuration">
|
||||
<a class="{{ $page->active('/docs/configuration') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/docs/configuration">
|
||||
Configuration
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-3">
|
||||
<a class="{{ $page->active('/colors') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/colors">
|
||||
<a class="{{ $page->active('/docs/colors') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/docs/colors">
|
||||
Colors
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-3">
|
||||
<a class="{{ $page->active('/responsive-design') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/responsive-design">
|
||||
<a class="{{ $page->active('/docs/responsive-design') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/docs/responsive-design">
|
||||
Responsive Design
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-3">
|
||||
<a class="{{ $page->active('/adding-new-utilities') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/adding-new-utilities">
|
||||
<a class="{{ $page->active('/docs/adding-new-utilities') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/docs/adding-new-utilities">
|
||||
Adding New Utilities
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-3">
|
||||
<a class="{{ $page->active('/extracting-components') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/extracting-components">
|
||||
<a class="{{ $page->active('/docs/extracting-components') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/docs/extracting-components">
|
||||
Extracting Components
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-3">
|
||||
<a class="{{ $page->active('/functions-and-directives') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/functions-and-directives">
|
||||
<a class="{{ $page->active('/docs/functions-and-directives') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/docs/functions-and-directives">
|
||||
Functions & Directives
|
||||
</a>
|
||||
</li>
|
||||
|
|
@ -86,98 +86,97 @@
|
|||
<div class="mt-8">
|
||||
<p class="mb-4 text-slate-light uppercase tracking-wide font-bold text-xs">Styles</p>
|
||||
<ul class="mb-8">
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/base" class="{{ $page->active('/base') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Base</a></li>
|
||||
<li class="mb-3">
|
||||
<a href="{{ $page->baseUrl }}/background-color" class="block mb-2 {{ $page->active('/background-') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Backgrounds</a>
|
||||
<ul class="pl-4 {{ $page->active('/background-') ? 'block' : 'hidden' }}">
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/background-color" class="{{ $page->active('/background-color') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Color</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/background-position" class="{{ $page->active('/background-position') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Position</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/background-size" class="{{ $page->active('/background-size') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Size</a></li>
|
||||
<a href="{{ $page->baseUrl }}/docs/background-color" class="block mb-2 {{ $page->active('/docs/background-') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Backgrounds</a>
|
||||
<ul class="pl-4 {{ $page->active('/docs/background-') ? 'block' : 'hidden' }}">
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/background-color" class="{{ $page->active('/docs/background-color') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Color</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/background-position" class="{{ $page->active('/docs/background-position') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Position</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/background-size" class="{{ $page->active('/docs/background-size') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Size</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="mb-3">
|
||||
<a href="{{ $page->baseUrl }}/border-width" class="block mb-2 {{ $page->active('/border-') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Borders</a>
|
||||
<ul class="pl-4 {{ $page->active('/border-') ? 'block' : 'hidden' }}">
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/border-width" class="{{ $page->active('/border-width') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Width</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/border-color" class="{{ $page->active('/border-color') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Color</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/border-style" class="{{ $page->active('/border-style') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Style</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/border-radius" class="{{ $page->active('/border-radius') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Radius</a></li>
|
||||
<a href="{{ $page->baseUrl }}/docs/border-width" class="block mb-2 {{ $page->active(['/docs/border-width', '/docs/border-color', '/docs/border-style']) ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Borders</a>
|
||||
<ul class="pl-4 {{ $page->active(['/docs/border-width', '/docs/border-color', '/docs/border-style']) ? 'block' : 'hidden' }}">
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/border-width" class="{{ $page->active('/docs/border-width') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Width</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/border-color" class="{{ $page->active('/docs/border-color') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Color</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/border-style" class="{{ $page->active('/docs/border-style') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Style</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/buttons" class="{{ $page->active('/buttons') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Buttons</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/container" class="{{ $page->active('/container') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Container</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/display" class="{{ $page->active('/display') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Display</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/border-radius" class="{{ $page->active('/docs/border-radius') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Border Radius</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/container" class="{{ $page->active('/docs/container') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Container</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/display" class="{{ $page->active('/docs/display') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Display</a></li>
|
||||
<li class="mb-3">
|
||||
<a href="{{ $page->baseUrl }}/flexbox-display" class="block mb-2 {{ $page->active('/flexbox-') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Flexbox</a>
|
||||
<ul class="pl-4 {{ $page->active('/flexbox-') ? 'block' : 'hidden' }}">
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/flexbox-display" class="{{ $page->active('/flexbox-display') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Display</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/flexbox-direction" class="{{ $page->active('/flexbox-direction') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Direction</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/flexbox-wrapping" class="{{ $page->active('/flexbox-wrapping') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Wrapping</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/flexbox-justify-content" class="{{ $page->active('/flexbox-justify-content') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Justify Content</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/flexbox-align-items" class="{{ $page->active('/flexbox-align-items') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Align Items</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/flexbox-align-content" class="{{ $page->active('/flexbox-align-content') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Align Content</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/flexbox-align-self" class="{{ $page->active('/flexbox-align-self') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Align Self</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/flexbox-flex-grow-shrink" class="{{ $page->active('/flexbox-flex-grow-shrink') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Flex, Grow, & Shrink</a></li>
|
||||
<a href="{{ $page->baseUrl }}/docs/flexbox-display" class="block mb-2 {{ $page->active('/docs/flexbox-') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Flexbox</a>
|
||||
<ul class="pl-4 {{ $page->active('/docs/flexbox-') ? 'block' : 'hidden' }}">
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/flexbox-display" class="{{ $page->active('/docs/flexbox-display') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Display</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/flexbox-direction" class="{{ $page->active('/docs/flexbox-direction') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Direction</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/flexbox-wrapping" class="{{ $page->active('/docs/flexbox-wrapping') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Wrapping</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/flexbox-justify-content" class="{{ $page->active('/docs/flexbox-justify-content') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Justify Content</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/flexbox-align-items" class="{{ $page->active('/docs/flexbox-align-items') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Align Items</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/flexbox-align-content" class="{{ $page->active('/docs/flexbox-align-content') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Align Content</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/flexbox-align-self" class="{{ $page->active('/docs/flexbox-align-self') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Align Self</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/flexbox-flex-grow-shrink" class="{{ $page->active('/docs/flexbox-flex-grow-shrink') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Flex, Grow, & Shrink</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/floats" class="{{ $page->active('/floats') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Floats</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/forms" class="{{ $page->active('/forms') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Forms</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/grid" class="{{ $page->active('/grid') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Grid</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/floats" class="{{ $page->active('/docs/floats') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Floats</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/forms" class="{{ $page->active('/docs/forms') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Forms</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/grid" class="{{ $page->active('/docs/grid') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Grid</a></li>
|
||||
<li class="mb-3">
|
||||
<a href="{{ $page->baseUrl }}/cursor" class="block mb-2 {{ $page->active(['/cursor', '/resize', '/pointer-events', '/user-select']) ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Interactivity</a>
|
||||
<ul class="pl-4 {{ $page->active(['/cursor', '/resize', '/pointer-events', '/user-select']) ? 'block' : 'hidden' }}">
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/cursor" class="{{ $page->active('/cursor') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Cursor</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/resize" class="{{ $page->active('/resize') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Resize</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/pointer-events" class="{{ $page->active('/pointer-events') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Pointer Events</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/user-select" class="{{ $page->active('/user-select') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">User Select</a></li>
|
||||
<a href="{{ $page->baseUrl }}/docs/cursor" class="block mb-2 {{ $page->active(['/docs/cursor', '/docs/resize', '/docs/pointer-events', '/docs/user-select']) ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Interactivity</a>
|
||||
<ul class="pl-4 {{ $page->active(['/docs/cursor', '/docs/resize', '/docs/pointer-events', '/docs/user-select']) ? 'block' : 'hidden' }}">
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/cursor" class="{{ $page->active('/docs/cursor') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Cursor</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/resize" class="{{ $page->active('/docs/resize') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Resize</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/pointer-events" class="{{ $page->active('/docs/pointer-events') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Pointer Events</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/user-select" class="{{ $page->active('/docs/user-select') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">User Select</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/lists" class="{{ $page->active('/lists') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Lists</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/opacity" class="{{ $page->active('/opacity') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Opacity</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/overflow" class="{{ $page->active('/overflow') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Overflow</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/positioning" class="{{ $page->active('/positioning') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Positioning</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/shadows" class="{{ $page->active('/shadows') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Shadows</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/lists" class="{{ $page->active('/docs/lists') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Lists</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/opacity" class="{{ $page->active('/docs/opacity') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Opacity</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/overflow" class="{{ $page->active('/docs/overflow') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Overflow</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/positioning" class="{{ $page->active('/docs/positioning') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Positioning</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/shadows" class="{{ $page->active('/docs/shadows') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Shadows</a></li>
|
||||
<li class="mb-3">
|
||||
<a href="{{ $page->baseUrl }}/width" class="block mb-2 {{ $page->active(['/width', '/min-width', '/max-width', '/height', '/min-height', '/max-height']) ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Sizing</a>
|
||||
<ul class="pl-4 {{ $page->active(['/width', '/min-width', '/max-width', '/height', '/min-height', '/max-height']) ? 'block' : 'hidden' }}">
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/width" class="{{ $page->active('/width') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Width</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/min-width" class="{{ $page->active('/min-width') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Min-Width</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/max-width" class="{{ $page->active('/max-width') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Max-Width</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/height" class="{{ $page->active('/height') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Height</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/min-height" class="{{ $page->active('/min-height') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Min-Height</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/max-height" class="{{ $page->active('/max-height') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Max-Height</a></li>
|
||||
<a href="{{ $page->baseUrl }}/docs/width" class="block mb-2 {{ $page->active(['/docs/width', '/docs/min-width', '/docs/max-width', '/docs/height', '/docs/min-height', '/docs/max-height']) ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Sizing</a>
|
||||
<ul class="pl-4 {{ $page->active(['/docs/width', '/docs/min-width', '/docs/max-width', '/docs/height', '/docs/min-height', '/docs/max-height']) ? 'block' : 'hidden' }}">
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/width" class="{{ $page->active('/docs/width') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Width</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/min-width" class="{{ $page->active('/docs/min-width') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Min-Width</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/max-width" class="{{ $page->active('/docs/max-width') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Max-Width</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/height" class="{{ $page->active('/docs/height') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Height</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/min-height" class="{{ $page->active('/docs/min-height') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Min-Height</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/max-height" class="{{ $page->active('/docs/max-height') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Max-Height</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="mb-3">
|
||||
<a href="{{ $page->baseUrl }}/padding" class="block mb-2 {{ $page->active(['/padding', '/margin', '/negative-margin']) ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Spacing</a>
|
||||
<ul class="pl-4 {{ $page->active(['/padding', '/margin', '/negative-margin']) ? 'block' : 'hidden' }}">
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/padding" class="{{ $page->active('/padding') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Padding</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/margin" class="{{ $page->active('/margin') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Margin</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/negative-margin" class="{{ $page->active('/negative-margin') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Negative Margin</a></li>
|
||||
<a href="{{ $page->baseUrl }}/docs/padding" class="block mb-2 {{ $page->active(['/docs/padding', '/docs/margin', '/docs/negative-margin']) ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Spacing</a>
|
||||
<ul class="pl-4 {{ $page->active(['/docs/padding', '/docs/margin', '/docs/negative-margin']) ? 'block' : 'hidden' }}">
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/padding" class="{{ $page->active('/docs/padding') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Padding</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/margin" class="{{ $page->active('/docs/margin') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Margin</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/negative-margin" class="{{ $page->active('/docs/negative-margin') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Negative Margin</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/svg" class="{{ $page->active('/svg') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">SVG</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/svg" class="{{ $page->active('/docs/svg') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">SVG</a></li>
|
||||
<li class="mb-3">
|
||||
<a href="{{ $page->baseUrl }}/fonts" class="block mb-2 {{ $page->active(['/fonts', '/text-color', '/text-sizing', '/font-weight', '/line-height', '/letter-spacing', '/whitespace-and-wrapping', '/text-style']) ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Typography</a>
|
||||
<ul class="pl-4 {{ $page->active(['/fonts', '/text-color', '/text-sizing', '/font-weight', '/line-height', '/letter-spacing', '/whitespace-and-wrapping', '/text-style']) ? 'block' : 'hidden' }}">
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/fonts" class="{{ $page->active('/fonts') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Fonts</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/text-color" class="{{ $page->active('/text-color') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Color</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/text-sizing" class="{{ $page->active('/text-sizing') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Sizing</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/font-weight" class="{{ $page->active('/font-weight') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Weight</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/line-height" class="{{ $page->active('/line-height') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Line Height</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/letter-spacing" class="{{ $page->active('/letter-spacing') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Letter Spacing</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/text-style" class="{{ $page->active('/text-style') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Style & Decoration</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/whitespace-and-wrapping" class="{{ $page->active('/whitespace-and-wrapping') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Whitespace & Wrapping</a></li>
|
||||
<a href="{{ $page->baseUrl }}/docs/fonts" class="block mb-2 {{ $page->active(['/docs/fonts', '/docs/text-color', '/docs/text-sizing', '/docs/font-weight', '/docs/line-height', '/docs/letter-spacing', '/docs/whitespace-and-wrapping', '/docs/text-style']) ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Typography</a>
|
||||
<ul class="pl-4 {{ $page->active(['/docs/fonts', '/docs/text-color', '/docs/text-sizing', '/docs/font-weight', '/docs/line-height', '/docs/letter-spacing', '/docs/whitespace-and-wrapping', '/docs/text-style']) ? 'block' : 'hidden' }}">
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/fonts" class="{{ $page->active('/docs/fonts') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Fonts</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/text-color" class="{{ $page->active('/docs/text-color') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Color</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/text-sizing" class="{{ $page->active('/docs/text-sizing') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Sizing</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/font-weight" class="{{ $page->active('/docs/font-weight') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Weight</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/line-height" class="{{ $page->active('/docs/line-height') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Line Height</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/letter-spacing" class="{{ $page->active('/docs/letter-spacing') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Letter Spacing</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/text-style" class="{{ $page->active('/docs/text-style') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Style & Decoration</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/whitespace-and-wrapping" class="{{ $page->active('/docs/whitespace-and-wrapping') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Whitespace & Wrapping</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/vertical-alignment" class="{{ $page->active('/vertical-alignment') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Vertical Alignment</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/visibility" class="{{ $page->active('/visibility') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Visibility</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/z-index" class="{{ $page->active('/z-index') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Z-Index</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/vertical-alignment" class="{{ $page->active('/docs/vertical-alignment') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Vertical Alignment</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/visibility" class="{{ $page->active('/docs/visibility') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Visibility</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/z-index" class="{{ $page->active('/docs/z-index') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Z-Index</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mb-8">
|
||||
<p class="mb-4 text-slate-light uppercase tracking-wide font-bold text-xs">Examples</p>
|
||||
<ul>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/examples/buttons" class="{{ $page->active('/docs/examples/buttons') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Buttons</a></li>
|
||||
<li class="mb-3"><a class="{{ $page->active('/examples/alerts') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/examples/alerts">Alerts</a></li>
|
||||
<li class="mb-3"><a class="{{ $page->active('/examples/cards') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/examples/cards">Cards</a></li>
|
||||
</ul>
|
||||
|
|
@ -208,7 +207,6 @@
|
|||
@yield('body')
|
||||
</div>
|
||||
<script src="/js/app.js"></script>
|
||||
<script src="/js/prism.js"></script>
|
||||
<script>
|
||||
anchors.options = { placement: 'left', class: 'text-slate-light' };
|
||||
anchors.add();
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
<div class="flex mb-6">
|
||||
@if ($responsive)
|
||||
<span class="inline-flex items-center rounded-pill border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none mr-2">
|
||||
<span class="inline-flex rounded-pill bg-green-light text-white mr-1">
|
||||
<span class="inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none mr-2">
|
||||
<span class="inline-flex rounded-full bg-green-light text-white mr-1">
|
||||
<svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5.8 9.4c-.33-.442-.958-.53-1.4-.2-.442.33-.53.958-.2 1.4l3 4c.38.508 1.134.537 1.553.06l7-8c.363-.417.32-1.05-.094-1.413-.417-.363-1.05-.32-1.413.094L8.06 12.414 5.8 9.4z"/></svg>
|
||||
</span>
|
||||
<span>Responsive</span>
|
||||
</span>
|
||||
@else
|
||||
<span class="inline-flex items-center rounded-pill border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none opacity-50 mr-2">
|
||||
<span class="inline-flex rounded-pill bg-grey text-white mr-1">
|
||||
<span class="inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none opacity-50 mr-2">
|
||||
<span class="inline-flex rounded-full bg-grey text-white mr-1">
|
||||
<svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 8.586L6.707 5.293c-.39-.39-1.024-.39-1.414 0-.39.39-.39 1.024 0 1.414L8.586 10l-3.293 3.293c-.39.39-.39 1.024 0 1.414.39.39 1.024.39 1.414 0L10 11.414l3.293 3.293c.39.39 1.024.39 1.414 0 .39-.39.39-1.024 0-1.414L11.414 10l3.293-3.293c.39-.39.39-1.024 0-1.414-.39-.39-1.024-.39-1.414 0L10 8.586z"/></svg>
|
||||
</span>
|
||||
<span>Responsive</span>
|
||||
|
|
@ -16,15 +16,15 @@
|
|||
@endif
|
||||
|
||||
@if ($customizable)
|
||||
<span class="inline-flex items-center rounded-pill border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none mr-2">
|
||||
<span class="inline-flex rounded-pill bg-green-light text-white mr-1">
|
||||
<span class="inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none mr-2">
|
||||
<span class="inline-flex rounded-full bg-green-light text-white mr-1">
|
||||
<svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5.8 9.4c-.33-.442-.958-.53-1.4-.2-.442.33-.53.958-.2 1.4l3 4c.38.508 1.134.537 1.553.06l7-8c.363-.417.32-1.05-.094-1.413-.417-.363-1.05-.32-1.413.094L8.06 12.414 5.8 9.4z"/></svg>
|
||||
</span>
|
||||
<span>Customizable</span>
|
||||
</span>
|
||||
@else
|
||||
<span class="inline-flex items-center rounded-pill border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none opacity-50 mr-2">
|
||||
<span class="inline-flex rounded-pill bg-grey text-white mr-1">
|
||||
<span class="inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none opacity-50 mr-2">
|
||||
<span class="inline-flex rounded-full bg-grey text-white mr-1">
|
||||
<svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 8.586L6.707 5.293c-.39-.39-1.024-.39-1.414 0-.39.39-.39 1.024 0 1.414L8.586 10l-3.293 3.293c-.39.39-.39 1.024 0 1.414.39.39 1.024.39 1.414 0L10 11.414l3.293 3.293c.39.39 1.024.39 1.414 0 .39-.39.39-1.024 0-1.414L11.414 10l3.293-3.293c.39-.39.39-1.024 0-1.414-.39-.39-1.024-.39-1.414 0L10 8.586z"/></svg>
|
||||
</span>
|
||||
<span>Customizable</span>
|
||||
|
|
@ -32,15 +32,15 @@
|
|||
@endif
|
||||
|
||||
@if ($hover)
|
||||
<span class="inline-flex items-center rounded-pill border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none mr-2">
|
||||
<span class="inline-flex rounded-pill bg-green-light text-white mr-1">
|
||||
<span class="inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none mr-2">
|
||||
<span class="inline-flex rounded-full bg-green-light text-white mr-1">
|
||||
<svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5.8 9.4c-.33-.442-.958-.53-1.4-.2-.442.33-.53.958-.2 1.4l3 4c.38.508 1.134.537 1.553.06l7-8c.363-.417.32-1.05-.094-1.413-.417-.363-1.05-.32-1.413.094L8.06 12.414 5.8 9.4z"/></svg>
|
||||
</span>
|
||||
<span>Hover</span>
|
||||
</span>
|
||||
@else
|
||||
<span class="inline-flex items-center rounded-pill border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none opacity-50 mr-2">
|
||||
<span class="inline-flex rounded-pill bg-grey text-white mr-1">
|
||||
<span class="inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none opacity-50 mr-2">
|
||||
<span class="inline-flex rounded-full bg-grey text-white mr-1">
|
||||
<svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 8.586L6.707 5.293c-.39-.39-1.024-.39-1.414 0-.39.39-.39 1.024 0 1.414L8.586 10l-3.293 3.293c-.39.39-.39 1.024 0 1.414.39.39 1.024.39 1.414 0L10 11.414l3.293 3.293c.39.39 1.024.39 1.414 0 .39-.39.39-1.024 0-1.414L11.414 10l3.293-3.293c.39-.39.39-1.024 0-1.414-.39-.39-1.024-.39-1.414 0L10 8.586z"/></svg>
|
||||
</span>
|
||||
<span>Hover</span>
|
||||
|
|
@ -48,15 +48,15 @@
|
|||
@endif
|
||||
|
||||
@if ($focus)
|
||||
<span class="inline-flex items-center rounded-pill border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none mr-2">
|
||||
<span class="inline-flex rounded-pill bg-green-light text-white mr-1">
|
||||
<span class="inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none mr-2">
|
||||
<span class="inline-flex rounded-full bg-green-light text-white mr-1">
|
||||
<svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5.8 9.4c-.33-.442-.958-.53-1.4-.2-.442.33-.53.958-.2 1.4l3 4c.38.508 1.134.537 1.553.06l7-8c.363-.417.32-1.05-.094-1.413-.417-.363-1.05-.32-1.413.094L8.06 12.414 5.8 9.4z"/></svg>
|
||||
</span>
|
||||
<span>Focus</span>
|
||||
</span>
|
||||
@else
|
||||
<span class="inline-flex items-center rounded-pill border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none opacity-50 mr-2">
|
||||
<span class="inline-flex rounded-pill bg-grey text-white mr-1">
|
||||
<span class="inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none opacity-50 mr-2">
|
||||
<span class="inline-flex rounded-full bg-grey text-white mr-1">
|
||||
<svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 8.586L6.707 5.293c-.39-.39-1.024-.39-1.414 0-.39.39-.39 1.024 0 1.414L8.586 10l-3.293 3.293c-.39.39-.39 1.024 0 1.414.39.39 1.024.39 1.414 0L10 11.414l3.293 3.293c.39.39 1.024.39 1.414 0 .39-.39.39-1.024 0-1.414L11.414 10l3.293-3.293c.39-.39.39-1.024 0-1.414-.39-.39-1.024-.39-1.414 0L10 8.586z"/></svg>
|
||||
</span>
|
||||
<span>Focus</span>
|
||||
|
|
|
|||
|
|
@ -1,14 +0,0 @@
|
|||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Base"
|
||||
---
|
||||
|
||||
# Base
|
||||
|
||||
<div class="subnav">
|
||||
<a class="subnav-link" href="#usage">Usage</a>
|
||||
<a class="subnav-link" href="#responsive">Responsive</a>
|
||||
<a class="subnav-link" href="#customizing">Customizing</a>
|
||||
</div>
|
||||
|
||||
Document our base styles.
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Border Radius"
|
||||
---
|
||||
|
||||
# Border Radius
|
||||
|
||||
<div class="subnav">
|
||||
<a class="subnav-link" href="#usage">Usage</a>
|
||||
<a class="subnav-link" href="#responsive">Responsive</a>
|
||||
<a class="subnav-link" href="#customizing">Customizing</a>
|
||||
</div>
|
||||
|
||||
208
docs/source/docs/border-radius.blade.md
Normal file
208
docs/source/docs/border-radius.blade.md
Normal file
|
|
@ -0,0 +1,208 @@
|
|||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Border Radius"
|
||||
---
|
||||
|
||||
# Border Radius
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling the border radius of an element.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => true,
|
||||
'hover' => false,
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
<table class="w-full text-left" style="border-collapse: collapse; table-layout: fixed;">
|
||||
<colgroup>
|
||||
<col class="w-1/6">
|
||||
<col class="w-1/3">
|
||||
<col class="w-1/2">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
|
||||
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
|
||||
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="align-baseline">
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.rounded</td>
|
||||
<td class="w-2/5 p-2 border-t border-smoke font-mono text-xs text-blue-dark">border-radius: .25rem;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Apply a medium border radius to all corners of an element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.rounded-sm</td>
|
||||
<td class="w-2/5 p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">border-radius: .125rem;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a small border radius to all corners of an element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.rounded-lg</td>
|
||||
<td class="w-2/5 p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">border-radius: .5rem;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a large border radius to all corners of an element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.rounded-pill</td>
|
||||
<td class="w-2/5 p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">border-radius: 9999px;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Fully round all corners of an element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.rounded-none</td>
|
||||
<td class="w-2/5 p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">border-radius: 0;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Remove any border radius from all sides of an element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.rounded-t</td>
|
||||
<td class="w-2/5 p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">
|
||||
border-bottom-left-radius: 0;<br>
|
||||
border-bottom-right-radius: 0;
|
||||
</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Only round the top corners of an element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.rounded-r</td>
|
||||
<td class="w-2/5 p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">
|
||||
border-top-left-radius: 0;<br>
|
||||
border-bottom-left-radius: 0;
|
||||
</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Only round the right side corners of an element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.rounded-b</td>
|
||||
<td class="w-2/5 p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">
|
||||
border-top-right-radius: 0;<br>
|
||||
border-top-left-radius: 0;
|
||||
</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Only round the bottom corners of an element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.rounded-l</td>
|
||||
<td class="w-2/5 p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">
|
||||
border-top-right-radius: 0;<br>
|
||||
border-bottom-right-radius: 0;
|
||||
</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Only round the left side corners of an element.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
## Rounded corners
|
||||
|
||||
Use the `.rounded`, `.shadow-sm`, or `.rounded-lg` utilities to apply different border radius sizes to an element.
|
||||
|
||||
@component('_partials.code-sample', ['class' => 'flex justify-around text-sm'])
|
||||
<div class="bg-grey-light mr-3 p-4 rounded-sm">.rounded-sm</div>
|
||||
<div class="bg-grey-light mr-3 p-4 rounded">.rounded</div>
|
||||
<div class="bg-grey-light p-4 rounded-lg">.rounded-lg</div>
|
||||
@slot('code')
|
||||
<div class="rounded-sm"></div>
|
||||
<div class="rounded"></div>
|
||||
<div class="rounded-lg"></div>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
## Pills and circles
|
||||
|
||||
Use the `.rounded-full` utility to create pills and circles.
|
||||
|
||||
@component('_partials.code-sample', ['class' => 'flex items-center justify-around text-sm'])
|
||||
<div class="bg-grey-light mr-3 py-2 px-4 rounded-full">Pill shape</div>
|
||||
<div class="bg-grey-light h-16 w-16 rounded-full flex items-center justify-center">Circle</div>
|
||||
@slot('code')
|
||||
<div class="rounded-full py-2 px-4">Pill shape</div>
|
||||
<div class="rounded-full h-16 w-16 flex items-center justify-center">Circle</div>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
## No rounding
|
||||
|
||||
Use `.rounded-none` to remove an existing border radius from an element.
|
||||
|
||||
This is most commonly used to remove a border radius that was applied at a smaller breakpoint.
|
||||
|
||||
@component('_partials.code-sample', ['class' => 'flex justify-around text-sm py-8'])
|
||||
<div class="p-4 rounded-none bg-grey-light">.rounded-none</div>
|
||||
@slot('code')
|
||||
<div class="rounded-none"></div>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
## Rounding sides separately
|
||||
|
||||
Use the `.rounded-t`, `.rounded-r`, `.rounded-b`, or `.rounded-l` utilities to only round one side of an element.
|
||||
|
||||
@component('_partials.code-sample', ['class' => 'flex justify-around text-sm'])
|
||||
<div class="bg-grey-light mr-3 p-4 rounded-lg rounded-t">.rounded-t</div>
|
||||
<div class="bg-grey-light mr-3 p-4 rounded-lg rounded-r">.rounded-r</div>
|
||||
<div class="bg-grey-light mr-3 p-4 rounded-lg rounded-b">.rounded-b</div>
|
||||
<div class="bg-grey-light p-4 rounded-lg rounded-l">.rounded-l</div>
|
||||
@slot('code')
|
||||
<div class="rounded-t"></div>
|
||||
<div class="rounded-r"></div>
|
||||
<div class="rounded-b"></div>
|
||||
<div class="rounded-t"></div>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
## Responsive
|
||||
|
||||
To control the shadow of an element at a specific breakpoint, add a `{breakpoint}:` prefix to any existing shadow utility. For example, use `md:shadow-lg` to apply the `shadow-lg` utility at only medium screen sizes and above.
|
||||
|
||||
For more information about Tailwind's responsive design features, check out the [Responsive Design](/workflow/responsive-design) documentation.
|
||||
|
||||
@component('_partials.responsive-code-sample')
|
||||
@slot('none')
|
||||
<div class="flex justify-center">
|
||||
<div class="bg-grey w-24 h-24 rounded"></div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('sm')
|
||||
<div class="flex justify-center">
|
||||
<div class="bg-grey w-24 h-24 rounded rounded-t"></div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('md')
|
||||
<div class="flex justify-center">
|
||||
<div class="bg-grey w-24 h-24 rounded-lg rounded-b"></div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('lg')
|
||||
<div class="flex justify-center">
|
||||
<div class="bg-grey w-24 h-24 rounded-none"></div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('xl')
|
||||
<div class="flex justify-center">
|
||||
<div class="bg-grey w-24 h-24 rounded rounded-r"></div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('code')
|
||||
<div class="none:rounded sm:rounded-t md:rounded-lg md:rounded-b lg:rounded-none xl:rounded xl:rounded-b ...">
|
||||
<!-- ... -->
|
||||
</div>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
## Customizing
|
||||
|
||||
By default Tailwind provides five border radius size utilities. You can change, add, or remove these by editing the `borderRadius` section of your Tailwind config.
|
||||
|
||||
If a `default` border radius is provided, it will be used for the non-suffixed `.rounded` utility. Any other keys will be used as suffixes, for example the key `'2'` will create a corresponding `.rounded-2` utility.
|
||||
|
||||
Note that only the different border radius *sizes* can be customized; the utilities for controlling which side to round (like `.rounded-t`) aren't customizable.
|
||||
|
||||
@component('_partials.customized-config', ['key' => 'borderRadius'])
|
||||
- default: '.25rem',
|
||||
+ default: '4px',
|
||||
- 'sm': '.125rem',
|
||||
- 'lg': '.5rem',
|
||||
- 'full': '9999px',
|
||||
+ 'large': '12px',
|
||||
'none': '0',
|
||||
@endcomponent
|
||||
|
|
@ -424,7 +424,7 @@ To get you started, we've provided a generous palette of great looking colors th
|
|||
|
||||
## Customizing
|
||||
|
||||
Tailwind makes it a breeze to modify to default color palette for you project. Remember, you own these colors and nothing will break if you change everything about them.
|
||||
Tailwind makes it a breeze to modify the default color palette for you project. Remember, you own these colors and nothing will break if you change everything about them.
|
||||
|
||||
By default Tailwind defines the entire color palette in a `colors` object at the top of your Tailwind config file. These colors are then assigned to `textColors`, `backgroundColors` and `borderColors`. This approach works well since it provides a consistent naming system across all the utilities. However, you're welcome to modify them independently of one-another as well.
|
||||
|
||||
|
|
@ -465,6 +465,6 @@ You'll notice above that the color palette is also assigned to the `colors` key
|
|||
|
||||
In the default color palette we've used literal color names, like `red`, `green` and `blue`. Another common approach to naming colors is choosing functional names based on how the colors are used, such as `primary`, `secondary`, and `brand`.
|
||||
|
||||
You can also choose different approaches how handle your color variants. In the default color palette we've again used literal variants, like `light`, `dark`, and `darker`. Another common approach here is to use a numeric scale, like `100`, `200` and `300`.
|
||||
You can also choose different approaches to how you name your color variants. In the default color palette we've again used literal variants, like `light`, `dark`, and `darker`. Another common approach here is to use a numeric scale, like `100`, `200` and `300`.
|
||||
|
||||
You should feel free to choose whatever color naming approach makes the most sense to your team.
|
||||
You should feel free to choose whatever color naming approach makes the most sense to you.
|
||||
|
|
@ -65,4 +65,4 @@ title: "Display"
|
|||
</table>
|
||||
</div>
|
||||
|
||||
If you're looking for Flexbox utilities, please see the [Flexbox](/styles/flexbox) page.
|
||||
If you're looking for Flexbox utilities, please see the [Flexbox](/docs/flexbox-display) page.
|
||||
|
|
@ -48,7 +48,7 @@ Here's a bunch of examples:
|
|||
### Pill
|
||||
|
||||
@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
|
||||
<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded-pill">
|
||||
<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded-full">
|
||||
Button
|
||||
</button>
|
||||
@endcomponent
|
||||
|
|
@ -17,9 +17,9 @@ We don't ship alert components because every app has it's own visual style, but
|
|||
</p>
|
||||
</div>
|
||||
<div class="px-6 py-4">
|
||||
<span class="inline-block bg-smoke-light rounded-pill px-3 py-1 text-sm font-semibold text-slate mr-2">#photography</span>
|
||||
<span class="inline-block bg-smoke-light rounded-pill px-3 py-1 text-sm font-semibold text-slate mr-2">#travel</span>
|
||||
<span class="inline-block bg-smoke-light rounded-pill px-3 py-1 text-sm font-semibold text-slate">#winter</span>
|
||||
<span class="inline-block bg-smoke-light rounded-full px-3 py-1 text-sm font-semibold text-slate mr-2">#photography</span>
|
||||
<span class="inline-block bg-smoke-light rounded-full px-3 py-1 text-sm font-semibold text-slate mr-2">#travel</span>
|
||||
<span class="inline-block bg-smoke-light rounded-full px-3 py-1 text-sm font-semibold text-slate">#winter</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -41,7 +41,7 @@ We don't ship alert components because every app has it's own visual style, but
|
|||
</p>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<img class="w-10 h-10 rounded-pill mr-4" src="https://pbs.twimg.com/profile_images/885868801232961537/b1F6H4KC_400x400.jpg" alt="">
|
||||
<img class="w-10 h-10 rounded-full mr-4" src="https://pbs.twimg.com/profile_images/885868801232961537/b1F6H4KC_400x400.jpg" alt="">
|
||||
<div class="text-sm">
|
||||
<p class="text-slate-darker leading-none">Jonathan Reinink</p>
|
||||
<p class="text-slate-light">Aug 18</p>
|
||||
|
|
@ -186,7 +186,7 @@ Use `.content-around` to distribute lines in a flex container such that there is
|
|||
|
||||
To control the alignment of flex content at a specific breakpoint, add a `{breakpoint}:` prefix to any existing utility class. For example, use `md:content-around` to apply the `content-around` utility at only medium screen sizes and above.
|
||||
|
||||
For more information about Tailwind's responsive design features, check out the [Responsive Design](#) documentation.
|
||||
For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation.
|
||||
|
||||
@component('_partials.responsive-code-sample')
|
||||
@slot('none')
|
||||
|
|
@ -126,7 +126,7 @@ Use `.items-baseline` to align items along the flex container's cross axis such
|
|||
|
||||
To control the alignment of flex items at a specific breakpoint, add a `{breakpoint}:` prefix to any existing utility class. For example, use `md:items-center` to apply the `items-center` utility at only medium screen sizes and above.
|
||||
|
||||
For more information about Tailwind's responsive design features, check out the [Responsive Design](#) documentation.
|
||||
For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation.
|
||||
|
||||
@component('_partials.responsive-code-sample')
|
||||
@slot('none')
|
||||
|
|
@ -125,7 +125,7 @@ Use `.self-stretch` to stretch an item to fill the flex container's cross axis,
|
|||
|
||||
To control the alignment of a flex item at a specific breakpoint, add a `{breakpoint}:` prefix to any existing utility class. For example, use `md:self-end` to apply the `self-end` utility at only medium screen sizes and above.
|
||||
|
||||
For more information about Tailwind's responsive design features, check out the [Responsive Design](#) documentation.
|
||||
For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation.
|
||||
|
||||
@component('_partials.responsive-code-sample')
|
||||
@slot('none')
|
||||
|
|
@ -108,7 +108,7 @@ Use `.flex-col-reverse` to position flex items vertically in the opposite direct
|
|||
|
||||
To apply a flex direction utility only at a specific breakpoint, add a `{breakpoint}:` prefix to the existing class name. For example, adding the class `md:flex-row` to an element would apply the `flex-row` utility at medium screen sizes and above.
|
||||
|
||||
For more information about Tailwind's responsive design features, check out the [Responsive Design](#) documentation.
|
||||
For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation.
|
||||
|
||||
@component('_partials.responsive-code-sample')
|
||||
@slot('none')
|
||||
|
|
@ -74,7 +74,7 @@ Use `.inline-flex` to create an inline flex container:
|
|||
|
||||
To control the display property of an element at a specific breakpoint, add a `{breakpoint}:` prefix to any existing display utility class. For example, use `md:inline-flex` to apply the `inline-flex` utility at only medium screen sizes and above.
|
||||
|
||||
For more information about Tailwind's responsive design features, check out the [Responsive Design](#) documentation.
|
||||
For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation.
|
||||
|
||||
@component('_partials.responsive-code-sample')
|
||||
@slot('none')
|
||||
|
|
@ -251,7 +251,7 @@ Use `.flex-no-shrink` to prevent a flex item from shrinking:
|
|||
|
||||
To control how a flex item grows or shrinks at a specific breakpoint, add a `{breakpoint}:` prefix to any existing utility class. For example, use `md:flex-no-shrink` to apply the `flex-no-shrink` utility at only medium screen sizes and above.
|
||||
|
||||
For more information about Tailwind's responsive design features, check out the [Responsive Design](#) documentation.
|
||||
For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation.
|
||||
|
||||
@component('_partials.responsive-code-sample')
|
||||
@slot('none')
|
||||
|
|
@ -126,7 +126,7 @@ Use `.justify-around` to justify items along the flex container's main axis such
|
|||
|
||||
To justify flex items at a specific breakpoint, add a `{breakpoint}:` prefix to any existing utility class. For example, use `md:justify-between` to apply the `justify-between` utility at only medium screen sizes and above.
|
||||
|
||||
For more information about Tailwind's responsive design features, check out the [Responsive Design](#) documentation.
|
||||
For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation.
|
||||
|
||||
@component('_partials.responsive-code-sample')
|
||||
@slot('none')
|
||||
|
|
@ -109,7 +109,7 @@ Use `.flex-wrap-reverse` to wrap flex items in the reverse direction:
|
|||
|
||||
To control how flex items wrap at a specific breakpoint, add a `{breakpoint}:` prefix to any existing utility class. For example, use `md:flex-wrap-reverse` to apply the `flex-wrap-reverse` utility at only medium screen sizes and above.
|
||||
|
||||
For more information about Tailwind's responsive design features, check out the [Responsive Design](#) documentation.
|
||||
For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation.
|
||||
|
||||
@component('_partials.responsive-code-sample')
|
||||
@slot('none')
|
||||
153
docs/source/docs/functions-and-directives.blade.md
Normal file
153
docs/source/docs/functions-and-directives.blade.md
Normal file
|
|
@ -0,0 +1,153 @@
|
|||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Functions & Directives"
|
||||
---
|
||||
|
||||
# Functions & Directives
|
||||
|
||||
Tailwind exposes a few custom CSS functions and directives that can be used in your actual CSS files.
|
||||
|
||||
## `@@tailwind`
|
||||
|
||||
Use the `@@tailwind` directive to insert Tailwind's `reset` and `utilities` styles into your CSS. Here is a full example of how you might do this:
|
||||
|
||||
```less
|
||||
/**
|
||||
* This injects Tailwind's base styles, which is a combination of
|
||||
* Normalize.css and some additional base styles.
|
||||
*
|
||||
* You can see the styles here:
|
||||
* https://github.com/nothingworksinc/tailwindcss/blob/master/css/preflight.css
|
||||
*/
|
||||
@@tailwind reset;
|
||||
|
||||
/**
|
||||
* This injects all of Tailwind's utility classes, generated based on your
|
||||
* config file.
|
||||
*/
|
||||
@@tailwind utilities;
|
||||
```
|
||||
|
||||
## `@@apply`
|
||||
|
||||
Use `@@apply` to mixin the contents of existing classes into your custom CSS.
|
||||
|
||||
This is extremely useful when you find a common utility pattern in your HTML that you'd like to extract to a new component.
|
||||
|
||||
```less
|
||||
.btn {
|
||||
@@apply .font-bold .py-2 .px-4 .rounded;
|
||||
}
|
||||
.btn-blue {
|
||||
@@apply .bg-blue .text-white;
|
||||
}
|
||||
.btn-blue:hover {
|
||||
@@apply .bg-blue-dark;
|
||||
}
|
||||
```
|
||||
|
||||
Note that `@@apply` **will not work** for mixing in hover or responsive variants of another utility. Instead, mixin the plain version of that utility into the `:hover` pseudo-selector or a new media query:
|
||||
|
||||
```less
|
||||
// Won't work:
|
||||
.btn {
|
||||
@@apply .md:inline-block;
|
||||
@@apply .hover:bg-blue;
|
||||
}
|
||||
|
||||
// Do this instead:
|
||||
.btn {
|
||||
&:hover {
|
||||
@@apply .bg-blue;
|
||||
}
|
||||
@@screen md {
|
||||
@@apply .inline-block;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## `@@responsive`
|
||||
|
||||
You can generate responsive versions of your own classes by wrapping their definitions in the `@responsive` directive:
|
||||
|
||||
```less
|
||||
@@responsive {
|
||||
.bg-gradient-brand {
|
||||
background-image: linear-gradient(blue, green);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
This will generate these classes (assuming you haven't changed the default breakpoints):
|
||||
|
||||
```less
|
||||
.bg-gradient-brand {
|
||||
background-image: linear-gradient(blue, green);
|
||||
}
|
||||
|
||||
// ...
|
||||
|
||||
@@media (min-width: 576px) {
|
||||
.sm\:bg-gradient-brand {
|
||||
background-image: linear-gradient(blue, green);
|
||||
}
|
||||
// ...
|
||||
}
|
||||
|
||||
@@media (min-width: 768px) {
|
||||
.md\:bg-gradient-brand {
|
||||
background-image: linear-gradient(blue, green);
|
||||
}
|
||||
// ...
|
||||
}
|
||||
|
||||
@@media (min-width: 992px) {
|
||||
.lg\:bg-gradient-brand {
|
||||
background-image: linear-gradient(blue, green);
|
||||
}
|
||||
// ...
|
||||
}
|
||||
|
||||
@@media (min-width: 1200px) {
|
||||
.xl\:bg-gradient-brand {
|
||||
background-image: linear-gradient(blue, green);
|
||||
}
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
The responsive versions will be added to Tailwind's existing media queries **at the end of your stylesheet.** This makes sure that classes with a responsive prefix always defeat non-responsive classes that are targeting the same CSS property.
|
||||
|
||||
## `@@screen`
|
||||
|
||||
The `@@screen` directive allows you to create media queries that reference your breakpoints by name instead of duplicating their values in your own CSS.
|
||||
|
||||
For example, say you have a `sm` breakpoint at `576px` and you need to write some custom CSS that references this breakpoint.
|
||||
|
||||
Instead of writing a raw media query that duplicates that value like this:
|
||||
|
||||
```less
|
||||
{{ '@media (min-width: 576px) {' }}
|
||||
/* ... */
|
||||
}
|
||||
```
|
||||
|
||||
...you can use the `@@screen` directive and reference the breakpoint by name:
|
||||
|
||||
```less
|
||||
@@screen sm {
|
||||
/* ... */
|
||||
}
|
||||
```
|
||||
|
||||
## `config()`
|
||||
|
||||
While it's recommended to use the `@@apply` directive to compose custom CSS out of existing utility classes whenever possible, some times you need direct access to your Tailwind config values.
|
||||
|
||||
Use the `config()` function to access your Tailwind config values using dot notation:
|
||||
|
||||
```less
|
||||
.error {
|
||||
font-size: config('textSizes.xs');
|
||||
color: config('colors.slate-darker');
|
||||
}
|
||||
146
docs/source/docs/installation.blade.md
Normal file
146
docs/source/docs/installation.blade.md
Normal file
|
|
@ -0,0 +1,146 @@
|
|||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Installation"
|
||||
---
|
||||
|
||||
# Installation
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Quick start guide for installing and configuring Tailwind.
|
||||
</div>
|
||||
|
||||
## 1. Install Tailwind via npm
|
||||
|
||||
Tailwind is [available on npm](https://www.npmjs.com/package/tailwindcss) and can be installed using npm or Yarn.
|
||||
|
||||
<div class="bg-smoke-lighter font-mono text-sm p-4">
|
||||
<div class="text-smoke-darker"># Using npm</div>
|
||||
<div class="text-purple-dark">npm install <span class="text-blue-dark">tailwindcss</span> <span class="text-grey-darker">--save-dev</span></div>
|
||||
<div class="text-smoke-darker mt-6"># Using Yarn</div>
|
||||
<div class="text-purple-dark">yarn add <span class="text-blue-dark">tailwindcss</span> <span class="text-grey-darker">--dev</span></div>
|
||||
</div>
|
||||
|
||||
## 2. Create a Tailwind config file
|
||||
|
||||
Tailwind is configured almost entirely in plain JavaScript. To do this you'll need to generate a Tailwind config file for your project. We recommend creating a `tailwind.js` file in your project's root. We've provided a CLI utility to do this easily:
|
||||
|
||||
<div class="bg-smoke-lighter font-mono text-sm p-4">
|
||||
<div class="text-purple-dark">./node_modules/.bin/tailwind <span class="text-blue-dark">init</span> <span class="text-smoke-darker">[filename]</span></div>
|
||||
</div>
|
||||
|
||||
Alternatively, you can simply copy the default config file [from here](https://github.com/nothingworksinc/tailwindcss/blob/master/defaultConfig.js).
|
||||
|
||||
## 3. Use Tailwind in your CSS
|
||||
|
||||
Use the `@@tailwind` directive to inject Tailwind's `reset` and `utilities` styles into your CSS.
|
||||
|
||||
To avoid specificity issues, we highly recommend structuring your main stylesheet like this:
|
||||
|
||||
```less
|
||||
/**
|
||||
* This injects Tailwind's base styles, which is a combination of
|
||||
* Normalize.css and some additional base styles.
|
||||
*
|
||||
* You can see the styles here:
|
||||
* https://github.com/nothingworksinc/tailwindcss/blob/master/css/preflight.css
|
||||
*/
|
||||
@@tailwind reset;
|
||||
|
||||
/**
|
||||
* Here you would import any custom component classes; stuff that you'd
|
||||
* want loaded *before* the utilities so that the utilities can still
|
||||
* override them.
|
||||
*/
|
||||
// @@import "my-components/foo";
|
||||
// @@import "my-components/bar";
|
||||
|
||||
/**
|
||||
* This injects all of Tailwind's utility classes, generated based on your
|
||||
* config file.
|
||||
*/
|
||||
@@tailwind utilities;
|
||||
|
||||
/**
|
||||
* Here you would add any custom utilities you need that don't come out of the box with Tailwind.
|
||||
*/
|
||||
// .bg-hero-image {
|
||||
// background-image: url('/some/image/file.png');
|
||||
// }
|
||||
```
|
||||
|
||||
## 4. Process your CSS with Tailwind
|
||||
|
||||
### Using Tailwind CLI
|
||||
|
||||
For simple projects or just giving Tailwind a spin, you can use the Tailwind CLI tool to process your CSS:
|
||||
|
||||
<div class="bg-smoke-lighter font-mono text-sm p-4">
|
||||
<div class="text-purple-dark">./node_modules/.bin/tailwind <span class="text-blue-dark">styles.css</span> <span class="text-smoke-darker">[-c ./your-tailwind-config.js] [-o ./output.css]</span></div>
|
||||
</div>
|
||||
|
||||
### Using Tailwind with PostCSS
|
||||
|
||||
For most projects, you'll want to add Tailwind as a PostCSS plugin in your build chain.
|
||||
|
||||
We've included the Tailwind-specific instructions for a few popular tools below, but for instructions on getting started with PostCSS in general, see the [PostCSS documentation](https://github.com/postcss/postcss#usage).
|
||||
|
||||
#### Webpack
|
||||
|
||||
Add `tailwindcss` as a plugin in your `postcss.config.js` file, passing the path to your config file:
|
||||
|
||||
```js
|
||||
var tailwindcss = require('tailwindcss');
|
||||
module.exports = {
|
||||
plugins: [
|
||||
// ...
|
||||
tailwindcss('./path/to/your/tailwind-config.js'),
|
||||
// ...
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
#### Gulp
|
||||
|
||||
Add `tailwindcss` to the list of plugins you pass to [gulp-postcss](https://github.com/postcss/gulp-postcss), passing the path to your config file:
|
||||
|
||||
```js
|
||||
gulp.task('css', function () {
|
||||
var postcss = require('gulp-postcss');
|
||||
var tailwindcss = require('tailwindcss');
|
||||
|
||||
return gulp.src('src/styles.css')
|
||||
// ...
|
||||
.pipe(postcss([
|
||||
// ...
|
||||
tailwindcss('./path/to/your/tailwind-config.js'),
|
||||
// ...
|
||||
]))
|
||||
// ...
|
||||
.pipe(gulp.dest('build/'));
|
||||
});
|
||||
```
|
||||
|
||||
#### Laravel Mix
|
||||
|
||||
If you're writing your project in plain CSS, use Mix's `postCss` method to process your CSS. Include `tailwindcss` as a plugin and pass the path to your config file:
|
||||
|
||||
```js
|
||||
var tailwindcss = require('tailwindcss');
|
||||
|
||||
mix.postCss('resources/assets/css/main.css', 'public/css', [
|
||||
tailwindcss('./path/to/your/tailwind-config.js'),
|
||||
]);
|
||||
```
|
||||
|
||||
If you're using a preprocessor, use the `options` method to add `tailwindcss` as a PostCSS plugin:
|
||||
|
||||
```js
|
||||
var tailwindcss = require('tailwindcss');
|
||||
|
||||
mix.less('source/_assets/less/main.less', 'source/css')
|
||||
.options({
|
||||
postCss: [
|
||||
tailwindcss('./path/to/your/tailwind-config.js'),
|
||||
]
|
||||
})
|
||||
```
|
||||
|
|
@ -53,7 +53,7 @@ You can customize the margin and padding utilities using the `@sizing-scale` var
|
|||
|
||||
<h2 id="responsive">Responsive spacing utilities</h2>
|
||||
|
||||
The spacing utilities can also be used with <a href="/responsive">responsive</a> prefixes:
|
||||
The spacing utilities can also be used with [responsive](/docs/responsive-design) prefixes:
|
||||
|
||||
```html
|
||||
<div class="p-1 sm:p-2 md:p-3 lg:p-4"></div>
|
||||
|
|
@ -51,7 +51,7 @@ The syntax below is combined to create a system for padding and margins. For exa
|
|||
|
||||
<h2 id="responsive">Responsive spacing utilities</h2>
|
||||
|
||||
The spacing utilities can also be used with <a href="/responsive">responsive</a> prefixes:
|
||||
The spacing utilities can also be used with [responsive](/docs/responsive-design) prefixes:
|
||||
|
||||
```html
|
||||
<div class="p-1 sm:p-2 md:p-3 lg:p-4"></div>
|
||||
|
|
@ -79,27 +79,27 @@ For more information about Tailwind's responsive design features, check out the
|
|||
@component('_partials.responsive-code-sample')
|
||||
@slot('none')
|
||||
<div class="text-center">
|
||||
<div class="px-4 py-2 bg-smoke opacity-100 w-24 h-24 rounded-pill inline-block"></div>
|
||||
<div class="px-4 py-2 bg-smoke opacity-100 w-24 h-24 rounded-full inline-block"></div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('sm')
|
||||
<div class="text-center">
|
||||
<div class="px-4 py-2 bg-smoke opacity-75 w-24 h-24 rounded-pill inline-block"></div>
|
||||
<div class="px-4 py-2 bg-smoke opacity-75 w-24 h-24 rounded-full inline-block"></div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('md')
|
||||
<div class="text-center">
|
||||
<div class="px-4 py-2 bg-smoke opacity-50 w-24 h-24 rounded-pill inline-block"></div>
|
||||
<div class="px-4 py-2 bg-smoke opacity-50 w-24 h-24 rounded-full inline-block"></div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('lg')
|
||||
<div class="text-center">
|
||||
<div class="px-4 py-2 bg-smoke opacity-25 w-24 h-24 rounded-pill inline-block"></div>
|
||||
<div class="px-4 py-2 bg-smoke opacity-25 w-24 h-24 rounded-full inline-block"></div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('xl')
|
||||
<div class="text-center">
|
||||
<div class="px-4 py-2 bg-smoke opacity-0 w-24 h-24 rounded-pill inline-block"></div>
|
||||
<div class="px-4 py-2 bg-smoke opacity-0 w-24 h-24 rounded-full inline-block"></div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('code')
|
||||
|
|
@ -54,7 +54,7 @@ You can customize the margin and padding utilities using the `@sizing-scale` var
|
|||
|
||||
<h2 id="responsive">Responsive spacing utilities</h2>
|
||||
|
||||
The spacing utilities can also be used with <a href="/responsive">responsive</a> prefixes:
|
||||
The spacing utilities can also be used with [responsive](/docs/responsive-design) prefixes:
|
||||
|
||||
```html
|
||||
<div class="p-1 sm:p-2 md:p-3 lg:p-4"></div>
|
||||
|
|
@ -212,9 +212,9 @@ Offsets are calculated relative to the viewport and the element *will* act as a
|
|||
<div class="rounded-b overflow-hidden max-w-md mx-auto mt-4 mb-4">
|
||||
<div class="rounded-t border-t border-l border-r border-smoke bg-smoke-light flex px-4 py-3">
|
||||
<div class="mr-6">
|
||||
<span class="inline-block rounded-pill bg-smoke-dark h-3 w-3 mr-1"></span>
|
||||
<span class="inline-block rounded-pill bg-smoke-dark h-3 w-3 mr-1"></span>
|
||||
<span class="inline-block rounded-pill bg-smoke-dark h-3 w-3"></span>
|
||||
<span class="inline-block rounded-full bg-smoke-dark h-3 w-3 mr-1"></span>
|
||||
<span class="inline-block rounded-full bg-smoke-dark h-3 w-3 mr-1"></span>
|
||||
<span class="inline-block rounded-full bg-smoke-dark h-3 w-3"></span>
|
||||
</div>
|
||||
<div class="flex-1 bg-white border border-smoke rounded mr-4"></div>
|
||||
</div>
|
||||
|
|
@ -270,7 +270,7 @@ Offsets are calculated relative to the viewport and the element *will* act as a
|
|||
|
||||
Use the `.pin{-edge?}` utilities to anchor absolutely positioned elements against any of the edges of the nearest positioned parent.
|
||||
|
||||
Combined with Tailwind's [padding utilities](#), you'll probably find that these are all you need to precisely control absolutely positioned elements.
|
||||
Combined with Tailwind's [padding utilities](/docs/padding), you'll probably find that these are all you need to precisely control absolutely positioned elements.
|
||||
|
||||
<div class="flex items-start mt-8 text-sm leading-none mb-8">
|
||||
<div class="pr-12">
|
||||
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
|
|
@ -60,21 +60,47 @@ title: "Shadows"
|
|||
</table>
|
||||
</div>
|
||||
|
||||
Box shadows can be applied using the `.shadow-{size}` utilities. By default these are a size scale, where the smaller sizes represent more shallow shadows, and larger sizes represent deeper shadows. If you use the `.shadow` utility without a suffix, you'll get the default shadow.
|
||||
## Outer shadow
|
||||
|
||||
Use the `.shadow`, `.shadow-md`, or `.shadow-lg` utilities to apply different sized outer box shadows to an element.
|
||||
|
||||
@component('_partials.code-sample', ['class' => 'flex justify-around text-sm py-8'])
|
||||
<div class="mr-3 p-4 bg-smoke-lighter shadow-inner">.shadow-inner</div>
|
||||
<div class="mr-3 p-4 shadow">.shadow</div>
|
||||
<div class="mr-3 p-4 shadow-md">.shadow-md</div>
|
||||
<div class="mr-3 p-4 shadow-lg">.shadow-lg</div>
|
||||
<div class="p-4 shadow-lg">.shadow-lg</div>
|
||||
@slot('code')
|
||||
<div class="shadow-inner"></div>
|
||||
<div class="shadow"></div>
|
||||
<div class="shadow-md"></div>
|
||||
<div class="shadow-lg"></div>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
## Inner shadow
|
||||
|
||||
Use the `.shadow-inner` utility to apply a subtle inset box shadow to an element.
|
||||
|
||||
This can be useful for things like form controls or wells.
|
||||
|
||||
@component('_partials.code-sample', ['class' => 'flex justify-around text-sm py-8'])
|
||||
<div class="p-4 bg-smoke-lighter shadow-inner">.shadow-inner</div>
|
||||
@slot('code')
|
||||
<div class="shadow-inner"></div>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
## No shadow
|
||||
|
||||
Use `.shadow-none` to remove an existing box shadow from an element.
|
||||
|
||||
This is most commonly used to remove a shadow that was applied at a smaller breakpoint.
|
||||
|
||||
@component('_partials.code-sample', ['class' => 'flex justify-around text-sm py-8'])
|
||||
<div class="p-4 shadow-none bg-grey-light">.shadow-none</div>
|
||||
@slot('code')
|
||||
<div class="shadow-none"></div>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
## Responsive
|
||||
|
||||
To control the shadow of an element at a specific breakpoint, add a `{breakpoint}:` prefix to any existing shadow utility. For example, use `md:shadow-lg` to apply the `shadow-lg` utility at only medium screen sizes and above.
|
||||
|
|
@ -84,27 +110,27 @@ For more information about Tailwind's responsive design features, check out the
|
|||
@component('_partials.responsive-code-sample')
|
||||
@slot('none')
|
||||
<div class="flex justify-center">
|
||||
<div class="shadow px-4 py-2 bg-smoke-lighter opacity-100 w-24 h-24 rounded-pill"></div>
|
||||
<div class="shadow px-4 py-2 bg-smoke-lighter opacity-100 w-24 h-24 rounded-full"></div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('sm')
|
||||
<div class="flex justify-center">
|
||||
<div class="shadow-md px-4 py-2 bg-smoke-lighter opacity-100 w-24 h-24 rounded-pill"></div>
|
||||
<div class="shadow-md px-4 py-2 bg-smoke-lighter opacity-100 w-24 h-24 rounded-full"></div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('md')
|
||||
<div class="flex justify-center">
|
||||
<div class="shadow-lg px-4 py-2 bg-smoke-lighter opacity-100 w-24 h-24 rounded-pill"></div>
|
||||
<div class="shadow-lg px-4 py-2 bg-smoke-lighter opacity-100 w-24 h-24 rounded-full"></div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('lg')
|
||||
<div class="flex justify-center">
|
||||
<div class="shadow-inner px-4 py-2 bg-smoke-lighter opacity-100 w-24 h-24 rounded-pill"></div>
|
||||
<div class="shadow-inner px-4 py-2 bg-smoke-lighter opacity-100 w-24 h-24 rounded-full"></div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('xl')
|
||||
<div class="flex justify-center">
|
||||
<div class="shadow-none px-4 py-2 bg-smoke-lighter opacity-100 w-24 h-24 rounded-pill"></div>
|
||||
<div class="shadow-none px-4 py-2 bg-smoke-lighter opacity-100 w-24 h-24 rounded-full"></div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('code')
|
||||
|
|
@ -116,7 +142,7 @@ For more information about Tailwind's responsive design features, check out the
|
|||
|
||||
## Customizing
|
||||
|
||||
By default Tailwind provides three drop shadow utilities, one inner shadow utility, and a utility for removing existing shadows. You change, add, or remove these by editing the `shadows` section of your Tailwind config.
|
||||
By default Tailwind provides three drop shadow utilities, one inner shadow utility, and a utility for removing existing shadows. You can change, add, or remove these by editing the `shadows` section of your Tailwind config.
|
||||
|
||||
If a `default` shadow is provided, it will be used for the non-suffixed `.shadow` utility. Any other keys will be used as suffixes, for example the key `'2'` will create a corresponding `.shadow-2` utility.
|
||||
|
||||
|
|
@ -52,7 +52,7 @@ title: "Visibility"
|
|||
Use `.visible` to make an element visible. This will typically be used as a reset when using the `.invisible` utility.
|
||||
|
||||
@component('_partials.code-sample', ['class' => 'flex justify-center'])
|
||||
<div class="visible bg-smoke w-24 h-24 rounded-pill"></div>
|
||||
<div class="visible bg-smoke w-24 h-24 rounded-full"></div>
|
||||
@endcomponent
|
||||
|
||||
### Invisible
|
||||
|
|
@ -60,7 +60,7 @@ Use `.visible` to make an element visible. This will typically be used as a rese
|
|||
Use `.invisible` to hide an element, but still maintain it's space.
|
||||
|
||||
@component('_partials.code-sample', ['class' => 'flex justify-center'])
|
||||
<div class="invisible bg-smoke w-24 h-24 rounded-pill"></div>
|
||||
<div class="invisible bg-smoke w-24 h-24 rounded-full"></div>
|
||||
@endcomponent
|
||||
|
||||
|
||||
|
|
@ -73,27 +73,27 @@ For more information about Tailwind's responsive design features, check out the
|
|||
@component('_partials.responsive-code-sample')
|
||||
@slot('none')
|
||||
<div class="flex justify-center">
|
||||
<div class="visible bg-smoke w-24 h-24 rounded-pill"></div>
|
||||
<div class="visible bg-smoke w-24 h-24 rounded-full"></div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('sm')
|
||||
<div class="flex justify-center">
|
||||
<div class="invisible bg-smoke w-24 h-24 rounded-pill"></div>
|
||||
<div class="invisible bg-smoke w-24 h-24 rounded-full"></div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('md')
|
||||
<div class="flex justify-center">
|
||||
<div class="visible bg-smoke w-24 h-24 rounded-pill"></div>
|
||||
<div class="visible bg-smoke w-24 h-24 rounded-full"></div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('lg')
|
||||
<div class="flex justify-center">
|
||||
<div class="invisible bg-smoke w-24 h-24 rounded-pill"></div>
|
||||
<div class="invisible bg-smoke w-24 h-24 rounded-full"></div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('xl')
|
||||
<div class="flex justify-center">
|
||||
<div class="visible bg-smoke w-24 h-24 rounded-pill"></div>
|
||||
<div class="visible bg-smoke w-24 h-24 rounded-full"></div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('code')
|
||||
|
|
@ -1,114 +0,0 @@
|
|||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Functions & Directives"
|
||||
---
|
||||
|
||||
# Functions & Directives
|
||||
|
||||
Tailwind exposes a few CSS functions and directives that can be used in your actual CSS files.
|
||||
|
||||
## @tailwind
|
||||
|
||||
Use the `@tailwind` directive to insert the Tailwind reset styles and utilities into your CSS file. Here is a full example of how you might do this:
|
||||
|
||||
```less
|
||||
/**
|
||||
* This injects Tailwind's base styles, which is a combination of
|
||||
* Normalize.css and some additional base styles.
|
||||
*
|
||||
* You can see the styles here:
|
||||
* https://github.com/nothingworksinc/tailwindcss/blob/master/css/preflight.css
|
||||
*/
|
||||
@tailwind reset;
|
||||
|
||||
/**
|
||||
* Here you would import any custom component classes; stuff that you'd
|
||||
* want loaded *before* the utilities so that the utilities can still
|
||||
* override them.
|
||||
*/
|
||||
@import "my-components/foo";
|
||||
@import "my-components/bar";
|
||||
|
||||
/**
|
||||
* This injects all of Tailwind's utility classes, generated based on your
|
||||
* config file.
|
||||
*/
|
||||
@tailwind utilities;
|
||||
|
||||
/**
|
||||
* Here you would add any custom utilities you need that don't come out of the box with Tailwind.
|
||||
*/
|
||||
.bg-hero-image {
|
||||
background-image: url('/some/image/file.png');
|
||||
}
|
||||
```
|
||||
|
||||
## @responsive
|
||||
|
||||
You can generate responsive versions of your own utilities by wrapping their definitions in the `@responsive` directive:
|
||||
|
||||
```less
|
||||
@responsive {
|
||||
.bg-gradient-brand {
|
||||
background-image: linear-gradient(blue, green);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
This will generate these classes (assuming you haven't changed the default breakpoints):
|
||||
|
||||
```less
|
||||
.bg-gradient-brand {
|
||||
background-image: linear-gradient(blue, green);
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
.sm\:bg-gradient-brand {
|
||||
background-image: linear-gradient(blue, green);
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.md\:bg-gradient-brand {
|
||||
background-image: linear-gradient(blue, green);
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.lg\:bg-gradient-brand {
|
||||
background-image: linear-gradient(blue, green);
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.xl\:bg-gradient-brand {
|
||||
background-image: linear-gradient(blue, green);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## @screen
|
||||
|
||||
Say you have a `sm` breakpoint at `576px`, and you need to write some custom CSS that references this breakpoint.
|
||||
|
||||
Instead of duplicating the values like this:
|
||||
|
||||
```less
|
||||
@media (min-width: 576px) {
|
||||
/* ... */
|
||||
}
|
||||
```
|
||||
|
||||
...you can use the `@screen` directive and pass the breakpoint name:
|
||||
|
||||
```less
|
||||
@screen sm {
|
||||
/* ... */
|
||||
}
|
||||
```
|
||||
|
||||
## config()
|
||||
|
||||
With all your variables defined in your JavaScript-based Tailwind config file, you may be wondering how you access those values in your custom CSS. This can be done using the `config()` helper function. Here is an example:
|
||||
|
||||
```less
|
||||
.error {
|
||||
font-size: config('textSizes.xs');
|
||||
color: config('colors.slate-darker');
|
||||
}
|
||||
|
|
@ -1,89 +0,0 @@
|
|||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Installation"
|
||||
---
|
||||
|
||||
# Installation
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Quick start guide for installing and configuring Tailwind.
|
||||
</div>
|
||||
|
||||
## 1. Install the dependency
|
||||
|
||||
Tailwind is [available on npm](https://www.npmjs.com/package/tailwindcss) and can be installed using npm or Yarn.
|
||||
|
||||
<div class="bg-smoke-lighter font-mono text-sm p-4">
|
||||
<div class="text-smoke-darker"># Using npm</div>
|
||||
<div class="text-purple-dark">npm install <span class="text-blue-dark">tailwindcss</span></div>
|
||||
<div class="text-smoke-darker mt-6"># Using Yarn</div>
|
||||
<div class="text-purple-dark">yarn install <span class="text-blue-dark">tailwindcss</span></div>
|
||||
</div>
|
||||
|
||||
## 2. Create a Tailwind config file
|
||||
|
||||
Tailwind is configured almost entirely in plain JavaScript. To do this you'll need to generate a Tailwind config file for your project. We recommend creating a `tailwind.js` file in your project's root. We've provided a CLI utility to do this easily:
|
||||
|
||||
<div class="bg-smoke-lighter font-mono text-sm p-4">
|
||||
<div class="text-purple-dark">./node_modules/.bin/tailwind <span class="text-blue-dark">init</span> <span class="text-smoke-darker">[filename]</span></div>
|
||||
</div>
|
||||
|
||||
Alternatively, you can simply copy the default config file [from here](https://github.com/nothingworksinc/tailwindcss/blob/master/defaultConfig.js).
|
||||
|
||||
## 3. Add Tailwind to your CSS
|
||||
|
||||
Next, you need to add Tailwind to your main stylesheet. This can be plain CSS, Less, Sass, Stylus, or something else. There order here is important, so please follow this structure:
|
||||
|
||||
```less
|
||||
/**
|
||||
* This injects Tailwind's base styles, which is a combination of
|
||||
* Normalize.css and some additional base styles.
|
||||
*
|
||||
* You can see the styles here:
|
||||
* https://github.com/nothingworksinc/tailwindcss/blob/master/css/preflight.css
|
||||
*/
|
||||
@tailwind reset;
|
||||
|
||||
/**
|
||||
* Here you would import any custom component classes; stuff that you'd
|
||||
* want loaded *before* the utilities so that the utilities can still
|
||||
* override them.
|
||||
*/
|
||||
@import "my-components/foo";
|
||||
@import "my-components/bar";
|
||||
|
||||
/**
|
||||
* This injects all of Tailwind's utility classes, generated based on your
|
||||
* config file.
|
||||
*/
|
||||
@tailwind utilities;
|
||||
|
||||
/**
|
||||
* Here you would add any custom utilities you need that don't come out of the box with Tailwind.
|
||||
*/
|
||||
.bg-hero-image {
|
||||
background-image: url('/some/image/file.png');
|
||||
}
|
||||
```
|
||||
|
||||
## 4. Add Tailwind to your build process
|
||||
|
||||
Finally, you'll need to add Tailwind to your build process. Fair warning: this can be the trickiest step. For simple projects you can use the Tailwind CLI tool to generate your CSS:
|
||||
|
||||
<div class="bg-smoke-lighter font-mono text-sm p-4">
|
||||
<div class="text-purple-dark">./node_modules/.bin/tailwind <span class="text-blue-dark">styles.css</span> <span class="text-smoke-darker">[-c ./custom-config.js] [-o ./output.css]</span></div>
|
||||
</div>
|
||||
|
||||
For most projects, you'll want to add Tailwind as a PostCSS plugin in your build chain, passing your config object as a parameter. Here's an example using [Laravel Mix](https://laravel.com/docs/5.5/mix):
|
||||
|
||||
```js
|
||||
const mix = require('laravel-mix');
|
||||
const tailwind = require('tailwindcss');
|
||||
|
||||
mix.less('resources/assets/less/app.less', 'public/css')
|
||||
.options({
|
||||
postCss: [
|
||||
tailwind(require('./path/to/your/tailwind/config.js'))
|
||||
]
|
||||
});
|
||||
```
|
||||
12033
docs/source/js/app.js
12033
docs/source/js/app.js
File diff suppressed because it is too large
Load diff
|
|
@ -3,12 +3,18 @@ const tailwind = require('./../lib/index.js')
|
|||
const config = require('./tailwind.js')
|
||||
const fs = require('fs')
|
||||
|
||||
|
||||
fs.writeFileSync('./tailwind.json', JSON.stringify(config))
|
||||
|
||||
mix.js('source/_assets/js/app.js', 'source/js')
|
||||
mix.setPublicPath('source')
|
||||
|
||||
mix
|
||||
.js('source/_assets/js/nav.js', 'source/js')
|
||||
.js('source/_assets/js/app.js', 'source/js')
|
||||
.less('source/_assets/less/main.less', 'source/css')
|
||||
.options({
|
||||
postCss: [
|
||||
tailwind('tailwind.js'),
|
||||
]
|
||||
})
|
||||
.version()
|
||||
|
|
|
|||
|
|
@ -1214,6 +1214,14 @@ cli-usage@^0.1.1:
|
|||
marked "^0.3.6"
|
||||
marked-terminal "^1.6.2"
|
||||
|
||||
clipboard@^1.5.5:
|
||||
version "1.7.1"
|
||||
resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-1.7.1.tgz#360d6d6946e99a7a1fef395e42ba92b5e9b5a16b"
|
||||
dependencies:
|
||||
good-listener "^1.2.2"
|
||||
select "^1.1.2"
|
||||
tiny-emitter "^2.0.0"
|
||||
|
||||
cliui@^2.1.0:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/cliui/-/cliui-2.1.0.tgz#4b475760ff80264c762c3a1719032e91c7fea0d1"
|
||||
|
|
@ -1856,6 +1864,10 @@ delayed-stream@~1.0.0:
|
|||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
|
||||
|
||||
delegate@^3.1.2:
|
||||
version "3.1.3"
|
||||
resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.1.3.tgz#9a8251a777d7025faa55737bc3b071742127a9fd"
|
||||
|
||||
delegates@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
|
||||
|
|
@ -2722,6 +2734,12 @@ glogg@^1.0.0:
|
|||
dependencies:
|
||||
sparkles "^1.0.0"
|
||||
|
||||
good-listener@^1.2.2:
|
||||
version "1.2.2"
|
||||
resolved "https://registry.yarnpkg.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50"
|
||||
dependencies:
|
||||
delegate "^3.1.2"
|
||||
|
||||
got@^5.0.0:
|
||||
version "5.7.1"
|
||||
resolved "https://registry.yarnpkg.com/got/-/got-5.7.1.tgz#5f81635a61e4a6589f180569ea4e381680a51f35"
|
||||
|
|
@ -5237,6 +5255,12 @@ prettier@^1.7.0:
|
|||
version "1.7.4"
|
||||
resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.7.4.tgz#5e8624ae9363c80f95ec644584ecdf55d74f93fa"
|
||||
|
||||
prismjs@^1.8.3:
|
||||
version "1.8.3"
|
||||
resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.8.3.tgz#4a3d140be5f2614a8987ca2330733a40d8ad207b"
|
||||
optionalDependencies:
|
||||
clipboard "^1.5.5"
|
||||
|
||||
private@^0.1.6, private@^0.1.7, private@~0.1.5:
|
||||
version "0.1.7"
|
||||
resolved "https://registry.yarnpkg.com/private/-/private-0.1.7.tgz#68ce5e8a1ef0a23bb570cc28537b5332aba63ef1"
|
||||
|
|
@ -5720,6 +5744,10 @@ select-hose@^2.0.0:
|
|||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
|
||||
|
||||
select@^1.1.2:
|
||||
version "1.1.2"
|
||||
resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
|
||||
|
||||
selfsigned@^1.9.1:
|
||||
version "1.10.1"
|
||||
resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-1.10.1.tgz#bf8cb7b83256c4551e31347c6311778db99eec52"
|
||||
|
|
@ -6450,6 +6478,10 @@ timers-browserify@^2.0.2:
|
|||
dependencies:
|
||||
setimmediate "^1.0.4"
|
||||
|
||||
tiny-emitter@^2.0.0:
|
||||
version "2.0.2"
|
||||
resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.0.2.tgz#82d27468aca5ade8e5fd1e6d22b57dd43ebdfb7c"
|
||||
|
||||
to-absolute-glob@^0.1.1:
|
||||
version "0.1.1"
|
||||
resolved "https://registry.yarnpkg.com/to-absolute-glob/-/to-absolute-glob-0.1.1.tgz#1cdfa472a9ef50c239ee66999b662ca0eb39937f"
|
||||
|
|
|
|||
|
|
@ -38,10 +38,8 @@
|
|||
"fs-extra": "^4.0.2",
|
||||
"lodash": "^4.17.4",
|
||||
"nodemon": "^1.11.0",
|
||||
"normalize.css": "^7.0.0",
|
||||
"postcss": "^6.0.9",
|
||||
"postcss-functions": "^3.0.0",
|
||||
"postcss-import": "^11.0.0",
|
||||
"stylefmt": "^6.0.0"
|
||||
},
|
||||
"browserslist": [
|
||||
|
|
|
|||
|
|
@ -1,57 +1,32 @@
|
|||
import _ from 'lodash'
|
||||
import defineClass from '../util/defineClass'
|
||||
import defineClasses from '../util/defineClasses'
|
||||
|
||||
function defaultRounded(radius) {
|
||||
function sideVariants() {
|
||||
return defineClasses({
|
||||
'rounded': {
|
||||
'border-radius': `${radius}`,
|
||||
},
|
||||
'rounded-t': {
|
||||
'border-top-left-radius': `${radius}`,
|
||||
'border-top-right-radius': `${radius}`,
|
||||
'border-bottom-right-radius': '0',
|
||||
'border-bottom-left-radius': '0',
|
||||
},
|
||||
'rounded-r': {
|
||||
'border-top-right-radius': `${radius}`,
|
||||
'border-bottom-right-radius': `${radius}`,
|
||||
'border-bottom-left-radius': '0',
|
||||
'border-top-left-radius': '0',
|
||||
},
|
||||
'rounded-b': {
|
||||
'border-bottom-right-radius': `${radius}`,
|
||||
'border-bottom-left-radius': `${radius}`,
|
||||
'border-top-left-radius': '0',
|
||||
'border-top-right-radius': '0',
|
||||
},
|
||||
'rounded-l': {
|
||||
'border-bottom-left-radius': `${radius}`,
|
||||
'border-top-left-radius': `${radius}`,
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
function roundedVariant(modifier, radius) {
|
||||
return defineClasses({
|
||||
[`rounded-${modifier}`]: {
|
||||
'border-radius': `${radius}`,
|
||||
},
|
||||
[`rounded-t-${modifier}`]: {
|
||||
'border-top-left-radius': `${radius}`,
|
||||
'border-top-right-radius': `${radius}`,
|
||||
},
|
||||
[`rounded-r-${modifier}`]: {
|
||||
'border-top-right-radius': `${radius}`,
|
||||
'border-bottom-right-radius': `${radius}`,
|
||||
},
|
||||
[`rounded-b-${modifier}`]: {
|
||||
'border-bottom-right-radius': `${radius}`,
|
||||
'border-bottom-left-radius': `${radius}`,
|
||||
},
|
||||
[`rounded-l-${modifier}`]: {
|
||||
'border-bottom-left-radius': `${radius}`,
|
||||
'border-top-left-radius': `${radius}`,
|
||||
'border-top-right-radius': '0',
|
||||
'border-bottom-right-radius': '0',
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
module.exports = function({ borderRadius }) {
|
||||
return _.flatten([
|
||||
defaultRounded(borderRadius.default),
|
||||
..._.map(_.omit(borderRadius, 'default'), (radius, modifier) => roundedVariant(modifier, radius)),
|
||||
])
|
||||
return _(borderRadius).map((radius, modifier) => {
|
||||
return defineClass(modifier === 'default' ? 'rounded' : `rounded-${modifier}`, {
|
||||
'border-radius': radius,
|
||||
})
|
||||
}).concat(sideVariants()).value()
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import functions from 'postcss-functions'
|
|||
export default function(options) {
|
||||
return functions({
|
||||
functions: {
|
||||
tailwind: function (path) {
|
||||
config: function (path) {
|
||||
return _.get(options, _.trim(path, `'"`))
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,24 +1,13 @@
|
|||
import fs from 'fs'
|
||||
import postcss from 'postcss'
|
||||
import postcssImport from 'postcss-import'
|
||||
|
||||
export default function(options) {
|
||||
return function (css) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const promises = []
|
||||
|
||||
css.walkAtRules('tailwind', atRule => {
|
||||
if (atRule.params === 'reset') {
|
||||
promises.push(postcssImport.process(postcss.parse(fs.readFileSync(`${__dirname}/../../css/preflight.css`, {
|
||||
encoding: 'utf8'
|
||||
}))).then(result => {
|
||||
atRule.before(result.root)
|
||||
atRule.remove()
|
||||
}))
|
||||
}
|
||||
})
|
||||
|
||||
Promise.all(promises).then(resolve)
|
||||
css.walkAtRules('tailwind', atRule => {
|
||||
if (atRule.params === 'reset') {
|
||||
atRule.before(postcss.parse(fs.readFileSync(`${__dirname}/../../css/preflight.css`, 'utf8')))
|
||||
atRule.remove()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
|
|||
21
yarn.lock
21
yarn.lock
|
|
@ -2857,10 +2857,6 @@ normalize-selector@^0.2.0:
|
|||
version "0.2.0"
|
||||
resolved "https://registry.yarnpkg.com/normalize-selector/-/normalize-selector-0.2.0.tgz#d0b145eb691189c63a78d201dc4fdb1293ef0c03"
|
||||
|
||||
normalize.css@^7.0.0:
|
||||
version "7.0.0"
|
||||
resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-7.0.0.tgz#abfb1dd82470674e0322b53ceb1aaf412938e4bf"
|
||||
|
||||
npm-run-path@^2.0.0:
|
||||
version "2.0.2"
|
||||
resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
|
||||
|
|
@ -3094,15 +3090,6 @@ postcss-functions@^3.0.0:
|
|||
postcss "^6.0.9"
|
||||
postcss-value-parser "^3.3.0"
|
||||
|
||||
postcss-import@^11.0.0:
|
||||
version "11.0.0"
|
||||
resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-11.0.0.tgz#a962e2df82d3bc5a6da6a386841747204f41ef5b"
|
||||
dependencies:
|
||||
postcss "^6.0.1"
|
||||
postcss-value-parser "^3.2.3"
|
||||
read-cache "^1.0.0"
|
||||
resolve "^1.1.7"
|
||||
|
||||
postcss-less@^0.14.0:
|
||||
version "0.14.0"
|
||||
resolved "https://registry.yarnpkg.com/postcss-less/-/postcss-less-0.14.0.tgz#c631b089c6cce422b9a10f3a958d2bedd3819324"
|
||||
|
|
@ -3248,12 +3235,6 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.1.7:
|
|||
minimist "^1.2.0"
|
||||
strip-json-comments "~2.0.1"
|
||||
|
||||
read-cache@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
|
||||
dependencies:
|
||||
pify "^2.3.0"
|
||||
|
||||
read-file-stdin@^0.2.1:
|
||||
version "0.2.1"
|
||||
resolved "https://registry.yarnpkg.com/read-file-stdin/-/read-file-stdin-0.2.1.tgz#25eccff3a153b6809afacb23ee15387db9e0ee61"
|
||||
|
|
@ -3443,7 +3424,7 @@ resolve@1.1.7:
|
|||
version "1.1.7"
|
||||
resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
|
||||
|
||||
resolve@^1.1.7, resolve@^1.3.2, resolve@~1.4.0:
|
||||
resolve@^1.3.2, resolve@~1.4.0:
|
||||
version "1.4.0"
|
||||
resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.4.0.tgz#a75be01c53da25d934a98ebd0e4c4a7312f92a86"
|
||||
dependencies:
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue