AXE-WEB/block-dev-tool
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added basic "publish" block logic.

Browse Source
This commit is contained in:
Roman Axelrod
2022-09-30 14:03:48 +03:00
parent 6b3ed38e04
commit 760825be2d
16 changed files with 961 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
layouts/styles/_buttons.scss
+25
View File
@@ -0,0 +1,25 @@
.btn {
--btn-color: #333;
--btn-background-color: white;
display: inline-block;
padding: calc(0.375rem - 2px) 0.75rem;
font-size: 1rem;
line-height: 1.5;
text-align: center;
text-decoration: none;
color: var(--btn-color);
border-radius: 0.25rem;
border: 1px solid var(--btn-background-color);
background-color: var(--btn-background-color);
cursor: pointer;
&:disabled {
opacity: 0.75;
cursor: default;
}
&--primary {
--btn-color: white;
--btn-background-color: #333;
}
}
layouts/styles/_overlay.scss
+13
View File
@@ -0,0 +1,13 @@
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
}
layouts/styles/_page--breakpoints.scss
-1
View File
@@ -3,7 +3,6 @@
margin-right: auto;
margin-left: auto;
--top_panel_height: 53.5px;
--top_spacing: 0px;
--breakpoint_top_spacing: 30px;
layouts/styles/page--main.css
+54 -7
View File
@@ -1,29 +1,77 @@
:root {
--top_panel_vertical_height: 0.5rem;
--top_panel_height: calc(36px + var(--top_panel_vertical_height) * 2);
}
body {
margin: 0;
font-size: 1rem;
background-color: #F7FAFC;
}
.btn {
--btn-color: #333;
--btn-background-color: white;
display: inline-block;
padding: calc(0.375rem - 2px) 0.75rem;
font-size: 1rem;
line-height: 1.5;
text-align: center;
text-decoration: none;
color: var(--btn-color);
border-radius: 0.25rem;
border: 1px solid var(--btn-background-color);
background-color: var(--btn-background-color);
cursor: pointer;
}
.btn:disabled {
opacity: 0.75;
cursor: default;
}
.btn--primary {
--btn-color: white;
--btn-background-color: #333;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
}
.page_toolbar {
--gap: 2.5rem;
font-size: 14px;
font-family: Arial, sans-serif;
background-color: #EDF2F7;
padding: 1em;
padding: var(--top_panel_vertical_height) 1rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.page_toolbar .page_toolbar__middle {
display: flex;
justify-content: center;
gap: var(--gap);
align-items: center;
}
.page_toolbar > div {
.page_toolbar .page_toolbar__middle > div {
position: relative;
}
@media (max-width: 1024px) {
.page_toolbar > div {
.page_toolbar .page_toolbar__middle > div {
display: none;
}
}
.page_toolbar > div:not(:first-child):after {
.page_toolbar .page_toolbar__middle > div:not(:first-child):after {
content: "|";
position: absolute;
left: calc(var(--gap) / 2 * -1);
@@ -32,7 +80,7 @@ body {
line-height: 1;
transform: translateY(-50%);
}
.page_toolbar > div select {
.page_toolbar .page_toolbar__middle > div select {
font-size: 0.85em;
margin: 0;
display: inline-block;
@@ -42,7 +90,7 @@ body {
padding: 4px 8px;
}
@media (max-width: 1024px) {
.page_toolbar__data_options {
.page_toolbar .page_toolbar__middle__data_options {
display: block;
}
}
@@ -51,7 +99,6 @@ body {
display: block;
margin-right: auto;
margin-left: auto;
--top_panel_height: 53.5px;
--top_spacing: 0px;
--breakpoint_top_spacing: 30px;
margin-top: var(--top_spacing);
layouts/styles/page--main.css.map
+1 -1
View File
@@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["page--main.scss","_page--breakpoints.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EAEA;;;AAGF;EACE;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAGA;EACE;;AAEA;EAHF;IAII;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAKF;EADF;IAEI;;;;ACnDN;EACE;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EAEA;;AAEA;EACE;EAEA;EACA;EACA","file":"page--main.css"}
{"version":3,"sourceRoot":"","sources":["page--main.scss","_buttons.scss","_overlay.scss","_page--breakpoints.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;AAGF;EACE;EACA;EAEA;;;ACTF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;ACtBJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AFIF;EACE;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EAHF;IAII;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAKF;EADF;IAEI;;;;AG/DR;EACE;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EAEA;EAEA;;AAEA;EACE;EAEA;EACA;EACA","file":"page--main.css"}
layouts/styles/page--main.scss
+45 -32
View File
@@ -1,3 +1,8 @@
:root {
--top_panel_vertical_height: 0.5rem;
--top_panel_height: calc(36px + var(--top_panel_vertical_height) * 2);
}
body {
margin: 0;
font-size: 1rem;
@@ -5,51 +10,59 @@ body {
background-color: #F7FAFC;
}
@import "buttons";
@import "overlay";
.page_toolbar {
--gap: 2.5rem;
font-size: 14px;
font-family: Arial, sans-serif;
background-color: #EDF2F7;
padding: 1em;
padding: var(--top_panel_vertical_height) 1rem;
display: flex;
justify-content: center;
gap: var(--gap);
justify-content: space-between;
align-items: center;
//margin-bottom: 2em;
> div {
position: relative;
.page_toolbar__middle {
display: flex;
justify-content: center;
gap: var(--gap);
align-items: center;
@media (max-width: 1024px) {
display: none;
> div {
position: relative;
@media (max-width: 1024px) {
display: none;
}
&:not(:first-child):after {
content: '|';
position: absolute;
left: calc(var(--gap) / 2 * -1);
top: 40%;
font-size: 20px;
line-height: 1;
transform: translateY(-50%);
}
select {
font-size: 0.85em;
margin: 0;
display: inline-block;
border-radius: initial;
min-width: initial;
width: initial !important;
padding: 4px 8px;
}
}
&:not(:first-child):after {
content: '|';
position: absolute;
left: calc(var(--gap) / 2 * -1);
top: 40%;
font-size: 20px;
line-height: 1;
transform: translateY(-50%);
}
select {
font-size: 0.85em;
margin: 0;
display: inline-block;
border-radius: initial;
min-width: initial;
width: initial !important;
padding: 4px 8px;
}
}
&__data_options {
@media (max-width: 1024px) {
display: block;
&__data_options {
@media (max-width: 1024px) {
display: block;
}
}
}