mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
New text features page (#2152)
This commit is contained in:
Paweł Kuna
GitHub
5
.changeset/itchy-ligers-repair.md
Normal file
5
.changeset/itchy-ligers-repair.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"@tabler/core": minor
|
||||
---
|
||||
|
||||
New text features page
|
||||
3
.github/workflows/bundlewatch.yml
vendored
3
.github/workflows/bundlewatch.yml
vendored
@@ -44,9 +44,6 @@ jobs:
|
||||
- name: Install pnpm dependencies
|
||||
run: pnpm install --no-frozen-lockfile
|
||||
|
||||
- name: Build
|
||||
run: pnpm run build
|
||||
|
||||
- name: Run bundlewatch
|
||||
run: pnpm run bundlewatch
|
||||
env:
|
||||
|
||||
@@ -89,7 +89,7 @@
|
||||
},
|
||||
{
|
||||
"path": "./dist/css/tabler-flags.css",
|
||||
"maxSize": "2 kB"
|
||||
"maxSize": "2.5 kB"
|
||||
},
|
||||
{
|
||||
"path": "./dist/css/tabler-flags.min.css",
|
||||
@@ -97,7 +97,7 @@
|
||||
},
|
||||
{
|
||||
"path": "./dist/css/tabler-payments.css",
|
||||
"maxSize": "2 kB"
|
||||
"maxSize": "2.2 kB"
|
||||
},
|
||||
{
|
||||
"path": "./dist/css/tabler-payments.min.css",
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
@import "bootstrap/scss/functions";
|
||||
|
||||
@import "mixins";
|
||||
@import "variables";
|
||||
@import "variables-dark";
|
||||
@import "utilities";
|
||||
@import "mixins";
|
||||
|
||||
@import "bootstrap-config";
|
||||
@import "bootstrap-override";
|
||||
|
||||
@@ -93,4 +93,13 @@ $utilities: (
|
||||
responsive: true,
|
||||
values: 2 3 4,
|
||||
),
|
||||
"bg-pattern": (
|
||||
property: background,
|
||||
class: bg-pattern,
|
||||
values: (
|
||||
transparent: #{url-svg(
|
||||
'<svg width="16" height="16" viewBox="0 0 16 16"><rect x="0" y="0" width="8" height="8" fill="rgba(130, 130, 130, .1)" /><rect x="8" y="8" width="8" height="8" fill="rgba(130, 130, 130, .1)" /></svg>'
|
||||
)} repeat center/16px 16px,
|
||||
)
|
||||
)
|
||||
) !default;
|
||||
|
||||
@@ -803,6 +803,9 @@ $popover-bg: var(--#{$prefix}bg-surface) !default;
|
||||
$popover-header-bg: transparent !default;
|
||||
$popover-border-color: var(--#{$prefix}border-color) !default;
|
||||
$popover-body-color: inherit !default;
|
||||
$popover-body-padding-x: .5rem !default;
|
||||
$popover-body-padding-y: .5rem !default;
|
||||
$popover-box-shadow: var(--#{$prefix}box-shadow-lg) !default;
|
||||
|
||||
// Footer
|
||||
$footer-padding-y: 2rem !default;
|
||||
|
||||
@@ -42,3 +42,34 @@
|
||||
@return if($n > 1, nth($breakpoint-names, $n - 1), null);
|
||||
}
|
||||
|
||||
/**
|
||||
* Converts a given value to a percentage string.
|
||||
*
|
||||
* @param {Number} $value - The value to be converted to a percentage.
|
||||
* @return {String} - The percentage representation of the value.
|
||||
*/
|
||||
@function to-percentage($value) {
|
||||
@return if(unitless($value), percentage($value), $value);
|
||||
}
|
||||
|
||||
/**
|
||||
* Generates a transparent version of the given color.
|
||||
*
|
||||
* @param {Color} $color - The base color to be made transparent.
|
||||
* @param {Number} $alpha - The level of transparency, ranging from 0 (fully transparent) to 1 (fully opaque). Default is 1.
|
||||
* @return {Color} - The resulting color with the specified transparency.
|
||||
*/
|
||||
@function color-transparent($color, $alpha: 1, $background: transparent) {
|
||||
@if $alpha == 1 {
|
||||
@return $color;
|
||||
} @else {
|
||||
@return color-mix(in srgb, #{$color} #{to-percentage($alpha)}, $background);
|
||||
}
|
||||
}
|
||||
|
||||
@function url-svg($svg) {
|
||||
$svg: str-replace($svg, '#', '%23');
|
||||
$svg: str-replace($svg, '<svg', '<svg xmlns="http://www.w3.org/2000/svg"');
|
||||
|
||||
@return url('data:image/svg+xml;charset=UTF-8,#{$svg}');
|
||||
}
|
||||
@@ -72,7 +72,7 @@ b {
|
||||
}
|
||||
|
||||
blockquote {
|
||||
padding-left: 1rem;
|
||||
padding: 1rem 1rem 1rem;
|
||||
border-left: 2px var(--#{$prefix}border-style) var(--#{$prefix}border-color);
|
||||
|
||||
p {
|
||||
@@ -89,7 +89,8 @@ blockquote {
|
||||
}
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
ul,
|
||||
ol {
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
@@ -123,6 +124,12 @@ code {
|
||||
border-radius: var(--#{$prefix}border-radius);
|
||||
}
|
||||
|
||||
abbr {
|
||||
text-decoration: underline dotted;
|
||||
cursor: help;
|
||||
text-decoration-skip-ink: none;
|
||||
}
|
||||
|
||||
kbd,
|
||||
.kbd {
|
||||
border: $kbd-border;
|
||||
@@ -145,18 +152,23 @@ img {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
Selection
|
||||
*/
|
||||
::selection {
|
||||
background-color: rgba(var(--#{$prefix}primary-rgb), .16);
|
||||
::selection,
|
||||
.text-selected {
|
||||
background-color: color-transparent(var(--#{$prefix}primary), .1);
|
||||
}
|
||||
|
||||
.text-selected {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/**
|
||||
Links
|
||||
*/
|
||||
[class^="link-"], [class*=" link-"] {
|
||||
[class^="link-"],
|
||||
[class*=" link-"] {
|
||||
&.disabled {
|
||||
color: $nav-link-disabled-color !important;
|
||||
pointer-events: none;
|
||||
@@ -173,3 +185,68 @@ Subheader
|
||||
.subheader {
|
||||
@include subheader;
|
||||
}
|
||||
|
||||
/**
|
||||
Mentions
|
||||
*/
|
||||
.mention {
|
||||
display: inline-block;
|
||||
box-shadow: var(--tblr-box-shadow-border);
|
||||
border-radius: var(--#{$prefix}border-radius-pill);
|
||||
line-height: calc(16em / 12);
|
||||
font-size: calc(12em / 14);
|
||||
color: var(--#{$prefix}body-color);
|
||||
background: var(--#{$prefix}bg-surface-tertiary);
|
||||
padding: calc(2em / 12) calc(8em / 12);
|
||||
font-weight: var(--#{$prefix}font-weight-medium);
|
||||
|
||||
@at-root a#{&} {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover,
|
||||
&.hover {
|
||||
background: var(--#{$prefix}bg-surface-secondary);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mention-avatar,
|
||||
.mention-app,
|
||||
.mention-color {
|
||||
width: calc(14em / 12);
|
||||
height: calc(14em / 12);
|
||||
border-radius: var(--#{$prefix}border-radius-pill);
|
||||
margin: calc(-2em / 12) calc(4em / 12) 0 calc(-4em / 12);
|
||||
display: inline-flex;
|
||||
background: no-repeat center center/cover;
|
||||
box-shadow: var(--#{$prefix}box-shadow-border);
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mention-app {
|
||||
box-shadow: none;
|
||||
background: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.mention-count {
|
||||
color: var(--#{$prefix}secondary);
|
||||
margin-left: calc(8em / 12);
|
||||
}
|
||||
|
||||
$text-variants: (
|
||||
incorrect: var(--#{$prefix}red),
|
||||
correct: var(--#{$prefix}green),
|
||||
);
|
||||
|
||||
@each $variant, $color in $text-variants {
|
||||
.text-#{$variant} {
|
||||
background: color-transparent($color, .04);
|
||||
background: color-transparent($color, 4%);
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: 1px;
|
||||
text-decoration-color: $color;
|
||||
}
|
||||
}
|
||||
72
preview/pages/text-features.html
Normal file
72
preview/pages/text-features.html
Normal file
@@ -0,0 +1,72 @@
|
||||
---
|
||||
title: Text features
|
||||
layout: default
|
||||
permalink: text-features.html
|
||||
page-header: Text features
|
||||
---
|
||||
|
||||
<div class="row">
|
||||
<div class="col-7">
|
||||
<div class="card card-lg">
|
||||
<div class="card-body">
|
||||
<div class="markdown">
|
||||
<h3>Text features</h3>
|
||||
|
||||
<p>HTML provides various tags to format text and add meaning. For example, <strong>important words</strong> can be highlighted, and <em>emphasized text</em> can be italicized.</p>
|
||||
|
||||
<p>If you want to visit an interesting website, check out <a href="{{ site.homepage }}" target="_blank">this page</a>.</p>
|
||||
|
||||
<p>The term <abbr data-bs-toggle="tooltip" data-bs-placement="top" title="Hypertext Markup Language">HTML</abbr> is widely used in web development.</p>
|
||||
|
||||
<p>Previously, the instruction said <del>"Do not include images."</del> However, <ins>"You may now add images."</ins></p>
|
||||
|
||||
<blockquote cite="{{ site.homepage }}">"The best way to predict the future is to create it." – Peter Drucker</blockquote>
|
||||
|
||||
<p>Sometimes, <mark>highlighting important text</mark> can improve readability.</p>
|
||||
|
||||
<p>In JavaScript, you can log messages using the following code: <code>console.log('Hello, world!');</code></p>
|
||||
|
||||
<p>To copy text on Windows, use <kbd>Ctrl + C</kbd>. On macOS, use <kbd>Cmd + C</kbd>.</p>
|
||||
|
||||
<p>Water is written chemically as H<sub>2</sub>O, while Einstein’s famous equation is E = mc<sup>2</sup>.</p>
|
||||
|
||||
<p>Many people mistakenly spell <span class="text-incorrect">"recieve"</span> instead of <span class="text-correct">"receive"</span>.</p>
|
||||
|
||||
<p>The correct way to write the date format is <span class="text-correct">"February 12, 2025"</span>, not <span class="text-incorrect">"12th February, 2025"</span> in American English.</p>
|
||||
|
||||
<p>
|
||||
If you need select text, you can use your mouse or keyboard. To select text using your mouse, click and drag the cursor over the text <span class="text-selected">you want to highlight</span>.
|
||||
</p>
|
||||
|
||||
<p><small>Disclaimer: This text is for demonstration purposes only.</small></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card card-lg">
|
||||
<div class="card-body">
|
||||
<div class="markdown">
|
||||
{% for i in (1..6) %}
|
||||
<h{{ i }}>Heading {{ i }} by <a class="mention"><span class="mention-avatar" style="background-image: url(/static/avatars/035f.jpg)"></span><span class="visually-hidden">@</span>JohnDoe</a></h{{ i }}>
|
||||
{% endfor %}
|
||||
|
||||
<p>
|
||||
Tabler is a modern UI framework which <span class="text-incorrect" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">provide</span> developers with a lot of <span class="text-incorrect">pre-build</span> components and customizable options. It is
|
||||
<span class="text-incorrect">build</span> on Bootstrap, making it easy to integrate into existing projects. The design is clean, responsive, and accessible, ensuring that <span class="text-incorrect">user</span> can navigate
|
||||
through <span class="text-incorrect">interface</span> easily. Tabler also <span class="text-incorrect">support</span> all modern browsers, but some features may not work properly on Internet Explorer. With
|
||||
<span class="text-incorrect">it's</span> lightweight structure and optimized performance, Tabler helps developers create stunning web applications faster.
|
||||
</p>
|
||||
|
||||
<p>Hey <a class="mention"><span class="mention-avatar" style="background-image: url(/static/avatars/035f.jpg)"></span><span class="visually-hidden">@</span>JohnDoe</a>, have you seen the latest updates on <a class="mention">#WebDevelopment<span class="mention-count">16</span></a>? <a class="mention"><span class="mention-avatar" style="background-image: url(/static/avatars/035f.jpg)"></span><span class="visually-hidden">@</span>JaneSmith</a> just shared an interesting article about <a class="mention"><span class="mention-app" style="background-image: url(/static/brands/messenger.svg)"></span>Messenger</a> and <a class="mention"><span class="mention-app" style="background-image: url(/static/brands/netflix.svg)"></span>Netflix</a>!</p>
|
||||
|
||||
<p>
|
||||
The sky is <span class="mention"><span class="mention-color bg-blue"></span>#066fd1</span>, the grass is <span class="mention"><span class="mention-color bg-green"></span>rgb(47, 179, 68)</span>, fire trucks are often <span class="mention"><span class="mention-color bg-red"></span>red</span>, oranges are <span class="mention"><span class="mention-color bg-orange"></span>hsl(24deg, 94.49%, 49.8%)</span>. Some flowers are <span class="mention"><span class="mention-color bg-purple"></span>hwb(288.35deg, 24.31%, 21.18%)</span>.
|
||||
</p>
|
||||
|
||||
<hr />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -24,7 +24,7 @@
|
||||
},
|
||||
"bundlewatch": {
|
||||
"dependsOn": [
|
||||
"^build"
|
||||
"build"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user