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

Added options to control different ranges of breakpoints.

Browse Source
This commit is contained in:
Roman Axelrod
2022-08-11 10:51:56 +03:00
parent 9173efe9c9
commit 28ecfa281c
26 changed files with 18323 additions and 11019 deletions
Download Patch File Download Diff File Expand all files Collapse all files
layouts/styles/_page--breakpoints.scss
+14 -12
View File
@@ -3,22 +3,24 @@
margin-right: auto;
margin-left: auto;
--top_panel_height: 53.5px;
--top_spacing: 0px;
--breakpoint_top_spacing: 30px;
margin-top: var(--top_spacing);
height: calc(100% - var(--top_panel_height) - var(--top_spacing));
background-color: white;
border: 1px solid #E2E8F0;
transition: max-width .3s ease-in-out, width .3s ease-in-out;
transition: max-width .3s ease-in-out, width .3s ease-in-out, margin-top .3s ease-in-out;
&.has-breakpoint {
--breakpoint: 100%;
&.breakpoint {
width: 100%;
max-width: 1920px;
//max-width: 100%;
&--mobile {
max-width: 375px;
}
&--tablet {
max-width: 768px;
}
max-width: var(--breakpoint);
box-sizing: border-box;
}
}
layouts/styles/_page--main--responsive-mode.scss
-38
View File
@@ -1,38 +0,0 @@
&__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
+11 -46
View File
@@ -4,12 +4,6 @@ body {
background-color: #F7FAFC;
}
iframe {
margin-top: 30px;
height: calc(100% - 54px - 32px);
background-color: white;
}
.page_toolbar {
--gap: 2.5rem;
font-size: 14px;
@@ -52,54 +46,25 @@ iframe {
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;
--top_panel_height: 53.5px;
--top_spacing: 0px;
--breakpoint_top_spacing: 30px;
margin-top: var(--top_spacing);
height: calc(100% - var(--top_panel_height) - var(--top_spacing));
background-color: white;
border: 1px solid #E2E8F0;
transition: max-width 0.3s ease-in-out, width 0.3s ease-in-out;
transition: max-width 0.3s ease-in-out, width 0.3s ease-in-out, margin-top 0.3s ease-in-out;
}
#preview_frame.breakpoint {
#preview_frame.has-breakpoint {
--breakpoint: 100%;
width: 100%;
max-width: 1920px;
}
#preview_frame.breakpoint--mobile {
max-width: 375px;
}
#preview_frame.breakpoint--tablet {
max-width: 768px;
max-width: var(--breakpoint);
box-sizing: border-box;
}
/*# sourceMappingURL=page--main.css.map */
layouts/styles/page--main.css.map
+1 -1
View File
@@ -1 +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"}
{"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"}
layouts/styles/page--main.scss
-7
View File
@@ -5,12 +5,6 @@ body {
background-color: #F7FAFC;
}
iframe {
margin-top: 30px;
height: calc(100% - 54px - 32px);
background-color: white;
}
.page_toolbar {
--gap: 2.5rem;
font-size: 14px;
@@ -59,7 +53,6 @@ iframe {
}
}
@import "page--main--responsive-mode";
}
@import "page--breakpoints";