twntyx-css 1.0.2 → 1.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/llm/components/ai-orb.json +0 -1
- package/llm/components/ai-perl.json +5 -13
- package/llm/components/all-components.json +13 -5
- package/llm/components/{banner-marketplace.json → banner-funding.json} +8 -8
- package/llm/components/breadcrumb.json +0 -1
- package/llm/components/button-container.json +1 -0
- package/llm/components/chat-ai.json +100 -6
- package/llm/components/chat-footer.json +24 -3
- package/llm/components/checkmark.json +0 -1
- package/llm/components/command-palette.json +0 -1
- package/llm/components/countdown.json +1 -1
- package/llm/components/divider.json +1 -1
- package/llm/components/kbd.json +1 -1
- package/llm/components/key-value.json +2 -10
- package/llm/components/{skeleton.json → loader-skeleton.json} +7 -5
- package/llm/components/{loader.json → loader-symbol.json} +8 -10
- package/llm/components/{empty-state.json → loader-text.json} +22 -20
- package/llm/components/progress-bullet.json +0 -1
- package/llm/components/state.json +2 -1
- package/llm/components/stepper.json +1 -1
- package/llm/components/steps.json +6 -95
- package/llm/components/surface.json +2 -0
- package/llm/components/tabs.json +1 -0
- package/llm/components/{input-group.json → template-navbar.json} +28 -43
- package/llm/components/text-input.json +8 -169
- package/llm/components/toast.json +0 -2
- package/llm/components/tooltip.json +1 -1
- package/llm/examples/ai-perl.html +1 -1
- package/llm/examples/banner-funding.html +1 -0
- package/llm/examples/chat-ai.html +1 -1
- package/llm/examples/chat-footer.html +1 -1
- package/llm/examples/key-value.html +1 -1
- package/llm/examples/loader-skeleton.html +1 -0
- package/llm/examples/loader-symbol.html +1 -0
- package/llm/examples/loader-text.html +1 -0
- package/llm/examples/steps.html +1 -1
- package/llm/examples/template-navbar.html +1 -0
- package/llm/index.json +73 -88
- package/llm/patterns.json +2 -2
- package/llm/tokens.json +657 -367
- package/package.json +1 -1
- package/styles/ai.css +3 -7
- package/styles/animation.css +228 -94
- package/styles/button.css +50 -39
- package/styles/card.css +3 -3
- package/styles/colors.css +525 -283
- package/styles/datepicker.css +8 -15
- package/styles/divider.css +1 -1
- package/styles/form.css +6 -8
- package/styles/globals.css +62 -64
- package/styles/key-value.css +4 -3
- package/styles/loader.css +25 -31
- package/styles/logotype.css +6 -6
- package/styles/scrollbar.css +2 -2
- package/styles/shared.css +17 -17
- package/styles/skeleton.css +2 -1
- package/styles/state.css +109 -97
- package/styles/steps.css +2 -2
- package/styles/surface.css +74 -90
- package/styles/table.css +3 -3
- package/styles/toast.css +3 -5
- package/llm/components/navbar.json +0 -158
- package/llm/examples/banner-marketplace.html +0 -1
- package/llm/examples/empty-state.html +0 -1
- package/llm/examples/input-group.html +0 -1
- package/llm/examples/loader.html +0 -1
- package/llm/examples/navbar.html +0 -1
- package/llm/examples/skeleton.html +0 -1
- package/styles/empty-state.css +0 -48
- package/styles/navbar.css +0 -48
package/styles/shared.css
CHANGED
|
@@ -60,56 +60,56 @@ body {
|
|
|
60
60
|
|
|
61
61
|
@utility mask-carat {
|
|
62
62
|
@apply mask;
|
|
63
|
-
mask-image: url(
|
|
63
|
+
mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224px%22%20fill%3D%22current%22%3E%3Cpath%20d%3D%22M480-372.92q-7.23%200-13.46-2.31t-11.85-7.92L274.92-562.92q-8.3-8.31-8.5-20.89-.19-12.57%208.5-21.27%208.7-8.69%2021.08-8.69%2012.38%200%2021.08%208.69L480-442.15l162.92-162.93q8.31-8.3%2020.89-8.5%2012.57-.19%2021.27%208.5%208.69%208.7%208.69%2021.08%200%2012.38-8.69%2021.08L505.31-383.15q-5.62%205.61-11.85%207.92-6.23%202.31-13.46%202.31Z%22%2F%3E%3C%2Fsvg%3E');
|
|
64
64
|
}
|
|
65
65
|
|
|
66
66
|
@utility mask-close {
|
|
67
67
|
@apply mask;
|
|
68
|
-
mask-image: url(
|
|
68
|
+
mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%20-960%20960%20960%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M480-437.85%20277.08-234.92q-8.31%208.3-20.89%208.5-12.57.19-21.27-8.5-8.69-8.7-8.69-21.08%200-12.38%208.69-21.08L437.85-480%20234.92-682.92q-8.3-8.31-8.5-20.89-.19-12.57%208.5-21.27%208.7-8.69%2021.08-8.69%2012.38%200%2021.08%208.69L480-522.15l202.92-202.93q8.31-8.3%2020.89-8.5%2012.57-.19%2021.27%208.5%208.69%208.7%208.69%2021.08%200%2012.38-8.69%2021.08L522.15-480l202.93%20202.92q8.3%208.31%208.5%2020.89.19%2012.57-8.5%2021.27-8.7%208.69-21.08%208.69-12.38%200-21.08-8.69L480-437.85Z%22%2F%3E%3C%2Fsvg%3E');
|
|
69
69
|
}
|
|
70
70
|
|
|
71
71
|
@utility mask-check {
|
|
72
|
-
mask-image: url(
|
|
72
|
+
mask-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cpath%20d%3D%22M9.54976%2015.5155L18.1883%206.87702C18.3369%206.72819%2018.5109%206.65219%2018.7103%206.64902C18.9096%206.64585%2019.0868%206.72185%2019.242%206.87702C19.3972%207.03219%2019.4748%207.21035%2019.4748%207.41152C19.4748%207.61285%2019.3972%207.7911%2019.242%207.94627L10.1825%2017.0213C10.0017%2017.2019%209.79076%2017.2923%209.54976%2017.2923C9.30876%2017.2923%209.09785%2017.2019%208.91701%2017.0213L4.74201%2012.8463C4.59335%2012.6974%204.52001%2012.5208%204.52201%2012.3163C4.52385%2012.1119%204.60235%2011.9322%204.75751%2011.777C4.91268%2011.6219%205.09085%2011.5443%205.29201%2011.5443C5.49335%2011.5443%205.6716%2011.6219%205.82676%2011.777L9.54976%2015.5155Z%22%20stroke%3D%22none%22%20fill%3D%22currentColor%22%2F%3E%0A%3C%2Fsvg%3E');
|
|
73
73
|
}
|
|
74
74
|
|
|
75
75
|
@utility mask-exclamation {
|
|
76
|
-
mask-image: url(
|
|
76
|
+
mask-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cpath%20d%3D%22M11.9997%2014.0386C11.7871%2014.0386%2011.609%2013.9667%2011.4655%2013.8228C11.3218%2013.6792%2011.25%2013.5011%2011.25%2013.2886V6.28857C11.25%206.07607%2011.3219%205.89791%2011.4658%205.75407C11.6096%205.61041%2011.7878%205.53857%2012.0003%205.53857C12.2129%205.53857%2012.391%205.61041%2012.5345%205.75407C12.6782%205.89791%2012.75%206.07607%2012.75%206.28857V13.2886C12.75%2013.5011%2012.6781%2013.6792%2012.5342%2013.8228C12.3904%2013.9667%2012.2122%2014.0386%2011.9997%2014.0386ZM11.9997%2018.4616C11.7871%2018.4616%2011.609%2018.3897%2011.4655%2018.2458C11.3218%2018.102%2011.25%2017.9238%2011.25%2017.7113C11.25%2017.4987%2011.3219%2017.3206%2011.4658%2017.1771C11.6096%2017.0334%2011.7878%2016.9616%2012.0003%2016.9616C12.2129%2016.9616%2012.391%2017.0335%2012.5345%2017.1773C12.6782%2017.3212%2012.75%2017.4993%2012.75%2017.7118C12.75%2017.9245%2012.6781%2018.1026%2012.5342%2018.2461C12.3904%2018.3897%2012.2122%2018.4616%2011.9997%2018.4616Z%22%20stroke%3D%22none%22%20fill%3D%22currentColor%22%2F%3E%0A%3C%2Fsvg%3E');
|
|
77
77
|
}
|
|
78
78
|
|
|
79
79
|
@utility mask-triangle-filled-down {
|
|
80
|
-
mask-image: url(
|
|
80
|
+
mask-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cpath%20d%3D%22M7.5559%208.5L16.4444%208.5C16.7084%208.5%2016.9251%208.59058%2017.0944%208.77175C17.2636%208.95292%2017.3481%209.16433%2017.3481%209.406C17.3481%209.4815%2017.3372%209.56067%2017.3154%209.6435C17.2937%209.72633%2017.2611%209.80542%2017.2174%209.88075L12.7636%2016.8768C12.67%2017.0141%2012.5578%2017.117%2012.4271%2017.1855C12.2963%2017.2542%2012.154%2017.2885%2012.0001%2017.2885C11.8463%2017.2885%2011.704%2017.2542%2011.5731%2017.1855C11.4425%2017.117%2011.3303%2017.0141%2011.2366%2016.8768L6.78289%209.88075C6.73923%209.80525%206.70656%209.72592%206.6849%209.64275C6.66306%209.55975%206.65214%209.4805%206.65214%209.405C6.65214%209.16317%206.73673%208.95192%206.9059%208.77125C7.07523%208.59042%207.2919%208.5%207.5559%208.5Z%22%20stroke%3D%22none%22%20fill%3D%22currentColor%22%2F%3E%0A%3C%2Fsvg%3E');
|
|
81
81
|
}
|
|
82
82
|
|
|
83
83
|
@utility mask-info {
|
|
84
|
-
mask-image: url(
|
|
84
|
+
mask-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cpath%20d%3D%22M12.0003%2016.75C12.2129%2016.75%2012.391%2016.6781%2012.5345%2016.5343C12.6782%2016.3906%2012.75%2016.2125%2012.75%2016V11.75C12.75%2011.5375%2012.6781%2011.3593%2012.5343%2011.2155C12.3904%2011.0718%2012.2122%2011%2011.9997%2011C11.7871%2011%2011.609%2011.0718%2011.4655%2011.2155C11.3218%2011.3593%2011.25%2011.5375%2011.25%2011.75V16C11.25%2016.2125%2011.3219%2016.3906%2011.4658%2016.5343C11.6096%2016.6781%2011.7878%2016.75%2012.0003%2016.75ZM12%209.2885C12.2288%209.2885%2012.4207%209.21108%2012.5755%209.05625C12.7303%208.90142%2012.8078%208.70958%2012.8078%208.48075C12.8078%208.25192%2012.7303%208.06008%2012.5755%207.90525C12.4207%207.75058%2012.2288%207.67325%2012%207.67325C11.7712%207.67325%2011.5793%207.75058%2011.4245%207.90525C11.2697%208.06008%2011.1923%208.25192%2011.1923%208.48075C11.1923%208.70958%2011.2697%208.90142%2011.4245%209.05625C11.5793%209.21108%2011.7712%209.2885%2012%209.2885ZM12.0018%2021.5C10.6878%2021.5%209.45267%2021.2507%208.2965%2020.752C7.14033%2020.2533%206.13467%2019.5766%205.2795%2018.7218C4.42433%2017.8669%203.74725%2016.8617%203.24825%2015.706C2.74942%2014.5503%202.5%2013.3156%202.5%2012.0018C2.5%2010.6878%202.74933%209.45267%203.248%208.2965C3.74667%207.14033%204.42342%206.13467%205.27825%205.2795C6.13308%204.42433%207.13833%203.74725%208.294%203.24825C9.44967%202.74942%2010.6844%202.5%2011.9982%202.5C13.3123%202.5%2014.5473%202.74933%2015.7035%203.248C16.8597%203.74667%2017.8653%204.42342%2018.7205%205.27825C19.5757%206.13308%2020.2528%207.13833%2020.7518%208.294C21.2506%209.44967%2021.5%2010.6844%2021.5%2011.9982C21.5%2013.3123%2021.2507%2014.5473%2020.752%2015.7035C20.2533%2016.8597%2019.5766%2017.8653%2018.7218%2018.7205C17.8669%2019.5757%2016.8617%2020.2528%2015.706%2020.7518C14.5503%2021.2506%2013.3156%2021.5%2012.0018%2021.5ZM12%2020C14.2333%2020%2016.125%2019.225%2017.675%2017.675C19.225%2016.125%2020%2014.2333%2020%2012C20%209.76667%2019.225%207.875%2017.675%206.325C16.125%204.775%2014.2333%204%2012%204C9.76667%204%207.875%204.775%206.325%206.325C4.775%207.875%204%209.76667%204%2012C4%2014.2333%204.775%2016.125%206.325%2017.675C7.875%2019.225%209.76667%2020%2012%2020Z%22%20stroke%3D%22none%22%20fill%3D%22currentColor%22%2F%3E%0A%3C%2Fsvg%3E');
|
|
85
85
|
}
|
|
86
86
|
|
|
87
87
|
@utility mask-check-circle {
|
|
88
|
-
mask-image: url(
|
|
88
|
+
mask-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cpath%20d%3D%22M10.5808%2014.1463L8.25775%2011.823C8.11925%2011.6847%207.94517%2011.6138%207.7355%2011.6105C7.526%2011.6073%207.34875%2011.6782%207.20375%2011.823C7.05892%2011.968%206.9865%2012.1437%206.9865%2012.35C6.9865%2012.5563%207.05892%2012.732%207.20375%2012.877L9.948%2015.6212C10.1288%2015.8019%2010.3398%2015.8923%2010.5808%2015.8923C10.8218%2015.8923%2011.0327%2015.8019%2011.2135%2015.6212L16.777%2010.0578C16.9153%209.91925%2016.9862%209.74517%2016.9895%209.5355C16.9927%209.326%2016.9218%209.14875%2016.777%209.00375C16.632%208.85892%2016.4563%208.7865%2016.25%208.7865C16.0437%208.7865%2015.868%208.85892%2015.723%209.00375L10.5808%2014.1463ZM12.0018%2021.5C10.6878%2021.5%209.45267%2021.2507%208.2965%2020.752C7.14033%2020.2533%206.13467%2019.5766%205.2795%2018.7218C4.42433%2017.8669%203.74725%2016.8617%203.24825%2015.706C2.74942%2014.5503%202.5%2013.3156%202.5%2012.0018C2.5%2010.6878%202.74933%209.45267%203.248%208.2965C3.74667%207.14033%204.42342%206.13467%205.27825%205.2795C6.13308%204.42433%207.13833%203.74725%208.294%203.24825C9.44967%202.74942%2010.6844%202.5%2011.9982%202.5C13.3123%202.5%2014.5473%202.74933%2015.7035%203.248C16.8597%203.74667%2017.8653%204.42342%2018.7205%205.27825C19.5757%206.13308%2020.2528%207.13833%2020.7518%208.294C21.2506%209.44967%2021.5%2010.6844%2021.5%2011.9982C21.5%2013.3123%2021.2507%2014.5473%2020.752%2015.7035C20.2533%2016.8597%2019.5766%2017.8653%2018.7218%2018.7205C17.8669%2019.5757%2016.8617%2020.2528%2015.706%2020.7518C14.5503%2021.2506%2013.3156%2021.5%2012.0018%2021.5ZM12%2020C14.2333%2020%2016.125%2019.225%2017.675%2017.675C19.225%2016.125%2020%2014.2333%2020%2012C20%209.76667%2019.225%207.875%2017.675%206.325C16.125%204.775%2014.2333%204%2012%204C9.76667%204%207.875%204.775%206.325%206.325C4.775%207.875%204%209.76667%204%2012C4%2014.2333%204.775%2016.125%206.325%2017.675C7.875%2019.225%209.76667%2020%2012%2020Z%22%20stroke%3D%22none%22%20fill%3D%22currentColor%22%2F%3E%0A%3C%2Fsvg%3E');
|
|
89
89
|
}
|
|
90
90
|
|
|
91
91
|
@utility mask-report {
|
|
92
|
-
mask-image: url(
|
|
92
|
+
mask-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cpath%20d%3D%22M12%2016.7115C12.2288%2016.7115%2012.4207%2016.6341%2012.5755%2016.4793C12.7303%2016.3244%2012.8078%2016.1326%2012.8078%2015.9038C12.8078%2015.6749%2012.7303%2015.4831%2012.5755%2015.3283C12.4207%2015.1736%2012.2288%2015.0963%2012%2015.0963C11.7712%2015.0963%2011.5793%2015.1736%2011.4245%2015.3283C11.2697%2015.4831%2011.1923%2015.6749%2011.1923%2015.9038C11.1923%2016.1326%2011.2697%2016.3244%2011.4245%2016.4793C11.5793%2016.6341%2011.7712%2016.7115%2012%2016.7115ZM12.0003%2013.2308C12.2129%2013.2308%2012.391%2013.1589%2012.5345%2013.0152C12.6782%2012.8714%2012.75%2012.6933%2012.75%2012.4808V7.94225C12.75%207.72975%2012.6781%207.55167%2012.5343%207.408C12.3904%207.26417%2012.2122%207.19225%2011.9997%207.19225C11.7871%207.19225%2011.609%207.26417%2011.4655%207.408C11.3218%207.55167%2011.25%207.72975%2011.25%207.94225V12.4808C11.25%2012.6933%2011.3219%2012.8714%2011.4658%2013.0152C11.6096%2013.1589%2011.7878%2013.2308%2012.0003%2013.2308ZM9.20975%2020.5C8.96575%2020.5%208.73325%2020.4532%208.51225%2020.3595C8.29125%2020.266%208.09875%2020.1372%207.93475%2019.973L4.027%2016.0652C3.86283%2015.9012%203.734%2015.7088%203.6405%2015.4878C3.54683%2015.2668%203.5%2015.0342%203.5%2014.7902V9.20975C3.5%208.96575%203.54683%208.73325%203.6405%208.51225C3.734%208.29125%203.86283%208.09875%204.027%207.93475L7.93475%204.027C8.09875%203.86283%208.29125%203.734%208.51225%203.6405C8.73325%203.54683%208.96575%203.5%209.20975%203.5H14.7902C15.0342%203.5%2015.2668%203.54683%2015.4878%203.6405C15.7088%203.734%2015.9012%203.86283%2016.0652%204.027L19.973%207.93475C20.1372%208.09875%2020.266%208.29125%2020.3595%208.51225C20.4532%208.73325%2020.5%208.96575%2020.5%209.20975V14.7902C20.5%2015.0342%2020.4532%2015.2668%2020.3595%2015.4878C20.266%2015.7088%2020.1372%2015.9012%2019.973%2016.0652L16.0652%2019.973C15.9012%2020.1372%2015.7088%2020.266%2015.4878%2020.3595C15.2668%2020.4532%2015.0342%2020.5%2014.7902%2020.5H9.20975ZM9.1%2019H14.9L19%2014.9V9.1L14.9%205H9.1L5%209.1V14.9L9.1%2019Z%22%20stroke%3D%22none%22%20fill%3D%22currentColor%22%2F%3E%0A%3C%2Fsvg%3E');
|
|
93
93
|
}
|
|
94
94
|
|
|
95
95
|
@utility mask-warning {
|
|
96
|
-
mask-image: url(
|
|
96
|
+
mask-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cpath%20d%3D%22M3.42558%2020.4998C3.25608%2020.4998%203.10383%2020.4584%202.96883%2020.3756C2.83383%2020.2927%202.72891%2020.1835%202.65408%2020.0478C2.57608%2019.9131%202.53316%2019.7673%202.52533%2019.6103C2.5175%2019.4533%202.55983%2019.2978%202.65233%2019.1438L11.2131%204.35581C11.3057%204.20181%2011.4216%204.08798%2011.5606%204.01431C11.6997%203.94064%2011.8462%203.90381%2012.0001%203.90381C12.1539%203.90381%2012.3004%203.94064%2012.4396%204.01431C12.5786%204.08798%2012.6944%204.20181%2012.7871%204.35581L21.3478%2019.1438C21.4403%2019.2978%2021.4827%2019.4533%2021.4748%2019.6103C21.467%2019.7673%2021.4241%2019.9131%2021.3461%2020.0478C21.2712%2020.1835%2021.1663%2020.2927%2021.0313%2020.3756C20.8963%2020.4584%2020.7441%2020.4998%2020.5746%2020.4998H3.42558ZM4.45008%2018.9998H19.5501L12.0001%205.99981L4.45008%2018.9998ZM12.0001%2017.8076C12.2289%2017.8076%2012.4207%2017.7301%2012.5756%2017.5753C12.7304%2017.4205%2012.8078%2017.2286%2012.8078%2016.9998C12.8078%2016.771%2012.7304%2016.5791%2012.5756%2016.4243C12.4207%2016.2695%2012.2289%2016.1921%2012.0001%2016.1921C11.7712%2016.1921%2011.5794%2016.2695%2011.4246%2016.4243C11.2697%2016.5791%2011.1923%2016.771%2011.1923%2016.9998C11.1923%2017.2286%2011.2697%2017.4205%2011.4246%2017.5753C11.5794%2017.7301%2011.7712%2017.8076%2012.0001%2017.8076ZM12.0003%2015.1921C12.213%2015.1921%2012.3911%2015.1202%2012.5346%2014.9766C12.6782%2014.8327%2012.7501%2014.6546%2012.7501%2014.4421V10.9421C12.7501%2010.7296%2012.6782%2010.5515%2012.5343%2010.4078C12.3905%2010.264%2012.2123%2010.1921%2011.9998%2010.1921C11.7872%2010.1921%2011.6091%2010.264%2011.4656%2010.4078C11.3219%2010.5515%2011.2501%2010.7296%2011.2501%2010.9421V14.4421C11.2501%2014.6546%2011.322%2014.8327%2011.4658%2014.9766C11.6097%2015.1202%2011.7878%2015.1921%2012.0003%2015.1921Z%22%20stroke%3D%22none%22%20fill%3D%22currentColor%22%2F%3E%0A%3C%2Fsvg%3E');
|
|
97
97
|
}
|
|
98
98
|
|
|
99
99
|
@utility mask-info-filled {
|
|
100
|
-
mask-image: url(
|
|
100
|
+
mask-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cpath%20d%3D%22M12.0003%2016.75C12.2129%2016.75%2012.391%2016.6781%2012.5345%2016.5343C12.6782%2016.3906%2012.75%2016.2125%2012.75%2016V11.75C12.75%2011.5375%2012.6781%2011.3593%2012.5343%2011.2155C12.3904%2011.0718%2012.2122%2011%2011.9997%2011C11.7871%2011%2011.609%2011.0718%2011.4655%2011.2155C11.3218%2011.3593%2011.25%2011.5375%2011.25%2011.75V16C11.25%2016.2125%2011.3219%2016.3906%2011.4658%2016.5343C11.6096%2016.6781%2011.7878%2016.75%2012.0003%2016.75ZM12%209.2885C12.2288%209.2885%2012.4207%209.21108%2012.5755%209.05625C12.7303%208.90142%2012.8078%208.70958%2012.8078%208.48075C12.8078%208.25192%2012.7303%208.06008%2012.5755%207.90525C12.4207%207.75058%2012.2288%207.67325%2012%207.67325C11.7712%207.67325%2011.5793%207.75058%2011.4245%207.90525C11.2697%208.06008%2011.1923%208.25192%2011.1923%208.48075C11.1923%208.70958%2011.2697%208.90142%2011.4245%209.05625C11.5793%209.21108%2011.7712%209.2885%2012%209.2885ZM12.0018%2021.5C10.6878%2021.5%209.45267%2021.2507%208.2965%2020.752C7.14033%2020.2533%206.13467%2019.5766%205.2795%2018.7218C4.42433%2017.8669%203.74725%2016.8617%203.24825%2015.706C2.74942%2014.5503%202.5%2013.3156%202.5%2012.0018C2.5%2010.6878%202.74933%209.45267%203.248%208.2965C3.74667%207.14033%204.42342%206.13467%205.27825%205.2795C6.13308%204.42433%207.13833%203.74725%208.294%203.24825C9.44967%202.74942%2010.6844%202.5%2011.9982%202.5C13.3123%202.5%2014.5473%202.74933%2015.7035%203.248C16.8597%203.74667%2017.8653%204.42342%2018.7205%205.27825C19.5757%206.13308%2020.2528%207.13833%2020.7518%208.294C21.2506%209.44967%2021.5%2010.6844%2021.5%2011.9982C21.5%2013.3123%2021.2507%2014.5473%2020.752%2015.7035C20.2533%2016.8597%2019.5766%2017.8653%2018.7218%2018.7205C17.8669%2019.5757%2016.8617%2020.2528%2015.706%2020.7518C14.5503%2021.2506%2013.3156%2021.5%2012.0018%2021.5Z%22%20stroke%3D%22none%22%20fill%3D%22currentColor%22%2F%3E%0A%3C%2Fsvg%3E');
|
|
101
101
|
}
|
|
102
102
|
|
|
103
103
|
@utility mask-check-circle-filled {
|
|
104
|
-
mask-image: url(
|
|
104
|
+
mask-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cpath%20d%3D%22M10.5808%2016.2538L17.3038%209.53075L16.25%208.477L10.5808%2014.1463L7.73075%2011.2963L6.677%2012.35L10.5808%2016.2538ZM12.0018%2021.5C10.6878%2021.5%209.45267%2021.2507%208.2965%2020.752C7.14033%2020.2533%206.13467%2019.5766%205.2795%2018.7218C4.42433%2017.8669%203.74725%2016.8617%203.24825%2015.706C2.74942%2014.5503%202.5%2013.3156%202.5%2012.0018C2.5%2010.6878%202.74933%209.45267%203.248%208.2965C3.74667%207.14033%204.42342%206.13467%205.27825%205.2795C6.13308%204.42433%207.13833%203.74725%208.294%203.24825C9.44967%202.74942%2010.6844%202.5%2011.9982%202.5C13.3123%202.5%2014.5473%202.74933%2015.7035%203.248C16.8597%203.74667%2017.8653%204.42342%2018.7205%205.27825C19.5757%206.13308%2020.2528%207.13833%2020.7518%208.294C21.2506%209.44967%2021.5%2010.6844%2021.5%2011.9982C21.5%2013.3123%2021.2507%2014.5473%2020.752%2015.7035C20.2533%2016.8597%2019.5766%2017.8653%2018.7218%2018.7205C17.8669%2019.5757%2016.8617%2020.2528%2015.706%2020.7518C14.5503%2021.2506%2013.3156%2021.5%2012.0018%2021.5Z%22%20stroke%3D%22none%22%20fill%3D%22currentColor%22%2F%3E%0A%3C%2Fsvg%3E');
|
|
105
105
|
}
|
|
106
106
|
|
|
107
107
|
@utility mask-report-filled {
|
|
108
|
-
mask-image: url(
|
|
108
|
+
mask-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cpath%20d%3D%22M12%2016.7115C12.2288%2016.7115%2012.4207%2016.6341%2012.5755%2016.4793C12.7303%2016.3244%2012.8078%2016.1326%2012.8078%2015.9038C12.8078%2015.6749%2012.7303%2015.4831%2012.5755%2015.3283C12.4207%2015.1736%2012.2288%2015.0963%2012%2015.0963C11.7712%2015.0963%2011.5793%2015.1736%2011.4245%2015.3283C11.2697%2015.4831%2011.1923%2015.6749%2011.1923%2015.9038C11.1923%2016.1326%2011.2697%2016.3244%2011.4245%2016.4793C11.5793%2016.6341%2011.7712%2016.7115%2012%2016.7115ZM12.0003%2013.2308C12.2129%2013.2308%2012.391%2013.1589%2012.5345%2013.0152C12.6782%2012.8714%2012.75%2012.6933%2012.75%2012.4808V7.94225C12.75%207.72975%2012.6781%207.55167%2012.5343%207.408C12.3904%207.26417%2012.2122%207.19225%2011.9997%207.19225C11.7871%207.19225%2011.609%207.26417%2011.4655%207.408C11.3218%207.55167%2011.25%207.72975%2011.25%207.94225V12.4808C11.25%2012.6933%2011.3219%2012.8714%2011.4658%2013.0152C11.6096%2013.1589%2011.7878%2013.2308%2012.0003%2013.2308ZM9.20975%2020.5C8.96575%2020.5%208.73325%2020.4532%208.51225%2020.3595C8.29125%2020.266%208.09875%2020.1372%207.93475%2019.973L4.027%2016.0652C3.86283%2015.9012%203.734%2015.7088%203.6405%2015.4878C3.54683%2015.2668%203.5%2015.0342%203.5%2014.7902V9.20975C3.5%208.96575%203.54683%208.73325%203.6405%208.51225C3.734%208.29125%203.86283%208.09875%204.027%207.93475L7.93475%204.027C8.09875%203.86283%208.29125%203.734%208.51225%203.6405C8.73325%203.54683%208.96575%203.5%209.20975%203.5H14.7902C15.0342%203.5%2015.2668%203.54683%2015.4878%203.6405C15.7088%203.734%2015.9012%203.86283%2016.0652%204.027L19.973%207.93475C20.1372%208.09875%2020.266%208.29125%2020.3595%208.51225C20.4532%208.73325%2020.5%208.96575%2020.5%209.20975V14.7902C20.5%2015.0342%2020.4532%2015.2668%2020.3595%2015.4878C20.266%2015.7088%2020.1372%2015.9012%2019.973%2016.0652L16.0652%2019.973C15.9012%2020.1372%2015.7088%2020.266%2015.4878%2020.3595C15.2668%2020.4532%2015.0342%2020.5%2014.7902%2020.5H9.20975Z%22%20stroke%3D%22none%22%20fill%3D%22currentColor%22%2F%3E%0A%3C%2Fsvg%3E');
|
|
109
109
|
}
|
|
110
110
|
|
|
111
111
|
@utility mask-warning-filled {
|
|
112
|
-
mask-image: url(
|
|
112
|
+
mask-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cpath%20d%3D%22M3.42558%2020.4998C3.25608%2020.4998%203.10383%2020.4584%202.96883%2020.3756C2.83383%2020.2927%202.72891%2020.1835%202.65408%2020.0478C2.57608%2019.9131%202.53316%2019.7673%202.52533%2019.6103C2.5175%2019.4533%202.55983%2019.2978%202.65233%2019.1438L11.2131%204.35581C11.3057%204.20181%2011.4216%204.08798%2011.5606%204.01431C11.6997%203.94064%2011.8462%203.90381%2012.0001%203.90381C12.1539%203.90381%2012.3004%203.94064%2012.4396%204.01431C12.5786%204.08798%2012.6944%204.20181%2012.7871%204.35581L21.3478%2019.1438C21.4403%2019.2978%2021.4827%2019.4533%2021.4748%2019.6103C21.467%2019.7673%2021.4241%2019.9131%2021.3461%2020.0478C21.2712%2020.1835%2021.1663%2020.2927%2021.0313%2020.3756C20.8963%2020.4584%2020.7441%2020.4998%2020.5746%2020.4998H3.42558ZM12.0001%2017.8076C12.2289%2017.8076%2012.4207%2017.7301%2012.5756%2017.5753C12.7304%2017.4205%2012.8078%2017.2286%2012.8078%2016.9998C12.8078%2016.771%2012.7304%2016.5791%2012.5756%2016.4243C12.4207%2016.2695%2012.2289%2016.1921%2012.0001%2016.1921C11.7712%2016.1921%2011.5794%2016.2695%2011.4246%2016.4243C11.2697%2016.5791%2011.1923%2016.771%2011.1923%2016.9998C11.1923%2017.2286%2011.2697%2017.4205%2011.4246%2017.5753C11.5794%2017.7301%2011.7712%2017.8076%2012.0001%2017.8076ZM12.0003%2015.1921C12.213%2015.1921%2012.3911%2015.1202%2012.5346%2014.9766C12.6782%2014.8327%2012.7501%2014.6546%2012.7501%2014.4421V10.9421C12.7501%2010.7296%2012.6782%2010.5515%2012.5343%2010.4078C12.3905%2010.264%2012.2123%2010.1921%2011.9998%2010.1921C11.7872%2010.1921%2011.6091%2010.264%2011.4656%2010.4078C11.3219%2010.5515%2011.2501%2010.7296%2011.2501%2010.9421V14.4421C11.2501%2014.6546%2011.322%2014.8327%2011.4658%2014.9766C11.6097%2015.1202%2011.7878%2015.1921%2012.0003%2015.1921Z%22%20stroke%3D%22none%22%20fill%3D%22currentColor%22%2F%3E%0A%3C%2Fsvg%3E');
|
|
113
113
|
}
|
|
114
114
|
|
|
115
115
|
@utility mask-squircle {
|
|
@@ -135,14 +135,14 @@ body {
|
|
|
135
135
|
|
|
136
136
|
@utility include-hover-primary-active {
|
|
137
137
|
&::before {
|
|
138
|
-
@apply content-[''] opacity-100 scale-y-100 translate-y-0 bg-brand
|
|
138
|
+
@apply content-[''] opacity-100 scale-y-100 translate-y-0 bg-background-brand/15;
|
|
139
139
|
}
|
|
140
140
|
}
|
|
141
141
|
|
|
142
142
|
@utility include-hover-primary-active-filled {
|
|
143
143
|
@apply font-medium text-text-inverted;
|
|
144
144
|
&::before {
|
|
145
|
-
@apply content-[''] opacity-100 scale-y-100 translate-y-0 bg-brand
|
|
145
|
+
@apply content-[''] opacity-100 scale-y-100 translate-y-0 bg-background-brand/15;
|
|
146
146
|
}
|
|
147
147
|
}
|
|
148
148
|
|
|
@@ -158,7 +158,7 @@ body {
|
|
|
158
158
|
@apply relative z-10;
|
|
159
159
|
}
|
|
160
160
|
&::before {
|
|
161
|
-
@apply content-[''] rounded-[inherit] absolute z-0 inset-0 scale-y-0 translate-y-2 transition-[scale,translate,opacity] duration-75 opacity-0 bg-brand
|
|
161
|
+
@apply content-[''] rounded-[inherit] absolute z-0 inset-0 scale-y-0 translate-y-2 transition-[scale,translate,opacity] duration-75 opacity-0 bg-background-brand/15 ease-out-expo;
|
|
162
162
|
}
|
|
163
163
|
&:hover {
|
|
164
164
|
@apply include-hover-primary-hover;
|
|
@@ -191,7 +191,7 @@ body {
|
|
|
191
191
|
> span {
|
|
192
192
|
mask-size: cover;
|
|
193
193
|
mask-repeat: repeat-x;
|
|
194
|
-
mask-image: url(
|
|
194
|
+
mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUwIiBoZWlnaHQ9IjI1MCIgdmlld0JveD0iMCAwIDI1MCAyNTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyNTAiIGhlaWdodD0iMjUwIiBmaWxsPSJ1cmwoI3BhaW50MF9saW5lYXJfMzQyXzMxMjcpIi8+CjxkZWZzPgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MF9saW5lYXJfMzQyXzMxMjciIHgxPSIxMjUiIHkxPSIwIiB4Mj0iMTI1IiB5Mj0iMjUwIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CjxzdG9wIHN0b3Atb3BhY2l0eT0iMCIvPgo8c3RvcCBvZmZzZXQ9IjAuMDkiLz4KPHN0b3Agb2Zmc2V0PSIwLjg4NSIvPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3Atb3BhY2l0eT0iMCIvPgo8L2xpbmVhckdyYWRpZW50Pgo8L2RlZnM+Cjwvc3ZnPgo=');
|
|
195
195
|
}
|
|
196
196
|
&.text-7xl {
|
|
197
197
|
--height: 72px;
|
package/styles/skeleton.css
CHANGED
|
@@ -8,7 +8,8 @@
|
|
|
8
8
|
@apply opacity-0 pointer-events-none;
|
|
9
9
|
}
|
|
10
10
|
&::before {
|
|
11
|
-
--tw-gradient-stops: var(--tw-gradient-from) 40%,
|
|
11
|
+
--tw-gradient-stops: var(--tw-gradient-from) 40%,
|
|
12
|
+
var(--tw-gradient-to) 50% var(--tw-gradient-via-position),
|
|
12
13
|
var(--tw-gradient-from) 60% !important;
|
|
13
14
|
@apply content-['']
|
|
14
15
|
absolute inset-0
|
package/styles/state.css
CHANGED
|
@@ -3,138 +3,150 @@
|
|
|
3
3
|
/*----------------------------*/
|
|
4
4
|
|
|
5
5
|
@property --state-progress {
|
|
6
|
-
syntax:
|
|
6
|
+
syntax: '<percentage>';
|
|
7
7
|
inherits: false;
|
|
8
8
|
initial-value: calc(0 * 1%);
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
@utility state {
|
|
12
|
-
|
|
12
|
+
@apply py-12 mx-auto max-w-md text-center;
|
|
13
13
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
}
|
|
20
|
-
.state-actions {
|
|
21
|
-
@apply justify-start mx-0;
|
|
22
|
-
}
|
|
14
|
+
/* Alignment variants */
|
|
15
|
+
&.state-left {
|
|
16
|
+
@apply text-left;
|
|
17
|
+
.state-icon {
|
|
18
|
+
@apply mx-0;
|
|
23
19
|
}
|
|
24
|
-
|
|
25
|
-
@apply
|
|
26
|
-
.state-icon {
|
|
27
|
-
@apply mx-0;
|
|
28
|
-
}
|
|
29
|
-
.state-actions {
|
|
30
|
-
@apply justify-end mx-0;
|
|
31
|
-
}
|
|
20
|
+
.state-actions {
|
|
21
|
+
@apply justify-start mx-0;
|
|
32
22
|
}
|
|
23
|
+
}
|
|
24
|
+
&.state-right {
|
|
25
|
+
@apply text-right;
|
|
26
|
+
.state-icon {
|
|
27
|
+
@apply mx-0;
|
|
28
|
+
}
|
|
29
|
+
.state-actions {
|
|
30
|
+
@apply justify-end mx-0;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
/* Icon container */
|
|
35
|
+
.state-icon {
|
|
36
|
+
@apply inline-flex relative justify-center items-center mx-0 mb-4 rounded-full size-24;
|
|
37
|
+
@apply bg-background-brand/20 border border-line-brand/40;
|
|
33
38
|
|
|
34
|
-
|
|
39
|
+
&::before {
|
|
40
|
+
@apply content-[''] absolute inset-0 rounded-full mask;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
/* Center alignment */
|
|
44
|
+
.state-center & {
|
|
45
|
+
@apply mx-auto;
|
|
46
|
+
}
|
|
47
|
+
/* Icon image */
|
|
48
|
+
img {
|
|
49
|
+
@apply w-full aspect-square;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
svg {
|
|
53
|
+
@apply w-1/2 h-auto size-fit;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
/* Animated variant */
|
|
57
|
+
&.has-animation {
|
|
35
58
|
.state-icon {
|
|
36
|
-
@apply
|
|
59
|
+
@apply border-none;
|
|
37
60
|
|
|
38
61
|
&::before {
|
|
39
|
-
@apply content-[''] absolute inset-0 rounded-full
|
|
62
|
+
@apply content-[''] absolute z-10 inset-0 rounded-full;
|
|
63
|
+
background: conic-gradient(
|
|
64
|
+
currentColor var(--state-progress),
|
|
65
|
+
transparent 0
|
|
66
|
+
);
|
|
67
|
+
mask: radial-gradient(
|
|
68
|
+
farthest-side,
|
|
69
|
+
transparent calc(100% - 1.5px),
|
|
70
|
+
#fff 0
|
|
71
|
+
);
|
|
72
|
+
animation: circle-progress 1.2s cubic-bezier(0.86, 0, 0.07, 1) forwards;
|
|
40
73
|
}
|
|
41
74
|
|
|
42
|
-
/* Center alignment */
|
|
43
|
-
.state-center & {
|
|
44
|
-
@apply mx-auto;
|
|
45
|
-
}
|
|
46
|
-
/* Icon image */
|
|
47
75
|
img {
|
|
48
|
-
@apply
|
|
76
|
+
@apply animate-fire-in;
|
|
77
|
+
animation-delay: 850ms;
|
|
49
78
|
}
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
.state-icon {
|
|
54
|
-
@apply border-none;
|
|
55
|
-
|
|
56
|
-
&::before {
|
|
57
|
-
@apply content-[''] absolute z-10 inset-0 rounded-full;
|
|
58
|
-
background: conic-gradient(currentColor var(--state-progress), transparent 0);
|
|
59
|
-
mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #fff 0);
|
|
60
|
-
animation: circle-progress 1.2s cubic-bezier(0.86, 0, 0.07, 1) forwards;
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
img {
|
|
64
|
-
@apply animate-fire-in;
|
|
65
|
-
animation-delay: 850ms;
|
|
66
|
-
}
|
|
67
|
-
&::after {
|
|
68
|
-
@apply content-[''] absolute z-0 inset-0 rounded-full border border-line-default animate-ripple-out;
|
|
69
|
-
animation-delay: 1350ms;
|
|
70
|
-
}
|
|
79
|
+
&::after {
|
|
80
|
+
@apply content-[''] absolute z-0 inset-0 rounded-full border border-line-default animate-ripple-out;
|
|
81
|
+
animation-delay: 1350ms;
|
|
71
82
|
}
|
|
83
|
+
}
|
|
72
84
|
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
}
|
|
85
|
+
> *:not(.state-icon) {
|
|
86
|
+
@apply animate-success-in-top;
|
|
87
|
+
&:nth-child(1) {
|
|
88
|
+
animation-delay: 200ms;
|
|
89
|
+
}
|
|
90
|
+
&:nth-child(2) {
|
|
91
|
+
animation-delay: 600ms;
|
|
92
|
+
}
|
|
93
|
+
&:nth-child(3) {
|
|
94
|
+
animation-delay: 800ms;
|
|
95
|
+
}
|
|
96
|
+
&:nth-child(4) {
|
|
97
|
+
animation-delay: 1000ms;
|
|
87
98
|
}
|
|
88
99
|
}
|
|
100
|
+
}
|
|
89
101
|
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
}
|
|
102
|
+
/* Variants */
|
|
103
|
+
&.state-success {
|
|
104
|
+
.state-icon {
|
|
105
|
+
@apply surface-success;
|
|
106
|
+
&::before {
|
|
107
|
+
@apply text-line-success;
|
|
97
108
|
}
|
|
98
109
|
}
|
|
110
|
+
}
|
|
99
111
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
}
|
|
112
|
+
&.state-error {
|
|
113
|
+
.state-icon {
|
|
114
|
+
@apply surface-error;
|
|
115
|
+
&::before {
|
|
116
|
+
@apply text-line-error;
|
|
106
117
|
}
|
|
107
118
|
}
|
|
119
|
+
}
|
|
108
120
|
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
}
|
|
121
|
+
&.state-info {
|
|
122
|
+
.state-icon {
|
|
123
|
+
@apply surface-info;
|
|
124
|
+
&::before {
|
|
125
|
+
@apply text-brand-default;
|
|
115
126
|
}
|
|
116
127
|
}
|
|
128
|
+
}
|
|
117
129
|
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
}
|
|
130
|
+
&.state-warning {
|
|
131
|
+
.state-icon {
|
|
132
|
+
@apply surface-warning;
|
|
133
|
+
&::before {
|
|
134
|
+
@apply text-line-warning;
|
|
124
135
|
}
|
|
125
136
|
}
|
|
137
|
+
}
|
|
126
138
|
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
139
|
+
/* Title */
|
|
140
|
+
.state-title {
|
|
141
|
+
@apply mb-2 h3 text-balance font-heading font-bold;
|
|
142
|
+
}
|
|
131
143
|
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
144
|
+
/* Description */
|
|
145
|
+
.state-description {
|
|
146
|
+
@apply mb-4 p2 text-balance;
|
|
147
|
+
}
|
|
136
148
|
|
|
137
|
-
|
|
149
|
+
/* Actions */
|
|
138
150
|
.state-actions {
|
|
139
151
|
@apply flex flex-col gap-2 justify-center mx-auto mt-4 md:flex-row;
|
|
140
152
|
}
|
package/styles/steps.css
CHANGED
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
grid-auto-columns: 1fr;
|
|
11
11
|
|
|
12
12
|
li {
|
|
13
|
-
@apply grid grid-cols-1 grid-rows-2 place-items-center text-center gap-2 min-w-
|
|
13
|
+
@apply grid grid-cols-1 grid-rows-2 place-items-center text-center gap-2 min-w-16 relative text-text-default text-sm;
|
|
14
14
|
|
|
15
15
|
&,
|
|
16
16
|
&::before,
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
~ li {
|
|
45
45
|
@apply text-text-tertiary;
|
|
46
46
|
&::before {
|
|
47
|
-
@apply bg-line-default from-line-default to-line-default shadow-none border-line-default text-text-tertiary;
|
|
47
|
+
@apply bg-line-default from-line-default to-line-default shadow-none border-line-default text-text-tertiary text-shadow-white/50;
|
|
48
48
|
}
|
|
49
49
|
&::after {
|
|
50
50
|
@apply bg-line-default;
|