Docker/documize
Docker/documize
1
0
Fork 0
mirror of https://github.com/documize/community.git synced 2025-08-02 20:15:26 +02:00
Code Releases Activity

Move Add Section wizard to new UI framework

Browse source
This commit is contained in:
Harvey Kandola 2018-12-21 12:49:55 +00:00
parent 60d2ef57bb
commit 60f8cb7b5b
5 changed files with 102 additions and 122 deletions
Download patch file Download diff file Expand all files Collapse all files

28
gui/app/styles/core/bootstrap.scss vendored
View file

@ -93,9 +93,6 @@ $link-hover-decoration: none;
// Optional
@import "node_modules/bootstrap/scss/reboot";
// @import "node_modules/bootstrap/scss/grid";
// @import "node_modules/bootstrap/scss/buttons";
// @import "node_modules/bootstrap/scss/button-group";
@import "node_modules/bootstrap/scss/forms";
@import "node_modules/bootstrap/scss/custom-forms";
@import "node_modules/bootstrap/scss/input-group";
@ -107,6 +104,19 @@ $link-hover-decoration: none;
.modal-80 {
max-width: 80% !important;
}
.modal-70 {
max-width: 70% !important;
}
.modal-60 {
max-width: 60% !important;
}
.modal-50 {
max-width: 50% !important;
}
.modal-backdrop {
z-index: 1041;
}
body.modal-open {
padding-right: 0 !important;
@ -130,15 +140,3 @@ body.modal-open {
}
}
.btn {
text-transform: uppercase;
font-weight: 600;
}
// Bootstrap override that removes gutter space on smaller screens
// @media (max-width: 1200px) {
// .container {
// width: 100%;
// max-width: none;
// }
// }

125
gui/app/styles/core/view/document/add-section.scss
View file

@ -1,38 +1,23 @@
// Mobile first design
.new-section-wizard {
margin: 0;
padding: 0;
.new-section-caption {
margin: 20px 0 10px 0;
color: $theme-500;
font-size: 1.4rem;
font-weight: bold;
}
.new-section-empty {
font-size: 1.2rem;
color: map-get($gray-shades, 600);
}
.preset-list {
margin: 0;
.options {
margin: 10px;
padding: 0;
> .item {
@include border-radius(3px);
list-style: none;
> .preset-option {
cursor: pointer;
display: block;
margin: 0 20px 20px 0;
padding: 12px 0 0 20px;
height: 60px;
border: 1px solid map-get($gray-shades, 300);
background-color: map-get($gray-shades, 100);
&:hover {
border-color: $theme-500;
background-color: $theme-100;
}
white-space: nowrap;
padding: 0.375rem 0.75rem;
margin: 10px;
background-color: map-get($yellow-shades, 300);
border: 1px solid map-get($yellow-shades, 400);
@extend .no-select;
@include border-radius(2px);
@include button-shadow-light();
.icon {
text-align: center;
@ -48,56 +33,60 @@
}
}
> .title {
> .name {
display: inline-block;
font-size: 1.1rem;
font-weight: 500;
color: $color-black-light-1;
color: map-get($yellow-shades, 900);
letter-spacing: 0.5px;
margin-top: 6px;
}
&:hover {
background-color: map-get($yellow-shades, 400);
}
}
> .block-option {
cursor: pointer;
display: block;
white-space: nowrap;
padding: 0.375rem 0.75rem;
margin: 10px;
background-color: map-get($yellow-shades, 200);
border: 1px solid map-get($yellow-shades, 300);
@extend .no-select;
@include border-radius(2px);
@include button-shadow-light();
> .name {
font-size: 1.1rem;
font-weight: 500;
color: map-get($yellow-shades, 800);
letter-spacing: 0.5px;
@extend .text-truncate;
}
> .desc {
color: map-get($yellow-shades, 700);
font-size: 0.9rem;
font-weight: 300;
@extend .text-truncate;
}
&:hover {
background-color: map-get($yellow-shades, 300);
}
}
}
.block-list {
margin: 0;
padding: 0;
> .item {
@include border-radius(3px);
list-style: none;
cursor: pointer;
display: block;
margin: 0 20px 20px 0;
padding: 12px 20px;
width: 100%;
position: relative;
border: 1px solid map-get($gray-shades, 300);
background-color: map-get($gray-shades, 100);
&:hover {
border-color: $theme-500;
background-color: $theme-100;
}
> .actions {
position: absolute;
top: 10px;
right: 8px;
}
> .details {
> .title {
font-size: 1.1rem;
font-weight: 500;
color: $color-black-light-1;
letter-spacing: 0.5px;
}
> .desc {
color: $color-black-light-1;
font-size: 1rem;
}
// Desktop sizing
@media (min-width: $display-break-2) {
.options {
> .preset-option,
> .block-option {
display: inline-block;
width: 300px;
}
}
}