Skip to content

Commit ef55737

Browse files
givanzgivanz
committed
Hover state, inline css switch, removed adjustListsHeight(), enabled drag and drop for sections #371 #164 
1 parent 469a3c4 commit ef55737

File tree

5 files changed

+297
-164
lines changed

5 files changed

+297
-164
lines changed

‎css/editor.css

+111-70
Original file line numberDiff line numberDiff line change
@@ -17937,7 +17937,6 @@ body {
1793717937
top: 35px;
1793817938
z-index: 10; }
1793917939
#vvveb-builder #left-panel {
17940-
float: left;
1794117940
border-right-width: 1px;
1794217941
/*
1794317942
box-shadow: 1px 0px 2px rgba(var(--bs-body-color-rgb),.1);
@@ -17953,7 +17952,14 @@ body {
1795317952
width: calc(var(--builder-left-panel-width));
1795417953
height: 100%;
1795517954
max-height: 100%; }
17955+
#vvveb-builder #left-panel > div {
17956+
height: 100%;
17957+
display: flex;
17958+
flex-direction: column;
17959+
flex-wrap: nowrap; }
1795617960
#vvveb-builder #left-panel #filemanager {
17961+
display: flex;
17962+
flex-direction: column;
1795717963
width: 30vw;
1795817964
width: calc( var(--builder-left-panel-width));
1795917965
border-bottom: 1px solid var(--bs-border-color); }
@@ -17988,7 +17994,8 @@ body {
1798817994
#vvveb-builder #left-panel .components-list, #vvveb-builder #left-panel .blocks-list, #vvveb-builder #left-panel .component-properties, #vvveb-builder #left-panel .sections-list {
1798917995
width: var(--builder-left-panel-width); }
1799017996
#vvveb-builder #left-panel .component-properties {
17991-
width: auto; }
17997+
width: auto;
17998+
height: calc(100% - 85px); }
1799217999
#vvveb-builder #right-panel {
1799318000
float: right;
1799418001
right: 0px;
@@ -18029,8 +18036,8 @@ body {
1802918036
#vvveb-builder #top-panel .btn-group .btn.btn-light i {
1803018037
font-size: 1.2rem; }
1803118038
#vvveb-builder #top-panel .btn-group .btn.btn-primary {
18032-
padding: 0.2rem 0.8rem;
18033-
margin-top: 0.1rem;
18039+
padding: 0.1rem 0.5rem;
18040+
margin-top: 0.25rem;
1803418041
margin-bottom: 0.1rem; }
1803518042
#vvveb-builder #top-panel .btn-group .btn.btn-primary i {
1803618043
font-size: 1rem;
@@ -18078,20 +18085,25 @@ body {
1807818085
#vvveb-builder.bottom-panel-expand #canvas {
1807918086
height: 50%; }
1808018087
#vvveb-builder .drag-elements {
18081-
padding-top: 0rem; }
18082-
#vvveb-builder .drag-elements > .header .nav {
18083-
background: rgba(var(--bs-secondary-color-rgb), 0.03); }
18088+
flex: 1 1;
18089+
overflow: hidden;
18090+
padding-top: 0rem;
18091+
height: 100%; }
18092+
#vvveb-builder .drag-elements > .header {
18093+
height: 100%;
18094+
display: flex;
18095+
flex-direction: column; }
18096+
#vvveb-builder .drag-elements > .header .nav {
18097+
background: rgba(var(--bs-secondary-color-rgb), 0.03); }
1808418098
#vvveb-builder .drag-elements .nav-item .nav-link {
1808518099
text-align: center;
1808618100
border-top-color: var(--bs-body-bg);
1808718101
border-radius: 0px;
1808818102
min-width: 4.5rem;
1808918103
--bs-nav-link-color:var(--bs-secondary-color);
1809018104
line-height: 1.4; }
18091-
#vvveb-builder .drag-elements .nav-item .nav-link div {
18092-
margin-top: .2rem; }
1809318105
#vvveb-builder .drag-elements .nav-item .nav-link i {
18094-
font-size: 1.2rem;
18106+
font-size: 1.1rem;
1809518107
vertical-align: bottom; }
1809618108
#vvveb-builder .drag-elements .nav-item .nav-link small, #vvveb-builder .drag-elements .nav-item .nav-link .small {
1809718109
font-size: 0.8rem; }
@@ -18113,7 +18125,7 @@ body {
1811318125
border: none;
1811418126
background: none;
1811518127
position: absolute;
18116-
top: 0.5rem;
18128+
top: 0.3rem;
1811718129
right: 12px;
1811818130
opacity: 0.5; }
1811918131
#vvveb-builder .search .clear-backspace:hover {
@@ -18128,9 +18140,9 @@ body {
1812818140
#vvveb-builder .search .expand {
1812918141
position: absolute;
1813018142
top: 4px;
18131-
right: 3px; }
18143+
right: 5px; }
1813218144
#vvveb-builder .search .expand button {
18133-
padding: 0.25rem;
18145+
padding: 0.1rem 0.25rem;
1813418146
background: transparent;
1813518147
border: none;
1813618148
color: var(--bs-body-color); }
@@ -18152,7 +18164,6 @@ body {
1815218164
width: auto;
1815318165
height: auto;
1815418166
padding: 0px;
18155-
height: 300px;
1815618167
margin: 0; }
1815718168
#vvveb-builder #add-section-box .components-list ol, #vvveb-builder #add-section-box .blocks-list ol, #vvveb-builder #add-section-box .component-properties ol, #vvveb-builder #add-section-box .sections-list ol {
1815818169
padding: 0rem 0rem 0rem 1rem;
@@ -18219,7 +18230,7 @@ body {
1821918230
box-shadow: 0px 1px 5px 2px rgba(var(--bs-link-color-rgb), 0.25);
1822018231
-webkit-box-shadow: 0px 1px 5px 2px rgba(var(--bs-link-color-rgb), 0.25); }
1822118232
#vvveb-builder #add-section-box .blocks-list ol li:hover:before, #vvveb-builder #add-section-box .sections-list ol li:hover:before {
18222-
opacity: 0.15; }
18233+
opacity: 0.1; }
1822318234
#vvveb-builder #add-section-box .blocks-list ol li:hover .name, #vvveb-builder #add-section-box .sections-list ol li:hover .name {
1822418235
visibility: visible; }
1822518236
#vvveb-builder #add-section-box .blocks-list ol li[data-section="Reusable"] .name, #vvveb-builder #add-section-box .sections-list ol li[data-section="Reusable"] .name {
@@ -18233,18 +18244,24 @@ body {
1823318244
-moz-user-select: none;
1823418245
-ms-user-select: none;
1823518246
user-select: none;
18236-
height: auto;
18237-
width: 100%;
18238-
overflow-y: auto; }
18247+
/*
18248+
height: auto;
18249+
width: 100%;
18250+
overflow-y: auto;
18251+
*/
18252+
display: flex;
18253+
flex-direction: column;
18254+
flex-wrap: wrap;
18255+
height: 100%; }
1823918256
#vvveb-builder .component-properties-sidepane > div {
18240-
position: absolute;
18241-
min-height: 950px;
18242-
height: 200%;
18243-
width: 100%; }
18257+
flex: 1 1;
18258+
height: 100%; }
1824418259
#vvveb-builder .component-properties {
1824518260
background: var(--bs-body-bg);
18246-
height: 95%;
18247-
height: calc(100% - 35px);
18261+
display: flex;
18262+
flex-direction: column;
18263+
height: 100%;
18264+
height: calc(100% - 45px);
1824818265
/*
1824918266
.form-control, .form-select
1825018267
{
@@ -18253,7 +18270,13 @@ body {
1825318270
#vvveb-builder .component-properties .tab-content {
1825418271
padding: 0.5rem 0;
1825518272
overflow-x: hidden;
18256-
overflow-y: auto; }
18273+
overflow-y: auto;
18274+
flex: 1 1; }
18275+
#vvveb-builder .component-properties .tab-content > .active {
18276+
display: flex;
18277+
flex-direction: column;
18278+
height: 100%;
18279+
margin-bottom: 2rem; }
1825718280
#vvveb-builder .component-properties .nav-tabs {
1825818281
background: rgba(var(--bs-secondary-color-rgb), 0.03); }
1825918282
#vvveb-builder .component-properties #right-panel {
@@ -18611,39 +18634,36 @@ body {
1861118634
#vvveb-builder #highlight-name .type {
1861218635
font-size: 10px;
1861318636
opacity: 0.7; }
18614-
#vvveb-builder #elements-tabs {
18637+
#vvveb-builder #elements-tabs .nav-item {
18638+
background: var(--bs-body-bg);
1861518639
overflow: hidden; }
18616-
#vvveb-builder #elements-tabs .nav-item {
18617-
background: var(--bs-body-bg); }
18618-
#vvveb-builder #elements-tabs a {
18619-
font-size: 1.4rem;
18620-
outline: none;
18621-
border: none;
18622-
padding: 0.3rem 0.2rem 0.4rem; }
18623-
#vvveb-builder #elements-tabs a i {
18624-
padding: 0.3rem 0rem;
18625-
font-size: 1.2rem;
18626-
border-radius: 3px;
18627-
display: block;
18628-
border: 1px solid transparent; }
18629-
#vvveb-builder #elements-tabs a:hover i {
18630-
border: 1px solid rgba(var(--bs-link-color-rgb), 0.2); }
18631-
#vvveb-builder #elements-tabs a.active {
18632-
border-top: none;
18633-
border-left: none;
18634-
border-right: none;
18635-
border-top-color: rgba(var(--bs-link-color-rgb), 0.7);
18636-
color: var(--bs-link-color);
18637-
box-shadow: none; }
18638-
#vvveb-builder #elements-tabs a.active i {
18639-
background: rgba(var(--bs-link-color-rgb), 0.03);
18640-
border: 1px solid rgba(var(--bs-link-color-rgb), 0.2);
18641-
color: var(--bs-link-hover-color); }
18640+
#vvveb-builder #elements-tabs a {
18641+
font-size: 1.4rem;
18642+
outline: none;
18643+
border: none;
18644+
padding: 0.3rem 0.2rem 0.4rem; }
18645+
#vvveb-builder #elements-tabs a i {
18646+
padding: 0.3rem 0rem;
18647+
font-size: 1.2rem;
18648+
border-radius: 3px;
18649+
display: block;
18650+
border: 1px solid transparent; }
18651+
#vvveb-builder #elements-tabs a:hover i {
18652+
border: 1px solid rgba(var(--bs-link-color-rgb), 0.2); }
18653+
#vvveb-builder #elements-tabs a.active {
18654+
border-top: none;
18655+
border-left: none;
18656+
border-right: none;
18657+
border-top-color: rgba(var(--bs-link-color-rgb), 0.7);
18658+
color: var(--bs-link-color);
18659+
box-shadow: none; }
18660+
#vvveb-builder #elements-tabs a.active i {
18661+
background: rgba(var(--bs-link-color-rgb), 0.03);
18662+
border: 1px solid rgba(var(--bs-link-color-rgb), 0.2);
18663+
color: var(--bs-link-hover-color); }
1864218664
#vvveb-builder .nav-tabs .nav-item:first-child .nav-link {
1864318665
border-left: none; }
1864418666
#vvveb-builder .nav-tabs .nav-link {
18645-
padding: 0.8rem 0 0.5rem;
18646-
padding: 0.5rem 0 0.5rem;
1864718667
text-align: center;
1864818668
--bs-nav-link-color:var(--bs-secondary-color); }
1864918669
#vvveb-builder .nav-tabs .nav-link i {
@@ -18654,7 +18674,6 @@ body {
1865418674
background-color: var(--bs-body-bg);
1865518675
border-radius: 0px;
1865618676
background: linear-gradient(0deg, var(--bs-body-bg) 70%, rgba(var(--bs-link-color-rgb), 0.03) 100%);
18657-
box-shadow: 0px -5px 5px 5px rgba(var(--bs-link-color-rgb), 0.05);
1865818677
border-top: 1px solid rgba(var(--bs-link-color-rgb), 0.7); }
1865918678
#vvveb-builder .nav-fill .nav-link {
1866018679
padding-left: 0rem;
@@ -18718,12 +18737,17 @@ li[data-type] {
1871818737
-ms-user-select: none;
1871918738
user-select: none;
1872018739
width: 100%;
18721-
overflow: hidden;
18722-
width: 100%; }
18740+
height: 100%;
18741+
display: flex;
18742+
flex-direction: column;
18743+
overflow: hidden; }
1872318744
.drag-elements-sidepane > div {
18724-
overflow: hidden; }
18745+
overflow: hidden;
18746+
margin-bottom: 5rem; }
1872518747
.drag-elements-sidepane > div:hover {
1872618748
overflow-y: auto; }
18749+
.drag-elements-sidepane .block-preview, .drag-elements-sidepane .style-preview {
18750+
margin: 0; }
1872718751
.drag-elements-sidepane ul {
1872818752
z-index: 1;
1872918753
margin: 0;
@@ -18921,7 +18945,7 @@ li[data-type] {
1892118945
box-shadow: 0px 1px 5px 2px rgba(var(--bs-link-color-rgb), 0.25);
1892218946
-webkit-box-shadow: 0px 1px 5px 2px rgba(var(--bs-link-color-rgb), 0.25); }
1892318947
.blocks .drag-elements-sidepane li[data-type]:hover:before, .sections .drag-elements-sidepane li[data-type]:hover:before {
18924-
opacity: 0.15; }
18948+
opacity: 0.1; }
1892518949
.blocks .drag-elements-sidepane li[data-type]:hover .name, .sections .drag-elements-sidepane li[data-type]:hover .name {
1892618950
visibility: visible; }
1892718951
.blocks .drag-elements-sidepane li[data-type][data-section="Reusable"] .name, .sections .drag-elements-sidepane li[data-type][data-section="Reusable"] .name {
@@ -18942,6 +18966,11 @@ li[data-type] {
1894218966
.blocks .drag-elements-sidepane li[data-type] .name, .sections .drag-elements-sidepane li[data-type] .name {
1894318967
visibility: hidden; }
1894418968

18969+
.blocks .drag-elements-sidepane li[data-type] {
18970+
width: 45%;
18971+
box-shadow: 0px 1px 4px 0px rgba(var(--bs-body-color-rgb), 0.05);
18972+
-webkit-box-shadow: 0px 1px 4px 0px rgba(var(--bs-body-color-rgb), 0.05); }
18973+
1894518974
.components .drag-elements-sidepane li[data-type],
1894618975
#add-section-box li[data-type] {
1894718976
width: var(--builder-component-list-element-width);
@@ -19141,8 +19170,10 @@ input[type="number"]:focus {
1914119170
background-position: right .5rem center;
1914219171
background-size: 10px 8px; }
1914319172

19173+
.input-group.css-unit input[type="number"] {
19174+
flex-grow: 5; }
19175+
1914419176
.input-group.css-unit .form-select.small-arrow {
19145-
max-width: 100px;
1914619177
padding-left: 0.5rem;
1914719178
padding-right: 1.2em; }
1914819179

@@ -19452,9 +19483,14 @@ input[type="color"] {
1945219483
.input-html-list-select .elements li {
1945319484
cursor: pointer; }
1945419485

19455-
.tab-content > .active {
19456-
overflow-y: auto;
19457-
overflow-x: hidden; }
19486+
.tab-content {
19487+
height: 100%;
19488+
display: flex;
19489+
flex-direction: column; }
19490+
.tab-content > .active {
19491+
display: flex;
19492+
flex-direction: column;
19493+
height: 100%; }
1945819494

1945919495
img.preview {
1946019496
max-width: 100%;
@@ -19510,11 +19546,16 @@ img.preview {
1951019546
.hint:hover:before {
1951119547
transform: translateY(-8px); }
1951219548

19549+
/*
1951319550
.btn-light {
19514-
--bs-btn-bg:transparent;
19515-
border-color: transparent;
19516-
color: var(--bs-body-text); }
19517-
19551+
--bs-btn-bg:transparent;
19552+
border-color:transparent;
19553+
color:var(--bs-body-bg);
19554+
&:hover {
19555+
//background-color:var(--bs-border-color);
19556+
}
19557+
}
19558+
*/
1951819559
.btn-outline-primary {
1951919560
--bs-btn-color: var(--bs-link-color); }
1952019561

@@ -19665,10 +19706,10 @@ body > section, body > footer, body > header {
1966519706
display: none; }
1966619707

1966719708
.percent::after {
19668-
font-size: 14px;
19709+
font-size: 12px;
1966919710
position: absolute;
19670-
top: 0.4rem;
19671-
right: 0.8em;
19711+
top: 0.5rem;
19712+
right: 0.9em;
1967219713
transition: all .05s ease-in-out;
1967319714
content: '%'; }
1967419715

‎demo/landing

Submodule landing updated 242 files

0 commit comments

Comments
 (0)