gitadmin
/
jsoncv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

split scss modules to reuse button and input styles

This commit is contained in:
Reorx 2023-02-05 00:25:26 +08:00
parent 50e9624133
commit 9a4f8aff8a
4 changed files with 92 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/editor/_basic.scss Normal file
View File

@ -0,0 +1,45 @@
@use 'vars';
input[type=text],
input[type=email] {
padding: 2px 4px;
display: block;
}
textarea {
font-family: var(--font-default);
line-height: 1.3;
padding: var(--gap);
}
input[type=text],
input[type=email],
textarea {
width: 100%;
box-sizing: border-box;
}
input[type=text],
input[type=email],
select,
textarea {
border: 1px solid #999;
border-radius: 2px;
}
button {
@include vars.normal-button;
margin-right: var(--gap);
// last-of-type should not be used here
&:last-child {
margin-right: 0;
}
svg {
vertical-align: middle;
font-size: 14px;
position: relative;
bottom: 1px;
}
}

81
src/editor/_json-editor.scss
View File

@ -1,45 +1,4 @@
@mixin button-base { @use 'vars';
appearance: none;
user-select: none;
vertical-align: middle;
outline: 0;
display: inline-block;
cursor: pointer;
position: relative;
}
@mixin normal-button {
@include button-base;
background-color: #eee;
border: 1px solid transparent;
border-radius: 2px;
padding: 0px 8px;
line-height: 22px;
&:hover {
background-color: #e1e1e1;
}
&:active {
border-color: #555;
}
}
@mixin text-button {
@include button-base;
background-color: transparent;
padding: 0;
font-size: 12px;
line-height: 1;
color: #555;
&:hover {
border-bottom: 1px solid #999;
}
&:active {
border-color: transparent;
border-bottom: 1px solid #000;
}
}
.editor-container { .editor-container {
font-size: 14px; font-size: 14px;
@ -50,38 +9,6 @@
p { p {
margin: 0 0 var(--gap) 0; margin: 0 0 var(--gap) 0;
} }
input[type=text],
input[type=email] {
padding: 2px 4px;
}
textarea {
font-family: var(--font-default);
line-height: 1.3;
padding: var(--gap);
}
input[type=text],
input[type=email],
select,
textarea {
border: 1px solid #888;
border-radius: 2px;
}
button {
@include normal-button;
margin-right: var(--gap);
// last-of-type should not be used here
&:last-child {
margin-right: 0;
}
svg {
vertical-align: middle;
font-size: 14px;
position: relative;
bottom: 1px;
}
}
iconify-icon { iconify-icon {
font-size: 15px; font-size: 15px;
} }
@ -147,7 +74,7 @@
top: 2px; top: 2px;
button { button {
@include text-button; @include vars.text-button;
} }
} }
.json-editor-btn-add { .json-editor-btn-add {
@ -170,8 +97,8 @@
} }
.je-textarea { .je-textarea {
height: 150px; height: 120px;
min-height: 150px; min-height: 120px;
max-height: 500px; max-height: 500px;
resize: vertical; resize: vertical;
} }

42
src/editor/_vars.scss Normal file
View File

@ -0,0 +1,42 @@
@mixin button-base {
appearance: none;
user-select: none;
vertical-align: middle;
outline: 0;
display: inline-block;
cursor: pointer;
position: relative;
}
@mixin normal-button {
@include button-base;
background-color: #eee;
border: 1px solid transparent;
border-radius: 2px;
padding: 0px 8px;
line-height: 22px;
&:hover {
background-color: #e1e1e1;
}
&:active {
border-color: #555;
}
}
@mixin text-button {
@include button-base;
background-color: transparent;
padding: 0;
font-size: 12px;
line-height: 1;
color: #555;
&:hover {
border-bottom: 1px solid #999;
}
&:active {
border-color: transparent;
border-bottom: 1px solid #000;
}
}

1
src/editor/styles.scss
View File

@ -1,3 +1,4 @@
@use 'basic';
@use 'json-editor'; @use 'json-editor';
:root { :root {