Skip to content

Commit f0eca9d

Browse files
fabienSvtrfabienSvtr
authored
Merge pull request #222 from Scille/ms-restyle-components
[MS] Restyle components
2 parents a038fb1 + c1bdd1d commit f0eca9d

File tree

13 files changed

+210
-65
lines changed

13 files changed

+210
-65
lines changed

‎lib/components/ms-action-bar/MsActionBar.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import { IonItemDivider } from '@ionic/vue';
2020
background-color: var(--parsec-color-light-secondary-background);
2121
border-bottom: 1px solid var(--parsec-color-light-secondary-medium);
2222
border-radius: var(--parsec-radius-12);
23+
width: auto;
2324
width: -webkit-fill-available;
2425
--inner-padding-end: 0;
2526
box-shadow: none;

‎lib/components/ms-action-bar/MsActionBarButton.vue‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -51,18 +51,22 @@ defineProps<{
5151
--padding-end: 0.5rem;
5252
--padding-bottom: 0.25rem;
5353
--padding-start: 0.5rem;
54-
color: var(--parsec-color-light-secondary-grey);
55-
--fill-color: var(--parsec-color-light-secondary-grey);
54+
color: var(--parsec-color-light-secondary-soft-text);
55+
--fill-color: var(--parsec-color-light-secondary-soft-text);
56+
border-radius: var(--parsec-radius-8);
5657
5758
&:hover {
5859
color: var(--parsec-color-light-primary-600);
5960
--fill-color: var(--parsec-color-light-primary-600);
61+
background: var(--parsec-color-light-secondary-medium);
6062
}
6163
6264
&-icon__left {
63-
margin-inline: 0em;
65+
margin-left: 0em;
6466
margin-right: 0.375rem;
65-
width: 1.25rem;
67+
width: 1.125rem;
68+
height: 1.125rem;
69+
font-size: 1.125rem;
6670
}
6771
6872
&-icon__right {

‎lib/components/ms-datetime-picker/MsDatetimePicker.vue‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
<!-- Parsec Cloud (https://parsec.cloud) Copyright (c) BUSL-1.1 2016-present Scille SAS -->
22

33
<template>
4-
<vue-date-picker v-bind="$attrs" />
4+
<vue-date-picker
5+
v-bind="$attrs"
6+
class="datetime-picker"
7+
/>
58
</template>
69

710
<script setup lang="ts">

‎lib/components/ms-dropdown/MsDropdown.vue‎

Lines changed: 34 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -12,17 +12,18 @@
1212
:fill="appearanceRef"
1313
@click="openPopover($event)"
1414
id="dropdown-popover-button"
15-
class="filter-button form-input"
15+
class="dropdown-button form-input"
1616
:class="isPopoverOpen ? 'active' : ''"
1717
:disabled="disabled"
1818
>
19-
<ion-icon
20-
:class="{ 'popover-is-open': isPopoverOpen }"
21-
class="ms-dropdown-icon"
22-
slot="end"
23-
:icon="getIcon()"
24-
/>
25-
<span class="input-text">{{ $msTranslate(labelRef) }}</span>
19+
<div class="dropdown-button-content">
20+
<span class="input-text">{{ $msTranslate(labelRef) }}</span>
21+
<ion-icon
22+
:class="{ 'popover-is-open': isPopoverOpen }"
23+
class="ms-dropdown-icon"
24+
:icon="getIcon()"
25+
/>
26+
</div>
2627
</ion-button>
2728
</div>
2829
</template>
@@ -130,10 +131,9 @@ function getIcon(): string {
130131
</script>
131132

132133
<style lang="scss" scoped>
133-
.filter-button {
134+
.dropdown-button {
134135
background: none;
135136
color: var(--parsec-color-light-primary-800);
136-
--border-color-hover: none;
137137
margin: 0;
138138
139139
.input-text {
@@ -144,6 +144,24 @@ function getIcon(): string {
144144
145145
&::part(native) {
146146
border-radius: var(--parsec-radius-8);
147+
border-color: var(--parsec-color-light-secondary-light);
148+
padding: 0 !important;
149+
--ripple-color: transparent;
150+
}
151+
152+
&:hover {
153+
&::part(native) {
154+
border-color: var(--parsec-color-light-primary-300);
155+
}
156+
}
157+
158+
&-content {
159+
display: flex;
160+
justify-content: space-between;
161+
align-items: center;
162+
width: 100%;
163+
gap: 0.5rem;
164+
padding: 0.625rem 1rem;
147165
}
148166
}
149167
@@ -162,22 +180,25 @@ function getIcon(): string {
162180
--background: var(--parsec-color-light-secondary-background);
163181
outline: var(--offset) solid var(--parsec-color-light-outline);
164182
border-radius: var(--parsec-radius-8);
183+
184+
&::part(native) {
185+
border: 1px solid var(--parsec-color-light-primary-300);
186+
}
165187
}
166188
167189
.form-label {
168190
color: var(--parsec-color-light-primary-700);
169191
}
170192
171193
&.large {
172-
.filter-button::part(native) {
194+
.dropdown-button::part(native) {
173195
padding: 0.625rem 1rem;
174196
}
175197
}
176198
}
177199
178200
.ms-dropdown-icon {
179-
margin-left: 0.5em;
180-
font-size: 1.25rem;
201+
font-size: 1.125rem;
181202
transition: transform ease-out 300ms;
182203
color: var(--parsec-color-light-secondary-grey);
183204

‎lib/components/ms-input/MsCodeValidationInput.vue‎

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<ion-input
99
ref="inputs"
1010
v-model="codes[i - 1]"
11-
class="code-input-list__item title-h1-xl"
11+
class="code-input-list__item title-h1"
1212
:class="{ 'has-values': codes[i - 1] !== '' }"
1313
type="text"
1414
inputmode="numeric"
@@ -222,7 +222,6 @@ async function focusInputElement(input: HTMLIonInputElement | undefined): Promis
222222
223223
.code-input-list {
224224
display: flex;
225-
justify-content: center;
226225
gap: 1rem;
227226
margin: 0.25rem;
228227
@@ -231,38 +230,35 @@ async function focusInputElement(input: HTMLIonInputElement | undefined): Promis
231230
}
232231
&__item {
233232
--highlight-color-focused: none;
234-
color: var(--parsec-color-light-primary-700);
235-
border: 1px solid var(--parsec-color-light-secondary-disabled);
233+
color: var(--parsec-color-light-secondary-text);
234+
background-color: var(--parsec-color-light-secondary-premiere);
236235
caret-color: transparent;
237236
border-radius: var(--parsec-radius-8);
238237
width: 3.5rem;
239-
height: 5rem;
238+
height: 4.5rem;
240239
display: flex;
241240
text-align: center;
242241
position: relative;
242+
font-size: 1.75rem !important;
243243
244244
@include ms.responsive-breakpoint('sm') {
245245
width: 3rem;
246246
height: 4rem;
247-
font-size: 1.75rem !important;
248-
}
249-
250-
@include ms.responsive-breakpoint('xs') {
251-
width: 2.5rem;
252-
height: 3.25rem;
253-
font-size: 1.25rem !important;
254247
}
255248
256249
&:is(.has-focus) {
250+
border: 1px solid var(--parsec-color-light-primary-200);
251+
background: var(--parsec-color-light-secondary-inversed-contrast);
252+
257253
&::after {
258254
content: '';
259255
position: absolute;
260256
top: 0;
261257
left: 0;
262258
width: 100%;
263259
height: 100%;
264-
outline: 2px solid var(--parsec-color-light-primary-700);
265-
animation: blinking 1.3s infinite ease-out;
260+
outline: 5px solid var(--parsec-color-light-outline);
261+
animation: blinking 1.4s infinite ease-out;
266262
border-radius: var(--parsec-radius-8);
267263
}
268264
}

‎lib/components/ms-modal/MsModal.vue‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,6 @@ async function confirm(): Promise<boolean> {
156156
.ms-modal-header {
157157
display: flex;
158158
flex-direction: column;
159-
padding-bottom: 1.5rem;
160159
161160
&__title {
162161
padding: 0;
@@ -189,6 +188,15 @@ async function confirm(): Promise<boolean> {
189188
&__text {
190189
color: var(--parsec-color-light-secondary-hard-grey);
191190
margin-top: 0.625rem;
191+
192+
@include ms.responsive-breakpoint('sm') {
193+
padding: 0 2rem;
194+
margin-top: 0;
195+
}
196+
197+
@include ms.responsive-breakpoint('xs') {
198+
padding: 0 1.5rem;
199+
}
192200
}
193201
}
194202

‎lib/components/ms-sorter/MsSorter.vue‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
/>
1616
<ion-text
1717
v-if="isLargeDisplay"
18-
class="sorter-button-content__text button-small"
18+
class="sorter-button-content__text"
1919
>
2020
{{ $msTranslate(labelRef) }}
2121
</ion-text>
@@ -94,8 +94,8 @@ async function onDidDismissPopover(popover: any): Promise<void> {
9494
@use '@lib/theme' as ms;
9595
9696
.sorter-button {
97-
--background: none;
98-
--background-hover: var(--parsec-color-light-secondary-medium);
97+
--background: transparent;
98+
--background-hover: transparent;
9999
--color: var(--parsec-color-light-secondary-text);
100100
min-height: 1rem;
101101
@@ -127,18 +127,19 @@ async function onDidDismissPopover(popover: any): Promise<void> {
127127
128128
&__text {
129129
color: var(--parsec-color-light-secondary-text);
130-
font-size: 0.875rem;
130+
font-size: 0.8125rem;
131131
font-weight: 500;
132132
}
133133
134-
&:focus,
135-
&:active {
136-
background: var(--parsec-color-light-secondary-medium);
137-
}
138-
139134
&:hover ion-icon {
140135
color: var(--parsec-color-light-primary-700);
141136
}
142137
}
138+
139+
&:hover {
140+
.sorter-button-content {
141+
background: var(--parsec-color-light-secondary-medium);
142+
}
143+
}
143144
}
144145
</style>

‎lib/components/ms-stepper/MsWizardStepper.vue‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,11 @@
1212
/>
1313
<ion-text
1414
class="subtitles-sm step-title"
15-
:class="index < currentIndex ? MsStepStatus.DONE : ''"
15+
:class="{
16+
done: index < currentIndex,
17+
active: index === currentIndex,
18+
default: index > currentIndex,
19+
}"
1620
>
1721
{{ $msTranslate(title) }}
1822
</ion-text>
@@ -45,15 +49,19 @@ defineProps<{
4549
display: flex;
4650
flex-direction: column;
4751
align-items: center;
48-
gap: 1rem;
52+
gap: 0.5rem;
4953
width: 8.125rem;
5054
5155
.step-title {
5256
color: var(--parsec-color-light-primary-600);
5357
}
5458
5559
.done {
56-
opacity: 0.4;
60+
opacity: 0.5;
61+
}
62+
63+
.default {
64+
color: var(--parsec-color-light-secondary-grey);
5765
}
5866
5967
&:first-of-type {

0 commit comments

Comments
 (0)