mirror of
https://github.com/documize/community.git
synced 2025-08-05 05:25:27 +02:00
[WIP] using new components
This commit is contained in:
parent
b31ab712c1
commit
ec5d21be4a
23 changed files with 439 additions and 224 deletions
|
@ -14,7 +14,7 @@
|
|||
@import "base.scss";
|
||||
@import "bootstrap.scss";
|
||||
@import "widget/widget.scss";
|
||||
@import "view/layout-sidebar.scss";
|
||||
@import "view/layout.scss";
|
||||
@import "view/page-search.scss";
|
||||
@import "view/page-profile.scss";
|
||||
@import "view/page-customize.scss";
|
||||
|
@ -24,6 +24,9 @@
|
|||
@import "view/folder/all.scss";
|
||||
@import "view/document/all.scss";
|
||||
@import "view/common.scss";
|
||||
|
||||
@import "view/views.scss";
|
||||
|
||||
@import "vendor.scss";
|
||||
@import "responsive.scss";
|
||||
@import "print.scss";
|
||||
|
|
21
gui/app/styles/bootstrap.scss
vendored
21
gui/app/styles/bootstrap.scss
vendored
|
@ -14,6 +14,9 @@
|
|||
// Variable overrides
|
||||
//
|
||||
|
||||
// font
|
||||
// $font-family-sans-serif: "Helvetica", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
|
||||
// colors
|
||||
$blue: $color-primary;
|
||||
$red: $color-red;
|
||||
|
@ -36,24 +39,21 @@ $modal-backdrop-opacity: 0.7;
|
|||
$modal-header-border-color: $color-white;
|
||||
$modal-footer-border-color: $color-white;
|
||||
.modal-header {
|
||||
background-color: $color-gray;
|
||||
background-color: $color-primary;
|
||||
color: $color-off-white;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
// rounded corners
|
||||
// $border-radius: 0rem;
|
||||
// $border-radius-lg: 0rem;
|
||||
// $border-radius-sm: 0rem;
|
||||
$border-radius: .125rem;
|
||||
$border-radius-lg: .15rem;
|
||||
$border-radius-sm: .1rem;
|
||||
|
||||
// dropdown
|
||||
$dropdown-link-color: $color-off-black;
|
||||
$dropdown-link-hover-color: $color-primary;
|
||||
$dropdown-link-hover-color: $color-link;
|
||||
$dropdown-link-hover-bg: $color-white;
|
||||
$dropdown-link-active-color: $color-primary;
|
||||
$dropdown-link-active-color: $color-link;
|
||||
$dropdown-link-active-bg: $color-white;
|
||||
|
||||
// form
|
||||
|
@ -65,10 +65,13 @@ $input-focus-color: $color-off-black;
|
|||
$input-placeholder-color: $color-gray;
|
||||
$input-focus-border-color: $color-stroke;
|
||||
$input-btn-focus-width: .2rem;
|
||||
$input-btn-focus-color: rgba($color-gray, .25);
|
||||
$input-btn-focus-color: rgba($color-primary, .25);
|
||||
|
||||
// font
|
||||
// $font-family-sans-serif: "Helvetica", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
// links
|
||||
$link-color: $color-link;
|
||||
$link-decoration: none;
|
||||
$link-hover-color: darken($link-color, 15%) !default;
|
||||
$link-hover-decoration: none;
|
||||
|
||||
|
||||
//
|
||||
|
|
|
@ -10,20 +10,22 @@
|
|||
// https://documize.com
|
||||
|
||||
// Theme colors
|
||||
$color-primary: #2667af;
|
||||
$color-link: #0092d3;
|
||||
$color-border: #f3f5f8;
|
||||
$color-primary: #351056;
|
||||
$color-primary-light: #F7F2FF;
|
||||
$color-link: #1b701e;
|
||||
|
||||
// Theme-neutral colors
|
||||
$color-off-white: #f5f5f5;
|
||||
$color-off-black: #111111;
|
||||
$color-black: #000000;
|
||||
$color-white: #ffffff;
|
||||
$color-off-black: #111111;
|
||||
$color-dark: #434343;
|
||||
$color-gray: #8b9096;
|
||||
|
||||
$color-red: #d04134;
|
||||
$color-green: #4caf50;
|
||||
$color-white: #ffffff;
|
||||
$color-off-white: #f5f5f5;
|
||||
|
||||
$color-red: #b1251b;
|
||||
$color-green: #1b701e;
|
||||
$color-blue: #2667af;
|
||||
$color-gray: #8e969e; //8b9096
|
||||
$color-goldy: #cc9933;
|
||||
|
||||
$color-table-border: #e1e1e1;
|
||||
|
@ -31,6 +33,8 @@ $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;
|
||||
|
@ -39,7 +43,7 @@ $color-symbol-box: #dce5e8;
|
|||
$color-symbol-icon: #a4b8be;
|
||||
$color-checkbox: #0092d3;
|
||||
|
||||
// gray sidebar
|
||||
// gray sidebar -- DEAD
|
||||
$color-sidebar: #f5f5f5;
|
||||
$color-sidebar-border: #e1e1e1;
|
||||
$color-sidebar-text: $color-black;
|
||||
|
@ -52,31 +56,6 @@ $color-sidebar-navigation: #f2faff;
|
|||
$color-sidebar-navigation-border: #dff0f9;
|
||||
$color-sidebar-toolbar: $color-sidebar-border;
|
||||
|
||||
// lightblue sidebar
|
||||
// $color-sidebar: #f2faff;
|
||||
// $color-sidebar-border: #dff0f9;
|
||||
// $color-sidebar-text: $color-black;
|
||||
// $color-sidebar-link: $color-link;
|
||||
// $color-nav-button: $color-sidebar;
|
||||
// $color-nav-button-text: #2667af;
|
||||
// $color-nav-button-border: #dff0f9;
|
||||
// $color-selected-item: $color-sidebar;
|
||||
// $color-sidebar-navigation: $color-gray;
|
||||
// $color-sidebar-toolbar: $color-sidebar-border;
|
||||
|
||||
// black sidebar
|
||||
// $color-sidebar: $color-off-black;
|
||||
// $color-sidebar-border: $color-black;
|
||||
// $color-sidebar-text: $color-white;
|
||||
// $color-sidebar-link: orange;
|
||||
// $color-nav-button: orange;
|
||||
// $color-nav-button-text: $color-off-black;
|
||||
// $color-nav-button-border: $color-black;
|
||||
// $color-selected-item: orange;
|
||||
// $color-sidebar-navigation: orange;
|
||||
// $color-sidebar-navigation-border: orange;
|
||||
// $color-sidebar-toolbar: orange;
|
||||
|
||||
// Color utility classes for direct usage in HTML
|
||||
.color-white {
|
||||
color: $color-white !important;
|
||||
|
|
|
@ -33,3 +33,13 @@
|
|||
box-shadow: 0 0 0 0.75pt $color-stroke,0 0 3pt 0.75pt $color-stroke;
|
||||
background-color: $color-white;
|
||||
}
|
||||
|
||||
@mixin card() {
|
||||
background-color: $color-card;
|
||||
box-shadow: 1px 1px 3px 0px rgba(211,211,211,1);
|
||||
|
||||
&:hover {
|
||||
background-color: darken($color-card, 3%);
|
||||
color: $color-link;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,4 +1,3 @@
|
|||
@import "document.scss";
|
||||
@import "folder.scss";
|
||||
@import "wizard.scss";
|
||||
@import "settings.scss";
|
||||
|
|
|
@ -1,45 +0,0 @@
|
|||
.folders-list {
|
||||
> .section {
|
||||
margin: 30px 0 10px;
|
||||
|
||||
> .heading {
|
||||
font-size: 0.9rem;
|
||||
font-weight: bold;
|
||||
color: $color-gray;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
> .message {
|
||||
font-size: 0.8rem;
|
||||
color: $color-gray;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
> .list {
|
||||
padding: 0;
|
||||
margin: 5px 0 0 15px;
|
||||
|
||||
> .link {
|
||||
font-size: 1rem;
|
||||
color: $color-sidebar-text;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: $color-sidebar-link;
|
||||
}
|
||||
|
||||
> .item {
|
||||
list-style-type: none;
|
||||
list-style: none;
|
||||
margin: 0 0 5px;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> .selected {
|
||||
color: $color-sidebar-link;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
|
@ -1,3 +1,35 @@
|
|||
.nav-bar {
|
||||
background-color: $color-primary;
|
||||
padding: 10px 20px;
|
||||
color: $color-white;
|
||||
font-size: 1rem;
|
||||
|
||||
.nav-link, .nav-link:visited {
|
||||
color: $color-white;
|
||||
|
||||
&:hover {
|
||||
color: darken($color-white, 15%);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 1.4rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.nav-msg {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// pre-nov17 UX
|
||||
$sidebar-width: 400px;
|
||||
|
||||
#wrapper {
|
38
gui/app/styles/view/spaces.scss
Normal file
38
gui/app/styles/view/spaces.scss
Normal file
|
@ -0,0 +1,38 @@
|
|||
.view-spaces {
|
||||
> .heading {
|
||||
font-size: 1.3rem;
|
||||
font-weight: bold;
|
||||
color: $color-dark;
|
||||
text-transform: uppercase;
|
||||
|
||||
> .counter {
|
||||
font-size: 0.9rem;
|
||||
font-weight: normal;
|
||||
color: $color-gray;
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
> .list {
|
||||
margin: 30px 0;
|
||||
padding: 0;
|
||||
|
||||
> a {
|
||||
color: $color-black;
|
||||
|
||||
> .item {
|
||||
@include card();
|
||||
@include ease-in();
|
||||
list-style-type: none;
|
||||
float: left;
|
||||
margin: 0 20px 20px 0;
|
||||
padding: 10px;
|
||||
width: 250px;
|
||||
height: 100px;
|
||||
font-size: 1.1rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
1
gui/app/styles/view/views.scss
Normal file
1
gui/app/styles/view/views.scss
Normal file
|
@ -0,0 +1 @@
|
|||
@import "spaces.scss";
|
|
@ -320,3 +320,46 @@
|
|||
display: inline-block;
|
||||
@extend .no-select;
|
||||
}
|
||||
|
||||
.button-icon-white {
|
||||
display: inline-block;
|
||||
cursor: default;
|
||||
@include ease-in();
|
||||
|
||||
> i {
|
||||
color: $color-white;
|
||||
font-size: 2rem;
|
||||
@include ease-in();
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> i {
|
||||
color: darken($color-white, 15%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button-icon-gap {
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.button-gravatar-white {
|
||||
display: inline-block;
|
||||
cursor: default;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
line-height: 34px;
|
||||
padding: 0;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
color: $color-primary;
|
||||
background-color: $color-white;
|
||||
@include ease-in();
|
||||
|
||||
&:hover {
|
||||
background-color: darken($color-white, 15%);
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue