studio-variable/designtopack
3
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

fix: StaticView dialog content tabs style

Browse source 
Move component style to 2.blocks.dialog.css

close #80
This commit is contained in:
Timothée Goguely 2024-12-20 18:12:12 +01:00
parent 9d496efd03
commit d1fd4ed568
2 changed files with 55 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

58
src/assets/css/src/2.blocks.dialog.css
View file

@ -65,7 +65,7 @@
--btn-border-color: var(--color-white);
}
/* Inner */
/* Content */
.dialog__inner {
background: var(--dialog-inner-background, #F7F7F7);
height: 100%;
@ -80,6 +80,53 @@
display: flex;
gap: var(--space-8);
}
.dialog [data-pc-section="content"] [role="tablist"] {
height: 3.5rem;
width: 100%;
display: flex;
align-items: flex-start;
justify-content: center;
margin: 0 auto;
border-bottom: 1px solid var(--color-grey-700);
padding-top: 7px;
}
.dialog [data-pc-section="content"] [role="tab"] {
--tab-h: 3rem;
--tab-min-w: none;
--tab-py: var(--space-8);
--tab-px: var(--space-12);
--tab-border-w: 1px;
--tab-color: var(--color-grey-400);
--tab-background: transparent;
--tab-border-color: transparent;
position: relative;
display: flex;
align-items: center;
font-size: var(--text-md);
text-align: center;
background-color: transparent;
color: var(--tab-color);
padding: var(--tab-py) var(--tab-px);
margin: 0;
cursor: pointer;
gap: var(--space-4);
min-width: var(--tab-min-w);
height: var(--tab-h);
border-bottom: var(--tab-border-w) solid var(--tab-border-color);
}
.dialog [data-pc-section="content"] [role="tab"][aria-selected="true"] {
--tab-border-color: var(--color-white);
--tab-color: var(--color-white);
}
.dialog [data-pc-section="content"] [role="tab"]:focus-visible {
z-index: 20;
}
.dialog [data-pc-section="content"] [role="tab"] .label {
flex-grow: 1;
font-weight: 500;
letter-spacing: 0.01em;
margin-top: -0.1em;
}
/* Footer */
.dialog [data-pc-section="footer"] {
@ -97,13 +144,18 @@
left: 22.5rem;
right: 22.5rem;
}
.dialog.static#virtual-sample #comments-container {
.dialog#virtual-sample #comments-container {
top: 8rem;
}
.dialog.static#virtual-sample [data-pc-section="footer"] {
.dialog#virtual-sample [data-pc-section="footer"] {
display: none;
}
.dialog#virtual-sample .dialog__inner {
background-color: inherit;
height: calc(100% - 3.5rem) !important;
}
/* Physical Sample */
.dialog#physical-sample {
--dialog-header-h: 15rem;

55
src/components/project/virtual-sample/StaticView.vue
View file

@ -50,58 +50,3 @@ watch(
{ immediate: true }
);
</script>
<style scoped>
.dialog__inner {
background-color: inherit;
height: calc(100% - 3.5rem) !important;
}
[role="tablist"] {
height: 3.5rem;
width: 100%;
display: flex;
align-items: flex-start;
justify-content: center;
margin: 0 auto;
border-bottom: 1px solid var(--color-grey-700);
padding-top: 7px;
}
[role="tab"] {
--tab-h: 3rem;
--tab-min-w: none;
--tab-py: var(--space-8);
--tab-px: var(--space-12);
--tab-border-w: 1px;
--tab-color: var(--color-grey-400);
--tab-background: transparent;
--tab-border-color: transparent;
position: relative;
display: flex;
align-items: center;
font-size: var(--text-md);
text-align: center;
background-color: transparent;
color: var(--tab-color);
padding: var(--tab-py) var(--tab-px);
margin: 0;
cursor: pointer;
gap: var(--space-4);
min-width: var(--tab-min-w);
height: var(--tab-h);
border-bottom: var(--tab-border-w) solid var(--tab-border-color);
}
[role="tab"][aria-selected="true"] {
--tab-border-color: var(--color-white);
--tab-color: var(--color-white);
}
[role="tab"]:focus-visible {
z-index: 20;
}
[role="tab"] .label {
flex-grow: 1;
font-weight: 500;
letter-spacing: 0.01em;
margin-top: -0.1em;
}
</style>