mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
Compare commits
1 Commits
dev-onboar
...
dev-color-
| Author | SHA1 | Date | |
|---|---|---|---|
|
763e482e8d |
@@ -29,18 +29,18 @@ Choose one of the available colors from the basic color palette and make your de
|
||||
All available colors can come in pastel shades, which are perfect for more subtle designs and can be easily combined with the basic palette to create eye-catching designs.
|
||||
|
||||
<ColorsTable colors={[
|
||||
{ name: "blue-lt", value: "#e9f0f9" },
|
||||
{ name: "azure-lt", value: "#ecf5fc" },
|
||||
{ name: "indigo-lt", value: "#eceffd" },
|
||||
{ name: "purple-lt", value: "#f7ecfa" },
|
||||
{ name: "pink-lt", value: "#fbebf0" },
|
||||
{ name: "red-lt", value: "#fbebeb" },
|
||||
{ name: "orange-lt", value: "#fef0e6" },
|
||||
{ name: "yellow-lt", value: "#fef5e6" },
|
||||
{ name: "lime-lt", value: "#f1f8e8" },
|
||||
{ name: "green-lt", value: "#eaf7ec" },
|
||||
{ name: "teal-lt", value: "#e7f6f2" },
|
||||
{ name: "cyan-lt", value: "#e8f6f8" }
|
||||
{ name: "blue-lightest", value: "#e9f0f9" },
|
||||
{ name: "azure-lightest", value: "#ecf5fc" },
|
||||
{ name: "indigo-lightest", value: "#eceffd" },
|
||||
{ name: "purple-lightest", value: "#f7ecfa" },
|
||||
{ name: "pink-lightest", value: "#fbebf0" },
|
||||
{ name: "red-lightest", value: "#fbebeb" },
|
||||
{ name: "orange-lightest", value: "#fef0e6" },
|
||||
{ name: "yellow-lightest", value: "#fef5e6" },
|
||||
{ name: "lime-lightest", value: "#f1f8e8" },
|
||||
{ name: "green-lightest", value: "#eaf7ec" },
|
||||
{ name: "teal-lightest", value: "#e7f6f2" },
|
||||
{ name: "cyan-lightest", value: "#e8f6f8" }
|
||||
]}/>
|
||||
|
||||
## Gray palette
|
||||
|
||||
@@ -110,11 +110,11 @@ Besides pictures and initials, you can also use icons to make the avatars more u
|
||||
Customize the color of the avatars' background. You can click [here](/docs/ui/base/colors) to see the list of available colors.
|
||||
|
||||
```html example centered separated code
|
||||
<span class="avatar bg-green-lt">AB</span>
|
||||
<span class="avatar bg-red-lt">CD</span>
|
||||
<span class="avatar bg-yellow-lt">EF</span>
|
||||
<span class="avatar bg-primary-lt">GH</span>
|
||||
<span class="avatar bg-purple-lt">IJ</span>
|
||||
<span class="avatar bg-green-lightest">AB</span>
|
||||
<span class="avatar bg-red-lightest">CD</span>
|
||||
<span class="avatar bg-yellow-lightest">EF</span>
|
||||
<span class="avatar bg-primary-lightest">GH</span>
|
||||
<span class="avatar bg-purple-lightest">IJ</span>
|
||||
```
|
||||
|
||||
## Avatar size
|
||||
|
||||
@@ -10,18 +10,18 @@ bootstrapLink: components/badge/
|
||||
The default badges are square and come in the basic set of colors.
|
||||
|
||||
```html example centered separated
|
||||
<span class="badge bg-blue-lt">Blue</span>
|
||||
<span class="badge bg-azure-lt">Azure</span>
|
||||
<span class="badge bg-indigo-lt">Indigo</span>
|
||||
<span class="badge bg-purple-lt">Purple</span>
|
||||
<span class="badge bg-pink-lt">Pink</span>
|
||||
<span class="badge bg-red-lt">Red</span>
|
||||
<span class="badge bg-orange-lt">Orange</span>
|
||||
<span class="badge bg-yellow-lt">Yellow</span>
|
||||
<span class="badge bg-lime-lt">Lime</span>
|
||||
<span class="badge bg-green-lt">Green</span>
|
||||
<span class="badge bg-teal-lt">Teal</span>
|
||||
<span class="badge bg-cyan-lt">Cyan</span>
|
||||
<span class="badge bg-blue-lightest">Blue</span>
|
||||
<span class="badge bg-azure-lightest">Azure</span>
|
||||
<span class="badge bg-indigo-lightest">Indigo</span>
|
||||
<span class="badge bg-purple-lightest">Purple</span>
|
||||
<span class="badge bg-pink-lightest">Pink</span>
|
||||
<span class="badge bg-red-lightest">Red</span>
|
||||
<span class="badge bg-orange-lightest">Orange</span>
|
||||
<span class="badge bg-yellow-lightest">Yellow</span>
|
||||
<span class="badge bg-lime-lightest">Lime</span>
|
||||
<span class="badge bg-green-lightest">Green</span>
|
||||
<span class="badge bg-teal-lightest">Teal</span>
|
||||
<span class="badge bg-cyan-lightest">Cyan</span>
|
||||
```
|
||||
|
||||
## Headings
|
||||
@@ -59,18 +59,18 @@ The default badges are square and come in the basic set of colors.
|
||||
Use the `.badge-pill` class if you want to create a badge with rounded corners. Its width will adjust to the label text.
|
||||
|
||||
```html example centered separated
|
||||
<span class="badge badge-pill bg-blue-lt">1</span>
|
||||
<span class="badge badge-pill bg-azure-lt">2</span>
|
||||
<span class="badge badge-pill bg-indigo-lt">3</span>
|
||||
<span class="badge badge-pill bg-purple-lt">4</span>
|
||||
<span class="badge badge-pill bg-pink-lt">5</span>
|
||||
<span class="badge badge-pill bg-red-lt">6</span>
|
||||
<span class="badge badge-pill bg-orange-lt">7</span>
|
||||
<span class="badge badge-pill bg-yellow-lt">8</span>
|
||||
<span class="badge badge-pill bg-lime-lt">9</span>
|
||||
<span class="badge badge-pill bg-green-lt">10</span>
|
||||
<span class="badge badge-pill bg-teal-lt">11</span>
|
||||
<span class="badge badge-pill bg-cyan-lt">12</span>
|
||||
<span class="badge badge-pill bg-blue-lightest">1</span>
|
||||
<span class="badge badge-pill bg-azure-lightest">2</span>
|
||||
<span class="badge badge-pill bg-indigo-lightest">3</span>
|
||||
<span class="badge badge-pill bg-purple-lightest">4</span>
|
||||
<span class="badge badge-pill bg-pink-lightest">5</span>
|
||||
<span class="badge badge-pill bg-red-lightest">6</span>
|
||||
<span class="badge badge-pill bg-orange-lightest">7</span>
|
||||
<span class="badge badge-pill bg-yellow-lightest">8</span>
|
||||
<span class="badge badge-pill bg-lime-lightest">9</span>
|
||||
<span class="badge badge-pill bg-green-lightest">10</span>
|
||||
<span class="badge badge-pill bg-teal-lightest">11</span>
|
||||
<span class="badge badge-pill bg-cyan-lightest">12</span>
|
||||
```
|
||||
|
||||
## Links
|
||||
@@ -78,18 +78,18 @@ Use the `.badge-pill` class if you want to create a badge with rounded corners.
|
||||
Place the badge within an `<a>` element if you want it to perform the function of a link and make it clickable.
|
||||
|
||||
```html example centered separated
|
||||
<a href="#" class="badge bg-blue-lt">Blue</a>
|
||||
<a href="#" class="badge bg-azure-lt">Azure</a>
|
||||
<a href="#" class="badge bg-indigo-lt">Indigo</a>
|
||||
<a href="#" class="badge bg-purple-lt">Purple</a>
|
||||
<a href="#" class="badge bg-pink-lt">Pink</a>
|
||||
<a href="#" class="badge bg-red-lt">Red</a>
|
||||
<a href="#" class="badge bg-orange-lt">Orange</a>
|
||||
<a href="#" class="badge bg-yellow-lt">Yellow</a>
|
||||
<a href="#" class="badge bg-lime-lt">Lime</a>
|
||||
<a href="#" class="badge bg-green-lt">Green</a>
|
||||
<a href="#" class="badge bg-teal-lt">Teal</a>
|
||||
<a href="#" class="badge bg-cyan-lt">Cyan</a>
|
||||
<a href="#" class="badge bg-blue-lightest">Blue</a>
|
||||
<a href="#" class="badge bg-azure-lightest">Azure</a>
|
||||
<a href="#" class="badge bg-indigo-lightest">Indigo</a>
|
||||
<a href="#" class="badge bg-purple-lightest">Purple</a>
|
||||
<a href="#" class="badge bg-pink-lightest">Pink</a>
|
||||
<a href="#" class="badge bg-red-lightest">Red</a>
|
||||
<a href="#" class="badge bg-orange-lightest">Orange</a>
|
||||
<a href="#" class="badge bg-yellow-lightest">Yellow</a>
|
||||
<a href="#" class="badge bg-lime-lightest">Lime</a>
|
||||
<a href="#" class="badge bg-green-lightest">Green</a>
|
||||
<a href="#" class="badge bg-teal-lightest">Teal</a>
|
||||
<a href="#" class="badge bg-cyan-lightest">Cyan</a>
|
||||
```
|
||||
|
||||
## Button with badge
|
||||
|
||||
@@ -193,7 +193,7 @@ By using a progress bar component as a background element, designers can create
|
||||
```html
|
||||
<div class="progressbg">
|
||||
<div class="progress progressbg-progress">
|
||||
<div class="progress-bar bg-primary-lt" style="width: 65%"></div>
|
||||
<div class="progress-bar bg-primary-lightest" style="width: 65%"></div>
|
||||
</div>
|
||||
<div class="progressbg-text">Poland</div>
|
||||
<div class="progressbg-value">65%</div>
|
||||
@@ -205,35 +205,35 @@ Thanks to this you can create a nice looking statistics section:
|
||||
```html example vertical separated centered columns={1} plugins="flags" height="20rem"
|
||||
<div class="progressbg">
|
||||
<div class="progress progressbg-progress">
|
||||
<div class="progress-bar bg-primary-lt" style="width: 65%"></div>
|
||||
<div class="progress-bar bg-primary-lightest" style="width: 65%"></div>
|
||||
</div>
|
||||
<div class="progressbg-text">Poland</div>
|
||||
<div class="progressbg-value">65%</div>
|
||||
</div>
|
||||
<div class="progressbg">
|
||||
<div class="progress progressbg-progress">
|
||||
<div class="progress-bar bg-primary-lt" style="width: 35%"></div>
|
||||
<div class="progress-bar bg-primary-lightest" style="width: 35%"></div>
|
||||
</div>
|
||||
<div class="progressbg-text">Germany</div>
|
||||
<div class="progressbg-value">35%</div>
|
||||
</div>
|
||||
<div class="progressbg">
|
||||
<div class="progress progressbg-progress">
|
||||
<div class="progress-bar bg-primary-lt" style="width: 28%"></div>
|
||||
<div class="progress-bar bg-primary-lightest" style="width: 28%"></div>
|
||||
</div>
|
||||
<div class="progressbg-text">United Stated</div>
|
||||
<div class="progressbg-value">28%</div>
|
||||
</div>
|
||||
<div class="progressbg">
|
||||
<div class="progress progressbg-progress">
|
||||
<div class="progress-bar bg-primary-lt" style="width: 20%"></div>
|
||||
<div class="progress-bar bg-primary-lightest" style="width: 20%"></div>
|
||||
</div>
|
||||
<div class="progressbg-text">United Kingdom</div>
|
||||
<div class="progressbg-value">20%</div>
|
||||
</div>
|
||||
<div class="progressbg">
|
||||
<div class="progress progressbg-progress">
|
||||
<div class="progress-bar bg-primary-lt" style="width: 15%"></div>
|
||||
<div class="progress-bar bg-primary-lightest" style="width: 15%"></div>
|
||||
</div>
|
||||
<div class="progressbg-text">France</div>
|
||||
<div class="progressbg-value">15%</div>
|
||||
|
||||
@@ -11,7 +11,7 @@ The available timeline design is composed of many components that will help you
|
||||
```html example height="400px" scrollable background="base"
|
||||
<ul class="timeline">
|
||||
<li class="timeline-event">
|
||||
<div class="timeline-event-icon bg-twitter-lt">
|
||||
<div class="timeline-event-icon bg-twitter-lightest">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon"
|
||||
@@ -94,7 +94,7 @@ The available timeline design is composed of many components that will help you
|
||||
</div>
|
||||
</li>
|
||||
<li class="timeline-event">
|
||||
<div class="timeline-event-icon bg-facebook-lt">
|
||||
<div class="timeline-event-icon bg-facebook-lightest">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon"
|
||||
@@ -234,7 +234,7 @@ The available timeline design is composed of many components that will help you
|
||||
```html
|
||||
<ul class="timeline">
|
||||
<li class="timeline-event">
|
||||
<div class="timeline-event-icon bg-twitter-lt">
|
||||
<div class="timeline-event-icon bg-twitter-lightest">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/brand-twitter -->
|
||||
<svg>...</svg>
|
||||
</div>
|
||||
@@ -273,7 +273,7 @@ The available timeline design is composed of many components that will help you
|
||||
</div>
|
||||
</li>
|
||||
<li class="timeline-event">
|
||||
<div class="timeline-event-icon bg-facebook-lt">
|
||||
<div class="timeline-event-icon bg-facebook-lightest">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/brand-facebook -->
|
||||
<svg>...</svg>
|
||||
</div>
|
||||
@@ -357,7 +357,7 @@ Use a simplified version of the timeline, if it suits your design better. You ca
|
||||
```html example height="400px" scrollable background="base"
|
||||
<ul class="timeline timeline-simple">
|
||||
<li class="timeline-event">
|
||||
<div class="timeline-event-icon bg-twitter-lt">
|
||||
<div class="timeline-event-icon bg-twitter-lightest">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon"
|
||||
@@ -440,7 +440,7 @@ Use a simplified version of the timeline, if it suits your design better. You ca
|
||||
</div>
|
||||
</li>
|
||||
<li class="timeline-event">
|
||||
<div class="timeline-event-icon bg-facebook-lt">
|
||||
<div class="timeline-event-icon bg-facebook-lightest">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon"
|
||||
@@ -580,7 +580,7 @@ Use a simplified version of the timeline, if it suits your design better. You ca
|
||||
```html
|
||||
<ul class="timeline timeline-simple">
|
||||
<li class="timeline-event">
|
||||
<div class="timeline-event-icon bg-twitter-lt">
|
||||
<div class="timeline-event-icon bg-twitter-lightest">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/brand-twitter -->
|
||||
<svg>...</svg>
|
||||
</div>
|
||||
@@ -619,7 +619,7 @@ Use a simplified version of the timeline, if it suits your design better. You ca
|
||||
</div>
|
||||
</li>
|
||||
<li class="timeline-event">
|
||||
<div class="timeline-event-icon bg-facebook-lt">
|
||||
<div class="timeline-event-icon bg-facebook-lightest">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/brand-facebook -->
|
||||
<svg>...</svg>
|
||||
</div>
|
||||
|
||||
@@ -30,17 +30,17 @@ Use the `.m-*` utilities to control the margin of an element. Margin utilities a
|
||||
|
||||
```html example hide-code centered separated vertical
|
||||
<div class="d-flex">
|
||||
<div class="bg-purple-lt">
|
||||
<div class="bg-purple-lightest">
|
||||
<div class="px-3 py-2 m-0 bg-purple rounded text-white font-monospace">.m-0</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex">
|
||||
<div class="bg-purple-lt">
|
||||
<div class="bg-purple-lightest">
|
||||
<div class="px-3 py-2 m-4 bg-purple rounded text-white font-monospace">.m-4</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex">
|
||||
<div class="bg-purple-lt">
|
||||
<div class="bg-purple-lightest">
|
||||
<div class="px-3 py-2 m-8 bg-purple rounded text-white font-monospace">.m-8</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -56,17 +56,17 @@ Start margins control the spacing to the left of an element, helping to create c
|
||||
|
||||
```html example hide-code centered separated vertical
|
||||
<div class="d-flex">
|
||||
<div class="bg-red-lt">
|
||||
<div class="bg-red-lightest">
|
||||
<div class="px-3 py-2 ms-0 bg-red rounded text-white font-monospace">.ms-0</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex">
|
||||
<div class="bg-red-lt">
|
||||
<div class="bg-red-lightest">
|
||||
<div class="px-3 py-2 ms-4 bg-red rounded text-white font-monospace">.ms-4</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex">
|
||||
<div class="bg-red-lt">
|
||||
<div class="bg-red-lightest">
|
||||
<div class="px-3 py-2 ms-8 bg-red rounded text-white font-monospace">.ms-8</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -82,17 +82,17 @@ End margins control the spacing on the right side of an element. These utilities
|
||||
|
||||
```html example hide-code centered separated vertical
|
||||
<div class="d-flex">
|
||||
<div class="bg-orange-lt">
|
||||
<div class="bg-orange-lightest">
|
||||
<div class="px-3 py-2 ms-0 bg-orange rounded text-white font-monospace">.me-0</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex">
|
||||
<div class="bg-orange-lt">
|
||||
<div class="bg-orange-lightest">
|
||||
<div class="px-3 py-2 me-4 bg-orange rounded text-white font-monospace">.me-4</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex">
|
||||
<div class="bg-orange-lt">
|
||||
<div class="bg-orange-lightest">
|
||||
<div class="px-3 py-2 me-8 bg-orange rounded text-white font-monospace">.me-8</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -108,17 +108,17 @@ Top margins define the spacing above an element. This is useful for separating s
|
||||
|
||||
```html example hide-code centered separated vertical
|
||||
<div class="d-flex">
|
||||
<div class="bg-yellow-lt">
|
||||
<div class="bg-yellow-lightest">
|
||||
<div class="px-3 py-2 mt-0 bg-yellow rounded text-white font-monospace">.mt-0</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex">
|
||||
<div class="bg-yellow-lt">
|
||||
<div class="bg-yellow-lightest">
|
||||
<div class="px-3 py-2 mt-4 bg-yellow rounded text-white font-monospace">.mt-4</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex">
|
||||
<div class="bg-yellow-lt">
|
||||
<div class="bg-yellow-lightest">
|
||||
<div class="px-3 py-2 mt-8 bg-yellow rounded text-white font-monospace">.mt-8</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -134,17 +134,17 @@ Bottom margins control the spacing below an element, helping to create consisten
|
||||
|
||||
```html example hide-code centered separated vertical
|
||||
<div class="d-flex">
|
||||
<div class="bg-lime-lt">
|
||||
<div class="bg-lime-lightest">
|
||||
<div class="px-3 py-2 mb-0 bg-lime rounded text-white font-monospace">.mb-0</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex">
|
||||
<div class="bg-lime-lt">
|
||||
<div class="bg-lime-lightest">
|
||||
<div class="px-3 py-2 mb-4 bg-lime rounded text-white font-monospace">.mb-4</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex">
|
||||
<div class="bg-lime-lt">
|
||||
<div class="bg-lime-lightest">
|
||||
<div class="px-3 py-2 mb-8 bg-lime rounded text-white font-monospace">.mb-8</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -160,17 +160,17 @@ Use the `mx-*` utilities to control the horizontal margin of an element. Horizon
|
||||
|
||||
```html example hide-code centered separated vertical
|
||||
<div class="d-flex">
|
||||
<div class="bg-azure-lt">
|
||||
<div class="bg-azure-lightest">
|
||||
<div class="px-3 py-2 mx-0 bg-azure rounded text-white font-monospace">.mx-0</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex">
|
||||
<div class="bg-azure-lt">
|
||||
<div class="bg-azure-lightest">
|
||||
<div class="px-3 py-2 mx-4 bg-azure rounded text-white font-monospace">.mx-4</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex">
|
||||
<div class="bg-azure-lt">
|
||||
<div class="bg-azure-lightest">
|
||||
<div class="px-3 py-2 mx-8 bg-azure rounded text-white font-monospace">.mx-8</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -187,17 +187,17 @@ Use the `my-*` utilities to control the vertical margin of an element. Vertical
|
||||
|
||||
```html example hide-code centered separated vertical
|
||||
<div class="d-flex">
|
||||
<div class="bg-blue-lt">
|
||||
<div class="bg-blue-lightest">
|
||||
<div class="px-3 py-2 my-0 bg-blue rounded text-white font-monospace">.my-0</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex">
|
||||
<div class="bg-blue-lt">
|
||||
<div class="bg-blue-lightest">
|
||||
<div class="px-3 py-2 my-4 bg-blue rounded text-white font-monospace">.my-4</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex">
|
||||
<div class="bg-blue-lt">
|
||||
<div class="bg-blue-lightest">
|
||||
<div class="px-3 py-2 my-8 bg-blue rounded text-white font-monospace">.my-8</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -226,7 +226,7 @@ Use the `.gap-*` utilities to control the space between elements in a grid layou
|
||||
```
|
||||
|
||||
```html example
|
||||
<div class="d-grid gap-6 bg-indigo-lt">
|
||||
<div class="d-grid gap-6 bg-indigo-lightest">
|
||||
<div class="px-3 py-2 bg-indigo text-white rounded">Grid item 1</div>
|
||||
<div class="px-3 py-2 bg-indigo text-white rounded">Grid item 2</div>
|
||||
<div class="px-3 py-2 bg-indigo text-white rounded">Grid item 3</div>
|
||||
|
||||
@@ -9,17 +9,10 @@
|
||||
--#{$prefix}font-comic: #{$font-family-comic};
|
||||
|
||||
/** Gray colors */
|
||||
--#{$prefix}gray-50: #{$gray-50};
|
||||
--#{$prefix}gray-100: #{$gray-100};
|
||||
--#{$prefix}gray-200: #{$gray-200};
|
||||
--#{$prefix}gray-300: #{$gray-300};
|
||||
--#{$prefix}gray-400: #{$gray-400};
|
||||
--#{$prefix}gray-500: #{$gray-500};
|
||||
--#{$prefix}gray-600: #{$gray-600};
|
||||
--#{$prefix}gray-700: #{$gray-700};
|
||||
--#{$prefix}gray-800: #{$gray-800};
|
||||
--#{$prefix}gray-900: #{$gray-900};
|
||||
--#{$prefix}gray-950: #{$gray-950};
|
||||
@each $name, $color in $gray-colors {
|
||||
--#{$prefix}#{$name}: #{$color};
|
||||
--#{$prefix}#{$name}-fg: #{$color};
|
||||
}
|
||||
|
||||
--#{$prefix}white: #{$white};
|
||||
--#{$prefix}black: #{$black};
|
||||
@@ -32,14 +25,10 @@
|
||||
/** Theme colors */
|
||||
@each $name, $color in map-merge($theme-colors, $social-colors) {
|
||||
--#{$prefix}#{$name}: #{$color};
|
||||
--#{$prefix}#{$name}-rgb: #{to-rgb($color)};
|
||||
--#{$prefix}#{$name}-fg: #{if(contrast-ratio($color) > $min-contrast-ratio, var(--#{$prefix}light), var(--#{$prefix}dark))};
|
||||
--#{$prefix}#{$name}-darken: #{theme-color-darker($color)};
|
||||
--#{$prefix}#{$name}-darken: color-mix(in oklab, var(--#{$prefix}#{$name}), transparent 20%);
|
||||
--#{$prefix}#{$name}-lt: #{theme-color-lighter($color)};
|
||||
--#{$prefix}#{$name}-lt: color-mix(in oklab, var(--#{$prefix}#{$name}) 10%, transparent);
|
||||
--#{$prefix}#{$name}-200: color-mix(in oklab, var(--#{$prefix}#{$name}) 20%, transparent);
|
||||
--#{$prefix}#{$name}-lt-rgb: #{to-rgb(theme-color-lighter($color))};
|
||||
--#{$prefix}#{$name}-darker: #{theme-color-darker($color)};
|
||||
--#{$prefix}#{$name}-lighter: #{theme-color-lighter($color)};
|
||||
--#{$prefix}#{$name}-lightest: #{theme-color-lightest($color)};
|
||||
}
|
||||
|
||||
/** Social colors */
|
||||
|
||||
@@ -278,8 +278,25 @@ $gray-colors: (
|
||||
gray-700: $gray-700,
|
||||
gray-800: $gray-800,
|
||||
gray-900: $gray-900,
|
||||
gray-950: $gray-950,
|
||||
) !default;
|
||||
|
||||
$foreground-colors: (
|
||||
white: var(--#{$prefix}dark),
|
||||
gray-50: var(--#{$prefix}dark),
|
||||
gray-100: var(--#{$prefix}dark),
|
||||
gray-200: var(--#{$prefix}dark),
|
||||
gray-300: var(--#{$prefix}dark),
|
||||
gray-400: var(--#{$prefix}dark),
|
||||
gray-500: var(--#{$prefix}dark),
|
||||
gray-600: var(--#{$prefix}light),
|
||||
gray-700: var(--#{$prefix}light),
|
||||
gray-800: var(--#{$prefix}light),
|
||||
gray-900: var(--#{$prefix}light),
|
||||
gray-950: var(--#{$prefix}light),
|
||||
black: var(--#{$prefix}light),
|
||||
);
|
||||
|
||||
$theme-colors: map-merge($theme-colors, map-merge($extra-colors, ()));
|
||||
|
||||
// BACKDROPS
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
|
||||
--#{$prefix}text-inverted: var(--#{$prefix}gray-100);
|
||||
|
||||
--#{$prefix}body-color: var(--#{$prefix}gray-700);
|
||||
--#{$prefix}body-color: var(--#{$prefix}gray-800);
|
||||
--#{$prefix}body-bg: var(--#{$prefix}bg-surface-secondary);
|
||||
|
||||
--#{$prefix}link-color: var(--#{$prefix}primary);
|
||||
|
||||
@@ -1,9 +1,13 @@
|
||||
@function theme-color-lighter($color, $background: #fff) {
|
||||
@return mix($color, $background, 10%);
|
||||
@function theme-color-lightest($color) {
|
||||
@return color-mix(in oklab, $color 8%, transparent);
|
||||
}
|
||||
|
||||
@function theme-color-lighter($color) {
|
||||
@return color-mix(in oklab, $color 24%, transparent);
|
||||
}
|
||||
|
||||
@function theme-color-darker($color) {
|
||||
@return shade-color($color, 10%);
|
||||
@return color-mix(in oklab, #{$color}, #000 20%)
|
||||
}
|
||||
|
||||
//
|
||||
|
||||
@@ -4,9 +4,18 @@
|
||||
background-color: color-mix(in srgb, var(--#{$prefix}#{$color}) calc(var(--#{$prefix}bg-opacity, 1) * 100%), transparent) !important;
|
||||
}
|
||||
|
||||
.bg-#{"" + $color}-lt {
|
||||
.bg-#{"" + $color}-darker {
|
||||
background-color: color-mix(in srgb, var(--#{$prefix}#{$color}-darker) calc(var(--#{$prefix}bg-opacity, 1) * 100%), transparent) !important;
|
||||
}
|
||||
|
||||
.bg-#{"" + $color}-lightest {
|
||||
color: color-mix(in srgb, var(--#{$prefix}#{$color}) calc(var(--#{$prefix}text-opacity, 1) * 100%), transparent) !important;
|
||||
background-color: color-mix(in srgb, var(--#{$prefix}#{$color}-lt) calc(var(--#{$prefix}bg-opacity, 1) * 100%), transparent) !important;
|
||||
background-color: color-mix(in srgb, var(--#{$prefix}#{$color}-lightest) calc(var(--#{$prefix}bg-opacity, 1) * 100%), transparent) !important;
|
||||
}
|
||||
|
||||
.bg-#{"" + $color}-lighter {
|
||||
color: color-mix(in srgb, var(--#{$prefix}#{$color}) calc(var(--#{$prefix}text-opacity, 1) * 100%), transparent) !important;
|
||||
background-color: color-mix(in srgb, var(--#{$prefix}#{$color}-lighter) calc(var(--#{$prefix}bg-opacity, 1) * 100%), transparent) !important;
|
||||
}
|
||||
|
||||
.border-#{"" + $color} {
|
||||
@@ -79,6 +88,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
@each $color, $value in $foreground-colors {
|
||||
.text-#{"" + $color}-fg {
|
||||
color: $value !important;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-inverted {
|
||||
--#{$prefix}bg-opacity: 1;
|
||||
background-color: color-mix(in srgb, var(--#{$prefix}bg-surface-inverted) calc(var(--#{$prefix}bg-opacity) * 100%), transparent) !important;
|
||||
|
||||
@@ -135,68 +135,125 @@ export default function (eleventyConfig) {
|
||||
buy_link: "https://r.tabler.io/buy-illustrations"
|
||||
},
|
||||
|
||||
colors: {
|
||||
"blue": {
|
||||
colors: [
|
||||
{
|
||||
"class": "blue",
|
||||
"hex": "#066fd1",
|
||||
"title": "Blue"
|
||||
},
|
||||
"azure": {
|
||||
{
|
||||
"class": "azure",
|
||||
"hex": "#45aaf2",
|
||||
"title": "Azure"
|
||||
},
|
||||
"indigo": {
|
||||
{
|
||||
"class": "indigo",
|
||||
"hex": "#6574cd",
|
||||
"title": "Indigo"
|
||||
},
|
||||
"purple": {
|
||||
{
|
||||
"class": "purple",
|
||||
"hex": "#a55eea",
|
||||
"title": "Purple"
|
||||
},
|
||||
"pink": {
|
||||
{
|
||||
"class": "pink",
|
||||
"hex": "#f66d9b",
|
||||
"title": "Pink"
|
||||
},
|
||||
"red": {
|
||||
{
|
||||
"class": "red",
|
||||
"hex": "#fa4654",
|
||||
"title": "Red"
|
||||
},
|
||||
"orange": {
|
||||
{
|
||||
"class": "orange",
|
||||
"hex": "#fd9644",
|
||||
"title": "Orange"
|
||||
},
|
||||
"yellow": {
|
||||
{
|
||||
"class": "yellow",
|
||||
"hex": "#f1c40f",
|
||||
"title": "Yellow"
|
||||
},
|
||||
"lime": {
|
||||
{
|
||||
"class": "lime",
|
||||
"hex": "#7bd235",
|
||||
"title": "Lime"
|
||||
},
|
||||
"green": {
|
||||
{
|
||||
"class": "green",
|
||||
"hex": "#5eba00",
|
||||
"title": "Green"
|
||||
},
|
||||
"teal": {
|
||||
{
|
||||
"class": "teal",
|
||||
"hex": "#2bcbba",
|
||||
"title": "Teal"
|
||||
},
|
||||
"cyan": {
|
||||
{
|
||||
"class": "cyan",
|
||||
"hex": "#17a2b8",
|
||||
"title": "Cyan"
|
||||
}
|
||||
},
|
||||
],
|
||||
grayColors: [
|
||||
{
|
||||
"class": "gray-50",
|
||||
"value": "var(--tb-gray-50)",
|
||||
"title": "Gray 50"
|
||||
},
|
||||
{
|
||||
"class": "gray-100",
|
||||
"value": "var(--tb-gray-100)",
|
||||
"title": "Gray 100"
|
||||
},
|
||||
{
|
||||
"class": "gray-200",
|
||||
"value": "var(--tb-gray-200)",
|
||||
"title": "Gray 200"
|
||||
},
|
||||
{
|
||||
"class": "gray-300",
|
||||
"value": "var(--tb-gray-300)",
|
||||
"title": "Gray 300"
|
||||
},
|
||||
{
|
||||
"class": "gray-400",
|
||||
"value": "var(--tb-gray-400)",
|
||||
"title": "Gray 400"
|
||||
},
|
||||
{
|
||||
"class": "gray-500",
|
||||
"value": "var(--tb-gray-500)",
|
||||
"title": "Gray 500"
|
||||
},
|
||||
{
|
||||
"class": "gray-600",
|
||||
"value": "var(--tb-gray-600)",
|
||||
"title": "Gray 600"
|
||||
},
|
||||
{
|
||||
"class": "gray-700",
|
||||
"value": "var(--tb-gray-700)",
|
||||
"title": "Gray 700"
|
||||
},
|
||||
{
|
||||
"class": "gray-800",
|
||||
"value": "var(--tb-gray-800)",
|
||||
"title": "Gray 800"
|
||||
},
|
||||
{
|
||||
"class": "gray-900",
|
||||
"value": "var(--tb-gray-900)",
|
||||
"title": "Gray 900"
|
||||
},
|
||||
{
|
||||
"class": "gray-950",
|
||||
"value": "var(--tb-gray-950)",
|
||||
"title": "Gray 950"
|
||||
}
|
||||
],
|
||||
skinColors: {
|
||||
"rose": {
|
||||
"hex": "#FFCB9D",
|
||||
|
||||
@@ -105,51 +105,51 @@
|
||||
],
|
||||
"light": [
|
||||
{
|
||||
"name": "blue-lt",
|
||||
"name": "blue-lightest",
|
||||
"value": "#e9f0f9"
|
||||
},
|
||||
{
|
||||
"name": "azure-lt",
|
||||
"name": "azure-lightest",
|
||||
"value": "#ecf5fc"
|
||||
},
|
||||
{
|
||||
"name": "indigo-lt",
|
||||
"name": "indigo-lightest",
|
||||
"value": "#eceffd"
|
||||
},
|
||||
{
|
||||
"name": "purple-lt",
|
||||
"name": "purple-lightest",
|
||||
"value": "#f7ecfa"
|
||||
},
|
||||
{
|
||||
"name": "pink-lt",
|
||||
"name": "pink-lightest",
|
||||
"value": "#fbebf0"
|
||||
},
|
||||
{
|
||||
"name": "red-lt",
|
||||
"name": "red-lightest",
|
||||
"value": "#fbebeb"
|
||||
},
|
||||
{
|
||||
"name": "orange-lt",
|
||||
"name": "orange-lightest",
|
||||
"value": "#fef0e6"
|
||||
},
|
||||
{
|
||||
"name": "yellow-lt",
|
||||
"name": "yellow-lightest",
|
||||
"value": "#fef5e6"
|
||||
},
|
||||
{
|
||||
"name": "lime-lt",
|
||||
"name": "lime-lightest",
|
||||
"value": "#f1f8e8"
|
||||
},
|
||||
{
|
||||
"name": "green-lt",
|
||||
"name": "green-lightest",
|
||||
"value": "#eaf7ec"
|
||||
},
|
||||
{
|
||||
"name": "teal-lt",
|
||||
"name": "teal-lightest",
|
||||
"value": "#e7f6f2"
|
||||
},
|
||||
{
|
||||
"name": "cyan-lt",
|
||||
"name": "cyan-lightest",
|
||||
"value": "#e8f6f8"
|
||||
}
|
||||
],
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<h3 class="mb-0">{{ include.title | default: "New website" }}</h3>
|
||||
<p class="text-secondary">Due to: {{ include.date | default: '28 Aug 2019' }}</p>
|
||||
<p class="mb-3">
|
||||
<span class="badge bg-{{ include.stage-color | default: 'green' }}-lt">{{ include.stage | default: 'Waiting' }}</span>
|
||||
<span class="badge bg-{{ include.stage-color | default: 'green' }}-lightest">{{ include.stage | default: 'Waiting' }}</span>
|
||||
</p>
|
||||
<div>
|
||||
{% include "ui/avatar-list.html" stacked=true offset=include.avatar-offset limit=include.avatar-limit %}
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
|
||||
{% assign mod = forloop.index | modulo: 2 %}
|
||||
{% if mod == 0 %}
|
||||
<span class="badge badge-secondary-lt">New</span>
|
||||
<span class="badge badge-secondary-lightest">New</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="text-end text-secondary d-none d-md-table-cell text-nowrap">{{ forloop.index | random_number: 4, 100 }} reviews</td>
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
<tr>
|
||||
<td>
|
||||
<div class="progressbg">
|
||||
{% include "ui/progress.html" value=url.bounce class="progressbg-progress" color="primary-lt" %}
|
||||
{% include "ui/progress.html" value=url.bounce class="progressbg-progress" color="primary-lightest" %}
|
||||
<div class="progressbg-text">{{ url.uri }}</div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<ul class="timeline{% if include.simple %} timeline-simple{% endif %}">
|
||||
<li class="timeline-event">
|
||||
<div class="timeline-event-icon bg-x-lt">{% include "ui/icon.html" icon="brand-x" %}</div>
|
||||
<div class="timeline-event-icon bg-x-lightest">{% include "ui/icon.html" icon="brand-x" %}</div>
|
||||
<div class="card timeline-event-card">
|
||||
<div class="card-body">
|
||||
<div class="text-secondary float-end">10 hrs ago</div>
|
||||
@@ -30,7 +30,7 @@
|
||||
</div>
|
||||
</li>
|
||||
<li class="timeline-event">
|
||||
<div class="timeline-event-icon bg-facebook-lt">{% include "ui/icon.html" icon="brand-facebook" %}</div>
|
||||
<div class="timeline-event-icon bg-facebook-lightest">{% include "ui/icon.html" icon="brand-facebook" %}</div>
|
||||
<div class="card timeline-event-card">
|
||||
<div class="card-body">
|
||||
<div class="text-secondary float-end">1 day ago</div>
|
||||
|
||||
@@ -6,11 +6,11 @@
|
||||
{% for color in colors %}
|
||||
<div class="row g-2 mb-3 align-items-center">
|
||||
<div class="col-auto">
|
||||
<div class="avatar bg-{{ color[0] }}{% if light %}-lt{% else %} text-white{% endif %}">{{ color[0] | capitalize | first_letter }}</div>
|
||||
<div class="avatar bg-{{ color.class }}{% if light %}-lt{% else %} text-white{% endif %}">{{ color.class | capitalize | first_letter }}</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="font-weight-semibold">{{ color[1].title }}</span><br/>
|
||||
<code>bg-{{ color[0] }}{% if light %}-lt{% endif %}</code>
|
||||
<span class="font-weight-semibold">{{ color.title }}</span><br/>
|
||||
<code>bg-{{ color.class }}{% if light %}-lt{% endif %}</code>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
{% endunless %}
|
||||
|
||||
{% for color in site.colors limit: 10 %}
|
||||
{% assign colors = colors | push: color[0] %}
|
||||
{% assign colors = colors | push: color.class %}
|
||||
{% endfor %}
|
||||
|
||||
<div class="mb-3">
|
||||
|
||||
@@ -29,8 +29,8 @@
|
||||
{% for color in site.colors %}
|
||||
<div class="col-auto">
|
||||
<label class="form-colorinput">
|
||||
<input name="theme-primary" type="radio" value="{{ color[0] }}" class="form-colorinput-input" />
|
||||
<span class="form-colorinput-color bg-{{ color[0] }}"></span>
|
||||
<input name="theme-primary" type="radio" value="{{ color.class }}" class="form-colorinput-input" />
|
||||
<span class="form-colorinput-color bg-{{ color.class }}"></span>
|
||||
</label>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
@@ -54,7 +54,7 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
}
|
||||
},
|
||||
{% else %}
|
||||
colors: [{% if include.color %}'{{ include.color }}'{% else %}{% for color in site.colors limit: colors %}tabler.getColor("{{ color[0] }}"), {% endfor %}{% endif %}],
|
||||
colors: [{% if include.color %}'{{ include.color }}'{% else %}{% for color in site.colors limit: colors %}tabler.getColor("{{ color.class }}"), {% endfor %}{% endif %}],
|
||||
{% endif %}
|
||||
series: [
|
||||
{% for i in site.monthsShort limit: 12 %}
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
{% if include['swatches-only'] %}swatchesOnly: true,{% endif %}
|
||||
swatches: [
|
||||
{% for color in site.colors %}
|
||||
"{{ color[1].hex }}",
|
||||
"{{ color.hex }}",
|
||||
{% endfor %}
|
||||
],
|
||||
}))
|
||||
|
||||
@@ -41,7 +41,7 @@
|
||||
{% elsif include.indicator == 'label' %}
|
||||
{% capture indicator-html %}
|
||||
{% assign label = option[1].label %}
|
||||
<span class="badge bg-primary-lt">{{ label }}</span>
|
||||
<span class="badge bg-primary-lightest">{{ label }}</span>
|
||||
{% endcapture %}
|
||||
{% endif %}
|
||||
<option value="{{ option[0] }}"{% if include.indicator %} data-custom-properties="{{ indicator-html | strip | escape }}"{% endif %}{% if option[1].selected %} selected{% endif %}>{{ option[1].name }}</option>
|
||||
|
||||
@@ -6,7 +6,7 @@ layout: default
|
||||
permalink: badges.html
|
||||
---
|
||||
|
||||
{% assign colors = "" | split: "," %} {% assign colors = colors | push: "default" %} {% for color in site.colors %} {% assign colors = colors | push: color[0]
|
||||
{% assign colors = "" | split: "," %} {% assign colors = colors | push: "default" %} {% for color in site.colors %} {% assign colors = colors | push: color.class
|
||||
%} {% endfor %} {% assign colors = colors | push: "dark" | push: "light" %}
|
||||
|
||||
<div class="row row-cards">
|
||||
@@ -105,7 +105,7 @@ permalink: badges.html
|
||||
<h3 class="card-title">Light badges</h3>
|
||||
<div class="badges-list">
|
||||
{% for color in colors %}
|
||||
<span class="badge bg-{{ color }}-lt">{{ color | uc_first }}</span>
|
||||
<span class="badge bg-{{ color }}-lightest">{{ color | uc_first }}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -100,7 +100,7 @@ permalink: cards.html
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card bg-primary-lt">
|
||||
<div class="card bg-primary-lightest">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Card with primary light background</h3>
|
||||
<p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
|
||||
|
||||
@@ -13,7 +13,7 @@ permalink: colorpicker.html
|
||||
<div class="row g-3">
|
||||
{% for color in site.colors %}
|
||||
<div class="col-2">
|
||||
<div>{% include "ui/colorpicker.html" value=color[1].hex id=forloop.index format="hex" %}</div>
|
||||
<div>{% include "ui/colorpicker.html" value=color.hex id=forloop.index format="hex" %}</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
@@ -8,11 +8,70 @@ permalink: colors.html
|
||||
|
||||
{% assign colors = '' | split: '' %}
|
||||
{% for color in site.colors %}
|
||||
{% assign colors = colors | push: color[0] %}
|
||||
{% assign colors = colors | push: color.class %}
|
||||
{% endfor %}
|
||||
{% assign colors = colors | push: 'dark' %}
|
||||
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body text-center">
|
||||
<div class="row g-3">
|
||||
<div class="col-12">
|
||||
<div class="row g-0 rounded overflow-hidden">
|
||||
{% for color in site.colors %}
|
||||
<div class="col">
|
||||
<div class="bg-{{ color.class }} text-{{ color.class }}-fg py-5">{{ color.class }}</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="row g-0 rounded overflow-hidden">
|
||||
{% for color in site.colors %}
|
||||
<div class="col">
|
||||
<div class="bg-{{ color.class }}-darker text-{{ color.class }}-fg py-5">{{ color.class }}</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="row g-0 rounded overflow-hidden">
|
||||
{% for color in site.colors %}
|
||||
<div class="col">
|
||||
<div class="bg-{{ color.class }}-lighter text-{{ color.class }} py-5">{{ color.class }}</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="row g-0 rounded overflow-hidden">
|
||||
{% for color in site.colors %}
|
||||
<div class="col">
|
||||
<div class="bg-{{ color.class }}-lightest text-{{ color.class }} py-5">{{ color.class }}</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="row g-0 rounded overflow-hidden">
|
||||
<div class="col">
|
||||
<div class="bg-white text-white-fg py-5">white</div>
|
||||
</div>
|
||||
{% for color in site.grayColors %}
|
||||
<div class="col">
|
||||
<div class="bg-{{ color.class }} text-{{ color.class }}-fg py-5">{{ color.class }}</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
<div class="col">
|
||||
<div class="bg-black text-black-fg py-5">black</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
@@ -29,7 +88,7 @@ permalink: colors.html
|
||||
<tr>
|
||||
{% for color in colors %}
|
||||
<td>
|
||||
<div class="avatar bg-{{ color }}-lt" data-demo-color>{{ color | slice: 0, 2 }}</div>
|
||||
<div class="avatar bg-{{ color }}-lightest" data-demo-color>{{ color | slice: 0, 2 }}</div>
|
||||
</td>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
@@ -61,7 +120,7 @@ permalink: colors.html
|
||||
{% for color in colors %}
|
||||
<td>
|
||||
{% if color == 'dark' %}{% assign c = 'white' %}{% else %}{% assign c = color %}{% endif %}
|
||||
<div class="avatar bg-{{ c }}-lt" data-demo-color>{{ c | slice: 0, 2 }}</div>
|
||||
<div class="avatar bg-{{ c }}-lightest" data-demo-color>{{ c | slice: 0, 2 }}</div>
|
||||
<div class="mt-2" data-demo-color-contrast></div>
|
||||
</td>
|
||||
{% endfor %}
|
||||
|
||||
@@ -48,8 +48,8 @@ permalink: illustrations.html
|
||||
{% for color in site.colors %}
|
||||
<div class="col-auto">
|
||||
<label class="form-colorinput">
|
||||
<input name="color" type="radio" value="{{ color[1].hex }}" class="form-colorinput-input js-select-color" />
|
||||
<span class="form-colorinput-color bg-{{ color[1].class }}"></span>
|
||||
<input name="color" type="radio" value="{{ color.hex }}" class="form-colorinput-input js-select-color" />
|
||||
<span class="form-colorinput-color bg-{{ color.class }}"></span>
|
||||
</label>
|
||||
</div>
|
||||
{% endfor %}
|
||||
@@ -60,8 +60,8 @@ permalink: illustrations.html
|
||||
{% for color in site.skinColors %}
|
||||
<div class="col-auto">
|
||||
<label class="form-colorinput">
|
||||
<input name="skin-color" type="radio" value="{{ color[1].hex }}" class="form-colorinput-input js-select-skin-color" {% if forloop.first %} checked{% endif %} />
|
||||
<span class="form-colorinput-color" style="background-color: {{ color[1].hex }}"></span>
|
||||
<input name="skin-color" type="radio" value="{{ color.hex }}" class="form-colorinput-input js-select-skin-color" {% if forloop.first %} checked{% endif %} />
|
||||
<span class="form-colorinput-color" style="background-color: {{ color.hex }}"></span>
|
||||
</label>
|
||||
</div>
|
||||
{% endfor %}
|
||||
@@ -142,8 +142,8 @@ permalink: illustrations.html
|
||||
|
||||
{% capture_script %}
|
||||
<script>
|
||||
let skinColor = "{{ skin_color[1].hex }}",
|
||||
primaryColor = "{{ color[1].hex }}";
|
||||
let skinColor = "{{ skin_color.hex }}",
|
||||
primaryColor = "{{ color.hex }}";
|
||||
|
||||
const illustrations = {
|
||||
{% for illustration in free-illustrations.autodark %}
|
||||
|
||||
@@ -68,8 +68,8 @@ permalink: tags.html
|
||||
<h3 class="card-title">Tags with status</h3>
|
||||
<div class="tags-list">
|
||||
{% for color in site.colors %}
|
||||
{% capture status %}{{ color[1].class }}{% endcapture %}
|
||||
{% capture text %}{{ color[1].title }}{% endcapture %}
|
||||
{% capture status %}{{ color.class }}{% endcapture %}
|
||||
{% capture text %}{{ color.title }}{% endcapture %}
|
||||
{% include "ui/tag.html" text=text status=status %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
@@ -83,8 +83,8 @@ permalink: tags.html
|
||||
<h3 class="card-title">Tags with legend</h3>
|
||||
<div class="tags-list">
|
||||
{% for color in site.colors %}
|
||||
{% capture status %}{{ color[1].class }}{% endcapture %}
|
||||
{% capture text %}{{ color[1].title }}{% endcapture %}
|
||||
{% capture status %}{{ color.class }}{% endcapture %}
|
||||
{% capture text %}{{ color.title }}{% endcapture %}
|
||||
{% include "ui/tag.html" text=text legend=status %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
@@ -21,9 +21,9 @@ permalink: users.html
|
||||
|
||||
<div class="mt-3">
|
||||
{% if forloop.index == 1 %}
|
||||
<span class="badge bg-purple-lt">Owner</span>
|
||||
<span class="badge bg-purple-lightest">Owner</span>
|
||||
{% elsif forloop.index < 5 %}
|
||||
<span class="badge bg-green-lt">Admin</span>
|
||||
<span class="badge bg-green-lightest">Admin</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user