wires/hypnagaga
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

few more text utilities

Browse source
This commit is contained in:
Jon McClure 2023-07-08 19:35:06 +01:00
parent fc1e408b64
commit f949fefb07
5 changed files with 126 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
src/docs/styles/typography/utilities.stories.mdx
View file

@ -60,6 +60,21 @@ You can make any utility class `!important` by adding a `!` to the front of the
copyable={[true, false]}
/>
### Letter spacing
<CopyTable
header={['Class', 'Properties']}
body={[
['tracking-tighter', 'letter-spacing: -0.05em;'],
['tracking-tight', 'letter-spacing: -0.025em;'],
['tracking-normal', 'letter-spacing: 0em;'],
['tracking-wide', 'letter-spacing: 0.025em;'],
['tracking-wider', 'letter-spacing: 0.05em;'],
['tracking-widest', 'letter-spacing: 0.1em;'],
]}
copyable={[true, false]}
/>
### Text align
<CopyTable
@ -83,6 +98,23 @@ You can make any utility class `!important` by adding a `!` to the front of the
copyable={[true, false]}
/>
### Vertical align
<CopyTable
header={['Class', 'Properties']}
body={[
['align-baseline', 'vertical-align: baseline;'],
['align-top', 'vertical-align: top;'],
['align-middle', 'vertical-align: middle;'],
['align-bottom', 'vertical-align: bottom;'],
['align-text-top', 'vertical-align: text-top;'],
['align-text-bottom', 'vertical-align: text-bottom;'],
['align-sub', 'vertical-align: sub;'],
['align-super', 'vertical-align: super;'],
]}
copyable={[true, false]}
/>
### White space
<CopyTable

8
src/scss/reset/_rules.scss
View file

@ -14,3 +14,11 @@ body {
line-height: 1.5;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
p {
display: block;
margin-block-start: 0px;
margin-block-end: 0px;
margin-inline-start: 0px;
margin-inline-end: 0px;
}

36
src/scss/text/_letter-spacing.scss Normal file
View file

@ -0,0 +1,36 @@
.tracking-tighter {
letter-spacing: -0.05em;
}
.tracking-tight {
letter-spacing: -0.025em;
}
.tracking-normal {
letter-spacing: 0em;
}
.tracking-wide {
letter-spacing: 0.025em;
}
.tracking-wider {
letter-spacing: 0.05em;
}
.tracking-widest {
letter-spacing: 0.1em;
}
.\!tracking-tighter {
letter-spacing: -0.05em !important;
}
.\!tracking-tight {
letter-spacing: -0.025em !important;
}
.\!tracking-normal {
letter-spacing: 0em !important;
}
.\!tracking-wide {
letter-spacing: 0.025em !important;
}
.\!tracking-wider {
letter-spacing: 0.05em !important;
}
.\!tracking-widest {
letter-spacing: 0.1em !important;
}

2
src/scss/text/_rules.scss
View file

@ -1,7 +1,9 @@
@import 'font-style';
@import 'font-weight';
@import 'letter-spacing';
@import 'text-align';
@import 'text-decoration';
@import 'text-transform';
@import 'vertical-align';
@import 'white-space';
@import 'word-break';

48
src/scss/text/_vertical-align.scss Normal file
View file

@ -0,0 +1,48 @@
.align-baseline {
vertical-align: baseline;
}
.align-top {
vertical-align: top;
}
.align-middle {
vertical-align: middle;
}
.align-bottom {
vertical-align: bottom;
}
.align-text-top {
vertical-align: text-top;
}
.align-text-bottom {
vertical-align: text-bottom;
}
.align-sub {
vertical-align: sub;
}
.align-super {
vertical-align: super;
}
.\!align-baseline {
vertical-align: baseline !important;
}
.\!align-top {
vertical-align: top !important;
}
.\!align-middle {
vertical-align: middle !important;
}
.\!align-bottom {
vertical-align: bottom !important;
}
.\!align-text-top {
vertical-align: text-top !important;
}
.\!align-text-bottom {
vertical-align: text-bottom !important;
}
.\!align-sub {
vertical-align: sub !important;
}
.\!align-super {
vertical-align: super !important;
}