Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitcfa118a

Browse files
committed
feat(libs/ui): c-btn--pop button variant
1 parent4ee2a3a commitcfa118a

File tree

7 files changed

+46
-48
lines changed

7 files changed

+46
-48
lines changed

‎.changeset/good-fireants-warn.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@sveltevietnam/ui':minor
3+
---
4+
5+
add`c-btn-pop` variant, inpsired by viam.com

‎libs/ui/src/css/core/components/c-btn.css‎

Lines changed: 34 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* FIXME `:has` is enough, but Firefox has not yet added support for `:has`. When they do, please remove `.c-btn--with-icon` site-wide */
22
@custom-selector:--with-icon:has(:is(img, svg)), .c-btn--with-icon;
3-
@custom-selector:--default:not(.c-btn--outlined, .c-btn--text), .c-btn--default;
4-
@custom-selector:--text .c-btn--text;
3+
@custom-selector:--default:not(.c-btn--outlined, .c-btn--pop), .c-btn--default;
4+
@custom-selector:--pop .c-btn--pop;
55
@custom-selector:--outlined .c-btn--outlined;
66
@custom-selector:--loading [data-loading]:not([data-loading='false']);
77
@custom-selector:--disabled [disabled]:not([disabled='false']);
@@ -12,10 +12,13 @@
1212
align-items: center;
1313
justify-content: center;
1414

15-
min-height:40px;
16-
padding:8px16px;
15+
min-height:theme('spacing.10');
16+
padding:theme('spacing.2')theme('spacing.4');
1717

18-
border-radius:4px;
18+
&:disabled {
19+
cursor: not-allowed;
20+
background-color:theme('colors.bg.200');
21+
}
1922

2023
&:where(:--with-icon) {
2124
grid-template-columns: auto auto;
@@ -31,62 +34,50 @@
3134
background-color:theme('colors.fg.DEFAULT');
3235
transition: background-color250mstheme('transitionTimingFunction.DEFAULT');
3336

34-
/* TODO: Need to discuss about interaction styling */
35-
&:hover:not(:--disabled) {
37+
&:hover:where(:not(:--disabled)) {
3638
background-color:theme('colors.fg.100');
3739
}
3840

39-
&:--disabled {
40-
color:theme('colors.white');
41-
background-color:theme('colors.neutral.500');
41+
&:active {
42+
background-color:theme('colors.fg.200');
4243
}
4344
}
4445

45-
&:where(:--outlined) {
46-
border:1px solidtheme('colors.fg.DEFAULT');
47-
transition: background-color250mstheme('transitionTimingFunction.DEFAULT');
46+
&:where(:--pop) {
47+
background-color:theme('colors.bg.DEFAULT');
48+
border:1px solid currentcolor;
49+
box-shadow:4px4pxtheme('colors.fg.DEFAULT');
50+
51+
transition-timing-function:cubic-bezier(0.19,1,0.22,1);
52+
transition-duration:180ms;
53+
transition-property: box-shadow, transform;
4854

49-
&:hover:not(:--disabled) {
50-
background-color:theme('colors.outline.DEFAULT');
55+
&:hover:where(:not(:--disabled)) {
56+
transform:translate(-2px,-2px);
57+
box-shadow:6px6pxtheme('colors.fg.DEFAULT');
5158
}
5259

53-
&:--disabled {
54-
color:theme('colors.white');
55-
background-color:theme('colors.neutral.500');
60+
&:active {
61+
transform:translate(0,0);
62+
box-shadow:4px4pxtheme('colors.fg.DEFAULT');
5663
}
5764
}
5865

59-
&:where(:--text) {
60-
position: relative;
61-
padding:004px;
62-
font-weight:500;
63-
64-
&::after {
65-
content:'';
66-
67-
position: absolute;
68-
bottom:0;
69-
left:0;
70-
transform-origin: right center;
71-
transform:scaleX(0);
72-
73-
display: block;
74-
75-
width:100%;
76-
height:1px;
77-
78-
background-color:theme('colors.outline.200');
66+
&:where(:--outlined) {
67+
background-color:theme('colors.bg.DEFAULT');
68+
border:1px solidtheme('colors.fg.DEFAULT');
69+
transition: background-color250mstheme('transitionTimingFunction.DEFAULT');
7970

80-
transition: transform250mstheme('transitionTimingFunction.DEFAULT');
71+
&:hover:where(:not(:--disabled)) {
72+
background-color:theme('colors.bg.100');
8173
}
8274

83-
&:hover::after {
84-
transform-origin: left center;
85-
transform:scaleX(1);
75+
&:active {
76+
background-color:theme('colors.bg.200');
8677
}
8778
}
8879

89-
&:where(:not(:--text):--loading) {
80+
&:where(:--loading) {
9081
position: relative;
9182
overflow: hidden;
9283

‎sites/www/src/lib/components/MailRegistrationForm/MailRegistrationForm.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@
134134
{#if$errors.turnstile?.length}
135135
<pclass="error">{$errors.turnstile[0]}</p>
136136
{/if}
137-
<buttontype="submit"class="c-btn w-full"data-loading={$delayed}>
137+
<buttontype="submit"class="c-btnc-btn--popw-full"data-loading={$delayed}>
138138
{t.cta}
139139
</button>
140140
</div>

‎sites/www/src/lib/modals/QRCode/QRCode.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@
8484
>
8585
<divaria-disabledclass="c-backdrop"transition:fade={{duration:150 }}></div>
8686
<div
87-
class="relativeroundedbg-bg p-6 tb:p-8"
87+
class="relative bg-bg p-6 tb:p-8"
8888
use:clickoutside={{limit: {parent:container } }}
8989
on:clickoutside={clickOutside}
9090
transition:fly={{duration:200,y:20 }}

‎sites/www/src/lib/modals/Settings/Settings.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@
7474
>
7575
<divaria-disabledclass="c-backdrop"transition:fade={{duration:200 }} />
7676
<div
77-
class="burder-outline relative max-h-[96dvh] max-w-[min(1200px,100dvw)] overflow-autoroundedbg-bg"
77+
class="burder-outline relative max-h-[96dvh] max-w-[min(1200px,100dvw)] overflow-auto bg-bg"
7878
use:clickoutside={{limit: {parent:container } }}
7979
on:clickoutside={clickOutside}
8080
transition:fly={{duration:200,y:50 }}

‎sites/www/src/routes/(localized)/events/+page.svelte‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -164,7 +164,9 @@
164164
{tComponent.actions.sponsor.whyNeedSponsor}
165165
</a>
166166
</p>
167-
<ahref={$routes.sponsor.path}class="c-btn mt-4">{tComponent.actions.sponsor.cta}</a>
167+
<ahref={$routes.sponsor.path}class="c-btn c-btn--pop mt-4"
168+
>{tComponent.actions.sponsor.cta}</a
169+
>
168170
</section>
169171
<p
170172
class="self-center justify-self-center text-center sp:w-8/12 pc:col-span-3"

‎sites/www/src/routes/(localized)/jobs/+page.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@
8686
{t.actions.recruiter.whyNeedSponsor}
8787
</a>
8888
</p>
89-
<ahref={$routes.sponsor.path}class="c-btn mt-4">{t.actions.recruiter.cta}</a>
89+
<ahref={$routes.sponsor.path}class="c-btnc-btn--popmt-4">{t.actions.recruiter.cta}</a>
9090
</section>
9191
<sectionclass="c-card-action"use:intersectid="mail">
9292
<h3class="c-text-h3 font-medium">{t.actions.candidate.title}</h3>

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp