Docker/documize
Docker/documize
1
0
Fork 0
mirror of https://github.com/documize/community.git synced 2025-07-25 08:09:43 +02:00
Code Releases Activity

[WIP] theme selector

Browse source
This commit is contained in:
Harvey Kandola 2018-11-24 16:13:21 +00:00
parent a7e52809dc
commit 11e164496b
74 changed files with 363 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

26
gui/app/styles/core/widget/widget-avatar.scss Normal file
View file

@ -0,0 +1,26 @@
.avatar {
color: $color-white;
background-color: $color-gray;
@include border-radius(20px);
@include ease-in();
padding: 10px 0 0 0;
letter-spacing: 1px;
text-align: center;
height: 35px;
width: 35px;
}
.avatar-large {
color: $color-white;
background-color: $color-gray;
@include border-radius(100px);
@include ease-in();
height: 100px;
width: 100px;
font-size: 30px;
padding: 28px;
letter-spacing: 1px;
text-align: center;
margin: 0 auto;
}

219
gui/app/styles/core/widget/widget-button.scss Normal file
View file

@ -0,0 +1,219 @@
// Copyright (c) 2015 Documize Inc.
.button-gap {
width: 5px;
margin: 0;
padding: 0;
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-gray {
display: inline-block;
cursor: default;
@include ease-in();
> i {
color: $color-gray-light;
font-size: 2rem;
@include ease-in();
}
&:hover {
> i {
color: darken($color-gray-light, 15%);
}
}
}
.button-icon-gold {
display: inline-block;
cursor: default;
@include ease-in();
> i {
color: $color-goldy;
font-size: 2rem;
@include ease-in();
}
&:hover {
> i {
color: darken($color-goldy, 5%);
}
}
}
.button-icon-danger {
display: inline-block;
cursor: default;
@include ease-in();
> i {
color: $color-gray-light;
font-size: 2rem;
@include ease-in();
}
&:hover {
> i {
color: $color-red;
}
}
}
.button-icon-blue {
display: inline-block;
cursor: default;
@include ease-in();
> i {
color: $color-blue;
font-size: 2rem;
@include ease-in();
}
&:hover {
> i {
color: darken($color-blue, 5%);
}
}
}
.button-icon-red {
display: inline-block;
cursor: default;
@include ease-in();
> i {
color: $color-red;
font-size: 2rem;
@include ease-in();
}
&:hover {
> i {
color: darken($color-red, 5%);
}
}
}
.button-icon-green {
display: inline-block;
cursor: default;
@include ease-in();
> i {
color: $color-green;
font-size: 2rem;
@include ease-in();
}
&:hover {
> i {
color: darken($color-green, 5%);
}
}
}
.button-icon-black {
display: inline-block;
cursor: default;
@include ease-in();
> i {
color: $color-off-black;
font-size: 2rem;
@include ease-in();
}
&:hover {
> i {
color: darken($color-off-black, 5%);
}
}
}
.button-icon-theme {
display: inline-block;
cursor: default;
@include ease-in();
> i {
color: $color-primary;
font-size: 2rem;
@include ease-in();
}
&:hover {
> i {
color: darken($color-primary, 5%);
}
}
}
.button-icon-theme-light {
display: inline-block;
cursor: default;
@include ease-in();
> i {
color: $color-primary-light;
font-size: 2rem;
@include ease-in();
}
&:hover {
> i {
color: darken($color-primary-light, 5%);
}
}
}
.button-icon-small {
> i {
font-size: 1.3rem;
}
}
.button-icon-gap {
display: inline-block;
margin-left: 5px;
}
.button-gravatar-white {
display: inline-block;
cursor: default;
position: relative;
// overflow: hidden; // kills update dots
width: 35px;
height: 35px;
line-height: 34px;
padding: 0;
border-radius: 50%;
text-align: center;
color: $color-primary;
font-weight: bold;
background-color: $color-white;
@include ease-in();
&:hover {
background-color: darken($color-white, 15%);
}
}

42
gui/app/styles/core/widget/widget-checkbox.scss Normal file
View file

@ -0,0 +1,42 @@
.ui-checkbox {
vertical-align: bottom;
cursor: pointer;
font-size: 1.1rem;
overflow: hidden;
white-space: nowrap;
margin: 0 0 5px 0;
> .material-icons {
font-size: 1.5rem;
color: $color-gray;
vertical-align: top;
}
> .selected {
color: $color-blue;
}
&:hover {
color: $color-blue;
}
> .text {
display: inline-block;
font-size: 1.1rem;
vertical-align: sub;
color: $color-off-black;
}
}
.ui-checkbox-selected {
color: $color-blue;
}
.widget-checkbox {
color: $color-blue;
cursor: pointer;
}
.checkbox-gray {
color: $color-gray !important;
}

107
gui/app/styles/core/widget/widget-list-picker.scss Normal file
View file

@ -0,0 +1,107 @@
.widget-list-picker {
margin: 10px 0;
> .options {
width: 100%;
margin: 0 auto;
padding: 0;
> .option {
@include border-radius(3px);
margin: 0 0 15px 0;
padding: 10px 15px;
color: $color-gray;
background-color: $color-off-white;
border: 1px solid $color-gray;
cursor: pointer;
position: relative;
list-style-type: none;
line-height: 26px;
&:hover {
> .text-header, > .text {
color: $color-off-black;
}
}
> .text-header {
@include ease-in();
color: $color-gray;
font-size: 1.3rem;
font-weight: 600;
margin-bottom: 5px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 80%;
}
> .text {
@include ease-in();
color: $color-gray;
font-size: 1rem;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 80%;
}
> .material-icons {
position: absolute;
top: 10px;
right: 10px;
color: $color-green;
font-weight: 700;
font-size: 1.3rem;
}
}
> .selected {
> .text-header, > .text {
color: $color-off-black;
}
background-color: $color-yellow !important;
border: 1px solid $color-goldy !important;
}
}
}
.widget-list-picker-horiz {
> .options {
> .option {
display: inline-block;
margin: 15px 15px 0 0;
padding: 10px 15px;
width: 30%;
@media only screen and (max-width: 1200px) {
display: block;
width: 100%;
}
}
}
}
.widget-list-choice {
text-align: left;
margin: 0;
padding: 0;
display: inline-block;
> li {
margin: 0 20px 0 0;
padding: 0;
display: inline-block;
font-size: 1.3rem;
font-weight: 700;
color: $color-gray;
cursor: pointer;
}
> .selected {
color: $color-green;
border-bottom: 1px solid $color-green;
}
}

25
gui/app/styles/core/widget/widget-notification.scss Normal file
View file

@ -0,0 +1,25 @@
.user-notification {
position: fixed;
display: none;
top: 20px;
right: 20px;
background-color: $color-off-black;
color: $color-white;
padding: 10px 15px;
text-align: left;
border-radius: 2px;
@extend .z-depth-1;
z-index: 999;
> .message {
margin: 3px 0;
padding: 0;
font-size: 0.9em;
}
}
.busy-indicator {
height: 30px;
width: 30px;
margin: 0 10px;
}

35
gui/app/styles/core/widget/widget-radio.scss Normal file
View file

@ -0,0 +1,35 @@
.ui-radio {
vertical-align: bottom;
cursor: pointer;
font-size: 1.1rem;
overflow: hidden;
white-space: nowrap;
margin: 0 0 5px 0;
> .material-icons {
font-size: 1.5rem;
color: $color-gray;
vertical-align: top;
margin-right: 5px;
}
> .selected {
color: $color-blue;
}
&:hover {
color: $color-blue;
}
> .text {
display: inline-block;
font-size: 1.1rem;
vertical-align: sub;
color: $color-off-black;
}
}
.ui-radio-selected {
color: $color-blue;
}

17
gui/app/styles/core/widget/widget-symbol.scss Normal file
View file

@ -0,0 +1,17 @@
.symbol {
display: inline-block;
border-radius: 2px;
height: 40px;
width: 40px;
padding: 0;
line-height: 0;
margin: 0;
text-align: center;
background-color: $color-symbol-box;
> .material-icons {
font-size: 22px;
margin-top: 20px;
color: $color-symbol-icon;
}
}

59
gui/app/styles/core/widget/widget-table.scss Normal file
View file

@ -0,0 +1,59 @@
.basic-table {
padding: 0;
margin: 0 0 25px 0;
width: 100%;
font-size: 1rem;
border: 1px solid $color-border;
border-radius: 2px;
border-collapse: collapse;
> tbody {
> tr {
> td {
vertical-align: top;
text-align: left;
padding: 10px;
}
}
}
> thead {
> tr {
background-color: $color-off-white;
> th {
vertical-align: top;
text-align: left;
font-weight: bold;
padding: 10px;
border-bottom: 1px solid $color-border;
}
}
}
.bordered {
border: 1px solid $color-border;
}
.border-top {
border-top: 1px solid $color-border;
}
.border-bottom {
border-bottom: 1px solid $color-border;
}
.action-link {
font-size: 0.8rem;
margin-left: 5px;
}
.no-width {
white-space: nowrap;
width: 1%;
}
}
.no-table-border {
border: none;
}

58
gui/app/styles/core/widget/widget-tabnav.scss Normal file
View file

@ -0,0 +1,58 @@
.tabnav-control {
padding: 0 !important;
margin: 0 !important;
font-size: 0;
> .tab {
@include ease-in();
@extend .text-truncate;
display: inline-block;
margin: 0;
padding: 5px 15px;
background-color: $color-white;
color: $color-primary;
border: 1px solid $color-border;
font-weight: 500;
font-size: 1.1rem;
text-align: center;
cursor: pointer;
line-height: 26px;
list-style-type: none;
margin-left: -4px; // remove whitespace inline block
margin-top: -1px; // ensure no double-border when tabs are stacked vertically on mobile device
&:first-of-type {
@include border-radius-left(3px);
}
&:last-of-type {
@include border-radius-right(3px);
}
&:hover {
background-color: $color-primary-light;
}
}
> .tab-vertical {
display: block;
margin-left: 0;
&:first-of-type {
@include border-radius-top(3px);
}
&:last-of-type {
@include border-radius-bottom(3px);
}
}
> .selected {
background-color: $color-primary-light;
font-weight: 700;
}
}
.tabnav-control-centered {
margin: 0 auto !important;
}

93
gui/app/styles/core/widget/widget.scss Normal file
View file

@ -0,0 +1,93 @@
// Copyright (c) 2015 Documize Inc.
// Material Design icons from https://design.google.com/icons/
.material-icons {
font-family: "Material Icons";
font-weight: normal;
font-style: normal;
font-size: 1.2rem;
display: inline-block;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: "liga";
}
.transition-shadow {
transition: box-shadow 0.25s;
}
.transition-all {
transition: all 0.25s;
}
.z-depth-0 {
box-shadow: none !important;
}
.z-depth-tiny {
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05), 0 1px 1px 0 rgba(0, 0, 0, 0.05);
}
.z-depth-half {
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.16), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.z-depth-1 {
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.z-depth-1-half {
/* used on hover states */
box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}
.z-depth-2 {
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.z-depth-3 {
box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
.z-depth-4 {
box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21);
}
.z-depth-5 {
box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22);
}
.drag-handle {
font-size: 1.5rem;
color: $color-gray-light;
cursor: pointer;
}
.drag-indicator-dropzone {
opacity: 1 !important;
border: 2px dotted $color-border;
}
.drag-indicator-chosen {
opacity: 1 !important;
background: $color-off-white;
}
.drag-indicator-dragged {
opacity: 1 !important;
@include card();
}
@import "widget-avatar";
@import "widget-button";
@import "widget-checkbox";
@import "widget-list-picker";
@import "widget-notification";
@import "widget-radio";
@import "widget-symbol";
@import "widget-table";
@import "widget-tabnav";