7 |
8 |
9 | Rotation
10 |
11 |
12 |
13 | Rotation FAST
14 |
15 |
16 |
17 |
18 | Rotation BOUNCE
19 |
20 |
21 |
22 | Scale
23 |
24 |
25 |
26 | Rainbow
27 |
28 |
29 |
30 | One Iteration
31 |
32 |
33 |
34 | Two Iteration
35 |
36 |
37 |
38 | 1.5 Iteration
39 |
40 |
41 |
42 | On Hover
43 |
44 |
45 |
46 | Delay 2s
47 |
48 |
49 |
50 | animation-direction
51 | alternate
52 |
53 |
54 |
55 | animation-direction
56 | alternate-reverse
57 |
58 |
59 |
60 | animation-direction
61 | reverse
62 |
63 |
64 |
{
66 | var paused = Pauser.Style.AnimationPlayState == "paused";
67 | Pauser.Style.AnimationPlayState = paused ? "running" : "paused";
68 | })>
69 | animation-play-state
70 | click me
71 |
72 |
73 |
74 | animation-fill-mode
75 | both
76 |
77 |
78 |
9 | This row has nothing special
10 |
11 |
12 |
13 | This row has overflow: hidden and white-space: nowrap
14 |
15 |
16 |
17 | Nowrap and overflow set to `ellipsis`
18 |
19 |
20 |
21 | Nowrap and overflow set to `clip`
22 |
23 |
24 |
25 | This is a tall one 🥳, it should have
26 | an ellipsis at the end of the second line but not the first
27 |
28 |
29 |
30 | This one has two lines but the 2nd is out of sight
31 | an ellipsis at the end of the first line but definitely not on the second line
32 |
33 |
34 |
35 | This is a long one with letter-spacing applied to it
36 |
37 |
38 |
39 | This one has no text-overflow, just a nowrap
40 |
41 |
42 |
43 | This one has no text-overflow, just a nowrap and overflow: hidden
44 |
45 |
46 |
47 | This box has break-all with ellipsis overflow
48 |
49 | Lorem ipsum dolor sit amet, consectetur a😀dipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Diam maecenas ultricies mi eget mauris p😢haretra et. Turpis nunc eget lorem dolor sed viverra ipsum. Nullam ac to👻rtor vitae purus faucibus ornare. Fusce id velit ut tortor. Sed faucibus turpis in eu mi bibendum. Convallis tellus id interdum velit laoreet id donec ultrices. Id leo in vitae turpis. Sed libero enim sed faucibus turpis in. Etiam sit amet nisl purus in mollis nunc sed. Nisi lacus sed viverra tellus in hac habitasse. Sed elementum tempus egestas sed. Viverra adipiscing at in tellus integer feugiat.
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
--------------------------------------------------------------------------------
/Code/Tests/Styles/TextOverflow.razor.scss:
--------------------------------------------------------------------------------
1 | TextOverflow {
2 | flex-direction: column;
3 |
4 | .row {
5 | padding: 10px;
6 | margin-bottom: 5px;
7 | background-color: #3472e6;
8 | font-size: 18px;
9 | color: #FFF;
10 | transition: width 1s linear, height .5s linear;
11 | text-shadow: 1px 1px 1px black;
12 | }
13 |
14 | .row:hover {
15 | background-color: #2b2b2b;
16 | width: 500px;
17 | }
18 |
19 | .short {
20 | width: 200px;
21 | }
22 |
23 | .long {
24 | width: 350px;
25 | }
26 |
27 | .big-box {
28 | width: 500px;
29 | height: 138px;
30 |
31 | &:hover {
32 | height: 215px;
33 | }
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/Code/Tests/Styles/TextShadow.cs:
--------------------------------------------------------------------------------
1 | using System;
2 | using System.ComponentModel;
3 |
4 | namespace Sandbox.UI.Tests.Styles;
5 |
6 | public class TextShadowProperties
7 | {
8 | [Range( 10, 200 ), Category( "Text" )]
9 | public int TextSize { get; set; } = 50;
10 |
11 | [Category( "Text" )]
12 | public string TextValue { get; set; } = "🌈 TEXT with a Shadow! 😃";
13 |
14 | [Category( "Shadow" )]
15 | public bool Additive { get; set; } = false;
16 |
17 | [Category( "Text" )]
18 | public Color TextColor { get; set; } = Color.White;
19 |
20 | [Category( "Shadow" )]
21 | public Color BackgroundColor { get; set; } = Color.Parse( "#f44336" ) ?? default;
22 |
23 | [Category( "Shadow" )]
24 | [Range( 0, 100 )]
25 | public int BlurSize { get; set; } = 20;
26 |
27 | [Category( "Shadow" )]
28 | [Range( -100, 100 )]
29 | public int OffsetX { get; set; } = 0;
30 |
31 | [Category( "Shadow" )]
32 | [Range( -100, 100 )]
33 | public int OffsetY { get; set; } = 0;
34 |
35 | [Category( "Shadow" )]
36 | public Color ShadowColor { get; set; } = Color.Black;
37 |
38 |
39 | [Category( "Outline" )]
40 | public Color OutlineColor { get; set; } = Color.Black;
41 |
42 | [Category( "Outline" )]
43 | [Range( 0, 100 )]
44 | public float OutlineWidth { get; set; } = 0.0f;
45 | }
46 |
47 | [StyleSheet]
48 | public class TextShadow : Panel
49 | {
50 | public TextShadowProperties TextShadowProperties { get; set; } = new();
51 |
52 | public Label Label { get; set; }
53 |
54 | public TextShadow()
55 | {
56 | AddClass( "root has-form" );
57 |
58 | Label = AddChild