mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
Tons of docs scaffolding and structuring
This commit is contained in:
Adam Wathan
parent
e2754a12f5
commit
a4ac5c704f
410
dist/tailwind.css
vendored
410
dist/tailwind.css
vendored
@ -1485,42 +1485,6 @@ button,
|
||||
border-left: 8px solid #c5ced6;
|
||||
}
|
||||
|
||||
.border-light,
|
||||
.hover\:border-light:hover,
|
||||
.hover\:border-light:focus {
|
||||
border-color: #ffffff;
|
||||
}
|
||||
|
||||
.border-light-soft,
|
||||
.hover\:border-light-soft:hover,
|
||||
.hover\:border-light-soft:focus {
|
||||
border-color: #f7f9fa;
|
||||
}
|
||||
|
||||
.border-light-softer,
|
||||
.hover\:border-light-softer:hover,
|
||||
.hover\:border-light-softer:focus {
|
||||
border-color: #f0f2f5;
|
||||
}
|
||||
|
||||
.border-dark,
|
||||
.hover\:border-dark:hover,
|
||||
.hover\:border-dark:focus {
|
||||
border-color: #919eab;
|
||||
}
|
||||
|
||||
.border-dark-soft,
|
||||
.hover\:border-dark-soft:hover,
|
||||
.hover\:border-dark-soft:focus {
|
||||
border-color: #c5ced6;
|
||||
}
|
||||
|
||||
.border-dark-softer,
|
||||
.hover\:border-dark-softer:hover,
|
||||
.hover\:border-dark-softer:focus {
|
||||
border-color: #dfe3e8;
|
||||
}
|
||||
|
||||
.border-light-overlay,
|
||||
.hover\:border-light-overlay:hover,
|
||||
.hover\:border-light-overlay:focus {
|
||||
@ -1557,6 +1521,42 @@ button,
|
||||
border-color: hsla(0, 0%, 100%, .35);
|
||||
}
|
||||
|
||||
.border-light,
|
||||
.hover\:border-light:hover,
|
||||
.hover\:border-light:focus {
|
||||
border-color: #ffffff;
|
||||
}
|
||||
|
||||
.border-light-soft,
|
||||
.hover\:border-light-soft:hover,
|
||||
.hover\:border-light-soft:focus {
|
||||
border-color: #f7f9fa;
|
||||
}
|
||||
|
||||
.border-light-softer,
|
||||
.hover\:border-light-softer:hover,
|
||||
.hover\:border-light-softer:focus {
|
||||
border-color: #f0f2f5;
|
||||
}
|
||||
|
||||
.border-dark,
|
||||
.hover\:border-dark:hover,
|
||||
.hover\:border-dark:focus {
|
||||
border-color: #919eab;
|
||||
}
|
||||
|
||||
.border-dark-soft,
|
||||
.hover\:border-dark-soft:hover,
|
||||
.hover\:border-dark-soft:focus {
|
||||
border-color: #c5ced6;
|
||||
}
|
||||
|
||||
.border-dark-softer,
|
||||
.hover\:border-dark-softer:hover,
|
||||
.hover\:border-dark-softer:focus {
|
||||
border-color: #dfe3e8;
|
||||
}
|
||||
|
||||
.border-red-dark,
|
||||
.hover\:border-red-dark:hover,
|
||||
.hover\:border-red-dark:focus {
|
||||
@ -3193,10 +3193,18 @@ button,
|
||||
resize: horizontal;
|
||||
}
|
||||
|
||||
.clickable {
|
||||
.cursor-auto {
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cursor-not-allowed {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.sm\:appearance-none {
|
||||
appearance: none;
|
||||
@ -4083,42 +4091,6 @@ button,
|
||||
border-left: 8px solid #c5ced6;
|
||||
}
|
||||
|
||||
.sm\:border-light,
|
||||
.sm\:hover\:border-light:hover,
|
||||
.sm\:hover\:border-light:focus {
|
||||
border-color: #ffffff;
|
||||
}
|
||||
|
||||
.sm\:border-light-soft,
|
||||
.sm\:hover\:border-light-soft:hover,
|
||||
.sm\:hover\:border-light-soft:focus {
|
||||
border-color: #f7f9fa;
|
||||
}
|
||||
|
||||
.sm\:border-light-softer,
|
||||
.sm\:hover\:border-light-softer:hover,
|
||||
.sm\:hover\:border-light-softer:focus {
|
||||
border-color: #f0f2f5;
|
||||
}
|
||||
|
||||
.sm\:border-dark,
|
||||
.sm\:hover\:border-dark:hover,
|
||||
.sm\:hover\:border-dark:focus {
|
||||
border-color: #919eab;
|
||||
}
|
||||
|
||||
.sm\:border-dark-soft,
|
||||
.sm\:hover\:border-dark-soft:hover,
|
||||
.sm\:hover\:border-dark-soft:focus {
|
||||
border-color: #c5ced6;
|
||||
}
|
||||
|
||||
.sm\:border-dark-softer,
|
||||
.sm\:hover\:border-dark-softer:hover,
|
||||
.sm\:hover\:border-dark-softer:focus {
|
||||
border-color: #dfe3e8;
|
||||
}
|
||||
|
||||
.sm\:border-light-overlay,
|
||||
.sm\:hover\:border-light-overlay:hover,
|
||||
.sm\:hover\:border-light-overlay:focus {
|
||||
@ -4155,6 +4127,42 @@ button,
|
||||
border-color: hsla(0, 0%, 100%, .35);
|
||||
}
|
||||
|
||||
.sm\:border-light,
|
||||
.sm\:hover\:border-light:hover,
|
||||
.sm\:hover\:border-light:focus {
|
||||
border-color: #ffffff;
|
||||
}
|
||||
|
||||
.sm\:border-light-soft,
|
||||
.sm\:hover\:border-light-soft:hover,
|
||||
.sm\:hover\:border-light-soft:focus {
|
||||
border-color: #f7f9fa;
|
||||
}
|
||||
|
||||
.sm\:border-light-softer,
|
||||
.sm\:hover\:border-light-softer:hover,
|
||||
.sm\:hover\:border-light-softer:focus {
|
||||
border-color: #f0f2f5;
|
||||
}
|
||||
|
||||
.sm\:border-dark,
|
||||
.sm\:hover\:border-dark:hover,
|
||||
.sm\:hover\:border-dark:focus {
|
||||
border-color: #919eab;
|
||||
}
|
||||
|
||||
.sm\:border-dark-soft,
|
||||
.sm\:hover\:border-dark-soft:hover,
|
||||
.sm\:hover\:border-dark-soft:focus {
|
||||
border-color: #c5ced6;
|
||||
}
|
||||
|
||||
.sm\:border-dark-softer,
|
||||
.sm\:hover\:border-dark-softer:hover,
|
||||
.sm\:hover\:border-dark-softer:focus {
|
||||
border-color: #dfe3e8;
|
||||
}
|
||||
|
||||
.sm\:border-red-dark,
|
||||
.sm\:hover\:border-red-dark:hover,
|
||||
.sm\:hover\:border-red-dark:focus {
|
||||
@ -5791,9 +5799,17 @@ button,
|
||||
resize: horizontal;
|
||||
}
|
||||
|
||||
.sm\:clickable {
|
||||
.sm\:cursor-auto {
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.sm\:cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sm\:cursor-not-allowed {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@ -6682,42 +6698,6 @@ button,
|
||||
border-left: 8px solid #c5ced6;
|
||||
}
|
||||
|
||||
.md\:border-light,
|
||||
.md\:hover\:border-light:hover,
|
||||
.md\:hover\:border-light:focus {
|
||||
border-color: #ffffff;
|
||||
}
|
||||
|
||||
.md\:border-light-soft,
|
||||
.md\:hover\:border-light-soft:hover,
|
||||
.md\:hover\:border-light-soft:focus {
|
||||
border-color: #f7f9fa;
|
||||
}
|
||||
|
||||
.md\:border-light-softer,
|
||||
.md\:hover\:border-light-softer:hover,
|
||||
.md\:hover\:border-light-softer:focus {
|
||||
border-color: #f0f2f5;
|
||||
}
|
||||
|
||||
.md\:border-dark,
|
||||
.md\:hover\:border-dark:hover,
|
||||
.md\:hover\:border-dark:focus {
|
||||
border-color: #919eab;
|
||||
}
|
||||
|
||||
.md\:border-dark-soft,
|
||||
.md\:hover\:border-dark-soft:hover,
|
||||
.md\:hover\:border-dark-soft:focus {
|
||||
border-color: #c5ced6;
|
||||
}
|
||||
|
||||
.md\:border-dark-softer,
|
||||
.md\:hover\:border-dark-softer:hover,
|
||||
.md\:hover\:border-dark-softer:focus {
|
||||
border-color: #dfe3e8;
|
||||
}
|
||||
|
||||
.md\:border-light-overlay,
|
||||
.md\:hover\:border-light-overlay:hover,
|
||||
.md\:hover\:border-light-overlay:focus {
|
||||
@ -6754,6 +6734,42 @@ button,
|
||||
border-color: hsla(0, 0%, 100%, .35);
|
||||
}
|
||||
|
||||
.md\:border-light,
|
||||
.md\:hover\:border-light:hover,
|
||||
.md\:hover\:border-light:focus {
|
||||
border-color: #ffffff;
|
||||
}
|
||||
|
||||
.md\:border-light-soft,
|
||||
.md\:hover\:border-light-soft:hover,
|
||||
.md\:hover\:border-light-soft:focus {
|
||||
border-color: #f7f9fa;
|
||||
}
|
||||
|
||||
.md\:border-light-softer,
|
||||
.md\:hover\:border-light-softer:hover,
|
||||
.md\:hover\:border-light-softer:focus {
|
||||
border-color: #f0f2f5;
|
||||
}
|
||||
|
||||
.md\:border-dark,
|
||||
.md\:hover\:border-dark:hover,
|
||||
.md\:hover\:border-dark:focus {
|
||||
border-color: #919eab;
|
||||
}
|
||||
|
||||
.md\:border-dark-soft,
|
||||
.md\:hover\:border-dark-soft:hover,
|
||||
.md\:hover\:border-dark-soft:focus {
|
||||
border-color: #c5ced6;
|
||||
}
|
||||
|
||||
.md\:border-dark-softer,
|
||||
.md\:hover\:border-dark-softer:hover,
|
||||
.md\:hover\:border-dark-softer:focus {
|
||||
border-color: #dfe3e8;
|
||||
}
|
||||
|
||||
.md\:border-red-dark,
|
||||
.md\:hover\:border-red-dark:hover,
|
||||
.md\:hover\:border-red-dark:focus {
|
||||
@ -8390,9 +8406,17 @@ button,
|
||||
resize: horizontal;
|
||||
}
|
||||
|
||||
.md\:clickable {
|
||||
.md\:cursor-auto {
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.md\:cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.md\:cursor-not-allowed {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
@ -9281,42 +9305,6 @@ button,
|
||||
border-left: 8px solid #c5ced6;
|
||||
}
|
||||
|
||||
.lg\:border-light,
|
||||
.lg\:hover\:border-light:hover,
|
||||
.lg\:hover\:border-light:focus {
|
||||
border-color: #ffffff;
|
||||
}
|
||||
|
||||
.lg\:border-light-soft,
|
||||
.lg\:hover\:border-light-soft:hover,
|
||||
.lg\:hover\:border-light-soft:focus {
|
||||
border-color: #f7f9fa;
|
||||
}
|
||||
|
||||
.lg\:border-light-softer,
|
||||
.lg\:hover\:border-light-softer:hover,
|
||||
.lg\:hover\:border-light-softer:focus {
|
||||
border-color: #f0f2f5;
|
||||
}
|
||||
|
||||
.lg\:border-dark,
|
||||
.lg\:hover\:border-dark:hover,
|
||||
.lg\:hover\:border-dark:focus {
|
||||
border-color: #919eab;
|
||||
}
|
||||
|
||||
.lg\:border-dark-soft,
|
||||
.lg\:hover\:border-dark-soft:hover,
|
||||
.lg\:hover\:border-dark-soft:focus {
|
||||
border-color: #c5ced6;
|
||||
}
|
||||
|
||||
.lg\:border-dark-softer,
|
||||
.lg\:hover\:border-dark-softer:hover,
|
||||
.lg\:hover\:border-dark-softer:focus {
|
||||
border-color: #dfe3e8;
|
||||
}
|
||||
|
||||
.lg\:border-light-overlay,
|
||||
.lg\:hover\:border-light-overlay:hover,
|
||||
.lg\:hover\:border-light-overlay:focus {
|
||||
@ -9353,6 +9341,42 @@ button,
|
||||
border-color: hsla(0, 0%, 100%, .35);
|
||||
}
|
||||
|
||||
.lg\:border-light,
|
||||
.lg\:hover\:border-light:hover,
|
||||
.lg\:hover\:border-light:focus {
|
||||
border-color: #ffffff;
|
||||
}
|
||||
|
||||
.lg\:border-light-soft,
|
||||
.lg\:hover\:border-light-soft:hover,
|
||||
.lg\:hover\:border-light-soft:focus {
|
||||
border-color: #f7f9fa;
|
||||
}
|
||||
|
||||
.lg\:border-light-softer,
|
||||
.lg\:hover\:border-light-softer:hover,
|
||||
.lg\:hover\:border-light-softer:focus {
|
||||
border-color: #f0f2f5;
|
||||
}
|
||||
|
||||
.lg\:border-dark,
|
||||
.lg\:hover\:border-dark:hover,
|
||||
.lg\:hover\:border-dark:focus {
|
||||
border-color: #919eab;
|
||||
}
|
||||
|
||||
.lg\:border-dark-soft,
|
||||
.lg\:hover\:border-dark-soft:hover,
|
||||
.lg\:hover\:border-dark-soft:focus {
|
||||
border-color: #c5ced6;
|
||||
}
|
||||
|
||||
.lg\:border-dark-softer,
|
||||
.lg\:hover\:border-dark-softer:hover,
|
||||
.lg\:hover\:border-dark-softer:focus {
|
||||
border-color: #dfe3e8;
|
||||
}
|
||||
|
||||
.lg\:border-red-dark,
|
||||
.lg\:hover\:border-red-dark:hover,
|
||||
.lg\:hover\:border-red-dark:focus {
|
||||
@ -10989,9 +11013,17 @@ button,
|
||||
resize: horizontal;
|
||||
}
|
||||
|
||||
.lg\:clickable {
|
||||
.lg\:cursor-auto {
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.lg\:cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.lg\:cursor-not-allowed {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
@ -11880,42 +11912,6 @@ button,
|
||||
border-left: 8px solid #c5ced6;
|
||||
}
|
||||
|
||||
.xl\:border-light,
|
||||
.xl\:hover\:border-light:hover,
|
||||
.xl\:hover\:border-light:focus {
|
||||
border-color: #ffffff;
|
||||
}
|
||||
|
||||
.xl\:border-light-soft,
|
||||
.xl\:hover\:border-light-soft:hover,
|
||||
.xl\:hover\:border-light-soft:focus {
|
||||
border-color: #f7f9fa;
|
||||
}
|
||||
|
||||
.xl\:border-light-softer,
|
||||
.xl\:hover\:border-light-softer:hover,
|
||||
.xl\:hover\:border-light-softer:focus {
|
||||
border-color: #f0f2f5;
|
||||
}
|
||||
|
||||
.xl\:border-dark,
|
||||
.xl\:hover\:border-dark:hover,
|
||||
.xl\:hover\:border-dark:focus {
|
||||
border-color: #919eab;
|
||||
}
|
||||
|
||||
.xl\:border-dark-soft,
|
||||
.xl\:hover\:border-dark-soft:hover,
|
||||
.xl\:hover\:border-dark-soft:focus {
|
||||
border-color: #c5ced6;
|
||||
}
|
||||
|
||||
.xl\:border-dark-softer,
|
||||
.xl\:hover\:border-dark-softer:hover,
|
||||
.xl\:hover\:border-dark-softer:focus {
|
||||
border-color: #dfe3e8;
|
||||
}
|
||||
|
||||
.xl\:border-light-overlay,
|
||||
.xl\:hover\:border-light-overlay:hover,
|
||||
.xl\:hover\:border-light-overlay:focus {
|
||||
@ -11952,6 +11948,42 @@ button,
|
||||
border-color: hsla(0, 0%, 100%, .35);
|
||||
}
|
||||
|
||||
.xl\:border-light,
|
||||
.xl\:hover\:border-light:hover,
|
||||
.xl\:hover\:border-light:focus {
|
||||
border-color: #ffffff;
|
||||
}
|
||||
|
||||
.xl\:border-light-soft,
|
||||
.xl\:hover\:border-light-soft:hover,
|
||||
.xl\:hover\:border-light-soft:focus {
|
||||
border-color: #f7f9fa;
|
||||
}
|
||||
|
||||
.xl\:border-light-softer,
|
||||
.xl\:hover\:border-light-softer:hover,
|
||||
.xl\:hover\:border-light-softer:focus {
|
||||
border-color: #f0f2f5;
|
||||
}
|
||||
|
||||
.xl\:border-dark,
|
||||
.xl\:hover\:border-dark:hover,
|
||||
.xl\:hover\:border-dark:focus {
|
||||
border-color: #919eab;
|
||||
}
|
||||
|
||||
.xl\:border-dark-soft,
|
||||
.xl\:hover\:border-dark-soft:hover,
|
||||
.xl\:hover\:border-dark-soft:focus {
|
||||
border-color: #c5ced6;
|
||||
}
|
||||
|
||||
.xl\:border-dark-softer,
|
||||
.xl\:hover\:border-dark-softer:hover,
|
||||
.xl\:hover\:border-dark-softer:focus {
|
||||
border-color: #dfe3e8;
|
||||
}
|
||||
|
||||
.xl\:border-red-dark,
|
||||
.xl\:hover\:border-red-dark:hover,
|
||||
.xl\:hover\:border-red-dark:focus {
|
||||
@ -13588,9 +13620,17 @@ button,
|
||||
resize: horizontal;
|
||||
}
|
||||
|
||||
.xl\:clickable {
|
||||
.xl\:cursor-auto {
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.xl\:cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.xl\:cursor-not-allowed {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
/*# 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
@ -13,11 +13,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
a, a& {
|
||||
> a, a& {
|
||||
@apply .text-blue;
|
||||
}
|
||||
|
||||
p code, p& code& {
|
||||
> p code, p& code& {
|
||||
@apply .inline-block;
|
||||
@apply .bg-light-soft;
|
||||
@apply .rounded-sm;
|
||||
@ -29,13 +29,13 @@
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
blockquote, blockquote& {
|
||||
> blockquote, blockquote& {
|
||||
@apply .text-em;
|
||||
@apply .text-dark-soft;
|
||||
@apply .text-sm;
|
||||
}
|
||||
|
||||
h1, h1& {
|
||||
> h1, h1& {
|
||||
@apply .mb-4;
|
||||
@apply .leading-none;
|
||||
@apply .text-dark;
|
||||
@ -43,7 +43,7 @@
|
||||
@apply .text-3xl;
|
||||
}
|
||||
|
||||
h2, h2& {
|
||||
> h2, h2& {
|
||||
@apply .mt-16;
|
||||
@apply .mb-8;
|
||||
@apply .text-dark;
|
||||
@ -52,7 +52,7 @@
|
||||
@apply .text-xl;
|
||||
}
|
||||
|
||||
h3, h3& {
|
||||
> h3, h3& {
|
||||
@apply .mt-16;
|
||||
@apply .mb-8;
|
||||
@apply .text-dark;
|
||||
@ -61,28 +61,34 @@
|
||||
@apply .text-lg;
|
||||
}
|
||||
|
||||
p, p& {
|
||||
> p, p&, > blockquote > p {
|
||||
@apply .text-dark-soft;
|
||||
@apply .mt-8;
|
||||
@apply .mb-3;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
> ul, > ol {
|
||||
@apply .text-dark-soft;
|
||||
margin: 0 0 2em;
|
||||
}
|
||||
|
||||
ul {
|
||||
> ul {
|
||||
list-style: disc inside;
|
||||
}
|
||||
|
||||
ol {
|
||||
> ol {
|
||||
list-style: decimal inside;
|
||||
}
|
||||
|
||||
li {
|
||||
> li {
|
||||
@apply .my-2;
|
||||
@apply .text-dark-soft;
|
||||
}
|
||||
|
||||
> :not(pre) > code[class*="language-"], > pre[class*="language-"] {
|
||||
@apply .bg-light-soft;
|
||||
@apply .text-sm;
|
||||
@apply .leading-loose;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+less */
|
||||
/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript */
|
||||
/**
|
||||
* prism.js default theme for JavaScript, CSS and HTML
|
||||
* Based on dabblet (http://dabblet.com)
|
||||
@ -10,6 +10,7 @@ pre[class*="language-"] {
|
||||
color: black;
|
||||
background: none;
|
||||
text-shadow: 0 1px white;
|
||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
@ -25,8 +26,6 @@ pre[class*="language-"] {
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
|
||||
font-size: (13rem / 16rem);
|
||||
}
|
||||
|
||||
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
|
||||
@ -50,17 +49,14 @@ code[class*="language-"]::selection, code[class*="language-"] ::selection {
|
||||
|
||||
/* Code blocks */
|
||||
pre[class*="language-"] {
|
||||
padding: 0.75em 1em;
|
||||
padding: 1em;
|
||||
margin: .5em 0;
|
||||
overflow: auto;
|
||||
@apply .my-4;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
// background: #f5f2f0;
|
||||
@apply .border;
|
||||
@apply .border-dark-softer;
|
||||
@apply .rounded;
|
||||
background: #f5f2f0;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
|
||||
@ -34,7 +34,6 @@
|
||||
<p class="mb-4 text-dark-softer text-uppercase tracking-wide text-medium text-sm">Getting Started</p>
|
||||
<ul>
|
||||
<li class="mb-2"><a class="text-dark-soft" href="{{ $page->baseUrl }}/installation">Installation</a></li>
|
||||
<li class="mb-2"><a class="text-dark-soft" href="{{ $page->baseUrl }}/changelog">Changelog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-8">
|
||||
@ -68,87 +67,91 @@
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-8">
|
||||
<p class="mb-4 text-dark-softer text-uppercase tracking-wide text-medium text-sm">Utilities</p>
|
||||
<p class="mb-4 text-dark-softer text-uppercase tracking-wide text-medium text-sm">Styles</p>
|
||||
<ul class="mb-8">
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/alignment" class="{{ $page->active('/alignment') ? 'text-dark text-medium' : 'text-dark-soft' }}">Alignment</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/appearance" class="{{ $page->active('/appearance') ? 'text-dark text-medium' : 'text-dark-soft' }}">Appearance</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/alignment" class="{{ $page->active('/styles/alignment') ? 'text-dark text-medium' : 'text-dark-soft' }}">Alignment</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/appearance" class="{{ $page->active('/appearance') ? 'text-dark text-medium' : 'text-dark-soft' }}">Appearance</a></li>
|
||||
<li class="mb-2">
|
||||
<a href="{{ $page->baseUrl }}/utilities/backgrounds/color" class="block mb-2 {{ $page->active('/backgrounds/') ? 'text-dark text-medium' : 'text-dark-soft' }}">Backgrounds</a>
|
||||
<a href="{{ $page->baseUrl }}/styles/backgrounds/color" class="block mb-2 {{ $page->active('/backgrounds/') ? 'text-dark text-medium' : 'text-dark-soft' }}">Backgrounds</a>
|
||||
<ul class="pl-4 {{ $page->active('/backgrounds/') ? 'block' : 'hidden' }}">
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/backgrounds/color" class="{{ $page->active('/backgrounds/color') ? 'text-dark text-medium' : 'text-dark-soft' }}">Color</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/backgrounds/position" class="{{ $page->active('/backgrounds/position') ? 'text-dark text-medium' : 'text-dark-soft' }}">Position</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/backgrounds/size" class="{{ $page->active('/backgrounds/size') ? 'text-dark text-medium' : 'text-dark-soft' }}">Size</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/backgrounds/color" class="{{ $page->active('/backgrounds/color') ? 'text-dark text-medium' : 'text-dark-soft' }}">Color</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/backgrounds/position" class="{{ $page->active('/backgrounds/position') ? 'text-dark text-medium' : 'text-dark-soft' }}">Position</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/backgrounds/size" class="{{ $page->active('/backgrounds/size') ? 'text-dark text-medium' : 'text-dark-soft' }}">Size</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/base" class="{{ $page->active('/base') ? 'text-dark text-medium' : 'text-dark-soft' }}">Base</a></li>
|
||||
<li class="mb-2">
|
||||
<a href="{{ $page->baseUrl }}/utilities/borders/base" class="block mb-2 {{ $page->active('/borders/') ? 'text-dark text-medium' : 'text-dark-soft' }}">Borders</a>
|
||||
<a href="{{ $page->baseUrl }}/styles/borders/base" class="block mb-2 {{ $page->active('/borders/') ? 'text-dark text-medium' : 'text-dark-soft' }}">Borders</a>
|
||||
<ul class="pl-4 {{ $page->active('/borders/') ? 'block' : 'hidden' }}">
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/borders/base" class="{{ $page->active('/borders/base') ? 'text-dark text-medium' : 'text-dark-soft' }}">Base</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/borders/color" class="{{ $page->active('/borders/color') ? 'text-dark text-medium' : 'text-dark-soft' }}">Color</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/borders/style" class="{{ $page->active('/borders/style') ? 'text-dark text-medium' : 'text-dark-soft' }}">Style</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/borders/radius" class="{{ $page->active('/borders/radius') ? 'text-dark text-medium' : 'text-dark-soft' }}">Radius</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/borders/base" class="{{ $page->active('/borders/base') ? 'text-dark text-medium' : 'text-dark-soft' }}">Base</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/borders/color" class="{{ $page->active('/borders/color') ? 'text-dark text-medium' : 'text-dark-soft' }}">Color</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/borders/style" class="{{ $page->active('/borders/style') ? 'text-dark text-medium' : 'text-dark-soft' }}">Style</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/borders/radius" class="{{ $page->active('/borders/radius') ? 'text-dark text-medium' : 'text-dark-soft' }}">Radius</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/container" class="{{ $page->active('/container') ? 'text-dark text-medium' : 'text-dark-soft' }}">Container</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/display" class="{{ $page->active('/display') ? 'text-dark text-medium' : 'text-dark-soft' }}">Display</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/flexbox" class="{{ $page->active('/flexbox') ? 'text-dark text-medium' : 'text-dark-soft' }}">Flexbox</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/floats" class="{{ $page->active('/floats') ? 'text-dark text-medium' : 'text-dark-soft' }}">Floats</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/buttons" class="{{ $page->active('/buttons') ? 'text-dark text-medium' : 'text-dark-soft' }}">Buttons</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/container" class="{{ $page->active('/container') ? 'text-dark text-medium' : 'text-dark-soft' }}">Container</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/display" class="{{ $page->active('/display') ? 'text-dark text-medium' : 'text-dark-soft' }}">Display</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/flexbox" class="{{ $page->active('/flexbox') ? 'text-dark text-medium' : 'text-dark-soft' }}">Flexbox</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/floats" class="{{ $page->active('/floats') ? 'text-dark text-medium' : 'text-dark-soft' }}">Floats</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/forms" class="{{ $page->active('/forms') ? 'text-dark text-medium' : 'text-dark-soft' }}">Forms</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/grid" class="{{ $page->active('/grid') ? 'text-dark text-medium' : 'text-dark-soft' }}">Grid</a></li>
|
||||
<li class="mb-2">
|
||||
<a href="{{ $page->baseUrl }}/utilities/interactivity/cursor" class="block mb-2 {{ $page->active('/interactivity/') ? 'text-dark text-medium' : 'text-dark-soft' }}">Interactivity</a>
|
||||
<a href="{{ $page->baseUrl }}/styles/interactivity/cursor" class="block mb-2 {{ $page->active('/interactivity/') ? 'text-dark text-medium' : 'text-dark-soft' }}">Interactivity</a>
|
||||
<ul class="pl-4 {{ $page->active('/interactivity/') ? 'block' : 'hidden' }}">
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/interactivity/cursor" class="{{ $page->active('/cursor') ? 'text-dark text-medium' : 'text-dark-soft' }}">Cursor</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/interactivity/resize" class="{{ $page->active('/resize') ? 'text-dark text-medium' : 'text-dark-soft' }}">Resize</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/interactivity/pointer-events" class="{{ $page->active('/pointer-events') ? 'text-dark text-medium' : 'text-dark-soft' }}">Pointer Events</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/interactivity/user-select" class="{{ $page->active('/user-select') ? 'text-dark text-medium' : 'text-dark-soft' }}">User Select</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/interactivity/cursor" class="{{ $page->active('/cursor') ? 'text-dark text-medium' : 'text-dark-soft' }}">Cursor</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/interactivity/resize" class="{{ $page->active('/resize') ? 'text-dark text-medium' : 'text-dark-soft' }}">Resize</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/interactivity/pointer-events" class="{{ $page->active('/pointer-events') ? 'text-dark text-medium' : 'text-dark-soft' }}">Pointer Events</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/interactivity/user-select" class="{{ $page->active('/user-select') ? 'text-dark text-medium' : 'text-dark-soft' }}">User Select</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/opacity" class="{{ $page->active('/opacity') ? 'text-dark text-medium' : 'text-dark-soft' }}">Opacity</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/overflow" class="{{ $page->active('/overflow') ? 'text-dark text-medium' : 'text-dark-soft' }}">Overflow</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/positioning" class="{{ $page->active('/positioning') ? 'text-dark text-medium' : 'text-dark-soft' }}">Positioning</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/shadows" class="{{ $page->active('/shadows') ? 'text-dark text-medium' : 'text-dark-soft' }}">Shadows</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/opacity" class="{{ $page->active('/opacity') ? 'text-dark text-medium' : 'text-dark-soft' }}">Opacity</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/overflow" class="{{ $page->active('/overflow') ? 'text-dark text-medium' : 'text-dark-soft' }}">Overflow</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/positioning" class="{{ $page->active('/positioning') ? 'text-dark text-medium' : 'text-dark-soft' }}">Positioning</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/shadows" class="{{ $page->active('/shadows') ? 'text-dark text-medium' : 'text-dark-soft' }}">Shadows</a></li>
|
||||
<li class="mb-2">
|
||||
<a href="{{ $page->baseUrl }}/utilities/sizing/width" class="block mb-2 {{ $page->active('/sizing/') ? 'text-dark text-medium' : 'text-dark-soft' }}">Sizing</a>
|
||||
<a href="{{ $page->baseUrl }}/styles/sizing/width" class="block mb-2 {{ $page->active('/sizing/') ? 'text-dark text-medium' : 'text-dark-soft' }}">Sizing</a>
|
||||
<ul class="pl-4 {{ $page->active('/sizing/') ? 'block' : 'hidden' }}">
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/sizing/width" class="{{ $page->active('/sizing/width') ? 'text-dark text-medium' : 'text-dark-soft' }}">Width</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/sizing/min-width" class="{{ $page->active('/sizing/min-width') ? 'text-dark text-medium' : 'text-dark-soft' }}">Min-Width</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/sizing/max-width" class="{{ $page->active('/sizing/max-width') ? 'text-dark text-medium' : 'text-dark-soft' }}">Max-Width</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/sizing/height" class="{{ $page->active('/sizing/height') ? 'text-dark text-medium' : 'text-dark-soft' }}">Height</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/sizing/min-height" class="{{ $page->active('/sizing/min-height') ? 'text-dark text-medium' : 'text-dark-soft' }}">Min-Height</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/sizing/max-height" class="{{ $page->active('/sizing/max-height') ? 'text-dark text-medium' : 'text-dark-soft' }}">Max-Height</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/sizing/width" class="{{ $page->active('/sizing/width') ? 'text-dark text-medium' : 'text-dark-soft' }}">Width</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/sizing/min-width" class="{{ $page->active('/sizing/min-width') ? 'text-dark text-medium' : 'text-dark-soft' }}">Min-Width</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/sizing/max-width" class="{{ $page->active('/sizing/max-width') ? 'text-dark text-medium' : 'text-dark-soft' }}">Max-Width</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/sizing/height" class="{{ $page->active('/sizing/height') ? 'text-dark text-medium' : 'text-dark-soft' }}">Height</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/sizing/min-height" class="{{ $page->active('/sizing/min-height') ? 'text-dark text-medium' : 'text-dark-soft' }}">Min-Height</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/sizing/max-height" class="{{ $page->active('/sizing/max-height') ? 'text-dark text-medium' : 'text-dark-soft' }}">Max-Height</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a href="{{ $page->baseUrl }}/utilities/spacing/padding" class="block mb-2 {{ $page->active('/spacing/') ? 'text-dark text-medium' : 'text-dark-soft' }}">Spacing</a>
|
||||
<a href="{{ $page->baseUrl }}/styles/spacing/padding" class="block mb-2 {{ $page->active('/spacing/') ? 'text-dark text-medium' : 'text-dark-soft' }}">Spacing</a>
|
||||
<ul class="pl-4 {{ $page->active('/spacing/') ? 'block' : 'hidden' }}">
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/spacing/padding" class="{{ $page->active('/spacing/padding') ? 'text-dark text-medium' : 'text-dark-soft' }}">Padding</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/spacing/margin" class="{{ $page->active('/spacing/margin') ? 'text-dark text-medium' : 'text-dark-soft' }}">Margin</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/spacing/negative-margin" class="{{ $page->active('/spacing/negative-margin') ? 'text-dark text-medium' : 'text-dark-soft' }}">Negative Margin</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/spacing/padding" class="{{ $page->active('/spacing/padding') ? 'text-dark text-medium' : 'text-dark-soft' }}">Padding</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/spacing/margin" class="{{ $page->active('/spacing/margin') ? 'text-dark text-medium' : 'text-dark-soft' }}">Margin</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/spacing/negative-margin" class="{{ $page->active('/spacing/negative-margin') ? 'text-dark text-medium' : 'text-dark-soft' }}">Negative Margin</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/svg" class="{{ $page->active('/svg') ? 'text-dark text-medium' : 'text-dark-soft' }}">SVG</a></li>
|
||||
<li class="mb-2">
|
||||
<a href="{{ $page->baseUrl }}/utilities/text/fonts" class="block mb-2 {{ $page->active('/text/') ? 'text-dark text-medium' : 'text-dark-soft' }}">Text</a>
|
||||
<a href="{{ $page->baseUrl }}/styles/text/fonts" class="block mb-2 {{ $page->active('/text/') ? 'text-dark text-medium' : 'text-dark-soft' }}">Text</a>
|
||||
<ul class="pl-4 {{ $page->active('/text/') ? 'block' : 'hidden' }}">
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/text/fonts" class="{{ $page->active('/text/fonts') ? 'text-dark text-medium' : 'text-dark-soft' }}">Fonts</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/text/color" class="{{ $page->active('/text/color') ? 'text-dark text-medium' : 'text-dark-soft' }}">Color</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/text/sizing" class="{{ $page->active('/text/sizing') ? 'text-dark text-medium' : 'text-dark-soft' }}">Sizing</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/text/weight" class="{{ $page->active('/text/weight') ? 'text-dark text-medium' : 'text-dark-soft' }}">Weight</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/text/line-height" class="{{ $page->active('/text/line-height') ? 'text-dark text-medium' : 'text-dark-soft' }}">Line Height</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/text/letter-spacing" class="{{ $page->active('/text/letter-spacing') ? 'text-dark text-medium' : 'text-dark-soft' }}">Letter Spacing</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/text/alignment" class="{{ $page->active('/text/alignment') ? 'text-dark text-medium' : 'text-dark-soft' }}">Alignment</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/text/wrapping" class="{{ $page->active('/text/wrapping') ? 'text-dark text-medium' : 'text-dark-soft' }}">Wrapping</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/text/style" class="{{ $page->active('/text/style') ? 'text-dark text-medium' : 'text-dark-soft' }}">Style & Decoration</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/fonts" class="{{ $page->active('/text/fonts') ? 'text-dark text-medium' : 'text-dark-soft' }}">Fonts</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/color" class="{{ $page->active('/text/color') ? 'text-dark text-medium' : 'text-dark-soft' }}">Color</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/sizing" class="{{ $page->active('/text/sizing') ? 'text-dark text-medium' : 'text-dark-soft' }}">Sizing</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/weight" class="{{ $page->active('/text/weight') ? 'text-dark text-medium' : 'text-dark-soft' }}">Weight</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/line-height" class="{{ $page->active('/text/line-height') ? 'text-dark text-medium' : 'text-dark-soft' }}">Line Height</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/letter-spacing" class="{{ $page->active('/text/letter-spacing') ? 'text-dark text-medium' : 'text-dark-soft' }}">Letter Spacing</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/alignment" class="{{ $page->active('/text/alignment') ? 'text-dark text-medium' : 'text-dark-soft' }}">Alignment</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/wrapping" class="{{ $page->active('/text/wrapping') ? 'text-dark text-medium' : 'text-dark-soft' }}">Wrapping</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/style" class="{{ $page->active('/text/style') ? 'text-dark text-medium' : 'text-dark-soft' }}">Style & Decoration</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/visibility" class="{{ $page->active('/visibility') ? 'text-dark text-medium' : 'text-dark-soft' }}">Visibility</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/z-index" class="{{ $page->active('/z-index') ? 'text-dark text-medium' : 'text-dark-soft' }}">Z-Index</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/visibility" class="{{ $page->active('/visibility') ? 'text-dark text-medium' : 'text-dark-soft' }}">Visibility</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/styles/z-index" class="{{ $page->active('/z-index') ? 'text-dark text-medium' : 'text-dark-soft' }}">Z-Index</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-8">
|
||||
<p class="mb-4 text-dark-softer text-uppercase tracking-wide text-medium text-sm">Examples</p>
|
||||
<ul>
|
||||
<li class="mb-2"><a class="{{ $page->getUrl() === '/buttons' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/buttons">Buttons</a></li>
|
||||
<li class="mb-2"><a class="{{ $page->getUrl() === '/forms' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/forms">Forms</a></li>
|
||||
<li class="mb-2"><a class="{{ $page->getUrl() === '/examples' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/examples">Examples</a></li>
|
||||
<li class="mb-2"><a class="{{ $page->getUrl() === '/examples/alerts' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/examples/alerts">Alerts</a></li>
|
||||
<li class="mb-2"><a class="{{ $page->getUrl() === '/examples/cards' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/examples/cards">Cards</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
@ -1,101 +0,0 @@
|
||||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Buttons"
|
||||
---
|
||||
|
||||
# Buttons
|
||||
|
||||
<div class="mb-4">
|
||||
<button class="text-medium text-dark rounded py-2 px-4 bg-light mr-4">
|
||||
Save
|
||||
</button>
|
||||
<button class="text-medium text-dark rounded py-2 px-4 bg-light-soft mr-4">
|
||||
Save
|
||||
</button>
|
||||
<button class="text-medium text-dark rounded py-2 px-4 bg-light-softer mr-4">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<button class="text-medium text-light rounded py-2 px-4 bg-dark hover-bg-dark-dark mr-4">
|
||||
Save
|
||||
</button>
|
||||
<button class="text-medium text-light rounded py-2 px-4 bg-dark-soft mr-4">
|
||||
Save
|
||||
</button>
|
||||
<button class="text-medium text-light rounded py-2 px-4 bg-dark-softer mr-4">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<button class="text-medium text-light rounded py-2 px-4 bg-red hover-bg-red-dark mr-4">
|
||||
Save
|
||||
</button>
|
||||
<button class="text-medium text-light rounded py-2 px-4 bg-red-light mr-4">
|
||||
Disabled
|
||||
</button>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<button class="text-medium text-light rounded py-2 px-4 bg-orange hover-bg-orange-dark mr-4">
|
||||
Save
|
||||
</button>
|
||||
<button class="text-medium text-light rounded py-2 px-4 bg-orange-light mr-4">
|
||||
Disabled
|
||||
</button>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<button class="text-medium text-light rounded py-2 px-4 bg-yellow hover-bg-yellow-dark mr-4">
|
||||
Save
|
||||
</button>
|
||||
<button class="text-medium text-light rounded py-2 px-4 bg-yellow-light mr-4">
|
||||
Disabled
|
||||
</button>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<button class="text-medium text-light rounded py-2 px-4 bg-green hover-bg-green-dark mr-4">
|
||||
Save
|
||||
</button>
|
||||
<button class="text-medium text-light rounded py-2 px-4 bg-green-light mr-4">
|
||||
Disabled
|
||||
</button>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<button class="text-medium text-light rounded py-2 px-4 bg-teal hover-bg-teal-dark mr-4">
|
||||
Save
|
||||
</button>
|
||||
<button class="text-medium text-light rounded py-2 px-4 bg-teal-light mr-4">
|
||||
Disabled
|
||||
</button>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<button class="text-medium text-light rounded py-2 px-4 bg-blue hover-bg-blue-dark mr-4">
|
||||
Save
|
||||
</button>
|
||||
<button class="text-medium text-light rounded py-2 px-4 bg-blue-light mr-4">
|
||||
Disabled
|
||||
</button>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<button class="text-medium text-light rounded py-2 px-4 bg-indigo hover-bg-indigo-dark mr-4">
|
||||
Save
|
||||
</button>
|
||||
<button class="text-medium text-light rounded py-2 px-4 bg-indigo-light mr-4">
|
||||
Disabled
|
||||
</button>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<button class="text-medium text-light rounded py-2 px-4 bg-purple hover-bg-purple-dark mr-4">
|
||||
Save
|
||||
</button>
|
||||
<button class="text-medium text-light rounded py-2 px-4 bg-purple-light mr-4">
|
||||
Disabled
|
||||
</button>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<button class="text-medium text-light rounded py-2 px-4 bg-pink hover-bg-pink-dark mr-4">
|
||||
Save
|
||||
</button>
|
||||
<button class="text-medium text-light rounded py-2 px-4 bg-pink-light mr-4">
|
||||
Disabled
|
||||
</button>
|
||||
</div>
|
||||
@ -1,6 +0,0 @@
|
||||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Changelog"
|
||||
---
|
||||
|
||||
# Changelog
|
||||
@ -1,6 +0,0 @@
|
||||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Customization"
|
||||
---
|
||||
|
||||
# Customization
|
||||
19
docs/source/examples/alerts.blade.md
Normal file
19
docs/source/examples/alerts.blade.md
Normal file
@ -0,0 +1,19 @@
|
||||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Alerts"
|
||||
---
|
||||
|
||||
# Alerts
|
||||
|
||||
We don't ship alert components because every app has it's own visual style, but they are easy af to make.
|
||||
|
||||
@foreach($page->colors as $color)
|
||||
<div class="bg-{{$color}}-lightest border border-{{$color}}-light rounded p-4 mb-4">
|
||||
<div class="text-bold text-{{$color}}-dark">
|
||||
Alert message
|
||||
</div>
|
||||
<div class="text-{{$color}}-dark">
|
||||
Some additional text to explain what happened.
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
@ -1,75 +1,11 @@
|
||||
@extends('_layouts.master')
|
||||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Cards"
|
||||
---
|
||||
|
||||
@section('body')
|
||||
<h1 class="markdown">Examples</h1>
|
||||
# Cards
|
||||
|
||||
<p class="markdown">Some component examples, just to get a vibe for what's possible and for us to double check our default utilities are producing good looking stuff!</p>
|
||||
|
||||
<h2 class="markdown">Alerts</h2>
|
||||
|
||||
@foreach($page->colors as $color)
|
||||
<div class="bg-{{$color}}-lightest border border-{{$color}}-light rounded p-4 mb-4">
|
||||
<div class="text-bold text-{{$color}}-dark">
|
||||
Alert message
|
||||
</div>
|
||||
<div class="text-{{$color}}-dark">
|
||||
Some additional text to explain what happened.
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
|
||||
<h2 class="markdown">Buttons</h2>
|
||||
|
||||
<h3 class="markdown">Solid</h3>
|
||||
|
||||
<div class="mb-4">
|
||||
<button class="text-medium text-dark rounded py-2 px-4 bg-light mr-4">
|
||||
Save
|
||||
</button>
|
||||
<button class="text-medium text-dark rounded py-2 px-4 bg-light-soft mr-4">
|
||||
Save
|
||||
</button>
|
||||
<button class="text-medium text-dark rounded py-2 px-4 bg-light-softer mr-4">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<button class="text-medium text-light rounded py-2 px-4 bg-dark mr-4">
|
||||
Save
|
||||
</button>
|
||||
<button class="text-medium text-light rounded py-2 px-4 bg-dark-soft mr-4">
|
||||
Save
|
||||
</button>
|
||||
<button class="text-medium text-light rounded py-2 px-4 bg-dark-softer mr-4">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@foreach($page->colors as $color)
|
||||
<div class="mb-4">
|
||||
<button class="text-medium text-light rounded py-2 px-4 bg-{{$color}} hover:bg-{{$color}}-dark mr-4">
|
||||
Save
|
||||
</button>
|
||||
<button class="text-medium text-light rounded py-2 px-4 bg-{{$color}}-light mr-4">
|
||||
Disabled
|
||||
</button>
|
||||
</div>
|
||||
@endforeach
|
||||
|
||||
<h3 class="markdown">Outline</h3>
|
||||
|
||||
@foreach($page->colors as $color)
|
||||
<div class="mb-4">
|
||||
<button class="text-medium text-light rounded py-2 px-4 text-{{$color}}-dark hover:text-light border border-{{$color}} hover:bg-{{$color}} mr-4">
|
||||
Save
|
||||
</button>
|
||||
<button class="text-medium text-light rounded py-2 px-4 text-{{$color}}-light border border-{{$color}}-light mr-4">
|
||||
Disabled
|
||||
</button>
|
||||
</div>
|
||||
@endforeach
|
||||
|
||||
<h2 class="markdown">Cards</h2>
|
||||
We don't ship alert components because every app has it's own visual style, but they are easy af to make.
|
||||
|
||||
<div class="max-w-sm mb-8">
|
||||
<div class="rounded overflow-hidden shadow-3">
|
||||
@ -114,4 +50,3 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
@ -1,6 +0,0 @@
|
||||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Forms"
|
||||
---
|
||||
|
||||
# Forms
|
||||
@ -5,8 +5,6 @@ title: "Installation"
|
||||
|
||||
# Installation
|
||||
|
||||
Install Tailwind using NPM:
|
||||
|
||||
```bash
|
||||
```sh
|
||||
npm install tailwindcss
|
||||
```
|
||||
|
||||
@ -1,6 +0,0 @@
|
||||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Principles"
|
||||
---
|
||||
|
||||
# Principles
|
||||
@ -1,6 +0,0 @@
|
||||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Responsive"
|
||||
---
|
||||
|
||||
# Responsive
|
||||
14
docs/source/styles/base.md
Normal file
14
docs/source/styles/base.md
Normal file
@ -0,0 +1,14 @@
|
||||
---
|
||||
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.
|
||||
63
docs/source/styles/buttons.blade.md
Normal file
63
docs/source/styles/buttons.blade.md
Normal file
@ -0,0 +1,63 @@
|
||||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Buttons"
|
||||
---
|
||||
|
||||
# Buttons
|
||||
|
||||
<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 how to create buttons of various styles, like solid rounded buttons, outline buttons, pill buttons, etc.
|
||||
|
||||
### Solid
|
||||
|
||||
<div class="mb-4">
|
||||
<button class="text-medium text-dark rounded py-2 px-4 bg-light mr-4">
|
||||
Save
|
||||
</button>
|
||||
<button class="text-medium text-dark rounded py-2 px-4 bg-light-soft mr-4">
|
||||
Save
|
||||
</button>
|
||||
<button class="text-medium text-dark rounded py-2 px-4 bg-light-softer mr-4">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<button class="text-medium text-light rounded py-2 px-4 bg-dark mr-4">
|
||||
Save
|
||||
</button>
|
||||
<button class="text-medium text-light rounded py-2 px-4 bg-dark-soft mr-4">
|
||||
Save
|
||||
</button>
|
||||
<button class="text-medium text-light rounded py-2 px-4 bg-dark-softer mr-4">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@foreach($page->colors as $color)
|
||||
<div class="mb-4">
|
||||
<button class="text-medium text-light rounded py-2 px-4 bg-{{$color}} hover:bg-{{$color}}-dark mr-4">
|
||||
Save
|
||||
</button>
|
||||
<button class="text-medium text-light rounded py-2 px-4 bg-{{$color}}-light mr-4">
|
||||
Disabled
|
||||
</button>
|
||||
</div>
|
||||
@endforeach
|
||||
|
||||
<h3 class="markdown">Outline</h3>
|
||||
|
||||
@foreach($page->colors as $color)
|
||||
<div class="mb-4">
|
||||
<button class="text-medium text-light rounded py-2 px-4 text-{{$color}}-dark hover:text-light border border-{{$color}} hover:bg-{{$color}} mr-4">
|
||||
Save
|
||||
</button>
|
||||
<button class="text-medium text-light rounded py-2 px-4 text-{{$color}}-light border border-{{$color}}-light mr-4">
|
||||
Disabled
|
||||
</button>
|
||||
</div>
|
||||
@endforeach
|
||||
@ -11,7 +11,7 @@ title: "Display"
|
||||
<a class="subnav-link" href="#customizing">Customizing</a>
|
||||
</div>
|
||||
|
||||
> If you're looking for Flexbox utilities, see the [Flexbox](/flexbox) page.
|
||||
> If you're looking for Flexbox utilities, see the [Flexbox](/styles/flexbox) page.
|
||||
|
||||
The display utilities simply `display` property helpers.
|
||||
|
||||
18
docs/source/styles/forms.md
Normal file
18
docs/source/styles/forms.md
Normal file
@ -0,0 +1,18 @@
|
||||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Forms"
|
||||
---
|
||||
|
||||
# Forms
|
||||
|
||||
<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>
|
||||
|
||||
Include documentation around:
|
||||
|
||||
- `appearance-none` helper
|
||||
- Creating input groups/custom selects and using `pointer-events-none`
|
||||
- The placeholder text styling in our base styles
|
||||
@ -5,6 +5,19 @@ title: "Grid"
|
||||
|
||||
# Grid
|
||||
|
||||
<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>
|
||||
|
||||
Documentation around things like:
|
||||
|
||||
- Using percentage width helpers and a flex container to create columns
|
||||
- Using flex wrap if you want columns to wrap
|
||||
- Using negative margin and padding helpers to add gutters
|
||||
- Using the container class if you really give a shit
|
||||
|
||||
Basic grid example:
|
||||
|
||||
<div class="bg-light-softer text-medium text-sm mb-6">
|
||||
17
docs/source/styles/svg.md
Normal file
17
docs/source/styles/svg.md
Normal file
@ -0,0 +1,17 @@
|
||||
---
|
||||
extends: _layouts.markdown
|
||||
title: "SVG"
|
||||
---
|
||||
|
||||
# SVG
|
||||
|
||||
<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>
|
||||
|
||||
Documentation around things like:
|
||||
|
||||
- The `currentColor` trick in our base styles and using text color utilities to style SVG icons
|
||||
- Using sizing helpers to style SVGs
|
||||
Loading…
x
Reference in New Issue
Block a user