mirror of
https://github.com/documize/community.git
synced 2025-08-05 13:35:25 +02:00
moved emberjs to gui folder
This commit is contained in:
Harvey Kandola
parent
6a18d18f91
commit
dc49dbbeff
999 changed files with 677 additions and 651 deletions
37
gui/app/styles/app.scss
Normal file
37
gui/app/styles/app.scss
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
// Copyright 2016 Documize Inc. <legal@documize.com>. All rights reserved.
|
||||
//
|
||||
// This software (Documize Community Edition) is licensed under
|
||||
// GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html
|
||||
//
|
||||
// You can operate outside the AGPL restrictions by purchasing
|
||||
// Documize Enterprise Edition and obtaining a commercial license
|
||||
// by contacting <sales@documize.com>.
|
||||
//
|
||||
// https://documize.com
|
||||
@import "color.scss";
|
||||
@import "font.scss";
|
||||
@import "mixins.scss";
|
||||
@import "base.scss";
|
||||
@import "widget/widget.scss";
|
||||
@import "view/layout-right-nav.scss";
|
||||
@import "view/layout-left-sidebar.scss";
|
||||
@import "view/page-search.scss";
|
||||
@import "view/page-profile.scss";
|
||||
@import "view/page-customize.scss";
|
||||
@import "view/page-auth.scss";
|
||||
@import "view/page-onboard.scss";
|
||||
@import "view/page-exceptions.scss";
|
||||
@import "view/folder/all.scss";
|
||||
@import "view/document/all.scss";
|
||||
@import "view/common.scss";
|
||||
@import "vendor.scss";
|
||||
@import "responsive.scss";
|
||||
@import "print.scss";
|
||||
@import "section/trello.scss";
|
||||
@import "section/gemini.scss";
|
||||
@import "section/github.scss";
|
||||
@import "section/markdown.scss";
|
||||
@import "section/table.scss";
|
||||
@import "section/code.scss";
|
||||
@import "section/papertrail.scss";
|
||||
@import "section/wysiwyg.scss";
|
||||
249
gui/app/styles/base.scss
Normal file
249
gui/app/styles/base.scss
Normal file
|
|
@ -0,0 +1,249 @@
|
|||
// Copyright 2016 Documize Inc. <legal@documize.com>. All rights reserved.
|
||||
//
|
||||
// This software (Documize Community Edition) is licensed under
|
||||
// GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html
|
||||
//
|
||||
// You can operate outside the AGPL restrictions by purchasing
|
||||
// Documize Enterprise Edition and obtaining a commercial license
|
||||
// by contacting <sales@documize.com>.
|
||||
//
|
||||
// https://documize.com
|
||||
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cursor-not-allowed {
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
|
||||
.cursor-auto {
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.vertical-top {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.center {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.text-uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.truncate {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
// requires element to specify width
|
||||
|
||||
.absolute-center {
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.no-width {
|
||||
white-space: nowrap;
|
||||
width: 1%;
|
||||
}
|
||||
|
||||
.no-float {
|
||||
float: none !important;
|
||||
}
|
||||
|
||||
.no-overflow-x {
|
||||
overflow-x: visible !important;
|
||||
}
|
||||
|
||||
.no-display {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input:-webkit-autofill {
|
||||
-webkit-box-shadow: 0 0 0 1000px white inset;
|
||||
}
|
||||
|
||||
img.responsive-img,
|
||||
video.responsive-video {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.bordered {
|
||||
border: 1px solid $color-border;
|
||||
}
|
||||
|
||||
html {
|
||||
overflow-y: scroll;
|
||||
font-family: $font-regular;
|
||||
background-color: $color-off-white;
|
||||
font-size: 14px;
|
||||
height: 100%;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $color-link;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
|
||||
|
||||
a:focus,
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
a.broken-link {
|
||||
color: $color-red;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
a.alt {
|
||||
color: $color-blue;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
|
||||
a:focus,
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
$i: 150;
|
||||
@while $i > 0 {
|
||||
.margin-#{$i} {
|
||||
margin: #{$i}px;
|
||||
}
|
||||
|
||||
.margin-top-#{$i} {
|
||||
margin-top: #{$i}px;
|
||||
}
|
||||
|
||||
.margin-bottom-#{$i} {
|
||||
margin-bottom: #{$i}px;
|
||||
}
|
||||
|
||||
.margin-right-#{$i} {
|
||||
margin-right: #{$i}px;
|
||||
}
|
||||
|
||||
.margin-left-#{$i} {
|
||||
margin-left: #{$i}px;
|
||||
}
|
||||
$i: $i - 5;
|
||||
}
|
||||
|
||||
$i: 150;
|
||||
@while $i > 0 {
|
||||
.padding-#{$i} {
|
||||
padding: #{$i}px;
|
||||
}
|
||||
|
||||
.padding-top-#{$i} {
|
||||
padding-top: #{$i}px;
|
||||
}
|
||||
|
||||
.padding-bottom-#{$i} {
|
||||
padding-bottom: #{$i}px;
|
||||
}
|
||||
|
||||
.padding-right-#{$i} {
|
||||
padding-right: #{$i}px;
|
||||
}
|
||||
|
||||
.padding-left-#{$i} {
|
||||
padding-left: #{$i}px;
|
||||
}
|
||||
$i: $i - 5;
|
||||
}
|
||||
|
||||
$i: 100;
|
||||
@while $i > 0 {
|
||||
.width-#{$i} {
|
||||
width: #{$i}#{"%"} !important;
|
||||
}
|
||||
$i: $i - 1;
|
||||
}
|
||||
|
||||
.no-outline {
|
||||
outline: none !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.no-select {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-o-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
list-style-type: none;
|
||||
}
|
||||
}
|
||||
|
||||
.clearfix:after,
|
||||
.clearfix:before {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
|
||||
.clearfix:after {
|
||||
clear: both;
|
||||
}
|
||||
89
gui/app/styles/color.scss
Normal file
89
gui/app/styles/color.scss
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
// Copyright 2016 Documize Inc. <legal@documize.com>. All rights reserved.
|
||||
//
|
||||
// This software (Documize Community Edition) is licensed under
|
||||
// GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html
|
||||
//
|
||||
// You can operate outside the AGPL restrictions by purchasing
|
||||
// Documize Enterprise Edition and obtaining a commercial license
|
||||
// by contacting <sales@documize.com>.
|
||||
//
|
||||
// https://documize.com
|
||||
|
||||
$color-off-white: #f5f5f5;
|
||||
$color-off-black: #393939;
|
||||
$color-black: #000000;
|
||||
$color-white: #ffffff;
|
||||
$color-primary: #2667af;
|
||||
$color-red: #d04134;
|
||||
$color-green: #4caf50;
|
||||
$color-blue: #2667af;
|
||||
$color-gray: #8b9096;
|
||||
$color-goldy: #cc9933;
|
||||
|
||||
$color-sidebar: #f3f5f8;
|
||||
$color-link: #0092d3;
|
||||
$color-border: #f3f5f8;
|
||||
|
||||
$color-input: #5a5a5a;
|
||||
$color-stroke: #e1e1e1;
|
||||
|
||||
$color-tooltip: #a1a1a1;
|
||||
$color-toast: #4c4c4c;
|
||||
$color-checkbox: #2667af;
|
||||
$color-card-active: #f7fcff;
|
||||
|
||||
$color-chip: #dff0f9;
|
||||
$color-chip-border: #daeaf3;
|
||||
$color-chip-text: #1b88e3;
|
||||
|
||||
$color-symbol-box: #dce5e8;
|
||||
$color-symbol-icon: #a4b8be;
|
||||
|
||||
$color-table-border: #e1e1e1;
|
||||
$color-table-header: #f5f5f5;
|
||||
$color-toolbar: #eeeeee;
|
||||
$color-wysiwyg: #3c3c3c;
|
||||
|
||||
.color-white {
|
||||
color: $color-white !important;
|
||||
}
|
||||
.color-off-white {
|
||||
color: $color-off-white !important;
|
||||
}
|
||||
.color-black {
|
||||
color: $color-black !important;
|
||||
}
|
||||
.color-off-black {
|
||||
color: $color-off-black !important;
|
||||
}
|
||||
.color-primary {
|
||||
color: $color-primary !important;
|
||||
}
|
||||
.color-link {
|
||||
color: $color-link !important;
|
||||
}
|
||||
.color-blue {
|
||||
color: $color-blue !important;
|
||||
}
|
||||
.color-red {
|
||||
color: $color-red !important;
|
||||
}
|
||||
.color-green {
|
||||
color: $color-green !important;
|
||||
}
|
||||
.color-gray {
|
||||
color: $color-gray !important;
|
||||
}
|
||||
|
||||
.background-color-white {
|
||||
background-color: $color-white !important;
|
||||
}
|
||||
.background-color-off-white {
|
||||
background-color: $color-off-white !important;
|
||||
}
|
||||
.background-color-primary {
|
||||
background-color: $color-primary !important;
|
||||
}
|
||||
.background-color-green {
|
||||
background-color: $color-green !important;
|
||||
}
|
||||
15
gui/app/styles/font.scss
Normal file
15
gui/app/styles/font.scss
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
.font-fixed-width {
|
||||
font-family: 'courier new', courier;
|
||||
}
|
||||
|
||||
$font-regular: Helvetica;
|
||||
$font-semibold: Helvetica;
|
||||
$font-light: Helvetica;
|
||||
|
||||
@font-face {
|
||||
font-family: "Material Icons";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url("font/icons/MaterialIcons-Regular.eot");
|
||||
src: local('Material Icons'), local('MaterialIcons-Regular'), url("font/icons/MaterialIcons-Regular.woff2") format('woff2'), url("font/icons/MaterialIcons-Regular.woff") format('woff'), url("font/icons/MaterialIcons-Regular.ttf") format('truetype');
|
||||
}
|
||||
189
gui/app/styles/mixins.scss
Normal file
189
gui/app/styles/mixins.scss
Normal file
|
|
@ -0,0 +1,189 @@
|
|||
@mixin box-shadow($spec)
|
||||
{
|
||||
-webkit-box-shadow: $spec;
|
||||
-moz-box-shadow: $spec;
|
||||
box-shadow: $spec;
|
||||
}
|
||||
|
||||
@mixin border-radius($radius)
|
||||
{
|
||||
-webkit-border-radius: $radius;
|
||||
-moz-border-radius: $radius;
|
||||
border-radius: $radius;
|
||||
}
|
||||
|
||||
@mixin border-radius-top-right($radius)
|
||||
{
|
||||
-webkit-border-top-right-radius: $radius;
|
||||
-moz-border-radius-topright: $radius;
|
||||
border-top-right-radius: $radius;
|
||||
}
|
||||
|
||||
@mixin border-radius-top-left($radius)
|
||||
{
|
||||
-webkit-border-top-left-radius: $radius;
|
||||
-moz-border-radius-topleft: $radius;
|
||||
border-top-left-radius: $radius;
|
||||
}
|
||||
|
||||
@mixin border-radius-bottom-right($radius)
|
||||
{
|
||||
-webkit-border-bottom-right-radius: $radius;
|
||||
-moz-border-radius-bottomright: $radius;
|
||||
border-bottom-right-radius: $radius;
|
||||
}
|
||||
|
||||
@mixin border-radius-bottom-left($radius)
|
||||
{
|
||||
-webkit-border-bottom-left-radius: $radius;
|
||||
-moz-border-radius-bottomleft: $radius;
|
||||
border-bottom-left-radius: $radius;
|
||||
}
|
||||
|
||||
@mixin border-radius-none()
|
||||
{
|
||||
-webkit-border-radius: none;
|
||||
-moz-border-radius: none;
|
||||
border-radius: none;
|
||||
-webkit-border-top-right-radius: none;
|
||||
-moz-border-radius-topright: none;
|
||||
border-top-right-radius: none;
|
||||
-webkit-border-top-left-radius: none;
|
||||
-moz-border-radius-topleft: none;
|
||||
border-top-left-radius: none;
|
||||
}
|
||||
|
||||
@mixin border($width)
|
||||
{
|
||||
border: $width solid $color-border !important;
|
||||
}
|
||||
@mixin border-left($width)
|
||||
{
|
||||
border-left: $width solid $color-border;
|
||||
}
|
||||
@mixin border-right($width)
|
||||
{
|
||||
border-right: $width solid $color-border;
|
||||
}
|
||||
@mixin border-top($width)
|
||||
{
|
||||
border-top: $width solid $color-border;
|
||||
}
|
||||
@mixin border-bottom($width)
|
||||
{
|
||||
border-bottom: $width solid $color-border;
|
||||
}
|
||||
|
||||
@mixin ease-in()
|
||||
{
|
||||
-webkit-transition: all 0.30s ease-in-out;
|
||||
-moz-transition: all 0.30s ease-in-out;
|
||||
-ms-transition: all 0.30s ease-in-out;
|
||||
-o-transition: all 0.30s ease-in-out;
|
||||
transition: all 0.30s ease-in-out;
|
||||
}
|
||||
|
||||
@mixin arrow-down($color, $size)
|
||||
{
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: $size solid transparent;
|
||||
border-right: $size solid transparent;
|
||||
border-top: $size solid $color;
|
||||
}
|
||||
|
||||
@mixin content-container($pad-tb: 25px, $pad-lr: 50px) {
|
||||
@include border-radius(2px);
|
||||
padding: $pad-tb $pad-lr;
|
||||
box-shadow: 0 0 0 0.75pt $color-stroke,0 0 3pt 0.75pt $color-stroke;
|
||||
background-color: $color-white;
|
||||
}
|
||||
|
||||
.dotted
|
||||
{
|
||||
border-bottom: 1px dotted $color-gray;
|
||||
}
|
||||
|
||||
// Mixins from http://zerosixthree.se/8-sass-mixins-you-must-have-in-your-toolbox/
|
||||
@function calculateRem($size) {
|
||||
$remSize: $size / 16px;
|
||||
@return $remSize * 1rem;
|
||||
}
|
||||
|
||||
@mixin font-size($size) {
|
||||
font-size: $size;
|
||||
font-size: calculateRem($size);
|
||||
}
|
||||
|
||||
@mixin keyframes($animation-name) {
|
||||
@-webkit-keyframes #{$animation-name} {
|
||||
@content;
|
||||
}
|
||||
|
||||
@-moz-keyframes #{$animation-name} {
|
||||
@content;
|
||||
}
|
||||
|
||||
@-ms-keyframes #{$animation-name} {
|
||||
@content;
|
||||
}
|
||||
|
||||
@-o-keyframes #{$animation-name} {
|
||||
@content;
|
||||
}
|
||||
|
||||
@keyframes #{$animation-name} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin animation($str) {
|
||||
-webkit-animation: #{$str};
|
||||
-moz-animation : #{$str};
|
||||
-ms-animation : #{$str};
|
||||
-o-animation : #{$str};
|
||||
animation : #{$str};
|
||||
}
|
||||
|
||||
@mixin transition($args...) {
|
||||
-webkit-transition: $args;
|
||||
-moz-transition : $args;
|
||||
-ms-transition : $args;
|
||||
-o-transition : $args;
|
||||
transition : $args;
|
||||
}
|
||||
|
||||
@mixin opacity($opacity) {
|
||||
opacity: $opacity;
|
||||
$opacity-ie: $opacity * 100;
|
||||
filter: alpha(opacity=$opacity-ie); //IE8
|
||||
}
|
||||
|
||||
@keyframes fadein {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
/* Firefox < 16 */
|
||||
@-moz-keyframes fadein {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
/* Safari, Chrome and Opera > 12.1 */
|
||||
@-webkit-keyframes fadein {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
/* Internet Explorer */
|
||||
@-ms-keyframes fadein {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
/* Opera < 12.1 */
|
||||
@-o-keyframes fadein {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
154
gui/app/styles/print.scss
Normal file
154
gui/app/styles/print.scss
Normal file
|
|
@ -0,0 +1,154 @@
|
|||
// Copyright 2016 Documize Inc. <legal@documize.com>. All rights reserved.
|
||||
//
|
||||
// This software (Documize Community Edition) is licensed under
|
||||
// GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html
|
||||
//
|
||||
// You can operate outside the AGPL restrictions by purchasing
|
||||
// Documize Enterprise Edition and obtaining a commercial license
|
||||
// by contacting <sales@documize.com>.
|
||||
//
|
||||
// https://documize.com
|
||||
@media print {
|
||||
@page {
|
||||
size: 8.5in 11in;
|
||||
margin: 20mm;
|
||||
|
||||
@top-right {
|
||||
font-size: 12px;
|
||||
content: string(doctitle);
|
||||
color: $color-off-black;
|
||||
}
|
||||
|
||||
@bottom-left {
|
||||
font-size: 12px;
|
||||
content: 'Exported from Documize';
|
||||
color: $color-off-black;
|
||||
}
|
||||
|
||||
@bottom-right {
|
||||
content: counter(page);
|
||||
font-size: 12px;
|
||||
color: $color-off-black;
|
||||
}
|
||||
}
|
||||
|
||||
html, body {
|
||||
background-color: transparent !important;
|
||||
max-width: none !important;
|
||||
float: none !important;
|
||||
position: relative !important;
|
||||
height: initial !important;
|
||||
min-height: initial !important;
|
||||
}
|
||||
|
||||
.non-printable,
|
||||
.dropdown-dialog,
|
||||
.dropdown-menu,
|
||||
.zone-navigation,
|
||||
#sidebar-wrapper,
|
||||
.sidebar-wrapper,
|
||||
.sidebar-common,
|
||||
.sidebar-toolbar,
|
||||
.sidebar-panel,
|
||||
.edit-document-heading,
|
||||
.back-to-space,
|
||||
.start-section,
|
||||
.start-button,
|
||||
.is-a-tab,
|
||||
.new-section-wizard {
|
||||
float: none !important;
|
||||
display: none !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
width: 0 !important;
|
||||
z-index: 0 !important;
|
||||
}
|
||||
|
||||
.non-printable-message,
|
||||
.print-title {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
position: relative !important;
|
||||
box-shadow: initial !important;
|
||||
border-radius: initial !important;
|
||||
float: none !important;
|
||||
overflow-x: initial !important;
|
||||
padding-left: 0 !important;
|
||||
|
||||
.page-container {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
position: initial !important;
|
||||
box-shadow: initial !important;
|
||||
border-radius: initial !important;
|
||||
width: initial !important;
|
||||
max-width: initial !important;
|
||||
float: initial !important;
|
||||
overflow-x: initial !important;
|
||||
|
||||
#page-content-wrapper {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
position: initial !important;
|
||||
box-shadow: initial !important;
|
||||
border-radius: initial !important;
|
||||
width: initial !important;
|
||||
max-width: initial !important;
|
||||
float: initial !important;
|
||||
overflow-x: initial !important;
|
||||
|
||||
#zone-document-content {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
position: initial !important;
|
||||
box-shadow: initial !important;
|
||||
border-radius: initial !important;
|
||||
width: initial !important;
|
||||
max-width: initial !important;
|
||||
float: initial !important;
|
||||
overflow-x: initial !important;
|
||||
|
||||
.document-heading {
|
||||
.doc-title {
|
||||
margin: 0 0 10px 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.document-view {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
position: initial !important;
|
||||
box-shadow: initial !important;
|
||||
border-radius: initial !important;
|
||||
width: initial !important;
|
||||
max-width: initial !important;
|
||||
float: initial !important;
|
||||
overflow-x: initial !important;
|
||||
|
||||
.is-a-page /*, .is-a-tab */ {
|
||||
padding: 0 !important;
|
||||
margin: 30px 0 20px 0 !important;
|
||||
position: initial !important;
|
||||
box-shadow: initial !important;
|
||||
border-radius: initial !important;
|
||||
width: initial !important;
|
||||
max-width: initial !important;
|
||||
float: initial !important;
|
||||
overflow-x: initial !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wysiwyg {
|
||||
font-size: 15px;
|
||||
line-height: 25px;
|
||||
color: $color-black;
|
||||
}
|
||||
}
|
||||
0
gui/app/styles/responsive.scss
Normal file
0
gui/app/styles/responsive.scss
Normal file
451
gui/app/styles/section/code.scss
Normal file
451
gui/app/styles/section/code.scss
Normal file
|
|
@ -0,0 +1,451 @@
|
|||
.section-code-editor {
|
||||
margin-top: 6px;
|
||||
|
||||
> .syntax-selector {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* BASICS */
|
||||
|
||||
.CodeMirror {
|
||||
/* Set height, width, borders, and global font properties here */
|
||||
font-family: monospace;
|
||||
height: 300px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
/* PADDING */
|
||||
|
||||
.CodeMirror-lines {
|
||||
padding: 4px 0; /* Vertical padding around content */
|
||||
}
|
||||
.CodeMirror pre {
|
||||
padding: 0 4px; /* Horizontal padding of content */
|
||||
}
|
||||
|
||||
.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
|
||||
background-color: white; /* The little square between H and V scrollbars */
|
||||
}
|
||||
|
||||
/* GUTTER */
|
||||
|
||||
.CodeMirror-gutters {
|
||||
border-right: 1px solid #ddd;
|
||||
background-color: #f7f7f7;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.CodeMirror-linenumbers {}
|
||||
.CodeMirror-linenumber {
|
||||
padding: 0 3px 0 5px;
|
||||
min-width: 20px;
|
||||
text-align: right;
|
||||
color: #999;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.CodeMirror-guttermarker { color: black; }
|
||||
.CodeMirror-guttermarker-subtle { color: #999; }
|
||||
|
||||
/* CURSOR */
|
||||
|
||||
.CodeMirror-cursor {
|
||||
border-left: 1px solid black;
|
||||
border-right: none;
|
||||
width: 0;
|
||||
}
|
||||
/* Shown when moving in bi-directional text */
|
||||
.CodeMirror div.CodeMirror-secondarycursor {
|
||||
border-left: 1px solid silver;
|
||||
}
|
||||
.cm-fat-cursor .CodeMirror-cursor {
|
||||
width: auto;
|
||||
border: 0 !important;
|
||||
background: #7e7;
|
||||
}
|
||||
.cm-fat-cursor div.CodeMirror-cursors {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.cm-animate-fat-cursor {
|
||||
width: auto;
|
||||
border: 0;
|
||||
-webkit-animation: blink 1.06s steps(1) infinite;
|
||||
-moz-animation: blink 1.06s steps(1) infinite;
|
||||
animation: blink 1.06s steps(1) infinite;
|
||||
background-color: #7e7;
|
||||
}
|
||||
@-moz-keyframes blink {
|
||||
0% {}
|
||||
50% { background-color: transparent; }
|
||||
100% {}
|
||||
}
|
||||
@-webkit-keyframes blink {
|
||||
0% {}
|
||||
50% { background-color: transparent; }
|
||||
100% {}
|
||||
}
|
||||
@keyframes blink {
|
||||
0% {}
|
||||
50% { background-color: transparent; }
|
||||
100% {}
|
||||
}
|
||||
|
||||
/* Can style cursor different in overwrite (non-insert) mode */
|
||||
.CodeMirror-overwrite .CodeMirror-cursor {}
|
||||
|
||||
.cm-tab { display: inline-block; text-decoration: inherit; }
|
||||
|
||||
.CodeMirror-rulers {
|
||||
position: absolute;
|
||||
left: 0; right: 0; top: -50px; bottom: -20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.CodeMirror-ruler {
|
||||
border-left: 1px solid #ccc;
|
||||
top: 0; bottom: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/* DEFAULT THEME */
|
||||
|
||||
.cm-s-default .cm-header {color: blue;}
|
||||
.cm-s-default .cm-quote {color: #090;}
|
||||
.cm-negative {color: #d44;}
|
||||
.cm-positive {color: #292;}
|
||||
.cm-header, .cm-strong {font-weight: bold;}
|
||||
.cm-em {font-style: italic;}
|
||||
.cm-link {text-decoration: underline;}
|
||||
.cm-strikethrough {text-decoration: line-through;}
|
||||
|
||||
.cm-s-default .cm-keyword {color: #708;}
|
||||
.cm-s-default .cm-atom {color: #219;}
|
||||
.cm-s-default .cm-number {color: #164;}
|
||||
.cm-s-default .cm-def {color: #00f;}
|
||||
.cm-s-default .cm-variable,
|
||||
.cm-s-default .cm-punctuation,
|
||||
.cm-s-default .cm-property,
|
||||
.cm-s-default .cm-operator {}
|
||||
.cm-s-default .cm-variable-2 {color: #05a;}
|
||||
.cm-s-default .cm-variable-3 {color: #085;}
|
||||
.cm-s-default .cm-comment {color: #a50;}
|
||||
.cm-s-default .cm-string {color: #a11;}
|
||||
.cm-s-default .cm-string-2 {color: #f50;}
|
||||
.cm-s-default .cm-meta {color: #555;}
|
||||
.cm-s-default .cm-qualifier {color: #555;}
|
||||
.cm-s-default .cm-builtin {color: #30a;}
|
||||
.cm-s-default .cm-bracket {color: #997;}
|
||||
.cm-s-default .cm-tag {color: #170;}
|
||||
.cm-s-default .cm-attribute {color: #00c;}
|
||||
.cm-s-default .cm-hr {color: #999;}
|
||||
.cm-s-default .cm-link {color: #00c;}
|
||||
|
||||
.cm-s-default .cm-error {color: #f00;}
|
||||
.cm-invalidchar {color: #f00;}
|
||||
|
||||
.CodeMirror-composing { border-bottom: 2px solid; }
|
||||
|
||||
/* Default styles for common addons */
|
||||
|
||||
div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}
|
||||
div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
|
||||
.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
|
||||
.CodeMirror-activeline-background {background: #e8f2ff;}
|
||||
|
||||
/* STOP */
|
||||
|
||||
/* The rest of this file contains styles related to the mechanics of
|
||||
the editor. You probably shouldn't touch them. */
|
||||
|
||||
.CodeMirror {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.CodeMirror-scroll {
|
||||
overflow: scroll !important; /* Things will break if this is overridden */
|
||||
/* 30px is the magic margin used to hide the element's real scrollbars */
|
||||
/* See overflow: hidden in .CodeMirror */
|
||||
margin-bottom: -30px; margin-right: -30px;
|
||||
padding-bottom: 30px;
|
||||
height: 100%;
|
||||
outline: none; /* Prevent dragging from highlighting the element */
|
||||
position: relative;
|
||||
}
|
||||
.CodeMirror-sizer {
|
||||
position: relative;
|
||||
border-right: 30px solid transparent;
|
||||
}
|
||||
|
||||
/* The fake, visible scrollbars. Used to force redraw during scrolling
|
||||
before actual scrolling happens, thus preventing shaking and
|
||||
flickering artifacts. */
|
||||
.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
|
||||
position: absolute;
|
||||
z-index: 6;
|
||||
display: none;
|
||||
}
|
||||
.CodeMirror-vscrollbar {
|
||||
right: 0; top: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.CodeMirror-hscrollbar {
|
||||
bottom: 0; left: 0;
|
||||
overflow-y: hidden;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
.CodeMirror-scrollbar-filler {
|
||||
right: 0; bottom: 0;
|
||||
}
|
||||
.CodeMirror-gutter-filler {
|
||||
left: 0; bottom: 0;
|
||||
}
|
||||
|
||||
.CodeMirror-gutters {
|
||||
position: absolute; left: 0; top: 0;
|
||||
min-height: 100%;
|
||||
z-index: 3;
|
||||
}
|
||||
.CodeMirror-gutter {
|
||||
white-space: normal;
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-bottom: -30px;
|
||||
}
|
||||
.CodeMirror-gutter-wrapper {
|
||||
position: absolute;
|
||||
z-index: 4;
|
||||
background: none !important;
|
||||
border: none !important;
|
||||
}
|
||||
.CodeMirror-gutter-background {
|
||||
position: absolute;
|
||||
top: 0; bottom: 0;
|
||||
z-index: 4;
|
||||
}
|
||||
.CodeMirror-gutter-elt {
|
||||
position: absolute;
|
||||
cursor: default;
|
||||
z-index: 4;
|
||||
}
|
||||
.CodeMirror-gutter-wrapper {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.CodeMirror-lines {
|
||||
cursor: text;
|
||||
min-height: 1px; /* prevents collapsing before first draw */
|
||||
}
|
||||
.CodeMirror pre {
|
||||
/* Reset some styles that the rest of the page might have set */
|
||||
-moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
|
||||
border-width: 0;
|
||||
background: transparent;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
margin: 0;
|
||||
white-space: pre;
|
||||
word-wrap: normal;
|
||||
line-height: inherit;
|
||||
color: inherit;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-font-variant-ligatures: contextual;
|
||||
font-variant-ligatures: contextual;
|
||||
}
|
||||
.CodeMirror-wrap pre {
|
||||
word-wrap: break-word;
|
||||
white-space: pre-wrap;
|
||||
word-break: normal;
|
||||
}
|
||||
|
||||
.CodeMirror-linebackground {
|
||||
position: absolute;
|
||||
left: 0; right: 0; top: 0; bottom: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.CodeMirror-linewidget {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.CodeMirror-widget {}
|
||||
|
||||
.CodeMirror-code {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Force content-box sizing for the elements where we expect it */
|
||||
.CodeMirror-scroll,
|
||||
.CodeMirror-sizer,
|
||||
.CodeMirror-gutter,
|
||||
.CodeMirror-gutters,
|
||||
.CodeMirror-linenumber {
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.CodeMirror-measure {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.CodeMirror-cursor {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
.CodeMirror-measure pre { position: static; }
|
||||
|
||||
div.CodeMirror-cursors {
|
||||
visibility: hidden;
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
div.CodeMirror-dragcursors {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.CodeMirror-focused div.CodeMirror-cursors {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.CodeMirror-selected { background: #d9d9d9; }
|
||||
.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
|
||||
.CodeMirror-crosshair { cursor: crosshair; }
|
||||
.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }
|
||||
.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }
|
||||
|
||||
.cm-searching {
|
||||
background: #ffa;
|
||||
background: rgba(255, 255, 0, .4);
|
||||
}
|
||||
|
||||
/* Used to force a border model for a node */
|
||||
.cm-force-border { padding-right: .1px; }
|
||||
|
||||
@media print {
|
||||
/* Hide the cursor when printing */
|
||||
.CodeMirror div.CodeMirror-cursors {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
/* See issue #2901 */
|
||||
.cm-tab-wrap-hack:after { content: ''; }
|
||||
|
||||
/* Help users use markselection to safely style text background */
|
||||
span.CodeMirror-selectedtext { background: none; }
|
||||
|
||||
|
||||
/*
|
||||
|
||||
Name: material
|
||||
Author: Michael Kaminsky (http://github.com/mkaminsky11)
|
||||
|
||||
Original material color scheme by Mattia Astorino (https://github.com/equinusocio/material-theme)
|
||||
|
||||
*/
|
||||
|
||||
.cm-s-material.CodeMirror {
|
||||
background-color: #263238;
|
||||
color: rgba(233, 237, 237, 1);
|
||||
}
|
||||
.cm-s-material .CodeMirror-gutters {
|
||||
background: #263238;
|
||||
color: rgb(83,127,126);
|
||||
border: none;
|
||||
}
|
||||
.cm-s-material .CodeMirror-guttermarker, .cm-s-material .CodeMirror-guttermarker-subtle, .cm-s-material .CodeMirror-linenumber { color: rgb(83,127,126); }
|
||||
.cm-s-material .CodeMirror-cursor { border-left: 1px solid #f8f8f0; }
|
||||
.cm-s-material div.CodeMirror-selected { background: rgba(255, 255, 255, 0.15); }
|
||||
.cm-s-material.CodeMirror-focused div.CodeMirror-selected { background: rgba(255, 255, 255, 0.10); }
|
||||
.cm-s-material .CodeMirror-line::selection, .cm-s-material .CodeMirror-line > span::selection, .cm-s-material .CodeMirror-line > span > span::selection { background: rgba(255, 255, 255, 0.10); }
|
||||
.cm-s-material .CodeMirror-line::-moz-selection, .cm-s-material .CodeMirror-line > span::-moz-selection, .cm-s-material .CodeMirror-line > span > span::-moz-selection { background: rgba(255, 255, 255, 0.10); }
|
||||
|
||||
.cm-s-material .CodeMirror-activeline-background { background: rgba(0, 0, 0, 0); }
|
||||
.cm-s-material .cm-keyword { color: rgba(199, 146, 234, 1); }
|
||||
.cm-s-material .cm-operator { color: rgba(233, 237, 237, 1); }
|
||||
.cm-s-material .cm-variable-2 { color: #80CBC4; }
|
||||
.cm-s-material .cm-variable-3 { color: #82B1FF; }
|
||||
.cm-s-material .cm-builtin { color: #DECB6B; }
|
||||
.cm-s-material .cm-atom { color: #F77669; }
|
||||
.cm-s-material .cm-number { color: #F77669; }
|
||||
.cm-s-material .cm-def { color: rgba(233, 237, 237, 1); }
|
||||
.cm-s-material .cm-string { color: #C3E88D; }
|
||||
.cm-s-material .cm-string-2 { color: #80CBC4; }
|
||||
.cm-s-material .cm-comment { color: #546E7A; }
|
||||
.cm-s-material .cm-variable { color: #82B1FF; }
|
||||
.cm-s-material .cm-tag { color: #80CBC4; }
|
||||
.cm-s-material .cm-meta { color: #80CBC4; }
|
||||
.cm-s-material .cm-attribute { color: #FFCB6B; }
|
||||
.cm-s-material .cm-property { color: #80CBAE; }
|
||||
.cm-s-material .cm-qualifier { color: #DECB6B; }
|
||||
.cm-s-material .cm-variable-3 { color: #DECB6B; }
|
||||
.cm-s-material .cm-tag { color: rgba(255, 83, 112, 1); }
|
||||
.cm-s-material .cm-error {
|
||||
color: rgba(255, 255, 255, 1.0);
|
||||
background-color: #EC5F67;
|
||||
}
|
||||
.cm-s-material .CodeMirror-matchingbracket {
|
||||
text-decoration: underline;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
|
||||
Name: yeti
|
||||
Author: Michael Kaminsky (http://github.com/mkaminsky11)
|
||||
|
||||
Original yeti color scheme by Jesse Weed (https://github.com/jesseweed/yeti-syntax)
|
||||
|
||||
*/
|
||||
|
||||
|
||||
.cm-s-yeti.CodeMirror {
|
||||
background-color: #ECEAE8 !important;
|
||||
color: #d1c9c0 !important;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.cm-s-yeti .CodeMirror-gutters {
|
||||
color: #adaba6;
|
||||
background-color: #E5E1DB;
|
||||
border: none;
|
||||
}
|
||||
.cm-s-yeti .CodeMirror-cursor { border-left: solid thin #d1c9c0; }
|
||||
.cm-s-yeti .CodeMirror-linenumber { color: #adaba6; }
|
||||
.cm-s-yeti.CodeMirror-focused div.CodeMirror-selected { background: #DCD8D2; }
|
||||
.cm-s-yeti .CodeMirror-line::selection, .cm-s-yeti .CodeMirror-line > span::selection, .cm-s-yeti .CodeMirror-line > span > span::selection { background: #DCD8D2; }
|
||||
.cm-s-yeti .CodeMirror-line::-moz-selection, .cm-s-yeti .CodeMirror-line > span::-moz-selection, .cm-s-yeti .CodeMirror-line > span > span::-moz-selection { background: #DCD8D2; }
|
||||
.cm-s-yeti span.cm-comment { color: #d4c8be; }
|
||||
.cm-s-yeti span.cm-string, .cm-s-yeti span.cm-string-2 { color: #96c0d8; }
|
||||
.cm-s-yeti span.cm-number { color: #a074c4; }
|
||||
.cm-s-yeti span.cm-variable { color: #55b5db; }
|
||||
.cm-s-yeti span.cm-variable-2 { color: #a074c4; }
|
||||
.cm-s-yeti span.cm-def { color: #55b5db; }
|
||||
.cm-s-yeti span.cm-operator { color: #9fb96e; }
|
||||
.cm-s-yeti span.cm-keyword { color: #9fb96e; }
|
||||
.cm-s-yeti span.cm-atom { color: #a074c4; }
|
||||
.cm-s-yeti span.cm-meta { color: #96c0d8; }
|
||||
.cm-s-yeti span.cm-tag { color: #96c0d8; }
|
||||
.cm-s-yeti span.cm-attribute { color: #9fb96e; }
|
||||
.cm-s-yeti span.cm-qualifier { color: #96c0d8; }
|
||||
.cm-s-yeti span.cm-property { color: #a074c4; }
|
||||
.cm-s-yeti span.cm-builtin { color: #a074c4; }
|
||||
.cm-s-yeti span.cm-variable-3 { color: #96c0d8; }
|
||||
.cm-s-yeti .CodeMirror-activeline-background { background: #E7E4E0; }
|
||||
.cm-s-yeti .CodeMirror-matchingbracket { text-decoration: underline; }
|
||||
37
gui/app/styles/section/gemini.scss
Normal file
37
gui/app/styles/section/gemini.scss
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
.section-gemini-workspaces {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.section-gemini-workspace {
|
||||
float: left;
|
||||
list-style: none;
|
||||
margin: 0px 15px 15px 0;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.section-gemini-card {
|
||||
height: 50px;
|
||||
width: 75px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
.section-gemini-selected-card {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 4px;
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.section-gemini-table {
|
||||
font-size: 12px;
|
||||
width: auto !important;
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
135
gui/app/styles/section/github.scss
Normal file
135
gui/app/styles/section/github.scss
Normal file
|
|
@ -0,0 +1,135 @@
|
|||
.section-github-editor {
|
||||
.github-view label {
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.github-repo {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
white-space: nowrap;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.github-repo-title {
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.github-list {
|
||||
margin: 10px 10px 0 0;
|
||||
}
|
||||
|
||||
.github-list-title {
|
||||
color: #4c4c4c;
|
||||
font-size: 14px;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.github-list-checkbox {
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
.github-issue-label {
|
||||
font-size: 11px;
|
||||
color: white;
|
||||
padding: 0 4px;
|
||||
margin-right: 5px;
|
||||
border-radius: 2px;
|
||||
box-shadow: inset 0 -1px 0 rgba(0,0,0,0.12);
|
||||
display: inline-block;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.section-github-render {
|
||||
font-size: 0.9rem;
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.github-table {
|
||||
margin: 10px 0 !important;
|
||||
border: none !important;
|
||||
line-height: 30px;
|
||||
|
||||
td {
|
||||
border: none !important;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
.heading {
|
||||
font-size: 1.6rem;
|
||||
margin: 30px 0 0;
|
||||
}
|
||||
|
||||
.github-table thead tr th {
|
||||
padding: 15px 0;
|
||||
border-bottom: 1px solid #e1e1e1;
|
||||
text-transform: uppercase;
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
|
||||
span {
|
||||
color: #838d94;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.github-table tbody tr td {
|
||||
border: none !important;
|
||||
padding: 5px 0 !important;
|
||||
}
|
||||
|
||||
.github-table .right-column {
|
||||
text-align: right;
|
||||
color: #838d94;
|
||||
}
|
||||
|
||||
span.data {
|
||||
color: #838d94;
|
||||
}
|
||||
|
||||
.issue-label {
|
||||
color: white;
|
||||
font-size: 11px;
|
||||
padding: 4px 6px;
|
||||
border-radius: 4px;
|
||||
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.12);
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
display: inline-block;
|
||||
border-radius: 3px;
|
||||
width: 40%;
|
||||
background-color: #f1f1f1;
|
||||
height: 8px;
|
||||
margin-left: 10px;
|
||||
|
||||
.progress {
|
||||
height: 8px;
|
||||
border-radius: 4px;
|
||||
background-color: #4caf50;
|
||||
}
|
||||
}
|
||||
|
||||
.contributor-meta {
|
||||
white-space: nowrap;
|
||||
width: 1%;
|
||||
}
|
||||
|
||||
span.issue-state {
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
img.github-avatar {
|
||||
width: 24px;
|
||||
border-radius: 4px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
19
gui/app/styles/section/markdown.scss
Normal file
19
gui/app/styles/section/markdown.scss
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
.section-markdown-editor {
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.section-markdown-preview {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@extend .no-outline;
|
||||
margin-top: -10px;
|
||||
border: none;
|
||||
@extend .no-outline;
|
||||
}
|
||||
|
||||
.section-markdown-preview-button {
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
right: 118px;
|
||||
}
|
||||
16
gui/app/styles/section/papertrail.scss
Normal file
16
gui/app/styles/section/papertrail.scss
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
.section-papertrail-table {
|
||||
font-size: 12px;
|
||||
width: 90% important;
|
||||
|
||||
th {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
td:nth-child(2) {
|
||||
font-variant: small-caps;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
1352
gui/app/styles/section/table.scss
Normal file
1352
gui/app/styles/section/table.scss
Normal file
File diff suppressed because it is too large
Load diff
89
gui/app/styles/section/trello.scss
Normal file
89
gui/app/styles/section/trello.scss
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
.section-trello-board {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
white-space: nowrap;
|
||||
overflow: auto
|
||||
}
|
||||
|
||||
.section-trello-board-title {
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.section-trello-list {
|
||||
background-color: #e2e4e6;
|
||||
padding: 10px;
|
||||
border-radius: 3px;
|
||||
margin: 10px 10px 0 0;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.section-trello-list-title {
|
||||
font-weight: bold;
|
||||
color: #4c4c4c;
|
||||
font-size: 14px;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.section-trello-list-checkbox {
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
|
||||
.section-trello-render {
|
||||
> .trello-board {
|
||||
width: 100%;
|
||||
max-height: 600px;
|
||||
padding: 10px;
|
||||
white-space: nowrap;
|
||||
overflow: auto;
|
||||
|
||||
> a {
|
||||
> .trello-board-title {
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
> .trello-list {
|
||||
background-color: #e2e4e6;
|
||||
padding: 10px;
|
||||
border-radius: 3px;
|
||||
margin: 10px 10px 0 0;
|
||||
width: 300px;
|
||||
max-height: 500px;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
overflow: auto;
|
||||
vertical-align: top;
|
||||
|
||||
> .trello-list-title {
|
||||
font-weight: bold;
|
||||
color: #4c4c4c;
|
||||
font-size: 14px;
|
||||
margin: 0 10px 10px 0;
|
||||
}
|
||||
|
||||
> a {
|
||||
> .trello-card {
|
||||
color: #4c4c4c;
|
||||
border-bottom: 1px solid #CDD2D4;
|
||||
background-color: #fff;
|
||||
border-radius: 3px;
|
||||
padding: 7px 7px;
|
||||
margin: 5px 0;
|
||||
font-size: 14px;
|
||||
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
|
||||
line-height: 18px;
|
||||
overflow: hidden;
|
||||
word-wrap: break-word;
|
||||
white-space: normal;
|
||||
cursor: pointer;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
6
gui/app/styles/section/wysiwyg.scss
Normal file
6
gui/app/styles/section/wysiwyg.scss
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
.wysiwyg-editor {
|
||||
@extend .no-outline;
|
||||
font-family: Helvetica,Arial,Verdana,sans-serif;
|
||||
margin-top: -10px;
|
||||
color: $color-black;
|
||||
}
|
||||
3946
gui/app/styles/vendor.scss
Normal file
3946
gui/app/styles/vendor.scss
Normal file
File diff suppressed because it is too large
Load diff
15
gui/app/styles/view/common.scss
Normal file
15
gui/app/styles/view/common.scss
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
.explainer {
|
||||
text-align: center;
|
||||
|
||||
> .empty-state {
|
||||
margin: 30px 0;
|
||||
font-size: 1.2rem;
|
||||
color: $color-gray;
|
||||
}
|
||||
|
||||
> .normal-state {
|
||||
margin: 10px;
|
||||
font-size: 1.2rem;
|
||||
color: $color-gray;
|
||||
}
|
||||
}
|
||||
9
gui/app/styles/view/document/all.scss
Normal file
9
gui/app/styles/view/document/all.scss
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
@import "content-linker.scss";
|
||||
@import "history.scss";
|
||||
@import "inline-editor.scss";
|
||||
@import "section-editor.scss";
|
||||
@import "sidebar-view-activity.scss";
|
||||
@import "sidebar-view-attachments.scss";
|
||||
@import "sidebar-view-index.scss";
|
||||
@import "view.scss";
|
||||
@import "wysiwyg.scss";
|
||||
29
gui/app/styles/view/document/content-linker.scss
Normal file
29
gui/app/styles/view/document/content-linker.scss
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
.content-counter-dialog {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.content-linker-dialog {
|
||||
width: 350px;
|
||||
height: 350px;
|
||||
overflow-y: auto;
|
||||
|
||||
.link-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
.link-item {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 0.9rem;
|
||||
color: $color-gray;
|
||||
cursor: pointer;
|
||||
|
||||
.icon {
|
||||
margin-right: 5px;
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
27
gui/app/styles/view/document/history.scss
Normal file
27
gui/app/styles/view/document/history.scss
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
.zone-document-history {
|
||||
margin-left: 60px;
|
||||
padding: 20px 60px;
|
||||
z-index: 777;
|
||||
position: relative;
|
||||
|
||||
.diff-zone {
|
||||
@extend .transition-all;
|
||||
@include border-radius(2px);
|
||||
@include ease-in();
|
||||
position: relative;
|
||||
padding: 25px 50px;
|
||||
box-shadow: 0 0 0 0.75pt $color-stroke,0 0 3pt 0.75pt $color-stroke;
|
||||
background-color: $color-white;
|
||||
|
||||
> .canvas {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.revision-picker {
|
||||
width: 300px;
|
||||
float: left;
|
||||
margin-top: 10px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
41
gui/app/styles/view/document/inline-editor.scss
Normal file
41
gui/app/styles/view/document/inline-editor.scss
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
.document-editor {
|
||||
position: relative;
|
||||
|
||||
> .toolbar {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
|
||||
> .edit-title {
|
||||
width: 70%;
|
||||
|
||||
> input {
|
||||
font-weight: bold;
|
||||
font-size: 1.5rem;
|
||||
margin: 16px 0 10px 0;
|
||||
color: $color-wysiwyg;
|
||||
}
|
||||
}
|
||||
|
||||
> .buttons {
|
||||
margin-top: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
> .canvas {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.cancel-edits-dialog {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.document-editor-full {
|
||||
@extend .transition-all;
|
||||
@include border-radius(2px);
|
||||
@include ease-in();
|
||||
position: relative;
|
||||
padding: 25px 50px;
|
||||
box-shadow: 0 0 0 0.75pt $color-stroke,0 0 3pt 0.75pt $color-stroke;
|
||||
background-color: $color-white;
|
||||
}
|
||||
29
gui/app/styles/view/document/section-editor.scss
Normal file
29
gui/app/styles/view/document/section-editor.scss
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
.zone-section-editor {
|
||||
margin-left: 60px;
|
||||
padding: 20px 60px;
|
||||
z-index: 777;
|
||||
position: relative;
|
||||
|
||||
.section-editor {
|
||||
@extend .transition-all;
|
||||
@include border-radius(2px);
|
||||
@include ease-in();
|
||||
position: relative;
|
||||
padding: 25px 50px;
|
||||
box-shadow: 0 0 0 0.75pt $color-stroke,0 0 3pt 0.75pt $color-stroke;
|
||||
background-color: $color-white;
|
||||
|
||||
> .buttons {
|
||||
margin-top: 17px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
> .canvas {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.cancel-edits-dialog {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
52
gui/app/styles/view/document/sidebar-view-activity.scss
Normal file
52
gui/app/styles/view/document/sidebar-view-activity.scss
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
.document-sidebar-view-activity {
|
||||
> .items {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
white-space: nowrap;
|
||||
|
||||
> .item {
|
||||
margin: 0;
|
||||
padding: 10px 0;
|
||||
width: 100%;
|
||||
|
||||
> .avatar-box {
|
||||
display: inline-block;
|
||||
margin: 0 10px 0 0;
|
||||
}
|
||||
|
||||
> .name {
|
||||
display: inline-block;
|
||||
font-size: 0.9rem;
|
||||
color: $color-gray;
|
||||
width: 200px;
|
||||
@extend .truncate;
|
||||
}
|
||||
|
||||
> .detail {
|
||||
display: block;
|
||||
font-size: 0.9rem;
|
||||
color: $color-off-black;
|
||||
margin-left: 50px;
|
||||
width: 200px;
|
||||
@extend .truncate;
|
||||
|
||||
.viewed {
|
||||
color: $color-goldy;
|
||||
}
|
||||
|
||||
.added {
|
||||
color: $color-green;
|
||||
}
|
||||
|
||||
.changed {
|
||||
color: $color-blue;
|
||||
}
|
||||
|
||||
.deleted {
|
||||
color: $color-red;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
85
gui/app/styles/view/document/sidebar-view-attachments.scss
Normal file
85
gui/app/styles/view/document/sidebar-view-attachments.scss
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
.document-sidebar-view-attachments {
|
||||
margin: 0;
|
||||
|
||||
> .upload-document-files {
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
color: $color-gray;
|
||||
border: 1px solid $color-stroke;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.7rem;
|
||||
@include ease-in();
|
||||
|
||||
&:hover {
|
||||
border-color: $color-link;
|
||||
color: $color-link;
|
||||
}
|
||||
|
||||
> .dz-preview,
|
||||
.dz-processing {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
> .list {
|
||||
margin: 0 0 50px;
|
||||
padding: 7px 0;
|
||||
|
||||
> .item {
|
||||
color: $color-off-black;
|
||||
margin: 0;
|
||||
padding: 10px 0;
|
||||
font-size: 0.9rem;
|
||||
list-style-type: none;
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
> .icon {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
> a {
|
||||
@extend .truncate;
|
||||
width: 200px;
|
||||
color: $color-gray;
|
||||
|
||||
&:hover {
|
||||
color: $color-link;
|
||||
}
|
||||
|
||||
> .file {
|
||||
@extend .truncate;
|
||||
display: inline-block;
|
||||
font-size: 0.9rem;
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
> .action {
|
||||
float: right;
|
||||
margin-top: -2px;
|
||||
margin-right: 5px;
|
||||
@extend .cursor-pointer;
|
||||
@extend .transition-all;
|
||||
display: none;
|
||||
color: $color-gray;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.action {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.delete-attachment-dialog,
|
||||
.delete-page-dialog {
|
||||
display: none;
|
||||
}
|
||||
57
gui/app/styles/view/document/sidebar-view-index.scss
Normal file
57
gui/app/styles/view/document/sidebar-view-index.scss
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
.document-sidebar-view-index {
|
||||
margin: 0;
|
||||
|
||||
>.structure {
|
||||
> .toc-controls {
|
||||
margin: 0;
|
||||
color: $color-gray;
|
||||
|
||||
> .round-button-mono {
|
||||
> .material-icons {
|
||||
color: $color-link;
|
||||
}
|
||||
}
|
||||
|
||||
> .disabled {
|
||||
@extend .cursor-not-allowed;
|
||||
color: $color-stroke;
|
||||
border-color: $color-stroke;
|
||||
|
||||
> .material-icons {
|
||||
color: $color-stroke;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .index-list {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
font-size: 13px;
|
||||
overflow-x: hidden;
|
||||
list-style-type: none;
|
||||
margin: 20px 0 0;
|
||||
|
||||
.item {
|
||||
padding: 4px 0;
|
||||
text-overflow: ellipsis;
|
||||
word-wrap: break-word;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
@extend .no-select;
|
||||
|
||||
> .link {
|
||||
color: $color-off-black;
|
||||
|
||||
&:hover {
|
||||
color: $color-link;
|
||||
}
|
||||
}
|
||||
|
||||
> .selected {
|
||||
color: $color-link;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
356
gui/app/styles/view/document/view.scss
Normal file
356
gui/app/styles/view/document/view.scss
Normal file
|
|
@ -0,0 +1,356 @@
|
|||
.zone-document-content {
|
||||
> .back-to-space {
|
||||
margin: 10px 0;
|
||||
|
||||
> a {
|
||||
> .regular-button {
|
||||
> .name {
|
||||
// max-width: 150px;
|
||||
// @extend .truncate;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.doc-title {
|
||||
font-size: 2rem;
|
||||
margin: 30px 0 10px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.doc-excerpt {
|
||||
font-size: 1rem;
|
||||
color: $color-gray;
|
||||
margin: 0 0 45px;
|
||||
}
|
||||
|
||||
.edit-document-heading {
|
||||
margin: 30px 0 0 0;
|
||||
|
||||
.edit-doc-title {
|
||||
> input {
|
||||
font-size: 2rem;
|
||||
font-weight: normal;
|
||||
margin: 0 0 10px;
|
||||
color: $color-wysiwyg;
|
||||
}
|
||||
}
|
||||
|
||||
.edit-doc-excerpt {
|
||||
font-size: 1rem;
|
||||
margin: 0 0 10px;
|
||||
color: $color-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.document-view {
|
||||
margin: 0 0 50px 0;
|
||||
|
||||
.is-a-page {
|
||||
@include content-container();
|
||||
@include ease-in();
|
||||
@extend .transition-all;
|
||||
overflow-x: auto;
|
||||
|
||||
&:hover {
|
||||
.page-title {
|
||||
> .page-toolbar {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-title {
|
||||
> .page-toolbar {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.is-a-tab {
|
||||
@include content-container();
|
||||
@include ease-in();
|
||||
|
||||
.icon {
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
vertical-align: bottom;
|
||||
margin-right: 5px;
|
||||
|
||||
> .img {
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
> .title {
|
||||
font-size: 1.3rem;
|
||||
font-weight: normal;
|
||||
color: $color-off-black;
|
||||
letter-spacing: 0.5px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.page-title {
|
||||
> .page-toolbar {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-title {
|
||||
> .page-toolbar {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-min {
|
||||
padding: 0px 50px;
|
||||
height: 65px;
|
||||
overflow: hidden;
|
||||
cursor: default;
|
||||
|
||||
.page-title {
|
||||
> .page-toolbar {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-max {
|
||||
padding: 25px 50px;
|
||||
height: auto;
|
||||
overflow: auto;
|
||||
cursor: normal;
|
||||
}
|
||||
|
||||
.section-divider {
|
||||
height: 60px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.start-section {
|
||||
@extend .no-select;
|
||||
height: 60px;
|
||||
background-color: transparent;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
> .start-button {
|
||||
display: none;
|
||||
text-align: center;
|
||||
padding-top: 20px;
|
||||
color: $color-green;
|
||||
font-size: 1rem;
|
||||
position: relative;
|
||||
|
||||
> .round-button {
|
||||
opacity: 0.6 !important;
|
||||
}
|
||||
|
||||
> .label {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
> .line {
|
||||
display: inline-block;
|
||||
height: 1px;
|
||||
border: 1px solid $color-green;
|
||||
width: 100px;
|
||||
margin: 0 20px 0 20px;
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-of-type {
|
||||
height: 30px;
|
||||
|
||||
> .start-button {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.start-section-empty-state {
|
||||
> .start-button {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.new-section-wizard {
|
||||
@include border-radius(2px);
|
||||
margin: 0 0 30px 0;
|
||||
padding: 30px;
|
||||
border: 1px solid $color-stroke;
|
||||
background-color: $color-off-white;
|
||||
display: none;
|
||||
|
||||
.section-name {
|
||||
font-weight: bold;
|
||||
font-size: 1.5rem;
|
||||
margin: 0 0 30px 0;
|
||||
color: $color-black;
|
||||
}
|
||||
|
||||
.template-caption {
|
||||
color: $color-gray;
|
||||
margin: 10px 0 10px 0;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
> .list-wrapper {
|
||||
height: 440px;
|
||||
overflow-y: auto;
|
||||
|
||||
> .preset-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
> .item {
|
||||
@include ease-in();
|
||||
@include border-radius(4px);
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
border: 1px solid $color-stroke;
|
||||
background-color: $color-white;
|
||||
margin: 0 20px 20px 0;
|
||||
padding: 15px 0 0 20px;
|
||||
width: 200px;
|
||||
height: 60px;
|
||||
|
||||
&:hover {
|
||||
@include ease-in();
|
||||
border-color: $color-link;
|
||||
}
|
||||
|
||||
.icon {
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
margin-right: 10px;
|
||||
float: left;
|
||||
|
||||
> .img {
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
> .title {
|
||||
font-size: 1rem;
|
||||
font-weight: normal;
|
||||
color: $color-off-black;
|
||||
letter-spacing: 0.5px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .block-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
> .item {
|
||||
@include ease-in();
|
||||
@include border-radius(4px);
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
border: 1px solid $color-stroke;
|
||||
background-color: $color-white;
|
||||
margin: 0 20px 20px 0;
|
||||
padding: 12px 0 0 20px;
|
||||
width: 423px;
|
||||
height: 60px;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
@include ease-in();
|
||||
border-color: $color-link;
|
||||
|
||||
> .block-actions {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
> .block-actions {
|
||||
@include ease-in();
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 8px;
|
||||
|
||||
.material-icons {
|
||||
color: $color-stroke;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
> .details {
|
||||
width: 350px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
> .title {
|
||||
font-size: 1rem;
|
||||
font-weight: normal;
|
||||
color: $color-off-black;
|
||||
letter-spacing: 0.5px;
|
||||
margin-top: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
> .desc {
|
||||
color: $color-gray;
|
||||
font-size: 0.8rem;
|
||||
margin-top: 5px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.document-view-unified {
|
||||
margin: 0 0 50px 0;
|
||||
@include content-container();
|
||||
@include ease-in();
|
||||
@extend .transition-all;
|
||||
|
||||
.is-a-page, .is-a-tab {
|
||||
padding: 0 !important;
|
||||
box-shadow: none !important;
|
||||
background-color: transparent !important;
|
||||
@include border-radius(0px);
|
||||
}
|
||||
|
||||
.tab-min, .tab-max {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.start-section {
|
||||
height: 50px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-page-toolbar {
|
||||
width: 300px;
|
||||
}
|
||||
138
gui/app/styles/view/document/wysiwyg.scss
Normal file
138
gui/app/styles/view/document/wysiwyg.scss
Normal file
|
|
@ -0,0 +1,138 @@
|
|||
.wysiwyg {
|
||||
font-size: 17px;
|
||||
line-height: 30px;
|
||||
color: $color-wysiwyg;
|
||||
|
||||
table {
|
||||
@include border(1px);
|
||||
|
||||
td {
|
||||
padding: 5px 7px !important;
|
||||
@include border(1px);
|
||||
|
||||
p {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ol,
|
||||
ul {
|
||||
margin: 15px 0;
|
||||
padding: 0 0 0 40px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
ol {
|
||||
li {
|
||||
list-style-type: decimal;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
li {
|
||||
list-style-type: disc;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.7rem;
|
||||
font-weight: bold;
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.3rem;
|
||||
font-weight: bold;
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
h7,
|
||||
h8,
|
||||
h9 {
|
||||
font-size: 1.1rem;
|
||||
font-weight: bold;
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
h7,
|
||||
h8,
|
||||
h9 {
|
||||
.page-title {
|
||||
color: $color-off-black;
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
background-color: $color-off-white;
|
||||
padding: 10px;
|
||||
border: 1px solid $color-border;
|
||||
@include border-radius(3px);
|
||||
}
|
||||
|
||||
.code-mirror {
|
||||
background-color: none;
|
||||
padding: 10px;
|
||||
border: none;
|
||||
@include border-radius(0px);
|
||||
}
|
||||
|
||||
.wysiwyg-table {
|
||||
border: none;
|
||||
border-collapse: collapse;
|
||||
empty-cells: show;
|
||||
max-width: 100% !important;
|
||||
margin: 0 !important;
|
||||
|
||||
.fr-dashed-borders td,
|
||||
.fr-dashed-borders th {
|
||||
border-style: dashed;
|
||||
}
|
||||
|
||||
.fr-alternate-rows tbody tr:nth-child(2n) {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
border: 1px solid #f3f5f8;
|
||||
padding: 5px 7px !important;
|
||||
}
|
||||
|
||||
td:empty,
|
||||
th:empty {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
td.fr-highlighted,
|
||||
th.fr-highlighted {
|
||||
border: 1px double red;
|
||||
}
|
||||
|
||||
td.fr-thick,
|
||||
th.fr-thick {
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
th {
|
||||
background: #f7f6f6;
|
||||
}
|
||||
}
|
||||
}
|
||||
4
gui/app/styles/view/folder/all.scss
Normal file
4
gui/app/styles/view/folder/all.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
@import "document.scss";
|
||||
@import "folder.scss";
|
||||
@import "wizard.scss";
|
||||
@import "sidebar.scss";
|
||||
127
gui/app/styles/view/folder/document.scss
Normal file
127
gui/app/styles/view/folder/document.scss
Normal file
|
|
@ -0,0 +1,127 @@
|
|||
.folder-heading {
|
||||
margin: 0 0 55px 0;
|
||||
|
||||
.folder-title {
|
||||
font-size: 2rem;
|
||||
margin: 0 0 10px 0;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.edit-folder-heading {
|
||||
margin: 0 0 10px 0;
|
||||
|
||||
.edit-folder-title {
|
||||
> input {
|
||||
font-size: 2rem;
|
||||
font-weight: normal;
|
||||
margin: 0 0 10px;
|
||||
color: $color-wysiwyg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.documents-list {
|
||||
.document-item {
|
||||
@include content-container();
|
||||
margin: 0;
|
||||
position: relative;
|
||||
transition: 0.3s;
|
||||
|
||||
&: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-off-black;
|
||||
}
|
||||
|
||||
> .title {
|
||||
font-size: 18px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
> .snippet {
|
||||
color: $color-gray;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wizard-item {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.no-wizard-item {
|
||||
margin: 50px 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.selected-card {
|
||||
background-color: $color-card-active !important;
|
||||
|
||||
> .checkbox {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.move-document-options,
|
||||
.start-document-options {
|
||||
height: 200px;
|
||||
overflow-y: auto;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
> .option {
|
||||
vertical-align: bottom;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
||||
> .material-icons {
|
||||
font-size: 0.9rem;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
> .selected {
|
||||
color: $color-link;
|
||||
}
|
||||
}
|
||||
45
gui/app/styles/view/folder/folder.scss
Normal file
45
gui/app/styles/view/folder/folder.scss
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
.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-off-black;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: $color-link;
|
||||
}
|
||||
|
||||
> .item {
|
||||
list-style-type: none;
|
||||
list-style: none;
|
||||
margin: 0 0 5px;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> .selected {
|
||||
color: $color-link;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
40
gui/app/styles/view/folder/sidebar.scss
Normal file
40
gui/app/styles/view/folder/sidebar.scss
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
.sidebar-folder-share {
|
||||
> .input-control {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-permissions {
|
||||
> .input-control {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
> .permissions-table {
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 0 0 30px 0;
|
||||
width: 100%;
|
||||
|
||||
> thead {
|
||||
> tr {
|
||||
> th {
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> tbody {
|
||||
> tr {
|
||||
> td {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
> td:nth-child(2), td:nth-child(3) {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
162
gui/app/styles/view/folder/wizard.scss
Normal file
162
gui/app/styles/view/folder/wizard.scss
Normal file
|
|
@ -0,0 +1,162 @@
|
|||
.start-document {
|
||||
@extend .no-select;
|
||||
height: 60px;
|
||||
background-color: transparent;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
> .start-button {
|
||||
display: none;
|
||||
text-align: center;
|
||||
padding-top: 20px;
|
||||
color: $color-green;
|
||||
font-size: 1rem;
|
||||
position: relative;
|
||||
|
||||
> .round-button {
|
||||
opacity: 0.6 !important;
|
||||
}
|
||||
|
||||
> .label {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
> .line {
|
||||
display: inline-block;
|
||||
height: 1px;
|
||||
border: 1px solid $color-green;
|
||||
width: 100px;
|
||||
margin: 0 20px 0 20px;
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-of-type {
|
||||
height: 30px;
|
||||
|
||||
> .start-button {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.start-document-empty-state {
|
||||
> .start-button {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.new-document-wizard {
|
||||
@include border-radius(2px);
|
||||
margin: 0 0 30px 0;
|
||||
padding: 30px;
|
||||
border: 1px solid $color-stroke;
|
||||
background-color: $color-off-white;
|
||||
display: none;
|
||||
|
||||
.document-name {
|
||||
font-weight: bold;
|
||||
font-size: 1.5rem;
|
||||
margin: 0 0 30px 0;
|
||||
color: $color-black;
|
||||
}
|
||||
|
||||
.import-document-button {
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
margin: 0 0 30px 0;
|
||||
text-align: center;
|
||||
color: $color-gray;
|
||||
border: 1px solid $color-stroke;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
line-height: 1.7rem;
|
||||
@include ease-in();
|
||||
|
||||
&:hover {
|
||||
border-color: $color-link;
|
||||
color: $color-link;
|
||||
}
|
||||
|
||||
> .dz-preview,
|
||||
.dz-processing {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
> .list-wrapper {
|
||||
// height: 440px;
|
||||
// overflow-y: auto;
|
||||
|
||||
> .template-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
> .item {
|
||||
@include ease-in();
|
||||
@include border-radius(4px);
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
border: 1px solid $color-stroke;
|
||||
background-color: $color-white;
|
||||
margin: 0 20px 20px 0;
|
||||
padding: 12px 0 0 20px;
|
||||
width: 423px;
|
||||
height: 60px;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
@include ease-in();
|
||||
border-color: $color-link;
|
||||
|
||||
> .template-actions {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
> .template-actions {
|
||||
@include ease-in();
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 8px;
|
||||
|
||||
.material-icons {
|
||||
color: $color-stroke;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
> .details {
|
||||
width: 350px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
> .title {
|
||||
font-size: 1rem;
|
||||
font-weight: normal;
|
||||
color: $color-off-black;
|
||||
letter-spacing: 0.5px;
|
||||
margin-top: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
> .desc {
|
||||
color: $color-gray;
|
||||
font-size: 0.8rem;
|
||||
margin-top: 5px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
159
gui/app/styles/view/layout-left-sidebar.scss
Normal file
159
gui/app/styles/view/layout-left-sidebar.scss
Normal file
|
|
@ -0,0 +1,159 @@
|
|||
$sidebar-width: 400px;
|
||||
|
||||
#wrapper {
|
||||
padding-left: 0;
|
||||
margin-right: 60px;
|
||||
-webkit-transition: all 0.5s ease;
|
||||
-moz-transition: all 0.5s ease;
|
||||
-o-transition: all 0.5s ease;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
#sidebar-wrapper {
|
||||
z-index: 888;
|
||||
position: fixed;
|
||||
overflow-x: hidden;
|
||||
left: $sidebar-width;
|
||||
top: 0;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
margin-left: -$sidebar-width;
|
||||
border-right: 1px solid $color-stroke;
|
||||
overflow-y: auto;
|
||||
-webkit-transition: all 0.5s ease;
|
||||
-moz-transition: all 0.5s ease;
|
||||
-o-transition: all 0.5s ease;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
#page-content-wrapper {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
// position: absolute;
|
||||
padding: 30px;
|
||||
margin: 0 auto;
|
||||
margin-top: 30px;
|
||||
|
||||
.page-content-title {
|
||||
font-size: 2rem;
|
||||
margin: 30px 0 10px;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width:768px) {
|
||||
#wrapper {
|
||||
padding-left: $sidebar-width;
|
||||
}
|
||||
|
||||
#sidebar-wrapper {
|
||||
width: $sidebar-width;
|
||||
}
|
||||
|
||||
// #page-content-wrapper {
|
||||
// padding: 30px;
|
||||
// position: relative;
|
||||
// }
|
||||
}
|
||||
|
||||
.sidebar-toolbar {
|
||||
display: inline-block;
|
||||
width: 60px;
|
||||
background-color: $color-primary;
|
||||
text-align: center;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
padding: 40px 0 0 0;
|
||||
|
||||
> .selected {
|
||||
background-color: $color-link !important;
|
||||
border: 1px solid $color-link !important;
|
||||
|
||||
> .material-icons {
|
||||
color: $color-white !important;
|
||||
}
|
||||
}
|
||||
|
||||
> .round-button-mono {
|
||||
background-color: $color-off-white;
|
||||
border: 1px solid $color-off-white;
|
||||
|
||||
> .material-icons {
|
||||
@include ease-in();
|
||||
color: $color-gray;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> .material-icons {
|
||||
color: $color-link;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-common {
|
||||
display: inline-block;
|
||||
width: 340px;
|
||||
padding: 40px 20px 0px 20px;
|
||||
margin-left: 60px;
|
||||
|
||||
> .pinner {
|
||||
cursor: pointer;
|
||||
|
||||
> .material-icons {
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
> .template-header {
|
||||
color: $color-goldy;
|
||||
font-size: 1.5em;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.zone-sidebar-page-title {
|
||||
color: $color-primary;
|
||||
font-size: 1.3rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.zone-sidebar-page-info {
|
||||
color: $color-gray;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-wrapper {
|
||||
padding: 40px 20px 40px 20px;
|
||||
margin-left: 60px;
|
||||
|
||||
.sidebar-panel {
|
||||
width: 300px;
|
||||
|
||||
> .title {
|
||||
color: $color-primary;
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.folder-sidebar-form-wrapper, .document-sidebar-form-wrapper {
|
||||
padding: 20px;
|
||||
border: 1px solid $color-stroke;
|
||||
@include border-radius(3px);
|
||||
background-color: $color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
121
gui/app/styles/view/layout-right-nav.scss
Normal file
121
gui/app/styles/view/layout-right-nav.scss
Normal file
|
|
@ -0,0 +1,121 @@
|
|||
.zone-navigation {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 60px;
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
z-index: 999;
|
||||
overflow-x: hidden;
|
||||
background: $color-toolbar;
|
||||
|
||||
> .bottom-zone,
|
||||
> .top-zone {
|
||||
position: absolute;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
|
||||
> li {
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
padding: 10px 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.round-button-mono {
|
||||
> .material-icons {
|
||||
color: $color-gray;
|
||||
@include ease-in();
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> .material-icons {
|
||||
color: $color-link;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.profile-link {
|
||||
color: $color-primary;
|
||||
text-align: center;
|
||||
font-size: 1rem;
|
||||
font-style: normal;
|
||||
font-family: $font-regular;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.selected {
|
||||
.round-button-mono {
|
||||
background-color: $color-link !important;
|
||||
border: 1px solid $color-link !important;
|
||||
|
||||
> .material-icons {
|
||||
color: $color-white !important;
|
||||
}
|
||||
|
||||
> a {
|
||||
> .material-icons {
|
||||
color: $color-white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .top-zone {
|
||||
top: 0;
|
||||
padding-top: 30px;
|
||||
}
|
||||
|
||||
> .bottom-zone {
|
||||
bottom: 0;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
.pinned-zone {
|
||||
position: relative;
|
||||
top: 200px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 80px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
|
||||
> .pin {
|
||||
cursor: pointer;
|
||||
margin: 20px 0 20px 9px;
|
||||
padding: 14px 3px;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
@include ease-in();
|
||||
@include border-radius(3px);
|
||||
font-family: $font-semibold;
|
||||
font-size: 12px;
|
||||
letter-spacing: -1px;
|
||||
background-color: $color-gray;
|
||||
color: $color-white;
|
||||
|
||||
> .key {
|
||||
width: 30px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $color-link;
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
|
||||
> .sortable-ghost {
|
||||
background-color: $color-gray;
|
||||
color: $color-off-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
28
gui/app/styles/view/page-auth.scss
Normal file
28
gui/app/styles/view/page-auth.scss
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
.auth-box {
|
||||
height: 500px;
|
||||
width: 500px;
|
||||
background-color: $color-white;
|
||||
border: 1px solid $color-border;
|
||||
display: inline-block;
|
||||
border-radius : 3px;
|
||||
color: $color-off-black;
|
||||
padding: 20px 50px;
|
||||
@extend .absolute-center;
|
||||
|
||||
.logo {
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
|
||||
> img {
|
||||
height: 60px;
|
||||
margin: 40px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sso-box {
|
||||
text-align: center;
|
||||
margin-top: 150px;
|
||||
font-size: 24px;
|
||||
color: $color-gray;
|
||||
}
|
||||
92
gui/app/styles/view/page-customize.scss
Normal file
92
gui/app/styles/view/page-customize.scss
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
.page-customize {
|
||||
@include content-container();
|
||||
|
||||
.user-admin {
|
||||
margin: 30px 0;
|
||||
|
||||
> .heading {
|
||||
font-size: 1.2rem;
|
||||
color: $color-off-black;
|
||||
font-weight: bold;
|
||||
margin: 0 0 20px 0;
|
||||
}
|
||||
|
||||
> .basic-table {
|
||||
background-color: $color-white;
|
||||
border: none !important;
|
||||
font-size: 1rem;
|
||||
color: $color-off-black;
|
||||
|
||||
> thead {
|
||||
> tr {
|
||||
> th {
|
||||
height: 40px;
|
||||
font-weight: bold;
|
||||
color: $color-gray;
|
||||
}
|
||||
|
||||
> th:first-child {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
> th:last-child {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> tbody {
|
||||
> tr {
|
||||
> td {
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
|
||||
> .selector {
|
||||
> i {
|
||||
color: $color-off-black;
|
||||
}
|
||||
}
|
||||
|
||||
> .name {
|
||||
font-size: 1rem;
|
||||
color: $color-off-black;
|
||||
margin: 0 0 0 30px;
|
||||
}
|
||||
|
||||
> .email {
|
||||
font-size: 0.9rem;
|
||||
color: $color-gray;
|
||||
margin: 0 0 0 30px;
|
||||
}
|
||||
}
|
||||
|
||||
> td:first-child, td:last-child {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.inactive-user
|
||||
{
|
||||
@extend .color-red;
|
||||
font-weight: normal;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.admin-user
|
||||
{
|
||||
@extend .color-primary;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
color: $color-checkbox;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.edit-user-dialog, .delete-user-dialog {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
49
gui/app/styles/view/page-exceptions.scss
Normal file
49
gui/app/styles/view/page-exceptions.scss
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
.documize-base-exception
|
||||
{
|
||||
background-color: $color-off-white;
|
||||
@include border(1px);
|
||||
margin: 20px;
|
||||
padding: 20px;
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
color: $color-off-black;
|
||||
|
||||
display: none !important;
|
||||
|
||||
.label
|
||||
{
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
padding-right: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.documize-first-page
|
||||
{
|
||||
@extend .documize-base-exception;
|
||||
}
|
||||
|
||||
.documize-exotic-image
|
||||
{
|
||||
@extend .documize-base-exception;
|
||||
}
|
||||
|
||||
.documize-footnote
|
||||
{
|
||||
@extend .documize-base-exception;
|
||||
}
|
||||
|
||||
.documize-graphictext
|
||||
{
|
||||
@extend .documize-base-exception;
|
||||
}
|
||||
|
||||
.documize-math
|
||||
{
|
||||
@extend .documize-base-exception;
|
||||
}
|
||||
|
||||
.documize-attachment
|
||||
{
|
||||
display: none !important;
|
||||
}
|
||||
321
gui/app/styles/view/page-onboard.scss
Normal file
321
gui/app/styles/view/page-onboard.scss
Normal file
|
|
@ -0,0 +1,321 @@
|
|||
.onboarding-container {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
color: $color-off-black;
|
||||
letter-spacing: 1px;
|
||||
|
||||
.stage-1
|
||||
{
|
||||
display: block;
|
||||
|
||||
.account-name-preview
|
||||
{
|
||||
color: #fff;
|
||||
background: #b9b9b9 !important;
|
||||
}
|
||||
|
||||
img
|
||||
{
|
||||
margin: 100px 0 0 200px;
|
||||
}
|
||||
}
|
||||
|
||||
.stage-2
|
||||
{
|
||||
display: none;
|
||||
|
||||
.account-name-preview
|
||||
{
|
||||
color: #fff;
|
||||
background: rgba(27,117,187,1);
|
||||
background: -moz-linear-gradient(left, rgba(27,117,187,1) 0%, rgba(73,155,234,1) 100%);
|
||||
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(27,117,187,1)), color-stop(100%, rgba(73,155,234,1)));
|
||||
background: -webkit-linear-gradient(left, rgba(27,117,187,1) 0%, rgba(73,155,234,1) 100%);
|
||||
background: -o-linear-gradient(left, rgba(27,117,187,1) 0%, rgba(73,155,234,1) 100%);
|
||||
background: -ms-linear-gradient(left, rgba(27,117,187,1) 0%, rgba(73,155,234,1) 100%);
|
||||
background: linear-gradient(to right, rgba(27,117,187,1) 0%, rgba(73,155,234,1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#1b75bb", endColorstr="#499bea", GradientType=1 );
|
||||
}
|
||||
|
||||
img
|
||||
{
|
||||
margin: 100px 0 0 200px;
|
||||
}
|
||||
}
|
||||
|
||||
.note
|
||||
{
|
||||
font-size: 0.9rem;;
|
||||
font-style: italic;
|
||||
color: $color-stroke;
|
||||
}
|
||||
|
||||
.mismatch
|
||||
{
|
||||
display: none;
|
||||
color: $color-red;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.stage-3
|
||||
{
|
||||
@extend .stage-2;
|
||||
|
||||
img
|
||||
{
|
||||
margin: 100px 0 0 200px;
|
||||
}
|
||||
|
||||
#spinner-1
|
||||
{
|
||||
margin: 140px 0 0 170px;
|
||||
}
|
||||
}
|
||||
|
||||
.stage-4
|
||||
{
|
||||
@extend .stage-3;
|
||||
|
||||
a
|
||||
{
|
||||
display: block;
|
||||
font-size: 20px;
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover
|
||||
{
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.stage-5
|
||||
{
|
||||
@extend .stage-3;
|
||||
|
||||
#spinner-1
|
||||
{
|
||||
margin: 140px 0 0 170px;
|
||||
}
|
||||
}
|
||||
|
||||
.account-name-preview
|
||||
{
|
||||
color: #fff;
|
||||
height: 55px;
|
||||
width: 100%;
|
||||
font-family: Arial;
|
||||
opacity: 0.8;
|
||||
text-align: left;
|
||||
background: rgba(27,117,187,1);
|
||||
background: -moz-linear-gradient(left, rgba(27,117,187,1) 0%, rgba(73,155,234,1) 100%);
|
||||
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(27,117,187,1)), color-stop(100%, rgba(73,155,234,1)));
|
||||
background: -webkit-linear-gradient(left, rgba(27,117,187,1) 0%, rgba(73,155,234,1) 100%);
|
||||
background: -o-linear-gradient(left, rgba(27,117,187,1) 0%, rgba(73,155,234,1) 100%);
|
||||
background: -ms-linear-gradient(left, rgba(27,117,187,1) 0%, rgba(73,155,234,1) 100%);
|
||||
background: linear-gradient(to right, rgba(27,117,187,1) 0%, rgba(73,155,234,1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#1b75bb", endColorstr="#499bea", GradientType=1 );
|
||||
|
||||
.title
|
||||
{
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 400;
|
||||
margin: 18px 0 0 20px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.nav-icon
|
||||
{
|
||||
display: inline-block;
|
||||
background-image: url(img/onboard/nav-icons.png);
|
||||
background-repeat: no-repeat;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
vertical-align: top;
|
||||
z-index: 1;
|
||||
background-position: 0 -75px;
|
||||
margin: 15px 0 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar
|
||||
{
|
||||
margin-left: -15px;
|
||||
padding: 100px 50px 50px 50px;
|
||||
overflow: auto;
|
||||
|
||||
.logo
|
||||
{
|
||||
height: 62px;
|
||||
margin-bottom: 15px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
h2
|
||||
{
|
||||
font-size: 2rem;;
|
||||
color: $color-primary;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
p
|
||||
{
|
||||
font-size: 1.3rem;
|
||||
color: $color-primary;
|
||||
}
|
||||
|
||||
p.note
|
||||
{
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
.rightbar
|
||||
{
|
||||
@extend .absolute-center;
|
||||
height: 400px;
|
||||
width: 500px;
|
||||
margin-top: 200px;
|
||||
background-color: #f6f9fc;
|
||||
position: relative;
|
||||
border-radius: 10px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 6px 20px 0 rgba(30,71,101,.1);
|
||||
}
|
||||
|
||||
input[type='email'], input[type='text'], input[type='password'] {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
// input[type='submit']
|
||||
// {
|
||||
// padding: 10px 15px;
|
||||
// background: #12A936;
|
||||
// border: 0;
|
||||
// color: $color-off-white;
|
||||
// border-radius: 3px;
|
||||
// font-weight: 500;
|
||||
// font-size: 16px;
|
||||
// -webkit-appearance: none;
|
||||
// vertical-align: bottom;
|
||||
// height: auto;
|
||||
// width: auto;
|
||||
// display: inline-block;
|
||||
// margin: 20px 0 0 0;
|
||||
// letter-spacing: 0.7px;
|
||||
// @include ease-in();
|
||||
// float: right;
|
||||
// @extend .no-outline;
|
||||
// @extend .no-select;
|
||||
//
|
||||
// &:hover
|
||||
// {
|
||||
// background: lighten(#12A936, 4%);
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// input[type='email'], input[type='text'], input[type='password']
|
||||
// {
|
||||
// padding: 5px 15px;
|
||||
// background: white;
|
||||
// border: 1px solid #e2e2e2;
|
||||
// @include border-radius(3px);
|
||||
// color: $color-off-black;
|
||||
// font-weight: bold;
|
||||
// font-size: 16px;
|
||||
// -webkit-appearance: none;
|
||||
// vertical-align: bottom;
|
||||
// width: 90%;
|
||||
// display: block;
|
||||
// margin: 20px 0 10px 0;
|
||||
// letter-spacing: 1px;
|
||||
// }
|
||||
|
||||
/*********************************************/
|
||||
/* Spinner */
|
||||
/*********************************************/
|
||||
#spinner-1, #spinner-2
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sk-spinner-wave.sk-spinner
|
||||
{
|
||||
margin: 0 auto;
|
||||
width: 170px;
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
font-size: 10px;
|
||||
display: inline-block;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.sk-spinner-wave div
|
||||
{
|
||||
background-color: #12A936;
|
||||
height: 100%;
|
||||
width: 6px;
|
||||
display: inline-block;
|
||||
-webkit-animation: sk-waveStretchDelay 1.2s infinite ease-in-out;
|
||||
animation: sk-waveStretchDelay 1.2s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.sk-spinner-wave .sk-rect2
|
||||
{
|
||||
-webkit-animation-delay: -1.1s;
|
||||
animation-delay: -1.1s;
|
||||
}
|
||||
|
||||
.sk-spinner-wave .sk-rect3
|
||||
{
|
||||
-webkit-animation-delay: -1s;
|
||||
animation-delay: -1s;
|
||||
}
|
||||
|
||||
.sk-spinner-wave .sk-rect4
|
||||
{
|
||||
-webkit-animation-delay: -0.9s;
|
||||
animation-delay: -0.9s;
|
||||
}
|
||||
|
||||
.sk-spinner-wave .sk-rect5
|
||||
{
|
||||
-webkit-animation-delay: -0.8s;
|
||||
animation-delay: -0.8s;
|
||||
}
|
||||
|
||||
@-webkit-keyframes sk-waveStretchDelay
|
||||
{
|
||||
0%, 40%, 100%
|
||||
{
|
||||
-webkit-transform: scaleY(0.4);
|
||||
transform: scaleY(0.4);
|
||||
}
|
||||
|
||||
20%
|
||||
{
|
||||
-webkit-transform: scaleY(1);
|
||||
transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sk-waveStretchDelay
|
||||
{
|
||||
0%, 40%, 100%
|
||||
{
|
||||
-webkit-transform: scaleY(0.4);
|
||||
transform: scaleY(0.4);
|
||||
}
|
||||
|
||||
20%
|
||||
{
|
||||
-webkit-transform: scaleY(1);
|
||||
transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
3
gui/app/styles/view/page-profile.scss
Normal file
3
gui/app/styles/view/page-profile.scss
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
.page-profile {
|
||||
@include content-container();
|
||||
}
|
||||
55
gui/app/styles/view/page-search.scss
Normal file
55
gui/app/styles/view/page-search.scss
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
.page-search {
|
||||
.input-control {
|
||||
> input {
|
||||
background-color: $color-sidebar;
|
||||
}
|
||||
}
|
||||
|
||||
.search-results {
|
||||
> .heading {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 10px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
> .list {
|
||||
margin-top: 20px;
|
||||
list-style: none;
|
||||
|
||||
> .item {
|
||||
@include content-container();
|
||||
cursor: pointer;
|
||||
margin-bottom: 30px;
|
||||
|
||||
> .link {
|
||||
text-decoration: none;
|
||||
color: $color-off-black;
|
||||
|
||||
&:hover {
|
||||
color: $color-link;
|
||||
}
|
||||
|
||||
> .title {
|
||||
display: inline-block;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
> .folder {
|
||||
font-size: 0.8rem;
|
||||
color: $color-gray;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
> .excerpt {
|
||||
margin-top: 1rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
> .chips {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
57
gui/app/styles/widget/widget-avatar.scss
Normal file
57
gui/app/styles/widget/widget-avatar.scss
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
.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;
|
||||
}
|
||||
|
||||
.avatar-picker {
|
||||
background-color: $color-off-white;
|
||||
@include border-radius(20px);
|
||||
@include ease-in();
|
||||
padding: 7px 0 0 0;
|
||||
letter-spacing: 1px;
|
||||
text-align: center;
|
||||
height: 35px;
|
||||
width: 35px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
> i {
|
||||
color: $color-link;
|
||||
}
|
||||
}
|
||||
|
||||
> i {
|
||||
color: $color-gray;
|
||||
font-size: 1.4rem;
|
||||
@include ease-in();
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-remover {
|
||||
&:hover {
|
||||
color: $color-white;
|
||||
background-color: $color-red;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
316
gui/app/styles/widget/widget-button.scss
Normal file
316
gui/app/styles/widget/widget-button.scss
Normal file
|
|
@ -0,0 +1,316 @@
|
|||
// Copyright (c) 2015 Documize Inc.
|
||||
|
||||
@mixin button-hover-state($bg) {
|
||||
&:hover {
|
||||
background-color: lighten($bg, 3%);
|
||||
@extend .z-depth-tiny;
|
||||
}
|
||||
}
|
||||
|
||||
.square-button-mono {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
line-height: 31px;
|
||||
padding: 0;
|
||||
border-radius: 2px;
|
||||
transition: .3s;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
border: 1px solid $color-gray;
|
||||
text-align: center;
|
||||
@extend .no-select;
|
||||
@include ease-in();
|
||||
|
||||
&:hover {
|
||||
@extend .z-depth-tiny;
|
||||
}
|
||||
|
||||
i {
|
||||
color: $color-gray;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&:before {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.round-button-mono {
|
||||
@extend .no-select;
|
||||
@include ease-in();
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
line-height: 34px;
|
||||
padding: 0;
|
||||
border-radius: 50%;
|
||||
transition: .3s;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
border: 1px solid $color-stroke;
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
background-color: transparent;
|
||||
|
||||
&:hover {
|
||||
@extend .z-depth-tiny;
|
||||
}
|
||||
|
||||
i {
|
||||
color: $color-stroke;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:before {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.square-button-white {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
line-height: 31px;
|
||||
padding: 0;
|
||||
border-radius: 2px;
|
||||
transition: .3s;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
background-color: $color-white;
|
||||
border: 1px solid $color-stroke;
|
||||
text-align: center;
|
||||
@extend .no-select;
|
||||
@include ease-in();
|
||||
|
||||
&:hover {
|
||||
@extend .z-depth-tiny;
|
||||
}
|
||||
|
||||
i {
|
||||
color: $color-gray;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&:before {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.button-red-text {
|
||||
&:hover {
|
||||
> .material-icons {
|
||||
@include ease-in();
|
||||
color: $color-red !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.round-button {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
line-height: 36px;
|
||||
padding: 0;
|
||||
border-radius: 50%;
|
||||
transition: .3s;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
@extend .no-select;
|
||||
@include ease-in();
|
||||
font-size: 1.2rem;
|
||||
|
||||
> i {
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
&:before {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.round-button-small {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
font-size: 0.9rem;
|
||||
|
||||
> .material-icons {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
.square-button {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
line-height: 34px;
|
||||
padding: 0;
|
||||
border-radius: 2px;
|
||||
transition: .3s;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
@extend .no-select;
|
||||
@include ease-in();
|
||||
|
||||
> i {
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
&:before {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.regular-button {
|
||||
text-decoration: none;
|
||||
padding: 0 1rem;
|
||||
text-align: center;
|
||||
letter-spacing: .5px;
|
||||
transition: .2s ease-out;
|
||||
border-radius: 2px;
|
||||
display: inline-block;
|
||||
height: 32px;
|
||||
line-height: 34px;
|
||||
font-size: 0.9em;
|
||||
outline: 0;
|
||||
text-transform: uppercase;
|
||||
vertical-align: middle;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
color: $color-white;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
@extend .no-select;
|
||||
@include ease-in();
|
||||
|
||||
> .name {
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.button-red {
|
||||
background-color: $color-red;
|
||||
@include button-hover-state($color-red);
|
||||
}
|
||||
|
||||
.button-blue {
|
||||
background-color: $color-blue;
|
||||
@include button-hover-state($color-blue);
|
||||
}
|
||||
|
||||
.button-green {
|
||||
background-color: $color-green;
|
||||
@include button-hover-state($color-green);
|
||||
}
|
||||
|
||||
.button-gray {
|
||||
background-color: $color-gray;
|
||||
@include button-hover-state($color-gray);
|
||||
}
|
||||
|
||||
.button-white {
|
||||
border: 1px solid $color-stroke;
|
||||
background-color: $color-white;
|
||||
color: $color-blue;
|
||||
@include button-hover-state($color-white);
|
||||
}
|
||||
|
||||
.button-black {
|
||||
border: none;
|
||||
background-color: $color-off-black;
|
||||
color: $color-white;
|
||||
@include button-hover-state($color-black);
|
||||
}
|
||||
|
||||
.button-transparent {
|
||||
background-color: transparent;
|
||||
color: $color-gray;
|
||||
border: 1px solid $color-gray;
|
||||
}
|
||||
|
||||
.flat-button {
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
color: $color-off-black;
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
text-decoration: none;
|
||||
padding: 0 0.7rem;
|
||||
text-align: center;
|
||||
letter-spacing: .5px;
|
||||
transition: .2s ease-out;
|
||||
border-radius: 2px;
|
||||
display: inline-block;
|
||||
height: 33px;
|
||||
line-height: 34px;
|
||||
font-size: 0.9em;
|
||||
outline: 0;
|
||||
text-transform: uppercase;
|
||||
vertical-align: middle;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
@extend .no-select;
|
||||
@include ease-in();
|
||||
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
border: 1px solid #e2e2e2;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: $color-off-white;
|
||||
}
|
||||
}
|
||||
|
||||
.flat-red {
|
||||
color: $color-red;
|
||||
|
||||
&:hover {
|
||||
border: 1px solid $color-red;
|
||||
}
|
||||
}
|
||||
|
||||
.flat-blue {
|
||||
color: $color-blue;
|
||||
|
||||
&:hover {
|
||||
border: 1px solid $color-blue;
|
||||
}
|
||||
}
|
||||
|
||||
.flat-green {
|
||||
color: $color-green;
|
||||
|
||||
&:hover {
|
||||
border: 1px solid $color-green;
|
||||
}
|
||||
}
|
||||
|
||||
.flat-gray {
|
||||
color: $color-gray;
|
||||
|
||||
&:hover {
|
||||
border: 1px solid $color-gray;
|
||||
}
|
||||
}
|
||||
|
||||
.button-gap {
|
||||
width: 5px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
@extend .no-select;
|
||||
}
|
||||
68
gui/app/styles/widget/widget-card.scss
Normal file
68
gui/app/styles/widget/widget-card.scss
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
.base-card {
|
||||
border: 1px solid $color-border;
|
||||
display: inline-block;
|
||||
border-radius : 3px;
|
||||
background-color: $color-white;
|
||||
|
||||
&:hover {
|
||||
@extend .z-depth-half;
|
||||
background-color: $color-card-active;
|
||||
border-color: $color-card-active;
|
||||
transition: 0.2s all ease;
|
||||
}
|
||||
}
|
||||
|
||||
.content-card {
|
||||
@extend .base-card;
|
||||
margin: 0 12px 12px 0;
|
||||
padding: 20px 20px;
|
||||
width: 200px;
|
||||
height: 250px;
|
||||
position: relative;
|
||||
|
||||
.title {
|
||||
font-size: 1rem;
|
||||
font-family: "open_sanssemibold";
|
||||
height: 3rem;
|
||||
overflow: hidden;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.snippet {
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.1rem;
|
||||
height: 2rem;
|
||||
overflow: hidden;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.stacked-card {
|
||||
@extend .base-card;
|
||||
padding: 20px 20px;
|
||||
position: relative;
|
||||
|
||||
.title {
|
||||
font-size: 1rem;
|
||||
font-family: "open_sanssemibold";
|
||||
margin-bottom: 0.75rem;
|
||||
color: $color-off-black;
|
||||
}
|
||||
|
||||
.snippet {
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.1rem;
|
||||
margin-bottom: 0.75rem;
|
||||
color: $color-stroke;
|
||||
}
|
||||
}
|
||||
|
||||
.cards-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
> li {
|
||||
list-type: none;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
27
gui/app/styles/widget/widget-checkbox.scss
Normal file
27
gui/app/styles/widget/widget-checkbox.scss
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
.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.4rem;
|
||||
color: $color-gray;
|
||||
vertical-align: top;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
> .selected {
|
||||
color: $color-link;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $color-link;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-checkbox-selected {
|
||||
color: $color-link;
|
||||
}
|
||||
46
gui/app/styles/widget/widget-chip.scss
Normal file
46
gui/app/styles/widget/widget-chip.scss
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
.chip {
|
||||
display: inline-block;
|
||||
border-radius: 3px;
|
||||
border: 1px solid $color-chip-border;
|
||||
padding: 0;
|
||||
height: 25px;
|
||||
line-height: 0;
|
||||
margin: 0 5px 10px 0;
|
||||
background-color: $color-chip;
|
||||
color: $color-chip-text;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
> .chip-text {
|
||||
display: inline-block;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: $color-chip-text;
|
||||
padding: 11px 10px 0 10px;
|
||||
letter-spacing: 0.7px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
> i.material-icons {
|
||||
color: $color-chip-text;
|
||||
font-size: 13px;
|
||||
margin: 13px 8px 0 0;
|
||||
padding: 0;
|
||||
line-height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.chip-action {
|
||||
@extend .chip;
|
||||
background-color: $color-white;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
> .chip-text {
|
||||
color: $color-chip-text;
|
||||
}
|
||||
}
|
||||
137
gui/app/styles/widget/widget-dropdown.scss
Normal file
137
gui/app/styles/widget/widget-dropdown.scss
Normal file
|
|
@ -0,0 +1,137 @@
|
|||
// https://github.com/HubSpot/drop
|
||||
|
||||
.drop-element {
|
||||
box-sizing: border-box;
|
||||
display: none;
|
||||
z-index: 999;
|
||||
|
||||
&:after, &:before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
|
||||
&:after, &:before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
&.drop-open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.drop-theme-basic {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
|
||||
.drop-content {
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
font-family: inherit;
|
||||
background: $color-white;
|
||||
color: $color-off-black;
|
||||
padding: 1.5em 2.5em;
|
||||
line-height: 1.5em;
|
||||
|
||||
> .dropdown-dialog {
|
||||
@extend .clearfix;
|
||||
|
||||
.content {
|
||||
> p {
|
||||
margin: 7px 0;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
> .heading {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
margin-top: 15px;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.drop-theme-menu {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
|
||||
.drop-content {
|
||||
border-radius: 2px;
|
||||
padding: 10px 0 7px 0;
|
||||
min-width: 125px;
|
||||
@extend .z-depth-1;
|
||||
background: $color-white;
|
||||
color: $color-off-black;
|
||||
|
||||
.dropdown-menu {
|
||||
> ul.menu
|
||||
{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
> li.item {
|
||||
font-size: 0.9em;
|
||||
padding: 7px 14px 7px 14px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: $color-link;
|
||||
// font-weight: bold;
|
||||
}
|
||||
|
||||
a, a:visited {
|
||||
text-decoration: none;
|
||||
color: $color-off-black;
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
|
||||
&:hover {
|
||||
color: $color-link;
|
||||
// font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
> li.danger {
|
||||
color: $color-red;
|
||||
|
||||
&:hover {
|
||||
color: $color-red;
|
||||
// font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
> li.divider {
|
||||
height: 1px;
|
||||
border-top: 1px solid $color-border;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
> li.disabled {
|
||||
color: $color-stroke !important;
|
||||
font-weight: normal !important;
|
||||
@extend .cursor-not-allowed;
|
||||
|
||||
a, a:visited {
|
||||
color: $color-stroke !important;
|
||||
|
||||
&:hover {
|
||||
color: $color-stroke !important;
|
||||
font-weight: normal !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
215
gui/app/styles/widget/widget-input.scss
Normal file
215
gui/app/styles/widget/widget-input.scss
Normal file
|
|
@ -0,0 +1,215 @@
|
|||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.input-control {
|
||||
position: relative;
|
||||
margin-bottom: 50px;
|
||||
|
||||
> label {
|
||||
color: $color-input;
|
||||
font-size: 1.1em;
|
||||
font-weight: normal;
|
||||
font-family: $font-semibold;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
> .tip {
|
||||
color: $color-gray;
|
||||
font-size: 0.9em;
|
||||
margin: 5px 0 10px;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
font-family: $font-light;
|
||||
}
|
||||
|
||||
> input,
|
||||
textarea {
|
||||
font-size: 1em;
|
||||
padding: 8px 0 10px;
|
||||
margin: 0 0 15px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
border: none;
|
||||
border-bottom: 1px solid $color-input;
|
||||
height: 2.3rem;
|
||||
outline: none;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-bottom: 1px solid $color-primary !important;
|
||||
box-shadow: 0 1px 0 0 $color-primary !important;
|
||||
transition: 0.2s ease all;
|
||||
-moz-transition: 0.2s ease all;
|
||||
-webkit-transition: 0.2s ease all;
|
||||
}
|
||||
}
|
||||
|
||||
> textarea {
|
||||
resize: none;
|
||||
height: auto !important;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
> select,
|
||||
> div select {
|
||||
background-color: $color-white;
|
||||
padding: 5px;
|
||||
border: 1px solid $color-input;
|
||||
border-radius: 2px;
|
||||
height: 2.3rem;
|
||||
font-size: 1rem;
|
||||
display: inline-block;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border: 1px solid $color-input !important;
|
||||
box-shadow: none !important;
|
||||
transition: 0.2s ease all;
|
||||
-moz-transition: 0.2s ease all;
|
||||
-webkit-transition: 0.2s ease all;
|
||||
}
|
||||
}
|
||||
|
||||
> .checkbox {
|
||||
width: 100%;
|
||||
font-size: 1em;
|
||||
padding: 8px 0 10px;
|
||||
margin: 0 0 15px;
|
||||
display: inline-block;
|
||||
border: none;
|
||||
border-bottom: 1px solid $color-input;
|
||||
height: 2.5rem;
|
||||
outline: none;
|
||||
|
||||
&:hover {
|
||||
outline: none;
|
||||
border-bottom: 1px solid $color-input !important;
|
||||
box-shadow: 0 1px 0 0 $color-input !important;
|
||||
transition: 0.2s ease all;
|
||||
-moz-transition: 0.2s ease all;
|
||||
-webkit-transition: 0.2s ease all;
|
||||
}
|
||||
|
||||
> input[type='checkbox'] {
|
||||
font-size: 1em;
|
||||
padding: 8px 0 10px;
|
||||
margin: 0 0 15px 5px;
|
||||
display: inline-block;
|
||||
border: none;
|
||||
border-bottom: none;
|
||||
height: 1rem;
|
||||
outline: none;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-bottom: none !important;
|
||||
box-shadow: none !important;
|
||||
transition: 0.2s ease all;
|
||||
-moz-transition: 0.2s ease all;
|
||||
-webkit-transition: 0.2s ease all;
|
||||
}
|
||||
}
|
||||
|
||||
> label {
|
||||
color: $color-off-black;
|
||||
font-size: 1em;
|
||||
font-weight: normal;
|
||||
pointer-events: none;
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.error {
|
||||
border-color: $color-red;
|
||||
|
||||
&:focus {
|
||||
border-bottom: 1px solid $color-red !important;
|
||||
box-shadow: 0 1px 0 0 $color-red !important;
|
||||
}
|
||||
}
|
||||
|
||||
select.error {
|
||||
border-color: $color-red;
|
||||
|
||||
&:focus {
|
||||
border: 1px solid $color-red !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-inline {
|
||||
display: inline-block;
|
||||
cursor: default;
|
||||
width: 97%;
|
||||
|
||||
> input {
|
||||
font-size: 1em;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
border: none;
|
||||
height: auto;
|
||||
outline: none;
|
||||
display: inline-block;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-bottom: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.error-inline {
|
||||
border-left: 3px solid $color-red;
|
||||
}
|
||||
}
|
||||
|
||||
.input-transparent {
|
||||
background-color: transparent !important;
|
||||
|
||||
> input, textarea {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
.form-bordered {
|
||||
padding: 30px 40px;
|
||||
border: 10px solid $color-border;
|
||||
@include border-radius(15px);
|
||||
}
|
||||
|
||||
.form-header {
|
||||
> .title {
|
||||
font-size: 1.4rem;
|
||||
font-weight: normal;
|
||||
font-family: $font-semibold;
|
||||
pointer-events: none;
|
||||
font-weight: bold;
|
||||
color: $color-off-black;
|
||||
}
|
||||
|
||||
> .tip {
|
||||
color: $color-input;
|
||||
font-size: 1.2rem;
|
||||
margin: 5px 0 30px;
|
||||
padding: 0;
|
||||
font-family: $font-light;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.form-divider {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.widget-checkbox {
|
||||
color: $color-link;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.checkbox-gray {
|
||||
color: $color-gray !important;
|
||||
}
|
||||
25
gui/app/styles/widget/widget-notification.scss
Normal file
25
gui/app/styles/widget/widget-notification.scss
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
.user-notification {
|
||||
position: fixed;
|
||||
display: none;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
background-color: $color-toast;
|
||||
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;
|
||||
}
|
||||
27
gui/app/styles/widget/widget-radio.scss
Normal file
27
gui/app/styles/widget/widget-radio.scss
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
.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.4rem;
|
||||
color: $color-gray;
|
||||
vertical-align: top;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
> .selected {
|
||||
color: $color-link;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $color-link;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-radio-selected {
|
||||
color: $color-link;
|
||||
}
|
||||
34
gui/app/styles/widget/widget-selection.scss
Normal file
34
gui/app/styles/widget/widget-selection.scss
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
.widget-selection {
|
||||
> .option {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 5px 10px;
|
||||
text-align: left;
|
||||
@extend .no-select;
|
||||
cursor: pointer;
|
||||
// border: 1px solid $color-border;
|
||||
color: $color-off-black;
|
||||
position: relative;
|
||||
|
||||
> i.material-icons {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include ease-in();
|
||||
background-color: $color-off-white;
|
||||
}
|
||||
|
||||
> .selected {
|
||||
background-color: $color-card-active !important;
|
||||
color: $color-primary !important;
|
||||
|
||||
> i.material-icons {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
27
gui/app/styles/widget/widget-sidebar-menu.scss
Normal file
27
gui/app/styles/widget/widget-sidebar-menu.scss
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
.sidebar-menu {
|
||||
margin: 0;
|
||||
|
||||
> .options {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
> .option {
|
||||
margin-bottom: 15px;
|
||||
font-size: 1.3rem;
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
color: $color-off-black;
|
||||
@extend .no-select;
|
||||
@include ease-in();
|
||||
|
||||
&:hover {
|
||||
color: $color-link;
|
||||
}
|
||||
}
|
||||
|
||||
> .selected {
|
||||
color: $color-link;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
17
gui/app/styles/widget/widget-symbol.scss
Normal file
17
gui/app/styles/widget/widget-symbol.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
29
gui/app/styles/widget/widget-tab.scss
Normal file
29
gui/app/styles/widget/widget-tab.scss
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
.widget-tab {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0 10px;
|
||||
text-align: center;
|
||||
@extend .no-select;
|
||||
|
||||
> .tab {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 5px 10px;
|
||||
background-color: $color-off-white;
|
||||
color: $color-gray;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
margin-right: -3px;
|
||||
|
||||
&:hover {
|
||||
@include ease-in();
|
||||
background-color: $color-gray;
|
||||
color: $color-off-white;
|
||||
}
|
||||
}
|
||||
|
||||
> .selected {
|
||||
background-color: $color-gray;
|
||||
color: $color-off-white;
|
||||
}
|
||||
}
|
||||
59
gui/app/styles/widget/widget-table.scss
Normal file
59
gui/app/styles/widget/widget-table.scss
Normal 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;
|
||||
}
|
||||
201
gui/app/styles/widget/widget-tooltip.scss
Normal file
201
gui/app/styles/widget/widget-tooltip.scss
Normal file
|
|
@ -0,0 +1,201 @@
|
|||
// https://github.com/HubSpot/tooltip
|
||||
|
||||
.tooltip-element {
|
||||
z-index: 999;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:after,
|
||||
&:before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
|
||||
&:after,
|
||||
&:before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
position: absolute;
|
||||
display: none;
|
||||
|
||||
&.tooltip-open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.tooltip-theme-arrows {
|
||||
z-index: 999;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
|
||||
.tooltip-content {
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
font-family: inherit;
|
||||
background: $color-tooltip;
|
||||
color: $color-white;
|
||||
padding: 0.5em;
|
||||
font-size: 0.8em;
|
||||
line-height: 1.1em;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent;
|
||||
border-width: 8px;
|
||||
border-style: solid;
|
||||
}
|
||||
}
|
||||
|
||||
&.tooltip-element-attached-bottom.tooltip-element-attached-center .tooltip-content {
|
||||
margin-bottom: 8px;
|
||||
|
||||
&:before {
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
margin-left: -8px;
|
||||
border-top-color: $color-tooltip;
|
||||
}
|
||||
}
|
||||
|
||||
&.tooltip-element-attached-top.tooltip-element-attached-center .tooltip-content {
|
||||
margin-top: 8px;
|
||||
|
||||
&:before {
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
margin-left: -8px;
|
||||
border-bottom-color: $color-tooltip;
|
||||
}
|
||||
}
|
||||
|
||||
&.tooltip-element-attached-right.tooltip-element-attached-middle .tooltip-content {
|
||||
margin-right: 8px;
|
||||
|
||||
&:before {
|
||||
left: 100%;
|
||||
top: 50%;
|
||||
margin-top: -8px;
|
||||
border-left-color: $color-tooltip;
|
||||
}
|
||||
}
|
||||
|
||||
&.tooltip-element-attached-left.tooltip-element-attached-middle .tooltip-content {
|
||||
margin-left: 8px;
|
||||
|
||||
&:before {
|
||||
right: 100%;
|
||||
top: 50%;
|
||||
margin-top: -8px;
|
||||
border-right-color: $color-tooltip;
|
||||
}
|
||||
}
|
||||
|
||||
&.tooltip-element-attached-top {
|
||||
&.tooltip-element-attached-left.tooltip-target-attached-bottom .tooltip-content {
|
||||
margin-top: 8px;
|
||||
|
||||
&:before {
|
||||
bottom: 100%;
|
||||
left: 8px;
|
||||
border-bottom-color: $color-tooltip;
|
||||
}
|
||||
}
|
||||
|
||||
&.tooltip-element-attached-right.tooltip-target-attached-bottom .tooltip-content {
|
||||
margin-top: 8px;
|
||||
|
||||
&:before {
|
||||
bottom: 100%;
|
||||
right: 8px;
|
||||
border-bottom-color: $color-tooltip;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.tooltip-element-attached-bottom {
|
||||
&.tooltip-element-attached-left.tooltip-target-attached-top .tooltip-content {
|
||||
margin-bottom: 8px;
|
||||
|
||||
&:before {
|
||||
top: 100%;
|
||||
left: 8px;
|
||||
border-top-color: $color-tooltip;
|
||||
}
|
||||
}
|
||||
|
||||
&.tooltip-element-attached-right.tooltip-target-attached-top .tooltip-content {
|
||||
margin-bottom: 8px;
|
||||
|
||||
&:before {
|
||||
top: 100%;
|
||||
right: 8px;
|
||||
border-top-color: $color-tooltip;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.tooltip-element-attached-top {
|
||||
&.tooltip-element-attached-right.tooltip-target-attached-left .tooltip-content {
|
||||
margin-right: 8px;
|
||||
|
||||
&:before {
|
||||
top: 8px;
|
||||
left: 100%;
|
||||
border-left-color: $color-tooltip;
|
||||
}
|
||||
}
|
||||
|
||||
&.tooltip-element-attached-left.tooltip-target-attached-right .tooltip-content {
|
||||
margin-left: 8px;
|
||||
|
||||
&:before {
|
||||
top: 8px;
|
||||
right: 100%;
|
||||
border-right-color: $color-tooltip;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.tooltip-element-attached-bottom {
|
||||
&.tooltip-element-attached-right.tooltip-target-attached-left .tooltip-content {
|
||||
margin-right: 8px;
|
||||
|
||||
&:before {
|
||||
bottom: 8px;
|
||||
left: 100%;
|
||||
border-left-color: $color-tooltip;
|
||||
}
|
||||
}
|
||||
|
||||
&.tooltip-element-attached-left.tooltip-target-attached-right .tooltip-content {
|
||||
margin-left: 8px;
|
||||
|
||||
&:before {
|
||||
bottom: 8px;
|
||||
right: 100%;
|
||||
border-right-color: $color-tooltip;
|
||||
}
|
||||
}
|
||||
}
|
||||
pointer-events: none;
|
||||
|
||||
.tooltip-content {
|
||||
padding: 0.5em 1em;
|
||||
}
|
||||
}
|
||||
opacity: 0;
|
||||
|
||||
&.tooltip-open-transitionend {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.tooltip-after-open {
|
||||
transition: opacity 600ms 400ms;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
78
gui/app/styles/widget/widget.scss
Normal file
78
gui/app/styles/widget/widget.scss
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
// 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);
|
||||
}
|
||||
|
||||
@import "widget-avatar";
|
||||
@import "widget-button";
|
||||
@import "widget-card";
|
||||
@import "widget-chip";
|
||||
@import "widget-dropdown";
|
||||
@import "widget-input";
|
||||
@import "widget-notification";
|
||||
@import "widget-sidebar-menu";
|
||||
@import "widget-table";
|
||||
@import "widget-tooltip";
|
||||
@import "widget-checkbox";
|
||||
@import "widget-radio";
|
||||
@import "widget-tab";
|
||||
@import "widget-selection";
|
||||
@import "widget-symbol";
|
||||
Loading…
Add table
Add a link
Reference in a new issue