Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-07-25 20:44:38 +04:00
Code Issues Projects Releases Wiki Activity

Merge branch 'dev' of https://github.com/tabler/tabler into oyejorge/dev

Browse Source 
 Conflicts:
	package.json
This commit is contained in:
codecalm
2021-10-27 20:43:37 +02:00
parent 8dd401f360 d073863ad3
commit d22cdac3de
212 changed files with 8626 additions and 7296 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/js/src/dropdown.js
-31
View File
@@ -6,35 +6,4 @@ Core dropdowns
let dropdownTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="dropdown"]'));
dropdownTriggerList.map(function (dropdownTriggerEl) {
return new Dropdown(dropdownTriggerEl);
});
/*
Nested dropdowns
*/
const selectors = '.dropdown, .dropup, .dropend, .dropstart',
dropdowns = document.querySelectorAll(selectors);
let currentTarget = undefined;
dropdowns.forEach(dropdown => {
dropdown.addEventListener('mousedown', (e) => {
e.stopPropagation();
if (e.target.dataset.bsToggle && e.target.dataset.bsToggle === 'dropdown') {
currentTarget = e.currentTarget;
}
});
dropdown.addEventListener('hide.bs.dropdown', (e) => {
e.stopPropagation();
const parent = currentTarget ? currentTarget.parentElement.closest(selectors) : undefined;
if (parent && parent === dropdown) {
e.preventDefault();
}
currentTarget = undefined;
});
});
src/js/src/tab.js
+14
View File
@@ -0,0 +1,14 @@
import { Tab } from 'bootstrap';
export const EnableActivationTabsFromLocationHash = () => {
const locationHash = window.location.hash;
if (locationHash) {
const tabsList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tab"]'));
const matchedTabs = tabsList.filter(tab => tab.hash === locationHash);
matchedTabs.map(tab => {
new Tab(tab).show();
});
}
}
src/js/tabler.esm.js
+10
View File
@@ -0,0 +1,10 @@
//Vendor
import './src/autosize';
import './src/input-mask';
import './src/dropdown';
import './src/tooltip';
import './src/popover';
import './src/switch-icon';
import './src/toast';
src/js/tabler.js
+5
View File
@@ -6,5 +6,10 @@ import './src/dropdown';
import './src/tooltip';
import './src/popover';
import './src/switch-icon';
import { EnableActivationTabsFromLocationHash } from './src/tab';
import './src/toast';
import * as bootstrap from 'bootstrap';
window.bootstrap = bootstrap;
EnableActivationTabsFromLocationHash();
src/pages/_data/libs.json
+1 -1
View File
@@ -8,7 +8,7 @@
"js": {
"bootstrap": "bootstrap/dist/js/bootstrap.bundle.min.js",
"apexcharts": "apexcharts/dist/apexcharts.min.js",
"nouislider": "nouislider/distribute/nouislider.min.js",
"nouislider": "nouislider/dist/nouislider.min.js",
"countup": "countup.js/dist/countUp.js",
"masonry": "https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js",
"mapbox": "https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.js",
src/pages/_data/menu.yml
+3
View File
@@ -75,6 +75,9 @@ base:
typography:
title: Typography
url: typography.html
offcanvas:
title: Offcanvas
url: offcanvas.html
markdown:
title: Markdown
url: markdown.html
src/pages/_docs/badges.md
+1 -1
View File
@@ -20,7 +20,7 @@ The default badges are square and come in the basic set of colors.
## Pill badges
Use the `.bagde-pill` class if you want to create a badge with rounded corners. Its width will adjust to the label text.
Use the `.badge-pill` class if you want to create a badge with rounded corners. Its width will adjust to the label text.
{% capture code %}
{% for color in site.colors %}
src/pages/_includes/cards/store-product-grid.html
+2 -2
View File
@@ -16,5 +16,5 @@
{% endfor %}
</div>
<div class="d-flex">
{% include parts/pagination.html class="ms-auto" %}
</div>
{% include ui/pagination.html class="ms-auto" %}
</div>
src/pages/_includes/layout/navbar-menu.html
+2 -2
View File
@@ -11,7 +11,7 @@
{% for level-1 in menu %}
{% assign icon = level-1[1].icon %}
<li class="nav-item{% if level-1[0] == current-page[0] or level-1[1].active %} active{% endif %}{% if level-1[1].children %} dropdown{% endif %}">
<a class="nav-link{% if level-1[1].children %} dropdown-toggle{% endif %}{% if level-1[1].disabled %} disabled{% endif %}" {% if level-1[1].children %}href="#navbar-{{ level-1[0] }}" data-bs-toggle="dropdown" role="button" aria-expanded="{% if include.auto-open and level-1[0] == current-page[0] %}true{% else %}false{% endif %}" {% else %}href="{{ site.base }}/{{ level-1[1].url }}" {% endif %}>
<a class="nav-link{% if level-1[1].children %} dropdown-toggle{% endif %}{% if level-1[1].disabled %} disabled{% endif %}" {% if level-1[1].children %}href="#navbar-{{ level-1[0] }}" data-bs-toggle="dropdown" data-bs-auto-close="{% if include.keep-open %}false{% else %}outside{% endif %}" role="button" aria-expanded="{% if include.auto-open and level-1[0] == current-page[0] %}true{% else %}false{% endif %}" {% else %}href="{{ site.base }}/{{ level-1[1].url }}" {% endif %}>
{% unless hide-icons %}
<span class="nav-link-icon d-md-none d-lg-inline-block">{% include ui/icon.html icon=icon %}</span>
{% endunless %}
@@ -47,7 +47,7 @@
{% if level-2[1].children %}<div class="dropend">{% endif %}
<a class="dropdown-item{% if level-2[1].children %} dropdown-toggle{% endif %}{% if level-1[0] == current-page[0] and level-2[0] == current-page[1] and current-page.size == 2 %} active{% endif %}" {% if level-2[1].children %}href="#sidebar-{{ level-2[0] }}" data-bs-toggle="dropdown" role="button" aria-expanded="false" {% else %}href="{{ site.base }}/{{ level-2[1].url }}" {% endif %}>
<a class="dropdown-item{% if level-2[1].children %} dropdown-toggle{% endif %}{% if level-1[0] == current-page[0] and level-2[0] == current-page[1] and current-page.size == 2 %} active{% endif %}" {% if level-2[1].children %}href="#sidebar-{{ level-2[0] }}" data-bs-toggle="dropdown" data-bs-auto-close="{% if include.keep-open %}false{% else %}outside{% endif %}" role="button" aria-expanded="false" {% else %}href="{{ site.base }}/{{ level-2[1].url }}" {% endif %}>
{{ level-2[1].title }}
</a>
src/pages/_includes/layout/sidebar.html
+1 -1
View File
@@ -11,7 +11,7 @@
{% include layout/navbar-side.html class="d-lg-none" hide-username=include.hide-username person-id=include.person-id %}
<div class="collapse navbar-collapse" id="navbar-menu">
{% include layout/navbar-menu.html auto-open=true class="pt-lg-3" %}
{% include layout/navbar-menu.html auto-open=true class="pt-lg-3" keep-open=true %}
</div>
</div>
</aside>
src/pages/_includes/ui/datepicker.html
+2 -2
View File
@@ -36,8 +36,8 @@
window.Litepicker && ({% if jekyll.environment == 'development' %}window.tabler_datepicker["datepicker-{{ id }}"] = {% endif %}new Litepicker({
element: document.getElementById('datepicker-{{ id }}'),
buttonText: {
previousMonth: '{% capture icon %}{% include ui/icon.html icon="chevron-left" %}{% endcapture %}{{ icon | strip }}',
nextMonth: '{% capture icon %}{% include ui/icon.html icon="chevron-right" %}{% endcapture %}{{ icon | strip }}',
previousMonth: `{% capture icon %}{% include ui/icon.html icon="chevron-left" %}{% endcapture %}{{ icon | strip }}`,
nextMonth: `{% capture icon %}{% include ui/icon.html icon="chevron-right" %}{% endcapture %}{{ icon | strip }}`,
},
{% if include.inline %}inlineMode: true,{% endif %}
}));
src/pages/all.html
-31
View File
@@ -1,31 +0,0 @@
---
title: Index
page-header: Index
menu: index
---
<div class="row row justify-content-center mt-3 mt-lg-5">
<div class="col-lg-6 col-xl-5">
<div class="card">
<div class="card-header">
<h2 class="card-title">
All pages
</h2>
</div>
<div class="card-body">
<ul>
{% assign pages = site.pages | sort: 'title' %}
{% for page in pages %}
{% if page.name != 'index.html' %}
<li>
<a href="{{ page.url }}">
{% unless page.menu %}{% include ui/icon.html icon="x" color="red" class="me-1" %}{% endunless %}{{ page.title | default: page.name }}
</a>
</li>
{% endif %}
{% endfor %}
</ul>
</div>
</div>
</div>
</div>
src/pages/offcanvas.html
+36
View File
@@ -0,0 +1,36 @@
---
menu: base.offcanvas
title: Offcanvas
page-header: Offcanvas
---
{% assign directions = 'start,end,top,bottom' | split: ',' %}
<div class="card">
<div class="card-body">
{% for direction in directions %}
<a class="btn" data-bs-toggle="offcanvas" href="#offcanvas{{ direction | capitalize }}" role="button" aria-controls="offcanvas{{ direction | capitalize }}">
Toggle {{ direction }} offcanvas
</a>
{% endfor %}
</div>
</div>
{% for direction in directions %}
<div class="offcanvas offcanvas-{{ direction }}" tabindex="-1" id="offcanvas{{ direction | capitalize }}" aria-labelledby="offcanvas{{ direction | capitalize }}Label">
<div class="offcanvas-header">
<h2 class="offcanvas-title" id="offcanvas{{ direction | capitalize }}Label">{{ direction | capitalize }} offcanvas</h2>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda ea est, eum exercitationem fugiat illum itaque laboriosam magni necessitatibus, nemo nisi numquam quae reiciendis repellat sit soluta unde. Aut!
</div>
<div class="mt-3">
<button class="btn" type="button" data-bs-dismiss="offcanvas">
Close offcanvas
</button>
</div>
</div>
</div>
{% endfor %}
src/scss/_bootstrap-components.scss
+3
View File
@@ -1,3 +1,4 @@
// Components
@import "~bootstrap/scss/root";
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/type";
@@ -27,6 +28,8 @@
@import "~bootstrap/scss/popover";
@import "~bootstrap/scss/carousel";
@import "~bootstrap/scss/spinners";
@import "~bootstrap/scss/offcanvas";
@import "~bootstrap/scss/placeholders";
// Helpers
@import "~bootstrap/scss/helpers";
src/scss/_bootstrap-config.scss
+1
View File
@@ -1,3 +1,4 @@
// Config
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
src/scss/_tabler-core.scss → src/scss/_core.scss
+1
View File
@@ -50,6 +50,7 @@
@import "ui/toolbar";
@import "ui/type";
@import "ui/charts";
@import "ui/offcanvas";
@import "utils/background";
@import "utils/colors";
src/scss/_dark.scss
+13 -3
View File
@@ -6,13 +6,18 @@
background-color: $dark-mode-darken;
}
.text-body {
color: $dark-mode-text;
}
.card,
.card-footer,
.card-stacked::after,
.footer:not(.footer-transparent),
.modal-content,
.modal-header,
.dropdown-menu {
.dropdown-menu,
.alert:not(.alert-important) {
background-color: $dark;
color: inherit;
}
@@ -46,6 +51,7 @@
.form-imagecheck-figure:before {
background-color: $dark-mode-darken;
color: $dark-mode-text;
border-color: $dark-mode-lighten-10;
}
.form-control-plaintext {
@@ -61,7 +67,7 @@
}
.avatar {
background-color: $dark-mode-lighten;
--tblr-avatar-bg: #{$dark-mode-lighten};
}
.avatar-list-stacked .avatar {
@@ -92,7 +98,11 @@
background: transparent;
}
.list-group-item,
.list-group-item {
color: $dark-mode-text;
border-color: $border-color-transparent;
}
.form-fieldset {
border-color: $input-border-color;
}
src/scss/_variables.scss
+42 -46
View File
@@ -12,8 +12,8 @@ $enable-negative-margins: false !default;
$assets-base: ".." !default;
// FONTS
$google-font: 'Inter' !default;
$google-font-monospaced: null !default;
$google-font: false !default;
$google-font-monospaced: false !default;
$font-family-sans-serif: $google-font, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif !default;
$font-family-monospace: $google-font-monospaced, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
@@ -27,7 +27,7 @@ $icon-stroke-width: 1.5 !default;
$icon-size: 1.25rem !default;
//Fonts
$font-size-base: .875rem !default;
$font-size-base: .9375rem !default;
$body-letter-spacing: 0 !default;
$font-weight-light: 300 !default;
@@ -35,27 +35,27 @@ $font-weight-normal: 400 !default;
$font-weight-medium: 500 !default;
$font-weight-bold: 600 !default;
$line-height-base: (1.25rem/$font-size-base) !default;
$line-height-sm: (1rem/$font-size-base) !default;
$line-height-lg: (1.5rem/$font-size-base) !default;
$line-height-base: divide(1.25rem, $font-size-base) !default;
$line-height-sm: divide(1rem, $font-size-base) !default;
$line-height-lg: divide(1.5rem, $font-size-base) !default;
$h1-font-size: (24rem / 16) !default;
$h1-line-height: (2rem/$h1-font-size) !default;
$h1-font-size: divide(24rem, 16) !default;
$h1-line-height: divide(2rem, $h1-font-size) !default;
$h2-font-size: (20rem / 16) !default;
$h2-line-height: (1.75rem/$h2-font-size) !default;
$h2-font-size: divide(20rem, 16) !default;
$h2-line-height: divide(1.75rem, $h2-font-size) !default;
$h3-font-size: (16rem / 16) !default;
$h3-line-height: (1.5rem/$h3-font-size) !default;
$h3-font-size: divide(16rem, 16) !default;
$h3-line-height: divide(1.5rem, $h3-font-size) !default;
$h4-font-size: $font-size-base !default;
$h4-line-height: (1.25rem/$h4-font-size) !default;
$h4-line-height: divide(1.25rem, $h4-font-size) !default;
$h5-font-size: (12rem / 16) !default;
$h5-line-height: (1rem/$h5-font-size) !default;
$h5-font-size: divide(12rem, 16) !default;
$h5-line-height: divide(1rem, $h5-font-size) !default;
$h6-font-size: (10rem / 16) !default;
$h6-line-height: (1rem/$h6-font-size) !default;
$h6-font-size: divide(10rem, 16) !default;
$h6-line-height: divide(1rem, $h6-font-size) !default;
$display-font-sizes: (
1: 5rem,
@@ -66,7 +66,7 @@ $display-font-sizes: (
6: 2.5rem
) !default;
$small-font-size: percentage($h5-font-size/$font-size-base) !default;
$small-font-size: percentage(divide($h5-font-size, $font-size-base)) !default;
$code-font-size: $small-font-size !default;
$code-line-height: 1.25rem !default;
@@ -84,8 +84,19 @@ $text-muted-dark-opacity: .8 !default;
$border-opacity: .16 !default;
$border-dark-opacity: .24 !default;
$light: #f4f6fa !default;
$dark: #232e3c !default;
$gray-50: #f8fafc !default;
$gray-100: #f1f5f9 !default;
$gray-200: #e2e8f0 !default;
$gray-300: #cbd5e1 !default;
$gray-400: #94a3b8 !default;
$gray-500: #64748b !default;
$gray-600: #475569 !default;
$gray-700: #334155 !default;
$gray-800: #1e293b !default;
$gray-900: #0f172a !default;
$light: $gray-50 !default;
$dark: $gray-800 !default;
$body-bg: $light !default;
$body-color: $dark !default;
@@ -93,24 +104,6 @@ $body-color: $dark !default;
$color-contrast-dark: $dark !default;
$color-contrast-light: $light !default;
$light-black: rgba($dark, .24) !default;
$light-mix: rgba(mix($light, $dark, 64%), .24) !default;
$light-white: rgba($light, .24) !default;
$min-black: rgba($dark, .024) !default;
$min-white: rgba(mix($light, $dark, 48%), .1) !default;
$gray-50: #fbfbfb !default;
$gray-100: $light !default;
$gray-200: mix($light, $dark, 98%) !default;
$gray-300: mix($light, $dark, 94%) !default;
$gray-400: mix($light, $dark, 88%) !default;
$gray-500: mix($light, $dark, 78%) !default;
$gray-600: mix($light, $dark, 60%) !default;
$gray-700: mix($light, $dark, 36%) !default;
$gray-800: mix($light, $dark, 16%) !default;
$gray-900: $dark !default;
$blue: #206bc4 !default;
$azure: #4299e1 !default;
$indigo: #4263eb !default;
@@ -185,6 +178,7 @@ $colors: (
// Dark mode
$dark-mode-darken: darken($dark, 2%) !default;
$dark-mode-lighten: lighten($dark, 2%) !default;
$dark-mode-lighten-10: lighten($dark, 10%) !default;
$dark-mode-text: $light;
// Borders
@@ -194,7 +188,7 @@ $border-width-wide: 2px !default;
$border-radius-sm: 2px !default;
$border-radius: 4px !default;
$border-radius-lg: 8px !default;
$border-radius-pill: 50% !default;
$border-radius-pill: 100rem !default;
// Avatars
$avatar-size: 2.5rem !default;
@@ -227,8 +221,8 @@ $container-padding-x: 1.5rem !default;
$spacer: 1rem !default;
$spacers: (
0: 0,
1: $spacer / 4,
2: $spacer / 2,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 2,
5: $spacer * 4,
@@ -259,7 +253,7 @@ $container-variations: (
$content-padding-y: 1.25rem !default;
// Acpect ratios
$aspect-ratios: (
"1x1": 100%,
"4x3": calc(3 / 4 * 100%),
@@ -270,7 +264,10 @@ $aspect-ratios: (
"9x21": calc(21 / 9 * 100%),
) !default;
// overlay
// Transitions
$transition-time: .3s !default;
// Overlay
$overlay-gradient: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .6) 100%) !default;
//accordion
@@ -308,7 +305,6 @@ $badge-font-weight: $font-weight-medium !default;
$badge-empty-size: .5rem !default;
//buttons
$input-color: $body-color !default;
$input-btn-line-height: $line-height-base !default;
$input-btn-font-size: $font-size-base !default;
$input-btn-padding-y: .5rem - .0625rem !default;
@@ -518,7 +514,6 @@ $table-head-color: $text-muted !default;
$table-head-bg: $light !default;
$table-striped-order: even !default;
$table-striped-bg: $light !default;
$table-accent-bg: $light !default;
$table-group-separator-color: $border-color-transparent !default;
//toasts
@@ -537,6 +532,7 @@ $list-group-border-color: $border-color !default;
$list-group-action-color: inherit !default;
$list-group-bg: inherit !default;
$input-bg: $white !default;
$input-disabled-bg: $gray-100 !default;
$input-border-color: $border-color-dark !default;
$input-border-color-transparent: $border-color-dark-transparent !default;
@@ -576,7 +572,7 @@ $form-switch-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/200
$form-switch-bg-size: auto !default;
$form-range-track-height: .25rem !default;
$form-range-track-bg: $light-mix !default;
$form-range-track-bg: $gray-200 !default;
$form-range-thumb-border: 2px solid $white !default;
$form-range-thumb-height: 1rem !default;
$form-range-thumb-focus-box-shadow-width: .125rem !default;
src/scss/layout/_navbar.scss
+5 -5
View File
@@ -291,7 +291,7 @@ Navbar toggler
width: 1.25em;
background: currentColor;
border-radius: 10px;
transition: $navbar-toggler-animation-time $navbar-toggler-animation-time top, $navbar-toggler-animation-time $navbar-toggler-animation-time bottom, $navbar-toggler-animation-time transform, 0s $navbar-toggler-animation-time opacity;
@include transition(top $navbar-toggler-animation-time $navbar-toggler-animation-time, bottom $navbar-toggler-animation-time $navbar-toggler-animation-time, transform $navbar-toggler-animation-time, opacity 0s $navbar-toggler-animation-time);
position: relative;
&:before,
@@ -304,7 +304,7 @@ Navbar toggler
background: inherit;
position: absolute;
left: 0;
transition: inherit;
@include transition(inherit);
}
&:before {
@@ -317,7 +317,7 @@ Navbar toggler
.navbar-toggler[aria-expanded="true"] & {
transform: rotate(45deg);
transition: .3s top, .3s bottom, .3s .3s transform, 0s .3s opacity;
@include transition(top $transition-time, bottom $transition-time, transform $transition-time $transition-time, opacity 0s $transition-time);
&:before {
top: 0;
@@ -390,7 +390,7 @@ Navbar vertical
bottom: 0;
z-index: $zindex-fixed;
align-items: flex-start;
transition: .3s transform;
@include transition(transform $transition-time);
overflow-x: auto;
&.navbar-right {
@@ -399,7 +399,7 @@ Navbar vertical
}
.navbar-brand {
padding: (($navbar-height - $navbar-brand-image-height) / 2) 0;
padding: (($navbar-height - $navbar-brand-image-height) * .5) 0;
justify-content: center;
}
src/scss/mixins/_mixins.scss
+1 -1
View File
@@ -17,7 +17,7 @@
&::-webkit-scrollbar {
width: 6px;
height: 6px;
transition: .3s background;
@include transition(background $transition-time);
}
&::-webkit-scrollbar-thumb {
src/scss/tabler.scss
+1 -1
View File
@@ -1,2 +1,2 @@
@import "tabler-core";
@import "core";
src/scss/ui/_avatars.scss
+8 -7
View File
@@ -1,5 +1,6 @@
.avatar {
--#{$variable-prefix}avatar-size: #{$avatar-size};
--#{$variable-prefix}avatar-bg: #{$gray-200};
position: relative;
width: var(--#{$variable-prefix}avatar-size);
height: var(--#{$variable-prefix}avatar-size);
@@ -13,12 +14,12 @@
text-transform: uppercase;
vertical-align: bottom;
user-select: none;
background: $gray-200 no-repeat center/cover;
background: var(--#{$variable-prefix}avatar-bg) no-repeat center/cover;
border-radius: $avatar-border-radius;
svg {
width: calc(var(--tblr-avatar-size) / #{(40 / 24)});
height: calc(var(--tblr-avatar-size) / #{(40 / 24)});
width: calc(var(--tblr-avatar-size) / #{divide(40, 24)});
height: calc(var(--tblr-avatar-size) / #{divide(40, 24)});
}
.badge {
@@ -44,8 +45,8 @@
}
.avatar-#{$avatar-size} .badge:empty {
width: $size / 4;
height: $size / 4;
width: $size * .25;
height: $size * .25;
}
}
@@ -88,7 +89,7 @@
border: 1px dashed $border-color;
background: $form-check-input-bg;
flex-direction: column;
transition: .3s color, .3s background-color;
@include transition(color $transition-time, background-color $transition-time);
svg {
width: 1.5rem;
@@ -111,7 +112,7 @@
.page-avatar {
.page-cover ~ * & {
margin-top: calc(calc(-1 * calc(var(--tblr-avatar-size) / 2)) - #{$content-padding-y});
margin-top: calc(calc(-1 * calc(var(--tblr-avatar-size) * .5)) - #{$content-padding-y});
box-shadow: 0 0 0 .25rem $body-bg;
}
}
src/scss/ui/_calendars.scss
+3 -3
View File
@@ -28,8 +28,8 @@
}
.calendar-date {
flex: 0 0 (100% / 7);
max-width: (100% / 7);
flex: 0 0 divide(100%, 7);
max-width: divide(100%, 7);
padding: .2rem;
text-align: center;
border: 0;
@@ -55,7 +55,7 @@
border: 1px solid transparent;
border-radius: $border-radius-pill;
outline: 0;
transition: background .3s, border .3s, box-shadow .32s, color .3s;
@include transition(background $transition-time, border $transition-time, box-shadow .32s, color $transition-time);
&:hover {
color: $primary;
src/scss/ui/_cards.scss
+4 -4
View File
@@ -21,7 +21,7 @@
@at-root a#{&} {
color: inherit;
transition: .3s box-shadow;
@include transition(box-shadow $transition-time);
&:hover {
text-decoration: none;
@@ -94,7 +94,7 @@
justify-content: center;
padding: $card-spacer-y $card-spacer-x;
text-align: center;
transition: .3s background;
@include transition(background $transition-time);
border-top: 1px solid $border-color;
flex: 1;
color: inherit;
@@ -187,7 +187,7 @@ Card footer
.card-footer-gray {
border-top: 0;
background: $min-black;
background: $gray-50;
}
.card-progress {
@@ -416,7 +416,7 @@ Card avatar
margin-left: auto;
margin-right: auto;
box-shadow: 0 0 0 .25rem $card-bg;
margin-top: calc(-1 * calc(var(--#{$variable-prefix}avatar-size) / 2));
margin-top: calc(-1 * calc(var(--#{$variable-prefix}avatar-size) * .5));
}
/*
src/scss/ui/_forms.scss
+4 -4
View File
@@ -130,7 +130,7 @@ Form control
.form-fieldset {
padding: 1rem;
margin-bottom: 1rem;
background: $min-black;
background: $gray-50;
border: 1px solid $border-color;
border-radius: $border-radius;
}
@@ -151,9 +151,9 @@ Form help
text-decoration: none;
cursor: pointer;
user-select: none;
background: $min-white;
background: $gray-100;
border-radius: $border-radius-pill;
transition: .3s background-color, .3s color;
@include transition(background-color $transition-time, color $transition-time);
&:hover,
&[aria-describedby] {
@@ -199,7 +199,7 @@ Input group
.input-group-text {
background: transparent;
transition: $input-transition;
@include transition($input-transition);
&:first-child {
padding-right: 0;
src/scss/ui/_grid.scss
+2 -2
View File
@@ -64,8 +64,8 @@
}
@include media-breakpoint-down($cards-grid-breakpoint) {
--#{$variable-prefix}gutter-x: #{$cards-grid-gap / 2};
--#{$variable-prefix}gutter-y: #{$cards-grid-gap / 2};
--#{$variable-prefix}gutter-x: #{$cards-grid-gap * .5};
--#{$variable-prefix}gutter-y: #{$cards-grid-gap * .5};
}
}
src/scss/ui/_icons.scss
+1 -1
View File
@@ -16,7 +16,7 @@
.icon-inline {
width: 1em;
height: 1em;
font-size: (16/14) * 1em;
font-size: divide(16, 14) * 1em;
vertical-align: -0.2em;
}
src/scss/ui/_images.scss
+1 -1
View File
@@ -1,6 +1,6 @@
.img-responsive {
background: no-repeat center/cover;
padding-top: percentage(3 / 4);
padding-top: percentage(.75);
}
@each $key, $ratio in $aspect-ratios {
src/scss/ui/_lists.scss
+1 -1
View File
@@ -34,7 +34,7 @@
.list-group-hoverable {
.list-group-item-actions {
opacity: 0;
transition: .3s opacity;
@include transition(opacity $transition-time);
}
.list-group-item:hover .list-group-item-actions,
src/scss/ui/_modals.scss
+1 -1
View File
@@ -44,7 +44,7 @@
font-size: $h3-font-size;
font-weight: $headings-font-weight;
color: $headings-color;
line-height: (24/18);
line-height: $line-height-base;
}
.modal-footer {
src/scss/ui/_nav.scss
+2 -2
View File
@@ -63,14 +63,14 @@
.nav-link {
display: flex;
transition: .3s color;
@include transition(color $transition-time);
align-items: center;
}
.nav-link-toggle {
margin-left: auto;
padding: 0 .25rem;
transition: .3s transform;
@include transition(transform $transition-time);
@include caret();
&:after {
src/scss/ui/_offcanvas.scss
+3
View File
@@ -0,0 +1,3 @@
.offcanvas-blur {
backdrop-filter: blur($modal-backdrop-blur);
}
src/scss/ui/_ribbons.scss
+1 -1
View File
@@ -28,7 +28,7 @@
height: 0;
content: "";
filter: brightness(70%);
border: ($ribbon-margin / 2) solid;
border: ($ribbon-margin * .5) solid;
border-color: inherit;
border-top-color: transparent;
border-right-color: transparent;
src/scss/ui/_skeleton.scss
+1 -1
View File
@@ -83,7 +83,7 @@
&:after {
content: '';
padding-top: percentage(9/16);
padding-top: percentage(divide(9, 16));
display: block;
}
}
src/scss/ui/_steps.scss
+1 -1
View File
@@ -5,7 +5,7 @@
padding-top: add($dot-size, 4px);
&:after {
top: add($dot-size / 2, 2px);
top: add($dot-size * .5, 2px);
height: $border-width;
}
src/scss/ui/_switch-icon.scss
+5 -5
View File
@@ -57,7 +57,7 @@
.switch-icon-fade {
.switch-icon-a,
.switch-icon-b {
transition: opacity .5s;
@include transition(opacity .5s);
}
}
@@ -65,7 +65,7 @@
.switch-icon-scale {
.switch-icon-a,
.switch-icon-b {
transition: opacity .5s, transform .0s .5s;
@include transition(opacity .5s, transform .0s .5s);
}
.switch-icon-b {
@@ -75,7 +75,7 @@
&.active {
.switch-icon-a,
.switch-icon-b {
transition: opacity .0s, transform .5s;
@include transition(opacity .0s, transform .5s);
}
.switch-icon-b {
@@ -92,7 +92,7 @@
.switch-icon-b {
backface-visibility: hidden;
transform-style: preserve-3d;
transition: opacity 0s .2s, transform .4s ease-in-out;
@include transition(opacity 0s .2s, transform .4s ease-in-out);
}
.switch-icon-a {
@@ -127,7 +127,7 @@
.switch-icon-a,
.switch-icon-b {
transition: opacity .3s, transform .3s;
@include transition(opacity $transition-time, transform $transition-time);
}
.switch-icon-a {
src/scss/ui/forms/_form-check.scss
+3 -3
View File
@@ -11,10 +11,10 @@ Form check
.form-check-input {
background-size: $form-check-input-width;
margin-top: ($form-check-min-height - $form-check-input-width) / 2;
margin-top: ($form-check-min-height - $form-check-input-width) * .5;
.form-switch & {
transition: .3s background-color, .3s background-position;
@include transition(background-color$transition-time, background-position $transition-time);
}
}
@@ -52,7 +52,7 @@ Form switch
.form-switch {
.form-check-input {
height: $form-switch-height;
margin-top: ($form-check-min-height - $form-switch-height) / 2;
margin-top: ($form-check-min-height - $form-switch-height) * .5;
}
}
src/scss/ui/forms/_form-colorinput.scss
+1 -1
View File
@@ -34,7 +34,7 @@ Color Input
background: no-repeat center center/$form-check-input-checked-bg-size;
background-image: escape-svg($form-check-input-checked-bg-image);
opacity: 0;
transition: .3s opacity;
@include transition(opacity $transition-time);
.form-colorinput-input:checked ~ & {
opacity: 1;
src/scss/ui/forms/_form-imagecheck.scss
+3 -3
View File
@@ -45,7 +45,7 @@ Image check
background: $white;
border: 1px solid $border-color;
border-radius: 3px;
transition: .3s opacity;
@include transition(opacity $transition-time);
.form-imagecheck-input:checked ~ & {
background-color: $form-check-input-checked-bg-color;
@@ -62,7 +62,7 @@ Image check
max-width: 100%;
display: block;
opacity: .64;
transition: .3s opacity;
@include transition(opacity $transition-time);
&:first-child {
border-top-left-radius: 2px;
@@ -86,7 +86,7 @@ Image check
font-size: $font-size-sm;
color: $text-muted;
text-align: center;
transition: .3s color;
@include transition(color $transition-time);
.form-imagecheck:hover &,
.form-imagecheck-input:focus ~ .form-imagecheck-figure &,
src/scss/ui/forms/_form-selectgroup.scss
+1 -1
View File
@@ -43,7 +43,7 @@ Select group
user-select: none;
border: 1px solid $input-border-color;
border-radius: 3px;
transition: border-color .3s, background .3s, color .3s;
@include transition(border-color $transition-time, background $transition-time, color $transition-time);
.icon:only-child {
margin: 0 -.25rem;
src/scss/utils/_background.scss
+2 -2
View File
@@ -1,11 +1,11 @@
.bg-white-overlay {
color: $white;
background-color: $light-white;
background-color: rgba($light, .24);
}
.bg-dark-overlay {
color: $white;
background-color: $light-black;
background-color: rgba($dark, .24);
}
.bg-cover {
src/scss/utils/_colors.scss
+6 -6
View File
@@ -4,28 +4,28 @@
SOCIAL COLORS
*/
@each $color, $value in $social-colors {
.bg-#{$color} {
.bg-#{"" + $color} {
color: #fff !important;
background: $value !important;
}
.text-#{$color} {
.text-#{"" + $color} {
color: $value !important;
}
}
@if $enable-extra-colors {
@each $color, $value in map-merge($colors, (dark: $dark, muted: $text-muted, white: $white)) {
.bg-#{$color} {
@each $color, $value in map-merge($colors, ( muted: $text-muted )) {
.bg-#{"" + $color} {
background: $value;
}
.text-#{$color} {
.text-#{"" + $color} {
color: $value !important;
}
.bg-#{$color}-lt {
.bg-#{"" + $color}-lt {
color: $value !important;
background: theme-color-lighter($value, true) !important;
}
src/scss/utils/_opacity.scss
+1 -1
View File
@@ -2,6 +2,6 @@
@for $i from 0 through 20 {
.opacity-#{$i * 5} {
opacity: $i * 5 / 100 !important;
opacity: divide($i * 5, 100) !important;
}
}
src/scss/vendor/_litepicker.scss
Vendored
+1 -1
View File
@@ -41,7 +41,7 @@
.day-item {
cursor: pointer !important;
padding: .5rem 0 !important;
transition: .3s color, .3s background-color, .3s border-color;
@include transition(color $transition-time, background-color $transition-time, border-color $transition-time);
}
}
src/scss/vendor/_nouislider.scss
Vendored
+3 -3
View File
@@ -1,4 +1,4 @@
@import "~nouislider/distribute/nouislider";
@import "~nouislider/dist/nouislider";
.noUi-target {
border: 0;
@@ -35,8 +35,8 @@
.noUi-horizontal & {
width: $form-range-thumb-width;
height: $form-range-thumb-height;
top: (-$form-range-thumb-height / 2);
right: (-$form-range-thumb-height / 2);
top: (-$form-range-thumb-height * .5);
right: (-$form-range-thumb-height * .5);
margin: 1px 1px 0 0;
}