mirror of
https://github.com/tabler/tabler.git
synced 2026-07-26 04:54:40 +04:00
tabler v1
This commit is contained in:
codecalm
@@ -30,7 +30,6 @@ plugins:
|
||||
tabler-plugins:
|
||||
- tabler-flags
|
||||
- tabler-payments
|
||||
- tabler-buttons
|
||||
|
||||
exclude:
|
||||
- .jekyll-cache
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
// Autosize plugin
|
||||
|
||||
import autosize from 'autosize';
|
||||
|
||||
const elements = document.querySelectorAll('[data-toggle="autosize"]');
|
||||
if (elements.length) {
|
||||
elements.forEach(function (element) {
|
||||
autosize(element);
|
||||
});
|
||||
}
|
||||
+2
-1
@@ -1,5 +1,6 @@
|
||||
//Vendor
|
||||
// import 'bootstrap';
|
||||
|
||||
import './autosize';
|
||||
|
||||
(function() {
|
||||
/**
|
||||
|
||||
@@ -168,7 +168,6 @@ development-activity:
|
||||
legend-position: 'top'
|
||||
sparkline: true
|
||||
datetime: true
|
||||
title: Development Activity
|
||||
series:
|
||||
- name: 'Purchases'
|
||||
color: blue
|
||||
|
||||
@@ -169,6 +169,9 @@ layout:
|
||||
dark-mode:
|
||||
url: layout-dark.html
|
||||
title: Dark mode
|
||||
rtl-mode:
|
||||
url: layout-rtl.html
|
||||
title: RTL mode
|
||||
fluid:
|
||||
url: layout-fluid.html
|
||||
title: Fluid
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Autosize
|
||||
menu: docs.autosize
|
||||
description: The autosize element will automatically adjust the textarea height and make it easier for users to follow as they type.
|
||||
done: true
|
||||
libs: autosize
|
||||
---
|
||||
|
||||
|
||||
@@ -79,6 +79,7 @@ Using Bootstrap’s typical naming structure, you can create a standard avatar o
|
||||
{% include ui/avatar.html person-id=8 size="md" %}
|
||||
{% include ui/avatar.html person-id=7 %}
|
||||
{% include ui/avatar.html person-id=6 size="sm" %}
|
||||
{% include ui/avatar.html person-id=5 size="xs" %}
|
||||
{% endcapture %}
|
||||
{% include example.html code=code centered=true %}
|
||||
|
||||
|
||||
+20
-18
@@ -66,27 +66,29 @@ Leave the HTML element empty if you want to create badges without any text. Empt
|
||||
{% include example.html code=code centered=true %}
|
||||
|
||||
|
||||
### Badge add-ons
|
||||
|
||||
Add the `.badge-addon` class to create an add-on that will customize your badge and make it more noticeable. You can use any color variants and combine them as you see fit.
|
||||
|
||||
{% capture code %}
|
||||
{% include ui/badge.html text="task" color="green" addon="finished" %}
|
||||
{% include ui/badge.html text="bundle" color="purple" addon="passing" %}
|
||||
{% include ui/badge.html text="CSS gzip size" color="red-lt" addon="20.9kB" addon-color="red" %}
|
||||
{% endcapture %}
|
||||
{% include example.html code=code %}
|
||||
|
||||
|
||||
### Badge avatars
|
||||
## Badge avatars
|
||||
|
||||
Create the `.badge-avatar` class to add an avatar that will make a badge more personalized.
|
||||
|
||||
{% capture code %}
|
||||
{% include ui/badge.html person-id=1 color="blue" %}
|
||||
{% include ui/badge.html person-id=2 color="blue" %}
|
||||
{% include ui/badge.html person-id=3 color="blue" %}
|
||||
{% include ui/badge.html person-id=4 color="blue" %}
|
||||
{% include ui/badge.html person-id=5 color="blue" %}
|
||||
{% include ui/badge.html person-id=1 %}
|
||||
{% include ui/badge.html person-id=2 %}
|
||||
{% include ui/badge.html person-id=3 %}
|
||||
{% include ui/badge.html person-id=4 %}
|
||||
{% include ui/badge.html person-id=5 %}
|
||||
{% endcapture %}
|
||||
{% include example.html code=code %}
|
||||
|
||||
## Button with badge
|
||||
|
||||
Badges can be used as part of links or buttons to provide a counter.
|
||||
|
||||
{% capture code %}
|
||||
<button type="button" class="btn">
|
||||
Notifications <span class="badge bg-red ml-2">4</span>
|
||||
</button>
|
||||
<button type="button" class="btn">
|
||||
Notifications <span class="badge bg-green ml-2">4</span>
|
||||
</button>
|
||||
{% endcapture %}
|
||||
{% include example.html code=code wrapper="btn-list" %}
|
||||
@@ -2,8 +2,7 @@
|
||||
title: Buttons
|
||||
description: Use button styles that best suit your designs and encourage users to take the desired actions. You can customize the button's properties to improve the user experience of your website or system, changing the size, shape, color and many more.
|
||||
bootstrap-link: components/buttons/
|
||||
done: true
|
||||
libs: tabler-buttons
|
||||
menu: docs.buttons
|
||||
---
|
||||
|
||||
|
||||
@@ -12,15 +11,24 @@ libs: tabler-buttons
|
||||
As one of the most common elements of UI design, buttons have a very important function of engaging users with your website or app and guiding them in their actions. Use the `.btn` classes with the `<button>` element and add additional styling that will make your buttons serve their purpose and draw users' attention.
|
||||
|
||||
{% capture code %}
|
||||
<a href="#" class="btn btn-primary" role="button">Link</a>
|
||||
<button class="btn btn-primary">Button</button>
|
||||
<input type="button" class="btn btn-primary" value="Input"/>
|
||||
<input type="submit" class="btn btn-primary" value="Submit"/>
|
||||
<input type="reset" class="btn btn-primary" value="Reset"/>
|
||||
<a href="#" class="btn" role="button">Link</a>
|
||||
<button class="btn">Button</button>
|
||||
<input type="button" class="btn" value="Input"/>
|
||||
<input type="submit" class="btn" value="Submit"/>
|
||||
<input type="reset" class="btn" value="Reset"/>
|
||||
{% endcapture %}
|
||||
{% include example.html code=code wrapper="btn-list" centered=true %}
|
||||
|
||||
|
||||
## Default button
|
||||
|
||||
The standard button creates a white background and subtle hover animation. It's meant to look and behave as an interactive element of your page.
|
||||
|
||||
{% capture code %}
|
||||
<a href="#" class="btn" role="button">Link</a>
|
||||
{% endcapture %}
|
||||
{% include example.html code=code wrapper="btn-list" centered=true %}
|
||||
|
||||
## Button variations
|
||||
|
||||
Use the button classes that correspond to the function of your button. The big range of available colors will help you show your buttons' purpose and make them easy to spot.
|
||||
|
||||
@@ -3,7 +3,6 @@ title: Cards
|
||||
menu: docs.cards
|
||||
description: Cards are flexible user interface elements, which help organize content into meaningful sections and make it easier to display on different screen sizes. Cards contain various smaller components, such as images, text, links and buttons and may act as an entry to more detailed information, helping users scan the page quickly and find the most relevant content.
|
||||
bootstrap-link: components/card/
|
||||
done: true
|
||||
---
|
||||
|
||||
|
||||
|
||||
@@ -3,7 +3,6 @@ title: Colors
|
||||
menu: docs.colors
|
||||
description: The choice of colors for a website or app interface has an big influence on how users interact with the product and what decisions they make. Harmonic colors can contribute to a nice first impression and encourage users to engage with your product, so it's a very important aspect of a successful design, which needs to be well thought out.
|
||||
bootstrap-link: utilities/colors/
|
||||
done: true
|
||||
---
|
||||
|
||||
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Divider
|
||||
description: Dividers help organize content and make the interface layout clear and uncluttered. Greater clarity adds up to better user experience and enhanced interaction with a website or app.
|
||||
bootstrap-link: components/dropdowns/#dividers
|
||||
done: true
|
||||
---
|
||||
|
||||
|
||||
|
||||
@@ -3,7 +3,6 @@ title: Flags
|
||||
menu: docs.flags
|
||||
description: Thanks to the Tabler flags plug-in, you can create flags to visually represent countries or languages. Flags are often used in forms, as an element of a delivery address, phone number dialling code and many more.
|
||||
plugin: flags
|
||||
done: true
|
||||
libs: tabler-flags
|
||||
---
|
||||
|
||||
|
||||
@@ -3,7 +3,6 @@ title: Payments
|
||||
menu: docs.payments
|
||||
description: The Tabler payments plug-in will let you use a set of payment provider icons to facilitate the payment process and make it more-user friendly.
|
||||
plugin: payments
|
||||
done: true
|
||||
---
|
||||
|
||||
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Progress bars
|
||||
description: Progress bars are used to provide feedback on an action status and inform users of the current progress. Although seemingly small interface elements, they are extremely hepful in managing users' expectations and preventing them from abandoning a process they have initiated.
|
||||
bootstrap-link: components/progress
|
||||
done: true
|
||||
---
|
||||
|
||||
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Ribbons
|
||||
menu: docs.ribbons
|
||||
description: Ribbons are graphical elements which attract users' attention to a given element of an interface and make it stand out.
|
||||
done: true
|
||||
---
|
||||
|
||||
|
||||
|
||||
@@ -3,7 +3,6 @@ title: Spinners
|
||||
menu: docs.spinners
|
||||
description: Spinners are used to show the loading state of a component or page. They provide feedback for an action a user has taken, when it takes a bit longer to complete.
|
||||
bootstrap-link: components/spinners/
|
||||
done: true
|
||||
---
|
||||
|
||||
|
||||
|
||||
@@ -1,5 +1,8 @@
|
||||
<div class="card">
|
||||
{% include ui/chart.html chart-id="development-activity" height=10 class="mt-4" %}
|
||||
<div class="card-header border-0">
|
||||
<div class="card-title">Development activity</div>
|
||||
</div>
|
||||
{% include ui/chart.html chart-id="development-activity" height=12 %}
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table card-table table-vcenter">
|
||||
@@ -14,7 +17,7 @@
|
||||
{% for commit in site.data.commits limit: 5 %}
|
||||
<tr>
|
||||
<td class="w-1">
|
||||
{% include ui/avatar.html person-id=forloop.index %}
|
||||
{% include ui/avatar.html person-id=forloop.index size="sm" %}
|
||||
</td>
|
||||
<td class="td-truncate">
|
||||
<div class="text-truncate">
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center">
|
||||
{% include ui/avatar.html person=include.person class="mr-3 rounded" %}
|
||||
<div class="lh-sm">
|
||||
<div>
|
||||
<div>{{ include.person.full_name }}</div>
|
||||
<div class="text-muted">{{ forloop.index | random_date_ago: 10 | timeago }}</div>
|
||||
</div>
|
||||
@@ -14,7 +14,11 @@
|
||||
{{ forloop.index | random_number: 300, 600 }}
|
||||
</a>
|
||||
<a href="#" class="ml-3 text-muted">
|
||||
{% include ui/icon.html icon="heart" %}
|
||||
{% assign class = false %}
|
||||
{% if forloop.index > 2 and forloop.index < 9 or forloop.index == 10 %}
|
||||
{% assign class = "icon-filled text-red" %}
|
||||
{% endif %}
|
||||
{% include ui/icon.html icon="heart" class=class %}
|
||||
{{ forloop.index | random_number: 20, 100 }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
<li class="icons-list-item">
|
||||
{% assign svg-icon = icon[1] %}
|
||||
<a href="#" class="text-reset" data-toggle-icon="{{ icon[0] }}" data-toggle="tooltip" title="{{ icon[0] }}">
|
||||
{% include ui/icon.html svg-icon=svg-icon class="icon-md" %}
|
||||
{% include ui/icon.html svg-icon=svg-icon %}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
<tr>
|
||||
<td>
|
||||
{{ page.uri }}
|
||||
<a href="#" class="link-secondary ml-2">{% include ui/icon.html icon="link" %}</a>
|
||||
<a href="#" class="ml-1">{% include ui/icon.html icon="link" %}</a>
|
||||
</td>
|
||||
<td class="text-muted">{{ page.visitors | format_number }}</td>
|
||||
<td class="text-muted">{{ page.unique | format_number }}</td>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<div class="card">
|
||||
<div class="card-body p-4 py-5 text-center">
|
||||
{% include ui/avatar.html size="xl" placeholder="W" class="mb-4" color=include.project-color %}
|
||||
{% include ui/avatar.html size="xl" placeholder="W" class="mb-4" color=include.project-color rounded=true %}
|
||||
<h3 class="mb-0">{{ include.title | default: "New website" }}</h3>
|
||||
<p class="text-muted">Due to: {{ include.date | default: '28 Aug 2019' }}</p>
|
||||
<p class="mb-3">
|
||||
|
||||
@@ -14,8 +14,8 @@
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="mr-3 lh-sm">
|
||||
<div class="strong">
|
||||
<div class="mr-3">
|
||||
<div class="font-weight-medium">
|
||||
{{ include.count | default: 1700 | format_number }} {{ include.subtitle }}
|
||||
{% if include.small-icon %}
|
||||
{% include ui/icon.html icon=include.small-icon color=include.color class="icon-sm ml-1" %}
|
||||
|
||||
@@ -30,7 +30,7 @@
|
||||
{% include ui/icon.html icon="message" %} {{ forloop.index | random_number: 0, 12 }}</a>
|
||||
</td>
|
||||
<td>
|
||||
{% include ui/avatar.html person-id=forloop.index %}
|
||||
{% include ui/avatar.html size="sm" person-id=forloop.index %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
|
||||
@@ -5,8 +5,8 @@
|
||||
<div class="float-{% if include.right %}right{% else %}left mr-3{% endif %}">
|
||||
{% include ui/avatar.html person=person class="rounded" %}
|
||||
</div>
|
||||
<div class="lh-sm">
|
||||
<div class="strong">{{ person.full_name }}</div>
|
||||
<div>
|
||||
<div class="font-weight-medium">{{ person.full_name }}</div>
|
||||
<div class="text-muted">{{ person.job_title }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -20,11 +20,9 @@
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Form buttons</label>
|
||||
<div class="btn-list">
|
||||
{% include ui/button.html color="white" block=true icon="brand/github" icon-color="github" text="Login with Github" %}
|
||||
{% include ui/button.html color="white" block=true icon="brand/twitter" icon-color="twitter" text="Login with Twitter" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Tags input</label>
|
||||
|
||||
@@ -13,7 +13,8 @@
|
||||
|
||||
<div class="nav-item dropdown">
|
||||
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
|
||||
{% include ui/avatar.html person-id=person-id %}
|
||||
{% include ui/avatar.html person-id=person-id size="sm" %}
|
||||
|
||||
{% unless include.hide-username %}
|
||||
<div class="d-none d-xl-block pl-2">
|
||||
<div>{{ person.full_name }}</div>
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
<div class="form-selectgroup-label-content d-flex align-items-center">
|
||||
{% include ui/avatar.html person=person class="mr-3" %}
|
||||
<div class="lh-sm">
|
||||
<div class="strong">{{ person.full_name }}</div>
|
||||
<div class="font-weight-medium">{{ person.full_name }}</div>
|
||||
<div class="text-muted">{{ person.job_title }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{% include ui/modal/close.html %}
|
||||
<div class="modal-body text-center py-5">
|
||||
|
||||
{% include ui/icon.html icon="circle-check" color="green" class="icon-xl mb-4" %}
|
||||
{% include ui/icon.html icon="circle-check" color="green" class="mb-4" %}
|
||||
|
||||
<h3>Payment succedeed</h3>
|
||||
<div class="text-muted">Your payment of $290 has been successfully submitted. Your invoice has been sent to support@tabler.io.</div>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{% assign el = 'span' %}
|
||||
<{{ el }} class="badge bg-{{ include.color | default: 'primary' }}{% if include.class %} {{ include.class }}{% endif %}">
|
||||
<{{ el }} class="badge{% if include.color %} bg-{{ include.color }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
|
||||
{% if include.person-id %}
|
||||
{% assign person-id = include.person-id | minus: 1 %}
|
||||
{% assign person = site.data.people[person-id] %}
|
||||
@@ -7,7 +7,7 @@
|
||||
{% unless src %}
|
||||
{% assign placeholder = person.full_name | first_letters %}
|
||||
{% endunless %}
|
||||
<{{ el }} class="badge-avatar" style="background-image: url({{ site.base }}/{{ src }})">{% unless src %}{{ person.full_name | first_letters }}{% endunless %}</{{ el }}>
|
||||
<{{ el }} class="avatar" style="background-image: url({{ site.base }}/{{ src }})">{% unless src %}{{ person.full_name | first_letters }}{% endunless %}</{{ el }}>
|
||||
{% endif %}
|
||||
{% if include.text %}
|
||||
{{ include.text }}
|
||||
|
||||
@@ -1,15 +1 @@
|
||||
<textarea class="form-control{% if include.class %} {{ include.class }}{% endif %}" data-toggle="autosize" placeholder="{{ include.placeholder | default: 'Typing something…' }}"{% if include.rows %} rows="{{ include.rows }}"{% endif %}></textarea>
|
||||
|
||||
{% capture_once scripts %}
|
||||
<script>
|
||||
(function () {
|
||||
const elements = document.querySelectorAll('[data-toggle="autosize"]');
|
||||
|
||||
if (elements.length) {
|
||||
elements.forEach(function (element) {
|
||||
autosize(element);
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
{% endcapture_once %}
|
||||
<textarea class="form-control{% if include.class %} {{ include.class }}{% endif %}" data-toggle="autosize" placeholder="{{ include.placeholder | default: 'Type something…' }}"{% if include.rows %} rows="{{ include.rows }}"{% endif %}></textarea>
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
strokeWidth: 2,
|
||||
fill: {% if type == 'pie' %}["{{ color | default: 'blue' | tabler_color }}", "{{ 'border-color' | tabler_color }}"]{% elsif type == 'line' %}["{{ color | append: '-100' | tabler_color }}"]{% else %}"transparent"{% endif %},
|
||||
padding: .2,
|
||||
{% if type == 'pie' %}innerRadius: 17,{% endif %}
|
||||
{% if type == 'pie' %}innerRadius: 16,{% endif %}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
<div class="d-flex lh-sm py-1 align-items-center">
|
||||
{% include ui/avatar.html person-id=person.id class="mr-2" %}
|
||||
<div class="flex-fill">
|
||||
<div class="strong">{{ person.full_name }}</div>
|
||||
<div class="font-weight-medium">{{ person.full_name }}</div>
|
||||
<div class="text-muted text-h5"><a href="#" class="text-reset">{{ person.email }}</a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -13,7 +13,7 @@ page-header: Documentation
|
||||
{% assign toc = content | toc_only %}
|
||||
|
||||
|
||||
<div class="sticky-top lh-lg">
|
||||
<div class="sticky-top lh-lg py-4">
|
||||
{% include ui/button.html href=site.github_url text="Browse source code" icon="brand/github" color="white" external=true block=true class="mb-6" %}
|
||||
|
||||
{% if toc != '' %}
|
||||
@@ -47,7 +47,7 @@ page-header: Documentation
|
||||
|
||||
<div class="markdown">
|
||||
<div class="d-flex">
|
||||
<h2 class="h1 mt-0 mb-3">{{ page.title }}</h2>
|
||||
<h1 class="h2 mt-0 mb-3">{{ page.title }}</h1>
|
||||
|
||||
{% if page.bootstrap-link %}
|
||||
<p class="ml-auto">
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
---
|
||||
title: Blank page
|
||||
blank: true
|
||||
done: true
|
||||
menu: base.blank
|
||||
container-centered: true
|
||||
---
|
||||
|
||||
@@ -1,9 +1,7 @@
|
||||
---
|
||||
title: Buttons
|
||||
page-header: Buttons
|
||||
done: true
|
||||
menu: base.buttons
|
||||
libs: tabler-buttons
|
||||
---
|
||||
|
||||
<div class="row">
|
||||
|
||||
@@ -3,7 +3,6 @@ title: Cards Masonry
|
||||
page-header: Cards Masonry
|
||||
menu: base.cards-masonry
|
||||
libs: masonry
|
||||
done: true
|
||||
---
|
||||
|
||||
<div class="row" data-masonry='{"percentPosition": true }'>
|
||||
|
||||
@@ -3,7 +3,6 @@ title: Cards
|
||||
page-header: Cards
|
||||
menu: base.cards
|
||||
libs: imask
|
||||
done: true
|
||||
---
|
||||
|
||||
<div class="row">
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Carousel
|
||||
page-header: Carousel
|
||||
layout: default
|
||||
done: true
|
||||
menu: base.carousel
|
||||
---
|
||||
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Changelog
|
||||
page-header: Changelog
|
||||
menu: changelog
|
||||
done: true
|
||||
---
|
||||
<div class="card card-lg">
|
||||
<div class="card-body markdown">
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
---
|
||||
title: Heatmap Charts
|
||||
page-header: Heatmap Charts
|
||||
done: true
|
||||
---
|
||||
|
||||
<div class="row">
|
||||
|
||||
@@ -3,7 +3,6 @@ title: Charts
|
||||
page-header: Charts
|
||||
menu: base.charts
|
||||
libs: apexcharts
|
||||
done: true
|
||||
---
|
||||
|
||||
<div class="row">
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
---
|
||||
title: Crypto currencies
|
||||
page-header: Crypto currencies
|
||||
done: true
|
||||
---
|
||||
|
||||
<div class="card">
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
---
|
||||
redirect_to: ./docs/index.html
|
||||
layout: redirect
|
||||
done: true
|
||||
title: Documentation
|
||||
---
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Dropdowns
|
||||
page-header: Dropdowns
|
||||
menu: base.dropdowns
|
||||
done: true
|
||||
---
|
||||
|
||||
<div class="row">
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
---
|
||||
title: Empty page
|
||||
done: true
|
||||
menu: base.empty
|
||||
page-header: Empty page
|
||||
---
|
||||
|
||||
@@ -2,5 +2,4 @@
|
||||
title: Page 404
|
||||
layout: error
|
||||
error: 404
|
||||
done: true
|
||||
---
|
||||
|
||||
@@ -2,5 +2,4 @@
|
||||
title: Page 500
|
||||
layout: error
|
||||
error: 500
|
||||
done: true
|
||||
---
|
||||
|
||||
@@ -2,5 +2,4 @@
|
||||
title: Maintenance mode
|
||||
layout: error
|
||||
error: maintenance
|
||||
done: true
|
||||
---
|
||||
|
||||
@@ -1,14 +0,0 @@
|
||||
---
|
||||
title: Flags
|
||||
page-header: Flags
|
||||
done: true
|
||||
---
|
||||
<div class="d-flex flex-row flex-wrap">
|
||||
{% for flag in site.data.flags %}
|
||||
<div class="d-flex flex-column text-center m-3">
|
||||
<p class="d-inline-block">{{flag.name}}</p>
|
||||
{% include ui/flag.html flag=flag.flag class="my-3 mx-auto" %}
|
||||
<code>.flag .flag-{{flag.flag}}</code>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
@@ -3,24 +3,18 @@ title: Gallery
|
||||
page-header: Gallery
|
||||
page-header-description: 1-12 of 241 photos
|
||||
page-header-actions: photos
|
||||
done: true
|
||||
menu: extra.gallery
|
||||
---
|
||||
{% assign horizontal = 0 %}
|
||||
|
||||
<div class="row">
|
||||
{% for photo in site.data.photos %}
|
||||
{% if photo.horizontal %}
|
||||
{% assign photos = site.data.photos | where: "horizontal", true %}
|
||||
|
||||
{% for photo in photos limit: 12 %}
|
||||
{% assign person = site.data.people[forloop.index0] %}
|
||||
<div class="col-sm-6 col-lg-4">
|
||||
{% include cards/gallery-photo.html person=person %}
|
||||
</div>
|
||||
{% assign horizontal = horizontal | plus: 1 %}
|
||||
{% endif %}
|
||||
|
||||
{% if horizontal == 12 %}
|
||||
{% break %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Icons
|
||||
page-header: Icons
|
||||
menu: base.icons
|
||||
done: true
|
||||
---
|
||||
|
||||
<div class="row">
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Invoice
|
||||
layout: default
|
||||
menu: extra.invoice
|
||||
done: true
|
||||
---
|
||||
|
||||
{% include cards/invoice.html %}
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
---
|
||||
title: Dashboard
|
||||
page-header: Dashboard
|
||||
page-header-pretitle: Overview
|
||||
page-header-actions: buttons
|
||||
rtl: true
|
||||
menu: home
|
||||
libs: jquery, apexcharts, peity, jqvmap, jqvmap-world
|
||||
---
|
||||
|
||||
{% include layout/homepage.html %}
|
||||
@@ -3,7 +3,6 @@ menu: base.lists
|
||||
title: Lists
|
||||
page-header: Lists
|
||||
menu: base.lists
|
||||
done: true
|
||||
---
|
||||
|
||||
<div class="row">
|
||||
|
||||
@@ -3,7 +3,6 @@ title: Vector Maps
|
||||
page-header: Vector Maps
|
||||
menu: base.maps-vector
|
||||
libs: jquery, jqvmap, jqvmap-world, jqvmap-europe, jqvmap-usa
|
||||
done: true
|
||||
---
|
||||
|
||||
<div class="row">
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
---
|
||||
done: true
|
||||
title: Markdown
|
||||
page-header: Markdown
|
||||
---
|
||||
@@ -94,8 +93,3 @@ Bloody Peasant! What do you mean? It's only a model. Well, Mercia's a temperate
|
||||
##### Heading 5
|
||||
|
||||
Bloody Peasant! What do you mean? It's only a model. Well, Mercia's a temperate zone!
|
||||
|
||||
|
||||
###### Heading 6
|
||||
|
||||
Bloody Peasant! What do you mean? It's only a model. Well, Mercia's a temperate zone!
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Modals
|
||||
page-header: Modals
|
||||
menu: base.modals
|
||||
done: true
|
||||
---
|
||||
|
||||
<div class="card">
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
menu: base.navigation
|
||||
title: Navigation
|
||||
page-header: Navigation
|
||||
done: true
|
||||
---
|
||||
|
||||
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Pagination
|
||||
page-header: Pagination
|
||||
menu: base.pagination
|
||||
done: true
|
||||
---
|
||||
|
||||
{% card %}
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
---
|
||||
title: Pricing cards
|
||||
page-header: Pricing cards
|
||||
done: true
|
||||
menu: extra.pricing
|
||||
---
|
||||
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
---
|
||||
done: true
|
||||
page-header: Search results
|
||||
page-header-description: About 2,410 result (0.19 seconds)
|
||||
menu: extra.search-results
|
||||
@@ -11,18 +10,13 @@ menu: extra.search-results
|
||||
</div>
|
||||
<div class="col-9">
|
||||
<div class="row">
|
||||
{% for photo in site.data.photos %}
|
||||
{% if photo.horizontal %}
|
||||
{% assign photos = site.data.photos | where: "horizontal", true %}
|
||||
|
||||
{% for photo in photos %}
|
||||
{% assign person = site.data.people[forloop.index0] %}
|
||||
<div class="col-sm-6 col-lg-4">
|
||||
{% include cards/gallery-photo.html person=person hide-likes=true %}
|
||||
</div>
|
||||
{% assign horizontal = horizontal | plus: 1 %}
|
||||
{% endif %}
|
||||
|
||||
{% if horizontal == 12 %}
|
||||
{% break %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
---
|
||||
layout: card
|
||||
---
|
||||
|
||||
<div class="row g-3">
|
||||
{% for item in site.data.settings %}
|
||||
<div class="col-4">
|
||||
<a href="#">
|
||||
<div class="row g-3">
|
||||
<div class="col-auto">
|
||||
<div class="avatar">{% include ui/icon.html icon=item.icon %}</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h4 class="m-0">{{ item.title }}</h4>
|
||||
<div class="text-muted">{{ item.description }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
@@ -1,6 +1,5 @@
|
||||
---
|
||||
title: Social elements
|
||||
done: true
|
||||
container-size: narrow
|
||||
---
|
||||
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
---
|
||||
done: true
|
||||
page-header: Tables
|
||||
menu: base.tables
|
||||
---
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
---
|
||||
title: Tabs
|
||||
page-header: Tabs
|
||||
done: true
|
||||
---
|
||||
|
||||
<div class="row">
|
||||
|
||||
@@ -0,0 +1,192 @@
|
||||
---
|
||||
layout: default
|
||||
page-header: Settings
|
||||
page-header-description: Etiam ullamcorper massa viverra consequat, consectetur id nulla tempus. Fringilla egestas justo massa purus sagittis malesuada.
|
||||
page-header-actions: buttons
|
||||
---
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
|
||||
<div class="mb">
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<div class="row">
|
||||
<div class="col-auto">
|
||||
{% include ui/avatar.html person-id=3 size="sm" %}
|
||||
</div>
|
||||
<div class="col">
|
||||
Lorem ipsum dolor sit amet.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="row">
|
||||
<div class="col-auto">
|
||||
{% include ui/avatar.html person-id=3 %}
|
||||
</div>
|
||||
<div class="col">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="row">
|
||||
<div class="col-auto">
|
||||
{% include ui/avatar.html person-id=3 size="md" %}
|
||||
</div>
|
||||
<div class="col">
|
||||
Lorem ipsum dolor sit amet.<br>
|
||||
Aliquid amet atque blanditiis,<br>
|
||||
mollitia perferendis quas.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="row">
|
||||
<div class="col-auto">
|
||||
{% include ui/avatar.html person-id=3 size="lg" %}
|
||||
</div>
|
||||
<div class="col">
|
||||
Lorem ipsum dolor sit amet.<br>
|
||||
Aliquid amet atque blanditiis,<br>
|
||||
mollitia perferendis quas.<br>
|
||||
Aspernatur, corporis culpa, deleniti
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
{% include ui/avatar.html person-id=3 size="xl" rounded=true %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<h1>header h1 - <small>small</small> <code>28px</code></h1>
|
||||
<h2>header h2 - <small>small</small> <code>20px</code></h2>
|
||||
<h3>header h3 - <small>small</small> <code>16px</code></h3>
|
||||
<h4>header h4 - <small>small</small> <code>14px</code></h4>
|
||||
<h5>header h5 - <small>small</small> <code>12px</code></h5>
|
||||
<h6>header h6 - <small>small</small> <code>10px</code></h6>
|
||||
|
||||
<div class="mb">
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
|
||||
<div class="mb">
|
||||
{% include ui/button.html text="Show modal" modal-id="deactivate" %}
|
||||
{% include ui/button.html text="Show modal" modal-id="success" %}
|
||||
{% include ui/modal.html modal-id="deactivate" %}
|
||||
{% include ui/modal.html modal-id="success" %}
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mb">
|
||||
<table class="table">
|
||||
<tr>
|
||||
<td>white</td>
|
||||
<td><a href="#" class="btn">white</a></td>
|
||||
<td class="bg-dark text-light"><a href="#" class="btn">white</a></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>link</td>
|
||||
<td><a href="#" class="btn btn-link">link</a></td>
|
||||
<td class="bg-dark text-light"><a href="#" class="btn btn-link">link</a></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
{% for color in site.button-variants %}
|
||||
<tr>
|
||||
<td>{{ color[0] }}</td>
|
||||
<td><a href="#" class="btn btn-{{ color[0] }}">{{ color[0] }}</a></td>
|
||||
<td class="bg-dark text-light"><a href="#" class="btn btn-{{ color[0] }}">{{ color[0] }}</a></td>
|
||||
<td><a href="#" class="btn btn-outline-{{ color[0] }}">{{ color[0] }}</a></td>
|
||||
<td class="bg-dark text-light"><a href="#" class="btn btn-outline-{{ color[0] }}">{{ color[0] }}</a></td>
|
||||
<td><a href="#" class="btn btn-ghost-{{ color[0] }}">{{ color[0] }}</a></td>
|
||||
<td class="bg-dark text-light"><a href="#" class="btn btn-ghost-{{ color[0] }}">{{ color[0] }}</a></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
{% for color in site.colors %}
|
||||
<tr>
|
||||
<td>{{ color[0] }}</td>
|
||||
<td><a href="#" class="btn btn-{{ color[0] }}">{{ color[0] }}</td>
|
||||
<td class="bg-dark text-light"><a href="#" class="btn btn-{{ color[0] }}">{{ color[0] }}</td>
|
||||
<td><a href="#" class="btn btn-outline-{{ color[0] }}">{{ color[0] }}</a></td>
|
||||
<td class="bg-dark text-light"><a href="#" class="btn btn-outline-{{ color[0] }}">{{ color[0] }}</a></td>
|
||||
<td><a href="#" class="btn btn-ghost-{{ color[0] }}">{{ color[0] }}</a></td>
|
||||
<td class="bg-dark text-light"><a href="#" class="btn btn-ghost-{{ color[0] }}">{{ color[0] }}</a></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
{% for color in site.socials %}
|
||||
{% assign icon = color[1].icon %}
|
||||
<tr>
|
||||
<td>{{ color[0] }}</td>
|
||||
<td><a href="#" class="btn btn-{{ color[0] }}">{% include ui/icon.html icon=icon %} {{ color[0] }}</td>
|
||||
<td class="bg-dark text-light"><a href="#" class="btn btn-{{ color[0] }}">{% include ui/icon.html icon=icon %} {{ color[0] }}</td>
|
||||
<td><a href="#" class="btn btn-outline-{{ color[0] }}">{% include ui/icon.html icon=icon %} {{ color[0] }}</a></td>
|
||||
<td class="bg-dark text-light"><a href="#" class="btn btn-outline-{{ color[0] }}">{% include ui/icon.html icon=icon %} {{ color[0] }}</a></td>
|
||||
<td><a href="#" class="btn btn-ghost-{{ color[0] }}">{% include ui/icon.html icon=icon %} {{ color[0] }}</a></td>
|
||||
<td class="bg-dark text-light"><a href="#" class="btn btn-ghost-{{ color[0] }}">{% include ui/icon.html icon=icon %} {{ color[0] }}</a></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<p>Offer local delivery at checkout <span class="text-muted">for customers</span> near you. Manage local orders
|
||||
in your Shopify admin or on <code>Shopify POS</code>, and get optimized delivery routes with the Shopify Local Delivery
|
||||
app when it’s time to deliver.</p>
|
||||
|
||||
<p>What a strange person. I dunno. Must be a king. Burn her anyway! And this isn't my nose. <strong> This is a
|
||||
false one.</strong> <em> I have to push the pram a lot.</em> Now, look here, my good man.</p>
|
||||
<h2>Well, I got better.</h2>
|
||||
<p>No, no, no! Yes, yes. A bit. But she's got a wart. Well, how'd you become king, then? How do you know she is
|
||||
a witch? We want a shrubbery!! Be quiet!</p>
|
||||
<ol>
|
||||
<li>Well, I didn't vote for you.</li>
|
||||
<li>Burn her anyway!</li>
|
||||
<li>And the hat. She's a witch!</li>
|
||||
</ol>
|
||||
|
||||
<h3>A newt?</h3>
|
||||
<p>I dunno. Must be a king. Shh! Knights, I bid you welcome to your new home. Let us ride to Camelot! …Are you
|
||||
suggesting that coconuts migrate? On second thoughts, let's not go there. It is a silly place.</p>
|
||||
<ul>
|
||||
<li>Listen. Strange women lying in ponds distributing swords is no basis for a system of government. Supreme
|
||||
executive power derives from a mandate from the masses, not from some farcical aquatic ceremony.
|
||||
</li>
|
||||
<li>Why?</li>
|
||||
<li>Well, we did do the nose.</li>
|
||||
</ul>
|
||||
|
||||
<p>Shh! Knights, I bid you welcome to your new home. Let us ride to Camelot! Be quiet! Why? How do you know she
|
||||
is a witch?</p>
|
||||
<p>Well, I got better. Well, she turned me into a newt. Well, how'd you become king, then? Burn her anyway!
|
||||
Well, I didn't vote for you.</p>
|
||||
<p>Listen. Strange women lying in ponds distributing swords is no basis for a system of government. Supreme
|
||||
executive power derives from a mandate from the masses, not from some farcical aquatic ceremony. But you are
|
||||
dressed as one…</p>
|
||||
<p>Listen. Strange women lying in ponds distributing swords is no basis for a system of government. Supreme
|
||||
executive power derives from a mandate from the masses, not from some farcical aquatic ceremony. Found them?
|
||||
In Mercia?! The coconut's tropical!</p>
|
||||
<p>Who's that then? How do you know she is a witch? Did you dress her up like this? Oh! Come and see the
|
||||
violence inherent in the system! Help, help, I'm being repressed! Shut up! Be quiet!</p>
|
||||
<p>Oh, ow! The swallow may fly south with the sun, and the house martin or the plover may seek warmer climes in
|
||||
winter, yet these are not strangers to our land. How do you know she is a witch? Where'd you get the
|
||||
coconuts?</p>
|
||||
<p>Found them? In Mercia?! The coconut's tropical! Why do you think that she is a witch? Why? Look, my
|
||||
liege!</p>
|
||||
<p>Why? What do you mean? Well, how'd you become king, then? I don't want to talk to you no more, you
|
||||
empty-headed animal food trough water! I fart in your general direction! Your mother was a hamster and your
|
||||
father smelt of elderberries! Now leave before I am forced to taunt you a second time!</p>
|
||||
<p>Oh! Come and see the violence inherent in the system! Help, help, I'm being repressed! He hasn't got shit
|
||||
all over him. Now, look here, my good man. Ah, now we see the violence inherent in the system! I'm not a
|
||||
witch.</p>
|
||||
<p>I have to push the pram a lot. Where'd you get the coconuts? Listen. Strange women lying in ponds
|
||||
distributing swords is no basis for a system of government. Supreme executive power derives from a mandate
|
||||
from the masses, not from some farcical aquatic ceremony.</p>
|
||||
<p>No, no, no! Yes, yes. A bit. But she's got a wart. Why? Shh! Knights, I bid you welcome to your new home.
|
||||
Let us ride to Camelot! Now, look here, my good man.</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,7 +1,6 @@
|
||||
---
|
||||
title: Typography
|
||||
page-header: Typography
|
||||
done: true
|
||||
---
|
||||
|
||||
<div class="row">
|
||||
|
||||
@@ -4,7 +4,6 @@ title: Users list
|
||||
page-header: Users
|
||||
page-header-actions: users
|
||||
page-header-description: 1-18 of 413 people
|
||||
done: true
|
||||
menu: extra.users
|
||||
---
|
||||
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
---
|
||||
title: Wizard
|
||||
done: true
|
||||
layout: single
|
||||
menu: extra.welcome
|
||||
---
|
||||
|
||||
@@ -13,12 +13,12 @@
|
||||
height: $caret-width;
|
||||
border-bottom: 1px solid;
|
||||
border-left: 1px solid;
|
||||
margin-right: .1em;
|
||||
margin-inline-end: .1em;
|
||||
|
||||
@if $direction != 'left' {
|
||||
margin-left: $caret-spacing;
|
||||
margin-inline-start: $caret-spacing;
|
||||
} @else {
|
||||
margin-right: $caret-spacing;
|
||||
margin-inline-end: $caret-spacing;
|
||||
}
|
||||
|
||||
@if $direction == down {
|
||||
|
||||
+24
-16
@@ -70,11 +70,14 @@ $min-contrast-ratio: 1.5 !default;
|
||||
$text-muted-opacity: .68 !default;
|
||||
$text-muted-light-opacity: .4 !default;
|
||||
|
||||
$border-opacity: .18 !default;
|
||||
$border-dark-opacity: .32 !default;
|
||||
$border-opacity: .16 !default;
|
||||
$border-dark-opacity: .24 !default;
|
||||
|
||||
$light: #f5f7fb !default;
|
||||
$dark: #252f3f !default;
|
||||
$dark: #354052 !default;
|
||||
|
||||
$body-bg: $light !default;
|
||||
$body-color: #252f3f !default;
|
||||
|
||||
$color-contrast-dark: $dark !default;
|
||||
$color-contrast-light: $light !default;
|
||||
@@ -106,15 +109,12 @@ $red: #e53e3e !default;
|
||||
$orange: #ed8936 !default;
|
||||
$yellow: #fab005 !default;
|
||||
$lime: #74b816 !default;
|
||||
$green: #48bb78 !default;
|
||||
$green: #40c057 !default;
|
||||
$teal: #2bcbba !default;
|
||||
$cyan: #17a2b8 !default;
|
||||
$black: #000000 !default;
|
||||
$white: #ffffff !default;
|
||||
|
||||
$body-bg: $light !default;
|
||||
$body-color: $dark !default;
|
||||
|
||||
$text-muted: mix($body-color, #fff, percentage($text-muted-opacity)) !default;
|
||||
$text-muted-light: mix($body-color, #fff, percentage($text-muted-light-opacity)) !default;
|
||||
|
||||
@@ -183,10 +183,11 @@ $border-radius-full: 50% !default;
|
||||
// Avatars
|
||||
$avatar-size: 2.5rem !default;
|
||||
$avatar-sizes: (
|
||||
"sm": 1.25rem,
|
||||
"xs": 1.25rem,
|
||||
"sm": 2rem,
|
||||
"md": 3.75rem,
|
||||
"lg": 5rem,
|
||||
"xl": 8rem
|
||||
"xl": 7rem
|
||||
) !default;
|
||||
$avatar-border-radius: $border-radius !default;
|
||||
$avatar-font-size: $h4-font-size;
|
||||
@@ -194,7 +195,7 @@ $avatar-font-size: $h4-font-size;
|
||||
$link-decoration: none !default;
|
||||
|
||||
//Typography
|
||||
$headings-font-weight: $font-weight-bold !default;
|
||||
$headings-font-weight: $font-weight-medium !default;
|
||||
|
||||
$hr-opacity: .1 !default;
|
||||
$hr-margin-y: 2rem !default;
|
||||
@@ -265,6 +266,8 @@ $breadcrumb-variants: (
|
||||
) !default;
|
||||
|
||||
//badges
|
||||
$badge-font-size: $code-font-size !default;
|
||||
$badge-line-height: $code-line-height !default;
|
||||
$badge-empty-size: .5rem !default;
|
||||
|
||||
//buttons
|
||||
@@ -308,8 +311,8 @@ $card-group-margin: 1.5rem !default;
|
||||
$card-shadow: rgba($dark, .04) 0 2px 4px 0 !default;
|
||||
$card-shadow-hover: rgba($dark, .16) 0 2px 16px 0 !default;
|
||||
|
||||
$cards-grid-gap: 1.25rem !default;
|
||||
$cards-grid-gap-sm: .75rem !default;
|
||||
$cards-grid-gap: 1rem !default;
|
||||
$cards-grid-gap-sm: .5rem !default;
|
||||
$cards-grid-breakpoint: lg !default;
|
||||
|
||||
//carousel
|
||||
@@ -324,10 +327,12 @@ $btn-close-color: inherit !default;
|
||||
$btn-close-width: .75rem !default;
|
||||
|
||||
//dropdown
|
||||
$dropdown-item-padding-x: 1rem !default;
|
||||
$dropdown-item-padding-x: .75rem !default;
|
||||
$dropdown-item-padding-y: .5rem !default;
|
||||
$dropdown-font-size: $font-size-base !default;
|
||||
$dropdown-divider-bg: $border-color !default;
|
||||
$dropdown-padding-y: .5rem !default;
|
||||
$dropdown-padding-y: .25rem !default;
|
||||
$dropdown-link-color: inherit !default;
|
||||
$dropdown-link-hover-bg: $hover-bg !default;
|
||||
$dropdown-link-hover-color: inherit !default;
|
||||
$dropdown-spacer: 1px !default;
|
||||
@@ -486,7 +491,7 @@ $input-border-radius: $border-radius !default;
|
||||
$form-check-input-width: 1rem !default;
|
||||
$form-check-padding-left: $form-check-input-width + .5rem !default;
|
||||
$form-check-input-bg: $white !default;
|
||||
$form-check-input-border: 1px solid $border-color !default;
|
||||
$form-check-input-border: 1px solid $border-color-transparent !default;
|
||||
$form-check-input-border-radius: $border-radius !default;
|
||||
$form-check-input-checked-bg-size: 1rem !default;
|
||||
|
||||
@@ -496,7 +501,7 @@ $form-check-input-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://w
|
||||
$form-check-input-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'><path fill='none' stroke='#{$dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8.5l2.5 2.5l5.5 -5.5'/></svg>") !default;
|
||||
$form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle r='3' fill='#{$form-check-input-checked-color}' cx='8' cy='8' /></svg>") !default;
|
||||
|
||||
$form-check-input-checked-border-color: $border-color !default;
|
||||
$form-check-input-checked-border-color: $border-color-transparent !default;
|
||||
|
||||
$form-select-indicator-color: opacify($border-color, .24) !default;
|
||||
|
||||
@@ -514,6 +519,9 @@ $form-range-thumb-focus-box-shadow-width: .125rem !default;
|
||||
$form-feedback-icon-valid: str-replace(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='" + $green + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'></polyline></svg>"), "#", "%23") !default;
|
||||
$form-feedback-icon-invalid: str-replace(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='" + $red + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'></line><line x1='6' y1='6' x2='18' y2='18'></line></svg>"), "#", "%23") !default;
|
||||
|
||||
$form-label-font-size: $h4-font-size !default;
|
||||
$form-label-font-weight: $font-weight-medium !default;
|
||||
|
||||
$caret-width: .36em !default;
|
||||
|
||||
//Flags
|
||||
|
||||
@@ -24,10 +24,6 @@ body.no-transitions * {
|
||||
list-style: none;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu-demo {
|
||||
|
||||
@@ -112,7 +112,7 @@
|
||||
}
|
||||
|
||||
.dropdown-toggle:after {
|
||||
margin-left: auto;
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
|
||||
.nav-item.active:after {
|
||||
@@ -171,6 +171,11 @@ Navbar
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.navbar-expand {
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
$next: breakpoint-next($breakpoint, $grid-breakpoints);
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
.avatar {
|
||||
--#{$variable-prefix}avatar-size: #{$avatar-size};
|
||||
position: relative;
|
||||
width: $avatar-size;
|
||||
height: $avatar-size;
|
||||
font-size: $avatar-font-size;
|
||||
font-weight: $font-weight-bold;
|
||||
width: var(--#{$variable-prefix}avatar-size);
|
||||
height: var(--#{$variable-prefix}avatar-size);
|
||||
font-size: calc(var(--#{$variable-prefix}avatar-size) / #{$line-height-base * 2});
|
||||
font-weight: $font-weight-normal;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -41,10 +41,10 @@
|
||||
@each $avatar-size, $size in $avatar-sizes {
|
||||
.avatar-#{$avatar-size} {
|
||||
--#{$variable-prefix}avatar-size: #{$size};
|
||||
width: $size;
|
||||
height: $size;
|
||||
font-size: $size / 2;
|
||||
line-height: $size;
|
||||
//width: $size;
|
||||
//height: $size;
|
||||
//font-size: $size / 2;
|
||||
//line-height: $size;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+11
-30
@@ -1,10 +1,15 @@
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: $gray-500;
|
||||
overflow: hidden;
|
||||
vertical-align: text-bottom;
|
||||
user-select: none;
|
||||
padding: calc(.25rem - 1px) .25rem;
|
||||
height: 1.25rem;
|
||||
border: 1px solid transparent;
|
||||
min-width: 1.25rem;
|
||||
|
||||
@at-root a#{&} {
|
||||
color: $white;
|
||||
@@ -19,18 +24,13 @@
|
||||
padding: 0;
|
||||
border-radius: $border-radius-full;
|
||||
}
|
||||
}
|
||||
|
||||
.badge-up {
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
right: 0;
|
||||
min-width: 1.75em;
|
||||
min-height: 1.75em;
|
||||
padding: 0 .25rem;
|
||||
line-height: 1rem;
|
||||
background-clip: padding-box;
|
||||
transform: translate(0%, -50%);
|
||||
.avatar {
|
||||
box-sizing: content-box;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
margin: 0 .5rem 0 -.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
// bordered
|
||||
@@ -43,22 +43,3 @@
|
||||
border-radius: 100px;
|
||||
min-width: 1.75em;
|
||||
}
|
||||
|
||||
.badge-avatar {
|
||||
box-sizing: content-box;
|
||||
width: 1.75em;
|
||||
margin: 0 .5em 0 -.5em;
|
||||
color: $light-white;
|
||||
background: $light-black no-repeat center/cover;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
.badge-addon {
|
||||
padding: 0 .5rem;
|
||||
margin: 0 -.5em 0 .5em;
|
||||
min-width: 1.75em;
|
||||
background: $light-black;
|
||||
text-align: center;
|
||||
color: $white;
|
||||
text-decoration: none;
|
||||
}
|
||||
@@ -24,6 +24,10 @@
|
||||
.breadcrumb-alternate {
|
||||
a {
|
||||
color: $text-muted;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb-item.active {
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
justify-content: center;
|
||||
color: inherit;
|
||||
background-color: $white;
|
||||
border-color: $border-color-transparent;
|
||||
border-color: $border-color-dark-transparent;
|
||||
|
||||
&:hover {
|
||||
color: inherit;
|
||||
@@ -38,6 +38,10 @@
|
||||
.icon-right {
|
||||
margin: 0 -.25rem 0 .5rem;
|
||||
}
|
||||
|
||||
.badge {
|
||||
top: auto;
|
||||
}
|
||||
}
|
||||
|
||||
%btn-color {
|
||||
|
||||
@@ -1,11 +1,6 @@
|
||||
.card {
|
||||
margin-bottom: $cards-grid-gap;
|
||||
box-shadow: $card-shadow;
|
||||
|
||||
@include media-breakpoint-down($cards-grid-breakpoint) {
|
||||
margin-bottom: $cards-grid-gap-sm;
|
||||
}
|
||||
|
||||
@media print {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
@@ -164,7 +159,7 @@
|
||||
display: block;
|
||||
margin: 0 0 1rem;
|
||||
font-size: $h3-font-size;
|
||||
font-weight: $headings-font-weight;
|
||||
font-weight: $font-weight-medium;
|
||||
color: $headings-color;
|
||||
line-height: 1.5rem;
|
||||
|
||||
|
||||
@@ -16,7 +16,6 @@
|
||||
|
||||
.dropdown-item {
|
||||
min-width: $dropdown-min-width;
|
||||
color: inherit;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
@@ -24,12 +23,12 @@
|
||||
}
|
||||
|
||||
.dropdown-item-icon {
|
||||
width: 1rem !important;
|
||||
font-size: 1rem !important;
|
||||
width: 1.25rem !important;
|
||||
font-size: 1.25rem !important;
|
||||
margin-right: .5rem;
|
||||
opacity: .64;
|
||||
color: $text-muted;
|
||||
opacity: $text-muted-opacity;
|
||||
text-align: center;
|
||||
stroke-width: 2px;
|
||||
}
|
||||
|
||||
.dropdown-header {
|
||||
|
||||
@@ -8,10 +8,7 @@ textarea {
|
||||
Form label
|
||||
*/
|
||||
.form-label {
|
||||
font-size: $h4-font-size;
|
||||
font-weight: $font-weight-bold;
|
||||
display: block;
|
||||
margin-bottom: .5rem;
|
||||
|
||||
&.required {
|
||||
&:after {
|
||||
|
||||
+4
-14
@@ -41,25 +41,15 @@
|
||||
}
|
||||
|
||||
.row-cards {
|
||||
margin-left: -($cards-grid-gap / 2);
|
||||
margin-right: -($cards-grid-gap / 2);
|
||||
--#{$variable-prefix}gutter-x: #{$cards-grid-gap};
|
||||
--#{$variable-prefix}gutter-y: #{$cards-grid-gap};
|
||||
|
||||
.row-cards {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
>* {
|
||||
padding-left: $cards-grid-gap / 2;
|
||||
padding-right: $cards-grid-gap / 2;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down($cards-grid-breakpoint) {
|
||||
margin-left: -($cards-grid-gap-sm / 2);
|
||||
margin-right: -($cards-grid-gap-sm / 2);
|
||||
|
||||
>* {
|
||||
padding-left: $cards-grid-gap-sm / 2;
|
||||
padding-right: $cards-grid-gap-sm / 2;
|
||||
}
|
||||
--#{$variable-prefix}gutter-x: #{$cards-grid-gap-sm} / 2;
|
||||
--#{$variable-prefix}gutter-y: #{$cards-grid-gap-sm} / 2;
|
||||
}
|
||||
}
|
||||
+5
-25
@@ -1,8 +1,7 @@
|
||||
.icon {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
font-size: 1rem;
|
||||
vertical-align: text-bottom;
|
||||
width: $font-size-base * $line-height-base;
|
||||
height: $font-size-base * $line-height-base;
|
||||
vertical-align: sub;
|
||||
|
||||
@if $icon-stroke-width {
|
||||
stroke-width: $icon-stroke-width;
|
||||
@@ -13,27 +12,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
.icon-thin {
|
||||
stroke-width: 1.5;
|
||||
}
|
||||
|
||||
.icon-md {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.icon-lg {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.icon-xl {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
|
||||
&.icon-thin {
|
||||
stroke-width: 1;
|
||||
}
|
||||
.icon-filled {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.icons-list {
|
||||
|
||||
@@ -186,10 +186,14 @@
|
||||
/**
|
||||
Inline list
|
||||
*/
|
||||
.list-inline-item:not(:last-child) {
|
||||
margin-right: auto;
|
||||
margin-inline-end: $list-inline-padding;
|
||||
}
|
||||
|
||||
.list-inline-dots {
|
||||
.list-inline-item + .list-inline-item:before {
|
||||
content: ' · ';
|
||||
margin-right: $list-inline-padding;
|
||||
margin-inline-end: $list-inline-padding;
|
||||
}
|
||||
}
|
||||
@@ -16,6 +16,27 @@ Markdown
|
||||
> {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: .25rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: $h2-font-size;
|
||||
line-height: $h2-line-height;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: $h3-font-size;
|
||||
line-height: $h3-line-height;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: $h4-font-size;
|
||||
line-height: $h4-line-height;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: $h5-font-size;
|
||||
line-height: $h5-line-height;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -53,19 +53,16 @@
|
||||
display: flex;
|
||||
transition: .3s color;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
display: inline-block;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link-icon {
|
||||
width: 1.25rem;
|
||||
height: 1rem;
|
||||
font-size: 1rem;
|
||||
height: 1.25rem;
|
||||
margin-inline-end: .5rem;
|
||||
|
||||
.icon {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
@@ -8,6 +8,12 @@ a {
|
||||
text-decoration-skip-ink: auto;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
margin: 0 0 1rem 1rem;
|
||||
padding: 0 0 0 1rem;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
|
||||
Reference in New Issue
Block a user