studio-variable/geoproject-app
4
0
Fork 0
Code Issues 25 Pull requests Projects Releases Packages Wiki Activity Actions

style panel settings

Browse source
This commit is contained in:
Julie Blanc 2026-03-07 19:59:01 +01:00
parent d604e5d05e
commit 3ae2d0e310
12 changed files with 334 additions and 338 deletions
Download patch file Download diff file Expand all files Collapse all files

2
public/assets/css/src/_colors.scss
View file

@ -91,7 +91,7 @@
}
[data-color-type="elem"]{
[data-color-type="text"]{
--color-050: #f4f0ff;
--color-100: #e7e1ff;
--color-200: #dacfff;

71
public/assets/css/src/_panel-settings.scss Normal file
View file

@ -0,0 +1,71 @@
.panel-settings__container{
// margin-top: var(--space-m);
margin-bottom: var(--space-s);
border: 1px solid var(--color-300);
border-radius: var(--border-radius);
padding: var(--space-s);
.settings__header{
display: flex;
align-items: center;
gap: var(--space-xs);
margin-bottom: var(--space-s);
// border: 1px solid var(--color-300);
// border-radius: var(--border-radius);
// padding: 2px 1ch;
.icon{
position: relative;
top: 2px;
svg{
width: 20px;
height: 20px;
fill: var(--color-600);
}
}
.title{
font-size: 1.2rem;
color: var(--color-600);
}
}
.setting__section{
.setting__header{
color: var(--color-600);
}
}
.setting__section[data-setting="format"]{
border-bottom: none;
padding-bottom: var(--space-xs);
}
.setting__section[data-setting="dimensions"]{
border-top: none;
padding-top: 0;
.setting__header{
display: none;
}
.setting__body{
grid-column: 2;
width: 0;
display: flex;
gap: var(--space-s);
.field-size-page{
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-xs);
}
}
.field-size-page:first-of-type .unit-toggle{ display: none; }
}
}

2
public/assets/css/src/_variables.scss
View file

@ -31,6 +31,6 @@
--label-w: 18ch;
font-size: 14px;
--panel-w: 540px;
--panel-w: 560px;
--panel-nav-h: 60px;
}

59
public/assets/css/style.css
View file

@ -176,7 +176,7 @@
--color-900: #d96a30;
}
[data-color-type=elem] {
[data-color-type=text] {
--color-050: #f4f0ff;
--color-100: #e7e1ff;
--color-200: #dacfff;
@ -241,7 +241,7 @@ img {
--input-w-small: 45px;
--label-w: 18ch;
font-size: 14px;
--panel-w: 540px;
--panel-w: 560px;
--panel-nav-h: 60px;
}
@ -269,6 +269,61 @@ h2 {
string-set: title content(text);
}
.panel-settings__container {
margin-bottom: var(--space-s);
border: 1px solid var(--color-300);
border-radius: var(--border-radius);
padding: var(--space-s);
}
.panel-settings__container .settings__header {
display: flex;
align-items: center;
gap: var(--space-xs);
margin-bottom: var(--space-s);
}
.panel-settings__container .settings__header .icon {
position: relative;
top: 2px;
}
.panel-settings__container .settings__header .icon svg {
width: 20px;
height: 20px;
fill: var(--color-600);
}
.panel-settings__container .settings__header .title {
font-size: 1.2rem;
color: var(--color-600);
}
.panel-settings__container .setting__section .setting__header {
color: var(--color-600);
}
.panel-settings__container .setting__section[data-setting=format] {
border-bottom: none;
padding-bottom: var(--space-xs);
}
.panel-settings__container .setting__section[data-setting=dimensions] {
border-top: none;
padding-top: 0;
}
.panel-settings__container .setting__section[data-setting=dimensions] .setting__header {
display: none;
}
.panel-settings__container .setting__section[data-setting=dimensions] .setting__body {
grid-column: 2;
width: 0;
display: flex;
gap: var(--space-s);
}
.panel-settings__container .setting__section[data-setting=dimensions] .setting__body .field-size-page {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-xs);
}
.panel-settings__container .setting__section[data-setting=dimensions] .field-size-page:first-of-type .unit-toggle {
display: none;
}
select,
input[type=text],
input[type=number] {

2
public/assets/css/style.css.map
View file

File diff suppressed because one or more lines are too long

2
public/assets/css/style.scss
View file

@ -4,8 +4,8 @@
@use "src/_variables.scss" as *;
@use "src/_text.scss" as *;
@use "src/_print-styles.scss" as *;
@use "src/_panel-settings.scss" as *;
@use "src/_forms.scss" as *;
@use "src/_forms-section.scss" as *;
@use "src/_buttons.scss" as *;
@use "src/_toggle-setting.scss" as *;
@use "src/_settings-popup.scss" as *;