style panel settings
This commit is contained in:
Julie Blanc
parent
d604e5d05e
commit
3ae2d0e310
12 changed files with 334 additions and 338 deletions
|
|
@ -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
71
public/assets/css/src/_panel-settings.scss
Normal 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; }
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -31,6 +31,6 @@
|
|||
--label-w: 18ch;
|
||||
font-size: 14px;
|
||||
|
||||
--panel-w: 540px;
|
||||
--panel-w: 560px;
|
||||
--panel-nav-h: 60px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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] {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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 *;
|
||||
|
|
|
|||
10
public/assets/svg/book.svg
Normal file
10
public/assets/svg/book.svg
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="100%" height="100%" viewBox="0 0 93 93" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||
<g id="Artboard1" transform="matrix(1,0,0,1,-4,-16)">
|
||||
<rect x="4" y="16" width="93" height="93" style="fill:none;"/>
|
||||
<g transform="matrix(1,0,0,1,0.497582,12.49946)">
|
||||
<path d="M48.766,20.68C46.766,19.864 44.453,19.2 41.918,18.727C39.164,18.215 36.145,17.93 32.961,17.93C28.543,17.93 24.41,18.481 20.871,19.438C17.528,20.344 14.731,21.606 12.739,23.098L12.739,73.036C19.61,70.622 25.661,69.431 31.505,69.337C37.294,69.243 42.852,70.227 48.77,72.157L48.77,20.672L48.766,20.68ZM87.258,73.024L87.262,23.102C85.274,21.606 82.477,20.344 79.129,19.442C75.59,18.481 71.457,17.934 67.039,17.934C63.856,17.934 60.836,18.215 58.082,18.731C55.547,19.204 53.234,19.868 51.234,20.684L51.234,72.168C57.234,70.219 62.875,69.227 68.695,69.32C74.547,69.414 80.554,70.605 87.261,73.023L87.258,73.024ZM10.274,27.958L10.274,74.798C10.274,75.478 10.825,76.032 11.508,76.032C11.7,76.032 11.876,75.989 12.04,75.915C19.294,73.22 25.556,71.9 31.548,71.806C37.555,71.708 43.329,72.841 49.603,75.048C49.876,75.142 50.157,75.138 50.411,75.048C56.767,72.829 62.63,71.689 68.665,71.782C74.712,71.88 80.954,73.216 88.063,75.947C88.696,76.189 89.407,75.872 89.649,75.239C89.704,75.095 89.731,74.947 89.731,74.802L89.739,74.802L89.731,27.958C90.387,28.228 91.02,28.513 91.622,28.813C92.454,29.228 93.212,29.665 93.887,30.122L93.887,82.071C89.176,79.54 81.664,77.856 73.973,77.122C64.86,76.255 55.399,76.712 50.004,78.677C44.61,76.712 35.152,76.255 26.035,77.122C18.34,77.856 10.832,79.54 6.121,82.071L6.117,30.118C6.793,29.665 7.547,29.227 8.383,28.809C8.985,28.509 9.617,28.224 10.274,27.954L10.274,27.958Z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2 KiB |
10
public/assets/svg/text.svg
Normal file
10
public/assets/svg/text.svg
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="100%" height="100%" viewBox="0 0 29 29" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||
<g id="Artboard1" transform="matrix(1,0,0,1,-1,-1)">
|
||||
<rect x="1" y="1" width="29" height="29" style="fill:none;"/>
|
||||
<g transform="matrix(1,0,0,1,-0.5,-0.5)">
|
||||
<path d="M5,2C3.344,2 2,3.344 2,5L2,27C2,28.656 3.344,30 5,30L27,30C28.656,30 30,28.656 30,27L30,5C30,3.344 28.656,2 27,2L5,2ZM8,8L18,8C18.552,8 19,8.448 19,9L19,11C19,11.552 18.552,12 18,12C17.448,12 17,11.552 17,11L17,10L14,10L14,22L15,22C15.552,22 16,22.448 16,23C16,23.552 15.552,24 15,24L11,24C10.448,24 10,23.552 10,23C10,22.448 10.448,22 11,22L12,22L12,10L9,10L9,11C9,11.552 8.552,12 8,12C7.448,12 7,11.552 7,11L7,9C7,8.448 7.448,8 8,8ZM18,14L24,14C24.552,14 25,14.448 25,15L25,17C25,17.552 24.552,18 24,18C23.448,18 23,17.552 23,17L23,16L22,16L22,22C22.552,22 23,22.448 23,23C23,23.552 22.552,24 22,24L20,24C19.448,24 19,23.552 19,23C19,22.448 19.448,22 20,22L20,16L19,16L19,17C19,17.552 18.552,18 18,18C17.448,18 17,17.552 17,17L17,15C17,14.448 17.448,14 18,14Z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
Loading…
Add table
Add a link
Reference in a new issue