mirror of
https://github.com/documize/community.git
synced 2025-08-02 12:05:23 +02:00
[WIP ]space view
Document list renders as per design
This commit is contained in:
Harvey Kandola
parent
4bc08cbdee
commit
acc947c2ed
28 changed files with 518 additions and 553 deletions
|
|
@ -9,39 +9,49 @@
|
|||
//
|
||||
// https://documize.com
|
||||
|
||||
// Theme colors
|
||||
|
||||
// theme
|
||||
$color-primary: #290F3F; //#351056;
|
||||
$color-primary-light: #F7F2FF;
|
||||
$color-link: #1b701e;
|
||||
|
||||
// Theme-neutral colors
|
||||
// black/white/gray
|
||||
$color-black: #000000;
|
||||
$color-off-black: #111111;
|
||||
$color-dark: #434343;
|
||||
$color-gray: #8b9096;
|
||||
|
||||
$color-white: #ffffff;
|
||||
$color-off-white: #f5f5f5;
|
||||
|
||||
$color-dark: #434343;
|
||||
$color-gray: #8b9096;
|
||||
$color-border: #d3d3d3;
|
||||
|
||||
// colors
|
||||
$color-red: #b1251b;
|
||||
$color-green: #1b701e;
|
||||
$color-blue: #2667af;
|
||||
$color-goldy: #cc9933;
|
||||
|
||||
// widgets
|
||||
$color-checkbox: #2667af;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
$color-table-border: #e1e1e1;
|
||||
$color-table-header: #f5f5f5;
|
||||
$color-toolbar: #eeeeee;
|
||||
$color-wysiwyg: #3c3c3c;
|
||||
|
||||
$color-card: #F9F9F9;
|
||||
$color-border: #f3f5f8;
|
||||
$color-input: #5a5a5a;
|
||||
$color-stroke: #e1e1e1;
|
||||
$color-tooltip: #a1a1a1;
|
||||
$color-toast: #4c4c4c;
|
||||
$color-symbol-box: #dce5e8;
|
||||
$color-symbol-icon: #a4b8be;
|
||||
$color-checkbox: #0092d3;
|
||||
|
||||
// gray sidebar -- DEAD
|
||||
$color-sidebar: #f5f5f5;
|
||||
|
|
|
|||
|
|
@ -18,6 +18,18 @@
|
|||
border-radius: $radius;
|
||||
}
|
||||
|
||||
@mixin border-radius-left($radius)
|
||||
{
|
||||
border-top-left-radius: $radius;
|
||||
border-bottom-left-radius: $radius;
|
||||
}
|
||||
|
||||
@mixin border-radius-right($radius)
|
||||
{
|
||||
border-top-right-radius: $radius;
|
||||
border-bottom-right-radius: $radius;
|
||||
}
|
||||
|
||||
@mixin ease-in()
|
||||
{
|
||||
-webkit-transition: all 0.30s ease-in-out;
|
||||
|
|
|
|||
|
|
@ -1,121 +1,3 @@
|
|||
.space-heading {
|
||||
margin: 0 0 55px 0;
|
||||
|
||||
.space-name {
|
||||
font-size: 2rem;
|
||||
margin: 0 0 10px 0;
|
||||
font-weight: normal;
|
||||
// color: $color-primary;
|
||||
}
|
||||
|
||||
.space-summary {
|
||||
font-size: 1.2rem;
|
||||
color: $color-gray;
|
||||
margin: 0 0 45px;
|
||||
}
|
||||
}
|
||||
|
||||
.edit-space-heading {
|
||||
margin: 0 0 10px 0;
|
||||
|
||||
.edit-space-name {
|
||||
> input {
|
||||
font-size: 2rem;
|
||||
font-weight: normal;
|
||||
margin: 0 0 40px 0;
|
||||
color: $color-wysiwyg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.documents-list {
|
||||
margin-bottom: 50px;
|
||||
|
||||
> .caption {
|
||||
text-transform: uppercase;
|
||||
color: $color-gray;
|
||||
font-weight: bold;
|
||||
font-size: 1.0rem;
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
|
||||
.document-item {
|
||||
margin: 0 0 25px 0;
|
||||
padding: 25px 15px;
|
||||
position: relative;
|
||||
transition: 0.3s;
|
||||
@include content-container();
|
||||
|
||||
&:hover {
|
||||
> .link {
|
||||
> .title {
|
||||
color: $color-link;
|
||||
}
|
||||
|
||||
> .snippet {
|
||||
color: $color-gray;
|
||||
}
|
||||
}
|
||||
|
||||
> .checkbox {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
> .checkbox {
|
||||
position: absolute;
|
||||
display: none;
|
||||
top: 10px;
|
||||
right: 20px;
|
||||
cursor: pointer;
|
||||
|
||||
> .material-icons {
|
||||
width: 10px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: $color-checkbox;
|
||||
}
|
||||
}
|
||||
|
||||
.link {
|
||||
text-decoration: none;
|
||||
color: $color-off-black;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: $color-link;
|
||||
|
||||
> .title {
|
||||
color: $color-link;
|
||||
}
|
||||
|
||||
> .snippet {
|
||||
color: $color-link;
|
||||
}
|
||||
}
|
||||
|
||||
> .title {
|
||||
font-size: 18px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
> .snippet {
|
||||
color: $color-gray;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.selected-card {
|
||||
background-color: $color-selected-item !important;
|
||||
|
||||
> .checkbox {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.move-document-options {
|
||||
height: 200px;
|
||||
|
|
@ -140,38 +22,3 @@
|
|||
color: $color-link;
|
||||
}
|
||||
}
|
||||
|
||||
.space-filter {
|
||||
display: inline-block;
|
||||
margin: 0 30px 30px 0;
|
||||
|
||||
> .caption {
|
||||
text-transform: uppercase;
|
||||
color: $color-gray;
|
||||
font-weight: bold;
|
||||
font-size: 1.0rem;
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
|
||||
> .regular-button {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.category-filter {
|
||||
display: inline-block;
|
||||
margin: 0 0 30px 0;
|
||||
|
||||
> .regular-button {
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
> .caption {
|
||||
text-transform: uppercase;
|
||||
color: $color-gray;
|
||||
font-weight: bold;
|
||||
font-size: 1.0rem;
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
109
gui/app/styles/view/space.scss
Normal file
109
gui/app/styles/view/space.scss
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
.view-space {
|
||||
> .heading {
|
||||
height: 10px;
|
||||
|
||||
> .view-heading {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
color: $color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
> .filter-caption {
|
||||
color: $color-gray;
|
||||
font-size: 1.0rem;
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
|
||||
> .documents {
|
||||
margin: 60px 0;
|
||||
padding: 0;
|
||||
|
||||
> .document {
|
||||
@include card();
|
||||
@include ease-in();
|
||||
list-style-type: none;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
margin: 0 0 30px 0;
|
||||
width: 100%;
|
||||
// height: 150px;
|
||||
|
||||
&:hover {
|
||||
> .checkbox {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
> a {
|
||||
@include ease-in();
|
||||
display: block;
|
||||
position: relative;
|
||||
padding: 15px 20px;
|
||||
|
||||
> .title {
|
||||
color: $color-black;
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
> .snippet {
|
||||
color: $color-gray;
|
||||
font-size: 1rem;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $color-gray;
|
||||
|
||||
> .title {
|
||||
color: $color-link;
|
||||
}
|
||||
|
||||
> .snippet {
|
||||
color: $color-link;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .checkbox {
|
||||
position: absolute;
|
||||
display: none;
|
||||
top: 10px;
|
||||
right: 20px;
|
||||
cursor: pointer;
|
||||
|
||||
> .material-icons {
|
||||
width: 10px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: $color-checkbox;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .selected {
|
||||
background-color: $color-primary-light !important;
|
||||
|
||||
> .checkbox {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hashtags {
|
||||
> .hashtag {
|
||||
display: inline-block;
|
||||
margin: 5px 10px 0 5px;
|
||||
color: $color-gray;
|
||||
font-size: 0.875rem;
|
||||
font-style: italic;
|
||||
|
||||
&:hover {
|
||||
color: $color-link;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -11,6 +11,7 @@
|
|||
display: inline-block;
|
||||
margin-right: 30px;
|
||||
cursor: pointer;
|
||||
@include ease-in();
|
||||
|
||||
&:hover {
|
||||
color: $color-link;
|
||||
|
|
|
|||
|
|
@ -1 +1,2 @@
|
|||
@import "spaces.scss";
|
||||
@import "space.scss";
|
||||
|
|
|
|||
|
|
@ -313,6 +313,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Bootstrap 4 compatible
|
||||
//
|
||||
|
||||
.button-gap {
|
||||
width: 5px;
|
||||
margin: 0;
|
||||
|
|
|
|||
|
|
@ -256,3 +256,9 @@
|
|||
.checkbox-gray {
|
||||
color: $color-gray !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
//
|
||||
// Bootstrap 4 compatible
|
||||
//
|
||||
|
|
|
|||
35
gui/app/styles/widget/widget-tabnav.scss
Normal file
35
gui/app/styles/widget/widget-tabnav.scss
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
.tabnav-control {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
> .tab {
|
||||
@include ease-in();
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 5px 15px;
|
||||
background-color: $color-white;
|
||||
color: $color-primary;
|
||||
font-weight: bold;
|
||||
font-size: 1.1rem;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
border: 1px solid $color-border;
|
||||
margin: -1px 0 0 -5px; // handles border overlap when tabs wrap onto 2nd line
|
||||
|
||||
&:first-of-type {
|
||||
@include border-radius-left(3px);
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
@include border-radius-right(3px);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $color-primary-light;
|
||||
}
|
||||
}
|
||||
|
||||
> .selected {
|
||||
background-color: $color-primary-light;
|
||||
}
|
||||
}
|
||||
|
|
@ -76,4 +76,5 @@
|
|||
@import "widget-symbol";
|
||||
@import "widget-tab";
|
||||
@import "widget-table";
|
||||
@import "widget-tabnav";
|
||||
@import "widget-tooltip";
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue