mirror of
https://github.com/tabler/tabler.git
synced 2026-07-15 01:51:43 +04:00
Refactor SCSS files to implement cascade layers for better organization and maintainability. This includes defining layers for components, utilities, and forms across various SCSS files, enhancing the overall structure of the stylesheets.
This commit is contained in:
codecalm
@@ -0,0 +1,6 @@
|
||||
---
|
||||
"@tabler/core": patch
|
||||
---
|
||||
|
||||
Updated `tabler-vendors.css`, `tabler-themes.css`, and `tabler-marketing.css` to use CSS Cascade Layers (`@layer`) for predictable cascade ordering.
|
||||
|
||||
@@ -1,7 +1,52 @@
|
||||
---
|
||||
alwaysApply: false
|
||||
---
|
||||
|
||||
## SCSS Cascade Layers Guidelines
|
||||
|
||||
Use CSS Cascade Layers (`@layer`) to make the cascade predictable across modules (reboot/layout/forms/components/helpers/utilities), without relying on import order or widespread `!important`.
|
||||
|
||||
### 0. Inventory: SCSS entrypoints → CSS bundles → consumers
|
||||
|
||||
This repo produces multiple CSS bundles from multiple SCSS entrypoints. Before moving rules into layers, keep this mapping handy so you can reason about bundle-level ordering and who consumes what.
|
||||
|
||||
#### `@tabler/core` (published bundles)
|
||||
|
||||
- **Build tool**: Sass CLI (not Vite) compiles `core/scss/` → `core/dist/css/` via `sass scss/:dist/css/`
|
||||
- **Entrypoints (non-partials)**:
|
||||
- `core/scss/tabler.scss` → `core/dist/css/tabler.css` (+ `tabler.min.css`, `tabler.rtl.css`, `tabler.rtl.min.css`)
|
||||
- **Consumers**:
|
||||
- `shared/includes/layout/css.html` (preview pages, mandatory styles)
|
||||
- `shared/layouts/docs/default.html` (docs site)
|
||||
- `core/package.json` exposes it via `style: dist/css/tabler.css` and `sass: scss/tabler.scss`
|
||||
- `core/scss/tabler-flags.scss` → `core/dist/css/tabler-flags.css` (+ `.min`, `.rtl`, `.rtl.min`)
|
||||
- `core/scss/tabler-socials.scss` → `core/dist/css/tabler-socials.css` (+ `.min`, `.rtl`, `.rtl.min`)
|
||||
- `core/scss/tabler-payments.scss` → `core/dist/css/tabler-payments.css` (+ `.min`, `.rtl`, `.rtl.min`)
|
||||
- `core/scss/tabler-vendors.scss` → `core/dist/css/tabler-vendors.css` (+ `.min`, `.rtl`, `.rtl.min`)
|
||||
- `core/scss/tabler-marketing.scss` → `core/dist/css/tabler-marketing.css` (+ `.min`, `.rtl`, `.rtl.min`)
|
||||
- `core/scss/tabler-themes.scss` → `core/dist/css/tabler-themes.css` (+ `.min`, `.rtl`, `.rtl.min`)
|
||||
- `core/scss/tabler-props.scss` → `core/dist/css/tabler-props.css` (+ `.min`, `.rtl`, `.rtl.min`)
|
||||
- **Note**: currently not included by default layouts (it exists as a separate bundle and is covered by SRI generation).
|
||||
- **Plugin consumers**:
|
||||
- Preview pages: `shared/includes/layout/css.html` loads `tabler-{{ plugin }}` for each plugin in `shared/data/site.json` (`cssPlugins`).
|
||||
- Docs site: `shared/layouts/docs/default.html` loads the same plugin list.
|
||||
- **Copying into static sites**:
|
||||
- `preview/eleventy.config.mjs` and `docs/eleventy.config.mjs` both `addPassthroughCopy({ "node_modules/@tabler/core/dist": "dist" })`, so core bundles are available at `/dist/css/...` in those sites.
|
||||
|
||||
#### `@tabler/preview` (preview-only bundle)
|
||||
|
||||
- **Build tool**: Sass CLI compiles `preview/scss/` → `preview/dist/preview/css/` via `sass scss/:dist/preview/css/`
|
||||
- **Entrypoints**:
|
||||
- `preview/scss/demo.scss` → `preview/dist/preview/css/demo.css` (+ `.min`)
|
||||
- **Consumer**: `shared/includes/layout/css.html` loads it as `/preview/css/demo...`
|
||||
|
||||
#### `@tabler/docs` (docs-only bundle)
|
||||
|
||||
- **Build tool**: Sass CLI compiles `docs/scss/` → `docs/dist/css/` via `sass scss/:dist/css/`
|
||||
- **Entrypoints**:
|
||||
- `docs/scss/docs.scss` → `docs/dist/css/docs.css` (+ `.min`)
|
||||
- **Consumer**: `shared/layouts/docs/default.html` loads it as `/css/docs...`
|
||||
|
||||
### 1. Canonical layer order (single source of truth)
|
||||
|
||||
- Define the layer order exactly once in the main entrypoint (e.g. the file that builds the final CSS bundle).
|
||||
|
||||
@@ -1,30 +1,48 @@
|
||||
// Layout & components
|
||||
@import 'bootstrap/scss/root';
|
||||
@import 'bootstrap/scss/reboot';
|
||||
@import 'bootstrap/scss/type';
|
||||
@import 'bootstrap/scss/images';
|
||||
@import 'bootstrap/scss/containers';
|
||||
@import 'bootstrap/scss/grid';
|
||||
@import 'bootstrap/scss/tables';
|
||||
@import 'bootstrap/scss/forms';
|
||||
@import 'bootstrap/scss/buttons';
|
||||
@import 'bootstrap/scss/transitions';
|
||||
@import 'bootstrap/scss/dropdown';
|
||||
@import 'bootstrap/scss/button-group';
|
||||
@import 'bootstrap/scss/nav';
|
||||
@import 'bootstrap/scss/navbar';
|
||||
@import 'bootstrap/scss/card';
|
||||
@import 'bootstrap/scss/pagination';
|
||||
@import 'bootstrap/scss/progress';
|
||||
@import 'bootstrap/scss/list-group';
|
||||
@import 'bootstrap/scss/toasts';
|
||||
@import 'bootstrap/scss/modal';
|
||||
@import 'bootstrap/scss/tooltip';
|
||||
@import 'bootstrap/scss/popover';
|
||||
@import 'bootstrap/scss/carousel';
|
||||
@import 'bootstrap/scss/spinners';
|
||||
@import 'bootstrap/scss/offcanvas';
|
||||
@import 'bootstrap/scss/placeholders';
|
||||
// Bootstrap (CSS Cascade Layers)
|
||||
@layer root {
|
||||
@import 'bootstrap/scss/root';
|
||||
}
|
||||
|
||||
// Utilities
|
||||
@import 'bootstrap/scss/utilities/api';
|
||||
@layer reboot {
|
||||
@import 'bootstrap/scss/reboot';
|
||||
}
|
||||
|
||||
@layer content {
|
||||
@import 'bootstrap/scss/type';
|
||||
@import 'bootstrap/scss/images';
|
||||
@import 'bootstrap/scss/tables';
|
||||
}
|
||||
|
||||
@layer layout {
|
||||
@import 'bootstrap/scss/containers';
|
||||
@import 'bootstrap/scss/grid';
|
||||
@import 'bootstrap/scss/nav';
|
||||
@import 'bootstrap/scss/navbar';
|
||||
}
|
||||
|
||||
@layer forms {
|
||||
@import 'bootstrap/scss/forms';
|
||||
}
|
||||
|
||||
@layer components {
|
||||
@import 'bootstrap/scss/buttons';
|
||||
@import 'bootstrap/scss/transitions';
|
||||
@import 'bootstrap/scss/dropdown';
|
||||
@import 'bootstrap/scss/button-group';
|
||||
@import 'bootstrap/scss/card';
|
||||
@import 'bootstrap/scss/pagination';
|
||||
@import 'bootstrap/scss/progress';
|
||||
@import 'bootstrap/scss/list-group';
|
||||
@import 'bootstrap/scss/toasts';
|
||||
@import 'bootstrap/scss/modal';
|
||||
@import 'bootstrap/scss/tooltip';
|
||||
@import 'bootstrap/scss/popover';
|
||||
@import 'bootstrap/scss/carousel';
|
||||
@import 'bootstrap/scss/spinners';
|
||||
@import 'bootstrap/scss/offcanvas';
|
||||
@import 'bootstrap/scss/placeholders';
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
@import 'bootstrap/scss/utilities/api';
|
||||
}
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
// Canonical CSS Cascade Layers order.
|
||||
// Keep in sync with `.cursor/rules/scss-layers.mdc`.
|
||||
@layer colors, theme, config, root, reboot, layout, content, forms, components, helpers, custom, utilities;
|
||||
@@ -1,6 +1,7 @@
|
||||
@use 'sass:map';
|
||||
@import 'config';
|
||||
|
||||
@layer root {
|
||||
:root,
|
||||
:host {
|
||||
/** Fonts */
|
||||
@@ -91,3 +92,4 @@
|
||||
--#{$prefix}backdrop-blur: #{$backdrop-blur};
|
||||
--#{$prefix}backdrop-filter: blur(var(--#{$prefix}backdrop-blur));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@layer root {
|
||||
// Geist Sans Font Family
|
||||
@font-face {
|
||||
font-family: 'Geist';
|
||||
@@ -201,3 +202,5 @@
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
@use 'sass:map';
|
||||
|
||||
@layer helpers {
|
||||
//
|
||||
// Clearfix
|
||||
//
|
||||
@@ -142,3 +143,4 @@
|
||||
// By default, there is no `--bs-focus-ring-x`, `--bs-focus-ring-y`, or `--bs-focus-ring-blur`, but we provide CSS variables with fallbacks to initial `0` values
|
||||
box-shadow: var(--#{$prefix}focus-ring-x, 0) var(--#{$prefix}focus-ring-y, 0) var(--#{$prefix}focus-ring-blur, 0) var(--#{$prefix}focus-ring-width) var(--#{$prefix}focus-ring-color);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@layer layout {
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
@@ -96,3 +97,4 @@
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
@use 'sass:map';
|
||||
|
||||
@layer layout {
|
||||
html {
|
||||
scrollbar-gutter: stable;
|
||||
|
||||
@@ -74,3 +75,4 @@ body {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
|
||||
// stylelint-disable declaration-no-important
|
||||
|
||||
@layer layout {
|
||||
@if $enable-dark-mode {
|
||||
:root {
|
||||
&:not(.theme-dark):not([data-bs-theme='dark']) {
|
||||
@@ -67,3 +68,4 @@
|
||||
@extend [data-bs-theme='dark'];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@layer layout {
|
||||
.footer {
|
||||
border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $footer-border-color;
|
||||
background-color: $footer-bg;
|
||||
@@ -14,3 +15,4 @@
|
||||
background-color: transparent;
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -76,6 +76,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@layer layout {
|
||||
/**
|
||||
Navbar
|
||||
*/
|
||||
@@ -391,3 +392,4 @@ Navbar vertical
|
||||
box-shadow: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@layer layout {
|
||||
.page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -167,3 +168,4 @@
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@layer root {
|
||||
:root,
|
||||
:host {
|
||||
font-size: 16px;
|
||||
@@ -60,3 +61,4 @@
|
||||
--#{$prefix}page-padding: #{$page-padding-sm};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,69 +1,71 @@
|
||||
//
|
||||
// Browser
|
||||
//
|
||||
.browser {
|
||||
border-radius: var(--#{$prefix}border-radius-lg);
|
||||
box-shadow: 0 0 0 1px var(--#{$prefix}border-color);
|
||||
background: var(--#{$prefix}bg-surface-secondary);
|
||||
overflow: hidden;
|
||||
}
|
||||
@layer components {
|
||||
.browser {
|
||||
border-radius: var(--#{$prefix}border-radius-lg);
|
||||
box-shadow: 0 0 0 1px var(--#{$prefix}border-color);
|
||||
background: var(--#{$prefix}bg-surface-secondary);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.browser-header {
|
||||
padding: 0.25rem 1rem;
|
||||
background: var(--#{$prefix}border-color-light) linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.03));
|
||||
border-bottom: 1px solid var(--#{$prefix}border-color);
|
||||
border-radius: calc(var(--#{$prefix}border-radius-lg) - 1px) calc(var(--#{$prefix}border-radius-lg) - 1px) 0 0;
|
||||
}
|
||||
.browser-header {
|
||||
padding: 0.25rem 1rem;
|
||||
background: var(--#{$prefix}border-color-light) linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.03));
|
||||
border-bottom: 1px solid var(--#{$prefix}border-color);
|
||||
border-radius: calc(var(--#{$prefix}border-radius-lg) - 1px) calc(var(--#{$prefix}border-radius-lg) - 1px) 0 0;
|
||||
}
|
||||
|
||||
.browser-dots {
|
||||
margin-inline-end: 3rem;
|
||||
display: flex;
|
||||
}
|
||||
.browser-dots {
|
||||
margin-inline-end: 3rem;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.browser-dots-colored {
|
||||
.browser-dot {
|
||||
&:nth-child(1) {
|
||||
background: #fb6058;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
background: #fcbe3b;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
background: #2ccb4c;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.browser-dots-colored {
|
||||
.browser-dot {
|
||||
&:nth-child(1) {
|
||||
background: #fb6058;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
background: #fcbe3b;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
background: #2ccb4c;
|
||||
}
|
||||
margin-inline-end: 0.5rem;
|
||||
width: 0.75rem;
|
||||
min-width: 0.75rem;
|
||||
height: 0.75rem;
|
||||
background: var(--#{$prefix}border-color);
|
||||
border-radius: 50%;
|
||||
border: 1px solid var(--#{$prefix}border-color-dark);
|
||||
}
|
||||
}
|
||||
|
||||
.browser-dot {
|
||||
margin-inline-end: 0.5rem;
|
||||
width: 0.75rem;
|
||||
min-width: 0.75rem;
|
||||
height: 0.75rem;
|
||||
background: var(--#{$prefix}border-color);
|
||||
border-radius: 50%;
|
||||
border: 1px solid var(--#{$prefix}border-color-dark);
|
||||
}
|
||||
|
||||
.browser-input {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
padding: 0.25rem;
|
||||
color: var(--#{$prefix}secondary);
|
||||
font-size: var(--#{$prefix}font-size-h5);
|
||||
border-radius: var(--#{$prefix}border-radius);
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(0, 0, 0, 0.05),
|
||||
0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||
background-image: linear-gradient(to bottom, var(--#{$prefix}bg-surface), var(--#{$prefix}bg-surface-secondary));
|
||||
|
||||
&:hover {
|
||||
.browser-input {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
padding: 0.25rem;
|
||||
color: var(--#{$prefix}secondary);
|
||||
font-size: var(--#{$prefix}font-size-h5);
|
||||
border-radius: var(--#{$prefix}border-radius);
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(0, 0, 0, 0.05),
|
||||
0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||
background-image: linear-gradient(to bottom, var(--#{$prefix}bg-surface), var(--#{$prefix}bg-surface-secondary));
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
.body-marketing {
|
||||
--#{$prefix}body-font-size: 1rem;
|
||||
--#{$prefix}body-line-height: 1.75;
|
||||
}
|
||||
@layer components {
|
||||
.body-marketing {
|
||||
--#{$prefix}body-font-size: 1rem;
|
||||
--#{$prefix}body-line-height: 1.75;
|
||||
}
|
||||
|
||||
.body-gradient {
|
||||
background: var(--#{$prefix}bg-surface) linear-gradient(to bottom, var(--#{$prefix}bg-surface-secondary) 12%, var(--#{$prefix}bg-surface) 99%) repeat-x top center/100% 100vh;
|
||||
.body-gradient {
|
||||
background: var(--#{$prefix}bg-surface) linear-gradient(to bottom, var(--#{$prefix}bg-surface-secondary) 12%, var(--#{$prefix}bg-surface) 99%) repeat-x top center/100% 100vh;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,69 +1,71 @@
|
||||
//
|
||||
// Hero
|
||||
//
|
||||
.hero {
|
||||
text-align: center;
|
||||
padding: 6.5rem 0;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 3rem;
|
||||
font-weight: var(--#{$prefix}font-weight-black);
|
||||
letter-spacing: $spacing-tight;
|
||||
line-height: $headings-line-height;
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
font-size: 2rem;
|
||||
@layer components {
|
||||
.hero {
|
||||
text-align: center;
|
||||
padding: 6.5rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-description {
|
||||
color: var(--#{$prefix}secondary);
|
||||
font-size: var(--#{$prefix}font-size-h2);
|
||||
line-height: 1.5;
|
||||
margin: 0 auto;
|
||||
max-width: 45rem;
|
||||
.hero-title {
|
||||
font-size: 3rem;
|
||||
font-weight: var(--#{$prefix}font-weight-black);
|
||||
letter-spacing: $spacing-tight;
|
||||
line-height: $headings-line-height;
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
font-size: var(--#{$prefix}font-size-h3);
|
||||
@include media-breakpoint-down(md) {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hero-description-wide {
|
||||
max-width: 61.875rem;
|
||||
}
|
||||
.hero-description {
|
||||
color: var(--#{$prefix}secondary);
|
||||
font-size: var(--#{$prefix}font-size-h2);
|
||||
line-height: 1.5;
|
||||
margin: 0 auto;
|
||||
max-width: 45rem;
|
||||
|
||||
//
|
||||
// Hero subheader
|
||||
//
|
||||
.hero-subheader {
|
||||
@include subheader;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
@include media-breakpoint-down(sm) {
|
||||
font-size: var(--#{$prefix}font-size-h3);
|
||||
}
|
||||
}
|
||||
|
||||
.hero-img {
|
||||
margin: 4rem auto;
|
||||
max-width: 65rem;
|
||||
border-radius: $border-radius-lg;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
//box-shadow: 0 10px 15px -3px rgba($color-text, 0.1),
|
||||
// 0 4px 6px -2px rgba($color-text, 0.05);
|
||||
.hero-description-wide {
|
||||
max-width: 61.875rem;
|
||||
}
|
||||
|
||||
img,
|
||||
svg {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
//
|
||||
// Hero subheader
|
||||
//
|
||||
.hero-subheader {
|
||||
@include subheader;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.hero-img {
|
||||
margin: 4rem auto;
|
||||
max-width: 65rem;
|
||||
border-radius: $border-radius-lg;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
//box-shadow: 0 10px 15px -3px rgba($color-text, 0.1),
|
||||
// 0 4px 6px -2px rgba($color-text, 0.05);
|
||||
|
||||
img,
|
||||
svg {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
//
|
||||
//.hero-img-side {
|
||||
// img,
|
||||
// svg {
|
||||
// max-width: 100%;
|
||||
// height: auto;
|
||||
// display: block;
|
||||
// }
|
||||
//}
|
||||
}
|
||||
//
|
||||
//.hero-img-side {
|
||||
// img,
|
||||
// svg {
|
||||
// max-width: 100%;
|
||||
// height: auto;
|
||||
// display: block;
|
||||
// }
|
||||
//}
|
||||
|
||||
+106
-104
@@ -1,111 +1,113 @@
|
||||
$pricing-card-width: 22rem;
|
||||
|
||||
.pricing {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 auto;
|
||||
justify-content: center;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
.pricing-card {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--#{$prefix}bg-surface);
|
||||
border: 1px solid $border-color;
|
||||
padding: 2rem;
|
||||
margin: 0 0 1rem;
|
||||
position: relative;
|
||||
box-shadow: $box-shadow-card;
|
||||
text-align: center;
|
||||
border-radius: $border-radius-lg;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
margin: 1rem -1px;
|
||||
max-width: $pricing-card-width;
|
||||
|
||||
&:first-child {
|
||||
border-radius: $border-radius-lg 0 0 $border-radius-lg;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0 $border-radius-lg $border-radius-lg 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.featured {
|
||||
z-index: 1;
|
||||
border: 2px solid var(--#{$prefix}primary);
|
||||
order: -1;
|
||||
@layer components {
|
||||
.pricing {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 auto;
|
||||
justify-content: center;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
order: unset;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
box-shadow: $box-shadow-card;
|
||||
border-radius: $border-radius-lg;
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
.pricing-card {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--#{$prefix}bg-surface);
|
||||
border: 1px solid $border-color;
|
||||
padding: 2rem;
|
||||
margin: 0 0 1rem;
|
||||
position: relative;
|
||||
box-shadow: $box-shadow-card;
|
||||
text-align: center;
|
||||
border-radius: $border-radius-lg;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
margin: 1rem -1px;
|
||||
max-width: $pricing-card-width;
|
||||
|
||||
&:first-child {
|
||||
border-radius: $border-radius-lg 0 0 $border-radius-lg;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0 $border-radius-lg $border-radius-lg 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.featured {
|
||||
z-index: 1;
|
||||
border: 2px solid var(--#{$prefix}primary);
|
||||
order: -1;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
order: unset;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
box-shadow: $box-shadow-card;
|
||||
border-radius: $border-radius-lg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pricing-title {
|
||||
font-size: $h2-font-size;
|
||||
line-height: $h2-line-height;
|
||||
}
|
||||
|
||||
.pricing-label {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
inset-inline-start: 0;
|
||||
transform: translateY(-50%);
|
||||
vertical-align: bottom;
|
||||
inset-inline-end: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.pricing-btn {
|
||||
margin-top: auto;
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
.pricing-price {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 2.5rem;
|
||||
line-height: 1;
|
||||
font-weight: $font-weight-semibold;
|
||||
margin: 0.75rem 0;
|
||||
}
|
||||
|
||||
.pricing-price-currency {
|
||||
font-size: $h2-font-size;
|
||||
line-height: 1.5;
|
||||
margin-inline-end: 0.25rem;
|
||||
font-weight: $font-weight-semibold;
|
||||
}
|
||||
|
||||
.pricing-price-description {
|
||||
font-size: $h4-font-size;
|
||||
line-height: $h4-line-height;
|
||||
font-weight: $font-weight-normal;
|
||||
color: $text-secondary;
|
||||
align-self: center;
|
||||
margin-inline-start: 0.5rem;
|
||||
}
|
||||
|
||||
.pricing-features {
|
||||
margin: 1rem 0 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
text-align: start;
|
||||
|
||||
> li:not(:first-child) {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pricing-title {
|
||||
font-size: $h2-font-size;
|
||||
line-height: $h2-line-height;
|
||||
}
|
||||
|
||||
.pricing-label {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
inset-inline-start: 0;
|
||||
transform: translateY(-50%);
|
||||
vertical-align: bottom;
|
||||
inset-inline-end: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.pricing-btn {
|
||||
margin-top: auto;
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
.pricing-price {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 2.5rem;
|
||||
line-height: 1;
|
||||
font-weight: $font-weight-semibold;
|
||||
margin: 0.75rem 0;
|
||||
}
|
||||
|
||||
.pricing-price-currency {
|
||||
font-size: $h2-font-size;
|
||||
line-height: 1.5;
|
||||
margin-inline-end: 0.25rem;
|
||||
font-weight: $font-weight-semibold;
|
||||
}
|
||||
|
||||
.pricing-price-description {
|
||||
font-size: $h4-font-size;
|
||||
line-height: $h4-line-height;
|
||||
font-weight: $font-weight-normal;
|
||||
color: $text-secondary;
|
||||
align-self: center;
|
||||
margin-inline-start: 0.5rem;
|
||||
}
|
||||
|
||||
.pricing-features {
|
||||
margin: 1rem 0 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
text-align: start;
|
||||
|
||||
> li:not(:first-child) {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
+110
-108
@@ -1,124 +1,126 @@
|
||||
@keyframes move-forever1 {
|
||||
0% {
|
||||
transform: translate(85px, 0%);
|
||||
@layer components {
|
||||
@keyframes move-forever1 {
|
||||
0% {
|
||||
transform: translate(85px, 0%);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(-90px, 0%);
|
||||
}
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(-90px, 0%);
|
||||
}
|
||||
}
|
||||
@keyframes move-forever2 {
|
||||
0% {
|
||||
transform: translate(-90px, 0%);
|
||||
}
|
||||
|
||||
@keyframes move-forever2 {
|
||||
0% {
|
||||
transform: translate(-90px, 0%);
|
||||
100% {
|
||||
transform: translate(85px, 0%);
|
||||
}
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(85px, 0%);
|
||||
}
|
||||
}
|
||||
@keyframes move-forever3 {
|
||||
0% {
|
||||
transform: translate(-90px, 0%);
|
||||
}
|
||||
|
||||
@keyframes move-forever3 {
|
||||
0% {
|
||||
transform: translate(-90px, 0%);
|
||||
100% {
|
||||
transform: translate(85px, 0%);
|
||||
}
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(85px, 0%);
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Sections
|
||||
//
|
||||
.section {
|
||||
--section-bg: transparent;
|
||||
background: var(--section-bg);
|
||||
position: relative;
|
||||
padding: 5rem 0;
|
||||
}
|
||||
|
||||
.section-sm {
|
||||
padding: 4rem 0;
|
||||
}
|
||||
|
||||
.section-white {
|
||||
--section-bg: var(--#{$prefix}bg-surface);
|
||||
}
|
||||
|
||||
.section-light {
|
||||
--section-bg: var(--#{$prefix}bg-surface-secondary);
|
||||
}
|
||||
|
||||
.section-primary {
|
||||
--section-bg: var(--#{$prefix}primary);
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.section-dark {
|
||||
--section-bg: var(--#{$prefix}dark);
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
text-align: center;
|
||||
max-width: 45rem;
|
||||
margin: 0 auto 5rem;
|
||||
|
||||
@at-root .section-sm & {
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: var(--#{$prefix}font-size-h1);
|
||||
font-weight: var(--#{$prefix}font-weight-semibold);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.section-title-lg {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.section-description {
|
||||
color: var(--#{$prefix}secondary);
|
||||
font-size: var(--#{$prefix}font-size-h3);
|
||||
line-height: var(--#{$prefix}line-height-h3);
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
//
|
||||
// Section divider
|
||||
//
|
||||
.section-divider {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
pointer-events: none;
|
||||
height: 5rem;
|
||||
width: 100%;
|
||||
|
||||
path {
|
||||
fill: var(--section-bg);
|
||||
//
|
||||
// Sections
|
||||
//
|
||||
.section {
|
||||
--section-bg: transparent;
|
||||
background: var(--section-bg);
|
||||
position: relative;
|
||||
padding: 5rem 0;
|
||||
}
|
||||
|
||||
.wave-1 {
|
||||
animation: move-forever1 30s linear infinite;
|
||||
animation-delay: -2s;
|
||||
.section-sm {
|
||||
padding: 4rem 0;
|
||||
}
|
||||
|
||||
.wave-2 {
|
||||
animation: move-forever2 24s linear infinite;
|
||||
opacity: 0.5;
|
||||
animation-delay: -2s;
|
||||
.section-white {
|
||||
--section-bg: var(--#{$prefix}bg-surface);
|
||||
}
|
||||
|
||||
.wave-3 {
|
||||
animation: move-forever3 18s linear infinite;
|
||||
opacity: 0.3;
|
||||
animation-delay: -2s;
|
||||
.section-light {
|
||||
--section-bg: var(--#{$prefix}bg-surface-secondary);
|
||||
}
|
||||
|
||||
.section-primary {
|
||||
--section-bg: var(--#{$prefix}primary);
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.section-dark {
|
||||
--section-bg: var(--#{$prefix}dark);
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
text-align: center;
|
||||
max-width: 45rem;
|
||||
margin: 0 auto 5rem;
|
||||
|
||||
@at-root .section-sm & {
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: var(--#{$prefix}font-size-h1);
|
||||
font-weight: var(--#{$prefix}font-weight-semibold);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.section-title-lg {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.section-description {
|
||||
color: var(--#{$prefix}secondary);
|
||||
font-size: var(--#{$prefix}font-size-h3);
|
||||
line-height: var(--#{$prefix}line-height-h3);
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
//
|
||||
// Section divider
|
||||
//
|
||||
.section-divider {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
pointer-events: none;
|
||||
height: 5rem;
|
||||
width: 100%;
|
||||
|
||||
path {
|
||||
fill: var(--section-bg);
|
||||
}
|
||||
|
||||
.wave-1 {
|
||||
animation: move-forever1 30s linear infinite;
|
||||
animation-delay: -2s;
|
||||
}
|
||||
|
||||
.wave-2 {
|
||||
animation: move-forever2 24s linear infinite;
|
||||
opacity: 0.5;
|
||||
animation-delay: -2s;
|
||||
}
|
||||
|
||||
.wave-3 {
|
||||
animation: move-forever3 18s linear infinite;
|
||||
opacity: 0.3;
|
||||
animation-delay: -2s;
|
||||
}
|
||||
}
|
||||
|
||||
.section-divider-auto {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.section-divider-auto {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
@@ -1,33 +1,35 @@
|
||||
@use 'sass:map';
|
||||
|
||||
.shape {
|
||||
--#{$prefix}shape-size: #{$avatar-size};
|
||||
--#{$prefix}shape-icon-size: #{$avatar-icon-size};
|
||||
background-color: var(--#{$prefix}primary-lt);
|
||||
color: var(--#{$prefix}primary);
|
||||
border-radius: 35%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: var(--#{$prefix}shape-size);
|
||||
width: var(--#{$prefix}shape-size);
|
||||
@layer components {
|
||||
.shape {
|
||||
--#{$prefix}shape-size: #{$avatar-size};
|
||||
--#{$prefix}shape-icon-size: #{$avatar-icon-size};
|
||||
background-color: var(--#{$prefix}primary-lt);
|
||||
color: var(--#{$prefix}primary);
|
||||
border-radius: 35%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: var(--#{$prefix}shape-size);
|
||||
width: var(--#{$prefix}shape-size);
|
||||
|
||||
.icon {
|
||||
width: var(--#{$prefix}shape-icon-size);
|
||||
height: var(--#{$prefix}shape-icon-size);
|
||||
}
|
||||
}
|
||||
|
||||
@each $avatar-size, $size in $avatar-sizes {
|
||||
.shape-#{$avatar-size} {
|
||||
--#{$prefix}shape-size: #{map.get($size, size)};
|
||||
--#{$prefix}shape-icon-size: #{map.get($size, icon-size)};
|
||||
}
|
||||
}
|
||||
|
||||
@each $name, $color in $colors {
|
||||
.shape-#{$name} {
|
||||
background: var(--#{$prefix}#{$name}-lt);
|
||||
color: var(--#{$prefix}#{$name});
|
||||
.icon {
|
||||
width: var(--#{$prefix}shape-icon-size);
|
||||
height: var(--#{$prefix}shape-icon-size);
|
||||
}
|
||||
}
|
||||
|
||||
@each $avatar-size, $size in $avatar-sizes {
|
||||
.shape-#{$avatar-size} {
|
||||
--#{$prefix}shape-size: #{map.get($size, size)};
|
||||
--#{$prefix}shape-icon-size: #{map.get($size, icon-size)};
|
||||
}
|
||||
}
|
||||
|
||||
@each $name, $color in $colors {
|
||||
.shape-#{$name} {
|
||||
background: var(--#{$prefix}#{$name}-lt);
|
||||
color: var(--#{$prefix}#{$name});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1 +1,3 @@
|
||||
@use 'layers';
|
||||
|
||||
@import 'ui/flags';
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@use 'layers';
|
||||
|
||||
@import 'config';
|
||||
@import 'variables';
|
||||
@import 'utilities-marketing';
|
||||
@@ -10,4 +12,6 @@
|
||||
@import 'marketing/pricing';
|
||||
@import 'marketing/shape';
|
||||
|
||||
@import 'bootstrap/scss/utilities/api';
|
||||
@layer utilities {
|
||||
@import 'bootstrap/scss/utilities/api';
|
||||
}
|
||||
|
||||
@@ -1 +1,3 @@
|
||||
@use 'layers';
|
||||
|
||||
@forward 'ui/payments';
|
||||
|
||||
@@ -1 +1,3 @@
|
||||
@use 'layers';
|
||||
|
||||
@import 'props';
|
||||
|
||||
@@ -1 +1,3 @@
|
||||
@use 'layers';
|
||||
|
||||
@import 'ui/social';
|
||||
|
||||
+113
-109
@@ -1,121 +1,125 @@
|
||||
@use 'layers';
|
||||
|
||||
@import 'config';
|
||||
|
||||
[data-bs-theme-base='slate'] {
|
||||
--#{$prefix}gray-50: #f8fafc;
|
||||
--#{$prefix}gray-100: #f1f5f9;
|
||||
--#{$prefix}gray-200: #e2e8f0;
|
||||
--#{$prefix}gray-300: #cbd5e1;
|
||||
--#{$prefix}gray-400: #94a3b8;
|
||||
--#{$prefix}gray-500: #64748b;
|
||||
--#{$prefix}gray-600: #475569;
|
||||
--#{$prefix}gray-700: #334155;
|
||||
--#{$prefix}gray-800: #1e293b;
|
||||
--#{$prefix}gray-900: #0f172a;
|
||||
--#{$prefix}gray-950: #020617;
|
||||
}
|
||||
|
||||
[data-bs-theme-base='gray'] {
|
||||
--#{$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;
|
||||
}
|
||||
|
||||
[data-bs-theme-base='zinc'] {
|
||||
--#{$prefix}gray-50: #fafafa;
|
||||
--#{$prefix}gray-100: #f4f4f5;
|
||||
--#{$prefix}gray-200: #e4e4e7;
|
||||
--#{$prefix}gray-300: #d4d4d8;
|
||||
--#{$prefix}gray-400: #a1a1aa;
|
||||
--#{$prefix}gray-500: #71717a;
|
||||
--#{$prefix}gray-600: #52525b;
|
||||
--#{$prefix}gray-700: #3f3f46;
|
||||
--#{$prefix}gray-800: #27272a;
|
||||
--#{$prefix}gray-900: #18181b;
|
||||
--#{$prefix}gray-950: #09090b;
|
||||
}
|
||||
|
||||
[data-bs-theme-base='neutral'] {
|
||||
--#{$prefix}gray-50: #fafafa;
|
||||
--#{$prefix}gray-100: #f5f5f5;
|
||||
--#{$prefix}gray-200: #e5e5e5;
|
||||
--#{$prefix}gray-300: #d4d4d4;
|
||||
--#{$prefix}gray-400: #a3a3a3;
|
||||
--#{$prefix}gray-500: #737373;
|
||||
--#{$prefix}gray-600: #525252;
|
||||
--#{$prefix}gray-700: #404040;
|
||||
--#{$prefix}gray-800: #262626;
|
||||
--#{$prefix}gray-900: #171717;
|
||||
--#{$prefix}gray-950: #0a0a0a;
|
||||
}
|
||||
|
||||
[data-bs-theme-base='stone'] {
|
||||
--#{$prefix}gray-50: #fafaf9;
|
||||
--#{$prefix}gray-100: #f5f5f4;
|
||||
--#{$prefix}gray-200: #e7e5e4;
|
||||
--#{$prefix}gray-300: #d6d3d1;
|
||||
--#{$prefix}gray-400: #a8a29e;
|
||||
--#{$prefix}gray-500: #78716c;
|
||||
--#{$prefix}gray-600: #57534e;
|
||||
--#{$prefix}gray-700: #44403c;
|
||||
--#{$prefix}gray-800: #292524;
|
||||
--#{$prefix}gray-900: #1c1917;
|
||||
--#{$prefix}gray-950: #0c0a09;
|
||||
}
|
||||
|
||||
[data-bs-theme-base='pink'] {
|
||||
--#{$prefix}gray-50: #fdf2f8;
|
||||
--#{$prefix}gray-100: #fce7f3;
|
||||
--#{$prefix}gray-200: #fbcfe8;
|
||||
--#{$prefix}gray-300: #f9a8d4;
|
||||
--#{$prefix}gray-400: #f472b6;
|
||||
--#{$prefix}gray-500: #ec4899;
|
||||
--#{$prefix}gray-600: #db2777;
|
||||
--#{$prefix}gray-700: #be185d;
|
||||
--#{$prefix}gray-800: #9d174d;
|
||||
--#{$prefix}gray-900: #831843;
|
||||
--#{$prefix}gray-950: #500724;
|
||||
}
|
||||
|
||||
@each $name, $value in $extra-colors {
|
||||
[data-bs-theme-primary='#{$name}'] {
|
||||
--#{$prefix}primary: #{$value};
|
||||
--#{$prefix}primary-rgb: #{to-rgb($value)};
|
||||
@layer theme {
|
||||
[data-bs-theme-base='slate'] {
|
||||
--#{$prefix}gray-50: #f8fafc;
|
||||
--#{$prefix}gray-100: #f1f5f9;
|
||||
--#{$prefix}gray-200: #e2e8f0;
|
||||
--#{$prefix}gray-300: #cbd5e1;
|
||||
--#{$prefix}gray-400: #94a3b8;
|
||||
--#{$prefix}gray-500: #64748b;
|
||||
--#{$prefix}gray-600: #475569;
|
||||
--#{$prefix}gray-700: #334155;
|
||||
--#{$prefix}gray-800: #1e293b;
|
||||
--#{$prefix}gray-900: #0f172a;
|
||||
--#{$prefix}gray-950: #020617;
|
||||
}
|
||||
}
|
||||
|
||||
@each $value in (0, 0.5, 1, 1.5, 2) {
|
||||
[data-bs-theme-radius='#{$value}'] {
|
||||
--#{$prefix}border-radius-scale: #{$value};
|
||||
[data-bs-theme-base='gray'] {
|
||||
--#{$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;
|
||||
}
|
||||
}
|
||||
|
||||
[data-bs-theme-primary='inverted'] {
|
||||
--#{$prefix}primary: var(--#{$prefix}gray-800);
|
||||
--#{$prefix}primary-fg: var(--#{$prefix}light);
|
||||
--#{$prefix}primary-rgb: #{to-rgb($dark)};
|
||||
|
||||
&[data-bs-theme='dark'],
|
||||
[data-bs-theme='dark'] {
|
||||
--#{$prefix}primary: #{$light};
|
||||
--#{$prefix}primary-fg: var(--#{$prefix}dark);
|
||||
--#{$prefix}primary-rgb: #{to-rgb($light)};
|
||||
[data-bs-theme-base='zinc'] {
|
||||
--#{$prefix}gray-50: #fafafa;
|
||||
--#{$prefix}gray-100: #f4f4f5;
|
||||
--#{$prefix}gray-200: #e4e4e7;
|
||||
--#{$prefix}gray-300: #d4d4d8;
|
||||
--#{$prefix}gray-400: #a1a1aa;
|
||||
--#{$prefix}gray-500: #71717a;
|
||||
--#{$prefix}gray-600: #52525b;
|
||||
--#{$prefix}gray-700: #3f3f46;
|
||||
--#{$prefix}gray-800: #27272a;
|
||||
--#{$prefix}gray-900: #18181b;
|
||||
--#{$prefix}gray-950: #09090b;
|
||||
}
|
||||
}
|
||||
|
||||
@each $name, $value in (monospace: $font-family-monospace, sans-serif: $font-family-sans-serif, serif: $font-family-serif, comic: $font-family-comic) {
|
||||
[data-bs-theme-font='#{$name}'] {
|
||||
--#{$prefix}body-font-family: var(--#{$prefix}font-#{$name});
|
||||
[data-bs-theme-base='neutral'] {
|
||||
--#{$prefix}gray-50: #fafafa;
|
||||
--#{$prefix}gray-100: #f5f5f5;
|
||||
--#{$prefix}gray-200: #e5e5e5;
|
||||
--#{$prefix}gray-300: #d4d4d4;
|
||||
--#{$prefix}gray-400: #a3a3a3;
|
||||
--#{$prefix}gray-500: #737373;
|
||||
--#{$prefix}gray-600: #525252;
|
||||
--#{$prefix}gray-700: #404040;
|
||||
--#{$prefix}gray-800: #262626;
|
||||
--#{$prefix}gray-900: #171717;
|
||||
--#{$prefix}gray-950: #0a0a0a;
|
||||
}
|
||||
|
||||
@if $name == 'monospace' {
|
||||
--#{$prefix}body-font-size: 80%;
|
||||
[data-bs-theme-base='stone'] {
|
||||
--#{$prefix}gray-50: #fafaf9;
|
||||
--#{$prefix}gray-100: #f5f5f4;
|
||||
--#{$prefix}gray-200: #e7e5e4;
|
||||
--#{$prefix}gray-300: #d6d3d1;
|
||||
--#{$prefix}gray-400: #a8a29e;
|
||||
--#{$prefix}gray-500: #78716c;
|
||||
--#{$prefix}gray-600: #57534e;
|
||||
--#{$prefix}gray-700: #44403c;
|
||||
--#{$prefix}gray-800: #292524;
|
||||
--#{$prefix}gray-900: #1c1917;
|
||||
--#{$prefix}gray-950: #0c0a09;
|
||||
}
|
||||
|
||||
[data-bs-theme-base='pink'] {
|
||||
--#{$prefix}gray-50: #fdf2f8;
|
||||
--#{$prefix}gray-100: #fce7f3;
|
||||
--#{$prefix}gray-200: #fbcfe8;
|
||||
--#{$prefix}gray-300: #f9a8d4;
|
||||
--#{$prefix}gray-400: #f472b6;
|
||||
--#{$prefix}gray-500: #ec4899;
|
||||
--#{$prefix}gray-600: #db2777;
|
||||
--#{$prefix}gray-700: #be185d;
|
||||
--#{$prefix}gray-800: #9d174d;
|
||||
--#{$prefix}gray-900: #831843;
|
||||
--#{$prefix}gray-950: #500724;
|
||||
}
|
||||
|
||||
@each $name, $value in $extra-colors {
|
||||
[data-bs-theme-primary='#{$name}'] {
|
||||
--#{$prefix}primary: #{$value};
|
||||
--#{$prefix}primary-rgb: #{to-rgb($value)};
|
||||
}
|
||||
}
|
||||
|
||||
@each $value in (0, 0.5, 1, 1.5, 2) {
|
||||
[data-bs-theme-radius='#{$value}'] {
|
||||
--#{$prefix}border-radius-scale: #{$value};
|
||||
}
|
||||
}
|
||||
|
||||
[data-bs-theme-primary='inverted'] {
|
||||
--#{$prefix}primary: var(--#{$prefix}gray-800);
|
||||
--#{$prefix}primary-fg: var(--#{$prefix}light);
|
||||
--#{$prefix}primary-rgb: #{to-rgb($dark)};
|
||||
|
||||
&[data-bs-theme='dark'],
|
||||
[data-bs-theme='dark'] {
|
||||
--#{$prefix}primary: #{$light};
|
||||
--#{$prefix}primary-fg: var(--#{$prefix}dark);
|
||||
--#{$prefix}primary-rgb: #{to-rgb($light)};
|
||||
}
|
||||
}
|
||||
|
||||
@each $name, $value in (monospace: $font-family-monospace, sans-serif: $font-family-sans-serif, serif: $font-family-serif, comic: $font-family-comic) {
|
||||
[data-bs-theme-font='#{$name}'] {
|
||||
--#{$prefix}body-font-family: var(--#{$prefix}font-#{$name});
|
||||
|
||||
@if $name == 'monospace' {
|
||||
--#{$prefix}body-font-size: 80%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,16 +1,20 @@
|
||||
@use 'layers';
|
||||
|
||||
@import 'config';
|
||||
|
||||
@import 'vendor/nouislider';
|
||||
@import 'vendor/litepicker';
|
||||
@import 'vendor/tom-select';
|
||||
@import 'vendor/apexcharts';
|
||||
@import 'vendor/jsvectormap';
|
||||
@import 'vendor/dropzone';
|
||||
@import 'vendor/fslightbox';
|
||||
@import 'vendor/plyr';
|
||||
@import 'vendor/wysiwyg';
|
||||
@import 'vendor/stars-rating';
|
||||
@import 'vendor/coloris';
|
||||
@import 'vendor/typed';
|
||||
@import 'vendor/turbo';
|
||||
@import 'vendor/fullcalendar';
|
||||
@layer components {
|
||||
@import 'vendor/nouislider';
|
||||
@import 'vendor/litepicker';
|
||||
@import 'vendor/tom-select';
|
||||
@import 'vendor/apexcharts';
|
||||
@import 'vendor/jsvectormap';
|
||||
@import 'vendor/dropzone';
|
||||
@import 'vendor/fslightbox';
|
||||
@import 'vendor/plyr';
|
||||
@import 'vendor/wysiwyg';
|
||||
@import 'vendor/stars-rating';
|
||||
@import 'vendor/coloris';
|
||||
@import 'vendor/typed';
|
||||
@import 'vendor/turbo';
|
||||
@import 'vendor/fullcalendar';
|
||||
}
|
||||
|
||||
@@ -1 +1,3 @@
|
||||
@use 'layers';
|
||||
|
||||
@import 'core';
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@layer components {
|
||||
.accordion {
|
||||
--#{$prefix}accordion-color: var(--#{$prefix}body-color);
|
||||
--#{$prefix}accordion-border-color: var(--#{$prefix}border-color);
|
||||
@@ -175,3 +176,4 @@
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@layer components {
|
||||
.alert {
|
||||
--#{$prefix}alert-variant-color: var(--#{$prefix}body-color);
|
||||
--#{$prefix}alert-color: var(--#{$prefix}alert-variant-color);
|
||||
@@ -99,3 +100,4 @@
|
||||
--#{$prefix}alert-variant-color: var(--#{$prefix}#{$name});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
@use 'sass:map';
|
||||
|
||||
@layer components {
|
||||
.avatar {
|
||||
--#{$prefix}avatar-size: var(--#{$prefix}avatar-list-size, #{$avatar-size});
|
||||
--#{$prefix}avatar-status-size: #{$avatar-status-size};
|
||||
@@ -162,3 +163,4 @@
|
||||
border-radius: var(--#{$prefix}border-radius);
|
||||
border: 1px solid var(--#{$prefix}border-color);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@layer components {
|
||||
.badge {
|
||||
--#{$prefix}badge-padding-x: #{$badge-padding-x};
|
||||
--#{$prefix}badge-padding-y: #{$badge-padding-y};
|
||||
@@ -111,3 +112,4 @@
|
||||
.badge-icononly {
|
||||
--#{$prefix}badge-padding-x: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@layer components {
|
||||
.breadcrumb {
|
||||
--#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};
|
||||
--#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y};
|
||||
@@ -79,3 +80,4 @@
|
||||
--#{$prefix}breadcrumb-divider: '#{quote($symbol)}';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@layer components {
|
||||
.btn-group,
|
||||
.btn-group-vertical {
|
||||
box-shadow: $input-box-shadow;
|
||||
@@ -14,3 +15,4 @@
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
@use 'sass:color';
|
||||
@use 'sass:map';
|
||||
|
||||
@layer components {
|
||||
//
|
||||
// Button
|
||||
//
|
||||
@@ -359,3 +360,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@layer components {
|
||||
.calendar {
|
||||
display: block;
|
||||
font-size: $font-size-sm;
|
||||
@@ -102,3 +103,4 @@
|
||||
inset-inline-end: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
@use 'sass:map';
|
||||
|
||||
@layer components {
|
||||
@property --tblr-card-gradient-direction {
|
||||
syntax: '<angle>';
|
||||
inherits: true;
|
||||
@@ -735,3 +736,4 @@ Card gradient
|
||||
.card-gradient-start {
|
||||
--#{$prefix}card-gradient-direction: 90deg;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@layer components {
|
||||
.carousel {
|
||||
}
|
||||
|
||||
@@ -65,3 +66,4 @@
|
||||
height: 90%;
|
||||
background: linear-gradient(0deg, rgba($dark, 0.9), rgba($dark, 0));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@layer components {
|
||||
.chart {
|
||||
display: block;
|
||||
min-height: 10rem;
|
||||
@@ -59,3 +60,4 @@ Chart sparkline
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@layer components {
|
||||
.chat {
|
||||
}
|
||||
|
||||
@@ -36,3 +37,4 @@
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@layer components {
|
||||
.btn-close {
|
||||
--#{$prefix}btn-close-color: currentColor;
|
||||
--#{$prefix}btn-close-bg: #{escape-svg($btn-close-bg)};
|
||||
@@ -63,3 +64,5 @@
|
||||
// @include btn-close-white();
|
||||
// }
|
||||
// }
|
||||
|
||||
}
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
// Base styles
|
||||
//
|
||||
|
||||
@layer components {
|
||||
.datagrid {
|
||||
--#{$prefix}datagrid-padding: #{$datagrid-padding};
|
||||
--#{$prefix}datagrid-item-width: #{$datagrid-item-width};
|
||||
@@ -15,3 +16,5 @@
|
||||
@include subheader;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@layer components {
|
||||
.dropdown-menu {
|
||||
--#{$prefix}dropdown-item-gap: 0.5rem;
|
||||
--#{$prefix}dropdown-item-icon-size: #{$icon-size};
|
||||
@@ -119,3 +120,5 @@
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@layer components {
|
||||
.empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -57,3 +58,5 @@
|
||||
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
|
||||
border-radius: var(--#{$prefix}border-radius);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
@use 'sass:map';
|
||||
@use '../config';
|
||||
|
||||
@layer components {
|
||||
.flag {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
@@ -32,3 +33,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@layer forms {
|
||||
textarea {
|
||||
&[cols] {
|
||||
height: auto;
|
||||
@@ -249,3 +250,4 @@ Forms on mobile devices
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
@use 'sass:map';
|
||||
|
||||
@layer components {
|
||||
.row > * {
|
||||
min-width: 0;
|
||||
}
|
||||
@@ -131,3 +132,4 @@
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
//
|
||||
// Icon component
|
||||
//
|
||||
@layer components {
|
||||
.icon {
|
||||
--#{$prefix}icon-size: #{$font-size-base * $line-height-base};
|
||||
width: var(--#{$prefix}icon-size);
|
||||
@@ -70,3 +71,5 @@
|
||||
animation: rotate-360 3s linear infinite;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
@use 'sass:math';
|
||||
|
||||
@layer components {
|
||||
.img-responsive {
|
||||
--#{$prefix}img-responsive-ratio: #{math.percentage(0.75)};
|
||||
background: no-repeat center/cover;
|
||||
@@ -19,3 +20,4 @@
|
||||
.img-bg {
|
||||
background: no-repeat center/cover;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
/**
|
||||
Legend
|
||||
*/
|
||||
@layer components {
|
||||
.legend {
|
||||
--#{$prefix}legend-size: #{$legend-size};
|
||||
display: inline-block;
|
||||
@@ -10,3 +11,5 @@ Legend
|
||||
border-radius: $legend-border-radius;
|
||||
border: 1px solid var(--#{$prefix}border-color-translucent);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@layer components {
|
||||
.list-group {
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: 0;
|
||||
@@ -120,3 +121,5 @@ Inline list
|
||||
margin-inline-end: $list-inline-padding;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@layer components {
|
||||
.loader {
|
||||
position: relative;
|
||||
display: block;
|
||||
@@ -69,3 +70,5 @@ Dimmer
|
||||
animation: animated-dots 1.2s steps(4, jump-none) infinite;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
$markdown-font-size: var(--#{$prefix}font-size-h3) !default;
|
||||
$markdown-line-height: var(--#{$prefix}line-height-lg) !default;
|
||||
|
||||
@layer components {
|
||||
/**
|
||||
Markdown
|
||||
*/
|
||||
@@ -64,3 +65,5 @@ Markdown
|
||||
max-height: 20rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@layer components {
|
||||
.modal-content,
|
||||
.modal-header {
|
||||
> .btn-close {
|
||||
@@ -72,3 +73,5 @@
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@layer components {
|
||||
.nav {
|
||||
--#{$prefix}nav-link-hover-bg: #{color-transparent(var(--#{$prefix}nav-link-color), 0.04)};
|
||||
}
|
||||
@@ -108,3 +109,5 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@layer components {
|
||||
.offcanvas {
|
||||
@include media-print {
|
||||
display: none;
|
||||
@@ -21,3 +22,5 @@
|
||||
.offcanvas-narrow {
|
||||
width: 20rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@layer components {
|
||||
.pagination {
|
||||
margin: 0;
|
||||
--#{$prefix}pagination-gap: 0.25rem;
|
||||
@@ -73,3 +74,5 @@
|
||||
.pagination-circle {
|
||||
--#{$prefix}pagination-border-radius: var(--tblr-border-radius-pill);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
@use 'sass:map';
|
||||
@use '../config';
|
||||
|
||||
@layer components {
|
||||
.payment {
|
||||
height: config.$avatar-size;
|
||||
aspect-ratio: 1.66666;
|
||||
@@ -27,3 +28,4 @@
|
||||
height: map.get($size, size);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@layer components {
|
||||
.placeholder {
|
||||
&:not(.btn):not([class*='bg-']) {
|
||||
background-color: currentColor !important;
|
||||
@@ -7,3 +8,5 @@
|
||||
border-radius: var(--#{$prefix}border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1,5 +1,8 @@
|
||||
@layer components {
|
||||
.popover {
|
||||
@include media-print {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@layer components {
|
||||
@keyframes progress-indeterminate {
|
||||
0% {
|
||||
inset-inline-end: 100%;
|
||||
@@ -38,6 +39,8 @@ Progress
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.progress-sm {
|
||||
height: 0.25rem;
|
||||
}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
// stylelint-disable declaration-no-important
|
||||
|
||||
@layer components {
|
||||
.ribbon {
|
||||
--#{$prefix}ribbon-margin: #{$card-ribbon-margin};
|
||||
--#{$prefix}ribbon-border-radius: #{$card-ribbon-border-radius};
|
||||
@@ -154,3 +155,5 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@layer components {
|
||||
.nav-segmented {
|
||||
--#{$prefix}nav-bg: var(--#{$prefix}bg-surface-tertiary);
|
||||
--#{$prefix}nav-padding: 2px;
|
||||
@@ -75,6 +76,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.nav-segmented-vertical {
|
||||
flex-direction: column;
|
||||
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@layer components {
|
||||
.signature {
|
||||
--#{$prefix}signature-padding: var(--#{$prefix}spacer-1);
|
||||
--#{$prefix}signature-border-radius: var(--#{$prefix}border-radius);
|
||||
@@ -13,3 +14,5 @@
|
||||
cursor: crosshair;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
@use 'sass:map';
|
||||
@use '../config';
|
||||
|
||||
@layer components {
|
||||
.social {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
@@ -25,3 +26,4 @@
|
||||
height: map.get($size, size);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@layer components {
|
||||
.stars {
|
||||
display: inline-flex;
|
||||
color: $gray-400;
|
||||
@@ -7,3 +8,5 @@
|
||||
margin-inline-start: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
@use 'sass:map';
|
||||
|
||||
@layer components {
|
||||
@keyframes status-pulsate-main {
|
||||
40% {
|
||||
transform: scale(1.25, 1.25);
|
||||
@@ -163,3 +164,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
//
|
||||
// Steps
|
||||
//
|
||||
@layer components {
|
||||
.steps {
|
||||
--#{$prefix}steps-color: #{$steps-color};
|
||||
--#{$prefix}steps-inactive-color: #{$steps-inactive-color};
|
||||
@@ -98,6 +99,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//
|
||||
// Steps counter
|
||||
//
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@layer components {
|
||||
.switch-icon {
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
@@ -62,6 +63,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Scale variant
|
||||
.switch-icon-scale {
|
||||
.switch-icon-a,
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@layer components {
|
||||
.table {
|
||||
font: inherit;
|
||||
|
||||
@@ -42,6 +43,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.table-center {
|
||||
> :not(caption) > * > * {
|
||||
text-align: center;
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@layer components {
|
||||
.tag {
|
||||
--#{$prefix}tag-height: 1.5rem;
|
||||
border: $border-width solid var(--#{$prefix}border-color);
|
||||
@@ -35,6 +36,8 @@
|
||||
margin-inline-start: -0.25rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.tag-icon {
|
||||
color: var(--#{$prefix}secondary);
|
||||
margin-inline-end: -0.125rem;
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
//
|
||||
// Timeline
|
||||
//
|
||||
@layer components {
|
||||
.timeline {
|
||||
--#{$prefix}timeline-icon-size: #{$avatar-size};
|
||||
position: relative;
|
||||
@@ -30,6 +31,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.timeline-event-icon {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@layer components {
|
||||
.toast {
|
||||
border: $alert-border-width var(--#{$prefix}border-style) $alert-border-color;
|
||||
box-shadow: $alert-shadow;
|
||||
@@ -20,3 +21,5 @@
|
||||
--#{$prefix}toast-color: #{$value};
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@layer components {
|
||||
.toolbar {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
@@ -12,3 +13,5 @@
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@layer components {
|
||||
.tracking {
|
||||
--#{$prefix}tracking-height: #{$tracking-height};
|
||||
--#{$prefix}tracking-gap-width: #{$tracking-gap-width};
|
||||
@@ -27,3 +28,5 @@
|
||||
min-width: 0.25rem;
|
||||
background: var(--#{$prefix}border-color);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@layer components {
|
||||
@import 'typo/hr';
|
||||
|
||||
.lead {
|
||||
@@ -81,6 +82,8 @@ b {
|
||||
font-weight: $headings-font-weight;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
blockquote {
|
||||
padding: 1rem 1rem 1rem;
|
||||
border-inline-start: 2px var(--#{$prefix}border-style) var(--#{$prefix}border-color);
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@layer forms {
|
||||
/*
|
||||
Form check
|
||||
*/
|
||||
@@ -83,3 +84,4 @@ Form switch
|
||||
padding-top: 0.125rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@layer forms {
|
||||
/*
|
||||
Color Input
|
||||
*/
|
||||
@@ -52,3 +53,4 @@ Color Input
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@layer forms {
|
||||
/**
|
||||
Bootstrap color input
|
||||
*/
|
||||
@@ -26,3 +27,4 @@ Form control dark theme fix
|
||||
background-color: var(--#{$prefix}btn-color, #{$form-file-button-hover-bg});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@layer forms {
|
||||
/**
|
||||
Icon input
|
||||
*/
|
||||
@@ -35,3 +36,4 @@ Icon input
|
||||
inset-inline-start: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@layer forms {
|
||||
/**
|
||||
Image check
|
||||
*/
|
||||
@@ -103,3 +104,4 @@ Image check
|
||||
color: var(--#{$prefix}body-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@layer forms {
|
||||
/*
|
||||
Select group
|
||||
*/
|
||||
@@ -152,3 +153,4 @@ Select group
|
||||
border-radius: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@layer forms {
|
||||
%validation-lite {
|
||||
border-color: var(--#{$prefix}border-color) !important;
|
||||
}
|
||||
@@ -11,3 +12,4 @@
|
||||
@extend %validation-lite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@layer components {
|
||||
/**
|
||||
Horizontal rules
|
||||
*/
|
||||
@@ -74,3 +75,4 @@ Hr text
|
||||
.hr-text-spaceless {
|
||||
margin: -0.5rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@layer utilities {
|
||||
.bg-white-overlay {
|
||||
color: $white;
|
||||
background-color: rgba($light, 0.24);
|
||||
@@ -13,3 +14,4 @@
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
@use 'sass:map';
|
||||
|
||||
@layer utilities {
|
||||
// All colors
|
||||
@each $color,
|
||||
$value
|
||||
@@ -108,3 +109,4 @@
|
||||
.bg-surface-backdrop {
|
||||
background-color: color-transparent($modal-backdrop-bg, $modal-backdrop-opacity) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@layer utilities {
|
||||
%hover-animation {
|
||||
transition: transform 0.3s ease;
|
||||
|
||||
@@ -45,3 +46,4 @@
|
||||
transform: rotate(-4deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@layer utilities {
|
||||
// stylelint-disable declaration-no-important
|
||||
|
||||
@for $i from 0 through 20 {
|
||||
@@ -5,3 +6,4 @@
|
||||
opacity: calc(#{$i * 5} / 100) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@layer utilities {
|
||||
/*
|
||||
Scrollable
|
||||
*/
|
||||
@@ -43,3 +44,4 @@ Scrollable
|
||||
.no-scroll {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@layer utilities {
|
||||
// stylelint-disable declaration-no-important
|
||||
|
||||
.hover-shadow-sm:hover {
|
||||
@@ -15,3 +16,4 @@
|
||||
.hover-shadow-none:hover {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@layer utilities {
|
||||
// stylelint-disable declaration-no-important
|
||||
|
||||
@each $size-name, $size in map_merge($spacers, $size-spacers) {
|
||||
@@ -8,3 +9,4 @@
|
||||
height: $size !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@layer utilities {
|
||||
// stylelint-disable declaration-no-important
|
||||
|
||||
/**
|
||||
@@ -12,3 +13,4 @@ Antialiasing
|
||||
-webkit-font-smoothing: auto;
|
||||
-moz-osx-font-smoothing: auto;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user