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

Added the logic of wrapper + responsiveness controllers.

Browse Source
This commit is contained in:
Roman Axelrod
2022-07-19 18:43:16 +03:00
parent a7e51803cf
commit 9173efe9c9
24 changed files with 535 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
layouts/styles/_page--breakpoints.scss
+24
View File
@@ -0,0 +1,24 @@
#preview_frame {
display: block;
margin-right: auto;
margin-left: auto;
border: 1px solid #E2E8F0;
transition: max-width .3s ease-in-out, width .3s ease-in-out;
&.breakpoint {
width: 100%;
max-width: 1920px;
//max-width: 100%;
&--mobile {
max-width: 375px;
}
&--tablet {
max-width: 768px;
}
}
}
layouts/styles/_page--main--responsive-mode.scss
+38
View File
@@ -0,0 +1,38 @@
&__responsive_mode {
display: flex;
gap: 0.5rem;
input[type='radio'] {
display: none;
}
label {
--size: 1.5rem;
cursor: pointer;
background-image: url("../images/icon-desktop.svg");
background-repeat: no-repeat;
background-size: calc(var(--size) - 0.15rem);
background-position: center;
font-size: 1px;
color: rgba(0, 0, 0, 0);
line-height: 1;
display: block;
width: var(--size);
height: var(--size);
border-radius: 0.25rem;
&[for="responsive_mode__tablet"] {
background-image: url("../images/icon-tablet.svg");
}
&[for="responsive_mode__mobile"] {
background-image: url("../images/icon-mobile.svg");
}
}
input[type='radio']:checked + label {
background-color: #CBD5E0;
}
}
layouts/styles/page--main.css
+70 -18
View File
@@ -1,29 +1,36 @@
body {
margin: 0;
font-size: 1rem;
background-color: #F7FAFC;
}
header.page_toolbar {
iframe {
margin-top: 30px;
height: calc(100% - 54px - 32px);
background-color: white;
}
.page_toolbar {
--gap: 2.5rem;
font-size: 14px;
font-family: Arial, sans-serif;
background-color: #ccc;
background-color: #EDF2F7;
padding: 1em;
display: flex;
justify-content: center;
gap: var(--gap);
align-items: center;
margin-bottom: 2em;
}
header.page_toolbar > div {
.page_toolbar > div {
position: relative;
}
header.page_toolbar > div:not(:first-child):after {
content: '|';
@media (max-width: 1024px) {
.page_toolbar > div {
display: none;
}
}
.page_toolbar > div:not(:first-child):after {
content: "|";
position: absolute;
left: calc(var(--gap) / 2 * -1);
top: 40%;
@@ -31,8 +38,7 @@ header.page_toolbar > div:not(:first-child):after {
line-height: 1;
transform: translateY(-50%);
}
header.page_toolbar select {
.page_toolbar > div select {
font-size: 0.85em;
margin: 0;
display: inline-block;
@@ -41,13 +47,59 @@ header.page_toolbar select {
width: initial !important;
padding: 4px 8px;
}
@media (max-width: 1024px) {
header.page_toolbar > div {
display: none;
}
header.page_toolbar .page_toolbar__data_options {
.page_toolbar__data_options {
display: block;
}
}
.page_toolbar__responsive_mode {
display: flex;
gap: 0.5rem;
}
.page_toolbar__responsive_mode input[type=radio] {
display: none;
}
.page_toolbar__responsive_mode label {
--size: 1.5rem;
cursor: pointer;
background-image: url("../images/icon-desktop.svg");
background-repeat: no-repeat;
background-size: calc(var(--size) - 0.15rem);
background-position: center;
font-size: 1px;
color: rgba(0, 0, 0, 0);
line-height: 1;
display: block;
width: var(--size);
height: var(--size);
border-radius: 0.25rem;
}
.page_toolbar__responsive_mode label[for=responsive_mode__tablet] {
background-image: url("../images/icon-tablet.svg");
}
.page_toolbar__responsive_mode label[for=responsive_mode__mobile] {
background-image: url("../images/icon-mobile.svg");
}
.page_toolbar__responsive_mode input[type=radio]:checked + label {
background-color: #CBD5E0;
}
#preview_frame {
display: block;
margin-right: auto;
margin-left: auto;
border: 1px solid #E2E8F0;
transition: max-width 0.3s ease-in-out, width 0.3s ease-in-out;
}
#preview_frame.breakpoint {
width: 100%;
max-width: 1920px;
}
#preview_frame.breakpoint--mobile {
max-width: 375px;
}
#preview_frame.breakpoint--tablet {
max-width: 768px;
}
/*# sourceMappingURL=page--main.css.map */
layouts/styles/page--main.css.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["page--main.scss","_page--main--responsive-mode.scss","_page--breakpoints.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EAEA;;;AAGF;EACE;EACA;EACA;;;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;;;ACxDN;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAIJ;EACE;;;AClCJ;EACE;EACA;EACA;EAEA;EAEA;;AAEA;EACE;EACA;;AAGA;EACE;;AAGF;EACE","file":"page--main.css"}
layouts/styles/page--main.scss
+66
View File
@@ -0,0 +1,66 @@
body {
margin: 0;
font-size: 1rem;
//overflow: none;
background-color: #F7FAFC;
}
iframe {
margin-top: 30px;
height: calc(100% - 54px - 32px);
background-color: white;
}
.page_toolbar {
--gap: 2.5rem;
font-size: 14px;
font-family: Arial, sans-serif;
background-color: #EDF2F7;
padding: 1em;
display: flex;
justify-content: center;
gap: var(--gap);
align-items: center;
//margin-bottom: 2em;
> 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;
}
}
&__data_options {
@media (max-width: 1024px) {
display: block;
}
}
@import "page--main--responsive-mode";
}
@import "page--breakpoints";
layouts/styles/page--view.css
+19
View File
@@ -0,0 +1,19 @@
body {
margin: 0;
}
main {
max-width: 1920px;
margin-left: auto;
margin-right: auto;
}
.container {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
}
/*# sourceMappingURL=page--view.css.map */
layouts/styles/page--view.css.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["page--view.scss"],"names":[],"mappings":"AAAA;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA","file":"page--view.css"}
layouts/styles/page--view.scss
+17
View File
@@ -0,0 +1,17 @@
body {
margin: 0;
}
main {
max-width: 1920px;
margin-left: auto;
margin-right: auto;
}
.container {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
}